/* ------------------------------------------------------------------
   Metro Legal Solutions. Plain CSS, no framework.
   Version 2: dark only, multi-page. The palette is the logo's: charcoal
   surfaces with the mark's orange as the one interactive colour. Every
   colour is a token or accent-relative. Glass on the header bar, fact
   strip, contact tiles and the small floating controls (pause, back to
   top); dropdowns and cards are solid. Shape rule: buttons and chips are
   pills, cards are 20px, small tiles 12px. Tokens and rules are
   documented in DESIGN.md.
   ------------------------------------------------------------------ */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../static/fonts/geist-latin-wght-normal.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --canvas: #16171d;
  --surface: #1f2029;
  --panel: #2a2b34;
  --ink: #f4f3f1;
  --body: #d8d6d3;
  --muted: #9d9ba3;
  --hairline: #2f3039;
  --hairline-strong: #414250;
  --accent: #ef5423;
  --accent-hover: #ff6a3d;
  --accent-wash: rgba(239, 84, 35, 0.14);
  --on-accent: #16171d;
  --glass-fill: rgba(42, 43, 52, 0.55);
  --glass-edge: rgba(255, 255, 255, 0.10);
  --glass-line: rgba(0, 0, 0, 0.35);
  --glass-highlight: rgba(255, 255, 255, 0.08);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.30), 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.35), 0 20px 48px rgba(0, 0, 0, 0.45);
  --ambient-a: rgba(239, 84, 35, 0.10);
  --ambient-b: rgba(239, 84, 35, 0.06);
  --r-card: 20px;
  --r-tile: 12px;
  --shell: 1200px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  position: relative;
  scroll-behavior: smooth;
  scroll-padding-top: 112px;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font: 400 16px/1.625 "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3 { color: var(--ink); letter-spacing: -0.022em; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 768px) { .shell { padding-inline: 2rem; } }

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

.icon { width: 22px; height: 22px; fill: currentColor; flex: none; }
.icon--sm { width: 18px; height: 18px; }
.icon--xs { width: 13px; height: 13px; }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--accent); color: var(--on-accent);
  padding: 0.625rem 1rem; border-radius: 9999px; font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---- glass (a web approximation of frosted material) ------------------ */
.glass {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  backdrop-filter: blur(22px) saturate(165%);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 0 0 1px var(--glass-line), var(--shadow-soft);
}
.glass--strong {
  background: rgba(42, 43, 52, 0.86);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  backdrop-filter: blur(28px) saturate(150%);
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass--strong { background: rgba(31, 32, 41, 0.96); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---- ambient light behind the page (what the glass blurs) ------------- */
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ambient::before, .ambient::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform;
}
.ambient::before {
  width: 62vw; height: 62vw; top: -22vw; right: -18vw;
  background: radial-gradient(closest-side, var(--ambient-a), transparent);
  animation: drift-a 28s var(--ease) infinite alternate;
}
.ambient::after {
  width: 54vw; height: 54vw; bottom: -24vw; left: -16vw;
  background: radial-gradient(closest-side, var(--ambient-b), transparent);
  animation: drift-b 34s var(--ease) infinite alternate;
}
@keyframes drift-a { to { transform: translate3d(-7vw, 6vw, 0) scale(1.06); } }
@keyframes drift-b { to { transform: translate3d(6vw, -5vw, 0) scale(1.08); } }

/* ---- buttons (one system, pill) --------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1.25rem; border-radius: 9999px;
  font-size: 0.9375rem; font-weight: 500; line-height: 1; white-space: nowrap;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn--primary {
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 20%, transparent), 0 8px 24px color-mix(in srgb, var(--accent) 18%, transparent);
}
.btn--primary:hover { background: var(--accent-hover); box-shadow: 0 2px 4px color-mix(in srgb, var(--accent) 22%, transparent), 0 12px 32px color-mix(in srgb, var(--accent) 24%, transparent); }
.btn--secondary { border: 1px solid var(--hairline-strong); background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--ink); }
.btn--secondary:hover { border-color: color-mix(in srgb, var(--ink) 35%, transparent); background: var(--surface); }
.btn--sm { padding: 0.625rem 1rem; font-size: 0.875rem; }

/* ---- reveal (IntersectionObserver adds .in; no JS means visible) ------ */
html.js .reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}
html.js .reveal.in { opacity: 1; transform: none; }

/* ---- contact line above the bar (from tablet up) --------------------- */
.utility { display: none; border-bottom: 1px solid var(--hairline); background: color-mix(in srgb, var(--surface) 60%, transparent); }
@media (min-width: 768px) { .utility { display: block; } }
.utility__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.625rem; }
.utility__note { display: none; font-size: 0.8125rem; color: var(--muted); }
@media (min-width: 1024px) { .utility__note { display: block; } }
.utility__list {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; margin-inline: auto;
  font-size: 0.8125rem; color: var(--body); font-variant-numeric: tabular-nums;
}
@media (min-width: 1024px) { .utility__list { margin-inline: 0; } }
.utility__list a { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 4px; transition: color 0.2s; }
.utility__list a:hover { color: var(--ink); }
.utility__list .icon { color: var(--accent); }

/* ---- header bar --------------------------------------------------------
   A floating glass bar, taller than v1 so the logo can be read at a glance.
   Desktop (1100px and up): five links, three of them with dropdowns; the
   Services dropdown opens a second flyout per service. Below that, one
   menu button opens a sheet with the same tree as nested accordions. */
