/* Zentra Industries - direction D ("Direct Line")
   Palette is LOCKED (ZTI-REQUIREMENTS.md section 5). No hue outside this block. */

:root {
  --accent:  #e87722;
  --accent2: #ff922b;
  --dark:    #1b1916;
  --dark2:   #2a2621;
  --text:    #1b1916;
  --text2:   #5a5550;
  --text3:   #948f88;
  --bg:      #f3f1ed;
  --bg2:     #e9e5dc;
  --surface: #ffffff;
  --border:  rgba(0,0,0,.08);

  --display: 'Anton', 'Arial Narrow', sans-serif;
  --body:    'Barlow', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  --wrap: 1440px;
  --pad:  clamp(20px, 3.4vw, 48px);

  /* Enforced on .nav-in, and subtracted in .hero-band. Single source of truth -
     if the nav grows and this does not, the first screen stops fitting. */
  --nav-h: 64px;
}

/* Schema drawing colourways.
   The SVGs paint from these tokens with the light values baked in as
   fallbacks, so the colourway is a property of the CONTAINER, never of the
   file. One drawing set serves both. Every value below is already in the
   locked palette - no new hues. */
/* --zti-accent paints the .note text - the VERIFY and provenance captions.
   Measured, not assumed (issue #19 AC), WCAG 2.x on the drawing face:

     #e87722 on #ffffff   2.96:1   FAILS AA text, and misses 3:1 as well
     #e87722 on #1b1916   5.92:1   passes
     #ff922b on #1b1916   7.85:1   passes, and is the better of the two
     #1b1916 on #ffffff  17.54:1   passes comfortably

   So the light colourway cannot carry orange note text at all: it is the
   colourway nobody checked, and it was the failing one. The note keeps its
   smaller size and letter-spacing to read as a caption, and the word VERIFY
   carries the meaning - colour was never the only signal. The palette is
   locked, so darkening the orange is not available. */
.dwg-light {
  --zti-face: var(--surface);
  --zti-void: var(--bg2);
  --zti-ink: var(--dark);
  --zti-dim: var(--text3);
  --zti-dim-text: var(--text2);
  --zti-accent: var(--text);      /* was --accent: 2.96:1 on white, fails AA */
  --zti-mono: var(--mono);
}
.dwg-dark {
  --zti-face: var(--dark);
  --zti-void: var(--dark2);
  --zti-ink: var(--bg);
  --zti-dim: var(--text3);
  --zti-dim-text: var(--text3);   /* lifts from --text2 for contrast on charcoal */
  --zti-accent: var(--accent2);   /* 7.85:1 on charcoal, vs 5.92:1 for --accent */
  --zti-mono: var(--mono);
}
svg.dwg { display: block; width: 100%; height: auto; }

/* --- reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--body);
  overflow-x: hidden;
}
img, video, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, address, ul { margin: 0; }
ul { padding: 0; list-style: none; }
address { font-style: normal; }
button { font: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.accent { color: var(--accent); }
/* --text3 on a light ground measures 2.55-3.21:1 and fails AA text. It stays
   the muted token on CHARCOAL, where it measures 5.47:1 and is correct.
   Every light-ground use below moves to --text2 (7.37:1 on white). */
.dim { color: var(--text2); }
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--accent); color: var(--text); padding: 12px 18px;
}
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* --- buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: 400 17px/1 var(--display); letter-spacing: .5px;
  padding: 18px 26px; border: 0; cursor: pointer;
  transition: background .15s, color .15s;
}
/* The primary CTA. White on Zentra orange measures 2.96:1 and fails AA text -
   on the conversion button, on every page, read in direct sunlight. The
   palette is locked so the orange could not be darkened; charcoal on orange
   is 5.92:1 and stays entirely inside the locked palette. Option A, issue #22,
   Calvin's call. Hover holds up too: #1b1916 on #ff922b is 7.62:1. */
.btn-wa    { background: var(--accent); color: var(--text); }
.btn-wa:hover { background: var(--accent2); color: var(--text); }
.btn-dark  { background: var(--dark); color: var(--bg); }
.btn-dark:hover { background: var(--dark2); }
.btn-ghost { border: 1px solid var(--text2); color: inherit; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-lg { padding: 20px 28px; font-size: 20px; }
.btn-xl { padding: 0 34px; height: 72px; font-size: clamp(16px, 2.1vw, 22px); }

/* --- nav --------------------------------------------------------------- */
.nav { background: var(--bg); border-bottom: 1px solid var(--border); }
.nav-in {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad);
  min-height: var(--nav-h);
  display: flex; align-items: center; gap: 22px;
}
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand-mark { display: block; }
.brand-word { font: 400 24px var(--display); letter-spacing: .5px; }
.brand-word .dot { color: var(--accent); }

.nav-mid { display: flex; align-items: center; gap: 22px; }
.nav-link { font: 600 12.5px var(--body); letter-spacing: 1.2px; color: var(--text2); }
.nav-link:hover { color: var(--text); }
.has-menu { position: relative; }
.menu {
  position: absolute; top: 100%; left: 0; min-width: 218px; z-index: 20;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  display: none; flex-direction: column; padding: 6px 0;
  /* MUST stay visible. This panel held all sixteen rows once and carried
     `overflow-y: auto` to survive a short viewport; with the lines moved into
     flyouts, that same rule would clip every one of them at the panel edge. */
  overflow: visible;
}
.has-menu:hover .menu, .has-menu:focus-within .menu { display: flex; }
.menu a { padding: 9px 18px; font: 600 13px var(--body); letter-spacing: .4px; }
.menu a:hover { background: var(--bg2); color: var(--accent); }

/* --- level 1: the three groups ------------------------------------------ */
.mgroup { position: relative; }
.menu .mgroup-link {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 11px 18px; font: 600 11.5px var(--body); letter-spacing: 1.3px;
  color: var(--text2);
}
.menu .mgroup:hover > .mgroup-link,
.menu .mgroup:focus-within > .mgroup-link { background: var(--bg2); color: var(--text); }
.mgroup-count { font-size: 10px; color: var(--text3); }

/* --- level 2: that group's lines ---------------------------------------- */
/* Opens hard against the parent's right edge - a gap here is a hover trap,
   because the pointer crosses it on the way in and the flyout closes. */
