/* Generated by scripts/build-assets.mjs. Edit the modular source files. */
/* =========================================================
   variables.css — design tokens
   Single source of truth. No magic numbers elsewhere.
========================================================= */

:root {

    /* ---- Brand palette ---- */
    --navy:    #11294A;
    --navy-2:  #081B36;
    --teal:    #0E7B6B;
    --blue:    #2A78BC;
    --purple:  #7E4196;
    --orange:  #F26A21;
    --slate:   #3A4A5A;

    /* ---- Neutrals ---- */
    --white:      #FFFFFF;
    --bg:         #F5F5F7;   /* Apple light grey */
    --bg-soft:    #FAFAFC;   /* near-white band */
    --ink:        #1D1D1F;   /* Apple near-black text */
    --ink-soft:   #6E6E73;   /* Apple secondary grey */
    --line:       #E3E3E6;

    /* ---- Surface / glass ---- */
    --glass:        rgba(255, 255, 255, .72);
    --glass-strong: rgba(255, 255, 255, .92);
    --glass-border: rgba(17, 41, 74, .08);

    /* ---- Typography ---- */
    --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    --fs-overline: clamp(.78rem, .7rem + .3vw, .92rem);
    --fs-body:     clamp(1.05rem, 1rem + .35vw, 1.25rem);
    --fs-lead:     clamp(1.25rem, 1.1rem + .8vw, 1.6rem);
    --fs-h3:       clamp(1.35rem, 1.2rem + .7vw, 1.75rem);
    --fs-h2:       clamp(2.4rem, 1.8rem + 3vw, 4.5rem);
    --fs-display:  clamp(3.2rem, 2rem + 7vw, 8.5rem);

    --tracking-tight: -.04em;
    --tracking-display: -.055em;
    --tracking-wide: .32em;

    /* ---- Spacing scale ---- */
    --space-1: .5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 3rem;
    --space-6: 4.5rem;
    --space-7: 7rem;
    --chapter: clamp(4.5rem, 3rem + 5vw, 8.5rem);

    /* ---- Radius ---- */
    --r-sm:  12px;
    --r-md:  20px;
    --r-lg:  28px;
    --r-xl:  40px;
    --r-pill: 999px;

    /* ---- Shadows (soft, layered) ---- */
    --shadow-sm: 0 4px 20px rgba(17, 41, 74, .05);
    --shadow-md: 0 18px 50px rgba(17, 41, 74, .09);
    --shadow-lg: 0 40px 110px rgba(17, 41, 74, .14);
    --shadow-glow: 0 30px 90px rgba(14, 123, 107, .18);

    /* ---- Layout ---- */
    --container: 1240px;
    --container-wide: 1440px;

    /* ---- Asset references (paths relative to css/ dir) ---- */
    --mark-url: url("../assets/kamino-mark.svg");

    /* ---- Unified logo sizing ---- */
    --logo-h: 42px;        /* standard one-line brand logo height */
    --logo-h-lg: 56px;     /* prominent contexts (footer / cta master) */

    /* ---- Motion ---- */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --dur-fast: .35s;
    --dur: .6s;
    --dur-slow: 1s;
}

/* =========================================================
   base.css — reset + document defaults
========================================================= */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.65;
    font-size: var(--fs-body);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}



a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

ul {
    list-style: none;
}

/* avoid one-word orphans on paragraph last lines */
p {
    text-wrap: pretty;
}

.nowrap {
    white-space: nowrap;
}

:focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: 4px;
    border-radius: 6px;
}

::selection {
    background: rgba(14, 123, 107, .18);
}

/* Skip link for keyboard users */
.skip-link {
    position: absolute;
    left: 50%;
    top: -100px;
    transform: translateX(-50%);
    background: var(--navy);
    color: var(--white);
    padding: 12px 22px;
    border-radius: var(--r-pill);
    z-index: 2000;
    transition: top var(--dur-fast) var(--ease);
}

.skip-link:focus {
    top: 16px;
}

/* Shared layout primitive */
.container {
    width: min(var(--container), 90%);
    margin-inline: auto;
}

.container--wide {
    width: min(var(--container-wide), 92%);
    margin-inline: auto;
}

.chapter {
    position: relative;
    padding-block: var(--chapter);
}

/* =========================================================
   typography.css — type system
========================================================= */

.overline {
    display: inline-block;
    font-size: var(--fs-overline);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--teal);
}

.display {
    font-size: var(--fs-display);
    font-weight: 800;
    line-height: .92;
    letter-spacing: var(--tracking-display);
}

.h2 {
    font-size: var(--fs-h2);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: var(--tracking-tight);
}

.h3 {
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.lead {
    font-size: var(--fs-lead);
    line-height: 1.5;
    color: var(--ink-soft);
    font-weight: 400;
}

.body {
    color: var(--ink-soft);
}

/* One accent hue per section: sections may set --accent; default = teal.
   Single-hue accent → navy for depth, no multi-hue rainbow across a screen. */
.text-gradient {
    background: linear-gradient(115deg,
        var(--accent, var(--teal)) 0%,
        var(--navy) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.text-balance {
    text-wrap: balance;
}

.measure {
    max-width: 62ch;
}

.measure--tight {
    max-width: 46ch;
}

/* =========================================================
   layout.css — reusable layout primitives + buttons
========================================================= */

.section-head {
    max-width: 880px;
    margin-inline: auto;
    text-align: center;
}

.section-head .overline {
    margin-bottom: var(--space-3);
}

.section-head .h2 {
    margin-bottom: var(--space-3);
}

.section-head .lead {
    margin-inline: auto;
    max-width: 60ch;
    text-wrap: balance;
}

.grid {
    display: grid;
    gap: var(--space-4);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.stack > * + * {
    margin-top: var(--space-3);
}

/* ---- Buttons ---- */
.btn {
    --btn-bg: var(--navy);
    --btn-fg: var(--white);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 15px 28px;
    border-radius: var(--r-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 600;
    will-change: transform;
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                filter var(--dur-fast) var(--ease-out);
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    filter: brightness(1.05);
}

.btn:active {
    transform: translateY(-1px);
}

.btn--light {
    --btn-bg: var(--white);
    --btn-fg: var(--navy);
}

.btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--navy);

    border: 1px solid rgba(17, 41, 74, 0.12);

    background: rgba(255,255,255,.55);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);
}

.btn--ghost:hover {
    --btn-bg: rgba(17,41,74,.05);
    border-color: rgba(17,41,74,.18);
}

/* secondary action on dark (navy) bands */
.btn--outline-light {
    --btn-bg: transparent;
    --btn-fg: var(--white);
    border: 1px solid rgba(255, 255, 255, .55);
}

.btn--outline-light:hover {
    --btn-bg: rgba(255, 255, 255, .1);
    border-color: var(--white);
}

.btn__arrow {
    width: 18px;
    height: 18px;
    transition: transform var(--dur-fast) var(--ease-out);
}

.btn:hover .btn__arrow {
    transform: translateX(4px);
}

/* ---- Glass card base ---- */
.card {
    background: var(--white);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    will-change: transform;
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
}

/* =========================================================
   navigation.css — fixed header + mobile menu
========================================================= */

.nav {
    position: fixed;
    inset: var(--space-3) 0 auto 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    pointer-events: none;          /* only the pill catches clicks */
    transition: inset var(--dur) var(--ease);
}

/* transparent at rest; frosts back in once scrolled */
.nav__inner {
    position: relative;
    pointer-events: auto;
    width: min(100% - 2 * var(--space-4), 1180px);
    height: 76px;
    padding-inline: var(--space-4) var(--space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--r-pill);
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    transition: background var(--dur) var(--ease),
                backdrop-filter var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                height var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}

/* scrolled: tighten + frost stronger */
.nav--scrolled {
    inset: var(--space-2) 0 auto 0;
}

.nav--scrolled .nav__inner {
    height: 68px;
    background: var(--glass);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    box-shadow: var(--shadow-md);
    border-color: var(--glass-border);
}


.nav__brand img {
    /* 741x240 master lockup: smaller than this and "ONE HEALTH" is unreadable */
    height: 60px;
    width: auto;
    display: block;
}

.nav__links {
    display: flex;
    gap: var(--space-1);
}

.nav__link {
    position: relative;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    font-size: .92rem;
    font-weight: 500;
    color: var(--ink-soft);
    transition: color var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease);
}

.nav__link:hover {
    color: var(--ink);
    background: rgba(17, 41, 74, .05);
}

.nav__link--active {
    color: var(--ink);
}

.nav__link--active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--teal);
    transform: translateX(-50%);
}

.nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.nav__actions .btn {
    padding: 9px 18px;
    font-size: .9rem;
}

/* ---- Hamburger ---- */
.nav__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 11px;
}

.nav__toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--ink);
    border-radius: 2px;
    transition: transform var(--dur-fast) var(--ease),
                opacity var(--dur-fast) var(--ease);
}

.nav__toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.nav__toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* =========================================================
   hero.css — split hero: copy left, mark-in-disc right,
   brand strip below. Static, calm, premium.
========================================================= */

.hero {
    position: relative;
    /* one accent per section: hero reads blue (matches hero gradient) */
    --accent: var(--blue);
    padding-top: calc(78px + var(--space-5));   /* clear fixed nav */
    padding-bottom: var(--space-6);
    overflow: hidden;
    /* Apple iPad-air style: light at top, gently deeper blue toward bottom */
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--blue) 34%, white) 0%,
        color-mix(in srgb, var(--blue) 14%, white) 55%,
        #ffffff 100%);
}

.hero__inner {
    /* match the standard content width so the hero's left edge lines up
       with the nav pill and every section below */
    width: min(var(--container), 90%);
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    align-items: center;
    gap: clamp(2rem, 1rem + 5vw, 6rem);
    min-height: min(78vh, 760px);
}

/* ---- Copy ---- */
.hero__overline {
    margin-bottom: var(--space-3);
}

.hero__title {
    font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5.5rem);
    line-height: .98;
    margin-bottom: var(--space-4);
}

.hero__sub {
    max-width: 46ch;
    margin-bottom: var(--space-5);
    color: var(--slate);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* ---- Ecosystem proof points ---- */
.hero__proofs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    max-width: 700px;
    margin-top: var(--space-4);
}

.hero__proof {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    padding: .875rem 1rem;
    background: rgba(255, 255, 255, .68);
    border: 1px solid rgba(17, 41, 74, .11);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-sm);
}

.hero__proof-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    color: var(--teal);
    background: rgba(14, 123, 107, .1);
}

.hero__proof-icon--vet {
    color: var(--purple);
    background: rgba(126, 65, 150, .1);
}

.hero__proof-icon svg {
    width: 24px;
    height: 24px;
}

.hero__proof-icon--vet svg {
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero__proof-copy {
    display: block;
    min-width: 0;
    font-size: .9rem;
    line-height: 1.45;
    color: var(--slate);
}

.hero__proof-copy strong {
    display: block;
    margin-bottom: .15rem;
    font-size: 1rem;
    line-height: 1.2;
    color: var(--ink);
}

.hero__play { font-weight: 600; }

.hero__play-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(14, 123, 107, .12);
    color: var(--teal);
}

.hero__play-icon svg { width: 16px; height: 16px; }

/* ---- Visual: mark inside soft neumorphic disc ---- */
.hero__visual {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
}

.hero__disc {
    position: relative;
    z-index: 2;
    width: 76%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffffff, #eef3f8);
    box-shadow:
        24px 24px 70px rgba(17, 41, 74, .14),
        -18px -18px 60px rgba(255, 255, 255, .9),
        inset 0 0 0 1px rgba(255, 255, 255, .6);
    animation: float 8s var(--ease) infinite;
}

.hero__disc img { width: 100%; transform: scale(1.4); }

/* concentric soft halos */
.hero__halo {
    position: absolute;
    border-radius: 50%;
    z-index: 1;
}

.hero__halo--1 {
    inset: 4%;
    background: radial-gradient(circle, transparent 64%, rgba(14, 123, 107, .05) 65%, transparent 67%);
}

.hero__halo--2 {
    inset: -4%;
    border: 1px solid rgba(17, 41, 74, .05);
}

.hero__halo--3 {
    inset: -16%;
    border: 1px solid rgba(17, 41, 74, .035);
}

/* =========================================================
   pagehero.css: inner-page variant of the homepage hero.
   About and Contact reuse the homepage hero markup and tokens
   (sky gradient, display title with gradient accent, halo disc,
   container width aligned with the nav) at a shorter height.
========================================================= */

.hero--page { padding-bottom: var(--space-5); }

.hero--page .hero__inner {
    min-height: 0;
    padding-block: var(--space-4);
}

.hero--page .hero__title {
    font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
    margin-bottom: var(--space-3);
}

.hero--page .hero__sub {
    max-width: 52ch;
    margin-bottom: var(--space-4);
}

.hero--page .hero__visual { max-width: 380px; }

/* ---- About: registration band (navy, like the closing CTA) ---- */
.about-reg {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--r-lg);
    color: var(--white);
    background:
        radial-gradient(120% 140% at 0% 0%, #15406E 0%, var(--navy) 50%, var(--navy-2) 100%);
}

.about-reg__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .12);
}

.about-reg__icon svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.about-reg h3 { margin-bottom: .35rem; color: var(--white); }
.about-reg p { margin: 0; color: rgba(255, 255, 255, .78); line-height: 1.55; }

@media (max-width: 560px) {
    .about-reg { flex-direction: column; align-items: flex-start; padding: var(--space-3); }
}

/* =========================================================
   glance.css: "at a glance" fact block (home).
   Answer-first summary + a bento of verifiable facts, built as
   a <dl> so crawlers and AI answer engines read term/definition
   pairs. Uses the site's tokens: white band, brand hues per
   service (teal / blue / purple), navy card, soft white cards.
========================================================= */

.glance { background: var(--white); }

.glance__summary { margin-top: var(--space-2); }

/* ---- bento grid ---- */
.glance__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-3);
    margin: var(--space-5) 0 0;
}

.glance__grid > * { grid-column: span 12; min-width: 0; }
.glance__grid dd { margin: 0; }

/* screen-reader-only term (the tiles speak for themselves visually) */
.glance__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- shared icon treatment ---- */
.glance svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.glance__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    color: var(--brand, var(--teal));
    background: var(--brand-soft, rgba(14, 123, 107, .1));
}

.glance__icon svg { width: 26px; height: 26px; }

/* ---- service tiles ---- */
.glance__tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.glance__tile {
    --brand: var(--teal);
    --brand-soft: rgba(14, 123, 107, .1);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-3) var(--space-3);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    background:
        radial-gradient(130% 90% at 0% 0%, var(--brand-soft), transparent 60%),
        var(--white);
    box-shadow: var(--shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease;
}

.glance__tile--labs { --brand: var(--blue);   --brand-soft: rgba(42, 120, 188, .1); }
.glance__tile--vet  { --brand: var(--purple); --brand-soft: rgba(126, 65, 150, .1); }

.glance__tile .glance__icon { margin-bottom: var(--space-1); }

.glance__tile strong {
    font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
}

.glance__tile p {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.5;
}

.glance__tile-links {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.1rem;
    margin-top: auto;
    padding-top: var(--space-2);
}

.glance__tile-links a,
.glance__fact a {
    font-weight: 600;
    color: var(--brand, var(--navy));
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color .2s ease;
}

.glance__tile-links a:hover,
.glance__fact a:hover { text-decoration-color: currentColor; }

