/*!
 * Ledger Audits — redesign stylesheet (v2)
 * Ported from design_handoff_ledger_audits. The prototype expressed everything as
 * inline styles on one page; this is the same system expressed as tokens + classes.
 *
 * Layout uses container queries on .shell (container-type:inline-size), so every
 * fluid size below is in `cqi` exactly as the handoff specifies, and the whole
 * site reflows on `auto-fit` grids. There is exactly one media query (the nav
 * collapse) and one prefers-reduced-motion block.
 */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root{
  --ink:#101A14;
  --forest:#14382A;
  --forest-700:#143527;
  --green:#1E4D38;
  --cream:#F5F2E9;
  --cream-deep:#EDE8DC;
  --cream-card:#F8F5EE;
  --paper:#EFEBE0;
  --light-ink:#EDEFE9;
  --gold:#C89B54;          /* gold on dark */
  --gold-ink:#8C5F22;      /* gold on light — darkened from the prototype's
                             #9C6B27 so mono eyebrows clear WCAG AA on cream */
  --gold-rule:#B4823C;
  --rust:#8E3B2C;          /* GAP / exception state */
  --footer:#0F1A14;

  /* text on light */
  --t-body:rgba(16,26,20,.82);
  --t-body-soft:rgba(16,26,20,.78);
  --t-mute:rgba(16,26,20,.72);
  --t-mute-2:rgba(16,26,20,.64);
  /* text on dark */
  --t-dark:rgba(237,239,233,.84);
  --t-dark-mute:rgba(237,239,233,.70);
  --t-dark-mute-2:rgba(237,239,233,.64);
  /* hairlines */
  --hair:rgba(16,26,20,.12);
  --hair-strong:rgba(16,26,20,.16);
  --hair-soft:rgba(16,26,20,.08);
  --hair-dark:rgba(237,239,233,.16);
  --hair-dark-soft:rgba(237,239,233,.12);

  --serif:Newsreader,Georgia,'Times New Roman',serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Courier New',monospace;

  --wrap:min(1180px,90cqi);
  --ease:cubic-bezier(.16,.84,.28,1);
  /* one timing ladder for every interaction: controls, then surfaces */
  --t-control:.2s;
  --t-surface:.3s;
  --t-card:.35s;
  /* Hover surfaces. Both deepen rather than lighten: cream settles to paper,
     forest settles to a darker forest. Lightening the dark surface toward
     --green pushed gold text and mono metadata under 4.5:1 on hover. */
  --hover-light:var(--paper);
  --hover-dark:#102D22;
  --ease-note:cubic-bezier(.3,.7,.3,1);
  --r-sm:2px;
  --r:3px;

  /* ledger-paper motifs */
  --rule-dark:repeating-linear-gradient(180deg,rgba(237,239,233,.05) 0 1px,transparent 1px 34px);
  --rule-light:repeating-linear-gradient(180deg,rgba(16,26,20,.026) 0 1px,rgba(16,26,20,0) 1px 32px);
  --rule-vert:repeating-linear-gradient(90deg,rgba(16,26,20,.03) 0 1px,rgba(16,26,20,0) 1px 64px);
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.shell{container-type:inline-size;overflow-x:hidden}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:300}
p{margin:0}
img{max-width:100%;height:auto}
a{color:var(--green);text-decoration:none;transition:color var(--t-control) var(--ease)}
a:hover{color:var(--gold-ink)}
button,input,select,textarea{font-family:inherit}
summary::-webkit-details-marker{display:none}
::selection{background:var(--green);color:var(--cream)}

/* Keyboard focus is visible everywhere — the prototype had none. */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--gold-rule);outline-offset:3px;border-radius:var(--r-sm);
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--green);color:var(--cream);padding:12px 18px;
  font:500 15px/1 var(--sans);border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{left:0;color:var(--cream)}

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

/* ── Type scale ─────────────────────────────────────────────────────────── */
.h-hero{font:400 clamp(38px,7cqi,88px)/1.02 var(--serif);letter-spacing:-.025em}
.h-page{font:400 clamp(34px,5.6cqi,66px)/1.04 var(--serif);letter-spacing:-.03em}
.h-svc{font:400 clamp(32px,5.6cqi,68px)/1.04 var(--serif);letter-spacing:-.025em;max-width:24ch;text-wrap:pretty}
.h2{font:400 clamp(28px,4.2cqi,48px)/1.07 var(--serif);letter-spacing:-.025em;text-wrap:pretty}
.h2-lg{font:400 clamp(30px,4.6cqi,54px)/1.06 var(--serif);letter-spacing:-.025em;text-wrap:pretty}
.h3{font:400 clamp(23px,2.6cqi,31px)/1.1 var(--serif);letter-spacing:-.02em}
.body{font:400 clamp(15px,1.35cqi,17.5px)/1.68 var(--sans);color:var(--t-body)}
.lead{font:400 clamp(16px,1.5cqi,19px)/1.62 var(--sans);color:var(--t-body-soft)}
.lead-lg{font:400 clamp(15px,1.45cqi,18.5px)/1.62 var(--sans);color:var(--t-body-soft)}
.eyebrow{font:500 13px/1 var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--gold-ink);display:block}
.th{font:500 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--t-mute)}
.mono{font:400 13px/1 var(--mono)}
.num{font-variant-numeric:tabular-nums}

/* on dark */
.on-dark{background:var(--forest);color:var(--light-ink)}
.on-dark .eyebrow,.on-dark .h-accent{color:var(--gold)}
.on-dark .body,.on-dark .lead,.on-dark .lead-lg{color:var(--t-dark)}
.on-dark .th{color:var(--t-dark-mute)}
.on-dark a{color:var(--gold)}
.on-dark a:hover{color:var(--cream)}

/* Dark surfaces that are not whole sections (cards, bands, the contact block,
   the footer) need the same accent + link treatment as .on-dark. */
.contact .eyebrow,.band .eyebrow,.art-cta .eyebrow,.panel.dark .eyebrow{color:var(--gold)}
.contact .th,.band .th,.panel.dark .th,
.contact .on-light .th{color:var(--t-mute)}
.contact a:not(.btn),.band a:not(.btn),.panel.dark a:not(.btn){color:var(--gold)}
.contact a:not(.btn):hover,.band a:not(.btn):hover,.panel.dark a:not(.btn):hover{color:var(--cream)}
.contact .on-light a{color:var(--green)}

/* Light panels nested inside a dark section (the evidence ledger, the booking
   card, any form card) must not inherit the on-dark text tokens. */
