/* ==========================================================================
   T3 Services Group — Homepage, DIRECTION C  (index.html)
   Hybrid. Direction B's open, light, trust-led system is the BASE; a clearly
   marked Direction A layer at the foot of this file adds the dark hero and
   story bands, the blueprint/bracket geometry, stronger orange accents, and
   the graded photography treatment.
   Read top-to-bottom: base first, A-layer overrides last.
   ========================================================================== */

:root {
  /* Brand palette (brief §Color System) — light-led application */
  --navy:        #0E1A2B;   /* Authoritative Navy — now the primary text/structure */
  --ink:         #1A1A1D;   /* Deep Foundation — reserved for CTA text + footer   */
  --orange:      #FF5722;   /* Modern Activation — CTAs only                      */
  --neutral:     #F7F7F8;   /* Soft Neutral — alternating bands                   */
  --white:       #FFFFFF;
  --gray:        #8A8F98;   /* Muted Gray — on dark only                          */

  /* AA-safe derivations */
  --orange-hi:   #FF7043;
  /* Filled CTA. Near-black on #FF5722 passes WCAG (5.5:1) but scores APCA Lc 44
     — below even the large-text floor — so it reads muddy. White on this deeper
     tone is 5.2:1 WCAG *and* APCA Lc 80. Vivid #FF5722 stays the accent colour
     for rules, dots, icons and other non-text graphics. */
  --orange-cta:       #C2410C;
  --orange-cta-hover: #A83607;
  --orange-deep: #C2410C;   /* orange text/links on light — 5.2:1 on white */
  --slate:       #55595F;   /* body secondary on light — 7.1:1 on white    */
  --tint:        #FFF4F0;   /* soft orange wash for highlight panels       */
  --tint-navy:   #EEF2F7;
  --line:        #E3E5E9;
  --line-soft:   #EFF1F4;

  /* Type — Poppins display (warmer, rounder) + Inter body.
     NOTE: a deliberate departure from the brand guide's Inter-only spec. */
  --font-display: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-display: clamp(2.5rem, 1.35rem + 4.6vw, 4.25rem);
  --fs-h2:      clamp(1.875rem, 1.2rem + 2.6vw, 2.75rem);
  --fs-h3:      clamp(1.1875rem, 1.06rem + .5vw, 1.4375rem);
  --fs-body:    1.0625rem;
  --fs-lead:    clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  --fs-caption: .8125rem;

  /* Spacing — density 3/10, spacious (24–96px) */
  --s-1: .75rem; --s-2: 1.5rem; --s-3: 2rem;  --s-4: 3rem;
  --s-5: 4rem;   --s-6: 6rem;   --s-7: 8rem;  --s-8: 12rem;
  --section-y: clamp(3.25rem, 6vw, 6rem);

  --wrap: 1480px;
  --radius:    12px;        /* soft, approachable — not "engineered" */
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(14,26,43,.04), 0 4px 12px -8px rgba(14,26,43,.14);
  --shadow:    0 2px 4px rgba(14,26,43,.04), 0 14px 34px -18px rgba(14,26,43,.22);
  --shadow-lg: 0 4px 8px rgba(14,26,43,.05), 0 28px 60px -28px rgba(14,26,43,.30);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 220ms;
}

/* --- Reset --- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img,svg { display: block; max-width: 100%; }
img { height: auto; }
h1,h2,h3,h4,p,ul,ol,figure,blockquote { margin: 0; }
ul,ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible { outline-color: var(--orange); }

/* --- Layout --- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
@media (min-width: 768px) { .wrap { width: min(100% - 5rem, var(--wrap)); } }

.section { padding-block: var(--section-y); position: relative; }
.section--tint { background: var(--neutral); }
.section--navy { background: var(--navy); color: var(--white); }

/* --- Type --- */
h1,h2,h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
h1 { font-size: var(--fs-display); letter-spacing: -.03em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -.01em; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-caption); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--orange-deep);
  background: var(--tint);
  padding: .5rem .875rem; border-radius: var(--radius-pill);
  margin-bottom: var(--s-2);
}
.section--navy .eyebrow { color: var(--orange); background: rgba(255,87,34,.12); }
.eyebrow img { width: 15px; height: 15px; }

.lead { font-size: var(--fs-lead); line-height: 1.65; color: var(--slate); }
.section--navy .lead { color: #C7CCD4; }        /* 8.9:1 on navy */
.hl { color: var(--orange-deep); }
.section--navy .hl { color: var(--orange); }

.section-head { max-width: 60ch; margin-bottom: clamp(2.25rem, 3.4vw, 3.25rem); }
.section-head.is-centered { margin-inline: auto; text-align: center; }
.section-head p { margin-top: var(--s-2); }
/* That rule is meant for the lead paragraph that follows the heading, but the
   eyebrow is a <p> too — so every section-head was carrying 24px of dead space
   above its first element, on top of the section padding. */
.section-head > p:first-child { margin-top: 0; }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; padding: .875rem 1.75rem;
  font-size: 1rem; font-weight: 600; letter-spacing: -.005em;
  border-radius: var(--radius-pill);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
  cursor: pointer;
}
.btn--primary { background: var(--orange-cta); color: var(--white); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--orange-cta-hover); box-shadow: var(--shadow); transform: translateY(-1px); }
.btn--primary:active { transform: translateY(0); }

.btn--outline { border: 1.5px solid var(--line); color: var(--navy); background: var(--white); }
.btn--outline:hover { border-color: var(--navy); background: var(--neutral); }
.section--navy .btn--outline { border-color: rgba(255,255,255,.28); color: var(--white); background: transparent; }
.section--navy .btn--outline:hover { border-color: var(--white); background: rgba(255,255,255,.08); }

.btn--sm { min-height: 46px; padding: .625rem 1.25rem; font-size: .9375rem; }
.btn .ico { width: 17px; height: 17px; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-1); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; font-weight: 600; color: var(--orange-deep);
  transition: gap var(--dur) var(--ease);
}
.link-arrow svg { width: 16px; height: 16px; }
.link-arrow:hover { gap: .8125rem; }
.section--navy .link-arrow { color: var(--orange); }

