/* ==========================================================================
   OAKSPIRE GROUP
   Design system v3.

   Three decisions separate this from v2, and from Kingsgate:

   1. DARK FIRST. The default surface is deep green-black. Light is the
      exception, used as an insert. Kingsgate is the inverse: warm limestone
      paper with pine accents. Two sibling brands cannot share a palette and
      both feel like themselves, and inversion is the cleanest possible
      separation.

   2. COOL, NOT WARM. Kingsgate owns warm limestone and brass-gold. Oakspire Group
      runs cool ivory, slate, and brushed brass. No beige anywhere.

   3. THE REGISTER. A brass numeral, a hairline, a tracked name. It marks
      every section on every page. It is the device you would recognise with
      the logo covered.

   Identity is wordmark-only until the authoritative vector exists. No mark
   is drawn, approximated, or implied anywhere in this file.

   The rule that must never be broken: --brass is a light-on-dark value.
   On ivory it measures 2.6:1. On ivory, brass-family text uses --brass-deep.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* Deep green monochrome. The brand lives here. */
  --obsidian:#0A1C17;      /* default page surface */
  --forest-900:#0D2620;
  --forest-800:#123029;
  --forest-700:#1A3E35;
  --slate:#26312F;         /* cool stone, for layered dark surfaces */

  /* Brushed brass. Cooler and browner than v2's gold. */
  --brass:#B8935E;
  --brass-light:#D4B77E;
  --brass-deep:#7D6034;    /* the only brass-family value legible on ivory */

  /* Cool ivory. Deliberately not beige, not limestone. */
  --ivory:#F2F1EC;
  --ivory-2:#E7E6DF;

  /* Text */
  --on-dark:#F2F1EC;
  --on-dark-muted:rgba(242,241,236,.72);
  --on-dark-faint:rgba(242,241,236,.56);
  --ink:#14201C;
  --ink-muted:#4C5A55;

  --rule-dark:rgba(184,147,94,.30);
  --rule-light:rgba(125,96,52,.30);

  --display:"Cormorant Garamond",Cormorant,Garamond,"Times New Roman",serif;
  --text:"Libre Franklin","Franklin Gothic",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --fs-mega:clamp(54px,12.2vw,178px);
  --fs-display:clamp(38px,6.6vw,104px);
  --fs-h1:clamp(36px,5.2vw,74px);
  --fs-h2:clamp(29px,3.9vw,54px);
  --fs-index:clamp(96px,17vw,260px);

  --s1:8px; --s2:16px; --s3:24px; --s4:32px;
  --s5:48px; --s6:64px; --s7:96px; --s8:128px; --s9:184px;

  --rhythm:184px;
  --measure:62ch;
  --content:1320px;
  --gutter:24px;

  --ease:cubic-bezier(.16,1,.3,1);
  --t-slow:900ms;
  --t-fast:240ms;
}

@media (min-width:768px){ :root{ --gutter:48px; } }
@media (min-width:1280px){ :root{ --gutter:72px; } }
@media (max-width:1024px){ :root{ --rhythm:112px; } }
@media (max-width:640px){  :root{ --rhythm:80px; } }

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:120px;
  background:var(--obsidian);
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* Dark first. This is the brand's resting state, not a mode. */
body{
  margin:0;
  background:var(--obsidian);
  color:var(--on-dark);
  font-family:var(--text);
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,video{ max-width:100%; height:auto; display:block; }
button{ font:inherit; color:inherit; }

/* --------------------------------------------------------------------------
   3. Material
   Stone, not paper. Kingsgate's grain reads as pressed board; this reads as
   polished stone with a fine mineral tooth.
   -------------------------------------------------------------------------- */
.grain{ position:relative; isolation:isolate; }
.grain::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain > *{ position:relative; z-index:1; }

/* A very slow, very low radial. Depth on a dark ground without decoration. */
.glow{ position:relative; isolation:isolate; }
.glow::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 80% at 72% 18%,rgba(184,147,94,.10),transparent 62%);
}
.glow > *{ position:relative; z-index:1; }

/* Brushed brass sheen. Every stop is --brass or lighter, so the whole cycle
   stays at or above brass's 4.96:1 on the dark ground. Including a darker
   stop would look richer and would drop the sweep below AA. */
.foil{
  color:var(--brass);
  background:linear-gradient(100deg,
    var(--brass) 0%, var(--brass-light) 18%, var(--brass) 38%,
    var(--brass-light) 58%, var(--brass) 100%);
  background-size:300% 100%;
  animation:foil 16s var(--ease) infinite;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .foil{ -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
}
@keyframes foil{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }

/* --------------------------------------------------------------------------
   4. Type
   -------------------------------------------------------------------------- */
h1,h2,h3,h4{ margin:0; font-weight:400; color:inherit; }

.mega,.display-xl{
  font-family:var(--display); font-weight:300;
  letter-spacing:-.028em; line-height:.92;
}
.mega{ font-size:var(--fs-mega); }
.display-xl{ font-size:var(--fs-display); line-height:.98; letter-spacing:-.022em; }

h1{ font-family:var(--display); font-weight:300; font-size:var(--fs-h1); line-height:1.02; letter-spacing:-.022em; }
h2{ font-family:var(--display); font-weight:300; font-size:var(--fs-h2); line-height:1.06; letter-spacing:-.018em; }
h3{ font-family:var(--text); font-weight:600; font-size:19px; line-height:1.4; letter-spacing:-.004em; }
@media (min-width:768px){ h3{ font-size:21px; } }

p{ margin:0 0 var(--s3); max-width:var(--measure); }
p:last-child{ margin-bottom:0; }

.lead{ font-size:19px; line-height:1.62; color:var(--on-dark-muted); max-width:52ch; }
@media (min-width:768px){ .lead{ font-size:22px; line-height:1.56; } }

.small{ font-size:15px; line-height:1.6; }
.muted{ color:var(--on-dark-muted); }
.legal{ font-size:13px; line-height:1.7; color:var(--on-dark-faint); max-width:74ch; }
.tabular{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

a{ color:inherit; }
.prose a{
  color:inherit; text-decoration:underline;
  text-decoration-color:var(--rule-dark);
  text-underline-offset:.24em; text-decoration-thickness:1px;
  transition:text-decoration-color var(--t-fast) ease;
}
.prose a:hover{ text-decoration-color:var(--brass); }

/* Ivory inserts. The exception, not the ground. */
.on-light{ background:var(--ivory); color:var(--ink); }
.on-light-2{ background:var(--ivory-2); color:var(--ink); }
:is(.on-light,.on-light-2) .lead,
:is(.on-light,.on-light-2) .muted{ color:var(--ink-muted); }
:is(.on-light,.on-light-2) .legal{ color:var(--ink-muted); }
:is(.on-light,.on-light-2) .prose a{ text-decoration-color:var(--rule-light); }
:is(.on-light,.on-light-2) .prose a:hover{ text-decoration-color:var(--brass-deep); }

/* --------------------------------------------------------------------------
   5. The Register
   Brass numeral, hairline, tracked name. The proprietary device. It marks
   every section on every page, and it is what makes the site recognisable
   with the logo covered.
   -------------------------------------------------------------------------- */
.register{
  display:flex; align-items:baseline; gap:16px;
  margin:0 0 var(--s5);
}
.register .num{
  font-family:var(--display); font-weight:400;
  font-size:15px; line-height:1; letter-spacing:.06em;
  color:var(--brass);
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
}
.register .bar{
  flex:0 0 auto; width:clamp(28px,5vw,64px); height:1px;
  background:var(--rule-dark);
  transform:translateY(-4px);
}
.register .name{
  font-family:var(--text); font-weight:500;
  font-size:11px; line-height:1.2; letter-spacing:.34em; text-transform:uppercase;
  color:var(--on-dark-muted);
}
:is(.on-light,.on-light-2) .register .num{ color:var(--brass-deep); }
:is(.on-light,.on-light-2) .register .bar{ background:var(--rule-light); }
:is(.on-light,.on-light-2) .register .name{ color:var(--ink-muted); }

/* Standalone eyebrow, where a full register entry would be too much. */
.label{
  display:block; font-family:var(--text);
  font-size:11px; font-weight:500; line-height:1.2;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--brass); margin:0 0 var(--s4);
}
:is(.on-light,.on-light-2) .label{ color:var(--brass-deep); }

/* --------------------------------------------------------------------------
   6. Focus, skip, screen reader
   -------------------------------------------------------------------------- */
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; border-radius:1px; }
:is(.on-light,.on-light-2) :focus-visible{ outline-color:var(--brass-deep); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--ivory); color:var(--ink);
  padding:14px 20px; font-size:15px; text-decoration:none;
}
.skip:focus{ left:12px; top:12px; }

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

