/* Vanity Ink v2: Book (after pages.css and v2.css). 10-07 order: the request (guidance left, the form right and
   sticky), How booking your tattoo appointment works under the guidance (titled steps), the deposit and booking rules as a labelled list
   beside their heading, How to prepare on a faint river of its own, then a close with no new words. */

/* the guidance column */
.book-guide .link-row{margin-top:20px}
/* the form: no heading of its own (the section's H2 sits beside it), just the required-fields note */
.form-note{margin:0 0 24px;font-size:14px;color:var(--text-muted)}
.form-note .req{font-style:normal;color:var(--purple-light)}
.field input[type=file]{padding:12px 14px;font-size:14px;color:var(--text-muted)}
.field input[type=file]::file-selector-button{margin-right:14px;padding:8px 14px;border:1px solid var(--line);background:transparent;color:var(--text);font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}

/* How booking works: the numbered steps (pages.css .next-steps) with a title per step */
.next-steps.titled li::before{font-size:30px}
.next-steps.titled h3{font-size:var(--h3);line-height:var(--ns-lh);margin:0 0 8px}
.next-steps.titled p{margin:0;text-wrap:pretty}
.book-ph{margin-top:56px;max-width:560px}

/* the rules: heading, cost link and a photo left (sticky), the labelled list right */
.price-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
.price-actions{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-top:12px}
.tlink{font:500 12px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--text);border-bottom:1px solid var(--purple);padding-bottom:4px}
.tlink:hover{color:var(--purple-light)}
.rules-img{margin-top:40px;aspect-ratio:4/5;max-width:340px}
.price-list{margin:0}
.price-list li{grid-template-columns:150px 1fr}
.price-list span{color:var(--text);text-wrap:pretty}
.price-list a{white-space:nowrap}
@media (min-width:1024px){.price-head{position:sticky;top:130px}}

/* How to prepare: a faint river of its own (Contact's retired cut c-contact-flow, shown nowhere else on Book), eased in
   out of the black under the rules, full behind the list, faded out before the finale rises.
   Elementor: an outer container, background image top center 100% auto (Mobile 180%), the overlay stops below. */
.c-book-prep{--mimg:url(../assets/marble/c-contact-flow-b.webp);--mop:.9;
  --mmask:linear-gradient(180deg,transparent 0,rgba(0,0,0,.2) 140px,rgba(0,0,0,.7) 260px,#000 380px,#000 calc(100% - 560px),rgb(0 0 0/var(--m-dim)) calc(100% - 380px),rgba(0,0,0,.3) calc(100% - 180px),transparent 100%)}
#prepare .story .txt{max-width:600px}
#prepare .dash-list{margin-top:18px}
#prepare .dash-list li{color:var(--text)}
.prep-ph{width:100%;max-width:520px}

/* the close: the button, the call link and the FAQ link, centred under the separator */
.close-actions{display:flex;flex-direction:column;align-items:center;gap:20px;position:relative;isolation:isolate}
.close-actions::before{content:"";position:absolute;inset:-60% -20%;z-index:-1;background:var(--pool)}
.close-actions .btn{padding:16px 32px}
.close-actions .link-row{margin-top:8px}

@media (max-width:1023px){
  .price-grid{grid-template-columns:1fr;gap:32px}
  .rules-img{display:none}
}
@media (max-width:767px){
  .book-ph{margin-top:40px}
  .price-list li{grid-template-columns:1fr}
}

/* the close gets a heading and a line (10-07): centred over the actions */
.book-close .close-actions h2{margin:0 0 14px;text-align:center}
.book-close .close-actions>p{max-width:520px;margin:0 auto 26px;text-align:center;color:#C4C4CB;text-wrap:pretty}
/* 10-13: the close's FAQ link runs to two lines on phones; centre its words under the button */
@media (max-width:767px){.book-close .link-row a{max-width:300px;text-align:center}}

/* ===== Layout 2 (10-13): the form first and full width, How booking works as a row ===== */
/* Shared: How booking works as a row. The heading and the consultation photo side by side, then four steps in columns,
   each a hairline, a large numeral, its title and its lines. Elementor: 2-column container, then a 4-column grid of
   Icon Box / Heading + Text. */
.b-next-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:end;margin-bottom:56px}
.b-next-head h2{margin:0}
.b-next-head .book-ph{margin:0;max-width:none;aspect-ratio:21/9}
.b-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 32px}
.b-steps li{position:relative;padding-top:28px}
.b-steps li::before{content:"";position:absolute;left:0;top:0;right:0;height:1px;background:linear-gradient(90deg,rgba(200,200,204,.55),rgba(136,88,184,.35) 45%,transparent 85%)}
.b-num{display:block;font:500 34px/1 var(--display);color:var(--purple-light);margin-bottom:16px}
.b-steps h3{font-size:var(--h3-sm);line-height:1.3;margin:0 0 12px}
.b-steps p{margin:0;font-size:var(--body-sm);text-wrap:pretty}

/* Layout 2 (Tannis 10-13): a short heading in the form card, the form across the width, two guidance notes under it */
.form-h{font-size:var(--h2-sm);margin:0 0 10px}
.b2-form{max-width:1080px;margin:0 auto}
@media (min-width:900px){
  .b2-form .form{grid-template-columns:repeat(6,minmax(0,1fr))}
  .b2-form .form>*{grid-column:span 2}
  .b2-form .form>.field:has(textarea),.b2-form .form>.field:has(select),.b2-form .form>.consent,.b2-form .form>.form-foot{grid-column:1/-1}
  .b2-form .form>.field.full:has(#f-email){grid-column:span 2}
}
.b2-notes{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1080px;margin:56px auto 0}
.b2-notes p{margin:0;text-wrap:pretty}
.b2-notes .link-row{margin-top:16px}

@media (max-width:1023px){
  .b-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b-next-head{grid-template-columns:minmax(0,1fr);gap:32px}
}
@media (max-width:767px){
  .b-steps,.b2-notes{grid-template-columns:minmax(0,1fr);gap:32px}
  .b-next-head .book-ph{aspect-ratio:3/2}
}

/* Book (10-19, Tannis): the form sits closer to the top: a shorter hero (not the full first screen) and less room above
   the form. Elementor: the hero container's min height 70vh, the form section's top padding 32px. */
.page-hero.tall.book-hero{min-height:min(70svh,700px);padding-bottom:72px}
#consultation{padding-top:32px}
@media (max-width:767px){.page-hero.tall.book-hero{min-height:0;padding-bottom:48px}#consultation{padding-top:24px}}