/* Sanitise Services. Direction 1, "Signed off". See DIRECTION.md. */

@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/InstrumentSerif-Regular.woff2) format("woff2"),url(/assets/fonts/InstrumentSerif-Regular.ttf) format("truetype")}
@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/Manrope-Regular.woff2) format("woff2"),url(/assets/fonts/Manrope-Regular.ttf) format("truetype")}
@font-face{font-family:Manrope;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/Manrope-Medium.woff2) format("woff2"),url(/assets/fonts/Manrope-Medium.ttf) format("truetype")}
@font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/Manrope-SemiBold.woff2) format("woff2"),url(/assets/fonts/Manrope-SemiBold.ttf) format("truetype")}
@font-face{font-family:Manrope;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/Manrope-Bold.woff2) format("woff2"),url(/assets/fonts/Manrope-Bold.ttf) format("truetype")}

:root{
  --paper:#FFFFFF;
  --blush:#FBEFF3;
  --pink:#E23D7B;        /* stroke, rules, display type 24px and up only */
  --rose:#A81E56;        /* small pink text, links, button ground */
  --ink:#1B1418;
  --muted:#6B5C63;
  --line:#EAD9E0;
  --line-strong:#8A7A82; /* interactive borders, 4:1 on paper */
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:Manrope,"Segoe UI",Arial,sans-serif;
  --gutter:clamp(20px,5vw,72px);
  --max:1280px;
  --ease:cubic-bezier(.32,.72,0,1);
  --t-h1:clamp(2.75rem,7.2vw,6.4rem);
  --t-h2:clamp(2rem,4.2vw,3.5rem);
  --t-h3:1.5rem;
  --t-lead:clamp(1.0625rem,1.35vw,1.25rem);
  --t-body:1.0625rem;
  --t-small:.9375rem;
  --t-label:.71875rem;
  --hdr:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--t-body);line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:var(--rose);text-decoration-thickness:1px;text-underline-offset:.16em}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:2px}
h1,h2,h3,h4{margin:0;font-weight:400}
h1,h2{font-family:var(--serif);letter-spacing:-.012em;text-wrap:balance}
h1{font-size:var(--t-h1);line-height:.98;max-width:12em}
h2{font-size:var(--t-h2);line-height:1.04;max-width:14em}
h3{font-family:var(--sans);font-weight:600;font-size:var(--t-h3);line-height:1.2;letter-spacing:-.01em}
p{margin:0;text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
em{font-style:italic}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font-size:var(--t-label);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--rose)}
.lead{font-size:var(--t-lead);line-height:1.5;max-width:34em;color:var(--ink)}
.note{font-size:var(--t-small);line-height:1.6;color:var(--muted);max-width:44em}
.skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;font-weight:600;border-radius:4px}
.skip:focus{top:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Buttons */
.btn,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:6px;font-family:var(--sans);font-weight:600;font-size:1rem;letter-spacing:.005em;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease),border-color .35s var(--ease)}
.btn{background:var(--rose);color:#fff}
.btn:hover{background:var(--ink);color:#fff}
.btn:active,.btn-ghost:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
/* Clinic login. Owner's instruction, 14 September 2026: the portal goes on the front page as a
   button, bigger than the other two. Size carries the hierarchy, so the walkthrough button keeps
   its ground and only steps down a rank. */
.btn-portal{min-height:62px;min-width:216px;padding:0 34px;margin-right:16px;font-size:1.0625rem}

/* Header */
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--hdr);display:flex;align-items:center;gap:32px;padding-inline:var(--gutter);background:rgba(255,255,255,0);transition:background-color .5s var(--ease),box-shadow .5s var(--ease)}
.hdr.scrolled,.hdr.open{background:rgba(255,255,255,.97);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--line)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand .mark{width:34px;height:34px;flex:none}
.mark .drop{fill:none;stroke:var(--pink);stroke-width:6;stroke-linejoin:round}
.mark .tick{fill:none;stroke:var(--pink);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:var(--serif);font-size:1.75rem;letter-spacing:-.01em}
.brand-sub{font-size:.5625rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--rose);margin-top:4px}
.nav{display:flex;gap:28px;margin-left:auto}
.nav a{font-size:.9375rem;font-weight:500;color:var(--ink);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--pink)}
.hdr-call{font-weight:600;font-size:.9375rem;color:var(--ink);text-decoration:none;white-space:nowrap;padding:10px 0}
.hdr-call:hover{color:var(--rose)}
/* Outlined, not solid: a utility control must not be the loudest object on an inner page, and the
   hero button has to stay the bigger of the two logins where both are on screen. */
