/* ============================================================
   DATUM COMMERCIAL CONSTRUCTION
   Design system: an engineering document you can walk on.
   Two materials alternate down every page:
     .m-field  = graphite. The jobsite. Photos, kinetic numbers.
     .m-doc    = warm paper. The drawing set. Specs, tables, tools.
   Safety yellow is load-bearing information only: datum lines,
   active states, the today line. Never decoration.
   Type: Space Grotesk (display) / IBM Plex Sans (text) /
   IBM Plex Mono (every place data lives).
   ============================================================ */

@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk-var-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/plex-sans-var-latin.woff2") format("woff2");
  font-weight: 100 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/plex-mono-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --yellow: #ffc400;
  /* doc-side accent: dark ochre, 4.6:1 on paper / 5.1:1 on white.
     The bright yellow reads as text only on graphite; on paper it
     measured 1.4:1, so every paper-surface accent routes through
     this token instead. Do not lighten it back. */
  --yellow-deep: #8a6a00;
  --graphite: #101318;
  --graphite-2: #171b22;
  --graphite-3: #1f242d;
  --ink: #14171c;
  --paper: #f4f2ed;
  --paper-2: #ece9e1;
  --paper-line: #d8d4c8;
  --field-line: #2b313c;
  --txt-field: #e8e6e1;
  --txt-field-dim: #9aa1ad;
  --txt-doc: #1c1f26;
  --txt-doc-dim: #5a5f6b;
  --ok: #3ba55d;
  --disp: "Space Grotesk", "Helvetica Neue", sans-serif;
  --body: "IBM Plex Sans", "Helvetica Neue", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", monospace;
  --shell: 1320px;
  --gut: clamp(20px, 4vw, 48px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.6;
  background: var(--graphite);
  color: var(--txt-field);
  overflow-x: hidden;
}

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

a {
  color: inherit;
}

button {
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  color: inherit;
}

::selection {
  background: var(--yellow);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}
/* yellow focus ring vanishes on paper (1.4:1); use ink there */
.m-doc :focus-visible {
  outline-color: var(--ink);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--yellow);
  color: var(--ink);
  padding: 10px 18px;
  font-family: var(--mono);
  font-size: 13px;
  z-index: 300;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* ---------- shell + materials ---------- */

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.m-field {
  background: var(--graphite);
  color: var(--txt-field);
}
.m-field.raise {
  background: var(--graphite-2);
}
.m-doc {
  background: var(--paper);
  color: var(--txt-doc);
}
.m-doc.raise {
  background: var(--paper-2);
}

section {
  position: relative;
  padding-block: clamp(72px, 10vw, 128px);
}

/* corner registration marks on document sections */
.m-doc.regmarks::before,
.m-doc.regmarks::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
}
.m-doc.regmarks::before {
  top: 22px;
  left: 22px;
  border-top: 1px solid var(--txt-doc-dim);
  border-left: 1px solid var(--txt-doc-dim);
}
.m-doc.regmarks::after {
  bottom: 22px;
  right: 22px;
  border-bottom: 1px solid var(--txt-doc-dim);
  border-right: 1px solid var(--txt-doc-dim);
}

/* ---------- typography ---------- */

h1,
h2,
h3 {
  font-family: var(--disp);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(42px, 7.2vw, 104px);
}
h2 {
  font-size: clamp(30px, 4.4vw, 58px);
}
h3 {
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.18;
}

.lede {
  font-size: clamp(17.5px, 1.6vw, 21px);
  line-height: 1.65;
  max-width: 46ch;
}
.m-field .lede {
  color: var(--txt-field-dim);
}
.m-doc .lede {
  color: var(--txt-doc-dim);
}

.measure {
  max-width: 68ch;
}

.mono,
.tag {
  font-family: var(--mono);
}

/* station heading: the section kicker of the whole system.
   glyph tick + STA number + label over a datum rule. */
.station {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: clamp(22px, 3vw, 38px);
}
.station .datum-glyph {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--yellow);
}
.station::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.28;
}
.m-field .station {
  color: var(--txt-field-dim);
}
.m-doc .station {
  color: var(--txt-doc-dim);
}
.station b {
  color: var(--yellow-deep);
  font-weight: 600;
}
.m-field .station b {
  color: var(--yellow);
}

/* elevation callout annotation */
.elev {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  opacity: 0.55;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  text-transform: uppercase;
}

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 120;
  background: color-mix(in srgb, var(--graphite) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--field-line);
  color: var(--txt-field);
}
.nav-row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 68px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-family: var(--disp);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.34em;
  padding-right: 6px;
}
.brand .datum-glyph {
  width: 26px;
  height: 26px;
  color: var(--yellow);
  flex: none;
}
/* The nav mark is a LIVE solid: datum-logo.js clears this host and mounts the
   turning mark in it (data-datum-logo="spin"). The emitted static mark inside
   stays as the no-JS and reduced-motion fallback. 30px because the runtime
   draws in the rotation-stable box, which carries more air than the static
   tight crop; this keeps the two at the same visual mass. */