.on-light{color:var(--ink)}
.on-dark .on-light .th{color:var(--t-mute)}
.on-dark .on-light .body,.on-dark .on-light .lead,.on-dark .on-light .lead-lg{color:var(--t-body)}
.on-dark .on-light .eyebrow{color:var(--gold-ink)}
.on-dark .on-light a{color:var(--green)}
.on-dark .on-light a:hover{color:var(--gold-ink)}

/* ── Sections ───────────────────────────────────────────────────────────── */
.sec{padding:clamp(48px,7cqi,110px) 0}
.sec-sm{padding:clamp(40px,5cqi,80px) 0}
.sec-top{border-top:1px solid var(--hair)}
.bg-cream{background:var(--cream)}
.bg-deep{background:var(--cream-deep)}
.bg-paper{background:var(--paper)}
.bg-forest{background:var(--forest);color:var(--light-ink)}

/* ledger rules + gradient washes, per handoff */
.ruled-light{
  background-color:var(--cream);
  background-image:
    linear-gradient(180deg,rgba(16,26,20,.055),rgba(16,26,20,0) 160px),
    radial-gradient(120% 90% at 88% 0%,rgba(200,155,84,.13),rgba(200,155,84,0) 62%),
    var(--rule-vert);
}
.ruled-deep{
  background-color:var(--cream-deep);
  background-image:
    radial-gradient(95% 75% at 0% 100%,rgba(30,77,56,.1),rgba(30,77,56,0) 62%),
    var(--rule-light);
}
.ruled-deep-top{
  background-color:var(--cream-deep);
  background-image:
    linear-gradient(180deg,rgba(16,26,20,.05),rgba(16,26,20,0) 150px),
    var(--rule-light);
}
.ruled-method{
  background-color:var(--cream);
  background-image:
    linear-gradient(180deg,rgba(16,26,20,.05),rgba(16,26,20,0) 200px),
    var(--rule-vert);
}
.ruled-who{
  background-color:var(--cream);
  background-image:
    radial-gradient(90% 80% at 6% 96%,rgba(200,155,84,.12),rgba(200,155,84,0) 60%),
    var(--rule-light);
}
/* overlay rules on dark sections */
.overlay{position:relative;overflow:hidden}
.overlay>.rules{position:absolute;inset:0;background:var(--rule-dark);pointer-events:none}
.overlay>.rules-v{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(237,239,233,.045) 0 1px,transparent 1px 56px);pointer-events:none}
.overlay>.spine{position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(237,239,233,.07);pointer-events:none}
.overlay>.wrap,.overlay>.inner{position:relative}

/* ── Grids ──────────────────────────────────────────────────────────────── */
.g{display:grid;gap:clamp(30px,4cqi,64px)}
.g-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.g-tight{gap:20px}
/* The handoff's "table" look: 1px grid-line dividers rather than borders.
   The rules are painted by each cell's box-shadow instead of by a coloured
   parent showing through the gaps, so a row that auto-fit leaves half empty
   does not render a stray hairline-coloured block. */
.rule-grid{display:grid;gap:1px;background:transparent}
.rule-grid>*{--rule-color:var(--hair-strong);background:var(--cream);box-shadow:0 0 0 1px var(--rule-color)}
.rule-grid-dark{display:grid;gap:1px;background:transparent}
.rule-grid-dark>*{--rule-color:var(--hair-dark);background:var(--forest);box-shadow:0 0 0 1px var(--rule-color)}
.stack{display:flex;flex-direction:column}

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-head{
  position:sticky;top:0;z-index:40;
  background:rgba(245,242,233,.88);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(16,26,20,.11);
}
.site-head .bar{
  width:var(--wrap);margin:0 auto;position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 0;
}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink)}
.brand:hover{color:var(--ink)}
.seal{
  display:grid;place-items:center;width:30px;height:30px;
  background:var(--green);color:var(--cream);
  font:500 13px/1 var(--mono);letter-spacing:.06em;border-radius:var(--r-sm);
}
.brand b{font:400 19px/1 var(--serif);letter-spacing:-.01em;font-weight:400}
.nav{display:flex;align-items:center;gap:26px}
.nav a{
  font:400 15.5px/1 var(--sans);color:rgba(16,26,20,.68);
  padding-bottom:2px;border-bottom:1px solid transparent;
  transition:color var(--t-control) var(--ease),border-color var(--t-control) var(--ease);
}
.nav a:hover,.nav a[aria-current]{color:var(--green);border-bottom-color:var(--gold-rule)}
.nav .cta{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--green);color:var(--cream);
  font:500 15px/1 var(--sans);padding:11px 17px;border-radius:var(--r-sm);border-bottom:0;
}
.nav .cta:hover{background:var(--forest-700);color:var(--cream);border-bottom-color:transparent}
.menu-btn{
  display:none;background:none;cursor:pointer;
  font:500 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  border:1px solid rgba(16,26,20,.22);padding:10px 12px;border-radius:var(--r-sm);color:var(--ink);
}
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--gold-rule)}
.menu{display:none;border-top:1px solid rgba(16,26,20,.11);padding:8px 0 18px;animation:la-in .3s ease both}
.menu.open{display:block}
.menu .inner{width:var(--wrap);margin:0 auto;display:flex;flex-direction:column}
.menu a{font:400 16px/1 var(--serif);padding:14px 0;border-bottom:1px solid var(--hair-soft);color:var(--ink)}
.menu a.cta{
  margin-top:16px;text-align:center;background:var(--green);color:var(--cream);
  font:500 15.5px/1 var(--sans);padding:15px;border-radius:var(--r-sm);border-bottom:0;
}

/* The one breakpoint the handoff allows: nav collapse below ~900px. */
@media (max-width:900px){
  .nav{display:none}
  .menu-btn{display:block}
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font:500 15.5px/1 var(--sans);padding:16px 22px;border-radius:var(--r-sm);
  border:1px solid transparent;cursor:pointer;text-align:center;
  transition:background-color var(--t-control) var(--ease),color var(--t-control) var(--ease),border-color var(--t-control) var(--ease);
}
.btn .arw{font:400 13px/1 var(--mono)}
/* Double-class so button colour beats the `.on-dark a` inheritance rule. */
.btn.btn-cream{background:var(--cream);color:var(--forest)}
.btn.btn-cream:hover{background:var(--gold);color:var(--forest)}
.btn.btn-green{background:var(--green);color:var(--cream)}
.btn.btn-green:hover{background:var(--forest-700);color:var(--cream)}
.btn.btn-outline{border-color:rgba(237,239,233,.3);color:var(--light-ink);background:transparent}
.btn.btn-outline:hover{border-color:var(--gold);color:var(--gold)}
/* Outline button for LIGHT sections. .btn-outline is a dark-section button: its text
   is --light-ink, which on cream is all but invisible. Anything sitting on
   bg-cream / bg-paper wants this instead. Gold on hover, like every other surface. */
