/* ============================================================
   TOKEN BLOCK — no hex or px values outside this block
   Reference: Legora (layout-primary — law-firm editorial serif),
   Odin's Crow (detail-secondary — ruled sections, underlined inputs),
   Glassnode (retained — chart-as-framed-exhibit panel)
   Brand: navy #1F3864 · red #7F1D1D (petition-date rule only)
   ============================================================ */
:root{
  /* color jobs */
  --navy:#1F3864;            /* brand ink: display headings, masthead bar, filled CTA, contact band, chart baseline bars */
  --navy-muted:#B9C4D8;      /* secondary text on navy */
  --navy-faint:#3A517A;      /* hairlines on navy */
  --red:#7F1D1D;             /* ONE JOB: petition-date rule in the sample chart */
  --canvas:#FCFCFA;          /* paper ground (cool near-white, not cream) */
  --surface-alt:#F4F4F1;     /* alternating section surface (Legora pale-ash role) */
  --panel:#FFFFFF;           /* exhibit panel / input fills on light */
  --ink:#14171C;             /* primary text */
  --ink-2:#54585F;           /* secondary text */
  --ink-3:#787C83;           /* captions, muted meta */
  --rule:#D8D9D4;            /* hairline rules and borders */
  --rule-strong:#9DA0A6;     /* emphasized rules (Odin's Crow graphite role) */
  --on-navy:#FFFFFF;
  --on-navy-line:rgba(255,255,255,.45);   /* underlined inputs on navy */
  --hero-ground:#0C1420;                  /* dark ground behind hero photograph */
  --hero-scrim:rgba(12,20,32,.46);        /* flat scrim over dark hero photo */
  --hero-scrim-light:rgba(250,250,251,.52); /* flat scrim over bright hero photo (navy-ink text) */
  --ink-line:rgba(20,23,28,.35);          /* hairlines over bright photo */
  --chart-band:rgba(31,56,100,.07);
  --chart-pref:rgba(31,56,100,.42);
  --chart-grid:#E9EAE6;

  /* type — serif display carries the register; sans supports; mono stamps */
  --font-serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,Cambria,"Times New Roman",serif;
  --font-sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;

  /* type scale */
  --text-caption:12px;
  --text-body-sm:14px;
  --text-body:16px;
  --text-subheading:21px;
  --text-heading:26px;
  --text-heading-lg:40px;
  --text-display-num:44px;
  --display-clamp:clamp(44px, 7vw, 84px);
  --h2-clamp:clamp(30px, 4vw, 40px);

  /* spacing & shape */
  --radius:0px;              /* sharp throughout (Odin's Crow) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --section-gap:80px;        /* Legora rhythm */
  --max-w:1160px;
  --gutter:24px;
  --btn-pad:12px 22px;
  --header-h:64px;
  --masthead-bar:4px;
  --hairline:1px;
  --callout-bar:3px;
  --petition-w:2px;
}

/* ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + var(--space-5))}
body{
  font-family:var(--font-sans);
  font-size:var(--text-body);
  line-height:1.55;
  color:var(--ink);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

.wrap{max-width:var(--max-w);margin-inline:auto;padding-inline:var(--gutter)}

:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.on-navy :focus-visible, .on-navy:focus-visible{outline-color:var(--on-navy)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--navy);color:var(--on-navy);
  padding:var(--space-2) var(--space-4);
  font-size:var(--text-body-sm);
}
.skip-link:focus{left:var(--space-4);top:var(--space-2)}

/* mono stamps — eyebrows, indices, meta */
.stamp{
  font-family:var(--font-mono);
  font-size:var(--text-caption);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:400;
  color:var(--ink-3);
}

/* buttons — sharp, filled navy */
.btn{
  display:inline-block;
  font-family:var(--font-sans);
  font-size:var(--text-body-sm);
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  border-radius:var(--radius);
  padding:var(--btn-pad);
  border:var(--hairline) solid transparent;
  cursor:pointer;
}
.btn-primary{background:var(--navy);color:var(--on-navy)}
.btn-primary:hover{background:var(--navy-faint)}
.btn-on-navy{background:var(--on-navy);color:var(--navy)}
.btn-on-navy:hover{background:var(--navy-muted)}
.link-plain{
  font-size:var(--text-body-sm);
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:var(--hairline);
}