.hdr-portal{display:inline-flex;align-items:center;min-height:44px;margin-left:12px;padding:0 20px;border-radius:6px;background:transparent;color:var(--rose);border:1px solid var(--rose);font-weight:600;font-size:.9375rem;text-decoration:none;white-space:nowrap;transition:background-color .3s var(--ease),color .3s var(--ease)}
.hdr-portal:hover{background:var(--rose);color:#fff}
.hdr-portal:active{transform:translateY(1px)}
.burger{display:none;width:44px;height:44px;margin-right:-10px;background:none;border:0;cursor:pointer;position:relative}
.burger span{position:absolute;left:11px;width:22px;height:2px;background:var(--ink);transition:transform .45s var(--ease),top .45s var(--ease)}
.burger span:first-child{top:17px}
.burger span:last-child{top:25px}
.burger[aria-expanded="true"] span:first-child{top:21px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{top:21px;transform:rotate(-45deg)}
.mnav{position:fixed;inset:var(--hdr) 0 0 0;z-index:49;background:var(--paper);padding:32px var(--gutter);display:flex;flex-direction:column;gap:4px;overflow:auto}
.mnav[hidden]{display:none}
.mnav a{font-family:var(--serif);font-size:2.25rem;color:var(--ink);text-decoration:none;padding:10px 0;border-bottom:1px solid var(--line);opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.mnav.in a{opacity:1;transform:none}
.mnav a:nth-child(1){transition-delay:.05s}.mnav a:nth-child(2){transition-delay:.1s}.mnav a:nth-child(3){transition-delay:.15s}.mnav a:nth-child(4){transition-delay:.2s}.mnav a:nth-child(5){transition-delay:.25s}.mnav a:nth-child(6){transition-delay:.3s}.mnav a:nth-child(7){transition-delay:.35s}.mnav a:nth-child(8){transition-delay:.4s}.mnav a:nth-child(9){transition-delay:.45s}.mnav a:nth-child(10){transition-delay:.5s}.mnav a:nth-child(11){transition-delay:.55s}.mnav a:nth-child(12){transition-delay:.6s}.mnav a:nth-child(13){transition-delay:.65s}
.mnav .mnav-call{margin-top:auto;font-family:var(--sans);font-size:1.125rem;font-weight:600;border:0;color:var(--rose)}
body.locked{overflow:hidden}
/* First item in the menu and a real button, not the thirteenth serif link. Buried at the bottom it
   was 383px below the fold, which defeats the point of putting the login on the phone at all. */
.mnav .mnav-portal{display:flex;align-items:center;justify-content:center;min-height:56px;margin-bottom:22px;padding:0 24px;border:0;border-radius:6px;background:var(--rose);color:#fff;font-family:var(--sans);font-size:1rem;font-weight:600}
@media (max-width:919px){.nav,.hdr-call,.hdr-portal{display:none}.burger{display:block;margin-left:auto}}
/* The login button needs room next to the phone number. Tighten the nav before dropping either.
   From 1080 up the header fits at its full sizes. */
@media (min-width:920px) and (max-width:1079px){.hdr{gap:20px}.nav{gap:20px}.nav a{font-size:.875rem}.hdr-call{font-size:.875rem}.hdr-portal{margin-left:8px;font-size:.875rem;padding:0 16px}}

/* Hero: paper on the left, the room on the right, one stroke across both */
.hero-runway{height:200svh;position:relative}
.hero{position:sticky;top:0;height:100svh;min-height:600px;display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);overflow:hidden;background:var(--paper)}
.hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--hdr) + 24px) 40px 22vh var(--gutter)}
.hero-copy .eyebrow{margin-bottom:22px}
.hero-sub{margin-top:22px;font-size:var(--t-lead);line-height:1.5;max-width:26em;color:var(--ink)}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:30px}
.hero-media{position:relative;height:100%;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:38% 50%;transform:scale(1.06);transform-origin:60% 60%;will-change:transform}
.hero-stroke{position:absolute;left:0;bottom:8.5vh;width:100%;height:13vh;z-index:3;pointer-events:none;overflow:visible}
.hero-stroke path{fill:none;stroke:var(--pink);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.no-js .hero-stroke,.reduced .hero-stroke{height:auto;aspect-ratio:1000/200;max-height:14vh}
.hero-signoff{position:absolute;right:var(--gutter);bottom:calc(8.5vh + 13vh + 10px);z-index:3;font-size:var(--t-label);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--rose);opacity:0;transform:translateY(6px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.hero-signoff.in{opacity:1;transform:none}
.hero-signoff span{color:var(--ink)}
.w{display:inline-block}
@media (max-width:719px){
  .hero-runway{height:180svh}
  .hero{grid-template-columns:1fr;grid-template-rows:minmax(0,52fr) minmax(0,48fr)}
  .hero-media{order:1;padding-top:var(--hdr);background:var(--paper)}
  .hero-media img{object-position:50% 60%}
  .hero-copy{order:2;padding:22px var(--gutter) 88px;justify-content:flex-start}
  .hero-copy .eyebrow{margin-bottom:14px}
  .hero-sub{margin-top:14px;font-size:1rem}
  .hero-cta{margin-top:20px}
  .hero-stroke{bottom:22px;height:64px}
  .hero-signoff{bottom:94px}
}
@media (max-width:719px) and (max-height:700px){.hero-copy{padding-bottom:70px}.hero-sub{display:none}}

/* No JS or reduced motion: no pin, stroke fully drawn, everything visible */
.no-js .hero-runway,.reduced .hero-runway{height:auto}
.no-js .hero,.reduced .hero{position:relative}
.no-js .hero-signoff,.reduced .hero-signoff{opacity:1;transform:none}
.no-js .hero-media img,.reduced .hero-media img{transform:none}

/* Sections */
.sec{padding-block:clamp(72px,10vw,136px)}
.sec.blush{background:var(--blush)}
.sec-head{display:grid;gap:14px;margin-bottom:clamp(36px,5vw,64px)}
.sec-head .lead{margin-top:6px}

/* Tagline reveal */
.tagline{padding-block:clamp(88px,12vw,160px)}
.tag-line{font-family:var(--serif);font-size:clamp(2.4rem,6vw,5.4rem);line-height:1.02;letter-spacing:-.012em;max-width:12em;text-wrap:balance}
.tag-line .tw{display:inline-block;color:var(--ink);opacity:.22;transition:opacity .7s var(--ease)}
.tag-line .tw.on{opacity:1}
.no-js .tag-line .tw,.reduced .tag-line .tw{opacity:1}
.tag-note{margin-top:32px;max-width:36em;font-size:var(--t-lead);line-height:1.5;color:var(--muted)}

/* Ruled index */
.idx{border-top:1px solid var(--line)}
.idx-row{display:grid;grid-template-columns:minmax(150px,280px) 1fr;gap:24px 40px;padding:30px 0;border-bottom:1px solid var(--line)}
.idx-key :is(h2,h3){font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.01em;line-height:1.05}
/* Card and who-block headings are h2 on pages where they sit straight under the h1 (outline
   h1 > h2, no skipped level) and h3 elsewhere. Both look the same; the base h2 rule's
   max-width and balanced wrapping are switched off so nothing moves. */
.idx-key h2,.who h2{max-width:none;text-wrap:wrap}
.idx-key p{margin-top:6px;font-size:var(--t-small);color:var(--muted)}
.idx-key .eyebrow{display:block;margin-bottom:8px}
.idx-list li{position:relative;padding:8px 0 8px 22px;border-top:1px dotted var(--line);line-height:1.5}
.idx-list li:first-child{border-top:0;padding-top:0}
.idx-list li::before{content:"";position:absolute;left:0;top:calc(.75em + 8px);width:10px;height:2px;background:var(--pink);border-radius:2px}
.idx-list li:first-child::before{top:.75em}
.idx-body{max-width:56em;line-height:1.6}
.idx-body p + p{margin-top:10px}
.idx-body .tag{display:inline-block;font-size:var(--t-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--rose);margin-bottom:8px}
@media (max-width:719px){.idx-row{grid-template-columns:1fr;gap:12px;padding:24px 0}}

/* Two column photo + copy */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.photo{margin:0}
.split .photo{position:sticky;top:calc(var(--hdr) + 24px)}
.photo img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--blush)}
.photo.wide img{aspect-ratio:3/2}
.photo.banner img{aspect-ratio:21/9}
@media (max-width:640px){.photo.banner img{aspect-ratio:4/3}}
.photo figcaption{margin-top:12px;font-size:.8125rem;color:var(--muted);line-height:1.5}
@media (max-width:919px){.split{grid-template-columns:1fr}.split .photo{position:static;max-width:640px}}