.btn.btn-line{border-color:rgba(16,26,20,.28);color:var(--ink);background:transparent}
.btn.btn-line:hover{border-color:var(--gold-rule);color:var(--gold-ink);background:rgba(200,155,84,.09)}
.btn-sm{font-size:13px;padding:13px 16px}
.btn-block{width:100%;justify-content:center}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.link-u{
  align-self:center;font:500 15px/1 var(--sans);color:var(--green);
  border-bottom:1px solid rgba(30,77,56,.4);
}
.link-u:hover{color:var(--gold-ink)}
/* Every forest/ink surface, not just sections tagged .on-dark */
.on-dark .link-u,.band .link-u,.art-cta .link-u,.panel.dark .link-u{
  color:var(--gold);border-bottom-color:rgba(200,155,84,.45);
}
.on-dark .link-u:hover,.band .link-u:hover,.art-cta .link-u:hover,
.panel.dark .link-u:hover{color:var(--cream)}
.on-dark .on-light .link-u{color:var(--green);border-bottom-color:rgba(30,77,56,.4)}
.on-dark .on-light .link-u:hover{color:var(--gold-ink)}

/* ── Breadcrumbs ────────────────────────────────────────────────────────── */
.crumbs{
  display:flex;flex-wrap:wrap;gap:8px;
  font:400 13px/1 var(--mono);letter-spacing:.08em;color:var(--t-mute-2);
  padding-bottom:clamp(26px,4cqi,48px);
}
.crumbs a{color:inherit}
.crumbs a:hover{color:var(--gold-ink)}
.crumbs .here{color:var(--gold-ink)}
.on-dark .crumbs{color:var(--t-dark-mute)}
.on-dark .crumbs a:hover{color:var(--gold)}
.on-dark .crumbs .here{color:var(--gold)}

/* ── Home: hero ─────────────────────────────────────────────────────────── */
.hero{background:var(--forest);color:var(--light-ink)}
.hero .inner{
  width:var(--wrap);margin:0 auto;
  padding:clamp(48px,7cqi,92px) 0 clamp(36px,4cqi,54px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:clamp(32px,4cqi,64px);align-items:center;
}
.pulse{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.pulse i{width:6px;height:6px;background:var(--gold-rule);border-radius:50%;animation:la-blink 2.4s ease-in-out infinite}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero p{margin:26px 0 0;max-width:52ch}
.hero-facts{margin-top:clamp(34px,4cqi,52px);grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.hero-facts>div{padding:18px 16px 4px}
.hero-facts .k{font:500 13px/1 var(--mono);color:var(--gold);letter-spacing:.1em}
.hero-facts .v{margin-top:10px;font:400 17px/1.2 var(--serif)}

/* Evidence ledger panel. The stamp sits outside .ledger because the panel
   clips (the scan sweep needs overflow:hidden) and the stamp overhangs it. */
.ledger-wrap{position:relative}
.ledger{
  position:relative;background:var(--cream);color:var(--ink);
  border-radius:var(--r);overflow:hidden;
  box-shadow:0 28px 60px -24px rgba(0,0,0,.55);
}
.ledger .scan{
  position:absolute;left:0;right:0;top:0;height:44px;pointer-events:none;
  background:linear-gradient(180deg,rgba(30,77,56,.16),transparent);
  animation:la-sweep 5.2s cubic-bezier(.5,0,.5,1) infinite;
}
.ledger .cap{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:6px 12px;padding:14px 18px;border-bottom:1px solid var(--hair);
}
.ledger .cap .r{font:500 13px/1 var(--mono);letter-spacing:.1em;color:var(--green)}
.ledger .rows{padding:6px 0}
.ledger .row{
  display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;
  padding:11px 18px;border-bottom:1px solid rgba(16,26,20,.07);
  animation:la-row .7s cubic-bezier(.2,.8,.2,1) both;
}
.ledger .row:last-child{border-bottom:0}
.ledger .id{font:400 13px/1 var(--mono);color:var(--t-mute-2)}
.ledger .nm{font:400 15.5px/1.3 var(--sans)}
.chip{
  font:500 13px/1 var(--mono);letter-spacing:.08em;padding:5px 8px;border-radius:var(--r-sm);
  color:var(--green);background:rgba(30,77,56,.1);
  animation:la-tick .5s cubic-bezier(.2,.9,.3,1) both;white-space:nowrap;
}
.chip.gap{color:var(--rust);background:rgba(142,59,44,.09)}
.ledger .foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 18px;background:rgba(30,77,56,.06);border-top:1px solid var(--hair);
  font:400 13px/1 var(--mono);color:var(--t-mute);
}
.ledger .foot b{font:500 13px/1 var(--mono);color:var(--green)}
.stamp{
  position:absolute;right:-6px;bottom:-18px;transform:rotate(-7deg);
  border:1.5px solid rgba(200,155,84,.75);color:var(--gold);
  padding:9px 12px;border-radius:var(--r-sm);background:rgba(20,56,42,.85);
  font:500 13px/1.35 var(--mono);letter-spacing:.12em;text-align:center;
}

/* marquee strip */
.marquee{position:relative;border-top:1px solid rgba(237,239,233,.14);overflow:hidden;padding:13px 0}
.marquee .track{display:flex;width:max-content;animation:la-marquee 34s linear infinite}
.marquee span{font:400 13px/1 var(--mono);letter-spacing:.14em;color:var(--t-dark-mute);padding:0 22px;white-space:nowrap}

/* ── Home: proof strip ──────────────────────────────────────────────────── */
.proof{background:var(--cream-deep);border-bottom:1px solid var(--hair);box-shadow:inset 0 14px 26px -22px rgba(16,26,20,.55)}
.proof .rule-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.proof .rule-grid>*{--rule-color:var(--hair)}
.proof .cell{padding:clamp(26px,3cqi,40px) 0}
.proof .cell>div{padding:0 20px}
.proof .cell:first-child>div{padding:0 20px 0 0}
.proof .fig{font:400 clamp(40px,5cqi,62px)/1 var(--serif);letter-spacing:-.03em}
.proof .cap{margin-top:10px;font:400 15.5px/1.5 var(--sans);color:var(--t-body)}

/* ── Home: why now ──────────────────────────────────────────────────────── */
.contrast{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:1px}
.contrast>div{--rule-color:var(--hair);box-shadow:0 0 0 1px var(--rule-color)}
.contrast>div{padding:16px}
.contrast .old{background:var(--paper)}
.contrast .new{background:var(--cream)}
.contrast .q{margin-top:12px;font:400 17px/1.45 var(--serif);color:var(--t-body-soft)}
.contrast .new .q{color:var(--ink)}
.contrast .new .th{color:var(--gold-ink)}

/* ── Card-like surfaces ─────────────────────────────────────────────────── */
/*
 * Cream at rest, forest green on hover. Green is a hover state and nothing
 * else: no surface sits permanently dark among light siblings, which is what
 * made the middle engagement card read as though it were already hovered.
 *
 * Every child colour resolves through the tokens below, so the whole surface
 * inverts from the single `:hover` declaration in "Interaction states" rather
 * than from a parallel `.dark` ruleset that has to be kept in sync.
 */
.card,.tier,.svc-cell,.step{
  --surface:var(--cream);
  --on-surface:var(--ink);
  --on-body:var(--t-body);
  --on-mute:var(--t-mute);
  --on-accent:var(--gold-ink);
  --on-mark:var(--green);
  --on-rule:var(--hair-strong);
  --on-rule-soft:var(--hair-soft);
  --chip-fg:var(--green);
  --chip-bg:rgba(30,77,56,.1);
  --chip-warn-fg:var(--rust);
  --chip-warn-bg:rgba(142,59,44,.09);
  background-color:var(--surface);
  color:var(--on-surface);
}
.card .th,.tier .th,.svc-cell .th,.step .th{color:var(--on-mute)}
.card .eyebrow,.tier .eyebrow,.svc-cell .eyebrow,.step .eyebrow{color:var(--on-accent)}

/* ── Home: engagement cards ─────────────────────────────────────────────── */
.cards{margin-top:clamp(32px,4cqi,54px)}
.card{
  --surface:var(--cream-card);
  --card-border:rgba(16,26,20,.13);
  --card-rest:0 1px 2px rgba(16,26,20,.05),0 14px 30px -24px rgba(16,26,20,.5);
  --card-hover:0 1px 2px rgba(0,0,0,.16),0 24px 46px -24px rgba(0,0,0,.6);
  display:flex;flex-direction:column;padding:26px 24px 24px;border-radius:var(--r);
  border:1px solid var(--card-border);
  box-shadow:var(--card-rest);
  transition:background-color var(--t-card) var(--ease),
             color var(--t-card) var(--ease),
             box-shadow var(--t-card) var(--ease),
             transform var(--t-card) var(--ease),
             border-color var(--t-card) var(--ease);
}
.card .top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.card .idx{font:400 13px/1 var(--mono);color:var(--on-accent)}
.card h3{margin:16px 0 0}
.card .hr{height:1px;background:var(--on-rule);margin:18px 0}
.card .tag{margin:0;font:400 16px/1.4 var(--serif);font-style:italic;color:var(--on-mark)}
.card .desc{margin:14px 0 0;font:400 17px/1.62 var(--sans);color:var(--on-body)}
.card .base{margin-top:auto;padding-top:22px}
.card .invest{
  display:flex;justify-content:space-between;gap:10px;padding:11px 0;
  border-top:1px solid var(--on-rule);border-bottom:1px solid var(--on-rule);
  font:400 13px/1 var(--mono);color:var(--on-mute);
}
.card .invest b{font-weight:400;color:var(--on-surface)}
.card .acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:18px}

/* ── Home: method ───────────────────────────────────────────────────────── */
.axis{display:flex;align-items:center;gap:12px;margin-top:clamp(26px,3cqi,42px)}
.axis span{font:400 13px/1 var(--mono);letter-spacing:.1em;color:var(--t-mute);white-space:nowrap}
.axis span:last-child{color:var(--gold-ink)}
.axis i{flex:1;height:1px;background:linear-gradient(90deg,rgba(30,77,56,.5),rgba(200,155,84,.9))}
.steps{margin-top:clamp(18px,2cqi,26px)}
.step{
  padding:clamp(20px,2.2cqi,28px);
  transition:background-color var(--t-surface) var(--ease),
             color var(--t-surface) var(--ease),
             box-shadow var(--t-surface) var(--ease);
}
.step .top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.step .n{font:400 clamp(32px,3.4cqi,42px)/1 var(--serif);color:var(--on-accent);font-variant-numeric:tabular-nums}
.step .when{font:500 13px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--on-mute)}
.step h3{margin:18px 0 0;font:400 clamp(19px,2cqi,24px)/1.2 var(--serif);letter-spacing:-.01em}
.step p{margin:10px 0 0;font:400 17px/1.62 var(--sans);color:var(--on-body)}
.step .removes{margin-top:16px;padding-top:12px;border-top:1px solid var(--on-rule);font:400 13px/1.5 var(--mono);color:var(--on-mark)}