/* ============================================================
   Header — masthead: navy bar above, hairline below
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--canvas);
  border-top:var(--masthead-bar) solid var(--navy);
  border-bottom:var(--hairline) solid var(--rule);
}
.site-header .wrap{
  min-height:var(--header-h);
  display:flex;align-items:center;gap:var(--space-5);
  flex-wrap:wrap;padding-block:var(--space-2);
}
.wordmark{
  display:inline-flex;align-items:center;gap:var(--space-3);
  font-family:var(--font-serif);
  font-size:var(--text-subheading);
  font-weight:400;
  letter-spacing:.01em;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
}
.wordmark svg{height:22px;width:auto;flex:none}
.wordmark .wm-navy{color:var(--navy)}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap}
.site-nav a:not(.btn){
  font-size:var(--text-body-sm);
  color:var(--ink);
  text-decoration:none;
  padding:var(--space-1);
}
.site-nav a:not(.btn):hover{color:var(--navy);text-decoration:underline;text-underline-offset:4px}

/* ============================================================
   Hero — full-bleed dark photograph behind white serif display
   (Legora's image-led hero mechanism; photo art-directed to hold
   dark negative space on the left for the headline)
   ============================================================ */
.hero{
  position:relative;
  background-color:var(--hero-ground);
  background-image:url("assets/hero-dusk.jpg");  /* alternate: hero-day.jpg */
  background-size:cover;
  background-position:right center;
  color:var(--on-navy);
  padding-block:calc(var(--section-gap) + var(--space-4)) 0;
}
.hero::before{content:"";position:absolute;inset:0;background:var(--hero-scrim)}
.hero .wrap{position:relative}
.hero .stamp{color:var(--navy-muted)}
.hero h1{
  font-family:var(--font-serif);
  font-size:var(--display-clamp);
  line-height:1.04;
  letter-spacing:-0.02em;
  font-weight:400;
  color:var(--on-navy);
  max-width:15ch;
  margin-top:var(--space-5);
}
.hero .subhead{
  margin-top:var(--space-6);
  max-width:56ch;
  color:var(--navy-muted);
  font-size:var(--text-body);
  line-height:1.65;
}
.hero .cta-row{
  margin-top:var(--space-6);
  display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap;
}
.hero .link-plain{color:var(--on-navy)}
.trust-strip{
  margin-top:var(--space-8);
  border-top:var(--hairline) solid var(--on-navy-line);
  padding-block:var(--space-4) var(--space-5);
  display:flex;gap:var(--space-2) var(--space-8);flex-wrap:wrap;
  list-style:none;
}
.trust-strip li{
  font-family:var(--font-mono);
  font-size:var(--text-caption);
  letter-spacing:.06em;
  color:var(--navy-muted);
}
.trust-strip li::before{content:"— ";color:var(--on-navy-line)}

/* hero light variant — bright photograph, navy ink, light scrim */
.hero--light{background-color:var(--surface-alt);background-image:url("hero-bright.jpg");color:var(--ink)}
.hero--light::before{background:var(--hero-scrim-light)}
.hero--light .stamp{color:var(--ink-2)}
.hero--light h1{color:var(--navy)}
.hero--light .subhead{color:var(--ink);font-weight:500}
.hero--light .link-plain{color:var(--ink)}
.hero--light .trust-strip{border-top-color:var(--ink-line)}
.hero--light .trust-strip li{color:var(--ink)}
.hero--light .trust-strip li::before{color:var(--ink-2)}

/* editorial split with framed photograph */
.split{
  margin-top:var(--space-5);
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:var(--space-8);
  align-items:start;
}
.photo{border:var(--hairline) solid var(--rule-strong);background:var(--panel)}
.photo img{display:block;width:100%;height:auto}
.photo figcaption{
  font-family:var(--font-mono);
  font-size:var(--text-caption);
  letter-spacing:.08em;
  color:var(--ink-3);
  padding:var(--space-2) var(--space-3);
  border-top:var(--hairline) solid var(--rule);
}

/* ============================================================
   Sections — full-bleed top rule + numbered index (Odin's Crow rules)
   ============================================================ */
