/* ============================================================================
   credithire.uk — editorial "reference desk" template.
   Persistent left index rail, numbered sections, framed answer-first blocks,
   restrained monochrome. v2 additions: working mobile nav (hamburger < 900px),
   hero media band, "how it works" process band, multi-step booking wizard,
   comparison tables. The producer/administration prototype is excluded from
   this build and its styles are not shipped.
   ============================================================================ */

/* PALETTE — "Red Line" ledger identity, set 24/08/2026 under Karl's visual quality direction.
   Ink on bone paper with ONE oxblood accent: the solicitor's red line of recovery. Swap here only. */
:root{
  --ink:#161616;          /* primary text */
  --graphite:#3c3f44;     /* secondary text */
  --slate:#6a6f77;        /* muted text */
  --faint:#9aa0a8;        /* dim / captions */
  --line:#e2e0da;         /* hairlines */
  --line-2:#cfccc4;       /* stronger hairlines */
  --bone:#f6f4ee;         /* page background */
  --paper:#fffdf8;        /* card/panel background */
  --paper-2:#efece4;      /* alt panel */
  --accent:#7e2a20;       /* ONE accent: oxblood — the red line */
  --accent-deep:#5e1f18;  /* accent deep / hover */
  --accent-tint:#f1e4e0;  /* accent wash */
  --accent-ink:#ffffff;   /* text on accent */
  --focus:#2a2d34;        /* focus ring */
  --ok-fg:#1f5130; --ok-bg:#e8f1e9; --ok-bd:#cfe2d3;
  --warn-fg:#6a5320; --warn-bg:#f3ecdd; --warn-bd:#e2d6bb;
  --err-fg:#7a2222; --err-bg:#f6e7e7; --err-bd:#e6cccc;

  --disp:"Archivo",system-ui,-apple-system,sans-serif;
  --cond:"Barlow Condensed",system-ui,sans-serif;
  --body:"Inter Tight",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --rail:264px;
  --maxw:1220px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.68;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--disp);margin:0;line-height:1.05;letter-spacing:-.02em;color:var(--ink)}
p{margin:0 0 1.05em}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
img,svg{max-width:100%;height:auto}

.mono{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--bone);padding:10px 16px;font-family:var(--mono);font-size:12px}
.skip:focus{left:8px;top:8px}
/* Heading available to assistive technology where the visual label is the .mono
   eyebrow above a card grid — keeps the outline from jumping h1 to h3. */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- top bar ---- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(246,244,238,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar .in{max-width:var(--maxw);margin:0 auto;padding:13px 26px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:800;font-size:17px;letter-spacing:-.01em}
.brand .mk{width:26px;height:26px;border:2px solid var(--ink);display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:700}
.brand small{display:block;font-family:var(--mono);font-weight:400;font-size:9px;letter-spacing:.16em;color:var(--slate);text-transform:uppercase;margin-top:2px}
.topbar .sp{margin-left:auto}
.topnav{display:flex;gap:22px}
.topnav a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.topnav a:hover,.topnav a[aria-current="page"]{color:var(--ink)}
.callbtn{font-family:var(--disp);font-weight:700;font-size:13px;border:1.5px solid var(--ink);padding:9px 15px;white-space:nowrap;transition:.18s}
.callbtn:hover{background:var(--ink);color:var(--bone)}

/* ---- mobile nav (hamburger) — v2 fix for the broken mobile IA ---- */
/* flex:0 0 auto — the toggle is a flex item in .topbar .in and was shrinking
   below its declared 42px box on narrow viewports (36.9px at 390px, 28.8px at
   320px), eroding the only mobile navigation target. */
.navtoggle{display:none;flex:0 0 auto;width:42px;height:38px;border:1.5px solid var(--ink);background:transparent;cursor:pointer;
  padding:0;place-items:center;border-radius:2px}
.navtoggle span{display:block;width:18px;height:2px;background:var(--ink);position:relative}
.navtoggle span::before,.navtoggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);transition:.2s}
.navtoggle span::before{top:-6px}.navtoggle span::after{top:6px}
.mobilemenu{position:fixed;inset:0;z-index:80;display:none}
.mobilemenu[hidden]{display:none}
.mobilemenu.open{display:block}
.mobilemenu .scrim{position:absolute;inset:0;background:rgba(22,22,22,.42)}
.mobilemenu .panel{position:absolute;top:0;right:0;bottom:0;width:min(86vw,340px);background:var(--paper);
  border-left:1px solid var(--line-2);padding:20px 22px 30px;overflow-y:auto;box-shadow:-10px 0 30px rgba(0,0,0,.16)}
