/* ============================================================
   SOPHIE ABIGAIL STUDIOS — shared site CSS for interior pages
   Pairs with tokens.css + style.css. The homepage (index.html)
   keeps its own inline styles; this file carries the reusable
   chrome + section patterns so every other page is consistent.
   ============================================================ */

/* ---------- header: interior pages use the dark-on-light variant, sticky ---------- */
.site-header{ position:sticky; top:0; z-index:50; background:transparent;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease); border-bottom:1px solid transparent; }
.site-header__inner{ transition:padding-block var(--dur) var(--ease); }
.site-header.is-stuck{ background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(140%) blur(10px); backdrop-filter:saturate(140%) blur(10px);
  border-bottom-color:var(--border); }
.site-header.is-stuck .site-header__inner{ padding-block:var(--sp-2); }
.site-header.is-stuck .brand__mark{ height:42px; }

/* ---------- section scaffolding (mirrors the homepage) ---------- */
.section--ink{ background:var(--c-ink); color:#fff; }
.section--ink .eyebrow{ color:rgba(255,255,255,.6); }
.section--plaster{ background:var(--c-sand) url("/textures/texture-plaster.webp") center/cover no-repeat fixed; }
.s-head .eyebrow{ display:block; margin-bottom:var(--sp-3); }
.s-title{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-h2); line-height:var(--lh-tight); margin:0; color:var(--c-ink); }
.section--ink .s-title{ color:#fff; }
.s-intro{ margin:var(--sp-4) 0 0; font-family:var(--font-body); font-weight:300; font-size:var(--fs-h3); line-height:1.5; color:var(--text-soft); max-width:34ch; }
.section--ink .s-intro{ color:rgba(255,255,255,.72); }
.s-head--center{ text-align:center; margin-inline:auto; }
.s-head--center .s-intro{ margin-inline:auto; }
html, body{ overflow-x:clip; }
.body{ line-height:1.7; color:var(--c-ink); }

.link-arrow{ display:inline-block; margin-top:var(--sp-6); font-family:var(--font-body); font-size:var(--fs-small); font-weight:500;
  text-transform:uppercase; letter-spacing:.14em; color:var(--c-ink); text-decoration:none;
  border-bottom:1px solid var(--c-ink); padding-bottom:3px; transition:border-color var(--dur) var(--ease); }
.link-arrow:hover{ border-bottom-color:var(--c-gold); }
.section--ink .link-arrow{ color:#fff; border-bottom-color:rgba(255,255,255,.6); }

/* labelled greybox placeholder (kept for any not-yet-shot image) */
.ph{ position:relative; background:var(--c-sand) url("/textures/texture-plaster.webp") center/cover;
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--text-soft); font-family:var(--font-body); font-size:var(--fs-small); letter-spacing:.04em; padding:var(--sp-8); }
.ph span{ max-width:24ch; }
.ph::after{ content:""; position:absolute; inset:10px; border:1px solid var(--border); pointer-events:none; }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* badge (coming soon) */
.badge{ display:inline-block; font-family:var(--font-body); font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-ink); background:var(--c-gold); border-radius:100px; padding:.3rem .7rem; margin-bottom:var(--sp-4); }

/* arch frame (brand device) — portrait images only */
.archframe{ border-radius:50% 50% var(--r-md) var(--r-md) / 32% 32% var(--r-md) var(--r-md); overflow:hidden; }

/* =====================================================================
   INTERIOR HERO — arch-niche split (text + arch on plaster). Stacks on
   mobile with the arch on top. Mirrors the homepage Hero 1 pattern.
   ===================================================================== */
.phero{ position:relative; overflow:hidden; background:var(--c-sand) url("/textures/texture-plaster.webp") center/cover no-repeat fixed; }
.phero::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.85) 34%, rgba(255,255,255,.42) 54%, rgba(255,255,255,0) 74%);
  /* fade the wash out toward the bottom so the hero's bottom edge is pure texture — matches the next fixed-plaster section, no seam */
  -webkit-mask:linear-gradient(180deg, #000 72%, transparent 99%); mask:linear-gradient(180deg, #000 72%, transparent 99%); }
.phero__inner{ position:relative; z-index:2; display:flex; flex-direction:column-reverse; gap:var(--sp-10); padding-block:var(--sp-16) var(--sp-12); }
.phero__copy{ max-width:34rem; }
.phero__title{ font-family:var(--font-display); font-weight:600; font-size:clamp(2.4rem,5vw,3.8rem); line-height:var(--lh-tight); margin:var(--sp-3) 0 0; color:var(--c-ink); }
.phero__title em{ font-style:italic; }
.phero__lede{ margin:var(--sp-6) 0 0; font-family:var(--font-body); font-weight:400; font-size:var(--fs-h3); line-height:1.5; color:rgba(29,29,27,.82); max-width:34ch; }
.phero__cta{ display:flex; flex-direction:column; gap:var(--sp-3); margin-top:var(--sp-8); }
.phero__cta .btn{ width:100%; }
.phero__arch{ width:min(78%,320px); aspect-ratio:.62; margin:0 auto;
  border-radius:50% 50% var(--r-md) var(--r-md) / 32% 32% var(--r-md) var(--r-md); overflow:hidden; background:var(--c-sand);
  box-shadow:0 44px 80px -40px rgba(29,29,27,.45); }
.phero__arch img{ width:100%; height:100%; object-fit:cover; object-position:50% 26%; display:block; }
@media (min-width:761px){
  .phero__inner{ flex-direction:row-reverse; align-items:center; gap:var(--sp-16); padding-block:var(--sp-24) var(--sp-16); }
  .phero__copy{ flex:1; }
  .phero__media{ flex:0 0 38%; }
  .phero__arch{ width:min(100%,360px); margin:0; }
  .phero__cta{ flex-direction:row; flex-wrap:wrap; }
  .phero__cta .btn{ width:auto; }
}
/* mobile: match the homepage hero pattern — full-width arch at the desktop proportion
   (crop, don't shrink) and centred copy. House rule: stacked image-over-text sections
   centre their text on phones; lists stay left inside centred boxes. */
@media (max-width:760px){
  .phero__arch{ width:min(100%,420px); aspect-ratio:.76; }
  .phero__arch img{ object-position:50% 22%; }
  .phero__copy{ text-align:center; margin-inline:auto; }
  .phero__lede, .phero__sublede{ margin-inline:auto; }
  .s-head{ text-align:center; }
  .s-head .s-intro{ margin-inline:auto; }
  .psplit__copy{ text-align:center; }
  .psplit__copy .body{ margin-inline:auto; }
  .psplit__copy .pticks, .psplit__copy .pmeta{ text-align:left; width:fit-content; margin-inline:auto; }
}

/* page intro header (for results / reviews / hub style pages) */
.pintro{ text-align:center; }
.pintro .s-intro{ margin-inline:auto; }

/* =====================================================================
   CONTENT SPLIT — alternating image-left / image-right text blocks
   ===================================================================== */
.psplit{ display:flex; flex-direction:column; gap:var(--sp-8); }
.psplit__media{ width:100%; }
.psplit__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r-md); display:block; box-shadow:0 30px 60px -42px rgba(29,29,27,.4); }
.psplit__media.is-arch img{ aspect-ratio:.74; border-radius:50% 50% var(--r-md) var(--r-md) / 32% 32% var(--r-md) var(--r-md); }

