/* My Vision Eye Clinic - shared stylesheet. Mobile first: base = mobile, min-width scales up. */

:root{
  /* Cool neutral stone, so the single marigold accent is the only warm thing on the page.
     Deliberately not cream or beige: run-qa flags those as an overused palette. */
  --bg:        oklch(0.9690 0.0035 255);
  --bg-2:      oklch(0.9420 0.0050 255);
  --paper:     oklch(0.9880 0.0020 255);
  --ink:       oklch(0.2050 0.0140 265);
  --ink-2:     oklch(0.3800 0.0130 265);
  --ink-3:     oklch(0.4500 0.0125 265);
  --line:      oklch(0.8680 0.0060 258);
  --accent:    oklch(0.6420 0.1720 48);
  --accent-dp: oklch(0.4500 0.1350 44);
  --accent-sf: oklch(0.9420 0.0400 62);
  --dark:      oklch(0.1820 0.0130 262);
  --dark-2:    oklch(0.2420 0.0140 262);
  --dark-line: oklch(0.3350 0.0150 262);
  --on-dark:   oklch(0.9620 0.0040 258);
  --on-dark-2: oklch(0.7200 0.0070 258);

  --f-disp:'Faustina',ui-serif,Georgia,serif;
  --f-body:'Familjen Grotesk','Helvetica Neue',Arial,sans-serif;

  --wrap: 1240px;
  --gut: clamp(1.25rem, 0.9rem + 1.1vw, 2rem);
  --rad: 2px;
  --tscale: 1;

  --e-out: cubic-bezier(.16,.84,.28,1);
  --e-in-out: cubic-bezier(.62,.05,.24,.98);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:calc(1.0625rem * var(--tscale));
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;
}
html.preload body{overflow:hidden}
img,svg,iframe{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}

/* ---------- grain ---------- */
.grain{position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.05;will-change:auto}
.grain::after{
  content:"";position:absolute;inset:-60px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:reduce){.grain{opacity:.18}}

/* ---------- skip link + focus ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--ink);color:var(--bg);padding:.85rem 1.15rem;font-weight:600}
.skip:focus{left:.5rem;top:.5rem}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ---------- layout ---------- */
.wrap{width:min(100%,var(--wrap));margin-inline:auto}
section{position:relative}
.band{padding-block:clamp(3.4rem, 2.2rem + 6vw, 7.5rem);padding-inline:var(--gut)}
.band-tight{padding-block:clamp(2.4rem, 1.8rem + 3.4vw, 4.4rem);padding-inline:var(--gut)}
.dark{background:var(--dark);color:var(--on-dark)}
.dark h1,.dark h2,.dark h3,.dark h4{color:var(--on-dark)}
.tint{background:var(--bg-2)}
.paper{background:var(--paper)}

/* corner + markers */
.marked{position:relative}
.marked::before,.marked::after{
  content:"+";position:absolute;font-family:var(--f-body);font-size:.9rem;line-height:1;
  color:var(--accent-dp);opacity:.72;pointer-events:none;
}
.marked::before{top:.9rem;left:0}
.marked::after{bottom:.9rem;right:0}
.dark .marked::before,.dark .marked::after{color:var(--accent)}
.dark .sec-h .n,.trust .sec-h .n,.cta .sec-h .n,.quiet .sec-h .n{color:var(--accent)}
.dark .stars svg,.dark .car-it .rs svg,.dark .faq summary::after,.mq.on-dark .mq-i .s{color:var(--accent)}
.dark .pull{border-left-color:var(--accent)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--f-disp);font-weight:600;font-optical-sizing:auto;letter-spacing:-.016em;margin:0 0 .6em;text-wrap:balance}
h1{font-size:clamp(2.6rem, 1.7rem + 5.4vw, 4.9rem);line-height:1.04;font-weight:600}
h2{font-size:clamp(1.95rem, 1.35rem + 3.4vw, 3.4rem);line-height:1.1}
h3{font-size:clamp(1.3rem, 1.1rem + 1.1vw, 1.75rem);line-height:1.24;font-weight:600}
h4{font-size:clamp(1.08rem, 1rem + .5vw, 1.3rem);line-height:1.28}
p{margin:0 0 1.1em;max-width:68ch}
.lead{font-size:calc(1.16rem * var(--tscale));line-height:1.55;color:var(--ink-2);max-width:56ch}
.dark .lead{color:var(--on-dark-2)}
.small{font-size:calc(.95rem * var(--tscale));line-height:1.55}
.tnum{font-variant-numeric:tabular-nums}
.ital{font-style:italic}
em,.em{font-style:italic;color:var(--accent-dp)}
.dark em,.dark .em{color:var(--accent)}
strong{font-weight:600}

/* numbered editorial section header */
.sec-h{display:flex;align-items:baseline;gap:.85rem;margin-bottom:1.6rem;
  font-family:var(--f-body);font-size:calc(.76rem * var(--tscale));font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.dark .sec-h{color:var(--on-dark-2)}
.sec-h .n{color:var(--accent-dp);font-variant-numeric:tabular-nums}
.sec-h .r{flex:1;height:1px;background:var(--line)}
.dark .sec-h .r{background:var(--dark-line)}

/* ---------- reveals ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .82s var(--e-out),transform .82s var(--e-out)}
html.js .rv.in,.rv.in{opacity:1;transform:none}
html:not(.js) .rv{opacity:1;transform:none}
.rv-d1{transition-delay:.07s}.rv-d2{transition-delay:.14s}.rv-d3{transition-delay:.21s}
.rv-d4{transition-delay:.28s}.rv-d5{transition-delay:.35s}.rv-d6{transition-delay:.42s}

/* line mask reveal: pad-bottom protects descenders (LESSON 50) */
.lnwrap{display:block}
.lnmask{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.18em}
.ln{display:block;transform:translateY(105%);transition:transform .96s var(--e-out)}
.lnmask.in .ln,.in .ln{transform:none}
html:not(.js) .ln{transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1 !important;transform:none !important;transition:none !important}
  .ln{transform:none !important;transition:none !important}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:52px;padding:.9rem 1.5rem;border:1px solid var(--ink);
  background:var(--ink);color:var(--bg);text-decoration:none;
  font-family:var(--f-body);font-weight:600;font-size:calc(1rem * var(--tscale));
  letter-spacing:.005em;border-radius:var(--rad);cursor:pointer;white-space:nowrap;
  transition:background .3s var(--e-out),color .3s var(--e-out),transform .3s var(--e-out),border-color .3s var(--e-out);
}
.btn:hover{background:var(--accent-dp);border-color:var(--accent-dp);color:#fff}
.btn-accent{background:var(--accent);border-color:var(--accent);color:oklch(0.1880 0.0170 40)}
.btn-accent:hover{background:var(--accent-dp);border-color:var(--accent-dp);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.dark .btn-ghost{color:var(--on-dark);border-color:var(--dark-line)}
.dark .btn-ghost:hover{background:var(--on-dark);color:var(--dark);border-color:var(--on-dark)}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem}
.btn svg{width:19px;height:19px;flex:none}
body.can-hover .btn.mag{will-change:transform}

.tlink{
  display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  font-weight:600;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--accent);padding-bottom:1px;
  font-size:calc(.98rem * var(--tscale));
}
.tlink svg{width:17px;height:17px;flex:none}
.tlink:hover{color:var(--accent-dp)}
.dark .tlink{color:var(--on-dark)}
.dark .tlink:hover{color:var(--accent)}

/* ---------- preloader ---------- */
.pre{position:fixed;inset:0;z-index:9500;background:var(--dark);display:grid;place-items:center;
  transition:opacity .7s var(--e-out),visibility .7s}
html:not(.preload) .pre{opacity:0;visibility:hidden;pointer-events:none}
.pre-in{text-align:center;color:var(--on-dark)}
.pre-in .k{font-family:var(--f-disp);font-size:clamp(1.6rem,1.2rem + 2vw,2.6rem);font-style:italic;margin:0 0 .7rem}
.pre-in .b{width:120px;height:2px;background:var(--dark-line);margin:0 auto;overflow:hidden}
.pre-in .b i{display:block;height:100%;width:40%;background:var(--accent);animation:sweep 1.1s var(--e-in-out) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}

