/* =============================================================
   SEC GROUP — STYLES
   Architectural editorial, brand-locked to SEC brand manual
   ============================================================= */

/* ---------- Fonts ------------------------------------------- */
@font-face {
  font-family: 'Brix Slab';
  src: url('../fonts/BrixSlab-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Brix Slab';
  src: url('../fonts/BrixSlab-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Brix Slab';
  src: url('../fonts/BrixSlab-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Brix Slab';
  src: url('../fonts/BrixSlab-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Metropolis';
  src: url('../fonts/Metropolis-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ------------------------------------------ */
:root {
  /* Brand */
  --sec-orange: #FF6F20;
  --sec-orange-soft: rgba(255, 111, 32, 0.08);
  --sec-orange-mid: rgba(255, 111, 32, 0.4);
  --sec-warm-gray-2: #CBC5C7;
  --sec-warm-gray-5: #ACA4A3;
  --sec-warm-gray-11: #6F635F;
  --sec-cream: #D0D4E3;

  /* Web roles */
  --bg-base: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-deep: #1F1B19;
  --bg-deep-alt: #2A2522;
  --ink-primary: #1A1715;
  --ink-secondary: #6F635F;
  --ink-muted: #ACA4A3;
  --accent: #FF6F20;
  --on-dark: #F5F2EF;
  --on-dark-soft: rgba(245, 242, 239, 0.72);
  --on-dark-muted: rgba(245, 242, 239, 0.5);
  --rule: rgba(26, 23, 21, 0.12);
  --rule-on-dark: rgba(245, 242, 239, 0.16);

  /* Fonts */
  --ff-display: 'Brix Slab', Georgia, 'Times New Roman', serif;
  --ff-body: 'Metropolis', system-ui, -apple-system, sans-serif;

  /* Scale */
  --fs-display-xl: clamp(3rem, 9vw, 8.5rem);
  --fs-display-l: clamp(2.5rem, 7vw, 6rem);
  --fs-display-m: clamp(1.75rem, 3.8vw, 3.25rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.75rem);
  --fs-body-l: clamp(1.0625rem, 1.2vw, 1.25rem);
  --fs-body: 1rem;
  --fs-caption: 0.8125rem;
  --fs-micro: 0.6875rem;

  /* Rhythm */
  --container-max: 1440px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --rhythm-xs: 0.5rem;
  --rhythm-s: 1rem;
  --rhythm-m: 2rem;
  --rhythm-l: 4rem;
  --rhythm-xl: 8rem;
  --rhythm-xxl: 12rem;

  /* Motion */
  --ease-arch: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-quick: 320ms;
  --dur-mid: 600ms;
  --dur-slow: 1000ms;
}

/* Animated perimeter shine — registered for keyframe interpolation */
@property --shine-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ---------- Back-to-top button ------------------------------ */
.back-top {
  position: fixed;
  right: clamp(1.25rem, 2.5vw, 2rem);
  bottom: clamp(1.25rem, 2.5vw, 2rem);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  border-radius: 50%;
  background: var(--bg-deep);
  color: var(--on-dark);
  cursor: pointer;
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(0.85);
  transition: opacity 400ms var(--ease-arch), transform 500ms var(--ease-arch), background var(--dur-quick) var(--ease-arch);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28), 0 4px 10px rgba(0, 0, 0, 0.18);
  font-family: var(--ff-body);
}
.back-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.back-top:hover { background: var(--accent); }
.back-top:hover .back-top__ring { transform: scale(1.18); opacity: 1; }
.back-top__ring {
  position: absolute;
  inset: -4px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  opacity: 0.55;
  transition: transform var(--dur-mid) var(--ease-arch), opacity var(--dur-mid) var(--ease-arch);
  animation: back-top-pulse 2.4s var(--ease-arch) infinite;
}
@keyframes back-top-pulse {
  0%   { transform: scale(1);    opacity: 0.55; }
  70%  { transform: scale(1.45); opacity: 0;    }
  100% { transform: scale(1.45); opacity: 0;    }
}
.back-top__arrow {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-quick) var(--ease-arch);
}
.back-top:hover .back-top__arrow { transform: translateY(-3px); }
.back-top__label {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
  .back-top__ring { animation: none; }
}

/* ---------- Company-profile floating tab -------------------- */
/* Pinned to the left viewport edge and vertically centered, as a vertical
   tab — keeps it out of the bottom-left so it never overlaps the footer
   wordmark/columns at any scroll position, and clear of the top nav/hero. */
.profile-fab {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 0.25rem;
  border-radius: 0 8px 8px 0;
  background: var(--bg-deep);
  color: var(--on-dark);
  text-decoration: none;
  font-family: var(--ff-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28), 0 4px 10px rgba(0, 0, 0, 0.18);
  transition: background var(--dur-quick) var(--ease-arch), padding-inline var(--dur-quick) var(--ease-arch);
}
.profile-fab__label {
  writing-mode: vertical-rl;
}
.profile-fab:hover { background: var(--accent); padding-inline: 0.45rem; }
.profile-fab:hover .profile-fab__icon { transform: translateY(2px); }
.profile-fab__icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  transition: transform var(--dur-quick) var(--ease-arch);
}
/* On small phones the page gutter is only ~20px; keep the tab within it so it
   never sits over the hero counters or footer column text. */
@media (max-width: 600px) {
  .profile-fab { padding-inline: 0.15rem; }
  .profile-fab:hover { padding-inline: 0.25rem; }
  .profile-fab__icon { width: 14px; height: 14px; }
}

/* ---------- Reset ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-base);
  color: var(--ink-primary);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* iOS Safari rubber-band / sub-pixel overscroll at the page end exposes the
   root background below the last section. The footer (.contact) is dark, so
   paint the root dark too — otherwise a strip of the cream page background
   shows as "empty space" under the footer. (Top overscroll sits over the dark
   hero, so this reads correctly at both ends.) */
html { background: var(--bg-deep); }
html.lenis { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
html.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
html.lenis.lenis-stopped body { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }

/* ---------- Type utilities ---------------------------------- */
.eyebrow {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-secondary);
}
.eyebrow.on-dark { color: var(--sec-warm-gray-2); }

.display-xl, .display-l, .display-m {
  font-family: var(--ff-display);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--ink-primary);
}
.display-xl { font-size: var(--fs-display-xl); }
.display-l { font-size: var(--fs-display-l); line-height: 1.02; }
.display-m { font-size: var(--fs-display-m); line-height: 1.08; }

.on-dark .display-xl, .on-dark .display-l, .on-dark .display-m,
section.dark .display-xl, section.dark .display-l, section.dark .display-m { color: var(--on-dark); }

.lede {
  font-family: var(--ff-display);
  font-weight: 300;
  font-style: italic;
  font-size: var(--fs-body-l);
  line-height: 1.55;
  color: var(--ink-primary);
  max-width: 56ch;
}
.lede.on-dark { color: var(--on-dark); }

.meta {
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  color: var(--ink-secondary);
  letter-spacing: 0.02em;
}

/* ---------- Layout ------------------------------------------ */
.shell {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section {
  position: relative;
  width: 100%;
  overflow: clip;
}

section.dark {
  background: var(--bg-deep);
  color: var(--on-dark);
}

/* ---------- Nav --------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem var(--gutter);
  color: var(--ink-primary);
  pointer-events: none;
  transition: color 400ms var(--ease-arch), background 400ms var(--ease-arch);
}
.nav.is-on-dark { color: var(--on-dark); }
.nav.is-scrolled {
  background: rgba(245, 242, 239, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.nav.is-scrolled.is-on-dark {
  background: rgba(31, 27, 25, 0.82);
}
.nav__brand,
.nav__menu { pointer-events: auto; }
.nav__brand {
  position: relative;
  display: block;
  width: 140px;
  height: 35px;
}
.nav__brand img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 400ms var(--ease-arch);
}
.nav__brand .logo-white { display: none; }
/* Hamburger toggle — always visible (offcanvas) */
.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.5rem 0.25rem 0.5rem 0.75rem;
  pointer-events: auto;
  z-index: 60;
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: inherit;
  transition: opacity var(--dur-quick) var(--ease-arch);
}
.nav__toggle:hover { opacity: 0.7; }
.nav__toggle-icon {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 28px;
  height: 14px;
}
.nav__toggle-line {
  display: block;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform-origin: center;
  transition: transform var(--dur-quick) var(--ease-arch), opacity var(--dur-quick) var(--ease-arch);
}
@media (max-width: 480px) {
  .nav__toggle-label { display: none; }
}

/* ---------- Offcanvas Menu ---------------------------------- */
.offcanvas {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 500ms;
}
.offcanvas.is-open {
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}
.offcanvas__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 13, 12, 0.6);
  opacity: 0;
  transition: opacity 500ms var(--ease-arch);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.offcanvas.is-open .offcanvas__backdrop { opacity: 1; }

.offcanvas__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(460px, 92vw);
  background: var(--bg-deep);
  color: var(--on-dark);
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.75rem);
  transform: translateX(100%);
  transition: transform 600ms var(--ease-arch);
  overflow-y: auto;
  box-shadow: -40px 0 80px rgba(0,0,0,0.4);
}
.offcanvas.is-open .offcanvas__panel { transform: translateX(0); }

