/* ============================================================
   HIGHBROOK CAPITAL PARTNERS — DESIGN SYSTEM
   v 2.0 · Hunter palette · Two-tone (dark hero, cream body)
   ============================================================ */

:root {
  /* Hunter / Pine palette */
  --hunter:         #1f3a2e;
  --hunter-deep:    #14271f;
  --hunter-darker:  #0d1c16;
  --hunter-mid:     #2a4a3a;

  --cream:          #fefdf9;
  --cream-2:        #f8f4ec;
  --cream-rule:     #e8e1cf;

  --gold:           #b08a3d;
  --gold-soft:      #c9a96a;

  /* Semantic tokens (default = DARK) */
  --bg:             var(--hunter-deep);
  --bg-2:           var(--hunter-darker);
  --ink:            #ece7dc;
  --ink-dim:        #a8b0a4;
  --ink-faint:      #6a766a;
  --rule:           #2c3e34;
  --rule-strong:    #3d4f44;
  --accent:         var(--gold-soft);
  --accent-dim:     #8a7647;

  --serif: 'Fraunces', 'Times New Roman', serif;
  --sans: 'Inter Tight', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

.scope-light {
  --bg:          var(--cream);
  --bg-2:        var(--cream-2);
  --ink:         #14271f;
  --ink-dim:     #4d5d52;
  --ink-faint:   #8a8676;
  --rule:        var(--cream-rule);
  --rule-strong: #b8ab8e;
  --accent:      var(--gold);
  --accent-dim:  #856730;
  background:    var(--bg);
  color:         var(--ink);
}

/* ---------- RESET ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  background: var(--hunter-deep);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 300;
  line-height: 1.55;
  overflow-x: hidden;
  position: relative;
}

/* Film-grain overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- READOUTS ---------- */
.readout {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.readout-accent { color: var(--accent); }

/* ---------- NAV ---------- */
nav.top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 22px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(20,39,31,.88), rgba(20,39,31,.45));
  border-bottom: 1px solid transparent;
  transition: background .5s ease, border-color .5s ease, color .5s ease;
  color: #ece7dc;
}
nav.top.scrolled { border-bottom-color: rgba(255,255,255,.08); }
nav.top.over-light {
  background: linear-gradient(180deg, rgba(254, 253, 249,.92), rgba(254, 253, 249,.55));
  color: var(--hunter-deep);
  border-bottom-color: rgba(20,39,31,.08);
}
nav.top.over-light .nav-links a { color: rgba(20,39,31,.6); }
nav.top.over-light .nav-links a:hover { color: var(--hunter-deep); }
nav.top.over-light .nav-meta { color: rgba(20,39,31,.45); }
nav.top.over-light .brand em { color: var(--gold); }
nav.top.over-light .nav-links a.active { color: var(--hunter-deep); }
nav.top.over-light .nav-links a.active::after { width: 100%; background: var(--gold); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

/* Seal mark — both variants exist in markup; CSS toggles which is visible
   based on nav scope (dark hunter vs light cream). Default state = dark scope. */
.brand-seal {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  transition: width .55s cubic-bezier(.4, 0, .2, 1),
              height .55s cubic-bezier(.4, 0, .2, 1),
              opacity .35s ease;
}

/* At default (dark hunter) scope: show reverse (cream), hide dark */
.brand-seal-dark  { display: none; }     /* hunter stroke — for light bg */
.brand-seal-light { display: inline-block; } /* cream stroke — for dark bg */

/* When nav is over a light surface, swap them */
nav.top.over-light .brand-seal-dark  { display: inline-block; }
nav.top.over-light .brand-seal-light { display: none; }

/* The wordmark text */
.brand-text {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: .04em;
  white-space: nowrap;
  display: inline-block;
  transition: opacity .45s ease, max-width .55s cubic-bezier(.4, 0, .2, 1),
              margin .55s cubic-bezier(.4, 0, .2, 1), transform .45s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  max-width: 280px;
}

/* When scrolled, hide the text and let the seal carry the brand alone */
nav.top.scrolled .brand-text {
  opacity: 0;
  max-width: 0;
  margin-left: -12px;
  transform: translateX(-8px);
  pointer-events: none;
}
.brand-text em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold-soft);
  transition: color .5s ease;
}
nav.top.over-light .brand-text em { color: var(--gold); }

/* Brand period — the italic gold "." mark after Highbrook Capital */
.brand-text .brand-period {
  display: inline-block;
  width: .22em;
  height: .22em;
  border-radius: 50%;
  background: var(--gold);
  vertical-align: baseline;
  margin-left: .12em;
  text-indent: -9999px;
  overflow: hidden;
}
nav.top.over-light .brand-text .brand-period { background: var(--gold); }

/* SCROLLED STATE: hide the text, enlarge the seal */
nav.top.scrolled .brand-seal {
  width: 48px;
  height: 48px;
}
nav.top.scrolled .brand-text {
  opacity: 0;
  max-width: 0;
  margin-left: -12px; /* pull the (now-hidden) text in to collapse the gap */
  transform: translateX(-8px);
  pointer-events: none;
}

.nav-links {
  display: flex;
  gap: 38px;
  list-style: none;
}
.nav-links a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(254, 253, 249,.65);
  position: relative;
  transition: color .3s ease;
}
.nav-links a:hover, .nav-links a.active { color: #ece7dc; }
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0;
  width: 0; height: 1px;
  background: var(--gold-soft);
  transition: width .35s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

.nav-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(254, 253, 249,.4);
  transition: color .5s ease;
}

/* ---------- LAYOUT ---------- */
section {
  padding: 140px 40px;
  position: relative;
  background: var(--bg);
  color: var(--ink);
}
.wrap { max-width: 1280px; margin: 0 auto; }
.wrap-narrow { max-width: 880px; margin: 0 auto; }

.section-marker {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 18px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--rule);
}
.section-marker .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--accent);
  font-weight: 300;
}

/* ---------- HERO (HOME) ---------- */
.hero {
  min-height: 100vh;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: var(--hunter-deep);
  color: #ece7dc;
}
.hero-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 35%, rgba(176,138,61,.10), transparent 55%),
    radial-gradient(ellipse at 20% 85%, rgba(42,74,58,.5), transparent 50%);
  z-index: 1;
}
.hero-stage svg {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 140%;
  height: 140%;
  opacity: .09;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.55) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  padding-top: 80px;
  padding-bottom: 40px; /* scroll-cue lives in this area; hero-bottom is below */
}
.hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 80px;
  opacity: 0;
  animation: rise 1.2s .3s ease forwards;
}
.hero-meta-left { display: flex; gap: 28px; }
/* Home hero — match left-side readouts to the editorial mark font.
   Stays italic Fraunces for typographic consistency with the right-side mark. */
.hero .readout { color: rgba(254, 253, 249,.4); }
.hero .readout-accent { color: var(--gold-soft); }

.hero-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(42px, 7vw, 108px);
  line-height: 1.05;
  letter-spacing: -.025em;
  margin-top: 80px;
  margin-bottom: 40px;
  color: #fefdf9;
}
.hero-title .line { display: block; overflow: visible; }
.hero-title .line span {
  display: inline-block;
  transform: translateY(110%);
  animation: rise-up 1.2s ease forwards;
}
.hero-title .line:nth-child(1) span { animation-delay: .5s; }
.hero-title .line:nth-child(2) span { animation-delay: .65s; }
.hero-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold-soft);
}
.hero-sub {
  max-width: 540px;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(254, 253, 249,.7);
  margin-top: 50px;
  margin-bottom: 60px;
  opacity: 0;
  animation: rise 1.2s 1s ease forwards;
}
.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 40px;
  opacity: 0;
  animation: rise 1.2s 1.15s ease forwards;
}
.hero-bottom {
  position: absolute;
  bottom: 32px; left: 40px; right: 40px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 2;
  opacity: 0;
  animation: rise 1.2s 1.3s ease forwards;
}

/* ---------- INTERIOR PAGE HEROES ---------- */
.page-hero {
  padding: 200px 40px 120px;
  background: var(--hunter-deep);
  color: #fefdf9;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 80% 0%, rgba(176,138,61,.10), transparent 60%);
}
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 60px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(254, 253, 249,.15);
}
.page-hero-meta .readout { color: rgba(254, 253, 249,.4); }
.page-hero-meta .readout-accent { color: var(--gold-soft); }

/* Page corner mark — set in mono caps to match the right-side readout.
   Both sides of the page-hero-meta strip now read in the same technical
   typographic register. */
.editorial-mark {
  font-family: var(--mono);
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(254, 253, 249,.4);
}
.editorial-mark em { font-style: normal; }
.editorial-mark .accent { color: var(--gold-soft); }
.scope-light .editorial-mark { color: var(--ink-faint); }
/* On dark page-hero, keep the cream tone */
.page-hero .editorial-mark { color: rgba(254, 253, 249,.4); }

.page-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(54px, 9vw, 130px);
  line-height: 1.05;
  letter-spacing: -.025em;
  margin-bottom: 40px;
  color: #fefdf9;
}
.page-title em { font-style: italic; color: var(--gold-soft); }

.page-lede {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.4;
  color: rgba(254, 253, 249,.78);
  max-width: 720px;
  letter-spacing: -.005em;
}

/* ---------- CTA BUTTON ---------- */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 26px 16px 28px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: all .35s ease;
  background: transparent;
  cursor: pointer;
}
.hero .cta, .page-hero .cta, .contact-section .cta {
  border-color: rgba(254, 253, 249,.25);
  color: #ece7dc;
}
.hero .cta:hover, .page-hero .cta:hover, .contact-section .cta:hover {
  border-color: var(--gold-soft);
  background: rgba(201,169,106,.08);
  color: var(--gold-soft);
}
.scope-light .cta {
  border-color: var(--hunter);
  color: var(--hunter);
}
.scope-light .cta:hover {
  background: var(--hunter);
  color: var(--cream);
}
.cta .arrow { display: inline-block; transition: transform .35s ease; }
.cta:hover .arrow { transform: translateX(4px); }

/* ---------- Scroll cue (v2.9 — centered below CTA, two hairlines flanking) ---------- */
.scroll-cue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 70px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(254, 253, 249,.4);
  text-decoration: none;
  opacity: 0;
  animation: rise 1.2s 1.4s ease forwards;
  transition: color .35s ease;
  width: max-content;
}
.scroll-cue:hover { color: var(--gold-soft); }

.scroll-cue .line {
  display: inline-block;
  width: 50px;
  height: 1px;
  background: rgba(254, 253, 249,.18);
  position: relative;
  overflow: hidden;
}
.scroll-cue .line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold-soft);
  animation: scroll-slide 2.6s ease-in-out infinite;
}
.scroll-cue:hover .line { background: rgba(201,169,106,.3); }