/* ---------- ribbon (demo) ---------- */
.ribbon{
  position:fixed;top:0;left:0;right:0;z-index:7900;background:var(--accent);
  color:oklch(0.1880 0.0170 40);font-family:var(--f-body);font-weight:600;
  font-size:calc(.79rem * var(--tscale));text-align:center;padding:.5rem .9rem;line-height:1.35;
}
.ribbon a{color:inherit}

/* ---------- header ---------- */
.hdr{
  position:fixed;top:var(--ribbon-h,0px);left:0;right:0;z-index:7600;
  background:color-mix(in oklab,var(--bg) 97%,transparent);
  border-bottom:1px solid var(--line);
  transition:transform .45s var(--e-out),background .3s;
}
.hdr.up{transform:translateY(-102%)}
.hdr-in{display:flex;align-items:center;gap:1rem;min-height:66px;padding:.5rem var(--gut)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none;margin-right:auto;min-height:44px}
.brand img{height:42px;width:auto}
.brand .bt{display:none}
.hdr-nav{display:none}
.hdr-act{display:flex;align-items:center;gap:.5rem}
.tsz{display:none}
.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:0 11px;background:none;border:1px solid var(--line);
  border-radius:var(--rad);cursor:pointer;flex:none;
}
.burger i{display:block;height:1.5px;background:var(--ink);transition:transform .32s var(--e-out),opacity .2s}
.burger.on i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:7550;background:var(--dark);color:var(--on-dark);
  padding:calc(var(--ribbon-h,0px) + 80px) 1.5rem 2rem;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-1.5%);
  transition:opacity .4s var(--e-out),visibility .4s,transform .4s var(--e-out);
}
.drawer.on{opacity:1;visibility:visible;transform:none}
.drawer h5,.drawer .dh{font-family:var(--f-body);font-size:calc(.74rem * var(--tscale));letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin:1.6rem 0 .55rem;font-weight:600}
.drawer a{display:block;text-decoration:none;padding:.62rem 0;border-bottom:1px solid var(--dark-line);
  font-size:calc(1.06rem * var(--tscale));min-height:44px}
.drawer a:hover{color:var(--accent)}
.drawer .dgrid{display:grid;gap:0}
.drawer .dfoot{margin-top:2rem;display:grid;gap:.7rem}

@media (min-width:1140px){
  /* the logo artwork already contains the clinic name and the tagline, so no text lockup */
  .burger{display:none}
  .hdr-nav{display:flex;align-items:center;gap:.15rem}
  .hdr-nav>li{list-style:none;position:relative}
  .hdr-nav a.nl{display:flex;align-items:center;gap:.3rem;text-decoration:none;padding:.7rem .6rem;
    font-size:calc(.93rem * var(--tscale));font-weight:500;border-radius:var(--rad);min-height:44px;
    white-space:nowrap}
  .hdr-nav a.nl:hover,.hdr-nav li.on>a.nl{color:var(--accent-dp);background:var(--accent-sf)}
  .hdr-nav a.nl[aria-current="page"]{color:var(--accent-dp)}
  .hdr-nav a.nl svg{width:11px;height:11px;opacity:.6}
  .sub{
    position:absolute;top:calc(100% + 6px);left:-.4rem;min-width:280px;background:var(--paper);
    border:1px solid var(--line);border-radius:var(--rad);padding:.5rem;margin:0;list-style:none;
    box-shadow:0 10px 18px -12px oklch(0.2050 0.0140 265 / .30);
    opacity:0;visibility:hidden;transform:translateY(-7px);
    transition:opacity .26s var(--e-out),visibility .26s,transform .26s var(--e-out);
  }
  .hdr-nav li.on .sub,.hdr-nav li:hover .sub,.hdr-nav li:focus-within .sub{opacity:1;visibility:visible;transform:none}
  .sub a{display:flex;align-items:center;text-decoration:none;padding:.6rem .7rem;font-size:calc(.92rem * var(--tscale));
    border-radius:var(--rad);min-height:44px;white-space:nowrap}
  .sub a:hover{background:var(--accent-sf);color:var(--accent-dp)}
  .tsz{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:var(--rad);padding:2px}
  .tsz button{width:38px;height:44px;background:none;border:0;border-radius:2px;cursor:pointer;
    font-family:var(--f-disp);line-height:1;color:var(--ink-3)}
  .tsz button:hover{background:var(--accent-sf);color:var(--accent-dp)}
  .tsz button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
  .tsz .t1{font-size:.82rem}.tsz .t2{font-size:1rem}.tsz .t3{font-size:1.2rem}
  .drawer{display:none}
}

/* ---------- sticky mobile action bar ---------- */
.sbar{
  position:fixed;bottom:0;left:0;right:0;z-index:7500;display:grid;grid-template-columns:1fr 1fr 1fr;
  background:var(--dark);border-top:1px solid var(--dark-line);
  padding-bottom:env(safe-area-inset-bottom);
}
.sbar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:58px;padding:.5rem .3rem;text-decoration:none;color:var(--on-dark);
  font-size:calc(.72rem * var(--tscale));font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}
.sbar a+a{border-left:1px solid var(--dark-line)}
.sbar a svg{width:19px;height:19px}
.sbar a.pri{background:var(--accent);color:oklch(0.1880 0.0170 40)}
@media (min-width:1140px){.sbar{display:none}}
body.has-sbar{padding-bottom:58px}
@media (min-width:1140px){body.has-sbar{padding-bottom:0}}

/* ---------- HERO ---------- */
.hero{padding-top:calc(var(--ribbon-h,0px) + 66px + clamp(1.6rem,1rem + 3vw,3.4rem));
  padding-bottom:clamp(2rem,1.4rem + 3vw,4rem);padding-inline:var(--gut);overflow:hidden}
.hero-grid{display:grid;gap:clamp(1.8rem,1.2rem + 3vw,3rem)}
.hero-eye{display:flex;align-items:center;gap:.6rem;font-size:calc(.96rem * var(--tscale));
  font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1.1rem}
.hero-eye .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.hero h1{margin-bottom:.5em}
.hero h1 .ital{color:var(--accent-dp)}
.hero-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0 1.7rem;padding:0;list-style:none}
.hero-chips li{
  display:flex;align-items:center;gap:.4rem;border:1px solid var(--line);background:var(--paper);
  padding:.5rem .85rem;border-radius:100px;font-size:calc(.94rem * var(--tscale));font-weight:500;
}
.hero-chips li b{font-weight:700}
.hero-chips svg{width:15px;height:15px;color:var(--accent-dp);flex:none}

/* the acuity stage */
.acu{position:relative}
.acu-frame{
  position:relative;aspect-ratio:4/5;background:var(--dark-2);border:1px solid var(--line);
  border-radius:var(--rad);overflow:hidden;
}
.acu-frame canvas{position:absolute;inset:0;width:100% !important;height:100% !important;display:block}
.acu-fb{position:absolute;inset:0}
.acu-fb img{width:100%;height:100%;object-fit:cover;filter:blur(13px) saturate(1.15);
  transform:scale(1.06);transition:filter 1.5s var(--e-out),transform 1.5s var(--e-out)}
.acu-fb.sharp img,html:not(.js) .acu-fb img{filter:none;transform:none}
.acu.gl .acu-fb{opacity:0;visibility:hidden;transition:opacity .6s}
.acu-cap{
  position:absolute;left:0;right:0;bottom:0;padding:1.5rem 1.1rem .95rem;
  background:linear-gradient(to top,oklch(0.1880 0.0170 40 / .92),transparent);
  color:var(--on-dark);font-size:calc(.96rem * var(--tscale));line-height:1.5;
}
.acu-scale{
  display:flex;align-items:center;gap:.7rem;margin-top:.9rem;padding:.65rem .85rem;
  border:1px solid var(--line);background:var(--paper);border-radius:var(--rad);
}
.acu-scale .lab{font-size:calc(.7rem * var(--tscale));font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);flex:none}
.acu-scale .val{font-family:var(--f-disp);font-size:1.45rem;line-height:1;font-variant-numeric:tabular-nums;
  white-space:nowrap;flex:none;min-width:3.2em}
.acu-scale .track{flex:1;height:3px;background:var(--line);position:relative;min-width:0}
.acu-scale .track i{position:absolute;inset:0 auto 0 0;width:100%;background:var(--accent-dp);
  transform:scaleX(.08);transform-origin:left center;transition:transform .3s linear}

