/* Font stacks insert the metric-matched 'X Fallback' face (defined in includes/header.php) ahead of the generic system fonts, so pre-swap text occupies identical space to the webfont and the swap causes no reflow. */ /* Content-artwork thumbnails use object-fit:contain, not cover: the source illustrations are 4:3 or 16:9 and a cover-crop was discarding up to 44% of the picture. Their soft pastel backdrop blends with --mist, so the small letterbox area reads as part of the artwork. Portrait/round photo crops (doctor headshots, avatars) intentionally still use cover. */ /* --teal-700 (#0FA999 under theme-light) measured 2.69-2.93:1 as TEXT on the site's light surfaces - below AA everywhere it was used for copy. Swapped to --accent-ink, the project's existing accessible-teal-as-text token, which is context-aware: #00736B on light surfaces, and the bright brand teal inside the whitelisted dark containers. Non-text uses of --teal-700 (backgrounds, hover fills) are deliberately untouched. */ /* ════════════════════════════════════════════════ Dr. Avinash Tank — Design System v2 (re-skin) Trust & Authority · navy/teal · accessible (WCAG) Brand: Navy #00007A · Blue #002EB8 · Teal #00C5B7 · Figtree/Inter ════════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* visually-hidden utility, sitewide (previously duplicated per-page as a scoped .bs-sr / .bk-sr etc. — one real definition instead). Used to extend an accessible name with context that shouldn't be seen, e.g. the header location pill's "— change consultation location" suffix. */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,197,183,.12)} :root{ /* brand */ --navy:#00007A; --blue:#002EB8; --teal:#00C5B7; --navy-900:#00044f; --navy-700:#001a9c; --teal-700:#00a99d; --teal-50:#E6FBF8; /* text */ --ink:#141A2B; --slate:#566081; /* surfaces */ --white:#fff; --mist:#F3F6FC; --surface-2:#E9F0FB; --line:#E6EAF4; /* semantic (skill-aligned roles) */ --primary:var(--navy); --accent:var(--teal); --ring:var(--teal); --success:#1FB47A; --destructive:#DC2626; --wa:#25D366; /* 5-token design-system palette (Phase 3A, 2026-07-29) — named aliases over the EXISTING brand/surface colors above (no new hues introduced), so new components pick one of exactly 5 roles instead of ad hoc hex. */ --surface:var(--white); --neutral:var(--slate); /* metrics */ --maxw:1320px; --r-sm:12px; --r:16px; --r-lg:24px; --pad:24px; /* spacing scale — reuse across sections/cards for consistent rhythm */ --space-xs:8px; --space-sm:16px; --space-md:24px; --space-lg:40px; --space-xl:64px; /* elevation — soft, navy-tinted */ --sh-sm:0 4px 16px rgba(13,22,60,.06); --sh:0 14px 38px rgba(13,22,60,.10); --sh-lg:0 30px 66px rgba(10,18,55,.14); /* type */ /* --ff-h was 'Figtree', but theme-light.css overrides it to Manrope and theme-light is applied site-wide — so Figtree was fetched on every page load and never rendered a single glyph. Named honestly here; rendered output is byte-identical. Fonts are self-hosted/subset (see includes/header.php). */ --ff-h:'Manrope','Manrope Fallback',-apple-system,'Segoe UI',sans-serif; --ff-b:'Inter','Inter Fallback',-apple-system,'Segoe UI',sans-serif; } /* overflow guard — root causes are fixed individually (nowrap CTAs, negative- margin sliders, rigid grids); this only protects against future content. The guard must live on ONLY: once html's overflow-x is non-visible, an overflow-x on body stops propagating to the viewport and instead turns body itself into a scroll container, which silently breaks the sticky header (.hdr). overflow:clip is preferred over hidden because it can never create a scroll container. body must stay overflow-visible. */ /* ── CONTEXTUAL ACCENT (was design-system.css; inlined 2026-07-29) ────────── The brand teal #00C5B7 scores 2.17:1 on white: unusable as text, icon or border on a light surface, yet legacy CSS did exactly that in 233 places. It IS correct on dark surfaces, so blanket-darkening would invert the bug. --accent-ink resolves per context. #00736B is the ONE genuinely new colour in the system and it exists solely to fix that measured failure (5.73:1). NOTE: the dark-container list below must come AFTER the :root rule — both have specificity (0,1,0), so source order decides the winner. .oh-hero is deliberately absent: Phase 3A rebuilt that hero as a LIGHT surface, so bright teal there would score 2.17:1 again. Verify a container is genuinely dark before adding it. */ :root{ --accent-ink:#00736B; } .topbar,.mega-foot,.mh-cta,.aside-cta,.kcl-organ,.kcl-trust,.statband, .mh-statbar,.chat-head,.chat-fab,.csv-spot,.lgl-contact,.meet-stat,.qf-h, .spv-tl-n,.phero,.sl-final,.mx-hero,.spv-hero,.footer,.ft, .svl-hero,.svl-final,.svl-auth-card,.svl-prep-c{ --accent-ink:var(--teal); } html{overflow-x:hidden} @supports(overflow:clip){html{overflow-x:clip}} /* container breakpoints — tablet gets a touch more edge padding than mobile, large desktop gets a wider ceiling so content doesn't over-stretch on huge screens */ @media(max-width:768px){:root{--pad:20px}} @media(min-width:769px) and (max-width:1024px){:root{--pad:32px}} @media(min-width:1600px){:root{--maxw:1440px}} /* Site-wide custom scrollbar (main page scroll, every device/page — desktop Chrome/Edge/Safari via ::-webkit-scrollbar, Firefox via scrollbar-color). Mobile Safari/Chrome hide the page scrollbar by default regardless of CSS — this only visibly applies on devices/browsers that render one. */ html{scrollbar-width:thin;scrollbar-color:var(--accent-ink) var(--mist)} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:var(--mist)} ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--teal),var(--navy));border-radius:20px;border:2px solid var(--mist);background-clip:padding-box} ::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--teal-700),var(--navy));background-clip:padding-box} ::-webkit-scrollbar-corner{background:var(--mist)} body{font-family:var(--ff-b);font-size:19px;line-height:1.72;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} h1,h2,h3,h4,h5{font-family:var(--ff-h);font-weight:700;line-height:1.16;letter-spacing:-.022em;color:var(--navy)} a{text-decoration:none;color:inherit} img{display:block;max-width:100%;height:auto} picture{display:contents} /* iOS Safari zooms in when focusing a field <16px — force >=16px on small screens (a11y/UX) */ @media(max-width:768px){input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important}} ul{list-style:none} ::selection{background:var(--teal);color:var(--navy-900)} .wrap,.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)} .skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px 14px;z-index:999;border-radius:8px} :focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:4px} section{scroll-margin-top:90px} /* ── inline SVG icons ── */ .ic{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.15em;flex-shrink:0} .chip .ic{width:26px;height:26px} .kc-card .chip .ic{width:28px;height:28px} .meet-points li>span .ic{width:21px;height:21px} .dp-sub-scroll h6{display:flex;align-items:center;gap:7px} .dp-sub-scroll h6 .ic{width:15px;height:15px;color:var(--accent-ink)} .btn .ic{width:17px;height:17px;vertical-align:-.18em} .hdr-cta-ic .ic{width:17px;height:17px} .hc-call-ic .ic{width:14px;height:14px} .dp-search button .ic{width:17px;height:17px} .cq-ic .ic{width:23px;height:23px} .loc-lines{display:flex;flex-direction:column;gap:9px} .loc-lines span{display:inline-flex;align-items:flex-start;gap:9px} .loc-lines .ic{width:17px;height:17px;color:var(--accent-ink);margin-top:3px} /* Google rating badge/inline — includes/google-reviews.php's markup had no base styling anywhere in the codebase (footer/about/services all render it unstyled); adding it here since the homepage Location card is the first place it needs to actually look like something. */ .gr-inline{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--navy);flex-wrap:wrap} .gr-inline .gr-g{width:16px;height:16px;flex-shrink:0} .gr-inline .gr-stars{color:#f2a900;font-size:13px;letter-spacing:1px} .gr-inline b{font-weight:800} .gr-inline small{color:var(--slate);font-weight:600} .gr-inline-neutral{color:var(--slate)} .gr-inline-neutral .gr-g{opacity:.55} .gr-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-size:13px;color:#fff} .gr-badge .gr-g{width:16px;height:16px} .gr-badge .gr-stars{color:#f2a900;letter-spacing:1px} .gr-badge b{font-weight:800} .gr-badge small{opacity:.72;font-weight:600} /* Homepage Location card — was a plain stack of

tags with no hierarchy; reuses the existing .ct-ic-card icon-tile component (already in this file, previously unused) instead of inventing a new one. */ .loc-card{padding:30px;display:flex;flex-direction:column} .loc-card:hover{box-shadow:0 18px 40px rgba(0,0,60,.08)} .loc-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap} .loc-card-top h3{margin:0;flex:1;min-width:220px} .loc-addr{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:var(--slate);line-height:1.55;margin:14px 0 20px} .loc-addr .ic{width:18px;height:18px;color:var(--accent-ink);flex-shrink:0;margin-top:2px} .loc-tiles{display:flex;flex-direction:column;gap:10px} .loc-tiles .ct-ic-card{padding:14px 16px} .loc-tiles .ct-ic-card:hover{box-shadow:none;border-color:var(--line)} .loc-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px} .loc-map{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);min-height:300px;box-shadow:0 14px 34px rgba(0,0,60,.07)} .loc-map iframe{min-height:300px} @media(max-width:640px){.loc-card{padding:24px 22px}} .eyb .ic{width:15px;height:15px} .answer-lbl .ic{width:16px;height:16px;vertical-align:-.2em} .topbar .ic{width:14px;height:14px} .fc a .ic,.fc span .ic{width:15px;height:15px;color:var(--accent-ink);vertical-align:-.18em;margin-right:5px} .appbar a .ic{width:20px;height:20px} /* buttons */ .btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--ff-b);font-weight:600;font-size:16px;line-height:1;padding:14px 26px;min-height:50px;border-radius:40px;border:none;cursor:pointer;transition:.26s cubic-bezier(.2,.7,.2,1);white-space:nowrap} .btn-sm{min-height:40px;padding:10px 18px;font-size:13.5px} .btn-teal{background:linear-gradient(135deg,#00dccb 0%,#00c5b7 48%,#00a99d 100%);color:#02231f;font-weight:700;letter-spacing:.005em;box-shadow:0 10px 24px rgba(0,197,183,.38),0 2px 6px rgba(0,0,40,.14),inset 0 1px 0 rgba(255,255,255,.5)} .btn-teal::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.55) 50%,transparent 75%);transform:translateX(-160%) skewX(-12deg);transition:transform .65s cubic-bezier(.2,.7,.2,1)} .btn-teal:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(0,197,183,.5),0 5px 12px rgba(0,0,40,.18),inset 0 1px 0 rgba(255,255,255,.55)} .btn-teal:hover::after{transform:translateX(160%) skewX(-12deg)} .btn-teal:active{transform:translateY(-1px) scale(.99)} .btn-navy{background:var(--navy);color:#fff}.btn-navy:hover{background:#000064;transform:translateY(-2px)} .btn-blue{background:var(--blue);color:#fff}.btn-blue:hover{background:#0024a0;transform:translateY(-2px)} .btn-outline{background:transparent;color:var(--navy);border:1.6px solid rgba(0,0,122,.25)} .btn-outline:hover{border-color:var(--accent-ink);color:var(--blue);transform:translateY(-2px)} .btn-ghost{background:#fff;color:var(--blue);border:1.6px solid var(--line)}.btn-ghost:hover{border-color:var(--blue)} .btn-glass{background:rgba(255,255,255,.1);color:#fff;border:1.6px solid rgba(255,255,255,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .btn-glass:hover{background:rgba(255,255,255,.18);border-color:var(--accent-ink);color:#fff;transform:translateY(-2px)} /* reveal */ .rev,.rev-up{opacity:0;transform:translateY(22px);transition:.7s cubic-bezier(.2,.7,.2,1)} .rev.in,.rev-up.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.rev,.rev-up{opacity:1;transform:none}*{animation:none!important;transition:none!important}.cur-dot,.cur-ring{display:none!important}} /* ── interaction layer (premium cursor • lift • tilt) ── */ /* custom cursor: precise dot + trailing reactive ring */ .cur-dot,.cur-ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);will-change:transform;opacity:0} .cur-dot{width:7px;height:7px;background:var(--teal);box-shadow:0 0 10px rgba(0,197,183,.7);transition:opacity .3s,width .2s,height .2s} .cur-ring{width:36px;height:36px;border:1.6px solid rgba(0,197,183,.5);transition:opacity .35s,width .28s cubic-bezier(.2,.7,.2,1),height .28s cubic-bezier(.2,.7,.2,1),border-color .28s,background .28s} .cur-ring.is-hover{width:60px;height:60px;border-color:var(--accent-ink);background:rgba(0,197,183,.09)} .cur-ring.is-down{width:26px;height:26px;border-color:var(--blue)} .cur-dot.is-hover{width:0;height:0} html.cursor-on,html.cursor-on *{cursor:none!important} html.cursor-on input,html.cursor-on textarea,html.cursor-on select{cursor:text!important} @media(hover:none),(pointer:coarse){.cur-dot,.cur-ring{display:none!important}} @media(hover:hover) and (pointer:fine){ .card,.kc-card,.review,.eeat .e,.cq{position:relative;overflow:hidden} .card::after,.kc-card::after,.review::after,.eeat .e::after{content:'';position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(0,197,183,.15),transparent 60%)} .card:hover::after,.kc-card:hover::after,.review:hover::after,.eeat .e:hover::after{opacity:1} .card>*,.kc-card>*,.review>*,.eeat .e>*{position:relative;z-index:1} } /* lift / hover polish */ .review,.eeat .e,.cq{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s} .review:hover,.eeat .e:hover{transform:translateY(-6px);box-shadow:var(--sh);border-color:transparent} .eeat .e:hover .chip{background:var(--teal);color:#fff;transform:scale(1.06)} .cq:hover{transform:translateY(-3px);box-shadow:var(--sh-sm);border-color:var(--accent-ink)} .statband .s{transition:transform .3s cubic-bezier(.2,.7,.2,1)} .statband .s:hover{transform:translateY(-5px)} .hero-card{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .35s;transform-style:preserve-3d;will-change:transform} .hr-avatars span{transition:transform .25s cubic-bezier(.2,.7,.2,1)} .hero-rating:hover .hr-avatars span{transform:translateY(-3px)} .btn{will-change:transform} /* topbar + header */ .topbar{background:linear-gradient(90deg,var(--navy),#001a9c);color:rgba(255,255,255,.85);font-size:12.5px} .topbar-in{display:flex;justify-content:space-between;align-items:center;height:40px} .topbar a{color:rgba(255,255,255,.88);margin-left:20px;display:inline-flex;align-items:center;gap:5px;transition:.2s}.topbar a:hover{color:var(--accent-ink)} .topbar-in>span:first-child{display:inline-flex;align-items:center;gap:6px} .tb-right{display:flex;align-items:center} @media(max-width:760px){.topbar-in span:first-child{display:none}.tb-right{margin:0 auto}.topbar a:first-child{margin-left:0}} .hdr{position:sticky;top:0;z-index:500;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--line);transition:box-shadow .3s,background .3s} .hdr .wrap{max-width:1340px} .hdr.scrolled{box-shadow:0 8px 30px rgba(0,0,60,.08)} .hdr-in{display:flex;align-items:center;gap:12px;height:86px;min-width:0} /* ── header branding (left, doctor identity card) ── */ .brand{display:flex;align-items:center;gap:14px;flex-shrink:1;min-width:0;text-decoration:none} .brand-ph{position:relative;width:72px;height:72px;border-radius:50%;flex-shrink:0;padding:2px;background:#fff;box-shadow:0 2px 4px rgba(0,4,79,.06),0 8px 20px -6px rgba(0,20,90,.22);transition:transform .3s} .brand:hover .brand-ph{transform:scale(1.04)} .brand-ph picture,.brand-ph img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover} .brand-badge{position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;border-radius:50%;background:#14B8A6;color:#fff;border:2px solid #fff;display:grid;place-items:center;font-size:10px;line-height:1;box-shadow:0 3px 8px rgba(0,20,90,.25)} .brand-txt{display:flex;flex-direction:column;gap:3px;min-width:0} .brand-name{font-family:var(--ff-h);font-weight:800;font-size:28px;line-height:1.1;color:#123A72;white-space:nowrap} .brand-sub{font-family:var(--ff-b);font-weight:500;font-size:13px;line-height:1.2;color:#64748B;white-space:nowrap} .brand-trust{display:flex;align-items:center;flex-wrap:nowrap;gap:7px;font-size:12.5px;font-weight:600;color:#1E5AA8;white-space:nowrap;overflow:hidden} .brand-trust>*{flex-shrink:0} /* When the header is tight (common at ordinary desktop widths — nav + the location pill + Book Appointment all compete for the same row), something has to give. It used to be .brand-stat:last-child ("10,000+ Surgeries"), ellipsis-truncated mid-word into "10,000+ Surg…" — measured as actually happening at 1141/1400/1440/1536px, not a rare edge case, and it reads like a typo rather than a truncation. Truncating .brand-rate instead (the Google rating/"Verified" text) reads clearly as "cut off here", and protects both numeric trust stats (25+ Yrs, 10,000+ Surgeries) — the more load-bearing trust signals — from ever being sacrificed. BUG FIX 2026-07-30: the no-rating fallback text was "Google Verified" (94px), wider than the ~77-82px actually available at 1400/1440/1536px — it truncated to "Google Veri…" every time, reading as a spelling mistake rather than an intentional cut. Shortened to "Verified" (47px), which fits without truncating at every realistic width; only the extreme 1141px edge case (23px available, the row is starved regardless of content) still clips it, and a bare word-start ellipsis there reads as truncation, not a typo. */ /* text-overflow:ellipsis is silently ignored on flex/inline-flex containers (verified: computed style shows the property set but no "…" ever renders, just a hard clip mid-word — the CSS spec only defines it for block containers). .brand-rate stays flex so the star icon aligns with the text; the actual truncation happens on the inner .brand-rate-t span, which IS a plain inline-block text container. */ .brand-rate{display:inline-flex;align-items:center;gap:4px;min-width:0;flex-shrink:1} .brand-rate-t{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;vertical-align:middle} .brand-stat{flex-shrink:0} .brand-stars{color:#f5a623;font-size:11px;letter-spacing:.5px} .brand-dot{color:var(--line);font-size:10px} .brand-stat{color:#1E5AA8} .logo{display:flex;align-items:center;gap:11px;flex-shrink:0} .logo-m{width:42px;height:42px;border-radius:13px;background:linear-gradient(140deg,var(--navy),var(--teal));color:#fff;display:grid;place-items:center;font-size:22px;font-weight:700;box-shadow:0 8px 20px rgba(0,0,122,.32);transition:.3s;flex-shrink:0} .logo:hover .logo-m{transform:rotate(-6deg) scale(1.05)} /* brand logo image (replaces the ✚ glyph wherever a logo file exists) */ .logo-m.has-logo,.chat-ava.has-logo{background:#fff;padding:0;overflow:hidden;font-size:0} .logo-m.has-logo img,.chat-ava.has-logo img{width:100%;height:100%;object-fit:cover;display:block} .logo:hover .logo-m.has-logo{transform:rotate(-3deg) scale(1.05)} .logo-t b{font-family:var(--ff-h);font-size:18px;color:var(--navy);display:block;line-height:1.05;white-space:nowrap} .logo-t small{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);white-space:nowrap} .nav{display:flex;flex-wrap:nowrap;gap:1px;align-items:center;flex:1;justify-content:center} .nav>a,.navitem>a{position:relative;font-size:14.5px;font-weight:500;color:var(--ink);padding:8px 9px;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:.2s;white-space:nowrap} .nav>a::after{content:'';position:absolute;left:11px;right:11px;bottom:5px;height:2px;border-radius:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .25s} .nav>a:hover::after,.nav>a.active::after{transform:scaleX(1)} .nav>a:hover,.nav>a.active,.navitem:hover>a{color:var(--blue)} .navitem:hover>a{background:var(--mist)} .navitem{position:relative}.navitem>a .ca{font-size:9px;transition:.25s}.navitem:hover>a .ca{transform:rotate(180deg)} .hdr-cta{margin-left:6px;flex-shrink:0;padding:11px 20px;min-height:44px;font-size:14px} .hdr-cta-ic{font-size:15px;transition:transform .26s cubic-bezier(.2,.7,.2,1)} .hdr-cta:hover .hdr-cta-ic{transform:scale(1.12) rotate(-6deg)} .burger{display:none;width:46px;height:46px;border-radius:12px;background:var(--mist);border:none;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px} .burger span{width:19px;height:2px;background:var(--navy);border-radius:2px} /* ========================================================================== LOCATION DETECTION & PERSONALIZATION (assets/js/geo-locate.js) UX personalization only — no new palette, no new component library. Every token below (colors, radius, shadow, spacing) is one already used throughout style.css; the only genuinely new markup is the bottom-sheet mechanics (backdrop + slide-up), since no existing component does that. ========================================================================== */ /* Header pill, next to Book Appointment */ .geo-pill{display:flex;align-items:center;gap:7px;flex-shrink:0;margin-left:10px; padding:9px 14px;min-height:40px;border-radius:999px;border:1.5px solid var(--line); background:#fff;color:var(--navy);font-size:13.5px;font-weight:700;cursor:pointer; transition:.18s} .geo-pill:hover,.geo-pill:focus-visible{border-color:var(--accent-ink);color:var(--accent-ink);background:var(--mist)} .geo-pill .ic{width:15px;height:15px;color:var(--accent-ink);flex-shrink:0} @media(max-width:1140px){.geo-pill{display:none}} /* drawer owns navigation below this width */ /* Reusable "nearby consultation" widget (includes/components.php geo_nearby_widget()) */ .geo-widget{border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;background:#fff;box-shadow:var(--sh-sm)} .geo-widget-head{display:flex;align-items:center;gap:12px} .geo-widget-ic{width:38px;height:38px;border-radius:11px;flex-shrink:0;display:grid;place-items:center; background:rgba(0,197,183,.12);color:var(--accent-ink)} .geo-widget-ic .ic{width:19px;height:19px} .geo-widget-t{flex:1;min-width:0;display:flex;flex-direction:column} .geo-widget-t small{font-size:11px;color:var(--slate);text-transform:uppercase;letter-spacing:.06em;font-weight:700} .geo-widget-t b{font-family:var(--ff-h);font-size:17px;color:var(--navy);line-height:1.25} .geo-widget-change{flex-shrink:0;border:1.5px solid var(--line);background:none;border-radius:999px; padding:7px 13px;font-size:12.5px;font-weight:700;color:var(--accent-ink);cursor:pointer;transition:.18s} .geo-widget-change:hover{background:var(--mist);border-color:var(--accent-ink)} .geo-widget-freq{margin:12px 0 0;font-size:13.5px;color:var(--slate);line-height:1.5} .geo-widget-actions{margin-top:14px} .geo-widget-services{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)} .geo-widget-svc{font-size:12.5px;font-weight:600;color:var(--navy);background:var(--mist); border-radius:20px;padding:6px 12px;transition:.15s} .geo-widget-svc:hover{background:var(--teal);color:#02231f} /* Wide variant (homepage/service/organ-hub full-width placements) — a single horizontal banner instead of the narrow sidebar card stretched full-width with empty space either side. Same building blocks, different arrangement: info on the left, frequency in the middle (its own column, not stacked below), actions grouped on the right. Falls back to the narrow card's stacked layout below 860px, where a row this dense stops fitting. */ .geo-widget--wide{display:flex;align-items:center;flex-wrap:wrap;gap:18px 28px} .geo-widget-main{display:flex;align-items:center;gap:16px;flex:1 1 380px;min-width:0} .geo-widget-id{display:flex;align-items:center;gap:12px;flex-shrink:0} .geo-widget--wide .geo-widget-t{flex:0 0 auto} .geo-widget--wide .geo-widget-freq{margin:0;padding-left:16px;border-left:1px solid var(--line); flex:1 1 200px;min-width:160px} .geo-widget-side{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex-shrink:0} .geo-widget--wide .geo-widget-services{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:none} @media(max-width:860px){ .geo-widget--wide{flex-direction:column;align-items:stretch} /* .geo-widget-main's flex-basis:380px means HEIGHT once the parent switches to flex-direction:column here — without resetting it to auto, the row tries to grow 380px tall, leaving a large empty gap below its content. */ .geo-widget-main{flex:0 0 auto;flex-direction:column;align-items:flex-start;gap:10px} .geo-widget--wide .geo-widget-freq{flex:0 0 auto;border-left:none;padding-left:0;width:100%} .geo-widget-side{width:100%;padding-top:14px;border-top:1px solid var(--line)} } /* Banner — small, dismissible, never fullscreen */ .geo-banner{position:fixed;left:50%;bottom:18px;transform:translate(-50%,14px);z-index:850; display:flex;align-items:center;gap:12px;max-width:min(560px,92vw); background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg); padding:12px 14px 12px 16px;opacity:0;visibility:hidden;transition:opacity .22s ease,transform .3s cubic-bezier(.2,.85,.25,1.06),visibility .3s} .geo-banner.is-on{opacity:1;visibility:visible;transform:translate(-50%,0)} .geo-banner-ic{font-size:18px;flex-shrink:0} .geo-banner-txt{flex:1;min-width:0;font-size:13.5px;color:var(--ink);line-height:1.4} .geo-banner-txt b{color:var(--navy)} .geo-banner-actions{display:flex;align-items:center;gap:6px;flex-shrink:0} .geo-banner-actions .btn{min-height:36px;padding:8px 14px;font-size:12.5px} .geo-banner-x{width:30px;height:30px;flex-shrink:0;border:none;background:none;border-radius:50%; color:var(--slate);font-size:18px;line-height:1;cursor:pointer;transition:.15s} .geo-banner-x:hover{background:var(--mist);color:var(--ink)} @media(max-width:640px){ .geo-banner{left:12px;right:12px;bottom:12px;max-width:none;transform:translateY(14px);flex-wrap:wrap} .geo-banner.is-on{transform:translateY(0)} .geo-banner-actions{width:100%;justify-content:flex-end} } /* Selector — desktop: small anchored dropdown. Backdrop only visually active on tablet/mobile (see below); on desktop it's present but transparent/ click-through-dismissible so the page doesn't dim behind a compact menu. */ .geo-backdrop{position:fixed;inset:0;z-index:960;background:rgba(11,16,32,0);opacity:0;visibility:hidden;transition:.25s} .geo-backdrop.is-on{opacity:1;visibility:visible} .geo-sheet{position:fixed;z-index:970;top:74px;right:max(24px,calc(50vw - 600px)); width:320px;max-width:92vw;max-height:min(70vh,520px); background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg); display:flex;flex-direction:column;overflow:hidden; opacity:0;visibility:hidden;transform:translateY(10px) scale(.97);transform-origin:top right; transition:opacity .22s ease,transform .3s cubic-bezier(.2,.85,.25,1.06),visibility .3s} .geo-sheet.is-on{opacity:1;visibility:visible;transform:translateY(0) scale(1)} .geo-sheet-grip{display:none} .geo-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px 12px;border-bottom:1px solid var(--line)} .geo-sheet-head b{font-family:var(--ff-h);font-size:15.5px;color:var(--navy)} .geo-sheet-x{width:32px;height:32px;border:none;background:var(--mist);border-radius:50%;color:var(--slate);font-size:18px;line-height:1;cursor:pointer;transition:.15s} .geo-sheet-x:hover{background:var(--line);color:var(--ink)} .geo-sheet-search{padding:12px 16px} .geo-search{width:100%;min-height:44px;padding:10px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm); font-size:14.5px;font-family:inherit;color:var(--ink);background:var(--mist)} .geo-search:focus{outline:none;border-color:var(--accent-ink);background:#fff} .geo-list{overflow-y:auto;padding:4px 10px 14px;flex:1} .geo-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%; min-height:52px;padding:9px 10px;border:none;background:none;border-radius:var(--r-sm); text-align:left;cursor:pointer;font-family:inherit;transition:.15s} .geo-row:hover,.geo-row.is-active{background:var(--mist)} .geo-row-t{display:flex;flex-direction:column;min-width:0} .geo-row-t b{font-size:14px;color:var(--navy);font-weight:700} .geo-row-t small{font-size:11.5px;color:var(--slate)} .geo-empty{padding:24px 16px;text-align:center;font-size:13.5px;color:var(--slate)} .geo-empty a{color:var(--accent-ink);font-weight:700} .geo-sheet-all{display:flex;align-items:center;gap:8px;justify-content:center;min-height:44px; padding:12px 16px;border-top:1px solid var(--line);font-size:13.5px;font-weight:700;color:var(--accent-ink);flex-shrink:0} .geo-sheet-all:hover{background:var(--mist)} body.geo-lock{overflow:hidden} /* Tablet + mobile (<1140px, the same threshold the site already uses for nav→drawer/burger): native-style bottom sheet with a drag grip. Desktop (>=1140px, where the header pill lives) keeps the small anchored dropdown from the unconditional .geo-sheet rule above — that's the only place this selector is reachable at that width, so no extra breakpoint is needed for it. */ @media(max-width:1139px){ .geo-backdrop{background:rgba(11,16,32,.45)} .geo-sheet{top:auto;right:0;left:0;bottom:0;width:auto;max-width:none;max-height:82vh; border-radius:20px 20px 0 0;transform:translateY(100%);transform-origin:bottom center} .geo-sheet.is-on{transform:translateY(0)} .geo-sheet-grip{display:block;width:40px;height:4px;border-radius:2px;background:var(--line);margin:10px auto 0} .geo-search{font-size:16px} /* iOS zoom threshold */ } @media(prefers-reduced-motion:reduce){ .geo-banner,.geo-sheet,.geo-backdrop{transition:none} } /* ========================================================================== BLOG SUBSCRIBE POPUP (assets/js/blog-subscribe.js) Same backdrop/dialog/focus-trap pattern as .geo-backdrop/.geo-sheet (one modal language sitewide, not a second one) — desktop centered dialog, mobile/tablet bottom sheet. Every token reused from the existing palette. ========================================================================== */ .sub-backdrop{position:fixed;inset:0;z-index:960;background:rgba(11,16,32,.45);opacity:0;visibility:hidden;transition:.25s} .sub-backdrop.is-on{opacity:1;visibility:visible} .sub-dialog{position:fixed;z-index:970;left:50%;top:50%;width:420px;max-width:92vw;max-height:88vh;overflow-y:auto; background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-lg); transform:translate(-50%,-46%) scale(.97);transform-origin:center; opacity:0;visibility:hidden;transition:opacity .22s ease,transform .3s cubic-bezier(.2,.85,.25,1.06),visibility .3s} .sub-dialog.is-on{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)} .sub-grip{display:none} .sub-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border:none;background:var(--mist); border-radius:50%;color:var(--slate);font-size:18px;line-height:1;cursor:pointer;transition:.15s;z-index:1} .sub-x:hover{background:var(--line);color:var(--ink)} .sub-body{padding:36px 32px 30px;text-align:center} .sub-ic{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:16px; background:rgba(0,197,183,.12);color:var(--accent-ink);margin-bottom:16px} .sub-ic .ic{width:26px;height:26px} .sub-body h2{font-family:var(--ff-h);font-size:22px;color:var(--navy);margin:0 0 8px} .sub-lede{font-size:14.5px;color:var(--slate);line-height:1.6;margin:0 0 22px} .sub-form{display:flex;flex-direction:column;gap:12px;text-align:left} .sub-field{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:700;color:var(--navy)} .sub-field input{min-height:46px;padding:11px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm); font-size:15px;font-family:inherit;color:var(--ink);background:var(--mist)} .sub-field input:focus{outline:none;border-color:var(--accent-ink);background:#fff} .sub-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .sub-consent{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:var(--slate);line-height:1.5;cursor:pointer} .sub-consent input{margin-top:2px;width:16px;height:16px;flex-shrink:0;accent-color:var(--teal)} .sub-submit{width:100%;justify-content:center;min-height:48px;margin-top:4px} .sub-msg{min-height:18px;margin:2px 0 0;font-size:13px;text-align:center} .sub-msg.is-ok{color:var(--accent-ink);font-weight:700} .sub-msg.is-err{color:#dc2626;font-weight:600} .sub-skip{display:block;text-align:center;margin-top:14px;font-size:12.5px;color:var(--slate);text-decoration:underline;text-underline-offset:2px} .sub-skip:hover{color:var(--navy)} body.sub-lock{overflow:hidden} /* Mobile/tablet: native-style bottom sheet instead of a centered dialog. */ @media(max-width:1023px){ .sub-dialog{top:auto;left:0;right:0;bottom:0;width:auto;max-width:none;max-height:88vh; border-radius:20px 20px 0 0;transform:translateY(100%) scale(1);transform-origin:bottom center} .sub-dialog.is-on{transform:translateY(0) scale(1)} .sub-grip{display:block;width:40px;height:4px;border-radius:2px;background:var(--line);margin:10px auto 0} .sub-field input{font-size:16px} /* iOS zoom threshold */ } @media(prefers-reduced-motion:reduce){ .sub-backdrop,.sub-dialog{transition:none} } /* mega menu — Healthline-style: condition columns + spotlight rail */ /* macOS-style open: scale + lift + fade from the top, gentle spring */ .panel{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(10px) scale(.96);transform-origin:top center;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-lg);opacity:0;visibility:hidden;transition:opacity .26s cubic-bezier(.16,1,.3,1),transform .36s cubic-bezier(.34,1.4,.5,1),visibility .36s;z-index:600} .navitem:hover>.panel,.navitem.open>.panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) scale(1);animation:menuPop .34s cubic-bezier(.2,.85,.25,1.06) both} /* macOS-style menu unfold (replays on every open) */ @keyframes menuPop{ 0%{opacity:0;transform:translateX(-50%) translateY(-10px) scale(.9)} 55%{opacity:1} 100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)} } @media(prefers-reduced-motion:reduce){.navitem:hover>.panel,.navitem.open>.panel{animation:none}} .panel::before{content:'';position:absolute;top:-24px;left:-24px;right:-24px;height:28px} /* centered mega for the rightmost item — anchored to the nav, centered under the header */ .nav{position:relative} .navitem-end{position:static} .navitem-end>.panel{left:50%;right:auto} /* simple list dropdown (Resources) */ .panel.menu-list{padding:10px;min-width:248px} .menu-list a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;font-size:14px;font-weight:500;color:var(--ink);transition:.18s} .menu-list a:hover{background:var(--mist);color:var(--blue)} .menu-list a .ic{width:18px;height:18px;color:var(--accent-ink);flex-shrink:0} /* Phase 3A (2026-07-29): single-column flow — the old 2-col grid (list columns + an isolated, denser sidebar) created visible imbalance; the 4-column layout below now carries the full width itself. */ /* Phase 3 (2026-07-28) mega-menu polish — search + quick actions bar */ /* Recently viewed — client-side, hidden entirely (no gap) until populated */ /* Phase 3 — compact 2-up grid for Organ Hubs / More Centres (Popular Assessments stays single-column since there are only ever 2-3 real ones) */ /* services mega — rebuilt on the SAME .lx rail+panel system as the Knowledge Centre launcher (includes/header.php, includes/launcher.php). The only services-specific addition is .lx-group--wrap: unlike an organ hub's 2-5 short groups (Diseases/Cancer/Procedures/...), a service category is ONE flat list of 6-17 items, so that single group spans the full row and flows itself into columns instead of stretching into one long column. */ /* Only ever visible at >=1140px (.panel is hidden below that, same as every other desktop dropdown) — so unlike the Knowledge Centres launcher, which must also work relocated into the mobile drawer as an accordion, Services has exactly ONE real layout to support. Rather than lean on the shared .lx-body breakpoint tiers (700px tablet-grid / 980px desktop-rail) via bare selectors — which only win by SOURCE ORDER against equally-specific rules like .lx{width:auto} declared further down the file, and silently lost that fight once (a real bug: .svc-lx{width:...} was being cancelled right back to auto) — every rule here is scoped under .svc-lx, one class more specific than the shared bare selectors, and declared with NO media query at all. That makes this component's layout self-contained: correct whenever it's visible, independent of viewport-tier math it doesn't actually need. */ .panel.svc-lx{width:min(860px,92vw)} .svc-lx .lx-body{display:grid;grid-template-columns:270px minmax(0,1fr);column-gap:26px; grid-template-rows:repeat(var(--lx-rows,6),min-content) 1fr;align-items:start;padding:20px 22px 4px} .svc-lx .lx-organ{grid-column:1;border:none;border-radius:var(--r-sm);min-height:48px;margin-bottom:2px} .svc-lx .lx-organ-ch{display:block} .svc-lx .lx-organ.is-on{background:var(--mist);border:none} .svc-lx .lx-panel{grid-column:2;grid-row:1/-1;margin-top:0;background:#fff; border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px} .svc-lx .lx-groups{grid-template-columns:1fr} /* Same tie-breaking trap as above: .lx-group{display:flex} is declared later in the file at equal specificity, so a bare .lx-group--wrap lost this fight too (caught by actually rendering it, not just reading the cascade). Two classes settles it regardless of source order. */ .lx-group.lx-group--wrap{grid-column:1/-1;display:block;column-count:3;column-gap:22px} .lx-group--wrap .lx-link{break-inside:avoid} /* L2 leaf → L1 parent-hub strip */ .kcl-parent{display:flex;align-items:center;gap:13px;margin:18px 0;padding:13px 16px;border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:14px;background:linear-gradient(135deg,#f3f6ff,#eef7f6);transition:.18s} .kcl-parent:hover{box-shadow:var(--sh-lg);transform:translateY(-1px)} .kcl-parent-ic{width:40px;height:40px;border-radius:11px;background:#fff;display:grid;place-items:center;color:var(--blue);flex-shrink:0;box-shadow:0 3px 8px rgba(0,0,60,.07)} .kcl-parent-ic .ic{width:21px;height:21px} .kcl-parent-t{display:flex;flex-direction:column;flex:1;font-size:14.5px;color:var(--navy);line-height:1.3} .kcl-parent-t b{font-weight:700} .kcl-parent-t small{font-size:12px;color:var(--slate);font-weight:500;margin-top:1px} .kcl-parent i{font-style:normal;font-size:20px;font-weight:700;color:var(--accent-ink);transition:.18s} .kcl-parent:hover i{transform:translateX(4px)} /* drawer — Healthline-style drill-down */ .drawer{position:fixed;inset:0;z-index:950;background:rgba(11,16,32,.45);opacity:0;pointer-events:none;transition:.3s} .drawer.open{opacity:1;pointer-events:auto} .dp{position:absolute;top:0;right:0;bottom:0;width:min(92vw,380px);background:#fff;transform:translateX(100%);transition:.32s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;overflow:hidden} .drawer.open .dp{transform:none} .dp-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)} .dp-brand{display:flex;align-items:center;gap:9px} .dp-brand .logo-m{width:34px;height:34px;border-radius:10px;font-size:17px} .dp-brand b{font-family:var(--ff-h);font-size:15px;color:var(--navy)} .dx{width:42px;height:42px;border-radius:12px;background:var(--mist);border:none;font-size:22px;color:var(--navy);cursor:pointer;flex-shrink:0} .dp-search{display:flex;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line)} .dp-search input{flex:1;border:1.5px solid var(--line);border-radius:11px;padding:11px 14px;font:inherit;font-size:14px;background:var(--mist)} .dp-search input:focus{outline:none;border-color:var(--blue);background:#fff} .dp-search button{width:46px;border:none;border-radius:11px;background:var(--teal);color:#04231f;font-size:15px;cursor:pointer;flex-shrink:0} .dp-panels{position:relative;flex:1;overflow:hidden} .dpanel{position:absolute;inset:0;display:flex;flex-direction:column;gap:2px;padding:12px;overflow-y:auto;background:#fff} .dpanel-root{transition:transform .3s cubic-bezier(.2,.7,.2,1)} .dp-panels.drilled .dpanel-root{transform:translateX(-22%)} .dpanel-sub{transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.7,.2,1);box-shadow:-12px 0 30px rgba(0,0,60,.06)} .dpanel-sub.open{transform:none} .dpanel>a,.dp-drill{display:flex;align-items:center;justify-content:space-between;padding:14px 14px;border-radius:12px;font-size:15.5px;font-weight:600;color:var(--navy);background:none;border:none;width:100%;text-align:left;cursor:pointer;font-family:inherit} .dpanel>a:hover,.dp-drill:hover{background:var(--mist);color:var(--blue)} .dp-drill span{color:var(--accent-ink);font-size:22px;line-height:1} .dp-foot{flex-shrink:0;padding:16px 18px;padding-bottom:max(16px,env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);box-shadow:0 -12px 24px rgba(10,18,55,.06)} .dp-cta{justify-content:center;width:100%;font-size:15px;padding:15px 20px;box-shadow:0 10px 24px rgba(0,197,183,.28)} .dp-foot-row{display:flex;gap:10px;margin-top:10px} .dp-foot-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:12px 10px;border-radius:12px;background:var(--mist);border:1px solid var(--line);color:var(--navy);font-size:13.5px;font-weight:700} .dp-foot-btn .ic{width:16px;height:16px} .dp-foot-btn:active{background:var(--line)} .dp-foot-wa{background:rgba(37,211,102,.1);border-color:rgba(37,211,102,.3);color:#0d7a3d} .dp-back{display:flex;align-items:center;gap:8px;padding:12px 6px;background:none;border:none;font-family:var(--ff-h);font-size:15px;font-weight:700;color:var(--navy);cursor:pointer;border-bottom:1px solid var(--line);margin-bottom:6px} .dp-back span{font-size:24px;line-height:1;color:var(--accent-ink)} .dp-sub-scroll{display:flex;flex-direction:column} /* Resources drawer rows — the mobile counterpart of the desktop .rx-organ rail. Two lines (title + description) so the drawer conveys the same information instead of degrading to a bare link list. 56px keeps it well above the 44px touch-target floor. */ .dp-res{display:flex;align-items:center;gap:12px;min-height:56px;padding:9px 4px} .dp-res-ic{flex-shrink:0;width:34px;height:34px;border-radius:10px;display:grid;place-items:center; background:rgba(0,197,183,.12);color:var(--accent-ink)} .dp-res-ic .ic{width:17px;height:17px} .dp-res-t{display:flex;flex-direction:column;gap:2px;min-width:0} .dp-res-t b{font-family:var(--ff-h);font-size:15px;font-weight:700;color:var(--navy);line-height:1.25} .dp-sub-scroll .dp-res-t small{font-size:12px;line-height:1.3;color:var(--ink2,#5b6a80)} .dp-res:active{background:var(--mist)} .dp-sub-all{padding:11px 12px;font-size:13px;font-weight:700;color:var(--blue);border-radius:10px} .dp-sub-all:hover{background:var(--mist)} .dp-sub-scroll h6{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--accent-ink);font-weight:700;margin:14px 12px 4px} .dp-sub-scroll a:not(.dp-sub-all):not(.dp-sub-h6){font-size:14px;padding:9px 12px;color:var(--slate);border-radius:10px} .dp-sub-scroll a:not(.dp-sub-all):not(.dp-sub-h6):hover{background:var(--mist);color:var(--blue)} .dp-sub-h6{display:flex;align-items:center;gap:7px;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--accent-ink);font-weight:700;margin:14px 0 4px;padding:8px 12px;border-radius:10px;transition:.18s} .dp-sub-h6 .ic{width:15px;height:15px;color:var(--accent-ink)} .dp-sub-h6-go{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:none;color:var(--blue);opacity:.85} .dp-sub-h6:active,.dp-sub-h6:hover{background:var(--teal-50)} /* hero */ .hero{position:relative;overflow:hidden;color:#fff;background:#00045e} .hero::before{content:'';position:absolute;inset:0;pointer-events:none;background: radial-gradient(circle at 80% 16%,rgba(0,197,183,.34),transparent 40%), radial-gradient(circle at 6% 80%,rgba(0,86,255,.34),transparent 44%), radial-gradient(circle at 52% 116%,rgba(0,46,184,.40),transparent 52%), radial-gradient(circle at 96% 96%,rgba(0,197,183,.16),transparent 36%)} .hero::after{content:'';position:absolute;right:-150px;top:-150px;width:500px;height:500px;border-radius:50%;border:1px solid rgba(255,255,255,.10);box-shadow:0 0 0 60px rgba(255,255,255,.04)} .hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.12fr .88fr;gap:50px;align-items:center;padding:clamp(56px,9vw,110px) 0} .hero-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(0,197,183,.16);border:1px solid rgba(0,197,183,.42);color:#a3efe8;font-size:12.5px;font-weight:600;letter-spacing:.02em;padding:7px 16px;border-radius:30px;margin-bottom:22px} .hero h1{color:#fff;font-size:clamp(33px,4.9vw,54px);line-height:1.08;letter-spacing:-.025em;margin-bottom:20px} .hero h1 .hl{color:var(--accent-ink)} .hero p.sub{font-size:clamp(16px,1.4vw,18.5px);color:rgba(255,255,255,.85);max-width:540px;margin-bottom:28px} .hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px} .hero-points{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:26px} .hero-points li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:rgba(255,255,255,.9)} .hero-points li::before{content:'✓';display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(0,197,183,.22);color:var(--accent-ink);font-size:11px;font-weight:700;flex-shrink:0} .hero .trust-strip{padding-top:24px;border-top:1px solid rgba(255,255,255,.14)} .hero-card{position:relative;background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-lg)} .hero-card img{width:100%;aspect-ratio:1/1.05;object-fit:cover;border-radius:18px;background:rgba(255,255,255,.12);margin-bottom:14px} .hc-badge{position:absolute;top:34px;left:0;display:inline-flex;align-items:center;gap:6px;background:var(--success);color:#fff;font-size:11.5px;font-weight:600;padding:7px 14px 7px 12px;border-radius:0 30px 30px 0;box-shadow:0 8px 20px rgba(0,0,40,.28)} .hc-name{text-align:center;margin-bottom:14px} .hc-name b{font-family:var(--ff-h);font-size:17px;color:#fff;display:block;line-height:1.2} .hc-name small{font-size:11.5px;color:rgba(255,255,255,.7);letter-spacing:.02em} .hero-card .hc-row{display:flex;gap:10px} .hero-card .hc-chip{flex:1;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:13px 8px;text-align:center} .hero-card .hc-chip b{font-family:var(--ff-h);color:var(--accent-ink);font-size:20px;display:block;line-height:1;margin-bottom:3px} .hero-card .hc-chip small{font-size:10.5px;color:rgba(255,255,255,.78);letter-spacing:.02em} .trust-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;font-weight:600} .trust-strip span{white-space:nowrap}.trust-strip .dot{width:5px;height:5px;border-radius:50%;background:var(--teal);display:inline-block} /* hero — live availability dot */ .live-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--teal);flex-shrink:0} .live-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--teal);opacity:.7;animation:pulse 1.8s ease-out infinite} @keyframes pulse{0%{transform:scale(.7);opacity:.7}100%{transform:scale(2.2);opacity:0}} /* hero — social-proof rating row */ .hero-rating{display:flex;align-items:center;gap:14px;margin-bottom:26px} .hr-avatars{display:flex} .hr-avatars span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:700;color:#fff;background:linear-gradient(140deg,var(--teal),var(--blue));border:2px solid var(--navy);margin-left:-9px;box-shadow:0 4px 10px rgba(0,0,40,.3)} .hr-avatars span:first-child{margin-left:0} .hr-stars{font-size:14px;letter-spacing:1px;color:#ffd24a;line-height:1.1} .hr-stars b{color:#fff;font-family:var(--ff-h);font-size:15px;margin-left:4px} .hr-meta small{font-size:12px;color:rgba(255,255,255,.72)} /* hero — call button */ .hero-call{gap:9px} .hc-call-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(0,197,183,.22);font-size:13px} /* hero card — floating proof chips */ .hc-float{position:absolute;display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--navy);border-radius:14px;padding:9px 13px;box-shadow:0 14px 30px rgba(0,0,40,.28);z-index:3;animation:float 4s ease-in-out infinite} .hc-float-rating{right:-14px;top:96px;flex-direction:column;gap:1px;text-align:center} .hc-float-rating b{font-family:var(--ff-h);font-size:16px;color:var(--navy);line-height:1} .hc-float-rating small{font-size:10px;color:var(--slate)} .hc-float-avail{left:-14px;bottom:128px;font-size:12px;font-weight:600;animation-delay:-2s} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} @media(max-width:760px){.hc-float{display:none}} /* ════════ premium homepage polish ════════ */ /* animated hero ambience: floating colour orbs + faint grid */ .hero-orbs{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden} .hero-orb{position:absolute;border-radius:50%;filter:blur(64px);opacity:.55;will-change:transform;animation:orb 17s ease-in-out infinite} .hero-orb.o1{width:440px;height:440px;background:radial-gradient(circle,rgba(0,197,183,.55),transparent 70%);top:-130px;right:5%} .hero-orb.o2{width:380px;height:380px;background:radial-gradient(circle,rgba(0,90,255,.5),transparent 70%);bottom:-150px;left:-70px;animation-delay:-6s} .hero-orb.o3{width:280px;height:280px;background:radial-gradient(circle,rgba(0,197,183,.32),transparent 70%);top:42%;left:42%;animation-delay:-11s} @keyframes orb{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(34px,-26px) scale(1.09)}66%{transform:translate(-24px,20px) scale(.95)}} .hero-grid{position:absolute;inset:0;z-index:1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(circle at 50% 38%,#000,transparent 76%);mask-image:radial-gradient(circle at 50% 38%,#000,transparent 76%)} /* credibility marquee under hero (solid teal) */ .tmarquee{background:#fff;overflow:hidden;border-bottom:1px solid var(--line)} .tm-track{display:flex;width:max-content;animation:tm 30s linear infinite} .tmarquee:hover .tm-track{animation-play-state:paused} .tm-track span{display:inline-flex;align-items:center;gap:11px;padding:15px 30px;color:var(--navy);font-family:var(--ff-h);font-weight:700;font-size:14.5px;white-space:nowrap} .tm-track span::before{content:'✦';color:var(--accent-ink);font-size:12px} @keyframes tm{to{transform:translateX(-50%)}} /* centred heading accent (solid teal) */ .tc .h2::after{content:'';display:block;width:54px;height:4px;border-radius:4px;margin:16px auto 0;background:var(--teal)} /* card top accent on hover (solid teal) */ .card{isolation:isolate} .card::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;z-index:2;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.2,1);will-change:transform} .card:hover::before{transform:scaleX(1)} /* stat band (solid navy) */ .statband{position:relative;overflow:hidden;background:var(--navy)} .statband .s{position:relative;z-index:1} .stats-note{text-align:center;font-size:12.5px;color:rgba(255,255,255,.72);margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);font-style:italic} .stats-note::first-letter{color:var(--accent-ink)} /* content hub */ .hub-grid{columns:3;column-gap:30px;margin-top:26px} .hub-col{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;box-shadow:var(--sh-sm);break-inside:avoid;-webkit-column-break-inside:avoid;display:inline-block;width:100%;margin-bottom:30px;vertical-align:top} .hub-h{display:flex;align-items:center;gap:9px;font-family:var(--ff-h);font-size:16px;font-weight:700;color:var(--navy);padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid var(--line)} .hub-h .ic{width:18px;height:18px;color:var(--accent-ink)} .hub-h:hover{color:var(--blue)} .hub-links{display:flex;flex-direction:column;gap:2px} .hub-links a{display:block;font-size:13.5px;color:var(--slate);padding:7px 8px;border-radius:8px;transition:.15s} .hub-links a:hover{background:var(--mist);color:var(--blue);padding-left:13px} @media(max-width:860px){.hub-grid{columns:2}} @media(max-width:600px){.hub-grid{columns:1}} /* article (blog) meta */ .art-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px} .tag-pill{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink);background:var(--teal-50);border:1px solid rgba(0,197,183,.3);border-radius:30px;padding:5px 12px} .tag-cat{background:var(--teal);color:#04231f;text-decoration:none} .tag-cat:hover{filter:brightness(.95)} /* blog category filter + card chip */ .cat-filter{display:flex;flex-wrap:wrap;gap:9px} .cat-pill{font-size:13px;font-weight:600;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:24px;padding:8px 15px;text-decoration:none;transition:.15s} .cat-pill:hover{border-color:var(--accent-ink);color:var(--accent-ink)} .cat-pill.active{background:var(--navy);color:#fff;border-color:var(--navy)} .card-cat{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--accent-ink);white-space:nowrap} .art-byline{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:14px;font-size:13px;color:rgba(255,255,255,.85)} .art-byline .ic{width:15px;height:15px;vertical-align:-.2em} @media(max-width:760px){.hero-orb{filter:blur(46px)}.hero-orb.o3{display:none}.hero-grid{background-size:42px 42px}} /* meet the surgeon (image + bio) */ .meet-sec{border-top:1px solid var(--line)} .meet{display:grid;grid-template-columns:.82fr 1.18fr;gap:48px;align-items:center} .meet-media{position:relative} .meet-media img{width:100%;aspect-ratio:4/4.6;object-fit:cover;border-radius:var(--r-lg);background:var(--mist);box-shadow:var(--sh)} .meet-media::before{content:'';position:absolute;left:-15px;top:-15px;width:118px;height:118px;border-radius:18px;border:3px solid var(--teal);z-index:-1} .about-photo{margin:0 0 16px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm)} .about-photo img{display:block;width:100%;aspect-ratio:4/4.4;object-fit:cover;object-position:top center} .about-photo figcaption{padding:12px 14px;font-family:var(--ff-h);font-weight:700;color:var(--navy);font-size:15px} .about-photo figcaption span{display:block;font-family:var(--ff-b);font-weight:500;font-size:12.5px;color:var(--slate);margin-top:2px} .meet-stat{position:absolute;right:-14px;bottom:26px;background:var(--navy);color:#fff;border-radius:16px;padding:14px 20px;text-align:center;box-shadow:var(--sh)} .meet-stat b{font-family:var(--ff-h);font-size:26px;color:var(--accent-ink);display:block;line-height:1} .meet-stat small{font-size:11px;color:rgba(255,255,255,.82);line-height:1.25;display:block;margin-top:4px} .meet-copy .h2{margin-bottom:6px} .meet-copy .lead{color:var(--blue);font-weight:600;font-size:16px;margin-bottom:14px} .meet-bio{font-size:15px;color:var(--slate);line-height:1.7;margin-bottom:22px} .meet-points{display:flex;flex-direction:column;gap:14px;margin-bottom:26px} .meet-points li{display:flex;gap:13px;align-items:flex-start} .meet-points li>span{width:42px;height:42px;border-radius:12px;background:rgba(0,197,183,.12);display:grid;place-items:center;font-size:20px;flex-shrink:0} .meet-points li div{font-size:14px;color:var(--slate);line-height:1.45} .meet-points li b{display:block;font-family:var(--ff-h);color:var(--navy);font-size:15px;margin-bottom:1px} @media(max-width:860px){.meet{grid-template-columns:1fr;gap:30px}.meet-media{max-width:430px}.meet-media::before{display:none}} /* video / trust section (lite-youtube facade) */ .vid-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:20px;align-items:start} .lyt{position:relative;border-radius:var(--r-lg);overflow:hidden;cursor:pointer;background:var(--navy);border:none;padding:0;width:100%;display:block} .vid-main{aspect-ratio:16/9} .vid-list{display:flex;flex-direction:column;gap:16px} .vid-item{aspect-ratio:16/9} .lyt img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)} .lyt::after{content:'';position:absolute;inset:0;background:rgba(0,0,40,.32);transition:background .3s} .lyt:hover img{transform:scale(1.06)} .lyt:hover::after{background:rgba(0,0,40,.2)} .vid-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;z-index:2;transition:.25s cubic-bezier(.2,.7,.2,1);box-shadow:0 10px 30px rgba(0,0,40,.3)} .vid-play::before{content:'';margin-left:5px;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent var(--navy);transition:border-color .25s} .lyt:hover .vid-play{background:var(--teal);transform:translate(-50%,-50%) scale(1.08)} .lyt:hover .vid-play::before{border-left-color:#02312b} .vid-play.sm{width:48px;height:48px}.vid-play.sm::before{border-width:8px 0 8px 13px} .vid-meta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 20px;background:rgba(0,0,40,.5)} .vid-meta b{display:block;font-family:var(--ff-h);color:#fff;font-size:17px} .vid-meta small{color:rgba(255,255,255,.82);font-size:12.5px} .vit-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:12px 14px;font-size:13px;font-weight:600;color:#fff;background:rgba(0,0,40,.5)} .lyt .vid-frame{position:absolute;inset:0;width:100%;height:100%;border:0} .lyt.playing{cursor:default} .lyt.playing::after,.lyt.playing .vid-play,.lyt.playing .vid-meta,.lyt.playing .vit-cap,.lyt.playing .vshort-tag,.lyt.playing img{display:none} @media(max-width:760px){.vid-grid{grid-template-columns:1fr}.vid-list{flex-direction:row;overflow-x:auto}.vid-item{min-width:200px}} /* vertical Shorts shelf (homepage video section) */ .vshorts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .vshort{aspect-ratio:9/16} .vshort .vid-play{width:56px;height:56px} .vshort-tag{position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:#fff;background:rgba(0,0,40,.55);padding:5px 9px;border-radius:20px} .vshort-tag .ic{width:13px;height:13px} .vshort .vit-cap{font-size:12.5px;padding:14px 13px 13px;background:linear-gradient(transparent,rgba(0,0,40,.78))} @media(max-width:900px){.vshorts{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.vshorts{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;gap:14px;padding-bottom:6px}.vshort,.vshorts .pvv-card{flex:0 0 72%;scroll-snap-align:start}} /* ── Premium hospital-verified video card (.pvv-*) — sitewide, via pvv_video_card() ── Adds a Dwarika Hospital ribbon + verified badge + bottom procedure/doctor caption on top of the existing .lyt click-to-play thumbnail. Drops into any existing grid (.vshorts, .bx-vid-grid, .pvv-grid). */ .pvv-card{position:relative;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:var(--navy-900);cursor:pointer;box-shadow:0 18px 40px -16px rgba(0,4,79,.32),0 2px 8px rgba(0,4,79,.10);border:1px solid rgba(255,255,255,.08);transition:transform .38s cubic-bezier(.2,.7,.2,1),box-shadow .38s cubic-bezier(.2,.7,.2,1)} .pvv-card:hover{transform:translateY(-8px) scale(1.015);box-shadow:0 28px 58px -14px rgba(0,4,79,.4),0 8px 20px rgba(0,4,79,.16)} .pvv-card:hover .pvv-thumb{transform:scale(1.06)} .pvv-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)} .pvv-tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,60,.30) 0%,rgba(0,0,60,.05) 22%,rgba(0,0,60,.05) 58%,rgba(0,0,60,.85) 100%);pointer-events:none} .pvv-ribbon{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;gap:8px;padding:10px 12px;background:rgba(0,4,60,.42);-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);border-bottom:1px solid rgba(255,255,255,.14)} .pvv-ribbon-logo{flex:none;width:24px;height:24px;border-radius:7px;background:#fff;display:grid;place-items:center;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.25)} .pvv-ribbon-logo img{width:100%;height:100%;object-fit:contain} .pvv-ribbon-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25} .pvv-ribbon-text b{font-family:var(--ff-h);font-size:10.5px;font-weight:800;letter-spacing:.045em;color:#fff} .pvv-ribbon-text small{font-size:9.5px;font-weight:600;color:rgba(255,255,255,.75)} .pvv-verified{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:800;letter-spacing:.02em;color:#04241a;background:linear-gradient(135deg,#3EE8B0,var(--success));padding:5px 9px;border-radius:20px;box-shadow:0 3px 10px -2px rgba(31,180,122,.55)} .pvv-play{width:60px;height:60px;background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 14px 34px -8px rgba(0,0,0,.45)} .pvv-play::before{border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff} .pvv-card:hover .pvv-play{background:var(--teal);border-color:var(--accent-ink);transform:translate(-50%,-50%) scale(1.1)} .pvv-card:hover .pvv-play::before{border-left-color:#02312b} .pvv-bottom{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:26px 14px 14px;display:flex;flex-direction:column;gap:3px} .pvv-proc{font-family:var(--ff-h);font-size:13.5px;font-weight:800;color:#fff;letter-spacing:-.01em} .pvv-doc{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.88)} .pvv-hosp{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:#7ffbe9;text-transform:uppercase;letter-spacing:.04em} .pvv-hosp .ic{width:11px;height:11px} .pvv-card.playing .pvv-ribbon,.pvv-card.playing .pvv-tint,.pvv-card.playing .pvv-bottom,.pvv-card.playing .pvv-play{display:none} @media(max-width:600px){.pvv-ribbon{padding:8px 10px}.pvv-play{width:50px;height:50px}.pvv-play::before{border-width:9px 0 9px 15px}} /* branded slim scrollbar for every horizontal scroller (default grey bar looks broken on mobile) */ .vshorts,.vid-list,.spv-slider,.spv-vids,.bla-table-scroll,.hx-rail{scrollbar-width:thin;scrollbar-color:var(--accent-ink) rgba(0,4,94,.08)} .vshorts::-webkit-scrollbar,.vid-list::-webkit-scrollbar,.spv-slider::-webkit-scrollbar,.spv-vids::-webkit-scrollbar,.bla-table-scroll::-webkit-scrollbar,.hx-rail::-webkit-scrollbar{height:4px} .vshorts::-webkit-scrollbar-track,.vid-list::-webkit-scrollbar-track,.spv-slider::-webkit-scrollbar-track,.spv-vids::-webkit-scrollbar-track,.bla-table-scroll::-webkit-scrollbar-track,.hx-rail::-webkit-scrollbar-track{background:rgba(0,4,94,.08);border-radius:4px} .vshorts::-webkit-scrollbar-thumb,.vid-list::-webkit-scrollbar-thumb,.spv-slider::-webkit-scrollbar-thumb,.spv-vids::-webkit-scrollbar-thumb,.bla-table-scroll::-webkit-scrollbar-thumb,.hx-rail::-webkit-scrollbar-thumb{background:var(--teal);border-radius:4px} /* ── legal pages (privacy / terms / refund) — premium document layout ── */ .lgl-hero{position:relative;overflow:hidden;color:var(--ink); background: radial-gradient(1000px 480px at 84% -18%,var(--teal-50) 0%,rgba(230,251,248,0) 60%), radial-gradient(760px 420px at 2% 108%,var(--mist) 0%,rgba(243,246,252,0) 60%), linear-gradient(180deg,#fff 0%,#fbfdff 55%,#fff 100%); padding:clamp(52px,7vw,84px) 0 44px;border-bottom:1px solid var(--line)} .lgl-hero-wm{position:absolute;right:5%;top:50%;transform:translateY(-50%);width:190px;height:190px;color:rgba(30,90,168,.055);pointer-events:none} .lgl-hero-wm .ic{width:100%;height:100%;stroke-width:1.1} @media(max-width:900px){.lgl-hero-wm{display:none}} .lgl-hero-eyb{position:relative;z-index:1} .lgl-hero-ic{position:relative;z-index:1;width:60px;height:60px;border-radius:16px;background:var(--teal-50);border:1px solid rgba(0,197,183,.25);display:grid;place-items:center;margin-bottom:18px;box-shadow:0 10px 26px rgba(0,197,183,.14)} .lgl-hero-ic .ic{width:28px;height:28px;color:var(--accent-ink)} .lgl-hero h1{position:relative;z-index:1;color:var(--navy);font-size:clamp(28px,4vw,42px);margin:0 0 12px} .lgl-hero-lede{position:relative;z-index:1;color:var(--slate);font-size:17px;line-height:1.65;max-width:620px;margin-bottom:20px} .lgl-hero-meta{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:13.5px;color:var(--slate);font-weight:500} .lgl-hero-meta span{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:40px;padding:6px 14px;box-shadow:var(--sh-sm)} .lgl-hero-meta .ic{width:15px;height:15px;color:var(--accent-ink)} .lgl-hero .crumb{position:relative;z-index:1;margin-bottom:16px} .lgl-hero .crumb,.lgl-hero .crumb a,.lgl-hero .crumb i{color:var(--slate)} .lgl-hero .crumb a:hover{color:var(--blue)} .lgl-hero .crumb span{color:var(--navy);opacity:1;font-weight:600} .lgl-layout{display:grid;grid-template-columns:250px 1fr;gap:44px;align-items:start;padding:clamp(48px,7vw,80px) 0} .lgl-side{position:sticky;top:110px} .lgl-toc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--sh-sm)} .lgl-toc-h{font-family:var(--ff-h);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--slate);margin-bottom:10px} .lgl-toc a{display:flex;align-items:center;gap:9px;font-size:13.8px;color:var(--ink);padding:8px 0;border-left:2px solid transparent;padding-left:12px;margin-left:-12px;transition:.18s;font-weight:500} .lgl-toc a .ic{width:15px;height:15px;color:var(--slate);flex-shrink:0;transition:.18s} .lgl-toc a:hover,.lgl-toc a.active{color:var(--blue);border-left-color:var(--accent-ink)} .lgl-toc a:hover .ic,.lgl-toc a.active .ic{color:var(--accent-ink)} .lgl-chips{display:none} @media(max-width:900px){ .lgl-layout{grid-template-columns:1fr;gap:26px} .lgl-side{position:static} .lgl-toc{display:none} .lgl-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none} .lgl-chips::-webkit-scrollbar{display:none} .lgl-chips a{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--navy);background:var(--mist);border:1px solid var(--line);border-radius:40px;padding:9px 16px;white-space:nowrap;transition:.18s} .lgl-chips a:hover,.lgl-chips a.active{background:var(--navy);color:#fff;border-color:var(--navy)} .lgl-chips .ic{width:14px;height:14px} } .lgl-content{min-width:0} .lgl-intro{font-size:18px;line-height:1.8;color:#2a3242;margin-bottom:6px} .lgl-sec{padding:28px 0;border-bottom:1px solid var(--line);scroll-margin-top:100px} .lgl-sec:last-of-type{border-bottom:none;padding-bottom:0} .lgl-sec-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px} .lgl-sec-ic{width:42px;height:42px;border-radius:12px;background:var(--teal-50);color:var(--accent-ink);display:grid;place-items:center;flex-shrink:0} .lgl-sec-ic .ic{width:20px;height:20px} .lgl-sec-head h2{font-size:21px;margin:0} .lgl-sec p{font-size:16.5px;line-height:1.8;color:#2a3242;margin-bottom:14px} .lgl-sec p:last-child{margin-bottom:0} .lgl-sec ul.bul{margin-bottom:14px} .lgl-sec address{font-style:normal;color:#2a3242;line-height:1.85} .lgl-box{display:flex;gap:14px;padding:20px 22px;border-radius:16px;margin:18px 0 4px;border:1px solid;font-size:15px;line-height:1.7} .lgl-box .ic{width:20px;height:20px;flex-shrink:0;margin-top:2px} .lgl-box b{display:block;font-family:var(--ff-h);font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px} .lgl-box p,.lgl-box ul{margin:0;font-size:15px;color:inherit} .lgl-box ul{padding-left:18px} .lgl-box ul li{margin-bottom:8px} .lgl-box ul li:last-child{margin-bottom:0} .lgl-box-info{background:var(--teal-50);border-color:rgba(0,197,183,.25);color:#04463f} .lgl-box-info .ic{color:var(--accent-ink)} .lgl-box-security{background:#EEF2FF;border-color:rgba(0,46,184,.2);color:#1b2456} .lgl-box-security .ic{color:var(--blue)} .lgl-box-warn{background:#FFF7E6;border-color:rgba(217,119,6,.3);color:#7a4a02} .lgl-box-warn .ic{color:#B45309} .lgl-box-emergency{background:#FEF2F2;border-color:rgba(220,38,38,.28);color:#7f1d1d} .lgl-box-emergency .ic{color:var(--destructive)} .lgl-contact{margin-top:8px;background:linear-gradient(160deg,#00107a,var(--navy) 60%);border-radius:24px;padding:36px 34px;color:#fff;display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center} .lgl-contact h3{color:#fff;font-size:22px;margin-bottom:8px} .lgl-contact p{color:rgba(255,255,255,.78);font-size:15px;margin:0} .lgl-contact-links{display:flex;flex-direction:column;gap:10px} .lgl-contact-links a{display:flex;align-items:center;gap:10px;color:#fff;font-size:14.5px;font-weight:500} .lgl-contact-links .ic{width:16px;height:16px;color:var(--accent-ink)} .lgl-contact-btns{display:flex;gap:10px;flex-wrap:wrap;align-self:start} @media(max-width:700px){.lgl-contact{grid-template-columns:1fr;padding:28px 24px}} /* sections */ .sec{padding:clamp(56px,9vw,110px) 0} .sec.mist{background:var(--mist)} .eyb{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--accent-ink);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px} .h2{font-size:clamp(26px,3.6vw,38px);margin-bottom:14px} .lead{font-size:18px;color:var(--slate);max-width:620px} .tc{text-align:center}.tc .lead{margin:0 auto} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:26px} /* card + chip */ .card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;transition:.3s cubic-bezier(.2,.7,.2,1)} .card:hover{transform:translateY(-6px);box-shadow:var(--sh);border-color:transparent} .chip{width:54px;height:54px;border-radius:50%;background:rgba(0,197,183,.12);color:var(--accent-ink);display:grid;place-items:center;font-size:24px;margin-bottom:16px;transition:.3s} .card:hover .chip{background:var(--teal);color:#fff} .card h3{font-size:19.5px;margin-bottom:8px} .card p{font-size:16.5px;color:var(--slate);line-height:1.6;margin-bottom:14px} .card-link{font-size:13.5px;font-weight:700;color:var(--blue)}.card-link i{font-style:normal;transition:.2s}.card:hover .card-link i{margin-left:4px} /* Image cards (libraries/blog/research). These previously used a 72px circular chip, on the reasoning that the illustration should "read as an icon, not the headline". In practice the artwork is 4:3 (disease/cancer/endoscopy) or 16:9 (research/services), and forcing either into a 1:1 circle discarded 44% of the picture — measured across the site, article thumbnails were showing roughly their middle third. Now a real full-width thumbnail. 16/10 sits between the two source ratios so neither is letterboxed much, and object-fit:contain guarantees the COMPLETE artwork is visible rather than cropped. The illustrations carry their own soft pastel backdrop, so --mist behind them reads as part of the artwork, not as bars. */ .card-img{padding:0 0 20px;overflow:hidden;display:flex;flex-direction:column} /* 21/9, not the old 16/10 — the illustrations dominated the card at 16/10, leaving the title/excerpt cramped underneath. Still object-fit:contain, so the shorter box shows the complete artwork, just smaller. */ .card-img .card-media{display:block;width:100%;aspect-ratio:21/9;margin:0 0 14px; overflow:hidden;background:var(--mist);flex-shrink:0} .card-img .card-media img{width:100%;height:100%;object-fit:contain;display:block; transition:transform .4s cubic-bezier(.2,.7,.2,1)} .card-img:hover .card-media img{transform:scale(1.04)} /* text keeps the original inset now that the media band is edge-to-edge */ .card-img h3,.card-img p,.card-img .card-link,.card-img .chip{margin-left:22px;margin-right:22px} .card-img .chip{margin-top:26px} .card-img h3{margin:0 0 8px} .card-img p{margin:0 0 14px} .card-img .card-link{margin:0} .card-img .chip{margin:0 0 16px} /* knowledge centres hub — centre cards */ .kc-centre-card{padding:0;overflow:hidden;display:flex;flex-direction:column} .kc-centre-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,60,.12);border-color:transparent} .kcc-media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--mist)} .kcc-media img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .4s cubic-bezier(.2,.7,.2,1)} .kc-centre-card:hover .kcc-media img{transform:scale(1.05)} .kcc-body{display:block;padding:22px 22px 24px;position:relative} .kcc-ic{position:absolute;top:-26px;right:20px;width:52px;height:52px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#00dccb,#00a99d);color:#02231f;box-shadow:0 8px 20px rgba(0,197,183,.4)} .kcc-ic .ic{width:24px;height:24px} .kcc-body b{display:block;font-family:var(--ff-b);font-size:18px;color:var(--navy);margin-bottom:8px;padding-right:48px} .kcc-body p{margin:0 0 16px;color:var(--muted);font-size:14.5px;line-height:1.55} .kcc-cta{font-style:normal;font-weight:700;font-size:13.5px;color:var(--blue);transition:.2s} .kc-centre-card:hover .kcc-cta{margin-left:4px} /* knowledge/service leaf hero + article cover + service banner */ .kc-hero,.art-cover,.svc-banner{margin:0 0 22px;border-radius:var(--r-lg);overflow:hidden;background:var(--mist);box-shadow:var(--sh-sm)} .kc-hero img,.art-cover img,.svc-banner img{display:block;width:100%;height:auto} .svc-banner{max-height:340px}.svc-banner img{height:340px;object-fit:cover} @media(max-width:600px){.svc-banner{max-height:220px}.svc-banner img{height:220px}} /* symptom chips */ .chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px} .chips a{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);border-radius:30px;padding:11px 20px;font-size:14.5px;font-weight:600;color:var(--navy);transition:.22s} .chips a .ic{width:18px;height:18px;color:var(--accent-ink);transition:color .22s} .chips a:hover .ic{color:#fff} .chips a .chip-img{width:30px;height:30px;border-radius:50%;object-fit:cover;margin:-4px 2px -4px -8px;background:var(--mist)} .chips a:hover{border-color:var(--accent-ink);background:var(--teal);color:#04231f;transform:translateY(-2px)} /* symptom selector — premium card grid */ .symsec{position:relative;overflow:hidden;background:var(--mist)} .symsec::before,.symsec::after{content:'';position:absolute;border-radius:50%;pointer-events:none;filter:blur(2px)} .symsec::before{width:420px;height:420px;background:radial-gradient(circle,rgba(0,197,183,.14),transparent 70%);top:-160px;left:-120px} .symsec::after{width:380px;height:380px;background:radial-gradient(circle,rgba(0,46,184,.10),transparent 70%);bottom:-160px;right:-100px} .sym-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:32px;max-width:1020px;margin-inline:auto} .sym-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px 14px 24px;text-align:center;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,border-color .28s;cursor:pointer} .sym-card:hover{transform:translateY(-6px);box-shadow:0 18px 34px -14px rgba(0,30,120,.22);border-color:transparent} .sym-ic{width:88px;height:88px;border-radius:50%;background:linear-gradient(135deg,var(--teal-50),#fff);display:grid;place-items:center;color:var(--accent-ink);transition:.28s} .sym-card:hover .sym-ic{background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff;transform:scale(1.08) rotate(-4deg)} .sym-ic .ic{width:38px;height:38px} .sym-ic .chip-img{width:64px;height:64px;border-radius:50%;object-fit:cover} .sym-label{font-weight:700;font-size:14.5px;color:var(--navy);line-height:1.3} .sym-arrow{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;background:var(--mist);color:var(--navy);display:grid;place-items:center;opacity:0;transform:translate(4px,-4px);transition:.25s} .sym-arrow .ic{width:13px;height:13px} .sym-card:hover .sym-arrow{opacity:1;transform:translate(0,0);background:var(--teal);color:#fff} @media(max-width:900px){.sym-grid{grid-template-columns:repeat(3,1fr)}} .sym-all{margin-top:28px} .sym-all .ic{width:16px;height:16px} @media(max-width:560px){.sym-grid{grid-template-columns:repeat(2,1fr);gap:12px}.sym-card{padding:24px 10px 18px}.sym-ic{width:72px;height:72px}.sym-ic .chip-img{width:52px;height:52px}.sym-ic .ic{width:32px;height:32px}} /* EEAT strip */ .eeat{display:grid;grid-template-columns:repeat(4,1fr);gap:26px} .eeat .e{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;text-align:center} .eeat .e .chip{margin:0 auto 14px} .eeat .e b{font-family:var(--ff-h);color:var(--navy);font-size:17px;display:block;margin-bottom:6px} .eeat .e p{font-size:13px;color:var(--slate)} /* stats band */ .statband{background:var(--navy);border-radius:var(--r-lg);padding:clamp(26px,4vw,42px);box-shadow:var(--sh)} .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .statband .s{text-align:center;color:#fff;position:relative} .statband .s + .s::before{content:'';position:absolute;left:-11px;top:12%;height:76%;width:1px;background:rgba(255,255,255,.16)} .statband .s b{font-family:var(--ff-h);font-size:clamp(26px,3.6vw,40px);color:var(--accent-ink);display:block;line-height:1} .statband .s span{font-size:13px;color:rgba(255,255,255,.78)} /* reviews */ .review{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-sm)} .review .stars{color:#FBBF24;letter-spacing:2px;margin-bottom:10px} .review p{font-size:14.5px;color:var(--ink);line-height:1.65;margin-bottom:14px} .review .by{display:flex;align-items:center;gap:11px;border-top:1px solid var(--line);padding-top:13px} .review .by .av{width:40px;height:40px;border-radius:50%;background:linear-gradient(140deg,var(--navy),var(--teal));color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px} .review .by b{font-size:13.5px;display:block;color:var(--navy)} .review .by small{font-size:11.5px;color:var(--slate)} .grating{display:flex;align-items:center;gap:14px;justify-content:center;margin-bottom:30px;flex-wrap:wrap} .grating .big{font-family:var(--ff-h);font-size:46px;color:var(--navy);font-weight:800;line-height:1} /* knowledge centre cards (3 big) */ .kc-card{background:linear-gradient(150deg,#fff,var(--mist));border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;transition:.3s} .kc-card:hover{transform:translateY(-6px);box-shadow:var(--sh)} .kc-card .chip{width:60px;height:60px;font-size:28px} .kc-card h3{font-size:21px;margin-bottom:8px} .kc-card p{color:var(--slate);font-size:14.5px;margin-bottom:14px} .kc-card .tags{display:flex;flex-wrap:wrap;gap:7px} .kc-card .tags span{font-size:11.5px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:4px 11px;color:var(--slate)} /* article / knowledge leaf */ .phero{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;padding:clamp(34px,5vw,56px) 0} .phero .crumb{margin-bottom:14px} .phero h1{color:#fff;font-size:clamp(28px,4vw,42px);max-width:840px;margin-bottom:14px} .phero .answer-lead{font-size:18px;color:rgba(255,255,255,.9);max-width:760px;line-height:1.6} .crumb{display:flex;align-items:center;gap:8px;font-size:13px;flex-wrap:wrap} .crumb a{color:rgba(255,255,255,.8)}.crumb a:hover{color:var(--accent-ink)}.crumb i{font-style:normal;opacity:.5}.crumb span{opacity:.85} /* minmax(0,...) not bare 1fr: a grid track's default min-width is auto, i.e. sized by its widest child's min-content — with several nowrap rows inside .art (.kcl-journey, .kcl-jumps, the .kcl-flow quickfacts grid, etc.), that silently inflated this track (and the whole page) to ~760px on EVERY viewport including mobile, clipping every section against the real 390px screen width. minmax(0,1fr) lets the track actually shrink to the available space, so children wrap/stack instead of forcing overflow. */ .art-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:46px;align-items:start;padding:clamp(40px,6vw,70px) 0} .art{max-width:760px;min-width:0;overflow-wrap:anywhere} .art h2{font-size:clamp(22px,3vw,30px);margin:36px 0 12px} .art h2:first-child{margin-top:0} .art p{font-size:19px;color:#2a3242;line-height:1.8;margin-bottom:16px} .art ul.bul{margin:0 0 18px}.art ul.bul li{position:relative;padding-left:26px;margin-bottom:10px;color:#2a3242} .art ul.bul li::before{content:'';position:absolute;left:3px;top:10px;width:8px;height:8px;border-radius:50%;background:var(--teal)} .answer{background:rgba(0,197,183,.08);border-left:4px solid var(--teal);border-radius:0 14px 14px 0;padding:20px 24px;margin:22px 0} .answer-lbl{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#008b80;display:block;margin-bottom:6px} .answer p{font-size:17px;color:var(--navy);margin:0;font-weight:500} .qfacts{border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:24px 0;box-shadow:var(--sh-sm)} .qf-h{background:var(--navy);color:#fff;font-weight:700;font-size:14px;padding:13px 20px;font-family:var(--ff-h)} .qfacts table{width:100%;border-collapse:collapse} .qfacts td{padding:12px 20px;font-size:14.5px;border-top:1px solid var(--line)} .qfacts td.k{font-weight:700;color:var(--navy);width:42%} .qfacts tr:nth-child(odd) td{background:var(--mist)} .aside{position:sticky;top:90px;display:flex;flex-direction:column;gap:18px} .aside .toc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px} .aside .toc h4{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-bottom:12px} .aside .toc a{display:block;font-size:14px;color:var(--ink);padding:7px 0 7px 12px;border-left:2px solid var(--line)} .aside .toc a:hover{color:var(--accent-ink);border-left-color:var(--accent-ink)} .aside-cta{background:linear-gradient(160deg,var(--navy),#001a9c);color:#fff;border-radius:16px;padding:22px} .aside-cta b{display:block;margin-bottom:6px}.aside-cta p{font-size:13px;color:rgba(255,255,255,.78);margin-bottom:14px} .author-box{display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;margin:30px 0} .author-box .av{width:64px;height:64px;border-radius:50%;background:linear-gradient(140deg,var(--navy),var(--teal));color:#fff;display:grid;place-items:center;font-weight:700;font-size:20px;flex-shrink:0;object-fit:cover} .author-box .lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-ink);margin-bottom:4px} .author-box b{color:var(--navy);font-size:16px;display:block;margin-bottom:6px} .author-box p{font-size:14px;color:var(--slate);margin-bottom:6px}.author-box a{color:var(--blue);font-weight:600} .author-box small{font-size:12px;color:var(--slate)} /* faq */ .faq-sec{margin:34px 0}.faq-sec h2{margin-bottom:18px} .faq .fq{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden} .fq-q{width:100%;text-align:left;background:none;border:none;padding:17px 20px;font-family:var(--ff-h);font-weight:600;font-size:15.5px;color:var(--navy);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px} .fq-q-txt{flex:1} /* Scoped to .fq-q-ic (the +/× toggle glyph) specifically, not "any span inside .fq-q" — a question can legitimately contain its own span (e.g. a data-geo-name-inline city mention), which must NOT inherit the icon's size/color/rotation. See services.php's city-aware FAQ question. */ .fq-q-ic{color:var(--accent-ink);font-size:20px;flex-shrink:0;transition:.2s} .fq.open .fq-q-ic{transform:rotate(45deg)} .fq-a{max-height:0;overflow:hidden;transition:max-height .3s} .fq-a p{padding:0 20px 17px;font-size:14.5px;color:var(--slate);line-height:1.7} /* 6-tier ecosystem navigator (Health Library) */ .lib-tiers{margin:56px 0 48px} .lib-tiers-head{text-align:center;max-width:680px;margin:0 auto 32px} .lib-tiers-sub{font-size:16px;color:var(--slate);line-height:1.65;margin-top:8px} .lib-tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .lib-tier{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 22px 20px;overflow:hidden;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,border-color .28s} .lib-tier::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--teal),var(--blue));transform:scaleY(0);transform-origin:top;transition:transform .3s cubic-bezier(.2,.7,.2,1)} .lib-tier:hover{transform:translateY(-6px);box-shadow:0 20px 40px -18px rgba(0,30,120,.26);border-color:transparent} .lib-tier:hover::before{transform:scaleY(1)} .lib-tier-badge{position:absolute;top:18px;right:18px;font-family:var(--ff-h);font-size:12px;font-weight:800;letter-spacing:.05em;color:var(--blue);background:var(--surface-2);border-radius:8px;padding:4px 9px} .lib-tier-ic{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--teal-50),#fff);color:var(--accent-ink);display:grid;place-items:center;margin-bottom:14px;transition:.28s} .lib-tier-ic .ic{width:26px;height:26px} .lib-tier:hover .lib-tier-ic{background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff} .lib-tier-title{font-family:var(--ff-h);font-size:17px;color:var(--navy);line-height:1.3} .lib-tier-desc{font-size:14px;color:var(--slate);line-height:1.55;margin:6px 0 16px;flex:1} .lib-tier-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:12px} .lib-tier-count{font-size:12.5px;font-weight:700;color:var(--accent-ink)} .lib-tier-cta{font-style:normal;font-size:13px;font-weight:700;color:var(--blue)} .lib-tier.is-current{border-color:var(--accent-ink);background:linear-gradient(160deg,var(--teal-50),#fff)} .lib-tier.is-current::before{transform:scaleY(1)} .lib-tier.is-current .lib-tier-badge{color:#fff;background:linear-gradient(135deg,var(--teal),var(--blue))} .lib-tier.is-current .lib-tier-ic{background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff} .lib-tier.is-current .lib-tier-cta{color:var(--accent-ink)} @media(max-width:900px){.lib-tier-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.lib-tier-grid{grid-template-columns:1fr}} /* ════════ A–Z legacy: only the glass search pill survives (used by gastro-health blog); the Conditions page itself is fully page-scoped (.cx-* inside conditions.php) ════════ */ .az-search{position:relative;display:flex;align-items:center;max-width:560px;margin:26px 0 0;background:#fff;border-radius:60px;padding:6px 6px 6px 22px;box-shadow:0 28px 60px -18px rgba(0,4,79,.55),0 0 0 6px rgba(255,255,255,.07);transition:box-shadow .25s,transform .25s} .az-search:focus-within{transform:translateY(-2px);box-shadow:0 32px 66px -18px rgba(0,4,79,.6),0 0 0 4px rgba(0,197,183,.5)} .az-search-ic{color:var(--accent-ink);flex-shrink:0;display:grid;place-items:center} .az-search-ic .ic{width:21px;height:21px} .az-search input{flex:1;border:0;outline:0;background:transparent;font-family:var(--ff-b);font-size:16px;color:var(--ink);padding:14px 12px;min-width:0} .az-search input::placeholder{color:var(--muted)} @media(max-width:560px){.az-search{padding:5px 5px 5px 16px}} /* ════════ GASTRO HEALTH BLOG (.gh-*) ════════ */ .gh-hero{padding-bottom:74px} .gh-hero-in{position:relative;z-index:1;max-width:720px;margin-top:16px} .gh-hero h1{font-size:clamp(28px,4.2vw,46px);color:#fff;line-height:1.12;margin:14px 0 12px;letter-spacing:-.01em} .gh-hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--teal),#7ffbe9);-webkit-background-clip:text;background-clip:text;color:transparent} .gh-lede{font-size:16.5px;color:rgba(255,255,255,.82);line-height:1.65;max-width:560px} .gh-lede b{color:#7ffbe9} .gh-search{max-width:560px;margin-top:24px} .gh-wrap{padding-top:26px;padding-bottom:10px} .gh-notice{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--slate);background:var(--mist);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:20px} .gh-notice .ic{width:16px;height:16px;color:var(--accent-ink)} /* category filter */ .gh-filter{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px} .gh-f{cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-family:var(--ff-b);font-size:13.5px;font-weight:600;color:var(--navy);background:#fff;border:1.5px solid var(--line);border-radius:40px;padding:9px 16px;transition:.18s;min-height:42px} .gh-f-n{font-size:11px;font-weight:800;color:var(--blue);background:var(--surface-2);border-radius:20px;padding:2px 8px} .gh-f:hover{border-color:var(--accent-ink);transform:translateY(-2px)} /* category archives now show their sibling categories: the active one is marked, and .gh-f-up is the "up to the whole section" link */ .gh-f.is-on{background:var(--navy);border-color:var(--navy);color:#fff} .gh-f.is-on .gh-f-n{background:rgba(255,255,255,.2);color:#fff} .gh-f-up{background:var(--mist);border-style:dashed} .gh-f-up .ic{width:14px;height:14px;color:var(--accent-ink)} .gh-f.is-on{background:linear-gradient(135deg,var(--navy),var(--blue));border-color:transparent;color:#fff} .gh-f.is-on .gh-f-n{background:rgba(255,255,255,.16);color:#7ffbe9} /* featured card */ .gh-feature{display:grid;grid-template-columns:1.05fr 1fr;gap:0;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;margin-bottom:22px;transition:transform .26s cubic-bezier(.2,.8,.2,1),box-shadow .26s,border-color .26s} .gh-feature:hover{transform:translateY(-4px);box-shadow:0 26px 50px -22px rgba(0,30,120,.3);border-color:transparent} .gh-feature-media{position:relative;min-height:280px;background:var(--mist) center/cover no-repeat} .gh-feature-badge{position:absolute;top:16px;left:16px;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#04231f;background:var(--teal);border-radius:30px;padding:6px 13px} .gh-feature-badge .ic{width:13px;height:13px} .gh-feature-body{padding:30px 32px;display:flex;flex-direction:column;justify-content:center} .gh-card-cat{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink);background:var(--teal-50);border-radius:20px;padding:4px 12px;margin-bottom:12px} .gh-feature-body b{font-family:var(--ff-h);font-size:23px;color:var(--navy);line-height:1.24;margin-bottom:10px} .gh-feature-body p{font-size:14.5px;color:var(--slate);line-height:1.6;margin-bottom:14px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden} .gh-reviewed{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--accent-ink)} .gh-reviewed .ic{width:14px;height:14px} .gh-feature-meta{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin:8px 0 14px} .gh-feature-meta .ic{width:14px;height:14px} /* blog grid */ .gh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .gh-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s,border-color .24s;content-visibility:auto;contain-intrinsic-size:auto 360px} .gh-f-more{background:var(--teal-50);border-color:var(--accent-ink);color:var(--navy)} /* hide WP plugin widgets that leak into imported article HTML */ .gh-content [class*="lwrp"],.gh-content .rp4wp-related-posts,.gh-content .rt-reading-time{display:none!important} /* hub topic sections */ .gh-sec{margin-top:46px} .gh-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:6px} .gh-sec-head .eyb{font-size:19px;text-transform:none;letter-spacing:0;color:var(--navy);display:inline-flex;align-items:center;gap:9px;font-family:var(--ff-h);font-weight:700} .gh-sec-head .eyb .ic{width:20px;height:20px;color:var(--accent-ink)} .gh-sec-desc{font-size:14px;color:var(--slate);margin-top:4px} .gh-sec-all{white-space:nowrap;font-family:var(--ff-b);font-size:14px;font-weight:700;color:var(--blue);border:1.5px solid var(--line);border-radius:40px;padding:9px 16px;transition:.18s} .gh-sec-all:hover{background:var(--navy);border-color:var(--navy);color:#fff} .gh-sec-chips{margin:10px 0 16px} .gh-grid-4{grid-template-columns:repeat(4,1fr)} .gh-grid-4 .gh-card-body b{font-size:15px;-webkit-line-clamp:2} .gh-grid-4 .gh-card-body p{display:none} /* search submit + smaller archive hero */ .gh-search-go{border:0;cursor:pointer;background:var(--teal);color:var(--navy-900);font-family:var(--ff-b);font-weight:800;font-size:14px;border-radius:40px;padding:10px 20px;margin-right:5px;transition:.18s;min-height:42px} .gh-search-go:hover{filter:brightness(1.08)} .gh-hero-sm .gh-hero-in h1{font-size:clamp(26px,4vw,40px)} /* pagination */ .gh-pager{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:34px} .gh-pg{font-family:var(--ff-b);font-weight:700;font-size:14.5px;color:var(--navy);background:#fff;border:1.5px solid var(--line);border-radius:40px;padding:11px 22px;transition:.18s;min-height:44px;display:inline-flex;align-items:center} .gh-pg:hover{background:var(--navy);border-color:var(--navy);color:#fff} .gh-pg-info{font-size:13.5px;color:var(--muted);font-weight:600} @media(max-width:1000px){.gh-grid-4{grid-template-columns:repeat(2,1fr)}.gh-sec-head{flex-direction:column;align-items:flex-start;gap:8px}} @media(max-width:560px){.gh-grid-4{grid-template-columns:1fr}} .gh-card:hover{transform:translateY(-5px);box-shadow:0 22px 42px -18px rgba(0,30,120,.28);border-color:transparent} .gh-card-media{position:relative;aspect-ratio:16/10;background:var(--mist) center/cover no-repeat;overflow:hidden} .gh-card-cat-abs{position:absolute;top:12px;left:12px;margin:0;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--navy);box-shadow:0 4px 12px -4px rgba(0,0,60,.25)} .gh-card-body{display:flex;flex-direction:column;gap:9px;padding:18px 18px 16px;flex:1} .gh-card-body b{font-family:var(--ff-h);font-size:16.5px;color:var(--navy);line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden} .gh-card-body p{font-size:13.5px;color:var(--slate);line-height:1.55;flex:1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} .gh-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--line)} .gh-card .card-link{font-size:13px;font-weight:700;color:var(--blue)} .gh-card .card-link i,.gh-feature .card-link i{font-style:normal;transition:.2s} .gh-card:hover .card-link i,.gh-feature:hover .card-link i{margin-left:4px} .gh-noresult{text-align:center;color:var(--slate);padding:40px 0;font-size:16px} .gh-noresult a{color:var(--blue);font-weight:700} /* ─ article view ─ */ .gh-arthero{padding-bottom:40px} .gh-arthead{max-width:820px;margin-top:14px} .gh-art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px} .gh-cat-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#04231f;background:var(--teal);border-radius:30px;padding:6px 14px} .gh-cat-pill .ic{width:14px;height:14px} .gh-meta-dot{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:rgba(255,255,255,.75)} .gh-meta-dot .ic{width:14px;height:14px;color:#7ffbe9} .gh-arthead h1{font-size:clamp(26px,3.6vw,40px);color:#fff;line-height:1.16;margin-bottom:14px} /* flex-start + a fixed-size icon + ONE wrapping text span (not loose text nodes) — loose "label text + name + trailing text" as separate flex children each get squeezed/wrapped independently on narrow viewports (one word per line); wrapping them in a single makes the whole line wrap normally like a paragraph, with the icon pinned to the first line. */ .gh-art-by{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:rgba(255,255,255,.8);line-height:1.5} .gh-art-by .ic{width:16px;height:16px;color:#7ffbe9;flex-shrink:0;margin-top:2px} .gh-art-by span{min-width:0} .gh-art-by b{color:#fff} /* rendered WordPress content — clean medical typography */ .gh-content{font-size:18px;line-height:1.8;color:#2a3242;overflow-wrap:anywhere} .gh-content > *:first-child{margin-top:0} /* TOC anchor jumps must clear the sticky header (72px) — otherwise the heading hides under it */ .gh-content h2,.gh-content h3,.gh-content h4,.art h2,.art h3,.art h4{scroll-margin-top:90px} .gh-content h2{font-family:var(--ff-h);font-size:clamp(21px,2.4vw,27px);color:var(--navy);line-height:1.28;margin:38px 0 14px;padding-top:8px} .gh-content h3{font-family:var(--ff-h);font-size:clamp(18px,1.9vw,21px);color:var(--navy);line-height:1.3;margin:28px 0 10px} .gh-content h4{font-family:var(--ff-h);font-size:17px;color:var(--navy);margin:22px 0 8px} .gh-content p{margin:0 0 18px} .gh-content a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(0,46,184,.3)} .gh-content a:hover{text-decoration-color:var(--blue)} .gh-content ul,.gh-content ol{margin:0 0 20px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:10px} .gh-content ul li,.gh-content ol li{position:relative;padding-left:30px;line-height:1.7} .gh-content ul li::before{content:'';position:absolute;left:5px;top:11px;width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(0,197,183,.14)} .gh-content ol{counter-reset:gho} .gh-content ol li{counter-increment:gho} .gh-content ol li::before{content:counter(gho);position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center} .gh-content img{max-width:100%;height:auto;border-radius:14px;margin:20px 0;box-shadow:0 16px 34px -20px rgba(0,4,79,.3)} .gh-content figure{margin:20px 0} .gh-content figcaption{font-size:13px;color:var(--muted);text-align:center;margin-top:8px} .gh-content blockquote{margin:22px 0;padding:16px 22px;background:var(--mist);border-left:4px solid var(--teal);border-radius:0 12px 12px 0;font-size:16.5px;color:var(--navy)} .gh-content blockquote p:last-child{margin-bottom:0} .gh-content table{width:100%;border-collapse:collapse;margin:22px 0;font-size:15px;border:1px solid var(--line);border-radius:12px;overflow:hidden} .gh-content th{background:var(--navy);color:#fff;font-weight:700;text-align:left;padding:12px 14px} .gh-content td{padding:11px 14px;border-top:1px solid var(--line)} .gh-content tr:nth-child(even) td{background:var(--mist)} .gh-content h2:first-child,.gh-content h3:first-child{margin-top:0} .gh-content iframe{max-width:100%;border-radius:14px;margin:20px 0} /* related cards w/ image */ .gh-relcard{overflow:hidden;padding:0} .gh-rel-media{display:block;aspect-ratio:16/9;background:var(--mist) center/cover no-repeat;overflow:hidden} .gh-relcard .sl-art-tag{margin:16px 18px 0} .gh-relcard b{margin:8px 18px} .gh-relcard .kcc-cta{margin:0 18px 18px} @media(prefers-reduced-motion:reduce){.gh-card,.gh-feature,.gh-f{transition:none}} @media(max-width:900px){ .gh-grid{grid-template-columns:repeat(2,1fr)} .gh-feature{grid-template-columns:1fr} .gh-feature-media{min-height:200px;aspect-ratio:16/9} } @media(max-width:560px){ .gh-grid{grid-template-columns:1fr} .gh-feature-body{padding:22px} .gh-content{font-size:16px} } /* related grid + breadcrumb cards */ .related{margin-top:40px;padding-top:30px;border-top:1px solid var(--line)} .related h2{font-size:22px;margin-bottom:18px} .related .grid-3{gap:16px} .related .card{padding:18px} .related .card .chip{width:40px;height:40px;font-size:18px;margin-bottom:10px} .related .card h3{font-size:16px;margin-bottom:6px;line-height:1.3} .related .card p{font-size:13.5px;line-height:1.5;margin-bottom:10px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} .related .card .card-link{font-size:13px} /* convert band + form */ .convert{background:var(--mist);padding:clamp(40px,6vw,70px) 0} .convert-in{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center} .convert h2{font-size:clamp(24px,3.4vw,34px);margin-bottom:12px} .convert p{color:var(--slate);margin-bottom:20px} .convert-quick{display:flex;gap:14px;flex-wrap:wrap} .cq{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 20px;box-shadow:var(--sh-sm)} .cq b{font-size:14.5px;color:var(--navy);display:block;line-height:1.1}.cq small{font-size:12px;color:var(--slate)} .cq-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex-shrink:0;transition:.25s cubic-bezier(.2,.7,.2,1)} .cq-ic svg{width:23px;height:23px} .cq-call{background:rgba(0,0,122,.10);color:var(--navy)} .cq-wa{background:rgba(37,211,102,.16);color:var(--wa)} .cq:hover .cq-call{background:var(--navy);color:#fff} .cq:hover .cq-wa{background:var(--wa);color:#fff} .cq:hover .cq-ic{transform:scale(1.06)} .apptform{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh)} .apptform h3{font-size:20px;margin-bottom:4px} /* NOT var(--success) here — theme-light.css redefines that token to #16A34A for the whole site (badges/icons where it is fine), but at THIS 12.5px regular weight on white it measured 3.29:1 (Lighthouse a11y audit), below the 4.5:1 AA minimum. Scoped to .apptsub rather than touching the shared token, which may be correctly used elsewhere at sizes/weights where 3:1 already suffices. */ .apptsub{font-size:12.5px;color:#128040;font-weight:600;margin-bottom:14px} .apptform label{display:block;font-size:12.5px;font-weight:600;color:var(--slate);margin-bottom:12px} .apptform input,.apptform select{width:100%;margin-top:5px;padding:12px 14px;border:1.5px solid var(--line);border-radius:11px;font-family:var(--ff-b);font-size:14.5px;background:var(--mist);color:var(--ink)} .apptform input:focus,.apptform select:focus{outline:none;border-color:var(--blue);background:#fff} .apptnote{font-size:12px;color:var(--slate);text-align:center;margin-top:10px} /* footer */ .foot{position:relative;overflow:hidden;color:rgba(255,255,255,.62);padding:clamp(56px,8vw,96px) 0 0; background:radial-gradient(920px 420px at 88% -12%,rgba(0,220,203,.16),transparent 60%),radial-gradient(700px 380px at 0% 0%,rgba(40,90,255,.14),transparent 55%),linear-gradient(180deg,#070728,#05051a)} .foot::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--navy),var(--teal),var(--blue))} .foot::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 55%);mask-image:linear-gradient(180deg,#000,transparent 55%)} .foot .wrap{position:relative;z-index:1} .fg{display:grid;grid-template-columns:1.8fr 1fr 1.1fr 1fr 1.2fr;gap:34px;padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.09)} .fb .logo{margin-bottom:16px}.fb p{font-size:13.5px;line-height:1.7;margin-bottom:8px;max-width:320px;color:rgba(255,255,255,.6)} .fb .reg{font-size:12px;color:rgba(255,255,255,.42)} .fsoc{display:flex;gap:10px;margin-top:18px} .fsoc a{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);display:grid;place-items:center;color:#fff;font-size:13px;font-weight:700;transition:.25s cubic-bezier(.2,.7,.2,1)} .fsoc a:hover{background:linear-gradient(135deg,#00dccb,#00a99d);color:#04231f;transform:translateY(-3px);border-color:transparent;box-shadow:0 12px 24px rgba(0,197,183,.32)} .fc h4{font-family:var(--ff-h);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:16px;position:relative;padding-bottom:11px} /* a SECOND heading inside one footer column (e.g. "Stay Connected" under "Get in Touch") — the base rule has no top margin, so it would collide with the link list above it */ .fc h4.fc-sub{margin-top:22px} /* social brand marks are FILLED glyphs; the shared icon() SVG is stroke-only (fill:none, stroke-width:2), which renders them as unreadable outlines */ .ic-brand{fill:currentColor;stroke:none} .fc h4::after{content:'';position:absolute;left:0;bottom:0;width:26px;height:2px;border-radius:2px;background:var(--teal)} .fc a,.fc span{display:flex;align-items:center;font-size:13.5px;margin-bottom:11px;color:rgba(255,255,255,.62);line-height:1.45;transition:color .2s,transform .2s} .fc a:hover{color:var(--accent-ink);transform:translateX(4px)} .fc span{align-items:flex-start;color:rgba(255,255,255,.55)} .fc a .ic,.fc span .ic{flex-shrink:0} .fc span .ic{margin-top:3px} .disclaimer{font-size:11.5px;color:rgba(255,255,255,.42);padding:20px 0;line-height:1.65;border-bottom:1px solid rgba(255,255,255,.09)} .fbot{padding:20px 0 26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:12px;color:rgba(255,255,255,.55)} .flegal{display:flex;gap:16px;flex-wrap:wrap} .flegal a{color:rgba(255,255,255,.55);transition:.2s} .flegal a:hover{color:var(--accent-ink)} /* sticky */ .waf{position:fixed;right:18px;bottom:86px;z-index:880;width:52px;height:52px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:0 12px 30px rgba(37,211,102,.5)} .waf svg{width:26px;height:26px}.waf:hover{transform:translateY(-3px)} .waf::before{content:'';position:absolute;inset:0;border-radius:50%;background:var(--wa);z-index:-1;animation:pulse 2.4s infinite} @keyframes pulse{0%{transform:scale(1);opacity:.6}80%,100%{transform:scale(1.9);opacity:0}} /* AI chat assistant */ /* back-to-top FAB (injected by main.js, sits above the chat FAB) */ .toTop{position:fixed;right:25px;bottom:92px;z-index:880;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);cursor:pointer;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--navy);display:grid;place-items:center;box-shadow:0 12px 28px -10px rgba(0,4,79,.35);opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .3s,transform .3s,background .2s,color .2s} .toTop.show{opacity:1;transform:none;pointer-events:auto} .toTop:hover{background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff;border-color:transparent} .toTop svg{width:18px;height:18px} @media(max-width:560px){.toTop{right:21px;bottom:88px}} .chat-fab{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:20px;z-index:890;width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;display:grid;place-items:center;box-shadow:0 14px 34px rgba(0,0,122,.42);transition:transform .2s,box-shadow .2s} .chat-fab:hover{transform:translateY(-3px) scale(1.04)} .chat-fab svg{width:27px;height:27px;position:absolute;transition:opacity .2s,transform .25s} .chat-fab .cf-close{opacity:0;transform:rotate(-45deg) scale(.6)} .chat-fab.open .cf-open{opacity:0;transform:rotate(45deg) scale(.6)} .chat-fab.open .cf-close{opacity:1;transform:none} .chatbox{position:fixed;right:18px;bottom:88px;z-index:889;width:372px;max-width:calc(100vw - 28px);height:540px;max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(20,26,43,.28);display:flex;flex-direction:column;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(16px) scale(.98);transform-origin:bottom right;transition:opacity .22s,transform .22s,visibility .22s} .chatbox.open{opacity:1;visibility:visible;transform:none} .chat-head{display:flex;align-items:center;gap:11px;padding:14px 16px;background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff} .chat-ava{width:38px;height:38px;border-radius:50%;background:var(--teal);color:var(--navy-900,#00004d);display:grid;place-items:center;font-weight:800;font-size:18px;flex:none} .chat-ht b{display:block;font-family:var(--ff-h);font-size:14.5px;line-height:1.2} .chat-ht small{font-size:11.5px;opacity:.85} .chat-min{margin-left:auto;background:rgba(255,255,255,.15);border:none;color:#fff;width:28px;height:28px;border-radius:8px;font-size:20px;line-height:1;cursor:pointer} .chat-min:hover{background:rgba(255,255,255,.28)} .chat-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--mist)} .cmsg{max-width:84%;padding:10px 13px;border-radius:14px;font-size:13.7px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word} .cmsg.bot{align-self:flex-start;background:#fff;color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:5px} .cmsg.me{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:5px} .cmsg a{color:inherit;text-decoration:underline} .cmsg.bot a{color:var(--blue)} .clink{align-self:flex-start;max-width:84%;display:flex;flex-wrap:wrap;gap:7px} .clink a{font-size:12px;background:var(--teal-50,#e8faf6);color:var(--teal-700,#0b7c6e);border:1px solid var(--teal,#16b8a6);padding:6px 11px;border-radius:20px;text-decoration:none;font-weight:600} .clink a:hover{background:var(--teal);color:#04231f} .cwa{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;background:var(--wa,#25d366);color:#fff;padding:10px 16px;border-radius:24px;font-weight:700;font-size:13.5px;text-decoration:none;box-shadow:0 8px 18px rgba(37,211,102,.4)} .cwa svg{width:18px;height:18px} .cchips{align-self:flex-start;display:flex;flex-wrap:wrap;gap:7px;max-width:92%} .cchip{font-size:12.5px;background:#fff;color:var(--navy);border:1px solid var(--line);padding:7px 12px;border-radius:20px;cursor:pointer;font-weight:600;transition:.15s} .cchip:hover{background:var(--navy);color:#fff;border-color:var(--navy)} .ctyping{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:14px} .ctyping span{width:7px;height:7px;border-radius:50%;background:var(--slate);opacity:.5;animation:cbounce 1.2s infinite} .ctyping span:nth-child(2){animation-delay:.2s}.ctyping span:nth-child(3){animation-delay:.4s} @keyframes cbounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}} .chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:#fff} .chat-input input{flex:1;border:1px solid var(--line);border-radius:22px;padding:11px 15px;font-size:14px;font-family:var(--ff-b);outline:none} .chat-input input:focus{border-color:var(--accent-ink)} .chat-input button{flex:none;width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;background:var(--teal);color:var(--navy-900,#00004d);display:grid;place-items:center} .chat-input button svg{width:19px;height:19px} .chat-input button:hover{background:var(--blue);color:#fff} @media(max-width:600px){ .chatbox{right:10px;left:10px;bottom:calc(84px + env(safe-area-inset-bottom));width:auto;height:calc(100vh - 150px);height:calc(100dvh - 150px)} } .appbar{display:none} /* responsive */ @media(max-width:1320px){ .nav>a,.navitem>a{padding:8px 7px;font-size:13px} .hdr-cta{padding:10px 15px;font-size:13.5px} .hdr-cta-ic{display:none} .brand-ph{width:60px;height:60px} .brand-name{font-size:22px} .brand-sub{font-size:12px} .brand-trust{font-size:11px;gap:5px} } @media(max-width:1140px){ .nav,.hdr-cta{display:none}.burger{display:flex;margin-left:auto}.panel{display:none!important} .brand-ph{width:68px;height:68px} .brand-name{font-size:26px} .brand-sub{font-size:13px} .brand-trust{font-size:12.5px;gap:7px} } @media(max-width:760px){ .hdr-in{height:64px} .brand{gap:10px} .brand-ph{width:46px;height:46px} .brand-name{font-size:16px} .brand-sub{font-size:11px} .brand-trust{display:none} /* long-label CTAs (e.g. "Read the Gastro Health Blog — 475+ articles") must wrap instead of forcing the document wider than the viewport */ .btn{white-space:normal;max-width:100%;text-align:center;line-height:1.3} } @media(max-width:980px){ .hero-in,.convert-in{grid-template-columns:1fr} .art-wrap{grid-template-columns:minmax(0,1fr)} .hero-card{max-width:420px;margin:0 auto} .eeat,.grid-4,.stat-grid{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(2,1fr)} .statband .s:nth-child(2)::before,.statband .s:nth-child(3)::before{display:none} .aside{position:static;flex-direction:row;flex-wrap:wrap}.aside>*{flex:1;min-width:240px} .fg{grid-template-columns:1fr 1fr}.fb{grid-column:1/-1} } @media(max-width:600px){ body{padding-bottom:72px} .grid-2,.grid-3,.grid-4,.eeat{grid-template-columns:1fr} .stat-grid{grid-template-columns:1fr 1fr;gap:24px} .fg{grid-template-columns:1fr}.fbot{flex-direction:column;text-align:center} .appbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:880;background:#fff;border-top:1px solid var(--line);padding:9px 12px;gap:9px;padding-bottom:max(9px,env(safe-area-inset-bottom));padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))} .appbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;font-weight:600;color:var(--navy);min-height:46px;border-radius:10px} .appbar a span{font-size:10px} .appbar .ab-book{background:var(--teal);color:#04231f;font-size:14px} .chat-fab{bottom:calc(100px + env(safe-area-inset-bottom))} .chat-fab.open{display:none} .waf{bottom:calc(166px + env(safe-area-inset-bottom))} } /* ═══════════════ MASTER HUB (Knowledge Centre) ═══════════════ */ .mh-hero{color:#fff;padding:42px 0 58px;position:relative;overflow:hidden; background: radial-gradient(1100px 520px at 88% -15%, rgba(0,220,203,.30), transparent 60%), radial-gradient(760px 620px at 4% 125%, rgba(40,90,255,.40), transparent 55%), linear-gradient(135deg,#000058 0%,var(--navy) 42%,#0a32c8 100%)} .mh-hero::before{content:'';position:absolute;inset:0;pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.085) 1px,transparent 1px);background-size:24px 24px; -webkit-mask-image:linear-gradient(115deg,#000 35%,transparent 75%);mask-image:linear-gradient(115deg,#000 35%,transparent 75%)} .mh-hero::after{content:'';position:absolute;right:-140px;top:-140px;width:460px;height:460px;border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(0,220,203,.40),transparent 68%);filter:blur(36px)} .mh-hero .wrap{position:relative;z-index:1} .mh-hero .crumb,.mh-hero .crumb a,.mh-hero .crumb i{color:rgba(255,255,255,.7)} .mh-hero .crumb span{color:#fff} .mh-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;margin-top:14px} .mh-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#7ffbe9;background:rgba(0,220,203,.12);border:1px solid rgba(0,220,203,.35);padding:7px 15px;border-radius:30px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .mh-eyebrow .ic{width:15px;height:15px} .mh-hero-copy h1{color:#fff;font-size:clamp(32px,4.6vw,50px);line-height:1.06;margin:18px 0 16px;letter-spacing:-.015em;text-shadow:0 2px 34px rgba(0,0,40,.45);font-weight:800} .mh-lede{font-size:16.5px;line-height:1.62;color:rgba(255,255,255,.92);max-width:580px} .mh-hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 20px} .mh-badges{display:flex;flex-wrap:wrap;gap:9px 16px} .mh-badges span{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:rgba(255,255,255,.9);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:5px 12px;border-radius:30px} .mh-badges .ic{width:14px;height:14px;color:#2ee6cf} .mh-hero-media{position:relative;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.2);box-shadow:0 30px 70px rgba(0,0,40,.5);background:rgba(255,255,255,.06)} .mh-hero-media::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,transparent 55%,rgba(0,0,60,.35));pointer-events:none} .mh-hero-media img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3} /* decorative right-side visual when a hub has no hero image */ .mh-hero-deco{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-content:center} .mh-hero-deco .mhd-chip{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:16px 16px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:.3s} .mh-hero-deco .mhd-chip:hover{transform:translateY(-4px);background:rgba(255,255,255,.14);border-color:rgba(0,220,203,.5)} .mh-hero-deco .mhd-chip:nth-child(odd){transform:translateY(14px)} .mh-hero-deco .mhd-chip:nth-child(odd):hover{transform:translateY(10px)} .mh-hero-deco .mhd-ic{width:42px;height:42px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;background:linear-gradient(135deg,#00dccb,#00a99d);color:#02231f} .mh-hero-deco .mhd-ic .ic{width:22px;height:22px} .mh-hero-deco .mhd-chip b{font-size:13.5px;font-weight:600;color:#fff;line-height:1.25} /* stat bar */ .mh-statbar{background:var(--navy-900,#00004d);color:#fff} .mh-statbar-in{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;padding:20px 0} .mh-stat{text-align:center} .mh-stat b{display:block;font-family:var(--ff-h);font-size:22px;color:var(--accent-ink)} .mh-stat small{font-size:12.5px;color:rgba(255,255,255,.8)} /* layout */ .mh-layout{display:grid;grid-template-columns:1fr 312px;gap:40px;padding:clamp(56px,8vw,96px) 0} .mh-main{min-width:0} .mh-sec{margin-bottom:48px;scroll-margin-top:90px} .mh-sec .eyb{margin-bottom:8px} .mh-h{font-family:var(--ff-h);font-size:clamp(22px,2.6vw,28px);color:var(--navy);margin-bottom:16px} .mh-sub{font-family:var(--ff-h);font-size:18px;color:var(--navy);margin-bottom:14px} .mh-lead{font-size:16.5px;line-height:1.7;color:var(--slate);max-width:760px} /* two-col why+symptoms */ .mh-two{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start} .mh-why-img{margin:18px 0 0;border-radius:var(--r);overflow:hidden} .mh-why-img img{display:block;width:100%;height:auto} .mh-symptoms{display:grid;grid-template-columns:1fr 1fr;gap:10px} .mh-symptoms li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink);background:var(--mist);border:1px solid var(--line);border-radius:10px;padding:11px 13px} .mh-symptoms li span{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#fff;color:var(--accent-ink);flex:none} .mh-symptoms .ic{width:17px;height:17px} /* diagnosis steps */ .mh-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:24px} .mh-step{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px} .mh-step-n{flex:none;width:34px;height:34px;border-radius:50%;background:var(--teal);color:var(--navy-900,#00004d);font-weight:800;display:grid;place-items:center} .mh-step b{display:block;color:var(--navy);margin-bottom:4px} .mh-step p{font-size:13.5px;color:var(--slate);line-height:1.55} /* treatments */ .mh-treat{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .mh-treat-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;transition:.25s} .mh-treat-card:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:transparent} .mh-treat-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:rgba(0,197,183,.12);color:var(--accent-ink);margin-bottom:12px} .mh-treat-ic .ic{width:23px;height:23px} .mh-treat-card b{display:block;color:var(--navy);font-size:16px;margin-bottom:6px} .mh-treat-card p{font-size:13.5px;color:var(--slate);line-height:1.55} /* expertise */ .mh-expertise{display:grid;grid-template-columns:.8fr 1.2fr;gap:34px;align-items:center;background:var(--mist);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px} .mh-exp-img{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)} .mh-exp-img img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/4.4} .mh-checks{display:flex;flex-direction:column;gap:11px;margin:6px 0 20px} .mh-checks li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--ink)} .mh-checks .ic{width:19px;height:19px;color:var(--accent-ink);flex:none;margin-top:1px} /* resources */ .mh-res{display:grid;grid-template-columns:1fr 1fr;gap:12px} .mh-res a{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 18px;color:var(--navy);font-weight:600;font-size:14.5px;transition:.2s} .mh-res a:hover{border-color:var(--accent-ink);box-shadow:var(--sh-sm)} .mh-res a span{flex:1} .mh-res a .ic:first-child{color:var(--accent-ink);width:18px;height:18px} .mh-res a i{font-style:normal;color:var(--blue)} /* mini articles/cases/stories */ .mh-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .mh-mini-col h4{display:flex;align-items:center;gap:8px;font-family:var(--ff-h);font-size:15px;color:var(--navy);padding-bottom:10px;margin-bottom:8px;border-bottom:2px solid var(--teal)} .mh-mini-col h4 .ic{width:17px;height:17px;color:var(--accent-ink)} .mh-mini-col a{display:block;font-size:13.5px;color:var(--slate);padding:8px 0;border-bottom:1px solid var(--line);line-height:1.45} .mh-mini-col a:hover{color:var(--blue)} .mh-mini-all{font-weight:700;color:var(--blue)!important;border-bottom:none!important} /* sticky sidebar */ .mh-aside{align-self:start;position:sticky;top:84px;display:flex;flex-direction:column;gap:18px} .mh-toc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px} .mh-toc h4{font-family:var(--ff-h);font-size:14px;color:var(--navy);margin-bottom:10px} .mh-toc a{display:block;font-size:13.5px;color:var(--slate);padding:7px 0;border-left:2px solid transparent;padding-left:10px;margin-left:-10px;transition:.15s} .mh-toc a:hover{color:var(--blue);border-left-color:var(--accent-ink)} .mh-cta{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;border-radius:var(--r-lg);padding:22px;text-align:center} .mh-cta b{display:block;font-family:var(--ff-h);font-size:18px;margin-bottom:6px} .mh-cta p{font-size:13px;color:rgba(255,255,255,.85);margin-bottom:14px} .mh-cta .btn{width:100%;justify-content:center;margin-bottom:10px} .mh-cta-line{display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;font-weight:600;font-size:14px;padding:9px;border-radius:10px;background:rgba(255,255,255,.1)} .mh-cta-line:hover{background:rgba(255,255,255,.2)} .mh-cta-line.wa{margin-top:8px} .mh-cta-line .ic{width:17px;height:17px;color:var(--accent-ink)} @media(max-width:980px){ .mh-hero-grid{grid-template-columns:1fr}.mh-hero-media{order:-1;max-height:260px} .mh-statbar-in{grid-template-columns:repeat(3,1fr);gap:14px 8px} .mh-layout{grid-template-columns:1fr} .mh-aside{position:static;flex-direction:row;flex-wrap:wrap}.mh-aside>*{flex:1;min-width:260px} .mh-expertise{grid-template-columns:1fr}.mh-exp-img{max-width:300px} } @media(max-width:700px){ .mh-two,.mh-steps,.mh-treat,.mh-symptoms,.mh-res,.mh-mini{grid-template-columns:1fr} .mh-statbar-in{grid-template-columns:repeat(2,1fr)} } /* ═══════════════ SERVICE LANDING (conversion) ═══════════════ */ .sl-hero{color:#fff;padding:34px 0 56px;position:relative;overflow:hidden; background: radial-gradient(1000px 480px at 92% -20%, rgba(0,220,203,.30), transparent 60%), radial-gradient(720px 560px at -5% 120%, rgba(40,90,255,.40), transparent 55%), linear-gradient(135deg,#000058 0%,var(--navy) 44%,#0a32c8 100%)} .sl-hero::before{content:'';position:absolute;inset:0;pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:24px 24px; -webkit-mask-image:linear-gradient(120deg,#000 30%,transparent 70%);mask-image:linear-gradient(120deg,#000 30%,transparent 70%)} .sl-hero .wrap{position:relative;z-index:1} .sl-hero .crumb,.sl-hero .crumb a,.sl-hero .crumb i{color:rgba(255,255,255,.7)}.sl-hero .crumb span{color:#fff} .sl-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;margin-top:14px} .sl-hero-copy h1{color:#fff;font-size:clamp(30px,4.2vw,46px);line-height:1.06;margin:18px 0 14px;letter-spacing:-.015em;font-weight:800;text-shadow:0 2px 34px rgba(0,0,40,.45)} .sl-trust{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0 6px} .sl-trust span{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);padding:7px 13px;border-radius:30px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .sl-trust .ic{width:15px;height:15px;color:#2ee6cf} .sl-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px} .sl-rating{margin-top:18px;font-size:13.5px;color:rgba(255,255,255,.85)}.sl-rating b{color:#ffd76a;font-size:15px} /* booking form card */ .sl-hero-form{position:relative} .sl-hero-form .apptform{background:#fff;border-radius:20px;padding:0 26px 26px;box-shadow:0 30px 70px rgba(0,0,40,.45);border:1px solid rgba(255,255,255,.5);overflow:hidden} .sl-hero-form .apptform::before{content:'⚡ Same-week slots · 100% confidential';display:block;margin:0 -26px 20px;padding:11px 26px;background:linear-gradient(135deg,#00dccb,#00a99d);color:#02231f;font-weight:700;font-size:12.5px;letter-spacing:.02em;text-align:center} .sl-body{padding:clamp(56px,8vw,96px) 0} .sl-body .mh-sec{margin-bottom:52px} /* connected step rail */ .sl-body .mh-steps{position:relative} /* quote */ .sl-quote{position:relative;background:linear-gradient(135deg,#f3f6ff,#eef7f6);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:var(--r-lg);padding:34px 36px} .sl-quote-mark{position:absolute;top:2px;left:20px;font-size:90px;line-height:1;color:var(--accent-ink);opacity:.22;font-family:Georgia,serif} .sl-quote p{font-size:19px;line-height:1.62;color:var(--ink);font-style:italic;margin:0 0 12px;position:relative} .sl-quote cite{font-style:normal;font-weight:700;color:var(--navy)} .sl-quote-link{display:inline-block;margin-left:14px;font-size:13.5px;font-weight:600;color:var(--blue)} /* assurance strip */ .sl-assure{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 8px} .sl-assure .sla{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 16px;transition:.25s} .sl-assure .sla:hover{border-color:var(--accent-ink);box-shadow:0 10px 26px rgba(0,0,60,.08);transform:translateY(-3px)} .sl-assure .sla-ic{width:40px;height:40px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;background:rgba(0,197,183,.12);color:var(--blue)} .sl-assure .sla-ic .ic{width:21px;height:21px} .sl-assure .sla b{display:block;font-size:14px;color:var(--navy);line-height:1.2} .sl-assure .sla small{font-size:12px;color:var(--muted)} /* final cta band */ .sl-final{position:relative;overflow:hidden;text-align:center;color:#fff;border-radius:var(--r-lg);padding:48px 26px; background: radial-gradient(700px 320px at 50% -40%, rgba(0,220,203,.35), transparent 60%), linear-gradient(135deg,#000058,var(--navy) 50%,#0a32c8)} .sl-final::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:22px 22px;opacity:.5} .sl-final>*{position:relative;z-index:1} .sl-final h2{font-family:var(--ff-h);color:#fff;font-size:clamp(23px,2.8vw,30px);margin-bottom:10px} .sl-final p{color:rgba(255,255,255,.9);margin-bottom:22px} /* video testimonial */ .sl-video-frame{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 24px 60px rgba(0,0,40,.35);max-width:880px;margin:24px auto 0;border:1px solid var(--line)} .sl-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .sl-video-cap{text-align:center;margin-top:14px;font-weight:600;color:var(--navy)} /* service reviews */ .sl-reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:24px} .sl-review{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 22px;display:flex;flex-direction:column;transition:.25s} .sl-review:hover{box-shadow:0 16px 36px rgba(0,0,60,.1);transform:translateY(-3px);border-color:transparent} .sl-stars{color:#ffb52e;font-size:16px;letter-spacing:2px;margin-bottom:10px} .sl-review blockquote{margin:0 0 16px;font-size:15px;line-height:1.6;color:var(--ink);flex:1} .sl-review figcaption{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .sl-rev-av{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--blue),var(--navy))} .sl-review figcaption b{font-size:14px;color:var(--navy)} .sl-review figcaption small{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);width:100%;padding-left:48px;margin-top:-4px} .sl-review figcaption small .ic{width:13px;height:13px} /* real case band */ .sl-realcase{margin-bottom:52px;position:relative;overflow:hidden;border-radius:var(--r-lg);color:#fff;padding:38px 34px; background:radial-gradient(700px 300px at 100% 0%, rgba(0,220,203,.28), transparent 60%),linear-gradient(135deg,#000058,var(--navy) 55%,#0a32c8)} .sl-realcase-in{position:relative;z-index:1;max-width:760px} .sl-realcase-tag{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#7ffbe9;background:rgba(0,220,203,.14);border:1px solid rgba(0,220,203,.35);padding:6px 13px;border-radius:30px} .sl-realcase-tag .ic{width:14px;height:14px} .sl-realcase h2{color:#fff;font-family:var(--ff-h);font-size:clamp(20px,2.4vw,26px);margin:14px 0 10px} .sl-realcase p{color:rgba(255,255,255,.9);line-height:1.6;margin:0 0 12px} .sl-realcase-out{font-size:14.5px;background:rgba(255,255,255,.08);border-left:3px solid var(--teal);border-radius:8px;padding:12px 14px} .sl-realcase .btn{margin-top:8px} /* cost & insurance */ .sl-cost-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .sl-cost-c{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 20px;transition:.25s} .sl-cost-c:hover{border-color:var(--accent-ink);box-shadow:0 14px 32px rgba(0,0,60,.08);transform:translateY(-3px)} .sl-cost-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:rgba(0,197,183,.12);color:var(--blue);margin-bottom:14px} .sl-cost-ic .ic{width:24px;height:24px} .sl-cost-c b{display:block;font-size:16px;color:var(--navy);margin-bottom:6px} .sl-cost-c p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.55} /* article cards */ .sl-artcard{display:flex;flex-direction:column} .sl-artcard:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,60,.1);border-color:transparent} .sl-art-tag{align-self:flex-start;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--blue);background:rgba(0,46,184,.08);padding:5px 11px;border-radius:30px;margin-bottom:12px} .sl-artcard b{font-family:var(--ff-h);font-size:17px;color:var(--navy);line-height:1.3;margin-bottom:8px} .sl-artcard p{font-size:14px;color:var(--muted);line-height:1.55;margin:0 0 14px;flex:1} @media(max-width:980px){.sl-hero-grid{grid-template-columns:1fr}.sl-hero-form{max-width:480px;margin:0 auto}.sl-assure{grid-template-columns:repeat(2,1fr)}.sl-reviews{grid-template-columns:1fr}.sl-cost-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.sl-assure{grid-template-columns:1fr}.sl-cost-grid{grid-template-columns:1fr}} /* ═══════════════════════ PREMIUM SERVICE PAGE (spv-) ═══════════════════════ */ /* WhatsApp button */ .btn-wa{background:linear-gradient(135deg,#25d366,#1eb455);color:#04240f;font-weight:700;box-shadow:0 10px 24px rgba(37,211,102,.34)} .btn-wa:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(37,211,102,.46);color:#04240f} /* scroll reveal */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} /* ── ABOVE-THE-FOLD HEROES NEVER START HIDDEN ────────────────────────────── .rev/.reveal set opacity:0 until JS adds .in via IntersectionObserver. An opacity:0 element is not eligible to BE the Largest Contentful Paint, so on hero containers that rule made LCP wait for: render-blocking CSS -> main.js download+parse -> IO callback -> a 0.7s transition. Measured on throttled mobile: FCP 1.4s but LCP 5.8s, with the hero

as the LCP element — a ~2.4s gap for text that was otherwise ready to paint at FCP. These selectors are the first-viewport hero wrappers used across the site (homepage .hv2-*, the shared .spv-hero-* used by about/compare/emergency/ services, and contact's .cbx-*). They now paint immediately. Scroll-reveal is deliberately UNCHANGED everywhere below the fold — that is where the effect is actually experienced. Animating content the visitor is already looking at only delays it; this is a UX improvement, not a trade. */ .hv2-copy,.hv2-illus,.hv2-card, .spv-hero-copy,.spv-hero-media, .cbx-hcopy,.cbx-formwrap{opacity:1;transform:none;transition:none} /* ── Section 1: hero ── */ .spv-hero{position:relative;overflow:hidden;color:#fff;padding:30px 0 64px; background:radial-gradient(1100px 540px at 90% -20%,rgba(0,220,203,.30),transparent 60%),radial-gradient(760px 600px at -5% 120%,rgba(40,90,255,.42),transparent 55%),linear-gradient(135deg,#000058 0%,var(--navy) 44%,#0a32c8 100%)} .spv-hero::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.085) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:linear-gradient(120deg,#000 30%,transparent 72%);mask-image:linear-gradient(120deg,#000 30%,transparent 72%)} .spv-hero .wrap{position:relative;z-index:1} .spv-hero .crumb,.spv-hero .crumb a,.spv-hero .crumb i{color:rgba(255,255,255,.7)}.spv-hero .crumb span{color:#fff} .spv-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;margin-top:14px} .spv-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#7ffbe9;background:rgba(0,220,203,.12);border:1px solid rgba(0,220,203,.35);padding:7px 15px;border-radius:30px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .spv-eyebrow .ic{width:15px;height:15px} .spv-hero-copy h1{color:#fff;font-size:clamp(31px,4.4vw,50px);line-height:1.05;margin:18px 0 14px;letter-spacing:-.018em;font-weight:800;text-shadow:0 2px 34px rgba(0,0,40,.45)} .spv-hero-copy h1 span{color:#7ffbe9;font-weight:700} .spv-lede{font-size:17.5px;line-height:1.62;color:rgba(255,255,255,.92);max-width:560px} .spv-badges{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 4px} .spv-badges span{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);padding:8px 14px;border-radius:30px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .spv-badges .ic{width:15px;height:15px;color:#2ee6cf} .spv-hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 16px} .spv-hero-rate{font-size:13.5px;color:rgba(255,255,255,.85)}.spv-hero-rate b{color:#ffd76a;font-size:15px} /* doctor visual */ .spv-hero-media{position:relative;display:flex;justify-content:center} .spv-doc{position:relative;width:min(100%,380px);border-radius:26px;overflow:hidden;border:1px solid rgba(255,255,255,.22);background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04));box-shadow:0 34px 80px rgba(0,0,40,.5)} .spv-doc>img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/5} .spv-doc-ph{aspect-ratio:4/5;display:grid;place-items:center;background:rgba(255,255,255,.06)} .spv-doc-ph .ic{width:90px;height:90px;color:rgba(255,255,255,.5)} .spv-doc-name{position:absolute;left:0;right:0;bottom:0;padding:30px 20px 16px;display:flex;flex-direction:column;gap:2px;background:linear-gradient(transparent,rgba(0,0,50,.78))} .spv-doc-name b{font-size:17px;color:#fff}.spv-doc-name small{font-size:12px;color:rgba(255,255,255,.8)} .spv-float{position:absolute;display:flex;flex-direction:column;gap:1px;background:rgba(255,255,255,.96);color:var(--navy);border-radius:14px;padding:11px 40px 11px 14px;box-shadow:0 16px 36px rgba(0,0,40,.32);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:spvFloat 4s ease-in-out infinite} .spv-float .ic{width:18px;height:18px;color:var(--accent-ink);position:absolute;top:50%;right:14px;transform:translateY(-50%)} .spv-float b{font-size:16px;font-weight:800;line-height:1}.spv-float small{font-size:11px;color:var(--muted)} .spv-float-1{top:14px;left:-14px;animation-delay:0s} .spv-float-2{bottom:84px;right:-16px;animation-delay:.8s} .spv-float-3{bottom:14px;left:-10px;animation-delay:1.6s} @keyframes spvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} /* ── Section 2: stat counters ── */ .spv-stats{background:#00003e;color:#fff;position:relative;z-index:2} .spv-stats-in{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;padding:26px 0} .spv-stat{text-align:center;position:relative} .spv-stat:not(:last-child)::after{content:'';position:absolute;right:-7px;top:18%;height:64%;width:1px;background:rgba(255,255,255,.12)} .spv-stat-ic{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(0,220,203,.16);color:#2ee6cf;margin-bottom:8px} .spv-stat-ic .ic{width:18px;height:18px} .spv-count{display:block;font-family:var(--ff-h);font-size:clamp(22px,2.6vw,32px);font-weight:800;color:#fff;line-height:1} .spv-stat small{font-size:12.5px;color:rgba(255,255,255,.72)} /* body wrapper */ .spv-body{padding:clamp(56px,8vw,96px) 0} .spv-body>section{margin-bottom:54px} /* ── Section 3: quick answer ── */ .spv-answer{position:relative;background:linear-gradient(135deg,#f4f8ff,#eef9f7);border:1px solid var(--line);border-left:5px solid var(--teal);border-radius:var(--r-lg);padding:30px 34px;box-shadow:0 10px 30px rgba(0,0,60,.05)} .spv-answer-lbl{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-ink)} .spv-answer-lbl .ic{width:15px;height:15px} .spv-answer h2{font-family:var(--ff-h);font-size:clamp(20px,2.4vw,26px);color:var(--navy);margin:10px 0 12px} .spv-answer p{font-size:16px;line-height:1.65;color:var(--ink);margin:0 0 10px;max-width:80ch} .spv-answer-by{display:inline-flex;align-items:center;gap:7px;font-size:13px!important;color:var(--muted)!important;margin-top:6px} .spv-answer-by .ic{width:15px;height:15px;color:var(--accent-ink)} .spv-answer.has-img{display:grid;grid-template-columns:1.55fr 1fr;gap:30px;align-items:center} .spv-answer-fig{margin:0;border-radius:16px;overflow:hidden;box-shadow:0 16px 38px rgba(0,0,60,.14);border:1px solid var(--line)} .spv-answer-fig img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3} .about-fig{background:linear-gradient(160deg,#eef9f7,#f4f8ff)} .about-fig img{aspect-ratio:3/4;object-fit:cover;object-position:top center} @media(max-width:760px){.spv-answer.has-img{grid-template-columns:1fr}.spv-answer-fig{order:-1}.about-fig img{aspect-ratio:4/5}} /* ── Section 5: understanding bento ── */ .spv-bento{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:24px} .spv-bento-c{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;transition:.25s} .spv-bento-c:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,60,.1);border-color:transparent} .spv-bento-ic{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:13px;background:linear-gradient(135deg,#00dccb,#00a99d);color:#02231f;margin-bottom:14px} .spv-bento-ic .ic{width:24px;height:24px} .spv-bento-c h3{font-family:var(--ff-h);font-size:18px;color:var(--navy);margin:0 0 8px} .spv-bento-c p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0} /* ── Section 6: when to consult ── */ .spv-warn{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:24px} .spv-warn-c{border-radius:var(--r-lg);padding:24px 22px;border:1px solid var(--line);background:#fff;transition:.25s} .spv-warn-c:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,60,.1)} .spv-warn-ic{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;margin-bottom:14px} .spv-warn-ic .ic{width:23px;height:23px} .spv-warn-c b{display:block;font-size:17px;color:var(--navy);margin-bottom:7px} .spv-warn-c p{font-size:14px;line-height:1.58;color:var(--muted);margin:0} .spv-warn-soon{border-top:3px solid #f5a524}.spv-warn-soon .spv-warn-ic{background:rgba(245,165,36,.14);color:#d4860a} .spv-warn-now{border-top:3px solid #e5484d}.spv-warn-now .spv-warn-ic{background:rgba(229,72,77,.12);color:#d33} .spv-warn-help{border-top:3px solid var(--teal)}.spv-warn-help .spv-warn-ic{background:rgba(0,197,183,.14);color:var(--blue)} /* ── Section 7: timeline ── */ .spv-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:26px;position:relative} .spv-tl{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 20px 22px;transition:.25s} .spv-tl:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,60,.1);border-color:transparent} .spv-tl-n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;font-family:var(--ff-h);font-weight:800;font-size:18px;margin-bottom:14px} .spv-tl b{display:block;font-size:16px;color:var(--navy);margin-bottom:6px} .spv-tl p{font-size:13.5px;line-height:1.55;color:var(--muted);margin:0} /* ── Section 8: authority ── */ .spv-author{background:linear-gradient(135deg,#f6f8ff,#eef7f6);border:1px solid var(--line);border-radius:var(--r-lg);padding:40px 34px} .spv-author-head{margin-bottom:26px} .spv-author-grid{display:grid;grid-template-columns:300px 1fr;gap:30px;align-items:start} .spv-author-photo{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:0 0 22px;overflow:hidden;text-align:center;display:flex;flex-direction:column;align-items:center} .spv-author-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;margin-bottom:16px} .spv-author-photo b{font-family:var(--ff-h);font-size:18px;color:var(--navy);padding:0 18px} .spv-author-photo small{font-size:12.5px;color:var(--muted);padding:6px 20px 16px;line-height:1.45} .spv-author-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px} .spv-ac{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 18px;transition:.25s} .spv-ac:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,60,.08);border-color:var(--accent-ink)} .spv-ac-ic{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(0,197,183,.12);color:var(--blue);margin-bottom:12px} .spv-ac-ic .ic{width:22px;height:22px} .spv-ac b{display:block;font-size:15px;color:var(--navy);margin-bottom:6px} .spv-ac p{font-size:13px;line-height:1.55;color:var(--muted);margin:0} /* ── Section 9: success story ── */ .spv-story{position:relative;overflow:hidden;border-radius:var(--r-lg);color:#fff;padding:40px 36px; background:radial-gradient(700px 300px at 100% 0%,rgba(0,220,203,.28),transparent 60%),linear-gradient(135deg,#000058,var(--navy) 55%,#0a32c8)} .spv-story-in{position:relative;z-index:1} .spv-story-tag{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#7ffbe9;background:rgba(0,220,203,.14);border:1px solid rgba(0,220,203,.35);padding:6px 13px;border-radius:30px} .spv-story-tag .ic{width:14px;height:14px} .spv-story h2{color:#fff;font-family:var(--ff-h);font-size:clamp(20px,2.4vw,27px);margin:14px 0 18px} .spv-story-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px} .spv-sf{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:18px} .spv-sf b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#7ffbe9;margin-bottom:8px} .spv-sf p{font-size:14px;line-height:1.55;color:rgba(255,255,255,.9);margin:0} .spv-story-sum{color:rgba(255,255,255,.92);line-height:1.6;margin:0 0 18px;max-width:760px} /* ── Section 11: google reviews ── */ .spv-grev-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;padding:20px 24px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 8px 26px rgba(0,0,60,.05)} .spv-grev-score{display:flex;align-items:center;gap:12px} .spv-grev-score b{font-family:var(--ff-h);font-size:38px;color:var(--navy);line-height:1} .spv-grev-stars{color:#ffb52e;font-size:20px;letter-spacing:2px} .spv-grev-score small{display:block;font-size:12.5px;color:var(--muted)} .spv-grev-by{display:flex;align-items:center;gap:3px;font-size:13px;font-weight:600;color:var(--muted)} .spv-grev-by>span:last-child{margin-left:6px} .spv-g{font-weight:800;font-size:18px} .spv-g:nth-child(1){color:#4285F4}.spv-g:nth-child(2){color:#EA4335}.spv-g:nth-child(3){color:#FBBC05}.spv-g:nth-child(4){color:#4285F4}.spv-g:nth-child(5){color:#34A853}.spv-g:nth-child(6){color:#EA4335} /* ── Section 14: booking card ── */ .spv-book{position:relative;overflow:hidden;border-radius:var(--r-lg);scroll-margin-top:90px; background:radial-gradient(800px 360px at 90% -30%,rgba(0,220,203,.30),transparent 60%),linear-gradient(135deg,#000058,var(--navy) 52%,#0a32c8)} .spv-book::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:22px 22px;opacity:.5} .spv-book-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr .92fr;gap:40px;align-items:center;padding:44px 40px} .spv-book-copy{align-self:center} .spv-book-copy .spv-eyebrow-light{color:#02231f;background:#fff;border-color:#fff} .spv-book-copy h2{color:#fff;font-family:var(--ff-h);font-size:clamp(23px,2.7vw,32px);line-height:1.12;margin:16px 0 12px} .spv-book-copy>p{color:rgba(255,255,255,.88);line-height:1.6;margin:0 0 20px;max-width:46ch} .spv-book-checks{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:11px} .spv-book-checks li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:#fff} .spv-book-checks .ic{width:18px;height:18px;color:#2ee6cf;flex-shrink:0} /* social proof strip */ .spv-book-social{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:22px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .spv-avatars{display:flex;flex-shrink:0} .spv-avatars span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;border:2px solid #0b1a6b;margin-left:-10px;background:linear-gradient(135deg,#00c5b7,#0a32c8)} .spv-avatars span:first-child{margin-left:0} .spv-avatars .spv-av-more{background:linear-gradient(135deg,#0a32c8,#000064);font-size:11px} .spv-book-rate b{display:block;color:#ffd76a;font-size:15px;letter-spacing:.5px} .spv-book-rate small{display:block;font-size:12px;color:rgba(255,255,255,.82);margin-top:2px} .spv-book-actions{display:flex;flex-wrap:wrap;gap:12px} .spv-book-actions .btn{flex:1;min-width:170px} .btn-bookcall{background:rgba(255,255,255,.1);color:#fff;border:1.6px solid rgba(255,255,255,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .btn-bookcall:hover{background:#fff;color:var(--navy);transform:translateY(-3px);border-color:#fff;box-shadow:0 14px 30px rgba(0,0,40,.3)} .spv-book-form .apptform{background:#fff;border-radius:20px;padding:0 26px 26px;box-shadow:0 30px 70px rgba(0,0,40,.45);border:1px solid rgba(255,255,255,.5);overflow:hidden} .spv-book-form .apptform::before{content:'⚡ Same-week slots · 100% confidential';display:block;margin:0 -26px 20px;padding:11px 26px;background:linear-gradient(135deg,#00dccb,#00a99d);color:#02231f;font-weight:700;font-size:12.5px;letter-spacing:.02em;text-align:center} /* ── Knowledge-Centre LEAF hero (Movement 01 "Concern") — 2026-07-30. Bespoke, compact, content-first: replaces the previous re-use of the generic .spv-hero + a 100%-width/4:3 .kcl-hero-img, which is exactly what made every disease/cancer/procedure page open with an oversized photo and a "just another landing page" first impression. Same light-hero language as .oh-hero/.mx-hero (this codebase's now-established inner-hero pattern), same compact density. Used ONLY by render_kc_leaf() in master-hub.php. */ .kcl-hero{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--mist),var(--surface-2) 65%);color:var(--ink);padding:8px 0 0} .kcl-eyb{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-ink);background:var(--teal-50);border:1px solid rgba(20,184,166,.3);padding:5px 13px;border-radius:40px} .kcl-hero-in{display:grid;grid-template-columns:1.3fr .7fr;gap:24px;align-items:center;padding:8px 0 14px} .kcl-hero-in>*{min-width:0} .kcl-hero h1{font-family:var(--ff-h);font-size:clamp(24px,3.2vw,34px);line-height:1.1;letter-spacing:-.016em;color:var(--navy);margin:8px 0 6px} .kcl-hero-lede{font-size:14px;color:var(--slate);line-height:1.5;max-width:560px;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .kcl-hero-btns{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px;align-items:center} .kcl-hero-btns .btn-outline{background:transparent;border:1.5px solid var(--line);color:var(--navy)} .kcl-hero-btns .btn-outline:hover{border-color:var(--teal);color:var(--accent-ink)} .kcl-hero-trust{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;padding-top:8px;border-top:1px solid var(--line);font-size:12px;color:var(--slate)} .kcl-hero-trust a{color:inherit} .kcl-hero-media{display:flex;justify-content:center} .kcl-hero-ic{width:160px;height:160px;border-radius:22px;background:radial-gradient(circle at 50% 35%,rgba(0,197,183,.14),transparent 70%),#fff;border:1px solid var(--line);box-shadow:var(--sh-lg);display:grid;place-items:center;padding:20px} .kcl-hero-ic img{width:100%;height:100%;object-fit:contain;border-radius:12px} @media(max-width:900px){.kcl-hero-in{grid-template-columns:1fr}.kcl-hero-media{order:-1;margin-bottom:2px}.kcl-hero-ic{width:110px;height:110px;padding:14px}} @media(max-width:560px){.kcl-hero{padding:4px 0 0}.kcl-hero-in{padding:6px 0 10px}.kcl-hero-ic{width:80px;height:80px;padding:10px;border-radius:16px}} /* ════════════ PREMIUM BLOG / RESEARCH ════════════ */ /* editorial healthcare hero */ .blog-index-hero{padding:34px 0 56px} .blog-hero-copy{max-width:780px;margin:0 auto;text-align:center} .blog-hero-copy .spv-eyebrow{margin:0 auto} .blog-hero-copy h1{color:#fff;font-size:clamp(28px,4vw,46px);line-height:1.08;margin:18px 0 14px;font-weight:800;letter-spacing:-.015em;text-shadow:0 2px 34px rgba(0,0,40,.45)} .blog-hero-copy .spv-lede{margin:0 auto 22px;color:rgba(255,255,255,.92)} .blog-hero-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-bottom:24px} .blog-hero-trust span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:7px 14px;border-radius:30px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .blog-hero-trust .ic{width:14px;height:14px;color:#2ee6cf} .blog-search{position:relative;max-width:560px;margin:0 auto} .blog-search-ic{position:absolute;left:18px;top:50%;transform:translateY(-50%);display:grid;place-items:center;color:var(--muted)} .blog-search-ic .ic{width:20px;height:20px} .blog-search input{width:100%;padding:16px 20px 16px 50px;border:0;border-radius:40px;font-family:var(--ff-b);font-size:15px;color:var(--ink);background:#fff;box-shadow:0 20px 50px rgba(0,0,40,.3)} .blog-search input:focus{outline:3px solid rgba(0,220,203,.5)} /* section labels */ .blog-sec-label{display:flex;align-items:center;gap:9px;font-family:var(--ff-h);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--navy);margin:0 0 16px} .blog-sec-label .ic{width:17px;height:17px;color:var(--accent-ink)} .blog-sec-label-lg{font-size:clamp(18px,2.2vw,22px);letter-spacing:0;text-transform:none;margin:6px 0 18px} .blog-topbar{margin-bottom:34px} /* medically-reviewed credibility line */ .blog-reviewed{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--blue);background:rgba(0,46,184,.06);border:1px solid rgba(0,46,184,.12);padding:5px 11px;border-radius:30px;align-self:flex-start;margin-bottom:14px} .blog-reviewed .ic{width:14px;height:14px;color:var(--accent-ink)} .blog-feature-body .blog-reviewed{margin:0 0 14px} .blog-noresult{text-align:center;color:var(--muted);font-size:15px;padding:30px 0} .blog-noresult a{color:var(--blue);font-weight:600} .blog-wrap{padding:clamp(56px,8vw,96px) 0} .blog-wrap>section,.blog-feature,.blog-grid,.blog-filter{margin-bottom:40px} .blog-filter{display:flex;flex-wrap:wrap;gap:10px} /* featured article */ .blog-feature{display:grid;grid-template-columns:1.05fr 1fr;gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:.3s cubic-bezier(.2,.7,.2,1)} .blog-feature:hover{transform:translateY(-4px);box-shadow:0 26px 56px rgba(0,0,60,.14);border-color:transparent} .blog-feature-media{position:relative;min-height:300px;background-size:cover;background-position:center;background-color:#0a1a6b} .blog-feature-media::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,rgba(0,0,60,.15),transparent 60%)} .blog-feature-badge{position:absolute;top:16px;left:16px;z-index:1;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.95);color:var(--navy);font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:7px 13px;border-radius:30px} .blog-feature-badge .ic{width:14px;height:14px;color:var(--accent-ink)} .blog-feature-body{padding:34px 32px;display:flex;flex-direction:column;justify-content:center} .blog-feature-body b{font-family:var(--ff-h);font-size:clamp(22px,2.6vw,28px);color:var(--navy);line-height:1.18;margin:12px 0 12px} .blog-feature-body p{color:var(--muted);line-height:1.65;margin:0 0 16px} .blog-feature-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--slate);margin-bottom:16px} .blog-feature-meta .ic{width:14px;height:14px;color:var(--accent-ink)} /* article grid — row layout: thumbnail fixed-width on the left, the whole text block (meta/title/excerpt/reviewed/CTA, already one wrapping .blog-card-body element) vertically centered beside it via flex align-items:center. Stacks to image-on-top at the same <=560px breakpoint the grid itself already collapses to one column. */ .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .blog-card{display:flex;flex-direction:row;align-items:center;gap:16px;padding:16px 18px; background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:.28s cubic-bezier(.2,.7,.2,1)} .blog-card:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(0,0,60,.12);border-color:transparent} .blog-card-media{display:block;width:110px;height:110px;flex-shrink:0;border-radius:var(--r-md,10px);overflow:hidden;background:var(--mist)} .blog-card-media img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .55s cubic-bezier(.2,.7,.2,1)} .blog-card:hover .blog-card-media img{transform:scale(1.06)} .blog-card-body{padding:0;display:flex;flex-direction:column;flex:1;min-width:0} @media(max-width:560px){ .blog-card{flex-direction:column;align-items:stretch;text-align:center;padding:18px 18px 16px} .blog-card-media{width:96px;height:96px;margin:0 auto 12px} .blog-card-body{text-align:left} } .blog-card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px;font-weight:600;color:var(--slate);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px} .blog-card-body b{font-family:var(--ff-h);font-size:18px;color:var(--navy);line-height:1.3;margin-bottom:8px} .blog-card-body p{font-size:14px;color:var(--muted);line-height:1.55;margin:0 0 14px;flex:1} .card-cat{color:var(--blue);background:rgba(0,46,184,.08);padding:3px 10px;border-radius:30px;font-weight:700} /* knowledge-centre interlink strip */ .blog-xlink{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px} .blog-xlink a{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 16px;transition:.22s} .blog-xlink a:hover{border-color:var(--accent-ink);box-shadow:0 12px 28px rgba(0,0,60,.08);transform:translateY(-3px)} .blog-xlink-ic{flex-shrink:0;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(0,197,183,.12);color:var(--blue)} .blog-xlink-ic .ic{width:20px;height:20px} .blog-xlink b{flex:1;font-size:13.5px;color:var(--navy);line-height:1.25} .blog-xlink i{font-style:normal;color:var(--accent-ink);font-weight:800} /* leaf hero + byline */ .blog-leaf-hero{padding-bottom:46px} .blog-leaf-head{max-width:820px} .blog-leaf-head h1{color:#fff;font-size:clamp(26px,3.6vw,42px);line-height:1.1;margin:14px 0 14px;font-weight:800} .blog-leaf-head .art-meta{margin-bottom:6px} .blog-leaf-head .tag-pill{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2)} .blog-leaf-head .tag-cat{background:rgba(0,220,203,.16);color:#7ffbe9;border-color:rgba(0,220,203,.35)} .blog-byline{display:flex;align-items:center;gap:12px;margin-top:20px} .blog-av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:18px;color:#fff;background:linear-gradient(135deg,#00c5b7,#0a32c8);border:2px solid rgba(255,255,255,.3)} .blog-byline b{display:block;color:#fff;font-size:15px} .blog-byline small{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.8);font-size:12.5px;margin-top:2px} .blog-byline small .ic{width:14px;height:14px;color:#2ee6cf} /* leaf care + sidebar */ .blog-care{margin-top:36px;padding-top:32px;border-top:1px solid var(--line)} .blog-toc h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--navy)} .blog-cta{background:linear-gradient(135deg,#f4f8ff,#eef9f7);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;margin-top:18px} .blog-cta b{display:block;font-family:var(--ff-h);font-size:16px;color:var(--navy);margin-bottom:6px} .blog-cta p{font-size:13.5px;color:var(--muted);line-height:1.5;margin:0 0 14px} .blog-cta .btn{width:100%;justify-content:center;margin-bottom:10px} .blog-cta-line{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--blue);padding:6px 0} .blog-cta-line.wa{color:#1eb455}.blog-cta-line .ic{width:16px;height:16px} @media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr)}.blog-xlink{grid-template-columns:repeat(2,1fr)}.blog-feature{grid-template-columns:1fr}.blog-feature-media{min-height:220px}} @media(max-width:560px){.blog-grid{grid-template-columns:1fr}.blog-xlink{grid-template-columns:1fr}} /* ── premium services hub (category grid) ── */ .svc-cat{padding:clamp(40px,6vw,64px) 0} .svc-cat.mist{background:var(--mist)} .svc-cat-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px;flex-wrap:wrap} .svc-cat-head .mh-h{margin:8px 0 8px} .svc-cat-head .mh-lead{max-width:660px;margin:0} .svc-cat-banner{position:relative;margin:0 0 28px;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:24/7;box-shadow:0 16px 40px rgba(0,0,60,.1);border:1px solid var(--line)} .svc-cat-banner img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .65s cubic-bezier(.2,.7,.2,1)} .svc-cat-banner:hover img{transform:scale(1.04)} .svc-cat-banner::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(0,0,80,.30),rgba(0,0,80,.04) 55%,transparent)} @media(max-width:600px){.svc-cat-banner{aspect-ratio:16/9}} .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .svc-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 22px;transition:.28s cubic-bezier(.2,.7,.2,1)} .svc-card:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(0,0,60,.12);border-color:transparent} .svc-card-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#eafcfa,#e9f1ff);color:var(--blue);font-size:24px;margin-bottom:16px;transition:.28s} .svc-card:hover .svc-card-ic{background:linear-gradient(135deg,#00dccb,#00a99d);color:#02231f;transform:scale(1.06) rotate(-4deg)} .svc-card-ic .ic{width:26px;height:26px} .svc-card b{font-family:var(--ff-h);font-size:18px;color:var(--navy);margin-bottom:8px;line-height:1.25} .svc-card p{font-size:15px;line-height:1.6;color:var(--muted);margin:0 0 16px;flex:1} .svc-card-cta{font-style:normal;font-weight:700;font-size:13.5px;color:var(--blue);transition:.2s} .svc-card:hover .svc-card-cta{color:var(--accent-ink);margin-left:3px} /* image variant — condition photo header with overlapping icon chip */ .svc-card.has-img{padding:0;overflow:hidden} .svc-card-media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--mist)} .svc-card-media img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .55s cubic-bezier(.2,.7,.2,1)} .svc-card.has-img:hover .svc-card-media img{transform:scale(1.06)} .svc-card.has-img .svc-card-ic{margin:-30px 0 12px 22px;border:3px solid #fff;box-shadow:0 8px 20px rgba(0,0,60,.18)} .svc-card.has-img b{margin:0 22px 8px} .svc-card.has-img p{margin:0 22px 16px} .svc-card.has-img .svc-card-cta{margin:0 22px 22px} @media(max-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.svc-grid{grid-template-columns:1fr}.svc-cat-head{flex-direction:column;align-items:flex-start}} /* ── premium booking form (contact page) ── */ .bk-req{color:#e5484d}.bk-opt{color:var(--muted);font-weight:500} .bk-label{display:block;font-size:12.5px;font-weight:600;color:var(--slate);margin-bottom:8px} .bk-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px} .bk-mode{position:relative;margin:0!important;cursor:pointer} .bk-mode input{position:absolute;opacity:0;inset:0;cursor:pointer} .bk-mode span{display:flex;align-items:center;justify-content:center;gap:7px;padding:12px;border:1.5px solid var(--line);border-radius:11px;background:var(--mist);font-size:13.5px;font-weight:600;color:var(--ink);transition:.2s} .bk-mode span .ic{width:16px;height:16px;color:var(--blue)} .bk-mode input:checked+span{border-color:var(--accent-ink);background:rgba(0,197,183,.1);color:var(--blue);box-shadow:0 0 0 3px rgba(0,197,183,.14)} .bk-mode input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px} .bk-row{display:grid;grid-template-columns:1fr 1fr;gap:12px} .bk-send{margin-top:4px;position:relative} .bk-send.is-loading{color:transparent!important;pointer-events:none} .bk-send.is-loading::after{content:'';position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2.5px solid rgba(2,35,31,.35);border-top-color:#02231f;border-radius:50%;animation:bkSpin .7s linear infinite} @keyframes bkSpin{to{transform:rotate(360deg)}} .bk-alt{display:flex;gap:8px;margin-top:12px} .bk-alt a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px;border-radius:11px;border:1.5px solid var(--line);font-size:13px;font-weight:600;color:var(--blue);transition:.2s} .bk-alt a:hover{border-color:var(--accent-ink);background:var(--mist)} .bk-alt a .ic{width:15px;height:15px} .bk-success{text-align:center;padding:18px 6px 4px;animation:bkFade .4s ease both} @keyframes bkFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .bk-success-ic{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#00dccb,#00a99d);color:#02231f;margin-bottom:12px} .bk-success-ic .ic{width:30px;height:30px} .bk-success b{display:block;font-family:var(--ff-h);font-size:19px;color:var(--navy);margin-bottom:6px} .bk-success p{font-size:14px;color:var(--muted);line-height:1.55;margin:0} /* ── hospital information ── */ .ct-info{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px;align-items:stretch} .ct-info-cards{display:grid;gap:14px} .ct-ic-card{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 18px;transition:.25s} .ct-ic-card:hover{box-shadow:0 14px 32px rgba(0,0,60,.08);border-color:var(--accent-ink)} .ct-ic{flex-shrink:0;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(0,197,183,.12);color:var(--blue)} .ct-ic .ic{width:22px;height:22px} .ct-ic-card b{display:block;font-size:15px;color:var(--navy);margin-bottom:5px} .ct-ic-card p{font-size:13.5px;line-height:1.55;color:var(--muted);margin:0} .ct-ic-card a{color:var(--blue);font-weight:600} .ct-link{display:inline-block;margin-top:8px;font-size:13px;font-weight:700;color:var(--accent-ink)} .ct-map{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);min-height:340px;box-shadow:0 10px 30px rgba(0,0,60,.06)} .ct-map iframe{width:100%;height:100%;min-height:340px;border:0;display:block} /* ── emergency band ── */ .ct-emergency{border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(135deg,#7a0f12,#c0282d);color:#fff;box-shadow:0 18px 44px rgba(192,40,45,.28)} .ct-emergency-in{display:flex;align-items:center;gap:20px;padding:26px 30px;flex-wrap:wrap} .ct-emergency-ic{flex-shrink:0;width:54px;height:54px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.16)} .ct-emergency-ic .ic{width:28px;height:28px;color:#fff} .ct-emergency-copy{flex:1;min-width:240px} .ct-emergency-copy b{display:block;font-family:var(--ff-h);font-size:20px;margin-bottom:4px} .ct-emergency-copy p{margin:0;color:rgba(255,255,255,.9);font-size:14px;line-height:1.5} .ct-emergency-btns{display:flex;gap:10px;flex-wrap:wrap} .ct-emergency .btn-glass{border-color:rgba(255,255,255,.5);color:#fff} /* emergency-band buttons: clean white on red (no teal/green clash) */ .ct-emergency .btn-teal{background:#fff;color:#b3221f;box-shadow:0 10px 26px rgba(0,0,0,.2)} .ct-emergency .btn-teal::after{display:none} .ct-emergency .btn-teal:hover{background:#fff;color:#8f1a18;transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.26)} .ct-emergency .btn-wa{background:rgba(255,255,255,.12);color:#fff;border:1.6px solid rgba(255,255,255,.65);box-shadow:none} .ct-emergency .btn-wa:hover{background:#fff;color:#b3221f;transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.22)} @media(max-width:760px){.ct-info{grid-template-columns:1fr}.bk-row,.bk-modes{grid-template-columns:1fr}.ct-emergency-in{flex-direction:column;text-align:center}.ct-emergency-copy{min-width:0}} /* ── Section 10: video testimonials slider ── */ .spv-vids{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px} .spv-vids-one{grid-template-columns:1fr;max-width:400px;margin-inline:auto} /* related_videos_block() (includes/video-map.php) renders portrait 9:16 .pvv-card "Reels"-style cards here, not the landscape 16:9 .spv-vid this grid was originally built for — without a width cap, a 9:16 card stretched to fill a wide grid cell/container scales to an enormous height (760px wide -> ~1350px tall in the single-video case). Cap it at the same ~320px convention already used correctly elsewhere (e.g. .asx-vid-rail). */ .spv-vids .pvv-card{max-width:320px;margin-inline:auto} .spv-vid{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:.25s;outline:none} .spv-vid:hover,.spv-vid:focus-visible{transform:translateY(-4px);box-shadow:0 20px 44px rgba(0,0,60,.14);border-color:transparent} .spv-vid-thumb{position:relative;display:block;aspect-ratio:16/9;background-size:cover;background-position:center;background-color:#001;overflow:hidden} .spv-vid-thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,40,.05),rgba(0,0,40,.45))} .spv-vid-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#00dccb,#00a99d);box-shadow:0 10px 30px rgba(0,0,40,.4);transition:.3s} .spv-vid-play::before{content:'';position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(255,255,255,.55);animation:spvPulse 2.4s ease-out infinite} .spv-vid:hover .spv-vid-play{transform:translate(-50%,-50%) scale(1.12)} @keyframes spvPulse{0%{transform:scale(.85);opacity:.8}100%{transform:scale(1.5);opacity:0}} .spv-vid-iframe{position:relative;aspect-ratio:16/9;background:#000} .spv-vid-iframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .spv-vid figcaption{padding:16px 18px;display:flex;flex-direction:column;gap:5px} .spv-vid figcaption b{font-size:15px;color:var(--navy)} .spv-vid-proc{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--blue)} .spv-vid-proc .ic{width:14px;height:14px;color:var(--accent-ink)} .spv-vid figcaption small{font-size:13px;color:var(--muted);font-style:italic} @media(prefers-reduced-motion:reduce){.spv-vid-play::before{animation:none}} /* ── responsive ── */ @media(max-width:980px){ .spv-hero-grid{grid-template-columns:1fr;gap:36px} .spv-hero-media{order:-1;max-width:340px;margin:0 auto} .spv-stats-in{grid-template-columns:repeat(3,1fr);gap:22px 8px} .spv-stat:nth-child(3)::after{display:none} .spv-warn,.spv-author-cards{grid-template-columns:1fr 1fr} .spv-timeline{grid-template-columns:repeat(2,1fr)} .spv-author-grid{grid-template-columns:1fr} .spv-author-photo{max-width:300px;margin:0 auto} .spv-book-grid{grid-template-columns:1fr;gap:26px} .spv-story-flow{grid-template-columns:1fr} .spv-vids{grid-template-columns:repeat(2,1fr)} } @media(max-width:680px){ .spv-bento,.spv-warn,.spv-timeline,.spv-author-cards{grid-template-columns:1fr} .spv-stats-in{grid-template-columns:repeat(2,1fr)} .spv-stat::after{display:none!important} .spv-float-1{left:0}.spv-float-2{right:0}.spv-float-3{left:0} .spv-answer{padding:24px 22px} .spv-author,.spv-story,.spv-book-grid{padding-left:22px;padding-right:22px} /* reviews slider on mobile */ /* NOTE: these live inside .wrap.spv-body which zeroes the wrap's horizontal padding — a negative-margin bleed here always overflows the viewport, so the rail spans the full column and pads itself instead */ .spv-slider{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:4px 18px 14px;-webkit-overflow-scrolling:touch} .spv-slider>.sl-review{flex:0 0 84%;scroll-snap-align:center} .spv-vids{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:4px 18px 14px;-webkit-overflow-scrolling:touch;grid-template-columns:none} .spv-vids>.spv-vid{flex:0 0 86%;scroll-snap-align:center} } /* ═══════════════ CLINICAL CASE TIMELINE (L4) ═══════════════ */ .case-timeline{position:relative;margin:8px 0 18px;padding-left:6px} .case-step{display:flex;gap:18px;position:relative;padding-bottom:26px} .case-step:not(:last-child)::before{content:'';position:absolute;left:21px;top:44px;bottom:0;width:2px;background:var(--line)} .case-step-ic{flex:none;width:44px;height:44px;border-radius:50%;background:rgba(0,197,183,.12);color:var(--accent-ink);display:grid;place-items:center;z-index:1} .case-step-ic .ic{width:21px;height:21px} .case-step-body{padding-top:4px} .case-step-body h2{font-size:18px;color:var(--navy);margin:0 0 6px} .case-step-body p{font-size:15px;color:var(--slate);line-height:1.7;margin:0} /* ════════════════ BLOG ARTICLE — Perfect Medical Template 2026 (.bla-*) ════════════════ */ /* feature meta row under hero title */ .bla-meta{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:16px} .bla-meta span{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:rgba(255,255,255,.9)} .bla-meta .ic{width:15px;height:15px;color:var(--accent-ink)} .bla-meta-stars{color:#ffd24a!important;letter-spacing:1px} .bla-meta-stars b{color:rgba(255,255,255,.92);font-weight:600;font-size:12px;margin-left:4px} .bla-cover{margin:0 0 26px} /* shared section heading */ .bla-h{display:flex;align-items:center;gap:10px;font-family:var(--ff-h);font-size:clamp(20px,2.3vw,25px);color:var(--navy);margin:0 0 18px} .bla-h .ic{width:24px;height:24px;color:var(--accent-ink)} /* 3 — doctor verification box */ .bla-verify{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;background:linear-gradient(135deg,#f3f8ff,#ecfaf7);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 26px;margin:0 0 26px;box-shadow:0 10px 30px rgba(0,0,60,.05)} .bla-verify-doc{position:relative;flex-shrink:0} .bla-verify-doc img{width:92px;height:92px;border-radius:50%;object-fit:cover;object-position:top center;border:3px solid #fff;box-shadow:0 8px 20px rgba(0,0,60,.16)} .bla-verify-badge{position:absolute;right:-2px;bottom:2px;width:30px;height:30px;display:grid;place-items:center;background:var(--teal);color:#04231f;border:3px solid #fff;border-radius:50%} .bla-verify-badge .ic{width:16px;height:16px} .bla-verify-lbl{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink)} .bla-verify-lbl .ic{width:14px;height:14px} .bla-verify-name{display:block;font-family:var(--ff-h);font-size:22px;color:var(--navy);margin:5px 0 2px} .bla-verify-quals{display:block;font-size:13.5px;font-weight:600;color:var(--ink)} .bla-verify-role{display:block;font-size:13px;color:var(--muted);margin-top:2px} .bla-verify-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .bla-verify-tags span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:20px;padding:5px 11px} .bla-verify-tags .ic{width:14px;height:14px;color:var(--accent-ink)} .bla-verify-aff{list-style:none;margin:0;padding:0 0 0 22px;border-left:1px solid var(--line);display:grid;gap:8px} .bla-verify-aff li{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink)} .bla-verify-aff .ic{width:15px;height:15px;color:var(--accent-ink);flex-shrink:0} @media(max-width:760px){.bla-verify{grid-template-columns:auto 1fr;gap:16px}.bla-verify-aff{grid-column:1/-1;padding:14px 0 0;border-left:0;border-top:1px solid var(--line);grid-template-columns:1fr 1fr}} /* 4 — quick answer */ .bla-quick{background:linear-gradient(135deg,#001a6e,#000a4d);color:#fff;border-radius:var(--r-lg);padding:24px 28px;margin:0 0 26px;position:relative;overflow:hidden} .bla-quick:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 92% 8%,rgba(0,197,183,.28),transparent 45%);pointer-events:none} .bla-quick-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;position:relative} .bla-quick-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:rgba(0,197,183,.18);color:var(--accent-ink)} .bla-quick-ic .ic{width:20px;height:20px} .bla-quick-head h2{font-family:var(--ff-h);font-size:20px;color:#fff;margin:0;flex:1} .bla-ai{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#04231f;background:var(--teal);border-radius:20px;padding:5px 11px} .bla-quick p{font-size:16.5px;line-height:1.7;color:rgba(255,255,255,.95);margin:0;position:relative} /* 5 — key takeaways */ .bla-takeaways{margin:0 0 30px} .bla-tk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px} .bla-tk{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:14px;padding:16px 16px} .bla-tk-ic{flex-shrink:0;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:rgba(0,197,183,.12);color:var(--blue)} .bla-tk-ic .ic{width:19px;height:19px} .bla-tk p{font-size:14.5px;line-height:1.5;color:var(--ink);font-weight:600;margin:0} /* 6 — inline TOC */ .bla-toc{background:var(--mist,#f6f8fc);border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin:0 0 30px} .bla-toc>b{display:flex;align-items:center;gap:8px;font-family:var(--ff-h);font-size:15px;color:var(--navy);margin-bottom:10px} .bla-toc>b .ic{width:17px;height:17px;color:var(--accent-ink)} .bla-toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;columns:2;column-gap:30px} .bla-toc li{counter-increment:toc;margin:0 0 8px;break-inside:avoid} .bla-toc li a{display:flex;gap:9px;font-size:14px;color:var(--ink);font-weight:600} .bla-toc li a:before{content:counter(toc);flex-shrink:0;width:21px;height:21px;display:grid;place-items:center;font-size:11px;background:var(--teal);color:#04231f;border-radius:50%;font-weight:800} .bla-toc li a:hover{color:var(--blue)} @media(max-width:600px){.bla-toc ol{columns:1}} /* 7 — body headings get an accent */ .bla-body-h{position:relative;padding-top:6px} /* 8 — expert insight */ .bla-expert{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;background:linear-gradient(135deg,#fff8ec,#fef3e0);border:1px solid #f3e2c2;border-left:5px solid #e0a23c;border-radius:var(--r-lg);padding:22px 26px;margin:26px 0} .bla-expert-quote{font-family:Georgia,serif;font-size:60px;line-height:.7;color:#e0a23c;opacity:.5;align-self:flex-start} .bla-expert-lbl{display:inline-flex;align-items:center;gap:7px;font-family:var(--ff-h);font-size:16px;color:#8a5a12;margin-bottom:6px} .bla-expert-lbl .ic{width:18px;height:18px} .bla-expert-body p{font-size:15.5px;line-height:1.7;color:#5a4424;font-style:italic;margin:0 0 8px} .bla-expert-sign{font-family:var(--ff-h);font-weight:700;color:#8a5a12;font-size:14px} .bla-expert-photo{width:84px;height:84px;border-radius:14px;object-fit:cover;object-position:top center;box-shadow:0 8px 20px rgba(120,80,10,.2)} @media(max-width:760px){.bla-expert{grid-template-columns:1fr}.bla-expert-quote{display:none}.bla-expert-photo{width:64px;height:64px}} /* 9 — care pathway infographic */ .bla-flow{margin:30px 0} .bla-flow-row{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap} .bla-flow-step{flex:1;min-width:150px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 14px} .bla-flow-ic{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 10px;border-radius:13px;background:linear-gradient(135deg,#00dccb,#00a99d);color:#02231f} .bla-flow-ic .ic{width:24px;height:24px} .bla-flow-step b{display:block;font-size:14.5px;color:var(--navy);margin-bottom:4px} .bla-flow-step small{font-size:12.5px;color:var(--muted);line-height:1.45} .bla-flow-arrow{align-self:center;color:var(--accent-ink);font-size:22px;font-weight:700} @media(max-width:700px){.bla-flow-arrow{display:none}.bla-flow-step{min-width:calc(50% - 6px)}} /* 10 — myth vs fact */ .bla-myth{margin:30px 0} .bla-myth-grid{display:grid;gap:14px} .bla-myth-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .bla-myth-c{border-radius:14px;padding:16px 18px} .bla-myth-c span{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin-bottom:7px} .bla-myth-c span .ic{width:15px;height:15px} .bla-myth-c p{font-size:14.5px;line-height:1.55;margin:0} .bla-myth-m{background:#fef1f1;border:1px solid #f6d4d4} .bla-myth-m span{color:#c0392b}.bla-myth-m p{color:#7d2a22} .bla-myth-f{background:#eefaf4;border:1px solid #c9eede} .bla-myth-f span{color:#0d8a5f}.bla-myth-f p{color:#1d5e44} @media(max-width:640px){.bla-myth-row{grid-template-columns:1fr}} /* 13 — references */ .bla-refs{margin:30px 0;background:var(--mist,#f6f8fc);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 26px} .bla-ref-list{margin:0;padding-left:20px} .bla-ref-list li{font-size:13.5px;line-height:1.6;color:var(--ink);margin-bottom:8px} .bla-ref-note{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin:12px 0 0;font-style:italic} .bla-ref-note .ic{width:15px;height:15px;color:var(--accent-ink);flex-shrink:0} /* aside — author mini card */ .bla-side-verify{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 18px;text-align:center;margin-bottom:20px;box-shadow:0 8px 24px rgba(0,0,60,.05)} .bla-side-verify img{width:78px;height:78px;border-radius:50%;object-fit:cover;object-position:top center;border:3px solid #fff;box-shadow:0 6px 16px rgba(0,0,60,.14);margin-bottom:10px} .bla-side-verify b{display:block;font-family:var(--ff-h);font-size:16px;color:var(--navy)} .bla-side-verify small{display:block;font-size:12px;color:var(--muted);margin:4px 0 14px;line-height:1.4} /* 10 — medical table */ .bla-tablewrap{margin:30px 0} .bla-table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 24px rgba(0,0,60,.05)} .bla-table{width:100%;border-collapse:collapse;font-size:14.5px;background:#fff;min-width:420px} .bla-table thead th{background:linear-gradient(135deg,#001a6e,#000a4d);color:#fff;font-family:var(--ff-h);font-weight:700;text-align:left;padding:13px 18px;font-size:14px} .bla-table tbody td{padding:12px 18px;border-top:1px solid var(--line);color:var(--ink);line-height:1.5} .bla-table tbody tr:nth-child(even){background:#f7faff} .bla-table .bla-td-k{font-weight:700;color:var(--navy)} /* 15b — disease hub banner (Layer-5 -> Layer-2) */ .bla-hub{display:flex;align-items:center;gap:18px;margin:26px 0;padding:20px 24px;border-radius:var(--r-lg);background:linear-gradient(135deg,#001a6e,#000a4d);color:#fff;position:relative;overflow:hidden;transition:.22s} .bla-hub:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,80,.28)} .bla-hub:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 95% 10%,rgba(0,197,183,.3),transparent 45%);pointer-events:none} .bla-hub-ic{flex-shrink:0;display:grid;place-items:center;width:54px;height:54px;border-radius:14px;background:rgba(0,197,183,.18);color:var(--accent-ink);position:relative} .bla-hub-ic .ic{width:28px;height:28px} .bla-hub-copy{display:flex;flex-direction:column;gap:2px;position:relative} .bla-hub-copy small{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-ink)} .bla-hub-copy b{font-family:var(--ff-h);font-size:19px;color:#fff} .bla-hub-copy i{font-style:normal;font-size:13.5px;color:rgba(255,255,255,.85)} /* 19 — medical disclaimer */ .bla-disclaimer{display:flex;gap:13px;align-items:flex-start;margin:26px 0 0;padding:16px 20px;background:#f6f8fc;border:1px solid var(--line);border-left:4px solid var(--muted,#8a93a6);border-radius:12px} .bla-disc-ic{flex-shrink:0;color:var(--muted)} .bla-disc-ic .ic{width:20px;height:20px} .bla-disclaimer p{font-size:12.8px;line-height:1.6;color:var(--muted);margin:0} .bla-disclaimer b{color:var(--ink)} /* 9 — AEO answer block (question H2 + direct lead answer) */ .art .bla-body-h{font-size:clamp(19px,2.2vw,24px);color:var(--navy);margin:30px 0 0} .art p.bla-aeo{position:relative;background:linear-gradient(135deg,#f4f8ff,#eefaf7);border-left:4px solid var(--teal);border-radius:0 12px 12px 0;padding:15px 18px 15px 20px;margin:12px 0 0;font-size:17px;line-height:1.7;color:var(--ink)} .art p.bla-aeo strong{color:var(--navy);font-weight:700} /* long-form article body — multi-paragraph sections, sub-heads, lists, callouts */ .art .bla-h3{font-size:clamp(16.5px,1.7vw,19px);color:var(--navy);font-weight:700;margin:26px 0 0;line-height:1.4} .art .bla-body-h + .bla-aeo + p,.art .bla-h3 + p{margin-top:12px} .art .bla-ul,.art .bla-ol{margin:14px 0 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:10px} .art .bla-ul li,.art .bla-ol li{position:relative;padding-left:32px;font-size:16.5px;line-height:1.65;color:var(--ink)} .art .bla-ul li::before{content:'';position:absolute;left:6px;top:9px;width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(0,197,183,.14)} .art .bla-ol{counter-reset:blaol} .art .bla-ol li{counter-increment:blaol} .art .bla-ol li::before{content:counter(blaol);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center} .art p.bla-note{position:relative;display:flex;gap:10px;align-items:flex-start;background:#fffaf0;border:1px solid #ffe2b0;border-radius:12px;padding:14px 16px;margin:18px 0 0;font-size:15px;line-height:1.6;color:#7a5b16} .art p.bla-note .bla-note-ic{flex-shrink:0;color:#e0962a} .art p.bla-note .bla-note-ic .ic{width:18px;height:18px} /* ════════════════ LOCATIONS / VISITING-CLINIC PAGES (.loc-*) ════════════════ */ .menu-foot{margin-top:6px;border-top:1px solid var(--line);padding-top:10px!important;color:var(--navy)!important;font-weight:700} .menu-foot .ic{color:var(--accent-ink)} .loc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:22px} .loc-card{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;transition:.22s} .loc-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,60,.1);border-color:var(--accent-ink)} .loc-card-ic{flex-shrink:0;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,#00dccb,#00a99d);color:#02231f} .loc-card-ic .ic{width:24px;height:24px} .loc-card-body{display:flex;flex-direction:column;gap:3px;min-width:0} .loc-card-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .loc-card-top b{font-family:var(--ff-h);font-size:18px;color:var(--navy)} .loc-card-body small{font-size:13px;color:var(--muted)} .loc-badge{display:inline-flex;align-items:center;gap:4px;font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--navy);background:var(--mist,#eef2fb);border:1px solid var(--line);border-radius:20px;padding:3px 8px} .loc-badge .ic{width:12px;height:12px} .loc-badge-primary{color:#04231f;background:var(--teal);border-color:var(--accent-ink)} .loc-card-cta{font-style:normal;font-size:13px;font-weight:700;color:var(--accent-ink);margin-top:7px} /* main hospital card */ .loc-hosp{display:flex;gap:18px;align-items:flex-start;background:linear-gradient(135deg,#001a6e,#000a4d);color:#fff;border-radius:var(--r-lg);padding:24px 26px;position:relative;overflow:hidden} .loc-hosp:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 92% 8%,rgba(0,197,183,.28),transparent 45%);pointer-events:none} .loc-hosp-ic{flex-shrink:0;display:grid;place-items:center;width:56px;height:56px;border-radius:14px;background:rgba(0,197,183,.18);color:var(--accent-ink);position:relative} .loc-hosp-ic .ic{width:28px;height:28px} .loc-hosp-body{position:relative} .loc-hosp-tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink)} .loc-hosp-tag .ic{width:14px;height:14px} .loc-hosp-body b{display:block;font-family:var(--ff-h);font-size:19px;color:#fff;margin:6px 0 6px} .loc-hosp-body p{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.55;color:rgba(255,255,255,.85);margin:0 0 14px} .loc-hosp-body p .ic{width:16px;height:16px;color:var(--accent-ink);flex-shrink:0;margin-top:2px} .loc-hosp-links{display:flex;flex-wrap:wrap;gap:10px} .btn-sm{padding:9px 15px;font-size:13px} @media(max-width:560px){.loc-hosp{flex-direction:column;gap:14px}} /* ════ BLOG COMMENTS (native WordPress, moderated) ════ */ .bla-comments{margin:30px 0 0} .bla-cc{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:20px;background:var(--teal);color:#04231f;font-size:13px;font-weight:800;vertical-align:middle} .bla-cmt-list{display:flex;flex-direction:column;gap:14px;margin-bottom:26px} .bla-cmt{display:flex;gap:13px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px} .bla-cmt-av{flex-shrink:0;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#00dccb,#00a99d);color:#02231f;font-family:var(--ff-h);font-weight:800;font-size:17px} .bla-cmt-body{min-width:0} .bla-cmt-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:5px} .bla-cmt-head b{font-family:var(--ff-h);color:var(--navy);font-size:15px} .bla-cmt-head small{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)} .bla-cmt-head small .ic{width:13px;height:13px} .bla-cmt-body p{font-size:14.5px;line-height:1.6;color:var(--ink);margin:0} .bla-cmt-empty{font-size:14.5px;color:var(--muted);margin:0 0 26px} /* form */ .bla-cmt-form{background:var(--mist,#f6f8fc);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 26px} .bla-cmt-form h3{font-family:var(--ff-h);font-size:19px;color:var(--navy);margin:0 0 6px} .bla-cmt-note{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);margin:0 0 16px} .bla-cmt-note .ic{width:14px;height:14px;color:var(--accent-ink)} .bla-cmt-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px} .bla-cmt-form input,.bla-cmt-form textarea{width:100%;font:inherit;font-size:14.5px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;transition:.2s} .bla-cmt-form textarea{resize:vertical;min-height:96px} .bla-cmt-form input:focus,.bla-cmt-form textarea:focus{outline:none;border-color:var(--accent-ink);box-shadow:0 0 0 3px rgba(0,197,183,.15)} /* ════════ KC LEAF — Condition / Disease / Cancer detail page ════════ */ /* Reading progress strip (fixed top) */ .kcl-prog{position:fixed;top:0;left:0;right:0;height:3px;background:rgba(0,197,183,.18);z-index:9997;pointer-events:none} .kcl-prog-bar{height:100%;background:linear-gradient(90deg,var(--teal),var(--blue));width:0;border-radius:0 2px 2px 0;transition:width .08s linear} /* Horizontal "reading journey" — mobile/tablet only (see includes/master-hub.php for why: the vertical sidebar version stops being sticky below 980px). */ .kcl-topnav{position:sticky;top:86px;z-index:120;background:#fff;border-bottom:1px solid var(--line); box-shadow:0 4px 14px -10px rgba(0,0,60,.14)} .kcl-topnav-scroll{display:flex;gap:8px;overflow-x:auto;padding:10px 16px;-webkit-overflow-scrolling:touch; scrollbar-width:none} .kcl-topnav-scroll::-webkit-scrollbar{display:none} .kcl-topnav a{display:flex;align-items:center;gap:7px;flex-shrink:0;min-height:36px;padding:7px 14px 7px 7px; border-radius:999px;background:var(--mist);border:1px solid var(--line);font-size:13px;font-weight:700; color:var(--slate);white-space:nowrap;transition:.18s} .kcl-topnav a span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%; background:#fff;color:var(--accent-ink);font-size:10.5px;font-weight:800;flex-shrink:0} .kcl-topnav a:hover{border-color:var(--accent-ink);color:var(--navy)} .kcl-topnav a.is-active{background:var(--navy);border-color:var(--navy);color:#fff} .kcl-topnav a.is-active span{background:var(--teal);color:#02231f} @media(max-width:760px){.kcl-topnav{top:64px}} /* Desktop: the sticky sidebar (.kcl-movnav) already shows reading position, so this strip would just duplicate it — hidden, not removed. */ @media(min-width:980px){.kcl-topnav{display:none}} @media(prefers-reduced-motion:reduce){.kcl-topnav a{transition:none}} /* Jump-to nav */ .kcl-jumps{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:22px 0 28px;padding:12px 16px;background:var(--mist);border:1px solid var(--line);border-radius:12px} .kcl-jumps-lbl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--slate);white-space:nowrap;flex-shrink:0} .kcl-jumps a{font-size:12.5px;font-weight:600;color:var(--navy);background:#fff;border:1.5px solid var(--line);border-radius:30px;padding:5px 12px;transition:.18s;white-space:nowrap} .kcl-jumps a:hover{background:var(--navy);color:#fff;border-color:var(--navy)} /* Urgency alert block */ .kcl-alert{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(135deg,#fff8f8,#fff0f0);border:1.5px solid #fca5a5;border-radius:14px;padding:16px 18px;margin:20px 0} .kcl-alert-ic{flex-shrink:0;width:38px;height:38px;border-radius:10px;background:#fee2e2;color:#dc2626;display:grid;place-items:center} .kcl-alert-ic .ic{width:20px;height:20px} .kcl-alert-body b{display:block;font-size:14px;font-weight:700;color:#7f1d1d;margin-bottom:3px} .kcl-alert-body p{font-size:13.5px;color:#991b1b;margin:0;line-height:1.5} /* Numbered section timeline */ .kcl-sections{margin:4px 0 0} .kcl-sec{display:flex;gap:18px;padding-bottom:28px;position:relative;scroll-margin-top:90px} .kcl-sec:not(:last-child)::after{content:'';position:absolute;left:17px;top:42px;bottom:0;width:2px;background:linear-gradient(to bottom,rgba(0,197,183,.28),transparent)} .kcl-sec-num{flex-shrink:0;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff;font-weight:800;font-size:13px;display:grid;place-items:center;box-shadow:0 6px 14px rgba(0,197,183,.28);margin-top:3px} .kcl-sec-body{flex:1;min-width:0;position:relative} .kcl-sec-body h2{font-size:clamp(17px,2vw,21px)!important;margin:2px 0 10px!important;line-height:1.25;color:var(--navy);padding-right:44px} .kcl-sec-body p{font-size:17px;line-height:1.78;color:var(--ink);margin:0} .kcl-sec-ic{position:absolute;top:-2px;right:0;width:34px;height:34px;border-radius:11px;background:linear-gradient(150deg,rgba(0,197,183,.12),rgba(0,46,184,.07));color:var(--accent-ink);display:grid;place-items:center;transition:transform .3s cubic-bezier(.34,1.56,.64,1)} .kcl-sec:hover .kcl-sec-ic{transform:scale(1.1) rotate(-6deg)} .kcl-sec-ic .ic{width:16px;height:16px} /* Care journey strip (visual aid) */ .kcl-journey{display:flex;align-items:stretch;gap:8px;margin-top:36px;padding:20px 18px;background:linear-gradient(160deg,#f2f6ff,#e9f6f4);border:1px solid var(--line);border-radius:var(--r-lg)} .kcl-j{flex:1;min-width:0;text-align:center;padding:6px 4px} .kcl-j span{display:grid;place-items:center;width:42px;height:42px;margin:0 auto 9px;border-radius:13px;background:#fff;color:var(--accent-ink);box-shadow:0 8px 18px -8px rgba(0,20,90,.25)} .kcl-j span .ic{width:19px;height:19px} .kcl-j b{display:block;font-family:var(--ff-h);font-size:13.5px;color:var(--navy)} .kcl-j small{display:block;font-size:11px;color:var(--slate);line-height:1.4;margin-top:3px} .kcl-j-arr{align-self:center;color:var(--accent-ink);flex-shrink:0} .kcl-j-arr .ic{width:15px;height:15px} @media(max-width:640px){ .kcl-journey{flex-wrap:wrap;gap:12px} .kcl-j{flex:1 1 42%} .kcl-j-arr{display:none} .kcl-sec-ic{display:none} .kcl-sec-body h2{padding-right:0} } /* Organ illustration card (sidebar visual aid) */ .kcl-organ{position:relative;overflow:hidden;text-align:center;background:linear-gradient(165deg,var(--navy-900),var(--navy) 65%,#001a9c);border-radius:16px;padding:26px 18px 20px;margin-bottom:16px;color:#fff} .kcl-organ::before{content:'';position:absolute;top:-40px;right:-40px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(0,197,183,.25),transparent 68%)} .kcl-organ-art{display:grid;place-items:center;margin-bottom:12px} .kcl-organ-art svg{width:84px;height:84px;color:#7ffbe9;filter:drop-shadow(0 10px 18px rgba(0,0,40,.5))} .kcl-organ b{display:block;font-family:var(--ff-h);font-size:14.5px;color:#fff;line-height:1.3} .kcl-organ small{display:block;font-size:10.5px;font-weight:600;color:rgba(255,255,255,.6);margin-top:4px;text-transform:uppercase;letter-spacing:.06em} /* Section zone (services / cases) */ .kcl-care{background:var(--mist);border-radius:var(--r-lg);padding:28px;border:1px solid var(--line);margin-top:36px} .kcl-care .eyb{margin-bottom:8px} .kcl-care .mh-h{margin:0 0 14px} /* Active TOC link (JS-driven) */ .aside .toc a.is-active{color:var(--accent-ink)!important;border-left-color:var(--accent-ink)!important;font-weight:700;background:rgba(0,197,183,.07);border-radius:0 6px 6px 0} /* ═══════════ KC LEAF — 9-Movement Patient-Journey redesign (Phase 2, 2026-07-28) ═══════════ Each movement gets its own distinct visual treatment — no repeated grid-3 card stacks. See includes/master-hub.php render_kc_leaf() for the markup. */ /* Movement 01/bridge — Assessment invite banner: a quiet secondary pill, never competing with the hero's one primary CTA. */ .kcl-assess{display:flex;align-items:center;gap:14px;margin:22px 0 0;padding:15px 20px;border-radius:16px;background:linear-gradient(135deg,#eef6ff,#eafcfa);border:1px solid var(--line);transition:.2s} .kcl-assess:hover{border-color:var(--accent-ink);box-shadow:0 14px 30px -12px rgba(0,60,80,.18);transform:translateY(-2px)} .kcl-assess-ic{flex-shrink:0;width:42px;height:42px;border-radius:12px;background:#fff;display:grid;place-items:center;color:var(--accent-ink);box-shadow:0 4px 12px rgba(0,0,60,.08)} .kcl-assess-ic .ic{width:21px;height:21px} .kcl-assess-t{flex:1;display:flex;flex-direction:column;font-size:14px;color:var(--navy)} .kcl-assess-t small{font-size:12.5px;color:var(--slate);font-weight:500;margin-top:2px} .kcl-assess i{font-style:normal;font-size:19px;font-weight:700;color:var(--accent-ink)} /* Movement 02/05 — the "at-a-glance flow" / recovery timeline: a horizontal step-rail reusing real quickfacts/recovery data instead of a table. */ .kcl-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:2px;margin-top:22px;background:var(--line);border-radius:14px;overflow:hidden;border:1px solid var(--line)} .kcl-flow-s{background:#fff;padding:18px 18px 20px;position:relative} .kcl-flow-s:not(:last-child)::after{content:'';position:absolute;top:50%;right:-1px;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:var(--teal);z-index:1;display:none} .kcl-flow-s b{display:block;font-family:var(--ff-h);font-size:13px;letter-spacing:.02em;color:var(--accent-ink);text-transform:uppercase;margin-bottom:6px} .kcl-flow-s p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink)} @media(min-width:700px){.kcl-flow-s:not(:last-child)::after{display:block}} /* Movement 03 — compare-related-conditions strip, sits inside the numbered narrative as a differentiation aid, not another generic card grid. */ .kcl-compare{margin-top:30px;padding:22px 24px;border-radius:var(--r-lg);background:var(--mist);border:1px solid var(--line)} .kcl-compare-h{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);margin-bottom:14px} .kcl-compare-h .ic{width:15px;height:15px;color:var(--accent-ink)} .kcl-compare-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px} .kcl-compare-c{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;transition:.18s} .kcl-compare-c:hover{border-color:var(--accent-ink);box-shadow:0 10px 22px -10px rgba(0,0,60,.15);transform:translateY(-2px)} .kcl-compare-c b{display:block;font-size:14px;color:var(--navy);margin-bottom:4px} .kcl-compare-c p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5} /* Movement 04 — treatment as hierarchy: one large feature, not equal cards. */ .kcl-treat-feature{display:grid;grid-template-columns:280px 1fr;gap:0;margin-top:24px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:.25s} .kcl-treat-feature:hover{box-shadow:0 22px 46px -18px rgba(0,0,60,.18);border-color:transparent;transform:translateY(-3px)} .kcl-treat-media{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--mist)} .kcl-treat-media img{width:100%;height:100%;object-fit:contain;display:block} .kcl-treat-body{padding:24px 26px;display:flex;flex-direction:column;justify-content:center} .kcl-treat-eyb{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-ink);margin-bottom:8px} .kcl-treat-body b{font-family:var(--ff-h);font-size:21px;color:var(--navy);margin-bottom:8px;line-height:1.25} .kcl-treat-body p{margin:0 0 14px;font-size:15px;line-height:1.6;color:var(--muted)} .kcl-treat-cta{font-style:normal;font-weight:700;font-size:13.5px;color:var(--blue)} .kcl-treat-feature:hover .kcl-treat-cta{color:var(--accent-ink)} .kcl-treat-rail{display:flex;gap:10px;overflow-x:auto;margin-top:14px;padding-bottom:2px} .kcl-treat-r{flex:0 0 auto;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:30px;padding:9px 16px 9px 9px;font-size:13px;font-weight:600;color:var(--navy);transition:.18s;white-space:nowrap} .kcl-treat-r:hover{border-color:var(--accent-ink);color:var(--accent-ink)} .kcl-treat-r-ic{width:28px;height:28px;border-radius:50%;background:var(--teal-50);display:grid;place-items:center;font-size:14px} @media(max-width:700px){.kcl-treat-feature{grid-template-columns:1fr}.kcl-treat-media{aspect-ratio:16/9}} /* Movement 05 — cost & insurance: an honest, generic trust strip (no fabricated per-condition figures — see render_kc_leaf() comment). */ .kcl-cost{display:flex;align-items:center;gap:18px;margin-top:24px;padding:20px 24px;border-radius:var(--r-lg);background:linear-gradient(135deg,#fff9ec,#fff);border:1px solid #f0dfb8} .kcl-cost-ic{flex-shrink:0;width:44px;height:44px;border-radius:13px;background:#fff;display:grid;place-items:center;color:#b4650a;box-shadow:0 4px 12px rgba(0,0,60,.06)} .kcl-cost-body{flex:1} .kcl-cost-body b{display:block;font-family:var(--ff-h);font-size:15.5px;color:var(--navy);margin-bottom:4px} .kcl-cost-body p{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)} @media(max-width:640px){.kcl-cost{flex-direction:column;align-items:flex-start;text-align:left}.kcl-cost .btn{width:100%;justify-content:center}} /* Movement 06 — doctor authority, elevated to a full feature (not a byline). */ .kcl-trust{display:grid;grid-template-columns:180px 1fr;gap:28px;align-items:center;margin-top:40px;padding:28px;border-radius:var(--r-lg);background:linear-gradient(160deg,var(--navy-900),var(--navy) 70%);color:#fff} .kcl-trust-img{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.2)} .kcl-trust-img img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block} .kcl-trust-body .eyb{color:#7ffbe9} .kcl-trust-body h2{color:#fff} .kcl-trust-body p{color:rgba(255,255,255,.8);font-size:14.5px;line-height:1.65;margin:8px 0 16px} .kcl-trust-stats{display:flex;flex-wrap:wrap;gap:22px;margin-bottom:14px} .kcl-trust-stats div b{display:block;font-family:var(--ff-h);font-size:19px;color:#7ffbe9} .kcl-trust-stats div small{font-size:11.5px;color:rgba(255,255,255,.65)} /* !important is required here, not sloppiness: the base rule is `.mh-mini-all{color:var(--blue)!important}`, so without it this override loses and "Read full profile" renders dark blue on the dark navy trust block — effectively invisible. The icon inherits too. */ .kcl-trust .mh-mini-all{color:#fff!important} .kcl-trust .mh-mini-all .ic{color:#7ffbe9} .kcl-trust .mh-mini-all:hover{color:#7ffbe9!important} @media(max-width:640px){.kcl-trust{grid-template-columns:1fr;text-align:center}.kcl-trust-img{max-width:140px;margin:0 auto}.kcl-trust-stats{justify-content:center}} /* Movement 07 — unified proof: one real case in full + video + one quote, never three separate grid-3 sections fighting for the same sparse data. */ .kcl-proof{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;margin-top:22px} .kcl-proof-case{display:block;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:26px;transition:.25s} .kcl-proof-case:hover{box-shadow:0 20px 42px -18px rgba(0,0,60,.16);border-color:transparent;transform:translateY(-3px)} .kcl-proof-case b{display:block;font-family:var(--ff-h);font-size:19px;color:var(--navy);margin:10px 0} .kcl-proof-case p{margin:0 0 12px;font-size:14.5px;line-height:1.65;color:var(--muted)} .kcl-proof-side{display:flex;flex-direction:column;gap:16px} /* .pvv-card is aspect-ratio:9/16 (a vertical story format) — max-width:none let it inherit the full 1.2fr grid column's width, and because width and height are locked by that ratio, an enormous width became an even more enormous height. 260px reads as a compact "story" card in every context this component appears (KC leaf's single-video proof, organ hub's same layout) instead of stretching to fill whatever column it happens to land in. */ .kcl-proof-vid .pvv-card{max-width:260px} .kcl-proof-quote{margin:0} /* Solo variant: no documented case alongside the video/quote (added by PHP when $proofCase is empty — includes/master-hub.php) — the 2-column grid otherwise puts the lone .kcl-proof-side in the WIDE 1.2fr track, leaving a large empty gap where the case card would have been. Centered via max-width+margin:auto on the container, NOT align-items/ justify-items:center — those make block children shrink-to-fit instead of stretching, and since .pvv-card's own children (the thumbnail img) are percentage-sized against IT, that circular sizing collapsed the whole card to 2px wide (caught by actually measuring it, not just reading the CSS — a real regression the first version of this fix introduced). */ .kcl-proof--solo{grid-template-columns:minmax(0,420px);justify-content:center;margin-left:auto;margin-right:auto} .kcl-proof--solo .kcl-proof-vid{display:flex;justify-content:center} .kcl-proof-links{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px} .kcl-proof-links a{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--blue)} .kcl-proof-links a:hover{color:var(--accent-ink)} @media(max-width:760px){.kcl-proof{grid-template-columns:1fr}} /* Movement 08 — "keep reading" rail: blog + research merged into one horizontal scroll-snap rail instead of two/three stacked sections. */ .kcl-read-rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:18px 0 8px;padding-bottom:6px} .kcl-read-c{flex:0 0 240px;scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;transition:.2s} .kcl-read-c:hover{border-color:var(--accent-ink);box-shadow:0 14px 30px -14px rgba(0,0,60,.15);transform:translateY(-2px)} .kcl-read-c b{font-size:14px;color:var(--navy);line-height:1.4;margin-top:8px} /* Sidebar movement-progress nav (replaces the flat per-section TOC) */ .kcl-movnav a{display:flex;align-items:center;gap:10px} .kcl-movnav-n{flex-shrink:0;width:22px;height:22px;border-radius:6px;background:var(--mist);color:var(--slate);font-family:var(--mono,monospace);font-size:10px;font-weight:800;display:grid;place-items:center} .kcl-movnav a.is-active .kcl-movnav-n{background:var(--teal);color:#fff} .bla-cmt-actions{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap} .cf-msg{font-size:13.5px;font-weight:600} .cf-msg.ok{color:#0d8a5f} .cf-msg.err{color:#c0392b} @media(max-width:560px){.bla-cmt-row{grid-template-columns:1fr}} /* ════════ CITY × SERVICE LANDING (.csv-*) ════════ */ .csv-spot{position:relative;overflow:hidden;margin:34px 0 8px;background:linear-gradient(135deg,var(--navy-900),var(--navy) 58%,#001a9c);border-radius:24px;padding:40px 44px;color:#fff} .csv-spot::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(0,197,183,.28),transparent 66%);top:-170px;right:-110px;pointer-events:none} .csv-spot-main{position:relative;max-width:760px} .csv-spot-eyb{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#7ffbe9;background:rgba(0,220,203,.12);border:1px solid rgba(0,220,203,.3);padding:7px 14px;border-radius:30px;margin-bottom:14px} .csv-spot h2{font-size:clamp(22px,2.8vw,31px);color:#fff;line-height:1.22;margin-bottom:12px} .csv-spot-lead{font-size:15.5px;color:rgba(255,255,255,.82);line-height:1.7;max-width:640px} .csv-spot-checks{margin-top:18px} .csv-spot-checks li{color:rgba(255,255,255,.88)} .csv-spot-checks li .ic{color:#7ffbe9} .csv-spot-checks li b{color:#fff} .csv-spot-btns{display:flex;flex-wrap:wrap;gap:11px;margin-top:22px} .csv-spot-btns .btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.32);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} .csv-spot-btns .btn-ghost:hover{background:rgba(0,197,183,.14);border-color:var(--accent-ink);color:#7ffbe9} .csv-spot-rel{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14)} .csv-spot-rel-lbl{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.55)} .csv-spot-rel a{font-size:13px;font-weight:600;color:#fff;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);border-radius:30px;padding:7px 14px;transition:.18s;text-decoration:none} .csv-spot-rel a:hover{background:var(--teal);border-color:var(--accent-ink);color:#04231f} @media(max-width:560px){.csv-spot{padding:26px 20px;border-radius:20px}.csv-spot-btns .btn{flex:1 1 100%;justify-content:center}} /* ========================================================================== KNOWLEDGE CENTRE LAUNCHER (.lx-*) — Phase 3B M2 (rebuilt 2026-07-29) Production design language ONLY: existing brand vars (--navy/--teal/--mist/ --line/--ink/--slate/--accent-ink), existing radius (--r-lg/--r/--r-sm), existing shadows (--sh-sm/--sh), the site's .18s/.2s transitions and its translateY(-2px) hover convention. Existing components are reused inside it (.btn-teal, .btn-sm, .kcl-treat-feature, .kcl-treat-r). HARD CONSTRAINTS (verified in QA): · no overflow:auto · no max-height · no internal scrollbar · natural document height · mobile-first · 44px+ touch targets ONE DOM, THREE INTERACTION MODELS — button/panel pairs sit in document order, so mobile gets a real accordion for free; from 900px up, grid placement moves every button into column 1 and every panel into column 2. ========================================================================== */ /* ---------- MOBILE FIRST: accordion launcher ---------- */ .lx-bar{display:flex;align-items:center;gap:10px;padding:10px 14px; border-bottom:1px solid var(--line);background:var(--mist)} .lx-search{flex:1;display:flex;align-items:center;gap:10px;min-height:44px; background:#fff;border:1.5px solid var(--line);border-radius:var(--r-sm); padding:0 14px;transition:.18s} .lx-search:focus-within{border-color:var(--accent-ink);box-shadow:0 0 0 3px rgba(0,197,183,.14)} .lx-search .ic{width:18px;height:18px;color:var(--slate);flex-shrink:0} .lx-search input{flex:1;min-width:0;min-height:44px;border:none;outline:none;background:transparent; font:inherit;font-size:14.5px;color:var(--ink)} .lx-kbd{display:none;font-size:11px;font-weight:700;color:var(--slate);background:#fff; border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:3px 7px} /* Organ row — accordion trigger on mobile, rail item on desktop */ .lx-organ{display:flex;align-items:center;gap:10px;width:100%;min-height:52px; padding:8px 14px;background:none;border:none;border-bottom:1px solid var(--line); cursor:pointer;font-family:inherit;text-align:left;color:var(--navy);transition:.18s} .lx-organ:hover{background:var(--mist)} .lx-organ:focus-visible{outline:3px solid var(--accent-ink);outline-offset:-3px} .lx-organ-ic{width:30px;height:30px;border-radius:9px;flex-shrink:0;display:grid;place-items:center; background:rgba(0,197,183,.12);color:var(--accent-ink);transition:.18s} .lx-organ-ic .ic{width:16px;height:16px} .lx-organ-t{flex:1;font-family:var(--ff-h);font-size:14px;font-weight:700} .lx-organ-ch{font-style:normal;font-size:20px;color:var(--slate);transition:.2s} .lx-organ.is-on{background:var(--mist)} .lx-organ.is-on .lx-organ-ic{background:var(--teal);color:#02231f} .lx-organ.is-on .lx-organ-ch{transform:rotate(90deg);color:var(--accent-ink)} /* Panel — collapsed by default on mobile (accordion) */ .lx-panel{display:none;padding:14px 16px;background:var(--mist); border-bottom:1px solid var(--line)} .lx-panel.is-on{display:block} /* Hard 2-line cap — launcher is a fast-scan overview, not the article itself, so the summary is never allowed to grow past 2 lines regardless of how long the source sentence is. */ .lx-panel-lede{margin:0 0 10px;font-size:13.5px;line-height:1.5;color:var(--slate);max-width:62ch; display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* align-items:start stops a short column's own box from stretching, but it does NOT shrink a shared grid row's height — a row is always as tall as its tallest column regardless. That's why lx-groups is split in the markup into two independent grids (compact / wide): a tall Guides & Research list must never share a row with a one-line Diseases list, or the row's forced height leaves dead space under the short column no matter what align-items says. */ .lx-groups{display:grid;grid-template-columns:1fr;gap:10px;align-items:start} .lx-groups+.lx-groups{margin-top:10px} .lx-group{display:flex;flex-direction:column;min-width:0} .lx-group-h{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.09em; color:var(--accent-ink);padding-bottom:4px;margin-bottom:1px;border-bottom:1px solid var(--line)} /* Flat text links — the Mayo/Apollo lesson: lists stay quiet, the feature card carries the visual weight. 44px min target (accessibility floor — the 2026-08-02 density pass tightens padding/gaps around links, never the touch target itself). */ .lx-link{display:flex;flex-direction:column;justify-content:center;min-height:44px; padding:4px 8px;margin-left:-8px;border-radius:8px; font-size:14px;line-height:1.3;color:var(--ink);transition:.18s} .lx-link:hover{background:#fff;color:var(--blue)} .lx-link:focus-visible{outline:3px solid var(--accent-ink);outline-offset:-2px} .lx-link small{display:block;font-size:11.5px;color:var(--slate);margin-top:2px} .lx-panel-foot{margin-top:10px} /* .btn.btn-sm (reused, not reinvented) is already the compact size the redesign brief asks for — the bug was this rule stretching it to 100% width and center-justifying it into looking like a full oversized CTA. */ /* Feature card reuses .kcl-treat-feature — compact horizontal strip, not the full editorial card: small square thumbnail, single-line title, no excerpt paragraph, total height held under ~84px. */ .lx-feature{margin-top:10px;display:grid;grid-template-columns:64px 1fr;gap:0; background:#fff;border:1.5px solid var(--line);border-radius:var(--r-md,10px);overflow:hidden} .lx-feature .kcl-treat-media{aspect-ratio:1/1;width:64px} .lx-feature .kcl-treat-body{padding:8px 12px;justify-content:center;min-width:0} .lx-feature .kcl-treat-eyb{font-size:10px;margin-bottom:2px} .lx-feature .kcl-treat-body b{font-size:13px;margin-bottom:2px;line-height:1.25;font-weight:700; display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} .lx-feature .kcl-treat-cta{font-size:12px} /* Chips row — reuses .kcl-treat-r */ .lx-chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px} .lx-chips .kcl-treat-r{min-height:40px;padding:7px 14px 7px 7px;font-size:12.5px} .lx-chips .kcl-treat-r-ic{width:24px;height:24px} .lx-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px; padding:10px 14px;border-top:1px solid var(--line);background:var(--mist)} .lx-foot-link{display:inline-flex;align-items:center;gap:8px;min-height:44px; font-size:14.5px;font-weight:700;color:var(--navy)} .lx-foot-link .ic{width:17px;height:17px;color:var(--accent-ink)} .lx-foot-link i{font-style:normal;color:var(--accent-ink);transition:.2s} .lx-foot-link:hover i{transform:translateX(3px)} .lx-foot-cta{flex-shrink:0} /* ══ RESOURCES MEGA PANEL (.rx-*) ═══════════════════════════════════════ Extends the .lx-* rail+context system (see includes/resources-menu.php) — it is NOT a second design system. Only the genuinely new shapes live here: the two-line rail row, the editorial feature card, and the Books product card. Every colour/radius/shadow/spacing value below is an existing token. ─────────────────────────────────────────────────────────────────────── */ .panel.rx{width:min(880px,94vw)} /* rail row: icon + title + one-line description, whole row is the target */ /* Rows are sized so the description fits on ONE line at the rail width below. When it wrapped, every row grew to 69px and the rail (390px) overshot the tallest context pane (313px) — that mismatch WAS the dead space in the panel. */ .rx-organ{align-items:center;gap:11px;padding:8px 13px;min-height:52px} .rx-organ-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .rx-organ-t b{font-family:var(--ff-h);font-size:14.5px;font-weight:700;color:var(--navy);line-height:1.25} /* .rx-organ-t small (0,1,1) beats theme-light's global `small` (0,1,2)? No — it does not, so it is scoped one class deeper. Same specificity trap this codebase has hit before; see theme-light.css notes. */ .rx-body .rx-organ-t small{font-size:11.5px;line-height:1.3;color:var(--ink2,#5b6a80); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rx-organ.is-on .rx-organ-t b{color:var(--accent-ink)} .rx-organ .lx-organ-ch{align-self:center} /* context pane */ .rx-pane{--ink2:#5b6a80} .rx-eyb{display:block;font-size:10.5px;font-weight:800;text-transform:uppercase; letter-spacing:.14em;color:var(--accent-ink);margin-bottom:10px} /* editorial feature card — one per pane, carries the visual weight */ .rx-feat{display:block;padding:14px 16px;border-radius:var(--r-md,12px);background:#fff; border:1px solid var(--line);transition:border-color .2s,box-shadow .2s,transform .2s} .rx-feat:hover{border-color:rgba(0,197,183,.55);box-shadow:0 18px 36px -22px rgba(6,11,30,.4);transform:translateY(-2px)} .rx-feat b{display:block;font-family:var(--ff-h);font-size:15.5px;color:var(--navy);line-height:1.3} .rx-pane .rx-feat small{display:block;margin-top:6px;font-size:13px;line-height:1.55;color:var(--ink2)} .rx-feat-m{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px} .rx-feat-m em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--accent-ink); background:var(--teal-50);border-radius:20px;padding:3px 10px} .rx-feat-m i{margin-left:auto;font-style:normal;font-size:12.5px;font-weight:800;color:var(--blue); display:inline-flex;align-items:center;gap:5px} .rx-feat-m i .ic{width:14px;height:14px;transition:transform .2s} .rx-feat:hover .rx-feat-m i .ic{transform:translateX(3px)} /* secondary quick links */ .rx-quick{display:flex;align-items:center;gap:9px;min-height:44px;padding:6px 10px;margin:6px -10px 0; border-radius:9px;font-size:13.5px;font-weight:600;color:var(--navy);transition:background .18s,color .18s} .rx-quick:hover{background:var(--mist);color:var(--blue)} .rx-quick .ic{width:16px;height:16px;color:var(--accent-ink);flex-shrink:0} .rx-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;margin-top:6px} /* patient quote */ .rx-quote{padding:14px 16px;border-radius:var(--r-md,12px);background:#fff;border:1px solid var(--line)} .rx-stars{display:inline-flex;gap:2px;color:#C9973A} .rx-stars .ic{width:14px;height:14px;fill:currentColor} .rx-quote p{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink)} .rx-quote cite{display:block;margin-top:10px;font-style:normal;font-size:12px;font-weight:700;color:var(--ink2)} /* ── BOOKS: a product card, never another menu row ── */ .rx-book{display:grid;grid-template-columns:126px 1fr;gap:18px;align-items:start; padding:14px;border-radius:var(--r-md,12px);background:#fff;border:1px solid var(--line)} .rx-book-cov img{width:126px;height:auto;border-radius:5px;display:block; box-shadow:0 18px 34px -16px rgba(10,20,55,.45)} .rx-book-body{min-width:0;display:flex;flex-direction:column} .rx-flag{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;margin-bottom:7px; padding:4px 10px;border-radius:6px;font-size:10px;font-weight:800;text-transform:uppercase; letter-spacing:.09em;color:#6b4a10;background:linear-gradient(180deg,#ffd77a,#e8b04b)} .rx-flag .ic{width:12px;height:12px} .rx-flag-new{color:#04231f;background:linear-gradient(180deg,#7ffbe9,var(--teal))} .rx-book-body b{font-family:var(--ff-h);font-size:16px;color:var(--navy);line-height:1.25} .rx-pane .rx-book-body small{display:block;margin-top:4px;font-size:12.5px;line-height:1.45;color:var(--ink2)} .rx-book-meta{display:flex;flex-wrap:wrap;gap:5px 14px;margin-top:10px;font-size:12px;color:var(--ink2)} .rx-book-meta span{display:inline-flex;align-items:center;gap:5px} .rx-book-meta .ic{width:13px;height:13px;color:var(--accent-ink)} .rx-book-cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px} .rx-more{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .rx-more-a{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 13px; border-radius:20px;border:1px solid var(--line);background:#fff;font-size:12.5px;font-weight:700; color:var(--navy);transition:border-color .18s,color .18s} .rx-more-a:hover{border-color:var(--teal);color:var(--accent-ink)} .rx-more-a .ic{width:14px;height:14px;color:var(--accent-ink)} @media(min-width:700px){ .rx-grid{gap:0 18px} } @media(min-width:980px){ /* Wider than the KC launcher's rail because each row carries a description line. Measured: the longest description needs 194px of text column, and a 316px rail yields ~233px — comfortably one line at 11.5px. Selector MUST be .lx-body.rx-body (0,2,0): a bare .rx-body (0,1,0) ties with the launcher's own .lx-body rule and loses on source order, which silently pinned this rail to the launcher's 232px. Same tie-break trap this file already documents for .svc-lx and .lx-group--wrap. */ .lx-body.rx-body{grid-template-columns:316px minmax(0,1fr);column-gap:18px} } @media(max-width:560px){ .rx-book{grid-template-columns:76px 1fr;gap:12px} .rx-book-cov img{width:76px} .rx-grid{grid-template-columns:1fr} } /* Search results — replace the browse panel IN PLACE, no overlay, no scroll */ .lx-results{padding:8px} .lx-res{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 12px; border-radius:var(--r-sm);transition:.18s} .lx-res:hover,.lx-res.is-active{background:var(--mist)} .lx-res.is-active{box-shadow:inset 3px 0 0 var(--teal)} .lx-res-k{flex-shrink:0;width:96px;font-size:10.5px;font-weight:800;text-transform:uppercase; letter-spacing:.07em;color:var(--accent-ink)} .lx-res-t{flex:1;font-size:14.5px;font-weight:600;color:var(--navy);line-height:1.35} .lx-res-m{flex-shrink:0;font-size:11.5px;color:var(--slate)} .lx-empty{padding:26px 14px;text-align:center;font-size:14.5px;color:var(--slate)} .lx-empty a{color:var(--accent-ink);font-weight:700} .lx-recent-h{padding:10px 12px 4px;font-size:11px;font-weight:800;text-transform:uppercase; letter-spacing:.09em;color:var(--slate)} .lx-res-row{position:relative} .lx-res-row .lx-res{padding-right:40px} .lx-res-x{position:absolute;top:50%;right:6px;transform:translateY(-50%); width:26px;height:26px;border-radius:50%;border:0;background:transparent; color:var(--slate);font-size:19px;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center;opacity:0;transition:.15s} .lx-res-row:hover .lx-res-x,.lx-res-x:focus-visible{opacity:1} .lx-res-x:hover,.lx-res-x:focus-visible{background:var(--mist);color:var(--navy)} @media(pointer:coarse){.lx-res-x{opacity:1}} /* ---------- TABLET (>=700px): tap to reveal, 3x2 organ grid ---------- */ @media(min-width:700px){ .lx-bar{padding:12px 16px} .lx-kbd{display:inline-block} .lx-body{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:12px 16px 0} .lx-organ{border:1px solid var(--line);border-radius:var(--r-sm);min-height:52px} .lx-organ.is-on{border-color:var(--teal);background:#fff} .lx-organ-ch{display:none} /* every panel spans the full grid row beneath the tiles */ .lx-panel{grid-column:1/-1;border:1px solid var(--line);border-radius:var(--r-lg); margin-top:6px;padding:14px 16px} .lx-groups-compact{grid-template-columns:repeat(2,1fr);gap:12px 20px} .lx-groups-wide{grid-template-columns:1fr;gap:12px 20px} .lx-panel-foot .btn{width:auto} .lx-chips{padding:10px 16px} .lx-foot{padding:10px 16px} } /* ---------- DESKTOP (>=980px): hover, master rail + context panel ---------- */ @media(min-width:980px){ .lx-body{grid-template-columns:232px minmax(0,1fr);column-gap:20px; /* one min-content row per organ + a 1fr filler, so the rail stays tight at the top and the panel (spanning 1/-1) absorbs the remaining height */ grid-template-rows:repeat(var(--lx-rows,6),min-content) 1fr; align-items:start;padding:14px 16px 4px} /* rail: every button in column 1, natural rows */ .lx-organ{grid-column:1;border:none;border-radius:var(--r-sm);min-height:52px;margin-bottom:2px;padding:8px 12px} .lx-organ-ch{display:block} .lx-organ.is-on{background:var(--mist);border:none} /* panels: all stacked in column 2, spanning every rail row; only one visible. No max-height and no overflow — the grid row simply grows to fit. */ /* grid-row:1/-1 only works because .lx-body below declares explicit rows. Without them -1 resolves to line 1, the panel occupies row 1 alone, and row 1 grows to the panel height — pushing organs 2..6 below the fold. */ .lx-panel{grid-column:2;grid-row:1/-1;margin-top:0;background:#fff; border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 20px} .lx-groups-compact{grid-template-columns:repeat(3,1fr);gap:12px 18px} .lx-groups-wide{grid-template-columns:repeat(2,1fr);gap:12px 18px} .lx-feature{margin-top:10px} .lx-chips{padding:8px 20px 12px} .lx-foot{padding:10px 20px} } @media(prefers-reduced-motion:reduce){ .lx-organ,.lx-organ-ic,.lx-organ-ch,.lx-link,.lx-res,.lx-search,.lx-foot-link i{transition:none} .lx-foot-link:hover i{transform:none} } /* ========================================================================== MOBILE DRAWER — touch + app-shell corrections (Phase 3B M4, 2026-07-29) Measured defects being fixed (all on the surface the drawer is FOR — touch): .dp-sub-scroll a ~37px tall -> below the 44px minimum .dp-sub-all ~40px -> below the 44px minimum .dp-foot-btn ~40px -> below the 44px minimum .dp-search input ~41px @14px -> below minimum AND iOS auto-zooms the viewport on focus for any font < 16px Production tokens only; no new visual language. ========================================================================== */ /* 16px is the iOS zoom threshold — never go below it on a touch input */ .dp-search input{min-height:44px;font-size:16px} .dp-search button{min-height:44px;min-width:44px} .dp-sub-scroll a:not(.dp-sub-all):not(.dp-sub-h6){min-height:44px;display:flex; align-items:center;font-size:15px} .dp-sub-all{min-height:44px;display:flex;align-items:center;font-size:14px} .dp-sub-h6{min-height:44px;align-items:center} .dp-back{min-height:44px} .dp-foot-btn{min-height:44px;font-size:14px} .dpanel>a,.dp-drill{min-height:48px} /* Mobile/tablet location selector — the drawer's equivalent of the desktop header pill (.geo-pill, hidden below 1140px along with the rest of .nav) */ .dp-geo-pill{display:flex;align-items:center;gap:10px;width:calc(100% - 24px);margin:12px 12px 0; min-height:52px;padding:10px 14px;border-radius:var(--r-sm);background:var(--mist); border:1px solid var(--line);cursor:pointer;font-family:inherit;text-align:left;transition:.18s} .dp-geo-pill:hover,.dp-geo-pill:active{border-color:var(--teal);background:#fff} .dp-geo-pill .ic{width:19px;height:19px;color:var(--accent-ink);flex-shrink:0} .dp-geo-t{flex:1;min-width:0;display:flex;flex-direction:column} .dp-geo-t small{font-size:10.5px;color:var(--slate);text-transform:uppercase;letter-spacing:.05em;font-weight:700} .dp-geo-t b{font-size:14.5px;color:var(--navy);font-family:var(--ff-h)} .dp-geo-change{flex-shrink:0;font-size:12.5px;font-weight:700;color:var(--accent-ink)} /* ---- Quick actions: the three things a worried patient needs immediately --- */ .dp-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px; padding:12px 12px 4px} .dp-quick a{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:5px;min-height:64px;padding:8px 4px;border-radius:var(--r-sm); background:var(--mist);border:1px solid var(--line); font-size:12px;font-weight:700;color:var(--navy);text-align:center;line-height:1.2; transition:.18s} .dp-quick a:hover,.dp-quick a:active{border-color:var(--teal);background:#fff} .dp-quick .ic{width:19px;height:19px;color:var(--accent-ink)} .dp-quick .dp-q-assess{background:rgba(0,197,183,.1);border-color:rgba(0,197,183,.35)} /* ---- Organ shortcuts: Organ Hubs are the primary navigation ---------------- */ .dp-organs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:8px 12px 4px} .dp-organs a{display:flex;align-items:center;gap:8px;min-height:48px; padding:8px 12px;border-radius:var(--r-sm); background:#fff;border:1px solid var(--line); font-size:14px;font-weight:700;color:var(--navy);transition:.18s} .dp-organs a:hover,.dp-organs a:active{border-color:var(--teal);background:var(--mist)} .dp-organs .ic{width:17px;height:17px;color:var(--accent-ink);flex-shrink:0} .dp-sec-h{padding:14px 14px 4px;font-size:11px;font-weight:800;text-transform:uppercase; letter-spacing:.09em;color:var(--slate)} @media(prefers-reduced-motion:reduce){ .dp-quick a,.dp-organs a{transition:none} } /* ========================================================================== LAUNCHER ANCHORING — corrected (Phase 3B M5, 2026-07-29) BUG BEING FIXED: the panel was lifted out of .navitem to a body-level #lxSurface. Its `position:absolute; top:100%` then resolved against the page's initial containing block instead of the header, so the panel rendered floating in the middle of the document like a modal. CORRECT MODEL — it is a standard production .panel inside .navitem.navitem-end. Because .navitem-end is `position:static`, the panel's containing block is .nav (position:relative), so it anchors directly under the navigation bar. assets/js/main.js already provides hover-intent (fine pointer), tap (coarse pointer), outside-click and Escape; the trigger stays an , so a desktop click navigates to the hub page. Below 1140px the nav is hidden and the same node is MOVED into the drawer by the relocation script in header.php, where it is static, in-flow, and renders as an accordion — no popup, modal, overlay or centering. ========================================================================== */ /* Wide mega panel: span the header, not a 50%-translated dropdown. Overrides .navitem-end>.panel{left:50%} and .panel's translateX(-50%). */ /* Width: .navitem-end is position:static so the containing block is .nav — a flex:1 strip only ~700px wide. left:0/right:0 therefore CONSTRAINED the panel to the nav instead of the header. Use the production centering that the services mega already uses (left:50% + the inherited translateX(-50%)), which centres on the nav's midpoint ~= the header's, and give it a real width. Deliberately does NOT override transform, so .panel's existing open/close animation keeps working. */ .navitem-end>.panel.lx{ left:50%; right:auto; width:min(1160px,94vw); max-width:none; } /* The panel's own shell — natural height, no scroll, no fixed positioning */ .lx{width:auto;padding:0;border-radius:var(--r-lg);overflow:hidden;background:#fff} /* ---- MOBILE: relocated into the drawer -> plain in-flow accordion --------- */ .lx-mount:empty{display:none} .lx-mount .lx{ display:block!important; /* overrides .panel{display:none!important} above (1140px query) — without this the relocated node never renders at all in the drawer */ position:static; width:auto; max-width:none; margin:0; border:none; border-radius:0; box-shadow:none; opacity:1; visibility:visible; transform:none; animation:none; } /* the drawer supplies its own padding; drop the panel chrome inside it */ .lx-mount .lx-bar{padding:0 0 12px;background:none;border-bottom:1px solid var(--line)} .lx-mount .lx-chips{padding:12px 0} .lx-mount .lx-foot{padding:12px 0 0;background:none} .lx-mount .lx-kbd{display:none} /* ========================================================================== CARD PERSONALITY — the last two content-type conflations (2026-07-29) Audit of a content-rich hub found 11 distinct visual treatments already in place from Phase 2/3, and exactly TWO remaining cases where two different content types shared one card: .kcl-read-c -> Blog AND Research (8 uses) .oh-cond-c -> Disease AND Procedure (6 uses) Both are on the explicit "must not look identical" list. Production tokens only; these are modifiers on the existing cards, not new components. ========================================================================== */ /* ---- BLOG: editorial. Landscape thumbnail in the 48-64px tier. ----------- */ .kcl-read-c--blog{flex-direction:row;align-items:center;gap:12px;padding:10px 12px} .kcl-read-thumb{flex-shrink:0;width:56px;height:56px;border-radius:10px;overflow:hidden; background:var(--mist)} .kcl-read-thumb img{width:100%;height:100%;object-fit:contain;display:block} .kcl-read-c--blog .kcl-read-body{display:flex;flex-direction:column;gap:4px;min-width:0} .kcl-read-c--blog b{margin-top:0;font-size:13.5px;line-height:1.35} /* ---- RESEARCH: academic. No image, no lift, a citation rule and dateline. Deliberately the quietest card on the page — evidence, not marketing. */ .kcl-read-c--research{flex-direction:column;gap:6px;padding:14px 16px; background:var(--mist);border:1px solid var(--line);border-left:3px solid var(--navy); border-radius:0 var(--r-sm) var(--r-sm) 0} .kcl-read-c--research:hover{transform:none;background:#fff;border-left-color:var(--blue)} .kcl-read-kind{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em; color:var(--navy)} .kcl-read-c--research b{margin-top:0;font-size:13.5px;line-height:1.4;color:var(--navy)} .kcl-read-meta{font-size:11.5px;color:var(--slate);font-variant-numeric:tabular-nums} /* ---- PROCEDURE: technical. Dotted rule + tag, so it never reads as a disease card sitting in the same grid. ------------------------------ */ .oh-proc-c{border-left:3px dotted var(--accent-ink)} .oh-proc-c:hover{border-left-style:solid} .oh-proc-tag{display:inline-block;font-size:10px;font-weight:800;text-transform:uppercase; letter-spacing:.06em;color:var(--accent-ink);background:rgba(0,197,183,.1); border-radius:20px;padding:3px 9px;margin-bottom:8px} @media(prefers-reduced-motion:reduce){ .kcl-read-c--research,.oh-proc-c{transition:none} } /* This used to redeclare .lx-feature .kcl-treat-media at 21/9 + object-fit: cover, same specificity as the 64px-square rule above (line ~2633) and later in the file, so it silently won — the real photo (900x502) was squeezed into a computed 64x27px sliver and cropped to a thin strip. The 64px-square + contain rule above is the only sizing this card needs; this block only still needs the spacing tweak. */ .lx-feature{margin-top:16px}