.skip {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--orange-cta); color: var(--white);
  padding: .875rem 1.5rem; font-weight: 600; border-radius: var(--radius);
  transition: top 150ms var(--ease);
}
.skip:focus { top: 1rem; }

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

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header .wrap { position: relative; }
.site-header.is-stuck { border-bottom-color: var(--line-soft); box-shadow: var(--shadow-sm); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 84px; }
.nav__logo { display: flex; align-items: center; gap: .625rem; flex: none; min-height: 44px; }
.nav__logo .mark { width: 34px; height: 34px; }
.nav__logo .word { width: 132px; }

.nav__links { display: none; align-items: center; gap: var(--s-3); }
.nav__links a {
  font-size: .9375rem; font-weight: 500; color: var(--slate);
  padding: .5rem 0; min-height: 44px;
  display: inline-flex; align-items: center; position: relative;
  transition: color var(--dur) var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--orange); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__links a:hover { color: var(--navy); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta { display: none; }
@media (min-width: 1040px) { .nav__links, .nav__cta { display: flex; } }

.nav__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-right: -.5rem;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ""; display: block; width: 18px; height: 2px; background: var(--navy);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav__toggle span::before { transform: translateY(-6px); }
.nav__toggle span::after  { transform: translateY(4px); }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(0); }

.nav__panel { display: none; border-top: 1px solid var(--line-soft); padding: var(--s-1) 0 var(--s-2); }
.nav__panel.is-open { display: block; }
.nav__panel a { display: block; padding: .9375rem 0; font-weight: 500; border-bottom: 1px solid var(--line-soft); }
.nav__panel .btn { width: 100%; margin-top: var(--s-2); }

/* --- Hero --------------------------------------------------------------- */
.hero { padding-block: clamp(2.5rem, 4.5vw, 4.25rem) clamp(3rem, 5.5vw, 5rem); position: relative; overflow: hidden; }
.hero__grid { display: grid; gap: clamp(3rem, 5vw, 4.5rem); align-items: center; }
/* The hero photograph is the field itself (see the A-layer), so the grid runs a
   single track and the copy is capped instead. The uncovered right-hand side is
   not empty space — it is what lets the bridge and the trucks read. */
.hero__copy { max-width: 40rem; }
@media (min-width: 1200px) { .hero__copy { max-width: 44rem; } }
.hero h1 { margin-bottom: var(--s-2); text-wrap: balance; }
.hero .lead { max-width: 52ch; margin-bottom: var(--s-3); }

/* Photo with an overlapping proof card — warmth + depth */
.hero__media { position: relative; }
.hero__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.hero__badge {
  position: absolute; left: -12px; bottom: -20px;
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1.125rem 1.375rem;
  display: flex; align-items: center; gap: .875rem;
  max-width: 74%;
}
.hero__badge .mark { width: 40px; height: 40px; flex: none; }
.hero__badge b { display: block; font-family: var(--font-display); font-size: 1.375rem; letter-spacing: -.02em; line-height: 1.1; }
.hero__badge span { font-size: .8125rem; color: var(--slate); }
@media (min-width: 560px) { .hero__badge { left: -28px; } }

/* Watermark house mark */
.hero__wm {
  position: absolute; right: -90px; top: -60px; width: 420px; opacity: .04;
  pointer-events: none; z-index: -1;
}

/* --- Trust bar ---------------------------------------------------------- */
.trust { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--s-2); }
@media (min-width: 820px) { .trust { grid-template-columns: repeat(4,1fr); } }
.trust__item { text-align: center; padding: var(--s-2) var(--s-1); }
.trust__num {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.25rem,3.6vw,3.25rem); line-height: 1;
  letter-spacing: -.03em; color: var(--navy); margin-bottom: .5rem;
}
.trust__label { font-size: .875rem; color: var(--slate); font-weight: 500; }

/* --- Generic cards ------------------------------------------------------ */
.grid { display: grid; gap: var(--s-2); }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 680px)  { .grid--3 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1020px) { .grid--3 { grid-template-columns: repeat(3,1fr); } }

.card {
  background: var(--white); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); padding: clamp(1.75rem,2.6vw,2.25rem);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.card h3 { margin-bottom: .625rem; }
.card p { color: var(--slate); }
.card__icon {
  width: 52px; height: 52px; border-radius: var(--radius);
  background: var(--tint); color: var(--orange-deep);
  display: grid; place-items: center; margin-bottom: var(--s-2);
}
.card__icon svg { width: 25px; height: 25px; }

/* --- Split (mission / culture) ------------------------------------------ */
.split { display: grid; gap: clamp(2.5rem,5vw,4.5rem); align-items: center; }
@media (min-width: 940px) { .split { grid-template-columns: 1fr 1fr; } }
@media (min-width: 940px) { .split--flip .split__media { order: -1; } }
.split__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.split__body h2 { margin-bottom: var(--s-2); max-width: 18ch; }
.split__body p { max-width: 58ch; }
.split__body p + p { margin-top: var(--s-1); }
.split__body .btn-row, .split__body .link-arrow { margin-top: var(--s-2); }

/* Checklist */
.checks { margin-top: var(--s-2); display: grid; gap: .875rem; }
.checks li { display: flex; gap: .75rem; align-items: flex-start; color: var(--slate); }
.checks svg { width: 22px; height: 22px; flex: none; color: var(--orange-deep); margin-top: 1px; }

/* --- Testimonial -------------------------------------------------------- */
.quote { display: grid; gap: clamp(2rem,4vw,3.5rem); align-items: center; }
@media (min-width: 900px) { .quote { grid-template-columns: .85fr 1.15fr; } }
.quote__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); }

/* Video still with play affordance */
.play { position: relative; display: block; border-radius: var(--radius-lg); }
.play__btn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 76px; height: 76px; border-radius: var(--radius-pill);
  background: var(--orange); color: var(--ink);
  display: grid; place-items: center;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.55);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.play__btn svg { width: 30px; height: 30px; margin-left: 3px; }