@media (min-width:900px){
  .hero-grid{grid-template-columns:1.05fr .95fr;align-items:center}
  .acu-frame{aspect-ratio:4/4.4}
}
@media (min-width:1200px){.hero-grid{grid-template-columns:1.1fr .9fr;gap:4rem}}

/* ---------- trust strip ---------- */
.trust{background:var(--dark);color:var(--on-dark)}
.trust-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.trust-c{padding:1.5rem 1.1rem 1.6rem;border-right:1px solid var(--dark-line);border-bottom:1px solid var(--dark-line);min-width:0}
.trust-c:nth-child(2n){border-right:0}
.trust-c .v{font-family:var(--f-disp);font-size:clamp(1.9rem,1.5rem + 2vw,2.9rem);line-height:1;
  font-variant-numeric:tabular-nums;white-space:nowrap;margin-bottom:.3rem;color:var(--on-dark)}
.trust-c .l{font-size:calc(.96rem * var(--tscale));line-height:1.4;color:var(--on-dark-2)}
.trust-c .s{display:block;white-space:nowrap;font-size:calc(.8rem * var(--tscale));color:var(--accent);margin-top:.3rem;
  letter-spacing:.08em;text-transform:uppercase;font-weight:600}
@media (min-width:760px){
  .trust-grid{grid-template-columns:repeat(3,1fr)}
  .trust-c:nth-child(2n){border-right:1px solid var(--dark-line)}
  .trust-c:nth-child(3n){border-right:0}
}
@media (min-width:1100px){
  .trust-grid{grid-template-columns:repeat(6,1fr)}
  .trust-c{border-bottom:0}
  .trust-c:nth-child(2n),.trust-c:nth-child(3n){border-right:1px solid var(--dark-line)}
  .trust-c:last-child{border-right:0}
}

/* ---------- pull review ---------- */
.pull{border-left:3px solid var(--accent-dp);padding:.2rem 0 .2rem 1.25rem;margin:0}
.pull q{display:block;font-family:var(--f-disp);font-style:italic;
  font-size:clamp(1.2rem,1.02rem + 1.1vw,1.72rem);line-height:1.42;quotes:none}
.pull q::before,.pull q::after{content:none}
.pull cite{display:block;margin-top:.9rem;font-family:var(--f-body);font-style:normal;
  font-size:calc(.96rem * var(--tscale));color:var(--ink-3)}
.pull cite b{color:var(--ink);font-weight:600}
.dark .pull cite{color:var(--on-dark-2)}
.dark .pull cite b{color:var(--on-dark)}
.stars{display:inline-flex;gap:1px;vertical-align:-2px}
.stars svg{width:14px;height:14px;color:var(--accent-dp)}

/* ---------- symptom router ---------- */
.rt-grid{display:grid;gap:.7rem}
.rt-card{
  display:flex;flex-direction:column;gap:.4rem;text-align:left;width:100%;
  border:1px solid var(--line);background:var(--paper);padding:1.05rem 1.1rem;
  border-radius:var(--rad);cursor:pointer;min-height:44px;
  transition:border-color .3s var(--e-out),background .3s var(--e-out),transform .3s var(--e-out);
}
.rt-card:hover{border-color:var(--accent);background:var(--accent-sf)}
.rt-card[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-sf);
  box-shadow:inset 0 0 0 1px var(--accent)}
.rt-card .q{font-family:var(--f-disp);font-size:calc(1.1rem * var(--tscale));line-height:1.28}
.rt-card .h{font-size:calc(.96rem * var(--tscale));color:var(--ink-3);line-height:1.45}
.rt-out{
  margin-top:1.1rem;border:1px solid var(--accent);background:var(--paper);
  border-radius:var(--rad);padding:1.2rem;display:none;
}
.rt-out.on{display:block}
.rt-out .k{font-size:calc(.96rem * var(--tscale));font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-dp);margin-bottom:.5rem}
.rt-out h3{margin-bottom:.4em}
@media (min-width:700px){.rt-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.rt-grid{grid-template-columns:repeat(3,1fr)}}

/* ---------- services: pinned horizontal on desktop ---------- */
.svc-pin{position:relative}
.svc-track{display:grid;gap:.9rem}
.svc-card{
  position:relative;border:1px solid var(--line);background:var(--paper);border-radius:var(--rad);
  padding:1.35rem 1.25rem 1.15rem;display:flex;flex-direction:column;min-width:0;
  transition:border-color .35s var(--e-out),transform .35s var(--e-out),box-shadow .35s var(--e-out);
}
.svc-card:hover{border-color:var(--accent)}
.svc-card .num{font-family:var(--f-body);font-size:calc(.96rem * var(--tscale));font-weight:600;
  letter-spacing:.14em;color:var(--accent-dp);font-variant-numeric:tabular-nums;margin-bottom:.75rem}
.svc-card h3{margin-bottom:.45em}
.svc-card p{font-size:calc(.94rem * var(--tscale));color:var(--ink-2);margin-bottom:1rem;max-width:none}
.svc-card ul{margin:0 0 1.1rem;padding:0;list-style:none;display:grid;gap:.32rem}
.svc-card ul li{position:relative;padding-left:1rem;font-size:calc(.88rem * var(--tscale));color:var(--ink-2)}
.svc-card ul li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--accent-dp)}
.svc-card .go{margin-top:auto}
.svc-card .go .tlink{white-space:nowrap}
@media (min-width:640px){.svc-track{grid-template-columns:repeat(2,1fr)}}
/* Horizontal scroller, not a pin. Native scroll on touch, drag on desktop. */
@media (min-width:760px){
  .svc-vp{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;scrollbar-width:thin;padding-bottom:1rem;cursor:grab}
  .svc-vp.grabbing{cursor:grabbing}
  .svc-vp::-webkit-scrollbar{height:6px}
  .svc-vp::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
  .svc-track{display:flex;gap:1.4rem;grid-template-columns:none}
  .svc-card{width:min(46vw,400px);flex:none;scroll-snap-align:start}
}
@media (min-width:1140px){.svc-card{width:min(31vw,392px)}}

/* ---------- generic grids ---------- */
.g2{display:grid;gap:clamp(1.6rem,1.1rem + 2.4vw,2.8rem)}
@media (min-width:900px){.g2{grid-template-columns:1fr 1fr;align-items:start}
  .g2>aside{align-self:stretch;height:100%}
  .g2.wide-l{grid-template-columns:1.15fr .85fr}
  .g2.wide-r{grid-template-columns:.85fr 1.15fr}}
.g3{display:grid;gap:1rem}
@media (min-width:640px){.g3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.g3{grid-template-columns:repeat(3,1fr)}}
.g4{display:grid;gap:.9rem}
@media (min-width:560px){.g4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.g4{grid-template-columns:repeat(4,1fr)}}
.card{border:1px solid var(--line);background:var(--paper);border-radius:var(--rad);padding:1.3rem 1.2rem;min-width:0}
.dark .card{background:var(--dark-2);border-color:var(--dark-line)}
.card h3,.card h4{margin-bottom:.5em}
.card p:last-child{margin-bottom:0}
.card p{max-width:none;font-size:calc(.95rem * var(--tscale));color:var(--ink-2)}
.dark .card p{color:var(--on-dark-2)}

/* figure / parallax media */
.fig{position:relative;overflow:hidden;border-radius:var(--rad);background:var(--bg-2)}
.fig img{width:100%;height:100%;object-fit:cover}
.fig.pxw{aspect-ratio:4/5}
.fig.pxw img{height:118%;position:absolute;inset:auto 0 auto 0;top:-9%;will-change:transform}
.fig figcaption{padding:.7rem .1rem 0;font-size:calc(.96rem * var(--tscale));color:var(--ink-3);line-height:1.5}
.fig-stack{display:grid;gap:.8rem;grid-template-columns:1fr 1fr}
.fig-stack .fig{aspect-ratio:1}
.fig-stack .fig.tall{grid-row:span 2;aspect-ratio:1/2.08}

/* ---------- credentials list ---------- */
.cred{margin:0;padding:0;list-style:none;display:grid;gap:0;border-top:1px solid var(--line)}
.cred li{display:grid;gap:.15rem .9rem;padding:.85rem 0;border-bottom:1px solid var(--line);
  grid-template-columns:1fr;min-width:0}
