/* ==========================================================================
   Advitya Healthcares — premium light front page

   Palette taken straight from the logo: burgundy and deep crimson from the
   mark, coral and warm orange from the rays, on a white ground.

   The mix matters more than the colours. Red is the brand but not the
   surface: the page is white, deep crimson carries the actions, the CTA
   band and the footer, and the coral and orange appear only at the size of
   an icon or a rule. Headings are charcoal rather than red, which is what
   stops a specialist hospital reading as an emergency banner.

   Everything here is scoped to body.hv-light so the other pages are untouched.
   ========================================================================== */

body.hv-light {
    /* Every value here now comes from css/brand.css, which is sampled from
       the logo. Kept as local aliases so the existing rules in this file
       (and the five pages that use them) go on reading --brand, --gold and
       the rest without a rename sweep. Change the theme in brand.css. */

    --ink: var(--adv-ink);
    --ink-2: var(--adv-ink-2);
    --ink-body: var(--adv-ink-body);

    /* Brand, darkest first */
    --maroon: var(--adv-crimson-900);
    --brand: var(--adv-crimson-700);
    --brand-red: var(--adv-crimson-600);
    --ember: var(--adv-ember-500);
    --gold: var(--adv-warm-300);
    --gold-deep: var(--adv-warm-deep);
    --gold-soft: var(--adv-warm-soft);

    /* Surfaces: white, then warm neutrals faint enough to read as warmth
       rather than as pink */
    --pearl: var(--adv-white);
    --blush: var(--adv-blush);
    --blush-deep: var(--adv-blush-deep);
    --line: var(--adv-line);
    --line-soft: var(--adv-line-soft);

    --lift-1: var(--adv-lift-1);
    --lift-2: var(--adv-lift-2);
    --lift-3: var(--adv-lift-3);

    --grad-brand: var(--adv-grad-brand);
    --ease: var(--adv-ease);
}

body.hv-light {
    background-color: var(--pearl);
    background-image:
        radial-gradient(1200px 640px at 8% -6%, rgba(240, 216, 210, .40), transparent 60%),
        radial-gradient(940px 520px at 96% 2%, rgba(243, 226, 214, .34), transparent 58%);
}

body.hv-light ::selection {
    background: rgba(142, 27, 46, .14);
}

/* ==========================  Header: utility bar  ======================== */
/* The whole header travels as one fixed block, so the navbar itself is
   static inside it — otherwise the two would stack on top of each other. */
.hv-headwrap {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
}

body.hv-light .navbar {
    position: static;
}

.hv-topbar {
    background: linear-gradient(100deg, var(--ink) 0%, var(--maroon) 58%, #8E1B2E 100%);
    color: rgba(255, 255, 255, .92);
    font-size: .8rem;
    transition: max-height .4s var(--ease), opacity .3s ease;
    max-height: 46px;
    overflow: hidden;
}

/* Reclaim the height once the visitor starts reading */
.hv-headwrap.is-tight .hv-topbar {
    max-height: 0;
    opacity: 0;
}

.hv-topbar-in {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    height: 46px;
    max-width: 1560px;
}

.hv-tb-left {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .72rem;
    color: var(--gold-soft);
    white-space: nowrap;
}

.hv-tb-left i {
    color: var(--gold);
}

.hv-tb-right {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    white-space: nowrap;
}

.hv-tb-right a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .9);
    font-weight: 500;
}

.hv-tb-right a i {
    color: var(--gold);
    font-size: .9em;
}

/* The WhatsApp mark in the top bar keeps its own green, like every other
   WhatsApp affordance on the site. */
.hv-tb-right a i.fa-whatsapp {
    color: var(--adv-wa);
}

.hv-tb-right a:hover {
    color: #fff;
}

.hv-tb-sos {
    padding: 5px 14px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    font-weight: 700 !important;
    /* the emergency number is the one thing on this bar people look for */
    font-size: .92rem;
    letter-spacing: .01em;
}

/* the "24×7 Emergency" label stays quieter than the number beside it */
.hv-tb-sos .hv-tb-txt {
    font-size: .84rem;
    font-weight: 600;
}

.hv-tb-sos:hover {
    background: rgba(255, 255, 255, .2);
}

/* ==========================  Header: main bar  =========================== */
/* Wider than the 1200px body container — the nav simply needs the room. */
body.hv-light .nav-container {
    /* full width: the logo sits near the left edge and the actions near
       the right, rather than both floating in from a centred column */
    max-width: none;
    padding-left: clamp(14px, 2.4vw, 46px);
    padding-right: clamp(16px, 2.2vw, 40px);
    height: 126px;
}

body.hv-light .navbar.scrolled .nav-container {
    height: 108px;
}

body.hv-light .logo-link {
    margin-left: 4px;
}

body.hv-light .logo img {
    height: 110px;
}

body.hv-light .navbar.scrolled .logo img {
    height: 92px;
}

body.hv-light .nav-links {
    gap: 1.1rem;
}

/* same size as every other page's menu, so the two headers read alike */
body.hv-light .nav-links>a,
body.hv-light .nav-links .dropbtn {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.012em;
}

/* Actions */
.hv-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hv-act {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: .6rem 1.05rem;
    border-radius: 50px;
    font-family: var(--font-heading);
    font-size: .83rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid var(--line);
    color: var(--maroon);
    background: #fff;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s ease, border-color .3s ease, color .3s ease;
}

.hv-act i {
    font-size: .9em;
}

.hv-act:hover {
    transform: translateY(-2px);
    box-shadow: var(--lift-2);
}

.hv-act-loc:hover {
    border-color: rgba(201, 66, 57, .5);
    color: var(--brand);
    background: var(--blush);
}

/* style.css hides the Locations text link because the pill covers it. Once
   the pill collapses, the drawer has to carry the link instead. */
@media (max-width: 980px) {
    body.hv-light .nav-links.open .nav-loc {
        display: block;
    }
}

.hv-act-book {
    background: var(--grad-brand);
    border-color: transparent;
    color: #fff;
    padding: .68rem 1.35rem;
    box-shadow: 0 10px 24px -12px rgba(139, 16, 20, .7);
}

.hv-act-book:hover {
    color: #fff;
    box-shadow: 0 16px 32px -12px rgba(139, 16, 20, .75);
}

.hv-act-book::after {
    display: none;
}

/* ==============================  Hero  ================================== */
.hv-hero {
    position: relative;
    padding: 178px 0 96px;
    overflow: hidden;
}

.hv-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Slow Ken Burns drift. Starting scale is above 1 so the frame never exposes
   an edge as it moves; transform only, so it stays on the compositor. */
.hv-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .28;
    transform: scale(1.08);
    will-change: transform;
    animation: hvHeroPan 42s cubic-bezier(.4, 0, .2, 1) infinite alternate;
}

@keyframes hvHeroPan {
    from {
        transform: scale(1.08) translate3d(0, 0, 0);
    }

    to {
        transform: scale(1.14) translate3d(-1.6%, -1.1%, 0);
    }
}

/* Pearl wash so the photograph reads as texture, never as subject */
.hv-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(820px 460px at 78% 8%, rgba(217, 105, 79, .14), transparent 62%),
        linear-gradient(102deg, rgba(255, 255, 255, .985) 0%, rgba(255, 255, 255, .95) 40%, rgba(251, 245, 243, .87) 70%, rgba(245, 232, 228, .80) 100%);
}

/* Aurora: two soft brand-coloured clouds drifting behind the copy.
   A parent ::after paints after its children, so this sits above the wash but
   still below .hv-hero-inner (z-index 1). Overscanned by 18% so the blurred
   edges never enter frame. */
.hv-hero::after,
.hv-hero::before {
    content: '';
    position: absolute;
    inset: -18%;
    z-index: 0;
    pointer-events: none;
    filter: blur(46px);
    will-change: transform, opacity;
}

.hv-hero::before {
    background:
        radial-gradient(38% 44% at 72% 26%, rgba(255, 138, 76, .30), transparent 68%),
        radial-gradient(30% 34% at 88% 62%, rgba(233, 162, 59, .22), transparent 70%);
    animation: hvHeroAurora 34s cubic-bezier(.45, 0, .3, 1) infinite alternate;
}

.hv-hero::after {
    background:
        radial-gradient(34% 40% at 24% 74%, rgba(228, 87, 78, .20), transparent 70%),
        radial-gradient(26% 30% at 8% 30%, rgba(228, 87, 78, .13), transparent 72%);
    /* Offset phase and a different period, so the two never beat in sync */
    animation: hvHeroAuroraAlt 46s cubic-bezier(.45, 0, .3, 1) infinite alternate;
}

@keyframes hvHeroAurora {
    from {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: .85;
    }

    to {
        transform: translate3d(-5%, 3.5%, 0) scale(1.16);
        opacity: 1;
    }
}

