/* MedFirm front-end
   Motion lives in JS (assets/js/motion.js + app.js): nothing gesture-driven uses CSS transitions
   or @keyframes. CSS here only covers layout, materials and the two ambient decorations. */

/* ---------- Tokens ---------- */
:root {
    color-scheme: light dark;

    --bg: #f5f5f7;
    --surface: #ffffff;
    --surface-sunken: #eceef1;
    --surface-hover: rgba(0, 0, 0, 0.04);
    --text: #1d1d1f;
    --text-2: #545860;
    --text-3: #868a92;
    --hairline: rgba(0, 0, 0, 0.09);

    /* Brand, sampled from the MedFirm logo: navy #084380 and teal #01a49e.
       Navy carries actions (9.9:1 on white). Logo teal is too light for text on white,
       so teal text uses --teal-ink (≈5:1); the logo teal itself is for fills and accents. */
    --accent: #084380;
    --accent-hover: #0a4f96;
    --accent-press: #063566;
    --accent-soft: rgba(8, 67, 128, 0.08);
    --on-accent: #ffffff;
    --teal: #01a49e;
    --teal-ink: #00756f;
    --teal-soft: rgba(1, 164, 158, 0.12);

    /* Materials. "Thin" glass for the toolbar (content scrolls under it), "thick" for the menu
       (it floats over busy content and must stay legible). Sheet is solid. */
    --glass-thin: rgba(245, 245, 247, 0.72);
    --glass-thick: rgba(255, 255, 255, 0.9);
    --scrim: rgb(8 12 16);

    --tint-bg-l: 93%;
    --tint-bg-s: 72%;
    --tint-ink-l: 30%;

    --danger-bg: #fdeeee;
    --danger-ink: #9b1c1c;
    --ok: #1f9d55;

    --shadow-s: 0 1px 2px rgba(16, 24, 40, 0.06), 0 0 0 1px rgba(16, 24, 40, 0.04);
    --shadow-m: 0 10px 30px -10px rgba(16, 24, 40, 0.18), 0 2px 6px rgba(16, 24, 40, 0.05), 0 0 0 1px rgba(16, 24, 40, 0.04);
    --shadow-l: 0 30px 70px -18px rgba(16, 24, 40, 0.34), 0 10px 24px -10px rgba(16, 24, 40, 0.14);

    --r-s: 12px;
    --r-m: 18px;
    --r-l: 26px;
    --r-xl: 34px;

    --gutter: clamp(16px, 4.5vw, 40px);
    --maxw: 1200px;
    --toolbar-h: 60px;

    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0b0c0e;
        --surface: #17181b;
        --surface-sunken: #222428;
        --surface-hover: rgba(255, 255, 255, 0.06);
        --text: #f5f5f7;
        --text-2: #a7a9ae;
        --text-3: #7d8086;
        --hairline: rgba(255, 255, 255, 0.1);

        /* Navy has too little contrast on near-black, so actions switch to a brightened brand teal. */
        --accent: #2fc4ba;
        --accent-hover: #4dd0c7;
        --accent-press: #22aaa1;
        --accent-soft: rgba(47, 196, 186, 0.14);
        --on-accent: #032443;
        --teal: #2fc4ba;
        --teal-ink: #5fd6cd;
        --teal-soft: rgba(47, 196, 186, 0.14);

        --glass-thin: rgba(11, 12, 14, 0.7);
        --glass-thick: rgba(30, 32, 36, 0.92);
        --scrim: rgb(0 0 0);

        --tint-bg-l: 20%;
        --tint-bg-s: 38%;
        --tint-ink-l: 76%;

        --danger-bg: #3a1618;
        --danger-ink: #ffb4b4;
        --ok: #4cd987;

        --shadow-s: 0 0 0 1px rgba(255, 255, 255, 0.07);
        --shadow-m: 0 10px 30px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.07);
        --shadow-l: 0 30px 70px -18px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08);
    }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scrollbar-gutter: stable;
    scroll-padding-top: calc(var(--toolbar-h) + 16px); /* anchor jumps clear the sticky toolbar */
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

img, svg { display: block; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
address { font-style: normal; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
dl, dd { margin: 0; }

h1, h2, h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.022em;
    text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
.soft { color: var(--text-3); }
.h3 { font-size: 26px; }

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent);
    outline-offset: 3px;
}