.cred .y{font-size:calc(.78rem * var(--tscale));font-weight:600;letter-spacing:.1em;color:var(--accent-dp);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.cred .y,.cred .t,.cred .m{display:block}
.cred .t{font-size:calc(.98rem * var(--tscale));line-height:1.4}
.cred .m{font-size:calc(.92rem * var(--tscale));color:var(--ink-3);line-height:1.45}
.dark .cred{border-color:var(--dark-line)}
.dark .cred li{border-color:var(--dark-line)}
.dark .cred .y{color:var(--accent)}
.dark .cred .m{color:var(--on-dark-2)}
@media (min-width:620px){.cred li{grid-template-columns:6.5rem 1fr}}

/* ---------- father / quiet section ---------- */
.quiet{background:var(--dark);color:var(--on-dark);overflow:hidden}
.quiet .fig{border:1px solid var(--dark-line)}
.quiet blockquote{margin:0}
.quiet blockquote q,.quiet blockquote .bq{display:block;font-family:var(--f-disp);font-style:italic;quotes:none;
  font-size:clamp(1.25rem,1.05rem + 1.3vw,1.95rem);line-height:1.44;color:var(--on-dark);max-width:34ch}
.quiet blockquote .bq::before{content:"\201C"}
.quiet blockquote .bq::after{content:"\201D"}
.quiet blockquote q::before,.quiet blockquote q::after{content:none}
.quiet blockquote footer{margin-top:1.1rem;font-size:calc(.88rem * var(--tscale));color:var(--on-dark-2)}

/* ---------- marquee ---------- */
.mq{overflow:hidden;border-block:1px solid var(--line);padding:.9rem var(--gut);background:var(--bg-2)}
.dark .mq,.mq.on-dark{background:var(--dark-2);border-color:var(--dark-line);color:var(--on-dark)}
.mq-in{display:flex;gap:2.4rem;width:max-content;animation:mqx 46s linear infinite}
.mq:hover .mq-in,.mq:focus-within .mq-in{animation-play-state:paused}
.mq-i{display:flex;align-items:center;gap:.7rem;font-size:calc(.92rem * var(--tscale));white-space:nowrap}
.mq-i .s{color:var(--accent-dp);font-weight:700;flex:none}
.mq-i q{font-style:italic;quotes:none}
.mq-i q::before,.mq-i q::after{content:none}
.mq-i cite{font-style:normal;color:var(--ink-3);font-size:calc(.96rem * var(--tscale))}
.mq.on-dark .mq-i cite{color:var(--on-dark-2)}
@keyframes mqx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq-in{animation:none;flex-wrap:wrap;width:auto}}

/* ---------- testimonial carousel ---------- */
.car{position:relative}
.car-vp{overflow:hidden;cursor:grab}
.car-vp.drag{cursor:grabbing}
.car-tr{display:flex;gap:1rem;will-change:transform}
.car-it{
  flex:none;width:min(84vw,420px);border:1px solid var(--line);background:var(--paper);
  border-radius:var(--rad);padding:1.4rem 1.3rem;display:flex;flex-direction:column;
}
.dark .car-it{background:var(--dark-2);border-color:var(--dark-line)}
.car-it .rs{display:flex;gap:2px;margin-bottom:.8rem}
.car-it .rs svg{width:15px;height:15px;color:var(--accent-dp)}
.car-it q{display:block;font-family:var(--f-disp);font-style:italic;quotes:none;
  font-size:calc(1.06rem * var(--tscale));line-height:1.5;margin-bottom:1rem}
.car-it q::before,.car-it q::after{content:none}
.car-it .who{margin-top:auto;font-size:calc(.96rem * var(--tscale));line-height:1.5}
.car-it .who b{display:block;font-weight:600;font-size:calc(.94rem * var(--tscale))}
.car-it .who span{color:var(--ink-3)}
.dark .car-it .who span{color:var(--on-dark-2)}
.car-it .note{margin-top:.55rem;font-size:calc(.96rem * var(--tscale));color:var(--ink-3);font-style:italic}
.dark .car-it .note{color:var(--on-dark-2)}
.car-nav{display:flex;align-items:center;gap:.5rem;margin-top:1.2rem}
.car-nav button{
  width:48px;height:48px;border:1px solid var(--line);background:var(--paper);border-radius:var(--rad);
  cursor:pointer;display:grid;place-items:center;transition:background .3s,border-color .3s,opacity .3s;
}
.car-nav button:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:var(--bg)}
.car-nav button:disabled{opacity:.34;cursor:default}
.car-nav button svg{width:18px;height:18px}
.dark .car-nav button{background:var(--dark-2);border-color:var(--dark-line)}
.dark .car-nav button:hover:not(:disabled){background:var(--on-dark);color:var(--dark)}
.car-nav .prog{flex:1;height:2px;background:var(--line);position:relative;min-width:0;margin-left:.4rem}
.dark .car-nav .prog{background:var(--dark-line)}
.car-nav .prog i{position:absolute;inset:0 auto 0 0;background:var(--accent-dp);width:100%;
  transform:scaleX(.2);transform-origin:left center;transition:transform .4s var(--e-out)}
@media (min-width:700px){.car-it{width:392px}}

/* ---------- gallery ---------- */
.gal{display:grid;gap:.65rem;grid-template-columns:repeat(2,1fr)}
.gal button{padding:0;border:1px solid var(--line);background:var(--bg-2);border-radius:var(--rad);
  overflow:hidden;cursor:pointer;aspect-ratio:1;display:block;min-height:44px}
.gal button img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e-out)}
.gal button:hover img{transform:scale(1.05)}
@media (min-width:700px){.gal{grid-template-columns:repeat(3,1fr);gap:.85rem}}
@media (min-width:1100px){.gal{grid-template-columns:repeat(4,1fr)}}
.lb{position:fixed;inset:0;z-index:8200;background:oklch(0.1880 0.0170 40 / .96);
  display:grid;place-items:center;padding:1.2rem;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.lb.on{opacity:1;visibility:visible}
.lb img{max-width:100%;max-height:82vh;object-fit:contain}
.lb .cap{color:var(--on-dark-2);font-size:calc(.92rem * var(--tscale));text-align:center;margin-top:.9rem}
.lb .x{position:absolute;top:1rem;right:1rem;width:48px;height:48px;border:1px solid var(--dark-line);
  background:none;color:var(--on-dark);border-radius:var(--rad);cursor:pointer;font-size:1.4rem;line-height:1}
.lb .nvx{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;
  border:1px solid var(--dark-line);background:oklch(0.1880 0.0170 40 / .6);color:var(--on-dark);
  border-radius:var(--rad);cursor:pointer;display:grid;place-items:center}
.lb .nvx.p{left:.8rem}.lb .nvx.n{right:.8rem}
.lb .nvx svg{width:20px;height:20px}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);max-width:78ch;padding-top:.35rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:flex-start;gap:.9rem;padding:1.05rem 0;cursor:pointer;list-style:none;
  font-family:var(--f-disp);font-size:calc(1.1rem * var(--tscale));line-height:1.32;min-height:44px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--accent-dp);font-family:var(--f-body);
  font-size:1.25rem;line-height:1.1;flex:none;transition:transform .3s var(--e-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 1.15rem;color:var(--ink-2)}
.faq .a p{margin-bottom:.7em}
.faq .a p:last-child{margin-bottom:0}
.dark .faq,.dark .faq details{border-color:var(--dark-line)}
.dark .faq .a{color:var(--on-dark-2)}

/* ---------- contact / map ---------- */
.map{aspect-ratio:4/3;border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;background:var(--bg-2)}
.map iframe{width:100%;height:100%;border:0}
@media (min-width:900px){.map{aspect-ratio:16/12}}
.info{margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.info div{padding:.95rem 0;border-bottom:1px solid var(--line)}
.info dt{font-size:calc(.78rem * var(--tscale));font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.35rem;white-space:nowrap}
.info dd{margin:0;font-size:calc(1rem * var(--tscale));line-height:1.5}
.info dd a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;
  border-bottom:1px solid var(--accent-dp)}
.dark .info dd a{border-bottom-color:var(--accent)}
.dark .info,.dark .info div{border-color:var(--dark-line)}
.dark .info dt{color:var(--on-dark-2)}

