/* ==========================================================================
   LifeSpark Pharma — Corporate Design System
   --------------------------------------------------------------------------
   Blueprint rule: "depth of information = authority. Design is secondary."

   The job of this stylesheet is to make dense, factual content legible:
   long tables, specification lists, bios, certificate rows. It is deliberately
   quieter than the previous consumer theme.

   Accessibility (§I): every text colour below is checked at >= 4.5:1 on its
   own background. Do not introduce a lighter grey for body copy.
   ========================================================================== */

:root {
    /* --- Ink scale. Contrast ratios are against --paper (#fff). --- */
    --ink:        #14171d;   /* 16.6:1 — headings                        */
    --ink-2:      #2b3240;   /* 12.1:1 — strong body                     */
    --body:       #3c4452;   /*  9.9:1 — body copy                       */
    --muted:      #5b6472;   /*  6.3:1 — secondary copy, captions        */
    --faint:      #6b7280;   /*  4.8:1 — MINIMUM. Never go lighter.      */

    /* --- Brand --- */
    --red:        #c2192f;   /*  6.4:1 — links and accents on paper      */
    --red-bright: #e01e37;   /*  4.8:1 — rules, marks, non-text accents  */
    --red-deep:   #961224;
    --red-wash:   #fdf2f3;
    --navy:       #16233c;
    --navy-2:     #1e2f4d;

    /* --- Surfaces --- */
    --paper:      #ffffff;
    --paper-2:    #f7f8fa;
    --paper-3:    #eef1f5;
    --line:       #dfe3ea;
    --line-2:     #c9d0da;

    /* --- State --- */
    --ok:         #14713d;
    --ok-wash:    #eef7f1;
    --warn:       #8a5a00;
    --warn-wash:  #fdf6e8;

    --font:  'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --serif: var(--font);

    --header-h: 68px;        /* §I: anchor links must clear the sticky header */
    --marquee-h: 0px;        /* set to a real height by body.has-marquee below */
    --hdr-gap: 16px;         /* the floating header's inset from the viewport edges */
    --wrap: 1180px;
    --wrap-narrow: 820px;
    --gut:  clamp(20px, 5vw, 72px);
    --pulse: #e8392f;

    /* Sharp, flat geometry — no rounded cards or pillowy buttons. */
    --r:    0;
    --r-sm: 0;

    --sh-sm: 0 1px 2px rgba(20, 23, 29, .05);
    --sh-md: 0 1px 3px rgba(20, 23, 29, .06);
    --sh-lg: 0 2px 8px rgba(20, 23, 29, .08);
    --sh-focus: 0 0 0 3px rgba(194, 25, 47, .16);

    /* --- Motion. One easing vocabulary for the whole site, so a card, a
           field and a section all decelerate the same way. --- */
    --ease-soft:  cubic-bezier(.22, .8, .26, .99);   /* settle — entrances   */
    --ease-out:   cubic-bezier(.33, 1, .68, 1);      /* quick UI response    */
    --ease-back:  cubic-bezier(.34, 1.4, .64, 1);    /* small pop, no bounce */
    --stagger: 70ms;                                 /* per-item entrance gap */
}

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

html {
    overflow-x: clip;
    scroll-behavior: smooth;
    /* §I: anchor targets must not hide under the sticky header. */
    scroll-padding-top: calc(var(--header-h) + var(--marquee-h) + var(--hdr-gap) + 16px);
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

body {
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.6;
    color: var(--body);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* The announcement marquee lives inside .hdr, so it travels with it whether
   the header is sticky or fixed. This is the only place its height is set. */
body.has-marquee { --marquee-h: 38px; }
a { color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--red-deep); }

:focus-visible {
    outline: 3px solid var(--red-bright);
    outline-offset: 2px;
    border-radius: 0;
}

/* Skip link — keyboard users land here first. */
.skip {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--navy); color: #fff;
    padding: 12px 20px; font-weight: 600;
}
.skip:focus { left: 8px; top: 8px; }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
    color: var(--ink);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.02em;
}
h1 { font-size: clamp(1.9rem, 1.35rem + 2.2vw, 2.85rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.75rem, 1.4rem + 2vw, 2.65rem);   letter-spacing: -.03em; }
h3 { font-size: clamp(1.15rem, 1.02rem + .5vw, 1.35rem); letter-spacing: -.02em; }
h4 { font-size: 1.0625rem; }
h5 { font-size: .9375rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

strong, b { color: var(--ink-2); font-weight: 650; }

.lead {
    font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
    line-height: 1.6;
    color: var(--ink-2);
}

.eyebrow {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 1.25rem;
}

.small  { font-size: .875rem; }
.muted  { color: var(--muted); }
.faint  { color: var(--faint); }

/* Source/date stamp — §H "Every number needs a source or a date." */
.asof {
    display: inline-block;
    font-size: .75rem;
    font-weight: 500;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: 20px;
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: clamp(72px, 10vh, 132px); }
.section--tint   { background: var(--paper-2); }
.section--line   { border-top: 1px solid var(--line); }
.section--navy   { background: var(--navy); }
.section--tight  { padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); }

.section__head { max-width: 720px; margin-bottom: 2rem; }
.section__head p { color: var(--muted); }

.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 2rem; }

.grid { display: grid; gap: 20px; }

/* These are named for the number of columns they make, so that is what they
   make. They used to be auto-fit tracks, which on a 1180px wrap fitted FOUR
   cards into .grid--3 and THREE into .grid--2 — so a set of five cards came
   out as four and a stranded fifth, and a set of four as three and one. The
   count in the name is now the count on screen. */
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }

@media (min-width: 620px) {
    .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 940px) {
    .grid--3 { grid-template-columns: repeat(3, 1fr); }
    .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.split {
    display: grid;
    gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
    align-items: start;
}
@media (min-width: 900px) {
    .split { grid-template-columns: 1.15fr .85fr; }
    .split--even { grid-template-columns: 1fr 1fr; }
    .split--aside { grid-template-columns: 260px 1fr; }
}

/* --------------------------------------------------------------------------
   Buttons  (Blueprint §F — strict rules on where buttons may appear)
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 1.25rem;
    font: inherit;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1.5px solid transparent;
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s, border-color .15s, color .15s;
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn--primary { background: var(--red); color: #fff; border-color: var(--red); }
.btn--primary:hover { background: var(--red-deep); border-color: var(--red-deep); color: #fff; }

.btn--outline { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--outline:hover { border-color: var(--ink); color: var(--ink); background: var(--paper-2); }

.btn--navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn--navy:hover { background: var(--navy-2); color: #fff; }

.btn--sm { padding: .5rem .9rem; font-size: .875rem; }
.btn--full { width: 100%; }

/* §D-3: "text link with arrow, not a solid button" */
.tlink {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    font-size: .9375rem;
    text-decoration: none;
    color: var(--red);
}
.tlink:hover { text-decoration: underline; }
.tlink::after { content: '\2192'; transition: transform .15s; }
.tlink:hover::after { transform: translateX(3px); }

/* Visually hidden but still announced by a screen reader. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   Announcement marquee — admin-editable text (Dashboard > Website settings).
   Lives INSIDE .hdr, above .hdr__bar, so it scrolls/sticks/fixes as one unit
   with the header rather than needing its own position rules. Height is
   fixed (not padding-driven) so --marquee-h stays exactly in sync with what
   other rules (hero offsets, the mobile drawer) compensate for.
   -------------------------------------------------------------------------- */
.marquee {
    height: var(--marquee-h);
    background: var(--red);
    color: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.marquee__inner {
    display: flex;
    align-items: center;
    width: max-content;
    animation: marquee-scroll 26s linear infinite;
}
.marquee__text {
    flex: none;
    padding-inline: 2rem;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-25%); }
}
/* The text runs in its own track so the social block can sit still on top. */
.marquee__track { flex: 1; min-width: 0; height: 100%; overflow: hidden; display: flex; align-items: center; }

/* --- Social profiles, pinned right ---------------------------------------
   A deeper-red panel with a slanted leading edge, so the scrolling text
   appears to slide in under it rather than being cut off square. */
.marquee__social {
    position: relative; z-index: 1;
    flex: none; height: 100%;
    display: flex; align-items: center; gap: 8px;
    padding: 0 clamp(12px, 2vw, 28px) 0 30px;
    background: var(--red-deep);
    clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%);
}
.marquee__follow {
    margin-right: 4px;
    font-size: .6875rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: #fff; white-space: nowrap;
}
@media (max-width: 620px) { .marquee__follow { display: none; } }

/* Solid white discs: the highest-contrast thing that can sit on the red.
   Each takes its own network's colour on hover. */
.marquee__soc {
    display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: #fff; color: var(--red-deep); text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
    transition: background .2s, color .2s, transform .2s var(--ease-back), box-shadow .2s;
}
.marquee__soc .ico { display: block; stroke-width: 2.1; }
/* The 'f' is a silhouette, not a line drawing — filled, it matches the weight of the other two. */
.marquee__soc--facebook .ico path { fill: currentColor; stroke: none; }
.marquee__soc:hover,
.marquee__soc:focus-visible { color: #fff; transform: translateY(-2px) scale(1.06); box-shadow: 0 4px 10px rgba(0, 0, 0, .28); }
.marquee__soc--linkedin:hover,  .marquee__soc--linkedin:focus-visible  { background: #0a66c2; }
.marquee__soc--facebook:hover,  .marquee__soc--facebook:focus-visible  { background: #1877f2; }
.marquee__soc--instagram:hover, .marquee__soc--instagram:focus-visible {
    background: radial-gradient(circle at 30% 110%, #fdcb52 0%, #fd5949 40%, #d6249f 65%, #285aeb 100%);
}
.marquee__soc:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .marquee__inner { animation: none; }
    .marquee__track { overflow-x: auto; }
    .marquee__soc { transition: none; }
    .marquee__soc:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Header  (§B — 8 dropdowns + Contact + ONE outline button: Partner Login)
   --------------------------------------------------------------------------
   A floating pill, inset from the viewport edges on all sides — rounded
   corners + a lifted shadow instead of an edge-to-edge bar with a hairline.
   -------------------------------------------------------------------------- */
.hdr {
    position: sticky;
    top: var(--hdr-gap);
    z-index: 100;
    margin-inline: var(--hdr-gap);
    background: var(--paper);
    border-radius: 16px;
    /* Two layers: a tight, crisp edge plus a soft wide lift — reads as a
       floating card rather than a flat bar with a blur under it. */
    box-shadow: 0 1px 2px rgba(16, 28, 52, .08), 0 18px 40px -14px rgba(16, 28, 52, .38);
}
.hdr__bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: var(--header-h);
}
.hdr__brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
.hdr__brand img, .hdr__brand svg { height: 38px; width: auto; }

.hdr__brand-txt { display: flex; flex-direction: column; line-height: 1.1; }
.hdr__brand-txt b {
    font-size: 1.0625rem; font-weight: 800; letter-spacing: .01em; color: var(--ink);
}
.hdr__brand-txt span { font-size: .625rem; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); }

/* --- Desktop nav --- */
.nav { display: none; }
@media (min-width: 1200px) { .nav { display: flex; align-items: center; gap: 2px; } }

.nav__item { position: relative; }

.nav__link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .55rem .6rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--ink-2);
    text-decoration: none;
    border-radius: 0;
    white-space: nowrap;
    background: none; border: 0; cursor: pointer; font-family: inherit;
}
.nav__link:hover { color: var(--red); background: var(--paper-2); }
.nav__link[aria-expanded="true"] { color: var(--red); background: var(--paper-2); }
.nav__link.is-current { color: var(--red); }
.nav__link.is-current::after {
    content: ''; position: absolute; left: .6rem; right: .6rem; bottom: -1px;
    height: 2px; background: var(--red-bright);
}
.nav__caret { width: 9px; height: 9px; flex: none; opacity: .55; transition: transform .15s; }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

/* --- Dropdown ---
   The panel is styled in PART 24. It used to be display:none / display:block
   here, which fought that: an element cannot transition out of display:none,
   so the menu snapped instead of opening, and the old link rules layered on
   top of the new ones. Only the things PART 24 does not own are left here. */
.drop { position: absolute; top: calc(100% + 1px); left: 0; }

/* --- The single header button (§B). Outline, never solid-red. --- */
.hdr__login {
    display: none;
    padding: .5rem 1rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--ink);
    border: 1.5px solid var(--line-2);
    border-radius: 0;
    text-decoration: none;
    white-space: nowrap;
}
.hdr__login:hover { border-color: var(--ink); color: var(--ink); background: var(--paper-2); }
@media (min-width: 1200px) { .hdr__login { display: inline-flex; align-items: center; gap: .4rem; } }

/* --- Burger --- */
.burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 0 10px;
    background: none; border: 1px solid var(--line); border-radius: 0;
    cursor: pointer;
}
@media (min-width: 1200px) { .burger { display: none; } }
.burger span { display: block; height: 2px; background: var(--ink); border-radius: 0; transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Mobile drawer --- */
.mnav {
    display: none;
    position: fixed;
    inset: calc(var(--header-h) + var(--marquee-h) + var(--hdr-gap)) 0 0;
    background: var(--paper);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 0 40px;
    z-index: 99;
}
.mnav[data-open="true"] { display: block; }
@media (min-width: 1200px) { .mnav { display: none !important; } }

.mnav__group { border-bottom: 1px solid var(--line); }
.mnav__toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    width: 100%; padding: .95rem 20px;
    background: none; border: 0; cursor: pointer;
    font: inherit; font-size: 1rem; font-weight: 650; color: var(--ink);
    text-align: left;
}
.mnav__toggle .nav__caret { width: 12px; height: 12px; }
.mnav__toggle[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }
.mnav__panel { display: none; padding: 0 20px .8rem; }
.mnav__panel[data-open="true"] { display: block; }
.mnav__panel a {
    display: block; padding: .55rem 0 .55rem .9rem;
    border-left: 2px solid var(--line);
    font-size: .9375rem; color: var(--body); text-decoration: none;
}
.mnav__panel a:hover { color: var(--red); border-left-color: var(--red-bright); }
.mnav__flat {
    display: block; padding: .95rem 20px;
    font-size: 1rem; font-weight: 650; color: var(--ink); text-decoration: none;
    border-bottom: 1px solid var(--line);
}
.mnav__cta { padding: 1.2rem 20px; }

/* --------------------------------------------------------------------------
   Page hero + breadcrumbs
   -------------------------------------------------------------------------- */
.phero {
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
    padding-block: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
}
.phero h1 { margin-bottom: .6rem; }
.phero .lead { max-width: 760px; }

.crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
    font-size: .8125rem; color: var(--faint);
    margin-bottom: .85rem;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--red); text-decoration: underline; }
.crumbs__sep { opacity: .6; }
.crumbs [aria-current] { color: var(--ink-2); font-weight: 600; }

/* --------------------------------------------------------------------------
   Homepage hero  (§D-1 — who you are, not what you sell; max 2 buttons)
   -------------------------------------------------------------------------- */
