/* ============================================================================
   LUNCH & LEARN LANDING PAGE - site.css
   The WEB layer on top of Triumph Design System v2.

   Everything here is composed from v2 tokens (tokens.css) - no colors outside
   the 7-color Brandpad palette and its sanctioned derivations. The v2 atoms
   (.eyebrow / .label / .pill / .stat__* / .detail-* / .accent-rule / .logo-*)
   are used as-is; this file only supplies the page chrome a web page needs and
   a flyer does not: nav, sections, cards, buttons, tables.
   Link order: tokens -> pattern -> logos -> components -> site.

   v2 --text-* are clamps tuned for ~1080px promo canvases, so the scale is
   re-pointed once on :root for screen density. That is the sanctioned override
   (SKILL.md); colors, fonts, pattern classes and atoms stay untouched.

   ---------------------------------------------------------------------------
   COMPOSITION: FIVE MOVEMENTS, NOT NINE SECTIONS. Read this before editing.
   ---------------------------------------------------------------------------
   The page failed twice on the same false choice: strict navy/fog alternation
   produced a nine-beat metronome, and breaking the metronome produced runs of
   bare fog. Both are recorded hard rules, so neither could be traded away.

   It is a false choice, and the design system already answers it. On
   design.greenvilletriumph.club the weave is a WRAPPER SPANNING SECTIONS -
   `<div class="weave weave--navy">` holds the hero AND Start, commented "ONE
   continuous woven field across hero + Start". And 08 · Pattern: "Separate two
   adjacent same-colour sections with a hairline rule, not with a new
   background colour."

   So a BAND is not a SECTION. The page is five MOVEMENTS (.field), each ONE
   continuous weave field, strictly alternating navy / fog / navy / fog / navy.
   Inside a movement, sections (.band) are separated by a hairline and share the
   surface - legal, because the field is continuous, so the motif does NOT
   restart and cannot jump across the seam (which is the actual defect a
   hairline alone never fixed). Every band carries the weave: same asset, same
   method, same scale, same tilt; only colourway and opacity differ.

   The movements are sized UNEQUALLY on purpose - roughly 1050 / 620 / 1750 /
   1800 / 800px at desktop. Five unequal movements cannot read as a metronome;
   nine equal ones always will. Every movement stays under ~1.19x the viewport
   width so `cover` holds the motif scale identical across all of them.

   1 · navy  The invitation ....... hero + the four dates
   2 · fog   The hour ............. the format (shortest movement, a quick beat)
   3 · navy  The audience ......... stats, the attendance panel, reach
   4 · fog   The building ......... venue, ways to partner, the Foundation
   5 · navy  The ask .............. mission, CTA, contact, footer

   AND VARY THE HEAD. Nine identical section heads were the real sameness cue,
   not the backgrounds. No two heads on this page share a shape: Fabiola hero /
   head beside a wide lede / head beside a 2x2 of giant numbers / head beside
   the capability chips / split head with a ruled list / a bare mission line.
   Two surfaces only - Upstate Fog and navy. No third tone, no Deep Night
   footer: the footer is the last strip of movement 5, inside the navy field.
   ========================================================================== */

:root {
  /* Web-density type scale (re-point only; the atoms read these) */
  /* Fabiola Capitals sets ~3.5px of width per 1px of font-size, so the poster
     clamp has to run high for "Lunch & Learn" to actually reach across the
     canvas (09 · Craft 02). At 1440 this lands the H1 at ~770px of the 1180
     wrap; it still fits on one line at 320px. */
  --text-hero:  clamp(3rem, 0.5rem + 14.5vw, 15rem);
  --text-title: clamp(1.875rem, 1.4rem + 2vw, 3.125rem);
  --text-xl:    clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --text-lg:    1.3125rem;
  --text-md:    1.125rem;
  --text-body:  1.0625rem;   /* 17px */
  --text-sm:    0.9375rem;   /* 15px - was 14 */
  --text-label: 0.8125rem;   /* 13px - was 12 */
  --text-xs:    0.8125rem;   /* 13px - was 11. Nothing on this page goes below 13. */

  /* Derived neutrals (all straight from the palette, nothing new) */
  --panel:      #ffffff;
  --ink-quiet:  #5a7089;          /* same quiet ink components.css already uses */
  --rule:       rgba(0, 40, 85, .12);
  --rule-soft:  rgba(0, 40, 85, .07);
  --rule-navy:  rgba(255, 255, 255, .16);
  /* v2's --ink-muted-navy (#9db6d0) is tuned for FLAT navy. Over the weave
     field it drops below comfortable reading contrast, so every piece of small
     copy on navy uses this brighter ink instead. */
  --ink-soft-navy: #cfe0f0;
  --nav-h:      64px;
}

