:root {
  --bg: #F6F4EF;
  --surface: #FDFCF9;
  --surface-2: #EEEAE2;
  --surface-raised: #FBFAF5;
  --ink: #182A2E;
  --ink-muted: #425054;
  --line: #DDD6CA;
  --primary: #0E6B63;
  --primary-ink: #F6FBFA;
  --primary-soft: #E3EFED;
  --accent: #B25A38;
  --good: #2F7A4E;
  --good-soft: #E2EFE4;
  --alert: #A8402E;
  --alert-soft: #F6E4DE;
  --focus: #0E6B63;
}
[data-theme="dark"] {
  --bg: #10181A;
  --surface: #172124;
  --surface-2: #1E2A2E;
  --surface-raised: #1A2529;
  --ink: #E9E6DF;
  --ink-muted: #9AA8AB;
  --line: #2A373B;
  --primary: #4FB3A6;
  --primary-ink: #0C1517;
  --primary-soft: #16302D;
  --accent: #D98E68;
  --good: #7FBE8E;
  --good-soft: #173322;
  --alert: #DB8B77;
  --alert-soft: #3D201A;
  --focus: #4FB3A6;
}

@font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/fraunces-latin-600.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:600;font-display:swap;src:url("fonts/fraunces-latin-600-italic.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/instrument-sans-latin-400-600.woff2") format("woff2")}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Instrument Sans",system-ui,sans-serif;font-size:1.125rem;line-height:1.7;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(52rem 36rem at 88% -6%,color-mix(in srgb,var(--primary) 8%,transparent),transparent 62%),radial-gradient(44rem 32rem at -12% 28%,color-mix(in srgb,var(--accent) 6%,transparent),transparent 60%),radial-gradient(56rem 42rem at 108% 82%,color-mix(in srgb,var(--good) 6%,transparent),transparent 62%)}
[data-theme="dark"] body::before{background:radial-gradient(52rem 36rem at 88% -6%,color-mix(in srgb,var(--primary) 13%,transparent),transparent 62%),radial-gradient(44rem 32rem at -12% 28%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 60%),radial-gradient(56rem 42rem at 108% 82%,color-mix(in srgb,var(--good) 8%,transparent),transparent 62%)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:.08em;text-underline-offset:.18em}
button,input,select,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
::selection{background:var(--primary);color:var(--primary-ink)}
h1,h2,h3,p{margin-top:0}
h1,h2{font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 72;font-weight:600;letter-spacing:-.03em;line-height:1.06}
h1{font-size:clamp(2.75rem,6.5vw,4.25rem);max-width:14ch;margin-bottom:28px}
h2{font-size:clamp(2rem,3.6vw,2.75rem);max-width:20ch;margin-bottom:24px}
h3{font-size:1.375rem;line-height:1.3;letter-spacing:-.015em}
h1 em,h2 em,.motto__line em{font-style:italic;color:var(--accent)}
p{max-width:68ch}
section[id]{scroll-margin-top:92px}
.container{width:min(100% - 40px,1240px);margin-inline:auto}
.section{padding-block:clamp(3.25rem,6vw,5.5rem)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;z-index:1000;top:12px;left:12px;display:inline-flex;min-height:44px;align-items:center;padding:10px 14px;background:var(--ink);color:var(--bg);border-radius:999px;transform:translateY(-160%)}
.skip-link:focus{transform:none}
.icon{width:1.2em;height:1.2em;flex:none}
.kicker{display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;padding:7px 15px 7px 12px;border-radius:999px;background:color-mix(in srgb,var(--surface) 66%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 85%,transparent);color:var(--ink);font-size:.8125rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.kicker::before{content:"";width:8px;height:8px;flex:none;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent)}

.button{display:inline-flex;min-height:52px;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border:0;border-radius:999px;background:var(--primary);color:var(--primary-ink);font-size:1.0625rem;font-weight:600;line-height:1.2;text-decoration:none;box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 10%,transparent),0 12px 28px -14px color-mix(in srgb,var(--primary) 60%,transparent);transition:background-color 200ms ease,color 200ms ease,transform 200ms ease,box-shadow 200ms ease}
.button:hover{background:color-mix(in srgb,var(--primary) 88%,var(--ink));transform:translateY(-2px);box-shadow:0 2px 4px color-mix(in srgb,var(--ink) 10%,transparent),0 18px 38px -14px color-mix(in srgb,var(--primary) 65%,transparent)}
.button .icon{transition:transform 200ms ease}
.button:hover .icon{transform:translateX(2px)}
.button--outline{background:transparent;color:var(--primary);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--primary) 55%,transparent)}
.button--outline:hover{background:var(--primary-soft);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--primary)}
.text-link{display:inline-flex;min-height:44px;align-items:center;gap:8px;color:var(--primary);font-size:1.0625rem;font-weight:600;text-decoration:none}
.text-link .icon{transition:transform 200ms ease}
.text-link:hover .icon{transform:translateX(3px)}
.icon-button{display:inline-grid;width:46px;height:46px;padding:0;place-items:center;border:0;border-radius:999px;background:color-mix(in srgb,var(--surface) 80%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 90%,transparent);color:var(--ink);cursor:pointer;transition:background-color 200ms ease}
.icon-button:hover{background:var(--surface-2)}

.site-header{position:sticky;z-index:50;top:0;border-bottom:1px solid transparent;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:border-color 300ms ease,box-shadow 300ms ease}
.site-header.is-scrolled{border-bottom-color:color-mix(in srgb,var(--line) 65%,transparent);box-shadow:0 14px 34px -26px color-mix(in srgb,var(--ink) 45%,transparent)}
.header-inner{display:grid;grid-template-columns:auto 1fr auto;min-height:84px;align-items:center;gap:32px}
.wordmark{display:inline-flex;min-height:44px;align-items:center;text-decoration:none}
.lockup{display:inline-flex;align-items:center}
.lockup img{width:auto;height:62px}
.lockup--paper{display:none}
[data-theme="dark"] .lockup--ink{display:none}
[data-theme="dark"] .lockup--paper{display:block}
/* Footer ™ lockup renders two baked sizes; show the larger-™ desktop one, hide the
   phone one. The ≤760px block below flips this (phone renders the logo bigger). */
.lockup__size{display:inline-flex;align-items:center}
.lockup__size--sm{display:none}
.site-nav{display:flex;align-items:center;justify-content:center;gap:26px}
.site-nav>a,.site-footer nav a{display:inline-flex;min-height:44px;align-items:center;color:var(--ink-muted);font-size:1rem;font-weight:500;text-decoration:none;transition:color 200ms ease}
.site-nav>a:hover,.site-footer nav a:hover{color:var(--ink)}
.site-nav>a{position:relative}
.site-nav>a::after{content:"";position:absolute;right:2px;bottom:7px;left:2px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform 260ms cubic-bezier(.22,1,.36,1)}
.site-nav>a:hover::after,.site-nav>a:focus-visible::after{transform:scaleX(1)}
/* Mobile drawer + scrim are body-level and inert on desktop; the fixed panel
   itself lives in the max-width:1000px block. */
.nav-drawer,.nav-scrim{display:none}
html.nav-open{overflow:hidden}
.header-actions{display:flex;align-items:center;gap:12px}
.header-cta{min-height:46px;padding:10px 20px;font-size:1rem}
.menu-toggle{display:none}
.theme-toggle__sun,.theme-toggle__moon{align-items:center;justify-content:center}
.theme-toggle__sun{display:inline-flex}
.theme-toggle__moon{display:none}
[data-theme="dark"] .theme-toggle__sun{display:none}
[data-theme="dark"] .theme-toggle__moon{display:inline-flex}