.container {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.narrow { max-width: 760px; }

.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 200;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--text);
    color: var(--bg);
    font-weight: 600;
}
.skip-link:focus { top: 12px; }

.scroll-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 8px; pointer-events: none; }

.icon {
    width: 22px;
    height: 22px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.icon-sm { width: 18px; height: 18px; }
.icon-xs { width: 14px; height: 14px; stroke-width: 2.4; }

/* ---------- Buttons ----------
   Highlight changes are instant (no transition): feedback lands on pointer-down, in the
   same frame. Scale is spring-driven from app.js via [data-press]. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}
.btn-sm { height: 36px; padding: 0 16px; font-size: 15px; }
.btn-lg { height: 54px; padding: 0 26px; font-size: 17px; }
.btn-block { width: 100%; }

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary.is-pressed { background: var(--accent-press); }

.btn-secondary { background: var(--surface); color: var(--text); box-shadow: var(--shadow-s); }
.btn-secondary:hover { background: color-mix(in srgb, var(--surface) 92%, var(--text)); }
.btn-secondary.is-pressed { background: var(--surface-sunken); }

.btn-light { background: #fff; color: #084380; }
.btn-light.is-pressed { background: #e6eef7; }

.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    color: var(--text);
    touch-action: manipulation;
}
.icon-btn:hover, .icon-btn.is-pressed { background: var(--surface-hover); }
.icon-btn-filled { width: 34px; height: 34px; background: var(--surface-sunken); }
.icon-btn-filled:hover { background: color-mix(in srgb, var(--surface-sunken) 90%, var(--text)); }
/* aria-disabled rather than disabled so keyboard focus isn't dropped at the ends of the carousel. */
.icon-btn[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.icon-btn-filled[aria-disabled="true"]:hover { background: var(--surface-sunken); }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent);
    font-weight: 600;
    white-space: nowrap;
}
.link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Toolbar (thin glass) ---------- */
.toolbar {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--toolbar-h);
    background: var(--glass-thin);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 1px 0 transparent;
}
.toolbar.is-scrolled { box-shadow: 0 1px 0 var(--hairline); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .toolbar { background: var(--bg); }
}

.toolbar-inner { height: 100%; display: flex; align-items: center; gap: 20px; }

.brand {
    display: inline-flex;
    align-items: center;
    gap: clamp(6px, 1.8vw, 10px);
    flex: none;
}
.brand picture { display: contents; }
/* Header logo scales smoothly with the screen width; the artwork's proportions are kept
   (width follows height), so the mark and wordmark stay in step at every size. */
.brand-mark { height: clamp(30px, 8.6vw, 38px); width: auto; }
.brand-word { height: clamp(15px, 4.4vw, 20px); width: auto; margin-top: 2px; }
/* Footer: the full stacked logo as supplied. */
.brand-stacked { display: block; width: fit-content; }
.brand-full { display: block; width: clamp(160px, 44vw, 210px); height: auto; }

.nav-links { display: flex; gap: 2px; margin-left: auto; }
.nav-links a {
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-2);
}
.nav-links a:hover { color: var(--text); background: var(--surface-hover); }
.nav-links a[aria-current="page"] { color: var(--text); background: var(--surface-hover); }

.toolbar-actions { display: flex; align-items: center; gap: 6px; }
.menu-btn { display: none; position: relative; }
.menu-bar {
    position: absolute;
    left: 12px;
    top: 19px;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}
.menu-bar:first-child { transform: translateY(-4px); }
.menu-bar:last-child { transform: translateY(4px); }

/* Phones: a compact "Contact us" button leaves the logo room to breathe; on the very
   narrowest screens the button goes and the menu (which repeats it) takes over. */
@media (max-width: 420px) {
    .toolbar-inner { gap: 12px; }
    .toolbar-actions .btn-sm { height: 34px; padding: 0 12px; font-size: 14px; }
}
@media (max-width: 350px) {
    .toolbar-actions .btn-sm { display: none; }
}

@media (max-width: 820px) {
    .nav-links { display: none; }
    .menu-btn { display: inline-grid; }
    .toolbar-actions { margin-left: auto; }
}

