/* ============================================================
   INVERO PROJECTS — REV H "DAYLIGHT"
   Multi-page (hash-routed) · light theme, dark footer anchor
   Warm paper ground · traced hexagon mark · animated brand
   ============================================================ */
/* --bh drives every dimension of the nav lockup. Registering it means the
   variable itself interpolates, so the whole lockup resizes as one piece when
   the header condenses. Transitioning the derived widths and heights instead
   also works, but eases each of them independently, which lets the parts drift
   out of register mid-transition. */
@property --bh {
  syntax: '<length>';
  inherits: true;
  initial-value: 54px;
}

:root {
  /* ---- grounds ----
     The page alternates paper and band the way the reference site does; the
     dark ground survives only where it is deliberate — footer and HUD. */
  --paper:     #FBF9F6;
  --band:      #F2EFEA;
  --void:      #0F0D0B;

  --glass:     #FFFFFF;
  --line:      rgba(20, 17, 14, 0.12);
  --line-soft: rgba(20, 17, 14, 0.07);
  --line-amber: rgba(200, 137, 31, 0.38);

  /* ---- amber, split by contrast duty ----
     Sampled off the hexagon itself: its lit face measures #EBA52E and falls to
     #C98A26 in shadow, so the accent is the brand's own gold rather than an
     invented one. But #C8891F is only 2.85:1 on paper — fine for a rule, not
     for a word. So --amber is the TEXT-SAFE tone (5.3:1) and is the default;
     anything decorative opts up to --amber-mid or --amber-lift. Defaulting
     this way means a missed call site fails legible, not illegible. */
  --amber:      #8A5A0C;
  --amber-hi:   #7A4F0A;
  --amber-mid:  #C8891F;
  --amber-lift: #EBA52E;
  --amber-dp:   #C8891F;
  --amber-lo:   #9A6712;
  --gold:      linear-gradient(152deg, #EBA52E 0%, #C8891F 45%, #9A6712 100%);
  --gold-flat: #C8891F;
  --ink:       #14110E;
  --muted:     #5A5148;
  /* 5.5:1 on paper. The small uppercase labels are the first thing to fail a
     contrast pass, so this is deliberately not lighter than it looks. */
  --faint:     #6E6459;
  --flag:      #B23C1C;
  --radius:    16px;
  /* the brand's lean. Every slice, band and hairline in the identity is cut
     at this angle off vertical — it is the one geometric constant. */
  --lean:      7.5deg;
  /* the technical label face: DIN-derived, ships with Windows, falls back
     gracefully. Used for the widely-letterspaced uppercase labels. */
  --face-tech: 'Bahnschrift', 'DIN Alternate', 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
  /* There is no lockup raster anywhere in the page now. The hexagon and the
     wordmark are both traced vector, which is what lets the lockup scale to fill
     a screen, animate part by part, and reverse for the dark footer with a fill
     change — the three things the two exported cuts could not do. */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 16.5px;
  line-height: 1.6;
  overflow-x: hidden;
}

::selection { background: rgba(235, 165, 46, 0.34); color: var(--ink); }

h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -0.022em; text-wrap: balance; }
h1 { font-feature-settings: "ss01" 1; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--amber); }

html { scrollbar-color: rgba(200, 137, 31, 0.55) rgba(20, 17, 14, 0.05); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: rgba(20, 17, 14, 0.04); }
::-webkit-scrollbar-thumb {
  background: rgba(200, 137, 31, 0.5);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(200, 137, 31, 0.75); background-clip: padding-box; }
input, select, textarea { caret-color: var(--amber); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--amber-hi);
  outline-offset: 3px;
  border-radius: 4px;
}
.eyebrow {
  font-family: 'Cascadia Code', Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
}
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- ambient stage ----------
   The dark theme's atmosphere was additive light — a glow, a beam, a floor
   bounce and a rim, all of which only exist against black. Recoloured they
   turn into grey smudges, so they are gone rather than converted. What is
   left is what actually reads on paper: a single warm wash and the leaning
   hairline weave, which is the identity's 7.5° constant and worth keeping. */
.stage { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.stage .glow {
  position: absolute;
  top: -30vh; left: 50%;
  width: 140vw; height: 100vh;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 52% 58% at 50% 34%,
    rgba(235, 165, 46, 0.10), rgba(200, 137, 31, 0.04) 46%, transparent 72%);
  animation: glowdrift 16s ease-in-out infinite alternate;
}
.stage .beam { display: none; }
.stage .rim { display: none; }
.stage canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transition: opacity 600ms ease;
}
body:not([data-pg="home"]) .stage canvas { opacity: 0.42; }
@keyframes glowdrift {
  from { transform: translateX(-52%) scale(1); opacity: 0.9; }
  to   { transform: translateX(-48%) scale(1.05); opacity: 1; }
}

/* ---------- build HUD ----------
   Kept dark on purpose: as a floating chip it reads as instrumentation rather
   than as a leftover, and it is the one place the amber can run bright. That
   means it needs its own reversed colours — the tokens now point the other way. */
.hud {
  position: fixed;
  right: 22px; bottom: 20px;
  z-index: 40;
  font-family: 'Cascadia Code', Consolas, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  color: #FFDFA8;
  background: rgba(15, 13, 11, 0.88);
  border: 1px solid rgba(235, 165, 46, 0.34);
  border-radius: 999px;
  padding: 8px 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(20, 17, 14, 0.18);
  transition: opacity 500ms ease;
}
body:not([data-pg="home"]) .hud { opacity: 0; }
html.building .hud { opacity: 0; }
.hud .bar {
  width: 64px; height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.hud .bar i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #C8891F, #FFDFA8);
  transition: width 120ms linear;
}
@media (max-width: 640px) { .hud { right: 12px; bottom: 12px; } }

main, header, footer { position: relative; z-index: 1; }

/* ============ NAV ============ */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(251, 249, 246, 0.72);
  border-bottom: 1px solid rgba(20, 17, 14, 0.06);
  transition: background-color 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}