@keyframes scroll-slide {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

@media (max-width: 900px) {
  .scroll-cue { margin-top: 50px; gap: 12px; }
  .scroll-cue .line { width: 36px; }
}

@keyframes rise-up { to { transform: translateY(0); } }
@keyframes rise { to { opacity: 1; } }
/* ---------- QUOTE ---------- */
.quote-section {
  padding: 180px 40px;
  background: var(--hunter);
  color: #fefdf9;
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
/* Cream-scope variant — for pages where the quote is followed by another hunter section
   and we need a cream break for rhythm. */
.quote-section.scope-light {
  background: var(--cream);
  color: var(--hunter-deep);
  border-top: 1px solid var(--cream-rule);
  border-bottom: 1px solid var(--cream-rule);
}
.quote-section.scope-light .quote-text { color: var(--hunter-deep); }
.quote-section.scope-light .quote-text em { color: var(--gold); }
.quote-section.scope-light .quote-attr { color: rgba(20,39,31,.6); }
.quote-section.scope-light .quote-attr em { color: rgba(20,39,31,.8); }
.quote-block { max-width: 1100px; margin: 0 auto; text-align: center; }
/* .quote-mark removed in v2.3 — quotes are now inline in .quote-text */
.quote-text {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.3;
  letter-spacing: -.012em;
  color: #fefdf9;
  margin-bottom: 60px;
  /* Hanging-punctuation feel: pull the opening quote a touch left optically */
  text-indent: -0.4em;
}
.quote-text em { font-style: italic; color: var(--gold-soft); }
.quote-attr {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(254, 253, 249,.55);
}
.quote-attr .dot { color: var(--gold-soft); }



/* ---------- Quote attribution rule (v2.3) ---------- */
.quote-attr {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(254, 253, 249,.55);
}
.quote-attr em {
  font-family: var(--serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: -.005em;
  font-size: 14px;
  color: rgba(254, 253, 249,.75);
}
.quote-attr .quote-rule {
  display: inline-block;
  width: 40px;
  height: 1px;
  background: var(--gold-soft);
  opacity: .6;
}

/* ---------- WORDMARK BAND v2.5 ---------- */
.wordmark-band {
  padding: 50px 0;
  overflow: hidden;
  background: var(--cream);
  border-bottom: 1px solid var(--cream-rule);
  position: relative;
}
.wordmark-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1600px;
  margin: 0 auto;
  will-change: transform;
}

/* --- Frame construction lines (top + bottom rules) --- */
.wordmark-svg .frame-line {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  transition: stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1);
}
.wordmark-band.in-view .wordmark-svg .frame-line { stroke-dashoffset: 0; }
.wordmark-band.in-view .wordmark-svg .frame-top-l,
.wordmark-band.in-view .wordmark-svg .frame-bot-l { transition-delay: .1s; }
.wordmark-band.in-view .wordmark-svg .frame-top-r,
.wordmark-band.in-view .wordmark-svg .frame-bot-r { transition-delay: .15s; }

/* --- Corner registration ticks (small ticks where the frame lines end) --- */
.wordmark-svg .frame-ticks { transition: opacity .6s ease; }
.wordmark-band.in-view .wordmark-svg .frame-ticks {
  opacity: .7;
  transition-delay: 1.0s;
}

/* --- Meta strip text (HCP · WORDMARK · PL. I  and  SCALE 1:1 · MMXXVI) --- */
.wordmark-svg .frame-meta { transition: opacity .6s ease; }
.wordmark-band.in-view .wordmark-svg .frame-meta {
  opacity: .55;
  transition-delay: 1.2s;
}

/* --- Outline wordmark draws itself in --- */
.wordmark-svg .wm-outline {
  stroke-dasharray: 4000;
  stroke-dashoffset: 4000;
  transition: stroke-dashoffset 2.4s cubic-bezier(.4,0,.2,1) .4s;
}
.wordmark-band.in-view .wordmark-svg .wm-outline {
  stroke-dashoffset: 0;
}

/* --- Filled italic "oo" pours in after the outline completes --- */
.wordmark-svg .wm-oo-fill {
  clip-path: inset(100% 0 0 0);
  -webkit-clip-path: inset(100% 0 0 0);
  transition: clip-path 1.4s cubic-bezier(.4,0,.2,1) 2.4s,
              -webkit-clip-path 1.4s cubic-bezier(.4,0,.2,1) 2.4s;
}
.wordmark-band.in-view .wordmark-svg .wm-oo-fill {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}

/* Reduced motion: snap to final state */
@media (prefers-reduced-motion: reduce) {
  .wordmark-svg .frame-line { stroke-dasharray: none; stroke-dashoffset: 0; }
  .wordmark-svg .frame-ticks { opacity: .7; }
  .wordmark-svg .frame-meta { opacity: .55; }
  .wordmark-svg .wm-outline { stroke-dasharray: none; stroke-dashoffset: 0; }
  .wordmark-svg .wm-oo-fill {
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
  }
}

/* ---------- SECTION INTROS ---------- */
.section-intro { max-width: 720px; margin-bottom: 100px; }
.section-intro h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: 32px;
  color: var(--ink);
}
.section-intro h2 em { font-style: italic; color: var(--gold-soft); }
.scope-light .section-intro h2 em { color: var(--gold-soft); }
section:not(.scope-light) .section-intro h2 em { color: var(--gold-soft); }
.section-intro p {
  font-size: 17px;
  color: var(--ink-dim);
  line-height: 1.6;
  max-width: 580px;
}

/* ---------- SERVICES GRID ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
}
.service {
  padding: 60px 50px;
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background .55s cubic-bezier(.4, 0, .2, 1);
  background: var(--bg);
}
.service:nth-child(2n) { border-right: none; }

/* Hover: invert to dark hunter card */
.service:hover {
  background: var(--hunter-deep);
}

/* Gold accent rail draws across the top on hover */
.service::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width .6s cubic-bezier(.2, .8, .2, 1);
}
.service:hover::before {
  width: 100%;
}

/* Service number */
.service-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--accent);
  margin-bottom: 30px;
  transition: color .55s cubic-bezier(.4, 0, .2, 1);
}
.service:hover .service-num {
  color: var(--gold-soft);
}

/* Service title */
.service h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
  margin-bottom: 22px;
  letter-spacing: -.01em;
  color: var(--hunter-deep);
  transition: color .55s cubic-bezier(.4, 0, .2, 1);
}
.scope-light .service h3 { color: var(--hunter-deep); }
.service:hover h3,
.scope-light .service:hover h3 {
  color: #fefdf9;
}

/* Service paragraph */
.service p {
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.65;
  transition: color .55s cubic-bezier(.4, 0, .2, 1);
}
.service:hover p {
  color: rgba(254, 253, 249, .75);
}

/* Italics inside H3 inherit their color from the H3 transition,
   but the em color overrides with gold-soft. Override gold-soft to stay
   gold-soft (consistent in both states) — no change needed. */
.service h3 em {
  font-style: italic;
  color: var(--gold);
  transition: color .55s cubic-bezier(.4, 0, .2, 1);
}
.service:hover h3 em {
  color: var(--gold-soft);
}

/* ---------- DEEP-DIVE SERVICE BLOCKS (capabilities page) ---------- */
.capability {
  padding: 100px 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}
.capability:last-child { border-bottom: none; }
.capability-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--accent);
  margin-bottom: 16px;
}
.capability h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--hunter-deep);
}
.capability h3 em { font-style: italic; color: var(--gold-soft); }
.capability-body p {
  font-size: 16px;
  color: var(--ink-dim);
  line-height: 1.7;
  margin-bottom: 22px;
}
.capability-list {
  list-style: none;
  margin-top: 30px;
  border-top: 1px solid var(--rule);
}
.capability-list li {
  display: flex;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
  color: var(--ink);
  align-items: baseline;
}
.capability-list .marker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--accent);
  min-width: 28px;
}

/* ---------- VALUES ---------- */
.values-section {
  background: var(--cream-2);
  border-top: 1px solid var(--cream-rule);
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 80px;
}
.value {
  padding-top: 32px;
  border-top: 1px solid var(--rule-strong);
  position: relative;
}
.value-mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--gold);
  position: absolute;
  top: -10px;
  background: var(--cream-2);
  padding-right: 12px;
}
.value h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  margin-top: 14px;
  margin-bottom: 20px;
  letter-spacing: -.01em;
  color: var(--hunter-deep);
}
.value p { color: var(--ink-dim); font-size: 14px; line-height: 1.7; }

/* ---------- TEAM (about page) ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 50px;
  margin-top: 80px;
}
.team-card {
  border-top: 1px solid var(--rule);
  padding-top: 32px;
  position: relative;
}
.team-portrait {
  aspect-ratio: 4/5;
  width: 100%;
  background: var(--cream-2);
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
.team-portrait img {
  /* Anchor the crop to the top so heads stay in frame on portrait-orientation photos */
  object-position: center top;
}
.team-portrait svg {
  width: 100%; height: 100%; display: block;
}
.team-portrait-meta {
  position: absolute;
  top: 14px; left: 14px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .25em;
  color: rgba(20,39,31,.45);
  text-transform: uppercase;
  z-index: 2;
}
.team-portrait-meta-r {
  position: absolute;
  top: 14px; right: 14px;
  left: auto;
  text-align: right;
}
.team-card h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -.01em;
  color: var(--hunter-deep);
  margin-bottom: 6px;
}
.team-card h4 em { font-style: italic; color: var(--gold); }
.team-role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.team-card p {
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.7;
}

/* ---------- PROCESS TIMELINE ---------- */
.process-timeline {
  margin-top: 60px;
  border-top: 1px solid var(--rule);
}
.process-step {
  display: grid;
  grid-template-columns: 80px 1fr 2fr;
  gap: 60px;
  padding: 60px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
  transition: padding-left .4s ease;
}
.process-step:hover { padding-left: 16px; }
.process-step .step-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 48px;
  color: var(--accent);
  line-height: 1;
}
.process-step h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--hunter-deep);
}
.process-step h3 em { font-style: italic; color: var(--gold-soft); }
.process-step .step-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 14px;
}
.process-step p {
  font-size: 15px;
  color: var(--ink-dim);
  line-height: 1.7;
  margin-bottom: 16px;
}
.process-step p:last-child { margin-bottom: 0; }

/* ---------- SERVE LIST ---------- */
.serve-section {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 100px;
  align-items: center;
}
.serve-left h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: 32px;
}
.serve-left h2 em { font-style: italic; color: var(--gold-soft); }
.serve-left p {
  color: var(--ink-dim);
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 50px;
  max-width: 480px;
}
.serve-list { list-style: none; border-top: 1px solid var(--rule); }
.serve-list li {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  color: var(--hunter-deep);
  transition: padding .35s ease, color .35s ease;
  cursor: default;
}
.serve-list li:hover { padding-left: 14px; color: var(--hunter); }
.serve-list li .idx {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--accent);
  min-width: 38px;
}

.serve-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 760px;
}
.architecture {
  width: 100%;
  max-width: 420px;
  height: 760px;
  position: relative;
}
.architecture svg { width: 100%; height: 100%; overflow: visible; }
.architecture .arch-meta {
  position: absolute;
  bottom: -30px; left: 0;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.architecture .arch-meta-r {
  position: absolute;
  bottom: -30px; right: 0;
  left: auto;
}
.architecture .arch-meta-center {
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}

/* Make sure the arch-meta-center isn't trying to also be position-anchored as the older base style */
.architecture .arch-meta-center.arch-meta {
  /* Override the base .arch-meta left:0 positioning */
  left: 50%;
  right: auto;
}

/* ---------- CONTACT ---------- */
.contact-section {
  background: var(--hunter);
  color: #fefdf9;
  border-top: 1px solid rgba(0,0,0,.2);
}
.contact-section .section-marker { border-bottom-color: rgba(254, 253, 249,.12); }
.contact-section .readout { color: rgba(254, 253, 249,.45); }
.contact-section .readout-accent { color: var(--gold-soft); }

/* Cream variant — used on about.html to break the hunter run between
   the Graham quote and the contact CTA. */
.contact-section.scope-light {
  background: var(--cream);
  color: var(--hunter-deep);
  border-top: 1px solid var(--cream-rule);
}
.contact-section.scope-light .section-marker { border-bottom-color: rgba(20,39,31,.12); }
.contact-section.scope-light .readout { color: rgba(20,39,31,.55); }
.contact-section.scope-light .readout-accent { color: var(--gold); }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 100px;
  margin-top: 80px;
}
.contact-left h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: 36px;
  color: #fefdf9;
}
.contact-left h2 em { font-style: italic; color: var(--gold-soft); }
.contact-left p {
  color: rgba(254, 253, 249,.7);
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 50px;
  max-width: 420px;
}
.contact-info {
  border-top: 1px solid rgba(254, 253, 249,.12);
  padding-top: 30px;
}
.contact-info-row {
  display: flex;
  gap: 30px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(254, 253, 249,.12);
  align-items: baseline;
}
.contact-info-row .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(254, 253, 249,.45);
  min-width: 80px;
}
.contact-info-row .val {
  font-family: var(--serif);
  font-size: 17px;
  color: #fefdf9;
  transition: color .3s ease;
}
.contact-info-row .val:hover { color: var(--gold-soft); }