.brand-mark {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
}
.brand-mark .datum-solid {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
/* The nav wordmark surveys in once per load. Clip only, so the nav row never
   shifts an inch while it happens.

   THE HIDDEN STATE LIVES IN THE KEYFRAME, NOT IN A STATIC RULE. It used to be
   `clip-path` on the selector plus `forwards`, which meant anything that turned
   CSS animation off left the clip in place and the whole brand INVISIBLE: this
   selector matches both spans in the anchor, so the 3D mark went with the
   wordmark. It shipped that way, and every work-card still and brief image the
   media harness produced was missing the brand, because the harness injects
   `animation: none !important` for stills. Same trap as the hero h1
   (see the hero-draw block); `both` holds the `from` state through the 0.25s
   delay, so the visible behaviour is identical and a no-animation context
   renders the finished state instead of nothing.

   NOT THE SAME as `.lockup-name` / `.lockup-sub` / `.lockup-line` further down,
   which keep their hidden state statically ON PURPOSE: those are gated on a JS
   `.in` class, so without it they must stay hidden rather than flash before the
   reveal. Do not "fix" those to match this. */
.nav .brand > span {
  animation: brand-survey 0.9s var(--ease) 0.25s both;
}
@keyframes brand-survey {
  from { clip-path: inset(-8% 104% -8% -2%); }
  to { clip-path: inset(-8% -4% -8% -2%); }
}
@media (prefers-reduced-motion: reduce) {
  .nav .brand > span {
    animation: none;
    clip-path: none;
  }
}
.brand small {
  display: block;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--txt-field-dim);
  margin-top: 1px;
}
/* the shell caps the row at 1224px inner at EVERY desktop width, so the
   nav must fit that intrinsically in BOTH languages (Spanish runs ~85px
   wider); no flex shrinking, or links overlap the toggle invisibly */
.nav-primary {
  margin-left: auto;
}
.nav-links {
  display: flex;
  gap: 2px;
  list-style: none;
}
.nav-links a {
  display: block;
  padding: 9px 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--txt-field-dim);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav-links a:hover {
  color: var(--txt-field);
}
.nav-links a[aria-current="page"] {
  color: var(--yellow);
  border-bottom-color: var(--yellow);
}
.nav-cta {
  display: inline-block;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 11px 13px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), background 0.25s;
}
.nav-cta:hover {
  background: #ffd23e;
  transform: translateY(-1px);
}

.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--field-line);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
}
.lang-toggle button {
  padding: 8px 11px;
  color: var(--txt-field-dim);
}
.lang-toggle button[aria-pressed="true"] {
  background: var(--yellow);
  color: var(--ink);
  font-weight: 600;
}

.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  margin-left: auto;
}
.nav-burger span {
  width: 24px;
  height: 2px;
  background: var(--txt-field);
  transition: transform 0.3s var(--ease), opacity 0.3s;
}

/* mobile drawer: direct child of body, never inside a filtered ancestor */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: color-mix(in srgb, var(--graphite) 96%, transparent);
  display: none;
  flex-direction: column;
  padding: 92px var(--gut) 40px;
}
.drawer.open {
  display: flex;
}
.drawer a {
  font-family: var(--disp);
  font-size: clamp(26px, 7vw, 34px);
  font-weight: 600;
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid var(--field-line);
  color: var(--txt-field);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.drawer a .mono {
  font-size: 12px;
  color: var(--txt-field-dim);
}
.drawer a[aria-current="page"] {
  color: var(--yellow);
}
.drawer-close {
  position: absolute;
  top: 18px;
  right: var(--gut);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--txt-field);
  padding: 10px;
}
.drawer .lang-toggle {
  margin-top: 26px;
  align-self: flex-start;
}
.drawer .nav-cta {
  margin-top: 18px;
  align-self: flex-start;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.05em;
  padding: 15px 26px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease), background 0.25s, color 0.25s,
    border-color 0.25s;
}
.btn-solid {
  background: var(--yellow);
  color: var(--ink);
}
.btn-solid:hover {
  background: #ffd23e;
  transform: translateY(-2px);
}
.btn-line {
  border-color: currentColor;
}
.m-field .btn-line {
  color: var(--txt-field);
}
.m-doc .btn-line {
  color: var(--txt-doc);
}
.btn-line:hover {
  border-color: var(--yellow);
  color: var(--yellow-deep);
  transform: translateY(-2px);
}
.m-field .btn-line:hover {
  color: var(--yellow);
}
.btn .arrow {
  transition: transform 0.25s var(--ease);
}
.btn:hover .arrow {
  transform: translateX(4px);
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding-block: clamp(84px, 11vw, 150px) clamp(60px, 8vw, 110px);
  overflow: hidden;
}
/* The homepage hero, and ONLY the homepage hero, drops that clip. The monument
   (.hero-mark) is taller at some points of its sweep than at rest, and a clip
   at the section edge SLICES THE TOP OF THE D FLAT for part of every turn,
   right under the nav. Nothing here needs the clip: the only absolutely
   positioned child is .hero-grid at inset:0, which cannot overflow, and
   horizontal bleed is already caught by body { overflow-x: hidden }. Letting
   the mark run past the top edge is what lets it rise INTO the nav band, where
   its own z-index carries it in front of the bar. Scoped to its own class
   rather than applied to .hero because eight other pages share that class and
   none of them was measured for it. */
.hero-monument {
  overflow: visible;
}
.hero-kicker {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--yellow);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}
.hero h1 .accent {
  color: var(--yellow);
}
.hero .lede {
  margin-top: 28px;
}
.hero-ctas {
  display: flex;
  gap: 14px;
  margin-top: 40px;
  flex-wrap: wrap;
}

/* ---------- the hero monument ----------
   The same 3D mark the brand lockup carries, at twice that mass, standing at
   the lower-left of the hero photograph and breaking out past the frame edge
   so it reads as an object in FRONT of the picture rather than a badge printed
   on it. It turns on the same timeline as the brand lockup.

   The mark was drawn for the dark field, so the photograph is darkened where
   it stands: a pool of shade in the upper-left of the frame. That pool lives
   INSIDE .frame, clipped to the picture, deliberately. Hung on the mark itself
   it has to be wide enough to cover a 690px object, and at that width it
   reaches back across the gutter and greys out the headline and the lede. */