/* Products */
.prod .idx-key :is(h2,h3){font-family:var(--sans);font-weight:600;font-size:1.25rem;letter-spacing:-.005em}
.prod .artg{display:block;margin-top:12px;font-size:.8125rem;color:var(--rose);font-weight:500}
.prod .idx-body{max-width:48em;font-size:var(--t-small);line-height:1.62}
.prod .idx-body b{font-weight:600;color:var(--ink)}

/* Evidence panel */
.evid .quote{margin-top:40px;padding:26px 28px;border-left:3px solid var(--pink);background:var(--paper);max-width:52em}
.evid .quote p{font-family:var(--serif);font-size:1.5rem;line-height:1.25;letter-spacing:-.01em}
.evid .quote cite{display:block;margin-top:12px;font-style:normal;font-size:var(--t-small);color:var(--muted)}

/* Groups */
.groups .idx-row{grid-template-columns:minmax(150px,320px) 1fr}
.groups .idx-key :is(h2,h3){font-family:var(--sans);font-weight:600;font-size:1.25rem}
.groups .n{display:block;font-family:var(--serif);font-size:1.1rem;color:var(--pink);margin-bottom:6px}
@media (max-width:719px){.groups .idx-row{grid-template-columns:1fr}}

/* Boundaries */
.bounds ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;border-top:1px solid var(--line)}
.bounds li{padding:22px 0;border-bottom:1px solid var(--line);line-height:1.55}
.bounds li b{display:block;font-weight:600;margin-bottom:4px}
@media (max-width:719px){.bounds ul{grid-template-columns:1fr}}