/* ---------- forms ---------- */
.form{display:grid;gap:1rem}
.fr{display:grid;gap:.4rem}
.fr label{font-size:calc(.86rem * var(--tscale));font-weight:600}
.fr label .rq{color:var(--accent-dp)}
.fr input,.fr select,.fr textarea{
  width:100%;min-height:50px;padding:.75rem .85rem;font-family:var(--f-body);font-size:16px;
  color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--rad);
}
.fr textarea{min-height:118px;resize:vertical;line-height:1.55}
.fr input:focus,.fr select:focus,.fr textarea:focus{border-color:var(--accent);outline:none;
  box-shadow:0 0 0 3px var(--accent-sf)}
.fr .hint{font-size:calc(.88rem * var(--tscale));color:var(--ink-3)}
.fr .err{font-size:calc(.82rem * var(--tscale));color:oklch(0.5200 0.1750 25);display:none}
.fr.bad input,.fr.bad select,.fr.bad textarea{border-color:oklch(0.5200 0.1750 25)}
.fr.bad .err{display:block}
@media (min-width:640px){.form .two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}}
.form-note{font-size:calc(.96rem * var(--tscale));color:var(--ink-3);line-height:1.55}
.form-ok{display:none;border:1px solid var(--accent);background:var(--accent-sf);padding:1.2rem;border-radius:var(--rad)}
.form-ok.on{display:block}

/* ---------- kinetic statement ---------- */
.kin{background:var(--dark);color:var(--on-dark);overflow:hidden;
  padding-block:clamp(3.4rem,2.2rem + 6vw,7rem)}
.kin .ktxt{font-family:var(--f-disp);line-height:1.04;letter-spacing:-.02em;margin:0}
.kin .kl{display:block;white-space:nowrap;font-size:clamp(1.7rem,.6rem + 8.4vw,6rem)}
.kin .kl.ind{padding-left:8%}
.kin .kl em{color:var(--accent)}
.kin .kmeta{margin-top:2rem;max-width:52ch;color:var(--on-dark-2)}

/* ---------- breadcrumb + page head ---------- */
.phead{padding-top:calc(var(--ribbon-h,0px) + 66px + clamp(1.5rem,1rem + 2.6vw,3rem));
  padding-bottom:clamp(1.4rem,1rem + 2vw,2.6rem);padding-inline:var(--gut)}
.crumb{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.1rem;padding:0;list-style:none;
  font-size:calc(.96rem * var(--tscale));color:var(--ink-3)}
.crumb li{display:flex;gap:.4rem;align-items:center}
.crumb a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;text-decoration:none;
  border-bottom:1px solid var(--line)}
.crumb li{min-height:44px}
.crumb a:hover{color:var(--accent-dp);border-color:var(--accent)}
.crumb li[aria-current]{color:var(--ink)}
.phead h1{font-size:clamp(2.05rem,1.4rem + 4.2vw,3.9rem)}

/* prose (blog/service body) */
.prose{max-width:72ch}
.prose h2{margin-top:2.2em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.7em}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.1rem;display:grid;gap:.42rem}
.prose li{padding-left:.2rem}
.prose li::marker{color:var(--accent-dp)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:calc(.98rem * var(--tscale))}
.prose caption{text-align:left;font-size:calc(.89rem * var(--tscale));color:var(--ink-3);padding-bottom:.5rem}
.prose th,.prose td{text-align:left;padding:.7rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-family:var(--f-body);font-size:calc(.78rem * var(--tscale));font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.callout{border-left:3px solid var(--accent);background:var(--accent-sf);padding:1.05rem 1.15rem;
  border-radius:var(--rad);margin:0 0 1.4em}
.callout p:last-child{margin-bottom:0}
.callout .k{font-size:calc(.96rem * var(--tscale));font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-dp);margin-bottom:.4rem}

/* aside nav on service pages */
.svc-aside{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.svc-aside li{border-bottom:1px solid var(--line)}
.svc-aside a{display:flex;align-items:center;padding:.75rem 0;text-decoration:none;
  font-size:calc(.94rem * var(--tscale));min-height:44px;white-space:nowrap}
.svc-aside a:hover{color:var(--accent-dp)}
.svc-aside a[aria-current="page"]{color:var(--accent-dp);font-weight:600}
.sticky-aside{position:sticky;top:calc(var(--ribbon-h,0px) + 90px)}

/* CTA band */
.cta{background:var(--dark);color:var(--on-dark);overflow:hidden}
.cta h2{max-width:24ch}
.cta .fee{display:inline-flex;align-items:baseline;gap:.5rem;border:1px solid var(--dark-line);
  padding:.6rem .95rem;border-radius:var(--rad);margin-bottom:1.4rem}
.cta .fee b{font-family:var(--f-disp);font-size:1.45rem;line-height:1;color:var(--accent)}
.cta .fee span{font-size:calc(.82rem * var(--tscale));color:var(--on-dark-2)}

/* ---------- footer ---------- */
.ftr{background:var(--dark);color:var(--on-dark-2);border-top:1px solid var(--dark-line);
  padding:clamp(2.6rem,2rem + 3vw,4.2rem) var(--gut) 1.5rem}
.ftr a{color:var(--on-dark-2);text-decoration:none}
.ftr a:hover{color:var(--accent)}
.ftr-grid{display:grid;gap:2rem}
.ftr h5,.ftr .fh{font-family:var(--f-body);font-size:calc(.74rem * var(--tscale));letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-dark);margin:0 0 .85rem;font-weight:600}
.ftr ul{margin:0;padding:0;list-style:none;display:grid;gap:0;font-size:calc(.95rem * var(--tscale))}
.ftr ul a{display:inline-flex;min-height:44px;align-items:center}
.ftr ul li{display:flex;align-items:center;min-height:44px}
.ftr .fbrand img{height:44px;width:auto;margin-bottom:1rem}
.ftr .fbrand p{font-size:calc(.96rem * var(--tscale));max-width:34ch;margin-bottom:1rem}
.ftr .frate{display:flex;align-items:center;gap:.55rem;font-size:calc(.9rem * var(--tscale));color:var(--on-dark)}
.ftr .frate b{font-family:var(--f-disp);font-size:1.3rem;line-height:1}
.ftr .soc{display:flex;gap:.5rem;margin-top:1.2rem}
.ftr .soc a{width:44px;height:44px;border:1px solid var(--dark-line);border-radius:var(--rad);
  display:grid;place-items:center}
.ftr .soc a:hover{border-color:var(--accent)}
.ftr .soc svg{width:17px;height:17px}
.ftr-btm{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--dark-line);
  display:grid;gap:.6rem;font-size:calc(.96rem * var(--tscale));line-height:1.6}
@media (min-width:700px){.ftr-grid{grid-template-columns:1.3fr 1fr 1fr}}
@media (min-width:1140px){
  .ftr-grid{grid-template-columns:1.5fr 1fr 1fr 1.1fr}
  .ftr-btm{grid-template-columns:1fr auto;align-items:center}
}

/* ---------- custom cursor (desktop, hover-capable only) ---------- */
.cur{position:fixed;top:0;left:0;width:26px;height:26px;border:1px solid var(--accent);border-radius:50%;
  z-index:9200;pointer-events:none;transform:translate(-50%,-50%);opacity:0;
  transition:opacity .3s,width .3s var(--e-out),height .3s var(--e-out),background .3s}
.cur.on{opacity:1}
.cur.big{width:52px;height:52px;background:oklch(0.6480 0.1620 52 / .16)}
body.can-hover.cursored{cursor:none}
body.can-hover.cursored a,body.can-hover.cursored button,
body.can-hover.cursored input,body.can-hover.cursored textarea,
body.can-hover.cursored select,body.can-hover.cursored summary{cursor:none}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.cur{display:none}}

body.can-hover .tilt{transition:transform .4s var(--e-out)}

/* ---------- utility ---------- */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.mt1{margin-top:1rem}.mt2{margin-top:1.7rem}.mt3{margin-top:2.6rem}
.nowrap{white-space:nowrap}
.center{text-align:center}
.maxw{max-width:62ch}
.minw0{min-width:0}
.pill{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line);
  padding:.32rem .72rem;border-radius:100px;font-size:calc(.79rem * var(--tscale));font-weight:600;
  letter-spacing:.04em;background:var(--paper)}
.pill svg{width:15px;height:15px;flex:none}
.pill.acc{border-color:var(--accent);background:var(--accent-sf);color:var(--accent-dp)}
.dark .pill{background:var(--dark-2);border-color:var(--dark-line)}
@media print{.hdr,.sbar,.ribbon,.grain,.cur,.pre{display:none!important}}