/* ---------- Menu (thick material, anchored to its trigger, no scrim) ---------- */
.menu {
    position: fixed;
    z-index: 60;
    top: calc(var(--toolbar-h) + 6px);
    right: var(--gutter);
    width: min(320px, calc(100vw - 2 * var(--gutter)));
    padding: 8px;
    border-radius: var(--r-l);
    background: var(--glass-thick);
    -webkit-backdrop-filter: saturate(180%) blur(30px);
    backdrop-filter: saturate(180%) blur(30px);
    box-shadow: var(--shadow-l), 0 0 0 1px var(--hairline);
    transform-origin: top right;
}
.menu nav { display: grid; }
.menu-link {
    display: block;
    padding: 13px 16px;
    border-radius: 14px;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.015em;
}
.menu-link:hover, .menu-link.is-pressed { background: var(--surface-hover); }
.menu-link[aria-current="page"] { color: var(--accent); }
.menu-foot { display: grid; gap: 10px; padding: 12px 8px 8px; margin-top: 6px; border-top: 1px solid var(--hairline); }

/* ---------- Shared bits ---------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--teal-soft);
    color: var(--teal-ink);
    font-size: 14px;
    font-weight: 600;
}

.live-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ok);
    flex: none;
}
/* Ambient, non-interactive decoration: the one place @keyframes is allowed. */
.live-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--ok);
    animation: live-pulse 2.4s ease-out infinite;
}
@keyframes live-pulse {
    from { transform: scale(1); opacity: 0.55; }
    to { transform: scale(3); opacity: 0; }
}

.chip-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    flex: none;
    background: hsl(var(--h, 186) var(--tint-bg-s) var(--tint-bg-l));
    color: hsl(var(--h, 186) 62% var(--tint-ink-l));
}
.chip-icon-sm { width: 32px; height: 32px; border-radius: 10px; }
.chip-icon-lg { width: 64px; height: 64px; border-radius: 20px; }
.chip-icon-lg .icon { width: 28px; height: 28px; }

.avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex: none;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #fff;
    background: linear-gradient(140deg, hsl(var(--h) 62% 58%), hsl(calc(var(--h) + 24) 58% 38%));
}
.avatar-lg { width: 84px; height: 84px; font-size: 28px; }
.avatar-photo { display: block; object-fit: cover; background: var(--surface-sunken); box-shadow: 0 0 0 1px var(--hairline); }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    isolation: isolate;
    padding: clamp(40px, 8vw, 104px) 0 clamp(56px, 8vw, 96px);
    overflow: clip;
}
.hero::before {
    content: "";
    position: absolute;
    inset: -20% -10% 0;
    z-index: -1;
    background:
        radial-gradient(42% 46% at 82% 26%, hsl(177 70% 78% / 0.55), transparent 70%),
        radial-gradient(34% 40% at 64% 78%, hsl(211 80% 84% / 0.5), transparent 70%),
        radial-gradient(30% 30% at 96% 70%, hsl(177 60% 84% / 0.45), transparent 70%);
    animation: hero-drift 18s ease-in-out infinite alternate;
}
/* The colour wash drifts very slowly, so the hero never looks frozen. */
@keyframes hero-drift { from { translate: 0 0; scale: 1; } to { translate: -4% 3%; scale: 1.06; } }
@media (prefers-color-scheme: dark) {
    .hero::before { opacity: 0.32; }
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(32px, 6vw, 72px);
    align-items: center;
}
.hero h1 {
    margin-top: 20px;
    font-size: clamp(44px, 6.6vw, 80px);
    line-height: 1.0;
    letter-spacing: -0.038em;
}
.hero-lede {
    margin-top: 20px;
    max-width: 34ch;
    font-size: clamp(18px, 1.9vw, 21px);
    color: var(--text-2);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    font-size: 15px;
    color: var(--text-2);
}
.hero-points li { display: inline-flex; align-items: center; gap: 6px; }
.hero-points .icon { color: var(--teal-ink); }
.hero h1 .soft { color: var(--teal-ink); } /* echoes the logo's navy + teal split */

/* Solid cards over the gradient and orbit (no glass on glass). The supporting cards only
   overlap the main card's empty corners. Entrance, parallax, counters and the notification
   cycle are springs in initHeroVisual(); the gentle float and the ECG trace are ambient
   CSS keyframes, and all of it stops under prefers-reduced-motion. */