.offcanvas__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: clamp(2rem, 5vh, 3.5rem);
  border-bottom: 1px solid var(--rule-on-dark);
}
.offcanvas__close {
  position: relative;
  width: 32px;
  height: 32px;
  pointer-events: auto;
  color: var(--on-dark);
  transition: transform var(--dur-quick) var(--ease-arch), color var(--dur-quick) var(--ease-arch);
}
.offcanvas__close:hover { color: var(--accent); transform: rotate(90deg); }
.offcanvas__close-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transform-origin: center;
}
.offcanvas__close-line:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.offcanvas__close-line:last-child  { transform: translate(-50%, -50%) rotate(-45deg); }

.offcanvas__menu {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  gap: clamp(0.5rem, 1.4vh, 1rem);
  padding-block: clamp(2rem, 5vh, 4rem);
}
.offcanvas__menu a {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-items: baseline;
  gap: 1.25rem;
  padding-block: 0.4rem;
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--on-dark);
  position: relative;
  transition: color var(--dur-quick) var(--ease-arch), padding-left var(--dur-quick) var(--ease-arch);
}
.offcanvas__idx {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
}
.offcanvas__link {
  position: relative;
  display: inline-block;
}
.offcanvas__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.2em;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms var(--ease-arch);
}
.offcanvas__menu a:hover { color: var(--accent); padding-left: 0.5rem; }
.offcanvas__menu a:hover .offcanvas__link::after { transform: scaleX(1); }

.offcanvas__profile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
  padding: clamp(0.9rem, 2vh, 1.15rem) clamp(1.1rem, 3vw, 1.5rem);
  border: 1px solid var(--rule-on-dark);
  color: var(--on-dark);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background var(--dur-quick) var(--ease-arch), color var(--dur-quick) var(--ease-arch), border-color var(--dur-quick) var(--ease-arch);
}
.offcanvas__profile:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.offcanvas__profile-icon { width: 16px; height: 16px; flex-shrink: 0; }

.offcanvas__foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rhythm-m);
  padding-top: clamp(1.5rem, 3vh, 2.5rem);
  border-top: 1px solid var(--rule-on-dark);
}
.offcanvas__foot-col p {
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  line-height: 1.55;
  color: var(--on-dark-soft);
  margin: 0.5rem 0 0;
}
.offcanvas__foot-col a { transition: color var(--dur-quick) var(--ease-arch); }
.offcanvas__foot-col a:hover { color: var(--accent); }

/* ---------- Triangle dividers ------------------------------- */
.divider-tri {
  position: absolute;
  inset: auto 0 -1px 0;
  width: 100%;
  height: clamp(80px, 14vw, 200px);
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}
.divider-tri.top { top: -1px; bottom: auto; transform: scaleY(-1); }
.divider-tri svg { width: 100%; height: 100%; display: block; overflow: visible; }
.divider-tri .fill { fill: var(--bg-base); }
.divider-tri .outline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.divider-tri.into-dark .fill { fill: var(--bg-deep); }
.divider-tri.from-dark .fill { fill: var(--bg-base); }
.divider-tri.to-warm .fill { fill: #FDF6EE; }

/* ============================================================
   HERO — Editorial Anchor (Hero A)
   Dark architectural still, light type, one orange accent.
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: clamp(7rem, 12vh, 10rem) 0 clamp(3rem, 7vh, 5rem);
  background: var(--bg-deep);
  color: var(--on-dark);
  isolation: isolate;
  overflow: hidden;
}

/* Background still — heavily treated to read as architectural texture */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  filter: grayscale(0.7) contrast(1.18) brightness(0.55);
  opacity: 0;
  transform: scale(1.06);
  will-change: opacity, transform;
}
.hero__still:first-child {
  opacity: 1;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20,17,16,0.65) 0%, rgba(20,17,16,0.35) 30%, rgba(20,17,16,0.7) 75%, var(--bg-deep) 100%),
    linear-gradient(90deg, rgba(20,17,16,0.55) 0%, rgba(20,17,16,0.15) 55%, rgba(20,17,16,0) 100%);
  pointer-events: none;
}

.hero__shell {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2rem, 5vh, 3.5rem);
  width: 100%;
  flex: 1 1 auto;
}

/* Top meta row */
.hero__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--rhythm-m);
  flex-wrap: wrap;
}
.hero__top .eyebrow {
  color: var(--on-dark);
  position: relative;
  padding-left: 2.25rem;
}
.hero__top .eyebrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.5rem;
  height: 1px;
  background: var(--accent);
}
.hero__top .meta {
  color: var(--on-dark-soft);
  text-align: right;
  letter-spacing: 0.06em;
}

/* Headline block */
.hero__lead {
  position: relative;
  padding-left: clamp(1rem, 2vw, 1.75rem);
  align-self: flex-start;
  /* Wide enough that "Built to" and "Perfection." each sit on one line
     at the display-xl size; the sub wraps to this same block width. */
  max-width: min(42rem, 46vw);
}
.hero__rule {
  position: absolute;
  left: 0;
  top: 0.3em;
  bottom: 1.2em;
  width: 2px;
  background: var(--accent);
  transform-origin: top;
  animation: hero-rule-grow 1.4s var(--ease-arch) 0.4s both;
}
@keyframes hero-rule-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
.hero__headline {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: var(--fs-display-xl);
  line-height: 0.94;
  letter-spacing: -0.035em;
  color: var(--on-dark);
  margin: 0;
}
.hero__headline .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.05em;
}
.hero__headline .word > span {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}
.hero__headline em {
  font-style: normal;
  color: var(--accent);
}