/* =====================================================================
   THE SIGNATURE MOMENT: pinned focus stage.
   The whole point is that the page HOLDS STILL while the photograph comes
   into focus. Previously the effect was tied to the frame scrolling past,
   so it had already finished by the time you looked at it.
   ===================================================================== */
.focus{background:var(--dark);color:var(--on-dark)}
.focus-pin{min-height:100svh;display:flex;align-items:center;
  padding-block:clamp(2.4rem,1.6rem + 4vw,4.5rem)}
.focus-grid{display:grid;gap:clamp(1.6rem,1.1rem + 2.6vw,3.2rem);width:min(100%,var(--wrap));
  margin-inline:auto;align-items:center}
.focus-copy{min-width:0}
.focus-copy h2{margin-bottom:.5em}
.focus-lede{color:var(--on-dark-2);font-size:calc(1.1rem * var(--tscale));line-height:1.55;max-width:44ch}
.focus-steps{margin:1.6rem 0 0;padding:0;list-style:none;display:grid;gap:0;
  border-top:1px solid var(--dark-line)}
.focus-steps li{display:grid;grid-template-columns:2.9rem 1fr;gap:.2rem .8rem;
  padding:.85rem 0;border-bottom:1px solid var(--dark-line);
  opacity:.34;transition:opacity .5s var(--e-out)}
.focus-steps li.lit{opacity:1}
.focus-steps .fs-n{font-family:var(--f-body);font-size:calc(.84rem * var(--tscale));font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:.1em;color:var(--on-dark-2);white-space:nowrap}
.focus-steps li.lit .fs-n{color:var(--accent)}
.focus-steps .fs-t{font-size:calc(1rem * var(--tscale));line-height:1.45;color:var(--on-dark)}
.focus-hint{margin-top:1.3rem;display:flex;align-items:center;gap:.6rem;
  font-size:calc(.96rem * var(--tscale));color:var(--on-dark-2)}
.focus-hint .ar{width:34px;height:1px;background:var(--accent);flex:none;position:relative}
.focus-hint .ar::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-right:1px solid var(--accent);border-bottom:1px solid var(--accent);transform:rotate(45deg)}
@media (prefers-reduced-motion:no-preference){
  .focus-hint .ar{animation:hint 2.2s var(--e-in-out) infinite}
}
@keyframes hint{0%,100%{transform:translateX(0);opacity:.55}50%{transform:translateX(7px);opacity:1}}
@media (min-width:900px){
  .focus-grid{grid-template-columns:.92fr 1.08fr;gap:clamp(2.4rem,1.4rem + 3.4vw,4.5rem)}
  .focus-steps li{grid-template-columns:3.2rem 1fr}
}

/* the acuity frame, now living inside the pinned stage */
.acu{position:relative;min-width:0}
.acu-frame{
  position:relative;aspect-ratio:4/3;background:var(--dark-2);
  border:1px solid var(--dark-line);border-radius:var(--rad);overflow:hidden;
}
/* Cap the frame: the source is a 384px photograph reconstructed upward, so displaying
   it wider than this spreads real detail too thin no matter how good the upscale is. */
@media (min-width:900px){.acu-frame{aspect-ratio:16/12;max-width:600px;margin-left:auto}}
.acu-frame canvas{position:absolute;inset:0;width:100% !important;height:100% !important;display:block}
.acu-fb{position:absolute;inset:0}
.acu-fb img{width:100%;height:100%;object-fit:cover;filter:blur(15px) saturate(1.16);
  transform:scale(1.07);transition:filter .25s linear,transform .25s linear}
.acu-fb.sharp img,html:not(.js) .acu-fb img{filter:none;transform:none}
.acu.gl .acu-fb{opacity:0;visibility:hidden;transition:opacity .6s}
.acu-cap{
  position:absolute;left:0;right:0;bottom:0;padding:2rem 1.1rem 1rem;
  background:linear-gradient(to top,oklch(0.1820 0.0130 262 / .94),transparent);
  color:var(--on-dark);font-size:calc(.96rem * var(--tscale));line-height:1.5;
}
.acu-scale{
  display:flex;align-items:center;gap:.8rem;margin-top:.9rem;padding:.7rem .9rem;
  border:1px solid var(--dark-line);background:var(--dark-2);border-radius:var(--rad);
}
.acu-scale .lab{font-size:calc(.78rem * var(--tscale));font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--on-dark-2);flex:none;white-space:nowrap}
.acu-scale .val{font-family:var(--f-disp);font-weight:600;font-size:1.6rem;line-height:1;
  font-variant-numeric:tabular-nums;white-space:nowrap;flex:none;min-width:3.4em;color:var(--on-dark)}
.acu-scale .track{flex:1;height:3px;background:var(--dark-line);position:relative;min-width:0}
.acu-scale .track i{position:absolute;inset:0 auto 0 0;width:100%;background:var(--accent);
  transform:scaleX(.08);transform-origin:left center;transition:transform .25s linear}

/* =====================================================================
   Word-by-word scrubbed highlight. Text arrives muted and lights up as
   you scroll through it, which reads as reading rather than as animation.
   ===================================================================== */
.wlite{font-family:var(--f-disp);font-weight:600;letter-spacing:-.018em;
  font-size:clamp(1.5rem, 1.05rem + 2.6vw, 2.9rem);line-height:1.3;max-width:30ch;margin:0}
.wlite .w{color:var(--ink-3);opacity:.3;transition:opacity .35s var(--e-out),color .35s var(--e-out)}
.wlite .w.lit{color:var(--ink);opacity:1}
.dark .wlite .w{color:var(--on-dark-2);opacity:.26}
.dark .wlite .w.lit{color:var(--on-dark);opacity:1}
.wlite .w.acc.lit{color:var(--accent-dp)}
.dark .wlite .w.acc.lit{color:var(--accent)}
html:not(.js) .wlite .w{opacity:1;color:var(--ink)}

/* =====================================================================
   Image mask reveal. Rest state hides with opacity/transform only, never
   with a full clip (LESSON 42); the wipe runs as a keyframe once revealed.
   ===================================================================== */
.imr{overflow:hidden;position:relative}
.imr img{transform:scale(1.04);transition:transform 1.4s var(--e-out)}
.imr.in img{transform:none}
/* The overlay defaults to OPEN. It only covers the image while JS is running and the
   element has not yet been revealed, so a missed observer can never leave a black box. */
.imr::after{
  content:"";position:absolute;inset:0;background:var(--dark);transform-origin:right center;
  transform:scaleX(0);pointer-events:none;
}
html.js .imr:not(.in)::after{transform:scaleX(1)}
html.js .imr.in::after{animation:wipe .95s var(--e-in-out) forwards}
@keyframes wipe{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){
  .imr::after{display:none}
  .imr img{transform:none;transition:none}
}

/* =====================================================================
   Horizontal photo band, pinned and scrubbed on desktop, swipeable below.
   ===================================================================== */
.pband{}
.pband-vp{overflow:hidden}
.pband-track{display:flex;gap:.8rem;padding-bottom:.4rem;will-change:transform}
.pband-it{flex:none;width:min(78vw,340px);border:1px solid var(--line);border-radius:var(--rad);
  overflow:hidden;background:var(--bg-2);position:relative}
.dark .pband-it{border-color:var(--dark-line);background:var(--dark-2)}
.pband-it img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pband-it figcaption{padding:.75rem .85rem .9rem;font-size:calc(.92rem * var(--tscale));
  line-height:1.45;color:var(--ink-2)}
.dark .pband-it figcaption{color:var(--on-dark-2)}
@media (max-width:1139px){
  .pband-vp{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .pband-track{padding-inline:var(--gut)}
}
@media (min-width:1140px){
  .pband-it{width:clamp(300px,25vw,400px)}
}

/* =====================================================================
   Event cards (her real community photographs)
   ===================================================================== */
.ev-grid{display:grid;gap:1.1rem}
@media (min-width:700px){.ev-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1140px){.ev-grid{grid-template-columns:repeat(3,1fr)}}
.ev{border:1px solid var(--line);background:var(--paper);border-radius:var(--rad);
  overflow:hidden;display:flex;flex-direction:column;min-width:0}
.dark .ev{border-color:var(--dark-line);background:var(--dark-2)}
.ev .ph{position:relative;overflow:hidden;background:var(--bg-2)}
.ev .ph img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .8s var(--e-out)}
.ev:hover .ph img{transform:scale(1.045)}
.ev .yr{position:absolute;top:.7rem;left:.7rem;background:var(--accent);
  color:oklch(0.1880 0.0170 40);font-family:var(--f-body);font-weight:700;
  font-size:calc(.82rem * var(--tscale));letter-spacing:.05em;padding:.28rem .6rem;
  border-radius:2px;white-space:nowrap}