.nav-sentinel { position: absolute; top: 0; height: 1px; width: 100%; }
.nav { position: sticky; top: 0.75rem; z-index: 40; padding-inline: 0.75rem; margin-top: 0.75rem; }
@media (min-width: 768px) { .nav { top: 1rem; padding-inline: 1.5rem; margin-top: 1rem; } }
.nav__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: 64px; max-width: calc(var(--shell) - 2rem); margin-inline: auto;
  padding-left: 1.125rem; padding-right: 0.625rem; border-radius: var(--r-card);
  transition: box-shadow 0.3s var(--ease);
}
@media (min-width: 768px) { .nav__bar { height: 76px; padding-left: 1.5rem; padding-right: 0.875rem; } }
.nav.is-scrolled .nav__bar { box-shadow: inset 0 1px 0 var(--glass-highlight), 0 0 0 1px var(--glass-line), var(--shadow-lift); }
.nav__logo { display: flex; flex: none; align-items: center; border-radius: var(--r-tile); }
.nav__logo img { width: auto; height: 38px; }
@media (min-width: 768px) { .nav__logo img { height: 48px; } }
.nav__actions { display: flex; flex: none; align-items: center; gap: 0.375rem; }
.nav__cta { display: none; }
@media (min-width: 640px) { .nav__cta { display: inline-flex; } }
@media (min-width: 768px) { .nav__cta.btn--sm { padding: 0.75rem 1.125rem; font-size: 0.9375rem; } }
.nav__toggle {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-tile); color: var(--ink);
  transition: background-color 0.2s;
}
.nav__toggle:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.nav__toggle-close, .nav__toggle[aria-expanded="true"] .nav__toggle-open { display: none; }
.nav__toggle[aria-expanded="true"] .nav__toggle-close { display: block; }
@media (min-width: 1100px) { .nav__toggle, .menu { display: none !important; } }

/* primary links */
.primary { display: none; }
@media (min-width: 1100px) { .primary { display: block; } }
.primary__list { display: flex; align-items: center; gap: 0.125rem; }
.primary__item { position: relative; display: flex; align-items: center; }
.primary__link {
  display: block; padding: 0.625rem 0.875rem; border-radius: var(--r-tile);
  font-size: 0.9375rem; font-weight: 500; color: var(--body); white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}
