/* ==========================================================================
   Sites for Trades — "The Drawing Set", in the brand kit's colours
   The page is a sheet of construction documents. Sheet Cream is the paper.
   Drafting Navy is the ink. Construction Gold is what is real and physical on
   the table: the price, the phone number, the stamp, the links you can press.

   Two brand colours only, exactly as new-brand-kit/README.md requires. The
   lighter gold is the same hue lifted for legibility as small text on navy,
   and the navy tints are the same hue; no third colour is introduced.

   Blueprint vocabulary is held to exactly three devices: the title block,
   the dimension rule, the stamp. Nothing else gets to be a costume.
   ========================================================================== */
:root{
  --sheet:#F7F5F0;      /* Sheet Cream — the ground (the printed drawing, not the blueprint) */
  --sheet-deep:#03203F; /* the dark that sits ON gold; never a background here */
  --vellum:#FFFFFF;     /* raised surface: title blocks, fields, panels */
  --chalk:#052A5C;      /* Drafting Navy — ink (12.4:1 on cream) */
  --graphite:#4A5A73;   /* muted navy-grey (6.2:1 on cream, 7.0:1 on white) */
  --snap:rgba(5,42,92,.45);      /* drawn line — SHAPES AND STROKES ONLY */
  --blueprint:#0A3E86;  /* navy for TEXT and links (9.1:1) */
  --brass:#B38537;      /* Construction Gold — shapes, stamp, button fill */
  --brass-lit:#7A5E00;  /* gold darkened for text on cream (5.5:1) */
  --brass-hi:#C99A4E;   /* the same gold lifted toward cream, for the two dark
                           surfaces left in a light build: the photo caption
                           band (5.3:1 worst case) and the gold button's hover */
  --signal:#052A5C;     /* the single most important object on a page */
  --red:#A31515;        /* the only error colour, never alone (6.9:1) */
  --scrim:rgba(247,245,240,.94); /* translucent ground: the sticky header, which should recede */
  --bar:#052A5C;        /* the fixed call bar is a solid object, not a pane of the page */
  --rule:rgba(5,42,92,.28);
  --rule-dim:rgba(5,42,92,.13);

  --f-display:'Archivo Black','Archivo','Arial Black',sans-serif;
  --f-ui:'Archivo','Helvetica Neue',Arial,sans-serif;
  --f-body:'Source Serif 4','Iowan Old Style',Georgia,serif;

  --t1:.8125rem; --t2:.9375rem; --t3:1.0625rem; --t4:1.25rem;
  --t5:clamp(1.6rem,3.4vw,2.4rem); --t6:clamp(2.1rem,5.2vw,3.7rem);
  --gutter:clamp(1.25rem,5vw,4rem); --band:clamp(3.25rem,7vw,6rem); --head-h:64px;
  --measure:66ch;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--sheet)}
body{margin:0;background:var(--sheet);color:var(--chalk);font-family:var(--f-body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
@media (min-width:900px){body{font-size:1.125rem}}
h1,h2,h3{margin:0;line-height:1.08;text-wrap:balance;color:var(--chalk)}
h1{font-family:var(--f-display);font-weight:400;font-size:var(--t6);letter-spacing:-.01em}
h2{font-family:var(--f-ui);font-weight:600;font-size:var(--t5);letter-spacing:-.01em}
h3{font-family:var(--f-ui);font-weight:600;font-size:var(--t4)}
h2.h3{font-family:var(--f-ui);font-weight:600;font-size:var(--t4)}
p{margin:0} p+p{margin-top:.9em}
a{color:var(--blueprint);text-underline-offset:.15em}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--gutter)}
.measure{max-width:var(--measure)}
.muted{color:var(--graphite)}
.ui{font-family:var(--f-ui)}
.tnum{font-variant-numeric:tabular-nums}
.gold{color:var(--brass-lit)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header: wordmark, nav by page name, the studio phone in gold ---------- */
.head{position:sticky;top:0;z-index:40;background:var(--scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid var(--rule-dim)}
.head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;min-height:var(--head-h)}
.wordmark{font-family:var(--f-ui);font-weight:600;font-size:1.05rem;color:var(--chalk);text-decoration:none;white-space:nowrap;letter-spacing:-.01em}
.nav{display:flex;gap:clamp(1rem,2.4vw,1.75rem)}
.nav a{font-family:var(--f-ui);font-size:var(--t2);font-weight:500;color:var(--graphite);text-decoration:none;padding-block:.35rem;border-bottom:1px solid transparent;white-space:nowrap}
.nav a:hover,.nav a[aria-current]{color:var(--chalk);border-bottom-color:var(--snap)}
.head-phone{display:inline-flex;align-items:center;min-height:44px;font-family:var(--f-ui);font-weight:600;font-size:var(--t2);color:var(--brass-lit);text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:560px){.head .wrap{gap:.75rem}.nav{gap:.75rem}body.has-callbar .head-phone{display:none}body.has-callbar .nav a[href="/start/"]{display:none}body:not(.has-callbar) .nav{display:none}}

/* ---------- device 1: the title block. The ONLY place capitals are allowed. ---------- */
.tb{display:inline-grid;grid-template-columns:auto auto;gap:.15rem 1.25rem;border:1px solid var(--brass);padding:.55rem .8rem;font-family:var(--f-ui);font-weight:500;font-size:.72rem;line-height:1.35;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);background:var(--vellum)}
.tb b{font-weight:600;color:var(--brass-lit)}
@media (max-width:560px){.tb{grid-template-columns:1fr;gap:.1rem}}

