/* =========================================================
   TEOSHFAGY LIMITED — main stylesheet
   Mobile-first. Edit the tokens below to restyle the site.
   ========================================================= */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Brand: taken from the logo (gold gear, brown orbit) */
  --espresso: #2B1709;      /* darkest brown: hero, approach, footer */
  --espresso-deep: #1F1006; /* footer base */
  --brown: #5A2E14;         /* primary brown: buttons, headings accents */
  --brown-hover: #46230F;
  --umber: #8A4B22;         /* secondary brown: icons, rules */
  --gold: #F5B800;          /* logo gold: fills and accents (not body text on white) */
  --gold-hover: #FFC72C;
  --gold-soft: #FFF3CC;     /* tint for icon tiles */

  /* Neutrals */
  --white: #FFFFFF;
  --concrete: #F2F0ED;      /* alternate section background */
  --line: #E2DDD7;          /* hairlines on light */
  --line-strong: #CFC7BE;   /* input borders */
  --ink: #1E1510;           /* body text on light */
  --muted: #5C5048;         /* secondary text on light (7:1 on white) */
  --on-dark: #FFFFFF;
  --on-dark-muted: #D8C8B8; /* secondary text on espresso */
  --line-dark: rgba(255, 255, 255, 0.14);

  --error: #B42318;
  --success: #1F6B3A;

  /* Type */
  --font: "Archivo", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  --step-3: clamp(2.35rem, 1.4rem + 4vw, 4.25rem);

  /* Space and layout */
  --container: 76rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 3rem + 6vw, 8rem);
  --header-h: 4.5rem;

  /* Radius: small on controls, larger on panels */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  --shadow-card: 0 1px 2px rgba(43, 23, 9, 0.06), 0 8px 24px -12px rgba(43, 23, 9, 0.18);
  --shadow-card-hover: 0 2px 4px rgba(43, 23, 9, 0.06), 0 18px 40px -16px rgba(43, 23, 9, 0.30);

  /* Motion (Emil Kowalski curves) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --focus: #B86E00;
}

/* ---------- 2. Fonts (self-hosted, no third-party request) ---------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("../assets/fonts/archivo-latin-wdth.woff2") format("woff2-variations"),
       url("../assets/fonts/archivo-latin-wdth.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 2b. Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3 {
  margin: 0;
  line-height: 1.1;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; margin: 0; padding: 0; }
dl, dd { margin: 0; }
address { font-style: normal; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

section[id] { scroll-margin-top: var(--header-h); }
section[tabindex="-1"]:focus { outline: none; }

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

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem; top: 0.75rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--espresso);
  color: var(--white);
  border-radius: var(--r-sm);
  transform: translateY(-160%);
  transition: transform 200ms var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* ---------- 3. Buttons and links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.4rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  font: inherit;
  font-weight: 650;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    color 200ms ease,
    transform 160ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--sm { min-height: 2.5rem; padding: 0.5rem 1rem; font-size: 0.95rem; }
.btn--lg { min-height: 3.375rem; padding: 0.9rem 1.75rem; }

.btn--gold { background: var(--gold); color: var(--espresso); }
.btn--brown { background: var(--brown); color: var(--white); }
.btn--ghost-light { border-color: rgba(255, 255, 255, 0.4); color: var(--white); }

@media (hover: hover) and (pointer: fine) {
  .btn--gold:hover { background: var(--gold-hover); }
  .btn--brown:hover { background: var(--brown-hover); }
  .btn--ghost-light:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.06); }
}

.btn--outline { border-color: var(--brown); color: var(--brown); background: var(--white); }
@media (hover: hover) and (pointer: fine) {
  .btn--outline:hover { background: var(--gold-soft); }
}
.btn__icon { width: 1.15rem; height: 1.15rem; fill: currentColor; flex: none; }

.btn[disabled] { opacity: 0.6; cursor: progress; }

.text-link {
  color: var(--brown);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--gold);
  transition: text-decoration-color 200ms ease, color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .text-link:hover { text-decoration-color: currentColor; }
}

/* ---------- 4. Header and navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
@supports (backdrop-filter: blur(8px)) {
  .site-header { background: rgba(255, 255, 255, 0.86); backdrop-filter: saturate(1.4) blur(12px); }
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 20px -14px rgba(43, 23, 9, 0.35);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--espresso);
}
.brand__logo { width: 52px; height: auto; }
.brand__name {
  display: flex;
  flex-direction: column;
  font-weight: 800;
  font-stretch: 118%;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  line-height: 1;
}
.brand__suffix {
  margin-top: 0.2rem;
  font-weight: 500;
  font-stretch: 100%;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--umber);
}

/* Mobile toggle */
.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  margin-right: -0.5rem;
  border: 0;
  background: none;
  color: var(--espresso);
  cursor: pointer;
  border-radius: var(--r-sm);
}
.nav-toggle__bars { position: relative; width: 22px; height: 12px; }
.nav-toggle__bars span {
  position: absolute; left: 0;
  width: 100%; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 200ms var(--ease-out);
}
.nav-toggle__bars span:first-child { top: 0; }
.nav-toggle__bars span:last-child { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:first-child { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:last-child { transform: translateY(-5px) rotate(-45deg); }

/* Mobile panel: drops from the header */
.primary-nav {
  position: absolute;
  top: 100%; left: 0; right: 0;
  padding: 0.5rem var(--gutter) 1.5rem;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 40px -24px rgba(43, 23, 9, 0.35);
  transform-origin: top center;
  transition:
    opacity 200ms var(--ease-out),
    transform 200ms var(--ease-out),
    visibility 0s linear 200ms;
}
/* Without JavaScript the menu stays visible and the toggle is hidden */
html:not(.js) .nav-toggle { display: none; }
html:not(.js) .primary-nav { position: static; box-shadow: none; padding-inline: 0; }
.js .primary-nav {
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
}
.js .primary-nav.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition:
    opacity 200ms var(--ease-out),
    transform 200ms var(--ease-out),
    visibility 0s;
}
.primary-nav__list { list-style: none; margin: 0; padding: 0; }
.primary-nav__link {
  position: relative;
  display: block;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  font-size: 1.1rem;
  text-decoration: none;
  color: var(--ink);
}
.primary-nav__link[aria-current="true"] { color: var(--brown); }
.primary-nav__cta { margin-top: 1.25rem; width: 100%; }

@media (min-width: 60em) {
  .nav-toggle { display: none; }
  .primary-nav,
  .js .primary-nav {
    position: static;
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: none;
  }
  .primary-nav__list { display: flex; gap: 1.75rem; }
  .primary-nav__link {
    padding: 0.5rem 0;
    border: 0;
    font-size: 0.98rem;
    color: var(--muted);
    transition: color 200ms ease;
  }
  .primary-nav__link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0.15rem;
    height: 2px;
    background: var(--gold);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 200ms var(--ease-out);
  }
  .primary-nav__link[aria-current="true"] { color: var(--espresso); }
  .primary-nav__link[aria-current="true"]::after { transform: scaleX(1); }
  .primary-nav__cta { margin: 0; width: auto; }
}
@media (min-width: 60em) and (hover: hover) and (pointer: fine) {
  .primary-nav__link:hover { color: var(--espresso); }
}