.has-dd .primary__link { padding-right: 0.25rem; }
.primary__link:hover, .primary__item.is-open .primary__link { color: var(--ink); }
.primary__link[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.primary__caret {
  display: grid; place-items: center; width: 26px; height: 32px; border-radius: 8px; color: var(--muted);
  transition: color 0.2s, background-color 0.2s;
}
.primary__caret .icon { transition: transform 0.25s var(--ease); }
.primary__caret:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.primary__item.is-open .primary__caret { color: var(--accent); }
.primary__item.is-open .primary__caret .icon { transform: rotate(180deg); }

/* dropdown panels: solid, never glass (no glass on glass) */
.dd, .fly {
  position: absolute; z-index: 50;
  border: 1px solid var(--hairline-strong); border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-lift);
  opacity: 0; visibility: hidden;
  transition: opacity 0.18s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
.dd {
  top: calc(100% + 14px); left: 50%; width: 22rem; padding: 0.5rem;
  transform: translate(-50%, 6px);
}
/* an invisible bridge over the gap, so the pointer can travel into the panel */
.dd::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.has-dd.is-open > .dd { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
html:not(.js) .has-dd:hover > .dd, html:not(.js) .has-dd:focus-within > .dd { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.dd__list { display: grid; gap: 0.125rem; }
.dd__item { position: relative; display: flex; align-items: stretch; }
.dd__link {
  display: flex; flex: 1; align-items: flex-start; gap: 0.875rem; padding: 0.75rem; border-radius: var(--r-tile);
  transition: background-color 0.2s;
}
.dd__link:hover, .dd__item.is-open > .dd__link { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.dd__icon {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  border-radius: 10px; background: var(--accent-wash); color: var(--accent);
}
.dd__text { display: grid; gap: 0.125rem; }
.dd__title { font-size: 0.9375rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.dd__desc { font-size: 0.8125rem; line-height: 1.4; color: var(--muted); }
.dd__caret {
  display: grid; place-items: center; width: 36px; margin-left: 0.125rem; border-radius: var(--r-tile); color: var(--muted);
  transition: color 0.2s, background-color 0.2s;
}
.dd__caret:hover, .dd__item.is-open > .dd__caret { color: var(--accent); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.dd--services { width: 24rem; }

/* second level: the flyout beside a service */
.fly {
  top: -0.5rem; left: calc(100% + 0.875rem); width: 19rem; padding: 0.75rem;
  transform: translateX(-6px);
}
.fly::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1rem; width: 1rem; }
.dd__item.is-open > .fly { opacity: 1; visibility: visible; transform: none; }
html:not(.js) .dd__item:hover > .fly, html:not(.js) .dd__item:focus-within > .fly { opacity: 1; visibility: visible; transform: none; }
.fly__head { padding: 0.375rem 0.75rem 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.fly__list { display: grid; }
.fly__link {
  display: block; padding: 0.5625rem 0.75rem; border-radius: 10px;
  font-size: 0.9375rem; color: var(--body); transition: background-color 0.2s, color 0.2s;
}
.fly__link:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.fly__all, .dd__foot {
  display: flex; align-items: center; gap: 0.375rem; margin-top: 0.5rem; padding: 0.75rem;
  border-top: 1px solid var(--hairline); font-size: 0.875rem; font-weight: 500; color: var(--accent);
}
.fly__all:hover, .dd__foot:hover { color: var(--accent-hover); }

.dd--industries { width: 34rem; padding: 0.75rem; }
.dd__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.125rem; }
.dd__chip {
  display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; border-radius: var(--r-tile);
  font-size: 0.875rem; font-weight: 500; color: var(--body); transition: background-color 0.2s, color 0.2s;
}
.dd__chip .icon { color: var(--accent); }
.dd__chip:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }

/* the menu sheet below 1100px: nested accordions built on <details> */
.menu { position: fixed; left: 0.75rem; right: 0.75rem; top: 5rem; z-index: 30; }
@media (min-width: 640px) { .menu { left: auto; right: 1.5rem; width: 24rem; } }
@media (min-width: 768px) { .menu { top: 6.5rem; } }
.menu__panel {
  max-height: calc(100svh - 6rem); overflow-y: auto; overscroll-behavior: contain;
  padding: 0.75rem; padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  border: 1px solid var(--hairline-strong); border-radius: var(--r-card);
  background: var(--surface); box-shadow: var(--shadow-lift);
}
.mnav > li + li { border-top: 1px solid var(--hairline); }
.mnav__top {
  display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 0.75rem;
  font-size: 1.0625rem; font-weight: 600; color: var(--ink); cursor: pointer; list-style: none;
}
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary { list-style: none; }
.mnav details > summary::after {
  content: ""; width: 8px; height: 8px; margin-left: auto; margin-right: 0.25rem; flex: none;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px); transition: transform 0.25s var(--ease);
}
.mnav details[open] > summary::after { transform: rotate(-135deg) translateY(-2px); border-color: var(--accent); }
.mnav details ul { padding: 0 0 0.625rem 0.75rem; }
.mnav details li a {
  display: block; padding: 0.5625rem 0.75rem; border-radius: 10px; font-size: 0.9375rem; color: var(--body);
}
.mnav details li a:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.mnav__nest > li > details > summary {
  display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem;
  border-radius: 10px; font-size: 0.9375rem; font-weight: 600; color: var(--ink); cursor: pointer;
}
.mnav__nest > li > details > summary .icon { color: var(--accent); }
.mnav__nest details ul { border-left: 1px solid var(--hairline-strong); margin-left: 1.25rem; padding-left: 0.5rem; }
.menu__cta { width: 100%; margin-top: 0.75rem; }
.menu__call {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  margin-top: 0.5rem; padding: 0.75rem; border-radius: 9999px;
  font-size: 0.9375rem; font-weight: 500; color: var(--body); font-variant-numeric: tabular-nums;
}
.menu__call .icon { color: var(--accent); }

/* ---- hero: copy left, the shader panel right -------------------------- */
.hero { position: relative; padding: 3rem 0 2.5rem; }
@media (min-width: 768px) { .hero { padding: 4.5rem 0 4rem; } }
.hero__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 7fr 5fr; gap: 3.5rem; } }
.hero__copy { min-width: 0; }
/* The headline is the page's one loud moment: a quiet lead-in, then the
   discipline set very large. When it changes, the old word lifts away and
   the new one rises in letter by letter, out of a soft blur. */
.hero__title { display: grid; justify-items: start; gap: 0.5rem; }
.hero__pre {
  font-size: 1.125rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--muted);
}
@media (min-width: 768px) { .hero__pre { font-size: 1.375rem; } }
.rotator {
  display: block; max-width: 100%;
  font-size: clamp(2.5rem, 9vw, 5.25rem); font-weight: 600; line-height: 1.04; letter-spacing: -0.04em;
  white-space: nowrap;
}
@media (min-width: 1024px) { .rotator { font-size: clamp(3.5rem, 5.6vw, 5.25rem); } }
.rotator__word { display: inline-block; transition: opacity 0.32s var(--ease), transform 0.32s var(--ease), filter 0.32s var(--ease); }
.rotator__word.is-leaving { opacity: 0; transform: translateY(-0.12em); filter: blur(6px); }
.rotator__char { display: inline-block; white-space: pre; animation: char-rise 0.8s var(--ease) both; animation-delay: calc(var(--c) * 26ms); }
@keyframes char-rise {
  from { opacity: 0; transform: translateY(0.32em); filter: blur(10px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* Discipline buttons: which word is on screen, and how long it has left.
   The pressed one fills with the accent wash from left to right. */
.disciplines { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.75rem; }
.discipline {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 0.5rem 1rem; border: 1px solid var(--hairline-strong); border-radius: 9999px;
  font-size: 0.875rem; font-weight: 500; line-height: 1.2; color: var(--muted);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.discipline:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.discipline[aria-pressed="true"] { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.discipline__fill {
  position: absolute; inset: 0; z-index: -1; background: var(--accent-wash);
  transform: scaleX(0); transform-origin: left;
}
.discipline[aria-pressed="true"] .discipline__fill { transform: none; }
.disciplines.is-timed .discipline[aria-pressed="true"] .discipline__fill { animation: fill var(--turn, 5.5s) linear both; }
.disciplines.is-held .discipline[aria-pressed="true"] .discipline__fill { animation-play-state: paused; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hero__lead { max-width: 50ch; margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.6; color: var(--muted); }
.hero__line { color: var(--body); transition: opacity 0.32s var(--ease); }
.hero__line.is-leaving { opacity: 0; }
@media (min-width: 768px) { .hero__lead { font-size: 1.25rem; } }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.hero__points { display: grid; gap: 0.5rem; margin-top: 2rem; font-size: 0.9375rem; color: var(--body); }
.hero__points li { display: flex; align-items: center; gap: 0.625rem; }
.hero__points .icon { color: var(--accent); }

.hero__panel {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--r-card); background: var(--panel); box-shadow: var(--shadow-lift);
  /* The canvas is promoted to its own compositor layer while the page
     scrolls, and a promoted child is not reliably clipped by an ancestor's
     rounded overflow: the corners snap square for a frame. Isolating the
     panel and rounding the children themselves keeps them round always. */
  isolation: isolate;
}
@media (min-width: 1024px) { .hero__panel { aspect-ratio: 4 / 5; } }
.hero__panel canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
/* CSS fallback for the shader: the same rust and charcoal as layered
   gradients, with the mark as a still image. Hidden once the shader runs. */
.hero-mesh {
  position: absolute; inset: 0; border-radius: inherit;
  background:
    radial-gradient(60% 80% at 20% 30%, rgba(125, 63, 43, 0.9), transparent 70%),
    radial-gradient(50% 70% at 75% 25%, rgba(245, 196, 173, 0.55), transparent 70%),
    radial-gradient(70% 60% at 60% 85%, rgba(43, 44, 54, 0.95), transparent 70%),
    linear-gradient(135deg, #2b2c36, #15161c);
  background-size: 160% 160%, 160% 160%, 160% 160%, 100% 100%;
  animation: mesh-drift 30s var(--ease) infinite alternate;
}
@keyframes mesh-drift { to { background-position: 100% 100%, 0% 100%, 100% 0%, 0 0; } }
.hero-mesh__mark { position: absolute; left: 50%; top: 50%; width: 72%; height: 64%; object-fit: contain; transform: translate(-50%, -50%); opacity: 0.25; }
.hero__panel.has-gl .hero-mesh { display: none; }
.hero__pause {
  position: absolute; right: 1rem; top: 1rem; z-index: 2;
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9999px; color: var(--ink);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.hero__pause:hover { box-shadow: inset 0 1px 0 var(--glass-highlight), 0 0 0 1px var(--glass-line), var(--shadow-lift); }
.hero__pause:active { transform: scale(0.95); }
.hero__pause-off, .hero__pause[aria-pressed="true"] .hero__pause-on { display: none; }
.hero__pause[aria-pressed="true"] .hero__pause-off { display: block; }

/* Fact strip, under both columns. */
.facts {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; row-gap: 1.5rem;
  margin-top: 2.5rem; padding: 1.5rem; border-radius: var(--r-card);
}
.facts > div:nth-child(even) { border-left: 1px solid var(--hairline); padding-left: 1.5rem; }
.facts dt { font-size: 1.875rem; font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.facts dd { margin-top: 0.5rem; font-size: 0.875rem; color: var(--body); }
@media (min-width: 768px) {
  .facts { grid-template-columns: repeat(4, 1fr); row-gap: 0; margin-top: 3.5rem; padding-inline: 2rem; }
  .facts > div + div { border-left: 1px solid var(--hairline); padding-left: 2rem; }
  .facts dt { font-size: 2.125rem; }
}
.bento__media img, .advantages__image { filter: brightness(0.86) saturate(0.9); }

/* ---- trusted marquee (the one marquee on the page) -------------------- */
.trusted { padding: 3.5rem 0; }
@media (min-width: 768px) { .trusted { padding: 5rem 0; } }
.trusted__heading { text-align: center; font-size: 0.9375rem; font-weight: 500; color: var(--muted); letter-spacing: normal; }
.marquee {
  margin-top: 2rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; align-items: center; gap: 3.5rem; width: max-content; padding-inline: 1.5rem;
  animation: marquee 48s linear infinite;
}
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee__track li {
  display: flex; flex: none; align-items: center; gap: 0.75rem; white-space: nowrap;
  font-size: 1.0625rem; font-weight: 500; color: color-mix(in srgb, var(--ink) 80%, transparent);
}
.mark {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  border: 1px solid var(--hairline); border-radius: var(--r-tile); background: var(--surface);
  color: var(--accent);
}

/* ---- sections --------------------------------------------------------- */
.section { padding: 6rem 0; }
@media (min-width: 768px) { .section { padding: 8rem 0; } }
.section--rule { border-top: 1px solid var(--hairline); }
.section__head { max-width: 36rem; margin-inline: auto; text-align: center; }
.section__head--left { margin-inline: 0; max-width: 30rem; text-align: left; }
.section__head h2 { font-size: 2.25rem; font-weight: 600; line-height: 1.08; }
@media (min-width: 768px) { .section__head h2 { font-size: 3rem; } }
.section__head p { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.6; color: var(--muted); }
.badge {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: 9999px; background: var(--accent-wash); color: var(--accent);
}

/* ---- shared content pieces --------------------------------------------- */
.checks { display: grid; gap: 0.625rem; }
.checks li { display: flex; align-items: flex-start; gap: 0.625rem; color: var(--body); }
.checks .icon {
  width: 20px; height: 20px; flex: none; margin-top: 0.125rem; padding: 4px;
  border-radius: 50%; background: var(--accent-wash); color: var(--accent);
}
@media (min-width: 640px) { .checks--cols { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } }
.more {
  display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 1.75rem;
  font-weight: 500; color: var(--accent); transition: gap 0.2s var(--ease), color 0.2s;
}
.more:hover { gap: 0.625rem; color: var(--accent-hover); }
.photo, .intro__photo, .approach__photo, .svc__media img, .ind__photo, .row__media img, .phero__media img,
.team__media img, .visit__media img, .sector__photo, .other__photo, .cta__photo {
  filter: brightness(0.88) saturate(0.9);
}

/* ---- intro: two photographs beside the introduction ------------------- */
.intro__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .intro__grid { grid-template-columns: 5fr 6fr; gap: 4.5rem; } }
.intro__media { position: relative; padding-bottom: 3rem; padding-right: 3rem; }
.intro__photo { width: 100%; object-fit: cover; border-radius: var(--r-card); box-shadow: var(--shadow-soft); }
.intro__photo--main { aspect-ratio: 4 / 5; }
.intro__photo--inset {
  position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 1;
  border: 6px solid var(--canvas); box-shadow: var(--shadow-lift);
}
.intro__badge {
  position: absolute; left: 1.25rem; top: 1.25rem; display: grid; gap: 0.125rem;
  padding: 0.875rem 1.125rem; border-radius: var(--r-tile); font-size: 0.8125rem; color: var(--body);
}
.intro__badge strong { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.intro__body h2, .team__body h2, .visit__body h2 { font-size: 2.25rem; font-weight: 600; line-height: 1.08; }
@media (min-width: 768px) { .intro__body h2, .team__body h2, .visit__body h2 { font-size: 2.75rem; } }
.intro__body > p, .team__body > p, .visit__body > p { margin-top: 1.25rem; max-width: 62ch; color: var(--muted); }
.intro__body > .intro__lead, .team__body > .intro__lead, .visit__body > .intro__lead { font-size: 1.1875rem; line-height: 1.55; color: var(--body); }
.purpose {
  position: relative; margin: 2rem 0; padding: 1.5rem 1.5rem 1.5rem 3.75rem;
  border-left: 2px solid var(--accent); border-radius: 0 var(--r-tile) var(--r-tile) 0;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
}
.purpose__mark { position: absolute; left: 1.125rem; top: 1.375rem; width: 26px; height: 26px; color: var(--accent); }
.purpose p { font-size: 1.125rem; font-weight: 500; line-height: 1.5; color: var(--ink); }

/* ---- services: four photo cards --------------------------------------- */
.svc-grid { display: grid; gap: 1.25rem; margin-top: 3.5rem; }
@media (min-width: 768px) { .svc-grid { grid-template-columns: 1fr 1fr; margin-top: 4.5rem; } }
.svc {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--surface);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.svc:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--hairline-strong); }
.svc__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.svc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.svc:hover .svc__media img { transform: scale(1.03); }
.svc__body { position: relative; display: flex; flex: 1; flex-direction: column; padding: 0 1.75rem 1.75rem; }
@media (min-width: 768px) { .svc__body { padding: 0 2rem 2rem; } }
.svc__body .badge { margin-top: -22px; border: 4px solid var(--surface); width: 52px; height: 52px; background: var(--panel); }
.svc__body h3 { margin-top: 1rem; font-size: 1.625rem; font-weight: 600; }
.svc__tag { margin-top: 0.25rem; font-size: 0.9375rem; font-weight: 500; color: var(--accent); }
.svc__body > p:not(.svc__tag) { margin-top: 0.875rem; color: var(--muted); }
.svc__body .checks { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline); }
.svc__body .more { margin-top: auto; padding-top: 1.75rem; }

/* ---- approach: heading and photo beside a vertical timeline ----------- */
.approach__grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .approach__grid { grid-template-columns: 5fr 7fr; gap: 5rem; align-items: start; } }
@media (min-width: 1024px) { .approach__head { position: sticky; top: 8rem; } }
.approach__photo { display: none; }
@media (min-width: 1024px) { .approach__photo { display: block; margin-top: 2.5rem; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); box-shadow: var(--shadow-soft); } }
.timeline { position: relative; }
.timeline__rail, .timeline__spine { position: absolute; left: 7px; top: 0.5rem; bottom: 0.5rem; width: 1px; }
.timeline__rail { background: var(--hairline); }
.timeline__spine { background: var(--accent); transform-origin: top; }
@supports (animation-timeline: view()) {
  .timeline__spine { animation: draw linear both; animation-timeline: view(); animation-range: entry 25% cover 65%; }
  @keyframes draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
}
.timeline__step {
  position: relative; display: grid; gap: 0.5rem; margin-bottom: 1.25rem; margin-left: 2.5rem; padding: 1.5rem 1.75rem;
  border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--surface);
}
.timeline__step:last-child { margin-bottom: 0; }
.timeline__node {
  position: absolute; left: calc(-2.5rem - 1px); top: 1.875rem; width: 17px; height: 17px;
  border: 2px solid var(--accent); border-radius: 50%; background: var(--canvas);
}
.timeline__no { font-size: 0.8125rem; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.timeline__step h3 { font-size: 1.375rem; font-weight: 600; }
.timeline__step p:last-child { max-width: 56ch; color: var(--muted); }
.philosophy { display: grid; gap: 1rem; margin-top: 4rem; }
@media (min-width: 640px) { .philosophy { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .philosophy { grid-template-columns: repeat(5, 1fr); } }
.philosophy li { padding: 1.5rem; border-top: 2px solid var(--accent); background: color-mix(in srgb, var(--surface) 70%, transparent); border-radius: 0 0 var(--r-tile) var(--r-tile); }
.philosophy .icon { color: var(--accent); }
.philosophy h3 { margin-top: 1rem; font-size: 1.125rem; font-weight: 600; }
.philosophy p { margin-top: 0.375rem; font-size: 0.9375rem; color: var(--muted); }

/* ---- advantages (sticky split) ---------------------------------------- */
.advantages__grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
  .advantages__grid { grid-template-columns: repeat(12, 1fr); gap: 4rem; }
  .advantages__side { grid-column: span 5; }
  .advantages__sticky { position: sticky; top: 7rem; }
  .advantages__list { grid-column: 7 / span 6; }
}
.advantages__side h2 { font-size: 2.25rem; font-weight: 600; line-height: 1.08; }
.advantages__lead { margin-top: 1.25rem; max-width: 40ch; font-size: 1.0625rem; color: var(--muted); }
@media (min-width: 768px) { .advantages__side h2 { font-size: 3rem; } }
.advantages__image { display: none; }
@media (min-width: 1024px) {
  .advantages__image { display: block; margin-top: 2.5rem; aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border-radius: var(--r-card); box-shadow: var(--shadow-soft); }
}
.advantages__list { border-top: 1px solid var(--hairline); }
.advantages__list li { display: flex; gap: 1.25rem; padding: 1.75rem 0; border-bottom: 1px solid var(--hairline); }
.advantages__list h3 { font-size: 1.375rem; font-weight: 600; }
.advantages__list p { margin-top: 0.625rem; max-width: 52ch; color: var(--muted); }

/* ---- about: lit vision panel beside mission and values ---------------- */
.about__grid { display: grid; gap: 1.25rem; margin-top: 3.5rem; }
@media (min-width: 768px) { .about__grid { margin-top: 4.5rem; } }
@media (min-width: 1024px) { .about__grid { grid-template-columns: 7fr 5fr; } }
.vision {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 4rem;
  min-height: 22rem; margin: 0; padding: 2rem; border: 1px solid var(--hairline); border-radius: var(--r-card);
  background:
    radial-gradient(90% 80% at 100% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 62%),
    radial-gradient(70% 60% at 0% 100%, rgba(245, 196, 173, 0.06), transparent 70%),
    var(--panel);
  box-shadow: var(--shadow-soft);
}
@media (min-width: 768px) { .vision { padding: 3rem; } }
.vision__mark {
  position: absolute; z-index: -1; right: -16%; top: 50%; height: 105%; width: auto;
  transform: translateY(-50%); opacity: 0.06; pointer-events: none;
}
.vision__label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; font-weight: 500; color: var(--ink); }
.vision__label .icon { color: var(--accent); }
.vision__text {
  margin: 0; max-width: 30ch;
  font-size: 1.5rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.018em; color: var(--ink); text-wrap: pretty;
}
@media (min-width: 768px) { .vision__text { font-size: 2rem; line-height: 1.24; } }
.pillars { display: grid; gap: 1.25rem; }
.pillars__item {
  display: flex; flex-direction: column; padding: 1.75rem;
  border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--surface);
}
@media (min-width: 768px) { .pillars__item { padding: 2rem; } }
.pillars dt { display: grid; justify-items: start; gap: 1.25rem; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.022em; color: var(--ink); }
.pillars dd { margin-top: 0.75rem; color: var(--muted); }

/* ---- industries: eight photo cards ------------------------------------ */
.ind-grid { display: grid; gap: 1rem; margin-top: 3.5rem; }
@media (min-width: 640px) { .ind-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ind-grid { grid-template-columns: repeat(4, 1fr); margin-top: 4.5rem; } }
.ind__link {
  position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; isolation: isolate;
  min-height: 21rem; border-radius: var(--r-card); border: 1px solid var(--hairline);
}
.ind__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.ind__link::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(22, 23, 29, 0.05) 20%, rgba(22, 23, 29, 0.78) 58%, rgba(22, 23, 29, 0.96));
}
.ind__link:hover .ind__photo { transform: scale(1.04); }
.ind__body { display: grid; gap: 0.5rem; margin-top: auto; padding: 1.5rem; }
.ind__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent); color: var(--on-accent); }
.ind__title { margin-top: 0.375rem; font-size: 1.1875rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); }
.ind__desc { font-size: 0.875rem; line-height: 1.5; color: var(--body); }