.hero-figure {
  position: relative;
}
/* isolate: .frame is position:relative with z-index auto, so it opens no
   stacking context of its own and the shade pool's z-index would be measured
   against the MARK instead of against the photo, dimming the very object it
   exists to light. */
.hero-figure .frame {
  isolation: isolate;
}
/* The hero photograph DISSOLVES into the page instead of ending in a rectangle.
   The source frame is 4:5 with the top ~28% given over to bright blue sky, and
   against a #101318 field that block read as a lit card pasted onto the page,
   with the monument standing in front of the roofline. The mask keeps the
   building and the caption plate solid at the lower right and takes the sky
   out entirely, so the building emerges from the dark and the mark stands in
   open air above it. One radial gradient on purpose: compositing two masks
   needs mask-composite, whose Safari spelling still differs, and this is a
   demonstrator that has to survive real WebKit. */
.hero-figure .frame {
  background: transparent;
  -webkit-mask-image: radial-gradient(124% 104% at 74% 102%,
    #000 42%, rgba(0, 0, 0, 0.72) 63%, transparent 85%);
  mask-image: radial-gradient(124% 104% at 74% 102%,
    #000 42%, rgba(0, 0, 0, 0.72) 63%, transparent 85%);
}
/* The photo is exactly the frame's 4:5, so object-fit has NO slack and
   object-position is a no-op. Pushing the building right and down (out from
   under the monument, and into the part of the mask that stays solid) has to
   be a transform. The hover rule is restated at the same value rather than
   removed: .frame:hover img still carries the library's 1.035 zoom, and
   letting it win here would snap the crop back on mouseover. */
.hero-figure .frame img {
  transform: scale(1.16) translate(5%, 4%);
}
.hero-figure .frame:hover img {
  transform: scale(1.16) translate(5%, 4%);
}
.hero-figure .frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(58% 46% at 40% 26%,
    rgba(6, 8, 12, 0.86) 0%,
    rgba(6, 8, 12, 0.62) 38%,
    rgba(6, 8, 12, 0.26) 66%,
    rgba(6, 8, 12, 0) 100%);
}
.hero-figure .frame .plate {
  z-index: 2;
}
.hero-mark {
  position: absolute;
  /* Every one of these three is a 15% size cut applied about the mark's CENTRE,
     not about its lower-left corner. left/bottom are edge offsets, so shrinking
     width alone would have slid the monument down and left by half the size it
     lost; the offsets are raised by half the delta on each axis to hold the
     composition still. The vertical half-delta is not the horizontal one: the
     box is square (aspect-ratio 1/1) while .hero-figure is 4:5, so the same
     pixel change is a different percentage on each axis.
     Height, separately: the photo mask is what lifted the monument clear of the
     roofline, so extra height buys nothing and every point of it pushes the tall
     part of the rotation further into the nav, which this mark paints over
     rather than behind (see the z-index note below).

     2026-08-10: bottom raised 30% -> 39.8%, so the plate stops sitting on the
     building's roofline. Joshua asked for the monument to clear the photograph
     and said covering the nav on the way is fine. THE CEILING IS THE VIEWPORT,
     NOT THE NAV: the swept extent (all 24 angles, gl.readPixels union, not the
     rest pose) topped out 82.7px below the page top at 30%, and the whole point
     of .hero-monument dropping the section clip is that a hard edge SLICES A
     ROTATING OBJECT FLAT. 39.8% spends 72.6 of those 82.7 pixels and leaves the
     tallest angle ~10px of air. Do not raise it further without re-running the
     swept-extent probe; the rest pose is 18px taller than it looks. */
  left: -29.3%;
  bottom: 39.8%;
  width: 98.6%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  pointer-events: none;
  /* Above the sticky nav (120), below the scroll rail (130) and the mobile
     drawer (200). Joshua's call, twice: the monument passes in FRONT of
     everything it turns through, the nav bar and the headline included; it does
     not get to cover an opened menu. 129 rather than 130 so the tie with .rail
     is not decided by DOM order. This only resolves against the root stacking
     context because nothing between here and <body> opens one of its own; .rv
     sets a transform, but only in its pre-reveal state, when this element is
     still at opacity 0. If a future edit gives .hero, .shell, .grid-2 or
     .hero-figure a transform, filter or z-index, the mark silently drops back
     behind the nav. */
  z-index: 129;
}
.hero-mark .datum-solid {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
/* The gutter narrows faster than the mark does. Past this width the overhang
   has to give way, or the plate's near corner lands on the lede. */
/* Raised with the desktop rule on 2026-08-10, and by a much larger step: the
   mark is smaller relative to the viewport here, so the swept extent started
   152.6px below the page top instead of 82.7px and there was simply more room
   to spend. 44% lands the plate's lower edge ~25px clear of the roofline with
   87px of headroom left, measured, not chosen. */
@media (max-width: 1100px) {
  .hero-mark {
    left: -18.2%;
    bottom: 44%;
    width: 88.4%;
  }
}
/* THE STACKED HEROES BELOW ARE DELIBERATELY UNCHANGED. There the photograph
   runs full width under the copy and the monument stands on it, so raising the
   mark drives it further INTO the facade rather than off it; the only way to
   uncover the building at these widths is a size or a left/down move, which is
   a different composition decision from the one asked for. */
/* Stacked hero: the photograph goes full width and the copy sits above it, so
   there is no gutter to break out into. The monument keeps its overhang on the
   frame edge but pulls back inside the viewport. */
@media (max-width: 860px) {
  .hero-mark {
    left: -0.2%;
    bottom: 2.7%;
    width: 66.3%;
  }
  .hero-figure .frame::after {
    background: radial-gradient(56% 48% at 30% 76%,
      rgba(6, 8, 12, 0.92) 0%,
      rgba(6, 8, 12, 0.78) 36%,
      rgba(6, 8, 12, 0.40) 64%,
      rgba(6, 8, 12, 0.11) 86%,
      rgba(6, 8, 12, 0) 100%);
  }
}
@media (max-width: 560px) {
  .hero-mark {
    left: -4.5%;
    bottom: 5.5%;
    width: 62.9%;
  }
}

/* faint elevation grid behind field heroes */
.hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--field-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--field-line) 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: 0.28;
  -webkit-mask-image: radial-gradient(120% 90% at 30% 10%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 30% 10%, #000 30%, transparent 78%);
}

/* ---------- KPI band ---------- */

.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--field-line);
  border-left: 1px solid var(--field-line);
}
.kpi {
  border-right: 1px solid var(--field-line);
  border-bottom: 1px solid var(--field-line);
  padding: clamp(20px, 2.6vw, 34px);
}
.kpi .num {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 52px);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.kpi .num small {
  font-size: 0.5em;
  font-weight: 600;
  color: var(--yellow);
}
.kpi .lbl {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 8px;
  color: var(--txt-field-dim);
}
.m-doc .kpi .lbl {
  color: var(--txt-doc-dim);
}

