/* ===========================================================
   Intactphysio — shared stylesheet
   =========================================================== */

:root{
  --bg:#EFEDE4;
  --surface:#FFFFFF;
  --surface-2:#E7E3D6;
  --ink:#16221F;
  --ink-soft:#48534E;
  --ink-faint:#7C857F;
  --ember:#E1502B;
  --ember-dark:#C43F1F;
  --ember-tint:#FBE3DA;
  --teal:#2B6F60;
  --teal-dark:#1F5347;
  --teal-tint:#DDEAE4;
  --line:#DEDACD;
  --amber:#B9791A;
  --amber-tint:#F5E7CC;

  /* the dark band shared by the header and the footer — the same charcoal-to-black
     mix and ember bloom used on the printed business card, so screen and print read
     as one thing. The header's bloom rises from below, the footer's falls from above,
     so the two bookend the page. */
  --band-top:#1D2C28;      /* charcoal   */
  --band-mid:#16221F;      /* brand ink  */
  --band-base:#0F1816;     /* near black */
  --band-glow:rgba(225,80,43,.30);

  --font-display:'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-body:'Figtree', ui-sans-serif, system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  /* The brand lock-up, defined once and used by the header and the footer so
     the star and the word can never drift apart from one page to the next.
     The star's drawn shape fills about 81% of its box, so a 99px box gives an
     81px star against a 23px cap height — the 3.5:1 proportion of the Staff
     Portal mark, which is the house proportion. Change these two together or
     not at all. */
  --logo-mark:99px;
  --logo-word:1.95rem;

  --radius-s:8px;
  --radius-m:16px;
  --radius-l:28px;
  --shadow:0 1px 2px rgba(22,34,31,.04), 0 8px 24px -12px rgba(22,34,31,.16);
  --maxw:1320px;

  /* ---- spacing scale ----------------------------------------------------
     Every vertical measurement on the site comes from one of these eight
     steps. If a number is not on this list it is either a component's own
     optical adjustment (a pill's padding, an icon's offset) or a mistake. */
  --space-xs:8px;
  --space-sm:12px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
  --space-2xl:48px;
  --space-3xl:64px;

  /* ---- the three rhythm tokens, expressed on that scale -----------------
     --sp-section  top & bottom padding of every band, incl. hero + footer
     --sp-block    heading/intro -> content, and between blocks inside a band
     --sp-gap      every grid gutter
     --sp-label    section label -> the heading it introduces              */
  --sp-section:var(--space-2xl);   /* 48 */
  --sp-block:var(--space-xl);      /* 32 */
  --sp-gap:var(--space-lg);        /* 24 */
  --sp-label:var(--space-lg);      /* 24 */
  --sp-gutter:var(--space-xl);     /* horizontal page padding — 32 */
}
/* spacing steps down with the viewport; the gutter never reaches zero, so
   content never touches the edge of the screen */
@media (max-width:1000px){
  :root{--sp-section:40px; --sp-block:var(--space-lg); --sp-gap:var(--space-lg);
        --sp-label:20px; --sp-gutter:var(--space-lg);}
}
@media (max-width:720px){
  :root{--sp-section:var(--space-xl); --sp-block:var(--space-lg);
        --sp-gap:20px; --sp-label:20px; --sp-gutter:20px;}
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img,svg{display:block; max-width:100%;}
a{color:inherit;}
ul{list-style:none; margin:0; padding:0;}
p{margin:0;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700; line-height:1.1; margin:0;
  letter-spacing:-.015em; text-wrap:balance;
}
h1{font-size:clamp(2.4rem,1.7rem+2.6vw,3.6rem);}
h2{font-size:clamp(1.75rem,1.35rem+1.6vw,2.5rem);}
h3{font-size:1.28rem; font-weight:600;}
.h1-quiet{font-size:clamp(1.75rem,1.35rem+1.6vw,2.5rem);}
h4{font-size:1.06rem; font-weight:600;}

.container{max-width:var(--maxw); margin:0 auto; padding-inline:var(--sp-gutter); width:100%;}
.section,
.section-tight{padding-block:var(--sp-section);}
.section-alt{background:var(--surface-2);}
/* utilities on the same scale — used instead of one-off inline margins */
.mt-block{margin-top:var(--sp-block);}
.mb-block{margin-bottom:var(--sp-block);}
.section-footnote{
  margin-top:var(--sp-block); color:var(--ink-soft);
  font-size:.95rem; max-width:64ch;
}

/* block-level rather than inline-flex, with the width shrink-wrapped: as an
   inline box it sat on a line box and inherited the body's leading, which is
   why the label-to-heading gap measured 23px in a hero and 12px in a section.
   Out of the line box, --sp-label is the whole gap, and it is the same
   everywhere. */
.eyebrow{
  font-family:var(--font-mono); font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--teal);
  display:flex; width:fit-content; align-items:center; gap:.5em;
  margin-bottom:var(--sp-label);
}
.eyebrow::before{content:""; width:18px; height:1.5px; background:currentColor;}

.lede{font-size:1.12rem; line-height:1.6; color:var(--ink-soft); max-width:62ch;}
.section > .container > h2,
.hero > .container > h2{margin-bottom:12px;}
.section-note{color:var(--ink-soft); max-width:66ch; margin-bottom:var(--sp-block); font-size:1.06rem;}
/* for a note that reads better as one unbroken line on a desktop width; it still
   wraps normally once the window is too narrow to hold it */