/* Signature (brand motif) — the Allura script "Sophie Abigail" */
.sig{ font-family:"Allura", var(--font-display), cursive; font-size:clamp(2.4rem,5vw,3.4rem); line-height:.85; color:var(--c-ink); display:inline-block; margin-top:var(--sp-6); }

/* Award callout — elevated proof moment (warm-white card on the plaster) */
.award{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--sp-6);
  max-width:52rem; margin:var(--sp-12) auto 0; padding:clamp(1.6rem,3.5vw,2.6rem);
  background:#FAF8F4; border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:0 34px 80px -52px rgba(29,29,27,.45); }
.award__media{ width:min(72%,240px); }
.award__media img{ width:100%; aspect-ratio:.72; object-fit:cover; object-position:50% 22%;
  border-radius:50% 50% var(--r-md) var(--r-md) / 32% 32% var(--r-md) var(--r-md); display:block;
  box-shadow:0 26px 52px -36px rgba(29,29,27,.45); }
.award__body{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); }
.award__icon{ width:42px; height:42px; color:var(--c-gold); }
.award__label{ font-family:var(--font-body); font-weight:700; font-size:var(--fs-eyebrow); letter-spacing:.16em; text-transform:uppercase; color:var(--c-gold); margin:0; }
.award__title{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.6rem,2.8vw,2.3rem); line-height:1.12; margin:0; color:var(--c-ink); max-width:24ch; }
.award__sub{ margin:0; color:var(--text-soft); font-size:var(--fs-body); line-height:1.5; max-width:40ch; }
@media (min-width:761px){
  .award{ flex-direction:row; text-align:left; align-items:center; gap:var(--sp-16); padding:clamp(2rem,4vw,3rem); }
  .award__media{ flex:0 0 32%; width:auto; }
  .award__body{ align-items:flex-start; text-align:left; flex:1; }
  .award__title{ max-width:none; }
}

/* Trust proof strip — rating + link (reused from the reviews page) */
.trustproof{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--sp-3) var(--sp-6);
  max-width:46rem; margin:var(--sp-10) auto 0; padding-top:var(--sp-8); border-top:1px solid var(--border); text-align:center; }
.trustproof__score{ font-family:var(--font-display); font-weight:600; font-size:clamp(2rem,3.5vw,2.6rem); line-height:1; color:var(--c-ink); }
.trustproof .stars{ color:var(--c-gold); letter-spacing:.16em; font-size:1.15rem; }
.trustproof__txt{ color:var(--text-soft); }
.psplit__copy .body{ margin-top:var(--sp-5); max-width:52ch; }
@media (min-width:761px){
  .psplit{ flex-direction:row; align-items:center; gap:var(--sp-16); }
  .psplit__copy{ flex:1; }
  .psplit__media{ flex:0 0 46%; }
  .psplit--rev{ flex-direction:row-reverse; }
}

/* =====================================================================
   CARD GRID — treatment / link cards
   ===================================================================== */
.pcards{ display:flex; flex-direction:column; gap:var(--sp-6); margin-top:var(--sp-10); }
.pcard{ background:var(--c-white); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.pcard:hover{ box-shadow:0 24px 50px -34px rgba(29,29,27,.35); }
.pcard img, .pcard .ph{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; }
.pcard__body{ padding:var(--sp-6); position:relative; }
.pcard__body h3{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem,2vw,1.6rem); margin:0 0 var(--sp-2); }
.pcard__body p{ margin:0 0 var(--sp-4); color:var(--text-soft); line-height:1.6; }
@media (min-width:761px){
  .pcards{ flex-direction:row; }
  .pcard{ flex:1; }
}

/* =====================================================================
   FILTER CHIPS + GALLERY GRID (results / the space)
   ===================================================================== */
.pchips{ display:flex; flex-wrap:wrap; gap:var(--sp-2); justify-content:center; margin-top:var(--sp-8); }
.chip{ font-family:var(--font-body); font-size:.82rem; letter-spacing:.04em; padding:.55rem 1.1rem; border:1px solid var(--border);
  background:transparent; border-radius:4rem; color:var(--text-soft); cursor:pointer; transition:all var(--dur) var(--ease); }