/* ---------- 5. Hero carousel ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--espresso);
  color: var(--on-dark);
  --focus: var(--gold);
}

/* ----- Animated drafting background ----- */
.hero {
  background:
    radial-gradient(60rem 40rem at 85% 10%, #3D2311 0%, transparent 70%),
    radial-gradient(50rem 30rem at 0% 100%, #351D0D 0%, transparent 70%),
    var(--espresso);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--gold);
}
.hero-bg__grid { position: absolute; inset: 0; width: 100%; height: 100%; }

/* One drawing at a time, filling the hero. Scenes crossfade and settle from a slight zoom. */
.hb-panel {
  position: absolute;
  inset: 5% 4%;
  width: 92%;
  height: 90%;
  overflow: visible;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 900ms var(--ease-in-out), transform 1400ms var(--ease-out);
}
.hb-panel.is-active { opacity: 1; transform: none; }
/* Hidden scenes don't animate, so only one drawing costs anything to run */
.hb-panel:not(.is-active),
.hb-panel:not(.is-active) * { animation-play-state: paused !important; }
/* Roads fade out instead of ending abruptly */
.hb-panel--civil { -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 55%, transparent 72%); mask-image: radial-gradient(circle at 50% 50%, #000 55%, transparent 72%); }
@media (max-width: 59.99em) {
  /* Taller than wide: let the drawing run past the sides so it still reads as full screen */
  .hb-panel { inset: 8% -30%; width: 160%; height: 84%; }
}
@media (prefers-reduced-motion: reduce) {
  .hb-panel { transform: none; transition: opacity 400ms ease; }
}

.hero-bg__scrim {
  position: absolute;
  inset: 0;
  /* Calm patch behind the headline only, so the drawings in every corner stay visible */
  background: radial-gradient(ellipse 40% 55% at 24% 50%, rgba(43, 23, 9, 0.85) 0%, rgba(43, 23, 9, 0.45) 65%, rgba(43, 23, 9, 0) 100%);
}
@media (max-width: 59.99em) {
  .hero-bg__scrim { background: rgba(43, 23, 9, 0.3); }
}

.hero-bg .hb-ink { opacity: 0.42; }
.hb-scope path, .hb-scope circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.hb-scope .hb-thin { stroke-width: 0.8; }
.hb-scope .hb-grid { opacity: 0.16; }
.hb-scope .hb-dashed { stroke-dasharray: 4 5; }
.hb-scope .hb-label {
  fill: currentColor;
  stroke: none;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
}

/* Rotation and flow are constant, so they run linear */
.hb-scope .hb-spin {
  transform-box: view-box;
  transform-origin: 0 0;
  animation: hb-spin var(--t, 30s) linear infinite;
  will-change: transform;
}
.hb-scope .hb-rev { animation-direction: reverse; }
@keyframes hb-spin { to { transform: rotate(360deg); } }

.hb-scope .hb-grid { animation: hb-pan 30s linear infinite; }
@keyframes hb-pan { to { transform: translate(-120px, -120px); } }

/* MECHANICAL: gears turn, belt runs */
.hb-scope .hb-belt { stroke-dasharray: 10 8; animation: hb-flow-18 1.4s linear infinite; }
@keyframes hb-flow-18 { to { stroke-dashoffset: -18; } }

/* ELECTRICAL: current pulses along the wires; switches flip and lamps light room by room */
.hb-scope .hb-current {
  stroke-width: 2.2;
  stroke-dasharray: 3 15;
  animation: hb-flow-18 0.8s linear infinite;
}
.hb-scope .hb-current--slow { animation-duration: 1.4s; }
.hb-scope .hb-glow {
  fill: currentColor;
  stroke: none;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: hb-glow 6s var(--ease-in-out) var(--d, 0s) infinite;
}
@keyframes hb-glow {
  0%, 8% { opacity: 0; transform: scale(0.6); }
  14%, 55% { opacity: 0.4; transform: scale(1); }
  62%, 100% { opacity: 0; transform: scale(0.6); }
}
.hb-scope .hb-switch {
  transform-box: view-box;
  transform-origin: 0 0;
  animation: hb-switch 6s var(--ease-in-out) var(--d, 0s) infinite;
}
@keyframes hb-switch {
  0%, 6% { transform: rotate(0deg); }
  10%, 56% { transform: rotate(-40deg); }
  60%, 100% { transform: rotate(0deg); }
}

/* STRUCTURAL: loads press down, forces travel through the diagonals, the truss deflects */
.hb-scope .hb-loads { animation: hb-press 3s var(--ease-in-out) infinite alternate; }
@keyframes hb-press { from { transform: translateY(-6px); } to { transform: translateY(2px); } }
.hb-scope .hb-force { stroke-width: 2; stroke-dasharray: 6 14; animation: hb-flow-20 1.2s linear infinite; }
@keyframes hb-flow-20 { to { stroke-dashoffset: -20; } }
.hb-scope .hb-deflect {
  transform-box: fill-box;
  transform-origin: top;
  animation: hb-deflect 3s var(--ease-in-out) infinite alternate;
}
@keyframes hb-deflect { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }

/* CIVIL: lane markings stream, cars circulate anticlockwise and arrive on each arm */
.hb-scope .hb-lane { stroke-dasharray: 12 10; animation: hb-flow-22 2s linear infinite; }
.hb-scope .hb-lane--ring { stroke-dasharray: 8 8; animation: hb-flow-16r 2.4s linear infinite; }
@keyframes hb-flow-22 { to { stroke-dashoffset: -22; } }
@keyframes hb-flow-16r { to { stroke-dashoffset: 16; } }
.hb-scope .hb-orbit {
  transform-box: view-box;
  transform-origin: 0 0;
  animation: hb-orbit var(--t, 9s) linear infinite;
}
@keyframes hb-orbit { to { transform: rotate(-360deg); } }
.hb-scope .hb-car--east { animation: hb-east 7s var(--ease-out) infinite; }
.hb-scope .hb-car--west { animation: hb-west 8s var(--ease-out) 2s infinite both; }
.hb-scope .hb-car--north { animation: hb-north 6s var(--ease-out) 1s infinite both; }
@keyframes hb-east { 0% { transform: translateX(-320px); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateX(0); opacity: 1; } 80%, 100% { transform: translateX(0); opacity: 0; } }
@keyframes hb-west { 0% { transform: translateX(320px); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateX(0); opacity: 1; } 80%, 100% { transform: translateX(0); opacity: 0; } }
@keyframes hb-north { 0% { transform: translateY(160px); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateY(0); opacity: 1; } 80%, 100% { transform: translateY(0); opacity: 0; } }

/* Drafting compass */
.hb-scope .hb-arc { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hb-arc 8s var(--ease-in-out) infinite; }
@keyframes hb-arc { 0% { stroke-dashoffset: 1; } 45%, 70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
.hb-scope .hb-compass {
  transform-box: view-box;
  transform-origin: 0 0;
  animation: hb-compass 8s var(--ease-in-out) infinite;
}
@keyframes hb-compass { 0% { transform: rotate(-90deg); } 45%, 70% { transform: rotate(270deg); } 100% { transform: rotate(630deg); } }

/* Paused: off-screen, slides paused by the visitor, or hidden tab */
.hero-bg.is-paused *,
.hero-bg.is-paused,
.hero.is-motion-paused .slide__art *,
.slide:not(.is-active) .slide__art * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .hero-bg *, .hero-bg, .hb-scope * { animation: none !important; }
  .hb-scope .hb-arc { stroke-dashoffset: 0; }
  .hb-scope .hb-glow { opacity: 0.3; }
}

/* The foreground drawing sits on a solid panel so the two drawings don't tangle */
.slide__art .drawing { background: rgba(43, 23, 9, 0.88); }
@supports (backdrop-filter: blur(4px)) {
  .slide__art .drawing { background: rgba(43, 23, 9, 0.55); backdrop-filter: blur(4px); }
}

.carousel { position: relative; z-index: 1; }

/* ----- Typewriter headline ----- */
.tw { position: relative; }
.tw__rest { color: transparent; }  /* untyped text keeps its space, so lines never reflow while typing */
.tw__caret {
  position: relative;
  display: inline-block;
  width: 0;
  height: 0; /* takes no space, so it can't change the line height */
}
.tw__caret::after {
  content: "";
  position: absolute;
  left: 0.04em;
  bottom: -0.1em;
  width: 0.08em;
  height: 0.92em;
  border-radius: 1px;
  background: var(--gold);
}
.tw.is-done .tw__caret::after {
  animation: tw-blink 1s steps(1, end) 4, tw-out 250ms var(--ease-out) 4s forwards;
}
@keyframes tw-blink { 50% { opacity: 0; } }
@keyframes tw-out { to { opacity: 0; } }

.carousel { padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(2rem, 1.5rem + 2vw, 3rem); }

/* All slides share one grid cell, so the hero takes the height of the tallest slide */
.carousel__track { display: grid; }
.slide {
  grid-area: 1 / 1;
  position: relative;
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms var(--ease-in-out), visibility 0s linear 600ms;
}
.slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 600ms var(--ease-in-out), visibility 0s;
}

.slide__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
@media (min-width: 60em) {
  .slide__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 30rem; }
}

/* Text settles in after the crossfade */
.slide__copy > * {
  transform: translateY(10px);
  opacity: 0;
  transition: transform 500ms var(--ease-out), opacity 500ms var(--ease-out);
}
.slide.is-active .slide__copy > * { transform: none; opacity: 1; }
.slide.is-active .slide__copy > :nth-child(1) { transition-delay: 150ms; }
.slide.is-active .slide__copy > :nth-child(2) { transition-delay: 200ms; }
.slide.is-active .slide__copy > :nth-child(3) { transition-delay: 250ms; }
.slide.is-active .slide__copy > :nth-child(4) { transition-delay: 300ms; }

.slide__kicker {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gold);
}
.slide__title {
  max-width: 18ch;
  margin-top: 1rem;
  font-size: var(--step-3);
  font-weight: 800;
  font-stretch: 108%;
  letter-spacing: -0.025em;
  line-height: 1.03;
}
.slide__text {
  max-width: 36rem;
  margin-top: 1.25rem;
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  line-height: 1.65;
  color: var(--on-dark-muted);
}
.slide__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.slide__art { margin: 0; color: var(--gold); }