.hero__sub {
  font-family: var(--ff-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2.5rem);
  line-height: 1.3;
  color: var(--on-dark-soft);
  max-width: 32ch;
  margin: clamp(1.5rem, 3vh, 2.25rem) 0 0;
  opacity: 0;
  transform: translateY(20px);
}

/* Triangle bottom-right — paired (fill + outline), single accent moment */
.hero__tri {
  position: absolute;
  right: -3vw;
  bottom: 12vh;
  width: clamp(220px, 30vw, 460px);
  z-index: 1;
  opacity: 0.95;
  pointer-events: none;
}
.hero__tri .fill { fill: var(--accent); opacity: 0.92; }
.hero__tri .outline {
  fill: none;
  stroke: var(--on-dark);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  opacity: 0.55;
}

/* Counters bar — bottom of hero, full-width tabular row */
.hero__counters {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  padding-top: var(--rhythm-m);
  border-top: 1px solid var(--rule-on-dark);
}
.counter {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
}
.counter__num {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(2.75rem, 6vw, 5rem);
  line-height: 0.9;
  color: var(--on-dark);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  position: relative;
  padding-bottom: 0.45rem;
}
.counter__num::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 1200ms var(--ease-arch);
  transition-delay: 400ms;
}
.counter.is-visible .counter__num::after { width: 56px; }
.counter__label {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--on-dark);
  margin-top: 0.25rem;
}
.counter__total {
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--on-dark-soft);
}

/* Scroll cue — bottom-right inside counters row */
.hero__scroll {
  position: absolute;
  bottom: clamp(2.5rem, 7vw, 6rem);
  right: var(--gutter);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  pointer-events: none;
}
.hero__scroll-label {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--on-dark-soft);
  writing-mode: vertical-rl;
}
.hero__scroll-line {
  position: relative;
  display: block;
  width: 1px;
  height: 60px;
  background: var(--on-dark-muted);
  opacity: 0.6;
  overflow: hidden;
}
.hero__scroll-line::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 40%;
  background: var(--accent);
  transform: translateY(-110%);
  animation: scroll-tick 2.2s var(--ease-arch) infinite;
  will-change: transform;
}
@keyframes scroll-tick {
  0%   { transform: translateY(-110%); }
  60%  { transform: translateY(260%); }
  100% { transform: translateY(260%); }
}
@media (max-width: 1024px) {
  .hero__scroll { display: none; }
}

/* iPad / tablet — landscape + portrait, plus small laptops.
   Bumped to 1366px to catch iPad Pro 13" landscape (1366×1024).
   Anchor counters to bottom of viewport (above the fold), shrink headline,
   widen lead so sub-text reads in ~2 lines, tighten vertical rhythm. */
@media (max-width: 1366px) {
  .hero {
    padding-top: clamp(4.5rem, 7vh, 6rem);
    padding-bottom: clamp(1.5rem, 4vh, 2.75rem);
  }
  .hero__shell {
    justify-content: space-between;
    gap: clamp(1rem, 2.5vh, 2rem);
  }
  .hero__lead {
    max-width: none;
    padding-right: clamp(2rem, 6vw, 6rem);
  }
  .hero__headline {
    font-size: clamp(2.75rem, 7vw, 4.5rem);
    line-height: 0.96;
  }
  .hero__sub {
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    max-width: 52ch;
    margin-top: clamp(0.75rem, 1.5vh, 1.25rem);
  }
  .hero__counters {
    padding-top: clamp(0.75rem, 2vh, 1.25rem);
  }
  .counter__num {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
  }
  .counter__total {
    display: none;
  }
}

@media (max-width: 768px) {
  .hero__counters {
    grid-template-columns: 1fr 1fr;
    gap: var(--rhythm-m);
  }
  .hero__lead { max-width: none; }
  .hero__top .meta { display: none; }
  .hero__tri { bottom: 28vh; right: -10vw; opacity: 0.55; }
}
@media (max-width: 480px) {
  .hero__counters { grid-template-columns: 1fr; gap: var(--rhythm-s); }
  .hero__sub {
    max-width: 32ch;
    font-size: clamp(1rem, 4.4vw, 1.25rem);
  }
}

/* ---------- Typewriter (rotating word) ---------------------- */
.typewriter {
  display: inline-flex;
  align-items: baseline;
  vertical-align: baseline;
  color: var(--accent);
  font-style: italic;
  white-space: pre;
}
.typewriter__caret {
  display: inline-block;
  width: 2px;
  height: 0.92em;
  margin: 0 0.04em -0.04em;
  background: var(--accent);
  animation: typewriter-blink 900ms steps(2, end) infinite;
  vertical-align: baseline;
}
@keyframes typewriter-blink {
  50% { opacity: 0; }
}

/* ---------- Perimeter light streak (shared) ---------------- */
.purpose__media::after,
.proj-tile::after,
.chairman__portrait-wrap::after,
.careers__media::after {
  content: '';
  position: absolute;
  inset: -1.5px;
  padding: 1.5px;
  background: conic-gradient(
    from var(--shine-angle, 0deg),
    transparent 0deg,
    transparent 240deg,
    rgba(255, 111, 32, 0.0) 270deg,
    rgba(255, 111, 32, 0.9) 320deg,
    rgba(255, 200, 150, 1) 335deg,
    rgba(255, 111, 32, 0.9) 350deg,
    rgba(255, 111, 32, 0.0) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 4px rgba(255, 111, 32, 0.7)) drop-shadow(0 0 10px rgba(255, 111, 32, 0.35));
  animation: perimeter-shine 5s linear infinite;
  pointer-events: none;
  z-index: 5;
}
.proj-tile::after {
  top: -1.5px;
  bottom: auto;
  height: calc(clamp(280px, 38vw, 560px) + 3px);
}
.purpose__media::after { animation-delay: -1.2s; }
.proj-tile:nth-child(2)::after { animation-delay: -2.4s; }
.proj-tile:nth-child(3)::after { animation-delay: -3.6s; }
.chairman__portrait-wrap::after { animation-delay: -0.8s; }
.careers__media::after { animation-delay: -2.0s; }
@keyframes perimeter-shine {
  to { --shine-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .purpose__media::after,
  .proj-tile::after,
  .chairman__portrait-wrap::after,
  .careers__media::after { animation: none; }
}

/* ---------- PURPOSE — Mission & Vision ---------------------- */
.purpose {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(80% 55% at 15% 12%, rgba(250, 238, 227, 0.85), transparent 75%),
    radial-gradient(70% 50% at 90% 95%, rgba(245, 228, 213, 0.95), transparent 78%),
    linear-gradient(180deg, #FDF6EE 0%, #FBF0E3 40%, #FAEEE3 100%);
  background-size: 140% 140%, 140% 140%, 100% 100%;
  background-position: 0% 0%, 100% 100%, 0 0;
  padding-block: clamp(12rem, 26vh, 18rem) clamp(8rem, 16vh, 12rem);
  overflow: hidden;
  animation: purpose-breathe 18s ease-in-out infinite alternate;
}
@keyframes purpose-breathe {
  0%   { background-position: 0% 0%,   100% 100%, 0 0; }
  50%  { background-position: 30% 20%, 70% 70%,   0 0; }
  100% { background-position: 10% 40%, 90% 60%,   0 0; }
}
.purpose::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: clamp(80px, 14vw, 200px);
  background: var(--bg-deep);
  clip-path: polygon(0 0, 100% 0, 100% 25%, 0 66%);
  pointer-events: none;
  z-index: 1;
}
.purpose__shell { position: relative; z-index: 2; }
.purpose__shell {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: clamp(5rem, 12vh, 8rem);
}
.purpose__intro {
  text-align: center;
  margin-bottom: var(--rhythm-l);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rhythm-s);
}
.purpose__intro .eyebrow {
  position: relative;
  padding-left: 2.25rem;
}
.purpose__intro .eyebrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.5rem;
  height: 1px;
  background: var(--accent);
}
.purpose__intro .display-l {
  margin-top: 0.25rem;
  max-width: 16ch;
}
.purpose__row {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
}
.purpose__row--reverse {
  grid-template-columns: 1.1fr 1fr;
}
.purpose__row--reverse .purpose__copy { order: 2; }
.purpose__row--reverse .purpose__media { order: 1; }

