@charset "UTF-8";
/* ==========================================================================
   ADDAME ENERGY LLC-FZ — DESIGN SYSTEM
   --------------------------------------------------------------------------
   One stylesheet, one cascade. Layers run general to specific, and nothing
   below re-opens something above: if a rule needs changing, it is changed
   where it was written rather than overridden further down.

   01  Tokens
   02  Reset
   03  Layout primitives
   04  Typography
   05  Decoration
   06  Buttons and links
   07  Forms
   08  Header, navigation, mega menu
   09  Mobile drawer
   10  Hero
   11  Page header
   12  Sections and editorial blocks
   13  Cards, divisions, products
   14  Data: counters, specs, standards, tables, timeline
   15  Accordion
   16  Service detail
   17  Contact, map, dialog
   18  CTA band
   19  Footer
   20  Motion
   21  Responsive
   22  Print
   ========================================================================== */

/* ==========================================================================
   01 — TOKENS
   The palette is anchored to the brand mark: #c9a34e gold on near-black,
   with a cool graphite scale so the gold reads as precious rather than
   ambient. Gold is a signal colour. It marks the one thing that matters in
   a given block, never the whole block.
   ========================================================================== */

:root {
    /* Ink: warm near-black through to mid graphite */
    --ink-950: #0a0c0e;
    --ink-900: #101316;
    --ink-850: #15191d;
    --ink-800: #1b2026;
    --ink-700: #272d34;
    --ink-600: #3b434c;
    --ink-500: #58616b;

    /* Gold: brand anchor at 400, refined either side */
    --gold-50:  #faf5e9;
    --gold-100: #f1e5c8;
    --gold-200: #e4d0a1;
    --gold-300: #d5b878;
    --gold-400: #c9a34e;   /* brand */
    --gold-500: #ad8a3b;
    --gold-600: #7d6224;   /* AA on white, paper and paper-2 at small sizes */

    /* Graphite: cool neutrals for structure */
    --grey-100: #eceef0;
    --grey-200: #dcdfe3;
    --grey-300: #c2c7cd;
    --grey-400: #9aa1aa;
    --grey-500: #737b85;

    /* Paper */
    --paper:   #f7f6f3;
    --paper-2: #efece7;
    --white:   #ffffff;

    /* Semantic: light surfaces */
    --bg:          var(--paper);
    --surface:     var(--white);
    --text:        var(--ink-850);
    --text-muted:  #4b545d;
    --text-soft:   #636b74;   /* AA on white, paper and paper-2 */
    --heading:     var(--ink-900);
    --line:        rgba(16, 19, 22, .11);
    --line-soft:   rgba(16, 19, 22, .06);
    --line-strong: rgba(16, 19, 22, .2);

    /* Semantic: dark surfaces */
    --d-bg:        var(--ink-900);
    --d-text:      rgba(255, 255, 255, .72);
    --d-heading:   #ffffff;
    --d-muted:     rgba(255, 255, 255, .54);
    --d-line:      rgba(255, 255, 255, .12);
    --d-line-soft: rgba(255, 255, 255, .07);

    /* Gradients: restrained, used for edges and text sheen only */
    --gold-rule:  linear-gradient(90deg, var(--gold-500) 0%, var(--gold-300) 50%, transparent 100%);
    --gold-fill:  linear-gradient(135deg, #e4d0a1 0%, #c9a34e 52%, #8c6e2a 100%);
    --gold-sheen: linear-gradient(98deg, #8c6e2a 0%, #e4d0a1 26%, #faf5e9 42%, #d5b878 60%, #8c6e2a 100%);

    /* Type */
    --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --font-quote: "Cormorant Garamond", "Times New Roman", serif;

    /* Fluid display scale. Each step is clamped so it never collapses on a
       phone nor runs away on a 2560px monitor. */
    --t-display: clamp(2.75rem, 1.6rem + 5.1vw, 6rem);
    --t-h1:      clamp(2.25rem, 1.45rem + 3.5vw, 4rem);
    --t-h2:      clamp(1.85rem, 1.3rem + 2.3vw, 3rem);
    --t-h3:      clamp(1.25rem, 1.08rem + .72vw, 1.6rem);
    --t-h4:      clamp(1.05rem, .99rem + .28vw, 1.2rem);
    --t-lede:    clamp(1.06rem, .99rem + .33vw, 1.25rem);
    --t-body:    1.0125rem;
    --t-small:   .875rem;
    --t-label:   .6875rem;

    /* Metrics */
    --shell:        1320px;
    --shell-wide:   1560px;
    --shell-narrow: 860px;
    --gutter:       clamp(20px, 4.4vw, 56px);
    --radius:       2px;
    --radius-lg:    3px;
    /* The product line-up is the one rounded surface on the site; the two
       tiers share a ratio so they stay in proportion. */
    --radius-card:    14px;
    --radius-card-lg: 18px;
    --head-h:       78px;
    --bar-h:        40px;

    /* Vertical rhythm. One token drives every section so the page keeps time. */
    --space-section: clamp(72px, 8.5vw, 148px);
    --space-tight:   clamp(52px, 5.5vw, 92px);

    /* Elevation: used sparingly, never as decoration */
    --lift-sm: 0 1px 2px rgba(10, 12, 14, .04), 0 4px 16px -8px rgba(10, 12, 14, .1);
    --lift:    0 2px 6px rgba(10, 12, 14, .05), 0 18px 48px -22px rgba(10, 12, 14, .24);
    --lift-lg: 0 40px 90px -40px rgba(10, 12, 14, .42);

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

/* ==========================================================================
   02 — RESET
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--head-h) + 24px);
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--t-body);
    font-weight: 400;
    line-height: 1.68;
    font-feature-settings: "kern" 1, "liga" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .5em;
    color: var(--heading);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.022em;
    text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -.014em; line-height: 1.24; }
h4 { font-size: var(--t-h4); letter-spacing: -.008em; line-height: 1.34; }

p { margin: 0 0 1.05em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

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

ul, ol { margin: 0 0 1.05em; padding-left: 1.1em; }
li { margin-bottom: .4em; }
li:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; color: var(--heading); }
em { font-style: italic; }

hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Both carry a 40px inline margin by default, which silently indents any
   figure or pull quote away from the grid it is supposed to sit on. */
figure, blockquote { margin: 0; }

table { border-collapse: collapse; width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

::selection { background: var(--gold-300); color: var(--ink-900); }

:focus-visible {
    outline: 2px solid var(--gold-400);
    outline-offset: 3px;
    border-radius: 1px;
}

/* Skip link. First tab stop on every page. */
.skip {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 999;
    padding: 12px 20px;
    background: var(--ink-900);
    color: var(--white);
    font-size: var(--t-small);
    font-weight: 600;
    border-radius: var(--radius);
    transform: translateY(-180%);
    transition: transform .25s var(--ease);
}
.skip:focus { transform: none; }

.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;
}

/* ==========================================================================
   03 — LAYOUT PRIMITIVES
   ========================================================================== */

.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.shell--wide   { max-width: var(--shell-wide); }
.shell--narrow { max-width: var(--shell-narrow); }

/* Asymmetric two-column split, the workhorse editorial layout.
   Weighted rather than 50/50 so it never reads as a pair of boxes. */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
    gap: clamp(36px, 5vw, 84px);
    align-items: center;
}
.split--flip > :first-child { order: 2; }
.split--even  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split--aside { grid-template-columns: minmax(0, 1fr) minmax(0, .62fr); }
.split--top   { align-items: start; }

.grid { display: grid; gap: clamp(18px, 2vw, 28px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--tight { gap: clamp(14px, 1.4vw, 20px); }

.stack > * + * { margin-top: 1.05em; }
.center { text-align: center; }

/* ==========================================================================
   04 — TYPOGRAPHY
   Four registers, each with one job:
     .label   mono, tracked   — notation, categories, field names
     display  sans, tight     — headlines
     body     sans, 1.68      — reading text
     .quote   serif, italic   — the one luxury register, used sparingly
   ========================================================================== */

.label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-600);
    margin: 0 0 18px;
}
.label::before {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--gold-500);
    flex: none;
}
.label--plain::before { display: none; }
.label--center { justify-content: center; }

.display {
    font-size: var(--t-display);
    font-weight: 700;
    line-height: .99;
    letter-spacing: -.035em;
}

.lede {
    font-size: var(--t-lede);
    line-height: 1.62;
    color: var(--text-muted);
    max-width: 62ch;
    font-weight: 400;
}

.muted { color: var(--text-muted); }
.soft  { color: var(--text-soft); }

.small {
    font-size: var(--t-small);
    line-height: 1.6;
}

.quote {
    font-family: var(--font-quote);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.45rem, 1rem + 2vw, 2.4rem);
    line-height: 1.34;
    letter-spacing: -.01em;
    color: var(--heading);
    font-variant-numeric: lining-nums;
}

/* Mono figures. Tabular so columns of numbers align. */
.figures { font-variant-numeric: tabular-nums lining-nums; }

/* Gold sheen on a numeral or a single word. Background-clip needs a
   fallback colour first, in case the clip is unsupported. */
.sheen {
    color: var(--gold-400);
    background: var(--gold-sheen);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   05 — DECORATION
   Structure made visible: hairlines, registration marks, a paper grain and
   drawn corner frames. Every one is aria-hidden and none carries meaning.
   ========================================================================== */

/* Hairline column guides, used behind dark full-bleed blocks. */
.guides {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
    pointer-events: none;
    z-index: 1;
}
.guides > span { border-left: 1px solid var(--d-line-soft); }
.guides > span:last-child { border-right: 1px solid var(--d-line-soft); }

/* Fine grain. A single inline SVG turbulence tile, no image request. */
.grain::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .3;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* Drawn corner frame. Four L-shaped brackets rather than a full border. */
.frame {
    position: absolute;
    inset: clamp(14px, 2.2vw, 30px);
    pointer-events: none;
    z-index: 2;
}
.frame > span {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 0 solid var(--d-line);
}
.frame > span:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.frame > span:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.frame > span:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.frame > span:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* A short gold rule used to open a block. */
.rule {
    width: 52px;
    height: 2px;
    background: var(--gold-fill);
    border: 0;
    margin: 0 0 26px;
}
.rule--center { margin-inline: auto; }

/* Oversized section numeral set into the margin. */
.numeral {
    font-family: var(--font-mono);
    font-size: clamp(2.6rem, 6vw, 5rem);
    font-weight: 300;
    line-height: .8;
    letter-spacing: -.04em;
    color: transparent;
    -webkit-text-stroke: 1px var(--line-strong);
    user-select: none;
}

/* A vertical rail of text along a block edge. */
.rail {
    position: absolute;
    writing-mode: vertical-rl;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--d-muted);
    user-select: none;
}
/* ==========================================================================
   05b — DECORATIVE ATMOSPHERE
   A second decorative register on top of the hairlines and registration
   marks: light, depth and texture rather than structure.

   Everything here is aria-hidden, pointer-events-none and sits behind
   content. The rule the whole layer obeys: an effect is allowed to be felt
   and not noticed. Anything that announces itself has been turned down.
   ========================================================================== */

/* --- Gradient orbs ------------------------------------------------------
   A blurred radial field that lifts a flat dark panel off the page. Painted
   with a mask rather than a box-shadow so it never clips at a section edge,
   and kept under 10% so it reads as light, not as a coloured blob. */

.orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(clamp(40px, 6vw, 90px));
    opacity: .5;
}
.orb--gold  { background: radial-gradient(circle at 50% 50%, rgba(201, 163, 78, .5) 0%, rgba(201, 163, 78, .14) 45%, transparent 70%); }
.orb--warm  { background: radial-gradient(circle at 50% 50%, rgba(226, 178, 96, .34) 0%, rgba(140, 110, 42, .12) 48%, transparent 72%); }
.orb--cool  { background: radial-gradient(circle at 50% 50%, rgba(140, 162, 188, .26) 0%, rgba(90, 110, 130, .08) 50%, transparent 72%); }

.orb--lg { width: clamp(320px, 42vw, 720px); aspect-ratio: 1; }
.orb--md { width: clamp(240px, 28vw, 460px); aspect-ratio: 1; }
.orb--sm { width: clamp(160px, 18vw, 300px); aspect-ratio: 1; }