.play:hover .play__btn { transform: translate(-50%,-50%) scale(1.07); background: var(--orange-hi); }
.quote blockquote {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.375rem,2.4vw,1.875rem); line-height: 1.4;
  letter-spacing: -.02em; margin-bottom: var(--s-2);
}
.quote__mark { width: 46px; height: 46px; margin-bottom: var(--s-2); opacity: .9; }
.quote__by { font-weight: 600; }
.quote__role { color: var(--slate); font-size: .9375rem; }
.section--navy .quote__role { color: #C7CCD4; }

/* --- Steps (numbered, soft) --------------------------------------------- */
.steps { display: grid; gap: var(--s-2); grid-template-columns: 1fr; }
@media (min-width: 680px)  { .steps { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1040px) { .steps { grid-template-columns: repeat(4,1fr); } }
.step { padding: var(--s-2); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); }
.step__num {
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  background: var(--navy); color: var(--white);
  display: grid; place-items: center; font-weight: 600;
  font-family: var(--font-display); margin-bottom: var(--s-1);
}
.step h3 { margin-bottom: .5rem; }
.step p { color: var(--slate); }

/* --- CTA band ----------------------------------------------------------- */
.cta {
  background: var(--navy); color: var(--white); text-align: center;
  position: relative; overflow: hidden;
  padding-block: clamp(2.5rem, 4vw, 3.5rem);   /* tighter than a full section */
}
.cta .wrap { max-width: 720px; position: relative; z-index: 1; }
.cta h2 { margin-bottom: var(--s-1); text-wrap: balance; }
.cta .lead { margin-inline: auto; margin-bottom: var(--s-2); color: var(--white); } /* 17.5:1 on navy */
.cta .btn-row { justify-content: center; }

/* Blueprint grid (as in Direction A) — reads as structure rather than the
   blurred house mark it replaced. */
.cta::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 68%);
          mask-image: radial-gradient(circle at 50% 50%, #000, transparent 68%);
  pointer-events: none;
}

/* --- Footer ------------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--white); padding-block: var(--s-5) var(--s-3); }
.footer__top { display: grid; gap: var(--s-4); margin-bottom: var(--s-4); }
@media (min-width: 880px) { .footer__top { grid-template-columns: 1.5fr 1fr 1.6fr; } }
.footer__logo { display: flex; align-items: center; gap: .625rem; margin-bottom: var(--s-2); }
.footer__logo .mark { width: 34px; }
.footer__logo .word { width: 150px; }
.footer__tag { color: var(--gray); max-width: 34ch; font-size: 1rem; }
.site-footer h4, .site-footer nav > h2 {
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: var(--s-1);
}
.footer__list li a {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
  color: var(--gray); font-size: .9375rem; transition: color var(--dur) var(--ease);
}
.footer__list li a:hover { color: var(--orange); }
.footer__brands { columns: 2; column-gap: var(--s-2); }
@media (max-width: 520px) { .footer__brands { columns: 1; } }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding-top: var(--s-1);
  display: flex; flex-wrap: wrap; gap: .5rem var(--s-2);
  justify-content: space-between; align-items: center;
  font-size: .875rem; color: var(--gray);
}
.footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .125rem; }
.footer__bottom a:hover { color: var(--orange); }

/* --- Motion (Subtle tier — 300-350ms, fade-up only) --------------------- */
[data-reveal] { opacity: 0; transform: translateY(14px); }
.js [data-reveal] {
  transition: opacity 340ms var(--ease), transform 340ms var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

@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;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   C-derived structures, rendered in B's visual language
   ========================================================================== */

/* Numbered section kicker — C's device inside B's pill */
/* Brand marker in place of a section ordinal. Full strength — at the previous
   .55 opacity it computed to 2.3:1 against the pill and failed AA. The divider
   keeps its lighter weight so the marker still reads as a prefix, not a label. */
.eyebrow__n {
  font-weight: 700;
  padding-right: .5rem;
  margin-right: .125rem;
  border-right: 1px solid currentColor;
  border-right-color: rgba(128, 128, 128, .45);
}

/* Pull quote — C's device, set in B's display face */
.pull {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 500; line-height: 1.35; letter-spacing: -.02em;
  color: var(--navy);
  border-left: 3px solid var(--orange);
  padding-left: var(--s-2);
  max-width: 26ch;
}

/* --- THE RECORD: dated chronology (from C) in B's cards ----------------- */
.tl { display: grid; gap: var(--s-2); }
.tl__item { display: grid; gap: .75rem; grid-template-columns: 1fr; }

.tl__rail { display: flex; align-items: baseline; gap: .625rem; }
.tl__year {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.75rem, 2.8vw, 2.25rem); line-height: 1;
  letter-spacing: -.03em; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.tl__tag {
  font-size: .6875rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate);
}

@media (min-width: 940px) {
  .tl { gap: 0; }
  .tl__item { grid-template-columns: 190px 1fr; gap: var(--s-3); padding-bottom: var(--s-2); }
  .tl__rail {
    position: relative; align-self: stretch;
    flex-direction: column; align-items: flex-start; gap: .25rem;
    padding: 1.75rem 0 0 2.5rem;
  }
  /* connector between entries */
  .tl__rail::before {
    content: ""; position: absolute; left: 8px; top: 2.5rem; bottom: -1.5rem;
    width: 2px; background: var(--line);
  }
  .tl__item:last-child .tl__rail::before { display: none; }
  /* node */
  .tl__rail::after {
    content: ""; position: absolute; left: 0; top: 1.75rem;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--white); border: 4px solid var(--orange);
    box-shadow: 0 0 0 4px var(--neutral);
  }
}