.hero {
    padding-block: clamp(3rem, 2.2rem + 4vw, 5.5rem);
    background:
        linear-gradient(180deg, #fff 0%, var(--paper-2) 100%);
    border-bottom: 1px solid var(--line);
}
.hero h1 { max-width: 16ch; margin-bottom: 1rem; }
.hero__sub { max-width: 60ch; margin-bottom: 1.75rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --------------------------------------------------------------------------
   Snapshot strip  (§D-2 — hard numbers, static, no buttons)
   -------------------------------------------------------------------------- */
.snap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 0;
    overflow: hidden;
}
.snap__cell { background: var(--paper); padding: 1.25rem 1.15rem; }

/* A cell count that doesn't divide evenly into the auto-fit grid leaves a
   lone cell stranded on its own row, stretched across the full width. Where
   the count is known up front (--n-cells, set inline), lock the grid to
   exactly that many columns instead — every cell the same width, no orphan —
   once there's room; narrower than that, auto-fit still wraps safely. */
@media (min-width: 860px) {
    .snap--even { grid-template-columns: repeat(var(--n-cells, auto-fit), 1fr); }
}
@media (min-width: 560px) and (max-width: 859px) {
    .snap--even { grid-template-columns: repeat(var(--n-cells-md, auto-fit), 1fr); }
}
@media (max-width: 559px) {
    .snap--even { grid-template-columns: repeat(var(--n-cells-sm, auto-fit), 1fr); }
}
.snap__num {
    display: block;
    font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
    font-weight: 750;
    color: var(--ink);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.snap__label { display: block; font-size: .8125rem; color: var(--muted); margin-top: .25rem; }
.snap__asof  { display: block; margin-top: .35rem; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 0;
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.card--link { text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.card--link:hover { border-color: var(--line-2); box-shadow: var(--sh-md); transform: translateY(-2px); }
.card h3 { font-size: 1.0625rem; }
.card p { color: var(--muted); font-size: .9375rem; }
.card__foot { margin-top: auto; padding-top: .5rem; }

.card__kicker {
    font-size: .75rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--faint);
}

/* Numbered/lettered tile used for therapy + dosage-form grids */
.tile {
    display: flex; flex-direction: column; gap: .35rem;
    padding: 1.15rem 1.25rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 3px solid var(--red-bright);
    border-radius: 0;
    text-decoration: none;
}
.tile:hover { background: var(--paper-2); }
.tile strong { color: var(--ink); font-size: 1rem; }
.tile span { font-size: .875rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   Data tables — the backbone of an authority site
   -------------------------------------------------------------------------- */
.tablewrap {
    /* Wide tables scroll inside their own box; the page never scrolls sideways. */
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 0;
    -webkit-overflow-scrolling: touch;
}
table.data {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: .9375rem;
}
table.data caption {
    text-align: left;
    padding: .9rem 1rem;
    font-size: .8125rem;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    background: var(--paper-2);
}
table.data th, table.data td { padding: .8rem 1rem; text-align: left; vertical-align: top; }
table.data thead th {
    background: var(--paper-2);
    color: var(--ink-2);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
table.data tbody tr + tr { border-top: 1px solid var(--line); }
table.data tbody tr:hover { background: var(--paper-2); }
table.data td { color: var(--body); }
table.data .num { font-variant-numeric: tabular-nums; text-align: right; }
table.data .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .875rem; }

/* Specification list — label/value pairs (product, plant, quality pages) */
.spec { border-top: 1px solid var(--line); }
.spec__row {
    display: grid;
    gap: .15rem .5rem;
    padding: .8rem 0;
    border-bottom: 1px solid var(--line);
}
@media (min-width: 640px) { .spec__row { grid-template-columns: 220px 1fr; gap: 1.5rem; } }
.spec__k { font-size: .875rem; font-weight: 600; color: var(--muted); }
.spec__v { color: var(--ink-2); }
.spec__v ul { margin: 0; padding-left: 1.1rem; }

/* --------------------------------------------------------------------------
   Status pills
   -------------------------------------------------------------------------- */
.pill {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .6rem;
    font-size: .75rem; font-weight: 650;
    border-radius: 999px;
    border: 1px solid var(--line-2);
    color: var(--muted);
    background: var(--paper-2);
    white-space: nowrap;
}
.pill--ok   { color: var(--ok);   background: var(--ok-wash);   border-color: #bfe0cb; }
.pill--warn { color: var(--warn); background: var(--warn-wash); border-color: #ecd9a8; }
.pill--rx   { color: var(--red);  background: var(--red-wash);  border-color: #f2c9ce; }

/* --------------------------------------------------------------------------
   People cards  (§E — Board and Leadership carry a lot of authority)
   -------------------------------------------------------------------------- */
.person {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 1.1rem;
    padding: 1.35rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 0;
}
.person__photo {
    width: 84px; height: 84px;
    border-radius: 0;
    object-fit: cover;
    background: var(--paper-3);
}
.person__photo--ph {
    display: grid; place-items: center;
    font-size: 1.5rem; font-weight: 700; color: var(--faint);
}
.person h3 { font-size: 1.0625rem; margin-bottom: .1rem; }
.person__role { font-size: .875rem; font-weight: 600; color: var(--red); }
.person__meta {
    display: flex; flex-wrap: wrap; gap: .3rem .9rem;
    font-size: .8125rem; color: var(--faint);
    margin-top: .35rem;
}
.person__bio { font-size: .9375rem; color: var(--muted); margin-top: .6rem; }

/* --------------------------------------------------------------------------
   Timeline  (§E "About Us > Milestones" — vertical, year by year)
   -------------------------------------------------------------------------- */
.timeline { position: relative; padding-left: 2rem; }
.timeline::before {
    content: ''; position: absolute; left: 6px; top: .5rem; bottom: .5rem;
    width: 2px; background: var(--line);
}
.timeline__item { position: relative; padding-bottom: 1.75rem; }
.timeline__item::before {
    content: ''; position: absolute; left: -2rem; top: .45rem;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--paper); border: 3px solid var(--red-bright);
}
.timeline__year {
    font-size: .8125rem; font-weight: 700; letter-spacing: .06em;
    color: var(--red); font-variant-numeric: tabular-nums;
}
.timeline__item h3 { font-size: 1rem; margin: .1rem 0 .2rem; }
.timeline__item p { font-size: .9375rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   Numbered process steps  (Partner With Us onboarding)
   -------------------------------------------------------------------------- */
.steps { counter-reset: s; display: grid; gap: 1px; background: var(--line);
         border: 1px solid var(--line); border-radius: 0; overflow: hidden; }
.steps__item { counter-increment: s; background: var(--paper); padding: 1.35rem; display: grid; gap: .4rem; }
.steps__item::before {
    content: counter(s, decimal-leading-zero);
    font-size: .8125rem; font-weight: 800; color: var(--red);
    letter-spacing: .06em;
}
.steps__item h3 { font-size: 1rem; }
.steps__item p { font-size: .9375rem; color: var(--muted); }
.steps__when { font-size: .8125rem; font-weight: 600; color: var(--faint); }
@media (min-width: 780px) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: .35rem; }
.field > label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--ink-2);
}
.field__req { color: var(--red); }
.field__hint { font-size: .8125rem; color: var(--faint); }

.field input[type=text], .field input[type=email], .field input[type=tel],
.field input[type=date], .field input[type=file], .field select, .field textarea {
    width: 100%;
    padding: .65rem .8rem;
    font: inherit;
    font-size: .9375rem;
    color: var(--ink);
    background: var(--paper);
    border: 1.5px solid var(--line-2);
    border-radius: 0;
    transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--red-bright);
    box-shadow: 0 0 0 3px rgba(224, 30, 55, .12);
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
    border-color: var(--red-bright);
}
.field__err { font-size: .8125rem; color: var(--red); font-weight: 500; }

.check { display: flex; gap: .6rem; align-items: flex-start; font-size: .875rem; color: var(--muted); }
.check input { margin-top: .25rem; flex: none; width: 16px; height: 16px; accent-color: var(--red-bright); }

.formbox {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 0;
    padding: clamp(1.25rem, 1rem + 1vw, 2rem);
}

/* Honeypot — visually gone, still in the tab order for bots only. */
.hp { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; }

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */
.alert {
    display: grid; gap: .3rem;
    padding: 1rem 1.15rem;
    border-radius: 0;
    border: 1px solid;
    font-size: .9375rem;
}
.alert--ok   { background: var(--ok-wash);   border-color: #bfe0cb; color: #0f5b31; }
.alert--warn { background: var(--warn-wash); border-color: #ecd9a8; color: #6f4900; }
.alert--err  { background: var(--red-wash);  border-color: #f2c9ce; color: var(--red-deep); }
.alert strong { color: inherit; }

/* Editor-only notice: shows which client data is still missing. Local env only. */
.pending {
    display: block;
    padding: .85rem 1rem;
    border: 1px dashed var(--line-2);
    border-radius: 0;
    background: var(--paper-2);
    font-size: .875rem;
    color: var(--muted);
}
.pending b { color: var(--warn); }

/* --------------------------------------------------------------------------
   Prose — blog posts, policies, long-form pages
   -------------------------------------------------------------------------- */
.prose { max-width: 72ch; }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { margin-top: 2.25rem; font-size: 1.4rem; }
.prose h3 { margin-top: 1.75rem; font-size: 1.125rem; }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li + li { margin-top: .4rem; }
.prose blockquote {
    border-left: 3px solid var(--red-bright);
    padding: .25rem 0 .25rem 1.15rem;
    color: var(--muted);
    font-style: italic;
}
.prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.prose th, .prose td { padding: .6rem .8rem; border: 1px solid var(--line); text-align: left; }
.prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .875em; background: var(--paper-3); padding: .1em .35em; border-radius: 0;
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

/* Bulleted fact list used across About/Quality pages */
.ticks { list-style: none; display: grid; gap: .65rem; }
.ticks li { position: relative; padding-left: 1.6rem; color: var(--body); }
.ticks li::before {
    content: '';
    position: absolute; left: 0; top: .5em;
    width: 8px; height: 8px; border-radius: 0;
    background: var(--red-bright);
}
.ticks li strong { display: block; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   Article / news listing
   -------------------------------------------------------------------------- */
.artlist { display: grid; gap: 0; border-top: 1px solid var(--line); }
.artitem {
    display: grid; gap: .35rem;
    padding: 1.35rem 0;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
}
.artitem:hover h3 { color: var(--red); }
.artitem__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
    font-size: .8125rem; color: var(--faint);
}
.artitem h3 { font-size: 1.125rem; }
.artitem p { color: var(--muted); font-size: .9375rem; }

/* Medically-reviewed tag — §E requires this on health articles. */
.medrev {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .75rem; font-weight: 650; color: var(--ok);
    background: var(--ok-wash); border: 1px solid #bfe0cb;
    padding: .15rem .5rem; border-radius: 999px;
}

/* --------------------------------------------------------------------------
   Empty state — used wherever a list has no published entries yet
   -------------------------------------------------------------------------- */
.empty {
    text-align: center;
    padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) 1.5rem;
    border: 1px dashed var(--line-2);
    border-radius: 0;
    background: var(--paper-2);
}
.empty h3 { font-size: 1.0625rem; margin-bottom: .4rem; }
.empty p { color: var(--muted); font-size: .9375rem; max-width: 46ch; margin-inline: auto; }

/* --------------------------------------------------------------------------
   Filters (product listing)
   -------------------------------------------------------------------------- */
.filters {
    display: grid; gap: .9rem;
    padding: 1.15rem;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 0;
    margin-bottom: 1.75rem;
}
@media (min-width: 760px) { .filters { grid-template-columns: repeat(3, 1fr) auto; align-items: end; } }
.filters .field > label { font-size: .8125rem; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .75rem;
    font-size: .8125rem; font-weight: 600;
    color: var(--body);
    background: var(--paper);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    text-decoration: none;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* --------------------------------------------------------------------------
   Product card  (§E — brand, composition, pack, category. NO price.)
   -------------------------------------------------------------------------- */
.prod {
    display: flex; flex-direction: column; gap: .5rem;
    padding: 1.25rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 0;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}
.prod:hover { border-color: var(--line-2); box-shadow: var(--sh-md); }

/* The client's own product card, sitting flush inside the tile. It is a
   white artwork, so it gets a hairline under it rather than a frame — a
   second border inside a bordered card reads as a mistake. */
.prod__shot {
    display: block;
    margin: -1.25rem -1.25rem .25rem;
    border-bottom: 1px solid var(--line);
    background: #fff;
    overflow: hidden;
}
.prod__shot img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    transition: transform .5s var(--ease-soft);
}
.prod:hover .prod__shot img { transform: scale(1.03); }
.prod h3 { font-size: 1.0625rem; }
.prod__comp { font-size: .875rem; color: var(--muted); line-height: 1.5; }
.prod__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; padding-top: .6rem; }

/* --------------------------------------------------------------------------
   Certificate rows  (§E — name, issuer, number, valid till, view link)
   -------------------------------------------------------------------------- */
.certrow {
    display: grid; gap: .35rem;
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--line);
}
@media (min-width: 820px) {
    .certrow { grid-template-columns: 1.4fr 1fr .9fr .8fr auto; align-items: center; gap: 1rem; }
}
.certrow__name { font-weight: 650; color: var(--ink); }
.certrow__k { font-size: .75rem; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
@media (min-width: 820px) { .certrow__k { display: none; } }

/* --------------------------------------------------------------------------
   Enquiry strip  (§D-13 — two paths, equal weight)
   -------------------------------------------------------------------------- */
.paths { display: grid; gap: 20px; }
@media (min-width: 760px) { .paths { grid-template-columns: 1fr 1fr; } }
.path {
    display: flex; flex-direction: column; gap: .5rem;
    padding: 1.65rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 0;
    text-decoration: none;
}
.path:hover { border-color: var(--line-2); box-shadow: var(--sh-md); }
.path h3 { font-size: 1.125rem; }
.path p { color: var(--muted); font-size: .9375rem; }
.path .tlink { margin-top: auto; padding-top: .6rem; }

/* --------------------------------------------------------------------------
   Footer  (§D-14)
   -------------------------------------------------------------------------- */
.ftr { background: var(--navy); color: #c3cddd; padding-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.ftr a { color: #c3cddd; text-decoration: none; }
.ftr a:hover { color: #fff; text-decoration: underline; }

.ftr__top { display: grid; gap: 2rem; padding-bottom: 2.5rem; }
@media (min-width: 900px) { .ftr__top { grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2.5rem; } }
@media (min-width: 1080px) { .ftr__top { grid-template-columns: 1.6fr repeat(3, 1fr); } }

.ftr__brand b { display: block; color: #fff; font-size: 1.0625rem; margin-bottom: .5rem; }
.ftr__addr { font-size: .875rem; line-height: 1.7; font-style: normal; }

.ftr__ids {
    display: grid; gap: .2rem;
    margin-top: .9rem;
    font-size: .8125rem;
    color: #93a3bb;
}
.ftr__ids span { font-variant-numeric: tabular-nums; }

.ftr__col h4 {
    color: #fff; font-size: .75rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; margin-bottom: .85rem;
}
.ftr__col a { display: block; font-size: .875rem; padding: .22rem 0; }

.ftr__legal {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-block: 1.35rem;
    display: grid; gap: .85rem;
    font-size: .8125rem;
    color: #93a3bb;
}
.ftr__legal-links { display: flex; flex-wrap: wrap; gap: .4rem 1.15rem; }
.ftr__legal-links a { font-size: .8125rem; }

/* The mandatory medicine line (§D-14). */
.ftr__disclaimer {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-block: 1.1rem;
    font-size: .8125rem;
    color: #a9b7cc;
}

/* --------------------------------------------------------------------------
   Cookie consent  (§I — must be live before launch)
   -------------------------------------------------------------------------- */
.cookie {
    position: fixed;
    right: 16px; bottom: 16px;
    z-index: 150;
    width: min(400px, calc(100vw - 32px));
    background: var(--paper);
    border: 1px solid var(--line-2);
    border-radius: 0;
    box-shadow: var(--sh-lg);
    padding: 1.15rem 1.25rem;
    display: none;
}
.cookie[data-open="true"] { display: grid; gap: .85rem; }
.cookie p { font-size: .875rem; color: var(--muted); }
.cookie__row { display: flex; flex-wrap: wrap; gap: .6rem; }
@media (max-width: 560px) { .cookie { left: 16px; right: 16px; width: auto; } }

/* --------------------------------------------------------------------------
   Print — certificates, product pages and policies get printed a lot
   -------------------------------------------------------------------------- */
@media print {
    .hdr, .ftr, .cookie, .burger, .mnav, .skip, .btn { display: none !important; }
    body { color: #000; font-size: 11pt; }
    .section { padding-block: 1rem; }
    a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #444; }
}

/* ==========================================================================
   PART 2 — Motion, imagery and the brand pulse
   --------------------------------------------------------------------------
   Everything below is presentation only. None of it invents a fact, animates
   a number (§D-2 forbids counters) or creates urgency (§F). Motion is used to
   pace a long, dense page — not to sell.

   Every effect is disabled under prefers-reduced-motion at the end of the file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Scroll reveal
   Elements start slightly low and faded, and settle as they enter view.
   `.is-in` is added by IntersectionObserver; without JS everything is visible
   because `.reveal` only dims once JS marks the document as capable.
   -------------------------------------------------------------------------- */
.js .reveal {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity .75s var(--ease-soft), transform .75s var(--ease-soft);
    /* --i is written by the script for every member of a group, so a row of
       twelve cards staggers as cleanly as a row of three. */
    transition-delay: calc(var(--i, 0) * var(--stagger));
}
/* will-change is set only while an element is still waiting, and dropped the
   moment it lands — a long page must not hold hundreds of promoted layers. */
.js .reveal:not(.is-in) { will-change: opacity, transform; }
.js .reveal.is-in { opacity: 1; transform: none; will-change: auto; }

/* --------------------------------------------------------------------------
   The ECG pulse — carried over from the previous theme.
   It is the one piece of brand motion on the site. Used as a section rule,
   never across content.
   -------------------------------------------------------------------------- */
.pulse-rule {
    position: relative;
    height: clamp(34px, 4vw, 54px);
    overflow: hidden;
    pointer-events: none;
}
.pulse-rule svg { width: 100%; height: 100%; display: block; overflow: visible; }

.pulse-rule__base {
    stroke: rgba(224, 30, 55, .18);
    stroke-width: 2;
    fill: none;
}
.pulse-rule__trace {
    stroke: var(--red-bright);
    stroke-width: 2.4;
    fill: none;
    stroke-dasharray: 9 91;
    stroke-dashoffset: 100;
    animation: ecgTravel 6s linear infinite;
}
.pulse-rule--slow .pulse-rule__trace { animation-duration: 9s; }

@keyframes ecgTravel { to { stroke-dashoffset: 0; } }

/* On a dark section the base line needs to read against navy. */
.section--navy .pulse-rule__base { stroke: rgba(255, 255, 255, .16); }

/* Header — the floating shadow deepens slightly once the page scrolls. */
.hdr { transition: box-shadow .25s; }

/* Thin brand progress bar under the header. Reading progress only — this is
   not a countdown or a scarcity device. */
.hdr__progress {
    position: absolute; left: 0; bottom: -1px;
    height: 2px; width: 100%;
    transform: scaleX(var(--p, 0));
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--red-bright), #ff6a5e);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Hero — ambient depth behind the headline
   -------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; }

.hero__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

/* soft brand glow, drifting slowly */
.hero__bg::before,
.hero__bg::after {
    content: '';
    position: absolute;
    border-radius: 50%;
}
.hero__bg::before {
    width: 46vw; height: 46vw; min-width: 420px; min-height: 420px;
    top: -18%; right: -10%;
    background: radial-gradient(closest-side, rgba(224,30,55,.10), rgba(224,30,55,.03) 55%, transparent 72%);
    animation: drift1 26s ease-in-out infinite alternate;
}
.hero__bg::after {
    width: 38vw; height: 38vw; min-width: 340px; min-height: 340px;
    bottom: -22%; left: -12%;
    background: radial-gradient(closest-side, rgba(22,35,60,.10), rgba(22,35,60,.03) 55%, transparent 72%);
    animation: drift2 32s ease-in-out infinite alternate;
}
@keyframes drift1 { from { transform: none } to { transform: translate(-50px, 40px) scale(1.08) } }
@keyframes drift2 { from { transform: none } to { transform: translate(60px, -30px) scale(.94) } }

/* engineering grid, faded out towards the bottom */
.hero__grid-lines {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(22,35,60,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22,35,60,.045) 1px, transparent 1px);
    background-size: 54px 54px;
    -webkit-mask-image: radial-gradient(120% 85% at 50% 0%, #000 20%, transparent 76%);
            mask-image: radial-gradient(120% 85% at 50% 0%, #000 20%, transparent 76%);
}

.hero__inner { position: relative; z-index: 1; }
@media (min-width: 960px) {
    .hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
}

.hero__art { display: none; }
@media (min-width: 960px) { .hero__art { display: block; } }

/* the capsule breathes very slightly */
.hero__capsule { animation: floatY 7s ease-in-out infinite; transform-origin: center; }
@keyframes floatY { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-9px) } }

/* the trace inside the capsule draws itself, once */
.hero__trace {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: drawTrace 2.6s cubic-bezier(.6,0,.2,1) .4s forwards;
}
@keyframes drawTrace { to { stroke-dashoffset: 0 } }

/* floating credential chips */
.hero__chip {
    position: absolute;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .8rem;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(8px);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: var(--sh-md);
    font-size: .8125rem; font-weight: 600; color: var(--ink-2);
    white-space: nowrap;
    animation: floatY 6s ease-in-out infinite;
}
.hero__chip .ico { color: var(--red); }
.hero__chip--1 { top: 8%;  left: -4%; animation-delay: -1s }
.hero__chip--2 { top: 44%; right: -6%; animation-delay: -3s }
.hero__chip--3 { bottom: 8%; left: 6%; animation-delay: -5s }

/* --------------------------------------------------------------------------
   Icons
   -------------------------------------------------------------------------- */
.ico { flex: none; display: block; }

.ico-badge {
    display: inline-grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: 0;
    background: var(--red-wash);
    color: var(--red);
    border: 1px solid #f4d3d8;
    margin-bottom: .35rem;
}
.ico-badge--navy { background: #eef1f7; color: var(--navy); border-color: #dbe2ee; }
.ico-badge--ok   { background: var(--ok-wash); color: var(--ok); border-color: #bfe0cb; }

/* Tiles and cards lift their icon on hover */
.tile .ico-badge, .card--link .ico-badge { transition: transform .2s, background-color .2s; }
.tile:hover .ico-badge, .card--link:hover .ico-badge { transform: translateY(-2px); background: #fbe6e9; }

/* --------------------------------------------------------------------------
   Card polish
   -------------------------------------------------------------------------- */
.card--link { position: relative; overflow: hidden; }

/* a hairline of brand colour wipes in along the top edge on hover */
.card--link::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--red-bright), #ff8577);
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform .3s cubic-bezier(.22,.8,.26,.99);
}
.card--link:hover::before { transform: scaleX(1); }

.tile { position: relative; transition: transform .18s, box-shadow .18s, border-left-color .18s; }
.tile:hover { transform: translateX(3px); box-shadow: var(--sh-sm); }

/* --------------------------------------------------------------------------
   Figures and photographs
   -------------------------------------------------------------------------- */
.figure {
    margin: 0;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 0;
    overflow: hidden;
}
.figure img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.22,.8,.26,.99);
}
.figure:hover img { transform: scale(1.03); }
.figure figcaption {
    padding: .8rem 1rem;
    font-size: .875rem;
    color: var(--muted);
    border-top: 1px solid var(--line);
}

/*
   Photo placeholder.

   We do NOT put a stock photograph of someone else's factory here. §K forbids
   showing what we cannot prove, and a purchased lab photo captioned as our
   plant is exactly that. This slot states plainly what belongs in it, and is
   replaced the moment a real photograph is uploaded.
*/
.photo-slot {
    position: relative;
    display: grid;
    place-content: center;
    gap: .5rem;
    text-align: center;
    aspect-ratio: 4 / 3;
    padding: 1.5rem;
    border: 1px dashed var(--line-2);
    border-radius: 0;
    background:
        repeating-linear-gradient(45deg,
            transparent 0 10px,
            rgba(22,35,60,.022) 10px 20px),
        var(--paper-2);
    color: var(--faint);
}
.photo-slot .ico { margin-inline: auto; color: var(--line-2); }
.photo-slot strong { font-size: .875rem; color: var(--muted); font-weight: 650; }
.photo-slot span { font-size: .75rem; max-width: 26ch; margin-inline: auto; line-height: 1.5; }

/* --------------------------------------------------------------------------
   India map  (§D-8, §E — every state coloured, priority markets called out)
   --------------------------------------------------------------------------
   Built from district-level boundaries dissolved to states. Client note,
   2026-09-14: the map must never sit empty, so every state fills orange by
   default (pan-India marketing presence) — 'priority_states' in
   config/company.php overrides a smaller set to red, and the corporate
   office's own state darker still.
   -------------------------------------------------------------------------- */
.in-map { width: 100%; height: auto; display: block; }

.in-map__state {
    fill: #f3a953;
    stroke: #ffffff;
    stroke-width: 1;
    stroke-linejoin: round;
    transition: fill .25s;
}
.in-map__state:hover { fill: #e0953f; }
.in-map__state.is-priority { fill: var(--red); }
.in-map__state.is-priority:hover { fill: var(--red-bright); }
.in-map__state.is-hq { fill: var(--red-deep); }
.in-map__state.is-hq:hover { fill: var(--red-deep); }

.mapbox {
    display: grid;
    gap: 1.5rem;
    align-items: start;
}
@media (min-width: 880px) { .mapbox { grid-template-columns: minmax(0,1fr) 260px; } }

.mapkey { display: grid; gap: .6rem; }
.mapkey__row { display: flex; align-items: center; gap: .6rem; font-size: .875rem; color: var(--muted); }
.mapkey__sw { width: 15px; height: 15px; border-radius: 0; border: 1px solid rgba(0,0,0,.08); flex: none; }

/* --------------------------------------------------------------------------
   Stat strip — subtle entrance, but the NUMBER never animates (§D-2)
   -------------------------------------------------------------------------- */
.snap__cell { position: relative; transition: background-color .2s; }
.snap__cell:hover { background: var(--paper-2); }
.snap__cell::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--red-bright);
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform .35s cubic-bezier(.22,.8,.26,.99);
}
.js .snap.is-in .snap__cell::after { transform: scaleX(1); }
.js .snap.is-in .snap__cell:nth-child(2)::after { transition-delay: .08s }
.js .snap.is-in .snap__cell:nth-child(3)::after { transition-delay: .16s }
.js .snap.is-in .snap__cell:nth-child(4)::after { transition-delay: .24s }
.js .snap.is-in .snap__cell:nth-child(5)::after { transition-delay: .32s }
.js .snap.is-in .snap__cell:nth-child(6)::after { transition-delay: .40s }

/* --------------------------------------------------------------------------
   Timeline + steps entrance
   -------------------------------------------------------------------------- */
.js .timeline__item { opacity: 0; transform: translateY(16px); transition: opacity .6s, transform .6s; }
.js .timeline__item.is-in { opacity: 1; transform: none; }
.timeline__item::before { transition: transform .3s, background-color .3s; }
.timeline__item.is-in::before { animation: pinPop .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes pinPop { 0% { transform: scale(.2) } 100% { transform: scale(1) } }

.steps__item { transition: background-color .2s; }
.steps__item:hover { background: var(--paper-2); }

/* --------------------------------------------------------------------------
   Prefers-reduced-motion — everything above degrades to a static page
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .js .reveal,
    .js .timeline__item { opacity: 1 !important; transform: none !important; transition: none !important; }
    .pulse-rule__trace,
    .hero__capsule, .hero__chip, .hero__trace,
    .hero__bg::before, .hero__bg::after { animation: none !important; }
    .hero__trace { stroke-dashoffset: 0 }
    .js .snap.is-in .snap__cell::after { transform: scaleX(1); transition: none }
    .figure:hover img { transform: none }
    .card--link::before { transition: none }
}

/* ==========================================================================
   PART 3 — Brand lockup
   ========================================================================== */

/* --------------------------------------------------------------------------
   Brand lockup — the original mark. flex:none stops the mark collapsing
   inside the flex header, and the descriptor never wraps.
   -------------------------------------------------------------------------- */
.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--ink);
    text-decoration: none;
}
.brand-lockup__mark { height: 40px; width: auto; flex: none; }
.brand-lockup__text { display: grid; line-height: 1; text-align: left; }
.brand-lockup__text b {
    font-weight: 800;
    font-size: 19px;
    letter-spacing: .012em;
    color: inherit;
    white-space: nowrap;
}
.brand-lockup__text i {
    font-style: normal;
    font-size: 8.4px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--faint);
    margin-top: 4px;
    white-space: nowrap;
}
@media (max-width: 420px) {
    .brand-lockup__mark { height: 34px; }
    .brand-lockup__text b { font-size: 16px; }
    .brand-lockup__text i { font-size: 7.4px; letter-spacing: .16em; }
}

/* Footer variant sits on navy. */
.ftr .brand-lockup { color: #fff; }
.ftr .brand-lockup__text i { color: #93a3bb; }
.ftr .brand-lockup__mark path:first-child { fill: #fff; stroke: #fff; }

/* --------------------------------------------------------------------------
   Fix: scope the hero artwork sizing to the illustration itself.
   `.hero__art svg` also matched the icons inside the floating chips and blew
   them up to full width.
   -------------------------------------------------------------------------- */
.hero__art > svg { width: 100%; height: auto; }
.hero__chip .ico { width: 15px; height: 15px; flex: none; }

/* ==========================================================================
   PART 4 — Header width, card artwork, feature bands
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header runs full width.
   Eight menu groups, a lockup and a button do not fit inside the 1180px
   content measure — the bar gets its own wider container and larger gaps so
   the menu can breathe.
   -------------------------------------------------------------------------- */
:root { --header-h: 78px; }

.hdr__bar {
    max-width: 1720px;
    padding-inline: clamp(20px, 3vw, 48px);
    gap: clamp(1rem, 2.5vw, 2.5rem);
}
.hdr__brand { margin-right: 0; }

.nav { gap: clamp(2px, .5vw, 10px); margin-inline: auto; }

.nav__link {
    padding: .6rem clamp(.5rem, .8vw, .9rem);
    font-size: .9375rem;
    letter-spacing: -.005em;
}
.nav__link.is-current::after {
    left: clamp(.5rem, .8vw, .9rem);
    right: clamp(.5rem, .8vw, .9rem);
    bottom: -2px;
}

/* The tight-zone handling that used to live here (1080–1300px: smaller type,
   less padding) is superseded by the capsule sizing in PART 24b, which
   already starts tight at 1200px (where the drawer hands off) and only
   grows comfortable at 1400px. */

/* The dropdowns anchor to the bar, so widen their reach too. */
/* superseded by PART 24 */

/* --------------------------------------------------------------------------
   Hover polish
   -------------------------------------------------------------------------- */
.card--link {
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.card--link:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }

/* Path cards (the enquiry strip) get the same treatment. */
.path { transition: border-color .2s, box-shadow .25s, transform .25s; }
.path:hover { transform: translateY(-3px); }

/* Tiles: the icon badge slides, the arrow appears. */
.tile { overflow: hidden; }
.tile::after {
    content: '\2192';
    position: absolute; right: 1.1rem; top: 1.1rem;
    color: var(--red);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .2s, transform .2s;
}
.tile:hover::after { opacity: 1; transform: none; }

/* Table rows flash when the map scrolls to them. */
tr.is-flash { animation: rowFlash 1.6s ease-out; }
@keyframes rowFlash {
    0%, 40% { background: var(--red-wash); }
    100%    { background: transparent; }
}

/* --------------------------------------------------------------------------
   Feature band — full-bleed navy section with artwork behind it
   -------------------------------------------------------------------------- */
.band {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, var(--navy) 0%, #1d3054 55%, #24406e 100%);
    color: #dbe3ef;
    padding-block: clamp(2.75rem, 2.2rem + 2.5vw, 4.25rem);
}
.band h2, .band h3 { color: #fff; }
.band p { color: #b4c2d8; }
.band a:not(.btn) { color: #fff; }

.band__art {
    position: absolute; inset: 0;
    opacity: .5;
    pointer-events: none;
}
.band__art svg { width: 100%; height: 100%; }
.band > .wrap { position: relative; z-index: 1; }

.band .btn--outline { color: #fff; border-color: rgba(255,255,255,.4); }
.band .btn--outline:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }

.band__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,.14);
}
.band__stat b {
    display: block;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    font-weight: 750; color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.band__stat span { font-size: .8125rem; color: #9fb0c9; }

@media (prefers-reduced-motion: reduce) {
    .card--link { transition: none !important; }
    .card--link:hover { transform: none }
    tr.is-flash { animation: none }
}

/* --------------------------------------------------------------------------
   Band + map corrections
   -------------------------------------------------------------------------- */

/* The default red eyebrow only reaches 2.6:1 on navy. This one clears 6.6:1. */
.band .eyebrow { color: #ff8577; }
.band .card__kicker { color: #9fb0c9; }

/* The India map is tall and mostly empty at full width — cap it so it reads as
   a figure rather than taking over the section. */
.mapbox .in-map { max-height: 460px; width: auto; margin-inline: auto; }
@media (max-width: 880px) { .mapbox .in-map { max-height: 380px; } }

/* Give the map a surface of its own so it does not float on the section tint. */
.mapbox > div:first-child {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 0;
    padding: 1.25rem;
}

/* ==========================================================================
   PART 5 — Photography
   --------------------------------------------------------------------------
   Editorial imagery: laboratory, packaging, warehouse and workplace scenes.

   IMPORTANT — these are licensed stock photographs, used decoratively behind
   headings. They are never captioned as our facility, our team or our plant,
   because §K forbids presenting what we cannot prove. The labelled photo slots
   on Manufacturing, Careers and Gallery are where the company's own
   photographs go, and those slots stay empty until real ones arrive.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Photo page hero — image behind, navy scrim over, white type on top
   -------------------------------------------------------------------------- */
.phero--photo {
    position: relative;
    isolation: isolate;
    border-bottom: 0;
    padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
    background: var(--navy);
}
.phero--photo picture,
.phero--photo img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -2;
}
/* The scrim does the accessibility work: it keeps white type above 4.5:1 no
   matter how bright the photograph behind it is. */
.phero--photo::before {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(100deg, rgba(13,20,32,.94) 0%, rgba(13,20,32,.86) 45%, rgba(13,20,32,.62) 100%),
        linear-gradient(0deg, rgba(13,20,32,.5), rgba(13,20,32,.5));
}
.phero--photo h1 { color: #fff; }
.phero--photo .lead { color: #cdd8e8; }
.phero--photo .crumbs { color: #93a3bb; }
.phero--photo .crumbs a { color: #b9c6d8; }
.phero--photo .crumbs a:hover { color: #fff; }
.phero--photo .crumbs [aria-current] { color: #fff; }
.phero--photo .eyebrow { color: #ff8577; }

/* A thin brand rule closes the hero off from the content below. */
.phero--photo::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--red-bright), #ff8577 55%, transparent);
}

/* --------------------------------------------------------------------------
   Photo section — a full-bleed band with an image behind it
   -------------------------------------------------------------------------- */
.section--photo {
    position: relative;
    isolation: isolate;
    background: var(--navy);
    color: #dbe3ef;
}
.section--photo picture, .section--photo > img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -2;
}
.section--photo::before {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(105deg, rgba(13,20,32,.95) 0%, rgba(13,20,32,.8) 55%, rgba(13,20,32,.55) 100%);
}
.section--photo h2, .section--photo h3 { color: #fff; }
.section--photo p { color: #b8c5da; }
.section--photo .eyebrow { color: #ff8577; }
.section--photo .btn--outline { color: #fff; border-color: rgba(255,255,255,.42); }
.section--photo .btn--outline:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

/* --------------------------------------------------------------------------
   Split feature — image one side, copy the other
   -------------------------------------------------------------------------- */
.feature { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3rem); align-items: center; }
@media (min-width: 900px) {
    .feature { grid-template-columns: 1fr 1fr; }
    .feature--flip > :first-child { order: 2; }
}
.feature__img {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    box-shadow: var(--sh-lg);
    aspect-ratio: 4 / 3;
}
.feature__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,.8,.26,.99); }
.feature__img:hover img { transform: scale(1.04); }

/* A brand corner bracket, so the photo reads as designed rather than dropped in. */

/* Small print marking imagery as illustrative, wherever a photo could be
   mistaken for our own facility. */
.imgnote {
    font-size: .75rem;
    line-height: 1.5;
    color: var(--faint);
    margin-top: .5rem;
}
.section--photo .imgnote, .phero--photo .imgnote { color: #8fa0b8; }

@media (prefers-reduced-motion: reduce) {
    .feature__img img { transition: none !important; transform: none !important; }
}

/* ==========================================================================
   PART 6 — Hero, rebuilt on photography
   ========================================================================== */
.hero {
    position: relative;
    isolation: isolate;
    background: #0d1420;
    border-bottom: 0;
    padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem);
    overflow: hidden;
}

.hero__photo {
    position: absolute; inset: 0; z-index: -3;
    width: 100%; height: 100%;
    object-fit: cover;
    /* a slow drift so the still reads as alive without distracting */
    animation: heroPan 32s ease-in-out infinite alternate;
    transform-origin: 60% 40%;
}
@keyframes heroPan { from { transform: scale(1.06) } to { transform: scale(1.14) translateX(-1.5%) } }

/* Scrim. Two layers: a hard left wedge for the type, and an overall floor so
   white copy clears 4.5:1 wherever the photograph happens to be bright. */
.hero::before {
    content: '';
    position: absolute; inset: 0; z-index: -2;
    background:
        linear-gradient(100deg, rgba(9,14,24,.96) 0%, rgba(9,14,24,.9) 38%, rgba(9,14,24,.55) 68%, rgba(9,14,24,.35) 100%),
        linear-gradient(180deg, rgba(9,14,24,.55), rgba(9,14,24,.65));
}

/* Brand pulse washing across the artwork side. */

.hero__grid-lines {
    position: absolute; inset: 0; z-index: -1;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: radial-gradient(110% 80% at 70% 30%, #000 10%, transparent 72%);
            mask-image: radial-gradient(110% 80% at 70% 30%, #000 10%, transparent 72%);
}

/* --- Type on the dark hero --- */
.hero h1 { color: #fff; max-width: 17ch; letter-spacing: -.025em; }
.hero .lead, .hero__sub { color: #c6d2e4; }

/* A small credential line above the headline. */
.hero__eyebrow {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .4rem .85rem .4rem .5rem;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(10px);
    border-radius: 999px;
    font-size: .8125rem; font-weight: 600;
    color: #e4ebf6;
    letter-spacing: .01em;
}
.hero__eyebrow .ico { color: #ff8577; }
.hero__eyebrow b { color: #fff; font-weight: 700; }

.hero .btn--outline { color: #fff; border-color: rgba(255,255,255,.42); background: transparent; }
.hero .btn--outline:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

/* --- Key facts strip sitting inside the hero --- */
.hero__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 1.25rem 2rem;
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255,255,255,.16);
    max-width: 620px;
}
.hero__fact b {
    display: block;
    font-size: clamp(1.35rem, 1.1rem + .9vw, 1.75rem);
    font-weight: 750; color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    line-height: 1.15;
}
.hero__fact span { display: block; font-size: .8125rem; color: #9fb0c9; margin-top: .2rem; }

/* --- Artwork column --- */
.hero__inner { position: relative; z-index: 1; }
@media (min-width: 1000px) {
    .hero__inner { grid-template-columns: 1.1fr .9fr; gap: 3.5rem; }
}

/* the capsule now sits on dark, so its chips flip to a glass-dark treatment */
.hero__chip {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.2);
    color: #eaf0f8;
    box-shadow: 0 10px 30px -12px rgba(0,0,0,.6);
}
.hero__chip .ico { color: #ff8577; }

@media (prefers-reduced-motion: reduce) {
    .hero__photo { animation: none; transform: scale(1.06); }
}

/* Chip placement: keep them clear of the capsule itself. */
.hero__chip--1 { top: 2%;   left: -2%;   right: auto; bottom: auto; }
.hero__chip--2 { top: 42%;  right: -8%;  left: auto;  bottom: auto; }
.hero__chip--3 { bottom: 4%; left: 2%;   top: auto;   right: auto; }
@media (min-width: 1000px) and (max-width: 1200px) {
    .hero__chip--2 { right: -2%; }
    .hero__chip { font-size: .75rem; padding: .38rem .65rem; }
}

/* ==========================================================================
   PART 7 — Premium pass
   --------------------------------------------------------------------------
   Two problems this fixes:

   1. The engineering grid over the hero photograph. Two competing textures in
      one frame read as noise, so the grid is gone.

   2. Orphaned cards. Five divisions in a four-column grid left one card alone
      on a second row, which is the single most obvious "unfinished" tell on a
      layout. Sections with five items now get layouts built for five.
   ========================================================================== */

/* Grid overlay retired — the photograph carries the hero on its own. */
.hero__grid-lines { display: none; }

/* --------------------------------------------------------------------------
   Hero — cinematic, parallax, no competing texture
   -------------------------------------------------------------------------- */
.hero {
    min-height: min(88vh, 820px);
    display: flex;
    align-items: center;
    padding-block: clamp(4rem, 3rem + 6vw, 8rem);
}

.hero__photo {
    /* taller than the frame so the parallax has room to travel */
    height: 128%;
    top: -14%;
    animation: none;
    will-change: transform;
    transform: translate3d(0, var(--par, 0px), 0) scale(1.04);
}

/* A cleaner scrim: a strong left wedge and a deep floor, nothing else. */
.hero::before {
    background:
        linear-gradient(96deg,
            rgba(7,11,19,.97) 0%,
            rgba(7,11,19,.93) 30%,
            rgba(7,11,19,.72) 58%,
            rgba(7,11,19,.42) 100%),
        linear-gradient(180deg, rgba(7,11,19,.35) 0%, rgba(7,11,19,.72) 100%);
}

.hero h1 {
    font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem);
    line-height: 1.06;
    letter-spacing: -.032em;
    max-width: 15ch;
}
.hero__sub { font-size: clamp(1.0625rem, 1rem + .4vw, 1.1875rem); max-width: 52ch; }

/* Headline settles in as a soft clip-reveal rather than a plain fade. */
.js .hero h1, .js .hero__eyebrow, .js .hero__sub, .js .hero__cta, .js .hero__facts {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .85s cubic-bezier(.22,.8,.26,.99), transform .85s cubic-bezier(.22,.8,.26,.99);
}
.js .hero.is-in .hero__eyebrow { opacity: 1; transform: none; transition-delay: .05s }
.js .hero.is-in h1             { opacity: 1; transform: none; transition-delay: .14s }
.js .hero.is-in .hero__sub     { opacity: 1; transform: none; transition-delay: .26s }
.js .hero.is-in .hero__cta     { opacity: 1; transform: none; transition-delay: .36s }
.js .hero.is-in .hero__facts   { opacity: 1; transform: none; transition-delay: .46s }

.hero__facts { border-top-color: rgba(255,255,255,.2); max-width: 660px; }
.hero__fact { position: relative; padding-left: .9rem; }
.hero__fact::before {
    content: '';
    position: absolute; left: 0; top: .35rem; bottom: .35rem;
    width: 2px; border-radius: 0;
    background: var(--red-bright);
    opacity: .8;
}

/* --------------------------------------------------------------------------
   Five-across row — for short-label tiles (therapies)
   -------------------------------------------------------------------------- */
.row5 { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 560px)  { .row5 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .row5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .row5 { grid-template-columns: repeat(5, 1fr); } }

/* At 3 columns, five items leave two on the last row — centre them so the
   gap reads as intentional rather than broken. */
@media (min-width: 900px) and (max-width: 1199px) {
    .row5 > :nth-child(4) { grid-column: 1 / 2; margin-left: 50%; }
    .row5 > :nth-child(5) { grid-column: 2 / 4; margin-right: 50%; }
}

.row5 .tile {
    padding: 1.4rem 1.15rem;
    border-left: 0;
    border-top: 3px solid var(--red-bright);
    text-align: left;
}
.row5 .tile:hover { transform: translateY(-3px); }
.row5 .tile::after { display: none; }

/* --------------------------------------------------------------------------
   Section rhythm — alternate surfaces so no two neighbours look alike
   -------------------------------------------------------------------------- */
.section--edge { border-top: 1px solid var(--line); }

/* A numbered section label, used to give each block its own identity. */
.sec-label {
    display: flex; align-items: center; gap: .75rem;
    margin-bottom: .75rem;
}
.sec-label__n {
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 0;
    background: var(--red-wash);
    border: 1px solid #f2c9ce;
    color: var(--red);
    font-size: .75rem; font-weight: 800;
    font-variant-numeric: tabular-nums;
    flex: none;
}
.sec-label .eyebrow { margin-bottom: 0; }
.section--photo .sec-label__n, .band .sec-label__n {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.22);
    color: #ff8577;
}

@media (prefers-reduced-motion: reduce) {
    .hero__photo { transform: scale(1.04) !important; }
    .js .hero h1, .js .hero__eyebrow, .js .hero__sub,
    .js .hero__cta, .js .hero__facts { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   Hero, single-column.
   A photograph and a floating illustration were two focal points fighting for
   the same frame. The illustration is gone; the credentials it carried are now
   a quiet row under the facts.
   -------------------------------------------------------------------------- */
.hero__inner { display: block; max-width: 1180px; }
.hero__inner > .reveal { max-width: 760px; }

.hero__marks {
    display: flex; flex-wrap: wrap; gap: .5rem .65rem;
    margin-top: 1.75rem;
}
.hero__mark {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .38rem .8rem;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(10px);
    border-radius: 999px;
    font-size: .8125rem; font-weight: 600;
    color: #dce5f2;
    white-space: nowrap;
}
.hero__mark .ico { color: #ff8577; }
.js .hero .hero__marks { opacity: 0; transform: translateY(20px);
    transition: opacity .85s cubic-bezier(.22,.8,.26,.99), transform .85s cubic-bezier(.22,.8,.26,.99); }
.js .hero.is-in .hero__marks { opacity: 1; transform: none; transition-delay: .56s }

/* A scroll cue anchored to the bottom of the frame. */
.hero__cue {
    position: absolute; left: 50%; bottom: 26px;
    transform: translateX(-50%);
    display: grid; place-items: center; gap: .4rem;
    color: #8fa0b8; font-size: .6875rem;
    letter-spacing: .16em; text-transform: uppercase;
}
.hero__cue i {
    display: block; width: 1px; height: 26px;
    background: linear-gradient(180deg, rgba(255,255,255,.5), transparent);
    animation: cueDrop 2.2s ease-in-out infinite;
}
@keyframes cueDrop { 0%,100% { transform: scaleY(.4); transform-origin: top } 50% { transform: scaleY(1); transform-origin: top } }
@media (max-width: 900px) { .hero__cue { display: none } }
@media (prefers-reduced-motion: reduce) { .hero__cue i { animation: none } }

/* Photograph behind the careers band, under the existing pattern artwork. */
.band { isolation: isolate; }
.band__photo {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%;
    object-fit: cover;
}
.band::before {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(102deg, rgba(11,18,30,.96) 0%, rgba(13,22,38,.9) 48%, rgba(20,36,62,.72) 100%);
}
.band__art { z-index: 0; opacity: .35; }
.band > .wrap { position: relative; z-index: 1; }

/* ==========================================================================
   PART 8 — Overlay header and split-text headings
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header over a photographic hero.
   --------------------------------------------------------------------------
   One header, one look, everywhere: solid white with ink type from the first
   pixel, whether the hero below is a photograph or plain paper. Only the
   positioning differs — `$darkHero` pages need the bar fixed over their
   edge-to-edge hero rather than pushing it down.
   -------------------------------------------------------------------------- */
.hdr--over {
    position: fixed;
    /* The marquee is full-width and NOT fixed, so on first paint the fixed
       header must start below it — not just below the top-of-viewport gap.
       --marquee-shift closes that offset again as the marquee scrolls away,
       otherwise the header holds a 38px band of empty page above it for the
       whole of the rest of the scroll. */
    top: calc(var(--marquee-h) - var(--marquee-shift, 0px) + var(--hdr-gap));
    left: var(--hdr-gap); right: var(--hdr-gap);
    transition: box-shadow .25s ease;
}

/* The hero sits under a fixed header, so it carries its own top offset. */
.has-overlay-header .hero,
.has-overlay-header .phero--photo { padding-top: calc(var(--header-h) + var(--marquee-h) + var(--hdr-gap) + clamp(2rem, 1.5rem + 3vw, 4rem)); }
.has-overlay-header .hero--light { padding-top: calc(var(--header-h) + var(--marquee-h) + var(--hdr-gap) + clamp(1.75rem, 1.25rem + 3vw, 3.5rem)); }
/* Home: the hero deck fills the screen under the floating header, and its
   copy clears the header the same way an inner page's hero does. */
.has-overlay-header .hero-deck { min-height: calc(100vh - var(--marquee-h)); min-height: calc(100svh - var(--marquee-h)); }
.has-overlay-header .slide__body { padding-top: calc(var(--header-h) + var(--hdr-gap) + clamp(32px, 6vh, 72px)); }

/* --------------------------------------------------------------------------
   Split-text headings
   --------------------------------------------------------------------------
   JS splits a heading into words, characters or lines and animates the pieces
   in. The original text is kept on the element as aria-label and every
   generated span is aria-hidden, so assistive technology still reads one
   clean sentence rather than a stream of fragments.
   -------------------------------------------------------------------------- */
.split-line { display: block; overflow: hidden; }
.split-unit {
    display: inline-block;
    will-change: transform, opacity;
}
/* A trailing space is collapsed by inline-block, so it is restored explicitly. */
.split-space { display: inline-block; width: .28em; }

/* One quiet entrance for every heading, regardless of which data-split value
   the template uses: a slight rise and fade, nothing rotated, skewed, blurred
   or clipped. */
[data-split="rise"] .split-unit,
[data-split="fade"] .split-unit,
[data-split="wipe"] .split-unit,
[data-split="drop"] .split-unit,
[data-split="skew"] .split-unit {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .5s var(--ease-soft), transform .5s var(--ease-soft);
}
[data-split="rise"].is-split-in .split-unit,
[data-split="fade"].is-split-in .split-unit,
[data-split="wipe"].is-split-in .split-unit,
[data-split="drop"].is-split-in .split-unit,
[data-split="skew"].is-split-in .split-unit {
    opacity: 1;
    transform: none;
}

/* Nothing splits, and nothing hides, when motion is unwelcome. */
@media (prefers-reduced-motion: reduce) {
    [data-split] .split-unit {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   PART 9 — Light hero
   --------------------------------------------------------------------------
   The full-bleed dark hero read as heavy. This replaces it with a light,
   airy split: copy on a near-white field, the photograph contained as a
   framed figure beside it. Same photograph, far less weight.
   ========================================================================== */

.hero--light {
    background:
        radial-gradient(120% 90% at 88% 12%, rgba(224,30,55,.07), transparent 58%),
        linear-gradient(180deg, #ffffff 0%, #fbfcfd 55%, var(--paper-2) 100%);
    border-bottom: 1px solid var(--line);
    min-height: 0;
    padding-block: clamp(2.75rem, 2rem + 5vw, 6rem);
    color: var(--body);
}

/* Everything the dark treatment added is switched back off. */
.hero--light::before,
.hero--light::after { content: none; }

.hero--light .hero__inner { max-width: var(--wrap); }
@media (min-width: 1000px) {
    .hero--light .hero__inner {
        display: grid;
        grid-template-columns: 1.02fr .98fr;
        gap: clamp(2rem, 1rem + 4vw, 4.5rem);
        align-items: center;
    }
}
.hero--light .hero__inner > .reveal { max-width: none; }

/* --- Type --- */
.hero--light h1 { color: var(--ink); }
.hero--light .hero__sub { color: var(--muted); }

.hero--light .hero__eyebrow {
    background: var(--paper);
    border-color: var(--line);
    color: var(--ink-2);
    backdrop-filter: none;
    box-shadow: var(--sh-sm);
}
.hero--light .hero__eyebrow b { color: var(--ink); }
.hero--light .hero__eyebrow .ico { color: var(--red); }

.hero--light .btn--outline { color: var(--ink); border-color: var(--line-2); }
.hero--light .btn--outline:hover { background: var(--paper-2); border-color: var(--ink); color: var(--ink); }

/* --- Facts --- */
.hero--light .hero__facts { border-top-color: var(--line); max-width: none; }
.hero--light .hero__fact b { color: var(--ink); }
.hero--light .hero__fact span { color: var(--muted); }

/* --- Credential marks --- */
.hero--light .hero__mark {
    background: var(--paper);
    border-color: var(--line);
    color: var(--body);
    backdrop-filter: none;
}
.hero--light .hero__mark .ico { color: var(--red); }

/* --- The photograph, contained --- */
.hero__figure {
    position: relative;
    border: 1px solid var(--line);
    overflow: hidden;
    aspect-ratio: 4 / 3.4;
}
@media (max-width: 999px) { .hero__figure { aspect-ratio: 16 / 10; margin-top: 2.5rem; } }

.hero__figure img {
    position: static;
    width: 100%; height: 100%;
    object-fit: cover;
    animation: none;
    /* a gentle parallax drift inside its own frame */
    transform: translate3d(0, var(--par, 0px), 0) scale(1.08);
    will-change: transform;
}

/* Brand corner bracket. */

/* A soft tint so the photograph sits in the palette rather than fighting it. */
.hero__figure::before {
    content: '';
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(145deg, rgba(224,30,55,.10), transparent 45%, rgba(22,35,60,.16));
    pointer-events: none;
}

/* A floating stat card overlapping the photo's edge. */
.hero__badge {
    position: absolute;
    left: -18px; bottom: 34px;
    z-index: 2;
    display: grid; gap: .1rem;
    padding: .9rem 1.15rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: var(--sh-md);
}
.hero__badge b {
    font-size: 1.35rem; font-weight: 750; color: var(--ink);
    line-height: 1.1; font-variant-numeric: tabular-nums;
}
.hero__badge span { font-size: .75rem; color: var(--muted); }
@media (max-width: 999px) { .hero__badge { left: 14px; } }

.hero--light .hero__cue { color: var(--faint); }
.hero--light .hero__cue i { background: linear-gradient(180deg, var(--line-2), transparent); }

/* --------------------------------------------------------------------------
   Glass header over a LIGHT hero — same transparency, dark type
   -------------------------------------------------------------------------- */
.hdr--glass {
    position: fixed;
    /* Same follow-the-marquee offset as .hdr--over above. */
    top: calc(var(--marquee-h) - var(--marquee-shift, 0px) + var(--hdr-gap));
    left: var(--hdr-gap); right: var(--hdr-gap);
    background: var(--paper);
    transition: box-shadow .25s ease;
}
@media (prefers-reduced-motion: reduce) {
    .hero__figure img { transform: scale(1.08) !important; }
}

/* --------------------------------------------------------------------------
   Light-hero corrections
   -------------------------------------------------------------------------- */

/* Four facts in a narrower column wrapped 3 + 1. Fix the track count so the
   row is always balanced. */
.hero--light .hero__facts {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem 1.5rem;
    max-width: 520px;
}
@media (min-width: 1240px) {
    .hero--light .hero__facts { grid-template-columns: repeat(4, 1fr); max-width: none; }
}

/* The stat card and the corner bracket were competing for the same corner. */
.hero--light .hero__badge {
    left: auto; right: -16px;
    bottom: auto; top: 26px;
}
@media (max-width: 999px) { .hero--light .hero__badge { right: 14px; } }

/* The split-space span is no longer emitted; keep the rule harmless. */
.split-space { width: auto; }

/* Credential row spans the hero grid so the pills sit on one line. */
@media (min-width: 1000px) {
    .hero--light .hero__marks {
        grid-column: 1 / -1;
        margin-top: 2.5rem;
        padding-top: 1.75rem;
        border-top: 1px solid var(--line);
    }
}

/* ==========================================================================
   PART 10 — Light hero with a full-bleed background photograph
   --------------------------------------------------------------------------
   The photograph fills the hero, but a light scrim keeps the left two-thirds
   near-white so the headline stays ink-dark and the section still reads clean
   rather than heavy. Same image, none of the weight of a dark treatment.
   ========================================================================== */

.hero--light {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--paper);
}

.hero--light .hero__photo {
    position: absolute;
    inset: 0;
    z-index: -3;
    width: 100%;
    height: 118%;
    top: -9%;
    object-fit: cover;
    object-position: 50% 50%;
    transform: translate3d(0, var(--par, 0px), 0);
    will-change: transform;
}

/* A clean split rather than a wash.

   The copy side is solid paper, the photograph side is left completely
   untouched, and the two meet in a short blend. An all-over white veil made
   the photograph look hazy — this keeps it crisp. */
.hero--light .hero__scrim {
    position: absolute; inset: 0; z-index: -2;
    background: linear-gradient(94deg,
        #ffffff 0%,
        #ffffff 44%,
        rgba(255,255,255,.92) 52%,
        rgba(255,255,255,.55) 60%,
        rgba(255,255,255,0)  70%);
}
@media (max-width: 999px) {
    /* Stacked layout: the photo sits behind the lower half only. */
    .hero--light .hero__scrim {
        background: linear-gradient(180deg, #ffffff 0%, #ffffff 62%, rgba(255,255,255,.72) 80%, rgba(255,255,255,.45) 100%);
    }
}

/* A soft brand tint in the photograph corner, and a clean bottom fade into
   the next section. */
.hero--light::before {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    /* Only a bottom fade into the next section — no tint over the photograph. */
    background: linear-gradient(180deg, transparent 82%, rgba(247,248,250,.9) 100%);
}
.hero--light::after { content: none; }

/* The copy column no longer needs a partner column. */
@media (min-width: 1000px) {
    .hero--light .hero__inner { grid-template-columns: minmax(0, 640px) 1fr; align-items: center; }
    .hero--light .hero__facts { grid-template-columns: repeat(4, 1fr); max-width: none; }
}

/* Floating capacity card, sitting over the photographed side. */
.hero--light .hero__badge {
    position: absolute;
    right: clamp(24px, 5vw, 96px);
    bottom: clamp(90px, 12vh, 150px);
    left: auto; top: auto;
    z-index: 2;
}
@media (max-width: 999px) { .hero--light .hero__badge { display: none; } }

@media (prefers-reduced-motion: reduce) {
    .hero--light .hero__photo { transform: none !important; }
}

/* ==========================================================================
   PART 11 — The scroll motion system
   --------------------------------------------------------------------------
   One engine, driven from corporate.js:

     · a single IntersectionObserver marks elements `.is-in` as they arrive
     · a single rAF loop publishes scroll state as custom properties
       (--sy on <html>, --p on the progress bar, --par on parallax layers)

   Nothing here animates a number, counts anything down or manufactures
   urgency — §D-2 and §F rule those out. Motion is used only to pace a long,
   dense page and to show what belongs together.

   Every rule is gated on `.js`, so a script failure leaves a fully readable
   static page, and the whole part switches off under prefers-reduced-motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reveal variants — `.reveal` alone still means "rise from below".
   Add data-reveal to pick a different character.
   -------------------------------------------------------------------------- */
.js .reveal[data-reveal="up"]    { transform: translate3d(0, 42px, 0); }
.js .reveal[data-reveal="left"]  { transform: translate3d(-36px, 0, 0); }
.js .reveal[data-reveal="right"] { transform: translate3d(36px, 0, 0); }
.js .reveal[data-reveal="down"]  { transform: translate3d(0, -22px, 0); }
.js .reveal[data-reveal="zoom"]  { transform: scale(.94); }
.js .reveal[data-reveal="flip"]  {
    transform: perspective(1000px) rotateX(10deg) translate3d(0, 30px, 0);
    transform-origin: 50% 100%;
}
.js .reveal[data-reveal="blur"] {
    filter: blur(12px);
    transform: translate3d(0, 16px, 0);
    transition-property: opacity, transform, filter;
}

/* A wipe rather than a fade: the element is fully opaque throughout and is
   uncovered from the top down.

   Done with a mask, NOT clip-path. An IntersectionObserver measures the
   target's clipped rectangle, so an element that clip-paths itself to nothing
   can never be told it has arrived — it would hang invisible forever. Masks
   are not part of that calculation. */
.js .reveal[data-reveal="mask"] {
    opacity: 1;
    transform: none;
    -webkit-mask-image: linear-gradient(180deg, #000 0 0);
            mask-image: linear-gradient(180deg, #000 0 0);
    -webkit-mask-size: 100% 0%;
            mask-size: 100% 0%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    transition: -webkit-mask-size .95s var(--ease-soft), mask-size .95s var(--ease-soft);
}

/* Landed state, last so it wins over every variant above. */
.js .reveal.is-in { opacity: 1; transform: none; filter: none; }
.js .reveal[data-reveal="mask"].is-in { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }

/* Slower, longer entrance for a section's leading block. */
.js .reveal[data-reveal-speed="slow"] { transition-duration: 1.05s; }

/* --------------------------------------------------------------------------
   Media wipe — a photograph is uncovered instead of fading in.

   Applied to the wrapper, never the <img>, so it cannot fight the hover zoom
   those wrappers already own.
   -------------------------------------------------------------------------- */
/* The clip goes on the PICTURE, never on the wrapper.

   An IntersectionObserver measures the target's clipped rectangle: an element
   clipped to zero height never reports as intersecting, so a wrapper that
   clipped itself could never be told it had arrived. Clipping the image inside
   it leaves the observed box intact. */
.js [data-media] { overflow: hidden; }
.js [data-media] > picture { display: block; height: 100%; }

.js [data-media] > img,
.js [data-media] > picture > img {
    clip-path: inset(0 0 100% 0);
    /* and a slight push-in that settles as the photograph is uncovered */
    transform: scale(1.09);
    transition: clip-path 1.05s var(--ease-soft), transform 1.4s var(--ease-soft);
    transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js [data-media].is-in > img,
.js [data-media].is-in > picture > img {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
}

/* Hover zoom still wins once the element has landed. */
.js .figure:hover > img,
.js .feature__img:hover > img { transform: scale(1.05); }

/* --------------------------------------------------------------------------
   Parallax — the script writes a pixel offset into --par on anything carrying
   data-par. Layers only; never text, never anything interactive.
   -------------------------------------------------------------------------- */
.js [data-par] {
    transform: translate3d(0, var(--par, 0px), 0);
    will-change: transform;
}
/* The hero photograph keeps its own rule (PART 10) — it also scales. */
.js .hero__photo[data-par] { transform: translate3d(0, var(--par, 0px), 0) scale(1.04); }
.js .hero--light .hero__photo[data-par] { transform: translate3d(0, var(--par, 0px), 0); }

/* A photograph that drifts must be taller than its frame, or the frame empties
   at one edge. Inner-page heroes and the careers band are inset:0 — give them
   the headroom the drift needs, and clip it, or the overhang spills into the
   section below. */
.phero--photo { overflow: hidden; }
.js .phero--photo img[data-par],
.js .band__photo[data-par] { top: -9%; height: 118%; }

/* --------------------------------------------------------------------------
   Section furniture — small pieces that play as their block lands
   -------------------------------------------------------------------------- */
.js .reveal.is-in .sec-label__n {
    animation: numPop .55s var(--ease-back) both;
    animation-delay: calc(var(--i, 0) * var(--stagger) + 60ms);
}
@keyframes numPop {
    from { opacity: 0; transform: scale(.5) rotate(-8deg); }
    to   { opacity: 1; transform: none; }
}

/* The eyebrow's own rule draws itself in under the label. */
.js .section__head .eyebrow { position: relative; }
.js .section__head .eyebrow::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
    background: currentColor; opacity: .35;
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform .7s var(--ease-soft) .25s;
}
.js .section__head.is-in .eyebrow::after,
.js .reveal.is-in .section__head .eyebrow::after { transform: scaleX(1); }

/* Fact lists tick down one line at a time. */
.js .reveal.is-in .ticks > li {
    animation: tickIn .5s var(--ease-soft) both;
    animation-delay: calc(140ms + var(--i, 0) * 55ms);
}
@keyframes tickIn {
    from { opacity: 0; transform: translate3d(-10px, 0, 0); }
    to   { opacity: 1; transform: none; }
}

/* Chips arrive as a shoal rather than all at once. */
.js .reveal.is-in .chip {
    animation: chipIn .45s var(--ease-back) both;
    animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes chipIn {
    from { opacity: 0; transform: scale(.9) translate3d(0, 6px, 0); }
    to   { opacity: 1; transform: none; }
}

/* Table rows settle in sequence — the figures themselves never change. */
.js tbody tr[data-row] {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 45ms);
}
.js .is-in tbody tr[data-row] { opacity: 1; transform: none; }

/* A wide table that scrolls sideways says so, with a soft edge and a hint. */
.tablewrap { position: relative; }
.tablewrap::after {
    content: '';
    position: absolute; top: 0; right: 0; bottom: 0; width: 56px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.96));
    opacity: 0; transition: opacity .25s; pointer-events: none;
}
.tablewrap.has-overflow::after { opacity: 1; }
.tablewrap.is-end::after { opacity: 0; }
.section--tint .tablewrap::after {
    background: linear-gradient(90deg, rgba(247,248,250,0), rgba(247,248,250,.96));
}

/* --------------------------------------------------------------------------
   Timeline — the spine fills as you read past each entry
   -------------------------------------------------------------------------- */
.js .timeline { position: relative; }
.js .timeline::after {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
    background: linear-gradient(180deg, var(--red-bright), var(--red));
    transform: scaleY(var(--fill, 0));
    transform-origin: 50% 0;
    transition: transform .18s linear;
}
/* The existing ::before rule owns the left offset; match it. */
.js .timeline::after { left: 5px; }

/* The reading hairline gains a soft glow at the leading edge. */
.hdr__progress { transform-origin: 0 50%; transition: opacity .3s; }
.hdr__progress::after {
    content: '';
    position: absolute; right: 0; top: -2px; bottom: -2px; width: 26px;
    background: radial-gradient(closest-side, rgba(224,30,55,.55), transparent);
}

/* --------------------------------------------------------------------------
   Back to top — appears once the page is genuinely long behind you.
   The ring is reading position, nothing else.
   -------------------------------------------------------------------------- */
.totop {
    position: fixed;
    right: clamp(16px, 3vw, 28px);
    bottom: clamp(16px, 3vw, 28px);
    z-index: 90;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--line-2);
    cursor: pointer;
    color: var(--ink);
    background: var(--paper);
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    pointer-events: none;
    transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), border-color .15s, background-color .15s;
}
.totop svg { width: 17px; height: 17px; }
.totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { color: var(--red); border-color: var(--red-bright); background: var(--paper-2); }
.totop:active { transform: scale(.96); }
@media print { .totop { display: none; } }

/* --------------------------------------------------------------------------
   Scroll-linked odds and ends
   -------------------------------------------------------------------------- */

/* The hero's scroll cue fades out as soon as it has been obeyed. */
.js .hero__cue { transition: opacity .3s linear; opacity: clamp(0, calc(1 - var(--sy, 0) * 3), 1); }

/* Stat cells wipe their figure up behind a mask. The VALUE never animates
   (§D-2) — only its arrival. */
.js .snap.is-in .snap__num {
    animation: numRise .6s var(--ease-soft) both;
    animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes numRise {
    from { opacity: 0; transform: translate3d(0, 60%, 0); }
    to   { opacity: 1; transform: none; }
}
.snap__cell { overflow: hidden; }


/* --------------------------------------------------------------------------
   Reduced motion — the whole part collapses to a plain, static page
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .js .reveal,
    .js [data-media],
    .js [data-media] > img,
    .js [data-media] > picture > img,
    .js tbody tr[data-row] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        transition: none !important;
    }
    .js [data-par] { transform: none !important; }
    .js .timeline::after { display: none; }
    .js .reveal.is-in .sec-label__n,
    .js .reveal.is-in .ticks > li,
    .js .reveal.is-in .chip,
    .js .snap.is-in .snap__num { animation: none !important; }
    .js .section__head .eyebrow::after { transform: scaleX(1); transition: none; }
    .js .hero__cue { opacity: 1; }
    .totop { transition: none; }
}

/* ==========================================================================
   PART 12 — Forms, properly dressed
   --------------------------------------------------------------------------
   Every form on the site — enquiry, careers, pharmacovigilance — is built from
   the same five primitives: .formbox, .form, .form__row, .field, .check. So
   they are restyled once, here, and every form inherits it.

   Priorities, in order: legibility, an obvious focus target, an error you
   cannot miss, and a hit area a thumb can actually land on. §I sets a 44px
   minimum for touch targets and 4.5:1 for every piece of text.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The panel
   -------------------------------------------------------------------------- */
.formbox {
    position: relative;
    overflow: hidden;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 0;
    padding: clamp(1.35rem, 1rem + 1.6vw, 2.5rem);
    box-shadow: var(--sh-md);
}
/* A brand hairline across the top edge, so the panel reads as ours. */
.formbox::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--red), var(--red-bright) 45%, #ff8577);
}

/* Progress across the required fields. Feedback on a long form — it is not a
   timer and nothing expires (§F). */
.formbox__progress {
    position: absolute; top: 0; left: 0; height: 3px; width: 100%;
    transform: scaleX(var(--done, 0)); transform-origin: 0 50%;
    background: var(--ok);
    transition: transform .35s var(--ease-out);
    pointer-events: none;
}

.formbox > h2:first-child, .formbox__head h2 { letter-spacing: -.018em; }
.formbox__head { margin-bottom: 1.75rem; }

/* --------------------------------------------------------------------------
   Rows and fields
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.35rem; }
.form__row { display: grid; gap: 1.35rem; }
@media (min-width: 640px) {
    .form__row--2 { grid-template-columns: 1fr 1fr; }
    .form__row--3 { grid-template-columns: repeat(3, 1fr); }
}

.field { display: grid; gap: .4rem; position: relative; }

.field > label {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .8125rem;
    font-weight: 650;
    letter-spacing: .01em;
    color: var(--ink-2);
    transition: color .2s;
}
.field:focus-within > label { color: var(--red); }

/* The asterisk is decorative; the word "required" is what assistive tech
   reads, from the input's own required attribute. */
.field__req { color: var(--red-bright); font-weight: 800; line-height: 1; }
.field__hint { font-size: .8125rem; color: var(--faint); line-height: 1.5; }

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */
.field input[type=text], .field input[type=email], .field input[type=tel],
.field input[type=password], .field input[type=search], .field input[type=url],
.field input[type=number], .field input[type=date],
.field select, .field textarea {
    width: 100%;
    min-height: 46px;
    padding: .7rem .9rem;
    font: inherit;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--ink);
    background: var(--paper);
    border: 1.5px solid var(--line-2);
    border-radius: 0;
    box-shadow: 0 1px 0 rgba(16,28,52,.02);
    transition: border-color .18s, box-shadow .18s, background-color .18s;
    -webkit-appearance: none;
    appearance: none;
}

.field input:hover:not(:disabled):not([readonly]),
.field select:hover:not(:disabled),
.field textarea:hover:not(:disabled) { border-color: #aab3c1; }

.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--red-bright);
    box-shadow: var(--sh-focus);
    /* background-color, NOT the `background` shorthand: a select carries its
       chevron as a background-image, and the shorthand would reset the
       repeat, size and position that position it — leaving the chevron to
       tile right across the field. */
    background-color: var(--paper);
}
/* The browser's own outline would double up on the ring above. */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; }

.field input::placeholder, .field textarea::placeholder { color: #9aa2b1; }

.field textarea {
    min-height: 140px;
    line-height: 1.6;
    resize: vertical;              /* the script grows it to fit as you type */
}

/* A pre-filled, non-editable value (the enquiry subject) should read as a
   statement of fact, not as something you failed to be allowed to type in. */
.field input[readonly] {
    background: var(--paper-2);
    color: var(--ink-2);
    border-style: dashed;
    cursor: default;
}
.field input[readonly]:focus { box-shadow: none; border-color: var(--line-2); }

.field input:disabled, .field select:disabled, .field textarea:disabled {
    background-color: var(--paper-3);   /* keeps a disabled select's chevron */
    color: var(--faint);
    cursor: not-allowed;
}

/* Select — native chevron replaced so it matches on every platform. */
.field select {
    padding-right: 2.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='m2.5 4.5 3.5 3.5 3.5-3.5' stroke='%235b6472' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .95rem center;
    background-size: 13px 13px;
    cursor: pointer;
}
.field select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='m2.5 4.5 3.5 3.5 3.5-3.5' stroke='%23e01e37' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Validation state
   -------------------------------------------------------------------------- */
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
    border-color: var(--red-bright);
    background-color: var(--red-wash);   /* same reason as the focus rule above */
}
.field input[aria-invalid="true"]:focus,
.field select[aria-invalid="true"]:focus,
.field textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(224,30,55,.16); }

/* Answered correctly: a quiet tick, never a green wash. */
.field.is-ok > input:not([type=file]), .field.is-ok > select, .field.is-ok .pwfield > input {
    border-color: #b6d8c3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m3 8.4 3.2 3.2L13 4.8' stroke='%2314713d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 15px 15px;
}
.field.is-ok > input:not([type=file]) { padding-right: 2.5rem; }
.field.is-ok > select {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m3 8.4 3.2 3.2L13 4.8' stroke='%2314713d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='m2.5 4.5 3.5 3.5 3.5-3.5' stroke='%235b6472' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: right 2.4rem center, right .95rem center;
    background-size: 15px 15px, 13px 13px;
    padding-right: 4rem;
}

.field__err {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--red);
    animation: errIn .28s var(--ease-out) both;
}
.field__err::before {
    content: '';
    flex: none;
    width: 15px; height: 15px;
    margin-top: .1em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='6.9' stroke='%23c2192f' stroke-width='1.6'/%3E%3Cpath d='M8 4.6v4.2' stroke='%23c2192f' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.4' r='.95' fill='%23c2192f'/%3E%3C/svg%3E") center/contain no-repeat;
}
@keyframes errIn {
    from { opacity: 0; transform: translate3d(0, -4px, 0); }
    to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Checkboxes and radios — the native control, restyled, so keyboard and
   screen-reader behaviour is untouched.
   -------------------------------------------------------------------------- */
.check {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .85rem 1rem;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--body);
    background: var(--paper-2);
    border: 1.5px solid var(--line);
    border-radius: 0;
    cursor: pointer;
    transition: border-color .18s, background-color .18s;
}
.check:hover { border-color: var(--line-2); background: var(--paper-3); }
.check:focus-within { border-color: var(--red-bright); box-shadow: var(--sh-focus); }
.check:has(input:checked) { border-color: #f0b7bf; background: var(--red-wash); }

.check input[type=checkbox], .check input[type=radio] {
    flex: none;
    width: 20px; height: 20px;
    margin: .1rem 0 0;
    display: grid; place-content: center;
    border: 1.5px solid var(--line-2);
    border-radius: 0;
    background: var(--paper);
    cursor: pointer;
    transition: background-color .18s, border-color .18s;
    -webkit-appearance: none;
    appearance: none;
}
.check input[type=radio] { border-radius: 50%; }

.check input[type=checkbox]:checked, .check input[type=radio]:checked {
    background-color: var(--red);
    border-color: var(--red);
}
.check input[type=checkbox]:checked::before {
    content: '';
    width: 13px; height: 13px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m3 8.4 3.2 3.2L13 4.8' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    animation: tickPop .22s var(--ease-back);
}
.check input[type=radio]:checked::before {
    content: '';
    width: 8px; height: 8px; border-radius: 50%; background: #fff;
    animation: tickPop .22s var(--ease-back);
}
@keyframes tickPop { from { transform: scale(.4); } to { transform: none; } }

.check a { font-weight: 600; }

/* A group of radios reads as a set of choices, not a stack of loose rows. */
.field fieldset, .form fieldset { border: 0; display: grid; gap: .5rem; }
.form legend { font-size: .8125rem; font-weight: 650; color: var(--ink-2); margin-bottom: .5rem; }

/* --------------------------------------------------------------------------
   File upload — a drop target, with the native input laid over it so that
   click, keyboard, drag-and-drop and form validation all still work.
   -------------------------------------------------------------------------- */
.filefield {
    position: relative;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.1rem;
    border: 1.5px dashed var(--line-2);
    border-radius: 0;
    background: var(--paper-2);
    transition: border-color .18s, background-color .18s;
}
.filefield input[type=file] {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
}
.filefield:hover, .filefield.is-drag { border-color: var(--red-bright); background: var(--red-wash); }
.filefield:focus-within { border-color: var(--red-bright); box-shadow: var(--sh-focus); }
.filefield.is-filled { border-style: solid; border-color: #b6d8c3; background: var(--ok-wash); }

.filefield__icon {
    flex: none;
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: 0;
    background: var(--paper);
    border: 1px solid var(--line);
    color: var(--red);
}
.filefield.is-filled .filefield__icon { color: var(--ok); border-color: #bfe0cb; }
.filefield__icon svg { width: 18px; height: 18px; }

.filefield__text { display: grid; gap: .1rem; min-width: 0; }
.filefield__text b {
    font-size: .9375rem;
    color: var(--ink-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filefield__text span { font-size: .8125rem; color: var(--faint); }

.filefield__clear {
    position: relative;
    z-index: 2;
    margin-left: auto;
    flex: none;
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--paper);
    color: var(--muted);
    cursor: pointer;
    transition: color .18s, border-color .18s;
}
.filefield__clear:hover { color: var(--red); border-color: var(--red-bright); }
.filefield__clear svg { width: 13px; height: 13px; }

/* --------------------------------------------------------------------------
   Character count — appears once you start writing, never as a limit you are
   being pushed against.
   -------------------------------------------------------------------------- */
.field__count {
    justify-self: end;
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    color: var(--faint);
    opacity: 0;
    transition: opacity .2s, color .2s;
}
.field:focus-within .field__count, .field__count.is-on { opacity: 1; }
.field__count.is-near { color: var(--warn); font-weight: 600; }

/* --------------------------------------------------------------------------
   Actions row
   -------------------------------------------------------------------------- */
.form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .85rem 1.15rem;
    padding-top: .35rem;
}
.form__actions .btn { min-height: 46px; }
.form__actions .form__note { font-size: .8125rem; color: var(--faint); }

/* Submitting: the label is replaced by a spinner so a slow connection cannot
   produce a duplicate enquiry, and the reason for the wait is visible. */
.btn { position: relative; overflow: hidden; }
.btn.is-busy { pointer-events: none; opacity: .85; }
.btn.is-busy::before {
    content: '';
    width: 15px; height: 15px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* A light sweep across a primary button on hover — one moving highlight, no
   pulsing and nothing that reads as a countdown. */
.btn--primary::after, .btn--navy::after {
    content: '';
    position: absolute; top: 0; left: -30%;
    width: 30%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
    transform: skewX(-18deg);
    transition: left .55s var(--ease-out);
    pointer-events: none;
}
.btn--primary:hover::after, .btn--navy:hover::after { left: 130%; }
.btn:active { transform: translateY(1px); }

/* --------------------------------------------------------------------------
   Alerts — the answer to a submitted form, so they carry more weight than a
   line of tinted text.
   -------------------------------------------------------------------------- */
.alert {
    display: grid;
    gap: .35rem;
    padding: 1.15rem 1.25rem 1.15rem 3.35rem;
    position: relative;
    border-radius: 0;
    border: 1px solid;
    font-size: .9375rem;
    line-height: 1.6;
    animation: errIn .4s var(--ease-soft) both;
}
.alert::before {
    content: '';
    position: absolute; left: 1.15rem; top: 1.2rem;
    width: 20px; height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.alert--ok::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' fill='%2314713d'/%3E%3Cpath d='m5.8 10.3 2.8 2.8 5.6-6' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.alert--warn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 2.6 18.4 17H1.6L10 2.6Z' fill='%238a5a00'/%3E%3Cpath d='M10 7.6v4' stroke='white' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.4' r='1' fill='white'/%3E%3C/svg%3E");
}
.alert--err::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23c2192f'/%3E%3Cpath d='M10 5.4v5' stroke='white' stroke-width='1.9' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14' r='1.1' fill='white'/%3E%3C/svg%3E");
}
.alert strong { color: inherit; font-size: 1rem; }
/* A reference number is something people copy down — set it as data. */
.alert .ref, .alert strong .ref {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

/* Summary of what failed, shown above a form after a server round-trip. */
.form__errors { margin-bottom: 1.25rem; }
.form__errors ul { margin: .35rem 0 0; padding-left: 1.15rem; }
.form__errors li { font-size: .875rem; }

@media (prefers-reduced-motion: reduce) {
    .field__err, .alert { animation: none; }
    .btn--primary::after, .btn--navy::after { display: none; }
    .check input:checked::before { animation: none; }
}

/* ==========================================================================
   PART 13 — The full-bleed photographic hero
   --------------------------------------------------------------------------
   The photograph runs edge to edge and top to bottom. Nothing white is laid
   over it: the only overlay is a dark gradient, and that is there for one
   reason — §I requires white type to clear 4.5:1 wherever the photograph
   happens to be bright. It is weighted to the left, so the right two-thirds of
   the image stay close to untouched.
   ========================================================================== */
.hero--full {
    min-height: min(94vh, 900px);
    display: flex;
    align-items: center;
    /* The overlay header sits on top of this, so the copy needs to clear it. */
    padding-block: calc(var(--header-h) + clamp(3rem, 2rem + 4vw, 6rem))
                   clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
}

.hero--full .hero__photo {
    height: 122%;
    top: -11%;
    animation: none;                       /* the drift is scroll-driven now */
    object-position: 65% 45%;
    transform: translate3d(0, var(--par, 0px), 0) scale(1.03);
}

/* NO overlay. Not a scrim, not a tint, not a wash — the photograph is shown
   exactly as it is.

   That is only safe because the picture was chosen for it: white type sits over
   a region measured at 10:1 contrast at its brightest point, well clear of the
   4.5:1 §I needs. Swapping in a brighter photograph would break that, so
   whoever replaces hero.jpg must check the left half is dark first. */
.hero--full::before,
.hero--full::after { content: none; }

.hero--full h1 { max-width: 20ch; }
.hero--full .hero__sub { max-width: 56ch; }
.hero--full .hero__facts { max-width: 700px; }

/* The capacity card floats over the photographed side rather than hanging off
   the left edge of the copy. */
.hero--full .hero__badge {
    left: auto; right: 0;
    top: auto; bottom: clamp(120px, 16vh, 190px);
    background: rgba(255,255,255,.93);
}
@media (max-width: 1099px) { .hero--full .hero__badge { display: none; } }

/* Credential pills sit on their own rule at the foot of the hero. */
.hero--full .hero__marks {
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255,255,255,.16);
}

.hero--full .hero__cue { color: rgba(255,255,255,.72); }
.hero--full .hero__cue i { background: linear-gradient(180deg, rgba(255,255,255,.6), transparent); }

/* On a phone the crop tightens onto the darkest part of the frame instead of
   reaching for a gradient. */
@media (max-width: 640px) {
    .hero--full .hero__photo { object-position: 32% 50%; }
}

/* ==========================================================================
   PART 14 — The header
   --------------------------------------------------------------------------
   One flat, solid bar everywhere — on an ordinary page, over a photographic
   hero, scrolled or not. No transparency, no blur.
   ========================================================================== */

.hdr--over:not(.is-stuck) {
    background: var(--paper);
}

/* A touch more lift once scrolled, on top of the always-on floating shadow. */
.hdr.is-stuck,
.hdr--over.is-stuck,
.hdr--glass.is-stuck {
    box-shadow: 0 2px 4px rgba(16, 28, 52, .1), 0 22px 46px -14px rgba(16, 28, 52, .44);
}

/* ==========================================================================
   PART 15 — Photography components
   --------------------------------------------------------------------------
   Two small pieces used across the site: a photograph heading a card, and a
   strip of framed photographs. Both are decorative — §K governs what they may
   be captioned as, and the caption is written in the template, not here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Framed figure — caption plus the illustrative note
   -------------------------------------------------------------------------- */
.figure figcaption .imgnote {
    display: block;
    margin-top: .15rem;
    font-size: .75rem;
}

/* ==========================================================================
   PART 16 — Long-page choreography
   ========================================================================== */

/* --------------------------------------------------------------------------
   The hero hands the page over
   The copy lifts and dims as you scroll past it; the photograph stays put and
   drifts at its own rate, so the two separate as you leave.
   -------------------------------------------------------------------------- */
.js .hero__inner--handoff {
    opacity: clamp(0, calc(1.75 - var(--sy, 0) * 1.9), 1);
    transform: translate3d(0, calc(var(--sy, 0) * -70px), 0);
    will-change: opacity, transform;
}
.js .hero--full .hero__badge { transform: translate3d(0, calc(var(--sy, 0) * -34px), 0); }

/* --------------------------------------------------------------------------
   Chapter rail — where you are, in the page's own numbering
   -------------------------------------------------------------------------- */
.chapters {
    position: fixed;
    left: max(14px, calc((100vw - var(--wrap)) / 2 - 92px));
    top: 50%;
    z-index: 80;
    display: none;
    flex-direction: column;
    gap: .1rem;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity .35s var(--ease-out);
    pointer-events: none;
}
@media (min-width: 1340px) { .chapters { display: flex; } }
.chapters.is-on { opacity: 1; pointer-events: auto; }

.chapters__item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .3rem 0;
    text-decoration: none;
    color: var(--faint);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.chapters__n {
    position: relative;
    width: 26px;
    font-variant-numeric: tabular-nums;
    color: var(--line-2);
    transition: color .3s;
}
/* A hairline that grows into a full rule for the section you are in. */
.chapters__n::after {
    content: '';
    position: absolute; right: -8px; top: 50%;
    width: 10px; height: 1.5px;
    background: currentColor;
    transform: scaleX(.5); transform-origin: 100% 50%;
    transition: transform .3s var(--ease-out), background-color .3s;
}
.chapters__l {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: max-width .4s var(--ease-out), opacity .3s;
}
.chapters__item:hover .chapters__l,
.chapters__item.is-here .chapters__l { max-width: 160px; opacity: 1; }

.chapters__item:hover .chapters__n { color: var(--muted); }
.chapters__item.is-here { color: var(--ink-2); }
.chapters__item.is-here .chapters__n { color: var(--red); }
.chapters__item.is-here .chapters__n::after { transform: scaleX(1.6); }

@media print { .chapters { display: none; } }

/* --------------------------------------------------------------------------
   A statement that reads itself in
   The words start as a ghost of themselves and reach full ink as the line
   crosses the middle of the screen. Nothing moves — only weight of colour.
   -------------------------------------------------------------------------- */
.js [data-fill].is-filling .split-unit {
    color: rgba(20, 23, 29, .2);
    transition: color .45s var(--ease-out);
}
.js [data-fill].is-filling .split-unit.is-read { color: var(--ink); }

/* On a dark section the ghost has to be light, not dark. */
.js .section--navy [data-fill].is-filling .split-unit,
.js .band [data-fill].is-filling .split-unit,
.js .section--photo [data-fill].is-filling .split-unit { color: rgba(255, 255, 255, .28); }
.js .section--navy [data-fill].is-filling .split-unit.is-read,
.js .band [data-fill].is-filling .split-unit.is-read,
.js .section--photo [data-fill].is-filling .split-unit.is-read { color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .js .hero__inner--handoff { opacity: 1 !important; transform: none !important; }
    .js .hero--full .hero__badge { transform: none !important; }
    .js [data-fill].is-filling .split-unit { color: inherit !important; }
}

/* ==========================================================================
   PART 17 — Inner-page furniture
   --------------------------------------------------------------------------
   Forty-odd inner pages are built from the same handful of parts: a photo
   hero, a split with an aside, a data table, a spec list, a steps strip. They
   are upgraded here, once, rather than page by page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page hero — more room, bigger type, and the photograph slowly settling
   -------------------------------------------------------------------------- */
.phero--photo {
    padding-block: clamp(3.25rem, 2.5rem + 4vw, 6rem);
    display: flex;
    align-items: flex-end;
    min-height: min(52vh, 460px);
}
.phero h1 {
    font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.25rem);
    letter-spacing: -.028em;
    line-height: 1.06;
    max-width: 20ch;
}
.phero--photo .lead { max-width: 62ch; }

/* The photograph settles from a slight push-in on arrival — the same language
   as the reveals, so the page feels like one piece. */
.js .phero--photo img {
    animation: pheroSettle 1.6s var(--ease-soft) both;
}
@keyframes pheroSettle {
    from { transform: scale(1.09); opacity: .55; }
    to   { transform: scale(1);    opacity: 1; }
}

/* Crumbs read as a quiet line above the title, not as another heading. */
.phero--photo .crumbs { margin-bottom: 1.1rem; font-size: .8125rem; letter-spacing: .01em; }

/* --------------------------------------------------------------------------
   Split layouts — the aside travels with you
   -------------------------------------------------------------------------- */
/* A sticky column can carry more than one block (e.g. a fact card and a
   photograph riding together) — stack them with real air between, never
   flush against one another. */
.aside-sticky { display: flex; flex-direction: column; gap: 1.75rem; }

@media (min-width: 1000px) {
    .split > aside,
    .split > .aside-sticky {
        position: sticky;
        /* The marquee bar sits above the header and pushes it down, so its
           height has to be in here too — without it a pinned aside parks
           underneath the header on every page that shows the marquee. */
        top: calc(var(--header-h) + var(--marquee-h) + var(--hdr-gap) + 20px);
        align-self: start;
    }
}
/* Pinning a column taller than the window would leave its foot permanently
   below the fold, so on a short viewport it simply scrolls. */
@media (min-width: 1000px) and (max-height: 820px) {
    .split > aside,
    .split > .aside-sticky { position: static; }
}

/* --------------------------------------------------------------------------
   Data tables — these pages ARE the tables, so they get treated as such
   -------------------------------------------------------------------------- */
.tablewrap {
    background: var(--paper);
    box-shadow: var(--sh-sm);
}
table.data thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--paper-3);
    color: var(--ink);
    box-shadow: inset 0 -1px 0 var(--line-2);
    border-bottom: 0;
}
table.data tbody tr { transition: background-color .15s; }
table.data tbody tr:nth-child(even) { background: rgba(247, 248, 250, .7); }
table.data tbody tr:hover { background: var(--red-wash); }
table.data tbody th[scope="row"] { color: var(--ink); font-weight: 650; }
table.data td, table.data th { padding: .85rem 1.1rem; }

/* The row a map click sends you to. */
table.data tr.is-flash { animation: rowFlash 1.6s ease-out; }
@keyframes rowFlash {
    0%   { background: rgba(224, 30, 55, .16); }
    100% { background: transparent; }
}

/* --------------------------------------------------------------------------
   Spec lists — label and value, with the label sitting quietly to one side
   -------------------------------------------------------------------------- */
.spec__row { transition: background-color .15s; }
.spec__row:hover { background: var(--paper-2); }
@media (min-width: 640px) {
    .spec__row { padding-inline: .65rem; margin-inline: -.65rem; border-radius: 0; }
}
.spec__k { letter-spacing: .01em; }

/* --------------------------------------------------------------------------
   Steps — numbered process strips
   -------------------------------------------------------------------------- */
.steps__item { position: relative; overflow: hidden; }
.steps__item::after {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--red-bright);
    transform: scaleY(0); transform-origin: 50% 0;
    transition: transform .5s var(--ease-soft);
}
.js .reveal.is-in .steps__item::after,
.js .steps.is-in .steps__item::after { transform: scaleY(1); }
.js .steps.is-in .steps__item:nth-child(2)::after { transition-delay: .08s }
.js .steps.is-in .steps__item:nth-child(3)::after { transition-delay: .16s }
.js .steps.is-in .steps__item:nth-child(4)::after { transition-delay: .24s }
.js .steps.is-in .steps__item:nth-child(5)::after { transition-delay: .32s }

/* --------------------------------------------------------------------------
   Next steps — three doors at the foot of a page that would otherwise stop
   -------------------------------------------------------------------------- */
.nextsteps { background: var(--paper-2); border-top: 1px solid var(--line); }
.nextsteps__grid { display: grid; gap: 16px; }
@media (min-width: 780px) { .nextsteps__grid { grid-template-columns: repeat(3, 1fr); } }

.nextsteps__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 1.5rem 1.4rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 0;
    text-decoration: none;
    overflow: hidden;
    transition: transform .25s var(--ease-soft), box-shadow .25s, border-color .2s;
}
.nextsteps__card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--line-2); }
.nextsteps__card::before {
    content: '';
    position: absolute; inset: 0 auto 0 0; width: 3px;
    background: linear-gradient(180deg, var(--red-bright), #ff8577);
    transform: scaleY(0); transform-origin: 50% 0;
    transition: transform .3s var(--ease-soft);
}
.nextsteps__card:hover::before { transform: scaleY(1); }
.nextsteps__card b { color: var(--ink); font-size: 1.0625rem; font-weight: 650; }
.nextsteps__card span { color: var(--muted); font-size: .9375rem; }
.nextsteps__card .tlink { margin-top: auto; padding-top: .75rem; }

@media (prefers-reduced-motion: reduce) {
    .js .phero--photo img { animation: none; }
    .steps__item::after { transform: scaleY(1); transition: none; }
}

/* ==========================================================================
   PART 18 — A wider motion vocabulary
   --------------------------------------------------------------------------
   Section after section of the same rise reads as a template. The engine now
   cycles a different entrance per section, and two scroll-linked moments were
   added that do not exist anywhere else on the site.
   ========================================================================== */

/* --- New entrance variants ------------------------------------------------ */

/* Rises out from under the section above it, like a card being dealt. The
   uncovering is a mask, for the reason given against the "mask" variant. */
.js .reveal[data-reveal="curtain"] {
    transform: translate3d(0, 64px, 0) scale(.985);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%);
            mask-image: linear-gradient(180deg, transparent 0, #000 22%);
    -webkit-mask-size: 100% 260%;
            mask-size: 100% 260%;
    -webkit-mask-position: 0 100%;
            mask-position: 0 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft),
                -webkit-mask-position .9s var(--ease-soft), mask-position .9s var(--ease-soft);
}
.js .reveal[data-reveal="curtain"].is-in { -webkit-mask-position: 0 0; mask-position: 0 0; }

/* Unfolds from its own top edge. */
.js .reveal[data-reveal="unfold"] {
    transform: perspective(1200px) rotateX(-16deg) translate3d(0, 22px, 0);
    transform-origin: 50% 0;
}

/* Wiped in from the left, the text arriving with the block. */
.js .reveal[data-reveal="wipe"] {
    opacity: 1;
    transform: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0 0);
            mask-image: linear-gradient(90deg, #000 0 0);
    -webkit-mask-size: 0% 100%;
            mask-size: 0% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    transition: -webkit-mask-size .85s var(--ease-soft), mask-size .85s var(--ease-soft);
}
.js .reveal[data-reveal="wipe"].is-in { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }

/* Settles out of a soft focus. */
.js .reveal[data-reveal="focus"] {
    filter: blur(14px);
    transform: scale(1.03);
    transition-property: opacity, transform, filter;
    transition-duration: .95s;
}

/* Swings up from the lower-left, very slightly. */
.js .reveal[data-reveal="swing"] {
    transform: translate3d(-18px, 30px, 0) rotate(-1.4deg);
}

/* THE LANDED STATE FOR EVERY VARIANT, and it must be the last word.

   PART 11's `.reveal.is-in` rule carries the same weight as a variant rule, so
   any variant declared after it would keep its starting transform — a section
   would arrive and then sit there blurred or shifted. Naming both the
   attribute and the class outranks every variant above, wherever it was
   declared. */
.js .reveal[data-reveal].is-in {
    opacity: 1;
    transform: none;
    filter: none;
}

/* --- A full-bleed band photograph that breathes as it crosses ------------- */
.js .band__photo[data-zoom] {
    transform: translate3d(0, var(--par, 0px), 0) scale(var(--zoom, 1.06));
    transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: reduce) {
    .js .reveal[data-reveal="curtain"],
    .js .reveal[data-reveal="mask"],
    .js .reveal[data-reveal="wipe"] {
        -webkit-mask-image: none !important;
                mask-image: none !important;
    }
    .js .band__photo[data-zoom] { transform: none !important; }
}

/* ==========================================================================
   PART 19 — The light hero
   --------------------------------------------------------------------------
   Same full-bleed photograph, opposite polarity: a bright picture with ink
   type on it, and still no overlay of any kind.

   The rule for replacing hero.jpg is the mirror of the dark version — the left
   half must stay BRIGHT. Every text zone here was measured against the bare
   photograph and clears 4.5:1 (§I). A darker picture would break that.
   ========================================================================== */
.hero--bright { background: var(--paper); }
.hero--bright .hero__photo { object-position: 6% 50%; }

/* --- Ink type on the photograph ------------------------------------------ */
.hero--bright h1 { color: var(--ink); }
.hero--bright .lead,
.hero--bright .hero__sub { color: var(--ink-2); }

.hero--bright .hero__eyebrow {
    background: var(--paper);
    border-color: var(--line);
    color: var(--ink-2);
    box-shadow: var(--sh-sm);
}
.hero--bright .hero__eyebrow b { color: var(--ink); }
.hero--bright .hero__eyebrow .ico { color: var(--red); }

.hero--bright .btn--outline {
    color: var(--ink);
    border-color: rgba(20, 23, 29, .28);
    background: var(--paper);
}
.hero--bright .btn--outline:hover {
    background: #fff;
    border-color: var(--ink);
    color: var(--ink);
}

/* --- Facts and credential pills ------------------------------------------ */
.hero--bright .hero__facts { border-top-color: rgba(20, 23, 29, .14); }
.hero--bright .hero__fact b { color: var(--ink); }
.hero--bright .hero__fact span { color: var(--muted); }

.hero--bright .hero__marks { border-top-color: rgba(20, 23, 29, .12); }
.hero--bright .hero__mark {
    background: var(--paper);
    border-color: var(--line);
    color: var(--body);
}
.hero--bright .hero__mark .ico { color: var(--red); }

/* --- The floating capacity card, and the scroll cue ---------------------- */
.hero--bright .hero__badge {
    background: var(--paper);
    border-color: var(--line);
}
.hero--bright .hero__cue { color: var(--muted); }
.hero--bright .hero__cue i { background: linear-gradient(180deg, var(--line-2), transparent); }

/* --- The section below closes onto paper, not onto navy ------------------ */
.hero--bright + .pulse-rule { background: var(--paper); }

/* On a phone the copy stacks over the brightest part of the frame. */
@media (max-width: 640px) {
    .hero--bright .hero__photo { object-position: 30% 50%; }
}

/* ==========================================================================
   PART 20 — Sign-in
   --------------------------------------------------------------------------
   A split screen: the form on paper, a photograph beside it. On a phone the
   photograph steps aside entirely — nobody signs in to look at a picture.
   ========================================================================== */
.auth-body { background: var(--paper-2); }

.auth {
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
}
@media (min-width: 900px) { .auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1400px) { .auth { grid-template-columns: minmax(0, 560px) 1fr; } }

/* --- The form side -------------------------------------------------------- */
.auth__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
    background: var(--paper);
}
.auth__inner { width: 100%; max-width: 420px; }

.auth__brand { display: inline-flex; text-decoration: none; margin-bottom: clamp(1.75rem, 1rem + 3vw, 3rem); }
.auth__brand img, .auth__brand svg { height: 40px; width: auto; }

.auth__head { margin-bottom: 1.75rem; }
.auth__chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .7rem;
    margin-bottom: .9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper-2);
    font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted);
}
.auth__chip svg { width: 13px; height: 13px; color: var(--red); }

.auth h1 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2rem); letter-spacing: -.02em; }
.auth__sub { margin-top: .6rem; color: var(--muted); font-size: .9375rem; }

.auth__form { margin-top: 1.5rem; }
.auth .alert { margin-bottom: 1.25rem; }

/* Password field with a reveal control that never overlaps the text. */
.pwfield { position: relative; display: block; }
.pwfield input { padding-right: 3rem !important; }
.pwfield__eye {
    position: absolute; right: 6px; top: 50%;
    transform: translateY(-50%);
    display: grid; place-items: center;
    width: 36px; height: 36px;
    border: 0; border-radius: 0;
    background: transparent;
    color: var(--faint);
    cursor: pointer;
    transition: color .15s, background-color .15s;
}
.pwfield__eye:hover { color: var(--ink-2); background: var(--paper-2); }
.pwfield__eye svg { width: 18px; height: 18px; }
.pwfield__eye[aria-pressed="true"] { color: var(--red); }
/* A struck-through eye once the password is showing. */
.pwfield__eye[aria-pressed="true"]::after {
    content: '';
    position: absolute; left: 8px; right: 8px; top: 50%;
    height: 1.6px; background: currentColor;
    transform: rotate(-38deg);
}

.auth__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
/* The "keep me signed in" tick is not a consent panel — strip the framing. */
.check.check--bare {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-size: .875rem;
}
.check.check--bare:hover { background: none; border: 0; }
.check.check--bare:focus-within { box-shadow: none; }
.check.check--bare:has(input:checked) { background: none; border: 0; }

.auth__help { font-size: .875rem; font-weight: 600; text-decoration: none; }
.auth__help:hover { text-decoration: underline; }
.auth__note { margin-top: .25rem; }

.auth__divider {
    display: flex; align-items: center; gap: 1rem;
    margin: 1.75rem 0 1rem;
    color: var(--faint); font-size: .8125rem;
}
.auth__divider::before, .auth__divider::after {
    content: ''; flex: 1; height: 1px; background: var(--line);
}

.auth__foot { margin-top: 2rem; }
.tlink--back::after { content: none; }
.tlink--back::before { content: '\2190'; transition: transform .15s; }
.tlink--back:hover::before { transform: translateX(-3px); }

/* --- The photograph side -------------------------------------------------- */
.auth__art { position: relative; display: none; overflow: hidden; background: var(--navy); }
@media (min-width: 900px) { .auth__art { display: block; } }

.auth__art img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    animation: pheroSettle 1.8s var(--ease-soft) both;
}
/* White type over a photograph needs the floor under it (§I). */
.auth__art::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(9,14,24,.28) 0%, rgba(9,14,24,.55) 55%, rgba(9,14,24,.9) 100%);
}

.auth__quote {
    position: absolute; left: 0; right: 0; bottom: 0;
    z-index: 1;
    padding: clamp(1.75rem, 1rem + 3vw, 3rem);
    color: #fff;
}
.auth__kicker {
    display: inline-block;
    font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: #ff8577;
    margin-bottom: .75rem;
}
.auth__quote p {
    font-size: clamp(1.0625rem, 1rem + .5vw, 1.35rem);
    line-height: 1.45;
    max-width: 24ch;
    color: #fff;
}
.auth__meta { display: block; margin-top: 1rem; font-size: .8125rem; color: #b9c6d8; }

/* ==========================================================================
   PART 21 — Directional media wipes
   --------------------------------------------------------------------------
   A photograph can be uncovered from either side instead of top-down. The clip
   sits on the image, never on the observed wrapper (see PART 11) — so the
   entrance can still be told when it has arrived.
   ========================================================================== */
.js [data-media][data-wipe="left"]  > img,
.js [data-media][data-wipe="left"]  > picture > img { clip-path: inset(0 100% 0 0); }
.js [data-media][data-wipe="right"] > img,
.js [data-media][data-wipe="right"] > picture > img { clip-path: inset(0 0 0 100%); }

/* Landed — last word, and specific enough to outrank both directions. */
.js [data-media][data-wipe].is-in > img,
.js [data-media][data-wipe].is-in > picture > img {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
}

/* A wipe that comes from the side reads better with a matching drift. */
.js [data-media][data-wipe="left"]  > picture > img { transform: scale(1.09) translateX(-2.5%); }
.js [data-media][data-wipe="right"] > picture > img { transform: scale(1.09) translateX(2.5%); }

@media (prefers-reduced-motion: reduce) {
    .js [data-media][data-wipe] > img,
    .js [data-media][data-wipe] > picture > img {
        clip-path: none !important;
        transform: none !important;
    }
}

/* ==========================================================================
   PART 22 — A cleaner, more editorial homepage
   --------------------------------------------------------------------------
   Three pieces reworked so the page reads as image-led and calm rather than
   as a stack of bordered boxes: the snapshot numbers, the purpose block, and
   the therapeutic-area tiles. No content was removed to get there.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Numbered rows — a list of routes to market, not a grid of cards.
   -------------------------------------------------------------------------- */
.rows { border-top: 1px solid var(--line); margin-top: 54px; }
.row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(200px, 1.05fr) 1.5fr 40px;
    align-items: center;
    gap: 28px;
    padding: 30px 12px 30px 0;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
}
.row::before {
    content: '';
    position: absolute; left: 0; bottom: -1px;
    width: 100%; height: 1px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: 0;
    transition: transform .45s var(--ease-soft);
}
.row:hover::before { transform: scaleX(1); }
.row__t {
    color: var(--ink);
    font-size: clamp(1.15rem, 1.9vw, 1.5rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.02em;
    transition: color .3s var(--ease-soft);
}
.row:hover .row__t { color: var(--red); }
.row__tag {
    display: inline-block;
    margin-left: 12px;
    font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--red);
    vertical-align: 3px;
}
.row__d { color: var(--muted); font-size: 1rem; line-height: 1.5; }
.row__a {
    justify-self: end;
    color: var(--faint);
    transition: color .3s var(--ease-soft), transform .3s var(--ease-soft);
}
.row:hover .row__a { color: var(--red); transform: translateX(5px); }

@media (max-width: 760px) {
    .row {
        grid-template-columns: 1fr 28px;
        align-items: start;
        gap: 16px;
        padding: 26px 0;
    }
    .row__d { grid-column: 1 / 2; }
    .row__a { grid-area: 1 / 2; align-self: center; }
}

/* --------------------------------------------------------------------------
   Hairline grid — photo, rule, heading, one line. No badges, no shadows: the
   1px gap over a --line background draws every divider for free.
   -------------------------------------------------------------------------- */
.hairgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-top: 54px;
}
@media (max-width: 1000px) { .hairgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .hairgrid { grid-template-columns: 1fr; } }

.hairtile { background: var(--paper); text-decoration: none; display: block; }
.hairtile__fig { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-3); }
.hairtile__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-soft); }
.hairtile:hover .hairtile__fig img { transform: scale(1.04); }
.hairtile__body { display: block; padding: 26px 28px 32px; }
.hairtile__rule { display: block; width: 32px; height: 2px; background: var(--red); margin-bottom: 16px; }
.hairtile__body h3 { font-size: 1.0625rem; margin-bottom: .4rem; }
.hairtile__body p { color: var(--muted); font-size: .9375rem; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
    .hairtile:hover .hairtile__fig img { transform: none; }
}