/* ---------- device 2: the dimension rule. A section label, sentence case, no tracking. ---------- */
.rule{display:flex;align-items:center;gap:.75rem;margin:0 0 1.5rem;font-family:var(--f-ui);font-weight:500;font-size:var(--t2);color:var(--graphite);letter-spacing:0}
.rule::before{content:"";flex:0 0 2.25rem;height:1px;background:var(--snap);box-shadow:2.25rem 0 0 -0 transparent}
.rule::after{content:"";flex:1;height:1px;background:var(--rule)}
.rule i{display:inline-block;width:1px;height:9px;background:var(--snap);margin-left:-.75rem}

/* ---------- device 3: the stamp ---------- */
.stamp{display:inline-block;border:2px solid var(--brass);color:var(--brass);font-family:var(--f-display);font-size:.8rem;letter-spacing:.04em;padding:.4rem .7rem;transform:rotate(-3deg);text-transform:uppercase;line-height:1}
.stamp.est{border-color:var(--graphite);color:var(--graphite)}

/* ---------- bands ---------- */
.band{padding-block:var(--band)}
.band+.band{border-top:1px solid var(--rule-dim)}
.band-vellum{background:var(--vellum)}
.lede{font-size:var(--t4);line-height:1.5;max-width:44ch}

/* ---------- buttons: the brass one states the offer; 56px tall, full width at 360 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:56px;padding:0 1.6rem;border-radius:2px;font-family:var(--f-ui);font-weight:600;font-size:var(--t3);text-decoration:none;border:2px solid transparent;cursor:pointer;line-height:1.2}
.btn-brass{background:var(--brass);color:var(--sheet-deep)}
.btn-brass:hover{background:var(--brass-hi)}
.btn-line{border-color:var(--rule);color:var(--chalk);background:transparent}
.btn-line:hover{border-color:var(--blueprint)}
.actions{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center;margin-top:1.75rem}
@media (max-width:560px){.actions .btn{flex:1 1 100%}}

/* ---------- hero ---------- */
.hero{padding-block:clamp(2rem,5vw,3.5rem) clamp(2.5rem,6vw,4.5rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4rem);align-items:center;margin-top:1.5rem}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero h1{max-width:14ch}
.hero .lede{margin-top:1.25rem}
/* the one orchestrated moment: only when motion is allowed and JS has measured the paths */

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1.5rem 2.5rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--rule)}
.stats b{display:block;font-family:var(--f-display);font-weight:400;font-size:clamp(2rem,4.4vw,2.9rem);line-height:1;color:var(--brass-lit);letter-spacing:-.01em}
.stats span{display:block;margin-top:.55rem;color:var(--graphite);font-size:var(--t2);max-width:28ch;font-family:var(--f-ui)}
.sources{margin-top:1.25rem;font-size:var(--t1);color:var(--graphite);font-family:var(--f-ui)}