/* ---------- cards / grids ---------- */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 30px);
}

.card {
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid var(--field-line);
  background: var(--graphite-2);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--yellow);
}
.m-doc .card {
  background: #fff;
  border-color: var(--paper-line);
}
.m-doc .card:hover {
  border-color: var(--yellow-deep);
}
.card .tag {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow-deep);
}
.m-field .card .tag {
  color: var(--yellow);
}
.card p {
  font-size: 15.5px;
  line-height: 1.62;
}
.m-field .card p {
  color: var(--txt-field-dim);
}
.m-doc .card p {
  color: var(--txt-doc-dim);
}

/* ---------- spec table (document voice) ---------- */

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.spec-table caption {
  text-align: left;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-bottom: 14px;
  color: var(--txt-doc-dim);
}
.spec-table th {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 2px solid var(--txt-doc);
  color: var(--txt-doc);
}
.spec-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--paper-line);
  vertical-align: top;
}
.spec-table td.mono {
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.m-field .spec-table th {
  border-bottom-color: var(--txt-field);
  color: var(--txt-field);
}
.m-field .spec-table td {
  border-bottom-color: var(--field-line);
}

/* ---------- photo frames ---------- */

.frame {
  position: relative;
  overflow: hidden;
  background: var(--graphite-3);
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.frame:hover img {
  transform: scale(1.035);
}
.frame .plate {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--ink);
  color: var(--txt-field);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 12px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.frame .plate b {
  color: var(--yellow);
  font-weight: 600;
}
.ratio-16x10 {
  aspect-ratio: 16 / 10;
}
.ratio-4x5 {
  aspect-ratio: 4 / 5;
}
.ratio-21x9 {
  aspect-ratio: 21 / 9;
}
.ratio-1x1 {
  aspect-ratio: 1 / 1;
}

/* placeholder duotone slab shown until a manifest photo lands */
.frame.awaiting {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(
    -45deg,
    var(--graphite-3) 0 14px,
    var(--graphite-2) 14px 28px
  );
  border: 1px solid var(--field-line);
}
.m-doc .frame.awaiting {
  background: repeating-linear-gradient(-45deg, var(--paper-2) 0 14px, #e4e0d6 14px 28px);
  border-color: var(--paper-line);
}
.frame.awaiting .slot {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 12px;
  background: var(--ink);
  color: var(--yellow);
}

/* ---------- schedule / gantt language ---------- */

.gantt {
  display: grid;
  gap: 13px;
}
.gantt-row {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr minmax(64px, auto);
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.gantt-row .g-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--txt-field-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-doc .gantt-row .g-label {
  color: var(--txt-doc-dim);
}
.gantt-row .g-track {
  position: relative;
  height: 18px;
  background: var(--graphite-3);
  border: 1px solid var(--field-line);
}
.m-doc .gantt-row .g-track {
  background: var(--paper-2);
  border-color: var(--paper-line);
}
.gantt-row .g-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--yellow);
  width: 0;
  transition: width 1s var(--ease);
}
.gantt-row.done .g-bar {
  background: var(--txt-field-dim);
}
.gantt-row .g-val {
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--txt-field-dim);
}
.m-doc .gantt-row .g-val {
  color: var(--txt-doc-dim);
}

/* scroll progress rail (index): fixed left on desktop */
.rail {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  z-index: 130;
  background: transparent;
  pointer-events: none;
}
.rail .rail-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: var(--yellow);
}

/* ---------- critical path (pinned homepage sequence) ---------- */