.glance__note {
    margin: var(--space-2) 0 0;
    font-size: .95rem;
    color: var(--ink-soft);
}

/* ---- generic card ---- */
.glance__card {
    padding: var(--space-4);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    background: var(--bg-soft);
}

.glance__card dt {
    margin-bottom: var(--space-2);
    font-size: clamp(1.1rem, 1.05rem + .25vw, 1.25rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
}

/* ---- areas ---- */
.glance__card--areas { display: flex; flex-direction: column; }
.glance__card--areas dd { margin-block: auto; }

.glance__areas {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.glance__areas li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1.1rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--r-pill);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
    color: var(--navy);
}

.glance__areas li::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 0 4px rgba(14, 123, 107, .15);
}

/* ---- how to book (navy, like the closing CTA) ---- */
.glance__card--book {
    position: relative;
    overflow: hidden;
    border-color: transparent;
    color: var(--white);
    background:
        radial-gradient(120% 140% at 0% 0%, #15406E 0%, var(--navy) 50%, var(--navy-2) 100%);
}

.glance__card--book dt { color: var(--white); }
.glance__card--book dd { color: rgba(255, 255, 255, .78); line-height: 1.55; }

.glance__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: var(--space-2);
}

.glance__actions .btn { flex: 1 1 auto; justify-content: center; }

/* ---- fact cards ---- */
.glance__fact {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    background: var(--white);
    box-shadow: var(--shadow-sm);
}

.glance__fact .glance__icon { margin-bottom: var(--space-1); }

.glance__fact dt {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
}

.glance__fact dd {
    font-size: .98rem;
    color: var(--ink-soft);
    line-height: 1.55;
}

/* ---- emergency strip ---- */
.glance__alert {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid rgba(242, 106, 33, .28);
    border-radius: var(--r-md);
    background: rgba(242, 106, 33, .07);
}

.glance__alert .glance__icon {
    --brand: var(--orange);
    --brand-soft: rgba(242, 106, 33, .14);
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

.glance__alert .glance__icon svg { width: 22px; height: 22px; }

.glance__alert dt { font-weight: 700; color: var(--ink); }
.glance__alert dd { color: var(--ink); }
.glance__alert-text { display: flex; flex-wrap: wrap; gap: .15rem .6rem; }

/* ---- breakpoints ---- */
@media (min-width: 961px) {
    .glance__card--areas { grid-column: span 7; }
    .glance__card--book  { grid-column: span 5; }
    .glance__fact        { grid-column: span 3; }
}

@media (min-width: 561px) and (max-width: 960px) {
    .glance__fact { grid-column: span 6; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .glance__tile:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
    }
}

@media (max-width: 560px) {
    .glance__card { padding: var(--space-3); }
    .glance__alert { align-items: flex-start; }
}

/* =========================================================
   ecosystem.css — Chapter 2 (network expansion) +
   brand chapters 3-6 (Care/Labs/Pharmacy/Wellness)
========================================================= */

.ecosystem {
    position: relative;
    background: var(--bg);
    overflow: hidden;
}

/* soft ambient orbs (decorative) */
.ecosystem::before,
.ecosystem::after {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.ecosystem::before {
    left: -240px;
    top: -160px;
    background: radial-gradient(circle, rgba(14,123,107,.06), transparent 70%);
}

.ecosystem::after {
    right: -260px;
    bottom: -200px;
    background: radial-gradient(circle, rgba(42,120,188,.06), transparent 70%);
}

.ecosystem .container {
    position: relative;
    z-index: 1;
}

.ecosystem__grid {
    margin-top: var(--space-6);
    grid-template-columns: repeat(4, 1fr);
}

.brand-card {
    padding: clamp(2rem, 1.4rem + 2vw, 3.25rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    background: var(--white);
    border-radius: var(--r-lg);
    border: 1px solid var(--glass-border);
    border-top: 4px solid var(--brand, var(--teal));
    box-shadow: var(--shadow-sm);
    will-change: transform;
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}

.brand-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-md);
}

.brand-card--care     { --brand: var(--teal); }
.brand-card--labs     { --brand: var(--blue); }
.brand-card--pharmacy { --brand: var(--purple); }
.brand-card--wellness { --brand: var(--orange); }

/* square badge marks (220x220); the card title carries the brand name */
.brand-card__logo {
    height: 72px;
    width: 72px;
}

.brand-card__title {
    margin-top: var(--space-1);
}

.brand-card__body {
    font-size: 1rem;
    line-height: 1.55;
}

/* ----- Brand chapter (alternating split layout) ----- */
.brand-chapter {
    position: relative;
}

.brand-chapter__inner {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(2.5rem, 1rem + 6vw, 7rem);
    align-items: center;
}

.brand-chapter__inner > .section-head {
    grid-column: 1 / -1;
    margin-bottom: var(--space-5);
}

.brand-chapter--reverse .brand-chapter__inner {
    direction: rtl;
}

.brand-chapter--reverse .brand-chapter__text,
.brand-chapter--reverse .brand-chapter__visual {
    direction: ltr;
}

.brand-chapter__kicker {
    margin-bottom: var(--space-3);
    color: var(--brand, var(--teal));
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: var(--space-2);
    margin-bottom: var(--space-3);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--brand, var(--teal));
    background: color-mix(in srgb, var(--brand, var(--teal)) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand, var(--teal)) 24%, transparent);
    vertical-align: middle;
}

/* pinned to top-right corner of the brand visual */
.status-badge--corner {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 2;
    margin: 0;
    background: color-mix(in srgb, var(--brand, var(--teal)) 14%, white);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.status-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand, var(--teal));
    animation: status-pulse 1.8s ease-in-out infinite;
}

@keyframes status-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .4; transform: scale(.7); }
}

@media (prefers-reduced-motion: reduce) {
    .status-badge::before { animation: none; }
}

.brand-chapter__title {
    margin-bottom: var(--space-3);
}

.brand-chapter__list {
    margin-top: var(--space-4);
    display: grid;
    gap: var(--space-2);
}

.brand-chapter__cta {
    margin-top: var(--space-4);
}

.brand-chapter__item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    color: var(--ink-soft);
}

/* miniature Kamino mark as bullet, centred on the FIRST line of wrapped items */
.brand-chapter__item::before {
    content: "";
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: .2em;
    margin-top: calc((1lh - 18px) / 2);
    background: var(--mark-url) center / contain no-repeat;
}

.brand-chapter__visual {
    position: relative;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    padding: clamp(2rem, 1rem + 4vw, 4rem);
    border-radius: var(--r-xl);
    background:
        radial-gradient(120% 120% at 30% 20%,
            color-mix(in srgb, var(--brand, var(--teal)) 12%, white) 0%,
            var(--white) 70%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

/* portrait brand logos (320x392) — size by height so nothing clips */
.brand-chapter__visual img {
    width: auto;
    height: 100%;
    max-height: 360px;
    max-width: 100%;
}

.brand-chapter__halo {
    position: absolute;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--brand, var(--teal)) 22%, transparent), transparent 68%);
    filter: blur(8px);
    z-index: 0;
}

.brand-chapter__visual img { position: relative; z-index: 1; }

/* headline gradients pick up each chapter's brand hue */
.brand-chapter { --accent: var(--brand, var(--teal)); }

/* Visible status line closing the services section (pre-launch honesty).
   Sits inside the section so the ambient orbs are not clipped at its edge. */
.ecosystem-status {
    max-width: 70ch;
    margin: var(--space-6) auto 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
    color: var(--navy-2);
    font-size: .95rem;
    line-height: 1.65;
    text-align: center;
    text-wrap: balance;
}

.ecosystem-status strong { font-weight: 700; }

