/* ============================================================
KOI WELLBEING — Design System
Regenerative · Holistic · A way of life
Type: DM Serif Display (display + wordmark) · Hanken Grotesk (body)
Newsreader italic (editorial body-quote accent, sparing)
============================================================ */
/* Fonts load via a in (see head() in build_pages.py) —
not @import here, since @import forces a serial fetch chain instead of a parallel one. */
/* ---------------- TOKENS ---------------- */
:root{
/* brand (kept) */
--ink: #00243d;
--navy: #004570;
--navy-700: #013a5e;
--teal: #1a90ae;
--teal-deep: #0f7a95;
--teal-bright:#1da0bf;
--teal-glow: #57c6dd;
--accent-warm:#ffffff; /* on-dark text accent = white (navy is unreadable on dark) */
/* warm holistic neutrals */
--shell: #f6f1ea; /* warm sand canvas */
--sand: #efe6d8;
--mist: #eaf3f5; /* cool teal-tinted light */
--paper: #fbfaf7;
--brass: #0f7a95; /* luxe concierge accent, sparing — teal-deep, replaces the old bronze */
--brass-soft: #5cb0c4;
/* ink scales */
--body: #46535c;
--muted: #788893;
--line: #e4ddd1;
--line-cool: #d6e6ea;
--white: #ffffff;
/* type */
--display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
--sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
--serif: 'Newsreader', Georgia, serif;
/* rhythm */
--container: 1240px;
--gutter: clamp(1.25rem, 4vw, 4rem);
--radius: 18px;
--radius-lg: 28px;
--ease: cubic-bezier(.22,.61,.36,1);
--ease-out: cubic-bezier(.16,1,.3,1);
--shadow-sm: 0 2px 10px rgba(0,36,61,.06);
--shadow: 0 18px 50px -20px rgba(0,36,61,.28);
--shadow-lg: 0 40px 90px -40px rgba(0,36,61,.45);
}
/* ---------------- RESET ---------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
font-family:var(--sans);
font-size:17px;
line-height:1.65;
color:var(--body);
background:var(--shell);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
font-synthesis:none;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
::selection{background:var(--teal);color:#fff}
/* ---------------- LAYOUT ---------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(4.5rem,9vw,9rem)}
.section--tight{padding-block:clamp(3rem,6vw,5.5rem)}
.bg-shell{background:var(--shell)}
.bg-paper{background:var(--paper)}
.bg-mist{background:var(--mist)}
.bg-ink{background:var(--ink);color:#dfe9ee}
.bg-navy{background:var(--navy);color:#e7f1f5}
/* ---------------- TYPE ---------------- */
.display{
font-family:var(--display);
font-weight:700;
line-height:1.02;
letter-spacing:-.02em;
color:var(--ink);
}
h1.display{font-size:clamp(2.7rem,7vw,5.6rem)}
h2.display{font-size:clamp(2.1rem,4.6vw,3.8rem)}
h3.display{font-size:clamp(1.5rem,2.4vw,2.1rem)}
.bg-ink .display,.bg-navy .display,.on-dark .display{color:#fff}
.serif-accent{
font-family:var(--display);
font-style:italic;
font-weight:400;
letter-spacing:0;
}
.eyebrow{
font-family:var(--sans);
font-weight:600;
font-size:.74rem;
letter-spacing:.28em;
text-transform:uppercase;
color:var(--teal-deep);
display:inline-flex;align-items:center;gap:.7em;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.5}
.on-dark .eyebrow{color:var(--accent-warm)}
.lead{font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.6;color:var(--body)}
.on-dark .lead,.bg-ink .lead,.bg-navy .lead{color:#cfe0e8}
.measure{max-width:62ch}
.measure-sm{max-width:46ch}
/* ---------------- BUTTONS ---------------- */
.btn{
--bg:var(--teal);--fg:#fff;--bd:var(--teal);
position:relative;display:inline-flex;align-items:center;gap:.6em;
font-family:var(--sans);font-weight:600;font-size:.95rem;letter-spacing:.01em;
padding:.95em 1.7em;border-radius:999px;
background:var(--bg);color:var(--fg);border:1.5px solid var(--bd);
transition:transform .35s var(--ease-out), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
will-change:transform;
}
.btn svg{width:1.05em;height:1.05em;transition:transform .35s var(--ease-out)}
.btn:hover{background:var(--teal-deep);border-color:var(--teal-deep);box-shadow:var(--shadow);transform:translateY(-2px)}
.btn:hover svg{transform:translateX(4px)}
.btn:focus-visible{outline:3px solid var(--teal-glow);outline-offset:3px}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:rgba(0,36,61,.22)}
.btn--ghost:hover{--fg:#fff;background:var(--ink);border-color:var(--ink)}
.btn--light{--bg:#fff;--fg:var(--ink);--bd:#fff}
.btn--light:hover{background:var(--mist);border-color:var(--mist);color:var(--ink)}
.btn--outline-light{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.4)}
.btn--outline-light:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--gold{--bg:var(--brass);--fg:#fff;--bd:var(--brass)}
.btn--gold:hover{background:#004570;border-color:#004570;color:#fff}
.btn--lg{padding:1.1em 2.1em;font-size:1.02rem}
.link-arrow{display:inline-flex;align-items:center;gap:.5em;font-weight:600;color:var(--teal-deep);font-size:.95rem}
.link-arrow svg{width:1em;height:1em;transition:transform .3s var(--ease-out)}
.link-arrow:hover svg{transform:translateX(4px)}
/* ---------------- HEADER ---------------- */
.topbar{background:var(--ink);color:#cfe0e8;font-size:.8rem;letter-spacing:.02em}
.topbar .container{display:flex;align-items:center;justify-content:space-between;height:40px;gap:1rem}
.topbar a{color:#cfe0e8;transition:color .2s}
.topbar a:hover{color:#fff}
.topbar__locs{display:flex;gap:1.4rem;align-items:center}
.topbar__locs .dot{color:var(--accent-warm)}
@media(max-width:760px){.topbar__locs{display:none}}
.nav{
position:sticky;top:0;z-index:50;
background:rgba(251,250,247,.82);
backdrop-filter:blur(14px) saturate(140%);
-webkit-backdrop-filter:blur(14px) saturate(140%);
border-bottom:1px solid transparent;
transition:border-color .3s,box-shadow .3s,background .3s;
}
.nav.is-stuck{border-color:var(--line);box-shadow:0 10px 30px -22px rgba(0,36,61,.35)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:74px;gap:1.5rem}
.nav__logo{font-family:var(--display);font-weight:700;font-size:1.35rem;letter-spacing:-.02em;color:var(--ink);display:flex;align-items:center;gap:.55rem}
.nav__logo .mark{width:30px;height:30px;flex:none}
.koi-logo{display:block;height:46px;width:auto;flex:none}
.footer__brand .koi-logo{height:72px}
@media(max-width:560px){.koi-logo{height:40px}}
.nav__links{display:flex;align-items:center;gap:.3rem}
.nav__link{
position:relative;padding:.55em .9em;border-radius:999px;
font-weight:500;font-size:.93rem;color:var(--ink);
transition:color .2s,background .2s;
}
.nav__link:hover{background:rgba(26,144,174,.1);color:var(--teal-deep)}
.nav__cta{display:flex;align-items:center;gap:.75rem}
.nav__burger{display:none;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center;color:var(--ink)}
.nav__burger span{display:block;width:20px;height:2px;background:currentColor;position:relative;transition:.3s}
.nav__burger span::before,.nav__burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;transition:.3s}
.nav__burger span::before{top:-6px}.nav__burger span::after{top:6px}
/* dropdown */
.has-mega{position:relative}
.mega{
position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);
width:min(620px,86vw);background:var(--paper);border:1px solid var(--line);
border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:1.4rem;
display:grid;grid-template-columns:1fr 1fr;gap:.4rem;
opacity:0;visibility:hidden;transition:.3s var(--ease-out);z-index:60;
}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega a{display:flex;gap:.85rem;padding:.7rem .8rem;border-radius:14px;transition:background .2s}
.mega a:hover{background:var(--mist)}
.mega .ic{width:34px;height:34px;flex:none;border-radius:10px;background:linear-gradient(140deg,var(--teal),var(--navy));display:flex;align-items:center;justify-content:center;color:#fff}
.mega .ic svg{width:18px;height:18px}
.mega b{display:block;font-family:var(--sans);font-weight:600;color:var(--ink);font-size:.95rem}
.mega span{font-size:.82rem;color:var(--muted);line-height:1.4}
@media(max-width:1024px){
.nav__links{display:none}
.nav__burger{display:flex}
.nav__cta .btn{display:none}
}
/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:80;visibility:hidden;pointer-events:none}
.drawer__scrim{position:absolute;inset:0;background:rgba(0,36,61,.5);opacity:0;transition:.35s}
.drawer__panel{position:absolute;top:0;right:0;height:100%;width:min(420px,86vw);background:var(--paper);
transform:translateX(100%);transition:transform .4s var(--ease-out);padding:2rem 1.6rem;overflow-y:auto;display:flex;flex-direction:column;gap:.3rem}
.drawer.open{visibility:visible;pointer-events:auto}
.drawer.open .drawer__scrim{opacity:1}
.drawer.open .drawer__panel{transform:translateX(0)}
.drawer__panel a{padding:.85rem .4rem;border-bottom:1px solid var(--line);font-weight:600;color:var(--ink);font-size:1.05rem}
.drawer__close{align-self:flex-end;font-size:1.6rem;color:var(--ink);width:44px;height:44px}
/* ---------------- HERO ---------------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease}
.hero__slide.is-active{opacity:1}
.hero__slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.05)}
.hero__slide.is-active img{animation:kenburns 7.5s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.05)}to{transform:scale(1.17)}}
.hero__media::after{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(0,36,61,.45) 0%,rgba(0,36,61,.25) 35%,rgba(0,36,61,.78) 100%)}
.hero__dots{position:absolute;left:var(--gutter);bottom:1.7rem;z-index:3;display:flex;gap:.5rem}
.hero__dots .hdot{width:30px;height:3px;border-radius:2px;border:none;background:rgba(255,255,255,.4);cursor:pointer;padding:0;transition:background .3s,width .3s}
.hero__dots .hdot.is-active{background:#fff;width:46px}
@media (prefers-reduced-motion:reduce){.hero__slide{transition:none}.hero__slide.is-active img{animation:none}}
.hero__grain{position:absolute;inset:0;z-index:1;opacity:.5;mix-blend-mode:soft-light;pointer-events:none}
.hero__inner{position:relative;z-index:2;width:100%;padding-block:clamp(3rem,7vw,6rem)}
.hero h1{color:#fff;max-width:16ch}
.hero h1 em{font-family:var(--display);font-style:italic;font-weight:400;color:var(--navy)}
.hero__sub{color:#d7e6ec;max-width:46ch;margin-top:1.5rem;font-size:clamp(1.05rem,1.5vw,1.3rem)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}
.hero__meta{display:flex;gap:2.2rem;margin-top:3rem;flex-wrap:wrap}
.hero__meta div{color:#cfe0e8}
.hero__meta b{font-family:var(--display);font-weight:700;font-size:1.9rem;color:#fff;display:block;line-height:1}
.hero__meta span{font-size:.82rem;letter-spacing:.04em;color:#9fc0cc}
.hero__scroll{position:absolute;bottom:1.6rem;right:var(--gutter);z-index:2;display:flex;align-items:center;gap:.6rem;color:#bcd3dc;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;writing-mode:vertical-rl}
.hero__scroll .ln{width:1px;height:46px;background:linear-gradient(var(--accent-warm),transparent);animation:scrolldot 2.4s var(--ease) infinite}
@keyframes scrolldot{0%{transform:scaleY(0);transform-origin:top}40%{transform:scaleY(1);transform-origin:top}60%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* ---------------- MARQUEE / PRESS ---------------- */
.press{border-block:1px solid var(--line);background:var(--paper)}
.press .container{display:flex;align-items:center;gap:clamp(1.5rem,4vw,3rem);padding-block:1.6rem;flex-wrap:wrap;justify-content:flex-start}
.press span{font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--navy)}
.press__logos{display:flex;align-items:center;gap:clamp(1.5rem,4vw,3.4rem);flex-wrap:wrap;justify-content:flex-start}
.press__logos img{height:30px;width:auto;opacity:.4;filter:grayscale(1);animation:pressGlow 8s ease-in-out infinite}
.press__logos img:nth-child(1){animation-delay:0s}
.press__logos img:nth-child(2){animation-delay:2s}
.press__logos img:nth-child(3){animation-delay:4s}
.press__logos img:nth-child(4){animation-delay:6s}
@keyframes pressGlow{0%{opacity:.4;filter:grayscale(1)}6%{opacity:1;filter:grayscale(0)}17%{opacity:1;filter:grayscale(0)}30%{opacity:.4;filter:grayscale(1)}100%{opacity:.4;filter:grayscale(1)}}
@media (prefers-reduced-motion:reduce){.press__logos img{animation:none;opacity:.65}}
/* ---------------- SECTION HEAD ---------------- */
.s-head{max-width:760px}
.s-head .eyebrow{margin-bottom:1.1rem}
.s-head p{margin-top:1.2rem}
.s-head--center{margin-inline:auto;text-align:center}
.s-head--center .eyebrow{justify-content:center}
/* ---------------- SPLIT / PHILOSOPHY ---------------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.split--rev .split__media{order:2}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:2.5rem}.split--rev .split__media{order:0}}
.split__media{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.split__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;will-change:transform}
.split__media .badge{position:absolute;left:1.2rem;bottom:1.2rem;background:rgba(251,250,247,.92);backdrop-filter:blur(6px);border-radius:14px;padding:.85rem 1.1rem;box-shadow:var(--shadow)}
.split__media .badge b{font-family:var(--display);color:var(--ink);font-size:1.6rem;display:block;line-height:1}
.split__media .badge span{font-size:.78rem;color:var(--muted)}
/* ---------------- SERVICES BENTO ---------------- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.svc{
position:relative;overflow:hidden;border-radius:var(--radius-lg);
background:var(--ink);color:#fff;min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;
padding:1.7rem;isolation:isolate;
}
@media(max-width:860px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.bento{grid-template-columns:1fr}}
.svc__img{position:absolute;inset:0;z-index:-2}
.svc__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.svc::after{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(175deg,rgba(0,36,61,.05) 0%,rgba(0,36,61,.55) 55%,rgba(0,36,61,.92) 100%);transition:opacity .5s}
.svc:hover .svc__img img{transform:scale(1.07)}
.svc__num{position:absolute;top:1.4rem;right:1.5rem;font-family:var(--display);font-size:.95rem;color:rgba(255,255,255,.6);letter-spacing:.05em}
.svc h3{font-family:var(--display);font-weight:600;font-size:1.45rem;color:#fff;letter-spacing:-.01em}
.svc p{color:#cfe0e8;font-size:.93rem;margin-top:.5rem;max-width:34ch;
max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease-out),opacity .4s,margin .4s}
.svc:hover p{max-height:9em;opacity:1;margin-top:.7rem}
.svc__tag{display:inline-flex;align-items:center;gap:.45em;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-warm);margin-bottom:.7rem}
.svc__more{margin-top:1rem;display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.9rem;color:#fff;
opacity:0;transform:translateY(8px);transition:.4s var(--ease-out)}
.svc:hover .svc__more{opacity:1;transform:translateY(0)}
.svc__more svg{width:1em;height:1em}
/* ---------------- PROCESS / SCROLLY ---------------- */
.process{position:relative}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:3.5rem;counter-reset:step}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding:2rem 1.5rem;border-radius:var(--radius);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);transition:.4s var(--ease-out)}
.step:hover{background:rgba(87,198,221,.1);border-color:rgba(87,198,221,.4);transform:translateY(-4px)}
.step__n{font-family:var(--display);font-size:2.4rem;font-weight:700;color:var(--accent-warm);line-height:1}
.step h4{font-family:var(--display);font-weight:600;font-size:1.2rem;color:#fff;margin-top:1rem}
.step p{color:#bcd3dc;font-size:.92rem;margin-top:.55rem}
.step__line{position:absolute;top:2.7rem;right:-1.4rem;width:1.4rem;height:1px;background:rgba(87,198,221,.4)}
@media(max-width:900px){.step__line{display:none}}
/* ---------------- STATS ---------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}}
.stat{padding:1.6rem 0;border-top:2px solid var(--line-cool)}
.stat b{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,5vw,3.6rem);color:var(--ink);line-height:1;display:block;letter-spacing:-.02em}
.bg-ink .stat b,.bg-navy .stat b{color:#fff}
.bg-ink .stat,.bg-navy .stat{border-color:rgba(255,255,255,.18)}
.stat span{display:block;margin-top:.6rem;font-size:.9rem;color:var(--muted)}
.bg-ink .stat span,.bg-navy .stat span{color:#9fc0cc}
/* ---------------- TEAM / FEATURE ---------------- */
.feature{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:860px){.feature{grid-template-columns:1fr}}
.feature__media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);position:relative}
.feature__media img{width:100%;aspect-ratio:1/1;object-fit:cover}
/* ---------------- TESTIMONIALS ---------------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
@media(max-width:860px){.quotes{grid-template-columns:1fr}}
.quote{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:2rem 1.8rem;transition:.4s var(--ease-out)}
.quote:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line-cool)}
.quote__stars{color:var(--brass);letter-spacing:.15em;font-size:.95rem}
.quote p{font-family:var(--serif);font-style:italic;font-size:1.18rem;line-height:1.5;color:var(--ink);margin:1.1rem 0 1.4rem}
.quote__by{display:flex;align-items:center;gap:.8rem}
.quote__by .av{width:40px;height:40px;border-radius:50%;background:linear-gradient(140deg,var(--teal),var(--navy));color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;font-size:.95rem}
.quote__by b{color:var(--ink);font-size:.95rem;font-weight:600;display:block}
.quote__by span{font-size:.82rem;color:var(--muted)}
/* ---------------- LOCATIONS ---------------- */
.locs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
@media(max-width:860px){.locs{grid-template-columns:1fr}}
.loc{position:relative;overflow:hidden;border-radius:var(--radius-lg);min-height:360px;display:flex;flex-direction:column;justify-content:flex-end;padding:1.8rem;color:#fff;isolation:isolate}
.loc img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.loc::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,36,61,.1),rgba(0,36,61,.85))}
.loc:hover img{transform:scale(1.06)}
.loc .flag{display:inline-block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-warm);margin-bottom:.5rem}
.loc h3{font-family:var(--display);font-weight:600;font-size:1.5rem;color:#fff}
.loc p{font-size:.9rem;color:#cfe0e8;margin-top:.3rem}
.loc .link-arrow{color:#fff;margin-top:1rem}
/* ---------------- CTA BANNER ---------------- */
.cta-band{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:clamp(2.5rem,6vw,5rem);background:linear-gradient(135deg,var(--navy),var(--ink));color:#fff;text-align:center}
.cta-band::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(87,198,221,.35),transparent 70%);top:-180px;right:-120px;filter:blur(10px)}
.cta-band h2{color:#fff;position:relative}
.cta-band p{color:#cfe0e8;margin:1.1rem auto 0;position:relative}
.cta-band .hero__cta{justify-content:center;position:relative}
/* ---------------- FOOTER ---------------- */
.footer{background:var(--paper);color:var(--body);padding-block:clamp(3.5rem,6vw,5.5rem) 2rem}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:2.5rem}
@media(max-width:860px){.footer__grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer__grid{grid-template-columns:1fr}}
.footer h5{font-family:var(--sans);font-weight:600;color:var(--ink);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1.2rem}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.footer a{color:var(--body);font-size:.92rem;transition:color .2s}
.footer a:hover{color:var(--teal-deep)}
.footer__brand .nav__logo{color:var(--ink);margin-bottom:1.1rem}
.footer__brand p{font-size:.92rem;color:var(--body);max-width:34ch}
.footer__social{display:flex;gap:.7rem;margin-top:1.4rem}
.footer__social a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(0,36,61,.16);display:flex;align-items:center;justify-content:center;transition:.25s;color:var(--ink)}
.footer__social a:hover{background:var(--teal);border-color:var(--teal);color:#fff;transform:translateY(-2px)}
.footer__social svg{width:18px;height:18px}
.footer__bottom{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:var(--muted)}
/* ---------------- REVEAL ANIMATION ---------------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
.reveal{opacity:1!important;transform:none!important;transition:none}
.hero__media img{transform:none!important}
*{animation:none!important}
}
/* floating koi accent */
.koi-float{position:absolute;width:clamp(120px,16vw,220px);opacity:.14;pointer-events:none;mix-blend-mode:multiply}
/* ============================================================
INNER PAGES
============================================================ */
.subhero{position:relative;background:var(--ink);color:#fff;overflow:hidden;padding-top:clamp(3rem,7vw,5rem);padding-bottom:clamp(3.5rem,8vw,6rem)}
.subhero::before{content:"";position:absolute;inset:0;z-index:0;
background:radial-gradient(120% 100% at 80% 0%,rgba(26,144,174,.45),transparent 55%),linear-gradient(180deg,#013250,#00243d)}
.subhero__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:860px){.subhero__grid{grid-template-columns:1fr;gap:2rem}}
.subhero h1{color:#fff;max-width:16ch;margin-top:1.1rem}
.subhero h1 em{font-family:var(--display);font-style:italic;font-weight:400;color:var(--accent-warm)}
.subhero p{color:#cfe0e8;max-width:52ch;margin-top:1.3rem;font-size:clamp(1.05rem,1.4vw,1.22rem)}
.subhero__cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2rem}
.subhero__media{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/5}
.subhero__media img{width:100%;height:100%;object-fit:cover}
.subhero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.subhero__slide.is-active{opacity:1}
.subhero__slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.05)}
.subhero__slide.is-active img{animation:kenburns 8s ease-out forwards}
@media (prefers-reduced-motion:reduce){.subhero__slide{transition:none}.subhero__slide.is-active img{animation:none}}
.crumbs{position:relative;z-index:1;font-size:.84rem;color:#9fc0cc;display:flex;gap:.5rem;align-items:center}
.crumbs a{color:#9fc0cc}.crumbs a:hover{color:#fff}
.prose{max-width:760px}
.prose .lead{margin-bottom:1.3rem}
.prose p{margin-bottom:1.15rem;color:var(--body)}
.prose h3{font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,2.4vw,2rem);color:var(--ink);margin:2.4rem 0 1rem;letter-spacing:-.01em}
.pullquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.4vw,1.8rem);line-height:1.45;color:var(--ink);
border-left:3px solid var(--teal);padding:.4rem 0 .4rem 1.6rem;margin:2rem 0}
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media(max-width:860px){.tcards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tcards{grid-template-columns:1fr}}
.tcard{background:var(--paper);border:1px solid var(--line);border-top:2px solid var(--teal);border-radius:var(--radius);padding:1.8rem 1.6rem;transition:.35s var(--ease-out)}
.tcard:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line-cool)}
.tcard .ic{width:34px;height:34px;border-radius:50%;background:none;border:1px solid var(--line-cool);display:flex;align-items:center;justify-content:center;color:var(--teal-deep);margin-bottom:1.2rem}
.tcard .ic svg{width:16px;height:16px}
.tcard h4{font-family:var(--display);font-weight:600;font-size:1.18rem;color:var(--ink);margin-bottom:.5rem}
.tcard p{font-size:.93rem;color:var(--body)}
.tcard--dark{background:var(--ink);border-color:transparent;color:#fff}
.tcard--dark h4{color:#fff}.tcard--dark p{color:#bcd3dc}
/* checklist */
.checks{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 2rem;margin-top:1.5rem}
@media(max-width:560px){.checks{grid-template-columns:1fr}}
.checks li{list-style:none;display:flex;gap:.8rem;align-items:flex-start;color:var(--ink);font-weight:500}
.checks .ck{flex:none;width:24px;height:24px;border-radius:50%;background:rgba(26,144,174,.14);color:var(--teal-deep);display:flex;align-items:center;justify-content:center;margin-top:1px}
.checks .ck svg{width:14px;height:14px}
/* FAQ accordion */
.faq{max-width:820px;margin-inline:auto}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;text-align:left;
padding:1.4rem 0;font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--ink)}
.faq__q .pm{flex:none;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line-cool);position:relative;transition:.3s}
.faq__q .pm::before,.faq__q .pm::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:1.5px;background:var(--teal-deep);transform:translate(-50%,-50%);transition:.3s}
.faq__q .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__item.open .pm{background:var(--teal);border-color:var(--teal)}
.faq__item.open .pm::before,.faq__item.open .pm::after{background:#fff}
.faq__item.open .pm::after{transform:translate(-50%,-50%) rotate(0)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease-out)}
.faq__a p{padding-bottom:1.4rem;color:var(--body)}
/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4rem)}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
.infocard{display:flex;gap:1rem;padding:1.3rem 0;border-bottom:1px solid var(--line)}
.infocard .ic{flex:none;width:44px;height:44px;border-radius:12px;background:var(--mist);color:var(--teal-deep);display:flex;align-items:center;justify-content:center}
.infocard .ic svg{width:20px;height:20px}
.infocard b{display:block;color:var(--ink);font-weight:600;margin-bottom:.15rem}
.infocard span,.infocard a{color:var(--body);font-size:.95rem}
.form{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.6rem,3vw,2.4rem);box-shadow:var(--shadow-sm)}
.field{margin-bottom:1.1rem}
.field label{display:block;font-weight:600;font-size:.88rem;color:var(--ink);margin-bottom:.45rem}
.field input,.field select,.field textarea{width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink);
background:#fff;border:1.5px solid var(--line-cool);border-radius:12px;padding:.85rem 1rem;transition:border .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(26,144,174,.12)}
.field textarea{min-height:120px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media(max-width:560px){.field-row{grid-template-columns:1fr}}
/* generic two-col intro */
.introsec{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media(max-width:860px){.introsec{grid-template-columns:1fr}}
.intro__media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);position:sticky;top:100px}
@media(max-width:860px){.intro__media{position:static}}
.intro__media img{width:100%;aspect-ratio:4/5;object-fit:cover}
/* ===== photo banner: full-bleed image with heading overlaid, prose below ===== */
.photobanner{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:21/9;margin-bottom:2.2rem}
@media(max-width:700px){.photobanner{aspect-ratio:4/5}}
.photobanner img{width:100%;height:100%;object-fit:cover;display:block}
.photobanner::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,36,61,.82),rgba(0,36,61,.05) 60%)}
.photobanner__cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(1.4rem,3.4vw,2.6rem);z-index:1}
.photobanner__cap h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.7rem)}
.photobanner__body{max-width:68ch;margin:0 auto}
.photobanner__body .pullquote{margin:1.7rem 0}
/* ============================================================
INTERACTION POLISH — navy button, glare sweep, pop reveals, stat accent
============================================================ */
.btn--navy{--bg:var(--ink);--fg:#fff;--bd:var(--ink)}
.btn--navy:hover{background:var(--navy);border-color:var(--navy);color:#fff}
/* glare / light sweep across a heading */
.glare{position:relative;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.glare::after{content:"";position:absolute;top:0;left:-55%;width:35%;height:100%;pointer-events:none;
background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.5) 50%,transparent 80%);
transform:skewX(-16deg);animation:glareSweep 6s ease-in-out infinite}
@keyframes glareSweep{0%{left:-55%}32%{left:135%}100%{left:135%}}
/* stronger "pop up" entrance (overrides .reveal for tagged elements) */
.reveal--pop{transform:translateY(48px) scale(.94);
transition:opacity .6s var(--ease-out), transform .6s cubic-bezier(.34,1.45,.64,1), background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease)}
.reveal--pop.in{transform:none}
/* make the KOI-method stats pop */
.process .stat b{color:var(--accent-warm)}
.process .stat{border-top-color:rgba(87,198,221,.55)}
@media (prefers-reduced-motion:reduce){.glare::after{animation:none;display:none}.reveal--pop{transform:none}}
/* ============================================================
TEAM PAGE — dark, editorial (no bone bg, no nature imagery)
============================================================ */
.team-dark{background:var(--ink);color:#cfe0e8}
.team-hero{position:relative;overflow:hidden;color:#fff;
background:radial-gradient(120% 130% at 82% -15%, #0c5266 0%, #013250 42%, #00243d 76%);
padding-top:clamp(2.4rem,5vw,3.6rem);padding-bottom:clamp(3.5rem,8vw,6.5rem)}
.team-hero::before{content:"";position:absolute;width:540px;height:540px;border-radius:50%;
background:radial-gradient(circle,rgba(87,198,221,.22),transparent 70%);top:-180px;left:-120px;pointer-events:none}
.team-hero .container{position:relative;z-index:1}
.team-hero .crumbs{color:#9fc0cc}
.team-hero h1{color:#fff;max-width:15ch;margin-top:1.1rem}
.team-hero h1 em{font-family:var(--display);font-style:italic;color:var(--accent-warm)}
.team-hero p{color:#cfe0e8;max-width:54ch;margin-top:1.4rem;font-size:clamp(1.05rem,1.45vw,1.28rem)}
.team-hero__stats{display:flex;gap:2.6rem;margin-top:2.6rem;flex-wrap:wrap}
.team-hero__stats b{font-family:var(--display);font-size:2rem;color:#fff;display:block;line-height:1}
.team-hero__stats span{font-size:.82rem;color:#9fc0cc;letter-spacing:.03em}
.member-section{background:var(--ink);padding-block:clamp(2.5rem,6vw,5rem)}
.member{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.member--rev .member__media{order:2}
@media(max-width:880px){.member{grid-template-columns:1fr;gap:2rem}.member--rev .member__media{order:0}}
.member__media{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;
box-shadow:0 50px 100px -45px rgba(0,0,0,.7);isolation:isolate}
.member__media::after{content:"";position:absolute;inset:0;border-radius:var(--radius-lg);
box-shadow:inset 0 0 0 1px rgba(87,198,221,.35);pointer-events:none}
.member__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.member:hover .member__media img{transform:scale(1.045)}
.member__glow{position:absolute;inset:-2px;z-index:-1;border-radius:calc(var(--radius-lg) + 6px);
background:linear-gradient(140deg,var(--teal),transparent 60%);opacity:.5;filter:blur(18px)}
.member__no{font-family:var(--display);font-size:1.05rem;color:var(--accent-warm);letter-spacing:.12em}
.member__body h2{color:#fff;margin-top:.45rem;font-size:clamp(2rem,4.2vw,3.3rem);line-height:1.02}
.member__role{color:var(--accent-warm);font-weight:600;letter-spacing:.02em;margin-top:.6rem;font-size:1.02rem}
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.5rem 0 1.8rem}
.chip{font-size:.8rem;font-weight:500;color:#d7eef4;background:rgba(87,198,221,.12);
border:1px solid rgba(87,198,221,.32);padding:.5em .95em;border-radius:999px;transition:.25s var(--ease-out)}
.chip:hover{background:rgba(87,198,221,.24);border-color:var(--accent-warm);transform:translateY(-2px)}
.member__body p{color:#bcd3dc;margin-bottom:1rem;max-width:60ch;line-height:1.7}
.member__body .btn{margin-top:.7rem}
.team-wall-section{background:var(--ink);padding-bottom:clamp(4rem,8vw,7rem)}
.team-wall-section .eyebrow{color:var(--accent-warm)}
.team-wall-section h2{color:#fff}
.team-wall-section .s-head p{color:#9fc0cc}
.team-wall{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-top:2.6rem}
@media(max-width:860px){.team-wall{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.team-wall{grid-template-columns:repeat(2,1fr)}}
.tw{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;border:1px solid rgba(255,255,255,.06)}
.tw img{width:100%;height:100%;object-fit:cover;filter:grayscale(.25) brightness(.92);transition:.55s var(--ease-out)}
.tw::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px rgba(87,198,221,0);transition:.4s}
.tw:hover img{filter:grayscale(0) brightness(1);transform:scale(1.06)}
.tw:hover::after{box-shadow:inset 0 0 0 2px rgba(87,198,221,.6)}
/* ============================================================
TEAM PAGE v2 — light, equal practitioner grid
============================================================ */
.team-top{background:var(--mist);padding-top:clamp(2.2rem,5vw,3.4rem);padding-bottom:clamp(2.6rem,5vw,3.8rem)}
.team-top .crumbs{color:var(--muted)}
.team-top .crumbs a{color:var(--muted)}
.team-top .crumbs a:hover{color:var(--ink)}
.team-top h1{color:var(--ink);max-width:16ch;margin-top:1rem}
.team-top h1 em{font-family:var(--display);font-style:italic;color:var(--teal-deep)}
.team-top p{margin-top:1.2rem}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem}
@media(max-width:880px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.pgrid{grid-template-columns:1fr}}
.pgrid{align-items:stretch}
.pcard{display:flex;flex-direction:column;height:100%;background:var(--paper);border:1px solid var(--line-cool);border-radius:var(--radius-lg);overflow:hidden;transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .3s}
.pcard__body{flex:1}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--teal)}
.pcard__media{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--mist)}
.pcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.pcard:hover .pcard__media img{transform:scale(1.05)}
.pcard__body{padding:1.4rem 1.4rem 1.6rem}
.pcard h3{font-family:var(--display);font-size:1.4rem;color:var(--ink);line-height:1.04}
.pcard h3 .tbd{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.05rem;color:var(--muted)}
.pcard__role{color:var(--teal-deep);font-weight:600;font-size:.9rem;margin-top:.4rem;letter-spacing:.01em}
.pcard__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.pcard__tags span{font-size:.72rem;font-weight:500;color:var(--teal-deep);background:var(--mist);border:1px solid var(--line-cool);padding:.38em .75em;border-radius:999px}
/* ============================================================
TEAM PAGE v3 — editorial overlay portrait cards (equal, richer)
============================================================ */
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;margin-top:3rem}
@media(max-width:1024px){.tgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.tgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.tgrid{grid-template-columns:1fr}}
.tmember{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;isolation:isolate;
box-shadow:0 14px 40px -22px rgba(0,36,61,.5);transition:transform .45s var(--ease-out),box-shadow .45s}
.tmember:hover{transform:translateY(-7px);box-shadow:0 32px 64px -28px rgba(0,36,61,.6)}
.tmember img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.tmember:hover img{transform:scale(1.07)}
.tmember::after{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(0,36,61,.04) 0%,rgba(0,36,61,0) 28%,rgba(0,36,61,.5) 64%,rgba(0,36,61,.95) 100%)}
.tmember__cred{position:absolute;top:.9rem;left:.9rem;z-index:2;font-size:.64rem;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.92);padding:.4em .75em;border-radius:999px}
.tmember__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.2rem 1.2rem 1.35rem;color:#fff}
.tmember__cap h3{font-family:var(--display);font-size:1.32rem;color:#fff;line-height:1.04}
.tmember__role{color:var(--accent-warm);font-weight:600;font-size:.82rem;margin-top:.32rem;letter-spacing:.01em}
.tmember__tags{display:flex;flex-wrap:wrap;gap:.32rem;max-height:0;opacity:0;overflow:hidden;
transition:max-height .5s var(--ease-out),opacity .4s,margin .4s}
.tmember:hover .tmember__tags{max-height:11em;opacity:1;margin-top:.75rem}
.tmember__tags span{font-size:.66rem;color:#eaf7fb;background:rgba(87,198,221,.22);
border:1px solid rgba(87,198,221,.4);padding:.3em .62em;border-radius:999px}
@media(prefers-reduced-motion:reduce){.tmember__tags{max-height:11em;opacity:1;margin-top:.75rem}}
/* ============================================================
STORY / PHILOSOPHY — color-blocked editorial block
============================================================ */
.story{display:grid;grid-template-columns:1.05fr .95fr;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--ink)}
@media(max-width:880px){.story{grid-template-columns:1fr}}
.story__panel{position:relative;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:center;
padding:clamp(2.4rem,4.5vw,4.2rem);
background:linear-gradient(155deg,#0f6e85 0%,#0a4d63 38%,#013a52 70%,#00243d 100%)}
.story__panel::before{content:"";position:absolute;width:460px;height:460px;border-radius:50%;top:-160px;right:-140px;
background:radial-gradient(circle,rgba(87,198,221,.35),transparent 70%);pointer-events:none}
.story__panel>*{position:relative;z-index:1}
.story__panel .eyebrow{color:var(--accent-warm)}
.story__panel h2{color:#fff;margin-top:1.1rem}
.story__panel h2 em{font-family:var(--display);font-style:italic;color:var(--accent-warm)}
.story__panel p{color:#d2e3ea;margin-top:1.1rem;max-width:48ch;line-height:1.65}
.story__stats{display:flex;gap:clamp(1.4rem,3vw,2.6rem);margin:1.9rem 0 1.6rem;flex-wrap:wrap}
.story__stats div{position:relative}
.story__stats b{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,3vw,2.2rem);color:#fff;display:block;line-height:1}
.story__stats span{font-size:.78rem;color:#9fc0cc;letter-spacing:.02em;margin-top:.25rem;display:block}
.story__cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.4rem}
.story__media{position:relative;min-height:380px;overflow:hidden}
.story__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.story:hover .story__media img{transform:scale(1.05)}
.story__badge{position:absolute;left:1.3rem;bottom:1.3rem;background:rgba(251,250,247,.94);backdrop-filter:blur(6px);
border-radius:14px;padding:.85rem 1.15rem;box-shadow:var(--shadow)}
.story__badge b{font-family:var(--display);color:var(--ink);font-size:1.5rem;display:block;line-height:1}
.story__badge span{font-size:.78rem;color:var(--muted)}
/* ============================================================
INTRO SPLASH + HERO ENTRANCE
============================================================ */
.intro{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
background:radial-gradient(120% 120% at 50% 32%, #0a4d63 0%, #013250 46%, #00243d 100%);
animation:introOut 6.7s ease forwards}
.intro__inner{text-align:center;padding:2rem;max-width:560px}
.intro__logo{height:clamp(70px,11vw,104px);width:auto;margin:0 auto;filter:brightness(0) invert(1);
opacity:0;animation:introBeat .8s .3s both}
.intro__word{font-family:var(--sans);font-weight:600;letter-spacing:.36em;text-transform:uppercase;
color:#eef4f6;font-size:clamp(1rem,2vw,1.25rem);margin-top:1.5rem;opacity:0;animation:introBeat .8s 1.5s both}
.intro__tag{font-family:var(--serif);font-style:italic;color:#c4d7df;font-size:clamp(1.05rem,1.8vw,1.3rem);
margin:.3rem auto 0;max-width:34ch;line-height:1.45;opacity:0}
.intro__tag--a{margin-top:1.3rem;animation:introBeat .8s 2.75s both}
.intro__tag--b{animation:introBeat .8s 4s both}
@keyframes introBeat{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes introOut{0%,80%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
.intro.intro--skip{display:none}
/* hero entrance — gated on .js so no-JS still shows everything */
.js .hero-el{opacity:0;transform:translateY(18px);
transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
body.entered .hero-el{opacity:1;transform:none}
.js .hero-h1 .hw{display:inline-block;opacity:0;transform:translateY(.6em);
transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
body.entered .hero-h1 .hw{opacity:1;transform:none}
body.entered .hero-h1 .hw:nth-child(1){transition-delay:.15s}
body.entered .hero-h1 .hw:nth-child(2){transition-delay:.32s}
body.entered .hero-h1 .hw:nth-child(3){transition-delay:.49s}
body.entered .hero-h1 .hw:nth-child(4){transition-delay:.64s}
body.entered .hero-h1 .hw:nth-child(5){transition-delay:.82s}
@media (prefers-reduced-motion:reduce){
.intro{display:none!important}
.js .hero-el,.js .hero-h1 .hw{opacity:1;transform:none;transition:none}
}
/* ============================================================
SERVICE PAGE — approach flow + results timeline
============================================================ */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;margin-top:3rem}
@media(max-width:880px){.flow{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.flow{grid-template-columns:1fr}}
.flow__item{position:relative;padding:1.9rem 1.5rem;border-radius:var(--radius);background:var(--paper);
border:1px solid var(--line-cool);transition:transform .35s var(--ease-out),box-shadow .35s,border-color .3s}
.flow__item:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--teal)}
.flow__n{font-family:var(--display);font-size:2.1rem;color:var(--navy);line-height:1}
.flow__item h4{font-family:var(--display);font-weight:600;font-size:1.18rem;color:var(--ink);margin-top:.85rem}
.flow__item p{font-size:.93rem;color:var(--body);margin-top:.5rem;line-height:1.6}
.tl{max-width:780px;margin-top:2.8rem;position:relative}
.tl::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:var(--line-cool)}
.tl__row{position:relative;padding:0 0 2rem 3rem}
.tl__row:last-of-type{padding-bottom:0}
.tl__row::before{content:"";position:absolute;left:1px;top:3px;width:18px;height:18px;border-radius:50%;
background:var(--teal);box-shadow:0 0 0 4px var(--mist)}
.tl__when{font-weight:700;color:var(--teal-deep);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.tl__row h4{font-family:var(--display);font-weight:600;font-size:1.25rem;color:var(--ink);margin:.25rem 0 .4rem}
.tl__row p{color:var(--body);font-size:.96rem;line-height:1.6;max-width:60ch}
.tl__note{margin-top:1.8rem;font-size:.9rem;color:var(--muted);font-style:italic;max-width:62ch}
/* ============================================================
BACK-TO-TOP + service-page bands & callouts
============================================================ */
.to-top{position:fixed;right:1.4rem;bottom:1.4rem;z-index:60;width:46px;height:46px;border-radius:50%;
background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;
box-shadow:var(--shadow);opacity:0;transform:translateY(12px);pointer-events:none;
transition:opacity .3s var(--ease-out),transform .3s var(--ease-out),background .3s}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--ink)}
.to-top svg{width:20px;height:20px}
/* big centered statement band */
.band{background:var(--ink);color:#fff;text-align:center;border-radius:var(--radius-lg);
padding:clamp(2.4rem,5vw,3.8rem);position:relative;overflow:hidden}
.band::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;top:-160px;right:-120px;
background:radial-gradient(circle,rgba(26,144,174,.4),transparent 70%);pointer-events:none}
.band>*{position:relative;z-index:1}
.band .eyebrow{justify-content:center;color:var(--accent-warm)}
.band h2{color:#fff;margin-top:1rem}
.band p{color:#cfe0e8;max-width:62ch;margin:1.1rem auto 0}
/* callout card (light or navy) with optional button */
.callout{background:var(--paper);border:1px solid var(--line-cool);border-radius:var(--radius-lg);
padding:clamp(1.8rem,3.5vw,2.6rem);box-shadow:var(--shadow-sm)}
.callout h3{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2rem);color:var(--ink);margin-bottom:.7rem}
.callout p{color:var(--body);margin-bottom:.5rem;max-width:60ch}
.callout .checks{margin-top:1.2rem}
.callout .btn{margin-top:1.5rem}
.callout--navy{background:linear-gradient(150deg,#0f6e85,#013a52 70%);border:none}
.callout--navy h3{color:#fff}.callout--navy p{color:#d2e3ea}
.cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}
/* ============================================================
KOI gold-on-navy PRINT, woven through the dark sections site-wide
(each layered under a navy gradient so text stays legible)
============================================================ */
.subhero{background:linear-gradient(160deg, rgba(11,77,99,.5) 0%, rgba(1,50,80,.85) 45%, rgba(0,36,61,.94) 82%), url(../img/koi-print.jpg); background-size:cover; background-position:center}
.subhero::before{background:radial-gradient(120% 100% at 80% 0%, rgba(87,198,221,.22), transparent 55%)}
.cta-band{background:linear-gradient(135deg, rgba(0,69,112,.78), rgba(0,36,61,.9)), url(../img/koi-print.jpg); background-size:cover; background-position:center}
.band{background:linear-gradient(155deg, rgba(0,36,61,.8), rgba(0,36,61,.9)), url(../img/koi-print.jpg); background-size:cover; background-position:center}
.process{background:linear-gradient(rgba(0,36,61,.86), rgba(0,36,61,.93)), url(../img/koi-print.jpg); background-size:cover; background-position:center}
.intro{background:radial-gradient(120% 120% at 50% 32%, rgba(10,77,99,.85), rgba(1,50,80,.92) 46%, rgba(0,36,61,.97)), url(../img/koi-print.jpg); background-size:cover; background-position:center}
/* ============================================================
HOMEPAGE — "Which KOI will you visit?" location picker
============================================================ */
.locpick__head{text-align:center;max-width:660px;margin:0 auto 2.6rem}
.locpick__head .display{margin-top:.7rem;font-size:clamp(1.9rem,3.6vw,2.8rem)}
.locpick__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media(max-width:860px){.locpick__grid{grid-template-columns:1fr}}
.locpick__card{
position:relative;overflow:hidden;isolation:isolate;
display:flex;flex-direction:column;gap:.4rem;min-height:188px;
padding:1.9rem 1.85rem 1.6rem;border-radius:var(--radius-lg);
background:linear-gradient(155deg,rgba(0,69,112,.84),rgba(0,36,61,.95)),url(../img/koi-print.jpg);
background-size:cover;background-position:center;
color:#fff;border:1px solid rgba(255,255,255,.09);box-shadow:var(--shadow);
transition:transform .4s var(--ease-out),box-shadow .4s var(--ease);
}
.locpick__card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.locpick__card:focus-visible{outline:3px solid var(--teal-glow);outline-offset:3px}
.locpick__city{font-family:var(--display);font-size:1.75rem;line-height:1.05;letter-spacing:-.01em}
.locpick__note{font-size:.86rem;color:#bcd3dd;letter-spacing:.02em}
.locpick__go{margin-top:auto;display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.92rem;color:var(--teal-glow)}
.locpick__go svg{width:1.05em;height:1.05em;transition:transform .3s var(--ease-out)}
.locpick__card:hover .locpick__go svg{transform:translateX(4px) translateY(-4px)}
/* ============================================================
PRINT VISIBILITY — lighter overlays so the gold print reads
clearly, with text-shadows to keep type legible over it
============================================================ */
.subhero{background:linear-gradient(160deg, rgba(6,55,78,.38) 0%, rgba(1,46,74,.6) 45%, rgba(0,36,61,.76) 82%), url(../img/koi-print.jpg); background-size:cover; background-position:center}
.cta-band{background:linear-gradient(135deg, rgba(0,64,104,.5), rgba(0,33,56,.7)), url(../img/koi-print.jpg); background-size:cover; background-position:center}
.band{background:linear-gradient(155deg, rgba(0,36,61,.5), rgba(0,36,61,.68)), url(../img/koi-print.jpg); background-size:cover; background-position:center}
.process{background:linear-gradient(rgba(0,36,61,.55), rgba(0,36,61,.7)), url(../img/koi-print.jpg); background-size:cover; background-position:center}
.intro{background:radial-gradient(120% 120% at 50% 32%, rgba(8,66,88,.5), rgba(1,48,76,.66) 46%, rgba(0,36,61,.83)), url(../img/koi-print.jpg); background-size:cover; background-position:center}
.locpick__card{background:linear-gradient(155deg, rgba(0,64,104,.5), rgba(0,33,56,.72)), url(../img/koi-print.jpg); background-size:cover; background-position:center}
/* keep type readable over the brighter print */
.subhero .display,.subhero .lead,.subhero .eyebrow,
.cta-band .display,.cta-band .lead,.cta-band .eyebrow,
.band .display,.band .lead,.band .eyebrow,
.process .display,.process .lead,
.locpick__card .locpick__city,.locpick__card .locpick__note{
text-shadow:0 1px 16px rgba(0,16,30,.55);
}
/* ============================================================
HOMEPAGE "We test" method — solid color, no print, high contrast
(readability over drama; each step gets its own card)
============================================================ */
.process{background:var(--ink)}
.process .step{background:var(--navy-700);border:1px solid rgba(120,185,205,.2);border-radius:var(--radius-lg);padding:1.9rem 1.6rem}
.process .step h4{color:#fff}
.process .step p{color:#e7eff3}
.process .step__line{display:none}
/* ============================================================
HOMEPAGE — wall of practitioner faces ("people behind the care")
============================================================ */
.facewall{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem 1.3rem}
@media(min-width:640px){.facewall{grid-template-columns:repeat(4,1fr)}}
.facew{margin:0;text-align:center}
.facew img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:transform .4s var(--ease-out),box-shadow .4s var(--ease)}
.facew:hover img{transform:translateY(-5px);box-shadow:var(--shadow)}
.facew figcaption{margin-top:.85rem}
.facew figcaption b{display:block;font-family:var(--display);font-size:1.04rem;color:var(--ink);line-height:1.15;letter-spacing:-.01em}
.facew figcaption span{display:block;font-size:.82rem;color:var(--muted);margin-top:.25rem}
/* ============================================================
IV PAGE — drip menu cards: hover / tap reveals drips + prices
============================================================ */
.iv-menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.6rem}
@media(max-width:960px){.iv-menu-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.iv-menu-grid{grid-template-columns:1fr}}
.ivcat{position:relative;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--paper);overflow:hidden;cursor:pointer;transition:box-shadow .35s var(--ease),transform .35s var(--ease-out),border-color .35s}
.ivcat:hover,.ivcat:focus-within,.ivcat.is-open{box-shadow:var(--shadow);transform:translateY(-4px);border-color:var(--line-cool)}
.ivcat:focus-visible{outline:3px solid var(--teal-glow);outline-offset:3px}
.ivcat__face{padding:1.9rem 1.7rem 1.6rem}
.ivcat__face .ic{width:48px;height:48px;flex:none;border-radius:13px;background:linear-gradient(140deg,var(--teal),var(--navy));display:flex;align-items:center;justify-content:center;color:#fff}
.ivcat__face .ic svg{width:23px;height:23px}
.ivcat__face h4{font-family:var(--display);font-size:1.4rem;margin:.7rem 0 .45rem;color:var(--ink);letter-spacing:-.01em}
.ivcat__face p{font-size:.95rem;color:var(--body);line-height:1.5}
.ivcat__hint{display:inline-flex;align-items:center;gap:.4em;margin-top:1.1rem;font-weight:600;font-size:.84rem;letter-spacing:.02em;color:var(--teal-deep);transition:opacity .3s}
.ivcat__hint svg{width:1em;height:1em}
.ivcat:hover .ivcat__hint,.ivcat:focus-within .ivcat__hint,.ivcat.is-open .ivcat__hint{opacity:0}
.ivcat__menu{max-height:0;opacity:0;overflow:hidden;padding:0 1.7rem;background:linear-gradient(180deg,var(--mist),var(--paper));transition:max-height .45s var(--ease),opacity .35s var(--ease),padding .45s var(--ease)}
.ivcat:hover .ivcat__menu,.ivcat:focus-within .ivcat__menu,.ivcat.is-open .ivcat__menu{max-height:460px;opacity:1;padding:.2rem 1.7rem 1.7rem}
.ivcat__menu ul{list-style:none;margin:0 0 1.1rem}
.ivcat__menu li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.96rem;color:var(--ink)}
.ivcat__menu li:last-child{border-bottom:none}
.ivcat__price{font-weight:700;color:var(--navy);white-space:nowrap}
.ivcat__menu .btn{width:100%;justify-content:center;margin-top:.3rem}
/* ============================================================
PAGE TRANSITION LOADER — blue KOI screen between pages
============================================================ */
.pageload{position:fixed;inset:0;z-index:9990;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.15rem;
background:radial-gradient(120% 120% at 50% 35%, #0a4d63, #013a5e 46%, var(--ink));
transition:opacity .55s var(--ease), visibility .55s}
html:not(.js) .pageload{display:none}
.pageload__logo{width:94px;height:auto;filter:brightness(0) invert(1);animation:pageBob 1.5s var(--ease) infinite}
.pageload__word{font-family:var(--display);font-size:1.35rem;letter-spacing:.34em;text-indent:.34em;color:#fff;animation:pagePulse 1.5s var(--ease) infinite}
@keyframes pageBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@keyframes pagePulse{0%,100%{opacity:.5}50%{opacity:1}}
body.loaded .pageload{opacity:0;visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion:reduce){.pageload__logo,.pageload__word{animation:none}}
/* ============================================================
TREATMENT / INNER PAGE HEADERS — light, no print, dark text
============================================================ */
.subhero{background:var(--shell)}
.subhero::before{display:none}
.subhero .crumbs,.subhero .crumbs a{color:var(--muted)}
.subhero .crumbs a:hover{color:var(--ink)}
.subhero h1,.subhero .display{color:var(--ink);text-shadow:none}
.subhero h1 em{color:var(--navy)}
.subhero p,.subhero .lead{color:var(--body);text-shadow:none}
.subhero .eyebrow,.subhero .eyebrow.on-dark{color:var(--teal-deep);text-shadow:none}
/* ============================================================
BUTTONS — squared corners with a soft highlight glow
============================================================ */
.btn{border-radius:5px;box-shadow:0 0 0 1px rgba(255,255,255,.14) inset, 0 4px 18px -8px rgba(26,144,174,.6)}
.btn:hover{box-shadow:0 0 0 1px rgba(255,255,255,.22) inset, 0 9px 28px -8px rgba(26,144,174,.9)}
.btn:focus-visible{outline:3px solid var(--teal-glow);outline-offset:3px}
.to-top{border-radius:9px}
/* ============================================================
KOI METHOD boxes — white cards, blue type (on the dark band)
============================================================ */
.process .step{background:#fff;border:1px solid rgba(0,69,112,.12);border-radius:var(--radius-lg);padding:1.9rem 1.6rem;box-shadow:0 14px 34px -20px rgba(0,0,0,.6)}
.process .step h4{color:var(--navy)}
.process .step p{color:var(--body)}
.process .step__n{color:var(--navy)}
/* ============================================================
"What we treat" bento — smaller, denser cards (fewer rows)
============================================================ */
.bento{grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:1080px){.bento{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.bento{grid-template-columns:1fr}}
.svc{min-height:236px;padding:1.35rem}
.svc h3{font-size:1.18rem}
.svc__num{top:1.05rem;right:1.15rem;font-size:.85rem}
.svc__tag{font-size:.68rem;margin-bottom:.5rem}
.svc p{font-size:.88rem}
/* ============================================================
SHADED PANELS behind number / stat areas (extra depth)
============================================================ */
.process .stats{background:rgba(255,255,255,.05);border:1px solid rgba(120,185,205,.16);border-radius:var(--radius-lg);padding:.5rem 2rem 1.4rem;margin-top:1.2rem}
.process .stat{border-top-color:rgba(120,185,205,.24)}
.hero__meta{background:rgba(0,18,32,.36);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.09);border-radius:10px;padding:1.2rem 1.6rem}
/* ============================================================
HOME — rotating practitioner photo (people behind the care)
============================================================ */
.faceshow{position:relative;width:100%;aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.faceshow__slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.1s ease}
.faceshow__slide.is-active{opacity:1}
.faceshow__slide img{width:100%;height:100%;object-fit:cover}
.faceshow__slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.5rem 1.6rem;color:#fff;background:linear-gradient(transparent,rgba(0,36,61,.88))}
.faceshow__slide figcaption b{display:block;font-family:var(--display);font-size:1.25rem;letter-spacing:-.01em}
.faceshow__slide figcaption span{font-size:.85rem;color:#cfe0e8}
/* ============================================================
HERO — centered layout (eyebrow, headline, copy, CTA, stats)
============================================================ */
.hero__inner .container{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero__inner .eyebrow{justify-content:center}
.hero__inner .hero__sub{max-width:60ch;margin-left:auto;margin-right:auto}
.hero__inner .hero__cta{justify-content:center}
.hero__inner .hero__meta{justify-content:center}
.hero h1 em{color:#fff} /* white italic accents read cleanly over the video */
/* longer headline: reveal the extra words in sequence */
body.entered .hero-h1 .hw:nth-child(6){transition-delay:.99s}
body.entered .hero-h1 .hw:nth-child(7){transition-delay:1.15s}
/* Hero KOI logo — big, centered, white over the video */
.hero__logo{width:clamp(150px,17vw,230px);height:auto;filter:brightness(0) invert(1);margin:0 auto .4rem;display:block}
/* Approach strip (relocated from hero) */
.approach-bar{background:var(--shell);padding-block:1.5rem;border-bottom:1px solid var(--line)}
.approach-bar .container{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}
.approach-bar__item{font-family:var(--sans);font-weight:600;font-size:.82rem;letter-spacing:.24em;text-transform:uppercase;color:var(--teal-deep)}
.approach-bar__dot{color:var(--brass);font-size:.9rem}
/* Approach strip — dark navy (KOI logo blue), white text, left→right glare */
.approach-bar{background:var(--ink);border-bottom:none;position:relative;overflow:hidden}
.approach-bar .container{position:relative;z-index:1}
.approach-bar__item{color:#fff}
.approach-bar__dot{color:var(--brass)}
.approach-bar::after{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;pointer-events:none;z-index:2;
background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.16) 48%, rgba(135,215,235,.16) 54%, transparent 82%);
transform:translateX(-170%) skewX(-20deg);
animation:approachGlare 5.5s cubic-bezier(.45,0,.2,1) infinite}
@keyframes approachGlare{0%{transform:translateX(-170%) skewX(-20deg)}55%,100%{transform:translateX(360%) skewX(-20deg)}}
@media (prefers-reduced-motion:reduce){.approach-bar::after{display:none}}
/* Hero stats panel — lighter frosted-white glass, numbers spread wider */
.hero__meta{background:rgba(255,255,255,.14);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);border:1px solid rgba(255,255,255,.28);border-radius:12px;padding:1.5rem clamp(1.8rem,4vw,3rem);gap:clamp(2.2rem,6vw,4.5rem)}
.hero__meta span{color:#e7eef2}
/* ============================================================
KOI METHOD — water background drifting left↔right
============================================================ */
.process{position:relative;overflow:hidden}
.process::before{content:"";position:absolute;top:-6%;bottom:-6%;left:-20%;width:140%;z-index:0;
background:url(../img/koi-hero-poster.jpg) center/cover;
animation:waterDrift 32s ease-in-out infinite alternate}
.process::after{content:"";position:absolute;inset:0;z-index:0;
background:linear-gradient(180deg, rgba(1,40,64,.8) 0%, rgba(3,50,78,.5) 42%, rgba(3,50,78,.5) 62%, rgba(1,40,64,.76) 100%)}
.process > .container{position:relative;z-index:1}
@keyframes waterDrift{from{transform:translateX(0)}to{transform:translateX(-14%)}}
@media (prefers-reduced-motion:reduce){.process::before{animation:none}}
.process .s-head .display,.process .s-head .lead{text-shadow:0 2px 18px rgba(0,18,32,.5)}
/* method cards enter one by one */
.steps .step:nth-child(1){transition-delay:.05s}
.steps .step:nth-child(2){transition-delay:.30s}
.steps .step:nth-child(3){transition-delay:.55s}
.steps .step:nth-child(4){transition-delay:.80s}
/* stats: drop the box, give the numbers a distinct (light sans) font */
.process .stats{background:none;border:none;padding:0}
.process .stat b{font-family:var(--sans);font-weight:300;letter-spacing:-.01em;text-shadow:0 2px 16px rgba(0,18,32,.5)}
.process .stat span{text-shadow:0 1px 10px rgba(0,18,32,.45)}
.hero-h1 em{font-family:'Gilda Display',serif;font-weight:400}
/* People photo — blend into the white background, just a soft shadow (no framed box) */
.faceshow{border-radius:12px;box-shadow:0 34px 66px -38px rgba(0,36,61,.3)}
/* Hero accent words (science, nature): same Gilda font, upright, with a light glare sweep */
.hero .hero-h1 em{
font-family:'Gilda Display',serif;font-style:normal;font-weight:400;
background:linear-gradient(100deg,#fff 0%,#fff 40%,#a8e8f5 50%,#fff 60%,#fff 100%);
background-size:230% 100%;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
animation:heroGlare 4.5s ease-in-out infinite;
}
@keyframes heroGlare{0%{background-position:165% 0}55%,100%{background-position:-65% 0}}
@media (prefers-reduced-motion:reduce){.hero .hero-h1 em{animation:none;-webkit-text-fill-color:#fff;color:#fff}}
/* science & nature: italic (Gilda has no italic face, so allow synthesized oblique) */
.hero .hero-h1 em{font-style:italic;font-synthesis:style}
/* Hero headline: keep each phrase on one line (break only at the
) */
.hero-h1{white-space:nowrap}
@media(max-width:600px){.hero-h1{white-space:normal}}
/* science & nature: dark blue (KOI logo navy) with a white glare sweeping across */
.hero .hero-h1 em{
background:linear-gradient(100deg,#00243d 0%,#00243d 37%,#ffffff 49%,#eaf6ff 51%,#00243d 63%,#00243d 100%);
background-size:235% 100%;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
}
@media (prefers-reduced-motion:reduce){.hero .hero-h1 em{-webkit-text-fill-color:#00243d;color:#00243d}}
/* ============================================================
"What we treat" cards — floating images + slow one-by-one slide-down
============================================================ */
.svc{box-shadow:0 30px 62px -34px rgba(0,36,61,.42)}
.svc:hover{box-shadow:0 40px 80px -34px rgba(0,36,61,.5)}
.bento .svc{opacity:0;transform:translateY(-36px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out),box-shadow .4s var(--ease)}
.bento .svc.in{opacity:1;transform:none}
.bento .svc:nth-child(1){transition-delay:.05s}
.bento .svc:nth-child(2){transition-delay:.20s}
.bento .svc:nth-child(3){transition-delay:.35s}
.bento .svc:nth-child(4){transition-delay:.50s}
.bento .svc:nth-child(5){transition-delay:.65s}
.bento .svc:nth-child(6){transition-delay:.80s}
.bento .svc:nth-child(7){transition-delay:.95s}
@media (prefers-reduced-motion:reduce){.bento .svc{opacity:1;transform:none;transition:none}}
/* ============================================================
"What we treat" — rotating coverflow (center highlighted, rest angled back)
============================================================ */
.tcarousel{position:relative;margin-top:3rem;height:clamp(430px,50vw,580px);perspective:1800px;overflow:hidden}
.tcarousel .svc{
position:absolute;top:50%;left:50%;margin:0;min-height:0;padding:1.7rem;cursor:pointer;
width:clamp(280px,34vw,440px);height:clamp(390px,46vw,540px);
transform:translate(-50%,-50%);transform-style:preserve-3d;backface-visibility:hidden;
transition:transform 1s var(--ease-out),opacity 1s var(--ease-out),box-shadow .5s var(--ease);
will-change:transform,opacity}
.js .tcarousel .svc{opacity:0}
.tcarousel .svc.is-center{box-shadow:0 54px 104px -34px rgba(0,36,61,.72);cursor:default}
.tcarousel .svc.is-center h3{font-size:clamp(1.5rem,2.4vw,2rem)}
.tcarousel .svc.is-center p{max-height:10em;opacity:1;margin-top:.7rem}
.tcarousel .svc.is-center .svc__more{opacity:1;transform:none}
.tcarousel .svc__num{top:1.3rem;right:1.4rem;font-size:1rem}
/* Hero headline — final: Prata (locked) */
.hero-h1{font-family:'Prata',serif;font-weight:400;letter-spacing:0;line-height:1.16}
.hero .hero-h1 em{font-family:'Prata',serif}
/* Treatment (carousel) card titles in Prata, to match the "What we treat" section */
.svc h3{font-family:'Prata',serif;font-weight:400}
/* "What we treat" — balance the dash: match one on the other side so it's centered */
#services .eyebrow::after{content:"";width:26px;height:1px;background:currentColor;opacity:.5}
/* "What we treat" — one dash centered beneath the label (not flanking) */
#services .eyebrow{flex-direction:column;gap:.7em}
#services .eyebrow::before{display:none}
#services .eyebrow::after{width:36px;margin:0 auto}
/* "The KOI method" eyebrow — dash centered beneath, like "What we treat" */
#process .eyebrow{flex-direction:column;gap:.7em}
#process .eyebrow::before{display:none}
#process .eyebrow::after{content:"";width:36px;height:1px;background:currentColor;opacity:.6;margin:0 auto}
/* ===== Carousel teal-deep arrows (thin, both sides) ===== */
.tcarousel{position:relative}
.tc-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:200;width:56px;height:56px;
display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;
color:var(--brass);transition:transform .3s var(--ease-out),color .3s}
.tc-arrow svg{width:46px;height:46px}
.tc-arrow--prev{left:1.5%}
.tc-arrow--next{right:1.5%}
.tc-arrow:hover{color:#004570}
.tc-arrow--prev:hover{transform:translateY(-50%) translateX(-5px)}
.tc-arrow--next:hover{transform:translateY(-50%) translateX(5px)}
@media(max-width:720px){.tc-arrow{width:40px;height:40px}.tc-arrow svg{width:32px;height:32px}}
/* ===== KOI method boxes: blue frosted glass ===== */
.process .step{background:rgba(15,95,135,.3);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
border:1px solid rgba(255,255,255,.28);box-shadow:0 22px 55px -30px rgba(0,20,35,.65)}
.process .step h4{color:#fff}
.process .step p{color:#eaf3f7}
.process .step__n{color:#fff}
/* ===== KOI method numbers: glare running left→right, 100% biggest ===== */
.process .stat b{font-family:var(--sans);font-weight:300;letter-spacing:-.01em;text-shadow:none;
background:linear-gradient(100deg,#cfe0e8 0%,#cfe0e8 42%,#ffffff 50%,#cfe0e8 58%,#cfe0e8 100%);
background-size:250% 100%;-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;animation:statGlare 4s ease-in-out infinite}
.process .stat:nth-child(1) b{animation-delay:0s}
.process .stat:nth-child(2) b{animation-delay:.5s}
.process .stat:nth-child(3) b{animation-delay:1s}
.process .stat:nth-child(4) b{animation-delay:1.5s;
background:linear-gradient(100deg,#cfe0e8 0%,#cfe0e8 32%,#ffffff 50%,#cfe0e8 68%,#cfe0e8 100%);
background-size:250% 100%;-webkit-background-clip:text;background-clip:text}
@keyframes statGlare{0%{background-position:175% 0}55%,100%{background-position:-75% 0}}
@media (prefers-reduced-motion:reduce){.process .stat b{animation:none;-webkit-text-fill-color:#eaf3f7;color:#eaf3f7}}
/* Teal-deep frosted-glass button (Meet the Team) */
.btn--bronze-glass{--bg:rgba(15,122,149,.8);--fg:#fff;--bd:rgba(15,122,149,.55);
backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
box-shadow:0 12px 34px -8px rgba(15,122,149,.6), 0 0 0 1px rgba(255,255,255,.12) inset}
.btn--bronze-glass:hover{--bg:rgba(0,69,112,.9);--bd:rgba(0,69,112,.7);
box-shadow:0 16px 40px -8px rgba(15,122,149,.8), 0 0 0 1px rgba(255,255,255,.18) inset}
/* Carousel arrows out in the white margins (clear of the card images) */
.tcarousel{overflow:visible}
.tc-arrow--prev{left:calc(-1 * (100vw - 100%) / 2 + 1.6rem)}
.tc-arrow--next{right:calc(-1 * (100vw - 100%) / 2 + 1.6rem)}
@media(max-width:900px){
.tc-arrow--prev{left:.4rem}
.tc-arrow--next{right:.4rem}
}
/* ============================================================
WAVE PAGE TRANSITION — panel of wave footage covers/reveals
============================================================ */
.wave-cover{position:fixed;inset:0;z-index:9996;pointer-events:none;transform:translateY(100%);
background:linear-gradient(160deg,#0a4d63,#013a5e 45%,var(--ink))}
html:not(.js) .wave-cover{display:none}
.wave-cover video{width:100%;height:100%;object-fit:cover;display:block}
.wave-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(1,50,80,.28),rgba(0,36,61,.5))}
.wave-cover.cover{transform:translateY(0);transition:transform .75s cubic-bezier(.76,0,.24,1)}
.wave-cover.reveal{transform:translateY(-100%);transition:transform .85s cubic-bezier(.76,0,.24,1)}
@media (prefers-reduced-motion:reduce){.wave-cover{display:none}}
/* ===== Treatment-page header: blurred blue-water background ===== */
.subhero{position:relative;overflow:hidden;background:#d7e9ef}
.subhero::before{content:"";display:block;position:absolute;inset:-12%;z-index:0;
background:url(../img/koi-hero-poster.jpg) center/cover;filter:blur(28px) saturate(1.15);opacity:.45}
.subhero::after{content:"";position:absolute;inset:0;z-index:0;
background:linear-gradient(155deg,rgba(215,233,239,.5),rgba(166,205,224,.35))}
.subhero .crumbs,.subhero__grid{position:relative;z-index:1}
/* label VITALITY · BHRT · TRT → bigger Prata in a frosted padded pill */
.subhero .eyebrow{font-family:'Prata',serif;font-size:1.2rem;letter-spacing:.1em;color:var(--ink);
background:rgba(255,255,255,.68);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
padding:.5em 1.2em;border-radius:999px;text-shadow:none;box-shadow:0 6px 20px -10px rgba(0,36,61,.35)}
.subhero .eyebrow::before{display:none}
/* ===== Wave transition: left→right wipe, cropped to the wave ===== */
.wave-cover{transform:translateX(-100%)}
.wave-cover video{object-position:center 58%;transform:scale(1.32)}
.wave-cover.cover{transform:translateX(0);transition:transform .8s cubic-bezier(.7,0,.2,1)}
.wave-cover.reveal{transform:translateX(100%);transition:transform .9s cubic-bezier(.7,0,.2,1)}
/* ===== All buttons: teal-deep, slightly rounded ===== */
.btn{--bg:var(--brass);--fg:#fff;--bd:var(--brass);border-radius:11px;
box-shadow:0 0 0 1px rgba(255,255,255,.14) inset, 0 5px 18px -8px rgba(15,122,149,.55)}
.btn:hover{--bg:#004570;--bd:#004570;
box-shadow:0 0 0 1px rgba(255,255,255,.2) inset, 0 9px 28px -8px rgba(15,122,149,.85)}
/* ===== "Our approach" (flow) section ===== */
.flow-head{text-align:center;margin-inline:auto}
.flow-head .eyebrow{font-family:'Prata',serif;font-size:1.5rem;letter-spacing:.12em;color:var(--ink);justify-content:center}
.flow-head .eyebrow::before{display:none}
.flow-heading{font-family:var(--sans);font-weight:400;font-size:clamp(1.35rem,2.3vw,1.8rem);color:var(--ink);margin-top:1rem;line-height:1.3;letter-spacing:0}
.flow-heading .serif-accent{font-family:var(--sans);font-style:normal;font-weight:500;color:var(--navy)}
.flow-head .lead{margin-left:auto;margin-right:auto}
.flow__item{background:rgba(16,92,130,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.25);box-shadow:0 20px 50px -28px rgba(0,20,35,.5)}
.flow__item:hover{border-color:rgba(255,255,255,.5)}
.flow__item .flow__n{color:#fff}
.flow__item h4{color:#fff}
.flow__item p{color:#e9f2f6}
/* ===== Subhero label: no pill, centered Prata ===== */
.subhero .eyebrow{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;box-shadow:none;border-radius:0;display:flex;justify-content:center;font-size:1.4rem}
.subhero .eyebrow::before{display:none}
/* ===== KOI method boxes: no numbers, titles up + centered ===== */
.process .step{text-align:center}
.process .step h4{margin-top:0}
/* ===== Wave transition v2: full-screen video plays (crash), fades in/out ===== */
.wave-cover{transform:none;opacity:0;visibility:hidden;transition:opacity .32s ease,visibility .32s ease}
.wave-cover.show{opacity:1;visibility:visible;transition:opacity .18s ease}
.wave-cover video{object-position:center 55%;transform:scale(1.15)}
/* ===== Wave transition v3: sweeps in from left, recedes downward ===== */
.wave-cover{opacity:1;visibility:visible;transition:none;transform:translateX(-100%)}
.wave-in .wave-cover{transform:translateX(0)}
.wave-cover video{object-position:center 55%;transform:scale(1.12)}
/* ===== Wave transition v4: SVG wave shape sweeps in from left ===== */
.wave-cover{top:0;left:0;right:auto;bottom:auto;width:118vw;height:100vh;background:none;
transform:translateX(-100%);opacity:1;visibility:visible;transition:none}
.wave-cover::after{display:none}
.wave-in .wave-cover{transform:translateX(0)}
.wave-cover__svg{width:100%;height:100%;display:block}
/* ensure full coverage while the wave is over the page */
.wave-cover{width:125vw}
/* ===== Treatment header as full-bleed video, content centered ===== */
.subhero--video{position:relative;min-height:84vh;display:flex;align-items:center;overflow:hidden;background:var(--ink);padding-block:clamp(3.5rem,8vw,6rem)}
.subhero--video::before,.subhero--video::after{display:none}
.subhero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.subhero__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(1,42,66,.5),rgba(0,30,50,.64))}
.subhero--video .container{position:relative;z-index:2;width:100%}
.subhero--video .crumbs{display:flex;justify-content:center;color:#cde3ea}
.subhero--video .crumbs a{color:#cde3ea}
.subhero__center{text-align:center;max-width:860px;margin:1.5rem auto 0;display:flex;flex-direction:column;align-items:center}
.subhero--video .eyebrow{color:#fff}
.subhero--video h1,.subhero--video .display{color:#fff;max-width:22ch}
.subhero--video h1 em{color:#cff2f8}
.subhero--video p{color:#eaf3f7;max-width:56ch}
.subhero--video .subhero__cta{justify-content:center;margin-top:2rem}
/* ===== Wave transition: real ocean footage, soft leading edge ===== */
.wave-cover__svg{display:none}
.wave-cover{width:130vw;transform:translateX(-100%);background:var(--ink);overflow:hidden}
.wave-in .wave-cover{transform:translateX(0)}
.wave-cover__vid{width:100%;height:100%;object-fit:cover;object-position:center;display:block;
-webkit-mask:linear-gradient(90deg,#000 0,#000 85%,transparent 100%);
mask:linear-gradient(90deg,#000 0,#000 85%,transparent 100%)}
/* Treatment header: big Prata name + smaller italic tagline */
.subhero--video h1,.subhero--video .display{font-family:'Prata',serif;font-weight:400}
.subhero__tag{display:block;font-family:'Prata',serif;font-style:italic;font-weight:400;font-size:clamp(1.1rem,2.4vw,1.8rem);color:#cff2f8;margin-top:.7rem;white-space:nowrap;letter-spacing:0;line-height:1.2}
/* "Our approach" section: blurred blue background */
.flow-section{position:relative;overflow:hidden;background:#dceaef}
.flow-section::before{content:"";position:absolute;inset:-10%;z-index:0;background:url(../img/koi-hero-poster.jpg) center/cover;filter:blur(30px) saturate(1.1);opacity:.42}
.flow-section::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(rgba(215,233,239,.5),rgba(166,205,224,.42))}
.flow-section .container{position:relative;z-index:1}
/* Our approach: make the blurred water background clearly visible */
.flow-section{background:#cfe3ea}
.flow-section::before{inset:-14%;filter:blur(26px) saturate(1.25) brightness(1.06);opacity:.72}
.flow-section::after{background:linear-gradient(rgba(206,227,235,.24),rgba(150,196,216,.28))}
/* Our approach: heavier blur */
.flow-section::before{inset:-22%;filter:blur(60px) saturate(1.3) brightness(1.07);opacity:.75}
/* Wave transition: foam-only — black sand drops out, only the water shows */
.wave-cover{background:none}
.wave-cover__vid{mix-blend-mode:screen;-webkit-mask:none;mask:none}
/* Wave transition: blend at the layer level so the page shows through the black */
.wave-cover{mix-blend-mode:screen;background:none}
.wave-cover__vid{mix-blend-mode:normal;background:none}
/* Wave transition v5: blend on the outer layer, sweep on the inner (reliable black-dropout) */
.wave-cover{position:fixed;inset:0;width:100vw;height:100vh;transform:none;mix-blend-mode:screen;background:none;overflow:hidden;opacity:1;visibility:visible}
.wave-in .wave-cover{transform:none}
.wave-cover__inner{position:absolute;top:0;left:0;width:130vw;height:100%;transform:translateX(-100%)}
.wave-in .wave-cover__inner{transform:translateX(0)}
.wave-cover__vid{width:100%;height:100%;object-fit:cover;object-position:center;mix-blend-mode:normal;-webkit-mask:none;mask:none;display:block}
/* ============================================================
WAVE TRANSITION — single authoritative definition
(supersedes every earlier .wave-cover block above)
============================================================ */
.pageload{display:none !important}
.wave-cover{position:fixed !important;inset:0 !important;width:100vw !important;height:100vh !important;
z-index:9996;pointer-events:none;overflow:hidden;background:none !important;filter:none !important;
mix-blend-mode:screen;transform:none !important;opacity:1 !important;visibility:visible !important;transition:none !important}
.wave-cover::before,.wave-cover::after{display:none !important;content:none !important}
.wave-cover.cover,.wave-cover.reveal,.wave-cover.show{transform:none !important}
.wave-cover__svg{display:none !important}
html:not(.js) .wave-cover,html.reduce .wave-cover{display:none !important}
.wave-cover__inner{position:absolute;top:0;left:0;width:130vw;height:100%;transform:translateX(-106%)}
.wave-in .wave-cover__inner{transform:translateX(0)}
.wave-in .wave-cover{transform:none !important}
.wave-cover video,.wave-cover__vid{position:static !important;width:100% !important;height:100% !important;
object-fit:cover !important;object-position:center !important;transform:none !important;
mix-blend-mode:normal !important;-webkit-mask:none !important;mask:none !important;display:block !important;opacity:1 !important}
@media (prefers-reduced-motion:reduce){.wave-cover{display:none !important}}
/* ============================================================
WAVE v6 — opacity fade, bulletproof (hidden unless .is-on)
============================================================ */
.wave-cover{position:fixed !important;inset:0 !important;width:100vw !important;height:100vh !important;
z-index:9996;pointer-events:none;background:none !important;filter:none !important;mix-blend-mode:screen;
overflow:hidden;opacity:0 !important;visibility:hidden !important;transform:none !important;
transition:opacity .4s ease, visibility .4s ease !important}
.wave-cover.is-on,.wave-in .wave-cover{opacity:1 !important;visibility:visible !important;transition:opacity .22s ease !important}
.wave-cover__inner{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;transform:none !important}
.wave-cover__vid{width:100% !important;height:100% !important;object-fit:cover !important;object-position:center !important;mix-blend-mode:normal !important;transform:none !important;display:block !important}
@media (prefers-reduced-motion:reduce){.wave-cover{display:none !important}}
/* WAVE v6b — full-screen cover (the whole ocean rolls over the page, then reveals) */
.wave-cover{mix-blend-mode:normal !important;background:#00243d !important}
.wave-cover__vid{mix-blend-mode:normal !important;opacity:1 !important}
/* WAVE v6c — KOI-navy screen with white foam over it (covers page + reads bright) */
.wave-cover{mix-blend-mode:normal !important;background:linear-gradient(160deg,#0a5a72 0%,#04496a 38%,#013a5e 68%,#00243d 100%) !important}
.wave-cover__vid{mix-blend-mode:screen !important;opacity:1 !important}
/* WAVE FINAL — black dropped (page shows through), only white water washes over */
.wave-cover{mix-blend-mode:screen !important;background:none !important}
.wave-cover__vid{mix-blend-mode:normal !important;opacity:1 !important}
/* crush the dark water to black so only the bright foam survives the screen-blend */
.wave-cover__vid{filter:brightness(.8) contrast(2.6) !important}
/* WAVE FINAL2 — bright teal ocean fills the screen, strong white foam over it */
.wave-cover{mix-blend-mode:normal !important;overflow:hidden;
background:linear-gradient(155deg,#1a90ae 0%,#0f7a95 45%,#0a5570 100%) !important;
opacity:0 !important;visibility:hidden !important;transition:opacity .35s ease,visibility .35s ease !important}
.wave-cover.is-on,.wave-in .wave-cover{opacity:1 !important;visibility:visible !important;transition:opacity .2s ease !important}
.wave-cover__vid{mix-blend-mode:screen !important;filter:brightness(1.15) contrast(1.9) saturate(1.1) !important;
opacity:1 !important;object-fit:cover !important;width:100% !important;height:100% !important}
/* ===== "What we address" cards: centered Prata, blurry boxes, red cycle ===== */
.cards-head{text-align:center;margin-inline:auto}
.cards-head .eyebrow{font-family:'Prata',serif;font-size:1.5rem;letter-spacing:.12em;color:var(--ink);justify-content:center}
.cards-head .eyebrow::before{display:none}
.cards-heading{font-family:var(--sans);font-weight:400;font-size:clamp(1.35rem,2.4vw,1.85rem);color:var(--ink);margin-top:1rem;line-height:1.25;letter-spacing:0}
/* blurry frosted boxes, everything centered */
.tcards--glow .tcard{position:relative;text-align:center;background:rgba(255,255,255,.45);
backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
border:1px solid rgba(255,255,255,.65);overflow:visible}
.tcards--glow .tcard .ic{margin-left:auto;margin-right:auto}
/* light-red highlight that travels box → box, one at a time */
.tcards--glow .tcard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
border:2px solid transparent;opacity:0;animation:cardRedCycle 9s ease-in-out infinite}
.tcards--glow .tcard:nth-child(1)::after{animation-delay:0s}
.tcards--glow .tcard:nth-child(2)::after{animation-delay:1.5s}
.tcards--glow .tcard:nth-child(3)::after{animation-delay:3s}
.tcards--glow .tcard:nth-child(4)::after{animation-delay:4.5s}
.tcards--glow .tcard:nth-child(5)::after{animation-delay:6s}
.tcards--glow .tcard:nth-child(6)::after{animation-delay:7.5s}
@keyframes cardRedCycle{
0%{opacity:1;border-color:rgba(255,105,105,.95);box-shadow:0 0 26px 4px rgba(255,90,90,.55), inset 0 0 24px rgba(255,120,120,.25)}
14%{opacity:1;border-color:rgba(255,105,105,.95);box-shadow:0 0 26px 4px rgba(255,90,90,.55), inset 0 0 24px rgba(255,120,120,.25)}
17%{opacity:0;border-color:transparent;box-shadow:none}
100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){.tcards--glow .tcard::after{animation:none}}
/* red cycle: lighter + slower */
.tcards--glow .tcard::after{animation-duration:15s}
.tcards--glow .tcard:nth-child(2)::after{animation-delay:2.5s}
.tcards--glow .tcard:nth-child(3)::after{animation-delay:5s}
.tcards--glow .tcard:nth-child(4)::after{animation-delay:7.5s}
.tcards--glow .tcard:nth-child(5)::after{animation-delay:10s}
.tcards--glow .tcard:nth-child(6)::after{animation-delay:12.5s}
@keyframes cardRedCycle{
0%{opacity:1;border-color:rgba(255,170,170,.7);box-shadow:0 0 22px 3px rgba(255,155,155,.3), inset 0 0 18px rgba(255,180,180,.1)}
13%{opacity:1;border-color:rgba(255,170,170,.7);box-shadow:0 0 22px 3px rgba(255,155,155,.3), inset 0 0 18px rgba(255,180,180,.1)}
16%{opacity:0;border-color:transparent;box-shadow:none}
100%{opacity:0}
}
/* cards: frosted blue-gray (contrast against the white) + soft back shadow */
.tcards--glow .tcard{background:rgba(146,168,184,.26) !important;
backdrop-filter:blur(16px) saturate(1.2) !important;-webkit-backdrop-filter:blur(16px) saturate(1.2) !important;
border:1px solid rgba(255,255,255,.5) !important;
box-shadow:0 22px 50px -24px rgba(0,36,61,.55), 0 4px 14px -6px rgba(0,36,61,.25) !important}
/* cards: bright clear frosted glass, NO dark shadow; red glow IS the traveling shadow */
.tcards--glow .tcard{background:rgba(255,255,255,.32) !important;
backdrop-filter:blur(18px) saturate(1.4) !important;-webkit-backdrop-filter:blur(18px) saturate(1.4) !important;
border:1px solid rgba(255,255,255,.6) !important;
box-shadow:none !important}
.tcards--glow .tcard::after{border-color:transparent !important}
@keyframes cardRedCycle{
0%{opacity:0;box-shadow:0 0 0 0 rgba(255,120,120,0)}
4%{opacity:1;box-shadow:0 20px 46px 4px rgba(255,120,120,.55), 0 0 28px 2px rgba(255,145,145,.4)}
13%{opacity:1;box-shadow:0 20px 46px 4px rgba(255,120,120,.55), 0 0 28px 2px rgba(255,145,145,.4)}
17%{opacity:0;box-shadow:0 0 0 0 rgba(255,120,120,0)}
100%{opacity:0;box-shadow:0 0 0 0 rgba(255,120,120,0)}
}
/* homepage: stats — drop the blur box, keep the info floating */
.hero__meta{background:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
border:0 !important;box-shadow:none !important;padding-left:0 !important;padding-right:0 !important}
/* carousel: remove the 01/02/03/04 numbers */
.svc__num{display:none !important}
/* cards: visible frosted glass (not white-on-white); no drop shadow — red glow is the only shadow */
.tcards--glow .tcard{
background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(206,224,234,.42)) !important;
backdrop-filter:blur(16px) saturate(1.35) !important;-webkit-backdrop-filter:blur(16px) saturate(1.35) !important;
border:1px solid rgba(255,255,255,.75) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.6) !important}
/* timeline head: Prata centered eyebrow; smaller regular heading kept left */
.tl-head{text-align:left}
.tl-eyebrow{font-family:'Prata',serif;font-size:clamp(1.7rem,2.8vw,2.25rem);letter-spacing:.12em;
color:var(--ink);display:flex;justify-content:center;text-align:center;margin-bottom:1.3rem}
.tl-eyebrow::before{display:none}
.tl-heading{font-family:var(--sans);font-weight:600;font-size:clamp(1.35rem,2.3vw,1.85rem);
line-height:1.22;letter-spacing:0;color:var(--navy);text-align:left;margin-top:.3rem}
.tl-heading .serif-accent{font-family:var(--sans);font-style:normal;color:inherit}
.tl-intro{margin-top:1rem}
/* timeline rows: flow in from top-left toward bottom-right, one by one */
.tl .tl__row{opacity:0;transform:translate(-52px,-36px);
transition:opacity 1.15s cubic-bezier(.2,.7,.2,1),transform 1.15s cubic-bezier(.2,.7,.2,1)}
.tl .tl__row.in{opacity:1;transform:none}
.tl .tl__row:nth-child(1){transition-delay:.05s}
.tl .tl__row:nth-child(2){transition-delay:.30s}
.tl .tl__row:nth-child(3){transition-delay:.55s}
.tl .tl__row:nth-child(4){transition-delay:.80s}
@media (prefers-reduced-motion:reduce){.tl .tl__row{opacity:1;transform:none;transition:none}}
/* cards: DARK-BLUE frosted blur (translucent), white text; red glow stays the traveling shadow */
.tcards--glow .tcard{
background:linear-gradient(160deg,rgba(38,96,120,.62),rgba(20,66,88,.66)) !important;
backdrop-filter:blur(14px) saturate(1.25) !important;-webkit-backdrop-filter:blur(14px) saturate(1.25) !important;
border:1px solid rgba(255,255,255,.16) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.14) !important}
.tcards--glow .tcard h4{color:#fff !important}
.tcards--glow .tcard p{color:rgba(255,255,255,.86) !important}
/* timeline v2: diagonal staircase — steps from top-left to bottom-right, flows in one by one */
.tl{max-width:none}
.tl::before{display:none !important} /* drop the straight vertical spine */
.tl .tl__row{padding-bottom:2.6rem}
@media (min-width:820px){
.tl .tl__row:nth-child(1){margin-left:0}
.tl .tl__row:nth-child(2){margin-left:13%}
.tl .tl__row:nth-child(3){margin-left:26%}
.tl .tl__row:nth-child(4){margin-left:39%}
}
/* flow-in: descend from above-left, slowly, one after another */
.tl .tl__row{opacity:0;transform:translate(-24px,-40px);
transition:opacity 1.2s cubic-bezier(.22,.68,.24,1),transform 1.2s cubic-bezier(.22,.68,.24,1)}
.tl .tl__row.in{opacity:1;transform:none}
.tl .tl__row:nth-child(1){transition-delay:.05s}
.tl .tl__row:nth-child(2){transition-delay:.55s}
.tl .tl__row:nth-child(3){transition-delay:1.05s}
.tl .tl__row:nth-child(4){transition-delay:1.55s}
@media (prefers-reduced-motion:reduce){.tl .tl__row{opacity:1;transform:none;transition:none}}
/* cards: push to true frosted GLASS — translucent dark blue, strong blur, glassy sheen */
.tcards--glow .tcard{
background:linear-gradient(150deg,rgba(58,112,136,.5),rgba(22,70,93,.56)) !important;
backdrop-filter:blur(22px) saturate(1.5) !important;-webkit-backdrop-filter:blur(22px) saturate(1.5) !important;
border:1px solid rgba(255,255,255,.24) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -34px 60px rgba(9,38,56,.4) !important}
/* timeline v3: HORIZONTAL — four stages left→right, connected by a top track, reveal one by one */
@media (min-width:820px){
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:1.8rem;max-width:none;margin-top:3.4rem;
position:relative;align-items:start}
.tl::before{display:block !important;content:"";position:absolute;left:9px;right:9px;top:8px;
bottom:auto;width:auto;height:2px;background:var(--line-cool)}
.tl .tl__row{margin-left:0 !important;padding:2.9rem 1.1rem 0 0}
.tl .tl__row::before{left:0;top:0}
.tl .tl__row p{max-width:none}
/* flow in one by one, left → right */
.tl .tl__row{transform:translate(-30px,0)}
.tl .tl__row.in{transform:none}
.tl .tl__row:nth-child(1){transition-delay:.05s}
.tl .tl__row:nth-child(2){transition-delay:.45s}
.tl .tl__row:nth-child(3){transition-delay:.85s}
.tl .tl__row:nth-child(4){transition-delay:1.25s}
}
/* flowwrap: ONE continuous blur spanning Our Approach + What to Expect (no seam) */
.flowwrap{position:relative;overflow:hidden;background:#cfe3ea}
.flowwrap::before{content:"";position:absolute;inset:-8%;z-index:0;
background:url(../img/koi-hero-poster.jpg) center/cover;
filter:blur(60px) saturate(1.3) brightness(1.07);opacity:.75}
.flowwrap::after{content:"";position:absolute;inset:0;z-index:0;
background:linear-gradient(rgba(206,227,235,.24),rgba(150,196,216,.28))}
.flowwrap > section{position:relative;z-index:1}
/* drop each section's own background + blur layers so only the wrapper's shows */
.flowwrap .flow-section{background:transparent !important;overflow:visible}
.flowwrap .flow-section::before,.flowwrap .flow-section::after{display:none !important}
/* flowwrap: make ALL wrapped sections transparent so the one blur runs behind them (incl. Cherry) */
.flowwrap > section{background:transparent !important}
/* flowwrap: DEEP OCEAN-BLUE wash (matches hero water) + light text inside */
.flowwrap{background:#173b4c !important}
.flowwrap::before{filter:blur(60px) saturate(1.15) brightness(.72) !important;opacity:.7 !important}
.flowwrap::after{background:linear-gradient(rgba(18,49,65,.72),rgba(9,32,46,.82)) !important}
/* Our Approach head */
.flowwrap .flow-head .eyebrow{color:#fff}
.flowwrap .flow-heading,.flowwrap .flow-heading .serif-accent{color:#fff}
.flowwrap .flow-head .lead{color:rgba(255,255,255,.86)}
/* Timeline head + rows */
.flowwrap .tl-eyebrow{color:#fff}
.flowwrap .tl-heading,.flowwrap .tl-heading .serif-accent{color:#fff}
.flowwrap .tl-intro{color:rgba(255,255,255,.86)}
.flowwrap .tl__when{color:#8fd3e4}
.flowwrap .tl__row h4{color:#fff}
.flowwrap .tl__row p{color:rgba(255,255,255,.82)}
.flowwrap .tl::before{background:rgba(255,255,255,.28)}
/* FAQ */
.flowwrap .s-head--center .eyebrow{color:#bfe3ec}
.flowwrap .s-head--center .display{color:#fff}
.flowwrap .faq__item{border-color:rgba(255,255,255,.18)}
.flowwrap .faq__q{color:#fff}
.flowwrap .faq__q .pm{border-color:rgba(255,255,255,.4)}
.flowwrap .faq__q .pm::before,.flowwrap .faq__q .pm::after{background:#cfeaf1}
.flowwrap .faq__a p{color:rgba(255,255,255,.82)}
/* flowwrap: lift the dark — beams of white light (god-rays) + top glow */
.flowwrap::before{filter:blur(60px) saturate(1.2) brightness(.82) !important;opacity:.72 !important}
.flowwrap::after{background:
linear-gradient(102deg,transparent 16%,rgba(255,255,255,.07) 18.5%,transparent 21%,
transparent 43%,rgba(255,255,255,.055) 45.5%,transparent 48%,
transparent 68%,rgba(255,255,255,.08) 70.5%,transparent 73%,
transparent 88%,rgba(255,255,255,.05) 90%,transparent 92%),
radial-gradient(70% 45% at 30% -5%,rgba(255,255,255,.16),transparent 72%),
radial-gradient(55% 40% at 88% 2%,rgba(255,255,255,.11),transparent 70%),
linear-gradient(rgba(18,49,65,.62),rgba(9,32,46,.76)) !important}
/* flowwrap: lighter ocean + water-like light rays (cool aqua, softer, brighter) */
.flowwrap{background:#1f5163 !important}
.flowwrap::before{filter:blur(58px) saturate(1.35) brightness(1.0) !important;opacity:.8 !important}
.flowwrap::after{background:
linear-gradient(99deg,transparent 8%,rgba(214,246,255,.11) 13%,transparent 19%,
transparent 38%,rgba(214,246,255,.085) 43%,transparent 49%,
transparent 62%,rgba(214,246,255,.12) 68%,transparent 74%,
transparent 85%,rgba(214,246,255,.075) 89%,transparent 94%),
radial-gradient(85% 55% at 42% -10%,rgba(255,255,255,.24),transparent 72%),
radial-gradient(50% 40% at 90% 0%,rgba(190,235,248,.14),transparent 70%),
linear-gradient(rgba(26,70,90,.38),rgba(12,42,56,.6)) !important}
/* "What we address" cards → same as their (paper) background, dark text; red glow still travels */
.tcards--glow .tcard{background:#fbfaf7 !important;
backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
border:1px solid rgba(0,0,0,.05) !important;box-shadow:none !important}
.tcards--glow .tcard h4{color:var(--ink) !important}
.tcards--glow .tcard p{color:var(--body) !important}
/* Our Approach cards → white with dark text */
.flowwrap .flow__item{background:#fff !important;border-color:rgba(0,0,0,.06) !important;
box-shadow:0 18px 44px -22px rgba(0,20,35,.35) !important}
.flowwrap .flow__item h4{color:var(--ink) !important}
.flowwrap .flow__item p{color:var(--body) !important}
.flowwrap .flow__item .flow__n{color:var(--navy) !important}
/* Timeline: soft white shadow/glow on each stage */
.flowwrap .tl__row{filter:drop-shadow(0 6px 20px rgba(255,255,255,.22))}
/* Cherry financing card → centered content */
.flowwrap .callout{text-align:center}
.flowwrap .callout p{margin-left:auto;margin-right:auto}
.flowwrap .callout .cta-row{justify-content:center}
/* ==================== WHOLE-PAGE SAND CANVAS ==================== */
html{background:#e4d3b4}
body{background:
linear-gradient(rgba(250,246,238,.5),rgba(250,246,238,.5)),
url(../img/sand-bg.jpg) center top/cover fixed no-repeat !important}
/* light sections go transparent so the sand shows through everywhere */
.bg-paper,.bg-shell,.bg-mist{background:transparent !important}
/* --- undo the ocean-blue band: sand shows, text back to dark --- */
.flowwrap{background:transparent !important}
.flowwrap::before,.flowwrap::after{display:none !important}
.flowwrap .flow-head .eyebrow{color:var(--ink)}
.flowwrap .flow-heading{color:var(--ink)}
.flowwrap .flow-heading .serif-accent{color:var(--navy)}
.flowwrap .flow-head .lead{color:var(--body)}
.flowwrap .tl-eyebrow{color:var(--ink)}
.flowwrap .tl-heading{color:var(--ink)}
.flowwrap .tl-heading .serif-accent{color:var(--navy)}
.flowwrap .tl-intro{color:var(--body)}
.flowwrap .tl__when{color:var(--teal-deep)}
.flowwrap .tl__row h4{color:var(--ink)}
.flowwrap .tl__row p{color:var(--body)}
.flowwrap .tl::before{background:var(--line-cool)}
.flowwrap .tl__row{filter:none}
.flowwrap .s-head--center .eyebrow{color:var(--teal-deep)}
.flowwrap .s-head--center .display{color:var(--ink)}
.flowwrap .faq__item{border-color:var(--line)}
.flowwrap .faq__q{color:var(--ink)}
.flowwrap .faq__q .pm{border-color:var(--line-cool)}
.flowwrap .faq__q .pm::before,.flowwrap .faq__q .pm::after{background:var(--teal-deep)}
.flowwrap .faq__a p{color:var(--body)}
/* sand canvas — performant fixed layer (avoids background-attachment:fixed jank) */
body{background:transparent !important}
body::before{content:"";position:fixed;inset:0;z-index:-1;
background:
linear-gradient(rgba(250,246,238,.5),rgba(250,246,238,.5)),
url(../img/sand-bg.jpg) center center/cover no-repeat}
/* hero fills the whole viewport so no sand shows behind the fold */
.subhero{min-height:100vh}
/* sand canvas: slow, subtle drifting motion (soft-wind feel) */
body::before{transform:scale(1.06);will-change:transform;
animation:sandDrift 46s ease-in-out infinite alternate}
@keyframes sandDrift{
from{transform:scale(1.06) translate(0,0)}
to{transform:scale(1.085) translate(-1.6%,-1.1%)}
}
@media (prefers-reduced-motion:reduce){body::before{animation:none;transform:none}}
/* sand drift: stronger, more visible motion */
body::before{animation-duration:26s !important}
@keyframes sandDrift{
0%{transform:scale(1.1) translate(0,0)}
50%{transform:scale(1.14) translate(-2.6%,-2%)}
100%{transform:scale(1.1) translate(0,0)}
}
/* sand drift: gentle "barely moving" final tuning */
body::before{animation-duration:34s !important}
@keyframes sandDrift{
0%{transform:scale(1.07) translate(0,0)}
50%{transform:scale(1.10) translate(-1.5%,-1.1%)}
100%{transform:scale(1.07) translate(0,0)}
}
/* Cherry: full price + "or pay monthly" block */
.pay-options{display:flex;align-items:center;justify-content:center;gap:1.8rem;
margin:1.6rem 0 .4rem;flex-wrap:wrap}
.pay-col{display:flex;flex-direction:column;align-items:center;gap:.25rem}
.pay-label{font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--teal-deep)}
.pay-amt{font-family:var(--display);font-size:clamp(1.7rem,3vw,2.3rem);line-height:1;color:var(--ink)}
.pay-per{font-family:var(--sans);font-size:.9rem;font-weight:500;color:var(--body);margin-left:.15em}
.pay-or{font-family:var(--display);font-style:italic;font-size:1.1rem;color:var(--body);opacity:.8}
/* ===== confine the sand canvas to the hormones page (.sand-page) only ===== */
html{background:var(--paper)}
body:not(.sand-page){background:var(--paper) !important}
body:not(.sand-page)::before{content:none !important;display:none !important;animation:none !important}
body:not(.sand-page) .bg-paper{background:var(--paper) !important}
body:not(.sand-page) .bg-shell{background:var(--shell) !important}
body:not(.sand-page) .bg-mist{background:var(--mist) !important}
/* treatment hero fills the viewport on every page (full-bleed) */
.subhero--video{min-height:100vh}
/* (removed: wave dividers + enlarged section headers — reverted per request) */
/* sand background: always-on, clearly perceptible drift (overrides reduce-motion) */
body.sand-page::before{animation:sandDrift 28s ease-in-out infinite alternate !important;transform-origin:center}
@keyframes sandDrift{
0%{transform:scale(1.08) translate(0,0)}
50%{transform:scale(1.14) translate(-2.4%,-1.7%)}
100%{transform:scale(1.08) translate(0,0)}
}
/* sand background: slightly darker wash */
body.sand-page::before{
background:
linear-gradient(rgba(58,44,24,.14),rgba(58,44,24,.14)),
linear-gradient(rgba(248,244,236,.30),rgba(248,244,236,.30)),
url(../img/sand-bg.jpg) center center/cover no-repeat !important}
/* IV therapy hero: tagline in smaller regular (upright, sans) font */
.subhero__tag--plain{font-family:var(--sans);font-style:normal;font-weight:400;
font-size:clamp(1rem,1.9vw,1.35rem);color:#eaf7fa;letter-spacing:.01em;margin-top:.9rem}
/* wave page-transition permanently hidden (disabled — was breaking navigation) */
.wave-cover,.wave-in .wave-cover{display:none !important;opacity:0 !important;visibility:hidden !important}
/* IV: "KOI IVs are simply better" — head-to-head comparison */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.8rem;align-items:stretch}
@media(max-width:760px){.vs{grid-template-columns:1fr}}
.vs__col{border-radius:var(--radius-lg);padding:clamp(1.6rem,3vw,2.4rem)}
.vs__col--koi{background:linear-gradient(155deg,#0f6e85,#013a52 78%);color:#fff;box-shadow:var(--shadow-lg)}
.vs__col--them{background:var(--mist);color:var(--body);border:1px solid var(--line-cool)}
.vs__col h3{font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,2.4vw,1.7rem);margin-bottom:1.2rem}
.vs__col--koi h3{color:#fff}
.vs__col--them h3{color:var(--ink);opacity:.6}
.vs__col ul{list-style:none;display:flex;flex-direction:column;gap:.9rem;margin:0;padding:0}
.vs__col li{position:relative;padding-left:2.15rem;line-height:1.5}
.vs__col li::before{content:"";position:absolute;left:0;top:.05em;width:1.45rem;height:1.45rem;border-radius:50%;
display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:700;line-height:1}
.vs__col--koi li::before{content:"\2713";background:rgba(255,255,255,.16);color:#bfe3ec}
.vs__col--them li{opacity:.85}
.vs__col--them li::before{content:"\2715";background:rgba(0,36,61,.06);color:#b0564b}
.vs__quote{max-width:720px;margin:2.6rem auto 0;text-align:center;
font-family:'Newsreader',Georgia,serif;font-style:italic;
font-size:clamp(1.35rem,2.8vw,2rem);line-height:1.35;color:var(--navy)}
/* IV "KOI difference" section: big Prata eyebrow, smaller regular heading */
#why-iv .eyebrow{font-family:'Prata',serif;font-size:clamp(1.75rem,3.2vw,2.6rem);
letter-spacing:.09em;color:var(--teal-deep);justify-content:center}
#why-iv .eyebrow::before{display:none}
#why-iv .display{font-family:var(--sans);font-weight:600;
font-size:clamp(1.4rem,2.5vw,1.85rem);letter-spacing:0;color:var(--ink);margin-top:1rem}
/* hormones: full-page WATER VIDEO background (replaces the sand still) */
body.sand-page::before{display:none !important;animation:none !important}
.page-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#0e2b3a}
.page-bg__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
transform:scale(1.14);filter:blur(22px) saturate(1.15) brightness(.92)}
.page-bg__veil{position:absolute;inset:0;
background:linear-gradient(rgba(240,245,248,.52),rgba(236,243,247,.52))}
@media (prefers-reduced-motion:reduce){.page-bg__vid{filter:blur(22px) saturate(1.05)}}
/* hormones bg: show the ENTIRE video frame, not a cropped/zoomed part */
.page-bg{background:#103648 !important}
.page-bg__vid{object-fit:contain !important;transform:none !important;
filter:blur(20px) saturate(1.18) brightness(.95) !important}
/* hormones bg: let the bright teal show true (lighter veil, no darkening) */
.page-bg__vid{filter:blur(18px) saturate(1.25) brightness(1.02) !important}
.page-bg__veil{background:linear-gradient(rgba(244,249,251,.34),rgba(238,247,250,.34)) !important}
/* hormones: solid-white intro section — 4 therapies + symptom highlight, divides hero from content */
.jump-anchor{display:block;position:relative;top:-90px;height:0;visibility:hidden}
.hormones-intro{background:#fff !important;position:relative;z-index:2}
.htypes{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2.8rem}
@media(max-width:860px){.htypes{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.htypes{grid-template-columns:1fr}}
.htype{border:1px solid var(--line-cool);border-radius:var(--radius);
padding:clamp(1.3rem,2.4vw,1.7rem);background:var(--paper)}
.htype h3{font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,1.5vw,1.2rem);
color:var(--ink);margin-bottom:.55rem;line-height:1.25}
.htype p{font-size:.92rem;color:var(--body);line-height:1.55}
/* hormones intro: "can help with" symptom pills (what the page covers) */
.htags-label{text-align:center;font-family:var(--sans);font-size:.8rem;font-weight:600;
letter-spacing:.13em;text-transform:uppercase;color:var(--teal-deep);margin:2.4rem 0 1rem}
.htags{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;list-style:none;
padding:0;margin:0 auto;max-width:840px}
.htags li{font-size:.9rem;font-weight:500;color:var(--ink);background:var(--mist);
border:1px solid var(--line-cool);border-radius:999px;padding:.55em 1.15em}
/* IV comparison: wider, more separated boxes that slowly bounce apart & back */
@keyframes vsBounceL{0%,100%{transform:translateX(0)}50%{transform:translateX(-18px)}}
@keyframes vsBounceR{0%,100%{transform:translateX(0)}50%{transform:translateX(18px)}}
@media(min-width:760px){
.vs{gap:clamp(2.6rem,6vw,5rem);margin-inline:-3vw}
.vs__col--koi{animation:vsBounceL 4.6s ease-in-out infinite}
.vs__col--them{animation:vsBounceR 4.6s ease-in-out infinite}
}
@media(prefers-reduced-motion:reduce){.vs__col--koi,.vs__col--them{animation:none}}
/* IV comparison v2: wider boxes, depth (front/back) bounce, red glow behind "Typical IV bars" */
@keyframes vsPush{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@media(min-width:760px){
.vs{gap:clamp(1.8rem,3.5vw,3rem);margin-inline:-5vw} /* wider */
.vs__col--koi,.vs__col--them{animation:vsPush 4.2s ease-in-out infinite;will-change:transform}
.vs__col--them{animation-delay:2.1s} /* out of phase: one forward while the other recedes */
}
.vs__col--them{box-shadow:0 22px 58px -14px rgba(200,56,46,.55) !important}
@media(prefers-reduced-motion:reduce){.vs__col--koi,.vs__col--them{animation:none}}
/* hormones hero: accent word in Prata (match the homepage hero), not DM Serif Display */
.sand-page .subhero h1 em{font-family:'Prata',serif !important}
/* hormones intro: therapy cards → frosted blur boxes */
.htype{
background:rgba(255,255,255,.5) !important;
backdrop-filter:blur(16px) saturate(1.35);-webkit-backdrop-filter:blur(16px) saturate(1.35);
border:1px solid rgba(255,255,255,.75) !important;
box-shadow:0 22px 48px -26px rgba(0,36,61,.45), inset 0 1px 0 rgba(255,255,255,.7) !important}
/* hormones intro: therapy card titles → Prata (like the section headers), bigger & readable */
.htype h3{font-family:'Prata',serif !important;font-weight:400 !important;
font-size:clamp(1.3rem,2.1vw,1.7rem) !important;line-height:1.22;color:var(--ink)}
/* What we address: dark-blue boxes, no icons, white text */
.tcards--glow .tcard .ic{display:none !important}
.tcards--glow .tcard{
background:linear-gradient(157deg,#0f6280,#013a52 82%) !important;
backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
border:1px solid rgba(255,255,255,.15) !important;
box-shadow:0 24px 52px -26px rgba(0,18,32,.55) !important}
.tcards--glow .tcard h4{color:#fff !important}
.tcards--glow .tcard p{color:rgba(255,255,255,.86) !important}
/* ===== nav v2: MENU (left) · logo (center) · Book (right) ===== */
.nav__inner--split{display:grid !important;grid-template-columns:1fr auto 1fr;align-items:center;height:74px;gap:1rem}
.nav__inner--split .nav__logo{justify-self:center}
.nav__inner--split .nav__cta{justify-self:end;gap:0}
.nav__menu{justify-self:start;display:inline-flex !important;align-items:center;gap:.7rem;
width:auto;height:auto;background:none;border:0;border-radius:0;cursor:pointer;padding:.5rem .3rem;color:var(--ink)}
.nav__menu .nav__bars{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
width:26px;height:auto;background:none;position:static}
.nav__menu .nav__bars span{display:block;width:100%;height:2px;background:currentColor;border-radius:2px;position:static;transition:.3s var(--ease)}
.nav__menu .nav__bars span::before,.nav__menu .nav__bars span::after{content:none;display:none}
.nav__menu-txt{width:auto;height:auto;background:none !important;position:static;
font-family:var(--sans);font-weight:600;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.nav__menu-txt::before,.nav__menu-txt::after{content:none;display:none}
.nav__menu:hover .nav__bars span{background:var(--teal-deep)}
.nav__menu:hover .nav__menu-txt{color:var(--teal-deep)}
.nav__inner--split .nav__cta .btn{display:inline-flex !important;white-space:nowrap;
font-size:clamp(.7rem,1vw,.82rem);letter-spacing:.05em;padding:.62em 1.3em}
@media(max-width:560px){.nav__menu-txt{display:none}}
/* drawer: slide in from the LEFT (opening toward the right), larger elegant links */
.drawer__panel{left:0;right:auto;width:min(560px,92vw);
transform:translateX(-100%);padding:clamp(2rem,4vw,3.4rem) clamp(1.8rem,4vw,3rem)}
.drawer.open .drawer__panel{transform:translateX(0)}
.drawer__close{align-self:flex-start;margin-bottom:1.2rem}
.drawer__panel a{font-family:var(--sans);font-weight:500;font-size:clamp(1.05rem,2vw,1.5rem);
letter-spacing:.06em;padding:.75rem 0;border-bottom:1px solid var(--line);color:var(--ink)}
.drawer__panel a:hover{color:var(--teal-deep)}
/* homepage hero: kicker text replacing the KOI mark */
.hero__kicker{font-family:var(--sans);font-weight:600;font-size:clamp(.8rem,1.4vw,1rem);
letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.92);margin:0 0 1.5rem}
/* ===== full-page MENU overlay: main links | locations · patient login ===== */
.drawer{z-index:45} /* below nav (50) so Menu/logo/Book stay visible */
.drawer__scrim{background:transparent}
.drawer__panel{left:0;right:0;top:0;width:100vw;height:100dvh;max-width:none;background:var(--paper);
transform:translateX(-100%);transition:transform .5s var(--ease-out);
padding:clamp(6rem,13vh,9rem) clamp(1.8rem,6vw,6rem) clamp(2rem,5vw,4rem);overflow-y:auto;display:block}
.drawer.open .drawer__panel{transform:translateX(0)}
.drawer__panel a{border:0;padding:0} /* reset the old list styling */
.drawer__grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:start;max-width:1080px;min-height:56vh}
.drawer__main{display:flex;flex-direction:column;gap:.1rem}
.drawer__main a{font-family:var(--sans);font-weight:500;font-size:clamp(1.3rem,3vw,2.15rem);letter-spacing:.01em;color:var(--ink);padding:.45rem 0}
.drawer__main a:hover{color:var(--teal-deep);padding-left:.5rem;transition:.25s var(--ease)}
.drawer__side{border-left:1px solid var(--line);padding-left:clamp(2rem,5vw,4.5rem);display:flex;flex-direction:column;justify-content:space-between;min-height:100%;gap:2.5rem}
.drawer__locs h4{font-family:var(--sans);font-weight:600;font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:1.1rem}
.drawer__locs a{display:block;font-family:var(--sans);font-size:clamp(1.05rem,1.8vw,1.4rem);color:var(--ink);padding:.45rem 0}
.drawer__locs a:hover{color:var(--teal-deep)}
.drawer__locs a span{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--body);opacity:.65;margin-top:.1rem}
a.drawer__login{align-self:flex-start;margin-top:auto;font-family:var(--sans);font-weight:600;font-size:1rem;letter-spacing:.04em;color:var(--ink);border-top:1px solid var(--line);padding-top:1.3rem}
a.drawer__login:hover{color:var(--teal-deep)}
@media(max-width:760px){
.drawer__grid{grid-template-columns:1fr;gap:2rem}
.drawer__side{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:1.8rem;min-height:auto}
}
/* nav goes transparent while the menu is open; hamburger → × */
body.nav-open .nav{background:transparent !important;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-color:transparent}
body.nav-open .nav__bars span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav__bars span:nth-child(2){opacity:0}
body.nav-open .nav__bars span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* nav center: tagline replacing the KOI logo */
.nav__tagline{display:inline-block;font-family:var(--sans);font-weight:600;
font-size:clamp(.7rem,1.05vw,.9rem);letter-spacing:.16em;text-transform:uppercase;
color:var(--ink);text-align:center;line-height:1.3;text-decoration:none;white-space:nowrap}
.nav__tagline:hover{color:var(--teal-deep)}
@media(max-width:680px){
.nav__tagline{white-space:normal;font-size:.62rem;letter-spacing:.1em;max-width:130px;line-height:1.6}
.nav__inner--split{height:auto !important;min-height:74px;padding-block:.9rem;align-items:flex-start !important}
}
/* hormones intro: therapy cards → photo cards (Carillon-style), placeholder images */
.htype{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
min-height:clamp(340px,40vw,480px);border-radius:var(--radius);overflow:hidden;
background-color:#0e2b3a;background-size:cover;background-position:center;
padding:clamp(1.4rem,2.5vw,2rem);text-decoration:none;
border:0 !important;box-shadow:0 26px 54px -30px rgba(0,20,35,.6) !important;
backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
.htype::before{content:"";position:absolute;inset:0;
background:linear-gradient(to top,rgba(0,20,35,.8),rgba(0,20,35,.18) 55%,rgba(0,20,35,.05));transition:.35s}
.htype:hover::before{background:linear-gradient(to top,rgba(0,20,35,.86),rgba(0,20,35,.32) 60%,rgba(0,20,35,.12))}
.htype > *{position:relative;z-index:1}
.htype__title{font-family:var(--display);font-style:italic;font-weight:400;
font-size:clamp(1.35rem,2.2vw,1.9rem) !important;color:#fff !important;line-height:1.15;margin:0}
.htype__more{margin-top:.9rem;font-family:var(--sans);font-weight:600;font-size:.8rem;
letter-spacing:.1em;text-transform:uppercase;color:#fff;display:inline-flex;align-items:center;gap:.4rem;opacity:.92}
.htype__more svg{width:16px;height:16px}
.htype:hover .htype__more{opacity:1;gap:.7rem;transition:.3s var(--ease)}
/* menu cohesion: divider dead-center, right column vertically centered, friendlier smaller links w/ hover highlight */
.drawer__grid{grid-template-columns:1fr 1fr;max-width:none;position:relative;
min-height:calc(100dvh - 210px);align-items:center}
.drawer__grid::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line);transform:translateX(-50%)}
.drawer__main{padding-right:clamp(2.5rem,6vw,6rem)}
.drawer__main a{font-family:var(--sans);font-weight:400;font-size:clamp(1.05rem,1.7vw,1.5rem);
letter-spacing:.01em;padding:.55rem .9rem;border-radius:10px;
transition:background .2s var(--ease),color .2s var(--ease),padding-left .2s var(--ease)}
.drawer__main a:hover{background:var(--mist);color:var(--teal-deep);padding-left:1.3rem}
.drawer__side{border-left:0;padding-left:clamp(2.5rem,6vw,6rem);justify-content:center;min-height:auto;gap:2.6rem}
/* hormones "WHAT WE ADDRESS": bigger Prata header, strong dark blue, more visible on the water */
.pg-hormones .cards-head .eyebrow{font-size:clamp(2rem,3.8vw,2.9rem) !important;
color:#00243d !important;letter-spacing:.07em;text-shadow:0 2px 22px rgba(255,255,255,.35)}
/* naturopathic: intro section ("Medicine that treats you as a whole person") sits on solid white; the rest of the page keeps the water-video background */
.pg-naturopathic #detail{background:var(--paper) !important}
/* (reverted: hormones intro stays white per request) */
/* section divider: centered short ornament (fading lines + teal dot), not a full-width line */
.secdiv{display:flex;align-items:center;justify-content:center;gap:.9rem;padding:clamp(1.6rem,3.5vw,3rem) 0}
.secdiv::before,.secdiv::after{content:"";height:1.5px;width:clamp(38px,9vw,110px)}
.secdiv::before{background:linear-gradient(90deg,transparent,rgba(0,36,61,.4))}
.secdiv::after{background:linear-gradient(90deg,rgba(0,36,61,.4),transparent)}
.secdiv span{width:8px;height:8px;border-radius:50%;background:var(--teal-deep);flex:none;box-shadow:0 0 0 5px rgba(15,122,149,.12)}
/* ===== "What to expect" timeline v4: wording sticky-left · vertical timeline right · wide glare ===== */
.tlx-section{position:relative;overflow:hidden}
.tlx-section::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:170%;height:130%;z-index:0;pointer-events:none;
background:radial-gradient(58% 55% at 60% 50%, rgba(255,255,255,.82), rgba(255,255,255,.38) 45%, transparent 74%)}
.tlx-section .container{position:relative;z-index:1}
.tlx-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
@media(max-width:860px){.tlx-layout{grid-template-columns:1fr;gap:2.5rem}}
.tlx-head{position:sticky;top:50%;transform:translateY(-50%);align-self:center}
@media(max-width:860px){.tlx-head{position:static;transform:none}}
.tlx{position:relative;padding-left:2.4rem;padding-top:.5rem}
.tlx__line{position:absolute;left:8px;top:12px;bottom:12px;width:2px;background:rgba(0,36,61,.22)}
.tlx__row{position:relative;padding:0 0 clamp(1.8rem,3vw,2.8rem) 0}
.tlx__row:last-child{padding-bottom:0}
.tlx__dot{position:absolute;left:-2.4rem;top:5px;width:18px;height:18px;border-radius:50%;
background:var(--teal);box-shadow:0 0 0 5px rgba(255,255,255,.6)}
.tlx__when{display:block;font-family:var(--sans);font-weight:700;color:var(--teal-deep);
font-size:.78rem;letter-spacing:.09em;text-transform:uppercase}
.tlx__row h4{font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,1.9vw,1.5rem);
color:var(--ink);margin:.3rem 0 .5rem;line-height:1.2}
.tlx__row p{color:var(--body);font-size:.98rem;line-height:1.6;max-width:46ch}
/* auto-cycling spotlight: one stage highlighted at a time, same layout/size, no reflow */
.tlx__card{position:relative;opacity:.4;transform-origin:0 50%;transform:translateY(0) scale(1);
transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.tlx__card::before{content:"";position:absolute;inset:-1rem -1.3rem;z-index:-1;border-radius:var(--radius-lg);
opacity:0;transform:scale(.9);background:rgba(255,255,255,.7);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
box-shadow:0 22px 48px -20px rgba(0,36,61,.5),0 0 0 1px rgba(255,255,255,.6) inset;
transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.tlx__row.is-active .tlx__card{opacity:1;transform:translateY(-6px) scale(1.14)}
.tlx__row.is-active .tlx__card::before{opacity:1;transform:scale(1)}
.tlx__dot{transition:background .4s var(--ease-out),box-shadow .4s var(--ease-out),transform .4s var(--ease-out)}
.tlx__row.is-active .tlx__dot{background:var(--teal-deep);transform:scale(2);
box-shadow:0 0 0 8px rgba(255,255,255,.85),0 0 28px 6px rgba(15,110,133,.65)}
@media(prefers-reduced-motion:reduce){.tlx__card{transition:none}.tlx__row.is-active .tlx__card{transform:none}
.tlx__card::before{transition:none}.tlx__dot{transition:none}.tlx__row.is-active .tlx__dot{transform:none}}
/* FAQ inside the ocean flowwrap: wide white halo so the dark Q&A stays readable */
.flowwrap section:has(.faq){position:relative}
.flowwrap section:has(.faq)::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:122%;height:116%;z-index:0;pointer-events:none;
background:radial-gradient(closest-side, rgba(255,255,255,.9), rgba(255,255,255,.5) 46%, rgba(255,255,255,0) 80%)}
.flowwrap section:has(.faq) > .container{position:relative;z-index:1}
/* ===== transparent header over the hero (hero-page); solid on scroll ===== */
.hero-page .nav{position:absolute;left:0;right:0;top:0;background:transparent;
backdrop-filter:none;-webkit-backdrop-filter:none;border-color:transparent;box-shadow:none}
.hero-page .nav.is-stuck{position:fixed;background:rgba(251,250,247,.92);
backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
box-shadow:0 10px 30px -22px rgba(0,36,61,.35)}
.hero-page .nav:not(.is-stuck) .nav__menu-txt,
.hero-page .nav:not(.is-stuck) .nav__tagline{color:#fff}
.hero-page .nav:not(.is-stuck) .nav__bars span{background:#fff}
.hero-page .nav:not(.is-stuck) .nav__search-btn{color:#fff}
.hero-page .nav:not(.is-stuck) .koi-logo{filter:brightness(0) invert(1)}
.hero-page .nav:not(.is-stuck) .langtoggle__opt{color:rgba(255,255,255,.75)}
.hero-page .nav:not(.is-stuck) .langtoggle__opt.is-on{color:#fff}
/* menu open → overlay is light → nav elements go dark */
/* menu open: drawer is light, so force all nav controls dark & visible (was scoped to a non-existent descendant .hero-page — never matched) */
body.nav-open .nav__menu-txt,
body.nav-open .nav__tagline{color:var(--ink) !important}
body.nav-open .nav__bars span{background:var(--ink) !important}
body.nav-open .nav__search-btn{color:var(--ink) !important}
body.nav-open .koi-logo{filter:none !important}
body.nav-open .langtoggle__opt{color:var(--body) !important}
body.nav-open .langtoggle__opt.is-on{color:var(--ink) !important}
/* language toggle */
.langtoggle{display:inline-flex;align-items:center;gap:.1rem;font-family:var(--sans);font-weight:600;font-size:.8rem;letter-spacing:.05em}
.langtoggle__opt{background:none;border:0;cursor:pointer;color:var(--body);padding:.3rem .35rem;opacity:.7;transition:color .2s,opacity .2s}
.langtoggle__opt.is-on{color:var(--ink);opacity:1;text-decoration:underline;text-underline-offset:4px}
.langtoggle__opt:hover{opacity:1;color:var(--teal-deep)}
@media(max-width:640px){.langtoggle{display:none}}
/* nav CTA: space the language toggle away from the Book button */
.nav__inner--split .nav__cta{gap:clamp(.9rem,1.6vw,1.5rem) !important}
.langtoggle{margin-right:.2rem}
/* ===== weight-loss: GLP-1 / peptide therapy parallel, risk grid, package cards ===== */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2.5vw,2rem);margin-top:2.4rem}
@media(max-width:760px){.duo{grid-template-columns:1fr}}
.duo__card{background:#fff;border:1px solid var(--line-cool);border-radius:var(--radius-lg);
padding:clamp(1.6rem,3vw,2.4rem);box-shadow:0 16px 40px -28px rgba(0,36,61,.35)}
.duo__tag{display:inline-block;font-family:var(--sans);font-weight:700;font-size:.74rem;letter-spacing:.16em;
text-transform:uppercase;color:var(--teal-deep)}
.duo__card h3{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,2.6vw,2.1rem);
color:var(--ink);margin:.45rem 0 .9rem;line-height:1.1}
.duo__card > p{color:var(--body);line-height:1.6;margin:0}
.duo__list{list-style:none;margin:1.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.8rem}
.duo__list li{position:relative;padding-left:1.6rem;color:var(--body);line-height:1.55}
.duo__list li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--teal)}
.riskgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2.5vw,1.8rem);margin-top:2.2rem}
@media(max-width:760px){.riskgrid{grid-template-columns:1fr}}
.riskcard{background:#fff;border:1px solid var(--line-cool);border-radius:var(--radius-lg);padding:clamp(1.5rem,2.8vw,2.2rem)}
.riskcard h3{font-family:var(--display);font-weight:600;font-size:1.28rem;color:var(--ink);margin:0 0 1rem}
.riskcard ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.riskcard li{position:relative;padding-left:1.7rem;color:var(--body);line-height:1.5}
.riskcard--yes li::before{content:"\2713";position:absolute;left:0;top:.02em;color:var(--teal-deep);font-weight:700}
.riskcard--no li::before{content:"\2715";position:absolute;left:0;top:.02em;color:#b0564b;font-weight:700;font-size:.9rem}
.riskcard--full{grid-column:1/-1}
.riskcard__note{color:var(--body);line-height:1.6;margin:0 0 1.3rem;max-width:72ch}
.risk-safe__label{display:block;font-family:var(--sans);font-weight:700;font-size:.74rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--teal-deep);margin-bottom:.8rem}
.risk-safe__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.6rem}
@media(max-width:640px){.risk-safe__list{grid-template-columns:1fr}}
.risk-safe__list li{position:relative;padding-left:1.7rem;color:var(--body);line-height:1.5}
.risk-safe__list li::before{content:"\2713";position:absolute;left:0;top:.02em;color:var(--teal-deep);font-weight:700}
.pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.2vw,1.7rem);margin-top:2.4rem;align-items:stretch}
@media(max-width:900px){.pkgs{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
.pkg{background:#fff;border:1px solid var(--line-cool);border-radius:var(--radius-lg);
padding:clamp(1.6rem,2.6vw,2.2rem);display:flex;flex-direction:column}
.pkg--feature{background:linear-gradient(160deg,#0f6e85,#013a52 82%);color:#fff;border-color:transparent;
box-shadow:0 24px 60px -30px rgba(0,36,61,.6)}
.pkg__tag{display:inline-block;font-family:var(--sans);font-weight:700;font-size:.7rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--teal-deep);margin-bottom:.7rem}
.pkg--feature .pkg__tag{color:#bfe3ec}
.pkg__name{font-family:var(--display);font-weight:600;font-size:clamp(1.35rem,2.2vw,1.75rem);color:var(--ink);margin:0 0 1.1rem}
.pkg--feature .pkg__name{color:#fff}
.pkg__list{list-style:none;margin:0 0 1.6rem;padding:0;display:flex;flex-direction:column;gap:.75rem;flex:1}
.pkg__list li{position:relative;padding-left:1.6rem;line-height:1.45;font-size:.98rem;color:var(--body)}
.pkg__list li::before{content:"\2713";position:absolute;left:0;top:.02em;color:var(--teal-deep);font-weight:700}
.pkg--feature .pkg__list li{color:rgba(255,255,255,.9)}
.pkg--feature .pkg__list li::before{color:#bfe3ec}
.pkg .btn{align-self:flex-start}
/* ===== aesthetics: service directory, first section after the hero ===== */
.svc-menu{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:1rem;counter-reset:svcnum}
@media(max-width:860px){.svc-menu{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.svc-menu{grid-template-columns:1fr}}
.svc-menu__item{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;text-align:left;
background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--teal);border-radius:var(--radius);
padding:clamp(1.5rem,2.4vw,1.9rem) 1.5rem;transition:.3s var(--ease-out);counter-increment:svcnum}
.svc-menu__item:hover{transform:translateY(-4px);box-shadow:0 20px 40px -28px rgba(0,36,61,.35);border-color:var(--line-cool)}
.svc-menu__item::before{content:counter(svcnum,decimal-leading-zero);font-family:var(--display);font-size:.85rem;
letter-spacing:.06em;color:var(--teal-deep);opacity:.75}
.svc-menu__item .ic{display:none}
.svc-menu__item span{font-family:var(--display);font-weight:600;font-size:1.15rem;color:var(--ink);line-height:1.3}
/* ===== aesthetics: tall photo cards, one image + caption per treatment ===== */
.svc-photos{display:grid;grid-template-columns:repeat(6,1fr);gap:.9rem;margin-top:1rem}
@media(max-width:1000px){.svc-photos{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.svc-photos{grid-template-columns:repeat(2,1fr)}}
.svc-photo{position:relative;aspect-ratio:3/4.6;border-radius:var(--radius-lg);overflow:hidden;display:block;background:var(--line)}
.svc-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
.svc-photo:hover img{transform:scale(1.06)}
.svc-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,36,61,.88),rgba(0,36,61,.1) 58%,transparent)}
.svc-photo span{position:absolute;left:12px;right:12px;bottom:12px;color:#fff;font-family:var(--display);font-weight:600;
font-size:clamp(.88rem,1.6vw,1.05rem);line-height:1.25;z-index:1}
/* ===== site search: nav trigger + full overlay ===== */
.nav__search-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
border-radius:50%;color:var(--ink);cursor:pointer;background:none;border:0;transition:.25s var(--ease)}
.nav__search-btn:hover{background:rgba(0,36,61,.06);color:var(--teal-deep)}
.hero-page .nav:not(.is-stuck) .nav__search-btn:hover{background:rgba(255,255,255,.14);color:#fff}
.nav__search-btn svg{width:19px;height:19px}
.search-overlay{position:fixed;inset:0;z-index:70;visibility:hidden;pointer-events:none}
.search-overlay.open{visibility:visible;pointer-events:auto}
.search-overlay__scrim{position:absolute;inset:0;background:rgba(0,24,40,.55);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .35s var(--ease)}
.search-overlay.open .search-overlay__scrim{opacity:1}
.search-overlay__panel{position:relative;max-width:720px;margin:9vh auto 0;background:var(--paper);
border-radius:var(--radius-lg);box-shadow:0 40px 90px -30px rgba(0,18,32,.55);
padding:clamp(1.3rem,2.6vw,1.9rem);transform:translateY(-16px);opacity:0;
transition:transform .35s var(--ease),opacity .35s var(--ease);
max-height:76vh;display:flex;flex-direction:column;overflow:hidden}
.search-overlay.open .search-overlay__panel{transform:translateY(0);opacity:1}
.search-overlay__head{display:flex;align-items:center;gap:.9rem;border-bottom:1px solid var(--line);padding-bottom:1rem;flex:none}
.search-overlay__icon{color:var(--teal-deep);flex:none;display:flex}
.search-overlay__input{flex:1;min-width:0;border:0;background:none;font-family:var(--sans);
font-size:1.1rem;color:var(--ink);outline:none}
.search-overlay__input::placeholder{color:var(--body);opacity:.55}
.search-overlay__close{flex:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;
justify-content:center;color:var(--body);cursor:pointer;background:none;border:0;transition:.2s var(--ease)}
.search-overlay__close:hover{background:var(--mist);color:var(--ink)}
.search-overlay__results{margin-top:.6rem;overflow-y:auto;flex:1}
.search-overlay__empty,.search-overlay__hint{color:var(--body);text-align:center;padding:2.6rem 1rem;font-size:.95rem}
.search-overlay__hint{font-style:italic}
.search-result{display:flex;align-items:flex-start;gap:.9rem;padding:.8rem .65rem;border-radius:var(--radius);
text-decoration:none;transition:.2s var(--ease)}
.search-result:hover,.search-result.is-focused{background:var(--mist)}
.search-result__kind{flex:none;font-family:var(--sans);font-weight:700;font-size:.62rem;letter-spacing:.09em;
text-transform:uppercase;color:var(--teal-deep);background:rgba(26,144,174,.12);
border-radius:999px;padding:.32rem .6rem;margin-top:.1rem;white-space:nowrap}
.search-result__title{display:block;font-family:var(--display);font-weight:600;color:var(--ink);
font-size:1rem;line-height:1.3}
.search-result__desc{display:block;color:var(--body);font-size:.86rem;line-height:1.45;margin-top:.15rem}
.search-result mark{background:rgba(26,144,174,.24);color:inherit;border-radius:3px;padding:0 .1em}
@media(max-width:640px){
.search-overlay__panel{margin-top:0;max-height:100dvh;height:100%;border-radius:0}
}
/* divider option: dot row (three dots, center one larger) */
.secdiv--dots{gap:8px}
.secdiv--dots::before,.secdiv--dots::after{content:none}
.secdiv--dots span{width:5px;height:5px;background:var(--teal-deep);opacity:.4;box-shadow:none}
.secdiv--dots span:nth-child(2){width:6px;height:6px;opacity:1}
/* divider option: double stacked hairline (thick rule + thinner echo beneath) */
.secdiv--hairline2{flex-direction:column;gap:3px}
.secdiv--hairline2::before,.secdiv--hairline2::after{content:none}
.secdiv--hairline2 span{border-radius:2px;background:var(--ink)}
.secdiv--hairline2 span:nth-child(1){width:52px;height:2px;opacity:.75}
.secdiv--hairline2 span:nth-child(2){width:52px;height:1px;opacity:.3}
/* divider option: wave line (thin sine path instead of a straight rule) */
.secdiv--wave::before,.secdiv--wave::after{content:none}
.secdiv--wave{color:var(--teal-deep)}
.secdiv--wave svg{opacity:.6}