html { scroll-behavior: smooth; }
body {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  background: var(--surface-light);
  color: var(--ink-body);
}
img { max-width: 100%; }
a  { color: var(--navy); text-decoration-color: var(--green); text-underline-offset: 3px; }
a:hover { color: var(--green); }
.tnum { font-variant-numeric: tabular-nums; }
/* <hr> carries a UA margin-inline:auto that centres the accent rule. Kill it once. */
hr.accent-rule { margin: 0 0 var(--space-4); }

/* ---- Layout -------------------------------------------------------------- */
.wrap { width: min(1180px, calc(100% - 2 * var(--space-5))); margin-inline: auto; }

/* ---- THE MOVEMENT (.field) and the sections inside it (.band) -------------
   .field IS the .weave element, so ONE continuous field spans every band in
   the movement. Never move .weave down onto .band: that restarts the field per
   section and the motif visibly jumps across the seam. */
.field--navy { background: var(--navy); color: var(--ink-on-navy); }
.field--fog  { background: var(--fog); }

.band { padding: var(--space-9) 0; }
.band + .band { border-top: 1px solid var(--rule); padding-top: var(--space-8); }
.field--navy .band + .band { border-top-color: var(--rule-navy); }
.band--tight { padding-top: var(--space-7); padding-bottom: var(--space-7); }

/* ---- Top bar ------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(242, 250, 250, .93);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.nav-brand { display: flex; align-items: center; gap: var(--space-4); text-decoration: none; }
.nav-brand img { height: 26px; width: auto; display: block; }
.nav-brand span {
  font-weight: 700; font-size: var(--text-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-body);
  padding-left: var(--space-4); border-left: 1px solid var(--rule);
}
.nav-links { display: flex; align-items: center; gap: var(--space-5); }
.nav-links a {
  font-weight: 600; font-size: var(--text-sm); color: var(--ink-body); text-decoration: none;
}
.nav-links a:hover { color: var(--green); }
@media (max-width: 900px) { .nav-links .nav-hide { display: none; } }

/* ---- Buttons - sharp, brand-colored, restrained -------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: 800;
  font-size: var(--text-label); letter-spacing: var(--track-label); text-transform: uppercase;
  line-height: 1; padding: 14px 22px; border: 1.5px solid transparent;
  border-radius: var(--radius); text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--sm { padding: 10px 16px; }
.btn--grad   { background: var(--grad-hero); color: var(--navy); }
.btn--grad:hover { color: var(--navy); }
.btn--wire   { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn--wire:hover  { background: var(--navy); color: var(--ink-on-navy); }
.btn--wire-light { border-color: rgba(255,255,255,.5); color: var(--ink-on-navy); background: transparent; }
.btn--wire-light:hover { background: var(--ink-on-navy); color: var(--navy); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ============================================================================
   MOVEMENT 1 · navy · THE INVITATION
   Hero head is an axis break: crest hard left, kicker hard right. The H1 then
   runs the FULL canvas width (Craft 02, "use the whole canvas" / "let a hero
   word run full bleed"), with the lede and the facts side by side beneath it.
   ========================================================================== */