/* ---------- steps (a real sequence, so it is numbered) ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,3vw,2.5rem);border-top:1px solid var(--rule)}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.steps li{padding-top:1.25rem}
.steps .n{font-family:var(--f-display);font-size:var(--t5);color:var(--brass-lit);line-height:1}
.steps h3{margin-top:.6rem}
.steps p{margin-top:.5rem;color:var(--graphite);font-size:var(--t2)}

/* ---------- ledger rows (what every site has) ---------- */
.ledger{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.ledger li{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:1rem 2rem;padding:1.1rem 0;border-bottom:1px solid var(--rule-dim)}
.ledger li b{font-family:var(--f-ui);font-weight:600}
.ledger li span{color:var(--graphite);font-size:var(--t2)}
@media (max-width:640px){.ledger li{grid-template-columns:1fr;gap:.25rem}}

/* ---------- pricing on a tape measure ---------- */
.tape{margin-top:1.5rem;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0;align-items:stretch}
.tape .hook{background:var(--brass);color:var(--sheet-deep);padding:.9rem 1rem;font-family:var(--f-ui);font-weight:600;line-height:1.2;display:flex;flex-direction:column;justify-content:center;min-width:8.5rem}
.tape .hook b{font-family:var(--f-display);font-weight:400;font-size:1.5rem;letter-spacing:-.01em}
.tape .hook small{font-size:var(--t1);font-weight:500}
.tape .ticks{display:grid;grid-template-columns:repeat(var(--months,12),minmax(0,1fr));border:1px solid var(--brass);border-left:0;background:var(--vellum)}
.tape .tick{position:relative;padding:.9rem .2rem .7rem;text-align:center;font-family:var(--f-ui);font-size:var(--t1);color:var(--graphite);border-left:1px solid var(--rule-dim)}
.tape .tick::before{content:"";position:absolute;left:0;top:0;width:1px;height:10px;background:var(--snap)}
.tape .tick b{display:block;color:var(--brass-lit);font-weight:600;font-size:var(--t2);font-variant-numeric:tabular-nums}
@media (max-width:640px){.tape{grid-template-columns:1fr}.tape .hook{min-width:0}.tape .ticks{grid-template-columns:repeat(4,minmax(0,1fr));border-left:1px solid var(--brass);border-top:0}.tape .tick{padding:.6rem .2rem .5rem}}
.tape-sum{margin-top:.9rem;font-family:var(--f-ui);font-size:var(--t2);color:var(--graphite)}
.includes-h{margin-top:1.25rem;font-family:var(--f-ui);font-weight:600;font-size:var(--t2);color:var(--chalk)}
.portrait{display:block;width:min(100%,220px);aspect-ratio:1/1;object-fit:cover;border:1px solid var(--rule);border-radius:2px;margin:0 0 1.25rem}
.portrait-sm{width:140px}
.tape-sum b{color:var(--brass-lit);font-weight:600}
.includes{list-style:none;margin:1.5rem 0 0;padding:0;border-top:1px solid var(--rule);max-width:var(--measure)}
.includes li{display:flex;gap:.8rem;padding:.6rem 0;border-bottom:1px solid var(--rule-dim);font-size:var(--t2);font-family:var(--f-ui)}
.includes li::before{content:"";flex:0 0 9px;height:9px;margin-top:.5rem;border:4.5px solid var(--brass)}
.finalising{margin-top:1rem;font-family:var(--f-ui);font-size:var(--t1);color:var(--graphite)}

/* ---------- work: sheets with device frames ---------- */
/* The Work page intro. Both blocks are width-capped for readability (16ch and
   44ch), which left them hugging the left edge and reading as a caption on the
   first demo rather than an introduction to both. Centre the boxes and the text
   so the intro sits over the pair. */
.work-intro{margin-inline:auto;text-align:center}
/* .actions is a flex row used on several pages; only the Work page wants it
   centred, so scope it rather than changing the shared rule. */
.actions-center{justify-content:center}
.sheets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,3rem);margin-top:1.5rem}
@media (max-width:820px){.sheets{grid-template-columns:1fr}}
.sheet{border:1px solid var(--rule);background:var(--vellum);padding:clamp(1rem,2.4vw,1.5rem);position:relative}
.sheet .tb{position:absolute;right:1rem;top:1rem;padding:.35rem .6rem;font-size:.66rem}
.device{display:block;margin:2.75rem auto 0;width:min(100%,300px);aspect-ratio:9/17;border:1.6px solid var(--snap);border-radius:22px;overflow:hidden;background:var(--sheet);position:relative;text-decoration:none;color:inherit}
.device img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.device .band{position:absolute;left:0;right:0;bottom:0;background:rgba(3,32,63,.93);padding:.6rem .8rem;font-family:var(--f-ui);font-size:var(--t1);color:#F7F5F0;line-height:1.3}
.device .band b{display:block;font-size:var(--t2);color:var(--brass-hi)}
.device:hover,.device:focus-visible{border-color:var(--brass)}
.device.wide{width:100%;aspect-ratio:16/10;border-radius:6px}
.sheet h3{margin-top:1.25rem}
.sheet p{color:var(--graphite);font-size:var(--t2);margin-top:.35rem}
.sheet .open{display:inline-block;margin-top:.9rem;font-family:var(--f-ui);font-weight:600;font-size:var(--t2)}
.honest{margin-top:1.75rem;padding:1rem 1.15rem;border-left:3px solid var(--brass);background:var(--vellum);font-family:var(--f-ui);font-size:var(--t2);color:var(--chalk)}

/* ---------- forms (the work order) ---------- */
.field{display:block;margin-bottom:1.1rem}
.field .lbl .req{font-weight:500;color:var(--graphite)}
.field .lbl{display:block;font-family:var(--f-ui);font-weight:600;font-size:var(--t2);color:var(--chalk);margin-bottom:.35rem}
.field .help{display:block;font-family:var(--f-ui);font-size:var(--t1);color:var(--graphite);margin-bottom:.4rem}
.field input,.field textarea,.field select{width:100%;font:inherit;font-size:var(--t3);color:var(--chalk);background:var(--vellum);border:1px solid var(--graphite);border-radius:2px;padding:.75rem .85rem;min-height:52px}
.field textarea{min-height:6rem;resize:vertical;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:#7B8796}
.field.bad input,.field.bad textarea{border-color:var(--red)}
.err{display:none;margin-top:.4rem;font-family:var(--f-ui);font-size:var(--t2);color:var(--red)}
.field.bad .err{display:block}
fieldset.field{border:0;padding:0;margin:0 0 1.1rem;min-width:0}
fieldset.field legend{padding:0}
.toggles{display:flex;flex-wrap:wrap;gap:.5rem}
.toggle{position:relative}
.toggle input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.toggle span{display:inline-block;padding:.7rem 1rem;border:1px solid var(--graphite);border-radius:2px;font-family:var(--f-ui);font-weight:500;font-size:var(--t2);color:var(--chalk);background:var(--vellum);min-height:48px;line-height:1.3}
.toggle input:checked+span{background:var(--brass);border-color:var(--brass);color:var(--sheet-deep)}  /* a fill, not a hue shift: the chosen one reads in greyscale */
.toggle input:focus-visible+span{outline:2px solid var(--brass);outline-offset:3px}
.toggle input:focus+span{outline:2px solid var(--brass);outline-offset:3px}
.toggle input:focus:not(:focus-visible)+span{outline:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.two{grid-template-columns:1fr}}
.note-red{font-family:var(--f-ui);font-size:var(--t2);color:var(--red);margin-top:.9rem}

/* ---------- the issued sheet (instant proposal) ---------- */
.issued{border:1px solid var(--brass);background:var(--vellum);padding:clamp(1.25rem,3vw,2.25rem);margin-top:1.5rem}
.issued .tb{background:var(--sheet)}
.issued-head{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:flex-start}
.issued h1,.issued h2{font-family:var(--f-display);font-weight:400;font-size:var(--t5)}
.issued section{padding-block:1.5rem;border-top:1px solid var(--rule-dim)}
.issued section:first-of-type{border-top:0}
.issued h3{margin-bottom:.6rem}
.issued .kv{display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:.35rem 1rem;font-family:var(--f-ui);font-size:var(--t2)}
.issued .kv dt{color:var(--graphite)} .issued .kv dd{margin:0;color:var(--chalk)}
@media (max-width:520px){.issued .kv{grid-template-columns:1fr}}
.issued .sig{font-family:var(--f-body);font-style:italic;color:var(--graphite);margin-top:1.5rem}
.issued .actions{margin-top:1.25rem}

/* ---------- prose pages ---------- */
.prose{max-width:var(--measure)}
.prose h2{margin-top:2.25rem;margin-bottom:.75rem;font-size:var(--t4)}
.prose h2:first-child{margin-top:0}
.prose ul{padding-left:1.2rem}
.prose li{margin-block:.35rem}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule);padding-block:clamp(2.5rem,5vw,3.5rem) 1.5rem;color:var(--graphite);font-family:var(--f-ui);font-size:var(--t2)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:2rem}
.foot a{color:var(--graphite)} .foot a:hover{color:var(--chalk)}
.foot .gold{color:var(--brass-lit);font-weight:600}
.foot-tail{margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--rule-dim);font-size:var(--t1);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.75rem}