.brand-chapter--care     { --brand: var(--teal); }
/* Kamino Vet brand hue = purple, matching the kamino-vet.svg asset. */
.brand-chapter--vet      { --brand: var(--purple); }
/* Kamino Fitness — physical gym; retains the former Wellness orange hue. */
.brand-chapter--fitness  { --brand: var(--orange); }

/* Apple-style alternating bands: white ↔ light grey */
.brand-chapter--care,
.brand-chapter--fitness { background: var(--white); }

.brand-chapter--vet { background: var(--bg); }

.brand-chapter__actions{
    display:flex;
    align-items:center;
    gap:32px;
    margin-top:40px;
}

.brand-chapter__cta{
    align-self:flex-start;
}

/* =========================================================
   technology.css — Chapter 7: "The Platform"
   Light radial diagram: central Kamino mark with six
   platform cards on a hexagonal ring, dashed connectors.
========================================================= */

.tech {
    background: var(--white);
}

/* ---- Radial stage ---- */
.tech__os {
    position: relative;
    width: min(880px, 100%);
    aspect-ratio: 1 / 1;
    margin: var(--space-6) auto 0;
    /* container so ring radius can be expressed in % of the FIELD (cqmin) */
    container-type: size;
    /* card ring radius + card size as tokens so layout stays in sync */
    --ring: 38cqmin;
    --card-w: clamp(150px, 13vw + 60px, 210px);
}

/* ---- Dashed ring + spokes ---- */
.tech__web {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 0;
}

.tech__ring {
    fill: none;
    /* teal to match section accent (was purple) */
    stroke: rgba(14, 123, 107, .28);
    stroke-width: 1.4;
    stroke-dasharray: 2 8;
    stroke-linecap: round;
    animation: ring-flow 14s linear infinite;
}

.tech__spoke {
    stroke: rgba(14, 123, 107, .3);
    stroke-width: 1.4;
    stroke-dasharray: 2 7;
    stroke-linecap: round;
    stroke-dashoffset: 120;
    transition: stroke-dashoffset 1.1s var(--ease-out);
}

/* after reveal, dashes flow toward the hub */
.tech__os.is-visible .tech__spoke {
    stroke-dashoffset: 0;
    animation: spoke-flow 1.4s linear infinite 1.1s;
}

@keyframes ring-flow {
    to { stroke-dashoffset: -100; }   /* dashes travel around the ring */
}

@keyframes spoke-flow {
    to { stroke-dashoffset: -9; }     /* one dash period → seamless loop */
}

@media (prefers-reduced-motion: reduce) {
    .tech__ring, .tech__os.is-visible .tech__spoke { animation: none; }
}

.tech__dots circle {
    fill: var(--teal);
    stroke: rgba(14, 123, 107, .15);
    stroke-width: 6;
    opacity: 0;
    transition: opacity .5s var(--ease-out) .6s;
}

.tech__os.is-visible .tech__dots circle { opacity: 1; }

/* teal connection dot where each spoke meets the centre */
.tech__os::before,
.tech__os::after { content: none; }

/* ---- Central hub ---- */
.tech__hub {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 26%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    background: var(--white);
    border-radius: 50%;
    box-shadow:
        0 30px 80px rgba(17, 41, 74, .12),
        inset 0 0 0 1px rgba(17, 41, 74, .03);
    z-index: 2;
}

/* soft concentric halo behind hub */
.tech__hub::after {
    content: "";
    position: absolute;
    inset: -34%;
    border-radius: 50%;
    background:
        radial-gradient(circle,
            rgba(14, 123, 107, .10) 0%,
            rgba(14, 123, 107, .04) 42%,
            transparent 66%);
    z-index: -1;
    animation: breathe 6s var(--ease) infinite;
}

.tech__hub img { width: 66%; }

/* ---- Platform cards on the ring ---- */
.tech__card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--card-w);
    /* place card centre on the ring, upright (origin at centre point) */
    transform-origin: 0 0;
    transform:
        rotate(var(--a))
        translateY(calc(-1 * var(--ring)))
        rotate(calc(-1 * var(--a)))
        translate(-50%, -50%);
    padding: clamp(1rem, .6rem + 1vw, 1.6rem);
    text-align: center;
    background: var(--white);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    z-index: 3;
    /* gentle entrance + idle float */
    will-change: transform;
}

.tech__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-2);
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--teal);
    background:
        radial-gradient(circle at 50% 35%, rgba(14, 123, 107, .12), rgba(14, 123, 107, .06));
}

.tech__icon svg { width: 30px; height: 30px; }

.tech__card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
}

.tech__card-body {
    font-size: .9rem;
    line-height: 1.4;
    color: var(--ink-soft);
}

/* =========================================================
   philosophy.css — Chapter 8: One Health statement
========================================================= */

.philosophy {
    position: relative;
    text-align: center;
    overflow: hidden;
    background: var(--bg);
}

.philosophy::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(900px, 90vw);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(14,123,107,.06), transparent 66%);
    pointer-events: none;
}

/* full content width so 4 pillars fit; the statement keeps its own measure */
.philosophy__inner {
    position: relative;
    margin-inline: auto;
}

.philosophy__statement {
    font-size: clamp(2.2rem, 1.2rem + 4.5vw, 5rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: var(--tracking-tight);
    max-width: 980px;
    margin-inline: auto;
}

.philosophy__statement .text-gradient { display: block; }

.philosophy__sub {
    margin: var(--space-5) auto 0;
    max-width: 56ch;
}

.philosophy__pillars {
    margin-top: var(--space-6);
    grid-template-columns: repeat(3, 1fr);
    text-align: left;
}

.pillar {
    padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
    background: var(--white);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

.pillar__mark {
    width: 56px;
    height: 56px;
    margin-bottom: var(--space-3);
    display: grid;
    place-items: center;
    border-radius: 50%;
    /* section accent = teal (one hue per section); icon SHAPE differentiates each pillar */
    color: var(--teal);
    background:
        radial-gradient(circle at 50% 35%, rgba(14, 123, 107, .14), rgba(14, 123, 107, .06));
}

.pillar__mark svg { width: 28px; height: 28px; }

.pillar__title {
    margin-bottom: var(--space-2);
    font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem);
}

.pillar__body {
    font-size: 1rem;
    color: var(--ink-soft);
}

/* =========================================================
   partners.css — Chapter 9: partner ecosystem +
   Chapter 10: CTA
========================================================= */

.partners {
    background: var(--white);
}

/* ---- Partner orbit: patient at centre, expert nodes on a dashed ring ----
   Shares the radial layout language of The Platform, but centres the PATIENT
   and orbits partner experts — a distinct story from the product-role hub. */
.partner-orbit {
    position: relative;
    width: min(760px, 100%);
    aspect-ratio: 1 / 1;
    margin: var(--space-6) auto 0;
    container-type: size;
    --ring: 40cqmin;
    --node-w: clamp(140px, 12vw + 56px, 190px);
}

/* dashed ring + spokes */
.partner-orbit__web {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 0;
}

.partner-orbit__ring {
    fill: none;
    stroke: rgba(14, 123, 107, .28);
    stroke-width: 1.4;
    stroke-dasharray: 2 8;
    stroke-linecap: round;
    animation: ring-flow 16s linear infinite;
}

.partner-orbit__spoke {
    stroke: rgba(14, 123, 107, .3);
    stroke-width: 1.4;
    stroke-dasharray: 2 7;
    stroke-linecap: round;
    stroke-dashoffset: 120;
    transition: stroke-dashoffset 1.1s var(--ease-out);
}

/* after reveal, dashes flow FROM experts toward the patient */
.partner-orbit.is-visible .partner-orbit__spoke {
    stroke-dashoffset: 0;
    animation: spoke-flow 1.4s linear infinite 1.1s;
}

.partner-orbit__dots circle {
    fill: var(--teal);
    stroke: rgba(14, 123, 107, .15);
    stroke-width: 6;
    opacity: 0;
    transition: opacity .5s var(--ease-out) .6s;
}
.partner-orbit.is-visible .partner-orbit__dots circle { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .partner-orbit__ring,
    .partner-orbit.is-visible .partner-orbit__spoke { animation: none; }
}

/* centre hub = the patient */
.partner-orbit__hub {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    align-content: center;   /* keep icon + label together, not pushed to the edges */
    gap: 8px;
    text-align: center;
    background: var(--white);
    border-radius: 50%;
    box-shadow:
        0 30px 80px rgba(17, 41, 74, .12),
        inset 0 0 0 1px rgba(17, 41, 74, .03);
    z-index: 2;
}

.partner-orbit__hub::after {
    content: "";
    position: absolute;
    inset: -30%;
    border-radius: 50%;
    background:
        radial-gradient(circle,
            rgba(14, 123, 107, .10) 0%,
            rgba(14, 123, 107, .04) 42%,
            transparent 66%);
    z-index: -1;
    animation: breathe 6s var(--ease) infinite;
}

.partner-orbit__hub-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: var(--teal);
    background: radial-gradient(circle at 50% 35%, rgba(14, 123, 107, .16), rgba(14, 123, 107, .06));
}
.partner-orbit__hub-icon svg { width: 26px; height: 26px; }