.hero-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap;
}
.hero .logo-crest-white { height: 92px; }
.hero h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-hero); line-height: var(--leading-hero);
  letter-spacing: var(--track-hero); color: var(--ink-on-navy);
  margin: var(--space-6) 0 0;
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
  /* "Lunch & Learn" is a multi-word phrase and never breaks one word per line
     (09 · Craft 03). The clamp is sized so it fits on one line at every width. */
  white-space: nowrap;
}
.hero-body {
  display: grid; gap: var(--space-7) var(--space-8);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start; margin-top: var(--space-7);
}
.hero-lede { max-width: 46ch; margin: 0; font-size: var(--text-xl); color: var(--ink-on-navy); font-weight: 500; line-height: 1.35; }
.hero .btn-row { margin-top: var(--space-6); }

/* The four facts: a 2x2 block on the right shoulder of the hero, ruled, not boxed. */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-6); }
.facts > div { border-top: 1px solid var(--rule-navy); padding-top: var(--space-3); }
.f-label {
  font-weight: 700; font-size: var(--text-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--lime); margin: 0;
}
.f-value { font-weight: 800; font-size: var(--text-lg); line-height: 1.15; color: var(--ink-on-navy); margin: var(--space-2) 0 0; }
.f-value small { display: block; font-weight: 500; font-size: var(--text-sm); color: var(--ink-soft-navy); margin-top: var(--space-1); }

/* Schedule strip - a timetable row, not four cards. Sits inside movement 1. */
.date-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
              border-top: 3px solid var(--lime); margin-top: var(--space-6); }
.date-strip > div { padding: var(--space-5) var(--space-5) 0 0; border-right: 1px solid var(--rule-navy); }
.date-strip > div:last-child { border-right: 0; }
.d-day  { display: block; font-weight: 900; font-size: 1.875rem; line-height: 1.05;
          letter-spacing: -0.02em; color: var(--ink-on-navy); }
.d-dow  { display: block; margin-top: var(--space-2); font-weight: 700;
          font-size: var(--text-label); letter-spacing: var(--track-label);
          text-transform: uppercase; color: var(--lime); }
.d-time { display: block; margin-top: var(--space-1); font-size: var(--text-body); color: var(--ink-soft-navy); }
.date-strip .pill { margin-top: var(--space-4); white-space: nowrap; }

/* ============================================================================
   SECTION HEADS - every one is a DIFFERENT shape. See the note at the top.
   ========================================================================== */
.sec-head h2 {
  font-family: var(--font-body); font-weight: 900;
  font-size: var(--text-title); line-height: var(--leading-tight);
  letter-spacing: -0.02em; color: var(--ink); margin: var(--space-3) 0 0;
  text-wrap: balance;
}
/* :not(.eyebrow) - an element+class selector outranks .eyebrow and would
   otherwise repaint the green kicker in body ink. */
.sec-head p:not(.eyebrow) { font-size: var(--text-md); color: var(--ink-body); margin: var(--space-4) 0 0; max-width: 54ch; }
.sub-head {
  font-weight: 700; font-size: var(--text-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-quiet); margin: 0 0 var(--space-4);
}

/* Head shape A: title left, lede right, baselines aligned (movement 2). */
.head-wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
             gap: var(--space-5) var(--space-8); align-items: end; margin-bottom: var(--space-7); }
.head-wide .sec-head p:not(.eyebrow) { margin: 0; }

/* Head shape B: head left, a payload block right (movements 3 and 4). */
.head-aside { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
              gap: var(--space-7) var(--space-8); align-items: start; margin-bottom: var(--space-7); }
.head-aside--end { align-items: end; }

/* Head shape C: head left, a ruled list right, no head margin (movement 4). */
.split-head { display: grid; gap: var(--space-7) var(--space-8);
              grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }

@media (max-width: 900px) {
  .hero-body, .head-wide, .head-aside, .split-head { grid-template-columns: 1fr; }
  .head-wide, .head-aside { align-items: start; }
}

/* ============================================================================
   MOVEMENT 2 · fog · THE HOUR - numbered steps, no boxes. Shortest movement.
   ========================================================================== */