/* Optional photo: drop an <img class="slide__photo"> into a slide */
.slide__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slide:has(.slide__photo)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(43, 23, 9, 0.92) 0%, rgba(43, 23, 9, 0.7) 50%, rgba(43, 23, 9, 0.25) 100%);
}
.slide:has(.slide__photo) .slide__art { visibility: hidden; }

/* Engineering drawings */
.drawing-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.drawing {
  width: 100%;
  height: auto;
  border: 1px solid rgba(245, 184, 0, 0.28);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.015);
}
.drawing .draw {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.drawing .bold { stroke-width: 2.6; }
.drawing .thin { stroke-width: 1; opacity: 0.8; }
.drawing__label {
  fill: var(--on-dark-muted);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
}
.drawing__label.small { font-size: 11px; }

/* Lines draw in each time a slide becomes active (transitions, so they retarget if interrupted) */
@media (prefers-reduced-motion: no-preference) {
  .slide .draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 0s linear 600ms;
  }
  .slide.is-active .draw {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 900ms var(--ease-in-out);
  }
  .slide .drawing__fill, .slide .drawing__label { opacity: 0; transition: opacity 0s linear 600ms; }
  .slide.is-active .drawing__fill,
  .slide.is-active .drawing__label { opacity: 1; transition: opacity 500ms var(--ease-out) 1300ms; }

  .slide.is-active .g1 .draw { transition-delay: 100ms; }
  .slide.is-active .g2 .draw { transition-delay: 300ms; }
  .slide.is-active .g3 .draw { transition-delay: 500ms; }
  .slide.is-active .g4 .draw { transition-delay: 700ms; transition-duration: 1000ms; }
  .slide.is-active .g5 .draw { transition-delay: 1100ms; transition-duration: 700ms; }
}

/* Controls */
.carousel__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
html:not(.js) .carousel__controls { display: none; }

.carousel__dots { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.carousel__dot {
  min-height: 2.5rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: transparent;
  color: var(--on-dark-muted);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out);
}
.carousel__dot:active { transform: scale(0.97); }
.carousel__dot[aria-current="true"] { background: var(--gold); border-color: var(--gold); color: var(--espresso); }
@media (hover: hover) and (pointer: fine) {
  .carousel__dot:not([aria-current="true"]):hover { color: var(--white); border-color: rgba(255, 255, 255, 0.4); }
}
.carousel__dot-num { display: none; }
@media (max-width: 39.99em) {
  .carousel__dot-label { display: none; }
  .carousel__dot-num { display: inline; }
  .carousel__dot { width: 2.5rem; padding: 0; }
}

.carousel__progress {
  flex: 1 1 3rem;
  height: 2px;
  background: var(--line-dark);
  border-radius: 2px;
  overflow: hidden;
}
.carousel__progress span {
  display: block;
  height: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
}

.carousel__pause {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: border-color 200ms ease, transform 160ms var(--ease-out);
}
.carousel__pause:active { transform: scale(0.95); }
.carousel__pause svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.carousel__pause .icon-play { display: none; }
.carousel__pause[data-paused="true"] .icon-pause { display: none; }
.carousel__pause[data-paused="true"] .icon-play { display: block; fill: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .carousel__pause:hover { border-color: rgba(255, 255, 255, 0.5); }
}

/* ---------- 5b. At a glance ---------- */
.glance { position: relative; z-index: 2; margin-top: -1px; background: var(--espresso); }
.glance__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 calc(-1 * clamp(2.5rem, 5vw, 3.5rem));
  background: var(--white);
  border-radius: var(--r-md);
  border-top: 4px solid var(--gold);
  box-shadow: 0 24px 50px -24px rgba(43, 23, 9, 0.45);
  transform: translateY(clamp(2.5rem, 5vw, 3.5rem));
}
.glance__item {
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-left: 1px solid var(--line);
}
.glance__item:nth-child(odd) { border-left: 0; }
.glance__item:nth-child(n + 3) { border-top: 1px solid var(--line); }
.glance__item dt { order: 2; margin-top: 0.35rem; font-weight: 700; font-size: 0.98rem; color: var(--espresso); }
.glance__item dd:not(.glance__note) {
  order: 1;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1;
  color: var(--brown);
}
.glance__item:last-child dd:not(.glance__note) { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); line-height: 1.25; }
.glance__item .glance__note { order: 3; margin-top: 0.25rem; font-size: 0.9rem; color: var(--muted); }
@media (min-width: 60em) {
  .glance__grid { grid-template-columns: repeat(4, 1fr); }
  .glance__item:nth-child(odd) { border-left: 1px solid var(--line); }
  .glance__item:first-child { border-left: 0; }
  .glance__item:nth-child(n + 3) { border-top: 0; }
}
.glance + .section { padding-top: calc(var(--section-y) + clamp(2.5rem, 5vw, 3.5rem)); }

/* ---------- 6. Shared section layout ---------- */
.section { padding-block: var(--section-y); }