.section-note-wide{max-width:none;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:600; font-size:1rem; padding:16px 32px;
  border-radius:8px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary{background:var(--ember); color:#fff;}
.btn-primary:hover{background:var(--ember-dark);}
.btn-ghost{background:#16221F; color:#FFFFFF; border-color:#16221F;}
.btn-ghost:hover{background:#0B1210; border-color:#0B1210;}
/* the pale teal tint with brand-green type, the same pairing the information
   boxes use. The tint is only 1.06:1 against the page, so the button needs a
   visible border or it stops reading as something you can press.
   Green on tint measures 4.78:1 — above the 4.5:1 threshold for body text. */
.btn-soft{background:var(--teal-tint); color:var(--teal); border-color:#BFD6CC;}
.btn-soft:hover{background:#CBE0D7; color:var(--teal-dark); border-color:#A9C7BB;}
.btn:focus-visible,a:focus-visible,summary:focus-visible,button:focus-visible{
  outline:2.5px solid var(--teal); outline-offset:2px;
}
.cta-pair{display:flex; gap:14px; flex-wrap:wrap; margin-top:var(--sp-block);}

.pill{
  display:inline-flex; align-items:center; gap:.4em; align-self:flex-start;
  font-size:.72rem; font-weight:600; padding:.35em .8em; border-radius:999px;
}
.pill-teal{background:var(--teal-tint); color:var(--teal-dark);}
.pill-ember{background:var(--ember-tint); color:var(--ember-dark);}
.pill-pending{background:var(--amber-tint); color:var(--amber);}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
  /* 12px, down from 22px. The lock-up, the links and the two buttons are all
     untouched; this is only the empty band above and below them. align-items
     keeps everything centred in whatever height is left. */
  padding:12px 24px;
}
.logo{display:flex; align-items:center; gap:.5em; text-decoration:none; color:var(--ink);}
/* flex:none — without it the star is the first thing the header squeezes to
   nothing when the menu row gets tight */
.logo svg{width:var(--logo-mark); height:var(--logo-mark); flex:none;}
.logo-word{font-family:var(--font-display); font-weight:700; font-size:var(--logo-word); letter-spacing:-.02em;}
.logo-word em{font-style:normal; color:var(--ember);}

/* flex:1 so the menu takes the whole width between the logo and the right edge.
   Without it the row's space-between splits the slack evenly either side of the
   menu, and the two action boxes float short of the edge. */
nav.primary{display:flex; align-items:center; gap:32px; flex:1;}
/* The menu reads logo | links | actions. An auto margin before the first link
   and another before the action boxes split the slack equally, so the four
   links sit centred in the space between the two, instead of starting hard
   against the logo. Both are reset in the phone layout below, where the menu
   is a stacked list. */
nav.primary > a:first-child{margin-left:auto;}
.nav-actions{display:flex; align-items:center; gap:var(--space-sm);
  margin-left:auto; padding-left:var(--space-lg);}
nav.primary a{
  font-size:1rem; font-weight:500; text-decoration:none; color:var(--ink-soft);
  padding:7px 0; border-bottom:2px solid transparent;
}
nav.primary a:hover{color:var(--ink); border-color:var(--teal);}
nav.primary a[aria-current="page"]{color:var(--ink); border-color:var(--ember);}

/* Book an Appointment, as a button in the menu */
nav.primary a.nav-cta{
  background:var(--ember); color:#fff; border-radius:8px;
  padding:.68em 1.4em; border-bottom:none; font-weight:600;
  transition:background .15s ease;
}
nav.primary a.nav-cta:hover{background:var(--ember-dark); color:#fff; border-color:transparent;}
nav.primary a.nav-cta[aria-current="page"]{color:#fff; border-color:transparent;}

/* Blog, as its own white box beside the booking button */
nav.primary a.nav-blog{
  background:#FFFFFF; color:#16221F; border-radius:8px;
  padding:.68em 1.4em; border-bottom:none; font-weight:600;
  transition:background .15s ease;
}
nav.primary a.nav-blog:hover{background:var(--bg); color:#16221F; border-color:transparent;}
nav.primary a.nav-blog[aria-current="page"]{color:#16221F; border-color:transparent;}

/* Between the phone menu (901px) and a wide desktop the five links plus the two
   buttons do not always fit on one line. They wrapped before Staff Login was
   added; the only change here is that they now wrap as whole links onto a
   second row instead of breaking "About Us" and "Book an Appointment" across
   lines. Above the band nothing moves. */
@media (min-width:901px){
  nav.primary{flex-wrap:wrap; justify-content:flex-end; row-gap:10px;}
  nav.primary a{white-space:nowrap;}
}
/* Between the phone menu and a roomy desktop the row has to carry a large
   lock-up, four links and two buttons on one line. Below about 1120px it no
   longer fits, so the lock-up and the type step down together — both logo
   tokens move at once, so the star-to-word proportion is never disturbed —
   rather than letting the buttons drop onto a second row. */
@media (min-width:901px) and (max-width:1120px){
  :root{--logo-mark:66px; --logo-word:1.42rem;}
  nav.primary{gap:8px 14px;}
  nav.primary a{font-size:.92rem;}
  /* padding, not margin: margin-left:auto is what holds the two boxes against
     the right edge and must survive this narrowing */
  .nav-actions{padding-left:14px; gap:8px;}
  nav.primary a.nav-blog,
  nav.primary a.nav-staff{padding:.58em .95em; font-size:.92rem;}
}
@media (min-width:1121px) and (max-width:1240px){
  nav.primary{gap:10px 22px;}
  .nav-actions{padding-left:var(--space-md, 16px);}
}

.nav-toggle-label{
  display:none; cursor:pointer; width:44px; height:44px;
  border:1px solid var(--line); border-radius:var(--radius-s);
  align-items:center; justify-content:center;
}
#nav-toggle{display:none;}
.header-actions{display:flex; align-items:center; gap:10px;}
/* On a wide screen this holds only the menu button, which is hidden — but it
   is still a flex item, and the row's 20px gap was keeping the two action
   boxes that far short of the right edge. */
@media (min-width:901px){ .header-actions{display:none;} }

@media (max-width:900px){
  nav.primary{
    /* the drop-down hangs exactly under the header, whose height is the star's
       box plus the row's 12px padding top and bottom plus its 1px rule — so it
       follows --logo-mark instead of a number that has to be remembered */
    position:fixed; inset:calc(var(--logo-mark) + 25px) 0 auto 0; background:var(--bg);
    flex-direction:column; align-items:stretch; gap:0;
    padding:16px 24px 24px; border-bottom:1px solid var(--line);
    opacity:0; pointer-events:none; transform:translateY(-8px);
    transition:opacity .18s ease, transform .18s ease;
  }
  nav.primary a{padding:14px 2px; border-bottom:1px solid var(--line); font-size:1rem;}
  nav.primary > a:first-child{margin-left:0;}
  .nav-actions{flex-direction:column; align-items:stretch; gap:10px;
    margin-left:0; padding-left:0; margin-top:16px;}
  nav.primary a.nav-staff,
  nav.primary a.nav-blog,
  nav.primary a.nav-cta{text-align:center; padding:14px 18px; border-bottom:none;}
  #nav-toggle:checked ~ .nav-row nav.primary{opacity:1; pointer-events:auto; transform:none;}
  .nav-toggle-label{display:flex;}
}
@media (max-width:520px){
  .header-actions .btn .long{display:none;}
  /* the lock-up scales as one thing: both halves shrink together, so the
     3.5:1 proportion holds on a phone as well */
  :root{--logo-mark:81px; --logo-word:1.6rem;}
}

/* ---------- hero ---------- */
.hero{padding-block:var(--sp-section);}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--space-2xl); align-items:center;}
@media (max-width:860px){ .hero-grid{grid-template-columns:1fr; gap:var(--space-xl);} }
.hero h1{margin:0 0 var(--space-sm);}
.hero .subline{
  font-family:var(--font-display); font-weight:500;
  font-size:1.35rem; color:var(--teal-dark); margin-bottom:20px;
}
.badge-row{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin-top:24px; font-size:.84rem; color:var(--ink-faint);
}
.badge-row .dot{width:4px; height:4px; border-radius:50%; background:var(--ink-faint);}
.badge-row strong{color:var(--ink);}

/* Two neighbouring bands on the SAME background share one unit of space instead
   of stacking two, so the rhythm reads evenly whether or not the colour changes. */
.hero:not(.section-alt):has(+ .section:not(.section-alt)),
.section:not(.section-alt):has(+ .section:not(.section-alt)),
.hero.section-alt:has(+ .section.section-alt),
.section.section-alt:has(+ .section.section-alt){padding-bottom:calc(var(--sp-section) / 2);}

.hero:not(.section-alt) + .section:not(.section-alt),
.section:not(.section-alt) + .section:not(.section-alt),
.hero.section-alt + .section.section-alt,
.section.section-alt + .section.section-alt{padding-top:calc(var(--sp-section) / 2);}

/* ---------- cards & grids ---------- */
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-gap);}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-gap);}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-gap);}
@media (max-width:900px){ .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} }

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-m); padding:32px;
  box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:12px;
}
.card p{color:var(--ink-soft); font-size:1rem;}
.card .icon-badge{
  width:46px; height:46px; border-radius:var(--radius-s);
  background:var(--teal-tint); color:var(--teal-dark);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

/* The six treatment cards, and only those: one subtle sage for all of them,
   so the section stays a single quiet family rather than six colours. Scoped
   to #services because .card is a shared class used on other pages too. */
#services .card{background:#E7EFEC; border-color:#D0DDD8;}
#services .card .icon-badge{background:#D1E4DE; color:var(--teal-dark);}

.list-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-m); padding:16px 18px;
  display:flex; align-items:center; gap:12px;
}
.list-card .icon{width:20px; height:20px; color:var(--teal); flex-shrink:0;}
.list-card h4{font-size:.95rem;}
.list-card p{font-size:.8rem; color:var(--ink-faint);}

.icon{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}

.ticklist{display:flex; flex-direction:column; gap:10px;}
/* find-us right column: pin + maps button, then the notes list */
.find-visual{display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%;}
.map-block{display:flex; flex-direction:column; align-items:center; width:260px; max-width:100%;}
.map-block .illus{width:100%;}
.find-visual .ticklist{margin-top:var(--sp-block); width:100%; max-width:480px;}
.find-grid > div > .info-row:last-of-type{margin-bottom:0;}
@media (max-width:860px){
  .find-visual{align-items:flex-start;}
  .find-visual .ticklist{margin-top:var(--space-lg);}
}

.ticklist li{display:flex; gap:10px; font-size:.93rem; color:var(--ink-soft);}
.ticklist li::before{
  content:""; flex:0 0 auto; width:7px; height:7px; border-radius:50%;
  background:var(--teal); margin-top:.55em;
}

.note{
  background:var(--teal-tint); border-radius:var(--radius-m);
  padding:18px 22px; display:flex; gap:14px;
  font-size:.9rem; color:var(--teal-dark);
}
.note .icon{color:var(--teal-dark); flex-shrink:0;}
.note strong{display:block; font-family:var(--font-display);}
.note.amber{background:var(--amber-tint); color:var(--amber);}
.note.amber .icon{color:var(--amber);}

/* ---------- animated illustrations ---------- */
.illus{
  background:var(--teal-tint); border-radius:var(--radius-l);
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:4/3; padding:20px; overflow:hidden;
}
.illus.ember{background:var(--ember-tint);}
.illus.plain{background:transparent; padding:0;}
.illus.compact{aspect-ratio:16/9; padding:16px;}
.illus svg{width:78%; height:78%;}

/* ---------- hero photography -----------------------------------------------
   One rule for the lead image on every page, so the About and Treatments heroes
   cannot drift apart: the frame is always 16:10 and the photograph fills it edge
   to edge, clipped to the frame's own rounded corner with no mat around it.

   16:10 is the ratio that costs the least. The two lead images are 1.40 and 1.78;
   at 1.6 the first loses about 6% top and bottom and the second about 5% from each
   side, which is margin in both rather than subject matter. A frame matching either
   one exactly would take roughly a quarter off the other. */