.steps { display: grid; gap: var(--space-6) var(--space-7);
         grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.step { border-top: 3px solid var(--green); padding-top: var(--space-4); }
.step__n { font-weight: 900; font-size: 1.75rem; line-height: 1; color: var(--green);
           font-variant-numeric: tabular-nums; }
.step h3 { font-weight: 800; font-size: var(--text-lg); line-height: 1.2;
           color: var(--ink); margin: var(--space-3) 0 0; }
.step p  { margin: var(--space-3) 0 0; font-size: var(--text-body); color: var(--ink-body); }

/* ============================================================================
   MOVEMENT 3 · navy · THE AUDIENCE
   The numbers ARE the headline here, so they sit at display scale straight on
   the field beside the head. Big type over the weave reads fine; it is SMALL
   type that does not, and all of that rides a solid panel below.
   ========================================================================== */
.statrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-7); }
.statrow > div { border-top: 3px solid var(--lime); padding-top: var(--space-4); }
.statrow .stat__num {
  font-weight: 900; font-size: clamp(2.5rem, 1.7rem + 2.6vw, 4rem); line-height: .95;
  letter-spacing: -0.03em; color: var(--ink-on-navy);
}
.statrow .stat__num--accent { color: var(--lime); }
.statrow .stat__label {
  font-weight: 600; font-size: var(--text-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-soft-navy); margin-top: var(--space-3);
}

/* The blocker panel. On navy it stays NAVY: it exists to hold the field off the
   dense copy, not to become a card. (design site: "no pattern running behind
   white text without a panel under it".) */
.panel { background: var(--panel); border: 1px solid var(--rule); border-top: 4px solid var(--green); padding: var(--space-5); }
.field--navy .panel {
  background: var(--navy); border: 1px solid var(--rule-navy); border-top-width: 1px;
  padding: var(--space-6) var(--space-7);
}
.panel-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--space-7) var(--space-8); }
@media (max-width: 900px) { .panel-split { grid-template-columns: 1fr; } }

/* Geography figures - a ruled list inside the panel, not five more boxes. */
.figs > div { border-top: 1px solid var(--rule-navy); padding: var(--space-4) 0 0; margin-top: var(--space-4); }
.figs > div:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.fig-v { display: block; font-weight: 900; font-size: 1.875rem; line-height: 1; letter-spacing: -0.02em; color: var(--ink-on-navy); }
.fig-l { display: block; margin-top: var(--space-2); font-weight: 700; font-size: var(--text-label);
         letter-spacing: var(--track-label); text-transform: uppercase; color: var(--lime); }
.fig-f { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--ink-soft-navy); }

/* Reach - a five-up horizontal strip. Horizontal before stacked (09 · Craft). */
.reach { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-6); }
.reach > div { border-top: 1px solid var(--rule-navy); padding-top: var(--space-4); }
.reach h3 { font-weight: 700; font-size: var(--text-label); letter-spacing: var(--track-label);
            text-transform: uppercase; color: var(--lime); margin: 0; }
.reach p  { margin: var(--space-3) 0 0; font-size: var(--text-sm); line-height: 1.5; color: var(--ink-soft-navy); }
.reach b  { color: var(--ink-on-navy); font-weight: 800; }

/* ============================================================================
   MOVEMENT 4 · fog · THE BUILDING, THE PARTNERSHIP, THE FOUNDATION
   ========================================================================== */
