/* ============================================================
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: #606c75; /* darkened from #788893 — that failed WCAG AA (3.25:1) on light backgrounds; this clears 4.5:1 everywhere it's used */
--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}
/* Skip-to-content: off-screen until a keyboard user tabs to it, so screen-reader/keyboard
users can bypass the nav and drawer on every page instead of tabbing through them each time. */
.skip-link{position:absolute;top:-100px;left:1rem;z-index:1000;background:var(--ink);color:#fff;
padding:.9em 1.4em;border-radius:0 0 10px 10px;font-family:var(--sans);font-weight:600;
font-size:.95rem;transition:top .2s var(--ease-out)}
.skip-link:focus{top:0}
/* ---------------- 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}
/* Stacked on mobile, the photo/slideshow should never land ahead of the heading that gives it
context — some pages put the media first in the markup (fine for the side-by-side desktop
grid), so pin it after its text sibling once things stack into a single column. */
.feature__media{order:2}
}
.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 p + p{margin-top:1.1em}
.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}
/* an odd step count (5, 3…) leaves a lone last card sitting in an otherwise-empty row at this
2-column width — center it at single-column width instead of stranding it beside a big gap. */
.flow__item:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:100%;max-width:calc(50% - .65rem)}
}
@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 v2: wider boxes, depth (front/back) bounce, red glow behind "Typical IV bars".
margin-inline is tied to the same --gutter token as .container's own padding, so the box can
never bleed past the true viewport edge (a flat vw value here previously exceeded the gutter
at tablet widths and pushed the box off-screen). */
@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:calc(-1 * var(--gutter))}
.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__burger .nav__menu-txt{display:none !important}}
/* 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)}
.drawer__lang 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}
.langtoggle--drawer{display:flex;gap:1.1rem;font-size:1.05rem}
.langtoggle--drawer .langtoggle__opt{padding:.3rem 0;opacity:.55;font-weight:600}
.langtoggle--drawer .langtoggle__opt.is-on{opacity:1}
@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 (desktop) — a fixed-height KOI mark takes over on
mobile instead of wrapping the tagline text, since a wrapped multi-line tagline can grow taller
than the fixed-position nav bar accounts for and overlap the hero content underneath it. */
.nav__tagline{display:inline-flex;align-items:center;text-decoration:none}
.nav__logo-img{display:none}
.nav__tagline-text{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;white-space:nowrap}
.nav__tagline:hover .nav__tagline-text{color:var(--teal-deep)}
@media(max-width:680px){
.nav__tagline-text{display:none}
.nav__logo-img{display:block}
}
/* 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-text{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-text{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:not(.langtoggle--drawer){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}