@keyframes hvHeroAuroraAlt {
    from {
        transform: translate3d(0, 0, 0) scale(1.1);
        opacity: 1;
    }

    to {
        transform: translate3d(4.5%, -3%, 0) scale(1);
        opacity: .8;
    }
}

.hv-hero-inner {
    position: relative;
    z-index: 1;
}

.hv-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    gap: 56px;
    align-items: center;
}

.hv-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--maroon);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 50px;
    padding: 8px 20px;
    margin-bottom: 22px;
    box-shadow: var(--lift-1);
}

.hv-kicker::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ember);
    box-shadow: 0 0 0 4px rgba(255, 138, 76, .22);
}

.hv-hero h1 {
    font-size: 3.15rem;
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: 20px;
    letter-spacing: -.022em;
    max-width: 15ch;
}

/* The emphasis line carries the logo gradient */
.hv-hero h1 .hv-brand {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--brand);
}

.hv-hero p.hv-lede {
    font-size: 1.1rem;
    line-height: 1.78;
    max-width: 560px;
    color: var(--ink-body);
    margin-bottom: 28px;
}

.hv-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 30px;
}

body.hv-light .btn-premium {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: .95rem 1.9rem;
    border-radius: 50px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: .98rem;
    background: var(--grad-brand);
    box-shadow: 0 14px 30px -14px rgba(139, 16, 20, .8);
}

body.hv-light .btn-premium:hover {
    box-shadow: 0 20px 38px -14px rgba(139, 16, 20, .85);
}

.hv-ghost {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: .95rem 1.7rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 50px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: .95rem;
    color: var(--maroon);
    box-shadow: var(--lift-1);
    transition: translate .25s var(--ease), box-shadow .25s var(--ease), border-color .25s ease, color .25s ease;
}

.hv-ghost i {
    color: var(--brand);
    font-size: .9em;
}

/* translate rather than transform: the entrance animation holds transform,
   and the two compose instead of the animation winning */
.hv-ghost:hover {
    border-color: rgba(201, 66, 57, .5);
    color: var(--brand);
    translate: 0 -2px;
    box-shadow: var(--lift-2);
}

/* Reassurance line under the buttons */
.hv-assure {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    font-size: .86rem;
    color: var(--text-muted);
}

.hv-assure span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hv-assure i {
    color: var(--gold);
    font-size: .82rem;
}

/* ----------  Hero media  ---------- */
.hv-hero-media {
    position: relative;
}

.hv-portrait {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    background: linear-gradient(165deg, var(--blush) 0%, var(--pearl) 60%);
    border: 1px solid var(--line);
    box-shadow: var(--lift-3);
    aspect-ratio: 5 / 5.9;
}

.hv-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 2%;
}

/* Warm scrim so the caption reads cleanly over the white coat */
.hv-portrait::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 52%, rgba(64, 16, 15, .55) 78%, rgba(48, 10, 10, .88) 100%);
}

.hv-portrait-cap {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 20px;
    z-index: 2;
    color: #fff;
}

.hv-portrait-cap strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.16rem;
    line-height: 1.3;
}

.hv-portrait-cap span {
    display: block;
    font-size: .84rem;
    color: rgba(255, 255, 255, .82);
    margin-top: 3px;
}

/* Explore button under the portrait card: opens the full profile page */
.hv-explore {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin-top: 18px;
    padding: 14px 22px;
    border-radius: 999px;
    background: linear-gradient(100deg, var(--ink) 0%, var(--maroon) 58%, #8E1B2E 100%);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 14px 30px -14px rgba(94, 16, 25, .55);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s;
}

.hv-explore i {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    color: var(--maroon);
    font-size: .8rem;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

.hv-explore:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 20px 38px -16px rgba(94, 16, 25, .65);
}

.hv-explore:hover i {
    transform: translateX(4px);
}

/* Floating credential chips */
.hv-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 11px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    border: 1px solid var(--line);
    border-radius: 15px;
    padding: 11px 16px;
    box-shadow: var(--lift-2);
    z-index: 3;
}

.hv-chip i {
    color: var(--brand);
    font-size: 1rem;
}

.hv-chip b {
    display: block;
    font-family: var(--font-heading);
    font-size: .88rem;
    color: var(--ink);
    line-height: 1.25;
}

.hv-chip small {
    font-size: .72rem;
    color: var(--text-muted);
}

.hv-chip-1 {
    top: 34px;
    left: -34px;
}

.hv-chip-2 {
    bottom: 118px;
    right: -30px;
}

/* ==========================================================================
   Hero motion
   Everything here animates transform, opacity, background-position or
   box-shadow only, so the whole hero stays on the compositor. Periods are
   long and mutually prime, which keeps the layers from ever beating in sync
   and reading as a loop. The reduced-motion block at the end of this file
   switches all of it off.
   ========================================================================== */

/* The kicker's dot breathes a ring outward, like a live status light */
.hv-kicker::before {
    animation: hvDotPulse 3.2s cubic-bezier(.2, .6, .35, 1) infinite;
}

@keyframes hvDotPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 138, 76, .5); }
    60% { box-shadow: 0 0 0 10px rgba(255, 138, 76, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 138, 76, 0); }
}

/* The brand gradient drifts across "PancreaCare" instead of sitting still.
   Oversizing the gradient is what gives it somewhere to travel. */
.hv-hero h1 .hv-brand {
    background-size: 220% 100%;
    animation: hvBrandDrift 11s ease-in-out infinite alternate;
}

@keyframes hvBrandDrift {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}

/* A warm bloom behind the portrait, breathing slowly. z-index -1 keeps it
   under the card but inside .hv-hero-inner's stacking context. */
.hv-hero-media::before {
    content: '';
    position: absolute;
    inset: 8% -7% -5%;
    z-index: -1;
    border-radius: 36px;
    background: radial-gradient(58% 54% at 50% 45%, rgba(228, 87, 78, .26), transparent 72%);
    filter: blur(40px);
    will-change: transform, opacity;
    animation: hvMediaGlow 13s ease-in-out infinite alternate;
}

@keyframes hvMediaGlow {
    from { transform: scale(.94); opacity: .75; }
    to { transform: scale(1.06); opacity: 1; }
}

/* Slow push into the portrait, matching the background's Ken Burns pace */
.hv-portrait img {
    will-change: transform;
    animation: hvPortraitDrift 28s ease-in-out infinite alternate;
}

@keyframes hvPortraitDrift {
    from { transform: scale(1); }
    to { transform: scale(1.06); }
}

/* Chips drift on their own clocks. Hover pauses the drift and lifts via the
   `scale` property, which composes with the animated transform instead of
   fighting it. */
.hv-chip {
    will-change: transform;
    animation: hvChipFloat 7.5s ease-in-out infinite alternate;
    transition: scale .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
}

.hv-chip-2 {
    animation-duration: 9.5s;
    animation-delay: -4s;
}

@keyframes hvChipFloat {
    from { transform: translate3d(0, 5px, 0); }
    to { transform: translate3d(0, -7px, 0); }
}

.hv-chip:hover {
    animation-play-state: paused;
    scale: 1.035;
    box-shadow: var(--lift-3);
    border-color: rgba(201, 66, 57, .34);
}

/* A light sweeps across the primary button on hover, once per pass */
body.hv-light .btn-premium {
    position: relative;
    overflow: hidden;
    transition: translate .25s var(--ease), box-shadow .25s var(--ease);
}

body.hv-light .btn-premium > * {
    position: relative;
    z-index: 1;
}

body.hv-light .btn-premium::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -45%;
    width: 32%;
    pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: translate3d(0, 0, 0);
}

body.hv-light .btn-premium:hover::after {
    animation: hvSheen .9s var(--ease);
}

@keyframes hvSheen {
    to { transform: translate3d(460%, 0, 0); }
}

/* ----------  Finder bar  ---------- */
.hv-finder {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 16px;
    align-items: end;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 22px 24px;
    box-shadow: var(--lift-3);
    margin-top: 54px;
    position: relative;
}

/* Gold hairline along the top edge — the logo's ray colour, used sparingly */
.hv-finder::before {
    content: '';
    position: absolute;
    inset: 0 24px auto 24px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: .7;
}

.hv-field label {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 8px;
}

.hv-field select {
    width: 100%;
    padding: .78rem 1rem;
    font-family: var(--font-sans);
    font-size: .95rem;
    color: var(--text-main);
    background: var(--pearl);
    border: 1px solid var(--line);
    border-radius: 12px;
    outline: none;
    cursor: pointer;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.hv-field select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(228, 87, 78, .14);
}

.hv-find-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: .82rem 1.9rem;
    font-family: var(--font-heading);
    font-size: .95rem;
    font-weight: 600;
    color: #fff;
    background: var(--grad-brand);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 12px 26px -14px rgba(139, 16, 20, .8);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s ease;
}