.submenu {
  position: absolute; left: 100%; top: -7px; min-width: 236px; z-index: 21;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  display: none; flex-direction: column; padding: 6px 0;
}
.mgroup:hover > .submenu, .mgroup:focus-within > .submenu { display: flex; }
.submenu-h {
  padding: 11px 18px 7px; font-size: 10px; font-weight: 600;
  letter-spacing: 1.4px; color: var(--text3);
}

/* Group headings on the FLAT surfaces - drawer, footer, 404 - which have no
   hover and show every line at once. A real link since each group got a page
   at /products/<key>; it stays a label rather than a line item so the two
   levels of the tree are still legible. */
.menu-group {
  padding: 13px 18px 5px; font-size: 10px; font-weight: 600;
  letter-spacing: 1.6px; color: var(--text3);
}
.navgroup, .navgroup-lines { display: flex; flex-direction: column; }

/* NAV_PRODUCTS is shared by four surfaces: the dropdown, the mobile drawer,
   the footer's Products column and the 404 recovery list. Only the dropdown
   wants the 18px inset and the divider rule - in a plain link column they are
   a label above their own links, nothing more. */
.foot-links .menu-group,
.lost-links .menu-group {
  padding: 0 0 2px; margin-top: 0; border-top: 0; border-bottom: 0;
  font-size: 10px; letter-spacing: 1.5px; color: var(--text3);
}
.foot-links .navgroup-lines,
.lost-links .navgroup-lines { gap: 8px; margin-top: 8px; }
.foot-links .navgroup + .navgroup,
.lost-links .navgroup + .navgroup { margin-top: 16px; }

.nav-tel { display: flex; gap: 14px; }
.nav-tel a { font: 600 15px var(--mono); }
.tel-2 { color: var(--text2); }

.burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.burger span { display: block; width: 24px; height: 2px; background: var(--dark); margin: 5px 0; }
.mobnav { display: none; flex-direction: column; padding: 8px var(--pad) 20px; border-top: 1px solid var(--border);
  /* Nineteen entries since the drawer carries the full range. */
  max-height: calc(100vh - var(--nav-h)); overflow-y: auto; }
.mobnav a { padding: 13px 0; border-bottom: 1px solid var(--border); font: 600 15px var(--body); }
/* `.mobnav a` sets `font` as a shorthand, which resets the 10px on
   `.menu-group`, so the size has to be restated at this specificity. */
.mobnav .menu-group {
  padding: 18px 0 2px; border-top: 0; border-bottom: 0; margin-top: 0;
  font: 600 10px var(--mono); letter-spacing: 1.5px; color: var(--text3);
}
/* The drawer cannot fly out, so the hierarchy is carried by an indent. */
.mobnav .navgroup-lines a { padding-left: 14px; }
.mobnav[hidden] { display: none; }

/* --- hero (direction D: Anton full bleed, no drawing) ------------------- */

/* The first screen is ONE unit - hero + placards - ending exactly at the fold.
   Client request 2026-08-27: the placards were being clipped by the viewport
   and the bone ground of the product grid was bleeding in below them.
   It also hardens the earlier client constraint that the placards must SHARE
   the first screen: that used to be approximated by hand-tuned padding, and is
   now guaranteed by the layout.

   svh, not dvh: dvh re-resolves every time mobile browser chrome shows or
   hides, reflowing the hero mid-scroll and feeding cumulative layout shift.
   CLS sits inside a contractual Lighthouse budget that is ALREADY failing
   (#16 at 85-88, fix tracked in #5), so spending more of it here is not
   available. svh is static and sized to the smallest viewport, so the content
   always fits; the cost is a sliver of the next section when the URL bar
   retracts, which is much the cheaper failure.

   min-height, not height: on a short viewport the content must push the band
   taller rather than be clipped - clipping is the bug being fixed. */
.hero-band {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--nav-h) - 1px);   /* 1px = the nav border */
  min-height: calc(100svh - var(--nav-h) - 1px);
  padding-bottom: clamp(22px, 3vw, 38px);
}
/* .wrap carries `margin: 0 auto`, and an auto inline margin on a FLEX item
   eats the free space and shrink-wraps it to content width instead of
   stretching. Without this the placard row collapses to about a third of the
   page and floats off-centre. width:100% restores the fill; max-width on .wrap
   still caps it and the auto margins still centre it. */
.hero-band > * { width: 100%; }

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--dark);
  flex: 1 0 auto;
  display: flex; align-items: center;
  /* Only a MINIMUM gutter now - .hero-band drives the height and flex:1 fills
     the spare space, so this never shows on a normal screen. Kept small on
     purpose: it is what decides the shortest viewport that still fits the
     first screen without the band having to grow past the fold. At the old
     110px that threshold was 724px, which a 1440x700 laptop misses. */
  padding: clamp(32px, 5vw, 72px) 0;
}
.hero > .wrap { width: 100%; }
/* Absolutely positioned siblings paint above static in-flow content
   regardless of DOM order. z-index:-1 on both layers plus isolation on the
   hero puts them behind the text but still above the hero's own background. */
.hero-media, .hero-scrim { position: absolute; inset: 0; z-index: -1; }
.hero-media { width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.hero-scrim {
  background: linear-gradient(90deg, rgba(27,25,22,.92), rgba(27,25,22,.55) 55%, rgba(27,25,22,.75));
}
.hero-h {
  font: 400 clamp(40px, 7.4vw, 104px)/.95 var(--display);
  color: var(--bg); margin: 0;
}
.hero-sub {
  margin: 20px 0 0; max-width: 700px;
  font: 500 clamp(15px, 1.4vw, 19px)/1.5 var(--body); color: var(--bg2);
}
.hero-acts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* placards overlap the hero base - client feedback, treated as a constraint */
.placards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-top: -54px; position: relative; z-index: 2;
  flex: none;            /* the hero absorbs the spare height, not the placards */
}
.placard {
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 16px 20px;
}
.placard b { display: block; font: 400 clamp(22px, 2.4vw, 32px)/1 var(--display); }
/* 10px orange on white is 2.96:1 - unreadable in the sunlight this site is
   designed for. The Anton figure above it still carries the placard. */
