/* ==========================================================================
   NICHE DESIGN SYSTEM 5 — TRADES
   Andy, 7 August 2026: "trades will need its own identity more — onthetools.tv
   vibes". This is deliberately NOT a variant of S4 Product. Measured off
   onthetools.tv:

     - dark ground (#101010) with raised panels at #181818 / #222
     - hi-vis yellow #f8da03 as the single accent
     - Montserrat 700/800, UPPERCASE headings — the opposite of S4's light 400
     - SMALL radii (5px), not S4's soft 22px rounding
     - hazard-tape motif: repeating-linear-gradient at 135deg
     - heavily photo-led, magazine card feed
     - small uppercase category kickers with a yellow bar

   WHY THE GROUND IS DARK, and why that is a palette decision not a whim:
   NICHE-PALETTE.md originally gave trades safety orange #e2610a on white.
   Hi-vis yellow cannot hold 4.5:1 against white — it is the brightest colour
   on the chart. The dark ground is what makes the yellow legible AND what makes
   the site read as a site rather than an office. Recorded in NICHE-PALETTE.md.

   Because the ground is dark, every colour assumption inverts. `.on-dark` is
   the DEFAULT here, not an exception, and the light-band classes the content
   modules emit (.bg-paper, .bg-tint) become raised dark panels rather than
   white ones. That is why this is a separate stylesheet and not a token swap.
   ========================================================================== */


/* ==========================================================================
   CROP POSITION — why every cover-crop here is biased upward.
   `object-fit: cover` and `background-size: cover` default to centring the
   crop. On a landscape photograph rendered into a short band or card, centring
   takes a horizontal slice out of the MIDDLE of the frame — which is where the
   torso is, not the head. The result is a site full of people with no faces,
   which is exactly what Andy saw on all three sites.
   `center 30%` moves the visible window up so heads stay in frame, while still
   showing enough of a building for the architecture shots. It is applied to
   every cover-cropped surface: hero figure, hero panel photo, card photo,
   split photo and the full-bleed bands.
   ========================================================================== */