.chip[aria-pressed="true"]{ background:var(--c-ink); border-color:var(--c-ink); color:#fff; }
.pgrid{ display:grid; grid-template-columns:1fr; gap:var(--sp-4); margin-top:var(--sp-10); }
/* --scroll: horizontal snap strip on mobile (card + peek, the learned reviews/reels gesture);
   falls back to the normal grid at >=761px */
@media (max-width:760px){
  .pgrid--scroll{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:var(--sp-4);
    scrollbar-width:none; padding-bottom:var(--sp-2); }
  .pgrid--scroll::-webkit-scrollbar{ display:none; }
  .pgrid--scroll figure{ flex:0 0 85%; scroll-snap-align:start; }
}
.pgrid figure{ margin:0; }
.pgrid img, .pgrid .ph{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r-md); display:block; box-shadow:0 22px 44px -34px rgba(29,29,27,.4); }
.pgrid figcaption{ margin-top:var(--sp-4); font-size:var(--fs-body); color:var(--text-soft); line-height:1.55; }
.pgrid__item[hidden]{ display:none; }
@media (min-width:761px){ .pgrid{ grid-template-columns:repeat(3,1fr); gap:var(--sp-6); } }
@media (min-width:761px){ .pgrid--space{ grid-template-columns:repeat(2,1fr); } }

/* =====================================================================
   NUMBERED VERTICAL STEPS (arrival / process)
   ===================================================================== */
.psteps{ list-style:none; margin:var(--sp-10) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--sp-8); max-width:46rem; }
.pstep{ display:flex; gap:var(--sp-6); }
.pstep__n{ flex:0 0 auto; font-family:var(--font-display); font-style:italic; font-weight:500; font-size:1.6rem; color:var(--c-gold); line-height:1; min-width:2.2rem; }
/* on plaster the pale gold vanishes — same fix as the treatlist numerals: deep bronze */
.section--plaster .pstep__n{ color:#9C7A42; }
.pstep__b h3{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem,2vw,1.6rem); margin:0 0 var(--sp-2); line-height:1.2; }
.pstep__b p{ margin:0; color:var(--text-soft); line-height:1.7; max-width:48ch; }
.pstep + .pstep{ position:relative; }

/* reassurance ticks (three) */
.pticks{ list-style:none; margin:var(--sp-8) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--sp-4); }
.pticks li{ position:relative; padding-left:var(--sp-6); color:var(--c-ink); font-size:var(--fs-body); line-height:1.4; }
.pticks li::before{ content:""; position:absolute; left:0; top:.5em; width:7px; height:7px; border-radius:50%; background:var(--c-gold); }
/* --row: on desktop a ruled two-column grid with gold ticks (the wrapping dot-row read as
   scattered floating text on wide screens) */
@media (min-width:761px){
  .pticks--row{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--sp-16); max-width:62rem; margin-top:var(--sp-10); }
  .pticks--row li{ padding-block:var(--sp-5); padding-left:var(--sp-8); border-bottom:1px solid var(--border); }
  .pticks--row li::before{ content:"✓"; width:auto; height:auto; border-radius:0; background:none;
    color:var(--c-gold); font-weight:600; top:var(--sp-5); }
}

/* =====================================================================
   PRICING — inclusions tick list
   ===================================================================== */
.pricing{ max-width:40rem; margin-top:var(--sp-8); padding:clamp(2rem,4vw,3rem); background:var(--c-white); border:1px solid var(--border); border-radius:var(--r-lg); }
.pricing__from{ font-family:var(--font-display); font-weight:600; font-size:clamp(2rem,4vw,2.8rem); color:var(--c-ink); margin:0; }
.pricing__from span{ font-family:var(--font-body); font-weight:400; font-size:1rem; color:var(--text-soft); letter-spacing:.04em; text-transform:uppercase; display:block; margin-bottom:var(--sp-2); }
.pricing__list{ list-style:none; margin:var(--sp-6) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--sp-3); }
.pricing__list li{ position:relative; padding-left:var(--sp-6); color:var(--c-ink); line-height:1.5; }
.pricing__list li::before{ content:"✓"; position:absolute; left:0; color:var(--c-gold); font-weight:600; }

/* =====================================================================
   META LIST (credentials / awards / find-me details)
   ===================================================================== */
.pmeta{ list-style:none; margin:var(--sp-12) 0 0; padding:0; display:flex; flex-direction:column; gap:0; }
.pmeta li{ display:flex; gap:var(--sp-8); padding:var(--sp-6) 0; border-top:1px solid var(--border); }
.pmeta li:last-child{ border-bottom:1px solid var(--border); }
.pmeta dt, .pmeta__k{ flex:0 0 34%; font-family:var(--font-body); font-weight:700; font-size:var(--fs-eyebrow); letter-spacing:.14em; text-transform:uppercase; color:var(--text-soft); }
.pmeta dd, .pmeta__v{ flex:1; margin:0; color:var(--c-ink); line-height:1.6; }

/* =====================================================================
   COMING-SOON BANNER
   ===================================================================== */
.soonbar{ background:var(--c-ink); color:#fff; text-align:center; padding:var(--sp-4); font-family:var(--font-body);
  font-size:var(--fs-eyebrow); letter-spacing:.16em; text-transform:uppercase; }
.soonbar strong{ color:var(--c-gold); font-weight:700; }

/* =====================================================================
   CTA BAND (centred dual CTA) — reuse on every page
   ===================================================================== */
.cta-band{ text-align:center; }
.cta-band .s-intro{ margin-inline:auto; max-width:42ch; }
.cta-band__row{ display:flex; flex-direction:column; gap:var(--sp-3); margin-top:var(--sp-8); align-items:stretch; }
.cta-band__row .btn{ width:100%; }
@media (min-width:761px){ .cta-band__row{ flex-direction:row; justify-content:center; }
  .cta-band__row .btn{ width:auto; } }