.purpose__copy {
  display: flex;
  flex-direction: column;
  gap: var(--rhythm-s);
  position: relative;
  padding-left: clamp(1rem, 2vw, 1.75rem);
}
.purpose__copy::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  bottom: 1em;
  width: 2px;
  background: var(--accent);
}
.purpose__index {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
}
.purpose__title {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: var(--fs-display-l);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ink-primary);
  margin: 0;
}
.purpose__quote {
  font-family: var(--ff-display);
  font-weight: 300;
  font-style: italic;
  font-size: var(--fs-display-m);
  line-height: 1.25;
  color: var(--ink-secondary);
  max-width: 32ch;
  margin: var(--rhythm-s) 0 0;
}
.purpose__media {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 24px 50px rgba(60, 40, 24, 0.20),
    0 6px 14px rgba(60, 40, 24, 0.12);
  transition: box-shadow 500ms var(--ease-arch), transform 500ms var(--ease-arch);
}
.purpose__media:hover {
  box-shadow:
    0 36px 70px rgba(60, 40, 24, 0.26),
    0 8px 16px rgba(60, 40, 24, 0.14);
  transform: translateY(-4px);
}
.purpose__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 1600ms var(--ease-arch);
  filter: contrast(1.04) saturate(0.95);
}
.purpose__row.is-visible .purpose__media img { transform: scale(1); }

/* Mission helmet — show the whole image, full proportions, never cropped.
   Container takes the image's natural ratio (1046×1600) so contain leaves
   no letterbox; the Ken Burns zoom is disabled to avoid edge cropping. */
figure.purpose__media--full { aspect-ratio: 1046 / 1600; background: var(--bg-base); }
.purpose__media--full img { object-fit: contain; transform: none; }
.purpose__row.is-visible .purpose__media--full img { transform: none; }

@media (max-width: 900px) {
  .purpose__row,
  .purpose__row--reverse {
    grid-template-columns: 1fr;
    gap: var(--rhythm-m);
  }
  .purpose__row--reverse .purpose__copy { order: 0; }
  .purpose__row--reverse .purpose__media { order: 1; }
  .purpose__media { aspect-ratio: 5 / 4; }
}

/* ---------- SUBSIDIARIES ------------------------------------ */
.subs {
  position: relative;
  background: var(--bg-deep);
  color: var(--on-dark);
  overflow: hidden;
}
.subs__intro {
  padding: clamp(6rem, 14vh, 10rem) var(--gutter) var(--rhythm-l);
  max-width: var(--container-max);
  margin-inline: auto;
}
.subs__intro .eyebrow.on-dark {
  position: relative;
  padding-left: 2.25rem;
}
.subs__intro .eyebrow.on-dark::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.5rem;
  height: 1px;
  background: var(--accent);
}
.subs__intro .display-l { color: var(--on-dark); margin-top: 1rem; max-width: 18ch; }
.subs__intro .eyebrow.on-dark { color: var(--sec-warm-gray-2); }

.subs__track-wrap {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
}
.subs__track {
  display: flex;
  height: 100%;
  will-change: transform;
}
.sub-card {
  flex: 0 0 90vw;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rhythm-l);
  padding: var(--rhythm-l) var(--gutter);
  border-right: 1px solid var(--rule-on-dark);
  align-items: center;
}
.sub-card:last-child { border-right: 0; }
.sub-card__index {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--rhythm-s);
}
.sub-card__logo {
  display: block;
  height: clamp(48px, 6vw, 80px);
  width: auto;
  max-width: 220px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: var(--rhythm-m);
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.sub-card__logo--invert {
  filter:
    brightness(0) invert(1)
    drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45));
}
.sub-card__name {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: var(--fs-display-m);
  line-height: 1.05;
  color: var(--on-dark);
  margin: 0.5rem 0 var(--rhythm-s);
  letter-spacing: -0.02em;
}
.sub-card__tag {
  font-family: var(--ff-body);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-block;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
}
.sub-card__body {
  font-family: var(--ff-body);
  font-size: var(--fs-body-l);
  line-height: 1.65;
  color: var(--sec-warm-gray-2);
  margin: var(--rhythm-m) 0 var(--rhythm-m);
  max-width: 38ch;
}
.sub-card__media {
  position: relative;
  height: 70%;
  align-self: center;
  isolation: isolate;
  overflow: hidden;
  filter:
    drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55))
    drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
}
.sub-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(0.9);
  transform-origin: center;
  animation: sub-card-kenburns 18s var(--ease-arch) infinite alternate;
  will-change: transform;
}
.sub-card__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}
.sub-card__frame rect {
  fill: none;
}
.sub-card__frame-border {
  stroke: rgba(255, 111, 32, 0.35);
  stroke-width: 1;
}
.sub-card__frame-shine {
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 10 90;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 6px rgba(255, 111, 32, 0.85)) drop-shadow(0 0 14px rgba(255, 111, 32, 0.45));
  animation: sub-card-shine 4.5s linear infinite;
}
@keyframes sub-card-shine {
  to { stroke-dashoffset: -100; }
}
.sub-card:nth-child(2) .sub-card__frame-shine { animation-delay: -1.1s; }
.sub-card:nth-child(3) .sub-card__frame-shine { animation-delay: -2.2s; }
.sub-card:nth-child(4) .sub-card__frame-shine { animation-delay: -3.3s; }
.sub-card:nth-child(2) .sub-card__media img { animation-delay: -4s; }
.sub-card:nth-child(3) .sub-card__media img { animation-delay: -8s; }
.sub-card:nth-child(4) .sub-card__media img { animation-delay: -12s; }
@keyframes sub-card-kenburns {
  from { transform: scale(1.04) translate3d(-1.5%, 1%, 0); }
  to   { transform: scale(1.14) translate3d(1.5%, -1.2%, 0); }
}
.sub-card__media:hover img {
  animation-play-state: paused;
}

.subs__progress {
  position: absolute;
  bottom: 2rem;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: var(--rule-on-dark);
}
.subs__progress-bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
}
.subs__progress-label {
  position: absolute;
  bottom: 2.6rem;
  left: var(--gutter);
  font-family: var(--ff-body);
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sec-warm-gray-2);
}

@media (max-width: 900px) {
  .subs__track-wrap { height: auto; }
  .subs__track { flex-direction: column; transform: none !important; }
  .sub-card {
    flex: 0 0 auto;
    grid-template-columns: 1fr;
    border-right: 0;
    border-bottom: 1px solid var(--rule-on-dark);
    padding-block: var(--rhythm-l);
  }
  .sub-card__media { height: 40vh; }
  .subs__progress, .subs__progress-label { display: none; }
}