.section-head { max-width: 44rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.section-head--split { max-width: none; display: grid; gap: 1.25rem; }
@media (min-width: 60em) {
  .section-head--split { grid-template-columns: 1fr 1fr; align-items: end; gap: 4rem; }
}

.section-title {
  font-size: var(--step-2);
  font-weight: 780;
  font-stretch: 110%;
  letter-spacing: -0.02em;
  color: var(--espresso);
}
.section-intro {
  margin-top: 1rem;
  max-width: 38rem;
  color: var(--muted);
  font-size: 1.1rem;
}
.section-head--split .section-intro { margin-top: 0; }

/* ---------- 7. About ---------- */
.about__grid { display: grid; gap: 3rem; }
.about__copy > p:not(.eyebrow) { max-width: 38rem; margin-top: 1.25rem; color: var(--muted); }

.registration {
  align-self: start;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  border-radius: var(--r-sm);
  background: var(--white);
}
.registration__title { font-size: var(--step-1); font-weight: 700; color: var(--espresso); }
.registration__list { margin: 1.25rem 0 1.5rem; }
.registration__list > div {
  display: grid;
  gap: 0.15rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}
.registration__list > div:first-child { border-top: 1px solid var(--line); }
.registration__list dt { font-size: var(--step--1); color: var(--muted); }
.registration__list dd { font-weight: 600; }

@media (min-width: 40em) {
  .registration__list > div { grid-template-columns: 11rem 1fr; gap: 1rem; }
}
@media (min-width: 60em) {
  .about__grid { grid-template-columns: 1.15fr 1fr; gap: 5rem; }
}

/* ---------- 8. Services: divisions and sectors (see section 17) ---------- */
.services { background: var(--concrete); }

/* ---------- 9. Capabilities ---------- */
.spec-sheet {
  display: grid;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  overflow: hidden;
}
.spec {
  padding: 1.75rem 1.5rem;
  border-top: 1px solid var(--line);
}
.spec:first-child { border-top: 0; }
.spec__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.3rem;
  font-weight: 750;
  font-stretch: 112%;
  color: var(--espresso);
}
.spec__title::before {
  content: "";
  width: 0.75rem; height: 0.75rem;
  background: var(--gold);
  border-radius: 2px;
}
.spec__list { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.spec__list li {
  padding: 0.55rem 0;
  border-top: 1px dashed var(--line);
  color: var(--ink);
  font-size: 0.98rem;
}

@media (min-width: 40em) {
  .spec-sheet { grid-template-columns: 1fr 1fr; }
  .spec { border-top: 0; }
  .spec:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .spec:nth-child(even) { border-left: 1px solid var(--line); }
}
@media (min-width: 64em) {
  .spec-sheet { grid-template-columns: repeat(4, 1fr); }
  .spec:nth-child(n + 3) { border-top: 0; }
  .spec + .spec { border-left: 1px solid var(--line); }
}

.capability-notes {
  display: grid;
  gap: 2rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.capability-notes h3 { font-size: 1.1rem; font-weight: 700; color: var(--espresso); }
.capability-notes p { margin-top: 0.4rem; color: var(--muted); }
@media (min-width: 48em) {
  .capability-notes { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
}

/* ---------- 10. Approach ---------- */
.approach {
  background: var(--espresso);
  color: var(--on-dark);
  --focus: var(--gold);
}
.approach .section-title { color: var(--on-dark); }
.approach .section-intro { color: var(--on-dark-muted); }

.process {
  display: grid;
  gap: 0;
  counter-reset: none;
}
.process__step {
  position: relative;
  padding: 0 0 2.25rem 4rem;
}
/* Vertical connector on mobile */
.process__step::before {
  content: "";
  position: absolute;
  left: 1.25rem; top: 2.75rem; bottom: 0.5rem;
  width: 1px;
  background: var(--line-dark);
}
.process__step:last-child { padding-bottom: 0; }
.process__step:last-child::before { display: none; }

.process__num {
  position: absolute;
  left: 0; top: 0;
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  font-weight: 750;
  color: var(--gold);
}
.process__step h3 { padding-top: 0.45rem; font-size: 1.15rem; font-weight: 700; }
.process__step p { margin-top: 0.5rem; color: var(--on-dark-muted); font-size: 0.98rem; }

@media (min-width: 64em) {
  .process { grid-template-columns: repeat(5, 1fr); gap: 2rem; }
  .process__step { padding: 4rem 0 0; }
  /* Horizontal connector on desktop */
  .process__step::before {
    left: 3.25rem; right: -1.25rem; top: 1.25rem; bottom: auto;
    width: auto; height: 1px;
  }
  .process__step h3 { padding-top: 0; }
}

/* ---------- 11. Why choose us ---------- */
.why__grid { display: grid; gap: 2.5rem; }
.why__list { display: grid; gap: 0; }
.why__list li {
  padding: 1.75rem 0;
  border-top: 1px solid var(--line);
}
.why__list li:last-child { border-bottom: 1px solid var(--line); }
.why__list h3 {
  font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  font-weight: 720;
  font-stretch: 106%;
  color: var(--espresso);
}
.why__list p { margin-top: 0.5rem; max-width: 34rem; color: var(--muted); }

@media (min-width: 48em) {
  .why__list { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
  .why__list li:nth-last-child(2) { border-bottom: 1px solid var(--line); }
}
@media (min-width: 64em) {
  .why__grid { grid-template-columns: 18rem 1fr; gap: 4rem; }
  .why__title { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
}

/* ---------- 12. CTA band ---------- */
.cta-band {
  padding-block: clamp(3rem, 2rem + 4vw, 4.5rem);
  background: var(--gold);
  color: var(--espresso);
  --focus: var(--espresso);
}
.cta-band__inner {
  display: grid;
  gap: 1.75rem;
  align-items: center;
}
.cta-band__title {
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.02em;
}
.cta-band__text { margin-top: 0.6rem; max-width: 36rem; font-size: 1.08rem; color: #3D2210; }
.cta-band .btn { justify-self: start; }
@media (min-width: 48em) {
  .cta-band__inner { grid-template-columns: 1fr auto; gap: 3rem; }
}

/* ---------- 13. Contact ---------- */
.contact { background: var(--concrete); }
.contact__grid { display: grid; gap: 2.5rem; }
@media (min-width: 64em) {
  .contact__grid { grid-template-columns: 1.6fr 1fr; gap: 4rem; align-items: start; }
}

.quote-form {
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.field-row { display: grid; gap: 1.25rem; }
@media (min-width: 40em) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

.field { display: grid; gap: 0.4rem; align-content: start; }
.field label { font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.field label span { color: var(--error); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--white);
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.field textarea { resize: vertical; min-height: 8rem; line-height: 1.5; }
.field ::placeholder { color: #8C8079; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brown);
  box-shadow: 0 0 0 3px rgba(245, 184, 0, 0.45);
}
@media (hover: hover) and (pointer: fine) {
  .field input:hover:not(:focus),
  .field select:hover:not(:focus),
  .field textarea:hover:not(:focus) { border-color: var(--umber); }
}

.field [aria-invalid="true"] { border-color: var(--error); }
.field [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.2); }

.select { position: relative; }
.select select { appearance: none; padding-right: 2.5rem; cursor: pointer; }
.select::after {
  content: "";
  position: absolute;
  right: 1rem; top: 50%;
  width: 0.5rem; height: 0.5rem;
  border-right: 2px solid var(--brown);
  border-bottom: 2px solid var(--brown);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.field__hint { font-size: 0.88rem; color: var(--muted); }
.field__error { font-size: 0.88rem; font-weight: 600; color: var(--error); }
.field__error:empty { display: none; }

.quote-form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 0.25rem;
}
.form-status { flex: 1 1 16rem; font-size: 0.95rem; font-weight: 600; }
.form-status:empty { display: none; }
.form-status[data-state="success"] { color: var(--success); }
.form-status[data-state="error"] { color: var(--error); }
.form-status[data-state="pending"] { color: var(--muted); }

/* Hand-off panel: shown after a valid submit when no endpoint is configured */
.handoff {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--r-sm);
  background: #FFFBEF;
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out);
}
@starting-style {
  .handoff { opacity: 0; transform: translateY(6px); }
}
.handoff[hidden] { display: none; }
.handoff__title { font-size: 1.15rem; font-weight: 700; color: var(--espresso); }
.handoff__title:focus { outline: none; }
.handoff__title:focus-visible { outline: 3px solid var(--focus); }
.handoff__text { margin-top: 0.4rem; color: var(--muted); }
.handoff__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.handoff__status { margin-top: 0.9rem; font-size: 0.92rem; font-weight: 600; color: var(--success); }
.handoff__status:empty { display: none; }
@media (max-width: 39.99em) {
  .handoff__actions .btn { width: 100%; }
}
.handoff__details { margin-top: 1rem; }
.handoff__details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--brown);
  border-radius: 4px;
}
.handoff__preview {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.75rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--white);
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink);
  resize: vertical;
}
.handoff__fallback { margin-top: 0.6rem; font-size: 0.9rem; color: var(--muted); }
.handoff__fallback a { color: var(--brown); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .handoff { transition: opacity 200ms ease; }
  @starting-style { .handoff { transform: none; } }
}

/* Contact card */
.contact-card {
  padding: clamp(1.75rem, 4vw, 2.25rem);
  background: var(--espresso);
  color: var(--on-dark);
  border-radius: var(--r-lg);
  --focus: var(--gold);
}
.contact-card__title { font-size: var(--step-1); font-weight: 700; }
.contact-card__list { margin-top: 1.25rem; }
.contact-card__list > div { padding: 1rem 0; border-top: 1px solid var(--line-dark); }
.contact-card__list dt { font-size: var(--step--1); color: var(--on-dark-muted); }
.contact-card__list dd { margin-top: 0.2rem; font-weight: 600; line-height: 1.5; }
.contact-card__list a {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: rgba(245, 184, 0, 0.4);
  text-underline-offset: 0.2em;
  transition: text-decoration-color 200ms ease;
  overflow-wrap: anywhere;
}
@media (hover: hover) and (pointer: fine) {
  .contact-card__list a:hover { text-decoration-color: var(--gold); }
}
.contact-card__note {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-dark);
  font-size: 0.95rem;
  color: var(--on-dark-muted);
}
@media (min-width: 64em) {
  .contact-card { position: sticky; top: calc(var(--header-h) + 1.5rem); margin-top: 6.5rem; }
}

/* ---------- 14. Footer ---------- */
.site-footer {
  padding-top: clamp(3.5rem, 6vw, 5rem);
  background: var(--espresso-deep);
  color: var(--on-dark-muted);
  font-size: 0.95rem;
  --focus: var(--gold);
}
.site-footer a {
  color: var(--on-dark);
  text-decoration: none;
  transition: color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .site-footer a:hover { color: var(--gold); }
}
.site-footer__grid { display: grid; gap: 2.5rem; padding-bottom: 3rem; }
@media (min-width: 40em) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 3rem; } }

.brand--footer { color: var(--on-dark); }
.brand--footer .brand__suffix { color: var(--gold); }
.site-footer__brand p { margin-top: 1rem; max-width: 22rem; }

.site-footer__heading {
  margin-bottom: 1rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--on-dark);
}
.site-footer__col li + li { margin-top: 0.55rem; }
.site-footer__col p { margin-top: 0.75rem; }

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 1.5rem 2rem;
  background: linear-gradient(var(--line-dark), var(--line-dark)) center top / calc(100% - 2 * var(--gutter)) 1px no-repeat;
  font-size: 0.88rem;
}


/* ---------- 17. Elements added for the corporate presentation ---------- */

/* Section labels: sentence case, used once per section */
.eyebrow {
  margin-bottom: 0.9rem;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--umber);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 2px;
  margin-right: 0.6rem;
  vertical-align: middle;
  background: var(--gold);
}
.eyebrow--light { color: var(--gold); }

.btn--ghost-dark { border-color: var(--espresso); color: var(--espresso); }
@media (hover: hover) and (pointer: fine) {
  .btn--ghost-dark:hover { background: rgba(43, 23, 9, 0.08); }
}
.btn__icon--stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* About extras */
.about__copy > p.about__lead { margin-top: 1.75rem; color: var(--ink); font-size: 1.15rem; }
.vm {
  display: grid;
  gap: 1rem;
  margin: 2.25rem 0;
}
.vm__item {
  padding: 1.25rem 1.4rem;
  background: var(--concrete);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.vm__item h3 { font-size: 1.05rem; font-weight: 700; color: var(--espresso); }
.about__copy .vm__item p { margin-top: 0.35rem; color: var(--muted); font-size: 0.98rem; }
@media (min-width: 40em) { .vm { grid-template-columns: 1fr 1fr; } }

.registration__title--spaced { margin-top: 2rem; }
.milestones { margin-top: 1rem; }
.milestones li {
  position: relative;
  display: grid;
  gap: 0.1rem;
  padding: 0 0 1.1rem 1.5rem;
  border-left: 2px solid var(--line);
  margin-left: 0.35rem;
}
.milestones li::before {
  content: "";
  position: absolute;
  left: -0.42rem; top: 0.3rem;
  width: 0.75rem; height: 0.75rem;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--umber);
}
.milestones li:last-child { padding-bottom: 0; border-left-color: transparent; }
.milestones time { font-size: 0.85rem; font-weight: 700; color: var(--umber); }
.milestones span { font-size: 0.95rem; }
.milestones .milestones__now::before { background: var(--gold); border-color: var(--gold); }
.milestones__dot { display: none; }