/* --------------------------------------------------------------------------
   Partner teaser — copy and CTA on one side, a numbered list of what an
   appointment includes on the other.
   -------------------------------------------------------------------------- */
.partner-teaser { display: grid; gap: 3rem; }
@media (min-width: 900px) { .partner-teaser { grid-template-columns: 1fr 1fr; align-items: start; } }

.partner-list { display: grid; gap: 1.75rem; margin-top: .5rem; }
.partner-list li { display: flex; gap: 1.1rem; align-items: flex-start; }
.partner-list h3 { font-size: 1rem; margin-bottom: .3rem; }
.partner-list p { color: var(--muted); font-size: .9375rem; line-height: 1.55; }

/* --------------------------------------------------------------------------
   Capability grid — a plain icon, heading and line, in a hairline grid.
   For a set of functions or steps where a photograph would just be filler.
   -------------------------------------------------------------------------- */
.cap__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-top: 3.5rem;
}
.cap__cell {
    display: block;
    background: var(--paper);
    padding: 34px 32px 38px;
    text-decoration: none;
    transition: background-color .25s var(--ease-soft);
}
a.cap__cell:hover { background: var(--paper-2); }
.cap__ico { display: block; width: 30px; height: 30px; color: var(--red); margin-bottom: 22px; }
.cap__cell h2, .cap__cell h3 { font-size: 1.0625rem; margin-bottom: .5rem; }
.cap__cell p { color: var(--muted); font-size: .9375rem; line-height: 1.5; }
.cap__cell .card__kicker { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: .5rem; }
.cap__cell .tlink { display: inline-block; margin-top: 1rem; }

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