.mobilemenu .mm-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.mobilemenu .mm-close{width:38px;height:38px;border:1.5px solid var(--ink);background:transparent;font-size:20px;line-height:1;cursor:pointer;border-radius:2px}
.mobilemenu .mm-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin:18px 0 8px}
.mobilemenu nav a{display:block;font-family:var(--disp);font-weight:600;font-size:17px;padding:10px 0;border-bottom:1px solid var(--line)}
.mobilemenu .mm-cta{margin-top:20px}

@media(max-width:900px){
  .topnav{display:none}
  .navtoggle{display:grid}
  .desk-call{display:none}
}

/* ---- layout shell: index rail + document column ---- */
.shell{max-width:var(--maxw);margin:0 auto;padding:0 26px;display:grid;grid-template-columns:var(--rail) 1fr;gap:56px;align-items:start}
.rail{position:sticky;top:74px;align-self:start;padding:44px 0 40px}
.rail nav{border-left:2px solid var(--line-2);padding-left:18px}
.rail .rl-h{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.rail a{display:block;font-size:14px;color:var(--graphite);padding:6px 0;border-bottom:1px solid transparent}
.rail a:hover{color:var(--ink)}
.rail a.cur,.rail a[aria-current="page"]{color:var(--ink);font-weight:600}
.rail .rl-cta{margin-top:26px}
.doc{min-width:0;padding:44px 0 30px}
.doc.wide{grid-column:1/-1}
@media(max-width:900px){
  .shell{grid-template-columns:1fr;gap:0}
  .rail{display:none}
  .doc{padding:26px 0 20px}
}

/* ---- document header ---- */
.dochead{border-bottom:1px solid var(--line);padding-bottom:26px;margin-bottom:34px}
.crumbs{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--faint);margin-bottom:18px}
.crumbs a:hover{color:var(--ink)}
h1{font-size:clamp(34px,5.4vw,60px);font-weight:800;max-width:18ch}
.byline{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--slate)}
.byline b{color:var(--ink);font-weight:500}

/* ---- answer-first framed block ---- */
.answer{position:relative;background:var(--paper);border:1px solid var(--line-2);border-left:4px solid var(--accent);border-radius:3px;padding:24px 26px;margin:0 0 40px}
.answer .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.answer p{font-size:19px;line-height:1.6;color:var(--graphite);margin:0}

/* ---- prose ---- */
.prose h2{font-size:clamp(24px,3.4vw,34px);font-weight:700;margin:48px 0 14px;padding-top:10px;position:relative}
.prose h2 .no{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--accent);letter-spacing:.1em;display:block;margin-bottom:8px}
.prose h3{font-size:20px;font-weight:700;margin:30px 0 10px}
.prose p{color:var(--graphite);max-width:68ch}
.prose ul,.prose ol{max-width:68ch;color:var(--graphite);padding-left:1.2em;margin:0 0 1.1em}
.prose li{margin:.4em 0}
.prose strong{color:var(--ink)}
.prose a.inl{color:var(--ink);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--line-2)}
.prose a.inl:hover{text-decoration-color:var(--accent)}