/* =====================================================================
   STATEMENT pull-quote (reused from homepage)
   ===================================================================== */
.statement{ position:relative; overflow:hidden; background:var(--c-sand) url("/textures/texture-plaster.webp") center/cover no-repeat fixed; }
.statement .container{ position:relative; z-index:1; padding-block:clamp(5rem,12vw,9rem); text-align:center; }
.statement__eyebrow{ display:block; font-family:var(--font-body); font-weight:700; font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:.18em; color:var(--text-soft); margin-bottom:var(--sp-6); }
.statement__quote{ font-family:var(--font-display); font-weight:500; font-style:italic; font-size:clamp(1.85rem,4.2vw,3.2rem); line-height:1.24; color:var(--c-ink); max-width:22ch; margin:0 auto; }
.statement__attr{ margin:var(--sp-8) auto 0; font-family:var(--font-body); font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:.2em; color:var(--text-soft); }
/* wide variant for a longer, paragraph-length quote (e.g. the philosophy) — breathes across more width, smaller type */
.statement--wide .statement__quote{ max-width:32ch; font-size:clamp(1.5rem,2.9vw,2.3rem); line-height:1.3; }
.statement__attr::before{ content:"— "; }

/* =====================================================================
   FAQ — native <details> hairline accordion (reused)
   ===================================================================== */
.faq{ margin-top:var(--sp-10); border-top:1px solid var(--border); }
.faq__item{ border-bottom:1px solid var(--border); }
.faq__item > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-6); padding:var(--sp-6) 0; font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem,2.2vw,1.6rem); line-height:1.3; color:var(--c-ink); }
.faq__item > summary::-webkit-details-marker{ display:none; }
.faq__item > summary::marker{ content:""; }
.faq__ic{ flex:0 0 auto; font-family:var(--font-body); font-weight:300; font-size:1.6rem; line-height:1; color:var(--c-gold); transition:transform var(--dur) var(--ease); }
.faq__item[open] .faq__ic{ transform:rotate(45deg); }
.faq__a{ padding:0 0 var(--sp-6); }
.faq__a p{ margin:0; color:var(--text-soft); line-height:1.7; font-size:var(--fs-body); max-width:64ch; }

/* =====================================================================
   REVIEWS row + carousel (reused on homepage; here for /reviews)
   ===================================================================== */
.reviews-grid{ display:grid; grid-template-columns:1fr; gap:var(--sp-6); margin-top:var(--sp-10); }
.review-card{ margin:0; background:var(--c-white); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-6); }
.review-card .stars{ color:var(--c-gold); letter-spacing:.14em; }
.review-card blockquote{ margin:var(--sp-3) 0 0; font-family:var(--font-display); font-size:1.2rem; line-height:1.4; color:var(--c-ink); }
.review-card cite{ display:block; margin-top:var(--sp-4); font-style:normal; font-size:var(--fs-small); color:var(--text-soft); letter-spacing:.04em; }
@media (min-width:761px){ .reviews-grid{ grid-template-columns:repeat(3,1fr); } }

/* =====================================================================
   FOOTER (identical to homepage)
   ===================================================================== */
.site-footer2{ background:var(--c-ink); color:rgba(255,255,255,.7); }
.site-footer2 .container{ padding-block:var(--sp-12) var(--sp-8); }
.ft-shell{ display:flex; flex-direction:column; gap:var(--sp-8); }
.ft-mark{ width:84px; height:auto; }
.site-footer2 .ft-grid{ display:flex; flex-direction:column; gap:0; margin-top:0; }
.site-footer2 .ft-intro{ max-width:36ch; margin-bottom:var(--sp-6); }
.site-footer2 .ft-intro p{ color:rgba(255,255,255,.7); line-height:1.7; margin:var(--sp-3) 0 0; }
.site-footer2 h4{ font-family:var(--font-body); font-size:var(--fs-eyebrow); letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); margin:0; }
.site-footer2 a{ color:rgba(255,255,255,.78); text-decoration:none; display:block; padding:.35rem 0; }
.site-footer2 a:hover{ color:#fff; }
.ft-group{ border-top:1px solid rgba(255,255,255,.12); }
.ft-grouphead{ width:100%; background:none; border:0; cursor:pointer; padding:var(--sp-4) 0; display:flex; align-items:center; justify-content:space-between; }
.ft-grouphead .pm{ color:rgba(255,255,255,.45); font-size:1.3rem; font-weight:300; line-height:1; transition:transform var(--dur) var(--ease); }
.ft-group.open .ft-grouphead .pm{ transform:rotate(45deg); }
.ft-links{ display:none; padding-bottom:var(--sp-4); }
.ft-group.open .ft-links{ display:block; }
.site-footer2 .ft-bottom{ margin-top:var(--sp-10); padding-top:var(--sp-6); border-top:1px solid rgba(255,255,255,.14);
  font-size:.8rem; color:rgba(255,255,255,.45); display:flex; flex-direction:column; gap:var(--sp-3); }
.site-footer2 .ft-bottom a{ display:inline; }

/* =====================================================================
   STICKY MOBILE BOOKING BAR
   ===================================================================== */
.mobilebar{ position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4); background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-top:1px solid var(--border);
  transform:translateY(110%); transition:transform var(--dur) var(--ease); }
.mobilebar.show{ transform:none; }
.mobilebar .btn{ flex:1; }
/* clear the fixed booking bar so the footer/last content isn't hidden behind it */
@media (max-width:760px){ body{ padding-bottom:calc(6rem + env(safe-area-inset-bottom)); } }

/* =====================================================================
   LOCKED HOMEPAGE PATTERNS — shared to every interior page (2026-06-30)
   See DESIGN-NOTES.md "Locked Decisions".
   ===================================================================== */

/* Section header WITH a subtitle: title left, subtitle right on desktop (fills empty space).
   Mobile stacks left-aligned. Headers without a subtitle stay normal (left). */