[hidden]{display:none!important}
[id],a,button,input,select,textarea,[tabindex]{scroll-margin-top:5.5rem;scroll-margin-bottom:5.5rem}  /* sticky header height + breathing room for #anchors */
.callbar{display:none}
@media (max-width:640px){
  .callbar{display:flex;position:fixed;inset:auto 0 0 0;z-index:60;background:var(--bar);border-top:0;padding:.6rem var(--gutter);gap:.6rem}
  .callbar .btn-line{color:#F7F5F0;border-color:rgba(247,245,240,.55);background:transparent}
  .callbar .btn-line:hover{border-color:#F7F5F0}
  .callbar .btn{flex:1;min-height:52px;padding:0 .75rem;white-space:nowrap}
  body.has-callbar{padding-bottom:4.75rem}
}

/* ---------- brand: navy art on cream. No logo art sits on a dark ground
   anywhere in this build, so no slot needs the reversed files; they are kept
   in /brand only so a dark email or a yard sign has them to hand. Source of
   truth is brand-kit-final/ at the project root. ---------- */
.head .wordmark{display:flex;align-items:center;gap:.6rem;min-height:44px;text-decoration:none}
/* hammer.svg is a 418x418 square whose ink is only 40.4% of the width and
   80.1% of the height — 124 units of dead margin each side. object-fit:cover
   scales the square to the BOX HEIGHT and clips that dead air, so the hammer
   sits flush on the gutter with a normal gap to the type. 22x44 gives ink of
   17.8 x 35.2px, the same optical weight as the 34px mark it replaces.
   The 1:2 box ratio is load-bearing — do not 'correct' it to 1:1. */
.mark{flex:0 0 auto;width:1.375rem;height:2.75rem;object-fit:cover}
.marktext{font-family:var(--f-ui);font-weight:700;font-size:1.02rem;letter-spacing:.02em;color:var(--chalk);text-transform:uppercase;line-height:1}
.marktext i{font-family:var(--f-body);font-style:italic;font-weight:400;text-transform:none;color:var(--brass-lit)}
.hero-logo{display:block;width:100%;max-width:26rem;height:auto;margin-inline:auto}
/* 12rem = 192px, above the kit's 180px floor. The kit's clear space is the
   height of the S in SITES, ~23.8% of the mark's width = 46px here. */
.foot-logo{display:block;width:100%;max-width:12rem;height:auto;margin-bottom:3rem}
/* the hammer again, and again with its own side padding doing the spacing */
.issued-mark{display:inline-block;width:1.15em;vertical-align:-.22em;margin-right:0;color:var(--chalk)}
.issued-mark svg{display:block;width:100%;height:auto}

/* ==========================================================================
   FLIP TILES
   Base state is what a visitor with no JavaScript gets: a plain card with both
   faces stacked in source order, nothing hidden and no control. Everything
   else hangs off .flip-on, a class an inline script adds before first paint,
   so the enhanced layout IS the first paint rather than a reflow after load.
   ========================================================================== */
.ft{position:relative;display:grid;grid-template-rows:1fr auto;background:var(--vellum);
  border:1px solid var(--rule-dim);border-radius:3px}
.ft-face{padding:1.1rem 1.15rem}
.ft-back p{margin:0;color:var(--graphite);font-size:var(--t2);font-family:var(--f-ui)}
.ft-back p + p{margin-top:.6rem}
/* hidden by default, or the number prints twice on the no-JS page */
.ft-echo{display:none}
.ft-btn{display:none}

.flip-on .ft{perspective:1200px;overflow:hidden}
.flip-on .ft-inner{display:grid;transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
/* Both faces share ONE grid cell, so the card is always as tall as the taller
   face in either state. No JS measurement, and nothing below can jump. */
.flip-on .ft-face{grid-area:1/1;-webkit-backface-visibility:hidden;backface-visibility:hidden;
  visibility:hidden;transition:transform .5s cubic-bezier(.2,.7,.3,1),visibility 0s linear .5s}
.flip-on .ft-front{display:flex;flex-direction:column;justify-content:center}
.flip-on .ft-back{transform:rotateY(180deg)}
.flip-on .ft-echo{display:block;margin:0 0 .5rem;padding-bottom:.5rem;
  border-bottom:1px solid var(--rule-dim);font-family:var(--f-ui);font-weight:600;
  font-size:var(--t1);color:var(--brass-lit);letter-spacing:.02em}
.flip-on .ft.is-flipped .ft-inner{transform:rotateY(180deg)}
/* backface-visibility only stops the paint - the face stays in the
   accessibility tree and the tab order. visibility:hidden removes it from
   both, and the delay keeps the outgoing face painted through the turn. */
.flip-on .ft:not(.is-flipped) .ft-front,
.flip-on .ft.is-flipped .ft-back{visibility:visible;transition-delay:0s}

/* The control strip is the affordance, and it is words, not a hover state:
   most of this traffic is a tradesman on a phone, where hover does not exist. */
.flip-on .ft-btn{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  width:100%;min-height:46px;margin:0;padding:.5rem 1.15rem;border:0;
  border-top:1px solid var(--rule-dim);font-family:var(--f-ui);font-weight:600;
  font-size:var(--t1);text-align:left;line-height:1.25;color:var(--brass-lit);
  background:var(--sheet);cursor:pointer;letter-spacing:.01em}
.ft-btn::after{content:"";position:absolute;inset:0}      /* the whole card taps */
.ft-btn>svg{flex:0 0 auto;pointer-events:none;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.ft.is-flipped .ft-btn>svg{transform:rotate(180deg)}
.ft-btn[aria-expanded="false"] .ft-less,
.ft-btn[aria-expanded="true"] .ft-more{display:none}       /* keeps the a11y name right */
.flip-on .ft:hover{border-color:var(--rule)}
.flip-on .ft:has(.ft-btn:focus-visible){outline:2px solid var(--brass);outline-offset:3px}
.ft-btn:focus-visible{outline:none}
@supports not selector(:has(*)){.ft-btn:focus-visible{outline:2px solid var(--brass);outline-offset:-3px}}

/* Reduced motion: no 3D at all. site.css already kills every transition with
   !important further down, so a cross-fade could not run anyway - an instant
   swap is both the honest reading of the preference and the only one that
   works here. A brass edge marks the turned card, since no motion signalled it. */
@media (prefers-reduced-motion:reduce){
  .flip-on .ft{perspective:none}
  .flip-on .ft-inner,.flip-on .ft.is-flipped .ft-inner{transform-style:flat;transform:none}
  .flip-on .ft-face,.flip-on .ft-back{transform:none;
    -webkit-backface-visibility:visible;backface-visibility:visible}
  .flip-on .ft.is-flipped .ft-btn>svg{transform:none}
  .flip-on .ft.is-flipped .ft-back{border-top:2px solid var(--brass);
    padding-top:calc(1.1rem - 2px)}
}

/* On paper both faces print, so a printed page never loses a citation. */
@media print{
  .ft{break-inside:avoid;page-break-inside:avoid;overflow:visible!important;border:0}
  .ft-inner{display:block!important}
  .ft-face{visibility:visible!important;transform:none!important;
    -webkit-backface-visibility:visible!important;backface-visibility:visible!important}
  .ft-echo,.ft-btn{display:none!important}
}


/* ==========================================================================
   ENRICHMENT - structure, boxes and the drawing-set devices.
   Prototyped and measured at 360/390/1000/1240px. Purely structural: this
   block moves and boxes things, it never hides or animates anything, so the
   reduced-motion rendering is byte-identical to the default and there is no
   hidden-then-revealed state. Everything that moves lives in motion.css.
   ========================================================================== */
/* ==========================================================================
   PROPOSED ADDITIONS — layout, boxes, rhythm
   Four new devices, each argued for in the notes. Nothing here is a costume.
   ========================================================================== */

/* --- DEVICE 4: the graph-paper ground. One band only: the one with figures
       on it. Zero height, pure gradient, no request. -------------------- */
.band-grid{
  background-image:
    linear-gradient(to right,rgba(5,42,92,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(5,42,92,.055) 1px,transparent 1px);
  background-size:24px 24px;
  background-position:center top;
}

/* --- DEVICE 5: the blueprint band. The drawing set is printed on cream;
       exactly ONE sheet is the blueprint negative. ---------------------- */
.band-blue{background:var(--chalk);color:#F7F5F0;border-top:0}
.band-blue h1,.band-blue h2,.band-blue h3{color:#F7F5F0}
.band-blue p{color:rgba(247,245,240,.86)}
.band-blue .rule{color:rgba(247,245,240,.74)}
.band-blue .rule::before,.band-blue .rule i{background:var(--brass-hi)}
.band-blue .rule::after{background:rgba(247,245,240,.26)}
.band-blue a{color:var(--brass-hi)}
.band-blue .btn-line{color:#F7F5F0;border-color:rgba(247,245,240,.55)}
.band-blue .btn-line:hover{border-color:#F7F5F0}
.band-blue+.band{border-top:0}

/* --- DEVICE 6: the dimension terminator on every band seam. Replaces a
       plain hairline with a drawn one. Zero height. --------------------- */
main>.band+.band{position:relative}
main>.band+.band::before{
  content:"";position:absolute;left:var(--gutter);top:-1px;
  width:2.25rem;border-top:2px solid var(--brass);
}
main>.band-blue+.band::before,main>.band+.band-blue::before{border:0}

/* ---------- #how: the schedule. A dimension string, not three numerals. --- */
.steps-run{--gap:clamp(1.25rem,3vw,2.5rem);border-top:0;gap:var(--gap)}
.steps-run li{position:relative;padding-top:0}
.steps-run .n{
  display:grid;place-items:center;position:relative;z-index:1;
  width:2.625rem;height:2.625rem;border:2px solid var(--brass);
  background:var(--vellum);color:var(--brass-lit);
  font-family:var(--f-display);font-size:1.0625rem;line-height:1;
}
.steps-run li:last-child .n{background:var(--brass);border-color:var(--brass);color:var(--sheet-deep)}
/* the run of line between nodes, carried across the grid gap */
.steps-run li::after{
  content:"";position:absolute;left:2.625rem;right:calc(-1 * var(--gap));
  top:calc(1.3125rem - 1px);height:2px;background:var(--rule);
}
.steps-run li:last-child::after{display:none}
.steps-run .when{
  display:block;margin-top:.9rem;font-family:var(--f-ui);font-weight:600;
  font-size:var(--t1);color:var(--brass-lit);
}
.steps-run h3{margin-top:.25rem}

.band-blue .steps-run .n{background:var(--chalk);border-color:var(--brass-hi);color:var(--brass-hi)}
.band-blue .steps-run li:last-child .n{background:var(--brass);border-color:var(--brass);color:var(--sheet-deep)}
.band-blue .steps-run li::after{background:rgba(247,245,240,.30)}
.band-blue .steps-run .when{color:var(--brass-hi)}
.band-blue .steps p{color:rgba(247,245,240,.82)}
@media (max-width:760px){
  /* the schedule stands up: a vertical rail, node in its own gutter */
  .steps-run li{padding-left:3.75rem;min-height:2.625rem}
  .steps-run .n{position:absolute;left:0;top:0}
  .steps-run .when{margin-top:0}
  .steps-run li::after{
    left:calc(1.3125rem - 1px);right:auto;top:2.625rem;
    width:2px;height:calc(100% - 2.625rem + var(--gap));
  }
}

/* ---------- #every: boxes. A schedule table, hairlines not borders. ------ */
.tiles{
  list-style:none;margin:1.5rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--rule-dim);border:1px solid var(--rule);
}
/* explicit counts, never auto-fit: the hairline background shows through any
   half-empty row, so 4 tiles must land as 4, 2 or 1 across — never 3. */
@media (max-width:1040px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tiles{grid-template-columns:1fr}}
.tile{background:var(--vellum);padding:clamp(1.1rem,2.2vw,1.45rem)}
.tile .ico{display:block;width:44px;height:44px;color:var(--chalk);margin-bottom:.8rem}
.ico .hot{color:var(--brass)}
.tile b{display:block;font-family:var(--f-ui);font-weight:600;font-size:var(--t3);line-height:1.25}
.tile span{display:block;margin-top:.45rem;color:var(--graphite);font-size:var(--t2);font-family:var(--f-ui)}

/* ---------- the trade strip: five silhouettes, self-identification ------- */
.trades{
  list-style:none;margin:2rem 0 0;padding:1.25rem 0 0;
  border-top:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem;
}
.trades li{display:flex;flex-direction:column;align-items:center;gap:.45rem;text-align:center}
.trades .ico{display:block;width:40px;height:40px;color:var(--chalk)}
.trades span{font-family:var(--f-ui);font-weight:600;font-size:var(--t1);color:var(--graphite)}
/* stays five across on a phone: one row costs 90px, two rows cost 207px */
@media (max-width:640px){
  .trades{gap:.25rem;margin-top:1.5rem}
  .trades .ico{width:30px;height:30px}
  .trades span{font-size:.6875rem;line-height:1.2}
}

/* ---------- #pricing: one spec sheet instead of a scroll ----------------- */
.spec{
  border:1px solid var(--brass);background:var(--vellum);
  padding:clamp(1.25rem,3vw,2.25rem);margin-top:1.5rem;
}
.spec-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:1.5rem;flex-wrap:wrap;
}
.spec-head .stamp{flex:0 0 auto;margin-top:.15rem}
.spec-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2.5rem;margin-top:1.5rem}
.spec-cols .includes{max-width:none;margin-top:.6rem}
.spec-cols .includes-h{margin-top:1.5rem}
@media (max-width:760px){.spec-cols{grid-template-columns:1fr}.spec-cols .includes-h{margin-top:1.75rem}}
/* on a phone the panel border is the only thing the padding buys, so spend
   less on it: the gutter already provides the margin. */
@media (max-width:560px){
  .spec{padding:1rem;margin-inline:calc(-1 * var(--gutter) / 2)}
  .spec-head{gap:.75rem}
  .spec-head .stamp{order:-1;margin-top:0}
}
/* the stamp's own text was 3.3:1 on white. Frame stays gold, ink darkens. */
.stamp{color:var(--brass-lit)}

/* ---------- #about-teaser: portrait beside the words, not above them ----- */
/* flex, not grid: /brand/mike.jpg is absent today and onerror removes the
   img, so the text column must survive the image not being there. */
.who{display:flex;flex-wrap:wrap;gap:clamp(1.25rem,3vw,2rem);align-items:flex-start;margin-top:1.5rem}
/* BUG FIX, not an enrichment: the img carries height="320" as a presentational
   hint and .portrait never sets height, so aspect-ratio loses and the portrait
   renders 140x320 — object-fit:cover then crops the face to a vertical strip.
   Affects /about/ too. */
.portrait{height:auto}
.who .portrait{flex:0 0 auto;width:160px;margin:0}
.who .who-text{flex:1 1 30rem;max-width:var(--measure)}

/* ---------- #why: the keynote column. Prose keeps its 66ch; the sources
       note moves into the 480px of desktop void beside it. -------------- */
.notes{display:grid;grid-template-columns:minmax(0,var(--measure)) minmax(0,1fr);gap:1.5rem 2.5rem;margin-top:1.5rem;align-items:start}
.notes .sources{margin-top:0;padding-left:1rem;border-left:2px solid var(--brass)}
@media (max-width:900px){.notes{grid-template-columns:1fr}}

/* ---------- the new devices have to survive print and forced colours ----- */
@media print{
  .band-blue{background:#fff!important;color:#111}
  .band-blue h2,.band-blue h3{color:#111}
  .band-blue p,.band-blue .steps p{color:#333}
  .band-blue .rule{color:#444}
  .band-grid{background-image:none}
  .steps-run .n,.band-blue .steps-run .n{background:#fff;border-color:#8A6B00;color:#8A6B00}
  .steps-run li:last-child .n,.band-blue .steps-run li:last-child .n{background:#8A6B00;color:#fff}
  .steps-run li::after,.band-blue .steps-run li::after{background:#999}
  .steps-run .when,.band-blue .steps-run .when{color:#8A6B00}
  .tiles{background:none;gap:0;border-color:#999}
  .tile{border:1px solid #999;background:#fff}
  .spec{border-color:#8A6B00;background:#fff}
  main>.band+.band::before{border-top-color:#8A6B00}
}
@media (forced-colors:active){
  .tiles{gap:0}
  .tile{border:1px solid CanvasText}
  .steps-run .n{border-color:CanvasText}
  .steps-run li::after{background:CanvasText;forced-color-adjust:none}
  .spec{border-color:CanvasText}
}

/* The web address is held, not handed over, and that changes what the buyer
   is getting - so it is stated in full here rather than left to a bullet. */
.domain-terms{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--rule-dim)}
.domain-terms b{font-family:var(--f-ui);font-weight:700;font-size:var(--t2);display:block;margin-bottom:.5rem;color:var(--chalk)}
.domain-terms p{margin-top:.55rem;max-width:60ch}
.domain-terms p b{display:inline;margin:0;font-size:inherit}

/* ---------- the .com checker on /start/ ----------------------------------
   Hidden until the visitor says they need a name; hidden entirely without
   JavaScript, in which case the form behaves exactly as it did before. */
.dc{margin-top:1.25rem;padding:1.1rem 1.15rem;background:var(--vellum);
  border:1px solid var(--rule-dim);border-left:4px solid var(--brass);border-radius:3px}
.dc .help{margin-top:.3rem}
.dc-input{display:block;width:100%;margin-top:.7rem;padding:.7rem .8rem;min-height:var(--target);
  font-family:var(--f-ui);font-size:var(--t3);color:var(--chalk);
  background:var(--sheet);border:1px solid var(--rule);border-radius:3px}
.dc-input:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.dc-out{list-style:none;margin:.8rem 0 0;padding:0}
.dc-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.55rem 0;border-top:1px solid var(--rule-dim);font-family:var(--f-ui);font-size:var(--t2)}
.dc-row:first-child{border-top:0}
.dc-name{font-weight:600;color:var(--chalk)}
.dc-state{color:var(--graphite);font-size:var(--t1)}
.dc-row.is-free .dc-state{color:var(--brass-lit);font-weight:600}
.dc-row.is-taken .dc-name{color:var(--graphite);text-decoration:line-through}
.dc-row.is-wait{color:var(--graphite);border-top:0}
.dc-pick{margin-left:auto;min-height:var(--target);padding:.35rem .8rem;cursor:pointer;
  font-family:var(--f-ui);font-weight:600;font-size:var(--t1);
  color:var(--sheet-deep);background:var(--brass);border:0;border-radius:3px}
.dc-pick:focus-visible{outline:2px solid var(--chalk);outline-offset:2px}
.dc-row.is-picked{background:var(--sheet)}
@media print{.dc{display:none}}
@media print{
  html,body{background:#fff}
  body{color:#111}
  .includes li::before{border-color:#8A6B00}
  .head,.foot,.callbar,.no-print{display:none!important}
  .issued{border-color:#8A6B00;background:#fff}
  .issued .tb{background:#fff;color:#444;border-color:#8A6B00} .issued .tb b,.gold,.stats b{color:#8A6B00}
  .issued .kv dd,.issued h1,.issued h2,.issued h3{color:#111}
  .issued-mark{color:#052A5C}
  .issued .kv dt,.muted,.finalising,.steps p,.issued .sig{color:#444} .steps .n{color:#8A6B00} .note-red{color:#9F1C00}
  a{color:#0B3D91}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}