/* ---- home hero (editorial masthead + media) ---- */
.masthead{border-bottom:1px solid var(--line);padding:56px 0 44px}
.masthead .eyebrow{margin-bottom:22px}
.masthead h1{font-size:clamp(42px,7.2vw,92px);font-weight:900;letter-spacing:-.035em;line-height:.98;max-width:14ch}
.redline{background:linear-gradient(var(--accent),var(--accent)) 0 94%/100% .08em no-repeat}
.masthead .stand{font-size:clamp(18px,2vw,21px);color:var(--graphite);max-width:60ch;margin:26px 0 0;line-height:1.6}
.masthead .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.herowrap{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
@media(max-width:820px){.herowrap{grid-template-columns:1fr;gap:26px}}
/* 901–1100px: at 901px the index rail reappears and takes 264px + 56px gap out
   of the shell, cutting the document column to 529px. The two-up hero then gives
   the schematic a 208px track, and the headline crushes. Below 901px the rail is
   hidden and the column is wide enough, so the band starts at 901, not 821.
   Stack the hero through this band only; the two-up returns at 1101px. */
@media(min-width:901px) and (max-width:1100px){
  .herowrap{grid-template-columns:1fr;gap:26px}
}
/* margin:0 resets the UA <figure> margin (0 40px), which was otherwise taking
   80px off the schematic at every width. */
.herofig{margin:0;background:var(--paper);border:1px solid var(--line-2);border-radius:6px;padding:22px;aspect-ratio:4/3;display:grid;place-items:center;min-height:0}
.herofig svg{width:100%;height:auto}
/* Keep the stacked schematic to a sane editorial width instead of letting it
   run the full document column. */
@media(max-width:1100px){.herofig{max-width:520px}}

.cta-row{display:flex;flex-wrap:wrap;gap:14px}

/* index cards on home */
.index-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden;margin:8px 0 0}
@media(max-width:640px){.index-grid{grid-template-columns:1fr}}
.index-grid a{background:var(--paper);padding:24px 24px;display:block;transition:background .18s}
.index-grid a:hover{background:var(--paper-2)}
.index-grid .ic-no{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.14em}
.index-grid h3{font-size:21px;font-weight:700;margin:8px 0 6px}
.index-grid p{font-size:14.5px;color:var(--slate);margin:0}

/* ---- process band (how it works diagram) ---- */
.band{margin:56px 0 0;background:var(--paper);border:1px solid var(--line-2);border-radius:6px;padding:34px 30px}
.band .mono{margin-bottom:16px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
@media(max-width:720px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.steps{grid-template-columns:1fr}}
.step{background:var(--paper);padding:22px 20px}
.step .sn{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.14em}
.step h3{font-size:17px;font-weight:700;margin:10px 0 6px}
.step p{font-size:14px;color:var(--slate);margin:0}

/* ---- trust band ---- */
.trust{margin:40px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.trust{grid-template-columns:1fr}}
.trust .cell{background:var(--paper);border:1px solid var(--line-2);border-radius:4px;padding:22px 22px}
.trust .cell h3{font-size:16px;font-weight:700;margin:0 0 8px}
.trust .cell p{font-size:14.5px;color:var(--slate);margin:0}
.trust .cell.is-not{border-left:4px solid var(--accent)}

/* ---- comparison table ---- */
.tblwrap{overflow-x:auto;margin:20px 0 8px;border:1px solid var(--line-2);border-radius:4px}
table.cmp{width:100%;border-collapse:collapse;font-size:15px;min-width:520px;background:var(--paper)}
table.cmp caption{caption-side:top;text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);padding:12px 14px}
table.cmp th,table.cmp td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--graphite)}
table.cmp thead th{font-family:var(--cond);font-weight:600;font-size:16px;letter-spacing:.01em;color:var(--ink);background:var(--paper-2)}
table.cmp tbody th{font-weight:600;color:var(--ink);width:34%}
table.cmp tr:last-child td,table.cmp tr:last-child th{border-bottom:none}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;font-size:16px;padding:15px 26px;border-radius:2px;border:1.5px solid var(--ink);transition:.18s;cursor:pointer;background:transparent;color:var(--ink)}
.btn.solid{background:var(--ink);color:var(--bone)}
.btn.solid:hover{background:var(--accent);border-color:var(--accent)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bone)}
.btn.block{width:100%;justify-content:center}
.btn.sm{font-size:14px;padding:10px 16px}
.btn:disabled{opacity:.55;cursor:default}

