/* ===================================================================
   responsive.css — mobile correctness, loaded last.

   Linked immediately before </head> on every page, after the CDN
   stylesheets, so a fix here never has to fight AOS, Swiper or Font
   Awesome for the cascade.

   `body { overflow-x: hidden }` used to live in style.css and was hiding
   real overflow rather than fixing it. It is gone. Everything below
   removes a cause instead.
   =================================================================== */

/* -------------------------------------------------------------------
   1. AOS horizontal reveals

   AOS parks a not-yet-revealed element 100px to the side:
       [data-aos=fade-left]  { transform: translate3d( 100px,0,0) }
       [data-aos=fade-right] { transform: translate3d(-100px,0,0) }

   Those 100px stick out past the viewport whenever the page gutter is
   narrower than 100px — every phone, every tablet, and any laptop under
   about 1300px. The page then scrolls sideways, and because the meta
   viewport is width=device-width, the layout viewport widens to match,
   which is what dragged the fixed header wider than the screen too.

   The reveal is kept; only its direction changes, to the vertical one
   the other 1402 elements on the site already use.

   The cutoff is 1560px, not a phone breakpoint, because the widest
   container on the site is `.milestone .container` at 1340px: its gutter
   only reaches 100px once the viewport passes 1540. Above that the
   offset fits and the desktop reveal is left exactly as designed.
   ------------------------------------------------------------------- */
@media (max-width: 1560px) {

    [data-aos="fade-left"]:not(.aos-animate),
    [data-aos="fade-right"]:not(.aos-animate) {
        transform: translate3d(0, 60px, 0);
    }

    [data-aos="fade-up-left"]:not(.aos-animate),
    [data-aos="fade-up-right"]:not(.aos-animate) {
        transform: translate3d(0, 100px, 0);
    }

    [data-aos="fade-down-left"]:not(.aos-animate),
    [data-aos="fade-down-right"]:not(.aos-animate) {
        transform: translate3d(0, -100px, 0);
    }

    [data-aos="zoom-in-left"]:not(.aos-animate),
    [data-aos="zoom-in-right"]:not(.aos-animate) {
        transform: translate3d(0, 60px, 0) scale(.6);
    }

    [data-aos="zoom-out-left"]:not(.aos-animate),
    [data-aos="zoom-out-right"]:not(.aos-animate) {
        transform: translate3d(0, 60px, 0) scale(1.2);
    }

    [data-aos="slide-left"]:not(.aos-animate),
    [data-aos="slide-right"]:not(.aos-animate) {
        transform: translate3d(0, 100%, 0);
    }
}


/* -------------------------------------------------------------------
   2. Grid and flex items that refuse to shrink

   A grid track's default minimum is `auto`, which means min-content —
   the widest thing inside it. A row of stat cards or a long email
   address therefore pushes the track wider than its own container, and
   the container cannot hold it back. That is the "grid blowout", and it
   is what widened the organ pages and the About contact cards.

   Two halves to the fix: let the items shrink, and give the rows that
   are hard-coded to N columns somewhere to go on a narrow screen.
   ------------------------------------------------------------------- */

/* Let the item shrink to the track instead of the track growing to the item */
.pc-intro-grid > *,
.pc-hero-grid > *,
.pc-facts > *,
.contact-cards > *,
.contact-card > *,
.ms-grid > *,
.values > * {
    min-width: 0;
}

/* `.pc-facts` names two different components.

   Six organ pages use `div.pc-facts`: three stat cards at `repeat(3, 1fr)`,
   which sets a 372px floor and overflows a phone. Those still need stepping
   down, two up and then one.

   pancrea-care.html uses `ul.pc-facts`: three full sentences, with no
   columns declared at all, so it is a single column at every width
   including on a desktop. It was being caught by the same rules and
   stepped *up* to two columns below 620px — the one thing on that page
   that was narrower on a phone than on a monitor, each sentence reflowed
   into a 165px ribbon six words tall.

   Hence the element selectors: the grid steps down, the list is left
   alone. */