.contact-form { display: grid; gap: 0; }
.hp-field {
  /* Honeypot — visually hidden from humans; bots that auto-fill all fields will fill this,
     and Netlify drops those submissions. Don't use display:none — some bots check for it. */
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- THANK-YOU BANNER (post-form-submit) ---------- */
.thank-you-banner {
  /* Hidden until :target activates it (#thank-you in URL) */
  display: none;
  position: fixed;
  top: 88px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  max-width: 560px;
  width: calc(100% - 40px);
}
.thank-you-banner:target { display: block; animation: thank-you-in .6s ease both, thank-you-out .6s ease 8s both; }
.thank-you-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: var(--hunter-deep);
  color: var(--ink);
  border: 1px solid var(--gold);
  border-radius: 2px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.thank-you-mark {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--hunter-deep);
  background: var(--gold);
  border-radius: 50%;
}
.thank-you-copy { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.thank-you-copy strong {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  color: var(--ink);
}
.thank-you-copy span {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-dim);
}
.thank-you-dismiss {
  flex-shrink: 0;
  color: var(--ink-faint);
  font-size: 20px;
  text-decoration: none;
  padding: 4px 8px;
}
.thank-you-dismiss:hover { color: var(--gold); }
@keyframes thank-you-in {
  from { opacity: 0; transform: translate(-50%, -16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes thank-you-out {
  to { opacity: 0; visibility: hidden; }
}
.field {
  border-bottom: 1px solid rgba(254, 253, 249,.15);
  padding: 22px 0;
}
.field label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(254, 253, 249,.45);
  margin-bottom: 12px;
}
.field input, .field textarea, .field select {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #fefdf9;
  font-family: var(--serif);
  font-size: 18px;
  padding: 0;
  resize: none;
}
.field input::placeholder, .field textarea::placeholder {
  color: rgba(254, 253, 249,.35);
  font-family: var(--serif);
  font-style: italic;
}
.field:focus-within { border-bottom-color: var(--gold-soft); transition: border-color .3s ease; }
.field textarea { min-height: 90px; line-height: 1.5; }
.field select option { background: var(--hunter-deep); color: #fefdf9; }

.form-disclosure {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: rgba(254, 253, 249,.45);
  line-height: 1.7;
  margin: 30px 0;
  text-transform: uppercase;
}
.form-disclosure a { color: var(--gold-soft); }

.contact-section .cta { margin-top: 12px; align-self: start; }

/* ---------- LEGAL / PROSE PAGES ---------- */
.legal-body {
  padding: 100px 40px 140px;
  background: var(--cream);
  color: var(--hunter-deep);
}
.legal-body .wrap-narrow { max-width: 780px; margin: 0 auto; }
.legal-body h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -.01em;
  margin: 70px 0 24px;
  color: var(--hunter-deep);
  padding-top: 30px;
  border-top: 1px solid var(--cream-rule);
}
.legal-body h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.legal-body h2 em { font-style: italic; color: var(--gold); }
.legal-body h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  margin: 40px 0 14px;
  color: var(--hunter-deep);
}
.legal-body p, .legal-body li {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.75;
  color: #2a3d33;
  margin-bottom: 16px;
}
.legal-body ul, .legal-body ol {
  margin: 0 0 20px 22px;
}
.legal-body a {
  color: var(--gold);
  border-bottom: 1px solid rgba(176,138,61,.4);
  transition: border-color .3s ease;
}
.legal-body a:hover { border-bottom-color: var(--gold); }
.legal-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--cream-rule);
  margin-bottom: 40px;
  display: flex;
  justify-content: space-between;
}
.legal-meta .dot { color: var(--gold); }

/* ---------- DISCLOSURES HUB ---------- */
.disclosure-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: 60px;
  border-top: 1px solid var(--rule);
}
.disclosure-card {
  padding: 40px 40px 36px;
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  transition: background .4s ease;
  display: flex;
  flex-direction: column;
}
.disclosure-card:nth-child(2n) { border-right: none; }
.disclosure-card:hover { background: var(--cream-2); }
.disclosure-card .doc-code {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--accent);
  margin-bottom: 14px;
}
.disclosure-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -.01em;
  color: var(--hunter-deep);
  margin-bottom: 14px;
}
.disclosure-card p {
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.65;
  margin-bottom: 24px;
  flex: 1;
}
.disclosure-card .doc-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--hunter);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  transition: color .3s ease, gap .3s ease;
}
.disclosure-card .doc-link:hover { color: var(--gold); gap: 14px; }

/* ---------- SERIES LANDING (Insights & Briefs) ---------- */
/* Two-zone landing: The Highbrook Market Brief (left) + Field Studies (right).
   Each zone has its own masthead, featured slot, and archive grid. */

.series-section { padding: 80px 0 140px; }

/* --- The two-column grid that holds both zones --- */
.series-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-bottom: 80px;
}

/* --- Each individual zone (Briefs or Field Studies) --- */
.series-zone {
  display: flex;
  flex-direction: column;
}

/* Zone header (masthead + intro) */
.series-zone-header {
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--rule);
}
.series-zone-masthead {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}
.series-masthead-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--hunter-deep);
}
.series-masthead-name em {
  font-style: italic;
  color: var(--hunter);
}
.series-masthead-cadence {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.series-zone-intro {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-dim);
  margin: 0;
  max-width: 480px;
}

/* --- Featured (latest) card in each zone --- */
.series-featured {
  background: var(--cream-2);
  border: 1px solid var(--rule);
  margin-bottom: 40px;
  transition: border-color .35s ease;
}
.series-featured:hover { border-color: var(--hunter); }
.series-featured-inner {
  display: block;
  text-decoration: none;
  color: inherit;
}
.series-featured-visual {
  aspect-ratio: 5 / 3;
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.series-featured-visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.series-placeholder-svg {
  width: 100%; height: 100%;
  display: block;
}
.series-featured-body {
  padding: 28px 28px 32px;
}
.series-card-meta {
  margin-bottom: 14px;
}
.series-featured-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--hunter-deep);
  margin: 0 0 14px 0;
}
.series-featured-title em {
  font-style: italic;
  color: var(--hunter);
}
.series-featured-excerpt {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-dim);
  margin: 0 0 22px 0;
}
.series-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.series-card-tags {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.series-card-cta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--hunter);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap .3s ease;
}
.series-card-cta .arrow {
  color: var(--gold);
  transition: transform .3s ease;
}
.series-featured:hover .series-card-cta { gap: 12px; }
.series-featured:hover .series-card-cta .arrow { transform: translateX(2px); }

/* --- Visual differentiation: each zone gets a subtle tonal cue --- */
/* Briefs lean slightly warmer (gold-tinted accent); Studies lean architectural */
.series-featured-brief .series-featured-visual { background: var(--cream-2); }
.series-featured-study .series-featured-visual { background: var(--cream); }

/* --- Archive marker (small header above each zone's archive grid) --- */
.series-archive-marker {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.series-archive-count {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink-faint);
}
.series-archive-count em { font-style: italic; }

/* --- Archive grid (within each zone) --- */
.series-archive-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.series-card {
  background: var(--cream);
  border: 1px solid var(--rule);
  transition: border-color .3s ease;
  display: flex;
  flex-direction: column;
}
.series-card:hover { border-color: var(--hunter); }
.series-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.series-card-visual {
  aspect-ratio: 16 / 10;
  background: var(--cream-2);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.series-card-visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.series-card-inner {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.series-card-date {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.series-card-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.3;
  color: var(--hunter-deep);
  margin: 0 0 10px 0;
}
.series-card-title em { font-style: italic; color: var(--hunter); }
.series-card-excerpt {
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0;
  flex: 1;
}

/* Empty state when no past editions exist */
.series-archive-empty {
  grid-column: 1 / -1;
  padding: 28px;
  background: var(--cream-2);
  border: 1px solid var(--rule);
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-faint);
  text-align: center;
}

/* --- Subscribe card (full-width, sits below both zones) --- */
.series-subscribe {
  margin-top: 40px;
  background: var(--hunter-deep);
  color: var(--cream);
  padding: 0;
}
.series-subscribe-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  align-items: center;
  gap: 40px;
  padding: 50px 50px;
}
.series-subscribe-copy { display: flex; flex-direction: column; gap: 14px; }
.series-subscribe-copy .readout { color: var(--gold-soft); }
.series-subscribe-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  color: var(--cream);
  margin: 0;
}
.series-subscribe-title em {
  font-style: italic;
  color: var(--gold-soft);
}
.series-subscribe-copy p {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(254, 253, 249,.7);
  margin: 0;
  max-width: 560px;
}
.series-subscribe-cta {
  justify-self: end;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
  padding: 16px 28px;
  border: 1px solid var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background .3s ease, gap .3s ease;
}
.series-subscribe-cta .arrow { color: var(--gold); transition: transform .3s ease; }
.series-subscribe-cta:hover {
  background: var(--gold);
  color: var(--hunter-deep);
  gap: 14px;
}
.series-subscribe-cta:hover .arrow {
  color: var(--hunter-deep);
  transform: translateX(2px);
}

/* --- Responsive: stack vertically on tablet and below --- */
@media (max-width: 980px) {
  .series-grid {
    grid-template-columns: 1fr;
    gap: 80px;
  }
  .series-archive-grid {
    grid-template-columns: 1fr 1fr;
  }
  .series-subscribe-inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 40px;
  }
  .series-subscribe-cta { justify-self: start; }
}
@media (max-width: 640px) {
  .series-archive-grid { grid-template-columns: 1fr; }
  .series-featured-title { font-size: 22px; }
  .series-masthead-name { font-size: 24px; }
  .series-subscribe-inner { padding: 32px 22px; }
  .series-subscribe-title { font-size: 22px; }
}

/* ---------- INSIGHTS — individual post page ---------- */
/* Used by insights/{slug}.html — full article layout. */

.insight-post {
  padding: 80px 40px 120px;
  background: var(--cream);
  color: var(--hunter-deep);
}
.insight-post-wrap { max-width: 760px; margin: 0 auto; }
.insight-post-back {
  display: inline-block;
  margin-bottom: 50px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hunter);
  text-decoration: none;
  border-bottom: 1px solid rgba(31,58,46,.3);
  padding-bottom: 4px;
}
.insight-post-back .arrow { color: var(--gold); }

/* Series masthead banner — sits above the meta row on each post page.
   "The Highbrook Market Brief · No. 001 · May 2026" / "Highbrook Field Studies · Volume I · December 2026" */
.insight-post-masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--rule);
}
.insight-post-masthead-name {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -.005em;
  color: var(--hunter-deep);
}
.insight-post-masthead-name em {
  font-style: italic;
  color: var(--hunter);
}
.insight-post-masthead-edition {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.insight-post-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--rule);
}
.insight-post-meta .readout { color: var(--ink-faint); }
.insight-post-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--hunter-deep);
  margin: 0 0 28px 0;
}
.insight-post-title em { font-style: italic; color: var(--hunter); }
.insight-post-dek {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink-dim);
  margin: 0 0 48px 0;
  max-width: 640px;
}
.insight-post-byline {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 60px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--rule);
}
.insight-post-byline-photo {
  width: 48px; height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--cream-2);
}
.insight-post-byline-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.insight-post-byline-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.insight-post-byline-name {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--hunter-deep);
}
.insight-post-byline-name em { font-style: italic; }
.insight-post-byline-role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Article body — strict typography for uniform formatting */
.insight-post-body { font-family: var(--serif); font-size: 18px; line-height: 1.75; color: var(--hunter-deep); }
.insight-post-body > p { margin: 0 0 22px 0; }
.insight-post-body > p:first-child::first-letter {
  /* Drop cap on opening paragraph — restrained */
  font-family: var(--serif);
  font-style: italic;
  font-size: 64px;
  float: left;
  line-height: .85;
  padding: 4px 12px 0 0;
  color: var(--gold);
}
.insight-post-body > h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  margin: 60px 0 20px 0;
  color: var(--hunter-deep);
  letter-spacing: -.01em;
}
.insight-post-body > h2 em { font-style: italic; color: var(--hunter); }
.insight-post-body > h3 {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 48px 0 12px 0;
}
.insight-post-body > blockquote {
  border-left: 3px solid var(--gold);
  padding: 8px 0 8px 28px;
  margin: 36px 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--hunter);
}
.insight-post-body > ul, .insight-post-body > ol {
  margin: 0 0 22px 0;
  padding-left: 24px;
}
.insight-post-body > ul > li, .insight-post-body > ol > li {
  margin-bottom: 8px;
  padding-left: 8px;
}
.insight-post-body a {
  color: var(--hunter);
  border-bottom: 1px solid rgba(31,58,46,.35);
  text-decoration: none;
  transition: border-color .2s ease;
}
.insight-post-body a:hover { border-color: var(--hunter); }
.insight-post-body strong { color: var(--hunter-deep); font-weight: 500; }
.insight-post-body em { font-style: italic; }

/* Images and charts — strict uniform handling */
.insight-figure {
  margin: 48px 0;
  background: #ffffff;
  padding: 24px;
  border: 1px solid var(--cream-rule);
}
.insight-figure img {
  width: 100%;
  height: auto;
  display: block;
}
.insight-figure table {
  background: #ffffff;
}
.insight-figure-caption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--cream-rule);
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.insight-figure-caption .source { font-style: italic; text-transform: none; letter-spacing: 0; color: var(--ink-faint); font-family: var(--serif); font-size: 12px; }

/* Pull-quote block */
.insight-pullquote {
  margin: 60px -40px;
  padding: 50px 40px;
  background: var(--cream-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  line-height: 1.35;
  text-align: center;
  color: var(--hunter);
}
.insight-pullquote::before, .insight-pullquote::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--gold);
  margin: 0 auto 24px;
}
.insight-pullquote::after { margin: 24px auto 0; }

/* Compliance footer — appears at bottom of every post */
.insight-post-footer {
  margin-top: 80px;
  padding-top: 36px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink-faint);
  letter-spacing: .02em;
}
.insight-post-footer p { margin: 0 0 12px 0; }
.insight-post-footer .compliance-mark {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

/* ---------- INSIGHTS — DUAL-ZONE LAYOUT (Briefs + Field Studies) ---------- */
/* Two side-by-side series zones on the landing page.
   Each zone has its own masthead, featured card, and archive list. */

.series-zones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-top: 20px;
}
.series-zone {
  display: flex;
  flex-direction: column;
}