.tl__card {
  display: grid; gap: var(--s-2);
  grid-template-columns: 1fr;
  background: var(--white); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: clamp(1.5rem, 2.4vw, 2rem);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tl__card:hover { box-shadow: var(--shadow); border-color: var(--line); }
@media (min-width: 1120px) {
  /* start-aligned so the logo sits with the brand name, not floating mid-card */
  .tl__card { grid-template-columns: 200px 1fr; gap: var(--s-3); align-items: start; }
}

.tl__logo { display: flex; align-items: center; min-height: 60px; }
.tl__logo img { max-height: 54px; max-width: 190px; width: auto; object-fit: contain; }
.tl__logo img[data-mark="tall"] { max-height: 72px; max-width: 100px; }

.tl__name { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: -.015em; margin-bottom: .25rem; }
.tl__meta { font-size: var(--fs-caption); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); margin-bottom: .75rem; }
.tl__desc { color: var(--slate); max-width: 56ch; margin-bottom: var(--s-1); }
.tl__tags { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: var(--s-2); }
.tag {
  font-size: .75rem; font-weight: 600;
  padding: .375rem .75rem; border-radius: var(--radius-pill);
  background: var(--tint-navy); color: var(--slate);
}

.tl__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.tl__actions .btn {
  background: transparent; color: var(--orange-deep);
  border: 1.5px solid rgba(194,65,12,.45);
}
.tl__actions .btn:hover { background: var(--orange-cta); color: var(--white); border-color: var(--orange-cta); }
/* Quiet secondary route to the brand's own site — the brief requires a hard
   link to every partner website, which "More about" alone does not provide. */
.tl__site {
  display: inline-flex; align-items: center; gap: .375rem;
  min-height: 44px; font-size: .875rem; font-weight: 500;
  color: var(--slate); transition: color var(--dur) var(--ease);
}
.tl__site svg { width: 13px; height: 13px; }
.tl__site:hover { color: var(--orange-deep); }

/* --- Numbered list (from C) in B's spacing ------------------------------ */
.numlist { display: grid; gap: 0; }
@media (min-width: 780px)  { .numlist { grid-template-columns: repeat(2,1fr); column-gap: var(--s-4); } }
@media (min-width: 1180px) { .numlist { grid-template-columns: repeat(3,1fr); } }
.num {
  display: grid; grid-template-columns: 3rem 1fr; gap: .5rem;
  padding: var(--s-2) 0;
  border-top: 1px solid var(--line);
}
.num__n {
  font-family: var(--font-display); font-size: 1.125rem; font-weight: 600;
  color: var(--orange-deep); font-variant-numeric: tabular-nums; line-height: 1.4;
}
.num h3 { margin-bottom: .375rem; }
.num p { color: var(--slate); font-size: 1rem; }

/* --- Captioned photo essay (from C) with B's rounding ------------------- */
.essay { display: grid; gap: var(--s-2); grid-template-columns: 1fr; }
@media (min-width: 760px)  { .essay { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1100px) { .essay { grid-template-columns: repeat(4,1fr); } }
.essay figure { margin: 0; }
.essay img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.essay figcaption {
  font-size: var(--fs-caption); letter-spacing: .06em; text-transform: uppercase;
  color: var(--slate); padding-top: .625rem; margin-top: .625rem;
  border-top: 1px solid var(--line);
}


/* --- Site menu: full-width sheet on mobile, dropdown at desktop ---------- */
@media (min-width: 1040px) {
  .nav__panel {
    position: absolute; right: 0; top: calc(100% + 10px);
    width: 300px; padding: .5rem;
    z-index: 120;
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }
  .nav__panel a {
    padding: .75rem 1rem; border-bottom: 0;
    border-radius: var(--radius);
  }
  .nav__panel a:hover { background: var(--neutral); }
  .nav__panel .btn { margin-top: .5rem; }
}

/* ==========================================================================
   ▼ DIRECTION A LAYER — everything below deliberately overrides the base
   ========================================================================== */

:root {
  --ink-raised:     #212125;
  --line-dark:      rgba(255, 255, 255, .10);
  --line-dark-soft: rgba(255, 255, 255, .06);
  /* Secondary text on dark. The base palette's #8A8F98 clears WCAG at 5.3:1 but
     only reaches APCA Lc 40 — the same perceptual shortfall that made the old
     orange button unreadable. #B8BDC4 is 9.2:1 and APCA Lc 65. */
  --on-dark-muted:  #B8BDC4;
}

/* --- Dark surfaces ------------------------------------------------------ */
.section--ink { background: var(--ink); color: var(--white); }
.section--ink .lead { color: var(--on-dark-muted); }   /* 9.2:1, APCA 65 */
.section--ink .hl   { color: var(--orange); }         /* 5.5:1 on ink */

/* Blueprint line work (A) — architectural, never decorative */
.blueprint::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right,  var(--line-dark-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-dark-soft) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 10%, transparent 72%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 10%, transparent 72%);
  pointer-events: none;
}
.section > .wrap, .hero > .wrap { position: relative; z-index: 1; }

/* --- Header rides the dark hero ---------------------------------------- */
.site-header {
  background: rgba(26, 26, 29, .82);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line-dark-soft);
  box-shadow: none;
}
.site-header.is-stuck { border-bottom-color: var(--line-dark); background: rgba(26,26,29,.95); box-shadow: none; }
.nav__links a { color: rgba(255,255,255,.82); }
.nav__links a:hover { color: var(--white); }
.nav__toggle { border-color: var(--line-dark); }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { background: var(--white); }
.nav__panel { border-top-color: var(--line-dark-soft); }
@media (min-width: 1040px) {
  .nav__panel {
    background: var(--ink-raised);
    border: 1px solid var(--line-dark);
    box-shadow: 0 24px 52px -22px rgba(0,0,0,.75);
  }
  .nav__panel a:hover { background: rgba(255,255,255,.07); }
}
.nav__panel a { color: var(--white); border-bottom-color: var(--line-dark-soft); }

/* --- Hero: dark foundation + geometry ---------------------------------- */
.hero { background: var(--ink); color: var(--white); overflow: hidden; }
.hero .lead { color: var(--on-dark-muted); }
.hero .hl { color: var(--orange); }
.hero__wm { display: none; }                 /* the grid replaces the watermark */
.hero .btn--outline {
  border-color: var(--line-dark); color: var(--white); background: rgba(255,255,255,.02);
}
.hero .btn--outline:hover { border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.07); }