/* once the page moves, the bar commits: opaque ground, a lit amber hairline */
body[data-scrolled] header {
  background: rgba(251, 249, 246, 0.94);
  border-bottom-color: rgba(200, 137, 31, 0.28);
  box-shadow: 0 8px 26px rgba(20, 17, 14, 0.07);
}
.nav {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: padding 260ms ease;
}
body[data-scrolled] .nav { padding-top: 9px; padding-bottom: 9px; }
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.brand:focus-visible { outline: 2px solid var(--amber); outline-offset: 5px; border-radius: 6px; }
.navpill {
  margin: 0 auto;
  display: flex;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(20, 17, 14, 0.028);
}
.navpill a {
  font-size: 0.84rem;
  color: var(--muted);
  text-decoration: none;
  padding: 7px 15px;
  border-radius: 999px;
  transition: color 160ms ease, background-color 160ms ease;
  white-space: nowrap;
}
.navpill a:hover { color: var(--ink); background: rgba(20, 17, 14, 0.06); }
.navpill a[aria-current="page"] {
  color: #FFFFFF;
  background: linear-gradient(180deg, #A66A10, #8A5A0C);
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(138, 90, 12, 0.26);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease;
}
/* On paper the primary CTA goes solid and deep rather than bright: white on
   #8A5A0C is 5.6:1, where the logo's own gold ramp would have dropped to
   3.9:1 at its darkest stop. The bright gold stays on rules and the mark. */
.btn-amber {
  background: linear-gradient(180deg, #A66A10, #8A5A0C);
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(138, 90, 12, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-amber:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #B87613, #96630E);
  box-shadow: 0 8px 24px rgba(138, 90, 12, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-amber:active { transform: translateY(0); }
.btn-ghost {
  color: var(--ink);
  border-color: var(--line);
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(20, 17, 14, 0.04);
}
.btn-ghost:hover {
  border-color: var(--line-amber);
  background: #FFFFFF;
  box-shadow: 0 4px 14px rgba(20, 17, 14, 0.08);
}
.btn .arrow { transition: transform 180ms ease; }
.btn:hover .arrow { transform: translateX(3px); }
/* the bar's own controls must never be squeezed into wrapping */
.nav .btn, .navpill { flex-shrink: 0; }
.nav .btn { white-space: nowrap; }

/* mobile menu */
.menu-btn {
  display: none;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
  color: var(--ink);
  cursor: pointer;
}
.menu-btn svg { display: block; }
.mobile-menu {
  display: none;
  border-top: 1px solid var(--line-soft);
  padding: 8px 24px 14px;
  flex-direction: column;
}
.mobile-menu a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 11px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a[aria-current="page"] { color: var(--amber); font-weight: 600; }
.mobile-menu.open { display: flex; }
/* the full lockup + pill + CTA need ~980px; hand over to the menu before they crowd */
@media (max-width: 1000px) {
  .navpill, .nav .btn { display: none; }
  .menu-btn { display: block; margin-left: auto; }
}

/* ============ PAGES ============ */
.page { display: none; min-height: 72vh; }
.page.active { display: block; animation: pagein 420ms cubic-bezier(.2,.65,.25,1); }
@keyframes pagein {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* page header (inner pages) — left-aligned, editorial */
.pagehead {
  padding: 150px 0 0;
  max-width: 720px;
}
/* the headings kept their gradient, just inverted: ink falling to a warm
   graphite instead of white falling to bone */
.pagehead h1 {
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  font-weight: 650;
  margin-top: 16px;
  background: linear-gradient(180deg, #14110E 25%, #463E35 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pagehead h1:focus { outline: none; }
.pagehead .lede { color: var(--muted); margin-top: 18px; font-size: 1.04rem; max-width: 56ch; }
.pagehead::after {
  content: "";
  display: block;
  margin-top: 36px;
  height: 1px;
  background: linear-gradient(90deg, var(--line-amber), transparent 70%);
}
.pagebody { padding: 52px 0 0; }

/* ============ HOME HERO ============ */
.hero {
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: 120px 24px 60px;
}
@media (max-width: 680px) {
  .hero { align-items: center; text-align: center; min-height: 80vh; }
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cascadia Code', Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid var(--line-amber);
  background: rgba(235, 165, 46, 0.10);
  padding: 8px 16px;
  border-radius: 999px;
}
.hero h1 {
  /* the margin cleared the badge that used to sit above; the headline now opens
     the hero, so it only applies if something is ever put back in front of it */
  margin: 26px 0 0;
  font-size: clamp(2.7rem, 6.8vw, 4.9rem);
  font-weight: 650;
  max-width: 14ch;
  background: linear-gradient(180deg, #14110E 20%, #3A322A 78%, #4E453B);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero h1:first-child { margin-top: 0; }
.hero h1:focus { outline: none; }
/* the amber word in the headline is display-size, so it can run richer than
   body amber and still clear 4.5:1 at its lightest stop */
.hero h1 .amber {
  background: linear-gradient(180deg, #B87613 8%, #9A6712 52%, #7A4F0A);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .sub {
  margin: 24px 0 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: 1.1rem;
}
@media (max-width: 680px) { .hero .sub { margin: 24px auto 0; } }
.hero .cta-row {
  margin-top: 36px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
@media (max-width: 680px) { .hero .cta-row { justify-content: center; } }
.hero .loc {
  margin-top: 30px;
  font-family: 'Cascadia Code', Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero .loc .amber-dot { color: var(--amber); }

/* load choreography (home) */
.rise { opacity: 0; transform: translateY(18px); animation: rise 700ms cubic-bezier(.2,.65,.25,1) forwards; }
.d1 { animation-delay: 80ms; } .d2 { animation-delay: 200ms; } .d3 { animation-delay: 340ms; }
.d4 { animation-delay: 480ms; } .d5 { animation-delay: 620ms; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ============ CARDS (services + AI) ============ */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 820px) { .cards { grid-template-columns: 1fr; } }
/* On black a card separated by glowing; on paper it separates by casting.
   Two-part shadow — a tight contact line plus a wide soft one — is what keeps
   it from reading as a flat outlined box. */
.card {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 17, 14, 0.04), 0 8px 24px rgba(20, 17, 14, 0.05);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--line-amber);
  box-shadow: 0 2px 4px rgba(20, 17, 14, 0.05), 0 18px 40px rgba(20, 17, 14, 0.10);
}
.card::after {
  content: "";
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--amber-mid), transparent);
  opacity: 0;
  transition: opacity 220ms ease;
}
.card:hover::after { opacity: 1; }
.card .icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(235, 165, 46, 0.14);
  border: 1px solid var(--line-amber);
  color: var(--amber);
  margin-bottom: 18px;
}
.card h2 { font-size: 1.16rem; font-weight: 650; }
.card > p { color: var(--muted); font-size: 0.92rem; margin-top: 10px; }
.card ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.card li {
  font-size: 0.82rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 9px;
}
.card li svg { color: var(--amber); flex-shrink: 0; }
.card .outcome, .fee .outcome {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.84rem;
  color: var(--muted);
}
.card .outcome b, .fee .outcome b { color: var(--amber-hi); font-weight: 650; }

/* ============ PROCESS (services page) ============ */
.subhead {
  margin: 72px 0 28px;
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.subhead h2 { font-size: 1.5rem; font-weight: 650; }
/* pipeline (AI page) */
.pipeline {
  margin-top: 72px;
  border-top: 1px solid var(--line-soft);
  padding-top: 44px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 880px) { .pipeline { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .pipeline { grid-template-columns: 1fr; } }
.pipe { position: relative; padding: 0 8px; }
.pipe .no {
  font-family: 'Cascadia Code', Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--amber);
}
.pipe h3 { font-size: 0.98rem; margin-top: 8px; }
.pipe p { font-size: 0.84rem; color: var(--muted); margin-top: 6px; }

/* ============ PROJECTS PAGE — UNDER CONSTRUCTION ============ */
.uc {
  min-height: 76vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 96px;
}
.uc-card {
  width: min(620px, 100%);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #FFFFFF, #FCFAF7);
  box-shadow: 0 2px 6px rgba(20, 17, 14, 0.05), 0 26px 60px rgba(20, 17, 14, 0.09);
}
/* the hazard stripe survives the theme change unaltered in idea — it just
   needs a dark bar it can actually contrast against on a white card */
.hazard {
  height: 12px;
  background: repeating-linear-gradient(45deg,
    var(--amber-lift) 0 14px, #2C2E30 14px 28px);
  background-size: 40px 40px;
  animation: hazardslide 1.4s linear infinite;
}
@keyframes hazardslide { from { background-position-x: 0; } to { background-position-x: 40px; } }
.uc-body { text-align: center; padding: 44px 32px 40px; }
.uc-body h1 {
  font-size: clamp(1.9rem, 4.6vw, 2.7rem);
  font-weight: 650;
  margin-top: 14px;
  background: linear-gradient(180deg, #14110E 25%, #463E35 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.uc-body h1:focus { outline: none; }
.uc-sub { color: var(--muted); font-size: 0.95rem; margin-top: 14px; }
.uc-scene {
  position: relative;
  width: 300px;
  height: 190px;
  margin: 26px auto 0;
}
.uc-crane { position: absolute; inset: 0; }
.uc-cable { animation: cablebob 3s ease-in-out infinite alternate; }
@keyframes cablebob { from { transform: translateY(0); } to { transform: translateY(9px); } }
.uc-stack {
  position: absolute;
  left: 186px;
  bottom: 2px;
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
}
.uc-stack .row { display: flex; gap: 4px; }
.uc-stack .b {
  width: 17px; height: 17px;
  border-radius: 3px;
  background: linear-gradient(160deg, var(--amber-lift), var(--amber-mid));
  opacity: 0;
  animation: blockpop 8.4s cubic-bezier(.2,.65,.25,1) infinite;
  animation-delay: calc(var(--i) * 0.5s);
}
@keyframes blockpop {
  0%       { opacity: 0; transform: translateY(-16px); }
  4%       { opacity: 1; transform: none; }
  86%      { opacity: 1; transform: none; }
  92%,100% { opacity: 0; transform: none; }
}
.uc-cta { margin-top: 30px; }

/* ============ ABOUT PAGE ============ */
.about-story h2 { font-size: 1.4rem; font-weight: 650; }
.about-story p { color: var(--muted); font-size: 0.96rem; margin-top: 14px; max-width: 58ch; }
.about-story p strong { color: var(--ink); font-weight: 600; }
.about-cta {
  margin-top: 56px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

/* ============ CONTACT PAGE ============ */
.contact-grid {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 940px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-box { order: 1; }
  .contact-rail { order: 2; }
}

/* ---- left rail: direct channels + what happens next ---- */
.contact-rail { display: grid; gap: 16px; position: sticky; top: 92px; }
@media (max-width: 940px) { .contact-rail { position: static; } }
.rail {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  box-shadow: 0 1px 2px rgba(20, 17, 14, 0.04), 0 8px 22px rgba(20, 17, 14, 0.05);
}
.rail-label {
  font-family: 'Cascadia Code', Consolas, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.rail dl { margin: 16px 0 0; display: grid; gap: 13px; }
.rail dt {
  font-family: 'Cascadia Code', Consolas, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.rail dd { margin: 4px 0 0; font-size: 0.9rem; color: var(--ink); }
.rail dd a { color: var(--amber); text-decoration: none; }
.rail dd a:hover { text-decoration: underline; }
.rail dd.mono {
  font-family: 'Cascadia Code', Consolas, monospace;
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.rail ol { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 15px; counter-reset: step; }
.rail ol li { position: relative; padding-left: 32px; }
.rail ol li::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: 'Cascadia Code', Consolas, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  color: var(--amber);
}
.rail ol b { display: block; font-weight: 650; font-size: 0.9rem; color: var(--ink); }
.rail ol span { display: block; margin-top: 4px; font-size: 0.82rem; color: var(--muted); }

/* ---- form panel ---- */
.contact-box {
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(180deg, var(--line-amber), rgba(20, 17, 14, 0.06) 60%);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(20, 17, 14, 0.05), 0 22px 54px rgba(20, 17, 14, 0.08);
}
.contact-inner {
  border-radius: 23px;
  background:
    radial-gradient(ellipse 70% 55% at 50% -10%, rgba(235, 165, 46, 0.13), transparent 62%),
    linear-gradient(180deg, #FFFFFF, #FCFAF7);
  padding: 36px 34px 34px;
}
@media (max-width: 560px) { .contact-inner { padding: 28px 20px 26px; } }
.contact-inner h2 {
  font-size: clamp(1.45rem, 3.2vw, 1.95rem);
  font-weight: 650;
  background: linear-gradient(180deg, #14110E 25%, #463E35 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  max-width: 22ch;
  margin: 16px 0 0;
}
.contact-inner .sub { color: var(--muted); max-width: 54ch; margin: 12px 0 0; font-size: 0.93rem; }

/* ---- the form itself ---- */
.cf { margin-top: 30px; }
.cf.off { display: none; }
.cf-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.cf-set + .cf-set { margin-top: 26px; }
.cf-set > legend {
  padding: 0;
  font-family: 'Cascadia Code', Consolas, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
}
.cf-body { margin-top: 15px; display: grid; gap: 14px; }
.cf-row { display: grid; gap: 14px; }
.cf-row.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .cf-row.two { grid-template-columns: 1fr; } }
.cf-field { display: grid; gap: 7px; min-width: 0; }
.cf-field > label {
  font-family: 'Cascadia Code', Consolas, monospace;
  font-size: 0.61rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.cf-field .req { color: var(--amber); }
.cf-field input,
.cf-field select,
.cf-field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid rgba(20, 17, 14, 0.18);
  border-radius: 10px;
  padding: 12px 14px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.cf-field textarea { min-height: 136px; resize: vertical; }
.cf-field input::placeholder,
.cf-field textarea::placeholder { color: var(--faint); }
.cf-field select {
  cursor: pointer;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235A5148' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.cf-field select option { background: #FFFFFF; color: var(--ink); }
.cf-field input:hover,
.cf-field select:hover,
.cf-field textarea:hover { border-color: rgba(20, 17, 14, 0.30); }
.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus {
  outline: none;
  background: #FFFFFF;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(200, 137, 31, 0.22);
}
.cf-field[data-invalid] input,
.cf-field[data-invalid] select,
.cf-field[data-invalid] textarea { border-color: var(--flag); }
.cf-err { display: none; font-size: 0.78rem; color: var(--flag); }
.cf-field[data-invalid] .cf-err { display: block; }

/* checkbox groups */
.cf-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(208px, 1fr)); gap: 9px; }
.cf-chk {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid rgba(20, 17, 14, 0.16);
  border-radius: 10px;
  background: #FFFFFF;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}
.cf-chk:hover { border-color: rgba(20, 17, 14, 0.30); color: var(--ink); }
.cf-chk input {
  width: 15px;
  height: 15px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--amber);
  cursor: pointer;
}
.cf-chk input:checked ~ span { color: var(--ink); }
.cf-chk:has(input:checked) {
  border-color: var(--line-amber);
  background: rgba(235, 165, 46, 0.12);
  color: var(--ink);
}
.cf-chk input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* actions + errors */
.cf-alert {
  display: none;
  align-items: flex-start;
  gap: 10px;
  margin-top: 24px;
  font-size: 0.84rem;
  color: var(--flag);
  border: 1px solid rgba(178, 60, 28, 0.35);
  background: rgba(178, 60, 28, 0.07);
  border-radius: 10px;
  padding: 11px 14px;
}
.cf-alert.on { display: flex; }
.cf-alert svg { flex-shrink: 0; margin-top: 2px; }
.cf-actions {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.cf-note {
  font-family: 'Cascadia Code', Consolas, monospace;
  font-size: 0.66rem;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--faint);
  max-width: 32ch;
}

/* ---- sent state ---- */
.cf-done { display: none; margin-top: 30px; }
.cf-done.on { display: block; animation: pagein 420ms cubic-bezier(.2,.65,.25,1); }
.cf-done .tick {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(235, 165, 46, 0.14);
  border: 1px solid var(--line-amber);
  color: var(--amber);
}
.cf-done h3 { font-size: 1.24rem; font-weight: 650; margin-top: 18px; }
.cf-done > p { color: var(--muted); font-size: 0.92rem; margin-top: 10px; max-width: 54ch; }
.cf-summary {
  margin-top: 20px;
  max-height: 264px;
  overflow: auto;
  background: var(--band);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  font-family: 'Cascadia Code', Consolas, monospace;
  font-size: 0.74rem;
  line-height: 1.7;
  color: var(--muted);
  white-space: pre-wrap;
  word-break: break-word;
}
.cf-done .cta-row { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ============ FOOTER ============
   The one surviving dark band. It anchors the page the way the letterhead's
   dark sign-off strip anchors the page there, and it is the only place amber
   gets to run bright again. Everything here is scoped and explicit, because
   the tokens above all point at a light ground now. */
footer {
  margin-top: 96px;
  background: var(--void);
  color: #EDE7E0;
  border-top: 1px solid rgba(235, 165, 46, 0.22);
}
.foot {
  max-width: 1120px;
  margin: 0 auto;
  padding: 52px 24px 34px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px 60px;
  align-items: start;
}
@media (max-width: 720px) { .foot { grid-template-columns: 1fr; gap: 28px; } }
.foot-line {
  margin-top: 18px;
  color: #A79D91;
  font-size: 0.88rem;
  max-width: 40ch;
}
.foot-mail {
  margin-top: 12px;
  font-family: 'Cascadia Code', Consolas, monospace;
  font-size: 0.76rem;
}
.foot-mail a { color: #FDB954; text-decoration: none; }
.foot-mail a:hover { text-decoration: underline; }
.foot-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 20px;
  align-content: start;
}
.foot-nav a {
  color: #A79D91;
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 160ms ease;
}
.foot-nav a:hover { color: #FDB954; }
.foot-legal {
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 24px 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  font-family: 'Cascadia Code', Consolas, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  color: #8B8276;
}
.foot-legal .revs { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-legal .on { color: #FDB954; }
.foot .brand:focus-visible,
.foot-nav a:focus-visible,
.foot-mail a:focus-visible { outline: 2px solid #FDB954; outline-offset: 3px; }

/* scroll/entry reveals */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 650ms ease, transform 650ms cubic-bezier(.2,.65,.25,1); }
.reveal.in { opacity: 1; transform: none; }
.stagger > * { opacity: 0; transform: translateY(22px); transition: opacity 600ms ease, transform 600ms cubic-bezier(.2,.65,.25,1); }
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(1) { transition-delay: 0ms; }
.stagger.in > *:nth-child(2) { transition-delay: 90ms; }
.stagger.in > *:nth-child(3) { transition-delay: 180ms; }
.stagger.in > *:nth-child(4) { transition-delay: 270ms; }
.stagger.in > *:nth-child(5) { transition-delay: 360ms; }

/* ============================================================
   REV G — BRAND INSTRUMENTATION
   Everything below is drawn from the 2026 hexagon identity:
   the leaning slice, the gold hairline that edges it, the
   contour sweep, and the metallic gold/steel ramps. It layers
   over Rev F rather than replacing it, so the cascade order
   here is deliberate — this block must stay last.
   ============================================================ */

/* ---------- 1. SUBSTRATE ----------
   Rev G lit a dark room. On paper there is no dark room to light, so the
   floor bounce and the rim are gone and the tonal fall down `main` is
   replaced by the thing that actually carries a light page: alternating
   bands. The weave survives — it is the identity's 7.5° lean — but inverted
   to dark hairlines, which need roughly half the alpha to read the same. */

.stage .weave {
  position: absolute;
  inset: -20vh -20vw;
  background:
    repeating-linear-gradient(calc(90deg + var(--lean)),
      rgba(20, 17, 14, 0.040) 0 1px, transparent 1px 148px),
    repeating-linear-gradient(calc(90deg + var(--lean)),
      rgba(200, 137, 31, 0.10) 0 1px, transparent 1px 592px);
  -webkit-mask-image: radial-gradient(ellipse 82% 70% at 50% 46%, #000 22%, transparent 80%);
          mask-image: radial-gradient(ellipse 82% 70% at 50% 46%, #000 22%, transparent 80%);
  animation: weavedrift 26s ease-in-out infinite alternate;
}
@keyframes weavedrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-38px, 14px, 0); }
}

.stage .floor { display: none; }

/* The lattice is scenery, not content. The mask still clears it out of the
   middle where the copy sits; on paper it needs far less opacity, because
   dark-on-light reads much harder than light-on-dark at the same alpha. */
body:not([data-pg="home"]) .stage canvas {
  opacity: 0.34;
  -webkit-mask-image: radial-gradient(ellipse 64% 56% at 50% 38%,
    transparent 6%, rgba(0,0,0,0.5) 56%, #000 88%);
          mask-image: radial-gradient(ellipse 64% 56% at 50% 38%,
    transparent 6%, rgba(0,0,0,0.5) 56%, #000 88%);
}

/* ---------- 1b. BAND RHYTHM ----------
   The reference site's whole structure is full-width sections alternating
   between white and a light grey, with a lot of air. `main` carries a soft
   warm fall, and every second block on an inner page sits on the band. */
main {
  background: linear-gradient(180deg,
    var(--paper) 0,
    rgba(242, 239, 234, 0.55) 42%,
    rgba(242, 239, 234, 0.30) 74%,
    var(--paper) 100%);
}

/* Full-bleed out of a centred .wrap. box-shadow spread plus a horizontal-only
   clip does it without a negative z-index — which would have dropped the band
   behind main's own background and vanished — and without the 100vw trick,
   which overshoots by the scrollbar width and causes horizontal scroll. */
.band-strip {
  position: relative;
  padding: 76px 24px;
  /* margin-top only — the `margin` shorthand would zero .wrap's `0 auto` and
     drop the whole strip flush left */
  margin-top: 84px;
  background: var(--band);
  box-shadow: 0 0 0 100vmax var(--band);
  clip-path: inset(0 -100vmax);
}
@media (max-width: 680px) { .band-strip { padding: 54px 24px; margin-top: 58px; } }

/* ---------- 2. CONTOUR SWEEP ----------
   The arc family from the brand banner. It terminates every
   page, so the bottom of a short page reads as designed
   rather than as a black gap above the footer. */

.contours {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 190px;
  margin: 76px 0 -46px;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 0 62%, transparent 92%);
          mask-image: linear-gradient(90deg, #000 0 62%, transparent 92%);
}
.contours svg { display: block; width: 100%; height: 100%; }
/* a thin amber line on white is far fainter than the same line on black, so
   the whole opacity ladder moves up rather than staying where Rev G left it */
.contours path {
  fill: none;
  stroke: var(--amber-mid);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0.55;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
}
.contours.run path { animation: draw 2.4s cubic-bezier(.22,.7,.25,1) forwards; }
.contours path:nth-child(2n)  { opacity: 0.38; animation-delay: 90ms; }
.contours path:nth-child(3n)  { opacity: 0.27; animation-delay: 180ms; }
.contours path:nth-child(4n)  { opacity: 0.48; animation-delay: 270ms; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (max-width: 680px) { .contours { height: 120px; margin-top: 52px; } }

/* ---------- 3. TELEMETRY ----------
   The HUD was home-only. It now reads the current page, and a
   hairline in the header tracks scroll depth. */

body:not([data-pg="home"]) .hud { opacity: 1; }

.scrollbar {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0.85;
  z-index: 2;
}

/* ---------- 4. PAGE MASTHEAD ----------
   A ghosted section numeral behind the title, a datum rule with
   survey ticks, and a monospace spec block. All injected from the
   route map in JS so the markup stays clean. */

.pagehead { position: relative; max-width: none; }
.pagehead > .eyebrow,
.pagehead > h1,
.pagehead > .lede { position: relative; z-index: 1; max-width: 760px; }

.ghostno {
  position: absolute;
  top: 124px; right: 0;
  font-family: var(--face-tech);
  font-size: clamp(7rem, 17vw, 15rem);
  font-weight: 700;
  line-height: 0.78;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(200, 137, 31, 0.30);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
@media (max-width: 900px) { .ghostno { opacity: 0.5; top: 120px; } }

/* datum rule — a surveyed level line replaces the plain hairline. It is a
   real child element, so it sits between the lede and the spec readings
   instead of after them the way ::after would. */
.pagehead::after { content: none; }
.datum {
  position: relative;
  margin-top: 40px;
  height: 10px;
  border-top: 1px solid rgba(200, 137, 31, 0.45);
  background-image: linear-gradient(90deg, rgba(200,137,31,0.65) 0 1px, transparent 1px);
  background-size: 44px 10px;
  background-repeat: repeat-x;
  -webkit-mask-image: linear-gradient(90deg, #000 0 46%, transparent 86%);
          mask-image: linear-gradient(90deg, #000 0 46%, transparent 86%);
}

/* spec block — three readings per page */
.specs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 42px;
  margin: 26px 0 0;
  position: relative;
  z-index: 1;
}
.specs div { display: grid; gap: 3px; }
.specs dd { margin: 0; }
.specs dt, .specs .k {
  font-family: 'Cascadia Code', Consolas, monospace;
  font-size: 0.56rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--faint);
}
.specs .v {
  font-family: var(--face-tech);
  font-size: 0.9rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--amber-hi);
  font-weight: 600;
}

/* ---------- 5. LABEL VOICE ----------
   The identity letterspaces its secondary line hard
   ("P R O J E C T S"). Section labels inherit that. */

.eyebrow {
  font-family: var(--face-tech);
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  font-weight: 600;
}
.subhead { position: relative; align-items: center; }
.subhead::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(200,137,31,0.55), transparent 85%);
}

/* ---------- 6. CARDS ----------
   Engineering crop marks, a gold ignition edge, and a scan that
   passes once on hover. The icon plate takes the hexagon. */

.card, .rail {
  background:
    linear-gradient(180deg, #FFFFFF, #FDFBF9);
}

.card::before, .fee::before {
  content: "";
  position: absolute;
  inset: 11px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms ease;
  background:
    linear-gradient(var(--amber), var(--amber)) 0 0 / 1px 13px no-repeat,
    linear-gradient(var(--amber), var(--amber)) 0 0 / 13px 1px no-repeat,
    linear-gradient(var(--amber), var(--amber)) 100% 0 / 1px 13px no-repeat,
    linear-gradient(var(--amber), var(--amber)) 100% 0 / 13px 1px no-repeat,
    linear-gradient(var(--amber), var(--amber)) 0 100% / 1px 13px no-repeat,
    linear-gradient(var(--amber), var(--amber)) 0 100% / 13px 1px no-repeat,
    linear-gradient(var(--amber), var(--amber)) 100% 100% / 1px 13px no-repeat,
    linear-gradient(var(--amber), var(--amber)) 100% 100% / 13px 1px no-repeat;
}
.card:hover::before, .fee:hover::before { opacity: 0.5; }

.card .icon {
  border-radius: 0;
  clip-path: polygon(50% 0%, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%);
  background: var(--gold);
  border: none;
  width: 44px; height: 48px;
  color: #14100B;
}
.card .icon svg { stroke: #14100B; }

/* ---------- 6b. FEE LADDER ----------
   Four engagements ordered by how deep we go — a one-off diagnostic at one
   end, the whole project life at the other. The crop marks above already cover
   .fee, so the card only needs its own ground and the two things the .card
   cards don't have: a headline figure, and a terms list.

   The depth bar is the one piece of new information design here. --depth is
   set per card, so the ladder is legible before a single figure is read —
   which is the question a visitor is actually asking when they scan a price
   table. It is decoration only: nothing is encoded there alone. */

.fees { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
/* four abreast needs ~250px a card inside the 1120px wrap; below that the
   terms list starts breaking mid-phrase, so hand over to 2-up early */
@media (max-width: 1000px) { .fees { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .fees { grid-template-columns: 1fr; } }

.fee {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #FFFFFF, #FDFBF9);
  box-shadow: 0 1px 2px rgba(20, 17, 14, 0.04), 0 8px 24px rgba(20, 17, 14, 0.05);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.fee:hover {
  transform: translateY(-4px);
  border-color: var(--line-amber);
  box-shadow: 0 2px 4px rgba(20, 17, 14, 0.05), 0 18px 40px rgba(20, 17, 14, 0.10);
}

.fee .depth {
  display: block;
  height: 2px;
  margin-bottom: 20px;
  border-radius: 2px;
  background: rgba(20, 17, 14, 0.09);
  overflow: hidden;
}
.fee .depth i { display: block; height: 100%; width: var(--depth); background: var(--gold); }

.fee h3 { font-size: 1.04rem; font-weight: 650; }
.fee .for { margin-top: 9px; font-size: 0.82rem; line-height: 1.55; color: var(--muted); }

/* the figure is the whole point of the card, so it gets display weight and the
   text-safe deep gold rather than the bright one — 5.3:1 on this ground */
.fee-fig {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 1.3rem;
  font-weight: 650;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--amber-hi);
  /* the four figures land at the same height across the row, so the digits are
     read as a column whether or not they were set as one */
  font-variant-numeric: tabular-nums;
}
.fee-fig small {
  display: block;
  margin-top: 7px;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--muted);
}

.fee dl { margin: 18px 0 0; }
.fee dl > div { padding: 10px 0; border-top: 1px solid var(--line-soft); }
.fee dt {
  font-family: var(--face-tech);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}
.fee dd { margin: 5px 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--muted); }

/* The closing note follows the terms list directly. Pinning it to the card foot
   lined the footers up across the row, but opened a hole mid-card in the three
   shorter ones — the grid already equalises the card grounds, so the alignment
   was not worth the gap. */

/* ---- principles, on the band ---- */
.fee-principles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px 22px;
  margin-top: 28px;
}
@media (max-width: 1000px) { .fee-principles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .fee-principles { grid-template-columns: 1fr; } }
.fee-principles b,.fee-principles h3{ display: block; font-size: 0.92rem; font-weight: 650; color: var(--ink); }
.fee-principles b::before,.fee-principles h3::before{
  content: "";
  display: block;
  width: 10px; height: 11px;
  margin-bottom: 13px;
  background: var(--gold);
  clip-path: polygon(50% 0%, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%);
}
.fee-principles span {
  display: block;
  margin-top: 7px;
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--muted);
}

.fee-note {
  margin-top: 34px;
  max-width: 76ch;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--faint);
}
/* the standfirst above the cards is the same measure but has to read as body
   copy, not as small print — it is the only fee-note a visitor is meant to
   actually stop and read */
.fee-note.lead {
  margin-top: 0;
  font-size: 0.94rem;
  line-height: 1.65;
  max-width: 62ch;
  color: var(--muted);
}
.fee-cta { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* ---------- 6c. CREDENTIALS ROW (about) ----------
   The firm is a year old and the people are not, so the About page has to put
   the experience where it cannot be missed. It borrows the fee card's figure
   treatment deliberately — same deep gold, same tabular figures — so the claim
   about the practice and the claim about the price read as one voice. */

.creds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 26px; margin-top: 30px; }
/* 1000px, not 900 — "$100k – $25M" is the longest figure and it starts wrapping
   inside a quarter column before the narrower breakpoint would catch it */
@media (max-width: 1000px) { .creds { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .creds { grid-template-columns: 1fr; } }
.creds > div { position: relative; padding-top: 20px; }
/* a short leaning rule over each figure — the identity's 7.5° constant, the
   same mark the section rules elsewhere are cut with */
.creds > div::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 26px; height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transform: skewX(calc(-1 * var(--lean)));
}
.creds b {
  display: block;
  font-size: clamp(1.5rem, 2.7vw, 1.95rem);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--amber-hi);
  font-variant-numeric: tabular-nums;
}
.creds span {
  display: block;
  margin-top: 10px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--muted);
}

/* The band already sits inside .pagebody's .wrap, so it must not re-apply the
   wrap's gutter — its own full-bleed shadow does the bleeding. The subhead
   leads the band, so it drops the 72px top margin it carries elsewhere. */
.pagebody .band-strip { padding-left: 0; padding-right: 0; }
.pagebody .band-strip > .subhead { margin-top: 0; }

/* ---------- 7. PROCESS RAIL ----------
   The four pipeline steps are a genuine sequence, so they get a rail
   with joints rather than four loose boxes. (The services page's Stage
   1-4 cards shared this rail until Rev L retired them.) */

.pipeline { position: relative; }
@media (min-width: 881px) {
  .pipeline::before {
    content: "";
    position: absolute;
    left: 6%; right: 6%;
    top: 26px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,137,31,0.55) 12%, rgba(200,137,31,0.55) 88%, transparent);
  }
  .pipe { position: relative; }
  /* .pipe is offset 60px by the padding below, so the joint has to climb back
     up to meet the rail at 26px — and half its 9px height again to centre on it */
  .pipe::before {
    content: "";
    position: absolute;
    top: -38px; left: 50%;
    width: 9px; height: 9px;
    margin-left: -4.5px;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    background: var(--amber-mid);
  }
  .pipeline { padding-top: 60px; }
}
.pipe .no { font-family: var(--face-tech); letter-spacing: 0.24em; }

/* ---------- 9. SPEC PLATES ----------
   The contact rails read as equipment plates. */

.rail { position: relative; }
.rail::before {
  content: "";
  position: absolute;
  top: 0; left: 22px; right: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,137,31,0.60), transparent);
}
.rail-label { font-family: var(--face-tech); letter-spacing: 0.3em; }

/* ---------- 10. CONTACT FORM ----------
   Fieldsets become numbered panels; focus lights the field. */

.cf-set { position: relative; }
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(200, 137, 31, 0.22);
}

/* ---------- 11. PILLARS ----------
   The five capability marks from the brand banner, set as a
   leaning strip so the home page has ground under the hero. */

.pillars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin-top: 12px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--line-soft);
}
.pillar {
  background: #FFFFFF;
  padding: 26px 20px 24px;
  display: grid;
  gap: 10px;
  justify-items: start;
  transition: background-color 240ms ease;
}
.pillar:hover { background: linear-gradient(180deg, rgba(235,165,46,0.13), #FFFFFF 70%); }
.pillar svg { color: var(--amber); }
.pillar b {
  font-family: var(--face-tech);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
.pillar span { font-size: 0.83rem; color: var(--muted); line-height: 1.5; }
/* the strip draws its dividers as 1px of container ground showing through the
   gaps, so a row that doesn't fill its columns leaves a solid block of that
   ground where the missing cell is — the count has to match the content */
.pillars.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .pillars, .pillars.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .pillars, .pillars.four { grid-template-columns: 1fr; } }

.tagline {
  font-family: var(--face-tech);
  font-size: clamp(1.15rem, 2.6vw, 1.7rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}
/* display-size, so 3:1 is the bar rather than 4.5:1 — this ramp clears it at
   its lightest stop (3.55:1); the brighter --gold would not (2.85:1) */
.tagline i {
  font-style: normal;
  background: linear-gradient(150deg, #B87613, #8A5A0C 60%, #7A4F0A);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pillars-head { margin-bottom: 22px; }
.tagline-sub { margin-top: 10px; color: var(--muted); font-size: 0.95rem; }
.hero { min-height: 84vh; }

/* ---------- 12. TRIPTYCH ----------
   Three leaning panels edged in gold — the identity's core
   device. Rendered on canvas from the skyline already in the
   page, so it costs no extra bytes. */

.triptych {
  position: relative;
  width: 100%;
  height: 260px;
  margin-top: 34px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.triptych canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 680px) { .triptych { height: 170px; } }

/* ---------- 13. NAV + FOOTER -----------
   Every lockup on the page — nav, intro and footer — is assembled from the parts
   in section 14. Rev I section 7 covers the footer's reversal.

   Rev G used to re-apply var(--gold) to the pill and the primary button here.
   On paper that put white text on #EBA52E — about 1.9:1 — so those overrides
   are gone rather than recoloured; the solid deep amber set earlier stands. */

footer { position: relative; }

/* ---------- 14. THE NAV LOCKUP, BUILT ----------
   The lockup assembles itself on load, following the six-step storyboard:
   wireframe → ribbons swing in blurred → lock → the rule ignites → the
   wordmark streaks in → settled.

   Every dimension is a ratio of the hexagon's height (--bh), measured off the
   source artwork by column-density profiling it: hexagon 350x420, a 100px gap,
   a 4px rule inset 43px from the top, an 89px gap, then a 895x245 wordmark
   sitting 91px down. Driving it all from one variable is what keeps the
   reconstruction in register with the original lockup at every size. */

.brand {
  --bh: 54px;
  align-items: flex-start;
  line-height: 0;
  /* transition the registered variable, not the calc()s that read it */
  transition: --bh 260ms ease;
}
body[data-scrolled] .brand { --bh: 42px; }
@media (max-width: 900px) {
  .brand { --bh: 46px; }
  body[data-scrolled] .brand { --bh: 38px; }
}
@media (max-width: 420px) {
  .brand { --bh: 38px; }
  body[data-scrolled] .brand { --bh: 33px; }
}

.bmark, .brule, .bword { flex: none; }
.bmark { width: calc(var(--bh) * 0.8333); height: var(--bh); }
.bhex  { display: block; width: 100%; height: 100%; overflow: visible; }

.brule {
  position: relative;
  width: max(1px, calc(var(--bh) * 0.0095));
  height: calc(var(--bh) * 0.8357);
  margin: calc(var(--bh) * 0.1024) calc(var(--bh) * 0.2095) 0 calc(var(--bh) * 0.2357);
}
.brule i {
  display: block;
  width: 100%; height: 100%;
  background: var(--amber-lift);
  transform: scaleY(0);
}
.brule::after {                       /* the flare that lights it, step 4 */
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--bh) * 1.05); height: calc(var(--bh) * 1.05);
  margin: calc(var(--bh) * -0.525) 0 0 calc(var(--bh) * -0.525);
  background: radial-gradient(circle,
    rgba(255, 223, 168, 0.9), rgba(235, 165, 46, 0.30) 32%, transparent 68%);
  opacity: 0;
  pointer-events: none;
}
.bword {
  width: calc(var(--bh) * 2.131);
  height: calc(var(--bh) * 0.5833);
  margin-top: calc(var(--bh) * 0.2167);
}

/* --- the build --- */
.bwire path { fill: none; vector-effect: non-scaling-stroke; }
.bw-guide { stroke: rgba(20, 17, 14, 0.30); stroke-width: 0.6; }
.bw-ink   { stroke: #2C2E30; stroke-width: 1; }
.bw-gold  { stroke: var(--amber-lift); stroke-width: 1; }
.brand-build .bwire path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: bdraw 640ms cubic-bezier(.3,.7,.3,1) forwards;
}
.brand-build .bw-guide { animation-duration: 460ms; }
.brand-build .bw-ink   { animation-delay: 120ms; }
.brand-build .bw-gold  { animation-delay: 220ms; }
/* the wireframe hands over to the solids rather than sitting under them */
.brand-build .bwire { animation: bfade 280ms ease 760ms forwards; }
@keyframes bdraw { to { stroke-dashoffset: 0; } }
@keyframes bfade { to { opacity: 0; } }

.brand-build .bfill {
  opacity: 0;
  animation: bswing 620ms cubic-bezier(.16,.8,.3,1) forwards;
}
/* each ribbon arrives from the side it belongs to, blurred by its own travel */
.brand-build .bf-dark { transform: translate(9px, -13px); filter: blur(4px); animation-delay: 560ms; }
.brand-build .bf-g2   { transform: translate(-26px, 8px); filter: blur(5px); animation-delay: 700ms; }
.brand-build .bf-g1   { transform: translate(26px, -8px); filter: blur(5px); animation-delay: 780ms; }
@keyframes bswing { to { opacity: 1; transform: none; filter: blur(0); } }

.brand-build .brule i { animation: bruleon 420ms cubic-bezier(.2,.8,.3,1) 1180ms forwards; }
.brand-build .brule::after { animation: bflare 620ms ease-out 1240ms forwards; }
@keyframes bruleon { to { transform: scaleY(1); } }
@keyframes bflare {
  0%   { opacity: 0; transform: scale(0.35); }
  40%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.3); }
}

/* The streak has to survive long enough to be seen: a hard ease-out spends
   most of the travel in the first 20% and the smear is gone before it reads,
   so this eases gently and holds some blur to the two-thirds mark. */
.brand-build .bword {
  opacity: 0;
  transform-origin: 0 50%;
  animation: bwordin 760ms cubic-bezier(.3,.6,.35,1) 1440ms forwards;
}
@keyframes bwordin {
  0%   { opacity: 0;    transform: translateX(26%) scaleX(1.22); filter: blur(8px); }
  35%  { opacity: 0.85; }
  65%  { transform: translateX(5%) scaleX(1.05); filter: blur(2.4px); }
  100% { opacity: 1;    transform: none;         filter: blur(0); }
}

/* one glint to close the build, then only on hover */
.bglint { transform: translateX(150px); }
.brand-build .bglint { animation: bglint 1.5s cubic-bezier(.5,0,.5,1) 2150ms 1 both; }
.brand:hover .bglint { animation: bglint2 950ms cubic-bezier(.5,0,.5,1) 1; }
@keyframes bglint  { 0% { transform: translateX(0); } 100% { transform: translateX(150px); } }
@keyframes bglint2 { 0% { transform: translateX(0); } 100% { transform: translateX(150px); } }

/* extend the stagger past five children */
.stagger.in > *:nth-child(6) { transition-delay: 450ms; }
.stagger.in > *:nth-child(7) { transition-delay: 540ms; }
.stagger.in > *:nth-child(8) { transition-delay: 630ms; }

/* ============================================================
   REV J — THE BUILD, AND THE SCROLL
   Two changes that belong together: the lockup constructs itself
   under scroll rather than on a timer, and the site became one
   page you scroll through rather than six you route between.

   Rev I drove the construction with CSS animations and it failed
   three separate ways — a class added in requestAnimationFrame
   never landed, a transition declared by the same class change it
   was meant to animate never ran, and the ribbon offsets were
   written in px when a CSS transform on an SVG child is measured
   in USER UNITS, which threw the pieces three quarters of a mark
   width outside the frame. None of that is visible in a computed
   style, which is why it survived a whole verification pass.

   So there is no animation timing here at all. Scroll position
   gives one number, p, and script writes every element's state
   from it. It is scrubbable, it reverses when you scroll back,
   and it can be checked by setting p and measuring.
   ============================================================ */

/* ---------- 1. THE WORDMARK, NOW VECTOR ----------
   Traced off the 380x104 raster it replaces (IoU 0.9815, MAE 0.033
   measured against the source alpha). Two things needed that: the
   raster held INVERO and PROJECTS merged in one image, so PROJECTS
   could not track in separately, and 380px of source cannot carry a
   700px lockup. The viewBox is 380x104 = 3.6538, and .bword's slot is
   2.131/0.5833 = 3.6537, so it drops in with no other dimension in
   the file changing. */
.bwsvg { display: block; width: 100%; height: 100%; overflow: visible; }
.brand-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- 2. THE BUILD SECTION ----------
   A tall section with a pinned stage. Its height is the scroll budget for the
   sequence: two screens, which is what the rule and the two lines of the
   wordmark need now that the mark is simply present rather than built.

   Script restates this in pixels — see the controller — so this value is only
   the pre-script fallback. Keep the two in step. */
.build { position: relative; height: 200vh; }
html.build-skip .build { display: none; }

.build-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  background: var(--paper);
  overflow: hidden;
}

.build-brand {
  /* The lockup is 3.419 x --bh wide and --bh tall, so a width-only size runs off
     the screen on a short window and a height-only one leaves a wide screen
     mostly empty. Taking the smaller of the two puts it at roughly 70% of the
     width and a third of the height at every shape of viewport.

     This sizes the FINISHED lockup. At rest, when the mark is all there is, the
     controller enlarges and centres it on top of this — otherwise the opening
     screen would show the mark at about a sixth of the width, which reads as a
     detail rather than as the thing the page is about. */
  --bh: clamp(60px, min(22.5vw, 33vh), 420px);
  /* .brand transitions --bh so the nav's lockup condenses smoothly when the page
     scrolls. This one never condenses, and inheriting that transition means the
     size the controller pins on load eases in from whatever the CSS resolved
     first — visible as the logo growing for a quarter second. Instant here. */
  transition: none;
  pointer-events: none;
  /* the dock scales from the top-left, the corner the FLIP measures */
  transform-origin: 0 0;
  will-change: transform;
}

.build-skipbtn {
  position: absolute;
  right: 20px; top: 18px;
  z-index: 2;
  font-family: 'Cascadia Code', Consolas, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}
.build-skipbtn:hover { color: var(--ink); border-color: var(--line-amber); }
.build-skipbtn:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* ---------- 3. THE RESTING STATE, IN THE STYLESHEET ----------
   The controller writes all of this, but it runs at the end of the body. Until
   it does, the browser paints whatever the markup says. So the resting state has
   to be stated here, not established by the first render — script only ever
   moves things away from it.

   The mark is deliberately NOT hidden: it is the opening screen. Only the rule
   and the wordmark are held back, which is the whole of what gets sequenced.

   Nothing here styles the set-out any more. The blueprint and the hexagon's own
   wireframe are gone from this lockup entirely, and the rules that used to dress
   them were unscoped — `.bw-guide` and friends reached the nav's lockup too, so
   removing them hands the nav back its own section 14 styling. */
.build-brand .wg { opacity: 0; }
.build-brand .brule i { transform: scaleY(0); }

/* ---------- 3b. THE CONTACT FORM'S HONEYPOT ----------
   Off screen rather than display:none or hidden: the bots worth stopping do read
   styles, and skip anything obviously unreachable. This looks like a real field
   to anything parsing the DOM, and is silent to anyone using the page —
   aria-hidden and tabindex="-1" keep it away from screen readers and the tab
   order, so nobody is asked to leave a box empty they cannot see. */
.cf-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- 4. HEADER ----------
   Held back while the lockup is still being built — the arriving one is
   the only one that should be on screen — then handed over as it docks.
   Script writes the opacity, so there is no transition to mistime. */
html.building header { pointer-events: none; }

/* ---------- 5. THE FOOTER, REVERSED ----------
   The footer used to carry a second raster of the whole lockup, because
   the artwork is not reversible by filter and a light-ink cut had to be
   exported separately. With the wordmark and the mark both vector that
   problem stops existing: reversing is three fill declarations, and the
   30KB second cut goes with it.

   CSS fill beats a presentation attribute, so these override the fill=""
   on the shared markup without needing a separate copy of it. */
.foot-brand { --bh: 46px; }
.foot-brand .bf-dark { fill: #EDE7E0; }        /* the dark ribbon has to invert */
.foot-brand .w-invero { fill: #EDE7E0; }
.foot-brand .w-projects { fill: var(--amber-lift); }   /* amber runs bright here */
@media (max-width: 720px) { .foot-brand { --bh: 40px; } }

/* ---------- 6. REDUCED MOTION ----------
   No sequence at all: the controller goes straight to the finished state and
   hands over, so the visitor gets the header and the page rather than a scroll
   with nothing to justify it.

   This rule is only the no-JS fallback. Where script runs it writes an inline
   height over the top, which is why the decision is taken in the controller and
   not here. */
@media (prefers-reduced-motion: reduce) {
  .build { height: 100vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rise, .reveal, .stagger > *, .page.active { opacity: 1 !important; transform: none !important; }
  .uc-stack .b { opacity: 1 !important; }
  .contours path { stroke-dashoffset: 0 !important; }
  .scrollbar { transform: scaleX(1) !important; }
  /* The NAV's lockup renders finished rather than mid-build: solids on,
     wireframe and flare off, rule and wordmark already in place.

     Scoped to .brand-build on purpose. The build section's lockup is driven
     from scroll position, not from an animation, and it reaches its finished
     state on its own — the section collapses to one screen under reduced
     motion, which leaves no scroll distance and so renders progress 1. An
     !important here would instead fight the inline styles the controller
     writes, and pin the construction open at every scroll position. */
  .brand-build .bfill, .brand-build .bword { opacity: 1 !important; transform: none !important; filter: none !important; }
  .brand-build .brule i { transform: scaleY(1) !important; }
  .brand-build .bwire, .brand-build .brule::after, .bglint { opacity: 0 !important; }
}


/* ---- opening sequence and hero reveals ---- */

/* ---- opening sequence and hero reveals (ported from the deployed build) ----
   The splash is pure CSS: it draws the hexagon wireframe, fills the three
   ribbons, wipes the wordmark in, then lifts away at 1900ms. Script only
   decides whether it runs at all and removes it afterwards. */
@keyframes iv-lift   { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.06); } }
@keyframes iv-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes iv-draw   { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes iv-fill-l { from { opacity: 0; transform: translate3d(-18px,0,0); } to { opacity: 1; transform: none; } }
@keyframes iv-fill-r { from { opacity: 0; transform: translate3d(18px,0,0); } to { opacity: 1; transform: none; } }
@keyframes iv-glint  { from { transform: translate3d(-40px,0,0); } to { transform: translate3d(150px,0,0); } }
@keyframes iv-line   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes iv-rule   { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes iv-wipe   { from { clip-path: inset(0 100% 0 0); opacity: 0; transform: translate3d(-14px,0,0); }
                         to { clip-path: inset(0 0 0 0); opacity: 1; transform: none; } }

/* Decided before paint, so a returning visitor never sees a frame of it. */
html.intro-skip [data-intro] { display: none !important; }

/* The home page used to draw its own skyline on a canvas, progressively
   "building" it - which is what the STRUCTURE n% readout was counting. With a
   photograph of the actual Melbourne skyline now behind the hero, a second
   drawn one reads as artefacts over the copy rather than as atmosphere. The
   canvas stays on every other page, where it is dialled back to a faint
   lattice and works. One line to reinstate. */
body[data-pg="home"] .stage canvas { display: none; }

[data-glow] { position: relative; }
[data-glow] > span:first-child { transition: opacity 260ms ease; }

@media (prefers-reduced-motion: reduce) {
  [data-intro] { display: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}


/* ---- tender walkthrough (page-ai) ---- */

/* ---- Tender walkthrough (ported from the deployed build) ----
   Hover states arrived as style-hover="" directives on the elements themselves;
   they belong here instead. The blink keyframe drove the "live" dot and was
   defined in the bundle's stylesheet, which we are not carrying across. */
@keyframes iv-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
[data-tdemo] [data-tact="replay"]:hover,
[data-tdemo] [data-t4btn]:hover { background: rgba(235,165,46,0.13); }
[data-tdemo] [data-tact="jump"] { transition: border-color 200ms ease, background-color 200ms ease; }
[data-tdemo] [data-tact="jump"]:hover { background: rgba(235,165,46,0.07); }
@media (prefers-reduced-motion: reduce) {
  [data-tdemo] { transition: none !important; }
}

/* ---------- services dropdown ---------- */
.navpill .navdrop { position: relative; display: flex; }
.navpill .navdrop::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; }
.navpill .navdrop-menu { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(-4px); min-width: 268px; display: flex; flex-direction: column; gap: 2px; padding: 8px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 44px rgba(20, 17, 14, 0.16); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms; z-index: 80; }
.navpill .navdrop:hover .navdrop-menu, .navpill .navdrop:focus-within .navdrop-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); transition-delay: 0s; }
.navpill .navdrop-menu a { padding: 9px 12px; border-radius: 9px; font-size: 0.82rem; white-space: normal; line-height: 1.32; }
.mobile-menu a.sub { padding-left: 18px; font-size: 0.88rem; }
@media (max-width: 900px) { .navpill .navdrop-menu { display: none; } }

.fee-principles h3{margin:0;}

/* ---------- reveal safety net (added 2026-08-21) ----------
   Reveal animations are driven by JS. If scripting is unavailable the
   animated blocks must never stay hidden. A timeout in site.js covers
   the case where the observer runs but never fires. */
@media (scripting: none) {
  .rise, .reveal, .stagger > *, .page.active { opacity: 1 !important; transform: none !important; }
}