/* Masthead — sits at the top of each zone, distinguishing the series */
.series-masthead {
  margin-bottom: 36px;
}
.series-masthead-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--hunter-deep);
}
.series-masthead-name em {
  font-style: italic;
  color: var(--hunter);
}
.series-masthead-tagline {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 14px;
}
.series-masthead-rule {
  width: 60px;
  height: 2px;
  background: var(--gold);
  margin-top: 18px;
}

/* Subtle accent variation per zone — Briefs lean gold, Studies lean hunter */
.series-zone-brief .series-masthead-rule { background: var(--gold); }
.series-zone-study .series-masthead-rule { background: var(--hunter); }

/* Featured card within a zone — the latest entry */
.series-featured {
  margin-bottom: 36px;
  border: 1px solid var(--rule);
  background: var(--cream-2);
  transition: border-color .3s ease;
}
.series-featured:hover { border-color: var(--hunter); }
.series-featured-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.series-featured-visual {
  aspect-ratio: 5 / 3;
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.series-featured-visual svg { width: 100%; height: 100%; display: block; }
.series-featured-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.series-featured-body { padding: 28px 28px 32px; }
.series-card-meta {
  margin-bottom: 16px;
}
.series-card-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.005em;
  color: var(--hunter-deep);
  margin: 0 0 14px 0;
}
.series-card-title em { font-style: italic; color: var(--hunter); }
.series-card-excerpt {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-dim);
  margin: 0 0 20px 0;
}
.series-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.series-card-tags {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}
.series-card-cta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--hunter);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap .3s ease;
}
.series-card-cta .arrow { color: var(--gold); }
.series-featured-link:hover .series-card-cta { gap: 12px; }

/* Archive — stacked row list beneath the featured card */
.series-archive-marker {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--rule);
}
.series-count {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-faint);
}
.series-archive {
  display: flex;
  flex-direction: column;
}
/* Each past brief/study is a row, not a card — compact for archive density */
.series-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  transition: background .2s ease;
}
.series-row:hover { background: rgba(31,58,46,.03); }
.series-row-link {
  display: contents;
  text-decoration: none;
  color: inherit;
}
.series-row-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.series-row-title {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.35;
  color: var(--hunter-deep);
  margin: 0;
}
.series-row-title em { font-style: italic; color: var(--hunter); }
.series-row-date {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* ---------- INSIGHTS responsive ---------- */
@media (max-width: 980px) {
  .insights-featured-inner { grid-template-columns: 1fr; gap: 32px; padding: 32px; }
  .insights-featured-title { font-size: 32px; }
  .insights-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .insight-post-title { font-size: 40px; }
  .insight-post-dek { font-size: 18px; }
  .insight-post-body { font-size: 17px; }
  .insight-pullquote { margin: 48px -20px; font-size: 22px; padding: 36px 24px; }

  /* Dual-zone: stack vertically on tablet */
  .series-zones { grid-template-columns: 1fr; gap: 80px; }
  .series-masthead-name { font-size: 30px; }
}
@media (max-width: 640px) {
  .insights-grid { grid-template-columns: 1fr; gap: 24px; }
  .insights-featured { margin-bottom: 60px; }
  .insights-featured-inner { padding: 28px 22px; }
  .insights-featured-inner::before { left: 22px; }
  .insights-featured-title { font-size: 26px; }
  .insights-filter { flex-direction: column; align-items: flex-start; }
  .insight-post { padding: 60px 22px 80px; }
  .insight-post-title { font-size: 32px; }
  .insight-post-body > p:first-child::first-letter { font-size: 52px; }

  /* Dual-zone: tighter spacing and stacked row layout */
  .series-zones { gap: 60px; }
  .series-masthead-name { font-size: 26px; }
  .series-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 0;
  }
  .series-row-date { order: -1; }
}

/* ---------- FOOTER ---------- */
footer {
  background: var(--hunter-darker);
  color: rgba(254, 253, 249,.7);
  padding: 80px 40px 40px;
  border-top: 1px solid rgba(0,0,0,.4);
}
.footer-top {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(254, 253, 249,.1);
}
.footer-brand {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 300;
  letter-spacing: -.01em;
  margin-bottom: 22px;
  color: #fefdf9;
}
.footer-brand em { font-style: italic; color: var(--gold-soft); }
.footer-tagline {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(254, 253, 249,.4);
}
.footer-tagline .dot { color: var(--gold-soft); }
.footer-col h5 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 22px;
  font-weight: 500;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 12px; }
.footer-col ul a {
  font-family: var(--serif);
  font-size: 15px;
  color: rgba(254, 253, 249,.65);
  transition: color .3s ease;
}
.footer-col ul a:hover { color: var(--gold-soft); }

.footer-legal {
  max-width: 1280px;
  margin: 40px auto 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  line-height: 1.8;
  color: rgba(254, 253, 249,.4);
  text-transform: uppercase;
}
.footer-bottom {
  max-width: 1280px;
  margin: 30px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  border-top: 1px solid rgba(254, 253, 249,.1);
}
.footer-bottom .small {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(254, 253, 249,.45);
}
.footer-bottom .small em { font-style: italic; color: var(--gold-soft); }
.footer-bottom .small .dot { color: var(--gold-soft); }

/* ---------- REVEAL ANIMATIONS ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s ease, transform 1s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; }
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(1) { transition-delay: .05s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: .15s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: .25s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: .35s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: .45s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: .55s; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: .65s; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: .75s; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  nav.top { padding: 18px 22px; }
  .nav-links { display: none; }
  .nav-meta { display: none; }
}
@media (max-width: 900px) {
  section { padding: 100px 22px; }
  .hero, .page-hero { padding-left: 22px; padding-right: 22px; }
  .page-hero { padding-top: 160px; padding-bottom: 80px; }
  .hero-bottom { left: 22px; right: 22px; bottom: 24px; }
  .services-grid { grid-template-columns: 1fr; }
  .service:nth-child(n) { border-right: none; }
  .service { padding: 40px 0; min-height: auto; }
  .capability { grid-template-columns: 1fr; gap: 32px; padding: 60px 0; }
  .values-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .team-grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .serve-section { grid-template-columns: 1fr; gap: 60px; }
  .serve-right { min-height: 400px; }
  .architecture {
    /* Match the SVG's 400:760 viewBox so the rendered grid fills the
       container width-to-edge instead of being height-limited inside a
       too-wide box. Fixes the off-center appearance on mobile where
       a 420px-wide container was rendering a ~253px-wide SVG. */
    height: auto;
    max-width: 320px;
    aspect-ratio: 400 / 760;
  }
  .contact-grid { grid-template-columns: 1fr; gap: 60px; }
  .process-step { grid-template-columns: 1fr; gap: 18px; padding: 40px 0; }
  .process-step .step-num { font-size: 36px; }
  .disclosure-grid { grid-template-columns: 1fr; }
  .disclosure-card:nth-child(n) { border-right: none; }
  .disclosure-card { padding: 32px 0; }
  .footer-top { grid-template-columns: 1fr; gap: 40px; padding-bottom: 40px; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
  .legal-body { padding: 60px 22px 100px; }
}
@media (max-width: 560px) {
  .values-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PRECISION MOTION LAYER · v2.2
   Theme: architectural drafting, construction, measurement.
   Every animated element earns its place by reinforcing the
   metaphor of careful, deliberate building.
   ============================================================ */

/* ---------- Scroll progress: hairline (a ruler at the edge) ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: var(--gold);
  z-index: 9990; /* above nav, below boot/curtain overlays */
  pointer-events: none;
  transition: width .12s linear;
  box-shadow: 0 0 12px rgba(176,138,61,.75), 0 1px 0 rgba(176,138,61,.4);
}

/* ---------- Hero cursor spotlight removed in v2.6 ---------- */
.hero-spotlight { display: none; }

/* ---------- Hero title: word-level rise (typesetting reveal) ---------- */
.hero-title .word {
  display: inline-block;
  vertical-align: top;
}
.hero-title .word > span {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  animation: word-rise 1.1s cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes word-rise {
  to { transform: translateY(0); opacity: 1; }
}

/* ---------- Architectural blueprint grid (hero backdrop) ---------- */
/* A faint grid that draws itself in line by line on first paint */
.blueprint-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  animation: blueprint-fade 2.8s ease 1.4s forwards;
}
.blueprint-grid::before,
.blueprint-grid::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(201,169,106,.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(201,169,106,.025) 1px, transparent 1px);
  background-size: 120px 120px;
}
.blueprint-grid::after {
  background-image:
    linear-gradient(to right, rgba(201,169,106,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(201,169,106,.04) 1px, transparent 1px);
  background-size: 480px 480px;
}
@keyframes blueprint-fade {
  to { opacity: 1; }
}

/* ---------- Reference lines (plumb + horizon, drafting drawn) ---------- */
.reference-lines {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.reference-lines .ref-h,
.reference-lines .ref-v {
  position: absolute;
  background: var(--gold-soft);
  opacity: 0;
}
.reference-lines .ref-h {
  height: 1px;
  width: 0;
  animation: draw-h 1.6s cubic-bezier(.2, .8, .2, 1) 2.0s forwards;
}
.reference-lines .ref-v {
  width: 1px;
  height: 0;
  animation: draw-v 1.6s cubic-bezier(.2, .8, .2, 1) 2.3s forwards;
}
.reference-lines .ref-h-1 { top: 22%; left: 0; }
.reference-lines .ref-h-2 { bottom: 18%; right: 0; animation-delay: 2.4s; }
.reference-lines .ref-v-1 { top: 0; right: 18%; }
.reference-lines .ref-v-2 { bottom: 0; left: 28%; animation-delay: 2.6s; }

@keyframes draw-h {
  0%   { width: 0;    opacity: 0; }
  25%  { opacity: .12; }
  100% { width: 100%; opacity: .06; }
}
@keyframes draw-v {
  0%   { height: 0;    opacity: 0; }
  25%  { opacity: .12; }
  100% { height: 100%; opacity: .06; }
}

/* ---------- Measurement annotations (CAD dimension tags) ---------- */
.measure-tag {
  display: none; /* v2.4 — removed for cleaner heroes */
  position: absolute;
  z-index: 3;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .22em;
  color: rgba(201,169,106,.45);
  text-transform: uppercase;
  opacity: 0;
  animation: measure-fade 1.4s ease 3.2s forwards;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.measure-tag .tick {
  display: inline-block;
  width: 14px;
  height: 1px;
  background: var(--gold-soft);
  opacity: .5;
}
.measure-tag.tag-tl { top: 14%; left: 40px; }
.measure-tag.tag-tr { top: 12%; right: 40px; animation-delay: 3.4s; }
.measure-tag.tag-bl { bottom: 12%; left: 40px; animation-delay: 3.6s; }
.measure-tag.tag-br { bottom: 14%; right: 40px; animation-delay: 3.8s; }

@keyframes measure-fade {
  to { opacity: 1; }
}

/* ---------- Section-marker hairline draw-in (drafting move) ---------- */
.section-marker {
  position: relative;
  border-bottom: none !important;
}
.section-marker::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 1px;
  width: 0;
  background: var(--rule);
  transition: width 1.6s cubic-bezier(.2, .8, .2, 1);
}
.section-marker.in-view::after { width: 100%; }

/* Corner construction marks (compass radius) — removed in v2.5 per direction:
   the small architectural bracket read as technical clutter once paired
   with a single-element marker. */

}

/* ---------- Team portrait: precision frame on hover ---------- */
.team-card { position: relative; }
.team-portrait { overflow: hidden; position: relative; }
.team-portrait img,
.team-portrait svg {
  transition: transform 1.4s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}
.team-card:hover .team-portrait img,
.team-card:hover .team-portrait svg {
  transform: scale(1.04);
}

/* Frame draws itself in from corners — like architectural section marks */
.team-portrait::before,
.team-portrait::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--gold-soft);
  opacity: 0;
  transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
  z-index: 2;
}
.team-portrait::before {
  top: 8px; left: 8px;
  border-right: none;
  border-bottom: none;
  transform: translate(-4px, -4px);
}
.team-portrait::after {
  bottom: 8px; right: 8px;
  border-left: none;
  border-top: none;
  transform: translate(4px, 4px);
}
.team-card:hover .team-portrait::before,
.team-card:hover .team-portrait::after {
  opacity: 1;
  transform: translate(0, 0);
}

/* ---------- Service cards: subtle lift + underline sweep ---------- */
.service {
  transition: background .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}
.service:hover { transform: translateY(-3px); }
.service .service-num {
  position: relative;
  display: inline-block;
}
.service .service-num::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width .6s cubic-bezier(.2, .8, .2, 1);
}
.service:hover .service-num::after { width: 100%; }