/* On light surfaces the same field has to be far weaker, or it reads as a
   stain rather than as light. */
.section--white .orb,
.section--paper .orb { opacity: .28; }

/* --- Background pattern ---------------------------------------------------
   Drawn with gradients, so there is no image request and the tile scales
   with the type. Masked so a section never ends on a hard pattern edge. */

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

.pattern--dots {
    background-image: radial-gradient(currentColor 1px, transparent 1px);
    background-size: 26px 26px;
    color: rgba(16, 19, 22, .07);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 78%);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 78%);
}
.section--ink .pattern--dots { color: rgba(255, 255, 255, .09); }

/* --- Glass ---------------------------------------------------------------
   A translucent panel with a lit top edge. The inset highlight is what sells
   it: without it the panel reads as flat opacity rather than as a surface
   catching light. Backdrop-filter is progressive — where it is unsupported
   the background colour alone still gives a legible panel. */

.glass {
    position: relative;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 18px 44px -26px rgba(0, 0, 0, .8);
}

/* Light-surface glass sits on paper rather than on a photograph. */
.glass--light {
    background: rgba(255, 255, 255, .72);
    border-color: rgba(16, 19, 22, .08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        var(--lift);
}

/* --- Glow ----------------------------------------------------------------
   Reserved for the primary action on a dark field, where a plain gold fill
   otherwise sits flat against the photograph behind it. */

.glow-gold {
    box-shadow:
        0 0 0 1px rgba(201, 163, 78, .3),
        0 10px 34px -12px rgba(201, 163, 78, .5);
}

/* --- Section divider ------------------------------------------------------
   Closes a section without a hard rule: a hairline that fades at both ends,
   interrupted by a small rotated gold node. */

.divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1px;
    margin-block: clamp(46px, 6vw, 80px);
    background: linear-gradient(90deg, transparent, var(--line-strong) 22%, var(--line-strong) 78%, transparent);
}
.divider::after {
    content: "";
    width: 7px;
    height: 7px;
    background: var(--gold-fill);
    transform: rotate(45deg);
    box-shadow: 0 0 0 5px var(--divider-halo, var(--bg));
}
.section--ink .divider {
    background: linear-gradient(90deg, transparent, var(--d-line) 22%, var(--d-line) 78%, transparent);
}

/* The node sits on the section's own surface, so each one declares it. */
.section--white { --divider-halo: var(--surface); }
.section--paper { --divider-halo: var(--paper-2); }
.section--ink   { --divider-halo: var(--ink-900); }

/* --- Badge ---------------------------------------------------------------
   A small pill used for categories, counts and status. */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 100px;
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-600);
    white-space: nowrap;
}
.badge--dark {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
    color: var(--gold-300);
}
.badge__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold-400);
    flex: none;
}
/* A live indicator for the operations desk. The pulse is the one looping
   animation on the site, and it stops under reduced motion. */
.badge__dot--live { position: relative; }
.badge__dot--live::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px solid var(--gold-400);
    animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse {
    0%   { transform: scale(.6); opacity: .9; }
    70%  { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* --- Layered frame --------------------------------------------------------
   An offset outline behind a figure, so the image reads as one plane in a
   stack rather than as a flat rectangle. */

/* A wrapper, never the figure itself: .figure clips its own overflow, which
   would swallow an outline drawn outside it. */
.layered { position: relative; display: block; }
.layered::before {
    content: "";
    position: absolute;
    inset: clamp(14px, 2vw, 26px) calc(-1 * clamp(14px, 2vw, 26px)) calc(-1 * clamp(14px, 2vw, 26px)) clamp(14px, 2vw, 26px);
    border: 1px solid var(--gold-300);
    border-radius: var(--radius);
    z-index: -1;
    pointer-events: none;
}
.section--ink .layered::before { border-color: rgba(201, 163, 78, .38); }

/* A section hosting a blurred orb needs a clip, or the blur bleeds into its
   neighbours — but clipping EVERY section would silently break the product
   page's sticky sidebar, because an overflow-hidden ancestor becomes the
   sticky element's scrollport. So the clip is opt-in.
   The hero, CTA, page header and footer already clip in their own rules. */
.section { isolation: isolate; }
.section--deco { overflow: hidden; }

/* Content has to sit above the atmosphere. */
.section > .shell,
.hero > .shell,
.cta > .shell { position: relative; z-index: 2; }

/* ==========================================================================
   06 — BUTTONS AND LINKS
   Square-cornered and quiet. The hover is a wipe rather than a colour swap,
   so the control reads as a mechanism rather than a state change.
   ========================================================================== */

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 28px;
    border: 1px solid var(--ink-900);
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink-900);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .015em;
    line-height: 1;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    transition: color .34s var(--ease), border-color .34s var(--ease);
    -webkit-tap-highlight-color: transparent;
}

/* The wipe. Scales from the left edge on hover. */
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--ink-900);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .42s var(--ease-out);
}
.btn:hover::before,
.btn:focus-visible::before { transform: scaleX(1); }
.btn:hover { color: var(--white); }

.btn .icon {
    flex: none;
    transition: transform .34s var(--ease-out);
}
.btn:hover .icon { transform: translateX(4px); }

/* Primary. Gold field, ink text, wipes to ink. */
.btn--gold {
    border-color: transparent;
    background: var(--gold-fill);
    color: var(--ink-900);
    font-weight: 700;
}
.btn--gold::before { background: var(--ink-900); }
.btn--gold:hover { color: var(--gold-200); }

/* On dark surfaces. */
.btn--light {
    border-color: rgba(255, 255, 255, .3);
    color: var(--white);
}
.btn--light::before { background: var(--white); }
.btn--light:hover { color: var(--ink-900); border-color: var(--white); }

/* Tertiary. Hairline only. */
.btn--ghost { border-color: var(--line-strong); color: var(--text); }

.btn--sm { padding: 12px 20px; font-size: .8125rem; gap: 9px; }
.btn--lg { padding: 19px 36px; font-size: .9375rem; }
.btn--block { width: 100%; }

.btn[disabled],
.btn.is-busy { opacity: .55; pointer-events: none; }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

/* Text link with an underline that draws in from the left. */
.tlink {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--ink-900);
    padding-bottom: 3px;
}
.tlink::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--gold-500);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .38s var(--ease-out);
}
.tlink:hover::after,
.tlink:focus-visible::after { transform: scaleX(1); }
.tlink .icon { transition: transform .34s var(--ease-out); }
.tlink:hover .icon { transform: translateX(4px); }
.tlink--light { color: var(--white); }

/* Inline prose link. Always underlined, so it is not colour-dependent. */
.plink {
    color: var(--ink-900);
    text-decoration: underline;
    text-decoration-color: var(--gold-400);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: text-decoration-color .3s var(--ease);
}
.plink:hover { text-decoration-color: var(--ink-900); }

/* Filter pills. */
.pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.pills > li { margin: 0; }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px;
    border: 1px solid var(--line);
    border-radius: 100px;
    background: var(--surface);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-muted);
    transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.pill:hover {
    border-color: var(--gold-400);
    color: var(--ink-900);
    background: var(--white);
}
.pill .icon { color: var(--gold-500); flex: none; }
.pill__n {
    font-family: var(--font-mono);
    font-size: .6875rem;
    color: var(--gold-600);
    font-variant-numeric: tabular-nums;
}

/* Icon button. */
.iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text-muted);
    transition: border-color .3s var(--ease), color .3s var(--ease);
}
.iconbtn:hover { border-color: var(--gold-400); color: var(--ink-900); }

/* Back to top. */
.to-top {
    position: fixed;
    right: clamp(16px, 2.4vw, 32px);
    bottom: clamp(16px, 2.4vw, 32px);
    z-index: 60;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--ink-900);
    color: var(--gold-300);
    box-shadow: var(--lift);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .34s var(--ease), transform .34s var(--ease), visibility .34s;
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--gold-400); color: var(--ink-900); }

/* ==========================================================================
   07 — FORMS
   Underline fields rather than boxes: less border, more type. The label sits
   above and stays visible, so the field is never identified by placeholder
   alone once it has content.
   ========================================================================== */

.field { margin-bottom: 24px; }

.field__label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.req { color: var(--gold-600); }

.input,
.textarea,
.select {
    width: 100%;
    padding: 13px 2px;
    border: 0;
    border-bottom: 1px solid var(--line-strong);
    border-radius: 0;
    background: transparent;
    color: var(--ink-900);
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color .3s var(--ease);
    appearance: none;
}
.input::placeholder,
.textarea::placeholder { color: var(--grey-400); }

.input:focus,
.textarea:focus,
.select:focus {
    outline: none;
    border-bottom-color: var(--gold-400);
    border-bottom-width: 2px;
    padding-bottom: 12px;
}

.textarea { min-height: 140px; resize: vertical; }

.input.has-error,
.textarea.has-error { border-bottom-color: #c0553c; }

.field__error {
    display: block;
    margin-top: 7px;
    font-size: .8125rem;
    color: #c0553c;
}

/* Honeypot. Removed from flow and from the accessibility tree, but not
   display:none, which some bots detect and skip. */
.field--hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.alert {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    margin-bottom: 24px;
    border-left: 2px solid;
    border-radius: var(--radius);
    font-size: .9rem;
}
.alert--err { border-color: #c0553c; background: rgba(192, 85, 60, .07); color: #8e3c28; }
.alert--ok  { border-color: var(--gold-500); background: var(--gold-50); color: var(--ink-800); }
.alert__icon { flex: none; margin-top: 2px; }

/* Newsletter: a single line with the button inside the rule. */
.subscribe {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--d-line);
    padding-bottom: 6px;
}
.subscribe input {
    flex: 1;
    min-width: 0;
    padding: 10px 0;
    border: 0;
    background: transparent;
    color: var(--white);
    font-size: .9rem;
}
.subscribe input::placeholder { color: rgba(255, 255, 255, .38); }
.subscribe input:focus { outline: none; }
.subscribe button {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 4px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--gold-300);
    transition: color .3s var(--ease);
}
.subscribe button:hover { color: var(--gold-200); }
.subscribe:focus-within { border-bottom-color: var(--gold-400); }
/* ==========================================================================
   08 — HEADER, NAVIGATION, MEGA MENU
   The header is transparent over the page header plate and resolves to a
   solid, slightly condensed bar once scrolled. Both states share one set of
   rules; only the custom properties change, so there is no second cascade.
   ========================================================================== */

.site-head {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;

    /* Driven by state below rather than by duplicated rule blocks. */
    --head-fg:     #ffffff;
    --head-fg-dim: rgba(255, 255, 255, .78);
    --head-line:   rgba(255, 255, 255, .16);
    --head-bg:     transparent;

    color: var(--head-fg);
    transition: transform .5s var(--ease), background-color .4s var(--ease),
                box-shadow .4s var(--ease), backdrop-filter .4s var(--ease);
}

.site-head.is-stuck {
    --head-fg:     var(--ink-900);
    --head-fg-dim: var(--text-muted);
    --head-line:   var(--line);
    --head-bg:     rgba(255, 255, 255, .92);

    background: var(--head-bg);
    box-shadow: 0 1px 0 var(--line), 0 10px 40px -28px rgba(10, 12, 14, .5);
    backdrop-filter: saturate(1.6) blur(14px);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
}

/* Retracts on scroll down, returns on scroll up. */
.site-head.is-away { transform: translateY(-100%); }

/* While the drawer is open the header must stay put and readable. */
.site-head.is-open { transform: none; }

/* --- Utility bar ------------------------------------------------------- */

.topbar {
    border-bottom: 1px solid var(--head-line);
    font-size: .8125rem;
    transition: height .4s var(--ease), opacity .3s var(--ease), border-color .4s var(--ease);
    height: var(--bar-h);
    overflow: hidden;
}
.site-head.is-stuck .topbar { height: 0; opacity: 0; border-color: transparent; }

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: var(--bar-h);
}

.topbar__list {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}
.topbar__list li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--head-fg-dim);
    white-space: nowrap;
}
.topbar__list .icon { color: var(--gold-400); flex: none; }
.topbar__list a { transition: color .3s var(--ease); }
.topbar__list a:hover { color: var(--gold-300); }