/* --------------------------------------------------------------------------
   7. The canvas
   -------------------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--content); margin-inline:auto; padding-inline:var(--gutter); }

.canvas{
  width:100%; max-width:var(--content); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:var(--s3); row-gap:var(--s5);
}
@media (min-width:900px){
  .canvas{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--s4); row-gap:var(--s6); }
}
.canvas > *{ grid-column:1 / -1; }

.canvas-narrow{
  width:100%; max-width:var(--content); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:var(--s3); row-gap:0;
}
/* Full width by default. Without this, children auto-place one per column on
   mobile and long-form pages overflow the viewport. */
.canvas-narrow > *{ grid-column:1 / -1; }
@media (min-width:900px){
  .canvas-narrow{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--s4); }
  .canvas-narrow > *{ grid-column:3 / span 7; }
}

@media (min-width:900px){
  .c-lead   { grid-column:1 / span 5; }
  .c-body   { grid-column:7 / span 6; }
  .c-body-w { grid-column:6 / span 7; }
  .c-narrow { grid-column:3 / span 7; }
  .c-left   { grid-column:1 / span 7; }
  .c-right  { grid-column:6 / span 7; }
  .c-half-l { grid-column:1 / span 6; }
  .c-half-r { grid-column:7 / span 6; }
  .c-inset  { grid-column:2 / span 10; }
}
.c-full{ grid-column:1 / -1; }

section{ padding-block:var(--rhythm); position:relative; }
section.tight{ padding-block:calc(var(--rhythm) * .55); }

/* Layered dark surfaces. Depth comes from value, not from borders. */
.surface-deep{ background:var(--forest-900); }
.surface-mid{ background:var(--forest-800); }
.surface-slate{ background:var(--slate); }

.rule{ height:1px; background:var(--rule-dark); border:0; margin:0; }
:is(.on-light,.on-light-2) .rule{ background:var(--rule-light); }

/* --------------------------------------------------------------------------
   8. The lockup
   Wordmark only. No mark is drawn until the authoritative vector exists:
   an approximation that differs from the real identity is worse than none.
   The reserved slot is documented in _internal-notes/LAUNCH-BLOCKERS.md.
   -------------------------------------------------------------------------- */
.lockup{ display:inline-flex; flex-direction:column; gap:6px; text-decoration:none; flex-shrink:0; min-height:44px; justify-content:center; }
.lockup-name{
  font-family:var(--display); font-weight:400;
  font-size:22px; line-height:1; letter-spacing:.30em;
  color:var(--on-dark); white-space:nowrap; padding-left:.30em;
}
.lockup-group{
  display:flex; align-items:center; gap:8px;
  font-family:var(--text); font-weight:500;
  font-size:10px; line-height:1; letter-spacing:.38em;
  color:var(--brass); white-space:nowrap; padding-left:.38em;
}
.lockup-group i{ display:block; height:1px; width:14px; background:var(--rule-dark); flex:1 1 auto; }

.lockup-stack{ display:inline-flex; flex-direction:column; align-items:center; gap:10px; text-decoration:none; }
.lockup-stack .lockup-name{ font-size:clamp(28px,4.4vw,44px); letter-spacing:.34em; }
.lockup-stack .lockup-group{ font-size:11px; letter-spacing:.5em; width:100%; }
.lockup-stack .lockup-group i{ width:auto; }

@media (max-width:420px){
  .lockup-name{ font-size:17px; letter-spacing:.22em; }
  .lockup-group{ font-size:8px; letter-spacing:.3em; }
}

