/* ==========================================================================
   Royal Construction and Roofing

   The organising idea is roof pitch. A roofer is the one trade where geometry
   is literally the product, so the page is built on a 6/12 pitch (26.57deg),
   the most common residential roof angle in the US. It sets the hatch texture,
   the kicker ticks and the corner notch on promoted cards.

   A true 26.57deg edge across a 1280px page would eat 640px of vertical space,
   so the full-width transitions use a shallow 2-3deg and the honest pitch shows
   at component scale, where it can actually be read.

   2026-09-23 REBRAND (this branch). The client's new artwork is red, black and
   white -- the navy and the gold of the previous redesign are gone, and the
   lockup now reads "Royal Construction and Roofing". The client also supplied
   a marketing composite they are attached to (four people in red in front of
   a house, a checklist of services, five badges, a phone band). The poster
   ships whole, in the hero and on About, and its ingredients are ALSO carried
   as real HTML so nothing in it is image-only: the checklist as a ticker under
   the hero, the badges as red discs, the phone band as the closing statement
   it already was.

   Type follows the artwork: it is heavy, condensed signage lettering, so the
   display face is Barlow Condensed and the body stays Barlow -- one family in
   two widths, which is also one request fewer than Archivo + Barlow was.
   ========================================================================== */

:root {
  /* Brand -- red, black, white, sampled from the poster so the site's red
     sits next to the poster's without a visible step: --red is its badge
     discs and lettering, --red-dark its phone band, --red-bright its
     checkmarks (lifted a touch so it clears 4.5:1 on black for small text).
     Pure #000 is never used as a field: the blacks are warm-neutral so
     photographs and red sit on them without the screen looking switched off. */
  --red: #c00408;                    /* white on it: 6.4:1 */
  --red-dark: #8e0201;
  --red-deep: #5e0101;
  --red-bright: #f4333b;             /* on --black: 4.8:1, passes for body text */
  --black: #121417;
  --black-deep: #0a0b0d;
  --ink: #1a1c1f;
  --body: #3a3d42;
  --muted: #62666d;
  --on-black: #d8d9dc;               /* body text on a black field */
  --on-black-dim: #b3b5ba;
  --line: #e4e5e8;
  --tint: #f4f4f5;
  --paper: #ffffff;

  /* 6/12 roof pitch. Everything angled on this page derives from it. */
  --pitch: 26.57deg;
  --pitch-hatch: 116.57deg;          /* perpendicular, for hatching */

  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --text: Barlow, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type -- real range at both ends. Condensed faces need more size to carry
     the same weight, so every step is up on the previous scale.
     --f-statement appears ONCE per page. */
  --f-micro: .78rem;
  --f-small: .92rem;
  --f-body: 1.0625rem;
  --f-lede: clamp(1.1rem, 1.6vw, 1.3rem);
  --f-ui: 1.05rem;                   /* buttons, tabs, the ticker: one control size */
  --f-h4: 1.2rem;                    /* small headings: footer, contact cards, badges */
  --f-h3: clamp(1.3rem, 1.8vw, 1.6rem);
  --f-h2: clamp(2.1rem, 4.4vw, 3.4rem);
  --f-h1: clamp(3rem, 8vw, 6rem);
  --f-statement: clamp(2.75rem, 12vw, 9.5rem);   /* 2.75rem: the phone number clears a 320px phone with room */

  /* Rhythm -- three tiers plus asymmetric variants that group sections */
  --r-tight: clamp(2rem, 4vw, 3rem);
  --r-normal: clamp(4rem, 8vw, 6rem);
  --r-loud: clamp(6rem, 13vw, 9.5rem);

  --gutter: clamp(1rem, 4vw, 3rem);

  /* Radius rule: structure is square, controls are slightly soft. Held
     everywhere, so the difference actually tells you what is interactive. */
  --radius-control: 3px;

  /* Minimum touch target. WCAG 2.5.5 asks for 44px. */
  --tap: 44px;

  /* Shadow system. Three, each meaning something:
       offset  -> promoted / structural, a hard architectural edge
       lift    -> interactive, responds to you
       (none)  -> everything else gets a hairline and nothing more          */
  --shadow-offset: 10px 10px 0 var(--black);
  --shadow-offset-red: 10px 10px 0 var(--red);
  --shadow-offset-sm: 5px 5px 0 var(--black);
  --shadow-lift: 0 1px 2px rgb(10 11 13 / .18), 0 12px 32px -14px rgb(10 11 13 / .45);
}