/* ---- values: eight short statements ------------------------------------ */
.values__grid { display: grid; gap: 1px; margin-top: 3.5rem; overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--hairline); }
@media (min-width: 640px) { .values__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .values__grid { grid-template-columns: repeat(4, 1fr); } }
.values__grid li { padding: 1.75rem; background: var(--surface); }
.values__grid .icon { width: 28px; height: 28px; color: var(--accent); }
.values__grid h3 { margin-top: 1.25rem; font-size: 1.1875rem; font-weight: 600; }
.values__grid p { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--muted); }

/* ---- commitment ------------------------------------------------------- */
.commitment { padding: 7rem 0; text-align: center; }
@media (min-width: 768px) { .commitment { padding: 9rem 0; } }
.commitment__quote {
  max-width: 22ch; margin-inline: auto;
  font-size: 1.75rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink);
}
@media (min-width: 640px) { .commitment__quote { max-width: 26ch; font-size: 2.25rem; } }
@media (min-width: 768px) { .commitment__quote { max-width: 30ch; font-size: 2.75rem; line-height: 1.18; } }
.commitment__by { margin-top: 2rem; font-size: 0.875rem; color: var(--muted); }

/* ---- contact tiles ---------------------------------------------------- */
.tiles { display: grid; gap: 1rem; margin-top: 3.5rem; }
@media (min-width: 640px)  { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile {
  display: flex; flex-direction: column; height: 100%; padding: 1.5rem; border-radius: var(--r-card);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
@media (min-width: 768px) { .tile { padding: 1.75rem; } }
.tile:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--glass-highlight), 0 0 0 1px var(--glass-line), var(--shadow-lift); }
.tile__row { display: flex; align-items: flex-start; justify-content: space-between; }
.tile__arrow { color: var(--muted); transition: transform 0.3s var(--ease), color 0.3s var(--ease); }
.tile:hover .tile__arrow { transform: translate(2px, -2px); color: var(--accent); }
.tile__label { margin-top: 2rem; font-size: 0.875rem; font-weight: 500; color: color-mix(in srgb, var(--body) 75%, transparent); }
.tile__value { margin-top: 0.375rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); overflow-wrap: anywhere; }
/* The note: a short message composed here and handed to the visitor's
   own email app. Solid surface, not glass. */