.illus-photo{
  aspect-ratio:16/10; padding:0; background:var(--teal-tint);
  display:block; overflow:hidden;
}
.illus-photo img{
  width:100%; height:100%; object-fit:cover; object-position:50% 25%;
  display:block; border-radius:inherit;
  /* 25%, not centre: the four-panel image loses 12.5% of its height to the crop,
     and taking 3% from the top instead of 6% is what keeps the IntactPhysio
     wordmark inside the two upper panels. Checked against 35/50/65% — at 35 the
     top wordmarks are already clipped. On the Treatments image the crop falls on
     the horizontal axis, so this value has no effect there. */
}

/* Where a photo has to sit in a fixed frame — the card strips — it fills the
   frame and is cropped rather than squashed. Which part survives the crop is
   set per image by one of these four classes, chosen by looking at each one:
   a label or a highlight near the top needs the window pulled upwards. */
.pos-high img  {object-position:50% 20%;}
.pos-upper img {object-position:50% 35%;}
.pos-mid img   {object-position:50% 45%;}
.pos-center img{object-position:50% 50%;}

.ill-ink{fill:var(--ink);} .ill-ink-s{stroke:var(--ink); fill:none;}
.ill-teal{fill:var(--teal);} .ill-teal-s{stroke:var(--teal); fill:none;}
.ill-ember{fill:var(--ember);} .ill-ember-s{stroke:var(--ember); fill:none;}
.ill-ground{fill:var(--ink); opacity:.1;}

@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
@keyframes sway{0%,100%{transform:rotate(-4deg);}50%{transform:rotate(4deg);}}
@keyframes pulse-ring{0%{transform:scale(.85);opacity:.9;}70%{transform:scale(1.35);opacity:0;}100%{opacity:0;}}
@keyframes dash{to{stroke-dashoffset:0;}}
@keyframes twinkle{0%,100%{opacity:.25;}50%{opacity:1;}}
@keyframes stride{0%,100%{transform:translateX(-3px);}50%{transform:translateX(3px);}}

.a-bob{animation:bob 3.6s ease-in-out infinite; transform-origin:center;}
.a-sway{animation:sway 4s ease-in-out infinite; transform-origin:50% 90%;}
.a-ring{animation:pulse-ring 2.8s ease-out infinite; transform-origin:center; transform-box:fill-box;}
.a-ring.d1{animation-delay:.9s;}
.a-ring.d2{animation-delay:1.8s;}
.a-draw{stroke-dasharray:600; stroke-dashoffset:600; animation:dash 2.4s ease-out forwards .2s;}
.a-twinkle{animation:twinkle 2.2s ease-in-out infinite;}
.a-twinkle.d1{animation-delay:.5s;}
.a-twinkle.d2{animation-delay:1s;}
.a-stride{animation:stride 2s ease-in-out infinite;}

@media (prefers-reduced-motion: reduce){
  .a-bob,.a-sway,.a-ring,.a-twinkle,.a-stride{animation:none;}
  .a-draw{animation:none; stroke-dashoffset:0;}
  html{scroll-behavior:auto;}
}

/* ---------- feature cards with artwork ---------- */
.feature-card{padding-top:0; overflow:hidden;}
/* the art strip bleeds to the card's edges: the card's own padding is cancelled
   on three sides so the image meets the border rather than floating inside it */
.card-art{
  margin:-1px calc(-1 * var(--space-xl)) var(--space-md);
  background:var(--teal-tint);
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:16/9; padding:14px; overflow:hidden;
}
.card-art svg{width:84%; height:84%;}
.feature-card:nth-child(2) .card-art{background:var(--ember-tint);}
/* a photo fills the strip edge to edge, so it loses the inner padding */
.card-art:has(img){padding:0;}
.card-art img{width:100%; height:100%; object-fit:cover; display:block;}

/* The cards that describe what we treat use the same .feature-card / .card-art
   components as the About page, in the same .grid-3 — one set of rules, so the
   two pages cannot drift apart. */

/* ---------- treatment pathway ---------- */
/* Six labelled stages on one horizontal strip. It keeps its native proportions
   at every width — cropping it would remove a stage. Below 720px the strip would
   render its labels at about four pixels tall, so instead of shrinking it into
   illegibility it holds a readable minimum width inside its own scroller; the
   page itself never scrolls sideways. */
/* the gap below it is --sp-gap, the same value the card grid uses between its
   rows, so image-to-cards and row-to-row read as one interval */
/* The same thin lining and the same lift as the pricing cards, around the
   treatment pathway. overflow:hidden stays — it is what clips the picture to
   the radius — and does not touch the shadow, which the figure casts outward. */
.pathway{
  margin:var(--sp-block) 0 var(--sp-gap); padding:0;
  border:1.6px solid #E2C0AE;
  border-radius:var(--radius-m); overflow:hidden;   /* same radius as .card */
}
.pathway img{width:100%; height:auto; display:block;}
@media (hover:hover){
  .pathway{transition:border-color .15s ease, box-shadow .15s ease, translate .15s ease;}
  .pathway:hover{
    border-color:#D9B49C;
    box-shadow:0 2px 4px rgba(22,34,31,.06), 0 14px 30px -14px rgba(22,34,31,.3);
    translate:0 -2px;
  }
}
@media (prefers-reduced-motion:reduce){
  .pathway{transition:none;}
  .pathway:hover{translate:none;}
}


/* ---------- logo strip ---------- */
/* The five bodies we are registered with or belong to. White cards on the page's
   warm background, with a teal rule around them, so they read as five things
   you can click rather than five pale panels. The whole card is the link.
   Three columns before two, never one: a single column turns each card into a
   wide, almost empty band. */
.logo-strip{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px;
  /* every row the same height, so the five cards match even once they wrap */
  grid-auto-rows:1fr;
}
@media (max-width:1000px){ .logo-strip{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:620px){ .logo-strip{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;} }
/* Pale sage with a thin muted teal edge — a credential card rather than a
   promotional one. One colour for all five, because they are a set. */
.logo-badge{
  background:#E7F1ED; border:1px solid #6F9D94;
  border-radius:var(--radius-m); padding:22px 14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px; text-align:center; min-height:144px; height:100%;
  text-decoration:none; color:inherit;
  box-shadow:var(--shadow);
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.logo-badge:hover{
  border-color:var(--teal-dark);
  box-shadow:0 2px 4px rgba(22,34,31,.06), 0 14px 30px -14px rgba(22,34,31,.3);
  transform:translateY(-2px);
}
a.logo-badge:focus-visible{outline:3px solid var(--ember); outline-offset:3px;}
.logo-badge .mark{
  font-family:var(--font-display); font-weight:700; font-size:1.5rem;
  letter-spacing:-.01em; color:var(--teal-dark); line-height:1.12;
}
/* the full name: 8:1 on white, where the old pale grey managed 3.8:1 */
.logo-badge .full{font-size:.88rem; color:var(--ink-soft); line-height:1.4;}
@media (max-width:620px){
  .logo-badge{padding:20px 12px; min-height:132px;}
  .logo-badge .mark{font-size:1.35rem;}
  .logo-badge .full{font-size:.84rem;}
}

/* ---------- pricing ---------- */
/* Three equal cards in one row, compact. The only colour inside a card is the pill
   at the top and the tick marks; everything else is ink on white inside the same
   beige hairline the rest of the site uses, so the row reads as one set rather
   than one card competing with the other two. */
.price-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--sp-gap); align-items:stretch;
}
/* a middle step so the three do not jump straight from one row to a stack */
@media (max-width:980px){ .price-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .price-grid{grid-template-columns:1fr;} }

/* One warm blush across all three tiers, with a border a shade deeper than the
   fill rather than the shared hairline. The cards are told apart by their
   headings and prices, not by colour, so the row reads as one set.
   Measured: headings 14.4:1, body text 7.1:1, the price 14.4:1. */
.price-card{
  background:#FBEEE8; border:1px solid #EDD6CA;
  border-radius:var(--radius-m); padding:22px 26px 24px;
  display:flex; flex-direction:column; align-items:flex-start;
  /* stretch makes every card the height of the tallest, so the three match
     whatever the text does at a given width */
  height:100%;
}
.price-card h3{
  font-size:1.12rem; line-height:1.25; letter-spacing:-.01em;
  margin:14px 0 0;
}
/* the price is the loudest thing in the card; the duration rides beside it at
   body size so the pair reads as one line */
/* Arial rather than the mono face used elsewhere: IBM Plex Mono draws a dot
   inside its zero, which turns £50 and 30 min into something that looks like
   a typo. Size, weight, colour and spacing are unchanged; the figures are
   tabular in Arial, so the three cards still line up. */