/* --------------------------------------------------------------------------
   9. Header
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(10,28,23,.96);
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--rule-dark);
}
@supports not (backdrop-filter:blur(4px)){ .site-header{ background:var(--obsidian); } }

.site-header .bar{ display:flex; align-items:center; justify-content:space-between; gap:var(--s4); min-height:84px; }
@media (min-width:1024px){ .site-header .bar{ min-height:96px; } }

.nav{ display:none; }
@media (min-width:1024px){ .nav{ display:flex; align-items:center; gap:var(--s5); } }
.nav a{
  position:relative; color:var(--on-dark-muted); text-decoration:none;
  font-size:13px; letter-spacing:.16em; text-transform:uppercase; padding-block:10px;
  transition:color var(--t-fast) ease;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:2px; height:1px; width:100%;
  background:var(--brass); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-fast) var(--ease);
}
.nav a:hover{ color:var(--on-dark); }
.nav a:hover::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:var(--on-dark); }
.nav a[aria-current="page"]::after{ transform:scaleX(1); }

.nav .cta{
  border:1px solid var(--brass); color:var(--brass);
  padding:12px 22px; letter-spacing:.1em; font-size:12px;
}
.nav .cta::after{ display:none; }
.nav .cta:hover{ background:var(--brass); color:var(--obsidian); }

.menu-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-width:44px; min-height:44px; padding:10px 14px;
  background:transparent; border:1px solid var(--rule-dark); border-radius:1px;
  color:var(--on-dark);
  font-size:11px; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  cursor:pointer; transition:border-color var(--t-fast) ease;
}
.menu-btn:hover{ border-color:var(--brass); }
@media (min-width:1024px){ .menu-btn{ display:none; } }
.menu-btn .bars{ display:block; width:16px; height:9px; position:relative; }
.menu-btn .bars::before,.menu-btn .bars::after{
  content:""; position:absolute; left:0; right:0; height:1px; background:currentColor;
  transition:transform var(--t-fast) var(--ease);
}
.menu-btn .bars::before{ top:0; } .menu-btn .bars::after{ bottom:0; }
.menu-btn[aria-expanded="true"] .bars::before{ transform:translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .bars::after{ transform:translateY(-4px) rotate(-45deg); }

.mobile-nav{ display:none; background:var(--obsidian); border-top:1px solid var(--rule-dark); }
.mobile-nav.open{ display:block; }
@media (min-width:1024px){ .mobile-nav,.mobile-nav.open{ display:none; } }
.mobile-nav ul{ list-style:none; margin:0; padding:var(--s2) 0 var(--s4); }
.mobile-nav li{ display:flex; align-items:baseline; gap:14px; }
.mobile-nav li + li{ border-top:1px solid rgba(184,147,94,.14); }
.mobile-nav li .n{ font-family:var(--display); font-size:12px; color:var(--brass); flex-shrink:0; }
.mobile-nav a{
  display:block; padding:18px 0; min-height:44px; flex:1;
  color:var(--on-dark); text-decoration:none;
  font-family:var(--display); font-size:26px; letter-spacing:-.01em;
}
.mobile-nav a[aria-current="page"]{ color:var(--brass); }
.mobile-nav .cta-row{ padding-top:var(--s3); }

/* --------------------------------------------------------------------------
   10. The Spine
   One hairline for the whole document, branching at intervals. On a dark
   ground it finally reads as intended.
   -------------------------------------------------------------------------- */
main{ position:relative; }
.spine{
  --draw:0;
  position:absolute; top:0; bottom:0; left:24px; width:46px;
  pointer-events:none; z-index:3; display:none;
}
@media (min-width:1280px){ .spine{ display:block; } }
.spine svg{ width:100%; height:100%; }
.spine path{
  stroke:var(--brass); fill:none; stroke-width:1; vector-effect:non-scaling-stroke;
  stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--draw,0));
  opacity:.5;
}
.spine .branch{ opacity:.34; }
.spine-node{ fill:var(--brass); opacity:calc(var(--draw,0) * .6); }

/* --------------------------------------------------------------------------
   11. Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  min-height:52px; padding:15px 32px; border-radius:1px;
  font-size:13px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:background var(--t-fast) ease,color var(--t-fast) ease,border-color var(--t-fast) ease;
}
.btn-primary{ background:var(--brass); color:var(--obsidian); border-color:var(--brass); }
.btn-primary:hover{ background:var(--brass-light); border-color:var(--brass-light); }
:is(.on-light,.on-light-2) .btn-primary{ background:var(--obsidian); color:var(--ivory); border-color:var(--obsidian); }
:is(.on-light,.on-light-2) .btn-primary:hover{ background:var(--forest-800); border-color:var(--forest-800); }

.btn-ghost{ background:transparent; color:var(--on-dark); border-color:var(--rule-dark); }
.btn-ghost:hover{ border-color:var(--brass); color:var(--brass); }
:is(.on-light,.on-light-2) .btn-ghost{ color:var(--ink); border-color:var(--rule-light); }
:is(.on-light,.on-light-2) .btn-ghost:hover{ border-color:var(--ink); color:var(--ink); }

.btn-row{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s5); }

.link-arrow{
  display:inline-flex; align-items:center; gap:12px;
  text-decoration:none; font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass); padding-block:10px;
  border-bottom:1px solid var(--rule-dark);
  transition:border-color var(--t-fast) ease,gap var(--t-fast) var(--ease);
}
.link-arrow:hover{ border-color:var(--brass); gap:20px; }
.link-arrow svg{ width:18px; height:10px; flex-shrink:0; }
:is(.on-light,.on-light-2) .link-arrow{ color:var(--brass-deep); border-bottom-color:var(--rule-light); }
:is(.on-light,.on-light-2) .link-arrow:hover{ border-bottom-color:var(--brass-deep); }

/* --------------------------------------------------------------------------
   12. Hero and page openers
   No mark. The composition is typographic, which is honest while the
   identity is wordmark-only, and stands on its own once the mark arrives.
   -------------------------------------------------------------------------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--obsidian); color:var(--on-dark);
  padding-block:140px var(--s7); overflow:hidden;
}
@supports not (min-height:100svh){ .hero{ min-height:100vh; } }
.hero h1,.hero .mega{ color:var(--on-dark); }
.hero-desc{ margin-top:var(--s5); max-width:36ch; font-size:17px; line-height:1.7; color:var(--on-dark-muted); }
@media (min-width:900px){ .hero-desc{ font-size:18px; } }

.hero-foot{
  margin-top:var(--s7); display:flex; align-items:center; gap:var(--s3);
  font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--on-dark-faint);
}
.hero-foot .stem{ display:block; width:1px; height:56px; background:var(--rule-dark); position:relative; overflow:hidden; }
.hero-foot .stem::after{ content:""; position:absolute; inset:0; background:var(--brass); animation:stem 2.6s var(--ease) infinite; }
@keyframes stem{ 0%{ transform:translateY(-100%); } 55%,100%{ transform:translateY(100%); } }

.page-head{
  position:relative; overflow:hidden;
  background:var(--obsidian); color:var(--on-dark);
  padding-block:clamp(120px,17vw,220px) clamp(72px,9vw,128px);
}
.page-head h1{ color:var(--on-dark); }

/* --------------------------------------------------------------------------
   13. Editorial components
   -------------------------------------------------------------------------- */

/* The Ledger. Alternating bands with an oversized index numeral. */
.ledger{ border-top:1px solid var(--rule-dark); }
:is(.on-light,.on-light-2) .ledger{ border-top-color:var(--rule-light); }
.ledger-row{
  display:grid; grid-template-columns:1fr; gap:var(--s3);
  padding-block:var(--s7); border-bottom:1px solid var(--rule-dark); position:relative;
}
:is(.on-light,.on-light-2) .ledger-row{ border-bottom-color:var(--rule-light); }
@media (min-width:900px){
  .ledger-row{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--s4); align-items:start; }
  .ledger-row .idx  { grid-column:1 / span 3; }
  .ledger-row .body { grid-column:5 / span 6; }
  .ledger-row:nth-child(even) .idx  { grid-column:10 / span 3; grid-row:1; text-align:right; }
  .ledger-row:nth-child(even) .body { grid-column:2 / span 6; grid-row:1; }
}
.ledger-row .idx{
  font-family:var(--display); font-weight:300;
  font-size:var(--fs-index); line-height:.78; letter-spacing:-.04em;
  color:var(--brass); opacity:.30;
  font-variant-numeric:tabular-nums; user-select:none;
}
:is(.on-light,.on-light-2) .ledger-row .idx{ color:var(--brass-deep); opacity:.26; }
.ledger-row .body h3{
  font-family:var(--display); font-weight:300;
  font-size:clamp(30px,3.4vw,46px); line-height:1.04; letter-spacing:-.018em;
  margin-bottom:var(--s3);
}
.ledger-row .body p{ color:var(--on-dark-muted); max-width:46ch; }
:is(.on-light,.on-light-2) .ledger-row .body p{ color:var(--ink-muted); }
.ledger-row .body .link-arrow{ margin-top:var(--s3); }