/* Divisions */
.divisions { display: grid; gap: 1rem; }
@media (min-width: 40em) {
  .divisions { grid-template-columns: 1fr 1fr; }
  .division:last-child { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  /* Three across, then two wider cards */
  .divisions { grid-template-columns: repeat(6, 1fr); }
  .division { grid-column: span 2; }
  .division:nth-child(n + 4) { grid-column: span 3; }
}
.division {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  transition: box-shadow 250ms ease, border-color 250ms ease, transform 250ms var(--ease-out);
}
.division__head { display: flex; align-items: center; justify-content: space-between; }
.division__num { font-size: 0.95rem; font-weight: 800; font-stretch: 115%; color: var(--umber); }
.division__icon {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  border-radius: var(--r-sm);
  background: var(--gold-soft);
  color: var(--brown);
}
.division__icon svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.division__title { margin-top: 1.25rem; font-size: 1.3rem; font-weight: 750; font-stretch: 106%; color: var(--espresso); }
.division > p { margin-top: 0.5rem; color: var(--muted); font-size: 0.98rem; }
.division__list { list-style: none; margin: 1rem 0 0; padding: 0; }
.division__list li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.1rem;
  border-top: 1px dashed var(--line);
  font-size: 0.95rem;
}
.division__list li::before {
  content: "";
  position: absolute; left: 0; top: 0.95rem;
  width: 0.4rem; height: 0.4rem;
  background: var(--gold);
  border-radius: 1px;
}
.division__link {
  margin-top: auto;
  padding-top: 1.25rem;
  align-self: flex-start;
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--brown);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1.5px;
}
@media (hover: hover) and (pointer: fine) {
  .division:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
}

/* Sectors */
.sectors { background: var(--espresso); color: var(--on-dark); --focus: var(--gold); }
.sectors .section-title { color: var(--on-dark); }
.sectors .section-intro { color: var(--on-dark-muted); }
.sector-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.sector {
  padding: 1.5rem;
  border: 1px solid rgba(245, 184, 0, 0.22);
  border-radius: var(--r-md);
  background:
    linear-gradient(rgba(245, 184, 0, 0.05) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(245, 184, 0, 0.05) 1px, transparent 1px) 0 0 / 20px 20px,
    rgba(255, 255, 255, 0.02);
}
.sector__art {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 3;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sector h3 { margin-top: 1.25rem; font-size: 1.2rem; font-weight: 700; }
.sector p { margin-top: 0.4rem; font-size: 0.95rem; color: var(--on-dark-muted); }
@media (min-width: 64em) {
  .sector-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .sector--feature { grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; }
  .sector--feature .sector__art { margin-block: auto; transform: scale(1.15); }
  .sector--feature h3 { font-size: 1.6rem; }
}

/* Values */
.values { margin-top: clamp(3rem, 6vw, 4.5rem); }
.values__title { font-size: 1.1rem; font-weight: 700; color: var(--espresso); }
.values__list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.values__list li {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  padding: 1.1rem 1.2rem;
  background: var(--concrete);
  border-radius: var(--r-sm);
}
.values__list strong { font-weight: 750; color: var(--brown); }
.values__list span { font-size: 0.92rem; color: var(--muted); }

/* Who we work with: slow marquee */
.audience {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--espresso-deep);
  color: var(--on-dark);
  overflow: hidden;
}
.audience__title { font-size: 1rem; font-weight: 650; color: var(--gold); }
.marquee {
  margin-top: 1.25rem;
  -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; width: max-content; }