.partner-orbit__hub-label {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: var(--tracking-tight);
}

/* expert nodes on the ring */
.po-node {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--node-w);
    transform-origin: 0 0;
    transform:
        rotate(var(--a))
        translateY(calc(-1 * var(--ring)))
        rotate(calc(-1 * var(--a)))
        translate(-50%, -50%);
    padding: clamp(1rem, .6rem + 1vw, 1.5rem);
    text-align: center;
    background: var(--white);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    z-index: 3;
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}

.po-node__icon {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--space-2);
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--teal);
    background: radial-gradient(circle at 50% 35%, rgba(14, 123, 107, .12), rgba(14, 123, 107, .06));
}
.po-node__icon svg { width: 28px; height: 28px; }

.po-node__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 4px;
}

.po-node__text {
    font-size: .88rem;
    line-height: 1.4;
    color: var(--ink-soft);
}

/* small screens: ring collapses to a 2-up grid (no absolute orbit) */
@media (max-width: 640px) {
    .partner-orbit {
        aspect-ratio: auto;
        container-type: normal;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
        max-width: 480px;
    }
    .partner-orbit__web { display: none; }
    .partner-orbit__hub {
        position: static;
        transform: none;
        width: auto;
        aspect-ratio: auto;
        flex-direction: row;
        grid-auto-flow: column;
        justify-content: center;
        grid-column: 1 / -1;
        padding: var(--space-3);
        border-radius: var(--r-lg);
    }
    .partner-orbit__hub::after { content: none; }
    .po-node {
        position: static;
        transform: none;
        width: auto;
        padding: 1rem .75rem;
    }
    .po-node__icon { width: 48px; height: 48px; }
    .po-node__icon svg { width: 24px; height: 24px; }
    .po-node__title { font-size: 1rem; }
    .po-node__text { font-size: .82rem; }
}

/* ---- Bottom strip ---- */
.partner-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    max-width: 720px;
    margin: var(--space-6) auto 0;
    padding: var(--space-4) var(--space-5);
    background: var(--white);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    color: var(--ink-soft);
    font-size: 1.1rem;
}

.partner-foot__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(14, 123, 107, .1);
    color: var(--teal);
}
.partner-foot__icon svg { width: 26px; height: 26px; }
.partner-foot p { flex: 1 1 auto; border-left: 1px solid var(--line); padding-left: var(--space-4); }
.partner-foot .btn { flex: 0 0 auto; white-space: nowrap; }
.partner-foot strong { color: var(--teal); font-weight: 700; }


/* ---- CTA ---- */
.cta {
    position: relative;
    overflow: hidden;
    color: var(--white);
    text-align: center;
    background:
        radial-gradient(120% 140% at 50% 0%, #15406E 0%, var(--navy) 45%, var(--navy-2) 100%);
}

.cta__inner {
    max-width: 820px;
    margin-inline: auto;
    position: relative;
    z-index: 1;
}

.cta__title {
    margin-bottom: var(--space-3);
}

.cta__sub {
    text-wrap: balance;
    color: rgba(255, 255, 255, .75);
    margin: 0 auto var(--space-5);
    max-width: 52ch;
}

.cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
}

.cta__note {
    max-width: 60ch;
    margin: var(--space-4) auto 0;
    color: rgba(255, 255, 255, .7);
    font-size: .95rem;
    line-height: 1.6;
}

.cta__mark {
    height: 72px;
    width: auto;
    max-width: 70%;
    margin: 0 auto var(--space-4);
    opacity: .95;
}

.cta__glow {
    position: absolute;
    left: 50%;
    bottom: -40%;
    width: 80%;
    aspect-ratio: 1;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(14,123,107,.4), transparent 62%);
    filter: blur(20px);
    pointer-events: none;
}

/* =========================================================
   timeline.css — numbered steps ("How it works").
   Horizontal stepper on wide screens, vertical rail on narrow.
========================================================= */

.timeline {
    --dot: 18px;
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--space-4);
    max-width: 1100px;
    margin: var(--space-6) auto 0;
}

.timeline__item {
    position: relative;
    padding-top: calc(var(--dot) + var(--space-3));
}

/* connector: one segment from each dot to the next, so any step count works */
.timeline__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--dot) / 2 - 1px);
    left: var(--dot);
    right: calc(-1 * var(--space-4));
    height: 2px;
    background: linear-gradient(90deg, var(--teal), var(--blue));
}

.timeline__dot {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--dot);
    height: var(--dot);
    border-radius: 50%;
    background: var(--white);
    border: 3px solid var(--teal);
    box-shadow: 0 0 0 6px rgba(14, 123, 107, .1);
}

.timeline__year {
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: var(--space-1);
}

.timeline__title {
    margin-bottom: var(--space-1);
}

.timeline__body {
    font-size: 1rem;
    color: var(--ink-soft);
    max-width: 30ch;
}

/* narrow: vertical rail on the left */
@media (max-width: 880px) {
    .timeline {
        grid-auto-flow: row;
        gap: var(--space-5);
        max-width: 560px;
    }

    .timeline__item:not(:last-child)::after {
        top: var(--dot);
        bottom: calc(-1 * var(--space-5));
        left: calc(var(--dot) / 2 - 1px);
        right: auto;
        width: 2px;
        height: auto;
        background: linear-gradient(var(--teal), var(--blue));
    }

    .timeline__item {
        padding-top: 0;
        padding-left: calc(var(--dot) + var(--space-3));
    }

    .timeline__year {
        line-height: var(--dot);
    }

    .timeline__body {
        max-width: none;
    }
}

/* =========================================================
   footer.css
========================================================= */

.footer {
    background: var(--navy-2);
    color: var(--white);
    padding-top: var(--space-7);
}

.footer__top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    padding-bottom: var(--space-6);
}

.footer__brand img {
    height: var(--logo-h-lg);
    width: auto;
    margin-bottom: var(--space-3);
}

.footer__tagline {
    color: rgba(255, 255, 255, .6);
    max-width: 34ch;
}

.footer__col h4 {
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .04em;
    margin-bottom: var(--space-3);
}

.footer__col li {
    margin-bottom: var(--space-2);
    /* plain-text items (e.g. "coming soon") read as muted, not as a hovered link */
    color: rgba(255, 255, 255, .45);
}

.footer__col a {
    color: rgba(255, 255, 255, .65);
    transition: color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
    display: inline-block;
}

.footer__col a:hover {
    color: var(--white);
    transform: translateX(5px);
}