/* ---- common questions ---- */
.faq{margin:48px 0 0;border-top:2px solid var(--ink);padding-top:8px}
.faq h2{font-size:clamp(24px,3.4vw,32px);font-weight:800;margin:22px 0 6px}
.qa{border-bottom:1px solid var(--line);padding:22px 0;display:grid;grid-template-columns:36px 1fr;gap:16px;align-items:start}
.qa .q{font-family:var(--mono);font-size:12px;color:var(--accent);padding-top:5px}
.qa h3{font-size:19px;font-weight:700;margin-bottom:8px}
.qa p{color:var(--graphite);margin:0;max-width:66ch}
@media(max-width:560px){.qa{grid-template-columns:1fr;gap:6px}}

/* ---- inline CTA panel ---- */
.cta-panel{margin:52px 0 0;background:var(--paper);border:1px solid var(--line-2);border-radius:4px;padding:34px 32px;display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.cta-panel .ctx{flex:1 1 300px}
.cta-panel h2{font-size:26px;font-weight:800;margin-bottom:6px}
.cta-panel p{color:var(--slate);margin:0;font-size:15px}
.cta-panel .act{display:flex;gap:12px;flex-wrap:wrap}

/* ---- forms (shared) ---- */
.fld{display:flex;flex-direction:column;gap:6px}
.fld.wide{grid-column:1/-1}
.fld label{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.fld input,.fld select,.fld textarea{
  font-family:var(--body);font-size:16px;color:var(--ink);background:var(--bone);
  border:1px solid var(--line-2);border-radius:3px;padding:11px 12px;transition:border-color .18s;width:100%
}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--accent)}
.fld textarea{resize:vertical;min-height:88px}
.fld .err-msg{display:none;font-family:var(--mono);font-size:11px;color:var(--err-fg)}
.fld.invalid input,.fld.invalid select,.fld.invalid textarea{border-color:var(--err-fg)}
.fld.invalid .err-msg{display:block}
.consent{display:flex;gap:11px;font-size:13.5px;color:var(--slate);line-height:1.5;margin-top:4px}
.consent input{margin-top:3px}
.consent a{color:var(--ink);text-decoration:underline}
.form-status{display:none;margin:16px 0 0;font-family:var(--mono);font-size:13px;padding:12px 14px;border-radius:3px}
.form-status.sending{color:var(--graphite);background:var(--paper-2)}
.form-status.ok{color:var(--ok-fg);background:var(--ok-bg);border:1px solid var(--ok-bd)}
.form-status.err{color:var(--err-fg);background:var(--err-bg);border:1px solid var(--err-bd)}
.cf-turnstile{margin-top:6px}

/* ---- booking wizard ---- */
.wizard{background:var(--paper);border:1px solid var(--line-2);border-radius:8px;padding:30px 30px 34px;margin-top:8px}
@media(max-width:520px){.wizard{padding:22px 18px 26px}}
.wz-progress{margin-bottom:24px}
.wz-progress .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.wz-progress .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.wz-progress .pct{font-family:var(--mono);font-size:11px;color:var(--accent)}
.wz-bar{height:6px;background:var(--paper-2);border:1px solid var(--line-2);border-radius:20px;overflow:hidden}
.wz-bar i{display:block;height:100%;width:20%;background:var(--accent);transition:width .3s ease}
.wz-step{display:none}
.wz-step.active{display:block}
.wz-step h2{font-size:clamp(22px,3vw,28px);font-weight:800;margin-bottom:6px}
.wz-step .sub{color:var(--slate);font-size:15px;margin-bottom:20px}
.wz-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
@media(max-width:600px){.wz-grid{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.chip{font-family:var(--mono);font-size:12px;letter-spacing:.04em;border:1.5px solid var(--line-2);background:var(--bone);
  padding:9px 14px;border-radius:20px;cursor:pointer;color:var(--graphite);user-select:none}
.chip[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--bone)}
.wz-soft{display:none;margin-top:18px;border-radius:4px;padding:14px 16px;font-size:14.5px;line-height:1.55}
.wz-soft.show{display:block}
.wz-soft.pos{color:var(--ok-fg);background:var(--ok-bg);border:1px solid var(--ok-bd)}
.wz-soft.caution{color:var(--warn-fg);background:var(--warn-bg);border:1px solid var(--warn-bd)}
.wz-nav{display:flex;justify-content:space-between;gap:12px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.wz-review dl{margin:0;border:1px solid var(--line-2);border-radius:4px;overflow:hidden}
.wz-review .row{display:grid;grid-template-columns:40% 1fr auto;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);align-items:baseline;background:var(--bone)}
.wz-review .row:last-child{border-bottom:none}
.wz-review dt{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);margin:0}
.wz-review dd{margin:0;color:var(--ink);font-size:15px}
.wz-review .edit{font-family:var(--mono);font-size:11px;color:var(--accent);background:none;border:none;cursor:pointer;text-decoration:underline;padding:0}
.wz-resume{display:none;margin-bottom:18px;border:1px dashed var(--line-2);background:var(--paper-2);border-radius:4px;padding:14px 16px;
  align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--graphite)}