@media (min-width:761px){
  .s-head:has(.s-intro):not(.s-head--center){ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"eyebrow eyebrow" "title intro"; column-gap:var(--sp-16); align-items:start; }
  .s-head:has(.s-intro):not(.s-head--center) .eyebrow{ grid-area:eyebrow; }
  .s-head:has(.s-intro):not(.s-head--center) .s-title{ grid-area:title; margin:0; }
  .s-head:has(.s-intro):not(.s-head--center) .s-intro{ grid-area:intro; margin:0; max-width:44ch; }
}

/* FAQ in a calmer centred column (matches homepage) */
.faq{ max-width:56rem; margin-inline:auto; }
.u-narrow{ max-width:56rem; margin-inline:auto; }   /* put on a FAQ heading so it lines up with the list */

/* Google Maps embed — framed, brand-rounded, slightly desaturated to sit on-palette */
.pmap{ position:relative; width:100%; aspect-ratio:16/11; border-radius:var(--r-md); overflow:hidden;
  border:1.5px solid var(--c-ink); background:var(--c-sand); box-shadow:0 30px 60px -44px rgba(29,29,27,.4); }
.pmap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(.3) contrast(.96) brightness(1.02); }
@media (min-width:761px){ .pmap{ aspect-ratio:16/9; } }

/* Instagram reels strip — horizontal scroll carousel (reused from homepage social) */
.reels{ display:flex; gap:var(--sp-3); margin-top:var(--sp-8); overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding-bottom:var(--sp-3); }
.reels::-webkit-scrollbar{ display:none; }
/* smaller cards (next one peeks = scroll cue), hairline frame, arch tops (brand motif) */
.reels a{ position:relative; scroll-snap-align:start; flex:0 0 46%; overflow:hidden; border:1px solid var(--border); display:block;
  border-radius:50% 50% var(--r-md) var(--r-md) / 15% 15% var(--r-md) var(--r-md); }
/* make them read as Instagram Reels using IG's own anatomy: centred play disc + bottom scrim
   with the IG glyph and her handle (pure CSS) */
.reels a::before{ content:""; position:absolute; inset:0; margin:auto; width:42px; height:42px; z-index:2; pointer-events:none;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><circle cx='24' cy='24' r='22.5' fill='rgba(20,20,18,0.32)' stroke='rgba(255,255,255,0.92)' stroke-width='1.6'/><path d='M20.5 16.5l11 7.5-11 7.5z' fill='white'/></svg>") center/contain no-repeat;
  filter:drop-shadow(0 2px 8px rgba(20,20,18,.35)); }
.reels a::after{ content:"@sophieabigailpmu"; position:absolute; left:0; right:0; bottom:0; z-index:2; pointer-events:none;
  padding:2.4rem .75rem .68rem 2.05rem;
  font-family:var(--font-body); font-weight:500; font-size:.66rem; letter-spacing:.05em; color:#fff; white-space:nowrap; overflow:hidden;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.9'><rect x='2.75' y='2.75' width='18.5' height='18.5' rx='5.5'/><circle cx='12' cy='12' r='4.4'/><circle cx='17.1' cy='6.9' r='1.25' fill='white' stroke='none'/></svg>") no-repeat .7rem calc(100% - .62rem) / 15px 15px,
  linear-gradient(0deg, rgba(20,20,18,.74), rgba(20,20,18,0)); }
.reels img{ width:100%; aspect-ratio:.66; object-fit:cover; display:block; transition:transform .7s var(--ease); }
.reels a:hover img{ transform:scale(1.04); }
@media (min-width:761px){ .reels a{ flex:0 0 calc((100% - 4*var(--sp-3)) / 5); } }

/* Full-bleed photo band with overlay copy (ported from the homepage studio section so interior
   pages can use it). MOBILE-FIRST: photo on top, copy below on plaster. DESKTOP >=1180px: photo
   fills the band, left scrim gradient, copy in a translucent Japandi card. */
.studio2{ background:var(--c-sand) url("/textures/texture-plaster.webp") center/cover no-repeat fixed; }
.studio2__img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.studio2__scrim{ display:none; }
.studio2__content{ padding-block:var(--section-y); color:var(--c-ink); }
.studio2 .eyebrow{ display:block; margin-bottom:var(--sp-3); color:var(--text-soft); }
.studio2 .s-title{ color:var(--c-ink); }
.studio2 .body{ color:var(--c-ink); }
@media (min-width:1180px){
  .studio2{ position:relative; min-height:72svh; display:flex; align-items:center; overflow:hidden; background:none; }
  .studio2__img{ position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; }
  .studio2__scrim{ display:block; position:absolute; inset:0; z-index:1;
    background:linear-gradient(90deg, rgba(20,20,18,.32) 0%, rgba(20,20,18,0) 48%); }
  .studio2__content{ position:relative; z-index:2; width:auto; max-width:clamp(340px,30vw,420px);
    margin-left:var(--gutter); margin-right:auto; padding:clamp(2rem,2.4vw,2.75rem);
    background:rgba(250,248,244,.9); -webkit-backdrop-filter:blur(10px) saturate(120%); backdrop-filter:blur(10px) saturate(120%);
    border:1px solid rgba(255,255,255,.55); border-radius:var(--r-lg);
    box-shadow:0 36px 80px -44px rgba(20,20,18,.55); }
}

/* Before / after pair — two panels with corner labels (treatment + results pages) */
.bapair{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); border-radius:var(--r-md); overflow:hidden; box-shadow:0 26px 52px -38px rgba(29,29,27,.45); }
.bapair figure{ position:relative; margin:0; }
.bapair img, .bapair .ph{ width:100%; aspect-ratio:.82; object-fit:cover; display:block; }
.bapair figcaption{ position:absolute; left:var(--sp-3); bottom:var(--sp-3); font-family:var(--font-body); font-size:.62rem;
  font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#fff; text-shadow:0 1px 5px rgba(0,0,0,.55); z-index:1; }
.bapair figure::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:36%;
  background:linear-gradient(0deg, rgba(20,20,18,.45), transparent); pointer-events:none; }