/* Legal links row — visually distinct from the Brands/Ecosystem/Company columns */
.footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-4) 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.footer__legal a {
    color: rgba(255, 255, 255, .8);
    transition: color var(--dur-fast) var(--ease);
}

.footer__legal a:hover { color: var(--white); }

.footer__legal .sep {
    color: rgba(255, 255, 255, .3);
    user-select: none;
}

/* when the row wraps, separators dangle at line ends — rely on the gap instead */
@media (max-width: 720px) {
    .footer__legal .sep { display: none; }
    .footer__legal { gap: var(--space-2) var(--space-4); }
}

/* Standing regulatory / emergency disclaimer — readable, not a light-grey afterthought */
.footer__disclaimer {
    padding: var(--space-4) 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .78);
    font-size: .9rem;
    line-height: 1.6;
    max-width: 90ch;
    margin-inline: auto;
    text-align: center;
}

.footer__bottom {
    padding: var(--space-4) 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    color: rgba(255, 255, 255, .5);
    font-size: .9rem;
}

.footer__bottom span { display: block; }

/* =========================================================
   animations.css — keyframes + scroll-reveal primitives
   Only transform / opacity / filter animated.
========================================================= */

/* ---- Scroll reveal (driven by IntersectionObserver) ---- */
.reveal {
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: transform, opacity;
}