.hero{padding-block:clamp(2.5rem,5vw,4.25rem) clamp(2.75rem,5vw,4.5rem)}
.hero__layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(430px,1.06fr);align-items:center;gap:clamp(40px,6vw,92px)}
.hero h1{font-size:clamp(2.2rem,5vw,3.1rem);max-width:24ch;margin-bottom:24px;text-wrap:balance}
.hero__lead{display:block;margin-bottom:.35em}
.hero__copy>p:not(.kicker){max-width:52ch;margin-bottom:36px;color:var(--ink-muted);font-size:clamp(1.125rem,1.7vw,1.3125rem)}
.hero__actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:36px}
.chip-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chip-list li{padding:7px 14px;border-radius:999px;background:color-mix(in srgb,var(--surface) 72%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 80%,transparent);color:var(--ink);font-size:.9375rem;font-weight:500;line-height:1.3}
.hero__evidence{position:relative;display:block;min-width:0;padding:18px;border-radius:26px;background:color-mix(in srgb,var(--surface) 94%,transparent);text-decoration:none;box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 7%,transparent),0 28px 70px -26px color-mix(in srgb,var(--ink) 32%,transparent);transition:transform 240ms ease,box-shadow 240ms ease}
.hero__evidence::before{content:"";position:absolute;inset:18px -14px -14px 18px;border-right:1.5px dashed color-mix(in srgb,var(--accent) 50%,transparent);border-bottom:1.5px dashed color-mix(in srgb,var(--accent) 50%,transparent);border-radius:26px;pointer-events:none}
.hero__evidence:hover{transform:translateY(-4px);box-shadow:0 2px 4px color-mix(in srgb,var(--ink) 7%,transparent),0 36px 84px -28px color-mix(in srgb,var(--ink) 38%,transparent)}
.hero__evidence-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hero__evidence>p{margin:16px 4px 0;color:var(--ink-muted);font-size:.9375rem;line-height:1.5}
.hero__evidence>p strong{color:var(--ink)}
.hero__evidence .icon{vertical-align:-3px;color:var(--primary)}
.hero__evidence .evidence__stage{left:8px;bottom:8px;padding:3px 10px;font-size:.625rem}

.hero__stats-wrap{margin-top:clamp(2.75rem,5vw,4.5rem)}
.hero__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px);margin:0;padding:0;list-style:none}
.hero__stat{display:flex;align-items:center;gap:18px;padding:22px 26px;border-radius:18px;background:color-mix(in srgb,var(--surface) 78%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 72%,transparent),0 22px 48px -34px color-mix(in srgb,var(--ink) 45%,transparent);transition:transform 260ms cubic-bezier(.22,1,.36,1),box-shadow 260ms ease}
.hero__stat:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 88%,transparent),0 30px 62px -34px color-mix(in srgb,var(--ink) 52%,transparent)}
.hero__stat-icon{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.hero__stat-icon .icon{width:21px;height:21px}
.hero__stat-body{display:flex;flex-direction:column;gap:3px;min-width:0;padding-left:18px;border-left:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.hero__stat-value{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:clamp(1.85rem,2.7vw,2.4rem);line-height:1;letter-spacing:-.015em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.hero__stat-label{color:var(--ink-muted);font-size:.9375rem;font-weight:500;line-height:1.3}

.evidence{position:relative;margin:0;min-width:0}
.evidence__image{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:16px;background:var(--surface-2);isolation:isolate}
.evidence__image>img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;transition:transform 500ms cubic-bezier(.22,1,.36,1)}
.evidence:hover .evidence__image>img{transform:scale(1.03)}
.evidence__fill{position:absolute;z-index:0;inset:0;overflow:hidden}
.evidence__fill img{width:100%;height:100%;object-fit:cover;filter:blur(18px);opacity:.5;transform:scale(1.12)}
.evidence__stage{position:absolute;left:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:color-mix(in srgb,var(--surface) 84%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 2px 10px color-mix(in srgb,var(--ink) 20%,transparent);color:var(--ink);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.evidence__stage::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink-muted)}
.evidence[data-stage="before"] .evidence__stage::before{background:var(--alert)}
.evidence[data-stage="during"] .evidence__stage::before{background:var(--accent)}
.evidence[data-stage="after"] .evidence__stage::before{background:var(--good)}

.recoveries,.approach,.conditions,.about{border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.section-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.85fr);gap:48px;align-items:end;margin-bottom:clamp(28px,4vw,48px)}
.section-heading h2{margin-bottom:0}
.section-heading>p{margin-bottom:4px;color:var(--ink-muted)}
.journey__intro{margin-bottom:32px}
.journey__intro h3{max-width:30ch;font-family:"Fraunces",Georgia,serif;font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.02em}
.story-meta{display:flex;flex-wrap:wrap;gap:4px 10px;margin:0;color:var(--ink-muted);font-size:.9375rem}
.story-meta strong{color:var(--ink)}
.journey__stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.6vw,32px);margin-bottom:32px}
.journey .evidence__image{border-radius:20px;box-shadow:0 20px 50px -20px color-mix(in srgb,var(--ink) 32%,transparent)}
.case-note{position:relative;margin:0;max-width:72ch;color:var(--ink-muted);font-style:normal;font-size:1.0625rem;line-height:1.7}
.case-note__label{margin-right:12px;color:var(--accent);font-style:normal;font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.story-quote{position:relative;margin:28px 0 0;padding-left:36px;font-family:"Fraunces",Georgia,serif;font-size:1.25rem;font-weight:600;line-height:1.5}
.story-quote::before{content:"\201C";position:absolute;top:-4px;left:0;color:var(--accent);font-size:2.4rem;line-height:1}
.pair-story-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,44px);margin-top:clamp(48px,7vw,80px)}
.pair-story{display:flex;min-width:0;flex-direction:column}
.pair-story__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:22px}
.pair-story .evidence__image{box-shadow:0 16px 40px -18px color-mix(in srgb,var(--ink) 30%,transparent)}
.pair-story h3{margin-bottom:8px;font-size:1.1875rem}
.pair-story .story-meta{margin-bottom:16px}
.pair-story .case-note{margin-top:auto;font-size:.9375rem;line-height:1.65}
/* Expandable recoveries — collapsed shows the first three non-featured cards and
   a "View more" toggle animates the rest open (src/site.js). The resting collapsed
   state hides the extras with display:none so it survives reflow and late image
   loads; site.js only measures heights during the max-height transition. */
.pair-story-row--collapsible{transition:max-height 460ms cubic-bezier(.22,1,.36,1)}
html.js .pair-story-row--collapsible.is-collapsed .pair-story:nth-child(n+4){display:none}
.recoveries__more{display:flex;justify-content:center;margin-top:clamp(30px,4.5vw,46px);margin-bottom:clamp(-2.25rem,-2.5vw,-1.5rem)}
@media(max-width:760px){.recoveries__more{margin-bottom:0}}
html:not(.js) .recoveries__more{display:none}
.recoveries__more-btn:hover .icon{transform:none}
.recoveries__more-btn[aria-expanded="true"] .icon,
.recoveries__more-btn[aria-expanded="true"]:hover .icon{transform:rotate(180deg)}
.quote-story-grid{columns:3;column-gap:24px;margin-top:48px}
.quote-story{break-inside:avoid;margin:0 0 24px;padding:24px 0 30px;border-top:1px solid color-mix(in srgb,var(--line) 80%,transparent)}
.quote-story blockquote{margin:0 0 20px;color:var(--ink);font-family:"Fraunces",Georgia,serif;font-size:1.1875rem;font-weight:600;line-height:1.55}
.quote-story blockquote::before{content:"\201C";display:block;margin-bottom:2px;color:var(--accent);font-family:"Fraunces",Georgia,serif;font-size:2.4rem;line-height:.8}
.quote-story figcaption{display:flex;flex-direction:column;color:var(--ink-muted);font-size:.9375rem;line-height:1.5}
.quote-story figcaption strong{margin-bottom:2px;color:var(--ink);font-size:1rem}

.pathway{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(32px,4vw,52px);margin:0;padding:0;list-style:none}
.pathway li{min-width:0}
.pathway>li>span{display:flex;align-items:center;gap:16px;margin-bottom:18px;color:var(--accent);font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:2rem;font-weight:600;line-height:1}
.pathway>li>span::after{content:"";flex:1;height:1px;background:color-mix(in srgb,var(--line) 90%,transparent)}
.pathway h3{margin-bottom:10px;font-size:1.1875rem}
.pathway p{margin:0;color:var(--ink-muted);font-size:.9375rem;line-height:1.6}
.motto{margin-top:clamp(56px,8vw,96px);text-align:center}
.motto::before{content:"";display:block;width:44px;height:2px;margin:0 auto 28px;border-radius:2px;background:var(--accent);opacity:.85}
.motto__line{margin:0 auto 18px;max-width:24ch;color:var(--ink);font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:clamp(1.75rem,3.6vw,2.625rem);font-weight:600;letter-spacing:-.02em;line-height:1.3}
.motto>p:last-child{margin:0 auto;max-width:52ch;color:var(--ink-muted)}