.hero-visual {
    position: relative;
    isolation: isolate;
    min-height: 540px;
}
.hv-card {
    position: absolute;
    z-index: 1;
    border: 1px solid transparent;
    border-radius: var(--r-l);
    /* Hairline gradient edge: teal catching the light at the top, fading to navy. */
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        linear-gradient(150deg, rgb(1 164 158 / 0.45), rgb(8 67 128 / 0.08) 45%, rgb(8 67 128 / 0.16)) border-box;
    box-shadow: 0 34px 60px -30px rgb(8 67 128 / 0.38), 0 10px 22px -12px rgb(8 67 128 / 0.16);
    will-change: transform;
}
@media (prefers-color-scheme: dark) {
    .hv-card {
        background:
            linear-gradient(var(--surface), var(--surface)) padding-box,
            linear-gradient(150deg, rgb(47 196 186 / 0.5), rgb(255 255 255 / 0.06) 45%, rgb(255 255 255 / 0.1)) border-box;
        box-shadow: 0 34px 60px -30px rgb(0 0 0 / 0.8), 0 10px 22px -12px rgb(0 0 0 / 0.5);
    }
}
/* Hidden until the script takes over, so cards don't flash before their entrance.
   If the script never runs, the reveal animation shows them after 2.5 s anyway. */
.js .hero-visual:not(.is-ready) .hv-card,
.js .hero-visual:not(.is-ready) .hv-orbit { opacity: 0; animation: hv-reveal 0.01s 2.5s forwards; }
@keyframes hv-reveal { to { opacity: 1; } }

@keyframes hv-float { from { translate: 0 -5px; } to { translate: 0 5px; } }
.hero-visual.is-ready .hv-main { animation: hv-float 6.5s ease-in-out infinite alternate; }
.hero-visual.is-ready .hv-results { animation: hv-float 5.2s ease-in-out -2s infinite alternate; }
.hero-visual.is-ready .hv-ecg { animation: hv-float 7.4s ease-in-out -4s infinite alternate; }

.hv-orbit {
    position: absolute;
    z-index: 0;
    inset: -6% -10% -2% -8%;
    width: 118%;
    height: 108%;
    overflow: visible;
    pointer-events: none;
}
.hv-orbit-ring { fill: none; stroke: url(#hv-orbit-grad); stroke-width: 1.6; }
.hv-orbit-ring-dashed { stroke: rgb(8 67 128 / 0.22); stroke-dasharray: 2 7; stroke-linecap: round; }
.hv-orbit-dot { fill: var(--teal); filter: drop-shadow(0 0 6px rgb(1 164 158 / 0.8)); }
.hv-orbit-dot-navy { fill: var(--accent); filter: drop-shadow(0 0 5px rgb(8 67 128 / 0.5)); }

.hv-main { top: 60px; right: 4%; width: min(100% - 24px, 350px); padding: 22px 22px 18px; border-radius: 28px; }
.hv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hv-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-2);
}
.hv-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    background: var(--teal-soft);
    color: var(--teal-ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.hv-badge .live-dot { width: 6px; height: 6px; }
.hv-time {
    margin: 12px 0 16px;
    font-family: var(--font-display);
    font-size: 30px;
    letter-spacing: -0.025em;
    color: var(--text-2);
}
.hv-time strong { display: inline-block; min-width: 1.3em; color: var(--text); font-variant-numeric: tabular-nums; }
.hv-progress { position: relative; height: 8px; border-radius: 4px; background: var(--surface-sunken); overflow: hidden; }
.hv-progress span {
    position: relative;
    display: block;
    width: 92%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--teal));
    overflow: hidden;
}
/* A soft sheen that sweeps along the bar now and then. */
.hv-progress span::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.55), transparent);
    translate: -120% 0;
    animation: hv-sheen 3.6s ease-in-out 1.6s infinite;
}
@keyframes hv-sheen { 0% { translate: -120% 0; } 45%, 100% { translate: 320% 0; } }