/* ── Home: why us ───────────────────────────────────────────────────────── */
.diffs{margin-top:clamp(34px,4cqi,54px);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.diffs>div{padding:26px 22px}
.diffs .k{font:400 13px/1 var(--mono);color:var(--gold)}
.diffs h3{margin:16px 0 0;font:400 21px/1.2 var(--serif)}
.diffs p{margin:12px 0 0;font:400 16px/1.6 var(--sans);color:var(--t-dark)}

/* ── Home: who runs it (working-notes panel) ────────────────────────────── */
.facts{margin-top:26px;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr))}
.facts>div{padding:15px}
.facts .k{font:400 13px/1 var(--mono);color:var(--t-mute)}
.facts .v{margin-top:8px;font:400 17px/1.35 var(--serif)}
/*
 * Placeholder stand-in for a black-and-white portrait of the lead auditor.
 * Swap the whole .notes block for the photo when the client supplies one.
 */
.notes{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  border:1px solid rgba(16,26,20,.18);border-radius:var(--r);
  background-color:var(--paper);
  background-image:repeating-linear-gradient(180deg,rgba(16,26,20,0) 0 27px,rgba(16,26,20,.09) 27px 28px);
  box-shadow:0 1px 0 rgba(16,26,20,.06) inset;
  display:grid;grid-template-columns:clamp(38px,5cqi,54px) 1fr;
}
.notes .margin{border-right:1px solid rgba(200,155,84,.55)}
.notes .body-col{display:flex;flex-direction:column;padding:clamp(16px,2cqi,24px) clamp(16px,2.2cqi,26px)}
.notes .hd{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.notes .lines{flex:1;display:flex;flex-direction:column;justify-content:center;gap:19px;padding:clamp(16px,2.4cqi,26px) 0}
.notes .ln{height:9px;position:relative}
.notes .ln i{display:block;height:100%;width:0;border-radius:1px;background:rgba(16,26,20,.42);animation:la-type 10s var(--ease-note) infinite}
.notes .mk{position:absolute;left:calc(-1 * clamp(24px,3.4cqi,38px));top:-3px;color:var(--gold-ink);animation:la-mark 10s ease-out infinite}
.notes .mk.q{font:400 17px/1 var(--serif)}
.notes .mk.t{font:400 15px/1 var(--sans);top:-2px}
.notes .sign{padding-top:14px;border-top:1px solid var(--hair-strong)}
.notes .sign .lbl{font:400 13px/1.5 var(--mono);color:var(--t-mute)}
.notes .sig{margin-top:12px;display:inline-block}
.notes .sig .name{font:400 clamp(22px,3cqi,30px)/1 var(--serif);font-style:italic;color:rgba(16,26,20,.85);animation:la-fade 10s ease-out infinite}
.notes .sig .rule{margin-top:7px;height:1px;width:0;background:var(--gold-ink);animation:la-sig 10s var(--ease-note) infinite}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq{border-top:1px solid rgba(16,26,20,.14)}
.faq details{border-bottom:1px solid rgba(16,26,20,.14)}
.faq summary{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  cursor:pointer;list-style:none;padding:18px 0;
  font:400 clamp(16px,1.7cqi,20px)/1.35 var(--serif);
}
.faq summary{transition:color var(--t-control) var(--ease)}
.faq summary:hover{color:var(--green)}
.faq summary::after{content:"+";font:400 13px/1 var(--mono);color:var(--gold-ink)}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 20px;max-width:62ch;font:400 17px/1.65 var(--sans);color:var(--t-body-soft)}