.condition-tracks{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(40px,6vw,88px)}
.condition-track h3{margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid color-mix(in srgb,var(--line) 80%,transparent);font-family:"Fraunces",Georgia,serif;font-size:clamp(1.375rem,2.4vw,1.75rem);letter-spacing:-.02em}
.condition-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 28px;margin:0;padding:0;list-style:none}
.condition-track:last-child .condition-list{grid-template-columns:1fr}
.condition-list li{display:flex;min-height:48px;align-items:center;gap:12px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);font-size:1.0625rem;font-weight:500}
.condition-list .icon{color:var(--good)}
.watch-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 44px;margin:0 0 clamp(52px,8vw,88px);padding:0;list-style:none}
.watch-list li{display:flex;min-height:54px;align-items:center;gap:15px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);color:var(--ink);font-size:1.0625rem;font-weight:500;line-height:1.35}
.watch-list li::before{content:"";flex:none;width:9px;height:9px;border-radius:2px;transform:rotate(45deg);background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)}
.watch-note{margin:0;text-align:center}
.watch-note::before{content:"";display:block;width:44px;height:2px;margin:0 auto 24px;border-radius:2px;background:var(--accent);opacity:.85}
.watch-note p{margin:0 auto;max-width:26ch;color:var(--ink);font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:clamp(1.5rem,3vw,2.375rem);font-weight:600;letter-spacing:-.02em;line-height:1.3}
.watch-note em{color:var(--accent)}
.condition-films{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(32px,5vw,80px);margin:0 0 clamp(30px,4.5vw,48px)}
.condition-case{margin:0;max-width:42ch}
.condition-case__kicker{margin:0 0 14px;font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.condition-case__quote{margin:0;font-size:clamp(1.0625rem,1.3vw,1.1875rem);line-height:1.55;color:var(--ink)}
.condition-case__stats{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.condition-case__stats li{padding:5px 12px;border-radius:999px;background:color-mix(in srgb,var(--primary) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 22%,transparent);color:var(--ink);font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums}
.condition-films__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,18px);width:min(54vw,620px);margin:0;padding:0;list-style:none;justify-self:end;align-items:start}
.condition-film-item{margin:0}
.condition-film{display:block;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.condition-film__frame{position:relative;display:block;aspect-ratio:3/4;border-radius:16px;overflow:hidden;isolation:isolate;background:color-mix(in srgb,var(--ink) 8%,transparent);box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 8%,transparent),0 20px 46px -24px color-mix(in srgb,var(--ink) 40%,transparent);transition:transform 220ms ease,box-shadow 220ms ease}
/* Portrait clip contained at true 9:16; the widened box is filled left/right by a
   blurred cover copy (the recovery-photo pillarbox recipe) so the pair reads
   fuller and closes the gap to the case note. Reverted to 9:16 cover on phones. */
.condition-film__fill{position:absolute;z-index:0;inset:0;overflow:hidden}
.condition-film__fill img{width:100%;height:100%;object-fit:cover;filter:blur(18px);opacity:.5;transform:scale(1.12)}
.condition-film__poster{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.condition-film__play{position:absolute;z-index:2;left:50%;top:50%;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:color-mix(in srgb,#0b1f2a 42%,transparent);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);color:#fff;box-shadow:inset 0 0 0 1px rgb(255 255 255/.35);transform:translate(-50%,-50%);transition:transform 200ms ease,background 200ms ease}
.condition-film__play svg{width:24px;height:24px;margin-left:2px}
/* Video is contained at 9:16 inside the 3:4 frame, so each blurred pillar is
   12.5% of the frame width. Offset the pill by that pillar so it hugs the true
   video edge, not the blur. Phones (9:16 cover, no pillar) reset this to 8px. */
.condition-film__dur{position:absolute;z-index:2;right:calc(12.5% + 8px);bottom:8px;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,#0b1f2a 58%,transparent);color:#fff;font-size:.6875rem;font-weight:600;font-variant-numeric:tabular-nums}
.condition-film__cap{display:block;margin-top:10px;color:var(--ink-muted);font-size:.8125rem;letter-spacing:.01em}
/* Default hidden here (before the media queries) so the max-width:760px rule that
   reveals it wins on source order; desktop shows the full case note beside the clips. */
.condition-film__more{display:none}
.condition-film:hover .condition-film__frame,.condition-film:focus-visible .condition-film__frame{transform:translateY(-3px);box-shadow:0 2px 4px color-mix(in srgb,var(--ink) 9%,transparent),0 28px 60px -26px color-mix(in srgb,var(--ink) 48%,transparent)}
.condition-film:hover .condition-film__play,.condition-film:focus-visible .condition-film__play{background:var(--primary);transform:translate(-50%,-50%) scale(1.08)}
.condition-film:focus-visible{outline:none}
.condition-film:focus-visible .condition-film__frame{outline:2px solid var(--primary);outline-offset:3px}

/* Eligibility notice — the one section that says no. It borrows the page's own
   vocabulary: the stock .kicker (no colour overrides — every kicker on the site
   is neutral border, ink label, --accent dot), the stock .section-heading
   two-column rhythm, and .about__copy's type. The single deliberate departure
   is the --alert rule down the copy, which is the only thing marking this as a
   caution. Sits under #conditions and vanishes when the copy is cleared. */
.eligibility{border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.eligibility .section-heading{margin-bottom:0;align-items:start}
.eligibility h2{max-width:16ch;margin-bottom:0}
.eligibility__body{padding-left:clamp(20px,2vw,28px);border-left:2px solid color-mix(in srgb,var(--alert) 42%,transparent)}
/* Body copy mirrors .about__copy exactly — same size, same muted tone with the
   opening paragraph in full ink, and the natural paragraph rhythm rather than a
   tightened one. Keep the two in step if either changes. */
.eligibility__body p{color:var(--ink-muted);font-size:1.1875rem}
.eligibility__body p:first-child{color:var(--ink)}
.eligibility__body p:last-child{margin-bottom:0}


.act__panel{--panel-ink:var(--bg);--panel-muted:color-mix(in srgb,var(--bg) 78%,transparent);--panel-btn-bg:var(--bg);--panel-btn-ink:var(--ink);position:relative;overflow:hidden;border-radius:32px;padding:clamp(36px,6vw,72px);background:color-mix(in srgb,var(--ink) 94%,var(--primary));color:var(--panel-ink);box-shadow:0 36px 90px -28px color-mix(in srgb,var(--ink) 50%,transparent)}
[data-theme="dark"] .act__panel{--panel-ink:var(--ink);--panel-muted:var(--ink-muted);--panel-btn-bg:var(--primary);--panel-btn-ink:var(--primary-ink);background:color-mix(in srgb,var(--surface) 88%,var(--primary));box-shadow:0 36px 90px -28px rgb(0 0 0/.55)}
.act__panel::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(38rem 26rem at 86% -22%,color-mix(in srgb,var(--primary) 30%,transparent),transparent 64%),radial-gradient(30rem 24rem at -8% 118%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%)}
.act__layout{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);gap:clamp(40px,7vw,96px);align-items:center}
.act h2{color:var(--panel-ink)}
.act h2 em{color:color-mix(in srgb,var(--accent) 72%,var(--panel-ink))}
.act p{margin-bottom:0;color:var(--panel-muted)}
.act__actions{display:flex;flex-direction:column;gap:14px}
.button--inverse{background:var(--panel-btn-bg);color:var(--panel-btn-ink);box-shadow:0 14px 34px -14px rgb(0 0 0/.5)}
.button--inverse:hover{background:color-mix(in srgb,var(--panel-btn-bg) 92%,var(--panel-btn-ink));transform:translateY(-2px)}
.button--inverse-outline{background:transparent;color:var(--panel-ink);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--panel-ink) 45%,transparent)}
.button--inverse-outline:hover{background:color-mix(in srgb,var(--panel-ink) 10%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--panel-ink) 70%,transparent)}

.fraternity__layout{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);gap:clamp(48px,8vw,120px);align-items:start}
.fraternity__intro h2{margin-bottom:0}
.fraternity p:not(.kicker){color:var(--ink-muted);font-size:1.125rem}

.about__layout{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);gap:clamp(48px,10vw,152px)}
.about__title{position:relative}
.about__title h2{position:sticky;top:128px;margin-bottom:12px}
.about__location{color:var(--accent);font-size:.9375rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em}
.about__copy p{color:var(--ink-muted);font-size:1.1875rem}
.about__copy p:first-child{color:var(--ink)}
.about__copy p:last-child{margin-bottom:0}

.contact{padding-block:clamp(3.25rem,6vw,5.5rem);border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.contact__layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.85fr);gap:clamp(48px,9vw,136px);align-items:start}
.contact__intro p{color:var(--ink-muted)}
/* The first row's own 20px top padding pushed its WHATSAPP label that far below
   the "Start with your case" cap line, so the two columns read as misaligned.
   Lift the whole rail by that padding to put the first label on the heading.
   Reset it when the layout stacks (≤1000) or the rail rides up into the intro. */