.item{ border-top:1px solid var(--rule-dark); padding-top:var(--s3); }
:is(.on-light,.on-light-2) .item{ border-top-color:var(--rule-light); }
.item h3{ margin-bottom:var(--s2); }
.item p{ color:var(--on-dark-muted); margin-bottom:var(--s3); }
:is(.on-light,.on-light-2) .item p{ color:var(--ink-muted); }

.grid{ display:grid; gap:var(--s5); }
@media (min-width:700px){ .grid.two{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .grid.three{ grid-template-columns:repeat(3,1fr); gap:var(--s6); } }

/* The Room. Who Oakspire Group works with, as a register of standings. */
.room{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule-dark); }
:is(.on-light,.on-light-2) .room{ border-top-color:var(--rule-light); }
.room li{ border-bottom:1px solid var(--rule-dark); padding:var(--s4) 0; display:grid; gap:10px; }
:is(.on-light,.on-light-2) .room li{ border-bottom-color:var(--rule-light); }
@media (min-width:768px){
  .room li{ grid-template-columns:44px minmax(0,4fr) minmax(0,7fr); gap:var(--s4); align-items:baseline; }
}
.room .n{
  font-family:var(--display); font-size:14px; color:var(--brass);
  font-variant-numeric:tabular-nums;
}
:is(.on-light,.on-light-2) .room .n{ color:var(--brass-deep); }
.room .who{
  font-family:var(--display); font-weight:400;
  font-size:clamp(22px,2.4vw,30px); line-height:1.15; letter-spacing:-.012em;
}
.room .what{ color:var(--on-dark-muted); font-size:16px; }
:is(.on-light,.on-light-2) .room .what{ color:var(--ink-muted); }

.steps{ list-style:none; margin:0; padding:0; counter-reset:step; }
.steps > li{ counter-increment:step; border-top:1px solid var(--rule-dark); padding:var(--s5) 0; display:grid; gap:var(--s2); }
:is(.on-light,.on-light-2) .steps > li{ border-top-color:var(--rule-light); }
@media (min-width:768px){ .steps > li{ grid-template-columns:120px minmax(0,1fr); gap:var(--s6); align-items:start; } }
.steps > li::before{
  content:counter(step,upper-roman);
  font-family:var(--display); font-weight:300; font-size:34px; line-height:1;
  color:var(--brass); opacity:.85; letter-spacing:.04em;
}
:is(.on-light,.on-light-2) .steps > li::before{ color:var(--brass-deep); }
.steps h3{ margin-bottom:var(--s1); }
.steps p{ color:var(--on-dark-muted); margin-bottom:0; }
:is(.on-light,.on-light-2) .steps p{ color:var(--ink-muted); }
.steps .when{ display:block; margin-top:var(--s2); font-size:11px; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--on-dark-faint); }
:is(.on-light,.on-light-2) .steps .when{ color:var(--ink-muted); }

.defs{ margin:0; }
.defs > div{ border-top:1px solid var(--rule-dark); padding:var(--s5) 0; display:grid; gap:var(--s2); }
:is(.on-light,.on-light-2) .defs > div{ border-top-color:var(--rule-light); }
@media (min-width:768px){ .defs > div{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:var(--s6); align-items:start; } }
.defs dt{ font-family:var(--display); font-weight:400; font-size:24px; line-height:1.2; letter-spacing:-.012em; }
.defs dd{ margin:0; color:var(--on-dark-muted); }
:is(.on-light,.on-light-2) .defs dd{ color:var(--ink-muted); }

.statement{
  font-family:var(--display); font-weight:300;
  font-size:var(--fs-display); line-height:1.04; letter-spacing:-.022em;
  max-width:19ch; margin:0;
}

/* Lists inside prose. A component, not an inline colour: hardcoded ink
   values are exactly what broke when the site inverted to dark-first. */
.bullets{ margin:0 0 var(--s3); padding-left:22px; max-width:var(--measure); color:var(--on-dark-muted); }
.bullets li{ margin-bottom:12px; }
.bullets li::marker{ color:var(--brass); }
:is(.on-light,.on-light-2) .bullets{ color:var(--ink-muted); }
:is(.on-light,.on-light-2) .bullets li::marker{ color:var(--brass-deep); }

/* An opening paragraph that carries full text weight rather than muted. */
.lead-strong{ color:var(--on-dark); }
:is(.on-light,.on-light-2) .lead-strong{ color:var(--ink); }

.faq{ border-top:1px solid var(--rule-dark); }
:is(.on-light,.on-light-2) .faq{ border-top-color:var(--rule-light); }
.faq details{ border-bottom:1px solid var(--rule-dark); }
:is(.on-light,.on-light-2) .faq details{ border-bottom-color:var(--rule-light); }
.faq summary{
  list-style:none; cursor:pointer; position:relative;
  padding:var(--s5) 56px var(--s5) 0; min-height:44px;
  font-family:var(--display); font-weight:400;
  font-size:clamp(21px,2.2vw,28px); line-height:1.25; letter-spacing:-.012em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:10px; top:50%;
  width:13px; height:13px; margin-top:-8px;
  border-right:1px solid var(--brass); border-bottom:1px solid var(--brass);
  transform:rotate(45deg); transition:transform var(--t-fast) var(--ease);
}
:is(.on-light,.on-light-2) .faq summary::after{ border-color:var(--brass-deep); }
.faq details[open] summary::after{ transform:rotate(-135deg); }
.faq .answer{ padding:0 0 var(--s5); }
.faq .answer p{ color:var(--on-dark-muted); max-width:58ch; }
:is(.on-light,.on-light-2) .faq .answer p{ color:var(--ink-muted); }

.disclosure{ border-top:1px solid var(--rule-dark); border-bottom:1px solid var(--rule-dark); padding-block:var(--s5); }
:is(.on-light,.on-light-2) .disclosure{ border-color:var(--rule-light); }

.detail{ border-top:1px solid var(--rule-dark); padding:var(--s4) 0; }
:is(.on-light,.on-light-2) .detail{ border-top-color:var(--rule-light); }
.detail .k{ display:block; margin-bottom:8px; font-size:11px; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--brass); }
:is(.on-light,.on-light-2) .detail .k{ color:var(--brass-deep); }
.detail .v{ font-family:var(--display); font-size:24px; line-height:1.3; }
.detail .v a{ text-decoration:none; border-bottom:1px solid var(--rule-dark); }
.detail .v a:hover{ border-bottom-color:currentColor; }

