/* Design 04.2: Design 04 with the supplied Clash Grotesk family. */
/* Clash Grotesk by Indian Type Foundry, distributed under the included Fontshare FFL. */
@font-face{font-family:"Clash Grotesk";src:url('../assets/clash-grotesk-variable.woff2') format('woff2');font-weight:200 700;font-style:normal;font-display:swap}
:root,.mono,.principles button>span,.menu-panel nav>a span{font-family:"Clash Grotesk",Arial,sans-serif}
/* Give the broad Clash Grotesk capitals room to retain their shapes. */
.hero-wordmark,.footer-wordmark{letter-spacing:-.025em}
/* Design 04.2 typography refinements from the page review. */
.hero h1{font-size:clamp(25px,5.1vw,52px);font-weight:300}
.hero .button,.treatments>.center .button,.people .button,.footer-grid .button{font-weight:400}
.hero-wordmark{letter-spacing:.005em;font-kerning:normal;opacity:.2}
/* Keep the supplied consultation photo upright and frame the person clearly. */
.hero-photo{transform:scale(1.03);object-position:40% 50%}
.about-heading h2,.section-title h2,.people .center h2,.faq h2,.footer-grid h2{font-weight:400}
.journey-heading h2{font-weight:500}
.treatment-body>h3{font-weight:500}
@keyframes wordmark{from{opacity:0;translate:0 70px}to{opacity:.2;translate:0 0}}
@media(max-width:600px){.hero h1{font-size:25px}}
@media(max-width:600px){.hero-photo{object-position:32% 50%}}
@media(max-width:360px){.hero h1{font-size:24px}}
@media(max-width:600px) and (max-height:700px){.treatment-card,.visit-card{position:relative;top:auto}}
/* Every service reserves the same photo area, ready for the supplied photos. */
.treatment-card{height:380px;min-height:0;grid-template-rows:380px}
.treatment-card>.treatment-media{width:100%;height:100%;min-height:0;object-fit:cover}
.treatment-placeholder{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;background:#e7eef6;color:#6d8299}
.treatment-placeholder>span{font-size:11px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase}
.treatment-body{padding:28px;min-width:0}
.treatment-body>h3{padding-top:20px}
.treatment-body>p{min-height:4.2em}
@media(max-width:600px){.treatment-card{height:520px;grid-template-rows:220px 300px}.treatment-body{padding:22px}}
/* Arc Expanding Search, adapted to the centered hero and Carevia's deep-blue glass. */
.hero-intro{position:absolute;z-index:5;left:50%;top:50svh;margin:0;padding-top:0;transform:translate(-50%,-50%)}
.care-search{position:relative;width:100%;max-width:540px;height:60px;margin:42px auto 0;pointer-events:none;animation-delay:.25s;--search-collapsed:500px;--search-expanded-width:540px}
.care-search [hidden]:not(.search-panel,.search-trigger){display:none!important}
.search-shell,.search-panel{position:absolute;left:50%;width:min(100%,var(--search-collapsed));transform:translateX(-50%);border:1px solid #d3e9ff47;background:#0b2b4abf;color:#f7fbff;box-shadow:0 14px 40px #051b3333,inset 0 1px #ffffff0d;backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);pointer-events:auto;transition:width .75s var(--ease),border-radius .6s var(--ease),background .4s ease,border-color .4s ease,box-shadow .4s ease}
.search-shell{top:0;height:100%;border-radius:30px;overflow:hidden}
.care-search[data-expanded=true] .search-shell,.care-search[data-expanded=true] .search-panel{width:100%}
.care-search[data-expanded=true] .search-shell{border-radius:16px;border-color:#d7edff80;background:#0b2b4ae6}
.search-shell:focus-within{box-shadow:0 0 0 3px #b2d8ff24,0 14px 40px #051b3333}
.search-shell:hover{border-color:#d7edff80;background:#11375bd9}
.search-icon{position:absolute;top:calc(50% - 10px);left:20px;pointer-events:none;color:#e1f0fc}
.search-trigger{position:absolute;z-index:1;inset:0;width:100%;padding:0 24px 0 52px;border:0;border-radius:inherit;background:none;color:inherit;text-align:left;font-size:16px;font-weight:400}
.search-trigger>span{opacity:.4}.search-trigger{transition:opacity .3s ease,display .3s allow-discrete}.search-trigger[hidden]{display:none;opacity:0;pointer-events:none}@starting-style{.search-trigger{opacity:0}}
.search-trigger:focus-visible{outline:none}
/* The faint focus-within glow alone is not a visible focus indicator on the navy hero (WCAG 2.4.7). */
.search-shell:has(.search-trigger:focus-visible){outline:2px solid #a6c9ec;outline-offset:3px}
.search-input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0 48px 0 52px;border:0;border-radius:inherit;background:none;color:white;caret-color:white;font:inherit;font-size:16px;outline:0;opacity:0;transition:opacity .25s ease;text-overflow:ellipsis}
.care-search[data-expanded=true] .search-input{opacity:1;transition-duration:.45s;transition-delay:.06s}
.search-input::placeholder{color:#d1e2f1;opacity:.4}
.search-input:focus-visible{outline:none}
.search-input[inert]{pointer-events:none}
.search-clear{position:absolute;z-index:2;top:calc(50% - 16px);right:10px;display:grid;place-items:center;width:32px;height:32px;padding:0;border-radius:50%;background:transparent;color:#d1e2f1}
.search-clear:hover{background:#ffffff14;color:white}
.search-panel{z-index:50;top:calc(100% + 8px);overflow:hidden;border-radius:18px;background:#0b2745f2;transition:opacity .4s ease,translate .6s var(--ease),width .75s var(--ease),display .6s allow-discrete}.search-panel[hidden]{display:none;opacity:0;translate:0 8px;transition-duration:.22s;transition-timing-function:var(--ease-exit)}@starting-style{.search-panel{opacity:0;translate:0 8px}}
.care-search[data-side=above] .search-panel{top:auto;bottom:calc(100% + 8px)}
.search-panel-body{position:relative;width:calc(var(--search-expanded-width) - 2px);max-height:min(22rem,60svh,var(--search-space,22rem));padding:8px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b8d6f04d transparent;text-align:left}
#care-search-listbox{position:relative;isolation:isolate}
.search-group-label{padding:8px 12px 7px;color:#a9c6df;font-size:11px;font-weight:400;letter-spacing:.02em}
.search-option{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:60px;padding:10px 12px;cursor:pointer;user-select:none;color:#f7fbff}
.search-option-title{font-size:14px;line-height:1.3;font-weight:500}
.search-option-meta{display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#b1cce2;font-size:12px;line-height:1.4}
.search-option mark{background:none;color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:#badbff88;text-underline-offset:3px}
.search-highlight{position:absolute;z-index:0;top:0;left:0;width:100%;border:1px solid #d5ebff14;border-radius:11px;background:#c6e2ff14;pointer-events:none;transition:transform .24s var(--ease),height .24s var(--ease)}
.search-empty{padding:16px 12px 18px;text-align:left}
.search-empty p{font-size:15px;line-height:1.4}
.search-empty>span{display:block;margin-top:6px;font-size:12px;line-height:1.5;color:#b1cce2}
.search-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes search-panel-in{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@media(max-width:600px){.care-search{height:56px;margin-top:36px;--search-collapsed:100%}.search-option{min-height:62px}.search-option-title{font-size:14px}}
@media(prefers-reduced-motion:reduce){.care-search,.search-panel{animation:none}.search-shell,.search-panel,.search-input,.search-highlight,.search-trigger{transition:none}}
/* Arc FAQ Section: its light accordion layout, styled for Carevia. */
.care-faq{padding-block:160px;background:#fcfdff}
.care-faq-inner{width:calc(100% - 48px);max-width:720px;margin-inline:auto}
.care-faq-intro{text-align:center}
.care-faq-intro>.mono{color:#647b91;font-size:11px;letter-spacing:.035em}
.care-faq .care-faq-title{margin:20px 0 0;font-size:48px;line-height:1.06;letter-spacing:-.01em;font-weight:400;text-wrap:balance}
.care-faq-description{margin:18px auto 0;max-width:440px;font-size:16px;line-height:1.6;color:var(--muted)}
.care-faq-list{margin:48px 0 0;padding:0;list-style:none;border-top:1px solid #dce6f0}
.care-faq-item{overflow:hidden;border-bottom:1px solid #dce6f0}
.care-faq-heading{margin:0;font:inherit}
.care-faq-question{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;min-height:76px;padding:22px 4px;border:0;background:none;color:var(--ink);font:inherit;font-size:18px;font-weight:500;line-height:1.45;text-align:left;scroll-margin-top:110px}
.care-faq-question>span{min-width:0}
.care-faq-question:focus-visible{outline:2px solid #739ac2;outline-offset:-2px;border-radius:6px}
.care-faq-icon{flex:none;color:#748a9f;transition:transform .35s cubic-bezier(.22,1,.36,1),color .2s}
.care-faq-item[data-open] .care-faq-icon{transform:rotate(45deg);color:var(--ink)}
.care-faq-question:hover .care-faq-icon{color:var(--ink)}
.care-faq-panel{overflow:hidden}
.care-faq-panel[hidden]{display:none}
.care-faq-answer{margin:0;padding:0 44px 26px 4px;color:var(--muted);font-size:16px;line-height:1.65;text-wrap:pretty}
.care-faq-contact{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:32px;padding:22px 24px;border:1px solid #e2eaf3;border-radius:16px;background:#f3f7fb;text-align:left;transition:background .2s}
.care-faq-contact:hover{background:#eaf2f9}
.care-faq-contact-copy{display:grid;gap:6px;min-width:0;font-size:14px;line-height:1.4}
.care-faq-contact-copy>strong{font-weight:500}
.care-faq-contact-copy>span{color:var(--muted)}
.care-faq-contact-link{flex:none;font-size:13px;font-weight:500;text-decoration:underline;text-decoration-color:#a7bdd0;text-underline-offset:4px}
@media(max-width:600px){.care-faq{padding-block:100px}.care-faq-inner{width:calc(100% - 40px)}.care-faq .care-faq-title{font-size:36px}.care-faq-description{font-size:15px}.care-faq-list{margin-top:36px}.care-faq-question{min-height:72px;padding-block:21px;font-size:16px;gap:20px}.care-faq-answer{padding-right:4px;padding-bottom:24px;font-size:15px}.care-faq-contact{padding:20px}}
@media(max-width:400px){.care-faq .care-faq-title{font-size:32px}.care-faq-contact{align-items:flex-start;flex-direction:column;gap:14px}}
@media(prefers-reduced-motion:reduce){.care-faq-icon,.care-faq-contact{transition:none}}
/* Frosted navy controls with the supplied ChromaGrid's damped spotlight. */
.topbar{--chroma-x:-9999px;--chroma-y:-9999px;--chroma-power:0;--chroma-r:150px}
.topbar .nav-pill,.topbar .nav-logo{position:relative;isolation:isolate;border:1px solid #d5eaff40;background:linear-gradient(180deg,#3d6ea326,#04142326),#071e35f2;color:#f2f8ff;box-shadow:0 10px 24px -12px #051a33a6,inset 0 1px #ffffff26,inset 0 -1px #051d3429;backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);transition:background .25s,border-color .25s,box-shadow .25s}
.topbar .nav-pill::before,.topbar .nav-logo::before,.topbar .nav-pill::after,.topbar .nav-logo::after{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:var(--chroma-power)}
.topbar .nav-pill::before,.topbar .nav-logo::before{background:radial-gradient(circle var(--chroma-r) at calc(var(--chroma-x) - var(--chroma-ox,0px)) calc(var(--chroma-y) - var(--chroma-oy,0px)),#b8e4ff3d,transparent 75%)}
.topbar .nav-pill::after,.topbar .nav-logo::after{box-shadow:inset 0 0 0 1px #c3eaffb3,inset 0 0 20px -8px #91ceff80;mask-image:radial-gradient(circle var(--chroma-r) at calc(var(--chroma-x) - var(--chroma-ox,0px)) calc(var(--chroma-y) - var(--chroma-oy,0px)),#000 15%,#000b 45%,transparent 100%);-webkit-mask-image:radial-gradient(circle var(--chroma-r) at calc(var(--chroma-x) - var(--chroma-ox,0px)) calc(var(--chroma-y) - var(--chroma-oy,0px)),#000 15%,#000b 45%,transparent 100%)}
.topbar .nav-logo .carevia-mark{filter:brightness(0) invert(1)}
.topbar .nav-pill:hover,.topbar .nav-logo:hover{border-color:#d5eaff66}
.topbar .nav-pill:focus-visible,.topbar .nav-logo:focus-visible{outline:2px solid #a6c9ec;outline-offset:4px}
.topbar .nav-pill:active,.topbar .nav-logo:active{box-shadow:0 4px 14px -8px #051a33a6,inset 0 1px #ffffff1a}
.footer-brand-iridescent{gap:12px;font-weight:500;letter-spacing:-.025em}
.footer-iridescent-mark{position:relative;display:block;flex:none;width:64px;height:64px;overflow:hidden}
.footer-iridescent-mark>img{position:absolute;left:50%;top:50%;width:132px;height:132px;max-width:none;object-fit:contain;transform:translate(-50%,-50%)}
@media(max-width:600px){.footer-iridescent-mark{width:56px;height:56px}.footer-iridescent-mark>img{width:116px;height:116px}}
@media(prefers-reduced-motion:reduce){.topbar .nav-pill,.topbar .nav-logo{transition:none}}

/* Keep the blue treatment across the first screen; fade into the page below it. */
.hero{--hero-fade:130px;--hero-overhang:clamp(20px,2.8vw,42px);height:calc(100svh + var(--hero-fade))}
.hero:after{height:var(--hero-fade)}
.hero-wordmark{bottom:calc(var(--hero-fade) - var(--hero-overhang) + 6px)}
@media(max-width:600px){.hero{--hero-fade:85px;--hero-overhang:12px}.hero-wordmark{bottom:calc(var(--hero-fade) - var(--hero-overhang) + 4px)}}

/* Guide lines sit behind page content but above the footer. */
main#main{position:relative;z-index:1}
.page-grid{z-index:0}

/* Fluted-glass hero refraction, shared with Design 03. */
.hero .glass-image{position:absolute;inset:0;overflow:hidden;isolation:isolate;background:#102e52;transform:scale(1.03)}
:is(.hero,.wide-banner,.treatment-stack,.start-grid) .glass-image>img{width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 50%);user-select:none;pointer-events:none;transform:none}
:is(.hero,.wide-banner,.treatment-stack,.start-grid) .glass-strips{position:absolute;inset:0;pointer-events:none}
:is(.hero,.wide-banner,.treatment-stack,.start-grid) .glass-strip{position:absolute;inset-block:0;background-repeat:no-repeat}
/* Full-color hero: no grayscale (the navy overlay is set below). */
.hero-photo,.hero .glass-strip{filter:none}
/* Ripples stay behind the headline and fade to clear at both sides, so the doctor and patient read clearly. */
.hero .glass-strips{--glass-fade:linear-gradient(90deg,transparent 18%,#000 38%,#000 62%,transparent 82%);-webkit-mask-image:var(--glass-fade);mask-image:var(--glass-fade)}
/* Deeper navy wash over the full-color hero. */
.hero .hero-shade{background:linear-gradient(90deg,#0d3260d6,#123f72d6),linear-gradient(180deg,#0a274d80,transparent 65%)}
@media(max-width:600px){.hero .hero-shade{background:linear-gradient(180deg,#0d3260eb,#134478b8 60%)}}
/* Phones and tablets frame only the patient (glass.js uses data-mobile-focus below 1025px); keep him unrippled. */
@media(max-width:1024px){.hero .glass-strips{display:none}}
.wide-banner .glass-image{position:absolute;inset:0;overflow:hidden;isolation:isolate;background:#102e52}
:is(.hero,.wide-banner,.treatment-stack,.start-grid) .glass-strip i{position:absolute;inset:0;background:linear-gradient(90deg,#ffffff32 0%,#ffffff08 16%,transparent 52%,#00000057 100%);pointer-events:none}
@media(prefers-reduced-motion:reduce){:is(.hero,.wide-banner,.treatment-stack,.start-grid) .glass-strips{display:none}}

/* Service photos share Design 03’s clear center and soft fluted edges. */
.treatment-card>.glass-image{position:relative;overflow:hidden;isolation:isolate;background:#102e52}

/* Start your care: two entry points built from the treatment-card system. */
.start-steps{padding-top:0}
.start-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.start-card{display:flex;flex-direction:column;background:#fff;border-radius:10px;overflow:hidden;isolation:isolate}
.start-media{position:relative;height:300px;overflow:hidden;background:#102e52}
.start-mark{display:grid;place-items:center;background:#e7eef6}
.start-mark.is-live{background:#000}.start-mark.is-live>img{opacity:0}
.start-mark>img{width:clamp(120px,34%,200px);height:auto;transition:transform 1.2s var(--ease)}
.start-card:hover .start-mark>img{transform:scale(1.06)}
.start-body{flex:1;display:flex;flex-direction:column;align-items:flex-start;padding:28px 32px 32px}
.start-body>.mono{font-size:12px}
.start-body>h3{margin-top:56px;font-weight:500;text-wrap:balance}
.start-body>p{margin:15px 0 36px;max-width:34ch;font-size:16px;line-height:1.4}
.start-body>.button{margin-top:auto;gap:14px;font-weight:400}
.start-body>.button>span{transition:transform .4s var(--ease)}
.start-body>.button:hover>span{transform:translateX(3px)}
@media(max-width:860px){.start-grid{grid-template-columns:1fr}}
@media(max-width:600px){.start-media{height:220px}.start-body{padding:22px}.start-body>.mono{font-size:10px}.start-body>h3{margin-top:30px;font-size:26px}.start-body>p{font-size:15px;margin-bottom:28px}.start-body>.button{width:100%;font-size:13px;min-height:44px}}
@media(prefers-reduced-motion:reduce){.start-mark>img,.start-body>.button>span{transition:none}}

/* Tablet and mobile hero: the search poster (a <picture> source up to 1024px), centred, with a light shade so the navy poster stays visible. */
.hero .glass-image>picture{display:contents}
.hero .glass-image>picture>img{width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 50%);user-select:none;pointer-events:none}
/* The poster's illustration fills the upper half, so the intro sits below it instead of across it. Scoped to 04.2 so 04.5's film hero is untouched. */
@media(max-width:1024px){[data-design="04.2"] .hero .hero-shade{background:linear-gradient(180deg,#0d32602e,#0d326014 45%,#0d326040)}[data-design="04.2"] .hero-intro{top:57svh;transform:translateX(-50%)}}