.section{padding-block:var(--section-gap)}
.section-ruled{border-top:var(--hairline) solid var(--rule)}
.section-alt{background:var(--surface-alt)}
.sec-meta{
  display:flex;align-items:baseline;gap:var(--space-4);
}
.sec-meta .idx{color:var(--navy)}
.section h2{
  font-family:var(--font-serif);
  font-size:var(--h2-clamp);
  line-height:1.12;
  letter-spacing:-0.01em;
  font-weight:400;
  color:var(--navy);
  margin-top:var(--space-5);
  max-width:26ch;
}
.section .lede{
  margin-top:var(--space-5);
  max-width:68ch;
  color:var(--ink-2);
  line-height:1.65;
}
.prose{max-width:68ch;color:var(--ink-2);line-height:1.65}
.prose p + p{margin-top:var(--space-4)}

.callout{
  margin-top:var(--space-6);
  max-width:68ch;
  border-left:var(--callout-bar) solid var(--navy);
  background:var(--surface-alt);
  padding:var(--space-4) var(--space-5);
  font-size:var(--text-body);
  color:var(--ink);
  font-weight:600;
}
.section-alt .callout{background:var(--panel);border:var(--hairline) solid var(--rule);border-left:var(--callout-bar) solid var(--navy)}

/* what-we-do — unboxed ruled items */
.item-grid{
  margin-top:var(--space-7);
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--space-7) var(--space-8);
}
.item{border-top:var(--hairline) solid var(--rule-strong);padding-top:var(--space-4)}
.item .stamp{color:var(--navy);letter-spacing:.2em}
.item h3{
  font-family:var(--font-serif);
  font-size:var(--text-heading);
  font-weight:400;
  color:var(--ink);
  margin-top:var(--space-3);
}
.item p{
  margin-top:var(--space-3);
  font-size:var(--text-body-sm);
  line-height:1.65;
  color:var(--ink-2);
}

/* ============================================================
   Chart exhibit — framed panel (Glassnode mechanism, retained)
   ============================================================ */
.exhibit{
  margin-top:var(--space-7);
  border:var(--hairline) solid var(--rule-strong);
  background:var(--panel);
}
.exhibit-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-4) var(--space-5);
  border-bottom:var(--hairline) solid var(--rule);
  flex-wrap:wrap;
}
.exhibit-head .title{
  font-family:var(--font-serif);
  font-size:var(--text-body);
  color:var(--ink);
}
.badge{
  font-family:var(--font-mono);
  font-size:var(--text-caption);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-2);
  border:var(--hairline) solid var(--rule-strong);
  padding:var(--space-1) var(--space-2);
}
.exhibit-body{padding:var(--space-5);overflow-x:auto}
.exhibit-body svg{display:block;min-width:640px}
.chart-legend{
  display:flex;gap:var(--space-2) var(--space-6);flex-wrap:wrap;
  padding:var(--space-4) var(--space-5);
  border-top:var(--hairline) solid var(--rule);
  list-style:none;
}
.chart-legend li{
  font-family:var(--font-mono);
  font-size:var(--text-caption);
  color:var(--ink-2);
  display:flex;align-items:center;gap:var(--space-2);
}
.swatch{width:var(--space-3);height:var(--space-3);flex:none}
.swatch-baseline{background:var(--navy)}
.swatch-pref{background:var(--chart-pref)}
.swatch-petition{width:var(--space-3);height:var(--petition-w);background:var(--red)}

.c-grid{stroke:var(--chart-grid);stroke-width:1}
.c-axis{stroke:var(--rule);stroke-width:1}
.c-band{fill:var(--chart-band)}
.c-band-edge{stroke:var(--navy);stroke-opacity:.28;stroke-width:1;stroke-dasharray:4 4}
.c-bar{fill:var(--navy)}
.c-bar-pref{fill:var(--chart-pref)}
.c-petition{stroke:var(--red);stroke-width:2}
.c-label{font-family:var(--font-mono);font-size:var(--text-caption);fill:var(--ink-3)}
.c-label-band{font-family:var(--font-mono);font-size:var(--text-caption);fill:var(--navy);opacity:.8}
.c-label-petition{font-family:var(--font-mono);font-size:var(--text-caption);font-weight:700;fill:var(--red)}

/* ============================================================
   Deliverables — ruled ledger rows
   ============================================================ */