.hv-ticks { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 16px; }
.hv-tick {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px 5px 7px;
    border-radius: 999px;
    background: var(--surface-sunken);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 600;
}
.hv-tick .icon {
    padding: 2px;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    color: #fff;
    background: var(--text-3);
    opacity: 0.45;
}
.hv-tick.is-done { color: var(--teal-ink); background: var(--teal-soft); }
.hv-tick.is-done .icon { background: var(--teal); opacity: 1; }
.hv-doctor:last-child { margin-bottom: 0; }
.hv-doctor {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 16px;
    border-radius: var(--r-m);
    background: var(--surface-sunken);
    font-size: 15px;
}
.hv-doctor strong, .hv-doctor small { display: block; }
.hv-doctor small { color: var(--text-2); }

.hv-ecg {
    left: 0;
    bottom: 0;
    width: 214px;
    padding: 16px;
}
.hv-mini-head { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; line-height: 1.25; }
.ecg { width: 100%; height: 48px; margin: 10px 0 6px; overflow: visible; }
.ecg path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.ecg-base { stroke: var(--teal); stroke-width: 1.6; opacity: 0.25; }
/* pathLength="100" makes these dash numbers percentages of the trace, at any card width. */
.ecg-trace {
    stroke: var(--teal);
    stroke-width: 2.4;
    stroke-dasharray: 24 76;
    animation: ecg-trace 1.66s linear infinite; /* two beats per sweep at 72 bpm */
    filter: drop-shadow(0 0 3px rgb(1 164 158 / 0.6));
}
@keyframes ecg-trace { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.hv-heart { animation: hv-beat 0.83s ease-out infinite; }
@keyframes hv-beat { 0%, 60%, 100% { scale: 1; } 15% { scale: 1.12; } 30% { scale: 0.98; } }
.hv-mini-foot { font-size: 13px; color: var(--text-2); }
.hv-mini-foot strong { font-size: 17px; color: var(--text); }

.hv-results {
    right: 0;
    top: 6px;
    padding: 12px 14px 12px 12px;
    font-size: 14px;
}
/* All notices share one grid cell, so the card is sized by the widest and never jumps. */
.hv-notice { display: grid; }
.hv-notice-item {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    gap: 12px;
}
.js .hv-notice-item:not(.is-current) { opacity: 0; }
.hv-notice-item strong, .hv-notice-item small { display: block; white-space: nowrap; }
.hv-notice-item small { color: var(--text-2); }
.hv-notice-item em { align-self: flex-start; margin-left: auto; padding-left: 8px; font-style: normal; font-size: 11px; color: var(--text-3); }

/* ---------- Sections ---------- */
.section { padding-block: clamp(64px, 9vw, 120px); }
.section-tight { padding-block: clamp(48px, 7vw, 88px); }
.section-flush-top { padding-top: 0; }
.section-sunken { background: var(--surface); }
@media (prefers-color-scheme: dark) {
    .section-sunken { background: #111215; }
}

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: clamp(28px, 4vw, 44px);
}
.section-head h2 { font-size: clamp(32px, 4.4vw, 52px); letter-spacing: -0.032em; }
.section-head p { margin-top: 12px; max-width: 52ch; font-size: clamp(17px, 1.6vw, 19px); color: var(--text-2); }
.section-head-center { justify-content: center; text-align: center; }
.section-head-center p { margin-inline: auto; }

/* ---------- Carousel ---------- */
.section-services { overflow: clip; }
.carousel-controls { display: flex; gap: 8px; flex: none; }

.carousel-viewport {
    /* Same width as the page content, centred, so the row lines up with the heading on both
       sides. Cards are sized from this width (container units) so whole cards fill it. */
    container-type: inline-size;
    width: min(100% - 2 * var(--gutter), var(--maxw) - 2 * var(--gutter));
    margin-inline: auto;
    padding-block: 6px 30px;
    overflow: hidden;
    overflow: clip;
    overflow-clip-margin: 4px; /* keep the cards' 1px outline ring at the edges */
    touch-action: pan-y; /* vertical page scroll stays native; we own horizontal */
    cursor: grab;
    outline: none;
}
.carousel-viewport:focus-visible { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--accent) 50%, transparent); }
.carousel-viewport.is-dragging { cursor: grabbing; }
.carousel-viewport.is-dragging .service-card { pointer-events: none; }