@media (max-width: 900px) { .cap__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cap__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Process — one photograph, then the steps as plain text, not cards.
   -------------------------------------------------------------------------- */
.section--rule { background: var(--paper-2); border-block: 1px solid var(--line); }

.proc__fig { max-height: 340px; margin-top: 52px; overflow: hidden; }
.proc__fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }

.proc__steps {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: 0;
    margin-top: 48px;
    border-top: 1px solid var(--line-2);
}
.step { position: relative; padding: 34px 34px 8px 0; }
.step::before {
    content: '';
    position: absolute; top: -1px; left: 0;
    width: 44px; height: 3px;
    background: var(--red);
}
.step + .step { padding-left: 34px; border-left: 1px solid var(--line); }
.step + .step::before { left: 34px; }
.step h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; margin-bottom: 12px; }
.step p { color: var(--muted); font-size: .97rem; line-height: 1.55; }

@media (max-width: 760px) {
    .proc__steps { grid-template-columns: 1fr; border-top: 0; }
    .step { padding: 30px 0 8px; border-top: 1px solid var(--line); }
    .step + .step { padding-left: 0; border-left: 0; }
    .step::before, .step + .step::before { left: 0; }
}

/* --------------------------------------------------------------------------
   Publish grid — five plain commitments, no cards, no badges. The hairline
   dividers come from the 1px gap over a --line background, same trick as
   the therapeutic-areas grid.
   -------------------------------------------------------------------------- */
.publish__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    background: var(--line);
    border-block: 1px solid var(--line);
    margin-top: 54px;
}
.publish__cell { background: var(--paper); grid-column: span 2; padding: 34px 30px 38px; }
.publish__cell:first-child, .publish__cell:nth-child(2) { grid-column: span 3; }
.publish__cell p {
    max-width: 30ch;
    color: var(--ink-2);
    font-size: 1.06rem;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -.011em;
}
.publish__ico { display: block; width: 28px; height: 28px; color: var(--red); margin-bottom: 20px; }

@media (max-width: 1000px) {
    .publish__grid { grid-template-columns: repeat(4, 1fr); }
    .publish__cell, .publish__cell:first-child, .publish__cell:nth-child(2) { grid-column: span 2; }
    .publish__cell:nth-child(5) { grid-column: span 4; }
}
@media (max-width: 640px) {
    .publish__grid { grid-template-columns: 1fr; }
    .publish__cell,
    .publish__cell:first-child,
    .publish__cell:nth-child(2),
    .publish__cell:nth-child(5) { grid-column: span 1; }
}

/* --------------------------------------------------------------------------
   Statement band — a light panel on its own half, the photograph on the
   other, undimmed. No scrim: type never sits on top of the picture. Was a
   solid --ink (near-black) panel; simplified to match the rest of the
   site's paper-and-line language instead of standing out as a dark slab.
   -------------------------------------------------------------------------- */
.statement {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    background: var(--paper-2);
}
.statement__copy {
    width: 100%;
    /* Was a fixed 560px pinned to the column's right edge with
       margin-left:auto — on very wide screens the column grows but the text
       does not, so the gap in front of it grows with it, reading as
       off-centre/misaligned. Scaling the cap with viewport width and
       centring in the column keeps the block anchored sensibly at any
       width instead of drifting into empty space. */
    max-width: clamp(420px, 30vw + 200px, 720px);
    margin-inline: auto;
    padding: clamp(28px, 4vh, 52px) clamp(28px, 5vw, 76px);
}
.statement__copy .eyebrow { color: var(--red); }
.statement__copy h2 {
    color: var(--ink);
    max-width: 15ch;
    font-size: clamp(1.85rem, 1.4rem + 2.2vw, 2.7rem);
    letter-spacing: -.028em;
}
.statement__copy .stack { margin-top: 1.5rem; }
.statement__copy .stack p { color: var(--muted); font-size: 1.0625rem; line-height: 1.6; }
.statement__copy .alink { margin-top: 2.35rem; }

.statement__fig { align-self: stretch; min-height: 220px; overflow: hidden; }
.statement__fig img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
    .statement { grid-template-columns: 1fr; }
    .statement__copy { max-width: none; margin: 0; padding: clamp(24px, 4vh, 40px) var(--gut); }
    .statement__fig { order: -1; height: min(24vh, 200px); }
}

/* --------------------------------------------------------------------------
   Text link with a hairline underline — quieter than a button, for a
   secondary path out of a section.
   -------------------------------------------------------------------------- */
.alink {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--line-2);
    color: var(--ink);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .25s var(--ease-soft), border-color .25s var(--ease-soft);
}
.alink svg { flex: none; transition: transform .3s var(--ease-soft); }
.alink:hover { color: var(--red); border-color: var(--red); }

/* --------------------------------------------------------------------------
   Plain statement — a heading and a lede with nowhere else to sit, and no
   photograph forced in just to fill the section.
   -------------------------------------------------------------------------- */
.plain-cta { text-align: center; }
.plain-cta .eyebrow { display: block; }
.plain-cta h2 { max-width: 22ch; margin-inline: auto; }
.plain-cta p { max-width: 52ch; margin: 1rem auto 0; color: var(--muted); font-size: 1.0625rem; }
.plain-cta__links { display: flex; justify-content: center; gap: 2.25rem; margin-top: 2rem; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
    .snap__cell { transition: none; }
}

/* ==========================================================================
   PART 23 — Full-width photographic bands
   --------------------------------------------------------------------------
   The picture runs the full width of the page and the copy sits on a frosted
   white card over it. The photograph itself is never darkened — the card is
   what carries the contrast, so a light image stays light.
   ========================================================================== */
.imgband {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: clamp(420px, 62vh, 620px);
    padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
    background: var(--paper-2);
}

.imgband picture { display: contents; }
.imgband > picture > img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 112%;
    top: -6%;
    object-fit: cover;
    transform: translate3d(0, var(--par, 0px), 0);
    will-change: transform;
}

/* A whisper of white at the very edges so the band meets the sections above
   and below cleanly. Not a scrim — it never reaches the middle of the frame. */
.imgband::before {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 18%,
                                        rgba(255,255,255,0) 82%, rgba(255,255,255,.55) 100%);
    pointer-events: none;
}

.imgband .wrap { width: 100%; }

.imgband__card {
    max-width: 540px;
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    background: var(--paper);
    border: 1px solid var(--line);
}
.imgband--right .imgband__card { margin-left: auto; }

.imgband__card h2 { letter-spacing: -.02em; }
.imgband__card p { margin-top: .85rem; color: var(--body); }
.imgband__links { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin-top: 1.25rem; }

@media (max-width: 700px) {
    .imgband { min-height: 0; }
    .imgband__card { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .imgband > picture > img { transform: none !important; }
}

/* ==========================================================================
   PART 24 — Header and menus, rebuilt
   --------------------------------------------------------------------------
   The bar gains a little more air, the current section is marked, and each
   menu item now carries an icon and its own description. A menu always ends
   with the section's own page, so a top-level item is never a dead end.
   ========================================================================== */

/* --- The bar --------------------------------------------------------------
   Eight top-level items, a lockup and a button have to share one line. The
   type is small and the padding tight on purpose; below 1200px the drawer
   takes over rather than letting the row crush itself.
   -------------------------------------------------------------------------- */
:root { --header-h: 66px; }

.hdr__bar { gap: .75rem; }
.hdr__brand img, .hdr__brand svg { height: 34px; }

/* The desktop nav only exists from 1200px up — below that the drawer serves.
   Declaring it as a flex row unconditionally (as this once did) left the whole
   menu, and every dropdown panel, laid out off the side of a phone: hundreds of
   pixels of horizontal scroll on every page. */
.nav { display: none; }
@media (min-width: 1200px) { .nav { display: flex; align-items: center; gap: 0; } }

.nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    padding: .45rem .52rem;
    border-radius: 0;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: -.002em;
    white-space: nowrap;
    color: var(--ink-2);
    background: transparent;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    transition: color .18s, background-color .18s;
}
@media (min-width: 1320px) {
    .hdr__bar { gap: 1rem; }
    .nav__link { font-size: .875rem; padding: .5rem .68rem; }
    .hdr__brand img, .hdr__brand svg { height: 38px; }
}
.nav__link:hover { color: var(--ink); background: rgba(16, 28, 52, .05); }

/* The section you are in keeps a short rule under it. */
.nav__link.is-current::after {
    content: '';
    position: absolute; left: .52rem; right: .52rem; bottom: .12rem;
    height: 2px; border-radius: 0;
    background: var(--red-bright);
}
.nav__caret { width: 10px; height: 10px; opacity: .5; transition: transform .25s var(--ease-out); }
.nav__link[aria-expanded="true"] { color: var(--ink); background: rgba(16, 28, 52, .06); }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); opacity: .9; }

.hdr__login {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .48rem .9rem;
    font-size: .8125rem;
    white-space: nowrap;
    border: 1.5px solid var(--line-2);
    border-radius: 999px;
    font-size: .875rem; font-weight: 650;
    color: var(--ink);
    text-decoration: none;
    transition: border-color .18s, background-color .18s, color .18s;
}
.hdr__login:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.hdr__login .ico { width: 15px; height: 15px; }

/* --- The panel ------------------------------------------------------------ */
.drop {
    position: absolute;
    top: calc(100% - 6px);
    left: 0;
    z-index: 60;
    min-width: 320px;
    padding: .6rem;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: var(--sh-md);

    opacity: 0;
    transform: translateY(-8px) scale(.985);
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s var(--ease-out), transform .28s var(--ease-out), visibility .22s;
}
.drop[data-open="true"] {
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
}

/* A small nib pointing back at the trigger. */
.drop::before {
    content: '';
    position: absolute; top: -6px; left: var(--nib, 26px);
    width: 12px; height: 12px;
    background: inherit;
    border-left: 1px solid var(--line);
    border-top: 1px solid var(--line);
    transform: rotate(45deg);
    border-radius: 0;
}

.drop--wide { min-width: 620px; }
.drop__grid { display: grid; gap: 2px; }
.drop--wide .drop__grid { grid-template-columns: 1fr 1fr; column-gap: 6px; }

/* A separator in a two-column menu would cut one column in half. */
.drop__sep { height: 1px; background: var(--line); margin: .35rem .5rem; }
.drop--wide .drop__sep { grid-column: 1 / -1; }

.drop__link {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .6rem .7rem;
    border-radius: 0;
    text-decoration: none;
    transition: background-color .16s, transform .16s;
}
.drop__link:hover { background: var(--paper-2); transform: translateX(2px); }

.drop__icon {
    flex: none;
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border-radius: 0;
    background: var(--red-wash);
    border: 1px solid #f6dade;
    color: var(--red);
    transition: background-color .16s, color .16s, border-color .16s;
}
.drop__link:hover .drop__icon { background: var(--red); border-color: var(--red); color: #fff; }

.drop__text { display: grid; gap: .1rem; min-width: 0; }
.drop__text b {
    display: block;
    font-size: .875rem; font-weight: 600; color: var(--ink);
    line-height: 1.35;
}
.drop__text span { font-size: .75rem; color: var(--muted); line-height: 1.45; }

.drop__all {
    display: flex; align-items: center; gap: .4rem;
    margin: .45rem .2rem .1rem;
    padding: .6rem .7rem;
    border-top: 1px solid var(--line);
    padding-top: .75rem;
    font-size: .8125rem; font-weight: 700;
    letter-spacing: .02em;
    color: var(--red);
    text-decoration: none;
}
.drop__all .ico { transition: transform .18s; }
.drop__all:hover .ico { transform: translateX(3px); }

/* Menus used to be right-aligned by position in the bar, which made them jump
   between edges as you moved along the nav. They are all anchored to their own
   trigger now, and the script nudges one back on screen only if it would
   actually run off — see PART 11 of corporate.js. */
.drop { max-width: calc(100vw - 32px); }

/* Over a photographic hero the bar's type is white — the caret follows. */
.hdr--over:not(.is-stuck) .nav__caret { opacity: .8; }

@media (prefers-reduced-motion: reduce) {
    .drop { transition: opacity .01ms, visibility .01ms; transform: none; }
    .drop__link:hover { transform: none; }
}

/* ==========================================================================
   PART 24b — Header as three floating capsules
   --------------------------------------------------------------------------
   Logo, nav and login stop being one continuous bar and become three
   independent pills, with page content visible in the gaps between them.
   .hdr keeps the position/top/margin-inline that make the whole row float
   (see PART 14) but no longer paints a background of its own — each capsule
   below carries its own fill, radius and shadow instead.
   ========================================================================== */

.hdr,
.hdr--over:not(.is-stuck),
.hdr--glass {
    background: none;
}
.hdr,
.hdr.is-stuck,
.hdr--over.is-stuck,
.hdr--glass.is-stuck {
    box-shadow: none;
    border-radius: 0;
}

:root { --cap-h: 64px; --header-h: 80px; }

/* At rest, the gaps between capsules are the point — page content shows
   through them on purpose. But once the header is stuck (scrolled), that
   same page content is now scrolling past underneath it, and shows through
   those gaps too — which reads as the header and page content overlapping
   into a jumble, not as a deliberate design. A backdrop behind the capsules
   (not on them — they keep their own separate pill fills) fixes that: it is
   invisible until is-stuck, then blocks whatever is scrolling underneath. */
/* Sized to .hdr__bar (not .hdr) so it only covers the actual capsule row —
   .hdr__bar caps out at max-width:1720px and centres itself, so on very wide
   screens .hdr is much wider than the row of capsules; a backdrop on .hdr
   itself would paint a full-viewport-wide bar instead of just sitting behind
   the three pills. */
.hdr__bar { gap: clamp(10px, 1.6vw, 18px); position: relative; }
.hdr__bar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 16px;
    background: var(--paper);
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}
/* A positioned element (even at z-index:auto) paints above static in-flow
   content regardless of DOM order — the backdrop above is absolutely
   positioned, so without this the brand and login capsules (both plain
   static-flow boxes) render UNDER it once it turns opaque, and disappear.
   .nav happened to survive that because .nav__item is already positioned
   for its own dropdown. Pin every capsule above the backdrop explicitly. */
.hdr__brand,
.nav,
.hdr__login,
.burger {
    position: relative;
    z-index: 1;
}
.hdr.is-stuck .hdr__bar::before,
.hdr--over.is-stuck .hdr__bar::before,
.hdr--glass.is-stuck .hdr__bar::before {
    opacity: 1;
}

/* All four capsules share one fixed height so they line up exactly — each
   just centres its own content (logo / links / label / icon) inside it,
   rather than sizing itself from padding + content like before. Display is
   deliberately NOT set here: .nav and .burger toggle display responsively
   elsewhere (nav only from 1200px up), and redeclaring it here at equal
   specificity would win by source order and make nav show on mobile. */
.hdr__brand,
.nav,
.hdr__login,
.burger {
    height: var(--cap-h);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: 0 2px 4px rgba(16, 28, 52, .1), 0 16px 34px -14px rgba(16, 28, 52, .4);
}
/* Not .burger: its three lines rely on the default align-items: stretch to
   span the button's width — centering them here would collapse them. */