.topbar__social { display: flex; align-items: center; gap: 4px; }
.topbar__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--head-fg-dim);
    transition: color .3s var(--ease);
}
.topbar__social a:hover { color: var(--gold-300); }

/* --- Main bar ---------------------------------------------------------- */

.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(20px, 3vw, 48px);
    height: var(--head-h);
    transition: height .4s var(--ease);
}
.site-head.is-stuck .nav__inner { height: 68px; }

/* Brand. Two logo files, swapped by header state rather than by opacity
   stacking, so only one is ever painted. */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex: none;
}
.brand__mark { display: block; position: relative; }
.brand__logo {
    height: clamp(36px, 3.8vw, 46px);
    width: auto;
    transition: height .4s var(--ease);
}
.site-head.is-stuck .brand__logo { height: clamp(32px, 3.2vw, 40px); }

.brand__logo--on-dark  { display: block; }
.brand__logo--on-light { display: none; }
.site-head.is-stuck .brand__logo--on-dark  { display: none; }
.site-head.is-stuck .brand__logo--on-light { display: block; }

/* The name is typeset rather than drawn, because the wordmark inside the
   supplied lockup renders about 10px tall at header size. Uppercase and
   tracked to echo the artwork it replaces. */
.brand__text { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.brand__name {
    font-size: clamp(.82rem, .74rem + .28vw, .95rem);
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--head-fg);
    transition: color .4s var(--ease);
}
.brand__sub {
    font-family: var(--font-mono);
    font-size: .5625rem;
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--gold-400);
}

/* Menu */
.nav__menu {
    display: flex;
    align-items: center;
    gap: clamp(4px, 1.4vw, 18px);
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav__menu > li { margin: 0; position: relative; }

.nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 4px;
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--head-fg-dim);
    white-space: nowrap;
    transition: color .3s var(--ease);
}
.nav__link::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 2px;
    height: 1px;
    background: var(--gold-400);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .36s var(--ease-out);
}
.nav__link:hover,
.nav__link.is-active { color: var(--head-fg); }
.nav__link:hover::after,
.nav__link.is-active::after,
.nav__item:hover .nav__link::after,
.nav__item:focus-within .nav__link::after { transform: scaleX(1); }

.nav__chev {
    flex: none;
    opacity: .6;
    transition: transform .34s var(--ease);
}
.nav__item:hover .nav__chev,
.nav__item:focus-within .nav__chev { transform: rotate(180deg); }

.nav__actions { display: flex; align-items: center; gap: 12px; flex: none; }

/* The header CTA has to work on both a photograph and a white bar. */
.nav__cta {
    border-color: var(--gold-400);
    background: var(--gold-fill);
    color: var(--ink-900);
}
.nav__cta::before { background: var(--ink-900); }
.nav__cta:hover { color: var(--gold-200); }

/* --- Dropdown ---------------------------------------------------------- */

.dropdown,
.mega {
    position: absolute;
    top: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .3s var(--ease), transform .34s var(--ease-out), visibility .3s;
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 2px solid var(--gold-400);
    box-shadow: var(--lift);
    z-index: 20;
}
.nav__item:hover > .dropdown,
.nav__item:focus-within > .dropdown,
.nav__item:hover > .mega,
.nav__item:focus-within > .mega {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.dropdown {
    left: -14px;
    min-width: 248px;
    padding: 10px;
    list-style: none;
    margin: 0;
}
.dropdown li { margin: 0; }
.dropdown a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    font-size: .875rem;
    color: var(--text-muted);
    border-radius: var(--radius);
    transition: background .26s var(--ease), color .26s var(--ease), padding-left .26s var(--ease);
}
.dropdown a::after {
    content: "";
    width: 12px;
    height: 1px;
    background: var(--gold-400);
    opacity: 0;
    transition: opacity .26s var(--ease);
}
.dropdown a:hover {
    background: var(--paper);
    color: var(--ink-900);
    padding-left: 18px;
}
.dropdown a:hover::after { opacity: 1; }

/* --- Mega menu --------------------------------------------------------- */

.nav__item--mega { position: static; }

.mega {
    left: 50%;
    transform: translate(-50%, 10px);
    width: min(calc(100vw - 2 * var(--gutter)), var(--shell));
    padding: 36px 40px 28px;
}
.nav__item--mega:hover > .mega,
.nav__item--mega:focus-within > .mega { transform: translate(-50%, 0); }

.mega__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 32px;
}

.mega__col { min-width: 0; }

.mega__title {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: -.005em;
    color: var(--ink-900);
}
.mega__title .icon { color: var(--gold-500); flex: none; }
.mega__title a { transition: color .26s var(--ease); }
.mega__title a:hover { color: var(--gold-600); }

.mega__list { list-style: none; margin: 0; padding: 0; }
.mega__list li { margin: 0; }
.mega__list a {
    display: block;
    padding: 5px 0;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--text-soft);
    transition: color .24s var(--ease), transform .24s var(--ease);
}
.mega__list a:hover { color: var(--ink-900); transform: translateX(3px); }

.mega__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
.mega__note {
    margin: 0;
    font-size: .8125rem;
    color: var(--text-soft);
    max-width: 62ch;
}

/* --- Burger ------------------------------------------------------------ */

.burger {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--head-line);
    border-radius: var(--radius);
    color: var(--head-fg);
    transition: border-color .3s var(--ease), background .3s var(--ease);
}
.burger:hover { border-color: var(--gold-400); }

.burger__box {
    position: relative;
    width: 19px;
    height: 12px;
}
.burger__box span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .4s var(--ease-out), opacity .24s var(--ease), width .4s var(--ease-out);
}
.burger__box span:nth-child(1) { top: 0; }
.burger__box span:nth-child(2) { top: 5.25px; width: 72%; }
.burger__box span:nth-child(3) { top: 10.5px; }

.burger[aria-expanded="true"] .burger__box span:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__box span:nth-child(2) { opacity: 0; width: 0; }
.burger[aria-expanded="true"] .burger__box span:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }

/* ==========================================================================
   09 — MOBILE DRAWER
   A full-height panel from the right with its own scroll context. The
   backdrop is a separate layer so the panel can animate independently.
   ========================================================================== */

.drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
    visibility: hidden;
    transition: visibility .5s;
}
.drawer.is-open { visibility: visible; }

.drawer__scrim {
    position: absolute;
    inset: 0;
    background: rgba(10, 12, 14, .58);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .44s var(--ease);
}
.drawer.is-open .drawer__scrim { opacity: 1; }

.drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 90vw);
    display: flex;
    flex-direction: column;
    background: var(--ink-900);
    color: var(--d-text);
    box-shadow: var(--lift-lg);
    transform: translateX(100%);
    transition: transform .52s var(--ease-out);
    overscroll-behavior: contain;
}
.drawer.is-open .drawer__panel { transform: none; }

.drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px var(--gutter);
    border-bottom: 1px solid var(--d-line);
    flex: none;
}
.drawer__head .brand__logo { height: 40px; }
.drawer__head .brand__name { color: var(--white); }

.drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--d-line);
    border-radius: var(--radius);
    color: var(--white);
    flex: none;
    transition: border-color .3s var(--ease), color .3s var(--ease);
}
.drawer__close:hover { border-color: var(--gold-400); color: var(--gold-300); }

.drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 10px var(--gutter) 28px;
    -webkit-overflow-scrolling: touch;
}

.drawer__nav { list-style: none; margin: 0; padding: 0; }
.drawer__nav > li { margin: 0; border-bottom: 1px solid var(--d-line-soft); }

.drawer__nav > li > a,
.drawer__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 17px 2px;
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--white);
    text-align: left;
    transition: color .28s var(--ease);
}
.drawer__nav > li > a:hover,
.drawer__toggle:hover { color: var(--gold-300); }

.drawer__toggle .icon {
    flex: none;
    color: var(--gold-400);
    transition: transform .36s var(--ease);
}
.drawer__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

.drawer__sub {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .46s var(--ease-out);
}
.drawer__sub li { margin: 0; }
.drawer__sub a {
    display: block;
    padding: 10px 0 10px 16px;
    border-left: 1px solid var(--d-line);
    font-size: .9rem;
    color: var(--d-muted);
    transition: color .26s var(--ease), border-color .26s var(--ease);
}
.drawer__sub a:hover { color: var(--white); border-color: var(--gold-400); }
.drawer__sub > li:last-child a { margin-bottom: 14px; }

.drawer__group {
    padding: 14px 0 5px 16px;
    border-left: 1px solid var(--d-line);
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-500);
}

.drawer__foot {
    flex: none;
    padding: 22px var(--gutter) calc(22px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--d-line);
    background: var(--ink-950);
}
.drawer__meta {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.drawer__meta li {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    font-size: .875rem;
    color: var(--d-muted);
}
.drawer__meta .icon { color: var(--gold-400); flex: none; }
.drawer__meta a:hover { color: var(--white); }
/* ==========================================================================
   10 — HERO
   Full-bleed photograph, a graded veil rather than a flat scrim, and the
   headline set at display scale. The parallax offset is written to
   --hero-shift by script; with no script the value stays 0 and the frame is
   simply static.
   ========================================================================== */

.hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: min(100svh, 940px);
    padding-top: calc(var(--head-h) + var(--bar-h) + clamp(40px, 8vh, 110px));
    overflow: hidden;
    background: var(--ink-950);
    color: var(--white);
    --hero-shift: 0px;
}

/* The parallax offset lives on the container and the drift lives on each
   plate, so the two transforms never fight for the same property. */
.hero__media {
    position: absolute;
    inset: -6% 0 -6%;
    z-index: -2;
    transform: translate3d(0, var(--hero-shift), 0);
    will-change: transform;
}

/* Plates are stacked in the same box and cross-faded. Each one drifts very
   slowly while it is on screen — the move is small enough to register as
   depth rather than as an animation. */
.hero__shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    opacity: 0;
    transform: scale(1.03);
    transition: opacity 1.5s var(--ease);
}

/* An animation rather than a transition, because the first plate is already
   active in the server-rendered markup: a transition has no starting state
   to run from there, but an animation runs on first paint. */
.hero__shot.is-on {
    opacity: 1;
    animation: hero-drift 9s linear both;
}

/* While a plate fades out its animation is gone, so the end transform has to
   be restated or the frame snaps back mid-fade. */
.hero__shot.is-leaving {
    opacity: 0;
    transform: scale(1.105);
}

@keyframes hero-drift {
    from { transform: scale(1.03); }
    to   { transform: scale(1.105); }
}

/* Two veils: a vertical grade for legibility, and a horizontal one that
   weights the left where the type sits. */
.hero__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(10,12,14,.86) 0%, rgba(10,12,14,.34) 34%, rgba(10,12,14,.5) 62%, rgba(10,12,14,.94) 100%),
        linear-gradient(100deg, rgba(10,12,14,.88) 0%, rgba(10,12,14,.4) 52%, rgba(10,12,14,.06) 100%);
}

.hero .guides { z-index: -1; }

.hero__watermark {
    position: absolute;
    top: clamp(90px, 16vh, 190px);
    right: clamp(-20px, 1vw, 48px);
    z-index: -1;
    opacity: .07;
    pointer-events: none;
}
.hero__watermark img { width: clamp(180px, 26vw, 420px); height: auto; }

.hero__rail {
    right: clamp(16px, 2.4vw, 34px);
    bottom: clamp(180px, 24vh, 300px);
    z-index: 3;
}

.hero__inner {
    position: relative;
    z-index: 4;
    padding-bottom: clamp(44px, 7vh, 84px);
}

.hero__eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 clamp(20px, 3vh, 34px);
    font-family: var(--font-mono);
    font-size: var(--t-label);
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}
.hero__eyebrow .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold-400);
    flex: none;
}

.hero__title {
    max-width: 17ch;
    margin: 0 0 clamp(20px, 3vh, 30px);
    color: var(--white);
    font-size: var(--t-display);
    font-weight: 700;
    line-height: .99;
    letter-spacing: -.038em;
    text-wrap: balance;
}
/* Each line is a clipping window so the reveal wipes upward rather than
   fading a whole block at once. */