.price-value{
  font-family:Arial, Helvetica, ui-sans-serif, system-ui, sans-serif;
  font-size:1.55rem; font-weight:600;
  letter-spacing:-.01em; margin-top:6px; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.price-value span{font-size:.9rem; font-weight:500; color:var(--ink-faint);}
.price-card ul{display:flex; flex-direction:column; gap:7px; margin-top:16px;}
.price-card li{
  font-size:.9rem; line-height:1.45; color:var(--ink-soft);
  display:flex; gap:8px; align-items:baseline;
}
/* A deeper ember than the shared --ember-dark, which reaches only 3.9:1 on
   this fill — too little for type this small. */
.price-card .pill{background:#F3DCD0; color:#A33518;}
/* The same lift the membership cards use: the border deepens, a shadow comes
   up and the card rises 2px. Only where there is a real pointer — on a touch
   screen a hover state sticks after a tap, and these cards are not links. */
@media (hover:hover){
  .price-card{transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;}
  .price-card:hover{
    border-color:#D9B49C;
    box-shadow:0 2px 4px rgba(22,34,31,.06), 0 14px 30px -14px rgba(22,34,31,.3);
    transform:translateY(-2px);
  }
}
@media (hover:hover) and (prefers-reduced-motion:reduce){
  .price-card{transition:none;}
  .price-card:hover{transform:none;}
}
.price-card li::before{content:"✓"; color:var(--teal); font-weight:700; flex:none;}

@media (max-width:420px){
  .price-card{padding:20px 22px 22px;}
  .price-value{font-size:1.45rem;}
}

/* ---------- pay by QR ---------- */
.pay-panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:24px; height:100%;
  display:flex; gap:20px; align-items:center; flex-wrap:wrap;
}
.pay-panel .copy{flex:1 1 210px; min-width:0;}
.pay-panel h3{margin-bottom:8px;}
.pay-panel p{color:var(--ink-soft); font-size:.93rem; margin-bottom:8px;}
.pay-panel p:last-child{margin-bottom:0;}
.qr-slot{flex:0 0 auto; text-align:center;}
.qr-box{
  width:118px; height:118px; margin:0 auto;
  border:2px dashed var(--teal-dark); border-radius:10px; background:var(--bg);
  position:relative; display:flex; align-items:center; justify-content:center;
}
.qr-box::before,.qr-box::after,.qr-box i{
  content:""; position:absolute; width:26px; height:26px;
  border:7px solid var(--ink); border-radius:4px;
}
.qr-box::before{top:12px; left:12px;}
.qr-box::after{top:12px; right:12px;}
.qr-box i{bottom:12px; left:12px;}
.qr-box span{
  position:relative; z-index:1; font-family:var(--font-mono); font-size:.66rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--amber);
  background:var(--amber-tint); padding:3px 7px; border-radius:4px;
}
.qr-slot .lbl{
  display:block; margin-top:10px; font-family:var(--font-mono); font-size:.7rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--teal-dark);
}

/* ---------- steps ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-lg);}
@media (max-width:860px){ .steps{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .steps{grid-template-columns:1fr;} }
.step-num{
  font-family:var(--font-mono); font-weight:600; font-size:.8rem; color:var(--ember);
  width:36px; height:36px; border-radius:50%; border:1.5px solid var(--ember);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.step h4{margin-bottom:6px;}
.step p{font-size:.88rem; color:var(--ink-soft);}

/* ---------- faq ---------- */
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  list-style:none; cursor:pointer; padding:16px 2px; font-weight:600; font-size:.96rem;
  display:flex; justify-content:space-between; align-items:center; gap:14px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item .chev{width:18px; height:18px; color:var(--ink-faint); flex-shrink:0; transition:transform .2s;}
.faq-item[open] .chev{transform:rotate(180deg);}
.faq-item .a{padding:0 2px 18px; color:var(--ink-soft); font-size:.93rem; max-width:72ch;}

/* ---------- blog ---------- */
.feature{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-l); padding:var(--space-xl); margin-bottom:var(--space-xl);
}
@media (max-width:600px){ .feature{padding:var(--space-lg);} }
.feature h2{margin-bottom:14px;}
.feature p{margin-bottom:14px; color:var(--ink-soft);}
.feature h3{margin:24px 0 8px; color:var(--teal-dark); font-size:1.05rem;}
/* The card runs the full width of the page like every other block, so the body
   text is set in two columns — that keeps the line length readable and roughly
   halves how far the article runs down the page. */
.feature-body{columns:2; column-gap:var(--space-2xl);}
.feature-body > *{break-inside:avoid;}
.feature-body h3{break-after:avoid; margin-top:0;}
.feature-body > h3 + p{margin-top:0;}
.feature-body > *:first-child{margin-top:0;}
.feature-body p:last-child{margin-bottom:0;}
/* the closing line names the clinic, so it is set apart in the brand ember
   rather than the softer body colour. The darker ember of the pair is used
   because the lighter one reads at only 3.9:1 on white, under the 4.5:1 that
   body text needs; this one measures 5.15:1. */
.feature-close{color:var(--ember-dark) !important; font-weight:400; margin-top:var(--space-lg);}
@media (max-width:900px){ .feature-body{columns:1;} }
.group-head{display:flex; align-items:center; gap:var(--space-md); margin:var(--sp-block) 0 var(--space-md);}
.group-art{
  flex:0 0 auto; width:104px; height:72px; border-radius:var(--radius-m);
  background:var(--teal-tint); display:flex; align-items:center; justify-content:center; padding:9px;
}
.group-art svg{width:100%; height:100%;}
/* the five category marks are images now; they keep the tile they already sat in,
   centred and fitted so every one shows at the same box size whatever its own
   proportions */
.group-art img{width:100%; height:100%; object-fit:contain; display:block;}
/* the five category tiles all take the same pale mint, so the row reads as one
   component; the pill above each heading still carries the colour coding */
@media (max-width:520px){ .group-art{width:84px; height:58px;} }
.group-head h3{font-size:1.15rem;}
/* lifted out of inline style attributes so all spacing lives in the stylesheet */
.group-sub{margin-top:var(--space-xs);}
/* The two featured timelines. Both carry their own pale mint panel, so the
   figure adds no frame of its own — just the site's rounded corner and the same
   margin above and below, which keeps title -> image -> text identical on both
   articles. width:100% with height:auto means each keeps its own proportions
   and scales down on a narrow screen rather than being cropped, so the dates
   and captions inside stay readable. */
.feature-media{
  margin:var(--space-lg) 0; border-radius:var(--radius-m); overflow:hidden;
  border:1.6px solid #E2C0AE;   /* the pricing cards' lining, on both timelines */
}
.feature-media img{width:100%; height:auto; display:block;}

/* Shared by every wide strip whose own labels are the point: the treatment
   pathway and the two blog timelines. Below 720px, scaling them to a phone's
   width would set their type at three or four pixels, so each holds a readable
   minimum width inside its own scroller instead. Nothing is cropped and the page
   itself never scrolls sideways. */
@media (max-width:720px){
  .pathway,
  .feature-media{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    border-radius:var(--radius-s);
    /* a soft fade at the right edge is the only cue that there is more to see;
       it disappears once the strip is scrolled to the end */
    -webkit-mask-image:linear-gradient(90deg, #000 86%, transparent 100%);
            mask-image:linear-gradient(90deg, #000 86%, transparent 100%);
  }
  .pathway img,
  .feature-media img{width:640px; max-width:none;}
  /* the overlays are positioned against the stage, so it holds the same
     width as the picture inside the scroller */
  .feature-media .story-stage{width:640px;}
  .feature-media .story-stage > img{width:100%;}
}
@media (prefers-reduced-motion:no-preference){
  .pathway,
  .feature-media{scroll-behavior:smooth;}
}

.illus-pin{aspect-ratio:100/104; max-width:196px; margin-bottom:var(--space-md);}
.article{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-m); padding:22px;
  display:flex; flex-direction:column; gap:10px;
}
.article h4{font-size:1rem;}
.article p{font-size:.9rem; color:var(--ink-soft);}

/* ---------- find us ---------- */
.find-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-gap); margin-top:var(--sp-block);}
@media (max-width:760px){ .find-grid{grid-template-columns:1fr;} }
.info-row{display:flex; gap:var(--space-sm); align-items:flex-start; margin-bottom:var(--space-md);}
.info-row .icon{color:var(--teal); flex-shrink:0; margin-top:2px;}
.info-row strong{display:block; font-size:.92rem;}
.info-row span{font-size:.9rem; color:var(--ink-soft);}
.hours-row{display:flex; justify-content:space-between; gap:16px; max-width:320px; font-size:.9rem; color:var(--ink-soft); padding:3px 0;}
.hours-row span:last-child{font-variant-numeric:tabular-nums; white-space:nowrap;}