.hdr__brand,
.hdr__login {
    align-items: center;
}
/* A little more lift once the row has scrolled, matching what the single
   bar used to do — applied per capsule now that .hdr itself is invisible. */
.is-stuck .hdr__brand,
.is-stuck .nav,
.is-stuck .hdr__login,
.is-stuck .burger {
    border-color: var(--line-2);
    box-shadow: 0 3px 6px rgba(16, 28, 52, .12), 0 20px 40px -14px rgba(16, 28, 52, .46);
}

.hdr__brand { padding: 0 16px; }
.hdr__login:hover { background: var(--ink); border-color: var(--ink); }

/* Logo sized to sit comfortably inside the fixed-height brand capsule. */
.hdr__brand img, .hdr__brand svg { height: 44px; }
@media (max-width: 420px)  { .hdr__brand img, .hdr__brand svg { height: 34px; } }

.nav { padding: 0 6px; }
/* Seven top-level items have to share the row from 1200px, the same width
   the drawer hands off at — kept tight here on purpose. Comfortable padding
   only kicks in once there is real room for it, at 1400px. */
.nav__link { padding: .45rem .5rem; font-size: .8125rem; }
.hdr__login { padding: 0 1rem; font-size: .875rem; gap: .4rem; }
.hdr__login .ico { width: 15px; height: 15px; }
.burger { width: var(--cap-h); height: var(--cap-h); padding: 0 14px; }

@media (min-width: 1400px) {
    .hdr__brand { padding: 0 24px; }
    .nav__link { padding: .6rem .8rem; font-size: .875rem; }
    .hdr__login { padding: 0 1.3rem; font-size: .9375rem; gap: .5rem; }
    .hdr__login .ico { width: 16px; height: 16px; }
}

@media (max-width: 420px) {
    :root { --cap-h: 52px; --header-h: 68px; }
}

/* ==========================================================================
   PART 25 — The hero deck
   --------------------------------------------------------------------------
   A full-bleed photograph per slide, whitened on the left under a gradient
   so ink type sits on it directly — no dark scrim, no card. The copy is
   vertically centred and held to the same content width as the header.
   ========================================================================== */
.hero-deck {
    position: relative;
    isolation: isolate;
    background: var(--paper);
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: calc(100vh - var(--header-h) - var(--marquee-h));
}
.hero-deck__stage { position: relative; isolation: isolate; overflow: hidden; min-width: 0; }

.slide {
    position: absolute; inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .9s var(--ease-soft), visibility 0s linear .9s;
}
.slide.is-active { opacity: 1; visibility: visible; transition: opacity .9s var(--ease-soft); z-index: 1; }

.slide__fig { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.slide__fig img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: var(--fig-pos, 62% 50%);
    animation: slideKenburns 11s linear both;
}
@keyframes slideKenburns { from { transform: scale(1); } to { transform: scale(1.085); } }

/* White fade from the left, where the copy sits, easing off by three-quarters
   across — the photograph on the right is left alone. */
.slide__fig::after {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.92) 26%,
                                rgba(255,255,255,.4) 50%, rgba(255,255,255,0) 72%),
        linear-gradient(rgba(255,255,255,0) 70%, rgba(255,255,255,.6) 100%);
}

.slide__body {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding: clamp(48px, 8vh, 96px) var(--gut) clamp(96px, 13vh, 150px);
}

.slide__mark { display: block; width: 44px; height: 3px; background: var(--red); margin-bottom: 26px; }

.slide__eyebrow {
    font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    color: var(--red);
    margin-bottom: 18px;
}
.slide__body h1, .slide__body h2 {
    color: var(--ink);
    font-size: clamp(2.15rem, 4.9vw, 4.3rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -.034em;
    max-width: 19ch;
    padding-bottom: 4px;
}
.slide__body .nb {
    color: var(--red);
    font-style: italic;
    font-weight: 500;
    white-space: nowrap;
}
.slide__lede {
    color: var(--muted);
    max-width: 46ch;
    margin-top: 24px;
    font-size: clamp(1.02rem, 1.35vw, 1.19rem);
    line-height: 1.55;
}
.slide__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

/* --- Deck controls: a full-width bar at the foot of the stage, numbers left,
       arrows right, matching the header's content measure. --- */
.hero-deck__ui {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    max-width: var(--wrap);
    margin-inline: auto;
    padding: 0 var(--gut) clamp(26px, 4vh, 40px);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    pointer-events: none;
}
.hero-deck__ui > * { pointer-events: auto; }

.deck-nums { display: flex; gap: 28px; list-style: none; }
.deck-nums button {
    position: relative;
    background: none; border: 0;
    padding: 14px 7px 16px;
    font-size: .76rem; font-weight: 600; letter-spacing: .1em;
    font-variant-numeric: tabular-nums;
    color: var(--faint);
    cursor: pointer;
    transition: color .3s var(--ease-soft);
}
.deck-nums button::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
    background: var(--line-2);
}
.deck-nums button::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
    background: var(--pulse);
    transform: scaleX(0);
    transform-origin: 0;
}
.deck-nums button:hover, .deck-nums button[aria-current="true"] { color: var(--ink); }
.deck-nums button[aria-current="true"]::after { animation: deckClock 7s linear both; }
@keyframes deckClock { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.deck-arrows { display: flex; gap: 10px; }
.deck-arrows button {
    display: grid; place-items: center;
    width: 50px; height: 50px;
    background: var(--paper);
    border: 1px solid var(--line-2);
    color: var(--ink);
    cursor: pointer;
    transition: background-color .25s var(--ease-soft), border-color .25s var(--ease-soft), color .25s;
}
.deck-arrows button:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.ico--flip { transform: scaleX(-1); }

/* --- Focus-area index, under the deck --- */
.hero-deck__index { border-top: 1px solid var(--line); background: var(--paper); }
.hero-deck__index ol {
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gut);
    display: grid;
    /* One row, but only where one row actually fits. Each track is floored at
       its own min-content, so a plain 1fr cannot shrink a long label — with
       eight divisions the row ran ~100px past the wrap and was clipped by an
       ancestor. minmax() keeps that floor and lets the fr share out whatever
       is left, so the band ends flush with the wrap; the count ladder below
       (8 > 4 > 2 > 1) hands off before the floors can overflow again. */
    grid-template-columns: repeat(var(--n-therapies, 6), minmax(min-content, 1fr));
    list-style: none;
}
.hero-deck__index li + li { border-left: 1px solid var(--line); }
.hero-deck__index a {
    display: flex; align-items: baseline; gap: 12px;
    padding: 22px 20px 24px 0;
    text-decoration: none;
    transition: color .28s var(--ease-soft);
}
.hero-deck__index li + li a { padding-left: 24px; }
.hero-deck__index a span { font-size: 1rem; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.hero-deck__index a:hover, .hero-deck__index a:hover span { color: var(--red); }

/* The single row carries eight labels, so it buys its width back from the
   type and the cell padding. Scoped to the width that holds it — every
   narrower layout keeps the roomier original settings. */
@media (min-width: 1200px) {
    .hero-deck__index a { padding-right: 16px; }
    .hero-deck__index li + li a { padding-left: 20px; }
    .hero-deck__index a span { font-size: .9rem; letter-spacing: -.01em; white-space: nowrap; }
}

/* Between the one-row band and the phone pair, four across reads better than
   two: eight items land as a clean 4 x 2 block instead of a four-row list. */
@media (min-width: 901px) and (max-width: 1199px) {
    .hero-deck__index ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hero-deck__index li:nth-child(4n+1) { border-left: 0; }
    .hero-deck__index li:nth-child(n+5) { border-top: 1px solid var(--line); }
    .hero-deck__index li:nth-child(4n+1) a { padding-left: 0; }
}

@media (max-width: 900px) {
    .hero-deck { min-height: 0; }
    .hero-deck__stage { min-height: calc(100vh - var(--header-h) - var(--marquee-h)); display: flex; }
    .slide { flex-direction: column; align-items: stretch; }
    .slide__fig { flex: none; height: clamp(210px, 34vh, 380px); position: relative; overflow: hidden; }
    .slide__fig::after { display: none; }
    .slide__fig img {
        object-position: 60% 44%;
        -webkit-mask-image: linear-gradient(#000 0% 62%, rgba(0,0,0,.4) 86%, transparent 100%);
                mask-image: linear-gradient(#000 0% 62%, rgba(0,0,0,.4) 86%, transparent 100%);
    }
    .slide__body {
        width: auto; max-width: none;
        margin: 0;
        padding: clamp(24px, 4vh, 38px) var(--gut) clamp(78px, 10vh, 96px);
        display: flex; flex-direction: column; flex: 1;
        justify-content: center; align-items: flex-start;
    }
    .slide__mark { margin-bottom: 18px; }
    .slide__eyebrow { margin-bottom: 14px; }
    .slide__body h1, .slide__body h2 { font-size: clamp(1.95rem, 8.4vw, 2.5rem); max-width: 19ch; }
    .slide__lede { max-width: none; margin-top: 16px; }
    .slide__cta { width: 100%; gap: 12px; margin-top: 26px; }
    .slide__cta .btn { justify-content: center; width: 100%; }

    .hero-deck__ui { padding: 0 0 12px; display: block; top: auto; bottom: 0; }
    .deck-nums { gap: 0; }
    .deck-nums li { flex: 1; }
    .deck-nums button { width: 100%; text-align: left; padding: 13px 0 15px var(--gut); }
    .deck-arrows { display: none; }

    .hero-deck__index ol { grid-template-columns: repeat(2, 1fr); }
    .hero-deck__index li:nth-child(2n+1) { border-left: 0; }
    .hero-deck__index li:nth-child(n+3) { border-top: 1px solid var(--line); }
    .hero-deck__index li:nth-child(2n+1) a { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .slide { transition: none; }
    .slide__fig img { animation: none; }
    .deck-nums button[aria-current="true"]::after { animation: none; transform: scaleX(1); }
}

/* ==========================================================================
   PART 26 — The page below the hero
   --------------------------------------------------------------------------
   Every section below the hero sits on its own floor. Tinted, navy and
   photographic sections already carry a background.
   ========================================================================== */
main > * { position: relative; z-index: 1; }
main > .section:not(.section--tint):not(.section--navy):not(.section--photo),
main > .pulse-rule,
main > div:has(> .pulse-rule) { background-color: var(--paper); }

/* --------------------------------------------------------------------------
   Full-width bands breathe as they cross
   -------------------------------------------------------------------------- */
.js .imgband > picture > img {
    transform: translate3d(0, var(--par, 0px), 0) scale(var(--zoom, 1.06));
    transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: reduce) {
    .js .imgband > picture > img { transform: none !important; }
}

/* ==========================================================================
   PART 27 — Fixed band photographs
   --------------------------------------------------------------------------
   The picture holds still while the words travel over it.

   Done with clip-path, not background-attachment: fixed. A clip-path on the
   band clips anything inside it without becoming a containing block for a
   fixed child — so the photograph can be anchored to the viewport and still be
   cut to the exact shape of its band. background-attachment: fixed is ignored
   outright on iOS, which is where half the traffic is.
   ========================================================================== */
@media (min-width: 900px) {
    .js .imgband {
        clip-path: inset(0);
        /* The card needs room to travel while the picture stays put. */
        min-height: clamp(560px, 78vh, 760px);
    }

    .js .imgband > picture > img {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        /* Held still: no drift, no breathing — that is the whole point. */
        transform: none;
        will-change: auto;
        object-fit: cover;
        z-index: -2;
    }

    /* The white edge fade travels with the band, not with the picture. */
    .js .imgband::before { z-index: -1; }
}

/* A phone scrolls too fast for a held picture to read as anything but a jump,
   and a viewport-sized fixed image is a memory cost it should not pay. */
@media (max-width: 899px), (prefers-reduced-motion: reduce) {
    .js .imgband { clip-path: none; }
    .js .imgband > picture > img { position: absolute; width: 100%; height: 112%; }
}

/* ==========================================================================
   PART 29 — Responsive corrections
   --------------------------------------------------------------------------
   Found by walking every page at 360, 390, 768, 1024 and 1280 and measuring
   what stuck out, what was too small to read and what was too small to hit.
   ========================================================================== */

/* A tick box has to be big enough to hit — 24px is the floor WCAG 2.5.8 sets. */
.check input[type=checkbox], .check input[type=radio] { width: 22px; height: 22px; }
@media (pointer: coarse) {
    .check input[type=checkbox], .check input[type=radio] { width: 24px; height: 24px; }
    /* Standalone text links get a thumb-sized row on touch. */
    .tlink { min-height: 34px; align-items: center; }
    .card__foot .tlink, .imgband__links .tlink { min-height: 40px; }
}

/* --------------------------------------------------------------------------
   The purpose board on a small screen
   -------------------------------------------------------------------------- */
@media (max-width: 1079px) {
    .board__media { min-height: 0; padding-block: 2rem; }
    .board__copy { max-width: none; }
}
@media (max-width: 560px) {
    .board__media { border-radius: 0; }
}

/* --------------------------------------------------------------------------
   Full-width bands
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
    .imgband { min-height: 0; padding-block: clamp(2.5rem, 2rem + 4vw, 4rem); }
    .imgband__card { max-width: none; }
}

/* --------------------------------------------------------------------------
   Forms and tables on a phone
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
    .formbox { border-radius: 0; }
    .form__actions { flex-direction: column; align-items: stretch; }
    .form__actions .btn { width: 100%; }
    .form__actions .form__note { text-align: center; }
    .filefield { flex-wrap: wrap; }
    .filefield__text { min-width: 0; flex: 1 1 60%; }
}

/* Wide tables keep their own scroller; make it obvious it is one. */
@media (max-width: 700px) {
    .tablewrap { border-radius: 0; }
    table.data { min-width: 520px; }
}

/* --------------------------------------------------------------------------
   Section rhythm tightens on small screens rather than staying desktop-sized
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
    .section { padding-block: 2.25rem; }
    .purpose__points { border-radius: 0; }
    .snap { gap: 10px; }
    .snap__cell { padding: 1rem .9rem 1.1rem; border-radius: 0; }
    .nextsteps__card { padding: 1.15rem 1.1rem; }
}

/* --------------------------------------------------------------------------
   PART 29b — Small-screen corrections found in the second pass
   -------------------------------------------------------------------------- */

/* A sideways entrance pushes an element past the edge while it waits, which on
   a phone is most of the screen width. Below 700px everything rises instead. */
@media (max-width: 700px) {
    .js .reveal[data-reveal="left"],
    .js .reveal[data-reveal="right"],
    .js .reveal[data-reveal="swing"] { transform: translate3d(0, 24px, 0); }
    .js .reveal[data-reveal="zoom"]  { transform: scale(.97); }
}

/* Tick boxes at the size a thumb needs, on every device. */
.check input[type=checkbox], .check input[type=radio] { width: 24px; height: 24px; }

/* Emulators do not always report a coarse pointer, so the touch-sized link row
   is set by width as well. */
@media (max-width: 900px) {
    .tlink { min-height: 34px; align-items: center; }
    .card__foot .tlink { min-height: 40px; }
}

/* Nothing on the site sits below 12px any more. */
.hero__cue, .chapters__item, .chapters__n, .chapters__l { font-size: .75rem; }

/* The bar itself has to fit a 360px phone. */
@media (max-width: 420px) {
    .hdr__bar { gap: .5rem; }
    .hdr__brand img, .hdr__brand svg { height: 30px; }
    .brand-lockup__text i { display: none; }
}

/* ==========================================================================
   PART 31 — FAQ accordion
   --------------------------------------------------------------------------
   Native <details>/<summary>, no JS required to open or close. A plus sign
   that rotates into a minus on [open].
   ========================================================================== */
.faq__list { display: grid; margin-top: 2.5rem; border-top: 1px solid var(--line); }
.faq__list details { border-bottom: 1px solid var(--line); }
.faq__list summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.4rem .25rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary:hover { color: var(--red); }

.faq__sign { position: relative; flex: none; width: 18px; height: 18px; color: var(--ink-2); }
.faq__sign::before, .faq__sign::after {
    content: '';
    position: absolute; top: 50%; left: 50%;
    background: currentColor;
    transition: transform .2s var(--ease-out), opacity .2s;
}
.faq__sign::before { width: 14px; height: 1.7px; transform: translate(-50%, -50%); }
.faq__sign::after { width: 1.7px; height: 14px; transform: translate(-50%, -50%); }
details[open] .faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
details[open] summary { color: var(--red); }

.faq__list p { max-width: 68ch; padding: 0 .25rem 1.5rem; color: var(--muted); font-size: .9375rem; line-height: 1.6; }
.faq__list p a { color: var(--red); }

@media (prefers-reduced-motion: reduce) {
    .faq__sign::before, .faq__sign::after { transition: none; }
}

/* ==========================================================================
   PART 32 — Mobile
   --------------------------------------------------------------------------
   Everything below 1200px, where the drawer takes over from the desktop nav.
   This part is last on purpose: it corrects the earlier desktop-first rules
   rather than being corrected by them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Nothing scrolls sideways
   --------------------------------------------------------------------------
   html already clips, but a clipped html still lets a too-wide child set the
   layout width for everything under it — which is how one over-long header
   pushed body copy off the right edge of a 320px phone. Clipping the body as
   well contains the damage to the element that caused it.
   -------------------------------------------------------------------------- */
body { overflow-x: clip; }

/* Grid and flex children default to min-width:auto, so a long word, a wide
   table or a nowrap label stretches its whole track. These are the containers
   that actually hold such content. */
.split > *,
.grid > *,
.wrap > *,
.mapbox > *,
.ftr__top > * { min-width: 0; }

/* --------------------------------------------------------------------------
   2. The header capsules
   --------------------------------------------------------------------------
   The three capsules are nowrap boxes in a flex row. Left shrinkable, the
   brand capsule was squeezed narrower than its own lockup and clipped the
   "PHARMA PRIVATE LIMITED" descriptor mid-word — the bug this part starts
   from. flex:none stops the squeeze; the sizing steps below make sure the
   row genuinely fits instead, all the way down to a 320px phone.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .hdr__brand,
    .hdr__login,
    .burger { flex: none; }

    /* The nav is gone below 1200px, so the brand is what pushes the login and
       burger capsules over to the right. */
    .hdr__brand { margin-right: auto; }
}

/* The descriptor needs ~150px of its own and is the first thing to go. Below
   this width the wordmark carries the lockup on its own. */
@media (max-width: 560px) {
    .hdr .brand-lockup__text i { display: none; }
    .hdr .brand-lockup__text { align-content: center; }
}

/* Phone-sized capsules. One step, not a slow taper, so the row has real
   breathing room rather than only just fitting. */
@media (max-width: 560px) {
    :root { --cap-h: 50px; --header-h: 64px; --hdr-gap: 12px; }

    .hdr__bar { padding-inline: 12px; gap: 8px; }
    .hdr__brand { padding: 0 14px; }
    .hdr__brand img, .hdr__brand svg { height: 30px; }
    .brand-lockup { gap: 9px; }
    .brand-lockup__text b { font-size: 17px; }

    .hdr__login { padding: 0 .85rem; font-size: .8125rem; gap: .35rem; }
    .hdr__login .ico { width: 14px; height: 14px; }

    .burger { width: var(--cap-h); height: var(--cap-h); padding: 0 13px; }
}

/* Under ~375px the word "Login" is the difference between fitting and not.
   The lock alone carries it (the link is aria-labelled), and the drawer still
   offers a full-width button that says Login in words. */
@media (max-width: 374px) {
    :root { --cap-h: 46px; --header-h: 60px; --hdr-gap: 10px; }

    .hdr__bar { padding-inline: 10px; gap: 6px; }
    .hdr__brand { padding: 0 12px; }
    .hdr__brand img, .hdr__brand svg { height: 28px; }
    .brand-lockup { gap: 8px; }
    .brand-lockup__text b { font-size: 16px; }

    .hdr__login-txt { display: none; }
    .hdr__login { width: var(--cap-h); padding: 0; justify-content: center; gap: 0; }
    .burger { padding: 0 12px; }
}

/* --------------------------------------------------------------------------
   3. The drawer
   --------------------------------------------------------------------------
   It used to start at header-height + gap, measured from the viewport top —
   correct only once the page is scrolled and the header has stuck. At the top
   of a page the header still sits in flow, so the drawer began ~16px too low
   and a strip of the hero showed through between the two. Covering the whole
   viewport and pushing the menu down with padding is right at every scroll
   position; the header floats above it on its own z-index either way.
   -------------------------------------------------------------------------- */
.mnav {
    inset: 0;
    padding-top: calc(var(--marquee-h) + var(--header-h) + var(--hdr-gap) + 6px);
    padding-bottom: max(40px, env(safe-area-inset-bottom));
}
.mnav__cta { padding-inline: 20px; }

/* The marquee is a sibling of the header rather than a child of it — the
   comments upstream describe the arrangement it was refactored away from —
   so it has no stacking context and the now full-height drawer painted
   straight over it. Lift it above both. */
.marquee { position: relative; z-index: 101; }

/* --------------------------------------------------------------------------
   4. Forms
   --------------------------------------------------------------------------
   iOS Safari zooms the whole page in when a focused field's type is under
   16px, and never zooms back out. Every field on the site was 15px.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .field input[type=text], .field input[type=email], .field input[type=tel],
    .field input[type=password], .field input[type=search], .field input[type=url],
    .field input[type=number], .field input[type=date], .field input[type=file],
    .field select, .field textarea { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   5. Prose tables
   --------------------------------------------------------------------------
   Data tables already sit in a .tablewrap that scrolls. A table written
   straight into prose (the privacy policy's "what we collect") had nothing,
   and set the page width on a small phone. display:block turns the table
   itself into the scroller without needing a wrapper element around it.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
    .prose table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .prose table thead th,
    .prose table td { min-width: 8.5rem; }
    .prose th, .prose td { padding: .55rem .7rem; }
}

/* --------------------------------------------------------------------------
   6. Touch targets
   --------------------------------------------------------------------------
   Link lists set tight for a desktop sidebar are hard to hit with a thumb.
   Padding (not height) so the text stays where the design puts it.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .ftr__col a,
    .ftr__legal a,
    .mnav__panel a {
        display: block;
        padding-block: .45rem;
    }
    .mnav__panel a { padding-block: .6rem; }
}

/* --------------------------------------------------------------------------
   7. Odds and ends
   -------------------------------------------------------------------------- */
/* The cookie bar is the widest fixed element on the page; give it the same
   inset as the header rather than a fixed 16px that a 320px screen cannot
   spare. */
@media (max-width: 560px) {
    .cookie { left: 12px; right: 12px; width: auto; }
    .cookie__row { flex-wrap: wrap; }
    .cookie__row .btn { flex: 1 1 auto; }
}

/* The scroll-to-top button sat over body copy on a narrow column. */
@media (max-width: 560px) {
    .totop { right: 12px; bottom: 12px; }
}

/* --------------------------------------------------------------------------
   8. The hero deck
   --------------------------------------------------------------------------
   The deck is a grid whose single column is auto-sized. The focus-area index
   in the second row has a two-column list inside it, and each 1fr track takes
   its own min-content as a floor — so on a 320px phone the list demanded
   357px, the track grew to match, and the stage (sharing that track) reached
   37px past the screen and clipped the headline and the CTA against its own
   overflow:hidden. Let the tracks shrink, and give the list one column where
   two will not fit.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .hero-deck__index,
    .hero-deck__index ol,
    .hero-deck__index li { min-width: 0; }
}
@media (max-width: 480px) {
    .hero-deck__index ol { grid-template-columns: 1fr; }
    .hero-deck__index li + li { border-left: 0; border-top: 1px solid var(--line); }
    .hero-deck__index li:nth-child(n+3) { border-top: 1px solid var(--line); }
    .hero-deck__index li a,
    .hero-deck__index li + li a { padding-left: 0; }
}

/* ==========================================================================
   Brand Presence — the road north  (/network/brand-presence)
   --------------------------------------------------------------------------
   The page is a drive, and its organising object is the kilometre stone: the
   thing that actually stands at the roadside telling you the town and the
   distance. Every stop gets one, carrying a real figure measured from the
   coordinates the cameras recorded.

   So: no filter bar, no thumbnail grid. A road runs down the page, each town
   is a stop on it, you arrive at one big frame the way you would arrive at
   the hoarding, and the rest of that town goes past in a strip beside you.

   Geometry stays square-edged like the rest of the site. The one curve
   allowed anywhere here is the top of the stone, because that is the shape
   that makes it read as a milestone and not as a card.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The stone
   -------------------------------------------------------------------------- */
.stone {
    width: 128px;
    flex: none;
    background: var(--paper);
    border: 1px solid var(--line-2);
    border-radius: 64px 64px 0 0;
    overflow: hidden;
    text-align: center;
    box-shadow: var(--sh-md);
}
.stone__cap {
    background: var(--navy);
    color: #fff;
    padding: 1.35rem .5rem .5rem;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.2;
    /* the painted band on a real stone stops short of the sides */
    border-bottom: 3px solid var(--red-bright);
}
.stone__km { padding: .6rem .4rem .75rem; line-height: 1; }
.stone__km b {
    display: block;
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.stone__km span {
    display: block;
    margin-top: .25rem;
    font-size: .625rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--faint);
}

/* --------------------------------------------------------------------------
   2. Masthead
   -------------------------------------------------------------------------- */
.drive-hero {
    position: relative;
    background: var(--navy);
    padding-block: clamp(1.75rem, 1.25rem + 2vw, 2.75rem) clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 64px 64px;
}
.has-overlay-header .drive-hero {
    padding-top: calc(var(--header-h) + var(--marquee-h) + var(--hdr-gap) + clamp(1rem, .75rem + 1.2vw, 1.75rem));
}
.drive-hero__in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
    align-items: center;
}
@media (max-width: 900px) { .drive-hero__in { grid-template-columns: 1fr; } }

.drive-hero .eyebrow { color: #ff8577; margin-bottom: .35rem; }
/* Set tighter than a section masthead: the page below it is the point, and
   this only has to say where the drive goes. */
.drive-hero h1 {
    color: #fff;
    max-width: 12ch;
    font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem);
    line-height: 1.05;
    margin-bottom: .5rem;
}
.drive-hero .lead { color: #cdd8e8; max-width: 54ch; font-size: 1rem; }

.drive-hero__facts {
    display: flex;
    flex-wrap: wrap;
    margin-top: clamp(1rem, .75rem + 1vw, 1.5rem);
    border-top: 1px solid rgba(255, 255, 255, .16);
}
.drive-hero__facts > div {
    flex: 1 1 110px;
    padding: .7rem 1rem 0 0;
    margin-right: 1rem;
    border-right: 1px solid rgba(255, 255, 255, .16);
}
.drive-hero__facts > div:last-child { border-right: 0; margin-right: 0; }
.drive-hero__facts dt {
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8fa0b8;
    margin-bottom: .35rem;
}
.drive-hero__facts dd {
    font-size: clamp(1.25rem, 1rem + .8vw, 1.625rem);
    font-weight: 600;
    color: #fff;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.drive-hero__facts dd small { font-size: .5em; font-weight: 500; color: #8fa0b8; margin-left: .15em; }
.drive-hero__note { margin-top: .7rem; font-size: .75rem; color: #8fa0b8; max-width: 60ch; }

/* --------------------------------------------------------------------------
   3. The ladder — the whole route as a strip of tarmac you can jump from
   -------------------------------------------------------------------------- */
.ladder ol { list-style: none; position: relative; }
/* The lane the distances are painted in — a strip of road running down the
   side of the list, not a rule floating next to it. */
.ladder ol::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 58px;
    background: rgba(255, 255, 255, .06);
    border-inline: 1px solid rgba(255, 255, 255, .14);
}
.ladder__stop a {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    padding: .3rem .5rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    transition: background .15s;
}
.ladder__stop:last-child a { border-bottom: 0; }
.ladder__stop a:hover { background: rgba(255, 255, 255, .06); }
.ladder__stop a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

.ladder__km {
    justify-self: center;
    font-size: .8125rem;
    font-weight: 600;
    color: #ff8577;
    font-variant-numeric: tabular-nums;
}
.ladder__name { color: #fff; font-size: .875rem; }
/* Sites standing in that town, not photographs of them — a verified figure,
   so it is allowed to carry a little more weight than a caption. */
.ladder__n {
    font-size: .8125rem;
    font-weight: 600;
    color: #dbe3ef;
    font-variant-numeric: tabular-nums;
}
.ladder__stop--spur .ladder__name { color: #b8c5da; font-style: italic; }
.ladder__stop--spur .ladder__km   { color: #8fa0b8; }

/* Without this the right-hand column is a bare number, and a bare number
   next to a town name reads as "photographs" to anyone who does not ask. */
.ladder__key {
    margin-top: .5rem;
    text-align: right;
    font-size: .6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8fa0b8;
}

/* --------------------------------------------------------------------------
   4. The drive, and the pinned reading
   -------------------------------------------------------------------------- */
.drive {
    position: relative;
    padding-block: clamp(1.5rem, 1.25rem + 1.5vw, 2.5rem) clamp(2.5rem, 2rem + 3vw, 4.5rem);
}
/* The plate already separates the first stop from the masthead. */
.drive .stop:first-of-type { padding-top: clamp(1.5rem, 1.25rem + 1.5vw, 2.5rem); }

/* Where you are — and the control for going somewhere else.

   Not a menu: the plate carries the whole run as a track, with a tick at
   every stop and a knob that slides along it as you scroll. Reading it and
   steering with it are the same object, so nothing has to be opened. */
.plate {
    position: sticky;
    top: calc(var(--header-h) + var(--marquee-h) + var(--hdr-gap) + 12px);
    z-index: 30;
    display: flex;
    align-items: center;
    gap: clamp(.85rem, .5rem + 1.5vw, 1.75rem);
    width: min(760px, calc(100% - var(--gut) * 2));
    margin-inline: auto;
    padding: .55rem 1rem .55rem .9rem;
    background: var(--navy);
    color: #fff;
    box-shadow: var(--sh-lg);
}

.plate__read {
    display: flex;
    align-items: baseline;
    gap: .85rem;
    flex: none;
}
.plate__km {
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    /* the figure changes width as it counts; hold the column steady */
    min-width: 3.6ch;
    text-align: right;
}
.plate__km small { font-size: .55em; font-weight: 500; color: #8fa0b8; margin-left: .15em; }

.plate__place {
    display: inline-block;
    font-size: .9375rem;
    font-weight: 600;
    padding-left: .85rem;
    border-left: 1px solid rgba(255, 255, 255, .22);
    white-space: nowrap;
}
.plate__road {
    display: inline-block;
    font-size: .75rem;
    color: #8fa0b8;
    white-space: nowrap;
}

/* --- The reading turning over ---------------------------------------------
   When the stop changes, the name rolls out upward and the new one rolls in
   from below, the way a split-flap board turns. The script swaps the text at
   the midpoint, while nothing is visible. */
.plate__place.is-turn { animation: plateTurn .44s var(--ease-soft); }
.plate__road.is-turn  { animation: plateTurn .44s var(--ease-soft) .04s; }

@keyframes plateTurn {
    0%   { transform: translateY(0);    opacity: 1; }
    44%  { transform: translateY(-90%); opacity: 0; }
    45%  { transform: translateY(90%);  opacity: 0; }
    100% { transform: translateY(0);    opacity: 1; }
}

/* --- The track ------------------------------------------------------------ */
.plate__track {
    position: relative;
    flex: 1 1 auto;
    height: 30px;
    min-width: 120px;
}
.plate__rail,
.plate__fill {
    position: absolute;
    top: 50%;
    left: 0;
    height: 3px;
    margin-top: -1.5px;
    pointer-events: none;
}
.plate__rail { width: 100%; background: rgba(255, 255, 255, .2); }
.plate__fill {
    width: 0;
    background: var(--red-bright);
    transition: width .5s var(--ease-soft);
}

/* The knob rides the fill. It is the only thing on the page that moves
   without you touching it, so it is small and it never overshoots. */
.plate__knob {
    position: absolute;
    top: 50%;
    left: 0;
    width: 9px; height: 9px;
    margin: -4.5px 0 0 -4.5px;
    background: var(--red-bright);
    box-shadow: 0 0 0 2.5px rgba(255, 255, 255, .92), 0 2px 8px rgba(10, 16, 29, .6);
    pointer-events: none;
    transition: left .5s var(--ease-soft);
}

/* One tick per stop, on a hit area big enough to actually aim at. */
.plate__peg {
    position: absolute;
    top: 0;
    left: var(--p);
    width: 26px;
    height: 100%;
    margin-left: -13px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.plate__peg::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 11px;
    margin: -5.5px 0 0 -1px;
    background: rgba(255, 255, 255, .55);
    transition: height .2s var(--ease-back), margin-top .2s var(--ease-back), background .2s;
}
.plate__peg:hover::after,
.plate__peg:focus-visible::after {
    height: 17px;
    margin-top: -8.5px;
    background: #fff;
}
.plate__peg[aria-current="true"]::after { background: var(--red-bright); }
.plate__peg:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* A stop that hangs off the route is drawn hanging off the track. */
.plate__peg.is-spur::after {
    height: 8px;
    margin-top: 1px;
    background: rgba(255, 255, 255, .38);
}

/* The name only appears for the tick you are pointing at — nine labels laid
   out permanently would collide, and the current one is already set large in
   the plate beside the track. */
.plate__tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    display: block;
    padding: .35rem .6rem;
    background: #fff;
    color: var(--ink);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    box-shadow: 0 8px 22px rgba(10, 16, 29, .3);
    opacity: 0;
    transform: translate(-50%, 6px);
    transition: opacity .18s var(--ease-out), transform .22s var(--ease-back);
    pointer-events: none;
}
.plate__tip i {
    display: block;
    font-style: normal;
    font-weight: 500;
    font-size: .6875rem;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
}
.plate__peg:hover .plate__tip,
.plate__peg:focus-visible .plate__tip {
    opacity: 1;
    transform: translate(-50%, 0);
}
/* keep the first and last labels inside the plate */
.plate__peg:first-of-type  .plate__tip { left: 0;    transform: translate(0, 6px); }
.plate__peg:first-of-type:hover  .plate__tip,
.plate__peg:first-of-type:focus-visible  .plate__tip { transform: translate(0, 0); }
.plate__peg:last-of-type   .plate__tip { left: auto; right: 0; transform: translate(0, 6px); }
.plate__peg:last-of-type:hover   .plate__tip,
.plate__peg:last-of-type:focus-visible   .plate__tip { transform: translate(0, 0); }

@media (max-width: 760px) {
    .plate { gap: .7rem; padding-inline: .7rem .8rem; }
    .plate__road { display: none; }
    .plate__place { padding-left: .7rem; }

    /* A tick is a real control, and at 26x30 it was a poke rather than a tap.
       Nine of them share about 300px here, so a 34px hit area still leaves a
       gap between neighbours — the tick itself is unchanged. */
    .plate__track { height: 40px; }
    .plate__peg { width: 34px; margin-left: -17px; }
}
@media (max-width: 460px) {
    .plate__place { font-size: .875rem; }
    .plate__track { min-width: 96px; }
}

/* --------------------------------------------------------------------------
   5. A stop
   -------------------------------------------------------------------------- */
.stop { padding-block: clamp(2.5rem, 2rem + 4vw, 5.5rem); }
.stop + .stop { border-top: 1px solid var(--line); }

.stop__head {
    display: flex;
    align-items: flex-end;
    gap: clamp(1.25rem, 1rem + 2vw, 2.5rem);
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gut);
    margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
@media (max-width: 620px) {
    .stop__head { align-items: flex-start; gap: 1rem; }
    .stone { width: 96px; border-radius: 48px 48px 0 0; }
    .stone__cap { padding-top: 1rem; font-size: .75rem; }
    .stone__km b { font-size: 1.25rem; }
}

.stop__no {
    font-size: .6875rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: .4rem;
}
.stop h2 {
    font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
    line-height: 1;
    letter-spacing: -.025em;
    margin-bottom: .5rem;
}
.stop__where {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .7rem;
    font-size: .875rem;
    color: var(--body);
}
.stop__where > span + span::before {
    content: '';
    display: inline-block;
    width: 3px; height: 3px;
    background: var(--line-2);
    vertical-align: middle;
    margin-right: .55rem;
}
.stop__co {
    margin-top: .35rem;
    font-size: .8125rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.stop__co abbr {
    margin-left: .35rem;
    font-size: .625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--faint);
    text-decoration: none;
    border-bottom: 1px dotted var(--line-2);
    cursor: help;
}
.stop__count { margin-top: .6rem; font-size: .8125rem; color: var(--muted); }
.stop__count span { color: var(--faint); }

/* Landing on a stop you jumped to: the stone settles and gives one pulse, so
   after a 400 km scroll it is obvious which one you were sent to. */
.stop.is-target .stone { animation: stoneLand .75s var(--ease-back); }
@keyframes stoneLand {
    0%   { transform: translateY(-10px); box-shadow: 0 0 0 0 rgba(224, 30, 55, .5); }
    60%  { transform: none; }
    100% { transform: none; box-shadow: 0 0 0 16px rgba(224, 30, 55, 0); }
}

/* A branch off the run reads as one on the stone itself — a quieter cap and
   its own wording — rather than by a rule floating out in the page margin. */
.stop--spur .stone__cap { background: var(--ink-2); border-bottom-color: var(--line-2); }
.stop--spur .stone { border-style: dashed; }

/* --------------------------------------------------------------------------
   6. Arrival — the frame you pull up to. Edge to edge: these are six-metre
      hoardings, and a 300px thumbnail tells you nothing about that.
   -------------------------------------------------------------------------- */
.arrival { position: relative; margin: 0; }
.arrival__btn {
    display: block;
    position: relative;
    width: 100%;
    padding: clamp(1rem, .5rem + 2vw, 2.5rem) 0;
    border: 0;
    /* The frame's own blur seed, blown up to fill the band. The photograph
       then floats on a field of its own colour instead of on a slab of
       navy — and, more to the point, nothing has to be cropped to fill
       the width. */
    background: var(--seed) center / cover no-repeat;
    cursor: zoom-in;
    line-height: 0;
    overflow: hidden;
}
.arrival__btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(16, 26, 45, .68);
    -webkit-backdrop-filter: blur(22px);
            backdrop-filter: blur(22px);
}
/* Uncropped, and never taller than the window: a hoarding sits in the top
   third of most of these frames, so a wide crop would cut off the one thing
   the photograph is of. */
.arrival__btn img {
    position: relative;
    display: block;
    width: auto;
    height: auto;
    max-width: min(100%, 1240px);
    max-height: 76vh;
    margin-inline: auto;
    transition: transform 1.2s var(--ease-soft);
}
.arrival__btn:hover img { transform: scale(1.015); }
.arrival__btn:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
@media (max-width: 700px) { .arrival__btn img { max-height: 62vh; } }

/* Anchored to the band, not to the photograph: the frame inside it is a
   different width every time, so there is no edge to pin to. */
.arrival__n {
    position: absolute;
    left: 0;
    top: 0;
    padding: .45rem .7rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1;
    color: #fff;
    background: var(--red);
    font-variant-numeric: tabular-nums;
}
.arrival figcaption {
    max-width: var(--wrap);
    margin-inline: auto;
    padding: .6rem var(--gut) 0;
    font-size: .75rem;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   7. Going past — the rest of the town, in a strip that runs off the edge of
      the page the way the road does.
   -------------------------------------------------------------------------- */
.passing {
    max-width: var(--wrap);
    margin: clamp(1.5rem, 1rem + 2vw, 2.5rem) auto 0;
    padding-left: var(--gut);
}
.passing__label {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding-right: var(--gut);
    margin-bottom: .75rem;
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--faint);
}
.passing__hint { margin-left: auto; letter-spacing: .08em; }

.passing__strip {
    display: flex;
    gap: 12px;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    padding-bottom: .75rem;
    /* fades out into the right-hand margin instead of stopping dead */
    -webkit-mask-image: linear-gradient(90deg, #000 96%, transparent);
            mask-image: linear-gradient(90deg, #000 96%, transparent);
}
.passing__strip:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

.pass {
    flex: none;
    width: clamp(220px, 26vw, 320px);
    scroll-snap-align: start;
}
.pass__btn {
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    border: 0;
    background: var(--seed) center / cover no-repeat;
    cursor: zoom-in;
    line-height: 0;
    overflow: hidden;
}
.pass__btn img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    filter: saturate(.85);
    transition: transform .5s var(--ease-soft), filter .3s var(--ease-out);
}
.pass__btn::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgba(20, 23, 29, .14);
    transition: box-shadow .2s var(--ease-out);
}
.pass__btn:hover img { transform: scale(1.04); filter: none; }
.pass__btn:hover::after,
.pass__btn:focus-visible::after { box-shadow: inset 0 0 0 2px var(--red-bright); }
.pass__btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.pass__n {
    position: absolute;
    left: 0; bottom: 0;
    padding: .3rem .5rem;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: rgba(22, 35, 60, .82);
    font-variant-numeric: tabular-nums;
}
.pass__cap {
    display: block;
    margin-top: .45rem;
    font-size: .75rem;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
}

/* Stops arrive as you reach them.

   Gated on .is-live, which the script only sets once it has an observer
   actually watching. Hiding content by default and waiting for JavaScript to
   reveal it means any error anywhere leaves a blank page — so the content is
   visible unless something is definitely there to bring it back. */
.drive.is-live .stop__head,
.drive.is-live .arrival,
.drive.is-live .passing { opacity: 0; transform: translateY(20px); }
.drive.is-live .stop.is-seen .stop__head,
.drive.is-live .stop.is-seen .arrival,
.drive.is-live .stop.is-seen .passing {
    opacity: 1;
    transform: none;
    transition: opacity .6s var(--ease-soft), transform .6s var(--ease-soft);
}
.drive.is-live .stop.is-seen .arrival { transition-delay: .1s; }
.drive.is-live .stop.is-seen .passing { transition-delay: .18s; }

/* --------------------------------------------------------------------------
   8. End of the run
   -------------------------------------------------------------------------- */
.drive__end {
    display: flex;
    align-items: flex-end;
    gap: clamp(1.25rem, 1rem + 2vw, 2.5rem);
    max-width: var(--wrap);
    margin: clamp(2rem, 1.5rem + 2vw, 3.5rem) auto 0;
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) var(--gut) 0;
    border-top: 1px solid var(--line);
}
.drive__end p {
    font-size: .8125rem;
    line-height: 1.65;
    color: var(--muted);
    max-width: 66ch;
}
.drive__end b { color: var(--ink-2); }
.stone--end .stone__cap { background: var(--red); border-bottom-color: var(--red-deep); }
@media (max-width: 620px) { .drive__end { flex-direction: column; align-items: flex-start; } }

/* --------------------------------------------------------------------------
   9. Viewer
   -------------------------------------------------------------------------- */
.lbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    grid-template-rows: 1fr auto;
}
.lbox[hidden] { display: none; }
.lbox__scrim {
    position: absolute;
    inset: 0;
    background: rgba(10, 16, 29, .97);
    cursor: zoom-out;
}
.lbox__stage {
    position: relative;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 3.5rem) clamp(1rem, 8vw, 6rem) 0;
    min-height: 0;
}
.lbox__img {
    max-width: 100%;
    max-height: calc(100vh - 9rem);
    width: auto; height: auto;
    object-fit: contain;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
    opacity: 0;
    transition: opacity .3s var(--ease-out);
}
.lbox__img.is-ready { opacity: 1; }

.lbox__bar {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem clamp(1rem, 4vw, 2rem) 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin-top: 1rem;
}
.lbox__meta strong { display: block; color: #fff; font-size: 1rem; }
.lbox__meta span {
    display: block;
    color: #8fa0b8;
    font-size: .8125rem;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
}
.lbox__count {
    color: #b8c5da;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    flex: none;
}

.lbox__nav, .lbox__x {
    position: absolute;
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(22, 35, 60, .6);
    color: #fff;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.lbox__nav:hover, .lbox__x:hover { background: var(--red); border-color: var(--red); }
.lbox__nav:focus-visible, .lbox__x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lbox__nav svg, .lbox__x svg { width: 22px; height: 22px; }
.lbox__nav--prev { left: clamp(.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.lbox__nav--next { right: clamp(.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.lbox__x { top: clamp(.5rem, 2vw, 1.5rem); right: clamp(.5rem, 2vw, 1.5rem); }

@media (max-width: 620px) {
    .lbox__nav { top: auto; bottom: 5.5rem; transform: none; }
    .lbox__img { max-height: calc(100vh - 12rem); }
}

body.lbox-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .drive.is-live .stop__head, .drive.is-live .arrival, .drive.is-live .passing { opacity: 1; transform: none; }
    .arrival__btn img, .pass__btn img, .lbox__img { transition: none; }
    .arrival__btn:hover img, .pass__btn:hover img { transform: none; }
    .plate__place, .plate__road, .stop.is-target .stone { animation: none; }
    .plate__fill, .plate__knob, .plate__peg::after, .plate__tip { transition: none; }
}


/* ==========================================================================
   Vision & Mission  (/about/vision-mission)
   --------------------------------------------------------------------------
   Three blocks, each on its own ground: the statement on paper, the mission
   on tint, the values on paper again. The navy masthead is the only dark
   band on the page — a second one directly under it read as one dark block
   split by a stray red line rather than as two sections.
   ========================================================================== */

/* --- The vision statement -------------------------------------------------
   One sentence, set large. The measure is the point: at this size a 60ch
   column ran to eight short lines down the left of the page and left the
   right half empty, so it is capped by character count instead.
   -------------------------------------------------------------------------- */
.vm-vision { padding-block: clamp(2.75rem, 2rem + 4vw, 5rem); }
.vm-vision .eyebrow { margin-bottom: 1.1rem; }
/* This is a 300-character sentence — a paragraph, not a headline — so it sits
   on the site's h3 step rather than its h2 one. At display size it was a wall
   of type filling the screen; at this size it reads as the most prominent
   body copy on the page, which is what it is. A red keyline carries the
   emphasis instead of the point size, matching the mission cards below.

   The selector carries .reads-justified so it outranks the site-wide justify
   rule (two classes plus an element). Justified, a sentence set this large
   opens visible gaps between its words. */
.reads-justified .wrap > .vm-vision__say,
.vm-vision__say {
    max-width: 68ch;
    padding-left: clamp(1rem, .5rem + 1.4vw, 1.75rem);
    border-left: 3px solid var(--red-bright);
    font-size: clamp(1.0625rem, 1rem + .45vw, 1.3125rem);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -.008em;
    color: var(--ink-2);
    text-align: left;
    text-align-last: left;
    text-wrap: pretty;
    hyphens: manual;
    -webkit-hyphens: manual;
}

/* --- Mission --------------------------------------------------------------
   Numbered, because these are commitments in order, not bullets.
   -------------------------------------------------------------------------- */
.vm-mission {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}
.vm-mission__item {
    padding: 1.5rem 1.4rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 3px solid var(--red-bright);
}
.vm-mission__item h3 { font-size: 1.0625rem; line-height: 1.3; }
.vm-mission__item p { margin-top: .45rem; color: var(--muted); font-size: .9375rem; }

/* --- Values ---------------------------------------------------------------
   A ruled definition list. Five cards in a three-column grid strand the fifth
   beside an empty half-row; a list is even at any count, and a term with its
   meaning is what a definition list is for.
   -------------------------------------------------------------------------- */
.vm-values { border-top: 1px solid var(--line); }
.vm-value {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    align-items: baseline;
    gap: .35rem 1.5rem;
    padding: 1.35rem 0;
    border-bottom: 1px solid var(--line);
}
.vm-value dt {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
}
.vm-value dd {
    margin: 0;
    color: var(--muted);
    font-size: .9375rem;
    line-height: 1.6;
}
.vm-values__foot { margin-top: 1.75rem; }

@media (max-width: 780px) {
    /* The term needs the full width before its definition: a 15rem column
       breaks "Empowerment through partnership" across three lines. */
    .vm-value {
        grid-template-columns: minmax(0, 1fr);
        gap: .3rem 1rem;
    }
}


/* ==========================================================================
   Brand Presence teaser — "the windscreen"
   --------------------------------------------------------------------------
   A band on the home page, not a section: one frame per town, panning
   sideways as the page scrolls past. The point is that it moves the way the
   subject moves — these are roadside hoardings, and this is what passing them
   looks like. It keeps a slow drift when the page is still so it reads as a
   road rather than a stalled slideshow.
   ========================================================================== */
.road-band {
    position: relative;
    display: block;
    overflow: hidden;
    height: clamp(170px, 12rem + 4vw, 230px);
    background: var(--navy);
    text-decoration: none;
    isolation: isolate;
}

/* --- the frames --- */
.road-band__strip {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    will-change: transform;
}
.road-band__frame {
    position: relative;
    display: block;
    flex: none;
    /* Fills the band's height rather than sitting inside it: a 4:3 frame in a
       230px band left a strip of navy above and below, which read as an
       unfinished edge instead of a continuous roadside. */
    width: clamp(190px, 20vw, 300px);
    height: 100%;
    overflow: hidden;
    background: var(--seed) center / cover no-repeat;
}
.road-band__frame img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    /* held back so the type over them keeps its contrast; the one you point
       at comes up to full colour */
    filter: saturate(.55) brightness(.72);
    transition: filter .35s var(--ease-out), transform .6s var(--ease-soft);
}
.road-band__frame b {
    position: absolute;
    left: 0; bottom: 0;
    padding: .25rem .5rem;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(10, 16, 29, .72);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .25s, transform .25s var(--ease-out);
}
.road-band:hover .road-band__frame img { filter: saturate(.8) brightness(.85); }
.road-band:hover .road-band__frame b { opacity: 1; transform: none; }

/* --- the type, on a scrim heavy enough to hold 4.5:1 over any frame --- */
.road-band__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, var(--navy) 0%, rgba(22, 35, 60, .96) 34%, rgba(22, 35, 60, .35) 62%, rgba(22, 35, 60, .55) 100%);
}
.road-band__say {
    position: relative;
    display: block;
    max-width: var(--wrap);
    margin-inline: auto;
    padding: 0 var(--gut);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .2rem;
}
.road-band__kicker {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #ff8577;
}
.road-band__say strong {
    font-size: clamp(1.25rem, 1rem + 1.1vw, 1.875rem);
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #fff;
}
.road-band__facts {
    font-size: .8125rem;
    color: #b8c5da;
    font-variant-numeric: tabular-nums;
}
.road-band__go {
    margin-top: .45rem;
    font-size: .875rem;
    font-weight: 600;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    width: max-content;
    border-bottom: 2px solid var(--red-bright);
    padding-bottom: 2px;
}
.road-band__go::after {
    content: '\2192';
    transition: transform .2s var(--ease-out);
}
.road-band:hover .road-band__go::after { transform: translateX(4px); }
.road-band:focus-visible { outline: 3px solid var(--red-bright); outline-offset: -3px; }

/* --- the lane along the foot, with a tick per town --- */
.road-band__lane {
    position: absolute;
    inset: auto 0 0 0;
    height: 14px;
    background:
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, .5) 0 14px, transparent 14px 30px) center / 100% 2px no-repeat,
        rgba(10, 16, 29, .55);
    border-top: 1px solid rgba(255, 255, 255, .14);
}
.road-band__lane i {
    position: absolute;
    top: 50%;
    left: var(--p);
    width: 2px; height: 8px;
    margin: -4px 0 0 -1px;
    background: var(--red-bright);
}

@media (max-width: 620px) {
    .road-band__scrim {
        background: linear-gradient(90deg, var(--navy) 0%, rgba(22, 35, 60, .92) 62%, rgba(22, 35, 60, .6) 100%);
    }
    .road-band__facts { font-size: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .road-band__strip { transform: none !important; }
    .road-band__frame img, .road-band__frame b, .road-band__go::after { transition: none; }
}

/* --------------------------------------------------------------------------
   Product monograph — justified body copy
   --------------------------------------------------------------------------
   Client review, 2026-09-04: the prescribing lines were to read as an even
   block rather than with a ragged right edge, on every brand.

   Scoped to the monograph, not to every .spec on the site: the contact and
   quality pages use the same component for short values, where justification
   buys nothing.

   Justification without hyphenation opens rivers of white space in a column
   this narrow, so hyphens are on, and the last line of each paragraph is left
   alone — stretching a three-word closing line is the thing that makes
   justified text look broken.
   -------------------------------------------------------------------------- */
.spec--monograph .spec__v,
.lead--block {
    text-align: justify;
    text-align-last: left;
    hyphens: auto;
    -webkit-hyphens: auto;
    /* Keep the breaks readable: only words of six letters or more, and never
       leaving fewer than three letters on either side. Without this the
       browser produces "in-sert" and "in-tramuscular", which is worse to read
       than the ragged edge the justification was meant to tidy. */
    hyphenate-limit-chars: 7 4 3;
    -webkit-hyphenate-limit-before: 4;
    -webkit-hyphenate-limit-after: 3;
}

/* A value that is one short line — "Oncology", "300 mg / Vial" — gains
   nothing from justification and can only be hurt by it. */
.spec--monograph .spec__v .small,
.spec--monograph .spec__v ul { text-align: justify; text-align-last: left; }

@media (max-width: 620px) {
    /* Too few words per line to justify without visible gaps. */
    .spec--monograph .spec__v,
    .lead--block { text-align: left; hyphens: manual; }
}

/* --------------------------------------------------------------------------
   Filter strip directly under a masthead
   --------------------------------------------------------------------------
   Client review, 2026-09-04: too much empty space between the masthead and
   the filters on /products.

   A full section's top padding is sized for prose that opens with a heading.
   Where a page opens with a control strip instead, that padding reads as dead
   space rather than as breathing room, so it is roughly halved here. The
   bottom padding is untouched — the gap below the results still needs it.
   -------------------------------------------------------------------------- */
.section--filters { padding-top: clamp(2rem, 1.5rem + 2vw, 3.25rem); }

/* --------------------------------------------------------------------------
   Justified body copy, site-wide
   --------------------------------------------------------------------------
   Client review, 2026-09-04: running text should read as an even block rather
   than with a ragged right edge, on every page.

   Set from one class on <main>, so a page added later inherits it. What it
   reaches is deliberately narrow: paragraphs and list items that are actually
   running prose. Short copy is excluded below, because justifying two lines
   opens gaps between words instead of tidying an edge — and a one-line card
   stretched across its own width simply looks broken.

   Hyphenation is on, or a column this narrow fills with rivers of white
   space, but limited to longer words with no one- or two-letter stubs: the
   browser's default happily produces "in-sert", which is worse to read than
   the ragged edge this replaces.
   -------------------------------------------------------------------------- */
.reads-justified .prose > p,
.reads-justified .prose > ul > li,
.reads-justified .prose > ol > li,
.reads-justified .stack > p,
.reads-justified .wrap > p,
.reads-justified .wrap--narrow > p,
.reads-justified .lead,
.reads-justified .spec__v,
.reads-justified .split > div > p,
.reads-justified .faq__list details > p,
.reads-justified .steps__item > p,
.reads-justified .step > p,
.reads-justified .proc__steps p,
.reads-justified .engage-model > p {
    text-align: justify;
    text-align-last: left;
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 7 4 3;
    -webkit-hyphenate-limit-before: 4;
    -webkit-hyphenate-limit-after: 3;
}

/* Copy too short to justify, or already given its own measure. A section's
   standfirst, card text, tiles, captions, table cells and small print all
   read better ragged. */
.reads-justified .section__head p,
.reads-justified .section__head .lead,
.reads-justified .card p,
.reads-justified .card .lead,
.reads-justified .cap__cell p,
.reads-justified .prod__comp,
.reads-justified .vm-mission__item p,
.reads-justified .wrap > .vm-vision__say,
.reads-justified .stop__count,
.reads-justified .road__end,
.reads-justified figcaption,
.reads-justified .imgnote,
.reads-justified .small,
.reads-justified .faint,
.reads-justified td,
.reads-justified .ticks li,
.reads-justified .spec__k,
.reads-justified .slide__lede,
.reads-justified .partner-teaser p,
.reads-justified .imgband__card p,
.reads-justified .formbox p,
.reads-justified .formbox__head p,
.reads-justified .alert p,
.reads-justified .formbox p,
.reads-justified .field p {
    text-align: left;
    text-align-last: auto;
    hyphens: manual;
    -webkit-hyphens: manual;
}

@media (max-width: 620px) {
    /* Too few words per line to justify without visible rivers. */
    .reads-justified .prose > p,
    .reads-justified .prose > ul > li,
    .reads-justified .prose > ol > li,
    .reads-justified .stack > p,
    .reads-justified .wrap > p,
    .reads-justified .wrap--narrow > p,
    .reads-justified .lead,
    .reads-justified .spec__v,
    .reads-justified .split > div > p,
    .reads-justified .faq__list details > p,
    .reads-justified .steps__item > p,
    .reads-justified .step > p,
    .reads-justified .proc__steps p,
    .reads-justified .engage-model > p {
        text-align: left;
        hyphens: manual;
    }
}
}

/* ==========================================================================
   About Us — the visual revamp
   --------------------------------------------------------------------------
   The page used to open with four paragraphs of welcome copy and close with a
   fourth list of the eight divisions. Both are gone. What is left is carried
   by photographs and by four short marks, so these rules are mostly about
   giving pictures room and keeping the type that survives short and large.
   ========================================================================== */

/* --- The claim, once ---------------------------------------------------- */
.ab-say { padding-bottom: clamp(28px, 4vw, 48px); }
.ab-say__line {
    margin-top: .75rem;
    font-size: clamp(1.9rem, 1.1rem + 3.2vw, 3.4rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.028em;
    color: var(--ink);
    max-width: 18ch;
}
.ab-say__sub {
    margin-top: 1.1rem;
    max-width: 46ch;
    color: var(--muted);
    font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
}

/* --- Core segments: two pictures ---------------------------------------- */
.ab-biz { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 761px) { .ab-biz { grid-template-columns: 1fr 1fr; } }

.ab-biz__c {
    display: grid;
    gap: .45rem;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--line);
    background: var(--paper);
    padding: 0 0 1.35rem;
    overflow: hidden;
    transition: border-color .18s, box-shadow .18s, transform .18s var(--ease-soft);
}
.ab-biz__c:hover { border-color: var(--line-2); box-shadow: var(--sh-md); transform: translateY(-3px); }

/* The picture is the card's headline, so it gets a fixed, generous ratio
   rather than whatever the source file happens to be. */
.ab-biz__pic { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); }
.ab-biz__pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease-soft); }
.ab-biz__c:hover .ab-biz__pic img { transform: scale(1.04); }

