/* =========================================================================
   TOKENS
   Two palettes live side by side: the dark hero/dawn palette (unprefixed —
   --ink, --glow, --muted, --line, --text, --sans/--display) and the paper
   palette used from "What we do" onward (prefixed --paper-*, plus --gold*
   and --serif). They're namespaced so nothing in the light zone accidentally
   inherits a dark-zone rule, or vice versa.
   ========================================================================= */
:root{
  /* dark zone — hero + dawn */
  --ink:        #070C09;
  --ink-raise:  #0C1310;
  --glow:       #E9C662;
  --glow-green: #B7B04C;
  --text:       #E8ECE6;
  --muted:      #97A399;
  --line-warm:  rgba(233,198,98,0.28);
  --display: "Figtree","Avenir Next","Helvetica Neue","Segoe UI",system-ui,sans-serif;
  --sans: "Inter","Helvetica Neue","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --measure: 33rem;

  /* light zone — paper */
  --paper:       #FBFAF7;
  --paper-ink:   #21252F;
  --paper-muted: #5A6070;
  --paper-line:  #E5E2D8;
  --gold:        #B98A26;
  --gold-deep:   #96701D;
  --gold-glow:   rgba(198,152,44,.22);
  --serif: "Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --paper-sans:  "Avenir Next","Segoe UI","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --paper-measure: 40rem;
  --rail-x: 2.5rem;          /* x-position of the path rail, shared by the dawn thread and the light-zone rail so they line up */
  --content-indent: 7.5rem;  /* how far light-zone content sits right of the rail on wide screens */
}

/* ---------- Reset-ish ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--paper);
  color:var(--paper-ink);
  font-family:var(--paper-sans);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; }
p{ margin:0; }

:focus-visible{
  outline:2px solid var(--gold-deep);
  outline-offset:3px;
  border-radius:2px;
}
.hero :focus-visible, header :focus-visible{
  outline-color:var(--glow); /* brighter ring reads correctly over the dark hero */
}

.skip-link{
  position:absolute; left:1rem; top:-3rem;
  background:var(--ink-raise); color:var(--text);
  padding:.5rem 1rem; border:1px solid var(--line-warm);
  border-radius:3px; text-decoration:none; z-index:20;
  font-family:var(--sans); font-size:.9rem;
  transition:top .15s ease;
}
.skip-link:focus{ top:1rem; }

.wrap{ max-width:70rem; margin:0 auto; padding:0 clamp(1.25rem, 5vw, 3rem); }

/* =========================================================================
   HEADER — sits over the hero only, scrolls away with it (unchanged from
   the version you liked: not a persistent nav, a quiet top mark).
   ========================================================================= */
header{ position:absolute; top:0; left:0; right:0; z-index:10; }
.nav{ display:flex; align-items:baseline; justify-content:space-between; padding-top:1.75rem; }
.wordmark{
  font-family:var(--display);
  font-size:1.15rem; font-weight:400; letter-spacing:.02em;
  text-decoration:none; color:var(--text);
}
.wordmark span{
  display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--glow); margin-left:.3rem; vertical-align:.45em;
  box-shadow:0 0 7px 2px rgba(233,198,98,0.5);
}
.nav-links{ display:flex; gap:1.75rem; }
.nav-links a{
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; padding:.25rem 0;
}
.nav-links a:hover{ color:var(--glow); }
@media (max-width:37rem){ .nav-links{ gap:1.1rem; } .nav-links a{ letter-spacing:.14em; } }

/* =========================================================================
   HERO — unchanged
   ========================================================================= */
.hero{
  position:relative;
  min-height:92vh;
  display:flex; align-items:center;
  overflow:hidden;
  isolation:isolate;
  background:var(--ink);
  color:var(--text);
  font-family:var(--sans);
  font-weight:300;
}
.hero-inner{ position:relative; z-index:2; padding:8rem 0 6rem; }
.hero .eyebrow{
  font-size:.75rem; font-weight:400; letter-spacing:.32em; text-transform:uppercase;
  color:var(--glow); display:flex; align-items:center; gap:.75rem; margin:0 0 1.25rem;
}
.hero .eyebrow::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--glow); box-shadow:0 0 8px 2px rgba(233,198,98,0.45); flex:none;
}
.hero h1{
  font-family:var(--display); font-weight:300; letter-spacing:-0.015em;
  margin:0; max-width:16ch;
  font-size:clamp(2.6rem, 6.5vw, 4.4rem); line-height:1.06;
}
.hero .lede{
  font-size:clamp(1.15rem, 2.2vw, 1.4rem); font-weight:300;
  margin-top:1.75rem; color:var(--text);
}
.hero .sub{ max-width:var(--measure); margin-top:1rem; color:var(--muted); }
.hero-cta{
  display:inline-block; margin-top:2.5rem;
  font-size:.78rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--glow); text-decoration:none;
  border:1px solid var(--line-warm);
  padding:.85rem 1.6rem; border-radius:2px;
  transition:background-color .2s ease, box-shadow .2s ease;
}
.hero-cta:hover{ background:rgba(233,198,98,0.07); box-shadow:0 0 24px rgba(233,198,98,0.12); }