/* ---------- Capability deep-dive: precision shift on hover ---------- */
.capability {
  transition: padding-left .5s cubic-bezier(.2, .8, .2, 1);
}
.capability:hover { padding-left: 12px; }

/* ---------- Disclosure card subtle lift ---------- */
.disclosure-card {
  transition: background .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}
.disclosure-card:hover { transform: translateY(-2px); }

/* ---------- Wordmark horizontal parallax ---------- */
.wordmark-band { position: relative; }
.wordmark { will-change: transform; transition: none; }

/* ---------- CTA magnetic pull (handled in JS, CSS just preps) ---------- */
.cta {
  will-change: transform;
  transition: all .35s ease, transform .25s ease;
}
.cta .arrow { will-change: transform; }

/* ---------- Process timeline: vertical construction line ---------- */
/* A gold plumb line draws itself down the left side of the process timeline
   as you scroll through it — like a structural axis being laid out */
.process-timeline {
  position: relative;
}
.process-timeline::before {
  content: '';
  position: absolute;
  left: 38px;
  top: 0;
  width: 1px;
  height: 0;
  background: linear-gradient(to bottom, var(--gold), transparent);
  transition: height 3s cubic-bezier(.4, 0, .2, 1);
  opacity: .4;
}
.process-timeline.in-view::before {
  height: 100%;
}
@media (max-width: 900px) {
  .process-timeline::before { left: 8px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-spotlight,
  .scroll-progress,
  .blueprint-grid,
  .reference-lines,
  .measure-tag { display: none; }
  .architecture .stage,
  .architecture .build-meta text,
  .architecture .stage-caption { opacity: 1; }
  .architecture .stage-1 { opacity: 0 !important; }
  .architecture .stage-2 { opacity: 0 !important; }
  .architecture .stage-3 { opacity: 1 !important; }
  .architecture .wedge { transform: scale(1); opacity: 1; }
  .architecture .rise-line { stroke-dasharray: none; stroke-dashoffset: 0; }
  .architecture .stage-4 path,
  .architecture .stage-4 line,
  .architecture .stage-4 rect,
  .architecture .stage-4 circle { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .process-timeline::before { height: 100%; transition: none; }
}

/* ============================================================
   FEATURE LAYER · v2.3
   - Hero stat counters
   - Capability metrics row
   - Section indicator (right-rail dots)
   - Page transitions (curtain)
   - First-visit loading sequence
   - Interior-page architectural watermark
   ============================================================ */

/* ---------- Hero stats row ---------- */
.hero-stats {
  margin-top: 60px;
  margin-bottom: 100px; /* clear hero-bottom (scroll cue + IDX) */
  padding-top: 22px;
  border-top: 1px solid rgba(254, 253, 249,.15);
  opacity: 0;
  animation: rise 1.2s 1.5s ease forwards;
  position: relative;
  z-index: 4; /* above measurement tags */
}
/* Corner tags removed in v2.4 per direction */
.hero-stats-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.hero-stats .stat {
  position: relative;
  padding: 14px 28px 14px 0;
  border-right: 1px solid rgba(254, 253, 249,.10);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero-stats .stat:last-child { border-right: none; }
.hero-stats .stat:not(:first-child) { padding-left: 28px; }
.hero-stats .stat-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(254, 253, 249,.42);
}
.hero-stats .stat-val {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  color: var(--gold-soft);
  letter-spacing: -.005em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
@media (max-width: 900px) {
  .hero-stats {
    margin-top: 40px;
    margin-bottom: 80px;
  }
  .hero-stats-inner {
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(254, 253, 249,.10);
  }
  .hero-stats .stat {
    background: var(--hunter-deep);
    padding: 14px 16px;
    border-right: none;
  }
  .hero-stats .stat-val { font-size: 18px; }
}

/* ---------- Capability metrics (operational profile) ---------- */
.capability-metrics {
  margin-top: 50px;
  padding-top: 30px;
  border-top: 1px solid var(--rule);
}
.capability-metrics .metrics-header {
  margin-bottom: 22px;
}
.capability-metrics .metric-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}
.capability-metrics .metric-tag .dot { color: var(--ink-faint); }
.capability-metrics .metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 40px;
}
.capability-metrics .metric {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--rule);
}
.capability-metrics .metric-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.capability-metrics .metric-val {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  color: var(--hunter-deep);
  letter-spacing: -.005em;
}
@media (max-width: 900px) {
  .capability-metrics .metrics-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ---------- Section indicator (right-rail dots) ---------- */
.section-indicator {
  position: fixed;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 6px;
  opacity: 0;
  transition: opacity .8s ease;
  pointer-events: none;
}
.section-indicator.ready {
  opacity: 1;
  pointer-events: auto;
}
.section-indicator .dot-link {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  text-decoration: none;
  position: relative;
}
.section-indicator .dot {
  display: block;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(254, 253, 249,.4);
  border-radius: 50%;
  background: transparent;
  transition: background .35s ease, border-color .35s ease, transform .35s ease;
  flex-shrink: 0;
}
.section-indicator .dot-link.active .dot {
  background: var(--gold-soft);
  border-color: var(--gold-soft);
  transform: scale(1.4);
}
.section-indicator .dot-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(254, 253, 249,.4);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .35s ease, transform .35s ease;
  white-space: nowrap;
  display: none;
}
.section-indicator .dot-link:hover .dot-label,
.section-indicator .dot-link.active .dot-label {
  opacity: 1;
  transform: translateX(0);
  display: inline-block;
}

/* Over light sections: invert colors */
.section-indicator.over-light .dot {
  border-color: rgba(20,39,31,.4);
}
.section-indicator.over-light .dot-link.active .dot {
  background: var(--gold);
  border-color: var(--gold);
}
.section-indicator.over-light .dot-label {
  color: rgba(20,39,31,.55);
}

@media (max-width: 1200px) {
  .section-indicator { display: none; }
}