.ab-biz__n {
    margin: 1.15rem 1.35rem 0;
    font-size: .75rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--red);
}
.ab-biz__t { margin: 0 1.35rem; font-size: 1.25rem; letter-spacing: -.02em; color: var(--ink); }
.ab-biz__d { margin: 0 1.35rem; color: var(--muted); font-size: .9375rem; }
.ab-biz__a {
    margin: .55rem 1.35rem 0;
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .875rem; font-weight: 600; color: var(--red);
}
.ab-biz__c:hover .ab-biz__a { gap: .65rem; }
.ab-biz__a { transition: gap .18s var(--ease-soft); }

/* --- What we hold ourselves to: four marks ------------------------------ */
.ab-holds { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); }
@media (min-width: 621px) { .ab-holds { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1025px) { .ab-holds { grid-template-columns: repeat(4, 1fr); } }

.ab-holds__i {
    background: var(--paper);
    padding: 1.6rem 1.4rem 1.7rem;
    display: grid;
    gap: .4rem;
    align-content: start;
}
.ab-holds__ico { color: var(--red); line-height: 0; margin-bottom: .35rem; }
.ab-holds__i strong { font-size: 1.0625rem; letter-spacing: -.015em; color: var(--ink); }
.ab-holds__i span:last-child { color: var(--muted); font-size: .9375rem; line-height: 1.5; }

/* --- Legal identity: facts beside a photograph -------------------------- */
.ab-id { display: grid; gap: 26px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 881px) { .ab-id { grid-template-columns: 1.15fr .85fr; gap: 34px; } }
.ab-id__pic { min-width: 0; }
.ab-id__card { min-width: 0; }

/* ==========================================================================
   Vision & Mission — the visual revamp
   --------------------------------------------------------------------------
   Three stacked text blocks became a spread, three scenes and five marks.
   The vision sentence is long and cannot be shortened (it is the company's
   own wording), so it is given a column of its own and a photograph beside
   it rather than a full-width line of small type.
   ========================================================================== */

/* --- The vision spread --------------------------------------------------- */
.vm-say__in { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 881px) { .vm-say__in { grid-template-columns: 1.25fr .75fr; gap: 44px; } }

.vm-say__line {
    margin-top: .85rem;
    font-size: clamp(1.25rem, .95rem + 1.15vw, 1.9rem);
    font-weight: 600;
    line-height: 1.32;
    letter-spacing: -.018em;
    color: var(--ink);
    text-wrap: pretty;
}
.vm-say__pic { min-width: 0; }
.vm-say__pic img {
    width: 100%; height: 100%; display: block;
    aspect-ratio: 4 / 5; object-fit: cover;
    border: 1px solid var(--line);
}

/* --- Mission: three scenes ---------------------------------------------- */
.vm-acts { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 761px)  { .vm-acts { grid-template-columns: repeat(3, 1fr); } }

.vm-acts__i { display: grid; gap: .5rem; align-content: start; }
.vm-acts__pic { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); }
.vm-acts__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The number rides the photograph rather than sitting above the heading, so
   the sequence is legible while the eye is still on the picture. */
.vm-acts__n {
    position: absolute; left: 0; bottom: 0;
    background: var(--red); color: #fff;
    font-size: .8125rem; font-weight: 800; letter-spacing: .08em;
    padding: .4rem .7rem;
}
.vm-acts__i h3 { margin-top: .35rem; font-size: 1.0625rem; letter-spacing: -.015em; }
.vm-acts__i p { color: var(--muted); font-size: .9375rem; line-height: 1.55; }

/* --- Values: five marks -------------------------------------------------- */
.vm-marks { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); }
@media (min-width: 621px)  { .vm-marks { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .vm-marks { grid-template-columns: repeat(5, 1fr); } }

.vm-marks__i { background: var(--paper); padding: 1.5rem 1.3rem 1.6rem; display: grid; gap: .4rem; align-content: start; }
.vm-marks__ico { color: var(--red); line-height: 0; margin-bottom: .3rem; }
.vm-marks__i strong { font-size: 1rem; letter-spacing: -.015em; color: var(--ink); line-height: 1.3; }
.vm-marks__i span:last-child { color: var(--muted); font-size: .9063rem; line-height: 1.5; }
.vm-marks__foot { margin-top: 1.9rem; }

/* ==========================================================================
   Science & Quality — the rebuild
   --------------------------------------------------------------------------
   The page was two icon grids and five prose blocks. It is now a photographic
   rail (the pipeline), one real chart (the stability schedule), three dials
   (the pharmacovigilance promises) and a bench list. The two figures are the
   point of the page: a schedule and three deadlines are data, and drawing
   them is what makes them checkable at a glance.
   ========================================================================== */

/* --- The pipeline rail --------------------------------------------------- */
.sq-rail { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 561px)  { .sq-rail { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 981px)  { .sq-rail { grid-template-columns: repeat(5, 1fr); gap: 12px; } }

.sq-rail__in { display: grid; gap: .4rem; text-decoration: none; color: inherit; }
.sq-rail__pic { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper-2); }
.sq-rail__pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s var(--ease-soft); }
a.sq-rail__in:hover .sq-rail__pic img { transform: scale(1.05); }

.sq-rail__n {
    position: absolute; top: 0; left: 0;
    background: var(--red); color: #fff;
    font-size: .75rem; font-weight: 800; letter-spacing: .08em;
    padding: .35rem .6rem;
}
.sq-rail__t { margin-top: .5rem; font-size: 1.0625rem; letter-spacing: -.015em; color: var(--ink); }
.sq-rail__d { color: var(--muted); font-size: .875rem; line-height: 1.5; }
a.sq-rail__in:hover .sq-rail__t { color: var(--red); }

/* --- Stability: the schedule on an axis ---------------------------------- */
.sq-stab { display: grid; gap: 30px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 921px) { .sq-stab { grid-template-columns: .85fr 1.15fr; gap: 48px; } }
.sq-stab__note { margin-top: 2rem; max-width: 70ch; color: var(--muted); font-size: .9375rem; }

.sq-chart { margin: 0; min-width: 0; }
.sq-chart__cap {
    font-size: .75rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 2.4rem;
}

/* The plot is a single axis with the read-points placed along it by
   percentage of the last month, so 3/6/12/24 sits where it actually falls
   rather than at four evenly spaced ticks. */
.sq-chart__plot { position: relative; height: 92px; }
.sq-chart__axis {
    position: absolute; left: 0; right: 0; top: 50%;
    height: 2px; background: var(--line-2);
}
.sq-chart__pt {
    position: absolute; top: 50%; left: var(--at);
    transform: translate(-50%, -50%);
    display: grid; justify-items: center; gap: 0;
}
.sq-chart__pt i {
    width: 15px; height: 15px; border-radius: 50%;
    background: var(--red); border: 3px solid var(--paper);
    box-shadow: 0 0 0 2px var(--red);
}
.sq-chart__pt b {
    font-size: 1.3rem; font-weight: 800; color: var(--ink);
    line-height: 1; margin-bottom: .55rem;
}
.sq-chart__pt span {
    font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase;
    color: var(--muted); margin-top: .5rem;
}
/* The first and last points would otherwise hang off the ends of the axis. */
.sq-chart__pt:first-of-type { transform: translate(-25%, -50%); }
.sq-chart__pt:last-of-type  { transform: translate(-75%, -50%); }

/* --- Pharmacovigilance dials --------------------------------------------- */
.sq-clocks { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 621px) { .sq-clocks { grid-template-columns: repeat(3, 1fr); } }

.sq-clocks__i { display: grid; justify-items: center; text-align: center; gap: .35rem; }
.sq-clocks__dial { position: relative; display: block; width: 132px; height: 132px; margin-bottom: .7rem; }
.sq-clocks__dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sq-clocks__track { fill: none; stroke: var(--line); stroke-width: 9; }
.sq-clocks__arc {
    fill: none; stroke: var(--red); stroke-width: 9; stroke-linecap: round;
    /* r=52 -> circumference 326.7 */
    stroke-dasharray: 326.7;
    stroke-dashoffset: calc(326.7 - (326.7 * var(--pct) / 100));
}
.sq-clocks__dial b {
    position: absolute; inset: 0;
    display: grid; place-content: center;
    font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink);
}
.sq-clocks__dial b small { font-size: 1rem; font-weight: 700; color: var(--muted); }
.sq-clocks__i strong { font-size: 1rem; letter-spacing: -.015em; color: var(--ink); }
.sq-clocks__i span:last-child { color: var(--muted); font-size: .9063rem; }
.sq-clocks__foot { margin-top: 2.4rem; display: flex; justify-content: center; }

@media (prefers-reduced-motion: no-preference) {
    .js .sq-clocks__arc { transition: stroke-dashoffset 1.1s var(--ease-soft); }
    .js .reveal:not(.is-in) .sq-clocks__arc { stroke-dashoffset: 326.7; }
}

/* --- Standards and the QC bench ------------------------------------------ */
.sq-std { display: grid; gap: 30px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 921px) { .sq-std { grid-template-columns: 1fr 1fr; gap: 44px; } }