.ev .bd{padding:1.05rem 1.1rem 1.15rem;display:flex;flex-direction:column;flex:1}
.ev .bd h3{font-size:calc(1.14rem * var(--tscale));margin-bottom:.45em;line-height:1.3}
.ev .bd p{font-size:calc(.96rem * var(--tscale));color:var(--ink-2);margin:0;max-width:none}
.dark .ev .bd p{color:var(--on-dark-2)}

/* split feature band: big image one side, copy the other, alternating */
.feat{display:grid;gap:clamp(1.5rem,1rem + 2.4vw,3rem);align-items:center}
@media (min-width:900px){
  .feat{grid-template-columns:1fr 1fr}
  .feat.flip .feat-media{order:2}
}
.feat-media{position:relative;min-width:0}
.feat-media .imr{border-radius:var(--rad);aspect-ratio:4/3}
.feat-media .imr img{width:100%;height:100%;object-fit:cover}
.feat-copy{min-width:0}
.feat-copy h3{margin-bottom:.5em}

/* stat lockup used inside feature bands */
.lock{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:1.5rem}
.lock div{min-width:0}
.lock .v{font-family:var(--f-disp);font-weight:600;font-size:clamp(1.7rem,1.4rem + 1.4vw,2.4rem);
  line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--accent-dp)}
.dark .lock .v{color:var(--accent)}
.lock .l{font-size:calc(.92rem * var(--tscale));color:var(--ink-3);line-height:1.4;margin-top:.3rem}
.dark .lock .l{color:var(--on-dark-2)}

/* kinetic type stage, now pinned and scrubbed */
.kin{}
.kin-pin{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(2.4rem,1.6rem + 4vw,5rem)}
.kin .ktxt{margin:0;width:min(100%,var(--wrap));margin-inline:auto}
.kin .kl{display:block;white-space:nowrap;font-family:var(--f-disp);font-weight:600;
  letter-spacing:-.022em;line-height:1.02;opacity:.22;transition:opacity .5s var(--e-out)}
.kin .kl.lit{opacity:1}
.kin .kl em{color:var(--accent);font-style:italic}
.kin .kmeta{margin:2.2rem auto 0;width:min(100%,var(--wrap));max-width:52ch;color:var(--on-dark-2)}

/* Pinned stages provide their own vertical rhythm, so the outer section must not
   also carry band padding or the pin overshoots the viewport. */
.focus,.kin{padding-block:0;padding-inline:var(--gut)}
.focus-pin,.kin-pin{width:100%}
.kin .kl.ind{padding-left:6%}

/* hero media: the portrait, sharp, with a mask reveal on entry */
.hero-media{margin:0;min-width:0}
.hero-media .imr{border-radius:var(--rad);aspect-ratio:10/9;border:1px solid var(--line)}
.hero-media .imr img{width:100%;height:100%;object-fit:cover}
.hero-media figcaption{padding:.8rem .1rem 0;font-size:calc(.96rem * var(--tscale));
  color:var(--ink-3);line-height:1.5}

/* three-up real event photos on the index */
.ev3{display:grid;gap:.8rem;grid-template-columns:repeat(2,1fr)}
.ev3 figure{margin:0;min-width:0}
.ev3 .imr{border-radius:var(--rad);aspect-ratio:4/3;border:1px solid var(--line)}
.dark .ev3 .imr{border-color:var(--dark-line)}
.ev3 .imr img{width:100%;height:100%;object-fit:cover}
.ev3 figcaption{padding:.6rem .1rem 0;font-size:calc(.96rem * var(--tscale));color:var(--ink-3);line-height:1.45}
.dark .ev3 figcaption{color:var(--on-dark-2)}
.ev3 figure:first-child{grid-column:1 / -1}
@media (min-width:900px){
  .ev3{grid-template-columns:repeat(2,1fr)}
  .ev3 figure:first-child{grid-column:1 / -1}
}

/* Mobile pinned stage: the photograph must be the thing you are looking at while
   the stage is pinned, so it goes first and the four-step list collapses into a
   single live readout that swaps as the focus resolves. */
.focus-now{margin:1.1rem 0 0;min-height:4.6em;font-size:calc(1rem * var(--tscale));
  line-height:1.5;color:var(--on-dark);max-width:44ch}
.focus-now .fn-k{display:inline-block;font-family:var(--f-body);font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--accent);
  margin-right:.5rem;white-space:nowrap}
@media (max-width:899px){
  .focus-grid .acu{order:-1}
  .focus-copy h2{font-size:clamp(1.7rem,1.3rem + 2.4vw,2.3rem)}
  .focus-lede{font-size:calc(1rem * var(--tscale))}
  .focus-steps{display:none}
  .focus-hint{margin-top:1rem}
}
@media (min-width:900px){.focus-now{display:none}}

/* trust strip and the focus stage are both dark and adjacent: a hairline keeps them
   from reading as one undifferentiated block */
.focus{border-top:1px solid var(--dark-line)}

/* Photo marquee: continuous drift, pauses on hover or focus. Replaces a fourth pinned
   section, which made the page feel like it would never end. */
.pmq{overflow:hidden;padding-block:0}
.pmq-vp{overflow:hidden;position:relative}
.pmq-vp::before,.pmq-vp::after{content:"";position:absolute;top:0;bottom:0;width:9vw;z-index:2;pointer-events:none}
.pmq-vp::before{left:0;background:linear-gradient(to right,var(--bg-2),transparent)}
.pmq-vp::after{right:0;background:linear-gradient(to left,var(--bg-2),transparent)}
.pmq-track{display:flex;gap:.9rem;width:max-content;animation:pmqx 68s linear infinite}
.pmq:hover .pmq-track,.pmq:focus-within .pmq-track{animation-play-state:paused}
@keyframes pmqx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.pmq-it{flex:none;width:min(72vw,300px);margin:0}
.pmq-it .ph{overflow:hidden;border:1px solid var(--line);border-radius:var(--rad);background:var(--bg-2)}
.pmq-it img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s var(--e-out)}
.pmq-it:hover img{transform:scale(1.05)}
.pmq-it figcaption{padding:.6rem .15rem 0;font-size:calc(.96rem * var(--tscale));
  line-height:1.45;color:var(--ink-3)}
@media (min-width:900px){.pmq-it{width:340px}}
@media (prefers-reduced-motion:reduce){
  .pmq-track{animation:none;width:auto;flex-wrap:wrap}
  .pmq-vp::before,.pmq-vp::after{display:none}
}

/* The header CTA does not fit beside the logo and the menu button on a phone, and the
   sticky bottom bar already carries Call, WhatsApp and Book. So it is desktop only. */
.hdr-cta{display:none}
@media (min-width:1140px){.hdr-cta{display:inline-flex}}

/* =====================================================================
   PREMIUM SURFACES. Layered gradients over solid colour, never a flat
   purple-to-blue wash on white. Each one is a single cheap background
   image on an existing surface, so it costs nothing at scroll time.
   ===================================================================== */