.placard span {
  display: block; margin-top: 4px; color: var(--text2);
  font: 600 10px var(--body); letter-spacing: 1.5px;
}

/* --- section furniture ------------------------------------------------- */
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: baseline; gap: 12px; margin-bottom: 18px; }
.sec-title { font: 400 clamp(22px, 2.6vw, 34px) var(--display); letter-spacing: .3px; }
.sec-note { font-size: 11px; color: var(--text2); }
.sec-h { font: 400 clamp(18px, 2vw, 24px) var(--display); margin: 34px 0 12px; letter-spacing: .4px; }
.products, .prewritten, .pbody, .dims, .prose, .page-head, .contact-grid { padding-block: clamp(30px, 4vw, 48px); }

/* --- product grid ------------------------------------------------------ */
/* 3 columns x 2 rows = 6 cells. The featured card takes column 1 across both
   rows (2 cells); the other four fill the remaining four. Exact fit.
   Auto-placement handles the rest regardless of which card is featured. */
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pcard {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  padding: 18px 20px; transition: border-color .15s, box-shadow .15s;
  /* light colourway lives on the card, so .is-featured can override it.
     Kept byte-identical to .dwg-light above - including the accent fix. */
  --zti-face: var(--surface);
  --zti-void: var(--bg2);
  --zti-ink: var(--dark);
  --zti-dim: var(--text3);
  --zti-dim-text: var(--text2);
  --zti-accent: var(--text);
  --zti-mono: var(--mono);
}
.pcard:hover { border-color: var(--accent); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.pcard-art {
  display: flex; align-items: center; justify-content: center;
  height: 170px; overflow: hidden;
}
/* Fill the height rather than cap it: the 11 viewBoxes have very different
   proportions, so a shared max-height leaves the portrait drawings looking
   lost next to the landscape ones. max-width still reins in the wide ones. */
.pcard-art svg.dwg { height: 100%; width: auto; max-width: 100%; }
.pcard-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pcard-link { font: 400 20px var(--display); letter-spacing: .3px; }
/* stretches the product link over the whole card without nesting anchors */
.pcard-link::after { content: ''; position: absolute; inset: 0; }
.pcard-chip { font-size: 11.5px; color: var(--text2); }
.pcard-stat { display: none; }
.pcard-wa {
  position: relative; z-index: 2; align-self: flex-start;
  font: 600 10.5px var(--mono); letter-spacing: .6px;
  color: var(--text2); border-bottom: 1px solid var(--border);
}
.pcard-wa:hover { color: var(--accent); border-color: var(--accent); }
.pcard.is-featured .pcard-wa { color: var(--text3); border-color: rgba(255,255,255,.2); }
.pcard.is-featured .pcard-wa:hover { color: var(--accent2); border-color: var(--accent2); }

/* the featured card - portrait, charcoal, dark drawing */
.pcard.is-featured {
  grid-column: 1; grid-row: 1 / span 2;
  background: var(--dark); border-color: var(--dark);
  --zti-face: var(--dark); --zti-void: var(--dark2); --zti-ink: var(--bg);
  --zti-dim: var(--text3); --zti-dim-text: var(--text3); --zti-accent: var(--accent2);
  --zti-mono: var(--mono);
}
.pcard.is-featured .pcard-art { height: auto; flex: 1; padding: 10px 0; }
.pcard.is-featured .pcard-art svg.dwg { max-height: 340px; }
.pcard.is-featured .pcard-link { color: var(--bg); font-size: clamp(22px, 2.3vw, 30px); }
.pcard.is-featured .pcard-chip { color: var(--text3); }
.pcard.is-featured .pcard-stat {
  display: block; color: var(--accent2); font-size: 11px; letter-spacing: 1.2px;
}
.pcard.is-featured .pcard-stat b { font: 400 20px var(--display); }
.pcard.is-featured .card-type { color: var(--bg); font-size: clamp(28px, 3vw, 44px); }
.card-type {
  font: 400 22px/1.1 var(--display); text-align: center; letter-spacing: .5px;
}
/* On a white card, 22px orange is 2.96:1. The two-tone survives as a weight
   of colour rather than a hue; on the featured charcoal card the orange is
   7.85:1 and stays. */
.card-type em { font-style: normal; color: var(--text2); }
.pcard.is-featured .card-type em { color: var(--accent2); }

/* --- pre-written message band ------------------------------------------ */
.prewritten { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: center; }
.prewritten-msg { background: var(--dark2); color: var(--bg2); padding: 18px 22px; font-size: 14px; line-height: 1.7; }
.prewritten-msg .hl { color: var(--accent2); }
.prewritten-note { font-size: 13px; line-height: 1.6; color: var(--text2); }

/* --- breadcrumb -------------------------------------------------------- */
.crumb { display: flex; gap: 8px; padding-top: 16px; font: 500 12px var(--mono); color: var(--text2); }
.crumb a:hover { color: var(--accent); }

/* --- product page ------------------------------------------------------ */
.phero { background: var(--dark); color: var(--bg); }
.phero-in {
  display: grid; grid-template-columns: 1fr 460px; gap: 40px; align-items: center;
  padding-block: clamp(28px, 4vw, 52px);
}
.phero-h { font: 400 clamp(38px, 6vw, 84px)/.95 var(--display); }
.phero-lede { margin-top: 14px; max-width: 520px; font: 500 17px/1.5 var(--body); color: var(--bg2); }
/* Stays --text3: this one sits on charcoal, where --text3 is 5.47:1 and
   --text2 would be 2.38:1. The light-ground sweep must not reach it. */
.phero-absorbs { margin-top: 14px; font-size: 11px; letter-spacing: 1px; color: var(--text3); }
.phero-art svg.dwg { max-height: 360px; width: auto; margin-inline: auto; }
.phero-art .card-type { color: var(--bg); display: block; }
/* .card-type is used on three grounds: the white card, the featured charcoal
   card, and this charcoal product hero. The light-ground --text2 is 2.38:1
   here, so charcoal keeps the orange, which measures 7.85:1. */
.phero-art .card-type em { color: var(--accent2); }

.pbody { display: grid; grid-template-columns: 1fr 500px; gap: 44px; align-items: start; }
.pintro { font-size: 16px; line-height: 1.7; color: var(--text2); max-width: 60ch; }
/* A <fieldset> now, so the browser's default border/padding/inline-margin have
   to go. <legend> needs its own reset - it carries padding by default. */
.step { margin-top: 24px; border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.step-label { font-size: 11px; letter-spacing: 1.5px; color: var(--text2); margin-bottom: 10px; padding: 0; }
.step-opts { display: flex; flex-wrap: wrap; gap: 10px; }

/* Visually hidden, NEVER `display: none` - that would take the radio out of the
   focus order and the labels would be unreachable from a keyboard. */
.opt-input {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.opt {
  border: 2px solid var(--dark); padding: 12px 20px;
  font: 400 18px var(--display); letter-spacing: .4px;
  cursor: pointer; user-select: none;
}
.opt:hover { background: var(--bg2); }
/* The filled state means "you picked this". It used to be hardcoded onto the
   first option, which announced a default that did not exist (#30). */
.opt-input:checked + .opt { background: var(--dark); color: var(--bg); }
.opt-input:checked + .opt:hover { background: var(--dark2); }
/* The input is invisible, so its focus ring has to be drawn on the label. */
.opt-input:focus-visible + .opt { outline: 3px solid var(--accent); outline-offset: 2px; }
.step-note { margin-top: 8px; font-size: 13px; color: var(--text2); max-width: 56ch; }
.tbc-legend { margin-top: 26px; font-size: 12px; line-height: 1.8; color: var(--text2); max-width: 60ch; }

.wapanel { background: var(--dark); color: var(--bg); padding: 30px 32px; position: sticky; top: 20px; }
.wapanel-label { font-size: 11px; letter-spacing: 1.5px; color: var(--text3); margin-bottom: 14px; }
.wapanel-msg { background: var(--dark2); padding: 20px 22px; font-size: 14px; line-height: 1.75; color: var(--bg2); }
.wapanel .btn-wa { width: 100%; margin-top: 16px; }
.wapanel-alt { display: flex; gap: 10px; margin-top: 10px; }
.wapanel-alt .btn { flex: 1; color: var(--bg); border-color: var(--text2); font-size: 14px; padding: 15px 10px; }
.wapanel-hint { margin-top: 14px; font-size: 12.5px; line-height: 1.6; color: var(--text3); }

/* --- disclosure, tables, figures ---------------------------------------- */
.disclosure { border-top: 1px solid var(--border); }
.disclosure > summary {
  display: flex; align-items: center; gap: 14px; padding: 22px 0; cursor: pointer;
  list-style: none;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after {
  content: '+'; margin-left: auto; width: 42px; height: 42px; flex: none;
  border: 3px solid var(--dark); display: flex; align-items: center; justify-content: center;
  font: 400 22px var(--display);
}
.disclosure[open] > summary::after { content: '\2212'; }
.disclosure-h { font: 400 20px var(--display); letter-spacing: .4px; }
.disclosure-sub { font-size: 12.5px; color: var(--text2); }
.disclosure-body { padding-bottom: 40px; }

.spec-table { background: var(--surface); border: 1px solid var(--border); }
.spec-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--border); }
.spec-row:last-child { border-bottom: 0; }
.spec-key { font: 600 10px var(--mono); letter-spacing: 1px; color: var(--text2); flex: none; }
.spec-val { font: 600 13.5px var(--mono); text-align: right; }
.chip { display: inline-block; font: 500 11.5px var(--mono); padding: 1px 7px; border: 1px dashed var(--text3); color: var(--text2); }
/* .chip-tbc was referenced by the build and the product template but never
   defined here, so a [TBC] chip fell back to bare .chip. Defined explicitly so
   the class means something and the two states are distinguishable. */
.chip-tbc { border-color: var(--text3); color: var(--text2); }
/* --accent on --surface measures 2.96:1 and fails AA text. The orange dashed
   border still marks a VERIFY chip apart from a [TBC] one; the label text
   inside carries the word, so colour is not the only signal. */
.chip-verify { border-color: var(--accent); color: var(--text); }

/* Drain Cover Slabs is the page that decides whether this component works:
   it carries the most rows. Without a scroll port, three columns of mono
   spec text either crush or push the whole page sideways at 390px. The port is
   focusable so it can be scrolled from the keyboard, and it is the wrapper -
   never the table - that scrolls, so the table keeps its own semantics. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.size-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); min-width: 30rem; }
.size-table th, .size-table td { text-align: left; padding: 11px 20px; border-bottom: 1px solid var(--border); font-size: 13.5px; white-space: nowrap; }
.size-table th { font: 600 10px var(--mono); letter-spacing: 1px; color: var(--text2); text-transform: uppercase; }
.size-table td.mono { font-family: var(--mono); font-weight: 600; }
.size-table tr:last-child td { border-bottom: 0; }
/* Decoration at the current 7 rows; how you hold your place across a
   three-column read on a phone if a standard list ever grows past a
   screenful. Costs nothing either way, so it stays. */
.size-table tbody tr:nth-child(even) { background: var(--bg); }
.size-table tbody tr:hover { background: var(--bg2); }
.table-note { margin-top: 10px; font-size: 12.5px; color: var(--text2); line-height: 1.6; }

.fig { margin-top: 22px; background: var(--surface); border: 1px solid var(--border); }
.fig-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 13px 20px; border-bottom: 1px solid var(--border); }
.fig-kind { background: var(--dark); color: var(--bg); font: 600 10px var(--mono); letter-spacing: 1px; padding: 4px 8px; }
.fig-name { font: 400 19px var(--display); letter-spacing: .3px; }
.fig-drg { margin-left: auto; font-size: 11px; color: var(--text2); }
.fig-body { padding: 24px 30px; display: flex; justify-content: center; }
.fig-body svg.dwg { max-height: 340px; width: auto; }

.conflict { margin-top: 26px; border: 1px dashed var(--accent); padding: 18px 22px; background: var(--surface); }
/* 10.5px orange on white is 2.96:1. The block's dashed orange border still
   marks it out, and the heading says what it is - same resolution as
   .chip-verify under #19, so the two stay consistent. */
.conflict-head { font-size: 10.5px; letter-spacing: 1.4px; color: var(--text); margin-bottom: 10px; }
.conflict li { font-size: 13px; line-height: 1.7; color: var(--text2); padding-left: 16px; position: relative; }
.conflict li::before { content: '-'; position: absolute; left: 0; color: var(--accent); }

/* --- generic pages ------------------------------------------------------ */
/* Charcoal band, matching the product pages' .phero. The two-tone heading is
   the reason: #e87722 on the bone ground measures 2.62:1 and fails even the
   3:1 large-text threshold, and no orange in the locked palette passes on
   bone (--accent2 is lighter, so worse). On charcoal the same orange is
   5.92:1 and the two-tone survives intact - and the four static pages now
   open the same way the five product pages already did. Issue #22.
   Full-bleed, so the markup carries an inner .wrap. */
.page-head { background: var(--dark); }
.page-h { font: 400 clamp(36px, 5.6vw, 76px)/.96 var(--display); color: var(--bg); }
.page-lede { margin-top: 16px; max-width: 60ch; font-size: 17px; line-height: 1.65; color: var(--bg2); }
.prose { max-width: 900px; }
.prose p { margin-top: 10px; line-height: 1.75; color: var(--text2); max-width: 68ch; }
.note-inline { margin-top: 22px; font-size: 13px; color: var(--text2); }
.pending { border: 1px dashed var(--text3); background: var(--surface); padding: 22px 24px; }
.pending-head { font-size: 12px; letter-spacing: 1.2px; color: var(--text); margin-bottom: 10px; }
.pending-why { margin-top: 12px; font-size: 13px; color: var(--text2); }
.cta-inline { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* Contact section head, ported from the pre-rebuild page ("Get In Touch" /
   "Let's Build Together"). The legacy kicker was orange TEXT; orange on the
   bone ground is 2.62:1 and fails. The label moves to --text2 (6.53:1) and the
   orange becomes the rule beside it, where it is a graphic - the same trade
   .maplink and .ucard-to make. */
.contact-head { padding-top: clamp(30px, 4vw, 48px); max-width: 74ch; }
.kicker { display: flex; align-items: center; gap: 10px; font-size: 11px;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--text2); margin-bottom: 10px; }
.kicker::before { content: ''; width: 20px; height: 2px; background: var(--accent); flex: none; }
.contact-lede { margin-top: 12px; font-size: 17px; line-height: 1.65; color: var(--text2); }

/* Company info card - brand lockup then labelled NAP rows. Registration no. is
   new: a contractor's procurement checks it, and it was in the footer only. */
.cic-head { display: flex; align-items: center; gap: 12px; padding-bottom: 18px;
  margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.cic-name { font: 400 20px var(--display); letter-spacing: .5px; }
.cic-sub { font-size: 10px; letter-spacing: 2px; color: var(--text2); margin-top: 2px; }
.ci-item { padding: 14px 0; border-bottom: 1px solid var(--border); }
.ci-label { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text2); }
.ci-val { margin: 6px 0 0; font-size: 15px; line-height: 1.6; }
.ci-val .bigline { font-size: 17px; padding: 2px 0; }
.ci-val .addr { margin-bottom: 6px; }
/* Fixed height, so the iframe reserves its space before it loads and cannot
   shift the layout under it - the CLS budget is already spoken for (#16).
   The legacy embed carried `filter: grayscale(1)`; not repeated. On a page
   whose orange is deliberately scarce and always meaningful, a desaturated
   map reads as disabled rather than styled, and it costs a paint filter for
   nothing. */
.mapframe {
  display: block; width: 100%; height: 200px; margin-top: 14px;
  border: 1px solid var(--border);
}
.cic-wa { width: 100%; margin-top: 20px; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.contact-card { background: var(--surface); border: 1px solid var(--border); padding: 28px 30px; }
.contact-card .sec-h:first-child { margin-top: 0; }
.bigline { display: block; font-size: 20px; font-weight: 600; padding: 5px 0; }
.bigline:hover { color: var(--accent); }
.addr { line-height: 1.7; color: var(--text2); }
/* The orange stays on the underline, where it is a graphic and marks the link;
   the label itself moves off 2.96:1. */
.maplink { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--text); border-bottom: 1px solid var(--accent); }
.maplink:hover { border-bottom-width: 2px; }
.hours { font-size: 14px; line-height: 1.8; color: var(--text2); }
.enquiry-note { font-size: 13.5px; color: var(--text2); line-height: 1.6; }
.enquiry label { display: block; margin-top: 14px; font: 600 11px var(--mono); letter-spacing: 1px; color: var(--text2); }
/* select and textarea were unstyled until the fuller field set came across
   from the pre-rebuild form (#27) - the old builder was four text inputs. */
.enquiry input, .enquiry select, .enquiry textarea {
  display: block; width: 100%; margin-top: 6px; padding: 13px 14px;
  border: 1px solid var(--border); background: var(--bg); font: 500 15px var(--body); color: var(--text);
}
.enquiry textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.enquiry input:focus, .enquiry select:focus, .enquiry textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 0;
}
/* Two fields per row, as the legacy form paired them. Collapses at 560px with
   the rest of the page. */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row label { margin-top: 14px; }