/* ---------- SELECTED PROJECTS — marquee strip --------------- */
.projects {
  position: relative;
  background: var(--bg-base);
  padding: clamp(6rem, 14vh, 10rem) 0 clamp(8rem, 16vh, 12rem);
  overflow: hidden;
}
.projects__intro {
  text-align: center;
  margin-bottom: var(--rhythm-l);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rhythm-s);
}
.projects__intro .eyebrow {
  position: relative;
  padding-left: 2.25rem;
}
.projects__intro .eyebrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.5rem;
  height: 1px;
  background: var(--accent);
}
.projects__intro .display-l {
  margin: var(--rhythm-xs) auto var(--rhythm-m);
  max-width: 20ch;
}
.projects__lede {
  font-family: var(--ff-body);
  font-size: var(--fs-body-l);
  color: var(--ink-secondary);
  line-height: 1.65;
  max-width: 56ch;
  margin: 0 auto;
}

.projects__marquee {
  position: relative;
  width: 100%;
  padding-block: var(--rhythm-l);
}
.projects__viewport {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

/* Hover arrows — manual nudge while the marquee keeps drifting */
.projects__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(44px, 4vw, 56px);
  height: clamp(44px, 4vw, 56px);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--bg-deep-alt);
  color: var(--on-dark);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%) scale(0.9);
  transition: opacity var(--dur-quick) var(--ease-arch),
              transform var(--dur-quick) var(--ease-arch),
              background var(--dur-quick) var(--ease-arch);
  box-shadow: 0 12px 28px rgba(60, 40, 24, 0.24);
}
.projects__arrow--prev { left: clamp(0.75rem, 2vw, 2rem); }
.projects__arrow--next { right: clamp(0.75rem, 2vw, 2rem); }
.projects__arrow svg {
  width: 42%;
  height: 42%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.projects__marquee:hover .projects__arrow,
.projects__marquee:focus-within .projects__arrow {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
.projects__arrow:hover { background: var(--accent); }
.projects__arrow:active { transform: translateY(-50%) scale(0.94); }
.projects__arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  opacity: 1;
}
@media (hover: none) {
  .projects__arrow { opacity: 1; transform: translateY(-50%) scale(1); }
}
.projects__row {
  display: flex;
  gap: var(--rhythm-m);
  width: max-content;
  padding-inline: var(--gutter);
  will-change: transform;
}

.proj-tile {
  flex: 0 0 clamp(280px, 32vw, 460px);
  margin: 0;
  position: relative;
}
.proj-tile {
  position: relative;
  isolation: isolate;
}
.proj-tile img {
  width: 100%;
  height: clamp(280px, 38vw, 560px);
  object-fit: cover;
  filter: contrast(1.04) saturate(0.92);
  box-shadow:
    0 20px 40px rgba(60, 40, 24, 0.18),
    0 6px 12px rgba(60, 40, 24, 0.10);
  transition: transform var(--dur-slow) var(--ease-arch), filter var(--dur-mid) var(--ease-arch), box-shadow var(--dur-mid) var(--ease-arch);
}
.proj-tile:hover img {
  transform: translateY(-6px) scale(1.02);
  filter: contrast(1.08) saturate(1.0);
  box-shadow:
    0 30px 60px rgba(60, 40, 24, 0.26),
    0 10px 18px rgba(60, 40, 24, 0.16);
}
.proj-tile figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: var(--rhythm-s) 0 0;
}
.proj-tile figcaption span {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  color: var(--ink-primary);
  letter-spacing: -0.01em;
}
.proj-tile figcaption em {
  font-style: normal;
  font-family: var(--ff-body);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}
/* Clickable project tiles → detail page (project.html) */
.proj-tile__link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.proj-tile__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}
/* Press feedback — scale the image up on tap/click */
.proj-tile__link:active img {
  transform: translateY(-6px) scale(1.05);
  filter: contrast(1.08) saturate(1.0);
}
@media (hover: hover) {
  .proj-tile__link:hover figcaption span { color: var(--accent); }
}

/* ---------- TIMELINE ---------------------------------------- */
.timeline {
  position: relative;
  background: var(--bg-base);
  padding: clamp(8rem, 16vh, 12rem) 0 clamp(8rem, 16vh, 12rem);
}
.timeline__shell {
  max-width: 960px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
}
.timeline__intro {
  text-align: center;
  margin-bottom: var(--rhythm-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rhythm-s);
}
.timeline__intro .eyebrow {
  position: relative;
  padding-left: 2.25rem;
}
.timeline__intro .eyebrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.5rem;
  height: 1px;
  background: var(--accent);
}
.timeline__intro .display-l { margin-top: 0.25rem; max-width: 18ch; }

.timeline__rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--rule);
  transform: translateX(-50%);
}
.timeline__rail-fill {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: 0%;
  background: var(--accent);
  will-change: height;
}

.timeline__items {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--rhythm-l);
  margin-top: var(--rhythm-xl);
}
.timeline__item {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  grid-template-rows: auto auto auto;
  align-items: start;
  column-gap: var(--rhythm-m);
  row-gap: 0.35rem;
  padding-block: var(--rhythm-s);
}
/* Children cascade in one-by-one as the rail reaches each item */
.timeline__item .timeline__year,
.timeline__item .timeline__milestone,
.timeline__item .timeline__detail {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease-arch), transform 700ms var(--ease-arch);
}
.timeline__item.is-visible .timeline__year      { opacity: 1; transform: translateY(0); transition-delay: 80ms; }
.timeline__item.is-visible .timeline__milestone { opacity: 1; transform: translateY(0); transition-delay: 260ms; }
.timeline__item.is-visible .timeline__detail    { opacity: 1; transform: translateY(0); transition-delay: 440ms; }
.timeline__item .timeline__content { display: contents; }
.timeline__item .timeline__year      { grid-row: 1; }
.timeline__item .timeline__milestone { grid-row: 2; }
.timeline__item .timeline__detail    { grid-row: 3; }
.timeline__item:nth-child(odd) .timeline__year,
.timeline__item:nth-child(odd) .timeline__milestone,
.timeline__item:nth-child(odd) .timeline__detail {
  grid-column: 1;
  text-align: right;
}
.timeline__item:nth-child(even) .timeline__year,
.timeline__item:nth-child(even) .timeline__milestone,
.timeline__item:nth-child(even) .timeline__detail {
  grid-column: 3;
}
.timeline__year {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: var(--fs-display-m);
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.02em;
}
.timeline__milestone {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  color: var(--ink-primary);
  margin: 0.35rem 0 0.5rem;
  line-height: 1.2;
}
.timeline__detail {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  color: var(--ink-secondary);
  margin: 0;
  line-height: 1.6;
}
.timeline__node {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  width: 14px;
  height: 14px;
  background: var(--bg-base);
  border: 2px solid var(--accent);
  border-radius: 50%;
  margin-inline: auto;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: scale(0.4);
  transition: background var(--dur-mid) var(--ease-arch), transform 600ms var(--ease-arch), box-shadow var(--dur-mid) var(--ease-arch), opacity 500ms var(--ease-arch);
}
.timeline__node::before,
.timeline__node::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  opacity: 0;
  pointer-events: none;
  animation: timeline-pulse 2.6s var(--ease-arch) infinite;
}
.timeline__node::after { animation-delay: 1.3s; }
@keyframes timeline-pulse {
  0%   { transform: scale(1);   opacity: 0.85; }
  70%  { transform: scale(2.6); opacity: 0;    }
  100% { transform: scale(2.6); opacity: 0;    }
}
@media (prefers-reduced-motion: reduce) {
  .timeline__node::before,
  .timeline__node::after { animation: none; }
}
.timeline__item.is-visible .timeline__node {
  background: var(--accent);
  opacity: 1;
  transform: scale(1.25);
  box-shadow: 0 0 0 6px rgba(255, 111, 32, 0.12);
}
.timeline__node::before,
.timeline__node::after { opacity: 0; }
.timeline__item.is-visible .timeline__node::before,
.timeline__item.is-visible .timeline__node::after { opacity: 0.85; }

