/* ClarityForge — homepage composition.
   ===========================================================================
   Loaded ON TOP of style.css, which keeps the shared primitives (nav, footer,
   buttons, .wrap, .contact) so /work and /approach are untouched by anything
   in here. Everything below is homepage-only.

   The idea: this page is an auditor's WORKING PAPER, not a landing page. The
   product is reconciliation — two records compared, the mismatch named — so
   the reconciliation is the page's structure rather than a widget sitting in
   the middle of it. A ledger grid, ruled schedules, figures in the margin,
   and the mismatch marked in ember where an auditor would tick it.

   Deliberately removed from the old build, all of it generic-landing-page
   furniture: the fake terminal window and its three dots, the pulsing "live"
   dot, the paired solid+ghost hero buttons, the centred single column, the
   evenly-spaced 3-up card grids, and the radial gradient wash.
   =========================================================================== */

/* ── ledger grid ──────────────────────────────────────────────────────────
   One 12-column field the whole page hangs off, so elements can start and
   stop at different columns instead of every block being the same width. */
.led{display:grid; grid-template-columns:repeat(12,1fr); column-gap:26px}

/* The ledger spine: a single hairline that runs the height of the page at the
   same column the schedule's mismatch rules hang from. Replaces the old
   full-bleed measurement grid + two radial gradients. */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:1;
  background:
    /* paper grain, not a gradient wash */
    repeating-linear-gradient(0deg, rgba(232,240,255,.014) 0 1px, transparent 1px 3px);
  mask:linear-gradient(#000, #000 60%, transparent);
}

/* ── docket line (replaces .eyebrow + pulsing dot) ────────────────────────
   Reads like the header of a filed document rather than a status pill. */
.docket{
  grid-column:1 / 13; display:flex; align-items:baseline; gap:18px;
  border-top:1px solid var(--line2); padding-top:12px; margin-bottom:52px;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--faint)}
.docket .d-ref{color:var(--cyan)}
.docket .d-rule{flex:1; height:1px; background:var(--line)}
.docket .d-meta{color:var(--faint)}

/* ── hero ─────────────────────────────────────────────────────────────────
   Stepped, not centred: the headline starts at the left edge and stops short
   of the right; the sub and the action step inward and down, so the eye
   travels on a diagonal instead of down a centred stack. */
.h-wrap{padding:64px 0 0}
.h-title{
  grid-column:1 / 11; margin:0;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.5rem, 6.6vw, 5.2rem); line-height:1.02;
  letter-spacing:-.018em}
.h-title em{font-style:italic; color:var(--cyan)}
.h-sub{
  grid-column:4 / 11; margin:34px 0 0;
  font-size:1.14rem; line-height:1.62; color:#d6cfc5; max-width:34em}
.h-act{grid-column:4 / 11; margin-top:30px; display:flex; align-items:center; gap:26px; flex-wrap:wrap}

/* An editorial link with a rule under it, not a pill. */
.rule-link{
  display:inline-flex; align-items:baseline; gap:10px;
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink);
  border-bottom:1px solid var(--cyan); padding-bottom:6px;
  transition:color .2s, border-color .2s, gap .2s}
.rule-link .arw{color:var(--cyan); transition:transform .2s}
.rule-link:hover{color:var(--cyan)}
.rule-link:hover .arw{transform:translateX(4px)}
.rule-link.quiet{border-bottom-color:var(--line2); color:var(--muted)}
.rule-link.quiet:hover{color:var(--ink); border-bottom-color:var(--ink)}

/* ── the reconciliation schedule ──────────────────────────────────────────
   The old version was three separate mono columns inside a fake terminal, so
   each stock number appeared three times and the reader had to match them by
   eye. This is one ruled schedule: one row per unit, the three records across
   it, so a mismatch is read along a line the way an auditor reads one. */
.sched{grid-column:1 / 13; margin-top:76px}
.sched-cap{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  border-bottom:1px solid var(--line2); padding-bottom:11px; margin-bottom:0;
  font-family:var(--font-mono); font-size:.63rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--faint)}
.sched-table{width:100%; border-collapse:collapse; font-family:var(--font-mono)}
.sched-table th{
  text-align:left; font-weight:500; padding:14px 16px 12px 0;
  font-size:.6rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--faint); border-bottom:1px solid var(--line)}
.sched-table th.j{color:var(--cyan)}
.sched-table td{
  padding:11px 16px 11px 0; font-size:.82rem; color:var(--muted);
  border-bottom:1px dashed var(--line); white-space:nowrap}
.sched-table td.stk{color:var(--ink)}
.sched-table td.j{color:var(--ink)}
.sched-table tr:last-child td{border-bottom:none}
.ok{color:var(--live)}
.bad{color:var(--ember)}

/* The tick in the margin. An exception row carries an ember rule in the left
   gutter, bleeding outside the table the way a pencil mark sits outside a
   printed column. This is the one place ember is allowed to be structural. */