.marquee__track span {
  display: inline-flex;
  align-items: center;
  padding-inline: 1.5rem;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  font-weight: 700;
  font-stretch: 112%;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.86);
}
.marquee__track span::after {
  content: "";
  width: 0.5rem; height: 0.5rem;
  margin-left: 3rem;
  background: var(--gold);
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marquee 60s linear infinite; }
  @media (hover: hover) and (pointer: fine) {
    .marquee:hover .marquee__track { animation-play-state: paused; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { mask-image: none; -webkit-mask-image: none; }
  .marquee__track { flex-wrap: wrap; width: auto; padding-inline: var(--gutter); }
  .marquee__track span:nth-child(n + 11) { display: none; }
  .marquee__track span { padding: 0.25rem 1rem 0.25rem 0; font-size: 1.1rem; }
  .marquee__track span::after { margin-left: 1rem; }
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* CTA actions */
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Footer extras */
.brand__tile { display: grid; place-items: center; padding: 0.3rem 0.4rem; background: var(--white); border-radius: var(--r-sm); }
.brand__tile .brand__logo { width: 46px; }
.socials { display: flex; gap: 0.6rem; margin-top: 1.25rem; }
.socials a {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  transition: border-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
}
.socials a:active { transform: scale(0.95); }
.socials svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .site-footer .socials a:hover { border-color: var(--gold); color: var(--gold); }
}
.badge {
  display: inline-flex !important;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem !important;
  padding: 0.6rem 0.9rem 0.6rem 0.6rem;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-sm);
  font-size: 0.85rem;
  line-height: 1.35;
}
.badge__mark {
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  border: 2px solid var(--gold);
  color: var(--gold);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

/* ---------- 15. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
  .division:hover { transform: none; }
  .primary-nav { transform: none !important; }
  .slide__copy > * { transform: none !important; }
}

/* ---------- 16. Print ---------- */
@media print {
  .site-header, .cta-band, .quote-form, .skip-link { display: none; }
  .hero, .approach, .contact-card, .site-footer { background: none; color: #000; }
}

/* Discipline captions on the background drawings (as on a drawing sheet) */
.hb-scope .hb-caption { font-size: 13px; font-weight: 700; letter-spacing: 0.03em; }

/* The slide display uses the same drawing as the background, at full strength */
.slide__art .hb-ink { opacity: 1; }
.slide__art .drawing--live path,
.slide__art .drawing--live circle { stroke-width: 1.4; }
.slide__art .drawing--live .hb-thin { stroke-width: 1; }
.slide__art .drawing--live .hb-caption { font-size: 14px; }
.slide__art .drawing--live .hb-label { font-size: 12px; }
/* Each display settles in as its slide arrives */
@media (prefers-reduced-motion: no-preference) {
  .slide .drawing--live { transform: scale(0.97); opacity: 0; transition: transform 700ms var(--ease-out), opacity 500ms var(--ease-out); }
  .slide.is-active .drawing--live { transform: none; opacity: 1; transition-delay: 150ms; }
}

/* ----- Slide display box: identical size on every slide ----- */
.slide__art .drawing--live {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  background-color: rgba(43, 23, 9, 0.6);
  /* Drafting grid drawn by CSS, so it fills the whole box whatever the drawing's shape */
  background-image:
    linear-gradient(rgba(245, 184, 0, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 184, 0, 0.14) 1px, transparent 1px),
    linear-gradient(rgba(245, 184, 0, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 184, 0, 0.06) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  background-position: -1px -1px;
}

/* ----- Phones and tablets ----- */
@media (max-width: 59.99em) {
  /* The display already shows the drawing, so the background steps back */
  .hero-bg .hb-ink { opacity: 0.2; }
  .hero-bg .hb-label { display: none; }
  .slide__art { width: 100%; max-width: 34rem; }
}
@media (max-width: 30em) {
  .carousel { padding-top: 2.25rem; }
  .slide__title { margin-top: 0.75rem; }
  .slide__text { margin-top: 1rem; font-size: 1rem; }
  .slide__actions { margin-top: 1.5rem; gap: 0.6rem; }
  .slide__actions .btn { width: 100%; }
}

/* Every slide fills the same height, so the display box sits in the same place on every slide */
.slide { display: grid; }
.slide__grid { height: 100%; }
@media (max-width: 59.99em) {
  .slide__grid { align-content: space-between; }
}

/* =========================================================
   Scroll motion (see src/scroll-motion.ts)
   Only active with the .js-motion class, which is never set for reduced motion.
   Uses the individual `translate` property, so it never fights hover transforms.
   ========================================================= */
:root { --ease-premium: cubic-bezier(0.16, 1, 0.3, 1); }

.js-motion [data-reveal="text"],
.js-motion [data-reveal="block"] {
  opacity: 0;
  translate: 0 28px;
  transition:
    opacity 700ms var(--ease-premium),
    translate 900ms var(--ease-premium),
    filter 700ms var(--ease-premium);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-motion [data-reveal="text"] { filter: blur(6px); }
.js-motion [data-reveal].is-revealed { opacity: 1; translate: 0 0; filter: none; }

/* Titles: each word rises from behind its own mask */
.section-title .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.section-title .w__i { display: inline-block; }
.js-motion [data-reveal="words"] .w__i {
  translate: 0 110%;
  transition: translate 900ms var(--ease-premium);
  transition-delay: calc(var(--reveal-delay, 0ms) + var(--i) * 45ms);
}
.js-motion [data-reveal="words"].is-revealed .w__i { translate: 0 0; }

/* Already passed when the page loaded: show without animating */
.js-motion .reveal-instant,
.js-motion .reveal-instant .w__i { transition: none !important; }

/* Process: the connecting line draws itself once the step arrives */
.js-motion .process__step[data-reveal]::before {
  scale: 1 0;
  transform-origin: top;
  transition: scale 1000ms var(--ease-premium);
  transition-delay: calc(var(--reveal-delay, 0ms) + 250ms);
}
@media (min-width: 64em) {
  .js-motion .process__step[data-reveal]::before { scale: 0 1; transform-origin: left; }
}
.js-motion .process__step[data-reveal].is-revealed::before { scale: 1 1; }

/* Header: slides away going down, returns going up */
.site-header {
  transition: border-color 200ms ease, box-shadow 200ms ease, translate 400ms var(--ease-premium);
}
.site-header.is-hidden { translate: 0 -100%; box-shadow: none; }

/* Hero depth layers move on the compositor */
.js-motion .hero-bg,
.js-motion .hero .carousel { will-change: translate, opacity; }

/* =========================================================
   Sectors: animated backdrop (see src/sectors.ts)
   Runs only while the section is on screen (.is-live) and never for reduced motion.
   ========================================================= */
.sectors {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-bottom: clamp(12rem, 9rem + 10vw, 17rem); /* room for the skyline */
  background: #241307;
}
.sectors > .container { position: relative; z-index: 1; }
.sectors-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; color: var(--gold); }

/* Dusk light: two warm pools drifting slowly */
.sectors-bg__glow {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(40% 35% at 25% 75%, rgba(232, 140, 20, 0.28), transparent 70%),
    radial-gradient(35% 30% at 75% 80%, rgba(245, 184, 0, 0.18), transparent 70%),
    radial-gradient(60% 40% at 50% 0%, rgba(90, 46, 20, 0.6), transparent 70%);
  animation: sx-drift 22s var(--ease-in-out) infinite alternate;
}
@keyframes sx-drift {
  from { transform: translate3d(-4%, 2%, 0) scale(1); }
  to   { transform: translate3d(4%, -2%, 0) scale(1.08); }
}
/* Cursor spotlight (pointer devices only; position set by script) */
.sectors-bg__spot {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(245, 184, 0, 0.10), transparent 65%);
  transition: opacity 400ms var(--ease-out);
}
.sectors.is-pointer .sectors-bg__spot { opacity: 1; }

/* Skyline */
.pn {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: clamp(11rem, 8rem + 12vw, 18rem);
}
.pn path, .pn circle, .pn rect, .pn polygon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.pn .pn-thin { stroke-width: 1; }
.pn-lines { opacity: 0.55; }

/* 1. Draw-in, left to right, when the section first arrives */
.js-motion .pn-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js-motion .sectors.is-drawn .pn-draw {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1600ms var(--ease-premium);
  transition-delay: var(--d, 0s);
}

/* 2. Alive: details fade up after the drawing */
.pn-live { opacity: 0; transition: opacity 900ms var(--ease-out) 1.6s; }
.sectors.is-drawn .pn-live, html:not(.js-motion) .pn-live { opacity: 1; }

.pn .pn-win { fill: currentColor; stroke: none; opacity: 0.1; }
.pn .pn-beacon { fill: currentColor; stroke: none; }
.pn .pn-star { fill: currentColor; stroke: none; opacity: 0.35; }
.pn .pn-water { stroke-width: 1.4; stroke-dasharray: 10 10; opacity: 0.8; }
.pn .pn-conveyor { stroke-width: 2; stroke-dasharray: 4 6; }
.pn .pn-pulse { stroke-width: 2.2; stroke-dasharray: 2 26; opacity: 0.9; }
.pn .pn-smoke { fill: currentColor; stroke: none; opacity: 0; }
.pn .pn-car path, .pn .pn-trolley path { fill: currentColor; stroke: none; }
.pn .pn-trolley .pn-thin { fill: none; stroke: currentColor; }
.pn .pn-car { opacity: 0.9; }

.js-motion .sectors.is-live .pn-win { animation: sx-win var(--wt, 10s) ease-in-out var(--wd, 0s) infinite; }
@keyframes sx-win { 0%, 30% { opacity: 0.1; } 38%, 85% { opacity: 0.75; } 92%, 100% { opacity: 0.1; } }
.js-motion .sectors.is-live .pn-star { animation: sx-twinkle var(--st, 5s) ease-in-out var(--sd, 0s) infinite alternate; }
@keyframes sx-twinkle { from { opacity: 0.12; } to { opacity: 0.8; } }
.js-motion .sectors.is-live .pn-beacon { animation: sx-beacon 2.4s steps(1, end) infinite; }
@keyframes sx-beacon { 0%, 60% { opacity: 0.15; } 61%, 100% { opacity: 1; } }
.js-motion .sectors.is-live .pn-water { animation: sx-flow-20 2s linear infinite; }
@keyframes sx-flow-20 { to { stroke-dashoffset: -20; } }
.js-motion .sectors.is-live .pn-conveyor { animation: sx-flow-10 0.9s linear infinite; }
@keyframes sx-flow-10 { to { stroke-dashoffset: -10; } }
.js-motion .sectors.is-live .pn-pulse { animation: sx-flow-28 1.6s linear infinite; }
@keyframes sx-flow-28 { to { stroke-dashoffset: 28; } }
.js-motion .sectors.is-live .pn-smoke {
  transform-box: fill-box;
  transform-origin: center;
  animation: sx-smoke 4s var(--ease-out) var(--sd, 0s) infinite;
}
@keyframes sx-smoke {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  15% { opacity: 0.5; }
  100% { opacity: 0; transform: translate(14px, -46px) scale(2.4); }
}
.js-motion .sectors.is-live .pn-car--e { animation: sx-east 7s linear infinite; }
.js-motion .sectors.is-live .pn-car--w { animation: sx-west 9s linear 2s infinite both; }
.pn-car--e { transform: translateX(822px); }
.pn-car--w { transform: translateX(1040px); }
@keyframes sx-east { from { transform: translateX(822px); } to { transform: translateX(1040px); } }
@keyframes sx-west { from { transform: translateX(1040px); } to { transform: translateX(822px); } }
.js-motion .sectors.is-live .pn-trolley { animation: sx-trolley 8s var(--ease-in-out) infinite alternate; }
@keyframes sx-trolley { from { transform: translateX(0); } to { transform: translateX(84px); } }

/* Cards: glass panels with a border that lights up near the cursor */
.sector {
  position: relative;
  background:
    linear-gradient(rgba(245, 184, 0, 0.05) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(245, 184, 0, 0.05) 1px, transparent 1px) 0 0 / 20px 20px,
    rgba(36, 19, 7, 0.55);
  backdrop-filter: blur(6px);
  transition: border-color 300ms ease, translate 400ms var(--ease-premium), box-shadow 400ms var(--ease-premium);
}
.sector::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(260px circle at var(--cx, 50%) var(--cy, 50%), rgba(255, 199, 44, 0.9), transparent 60%);
  -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 exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
  pointer-events: none;
}
.sectors.is-pointer .sector::before { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .sector:hover {
    translate: 0 -4px;
    box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(245, 184, 0, 0.25);
  }
}

/* Card drawings come alive too */
.sector__art .sa-win { fill: var(--gold); stroke: none; opacity: 0.12; }
.sector__art .sa-water { fill: var(--gold); stroke: none; opacity: 0.18; }
.sector__art .sa-lift { fill: var(--gold); stroke: none; }
.sector__art .sa-car { fill: var(--gold); stroke: none; }
.sector__art .sa-car--b { opacity: 0.6; }
.sector__art .sa-smoke { fill: var(--gold); stroke: none; opacity: 0; }
.sector__art .sa-flow { stroke-width: 1.4; stroke-dasharray: 6 6; }
.sector__art .sa-flow--water { stroke-dasharray: 10 8; opacity: 0.8; }

.js-motion .sectors.is-live .sa-win { animation: sx-card-win 6s ease-in-out infinite; animation-delay: calc(var(--i) * 0.45s); }
@keyframes sx-card-win { 0%, 10% { opacity: 0.12; } 20%, 75% { opacity: 0.85; } 90%, 100% { opacity: 0.12; } }
.js-motion .sectors.is-live .sa-lift { animation: sx-lift 6s var(--ease-in-out) infinite alternate; }
@keyframes sx-lift { from { transform: translateY(0); } to { transform: translateY(-62px); } }
.js-motion .sectors.is-live .sa-flow { animation: sx-flow-12 1.2s linear infinite; }
@keyframes sx-flow-12 { to { stroke-dashoffset: -12; } }
.js-motion .sectors.is-live .sa-flow--water { animation: sx-flow-18 1.8s linear infinite; }
@keyframes sx-flow-18 { to { stroke-dashoffset: -18; } }
.js-motion .sectors.is-live .sa-smoke {
  transform-box: fill-box;
  transform-origin: center;
  animation: sx-card-smoke 3.6s var(--ease-out) infinite;
  animation-delay: calc(var(--i) * 1.2s);
}
@keyframes sx-card-smoke {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  20% { opacity: 0.6; }
  100% { opacity: 0; transform: translate(10px, -26px) scale(2.2); }
}
.sa-car { transform: translateX(8px); }
.js-motion .sectors.is-live .sa-car { animation: sx-card-car 5s linear infinite; }
.js-motion .sectors.is-live .sa-car--b { animation-duration: 6.5s; animation-delay: -3s; animation-direction: reverse; }
@keyframes sx-card-car { from { transform: translateX(8px); } to { transform: translateX(176px); } }
.js-motion .sectors.is-live .sa-water { animation: sx-level 5s var(--ease-in-out) infinite alternate; transform-box: fill-box; transform-origin: bottom; }
@keyframes sx-level { from { transform: scaleY(0.75); } to { transform: scaleY(1.05); } }

/* Calm version: everything drawn and lit, nothing moving */
@media (prefers-reduced-motion: reduce) {
  .sectors-bg__glow { animation: none; }
  .pn .pn-win { opacity: 0.6; }
  .sector__art .sa-win { opacity: 0.7; }
}

/* Narrow screens: show the whole skyline by panning slowly across it */
@media (max-width: 59.99em) {
  .pn {
    right: auto;
    height: 11rem;
    width: calc(11rem * 1600 / 260); /* the skyline's own proportions */
    max-width: none;
  }
  .js-motion .sectors.is-live .pn { animation: sx-pan 36s var(--ease-in-out) infinite alternate; }
  @keyframes sx-pan { from { translate: 0 0; } to { translate: calc(-100% + 100vw) 0; } }
}


/* =========================================================
   How we work: self-running project walkthrough (see src/approach.ts)
   An isometric site goes from survey to handover. Without JS or with reduced motion
   the finished building shows and every step's text is visible.
   ========================================================= */
.approach { position: relative; overflow: hidden; overflow: clip; isolation: isolate; }
.approach > .container { position: relative; z-index: 1; }
.approach-glow {
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(45% 55% at 72% 48%, rgba(245, 184, 0, 0.18), transparent 70%),
    radial-gradient(35% 45% at 10% 90%, rgba(138, 75, 34, 0.35), transparent 70%),
    linear-gradient(rgba(245, 184, 0, 0.05) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(245, 184, 0, 0.05) 1px, transparent 1px) 0 0 / 32px 32px;
  animation: ap-glow 18s var(--ease-in-out) infinite alternate;
}
@keyframes ap-glow { from { transform: translate3d(-2%, 1%, 0); } to { transform: translate3d(2%, -1%, 0); } }

.approach__layout { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 64em) {
  .approach__layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}
@media (max-width: 63.99em) {
  .approach__info { display: contents; }
  .approach__info .section-head { order: 1; margin-bottom: 0; }
  .ap-stage { order: 2; }
  .approach .process { order: 3; }
  .ap-toggle { order: 4; justify-self: start; }
}

/* Steps: a vertical list; the active one opens and shows its timer */
.approach .process { display: block; margin-top: 2rem; }
.approach .process__step {
  position: relative;
  padding: 1rem 0 1.1rem 3.6rem;
  border-top: 1px solid var(--line-dark);
}
.approach .process__step:last-child { border-bottom: 1px solid var(--line-dark); padding-bottom: 1.1rem; }
.approach .process__step::before { display: none !important; }
.approach .process__num { position: absolute; left: 0; top: 0.85rem; width: 2.4rem; height: 2.4rem; }
.approach .process__step h3 { padding: 0; margin: 0; font-size: 1.12rem; }
.process__trigger {
  display: block; width: 100%;
  padding: 0.35rem 0; margin: 0;
  border: 0; background: none;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer;
  border-radius: 4px;
  transition: color 300ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .process__trigger:hover { color: var(--gold); }
}
.approach .process__step p { margin-top: 0.4rem; max-width: 34rem; }
.process__track {
  position: absolute; left: 3.6rem; right: 0; bottom: -1px;
  height: 2px; overflow: hidden; opacity: 0;
  transition: opacity 300ms var(--ease-out);
}
.process__track span { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); }