@media (max-width: 768px) {
  .timeline__rail { left: 20px; transform: none; }
  .timeline__item { grid-template-columns: 40px 1fr; }
  .timeline__item:nth-child(odd) .timeline__year,
  .timeline__item:nth-child(odd) .timeline__milestone,
  .timeline__item:nth-child(odd) .timeline__detail,
  .timeline__item:nth-child(even) .timeline__year,
  .timeline__item:nth-child(even) .timeline__milestone,
  .timeline__item:nth-child(even) .timeline__detail {
    grid-column: 2;
    text-align: left;
    padding-left: var(--rhythm-s);
  }
  .timeline__node { grid-column: 1; }
}

/* ---------- CORE VALUES ------------------------------------- */
.values {
  position: relative;
  background: var(--bg-deep);
  color: var(--on-dark);
  padding: clamp(8rem, 16vh, 12rem) 0 clamp(10rem, 18vh, 14rem);
  overflow: hidden;
}
.values__shell {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.values__intro {
  margin: 0 auto var(--rhythm-xl);
  max-width: none;
  text-align: center;
}
.values__intro .eyebrow.on-dark {
  position: relative;
  padding-left: 2.25rem;
  display: inline-block;
}
.values__intro .eyebrow.on-dark::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.5rem;
  height: 1px;
  background: var(--accent);
}
.values__intro .display-l { color: var(--on-dark); margin-top: 1rem; }

.values__list {
  display: flex;
  flex-direction: column;
}
.value-row {
  display: grid;
  grid-template-columns: 80px 1fr 2fr;
  gap: var(--rhythm-m);
  align-items: baseline;
  padding-block: clamp(1.5rem, 3vh, 2.5rem);
  border-top: 1px solid var(--rule-on-dark);
  position: relative;
}
.value-row:last-child { border-bottom: 1px solid var(--rule-on-dark); }
.value-row::after {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  height: 1px;
  width: 0;
  background: var(--accent);
  transition: width var(--dur-mid) var(--ease-arch);
}
.value-row:hover::after { width: 100%; }
.value-row__index {
  font-family: var(--ff-body);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--sec-warm-gray-2);
  padding-top: 0.5rem;
}
.value-row__name {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1;
  color: var(--on-dark);
  letter-spacing: -0.02em;
  margin: 0;
  transition: color var(--dur-mid) var(--ease-arch), transform var(--dur-mid) var(--ease-arch);
}
.value-row:hover .value-row__name { color: var(--accent); transform: translateX(8px); }
.value-row__desc {
  font-family: var(--ff-body);
  font-size: var(--fs-body-l);
  line-height: 1.65;
  color: var(--sec-warm-gray-2);
  margin: 0;
}

@media (max-width: 768px) {
  .value-row { grid-template-columns: 1fr; gap: var(--rhythm-s); }
}

/* ---------- CHAIRMAN ---------------------------------------- */
.chairman {
  position: relative;
  background: var(--bg-base);
  padding: clamp(8rem, 16vh, 12rem) 0 clamp(8rem, 16vh, 12rem);
  overflow: hidden;
}
.chairman__shell {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--rhythm-xl);
  align-items: start;
}
.chairman__portrait-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  isolation: isolate;
}
.chairman__portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.04) saturate(0.92);
  box-shadow:
    0 28px 60px rgba(60, 40, 24, 0.22),
    0 8px 18px rgba(60, 40, 24, 0.12);
}
.chairman__portrait-wrap::before {
  display: none;
}
.chairman__body { padding-top: 2rem; }
.chairman__body .eyebrow {
  position: relative;
  padding-left: 2.25rem;
}
.chairman__body .eyebrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.5rem;
  height: 1px;
  background: var(--accent);
}
.chairman__quote {
  font-family: var(--ff-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  line-height: 1.3;
  color: var(--ink-primary);
  margin: var(--rhythm-m) 0;
  letter-spacing: -0.01em;
}
.chairman__quote::before {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  background: var(--accent);
  margin-bottom: var(--rhythm-m);
}
.chairman__para {
  color: var(--ink-secondary);
  max-width: 56ch;
  line-height: 1.7;
  margin: 0 0 var(--rhythm-s);
}
.chairman__sig {
  margin-top: var(--rhythm-l);
  padding-top: var(--rhythm-m);
  border-top: 1px solid var(--rule);
  max-width: 56ch;
}
.chairman__sig-name {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  color: var(--ink-primary);
}
.chairman__sig-role {
  margin-top: var(--rhythm-s);
  font-size: var(--fs-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}

@media (max-width: 900px) {
  .chairman__shell { grid-template-columns: 1fr; gap: var(--rhythm-l); }
}

/* ---------- CERTIFICATIONS (ISO) ---------------------------- */
.certs {
  position: relative;
  background: #FDF6EE;
  padding: clamp(7rem, 14vh, 11rem) 0 clamp(9rem, 18vw, 14rem);
  overflow: hidden;
}
.certs__intro {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.certs__lead {
  margin-top: 1.25rem;
  color: var(--ink-secondary);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.6;
  max-width: 42ch;
}
.certs__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}
.cert-card { display: flex; }
.cert-card__body {
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--ink-primary);
  background: var(--bg-base);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04);
}
.cert-card__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2.25rem, 5vw, 3.25rem) 0;
  background: #ECE8E4;
  color: var(--ink-primary);
}
.cert-card__badge svg,
.cert-card__badge img {
  width: clamp(92px, 14.5vw, 128px);
  height: auto;
}
.cert-card__ring { stroke: var(--accent); }
.cert-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.25rem 1.4rem 1.5rem;
  border-top: 3px solid var(--accent);
}
.cert-card__code {
  font-family: var(--ff-display, var(--ff-body));
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.cert-card__name {
  font-size: 0.8125rem;
  color: var(--ink-secondary);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
@media (max-width: 760px) {
  .certs__grid { grid-template-columns: 1fr; max-width: 24rem; margin-inline: auto; }
}

/* ---------- CAREERS ----------------------------------------- */
.careers {
  position: relative;
  background: #F9F8F6;
  padding: clamp(10rem, 22vh, 16rem) 0 clamp(10rem, 22vh, 16rem);
  overflow: hidden;
  isolation: isolate;
}
/* Top slant now handled by the .certs section's bottom divider-tri above it. */
.careers::before { display: none; }
.careers::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(80px, 14vw, 200px);
  background: var(--bg-deep);
  clip-path: polygon(0 100%, 100% 100%, 100% 30%, 0 70%);
  pointer-events: none;
  z-index: 1;
}
.careers__shell { position: relative; z-index: 2; }
.careers__shell {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--rhythm-xl);
  align-items: center;
}
.careers__text .eyebrow {
  position: relative;
  padding-left: 2.25rem;
}
.careers__text .eyebrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.5rem;
  height: 1px;
  background: var(--accent);
}
.careers__media {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 28px 60px rgba(60, 40, 24, 0.2),
    0 8px 16px rgba(60, 40, 24, 0.12);
  transition: box-shadow 500ms var(--ease-arch), transform 500ms var(--ease-arch);
}
.careers__media:hover {
  box-shadow:
    0 38px 80px rgba(60, 40, 24, 0.28),
    0 10px 20px rgba(60, 40, 24, 0.16);
  transform: translateY(-4px);
}
.careers__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.04) saturate(0.92);
  transition: transform 1400ms var(--ease-arch);
}
.careers:hover .careers__media img { transform: scale(1.03); }
.careers__text .display-l {
  margin: var(--rhythm-s) 0 var(--rhythm-m);
  max-width: 12ch;
}
.careers__text p {
  font-family: var(--ff-body);
  font-size: var(--fs-body-l);
  color: var(--ink-secondary);
  line-height: 1.65;
  margin: 0 0 var(--rhythm-l);
  max-width: 38ch;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--ink-primary);
  color: var(--on-dark);
  border: 1px solid var(--ink-primary);
  transition: background var(--dur-mid) var(--ease-arch), color var(--dur-mid) var(--ease-arch), letter-spacing var(--dur-mid) var(--ease-arch), border-color var(--dur-mid) var(--ease-arch);
}
.btn:hover { background: var(--accent); border-color: var(--accent); letter-spacing: 0.26em; }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--ghost {
  background: transparent;
  color: var(--ink-primary);
}
.btn--ghost:hover { background: var(--ink-primary); color: var(--on-dark); border-color: var(--ink-primary); letter-spacing: 0.26em; }
.btn__arrow {
  width: 16px;
  height: 8px;
  transition: transform var(--dur-mid) var(--ease-arch);
}