.sched-table tr.exc{position:relative}
.sched-table tr.exc td:first-child::before{
  content:""; position:absolute; left:-18px; top:6px; bottom:6px;
  width:2px; background:var(--ember)}

/* ── tally ────────────────────────────────────────────────────────────────
   Figures set like a ledger footing: rule above, big Spectral numerals,
   mono caption under. Asymmetric — the exception figure is pushed away from
   the other two and given the accent, because it is the one that matters. */
.tally{grid-column:1 / 13; display:grid; grid-template-columns:auto auto 1fr auto;
  gap:0 54px; align-items:end; border-top:1px solid var(--line2);
  margin-top:0; padding-top:22px}
.fig .n{font-family:var(--font-display); font-weight:700; font-size:2.3rem;
  line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.fig .l{font-family:var(--font-mono); font-size:.58rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); margin-top:7px; max-width:15em}
.fig.exc .n{color:var(--ember)}
.sched-note{grid-column:1 / 13; margin:20px 0 0; font-size:.86rem;
  color:var(--muted); max-width:38em}

/* ── section furniture ────────────────────────────────────────────────────
   Rhythm varies on purpose: the old page used one 86px padding everywhere,
   which is what makes a page read as generated. */
.sec{position:relative; z-index:1}
.sec-tight{padding:64px 0 0}
.sec-air{padding:104px 0 0}
/* The closing follows the signature directly — it is the same gesture (who
   says this, then what they are asking), so it does not get a full section's
   air between the two. */
.sec-close{padding:66px 0 0}
.sec-head{grid-column:1 / 13; display:flex; align-items:baseline; gap:20px;
  border-top:1px solid var(--line2); padding-top:16px; margin-bottom:14px}
.sec-head .ix{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.16em;
  color:var(--cyan); text-transform:uppercase}
.sec-head h2{font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.6rem,3.2vw,2.35rem); letter-spacing:-.014em; margin:0}
.sec-lede{grid-column:1 / 9; margin:0 0 4px; font-size:1.06rem; color:#d6cfc5}

/* ── services as a numbered schedule ─────────────────────────────────────
   Was five identical two-column grid rows. Now an indexed list: the number
   lives in the margin, the heading holds the left field, the detail sits in
   a narrower measure offset right. */
.svcs{grid-column:1 / 13; margin-top:34px}
.svc-row{display:grid; grid-template-columns:52px 4.2fr 5.6fr; column-gap:26px;
  border-top:1px solid var(--line); padding:26px 0; align-items:start}
.svc-row:first-child{border-top:1px solid var(--line2)}
.svc-ix{font-family:var(--font-mono); font-size:.68rem; color:var(--faint);
  letter-spacing:.08em; padding-top:.42em; font-variant-numeric:tabular-nums}
.svc-row h3{font-family:var(--font-display); font-weight:600; font-size:1.32rem;
  margin:0 0 8px; letter-spacing:-.012em}
.svc-who{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint)}
.svc-row p{margin:0 0 12px; color:var(--muted); font-size:.97rem}
.svc-row ul{margin:0; padding-left:17px; color:var(--muted); font-size:.91rem}
.svc-row li{margin-bottom:5px}
.svc-row:hover .svc-ix{color:var(--cyan)}
.svc-row{transition:background .25s}
.svc-row:hover{background:linear-gradient(90deg, rgba(92,198,224,.045), transparent 62%)}

/* ── proof as a schedule of holdings ─────────────────────────────────────
   Was three equal cards in a row. Now ruled entries with the figures set
   right in mono, which is how a list of live systems should read. */
.props{grid-column:1 / 13; margin-top:30px}
.prop{display:grid; grid-template-columns:4.4fr 5.6fr auto; column-gap:30px;
  align-items:baseline; border-top:1px solid var(--line);
  padding:24px 0; transition:background .25s}
.prop:first-child{border-top:1px solid var(--line2)}
.prop:hover{background:linear-gradient(90deg, rgba(92,198,224,.05), transparent 70%)}
.prop h3{font-family:var(--font-display); font-weight:600; font-size:1.3rem;
  margin:0; letter-spacing:-.012em; display:flex; align-items:baseline; gap:12px}
.prop h3 .go{font-family:var(--font-mono); font-size:.6rem; letter-spacing:.12em;
  color:var(--faint); text-transform:uppercase; transition:color .2s}