*, *::before, *::after { box-sizing: border-box; }

/* scroll-padding keeps anchor targets (the skip link's #main, the closing
   band's #form-contact) clear of the sticky header, which is 91-107px tall. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 7rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font: 400 var(--f-body)/1.62 var(--text);
}

h1, h2, h3, h4, .kicker, .idx-n, .btn, .div-tab, .band-phone, .form-h, .photo-gap-label, .ticker {
  font-family: var(--display);
}
h1, h2, h3, h4 { color: var(--black); line-height: 1.02; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: var(--f-h1); letter-spacing: -.01em; font-weight: 800; text-wrap: balance; }
h2 { font-size: var(--f-h2); letter-spacing: -.005em; font-weight: 700; text-wrap: balance; }
h3 { font-size: var(--f-h3); }
p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--red-dark); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--red); outline-offset: 2px; border-radius: 2px;
}
/* The red ring is 2.96:1 on the black fields, just under the 3:1 WCAG asks of
   a focus indicator, so on every black field it goes white. The red band has
   its own override further down. */
.topbar :focus-visible, .hero :focus-visible, .proof :focus-visible, .sec-dark :focus-visible,
.banner :focus-visible, .site-foot :focus-visible, .ticker :focus-visible { outline-color: #fff; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--black); color: #fff; padding: .75rem 1.25rem; }
.skip:focus { left: 0; }

/* ── Containers: four widths, so the page has more than one silhouette ────── */
.wrap { width: 100%; max-width: calc(68rem + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide   { max-width: calc(82rem + var(--gutter) * 2); }
.wrap-narrow { max-width: calc(46rem + var(--gutter) * 2); }

/* ── Rhythm ──────────────────────────────────────────────────────────────── */
.sec { padding-block: var(--r-normal); }
.sec-tight   { padding-block: var(--r-tight); }
.sec-loud    { padding-block: var(--r-loud); }
.sec-leads   { padding-block: var(--r-normal) var(--r-tight); }
.sec-follows { padding-block: var(--r-tight) var(--r-normal); }
.sec-rule { border-top: 1px solid var(--line); }
.sec-dark { background: var(--black); color: var(--on-black); }
.sec-dark h2, .sec-dark h3, .sec-dark h4 { color: #fff; }

/* ── Blueprint hatch: the one texture, at roof pitch, used three times ────── */
.hatch { position: relative; isolation: isolate; }
.hatch::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: repeating-linear-gradient(var(--pitch-hatch), currentColor 0 1px, transparent 1px 10px);
  opacity: .06;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 68%, transparent);
}
.hatch-strong::before { opacity: .1; }

/* ── Top bar + header ────────────────────────────────────────────────────── */
.topbar { background: var(--black); color: var(--on-black-dim); font-size: var(--f-small); }
.topbar-in { display: flex; flex-wrap: wrap; gap: .4rem 1.75rem; padding-block: .55rem; align-items: center; }
.topbar-item { display: inline-flex; align-items: center; gap: .45rem; color: inherit; text-decoration: none; }
.topbar-item:hover { color: #fff; }
.topbar .ic { width: 15px; height: 15px; color: var(--red-bright); flex: none; }

/* The header stays white: the lockup's lettering is black and only reads on a
   light ground. The new lockup is squarer than the old one (394x282 against
   400x173), so it is narrower here and the header is a little taller. */
.site-head { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid var(--line); }
.head-in { display: flex; align-items: center; gap: 1.5rem; padding-block: .5rem; }
.brand { display: block; flex: none; }
.brand-mark { width: clamp(104px, 10vw, 126px); height: auto; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: clamp(.9rem, 1.9vw, 1.9rem); list-style: none; margin: 0; padding: 0; }
.nav a { color: var(--black); text-decoration: none; font-size: var(--f-small); font-weight: 500; padding: .4rem 0; display: block; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a:hover { color: var(--red); }
.nav a[aria-current="page"] { color: var(--red); border-bottom-color: var(--red); }
.head-cta { flex: none; }
/* Between the burger breakpoint and ~960px the seven links, the logo and the
   button add up to more than the row; the button is what gives way. */
@media (max-width: 60rem) { .head-cta { display: none; } }
.burger { display: none; }

/* ── Buttons: soft radius marks the things you can press ─────────────────── */
/* Condensed, uppercase, tracked: the artwork's "CALL ROYAL" lettering. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.5rem; border-radius: var(--radius-control); border: 2px solid transparent;
  font-size: var(--f-ui); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.1;
  text-decoration: none; cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, box-shadow .18s, translate .18s;
}
.btn .ic { width: 18px; height: 18px; }
.btn-primary { background: var(--red); color: #fff; border-color: var(--red); }
.btn-primary:hover { background: var(--red-dark); border-color: var(--red-dark); box-shadow: var(--shadow-lift); translate: 0 -1px; }
.btn-outline { background: transparent; color: var(--black); border-color: var(--line); }
.btn-outline:hover { border-color: var(--black); }
.btn-ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.35); }
.btn-ghost:hover { background: rgba(255,255,255,.18); }
.btn-block { width: 100%; }
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.cta-row.center { justify-content: center; }
/* On a phone the pair stacks, and two buttons sized to their own text leave a
   ragged right edge down the column. Stretch them to match instead. */
@media (max-width: 30rem) {
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; }
}

/* ── Kicker: the tick is a pitched roofline, not a flat rule ─────────────── */
.kicker {
  font-size: .85rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--red); margin: 0 0 .75rem;
  display: flex; align-items: center; gap: .7rem;
}
.kicker::after {
  content: ""; width: 2.4rem; height: .5rem; flex: none;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: skewX(calc(var(--pitch) * -1)); opacity: .55;
}
.kicker.light { color: var(--red-bright); }   /* the accent on black is the brighter red */

.sec-head { max-width: 46rem; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.lede { font-size: var(--f-lede); color: var(--body); line-height: 1.6; }
.center { text-align: center; }
.mt { margin-top: 1.5rem; }

/* ── Hero: the poster, on black ──────────────────────────────────────────── */
/* Copy on the left, the client's composite on the right, whole and uncropped
   -- every edge of it carries something (logo, checklist, phone band), so it
   is never object-fit and never faded, just sat on the field with the red
   offset that marks promoted things everywhere else on the site. On a phone
   it goes first, so the family is the first thing seen. */
.hero { position: relative; background: var(--black); color: #fff; overflow: hidden; }
.hero-in {
  position: relative; z-index: 1;
  display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center;
  padding-block: clamp(2rem, 6vw, 4.5rem) 0;
}
.hero h1 { color: #fff; }
.hero-lede { color: var(--on-black); font-size: var(--f-lede); max-width: 34rem; }
.hero-lede strong { color: #fff; font-weight: 600; }
.hero .cta-row { margin-top: 2rem; }
.hero-media { margin: 0 10px 10px 0; }        /* room for the offset shadow */
.hero-media img { width: 100%; height: auto; display: block; box-shadow: var(--shadow-offset-red); }
@media (min-width: 900px) {
  .hero-in { grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); }
}
@media (max-width: 899px) {
  .hero-media { order: -1; margin: 0 6px 6px 0; }
}

/* Quick request strip at the hero's foot: the lead form stays above the
   fold without taking the photograph's column. */
.hero-quick { position: relative; z-index: 1; padding-block: clamp(1.75rem, 4vw, 3rem) clamp(2.25rem, 5vw, 3.75rem); }
.hero-quick .form { box-shadow: var(--shadow-offset-red); }

/* ── Ticker: the artwork's checklist of services, on the move ───────────── */
/* Ships as a static, wrapped list. site.js promotes it to a moving one
   (`is-live`) only when scripting runs and the reader has not asked for
   reduced motion, and adds a Pause button at the same time -- WCAG 2.2.2
   wants a control for anything that moves for more than five seconds, and a
   hover pause is not one. Live, the track holds four copies of the list (three
   aria-hidden) and slides left by half its width, which is exactly two lists,
   so the loop never shows a seam even on a 2560px screen. */
.ticker { position: relative; background: var(--red); color: #fff; overflow: hidden; border-block: 1px solid rgb(0 0 0 / .18); }
.ticker-track { display: flex; }
.ticker ul { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0; padding: .35rem var(--gutter); }
.ticker ul[aria-hidden] { display: none; }
.ticker li {
  display: flex; align-items: center; gap: .6rem; white-space: nowrap;
  padding: .35rem 1.6rem .35rem 0;
  font-size: var(--f-ui); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.ticker .ic { width: 17px; height: 17px; flex: none; stroke-width: 2.4; }
.ticker-pause { display: none; }
.ticker.is-live .ticker-track { width: max-content; animation: ticker 120s linear infinite; padding-right: 5.5rem; }
.ticker.is-live ul { flex-wrap: nowrap; padding: .35rem 0; }
.ticker.is-live ul[aria-hidden] { display: flex; }
.ticker.is-live:hover .ticker-track, .ticker.is-live:focus-within .ticker-track,
.ticker.is-paused .ticker-track { animation-play-state: paused; }
.ticker.is-live .ticker-pause {
  display: inline-flex; align-items: center; justify-content: center;
  position: absolute; top: 50%; right: .6rem; translate: 0 -50%;
  min-width: var(--tap); min-height: 2.25rem; padding: 0 .8rem;
  background: var(--black); color: #fff; border: 2px solid rgba(255,255,255,.55); border-radius: var(--radius-control);
  font-family: var(--display); font-size: var(--f-ui); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
}
.ticker.is-live .ticker-pause:hover { border-color: #fff; }
@keyframes ticker { to { translate: -50% 0; } }

/* ── Proof band: the client's real work, full-bleed, early ───────────────── */
.proof { background: var(--black); color: var(--on-black); padding-block: clamp(2.5rem, 5vw, 4rem); }
.proof-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.proof-head h2 { color: #fff; margin: 0; }
.proof-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: .6rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; scrollbar-width: thin; }
.proof-strip figure { margin: 0; scroll-snap-align: start; }
.proof-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.proof-strip figure:nth-child(3n+1) img { aspect-ratio: 3 / 4; }

/* ── Cards: the radius/shadow rule, held ─────────────────────────────────── */
.card { background: #fff; border: 1px solid var(--line); padding: clamp(1.25rem, 2.4vw, 1.9rem); }
.card-promoted { box-shadow: var(--shadow-offset); border-color: var(--black); }
.sec-dark .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }

/* ── Testimonials, merged into the trust section ─────────────────────────── */
/* Stars are brand red rather than the usual amber: the palette has no yellow,
   and red on white clears 5:1 for the glyphs. */
.stars { color: var(--red); letter-spacing: .1em; }
.sec-dark .stars { color: var(--red-bright); }
.reviews-line { color: var(--body); margin-bottom: 2rem; }
.quote { margin: 0; }
.quote blockquote { margin: .6rem 0 .9rem; font-size: var(--f-lede); line-height: 1.5; color: var(--black); }
.sec-dark .quote blockquote { color: #fff; }
.quote figcaption { font-size: var(--f-small); color: var(--muted); font-weight: 500; }
.sec-dark .quote figcaption { color: var(--on-black-dim); }

/* ── Gallery ─────────────────────────────────────────────────────────────── */
.gallery { display: grid; gap: clamp(.6rem, 1.4vw, 1rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.shot { margin: 0; overflow: hidden; background: var(--tint); }
.shot img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .4s ease, filter .4s ease; filter: saturate(.92); }
.shot:hover img { transform: scale(1.04); filter: saturate(1.05); }
@media (min-width: 700px) {
  .shot:nth-child(7n+1) { grid-row: span 2; }
  .shot:nth-child(7n+1) img { aspect-ratio: 1 / 2.06; }
}

/* ── Forms: promoted, so they carry the hard offset ──────────────────────── */
.form { background: #fff; border: 1px solid var(--black); padding: clamp(1.35rem, 3vw, 2.1rem); box-shadow: var(--shadow-offset-red); }
.sec-dark .form { box-shadow: var(--shadow-offset-red); background: #fff; }
.form-h { margin-bottom: .25em; font-size: var(--f-h3); }
.form-lede { font-size: var(--f-small); margin-bottom: 1.25rem; color: var(--muted); }
.field { margin-bottom: .9rem; }
.field label { display: block; font-size: var(--f-small); font-weight: 500; color: var(--black); margin-bottom: .35rem; }
.req { color: var(--red); }
/* The border is the only thing that shows where a field is (white on white),
   so it has to clear 3:1 on its own: #858990 is 3.5:1. */
.field input, .field textarea {
  width: 100%; padding: .7rem .85rem; font: inherit; font-size: var(--f-small);
  border: 1px solid #858990; border-radius: var(--radius-control); background: #fff; color: var(--ink);
}
.field ::placeholder { color: var(--muted); opacity: 1; }
/* iOS Safari zooms the viewport when a field smaller than 16px takes focus,
   and the reader then has to pinch back out to see the rest of the form. The
   fields are 0.92rem by design, so lift them to exactly 16px where a touch
   keyboard is what will open -- the type looks near-identical and the page
   stops jumping. Applies to every form on the site, not just the contact one. */
@media (max-width: 899px) {
  .field input, .field textarea { font-size: 1rem; }
}
.field input:hover, .field textarea:hover { border-color: var(--black); }
.field.invalid input, .field.invalid textarea { border-color: var(--red); background: #fff7f8; }
.field-err { display: block; color: var(--red-dark); font-size: var(--f-micro); margin-top: .3rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: var(--f-small); margin: .9rem 0 0; }
.form-note.ok { color: #1a7f4b; }
.form-note.err { color: var(--red-dark); }
.form-alt { font-size: var(--f-micro); color: var(--muted); margin: .75rem 0 0; }
.form button[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* Inline variant: title across the top, then name, phone and the button on
   one row. Only the short form uses it, and only from tablet width up. */
.form-inline { position: relative; }
@media (min-width: 760px) {
  .form-inline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: end; }
  .form-inline .form-h, .form-inline .form-lede, .form-inline .form-note, .form-inline .form-alt { grid-column: 1 / -1; }
  .form-inline .form-lede { margin-bottom: .5rem; }
  .form-inline .field { margin: 0; }
  .form-inline .btn-block { width: auto; padding-block: .85rem; }
  /* Never display:none this: it is the role=status live region, and a live
     region that first appears together with its message is not announced. An
     empty p in a grid row is zero height on its own. */
  .form-inline .form-note:empty { margin: 0; }
}

/* ── Closing band: the phone number is the statement moment ──────────────── */
/* For a local contractor the phone number is the product, so it gets the one
   --f-statement on the page. It works because nothing else competes with it.
   This is also the artwork's red phone band, which is why it never moved. */
.band { background: var(--red); color: #fff; }
.band :focus-visible { outline-color: #fff; }
/* The phone number takes its own full-width row rather than sharing a column.
   At --f-statement it needs ~900px, which no side-by-side track can give it --
   and spanning the container is the stronger composition anyway: the number
   becomes the thing the section is about. */
.band-in {
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  display: grid; gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: minmax(0, 1fr); align-items: end;
}
@media (min-width: 820px) { .band-in { grid-template-columns: minmax(0, 1fr) auto; } }
.band h2 { color: #fff; margin-bottom: .35em; }
.band-lede { color: rgba(255,255,255,.92); margin: 0; max-width: 34rem; }
.band .kicker { color: rgba(255,255,255,.9); }
.band-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.band-phone {
  grid-column: 1 / -1;
  display: block; font-weight: 800;
  font-size: var(--f-statement); line-height: .85; letter-spacing: -.01em;
  color: #fff; text-decoration: none; font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border-top: 1px solid rgba(255,255,255,.35);
  padding-top: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: clamp(.5rem, 1.5vw, 1rem);
}
.band-phone:hover { color: var(--black-deep); }   /* 3.16:1 on the red; --black is 2.96 */
.band .btn-primary { background: #fff; color: var(--red-deep); border-color: #fff; }
.band .btn-primary:hover { background: var(--black); color: #fff; border-color: var(--black); }
.band .btn-outline { color: #fff; border-color: rgba(255,255,255,.55); }
.band .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.14); }

/* ── Banner (interior pages) ─────────────────────────────────────────────── */
.banner { position: relative; background: var(--black); overflow: hidden; }
.banner-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; filter: grayscale(.4) contrast(1.1); }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--black) 24%, rgb(18 20 23 / .6)); }
.banner-in { position: relative; z-index: 1; padding-block: clamp(3rem, 7vw, 5.5rem); }
.banner h1 { color: #fff; margin-bottom: .25em; }
.banner p { color: var(--on-black); font-size: var(--f-lede); max-width: 38rem; margin: 0; }

/* ── Layout helpers ──────────────────────────────────────────────────────── */
.anchored { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) {
  /* minmax(0, …): a plain fr track's minimum is its content's min-content,
     so a wide child in the 7fr column could push the heading into a sliver. */
  .anchored { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .anchored .sec-head { position: sticky; top: clamp(7.5rem, 12vh, 9rem); margin-bottom: 0; }   /* clears the 91-107px header */
}
.split { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 6fr 6fr; }
  .split-form { grid-template-columns: 5fr 7fr; align-items: start; }
}
.r-img { width: 100%; box-shadow: var(--shadow-offset); }
.split-media .r-img { aspect-ratio: 4 / 3; object-fit: cover; }
.split-media .r-img-whole { aspect-ratio: auto; }   /* the poster: never cropped */
.grid { display: grid; gap: clamp(.9rem, 2vw, 1.35rem); }
@media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* ── Contact cards + help box ────────────────────────────────────────────── */
.contact-cards { display: grid; gap: 1rem; }
@media (min-width: 620px) and (max-width: 899px) { .contact-cards { grid-template-columns: repeat(3, 1fr); } }
.ccard { border: 0; border-left: 3px solid var(--red); padding: .25rem 0 .25rem 1.1rem; }
.ccard h3 { margin-bottom: .2em; font-size: var(--f-h4); }
.ccard p { margin: 0; font-size: var(--f-small); }
.help-box { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.75rem; border-top: 1px solid var(--line); }
.help-lines { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin: 0; }
.help-lines a { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; text-decoration: none; color: var(--black); }
.help-lines a:hover { color: var(--red); }
.help-lines .ic { width: 19px; height: 19px; color: var(--red); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
/* A step darker than the sections so the page has a floor. The lockup here
   is the reversed cut: white lettering, red kept. */
.site-foot { background: var(--black-deep); color: #9d9fa6; font-size: var(--f-small); }
.foot-grid { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); padding-block: clamp(2.75rem, 6vw, 4.25rem); }
@media (min-width: 700px) { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; } }   /* five: about, three divisions, CTA */
.foot-mark { width: 150px; height: auto; margin-bottom: 1.1rem; }
.foot-h { font-size: var(--f-h4); color: #fff; margin-bottom: .9rem; letter-spacing: .04em; text-transform: uppercase; }
.foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.foot-list a, .foot-contact a { color: #9d9fa6; text-decoration: none; }
.foot-list a:hover, .foot-contact a:hover, .foot-base a:hover { color: #fff; }
.foot-contact { display: grid; gap: .5rem; margin: 1.25rem 0 0; }
.foot-contact a, .foot-contact span { display: flex; align-items: flex-start; gap: .55rem; }
.foot-contact .ic { width: 17px; height: 17px; color: var(--red-bright); flex: none; margin-top: .2rem; }
.foot-cta .btn { margin-bottom: .85rem; }
.foot-phone { color: #fff; font-weight: 500; text-decoration: none; display: block; }
.foot-base { border-top: 1px solid rgba(255,255,255,.12); padding-block: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; font-size: var(--f-micro); }
.foot-base p { margin: 0; }
.foot-base a { color: #9d9fa6; text-decoration: none; }
/* The artwork's bottom strip: the name between two crowns. */
.foot-name { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; gap: .8rem; padding-block: 1rem; font-family: var(--display); font-size: 1rem; font-weight: 700; letter-spacing: .32em; text-indent: .32em; text-transform: uppercase; color: #fff; border-top: 1px solid rgba(255,255,255,.12); }
.foot-name .ic { width: 18px; height: 18px; color: var(--red-bright); flex: none; }
@media (max-width: 30rem) { .foot-name { letter-spacing: .16em; text-indent: .16em; } }

.sec-404 { padding-block: clamp(4rem, 12vw, 8rem); }

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 899px) {
  .topbar-addr, .head-cta { display: none; }
  .burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; margin-left: auto; width: 44px; height: 44px; padding: 0 10px; background: none; border: 0; cursor: pointer; }
  .burger span { display: block; height: 2px; background: var(--black); border-radius: 2px; transition: transform .2s, opacity .2s; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); max-height: 0; overflow: hidden; transition: max-height .25s ease; margin-left: 0; }
  /* Sized for the drawer's content, not for a fixed guess: seven links need
     ~371px, and 24rem (384px) left 13px of slack -- one wrapped label or one
     step up in the reader's default font size and the last item would be
     clipped, with `overflow: hidden` there is no scrollbar to rescue it. */
  .nav.open { max-height: 34rem; }
  .nav ul { flex-direction: column; gap: 0; padding: .5rem var(--gutter) 1rem; }
  .nav a { padding: .8rem 0; border-bottom: 1px solid var(--line); }
  .nav a[aria-current="page"] { border-bottom-color: var(--line); }
  /* Hard offsets get smaller on phones, where 10px is a big share of the width. */
  :root { --shadow-offset: 6px 6px 0 var(--black); --shadow-offset-red: 6px 6px 0 var(--red); }
}

/* ── Divisions ────────────────────────────────────────────────────────────────
   Three divisions, one phone number -- that is the whole proposition, so each
   division page states its list plainly and then states the one caveat that
   matters, rather than dressing either up.                                   */

.banner-plain { background: var(--black); }
.banner-plain::after { display: none; }
.banner .kicker-on-dark { color: var(--red-bright); }   /* beats `.banner p`, which sets --on-black */

.div-list { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1fr; }
@media (min-width: 54rem) { .div-list { grid-template-columns: 22rem 1fr; align-items: start; } }
.div-list-head h2 { margin-bottom: .3em; }
.div-strap { color: var(--muted); font-size: var(--f-lede); margin: 0; }

.div-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem 2rem; }
@media (min-width: 34rem) { .div-items { grid-template-columns: 1fr 1fr; } }
.div-items li { display: flex; align-items: flex-start; gap: .6rem; padding-block: .35rem; border-bottom: 1px solid var(--line); }
.div-items .ic { width: 17px; height: 17px; color: var(--red); flex: none; margin-top: .28em; stroke-width: 2.2; }

.div-note { margin-top: clamp(2rem, 4vw, 3rem); border-left: 3px solid var(--red); background: var(--tint); padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.2rem, 3vw, 2rem); }
.div-note h3 { font-size: var(--f-h3); margin-bottom: .4em; }
.div-note p { margin: 0; color: var(--body); }

/* A photograph that should exist and does not. Deliberately unglamorous: this
   is a worklist item for the client, not a design flourish. Preview builds are
   noindex, so it is only ever seen by the people who can fix it.             */
.photo-gap { margin: clamp(1.5rem, 3vw, 2rem) 0 0; padding: clamp(1rem, 2.5vw, 1.4rem); border: 2px dashed var(--line); background: var(--tint); }
.photo-gap-label { display: flex; align-items: center; gap: .5rem; margin: 0 0 .4rem; font-size: 1rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.photo-gap-label .ic { width: 17px; height: 17px; flex: none; }
.photo-gap-note { margin: 0; font-size: var(--f-small); color: var(--muted); line-height: 1.55; }

/* Division band. Panels stack and read fine on their own; `is-tabbed` is added
   by site.js only once the tab controls actually exist.                      */
.div-panels { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
.div-panels.is-tabbed { gap: 0; }
.div-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.div-tab {
  font-size: var(--f-ui); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .7rem 1.2rem; border: 0; cursor: pointer; border-radius: 0;
  display: inline-flex; align-items: center; min-height: var(--tap);
  background: var(--tint); color: #4a4d53; box-shadow: inset 0 0 0 1px #dfe0e4;
  transition: background .18s, color .18s;
}
.div-tab:hover { background: #e8e9ec; }
.div-tab[aria-selected="true"] { background: var(--black); color: #fff; box-shadow: none; }
/* Division card image. Fixed aspect so the three panels stay the same height
   whatever shape the source photo is -- the lawn photo is portrait and the other
   two are landscape, which without this makes the middle panel twice as tall. */
.div-panel-media {
  margin: 0 0 clamp(1rem, 2vw, 1.4rem);
  overflow: hidden;
  border-radius: 2px;
}
.div-panel-media img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 16 / 10; object-fit: cover;
}
.div-panel-head { margin-bottom: clamp(1rem, 2vw, 1.4rem); }
.div-panel-head h3 { font-size: var(--f-h2); margin-bottom: .2em; }
.div-panel-cta { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }

/* Hero headline: two lines, uppercase, the second in the brighter red. In
   Barlow Condensed 800 "WE DO IT ALL." runs 6-6.5x the font size depending on
   the fallback face in play before the webfont lands. The copy column is
   11/21 of the wide container (~46vw), so 6.6vw keeps the line whole from
   900px up with room to spare, 6rem caps it once the container stops growing,
   and 2.75rem (286px at 6.5x) holds it on a 320px phone's 288px column. */
.hero-h1 {
  text-transform: uppercase; line-height: .9; letter-spacing: 0;
  font-size: clamp(2.75rem, 6.6vw, 6rem);
}
.hero-hi { color: var(--red-bright); }

.contact-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .5rem; }
.contact-list li { display: flex; align-items: flex-start; gap: .6rem; }
.contact-list .ic { width: 19px; height: 19px; color: var(--red); flex: none; margin-top: .15em; }
.contact-list a { color: inherit; text-decoration: none; }
.contact-list a:hover { color: var(--red); text-decoration: underline; }

/* What you get either way. Five claims, no numbers in any of them. The icons
   sit in red discs: the artwork's badge column, minus the column.          */
/* The column count follows the container, not the viewport: on About the row
   has the full wrap and takes five across; on the home page it sits in the
   7/12 column of .anchored, where five 1fr tracks cannot fit their own
   longest words and would squeeze the heading beside them into a sliver. */
.badges { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); }
.badges li { display: flex; gap: .8rem; align-items: flex-start; }
.badge-ic {
  width: 42px; height: 42px; flex: none; padding: 9px;
  background: var(--red); color: #fff; border-radius: 50%; box-shadow: var(--shadow-offset-sm);
}
.badges h3 { font-size: var(--f-h4); margin: 0 0 .1em; letter-spacing: .01em; text-transform: uppercase; }
.badges p { margin: 0; font-size: var(--f-small); color: var(--muted); }
.sec-dark .badges p { color: var(--on-black); }
.sec-dark .badge-ic { box-shadow: 5px 5px 0 #fff; }

/* Gallery filters. Two of the chips are expected to return nothing. */
.gallery-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }
.chip {
  font: inherit; font-size: .88rem; font-weight: 500; padding: .55rem .9rem;
  border: 0; cursor: pointer; border-radius: 0;
  display: inline-flex; align-items: center; min-height: var(--tap);
  background: var(--tint); color: #4a4d53; box-shadow: inset 0 0 0 1px #dfe0e4;
  transition: background .18s, color .18s;
}
.chip:hover { background: #e8e9ec; }
.chip[aria-pressed="true"] { background: var(--black); color: #fff; box-shadow: none; }
.gallery-empty {
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem); padding: clamp(1rem, 2.5vw, 1.4rem);
  border-left: 3px solid var(--red); background: var(--tint);
  font-size: var(--f-small); color: var(--body);
}

/* Division picker. Radios, not JS state: the choice survives with scripting
   off, and it is what tells the form which crew a lead belongs to.          */
.field-choice { border: 0; margin: 0 0 1rem; padding: 0; }
.field-choice legend { padding: 0; margin-bottom: .45rem; font-size: var(--f-small); font-weight: 600; color: var(--black); }
.choices { display: flex; flex-wrap: wrap; gap: .4rem; }
.choices input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.choices label {
  font-size: .88rem; font-weight: 500; padding: .55rem .9rem; cursor: pointer;
  display: inline-flex; align-items: center; min-height: var(--tap);
  background: var(--paper); color: #4a4d53; box-shadow: inset 0 0 0 1px #d4d6db;
  transition: background .18s, color .18s;
}
.choices label:hover { background: var(--tint); }
.choices input:checked + label { background: var(--black); color: #fff; box-shadow: none; }
.choices input:focus-visible + label { outline: 3px solid var(--red); outline-offset: 2px; }