.hv-find-btn:hover {
    transform: translateY(-2px);
    filter: saturate(1.08);
    box-shadow: 0 18px 34px -14px rgba(139, 16, 20, .85);
}

/* ===========================  Trust strip  ============================== */
.hv-trust {
    padding: 0 0 68px;
}

.hv-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--lift-2);
    overflow: hidden;
}

.hv-stat {
    padding: 30px 28px;
    border-right: 1px solid var(--line-soft);
    position: relative;
}

.hv-stat:last-child {
    border-right: none;
}

.hv-stat b {
    display: block;
    font-family: var(--font-heading);
    font-size: 2.15rem;
    line-height: 1;
    letter-spacing: -.02em;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.hv-stat span {
    display: block;
    font-size: .93rem;
    font-weight: 600;
    color: var(--ink);
}

.hv-stat small {
    display: block;
    font-size: .82rem;
    color: var(--text-muted);
    margin-top: 3px;
    line-height: 1.5;
}

/* =======================  Section furniture  ============================ */
.hv-eyebrow {
    display: block;
    text-align: center;
    font-size: .73rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--brand);
    margin-bottom: 12px;
}

.hv-title {
    font-size: 2.5rem;
    text-align: center;
    color: var(--ink);
    margin-bottom: 14px;
    letter-spacing: -.02em;
}

.hv-sub {
    text-align: center;
    font-size: 1.04rem;
    line-height: 1.75;
    color: var(--text-muted);
    max-width: 660px;
    margin: 0 auto 46px;
}

.hv-eyebrow.left,
.hv-title.left {
    text-align: left;
}

.hv-sub.left {
    text-align: left;
    margin-left: 0;
}

/* ======================  Patient dashboard  ============================= */
.hv-dash {
    padding: 76px 0;
}

.hv-dash-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.hv-tile {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 26px 28px;
    box-shadow: var(--lift-1);
    transition: transform .35s var(--ease), border-color .35s ease, box-shadow .35s var(--ease);
}

.hv-tile:hover {
    transform: translateY(-4px);
    border-color: rgba(228, 87, 78, .38);
    box-shadow: var(--lift-3);
}

/* Primary action spans the row and carries the brand wash */
.hv-tile-wide {
    grid-column: 1 / -1;
    align-items: center;
    background: linear-gradient(112deg, rgba(255, 138, 76, .14) 0%, rgba(253, 243, 240, .7) 40%, #fff 74%);
    border-color: rgba(228, 87, 78, .3);
}

.hv-ti {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--blush);
    color: var(--brand);
    font-size: 1.1rem;
    transition: background .35s ease, color .35s ease;
}

.hv-tile:hover .hv-ti {
    background: var(--grad-brand);
    color: #fff;
}

.hv-ti-alert {
    background: rgba(228, 87, 78, .12);
    color: var(--brand-red);
}

.hv-tile h3 {
    font-size: 1.06rem;
    color: var(--ink);
    margin-bottom: 5px;
}

.hv-tile p {
    font-size: .89rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}

.hv-tarrow {
    margin-left: auto;
    color: var(--brand);
    font-size: .9rem;
    transition: transform .35s var(--ease);
}

.hv-tile-wide:hover .hv-tarrow {
    transform: translateX(5px);
}

/* ==========================  Specialities  ============================== */
.hv-spec {
    padding: 76px 0;
    background:
        linear-gradient(180deg, var(--blush) 0%, rgba(253, 243, 240, .35) 100%);
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}

.hv-spec-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.hv-spec-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--lift-1);
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
}

/* Media band. The source images are a mix of illustrations and photographs at
   different aspect ratios, so the frame is fixed and the image is cropped. */
.hv-spec-img {
    position: relative;
    height: 178px;
    overflow: hidden;
    background: linear-gradient(160deg, var(--blush) 0%, var(--pearl) 100%);
    border-bottom: 1px solid var(--line-soft);
}

.hv-spec-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease);
}

.hv-spec-card:hover .hv-spec-img img {
    transform: scale(1.06);
}

/* Warm scrim at the foot of the image so the icon badge always has contrast */
.hv-spec-img::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 58%;
    background: linear-gradient(180deg, transparent, rgba(64, 16, 15, .28));
    pointer-events: none;
}

/* Third motion layer: a light sweep crosses the image on hover, on top of the
   gradient rule wiping in and the image itself zooming. */
.hv-spec-img::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 45%;
    z-index: 1;
    transform: skewX(-18deg);
    /* Warm-tinted, not plain white — several of these images are illustrations
       on a near-white ground, where a white sheen would be invisible. */
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 138, 76, .16) 28%,
            rgba(255, 255, 255, .62) 50%,
            rgba(201, 66, 57, .18) 72%,
            transparent 100%);
    pointer-events: none;
}

.hv-spec-card:hover .hv-spec-img::before {
    animation: hvSpecSheen .9s var(--ease) forwards;
}

@keyframes hvSpecSheen {
    to {
        left: 115%;
    }
}

/* The badge lifts and settles as the sheen passes */
.hv-spec-card:hover .hv-si {
    animation: hvSpecBadge .5s var(--ease);
}

@keyframes hvSpecBadge {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    45% {
        transform: translateY(-5px) scale(1.08);
    }
}

.hv-spec-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 26px 24px;
}

.hv-spec-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--grad-brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--ease);
}

.hv-spec-card:hover::before {
    transform: scaleX(1);
}

.hv-spec-card:hover {
    transform: translateY(-5px);
    border-color: rgba(228, 87, 78, .35);
    box-shadow: var(--lift-3);
}

/* Badge sits inside the image — the card clips its overflow, so it cannot
   straddle the seam without being cut in half. */
.hv-spec-img .hv-si {
    position: absolute;
    left: 18px;
    bottom: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: #fff;
    color: var(--brand);
    font-size: 1.08rem;
    box-shadow: 0 0 0 1px var(--line), var(--lift-2);
    transition: background .35s ease, color .35s ease;
}

.hv-spec-card:hover .hv-si {
    background: var(--grad-brand);
    color: #fff;
}

.hv-spec-card h3 {
    font-size: 1.08rem;
    color: var(--ink);
    margin: 0 0 10px;
}

.hv-spec-card p {
    font-size: .89rem;
    line-height: 1.62;
    color: var(--text-muted);
    margin: 0 0 16px;
    flex: 1;
}

.hv-spec-more {
    font-size: .82rem;
    font-weight: 600;
    color: var(--brand);
}

.hv-spec-more i {
    font-size: .7rem;
    margin-left: 5px;
    transition: transform .35s var(--ease);
}

.hv-spec-card:hover .hv-spec-more i {
    transform: translateX(4px);
}

/* ======================  Centres of excellence  ========================= */
.hv-coe {
    padding: 76px 0;
}

/* the PancreaCare wordmark stands in for the section title */
.hv-coe-brand {
    line-height: 0;
}

.hv-coe-brand img {
    display: inline-block;
    height: 69px;
    width: auto;
    max-width: 100%;
}

.hv-coe-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.hv-coe-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--lift-1);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
    display: flex;
    flex-direction: column;
}

.hv-coe-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--lift-3);
}

.hv-coe-img {
    position: relative;
    height: 186px;
    background: linear-gradient(160deg, var(--blush) 0%, var(--pearl) 100%);
    overflow: hidden;
    border-bottom: 1px solid var(--line-soft);
}

.hv-coe-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease);
}

/* Illustrations need breathing room; photographs should fill the frame */
.hv-coe-img.is-art img {
    object-fit: contain;
    padding: 14px;
}

.hv-coe-card:hover .hv-coe-img img {
    transform: scale(1.05);
}

.hv-coe-body {
    padding: 22px 24px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.hv-coe-body h3 {
    font-size: 1.12rem;
    color: var(--ink);
    margin-bottom: 8px;
}

.hv-coe-body p {
    font-size: .9rem;
    line-height: 1.68;
    color: var(--text-muted);
    margin-bottom: 16px;
    flex: 1;
}

.hv-coe-body a {
    font-size: .85rem;
    font-weight: 600;
    color: var(--brand);
}

.hv-coe-body a i {
    font-size: .7rem;
    margin-left: 5px;
    transition: transform .35s var(--ease);
}

.hv-coe-card:hover .hv-coe-body a i {
    transform: translateX(4px);
}

/* =========================  Luxury suites  ============================== */
.hv-suites {
    padding: 76px 0;
    background: linear-gradient(180deg, rgba(251, 227, 194, .28) 0%, var(--pearl) 70%);
    border-top: 1px solid var(--line-soft);
}

.hv-suite-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.hv-suite-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 32px 32px 28px;
    box-shadow: var(--lift-1);
    transition: transform .4s var(--ease), border-color .4s ease, box-shadow .4s var(--ease);
}

.hv-suite-card:hover {
    transform: translateY(-6px);
    border-color: rgba(233, 162, 59, .55);
    box-shadow: var(--lift-3);
}