.cp-wrap {
  position: relative;
}
.cp-sticky {
  position: sticky;
  top: 68px;
  min-height: calc(100vh - 68px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 40px;
}
.cp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: clamp(20px, 3vh, 40px);
}
.cp-head .cp-proj {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--txt-field-dim);
}
.cp-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  min-height: 280px;
}
.cp-phase-kicker {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}
.cp-phase-kicker .dates {
  color: var(--txt-field-dim);
}
.cp-phase-title {
  font-size: clamp(30px, 4.6vw, 62px);
}
.cp-phase-copy {
  margin-top: 16px;
  max-width: 46ch;
  color: var(--txt-field-dim);
}
.cp-phase-stat {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--txt-field);
  border-left: 2px solid var(--yellow);
  padding-left: 14px;
}
.cp-visual {
  position: relative;
}
.cp-visual .frame {
  border: 1px solid var(--field-line);
}
.cp-schedule {
  margin-top: clamp(20px, 3.4vh, 44px);
  position: relative;
  padding-top: 10px;
}
.cp-schedule .today {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--yellow);
  left: 0%;
  z-index: 2;
}
.cp-schedule .today::after {
  content: attr(data-label);
  position: absolute;
  top: -8px;
  left: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--yellow);
  white-space: nowrap;
}
.cp-spacer {
  height: 420vh;
}

/* ---------- ledger (projects page) ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-block: 30px 8px;
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.filter-group .flabel {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt-doc-dim);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 8px 14px;
  border: 1px solid var(--paper-line);
  background: #fff;
  color: var(--txt-doc);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.chip:hover {
  border-color: var(--txt-doc);
}
.chip[aria-pressed="true"] {
  background: var(--ink);
  color: var(--yellow);
  border-color: var(--ink);
}

.ledger-summary {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  margin-block: 18px 26px;
  color: var(--txt-doc-dim);
}
.ledger-summary b {
  color: var(--txt-doc);
  font-variant-numeric: tabular-nums;
}

.ledger {
  list-style: none;
  border-top: 2px solid var(--txt-doc);
}
.ledger-row {
  border-bottom: 1px solid var(--paper-line);
}
.ledger-row.hide {
  display: none;
}
.ledger-btn {
  width: 100%;
  display: grid;
  /* the meta columns carry the year and the architect credit; starving
     them below ~300px ellipsizes exactly the facts the ledger exists
     to publish, so the name column gives up its surplus */
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.3fr) minmax(0, 1.3fr) auto auto;
  gap: 16px;
  align-items: baseline;
  text-align: left;
  padding: 20px 8px;
  transition: background 0.2s;
}
.ledger-btn:hover {
  background: #fff;
}
.ledger-btn .l-name {
  font-family: var(--disp);
  font-weight: 600;
  font-size: clamp(17px, 1.8vw, 21px);
  letter-spacing: -0.01em;
}
.ledger-btn .l-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--txt-doc-dim);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ledger-btn .l-val {
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ledger-btn .l-x {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--txt-doc-dim);
  transition: transform 0.3s var(--ease);
}
.ledger-btn[aria-expanded="true"] .l-x {
  transform: rotate(45deg);
  color: var(--yellow-deep);
}
.ledger-detail {
  display: none;
  padding: 4px 8px 26px;
}
.ledger-detail.open {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 26px;
}
.ledger-detail .d-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 22px;
  align-content: start;
}
.ledger-detail .d-facts div {
  border-left: 2px solid var(--paper-line);
  padding-left: 12px;
}
.ledger-detail .d-facts .k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--txt-doc-dim);
}
.ledger-detail .d-facts .v {
  font-size: 15px;
  font-weight: 500;
}
.ledger-detail .d-note {
  font-size: 15px;
  color: var(--txt-doc-dim);
  line-height: 1.65;
}
.ledger-detail .d-note b {
  color: var(--txt-doc);
}

/* ---------- charts ---------- */

.chart-frame {
  border: 1px solid var(--field-line);
  background: var(--graphite-2);
  padding: clamp(18px, 2.4vw, 30px);
}
.m-doc .chart-frame {
  background: #fff;
  border-color: var(--paper-line);
}
.chart-frame svg {
  width: 100%;
  height: auto;
  display: block;
}
.chart-frame .c-cap {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt-field-dim);
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.m-doc .chart-frame .c-cap {
  color: var(--txt-doc-dim);
}

/* ---------- advisor (delivery tool) ---------- */

.advisor {
  border: 1px solid var(--paper-line);
  background: #fff;
}
.advisor-head {
  padding: clamp(20px, 2.6vw, 30px);
  border-bottom: 1px solid var(--paper-line);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
}
.advisor-head .a-step {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--txt-doc-dim);
  font-variant-numeric: tabular-nums;
}
.advisor-body {
  padding: clamp(20px, 2.6vw, 34px);
}
.a-q {
  font-family: var(--disp);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 28px);
  margin-bottom: 20px;
  line-height: 1.2;
}
.a-opts {
  display: grid;
  gap: 10px;
}
.a-opt {
  text-align: left;
  border: 1px solid var(--paper-line);
  padding: 16px 18px;
  display: flex;
  gap: 14px;
  align-items: baseline;
  transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease);
}
.a-opt:hover {
  border-color: var(--txt-doc);
  transform: translateX(4px);
}
.a-opt .o-key {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--yellow-deep);
  flex: none;
}
.a-opt .o-txt {
  font-size: 15.5px;
}
.a-opt[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--paper);
}
.advisor-foot {
  display: flex;
  justify-content: space-between;
  padding: 16px clamp(20px, 2.6vw, 30px);
  border-top: 1px solid var(--paper-line);
}
.a-back {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--txt-doc-dim);
}
.a-back:hover {
  color: var(--txt-doc);
}
.a-back[disabled] {
  opacity: 0.3;
  cursor: default;
}

.a-result {
  display: none;
}
.a-result.show {
  display: block;
}
.a-verdict {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.08;
  margin-bottom: 8px;
}
.a-verdict .accent {
  color: var(--yellow-deep);
}
.a-scores {
  margin-block: 24px;
}
.a-honest {
  border-left: 3px solid var(--yellow);
  padding: 4px 0 4px 18px;
  margin-top: 22px;
  font-size: 15.5px;
  color: var(--txt-doc-dim);
}
.a-honest b {
  color: var(--txt-doc);
}