.contact__details{margin-top:-20px;border-top:1px solid color-mix(in srgb,var(--line) 80%,transparent)}
.contact-row{display:grid;grid-template-columns:28px 1fr;gap:16px;align-items:center;padding:20px 10px;border-bottom:1px solid color-mix(in srgb,var(--line) 80%,transparent);border-radius:0;color:var(--ink);text-decoration:none;transition:background-color 200ms ease,border-radius 200ms ease}
.contact-row:hover{background:color-mix(in srgb,var(--surface-2) 70%,transparent);border-radius:14px}
.contact-row--static{cursor:default}
.contact-row--static:hover{background:none;border-radius:0}
.contact-row .icon{width:24px;height:24px;color:var(--primary)}
.contact-row span{display:flex;flex-direction:column;font-weight:600}
.contact-row small{color:var(--ink-muted);font-size:.8125rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em}

.site-footer{padding:56px 0 30px;border-top:1px solid color-mix(in srgb,var(--line) 65%,transparent)}
.footer__top{display:grid;grid-template-columns:auto 1fr auto;gap:48px;align-items:center;padding-bottom:40px}
.footer-brand{display:inline-flex;align-items:center}
.footer-brand .lockup img{height:54px}
.footer__top>p{margin:0;color:var(--ink-muted);font-size:1rem}
.site-footer nav{display:flex;gap:24px}
.footer__bottom{display:flex;justify-content:space-between;gap:32px;padding-top:24px;border-top:1px solid color-mix(in srgb,var(--line) 65%,transparent);color:var(--ink-muted);font-size:.875rem}
.footer__bottom p{margin:0}
.footer__bottom p:first-child{max-width:70ch}
.footer__bottom p:last-child{white-space:nowrap}
.noscript{position:fixed;z-index:80;right:16px;bottom:16px;max-width:420px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-size:.9375rem}

:where(.js) [data-reveal]{opacity:0;transform:translateY(16px);filter:blur(6px)}
:where(.js) [data-reveal].is-visible{opacity:1;transform:none;filter:none;transition:opacity 520ms cubic-bezier(.22,1,.36,1) calc(var(--reveal-order,0)*70ms),transform 520ms cubic-bezier(.22,1,.36,1) calc(var(--reveal-order,0)*70ms),filter 520ms cubic-bezier(.22,1,.36,1) calc(var(--reveal-order,0)*70ms)}

/* Desktop: the hero evidence card sits larger and lifts off the page. */
@media (min-width:1001px){
  .hero__evidence{transform:scale(1.05);transform-origin:center right;box-shadow:0 2px 6px color-mix(in srgb,var(--ink) 8%,transparent),0 46px 100px -30px color-mix(in srgb,var(--ink) 42%,transparent)}
  .hero__evidence:hover{transform:scale(1.075) translateY(-6px);box-shadow:0 3px 8px color-mix(in srgb,var(--ink) 9%,transparent),0 56px 116px -32px color-mix(in srgb,var(--ink) 48%,transparent)}
  :where(.js) .hero__evidence[data-reveal]{transform:scale(.99) translateY(18px)}
  :where(.js) .hero__evidence[data-reveal].is-visible{transform:scale(1.05);transform-origin:center right}
}

