/* ═══════════════════════════════════════════════════════════════════════════
   BLACKTHORNE WICKER | app.css
   The winning direction, "provoke", split out of the lab file and made into a
   system that holds across forty-one pages.

   THE FOUR COLOURS.   #8B1D1D  #131311  #ffffff  #f8f7f3   Nothing else, ever.
   TWO FACES.          Adobe Caslon Pro (roman + italic), Lato regular.
   SQUARE CORNERS.     border-radius is never declared in this file.
   ONE CURVE.          cubic-bezier(.4,0,.2,1), .1s to .5s. Nothing else.

   THE MOTION RULE, enforced globally: motion may DRAW a thing that was always
   going to be there. It may never gate, delay or hide information. Every
   reveal is scoped to html.js, and html.js is removed again after 2.5s if
   app.js has not booted. With JavaScript off the page is complete.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 0 | THE TWO FACES ─────────────────────────────────────────────────────
   font-display:swap, not block: a cold mobile connection must never hold the
   display type invisible, and every headline, figure and quote below the
   hero is Caslon. The metric-matched fallbacks below mean the swap costs
   nothing in layout, so CLS stays at zero.

   The Lato face keeps font-weight:100 900 against the static regular master,
   matching the declaration the untouchable hero was built against. Nothing
   in this file asks for 700. Hierarchy here is scale, case, tracking, ground
   and colour.
   -------------------------------------------------------------------------- */