.hero__line { display: block; overflow: hidden; }
.hero__line > span { display: block; }
.hero__title em {
    font-family: var(--font-quote);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.01em;
    color: var(--gold-300);
    padding-right: .06em;
}

.hero__lede {
    max-width: 58ch;
    margin: 0 0 clamp(28px, 4vh, 42px);
    font-size: var(--t-lede);
    line-height: 1.6;
    color: rgba(255, 255, 255, .8);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Facts strip along the foot of the hero. */
.hero__strip {
    position: relative;
    z-index: 4;
    border-top: 1px solid rgba(255, 255, 255, .14);
    background: rgba(10, 12, 14, .42);
    backdrop-filter: blur(10px) saturate(1.3);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
}

.hero__facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
}
.hero__facts > div {
    padding: 22px clamp(16px, 2vw, 30px) 24px;
    border-left: 1px solid rgba(255, 255, 255, .11);
}
.hero__facts > div:first-child { border-left: 0; padding-left: 0; }
.hero__facts dt {
    font-family: var(--font-mono);
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-400);
    margin-bottom: 8px;
}
.hero__facts dd {
    margin: 0;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.45;
    color: rgba(255, 255, 255, .88);
}

/* ==========================================================================
   11 — PAGE HEADER
   Inner-page equivalent of the hero: shorter, same visual language, with the
   breadcrumb trail carried on a rule beneath.
   ========================================================================== */

.pagehead {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--ink-900);
    color: var(--white);
    padding-top: calc(var(--head-h) + var(--bar-h) + clamp(56px, 9vh, 112px));
    padding-bottom: clamp(44px, 6vh, 78px);
}

.pagehead__media { position: absolute; inset: 0; z-index: -2; }
.pagehead__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
    transform: scale(1.04);
}
.pagehead__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(10,12,14,.84) 0%, rgba(10,12,14,.56) 45%, rgba(10,12,14,.9) 100%),
        linear-gradient(94deg, rgba(10,12,14,.78) 0%, rgba(10,12,14,.22) 68%, rgba(10,12,14,0) 100%);
}
.pagehead .guides { z-index: -1; }

.pagehead__inner { position: relative; z-index: 2; max-width: 74ch; }

.pagehead .label { color: var(--gold-300); }
.pagehead .label::before { background: var(--gold-400); }

.pagehead h1 {
    color: var(--white);
    margin-bottom: .42em;
    letter-spacing: -.03em;
    max-width: 20ch;
}

.pagehead__lede {
    max-width: 66ch;
    margin: 0;
    font-size: var(--t-lede);
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
}

.pagehead__foot {
    position: relative;
    z-index: 2;
    margin-top: clamp(32px, 5vh, 54px);
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-mono);
    font-size: .6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.crumbs li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: rgba(255, 255, 255, .5);
}
.crumbs li + li::before {
    content: "/";
    color: rgba(255, 255, 255, .28);
}
.crumbs a { transition: color .28s var(--ease); }
.crumbs a:hover { color: var(--gold-300); }
.crumbs [aria-current] { color: var(--gold-300); }

/* ==========================================================================
   12 — SECTIONS AND EDITORIAL BLOCKS
   ========================================================================== */

.section {
    position: relative;
    padding-block: var(--space-section);
}
.section--tight { padding-block: var(--space-tight); }
.section--flush-top { padding-top: 0; }

.section--white { background: var(--surface); }
.section--paper { background: var(--paper-2); }

.section--ink {
    background: var(--ink-900);
    color: var(--d-text);
    isolation: isolate;
}
.section--ink h1,
.section--ink h2,
.section--ink h3,
.section--ink h4 { color: var(--d-heading); }
.section--ink .lede { color: rgba(255, 255, 255, .74); }
.section--ink .muted { color: var(--d-muted); }
.section--ink .label { color: var(--gold-300); }
.section--ink .label::before { background: var(--gold-400); }
.section--ink .numeral { -webkit-text-stroke-color: rgba(255, 255, 255, .22); }
.section--ink .tlink { color: var(--white); }
.section--ink a.plink { color: var(--white); }

/* Ink section carrying a photograph behind it. */
.section--photo .section__media { position: absolute; inset: 0; z-index: -2; }
.section--photo .section__media img { width: 100%; height: 100%; object-fit: cover; }
.section--photo .section__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(10,12,14,.95) 0%, rgba(10,12,14,.89) 50%, rgba(10,12,14,.96) 100%);
}

/* --- Numbered section header ------------------------------------------ */

.shead {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(20px, 3vw, 46px);
    align-items: start;
    margin-bottom: clamp(38px, 5vw, 66px);
}
.shead__n {
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .1em;
    color: var(--gold-600);
    padding-top: .5em;
    position: relative;
}
.shead__n::after {
    content: "";
    display: block;
    width: 1px;
    height: calc(100% - 2.2em);
    min-height: 20px;
    background: linear-gradient(180deg, var(--line-strong), transparent);
    position: absolute;
    left: 50%;
    top: 2em;
}
.section--ink .shead__n { color: var(--gold-400); }
.section--ink .shead__n::after { background: linear-gradient(180deg, rgba(255,255,255,.2), transparent); }

.shead__body { min-width: 0; }
.shead__title { margin: 0; max-width: 24ch; }
.shead__lede { margin: 18px 0 0; max-width: 64ch; font-size: var(--t-lede); color: var(--text-muted); line-height: 1.6; }
.section--ink .shead__lede { color: rgba(255, 255, 255, .72); }

.shead--center {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
}
.shead--center .shead__n { display: none; }
.shead--center .shead__title { max-width: 22ch; }
.shead--center .shead__lede { max-width: 62ch; }

/* Header with an action pinned to the right on wide screens. */
.shead--split {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: end;
}
/* The action aligns to the baseline of the heading block, but the numeral
   belongs at the top of it — otherwise a header with a lede pushes the
   numeral to the foot of the section. */
.shead--split .shead__n { align-self: start; }
.shead--split .shead__aside { padding-bottom: 6px; }

/* --- Figures ------------------------------------------------------------ */

.figure {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--ink-850);
}
.figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease-out);
}
.figure--tall { aspect-ratio: 4 / 5; }
.figure--wide { aspect-ratio: 16 / 10; }
.figure--band { aspect-ratio: 21 / 7; }

.figure__tag {
    position: absolute;
    left: 0;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    background: rgba(10, 12, 14, .82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: var(--font-mono);
    font-size: .625rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-300);
}
.figure__tag .icon { color: var(--gold-400); }

/* Two-image collage with an offset inset. */
.collage { position: relative; padding-bottom: 54px; padding-right: 42px; }
.collage__main { aspect-ratio: 4 / 5; }
.collage__inset {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 54%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius);
    border: 6px solid var(--surface);
    background: var(--ink-850);
}
.collage__inset img { width: 100%; height: 100%; object-fit: cover; }

.collage__badge {
    position: absolute;
    left: 0;
    bottom: 22px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 20px;
    background: var(--ink-900);
    color: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--lift);
}
.collage__badge .icon { color: var(--gold-400); flex: none; }
.collage__badge-label {
    display: block;
    font-family: var(--font-mono);
    font-size: .625rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--d-muted);
}
.collage__badge-value {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

/* --- Pull quote --------------------------------------------------------- */

.pullquote {
    position: relative;
    max-width: 68ch;
    margin-inline: auto;
    text-align: center;
    padding-top: 52px;
}
.pullquote::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 34px;
    background: linear-gradient(180deg, transparent, var(--gold-400));
}
.pullquote__text { margin: 0 0 22px; }
.section--ink .pullquote__text { color: var(--white); }
.pullquote__by {
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-500);
}
.section--ink .pullquote__by { color: var(--gold-400); }

/* --- Signature block ---------------------------------------------------- */

.signature {
    margin-top: 38px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}
.signature__name {
    font-family: var(--font-quote);
    font-style: italic;
    font-size: 1.6rem;
    line-height: 1.2;
    color: var(--heading);
}
.signature__role {
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-600);
}
/* ==========================================================================
   13 — CARDS, DIVISIONS, PRODUCTS
   Cards are defined by a rule and a shift, not by a box and a shadow. The
   shared hover is a gold top rule drawing left to right.
   ========================================================================== */

/* --- Tile: numbered, borderless, for capability and process grids ------- */

.tile {
    position: relative;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}
.tile::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--gold-fill);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .6s var(--ease-out);
}
.tile:hover::before { transform: scaleX(1); }
.section--ink .tile { border-top-color: var(--d-line); }

.tile__n {
    display: block;
    margin-bottom: 16px;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-600);
    font-variant-numeric: tabular-nums;
}
.section--ink .tile__n { color: var(--gold-400); }

.tile__title { margin: 0 0 10px; font-size: 1.125rem; }
.tile__text { margin: 0; font-size: .9375rem; line-height: 1.62; color: var(--text-muted); }
.section--ink .tile__text { color: var(--d-muted); }

/* Measure ticks, a small instrument motif above process steps. */
.ticks { display: flex; gap: 4px; margin-bottom: 20px; }
.ticks span {
    width: 1px;
    height: 9px;
    background: var(--line-strong);
}
.ticks span:nth-child(5n + 1) { height: 15px; background: var(--gold-500); }
.section--ink .ticks span { background: rgba(255, 255, 255, .22); }
.section--ink .ticks span:nth-child(5n + 1) { background: var(--gold-400); }

/* --- Card: bordered surface card, for catalogue listings --------------- */

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 26px 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .4s var(--ease), transform .4s var(--ease-out), box-shadow .4s var(--ease);
}
.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gold-fill);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .55s var(--ease-out);
}
a.card:hover {
    border-color: var(--line-strong);
    transform: translateY(-3px);
    box-shadow: var(--lift);
}
a.card:hover::before { transform: scaleX(1); }

.card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--gold-600);
    flex: none;
    transition: border-color .36s var(--ease), color .36s var(--ease), background .36s var(--ease);
}
a.card:hover .card__icon { border-color: var(--gold-400); background: var(--gold-50); }

.card__eyebrow {
    display: block;
    margin-bottom: 12px;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-600);
}
.card__title { margin: 0 0 10px; font-size: 1.125rem; }
.card__text {
    margin: 0 0 20px;
    font-size: .9375rem;
    line-height: 1.62;
    color: var(--text-muted);
}
.card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
}
.card__n {
    font-family: var(--font-mono);
    font-size: .6875rem;
    color: var(--text-soft);
    font-variant-numeric: tabular-nums;
}

/* Dark-surface card. */
.section--ink .card {
    background: rgba(255, 255, 255, .035);
    border-color: var(--d-line);
}
.section--ink .card__text { color: var(--d-muted); }
.section--ink .card__icon { border-color: var(--d-line); color: var(--gold-400); }
.section--ink .card__foot { border-top-color: var(--d-line-soft); }
.section--ink a.card:hover { border-color: rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .06); }

/* --- Value card: icon over text, no border ----------------------------- */

.vcard { position: relative; padding-left: 0; }
.vcard__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 22px;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--gold-600);
}
.section--ink .vcard__icon {
    border-color: rgba(255, 255, 255, .2);
    color: var(--gold-400);
    background: rgba(255, 255, 255, .03);
}
.vcard h3 { margin: 0 0 11px; font-size: 1.1875rem; }
.vcard p { margin: 0; font-size: .9375rem; line-height: 1.64; color: var(--text-muted); }
.section--ink .vcard p { color: var(--d-muted); }

/* --- Numbered panel card ----------------------------------------------- */

.pcard {
    position: relative;
    padding: 30px 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.section--ink .pcard { background: rgba(255, 255, 255, .035); border-color: var(--d-line); }
.section--paper .pcard { background: var(--surface); }

.pcard__n {
    display: block;
    margin-bottom: 18px;
    font-family: var(--font-mono);
    font-size: 1.75rem;
    font-weight: 300;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--gold-600);
    font-variant-numeric: tabular-nums;
}
.section--ink .pcard__n { -webkit-text-stroke-color: var(--gold-400); }