.tbd{
  display:inline-block; font-family:var(--text);
  font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-dark-faint); border:1px dashed var(--rule-dark); padding:5px 12px;
}
:is(.on-light,.on-light-2) .tbd{ color:var(--ink-muted); border-color:var(--rule-light); }

.entries{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule-dark); }
:is(.on-light,.on-light-2) .entries{ border-top-color:var(--rule-light); }
.entries li{ border-bottom:1px solid var(--rule-dark); }
:is(.on-light,.on-light-2) .entries li{ border-bottom-color:var(--rule-light); }
.entries a{ display:grid; gap:var(--s2); padding:var(--s6) 0; text-decoration:none; transition:opacity var(--t-fast) ease; }
@media (min-width:768px){ .entries a{ grid-template-columns:minmax(0,3fr) minmax(0,9fr); gap:var(--s6); align-items:baseline; } }
.entries a:hover{ opacity:.62; }
.entries .meta{ font-size:11px; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--brass); }
:is(.on-light,.on-light-2) .entries .meta{ color:var(--brass-deep); }
.entries h3{ margin:0; font-family:var(--display); font-weight:300; font-size:clamp(26px,3vw,38px); line-height:1.1; letter-spacing:-.018em; }
.entries .sum{ color:var(--on-dark-muted); font-size:16px; margin-top:12px; max-width:56ch; }
:is(.on-light,.on-light-2) .entries .sum{ color:var(--ink-muted); }

/* --------------------------------------------------------------------------
   14. Footer
   Brand-first. One required legal line, nothing more. The rest lives on the
   dedicated legal pages where it belongs.
   -------------------------------------------------------------------------- */
.site-footer{ background:var(--forest-900); color:var(--on-dark); padding-block:var(--s9) var(--s5); position:relative; overflow:hidden; }
.site-footer a{ color:var(--on-dark-muted); text-decoration:none; }
.site-footer a:hover{ color:var(--on-dark); }