@font-face{font-family:'Adobe Caslon Pro';src:url('/fonts/AdobeCaslonPro-Regular-s1.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Adobe Caslon Pro';src:url('/fonts/AdobeCaslonPro-Italic-s1.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Lato';src:url('/fonts/Lato-Regular-s1.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;}

/* Metrics read out of the shipped TTFs, not guessed.
   Caslon: upm 1000, hhea asc 735 desc 265. Lato: upm 2000, asc 1974 desc 426. */
@font-face{font-family:'Caslon Fallback';
  src:local('Times New Roman'),local('Times'),local('Georgia'),local('Liberation Serif'),local('DejaVu Serif');
  size-adjust:101%;ascent-override:73.5%;descent-override:26.5%;line-gap-override:0%;}
@font-face{font-family:'Lato Fallback';
  src:local('Helvetica Neue'),local('Helvetica'),local('Arial'),local('Liberation Sans'),local('DejaVu Sans');
  size-adjust:99%;ascent-override:98.7%;descent-override:21.3%;line-gap-override:0%;}


/* ── 1 | TOKENS ──────────────────────────────────────────────────────────── */
:root{
  color-scheme:only light;   /* four fixed colours. Nothing here inverts. */

  --red:#8B1D1D;
  --ink:#131311;
  --paper:#ffffff;
  --tint:#f8f7f3;

  /* the names build/hero.css expects, so the verbatim hero keeps rendering
     exactly as it does on the live homepage */
  --c-black:#131311; --c-white:#ffffff; --c-bg:#ffffff; --c-bg-alt:#f8f7f3; --c-muted:#131311;
  --f-display:'Arial Black','Arial Bold',Arial,Helvetica,sans-serif;
  --f-body:Arial,'Helvetica Neue',Helvetica,sans-serif;
  --ts-label:11px;

  /* 260 against 11. Twenty-three to one. That ratio is the whole hierarchy. */
  --ts-lab:11px;
  --ts-mega:clamp(60px,14.4vw,260px);
  --ts-fear:clamp(30px,5.6vw,96px);
  --ts-h1:clamp(37px,6.3vw,112px);
  --ts-ask:clamp(33px,6.6vw,116px);
  --ts-line:clamp(29px,5.1vw,88px);
  --ts-serv:clamp(22px,2.9vw,46px);
  --ts-say:clamp(20px,2.1vw,32px);
  --ts-lede:clamp(19px,1.75vw,27px);
  --ts-read:clamp(16px,1.1vw,18px);

  --wrap:1460px;
  --gut:clamp(20px,4.6vw,88px);
  --e:cubic-bezier(.4,0,.2,1);
  --rail-h:56px;
}

/* ── 2 | GROUNDS ─────────────────────────────────────────────────────────────
   Every section declares its ground and inherits its own hairline, its own
   tick colour and its own secondary tone from it. This is what stops the
   accent drifting page to page, and it is why the red tick that used to sit
   above $80,000 no longer does: on paper and tint the tick is ink.
   -------------------------------------------------------------------------- */
.g-paper{--bg:var(--paper);--fg:var(--ink);--hair:rgba(19,19,17,.16);--tick:var(--ink);--dim:.55;}
.g-tint {--bg:var(--tint); --fg:var(--ink);--hair:rgba(19,19,17,.16);--tick:var(--ink);--dim:.55;}
.g-ink  {--bg:var(--ink);  --fg:var(--paper);--hair:rgba(255,255,255,.22);--tick:var(--paper);--dim:.62;}
.g-red  {--bg:var(--red);  --fg:var(--paper);--hair:rgba(255,255,255,.24);--tick:var(--paper);--dim:.72;}
.g-paper,.g-tint,.g-ink,.g-red{background:var(--bg);color:var(--fg);}

/* THE HERO BRIDGE. build/hero.css writes rgba(var(--paper),0.58) and
   rgba(var(--ink),0.10) on its glass panel, so those two names have to
   resolve to comma triplets, not to hex, or the panel loses its background
   and its border outright. Scoped to the hero subtree so the rest of the
   site can keep reading --ink and --paper as colours. Nothing in
   build/hero.css or build/hero.html is altered by this; it only supplies
   the values the hero was written against. */
.jch{--ink:19,19,17;--paper:255,255,255;}


/* ── 3 | RESET ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;overflow-x:clip;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth;}}
img,svg,video{display:block;max-width:100%;}
h1,h2,h3,h4,p,figure,blockquote,dl,dd,ol,ul{margin:0;}
ol[class],ul[class]{list-style:none;padding:0;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;}
table{border-collapse:collapse;width:100%;}

body{font-family:var(--f-body);font-weight:400;font-size:var(--ts-read);line-height:1.5;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}

a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em;}
:where(a,button,summary,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--red);outline-offset:3px;}
.g-ink :focus-visible,.g-red :focus-visible,.rail :focus-visible{outline-color:#fff;}
::selection{background:var(--red);color:#fff;}
[hidden]{display:none !important;}

.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;}
.skip{position:absolute;left:-9999px;top:0;z-index:120;background:var(--ink);color:#fff;
  font-size:var(--ts-lab);letter-spacing:.2em;text-transform:uppercase;padding:13px 20px;text-decoration:none;}
.skip:focus{left:0;}


/* ── 4 | FURNITURE ───────────────────────────────────────────────────────── */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);}
.sec{padding-block:clamp(66px,9.5vh,124px) clamp(70px,10.5vh,136px);}
.sec--tall{min-height:100svh;display:flex;align-items:center;}
.sec--tall > .wrap{width:100%;}

/* THE LABEL, in four variants. The client's complaint, five times over, was
   that the sections all looked the same, and the single element repeating
   identically on every one of them was this row. It now differs by rule
   position, by tick and by ground. */
.lab{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  font-size:var(--ts-lab);line-height:1;letter-spacing:.2em;text-transform:uppercase;
  position:relative;padding-top:15px;border-top:1px solid var(--hair);}
.lab > span:last-child{opacity:var(--dim);}
.lab--tick::after{content:"";position:absolute;left:0;top:0;width:56px;height:3px;background:var(--tick);}
.lab--under{border-top:0;padding-top:0;padding-bottom:15px;border-bottom:1px solid var(--hair);}
.lab--bare{border-top:0;padding-top:0;}
.lab--wide{letter-spacing:.32em;}

.rule{border:0;border-top:1px solid var(--hair);margin:0;}

/* THE ONE MOTION GRAMMAR. Scoped to html.js so the page is never gated on it. */
.js .rv{opacity:0;transform:translateY(26px);
  transition:opacity .5s var(--e),transform .5s var(--e);transition-delay:var(--d,0s);}
.js .rv.in{opacity:1;transform:none;}
.js .rise{overflow:hidden;}
.js .rise > span{display:block;transform:translateY(103%);transition:transform .5s var(--e) .08s;}
.js .in .rise > span,.js .rise.in > span{transform:none;}

/* THE BUTTON. The firm's red, on every page, every time. */
.btn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;
  font-size:var(--ts-lab);letter-spacing:.2em;text-transform:uppercase;line-height:1;
  padding:19px 30px;transition:background .2s var(--e),color .2s var(--e);}
.btn:hover,.btn:focus-visible{background:var(--ink);color:#fff;}
.g-ink .btn:hover,.g-ink .btn:focus-visible{background:#fff;color:var(--ink);}
.g-red .btn{background:#fff;color:var(--red);}
.g-red .btn:hover,.g-red .btn:focus-visible{background:var(--ink);color:#fff;}

/* Inline links inside prose. Red, underlined, no other treatment. */
.tx a{color:var(--red);text-decoration:underline;}
.g-ink .tx a,.g-red .tx a{color:#fff;}
.tx a:hover{text-decoration-thickness:2px;}


/* ── 5 | THE RAIL ────────────────────────────────────────────────────────────
   The persistent door. Every page but the homepage carries it from the first
   pixel; the homepage holds it until the proof section arrives, so that the
   first red the reader meets is still $80,000 and not a button.
   With JavaScript off it is simply always there.
   -------------------------------------------------------------------------- */
.rail{position:fixed;inset:0 0 auto;z-index:80;background:var(--ink);color:#fff;
  border-bottom:1px solid rgba(255,255,255,.16);transition:transform .35s var(--e);}
.rail-in{display:flex;align-items:stretch;justify-content:space-between;gap:16px;
  max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);}
.rail-id{display:flex;align-items:center;gap:12px;text-decoration:none;padding-block:14px;}
.rail-id svg{width:20px;height:auto;color:#fff;flex:0 0 auto;}
.rail-id b{font-family:var(--f-display);font-weight:400;font-size:17px;letter-spacing:.01em;}
.rail-id i{font-style:normal;font-size:var(--ts-lab);letter-spacing:.2em;text-transform:uppercase;opacity:.55;}
.rail-cta{display:flex;align-items:center;background:var(--red);color:#fff;text-decoration:none;
  font-size:var(--ts-lab);letter-spacing:.2em;text-transform:uppercase;
  padding-inline:clamp(16px,2.4vw,30px);transition:background .2s var(--e),color .2s var(--e);}
.rail-cta:hover,.rail-cta:focus-visible{background:#fff;color:var(--red);}
.rail-short{display:none;}
html.js .rail--hold{transform:translateY(-101%);}
html.js .rail--hold.on{transform:none;}
.rail-pad{height:var(--rail-h);}
html.js .rail-pad--hold{display:none;}


/* ═══════════════════════════════════════════════════════════════════════════
   THE COMPOSITIONS
   Sixteen of them. No page uses the same one twice.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── C1 | OPENING PLATE ────────────────────────────────────────────────────
   Interior masthead. Breadcrumb, eyebrow, one enormous Caslon claim, a lede
   hung right on a short measure, and nothing else.
   -------------------------------------------------------------------------- */
.s-open{padding-block:clamp(40px,6vh,72px) clamp(64px,9vh,116px);}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:var(--ts-lab);
  letter-spacing:.2em;text-transform:uppercase;padding-bottom:clamp(30px,6vh,68px);}
.crumb a{text-decoration:none;opacity:.55;}
.crumb a:hover{opacity:1;text-decoration:underline;}
.crumb i{font-style:normal;opacity:.35;}
.open-h{font-family:var(--f-display);font-weight:400;font-size:var(--ts-h1);line-height:1.01;
  letter-spacing:-.028em;max-width:17ch;margin-top:clamp(22px,3.4vh,38px);}
.open-h em{font-style:italic;}
.open-lede{font-family:var(--f-display);font-size:var(--ts-lede);line-height:1.32;letter-spacing:-.01em;
  max-width:44ch;margin-top:clamp(26px,4vh,46px);margin-left:auto;width:min(100%,640px);}
.open-foot{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;
  margin-top:clamp(34px,5vh,60px);padding-top:20px;border-top:1px solid var(--hair);
  font-size:var(--ts-lab);letter-spacing:.2em;text-transform:uppercase;}
.open-foot .sp{margin-left:auto;}
.open-foot a{text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:5px;}
.open-foot a:hover{border-bottom-color:var(--red);color:var(--red);}

/* ── C2 | THE PROVOCATION ──────────────────────────────────────────────────
   Ink field. Three stacked full-width rules, no columns at all, index
   numerals alone in the left margin, the display type set to a 20ch measure
   against a deliberately empty right two thirds. No red anywhere on it.
   -------------------------------------------------------------------------- */
.fear-stack{margin-top:clamp(46px,7.5vh,94px);}
.fear{display:grid;grid-template-columns:clamp(52px,7vw,132px) 1fr;align-items:start;
  gap:0 clamp(14px,2vw,34px);padding:clamp(24px,4vh,52px) 0;border-top:1px solid var(--hair);}
.fear:first-child{border-top:0;padding-top:0;}
.fear-i{font-size:var(--ts-lab);letter-spacing:.2em;opacity:.5;padding-top:.85em;}
.fear-t{font-family:var(--f-display);font-weight:400;font-size:var(--ts-fear);
  line-height:1.02;letter-spacing:-.022em;max-width:20ch;}

/* ── C3 | PROOF, THREE AXES ────────────────────────────────────────────────
   Named client, named number, before a single service is mentioned. Three
   cases and three compositions, because three identical bands reproduce the
   client's own complaint inside the winning section.
     01  figure left,  quote right, meta across the top
     02  quote left,   figure right and right-aligned
     03  meta running down the left margin, figure and quote stacked right
   The quote is set at 20-32px and sits on the figure's baseline band, not a
   full band below it: the number is the headline, the quote is the proof.
   -------------------------------------------------------------------------- */
.case{padding:clamp(38px,6.5vh,84px) 0 clamp(40px,7vh,90px);border-top:1px solid var(--hair);}
.case:first-of-type{margin-top:clamp(36px,5.5vh,74px);}
.case-meta{display:flex;flex-wrap:wrap;gap:8px clamp(16px,2.4vw,40px);
  font-size:var(--ts-lab);line-height:1.5;letter-spacing:.2em;text-transform:uppercase;}
/* NOT red. The whole withholding depends on the 207px figure being the first
   accent on the page, and an 11px red numeral 40px above it arrives first. */
.case-meta .i{opacity:1;}
.case-meta .t{opacity:var(--dim);}
.case-n{font-family:var(--f-display);font-weight:400;font-variant-numeric:lining-nums tabular-nums;
  font-size:var(--ts-mega);line-height:1;letter-spacing:-.035em;color:var(--red);
  padding-bottom:.06em;white-space:nowrap;}
.case-n .sm{font-size:.4em;letter-spacing:-.012em;font-style:italic;}
/* A range is twice the string a single figure is. Set at its own cap so the
   two carry the same optical mass and the quote beside it keeps a measure. */
.case-n.wide{font-size:clamp(40px,8.9vw,160px);}
.case-body{display:grid;gap:clamp(14px,2.6vw,54px);margin-top:clamp(16px,2.6vh,34px);align-items:end;}
.case blockquote{font-family:var(--f-display);font-style:italic;font-size:var(--ts-say);
  line-height:1.3;letter-spacing:-.008em;max-width:32ch;}
.case--a .case-body{grid-template-columns:minmax(0,auto) minmax(min(100%,24ch),1fr);}
.case--b .case-body{grid-template-columns:minmax(min(100%,24ch),1fr) minmax(0,auto);}
.case--b .case-n{text-align:right;}
.case--b blockquote{grid-column:1;grid-row:1;}
.case--c{display:grid;grid-template-columns:clamp(120px,15vw,230px) minmax(0,1fr);
  gap:0 clamp(20px,3vw,56px);}
.case--c .case-meta{flex-direction:column;gap:11px;align-items:flex-start;padding-top:.5em;}
.case--c .case-body{grid-template-columns:minmax(0,1fr);margin-top:0;}
.case--c blockquote{max-width:38ch;}
/* the position-three call to action, at the foot of the proof */
.proof-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;
  padding-top:clamp(26px,4vh,48px);border-top:1px solid var(--hair);}
.proof-cta p{font-family:var(--f-display);font-size:clamp(19px,1.9vw,29px);line-height:1.22;
  letter-spacing:-.014em;max-width:26ch;}
.proof-cta .btn{margin-left:auto;}

/* ── C4 | SINGLE PROOF BAND ────────────────────────────────────────────────
   The interior-page version. The quote carries the left, the figure stands
   at the right on the same baseline, the attribution runs beneath.
   Deliberately not the shape of any of the three above.
   -------------------------------------------------------------------------- */
.band{display:grid;grid-template-columns:minmax(min(100%,26ch),1fr) auto;align-items:end;
  gap:clamp(16px,3vw,60px);margin-top:clamp(34px,5vh,66px);}
.band-say{font-family:var(--f-display);font-style:italic;font-size:var(--ts-say);line-height:1.3;
  letter-spacing:-.008em;max-width:34ch;}
.band-who{font-size:var(--ts-lab);letter-spacing:.2em;text-transform:uppercase;
  opacity:var(--dim);margin-top:clamp(14px,2vh,22px);}
.band-n{font-family:var(--f-display);font-variant-numeric:lining-nums tabular-nums;
  font-size:clamp(48px,10vw,190px);line-height:.94;letter-spacing:-.035em;color:var(--red);
  white-space:nowrap;}
.band-n .sm{font-size:.4em;font-style:italic;letter-spacing:-.012em;}
.band-n.wide{font-size:clamp(34px,6.6vw,124px);}

/* ── C5 | THE SERVICE LEDGER ───────────────────────────────────────────────
   Tint. A sticky left column holding the headline over a photograph, held in
   place while a six-row ledger of index, name and one technical line runs
   past it on the right.
   -------------------------------------------------------------------------- */
.serv-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,90px);
  margin-top:clamp(38px,5.5vh,78px);align-items:start;}
.serv-hold{position:sticky;top:calc(var(--rail-h) + 28px);}
.serv-say{font-family:var(--f-display);font-weight:400;font-size:clamp(26px,3.5vw,54px);
  line-height:1.05;letter-spacing:-.02em;max-width:14ch;margin-bottom:clamp(20px,3vh,34px);}
/* height:auto is load bearing: without it the width and height attributes
   beat the aspect-ratio and the crop never applies. 3/2 keeps the tower
   crane in frame, which a 4/5 crop cut out of the only photograph with one. */
.serv-img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 42%;}
.serv-cap{font-size:var(--ts-lab);letter-spacing:.2em;text-transform:uppercase;opacity:var(--dim);margin-top:13px;}
.serv-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px clamp(12px,1.6vw,26px);
  padding:clamp(17px,2.8vh,32px) 0;border-top:1px solid var(--hair);}
.serv-list li:last-child{border-bottom:1px solid var(--hair);}
.serv-i{grid-row:1 / span 2;font-size:var(--ts-lab);letter-spacing:.2em;color:var(--red);padding-top:.7em;}
.serv-n{font-family:var(--f-display);font-size:var(--ts-serv);line-height:1.05;letter-spacing:-.02em;}
.serv-n a{text-decoration:none;transition:color .2s var(--e);}
.serv-list li:hover .serv-n a,.serv-n a:focus-visible{color:var(--red);}
.serv-d{font-size:var(--ts-read);line-height:1.5;opacity:.68;max-width:40ch;margin-top:5px;}

/* ── C6 | THE OXBLOOD PLATE ────────────────────────────────────────────────
   The positioning line, repeated verbatim, on a full field of the firm's own
   red. The mark stands beside it as a knockout at 240px, not as a 430px
   moire bleeding off the edge. The three day rates run along the foot,
   divided by vertical hairlines.
   -------------------------------------------------------------------------- */
.s-line{overflow:hidden;}
.s-line > .wrap{display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(40px,7vh,90px);width:100%;}
.line-mid{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(26px,5vw,80px);}
.line-t{font-family:var(--f-display);font-weight:400;font-size:var(--ts-line);
  line-height:1.02;letter-spacing:-.024em;max-width:17ch;}
.mark-big{width:clamp(84px,18vw,240px);height:auto;flex:0 0 auto;color:#fff;margin-bottom:-.5%;}
.price{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hair);}
.tier{padding:clamp(20px,3.2vh,38px) clamp(12px,2vw,30px) 0 clamp(14px,2vw,30px);
  border-left:1px solid var(--hair);}
/* .tier:first-child no longer zeroes its padding, see the card rules below. */
.tier-k{font-size:var(--ts-lab);letter-spacing:.2em;text-transform:uppercase;}
.tier-p{font-family:var(--f-display);font-size:clamp(17px,1.5vw,22px);line-height:1.1;
  letter-spacing:-.01em;opacity:.72;margin-top:10px;}
.tier-p span{display:block;margin:2px 0;font-size:clamp(30px,3.5vw,54px);letter-spacing:-.03em;
  font-variant-numeric:lining-nums;opacity:1;color:#fff;}
.price-note{grid-column:1 / -1;margin-top:clamp(24px,3.6vh,44px);padding-top:15px;
  border-top:1px solid var(--hair);font-size:var(--ts-lab);letter-spacing:.2em;text-transform:uppercase;}

/* ── C7 | THE QUESTION, THEN THE DOOR ──────────────────────────────────────
   Paper. The question alone on the upper screen with its last words in
   italic oxblood, then an asymmetric foot bar: the founder's face at the
   left edge at up to 300px, the close line beside it, the door pushed right.
   For a fifty-two year old sceptical of consultants the face is the proof.
   -------------------------------------------------------------------------- */
.s-end > .wrap{display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(46px,7vh,104px);width:100%;}
.ask{font-family:var(--f-display);font-weight:400;font-size:var(--ts-ask);line-height:1;
  letter-spacing:-.03em;max-width:15ch;margin-top:clamp(40px,8vh,124px);}
.ask em{font-style:italic;color:var(--red);}
.g-ink .ask em,.g-red .ask em{color:#fff;}
.end-bar{display:flex;align-items:flex-end;gap:clamp(20px,3.2vw,52px);flex-wrap:wrap;
  border-top:1px solid var(--hair);padding-top:clamp(24px,3.6vh,42px);}
.end-face{width:clamp(150px,21vw,300px);height:auto;aspect-ratio:1;object-fit:cover;flex:0 0 auto;}
.end-say{flex:1 1 300px;font-family:var(--f-display);font-size:clamp(21px,2.3vw,36px);
  line-height:1.18;letter-spacing:-.018em;max-width:20ch;}
.end-bar .btn{margin-left:auto;}

/* ── C8 | IN SHORT ─────────────────────────────────────────────────────────
   The answer block. One question, one answer, written to be lifted whole by
   an answer engine. The label hangs outside the measure on the left under a
   short tick. Nothing centred, nothing boxed.
   -------------------------------------------------------------------------- */
.s-short{padding-block:clamp(48px,7vh,90px);}
.short{display:grid;grid-template-columns:clamp(96px,13vw,190px) minmax(0,1fr);
  gap:clamp(16px,2.6vw,52px);}
.short-k{font-size:var(--ts-lab);letter-spacing:.2em;text-transform:uppercase;padding-top:.45em;}
.short-k::before{content:"";display:block;width:36px;height:3px;background:var(--tick);margin-bottom:14px;}
.short-q{font-size:var(--ts-lab);letter-spacing:.2em;text-transform:uppercase;
  opacity:var(--dim);margin-bottom:clamp(14px,2vh,22px);}
.short-a{font-family:var(--f-display);font-size:clamp(21px,2.1vw,33px);line-height:1.28;
  letter-spacing:-.014em;max-width:52ch;}

/* ── C9 | THE SCOPE SCHEDULE ───────────────────────────────────────────────
   What a schedule of values looks like. A ruled register: index, line item,
   technical note. Every row the same height, nothing decorative.
   -------------------------------------------------------------------------- */
.sched{margin-top:clamp(34px,5vh,66px);border-top:1px solid var(--hair);}
.sched li{display:grid;grid-template-columns:clamp(44px,5vw,80px) minmax(0,1.1fr) minmax(0,1fr);
  gap:6px clamp(14px,2.4vw,44px);padding:clamp(16px,2.6vh,30px) 0;border-bottom:1px solid var(--hair);
  align-items:baseline;}
.sched-i{font-size:var(--ts-lab);letter-spacing:.2em;opacity:var(--dim);}
.sched-n{font-family:var(--f-display);font-size:clamp(19px,1.75vw,27px);line-height:1.16;letter-spacing:-.014em;}
.sched-d{font-size:var(--ts-read);line-height:1.5;opacity:.72;}

/* ── C10 | THE HUNG MEASURE ────────────────────────────────────────────────
   Prose, when there has to be prose. The label sits alone in the left
   margin; the text runs in one 58ch column and stops. Never centred, never
   full width.
   -------------------------------------------------------------------------- */
.hung{display:grid;grid-template-columns:clamp(96px,15vw,240px) minmax(0,1fr);
  gap:clamp(18px,3vw,60px);margin-top:clamp(32px,4.6vh,60px);}
.hung-k{font-size:var(--ts-lab);letter-spacing:.2em;text-transform:uppercase;opacity:var(--dim);padding-top:.5em;}
.tx{max-width:58ch;}
.tx > * + *{margin-top:1.1em;}
.tx p{font-size:var(--ts-read);line-height:1.62;}
.tx .big{font-family:var(--f-display);font-size:clamp(21px,2.05vw,32px);line-height:1.28;
  letter-spacing:-.014em;max-width:30ch;}
.tx h3{font-family:var(--f-display);font-weight:400;font-size:clamp(21px,1.9vw,29px);
  line-height:1.16;letter-spacing:-.016em;margin-top:1.7em;}
.tx ul{margin-top:1.1em;padding:0;list-style:none;}
.tx ul li{padding:11px 0;border-top:1px solid var(--hair);font-size:var(--ts-read);line-height:1.5;}

/* ── C11 | THE FAQ LEDGER ──────────────────────────────────────────────────
   Numbered question and answer on one full-width rule each, the question in
   Caslon and the answer on a short measure indented to the right.
   -------------------------------------------------------------------------- */
.faq{margin-top:clamp(32px,4.6vh,64px);border-top:1px solid var(--hair);}
.faq li{display:grid;grid-template-columns:clamp(44px,5vw,84px) minmax(0,1fr);
  gap:0 clamp(14px,2.4vw,44px);padding:clamp(20px,3.2vh,40px) 0;border-bottom:1px solid var(--hair);}
.faq-i{font-size:var(--ts-lab);letter-spacing:.2em;opacity:var(--dim);padding-top:.55em;}
.faq-q{font-family:var(--f-display);font-weight:400;font-size:clamp(20px,1.95vw,30px);
  line-height:1.18;letter-spacing:-.016em;max-width:30ch;}
.faq-a{font-size:var(--ts-read);line-height:1.6;max-width:62ch;margin-top:12px;
  margin-left:auto;width:min(100%,72%);opacity:.86;}

/* ── C12 | THE INDEX ───────────────────────────────────────────────────────
   A hub is a list of doors. Numbered rows, the name at display size, one
   line of what it is, and the whole row is the target.
   -------------------------------------------------------------------------- */
.index{margin-top:clamp(34px,5vh,68px);border-top:1px solid var(--hair);}
.index li{border-bottom:1px solid var(--hair);}
.index a{display:grid;grid-template-columns:clamp(44px,5vw,84px) minmax(0,1.25fr) minmax(0,1fr);
  gap:4px clamp(14px,2.4vw,44px);align-items:baseline;text-decoration:none;
  padding:clamp(18px,3vh,36px) 0;transition:padding-left .25s var(--e),color .25s var(--e);}
.index a:hover,.index a:focus-visible{padding-left:clamp(8px,1.2vw,20px);color:var(--red);}
.g-ink .index a:hover,.g-ink .index a:focus-visible,
.g-red .index a:hover,.g-red .index a:focus-visible{color:#fff;opacity:.7;}
.index-i{font-size:var(--ts-lab);letter-spacing:.2em;opacity:var(--dim);}
.index-n{font-family:var(--f-display);font-size:clamp(21px,2.5vw,40px);line-height:1.06;letter-spacing:-.02em;}
.index-d{font-size:var(--ts-read);line-height:1.5;opacity:.7;}

/* ── C13 | THE COMPARISON REGISTER ─────────────────────────────────────────
   Two columns, the criterion in the left margin. A change order, not a
   marketing table.
   -------------------------------------------------------------------------- */
.cmp{margin-top:clamp(34px,5vh,66px);}
.cmp-head,.cmp-row{display:grid;grid-template-columns:clamp(96px,14vw,220px) minmax(0,1fr) minmax(0,1fr);
  gap:8px clamp(14px,2.4vw,44px);}
.cmp-head{padding-bottom:14px;border-bottom:1px solid var(--fg);
  font-size:var(--ts-lab);letter-spacing:.2em;text-transform:uppercase;}
.cmp-head .them{opacity:var(--dim);}
.cmp-row{padding:clamp(16px,2.6vh,30px) 0;border-bottom:1px solid var(--hair);}
.cmp-k{font-size:var(--ts-lab);letter-spacing:.2em;text-transform:uppercase;opacity:var(--dim);}
.cmp-us{font-family:var(--f-display);font-size:clamp(18px,1.6vw,24px);line-height:1.22;letter-spacing:-.012em;}
.cmp-them{font-size:var(--ts-read);line-height:1.55;opacity:.72;}

/* ── C14 | THE GLOSSARY REGISTER ───────────────────────────────────────────
   Term left at display size, definition right on a 58ch measure, ruled.
   -------------------------------------------------------------------------- */
.terms{margin-top:clamp(32px,4.6vh,64px);border-top:1px solid var(--hair);}
.terms > div{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);
  gap:8px clamp(16px,3vw,60px);padding:clamp(18px,2.8vh,34px) 0;border-bottom:1px solid var(--hair);}
.terms dt{font-family:var(--f-display);font-size:clamp(20px,2vw,32px);line-height:1.08;letter-spacing:-.018em;}
.terms dd{font-size:var(--ts-read);line-height:1.6;max-width:58ch;}
.terms dd a{color:var(--red);text-decoration:underline;}

/* ── C15 | THE CLOSE PLATE ─────────────────────────────────────────────────
   The interior close. Oxblood, off-axis: everything hung inside the left
   72%, the mark standing tall and bleeding off the right edge behind it.
   Not the shape of the homepage plate, which is horizontal and carries rates.
   -------------------------------------------------------------------------- */
.s-close{position:relative;overflow:hidden;}
.close-in{position:relative;z-index:1;width:min(100%,72%);}
.close-q{font-family:var(--f-display);font-size:clamp(30px,4.6vw,78px);line-height:1.02;
  letter-spacing:-.028em;max-width:16ch;margin-top:clamp(28px,4.4vh,56px);}
.close-q em{font-style:italic;}
.close-say{font-family:var(--f-display);font-size:clamp(18px,1.6vw,24px);line-height:1.3;
  letter-spacing:-.012em;max-width:34ch;margin-top:clamp(22px,3.2vh,38px);opacity:.86;}
.close-act{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center;margin-top:clamp(26px,4vh,46px);}
.close-act .alt{font-size:var(--ts-lab);letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:5px;}
.close-act .alt:hover{border-bottom-color:#fff;}
.close-mark{position:absolute;right:calc(var(--gut) * -0.55);bottom:-6%;width:min(46vw,420px);
  height:auto;color:#fff;opacity:.15;z-index:0;pointer-events:none;}

/* ── C16 | THE CALCULATOR ──────────────────────────────────────────────────
   A working WIP line. Four figures on the left, the computed schedule on the
   right, printed like the report it is.
   -------------------------------------------------------------------------- */
.calc{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(26px,4vw,72px);margin-top:clamp(34px,5vh,66px);align-items:start;}
.calc-f{border-top:1px solid var(--hair);}
.calc-f label{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;
  padding:clamp(13px,2vh,20px) 0;border-bottom:1px solid var(--hair);
  font-size:var(--ts-lab);letter-spacing:.2em;text-transform:uppercase;}
.calc-f input{width:min(58%,240px);font-family:var(--f-display);font-size:clamp(19px,1.7vw,26px);
  text-align:right;letter-spacing:-.01em;background:transparent;color:inherit;
  border:0;border-bottom:1px solid var(--hair);padding:4px 2px;
  font-variant-numeric:lining-nums tabular-nums;}
.calc-f input:focus{outline:0;border-bottom-color:var(--red);}
.calc-note{font-size:var(--ts-lab);letter-spacing:.2em;text-transform:uppercase;
  opacity:var(--dim);margin-top:18px;}
.calc-out{border-top:1px solid var(--hair);}
.calc-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:baseline;
  padding:clamp(12px,2vh,20px) 0;border-bottom:1px solid var(--hair);}
.calc-row dt{font-size:var(--ts-lab);letter-spacing:.2em;text-transform:uppercase;}
.calc-row dd{font-family:var(--f-display);font-size:clamp(21px,2vw,32px);line-height:1;
  letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums;}
.calc-row--big dd{font-size:clamp(34px,4.6vw,72px);color:var(--red);}
.calc-verdict{font-family:var(--f-display);font-size:clamp(20px,2vw,30px);line-height:1.24;
  letter-spacing:-.016em;max-width:32ch;margin-top:clamp(20px,3vh,32px);}


/* ── 6 | THE FOOTER ──────────────────────────────────────────────────────────
   The site index. Forty-one pages need navigation, and a contractor reads an
   index, not a menu. Ink, four columns of labels under one hairline.
   -------------------------------------------------------------------------- */
.foot{background:var(--ink);color:#fff;--hair:rgba(255,255,255,.18);--dim:.55;}
.foot-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:26px;padding-block:clamp(44px,6vh,72px) clamp(30px,4vh,46px);}
.foot-id{display:flex;align-items:center;gap:16px;text-decoration:none;}
/* 48px. The mark holds its cuts down to here and no further. */
.foot-mark{width:48px;height:auto;color:#fff;flex:0 0 auto;}
.foot-id b{font-family:var(--f-display);font-weight:400;font-size:23px;letter-spacing:.01em;}
.foot-line{font-family:var(--f-display);font-size:clamp(17px,1.5vw,23px);line-height:1.24;
  letter-spacing:-.012em;max-width:30ch;}
.foot-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px clamp(16px,2.4vw,44px);
  padding-block:clamp(30px,4vh,48px);border-top:1px solid var(--hair);}
.foot-nav h2{font-size:var(--ts-lab);letter-spacing:.2em;text-transform:uppercase;
  opacity:var(--dim);margin-bottom:16px;}
.foot-nav ul{display:grid;gap:9px;list-style:none;padding:0;margin:0;}
.foot-nav a{font-size:14px;line-height:1.35;text-decoration:none;opacity:.86;transition:opacity .2s var(--e);}
.foot-nav a:hover{opacity:1;text-decoration:underline;}
.foot-end{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;
  padding-block:22px clamp(30px,4vh,44px);border-top:1px solid var(--hair);
  font-size:var(--ts-lab);letter-spacing:.2em;text-transform:uppercase;opacity:var(--dim);}
.foot-end a{text-decoration:none;}
.foot-end a:hover{text-decoration:underline;}


/* ── 7 | THE DRAWN CURSOR ────────────────────────────────────────────────────
   A dot and a ring that take their colour from the ground they stand on.
   cursor:none is scoped: over a quote, a figure or an input the real caret
   comes back, because a man trying to copy $80,000 out of the page needs to
   see that he can.
   -------------------------------------------------------------------------- */
.cur,.cur-r{position:fixed;left:0;top:0;z-index:95;pointer-events:none;opacity:0;
  transition:opacity .2s var(--e),background .2s var(--e),border-color .2s var(--e);}
.cur{width:6px;height:6px;background:var(--red);}
.cur-r{width:30px;height:30px;border:1px solid var(--red);}
html.cur-on .cur,html.cur-on .cur-r{opacity:1;}
html.cur-on body,html.cur-on a,html.cur-on button,html.cur-on img,html.cur-on svg{cursor:none;}
html.cur-on p,html.cur-on li,html.cur-on dd,html.cur-on dt,html.cur-on h1,html.cur-on h2,
html.cur-on h3,html.cur-on blockquote,html.cur-on .case-n,html.cur-on .band-n,
html.cur-on input,html.cur-on td,html.cur-on th{cursor:text;}
html.cur-on a p,html.cur-on a li,html.cur-on a span,html.cur-on a h2,html.cur-on a h3{cursor:none;}
html[data-cur="light"] .cur{background:#fff;}
html[data-cur="light"] .cur-r{border-color:#fff;}


/* ── 8 | NARROW ──────────────────────────────────────────────────────────────
   Four breakpoints. The mark never disappears, the rail CTA never
   disappears, and nothing ever pans sideways.
   -------------------------------------------------------------------------- */
@media(max-width:1080px){
  .serv-grid{grid-template-columns:1fr;}
  .serv-hold{position:static;}
  .serv-img{aspect-ratio:16/9;}
  .foot-nav{grid-template-columns:repeat(2,minmax(0,1fr));}
  .close-in{width:min(100%,84%);}
  .calc{grid-template-columns:1fr;}
}
@media(max-width:860px){
  .case--a .case-body,.case--b .case-body{grid-template-columns:minmax(0,1fr);}
  .case--b .case-n{text-align:left;}
  .case--b blockquote{grid-row:auto;}
  .case--c{grid-template-columns:1fr;gap:18px;}
  .case--c .case-meta{flex-direction:row;flex-wrap:wrap;padding-top:0;gap:8px 24px;}
  .band{grid-template-columns:1fr;align-items:start;}
  .cmp-head,.cmp-row{grid-template-columns:1fr;}
  .cmp-head .them,.cmp-head .us{display:none;}
  .cmp-us::before{content:"Blackthorne Wicker";display:block;font-family:var(--f-body);
    font-size:var(--ts-lab);letter-spacing:.2em;text-transform:uppercase;opacity:var(--dim);margin-bottom:7px;}
  .cmp-them::before{content:"The alternative";display:block;font-size:var(--ts-lab);
    letter-spacing:.2em;text-transform:uppercase;opacity:var(--dim);margin:14px 0 7px;}
  .terms > div{grid-template-columns:1fr;}
  .faq-a{width:100%;}
  .index a{grid-template-columns:clamp(38px,7vw,60px) minmax(0,1fr);}
  .index-d{grid-column:2;}
  .sched li{grid-template-columns:clamp(38px,7vw,60px) minmax(0,1fr);}
  .sched-d{grid-column:2;}
  .short{grid-template-columns:1fr;}
  .hung{grid-template-columns:1fr;gap:14px;}
  .open-lede{margin-left:0;}
}
@media(max-width:640px){
  :root{--rail-h:52px;}
  .fear{grid-template-columns:1fr;}
  .fear-i{padding-top:0;padding-bottom:10px;}
  .fear-t{max-width:none;}
  .price{grid-template-columns:1fr;}
  .tier{border-left:0;border-top:0;}
  .tier:first-child{border-top:0;}
  .end-bar{align-items:flex-start;}
  .end-bar .btn,.proof-cta .btn{margin-left:0;width:100%;text-align:center;}
  .line-mid{align-items:flex-start;gap:24px;}
  .close-in{width:100%;}
  .close-mark{opacity:.11;width:72vw;right:-16vw;}
  .foot-nav{grid-template-columns:1fr;gap:26px;}
  .calc-f input{width:46%;}
}
@media(max-width:520px){
  .rail-long{display:none;}
  .rail-short{display:inline;}
  .rail-id i{display:none;}
  .line-mid{flex-direction:column-reverse;align-items:flex-start;}
  .mark-big{margin-bottom:0;}
  .foot-top{align-items:flex-start;}
}

@media(prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none;}
  .js .rise > span{transform:none;transition:none;}
  .cur,.cur-r{display:none;}
  .rail,.index a{transition:none;}
}

@media print{
  .rail,.rail-pad,.cur,.cur-r,.skip,.close-mark{display:none !important;}
  /* Print drops to paper and ink, and stays inside the four colours. */
  .g-ink,.g-red{--bg:#ffffff;--fg:#131311;--hair:rgba(19,19,17,.35);--tick:#131311;--dim:.6;
    background:#ffffff;color:#131311;}
  .foot{background:#ffffff;color:#131311;}
  .sec{padding-block:22px;break-inside:avoid;}
  .sec--tall{min-height:0;display:block;}
  .btn{background:#ffffff;color:#131311;border:1px solid #131311;}
  a[href^="/"]::after{content:" (blackthornewicker.com" attr(href) ")";font-size:10px;}
}

/* The founder's own plate carries the portrait crop, which has the room for it.
   Every other page closes on the square. Both are the same sitting. */
.end-face--tall{width:clamp(170px,26vw,380px);aspect-ratio:1056/1864;height:auto;object-fit:cover;object-position:50% 22%;}
@media(max-width:640px){.end-face--tall{width:52vw;}}

/* ############################################################################
   ###  STONE  ################################################################
   ############################################################################
   Two changes, one intent. Every photograph goes monochrome, and the ground
   that was solid black becomes a medium-light warm grey. What is left is a
   page with exactly one colour in it, the oxblood, and it now has nowhere
   to hide. On a black band the red was one loud thing among two; on stone it
   is the only thing on the page that is not a neutral.

   The grey is warm rather than true, because it sits against paper that
   already carries a trace of yellow, and a neutral grey next to a warm white
   reads as blue.
   ======================================================================== */

:root{
  --stone:      #b9b6ae;   /* the ground that replaces ink */
  --stone-deep: #a6a39a;   /* its hover / inset state      */
}
html[data-theme="dark"]{ --stone:#33322e; --stone-deep:#3d3b37; }

/* The band inverts no longer. Type on stone is ink, and every rule that
   assumed white-on-black has to come with it. */
.g-ink{
  --bg:var(--stone); --fg:var(--ink);
  --hair:rgba(19,19,17,.26); --tick:var(--ink); --dim:.66;
}
.g-ink .tx a,.g-ink .ask em{color:var(--ink);}
.g-ink :focus-visible{outline-color:var(--ink);}
.g-ink .btn{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.g-ink .btn:hover,.g-ink .btn:focus-visible{background:var(--paper);color:var(--ink);}
.g-ink .index a:hover,.g-ink .index a:focus-visible{background:var(--stone-deep);}
html[data-theme="dark"] .g-ink{--fg:#f4f3ef;--hair:rgba(255,255,255,.2);--tick:#f4f3ef;}
html[data-theme="dark"] .g-ink .tx a,html[data-theme="dark"] .g-ink .ask em{color:#f4f3ef;}
html[data-theme="dark"] .g-ink .btn{background:#f4f3ef;color:#131311;border-color:#f4f3ef;}

/* Every photograph, monochrome. The site now carries one colour and it is
   never in a picture. */
img,picture img,.plate img,.end-face{filter:grayscale(1);}

/* The hero photograph and its masked foreground cutout go with them. The
   masks themselves are untouched, they are alpha, not colour, so the
   fade and the worker cutout behave exactly as before. */
.jch-bg,.jch-fg{filter:grayscale(1);}

/* The mark keeps its red. It is the identity, not an image. */
.nav img,.nav svg,.foot img,.foot svg,img[src*="mark"],img[src*="logo"]{filter:none;}

/* ############################################################################
   ###  GLASS, AND THE RED LEDGER  ############################################
   ############################################################################ */

/* THE HEADER. A solid ink bar sat on top of the photograph like a lid. It goes
   back to frosted glass, the same treatment the hero panel already uses, so
   the two objects on that first screen are made of the same material. The
   translucency is what lets the job cost report and the framing keep running
   underneath it instead of being cut off. */
.rail{
  /* .72 rather than .42: at 42% the bar composites to mid-grey over light
     paper and white type on it measures 2.8:1, which fails AA. At 72% it is
     still visibly glass, the framing and the report read through it on the
     hero, and white type clears 8:1 on every ground the site has. */
  background:rgba(19,19,17,.72);
  -webkit-backdrop-filter:blur(28px) saturate(1.3);
          backdrop-filter:blur(28px) saturate(1.3);
  border-bottom:1px solid rgba(255,255,255,.14);
}
/* Once the page has left the hero there is no photograph to see through, so
   the glass thickens rather than staying half-transparent over plain paper. */
.rail.is-stuck,.rail--solid{
  background:rgba(19,19,17,.86);
  -webkit-backdrop-filter:blur(30px) saturate(1.2);
          backdrop-filter:blur(30px) saturate(1.2);
}
/* Safari and Firefox without backdrop-filter would show text over open
   photograph, so they get the opaque bar they had before. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .rail{background:rgba(19,19,17,.92);}
}

/* THE LEDGER. The figures in the sky go to the firm's red. The report is the
   one place on the site where a number IS the subject rather than a label on
   one, so it earns the accent, and now that the photograph behind it is
   monochrome, red is the only chromatic thing in the frame.

   Lifted off #8B1D1D because these sit at 8 | 10px over a bright sky and the
   deep oxblood closes up at that size; this is the same hue held at a
   luminance that survives being small and backlit. */
.jch-grid .n{color:#E04B4B;}
.jch-grid .n.k{color:#F26A6A;font-weight:700;}
.jch-grid .n.dim{color:rgba(224,75,75,.66);}
/* Codes and descriptions stay neutral. If every column were red the accent
   would be the ground rather than the emphasis. */
.jch-grid .c{color:rgba(255,255,255,.9);}

/* ############################################################################
   ###  THE ACCENT STOPS BEING A GROUND  ######################################
   ############################################################################
   A whole section painted oxblood is not an accent, it is a colour scheme. On
   a monochrome site one full-bleed red band is the loudest thing on the page
   by a distance, and it competes with the figures that are supposed to be the
   only chromatic moment.

   So the red ground becomes stone, and the red goes where it means something:
   the figures, the mark, and the one button that asks for the call. Red is now
   ink, never ground.
   ======================================================================== */

.g-red{
  --bg:var(--stone); --fg:var(--ink);
  --hair:rgba(19,19,17,.26); --tick:var(--ink); --dim:.66;
}
.g-red .tx a,.g-red .ask em{color:var(--ink);}
.g-red :focus-visible{outline-color:var(--ink);}
.g-red .btn{background:var(--red);color:#fff;border-color:var(--red);}
.g-red .btn:hover,.g-red .btn:focus-visible{background:var(--ink);color:#fff;border-color:var(--ink);}
html[data-theme="dark"] .g-red{--fg:#f4f3ef;--hair:rgba(255,255,255,.2);--tick:#f4f3ef;}
html[data-theme="dark"] .g-red .tx a,html[data-theme="dark"] .g-red .ask em{color:#f4f3ef;}

/* The figure that lands in that section keeps the accent, that is the whole
   point of it, and it now has a quiet ground to land on. */
.g-red .fig,.g-red .case-n,.g-red .amt{color:var(--red);}
html[data-theme="dark"] .g-red .fig,html[data-theme="dark"] .g-red .case-n{color:#E04B4B;}

/* ############################################################################
   ###  ARIAL BLACK / TIMES  ##################################################
   ############################################################################
   Both are system faces, so nothing is downloaded and nothing can fail to
   load. Arial Black carries every heading and the firm name; Times carries
   the reading. Arial Black has no light weights and no italic, so the
   hierarchy below is built from size, case and tracking rather than weight.
   ======================================================================== */

body{font-family:var(--f-body);font-weight:400;}
h1,h2,h3,h4,.fig,.amt,.case-n,.tier-amount,.ask,.tile-t,.index-t{
  font-family:var(--f-display);font-weight:900;
}

/* Arial Black at display size needs tightening, it sets much wider than
   Caslon did, and at 900 weight the default tracking opens the line up. */
h1{letter-spacing:-.035em;line-height:.98;}
h2{letter-spacing:-.03em;line-height:1.04;}
h3{letter-spacing:-.02em;}
.fig,.amt,.case-n{letter-spacing:-.045em;}

/* THE FIRM NAME, wherever it is still set in type rather than drawn. All caps,
   tracked in rather than out: the client's own logotype is condensed with the
   letters nearly touching, and any type setting of the name follows it. Small
   caps are gone; the name is not a mixed-case word with small capitals in it,
   it is a block of capitals. */
.wordmark,.firm{
  font-family:var(--f-display);font-weight:900;
  font-variant:normal;font-variant-caps:normal;
  text-transform:uppercase;letter-spacing:-.012em;font-size:16px;
}

/* THE EYEBROWS lose the rule above them. It was doing the job the ground
   change already does, twice on every screen. */
.lab{border-top:0;padding-top:0;}
.lab--tick::after{display:none;}
.lab--under{border-bottom:0;padding-bottom:0;}

/* THE MARK IS NEVER SMALL. It carries fine graduations that close up and turn
   it into a plain triangle below roughly 40px, so it never goes there. */
.rail-id svg,.rail-id img{width:38px;height:auto;}
.foot-id svg,.foot-id img{width:56px;height:auto;}
@media(max-width:640px){ .rail-id svg,.rail-id img{width:32px;} }

/* THE MARK AS GROUND. On an oxblood section it sits large behind the type in
   a lighter red, above the ground, under everything that has to be read. */
.g-red{position:relative;isolation:isolate;overflow:hidden;}
.g-red::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  right:-6%;top:50%;transform:translateY(-50%);
  width:min(58vw,720px);aspect-ratio:757/643;
  background:currentColor;opacity:.16;
  -webkit-mask:url('/icons/mark-mono.svg') no-repeat center/contain;
          mask:url('/icons/mark-mono.svg') no-repeat center/contain;
  color:#C4463F;
}
.g-red > *{position:relative;z-index:1;}

/* FULL WIDTH. Several blocks were sitting at their content width inside a
   column that was wider, which reads as a mistake rather than as air. */
.sec > .wrap > *,.tx,.hung,.index,.price,.scope,.tiles,.case,.band{width:100%;}
.wrap > .lab{width:100%;}

/* NO SELECTING THE LEDGER. The report in the sky is scenery, not content, dragging across the hero should never leave it half-highlighted. */
.jch,.jch-report,.jch-grid,.jch-title{
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
}
.jch-panel{-webkit-user-select:text;user-select:text;}

/* ── THE RATE CARDS, BACK ──────────────────────────────────────────────────
   The revamp reduced these to three numbers in a row, which told a contractor
   the price and nothing about what he gets for it. The cards carry the tier,
   the day rate, who it is for and what is in it, the same copy they held
   before, in a bordered card that reads as a plan you could choose. */
.price{display:grid;grid-template-columns:1fr;gap:var(--gut);border-top:0;width:100%;}
@media(min-width:900px){ .price{grid-template-columns:repeat(3,minmax(0,1fr));} }
.tier{
  display:flex;flex-direction:column;height:100%;
  border:1px solid var(--hair);border-left:1px solid var(--hair);
  padding:clamp(26px,3vw,40px) clamp(22px,2.4vw,32px) clamp(30px,3.4vw,44px);
  background:transparent;
}
.tier-k{font-family:var(--f-display);font-weight:900;font-size:var(--ts-lab);
  letter-spacing:.24em;text-transform:uppercase;opacity:.62;margin:0 0 clamp(20px,2.4vw,32px);}
/* "FROM" sits on its own line above the figure rather than on the baseline
   beside it: at Arial Black's weight a 74px numeral and an 11px label cannot
   share a baseline without the label colliding with the descender of the $. */
.tier-p{display:block;margin:0;font-family:var(--f-display);font-weight:900;
  color:inherit;line-height:1;letter-spacing:-.04em;}
.tier-p i{display:block;font-style:normal;font-size:var(--ts-lab);letter-spacing:.18em;
  text-transform:uppercase;opacity:.55;margin-bottom:8px;line-height:1;}
.tier-p span{display:inline-block;font-size:clamp(46px,5.4vw,74px);vertical-align:baseline;}
.tier-p em{font-style:normal;font-size:var(--ts-lab);letter-spacing:.14em;
  text-transform:uppercase;opacity:.55;margin-left:.35em;}
.tier-d{font-family:var(--f-body);font-size:16px;line-height:1.55;opacity:.78;
  margin:clamp(16px,1.8vw,22px) 0 0;max-width:34ch;}
.tier-f{list-style:none;margin:clamp(22px,2.6vw,32px) 0 0;padding:0;display:flex;
  flex-direction:column;gap:11px;flex:1;}
.tier-f li{display:flex;align-items:flex-start;gap:11px;font-family:var(--f-body);
  font-size:15px;line-height:1.5;opacity:.82;}
.tier-f li::before{content:'';flex-shrink:0;width:5px;height:10px;margin:5px 0 0 2px;
  border:solid var(--red);border-width:0 1.6px 1.6px 0;transform:rotate(45deg);}
.g-ink .tier-f li::before,.g-red .tier-f li::before{border-color:var(--red);}
.price-note{grid-column:1/-1;font-family:var(--f-body);font-size:var(--ts-lab);
  letter-spacing:.18em;text-transform:uppercase;opacity:.5;margin-top:clamp(20px,2.4vw,30px);}

/* ── FULL WIDTH ────────────────────────────────────────────────────────────
   The centre column is gone. Content now runs the full width of the viewport
   inside the gutters, which removes the whole class of complaints about
   blocks not filling their column, there is no column left to under-fill.

   Two things have to come with it or the page stops being readable at a wide
   viewport. The gutter grows with the screen rather than staying at a fixed
   24px, so the type does not run into the glass. And running prose keeps a
   measure: a paragraph set 1900px wide is unreadable no matter how confident
   the layout is, so text blocks cap at 78 characters while every structural
   element, grids, cards, tables, photographs, takes the whole width. */
.wrap{max-width:none;margin:0;padding-inline:var(--gut);}

:root{--gut:24px;}
@media(min-width:900px){  :root{--gut:48px;} }
@media(min-width:1400px){ :root{--gut:72px;} }
@media(min-width:1900px){ :root{--gut:104px;} }

/* Structure fills. Prose does not. */
.tx p,.hung p,.ask,.line-t,.tier-d,.index-s,.tile-s,.end-say,.price-note,
.answer p,.lead,.sub{max-width:78ch;}
.fig,.amt,.case-n,h1,h2{max-width:22ch;}
.lab,.price,.tiles,.index,.scope,.table-wrap,.plate,.case,.band,.foot-grid{max-width:none;}

/* The measure, applied to the classes that actually carry running text. The
   earlier list guessed at names; these were found by walking the rendered
   page at 1920 and reading which paragraphs were still running wide. */
.short-a,.tier-d,.index-s,.tile-s,.end-say,.price-note,.hung p,.tx p{
  max-width:min(44rem,100%);   /* ~704px, a real measure */
}
/* Display lines break early, that is what makes them display. Set in rem
   rather than ch: a ch in Arial Black at 53px is 53px wide, so 24ch resolved
   to 1281px and capped nothing at all. */
.fear-t,.ask,.line-t{max-width:min(30rem,100%);}
@media(min-width:1400px){ .fear-t,.ask,.line-t{max-width:min(38rem,100%);} }

/* ############################################################################
   ###  USING THE WIDTH  ######################################################
   ############################################################################
   Removing the centre column did not fix the squeeze, it exposed it. The text
   blocks were always narrow; the 1460px wrap had been hiding it by keeping
   everything visually together. At 1600px the same measure floats in a third
   of the page with nothing on the right.

   Widening the prose is the wrong fix, a 1400px line is unreadable at any
   type size. The right fix is two-fold: set the type larger so the same
   measure occupies more of the page, and give the rail sections a real
   three-track grid so the label, the body and the right margin each hold
   their own column instead of the body being stranded mid-page.
   ======================================================================== */

/* Type up. At 16px a 44rem measure fills 704px of a 1456px column | 48%. At
   19px the same line count fills 836px, and the page reads as composed
   rather than as a column that ran out. */
html{font-size:17px;}
@media(min-width:1200px){ html{font-size:18px;} }
@media(min-width:1700px){ html{font-size:19px;} }

/* The rail sections get real tracks. The label holds the left, the body takes
   the field, and the third track carries the section's own right-hand mark, which is what stops the right side reading as forgotten. */
@media(min-width:1100px){
  /* .wrap > .short > (h2.short-k + div). The label holds a fixed left track,
     the question and answer take the field, and the field is wide enough that
     the block reads as spanning the page rather than hugging the gutter. */
  .short{display:grid;grid-template-columns:minmax(150px,14%) minmax(0,1fr);
         gap:clamp(36px,5vw,96px);align-items:start;}
  .short-k{grid-column:1;margin:0;}
  .short > div{grid-column:2;max-width:min(58rem,100%);}
  .short-q{max-width:none;}
  .short-a{max-width:none;}
}

/* Anything that is a single stack of prose in a wide section gets pushed off
   the left edge, so the column sits in the field rather than clinging to the
   gutter. */
@media(min-width:1300px){
  .tx,.hung{padding-left:clamp(0px,6vw,140px);}
  .tx > .lab,.hung > .lab{margin-left:calc(clamp(0px,6vw,140px) * -1);}
}

/* Display lines scale with the page now rather than sitting at a fixed cap,
   so a headline on a 1900px screen is a headline and not a caption. */
h1{font-size:clamp(38px,5.6vw,92px);}
h2{font-size:clamp(28px,3.8vw,58px);}
.fear-t{font-size:clamp(26px,3.4vw,52px);max-width:min(34rem,100%);}
.ask{font-size:clamp(30px,4.2vw,68px);max-width:min(30rem,100%);}
.short-a{font-size:clamp(19px,1.5vw,26px);line-height:1.5;}

/* .hung is a label hung in the margin beside a body of prose. At 1600px the
   body was stopping at 65% because .tx capped at the reading measure and the
   label track ate the rest. Given real tracks the label holds the left, the
   prose holds a readable field, and the .big lead line spans wider than the
   paragraphs under it, which is what makes the block read as composed rather
   than as one narrow column with a caption. */
@media(min-width:1100px){
  .hung{display:grid;grid-template-columns:minmax(150px,15%) minmax(0,1fr);
        gap:clamp(36px,5vw,96px);align-items:start;}
  .hung-k{grid-column:1;margin:0;}
  .hung > .tx,.hung > div:not(.hung-k){grid-column:2;max-width:min(60rem,100%);}
  .hung .big{max-width:min(46rem,100%);font-size:clamp(24px,2.6vw,40px);line-height:1.22;}
  .hung .tx p{max-width:min(46rem,100%);}
}

/* ############################################################################
   ###  SIX FIXES  ############################################################
   ############################################################################ */

/* 1 | THE HERO PANEL IN RED. The headline and its line under it carry the
      accent, so the first words on the site are in the firm's colour. */
.jch-panel h1{color:#131311 !important;}
.jch-panel h1 em{color:#8B1D1D !important;}
.jch-panel p{color:#131311 !important;}

/* 2 | THE HERO BUTTON. Ink to oxblood, with the wipe inverted to match. */
.jch-cta{background:#8B1D1D !important;color:#fff !important;border-color:#8B1D1D !important;}
.jch-cta:hover,.jch-cta:focus-visible{background:#131311 !important;color:#fff !important;}

/* 3 | THE PRICING, rebuilt. It read as unfinished for four reasons and all
      four were real: the figures were near-white on a stone ground and barely
      visible; the cards had no ground of their own so they read as empty
      outlines; the watermark bled straight through them; and there was a
      screen of dead space under the last row. */
.price{gap:clamp(16px,1.6vw,28px);align-items:stretch;}
.tier{
  background:var(--paper);border:0;position:relative;z-index:1;
  padding:clamp(30px,3vw,44px) clamp(26px,2.6vw,36px) clamp(30px,3vw,40px);
}
html[data-theme="dark"] .tier{background:var(--paper-2);}
.tier-k{color:var(--ink);opacity:1;font-size:var(--ts-lab);margin-bottom:clamp(24px,2.6vw,34px);}
.tier-p{color:var(--ink);}
.tier-p span{color:#8B1D1D;}          /* the figure carries the accent */
.tier-p i,.tier-p em{color:var(--ink);opacity:.5;}
.tier-d{color:var(--ink);opacity:.72;}
.tier-f li{color:var(--ink);opacity:.8;}
.tier-cta{
  display:block;margin-top:clamp(26px,2.8vw,36px);padding:15px 0 0;
  border-top:1px solid var(--rule);
  font-family:var(--f-display);font-weight:900;font-size:var(--ts-lab);
  letter-spacing:.14em;text-transform:uppercase;color:#8B1D1D;text-decoration:none;
  transition:letter-spacing var(--in) var(--e);
}
.tier-cta::after{content:" →";}
.tier-cta:hover,.tier-cta:focus-visible{letter-spacing:.2em;}
/* The watermark stays behind the cards rather than through them. */
.g-red::before,.s-line::before{z-index:0;}
.price-note{margin-top:clamp(24px,2.4vw,34px);border-top:0;}
.s-line{padding-bottom:clamp(48px,5vw,80px);}

/* 4 | THE FEAR LINES. 612px in a 1456px column is the squeeze. They are
      display lines, so they take a display measure. */
.fear-t{max-width:min(52rem,100%) !important;font-size:clamp(28px,3.6vw,58px);}
@media(min-width:1100px){
  .fear{display:grid;grid-template-columns:minmax(90px,7%) minmax(0,1fr);
        gap:clamp(28px,3vw,56px);align-items:baseline;}
  .fear-n{grid-column:1;} .fear-t{grid-column:2;}
}

/* 5 | THE QUOTE runs longer. It was capped at the body measure while sitting
      beside a 200px figure, which made the pair look mismatched. */
.case-q,.quote,blockquote p{max-width:min(46rem,100%) !important;
  font-size:clamp(21px,2vw,32px);line-height:1.34;}

/* 6 | THE CLOSING QUESTION. Same fix as the fear lines, it is the largest
      thing on its screen and was capped to 540px. */
.ask{max-width:min(56rem,100%) !important;font-size:clamp(32px,4.6vw,76px);}

/* ############################################################################
   ###  MOTION  ###############################################################
   ############################################################################
   Everything here animates transform, opacity or clip only, runs off the
   scroll timeline or a single observer, and collapses to nothing under
   prefers-reduced-motion. No library, no wheel hijack, no page-load gate:
   with the script blocked every one of these ends in its finished state.
   ======================================================================== */

@media(prefers-reduced-motion:no-preference){

  /* THE LEDGER BREATHES. The report in the sky drifts a few pixels as the
     page moves, so it reads as a live document rather than a screenshot. */
  @supports (animation-timeline: view()){
    .jch-report{animation:drift linear both;animation-timeline:scroll(root block);}
    @keyframes drift{from{transform:translateY(0)}to{transform:translateY(-46px)}}

    /* Photographs pan slowly inside their frame as they cross the viewport. */
    .plate img,.band-img img{animation:pan linear both;animation-timeline:view();
      animation-range:entry 0% exit 100%;}
    @keyframes pan{from{transform:scale(1.08) translateY(-1.5%)}to{transform:scale(1.08) translateY(1.5%)}}

    /* Section numbers count up out of the margin. */
    .divno,.sched-i,.fear-n{animation:numrise linear both;animation-timeline:view();
      animation-range:entry 0% entry 60%;}
    @keyframes numrise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

    /* Rules draw themselves as their section arrives. */
    .lab,.tier,.sched li,.faq-item{--dl:0}
    .price,.sched,.faq{animation:none}
  }

  /* THE FIGURES ROLL. A money figure is the point of the section it sits in,
     so it arrives digit by digit rather than fading in whole. */
  .fig,.amt,.tier-p span{--roll:1;}
  .is-in .fig,.is-in .amt,.is-in .tier-p span{animation:roll 620ms cubic-bezier(.2,.8,.2,1) both;}
  @keyframes roll{from{opacity:0;transform:translateY(.32em) scale(.96)}to{opacity:1;transform:none}}

  /* EVERY CARD LIFTS on hover, and its rule sweeps. */
  .tier,.tile,.index li,.case{transition:transform var(--out) var(--e),box-shadow var(--out) var(--e);}
  .tier:hover{transform:translateY(-6px);box-shadow:0 22px 60px rgba(19,19,17,.13);}
  .tier{position:relative;overflow:hidden;}
  .tier::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
    background:var(--red);transform:scaleX(0);transform-origin:0 50%;
    transition:transform 420ms cubic-bezier(.2,.8,.2,1);}
  .tier:hover::after{transform:scaleX(1);}

  /* LINKS pull their underline through rather than switching it on. */
  a:not(.btn):not(.tier-cta):not(.rail-cta):not(.rail-id){
    background-image:linear-gradient(currentColor,currentColor);
    background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
    transition:background-size 320ms cubic-bezier(.2,.8,.2,1);}
  a:not(.btn):not(.tier-cta):not(.rail-cta):not(.rail-id):hover{background-size:100% 1px;}

  /* THE HEADER CTA fills from the left on approach. */
  .rail-cta{position:relative;overflow:hidden;isolation:isolate;}
  .rail-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
    transform:translateX(-101%);transition:transform 320ms cubic-bezier(.2,.8,.2,1);}
  .rail-cta:hover::before,.rail-cta:focus-visible::before{transform:none;}

  /* THE MARK turns its columns up one at a time when the header is hovered. */
  .rail-id svg path{transition:opacity 260ms var(--e);}
  .rail-id:hover svg{animation:markpulse 900ms cubic-bezier(.2,.8,.2,1);}
  @keyframes markpulse{0%{transform:scaleY(1)}40%{transform:scaleY(1.07)}100%{transform:scaleY(1)}}
  .rail-id svg{transform-origin:50% 100%;}

  /* SCHEDULE ROWS stagger in and shift on hover. */
  .sched li,.faq-item,.index li{transition:padding-left var(--out) var(--e),background-color var(--out) var(--e);}
  .sched li:hover,.index li:hover{padding-left:14px;background:rgba(139,29,29,.04);}

  /* THE READING RULE across the top, driven entirely by the scroll timeline. */
  @supports (animation-timeline: scroll()){
    .progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:99;
      transform-origin:0 50%;transform:scaleX(0);background:var(--red);
      animation:fill linear both;animation-timeline:scroll(root block);pointer-events:none;}
    @keyframes fill{to{transform:scaleX(1)}}
  }
}

@media(prefers-reduced-motion:reduce){
  .progress{display:none}
  .fig,.amt,.tier-p span,.divno,.plate img,.jch-report{animation:none !important;transform:none !important;opacity:1 !important;}
}


/* ############################################################################
   ###  1 | ARIAL BLACK, SELF-HOSTED  #########################################
   ############################################################################
   Arial Black is installed on desktop Windows and macOS and on neither iOS nor
   Android, so every heading on the site was falling back to regular Arial on a
   phone. The client supplied the file; it is subset to the Latin set the site
   actually uses and served as woff2, which is 14KB against the 104KB TTF.

   It is declared at weight 900 because that is what the headings ask for. The
   file reports weight 400 in its own OS/2 table, since Monotype ships Black as
   its own family rather than as a weight of Arial, and the declaration here is
   what maps it onto the 900 the stylesheet uses.
   ======================================================================== */
@font-face{
  font-family:'BW Display';
  src:url('/fonts/arialblack.6fb8a593.woff2') format('woff2');
  font-weight:900;font-style:normal;font-display:swap;
}
:root{
  --f-display:'BW Display','Arial Black','Arial Bold',Arial Black,Arial,Helvetica,sans-serif;
}

/* ############################################################################
   ###  2 | THE MASTHEAD  #####################################################
   ############################################################################
   Full bleed, and the hero panel's glass rather than the dark bar. The panel
   is what the client pointed at, so the numbers are the panel's: paper at 58%
   with a 30px blur, and a hairline of ink at 10%.

   Which flips everything inside it from white to ink, and takes the discipline
   line out: the header carries the identity and the one call, nothing else.
   ======================================================================== */
.rail-in{max-width:none;margin:0;padding-inline:var(--gut) 0;}

.rail,.rail.is-stuck,.rail--solid{
  background:rgba(255,255,255,.80);
  -webkit-backdrop-filter:blur(30px) saturate(1.2);
          backdrop-filter:blur(30px) saturate(1.2);
  border-bottom:1px solid rgba(19,19,17,.10);
  color:var(--ink);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .rail,.rail.is-stuck{background:rgba(255,255,255,.94);}
}
.rail-id,.rail-id svg,.rail .wm{color:var(--ink);}
.rail :focus-visible{outline-color:var(--ink);}
.rail-cta{background:var(--red);color:#fff;}
.rail-cta:hover,.rail-cta:focus-visible{background:var(--ink);color:#fff;}
html[data-theme="dark"] .rail,html[data-theme="dark"] .rail.is-stuck{
  background:rgba(19,19,17,.58);border-bottom-color:rgba(255,255,255,.12);color:#f4f3ef;}
html[data-theme="dark"] .rail-id,html[data-theme="dark"] .rail-id svg,
html[data-theme="dark"] .rail .wm{color:#f4f3ef;}

/* The bar sits over the photograph on the hero, and the drawn cursor takes its
   colour from the ground it is on. On light glass that ground is now light. */
.rail{--cur-on-rail:dark;}

/* ############################################################################
   ###  3 | THE WORDMARK  #####################################################
   ############################################################################
   The client's own two files, used as masks so one asset paints in any colour.
   --wm-h is the ink height of the caps, and it is set from the mark's rendered
   height at every breakpoint, so the firm name always measures the logo beside
   it. The aspect numbers are the artwork's own: 1835x199 and 1040x199.
   ======================================================================== */
.wm{display:inline-flex;align-items:baseline;gap:calc(var(--wm-h) * .34);
  line-height:0;flex:0 0 auto;color:inherit;}
.wm > span{display:block;flex:0 0 auto;background:currentColor;height:var(--wm-h);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;}
.wm-b{width:calc(var(--wm-h) * 9.2211);
  -webkit-mask-image:url('/icons/wordmark-blackthorne.727c23a9.png');
          mask-image:url('/icons/wordmark-blackthorne.727c23a9.png');}
.wm-w{width:calc(var(--wm-h) * 5.2261);
  -webkit-mask-image:url('/icons/wordmark-wicker.6b3844be.png');
          mask-image:url('/icons/wordmark-wicker.6b3844be.png');}

/* THE LOCKUP. The mark is 3300x2858, so its drawn height is width x .8661.
   Every --wm-h below is that number for the mark beside it, to the pixel. */
.rail-id svg,.rail-id img{width:38px;}
.rail-id .wm{--wm-h:32.9px;}
.foot-id svg,.foot-id img{width:56px;}
.foot-id .wm{--wm-h:48.5px;}

/* Narrow: the two words stack, and the pair still measures the mark. Each word
   is then half the block, less the leading between them. */
@media(max-width:900px){
  .wm{flex-direction:column;align-items:flex-start;gap:calc(var(--wm-h) * .16);}
  .rail-id svg,.rail-id img{width:34px;}
  .rail-id .wm{--wm-h:13.6px;}          /* 2 x 13.6 + 2.2 leading = 29.4, the mark */
  .foot-id svg,.foot-id img{width:48px;}
  .foot-id .wm{--wm-h:19.2px;}          /* 2 x 19.2 + 3.1 = 41.5, the mark */
}
@media(max-width:420px){
  .rail-id svg,.rail-id img{width:30px;}
  .rail-id .wm{--wm-h:12px;}
}

/* ############################################################################
   ###  4 | THE OXBLOOD PLATE  ################################################
   ############################################################################
   The red ground had been pulled out to stone. The client's brief was the
   other way round: the plate is painted oxblood, the mark sits large in the
   ground a shade lighter, and nothing else on the plate carries the logo.
   ======================================================================== */
.g-red{
  --bg:#8B1D1D; --fg:#ffffff;
  --hair:rgba(255,255,255,.30); --tick:#ffffff; --dim:.82;
}
html[data-theme="dark"] .g-red{
  --bg:#6E1616; --fg:#f7f4f2; --hair:rgba(255,255,255,.24); --tick:#f7f4f2;
}
/* Nothing inside the plate is allowed to be red: red on red is not a colour. */
.g-red .tx a,.g-red .ask em,.g-red .close-q em,
.g-red .fig,.g-red .case-n,.g-red .amt,
html[data-theme="dark"] .g-red .tx a,html[data-theme="dark"] .g-red .ask em,
html[data-theme="dark"] .g-red .fig,html[data-theme="dark"] .g-red .case-n{color:#fff;}
.g-red :focus-visible{outline-color:#fff;}
.g-red .btn{background:#fff;color:#8B1D1D;border-color:#fff;}
.g-red .btn:hover,.g-red .btn:focus-visible{background:transparent;color:#fff;border-color:#fff;}
.g-red .close-act .alt{color:#fff;border-bottom-color:rgba(255,255,255,.45);}
.g-red .close-act .alt:hover{border-bottom-color:#fff;}

/* THE MARK IN THE GROUND, one instance, a shade lighter than the paint. */
.g-red::before{background:#B0413B;opacity:1;color:#B0413B;}
/* and no other logo anywhere on the rates plate */
.s-line .mark-big{display:none !important;}
.line-mid{display:block;}

/* ############################################################################
   ###  5 | THE RATE CARDS  ###################################################
   ############################################################################
   White cards on the plate. The client asked for bigger type here in as many
   words: half the men reading this are reading it on a phone at the end of a
   day on site, so nothing in a card is under 17px and the list is 18px.
   ======================================================================== */
.g-red .tier{background:#fff;}
html[data-theme="dark"] .g-red .tier{background:#111110;}
.g-red .tier-k,.g-red .tier-p,.g-red .tier-d,.g-red .tier-f li{color:var(--ink);}
html[data-theme="dark"] .g-red .tier-k,html[data-theme="dark"] .g-red .tier-p,
html[data-theme="dark"] .g-red .tier-d,html[data-theme="dark"] .g-red .tier-f li{color:#f4f3ef;}
.g-red .tier-p span{color:#8B1D1D;}
html[data-theme="dark"] .g-red .tier-p span{color:#E86A64;}
.g-red .tier-p i,.g-red .tier-p em{color:var(--ink);opacity:.62;}
.g-red .tier-f li::before{border-color:#8B1D1D;}
.g-red .tier-cta{color:#8B1D1D;border-top-color:rgba(19,19,17,.16);}
.g-red .price-note{color:#fff;opacity:.9;}

.tier-k{font-size:14px;letter-spacing:.2em;}
.tier-p i{font-size:14px;letter-spacing:.16em;}
.tier-p em{font-size:15px;letter-spacing:.1em;}
.tier-d{font-size:clamp(17px,1.15vw,19px);line-height:1.55;opacity:.82;}
.tier-f li{font-size:clamp(17px,1.1vw,18px);line-height:1.5;opacity:1;}
.tier-cta{font-size:14px;letter-spacing:.14em;}
.price-note{font-size:clamp(16px,1.05vw,18px);line-height:1.55;}

/* THE DRAWN CURSOR ON A WHITE CARD. The plate is a light-cursor ground, so on
   the plate the dot and ring paint white. Over a white card that is a cursor
   you cannot see. Each card declares its own ground instead, and app.js
   already reads the nearest [data-cur] ancestor. */
.tier{cursor:none;}
html[data-cur="dark"] .cur{background:var(--red);}
html[data-cur="dark"] .cur-r{border-color:var(--red);}

/* ############################################################################
   ###  6 | TYPE THAT A TIRED MAN CAN READ  ###################################
   ############################################################################
   A pass over every place the site was still setting reading copy under 17px,
   and over the eyebrows, which were 11px uppercase at .2em: legible on a
   27-inch monitor, not on a phone in a truck.
   ======================================================================== */
:root{
  --ts-lab:13px;
  --ts-label:13px;
  --ts-read:clamp(17px,1.12vw,19px);
}
@media(min-width:1200px){ :root{--ts-lab:14px;--ts-label:14px;} }
.short-a,.tier-d,.index-s,.tile-s,.end-say,.price-note,.hung p,.tx p,
.sched-d,.faq-a,.calc-note,.foot-nav a,.foot-meta,.cmp td,.cmp th{
  font-size:clamp(17px,1.12vw,19px);line-height:1.55;
}
.sched-d{opacity:.8;}
.foot-nav a{font-size:16px;}
.calc-note{font-size:15px;}

/* ############################################################################
   ###  7 | THE LAST OF THE ARBITRARY WRAPS AND RULES  ########################
   ############################################################################ */
/* The positioning line is the only thing on the middle of the plate, so it
   runs the width of it. */
.line-t{max-width:none !important;}
@media(min-width:1100px){ .line-t{font-size:clamp(26px,3.3vw,54px);line-height:1.08;} }

/* The stakes lines are the biggest type on their screen. There is no reason
   for them to break where a body measure would. */
.fear-t{max-width:none !important;}

/* No eyebrow draws a rule above itself. The ground change already separates
   the sections; a tick on top of that is the same job done twice. */
.short-k::before,.short-k::after,.lab::before,.lab::after,.hung-k::before,
.tier-k::before,.fear-n::before,.code::before,.sched-i::before{display:none !important;}
.short-k{border-top:0 !important;padding-top:0 !important;}
.lab{border-top:0 !important;padding-top:0 !important;}

/* ############################################################################
   ###  8 · THE LAST OF THE SMALL TYPE  #######################################
   ############################################################################
   A sweep of everything the audit still found under 15.5px. Buttons and
   eyebrows were the worst of it: 11px uppercase at .2em tracking is a caption,
   and on this site those are the words that ask for the call.
   ======================================================================== */
.btn,.jch-cta,.rail-cta{font-size:15px;letter-spacing:.13em;}
@media(min-width:1200px){ .btn,.jch-cta,.rail-cta{font-size:16px;} }
.btn,.jch-cta{padding:15px 26px;}

/* The answer block's question is a label, but it is still a question a man has
   to read. Case and tracking carry the hierarchy; the size stops shrinking. */
.short-q{font-size:15px;letter-spacing:.14em;opacity:.72;}
.short-k,.lab,.hung-k,.fear-n,.sched-i,.code{font-size:var(--ts-lab);}

/* The skip link is for keyboard users and it is the first thing they hear and
   then see. No reason for it to be the smallest thing on the page. */
.skip{font-size:15px;}

.foot-end,.foot-end a{font-size:16px;}
.calc-note{font-size:15px;}

/* The floor. Nothing on the site that carries words sits under 15px, and the
   places that still did were all captions and links in the footer. */
.serv-cap{font-size:15px;}
.tier-cta{font-size:15px;}
.foot-end,.foot-end a,.foot-end span{font-size:16px;}