:root {
  --bg: #101010;           /* the ground */
  --bg2: #181818;          /* a raised band */
  --bg3: #222222;          /* a card */
  --bg4: #2a2a2a;          /* a card, hovered */
  --hv: #f8da03;           /* hi-vis yellow — the only accent */
  --hv-d: #d9be00;
  --tx: #c9c9c9;           /* body copy */
  --mut: #8d8d8d;          /* captions, meta */
  --line: #2e2e2e;         /* hairline on the dark ground */
  --r: 5px;                /* small. Not soft. */
  --r-img: 6px;
  --max: 1240px;
  --gut: 26px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* long-token safety: hello@thetradesaccountant.co.uk is one unbreakable word
   and it has broken three layouts elsewhere in this estate */
.hero-facts dd, .promise-card .pc-item, .factstrip .fs, .card p, .note p,
.tbl td, .prose p, .prose li, .topbar, footer.site, .split-cols p,
.doc-body p, .doc-body li { overflow-wrap: anywhere; }

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16.5px; line-height: 1.65;
  color: var(--tx); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display {
  font-family: Montserrat, Inter, sans-serif; font-weight: 800;
  color: #fff; line-height: 1.04; letter-spacing: -.022em;
}
h1 { font-size: clamp(2.3rem, 5.2vw, 4.1rem); text-transform: uppercase; }
h2 { font-size: clamp(1.75rem, 3.3vw, 2.8rem); text-transform: uppercase; }
h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.26; text-transform: none; }
h4 { font-size: .98rem; font-weight: 700; letter-spacing: 0; text-transform: none; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
a { color: var(--hv); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
strong { font-weight: 700; color: #fff; }
em { font-style: italic; }

.inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: 760px; }

/* the hazard tape — says "site" without a word of copy */
.tape, .aqua-rule {
  height: 12px; border: 0; margin: 0;
  background: repeating-linear-gradient(135deg, var(--hv) 0 16px, var(--bg) 16px 32px);
}

/* ---------- kicker (the .eyebrow slot) ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: Montserrat, sans-serif; font-size: .72rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--hv); margin-bottom: 1.1rem;
}
.eyebrow::before { content: ""; width: 4px; height: 14px; background: var(--hv); flex: none; }
/* .light is a legacy hint from a light-ground design; here everything is dark,
   so it must not change anything */
.eyebrow.light { color: var(--hv); }

.lede { font-size: 1.12rem; line-height: 1.6; color: var(--mut); max-width: 34em; }

/* ---------- buttons: square-ish, hard, uppercase ---------- */
.btn {
  display: inline-block; padding: 15px 27px; border-radius: var(--r);
  font-family: Montserrat, sans-serif; font-size: .85rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  border: 2px solid transparent; cursor: pointer;
  transition: background-color .14s, color .14s, border-color .14s;
}
.btn:hover { text-decoration: none; }
.btn-primary, .btn-bright { background: var(--hv); color: #101010; border-color: var(--hv); }
.btn-primary:hover, .btn-bright:hover { background: var(--hv-d); border-color: var(--hv-d); color: #101010; }
.btn-ink { background: #fff; color: #101010; border-color: #fff; }
.btn-ink:hover { background: var(--hv); border-color: var(--hv); }
.btn-ghost, .btn-ghost-dark { background: transparent; color: #fff; border-color: #444; }
.btn-ghost:hover, .btn-ghost-dark:hover { border-color: var(--hv); color: var(--hv); }
.btn-sm { padding: 11px 18px; font-size: .78rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 11px; }

/* On the YELLOW closing band the ground flips, so the buttons flip with it. */
.cta-band .btn-primary, .cta-band .btn-bright { background: #101010; color: var(--hv); border-color: #101010; }
.cta-band .btn-primary:hover, .cta-band .btn-bright:hover { background: #000; border-color: #000; color: var(--hv); }
.cta-band .btn-ghost, .cta-band .btn-ghost-dark { color: #101010; border-color: rgba(16,16,16,.35); }
.cta-band .btn-ghost:hover, .cta-band .btn-ghost-dark:hover { border-color: #101010; background: #101010; color: var(--hv); }

/* ---------- utility bar ---------- */
.topbar { background: #0b0b0b; color: var(--mut); font-size: .8rem; border-bottom: 1px solid var(--line); }
.topbar .inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 34px; }
.topbar .tb-tag { min-width: 0; }
.topbar a { color: var(--mut); }
.topbar a:hover { color: var(--hv); text-decoration: none; }
.topbar .tb-links { display: flex; gap: 20px; flex: none; min-width: 0; }

/* ---------- masthead ---------- */
header.site { background: #0b0b0b; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 60; }
header.site .inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 74px; }
.wordmark { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.wordmark .wm-mark {
  width: 32px; height: 32px; flex: none; border-radius: var(--r);
  background: var(--hv); color: #101010; display: grid; place-items: center; padding: 6px;
}
.wordmark .wm-mark svg { width: 100%; height: 100%; display: block; }
.wordmark .wm-text { display: block; line-height: 1.05; }
.wordmark .wm-top {
  display: block; font-family: Montserrat, sans-serif; font-size: .58rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: var(--mut);
}
.wordmark .wm-main {
  display: block; font-family: Montserrat, sans-serif; font-size: 1.1rem; font-weight: 800;
  color: #fff; letter-spacing: -.02em; text-transform: uppercase;
}
nav.primary { display: flex; align-items: center; gap: 2px; }
nav.primary a, nav.primary .nav-group > button {
  font-size: .89rem; font-weight: 600; color: var(--tx); padding: 9px 12px;
  text-decoration: none; background: none; border: 0; cursor: pointer; font-family: inherit;
}
nav.primary a:hover, nav.primary .nav-group > button:hover { color: var(--hv); text-decoration: none; }
/* the nav rules above set `background: none`, which would strip the CTA's fill */
nav.primary .btn.btn-primary, nav.primary .btn.btn-bright {
  background: var(--hv); color: #101010; border-color: var(--hv);
  margin-left: 9px; padding: 11px 18px; font-size: .78rem;
}
nav.primary .btn.btn-primary:hover { background: var(--hv-d); border-color: var(--hv-d); color: #101010; }
.nav-toggle {
  display: none; background: transparent; border: 2px solid #444; color: #fff;
  padding: 9px 13px; border-radius: var(--r); font: inherit; font-size: .85rem; cursor: pointer;
}
.nav-group { position: relative; }
.nav-group > button::after { content: "▾"; font-size: .7em; margin-left: 5px; color: var(--mut); }
.nav-group:hover > button, .nav-group:focus-within > button { color: var(--hv); }
.nav-group .sub {
  position: absolute; top: 100%; left: 0; min-width: 268px; background: var(--bg3);
  border: 1px solid var(--line); border-radius: var(--r); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .13s, transform .13s, visibility .13s;
}
.nav-group:hover .sub, .nav-group:focus-within .sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-group .sub a { display: block; padding: 9px 13px; font-size: .89rem; border-radius: 3px; }
.nav-group .sub a:hover { background: var(--bg4); color: var(--hv); }
header.site nav.primary a.on, header.site nav.primary .sub a.on,
header.site nav.primary .nav-group > button.on { color: var(--hv); }

/* ==========================================================================
   HERO — a full-bleed site photograph with a hard gradient, type over it.
   S4 puts the picture beside the copy; here it sits behind it, because that is
   what gives the page its weight.
   ========================================================================== */
.hero { position: relative; background: var(--bg2); padding: 0; }
.hero > .inner { position: relative; z-index: 2; padding-top: 88px; padding-bottom: 74px; }
.hero .hero-copy { min-width: 0; }
.hero h1 { max-width: 20em; }
.hero h1 .accent { color: var(--hv); }
.hero .lede { margin-top: 1.2rem; }
.hero .btn-row, .hero .hero-acts { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: 11px; }
.hero .crumbs { margin-bottom: 1.1rem; }
.hero .hero-stamp { margin-top: 1.4rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }

/* THE HERO PHOTOGRAPH — two cases, and they must be kept apart.
   The chassis's page_hero() emits the figure INSIDE .inner, which is a
   positioned element. An absolutely-positioned figure in there covers its own
   sibling copy and paints on top of it, so the entire headline, lede and buttons
   vanished behind the photograph. It also only spanned the gutter-inset .inner
   rather than the full width.

   So: a figure that is a DIRECT CHILD of .hero is the full-bleed background
   layer (the homepage writes its markup that way deliberately); a figure inside
   .inner stays in flow as a normal two-column figure. */

/* case 1 — full-bleed background layer */
.hero > .hero-figure { position: absolute; inset: 0; margin: 0; z-index: 0; }
/* ANCHOR DIRECTION. `object-position: center N%` slides the visible window DOWN
   the image as N grows. The library is now people doing the trade rather than
   tools, and in a portrait-subject frame the head sits in the TOP third — so the
   anchor has to be LOW, not high. 45% was tuned against the old crew photo and
   decapitated these. The real fault, though, was upstream: nine of the nineteen
   sources are PORTRAIT, and tools/fetch_images.py was cropping them to 16:9 at a
   0.4 anchor — taking the slice out of the subject's chest, so the face was gone
   from the FILE and no anchor here could recover it. That is fixed at the
   fetcher, which now clamps a portrait source to 0.12 and says so. With the
   files correct, 30% is the right anchor for a 2.7:1 hero window. */
.hero > .hero-figure img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; border-radius: 0; }
.hero > .hero-figure .cap { display: none; }
.hero:has(> .hero-figure)::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(10,10,10,.95) 0%, rgba(10,10,10,.84) 46%, rgba(10,10,10,.42) 100%);
}
.hero:has(> .hero-figure) > .inner { min-height: 520px; display: flex; align-items: flex-end; }

/* case 2 — in flow, beside the copy */
.hero > .inner:has(.hero-figure) {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 44px; align-items: center;
}
.hero .inner .hero-figure { margin: 0; grid-column: 2; }
.hero .inner .hero-figure img { width: 100%; height: 360px; object-fit: cover; object-position: center 24%; border-radius: var(--r-img); }
.hero.hero-page .inner .hero-figure img { height: 300px; }
.hero.hero-page > .inner { padding-top: 62px; padding-bottom: 54px; }
.hero.hero-page h1 { font-size: clamp(1.95rem, 3.7vw, 2.9rem); }
.hero.hero-page .lede { font-size: 1.05rem; }

.cap { font-size: .78rem; color: var(--mut); margin-top: 10px; }
.crumbs { font-size: .82rem; color: var(--mut); }
.crumbs a { color: var(--mut); }
.crumbs a:hover { color: var(--hv); }

/* the data panel, where a page carries one instead of a photograph */
.hero-panel { background: var(--bg3); border-radius: var(--r); border-left: 4px solid var(--hv); overflow: hidden; }
.hero-panel .hp-photo { width: 100%; height: 180px; object-fit: cover; object-position: center 24%; display: block; }
.hero-panel .hp-inner { padding: 22px 24px 24px; }
.hero-panel .hp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.hero-panel .hp-title { font-family: Montserrat, sans-serif; font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--mut); }
.hero-panel .hp-flag { font-family: Montserrat, sans-serif; font-size: .7rem; font-weight: 800; color: #101010; background: var(--hv); padding: 4px 10px; border-radius: 3px; white-space: nowrap; }
.hero-panel .hp-row { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; gap: 13px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }
.hero-panel .hp-row:last-of-type { border-bottom: 0; }
.hero-panel .hp-row .k { font-family: Montserrat, sans-serif; font-size: .8rem; font-weight: 800; color: #fff; }
.hero-panel .hp-row .l { font-size: .88rem; color: var(--tx); }
.hero-panel .hp-row .v { font-family: Montserrat, sans-serif; font-size: 1.1rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.hero-panel .hp-row.now .k, .hero-panel .hp-row.now .v { color: var(--hv); }
.hero-panel .hp-foot { margin-top: 14px; font-size: .8rem; color: var(--mut); }

/* ==========================================================================
   THE NUMBERS — a hard yellow strap. Black on yellow, full bleed.
   ========================================================================== */
.factstrip { background: var(--hv); color: #101010; }
.factstrip .inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.factstrip .fs { padding: 26px 22px; border-left: 2px solid rgba(16,16,16,.16); }
.factstrip .fs:first-child { border-left: 0; padding-left: 0; }
.factstrip .fs b {
  display: block; font-family: Montserrat, sans-serif; font-size: 2rem; font-weight: 800;
  color: #101010; letter-spacing: -.035em; line-height: 1;
}
.factstrip .fs span { display: block; font-size: .82rem; font-weight: 600; color: #2a2a2a; margin-top: 6px; line-height: 1.4; }

/* the promise strip and hero facts stay on the dark ground, hairline-divided,
   so a page carrying both does not show two yellow straps */
.promise-wrap { background: var(--bg); }
.promise-card, .hero-facts dl {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 34px; border-top: 3px solid var(--hv);
}
.hero-facts { grid-column: 1 / -1; }
.hero-facts dt { display: none; }
.promise-card .pc-item, .hero-facts dd {
  padding: 20px 20px 18px; border-left: 1px solid var(--line);
  font-size: .84rem; line-height: 1.5; color: var(--mut);
}
.promise-card .pc-item:first-child, .hero-facts dd:first-of-type { border-left: 0; padding-left: 0; }
.promise-card .pc-num, .hero-facts dd strong {
  display: block; font-family: Montserrat, sans-serif; font-size: 1.6rem; font-weight: 800;
  color: var(--hv); letter-spacing: -.03em; line-height: 1.1; margin-bottom: 5px;
}
.promise-card .pc-item h3 { font-size: 1rem; margin-bottom: .3rem; }
.promise-card .pc-item p { font-size: .84rem; color: var(--mut); }

/* ==========================================================================
   SECTIONS. The light-band classes become raised DARK panels — there is no
   white surface anywhere on this site.
   ========================================================================== */
.section { padding: 68px 0; }
.section.tight { padding: 46px 0; }
.section.bg-paper, .section.bg-tint { background: var(--bg2); }
.section.bg-ink, .section.bg-ocean { background: #0b0b0b; }
.section-head { margin-bottom: 2.2rem; max-width: 44em; }
.section-head.centred { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.centred .eyebrow { justify-content: center; }
.section-head h2 { margin-bottom: .8rem; }
.section-head p { color: var(--mut); font-size: 1.04rem; max-width: 40em; }
.section-head.centred p { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   CARDS — a magazine tile feed. Photograph on top, category kicker, title.
   ========================================================================== */
.grid { display: grid; gap: 17px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  --card-pad: 24px;
  background: var(--bg3); border-radius: var(--r); padding: var(--card-pad);
  display: flex; flex-direction: column; overflow: hidden;
  transition: background-color .16s;
}
.card:hover { background: var(--bg4); }
.section.bg-paper .card, .section.bg-tint .card { background: var(--bg3); }
.card .card-photo {
  width: calc(100% + var(--card-pad) * 2);
  max-width: none;                              /* the base img max-width:100% would cap this */
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 18px;
  height: 176px; object-fit: cover; object-position: center 24%; display: block; flex: none;
}
/* the icon set is not used on this system — the photograph is the signal */
.card .icon, .split-cols .icon { display: none; }
.card h3 { margin-bottom: .45rem; }
.card p { font-size: .9rem; color: var(--mut); }
.card p strong { color: #fff; }
.card .card-link {
  margin-top: auto; padding-top: 15px;
  font-family: Montserrat, sans-serif; font-size: .75rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--hv);
}
.card .card-link::after { content: " →"; }

/* ---------- photo + copy ---------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; align-items: center; }
.split .split-photo img { width: 100%; height: 420px; object-fit: cover; object-position: center 24%; border-radius: var(--r-img); }
.split.flip .split-photo { order: 2; }

/* ---------- checklist ---------- */
ul.checks { list-style: none; margin: 1.1rem 0; }
ul.checks li { position: relative; padding-left: 28px; margin-bottom: .65rem; }
ul.checks li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--hv); font-weight: 800; font-size: .9rem;
}

/* ---------- steps ---------- */
.steps { counter-reset: st; margin-top: 1.3rem; display: grid; gap: 12px; }
.step {
  counter-increment: st; position: relative; padding: 20px 22px 20px 66px;
  background: var(--bg3); border-radius: var(--r); border-left: 3px solid var(--hv);
}
.step::before {
  content: counter(st, decimal-leading-zero); position: absolute; left: 22px; top: 21px;
  font-family: Montserrat, sans-serif; font-size: 1.05rem; font-weight: 800; color: var(--hv);
}
.step h3 { margin-bottom: .3rem; }
.step p { font-size: .9rem; color: var(--mut); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; margin-top: 1.4rem; }
.faq details { background: var(--bg3); border-radius: var(--r); overflow: hidden; }
.faq summary {
  list-style: none; cursor: pointer; padding: 19px 52px 19px 22px; position: relative;
  font-family: Montserrat, sans-serif; font-size: 1rem; font-weight: 700; color: #fff; line-height: 1.32;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 20px; top: 17px;
  font-size: 1.25rem; font-weight: 400; color: var(--hv); line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq details .faq-body { padding: 0 22px 20px; }
.faq details .faq-body p { font-size: .95rem; }

/* ==========================================================================
   PHOTOGRAPHY BANDS — full bleed, no inset. The dark ground means a band does
   not need a veil unless type sits on it.
   ========================================================================== */
/* Bands align to the CONTENT GRID, not to the viewport.
   These were full bleed — width:100% on a body-level section, so 100vw — which
   is the On The Tools idiom and looked, on our pages, simply misaligned: the
   photograph ran 26px past the body copy on each side while every other element
   on the page stopped at the 1240px measure. Andy read it as a defect three
   times, which is the answer. `margin-inline` rather than `margin: 0 auto`
   because a later gutter rule overrode the shorthand's auto margins on the
   sibling site and knocked bands 184px off centre. */
.imgband {
  position: relative; overflow: hidden;
  /* Match .inner's CONTENT box, not its border box. `.inner` is max-width:1240px
     with 26px of padding, so its text runs 1188px wide — a band capped at 1240px
     is still 26px wider on each side, which is exactly the misalignment being
     fixed. Subtracting the gutter from the cap makes the two edges identical at
     every viewport width. */
  width: calc(100% - var(--gut) * 2);
  max-width: calc(var(--max) - var(--gut) * 2);
  margin-inline: auto;
  border-radius: var(--r-img);
  background-size: cover; background-position: center 22%;
  display: flex; align-items: center; min-height: 400px; padding: 52px 0;
}
.imgband::before { content: ""; position: absolute; inset: 0; background-image: inherit; background-size: cover; background-position: center 22%; }
.imgband::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,.42), rgba(10,10,10,.78)); }
.imgband .inner { position: relative; z-index: 2; }
.imgband blockquote {
  font-family: Montserrat, sans-serif; font-size: clamp(1.4rem, 2.8vw, 2.2rem);
  font-weight: 800; line-height: 1.16; color: #fff; max-width: 26em;
  letter-spacing: -.022em; text-transform: uppercase;
}
.imgband cite {
  display: block; margin-top: 1.1rem; font-family: Montserrat, sans-serif;
  font-size: .74rem; font-style: normal; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--hv);
}
.imgband.imgband-plain { min-height: 0; height: 460px; padding: 0; }

/* A band that lands INSIDE the document grid becomes a grid cell, so it renders
   at column width rather than full bleed. That is where the content-aware mid
   bands land, and rather than fight it the column-width case is styled as a
   deliberate inline figure — which is what a long article wants anyway. It is
   shorter than a full-bleed band so it illustrates the text instead of
   interrupting it. */
.doc > .imgband, .doc > .imgband.imgband-plain {
  grid-column: 2; height: 260px; min-height: 0; border-radius: var(--r-img);
  margin: .6rem 0 1.4rem;
}
.doc > .imgband::after { background: linear-gradient(180deg, rgba(10,10,10,.10), rgba(10,10,10,.30)); }
@media (max-width: 1080px) {
  .doc > .imgband, .doc > .imgband.imgband-plain { grid-column: 1; height: 220px; }
}
.imgband.imgband-plain::after { background: linear-gradient(180deg, rgba(10,10,10,.16), rgba(10,10,10,.44)); }
.imgband.imgband-plain.imgband-tall { height: 540px; }

/* An INLINE band — a mid-article figure rather than a full-bleed interruption.
   It is the width of whatever prose column contains it, which is the point: a
   band inside a text column that tries to be full bleed ends up narrow and
   flush left instead, because `width:100%` resolves against the column. This
   variant embraces the column and reads as a deliberate figure. */
.imgband.imgband-plain.imgband-inline {
  height: 300px; min-height: 0; border-radius: var(--r-img);
  margin: 1.7rem 0 2rem;
}
.imgband.imgband-plain.imgband-inline::after {
  background: linear-gradient(180deg, rgba(10,10,10,.06), rgba(10,10,10,.22));
}
.doc > .imgband.imgband-plain.imgband-inline { grid-column: 2; height: 260px; }
@media (max-width: 700px) {
  .imgband.imgband-plain.imgband-inline { height: 210px; margin: 1.2rem 0 1.5rem; }
}

/* ==========================================================================
   THE SPLIT PANEL
   ========================================================================== */
.split-block { background: var(--bg2); }
.split-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split-cols > div { padding: 44px 40px; }
.split-cols > div:first-child { padding-left: 0; }
.split-cols > div + div { border-left: 1px solid var(--line); }
.split-cols h3 { margin-bottom: .55rem; }
.split-cols p { font-size: .92rem; color: var(--mut); }
.split-cols .micro { font-size: .78rem; color: #6f6f6f; }

/* ==========================================================================
   CLOSING CTA — the ground flips to yellow. This is the loudest thing on the
   site and it only happens once per page.
   ========================================================================== */
.cta-band { background: var(--hv); color: #101010; padding: 64px 0; }
.cta-band .eyebrow { color: #101010; }
.cta-band .eyebrow::before { background: #101010; }
.cta-band h2 { color: #101010; }
.cta-band p { font-size: 1.06rem; color: #2a2a2a; font-weight: 500; max-width: 38em; margin-bottom: 1.8rem; }
.cta-band .btn-row { display: flex; flex-wrap: wrap; gap: 11px; }

/* ---------- pull quote ---------- */
.pull {
  font-family: Montserrat, sans-serif; font-size: 1.3rem; font-weight: 700; line-height: 1.3;
  color: #fff; border-left: 4px solid var(--hv); padding-left: 22px; margin: 1.9rem 0;
  letter-spacing: -.015em;
}

/* ==========================================================================
   LONG-FORM PROSE
   ========================================================================== */
.prose > h2:first-child { margin-top: 0; }
.prose h2 { margin: 2.4rem 0 1rem; }
.prose h3 { margin: 1.8rem 0 .6rem; }
.prose p { margin-bottom: 1rem; }
.prose ul, .prose ol { margin: 1rem 0 1.3rem 1.2rem; }
.prose li { margin-bottom: .5rem; }
.prose > :first-child { margin-top: 0; }

/* ---------- callout ---------- */
.note { background: var(--bg3); border-left: 4px solid var(--hv); border-radius: var(--r); padding: 22px 26px; margin: 1.7rem 0; }
.note .note-label {
  display: block; font-family: Montserrat, sans-serif; font-size: .72rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; color: var(--hv); margin-bottom: .5rem;
}
.note p { font-size: .95rem; }

/* ---------- inline reference ---------- */
.rule { font-size: .87em; font-weight: 700; color: var(--hv); white-space: nowrap; }
.rulebox { background: var(--bg3); border-left: 4px solid var(--hv); border-radius: var(--r); padding: 22px 26px; margin: 1.7rem 0; }
.rulebox .rb-ref {
  display: block; font-family: Montserrat, sans-serif; font-size: .73rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--hv); margin-bottom: .55rem;
}
.rulebox p { font-size: .95rem; }

/* ---------- tables: a real data table, which this niche needs ---------- */
.tbl { background: var(--bg3); border-radius: var(--r); overflow-x: auto; margin: 1.7rem 0; -webkit-overflow-scrolling: touch; }
.tbl table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 460px; }
.tbl th, .tbl td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th {
  font-family: Montserrat, sans-serif; font-size: .7rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--hv); background: #1c1c1c;
}
.tbl td:first-child { color: #fff; font-weight: 600; }
.tbl tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   LONG-FORM AS A DOCUMENT
   ========================================================================== */
.doc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 54px; align-items: start; }
.section.doc-sec { padding: 54px 0 62px; }
.doc-side { position: sticky; top: 96px; }
.doc-mark {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: Montserrat, sans-serif; font-size: .7rem; font-weight: 800;
  letter-spacing: .15em; text-transform: uppercase; color: var(--hv); margin: 0; line-height: 1.4;
}
.doc-mark::before { content: ""; width: 4px; height: 13px; background: var(--hv); flex: none; }
.doc-body { max-width: 44em; }
.doc-body > *:first-child { margin-top: 0; }
.doc-body h2 { margin-top: 2.9rem; scroll-margin-top: 100px; }
.doc-body > h2:first-child, .doc-body h2:first-of-type { margin-top: 0; }
.doc-body h3 { margin-top: 1.8rem; }
.doc-rail { position: sticky; top: 96px; background: var(--bg3); border-radius: var(--r); padding: 20px; }
.doc-rail .drt {
  display: block; font-family: Montserrat, sans-serif; font-size: .7rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mut); margin-bottom: .6rem;
}
.doc-rail ol { list-style: none; margin: 0; counter-reset: rl; }
.doc-rail li { counter-increment: rl; }
.doc-rail a { display: block; padding: 9px 0 9px 28px; position: relative; font-size: .88rem; color: var(--tx); }
.doc-rail a::before { content: counter(rl, decimal-leading-zero); position: absolute; left: 0; top: 9px; font-family: Montserrat, sans-serif; font-size: .7rem; font-weight: 800; color: var(--mut); }
.doc-rail a:hover { color: var(--hv); text-decoration: none; }
.doc-rail a:hover::before, .doc-rail a.on::before { color: var(--hv); }
.doc-rail a.on { color: var(--hv); font-weight: 700; }

/* ---------- forms ---------- */
.form-card { background: var(--bg3); border-radius: var(--r); padding: 32px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.form-grid .full { grid-column: 1 / -1; }
label { display: block; font-size: .82rem; font-weight: 700; color: #fff; margin-bottom: 6px; }
input, select, textarea {
  width: 100%; padding: 13px 14px; font-family: inherit; font-size: .94rem;
  color: #fff; background: #141414; border: 1.5px solid var(--line); border-radius: var(--r);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--hv); }
input::placeholder, textarea::placeholder { color: #6f6f6f; }
.form-msg { margin-top: 14px; font-size: .92rem; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { margin-bottom: 16px; }
.field .hint { display: block; font-size: .8rem; color: var(--mut); margin-top: 5px; }

/* ---------- newsletter ---------- */
.nl-band { background: var(--bg2); padding: 56px 0; }
.nl-band .inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px; align-items: center; }
.nl-band h3 { font-family: Montserrat, sans-serif; font-size: 1.4rem; font-weight: 800; text-transform: uppercase; margin-bottom: .5rem; }
.nl-band p { font-size: .94rem; color: var(--mut); }
.nl-form { display: flex; gap: 10px; flex-wrap: wrap; }
.nl-form input[type="email"] { flex: 1 1 240px; }
.nl-inline { background: var(--bg3); border-left: 4px solid var(--hv); border-radius: var(--r); padding: 24px 26px; margin: 2.1rem 0; }
.nl-inline h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.nl-inline p { font-size: .92rem; color: var(--mut); }

/* ---------- footer ---------- */
footer.site { background: #0b0b0b; color: #8d8d8d; padding: 62px 0 30px; font-size: .9rem; border-top: 1px solid var(--line); }
footer.site .cols {
  display: grid; grid-template-columns: 1.6fr minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap: 40px; padding-bottom: 38px; border-bottom: 1px solid var(--line);
}
footer.site h4 { font-family: Montserrat, sans-serif; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; }
footer.site a { color: #8d8d8d; }
footer.site a:hover { color: var(--hv); text-decoration: none; }
footer.site ul { list-style: none; }
footer.site li { margin-bottom: .5rem; }
footer.site .wordmark .wm-main { color: #fff; }
footer.site .wordmark .wm-top { color: #6f6f6f; }
footer.site .reg-note { font-size: .83rem; color: #6f6f6f; margin-top: 1.1rem; max-width: 34em; }
footer.site .fine { padding-top: 24px; font-size: .81rem; color: #6f6f6f; display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; }

/* ---------- floats ---------- */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  width: 54px; height: 54px; border-radius: var(--r); background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.wa-float svg { width: 27px; height: 27px; }
.sticky-cta { display: none; }

/* ---------- calculators ---------- */
.calc-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; }
.calc-inputs { background: var(--bg3); border-radius: var(--r); padding: 28px; }
.calc-results { background: var(--hv); color: #101010; border-radius: var(--r); padding: 30px; position: sticky; top: 96px; }
.calc-results h3 { color: #101010; margin-bottom: 1rem; }
.calc-row { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid rgba(16,16,16,.18); font-size: .93rem; color: #2a2a2a; }
.calc-row span:last-child, .calc-row strong { color: #101010; font-weight: 800; }
.calc-verdict {
  font-family: Montserrat, sans-serif; font-size: 1.2rem; font-weight: 800; color: #101010;
  margin-top: 1.2rem; padding-top: 1.1rem; border-top: 2px solid rgba(16,16,16,.3); line-height: 1.3;
}
.calc-hint { font-size: .83rem; color: #3a3a3a; margin-top: .7rem; }
.calc-disclaimer { font-size: .82rem; color: var(--mut); margin-top: 1.3rem; }
.calc-actions { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 10px; }
.hc-summary { margin-top: 1.3rem; }
.hc-actions { list-style: none; margin-top: 1rem; }
.hc-actions li { padding: 10px 0; border-bottom: 1px solid rgba(16,16,16,.18); font-size: .91rem; color: #2a2a2a; }

/* red / amber / green — a status signal, not brand colour */
.rag { display: inline-flex; align-items: center; gap: 9px; }
.rag-dot { width: 11px; height: 11px; flex: none; border-radius: 50%; background: var(--mut); }
.rag-green .rag-dot { background: #35c46a; }
.rag-amber .rag-dot { background: #f0a92b; }
.rag-red .rag-dot { background: #e5533c; }
.rag-label { font-family: Montserrat, sans-serif; font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }

/* ---------- misc ---------- */
.center, .centred { text-align: center; }
.mt-2 { margin-top: 2rem; }
.micro { font-size: .8rem; color: var(--mut); }

/* ---------- rhythm ---------- */
.hero + .factstrip, .hero + .promise-wrap { padding-top: 0; }
.factstrip + .section, .imgband + .section, .factstrip + .doc-sec, .promise-wrap + .section { padding-top: 58px; }
.hero + .section { padding-top: 58px; }
.doc-sec + .doc-sec, .section + .section.doc-sec { padding-top: 0; }

/* ==========================================================================
   RESPONSIVE — every collapsed track is minmax(0, 1fr), never a bare 1fr,
   because a bare track's auto minimum is min-content and a 460px table would
   force it wider than the viewport.
   ========================================================================== */
@media (max-width: 1080px) {
  .doc, .calc-wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .doc-side, .doc-rail, .calc-results { position: static; }
  .split-cols > div, .split-cols > div:first-child { padding: 34px 28px; }
}
@media (max-width: 900px) {
  :root { --gut: 18px; }
  .factstrip .inner, .promise-card, .hero-facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .factstrip .fs:nth-child(odd), .promise-card .pc-item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .hero-facts dd:nth-of-type(odd) { border-left: 0; padding-left: 0; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4, .split, .nl-band .inner, .form-grid, .split-cols { grid-template-columns: minmax(0, 1fr); }
  .split, .nl-band .inner { gap: 28px; }
  .split.flip .split-photo { order: 0; }
  .split-cols > div + div { border-left: 0; border-top: 1px solid var(--line); }
  footer.site .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .section { padding: 50px 0; }
  .hero > .inner { padding-top: 62px; padding-bottom: 54px; }
  .hero:has(.hero-figure)::after { background: linear-gradient(180deg, rgba(10,10,10,.74), rgba(10,10,10,.95)); }
  .imgband.imgband-plain { height: 280px; }
  .imgband.imgband-plain.imgband-tall { height: 330px; }
  nav.primary { display: none; }
  .nav-toggle { display: block; flex: none; }
  .topbar .tb-tag { display: none; }
  .topbar .inner { justify-content: flex-end; }
  header.site nav.primary.open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: 100%; left: 0; right: 0; background: var(--bg3);
    border-bottom: 3px solid var(--hv); padding: 14px 18px 20px; gap: 0;
  }
  header.site nav.primary.open .nav-group .sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; padding: 0 0 0 12px; background: transparent;
  }
  .sticky-cta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: #0b0b0b; padding: 10px 14px; gap: 10px; }
  .sticky-cta .btn { flex: 1; text-align: center; padding: 12px 12px; font-size: .78rem; }
  .wa-float { bottom: 74px; }
}
/* Very narrow phones: a single long trade name in an uppercase headline —
   "GROUNDWORKERS" is 13 characters and 313px at the clamp floor — is wider than
   the 284px available inside the gutters at 320px, and a headline cannot wrap
   mid-word on its own. Hyphenation gives it a graceful break, and the smaller
   floor means most names never need one. This will keep mattering: the trade
   list includes SUBCONTRACTORS and AIR CONDITIONING. */
@media (max-width: 380px) {
  /* `hyphens: auto` alone is NOT a fix — it depends on the browser having a
     hyphenation dictionary for the language, and where there is none it
     silently does nothing while the word still overflows. So the real fix is a
     font size the longest trade name fits at ("SUBCONTRACTORS" is 14 uppercase
     characters), with overflow-wrap as the net for anything longer. break-word
     only breaks when there is no other option, so ordinary text is unaffected. */
  h1 { font-size: 1.6rem; hyphens: auto; overflow-wrap: break-word; }
  h2 { font-size: 1.35rem; hyphens: auto; overflow-wrap: break-word; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .factstrip .inner, .promise-card, .hero-facts dl { grid-template-columns: minmax(0, 1fr); }
  .factstrip .fs { border-left: 0; padding-left: 0; border-top: 2px solid rgba(16,16,16,.16); }
  .factstrip .fs:first-child { border-top: 0; }
  .promise-card .pc-item, .hero-facts dd { border-left: 0; padding-left: 0; }
  .card { --card-pad: 20px; }
  .form-card, .calc-inputs, .calc-results { padding: 22px; }
  .hero-panel .hp-inner { padding: 18px 20px 20px; }
}
@media print {
  .topbar, header.site, nav.primary, .wa-float, .sticky-cta, .cta-band, .nl-band, footer.site, .tape { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  h1, h2, h3, h4, strong { color: #000; }
  .imgband { display: none; }
  .card, .tbl, .note, .rulebox { background: #fff; border: 1px solid #ccc; }
  a { color: #000; text-decoration: underline; }
}