/* Eyebrow gains A's orange rule while keeping B's pill */
.hero .eyebrow, .section--ink .eyebrow, .page-hero .eyebrow {
  background: rgba(255, 87, 34, .10);
  color: var(--orange);
  border: 1px solid rgba(255, 87, 34, .28);
}

/* --- Photography plate: scrim + brackets + orange hairline -------------- */
.plate { position: relative; }
.plate img { width: 100%; border-radius: var(--radius); display: block; }
.plate::after {                    /* scrim grounds the photo in the dark field */
  content: ""; position: absolute; inset: 0; border-radius: var(--radius);
  background: linear-gradient(to top, rgba(26,26,29,.55) 0%, rgba(26,26,29,0) 55%);
  pointer-events: none;
}
.plate__frame {                    /* corner brackets, A's engineered detail */
  position: absolute; inset: -10px; pointer-events: none;
}
.plate__frame span {
  position: absolute; width: 22px; height: 22px;
  border: 2px solid var(--orange);
}
.plate__frame span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.plate__frame span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.plate__frame span:nth-child(3) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.plate__frame span:nth-child(4) { bottom: 0; left: 0; border-right: 0; border-top: 0; }

/* Badge restyled for the dark field */
.hero__badge {
  background: var(--ink-raised);
  border: 1px solid var(--line-dark);
  box-shadow: 0 24px 48px -20px rgba(0,0,0,.7);
}
.hero__badge b { color: var(--white); }
.hero__badge span { color: var(--on-dark-muted); }

/* --- Stat strip: A's hairline rules ------------------------------------- */
.hero__stats {
  display: grid; grid-template-columns: repeat(2,1fr);
  border-top: 1px solid var(--line-dark);
  margin-top: clamp(1.75rem,3vw,2.75rem);
}
@media (min-width: 760px) { .hero__stats { grid-template-columns: repeat(4,1fr); } }
.hero__stat { padding: var(--s-2) var(--s-2) var(--s-2) 0; border-right: 1px solid var(--line-dark-soft); }
.hero__stat:last-child { border-right: 0; }
.hero__stat b {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.75rem,2.8vw,2.5rem); line-height: 1;
  letter-spacing: -.03em; color: var(--white); margin-bottom: .5rem;
}
.hero__stat span {
  font-size: var(--fs-caption); font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--on-dark-muted);
}

/* --- Stronger orange: accent rule under section headings --------------- */
.section-head h2 { position: relative; }
.section-head.is-centered { text-align: center; }
.accent-rule {
  display: block; width: 48px; height: 3px; border-radius: 2px;
  background: var(--orange); margin: var(--s-2) 0 0;
}
.is-centered .accent-rule { margin-inline: auto; }

/* --- Corner-bracket detail on cards (A) -------------------------------- */
.card, .tl__card { position: relative; }
.card::before, .tl__card::before {
  content: ""; position: absolute; top: -1px; left: -1px;
  width: 16px; height: 16px;
  border-top: 2px solid var(--orange); border-left: 2px solid var(--orange);
  border-top-left-radius: var(--radius-lg);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.card:hover::before, .tl__card:hover::before { opacity: 1; }

/* --- Dark story band ---------------------------------------------------- */
.section--ink .play__btn { box-shadow: 0 14px 34px -10px rgba(0,0,0,.75); }

/* --- Photo essay: captions set inside the frame ------------------------- */
.essay figure { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.essay img { border-radius: 0; box-shadow: none; }
.essay figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.5rem .875rem .75rem;
  margin: 0; border-top: 0;
  font-size: var(--fs-caption); font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: #FFFFFF;                                  /* on the scrim below */
  background: linear-gradient(to top, rgba(14,26,43,.92) 0%, rgba(14,26,43,.72) 45%, rgba(14,26,43,0) 100%);
}

/* --- CTA band keeps A's grid ------------------------------------------- */
.cta { background: var(--ink); }
.cta::before {
  background-image:
    linear-gradient(to right,  var(--line-dark-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-dark-soft) 1px, transparent 1px);
}

/* --- Partner stories slider --------------------------------------------- */
.stories__head { display: grid; gap: var(--s-2); margin-bottom: clamp(2rem,4vw,3rem); }
@media (min-width: 820px) { .stories__head { grid-template-columns: 1fr auto; align-items: end; } }
.stories__nav { display: flex; gap: .5rem; }

.sldr-btn {
  width: 52px; height: 52px; flex: none;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-dark);
  background: rgba(255,255,255,.03); color: var(--white);
  display: grid; place-items: center;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease),
              opacity var(--dur) var(--ease);
}
.sldr-btn:hover:not(:disabled) { border-color: rgba(255,255,255,.38); background: rgba(255,255,255,.09); }
.sldr-btn:disabled { opacity: .3; cursor: not-allowed; }
.sldr-btn svg { width: 20px; height: 20px; }

.stories__viewport { overflow: hidden; }
.stories__track { display: flex; }
.js .stories__track { transition: transform 480ms var(--ease); will-change: transform; }

.slide { flex: 0 0 100%; min-width: 0; display: grid; gap: clamp(2rem,4vw,3.5rem); align-items: center; }
@media (min-width: 900px) { .slide { grid-template-columns: 1.15fr 1fr; } }

.slide__media { position: relative; }
.slide__media img {
  width: 100%; aspect-ratio: 16/10; object-fit: cover;
  border-radius: var(--radius); display: block;
}
.slide__body h3 { font-size: clamp(1.5rem,2.4vw,2rem); letter-spacing: -.02em; margin-bottom: .5rem; }
.slide__meta {
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--orange); margin-bottom: var(--s-1);
}
.slide__body .lead { margin-bottom: var(--s-2); }

.stories__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  margin-top: clamp(2rem,3.5vw,2.75rem);
  border-top: 1px solid var(--line-dark); padding-top: .5rem;
}
.sldr-dots { display: flex; gap: .25rem; }
.sldr-dots button {
  width: 46px; height: 44px; display: grid; place-items: center; padding: 0;
}
.sldr-dots button::before {
  content: ""; width: 32px; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.24);
  transition: background-color var(--dur) var(--ease);
}
.sldr-dots button:hover::before { background: rgba(255,255,255,.45); }
.sldr-dots button[aria-current="true"]::before { background: var(--orange); }
.sldr-count {
  font-size: var(--fs-caption); letter-spacing: .1em;
  color: var(--on-dark-muted); font-variant-numeric: tabular-nums;
}