.note {
  display: grid; gap: 2rem; margin-top: 1.25rem; padding: 1.75rem;
  border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--surface);
}
@media (min-width: 768px) { .note { padding: 2.5rem; } }
@media (min-width: 960px) { .note { grid-template-columns: 5fr 7fr; gap: 3.5rem; } }
.note__intro h3 { font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.note__intro p { margin-top: 0.75rem; max-width: 40ch; color: var(--muted); }
.note__intro .note__address { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--hairline); font-size: 0.875rem; }
.field { display: grid; gap: 0.5rem; }
.field + .field { margin-top: 1rem; }
.field__label { font-size: 0.875rem; font-weight: 500; color: var(--body); }
.field__input {
  width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--hairline-strong); border-radius: var(--r-tile);
  background: var(--canvas); color: var(--ink); font: inherit; font-size: 1rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field__input::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
.field__input:hover { border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.field__input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.field__input--area { min-height: 8rem; resize: vertical; }
.note__send { margin-top: 1.25rem; }

/* ---- back to top ------------------------------------------------------ */
.to-top {
  position: fixed; z-index: 35; right: 1.25rem; bottom: max(1.25rem, env(safe-area-inset-bottom));
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 9999px; color: var(--ink);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s, box-shadow 0.2s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { box-shadow: inset 0 1px 0 var(--glass-highlight), 0 0 0 1px var(--glass-line), var(--shadow-lift); }
.to-top:active { transform: scale(0.95); }

/* ---- closing band on a photograph ------------------------------------- */
.cta { padding: 2rem 0 6rem; }
@media (min-width: 768px) { .cta { padding: 3rem 0 8rem; } }
.cta__panel { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-card); border: 1px solid var(--hairline); }
.cta__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.cta__panel::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(22, 23, 29, 0.97) 0%, rgba(22, 23, 29, 0.9) 45%, rgba(22, 23, 29, 0.55) 100%);
}
.cta__body { max-width: 40rem; padding: 2.5rem 1.75rem; }
@media (min-width: 768px) { .cta__body { padding: 4.5rem 4rem; } }
.cta__body h2 { font-size: 2.25rem; font-weight: 600; line-height: 1.08; }
@media (min-width: 768px) { .cta__body h2 { font-size: 3rem; } }
.cta__body p { margin-top: 1.25rem; font-size: 1.0625rem; color: var(--body); }
.cta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* ---- footer ----------------------------------------------------------- */
.footer { border-top: 1px solid var(--hairline); padding: 4rem 0 3rem; background: color-mix(in srgb, var(--surface) 55%, transparent); }
@media (min-width: 768px) { .footer { padding: 5rem 0 3.5rem; } }
.footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 640px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 4fr 2fr 2fr 2.5fr 3.5fr; gap: 2.5rem; } }
@media (min-width: 640px) and (max-width: 1023px) { .footer__brand { grid-column: 1 / -1; } }
.footer__brand img { width: auto; height: 52px; }
.footer__brand p { margin-top: 1.5rem; max-width: 40ch; font-size: 0.9375rem; color: var(--muted); }
.footer__brand .footer__motto { margin-top: 1rem; font-weight: 500; color: var(--body); }
.footer__heading { font-size: 0.9375rem; font-weight: 600; color: var(--ink); letter-spacing: normal; }
.footer__links { display: grid; gap: 0.625rem; margin-top: 1.125rem; font-size: 0.9375rem; color: var(--muted); }
.footer__links a { transition: color 0.2s; }
.footer__links a:hover { color: var(--ink); }
.footer__contact { display: grid; gap: 0.875rem; margin-top: 1.125rem; font-size: 0.9375rem; color: var(--muted); }
.footer__contact li { display: flex; gap: 0.75rem; align-items: flex-start; }
.footer__contact .icon { margin-top: 0.1875rem; color: var(--accent); }
.footer__contact a { color: var(--body); transition: color 0.2s; }
.footer__contact a:hover { color: var(--ink); }
.footer__legal {
  display: flex; flex-direction: column; gap: 0.75rem;
  margin-top: 3.5rem; padding-top: 1.75rem; border-top: 1px solid var(--hairline);
  font-size: 0.8125rem; color: var(--muted);
}
@media (min-width: 640px) { .footer__legal { flex-direction: row; align-items: center; justify-content: space-between; } }
.footer__credit { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--muted); }
@media (min-width: 640px) { .footer__credit { text-align: right; padding-right: 3.5rem; } }
.footer__credit a {
  font-weight: 500; color: var(--body);
  text-decoration: underline; text-decoration-color: var(--hairline-strong); text-underline-offset: 4px;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.footer__credit a:hover { color: var(--ink); text-decoration-color: var(--accent); }

/* ---- reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .ambient::before, .ambient::after, .hero-mesh, .marquee__track { animation: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
  .timeline__spine { animation: none; transform: none; }
  .rotator__char { animation: none; }
  .disciplines.is-timed .discipline[aria-pressed="true"] .discipline__fill { animation: none; }
  *, *::before, *::after { transition-duration: 0.001ms !important; }
}

/* ---- inner pages: page hero ------------------------------------------- */
.phero { padding: 3rem 0 4rem; }
@media (min-width: 768px) { .phero { padding: 4.5rem 0 5.5rem; } }
.phero__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .phero__grid { grid-template-columns: 6fr 5fr; gap: 4rem; } }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.875rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--hairline-strong); }
.crumbs a { transition: color 0.2s; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--body); }
.phero h1 { margin-top: 1.25rem; font-size: 2.75rem; font-weight: 600; line-height: 1.04; letter-spacing: -0.035em; }
@media (min-width: 768px) { .phero h1 { font-size: 4rem; } }
.phero__intro { margin-top: 1.5rem; display: grid; gap: 1rem; max-width: 58ch; }
.phero__intro p { color: var(--muted); font-size: 1.0625rem; }
.phero__intro p:first-child { font-size: 1.25rem; font-weight: 500; color: var(--ink); }
.phero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.phero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); box-shadow: var(--shadow-lift); }
.glance { display: grid; gap: 0; margin-top: 2rem; border-top: 1px solid var(--hairline); }
.glance > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: 0.875rem 0; border-bottom: 1px solid var(--hairline); font-size: 0.9375rem; }
.glance dt { color: var(--muted); }
.glance dd { color: var(--ink); }
.glance a { transition: color 0.2s; }
.glance a:hover { color: var(--accent); }