/* ── Services index ─────────────────────────────────────────────────────── */
.idx-head{
  display:grid;grid-template-columns:64px 1fr auto;gap:16px;
  padding-bottom:12px;border-bottom:1px solid rgba(16,26,20,.5);
}
.svc-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.svc-cell{
  padding:clamp(22px,2.4cqi,30px);display:flex;flex-direction:column;
  transition:background-color var(--t-surface) var(--ease),
             color var(--t-surface) var(--ease),
             box-shadow var(--t-surface) var(--ease);
}
.svc-cell .top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.svc-cell .ref{font:400 13px/1 var(--mono);color:var(--on-accent)}
.svc-cell .bill{
  font:500 13px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--chip-fg);background:var(--chip-bg);padding:6px 9px;border-radius:var(--r-sm);
  transition:background-color var(--t-surface) var(--ease),color var(--t-surface) var(--ease);
}
.svc-cell .bill.warn{color:var(--chip-warn-fg);background:var(--chip-warn-bg)}
.svc-cell h3{margin:16px 0 0;font:400 clamp(20px,2.2cqi,26px)/1.18 var(--serif);letter-spacing:-.015em}
.svc-cell .dek{margin:10px 0 0;font:400 16px/1.6 var(--sans);color:var(--on-body)}
.ticks{margin:16px 0 0;display:flex;flex-direction:column;border-top:1px solid var(--on-rule)}
.ticks span{
  display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--on-rule-soft);
  font:400 15.5px/1.5 var(--sans);color:var(--on-body);
}
.ticks span:last-child{border-bottom:0}
.ticks i{color:var(--on-mark);font:500 13px/1.6 var(--mono);font-style:normal}
.svc-cell .meta-line{
  margin-top:auto;padding-top:18px;display:flex;flex-wrap:wrap;gap:16px;
  font:400 13px/1.5 var(--mono);color:var(--on-mute);
}
.svc-cell .meta-line .go{color:var(--on-mark)}
.band{
  margin-top:clamp(40px,5cqi,72px);background:var(--forest);color:var(--light-ink);
  padding:clamp(26px,3cqi,44px);border-radius:var(--r);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:clamp(20px,3cqi,44px);align-items:center;
}
.band h3{margin:16px 0 0;font:400 clamp(22px,2.8cqi,34px)/1.15 var(--serif);letter-spacing:-.02em}
.band .acts{display:flex;flex-wrap:wrap;gap:12px}

/* ── Service detail ─────────────────────────────────────────────────────── */
.svc-hero .inner{width:var(--wrap);margin:0 auto;padding:clamp(30px,3cqi,44px) 0 clamp(40px,5cqi,68px)}
.svc-hero p.lead-lg{margin:24px 0 0;max-width:60ch}
.svc-hero h1{margin:20px 0 0}
.svc-meta{margin-top:clamp(34px,4cqi,54px);grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
.svc-meta>div{padding:16px 16px 18px}
.svc-meta .k{font:500 13px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--t-dark-mute)}
.svc-meta .v{margin-top:9px;font:400 16px/1.3 var(--serif);color:var(--light-ink)}
.svc-body{display:flex;flex-direction:column;gap:clamp(38px,5cqi,72px)}
.blk{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:clamp(20px,4cqi,64px);align-items:start;
}
.blk .lhs{display:flex;gap:14px;align-items:baseline;border-top:1px solid var(--hair-strong);padding-top:18px}
.blk .lhs .n{font:400 13px/1 var(--mono);color:var(--gold-ink)}
.blk h2{margin:0;font:400 clamp(24px,3.2cqi,38px)/1.1 var(--serif);letter-spacing:-.02em;text-wrap:pretty}
.blk .rhs{border-top:1px solid var(--hair-strong);padding-top:18px}
.blk .rhs p{margin:0 0 16px;max-width:64ch;font:400 clamp(15px,1.35cqi,17.5px)/1.68 var(--sans);color:var(--t-body)}
.blk .rhs li{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:14px 0;border-bottom:1px solid rgba(16,26,20,.1);list-style:none;
  font:400 17px/1.6 var(--sans);color:rgba(16,26,20,.78);
}
.blk .rhs ul{margin:0;padding:0}
.blk .rhs li i{color:var(--green);font:500 13px/1.5 var(--mono);font-style:normal}
.pull{background:var(--paper);border-left:2px solid var(--gold);padding:clamp(24px,3cqi,40px)}
.pull p{margin:0;max-width:48ch;font:400 clamp(20px,2.6cqi,32px)/1.32 var(--serif);font-style:italic;color:var(--forest);text-wrap:pretty}