/* ---------- bid board ---------- */

.bid-row td .badge {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border: 1px solid;
}
.badge.open {
  color: #1d7a3e;
  border-color: #1d7a3e;
}
.badge.closing {
  color: #a15c00;
  border-color: #a15c00;
}
.badge.awarded {
  color: var(--txt-doc-dim);
  border-color: var(--paper-line);
}

/* ---------- forms ---------- */

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 22px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field.wide {
  grid-column: 1 / -1;
}
.field label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--txt-doc-dim);
}
.m-field .field label {
  color: var(--txt-field-dim);
}
.field input,
.field select,
.field textarea {
  font: 15.5px/1.5 var(--body);
  padding: 13px 14px;
  border: 1px solid var(--paper-line);
  background: #fff;
  color: var(--txt-doc);
  border-radius: 0;
  width: 100%;
}
.m-field .field input,
.m-field .field select,
.m-field .field textarea {
  background: var(--graphite-2);
  border-color: var(--field-line);
  color: var(--txt-field);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--yellow);
  outline-offset: 0;
  border-color: var(--yellow);
}
.form-note {
  font-size: 13.5px;
  color: var(--txt-doc-dim);
}
.form-ok {
  display: none;
  border: 1px solid var(--ok);
  color: #23703f;
  padding: 18px 20px;
  font-size: 15px;
  margin-top: 18px;
}
.m-field .form-ok {
  color: #6fd394;
}
.form-ok.show {
  display: block;
}

/* checklist */
.checklist {
  list-style: none;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--paper-line);
}
.checklist li {
  display: flex;
  gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--paper-line);
  font-size: 15.5px;
  align-items: baseline;
}
.m-field .checklist,
.m-field .checklist li {
  border-color: var(--field-line);
}
.checklist .ck {
  font-family: var(--mono);
  color: var(--yellow-deep);
  font-weight: 600;
  flex: none;
}
.m-field .checklist .ck {
  color: var(--yellow);
}

/* ---------- accordion ---------- */

.acc {
  border-top: 2px solid currentColor;
}
.acc-item {
  border-bottom: 1px solid var(--paper-line);
}
.m-field .acc-item {
  border-bottom-color: var(--field-line);
}
.acc-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  text-align: left;
  padding: 20px 4px;
  font-family: var(--disp);
  font-weight: 600;
  font-size: clamp(16.5px, 1.8vw, 20px);
}
.acc-btn .l-x {
  font-family: var(--mono);
  transition: transform 0.3s var(--ease);
}
.acc-btn[aria-expanded="true"] .l-x {
  transform: rotate(45deg);
  color: var(--yellow-deep);
}
.acc-panel {
  display: none;
  padding: 0 4px 22px;
  max-width: 70ch;
  color: var(--txt-doc-dim);
}
.m-field .acc-panel {
  color: var(--txt-field-dim);
}
.acc-panel.open {
  display: block;
}

/* ---------- people ---------- */

.person {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.person .frame {
  border: 1px solid var(--field-line);
}
.person .p-body {
  border: 1px solid var(--field-line);
  border-top: 0;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--graphite-2);
}
.m-doc .person .frame,
.m-doc .person .p-body {
  border-color: var(--paper-line);
  background: #fff;
}
.person .p-name {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 19px;
}
.person .p-role {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yellow);
}
.m-doc .person .p-role {
  color: var(--yellow-deep);
}
.person .p-fact {
  font-size: 14px;
  color: var(--txt-field-dim);
}
.m-doc .person .p-fact {
  color: var(--txt-doc-dim);
}

/* letter */
.letter {
  max-width: 66ch;
  font-size: clamp(17px, 1.7vw, 19.5px);
  line-height: 1.75;
}
.letter p + p {
  margin-top: 1.2em;
}
.letter .sig {
  margin-top: 34px;
  font-family: var(--disp);
  font-weight: 600;
  font-size: 24px;
}
.letter .sig-role {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--txt-field-dim);
  margin-top: 4px;
}

/* ---------- footer ---------- */

footer.site-foot {
  background: var(--ink);
  color: var(--txt-field);
  border-top: 3px solid var(--yellow);
  padding-block: clamp(48px, 6vw, 84px) 34px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: clamp(24px, 4vw, 56px);
}
.foot-brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.foot-brand .brand {
  padding: 0;
}
.foot-brand p {
  font-size: 14.5px;
  color: var(--txt-field-dim);
  max-width: 34ch;
}
.foot-col .fh {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--txt-field-dim);
  margin-bottom: 14px;
}
.foot-col ul {
  list-style: none;
  display: grid;
  gap: 9px;
}
.foot-col a {
  text-decoration: none;
  font-size: 14.5px;
  color: var(--txt-field);
}
.foot-col a:hover {
  color: var(--yellow);
}
.foot-col .mono {
  font-size: 13px;
  color: var(--txt-field-dim);
}
.compliance {
  margin-top: clamp(34px, 5vw, 56px);
  padding-top: 22px;
  border-top: 1px solid var(--field-line);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--txt-field-dim);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
}
.compliance .demo-note {
  text-align: right;
  white-space: nowrap;
}

/* ---------- motion: scheduled reveals ---------- */

.rv {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--d, 0s);
}
.rv.in {
  opacity: 1;
  transform: none;
}
.rv-l {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--d, 0s);
}
.rv-l.in {
  opacity: 1;
  transform: none;
}
/* bar reveal: clips left->right like a gantt activity filling */
.rv-bar {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s var(--ease);
  transition-delay: var(--d, 0s);
}
.rv-bar.in {
  clip-path: inset(0 0 0 0);
}