/* in-page links to each sub-section, sticky under the bar */
.jump { position: sticky; top: 5rem; z-index: 20; border-block: 1px solid var(--hairline); background: color-mix(in srgb, var(--canvas) 88%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
@media (min-width: 768px) { .jump { top: 6.25rem; } }
.jump__list { display: flex; gap: 0.25rem; overflow-x: auto; padding-block: 0.625rem; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent); padding-right: 3rem; }
.jump__list::-webkit-scrollbar { display: none; }
.jump__link {
  display: block; padding: 0.5rem 0.875rem; border-radius: 9999px; white-space: nowrap;
  font-size: 0.875rem; font-weight: 500; color: var(--muted); transition: color 0.2s, background-color 0.2s;
}
.jump__link:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.jump__link.is-current { color: var(--ink); background: var(--accent-wash); }

/* alternating photo and text rows, one per sub-section */
.rows { display: grid; gap: 5rem; padding-block: 5rem; }
@media (min-width: 768px) { .rows { gap: 7rem; padding-block: 7rem; } }
.row { display: grid; gap: 2rem; align-items: center; scroll-margin-top: 4rem; }
@media (min-width: 1024px) {
  .row { grid-template-columns: 1fr 1fr; gap: 4.5rem; }
  .row--flip .row__media { order: 2; }
}
.row__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); box-shadow: var(--shadow-soft); }
.row h2 { font-size: 2rem; font-weight: 600; line-height: 1.1; }
@media (min-width: 768px) { .row h2 { font-size: 2.5rem; } }
.row__text { margin-top: 1rem; max-width: 56ch; font-size: 1.0625rem; color: var(--muted); }
.row .checks { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--hairline); }