/* The only card row on the page. One shell, no variants. */
.grid-3 { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.card {
  background: var(--panel); border: 1px solid var(--rule);
  border-top: 4px solid var(--green); padding: var(--space-5);
}
.card h3 {
  font-family: var(--font-body); font-weight: 800; font-size: var(--text-lg);
  line-height: 1.15; color: var(--ink); margin: 0;
}
.card p { margin: var(--space-3) 0 0; font-size: var(--text-body); color: var(--ink-body); }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.chip {
  font-weight: 600; font-size: var(--text-body); color: var(--ink-body);
  background: var(--mist); padding: 9px 15px; border-radius: var(--radius);
}

/* Ruled list beside a split head. */
.waylist > div { border-top: 1px solid var(--rule); padding: var(--space-5) 0; }
.waylist > div:first-child { border-top: 0; padding-top: 0; }
.waylist h3 { font-weight: 800; font-size: var(--text-lg); color: var(--ink); margin: 0; }
.waylist p  { margin: var(--space-2) 0 0; font-size: var(--text-body); color: var(--ink-body); }

/* Programmes as definition entries, not six boxes. */
.deflist { display: grid; gap: var(--space-6) var(--space-8);
           grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.deflist > div { border-top: 1px solid var(--rule); padding-top: var(--space-4); }
.deflist h3 { font-weight: 800; font-size: var(--text-md); color: var(--ink); margin: 0; }
.deflist p  { margin: var(--space-2) 0 0; font-size: var(--text-body); color: var(--ink-body); }

/* ============================================================================
   MOVEMENT 5 · navy · THE ASK
   ========================================================================== */
/* "One Fabiola moment. Inter does the work." (design.greenvilletriumph.club,
   11 · Anti-patterns: "Fabiola weight 400, hero only" / "Don't: Fabiola on
   h2/h3"). The hero H1 IS that one moment, so the mission line is Inter - NOT
   the v2 `.tagline` atom, which is Fabiola and would be a second display font. */
.mission-line {
  /* 30ch + balance breaks this into two multi-word lines. A 22ch measure left
     "Upstate." alone on line two, which is the single-word stack 09 · Craft 03
     bans. */
  max-width: 30ch; margin: var(--space-5) 0 0;
  font-family: var(--font-body); font-weight: 900;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); line-height: 1.05;
  letter-spacing: -0.02em; color: var(--ink-on-navy); text-wrap: balance;
}
.close-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
              gap: var(--space-7) var(--space-8); align-items: end; margin-top: var(--space-6); }
@media (max-width: 900px) { .close-body { grid-template-columns: 1fr; align-items: start; } }
.close-lede { max-width: 54ch; margin: 0; font-size: var(--text-md); color: var(--ink-soft-navy); }
.close-body .btn-row { margin-top: var(--space-6); }
.contact { display: grid; gap: var(--space-5); }
.contact .c-name { font-weight: 800; font-size: var(--text-lg); color: var(--ink-on-navy); }
.contact .c-role {
  font-weight: 700; font-size: var(--text-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--lime); margin-top: var(--space-1);
}
.contact .c-line { font-size: var(--text-body); color: var(--ink-soft-navy); margin-top: var(--space-3); }
.contact .c-line a { color: var(--ink-on-navy); text-decoration-color: var(--lime); }
.contact .c-line a:hover { color: var(--lime); }
.contact .logo-wordmark { width: 220px; }

/* Footer is the last strip of movement 5, inside the navy field - so the page
   holds to TWO surfaces exactly. A Deep Night footer would be a third tone. */
.band--foot { padding: var(--space-6) 0; }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); }
.foot .logo-gevp-h { width: 210px; }
.foot-meta { font-size: var(--text-sm); letter-spacing: .02em; color: var(--ink-soft-navy); }
.foot-meta a { color: var(--ink-soft-navy); text-decoration-color: var(--lime); }
.foot-meta a:hover { color: var(--lime); }

/* ---- Tables -------------------------------------------------------------- */
.t-scroll { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: var(--text-body); }
table.t th {
  text-align: left; font-weight: 700; font-size: var(--text-label);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-quiet);
  padding: 0 var(--space-4) var(--space-3) 0; border-bottom: 2px solid var(--navy);
  white-space: nowrap;
}
table.t td {
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  border-bottom: 1px solid var(--rule-soft); color: var(--ink-body); vertical-align: top;
}
table.t td:last-child, table.t th:last-child { padding-right: 0; }
table.t .num { text-align: right; font-weight: 800; color: var(--ink); white-space: nowrap; }
table.t b { color: var(--ink); font-weight: 800; }
.t-note { font-size: var(--text-sm); color: var(--ink-quiet); margin: var(--space-4) 0 0; line-height: 1.55; }