@media (max-width:1000px){
  .header-inner{grid-template-columns:auto 1fr auto;gap:16px}
  /* Hamburger sits in the far-right corner (where the drawer's X close lands),
     theme toggle moves just left of it — so open and close share one target.
     grid-row:1 is required: reversing the columns makes sparse auto-placement
     backtrack, which it won't, so header-actions would otherwise fall to row 2. */
  .menu-toggle{display:grid;grid-column:3;grid-row:1;justify-self:end}
  .site-nav{display:none}
  /* Right-anchored slide-in drawer (MindStudio-style): dim scrim + panel that
     transforms in on a smooth curve; closes on scrim/X/Esc/link-tap (site.js).
     z above the chatbot (120); body-level so the viewport is its containing box. */
  .nav-scrim{display:block;position:fixed;inset:0;z-index:150;background:color-mix(in srgb,#0b1f2a 52%,transparent);opacity:0;visibility:hidden;transition:opacity 300ms ease,visibility 0s linear 300ms}
  .nav-scrim.is-open{opacity:1;visibility:visible;transition:opacity 300ms ease}
  .nav-drawer{display:flex;position:fixed;top:0;right:0;bottom:auto;left:auto;height:100dvh;z-index:160;flex-direction:column;align-items:stretch;width:min(84vw,360px);max-width:100%;background:var(--surface);box-shadow:-30px 0 70px -30px color-mix(in srgb,#0b1f2a 60%,transparent);transform:translateX(100%);transition:transform 360ms cubic-bezier(.22,1,.36,1);overflow-y:auto;overscroll-behavior:contain}
  .nav-drawer.is-open{transform:translateX(0)}
  .nav-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px 14px 22px;border-bottom:1px solid color-mix(in srgb,var(--line) 78%,transparent)}
  .nav-drawer__brand{display:inline-flex;align-items:center}
  .nav-drawer__brand .lockup img{height:38px}
  .nav-drawer__close{width:44px;height:44px;background:transparent;box-shadow:none}
  .nav-drawer__close:hover{background:var(--surface-2)}
  .nav-drawer__links{display:flex;flex-direction:column}
  .nav-drawer__links a{display:flex;align-items:center;padding:19px 24px;color:var(--ink);font-size:1.125rem;font-weight:500;text-decoration:none;transition:background-color 180ms ease}
  .nav-drawer__links a+a{border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
  .nav-drawer__links a:hover{background:var(--surface-2)}
  .nav-drawer__foot{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding:22px 24px calc(22px + env(safe-area-inset-bottom,0px));border-top:1px solid color-mix(in srgb,var(--line) 78%,transparent)}
  .nav-drawer__cta{display:inline-flex;justify-content:center;min-height:52px;font-size:1.05rem}
  .header-actions{grid-column:2;grid-row:1;justify-self:end}
  .hero__layout{grid-template-columns:1fr;gap:44px}
  .hero__evidence{max-width:600px}
  .pathway{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
  .pair-story-row{grid-template-columns:1fr;gap:36px}
  .pair-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:0 28px;align-items:start}
  .pair-story__pair{grid-row:1/5;margin-bottom:0}
  .pair-story .case-note{margin-top:8px}
  .quote-story-grid{columns:2}
  .condition-tracks{grid-template-columns:1fr;gap:48px}
  .act__layout{grid-template-columns:1fr;gap:32px}
  .act__actions{flex-direction:row;flex-wrap:wrap}
  .fraternity__layout{grid-template-columns:1fr;gap:24px}
}

@media (max-width:760px){
  html{scroll-padding-top:80px}
  .container{width:min(100% - 40px,1240px)}
  .section,.contact{padding-block:clamp(2.5rem,7vw,3.25rem)}
  .header-inner{min-height:72px}
  .lockup img{height:58px}
  .header-cta{display:none}
  /* The written case study is desktop-only; on phones the two clips sit side by
     side and the featured clip's caption carries its headline. */
  .condition-films{grid-template-columns:1fr;justify-content:stretch;gap:24px}
  .condition-case{display:none}
  .condition-films__grid{grid-template-columns:1fr 1fr;width:100%;gap:12px}
  /* Phones keep the original tight 9:16 cover clips (no blurred pillarbox). */
  .condition-film__frame{aspect-ratio:9/16}
  .condition-film__poster{object-fit:cover}
  .condition-film__fill{display:none}
  .condition-film__dur{right:8px}
  /* Inline link folded into the featured clip's caption (same size as the caption,
     accent-coloured, underlined, with a trailing arrow). Opens the case-note popup
     that replaces the figure hidden at this breakpoint. */
  .condition-film__more{display:inline;padding:0;border:0;background:none;font:inherit;color:var(--accent);white-space:nowrap;cursor:pointer}
  .condition-film__more span{text-decoration:underline;text-underline-offset:2px}
  .condition-film__more .icon{width:.85em;height:.85em;margin-left:1px;vertical-align:-.12em;color:var(--accent)}
  .hero{padding-top:40px}
  .hero__lead{margin-bottom:.3em}
  .hero__actions .button{flex:1 1 auto}
  /* Keep the counter as one tidy row on phones (Praan-style), just compact. */
  .hero__stats-wrap{margin-top:2rem}
  .hero__stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .hero__stat{flex-direction:column;align-items:flex-start;gap:9px;padding:15px 13px;border-radius:15px}
  .hero__stat-icon{width:34px;height:34px}
  .hero__stat-icon .icon{width:17px;height:17px}
  .hero__stat-body{padding-left:0;border-left:0;gap:2px}
  .hero__stat-value{font-size:clamp(1.35rem,6.4vw,1.6rem)}
  .hero__stat-label{font-size:.8125rem;line-height:1.25}
  .hero__evidence::before{inset:18px -10px -10px 18px}
  .section-heading{grid-template-columns:1fr;gap:16px;margin-bottom:40px}
  /* Optical correction, phones only. Solutions is the one section whose heading has
     no description paragraph, so its lone 32px h2 sits above the gap with nothing to
     anchor it, and its content is a padded card rather than bare text. At the shared
     40px it measured identical to every other section but read airier; 28px matches
     it by eye. Deliberately not equal on paper — see the card's own inset. */
  .solutions .section-heading{margin-bottom:28px}
  .journey__stages{grid-template-columns:1fr;gap:24px}
  /* On phones the featured (journey) case note reads at the same size as the
     regular pair-story case notes — match .pair-story .case-note (.9375rem/1.65). */
  .journey .case-note{font-size:.9375rem;line-height:1.65}
  .pair-story{display:flex;flex-direction:column;align-items:stretch}
  .pair-story__pair{margin-bottom:22px}
  /* "What to expect": on phones the four steps become an editorial timeline —
     a vertical spine threads the serif step numbers so they read as one ordered
     journey (desktop keeps the 4-across grid; no orange-disc/gray-card look). */
  .pathway{grid-template-columns:1fr;gap:0}
  .pathway>li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:18px;align-items:start;padding-bottom:28px}
  .pathway>li:last-child{padding-bottom:0}
  .pathway>li:not(:last-child)::before{content:"";position:absolute;left:21px;top:44px;bottom:-1px;width:2px;background:linear-gradient(color-mix(in srgb,var(--accent) 42%,transparent),color-mix(in srgb,var(--line) 82%,transparent));border-radius:2px}
  .pathway>li>span{display:grid;place-items:center;width:44px;height:44px;margin:0;font-size:1.3125rem;background:var(--bg);border-radius:50%;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 52%,transparent)}
  .pathway>li>span::after{display:none}
  .pathway>li>div{padding-top:8px}
  .condition-list{grid-template-columns:1fr}
  .watch-list{grid-template-columns:1fr}
  .quote-story-grid{columns:1}
  .about__layout,.contact__layout{grid-template-columns:1fr;gap:40px}
  .contact__details{margin-top:0}
  .about__title h2{position:static}
  .contact__layout{gap:28px}
  .act__panel{border-radius:24px;padding:32px 24px}
  .act__actions{flex-direction:column}
  .act__actions .button{width:100%}
  /* Tidy, Praan-style mobile footer: bigger mark, aligned link grid, calmer rhythm. */
  .site-footer{padding:44px 0 28px}
  .footer__top{grid-template-columns:1fr;gap:20px;padding-bottom:28px}
  .footer-brand .lockup img{height:64px}
  .lockup__size--lg{display:none}
  .lockup__size--sm{display:inline-flex}
  .footer__top>p{max-width:36ch;line-height:1.5}
  .site-footer nav{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px}
  .footer__bottom{align-items:flex-start;flex-direction:column;gap:14px}
  .footer__bottom p:last-child{white-space:normal}
}

@media (max-width:400px){
  .container{width:min(100% - 36px,1240px)}
  .header-inner{gap:8px}
  .lockup img{height:52px}
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__evidence{padding:12px}
  .hero__evidence-strip{gap:8px}
  .hero__stats{gap:8px}
  .hero__stat{padding:13px 11px;gap:8px}
  .hero__stat-icon{width:30px;height:30px}
  .hero__stat-icon .icon{width:15px;height:15px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none;filter:none}
}

/* ============================================================================
   MediVasc Assistant — floating conversational lead form (bottom-right, all viewports)
   JS-gated: hidden without JS so the page's own contact routes remain the path.
   ========================================================================== */
html:not(.js) .mvbot{display:none}
html.mvbot-locked{overflow:hidden}
.mvbot{--wa:#25d366;--wa-ink:#06351a;position:fixed;z-index:120;right:clamp(14px,3.5vw,26px);bottom:clamp(14px,3.5vw,26px);display:flex;flex-direction:column;align-items:flex-end;gap:14px;pointer-events:none;font-family:"Instrument Sans",system-ui,sans-serif}
.mvbot__launcher,.mvbot__panel,.mvbot__nudge{pointer-events:auto}

/* Launcher — the always-visible FAB */
.mvbot__launcher{position:relative;display:grid;place-items:center;width:60px;height:60px;padding:0;border:0;border-radius:50%;cursor:pointer;color:var(--primary-ink);background:var(--primary);opacity:0;transform:translateY(12px) scale(.8);box-shadow:0 10px 30px -8px color-mix(in srgb,var(--primary) 60%,transparent),0 4px 12px -3px color-mix(in srgb,var(--ink) 40%,transparent);transition:opacity .4s ease,transform .5s cubic-bezier(.22,1.3,.4,1),box-shadow .26s ease,background-color .2s ease}
.mvbot--ready .mvbot__launcher{opacity:1;transform:none}
.mvbot--ready .mvbot__launcher:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 16px 38px -8px color-mix(in srgb,var(--primary) 66%,transparent),0 6px 14px -3px color-mix(in srgb,var(--ink) 42%,transparent)}
.mvbot--ready .mvbot__launcher:active{transform:scale(.95)}
.mvbot__launcher-ico{grid-area:1/1;display:grid;place-items:center;transition:opacity .22s ease,transform .3s cubic-bezier(.22,1,.36,1)}
.mvbot__launcher-ico .icon{width:26px;height:26px}
.mvbot__launcher-ico--close{opacity:0;transform:rotate(-90deg) scale(.5)}
.mvbot[data-mvbot-state="open"] .mvbot__launcher-ico--chat{opacity:0;transform:rotate(90deg) scale(.5)}
.mvbot[data-mvbot-state="open"] .mvbot__launcher-ico--close{opacity:1;transform:none}
.mvbot__launcher-ping{position:absolute;top:11px;right:11px;width:13px;height:13px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2.5px var(--bg)}
.mvbot__launcher-ping::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);animation:mvbot-ping 2s cubic-bezier(0,0,.2,1) infinite}
.mvbot[data-mvbot-state="open"] .mvbot__launcher-ping,.mvbot--engaged .mvbot__launcher-ping{display:none}
@keyframes mvbot-ping{0%{transform:scale(1);opacity:.6}75%,100%{transform:scale(2.5);opacity:0}}

/* Panel — floats above the launcher, springs open from the corner */
.mvbot__panel{position:absolute;right:0;bottom:calc(100% + 14px);display:flex;flex-direction:column;width:min(392px,calc(100vw - 28px));height:min(608px,calc(100dvh - 150px));overflow:hidden;border-radius:22px;background:color-mix(in srgb,var(--surface) 97%,transparent);color:var(--ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 68%,transparent),0 2px 8px color-mix(in srgb,var(--ink) 10%,transparent),0 34px 74px -26px color-mix(in srgb,var(--ink) 48%,transparent);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);transform-origin:bottom right;opacity:0;visibility:hidden;transform:translateY(14px) scale(.94);transition:opacity .26s ease,transform .34s cubic-bezier(.22,1.28,.4,1),visibility .34s}
.mvbot[data-mvbot-state="open"] .mvbot__panel{opacity:1;visibility:visible;transform:none}

.mvbot__head{display:flex;align-items:center;gap:12px;padding:13px 12px 13px 15px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 16%,var(--surface)),color-mix(in srgb,var(--surface) 92%,transparent));border-bottom:1px solid color-mix(in srgb,var(--line) 66%,transparent)}
.mvbot__avatar{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:50%;overflow:hidden;background:var(--surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 82%,transparent)}
.mvbot__avatar img{width:100%;height:100%;object-fit:cover}
.mvbot__id{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.2}
.mvbot__name{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.0625rem;letter-spacing:-.01em;color:var(--ink)}
.mvbot__status{display:inline-flex;align-items:center;gap:6px;color:var(--ink-muted);font-size:.75rem;font-weight:500}
.mvbot__status-dot{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 60%,transparent);animation:mvbot-pulse 2.4s ease-out infinite}
@keyframes mvbot-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 55%,transparent)}70%{box-shadow:0 0 0 6px color-mix(in srgb,var(--good) 0%,transparent)}100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 0%,transparent)}}
.mvbot__close{margin-left:auto;display:grid;place-items:center;width:34px;height:34px;flex:none;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink-muted);cursor:pointer;transition:background-color .2s ease,color .2s ease}
.mvbot__close:hover{background:color-mix(in srgb,var(--surface-2) 80%,transparent);color:var(--ink)}
.mvbot__close .icon{width:18px;height:18px}