.carousel-track {
    position: relative;
    display: flex;
    gap: 18px;
    width: max-content;
    user-select: none;
    -webkit-user-select: none;
    will-change: transform;
}
/* Whole cards per view: 4 on desktop, 3 on small laptops, 2 on tablets. */
.carousel-track .service-card { width: calc((100cqw - 3 * 18px) / 4); }
@container (max-width: 1000px) {
    .carousel-track .service-card { width: calc((100cqw - 2 * 18px) / 3); }
}
@container (max-width: 720px) {
    .carousel-track .service-card { width: calc((100cqw - 18px) / 2); }
}
/* Phones: one card with the next peeking in, the row running to both screen edges. */
@media (max-width: 640px) {
    .carousel-viewport { width: 100%; padding-inline: var(--gutter); overflow-clip-margin: 0; }
    .carousel-track .service-card { width: 82cqw; }
}

.carousel-dots { display: flex; justify-content: center; gap: 8px; }
.carousel-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-3);
    opacity: 0.35;
}
.carousel-dots span.is-active { opacity: 1; background: var(--text); }

/* ---------- Service card ---------- */
.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 330px;
    padding: 26px;
    border-radius: var(--r-l);
    background: var(--surface);
    box-shadow: var(--shadow-s);
    overflow: hidden;
    -webkit-user-drag: none;
}
.service-card::after {
    content: "";
    position: absolute;
    inset: auto -30% -40% auto;
    width: 80%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, hsl(var(--h, 186) 80% 70% / 0.18), transparent);
    pointer-events: none;
}
.service-card:hover { box-shadow: var(--shadow-m); }
.service-card h3 { margin-top: 22px; font-size: 24px; letter-spacing: -0.022em; }
.service-card p { margin-top: 10px; color: var(--text-2); font-size: 16px; }
.card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 22px;
    font-size: 15px;
}
.price { font-weight: 600; }
.go {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface-sunken);
}
.service-card:hover .go { background: var(--accent); color: var(--on-accent); }

.service-card-more { background: var(--accent); color: var(--on-accent); }
.service-card-more .chip-icon { background: rgba(255, 255, 255, 0.18); color: inherit; }
.service-card-more p { color: inherit; opacity: 0.85; }
.service-card-more h3 { margin-top: auto; }

.service-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 18px;
}
.grid-cell { display: grid; }
.grid-cell[hidden] { display: none; }

/* ---------- Features ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.feature { padding: 26px; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-s); }
.feature-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--teal-soft);
    color: var(--teal-ink);
}
.feature h3 { margin-top: 18px; font-size: 19px; letter-spacing: -0.015em; }
.feature p { margin-top: 6px; font-size: 15px; color: var(--text-2); }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.step { padding: 28px; border-radius: var(--r-l); background: var(--bg); }
.step-num {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 700;
}
.step h3 { margin-top: 22px; font-size: 22px; }
.step p { margin-top: 8px; color: var(--text-2); }

/* ---------- Team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 18px; }
.team-card { padding: 10px 10px 24px; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-s); }
.team-card > :not(.team-media) { padding-inline: 14px; }
/* Full-width square portrait; radius is the card's minus its padding so the corners nest. */
.team-media { aspect-ratio: 1; border-radius: calc(var(--r-l) - 10px); overflow: hidden; background: var(--surface-sunken); }
.team-media img, .team-initials { display: block; width: 100%; height: 100%; object-fit: cover; }
.team-initials {
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: clamp(48px, 6vw, 72px);
    font-weight: 600;
    color: #fff;
    background: linear-gradient(140deg, hsl(var(--h) 62% 58%), hsl(calc(var(--h) + 24) 58% 38%));
}
.team-card h3 { margin-top: 18px; font-size: 20px; letter-spacing: -0.015em; }
.team-role { margin-top: 4px; font-weight: 600; color: var(--accent); font-size: 15px; }
.team-focus { margin-top: 10px; color: var(--text-2); font-size: 15px; }
.team-langs { display: flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--text-3); font-size: 14px; }

/* Grey at rest, full colour on hover. Only where a real hover exists: on touch screens the
   photos stay in colour, since there's no hover to reveal it. A CSS transition is fine here:
   hover isn't a drag, and transitions reverse from the current value if the pointer leaves. */