.hero{
  background:
    radial-gradient(120% 85% at 88% -10%, oklch(0.9420 0.0400 62 / .55) 0%, transparent 58%),
    radial-gradient(90% 70% at -5% 8%, oklch(0.9200 0.0180 250 / .6) 0%, transparent 55%),
    var(--bg);
}
.trust{
  background:
    radial-gradient(80% 140% at 12% 0%, oklch(0.2900 0.0420 44 / .85) 0%, transparent 62%),
    var(--dark);
}
.focus{
  background:
    radial-gradient(70% 90% at 92% 12%, oklch(0.3100 0.0560 46 / .7) 0%, transparent 60%),
    radial-gradient(60% 80% at 4% 96%, oklch(0.2400 0.0240 262 / .9) 0%, transparent 58%),
    var(--dark);
}
.quiet{
  background:
    radial-gradient(75% 95% at 15% 8%, oklch(0.2950 0.0450 48 / .75) 0%, transparent 58%),
    var(--dark);
}
.kin{
  background:
    linear-gradient(175deg, oklch(0.2200 0.0200 262) 0%, var(--dark) 45%, oklch(0.2050 0.0300 44) 100%);
}
.cta{
  background:
    radial-gradient(90% 120% at 88% 100%, oklch(0.3000 0.0520 46 / .8) 0%, transparent 60%),
    var(--dark);
}
.tint{
  background:
    linear-gradient(180deg, oklch(0.9560 0.0060 255) 0%, var(--bg-2) 40%, oklch(0.9330 0.0070 255) 100%);
}
.ftr{
  background:
    radial-gradient(70% 120% at 6% 0%, oklch(0.2500 0.0260 262 / .9) 0%, transparent 55%),
    var(--dark);
}
/* a hairline of accent light along the top of dark bands */
.focus::before,.cta::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,oklch(0.6420 0.1720 48 / .55),transparent);
}
.card,.svc-card,.ev,.car-it,.pmq-it .ph{
  background-image:linear-gradient(180deg, oklch(1 0 0 / .55) 0%, transparent 42%);
}
.dark .card,.dark .car-it,.dark .ev{
  background-image:linear-gradient(180deg, oklch(1 0 0 / .045) 0%, transparent 44%);
}

/* =====================================================================
   Richer, directional reveals. Cheap (transform + opacity only).
   ===================================================================== */
.rvL{opacity:0;transform:translateX(-34px)}
.rvR{opacity:0;transform:translateX(34px)}
.rvS{opacity:0;transform:scale(.955)}
.rvL,.rvR,.rvS{transition:opacity .85s var(--e-out),transform .85s var(--e-out)}
html.js .rvL.in,html.js .rvR.in,html.js .rvS.in{opacity:1;transform:none}
html:not(.js) .rvL,html:not(.js) .rvR,html:not(.js) .rvS{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rvL,.rvR,.rvS{opacity:1 !important;transform:none !important;transition:none !important}
}
/* stagger children of a marked group */
.stag>*{opacity:0;transform:translateY(24px);
  transition:opacity .72s var(--e-out),transform .72s var(--e-out)}
html.js .stag.in>*{opacity:1;transform:none}
html:not(.js) .stag>*{opacity:1;transform:none}
.stag.in>*:nth-child(1){transition-delay:.02s}
.stag.in>*:nth-child(2){transition-delay:.09s}
.stag.in>*:nth-child(3){transition-delay:.16s}
.stag.in>*:nth-child(4){transition-delay:.23s}
.stag.in>*:nth-child(5){transition-delay:.30s}
.stag.in>*:nth-child(6){transition-delay:.37s}
.stag.in>*:nth-child(7){transition-delay:.44s}
.stag.in>*:nth-child(8){transition-delay:.51s}
@media (prefers-reduced-motion:reduce){
  .stag>*{opacity:1 !important;transform:none !important;transition:none !important}
}

/* The pin starts BELOW the fixed chrome (the ScrollTrigger start is offset by its
   measured height), so the stage only needs to fill the remaining viewport and centre
   its content. Adding the chrome height as padding as well left a dead gap on top. */
.focus-pin{
  min-height:calc(100svh - var(--chrome-h,116px) - var(--sbar-h,0px));
  padding-block:clamp(1rem,.8rem + 1.6vw,2.4rem);
  display:flex;align-items:center;
}
@media (max-width:899px){
  /* one phone screen has to hold the photograph, the readout, a heading and the hint,
     so the eyebrow and the long lede step aside and the live line does the explaining */
  .focus .sec-h{display:none}
  .focus-lede{display:none}
  .focus-copy h2{font-size:clamp(1.45rem,1.15rem + 2vw,1.95rem);margin-bottom:.45em}
  .focus-grid{gap:1rem}
  .focus-now{margin-top:.9rem;min-height:4.2em}
  .focus-hint{margin-top:.8rem}
}

/* =====================================================================
   HERO PORTRAIT. Her own professional headshot, shot on white, so it is
   treated as a cut-out figure standing in a warm gradient rather than a
   photo in a box. multiply drops the white ground out against the light
   page, which is what makes it read as premium instead of pasted on.
   ===================================================================== */
/* =====================================================================
   HERO PORTRAIT. Her own photograph from her consulting room, smiling and
   at work, presented as a circle with the white corners cut out of the file
   so it sits on the gradient rather than in a white box. A doctor you can
   see working is what earns trust; a stiff ID photo is not.
   ===================================================================== */
/* =====================================================================
   HERO PORTRAIT. Her own photograph from her consulting room, smiling and
   at work, cut to a circle with the white corners removed from the file.
   A doctor you can see working is what earns trust; an ID photo is not.
   The ring is a drawn ring, not a glow, so it reads as designed.
   ===================================================================== */
.hero-por{
  position:relative;
  aspect-ratio:1/1;
  width:min(100%, 520px);
  margin-inline:auto;
  display:grid;
  place-items:center;
  isolation:isolate;
}
/* the tinted disc sits just behind her, not spreading across the section */
.hero-por::before{
  content:"";position:absolute;inset:0;border-radius:50%;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 64% 22%, oklch(0.9330 0.0620 66 / .85) 0%, transparent 56%),
    radial-gradient(circle at 30% 82%, oklch(0.8880 0.0340 236 / .8) 0%, transparent 58%),
    linear-gradient(165deg, oklch(0.9560 0.0140 246), oklch(0.9200 0.0230 241));
}
/* two crisp concentric rules, an eye chart read as a frame */
.hero-por::after{
  content:"";position:absolute;inset:0;border-radius:50%;z-index:1;pointer-events:none;
  border:1px solid oklch(0.6420 0.1720 48 / .34);
  box-shadow:0 0 0 9px oklch(0.9880 0.0020 255 / .55),
             0 0 0 10px oklch(0.6420 0.1720 48 / .16);
}
.hero-por img{
  position:relative;z-index:2;
  width:90%;height:90%;object-fit:cover;border-radius:50%;
  filter:drop-shadow(0 16px 30px oklch(0.3000 0.0300 244 / .26));
}
/* the proof, sitting on the rim */
.hero-badge{
  position:absolute;z-index:3;left:2%;bottom:4%;
  display:inline-flex;align-items:center;gap:.55rem;
  background:var(--paper);border:1px solid var(--line);border-radius:100px;
  padding:.5rem .95rem .5rem .8rem;
  box-shadow:0 14px 30px -14px oklch(0.2050 0.0140 265 / .45);
  white-space:nowrap;
}
.hero-badge .hb-stars{display:inline-flex;gap:1px}
.hero-badge .hb-stars svg{width:14px;height:14px;color:var(--accent-dp)}
.hero-badge .hb-t{font-size:calc(.9rem * var(--tscale));color:var(--ink-2);line-height:1}
.hero-badge .hb-t b{color:var(--ink);font-weight:700}
.hero-media figcaption{margin-top:1.5rem}
@media (min-width:900px){
  .hero-por{width:min(100%, 470px)}
  .hero-badge{left:-3%;bottom:6%}
}
@media (max-width:430px){
  .hero-badge{left:50%;transform:translateX(-50%);bottom:-1%;padding:.45rem .85rem}
  .hero-badge .hb-t{font-size:calc(.85rem * var(--tscale))}
  .hero-media figcaption{margin-top:2.2rem}
}
.hero-media figcaption strong{color:var(--ink);font-weight:600}
@media (min-width:900px){
  .hero-por{aspect-ratio:1/1.16}
}

/* a quiet credential strip under the portrait, so the first screen carries proof */
.hero-cred{
  display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin:.85rem 0 0;padding:0;list-style:none;
  font-size:calc(.92rem * var(--tscale));color:var(--ink-3);line-height:1.4
}
.hero-cred li{display:flex;align-items:center;gap:.4rem;white-space:nowrap}
.hero-cred li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent-dp);flex:none}

/* tall portrait crops from a wider source: keep the face, not the middle of the frame */
.fig-face img{object-position:50% 18%}

/* her logo artwork had a white plate baked in, which floated as a white box on the
   near-white header. The white is cut out of the file now, so it simply blends. */
.brand img{height:46px;width:auto;mix-blend-mode:normal}
@media (min-width:1140px){.brand img{height:50px}}
/* the footer mark is the stacked, reversed variant, so it needs more height than the
   horizontal header lockup */
.ftr .fbrand img{height:78px;width:auto;margin-bottom:1.1rem}