/* Treatment numbered list (shared from homepage §8) */
.treatlist{ margin-top:var(--sp-12); border-top:1px solid var(--border); }
.treatrow{ display:grid; grid-template-columns:3.4rem 1fr; grid-template-areas:"num title" "num desc" "num action";
  column-gap:var(--sp-6); row-gap:var(--sp-2); align-items:start; padding:var(--sp-8) 0; border-bottom:1px solid var(--border);
  text-decoration:none; color:inherit; transition:opacity var(--dur) var(--ease); }
.treatrow:hover{ opacity:.66; }
.treatrow__num{ grid-area:num; align-self:center; font-family:var(--font-display); font-weight:500;
  font-size:clamp(2.6rem,6vw,4.8rem); line-height:1; color:#9C7A42; letter-spacing:.01em; }
.treatrow__title{ grid-area:title; font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem,3.4vw,2.3rem); line-height:1.05; margin:0; }
/* .soon = to-confirm / coming-soon flag, a gold pill ANYWHERE (was scoped to .treatrow__title,
   which left the flags on other pages rendering as plain body copy) */
.soon{ font-family:var(--font-body); font-weight:600; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--c-ink); background:var(--c-gold); border-radius:4rem; padding:.22rem .55rem; vertical-align:middle; white-space:nowrap; }
.treatrow__title .soon{ margin-left:var(--sp-3); }
.treatrow__desc{ grid-area:desc; margin:0; color:var(--text-soft); line-height:1.5; max-width:60ch; }
.treatrow__action{ grid-area:action; justify-self:start; align-self:start; margin-top:var(--sp-2); font-family:var(--font-body);
  font-weight:700; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink); white-space:nowrap; }
@media (min-width:761px){
  .treatrow{ grid-template-columns:5rem minmax(0,1fr) minmax(0,1fr) auto; grid-template-areas:"num title desc action";
    align-items:center; column-gap:var(--sp-8); row-gap:0; padding:var(--sp-10) 0; }
  .treatrow__title{ align-self:center; }
  .treatrow__desc{ align-self:center; max-width:46ch; }
  .treatrow__action{ justify-self:end; align-self:center; margin-top:0; }
}

/* Hero sublede — second line under the phero lede (matches homepage hero) */
.phero__sublede{ margin:var(--sp-4) 0 0; font-family:var(--font-body); font-weight:400; font-size:1.15rem; line-height:1.5; color:var(--text-soft); max-width:34ch; }

/* REASONS — three no-image cards on a warm ground (the "you might be here because" pattern) */
.reasons{ display:flex; flex-direction:column; gap:var(--sp-4); margin-top:var(--sp-12); }
.reason{ background:#FAF8F4; border:1px solid var(--border); border-radius:var(--r-lg); padding:clamp(1.6rem,3vw,2.4rem);
  box-shadow:0 1px 3px rgba(29,29,27,.05), 0 28px 56px -34px rgba(29,29,27,.45); }
.reason__n{ display:block; font-family:var(--font-display); font-weight:500; font-size:clamp(1.4rem,2vw,1.75rem);
  color:#9C7A42; margin-bottom:var(--sp-4); line-height:1; }
.reason h3{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.6rem,2.2vw,1.75rem); line-height:1.15; margin:0 0 var(--sp-3); color:var(--c-ink); }
.reason p{ margin:0; color:var(--text-soft); line-height:1.6; }
@media (min-width:761px){ .reasons{ flex-direction:row; } .reason{ flex:1; } }

/* ARRIVAL — numbered steps beside a sticky arch portrait (fills the empty desktop column) */
.arrive{ display:grid; gap:var(--sp-10); margin-top:var(--sp-6); }
.arrive .psteps{ margin-top:var(--sp-4); }
.arrive__media{ display:none; }
@media (min-width:861px){
  .arrive{ grid-template-columns:minmax(0,1fr) minmax(0,40%); gap:var(--sp-16); align-items:start; }
  .arrive__media{ display:block; position:sticky; top:6.5rem; }
  .arrive__media img{ width:100%; aspect-ratio:.78; object-fit:cover; display:block; }
}

/* METHOD — cycling photo (left) + numbered process list with dividers (right) */
.slideshow{ position:relative; width:100%; }
.slideshow img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s var(--ease); }
.slideshow img.is-active{ opacity:1; }
.phero__arch{ position:relative; }
.phero__arch .slideshow{ position:absolute; inset:0; }   /* let a cycling slideshow fill the hero arch */
.method{ display:flex; flex-direction:column; gap:var(--sp-10); margin-top:var(--sp-12); }
.method__media{ width:min(86%,340px); margin:0 auto; }
.method__steps{ list-style:none; margin:0; padding:0; border-top:1px solid var(--border); flex:1; }
.method__step{ display:grid; grid-template-columns:3rem 1fr; column-gap:var(--sp-5); row-gap:var(--sp-2);
  align-items:baseline; padding:var(--sp-6) 0; border-bottom:1px solid var(--border); }
.method__n{ grid-row:1 / span 2; align-self:center; font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.5rem,2.4vw,2.1rem); color:#9C7A42; line-height:1; }
.method__step h3{ grid-column:2; font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem,1.8vw,1.6rem); margin:0; line-height:1.15; }
.method__step p{ grid-column:2; margin:0; color:var(--text-soft); line-height:1.5; }
@media (min-width:761px){
  .method{ flex-direction:row; align-items:flex-start; gap:var(--sp-16); }
  .method__media{ flex:0 0 40%; width:auto; margin:0; position:sticky; top:96px; }
}