.field--navy table.t th { color: var(--ink-soft-navy); border-bottom-color: rgba(255,255,255,.45); }
.field--navy table.t td { color: var(--ink-soft-navy); border-bottom-color: rgba(255,255,255,.14); }
.field--navy table.t b, .field--navy table.t .num { color: var(--ink-on-navy); }
.field--navy .sub-head { color: var(--ink-muted-navy); }
.field--navy .t-note   { color: var(--ink-muted-navy); }
.field--navy .sec-head h2 { color: var(--ink-on-navy); }
.field--navy .sec-head p:not(.eyebrow) { color: var(--ink-soft-navy); }
.field--navy .eyebrow { color: var(--lime); }

/* ---- THE WEAVE ------------------------------------------------------------
   VERBATIM from the design system's CANONICAL rule: components.css section
   `4d · WEAVE`, "Ruling 2026-08-04, after the Lunch & Learn landing page".
   Do not re-derive this. If it needs to change, change the design system
   first, then copy it back down here.

     - The asset is a finished pattern PANEL cropped from the interior of the
       11812px master, NOT a tile, so it is placed ONCE with cover / no-repeat.
     - `cover` holds the motif scale identical across bands for any band
       shorter than ~1.19x the viewport width. Every movement here is.
     - Colourway and opacity are the ONLY things that differ between surfaces.
     - NEVER repeat-tile, never shrink background-size, never step it down at
       mobile, never a light-surface watermark, never mix treatments, never
       leave one band bare. `.brand-field` / `.brand-zone` are DEPRECATED.
     - The -8deg tilt is the house default and it is WANTED. */
.weave { position: relative; isolation: isolate; overflow: hidden; }
.weave > * { position: relative; z-index: 1; }
.weave::before {
  content: '';
  position: absolute;
  /* Overscan so the tilt can never drag a bare corner into view. vw, NOT %:
     a percent inset resolves against the BAND'S OWN HEIGHT, so it starves on
     a short strip and leaves bare wedges at the corners. >= width x tan(tilt)/2,
     ~7vw at -8deg; 12vw carries a safe margin at every width. */
  inset: calc(-1 * var(--weave-overscan, 12vw));
  background-position: center center;
  background-size: cover;               /* ONE field. Never `repeat`, never a px size. */
  background-repeat: no-repeat;
  transform: rotate(var(--weave-tilt, -8deg));   /* the house tilt - keep it */
  transform-origin: center;
  pointer-events: none;
  z-index: 0;
}
/* Square variant. Opt in deliberately, then use it on EVERY band of the page. */
.weave--flat::before { inset: 0; transform: none; }
.weave--light::before { background-image: url("images/brand/triumph-pattern-field.png");       opacity: 0.07; }
.weave--navy::before  { background-image: url("images/brand/triumph-pattern-field-white.png"); opacity: 0.09; }

/* ---- Small screens ------------------------------------------------------- */
@media (max-width: 640px) {
  /* The weave scale is deliberately NOT reduced here. Size is not a knob. */
  .band { padding: var(--space-8) 0; }
  .band + .band { padding-top: var(--space-7); }
  .hero .logo-crest-white { height: 68px; }
  .facts { grid-template-columns: 1fr; }
  .statrow { grid-template-columns: 1fr; }
  .field--navy .panel { padding: var(--space-5); }
  .btn { padding: 13px 18px; }
}

/* Below this the wordmark + full CTA no longer fit one row and the nav would
   widen the whole document. Drop the section label, tighten the CTA. */
@media (max-width: 560px) {
  .nav-in { gap: var(--space-3); }
  .nav-brand span { display: none; }
  .nav-brand img { height: 22px; }
  .nav .btn { font-size: var(--text-xs); letter-spacing: .07em; padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover { transform: none; }
}