/* The featured tier picks up the gold from the logo rays */
.hv-suite-card.is-feature {
    border-color: rgba(233, 162, 59, .6);
    background: linear-gradient(162deg, var(--gold-soft) 0%, #fff 52%);
}

.hv-suite-tag {
    align-self: flex-start;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--maroon);
    background: var(--blush);
    border: 1px solid var(--line);
    border-radius: 50px;
    padding: 5px 13px;
    margin-bottom: 18px;
}

.hv-suite-card.is-feature .hv-suite-tag {
    background: #fff;
    border-color: rgba(233, 162, 59, .55);
    color: var(--gold-deep);
}

.hv-suite-card h3 {
    font-size: 1.36rem;
    color: var(--ink);
    margin-bottom: 10px;
}

.hv-suite-card p {
    font-size: .94rem;
    line-height: 1.74;
    color: var(--text-muted);
    margin-bottom: 18px;
}

.hv-suite-list {
    margin: 0 0 20px;
    padding: 0;
    display: grid;
    gap: 8px;
    flex: 1;
}

.hv-suite-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .88rem;
    color: var(--ink-body);
}

.hv-suite-list i {
    color: var(--gold);
    font-size: .74rem;
    margin-top: .38em;
}

.hv-suite-card>a {
    font-size: .88rem;
    font-weight: 600;
    color: var(--brand);
}

.hv-suite-card>a i {
    font-size: .72rem;
    margin-left: 6px;
    transition: transform .35s var(--ease);
}

.hv-suite-card:hover>a i {
    transform: translateX(4px);
}

/* =============================  Doctors  ================================ */
.hv-docs {
    padding: 76px 0;
    background: var(--blush);
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}

/* Four cards in a 1200px container left the type cramped, so this section
   gets a wider container and a step up in every size. */
body.hv-light .hv-docs>.container {
    max-width: 1340px;
}

/* All four cards share one height and one baseline for the closing link */
body.hv-light .hv-docs .team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
    align-items: stretch;
    justify-items: center;
}

body.hv-light .hv-docs .team-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--lift-1);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s ease;
}

body.hv-light .hv-docs .team-card:hover {
    transform: translateY(-6px);
    border-color: rgba(228, 87, 78, .35);
    box-shadow: var(--lift-3);
}

body.hv-light .hv-docs .team-card.is-lead {
    border-color: rgba(233, 162, 59, .5);
}

/* The portrait files are circular cut-outs on a pale disc, so the premium
   treatment is a better circle — not a rectangle that would frame the disc. */
body.hv-light .hv-docs .team-img-wrapper {
    width: 190px;
    height: 190px;
    margin: 6px auto 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 32%, #fff 0%, var(--blush) 72%);
    overflow: visible;
    box-shadow:
        0 0 0 5px #fff,
        0 0 0 6px var(--line),
        0 18px 30px -16px rgba(120, 60, 55, .45);
}

/* Brand ring that draws itself in behind the portrait on hover */
body.hv-light .hv-docs .team-img-wrapper::before {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    background: conic-gradient(from 210deg,
            var(--maroon), var(--brand), var(--ember), var(--gold), var(--maroon));
    opacity: 0;
    transition: opacity .5s var(--ease);
    z-index: 0;
}

body.hv-light .hv-docs .team-card:hover .team-img-wrapper::before {
    opacity: .9;
}

/* Mask the ring into a hairline: white disc sits on top of the gradient */
body.hv-light .hv-docs .team-img-wrapper::after {
    inset: -9px;
    background: var(--pearl);
    opacity: 1;
    animation: none;
    z-index: 0;
}

body.hv-light .hv-docs .team-card:hover .team-img-wrapper::after {
    opacity: 1;
    animation: none;
}

body.hv-light .hv-docs .team-img-wrapper img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    filter: saturate(.92) contrast(1.03);
    transition: transform .55s var(--ease), filter .55s ease;
}

body.hv-light .hv-docs .team-card:hover .team-img-wrapper img {
    transform: scale(1.05);
    filter: saturate(1.08) contrast(1.05);
}

/* The lead consultant's ring stays lit, in the logo's gold */
body.hv-light .hv-docs .team-card.is-lead .team-img-wrapper {
    box-shadow:
        0 0 0 5px #fff,
        0 0 0 6px rgba(233, 162, 59, .6),
        0 18px 30px -16px rgba(120, 60, 55, .45);
}

body.hv-light .hv-docs .team-card {
    padding: 34px 26px 28px;
}

body.hv-light .hv-docs .team-info {
    padding: 0;
    flex: 1;
}

body.hv-light .hv-docs .team-info h3 {
    font-size: 1.26rem;
    line-height: 1.3;
    margin-bottom: 10px;
}

body.hv-light .hv-docs .team-role {
    display: inline-block;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand);
    background: var(--blush);
    border-radius: 50px;
    padding: 6px 15px;
    margin-bottom: 14px;
}

body.hv-light .hv-docs .team-org {
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--ink);
    margin-bottom: 8px;
}

body.hv-light .hv-docs .team-spec {
    font-size: .92rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin-bottom: 8px;
}

body.hv-light .hv-docs .team-creds {
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: 1px dashed var(--line);
    display: grid;
    gap: 8px;
    text-align: left;
}

body.hv-light .hv-docs .team-creds li {
    position: relative;
    padding-left: 18px;
    font-size: .88rem;
    font-weight: 500;
    line-height: 1.55;
    color: var(--ink-body);
}

/* style.css hides this bullet; the left-aligned list needs it back */
body.hv-light .hv-docs .team-creds li::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: .55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
}

body.hv-light .hv-docs .team-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0 0;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
    font-size: .94rem;
    font-weight: 600;
    color: var(--brand);
}

body.hv-light .hv-docs .team-card:hover .team-link i {
    transform: translateX(4px);
}

body.hv-light .hv-docs .team-link i {
    font-size: .74rem;
    transition: transform .35s var(--ease);
}

.hv-docs-more {
    text-align: center;
    margin-top: 38px;
}

/* ==============================  About  ================================= */
.hv-about {
    padding: 76px 0;
}

.hv-about-grid {
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.hv-about-media {
    position: relative;
    border-radius: 24px;
    padding: 22px;
    background: radial-gradient(circle at 50% 42%, var(--blush) 0%, var(--pearl) 74%);
    border: 1px solid var(--line);
    box-shadow: var(--lift-2);
}

.hv-about-media img {
    width: 100%;
    height: auto;
}

.hv-about-body p {
    font-size: 1.02rem;
    line-height: 1.86;
    color: var(--ink-body);
    margin-bottom: 16px;
}

/* Pull-quote treatment for the founding line */
.hv-quote {
    border-left: 3px solid var(--gold);
    padding: 4px 0 4px 20px;
    margin: 4px 0 22px;
    font-family: var(--font-heading);
    font-size: 1.12rem;
    line-height: 1.6;
    color: var(--ink);
    font-weight: 500;
}

.hv-textlink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--brand);
}

.hv-textlink i {
    font-size: .75rem;
    transition: transform .35s var(--ease);
}

.hv-textlink:hover i {
    transform: translateX(4px);
}

/* ============================  Locations  =============================== */
body.hv-light .locations {
    padding: 76px 0;
    background: var(--blush);
    border-top: 1px solid var(--line-soft);
}

.hv-loc-layout {
    display: grid;
    grid-template-columns: minmax(min(340px, 100%), 430px) 1fr;
    gap: 28px;
    align-items: start;
}

body.hv-light .loc-list {
    max-height: 640px;
    overflow-y: auto;
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}

body.hv-light .loc-list::-webkit-scrollbar {
    width: 6px;
}

body.hv-light .loc-list::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 10px;
}

body.hv-light .loc-city {
    display: block;
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--brand);
    margin: 22px 0 12px;
}

body.hv-light .loc-city:first-child {
    margin-top: 0;
}

body.hv-light .loc-card {
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid transparent;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 12px;
    box-shadow: var(--lift-1);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease, background .3s ease;
}

body.hv-light .loc-card:hover {
    border-left-color: var(--ember);
    transform: translateX(3px);
    box-shadow: var(--lift-2);
}

body.hv-light .loc-card.is-active {
    border-left-color: var(--brand);
    background: linear-gradient(100deg, var(--blush) 0%, #fff 62%);
    box-shadow: var(--lift-2);
}

body.hv-light .loc-card h3 {
    font-size: 1.04rem;
    color: var(--maroon);
}

body.hv-light .loc-map {
    height: 640px;
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--lift-2);
    position: sticky;
    top: 110px;
    background: #fff;
}

/* Small India map inset above the list */
.hv-loc-inset {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 14px 16px 10px;
    margin-bottom: 18px;
    box-shadow: var(--lift-1);
    display: flex;
    align-items: center;
    gap: 16px;
}