.pcard h3 { margin: 0 0 11px; font-size: 1.125rem; }
.pcard p { margin: 0; font-size: .9375rem; line-height: 1.64; color: var(--text-muted); }
.section--ink .pcard p { color: var(--d-muted); }

/* --- Division rows: the catalogue as an editorial index ---------------- */

.divlist { border-top: 1px solid var(--line); }
.section--ink .divlist { border-top-color: var(--d-line); }

.divrow {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 22%) minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(18px, 3vw, 44px);
    padding: clamp(22px, 2.6vw, 34px) 0;
    border-bottom: 1px solid var(--line);
    transition: padding-left .5s var(--ease-out), background-color .45s var(--ease);
}
.section--ink .divrow { border-bottom-color: var(--d-line); }
.divrow:hover { padding-left: clamp(10px, 1.4vw, 22px); }

.divrow__n {
    font-family: var(--font-mono);
    font-size: .75rem;
    color: var(--gold-600);
    font-variant-numeric: tabular-nums;
    flex: none;
}
.section--ink .divrow__n { color: var(--gold-400); }

.divrow__name {
    font-size: clamp(1.15rem, 1rem + .9vw, 1.6rem);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.16;
    color: var(--heading);
    transition: color .36s var(--ease);
}
.section--ink .divrow__name { color: var(--d-heading); }
.divrow:hover .divrow__name { color: var(--gold-600); }
.section--ink .divrow:hover .divrow__name { color: var(--gold-300); }

.divrow__blurb {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 58ch;
}
.section--ink .divrow__blurb { color: var(--d-muted); }

/* Thumbnail that grows out of the row on hover. Pointer-events off so it
   never interrupts the link target. */
.divrow__thumb {
    position: absolute;
    right: clamp(150px, 16vw, 230px);
    top: 50%;
    width: clamp(160px, 17vw, 240px);
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-50%) scale(.92) rotate(-1.5deg);
    transition: opacity .44s var(--ease), transform .56s var(--ease-out);
    box-shadow: var(--lift);
    z-index: 3;
}
.divrow__thumb img { width: 100%; height: 100%; object-fit: cover; }
.divrow:hover .divrow__thumb {
    opacity: 1;
    transform: translateY(-50%) scale(1) rotate(0deg);
}

.divrow__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: none;
    font-family: var(--font-mono);
    font-size: .6875rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-soft);
}
.section--ink .divrow__meta { color: var(--d-muted); }
.divrow__meta .icon { color: var(--gold-500); transition: transform .4s var(--ease-out); }
.divrow:hover .divrow__meta .icon { transform: translateX(5px); }

/* --- Product line-up ------------------------------------------------------
   A two-tier card set: two feature cards over a register of four. Each card
   carries its division's photograph, which is why Catalog::featured() orders
   the picks so the first six come from six different divisions.

   These are the only rounded surfaces on the site. The radius is a token so
   the two tiers stay in proportion to each other. */

.lineup__featured {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 1.8vw, 28px);
    margin-bottom: clamp(18px, 1.8vw, 28px);
}

.lineup__register {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 1.4vw, 22px);
}

/* --- Feature card --------------------------------------------------------- */

.feature {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-card-lg);
    background: var(--surface);
    transition: border-color .45s var(--ease), transform .45s var(--ease-out), box-shadow .45s var(--ease);
}
.section--ink .feature {
    border-color: var(--d-line);
    background: rgba(255, 255, 255, .035);
}
.feature:hover {
    transform: translateY(-3px);
    box-shadow: var(--lift);
    border-color: var(--line-strong);
}
.section--ink .feature:hover { border-color: rgba(255, 255, 255, .26); }

.feature__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--ink-850);
    flex: none;
}
.feature__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.15s var(--ease-out), filter .6s var(--ease);
}
.section--ink .feature__media img { filter: saturate(.86) brightness(.82); }
.feature:hover .feature__media img { transform: scale(1.055); }
.section--ink .feature:hover .feature__media img { filter: saturate(1) brightness(.96); }

/* Keeps the code legible whatever the photograph does underneath it. */
.feature__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,12,14,.22) 0%, rgba(10,12,14,0) 38%, rgba(10,12,14,.42) 100%);
}

.feature__body {
    padding: clamp(22px, 2.2vw, 32px);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.feature__code {
    font-family: var(--font-mono);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold-600);
    margin-bottom: 14px;
}
.section--ink .feature__code { color: var(--gold-300); }

.feature__title {
    margin: 0 0 12px;
    font-size: clamp(1.25rem, 1.05rem + .8vw, 1.65rem);
    letter-spacing: -.022em;
    line-height: 1.22;
}

.feature__text {
    margin: 0 0 24px;
    font-size: .9375rem;
    line-height: 1.66;
    color: var(--text-muted);
    max-width: 46ch;
}
.section--ink .feature__text { color: var(--d-muted); }

.feature__more { margin-top: auto; }

/* --- Register card -------------------------------------------------------- */

.linecard {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);
    transition: border-color .45s var(--ease), transform .45s var(--ease-out), box-shadow .45s var(--ease);
}
.section--ink .linecard {
    border-color: var(--d-line);
    background: rgba(255, 255, 255, .035);
}
.linecard:hover {
    transform: translateY(-3px);
    box-shadow: var(--lift);
    border-color: var(--line-strong);
}
.section--ink .linecard:hover { border-color: rgba(255, 255, 255, .26); }

.linecard__frame {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--ink-850);
    flex: none;
}
.linecard__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease-out), filter .6s var(--ease);
}
.section--ink .linecard__frame img { filter: saturate(.86) brightness(.82); }
.linecard:hover .linecard__frame img { transform: scale(1.06); }
.section--ink .linecard:hover .linecard__frame img { filter: saturate(1) brightness(.96); }

/* The code sits on the photograph, so it carries its own plate. */
.linecard__code {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 10px;
    border-radius: var(--radius);
    background: rgba(10, 12, 14, .8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-family: var(--font-mono);
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-300);
}

.linecard__body {
    padding: clamp(18px, 1.7vw, 26px);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.linecard__title {
    margin: 0 0 10px;
    font-size: 1.125rem;
    letter-spacing: -.02em;
    line-height: 1.26;
}

.linecard__text {
    margin: 0 0 20px;
    font-size: .875rem;
    line-height: 1.62;
    color: var(--text-muted);
}
.section--ink .linecard__text { color: var(--d-muted); }

/* Pinned to the foot so the links line up across cards of unequal text. */
.linecard__more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--heading);
}
.section--ink .linecard__more {
    border-top-color: rgba(255, 255, 255, .055);
    color: var(--d-heading);
}
.linecard__more .icon { color: var(--gold-500); transition: transform .38s var(--ease-out); }
.section--ink .linecard__more .icon { color: var(--gold-400); }
.linecard:hover .linecard__more .icon { transform: translateX(4px); }

/* --- Closing row ---------------------------------------------------------- */

.lineup__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: clamp(20px, 3vw, 48px);
    margin-top: clamp(38px, 4.5vw, 68px);
    padding-top: clamp(26px, 3vw, 40px);
    border-top: 1px solid var(--line);
}
.section--ink .lineup__foot { border-top-color: var(--d-line); }
.lineup__foot p {
    margin: 0;
    max-width: 62ch;
    font-size: var(--t-lede);
    line-height: 1.6;
    color: var(--text-muted);
}
.section--ink .lineup__foot p { color: rgba(255, 255, 255, .74); }

/* ==========================================================================
   14 — DATA
   ========================================================================== */

/* --- Counter readout ---------------------------------------------------- */

.readout {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, .16);
}
.readout__cell {
    padding: clamp(26px, 3vw, 40px) clamp(14px, 2vw, 30px) 0;
    border-left: 1px solid rgba(255, 255, 255, .11);
}
.readout__cell:first-child { border-left: 0; padding-left: 0; }

.readout__key {
    display: block;
    margin-bottom: 14px;
    font-family: var(--font-mono);
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-400);
}
.readout__value {
    font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.6rem);
    font-weight: 300;
    line-height: .94;
    letter-spacing: -.045em;
    color: var(--white);
    font-variant-numeric: tabular-nums lining-nums;
    margin-bottom: 12px;
}
.readout__note {
    font-size: .8125rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .56);
}

/* --- Key/value specification list --------------------------------------- */

.speclist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.section--ink .speclist { border-top-color: var(--d-line); }

.speclist li {
    display: grid;
    grid-template-columns: minmax(0, 168px) minmax(0, 1fr);
    gap: 18px;
    align-items: baseline;
    margin: 0;
    padding: 15px 0;
    border-bottom: 1px solid var(--line-soft);
}
.section--ink .speclist li { border-bottom-color: var(--d-line-soft); }

.speclist__k {
    font-family: var(--font-mono);
    font-size: var(--t-label);
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-600);
}
.section--ink .speclist__k { color: var(--gold-400); }

.speclist__v { font-size: .9375rem; line-height: 1.6; color: var(--text); }
.section--ink .speclist__v { color: var(--d-text); }
.speclist__v a { border-bottom: 1px solid var(--line-strong); transition: border-color .3s var(--ease); }
.speclist__v a:hover { border-color: var(--gold-400); }

/* --- Standards band ------------------------------------------------------ */

.standards { margin-top: clamp(40px, 5vw, 66px); }
.standards__label {
    margin: 0 0 22px;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-400);
}
.standards__list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1px;
    list-style: none;
    margin: 0;
    padding: 0;
    background: rgba(255, 255, 255, .11);
    border: 1px solid rgba(255, 255, 255, .11);
}
.standards__list li {
    margin: 0;
    padding: 20px 18px;
    background: var(--ink-900);
    transition: background-color .38s var(--ease);
}
.standards__list li:hover { background: var(--ink-800); }
.standards__mark {
    display: block;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--white);
    margin-bottom: 6px;
}
.standards__detail {
    display: block;
    font-family: var(--font-mono);
    font-size: .6875rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .5);
}

/* --- Check list ---------------------------------------------------------- */

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checks li {
    position: relative;
    margin: 0;
    padding-left: 30px;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--text-muted);
}
.checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .5em;
    width: 13px;
    height: 7px;
    border-left: 1.5px solid var(--gold-500);
    border-bottom: 1.5px solid var(--gold-500);
    transform: rotate(-45deg);
}
.section--ink .checks li { color: var(--d-muted); }
.section--ink .checks li::before { border-color: var(--gold-400); }

/* --- Specification table -------------------------------------------------- */

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}
.section--ink .table-scroll { border-color: var(--d-line); background: rgba(255, 255, 255, .035); }

.spectable { min-width: 420px; font-size: .9375rem; }
.spectable caption {
    padding: 16px 20px;
    text-align: left;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-600);
    border-bottom: 1px solid var(--line);
}
.section--ink .spectable caption { color: var(--gold-400); border-bottom-color: var(--d-line); }

.spectable th,
.spectable td {
    padding: 14px 20px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line-soft);
}
.section--ink .spectable th,
.section--ink .spectable td { border-bottom-color: var(--d-line-soft); }

.spectable tr:last-child th,
.spectable tr:last-child td { border-bottom: 0; }

.spectable th {
    width: 42%;
    font-weight: 600;
    color: var(--heading);
}
.section--ink .spectable th { color: var(--d-heading); }

.spectable td {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.section--ink .spectable td { color: var(--d-muted); }
.spectable tbody tr { transition: background-color .3s var(--ease); }
.spectable tbody tr:hover { background: var(--paper); }
.section--ink .spectable tbody tr:hover { background: rgba(255, 255, 255, .04); }

/* --- Timeline ------------------------------------------------------------- */

.timeline { position: relative; padding-left: 34px; }
.timeline::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: linear-gradient(180deg, var(--gold-400), var(--line) 70%, transparent);
}

.timeline__item { position: relative; padding-bottom: 42px; }
.timeline__item:last-child { padding-bottom: 0; }

.timeline__dot {
    position: absolute;
    left: -34px;
    top: 7px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--paper-2);
    border: 1.5px solid var(--gold-500);
    transition: background-color .4s var(--ease), transform .4s var(--ease-out);
}
.timeline__item:hover .timeline__dot { background: var(--gold-400); transform: scale(1.25); }