/* ---------- availability calendar (Pay As You Go) ---------- */
/* booking now happens in the Zanda portal, so the page offers two routes out:
   the portal, and the phone. The manual availability calendar that used to sit
   here was removed on 1 Oct 2026 — Zanda is the single source of truth. */
/* Two rows, two columns: the button on the left, the sentence that explains it on
   the right. Column one is sized to the wider of the two buttons, so both buttons
   come out the same width without either label being allowed to wrap. */
.book-cta{
  display:grid; grid-template-columns:max-content minmax(0,1fr);
  column-gap:var(--space-xl); row-gap:var(--space-md); align-items:center;
  margin-top:var(--sp-block);
}
.book-cta .btn{justify-content:center; width:100%;}
/* ---------- booking cards ---------- */
/* The two cards stack rather than sitting side by side, so both take the full
   container width and their edges line up with the heading above and the buttons
   below. Neither has a fixed height — Pay As You Go stays short, and Private
   Insurance grows as insurers are added. */
.book-cards{
  display:flex; flex-direction:column; gap:var(--space-lg);
  margin-top:var(--sp-block);
}
/* Neither card has a height, a min-height or a stretch alignment — each is a
   plain column flexbox, so its height is exactly its content plus its padding.
   These two are padded tighter than cards elsewhere on the site because they
   run the full page width, where 32px reads as a margin rather than padding. */
.book-cards .card{padding:var(--space-lg); gap:var(--space-sm);}
/* The card stays full width and the text stops just short of it. 1150px is not
   arbitrary: it is the measure at which "We welcome self-pay patients…" sets on
   one line and "Before booking, please contact your insurer…" sets on two, at
   1280px and wider. At 1150 the first fits with ~15px to spare; at 1100 it drops
   to two lines. Below about 1180px of viewport there is not enough room and both
   wrap further, which is the right thing to do. */
.book-cards .card > p{max-width:1150px;}
/* 12px of flex gap + 4px here = the 16px that separates one paragraph from the
   next, a touch more than the gap between a heading and the line under it */
.book-cards .card > p + p{margin-top:4px;}
/* the line that introduces the logos opens a new idea, so it gets a clear break
   from the paragraph above rather than the paragraph-to-paragraph step */
.book-cards .card > p.card-lead-in{margin-top:var(--space-md);}
@media (max-width:620px){
  .book-cards .card{padding:20px;}
}

/* ---------- insurance card ---------- */
/* a short line that introduces the list or the logos below it */
.card-lead-in{margin-top:var(--space-md); font-weight:600; color:var(--ink);}

/* A logo wall that does not need redesigning when the fourth or the tenth insurer
   arrives. Flex rather than a grid of fixed columns, deliberately: a grid track
   would hold open horizontal space for insurers that do not exist yet, whereas a
   flex row is exactly as wide as the marks actually in it and wraps when it runs
   out of room. Adding one is a single <li>; the card grows only then. */
.insurer-row{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:20px 28px;
  margin-top:4px;   /* + the card's 12px flex gap = 16px below the line above */
}
/* every logo sits in the same height band; `contain` keeps each mark's own
   proportions inside it, so nothing is stretched however odd its aspect ratio,
   and the width cap stops a very wide mark dwarfing a square one */
.insurer-row li{
  height:56px; display:flex; align-items:center; justify-content:flex-start;
}
/* a logo may or may not be a link; when it is, it fills its band so the whole mark
   is the target, and dims very slightly on hover so it reads as clickable */
.insurer-row li > a{
  display:flex; align-items:center; height:100%;
  border-radius:var(--radius-s); transition:opacity .15s ease;
}
.insurer-row li > a:hover{opacity:.72;}
.insurer-row img{
  max-height:100%; max-width:200px; width:auto; height:auto;
  object-fit:contain; display:block;
}
@media (max-width:620px){
  .insurer-row{gap:var(--space-md) var(--space-lg);}
  .insurer-row li{height:48px;}
  .insurer-row img{max-width:150px;}
}

/* 78ch is the measure that lands the booking sentence on two lines rather than
   three at a normal desktop width; narrower than 1150px there is not room for
   two, and it wraps to three on its own. */
.book-note{
  max-width:78ch; margin:0;
  font-size:.97rem; line-height:1.6; color:var(--ink-soft);
}
/* on a phone the two columns collapse, and DOM order does the rest:
   button, its explanation, button, its explanation */
@media (max-width:720px){
  .book-cta{grid-template-columns:1fr; row-gap:10px;}
  .book-cta .book-note{margin-bottom:16px;}
  .book-cta .book-note:last-child{margin-bottom:0;}
}

/* ---------- footer ---------- */
/* same charcoal-to-black mix as the header, mirrored: the ember bloom falls from
   the top centre here, so the two dark bands bookend the page */
footer{
  background:
    radial-gradient(95% 165% at 50% -22%, var(--band-glow), rgba(225,80,43,0) 58%),
    linear-gradient(180deg, var(--band-top) 0%, var(--band-mid) 40%, var(--band-base) 100%);
  color:rgba(239,237,228,.72);
  /* its own top padding rather than the section token: every other band on
     the site keeps --sp-section, only the footer's upper strip tightens */
  padding-block:30px 40px; margin-top:auto;
}
footer a{text-decoration:none;}
footer a:hover{color:var(--bg);}