/* Log — the scrolling transcript */
.mvbot__log{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:11px;padding:18px 15px 6px}
.mvbot__log::-webkit-scrollbar{width:7px}
.mvbot__log::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 16%,transparent);border-radius:99px}
.mvbot__msg{display:flex;gap:9px;align-items:flex-end;max-width:100%;animation:mvbot-rise .34s cubic-bezier(.22,1,.36,1) both}
.mvbot__msg--bot{align-self:flex-start;max-width:90%}
.mvbot__msg--user{align-self:flex-end;flex-direction:row-reverse;max-width:82%}
.mvbot__msg-avatar{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;overflow:hidden;background:var(--surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 82%,transparent)}
.mvbot__msg-avatar img{width:100%;height:100%;object-fit:cover}
.mvbot__bubble{padding:10px 14px;border-radius:16px;font-size:.9375rem;line-height:1.5;overflow-wrap:break-word;word-break:break-word}
.mvbot__bubble strong{font-weight:600}
.mvbot__msg--bot .mvbot__bubble{background:var(--surface-2);color:var(--ink);border-bottom-left-radius:5px}
.mvbot__msg--user .mvbot__bubble{background:var(--primary);color:var(--primary-ink);border-bottom-right-radius:5px}
@keyframes mvbot-rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.mvbot__typing{display:inline-flex;align-items:center;gap:5px;padding:13px 14px}
.mvbot__typing span{width:7px;height:7px;border-radius:50%;background:var(--ink-muted);opacity:.45;animation:mvbot-blink 1.3s ease-in-out infinite}
.mvbot__typing span:nth-child(2){animation-delay:.18s}
.mvbot__typing span:nth-child(3){animation-delay:.36s}
@keyframes mvbot-blink{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:.95}}

/* Summary / request card with the WhatsApp CTA */
.mvbot__card{align-self:stretch;margin:4px 0 6px;padding:16px;border-radius:16px;background:var(--surface-raised);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 78%,transparent),0 16px 34px -20px color-mix(in srgb,var(--ink) 42%,transparent);animation:mvbot-rise .36s cubic-bezier(.22,1,.36,1) both}
.mvbot__card-title{display:flex;align-items:center;gap:8px;margin-bottom:13px;font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.0625rem;letter-spacing:-.01em;color:var(--ink)}
.mvbot__card-title .icon{width:18px;height:18px;color:var(--accent)}
.mvbot__summary{display:grid;gap:9px;margin:0 0 15px}
.mvbot__summary div{display:grid;grid-template-columns:74px 1fr;gap:12px;align-items:baseline}
.mvbot__summary dt{margin:0;color:var(--ink-muted);font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em}
.mvbot__summary dd{margin:0;color:var(--ink);font-size:.9375rem;font-weight:500;overflow-wrap:break-word}
.mvbot__cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:50px;padding:13px 20px;border-radius:14px;background:var(--wa);color:var(--wa-ink);font-size:1.0625rem;font-weight:700;text-decoration:none;box-shadow:0 12px 26px -12px color-mix(in srgb,var(--wa) 80%,transparent);transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.mvbot__cta:hover{background:#20c15c;transform:translateY(-2px);box-shadow:0 18px 34px -12px color-mix(in srgb,var(--wa) 85%,transparent)}
.mvbot__cta:active{transform:translateY(0)}
.mvbot__cta .icon{width:22px;height:22px}
.mvbot__restart{display:block;width:100%;margin-top:10px;padding:8px;border:0;border-radius:10px;background:transparent;color:var(--ink-muted);font-size:.875rem;font-weight:600;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.mvbot__restart:hover{background:color-mix(in srgb,var(--surface-2) 80%,transparent);color:var(--ink)}

/* Quick-reply chips (condition picks / skip) */
.mvbot__quick{display:flex;flex-wrap:wrap;gap:8px;padding:2px 15px 10px}
.mvbot__quick[hidden]{display:none}
.mvbot__chip{padding:8px 14px;border:0;border-radius:999px;background:color-mix(in srgb,var(--primary-soft) 70%,transparent);color:var(--primary);font-size:.875rem;font-weight:600;line-height:1.2;cursor:pointer;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 30%,transparent);transition:background-color .18s ease,transform .18s ease}
.mvbot__chip:hover{background:var(--primary-soft);transform:translateY(-1px)}
.mvbot__chip--ghost{background:transparent;color:var(--ink-muted);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 85%,transparent)}
.mvbot__chip--ghost:hover{background:color-mix(in srgb,var(--surface-2) 70%,transparent);color:var(--ink)}

/* Composer */
.mvbot__composer{display:flex;align-items:center;gap:8px;padding:11px 13px;border-top:1px solid color-mix(in srgb,var(--line) 66%,transparent)}
.mvbot__composer[hidden]{display:none}
.mvbot__input{flex:1;min-width:0;min-height:46px;padding:12px 16px;border:0;border-radius:23px;background:var(--surface-2);color:var(--ink);font-size:16px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 80%,transparent);transition:box-shadow .2s ease}
.mvbot__input::placeholder{color:var(--ink-muted);opacity:.9}
.mvbot__input:focus{outline:0;box-shadow:inset 0 0 0 1.6px var(--primary)}
.mvbot__input--shake{animation:mvbot-shake .4s ease}
@keyframes mvbot-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.mvbot__send{display:grid;place-items:center;width:46px;height:46px;flex:none;padding:0;border:0;border-radius:50%;background:var(--primary);color:var(--primary-ink);cursor:pointer;transition:transform .2s ease,opacity .2s ease,background-color .2s ease}
.mvbot__send:hover{transform:scale(1.07)}
.mvbot__send:disabled{opacity:.4;cursor:default;transform:none}
.mvbot__send .icon{width:20px;height:20px;transform:translateX(1px)}
.mvbot__legal{margin:0;padding:2px 16px 12px;color:var(--ink-muted);font-size:.6875rem;line-height:1.4;text-align:center}

/* First-visit nudge bubble */
.mvbot__nudge{position:absolute;right:2px;bottom:calc(100% + 14px);width:244px;max-width:244px;padding:13px 32px 13px 15px;border-radius:16px;border-bottom-right-radius:5px;background:var(--surface);color:var(--ink);font-size:.875rem;line-height:1.45;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 70%,transparent),0 18px 40px -18px color-mix(in srgb,var(--ink) 46%,transparent);opacity:0;transform:translateY(8px) scale(.96);transform-origin:bottom right;transition:opacity .3s ease,transform .34s cubic-bezier(.22,1.28,.4,1);pointer-events:none}
.mvbot__nudge[hidden]{display:none}
.mvbot--nudge .mvbot__nudge{opacity:1;transform:none;pointer-events:auto}
.mvbot[data-mvbot-state="open"] .mvbot__nudge{opacity:0;pointer-events:none}
.mvbot__nudge strong{color:var(--ink);font-weight:600}
.mvbot__nudge-x{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink-muted);cursor:pointer}
.mvbot__nudge-x:hover{background:color-mix(in srgb,var(--surface-2) 80%,transparent);color:var(--ink)}
.mvbot__nudge-x .icon{width:13px;height:13px}

/* Phones — the panel becomes a bottom sheet */
@media (max-width:560px){
  .mvbot{right:14px;left:14px;bottom:14px}
  /* Bottom sheet. When the iOS keyboard is up, JS sets --mvbot-kb (lift above
     the keyboard), --mvbot-h:auto + --mvbot-maxh (visible height) so the sheet
     HUGS its content — anchored to the bottom, capped at the visible area. A
     short chat sits compactly above the keyboard (no void); a long one fills
     and scrolls. All three fall back to the resting fixed-height sheet. */
  .mvbot__panel{position:fixed;right:0;left:0;top:auto;bottom:var(--mvbot-kb,0px);width:auto;height:var(--mvbot-h,min(90dvh,660px));max-height:var(--mvbot-maxh,min(90dvh,660px));border-radius:22px 22px 0 0;transform-origin:bottom center;transform:translateY(18px) scale(.98)}
  /* Few messages hug the bottom (just above the composer) rather than stranding
     under the header; margin collapses to 0 once the log overflows & scrolls. */
  .mvbot__log>:first-child{margin-top:auto}
  .mvbot[data-mvbot-state="open"] .mvbot__panel{transform:none}
  /* The launcher is the last DOM node (paints over the fixed sheet) and its
     close-X would collide with the composer's send button — hide it while the
     sheet is open; the header close button takes over. */
  .mvbot[data-mvbot-state="open"] .mvbot__launcher{opacity:0;transform:translateY(10px) scale(.6);pointer-events:none}
  .mvbot__nudge{width:min(74vw,244px);max-width:min(74vw,244px)}
}