/* ── Pricing ────────────────────────────────────────────────────────────── */
.tiers{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.tier{
  padding:clamp(22px,2.4cqi,32px);display:flex;flex-direction:column;
  transition:background-color var(--t-surface) var(--ease),
             color var(--t-surface) var(--ease),
             box-shadow var(--t-surface) var(--ease);
}
.tier h3{margin:14px 0 0;font:400 clamp(23px,2.6cqi,30px)/1.1 var(--serif);letter-spacing:-.02em}
.tier .invest{
  display:flex;justify-content:space-between;gap:10px;margin-top:18px;padding:10px 0;
  border-top:1px solid var(--on-rule);border-bottom:1px solid var(--on-rule);
  font:400 13px/1 var(--mono);color:var(--on-mute);
}
.tier .invest b{font-weight:400;color:var(--on-surface)}
.tier .note{margin:16px 0 0;font:400 16px/1.6 var(--sans);color:var(--on-body)}
.tier .ticks{margin:18px 0 0;border-top:0}
.tier .ticks span{padding:10px 0;gap:11px}
.tier .base{margin-top:auto;padding-top:22px;display:flex;flex-direction:column;gap:12px}
.tier .base .go{text-align:center;font:500 15px/1 var(--sans);color:var(--on-mark)}
.tier:hover .base .go:hover{color:var(--cream)}
.tier .base .go:hover{color:var(--gold-ink)}
.fx{margin:18px 0 0;font:400 13px/1.7 var(--mono);color:var(--t-mute)}
.drivers{margin-top:26px;display:flex;flex-direction:column;border-top:1px solid rgba(16,26,20,.14)}
.drivers .d{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:16px 0;border-bottom:1px solid rgba(16,26,20,.14)}
.drivers .d:last-child{border-bottom:0}
.drivers .n{font:400 13px/1.6 var(--mono);color:var(--gold-ink)}
.drivers .t{font:400 17px/1.3 var(--serif)}
.drivers p{margin:6px 0 0;font:400 16px/1.6 var(--sans);color:var(--t-body)}
.panel{background:var(--cream);border:1px solid var(--hair-strong);padding:clamp(22px,2.6cqi,32px)}
.panel h3{margin:0;font:400 clamp(20px,2.2cqi,26px)/1.2 var(--serif)}
.panel p{margin:14px 0 0;font:400 17px/1.68 var(--sans);color:var(--t-body)}
.panel.dark{background:var(--forest);color:var(--light-ink);border-color:var(--forest)}
.panel.dark p{color:var(--t-dark)}

/* ── Insights index ─────────────────────────────────────────────────────── */
.log-head{
  display:grid;grid-template-columns:88px 1fr;gap:16px;
  padding-bottom:12px;border-bottom:1px solid rgba(16,26,20,.5);
}
.entry{
  display:grid;grid-template-columns:88px 1fr;gap:16px;align-items:start;
  padding:24px 0;border-bottom:1px solid rgba(16,26,20,.13);
  color:var(--ink);
  transition:background-color var(--t-surface) var(--ease),border-color var(--t-surface) var(--ease);
}
.entry .n{font:400 13px/1.5 var(--mono);color:var(--gold-ink)}
.entry .rd{margin-top:6px;font:400 13px/1.5 var(--mono);color:var(--t-mute-2)}
.entry .tags{display:flex;flex-wrap:wrap;gap:12px;font:400 13px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t-mute)}
.entry .tags .cat{color:var(--green)}
.entry h2{margin:12px 0 0;max-width:44ch;font:400 clamp(20px,2.4cqi,29px)/1.18 var(--serif);letter-spacing:-.015em;text-wrap:pretty}
.entry .dek{margin:10px 0 0;max-width:66ch;font:400 17px/1.62 var(--sans);color:var(--t-body)}
.entry .more{display:inline-block;margin-top:14px;font:500 13px/1 var(--mono);letter-spacing:.06em;color:var(--green)}

/* ── Article ────────────────────────────────────────────────────────────── */
.measure{width:min(760px,100%);margin:0 auto}
.art-tags{display:flex;flex-wrap:wrap;gap:16px;font:400 13px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t-mute)}
.art-tags .cat{color:var(--green)}
.art h1{margin:20px 0 0;font:400 clamp(30px,4.6cqi,54px)/1.06 var(--serif);letter-spacing:-.025em;text-wrap:pretty}
.art .dek{margin:22px 0 0;font:400 clamp(16px,1.6cqi,20px)/1.6 var(--serif);font-style:italic;color:var(--t-body)}
.art .hr{height:1px;background:var(--hair-strong);margin:32px 0}
.prose{font:400 17px/1.75 var(--sans);color:var(--t-body)}
.prose p{margin:0 0 1.15em;max-width:68ch}
.prose h2{margin:2em 0 .6em;font:400 clamp(21px,2.4cqi,28px)/1.2 var(--serif);color:var(--ink)}
.prose h3{margin:1.7em 0 .5em;font:400 clamp(18px,2cqi,22px)/1.25 var(--serif);color:var(--ink)}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.2em;max-width:68ch}
.prose li{margin:0 0 .5em}
.prose a{border-bottom:1px solid rgba(30,77,56,.35)}
.prose strong{font-weight:600;color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 1.5em;font-size:16px}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--hair)}
.prose th{font:500 13px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--t-mute)}
.prose blockquote,.prose .pullquote{
  margin:1.6em 0;border-left:2px solid var(--gold);background:var(--paper);
  padding:22px 24px;font:400 clamp(18px,2.2cqi,26px)/1.35 var(--serif);
  font-style:italic;color:var(--forest);
}
.prose blockquote p:last-child,.prose .pullquote p:last-child{margin-bottom:0}
.prose .table-scroll{overflow-x:auto}
/* Block patterns that appear inside lifted article copy, restyled to the
   redesign's language (hairlines, mono headers, gold rule, 2–3px radii). */
.prose .callout{
  margin:2em 0;background:var(--paper);border:1px solid var(--hair-strong);
  border-left:2px solid var(--gold);border-radius:var(--r-sm);
  padding:20px 22px;font-size:15.5px;
}
.prose .callout p{margin:0}
.prose .callout strong{
  display:block;margin-bottom:.45em;color:var(--green);
  font:500 13px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;
}
.prose .excerpt-label{
  margin:1.9em 0 .4em;font:500 13px/1.4 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);
}
.prose .checklist{list-style:none;padding-left:0}
.prose .checklist li{position:relative;padding-left:1.7em}
.prose .checklist li::before{content:"✓";position:absolute;left:0;top:0;color:var(--green);font:500 13px/1.75 var(--mono)}
.prose table.data,.prose .matrix-table{width:100%;border-collapse:collapse;margin:2em 0;font-size:16px}
.prose table.data th,.prose table.data td,
.prose .matrix-table th,.prose .matrix-table td{
  text-align:left;padding:10px 12px;border-bottom:1px solid var(--hair);vertical-align:top;
}
.prose table.data th,.prose .matrix-table th{
  font:500 13px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--t-mute);background:var(--paper);
}
.prose .matrix-table th{background:var(--forest);color:var(--light-ink)}
.prose table.data td:first-child{font-weight:600;white-space:nowrap}
.prose .matrix-table tr:nth-child(even) td{background:rgba(16,26,20,.03)}
.prose .table-scroll{overflow-x:auto;margin:2em 0}
.prose .table-scroll{-webkit-overflow-scrolling:touch}
.prose .table-scroll table{margin:0}
.prose .table-scroll .matrix-table{min-width:640px}