.objective { padding-block: 5rem; text-align: center; }
.objective__label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; font-weight: 500; color: var(--accent); }
.objective__text { max-width: 34ch; margin: 1.25rem auto 0; font-size: 1.625rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.018em; color: var(--ink); }
@media (min-width: 768px) { .objective__text { font-size: 2.125rem; } }

.others__grid { display: grid; gap: 1.25rem; margin-top: 3rem; }
@media (min-width: 768px) { .others__grid { grid-template-columns: repeat(3, 1fr); } }
.other { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--surface); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.other:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.other__photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.other__body { display: grid; gap: 0.5rem; padding: 1.5rem; }
.other__body .badge { margin-top: -2.75rem; border: 4px solid var(--surface); background: var(--panel); }
.other__title { margin-top: 0.5rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.other__desc { font-size: 0.9375rem; color: var(--muted); }

/* industries page */
.sectors { padding-top: 2rem; }
.sectors__grid { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .sectors__grid { grid-template-columns: 1fr 1fr; } }
.sector { overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--surface); }
.sector__photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.sector__body { padding: 0 1.75rem 1.75rem; }
@media (min-width: 768px) { .sector__body { padding: 0 2rem 2rem; } }
.sector__body .badge { margin-top: -26px; width: 52px; height: 52px; border: 4px solid var(--surface); background: var(--panel); }
.sector h2 { margin-top: 1rem; font-size: 1.5rem; font-weight: 600; }
.sector__body > p { margin-top: 0.625rem; color: var(--muted); }
.sector__body .sector__label { margin-top: 1.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--body); }
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.tagl {
  display: inline-block; padding: 0.375rem 0.875rem; border: 1px solid var(--hairline-strong); border-radius: 9999px;
  font-size: 0.875rem; color: var(--body); transition: border-color 0.2s, color 0.2s;
}
.tagl:hover { border-color: var(--accent); color: var(--ink); }