/* Content-copy friction (owner directive): a light deterrent against casually
   selecting/copying page text or saving images. NOT enforceable — screenshots,
   reader mode, and View Source all defeat it. Contact details, form fields, and
   the chatbot stay fully selectable so patients can still copy phone/email and
   type. */
body{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}
img{-webkit-user-drag:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.contact-row,.contact-row *,input,textarea,select,[contenteditable],.mvbot__input,.mvbot__log,.mvbot__log *{-webkit-user-select:text;-moz-user-select:text;user-select:text;-webkit-touch-callout:default}

/* ============================================================================
   Condition solutions + patient voices (post #recoveries)
   Two carousel cards in one row, then a one-row carousel of message screenshots.
   ============================================================================ */
.solutions,.voices{border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent)}

.solution-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
.solution-card{display:flex;flex-direction:column;min-width:0;padding:clamp(14px,1.8vw,20px);padding-bottom:clamp(24px,2.6vw,32px);border-radius:24px;background:color-mix(in srgb,var(--surface) 66%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 68%,transparent),0 30px 66px -40px color-mix(in srgb,var(--ink) 46%,transparent)}
/* The title sits optically centred between the card's top edge and the photo: the
   space above it is the card's own inset plus this 8px, so the margin below has to
   track the inset as it scales, not sit at a fixed value. */
.solution-card__title{margin:0 0 calc(clamp(14px,1.8vw,20px) + 8px);padding:8px 8px 0;font-family:"Fraunces",Georgia,serif;font-size:clamp(1.375rem,2.2vw,1.75rem);letter-spacing:-.02em}
.solution-card__body{display:flex;flex-direction:column;padding:18px 8px 4px}
.solution-card__p{margin:0 0 14px;color:var(--ink-muted);font-size:1rem;line-height:1.65}
.solution-card__p--warn{position:relative;padding:14px 16px 14px 20px;border-radius:14px;background:color-mix(in srgb,var(--alert) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--alert) 26%,transparent);color:var(--ink)}
.solution-card__p--warn::before{content:"";position:absolute;top:14px;bottom:14px;left:0;width:3px;border-radius:0 3px 3px 0;background:var(--alert)}
.solution-card__cta{align-self:flex-start;margin:auto 0 0 8px}
/* .button's lift is a --primary-tinted spread. In dark mode --primary is a bright
   mint, so inside the solution card's inset border that spread reads as a halo
   bleeding into the card edge rather than as depth — the hero's button sits on open
   background where the same glow reads as ambient light, hence scoped, not global.
   Light mode keeps it: deep teal on a near-white card is a real shadow. */
[data-theme="dark"] .solution-card__cta{box-shadow:0 1px 2px color-mix(in srgb,#000 24%,transparent),0 8px 18px -12px color-mix(in srgb,#000 68%,transparent)}
[data-theme="dark"] .solution-card__cta:hover{box-shadow:0 2px 4px color-mix(in srgb,#000 28%,transparent),0 12px 26px -12px color-mix(in srgb,#000 72%,transparent)}

.solution-carousel{position:relative}
.solution-carousel__viewport{position:relative;border-radius:18px}
.solution-carousel__track{display:flex;margin:0;padding:0;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:18px}
.solution-carousel__track::-webkit-scrollbar{display:none}
.solution-slide{flex:0 0 100%;min-width:0;scroll-snap-align:center;scroll-snap-stop:always}
.solution-slide .evidence__image{border-radius:18px;box-shadow:0 18px 44px -22px color-mix(in srgb,var(--ink) 34%,transparent)}
.solution-carousel__arrow{position:absolute;top:50%;display:none;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--surface) 90%,transparent);color:var(--ink);cursor:pointer;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 80%,transparent),0 10px 24px -12px color-mix(in srgb,var(--ink) 45%,transparent);transform:translateY(-50%);transition:background-color .2s ease,opacity .2s ease}
.solution-carousel__arrow:hover{background:var(--surface)}
.solution-carousel__arrow:disabled{opacity:0;pointer-events:none}
.solution-carousel__arrow--prev{left:12px}
.solution-carousel__arrow--prev .icon{transform:rotate(180deg)}
.solution-carousel__arrow--next{right:12px}
.solution-carousel__arrow .icon{width:20px;height:20px}
.solution-carousel__meta{display:flex;align-items:center;gap:16px;margin-top:14px;padding:0 4px}
.solution-carousel__bar{position:relative;flex:1;height:3px;border-radius:3px;background:color-mix(in srgb,var(--line) 80%,transparent);overflow:hidden}
.solution-carousel__bar>span{position:absolute;inset:0;transform-origin:left center;border-radius:3px;background:var(--accent);transform:scaleX(.001);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.solution-carousel__count{flex:none;color:var(--ink-muted);font-size:.875rem;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em}
@media (min-width:1001px){.solution-carousel__arrow{display:grid}}
html:not(.js) .solution-carousel__arrow,html:not(.js) .solution-carousel__meta,html:not(.js) .voice-carousel__arrow{display:none}
/* Swipe discoverability (touch/narrow): the neighbouring photos peek at the edges
   so it reads as a gallery, and a one-time "Swipe" cue nudges then fades on first
   scroll. Desktop keeps full-bleed slides + arrows (>=1001px), so this is scoped
   below that. */
.solution-carousel__hint{position:absolute;left:50%;bottom:12px;z-index:2;display:none;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;background:color-mix(in srgb,var(--ink) 80%,transparent);color:var(--bg);font-size:.8rem;font-weight:600;letter-spacing:.03em;white-space:nowrap;pointer-events:none;box-shadow:0 10px 24px -10px color-mix(in srgb,var(--ink) 65%,transparent);opacity:0;transform:translateX(-50%);transition:opacity .45s ease}
.solution-carousel__hint .icon{width:14px;height:14px}
.solution-carousel__hint .icon:first-child{transform:rotate(180deg)}
.solution-carousel.is-scrolled .solution-carousel__hint{opacity:0!important;animation:none!important}
@media (max-width:1000px){
  .solution-carousel__viewport{overflow:hidden;margin-inline:-4px;padding-inline:4px}
  .solution-carousel__track{gap:14px;padding-inline:7.5%;scroll-padding-inline:7.5%}
  .solution-slide{flex-basis:85%}
  .solution-slide:not(:only-child) .evidence__image{transition:opacity .35s ease}
  .solution-carousel__hint{display:inline-flex}
  .solution-carousel:not(.is-scrolled) .solution-carousel__hint{opacity:1;animation:swipe-hint 1.7s ease-in-out .4s 3}
}
@keyframes swipe-hint{0%,100%{transform:translateX(-50%)}30%{transform:translateX(-72%)}70%{transform:translateX(-28%)}}
@media (prefers-reduced-motion:reduce){.solution-carousel__hint{animation:none!important}}
/* "No consultation charges" reassurance (in #act above #about, and #contact below). */
.free-consult{display:inline-flex;align-items:center;gap:13px;max-width:100%;margin-top:24px;padding:12px 20px 12px 14px;border-radius:16px;background:color-mix(in srgb,var(--primary) 7%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 24%,transparent)}
.free-consult__icon{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary)}
.free-consult__icon .icon{width:21px;height:21px}
.free-consult__text{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.3;font-size:.9rem;color:var(--ink-muted)}
.free-consult__text strong{font-size:1rem;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.free-consult--on-dark{margin-top:28px;background:color-mix(in srgb,var(--bg) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bg) 28%,transparent)}
.free-consult--on-dark .free-consult__icon{background:color-mix(in srgb,var(--bg) 20%,transparent);color:var(--panel-ink)}
.free-consult--on-dark .free-consult__text{color:var(--panel-muted)}
.free-consult--on-dark .free-consult__text strong{color:var(--panel-ink)}

/* Patient voices — a simple one-row carousel of message screenshots at a shared
   size (uniform portrait cards, filled via cover so mixed-aspect screenshots
   normalise), swipe on touch and arrows on desktop. Each opens the full,
   uncropped image in the lightbox. Reuses the [data-carousel] controller. */
.voice-carousel{position:relative}
.voice-carousel__viewport{position:relative}
.voices-rail{display:flex;gap:clamp(12px,1.6vw,18px);margin:clamp(28px,4vw,44px) 0 0;padding:4px 2px 8px;list-style:none;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.voices-rail::-webkit-scrollbar{display:none}
.voice-slide{flex:none;scroll-snap-align:center;scroll-snap-stop:always;margin:0}
.voice-card{position:relative;display:block;height:clamp(340px,44vh,430px);aspect-ratio:5/8;padding:0;border:0;border-radius:16px;overflow:hidden;background:var(--surface-2);cursor:pointer;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 72%,transparent),0 20px 46px -28px color-mix(in srgb,var(--ink) 40%,transparent);transition:transform .26s cubic-bezier(.22,1,.36,1),box-shadow .26s ease}
.voice-card:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 90%,transparent),0 28px 60px -26px color-mix(in srgb,var(--ink) 50%,transparent)}
.voice-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}
.voice-card__zoom{position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,#0b1f2a 55%,transparent);color:#fff;opacity:0;transform:translateY(4px);transition:opacity .2s ease,transform .2s ease;box-shadow:inset 0 0 0 1px rgb(255 255 255/.28);pointer-events:none}
.voice-card__zoom svg{width:17px;height:17px}
.voice-card:hover .voice-card__zoom,.voice-card:focus-visible .voice-card__zoom{opacity:1;transform:none}
.voice-carousel__arrow{position:absolute;top:50%;display:none;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--ink);cursor:pointer;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 80%,transparent),0 10px 24px -12px color-mix(in srgb,var(--ink) 45%,transparent);transform:translateY(-50%);transition:background-color .2s ease,opacity .2s ease;z-index:2}
.voice-carousel__arrow:hover{background:var(--surface)}
.voice-carousel__arrow:disabled{opacity:0;pointer-events:none}
.voice-carousel__arrow--prev{left:8px}
.voice-carousel__arrow--prev .icon{transform:rotate(180deg)}
.voice-carousel__arrow--next{right:8px}
.voice-carousel__arrow .icon{width:20px;height:20px}
/* Desktop only: the arrows page the rail, and start alignment gives them clean,
   evenly spaced, reachable snap stops (centre alignment crams the trailing cards
   into near-identical offsets the arrows cannot step past). Phones keep centre
   alignment so the card in view sits centred with its neighbours peeking in. */