@media (max-width: 620px) {
    div.pc-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    div.pc-facts {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* .contact-cards goes 3 -> 2 columns and stops. A card is an icon plus a
   block of phone numbers, so two-up still cannot fit a small phone. */
@media (max-width: 620px) {
    .contact-cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* -------------------------------------------------------------------
   3. Strings with nowhere to break

   Email addresses and run-together phone lists have no space to wrap at,
   so they set a min-content width of their own. Breaking them is the
   fix; the alternative is the whole page scrolling sideways for one
   address.
   ------------------------------------------------------------------- */
.contact-card p,
.contact-card a,
.cm-row p,
.cm-row a,
.footer-contact a,
.ar-rich a {
    overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------
   4. Tables

   .ar-fig is `overflow: hidden` for its rounded corners, which quietly
   cut the wide comparison tables off instead of letting them scroll.
   A figure holding a table scrolls on its own, so the table stays whole
   and the page still does not.
   ------------------------------------------------------------------- */
.ar-fig:has(table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ar-fig table {
    min-width: 30rem;      /* below this the columns are unreadable anyway */
}

/* -------------------------------------------------------------------
   5. The contact / appointment modal

   Its two panes are flex children pinned at min-width 300px and 350px.
   On any phone that is wider than the screen before the form is even
   drawn. `min()` keeps the desktop floor and lets the pane shrink to the
   viewport below it.
   ------------------------------------------------------------------- */
.contact-modal-left {
    min-width: min(300px, 100%);
}

.contact-modal-right {
    min-width: min(350px, 100%);
}

@media (max-width: 620px) {

    /* stacked, and the padding comes down with the width */
    .contact-modal-left,
    .contact-modal-right {
        padding: 26px 20px;
    }

    /* a select or input at less than 16px makes iOS zoom the page on focus,
       which leaves the layout scrolled sideways after the keyboard closes */
    .premium-form input,
    .premium-form select,
    .premium-form textarea {
        font-size: 16px;
    }
}


/* -------------------------------------------------------------------
   6. Layouts that never reach one column

   `.pillars` collapses to a single column at 640px, but `.pillars.is-4`
   is a two-class selector and therefore outranks it at every width — so
   the four-up variant stayed four-up on a 320px phone, at 62px a card.
   Same specificity here, so the narrow case can finally win.
   ------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .pillars.is-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .pillars.is-4 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* -------------------------------------------------------------------
   7. Flex rows that turn into columns

   .service-block is `flex-direction: row` with `align-items: flex-start`
   so the image and the copy sit at the top of the row. Below 720px it
   flips to a column — and flex-start now sizes the children to their
   max-content across, instead of stretching them to the block. The copy
   went 289px wide inside a 197px block. Stretch is what a column wants.
   ------------------------------------------------------------------- */
@media (max-width: 720px) {
    .service-block {
        align-items: stretch;
    }
}

/* -------------------------------------------------------------------
   8. Inline-flex pills

   .pc-eyebrow is an inline-flex badge holding an icon and a phrase. An
   inline flex line does not wrap, so the badge sets a min-content width
   of the whole phrase and pushes past a small screen.
   ------------------------------------------------------------------- */
.pc-eyebrow {
    flex-wrap: wrap;
    max-width: 100%;
}

/* -------------------------------------------------------------------
   9. Long words

   A single token longer than the column — a compound brand name, an
   email address, a URL in body copy — cannot be wrapped by the normal
   rules and simply hangs out of the box. `break-word` only takes effect
   in exactly that case, so ordinary text is unaffected.
   ------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}


/* -------------------------------------------------------------------
   10. Service blocks on a phone

   Two things together, not one: 35px of padding on each side takes 70px
   off a 320px screen before any content is drawn, and the block heading
   is a flex row at a fixed 1.9rem — "Gastroenterology" alone is 250px at
   that size, so the row's min-content was 289px inside a 196px column.

   Note `overflow-wrap: break-word` does NOT help here: it stops a word
   painting outside its box but leaves the intrinsic min-content size
   unchanged, which is the number flex and grid actually lay out from.
   The size has to come down and the row has to be allowed to wrap.
   ------------------------------------------------------------------- */
.service-block h2 {
    flex-wrap: wrap;
    font-size: clamp(1.25rem, 5.6vw, 1.9rem);
}

@media (max-width: 560px) {
    .service-block {
        padding: 22px 18px;
    }

    .service-block > p {
        font-size: 1rem;
    }
}


/* -------------------------------------------------------------------
   11. Touch targets

   Measured at 375px: the hamburger was an 18x33 hit area, the language
   pill 63x34, the pagination and filter chips 37-38px tall. A finger
   pad is about 9mm, which is why 44px is the usual floor.

   Scoped to coarse pointers so a mouse-driven desktop keeps its
   proportions exactly as designed.
   ------------------------------------------------------------------- */
/* The hamburger rule carries `display`, so it has to stop where the drawer
   stops. Unbounded, it put the toggle back on screen at every width on a
   touch device — a touchscreen laptop or a tablet in landscape at 1440 drew
   the full desktop menu AND the hamburger, and the hamburger was pushed 54px
   off the right edge. Above 1360 there is no drawer to toggle, so there is
   nothing to give a tap target to. */
@media (pointer: coarse) and (max-width: 1360px) {

    /* the drawer toggle: the icon stays its size, the hit area grows */
    .mobile-menu {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        margin-right: -8px;     /* keeps the icon on the same optical edge */
    }
}

/* The pull above is 8px, and it only has room to be spent while the header
   gutter is wider than that. erp-nav.css takes the gutter down to 0.4rem
   below 330px, so from there the box hung 2px off the right of the screen
   and the hamburger came back clipped on every 320px phone. The icon gives
   up its optical alignment rather than the screen edge. */
@media (pointer: coarse) and (max-width: 330px) {
    .mobile-menu {
        margin-right: 0;
    }

    .als-btn {
        min-height: 40px;
    }

    /* blog pagination, gallery filters, copy buttons */
    .ob-page,
    .agy-chip,
    .cr-copy {
        min-height: 44px;
    }

    .ob-page {
        min-width: 44px;
    }

    /* carousel dots are decorative but still driven by touch */
    .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        margin: 0 7px !important;
    }

    /* stacked footer links need room between them, not just inside them */
    .hv-foot-legal a,
    .footer-links a,
    .footer-bottom a,
    .footer-legal a {
        display: inline-block;
        padding: 11px 0;
    }
}

/* -------------------------------------------------------------------
   12. Readable body text

   12px copyright and 13.4px counters are below what is comfortable on a
   phone. Nudged to 14px and up; the desktop sizes are left alone.
   ------------------------------------------------------------------- */
@media (max-width: 768px) {

    .hv-foot-bottom,
    .hv-foot-bottom p,
    .footer-bottom p,
    .footer-bottom,
    .ob-count,
    .form-note {
        font-size: .875rem;
        line-height: 1.6;
    }

    /* the legal row wraps to its own line rather than squeezing the address */
    .hv-foot-bottom {
        justify-content: flex-start;
    }
}

/* -------------------------------------------------------------------
   13. Form fields

   iOS Safari zooms the page whenever a focused field is under 16px, and
   it does not zoom back out — the visitor is left on a page that now
   scrolls sideways. 16px on the field is the whole fix.
   ------------------------------------------------------------------- */
@media (max-width: 768px) {

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    .hv-field input,
    .hv-field select,
    .premium-form input,
    .premium-form select,
    .premium-form textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* the home page finder bar is three columns of controls */
    .hv-finder {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* -------------------------------------------------------------------
   14. The legacy footer strip

   81 pages carry this strip with `font-size: 12px` as an inline style,
   which no stylesheet can reach. The size now lives on .footer-legal —
   same 12px on desktop as before — so the phone case can be stated here
   instead of being unreachable.
   ------------------------------------------------------------------- */
.footer-legal {
    font-size: 12px;
}

@media (max-width: 768px) {
    .footer-legal {
        font-size: .875rem;
        line-height: 1.6;
    }

    .footer-legal a {
        display: inline-block;
        padding: 11px 0;
    }
}


/* the "website updated" stamp: de-emphasised, but not to the point of
   being unreadable on a phone */
/* doubled class: the inline style this replaced beat the footer's own
   `p` rule, so the class has to as well or the caption gets bigger than
   it was on desktop */
.foot-updated.foot-updated {
    font-size: .76rem;
    opacity: .7;
}

@media (max-width: 768px) {
    .foot-updated.foot-updated {
        font-size: .8125rem;
    }
}


/* -------------------------------------------------------------------
   15. Footer link columns

   The columns are inline-styled flex stacks with a 10px gap and no
   padding on the links, so each target is a 22px-tall strip. Six px of
   padding takes the box to 34px and, with the gap, the pitch between
   two targets to 44px — which is the number that matters when targets
   sit in a row. Padding rather than min-height, so the column does not
   suddenly grow half a screen taller.
   ------------------------------------------------------------------- */
@media (pointer: coarse) {
    footer a {
        display: inline-block;
        padding: 6px 0;
    }
}


/* -------------------------------------------------------------------
   16. Last pass: inline CTAs, icon links, small captions

   These are the leftovers from the tap audit at 375px — text links that
   act as calls to action but were only 24-26px tall, footer icon links
   at 38px, and a caption at 13.8px.
   ------------------------------------------------------------------- */
@media (pointer: coarse) {

    .hv-textlink,
    .pc-link {
        padding: 8px 0;
    }

    /* footer social icons */
    .hv-foot-soc a,
    .social-icons a,
    footer .fa-brands {
        min-width: 44px;
        min-height: 44px;
    }

    .hv-foot-soc a,
    .social-icons a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .hv-loc-inset p {
        font-size: .9rem;
    }
}


/* -------------------------------------------------------------------
   17. Fixed heights that were sized for a desktop column

   The locations map is 620px tall — most of a phone screen for one
   element, and a lot of scrolling to get past it. Proportionate below
   the tablet breakpoint; the desktop value is untouched.

   (The other fixed heights in the codebase, .hero at 100vh and
   .why-image at 500px, are on classes no page actually uses, so they
   are left alone rather than given dead overrides.)
   ------------------------------------------------------------------- */
@media (max-width: 768px) {

    .loc-map,
    body.hv-light .loc-map {
        height: 340px;
    }
}

/* -------------------------------------------------------------------
   18. The floating WhatsApp button

   It is written inline on every page — 50px, 20px clear of two edges,
   position: fixed — so there is no class to hang a rule on and no way to
   beat an inline declaration except !important. The attribute selector
   matches the inline style itself, which keeps the rule off the pages
   that place the same link somewhere other than the corner.

   On a 320px screen a 50px disc 20px in from the edge lands on top of
   the hero's second call to action. Tucking it into the corner and
   taking it down to 46px clears the button while leaving the target
   comfortably above the 44px floor.
   ------------------------------------------------------------------- */
@media (max-width: 480px) {

    a[href*="wa.me"][style*="position: fixed"] {
        width: 46px !important;
        height: 46px !important;
        font-size: 22px !important;
        right: 10px !important;
    }

    /* Only the disc that is actually anchored to the corner moves down. The
       25 pages that carry a sticky call bar lift theirs off the bottom with
       an inline offset of their own, and flattening every button to the same
       12px dropped those straight back inside the bar. */
    a[href*="wa.me"][style*="bottom: 20px"] {
        bottom: 12px !important;
    }
}

/* Those 25 pages: the bar is 74px tall while its two buttons sit on one row,
   and 99px once they wrap, which they do below 400px. The inline `bottom:
   88px` was measured against the shorter of the two, so on a phone the disc
   already overlapped the bar by 11px before anything here touched it. */
@media (max-width: 768px) {

    a[href*="wa.me"][style*="bottom: 88px"] {
        bottom: 86px !important;
    }
}

@media (max-width: 400px) {

    a[href*="wa.me"][style*="bottom: 88px"] {
        bottom: 111px !important;
    }
}

/* At 320 the hero's second button reaches 265px and the disc starts at 264.
   Two more pixels of corner and the two stop touching. */
@media (max-width: 360px) {

    a[href*="wa.me"][style*="position: fixed"] {
        right: 8px !important;
    }
}

/* The disc is fixed, so the end of the document scrolls underneath it and
   the last footer line can finish behind it. A little room at the bottom
   means the page always ends above the button rather than under it. */
@media (max-width: 768px) {

    footer {
        padding-bottom: 72px;
    }
}

/* -------------------------------------------------------------------
   19. Decorative glow behind the organ illustrations

   The seven organ pages sit their hero image on `.pc-visual-stage`, and
   a blurred radial glow is painted behind it with

       .pc-visual-stage::after { position: absolute; inset: -22%; }

   -22% is a bleed on all four sides. On a desktop the container's own
   margins absorb it. On a phone the stage is as wide as the container,
   so 22% of 359px puts 79px of glow past the right edge — and because
   the meta viewport is width=device-width, the layout viewport widens to
   match, taking the fixed header out past the screen with it. Measured
   on gallbladder.html: 27px of sideways scroll at 390, 43px at 320.

   The vertical bleed is what gives the glow its lift, so it stays. Only
   the horizontal bleed goes, and only on phones — the glow is blurred
   46px and sits behind the card at z-index -1, so there is nothing to
   see at the edge it no longer reaches.
   ------------------------------------------------------------------- */
@media (max-width: 767px) {

    .pc-visual-stage::after {
        inset: -22% 0;
    }
}

/* -------------------------------------------------------------------
   20. The drawer's second and third levels, up to the width the drawer
   actually starts at

   The hamburger takes over at 1360px (section 18 above), but the rules
   that turn the Related Disease mega panel into an accordion inside it
   were written against `max-width: 992px`. Between 993 and 1360 — an
   iPad in landscape, a small laptop — the drawer opened and the panel
   inside it was still the desktop floating card: absolutely positioned
   off a 214px column, so it hung off the side of the screen, and its
   second level only appeared on hover, which a touchscreen has none of.
   The same rules are restated here at the drawer's own breakpoint. They
   are all scoped to `.nav-links.open`, so nothing outside an open drawer
   can see them, and below 992 they are identical to what style.css
   already sets.

   `white-space` is the other half: `.nav-links a` is nowrap for the bar,
   where every label is one line by design. In the drawer the same rule
   clipped "Gallbladder cancer and gallstone disease" mid-word at the
   panel edge. Rows in the drawer wrap instead, and the panel is given
   the width to make that a second line rather than five.
   ------------------------------------------------------------------- */
@media (max-width: 1360px) {

    /* A phone has the room; the 214px cap was sized for the labels on the
       first level only, and the third level sits two indents inside it. */
    .nav-links.open {
        width: min(300px, calc(100vw - 20px));
    }

    .nav-links.open a,
    .nav-links.open .dropbtn {
        white-space: normal;
        overflow-wrap: break-word;
    }

    /* Panels flow inline rather than floating off the row above */
    .nav-links.open .advmega-panel {
        width: 100%;
        min-width: 0;
        margin-top: 0;
        padding: 0 0 0.5rem 0.75rem;
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .nav-links.open .advmega-panel .advmega-link {
        min-height: 46px;
        padding: 0.7rem 0;
        border-left: 0;
        border-bottom: 1px solid var(--border-color);
        border-radius: 0;
        font-size: 1rem;
    }

    /* Hover is not a gesture here — `.is-open`, set on tap, is */
    .nav-links.open .advmega-item:hover > .advmega-link {
        background: transparent;
        color: var(--text-main);
    }

    .nav-links.open .advmega-item:hover > .advmega-sub {
        display: none;
    }

    .nav-links.open .advmega-item.is-open > .advmega-link {
        color: var(--primary);
    }

    .nav-links.open .advmega-item.is-open > .advmega-link .advmega-sign {
        color: var(--primary);
        opacity: 1;
    }

    /* the + on the row turns into a x while its list is open */
    .nav-links.open .advmega-item.is-open > .advmega-link .advmega-sign::before {
        content: '\00D7';
    }

    .nav-links.open .advmega-item.is-open > .advmega-sub {
        display: block;
        position: static;
        padding: 0 0 0 0.75rem;
        animation: none;
    }

    .nav-links.open .advmega-sub-inner {
        min-width: 0;
        max-width: none;
        padding: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

    .nav-links.open .advmega-sub-inner a {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 0.62rem 0;
        border-bottom: 1px solid var(--border-color);
        border-radius: 0;
        font-size: 0.95rem;
    }

    .nav-links.open .advmega-sub-inner a:hover {
        padding-left: 0.4rem;
        background: transparent;
    }

    /* Every first-level row a full 44px tall, the panel rows included:
       they were 39px, which is under the size a thumb is aimed at. */
    .nav-links.open > a,
    .nav-links.open .dropbtn {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* -------------------------------------------------------------------
   21. Header controls on a touch screen

   The language pill and the ERP button are 30px and 27px tall — sized
   as text next to a menu that is read with a mouse. On a phone they are
   the only two controls in the bar besides the hamburger, and both were
   under the 44px a tap is aimed at.
   ------------------------------------------------------------------- */
@media (pointer: coarse) and (max-width: 1360px) {

    .als-btn,
    .erp-login-btn {
        min-height: 44px;
    }
}

/* -------------------------------------------------------------------
   22. Patient-journey connectors on the disease pages

   `.adv-journey` is `repeat(auto-fit, minmax(min(230px, 100%), 1fr))` with a
   24px gap, so four steps only fit on one row while `.adv-wrap` is at least
   992px wide — that is 92vw, so a viewport of about 1078px. Below it the
   grid wraps to three columns and then two, but `.adv-jstep::after` only
   stops drawing on `:last-child`. Every step that ends a row but is not the
   last one leaves a dashed connector pointing into the gutter at nothing.

   adv-disease.css already hides the connectors at 768, where the layout is
   a single column. The gap is the tablet range between the two, so the same
   rule is repeated here at the width the row actually breaks.
   ------------------------------------------------------------------- */
@media (max-width: 1080px) {

    .adv-jstep::after {
        display: none;
    }
}

/* -------------------------------------------------------------------
   23. The floating WhatsApp button on the PancreaCare+ pages

   Everywhere else on the site the disc is written inline, which is why
   section 18 above has to reach it through `[style*=...]` selectors and
   `!important`. On the five PancreaCare pages it is a class instead, so
   the size and the offsets are declared once and the phone steps are
   ordinary media queries rather than overrides.

   Desktop is unchanged: 50px, 20px clear of both edges. Below 768 the
   disc keeps a full 16px gutter. The inline version was pulled in to
   10px at 480 and 8px at 360 to dodge the hero button underneath it,
   and at those numbers the green circle reads as clipped against the
   edge of the screen. It also clears the home indicator now, which the
   inline `bottom: 20px` never did.
   ------------------------------------------------------------------- */
.wa-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #25D366;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
}

.wa-fab:hover,
.wa-fab:focus {
    color: #fff;
}

/* Section 16 above puts a 44px tap floor on `footer .fa-brands`, and section
   15 gives every `footer a` 6px of vertical padding. The disc is a child of
   `<footer>` on every page that carries one, so it picks up both: the glyph
   is drawn on a 26px line box at the TOP of a 44px icon box, which lands it
   about 9px above the centre of the circle. The disc is already 50-52px
   across, so it is over the tap floor without the help — the icon gives the
   minimums back and the anchor declares its padding away. The inline-styled
   discs on the rest of the site have the same problem and the same fix. */
.wa-fab,
a[href*="wa.me"][style*="position: fixed"] {
    padding: 0;
}

.wa-fab i,
a[href*="wa.me"][style*="position: fixed"] i {
    min-width: 0;
    min-height: 0;
    line-height: 1;
}

@media (max-width: 767px) {

    .wa-fab {
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom));
        width: 52px;
        height: 52px;
        font-size: 26px;
    }
}

/* related-diseases.html carries `.rda-sticky`, a bar pinned to the bottom
   below 768 at z-index 1200 — 68px tall on one row, and taller once its
   two buttons wrap, which they do below 400px. The disc lifts over it
   rather than sitting behind it. The class beats the block above on
   specificity, so the order of the two does not matter. */
@media (max-width: 768px) {

    .wa-fab.is-above-bar {
        bottom: calc(84px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 400px) {

    .wa-fab.is-above-bar {
        bottom: calc(110px + env(safe-area-inset-bottom));
    }
}

/* -------------------------------------------------------------------
   24. The footer brand column below 300px

   The footer's first column is written inline as `flex: 1; min-width:
   250px`. 250px is a sensible floor for a phone and a hard one for the
   240px KaiOS screen this site still carries steps for: it sets the whole
   document's min-content width, so the page laid out 274px wide and the
   fixed header went past the edge with it. Only an `!important` can reach
   an inline declaration, and it is scoped under 300px so no phone in the
   normal range ever sees it.
   ------------------------------------------------------------------- */
@media (max-width: 300px) {

    footer [style*="min-width: 250px"] {
        min-width: 0 !important;
    }
}

/* -------------------------------------------------------------------
   25. The appointment modal is taller than the phone it opens on

   `.modal` is a fixed, full-height flex box with `overflow: visible`,
   and `.modal-content.contact-modal` is `overflow: hidden` for its
   rounded corners. Neither one scrolls. On a 360px screen the stacked
   panes measure 1472px against a 780px viewport, so everything past the
   fold — the date field, the textarea, the Send Request button and the
   emergency note — was drawn off the bottom of the screen with no way to
   reach it. Same at 375, 390, 414, 480 and 768; only above ~1000px did
   the whole form fit.

   Two steps. Here, at every width, the overlay itself scrolls, which
   also covers a short desktop window. `safe center` keeps the desktop
   centring while refusing to push the top of an over-tall dialog past
   the top edge; the plain `flex-start` before it is the fallback for
   browsers that do not know the keyword (Safari below 16.4), where
   top-aligned is the correct compromise.
   ------------------------------------------------------------------- */
.modal {
    align-items: flex-start;
    align-items: safe center;
    justify-content: center;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 16px 0;
}

/* `margin: auto` on the dialog would consume the free space itself and
   reintroduce the same clipping the alignment above just fixed. */
.modal-content.contact-modal {
    margin: 0;
    max-width: min(1000px, 100%);
}

/* Step two, on a phone: the dialog becomes a full-height sheet that
   scrolls inside itself instead of a card that runs off the screen. The
   close disc goes sticky so it stays reachable at the bottom of a long
   form — it is `position: absolute` on desktop, and an absolute child of
   a scrolling box scrolls away with the content. */
@media (max-width: 768px) {

    .modal {
        padding: 0;
        overflow: hidden;
    }

    /* The entrance slide starts the sheet 50px down the screen, and on a
       heavy page it was observed stalling on that first keyframe — the
       sheet then sat 50px low with its last 50px off the bottom edge. A
       transform on the element that also has to scroll is the wrong
       animation here anyway, so the phone gets the fade alone. */
    .modal-content.contact-modal {
        animation-name: modalFadeIn;
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        flex-direction: column;
        flex-wrap: nowrap;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .contact-modal-close {
        position: sticky;
        top: 12px;
        right: auto;
        align-self: flex-end;
        margin: 12px 12px -52px auto;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
    }

    /* Neither pane may set a floor above the screen width, and neither
       may grow past its share of the sheet. */
    .contact-modal-left,
    .contact-modal-right {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    /* Paired fields: 180px twice plus the gap does not fit a 360px phone
       once the pane padding is taken off, so the floor comes off and the
       pair stacks. */
    .form-row .form-group {
        min-width: min(180px, 100%);
    }

    /* Every control inside the sheet, borders included, stays within the
       pane — `width: 100%` plus 20px of side padding overflows without
       this. */
    .premium-form input,
    .premium-form select,
    .premium-form textarea,
    .premium-form button {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }

    .premium-form textarea {
        min-height: 110px;
    }

    /* Long email addresses and the two phone pairs in the red pane break
       rather than widening it. */
    .cm-row p,
    .cm-row a {
        overflow-wrap: anywhere;
    }
}

/* 360-390px: the pane padding comes down again so the form is not a
   column of 20px gutters, and the heading stops eating a third of the
   first screen. */
@media (max-width: 400px) {

    .contact-modal-left,
    .contact-modal-right {
        padding: 22px 16px;
    }

    .contact-modal-left h2 {
        font-size: 1.75rem;
    }

    .cm-intro {
        font-size: 0.95rem;
        margin-bottom: 24px;
    }

    .contact-modal-right h3 {
        font-size: 1.5rem;
    }

    .premium-form input,
    .premium-form select,
    .premium-form textarea {
        padding: 13px 14px;
    }

    .btn-gradient {
        padding: 15px 18px;
        font-size: 1.02rem;
    }
}

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

/* -------------------------------------------------------------------
   26. The floating discs over the open modal

   The WhatsApp disc sits at z-index 9999 (`.wa-fab`) or 900 (`.hv-wa`)
   against the modal's 2000, so on the five PancreaCare pages it was
   painted on top of the appointment form — a green circle over the
   phone-number field, and a tap target that swallowed the tap meant for
   the field underneath. It goes away while the dialog is open and comes
   back when it closes. `body.modal-open` is toggled by contact-modal.js,
   which watches the dialog rather than the button that opened it, so it
   is correct whichever page's open/close pair ran.
   ------------------------------------------------------------------- */
body.modal-open .wa-fab,
body.modal-open .hv-wa,
body.modal-open a[href*="wa.me"][style*="position: fixed"],
body.modal-open a[href^="tel:"][style*="position: fixed"] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ===================================================================
   The nine-item primary navigation.

   The brief fixes the menu labels, and two of them — "Advitya Hospital
   Baruipur" and "Centres of Excellence" — are far longer than the items
   they replaced. Moving ERP Login out of the header into the footer gave
   back roughly a pill's worth of width, but not all of it: measured at
   1366 with the logo at 132px, the row still wants about 40px more than
   it has at the 0.95rem/0.85rem-gap the bar carries by default.

   So the band between the drawer breakpoint and 1560 trims the gap and
   the tracking rather than the label. Below 1360 the hamburger takes
   over and none of this applies; above 1560 the bar has room to spare
   and keeps the default sizing.
   =================================================================== */
@media (min-width: 1361px) and (max-width: 1560px) {
    .nav-links {
        gap: 0.5rem;
        margin: 0 0.4rem;
    }

    .nav-links a {
        font-size: 0.86rem;
        letter-spacing: 0;
    }

    .location-btn {
        padding: 0.6rem 0.9rem;
        font-size: 0.84rem;
    }
}

/* The two mega panels are wider than the three-column one this rule was
   written for — Patient Services carries three columns of six. Without a
   max-width and a centring transform the right-hand panel runs off the
   viewport on a 1366 screen. */
@media (min-width: 1361px) {
    .dropdown.mega .mega-content {
        max-width: min(960px, calc(100vw - 48px));
    }
}

/* ===================================================================
   Sticky mobile contact bar — Call, WhatsApp, Appointment.

   Injected by js/contact-modal.js on every standard page (the campaign
   landing pages carry their own .lp-sticky and are skipped). Large labelled
   targets rather than bare icons, because the brief asks for a site an
   elderly patient can use without guessing what a symbol means. While it is
   showing, the floating WhatsApp disc stands down so the two never stack.
   =================================================================== */
.adv-mbar {
    display: none;
}

@media (max-width: 768px) {
    .adv-mbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1500;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .97);
        border-top: 1px solid #ECDFDC;
        box-shadow: 0 -10px 26px -14px rgba(94, 16, 25, .32);
    }

    .adv-mbar a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 58px;
        border-radius: 12px;
        font-family: "Outfit", system-ui, sans-serif;
        font-size: .95rem;
        font-weight: 700;
        line-height: 1.1;
        text-decoration: none;
    }

    .adv-mbar a i {
        font-size: 1.25rem;
    }

    .adv-mbar .adv-mbar-call {
        background: #FBF5F3;
        border: 1px solid #ECDFDC;
        color: #8E1B2E;
    }

    .adv-mbar .adv-mbar-wa {
        background: #F1FBF5;
        border: 1px solid #BFE9CF;
        color: #128C7E;
    }

    .adv-mbar .adv-mbar-appt {
        background: linear-gradient(120deg, #5E1019 0%, #8E1B2E 52%, #D9694F 100%);
        color: #FFFFFF;
    }

    body.has-mbar {
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }

    body.has-mbar .hv-wa,
    body.has-mbar a[href*="wa.me"][style*="position: fixed"] {
        display: none !important;
    }

    body.modal-open .adv-mbar {
        display: none;
    }
}

/* -------------------------------------------------------------------
   Floating emergency call disc (injected by contact-modal.js)

   Same size and shape as the WhatsApp disc, in emergency red, stacked
   directly above it when the page carries one. A soft pulse ring marks
   it as urgent; the ring stops for visitors who prefer reduced motion.
   On desktop, hovering shows the number. On phones the WhatsApp disc
   is hidden behind the quick-contact bar, so this disc sits just above
   the bar instead.
   ------------------------------------------------------------------- */
.adv-emg {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 901;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    padding: 0;
    border-radius: 50%;
    background: #D62828;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 10px 26px -8px rgba(214, 40, 40, .6);
    transition: transform .3s ease;
}

.adv-emg.has-wa {
    bottom: 90px;
}

.adv-emg::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #D62828;
    z-index: -1;
    animation: adv-emg-pulse 2s ease-out infinite;
}

.adv-emg i {
    min-width: 0;
    min-height: 0;
    line-height: 1;
}

.adv-emg:hover,
.adv-emg:focus-visible {
    transform: scale(1.06);
    color: #fff;
}

.adv-emg:focus-visible {
    outline: 3px solid #fff;
    box-shadow: 0 0 0 6px #D62828;
}

.adv-emg-tip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    padding: 7px 12px;
    border-radius: 10px;
    background: #fff;
    color: #B01E1E;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .35);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
    pointer-events: none;
}

.adv-emg-tip b {
    display: block;
    color: #1F2937;
    font-size: .95rem;
}

.adv-emg:hover .adv-emg-tip,
.adv-emg:focus-visible .adv-emg-tip {
    opacity: 1;
    visibility: visible;
}

@keyframes adv-emg-pulse {
    0% { transform: scale(1); opacity: .55; }
    100% { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .adv-emg::before {
        animation: none;
        opacity: 0;
    }
}

body.modal-open .adv-emg {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 768px) {
    .adv-emg,
    .adv-emg.has-wa {
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom));
    }

    body.has-mbar .adv-emg {
        bottom: calc(92px + env(safe-area-inset-bottom));
    }

    .adv-emg-tip {
        display: none;
    }
}

/* ==========================================================================
   Desktop navbar fit (laptops)
   --------------------------------------------------------------------------
   Eleven menu items at the enlarged 1rem label size stopped fitting between
   the logo and the language selector: measured at 1366px the last item ended
   21px past the window and the whole actions group (language pill, Locations)
   sat entirely off screen; at 1440 and 1728 it was worse, because the
   Locations pill comes back above 1620.

   The bar is therefore sized in two steps above the drawer breakpoint: the
   labels tighten from 1361px up, and the Locations pill only returns once
   there is genuinely room for it. Below 1361px the drawer takes over and
   none of this applies.
   ========================================================================== */
@media (min-width: 1361px) and (max-width: 1699px) {

    /* both stylesheets set this size, so both are answered here */
    .nav-links a,
    .nav-links .dropbtn,
    body.hv-light .nav-links>a,
    body.hv-light .nav-links .dropbtn,
    body.hv-light .dropbtn {
        font-size: clamp(.78rem, .62vw, .92rem);
    }

    .nav-links,
    body.hv-light .nav-links {
        gap: .1rem;
        margin: 0 .35rem;
    }

    /* the breathing room moves from the gap into the labels themselves, so
       each item has a little padding around its text and a hover area that
       matches what it reads as */
    .nav-links>a,
    .nav-links .dropbtn,
    body.hv-light .nav-links>a,
    body.hv-light .nav-links .dropbtn {
        padding-inline: .34rem;
        --nav-pad: .34rem;
    }

    /* the pill duplicates a link the menu already carries */
    .location-btn {
        display: none;
    }
}

/* Above 1899 the row has room for the full-size labels and the pill. */
@media (min-width: 1900px) {

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

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

    .nav-links>a,
    .nav-links .dropbtn,
    body.hv-light .nav-links>a,
    body.hv-light .nav-links .dropbtn {
        padding-inline: .45rem;
        --nav-pad: .45rem;
    }
}

/* ==========================================================================
   Navbar logo: fixed 209 x 116 box
   --------------------------------------------------------------------------
   The mark is square, so the box is given both dimensions and the image is
   contained inside it: full height, centred, never stretched. Loaded last so
   it answers the height rules in style.css and home-v2.css together.
   ========================================================================== */
.logo img,
body.hv-light .logo img,
.navbar.scrolled .logo img,
body.hv-light .navbar.scrolled .logo img {
    /* The mark is square, so the box is square too: a wider box would reserve
       bar width the menu needs and push the language pill off screen at 1366,
       while showing nothing extra. Height is what sets the visible size. */
    width: 153px;
    height: 153px;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
}

/* phones: the same box, scaled down so it still clears the bar */
@media (max-width: 768px) {

    .logo img,
    body.hv-light .logo img,
    .navbar.scrolled .logo img,
    body.hv-light .navbar.scrolled .logo img {
        width: 88px;
        height: 88px;
    }
}

/* The bar grows with the mark so the logo still has air above and below. */
.nav-container,
body.hv-light .nav-container {
    /* the bar is shorter than the 153px mark on purpose: the logo overhangs
       it slightly rather than the bar growing and eating the hero, which was
       pushing the hero buttons below the fold on a 1366x768 laptop */
    height: 150px;
}

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

@media (max-width: 1360px) {

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

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

/* Anchored sections clear the taller bar. */
#appointment,
.service-block,
.sub-block,
.type-card[id^="svc-"] {
    scroll-margin-top: 170px;
}

/* The 153px mark leaves the menu less room, so the labels tighten one notch
   between the drawer breakpoint and 1500px. */
@media (min-width: 1361px) and (max-width: 1500px) {

    .nav-links a,
    .nav-links .dropbtn,
    body.hv-light .nav-links>a,
    body.hv-light .nav-links .dropbtn,
    body.hv-light .dropbtn {
        font-size: clamp(.72rem, .55vw, .84rem);
    }

    .nav-links>a,
    .nav-links .dropbtn,
    body.hv-light .nav-links>a,
    body.hv-light .nav-links .dropbtn {
        padding-inline: .26rem;
        --nav-pad: .26rem;
    }
}

/* A little of the hero's vertical rhythm comes back, so the first screen
   still ends on the buttons rather than cutting them. */
body.hv-light .hv-hero {
    padding-top: 168px;
}

body.hv-light .hv-hero h1 {
    margin-bottom: 14px;
}

body.hv-light .hv-hero p.hv-lede {
    margin-bottom: 22px;
}

/* The first credential chip hangs off the top of the portrait. With the
   taller bar it came within 8px of the header edge and read as if it were
   tucked under it; it now sits clear. */
body.hv-light .hv-chip-1 {
    top: 64px;
}

/* The portrait card used to start flush against the header, so its rounded
   top was lost. It now drops clear of the bar and the card reads as a card.
   The chip rides with it, so its own offset comes back down. */
@media (min-width: 1025px) {

    /* translate, not margin: a margin grew the hero row and pushed the copy
       column — and its buttons — back below the fold */
    body.hv-light .hv-hero-media {
        transform: translateY(34px);
    }

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

/* ---- Navbar labels one size up -------------------------------------------
   Sized against the bar's remaining room at each width rather than a single
   value: at 1366 the eleven items plus the language pill have about 45px to
   spare, so the gain there is smaller than on a wide screen. */
@media (min-width: 1900px) {

    /* the Locations pill returns here, so the labels stay just under 1rem */
    .nav-links a,
    .nav-links .dropbtn,
    body.hv-light .nav-links>a,
    body.hv-light .nav-links .dropbtn,
    body.hv-light .dropbtn {
        font-size: .99rem;
    }
}

@media (min-width: 1501px) and (max-width: 1899px) {

    .nav-links a,
    .nav-links .dropbtn,
    body.hv-light .nav-links>a,
    body.hv-light .nav-links .dropbtn,
    body.hv-light .dropbtn {
        font-size: clamp(.86rem, .66vw, 1rem);
    }
}

@media (min-width: 1361px) and (max-width: 1500px) {

    .nav-links a,
    .nav-links .dropbtn,
    body.hv-light .nav-links>a,
    body.hv-light .nav-links .dropbtn,
    body.hv-light .dropbtn {
        font-size: clamp(.78rem, .585vw, .9rem);
    }
}

/* ---- Navbar labels, one more step ---------------------------------------
   The wide bands had room to spare, so they take most of the increase. The
   1361-1500 band pays for its own by giving back gutter, item padding and
   the gap between items — there were only 30px free at 1366. */
@media (min-width: 1900px) {

    .nav-links a,
    .nav-links .dropbtn,
    body.hv-light .nav-links>a,
    body.hv-light .nav-links .dropbtn,
    body.hv-light .dropbtn {
        /* 1.06rem overflowed by 43px at 1920 */
        font-size: 1rem;
    }
}

@media (min-width: 1501px) and (max-width: 1899px) {

    .nav-links a,
    .nav-links .dropbtn,
    body.hv-light .nav-links>a,
    body.hv-light .nav-links .dropbtn,
    body.hv-light .dropbtn {
        /* .92rem min overflowed by 25px at 1512 */
        font-size: clamp(.88rem, .70vw, 1.02rem);
    }
}

@media (min-width: 1361px) and (max-width: 1500px) {

    .nav-links a,
    .nav-links .dropbtn,
    body.hv-light .nav-links>a,
    body.hv-light .nav-links .dropbtn,
    body.hv-light .dropbtn {
        font-size: clamp(.84rem, .63vw, .96rem);
    }

    /* the width that pays for it */
    .nav-container,
    body.hv-light .nav-container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .logo-link,
    body.hv-light .logo-link {
        margin-left: 0;
    }

    .logo img,
    body.hv-light .logo img,
    .navbar.scrolled .logo img,
    body.hv-light .navbar.scrolled .logo img {
        width: 132px;
        height: 132px;
    }

    .nav-links,
    body.hv-light .nav-links {
        gap: 0;
        margin: 0 .2rem;
    }

    .nav-links>a,
    .nav-links .dropbtn,
    body.hv-light .nav-links>a,
    body.hv-light .nav-links .dropbtn {
        padding-inline: .2rem;
        --nav-pad: .2rem;
    }
}

/* ---- Navbar logo: raised, not flat ---------------------------------------
   The artwork keeps its own bevel; these two shadows give it a surface to
   sit on. Tight and low-opacity on purpose — a wide blur reads as a glow
   around the letters rather than relief. */
.logo-link {
    position: relative;
    isolation: isolate;
}

.logo img,
body.hv-light .logo img {
    filter:
        drop-shadow(0 1px 1px rgba(94, 16, 25, .28))
        drop-shadow(0 4px 7px rgba(94, 16, 25, .16));
    transition: filter .3s ease, transform .3s ease;
}

.logo-link:hover img,
body.hv-light .logo-link:hover img {
    filter:
        drop-shadow(0 1px 1px rgba(94, 16, 25, .32))
        drop-shadow(0 7px 13px rgba(94, 16, 25, .2));
    transform: translateY(-1px);
}

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

    .logo img,
    .logo-link:hover img,
    body.hv-light .logo img,
    body.hv-light .logo-link:hover img {
        transition: none;
        transform: none;
    }
}

/* ---- Navbar logo: the emboss catches the light ---------------------------
   A light band crosses the mark every few seconds, masked to the artwork so
   it travels over the letters and the pyramid rather than over a rectangle.
   The relief shadows deepen and ease back on the same clock, which is what
   makes the emboss read as a surface rather than a printed shadow. */
.logo-link {
    position: relative;
    isolation: isolate;
}

.logo-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(116deg,
            transparent 38%,
            rgba(255, 255, 255, .8) 48%,
            rgba(255, 255, 255, .25) 55%,
            transparent 66%);
    -webkit-mask: url("../images/advitya_logo_nav.png?v=3") center / contain no-repeat;
    mask: url("../images/advitya_logo_nav.png?v=3") center / contain no-repeat;
    animation: advLogoSheen 7.5s ease-in-out 1.6s infinite;
}

.logo img,
body.hv-light .logo img {
    animation: advLogoRelief 7.5s ease-in-out 1.6s infinite;
}

@keyframes advLogoSheen {

    0%,
    68% {
        opacity: 0;
        transform: translateX(-34%);
    }

    74% {
        opacity: 1;
    }

    90%,
    100% {
        opacity: 0;
        transform: translateX(34%);
    }
}

@keyframes advLogoRelief {

    0%,
    66%,
    100% {
        filter:
            drop-shadow(0 1px 1px rgba(94, 16, 25, .28))
            drop-shadow(0 4px 7px rgba(94, 16, 25, .16));
    }

    78% {
        filter:
            drop-shadow(0 2px 1px rgba(94, 16, 25, .34))
            drop-shadow(0 7px 12px rgba(94, 16, 25, .22));
    }
}

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

    .logo-link::after {
        animation: none;
        opacity: 0;
    }

    .logo img,
    body.hv-light .logo img {
        animation: none;
    }
}

/* ---- Footer logo: a true circular halo -----------------------------------
   Back to the glow, but on a square box this time: padding on an inline-flex
   box made the circle an oval, because the mark is wider than it is tall. A
   fixed square with the mark centred keeps the halo round. */
.hv-foot-logo {
    display: grid;
    place-items: center;
    width: clamp(168px, 14vw, 208px);
    aspect-ratio: 1;
    padding: 0;
    border-radius: 50%;
    background: none;
    box-shadow: none;
    position: relative;
    isolation: isolate;
}

.hv-foot-logo::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: -1;
    background: radial-gradient(circle at 50% 50%,
            rgba(255, 255, 255, .97) 0%,
            rgba(255, 255, 255, .95) 42%,
            rgba(255, 255, 255, .70) 60%,
            rgba(255, 255, 255, .20) 76%,
            rgba(255, 255, 255, 0) 88%);
    animation: advFootHalo 6.5s ease-in-out infinite alternate;
}

/* one slow pass of light across the medallion */
.hv-foot-logo::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(118deg,
            transparent 38%,
            rgba(255, 255, 255, .55) 48%,
            rgba(255, 255, 255, .18) 55%,
            transparent 65%);
    animation: advFootSheen 9s ease-in-out 2.2s infinite;
}

.hv-foot-logo img {
    position: relative;
    z-index: 1;
    height: clamp(74px, 6.4vw, 92px);
    width: auto;
    transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}

.hv-foot-brand:hover .hv-foot-logo img {
    transform: translateY(-2px) scale(1.02);
}

@keyframes advFootHalo {
    from {
        transform: scale(1);
        opacity: .93;
    }

    to {
        transform: scale(1.05);
        opacity: 1;
    }
}

@keyframes advFootSheen {

    0%,
    72% {
        opacity: 0;
        transform: translateX(-34%);
    }

    78% {
        opacity: .9;
    }

    94%,
    100% {
        opacity: 0;
        transform: translateX(34%);
    }
}

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

    .hv-foot-logo::before {
        animation: none;
        transform: none;
        opacity: 1;
    }

    .hv-foot-logo::after {
        animation: none;
        opacity: 0;
    }

    .hv-foot-logo img,
    .hv-foot-brand:hover .hv-foot-logo img {
        transition: none;
        transform: none;
    }
}

/* ---- Navbar labels: a step back down on laptops --------------------------
   The previous step sized the labels to the very edge of the room available;
   on a laptop that read as crowded. Each band gives back roughly 5%. */
@media (min-width: 1900px) {

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

@media (min-width: 1501px) and (max-width: 1899px) {

    .nav-links a,
    .nav-links .dropbtn,
    body.hv-light .nav-links>a,
    body.hv-light .nav-links .dropbtn,
    body.hv-light .dropbtn {
        font-size: clamp(.84rem, .66vw, .96rem);
    }
}

@media (min-width: 1361px) and (max-width: 1500px) {

    .nav-links a,
    .nav-links .dropbtn,
    body.hv-light .nav-links>a,
    body.hv-light .nav-links .dropbtn,
    body.hv-light .dropbtn {
        font-size: clamp(.8rem, .6vw, .9rem);
    }
}

/* ---- Navbar items: a little air around each label ------------------------
   Sized per band again: at 1366 every extra 0.01rem of padding costs the bar
   about 3.5px across eleven items, so the laptop band gets the smallest
   share and the wide bands the most. */
@media (min-width: 1900px) {

    .nav-links>a,
    .nav-links .dropbtn,
    body.hv-light .nav-links>a,
    body.hv-light .nav-links .dropbtn {
        padding-inline: .52rem;
        --nav-pad: .52rem;
    }

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

@media (min-width: 1501px) and (max-width: 1899px) {

    .nav-links>a,
    .nav-links .dropbtn,
    body.hv-light .nav-links>a,
    body.hv-light .nav-links .dropbtn {
        padding-inline: .42rem;
        --nav-pad: .42rem;
    }

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

@media (min-width: 1361px) and (max-width: 1500px) {

    .nav-links>a,
    .nav-links .dropbtn,
    body.hv-light .nav-links>a,
    body.hv-light .nav-links .dropbtn {
        padding-inline: .26rem;
        --nav-pad: .26rem;
    }
}

/* ---- Logo between the drawer breakpoint and the phone layout -------------
   The bar is 120px here but the mark was still 153px, so it overhung by 17px
   at the top and ran up into the crimson utility bar. It now sits inside. */
@media (min-width: 769px) and (max-width: 1360px) {

    .logo img,
    body.hv-light .logo img,
    .navbar.scrolled .logo img,
    body.hv-light .navbar.scrolled .logo img {
        width: 104px;
        height: 104px;
    }
}

/* ---- Navbar: the row gathers to the left --------------------------------
   The bar was space-between, which parked the menu in the middle and the
   actions against the right edge. Everything now sits in one run beside the
   logo, and the spare width falls at the right of the bar. */
@media (min-width: 1361px) {

    .nav-container,
    body.hv-light .nav-container {
        justify-content: flex-start;
        gap: clamp(10px, 1.2vw, 26px);
    }

    .nav-links,
    body.hv-light .nav-links {
        margin-left: clamp(6px, .8vw, 18px);
        margin-right: 0;
    }

    .nav-actions,
    body.hv-light .nav-actions {
        margin-left: clamp(12px, 1.4vw, 28px);
        margin-right: 0;
    }
}

/* ---- Logo to the corner --------------------------------------------------
   The bar keeps only a hairline gutter on the left, so the mark sits in the
   corner of the window; the width that frees goes to the menu. */
.nav-container,
body.hv-light .nav-container {
    padding-left: 8px;
}

.logo,
body.hv-light .logo,
.logo-link,
body.hv-light .logo-link {
    margin-left: 0;
}

/* ---- Why the actions were still pinned right ----------------------------
   .nav-links carries flex: 1 in style.css, so the menu stretched to fill the
   bar and shoved the language pill and Locations button to the far edge,
   leaving a gap after "Contact". The menu now takes only its own width and
   the spare falls after the buttons. */
@media (min-width: 1361px) {

    .nav-links,
    body.hv-light .nav-links {
        flex: 0 0 auto;
    }
}

/* The Locations pill comes back as soon as the row has room for its 160px —
   measured at 1700, where 187px is free after the buttons. */
@media (min-width: 1700px) {
    .location-btn {
        display: inline-flex;
    }
}