.sq-std__marks { list-style: none; margin: 1.3rem 0 .7rem; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sq-std__marks li {
    border: 1px solid var(--line-2); background: var(--paper);
    padding: .55rem 1.1rem;
    font-size: 1rem; font-weight: 700; letter-spacing: .02em; color: var(--ink);
}
.sq-std__attrib { margin-top: 1.5rem; color: var(--muted); font-size: .9375rem; line-height: 1.6; max-width: 56ch; }

.sq-kit { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.sq-kit li {
    background: var(--paper); padding: .7rem .9rem;
    display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start;
    font-size: .9063rem; color: var(--ink);
}
.sq-kit li .ico { color: var(--red); margin-top: .15rem; }

/* --- The four desks ------------------------------------------------------ */
.sq-desks { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 561px)  { .sq-desks { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .sq-desks { grid-template-columns: repeat(4, 1fr); } }

.sq-desks__c {
    display: grid; gap: .35rem; text-decoration: none; color: inherit;
    border: 1px solid var(--line); background: var(--paper);
    padding: 0 0 1.2rem; overflow: hidden;
    transition: border-color .18s, box-shadow .18s, transform .18s var(--ease-soft);
}
.sq-desks__c:hover { border-color: var(--line-2); box-shadow: var(--sh-md); transform: translateY(-3px); }
/* The icon badge hangs below the photograph, so the clipping lives on an
   inner wrapper — putting overflow:hidden on the positioning context itself
   cut the badge in half. */
.sq-desks__pic { position: relative; display: block; }
.sq-desks__pic picture { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); }
.sq-desks__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sq-desks__ico {
    position: absolute; left: .9rem; bottom: -22px; z-index: 1;
    width: 44px; height: 44px; display: grid; place-content: center;
    background: var(--paper); border: 1px solid var(--line); color: var(--red);
}
.sq-desks__c strong { margin: 2rem 1.1rem 0; font-size: 1.0625rem; letter-spacing: -.015em; }
.sq-desks__d { margin: 0 1.1rem; color: var(--muted); font-size: .9063rem; line-height: 1.5; }
.sq-desks__a {
    margin: .5rem 1.1rem 0; display: inline-flex; align-items: center; gap: .35rem;
    font-size: .8438rem; font-weight: 600; color: var(--red);
    transition: gap .18s var(--ease-soft);
}
.sq-desks__c:hover .sq-desks__a { gap: .6rem; }

/* A priority state can be too small to find on a national map — Delhi renders
   about two pixels wide here — so the key names them in words as well. */
.mapkey__names { margin-top: .5rem; font-size: .875rem; color: var(--ink); }

/* ==========================================================================
   Presence infographic — "Our presence across India"
   --------------------------------------------------------------------------
   Design language from the reference board: a light, airy stage, every
   called-out state in its own bright colour, and the eight therapeutic
   segments as coloured tiles. The first build of this used a deep navy
   ground; it read as heavy rather than joyful, so the stage is now a soft
   sky wash and the colour comes from the map and the tiles instead.
   ========================================================================== */
.pmap {
    background: linear-gradient(180deg, #eef6ff 0%, #f8fbff 55%, #ffffff 100%);
    padding-block: clamp(44px, 6vw, 82px);
}

.pmap__head { text-align: center; margin-bottom: clamp(26px, 4vw, 44px); }
.pmap__head h2 {
    font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.9rem);
    letter-spacing: -.025em;
    color: var(--ink);
}
.pmap__ribbon {
    display: inline-block;
    margin-top: .9rem;
    background: var(--red);
    color: #fff;
    padding: .5rem 1.4rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.pmap__body { display: grid; gap: 34px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1025px) { .pmap__body { grid-template-columns: 1.02fr .98fr; gap: 42px; } }

/* --- Map ----------------------------------------------------------------- */
.pmap__frame {
    background: #fff;
    border: 1px solid #dce7f5;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(20, 60, 120, .07);
}
.pmap__svg { position: relative; }
.pmap__svg .in-map { width: 100%; height: auto; display: block; }

/* Unhighlighted states stay a quiet grey so the eight called-out ones carry
   all the colour. Per-state fills are emitted by the partial, by id. */
.pmap__svg .in-map__state { fill: #e3e8ef; stroke: #fff; stroke-width: 1.1; }

.pmap__pin {
    position: absolute; left: var(--x); top: var(--y);
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.pmap__pin i {
    display: block;
    width: 12px; height: 12px; border-radius: 50%;
    background: #fff; border: 3px solid var(--hue);
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
/* The label is thrown to one side of its dot — four stacked labels collided
   into an unreadable pile in the north. */
.pmap__pin b {
    position: absolute; top: 50%; transform: translateY(-50%);
    white-space: nowrap;
    font-size: .625rem; font-weight: 800; letter-spacing: .06em;
    background: var(--hue); color: #fff;
    padding: 2px 6px; border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.pmap__pin--left b  { right: calc(100% + 7px); }
.pmap__pin--right b { left: calc(100% + 7px); }

/* --- Colour key ---------------------------------------------------------- */
.pmap__key {
    list-style: none; margin: 16px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 7px 10px;
}
.pmap__key li {
    display: inline-flex; align-items: center; gap: .45rem;
    background: #fff; border: 1px solid #dce7f5; border-radius: 999px;
    padding: .34rem .8rem;
    font-size: .8125rem; color: var(--ink);
}
.pmap__key li i { width: 10px; height: 10px; border-radius: 50%; background: var(--hue); }

/* --- Segments ------------------------------------------------------------ */
.pmap__sub {
    background: var(--red); color: #fff;
    font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    padding: .6rem 1rem; margin: 0 0 14px; border-radius: 8px;
}
.pmap__segs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (min-width: 761px)  { .pmap__segs { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1025px) { .pmap__segs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1301px) { .pmap__segs { grid-template-columns: repeat(4, 1fr); } }

.pmap__seg a {
    display: grid; gap: .3rem; justify-items: center; text-align: center;
    height: 100%;
    background: #fff;
    border: 1px solid #e4ebf4;
    border-top: 3px solid var(--hue);
    border-radius: 12px;
    padding: 1.15rem .8rem 1.25rem;
    text-decoration: none;
    transition: box-shadow .18s, transform .18s var(--ease-soft);
}
.pmap__seg a:hover { box-shadow: 0 10px 24px rgba(20,60,120,.12); transform: translateY(-3px); }
.pmap__segico {
    width: 50px; height: 50px; border-radius: 50%;
    display: grid; place-content: center;
    background: var(--hue); color: #fff;
    margin-bottom: .4rem;
}
.pmap__seg strong { font-size: .875rem; color: var(--ink); letter-spacing: -.01em; line-height: 1.25; }
/* Scoped to its own class, not `.pmap__seg span`: that selector also matched
   the icon badge (which is a span too) and, being one step more specific than
   .pmap__segico, repainted the white icons muted grey. */
.pmap__segsay { font-size: .75rem; color: var(--muted); line-height: 1.4; }

/* --- Product range strip -------------------------------------------------- */
.pmap__range {
    margin-top: clamp(28px, 4vw, 44px);
    display: grid; gap: 0; grid-template-columns: 1fr;
    border: 1px solid #dce7f5; border-radius: 12px; overflow: hidden;
    background: #fff;
}
@media (min-width: 761px) { .pmap__range { grid-template-columns: auto 1fr; align-items: stretch; } }

.pmap__rangelabel {
    background: var(--red); color: #fff;
    display: grid; place-content: center;
    padding: .9rem 1.4rem;
    font-size: .8125rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
.pmap__range ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; align-items: center;
}
.pmap__range ul li {
    padding: .9rem 1.15rem;
    font-size: .875rem; color: var(--ink);
    border-right: 1px solid #eef2f7;
}
.pmap__range ul li.is-more { color: var(--muted); border-right: 0; }

/* --- Presence map: the interactive layer --------------------------------- */
.pmap__frame { position: relative; }

/* The controls only exist once the script has claimed the frame — without JS
   they would be three buttons that do nothing. */
.pmap__zoom, .pmap__hint { display: none; }
.pmap__frame.is-live .pmap__zoom { display: grid; }
.pmap__frame.is-live .pmap__hint { display: block; }

.pmap__zoom {
    position: absolute; top: 14px; right: 14px; z-index: 3;
    gap: 6px; justify-items: stretch;
}
.pmap__zoom button {
    min-width: 34px; height: 34px;
    display: grid; place-content: center;
    background: #fff; color: var(--ink);
    border: 1px solid #dce7f5; border-radius: 8px;
    font-size: 1rem; font-weight: 700; line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(20,60,120,.08);
    transition: background-color .15s, border-color .15s, color .15s;
}
.pmap__zoom button:last-child { font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; padding-inline: 8px; }
.pmap__zoom button:hover { background: var(--red); border-color: var(--red); color: #fff; }

.pmap__hint {
    position: absolute; left: 14px; bottom: 12px; z-index: 3;
    margin: 0;
    font-size: .6875rem; color: var(--muted);
    background: rgba(255,255,255,.82);
    padding: .3rem .6rem; border-radius: 999px;
    transition: opacity .4s var(--ease-soft);
}
.pmap__hint.is-gone { opacity: 0; pointer-events: none; }

.pmap__frame.is-live .in-map { cursor: grab; touch-action: none; }
.pmap__frame.is-dragging .in-map { cursor: grabbing; }

/* Every state answers to the pointer, so no part of the map is dead space. */
.pmap__svg .in-map__state { transition: fill .15s, stroke .15s; }
.pmap__frame.is-live .in-map__state:hover { stroke: var(--ink); stroke-width: 1.6; }
.pmap__frame.is-live .in-map__state:not(.is-marked):hover { fill: #cbd5e1; }
.pmap__frame.is-live .in-map__state.is-marked { cursor: pointer; }
.pmap__frame.is-live .in-map__state.is-marked:hover { filter: brightness(1.12); }
.pmap__frame.is-live .in-map__state:focus-visible { outline: none; stroke: var(--ink); stroke-width: 2.2; }
.pmap__frame.is-reduced .in-map__state { transition: none; }

/* --- Tooltip -------------------------------------------------------------- */
.pmap__tip {
    position: absolute; z-index: 4;
    transform: translate(14px, -50%);
    pointer-events: none;
    background: #fff;
    border: 1px solid #dce7f5;
    border-left: 4px solid var(--hue, #64748b);
    border-radius: 8px;
    padding: .5rem .75rem;
    box-shadow: 0 8px 22px rgba(20,60,120,.16);
    max-width: 200px;
}
.pmap__tip.is-flipped { transform: translate(calc(-100% - 14px), -50%); }
.pmap__tip b { display: block; font-size: .8125rem; color: var(--ink); line-height: 1.25; }
.pmap__tip span { display: block; margin-top: .15rem; font-size: .75rem; color: var(--muted); line-height: 1.35; }
.pmap__tip[hidden] { display: none; }

/* The pins are placed by script while zoomed, so they must not animate their
   way to each new position — it reads as lag. */
.pmap__frame.is-zoomed .pmap__pin { transition: none; }
.pmap__pin[hidden] { display: none; }

/* ==========================================================================
   Newsroom
   --------------------------------------------------------------------------
   A listing of cards and an article page. The article column is deliberately
   narrow — a measure of about 68 characters is what a body of text wants,
   and the site's full wrap is nearly twice that.
   ========================================================================== */

/* --- Category filter ------------------------------------------------------ */
.news-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.9rem; }
.news-filter a {
    border: 1px solid var(--line); background: var(--paper);
    padding: .42rem .95rem; border-radius: 999px;
    font-size: .875rem; color: var(--muted); text-decoration: none;
    transition: border-color .15s, color .15s, background-color .15s;
}
.news-filter a:hover { border-color: var(--line-2); color: var(--ink); }
.news-filter a.is-on { background: var(--red); border-color: var(--red); color: #fff; }

.news-empty { color: var(--muted); }

/* --- Card grid ------------------------------------------------------------ */
.news-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 641px)  { .news-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1025px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }

.news-card > a {
    display: grid; gap: .4rem; height: 100%;
    text-decoration: none; color: inherit;
    border: 1px solid var(--line); background: var(--paper);
    padding: 0 0 1.25rem; overflow: hidden;
    transition: border-color .18s, box-shadow .18s, transform .18s var(--ease-soft);
}
.news-card > a:hover { border-color: var(--line-2); box-shadow: var(--sh-md); transform: translateY(-3px); }

.news-card__pic { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); }
.news-card__pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease-soft); }
.news-card > a:hover .news-card__pic img { transform: scale(1.04); }

.news-card__meta {
    margin: 1.05rem 1.2rem 0;
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
    font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
}
.news-card__meta b { color: var(--red); font-weight: 800; }
.news-card__meta i { font-style: normal; color: var(--muted); }
.news-card__t { margin: 0 1.2rem; font-size: 1.0625rem; line-height: 1.32; letter-spacing: -.015em; color: var(--ink); }
.news-card__d { margin: 0 1.2rem; color: var(--muted); font-size: .9063rem; line-height: 1.5; }
.news-card__foot {
    margin: auto 1.2rem 0; padding-top: .7rem;
    display: flex; flex-wrap: wrap; gap: .75rem;
    font-size: .8125rem; color: var(--muted);
}

.news-pager { margin-top: 2.4rem; }

/* --- Article -------------------------------------------------------------- */
.art__head { padding-block: clamp(30px, 5vw, 58px) clamp(18px, 2.6vw, 28px); }
.art__kicker {
    display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
    margin-bottom: .9rem;
    font-size: .6875rem; letter-spacing: .09em; text-transform: uppercase;
}
.art__kicker b { color: var(--red); font-weight: 800; }
.art__kicker a { color: var(--muted); }
.art__head h1 { font-size: clamp(1.75rem, 1.15rem + 2.4vw, 2.85rem); line-height: 1.12; letter-spacing: -.028em; }
.art__lede { margin-top: 1rem; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); color: var(--muted); line-height: 1.55; }
.art__by {
    margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; gap: 1rem;
    font-size: .875rem; color: var(--muted);
}

.art__cover { margin: 0 0 clamp(22px, 3vw, 36px); }
.art__cover img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }

.art__review {
    display: flex; gap: .6rem; align-items: flex-start;
    background: var(--paper-2); border-left: 3px solid var(--red);
    padding: .8rem 1rem; margin-bottom: 1.8rem;
    font-size: .9063rem; color: var(--ink);
}
.art__review .ico { color: var(--red); flex: none; margin-top: .1rem; }

.art__body > p { margin-bottom: 1.15rem; font-size: 1.0625rem; line-height: 1.72; color: var(--ink-2, var(--ink)); }
.art__body > p:last-child { margin-bottom: 0; }

.art__source { margin-top: 2rem; font-size: .875rem; color: var(--muted); }
.art__back { margin-top: 2.2rem; }
.art__more { margin-top: clamp(38px, 5vw, 66px); }

/* ==========================================================================
   Divisions overview — chapters
   --------------------------------------------------------------------------
   Each division is an editorial chapter rather than a card. Photographs sit in a navy/red duotone that ties eight
   unrelated stock images into one set, and each takes its real colour only
   while its chapter is the one being read.
   ========================================================================== */

/* --- Atlas: sticky rail + chapters -------------------------------------- */
.dv-atlas { padding-block: clamp(56px, 8vw, 110px) clamp(40px, 6vw, 80px); }
.dv-atlas__in { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 1025px) {
    .dv-atlas__in { grid-template-columns: 170px 1fr; gap: clamp(40px, 5vw, 80px); }
}

.dv-rail { display: none; }
@media (min-width: 1025px) {
    .dv-rail {
        display: block; align-self: start;
        position: sticky; top: calc(var(--header-h) + var(--marquee-h) + var(--hdr-gap) + 32px);
    }
}
.dv-rail__cap {
    display: block; margin-bottom: 1rem;
    font-size: .6875rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--faint);
}
.dv-rail__body { position: relative; padding-left: 18px; }
.dv-rail__track { position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: var(--line); }
.dv-rail__fill {
    position: absolute; inset: 0; background: var(--red-bright);
    transform: scaleY(0); transform-origin: top;
    transition: transform .5s var(--ease-soft);
}
.dv-rail__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.dv-rail__list a {
    display: flex; align-items: baseline; gap: .6rem;
    padding: .35rem 0; text-decoration: none;
    color: var(--muted); font-size: .875rem; font-weight: 500;
    transition: color .2s, transform .2s var(--ease-soft);
}
.dv-rail__n { font-size: .6875rem; font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; }
.dv-rail__list a:hover { color: var(--ink); }
.dv-rail__list a.is-on { color: var(--ink); font-weight: 700; transform: translateX(4px); }
.dv-rail__list a.is-on .dv-rail__n { color: var(--red); }

/* --- Group dividers (ethical / consumer) -------------------------------- */
.dv-group {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.1rem;
    padding: 1rem 0; margin-bottom: clamp(2rem, 4vw, 3rem);
    border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line);
}
.dv-group + .dv-ch, .dv-ch + .dv-group { margin-top: 0; }
.dv-ch + .dv-group { margin-top: clamp(1rem, 3vw, 2rem); }
.dv-group__k {
    font-size: .75rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--red);
}
.dv-group p { margin: 0; color: var(--muted); font-size: .9375rem; }

/* --- A chapter ---------------------------------------------------------- */
.dv-ch {
    padding-bottom: clamp(3.5rem, 7vw, 6rem);
    scroll-margin-top: calc(var(--header-h) + var(--marquee-h) + var(--hdr-gap) + 24px);
}

.dv-ch__top {
    display: flex; align-items: flex-end; gap: clamp(.9rem, 2vw, 1.75rem);
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
/* Outlined numeral: present, but quieter than the words beside it. */
.dv-ch__num {
    flex: none;
    font-size: clamp(4.25rem, 2.5rem + 6vw, 8.5rem);
    font-weight: 800; line-height: .78; letter-spacing: -.06em;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--line-2);
    font-variant-numeric: tabular-nums;
    transition: -webkit-text-stroke-color .4s, color .4s;
}
.dv-ch.is-live .dv-ch__num { -webkit-text-stroke-color: var(--red-bright); }
.dv-ch__tag {
    margin: 0 0 .35rem;
    font-size: clamp(1.05rem, .9rem + .8vw, 1.5rem);
    font-weight: 500; font-style: italic; line-height: 1.25; letter-spacing: -.015em;
    color: var(--ink-2);
    border-left: 3px solid var(--red-bright); padding-left: .85rem;
    text-wrap: balance;
}

.dv-ch__row { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 761px) {
    .dv-ch__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
    .dv-ch--flip .dv-ch__pic { order: 2; }
}

/* Photograph: notched corner, red offset block behind, duotone until live. */
.dv-ch__pic {
    position: relative; display: block;
    aspect-ratio: 5 / 4;
    margin: 0 14px 14px 0;
}
.dv-ch--flip .dv-ch__pic { margin: 0 0 14px 14px; }
.dv-ch__pic::before {
    content: ''; position: absolute; inset: 14px -14px -14px 14px;
    background: var(--red-wash); border: 1px solid rgba(224, 30, 55, .25);
    transition: transform .5s var(--ease-soft), background .5s;
}
.dv-ch--flip .dv-ch__pic::before { inset: 14px 14px -14px -14px; }
.dv-ch.is-live .dv-ch__pic::before { background: var(--red-bright); border-color: var(--red-bright); }

.dv-ch__pic picture {
    position: absolute; inset: 0; display: block; overflow: hidden;
    clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 0 100%);
    background: var(--navy);
}
.dv-ch--flip .dv-ch__pic picture { clip-path: polygon(44px 0, 100% 0, 100% 100%, 0 100%, 0 44px); }
.dv-ch__pic img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: filter .8s var(--ease-soft), transform 1.2s var(--ease-soft);
}
/* Duotone only once JS is present to bring the colour back. */
.js .dv-ch__pic img { filter: grayscale(1) contrast(1.05) brightness(1.2); }
.js .dv-ch__pic picture::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(22, 35, 60, .5), rgba(194, 25, 47, .38));
    mix-blend-mode: multiply;
    transition: opacity .8s var(--ease-soft);
}
.js .dv-ch.is-live .dv-ch__pic img,
.js .dv-ch__pic:hover img { filter: none; }
.js .dv-ch.is-live .dv-ch__pic picture::after,
.js .dv-ch__pic:hover picture::after { opacity: 0; }
.dv-ch__pic:hover img { transform: scale(1.04); }

.dv-ch__ico {
    position: absolute; z-index: 2; left: -1px; bottom: -1px;
    display: grid; place-items: center; width: 58px; height: 58px;
    background: var(--paper); color: var(--red);
}
.dv-ch--flip .dv-ch__ico { left: auto; right: -1px; }

.dv-ch__t {
    font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
    line-height: 1.02; letter-spacing: -.035em; color: var(--ink);
    margin-bottom: .6rem;
}
.dv-ch__d { font-size: 1.0625rem; line-height: 1.6; color: var(--body); max-width: 34rem; }

.dv-ch__who {
    margin: 1.6rem 0 .6rem;
    font-size: .6875rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--faint);
}
.dv-ch__list { list-style: none; margin: 0; padding: 0; counter-reset: who; border-top: 1px solid var(--line); }
.dv-ch__list li {
    counter-increment: who;
    display: grid; grid-template-columns: 2.1rem 1fr; align-items: baseline;
    padding: .6rem 0; border-bottom: 1px solid var(--line);
    font-size: .9375rem; color: var(--ink-2); line-height: 1.4;
}
.dv-ch__list li::before {
    content: counter(who, decimal-leading-zero);
    font-size: .6875rem; font-weight: 700; color: var(--red); font-variant-numeric: tabular-nums;
}

.dv-ch__a {
    margin-top: 1.5rem;
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .8rem 1.1rem .8rem 1.25rem;
    background: var(--ink); color: #fff; text-decoration: none;
    font-size: .875rem; font-weight: 600;
    transition: background .2s, gap .2s var(--ease-soft);
}
.dv-ch__a:hover { background: var(--red); gap: .9rem; }

@media (prefers-reduced-motion: reduce) {
    .dv-rail__fill, .dv-ch__pic img, .dv-ch__pic::before, .dv-rail__list a { transition: none; }
    .dv-ch__pic:hover img { transform: none; }
}

/* ==========================================================================
   Division page — same language as the overview's chapters
   --------------------------------------------------------------------------
   Intro spread (numeral, tagline, lead, photograph), then who it serves,
   how to engage, the range and the other divisions as pictures. The long
   overview is kept whole but folded after its first two sentences.
   ========================================================================== */

/* --- Intro spread -------------------------------------------------------- */
.dx-intro__in { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 881px) { .dx-intro__in { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }

.dx-intro__lead {
    font-size: clamp(1.2rem, 1rem + .75vw, 1.55rem);
    line-height: 1.45; letter-spacing: -.012em; font-weight: 500;
    color: var(--ink); text-wrap: pretty;
}
/* The intro photo is always "live": full colour, red block behind. */
.dx-intro .dv-ch__num { -webkit-text-stroke-color: var(--red-bright); }
.dx-intro .dv-ch__pic::before { background: var(--red-bright); border-color: var(--red-bright); }
.js .dx-intro .dv-ch__pic img { filter: none; }
.js .dx-intro .dv-ch__pic picture::after { opacity: 0; }

.dx-more { margin-top: 1.25rem; border-top: 1px solid var(--line); }
.dx-more summary {
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .9rem 0 .2rem;
    font-size: .875rem; font-weight: 700; color: var(--red);
}
.dx-more summary::-webkit-details-marker { display: none; }
.dx-more summary::after { content: '+'; font-size: 1.1rem; line-height: 1; transition: transform .2s; }
.dx-more[open] summary::after { transform: rotate(45deg); }
.dx-more p { margin-top: .75rem; color: var(--body); line-height: 1.7; }

/* --- Shared section head -------------------------------------------------- */
.dx-head { max-width: 760px; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.dx-head h2 { margin-top: .6rem; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.35rem); letter-spacing: -.03em; line-height: 1.1; }
.dx-head p { margin-top: .75rem; color: var(--muted); }

/* --- Who we serve -------------------------------------------------------- */
.dx-serve {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
    grid-template-columns: 1fr;
}
@media (min-width: 761px) { .dx-serve { grid-template-columns: repeat(3, 1fr); } }
.dx-serve__i {
    background: var(--paper);
    padding: 1.75rem 1.5rem 1.9rem;
    display: flex; flex-direction: column; gap: .6rem;
    position: relative; overflow: hidden;
    transition: background .2s;
}
.dx-serve__i::after {
    content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
    background: var(--red-bright); transform: scaleX(0); transform-origin: left;
    transition: transform .4s var(--ease-soft);
}
.dx-serve__i:hover::after { transform: scaleX(1); }
.dx-serve__n {
    font-size: 2.6rem; font-weight: 800; line-height: .9; letter-spacing: -.05em;
    color: transparent; -webkit-text-stroke: 1.5px var(--red-bright);
}
.dx-serve__i strong { font-size: 1.125rem; letter-spacing: -.015em; color: var(--ink); line-height: 1.3; }
.dx-serve__i p { margin: 0; font-size: .9375rem; color: var(--muted); line-height: 1.6; }

/* --- Medical affairs band ----------------------------------------------- */
.dx-band { background: var(--navy); color: #fff; padding-block: clamp(48px, 7vw, 88px); }
.dx-band__in { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 761px) { .dx-band__in { grid-template-columns: auto 1fr; gap: 2.5rem; } }
.dx-band__ico {
    display: grid; place-items: center; width: 76px; height: 76px;
    background: var(--red-bright); color: #fff;
}
.dx-band h2 { color: #fff; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); letter-spacing: -.03em; }
.dx-band p { margin-top: .8rem; color: rgba(255, 255, 255, .8); font-size: 1.0625rem; line-height: 1.65; max-width: 52rem; }

/* --- Engagement models -------------------------------------------------- */
.dx-engage { display: grid; gap: 22px; grid-template-columns: 1fr; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 761px) { .dx-engage { grid-template-columns: 1fr 1fr; } }
.dx-engage__i {
    position: relative; overflow: hidden;
    border: 1px solid var(--line); background: var(--paper);
    padding: 1.75rem 1.6rem 1.6rem;
    transition: border-color .2s, box-shadow .2s, transform .2s var(--ease-soft);
}
.dx-engage__i:hover { border-color: var(--line-2); box-shadow: var(--sh-lg); transform: translateY(-3px); }
.dx-engage__n {
    position: absolute; right: .9rem; top: .3rem;
    font-size: 4.5rem; font-weight: 800; letter-spacing: -.06em; line-height: 1;
    color: var(--paper-3); pointer-events: none;
}
.dx-engage__i h3 { position: relative; font-size: 1.1875rem; letter-spacing: -.02em; padding-right: 3.5rem; line-height: 1.3; }
.dx-engage__i dl { position: relative; margin: 1.1rem 0 0; display: grid; gap: .35rem; }
.dx-engage__i dt {
    margin-top: .6rem;
    font-size: .6875rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--red);
}
.dx-engage__i dt:first-child { margin-top: 0; }
.dx-engage__i dd { margin: 0; font-size: .9375rem; color: var(--body); line-height: 1.6; }

/* --- Doors ---------------------------------------------------------------- */
.dx-doors { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); grid-template-columns: 1fr 1fr; }
@media (min-width: 1025px) { .dx-doors { grid-template-columns: repeat(4, 1fr); } }
.dx-door {
    display: flex; flex-direction: column; gap: .3rem;
    padding: 1.4rem 1.3rem 1.5rem;
    background: var(--paper); text-decoration: none; color: inherit;
    transition: background .2s, color .2s;
}
.dx-door .ico { color: var(--red); margin-bottom: .5rem; transition: color .2s; }
.dx-door b { font-size: 1rem; color: var(--ink); transition: color .2s; }
.dx-door span { font-size: .875rem; color: var(--muted); transition: color .2s; }
.dx-door:hover { background: var(--ink); }
.dx-door:hover b, .dx-door:hover .ico { color: #fff; }
.dx-door:hover span { color: rgba(255, 255, 255, .72); }

/* --- Range + other divisions heads -------------------------------------- */
.dx-range {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 1rem 2rem; margin-bottom: 1.5rem;
}
.dx-range h2 { margin-top: .5rem; font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem); letter-spacing: -.03em; }
.dx-range .dv-ch__a { margin-top: 0; }
.dx-range__chips .chip { background: var(--paper); }

/* --- Other divisions as photographs ------------------------------------- */
.dx-others { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 621px)  { .dx-others { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1025px) { .dx-others { grid-template-columns: repeat(7, 1fr); } }
.dx-other {
    position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden;
    background: var(--navy); text-decoration: none;
}
.dx-other picture, .dx-other img { display: block; width: 100%; height: 100%; }
.dx-other img {
    object-fit: cover;
    filter: grayscale(1) contrast(1.05) brightness(.9);
    transition: filter .5s var(--ease-soft), transform .8s var(--ease-soft);
}
.dx-other::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(22, 35, 60, .92), rgba(22, 35, 60, .1) 60%);
    pointer-events: none;
}
.dx-other__name {
    position: absolute; z-index: 1; left: .8rem; right: .8rem; bottom: .75rem;
    display: flex; align-items: center; gap: .45rem;
    font-size: .875rem; font-weight: 700; color: #fff; line-height: 1.2;
}
.dx-other__name .ico { color: var(--pulse); flex: none; }
.dx-other:hover img { filter: none; transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
    .dx-serve__i::after, .dx-engage__i, .dx-other img, .dx-door { transition: none; }
    .dx-engage__i:hover, .dx-other:hover img { transform: none; }
}

/* ==========================================================================
   Science & Quality sub-pages — shared visual kit (sx-)
   --------------------------------------------------------------------------
   R&D, Quality and Regulatory were long runs of headed paragraphs. The copy
   is the client's and stays; these pieces give each kind of content a shape
   that matches it: facts as tiles, sequences as a track, comparisons side by
   side, commitments on a navy band.
   ========================================================================== */

/* --- Intro: statement + facts ------------------------------------------ */
.sx-intro { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 881px) { .sx-intro { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); } }
.sx-intro__lead {
    font-size: clamp(1.25rem, 1rem + .9vw, 1.7rem);
    line-height: 1.42; letter-spacing: -.015em; font-weight: 500;
    color: var(--ink); text-wrap: pretty;
}
.sx-intro__lead + .sx-intro__lead { margin-top: 1rem; font-size: 1.0625rem; font-weight: 400; color: var(--body); }

.sx-facts {
    margin: 0; display: grid; grid-template-columns: 1fr 1fr;
    gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.sx-facts > div { background: var(--paper); padding: 1.1rem 1.1rem 1.2rem; }
.sx-facts dt {
    font-size: .6875rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--faint);
}
.sx-facts dd {
    margin: .35rem 0 0;
    font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem); font-weight: 700;
    letter-spacing: -.03em; color: var(--ink); line-height: 1.1;
}
.sx-facts > div:first-child { border-top: 3px solid var(--red-bright); }
.sx-facts > .sx-facts__wide { grid-column: 1 / -1; }
.sx-facts__wide dd { font-size: .9375rem; font-weight: 500; letter-spacing: 0; line-height: 1.55; color: var(--ink-2); }