.hv-loc-inset img {
    width: 96px;
    flex: 0 0 96px;
}

.hv-loc-inset p {
    font-size: .86rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}

.hv-loc-inset b {
    display: block;
    font-family: var(--font-heading);
    color: var(--ink);
    font-size: .98rem;
    margin-bottom: 4px;
}

/* ==========================  Testimonials  ============================== */
.hv-testi {
    padding: var(--adv-sec-y) 0 calc(var(--adv-sec-y) + 10px);
    background:
        radial-gradient(700px 380px at 82% 0%, rgba(255, 138, 76, .12), transparent 62%),
        var(--pearl);
    border-top: 1px solid var(--line-soft);
}

body.hv-light .testimonials-swiper {
    padding-bottom: 54px;
}

/* Equal-height slides so the cards line up whatever the quote length */
body.hv-light .testimonials-swiper .swiper-wrapper {
    align-items: stretch;
}

body.hv-light .testimonials-swiper .swiper-slide {
    height: auto;
    display: flex;
}

body.hv-light .testimonial-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    margin: 0;
    text-align: left;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 34px 32px 30px;
    box-shadow: var(--lift-1);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s ease;
}

body.hv-light .testimonial-card:hover {
    transform: translateY(-5px);
    border-color: rgba(228, 87, 78, .32);
    box-shadow: var(--lift-3);
}

/* Oversized quote mark, kept faint so it never competes with the words */
body.hv-light .testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: 6px;
    right: 24px;
    font-family: Georgia, serif;
    font-size: 5.4rem;
    line-height: 1;
    color: rgba(201, 66, 57, .1);
}

body.hv-light .testimonial-card .stars {
    color: var(--gold);
    font-size: 1rem;
    margin-bottom: 16px;
}

body.hv-light .testimonial-card .quote {
    font-size: 1rem;
    font-style: normal;
    line-height: 1.8;
    color: var(--ink-body);
    margin-bottom: 22px;
    flex: 1;
}

body.hv-light .testimonial-card .author {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
    font-size: .94rem;
    color: var(--ink);
}

body.hv-light .testimonial-card .author::before {
    content: '';
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--grad-brand);
}

body.hv-light .swiper-pagination-bullet-active {
    background: var(--brand);
}

/* ==========================  Closing CTA  =============================== */
.hv-cta-band {
    position: relative;
    padding: var(--adv-sec-y) 0;
    background: linear-gradient(112deg, var(--ink) 0%, var(--maroon) 52%, #8E1B2E 100%);
    color: #fff;
    overflow: hidden;
}

.hv-cta-band::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(600px 320px at 88% 18%, rgba(255, 138, 76, .3), transparent 62%);
    pointer-events: none;
}

.hv-cta-in {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.hv-cta-band h2 {
    font-size: 2.15rem;
    line-height: 1.2;
    letter-spacing: -.02em;
    margin-bottom: 12px;
}

.hv-cta-band p {
    font-size: 1.02rem;
    line-height: 1.72;
    color: rgba(255, 255, 255, .82);
    max-width: 560px;
    margin: 0;
}

.hv-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.hv-cta-solid,
.hv-cta-line {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: .95rem 1.9rem;
    border-radius: 50px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: .96rem;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s ease;
}

.hv-cta-solid {
    background: #fff;
    color: var(--maroon);
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .5);
}

.hv-cta-solid:hover {
    transform: translateY(-2px);
    color: var(--maroon);
    box-shadow: 0 20px 38px -14px rgba(0, 0, 0, .55);
}

.hv-cta-line {
    border: 1px solid rgba(255, 255, 255, .45);
    color: #fff;
}

.hv-cta-line:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    transform: translateY(-2px);
}

/* =============================  Footer  ================================= */
.hv-footer {
    position: relative;
    /* Lighter red than the near-black burgundy it was: the ramp now starts at
       the brand crimson and only reaches the deep tone at the very bottom, so
       the footer reads as brand colour rather than as a dark slab. */
    background: linear-gradient(165deg, #9E2233 0%, #7A1626 58%, #5E1019 100%);
    color: rgba(255, 255, 255, .8);
    padding: 62px 0 26px;
}

.hv-foot-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
    gap: 40px;
    padding-bottom: 40px;
}

/* The logo file carries a white plate, so make that plate deliberate */
.hv-foot-logo {
    display: inline-flex;
    background: #fff;
    border-radius: 18px;
    padding: 10px 18px;
    box-shadow: 0 12px 28px -16px rgba(0, 0, 0, .6);
}

.hv-foot-logo img {
    height: 96px;
    width: auto;
}

.hv-foot-tag {
    font-family: var(--font-heading);
    font-weight: 600;
    color: #fff;
    letter-spacing: .04em;
    margin: 10px 0 18px;
}

.hv-foot-brand p {
    font-size: .88rem;
    line-height: 1.7;
}

.hv-foot-brand a {
    color: rgba(255, 255, 255, .85);
}

.hv-foot-brand a:hover {
    color: var(--gold);
}

.hv-social {
    display: flex;
    gap: 10px;
    margin: 18px 0 14px;
}

.hv-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    font-size: .95rem;
    transition: background .3s ease, border-color .3s ease, transform .3s var(--ease);
}

/* The WhatsApp mark is the one social icon people scan for by colour, so it
   keeps its green while Facebook, Instagram and YouTube stay monochrome. */
.hv-social a[aria-label="WhatsApp"] {
    color: var(--adv-wa);
    border-color: rgba(37, 211, 102, .45);
}

.hv-social a[aria-label="WhatsApp"]:hover {
    background: var(--adv-wa);
    border-color: var(--adv-wa);
    color: #fff;
}

.hv-social a:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink);
    transform: translateY(-2px);
}

.hv-foot-col h4 {
    font-size: .74rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
}

.hv-foot-col ul {
    display: grid;
    gap: 10px;
}

.hv-foot-col a {
    font-size: .89rem;
    color: rgba(255, 255, 255, .78);
}

.hv-foot-col a:hover {
    color: #fff;
    padding-left: 4px;
}

.hv-foot-contact li {
    display: flex;
    gap: 12px;
    font-size: .88rem;
    line-height: 1.6;
    margin-bottom: 14px;
}

.hv-foot-contact i {
    color: var(--gold);
    margin-top: .25em;
}

/* ---------------------------  Campaign promo  ---------------------------
   Six dedicated landing pages (hernia, gallstones, colorectal, liver/HPB,
   pancreatic, gallbladder cancer) share one slot at the top of the footer.

   They were six full-width banners with an illustration each, which measured
   2181px on desktop and 4444px on a phone — three quarters of the footer,
   scrolled past before the footer's own links appear. One tile per campaign
   instead: icon, name, one line, one link. Same slot, a quarter of the
   height, all six visible at once rather than found by scrolling.

   Colours come from brand.css: the block sits on the deep crimson footer, so
   its plate is a light wash over that ground and the accents are the logo's
   warm orange. Each landing page keeps its own palette once the visitor
   arrives. Nothing is claimed here that the landing pages do not carry. */
.hv-promos {
    margin-bottom: 44px;
    padding: 28px 30px 30px;
    /* A white plate on the red ground. The campaign block is the one part of
       the footer meant to read as an advertisement, and white separates it
       from the footer's own links far more plainly than another tinted panel
       on the same hue did. */
    border: 1px solid var(--adv-line);
    border-radius: var(--adv-radius-lg);
    background: var(--adv-white);
    box-shadow: 0 26px 56px -28px rgba(56, 8, 16, .55);
}

.hv-promos-head {
    max-width: 74ch;
    margin-bottom: 22px;
}

.hv-promo-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--adv-eyebrow-size);
    font-weight: 700;
    letter-spacing: var(--adv-eyebrow-track);
    text-transform: uppercase;
    /* The lighter red of the ramp, not the deep one — on white the deep tone
       goes almost brown at this size. */
    color: var(--adv-crimson-600);
    margin-bottom: 10px;
}

.hv-promos-head h3 {
    font-family: var(--adv-font-head);
    font-size: var(--adv-h3);
    line-height: 1.25;
    color: var(--adv-ink);
    margin: 0 0 8px;
}

.hv-promos-head p {
    font-size: var(--adv-text-sm);
    line-height: 1.7;
    color: var(--adv-ink-body);
    margin: 0;
}

.hv-promos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

/* The whole tile is the link, so the target is the card and not four words
   of it — the same reason the landing pages make their cards clickable. */
.hv-promo-tile {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 18px 18px 16px;
    border: 1px solid var(--adv-line);
    border-radius: var(--adv-radius);
    background: var(--adv-blush);
    color: var(--adv-ink);
    transition: transform var(--adv-dur) var(--adv-ease), background var(--adv-dur) ease,
        border-color var(--adv-dur) ease, box-shadow var(--adv-dur) ease;
}