.wz-resume.show{display:flex}
.wz-resume .acts{display:flex;gap:8px}
.wz-done{display:none;text-align:left}
.wz-done.show{display:block}
.wz-done .ref{font-family:var(--mono);font-size:22px;letter-spacing:.06em;color:var(--ink);background:var(--paper-2);
  border:1px solid var(--line-2);border-radius:4px;padding:12px 16px;display:inline-block;margin:10px 0 18px}

/* ---- footer ---- */
footer{background:var(--ink);color:#c9cdd3;margin-top:70px;padding:52px 0 60px;font-size:13.5px}
footer .in{max-width:var(--maxw);margin:0 auto;padding:0 26px}
footer .top{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;padding-bottom:30px;border-bottom:1px solid #2b2e34}
@media(max-width:720px){footer .top{grid-template-columns:1fr;gap:26px}}
footer .brand-f{font-family:var(--disp);font-weight:800;font-size:18px;color:#fff;letter-spacing:-.01em;margin-bottom:14px}
.disc{max-width:78ch;line-height:1.7;color:#a2a7ae}
footer nav{display:flex;flex-wrap:wrap;gap:6px 22px;align-content:start}
footer nav a{color:#c9cdd3;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
footer nav a:hover{color:#fff}
.copyline{margin-top:24px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#7f858d}

/* ---- sticky mobile call bar ---- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  background:var(--ink);color:var(--bone);padding:12px 16px;align-items:center;justify-content:space-between;gap:14px;
  box-shadow:0 -6px 20px rgba(0,0,0,.14)}
.callbar .lab{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#b9bdc4}
.callbar a{font-family:var(--disp);font-weight:800;font-size:16px;background:var(--bone);color:var(--ink);padding:11px 18px;border-radius:2px}
@media(max-width:900px){
  .callbar{display:flex}
  body{padding-bottom:64px}
}

/* ---- reveal on scroll ---- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto!important}
}

/* prose note / callout */
.note{background:var(--paper-2);border:1px solid var(--line-2);border-radius:3px;padding:16px 18px;margin:26px 0;font-size:15px;color:var(--graphite);max-width:68ch}
.note strong{color:var(--ink)}

/* ============================================================================
   Library & guide furniture — citation plates, timeline rail, ruled category
   grid, ruled pull-panels, diagram slots. Typographic + inline-SVG only;
   .art-slot stays swappable for real photography later.
   ============================================================================ */
.citeplate{display:flex;align-items:stretch;background:var(--paper);border-top:2px solid var(--ink);border-bottom:1px solid var(--line-2);margin:0 0 30px}
.citeplate .cp-year{font-family:var(--disp);font-weight:900;font-size:clamp(30px,4vw,42px);letter-spacing:-.03em;color:var(--ink);padding:16px 24px;border-right:1px solid var(--line-2);display:flex;align-items:center}
.citeplate .cp-body{padding:14px 22px;display:flex;flex-direction:column;justify-content:center;gap:5px;min-width:0}
.citeplate .cp-name{font-family:var(--cond);font-weight:700;font-size:clamp(19px,2.6vw,24px);line-height:1.15;color:var(--ink)}
.citeplate .cp-meta{display:flex;flex-wrap:wrap;gap:4px 16px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--slate)}
@media(max-width:480px){.citeplate{flex-direction:column}.citeplate .cp-year{border-right:none;border-bottom:1px solid var(--line-2);padding:10px 18px}}

.art-slot{background:var(--paper);border:1px solid var(--line-2);border-radius:6px;padding:20px 22px;margin:26px 0}
.art-slot svg{width:100%;height:auto;display:block}
.art-slot figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:12px}

.pull{background:var(--paper);border-top:2px solid var(--ink);border-bottom:1px solid var(--line-2);padding:22px 24px;margin:26px 0}
.pull .pp-h{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.pull .pp-big{font-family:var(--cond);font-weight:600;font-size:clamp(20px,2.8vw,27px);line-height:1.25;color:var(--ink);max-width:34ch}
.pull .pp-note{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--slate);margin-top:14px}
.pull-cells{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:16px}
.pull-cells .pc{background:var(--bone);padding:13px 14px}
.pull-cells .pc .n{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--accent)}
.pull-cells .pc .t{font-family:var(--cond);font-weight:600;font-size:16.5px;color:var(--ink);margin-top:4px}
.pull-cells .pc p{font-size:13px;line-height:1.45;color:var(--slate);margin:4px 0 0}

.catgrid-cap{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);margin:20px 0 0}
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1px;background:var(--line);border:1px solid var(--line-2);border-radius:4px;overflow:hidden;margin:12px 0 8px}
.catgrid .cat{background:var(--paper);padding:16px 16px 14px}
.catgrid .cat .cc{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--accent)}
.catgrid .cat .cn{font-family:var(--cond);font-weight:600;font-size:17px;line-height:1.2;color:var(--ink);margin-top:6px}

.hide{display:none!important}


/* ============================================================================
   24/08/2026 — "Red Line" visual finishing pass (Karl quality direction).
   Ruled editorial furniture replaces the boxed card assemblies; the hero gains
   the drawn recovery ledger line. Cascade-order overrides: keep below base.
   ============================================================================ */

/* hero ledger device */
.ledger{margin:46px 0 4px;border-top:2px solid var(--ink);padding:16px 0 0}
.ledger figcaption{margin-bottom:4px}
.ledger svg{width:100%;height:auto;display:block}
.ledger .sm{display:none}
@media(max-width:700px){.ledger .lg{display:none}.ledger .sm{display:block;max-width:420px}}
.ledger .draw{stroke-dasharray:1400;stroke-dashoffset:1400;animation:chdraw 1.5s cubic-bezier(.6,0,.2,1) .25s forwards}
@keyframes chdraw{to{stroke-dashoffset:0}}

/* start-here docket: ruled contents rows, ghost numerals, travelling arrow */
.index-grid{display:block;background:none;border:0;border-top:2px solid var(--ink);border-radius:0;overflow:visible}
.index-grid a{position:relative;display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto auto;column-gap:18px;align-items:baseline;background:transparent;border-bottom:1px solid var(--line);padding:18px 44px 18px 2px;transition:background .18s,padding-left .18s}
.index-grid .ic-no{grid-row:1/3;font-family:var(--disp);font-weight:900;font-size:30px;line-height:1;color:var(--line-2);letter-spacing:0;transition:color .18s}
.index-grid h3{font-size:22px;margin:0}
.index-grid p{grid-column:2;font-size:14.5px;color:var(--slate);margin:4px 0 0}
.index-grid a::after{content:"→";position:absolute;right:10px;top:50%;transform:translate(-8px,-50%);font-family:var(--disp);font-weight:700;font-size:20px;color:var(--accent);opacity:0;transition:.18s}
.index-grid a:hover{background:var(--paper);padding-left:12px}
.index-grid a:hover .ic-no{color:var(--accent)}
.index-grid a:hover::after{opacity:1;transform:translate(0,-50%)}
@media(max-width:640px){.index-grid a{grid-template-columns:48px 1fr;padding-right:34px}.index-grid .ic-no{font-size:24px}}

/* process: unboxed ruled columns, red numerals */
.band{background:transparent;border:0;border-radius:0;border-top:2px solid var(--ink);padding:22px 0 0;margin:64px 0 0}
.steps{background:none;border:0;border-radius:0;gap:0;overflow:visible}
.step{background:transparent;padding:8px 22px 4px;border-left:1px solid var(--line-2)}
.step:first-child{border-left:0;padding-left:0}
.step .sn{font-family:var(--disp);font-weight:900;font-size:32px;color:var(--accent);letter-spacing:-.02em}
.step h3{margin:8px 0 6px}
@media(max-width:720px){.step{border-left:0;border-top:1px solid var(--line);padding:16px 0 6px}.step:first-child{border-top:0}}

/* trust: ruled statements, condensed labels */
.trust{gap:0 44px;border-top:2px solid var(--ink);margin-top:64px}
.trust .cell{background:transparent;border:0;border-radius:0;border-bottom:1px solid var(--line);padding:20px 0 18px}
.trust .cell h3{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:15px;color:var(--slate)}
.trust .cell.is-not{border-left:0}
.trust .cell.is-not h3{color:var(--accent)}
.trust .cell p{font-size:15.5px}

/* closing statement: the red panel */
.cta-panel{background:var(--accent);border:0;border-radius:0;padding:44px 40px}
.cta-panel h2{color:#fff;font-size:clamp(24px,3vw,32px)}
.cta-panel p{color:rgba(255,255,255,.82)}
.cta-panel .btn.solid{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.cta-panel .btn.solid:hover{background:#fff;border-color:#fff;color:var(--accent-deep)}
@media(max-width:560px){.cta-panel{padding:32px 24px}}

/* accent details across the system */
.topnav a:hover{color:var(--accent)}
.rail a:hover{color:var(--accent)}
.callbtn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.citeplate .cp-year{color:var(--accent)}
.prose a.inl:hover{color:var(--accent-deep)}

@media(prefers-reduced-motion:reduce){
  .ledger .draw{animation:none;stroke-dashoffset:0}
  .index-grid a,.index-grid a::after,.index-grid .ic-no{transition:none}
}

/* ============================================================================
   24/08/2026 — vehicle-led authority repair.
   Manufacturer press assets are progressive enhancements: frames remain absent
   until the exact local file loads, so missing provenance never creates an
   empty placeholder. Crops are responsive and use per-slot focal variables.
   ============================================================================ */
.vehicle-photo[hidden]{display:none!important}
.vehicle-photo{position:relative;overflow:hidden;margin:0;background:#111;color:#fff}
.vehicle-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--focus-desktop,50% 50%)}
.vehicle-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 14px;background:linear-gradient(transparent,rgba(0,0,0,.8));font-family:var(--mono);font-size:10px;line-height:1.45;letter-spacing:.04em;color:rgba(255,255,255,.9)}
.vehicle-photo--hero{width:calc(100% + 72px);margin:28px -36px 18px;aspect-ratio:16/8.5;border-bottom:4px solid var(--accent)}
.vehicle-photo--hero figcaption{padding:72px 24px 18px;font-size:11px}
.vehicle-photo--editorial{aspect-ratio:16/8.75;border-bottom:3px solid var(--accent)}

.vehicle-led-intro{margin:64px 0 0;border-top:4px solid var(--ink);padding-top:20px}
.vehicle-led-intro .kicker{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.vehicle-led-intro h2{max-width:17ch;margin:9px 0 12px;font-size:clamp(30px,4.5vw,48px)}
.vehicle-led-intro .lead{max-width:64ch;font-size:18px;line-height:1.62;color:var(--graphite)}
.vehicle-disclaimer{font-family:var(--mono);font-size:11px;line-height:1.55;color:var(--slate);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;margin:20px 0 0}
.vehicle-wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin:28px 0 10px}
.vehicle-card{border-top:2px solid var(--ink);padding:0 0 24px;margin:0 0 28px}
.vehicle-card .vehicle-photo{margin:0 0 18px}
.vehicle-card .vc-meta{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-top:16px}
.vehicle-card .vc-class{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.vehicle-card .vc-example{font-family:var(--mono);font-size:9px;line-height:1.4;letter-spacing:.04em;text-align:right;color:var(--faint)}
.vehicle-card h3{font-size:clamp(22px,2.5vw,29px);margin:7px 0 7px}
.vehicle-card p{font-size:15px;line-height:1.58;color:var(--slate);margin:0}
.vehicle-detail-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin:8px 0 18px;background:var(--ink);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.vehicle-detail-strip .vehicle-photo{aspect-ratio:16/9}
.vehicle-detail-strip .vehicle-photo figcaption{font-size:9px;padding:30px 12px 10px}

.authority-map{margin:64px 0 0;border-top:4px solid var(--ink);padding-top:20px}
.authority-map .am-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.75fr);gap:28px;align-items:end;margin-bottom:20px}
.authority-map h2{margin:0;font-size:clamp(28px,4vw,44px)}
.authority-map .am-head p{margin:0;color:var(--slate);font-size:15px;line-height:1.55}
.authority-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--ink)}
.authority-links a{display:flex;flex-direction:column;gap:7px;min-height:128px;padding:18px 20px 20px 0;border-bottom:1px solid var(--line);border-right:1px solid var(--line);color:var(--ink)}
.authority-links a:nth-child(3n){border-right:0;padding-left:20px}
.authority-links a:nth-child(3n+2){padding-left:20px}
.authority-links .al-no{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--accent)}
.authority-links strong{font-family:var(--cond);font-size:19px;line-height:1.18}
.authority-links span:last-child{font-size:13px;line-height:1.45;color:var(--slate)}
.authority-links a:hover strong{color:var(--accent)}