/* Progressive enhancement: with JS off the slides simply stack */
.no-js .stories__viewport { overflow: visible; }
.no-js .stories__track { display: grid; gap: var(--s-5); }
.no-js .stories__nav, .no-js .stories__foot { display: none; }

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

/* The carousel viewport must clip horizontally, which was cutting off the
   brackets where they sat 10px outside the slide (as they do in the hero).
   Inside the frame instead — same motif, no clipping. */
.slide__media .plate__frame { inset: 8px; }
.slide__media .plate__frame span { filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }


/* ==========================================================================
   ▼ REVISION LAYER — round 2 feedback
   1. Dark surfaces gain depth (ambient gradient) and an ownable texture:
      the T3 gable, tessellated. Same role the honeycomb plays for a bee
      brand — a motif taken straight from the mark, not a stock pattern.
   2. Desktop navigation is a single end-aligned bar. No hamburger, no
      anchored dropdown, nothing hidden behind a toggle above 940px.
   3. "What We Do" reads and behaves as a set of clickable tiles.
   ========================================================================== */

:root {
  /* Texture tile is the brand mark itself — same geometry as
     assets/img/t3-mark.svg, inlined so the layer's colour and alpha stay under
     CSS control (an external SVG can't be recoloured from here). Keep the two
     in sync if the mark is ever redrawn. */
  --mark-tile:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-16 -16 132 132'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.05 35.1 L49.83 0.5 L97.6 35.1 V91.15 A7 7 0 0 1 90.6 98.15 H9.05 A7 7 0 0 1 2.05 91.15 Z'/%3E%3Cpath d='M14.07 28.88 A21.03 21.03 0 0 1 49.97 43.75 V64.35 A24 24 0 0 0 73.97 88.35 H97.6'/%3E%3C/g%3E%3C/svg%3E");
  /* Tile size drives BOTH the mark size and the spacing, and because the
     stroke lives inside the SVG viewBox it scales too — so a smaller tile
     gives more, finer marks at the same overall ink coverage, not a heavier
     field. At 96px the mark renders ~73px tall with a ~2.3px stroke. */
  --roof-tile: 96px;
}

/* --- Dark surfaces: ambient depth --------------------------------------- */
/* Warm bloom where the eye lands first, a cool navy counterweight opposite,
   and a vertical fall-off so the band is never one flat field of black.
   Base stays #1A1A1D — pure #000 smears on OLED and kills the gradient. */
/* ==========================================================================
   Hero photograph — same construction as .page-hero--photo in pages.css, so
   the homepage and the interior pages read as one treatment. Six layers,
   listed top-down as CSS paints them:
     1. orange bloom    — brand constant, top right
     2. navy counterweight — brand constant, bottom left
     3. lateral scrim   — heaviest on the left, where the headline sits
     4. vertical scrim  — kills the bright sky at the top, grounds the base
     5. the photograph
     6. the original ink gradient, as the floor
   The blooms stay on their brand positions rather than being re-aimed at the
   photograph's own sun: aligning them doubled the warmth and turned the whole
   frame sepia. Kept apart, the picture reads cool and the orange stays brand.
   ========================================================================== */