/* ---------- Page transition curtain ---------- */
.page-curtain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: var(--hunter-deep);
  transform: translateY(100%);
  transition: transform 1s cubic-bezier(.7, 0, .3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-curtain.exiting {
  transform: translateY(0);
}
.page-curtain.entering {
  transform: translateY(0);
}
.page-curtain.lifting {
  transform: translateY(-100%);
}
.page-curtain .curtain-mark {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 56px;
  color: #fefdf9;
  opacity: 0;
  transition: opacity .4s ease;
  letter-spacing: -.02em;
}
.page-curtain .curtain-period {
  display: inline-block;
  width: .22em;
  height: .22em;
  border-radius: 50%;
  background: var(--gold-soft);
  vertical-align: baseline;
  margin-left: .12em;
  text-indent: -9999px;
  overflow: hidden;
}
.page-curtain.exiting .curtain-mark,
.page-curtain.entering .curtain-mark {
  opacity: 1;
}

/* ---------- First-visit loading sequence ---------- */
.boot-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--hunter-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  transition: opacity 1.4s cubic-bezier(.4, 0, .2, 1);
}
.boot-overlay.complete {
  opacity: 0;
  pointer-events: none;
}
/* Solid hunter green — grid backdrop removed per design call */
/* Boot mark — the seal logo, fades up and settles */
.boot-mark {
  position: relative;
  z-index: 2;
  width: clamp(220px, 28vw, 340px);
  height: clamp(220px, 28vw, 340px);
  opacity: 0;
  transform: translateY(8px) scale(.985);
  animation: boot-mark-in 1s cubic-bezier(.25, .1, .25, 1) .4s forwards;
}
.boot-mark .boot-seal {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes boot-mark-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Outline draws itself in over 2.4s once .drawing class is added */
/* Filled gold *oo* pours in after the outline completes */
/* Outline draws itself in over 2.4s once .drawing class is added */
/* Filled gold *oo* pours in after the outline completes (starts at 2.7s) */
.boot-readout {
  position: relative;
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(254, 253, 249,.4);
  opacity: 0;
  animation: boot-mark-in .6s ease 1.3s forwards;
}
.boot-readout .accent { color: var(--gold-soft); }

.boot-progress {
  position: relative;
  z-index: 2;
  width: 180px;
  height: 1px;
  background: rgba(201,169,106,.4);
  opacity: 0;
  animation: boot-mark-in .6s ease 1.5s forwards;
}
.boot-progress::after {
  content: '';
  display: block;
  width: 0;
  height: 100%;
  background: var(--gold-soft);
  animation: boot-fill .9s cubic-bezier(.4,0,.2,1) 1.0s forwards;
}
@keyframes boot-fill { to { width: 100%; } }

/* ---------- Interior page architectural watermark ---------- */
.page-watermark {
  position: absolute;
  z-index: 0;
  right: -80px;
  top: 50%;
  transform: translateY(-50%);
  width: 540px;
  height: 540px;
  opacity: 0;
  pointer-events: none;
  animation: watermark-fade 2.4s ease 1.8s forwards;
}
.page-watermark svg { width: 100%; height: 100%; overflow: visible; }
.page-watermark svg * {
  stroke: var(--gold-soft);
  fill: none;
  stroke-width: .5;
}
@keyframes watermark-fade { to { opacity: .08; } }

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

/* Reduced motion: kill the showy stuff */
@media (prefers-reduced-motion: reduce) {
  .boot-overlay { display: none !important; }
  .page-curtain { display: none !important; }
  .page-watermark { opacity: .08; animation: none; }
  .section-indicator { opacity: 1; }
}


/* ============================================================
   FAÇADE BUILD SEQUENCE v4 — Halved runtime, two new elements
   ~3.5s total runtime (down from ~7s).
   Heavy overlap, parallel motion, faster easing.
   
   Stage map (driven by JS):
     0.0s   build-active + at-1   (Stage I)
     1.0s   at-2                  (Stage II)
     1.9s   at-3                  (Stage III)
     2.75s  at-4                  (Stage IV)
     Total: ~3.5s
     
   New elements (v4):
     - .meridian-pulse  : gold marker travels up center axis in Stage III
     - .joints          : diagonal hairlines where capitals meet entablature
   ============================================================ */

/* Construction grid */
.build-svg .construction-grid g {
  opacity: 0;
  transition: opacity .4s ease;
}
.architecture.build-active.at-1 .build-svg .construction-grid g,
.architecture.build-active.at-2 .build-svg .construction-grid g,
.architecture.build-active.at-3 .build-svg .construction-grid g { opacity: 1; }
.architecture.at-4 .build-svg .construction-grid g {
  opacity: 0;
  transition-delay: .2s;
}

/* Top sweep line */
.build-svg .sweep-line {
  transform: translateY(0);
  transition: transform .5s cubic-bezier(.4,0,.2,1) .05s, opacity .2s ease;
}
.architecture.build-active .build-svg .sweep-line {
  opacity: .7;
  transform: translateY(760px);
}
.architecture.at-2 .build-svg .sweep-line,
.architecture.at-3 .build-svg .sweep-line,
.architecture.at-4 .build-svg .sweep-line { opacity: 0; }

/* Scan lines between stages */
.build-svg .scan-line { transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .15s ease; }
.architecture.at-2 .build-svg .scan-down {
  opacity: .8;
  transform: translateY(560px);
}
.architecture.at-3 .build-svg .scan-down { opacity: 0; transition-delay: .15s; }

.architecture.at-3 .build-svg .scan-up {
  opacity: .8;
  transform: translateY(-440px);
}
.architecture.at-4 .build-svg .scan-up { opacity: 0; transition-delay: .15s; }

/* Stage label */
.build-svg .stage-label { transition: opacity .2s ease; }
.architecture.build-active .build-svg .stage-label { opacity: .85; }

/* Meta + caption + revision stamp */
.build-svg text { transition: opacity .25s ease; }
.build-svg .build-meta text,
.build-svg .stage-caption,
.build-svg .revision-stamp { opacity: 0; transition: opacity .3s ease; }
.architecture.build-active .build-svg .build-meta text,
.architecture.build-active .build-svg .stage-caption,
.architecture.build-active .build-svg .revision-stamp { opacity: 1; }

/* ============================================================
   STAGE I — PORTFOLIO PIE (0–1.0s)
   ============================================================ */

.build-svg .pie-ring,
.build-svg .pie-ticks {
  transition: opacity .25s ease;
}
.architecture.at-1 .build-svg .pie-ring,
.architecture.at-1 .build-svg .pie-ticks { opacity: .55; }

.build-svg .anchor,
.build-svg .anchor-ring {
  opacity: 0;
  transition: opacity .2s ease;
}
.architecture.at-1 .build-svg .anchor,
.architecture.at-1 .build-svg .anchor-ring,
.architecture.at-2 .build-svg .anchor,
.architecture.at-2 .build-svg .anchor-ring { opacity: 1; }

/* Wedges scale in together */
.build-svg .wedge {
  transform-origin: 0 0;
  transform: scale(0);
  opacity: 0;
  transition: transform .35s cubic-bezier(.2,.85,.3,1), opacity .2s ease;
}
.architecture.at-1 .build-svg .wedge {
  transform: scale(1);
  opacity: 1;
  transition-delay: .1s;
}

/* Sonar sweep — much faster rotation */
.build-svg .sonar-sweep {
  transform-origin: 0 0;
  transform: rotate(-90deg);
  opacity: 0;
  transition: opacity .15s ease;
}
.architecture.at-1 .build-svg .sonar-sweep {
  opacity: .7;
  animation: sonar-rotate .7s cubic-bezier(.4,0,.2,1) .2s 1 forwards;
}
@keyframes sonar-rotate {
  0%   { transform: rotate(-90deg); opacity: 0; }
  20%  { opacity: .7; }
  100% { transform: rotate(270deg); opacity: 0; }
}

/* Leader lines draw outward */
.build-svg .leader {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  transition: stroke-dashoffset .25s cubic-bezier(.4,0,.2,1);
}
.architecture.at-1 .build-svg .leader { stroke-dashoffset: 0; transition-delay: .45s; }
.architecture.at-1 .build-svg .leader-1 { transition-delay: .45s; }
.architecture.at-1 .build-svg .leader-2 { transition-delay: .47s; }
.architecture.at-1 .build-svg .leader-3 { transition-delay: .50s; }
.architecture.at-1 .build-svg .leader-4 { transition-delay: .52s; }

.build-svg .pie-labels { opacity: 0; transition: opacity .2s ease; }
.architecture.at-1 .build-svg .pie-labels { opacity: 1; transition-delay: .6s; }

.build-svg .pie-annotation { opacity: 0; transition: opacity .2s ease; }
.architecture.at-1 .build-svg .pie-annotation { opacity: 1; transition-delay: .7s; }

/* Stage I exit */
.architecture.at-2 .build-svg .wedge,
.architecture.at-3 .build-svg .wedge,
.architecture.at-4 .build-svg .wedge {
  transform: scale(0);
  opacity: 0;
  transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .2s ease;
}
.architecture.at-2 .build-svg .pie-ring,
.architecture.at-3 .build-svg .pie-ring,
.architecture.at-4 .build-svg .pie-ring,
.architecture.at-2 .build-svg .pie-ticks,
.architecture.at-3 .build-svg .pie-ticks,
.architecture.at-4 .build-svg .pie-ticks,
.architecture.at-2 .build-svg .pie-labels,
.architecture.at-3 .build-svg .pie-labels,
.architecture.at-4 .build-svg .pie-labels,
.architecture.at-2 .build-svg .pie-annotation,
.architecture.at-3 .build-svg .pie-annotation,
.architecture.at-4 .build-svg .pie-annotation,
.architecture.at-2 .build-svg .pie-leaders,
.architecture.at-3 .build-svg .pie-leaders,
.architecture.at-4 .build-svg .pie-leaders { opacity: 0; }

.architecture.at-3 .build-svg .anchor,
.architecture.at-3 .build-svg .anchor-ring,
.architecture.at-4 .build-svg .anchor,
.architecture.at-4 .build-svg .anchor-ring { opacity: 0; }

/* ============================================================
   STAGE II — FOOTPRINT (1.0–1.9s)
   ============================================================ */

.build-svg .fp-outer,
.build-svg .fp-fill,
.build-svg .fp-labels,
.build-svg .fp-compass {
  opacity: 0;
  transition: opacity .25s ease;
}
.architecture.at-2 .build-svg .fp-outer { opacity: 1; transition-delay: 0s; }

.build-svg .fp-h,
.build-svg .fp-v {
  stroke-dasharray: 280;
  stroke-dashoffset: 280;
  transition: stroke-dashoffset .25s cubic-bezier(.4,0,.2,1);
}
.architecture.at-2 .build-svg .fp-h { stroke-dashoffset: 0; transition-delay: .07s; }
.architecture.at-2 .build-svg .fp-v { stroke-dashoffset: 0; transition-delay: .07s; }

.architecture.at-2 .build-svg .fp-fill { opacity: 1; transition-delay: .17s; }
.architecture.at-2 .build-svg .fp-labels { opacity: 1; transition-delay: .27s; }

/* Corner brackets snap with overshoot */
.build-svg .bracket {
  transform-origin: center;
  transform: scale(0);
  opacity: 0;
  transition: transform .18s cubic-bezier(.5,1.5,.5,1), opacity .12s ease;
}
.architecture.at-2 .build-svg .bracket { transform: scale(1); opacity: 1; }
.architecture.at-2 .build-svg .bracket-tl { transition-delay: .12s; }
.architecture.at-2 .build-svg .bracket-tr { transition-delay: .15s; }
.architecture.at-2 .build-svg .bracket-br { transition-delay: .18s; }
.architecture.at-2 .build-svg .bracket-bl { transition-delay: .2s; }

/* Dimension lines */
.build-svg .dim-h {
  stroke-dasharray: 280;
  stroke-dashoffset: 280;
  transition: stroke-dashoffset .25s cubic-bezier(.4,0,.2,1);
}
.build-svg .dim-v {
  stroke-dasharray: 280;
  stroke-dashoffset: 280;
  transition: stroke-dashoffset .25s cubic-bezier(.4,0,.2,1);
}
.build-svg .dim-tick,
.build-svg .dim-text { opacity: 0; transition: opacity .18s ease; }
.architecture.at-2 .build-svg .dim-h { stroke-dashoffset: 0; transition-delay: .3s; }
.architecture.at-2 .build-svg .dim-v { stroke-dashoffset: 0; transition-delay: .32s; }
.architecture.at-2 .build-svg .dim-tick,
.architecture.at-2 .build-svg .dim-text { opacity: 1; transition-delay: .45s; }

/* Compass spins in */
.architecture.at-2 .build-svg .fp-compass { opacity: 1; transition-delay: .27s; }
.build-svg .compass-inner {
  transform-origin: center;
  transform: rotate(-90deg);
  transition: transform .4s cubic-bezier(.3,1.4,.6,1);
}
.architecture.at-2 .build-svg .compass-inner { transform: rotate(0deg); transition-delay: .35s; }

/* Footprint slides down */
.build-svg .footprint {
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .25s ease;
  transform: translate(200px, 360px);
}
.architecture.at-3 .build-svg .footprint,
.architecture.at-4 .build-svg .footprint {
  transform: translate(200px, 555px);
  opacity: 0;
}

/* ============================================================
   STAGE III — EXTRUSION (1.9–2.75s)
   ============================================================ */

.build-svg .plinth {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  transition: stroke-dashoffset .25s cubic-bezier(.4,0,.2,1);
}
.architecture.at-3 .build-svg .plinth-1,
.architecture.at-4 .build-svg .plinth-1 { stroke-dashoffset: 0; transition-delay: 0s; }
.architecture.at-3 .build-svg .plinth-2,
.architecture.at-4 .build-svg .plinth-2 { stroke-dashoffset: 0; transition-delay: .05s; }
.architecture.at-3 .build-svg .plinth-3,
.architecture.at-4 .build-svg .plinth-3 { stroke-dashoffset: 0; transition-delay: .1s; }

/* Columns rise in unison */
.build-svg .rise-line {
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  transition: stroke-dashoffset .4s cubic-bezier(.3,.8,.4,1);
}
.architecture.at-3 .build-svg .rise-line,
.architecture.at-4 .build-svg .rise-line {
  stroke-dashoffset: 0;
  transition-delay: .17s;
}

/* X-braces */
.build-svg .brace-line {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: stroke-dashoffset .3s cubic-bezier(.4,0,.2,1);
}
.architecture.at-3 .build-svg .brace-line { stroke-dashoffset: 0; transition-delay: .4s; }

/* Center axis */
.build-svg .center-axis {
  stroke-dasharray: 480;
  stroke-dashoffset: 480;
  transition: stroke-dashoffset .3s cubic-bezier(.4,0,.2,1);
}
.architecture.at-3 .build-svg .center-axis,
.architecture.at-4 .build-svg .center-axis { stroke-dashoffset: 0; transition-delay: .35s; }

/* Height dim */
.build-svg .height-dim { opacity: 0; transition: opacity .2s ease; }
.build-svg .dim-line-h {
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  transition: stroke-dashoffset .25s cubic-bezier(.4,0,.2,1);
}
.architecture.at-3 .build-svg .height-dim,
.architecture.at-4 .build-svg .height-dim { opacity: 1; transition-delay: .5s; }
.architecture.at-3 .build-svg .dim-line-h,
.architecture.at-4 .build-svg .dim-line-h { stroke-dashoffset: 0; transition-delay: .5s; }

/* NEW: Meridian pulse — gold marker travels up the center axis */
.build-svg .meridian-pulse {
  transform: translate(0, 555px);
  opacity: 0;
  transition: opacity .15s ease;
}
.architecture.at-3 .build-svg .meridian-pulse,
.architecture.at-4 .build-svg .meridian-pulse {
  animation: meridian-travel .7s cubic-bezier(.4,0,.2,1) .35s 1 forwards;
}
@keyframes meridian-travel {
  0%   { transform: translate(0, 555px); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate(0, 80px); opacity: 0; }
}

/* Braces fade out in stage IV */
.architecture.at-4 .build-svg .braces { opacity: 0; transition-delay: .05s; }

/* ============================================================
   STAGE IV — FAÇADE (2.75–3.5s)
   ============================================================ */

.build-svg .ped-l,
.build-svg .ped-r {
  stroke-dasharray: 250;
  stroke-dashoffset: 250;
  transition: stroke-dashoffset .35s cubic-bezier(.4,0,.2,1);
}
.architecture.at-4 .build-svg .ped-l { stroke-dashoffset: 0; transition-delay: .05s; }
.architecture.at-4 .build-svg .ped-r { stroke-dashoffset: 0; transition-delay: .05s; }

.build-svg .ped-base,
.build-svg .entab {
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  transition: stroke-dashoffset .27s cubic-bezier(.4,0,.2,1);
}
.architecture.at-4 .build-svg .ped-base { stroke-dashoffset: 0; transition-delay: .27s; }
.architecture.at-4 .build-svg .entab { stroke-dashoffset: 0; transition-delay: .32s; }

/* Capitals + bases */
.build-svg .cap {
  transform: translateY(-30px);
  opacity: 0;
  transition: transform .25s cubic-bezier(.3,1.2,.5,1), opacity .18s ease;
}
.architecture.at-4 .build-svg .cap {
  transform: translateY(0);
  opacity: 1;
  transition-delay: .4s;
}

.build-svg .base {
  transform: scaleY(0);
  transform-origin: 0 0;
  transform-box: fill-box;
  opacity: 0;
  transition: transform .2s cubic-bezier(.4,0,.2,1), opacity .15s ease;
}
.architecture.at-4 .build-svg .base {
  transform: scaleY(1);
  opacity: 1;
  transition-delay: .42s;
}

/* NEW: Joint marks where capitals meet entablature — snap in with overshoot */
.build-svg .joint {
  transform-origin: center;
  transform: scale(0);
  opacity: 0;
  transition: transform .2s cubic-bezier(.5,1.5,.5,1), opacity .15s ease;
}
.architecture.at-4 .build-svg .joint {
  transform: scale(1);
  opacity: .7;
  transition-delay: .55s;
}

/* Medallion with spring */
.build-svg .ped-medallion,
.build-svg .ped-medallion-dot {
  transform: scale(0);
  transform-origin: 200px 140px;
  transform-box: view-box;
  opacity: 0;
  transition: transform .25s cubic-bezier(.4,1.6,.5,1), opacity .18s ease;
}
.architecture.at-4 .build-svg .ped-medallion,
.architecture.at-4 .build-svg .ped-medallion-dot {
  transform: scale(1);
  opacity: 1;
  transition-delay: .6s;
}

/* Medallion spark */
.architecture.at-4 .build-svg .ped-spark {
  animation: spark-strike .6s cubic-bezier(.2,.8,.2,1) .65s 1 forwards;
  transform-origin: 200px 140px;
  transform-box: view-box;
}
@keyframes spark-strike {
  0%   { opacity: .9; transform: scale(1); }
  50%  { opacity: .5; }
  100% { opacity: 0; transform: scale(4); }
}

/* Width dim + cross marks */
.build-svg .width-dim,
.build-svg .cross-marks {
  opacity: 0;
  transition: opacity .25s ease;
}
.architecture.at-4 .build-svg .width-dim { opacity: 1; transition-delay: .7s; }
.architecture.at-4 .build-svg .cross-marks { opacity: 1; transition-delay: .75s; }


/* ============================================================
   v5 ELEMENT ADDITIONS — More precision details per stage
   ============================================================ */

/* --- Stage I additions --- */

/* Risk-return scatter points: scale in with overshoot */
.build-svg .scatter-points { transition: opacity .25s ease; }
.build-svg .scatter-pt {
  transform-origin: center;
  transform: scale(0);
  transition: transform .25s cubic-bezier(.5,1.5,.5,1);
}
.architecture.at-1 .build-svg .scatter-points { opacity: 1; transition-delay: .9s; }
.architecture.at-1 .build-svg .scatter-pt { transform: scale(1); }
.architecture.at-1 .build-svg .scatter-pt:nth-child(1) { transition-delay: .9s; }
.architecture.at-1 .build-svg .scatter-pt:nth-child(2) { transition-delay: .95s; }
.architecture.at-1 .build-svg .scatter-pt:nth-child(3) { transition-delay: 1.0s; }
.architecture.at-1 .build-svg .scatter-pt:nth-child(4) { transition-delay: 1.05s; }
.architecture.at-1 .build-svg .scatter-pt:nth-child(5) { transition-delay: 1.1s; }
.architecture.at-2 .build-svg .scatter-points,
.architecture.at-3 .build-svg .scatter-points,
.architecture.at-4 .build-svg .scatter-points { opacity: 0; }

/* Sum annotation */
.build-svg .sum-annotation { transition: opacity .3s ease; }
.architecture.at-1 .build-svg .sum-annotation { opacity: 1; transition-delay: 1.2s; }
.architecture.at-2 .build-svg .sum-annotation,
.architecture.at-3 .build-svg .sum-annotation,
.architecture.at-4 .build-svg .sum-annotation { opacity: 0; }

/* --- Stage II additions --- */

/* Scale bar: fade in */
.build-svg .scale-bar { transition: opacity .3s ease; }
.architecture.at-2 .build-svg .scale-bar { opacity: 1; transition-delay: .55s; }

/* Zone crosshair registration marks: snap with overshoot */
.build-svg .zone-crosses { transition: opacity .25s ease; }
.architecture.at-2 .build-svg .zone-crosses { opacity: .8; transition-delay: .7s; }

/* --- Stage III additions --- */

/* Load arrows: each snaps down with stagger */
.build-svg .load-arrows { transition: opacity .25s ease; }
.build-svg .load-arrow {
  transform: translateY(-10px) scale(0);
  transform-origin: center;
  transition: transform .25s cubic-bezier(.4,1.4,.5,1);
}
.architecture.at-3 .build-svg .load-arrows,
.architecture.at-4 .build-svg .load-arrows { opacity: 1; transition-delay: 1.0s; }
.architecture.at-3 .build-svg .load-arrow,
.architecture.at-4 .build-svg .load-arrow {
  transform: translateY(0) scale(1);
}
.architecture.at-3 .build-svg .load-arrows .load-arrow:nth-child(1),
.architecture.at-4 .build-svg .load-arrows .load-arrow:nth-child(1) { transition-delay: 1.0s; }
.architecture.at-3 .build-svg .load-arrows .load-arrow:nth-child(2),
.architecture.at-4 .build-svg .load-arrows .load-arrow:nth-child(2) { transition-delay: 1.05s; }
.architecture.at-3 .build-svg .load-arrows .load-arrow:nth-child(3),
.architecture.at-4 .build-svg .load-arrows .load-arrow:nth-child(3) { transition-delay: 1.1s; }

/* Foundation depth annotation */
.build-svg .depth-dim { transition: opacity .3s ease; }
.architecture.at-3 .build-svg .depth-dim,
.architecture.at-4 .build-svg .depth-dim { opacity: 1; transition-delay: 1.15s; }

/* --- Stage IV additions --- */

/* Pediment triangulation: dashed lines draw in */
.build-svg .triangulation { transition: opacity .25s ease; }
.build-svg .tri-line {
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
  transition: stroke-dashoffset .35s cubic-bezier(.4,0,.2,1);
}
.architecture.at-4 .build-svg .triangulation { opacity: .6; transition-delay: .85s; }
.architecture.at-4 .build-svg .tri-line { stroke-dashoffset: 0; }
.architecture.at-4 .build-svg .triangulation .tri-line:nth-child(1) { transition-delay: .85s; }
.architecture.at-4 .build-svg .triangulation .tri-line:nth-child(2) { transition-delay: .9s; }
.architecture.at-4 .build-svg .triangulation .tri-line:nth-child(3) { transition-delay: .95s; }

/* FRONT ELEVATION caption */
.build-svg .elevation-caption { transition: opacity .3s ease; }
.architecture.at-4 .build-svg .elevation-caption { opacity: .85; transition-delay: 1.05s; }


/* ============================================================
   v6 ELEMENT ADDITIONS — Even more precision details + Stage V seal
   ============================================================ */

/* --- Stage I: deltas + pulse ring --- */
.build-svg .deltas { transition: opacity .3s ease; }
.architecture.at-1 .build-svg .deltas { opacity: 1; transition-delay: 1.25s; }
.architecture.at-2 .build-svg .deltas,
.architecture.at-3 .build-svg .deltas,
.architecture.at-4 .build-svg .deltas,
.architecture.at-5 .build-svg .deltas { opacity: 0; }

.architecture.at-1 .build-svg .pulse-ring {
  animation: pulse-out 1.1s cubic-bezier(.4,0,.2,1) .8s 1 forwards;
}
@keyframes pulse-out {
  0%   { r: 0;   opacity: .8; stroke-width: 1; }
  100% { r: 165; opacity: 0;  stroke-width: .3; }
}

/* --- Stage II: section cuts + diagonal dim --- */
.build-svg .section-cuts { transition: opacity .25s ease; }
.build-svg .sc-cut {
  transform-origin: center;
  transform: scale(0);
  transition: transform .25s cubic-bezier(.5,1.5,.5,1);
}
.architecture.at-2 .build-svg .section-cuts { opacity: 1; transition-delay: .85s; }
.architecture.at-2 .build-svg .sc-cut { transform: scale(1); }
.architecture.at-2 .build-svg .sc-cut:nth-child(1) { transition-delay: .85s; }
.architecture.at-2 .build-svg .sc-cut:nth-child(2) { transition-delay: .9s; }

.build-svg .diag-dim { transition: opacity .35s ease; }
.architecture.at-2 .build-svg .diag-dim { opacity: 1; transition-delay: 1.0s; }

/* --- Stage III: story lines + datum --- */
.build-svg .story-lines { transition: opacity .3s ease; }
.build-svg .story-line {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  transition: stroke-dashoffset .45s cubic-bezier(.4,0,.2,1);
}
.architecture.at-3 .build-svg .story-lines,
.architecture.at-4 .build-svg .story-lines,
.architecture.at-5 .build-svg .story-lines { opacity: 1; transition-delay: .55s; }
.architecture.at-3 .build-svg .story-line,
.architecture.at-4 .build-svg .story-line,
.architecture.at-5 .build-svg .story-line { stroke-dashoffset: 0; }
.architecture.at-3 .build-svg .story-1 .story-line,
.architecture.at-4 .build-svg .story-1 .story-line,
.architecture.at-5 .build-svg .story-1 .story-line { transition-delay: .55s; }
.architecture.at-3 .build-svg .story-2 .story-line,
.architecture.at-4 .build-svg .story-2 .story-line,
.architecture.at-5 .build-svg .story-2 .story-line { transition-delay: .65s; }
.architecture.at-3 .build-svg .story-3 .story-line,
.architecture.at-4 .build-svg .story-3 .story-line,
.architecture.at-5 .build-svg .story-3 .story-line { transition-delay: .75s; }

.build-svg .datum-line { transition: opacity .3s ease; }
.architecture.at-3 .build-svg .datum-line,
.architecture.at-4 .build-svg .datum-line,
.architecture.at-5 .build-svg .datum-line { opacity: 1; transition-delay: 1.3s; }

/* --- Stage IV: acroteria + arch impression --- */
.build-svg .acroteria { transition: opacity .25s ease; }
.build-svg .acro {
  transform-origin: center;
  transform: scale(0);
  transition: transform .25s cubic-bezier(.5,1.5,.5,1);
}
.architecture.at-4 .build-svg .acroteria,
.architecture.at-5 .build-svg .acroteria { opacity: 1; transition-delay: 1.15s; }
.architecture.at-4 .build-svg .acro,
.architecture.at-5 .build-svg .acro { transform: scale(1); }
.architecture.at-4 .build-svg .acroteria .acro:nth-child(1),
.architecture.at-5 .build-svg .acroteria .acro:nth-child(1) { transition-delay: 1.15s; }
.architecture.at-4 .build-svg .acroteria .acro:nth-child(2),
.architecture.at-5 .build-svg .acroteria .acro:nth-child(2) { transition-delay: 1.2s; }
.architecture.at-4 .build-svg .acroteria .acro:nth-child(3),
.architecture.at-5 .build-svg .acroteria .acro:nth-child(3) { transition-delay: 1.25s; }

.build-svg .arch-impression { transition: opacity .35s ease; }
.architecture.at-4 .build-svg .arch-impression,
.architecture.at-5 .build-svg .arch-impression { opacity: .35; transition-delay: 1.35s; }

/* ============================================================
   STAGE V — SEAL AUTHENTICATION
   The firm signs its work. Centered in viewBox.
   ============================================================ */

.build-svg .seal-mark {
  pointer-events: none;
}

/* Outer + inner rings draw via stroke-dashoffset (circular draw) */
.build-svg .seal-outer {
  stroke-dasharray: 440;
  stroke-dashoffset: 440;
  transform: rotate(-90deg);
  transform-origin: 200px 380px;
  transform-box: view-box;
  transition: stroke-dashoffset .7s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
.architecture.at-5 .build-svg .seal-outer {
  opacity: 1;
  stroke-dashoffset: 0;
  transition-delay: .15s;
}
.build-svg .seal-inner {
  stroke-dasharray: 365;
  stroke-dashoffset: 365;
  transform: rotate(-90deg);
  transform-origin: 200px 380px;
  transform-box: view-box;
  transition: stroke-dashoffset .6s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
.architecture.at-5 .build-svg .seal-inner {
  opacity: 1;
  stroke-dashoffset: 0;
  transition-delay: .3s;
}

/* Rim text fades in */
.build-svg .seal-text { transition: opacity .4s ease; }
.architecture.at-5 .build-svg .seal-text-top { opacity: 1; transition-delay: .8s; }
.architecture.at-5 .build-svg .seal-text-bot { opacity: 1; transition-delay: .9s; }

/* Side dots pop in */
.build-svg .seal-dot {
  transform-origin: center;
  transform: scale(0);
  transform-box: fill-box;
  transition: transform .3s cubic-bezier(.4,1.6,.5,1), opacity .25s ease;
}
.architecture.at-5 .build-svg .seal-dot { transform: scale(1); opacity: 1; }
.architecture.at-5 .build-svg .seal-dot-l { transition-delay: 1.0s; }
.architecture.at-5 .build-svg .seal-dot-r { transition-delay: 1.05s; }

/* Italic H scales in with spring overshoot */
.build-svg .seal-h {
  transform-origin: 200px 380px;
  transform-box: view-box;
  transform: scale(0);
  transition: transform .5s cubic-bezier(.4,1.8,.4,1), opacity .35s ease;
}
.architecture.at-5 .build-svg .seal-h {
  transform: scale(1);
  opacity: 1;
  transition-delay: 1.15s;
}

/* Gold hairline beneath H */
.build-svg .seal-rule { transition: opacity .3s ease; }
.architecture.at-5 .build-svg .seal-rule { opacity: 1; transition-delay: 1.5s; }

/* Strike spark: ring expands outward and fades */
.architecture.at-5 .build-svg .seal-spark {
  animation: seal-strike 1.2s cubic-bezier(.2,.8,.2,1) 1.6s 1 forwards;
  transform-origin: 200px 380px;
  transform-box: view-box;
}
@keyframes seal-strike {
  0%   { opacity: .85; transform: scale(1); }
  60%  { opacity: .35; }
  100% { opacity: 0;   transform: scale(2.2); }
}

/* When stage 5 begins, dim the façade to let the seal dominate */
.architecture.at-5 .build-svg .facade { opacity: .15; transition: opacity .8s ease .3s; }
.architecture.at-5 .build-svg .structure { opacity: .15; transition: opacity .8s ease .3s; }
.architecture.at-5 .build-svg .construction-grid g { opacity: 0; }

/* ============================================================
   NEW v5 ELEMENTS — Additional density, same fast cadence
   ============================================================ */

/* Pie crosshair: rotates 90° from -45° and locks (Stage I) */
.build-svg .pie-crosshair {
  transform: rotate(-45deg);
  transform-origin: 0 0;
  transition: transform .4s cubic-bezier(.4,1.2,.5,1), opacity .2s ease;
}
.architecture.at-1 .build-svg .pie-crosshair {
  opacity: 1;
  transform: rotate(0deg);
  transition-delay: .35s;
}
.architecture.at-2 .build-svg .pie-crosshair,
.architecture.at-3 .build-svg .pie-crosshair,
.architecture.at-4 .build-svg .pie-crosshair { opacity: 0; }

/* Witness lines (Stage II): draw outward via stroke-dashoffset */
.build-svg .witness {
  stroke-dasharray: 35;
  stroke-dashoffset: 35;
  transition: stroke-dashoffset .25s cubic-bezier(.4,0,.2,1);
}
.architecture.at-2 .build-svg .witness { stroke-dashoffset: 0; transition-delay: .25s; }

/* Load arrows (Stage III): draw downward via stroke-dashoffset, staggered */
.build-svg .load-arrow {
  opacity: 0;
  transition: opacity .15s ease;
}
.build-svg .load-arrow line,
.build-svg .load-arrow path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  transition: stroke-dashoffset .25s cubic-bezier(.4,0,.2,1);
}
.architecture.at-3 .build-svg .load-arrow {
  opacity: .7;
}
.architecture.at-3 .build-svg .load-arrow line,
.architecture.at-3 .build-svg .load-arrow path {
  stroke-dashoffset: 0;
}
.architecture.at-3 .build-svg .load-arrow-1 { transition-delay: .55s; }
.architecture.at-3 .build-svg .load-arrow-2 { transition-delay: .58s; }
.architecture.at-3 .build-svg .load-arrow-3 { transition-delay: .61s; }
.architecture.at-3 .build-svg .load-arrow-4 { transition-delay: .64s; }
.architecture.at-3 .build-svg .load-arrow-5 { transition-delay: .67s; }
.architecture.at-3 .build-svg .load-arrow-1 line,
.architecture.at-3 .build-svg .load-arrow-1 path { transition-delay: .55s; }
.architecture.at-3 .build-svg .load-arrow-2 line,
.architecture.at-3 .build-svg .load-arrow-2 path { transition-delay: .58s; }
.architecture.at-3 .build-svg .load-arrow-3 line,
.architecture.at-3 .build-svg .load-arrow-3 path { transition-delay: .61s; }
.architecture.at-3 .build-svg .load-arrow-4 line,
.architecture.at-3 .build-svg .load-arrow-4 path { transition-delay: .64s; }
.architecture.at-3 .build-svg .load-arrow-5 line,
.architecture.at-3 .build-svg .load-arrow-5 path { transition-delay: .67s; }
/* Load arrows fade out in Stage IV (they're replaced by the actual entablature) */
.architecture.at-4 .build-svg .load-arrow { opacity: 0; transition-delay: .1s; }

/* Measurement chain (Stage IV): draw segments left-to-right */
.build-svg .chain-seg {
  opacity: 0;
  transition: opacity .15s ease;
}
.build-svg .chain-seg line {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  transition: stroke-dashoffset .25s cubic-bezier(.4,0,.2,1);
}
.architecture.at-4 .build-svg .chain-seg { opacity: 1; }
.architecture.at-4 .build-svg .chain-seg line { stroke-dashoffset: 0; }
.architecture.at-4 .build-svg .chain-seg-1 { transition-delay: .85s; }
.architecture.at-4 .build-svg .chain-seg-2 { transition-delay: .92s; }
.architecture.at-4 .build-svg .chain-seg-3 { transition-delay: .99s; }
.architecture.at-4 .build-svg .chain-seg-4 { transition-delay: 1.06s; }
.architecture.at-4 .build-svg .chain-seg-5 { transition-delay: 1.13s; }
.architecture.at-4 .build-svg .chain-seg-1 line { transition-delay: .85s; }
.architecture.at-4 .build-svg .chain-seg-2 line { transition-delay: .92s; }
.architecture.at-4 .build-svg .chain-seg-3 line { transition-delay: .99s; }
.architecture.at-4 .build-svg .chain-seg-4 line { transition-delay: 1.06s; }
.architecture.at-4 .build-svg .chain-seg-5 line { transition-delay: 1.13s; }

/* ============================================================
   REDUCED-MOTION FALLBACK
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .architecture .construction-grid g,
  .architecture .sweep-line,
  .architecture .scan-line,
  .architecture .stage-label,
  .architecture .sonar-sweep,
  .architecture .wedge,
  .architecture .pie-labels,
  .architecture .pie-annotation,
  .architecture .pie-ring,
  .architecture .pie-ticks,
  .architecture .leader,
  .architecture .anchor,
  .architecture .anchor-ring,
  .architecture .fp-outer,
  .architecture .fp-h,
  .architecture .fp-v,
  .architecture .fp-fill,
  .architecture .fp-labels,
  .architecture .bracket,
  .architecture .fp-dims,
  .architecture .fp-compass,
  .architecture .compass-inner,
  .architecture .meridian-pulse,
  .architecture .scatter-points,
  .architecture .scatter-pt,
  .architecture .sum-annotation,
  .architecture .scale-bar,
  .architecture .zone-crosses,
  .architecture .deltas,
  .architecture .pulse-ring,
  .architecture .section-cuts,
  .architecture .sc-cut,
  .architecture .diag-dim { opacity: 0 !important; transition: none !important; animation: none !important; }
  .architecture .footprint { opacity: 0 !important; }
  .architecture .plinth,
  .architecture .center-axis,
  .architecture .height-dim,
  .architecture .dim-line-h,
  .architecture .braces,
  .architecture .ped-l,
  .architecture .ped-r,
  .architecture .ped-base,
  .architecture .entab,
  .architecture .cap,
  .architecture .base,
  .architecture .joint,
  .architecture .ped-medallion,
  .architecture .ped-medallion-dot,
  .architecture .ped-spark,
  .architecture .width-dim,
  .architecture .cross-marks,
  .architecture .chain-seg,
  .architecture .load-arrows,
  .architecture .load-arrow,
  .architecture .depth-dim,
  .architecture .triangulation,
  .architecture .tri-line,
  .architecture .elevation-caption,
  .architecture .story-lines,
  .architecture .story-line,
  .architecture .datum-line,
  .architecture .acroteria,
  .architecture .acro,
  .architecture .arch-impression,
  .architecture .seal-outer,
  .architecture .seal-inner,
  .architecture .seal-text,
  .architecture .seal-dot,
  .architecture .seal-h,
  .architecture .seal-rule,
  .architecture .build-meta text,
  .architecture .stage-caption,
  .architecture .revision-stamp {
    opacity: 1 !important;
    transform: none !important;
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
    animation: none !important;
  }
  .architecture .ped-spark,
  .architecture .seal-spark { opacity: 0 !important; }
  .architecture .rise-line,
  .architecture .brace-line { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}

/* ============================================================
   PROCESS STEPPER · v2.5
   Compact six-step grid replacing the long timeline.
   ============================================================ */

.process-intro {
  max-width: 580px;
  margin-bottom: 80px;
}
.process-intro p {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
  letter-spacing: -.005em;
}

.stepper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  position: relative;
}

/* The step card */
.stepper .step {
  padding: 36px 32px 32px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: background .5s ease, transform .5s cubic-bezier(.2,.8,.2,1);
  background: var(--bg);
  min-height: 220px;
}
.stepper .step:hover {
  background: var(--bg-2);
}

/* A faint gold accent line at the top of each card that draws in on hover */
.stepper .step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width .6s cubic-bezier(.2,.8,.2,1);
}
.stepper .step:hover::before {
  width: 100%;
}