/* The asterisk is orange as a MARK, not as the label - it sits beside text
   that carries the meaning, so it is never colour-alone. */
.req { color: var(--accent); }
.form-note { margin-top: 12px; font-size: 12px; line-height: 1.6; color: var(--text2); }
.enquiry-preview { display: block; margin-top: 18px; background: var(--dark2); color: var(--bg2); padding: 16px 18px; font-size: 13px; line-height: 1.7; }
.enquiry .btn-wa { width: 100%; margin-top: 14px; }
.enquiry-alt { margin-top: 12px; font-size: 13px; color: var(--text2); }
/* Orange moves to the underline, where it is a graphic and still marks the
   link. The address itself was 2.96:1. */
.enquiry-alt a { color: var(--text); border-bottom: 1px solid var(--accent); }

/* --- applications + services (migrated from the pre-rebuild page) -------- */
/* Hairline cards on the bone ground. Deliberately quieter than .pcard: these
   carry no drawing, no price and no action, so they must not compete with the
   product grid above them for the same eye. */
.uses { padding-block: clamp(30px, 4vw, 48px); }
/* Title and lede as one left-aligned block. They were a .sec-head plus a
   separate lede, and .sec-head is space-between - so the note flew to the far
   right and left a void across the top of the section. */
.uses-head { max-width: 74ch; margin-bottom: 26px; }
.uses-lede { margin-top: 12px; font-size: 17px; line-height: 1.65; color: var(--text2); }
.ugrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ucard {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  padding: 20px 22px; transition: border-color .15s;
}
.ucard:hover { border-color: var(--accent); }
/* The eight application icons, carried across from the pre-rebuild page. They
   ship their own rounded --bg2 plate inside the 80x80 viewBox, so the plate is
   part of the drawing rather than a container background - which is why they
   need no wrapper styling beyond a size. `svg.dwg` is width:100% by default
   (correct for a full-width schema drawing, wrong for a 60px icon). */