.timeline__tag {
    display: inline-block;
    margin-bottom: 10px;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-600);
}
.timeline__item h3 { margin: 0 0 10px; font-size: 1.1875rem; }
.timeline__item p { margin: 0; font-size: .9375rem; line-height: 1.64; color: var(--text-muted); max-width: 64ch; }

/* ==========================================================================
   15 — ACCORDION
   ========================================================================== */

.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }

.accordion__btn {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 22px 0;
    text-align: left;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.012em;
    line-height: 1.42;
    color: var(--heading);
    transition: color .3s var(--ease);
}
.accordion__btn:hover { color: var(--gold-600); }

/* A plus that becomes a minus. Two bars, one rotated. */
.accordion__sign {
    position: relative;
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 5px;
}
.accordion__sign::before,
.accordion__sign::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1.5px;
    background: var(--gold-500);
    transition: transform .4s var(--ease-out), opacity .3s var(--ease);
}
.accordion__sign::after { transform: rotate(90deg); }
.accordion__btn[aria-expanded="true"] .accordion__sign::after { transform: rotate(0deg); opacity: 0; }

.accordion__panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height .46s var(--ease-out);
}
.accordion__panel.is-open { /* max-height set by script */ }
.accordion__inner {
    padding: 0 48px 26px 0;
    font-size: .9375rem;
    line-height: 1.72;
    color: var(--text-muted);
    max-width: 78ch;
}

/* ==========================================================================
   16 — SERVICE DETAIL
   ========================================================================== */

.svc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: clamp(36px, 4.5vw, 72px);
    align-items: start;
}

.svc-body { min-width: 0; }
.svc-body > h2 {
    margin-top: 2.2em;
    margin-bottom: .55em;
    font-size: clamp(1.45rem, 1.2rem + 1.1vw, 1.95rem);
    scroll-margin-top: calc(var(--head-h) + 28px);
}
.svc-body > h2:first-of-type { margin-top: 0; }
.svc-body > div[id] { scroll-margin-top: calc(var(--head-h) + 28px); }
.svc-body p { color: var(--text-muted); }

.svc-intro {
    padding-bottom: 28px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--line);
}
.svc-intro p {
    font-size: var(--t-lede);
    line-height: 1.64;
    color: var(--text);
}
.svc-intro p:first-child::first-letter {
    float: left;
    font-family: var(--font-quote);
    font-size: 3.4em;
    line-height: .86;
    padding: .04em .09em 0 0;
    color: var(--gold-500);
}

/* Prev / next */
.svc-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: clamp(44px, 5vw, 72px);
    padding-top: 30px;
    border-top: 1px solid var(--line);
}
.svc-nav__link {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    transition: border-color .36s var(--ease), transform .36s var(--ease-out);
}
.svc-nav__link:hover { border-color: var(--gold-400); transform: translateY(-2px); }
.svc-nav__link--next { text-align: right; align-items: flex-end; }

.svc-nav__dir {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-600);
}
.svc-nav__dir .icon { transition: transform .34s var(--ease-out); }
.svc-nav__link:hover .svc-nav__dir .icon { transform: translateX(-4px); }
.svc-nav__link--next:hover .svc-nav__dir .icon { transform: translateX(4px); }
.svc-nav__title { font-size: 1rem; font-weight: 600; letter-spacing: -.012em; color: var(--heading); }

/* Sidebar */
.svc-aside {
    position: sticky;
    top: calc(var(--head-h) + 20px);
    display: grid;
    gap: 18px;
}

.aside-box {
    padding: 24px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}
.aside-box--ink {
    background: var(--ink-900);
    border-color: var(--ink-900);
    color: var(--d-text);
}
.aside-box--ink .aside-box__title { color: var(--gold-400); border-bottom-color: var(--d-line); }

.aside-box__title {
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--t-label);
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-600);
}

.aside-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.aside-nav li { margin: 0; }
.aside-nav a {
    display: block;
    padding: 8px 0 8px 14px;
    border-left: 1px solid var(--line);
    font-size: .875rem;
    line-height: 1.5;
    color: var(--text-muted);
    transition: color .28s var(--ease), border-color .28s var(--ease);
}
.aside-nav a:hover { color: var(--ink-900); border-color: var(--gold-400); }
.aside-nav a.is-active {
    color: var(--ink-900);
    font-weight: 600;
    border-color: var(--gold-400);
    border-left-width: 2px;
    padding-left: 13px;
}

.hl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.hl-list li { display: flex; gap: 12px; margin: 0; }
.hl-list__mark {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--gold-50);
    color: var(--gold-600);
}
.hl-list__title { font-size: .9375rem; font-weight: 600; color: var(--heading); margin-bottom: 3px; }
.hl-list__text { font-size: .8125rem; line-height: 1.55; color: var(--text-soft); }

.aside-box--ink p { font-size: .875rem; line-height: 1.6; color: var(--d-muted); }
/* ==========================================================================
   17 — CONTACT, MAP, DIALOG
   ========================================================================== */

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(36px, 5vw, 80px);
    align-items: start;
}

.infolist { list-style: none; margin: 34px 0 0; padding: 0; border-top: 1px solid var(--line); }
.infolist li {
    display: flex;
    gap: 18px;
    margin: 0;
    padding: 20px 0;
    border-bottom: 1px solid var(--line-soft);
}
.infolist__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--gold-600);
    transition: border-color .34s var(--ease), background .34s var(--ease);
}
.infolist li:hover .infolist__icon { border-color: var(--gold-400); background: var(--gold-50); }

.infolist__label {
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-soft);
    margin-bottom: 5px;
}
.infolist__value { font-size: 1rem; font-weight: 500; line-height: 1.5; color: var(--heading); }
.infolist__value a { transition: color .28s var(--ease); }
.infolist__value a:hover { color: var(--gold-600); }

/* Form panel. A single raised surface against the paper background. */
.panel {
    padding: clamp(28px, 3.4vw, 46px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 2px solid var(--gold-400);
    border-radius: var(--radius);
    box-shadow: var(--lift-sm);
}

.map-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--grey-100);
}
.map-frame iframe {
    width: 100%;
    height: clamp(300px, 42vh, 460px);
    border: 0;
    /* The default OSM tile is very saturated next to this palette. */
    filter: grayscale(.4) contrast(1.04);
}
.map-frame__link {
    position: absolute;
    left: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    background: var(--ink-900);
    color: var(--white);
    border-radius: var(--radius);
    font-size: .8125rem;
    font-weight: 600;
    box-shadow: var(--lift);
    transition: background .3s var(--ease), color .3s var(--ease);
}
.map-frame__link:hover { background: var(--gold-400); color: var(--ink-900); }
.map-frame__link .icon { color: var(--gold-400); transition: color .3s var(--ease); }
.map-frame__link:hover .icon { color: var(--ink-900); }

/* Thank-you dialog */
.thanks {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: var(--gutter);
    background: rgba(10, 12, 14, .66);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    animation: fade-in .3s var(--ease) both;
}
.thanks[hidden] { display: none; }

.thanks__card {
    position: relative;
    width: min(440px, 100%);
    padding: clamp(32px, 4vw, 46px);
    background: var(--surface);
    border-top: 2px solid var(--gold-400);
    border-radius: var(--radius);
    box-shadow: var(--lift-lg);
    text-align: center;
    animation: dialog-in .46s var(--ease-out) both;
}
@keyframes dialog-in {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to   { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.thanks__close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    color: var(--text-soft);
    transition: color .28s var(--ease), background .28s var(--ease);
}
.thanks__close:hover { color: var(--ink-900); background: var(--paper); }

.thanks__mark {
    width: 62px;
    height: 62px;
    margin: 0 auto 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--gold-300);
    background: var(--gold-50);
}
.thanks__mark svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: var(--gold-600);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 26;
    stroke-dashoffset: 26;
    animation: tick .6s var(--ease-out) .18s forwards;
}
@keyframes tick { to { stroke-dashoffset: 0; } }

.thanks__title { margin: 0 0 12px; font-size: 1.6rem; }
.thanks__text { margin: 0 0 26px; font-size: .9375rem; color: var(--text-muted); }
.thanks__meta {
    display: block;
    margin-top: 18px;
    font-family: var(--font-mono);
    font-size: .6875rem;
    letter-spacing: .1em;
    color: var(--text-soft);
}

/* ==========================================================================
   18 — CTA BAND
   ========================================================================== */

.cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(64px, 8vw, 122px);
    background: var(--ink-950);
    color: var(--d-text);
}
.cta__media { position: absolute; inset: 0; z-index: -2; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; }
.cta__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(94deg, rgba(10,12,14,.95) 0%, rgba(10,12,14,.78) 52%, rgba(10,12,14,.55) 100%);
}
.cta .guides { z-index: -1; }

.cta__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(28px, 4vw, 64px);
    align-items: end;
}
.cta__text { max-width: 60ch; }
.cta__text .label { color: var(--gold-300); }
.cta__text .label::before { background: var(--gold-400); }
.cta__text h2 {
    color: var(--white);
    margin: 0 0 18px;
    max-width: 18ch;
    letter-spacing: -.03em;
}
.cta__text p { margin: 0; font-size: var(--t-lede); line-height: 1.6; color: rgba(255, 255, 255, .76); }

.cta__actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; min-width: 230px; }

/* ==========================================================================
   19 — FOOTER
   ========================================================================== */

.footer {
    position: relative;
    isolation: isolate;
    background: var(--ink-950);
    color: var(--d-text);
    padding-top: clamp(56px, 6vw, 88px);
    overflow: hidden;
}

/* An oversized wordmark bled off the bottom edge, at very low contrast.
   Purely a texture: it is aria-hidden and never overlaps readable text. */
.footer__wordmark {
    position: absolute;
    left: 50%;
    bottom: -.34em;
    transform: translateX(-50%);
    z-index: 0;
    font-size: clamp(5rem, 17vw, 17rem);
    font-weight: 800;
    letter-spacing: -.05em;
    line-height: .8;
    white-space: nowrap;
    color: rgba(255, 255, 255, .028);
    user-select: none;
    pointer-events: none;
}

.footer .shell { position: relative; z-index: 2; }

.footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, .85fr) minmax(0, .95fr) minmax(0, 1.25fr);
    gap: clamp(28px, 3.6vw, 60px);
    padding-bottom: clamp(44px, 5vw, 70px);
}

.footer__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.footer__brand .brand__logo { height: 52px; width: auto; }
.footer__brand-name {
    font-size: .95rem;
    font-weight: 700;
    color: var(--white);
    letter-spacing: .13em;
    text-transform: uppercase;
}
.footer__brand-sub {
    display: block;
    font-family: var(--font-mono);
    font-size: .625rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold-400);
}

.footer__about {
    margin: 0 0 24px;
    font-size: .9rem;
    line-height: 1.68;
    color: var(--d-muted);
    max-width: 44ch;
}

.footer__social { display: flex; gap: 8px; }
.footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--d-line);
    border-radius: var(--radius);
    color: var(--d-muted);
    transition: border-color .32s var(--ease), color .32s var(--ease), background .32s var(--ease);
}
.footer__social a:hover {
    border-color: var(--gold-400);
    color: var(--gold-300);
    background: rgba(201, 163, 78, .08);
}

.footer__title {
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--d-line);
    font-family: var(--font-mono);
    font-size: var(--t-label);
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-400);
}

.footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.footer__links li { margin: 0; }
.footer__links a {
    display: inline-block;
    padding: 6px 0;
    font-size: .9rem;
    color: var(--d-muted);
    transition: color .28s var(--ease), transform .28s var(--ease);
}
.footer__links a:hover { color: var(--white); transform: translateX(3px); }

.footer__contact { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 15px; }
.footer__contact li { display: flex; gap: 12px; margin: 0; font-size: .9rem; line-height: 1.55; color: var(--d-muted); }
.footer__contact .icon { flex: none; margin-top: 3px; color: var(--gold-400); }
.footer__contact a { transition: color .28s var(--ease); }
.footer__contact a:hover { color: var(--white); }

.footer__note { margin: 10px 0 0; font-size: .75rem; line-height: 1.55; color: rgba(255, 255, 255, .52); }