.vehicle-editorial{display:grid;grid-template-columns:1fr;gap:28px;align-items:start;margin:36px 0;border-top:2px solid var(--ink);padding-top:20px}
.vehicle-editorial.has-vehicle-photo{grid-template-columns:minmax(0,1.05fr) minmax(260px,.95fr)}
.vehicle-editorial .ve-copy h2{margin:0 0 10px}
.vehicle-editorial .ve-copy p{margin:0 0 12px;color:var(--graphite)}
.vehicle-editorial .ve-copy ul{margin-top:12px}
.vehicle-editorial .vehicle-photo{grid-column:2;grid-row:1}
.vehicle-editorial .ve-copy{grid-column:1;grid-row:1}

.partner-route{border-top:4px solid var(--accent);border-bottom:1px solid var(--line-2);padding:22px 0;margin:34px 0}
.partner-route .pr-label{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.partner-route h2{margin:0 0 8px;font-size:clamp(25px,3vw,34px)}
.partner-route p{max-width:66ch;color:var(--graphite);margin:0 0 16px}

@media(max-width:760px){
  .vehicle-photo img{object-position:var(--focus-mobile,var(--focus-desktop,50% 50%))}
  .vehicle-photo--hero{width:calc(100% + 36px);aspect-ratio:4/3;margin-inline:-18px}
  .vehicle-wall{grid-template-columns:1fr}
  .vehicle-detail-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .authority-map .am-head,.vehicle-editorial,.vehicle-editorial.has-vehicle-photo{grid-template-columns:1fr}
  .vehicle-editorial .vehicle-photo,.vehicle-editorial .ve-copy{grid-column:1;grid-row:auto}
  .vehicle-editorial .vehicle-photo{order:-1}
  .authority-links{grid-template-columns:1fr}
  .authority-links a,.authority-links a:nth-child(3n),.authority-links a:nth-child(3n+2){border-right:0;padding:16px 0;min-height:0}
}
@media(max-width:460px){.vehicle-detail-strip{grid-template-columns:1fr}}

/* critique round 1 (24/08): the prose note plate was the last boxed element —
   re-set as a ruled ledger strip so inner pages carry the same furniture */
.note{background:transparent;border:0;border-top:2px solid var(--ink);border-bottom:1px solid var(--line-2);border-radius:0;padding:16px 2px 14px}