.hv-promo-tile:hover,
.hv-promo-tile:focus-visible {
    color: var(--adv-ink);
    transform: translateY(-3px);
    background: var(--adv-white);
    border-color: var(--adv-coral-500);
    box-shadow: var(--adv-lift-2);
}

.hv-promo-tile-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 2px;
    border-radius: 11px;
    background: rgba(228, 108, 96, .14);
    color: var(--adv-crimson-600);
    font-size: 1rem;
}

.hv-promo-tile b {
    font-family: var(--adv-font-head);
    font-size: .99rem;
    line-height: 1.3;
    color: var(--adv-ink);
}

.hv-promo-tile-txt {
    font-size: .82rem;
    line-height: 1.6;
    color: var(--adv-ink-body);
}

.hv-promo-tile-cta {
    margin-top: auto;
    padding-top: 6px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--adv-crimson-600);
}

.hv-promo-tile-cta i {
    font-size: .72rem;
    margin-left: 5px;
    transition: transform var(--adv-dur) var(--adv-ease);
}

.hv-promo-tile:hover .hv-promo-tile-cta i {
    transform: translateX(3px);
}

@media (max-width: 900px) {
    .hv-promos {
        padding: 24px 20px 26px;
    }

    /* Two columns rather than one: six single-file tiles is the stacked
       banner problem again, in miniature. */
    .hv-promos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 420px) {
    .hv-promo-tile {
        padding: 15px 14px 14px;
    }

    .hv-promo-tile-txt {
        font-size: .78rem;
    }
}

.hv-foot-bottom {
    border-top: 1px solid rgba(255, 255, 255, .14);
    padding-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
    font-size: .8rem;
}

.hv-foot-bottom p {
    margin: 0;
    line-height: 1.7;
}

.hv-foot-legal {
    display: flex;
    gap: 18px;
}

.hv-foot-legal a:hover {
    color: var(--gold);
}

/* Floating WhatsApp */
.hv-wa {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--adv-wa);
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 10px 26px -8px rgba(37, 211, 102, .5);
    transition: transform .3s var(--ease);
}

.hv-wa:hover {
    transform: scale(1.06);
    color: #fff;
}

/* ===========================  Responsive  =============================== */
@media (max-width: 1400px) {
    body.hv-light .nav-links {
        gap: .8rem;
    }

    body.hv-light .nav-links>a,
    body.hv-light .nav-links .dropbtn {
        font-size: .9rem;
    }

    .hv-act-loc span {
        display: none;
    }

    .hv-act-loc {
        padding: .6rem .85rem;
    }
}

@media (max-width: 1240px) {
    .hv-chip-1 {
        left: -10px;
    }

    .hv-chip-2 {
        right: -8px;
    }
}

@media (max-width: 1100px) {
    .hv-hero-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .hv-hero-media {
        max-width: 480px;
        margin: 0 auto;
        width: 100%;
    }

    .hv-trust-grid,
    .hv-coe-grid,
    .hv-spec-grid,
    .hv-dash-grid,
    .hv-suite-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hv-stat:nth-child(2n) {
        border-right: none;
    }

    .hv-stat:nth-child(-n+2) {
        border-bottom: 1px solid var(--line-soft);
    }

    body.hv-light .hv-docs .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hv-hero h1 {
        font-size: 2.8rem;
    }

    .hv-loc-layout {
        grid-template-columns: 1fr;
    }

    body.hv-light .loc-map {
        height: 420px;
        position: static;
    }

    body.hv-light .loc-list {
        max-height: none;
        overflow: visible;
    }

    .hv-foot-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
}

/* The drawer hangs off the bottom of the header rather than guessing at a
   fixed offset, because the header changes height — the topbar collapses on
   scroll and the logo steps down twice below 760px.

   It cannot simply be `position: static` and flow below the bar: `.nav-links`
   is a flex child of `.nav-container`, so in normal flow it becomes a third
   column in the header row, wedged between the logo and the action pills.
   That is what it did — a 91px sliver of a menu, scrolled halfway out of the
   top of the bar with the language and ERP pills sitting on top of it.

   Absolute against the header instead. `top: 100%` puts it exactly under the
   bar at whatever height the bar currently is, and `.navbar` is only made a
   containing block on these pages, where it is `position: static`; every
   other page's header is already `position: fixed` and positions the drawer
   itself. */
@media (max-width: 1360px) {
    body.hv-light .navbar {
        position: relative;
    }

    body.hv-light .nav-links.open {
        position: absolute;
        top: calc(100% + 8px);
        left: auto;
        right: 12px;
        width: min(214px, calc(100vw - 32px));
        max-height: min(62vh, calc(100vh - 130px));
    }
}

@media (max-width: 980px) {
    .hv-tb-right a span.hv-tb-txt {
        display: none;
    }

    .hv-tb-right {
        gap: 14px;
    }

    .hv-act-loc {
        display: none;
    }
}