@media (max-width: 900px) {
  .careers__shell { grid-template-columns: 1fr; gap: var(--rhythm-l); }
}

/* ---------- CONTACT / FOOTER -------------------------------- */
.contact {
  background: var(--bg-deep);
  color: var(--on-dark);
  padding: clamp(5rem, 11vh, 8rem) 0 var(--rhythm-l);
  position: relative;
  /* Pull up 1px so the dark top edge covers a sub-pixel cream hairline: the
     careers::after seam wedge is clipped by `.careers{overflow:hidden}`, so its
     -1px bleed can't reach here and a light seam shows at fractional (Lenis)
     scroll offsets. */
  margin-top: -1px;
  overflow: hidden;
  isolation: isolate;
}
.contact::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70%;
  background: url('../assets/footerbg.svg') center bottom / cover no-repeat;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 100%);
}
.contact__shell {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 3;
}
.contact__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--rhythm-l);
  padding-bottom: 0;
  border-bottom: 1px solid var(--rule-on-dark);
}
.contact__col h4 {
  display: inline-block;
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sec-warm-gray-2);
  margin: 0 0 var(--rhythm-m);
  padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--accent);
}
.contact__col p, .contact__col li {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  color: var(--on-dark);
  line-height: 1.7;
  margin: 0 0 0.35rem;
}
.contact__col a { transition: color var(--dur-quick) var(--ease-arch); }
.contact__col a:hover { color: var(--accent); }
.contact__col ul { list-style: none; margin: 0; padding: 0; }

.contact__bottom {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: clamp(6.5rem, 7vw, 7rem);
  padding-top: var(--rhythm-l);
  gap: var(--rhythm-s) var(--rhythm-l);
}
.contact__wordmark {
  display: inline-block;
  justify-self: start;
  line-height: 0;
}
.contact__logo {
  display: block;
  width: clamp(150px, 18vw, 240px);
  height: auto;
}
.contact__legalgroup {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  text-align: center;
}
.contact__copy,
.contact__legal {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  color: var(--sec-warm-gray-2);
  margin: 0;
}
.contact__credit {
  text-decoration: none;
  color: inherit;
  transition: color var(--dur-quick) var(--ease-arch);
}
.contact__credit:hover { color: var(--accent); }

/* Footer edge decoration — full-bleed lines that always run from one viewport
   edge to the other (preserveAspectRatio=none keeps them touching the edges at
   every resolution). A full-width horizontal rule sits at the top of the bottom
   bar; a shaded brand triangle is formed ABOVE it in the top-right, its diagonal
   running from the top edge down to the right edge. The band sits in the gap
   above the bottom bar so the triangle never crosses column text. */
/* Shaded brand triangle: diagonal from the top edge of this band down to the
   section bottom-right corner; the hairline above crosses THROUGH it.
   Section-anchored and BEHIND the shell text. */
.contact__edge {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  bottom: 100%;
  height: 90px;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.contact__edge svg { display: block; width: 100%; height: 100%; overflow: visible; }
.contact__edge-fill { fill: var(--on-dark); opacity: 0.32; }
/* Single continuous stroke: diagonal (top edge -> bottom-right corner) ->
   full-width hairline. Because it is one polyline sharing the corner vertex,
   the diagonal and the hairline can never drift apart at any resolution. */
.contact__edge-line {
  fill: none;
  stroke: var(--on-dark);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.9;
}

/* Four equal, full-width columns; the SVG hairline replaces the grid border. */
.contact__grid {
  border-bottom: 0;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--rhythm-l) var(--rhythm-l);
}

@media (max-width: 1024px) {
  .contact__grid { grid-template-columns: 1fr 1fr; gap: var(--rhythm-l) var(--rhythm-xl); }
}
@media (max-width: 760px) {
  .contact__bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: var(--rhythm-m);
  }
  .contact__wordmark { justify-self: center; }
  .contact__legalgroup { grid-column: auto; }
}
@media (max-width: 600px) {
  .contact__grid { grid-template-columns: 1fr; gap: var(--rhythm-l); max-width: 26rem; }
}

/* ---------- Reduced motion ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Selection --------------------------------------- */
::selection { background: var(--accent); color: var(--on-dark); }

/* ---------- MOBILE PATCHES ---------- */
/* Audit fixes for <=768px and <=480px. Desktop layout untouched. */