.doc-list{margin-top:var(--space-7);list-style:none;border-top:var(--hairline) solid var(--rule-strong)}
.doc-list li{
  display:grid;grid-template-columns:260px 1fr;gap:var(--space-5);
  padding-block:var(--space-5);
  border-bottom:var(--hairline) solid var(--rule);
}
.doc-list .doc-name{
  font-family:var(--font-serif);
  font-size:var(--text-subheading);
  color:var(--navy);
}
.doc-list .doc-desc{font-size:var(--text-body-sm);line-height:1.65;color:var(--ink-2)}
.split .doc-list{margin-top:0}
.split .doc-list li{grid-template-columns:1fr;gap:var(--space-2)}
.after-list{
  margin-top:var(--space-5);
  font-size:var(--text-body-sm);
  color:var(--ink);
  font-weight:600;
  max-width:68ch;
}

/* steps — ruled columns with serif numerals */
.steps{
  margin-top:var(--space-7);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--space-8);
  list-style:none;
}
.steps li{border-top:var(--hairline) solid var(--rule-strong);padding-top:var(--space-4)}
.steps .step-num{
  font-family:var(--font-serif);
  font-size:var(--text-display-num);
  line-height:1;
  color:var(--navy);
}
.steps h3{
  font-family:var(--font-serif);
  font-size:var(--text-subheading);
  font-weight:400;
  color:var(--ink);
  margin-top:var(--space-4);
}
.steps p{margin-top:var(--space-3);font-size:var(--text-body-sm);line-height:1.65;color:var(--ink-2)}

/* fees */
.fees-panel{
  margin-top:var(--space-6);
  border:var(--hairline) solid var(--rule);
  border-left:var(--callout-bar) solid var(--navy);
  background:var(--panel);
  padding:var(--space-5) var(--space-6);
  max-width:76ch;
}
.fees-panel p{color:var(--ink-2);line-height:1.7}
.fees-panel strong{color:var(--ink);font-variant-numeric:tabular-nums}

/* FAQ — ruled rows, serif questions */
.faq{margin-top:var(--space-7);list-style:none;border-top:var(--hairline) solid var(--rule-strong);max-width:80ch}
.faq li{padding-block:var(--space-5);border-bottom:var(--hairline) solid var(--rule)}
.faq h3{
  font-family:var(--font-serif);
  font-size:var(--text-subheading);
  font-weight:400;
  color:var(--ink);
}
.faq p{margin-top:var(--space-3);font-size:var(--text-body-sm);line-height:1.65;color:var(--ink-2)}

/* ============================================================
   Contact — navy closing band, underlined inputs (Odin's Crow)
   ============================================================ */
.contact{background:var(--navy);color:var(--on-navy)}
.contact .stamp{color:var(--navy-muted)}
.contact .sec-meta .idx{color:var(--on-navy)}
.contact h2{color:var(--on-navy)}
.contact .lede{color:var(--navy-muted)}
.contact-grid{
  margin-top:var(--space-7);
  display:grid;grid-template-columns:1fr 1.2fr;gap:var(--space-8);
  align-items:start;
}
.contact-block{font-style:normal;font-size:var(--text-body-sm);line-height:1.75;color:var(--navy-muted)}
.contact-block .org{
  font-family:var(--font-serif);
  font-size:var(--text-subheading);
  color:var(--on-navy);
  margin-bottom:var(--space-3);
}
.contact-block a{color:var(--on-navy);text-underline-offset:4px}

.contact-form{display:grid;gap:var(--space-6)}
.field{display:grid;gap:var(--space-2)}
.field label{
  font-family:var(--font-mono);
  font-size:var(--text-caption);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--navy-muted);
}
.field input{
  font-family:var(--font-sans);
  font-size:var(--text-body);
  color:var(--on-navy);
  background:transparent;
  border:none;
  border-bottom:var(--hairline) solid var(--on-navy-line);
  border-radius:var(--radius);
  padding:var(--space-2) 0;
  width:100%;
}
.field input:focus{border-bottom-color:var(--on-navy);outline:none}
.field input:focus-visible{outline:none;border-bottom:2px solid var(--on-navy)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
.form-note{font-size:var(--text-caption);color:var(--navy-muted);line-height:1.6}

/* ============================================================
   Footer — paper, ruled
   ============================================================ */
.site-footer{
  background:var(--canvas);
  border-top:var(--hairline) solid var(--rule-strong);
  padding-block:var(--space-7);
}
.site-footer p{
  font-size:var(--text-caption);
  line-height:1.7;
  color:var(--ink-3);
  max-width:96ch;
}
.site-footer p + p{margin-top:var(--space-4)}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:860px){
  :root{--section-gap:56px}
  .split{grid-template-columns:1fr;gap:var(--space-6)}
  .item-grid{grid-template-columns:1fr;gap:var(--space-6)}
  .steps{grid-template-columns:1fr;gap:var(--space-6)}
  .doc-list li{grid-template-columns:1fr;gap:var(--space-2)}
  .contact-grid{grid-template-columns:1fr;gap:var(--space-7)}
  .field-row{grid-template-columns:1fr}
}
@media (max-width:600px){
  :root{--gutter:16px}
  .site-nav a:not(.btn){display:none}
  .wordmark{font-size:var(--text-body)}
  .site-header .btn{padding:var(--space-2) var(--space-3);font-size:var(--text-caption)}
}