.js-ready .reveal:not(.is-visible) {
    opacity: 0;
    transform: translateY(34px);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

.js-ready .reveal--scale:not(.is-visible) {
    transform: translateY(34px) scale(.96);
}

.js-ready .reveal--left:not(.is-visible)  { transform: translateX(-40px); }
.js-ready .reveal--right:not(.is-visible) { transform: translateX(40px); }

.reveal--left.is-visible,
.reveal--right.is-visible { transform: none; }

/* stagger children */
.reveal-group.is-visible > * {
    animation: rise var(--dur-slow) var(--ease-out) both;
}
.reveal-group.is-visible > *:nth-child(1) { animation-delay: 0ms; }
.reveal-group.is-visible > *:nth-child(2) { animation-delay: 90ms; }
.reveal-group.is-visible > *:nth-child(3) { animation-delay: 180ms; }
.reveal-group.is-visible > *:nth-child(4) { animation-delay: 270ms; }
.reveal-group.is-visible > *:nth-child(5) { animation-delay: 360ms; }
.reveal-group.is-visible > *:nth-child(6) { animation-delay: 450ms; }
.reveal-group.is-visible > *:nth-child(7) { animation-delay: 540ms; }
.reveal-group.is-visible > *:nth-child(8) { animation-delay: 630ms; }

@keyframes rise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes pulse-line {
    0%, 100% { opacity: .35; }
    50%      { opacity: 1; }
}

@keyframes breathe {
    0%, 100% { transform: scale(1);   opacity: .9; }
    50%      { transform: scale(1.06); opacity: 1; }
}

@keyframes cue {
    0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
    40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
    60%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
    100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ---- Reduced motion: disable all motion, reveal everything ---- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .reveal { opacity: 1 !important; transform: none !important; }
}

/* =========================================================
   responsive.css — breakpoint overrides
   Narrative preserved; layouts redesigned not just stacked.
========================================================= */

/* ---- Laptop ---- */
@media (max-width: 1100px) {
    .ecosystem__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- Tablet ---- */
@media (max-width: 880px) {

    .nav__links,
    .nav__actions .btn {
        display: none;
    }

    .nav__toggle {
        display: flex;
    }

    /* mobile menu panel — drops below the floating pill */
    .nav__links {
        position: absolute;
        top: calc(100% + var(--space-2));
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 4px;
        padding: 10px;
        border-radius: var(--r-lg);
        background: var(--glass-strong);
        backdrop-filter: blur(22px) saturate(180%);
        -webkit-backdrop-filter: blur(22px) saturate(180%);
        border: 1px solid var(--glass-border);
        box-shadow: var(--shadow-md);
        transform: translateY(-14px);
        opacity: 0;
        pointer-events: none;
        transition: transform var(--dur-fast) var(--ease),
            opacity var(--dur-fast) var(--ease);
    }

    .nav__links.is-open {
        display: flex;
        transform: none;
        opacity: 1;
        pointer-events: auto;
    }

    .nav__link {
        padding: 13px 16px;
        width: 100%;
        border-radius: var(--r-md);
    }

    .nav__link::after {
        display: none;
    }

    /* partner web → simple stack, hide radial connectors */
    .partner-web {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: var(--space-4);
    }

    .partner-web__links,
    .partner-web__ring,
    .pw-card__dot {
        display: none;
    }

    .pw-card {
        max-width: 360px;
    }

    .pw-card--tl,
    .pw-card--tr,
    .pw-card--bl,
    .pw-card--br {
        grid-area: auto;
    }

    .partner-foot {
        flex-direction: column;
        text-align: center;
        gap: var(--space-3);
    }

    .partner-foot p {
        border-left: none;
        padding-left: 0;
    }

    .partner-hub {
        grid-area: auto;
        order: -1;
        margin-bottom: var(--space-3);
    }

    /* hero stacks: copy first, visual below, centred */
    .hero__inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--space-5);
        min-height: 0;
    }

    .hero__sub {
        margin-inline: auto;
    }

    .hero__actions {
        justify-content: center;
    }

    .hero__proofs {
        margin-inline: auto;
        text-align: left;
    }

    .hero__visual {
        order: 2;
        max-width: 420px;
    }

    /* brand chapters become single column, visual first */
    .brand-chapter__inner,
    .brand-chapter--reverse .brand-chapter__inner {
        grid-template-columns: 1fr;
        direction: ltr;
    }

    .brand-chapter__visual {
        order: -1;
    }

    /* tech radial diagram → simple card grid (hex won't fit) */
    .tech__os {
        aspect-ratio: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
        container-type: normal;
    }

    .tech__web,
    .tech__hub {
        display: none;
    }

    .tech__card {
        position: static;
        width: auto;
        transform: none;
    }

    .philosophy__pillars {
        grid-template-columns: 1fr;
    }

    .footer__top {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---- Mobile ---- */
@media (max-width: 560px) {

    .ecosystem__grid {
        grid-template-columns: 1fr;
    }

    .tech__os {
        gap: .75rem;
    }

    .tech__card {
        padding: 1rem .75rem;
    }

    .tech__icon {
        width: 48px;
        height: 48px;
    }

    .tech__icon svg { width: 24px; height: 24px; }
    .tech__card-title { font-size: 1rem; }
    .tech__card-body { font-size: .82rem; }

    .nav__inner,
    .nav--scrolled .nav__inner {
        height: 64px;
        padding-inline: var(--space-3) var(--space-2);
    }

    .nav__brand img {
        height: 50px;
    }

    /* decorative disc: keep it, but don't let it eat a whole screen */
    .hero__visual {
        max-width: 260px;
    }

    .hero__proofs {
        grid-template-columns: 1fr;
    }

    .footer__top {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer__brand img,
    .footer__tagline {
        margin-inline: auto;
    }

    .footer__bottom {
        justify-content: center;
        text-align: center;
    }

    .hero__actions .btn {
        width: 100%;
        justify-content: center;
    }

    .brand-chapter__actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .brand-chapter__cta {
        width: 100%;
    }

}

/* Home care pages. Shared by the English, Sinhala and Tamil editions. */
section[id], main[id] { scroll-margin-top: 112px; }
.btn__icon { width: 22px; height: 22px; flex: 0 0 auto; }
.btn--whatsapp { background: var(--teal); color: var(--white); }
.btn--whatsapp:hover { background: #096354; }
.hero__proofs--3 { grid-template-columns: 1fr; max-width: 550px; }
.hero__proof-icon--labs { color: var(--blue); background: rgba(42,120,188,.1); }
.ecosystem__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.brand-card--vet { --brand: var(--purple); }
.brand-card .status-badge { margin: 0; }
.brand-card__title { margin-bottom: -12px; }
.brand-card__tag { font-size: 1rem; font-weight: 600; color: var(--brand, var(--teal)); }
.status-badge--soon { color: var(--slate); background: var(--bg); border-color: var(--line); }
.status-badge--soon::before { background: var(--slate); animation: none; }
.brand-card__list { margin: 0; font-size: .95rem; }
.brand-card__links { margin-top: auto; padding-top: 16px; display: flex; gap: 18px; flex-wrap: wrap; }
.text-link { color: var(--teal); text-decoration: underline; text-underline-offset: 5px; font-weight: 600; font-size: 1rem; }
.abroad { background: var(--white); overflow-x: hidden; overflow-x: clip; }
.abroad--page { padding-top: 180px; }
.timeline { list-style: none; }
.abroad__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.abroad .h2 { margin-block: 20px 28px; font-size: clamp(2.3rem, 4vw, 4rem); }
.abroad__cta { margin-top: 32px; }
.abroad__panel { padding: clamp(24px, 4vw, 44px); border-radius: var(--r-lg); background: var(--navy); color: white; box-shadow: var(--shadow-md); }
.abroad__panel-title { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9fd6ca; margin-bottom: 24px; }
/* "bridge": you abroad -> our team -> your parent, joined by labelled arrows */
.bridge { list-style: none; }
.bridge__stop { display: flex; align-items: center; gap: 16px; }
.bridge__icon { flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.bridge__icon svg { width: 24px; height: 24px; }
.bridge__icon--kamino { background: #fff; border-color: #fff; }
.bridge__icon--kamino img { width: 32px; height: 32px; }
.bridge__icon--home { background: #dcf3eb; color: var(--navy); border-color: #dcf3eb; }
.bridge__icon--small { width: 36px; height: 36px; }
.bridge__icon--small svg { width: 18px; height: 18px; }
.bridge__text { display: grid; gap: 2px; line-height: 1.4; }
.bridge__text strong { font-size: 1.05rem; }
.bridge__text span { font-size: .9rem; color: rgba(255,255,255,.72); }
.bridge__step { position: relative; margin: 6px 0 6px 23px; padding: 16px 0 16px 34px; border-left: 2px dashed #6ebbac; font-size: .88rem; font-weight: 600; color: #9fd6ca; }
.bridge__step::after { content: ""; position: absolute; left: -7px; bottom: -4px; border: 6px solid transparent; border-top: 8px solid #6ebbac; border-bottom: 0; }
.bridge__return { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18); font-size: .92rem; color: rgba(255,255,255,.8); }
.bridge__return strong { color: #fff; }
.how { background: var(--bg); }
.philosophy__pillars--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wa-float { position: fixed; bottom: max(22px, env(safe-area-inset-bottom)); right: 22px; z-index: 900; display: flex; align-items: center; gap: 10px; padding: 15px 22px; min-height: 54px; background: var(--teal); color: white; border: 2px solid white; border-radius: var(--r-pill); box-shadow: var(--shadow-md); font-size: .95rem; font-weight: 700; }
.wa-float:hover { background: #096354; }
.wa-float svg { width: 26px; height: 26px; }
.footer { padding-bottom: 110px; }
.footer__col h3 { font-size: .95rem; font-weight: 700; letter-spacing: .04em; margin-bottom: var(--space-3); }
.page-hero { background: linear-gradient(160deg, #dfefec, #f7fafc); padding: 180px 0 80px; }
.page-hero__inner { max-width: 1000px; }
.page-hero h1 { font-size: clamp(2.7rem, 5.3vw, 5rem); line-height: 1.12; margin-block: 24px; }
.page-hero .lead { max-width: 58ch; margin-bottom: 30px; }
.page-hero__note { margin-top: 24px; font-size: .95rem; color: var(--slate); }
.service-detail { background: var(--white); padding-block: 80px; }
.service-detail__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.service-detail h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.25; margin-bottom: 24px; }
.service-detail p { margin-bottom: 20px; }
.service-detail .brand-chapter__list { margin: 0; }
.service-detail__aside { padding: 32px; background: var(--bg); border-radius: var(--r-lg); }
.related-services { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 32px; }
.legal { padding-top: 170px; }
.legal__inner a { overflow-wrap: anywhere; }
@media (max-width: 1100px) {
  .ecosystem__grid--3 { grid-template-columns: 1fr; }
  .philosophy__pillars--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav__link { padding-inline: 10px; font-size: .85rem; }
}
@media (max-width: 880px) {
  .abroad__inner, .service-detail__grid { grid-template-columns: 1fr; }
  .hero__proofs--3 { max-width: 550px; }
}
@media (max-width: 560px) {
  .philosophy__pillars--4 { grid-template-columns: 1fr; }
  .wa-float { right: 14px; padding: 13px; }
  .wa-float__label { display: none; }
  .page-hero { padding-top: 164px; }
  .service-detail__aside { padding: 24px; }
  .brand-card { padding: 28px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Section band overrides: keep neighbouring chapters on alternating backgrounds. */
.chapter--white { background: var(--white); }
.chapter--grey { background: var(--bg); }

/* =========================================================
   services.css — photo-led services grid (home + about)
   and photo variant of the service-page hero.
   Kamino Care = wide feature card with a 3-photo mosaic;
   Labs / Vet / Pharmacy = media cards underneath.
========================================================= */

.services {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.brand-card--pharmacy { --brand: var(--purple); }

/* ---- shared card chrome ---- */
.svc-feature,
.svc-card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    /* `translate`, not `transform`: the reveal stagger animation holds transform */
    transition: translate var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}

.svc-feature:hover,
.svc-card:hover {
    translate: 0 -6px;
    box-shadow: var(--shadow-md);
}

/* brand hairline along the top edge */
.svc-feature::before,
.svc-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--brand, var(--teal));
    z-index: 2;
}

.svc-title { margin-bottom: 2px; }

.svc-body {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

.svc-feature .brand-card__tag,
.svc-card .brand-card__tag {
    margin-bottom: var(--space-2);
}

/* ---- Kamino Care feature ---- */
.svc-feature {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: clamp(1.5rem, 1rem + 2vw, 3rem);
    padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
    align-items: center;
}

.svc-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.svc-head__logo { width: 56px; height: 56px; }
.svc-head .status-badge { margin: 0; }

.svc-list {
    margin-top: var(--space-3);
    font-size: .95rem;
    gap: .75rem;
}

.svc-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    margin-top: var(--space-4);
}

/* doctor large on the left, nurse + caregiver stacked on the right */
.svc-mosaic {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: .75rem;
    height: clamp(380px, 22rem + 8vw, 520px);
}

.svc-photo {
    position: relative;
    margin: 0;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--bg);
}

.svc-photo--main { grid-row: 1 / -1; }

.svc-photo picture,
.svc-photo img,
.svc-card__media picture,
.svc-card__media img,
.page-hero__photo picture,
.page-hero__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.svc-photo img { object-position: 50% 25%; transition: transform 1.2s var(--ease-out); }
.svc-feature:hover .svc-photo img { transform: scale(1.04); }

.svc-photo figcaption {
    position: absolute;
    left: .75rem;
    bottom: .75rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--navy);
    font-size: .85rem;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}

.svc-photo figcaption::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--teal);
}

/* ---- media cards (Labs / Vet / Pharmacy) ---- */
.svc-card {
    display: flex;
    flex-direction: column;
}

.svc-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--bg);
}

.svc-card__media img {
    object-position: 50% 30%;
    transition: transform 1.2s var(--ease-out);
}

.svc-card:hover .svc-card__media picture img { transform: scale(1.05); }

.svc-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    padding: var(--space-4) clamp(1.25rem, 1rem + 1vw, 2rem) clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

.svc-card__body .status-badge { margin: 0 0 var(--space-1); }

.svc-card__link { margin-top: auto; padding-top: var(--space-2); }

/* Labs: step chips over the photo tell the home-collection story */
.svc-card__media--labs::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 45%;
    background: linear-gradient(transparent, rgba(8, 27, 54, .45));
    pointer-events: none;
}

.svc-art__steps {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: .9rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    padding-inline: .75rem;
}

.svc-art__steps li {
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .9);
    color: var(--navy);
    font-size: .75rem;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

/* Pharmacy is not open: soften the photo so it never reads as a live service */
.svc-card--soon .svc-card__media img { filter: saturate(.55) brightness(1.04); }

.svc-card__ribbon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 6px 14px;
    border-radius: var(--r-pill);
    background: var(--navy);
    color: var(--white);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* the three media cards share one row; the feature spans it above */
@media (max-width: 1100px) {
    .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc-card--soon { grid-column: 1 / -1; flex-direction: row; }
    .svc-card--soon .svc-card__media { aspect-ratio: auto; flex: 0 0 42%; }
}

@media (max-width: 880px) {
    .svc-feature { grid-template-columns: 1fr; }
    .svc-mosaic { order: -1; height: clamp(300px, 60vw, 440px); }
}

@media (max-width: 640px) {
    .services { grid-template-columns: 1fr; }
    .svc-card--soon { flex-direction: column; }
    .svc-card--soon .svc-card__media { aspect-ratio: 4 / 3; flex: none; }
    .svc-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 1.4fr 1fr; height: 420px; }
    .svc-photo--main { grid-row: auto; grid-column: 1 / -1; }
}

/* ---- service-page hero with photo (nursing / caregivers / vet) ---- */
.page-hero--photo .page-hero__inner {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: center;
}

.page-hero--photo h1 { font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); }

.page-hero__photo {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 5;
    max-height: 600px;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.page-hero__photo img { object-position: 50% 25%; }

@media (max-width: 880px) {
    .page-hero--photo .page-hero__inner { grid-template-columns: 1fr; }
    .page-hero__photo { aspect-ratio: 4 / 3; max-height: none; }
}

/* =========================================================
   faq.css — "Questions" section (home). Native <details>
   accordion: works without JS, keyboard and screen-reader
   friendly. Intro sticks beside the list on wide screens.
========================================================= */

.faq__inner {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: start;
}

.faq__intro {
    position: sticky;
    top: 120px;
}

.faq__intro .overline { margin-bottom: var(--space-3); }
.faq__intro .h2 { margin-bottom: var(--space-3); }
.faq__intro .lead { max-width: 36ch; }

.faq__contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-4);
}

.faq__list {
    display: grid;
    gap: .75rem;
}

.faq__item {
    background: var(--white);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}

.faq__item[open] {
    border-color: color-mix(in srgb, var(--teal) 30%, transparent);
    box-shadow: var(--shadow-md);
}

.faq__q {
    position: relative;
    display: block;
    padding: 1.25rem 4rem 1.25rem 1.5rem;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    border-radius: var(--r-md);
}

.faq__q::-webkit-details-marker { display: none; }

/* plus that turns into a minus */
.faq__q::before,
.faq__q::after {
    content: "";
    position: absolute;
    right: 1.5rem;
    top: 50%;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--teal);
    transition: transform var(--dur-fast) var(--ease);
}