/* brand lock-up: logo left, social right, on one rule-separated row */
.footer-brand{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  /* 20px under the lock-up, down from 32px — the rule and the link columns
     below it are unchanged */
  padding-bottom:20px;
  border-bottom:1px solid rgba(239,237,228,.14);
  margin-bottom:var(--sp-block);
}
.footer-logo{display:flex; align-items:center; gap:.45em; color:#F3F0E8;}
.footer-logo em{font-style:normal; color:var(--ember);}
.footer-logo svg{width:var(--logo-mark); height:var(--logo-mark);}
.footer-logo span{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--logo-word); letter-spacing:-.02em;
}
.social{display:flex; gap:10px; list-style:none; margin:0; padding:0;}
.social li{margin:0;}
.social a{
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(239,237,228,.28); color:rgba(239,237,228,.82);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.social a:hover{background:var(--ember); border-color:var(--ember); color:#fff;}
.social svg{width:18px; height:18px; fill:currentColor; stroke:none;}

/* four columns, headings on one baseline; the link columns are narrow and set
   well apart, and Blog gets the width its paragraph needs to flow naturally */
.footer-grid{
  display:grid;
  grid-template-columns:.85fr .95fr 1.1fr 1.7fr;
  column-gap:clamp(30px, 4vw, 56px);
  row-gap:var(--sp-block);
  align-items:start;
}
.footer-col{display:flex; flex-direction:column; min-width:0;}
.footer-col h5{
  font-family:var(--font-mono); font-size:.78rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:#EDA188; margin:0 0 18px; line-height:1.4;
}
.footer-col h5 a{color:inherit;}
.footer-col h5 a:hover{color:#F5C0AD;}
.footer-col ul{display:flex; flex-direction:column; gap:11px; margin:0; padding:0; list-style:none;}
.footer-col li{margin:0; font-size:.97rem; line-height:1.45;}
.footer-find{display:flex; flex-direction:column; gap:var(--space-md); font-size:.97rem;}
.find-block{display:flex; flex-direction:column; gap:5px; line-height:1.45;}
.find-block b{font-weight:700; color:#F3F0E8;}
/* The first address line is bold and links to the map. Two classes, because
   .contact-link sets colour:inherit further down the sheet and would otherwise
   win: the line keeps exactly the weight and colour it had as plain bold text,
   so only the underline marks it as a link. */
.find-block .find-addr{font-weight:700; color:#F3F0E8;}
.footer-note-text{
  margin:0; font-size:.88rem; line-height:1.6; color:rgba(239,237,228,.6);
}
.footer-note-text + .footer-note-text{margin-top:1em;}

.footer-bottom{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:var(--sp-block); padding-top:var(--space-lg);
  font-size:.83rem; color:rgba(239,237,228,.45);
  border-top:1px solid rgba(239,237,228,.14);
}

@media (max-width:1080px){
  .footer-grid{grid-template-columns:1fr 1fr; column-gap:clamp(30px, 5vw, 56px);}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr; row-gap:var(--sp-block);}
  .footer-brand{flex-direction:column; align-items:flex-start; gap:var(--space-lg);}
  .social{gap:9px;}
}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}

/* ---------- dark header band (matches the printed business card) ---------- */
/* Two layers: an ember bloom rising from the bottom centre, over the
   charcoal-to-black gradient. The footer mirrors it, bloom falling from above. */
header{
  position:sticky; top:0; z-index:50;
  background:
    radial-gradient(130% 240% at 50% 128%, var(--band-glow), rgba(225,80,43,0) 56%),
    linear-gradient(180deg, var(--band-top) 0%, var(--band-mid) 46%, var(--band-base) 100%);
  border-bottom:1px solid rgba(243,240,232,.10);
  backdrop-filter:none;
}
.logo{color:#F3F0E8;}
nav.primary a{color:rgba(243,240,232,.76);}
nav.primary a:hover{color:#FFFFFF; border-color:var(--ember);}
nav.primary a[aria-current="page"]{color:#FFFFFF; border-color:var(--ember);}
/* Staff Login — ours, not a visitor's, so it sits quieter than the rest.
   This has to live inside the dark-header block: the generic
   nav.primary a colour above is declared later than the link styles. */
/* Staff Login reads as its own box beside Blog and Book an Appointment, in the
   soft teal tint the cards on the site use — present without competing with
   the two the public is meant to press. */
nav.primary a.nav-staff{
  background:var(--teal-tint); color:var(--teal-dark); border-radius:8px;
  padding:.68em 1.4em; border-bottom:none; font-weight:600; font-size:1rem;
  transition:background .15s ease;
}
nav.primary a.nav-staff:hover{background:#CBE0D7; color:var(--teal-dark); border-color:transparent;}
nav.primary a.nav-staff[aria-current="page"]{color:var(--teal-dark); border-color:transparent;}
.nav-toggle-label{border-color:rgba(243,240,232,.30); color:#F3F0E8;}
@media (max-width:900px){
  /* the dropdown panel keeps the band's own charcoal rather than flat ink */
  nav.primary{
    background:linear-gradient(180deg, var(--band-mid), var(--band-base));
    border-bottom-color:rgba(243,240,232,.12);
  }
  nav.primary a{border-bottom-color:rgba(243,240,232,.12);}
}


/* ---------- cookie consent bar ---------- */
.cookie-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:linear-gradient(180deg, var(--band-mid), var(--band-base));
  color:rgba(239,237,228,.82);
  border-top:1px solid rgba(239,237,228,.16);
  padding:18px 0 calc(18px + env(safe-area-inset-bottom, 0px));
  transform:translateY(100%); transition:transform .28s ease;
  box-shadow:0 -8px 30px -18px rgba(0,0,0,.7);
}
.cookie-bar.is-in{transform:none;}
@media (prefers-reduced-motion:reduce){
  .cookie-bar{transition:none; transform:none;}
}
.cookie-inner{
  max-width:var(--maxw); margin:0 auto; padding-inline:32px;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.cookie-text{font-size:.9rem; line-height:1.55; max-width:70ch; min-width:0;}
.cookie-text a{color:#EDA188; font-weight:600; text-decoration:underline;}
.cookie-text a:hover{color:#F5C0AD;}
.cookie-actions{display:flex; gap:12px; flex:0 0 auto;}
.cookie-actions .btn{padding:11px 24px; font-size:.92rem;}
.cookie-bar .btn-ghost{
  background:transparent; color:#F3F0E8; border-color:rgba(239,237,228,.38);
}
.cookie-bar .btn-ghost:hover{background:rgba(239,237,228,.1); border-color:rgba(239,237,228,.6);}
@media (max-width:700px){
  .cookie-inner{padding-inline:20px; gap:16px;}
  .cookie-actions{width:100%;}
  .cookie-actions .btn{flex:1; justify-content:center;}
}

/* ---------- tappable phone / email ---------- */
.contact-link{
  color:inherit; text-decoration:none;
  border-bottom:1px solid currentColor; border-bottom-color:rgba(127,127,127,.42);
  transition:border-color .15s ease, color .15s ease;
}
.contact-link:hover{border-bottom-color:currentColor;}
footer .contact-link:hover{color:var(--bg);}

/* ---------- legal / policy pages ---------- */
.legal{max-width:74ch;}
/* an address set on its own lines inside a policy page, not run into a sentence */
.addr-lines{line-height:1.55; margin-bottom:var(--space-md);}
.legal h2{
  font-size:1.5rem; margin:40px 0 var(--space-sm); padding-top:var(--space-lg);
  border-top:1px solid var(--line);
}
.legal > h2:first-of-type{border-top:none; padding-top:0; margin-top:0;}
.legal h2[id]{scroll-margin-top:112px;}  /* 89px sticky header + 24 */
.legal h3{font-size:1.05rem; margin:var(--space-lg) 0 var(--space-xs); color:var(--teal-dark);}
.legal p{margin-bottom:14px; color:var(--ink-soft); font-size:1.01rem;}
.legal p b, .legal li b{color:var(--ink); font-weight:600;}
.legal a:not(.btn){color:var(--ember-dark); font-weight:600;}
.legal-date{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-faint); margin-top:var(--space-lg);
}
.legal-list{
  list-style:none; margin:0 0 18px; padding:0;
  display:flex; flex-direction:column; gap:11px;
}
.legal-list li{
  position:relative; padding-left:22px;
  font-size:1.01rem; color:var(--ink-soft); line-height:1.6;
}
.legal-list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border-radius:50%; background:var(--teal);
}
.legal-xref{
  margin-top:var(--space-md); padding:14px 18px; border-left:3px solid var(--ember);
  background:var(--surface); font-size:.95rem;
}
.gap{
  background:var(--amber-tint); color:#7A4E07; font-weight:600;
  border-radius:5px; padding:.1em .45em; font-size:.93em; white-space:nowrap;
}
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:var(--space-md);}
.table-wrap .legal-table{margin-bottom:0; min-width:460px;}
.legal-table{width:100%; border-collapse:collapse; font-size:.93rem; margin-bottom:var(--space-md);}
.legal-table th,.legal-table td{
  text-align:left; padding:11px 14px; border-bottom:1px solid var(--line);
  vertical-align:top;
}
.legal-table th{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-faint); font-weight:600; white-space:nowrap;
}
.legal-table td:first-child{font-family:var(--font-mono); font-size:.86rem; color:var(--ink);}
.legal-table td{color:var(--ink-soft);}
@media (max-width:600px){
  .legal h2{font-size:1.3rem;}
  .legal-table{font-size:.86rem;}
  .legal-table th,.legal-table td{padding:9px 10px;}
}

/* ===========================================================
   Blog — pictorial article gallery
   Scoped to .gallery and .lightbox, so nothing here can reach
   another page. Added 4 Oct 2026.
   =========================================================== */

.gallery{
  margin-top:var(--sp-block);
  /* one place to tune the whole gallery's rhythm */
  --sec-pad:var(--space-lg);      /* inside the section card            */
  --sec-band:var(--space-xl);     /* banner down to the first row       */
  --sec-gap:var(--space-3xl);     /* one section to the next            */
}
@media (max-width:1000px){
  .gallery{--sec-pad:20px; --sec-band:var(--space-lg); --sec-gap:var(--space-2xl);}
}
@media (max-width:620px){
  .gallery{--sec-pad:var(--space-md); --sec-band:20px; --sec-gap:40px;}
}

/* Each section is one group: banner on top, its six articles beneath, held
   together by a card. The same language as the About Us and Treatments
   cards — one hairline, the page's own radius, the standard shadow — but a
   warm off-white a step lighter than the page and a step darker than the
   article tiles, so the three layers read in order without any heavy box. */
.gal-cat{
  background:#F5F3EB;
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:var(--sec-pad);
  box-shadow:var(--shadow);
}
.gal-cat + .gal-cat{margin-top:var(--sec-gap);}

/* The section header: title and introduction on the left, the section's own
   oval artwork on the right. The artwork is a transparent PNG with the logo
   already in it, shown whole — no mask, no frame, no crop, and nothing on
   hover. The picture column is one width for all five sections, so the logo
   inside each lands at the same size. */
/* Centred stack: title, then the note, then the oval. One column at every
   width, so desktop and phone differ only in how much room the picture gets. */
.gal-intro{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:var(--space-sm);
  margin:0 0 var(--sec-band);
}
.gal-title{
  margin:0; font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.4rem, 2.3vw, 1.85rem);
  letter-spacing:-.015em; line-height:1.15; color:var(--ink);
  text-wrap:balance;
}
/* The note is held to a comfortable measure and centred under the title. */
.gal-lede{
  margin:0 auto; color:var(--ink-soft);
  font-size:1.02rem; line-height:1.6; max-width:54ch;
  text-wrap:pretty;
}
/* The picture sits inside a wrapper that carries the sizing and draws the
   decorative rings, so the rings scale with it and move with it. The image
   itself only has to fill the wrapper's content box.
   height:auto keeps the file's own proportions; nothing is cropped or zoomed */
.gal-art{
  display:block; width:100%; height:auto;
  background:none; border:0; box-shadow:none; border-radius:0;
}

/* A single thin line around the oval, the same lining the pricing cards carry,
   and the same hover: the line deepens, a shadow comes up and the whole thing
   rises 2px. This replaced a much heavier treatment — a white edge, a wide
   translucent band, a 10.5px ember ring and a glow.

   The ring is inset to the artwork rather than drawn on the element box. Each
   PNG carries a soft halo baked into it that fades out over 34-50px before the
   canvas edge, so a line on the box edge sits that far off the picture. Every
   inset below was measured off its own file: the contour where the artwork
   becomes solid, less 8px of breathing room. They are percentages, so the gap
   and the line scale with the picture.

   The lift uses `translate`, not `transform`: the header's entrance and float
   animations already own `transform` on this element, and an animation beats a
   transition, so a hover transform here would simply never apply. The two are
   separate properties and compose, so the card lifts while the oval goes on
   drifting. */
.gal-oval{
  --ring:1;
  --oval-line:#E2C0AE;
  --oval-line-hover:#D9B49C;
  position:relative; display:block;
  width:100%; max-width:924px; margin:0 auto;
}
.gal-oval::before{
  content:""; position:absolute; inset:0;
  border-radius:50%; pointer-events:none;
  box-shadow:0 0 0 calc(1.6px * var(--ring)) var(--oval-line),
             0 0 0 0 rgba(22,34,31,0);
  transition:box-shadow .15s ease;
}
/* only where there is a real pointer: on a touch screen a hover state sticks
   after a tap, and these are pictures, not links */
@media (hover:hover){
  .gal-oval{transition:translate .15s ease;}
  .gal-oval:hover{translate:0 -2px;}
  .gal-oval:hover::before{
    box-shadow:0 0 0 calc(1.6px * var(--ring)) var(--oval-line-hover),
               0 14px 30px -14px rgba(22,34,31,.3);
  }
}
@media (prefers-reduced-motion:reduce){
  .gal-oval,.gal-oval::before{transition:none;}
  .gal-oval:hover{translate:none;}
}
/* measured per file: top | right | bottom | left */
.gal-oval.is-corporate::before{inset:11.11% 5.57% 7.27% 3.35%;}
.gal-oval.is-womens::before   {inset:13.75% 2.70% 7.67% 1.94%;}
.gal-oval.is-sport::before    {inset:12.69% 3.08% 6.61% 2.32%;}
.gal-oval.is-kids::before     {inset:11.24% 3.73% 6.87% 3.30%;}
.gal-oval.is-senior::before   {inset:6.74%  3.40% 7.01% 3.03%;}

/* Each PNG carries its own band of transparency above the oval, and that band
   scales with the picture — about 56px at the desktop width against 21px on a
   phone. Left alone it makes the gap under the note look twice as big on a
   laptop as on a phone, so the widest case is pulled back by hand and the
   optical gap lands near 36px everywhere, against 12px between title and note. */
@media (min-width:1001px){
  .gal-oval{margin-top:-20px;}
}
@media (max-width:1000px){
  .gal-oval{--ring:.8; max-width:644px;}
}
@media (max-width:620px){
  /* The oval is already close to the page's full width here, so the only room
     left is the section's own padding. It takes 17px of it on each side — far
     enough to grow, close enough that the artwork (which sits inboard of the
     file's transparent margin) still clears the screen edge. */
  .gal-oval{--ring:.6; max-width:none; width:calc(100% + 34px); margin-inline:-17px;}
}

.js-head .gal-intro > *,
.js-head .gal-grid > li{opacity:0;}

/* The bloom. A wash of the brand teal behind the header that rises and falls
   once — no brightness step on the content itself, which is what reads as a
   flash. It sits behind the words and the picture and is never interactive. */
.gal-intro{position:relative;}
.gal-intro > *{position:relative; z-index:1;}
.gal-intro::before{
  content:""; position:absolute; z-index:0; inset:-7% -4%;
  pointer-events:none; opacity:0;
  background:radial-gradient(58% 68% at 50% 60%,
             rgba(43,111,96,.17), rgba(43,111,96,0) 72%);
}
.js-head .gal-intro.is-in::before{animation:head-glow 1100ms ease-out both;}
@keyframes head-glow{
  0%{opacity:0;} 38%{opacity:1;} 100%{opacity:0;}
}

/* Title, note and picture arrive together — same duration, no delay between
   them — and hand over to their loops at the same moment. */
.js-head .gal-intro.is-in .gal-title,
.js-head .gal-intro.is-in .gal-lede{
  animation:head-rise 760ms cubic-bezier(.22,.61,.36,1) both,
            head-text-float 6s ease-in-out 760ms infinite;
}
/* Two animations on one element, handed over rather than overlapped: the
   entrance finishes exactly where the loop begins — on translateY(0), at
   scale(1) for the picture — so the loop takes over `transform` without a
   step, while the entrance's `both` fill goes on holding `opacity` at 1.
   Every part of the header is one element with one transform, so the PNG
   moves whole, logo and all, with nothing to tear into layers or flicker. */
.js-head .gal-intro.is-in .gal-oval{
  animation:head-art-in 760ms cubic-bezier(.22,.61,.36,1) both,
            head-art-float 6s ease-in-out 760ms infinite;
}
/* Paused, not stopped, so it picks up mid-phrase rather than resetting. The
   two values match the two animations on each child: the entrance keeps
   running whatever happens, and only the loop rests. Pausing both would
   freeze a header that scrolled away mid-entrance at opacity 0, and it would
   never appear. */
.js-head .gal-intro.is-in.is-paused > *{
  animation-play-state:running, paused;
}

/* A card lifts into its own cell. Opacity and transform only, so the cell is
   reserved from the first paint and nothing below it moves; and the scale only
   ever grows towards 100%, never past it, so a card cannot reach over its
   neighbours while it arrives. */
.js-head .gal-grid > li.is-in{
  animation:card-in 350ms cubic-bezier(.22,.61,.36,1) both;
}
/* a section the reader never saw is let through without its entrance, so it
   cannot hold up the one they are actually looking at */
.js-head .gal-grid > li.is-instant{animation-duration:1ms !important;}
@keyframes card-in{
  from{opacity:0; transform:translateY(12px) scale(.96);}
  to  {opacity:1; transform:none;}
}

@keyframes head-rise{
  from{opacity:0; transform:translateY(10px);}
  to  {opacity:1; transform:translateY(0);}
}
@keyframes head-art-in{
  from{opacity:0; transform:scale(.97);}
  to  {opacity:1; transform:scale(1);}
}
@keyframes head-art-float{
  0%,100%{transform:translateY(0);}
  50%    {transform:translateY(-3.5px);}
}
/* the words breathe with the picture, at well under half its travel, so the
   line stays where the eye left it and never reads as a wobble */
@keyframes head-text-float{
  0%,100%{transform:translateY(0);}
  50%    {transform:translateY(-1.5px);}
}

@media (prefers-reduced-motion:reduce){
  /* everything in place, straight away, with nothing moving and no bloom */
  .js-head .gal-intro > *,
  .js-head .gal-intro.is-in > *,
  .js-head .gal-grid > li,
  .js-head .gal-grid > li.is-in{
    opacity:1 !important; transform:none !important;
    animation:none !important; transition:none !important;
  }
  .gal-intro::before,
  .js-head .gal-intro.is-in::before{animation:none !important; opacity:0 !important;}
}

.gal-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-gap);
  list-style:none; margin:0; padding:0;
}
@media (max-width:1000px){ .gal-grid{grid-template-columns:repeat(2,1fr);} }
/* one per row on a phone: these are articles to read, not decoration */
@media (max-width:620px){ .gal-grid{grid-template-columns:1fr;} }

/* Every tile is the same box so the rows stay level. The artwork is fitted,
   not cropped — one image is a different shape from the other eleven and
   cropping it would cut into the article. The mat is the page colour, which
   is within a shade of the border the artwork already carries. */
/* Cards take the height their picture needs. The grid stretches every card in
   a row to the tallest of them, so a row of wide artwork is a shorter row
   rather than a tall card with empty space in it. Each card carries its own
   picture's frame colour inline, so where a card is taller than its picture the
   difference is invisible. */
.gal-item{
  display:block; width:100%; height:100%; margin:0; padding:0;
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--radius-m);
  background:var(--bg); cursor:zoom-in; font:inherit; color:inherit;
  box-shadow:var(--shadow);
}
.gal-item img{
  width:100%; height:100%; object-fit:contain; object-position:center top;
  display:block; transition:transform .3s ease;
}

/* The zoom affordance exists only where there is a real pointer. On a phone
   there is no hover state to leave, so the tile stays clean and a tap opens it. */
.gal-zoom{
  position:absolute; inset:0; opacity:0;
  background:rgba(22,34,31,.26);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .28s ease;
}
.gal-zoom::before,
.gal-zoom::after{
  content:""; position:absolute; background:#fff; border-radius:2px;
  box-shadow:0 1px 6px rgba(22,34,31,.35);
}
.gal-zoom::before{width:34px; height:3.5px;}
.gal-zoom::after{width:3.5px; height:34px;}
@media (hover:hover) and (pointer:fine){
  .gal-item:hover img,
  .gal-item:focus-visible img{transform:scale(1.04);}
  .gal-item:hover .gal-zoom,
  .gal-item:focus-visible .gal-zoom{opacity:1;}
}
/* keyboard users get the same cue, pointer or not */
.gal-item:focus-visible .gal-zoom{opacity:1;}
@media (prefers-reduced-motion:reduce){
  .gal-item img{transition:none;}
  .gal-item:hover img{transform:none;}
}

/* ---------- lightbox ---------- */
.lightbox[hidden]{display:none;}
/* Three columns: an arrow, the picture, an arrow. The side columns keep their
   width whether or not an arrow is in them, so the picture stays centred at
   the first and last article instead of sliding across. */
.lightbox{
  --lb-nav:clamp(52px, 8vw, 88px);
  position:fixed; inset:0; z-index:200;
  display:grid; align-items:center; justify-items:center;
  grid-template-columns:var(--lb-nav) minmax(0,1fr) var(--lb-nav);
  /* the row has to be bounded, or the picture's max-height has nothing to
     resolve against and a tall article runs off the bottom of the screen */
  grid-template-rows:minmax(0,1fr);
  grid-template-areas:"prev stage next";
  gap:clamp(4px, 1.5vw, 18px);
  padding:clamp(16px, 4vw, 48px);
  background:rgba(11,18,16,.86);
  animation:lb-in .22s ease;
}
@keyframes lb-in{from{opacity:0;} to{opacity:1;}}
@media (prefers-reduced-motion:reduce){ .lightbox{animation:none;} }
.lb-stage{
  grid-area:stage; margin:0; min-width:0; min-height:0;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}
.lightbox img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; display:block;
  border-radius:var(--radius-m); background:var(--bg);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6);
  transition:opacity 150ms ease;
}
/* the brief cross-fade between articles */
.lightbox img.is-swapping{opacity:0;}
@media (prefers-reduced-motion:reduce){
  .lightbox img{transition:none;}
  .lightbox img.is-swapping{opacity:1;}
}