.art-cta{
  margin-top:40px;background:var(--forest);color:var(--light-ink);
  padding:clamp(22px,2.6cqi,34px);border-radius:var(--r);
}
.art-cta h2,.art-cta h3{margin:14px 0 0;font:400 clamp(21px,2.6cqi,30px)/1.2 var(--serif);letter-spacing:-.02em;color:var(--light-ink)}
.art-cta .eyebrow{color:var(--gold)}
.art-cta p{margin:12px 0 0;max-width:52ch;font:400 17px/1.62 var(--sans);color:var(--t-dark)}
.art-cta .btns{margin-top:20px}
/* Wrapper for the lifted "Keep reading" block. Named .rel-block because the
   lifted markup already uses .rel for the cards themselves. */
.rel-block{margin-top:36px;border-top:1px solid var(--hair-strong);padding-top:22px}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1px;margin-top:16px}
.rel-grid a{--rule-color:var(--hair-strong);background:var(--cream);padding:18px;color:var(--ink);
  box-shadow:0 0 0 1px var(--rule-color);
  transition:background-color var(--t-surface) var(--ease),box-shadow var(--t-surface) var(--ease)}
.rel-grid .cat{font:400 13px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.rel-grid h4{margin:10px 0 0;font:400 17px/1.3 var(--serif);font-weight:400}

/* ── Legal ──────────────────────────────────────────────────────────────── */
.legal-grid{
  margin-top:clamp(28px,4cqi,52px);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:clamp(24px,4cqi,60px);align-items:start;
}
.legal-nav{position:sticky;top:96px;display:flex;flex-direction:column;border-top:1px solid rgba(16,26,20,.4)}
.legal-nav a{
  display:flex;justify-content:space-between;gap:10px;padding:14px 0;
  border-bottom:1px solid var(--hair);font:400 16px/1.4 var(--sans);color:var(--t-body);
}
.legal-nav a .ref{font:400 13px/1.4 var(--mono);color:var(--t-mute-2)}
.legal-nav a:hover{color:var(--green);border-bottom-color:var(--gold-rule)}
.legal-nav a[aria-current]{color:var(--ink)}
.legal-nav a[aria-current] .ref{color:var(--gold-ink)}
.legal-nav .updated{margin-top:20px;font:400 13px/1.6 var(--mono);color:var(--t-mute-2)}
.legal-body{max-width:70ch}
.legal-body .prose{font-size:17px;line-height:1.72}
.legal-body .prose h2{
  margin:2em 0 .5em;font:400 18px/1.3 var(--serif);
  border-top:1px solid var(--hair-strong);padding-top:16px;
}
.legal-body .prose h2:first-child{margin-top:0}

/* ── Book a call ────────────────────────────────────────────────────────── */
.book-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(28px,4cqi,64px);align-items:start}
.rundown{margin-top:clamp(28px,3.4cqi,44px);display:flex;flex-direction:column;border-top:1px solid rgba(237,239,233,.2)}
.rundown .r{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:16px 0;border-bottom:1px solid rgba(237,239,233,.14)}
.rundown .r:last-child{border-bottom:0}
.rundown .n{font:400 13px/1.6 var(--mono);color:var(--gold)}
.rundown .t{font:400 17px/1.3 var(--serif)}
.rundown p{margin:6px 0 0;font:400 16px/1.6 var(--sans);color:var(--t-dark)}
.sched{background:var(--cream);color:var(--ink);border-radius:var(--r);padding:clamp(22px,2.6cqi,32px)}
.sched .cap{
  display:flex;justify-content:space-between;gap:10px;padding-bottom:14px;
  border-bottom:1px solid rgba(16,26,20,.14);
}
/* Calendly inline widget. The prototype's day/time chips are gone — they were a
   stand-in that booked nothing — and this is the real scheduler.

   No border and no background: the iframe is themed to --cream via the embed's
   background_color param, so it reads as part of the .sched card rather than a
   second bordered box floating inside it. Negative side margins let the widget
   use the card's full width, since Calendly adds its own internal gutter.

   The widget measures and resizes its own iframe (data-resize), so min-height is
   only the pre-load reservation that stops the page jumping on load. */
/* !important is load-bearing here, not laziness: widget.js writes border and
   background as INLINE styles on this div after it boots, and inline beats a
   stylesheet on specificity. Without it the embed renders as a second bordered
   box nested inside the .sched card. The iframe's own interior already matches,
   because background_color in the embed URL is set to this same --cream. */
/* The embed carries its own event header ("Discovery Call · 30 min"), so this card
   drops the .cap row it would otherwise duplicate and tightens its padding to suit. */
.sched-embed{padding:clamp(14px,1.6cqi,20px)}
.cal-frame{
  display:block;
  width:calc(100% + 2 * clamp(10px,1.2cqi,16px)) !important;
  margin:0 clamp(-16px,-1.2cqi,-10px) !important;
  border:0 !important;
  background:transparent !important;
  min-height:620px;
  color-scheme:light;   /* iframe is light-themed; stop dark-mode UAs inverting it */
}
@media (max-width:700px){
  .cal-frame{min-height:860px;width:100% !important;margin-inline:0 !important}
}