.hero-art{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero-art svg{ width:100%; height:100%; display:block; }
@media (max-width:48rem){
  .hero-art{ top:auto; bottom:0; height:50%; opacity:.55; }
}

/* =========================================================================
   DAWN — the transition zone. A gradient from ink to paper, with a single
   thread picking up at the rail's x-position so it reads as the path
   continuing rather than a new element starting. Purely decorative — no
   readable text lives here, so nothing needs its colour inverted mid-fade.
   ========================================================================= */
.dawn{
  position:relative;
  height:clamp(24rem, 60vh, 38rem);
  background:linear-gradient(to bottom, var(--ink) 0%, var(--paper) 100%);
}
.dawn-inner{
  max-width:70rem; margin:0 auto; height:100%;
  padding:0 clamp(1.25rem, 5vw, 3rem);
  position:relative;
}
.dawn-thread{
  position:absolute; left:var(--rail-x); top:0; bottom:0; width:1px;
  background:linear-gradient(to bottom,
    rgba(233,198,98,0)    0%,
    rgba(233,198,98,.55) 35%,
    var(--gold-deep)     100%);
}
.ember{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:var(--glow-green);
  box-shadow:0 0 8px 2px rgba(183,176,76,0.3);
  opacity:.55;
}
@media (max-width:53.75rem){
  .dawn{ height:clamp(14rem, 34vh, 22rem); }
  .dawn-thread, .ember{ display:none; }
}

/* =========================================================================
   LIGHT ZONE — What we do / Who we are / Contact, plus the scroll-synced
   rail. Geometry (rail span, waypoint dots, firefly-dot position) is
   computed in JS from the real position of each [data-waypoint] eyebrow,
   so it stays correct regardless of copy length or section height.
   ========================================================================= */
.page{
  position:relative;
  max-width:70rem;
  margin:0 auto;
  padding:0 1.5rem;
}
.path-rail{
  position:absolute; left:var(--rail-x); width:1px;
  background:var(--paper-line); pointer-events:none;
}
.waypoint{
  position:absolute; left:calc(var(--rail-x) - 3px);
  width:7px; height:7px; border-radius:50%;
  background:var(--paper); border:1px solid var(--gold);
  pointer-events:none; z-index:2;
}
.firefly-dot{
  position:absolute; left:calc(var(--rail-x) - 4px); top:0;
  width:9px; height:9px; border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 6px var(--gold-glow), 0 0 18px 4px var(--gold-glow);
  pointer-events:none; will-change:transform; z-index:3;
}
@media (prefers-reduced-motion: no-preference){
  .firefly-dot{ animation:breathe 3.4s ease-in-out infinite; }
  @keyframes breathe{
    0%,100%{ box-shadow:0 0 0 5px var(--gold-glow), 0 0 14px 3px var(--gold-glow); }
    50%    { box-shadow:0 0 0 8px var(--gold-glow), 0 0 26px 7px var(--gold-glow); }
  }
}

.section{
  border-top:1px solid var(--paper-line);
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:4.5rem 0 4.5rem var(--content-indent);
}
.inner{ max-width:56rem; width:100%; opacity:0; transition:opacity .8s ease; }
.inner.in{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .inner{ opacity:1; transition:none; } }

.page .eyebrow{
  font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper-muted); margin:0 0 1.4rem;
}
h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.8rem, 3.4vw, 2.5rem); line-height:1.2; letter-spacing:-.005em;
  margin:0 0 1.6rem;
}
.page p{ max-width:var(--paper-measure); }
.page .muted{ color:var(--paper-muted); }

/* ---------- Services ---------- */
.cards{ display:grid; grid-template-columns:1fr 1fr; gap:0 4rem; margin-top:.5rem; }
.card{ border-top:1px solid var(--paper-line); padding:1.8rem 0 2.6rem; }
.card h3{
  font-family:var(--serif); font-weight:500; font-size:1.35rem; line-height:1.3;
  margin:0 0 .7rem; display:flex; align-items:baseline; gap:.7rem;
}
.card h3::before{
  content:""; flex:none; width:7px; height:7px; border-radius:50%;
  background:var(--gold); transform:translateY(-.15em);
}
.card p{ margin:0; color:var(--paper-muted); font-size:.99rem; line-height:1.7; }

/* ---------- Who we are ---------- */
.split{ display:grid; grid-template-columns:minmax(13rem, 16rem) 1fr; gap:2rem 4rem; }
.split h2{ margin-top:.2rem; }
.split p{ margin:0 0 1.2rem; }
.split p:last-child{ margin-bottom:0; }

/* ---------- Contact ---------- */
.contact-invite{ margin:0 0 2.4rem; }
.embed-slot{
  max-width:var(--paper-measure);
  border:1px dashed var(--paper-line); border-radius:4px;
  padding:2.6rem 2rem; text-align:center; background:#FFFFFF;
}
.embed-slot p{ margin:0 auto; font-size:.85rem; letter-spacing:.06em; color:var(--paper-muted); }

/* ---------- Footer ---------- */
.site-footer{
  max-width:70rem; margin:0 auto;
  padding:2.2rem 1.5rem 2.6rem;
  padding-left:calc(1.5rem + var(--content-indent));
  border-top:1px solid var(--paper-line);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.85rem; color:var(--paper-muted);
}

/* ---------- Responsive ---------- */
@media (max-width:62.5rem){ .split{ grid-template-columns:1fr; } }
@media (max-width:53.75rem){
  :root{ --content-indent:0rem; }
  .path-rail, .firefly-dot, .waypoint{ display:none; }
  .section{ min-height:0; padding:3.5rem 0; }
  .cards{ grid-template-columns:1fr; gap:0; }
  .site-footer{ padding-left:1.5rem; }
}