.ucard-icon { display: block; width: 60px; margin-bottom: 14px; }
.ucard-icon svg.dwg { width: 60px; height: 60px; }
.ucard-h { font: 400 19px var(--display); letter-spacing: .3px; margin-bottom: 8px; }
.ucard p { font-size: 14px; line-height: 1.65; color: var(--text2); }
/* The routing line. These blocks name real products - u-drains, catch pits,
   kerbs - and linked nowhere, which on an SEO engagement is eight dead ends on
   the highest-traffic page. `margin-top: auto` pins it to the card floor so the
   links align across a row whose descriptions wrap to different depths. */
.ucard-to {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.ucard-to a {
  font-size: 11.5px; letter-spacing: .3px; color: var(--text);
  border-bottom: 1px solid var(--accent);
}
.ucard-to a:hover { color: var(--accent); border-bottom-width: 2px; }

/* --- services ------------------------------------------------------------ */
/* Three items, no card chrome. This sat directly under the eight application
   cards; as a second .ugrid it read as one undifferentiated field of eleven
   boxes. A --bg2 band was the other option and is wrong here - .callband is
   already --bg2 and follows immediately, so the two would merge into one sand
   block through the footer. */
.svcs { padding-block: clamp(30px, 4vw, 48px); }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.svc { border-top: 2px solid var(--dark); padding-top: 16px; }
/* Line icons, 44x44 viewBox, already drawn in var(--accent) on the legacy
   page - the one part of that markup that was already token-driven. These
   replaced the 01/02/03 numerals: the numerals were a stand-in I invented
   while the real icons sat unused in public/images. */
.svc-icon { display: block; width: 44px; margin-bottom: 12px; }
.svc-icon svg.dwg { width: 44px; height: 44px; }
.svc-h { font: 400 20px var(--display); letter-spacing: .3px; margin-bottom: 8px; }
.svc p { font-size: 14px; line-height: 1.65; color: var(--text2); max-width: 46ch; }

/* --- process flow -------------------------------------------------------- */
/* Charcoal band. The system uses charcoal as punctuation between light
   sections - hero, featured card, product hero, WhatsApp panel, footer - so a
   dark band here is the existing vocabulary rather than a new device.
   The connecting rule is a ::before on the list, not per-step borders, so it
   cannot fall out of alignment when a step's text wraps to a different height.
   No scroll animation: DESIGN.md rules that out for this system. */
.flow { background: var(--dark); color: var(--bg2); }
.flow-in { padding-block: clamp(38px, 5vw, 64px); }
.flow-head .sec-title { color: var(--bg); }
.flow-head .sec-note { color: var(--text3); }
.flowsteps {
  position: relative; list-style: none; margin-top: 30px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.flowstep { position: relative; }
/* The connector belongs to each step, not to the list: one rule spanning the
   whole row has to guess where the first and last numbers sit, and the numbers
   are left-aligned in their columns rather than centred, so a percentage inset
   overshoots the last step. Per-step, it runs from this number into the gap and
   stops at the next column - self-aligning at any column count. */
.flowstep::after {
  content: ''; position: absolute; top: 15px; left: 40px; right: -22px;
  height: 1px; background: rgba(255,255,255,.18);
}
.flowstep:last-child::after { display: none; }
.flowstep-n {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-bottom: 14px;
  background: var(--accent); color: var(--dark);
  font-size: 12px; font-weight: 600; letter-spacing: .5px;
}
.flowstep-h { font: 400 20px var(--display); letter-spacing: .3px; color: var(--bg); margin-bottom: 8px; }
.flowstep p { font-size: 14px; line-height: 1.65; color: var(--text3); }
.flow-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* --- product category overview (/products) ------------------------------- */
/* Alternating drawing / body rows. This is the page's substance: the grid
   above it is a visual index, this is what lets a buyer choose without
   opening five pages. */
.cats { padding-block: clamp(30px, 4vw, 48px); }
.cat {
  display: grid; grid-template-columns: 300px 1fr; gap: 34px; align-items: center;
  padding: 30px 0; border-top: 1px solid var(--border);
}
.cat:last-child { border-bottom: 1px solid var(--border); }
.cat-figure { display: flex; align-items: center; justify-content: center;
  background: var(--bg2); border: 1px solid var(--border); padding: 22px; min-height: 200px; }
.cat-art { display: flex; align-items: center; justify-content: center; width: 100%; }
.cat-art svg.dwg { width: 100%; height: auto; max-height: 190px; }
.cat-art-type { font: 400 26px/1.15 var(--display); letter-spacing: .4px; text-align: center; }
.cat-art-type em { font-style: normal; color: var(--accent); }
.cat-index { font-size: 11px; letter-spacing: 1.4px; color: var(--text3); margin-bottom: 8px; }
.cat-h { font: 400 clamp(24px, 2.6vw, 32px) var(--display); letter-spacing: .3px; margin-bottom: 10px; }
.cat-h a:hover { color: var(--accent); }
.cat-lede { max-width: 62ch; line-height: 1.7; color: var(--text2); }
.cat-absorbs { margin-top: 10px; font-size: 12px; line-height: 1.6; color: var(--text3); }
.cat-specs { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 16px; }
.cat-spec dt { font: 500 10px var(--mono); letter-spacing: 1.2px; color: var(--text3); }
.cat-spec dd { margin-top: 3px; font-size: 14px; font-weight: 600; }
.cat-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* --- the range: landing strip + grouped /products index ------------------ */

/* The landing strip. The grid above it is five PAGES; this names all thirteen
   LINES. Deliberately quiet - it sits under the grid and must not compete with
   it - but it is static markup, so every line is in the crawled HTML on every
   request rather than behind the featured-slot rotation. */
.rstrip { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); }
.rstrip-h { font-size: 10px; font-weight: 600; letter-spacing: 1.6px; color: var(--text3); margin-bottom: 10px; }
.rstrip-row { display: grid; grid-template-columns: 116px 1fr; gap: 4px 20px; padding: 9px 0; }
.rstrip-row + .rstrip-row { border-top: 1px solid var(--border); }
.rstrip-label { font-size: 10px; font-weight: 600; letter-spacing: 1.4px; color: var(--text3); padding-top: 3px; }
.rstrip-label:hover { color: var(--text); }
.rstrip-lines { display: flex; flex-wrap: wrap; }
.rstrip-lines a { font-size: 13.5px; line-height: 1.6; color: var(--text2); }
/* --accent measures 2.96:1 on this ground (#22) and these are 13.5px links, so
   the hover darkens and underlines rather than reaching for orange. */
.rstrip-lines a:hover { color: var(--text); text-decoration: underline; }
.rstrip-lines a:not(:last-child)::after {
  content: '·'; margin: 0 9px; color: var(--text3); text-decoration: none;
}

/* Group headings on /products. Numbering restarts inside each group, so "01"
   means first in DRAINAGE - which is true - rather than first of thirteen,
   which nobody is counting. */
.rgroup { margin-top: 42px; }
.rgroup:first-child { margin-top: 0; }
.rgroup-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding-bottom: 8px; }
.rgroup-h { font: 400 clamp(20px, 2.2vw, 26px) var(--display); letter-spacing: 1px; }
.rgroup-note { font-size: 11px; letter-spacing: .6px; color: var(--text3); }