.prop:hover h3 .go{color:var(--cyan)}
.prop p{margin:0; color:var(--muted); font-size:.95rem}
.prop .fig-r{font-family:var(--font-mono); font-size:.72rem; color:var(--faint);
  text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.prop .fig-r b{color:var(--ink); font-weight:500}

/* ── engagement: three steps, unequal ────────────────────────────────────
   Kept as steps because they are sequential, but the boxed equal-thirds grid
   is gone — they are ruled entries with the step number in the margin. */
.steps{grid-column:1 / 13; margin-top:30px}
.step{display:grid; grid-template-columns:52px 3.6fr 6.2fr; column-gap:26px;
  border-top:1px solid var(--line); padding:24px 0; align-items:start}
.step:first-child{border-top:1px solid var(--line2)}
.step .s{font-family:var(--font-mono); font-size:.68rem; color:var(--cyan);
  padding-top:.34em; font-variant-numeric:tabular-nums}
.step h3{font-family:var(--font-display); font-weight:600; font-size:1.2rem;
  margin:0; letter-spacing:-.012em}
.step p{margin:0; color:var(--muted); font-size:.95rem}

/* ── signature block ─────────────────────────────────────────────────────
   The founder portrait on the homepage. A one-person firm arguing that one
   person did the work should show the person; on the old build he appeared
   nowhere on the front page. Set as a signed byline beside the closing
   argument, not as a hero mugshot. */
.sign{grid-column:1 / 13; display:grid; grid-template-columns:168px 1fr;
  column-gap:32px; align-items:center; border-top:1px solid var(--line2);
  margin-top:0; padding-top:32px}
.sign img{width:168px; height:auto; display:block; border-radius:10px;
  border:1px solid var(--line2)}
.sign-name{font-family:var(--font-display); font-size:1.12rem; font-weight:600}
.sign-role{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cyan); margin:5px 0 10px; display:block}
.sign p{margin:0; color:var(--muted); font-size:.95rem; max-width:40em}
.sign a{color:var(--cyan); border-bottom:1px solid var(--cyan-dim)}

/* ── closing ─────────────────────────────────────────────────────────────
   The old build ended in a big rounded gradient box. This is a ruled closing
   statement — the last line of a document, not a call-to-action card. */
.close{grid-column:1 / 13; border-top:1px solid var(--line2); margin-top:0;
  padding:44px 0 0}
.close h2{font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.7rem,3.4vw,2.6rem); letter-spacing:-.016em; margin:0;
  max-width:17em; line-height:1.14}
.close p{margin:20px 0 0; color:var(--muted); max-width:40em}
.close .mailto{display:inline-flex; align-items:center; gap:11px; margin-top:26px;
  font-family:var(--font-mono); font-size:.94rem; color:var(--cyan);
  border-bottom:1px solid var(--cyan-dim); padding-bottom:5px; transition:.2s}
.close .mailto:hover{border-bottom-color:var(--cyan)}

/* ── entrance ────────────────────────────────────────────────────────────
   One orchestrated load: rules draw across, then their content settles. No
   per-element "rise" on everything, which is the tell it used to have. */
@keyframes drawRule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes settle{from{opacity:0; transform:translateY(9px)}to{opacity:1; transform:none}}
.rv{opacity:0; animation:settle .7s cubic-bezier(.2,.7,.2,1) forwards}
.docket, .sec-head, .sched-cap{transform-origin:left center}

@media(prefers-reduced-motion:reduce){
  .rv{animation:none; opacity:1; transform:none}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

/* ── responsive ──────────────────────────────────────────────────────────
   The stepped hero collapses to a single field; the schedules keep their
   rules but drop their margin columns. */
@media(max-width:980px){
  .h-title{grid-column:1 / 13}
  .h-sub, .h-act{grid-column:1 / 13}
  .sec-lede{grid-column:1 / 13}
  .svc-row{grid-template-columns:40px 1fr; row-gap:12px}
  .svc-row > div:last-child{grid-column:2 / 3}
  .step{grid-template-columns:40px 1fr; row-gap:8px}
  .step > div:last-child{grid-column:2 / 3}
  .prop{grid-template-columns:1fr; row-gap:10px}
  .prop .fig-r{text-align:left}
  .tally{grid-template-columns:1fr 1fr; gap:26px 30px}
}
@media(max-width:720px){
  .h-wrap{padding-top:44px}
  .sec-air{padding-top:78px}
  .sec-close{padding-top:54px}
  .sched{margin-top:52px}
  .sign{grid-template-columns:1fr; row-gap:18px}
  .sign img{width:150px}
  .fig .n{font-size:1.9rem}

  /* The docket is a printed header, not content — on a phone the trailing
     rule and the company line wrapped into three ragged columns and read as
     broken. Keep the label, drop the furniture. */
  .docket{flex-wrap:wrap; gap:0 8px; margin-bottom:36px}
  .docket .d-rule, .docket .d-meta{display:none}

  /* The schedule keeps all four columns: "listed" in every feed row is the
     PREMISE of the reconciliation (the feed claims it, the floor disagrees),
     so dropping that column to save width would remove the half that makes
     the other half mean something. Tighten instead, and let it scroll rather
     than clip if a translation or a longer status ever overflows. */
  .sched-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch;
    margin-left:-2px; padding-left:2px}
  .sched-table{min-width:340px}
  .sched-table th{font-size:.55rem; letter-spacing:.1em; padding-right:10px}
  .sched-table td{font-size:.7rem; padding-right:10px; padding-top:10px; padding-bottom:10px}
  /* The exception tick moves inside the row on a phone; there is no gutter to
     hang it in once the table is flush to the viewport edge. */
  .sched-table tr.exc td:first-child::before{left:-2px}
  .tally{column-gap:30px}
}