/* Step header row: Roman numeral + timing */
.stepper .step-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.stepper .step-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 28px;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -.01em;
}
.stepper .step-time {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Title */
.stepper .step-title {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: 26px;
  letter-spacing: -.01em;
  line-height: 1;
  color: var(--hunter-deep);
  margin: 4px 0 0;
}

/* One-line description */
.stepper .step-line {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0;
  flex: 1;
}

/* Bottom tag */
.stepper .step-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--accent);
  align-self: flex-start;
  padding: 6px 10px 6px 0;
  position: relative;
}
.stepper .step-tag::before {
  content: '\2014';
  margin-right: 8px;
  color: var(--accent);
  opacity: .6;
}

/* Coda below the stepper */
.process-coda {
  margin-top: 60px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.process-coda .coda-rule {
  display: inline-block;
  width: 80px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}
.process-coda p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -.005em;
}

/* Responsive: 2 columns at tablet, 1 column on phone */
@media (max-width: 1000px) {
  .stepper { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .stepper { grid-template-columns: 1fr; }
  .stepper .step { min-height: auto; padding: 28px 24px; }
  .process-coda { flex-direction: column; align-items: flex-start; gap: 14px; }
  .process-coda .coda-rule { width: 60px; }
}


/* ============================================================
   MOBILE HAMBURGER + SLIDE-IN MENU
   Hidden on desktop, shown ≤900px.
   ============================================================ */

/* Hamburger button — hidden on desktop */
.nav-hamburger {
  display: none;
  background: transparent;
  border: 0;
  padding: 10px;
  margin: -10px;
  cursor: pointer;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 2;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--cream);
  transition: transform .35s cubic-bezier(.4,0,.2,1),
              opacity .25s ease,
              background .35s ease;
}
nav.top.over-light .nav-hamburger span { background: var(--hunter-deep); }
.nav-hamburger:hover span { background: var(--gold-soft); }