/* PRICING SPLIT — scrolling value column + sticky charcoal price card (adapted from Petite Ink) */
.pricesplit{ display:flex; flex-direction:column; gap:var(--sp-10); margin-top:var(--sp-12); }
.pricesplit__copy .lead{ margin:var(--sp-6) 0 0; font-family:var(--font-body); font-size:var(--fs-h3); line-height:1.5; color:var(--c-ink); max-width:46ch; }
.pricesplit__copy .reassure{ margin:var(--sp-5) 0 0; color:var(--text-soft); line-height:1.7; max-width:46ch; }
.priceproof{ margin:var(--sp-10) 0 0; padding-top:var(--sp-8); border-top:1px solid var(--border); max-width:46ch; }
.priceproof .stars{ color:var(--c-gold); letter-spacing:.14em; }
.priceproof blockquote{ margin:var(--sp-3) 0 0; font-family:var(--font-display); font-style:italic; font-size:clamp(1.3rem,2.2vw,1.65rem); line-height:1.35; color:var(--c-ink); }
.priceproof cite{ display:block; margin-top:var(--sp-4); font-style:normal; font-size:var(--fs-small); letter-spacing:.04em; text-transform:uppercase; color:var(--text-soft); }

.pricecard{ position:relative; overflow:hidden; background:var(--c-ink); color:#fff;
  border-radius:var(--r-lg); padding:clamp(1.9rem,3.5vw,2.8rem); box-shadow:0 46px 90px -50px rgba(29,29,27,.6); }