.faq__q::after { transform: rotate(90deg); }
.faq__item[open] .faq__q::after { transform: rotate(0deg); }

.faq__q:hover { color: var(--teal); }

.faq__a {
    padding: 0 1.5rem 1.4rem;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink-soft);
    max-width: 62ch;
}

@media (max-width: 880px) {
    .faq__inner { grid-template-columns: 1fr; }
    .faq__intro { position: static; }
}

@media (max-width: 560px) {
    .faq__q { padding: 1.1rem 3.25rem 1.1rem 1.15rem; font-size: 1rem; }
    .faq__q::before, .faq__q::after { right: 1.15rem; }
    .faq__a { padding: 0 1.15rem 1.2rem; }
}

/* =========================================================
   contact.css — /contact/ page: message form + quick-contact
   cards. Form posts to the contact worker at /api/contact.
========================================================= */

.contact-hero { padding-bottom: var(--space-5); }

.contact {
    background: var(--bg);
    padding-block: var(--space-6) var(--chapter);
}

.contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 1rem + 3vw, 4rem);
    align-items: start;
}

/* ---- form ---- */
.contact-form {
    display: grid;
    gap: var(--space-3);
    padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
    background: var(--white);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

.contact-form__title {
    font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.contact-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.field {
    display: grid;
    gap: 6px;
    align-content: start;
}

.field label {
    font-size: .95rem;
    font-weight: 600;
    color: var(--ink);
}

.field__optional { font-weight: 400; color: var(--ink-soft); }

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: var(--white);
    border: 1px solid #C9CED6;
    border-radius: var(--r-sm);
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}

.field textarea { min-height: 150px; resize: vertical; line-height: 1.55; }

.field select {
    appearance: none;
    padding-right: 42px;
    background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2311294A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 4px rgba(14, 123, 107, .15);
}

.field [aria-invalid] {
    border-color: #B42318;
    box-shadow: 0 0 0 4px rgba(180, 35, 24, .08);
}

.field__hint {
    font-size: .85rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

.field__error {
    font-size: .88rem;
    font-weight: 600;
    color: #B42318;
}

.field__error:empty { display: none; }

/* honeypot: off-screen, not display:none (some bots skip hidden fields) */
.contact-form__trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-form__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

.contact-form__submit { min-height: 52px; padding-inline: 32px; }
.contact-form__submit:disabled { opacity: .65; cursor: progress; transform: none; }

.contact-form__privacy {
    flex: 1 1 220px;
    font-size: .88rem;
    color: var(--ink-soft);
}

.contact-form__privacy a,
.contact-aside__emergency a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }

.contact-form__status {
    padding: 14px 16px;
    border-radius: var(--r-sm);
    font-weight: 600;
    line-height: 1.5;
}

.contact-form__status:focus { outline: none; }
.contact-form__status--ok { background: #E3F4EE; color: #075E52; border: 1px solid #A8DCCB; }
.contact-form__status--error { background: #FDECEA; color: #8A1C12; border: 1px solid #F3B8B1; }

/* ---- quick-contact cards ---- */
.contact-aside {
    display: grid;
    gap: .75rem;
}

.contact-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: var(--white);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    transition: translate var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}

a.contact-card:hover { translate: 0 -3px; box-shadow: var(--shadow-md); }

.contact-card__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--teal);
    background: rgba(14, 123, 107, .1);
}

.contact-card__icon svg { width: 24px; height: 24px; }

.contact-card__text { display: grid; gap: 2px; line-height: 1.4; }
.contact-card__text strong { font-size: 1.05rem; color: var(--ink); }
.contact-card__text span { font-size: .92rem; color: var(--ink-soft); }

.contact-card--primary { background: var(--teal); border-color: var(--teal); }
.contact-card--primary .contact-card__icon { background: rgba(255, 255, 255, .18); color: var(--white); }
.contact-card--primary .contact-card__text strong,
.contact-card--primary .contact-card__text span { color: var(--white); }

.contact-card--info { box-shadow: none; background: var(--bg-soft); }

.contact-aside__emergency {
    margin-top: var(--space-1);
    padding: 14px 16px;
    border-left: 3px solid #B42318;
    background: #FDF3F2;
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--ink);
}

@media (max-width: 880px) {
    .contact__grid { grid-template-columns: 1fr; }
    .contact-aside { order: -1; }
}

@media (max-width: 560px) {
    .contact-form__row { grid-template-columns: 1fr; }
    .contact-form__submit { width: 100%; justify-content: center; }
}