/* Active step (only once the walkthrough is running) */
.approach[data-stage] .process__step p {
  max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
  transition: max-height 500ms var(--ease-premium), opacity 300ms var(--ease-out), margin-top 500ms var(--ease-premium);
}
.process__num { transition: background-color 400ms var(--ease-out), color 400ms var(--ease-out), box-shadow 400ms var(--ease-out); }
.approach[data-stage="1"] .process__step:nth-child(1) p { max-height: 9rem; opacity: 1; margin-top: 0.4rem; }
.approach[data-stage="1"] .process__step:nth-child(1) .process__num { background: var(--gold); color: var(--espresso); box-shadow: 0 0 0 6px rgba(245, 184, 0, 0.16); }
.approach[data-stage="1"] .process__step:nth-child(1) .process__trigger { color: var(--gold); }
.approach[data-stage="1"] .process__step:nth-child(1) .process__track { opacity: 1; }
.approach[data-stage="2"] .process__step:nth-child(2) p { max-height: 9rem; opacity: 1; margin-top: 0.4rem; }
.approach[data-stage="2"] .process__step:nth-child(2) .process__num { background: var(--gold); color: var(--espresso); box-shadow: 0 0 0 6px rgba(245, 184, 0, 0.16); }
.approach[data-stage="2"] .process__step:nth-child(2) .process__trigger { color: var(--gold); }
.approach[data-stage="2"] .process__step:nth-child(2) .process__track { opacity: 1; }
.approach[data-stage="3"] .process__step:nth-child(3) p { max-height: 9rem; opacity: 1; margin-top: 0.4rem; }
.approach[data-stage="3"] .process__step:nth-child(3) .process__num { background: var(--gold); color: var(--espresso); box-shadow: 0 0 0 6px rgba(245, 184, 0, 0.16); }
.approach[data-stage="3"] .process__step:nth-child(3) .process__trigger { color: var(--gold); }
.approach[data-stage="3"] .process__step:nth-child(3) .process__track { opacity: 1; }
.approach[data-stage="4"] .process__step:nth-child(4) p { max-height: 9rem; opacity: 1; margin-top: 0.4rem; }
.approach[data-stage="4"] .process__step:nth-child(4) .process__num { background: var(--gold); color: var(--espresso); box-shadow: 0 0 0 6px rgba(245, 184, 0, 0.16); }
.approach[data-stage="4"] .process__step:nth-child(4) .process__trigger { color: var(--gold); }
.approach[data-stage="4"] .process__step:nth-child(4) .process__track { opacity: 1; }
.approach[data-stage="5"] .process__step:nth-child(5) p { max-height: 9rem; opacity: 1; margin-top: 0.4rem; }
.approach[data-stage="5"] .process__step:nth-child(5) .process__num { background: var(--gold); color: var(--espresso); box-shadow: 0 0 0 6px rgba(245, 184, 0, 0.16); }
.approach[data-stage="5"] .process__step:nth-child(5) .process__trigger { color: var(--gold); }
.approach[data-stage="5"] .process__step:nth-child(5) .process__track { opacity: 1; }

/* Stage card */
.ap-stage {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #1f1006;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(245, 184, 0, 0.18);
}
.iso { display: block; width: 100%; height: auto; aspect-ratio: 640 / 400; }
.ap-stage__caption {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0;
  padding: 0.75rem 1rem;
  background: var(--espresso);
  border-top: 1px solid rgba(245, 184, 0, 0.25);
  color: var(--white); font-size: 0.9rem; font-weight: 600;
}
.ap-stage__count {
  padding: 0.15rem 0.5rem; border-radius: 999px;
  background: var(--gold); color: var(--espresso); font-weight: 800; font-size: 0.78rem;
}