@media (min-width:1001px){.voice-carousel__arrow{display:grid}.voice-slide{scroll-snap-align:start}}

.voice-lightbox{position:fixed;inset:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;background:transparent;place-items:center;overflow:hidden}
.voice-lightbox:not([open]){display:none}
.voice-lightbox[open]{display:grid}
.voice-lightbox::backdrop{background:color-mix(in srgb,#05141c 84%,transparent);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.voice-lightbox__stage{display:grid;place-items:center;padding:clamp(16px,5vw,44px)}
/* Wide cap so text-heavy landscape screenshots read clearly; portrait ones stay
   governed by max-height. */
.voice-lightbox__img{max-width:min(94vw,1000px);max-height:86dvh;width:auto;height:auto;border-radius:14px;box-shadow:0 40px 90px -20px rgb(0 0 0/.7)}
.voice-lightbox__close{position:fixed;top:max(16px,env(safe-area-inset-top,0px));right:16px;display:grid;place-items:center;width:46px;height:46px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,#0b1f2a 60%,transparent);color:#fff;cursor:pointer;box-shadow:inset 0 0 0 1px rgb(255 255 255/.25)}
.voice-lightbox__close:hover{background:color-mix(in srgb,#0b1f2a 78%,transparent)}
.voice-lightbox__close .icon{width:20px;height:20px}
.voice-lightbox__nav{position:fixed;top:50%;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,#0b1f2a 60%,transparent);color:#fff;cursor:pointer;transform:translateY(-50%);box-shadow:inset 0 0 0 1px rgb(255 255 255/.25)}
.voice-lightbox__nav:hover{background:color-mix(in srgb,#0b1f2a 78%,transparent)}
.voice-lightbox__nav .icon{width:22px;height:22px}
.voice-lightbox__nav--prev{left:max(12px,env(safe-area-inset-left,0px))}
.voice-lightbox__nav--prev .icon{transform:rotate(180deg)}
.voice-lightbox__nav--next{right:max(12px,env(safe-area-inset-right,0px))}
.voice-lightbox__counter{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom,0px));margin:0;padding:5px 14px;border-radius:999px;background:color-mix(in srgb,#0b1f2a 60%,transparent);color:#fff;font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums;transform:translateX(-50%)}
.film-lightbox{position:fixed;inset:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;background:transparent;place-items:center;overflow:hidden}
.film-lightbox:not([open]){display:none}
.film-lightbox[open]{display:grid}
.film-lightbox::backdrop{background:color-mix(in srgb,#05141c 88%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
/* Carousel: one full-width slide per clip in a flex track that translates by
   -index*100%. JS toggles the transition on for snaps and off while a finger drags. */
.film-lightbox__stage{position:relative;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;overflow:hidden}
.film-lightbox__track{display:flex;height:100%;will-change:transform;transform:translate3d(0,0,0)}
.film-lightbox__slide{flex:0 0 100%;display:grid;place-items:center;padding:clamp(12px,4vw,40px)}
.film-lightbox__video{max-width:min(94vw,480px);max-height:88dvh;width:auto;height:auto;border-radius:14px;background:#000;box-shadow:0 40px 90px -20px rgb(0 0 0/.7)}
.film-lightbox__close{position:fixed;top:max(16px,env(safe-area-inset-top,0px));right:16px;display:grid;place-items:center;width:46px;height:46px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,#0b1f2a 60%,transparent);color:#fff;cursor:pointer;box-shadow:inset 0 0 0 1px rgb(255 255 255/.25)}
.film-lightbox__close:hover{background:color-mix(in srgb,#0b1f2a 78%,transparent)}
.film-lightbox__close .icon{width:20px;height:20px}
.film-lightbox__nav{position:fixed;top:50%;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,#0b1f2a 60%,transparent);color:#fff;cursor:pointer;transform:translateY(-50%);box-shadow:inset 0 0 0 1px rgb(255 255 255/.25);transition:opacity .18s}
.film-lightbox__nav:hover{background:color-mix(in srgb,#0b1f2a 78%,transparent)}
.film-lightbox__nav:disabled{opacity:.32;cursor:default}
.film-lightbox__nav[hidden]{display:none}
.film-lightbox__nav .icon{width:22px;height:22px}
.film-lightbox__nav--prev{left:max(12px,env(safe-area-inset-left,0px))}
.film-lightbox__nav--prev .icon{transform:rotate(180deg)}
.film-lightbox__nav--next{right:max(12px,env(safe-area-inset-right,0px))}
/* Signals there is more than one clip, so the swipe (or arrow keys) is discoverable. */
.film-lightbox__counter{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom,0px));margin:0;padding:5px 14px;border-radius:999px;background:color-mix(in srgb,#0b1f2a 60%,transparent);color:#fff;font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums;transform:translateX(-50%)}

/* Mobile "View the full case" popup: carries the desktop case note (hidden on
   phones) into a tap-to-open card, reusing the .condition-case__* type styles. */
.case-lightbox{position:fixed;inset:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;background:transparent;place-items:center;overflow:hidden}
.case-lightbox:not([open]){display:none}
.case-lightbox[open]{display:grid}
.case-lightbox::backdrop{background:color-mix(in srgb,#05141c 88%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.case-lightbox__card{width:min(92vw,440px);max-height:86dvh;overflow:auto;margin:clamp(16px,5vw,44px);padding:clamp(22px,6vw,30px);border-radius:20px;background:var(--bg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 85%,transparent),0 40px 90px -20px rgb(0 0 0/.7)}
.case-lightbox__card .condition-case__quote{margin-top:14px}
.case-lightbox__close{position:fixed;top:max(16px,env(safe-area-inset-top,0px));right:16px;display:grid;place-items:center;width:46px;height:46px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,#0b1f2a 60%,transparent);color:#fff;cursor:pointer;box-shadow:inset 0 0 0 1px rgb(255 255 255/.25)}
.case-lightbox__close:hover{background:color-mix(in srgb,#0b1f2a 78%,transparent)}
.case-lightbox__close .icon{width:20px;height:20px}

@media (max-width:1000px){
  .solution-grid{grid-template-columns:1fr;gap:clamp(28px,6vw,40px)}
}
@media (max-width:760px){
  .solution-card{padding:12px;padding-bottom:24px}
  /* Card inset drops to 12px here, so the balancing margin does too. */
  .solution-card__title{margin-bottom:24px;padding:12px 6px 0}
  .solution-card__body{padding:16px 6px 4px}
  .solution-card__cta{margin-left:6px}
  .voice-lightbox__nav{width:42px;height:42px}
  .film-lightbox__nav{width:42px;height:42px}
}
@media (max-width:640px){
  /* Mandatory snap so a swipe always settles on one card (no partial rest); arrows
     are hidden at this width, so this never fights a programmatic smooth scroll. */
  .voices-rail{scroll-snap-type:x mandatory}
  .voice-slide{width:min(78vw,320px)}
  .voice-card{height:auto;width:100%}
}