@media (max-width: 768px) {
  /* HERO — counters were getting squeezed off the visible viewport because
     hero centers content with min-height 100dvh. Tighten paddings and let
     counters sit at the natural end of the column. */
  .hero {
    min-height: auto;
    padding: clamp(6rem, 14vh, 8rem) 0 clamp(2.5rem, 6vh, 4rem);
  }
  .hero__shell {
    gap: clamp(1.75rem, 4vh, 2.5rem);
    flex: 0 1 auto;
    justify-content: flex-start;
  }
  .hero__counters {
    padding-top: var(--rhythm-s);
    gap: var(--rhythm-m);
  }
  .counter__num { font-size: clamp(2.25rem, 9vw, 3.25rem); }
  .counter__label { font-size: 0.72rem; letter-spacing: 0.2em; }
  .counter__total { font-size: 0.82rem; }

  /* PURPOSE — wedge overlay clears at ~80px; original 12rem top padding was
     overkill and pushed intro below the fold. Tighten and ensure intro left-
     aligns with body gutter on mobile so eyebrow + heading read clearly. */
  .purpose {
    padding-block: clamp(6rem, 14vw, 9rem) clamp(4rem, 10vh, 6rem);
  }
  .purpose__shell { gap: clamp(3rem, 8vh, 5rem); }
  .purpose__intro { text-align: left; align-items: flex-start; }
  .purpose__intro .display-l { max-width: none; }
  .purpose__row,
  .purpose__row--reverse { gap: var(--rhythm-s); }
  .purpose__copy { padding-left: 1rem; }
  .purpose__title { font-size: clamp(1.75rem, 8vw, 2.75rem); }
  .purpose__quote { font-size: clamp(1.15rem, 4.6vw, 1.5rem); max-width: none; }

  /* PROJECTS — intro heading + lede must render with side padding on mobile.
     Marquee horizontal-scroll OK as-is. */
  .projects { padding: clamp(5rem, 12vh, 8rem) 0 clamp(6rem, 14vh, 9rem); }
  .projects__intro { text-align: left; align-items: flex-start; padding-inline: var(--gutter); }
  .projects__intro .display-l { max-width: none; margin-inline: 0; }
  .projects__lede { margin-inline: 0; }
  .proj-tile img { height: clamp(220px, 60vw, 320px); }
  .proj-tile::after { height: calc(clamp(220px, 60vw, 320px) + 3px); }

  /* TIMELINE — intro left-align so heading isn't cramped centered under
     a 40px rail offset. Existing 768px rules at L1507 already handle rail. */
  .timeline { padding: clamp(6rem, 14vh, 9rem) 0 clamp(6rem, 14vh, 9rem); }
  .timeline__intro { text-align: left; align-items: flex-start; padding-left: 40px; }

  /* CORE VALUES — existing L1609 rule collapses to 1fr but the giant
     value-row__name (clamp 2-4rem at 5vw) and absent gap tuning made rows
     feel cramped. Tighten spacing and align text left. Also break index +
     name onto separate lines cleanly. */
  .values { padding: clamp(6rem, 14vh, 9rem) 0 clamp(8rem, 16vh, 11rem); }
  .values__intro { text-align: left; }
  .value-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding-block: var(--rhythm-m);
  }
  .value-row__index { padding-top: 0; }
  .value-row__name { font-size: clamp(2rem, 8vw, 2.75rem); margin-bottom: 0.25rem; }
  .value-row__desc { font-size: 1rem; line-height: 1.6; }
  /* Disable the hover-translate so tap doesn't shift the row off-screen. */
  .value-row:hover .value-row__name { transform: none; }

  /* CHAIRMAN — shell already collapses at 900. Constrain the orange triangle
     pseudo so its left edge can't poke past the viewport gutter, and reduce
     its scale so it doesn't fight the now-larger stacked portrait. */
  .chairman { padding: clamp(6rem, 14vh, 9rem) 0 clamp(6rem, 14vh, 9rem); }
  .chairman__portrait-wrap {
    aspect-ratio: 4 / 5;
    max-width: 80vw;
    margin-inline: auto;
  }
  .chairman__portrait-wrap::before {
    left: -4%;
    bottom: -2%;
    width: 22%;
  }
  .chairman__body { padding-top: 0.5rem; }
  .chairman__quote { font-size: clamp(1.25rem, 5.2vw, 1.65rem); }

  /* CAREERS — stacks at 900. Re-check wedges fit and image keeps usable
     height. Add explicit z-index ordering so text sits above the dark wedge
     at the bottom on tall stacked layouts. */
  .careers { padding: clamp(7rem, 16vh, 10rem) 0 clamp(8rem, 18vh, 11rem); }
  .careers__shell { gap: var(--rhythm-l); }
  .careers__text .display-l { max-width: none; }
  .careers__text p { max-width: none; }
  .careers__media { aspect-ratio: 4 / 3; }
}

@media (max-width: 480px) {
  /* HERO — single-column counters (already handled at L800) plus tighter rule. */
  .hero__counters { padding-top: var(--rhythm-s); }
  .counter__num { font-size: clamp(2rem, 10vw, 2.75rem); }
  .hero__lead { padding-left: 0.75rem; }
  .hero__sub { font-size: clamp(1.1rem, 5vw, 1.4rem); margin-top: 1rem; }

  /* PURPOSE — even tighter for narrow phones */
  .purpose { padding-block: clamp(5rem, 18vw, 7rem) clamp(3rem, 9vh, 5rem); }
  .purpose__title { font-size: clamp(1.6rem, 9vw, 2.25rem); }
  .purpose__media { aspect-ratio: 4 / 3; }

  /* VALUES — keep border-top visible but reduce vertical rhythm */
  .value-row { padding-block: var(--rhythm-s); }

  /* CHAIRMAN — pull triangle further in on tiny widths */
  .chairman__portrait-wrap::before { width: 18%; left: -2%; }

  /* CAREERS — button stays in flow */
  .btn { padding: 0.85rem 1.25rem; }
}

/* ============================================================
   NAV — Subsidiaries inline list (top bar)
   ============================================================ */
.nav__subs {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: auto;
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nav__subs a {
  position: relative;
  color: inherit;
  padding-block: 0.35rem;
  transition: color var(--dur-quick) var(--ease-arch);
}
.nav__subs a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms var(--ease-arch);
}
.nav__subs a:hover { color: var(--accent); }
.nav__subs a:hover::after { transform: scaleX(1); }

@media (max-width: 900px) {
  .nav__subs { display: none; }
}

/* ============================================================
   OFFCANVAS — Subsidiaries sub-list
   ============================================================ */
.offcanvas__sublist {
  list-style: none;
  margin: 0 0 0.4rem 3.75rem;
  padding: 0.25rem 0 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border-left: 1px solid var(--rule-on-dark);
}
.offcanvas__sublist li { padding-left: 0.9rem; }
.offcanvas__sublist a {
  display: inline-block;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark);
  opacity: 0.7;
  padding-block: 0.25rem;
  transition: opacity var(--dur-quick) var(--ease-arch), color var(--dur-quick) var(--ease-arch), padding-left var(--dur-quick) var(--ease-arch);
}
.offcanvas__sublist a:hover { color: var(--accent); opacity: 1; padding-left: 0.4rem; }

/* ============================================================
   SUBS — Inline subsidiary nav strip under intro
   ============================================================ */
.subs__nav {
  list-style: none;
  margin: clamp(1.25rem, 2.5vh, 2rem) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.75rem, 2vw, 1.75rem) clamp(1.25rem, 3vw, 2.5rem);
}
.subs__nav a {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark);
  padding-block: 0.4rem;
  transition: color var(--dur-quick) var(--ease-arch);
}
.subs__nav a span {
  font-size: var(--fs-micro);
  color: var(--accent);
  letter-spacing: 0.24em;
}
.subs__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms var(--ease-arch);
}
.subs__nav a:hover { color: var(--accent); }
.subs__nav a:hover::after { transform: scaleX(1); }

/* ============================================================
   SUB-CARD — Website CTA button (under body copy)
   ============================================================ */
.sub-card__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: clamp(1rem, 2.2vh, 1.5rem);
  padding: 0.8rem 1.25rem;
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bg-deep);
  background: #FF6F20;
  border: 1px solid #FF6F20;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--dur-quick) var(--ease-arch);
}
/* Shine bar — sweeps left → right on hover */
.sub-card__cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  transform: translateX(-220%) skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
.sub-card__cta:hover { transform: translateX(2px); }
.sub-card__cta:hover::after {
  opacity: 1;
  transform: translateX(420%) skewX(-18deg);
  transition: transform 900ms var(--ease-arch), opacity 200ms var(--ease-arch);
}
.sub-card__cta-label { display: inline-block; }
.sub-card__cta-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  transition: transform var(--dur-quick) var(--ease-arch);
}
.sub-card__cta:hover .sub-card__cta-icon {
  transform: translate(2px, -2px);
}

/* SECi — italic "i" tucked tight to SEC so it reads as one word */
.seci-i {
  font-style: italic;
  text-transform: none;
  vertical-align: baseline;
  letter-spacing: 0;
  margin-inline-start: -0.14em;
  margin-inline-end: 0.02em;
}