/* When menu open, animate bars into an X */
.nav-hamburger[aria-expanded="true"] span:first-child {
  transform: translateY(7.5px) rotate(45deg);
  background: var(--cream);
}
.nav-hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-hamburger[aria-expanded="true"] span:last-child {
  transform: translateY(-7.5px) rotate(-45deg);
  background: var(--cream);
}

/* Mobile menu panel — slides in from the right */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 90vw);
  background: var(--hunter-deep);
  z-index: 55; /* below nav (z=50 base for brand), but nav.top.menu-open lifts to 60 */
  transform: translateX(100%);
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px 40px 60px;
}
.mobile-menu.open {
  transform: translateX(0);
  pointer-events: auto;
  visibility: visible;
}

/* Backdrop dim layer (also closes the menu when tapped) */
.mobile-menu::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(20, 39, 31, .55);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .55s ease;
  z-index: -1;
  pointer-events: none;
}
.mobile-menu.open::before {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.mobile-menu-links {
  list-style: none;
  padding: 0;
  margin: 0 0 60px;
}
.mobile-menu-links li {
  border-bottom: 1px solid rgba(254, 253, 249,.08);
  opacity: 0;
  transform: translateX(20px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.4,0,.2,1);
}
.mobile-menu.open .mobile-menu-links li {
  opacity: 1;
  transform: translateX(0);
}
.mobile-menu.open .mobile-menu-links li:nth-child(1) { transition-delay: .15s; }
.mobile-menu.open .mobile-menu-links li:nth-child(2) { transition-delay: .22s; }
.mobile-menu.open .mobile-menu-links li:nth-child(3) { transition-delay: .29s; }
.mobile-menu.open .mobile-menu-links li:nth-child(4) { transition-delay: .36s; }
.mobile-menu.open .mobile-menu-links li:nth-child(5) { transition-delay: .43s; }
.mobile-menu.open .mobile-menu-links li:nth-child(6) { transition-delay: .50s; }

.mobile-menu-links a {
  display: block;
  padding: 22px 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 28px;
  letter-spacing: -.01em;
  color: var(--cream);
  text-decoration: none;
  transition: color .3s ease, padding-left .3s cubic-bezier(.4,0,.2,1);
}
.mobile-menu-links a:hover,
.mobile-menu-links a.active {
  color: var(--gold-soft);
  padding-left: 8px;
}
.mobile-menu-links a .num {
  display: inline-block;
  width: 38px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .2em;
  color: rgba(254, 253, 249,.35);
  vertical-align: middle;
  transform: translateY(-2px);
}

.mobile-menu-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(254, 253, 249,.35);
  opacity: 0;
  transition: opacity .4s ease .6s;
}
.mobile-menu.open .mobile-menu-meta {
  opacity: 1;
}
.mobile-menu-meta .dot { color: var(--gold-soft); }

/* Prevent body scroll when menu is open */
body.menu-locked {
  overflow: hidden;
}

/* Show hamburger ≤ 1100px */
@media (max-width: 1100px) {
  .nav-hamburger {
    display: flex;
  }
  /* Hamburger needs to stay above the mobile menu when it's open so the user can close it */
  nav.top.menu-open {
    z-index: 60;
  }
  /* When menu is open over dark surface, hamburger bars should be cream regardless of over-light */
  nav.top.menu-open .nav-hamburger span {
    background: var(--cream);
  }
}