/* Companion lines - real products bought on another line's page. A compact row
   rather than a second .cat block: padding eight of these out with specs they
   do not have would read as eight thin product pages. */
/* Three columns matching .cat above it - empty, body, meta - so a companion
   line sits under the text column of the page it belongs to. Left at the page
   edge it was LESS indented than the pages it hangs off, which read as more
   important rather than subordinate. */
.rline {
  display: grid; grid-template-columns: 300px 1fr 250px; gap: 10px 34px; align-items: start;
  padding: 20px 0; border-top: 1px solid var(--border);
}
.rline-body { grid-column: 2; }
.rgroup > .rline:last-child { border-bottom: 1px solid var(--border); }
.rline-h { font: 600 16.5px var(--body); letter-spacing: .2px; margin-bottom: 6px; }
.rline-h a:hover { color: var(--accent); }
.rline-note { max-width: 62ch; font-size: 14px; line-height: 1.65; color: var(--text2); }
.rline-meta { display: flex; flex-direction: column; gap: 6px; }
.rline-chip { font-size: 12px; font-weight: 600; letter-spacing: .4px; }
.rline-where { font-size: 11.5px; line-height: 1.5; color: var(--text3); }
.rline-where a { color: var(--text2); text-decoration: underline; }
.rline-where a:hover { color: var(--text); }
/* Companion lines had no CTA at all - eight of the thirteen, reachable only by
   opening the page they are sold on and using its button. Same weight as
   `.pcard-wa`: a text link, not a button, so it does not compete with the
   SIZES & SPECS action on the full blocks above it. */