@media (hover: hover) and (pointer: fine) {
    .team-media > * {
        filter: grayscale(1);
        transition: filter 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
    }
    .team-card:hover .team-media > * { filter: grayscale(0); transform: scale(1.04); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
    .team-media > * { transition: filter 0.2s linear; }
    .team-card:hover .team-media > * { transform: none; }
}

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item h3 { font-size: inherit; }
.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 22px 4px;
    font-family: var(--font-display);
    font-size: clamp(18px, 2vw, 20px);
    font-weight: 600;
    letter-spacing: -0.015em;
    text-align: left;
}
.faq-chevron {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex: none;
    background: var(--surface-sunken);
}
.faq-a { overflow: hidden; }
.js .faq-a { height: 0; }
.faq-a-inner { padding: 0 4px 24px; max-width: 64ch; color: var(--text-2); }

/* ---------- CTA band ---------- */
.cta-band {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 28px;
    padding: clamp(32px, 6vw, 64px);
    border-radius: var(--r-xl);
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(70% 140% at 100% 100%, rgb(1 164 158 / 0.75), transparent 62%),
        linear-gradient(135deg, #052c56, #084380 55%, #0a5a8a);
}
.cta-band h2 { font-size: clamp(28px, 3.6vw, 42px); letter-spacing: -0.03em; }
.cta-band p { margin-top: 8px; opacity: 0.85; font-size: 18px; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding: clamp(44px, 8vw, 96px) 0 clamp(28px, 4vw, 48px); }
.page-hero h1 { font-size: clamp(40px, 6vw, 68px); letter-spacing: -0.036em; }
.page-lede { margin-top: 18px; max-width: 46ch; font-size: clamp(18px, 1.9vw, 21px); color: var(--text-2); }

.filter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 36px; }
.filter-count { color: var(--text-3); font-size: 15px; }

.segmented {
    position: relative;
    display: inline-flex;
    max-width: 100%;
    padding: 4px;
    border-radius: 999px;
    background: var(--surface-sunken);
    overflow-x: auto;
    scrollbar-width: none;
}
.segmented::-webkit-scrollbar { display: none; }
.segmented button {
    position: relative;
    z-index: 1;
    height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-2);
    white-space: nowrap;
}
.segmented button[aria-pressed="true"] { color: var(--text); font-weight: 600; }
.segmented-indicator {
    position: absolute;
    top: 4px;
    left: 0;
    width: 0;
    height: 36px;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.12), 0 0 0 0.5px rgba(16, 24, 40, 0.06);
}
@media (prefers-color-scheme: dark) {
    .segmented-indicator { background: #3a3d43; }
}

/* ---------- Service detail ---------- */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(32px, 6vw, 72px); align-items: start; }
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 28px -8px;
    padding: 6px 12px 6px 8px;
    border-radius: 999px;
    color: var(--accent);
    font-weight: 600;
    font-size: 15px;
}
.back-link:hover { background: var(--accent-soft); }
.detail-hero h1 { margin-top: 24px; }
.detail-meta { display: flex; gap: 12px; margin-top: 28px; }
.detail-meta div { padding: 14px 18px; border-radius: var(--r-m); background: var(--surface); box-shadow: var(--shadow-s); }
.detail-meta dt { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-3); }
.detail-meta dd { margin-top: 2px; font-weight: 600; font-size: 18px; }

.include-card { padding: 30px; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-m); }
.include-card h2 { font-size: 22px; }
.check-list { display: grid; gap: 14px; margin: 22px 0 0; padding: 0; list-style: none; }
.check-list li { display: flex; align-items: center; gap: 12px; }
.check-dot {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex: none;
    background: hsl(var(--h) var(--tint-bg-s) var(--tint-bg-l));
    color: hsl(var(--h) 62% var(--tint-ink-l));
}
.include-note { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--hairline); font-size: 14px; color: var(--text-3); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 24px; align-items: start; }
.contact-info { display: grid; gap: 12px; }
.info-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px;
    border-radius: var(--r-l);
    background: var(--surface);
    box-shadow: var(--shadow-s);
}
a.info-card:hover { box-shadow: var(--shadow-m); }
.info-card .chip-icon { width: 44px; height: 44px; border-radius: 14px; }
.info-card small { display: block; color: var(--text-3); font-size: 13px; }
.info-card strong { display: block; font-size: 17px; }
.hours-list { display: grid; gap: 2px; margin-top: 2px; font-size: 15px; }
.hours-list div { display: flex; justify-content: space-between; gap: 18px; }
.hours-list dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.next-steps { display: grid; gap: 4px; margin: 4px 0 0; padding-left: 18px; font-size: 15px; }
.next-steps li::marker { color: var(--teal-ink); font-weight: 600; }