/* Scene text and line styles */
.iso .sc-text { font-family: var(--font); font-size: 10px; font-weight: 800; fill: var(--espresso); letter-spacing: 0.04em; }
.iso .sc-text--light { fill: #fff; font-weight: 600; letter-spacing: 0; }
.iso .sc-text--doc { font-size: 11px; font-weight: 600; letter-spacing: 0; }
.iso .sc-text--doc-b { font-size: 11px; font-weight: 800; letter-spacing: 0; }
.iso .sc-text--doc-h { font-size: 13px; font-weight: 700; fill: #fff; letter-spacing: 0; }
.iso .tape { stroke: #2B1709; stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.7; }
.iso .wf-line { fill: none; stroke: #5A2E14; stroke-width: 1.4; }
.iso .wf-face { fill: #F5B800; fill-opacity: 0.16; }
.iso .wf-dot { fill: #8A4B22; }
.iso .dim line { stroke: #fff; stroke-width: 1; }
.iso .scaf { stroke: #8E6B47; stroke-width: 1.2; }
.iso .lat { stroke: #9C6A00; stroke-width: 0.7; }
.iso .ghost { opacity: 0.45; }
.iso .lit { opacity: 0; }

/* Which stage is showing (default without JS: the finished building at dusk) */
.iso .st { opacity: 0; transition: opacity 700ms var(--ease-out); }
.approach:not([data-stage]) .iso .st-5,
.approach[data-stage="1"] .iso .st-1,
.approach[data-stage="2"] .iso .st-2,
.approach[data-stage="3"] .iso .st-3,
.approach[data-stage="4"] .iso .st-4,
.approach[data-stage="5"] .iso .st-5 { opacity: 1; }
.iso .sky--dusk { opacity: 0; transition: opacity 1200ms var(--ease-in-out); }
.iso .sun, .iso .clouds { transition: opacity 1200ms var(--ease-in-out); }
.approach:not([data-stage]) .iso .sky--dusk, .approach[data-stage="5"] .iso .sky--dusk { opacity: 1; }
.approach:not([data-stage]) .iso .sun, .approach[data-stage="5"] .iso .sun { opacity: 0; }
.approach:not([data-stage]) .iso .clouds, .approach[data-stage="5"] .iso .clouds { opacity: 0.25; }
.approach:not([data-stage]) .iso .lit { opacity: 0.85; }

/* Ambient life (always, while on screen) */
.js-motion .approach.is-live .iso .clouds { animation: iso-clouds 40s linear infinite alternate; }
@keyframes iso-clouds { to { transform: translateX(60px); } }
.js-motion .approach.is-live .iso .road-line { animation: iso-road 1.6s linear infinite; }
@keyframes iso-road { to { stroke-dashoffset: -16; } }

/* Stage 1: survey crew arrives, pegs go in */
.approach[data-stage="1"] .iso .truck { animation: iso-drive 1400ms var(--ease-premium) both; }
@keyframes iso-drive { from { transform: translate(-75px, -43px); opacity: 0; } to { transform: none; opacity: 1; } }
.approach[data-stage="1"] .iso .peg { animation: iso-drop 600ms var(--ease-premium) both; animation-delay: calc(700ms + var(--i) * 160ms); }
@keyframes iso-drop { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
.approach[data-stage="1"] .iso .tape { animation: iso-fade 600ms var(--ease-out) 1500ms both; }
.approach[data-stage="1"] .iso .tripod, .approach[data-stage="1"] .iso .board { animation: iso-drop 700ms var(--ease-premium) 400ms both; }
.approach[data-stage="1"] .iso .sight { animation: iso-fade 400ms ease 1900ms both, iso-blink 1.2s steps(1, end) 2.3s infinite; }
@keyframes iso-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes iso-blink { 50% { opacity: 0.2; } }

/* Stage 2: the design draws itself, floor by floor */
.iso .wf-line { stroke-dasharray: 1; }
.approach[data-stage="2"] .iso .st-2 .wf-line { animation: iso-draw 900ms var(--ease-premium) both; animation-delay: calc(200ms + var(--f) * 420ms); }
@keyframes iso-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.approach[data-stage="2"] .iso .st-2 .wf-face { animation: iso-fade 700ms var(--ease-out) both; animation-delay: calc(700ms + var(--f) * 420ms); }
.approach[data-stage="2"] .iso .wf-dot { animation: iso-fade 400ms var(--ease-out) 150ms both; }
.approach[data-stage="2"] .iso .dim { animation: iso-fade 600ms var(--ease-out) 1800ms both; }

/* Stage 3: the bill of quantities slides in and is ticked off */
.approach[data-stage="3"] .iso .doc { animation: iso-rise 800ms var(--ease-premium) 150ms both; }
@keyframes iso-rise { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.iso .doc-tick { transform-box: fill-box; transform-origin: center; }
.approach[data-stage="3"] .iso .doc-tick { animation: iso-pop 450ms var(--ease-premium) both; animation-delay: calc(900ms + var(--r) * 380ms); }
@keyframes iso-pop { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } }
.approach[data-stage="3"] .iso .pen { animation: iso-pen 700ms var(--ease-in-out) 2.9s 2 alternate both; }
@keyframes iso-pen { from { transform: translateX(-30px); } to { transform: translateX(10px); } }

/* Stage 4: foundation, then each floor goes up; the crane keeps working */
.approach[data-stage="4"] .iso .rise { animation: iso-rise-floor 700ms var(--ease-premium) both; animation-delay: calc(200ms + var(--k) * 450ms); }
@keyframes iso-rise-floor { from { transform: translateY(22px); opacity: 0; } to { transform: none; opacity: 1; } }
.approach[data-stage="4"] .iso .scaffold { animation: iso-fade 600ms var(--ease-out) 1900ms both; }
.js-motion .approach.is-live[data-stage="4"] .iso .trolley { animation: iso-trolley 3.2s var(--ease-in-out) 600ms infinite alternate; }
@keyframes iso-trolley { to { transform: translate(var(--tdx), var(--tdy)); } }

/* Stage 5: dusk, lights on, keys handed over */
.approach[data-stage="5"] .iso .lit { animation: iso-lit 500ms var(--ease-out) both; animation-delay: calc(900ms + var(--w) * 70ms); }
@keyframes iso-lit { from { opacity: 0; } to { opacity: 0.85; } }
.approach[data-stage="5"] .iso .car { animation: iso-drive 1400ms var(--ease-premium) 500ms both; }
.iso .badge { transform-box: fill-box; transform-origin: center; }
.approach[data-stage="5"] .iso .badge { animation: iso-pop 600ms var(--ease-premium) 2000ms both; }
.iso .badge-tick { stroke-dasharray: 1; }
.approach[data-stage="5"] .iso .badge-tick { animation: iso-draw 500ms var(--ease-premium) 2400ms both; }

@media (prefers-reduced-motion: reduce) {
  .approach-glow { animation: none; }
  .iso *, .iso { animation: none !important; }
  .approach[data-stage="5"] .iso .lit { opacity: 0.85; }
}

/* Pause control */
.ap-toggle {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-top: 1.5rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: transparent;
  color: var(--on-dark-muted);
  font: inherit; font-size: 0.85rem; font-weight: 600;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
}
.ap-toggle:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .ap-toggle:hover { border-color: var(--gold); color: var(--on-dark); } }
.ap-toggle__icon { width: 10px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.ap-toggle[aria-pressed="true"] .ap-toggle__icon {
  border: 0; width: 0; height: 0;
  border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
html:not(.js-motion) .ap-toggle { display: none; }



/* Hero: the large background labels sat behind the buttons and slide controls; the slide display keeps its own label */
.hero-bg .hb-caption, .hero-bg .hb-label { display: none; }
/* Hero: keep the moving background drawing away from the headline and buttons (wide screens) */
@media (min-width: 60em) {
  .hero-bg .hb-panel {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 30%, #000 62%);
    mask-image: linear-gradient(90deg, transparent 0%, transparent 30%, #000 62%);
  }
}

/* Confirmation toast (email / phone links) */
.toast {
  position: fixed;
  left: 50%;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 100;
  width: max-content;
  max-width: min(92vw, 30rem);
  text-align: center;
  padding: 0.8rem 1.1rem;
  border-radius: var(--r-md);
  background: var(--espresso);
  color: var(--white);
  font-size: 0.92rem;
  font-weight: 600;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(245, 184, 0, 0.35);
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity 200ms var(--ease-out), transform 250ms var(--ease-out);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .toast { transform: translate(-50%, 0); }
}

/* Commitments list in the registration card */
.commitments { margin-top: 1rem; }
.commitments li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
}
.commitments li:first-child { border-top: 0; }
.commitments li::before {
  content: "";
  position: absolute; left: 0; top: 0.75rem;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%232B1709' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 75% no-repeat;
}