.rline-wa {
  align-self: start; margin-top: 2px;
  font: 600 11.5px var(--mono); letter-spacing: .6px;
  color: var(--text); border-bottom: 2px solid var(--accent); padding-bottom: 2px;
}
.rline-wa:hover { background: var(--accent); color: var(--dark); }

/* --- group pages and the /products group blocks -------------------------- */

/* Sits inside .page-head, which is charcoal. --accent2 is the dark-colourway
   orange at 7.85:1 there; --accent would be 5.92:1 and is the light-ground
   token (#22). */
.page-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 1.6px; color: var(--accent2); margin-bottom: 14px; }
.gintro { padding-top: 6px; }

/* One block per group on /products. Same figure/body rhythm as .cat so the hub
   and the group pages read as one system - but a group has no specs of its
   own, only members, so the spec list is replaced by the line list. */
.gblock {
  display: grid; grid-template-columns: 300px 1fr; gap: 34px; align-items: start;
  padding: 32px 0; border-top: 1px solid var(--border);
}
.gblock:last-child { border-bottom: 1px solid var(--border); }
.gblock-intro { margin-top: 12px; max-width: 62ch; font-size: 14px; line-height: 1.7; color: var(--text2); }
.gblock-lines {
  list-style: none; margin: 20px 0 0; padding: 0;
  border-top: 1px solid var(--border);
}
.gblock-lines li {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 2px 18px; padding: 9px 0; border-bottom: 1px solid var(--border);
}
.gblock-lines a { font-size: 14.5px; font-weight: 600; }
.gblock-lines a:hover { color: var(--accent); }
.gblock-chip { font-size: 11.5px; color: var(--text3); }

/* --- 404 recovery page --------------------------------------------------- */
/* This page used .prose (a 900px cap, so a narrow column with the right-hand
   half of the viewport empty) plus .foot-links - a component built for the
   CHARCOAL footer - on the bone ground. Its hover paints --accent2, the
   dark-colourway orange, which on this ground is worse than --accent's already
   failing 2.96:1. It was the one page issue #22's contrast pass never reached.
   Issue #26.

   The links follow the pattern #22 established and .maplink, .enquiry-alt a
   and .ucard-to a already use: the LABEL stays --text, and the orange lives on
   the underline, where it is a graphic rather than text and carries no
   contrast requirement. Swapping --accent2 for --accent would have traded one
   AA failure for another. */