.footer-mark{ text-align:center; padding-bottom:var(--s8); }
.footer-cols{ display:grid; gap:var(--s5); padding-bottom:var(--s7); }
@media (min-width:600px){ .footer-cols{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:900px){ .footer-cols{ gap:var(--s7); } }
.footer-cols h2{
  font-family:var(--text); font-size:11px; font-weight:500; line-height:1.2;
  letter-spacing:.3em; text-transform:uppercase; color:var(--brass); margin:0 0 var(--s3);
}
.footer-cols ul{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.footer-cols a{ display:block; font-size:15px; padding-block:13px; }
@media (min-width:1024px){ .footer-cols ul{ gap:12px; } .footer-cols a{ display:inline-block; padding-block:0; } }

.footer-bottom{ border-top:1px solid var(--rule-dark); padding-top:var(--s5); display:grid; gap:var(--s3); }
@media (min-width:900px){ .footer-bottom{ grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--s7); } }
.footer-bottom .legal{ color:var(--on-dark-faint); font-size:12px; max-width:64ch; }
.footer-bottom .links{ display:flex; flex-wrap:wrap; gap:var(--s2); font-size:13px; letter-spacing:.06em; }
.footer-bottom .links a{ display:inline-block; padding:13px 8px; }
@media (min-width:1024px){ .footer-bottom .links{ gap:var(--s3); } .footer-bottom .links a{ padding:0; } }

/* --------------------------------------------------------------------------
   15. Motion. Fail-visible by construction.
   -------------------------------------------------------------------------- */
.intro{ animation:intro var(--t-slow) var(--ease); }
.intro-2{ animation:intro var(--t-slow) var(--ease) 120ms; }
.intro-3{ animation:intro var(--t-slow) var(--ease) 240ms; }
.intro-4{ animation:intro var(--t-slow) var(--ease) 400ms; }
@keyframes intro{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

.js .rise{ opacity:0; transform:translateY(16px); }
.rise.in{ opacity:1; transform:none; transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease); }

.js .reveal-line{ overflow:hidden; display:block; padding-bottom:.16em; margin-bottom:-.16em; }
.js .reveal-line > span{ display:block; transform:translateY(105%); }
.reveal-line.in > span{ transform:none; transition:transform 1000ms var(--ease); transition-delay:calc(var(--l,0) * 90ms); }

@media (prefers-reduced-motion:reduce){
  .intro,.intro-2,.intro-3,.intro-4{ animation:none !important; }
  .foil,.hero-foot .stem::after{ animation:none !important; }
  .rise,.rise.in{ opacity:1 !important; transform:none !important; transition:none !important; }
  .reveal-line > span{ transform:none !important; transition:none !important; }
  .spine path{ stroke-dashoffset:0 !important; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

.no-js .rise{ opacity:1 !important; transform:none !important; }
.no-js .reveal-line > span{ transform:none !important; }

/* --------------------------------------------------------------------------
   16. Print
   -------------------------------------------------------------------------- */
@media print{
  .site-header,.mobile-nav,.btn-row,.skip,.spine{ display:none !important; }
  html,body{ background:#fff !important; color:#000 !important; }
  section,.hero,.page-head,.site-footer,.surface-deep,.surface-mid,.surface-slate,.on-light,.on-light-2{
    background:#fff !important; color:#000 !important;
  }
  h1,h2,h3,.mega,.display-xl,.statement,.lockup-name{ color:#000 !important; }
  .foil{ -webkit-text-fill-color:#000 !important; color:#000 !important; background:none !important; }
  .lead,.muted,.legal,p{ color:#222 !important; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; }
}

/* ==========================================================================
   17. THE LEDGER AND THE INSTRUMENTS
   The proprietary layer. Everything above this point is craft; this is the
   part that belongs only to Oakspire.

   The premise: a capital advisory firm is most memorable when it hands you a
   tool that works against its own sales interest. Nobody else in this
   category will show you what their product actually costs. These do.

   All three instruments share one frame, one grid, one figure treatment and
   one numeric style, so they read as a system rather than three widgets, and
   so a future portal or deal room inherits the same language.
   ========================================================================== */

/* -- The Ledger grid ------------------------------------------------------
   A fine brass rule grid, like engineering paper or a bound ledger. It is
   the substrate behind every instrument and the connective tissue of the
   whole system. */
.ledger-grid{ position:relative; isolation:isolate; }
.ledger-grid::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(184,147,94,.13) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(184,147,94,.13) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%,#000 20%,transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 40%,#000 20%,transparent 78%);
}
.ledger-grid > *{ position:relative; z-index:1; }
:is(.on-light,.on-light-2).ledger-grid::before{
  background-image:
    linear-gradient(to right, rgba(125,96,52,.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(125,96,52,.15) 1px, transparent 1px);
}

/* -- Instrument frame ----------------------------------------------------- */
.instrument{
  margin:0;
  border-top:1px solid var(--brass);
  border-bottom:1px solid var(--rule-dark);
  padding-block:var(--s5) var(--s4);
  position:relative;
}
:is(.on-light,.on-light-2) .instrument{ border-top-color:var(--brass-deep); border-bottom-color:var(--rule-light); }

.inst-head{ margin-bottom:var(--s5); }
.inst-head h3{
  font-family:var(--display); font-weight:300;
  font-size:clamp(26px,3vw,40px); line-height:1.06; letter-spacing:-.018em;
  margin-bottom:var(--s2);
}
.inst-sub{ color:var(--on-dark-muted); font-size:16px; max-width:56ch; }
:is(.on-light,.on-light-2) .inst-sub{ color:var(--ink-muted); }

.inst-body{ display:grid; gap:var(--s5); }
@media (min-width:900px){
  .inst-body{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--s7); align-items:start; }
}

/* -- Controls -------------------------------------------------------------
   Real range inputs. Labels are visible, values are live, and every control
   is keyboard operable, because an instrument that only works with a mouse
   is a decoration. */
.ctrl{ display:grid; gap:10px; padding-block:var(--s3); border-top:1px solid var(--rule-dark); }
:is(.on-light,.on-light-2) .ctrl{ border-top-color:var(--rule-light); }
.ctrl:first-child{ border-top:0; padding-top:0; }
.ctrl-row{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s2); }
.ctrl label{
  font-size:11px; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  color:var(--on-dark-muted);
}
:is(.on-light,.on-light-2) .ctrl label{ color:var(--ink-muted); }
.ctrl output{
  font-family:var(--display); font-size:26px; line-height:1;
  color:var(--brass); font-variant-numeric:tabular-nums;
}
:is(.on-light,.on-light-2) .ctrl output{ color:var(--brass-deep); }

input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:44px; margin:0; background:transparent; cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{ height:1px; background:var(--rule-dark); }
input[type=range]::-moz-range-track{ height:1px; background:var(--rule-dark); }
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:13px; height:13px; margin-top:-6px; border-radius:50%;
  background:var(--brass); border:0;
  transition:transform var(--t-fast) var(--ease);
}
input[type=range]::-moz-range-thumb{
  width:13px; height:13px; border-radius:50%; background:var(--brass); border:0;
}
input[type=range]:hover::-webkit-slider-thumb{ transform:scale(1.25); }
input[type=range]:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 4px rgba(184,147,94,.32); }
:is(.on-light,.on-light-2) input[type=range]::-webkit-slider-runnable-track{ background:var(--rule-light); }
:is(.on-light,.on-light-2) input[type=range]::-moz-range-track{ background:var(--rule-light); }
:is(.on-light,.on-light-2) input[type=range]::-webkit-slider-thumb{ background:var(--brass-deep); }
:is(.on-light,.on-light-2) input[type=range]::-moz-range-thumb{ background:var(--brass-deep); }

/* Segmented control, for discrete choices. */
.seg{ display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--rule-dark); }
:is(.on-light,.on-light-2) .seg{ border-color:var(--rule-light); }
.seg button{
  flex:1 1 auto; min-height:44px; padding:10px 14px;
  background:transparent; border:0; border-left:1px solid var(--rule-dark);
  color:var(--on-dark-muted); cursor:pointer;
  font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  transition:color var(--t-fast) ease,background var(--t-fast) ease;
}
.seg button:first-child{ border-left:0; }
:is(.on-light,.on-light-2) .seg button{ border-left-color:var(--rule-light); color:var(--ink-muted); }
.seg button:hover{ color:var(--on-dark); }
:is(.on-light,.on-light-2) .seg button:hover{ color:var(--ink); }
.seg button[aria-pressed="true"]{ background:var(--brass); color:var(--obsidian); }

/* -- Readout --------------------------------------------------------------
   Bloomberg, not Canva. Hairlines, tabular figures, one accent, no gradients,
   no rounded cards, no drop shadows. */
.readout-primary{ border-top:1px solid var(--brass); padding-top:var(--s3); margin-bottom:var(--s4); }
:is(.on-light,.on-light-2) .readout-primary{ border-top-color:var(--brass-deep); }
.readout-primary .k{
  display:block; font-size:11px; font-weight:500; letter-spacing:.26em;
  text-transform:uppercase; color:var(--on-dark-muted); margin-bottom:12px;
}
:is(.on-light,.on-light-2) .readout-primary .k{ color:var(--ink-muted); }
.readout-primary .v{
  font-family:var(--display); font-weight:300;
  font-size:clamp(54px,8vw,104px); line-height:.9; letter-spacing:-.03em;
  color:var(--brass); font-variant-numeric:tabular-nums; display:block;
}
:is(.on-light,.on-light-2) .readout-primary .v{ color:var(--brass-deep); }
.readout-primary .v.warn{ color:#E09A72; }
:is(.on-light,.on-light-2) .readout-primary .v.warn{ color:#9C4A21; }
.readout-primary .note{ display:block; margin-top:var(--s2); font-size:15px; color:var(--on-dark-muted); max-width:44ch; }
:is(.on-light,.on-light-2) .readout-primary .note{ color:var(--ink-muted); }

.readout-rows{ display:grid; margin:0; }
.readout-rows > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
  padding:14px 0; border-top:1px solid var(--rule-dark);
}
:is(.on-light,.on-light-2) .readout-rows > div{ border-top-color:var(--rule-light); }
.readout-rows dt{ font-size:14px; color:var(--on-dark-muted); }
:is(.on-light,.on-light-2) .readout-rows dt{ color:var(--ink-muted); }
.readout-rows dd{ margin:0; font-family:var(--display); font-size:21px; font-variant-numeric:tabular-nums; }

/* -- Comparison bars ------------------------------------------------------ */
.bars{ display:grid; gap:0; margin-top:var(--s4); }
.bars .bar-row{ padding:12px 0; border-top:1px solid var(--rule-dark); display:grid; gap:8px; }
:is(.on-light,.on-light-2) .bars .bar-row{ border-top-color:var(--rule-light); }
.bars .bar-label{ display:flex; justify-content:space-between; gap:var(--s2); font-size:13px; color:var(--on-dark-muted); }
:is(.on-light,.on-light-2) .bars .bar-label{ color:var(--ink-muted); }
.bars .bar-label .n{ font-variant-numeric:tabular-nums; font-family:var(--display); font-size:18px; color:var(--on-dark); }
:is(.on-light,.on-light-2) .bars .bar-label .n{ color:var(--ink); }
.bars .track{ height:3px; background:rgba(184,147,94,.18); position:relative; overflow:hidden; }
:is(.on-light,.on-light-2) .bars .track{ background:rgba(125,96,52,.18); }
.bars .fill{
  position:absolute; inset:0 auto 0 0; width:100%;
  background:var(--brass);
  transform-origin:left; transform:scaleX(var(--v,0));
  transition:transform 420ms var(--ease);
}
.bars .bar-row.subject .fill{ background:var(--brass-light); }
:is(.on-light,.on-light-2) .bars .fill{ background:var(--brass-deep); }
:is(.on-light,.on-light-2) .bars .bar-row.subject .fill{ background:#8F6B2E; }

/* -- The load beam, for the Capacity instrument -------------------------- */
.beam{ margin-top:var(--s5); }
.beam-track{
  position:relative; height:56px;
  border-left:1px solid var(--rule-dark); border-right:1px solid var(--rule-dark);
}
:is(.on-light,.on-light-2) .beam-track{ border-color:var(--rule-light); }
.beam-track::before{
  content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--rule-dark);
}
:is(.on-light,.on-light-2) .beam-track::before{ background:var(--rule-light); }
/* The line is drawn by a pseudo-element rather than the element itself, so
   the label is never a child of a brass-filled box. It renders over the
   section ground where its contrast is real. */
.beam-threshold{
  position:absolute; top:0; bottom:0; width:1px; background:transparent;
  left:calc(var(--t,.5) * 100%);
}
.beam-threshold::before{
  content:""; position:absolute; inset:0; background:var(--brass);
}
:is(.on-light,.on-light-2) .beam-threshold::before{ background:var(--brass-deep); }
.beam-threshold span{
  position:absolute; top:-24px; left:0; transform:translateX(-50%); white-space:nowrap;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass);
}
:is(.on-light,.on-light-2) .beam-threshold span{ color:var(--brass-deep); }
.beam-marker{
  position:absolute; top:50%; width:15px; height:15px; margin:-7px 0 0 -7px;
  border-radius:50%; background:var(--brass-light);
  left:calc(var(--p,.2) * 100%);
  transition:left 420ms var(--ease),background var(--t-fast) ease;
}
:is(.on-light,.on-light-2) .beam-marker{ background:#8F6B2E; }
.beam-marker.over{ background:#E09A72; }
.beam-scale{ display:flex; justify-content:space-between; margin-top:12px; font-size:11px; letter-spacing:.16em; color:var(--on-dark-faint); }
:is(.on-light,.on-light-2) .beam-scale{ color:var(--ink-muted); }

/* -- The Network ----------------------------------------------------------
   Owners, operators, investors, lenders and property, and what actually
   moves between them. Deterministic layout on a radial grid, keyboard
   operable, with a table underneath for anyone who cannot use the graph. */
.network{ display:grid; gap:var(--s5); }
@media (min-width:900px){ .network{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--s7); align-items:center; } }
.network-figure svg{ width:100%; height:auto; overflow:visible; }
.net-edge{ stroke:var(--rule-dark); stroke-width:1; fill:none; transition:stroke var(--t-fast) ease,stroke-width var(--t-fast) ease; }
.net-edge.lit{ stroke:var(--brass); stroke-width:1.6; }
.net-ring{ fill:none; stroke:rgba(184,147,94,.14); stroke-width:1; }
.net-node{ cursor:pointer; }
.net-node circle{ fill:var(--obsidian); stroke:var(--brass); stroke-width:1; transition:fill var(--t-fast) ease; }
.net-node text{ fill:var(--on-dark-muted); font-family:var(--text); font-size:9px; font-weight:500; letter-spacing:.18em; transition:fill var(--t-fast) ease; }
.net-node[aria-pressed="true"] circle,.net-node:hover circle{ fill:var(--brass); }
.net-node[aria-pressed="true"] text,.net-node:hover text{ fill:var(--on-dark); }
.net-node:focus-visible circle{ stroke-width:2.6; }
.network-readout{ border-top:1px solid var(--brass); padding-top:var(--s3); }
.network-readout h4{
  font-family:var(--display); font-weight:300; font-size:clamp(24px,2.6vw,34px);
  line-height:1.1; letter-spacing:-.016em; margin:0 0 var(--s2);
}
.network-readout p{ color:var(--on-dark-muted); font-size:16px; max-width:44ch; }
.network-flows{ list-style:none; margin:var(--s3) 0 0; padding:0; display:grid; }
.network-flows li{ padding:11px 0; border-top:1px solid var(--rule-dark); font-size:14px; color:var(--on-dark-muted); display:flex; gap:14px; }
.network-flows .to{ color:var(--brass); flex-shrink:0; font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; min-width:10ch; padding-top:3px; }

/* -- Shared instrument footnote ------------------------------------------ */
.inst-note{
  margin-top:var(--s4); padding-top:var(--s3);
  border-top:1px solid var(--rule-dark);
  font-size:12px; line-height:1.7; color:var(--on-dark-faint); max-width:74ch;
}
:is(.on-light,.on-light-2) .inst-note{ border-top-color:var(--rule-light); color:var(--ink-muted); }

@media (prefers-reduced-motion:reduce){
  .bars .fill,.beam-marker,.net-edge,.net-node circle{ transition:none !important; }
}

@media print{
  .ledger-grid::before{ display:none !important; }
  .instrument,.ctrl,.readout-primary,.network-readout{ border-color:#999 !important; }
  .readout-primary .v,.ctrl output,.network-flows .to{ color:#000 !important; }
  input[type=range],.seg{ display:none !important; }
  .bars .fill,.beam-marker{ background:#000 !important; }
}

/* ==========================================================================
   18. THE INQUIRY FORM
   Inherits the instrument control language: hairlines, tracked labels, brass
   accent, no rounded boxes. A form on this site should look like the rest of
   the system, not like a plugin dropped into it.
   ========================================================================== */
.form-section{ padding-block:var(--rhythm); position:relative; }

.inquiry fieldset{ border:0; margin:0 0 var(--s6); padding:0; }
.inquiry legend{
  padding:0 0 var(--s3);
  font-size:11px; font-weight:500; letter-spacing:.3em; text-transform:uppercase;
  color:var(--brass); width:100%; border-bottom:1px solid var(--rule-dark);
  margin-bottom:var(--s4);
}
:is(.on-light,.on-light-2) .inquiry legend{ color:var(--brass-deep); border-bottom-color:var(--rule-light); }

.field-grid{ display:grid; gap:var(--s4); }
@media (min-width:700px){ .field-grid{ grid-template-columns:1fr 1fr; } .field.span-2{ grid-column:1 / -1; } }

.field{ display:grid; gap:8px; }
.field label{
  font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--on-dark-muted); display:flex; align-items:baseline; gap:8px;
}
:is(.on-light,.on-light-2) .field label{ color:var(--ink-muted); }
.field .req{ color:var(--brass); }
:is(.on-light,.on-light-2) .field .req{ color:var(--brass-deep); }
.field .opt{ font-size:10px; letter-spacing:.16em; opacity:.7; text-transform:none; }

/* Inputs are underlines, not boxes. Same discipline as the rest of the site:
   no bordered cards anywhere. */
.inquiry input[type=text],
.inquiry input[type=email],
.inquiry input[type=tel],
.inquiry input[type=url],
.inquiry select,
.inquiry textarea{
  width:100%; min-height:48px;
  padding:12px 2px;
  background:transparent;
  border:0; border-bottom:1px solid var(--rule-dark);
  border-radius:0;
  color:var(--on-dark);
  font-family:var(--text); font-size:17px; line-height:1.5;
  transition:border-color var(--t-fast) ease;
  -webkit-appearance:none; appearance:none;
}
:is(.on-light,.on-light-2) .inquiry input,
:is(.on-light,.on-light-2) .inquiry select,
:is(.on-light,.on-light-2) .inquiry textarea{ color:var(--ink); border-bottom-color:var(--rule-light); }

.inquiry textarea{ resize:vertical; min-height:132px; }
.inquiry select{
  cursor:pointer; padding-right:28px;
  background-image:linear-gradient(45deg,transparent 50%,var(--brass) 50%),linear-gradient(135deg,var(--brass) 50%,transparent 50%);
  background-position:calc(100% - 12px) calc(50% + 2px),calc(100% - 7px) calc(50% + 2px);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.inquiry select option{ background:var(--forest-800); color:var(--on-dark); }
:is(.on-light,.on-light-2) .inquiry select option{ background:var(--ivory); color:var(--ink); }

.inquiry input:focus,.inquiry select:focus,.inquiry textarea:focus{ outline:none; border-bottom-color:var(--brass); }
.inquiry input:focus-visible,.inquiry select:focus-visible,.inquiry textarea:focus-visible{
  outline:2px solid var(--brass); outline-offset:3px;
}
.inquiry [aria-invalid="true"]{ border-bottom-color:#E09A72; border-bottom-width:2px; }
:is(.on-light,.on-light-2) .inquiry [aria-invalid="true"]{ border-bottom-color:#9C4A21; }

/* Errors sit under the field they belong to, never only at the top. */
.field-err{ margin:0; font-size:14px; line-height:1.5; color:#E09A72; }
:is(.on-light,.on-light-2) .field-err{ color:#9C4A21; }
.field-help{ margin:0; font-size:14px; line-height:1.5; color:var(--on-dark-faint); }
:is(.on-light,.on-light-2) .field-help{ color:var(--ink-muted); }

.form-alert{
  border-left:2px solid #E09A72; padding:14px 18px; margin-bottom:var(--s5);
  font-size:15px; color:var(--on-dark);
  background:rgba(224,154,114,.08);
}
:is(.on-light,.on-light-2) .form-alert{ color:var(--ink); border-left-color:#9C4A21; background:rgba(156,74,33,.07); }

.consent{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; padding-block:var(--s3); }
.consent input[type=checkbox]{
  width:22px; height:22px; margin:2px 0 0; flex-shrink:0;
  accent-color:var(--brass); cursor:pointer;
}
.consent label{ font-size:15px; line-height:1.6; color:var(--on-dark-muted); cursor:pointer; }
:is(.on-light,.on-light-2) .consent label{ color:var(--ink-muted); }
.consent label a{ color:inherit; text-decoration:underline; text-underline-offset:.2em; }

/* Honeypot. Off-screen rather than display:none, so bots still fill it. */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--rule-dark); }
:is(.on-light,.on-light-2) .form-actions{ border-top-color:var(--rule-light); }
.form-note{ margin:0; font-size:14px; color:var(--on-dark-faint); }
:is(.on-light,.on-light-2) .form-note{ color:var(--ink-muted); }
.inquiry button[disabled]{ opacity:.5; cursor:default; }

.form-success,.form-offline{ border-top:1px solid var(--brass); padding-top:var(--s4); }
:is(.on-light,.on-light-2) .form-success,
:is(.on-light,.on-light-2) .form-offline{ border-top-color:var(--brass-deep); }
.form-success h3,.form-offline h3{
  font-family:var(--display); font-weight:300;
  font-size:clamp(26px,3vw,38px); line-height:1.1; letter-spacing:-.018em; margin-bottom:var(--s2);
}
.form-success p,.form-offline p{ color:var(--on-dark-muted); }
:is(.on-light,.on-light-2) .form-success p,
:is(.on-light,.on-light-2) .form-offline p{ color:var(--ink-muted); }

/* Restrained social. Two links and a line, not a creator page. */
.social{ border-top:1px solid var(--rule-dark); padding-top:var(--s4); margin-top:var(--s6); }
:is(.on-light,.on-light-2) .social{ border-top-color:var(--rule-light); }
.social h3{
  font-family:var(--display); font-weight:300; font-size:clamp(22px,2.4vw,30px);
  line-height:1.15; letter-spacing:-.014em; margin-bottom:var(--s2);
}
.social p{ color:var(--on-dark-muted); font-size:16px; max-width:52ch; }
:is(.on-light,.on-light-2) .social p{ color:var(--ink-muted); }
.social-links{ display:flex; flex-wrap:wrap; gap:var(--s4); margin-top:var(--s3); list-style:none; padding:0; }
.social-links a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass); text-decoration:none; border-bottom:1px solid var(--rule-dark);
  transition:border-color var(--t-fast) ease;
}
.social-links a:hover{ border-bottom-color:var(--brass); }
:is(.on-light,.on-light-2) .social-links a{ color:var(--brass-deep); border-bottom-color:var(--rule-light); }

/* Instruments index cards, reusing the ledger row language. */
.inst-index{ border-top:1px solid var(--rule-dark); }
:is(.on-light,.on-light-2) .inst-index{ border-top-color:var(--rule-light); }
.inst-index a{
  display:grid; gap:var(--s2); padding:var(--s6) 0; text-decoration:none;
  border-bottom:1px solid var(--rule-dark); transition:opacity var(--t-fast) ease;
}
:is(.on-light,.on-light-2) .inst-index a{ border-bottom-color:var(--rule-light); }
@media (min-width:768px){ .inst-index a{ grid-template-columns:minmax(0,3fr) minmax(0,9fr); gap:var(--s6); align-items:baseline; } }
.inst-index a:hover{ opacity:.66; }
.inst-index .n{ font-family:var(--display); font-size:15px; letter-spacing:.06em; color:var(--brass); }
:is(.on-light,.on-light-2) .inst-index .n{ color:var(--brass-deep); }
.inst-index h3{
  font-family:var(--display); font-weight:300; font-size:clamp(26px,3vw,38px);
  line-height:1.1; letter-spacing:-.018em; margin:0;
}
.inst-index p{ color:var(--on-dark-muted); font-size:16px; margin-top:10px; max-width:56ch; }
:is(.on-light,.on-light-2) .inst-index p{ color:var(--ink-muted); }

@media print{
  .inquiry,.social-links,.form-actions{ display:none !important; }
}