.pricecard__label{ display:block; font-family:var(--font-body); font-weight:500; font-size:var(--fs-eyebrow); letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.pricecard__price{ font-family:var(--font-display); font-weight:600; font-size:clamp(2.6rem,5vw,3.6rem); line-height:1; margin:var(--sp-3) 0 0; color:#fff; }
.pricecard__terms{ margin:var(--sp-4) 0 0; font-size:var(--fs-small); color:rgba(255,255,255,.6); line-height:1.5; }
.pricecard__incl{ list-style:none; margin:var(--sp-6) 0 0; padding:var(--sp-6) 0 0; border-top:1px solid rgba(255,255,255,.16); display:flex; flex-direction:column; gap:var(--sp-4); }
.pricecard__incl li{ position:relative; padding-left:var(--sp-6); color:rgba(255,255,255,.9); line-height:1.4; font-size:var(--fs-body); }
.pricecard__incl li::before{ content:"✓"; position:absolute; left:0; color:var(--c-gold); font-weight:600; }
.pricecard__cta{ display:flex; align-items:center; justify-content:center; width:100%; margin-top:var(--sp-8); background:#fff; color:var(--c-ink); border-color:#fff; }
.pricecard__cta:hover{ background:var(--c-sand); border-color:var(--c-sand); }
.pricecard__proof{ margin-top:var(--sp-6); padding-top:var(--sp-6); border-top:1px solid rgba(255,255,255,.16); font-size:var(--fs-small); color:rgba(255,255,255,.6); }
.pricecard__proof .stars{ color:var(--c-gold); letter-spacing:.14em; }
@media (min-width:861px){
  .pricesplit{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,25rem); align-items:start; gap:var(--sp-16); }
  .pricecard{ position:sticky; top:clamp(96px,12vh,120px); }
}

/* ---------- desktop overrides ---------- */
@media (min-width:761px){
  .mobilebar{ display:none; }
  .site-footer2 .ft-grid{ flex-direction:row; justify-content:space-between; gap:var(--sp-16); }
  .site-footer2 .ft-intro{ margin-bottom:0; }
  .site-footer2 .ft-cols{ display:flex; gap:var(--sp-16); }
  .ft-shell{ flex-direction:row; align-items:flex-start; gap:clamp(2.5rem,5vw,5.5rem); }
  .ft-mark{ width:clamp(150px,15vw,210px); flex:0 0 auto; }
  .ft-main{ flex:1; }
  .ft-group{ border-top:0; }
  .ft-grouphead{ pointer-events:none; padding:0 0 var(--sp-3); }
  .ft-grouphead .pm{ display:none; }
  .ft-links{ display:block; padding-bottom:0; }
  .site-footer2 .ft-bottom{ flex-direction:row; justify-content:space-between; align-items:center; }
}

/* =====================================================================
   THE ENHANCE METHOD — training tiers, inclusions, apply list
   (reuses the reason-card language: warm-white card, bronze number,
   gold ticks. Cards go 3-up on desktop.)
   ===================================================================== */
.tiers{ display:flex; flex-direction:column; gap:var(--sp-4); margin-top:var(--sp-12); }
.tier{ position:relative; display:flex; flex-direction:column; background:#FAF8F4; border:1px solid var(--border); border-radius:var(--r-lg);
  padding:clamp(1.8rem,3.2vw,2.6rem); box-shadow:0 1px 3px rgba(29,29,27,.06), 0 34px 64px -36px rgba(29,29,27,.5); }
.tier--feature{ background:var(--c-ink); border-color:transparent; box-shadow:0 2px 5px rgba(29,29,27,.12), 0 40px 72px -34px rgba(29,29,27,.6); }
.tier--feature .tier__title,
.tier--feature .tier__desc{ color:#fff; }
.tier--feature .tier__meta{ color:rgba(255,255,255,.6); }
.tier--feature .tier__incl li{ color:rgba(255,255,255,.9); }
.tier--feature .tier__incl{ border-top-color:rgba(255,255,255,.16); }
.tier--feature .link-arrow{ color:#fff; border-bottom-color:rgba(255,255,255,.4); }
.tier__badge{ position:absolute; top:var(--sp-5); right:var(--sp-5); font-family:var(--font-body);
  font-size:var(--fs-eyebrow); letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink);
  background:var(--c-gold); border-radius:100px; padding:.3rem .7rem; }
.tier__num{ display:block; font-family:var(--font-display); font-weight:500; font-size:clamp(1.4rem,2vw,1.75rem);
  color:#9C7A42; margin-bottom:var(--sp-4); line-height:1; }
.tier__title{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem,2.2vw,1.7rem);
  line-height:1.15; margin:0; color:var(--c-ink); }
.tier__meta{ margin:var(--sp-2) 0 0; font-size:var(--fs-small); letter-spacing:.02em; color:var(--text-soft); }
.tier__desc{ margin:var(--sp-4) 0 0; color:var(--text-soft); line-height:1.6; }
.tier__incl{ list-style:none; margin:var(--sp-5) 0 var(--sp-6); padding:var(--sp-5) 0 0;
  border-top:1px solid var(--border); display:flex; flex-direction:column; gap:var(--sp-3); }
.tier__incl li{ position:relative; padding-left:var(--sp-6); color:var(--text-soft); line-height:1.4; }
.tier__incl li::before{ content:"✓"; position:absolute; left:0; color:#9C7A42; font-weight:600; }
.tier .link-arrow{ margin-top:auto; }
@media (min-width:861px){
  .tiers{ flex-direction:row; align-items:stretch; }
  .tier{ flex:1; }
}

/* WHAT'S INCLUDED — two-column gold-tick list */
.inclusions{ list-style:none; margin:var(--sp-12) auto 0; padding:0; max-width:52rem;
  display:grid; grid-template-columns:1fr; gap:var(--sp-4); }
.inclusions li{ position:relative; padding-left:var(--sp-8); font-size:var(--fs-body); color:var(--c-ink); line-height:1.4; }
.inclusions li::before{ content:"✓"; position:absolute; left:0; color:#9C7A42; font-weight:700; }
@media (min-width:861px){ .inclusions{ grid-template-columns:1fr 1fr; gap:var(--sp-4) var(--sp-10); } }

/* APPLY — what to include list, centred in the CTA band */
.applylist{ list-style:none; margin:var(--sp-8) auto 0; padding:0; max-width:34rem; text-align:left;
  display:flex; flex-direction:column; gap:var(--sp-3); }
.applylist li{ position:relative; padding-left:var(--sp-6); color:var(--text-soft); line-height:1.5; }
.applylist li::before{ content:"—"; position:absolute; left:0; color:#9C7A42; }

/* =====================================================================
   TOUCH TEXTURE — one viewport-sized position:fixed plane behind the page
   (round 6). iOS breaks fixed BACKGROUNDS but not fixed ELEMENTS: this is
   the same pinned parallax as desktop, sharp (viewport-sized render),
   seamless (no per-section layers). Selected by pointer type + width.
   ===================================================================== */
@media (max-width:760px), ((hover: none) and (pointer: coarse)){
  body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:var(--c-sand) url("/textures/texture-plaster.webp") center/cover no-repeat; }
  .section:not(.section--ink){ background:var(--c-white); }
  .phero, section.statement, .section--plaster[data-par], section.studio2{
    background:transparent; position:relative; overflow:hidden; }
  .studio2 .studio2__img, .studio2 .studio2__content{ position:relative; z-index:1; }
}
}

/* before/after pairs inside a pgrid: the .bapair frame carries radius + shadow, not the halves */
.pgrid .bapair img{ border-radius:0; box-shadow:none; }
.pgrid .bapair{ box-shadow:0 22px 44px -34px rgba(29,29,27,.4); }
.psplit__media .bapair img{ border-radius:0; box-shadow:none; }
/* wide variant for landscape material (eye closeups) */
.bapair--wide img{ aspect-ratio:1.3; }

/* =====================================================================
   SHOTPROOF — a real review presented as a captured card (Petite Ink
   pattern). Deliberately uses the platform's own look (system font,
   Fresha lavender avatar, flat gold stars), NOT the site fonts, so it
   reads as evidence rather than design. Data must be a REAL review.
   ===================================================================== */
.shotproof{ margin:var(--sp-10) 0 0; max-width:420px; }
.shotproof__card{ background:#fff; border:1px solid rgba(29,29,27,.1); border-radius:14px;
  padding:1.3rem 1.5rem 1.5rem; box-shadow:0 24px 48px -28px rgba(29,29,27,.4);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.shotproof__head{ display:flex; gap:.85rem; align-items:center; }
.shotproof__avatar{ flex:0 0 44px; width:44px; height:44px; border-radius:50%; background:#EEEBFB;
  color:#6950F3; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:1.1rem; }
.shotproof__name{ font-weight:600; font-size:.95rem; color:#111; }
.shotproof__date{ color:#767676; font-size:.8rem; margin-top:2px; }
.shotproof__stars{ color:#F5B83D; margin-top:.75rem; letter-spacing:3px; font-size:.85rem; }
.shotproof__text{ margin:.55rem 0 0; font-size:.9rem; line-height:1.55; color:#222; }
.shotproof__cap{ margin-top:var(--sp-4); font-size:.66rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-soft); }
.shotproof__cap .stars{ color:var(--c-gold); letter-spacing:.1em; }

/* SHOTRAIL — horizontal snap carousel of shotproof review cards (homepage ink band).
   ~3 cards + peek on desktop, 1 card + peek on phones. */
.shotrail{ display:flex; gap:var(--sp-5); overflow-x:auto; scroll-snap-type:x mandatory;
  margin-top:var(--sp-10); padding:var(--sp-1) var(--sp-1) var(--sp-4); scrollbar-width:none; }
.shotrail::-webkit-scrollbar{ display:none; }
.shotrail .shotproof{ flex:0 0 min(85%,380px); scroll-snap-align:start; margin:0; max-width:none; }
.shotrail .shotproof__card{ height:100%; }