/* ---------- responsive ---------- */

/* below 1300 even the tightened Spanish nav cannot fit the row;
   collapse to the drawer rather than shrink the type further */
@media (max-width: 1300px) {
  .nav-primary {
    display: none;
  }
  .nav .lang-toggle,
  .nav .nav-cta {
    display: none;
  }
  .nav-burger {
    display: flex;
  }
}

@media (max-width: 1080px) {
  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }
  .grid-2 {
    grid-template-columns: 1fr;
  }
  .kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  .cp-stage {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .cp-visual {
    order: -1;
  }
  .ledger-btn {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    row-gap: 6px;
  }
  .ledger-btn .l-meta {
    grid-column: 1 / -1;
  }
  .ledger-btn .l-val {
    grid-row: 1;
    grid-column: 2;
  }
  .ledger-btn .l-x {
    display: none;
  }
  .ledger-detail.open {
    grid-template-columns: 1fr;
  }
  .ledger-detail .d-facts {
    grid-template-columns: 1fr;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .gantt-row {
    grid-template-columns: minmax(84px, 110px) 1fr minmax(48px, auto);
    gap: 10px;
  }
  .compliance {
    grid-template-columns: 1fr;
  }
  .compliance .demo-note {
    text-align: left;
    white-space: normal;
  }
  .rail {
    display: none;
  }
}

@media (max-width: 560px) {
  .kpis {
    grid-template-columns: 1fr 1fr;
  }
  .hero-ctas .btn {
    width: 100%;
    justify-content: center;
  }
  /* narrow phones: the widest spec tables outgrow the column;
     let the table itself scroll instead of the page */
  .spec-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 480px) {
  .foot-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .rv,
  .rv-l {
    opacity: 1;
    transform: none;
  }
  .rv-bar {
    clip-path: none;
  }
  .gantt-row .g-bar {
    transition: none;
  }
  .cp-spacer {
    height: 0;
  }
  .cp-sticky {
    position: static;
    min-height: 0;
  }
}

/* ---------- print: a site that asks to be filed should print ---------- */


/* ---------- hero headline: the level line draws it, light keeps it alive ----------
   Every page hero H1 is REVEALED by a passing survey line (a laser level
   sweeping the sheet), then carries a slow brushed-light sheen on loop, the
   same light language as the metal mark. The reveal is pure CSS on a fixed
   clock (heroes are above the fold), so it runs identically with no JS.
   The .rv fade the H1 used to ride is neutralized here; the kicker keeps it,
   and the lede/CTAs are re-timed below to follow the draw. */
.hero h1.rv {
  opacity: 1;
  transform: none;
  transition: none;
}
.hero h1 {
  position: relative;
  animation: hero-draw 1.05s cubic-bezier(0.76, 0, 0.17, 1) 0.42s both;
}
.hero h1::before {
  content: "";
  position: absolute;
  top: -0.08em;
  bottom: -0.12em;
  left: 0;
  width: 4px;
  margin-left: -10px;
  background: linear-gradient(180deg, transparent, var(--yellow) 14%, var(--yellow) 86%, transparent);
  box-shadow: 0 0 20px rgba(255, 196, 0, 0.72), 0 0 54px rgba(255, 196, 0, 0.30);
  opacity: 0;
  pointer-events: none;
  animation: hero-rule 1.05s cubic-bezier(0.76, 0, 0.17, 1) 0.42s forwards;
}
@keyframes hero-draw {
  from { clip-path: inset(-6% 103% -10% -2%); }
  to { clip-path: inset(-6% -3% -10% -2%); }
}
@keyframes hero-rule {
  0% { left: 0%; opacity: 0; }
  8% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
/* the sheen: a slow band of light crossing the set type, looped */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 {
    background-image: linear-gradient(100deg, var(--paper) 0%, var(--paper) 44%, #ffffff 50%, var(--paper) 56%, var(--paper) 100%);
    background-size: 320% 100%;
    background-repeat: no-repeat;
    background-position: 0% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation:
      hero-draw 1.05s cubic-bezier(0.76, 0, 0.17, 1) 0.42s both,
      hero-sheen 8.5s linear 2.4s infinite;
  }
  .hero h1 .accent {
    background-image: linear-gradient(100deg, var(--yellow) 0%, var(--yellow) 44%, #ffe38a 50%, var(--yellow) 56%, var(--yellow) 100%);
    background-size: 320% 100%;
    background-repeat: no-repeat;
    background-position: 0% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: hero-sheen 8.5s linear 3.1s infinite;
  }
}
@keyframes hero-sheen {
  0% { background-position: 0% 0; }
  26% { background-position: 100% 0; }
  100% { background-position: 100% 0; }
}
/* the copy follows the draw instead of racing it */
.hero p.lede.rv { transition-delay: 1.05s; }
.hero .hero-ctas.rv { transition-delay: 1.25s; }
@media (prefers-reduced-motion: reduce) {
  .hero h1,
  .hero h1::before,
  .hero h1 .accent {
    animation: none !important;
  }
  .hero h1 {
    background: none;
    color: inherit;
    -webkit-text-fill-color: currentColor;
  }
  .hero h1::before { display: none; }
  .hero h1 .accent {
    background: none;
    color: var(--yellow);
    -webkit-text-fill-color: currentColor;
  }
  .hero p.lede.rv,
  .hero .hero-ctas.rv { transition-delay: 0s; }
}

/* ---------- the drawing set has TOOTH: paper grain + survey rings ----------
   Document sections read as a real sheet instead of a flat beige fill:
   a faint fractal paper grain, the survey-ring motif from the mark's plate
   bleeding in from the top-right corner, and a whisper of edge shading so
   each sheet sits under the light instead of floating. Static, print-safe,
   and quiet enough that every measured contrast ratio holds. */
.m-doc {
  background-color: var(--paper);
  background-image:
    linear-gradient(180deg, rgba(31, 27, 16, 0.05) 0, rgba(31, 27, 16, 0) 140px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='840' height='840' viewBox='0 0 840 840'%3E%3Cg fill='none' stroke='%238a6a00'%3E%3Ccircle cx='420' cy='420' r='150' stroke-opacity='.10' stroke-width='1.4'/%3E%3Ccircle cx='420' cy='420' r='265' stroke-opacity='.07' stroke-width='1.3'/%3E%3Ccircle cx='420' cy='420' r='385' stroke-opacity='.045' stroke-width='1.2'/%3E%3Cpath d='M420 398 V442 M398 420 H442' stroke-opacity='.16' stroke-width='1.4'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.23 0 0 0 0 0.20 0 0 0 0 0.14 0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: 0 0, right -300px top -300px, 0 0;
  background-size: 100% 140px, 840px 840px, 260px 260px;
}
.m-doc.raise {
  background-color: var(--paper-2);
}
@media (max-width: 760px) {
  .m-doc {
    background-position: 0 0, right -390px top -390px, 0 0;
  }
}

@media print {
  .m-doc { background-image: none !important; }
  .hero h1 {
    clip-path: none !important;
    animation: none !important;
    background: none !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
  }
  .hero h1::before { display: none !important; }
  .hero h1 .accent {
    background: none !important;
    color: var(--yellow) !important;
    -webkit-text-fill-color: currentColor !important;
  }

  .nav,
  .drawer,
  .nav-burger,
  .rail,
  .lang-toggle,
  .hero-ctas,
  .skip-link {
    display: none !important;
  }
  .m-field,
  .m-field.raise,
  footer.site-foot {
    background: #fff !important;
    color: var(--txt-doc) !important;
  }
  .m-field .station,
  .m-field .card .tag,
  .m-field .checklist .ck,
  .m-field .station b {
    color: var(--txt-doc-dim) !important;
  }
  .rv,
  .rv-l {
    opacity: 1 !important;
    transform: none !important;
  }
  .cp-spacer {
    display: none;
  }
  .cp-sticky {
    position: static;
    min-height: 0;
  }
  .spec-table,
  .card,
  .frame {
    break-inside: avoid;
  }
  a {
    color: inherit;
  }
}

/* ---------- brand lockup: the mark is BUILT, then it turns ---------- */
/* The mark is a real 3D solid rendered by datum-logo.js (emitted from the mark
   generator, same geometry as every static instance). It builds member by
   member, the datum apex registers with a pulse, then it turns a slow 360.
   It never flattens: a bracket plus two crossed beams always presents volume. */

.brandband {
  padding-block: clamp(56px, 8vw, 104px);
}
.lockup {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) 1.6fr;
  gap: clamp(28px, 5vw, 68px);
  align-items: center;
}
.lockup-mark {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  justify-self: center;
}
.lockup-mark .datum-solid {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.lockup-name {
  font-family: var(--disp);
  font-weight: 600;
  font-size: clamp(46px, 9vw, 108px);
  line-height: 0.94;
  letter-spacing: 0.34em;
  color: var(--paper);
  margin: 0;
  /* the wordmark is SURVEYED OUT from its centre line, not typed letter by
     letter: per-letter glyph motion is the DBJ site's signature and does not
     belong to a second brand. */
  clip-path: inset(0 50% 0 50%);
  opacity: 0;
}
.lockup-word.in .lockup-name {
  animation: datum-survey 1.15s var(--ease) 0.5s both;
}
@keyframes datum-survey {
  from { clip-path: inset(0 50% 0 50%); letter-spacing: 0.62em; opacity: 0; }
  to   { clip-path: inset(0 -2% 0 -2%); letter-spacing: 0.34em; opacity: 1; }
}
.lockup-sub {
  font-family: var(--mono);
  font-size: clamp(10px, 1.3vw, 13px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--yellow);
  margin: 14px 0 0;
  opacity: 0;
}
.lockup-word.in .lockup-sub {
  animation: datum-fade 0.8s var(--ease) 1.25s both;
}
.lockup-line {
  max-width: 54ch;
  margin: 20px 0 0;
  color: var(--field-dim, #98a0af);
  opacity: 0;
}
.lockup-word.in .lockup-line {
  animation: datum-fade 0.8s var(--ease) 1.45s both;
}
@keyframes datum-fade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 760px) {
  .lockup { grid-template-columns: 1fr; text-align: center; }
  .lockup-line { margin-inline: auto; }
  .lockup-mark { max-width: 240px; }
}
/* Reduced motion: the lockup must READ, not perform. The runtime already draws
   the seated solid; here the wordmark simply exists. */
@media (prefers-reduced-motion: reduce) {
  .lockup-name,
  .lockup-sub,
  .lockup-line {
    animation: none !important;
    clip-path: none;
    opacity: 1;
    letter-spacing: 0.34em;
  }
  .lockup-line, .lockup-sub { letter-spacing: normal; }
  .lockup-sub { letter-spacing: 0.34em; }
}
/* No-JS is handled in each page's <noscript> block, matching how the rest of
   this site degrades. The runtime never mounts there, so the mark box would sit
   empty; the noscript rules collapse it and let the wordmark carry the band. */