.footer__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding-block: 24px;
    border-top: 1px solid var(--d-line);
    font-size: .8125rem;
    color: rgba(255, 255, 255, .48);
}
.footer__bar p { margin: 0; }
.footer__bar-links { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
.footer__bar-links a { transition: color .28s var(--ease); }
.footer__bar-links a:hover { color: var(--gold-300); }
.footer__motto {
    font-family: var(--font-quote);
    font-style: italic;
    font-size: 1rem;
    color: var(--gold-400);
}

/* ==========================================================================
   19b — EXTENDED BLOCKS
   Hero furniture, the assurance band, "why us", testimonials, insights and
   the capability gallery. Each block has its own identity but draws only on
   tokens declared in section 01.
   ========================================================================== */

/* --- Hero floating panels -------------------------------------------------
   Two glass cards stacked over the open right-hand side of the photograph,
   offset from each other so they read as separate planes. They carry facts
   already stated elsewhere on the page, so nothing is lost when they are
   dropped below 1180px, where the composition has no room for them. */

.hero__float {
    position: absolute;
    right: clamp(56px, 6vw, 110px);
    top: 50%;
    transform: translateY(-46%);
    z-index: 4;
    display: grid;
    gap: 16px;
    width: clamp(236px, 21vw, 288px);
    pointer-events: none;
}

.hero__card {
    padding: 20px 22px;
    color: var(--white);
}
.hero__card:nth-child(2) {
    margin-right: clamp(22px, 2.6vw, 44px);
    margin-left: calc(-1 * clamp(22px, 2.6vw, 44px));
}

.hero__card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-family: var(--font-mono);
    font-size: .5625rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold-300);
}
.hero__card-top .icon { color: var(--gold-400); flex: none; }

.hero__card-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.03em;
    margin-bottom: 7px;
    font-variant-numeric: tabular-nums;
}
.hero__card-note {
    font-size: .8125rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .7);
}

/* --- Assurance band -------------------------------------------------------
   A short row of guarantees between two heavier sections. Deliberately low:
   it is a reassurance, not a feature grid. */

.assure {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--d-line);
    border: 1px solid var(--d-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.assure__cell {
    position: relative;
    padding: clamp(26px, 3vw, 38px) clamp(20px, 2.2vw, 30px);
    background: rgba(255, 255, 255, .025);
    transition: background-color .45s var(--ease);
}
.assure__cell:hover { background: rgba(255, 255, 255, .06); }

.assure__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    color: var(--gold-400);
    transition: border-color .42s var(--ease), box-shadow .42s var(--ease);
}
.assure__cell:hover .assure__icon {
    border-color: rgba(201, 163, 78, .55);
    box-shadow: 0 0 22px -6px rgba(201, 163, 78, .45);
}

.assure__title {
    margin: 0 0 9px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.012em;
    color: var(--white);
}
.assure__text {
    margin: 0;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--d-muted);
}

/* --- Why us ---------------------------------------------------------------
   An editorial argument rather than a card grid: a fixed statement on the
   left, and the reasons enumerated down the right with oversized numerals. */

.why {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: clamp(36px, 5vw, 86px);
    align-items: start;
}

.why__aside { position: sticky; top: calc(var(--head-h) + 40px); }
.why__figure { margin-top: clamp(26px, 3vw, 40px); }

.why__list { display: grid; }

.why__item {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(18px, 2.4vw, 34px);
    padding-block: clamp(24px, 2.8vw, 36px);
    border-top: 1px solid var(--line);
}
.why__item:last-child { border-bottom: 1px solid var(--line); }
.section--ink .why__item { border-color: var(--d-line); }

/* The numeral is drawn as an outline so it carries scale without weight. */
.why__n {
    font-family: var(--font-mono);
    font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.6rem);
    font-weight: 300;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--gold-600);
    font-variant-numeric: tabular-nums;
    transition: color .5s var(--ease);
}
.why__item:hover .why__n { color: rgba(201, 163, 78, .14); }
.section--ink .why__n { -webkit-text-stroke-color: var(--gold-400); }

.why__title {
    margin: 0 0 10px;
    font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
}
.why__text {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.66;
    color: var(--text-muted);
    max-width: 62ch;
}
.section--ink .why__text { color: var(--d-muted); }

.why__proof {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: .625rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-600);
}
.section--ink .why__proof { color: var(--gold-300); }
.why__proof::before {
    content: "";
    width: 16px;
    height: 1px;
    background: currentColor;
}

/* --- Testimonials ---------------------------------------------------------
   One quotation at a time, set large. No cards: the quotation is the design.
   Slides are stacked in the same grid cell so the block never changes height
   between them. */

.quotes { position: relative; }

.quotes__stage { display: grid; }

/* Every slide occupies the same grid cell, so switching never changes the
   block height and nothing below it jumps. The quotation and the attribution
   sit side by side rather than stacked: a single narrow column of text left
   the right half of the section empty. */
.quotes__slide {
    grid-area: 1 / 1;
    display: grid;
    /* The attribution is a fixed-width caption column; the quotation takes
       whatever is left, so the two never drift apart on a wide screen. */
    grid-template-columns: minmax(0, 1fr) clamp(210px, 20%, 280px);
    gap: clamp(26px, 3vw, 52px);
    align-items: start;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .55s var(--ease), transform .55s var(--ease-out), visibility .55s;
}
.quotes__slide.is-on { opacity: 1; visibility: visible; transform: none; }

.quotes__mark {
    display: block;
    font-family: var(--font-quote);
    font-size: clamp(4rem, 8vw, 7rem);
    line-height: .6;
    color: var(--gold-400);
    opacity: .42;
    margin-bottom: 8px;
    user-select: none;
}

.quotes__text {
    margin: 0;
    max-width: 44ch;
}

/* Attribution stacks in its own column, opened by a hairline so it reads as
   a caption rather than as a second paragraph. */
.quotes__by {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-top: 22px;
    border-top: 1px solid var(--line-strong);
}
.section--ink .quotes__by { border-top-color: var(--d-line); }
.quotes__avatar {
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line);
}
/* No photograph: a monogrammed disc rather than a broken image. */
.quotes__initials {
    width: 48px;
    height: 48px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(201, 163, 78, .5);
    background: rgba(201, 163, 78, .12);
    font-family: var(--font-mono);
    font-size: .8125rem;
    letter-spacing: .06em;
    color: var(--gold-600);
}
.quotes__name { display: block; font-size: 1rem; font-weight: 600; color: var(--heading); }
.quotes__role {
    display: block;
    font-family: var(--font-mono);
    font-size: .625rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-600);
    margin-top: 4px;
}

/* On a dark field the same block swaps to the light-ink equivalents. */
.section--ink .quotes__avatar   { border-color: var(--d-line); }
.section--ink .quotes__initials { border-color: rgba(201, 163, 78, .4); background: rgba(201, 163, 78, .1); color: var(--gold-300); }
.section--ink .quotes__name     { color: var(--d-heading); }
.section--ink .quotes__role     { color: var(--gold-300); }

.quotes__nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: clamp(30px, 4vw, 46px);
}
.quotes__dot {
    width: 30px;
    height: 2px;
    border: 0;
    padding: 0;
    background: var(--line-strong);
    cursor: pointer;
    transition: background-color .4s var(--ease), width .4s var(--ease);
}
.section--ink .quotes__dot { background: rgba(255, 255, 255, .22); }
.quotes__dot.is-on { background: var(--gold-fill); width: 48px; }

/* --- Insights -------------------------------------------------------------
   One lead article against a stacked list, the way a business title runs its
   front page. */

.insights {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .95fr);
    gap: clamp(28px, 3.4vw, 56px);
    align-items: start;
}

.lead {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    isolation: isolate;
    background: var(--ink-900);
    min-height: clamp(360px, 44vw, 500px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(26px, 3vw, 42px);
    color: var(--white);
}
.lead__media { position: absolute; inset: 0; z-index: -2; }
.lead__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.lead:hover .lead__media img { transform: scale(1.055); }
.lead__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(10,12,14,.22) 0%, rgba(10,12,14,.72) 58%, rgba(10,12,14,.94) 100%);
}
.lead__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.lead__date {
    font-family: var(--font-mono);
    font-size: .625rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}
.lead__title {
    margin: 0 0 12px;
    font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
    color: var(--white);
    max-width: 22ch;
}
.lead__text {
    margin: 0 0 20px;
    font-size: .9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .76);
    max-width: 52ch;
}

.postlist { display: grid; }
.post {
    display: grid;
    grid-template-columns: clamp(84px, 9vw, 116px) minmax(0, 1fr);
    gap: clamp(14px, 1.6vw, 22px);
    align-items: start;
    padding-block: clamp(18px, 2vw, 26px);
    border-top: 1px solid var(--line);
    transition: padding-left .45s var(--ease-out);
}
.post:first-child { border-top: 0; padding-top: 0; }
.post:hover { padding-left: 8px; }
.section--ink .post { border-color: var(--d-line); }

.post__thumb {
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    aspect-ratio: 4 / 3;
    background: var(--ink-850);
}
.post__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.post:hover .post__thumb img { transform: scale(1.07); }

.post__date {
    display: block;
    margin-bottom: 7px;
    font-family: var(--font-mono);
    font-size: .625rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-600);
}
.section--ink .post__date { color: var(--gold-300); }
.post__title {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.32;
    transition: color .34s var(--ease);
}
.post:hover .post__title { color: var(--gold-600); }
.section--ink .post:hover .post__title { color: var(--gold-300); }

/* --- Capability gallery ----------------------------------------------------
   An asymmetric photographic grid. Named areas rather than spans, so the
   composition is legible in the stylesheet and re-flows deliberately. */

.gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
        "a a b c"
        "a a d d";
    gap: clamp(10px, 1.1vw, 16px);
}
.gallery > :nth-child(1) { grid-area: a; }
.gallery > :nth-child(2) { grid-area: b; }
.gallery > :nth-child(3) { grid-area: c; }
.gallery > :nth-child(4) { grid-area: d; }

.shot {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--ink-850);
    isolation: isolate;
    min-height: 168px;
}
.shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.15s var(--ease-out);
}
.shot:hover img { transform: scale(1.06); }

.shot__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 38%, rgba(10,12,14,.78) 100%);
    opacity: .82;
    transition: opacity .5s var(--ease);
}
.shot:hover .shot__veil { opacity: 1; }

.shot__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: clamp(16px, 1.8vw, 24px);
    color: var(--white);
}
.shot__cat {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-mono);
    font-size: .5625rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-300);
}
.shot__title {
    margin: 0;
    font-size: clamp(.95rem, .88rem + .3vw, 1.125rem);
    line-height: 1.26;
    color: var(--white);
}
/* The arrow slides in from the left on hover rather than appearing. */
.shot__go {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: .8125rem;
    color: var(--gold-300);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .42s var(--ease), transform .42s var(--ease-out);
}
.shot:hover .shot__go { opacity: 1; transform: none; }

/* --- Placeholder notice ----------------------------------------------------
   Marks a block whose content is structural sample data, so it is obvious in
   the page which copy still has to be replaced. Removed the moment the
   corresponding config file holds real entries. */

.sample {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px;
    margin-bottom: 22px;
    border: 1px dashed rgba(201, 163, 78, .5);
    border-radius: 100px;
    background: rgba(201, 163, 78, .07);
    font-family: var(--font-mono);
    font-size: .625rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-600);
}
.section--ink .sample { color: var(--gold-300); }

/* ==========================================================================
   20 — MOTION
   Reveals are gated behind the .js class, which a small inline script in the
   head adds only when script is running and motion is not reduced. With no
   script the content is simply present.
   ========================================================================== */

.js .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.js .reveal.is-in { opacity: 1; transform: none; }

.js .reveal[data-delay="1"] { transition-delay: .08s; }
.js .reveal[data-delay="2"] { transition-delay: .16s; }
.js .reveal[data-delay="3"] { transition-delay: .24s; }
.js .reveal[data-delay="4"] { transition-delay: .32s; }
.js .reveal[data-delay="5"] { transition-delay: .4s; }
.js .reveal[data-delay="6"] { transition-delay: .48s; }