.form-card { padding: clamp(24px, 4vw, 36px); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-m); }
.form-sub { margin: 8px 0 24px; color: var(--text-2); font-size: 15px; }
.contact-form { display: grid; gap: 16px; }
.form-done { display: grid; justify-items: start; gap: 12px; padding: 24px 0 8px; }
.form-done h3 { font-size: 24px; }
.form-done p { color: var(--text-2); }

/* ---------- Form fields ---------- */
.field { display: grid; gap: 6px; }
.field > span { font-size: 14px; font-weight: 600; color: var(--text-2); }
.field em { font-style: normal; font-weight: 400; color: var(--text-3); }
.fields-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.input {
    width: 100%;
    min-height: 50px;
    padding: 12px 16px;
    border: 0;
    border-radius: 14px;
    background: var(--surface-sunken);
    color: var(--text);
    font: inherit;
    font-size: 17px; /* ≥16px stops iOS zooming on focus */
    box-shadow: inset 0 0 0 1px transparent;
}
textarea.input { resize: vertical; min-height: 130px; }
.select-wrap { position: relative; display: block; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.select-wrap .icon { position: absolute; right: 14px; top: 50%; translate: 0 -50%; color: var(--text-2); pointer-events: none; }
.input:focus { outline: none; background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); }
.input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #d93838; }

/* ---------- Footer ---------- */
.site-footer { padding: 64px 0 36px; border-top: 1px solid var(--hairline); color: var(--text-2); font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
.footer-brand p { margin-top: 14px; max-width: 38ch; }
.footer-brand .brand { color: var(--text); }
.footer-emergency {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--r-m);
    background: var(--danger-bg);
    color: var(--danger-ink);
    font-size: 14px;
}
.footer-emergency a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.footer-title { margin-bottom: 14px; font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--text); }
.footer-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.footer-list a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.footer-hours { display: grid; gap: 4px; margin-top: 14px; }
.footer-hours div { display: flex; justify-content: space-between; gap: 12px; max-width: 240px; }
.footer-hours dd { font-variant-numeric: tabular-nums; }
.footer-base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    margin-top: 48px;
    padding-top: 20px;
    border-top: 1px solid var(--hairline);
    font-size: 13px;
    color: var(--text-3);
}

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
    .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
    .hero-grid, .detail-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); }
    .hero-visual { max-width: 460px; width: 100%; margin-inline: auto; }
    .steps { grid-template-columns: minmax(0, 1fr); }
    .cta-band { grid-template-columns: minmax(0, 1fr); }
    .cta-band .btn { justify-self: start; }
}

@media (max-width: 640px) {
    body { font-size: 16px; }
    .section-head { flex-direction: column; align-items: flex-start; }
    .section-head-center { align-items: center; }
    .carousel-controls { display: none; }
    .hero-actions .btn { flex: 1 1 auto; }
    .hero-visual { min-height: 560px; }
    .hv-main { top: 80px; right: 0; } /* clears the two-line notification card above it */
    .hv-ecg { width: 190px; }
    .hv-notice-item small { white-space: normal; max-width: 22ch; }
    .feature-grid { grid-template-columns: minmax(0, 1fr); }
    .fields-2 { grid-template-columns: minmax(0, 1fr); }
    .footer-grid { grid-template-columns: minmax(0, 1fr); }
    .detail-meta { flex-wrap: wrap; }
}

/* ---------- Reduced motion ----------
   JS springs jump to their targets and swap position changes for short opacity crossfades.
   Here: stop the ambient decorations. */
@media (prefers-reduced-motion: reduce) {
    .live-dot::after, .ecg path, .hero::before, .hv-heart, .hv-progress span::after,
    .hero-visual.is-ready .hv-card { animation: none; }
    .ecg path { stroke-dasharray: none; }
    .ecg-trace { opacity: 0; }
    .ecg-base { opacity: 1; }
    .hv-orbit-dot { display: none; }
}