.hero {
  /* The photograph is ~2.33:1, wider than most desktop heroes, so cover crops
     its sides. Biasing right keeps the last van (Radiant, ~92%) in frame down
     to ~1280px; the vans it gives up on the left sit under the copy anyway. */
  --hero-focal: 78% 52%;
  background-color: var(--ink);
  background-image:
    radial-gradient(58% 62% at 92% -14%, rgba(255,87,34,.26), rgba(255,87,34,0) 62%),
    radial-gradient(58% 52% at 0% 108%, rgba(26,58,99,.20), rgba(26,58,99,0) 60%),
    /* Falls away faster than the interior pages' ramp. That version was tuned
       for a photograph whose subject was a single van at the far right; this
       one carries the line of seven brand vans from ~10% to ~92%, and holding
       .94 out to 28% buried the two leading ones. Heavy only where the eyebrow
       and the start of the headline sit, then open. The copy still clears its
       floor with room to spare — white display type measured 14.8:1 against a
       3:1 requirement, so the headroom is better spent on the photograph. */
    /* The tint darkens along the ramp as well as the alpha: near-black where the
       copy sits, easing back to the #101013 ink tone as it opens onto the
       photograph, so the left reads black without the right turning grey. */
    linear-gradient(96deg,
      rgba(4,4,5,.99) 0%,
      rgba(6,6,8,.95) 20%,
      rgba(10,10,12,.80) 36%,
      rgba(14,14,17,.62) 54%,
      rgba(16,16,19,.52) 74%,
      rgba(16,16,19,.58) 100%),
    /* Base stop runs deeper than the interior pages' .78: this hero is taller,
       carries the stat panel at its foot, and hands off to a white band. */
    linear-gradient(180deg,
      rgba(16,16,19,.72) 0%,
      rgba(16,16,19,.20) 30%,
      rgba(16,16,19,.32) 62%,
      rgba(16,16,19,.86) 100%),
    url("../img/hero-trucks-v2-1.webp"),
    linear-gradient(180deg, #17171A 0%, #1A1A1D 46%, #121215 100%);
  background-size: cover, cover, cover, cover, cover, cover;
  background-position: center, center, center, center, var(--hero-focal), center;
  background-repeat: no-repeat;
}
/* Below the copy/photo split the headline runs the full width, so the lateral
   scrim becomes a flat one — there is no longer a clear side to keep light.
   Swapped at 960px rather than the interior pages' 720px because that is where
   .hero__copy stops being capped. */
@media (max-width: 959px) {
  .hero {
    --hero-focal: 58% 46%;
    background-image:
      radial-gradient(58% 62% at 92% -14%, rgba(255,87,34,.26), rgba(255,87,34,0) 62%),
      radial-gradient(58% 52% at 0% 108%, rgba(26,58,99,.20), rgba(26,58,99,0) 60%),
      linear-gradient(180deg,
        rgba(16,16,19,.94) 0%,
        rgba(16,16,19,.90) 16%,
        rgba(16,16,19,.72) 40%,
        rgba(16,16,19,.78) 72%,
        rgba(16,16,19,.94) 100%),
      linear-gradient(180deg, rgba(16,16,19,.26), rgba(16,16,19,.26)),
      url("../img/hero-trucks-v2-1.webp"),
      linear-gradient(180deg, #17171A 0%, #1A1A1D 46%, #121215 100%);
  }
}

.section--ink {
  background-color: var(--ink);
  background-image:
    radial-gradient(64% 58% at 98% 6%, rgba(255,87,34,.15), rgba(255,87,34,0) 62%),
    radial-gradient(58% 55% at -2% 94%, rgba(26,58,99,.38), rgba(26,58,99,0) 62%),
    linear-gradient(180deg, #121215 0%, #1A1A1D 42%, #161619 100%);
}
.cta {
  background-color: var(--ink);
  background-image:
    radial-gradient(72% 118% at 50% 120%, rgba(255,87,34,.24), rgba(255,87,34,0) 62%),
    linear-gradient(180deg, #131316 0%, #1A1A1D 100%);
}
.site-footer {
  position: relative;
  background-color: var(--ink);
  background-image: linear-gradient(180deg, #17171A 0%, #101012 100%);
  border-top: 1px solid rgba(255,87,34,.16);
}
.site-footer .wrap { position: relative; z-index: 1; }

/* --- Roofline motif ------------------------------------------------------ */
/* One texture per surface, never two. The old blueprint grid is retired —
   a grid plus a pattern reads as noise. Masked so it decays into the field
   well before it reaches body copy. */
.rooflines { position: relative; }
/* class name kept from the blueprint era; the motif is now the T3 mark */
.rooflines::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background-image: var(--mark-tile), var(--mark-tile);
  background-size: var(--roof-tile) var(--roof-tile);
  background-position: 0 0, calc(var(--roof-tile) / 2) calc(var(--roof-tile) / 2);
  background-repeat: repeat;
  opacity: .055;
}
/* The mark tile moves to the flat left side, as on .page-hero--photo. Sitting
   top-right it would have landed on the busiest part of the photograph — the
   sunset and the far ridge — and read as dirt. */
.hero.rooflines::before {
  -webkit-mask-image: radial-gradient(ellipse 76% 128% at 4% 46%, #000 4%, transparent 70%);
          mask-image: radial-gradient(ellipse 76% 128% at 4% 46%, #000 4%, transparent 70%);
  opacity: .06;
}

/* Over a photograph the stat panel needs to be a panel, not a translucent box —
   otherwise the figures inherit whatever crop happens to sit behind them. Same
   glass as .page-hero--photo .hero__stats. */
.hero .hero__stats {
  background: linear-gradient(180deg, rgba(19,19,22,.74) 0%, rgba(19,19,22,.60) 100%);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  border-color: rgba(255,255,255,.16);
}
@supports not (backdrop-filter: blur(2px)) {
  .hero .hero__stats {
    background: linear-gradient(180deg, rgba(19,19,22,.92) 0%, rgba(19,19,22,.86) 100%);
  }
}

/* An element carrying its own background should not inherit its contrast from
   whatever sits behind it. Opaque, not 90%: at any transmission a bright sky
   behind the pill moves the label's contrast around between crops. */
.hero .eyebrow {
  background: #101013;
  border-color: rgba(255,87,34,.45);
}

.section--ink.rooflines::before {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.4) 26%, transparent 60%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.4) 26%, transparent 60%);
  opacity: .07;
}
/* Overrides the A-layer blueprint grid that used to live on this pseudo. */
.cta.rooflines::before {
  background-image: var(--mark-tile), var(--mark-tile);
  background-size: var(--roof-tile) var(--roof-tile);
  background-position: 0 0, calc(var(--roof-tile) / 2) calc(var(--roof-tile) / 2);
  -webkit-mask-image: radial-gradient(ellipse 84% 96% at 50% 108%, #000 4%, transparent 72%);
          mask-image: radial-gradient(ellipse 84% 96% at 50% 108%, #000 4%, transparent 72%);
}
.site-footer.rooflines::before {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
  opacity: .04;
}
@supports not (mask-image: linear-gradient(#000, transparent)) {
  .rooflines::before { opacity: .03; }   /* no mask — dial the whole layer back */
}

/* --- Navigation: one bar, five items, end-aligned ----------------------- */
.nav { gap: var(--s-2); }
.nav__links { gap: clamp(1.25rem, 2.1vw, 2.25rem); margin-left: auto; }
.nav__links a { font-size: .9375rem; font-weight: 500; white-space: nowrap; }
.nav__links a::after { bottom: 2px; }

/* Current section, set by main.js. Gives the bar a sense of place — the
   thing the hidden menu was destroying. */
.nav__links a[aria-current="true"] { color: var(--white); }
.nav__links a[aria-current="true"]::after { transform: scaleX(1); }

.nav__cta { margin-left: var(--s-1); flex: none; }

@media (min-width: 940px) {
  .nav__links, .nav__cta { display: flex; }
  .nav__toggle { display: none; }
  .nav__panel, .nav__panel.is-open { display: none; }
}
@media (max-width: 939.98px) {
  .nav__links { display: none; }
  .nav__cta   { display: none; }
}

/* Mobile sheet — full-width, flush to the header, not an anchored dropdown */
.nav__panel {
  background: transparent; border: 0; box-shadow: none;
  border-top: 1px solid var(--line-dark-soft);
}
.nav__panel a:not(.btn) { color: var(--white); font-size: 1.0625rem; }
.nav__panel a:not(.btn):last-of-type { border-bottom: 0; }
/* The panel's blanket `display:block` was flattening the CTA, dropping its
   horizontal padding and pulling the label to the pill's left edge. */
.nav__panel a.btn {
  display: inline-flex; justify-content: center;
  padding: .875rem 1.75rem; border-bottom: 0;
}
.nav__panel .btn { width: 100%; margin-top: var(--s-1); }

/* --- What We Do: six tiles, each one a link ----------------------------- */
.numlist { gap: var(--s-1); }
@media (min-width: 780px)  { .numlist { grid-template-columns: repeat(2,1fr); column-gap: var(--s-1); } }
@media (min-width: 1180px) { .numlist { grid-template-columns: repeat(3,1fr); } }

.num {
  position: relative;
  display: grid; grid-template-columns: 2.5rem 1fr; gap: .5rem;
  align-items: stretch;
  height: 100%;
  padding: clamp(1.5rem, 2.2vw, 1.875rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
/* Hover tell. Drawn as the top border of a box that shares the card's radius,
   so the highlight curves into both corners instead of stopping square at the
   tangent points. Wipes in left-to-right along that curve. */
.num::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none;
  border-radius: calc(var(--radius-lg) + 1px);
  border: 2px solid transparent;
  border-top-color: var(--orange);
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
  transition: clip-path var(--dur) var(--ease), -webkit-clip-path var(--dur) var(--ease);
}
.num:hover, .num:focus-visible {
  border-color: var(--line);
  background: var(--white);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.num:hover::before, .num:focus-visible::before {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}
.num:active { transform: translateY(-1px); }

.num__n { line-height: 1.35; align-self: start; }
.num:hover .num__n { color: var(--orange); }
.num__body { display: flex; flex-direction: column; align-items: flex-start; height: 100%; }
.num h3 { margin-bottom: .375rem; }
.num p  { color: var(--slate); font-size: 1rem; margin-bottom: 1.125rem; }

.num__go {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: .4375rem;
  font-size: .875rem; font-weight: 600; letter-spacing: -.005em;
  color: var(--orange-deep);
  transition: gap var(--dur) var(--ease);
}
.num__ico { width: 15px; height: 15px; flex: none; }
.num:hover .num__go { gap: .75rem; }

@media (prefers-reduced-motion: reduce) {
  .num, .num::before, .num__go { transition: none; }
  .num:hover, .num:focus-visible { transform: none; }
}
@supports not (clip-path: inset(0 100% 0 0)) {
  .num::before { opacity: 0; -webkit-clip-path: none; clip-path: none;
                 transition: opacity var(--dur) var(--ease); }
  .num:hover::before, .num:focus-visible::before { opacity: 1; }
}

/* --- Header: solid ink gradient, not a translucent grey ----------------- */
/* The old bar was 82% ink over whatever scrolled beneath it, so its value
   drifted section to section and the links lost contrast. Now it's an opaque
   surface of its own — the tone the sticky state used to hit (#1A1A1D-ish),
   held everywhere, with a clean top-to-bottom fall-off for a little dimension. */
.site-header {
  background-color: #17171A;
  background-image: linear-gradient(180deg, #202025 0%, #191A1D 58%, #141416 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(255,255,255,.07);
  box-shadow: none;
}
/* Sticky adds a hairline of brand and a soft drop — the state change is still
   legible now that the base tone no longer shifts. */
.site-header.is-stuck {
  background-image: linear-gradient(180deg, #1D1E22 0%, #161618 60%, #101012 100%);
  border-bottom-color: rgba(255,87,34,.28);
  box-shadow: 0 14px 34px -22px rgba(0,0,0,.9);
}
.nav__links a { color: rgba(255,255,255,.86); }   /* 11.6:1 on #17171A */
.nav__links a:hover { color: var(--white); }
.nav__toggle { border-color: rgba(255,255,255,.16); }
.nav__panel { border-top-color: rgba(255,255,255,.08); }
.nav__panel a { border-bottom-color: rgba(255,255,255,.07); }

/* --- Hero proof strip, rebuilt ------------------------------------------- */
/* Was four left-aligned text blocks under a single hairline: the numbers sat
   hard left while the rules sat hard right, so each cell read as a gap with a
   figure in the corner. Now it's one panel with even cells, inset dividers and
   an orange tick that ties the strip to the section rules elsewhere. */
.hero__stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.015) 100%);
  overflow: hidden;
}
@media (min-width: 760px) { .hero__stats { grid-template-columns: repeat(4, 1fr); } }

.hero__stat {
  position: relative;
  padding: clamp(1.375rem, 2.4vw, 1.875rem) clamp(1.25rem, 2vw, 1.75rem);
  border: 0;
}
/* Dividers drawn as insets so they stop short of the panel edge instead of
   running into the corner radius. */
.hero__stat::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%;
  width: 1px; background: var(--line-dark); opacity: 0;
}
.hero__stat::after {
  content: ""; position: absolute; left: 12%; right: 12%; top: 0;
  height: 1px; background: var(--line-dark); opacity: 0;
}
/* Two-up on small screens: vertical rule between the pairs, horizontal
   between the rows. Four-up above 760px: vertical rules only. */
.hero__stat:nth-child(2n)::before { opacity: 1; }
.hero__stat:nth-child(n+3)::after { opacity: 1; }
@media (min-width: 760px) {
  .hero__stat:nth-child(n+2)::before { opacity: 1; }
  .hero__stat::after { opacity: 0; }
}

.hero__stat b {
  display: block; margin-bottom: .4375rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.875rem, 3vw, 2.625rem); line-height: 1;
  letter-spacing: -.035em; color: var(--white);
  font-variant-numeric: tabular-nums;
}
/* The tick echoes .accent-rule under every section heading */
.hero__stat b::before {
  content: ""; display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--orange); margin-bottom: .9375rem;
}
.hero__stat span {
  display: block;
  font-size: .78125rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-dark-muted);
}

/* --- Brand timeline: one destination per card --------------------------- */
/* The card had two links to the same place — a button and a bare URL. The
   button now carries the outbound link and the arrow says so. */
.tl__actions .btn .ico--ext { width: 14px; height: 14px; }