/* Hero entrance. Pure CSS, runs on load rather than on observation, because
   the hero is above the fold on every viewport. */
.js .hero__line > span,
.js .hero__eyebrow,
.js .hero__lede,
.js .hero__actions,
.js .hero__strip {
    animation: hero-rise 1.05s var(--ease-out) both;
}
.js .hero__eyebrow          { animation-delay: .12s; }
.js .hero__line:nth-child(1) > span { animation-delay: .2s; }
.js .hero__line:nth-child(2) > span { animation-delay: .32s; }
.js .hero__lede             { animation-delay: .46s; }
.js .hero__actions          { animation-delay: .58s; }
.js .hero__strip            { animation-delay: .7s; }

@keyframes hero-rise {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: none; }
}
/* The non-line elements slide a shorter distance; they are not clipped. */
.js .hero__eyebrow,
.js .hero__lede,
.js .hero__actions,
.js .hero__strip { animation-name: hero-fade; }
@keyframes hero-fade {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}

/* Anything that zooms an image on hover. */
.zoom img { transition: transform 1.2s var(--ease-out); }
.zoom:hover img { transform: scale(1.055); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .hero__media { transform: none; }
    .hero__shot.is-on { transform: scale(1.03); }
}
/* ==========================================================================
   21 — RESPONSIVE
   Each breakpoint re-lays-out rather than rescaling. The order below runs
   widest to narrowest so later rules always win for smaller screens.

     1500  large desktop   — widen the shell, let the hero breathe
     1180  laptop          — mega menu to 3 columns, product grid to 3
     1080  tablet landscape— primary nav becomes the drawer
      900  tablet portrait — splits stack, division rows re-flow
      680  mobile          — single column throughout
      420  small mobile    — trim padding and type
   ========================================================================== */

@media (min-width: 1500px) {
    :root { --shell: 1400px; }
    .hero { min-height: min(100svh, 1020px); }
}

/* --- Laptop ------------------------------------------------------------- */
@media (max-width: 1180px) {
    .mega { padding: 30px 30px 24px; }
    .mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 26px; }

    .lineup__register { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* The floating thumbnail collides with the meta column below this width. */
    .divrow__thumb { display: none; }
    .divrow { grid-template-columns: auto minmax(0, 26%) minmax(0, 1fr) auto; }

    .standards__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .svc-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 280px); }
}

/* --- Tablet landscape: hand navigation to the drawer -------------------- */
@media (max-width: 1080px) {
    :root { --head-h: 70px; }

    .nav__menu { display: none; }
    .burger { display: inline-flex; }
    .nav__cta { display: none; }

    /* The utility bar keeps phone and email reachable but drops the hours. */
    .topbar__list .is-optional { display: none; }

    .contact-grid { grid-template-columns: minmax(0, 1fr); }
    .contact-grid > :first-child { order: 2; }

    .svc-layout { grid-template-columns: minmax(0, 1fr); }
    .svc-aside {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
    .aside-box--nav { grid-column: 1 / -1; }
}

/* --- Tablet portrait ---------------------------------------------------- */
@media (max-width: 900px) {
    .split,
    .split--aside,
    .split--even { grid-template-columns: minmax(0, 1fr); }
    .split--flip > :first-child { order: 0; }

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

    .lineup__featured { grid-template-columns: minmax(0, 1fr); }
    .lineup__register { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero__facts > div { border-left: 0; padding-inline: 0; }
    .hero__facts > div:nth-child(even) { padding-left: clamp(16px, 4vw, 30px); border-left: 1px solid rgba(255,255,255,.11); }
    .hero__facts > div:nth-child(n + 3) { border-top: 1px solid rgba(255,255,255,.11); }
    .hero__rail { display: none; }

    .readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .readout__cell { border-left: 0; padding-inline: 0; }
    .readout__cell:nth-child(even) { padding-left: clamp(16px, 4vw, 28px); border-left: 1px solid rgba(255,255,255,.11); }
    .readout__cell:nth-child(n + 3) { border-top: 1px solid rgba(255,255,255,.11); margin-top: 26px; }

    /* Division rows become a stacked index: number and name on one line,
       blurb beneath, meta on the right of the first line. */
    .divrow {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "n name meta"
            ".  blurb blurb";
        gap: 6px 16px;
        align-items: center;
    }
    .divrow__n     { grid-area: n; }
    .divrow__name  { grid-area: name; }
    .divrow__meta  { grid-area: meta; }
    .divrow__blurb { grid-area: blurb; margin-top: 6px; }
    .divrow:hover  { padding-left: 0; }

    .cta__inner { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .cta__actions { flex-direction: row; flex-wrap: wrap; min-width: 0; }
    .cta__actions .btn { flex: 1 1 200px; }

    .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; }
    .footer__grid > :first-child { grid-column: 1 / -1; }

    .collage { padding-right: 0; padding-bottom: 42px; }
    .collage__inset { width: 46%; }

    .shead { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .shead__n { padding-top: 0; }
    .shead__n::after { display: none; }
    .shead--split { grid-template-columns: minmax(0, 1fr); }

    .svc-intro p:first-child::first-letter { font-size: 3.1em; }
}

/* --- Mobile ------------------------------------------------------------- */
@media (max-width: 680px) {
    :root {
        --t-body: 1rem;
        --space-section: clamp(58px, 13vw, 84px);
        --space-tight: clamp(44px, 10vw, 62px);
    }

    .topbar { display: none; }
    .hero,
    .pagehead { padding-top: calc(var(--head-h) + clamp(44px, 12vh, 78px)); }

    .hero { min-height: auto; padding-bottom: 0; }
    .hero__inner { padding-bottom: clamp(36px, 8vh, 56px); }
    .hero__title { max-width: 14ch; }
    .hero__watermark { display: none; }
    .hero__actions .btn { flex: 1 1 100%; }

    .hero__facts { grid-template-columns: minmax(0, 1fr); }
    .hero__facts > div,
    .hero__facts > div:nth-child(even) {
        padding: 16px 0;
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.11);
    }
    .hero__facts > div:first-child { border-top: 0; }

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

    .lineup__foot { flex-direction: column; align-items: flex-start; }
    .lineup__foot .btn { width: 100%; }

    .readout,
    .readout__cell,
    .readout__cell:nth-child(even) { grid-template-columns: minmax(0, 1fr); border-left: 0; padding-left: 0; }
    .readout__cell { border-top: 1px solid rgba(255,255,255,.11); padding-top: 24px; margin-top: 0; }
    .readout__cell:first-child { border-top: 0; padding-top: 28px; }

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

    .divrow {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "n name"
            ". blurb"
            ". meta";
        padding-block: 22px;
    }
    .divrow__meta { justify-content: flex-start; margin-top: 10px; }

    .svc-aside { grid-template-columns: minmax(0, 1fr); }
    .svc-nav { grid-template-columns: minmax(0, 1fr); }
    .svc-nav__link--next { text-align: left; align-items: flex-start; }
    .svc-intro p:first-child::first-letter { font-size: 2.8em; }

    .speclist li { grid-template-columns: minmax(0, 1fr); gap: 5px; }

    .accordion__inner { padding-right: 0; }
    .accordion__btn { font-size: 1rem; gap: 14px; }

    .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .footer__bar { flex-direction: column; align-items: flex-start; gap: 12px; }
    .footer__bar-links { gap: 16px; }

    .timeline { padding-left: 26px; }
    .timeline__dot { left: -26px; }

    .btn { padding: 15px 24px; }
    .to-top { width: 42px; height: 42px; }

    .collage { padding-bottom: 36px; }
    .collage__badge { position: static; margin-top: 16px; }
}

/* --- Small mobile -------------------------------------------------------- */
@media (max-width: 420px) {
    :root {
        --t-display: clamp(2.25rem, 8.6vw, 2.75rem);
        --gutter: 18px;
    }

    /* The lockup starts crowding the burger here: drop the LLC line first,
       and tighten the gap rather than shrinking the mark further. */
    .brand { gap: 10px; }
    .brand__sub { display: none; }
    .brand__name { font-size: .78rem; letter-spacing: .1em; }

    .hero__eyebrow { gap: 9px; font-size: .5625rem; letter-spacing: .16em; }
    .hero__title { max-width: none; }

    .standards__list { grid-template-columns: minmax(0, 1fr); }
    .panel { padding: 24px 20px; }
    .card { padding: 24px 20px 20px; }
    .pcard { padding: 24px 20px; }
    .aside-box { padding: 20px 18px; }
    .drawer__panel { width: 100%; }
    .thanks__card { padding: 28px 22px; }
}

/* Coarse pointers get no hover-only affordances, because a tap that has to
   land twice reads as a broken link. */
@media (hover: none) {
    .divrow__thumb { display: none; }
    .btn:hover::before { transform: scaleX(0); }
    .btn:hover { color: inherit; }
    .btn--gold:hover { color: var(--ink-900); }
    .btn--light:hover { color: var(--white); }
    .btn:active::before { transform: scaleX(1); }
    .btn--gold:active { color: var(--gold-200); }
    .btn--light:active { color: var(--ink-900); }
}


/* ==========================================================================
   21b — RESPONSIVE: EXTENDED BLOCKS
   Same widest-to-narrowest order as section 21.
   ========================================================================== */

@media (max-width: 1180px) {
    /* The floating panels need open photograph beside the headline; below
       this the headline claims that space. Everything they state is repeated
       in the facts strip, so nothing is lost. */
    .hero__float { display: none; }
}

@media (max-width: 1080px) {
    .insights { grid-template-columns: minmax(0, 1fr); }
    .assure { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .quotes__slide { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .quotes__text { max-width: 34ch; }

    .why { grid-template-columns: minmax(0, 1fr); }
    .why__aside { position: static; }
    .why__figure { margin-top: 26px; }

    .gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "a a"
            "b c"
            "d d";
    }
    .shot { min-height: 210px; }
    .quotes__text { max-width: none; }
}

@media (max-width: 680px) {
    .assure { grid-template-columns: minmax(0, 1fr); }

    .gallery {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "a" "b" "c" "d";
    }
    .shot { min-height: 240px; }

    .post { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
    .post:hover { padding-left: 0; }
    .post__title { font-size: 1rem; }

    .lead { min-height: 320px; }

    .why__item { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .why__n { font-size: 1.5rem; }

    /* The offset outline needs room either side to read as a second plane.
       At this width it just crowds the gutter, so it is dropped. */
    .layered::before { display: none; }

    .quotes__nav { flex-wrap: wrap; }
    .divider { margin-block: clamp(36px, 9vw, 52px); }
}

@media (max-width: 420px) {
    .quotes__by { flex-wrap: wrap; gap: 12px; }
    .hero__card { padding: 16px 18px; }
}

/* ==========================================================================
   22 — PRINT
   Strip the chrome, drop the dark fields, keep the content readable.
   ========================================================================== */

@media print {
    .site-head,
    .drawer,
    .to-top,
    .cta,
    .footer__social,
    .footer__form,
    .subscribe,
    .map-frame,
    .hero__watermark,
    .guides,
    .frame,
    .rail,
    .footer__wordmark,
    .thanks { display: none !important; }

    html, body { background: #fff !important; color: #000 !important; }

    .hero,
    .pagehead,
    .section--ink,
    .footer {
        background: #fff !important;
        color: #000 !important;
        padding-block: 18pt !important;
    }
    .hero__media,
    .hero__veil,
    .pagehead__media,
    .pagehead__veil,
    .section__media,
    .section__veil { display: none !important; }

    .hero__title,
    .pagehead h1,
    .section--ink h2,
    .section--ink h3,
    .readout__value,
    .footer__title { color: #000 !important; }

    .hero__lede,
    .pagehead__lede,
    .section--ink .lede,
    .readout__note { color: #333 !important; }

    a { text-decoration: underline; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
    a[href^="#"]::after,
    a[href^="mailto"]::after,
    a[href^="tel"]::after { content: ""; }

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

    .card, .pcard, .panel, .aside-box, .table-scroll {
        border: 1px solid #bbb !important;
        box-shadow: none !important;
        break-inside: avoid;
    }
    h1, h2, h3 { break-after: avoid; }
    img { max-height: 240pt; }
}