/* The arrows. Same white disc as the close button, so the three controls read
   as one set, and the same 46px target with a larger invisible reach around
   it — the whole column is clickable, which matters most on a phone. */
.lb-nav{
  grid-area:prev; position:relative;
  width:100%; height:100%; max-height:260px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; padding:0; cursor:pointer; color:inherit;
}
.lb-nav.lb-next{grid-area:next;}
.lb-nav[hidden]{display:none;}
.lb-nav::before{
  content:""; position:absolute; width:46px; height:46px; border-radius:50%;
  background:var(--surface); box-shadow:0 2px 10px rgba(0,0,0,.4);
  transition:background .15s ease, transform .15s ease;
}
.lb-nav svg{position:relative; color:var(--ink);}
.lb-nav:hover::before{background:#fff; transform:scale(1.07);}
/* Two-tone, and deliberately so. A teal ring alone manages 5.9:1 against the
   white disc but only 2.2:1 against the darkened page behind it, which is
   under the 3:1 a focus indicator needs. The white halo outside the teal gives
   the outer edge 13:1 against that backdrop, so whichever side the eye lands
   on, the ring is clearly there. */
.lb-nav:focus-visible{outline:none;}
.lb-nav:focus-visible::before{
  background:#fff;
  outline:3px solid var(--teal); outline-offset:2px;
  box-shadow:0 0 0 8px rgba(255,255,255,.95), 0 2px 10px rgba(0,0,0,.4);
}
@media (prefers-reduced-motion:reduce){
  .lb-nav::before{transition:none;}
  .lb-nav:hover::before{transform:none;}
}
.lb-close{
  position:absolute; top:clamp(12px, 2.5vw, 26px); right:clamp(12px, 2.5vw, 26px);
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); color:var(--ink); border:none; cursor:pointer;
  font-size:1.5rem; line-height:1; font-family:var(--font-body);
  box-shadow:0 2px 10px rgba(0,0,0,.4);
  transition:background .15s ease;
}
.lb-close:hover{background:#fff;}
.lb-close:focus-visible{
  outline:3px solid var(--teal); outline-offset:2px;
  box-shadow:0 0 0 8px rgba(255,255,255,.95), 0 2px 10px rgba(0,0,0,.4);
}
/* On a narrow screen there is no room beside the picture, so the two arrows
   drop underneath it, side by side and clear of the artwork. */
@media (max-width:760px){
  .lightbox{
    grid-template-columns:1fr 1fr;
    grid-template-rows:minmax(0,1fr) auto;
    grid-template-areas:"stage stage" "prev next";
    gap:clamp(10px, 3vw, 20px);
  }
  .lb-nav{width:auto; height:auto; padding:10px 22px;}
  .lb-nav.lb-prev{justify-self:end;}
  .lb-nav.lb-next{justify-self:start;}
  /* the row keeps its height even when only one arrow is in it, so the
     picture does not jump as the reader reaches either end */
  .lightbox{--lb-row:66px;}
  .lightbox{grid-template-rows:minmax(0,1fr) var(--lb-row);}
}

/* the page behind must not scroll while the lightbox is open */
body.lb-open{overflow:hidden;}


/* ===========================================================
   FEATURED TIMELINES — sequential scene emphasis
   The two featured visuals are single flat images, so their scenes are not
   separate elements. Each scene is overlaid by a crop of the very same file,
   positioned exactly over it and invisible at rest; the sequence lifts them
   one at a time. Every crop is bounded by clear panel colour on all four
   sides and grows from its base, so nothing shows an edge and the timeline
   rule beneath is never disturbed. Transform only — no layout shift.
   Added 4 Oct 2026.
   =========================================================== */
.story-stage{position:relative; display:block;}
.story-stage > img{position:relative; z-index:0;}

/* The scene is a window onto its own part of the picture; the picture itself
   lives in the ::before and is what grows. The window clips, so a scene can
   never paint outside its own rectangle — without that, scaling pushed the
   enlarged crop over its neighbours and a fragment of the figure next door
   popped into view. */
.story-scene{
  position:absolute; z-index:1; opacity:0; pointer-events:none; overflow:hidden;
  left:calc(var(--l) * 100%);  top:calc(var(--t) * 100%);
  width:calc(var(--w) * 100%); height:calc(var(--h) * 100%);
}
.story-scene::before{
  content:""; position:absolute; inset:0;
  background-image:var(--src);
  background-size:calc(100% / var(--w)) calc(100% / var(--h));
  background-position:calc(var(--px) * 100%) calc(var(--py) * 100%);
  background-repeat:no-repeat;
  transform-origin:50% 100%;
}
/* The active figure sits above its neighbours while it grows, so the few
   pixels it does gain never slide under the one beside it. */
.story-scene.pop{opacity:1; z-index:3;}
.story-scene.pop::before{animation:scene-pop 640ms cubic-bezier(.4,0,.2,1) both;}
/* Scale only, and a small one: 3%, where this started at 5.5%. A brightness
   lift would also lighten the flat panel inside the crop, which draws the
   crop's rectangle on screen; the growth alone carries the emphasis and leaves
   no edge. Every box is padded by (scale - 1) of its own size — the full
   amount above, since the figure grows upward from its feet, and half of it on
   each side — so nothing, heads included, is ever clipped at the peak. */
@keyframes scene-pop{
  0%  {transform:scale(1);}
  45% {transform:scale(1.03);}
  100%{transform:scale(1);}
}

/* Two figures on the movement timeline genuinely touch: the crawling baby's
   toes pass under the womb's sac, so any rectangle around one holds part of
   the other. The sac is a circle, so a radial mask separates them cleanly —
   the womb keeps only what is inside that circle, the baby keeps only what is
   outside it. The mask rides on the same element as the growth, so it tracks
   the figure through the pop. */
.story-scene.clip-in::before{
  -webkit-mask-image:radial-gradient(ellipse var(--cr-x) var(--cr-y) at var(--c-x) var(--c-y),
                     #000 99.4%, transparent 100%);
          mask-image:radial-gradient(ellipse var(--cr-x) var(--cr-y) at var(--c-x) var(--c-y),
                     #000 99.4%, transparent 100%);
}
.story-scene.clip-out::before{
  -webkit-mask-image:radial-gradient(ellipse var(--cr-x) var(--cr-y) at var(--c-x) var(--c-y),
                     transparent 99.4%, #000 100%);
          mask-image:radial-gradient(ellipse var(--cr-x) var(--cr-y) at var(--c-x) var(--c-y),
                     transparent 99.4%, #000 100%);
}
/* anyone who asks for less motion simply gets the finished picture */
@media (prefers-reduced-motion:reduce){
  .story-scene, .story-scene.pop{opacity:0 !important;}
  .story-scene::before, .story-scene.pop::before{animation:none !important;}
}