@media (max-width: 860px) {
    .hv-finder {
        grid-template-columns: 1fr;
    }

    .hv-about-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .hv-cta-in {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 760px) {
    .hv-topbar {
        display: none;
    }

    body.hv-light .nav-links.open {
        max-height: min(62vh, calc(100vh - 84px));
    }

    body.hv-light .nav-container {
        height: 76px;
    }

    body.hv-light .logo img {
        height: 52px;
    }
}

/* Below this the appointment button gives up its label, not its place */
@media (max-width: 560px) {
    .hv-act-book span {
        display: none;
    }

    .hv-act-book {
        padding: .68rem .95rem;
    }

    .hv-actions {
        gap: 8px;
    }
}

@media (max-width: 640px) {

    .hv-trust-grid,
    .hv-coe-grid,
    .hv-spec-grid,
    .hv-dash-grid,
    .hv-suite-grid,
    .hv-foot-grid {
        grid-template-columns: 1fr;
    }

    body.hv-light .hv-docs .team-grid {
        grid-template-columns: 1fr;
    }

    .hv-stat {
        border-right: none;
        border-bottom: 1px solid var(--line-soft);
    }

    .hv-stat:last-child {
        border-bottom: none;
    }

    .hv-hero {
        padding: 128px 0 62px;
    }

    .hv-hero h1 {
        font-size: 2.2rem;
    }

    .hv-title {
        font-size: 1.95rem;
    }

    .hv-cta-band h2 {
        font-size: 1.7rem;
    }

    .hv-chip {
        display: none;
    }

    .hv-tarrow {
        display: none;
    }

    .hv-loc-inset {
        flex-direction: column;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {

    .hv-spec-card:hover,
    .hv-coe-card:hover,
    .hv-tile:hover,
    .hv-suite-card:hover,
    .hv-ghost:hover,
    .hv-act:hover,
    .hv-find-btn:hover,
    .hv-cta-solid:hover,
    .hv-cta-line:hover,
    body.hv-light .testimonial-card:hover,
    body.hv-light .hv-docs .team-card:hover,
    body.hv-light .loc-card:hover {
        transform: none;
    }

    .hv-ghost:hover {
        translate: none;
    }

    .hv-coe-card:hover .hv-coe-img img,
    body.hv-light .hv-docs .team-card:hover .team-img-wrapper img {
        transform: none;
    }

    .hv-spec-card:hover .hv-spec-img::before,
    .hv-spec-card:hover .hv-si {
        animation: none;
    }

    /* Hero keeps its colour, loses its motion */
    .hv-hero-bg img,
    .hv-hero::before,
    .hv-hero::after,
    .hv-kicker::before,
    .hv-hero h1 .hv-brand,
    .hv-hero-media::before,
    .hv-portrait img,
    .hv-chip,
    body.hv-light .btn-premium:hover::after {
        animation: none;
    }

    .hv-hero-bg img {
        transform: scale(1.08);
    }

    /* park the animated layers on their resting frame */
    .hv-chip {
        transform: none;
    }

    .hv-hero h1 .hv-brand {
        background-size: 100% 100%;
    }

    .hv-chip:hover {
        scale: 1;
    }

    body.hv-light .btn-premium:hover {
        transform: none;
    }
}

/* ==========================================================================
   Hero portrait: entrance, depth and idle motion
   ==========================================================================
   Layered so that no two effects ever compete for the same property. Each
   element owns `transform` for its endless idle loop and the individual
   `translate` / `scale` properties for entrance and hover, which the browser
   composes on top of the transform rather than replacing it. That is the only
   reason a card can drift forever and still lift cleanly under the cursor.

   Every entrance uses `backwards` fill: the element holds its opening frame
   through the delay, then hands control back to the base rule when it ends,
   so hover states work the moment the animation is over.
   ========================================================================== */

/* ---- depth planes -------------------------------------------------------
   hero-motion.js writes --hv-px / --hv-py (a few px, from the pointer). The
   background takes them negated and the portrait takes a little over half,
   so the two planes separate without anything visibly sliding. */
.hv-hero {
    --hv-px: 0px;
    --hv-py: 0px;
}

.hv-hero-bg img {
    translate: calc(var(--hv-px) * -1) calc(var(--hv-py) * -1);
    transition: translate .9s cubic-bezier(.22, .61, .36, 1);
}

.hv-hero-media {
    translate: calc(var(--hv-px) * .55) calc(var(--hv-py) * .55);
    transition: translate .7s cubic-bezier(.22, .61, .36, 1);
}

/* ---- the card -----------------------------------------------------------
   Three jobs, three properties: the entrance owns opacity, the endless 2.5px
   drift owns transform, and the hover lift owns translate and scale. */
.hv-portrait {
    will-change: transform;
    animation: hvCardIn .8s cubic-bezier(.22, .61, .36, 1) .15s backwards,
               hvCardFloat 5.6s ease-in-out 1.2s infinite alternate;
    transition: translate .45s ease-out, scale .45s ease-out, box-shadow .45s ease-out;
}

@keyframes hvCardIn {
    from { opacity: 0; translate: 26px 0; }
    to { opacity: 1; translate: 0 0; }
}

@keyframes hvCardFloat {
    from { transform: translate3d(0, 1.5px, 0); }
    to { transform: translate3d(0, -1.5px, 0); }
}

.hv-hero-media:hover .hv-portrait {
    translate: 0 -5px;
    scale: 1.015;
    box-shadow: 0 34px 70px -24px rgba(120, 60, 55, .34), 0 10px 22px -12px rgba(120, 60, 55, .16);
}

/* ---- the photograph -----------------------------------------------------
   A still photograph cannot breathe or blink, so what stands in for it is a
   camera move: a 3% push-in over half a minute, plus a 0.4% swell on a
   slower clock that reads as the frame settling rather than as an effect.
   transform carries the push, scale carries the swell. */
.hv-portrait img {
    animation: hvPortraitDrift 30s ease-in-out infinite alternate,
               hvPortraitBreath 5.8s ease-in-out infinite alternate;
    transition: filter .45s ease-out;
}

@keyframes hvPortraitDrift {
    from { transform: scale(1); }
    to { transform: scale(1.03); }
}

@keyframes hvPortraitBreath {
    from { scale: 1; }
    to { scale: 1.004; }
}

.hv-hero-media:hover .hv-portrait img {
    filter: brightness(1.03) contrast(1.02) saturate(1.02);
}

/* One pass of light across the coat and the embroidered logo, a second after
   the card has arrived, and then never again. */
.hv-portrait-sheen {
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: -40%;
    width: 34%;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(102deg, transparent, rgba(255, 255, 255, .38), transparent);
    filter: blur(2px);
    animation: hvSheenPass 1s cubic-bezier(.4, 0, .3, 1) 1.05s 1 backwards;
}

@keyframes hvSheenPass {
    0% { opacity: 0; transform: translate3d(0, 0, 0); }
    22% { opacity: 1; }
    82% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(330%, 0, 0); }
}

/* ---- caption ------------------------------------------------------------ */
.hv-portrait-cap strong {
    animation: hvRiseIn .7s cubic-bezier(.22, .61, .36, 1) .62s backwards;
    transition: color .45s ease-out, text-shadow .45s ease-out;
}

.hv-portrait-cap span {
    animation: hvRiseIn .7s cubic-bezier(.22, .61, .36, 1) .72s backwards;
}

@keyframes hvRiseIn {
    from { opacity: 0; translate: 0 8px; }
    to { opacity: 1; translate: 0 0; }
}

.hv-hero-media:hover .hv-portrait-cap strong {
    color: #fff;
    text-shadow: 0 0 18px rgba(255, 226, 220, .45);
}

/* ---- credential chips ---------------------------------------------------
   Entrance on translate/scale, idle drift on transform, and the drift is held
   back until the entrance has finished so the two never overlap. */
.hv-chip {
    animation: hvChipRise .7s cubic-bezier(.22, .61, .36, 1) .42s backwards,
               hvChipFloat 7.5s ease-in-out 1.25s infinite alternate;
    transition: translate .45s ease-out, scale .35s var(--ease),
                box-shadow .35s var(--ease), border-color .35s ease;
}

.hv-chip-2 {
    animation: hvChipSlide .7s cubic-bezier(.22, .61, .36, 1) .55s backwards,
               hvChipFloat 9.5s ease-in-out 1.4s infinite alternate;
}

@keyframes hvChipRise {
    from { opacity: 0; translate: 0 8px; scale: .96; }
    to { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes hvChipSlide {
    from { opacity: 0; translate: 14px 0; scale: .96; }
    to { opacity: 1; translate: 0 0; scale: 1; }
}

.hv-hero-media:hover .hv-chip-1 { translate: 0 -2px; }
.hv-hero-media:hover .hv-chip-2 { translate: 3px 0; }

/* the glow behind the card opens up a little under the cursor */
.hv-hero-media::before {
    transition: opacity .45s ease-out;
}

.hv-hero-media:hover::before {
    opacity: 1;
    animation-play-state: paused;
}

/* ---- motes --------------------------------------------------------------
   Three specks of warm light on a one-minute round trip. Deliberately close
   to invisible: they should register as air, not as particles. */
.hv-motes {
    position: absolute;
    inset: -6% -10%;
    z-index: 0;
    pointer-events: none;
    opacity: .5;
    background-image:
        radial-gradient(2.5px 2.5px at 18% 24%, rgba(228, 87, 78, .5), transparent 60%),
        radial-gradient(2px 2px at 74% 58%, rgba(255, 179, 71, .45), transparent 60%),
        radial-gradient(2.5px 2.5px at 46% 82%, rgba(228, 87, 78, .38), transparent 60%);
    animation: hvMotesIn 1.4s ease-out .9s backwards,
               hvMotesDrift 61s ease-in-out infinite alternate;
}

@keyframes hvMotesIn {
    from { opacity: 0; }
    to { opacity: .5; }
}

@keyframes hvMotesDrift {
    from { transform: translate3d(0, 6px, 0); opacity: .35; }
    to { transform: translate3d(-8px, -14px, 0); opacity: .6; }
}

@media (prefers-reduced-motion: reduce) {
    .hv-portrait,
    .hv-portrait img,
    .hv-portrait-sheen,
    .hv-portrait-cap strong,
    .hv-portrait-cap span,
    .hv-chip,
    .hv-chip-2,
    .hv-motes {
        animation: none;
    }

    /* park every layer on its resting frame */
    .hv-hero-bg img,
    .hv-hero-media,
    .hv-portrait,
    .hv-chip {
        translate: none;
        transition: none;
    }

    .hv-portrait img {
        scale: 1;
        transform: scale(1);
    }

    .hv-portrait-sheen,
    .hv-motes {
        opacity: 0;
    }

    .hv-hero-media:hover .hv-portrait {
        scale: 1;
    }
}

/* ==========================================================================
   Hero copy: the entrance sequence
   ==========================================================================
   Staged rather than sprinkled: one line arrives, then the next, finishing
   inside 1.8s. .hv-anim is set by hero-motion.js the moment the markup is
   parsed, so nothing is hidden unless the script is actually there to reveal
   it again — with JavaScript off the copy simply renders. .is-in follows from
   an IntersectionObserver that fires once and then stops watching.

   Only transform and opacity move. --hv-rise carries the travel distance so
   the phone can halve it in one place.
   ========================================================================== */

.hv-hero-copy {
    --hv-rise: 1;
}

/* the opening frame, held until the observer says go */
.hv-hero-copy.hv-anim .hv-kicker,
.hv-hero-copy.hv-anim h1 .hv-h1-lead,
.hv-hero-copy.hv-anim h1 .hv-brand,
.hv-hero-copy.hv-anim .hv-lede,
.hv-hero-copy.hv-anim .btn-premium,
.hv-hero-copy.hv-anim .hv-ghost,
.hv-hero-copy.hv-anim .hv-assure i,
.hv-hero-copy.hv-anim .hv-a-t {
    opacity: 0;
}

/* h1 is two independently timed lines; the wrappers must not change how it
   sets, so they stay inline and inherit everything */
.hv-h1-lead,
.hv-brand {
    display: inline-block;
}

.hv-hero-copy.is-in .hv-kicker {
    animation: hvCopyBadge .6s cubic-bezier(.22, .61, .36, 1) .1s both;
}

/* the letters settle outward as the badge lands */
@keyframes hvCopyBadge {
    from { opacity: 0; transform: translate3d(0, calc(15px * var(--hv-rise)), 0); letter-spacing: .16em; }
    to { opacity: 1; transform: none; letter-spacing: .22em; }
}

.hv-hero-copy.is-in .hv-h1-lead {
    animation: hvCopyRise .8s cubic-bezier(.22, .61, .36, 1) .25s both;
}

@keyframes hvCopyRise {
    from { opacity: 0; transform: translate3d(0, calc(35px * var(--hv-rise)), 0); }
    to { opacity: 1; transform: none; }
}

/* The brand line gets the same rise plus a touch of scale, and a glow that
   burns off as it settles. text-shadow is the only way to bloom text whose
   fill is a clipped gradient — a filter would blur the gradient itself. */
.hv-hero-copy.is-in .hv-brand {
    animation: hvCopyBrand .8s cubic-bezier(.22, .61, .36, 1) .45s both;
}

@keyframes hvCopyBrand {
    from {
        opacity: 0;
        transform: translate3d(0, calc(25px * var(--hv-rise)), 0) scale(.96);
        text-shadow: 0 0 26px rgba(228, 87, 78, .55);
    }
    60% { text-shadow: 0 0 18px rgba(228, 87, 78, .34); }
    to { opacity: 1; transform: none; text-shadow: 0 0 0 rgba(228, 87, 78, 0); }
}

.hv-hero-copy.is-in .hv-lede {
    animation: hvCopyLede .7s cubic-bezier(.22, .61, .36, 1) .7s both;
}

@keyframes hvCopyLede {
    from { opacity: 0; transform: translate3d(0, calc(20px * var(--hv-rise)), 0); }
    to { opacity: 1; transform: none; }
}

.hv-hero-copy.is-in .btn-premium {
    animation: hvCopyBtn .6s cubic-bezier(.22, .61, .36, 1) .95s both;
}

@keyframes hvCopyBtn {
    from { opacity: 0; transform: translate3d(0, calc(14px * var(--hv-rise)), 0) scale(.96); }
    to { opacity: 1; transform: none; }
}

/* one shimmer across the button as it lands, then never again unhovered */
.hv-hero-copy.is-in .btn-premium::after {
    animation: hvSheen .9s var(--ease) 1.55s 1 backwards;
}

/* The button is inline-flex, so the icon is a flex item and already a block
   box — transform applies to it whether or not Font Awesome has loaded. */
body.hv-light .btn-premium i {
    transition: transform .25s var(--ease);
}

/* style.css lifts this button with transform on every other page; the hero's
   entrance animation owns transform here, so that one is stood down */
body.hv-light .hv-cta .btn-premium:hover {
    transform: none;
}

body.hv-light .btn-premium:hover {
    translate: 0 -2px;
}

body.hv-light .btn-premium:hover i {
    transform: translateX(3px);
}

.hv-hero-copy.is-in .hv-ghost {
    animation: hvCopyGhost .6s cubic-bezier(.22, .61, .36, 1) 1.05s both;
}

@keyframes hvCopyGhost {
    from { opacity: 0; transform: translate3d(0, calc(15px * var(--hv-rise)), 0); }
    to { opacity: 1; transform: none; }
}

/* ---- assurance line -----------------------------------------------------
   The tick lands first and the words follow 80ms behind, which is why the
   opacity sits on the tick and the label rather than on the row: a faded row
   could not show its own tick early. */
.hv-hero-copy.is-in .hv-assure span > i {
    animation: hvCopyTick .45s cubic-bezier(.22, .61, .36, 1) both;
}

.hv-hero-copy.is-in .hv-a-t {
    animation: hvCopyPoint .45s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes hvCopyTick {
    from { opacity: 0; transform: translate3d(0, calc(10px * var(--hv-rise)), 0) scale(.8); }
    to { opacity: 1; transform: none; }
}

@keyframes hvCopyPoint {
    from { opacity: 0; transform: translate3d(0, calc(10px * var(--hv-rise)), 0); }
    to { opacity: 1; transform: none; }
}

.hv-hero-copy.is-in .hv-assure span:nth-child(1) > i { animation-delay: 1.15s; }
.hv-hero-copy.is-in .hv-assure span:nth-child(1) .hv-a-t { animation-delay: 1.23s; }
.hv-hero-copy.is-in .hv-assure span:nth-child(2) > i { animation-delay: 1.25s; }
.hv-hero-copy.is-in .hv-assure span:nth-child(2) .hv-a-t { animation-delay: 1.33s; }
.hv-hero-copy.is-in .hv-assure span:nth-child(3) > i { animation-delay: 1.35s; }
.hv-hero-copy.is-in .hv-assure span:nth-child(3) .hv-a-t { animation-delay: 1.43s; }

/* ---- phone --------------------------------------------------------------
   Half the travel: the same sequence over a shorter column would otherwise
   read as the text sliding about. */
@media (max-width: 768px) {
    .hv-hero-copy {
        --hv-rise: .5;
    }
}

/* ---- reduced motion -----------------------------------------------------
   The sequence still runs, because the order is what explains the page, but
   nothing travels: opacity only. */
@media (prefers-reduced-motion: reduce) {
    .hv-hero-copy.is-in .hv-kicker,
    .hv-hero-copy.is-in .hv-h1-lead,
    .hv-hero-copy.is-in .hv-brand,
    .hv-hero-copy.is-in .hv-lede,
    .hv-hero-copy.is-in .btn-premium,
    .hv-hero-copy.is-in .hv-ghost,
    .hv-hero-copy.is-in .hv-assure span > i,
    .hv-hero-copy.is-in .hv-a-t {
        animation-name: hvCopyFade;
    }

    @keyframes hvCopyFade {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .hv-hero-copy.is-in .btn-premium::after {
        animation: none;
    }

    body.hv-light .btn-premium:hover {
        translate: none;
    }

    body.hv-light .btn-premium:hover i {
        transform: none;
    }
}

/* ==========================================================================
   Specialised treatment pages (five landing pages, before the footer)
   Three across on desktop; the last row centres its two cards so the grid
   never ends with an orphan hanging on the left.
   ========================================================================== */
body.hv-light .hv-lp {
    padding: clamp(56px, 7vw, 96px) 0;
    background: linear-gradient(180deg, #fff 0%, var(--adv-cream, #fdf7f5) 100%);
}

body.hv-light .hv-lp-grid {
    /* Six columns, each card two wide: that is what lets the final row of two
       sit centred under the row of three instead of hanging on the left. */
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(16px, 1.8vw, 26px);
    margin-top: clamp(28px, 3.4vw, 46px);
}

body.hv-light .hv-lp-card {
    grid-column: span 2;
}

/* The centring below is for a five-card row only: with five cards the last
   two would otherwise hang on the left. :nth-last-child pins the rules to
   that count, so a sixth card simply fills the row. */
body.hv-light .hv-lp-card:nth-child(4):nth-last-child(2) {
    grid-column: 2 / span 2;
}

body.hv-light .hv-lp-card:nth-child(5):nth-last-child(1) {
    grid-column: 4 / span 2;
}

body.hv-light .hv-lp-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(22px, 2.2vw, 30px);
    border: 1px solid rgba(154, 26, 38, .12);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(24, 12, 14, .05);
    text-decoration: none;
    color: inherit;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

body.hv-light .hv-lp-card:hover,
body.hv-light .hv-lp-card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(154, 26, 38, .28);
    box-shadow: 0 16px 38px rgba(24, 12, 14, .12);
}

body.hv-light .hv-lp-ico {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: rgba(154, 26, 38, .08);
    color: var(--adv-crimson-700, #9a1a26);
    font-size: 1.05rem;
}

body.hv-light .hv-lp-card h3 {
    margin: 6px 0 0;
    font-size: clamp(1.05rem, 1.25vw, 1.2rem);
    font-weight: 700;
    line-height: 1.3;
    color: #1b1113;
}

body.hv-light .hv-lp-card p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.6;
    color: #5b4e50;
}

body.hv-light .hv-lp-more {
    margin-top: auto;
    padding-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    font-weight: 700;
    color: var(--adv-crimson-700, #9a1a26);
}

body.hv-light .hv-lp-more i {
    font-size: .78rem;
    transition: transform .25s ease;
}

body.hv-light .hv-lp-card:hover .hv-lp-more i {
    transform: translateX(3px);
}

@media (max-width: 980px) {
    body.hv-light .hv-lp-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* Two across: a fifth card with nothing beside it centres instead. */
    body.hv-light .hv-lp-card:nth-child(4):nth-last-child(2) {
        grid-column: span 2;
    }

    body.hv-light .hv-lp-card:nth-child(5):nth-last-child(1) {
        grid-column: 2 / span 2;
    }
}

@media (max-width: 640px) {
    body.hv-light .hv-lp-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.hv-light .hv-lp-card,
    body.hv-light .hv-lp-card:nth-child(4),
    body.hv-light .hv-lp-card:nth-child(5) {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {

    body.hv-light .hv-lp-card,
    body.hv-light .hv-lp-card:hover,
    body.hv-light .hv-lp-card .hv-lp-more i {
        transform: none;
        transition: box-shadow .2s ease;
    }
}