.lost { padding-block: clamp(30px, 4vw, 56px); }
.lost-grid { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 34px; align-items: start; }
.lost-h {
  font: 400 20px var(--display); letter-spacing: .3px;
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--dark);
}
.lost-links { display: flex; flex-direction: column; gap: 10px; }
.lost-links a {
  font-size: 14.5px; color: var(--text);
  border-bottom: 1px solid var(--border); padding-bottom: 3px;
}
.lost-links a:hover { border-bottom-color: var(--accent); border-bottom-width: 2px; }
.lost-talk p { font-size: 14.5px; line-height: 1.7; color: var(--text2); max-width: 46ch; }
.lost-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.lost-hours { margin-top: 16px; font-size: 12px; line-height: 1.7; color: var(--text2); }

/* --- quote band (ported from the pre-rebuild page's CTA band) ------------- */
/* Named .quoteband, not .ctaband: .callband already exists two rules below and
   the two names differ by one letter.

   The legacy band was #fff on --accent - 2.96:1 for the heading, 1.68:1 for
   the body. Both fail AA, and 2.96 misses even the 3:1 large-text threshold.
   Charcoal on the same orange is 5.92:1, which is what issue #22 settled for
   .btn-wa. The button is .btn-dark (--bg on --dark, 15.55:1). */
.quoteband { background: var(--accent); }
.quoteband-in {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 24px; padding-block: clamp(34px, 4.5vw, 56px);
}
.quoteband-h { font: 400 clamp(28px, 3.6vw, 46px)/1.05 var(--display); letter-spacing: .3px; color: var(--text); }
.quoteband-text p { margin-top: 12px; max-width: 48ch; font-size: 15px; line-height: 1.65; color: var(--text); }

/* --- call band + footer -------------------------------------------------- */
.callband { background: var(--bg2); }
.callband-in { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; padding-block: 24px; }
.callband-line { font: 400 clamp(19px, 2.2vw, 26px) var(--display); letter-spacing: .3px; }
.callband-acts { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.callband-tel { font-size: 16px; font-weight: 600; }
.callband-tel:hover { color: var(--accent); }

.foot { background: var(--dark); color: var(--text3); }
.foot-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 30px; padding-block: 40px; }
.foot-brand { display: flex; align-items: center; gap: 12px; }
.foot-word { font: 400 20px var(--display); color: var(--bg); letter-spacing: .5px; }
.foot-sub { font-size: 10px; letter-spacing: 2px; margin-top: 2px; }
.foot-h { font: 600 11px var(--body); letter-spacing: 1.5px; color: var(--bg); text-transform: uppercase; margin-bottom: 12px; }
.foot-links { display: flex; flex-direction: column; gap: 8px; }
.foot-links a, .foot-nap a { font-size: 13.5px; }
.foot-links a:hover, .foot-nap a:hover { color: var(--accent2); }
.foot-nap address { font-size: 13.5px; line-height: 1.7; margin-bottom: 8px; }
.foot-nap a { display: block; }
.foot-hours { font-size: 12px; line-height: 1.7; margin-top: 10px; }
.foot-bot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  padding-block: 18px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12px; }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .pbody { grid-template-columns: 1fr; }
  .wapanel { position: static; }
  .phero-in { grid-template-columns: 1fr; }
  .phero-art { order: -1; max-width: 420px; }
  .foot-in { grid-template-columns: 1fr 1fr; }
  /* Stacked: the drawing leads, the same way .phero-art does on product pages. */
  .cat { grid-template-columns: 1fr; gap: 20px; }
  .cat-figure { max-width: 420px; }
  /* .cat has lost its figure column, so there is nothing left to indent under. */
  .rline { grid-template-columns: 1fr 250px; }
  .rline-body { grid-column: 1; }
  .gblock { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 860px) {
  .nav-mid, .nav-tel { display: none; }
  .burger { display: block; }
  .mobnav { display: flex; }
  .pgrid { grid-template-columns: repeat(2, 1fr); }
  /* Stacked, the featured card goes full width and keeps its charcoal ground
     and larger type. It does NOT move to the front: rotation must leave DOM
     order untouched, and reordering with `order` would put visual order and
     focus order in conflict for a keyboard user. Position is not what marks
     it out here - ground, width and height are. */
  .pcard.is-featured { grid-column: 1 / -1; grid-row: auto; }
  /* Without this the featured card is SHORTER than an ordinary one: its art is
     `flex: 1` against an auto row, so once the two-row span is gone the drawing
     collapses to its content while every other card holds a fixed 170px. It
     measured 235px against 278px - featured meaning visibly less, not more. */
  .pcard.is-featured .pcard-art { min-height: 240px; }
  .placards { grid-template-columns: repeat(2, 1fr); margin-top: -40px; }
  .prewritten { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .ugrid { grid-template-columns: repeat(2, 1fr); }
  .svc-grid { grid-template-columns: 1fr; gap: 20px; }
  /* Two link columns side by side; the CTA block spans beneath them rather
     than wrapping into a narrow third cell. */
  .lost-grid { grid-template-columns: 1fr 1fr; }
  .lost-talk { grid-column: 1 / -1; }
  .flowsteps { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  /* Two rows of two: a connector out of the right-hand step points at nothing
     on the row below, so drop them all rather than draw half a link. */
  .flowstep::after { display: none; }
  /* The group label stops being a left-hand column and becomes a heading over
     its own lines - at 116px it was wrapping to three words on two rows. */
  .rstrip-row { grid-template-columns: 1fr; gap: 6px; }
  .rline { grid-template-columns: 1fr; gap: 12px; }
  .rline-meta { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; }
}

@media (max-width: 560px) {
  .pgrid { grid-template-columns: 1fr; }
  .placards { gap: 10px; }
  .hero-acts .btn { width: 100%; }
  .foot-in { grid-template-columns: 1fr; }
  .spec-row { flex-direction: column; gap: 4px; }
  .spec-val { text-align: left; }
  .ugrid { grid-template-columns: 1fr; }
  .flowsteps { grid-template-columns: 1fr; gap: 22px; }
  .flow-acts .btn, .cat-acts .btn, .lost-acts .btn { width: 100%; }
  .lost-grid { grid-template-columns: 1fr; }
  .quoteband-in .btn { width: 100%; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* The video element stays in place so its poster keeps rendering - hiding it
     would remove the poster too. Playback is stopped in js/site.js. */
  * { animation: none !important; transition: none !important; }
}