/* Walkthrough */
.walk{background:var(--ink);color:#fff}
.walk .eyebrow{color:#F6C7D8}
.walk h2{color:#fff}
.walk .lead{color:rgba(255,255,255,.82)}
.walk .grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,120px);align-items:start}
.walk .phone{display:inline-block;margin-top:34px;font-family:var(--serif);font-size:clamp(2.4rem,5vw,4rem);color:#fff;text-decoration:none;letter-spacing:-.01em;line-height:1}
.walk .phone:hover{color:#F6C7D8}
.walk .phone-note{margin-top:14px;color:rgba(255,255,255,.7);font-size:var(--t-small)}
.walk :focus-visible{outline-color:#fff}
/* Scoped to .walk (the only place these dark-mode fields are used: the homepage
   walkthrough form and /requests) so the portal's own .field/.form classes, styled
   separately in portal.css for a light background, never depend on stylesheet order
   to win the cascade against these. */
.walk .form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.walk .form .full{grid-column:1/-1}
.walk .field label{display:block;font-size:var(--t-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#F6C7D8;margin-bottom:8px}
.walk .field input,.walk .field select,.walk .field textarea{width:100%;min-height:50px;padding:12px 14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.28);border-radius:6px;color:#fff;font:inherit;font-size:1rem;transition:border-color .3s var(--ease),background-color .3s var(--ease)}
.walk .field textarea{min-height:120px;resize:vertical}
.walk .field input:focus,.walk .field select:focus,.walk .field textarea:focus{border-color:#fff;background:rgba(255,255,255,.1)}
.walk .field input:focus-visible,.walk .field select:focus-visible,.walk .field textarea:focus-visible{outline:2px solid #fff;outline-offset:2px}
.walk .field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23F6C7D8' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.walk .field select option{color:var(--ink)}
.walk .field .err{display:none;margin-top:6px;font-size:.8125rem;color:#FFB7CF}
.walk .field.bad input,.walk .field.bad select,.walk .field.bad textarea{border-color:#FF8AB4}
.walk .field.bad .err{display:block}
.walk .form .btn{background:#fff;color:var(--ink);min-width:220px}
.walk .form .btn:hover{background:var(--pink);color:#fff}
.walk .form-status{grid-column:1/-1;font-size:var(--t-small);color:rgba(255,255,255,.8);min-height:1.5em}
.walk .form-status.ok{color:#fff}
.walk .form-status.fail{color:#FFB7CF}
@media (max-width:919px){.walk .grid{grid-template-columns:1fr}}
@media (max-width:560px){.walk .form{grid-template-columns:1fr}}

/* Footer */
.foot{padding:56px 0 40px;border-top:1px solid var(--line);font-size:var(--t-small);color:var(--muted)}
.foot .row{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:flex-start;justify-content:space-between}
.foot .brand .brand-name{font-size:1.5rem}
.foot nav{display:flex;flex-wrap:wrap;gap:18px}
.foot nav a{color:var(--ink);text-decoration:none;font-weight:500}
.foot nav a:hover{color:var(--rose)}
.foot .legal{margin-top:34px;max-width:70em;line-height:1.6}
.foot .legal p + p{margin-top:8px}

/* Reveal on scroll */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.no-js .rv,.reduced .rv{opacity:1;transform:none}

/* Inner pages */
.page{padding-top:calc(var(--hdr) + clamp(40px,7vw,96px))}
.page .sec-head{margin-bottom:clamp(28px,4vw,48px)}
.prose{max-width:66ch;line-height:1.65}
.prose h2{font-size:clamp(1.6rem,2.8vw,2.2rem);margin:44px 0 12px}
.prose h3{margin:28px 0 8px;font-size:1.125rem}
.prose p + p{margin-top:14px}
.prose ul{padding-left:0}
.prose li{position:relative;padding:6px 0 6px 20px}
.prose li::before{content:"";position:absolute;left:0;top:calc(.75em + 6px);width:10px;height:2px;background:var(--pink)}
.sched{table-layout:fixed;}
.sched td:nth-child(1),.sched th:nth-child(1){width:24%}
.sched td:nth-child(3),.sched th:nth-child(3){width:18%}
.sched{width:100%;border-collapse:collapse;font-size:var(--t-small);margin-top:12px}
.sched th,.sched td{text-align:left;vertical-align:top;padding:12px 14px 12px 0;border-bottom:1px solid var(--line);line-height:1.5}
.sched th{font-size:var(--t-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--rose);border-bottom-color:var(--line-strong)}
.sched td:first-child{font-weight:600;width:24%}
.sched td:nth-child(3){white-space:nowrap;color:var(--muted)}
.sched-wrap{overflow-x:auto}
.who{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:24px}
.who div{padding:24px;border:1px solid var(--line);border-radius:6px}
.who :is(h2,h3){font-family:var(--serif);font-weight:400;font-size:1.6rem;margin-bottom:10px}
@media (max-width:719px){.who{grid-template-columns:1fr}}
.notfound{min-height:100svh;display:grid;place-items:center;text-align:center;padding:var(--gutter)}
.notfound h1{font-size:clamp(3rem,10vw,7rem)}
.notfound p{margin-top:16px;color:var(--muted)}
@media print{.hdr,.mnav,.skip,.walk,.foot nav,.btn,.btn-ghost{display:none!important}.page{padding-top:0}body{font-size:11pt}.sched th,.sched td{padding:6px 8px 6px 0}}

/* Review pass 1: narrower key column inside the split, tighter mobile hero, quicker reveal */
.split .idx-row{grid-template-columns:minmax(120px,176px) 1fr;gap:20px 32px}
.split .idx-key :is(h2,h3){font-size:clamp(1.4rem,2vw,1.8rem)}
.prod .split .idx-key :is(h2,h3),.groups .split .idx-key :is(h2,h3){font-size:1.125rem}
.split .idx-body,.prod .split .idx-body{max-width:none}
.groups .idx-row{grid-template-columns:minmax(120px,200px) 1fr}
.rv{transition-duration:.6s}
@media (max-width:719px){
  .split .idx-row,.groups .idx-row{grid-template-columns:1fr}
  .hero{grid-template-rows:minmax(0,42fr) minmax(0,58fr)}
  .hero-h{font-size:clamp(2.35rem,10.5vw,3.2rem)}
  .hero-copy{padding:16px var(--gutter) 104px}
  .hero-copy .eyebrow{font-size:.65rem;letter-spacing:.14em;margin-bottom:12px}
  .hero-sub{font-size:.9375rem;margin-top:12px}
  .hero-cta{margin-top:18px;gap:8px 20px;align-items:center}
  .hero-cta .btn-ghost{border:0;padding:0;min-height:44px;color:var(--rose);text-decoration:underline;text-underline-offset:.22em}
  .hero-stroke{bottom:30px;height:60px}
  .hero-signoff{bottom:8px;right:var(--gutter);font-size:.625rem;letter-spacing:.14em}
}
@media (max-width:719px) and (max-height:700px){.hero-sub{display:none}.hero-copy{padding-bottom:96px}}

/* Review pass 2: 44px targets on the header and footer links */
.nav a{padding:14px 0}
.foot nav a{display:inline-block;padding:10px 0}
.foot .legal a{display:inline-block;padding:8px 0;margin:-8px 0}

/* Round 2: FAQ rows, packages */
.faq .idx-row{grid-template-columns:minmax(200px,420px) 1fr}
.faq .idx-key :is(h2,h3){font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.15}
.faq .idx-body{max-width:52em}
.pkg .idx-row{grid-template-columns:minmax(200px,360px) 1fr}
.pkg .idx-body{max-width:52em}
@media (max-width:719px){.faq .idx-row,.pkg .idx-row{grid-template-columns:1fr}}

/* Round 3: services index and guide page */
.svc .idx-row{grid-template-columns:minmax(200px,340px) 1fr}
.svc .idx-key :is(h2,h3){font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.08}
.svc .n{display:block;font-family:var(--serif);font-size:1.1rem;color:var(--pink);margin-bottom:6px}
.svc .idx-body{max-width:54em}
.svc .idx-body p + p{margin-top:10px;color:var(--muted)}
.prose .sched td:nth-child(3){white-space:normal;min-width:11em}
.prose .faq .idx-row{grid-template-columns:minmax(200px,380px) 1fr}
.prose .faq .idx-key :is(h2,h3){margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.15}
.prose .faq .idx-body p{margin:0}
.prose a[rel="noopener"]{word-break:break-word}
@media (max-width:719px){.svc .idx-row,.prose .faq .idx-row{grid-template-columns:1fr}.prose .sched td:nth-child(3){min-width:0}}

/* Round 4: design-critic pass (review/critic/REPORT.md) */
@media (min-width:720px) and (max-height:860px){.hero-h{font-size:clamp(2.75rem,4.8vw,4.25rem)}.hero-sub{font-size:1.0625rem;margin-top:16px}.hero-copy{padding-bottom:20vh}.hero-copy .eyebrow{margin-bottom:14px}.hero-cta{margin-top:22px}}
@media (min-width:720px) and (max-height:740px){.hero-h{font-size:clamp(2.5rem,4.2vw,3.6rem)}.hero-sub{display:none}}
@media (max-width:719px){
  .sched thead{display:none}
  .sched tr,.sched td{display:block;width:auto;border:0;padding:2px 0}
  .sched tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .sched td:first-child{width:auto;font-weight:600}
  .sched td:nth-child(3){white-space:normal;min-width:0;font-size:var(--t-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--rose);margin-top:4px}
}
.walk .field input,.walk .field select,.walk .field textarea{border-color:rgba(255,255,255,.45)}
.groups .n,.svc .n{color:var(--rose)}
.walk .form .btn:hover{background:var(--rose);color:#fff}
.brand-sub{font-size:.6875rem;letter-spacing:.13em}
.btn,.btn-ghost{transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .12s ease-out}
.foot .legal{max-width:46em}
.prose > p,.prose > ul,.prose > h2,.prose > h3{max-width:66ch}
html:not(.no-js):not(.reduced) .hero-stroke path,html:not(.no-js):not(.reduced) .hdr .mark .tick{stroke-dasharray:1;stroke-dashoffset:1}
.hero-media img{transform:none;will-change:auto}
.tagline{padding-block:clamp(88px,12vw,160px) clamp(56px,7vw,96px)}
.who div{border:0;border-top:1px solid var(--line);border-radius:0;padding:24px 0}
@media (max-width:719px){.hero-signoff{font-size:var(--t-label)}}

/* Round 6: the film hero. Full bleed, plays once, holds on a still, copy over the lower frame. */
.hero.film{position:relative;display:block;height:100svh;min-height:560px;max-height:1100px;overflow:hidden;background:#EAE3DD;grid-template-columns:none}
.film .hero-media{position:absolute;inset:0;height:auto;overflow:hidden}
.film .hero-video,.film .hero-hold{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 50%;transform:none;will-change:auto}
.film .hero-video{z-index:1;opacity:0;transition:opacity .5s var(--ease)}
.film.playing .hero-video{opacity:1}
.film .hero-hold{z-index:2;opacity:1;transition:opacity .9s var(--ease)}
.film.playing:not(.held) .hero-hold{opacity:0}
.film.held .hero-hold{opacity:1}
/* The hold is the film's LAST frame, so painting it first opened the page on the ending: the
   finished room, dissolving back to four women by the utes, then 16 s of film to arrive where
   it started. The punchline before the setup. Where the film will actually run - script present,
   motion not reduced - the video layer takes the first paint instead, and its poster IS the
   film's first frame, so there is nothing to load before the right picture is on screen.
   Everywhere else the hold keeps the first paint, which is the no-script and reduced-motion
   floor. The restore lives inside this block at higher specificity than the rule above it, so a
   video that errors still lands on the room rather than on a blank hero. */
@media (prefers-reduced-motion:no-preference){
  html:not(.no-js) .film .hero-video{opacity:1}
  html:not(.no-js) .film .hero-hold{opacity:0}
  html:not(.no-js) .film.held .hero-hold{opacity:1}
}
/* THE STOPS ARE IN PIXELS ON PURPOSE. Do not put them back to percentages.
   The copy block is bottom-anchored and its height barely moves: eyebrow 18 + 16 + h1 157 + 18
   + sub 60 + 26 + cta 62 = 357px, plus the padding. So the eyebrow always sits 397-437px above
   the bottom of the hero, in pixels. A percentage gradient puts its dark band at a fraction of
   the WINDOW, so on a tall window 437px is deep in the dark and on a 13 inch laptop it is out in
   the clear. That is how this scrim was rebuilt on 21 September, measured at 1440x900, and still
   left the eyebrow at 3.76:1 on a 1440x789 MacBook - a fail, which is what the rebuild was for.
   Anchored in pixels the dark band tracks the text instead of the window.
   The old stops, for the record: 1.25:1 eyebrow, 2.19:1 H1, 4.03:1 sub on desktop. Worst case
   now, measured across seven frames of web-v4 - the crew, the spray, the pink flood and the held
   room - at eleven viewport sizes from 375x667 to 1920x1080: eyebrow never below 5.72:1, H1
   never below 6.82:1, sub never below 6.50:1. Every one of them passes AA. The worst is the
   tallest desktop, not the shortest, which is the opposite of the percentage version's failure.
   Worth knowing: the worst background on the whole film is not the white room, it is a pale pink
   highlight on the ute at t=0, rgb(251,228,244) - the very first frame every visitor sees. */
.film .hero-scrim{position:absolute;inset:0;z-index:3;background:linear-gradient(to top,rgba(27,20,24,.88) 0,rgba(27,20,24,.74) 180px,rgba(27,20,24,.64) 380px,rgba(27,20,24,.62) 470px,rgba(27,20,24,.22) 600px,rgba(27,20,24,0) 720px)}
.film .hero-copy{position:absolute;inset:auto 0 0 0;z-index:4;display:block;padding:0 0 clamp(40px,7vh,80px);color:#fff}
/* Pale pink only reaches 3.59:1 at 11.5px even over the new scrim, and DIRECTION.md keeps pink
   for display type at 24px and up. White. */
.film .hero-copy .eyebrow{color:#fff;margin-bottom:16px}
.film .hero-h{color:#fff;font-size:clamp(2.4rem,5.4vw,4.9rem);line-height:1;max-width:11em;letter-spacing:-.012em;text-shadow:0 1px 24px rgba(0,0,0,.18)}
.film .hero-sub{color:rgba(255,255,255,.86);max-width:30em;margin-top:18px;font-size:var(--t-lead)}
.film .hero-cta{margin-top:26px;gap:12px}
.film .btn{background:#fff;color:var(--ink)}
.film .btn:hover{background:var(--pink);color:#fff}
/* Over the film the white ground is the loudest thing on the frame, so the login takes it and the
   walkthrough drops to the rose ground. White on --rose is 7:1. */
.film .hero-cta .btn:not(.btn-portal){background:var(--rose);color:#fff}
.film .hero-cta .btn:not(.btn-portal):hover{background:#fff;color:var(--ink)}
/* --pink at 17px would be 4.05:1. DIRECTION.md keeps pink for display type 24px and up, so the
   hover is a tint of the white ground instead, and pink is used for the ring where it is not text. */
.film .hero-cta .btn-portal:hover{background:#F2E4EA;color:var(--ink)}
.film .hero-cta .btn-portal:focus-visible{outline-color:var(--pink)}
.film .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.film .btn-ghost:hover{border-color:#fff;color:#fff}
.film :focus-visible{outline-color:#fff}
.hdr:not(.scrolled):not(.open) .brand-name,.hdr:not(.scrolled):not(.open) .nav a,.hdr:not(.scrolled):not(.open) .hdr-call{color:var(--ink)}
body.film-hero .hdr:not(.scrolled):not(.open){background:linear-gradient(to bottom,rgba(255,255,255,.92),rgba(255,255,255,.72) 70%,rgba(255,255,255,0))}
@media (max-width:719px){
  .hero.film{min-height:0;height:100svh}
  /* 20% was tuned on 8 September for the corridor hold and never re-checked when the crew film
     landed. A 390px screen sees 26% of a 16:9 frame, and at 20% that window is the left ute's
     bonnet and the fence: no person in the mobile hero until the spray hits the lens at 8.25 s.
     78% takes source x 57.7-83.7%, which holds the centre woman and her bottle on the film and
     the head of the couch with the wall set behind it on the room. The film and the still must
     carry the same value or the cross-fade shunts sideways. 20/50/70/74/77/78/82/88 were all
     cropped against both compositions; 78 is the only one that reads on both.
     Re-checked against web-v4 on 21 September 2026. */
  .film .hero-video,.film .hero-hold{object-position:78% 50%}
  .film .hero-copy{padding-bottom:36px}
  .film .hero-h{font-size:clamp(2.1rem,9.5vw,2.9rem)}
  .film .hero-sub{font-size:.9375rem;margin-top:12px}
  /* Pixels, for the reason written out over the desktop scrim above. Measured at 390x844 these
     read fine as percentages and measured at 375x667 - an iPhone SE, which is still a phone
     people have - the eyebrow was 3.69:1. Same trap, smaller screen. */
  .film .hero-scrim{background:linear-gradient(to top,rgba(27,20,24,.92) 0,rgba(27,20,24,.80) 160px,rgba(27,20,24,.70) 330px,rgba(27,20,24,.66) 430px,rgba(27,20,24,.26) 560px,rgba(27,20,24,0) 660px)}
  .film .hero-cta{margin-top:18px;flex-direction:column;align-items:flex-start;gap:10px}
  .film .hero-cta .btn{align-self:stretch;min-width:0;margin-right:0}
  .film .hero-cta .btn-portal{min-height:58px;font-size:1rem}
  .film .hero-cta .btn-ghost{border:0;padding:0;min-height:44px;color:#fff;text-decoration:underline;text-underline-offset:.22em}
  .film .hero-copy .eyebrow{font-size:.65rem;letter-spacing:.14em;margin-bottom:12px}
}
@media (max-width:719px) and (max-height:640px){.film .hero-sub{display:none}}

/* Round 7: design-critic pass, dental and radiology */
.prose .idx-key :is(h2,h3){font-size:clamp(1.35rem,2vw,1.7rem)}
/* Round 8, 26 Sep 2026: these two column rules sat outside a media query and beat the phone rule above, so FAQ and service rows squeezed into two columns on phones */
@media (min-width:720px){.prose .svc .idx-row{grid-template-columns:minmax(200px,280px) 1fr}.prose .faq .idx-row{grid-template-columns:minmax(200px,280px) 1fr}}
.prose li{text-wrap:pretty}
.prose h2 + .idx{margin-top:20px}
.prose ul + p{margin-top:16px}