/* ── Forms ──────────────────────────────────────────────────────────────── */
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px;margin-top:18px}
.f{display:flex;flex-direction:column;gap:7px}
.f>span{font:500 13px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--t-mute)}
.f input,.f select{
  border:none;border-bottom:1px solid rgba(16,26,20,.25);background:transparent;
  padding:9px 0;font:400 15.5px/1.3 var(--sans);color:var(--ink);outline:none;border-radius:0;
}
.f textarea{
  border:1px solid rgba(16,26,20,.2);background:transparent;padding:11px;
  font:400 15.5px/1.5 var(--sans);color:var(--ink);outline:none;resize:vertical;border-radius:var(--r-sm);
}
.f input:focus,.f select:focus{border-bottom-color:var(--green)}
.f textarea:focus{border-color:var(--green)}
.f-wide{margin-top:18px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-note{margin:14px 0 0;font:400 13px/1.5 var(--mono);color:var(--t-mute)}
.status{margin:14px 0 0;font:400 15.5px/1.6 var(--sans);color:var(--green)}
.status[data-err]{color:var(--rust)}

/* ── Contact section ────────────────────────────────────────────────────── */
.contact{
  position:relative;background:var(--ink);color:var(--light-ink);
  padding:clamp(56px,7cqi,104px) 0;overflow:hidden;
}
.contact>.rules{position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(237,239,233,.04) 0 1px,transparent 1px 30px);pointer-events:none}
.contact .inner{
  position:relative;width:var(--wrap);margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(30px,4cqi,64px);align-items:start;
}
.contact h2{margin:18px 0 0}
.contact .sub{margin:18px 0 0;max-width:44ch;color:var(--t-dark)}
.points{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.points div{display:flex;gap:12px;align-items:baseline}
.points .n{font:400 13px/1.5 var(--mono);color:var(--gold)}
.points span:last-child{font:400 16px/1.5 var(--sans);color:var(--t-dark)}
.contact .alt{margin:26px 0 0;font:400 13px/1.6 var(--mono);color:var(--t-dark-mute)}
.form-card{background:var(--cream);color:var(--ink);border-radius:var(--r);padding:clamp(22px,2.6cqi,32px)}
.form-card .cap{
  display:flex;justify-content:space-between;gap:10px;padding-bottom:14px;
  border-bottom:1px solid rgba(16,26,20,.14);
}
.done{
  display:inline-flex;align-items:center;gap:9px;
  font:500 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);background:rgba(30,77,56,.1);padding:8px 11px;border-radius:var(--r-sm);
}
.done.outline{color:var(--gold-ink);background:transparent;border:1px solid rgba(156,107,39,.4);letter-spacing:.13em}
.form-card h3{margin:22px 0 0;font:400 clamp(24px,3cqi,34px)/1.15 var(--serif);letter-spacing:-.02em}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-foot{background:var(--footer);color:rgba(237,239,233,.78);padding:clamp(40px,5cqi,64px) 0 28px}
.site-foot .th{color:rgba(237,239,233,.62)}
.site-foot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(24px,3cqi,48px)}
.site-foot .brand b{color:var(--light-ink);font-size:18px}
.site-foot .seal{width:28px;height:28px;font-size:13px}
.site-foot .blurb{margin:16px 0 0;max-width:34ch;font:400 15.5px/1.6 var(--sans)}
.site-foot .col{display:flex;flex-direction:column;gap:10px}
.site-foot .col .th{margin-bottom:4px}
.site-foot .col a{font:400 15.5px/1 var(--sans);color:inherit}
.site-foot .col a:hover{color:var(--gold)}
.site-foot .cover{font:400 13.5px/1.8 var(--mono);color:var(--t-dark-mute-2)}
.site-foot .hr{height:1px;background:rgba(237,239,233,.14);margin:32px 0 18px}
.site-foot .legal{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font:400 13px/1.7 var(--mono);color:rgba(237,239,233,.62);
}
.site-foot .legal span{max-width:70ch}
.site-foot .legal a{color:inherit;border-bottom:1px solid rgba(237,239,233,.2)}
.site-foot .legal a:hover{color:var(--gold)}

/* ── Reveal ─────────────────────────────────────────────────────────────── */
[data-reveal]{transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.anim-ready [data-reveal]:not([data-shown]){opacity:0;transform:translateY(18px)}
[data-reveal][data-shown]{opacity:1;transform:none}
[data-delay="1"]{transition-delay:.06s}
[data-delay="2"]{transition-delay:.12s}
[data-delay="3"]{transition-delay:.18s}
[data-delay="4"]{transition-delay:.24s}
[data-delay="5"]{transition-delay:.3s}
main{animation:la-in .5s var(--ease) both}

/* NOTE: this block must stay after the reveal rules above and before the
   reduced-motion block below. `[data-reveal][data-shown]{transform:none}`
   ties `.card:hover` on specificity, so source order decides the lift. */
/* ── Interaction states ─────────────────────────────────────────────────── */
/*
 * Every surface hover lives here, after all the component defaults and after
 * the reveal rules above. `[data-reveal][data-shown]{transform:none}` ties
 * `.card:hover` on specificity, so source order is what keeps the lift alive.
 *
 * Card-like surfaces are cream at rest and forest green on hover. Green is a
 * hover state and nothing else, so no card sits permanently dark among light
 * siblings looking as though the cursor were already on it.
 */
.card:hover,.tier:hover,.svc-cell:hover,.step:hover{
  --surface:var(--forest);
  --on-surface:var(--light-ink);
  --on-body:var(--t-dark);
  --on-mute:var(--t-dark-mute);
  --on-accent:var(--gold);
  --on-mark:var(--gold);
  --on-rule:var(--hair-dark);
  --on-rule-soft:var(--hair-dark-soft);
  --chip-fg:var(--forest);
  --chip-bg:var(--gold);
  --chip-warn-fg:#E8A99B;
  --chip-warn-bg:rgba(232,169,155,.16);
  --rule-color:var(--gold-rule);
}
/* Detached cards also lift and deepen; grid cells do not, because they sit
   flush in a hairline table and lifting one would tear a gap in the grid. */
.card:hover{
  --card-border:var(--gold-rule);
  box-shadow:var(--card-hover);
  transform:translateY(-2px);
}
/* Buttons and inline links sit on the inverted surface, so they invert too. */
.card:hover .btn.btn-green,.tier:hover .btn.btn-green{background-color:var(--cream);color:var(--forest)}
.card:hover .btn.btn-green:hover,.tier:hover .btn.btn-green:hover{background-color:var(--gold)}
.card:hover .link-u{color:var(--gold);border-bottom-color:rgba(200,155,84,.45)}
.card:hover .link-u:hover{color:var(--cream)}

/* Insights rows and related-post cards are plain light rows, not card
   surfaces: they tint and warm their rule, without inverting. */
.entry:hover{background-color:var(--hover-light);color:var(--ink);border-bottom-color:var(--gold-rule)}
.rel-grid a:hover{background-color:var(--hover-light);--rule-color:var(--gold-rule)}

/* ── Keyframes ──────────────────────────────────────────────────────────── */
@keyframes la-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes la-row{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes la-tick{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.18);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes la-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes la-sweep{0%{transform:translateY(-60%);opacity:0}12%{opacity:.55}88%{opacity:.55}100%{transform:translateY(560%);opacity:0}}
@keyframes la-blink{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes la-type{0%,6%{width:0}26%{width:100%}94%{width:100%}100%{width:0}}
@keyframes la-mark{0%,46%{opacity:0;transform:translateX(-7px)}54%,94%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes la-sig{0%,68%{width:0}84%,94%{width:100%}100%{width:0}}
@keyframes la-fade{0%,64%{opacity:0}72%,94%{opacity:1}100%{opacity:0}}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
/* The prototype loops indefinitely; production must not. Reveals snap visible,
   looping ornament animations stop on their final frame. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1;transform:none}
  /* Colour still responds to hover; the card lift does not. */
  .card:hover{transform:none}
  .ledger .scan,.marquee .track,.pulse i{animation:none}
  .marquee .track{transform:none}
  .notes .ln i,.notes .sig .rule{width:100%;animation:none}
  .notes .mk,.notes .sig .name{opacity:1;transform:none;animation:none}
}