/* about page */
.vision__more { margin-top: -2.5rem; max-width: 48ch; color: var(--body); }
.mission { gap: 0; }
.mission__label { display: flex; align-items: center; gap: 1rem; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.022em; color: var(--ink); }
.mission__text { margin-top: 1.25rem; color: var(--body); }
.mission__sub { margin-top: 1.5rem; margin-bottom: 0.875rem; font-weight: 600; color: var(--ink); }
.values__grid--long p { font-size: 0.9375rem; }
.team__grid, .visit__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .team__grid { grid-template-columns: 6fr 5fr; gap: 4.5rem; } .visit__grid { grid-template-columns: 5fr 6fr; gap: 4.5rem; } }
.team__media img, .visit__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); box-shadow: var(--shadow-soft); }
.team__body .checks, .visit__body .checks { margin-top: 0.875rem; }
.visit__body .checks { margin-top: 1.5rem; }
.pledge__grid { display: grid; gap: 1rem; margin-top: 3.5rem; }
@media (min-width: 640px) { .pledge__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pledge__grid { grid-template-columns: repeat(5, 1fr); } }
.pledge__grid li { padding: 1.5rem; border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--surface); }
.pledge__grid h3 { font-size: 1.125rem; font-weight: 600; }
.pledge__grid p { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--muted); }
.pledge__promise { margin-top: 5rem; text-align: center; }

/* ---- 404 page --------------------------------------------------------- */
.notfound__hero { padding: 6rem 0 8rem; }
.notfound__copy h1 { font-size: 3rem; font-weight: 600; line-height: 1.04; letter-spacing: -0.035em; }
@media (min-width: 768px) { .notfound__copy h1 { font-size: 4.5rem; } }
.notfound__copy .hero__lead { max-width: 52ch; }
.notfound__links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 3rem; }
.notfound__links a { display: inline-block; padding: 0.5rem 1rem; border: 1px solid var(--hairline-strong); border-radius: 9999px; font-size: 0.9375rem; color: var(--body); transition: border-color 0.2s, color 0.2s; }
.notfound__links a:hover { border-color: var(--accent); color: var(--ink); }