/* ============================================================
   Intake page
   ============================================================ */
.page-head{padding-block:calc(var(--section-gap) + var(--space-2)) var(--space-4)}
.page-head h1{
  font-family:var(--font-serif);
  font-size:clamp(34px, 4.5vw, 52px);
  line-height:1.1;letter-spacing:-0.01em;font-weight:400;
  color:var(--navy);margin-top:var(--space-4);
}
.page-head .lede{margin-top:var(--space-5);max-width:66ch;color:var(--ink-2);line-height:1.65}
.badge-req{border-color:var(--navy);color:var(--navy)}
.field-list{margin-top:var(--space-5);list-style:none;max-width:68ch;padding:0}
.field-list li{
  font-size:var(--text-body-sm);line-height:1.65;color:var(--ink-2);
  padding-left:var(--space-5);position:relative;margin-top:var(--space-2);
}
.field-list li::before{content:"\2014";position:absolute;left:0;color:var(--ink-3)}
.field-list strong{color:var(--ink)}
.steps h3 a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}

/* contact form status + honeypot */
.hp{position:absolute;left:-9999px;top:auto;height:1px;width:1px;overflow:hidden}
.form-status{font-size:var(--text-body-sm);color:var(--on-navy);min-height:1.4em;font-weight:600}
.form-note a{color:var(--on-navy);text-underline-offset:3px}

/* header wordmark: full name, stacked like the lockup */
.wm-stack{display:flex;flex-direction:column;line-height:1.05}
.wm-sub{
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-top:3px;
}
/* hero bottom padding now that the trust strip is gone */
.hero{padding-bottom:calc(var(--section-gap) + var(--space-2))}

/* pricing page — rate card */
.rate-card{margin-top:var(--space-7);border:var(--hairline) solid var(--rule-strong);background:var(--panel);max-width:760px}
.rate-row{
  display:grid;grid-template-columns:1fr auto;gap:var(--space-2) var(--space-6);
  align-items:baseline;
  padding:var(--space-5);
  border-bottom:var(--hairline) solid var(--rule);
}
.rate-row:last-child{border-bottom:none}
.rate-scope{font-size:var(--text-body);color:var(--ink)}
.rate-fee{
  font-family:var(--font-serif);
  font-size:var(--text-heading);
  color:var(--navy);
  font-variant-numeric:tabular-nums;
  text-align:right;
  white-space:nowrap;
}
.rate-fee-note{
  font-family:var(--font-sans);
  font-size:var(--text-body-sm);
  color:var(--ink-2);
  text-align:right;
  max-width:34ch;
}
.rate-explainer{margin-top:var(--space-5);font-size:var(--text-body-sm);line-height:1.65;color:var(--text-2, #54585F);color:var(--ink-2);max-width:68ch}
.quiet-line{margin-top:var(--space-6);font-size:var(--text-body-sm);color:var(--ink-3)}
@media (max-width:600px){
  .rate-row{grid-template-columns:1fr}
  .rate-fee,.rate-fee-note{text-align:left}
}

/* contact — single email presentation (form removed) */
.contact-email{
  font-family:var(--font-serif);
  font-size:clamp(22px, 3vw, 30px);
  color:var(--on-navy);
  text-decoration:underline;
  text-underline-offset:6px;
  text-decoration-thickness:1px;
  overflow-wrap:anywhere;
}
.contact-email:hover{color:var(--navy-muted)}
.contact-note{margin-top:var(--space-4);font-size:var(--text-body-sm);color:var(--navy-muted);line-height:1.6}