/* --- Icon tiles ------------------------------------------------------------ */
.sx-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 621px)  { .sx-tiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1025px) { .sx-tiles { grid-template-columns: repeat(var(--cols, 5), 1fr); } }
.sx-tiles__i {
    position: relative; background: var(--paper); border: 1px solid var(--line);
    padding: 1.4rem 1.25rem 1.5rem;
    display: flex; flex-direction: column; gap: .8rem;
    transition: border-color .2s, box-shadow .2s, transform .2s var(--ease-soft);
}
.sx-tiles__i:hover { border-color: var(--line-2); box-shadow: var(--sh-lg); transform: translateY(-3px); }
.sx-tiles__ico {
    display: grid; place-items: center; width: 48px; height: 48px;
    background: var(--red-wash); color: var(--red);
    transition: background .2s, color .2s;
}
.sx-tiles__i:hover .sx-tiles__ico { background: var(--red); color: #fff; }
.sx-tiles__n {
    position: absolute; top: 1.1rem; right: 1.1rem;
    font-size: .75rem; font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums;
}
.sx-tiles__i p { margin: 0; font-size: .9375rem; color: var(--ink-2); line-height: 1.5; }
.sx-tiles__i b { display: block; font-size: 1rem; color: var(--ink); margin-bottom: .1rem; }

/* --- Pillars --------------------------------------------------------------- */
.sx-pillars { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 961px) { .sx-pillars { grid-template-columns: repeat(3, 1fr); } }
.sx-pillar {
    position: relative; display: flex; flex-direction: column;
    background: var(--paper); border: 1px solid var(--line);
    padding: 1.6rem 1.5rem 1.4rem;
    border-top: 3px solid var(--ink);
    transition: border-color .25s;
}
.sx-pillar:hover { border-top-color: var(--red-bright); }
.sx-pillar__head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.1rem; }
.sx-pillar__ico { display: grid; place-items: center; width: 54px; height: 54px; background: var(--navy); color: #fff; }
.sx-pillar__n {
    font-size: 3.4rem; font-weight: 800; line-height: .8; letter-spacing: -.06em;
    color: transparent; -webkit-text-stroke: 1.5px var(--line-2);
    transition: -webkit-text-stroke-color .25s;
}
.sx-pillar:hover .sx-pillar__n { -webkit-text-stroke-color: var(--red-bright); }
.sx-pillar__short {
    font-size: .6875rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--red);
}
.sx-pillar h3 { margin-top: .35rem; font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.25; }
.sx-pillar__say { margin-top: .55rem; color: var(--muted); font-size: .9375rem; line-height: 1.55; }
.sx-pillar__pts { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.sx-pillar__pts li { padding: .8rem 0; border-bottom: 1px solid var(--line); display: grid; gap: .2rem; }
.sx-pillar__pts li:last-child { border-bottom: 0; padding-bottom: 0; }
.sx-pillar__pts b { font-size: .9375rem; color: var(--ink); }
.sx-pillar__pts span { font-size: .875rem; color: var(--muted); line-height: 1.55; }

/* --- Donut ------------------------------------------------------------------ */
.sx-donut { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 881px) { .sx-donut { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.sx-donut__say h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); letter-spacing: -.03em; line-height: 1.1; }
.sx-donut__say p { margin-top: .9rem; color: var(--muted); }
.sx-donut__say .asof { margin-top: 1.2rem; }

.sx-donut__fig {
    margin: 0; display: grid; gap: 1.75rem; align-items: center;
    grid-template-columns: 1fr;
    background: var(--paper); border: 1px solid var(--line);
    padding: clamp(1.4rem, 3vw, 2.2rem);
}
@media (min-width: 621px) { .sx-donut__fig { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sx-donut__chart { position: relative; max-width: 280px; width: 100%; margin-inline: auto; }
.sx-donut__chart svg { display: block; width: 100%; height: auto; transform: rotate(0deg); }
.sx-donut__slice { transition: opacity .2s, stroke-width .2s; cursor: default; }
.sx-donut__slice.is-dim { opacity: .25; }
.sx-donut__slice.is-on { stroke-width: 6.2; }
.sx-donut__mid {
    position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
    pointer-events: none;
}
.sx-donut__mid b { font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--ink); }
.sx-donut__mid span { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.sx-donut__legend { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.sx-donut__legend tr { transition: opacity .2s; }
.sx-donut__legend tr.is-dim { opacity: .4; }
.sx-donut__legend th, .sx-donut__legend td { padding: .6rem 0; border-bottom: 1px solid var(--line); text-align: left; }
.sx-donut__legend tbody tr:last-child th, .sx-donut__legend tbody tr:last-child td { border-bottom: 0; }
.sx-donut__legend th { font-weight: 600; color: var(--ink-2); }
.sx-donut__legend th i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: .6rem; vertical-align: -1px; }
.sx-donut__legend td { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; padding-left: 1rem; }
.sx-donut__legend td:last-child { color: var(--muted); font-weight: 500; width: 3.5rem; }

/* --- Flow: a numbered track -------------------------------------------------- */
.sx-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; grid-template-columns: 1fr; position: relative; }
@media (min-width: 961px) { .sx-flow { grid-template-columns: repeat(var(--steps, 5), 1fr); gap: 20px; } }
.sx-flow__i { position: relative; padding: 0 0 1.8rem 3.4rem; }
.sx-flow__i::before {
    content: ''; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--line);
}
.sx-flow__i:last-child::before { display: none; }
@media (min-width: 961px) {
    .sx-flow__i { padding: 0; }
    .sx-flow__i::before { left: 52px; right: -20px; top: 21px; bottom: auto; width: auto; height: 2px; }
}
.sx-flow__dot {
    position: absolute; left: 0; top: 0;
    display: grid; place-items: center; width: 44px; height: 44px;
    background: var(--paper); border: 2px solid var(--ink);
    font-weight: 800; font-size: 1rem; color: var(--ink);
    transition: background .2s, border-color .2s, color .2s;
}
@media (min-width: 961px) { .sx-flow__dot { position: relative; margin-bottom: 1.1rem; } }
.sx-flow__i:hover .sx-flow__dot { background: var(--red); border-color: var(--red); color: #fff; }
.sx-flow__i:last-child .sx-flow__dot { background: var(--red); border-color: var(--red); color: #fff; }
.sx-flow__i h3 { font-size: 1.0625rem; letter-spacing: -.015em; line-height: 1.3; }
.sx-flow__i p { margin-top: .4rem; font-size: .9063rem; color: var(--muted); line-height: 1.55; }
.sx-flow__tag {
    display: inline-block; margin-top: .6rem; padding: .2rem .5rem;
    font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    background: var(--red-wash); color: var(--red);
}

/* --- Navy band with cards ---------------------------------------------------- */
.sx-band { background: var(--navy); color: #fff; padding-block: clamp(64px, 9vw, 120px); }
.sx-band .section__head h2 { color: #fff; }
.sx-band .section__head p { color: rgba(255, 255, 255, .72); }
.sx-cards { display: grid; gap: 1px; grid-template-columns: 1fr; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .12); }
@media (min-width: 761px) { .sx-cards { grid-template-columns: repeat(var(--cols, 3), 1fr); } }
.sx-cards__i { background: var(--navy); padding: 1.8rem 1.6rem 2rem; transition: background .25s; }
.sx-cards__i:hover { background: var(--navy-2); }
.sx-cards__ico { display: grid; place-items: center; width: 52px; height: 52px; background: var(--red-bright); color: #fff; margin-bottom: 1.2rem; }
.sx-cards__i h3 { color: #fff; font-size: 1.1875rem; letter-spacing: -.02em; }
.sx-cards__i p { margin-top: .55rem; color: rgba(255, 255, 255, .74); font-size: .9375rem; line-height: 1.6; }
.sx-cards__i ul { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .45rem; }
.sx-cards__i li { display: flex; gap: .55rem; font-size: .9063rem; color: rgba(255, 255, 255, .85); }
.sx-cards__i li .ico { color: var(--pulse); flex: none; margin-top: .15rem; }

/* --- Versus: two halves and a seal between them ------------------------ */
.sx-vs { position: relative; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 761px) { .sx-vs { grid-template-columns: 1fr 1fr; gap: 0; } }
.sx-vs__side {
    padding: clamp(1.6rem, 3vw, 2.6rem);
    background: var(--paper-2); border: 1px solid var(--line);
}
.sx-vs__side--dark { background: var(--navy); border-color: var(--navy); color: #fff; }
.sx-vs__k {
    font-size: .6875rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--red);
}
.sx-vs__side--dark .sx-vs__k { color: var(--pulse); }
.sx-vs__side h3 { margin-top: .5rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -.03em; }
.sx-vs__side--dark h3 { color: #fff; }
.sx-vs__side > p { margin-top: .5rem; color: var(--muted); }
.sx-vs__side--dark > p { color: rgba(255, 255, 255, .72); }
.sx-vs__side ul { list-style: none; margin: 1.4rem 0 0; padding: 0; counter-reset: vs; border-top: 1px solid var(--line); }
.sx-vs__side--dark ul { border-top-color: rgba(255, 255, 255, .14); }
.sx-vs__side li {
    counter-increment: vs;
    display: grid; grid-template-columns: 2.2rem 1fr; align-items: baseline;
    padding: .75rem 0; border-bottom: 1px solid var(--line);
    font-weight: 600; color: var(--ink-2);
}
.sx-vs__side--dark li { border-bottom-color: rgba(255, 255, 255, .14); color: #fff; }
.sx-vs__side li::before { content: counter(vs, decimal-leading-zero); font-size: .75rem; font-weight: 700; color: var(--red); }
.sx-vs__side--dark li::before { color: var(--pulse); }
.sx-vs__mid {
    display: none;
}
@media (min-width: 761px) {
    .sx-vs__mid {
        display: grid; place-items: center;
        position: absolute; left: 50%; top: 50%; z-index: 2;
        width: 64px; height: 64px; margin: -32px 0 0 -32px;
        background: var(--red-bright); color: #fff; border: 4px solid var(--paper);
        font-size: 1.1rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
    }
}

/* --- Stability: two readouts + the schedule ----------------------------- */
.sx-stab { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 881px) { .sx-stab { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.sx-stab__gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sx-gauge {
    position: relative; overflow: hidden;
    background: var(--navy); color: #fff;
    padding: 1.4rem 1.3rem 1.5rem;
    display: flex; flex-direction: column; gap: .35rem;
}
.sx-gauge::after {
    content: ''; position: absolute; right: -30px; bottom: -30px;
    width: 120px; height: 120px; border-radius: 50%;
    border: 14px solid rgba(232, 57, 47, .22);
}
.sx-gauge .ico { color: var(--pulse); }
.sx-gauge b { color: #fff; margin-top: .5rem; font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.sx-gauge small { font-size: .38em; font-weight: 700; letter-spacing: 0; margin-left: .2rem; color: rgba(255, 255, 255, .75); }
.sx-gauge span { font-size: .875rem; color: rgba(255, 255, 255, .72); }
.sx-stab__chart { background: var(--paper-2); border: 1px solid var(--line); padding: 1.4rem 1.6rem 1.2rem; }

/* --- Split: copy beside a picture --------------------------------------- */
.sx-split { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 881px) { .sx-split { grid-template-columns: 1fr 1fr; } }
.sx-split h2 { margin-top: .4rem; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); letter-spacing: -.03em; line-height: 1.1; }
.sx-split p { margin-top: .9rem; color: var(--body); }

/* --- Equipment kit list ---------------------------------------------------- */
.sx-kit {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
    grid-template-columns: 1fr;
}
@media (min-width: 621px)  { .sx-kit { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1025px) { .sx-kit { grid-template-columns: repeat(3, 1fr); } }
.sx-kit li {
    display: flex; gap: .7rem; align-items: flex-start;
    background: var(--paper); padding: 1.05rem 1.2rem;
    font-size: .9375rem; font-weight: 500; color: var(--ink-2); line-height: 1.45;
    transition: background .2s;
}
.sx-kit li:hover { background: var(--red-wash); }
.sx-kit .ico { flex: none; margin-top: .15rem; color: var(--ok); }

/* --- Closing pledge -------------------------------------------------------- */
.sx-pledge {
    position: relative; overflow: hidden;
    background: var(--paper-2); border-top: 1px solid var(--line);
    padding-block: clamp(64px, 9vw, 120px);
    text-align: center;
}
.sx-pledge::before {
    content: '\201C'; position: absolute; left: 50%; top: -.1em; transform: translateX(-50%);
    font-size: clamp(14rem, 20vw, 22rem); font-weight: 800; line-height: 1;
    color: var(--red-wash); pointer-events: none;
}
.sx-pledge .wrap { position: relative; }
.sx-pledge blockquote { margin: 0; }
.sx-pledge__big {
    font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); font-weight: 700;
    line-height: 1.15; letter-spacing: -.035em; color: var(--ink); text-wrap: balance;
}
.sx-pledge blockquote p + p { margin-top: 1.1rem; color: var(--muted); font-size: 1.0625rem; line-height: 1.65; }

/* --- Regulatory: oversight tree ------------------------------------------ */
.rg-tree { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; position: relative; }
.rg-tree__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; position: relative; }
/* Connectors: a stem down from each tier, and a bar joining the pair. */
.rg-tree > li:not(:last-child)::after {
    content: ''; position: absolute; left: 50%; bottom: -28px; width: 2px; height: 28px;
    background: var(--line-2);
}
.rg-tree > li { position: relative; }
.rg-tree__row::before {
    content: ''; position: absolute; left: 25%; right: 25%; top: -14px; height: 2px; background: var(--line-2);
}
.rg-tree__row > .rg-tree__node { position: relative; }
.rg-tree__row > .rg-tree__node::before {
    content: ''; position: absolute; left: 50%; top: -14px; width: 2px; height: 14px; background: var(--line-2);
}
.rg-tree__node {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem;
    padding: 1rem .9rem 1.05rem;
    background: var(--paper); border: 1px solid var(--line);
}
.rg-tree__node b { font-size: 1.25rem; letter-spacing: -.02em; color: var(--ink); }
.rg-tree__node > span:last-child { font-size: .8125rem; color: var(--muted); }
.rg-tree__k { font-size: .625rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.rg-tree__node--top { background: var(--navy); border-color: var(--navy); }
.rg-tree__node--top b { color: #fff; font-size: 1.6rem; }
.rg-tree__node--top > span:last-child { color: rgba(255, 255, 255, .72); }
.rg-tree__node--top .rg-tree__k { color: var(--pulse); }
.rg-tree__node--us { border: 2px solid var(--red-bright); background: var(--red-wash); }

/* --- Regulatory: framework timeline ---------------------------------------- */
.rg-time { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; grid-template-columns: 1fr; position: relative; }
@media (min-width: 961px) { .rg-time { grid-template-columns: repeat(6, 1fr); gap: 18px; } }
.rg-time__i { position: relative; padding: 0 0 1.6rem 2rem; }
.rg-time__i::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: 0; width: 2px; background: var(--line-2); }
.rg-time__i:last-child::before { display: none; }
@media (min-width: 961px) {
    .rg-time__i { padding: 0; }
    .rg-time__i::before { left: 14px; right: -18px; top: 3.05rem; bottom: auto; width: auto; height: 2px; }
}
.rg-time__y {
    display: block;
    font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); font-weight: 800; letter-spacing: -.04em; line-height: 1;
    color: var(--ink);
}
.rg-time__y--on { font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--red); padding-block: .45rem .5rem; }
.rg-time__dot {
    position: absolute; left: 0; top: 4px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--paper); border: 3px solid var(--red-bright);
}
@media (min-width: 961px) { .rg-time__dot { position: relative; display: block; left: 8px; top: 0; margin: .65rem 0 .9rem; } }
.rg-time__i h3 { margin-top: .4rem; font-size: 1rem; letter-spacing: -.01em; line-height: 1.3; }
@media (min-width: 961px) { .rg-time__i h3 { margin-top: 0; } }
.rg-time__i p { margin-top: .35rem; font-size: .875rem; color: var(--muted); line-height: 1.5; }

/* --- Regulatory: annotated pack --------------------------------------------- */
.rg-pack { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 881px) { .rg-pack { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.rg-pack__fig { margin: 0; padding: clamp(1.4rem, 3vw, 2.4rem); background: var(--paper-2); border: 1px solid var(--line); }
.rg-pack__fig figcaption { margin-top: 1.1rem; font-size: .75rem; color: var(--faint); text-align: center; }

.rg-box {
    position: relative; max-width: 460px; margin: 0 auto;
    background: #fff; border: 1px solid var(--line-2);
    box-shadow: 14px 14px 0 var(--paper-3), 0 18px 40px rgba(20, 23, 29, .08);
    font-size: .8125rem; color: var(--ink-2);
}
.rg-box__side {
    position: absolute; top: 0; right: -14px; bottom: 0; width: 14px;
    background: linear-gradient(90deg, var(--red-bright), var(--red-deep));
    transform: skewY(-45deg); transform-origin: top left;
}
.rg-box__top { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1rem; background: var(--navy); color: #fff; }
.rg-box__brand { font-weight: 800; letter-spacing: .12em; font-size: .8125rem; }
.rg-box__rx { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; font-size: 1rem; color: #fff; }
.rg-box__name { padding: 1.3rem 1rem 1rem; border-bottom: 3px solid var(--red-bright); }
.rg-box__name b { display: block; font-size: 1.5rem; letter-spacing: -.03em; color: var(--ink); }
.rg-box__name span { display: inline-flex; align-items: center; gap: .45rem; margin-top: .25rem; color: var(--muted); }
.rg-box__lines { display: grid; gap: .5rem; padding: 1rem; }
.rg-box__lines span { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding-bottom: .5rem; border-bottom: 1px dashed var(--line-2); }
.rg-box__mrp {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    padding: .8rem 1rem; background: var(--paper-2);
    font-weight: 800; font-size: .9375rem; color: var(--ink);
}
.rg-box__mrp small { font-weight: 500; color: var(--muted); font-size: .75rem; }

.rg-pin {
    flex: none; display: inline-grid; place-items: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--red-bright); color: #fff;
    font-style: normal; font-size: .6875rem; font-weight: 800;
    box-shadow: 0 0 0 3px rgba(224, 30, 55, .18);
}
.rg-pack__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.rg-pack__list li {
    display: flex; gap: .9rem; align-items: center;
    padding: 1rem 0; border-bottom: 1px solid var(--line);
    font-size: 1rem; font-weight: 500; color: var(--ink-2);
}
.rg-pack__list .rg-pin { width: 28px; height: 28px; font-size: .8125rem; }

/* --- Regulatory: documents on navy ------------------------------------------ */
.rg-docs { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 881px) { .rg-docs { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.rg-docs h2 { color: #fff; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); letter-spacing: -.03em; }
.rg-docs p { margin-top: .75rem; color: rgba(255, 255, 255, .72); }
.rg-docs__btn { margin-top: 1.6rem; background: var(--red-bright); }
.rg-docs__btn:hover { background: #fff; color: var(--ink); }
.rg-docs__list {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 1px; grid-template-columns: 1fr;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .12);
}
@media (min-width: 621px) { .rg-docs__list { grid-template-columns: 1fr 1fr; } }
.rg-docs__list li {
    display: flex; gap: .75rem; align-items: center;
    background: var(--navy); padding: 1.1rem 1.2rem;
    font-weight: 600; color: #fff; font-size: .9375rem;
    transition: background .2s;
}
.rg-docs__list li:hover { background: var(--navy-2); }
.rg-docs__list .ico { color: var(--pulse); flex: none; }

@media (prefers-reduced-motion: reduce) {
    .sx-tiles__i, .sx-donut__slice, .sx-pillar, .sx-flow__dot { transition: none; }
    .sx-tiles__i:hover { transform: none; }
}

/* ==========================================================================
   Our Network — visual pass (nw-, hbar)
   --------------------------------------------------------------------------
   Coverage and inventory figures become bar charts; the channel becomes a
   chain of links; checklists and warnings get shapes of their own. Every
   chart reads the same config the tables did, and disappears with it.
   ========================================================================== */

/* --- Horizontal bar chart ------------------------------------------------- */
.hbar { margin: 0; background: var(--paper); border: 1px solid var(--line); padding: clamp(1.2rem, 2.5vw, 1.8rem); }
.hbar__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.5rem; margin-bottom: 1.25rem; }
.hbar__cap { font-size: .8125rem; color: var(--muted); max-width: 44rem; }
.hbar__legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .8125rem; font-weight: 600; color: var(--ink-2); }
.hbar__legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: .45rem; vertical-align: -1px; }

.hbar__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.hbar__row { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr; gap: 1rem; align-items: center; }
@media (max-width: 620px) { .hbar__row { grid-template-columns: 1fr; gap: .35rem; } }
.hbar__label { font-size: .875rem; font-weight: 600; color: var(--ink-2); }
.hbar__track { position: relative; display: flex; align-items: center; min-height: 26px; padding-right: 2.75rem; }
.hbar--group .hbar__track { flex-direction: column; align-items: stretch; gap: 3px; }

.hbar__bar {
    position: relative; display: flex; align-items: center;
    width: var(--w); min-width: 2px; height: 22px;
    background: var(--c);
    transform-origin: left; transition: filter .15s;
}
/* Stacked: 2px surface gap between segments, rounded only at the data end. */
.hbar--stack .hbar__bar + .hbar__bar { margin-left: 2px; }
.hbar--stack .hbar__bar:last-of-type { border-radius: 0 4px 4px 0; }
.hbar--group .hbar__bar { height: 12px; border-radius: 0 4px 4px 0; }
.hbar__bar:hover { filter: brightness(1.12); }
.hbar--group .hbar__bar b {
    position: absolute; left: calc(100% + .45rem);
    font-size: .75rem; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.hbar__total { margin-left: .6rem; font-size: .875rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Bars grow in when the chart scrolls into view. */
.js .reveal:not(.is-in) .hbar__bar { transform: scaleX(0); }
.js .reveal.is-in .hbar__bar { transform: scaleX(1); transition: transform .9s var(--ease-soft), filter .15s; }

.hbar__table { margin-top: 1.25rem; border-top: 1px solid var(--line); }
.hbar__table summary {
    cursor: pointer; list-style: none; padding-top: .9rem;
    font-size: .8125rem; font-weight: 700; color: var(--red);
}
.hbar__table summary::-webkit-details-marker { display: none; }
.hbar__table summary::after { content: ' +'; }
.hbar__table[open] summary::after { content: ' −'; }
.hbar__table .tablewrap { margin-top: .9rem; }

/* --- Overview: photo doors ------------------------------------------------ */
.nw-doors { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 621px)  { .nw-doors { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1025px) { .nw-doors { grid-template-columns: repeat(3, 1fr); } }
.nw-door {
    display: flex; flex-direction: column; text-decoration: none; color: inherit;
    background: var(--paper); border: 1px solid var(--line); overflow: hidden;
    transition: border-color .2s, box-shadow .2s, transform .2s var(--ease-soft);
}
.nw-door:hover { border-color: var(--line-2); box-shadow: var(--sh-lg); transform: translateY(-4px); }
.nw-door__pic { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy); }
.nw-door__pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease-soft); }
.nw-door:hover .nw-door__pic img { transform: scale(1.06); }
.nw-door__pic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(22, 35, 60, .55), transparent 55%); }
.nw-door__ico {
    position: absolute; z-index: 1; left: 1rem; bottom: -20px;
    display: grid; place-items: center; width: 44px; height: 44px;
    background: var(--red-bright); color: #fff; box-shadow: var(--sh-lg);
}
.nw-door__body { display: flex; flex-direction: column; gap: .35rem; padding: 1.7rem 1.25rem 1.3rem; flex: 1; }
.nw-door__body b { font-size: 1.125rem; letter-spacing: -.015em; color: var(--ink); }
.nw-door__body > span:not(.nw-door__a) { font-size: .9063rem; color: var(--muted); line-height: 1.5; }
.nw-door__a {
    margin-top: auto; padding-top: .8rem;
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .8125rem; font-weight: 700; color: var(--red);
    transition: gap .2s var(--ease-soft);
}
.nw-door:hover .nw-door__a { gap: .7rem; }

/* --- Chain: the channel, link by link ------------------------------------ */
.nw-chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; counter-reset: link; }
@media (min-width: 761px) { .nw-chain { grid-template-columns: repeat(var(--links, 4), 1fr); gap: 34px; } }
.nw-chain__i {
    position: relative; display: flex; flex-direction: column; gap: .35rem;
    padding: 1.5rem 1.3rem 1.6rem;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14);
}
/* The arrow between links. */
@media (min-width: 761px) {
    .nw-chain__i:not(:last-child)::after {
        content: ''; position: absolute; top: 50%; right: -26px;
        width: 18px; height: 18px; margin-top: -9px;
        border-top: 2px solid var(--pulse); border-right: 2px solid var(--pulse);
        transform: rotate(45deg);
    }
}
.nw-chain__ico { display: grid; place-items: center; width: 54px; height: 54px; background: var(--red-bright); color: #fff; margin-bottom: .7rem; }
.nw-chain__n { position: absolute; top: 1rem; right: 1.1rem; font-size: .75rem; font-weight: 700; color: rgba(255, 255, 255, .45); }
.nw-chain__i b { font-size: 1.125rem; color: #fff; letter-spacing: -.015em; }
.nw-chain__i > span:last-child { font-size: .9063rem; color: rgba(255, 255, 255, .72); line-height: 1.5; }
.nw-chain__i:last-child { background: var(--red-bright); border-color: var(--red-bright); }
.nw-chain__i:last-child .nw-chain__ico { background: #fff; color: var(--red); }
.nw-chain__i:last-child > span:last-child, .nw-chain__i:last-child .nw-chain__n { color: rgba(255, 255, 255, .88); }

/* Light variant: white cards on a pale surface; the last link (the end of
   the journey) is marked with a red rule and wash, not a dark block. */
.nw-chain--light .nw-chain__i {
    background: var(--paper); border-color: var(--line);
    transition: border-color .2s, box-shadow .2s, transform .2s var(--ease-soft);
}
.nw-chain--light .nw-chain__i:hover { border-color: var(--line-2); box-shadow: var(--sh-lg); transform: translateY(-3px); }
.nw-chain--light .nw-chain__ico { background: var(--red-wash); color: var(--red); }
.nw-chain--light .nw-chain__i b { color: var(--ink); }
.nw-chain--light .nw-chain__i > span:last-child { color: var(--muted); }
.nw-chain--light .nw-chain__n { color: var(--faint); }
.nw-chain--light .nw-chain__i:not(:last-child)::after { border-color: var(--red-bright); }
.nw-chain--light .nw-chain__i:last-child {
    background: var(--red-wash); border-color: rgba(224, 30, 55, .3);
    border-top: 3px solid var(--red-bright);
}
.nw-chain--light .nw-chain__i:last-child b { color: var(--ink); }
.nw-chain--light .nw-chain__i:last-child > span:last-child { color: var(--ink-2); }
.nw-chain--light .nw-chain__i:last-child .nw-chain__n { color: var(--red); }
.nw-chain--light .nw-chain__i:last-child .nw-chain__ico { background: var(--red-bright); color: #fff; }

.nw-note {
    margin-top: 1.5rem; display: flex; gap: .7rem; align-items: center;
    padding: .9rem 1.1rem; background: var(--red-wash); border-left: 3px solid var(--red-bright);
    font-size: .9375rem; font-weight: 600; color: var(--ink);
}
.nw-note .ico { color: var(--red); flex: none; }

/* --- Overview: on the ground ---------------------------------------------- */
.nw-ground { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 881px) { .nw-ground { grid-template-columns: 1fr 1fr; } }
.nw-ground h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); letter-spacing: -.03em; line-height: 1.1; }
.nw-ground p { margin-top: .8rem; color: var(--muted); }
.nw-ground .dv-ch__a { margin-top: 1.4rem; }

/* --- India: tally + depots ----------------------------------------------- */
.nw-tally { grid-template-columns: repeat(3, 1fr); }
.nw-depots { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (min-width: 961px) { .nw-depots { grid-template-columns: repeat(4, 1fr); } }
.nw-depot {
    display: flex; flex-direction: column; gap: .25rem;
    padding: 1.3rem 1.2rem 1.4rem; background: var(--paper); border: 1px solid var(--line);
}
.nw-depot__ico { display: grid; place-items: center; width: 44px; height: 44px; background: var(--red-wash); color: var(--red); margin-bottom: .6rem; }
.nw-depot b { font-size: 1rem; color: var(--ink); }
.nw-depot > span:last-child { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.nw-depot--hub { background: var(--navy); border-color: var(--navy); }
.nw-depot--hub .nw-depot__ico { background: var(--red-bright); color: #fff; }
.nw-depot--hub b { color: #fff; }
.nw-depot--hub > span:last-child { color: var(--pulse); }

/* --- Global: entry timeline ----------------------------------------------- */
.nw-export { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 881px) { .nw-export { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.nw-export h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); letter-spacing: -.03em; line-height: 1.1; }
.nw-export > div > p { margin-top: .8rem; color: var(--muted); }
.nw-entry { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 18px; }
.nw-entry::before { content: ''; position: absolute; left: 88px; top: 8px; bottom: 8px; width: 2px; background: var(--line-2); }
.nw-entry__i { position: relative; display: grid; grid-template-columns: 64px 50px 1fr; align-items: center; }
.nw-entry__y { font-size: 1.5rem; font-weight: 800; letter-spacing: -.04em; color: var(--ink); text-align: right; padding-right: .3rem; }
.nw-entry__dot {
    position: relative; z-index: 1; justify-self: center;
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    background: var(--red-bright); color: #fff; box-shadow: 0 0 0 5px var(--paper);
}
.nw-entry__card { background: var(--paper-2); border: 1px solid var(--line); padding: 1rem 1.2rem; display: grid; gap: .45rem; }
.nw-entry__card b { font-size: 1.1875rem; letter-spacing: -.02em; color: var(--ink); }
.nw-entry__status {
    justify-self: start; padding: .25rem .6rem;
    font-size: .75rem; font-weight: 700; background: var(--warn-wash); color: var(--warn);
}

/* --- Flags: two short facts side by side ----------------------------------- */
.nw-flags { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 761px) { .nw-flags { grid-template-columns: 1fr 1fr; } }
.nw-flag { display: flex; gap: 1rem; align-items: flex-start; padding: 1.3rem 1.3rem 1.4rem; background: var(--paper); border: 1px solid var(--line); }
.nw-flag__ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; background: var(--navy); color: #fff; }
.nw-flag b { font-size: 1.0625rem; color: var(--ink); }
.nw-flag p { margin-top: .3rem; font-size: .9375rem; color: var(--muted); line-height: 1.55; }
.nw-flag--warn { border-color: rgba(138, 90, 0, .3); background: var(--warn-wash); }
.nw-flag--warn .nw-flag__ico { background: var(--warn); }

/* --- Where to buy: pack checks, warning, ask ------------------------------- */
.nw-check { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 881px) { .nw-check { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.nw-check h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); letter-spacing: -.03em; line-height: 1.1; }
.nw-check > div > p { margin-top: .8rem; color: var(--muted); }
.nw-check .dv-ch__a { margin-top: 1.4rem; }
.nw-check__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .nw-check__list { grid-template-columns: 1fr; } }
.nw-check__list li { position: relative; background: var(--paper); border: 1px solid var(--line); padding: 1.3rem 1.2rem 1.35rem; }
.nw-check__ico { display: grid; place-items: center; width: 46px; height: 46px; background: var(--ok-wash); color: var(--ok); margin-bottom: .8rem; }
.nw-check__n {
    position: absolute; top: 1rem; right: 1rem;
    display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid var(--ok); color: var(--ok); font-size: .75rem; font-weight: 800;
}
.nw-check__list p { margin: 0; font-size: .9375rem; font-weight: 500; color: var(--ink-2); line-height: 1.5; }

.nw-warn { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 761px) { .nw-warn { grid-template-columns: auto 1fr; gap: 2.5rem; } }
.nw-warn__ico { display: grid; place-items: center; width: 80px; height: 80px; background: var(--red-bright); color: #fff; }
.nw-warn h2 { color: #fff; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); letter-spacing: -.025em; line-height: 1.25; max-width: 44rem; }
.nw-warn p { margin-top: .8rem; color: rgba(255, 255, 255, .75); }

.nw-ask__card {
    display: grid; gap: 1.2rem; grid-template-columns: 1fr; align-items: center;
    padding: clamp(1.4rem, 3vw, 2rem); background: var(--paper-2); border: 1px solid var(--line);
    border-left: 4px solid var(--red-bright);
}
@media (min-width: 761px) { .nw-ask__card { grid-template-columns: auto 1fr auto; gap: 1.6rem; } }
.nw-ask__ico { display: grid; place-items: center; width: 56px; height: 56px; background: var(--red-bright); color: #fff; }
.nw-ask__card h3 { font-size: 1.25rem; letter-spacing: -.02em; }
.nw-ask__card p { margin-top: .3rem; color: var(--muted); }
.nw-ask__card .dv-ch__a { margin-top: 0; }

/* --- Partner: needs + docs, FAQ ------------------------------------------- */
.nw-need { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 881px) { .nw-need { grid-template-columns: 1fr 1fr; } }
.nw-need__col { padding: clamp(1.5rem, 3vw, 2.4rem); background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--red-bright); }
.nw-need__col--docs { background: var(--paper-2); border-top-color: var(--navy); }
.nw-need__ico { display: grid; place-items: center; width: 52px; height: 52px; background: var(--navy); color: #fff; margin-bottom: 1.2rem; }
.nw-need__col .eyebrow { margin-bottom: .6rem; }
.nw-need__col h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); letter-spacing: -.03em; line-height: 1.15; }
.nw-need__list { list-style: none; margin: 1.3rem 0 0; padding: 0; counter-reset: need; border-top: 1px solid var(--line); }
.nw-need__list li {
    counter-increment: need;
    display: grid; grid-template-columns: 2.4rem 1fr; align-items: baseline;
    padding: .85rem 0; border-bottom: 1px solid var(--line);
    font-size: .9688rem; color: var(--ink-2); line-height: 1.5;
}
.nw-need__list li::before {
    content: counter(need, decimal-leading-zero);
    font-size: 1.25rem; font-weight: 800; letter-spacing: -.04em; color: var(--red-bright);
}
.nw-need__docs { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: .55rem; }
.nw-need__docs li {
    display: flex; gap: .65rem; align-items: center;
    padding: .75rem .9rem; background: var(--paper); border: 1px solid var(--line);
    font-size: .9375rem; font-weight: 600; color: var(--ink-2);
}
.nw-need__docs .ico { color: var(--ok); flex: none; }

.nw-faq { display: grid; gap: 10px; }
.nw-faq__i { background: var(--paper); border: 1px solid var(--line); transition: border-color .2s; }
.nw-faq__i[open] { border-color: var(--line-2); border-left: 3px solid var(--red-bright); }
.nw-faq__i summary {
    cursor: pointer; list-style: none;
    display: flex; justify-content: space-between; gap: 1rem; align-items: center;
    padding: 1.1rem 1.3rem; font-weight: 700; font-size: 1rem; color: var(--ink);
}
.nw-faq__i summary::-webkit-details-marker { display: none; }
.nw-faq__i summary::after {
    content: '+'; flex: none; display: grid; place-items: center; width: 28px; height: 28px;
    background: var(--paper-3); color: var(--ink); font-size: 1.1rem; font-weight: 600;
    transition: transform .2s, background .2s, color .2s;
}
.nw-faq__i[open] summary::after { transform: rotate(45deg); background: var(--red-bright); color: #fff; }
.nw-faq__i p { padding: 0 1.3rem 1.2rem; color: var(--muted); line-height: 1.65; }

@media (prefers-reduced-motion: reduce) {
    .js .reveal:not(.is-in) .hbar__bar { transform: none; }
    .nw-door, .nw-door__pic img, .hbar__bar { transition: none; }
    .nw-door:hover, .nw-door:hover .nw-door__pic img { transform: none; }
}

/* ==========================================================================
   Pack QR scan page (/verify/{code})
   --------------------------------------------------------------------------
   Read on a phone, one-handed, over a pack: verdict first, then the batch
   and expiry large enough to compare at arm's length.
   ========================================================================== */
/* The header here is in flow (not overlaid), so the page only needs its own
   breathing room — adding the header height again left a large gap on phones. */
.vf { background: var(--paper-2); padding-block: clamp(16px, 3vw, 32px) 56px; min-height: 70vh; }
.vf__wrap { max-width: 640px; }

.vf__verdict { display: flex; gap: 1rem; align-items: center; padding: 1.3rem 1.3rem; border-radius: 14px; color: #fff; }
.vf__verdict--ok { background: var(--ok); }
.vf__verdict--bad { background: var(--red); }
.vf__icon { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.vf__k { margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .88); }
.vf__verdict h1 { margin: .15rem 0 0; font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.8rem); line-height: 1.15; letter-spacing: -.02em; color: #fff; }
.vf__verdict h1 span { font-weight: 500; opacity: .85; }

.vf__pic {
    margin: 12px 0 0; padding: 14px;
    background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
    display: grid; place-items: center;
}
.vf__pic img { display: block; width: 100%; max-height: 260px; object-fit: contain; }
.vf__alert { display: flex; gap: .7rem; align-items: flex-start; margin-top: 14px; padding: 1rem 1.1rem; border-radius: 10px; font-size: .9688rem; }
.vf__alert--bad { background: var(--red-wash); color: var(--red-deep); border: 1px solid rgba(224, 30, 55, .3); }
.vf__alert .ico { flex: none; margin-top: .1rem; }

.vf__match { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 14px; }
.vf__match > div { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; }
.vf__match span { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.vf__match b { display: block; margin-top: .2rem; font-size: 1.45rem; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; word-break: break-all; }
.vf__match .is-bad { border-color: var(--red-bright); background: var(--red-wash); }
.vf__match .is-bad b { color: var(--red); }
.vf__hint { margin: .6rem 0 0; font-size: .875rem; color: var(--muted); }

.vf__facts { margin: 18px 0 0; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: .3rem 1.1rem; }
.vf__facts > div { display: grid; grid-template-columns: 1fr; gap: .15rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 521px) { .vf__facts > div { grid-template-columns: 9.5rem 1fr; gap: 1rem; } }
.vf__facts > div:last-child { border-bottom: 0; }
.vf__facts dt { font-size: .8125rem; font-weight: 700; color: var(--muted); }
.vf__facts dd { margin: 0; font-size: .9688rem; color: var(--ink-2); }

.vf__note { margin-top: 14px; padding: .9rem 1.1rem; background: var(--warn-wash); border-radius: 10px; color: var(--warn); font-size: .9375rem; }
.vf__lead { margin-top: 16px; font-size: 1.0625rem; color: var(--ink-2); }
.vf__lead code { font-weight: 700; background: var(--paper); padding: .1rem .4rem; border-radius: 4px; }
.vf__warn { margin-top: 16px; padding: 1rem 1.1rem; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--red-bright); border-radius: 10px; }
.vf__warn b { color: var(--ink); }
.vf__warn p { margin: .3rem 0 0; font-size: .9375rem; color: var(--muted); }

.vf__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.vf__links .btn { flex: 1 1 220px; justify-content: center; }
.vf__foot { margin-top: 28px; text-align: center; font-size: .8125rem; color: var(--faint); }

/* Employee ID scan (/staff/{code}) */
.vf__staff { display: flex; gap: 1rem; align-items: center; margin-top: 14px; padding: 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.vf__staff img { flex: none; width: 104px; height: 104px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.vf__staff > div { display: grid; gap: .2rem; min-width: 0; }
.vf__staff b { font-size: 1.15rem; color: var(--ink); }
.vf__staff span { font-size: .9375rem; color: var(--muted); }
.vf__staff strong { color: var(--ink); }