/* ==========================================================================
   Royal Construction Roofing & More

   The organising idea is roof pitch. A roofer is the one trade where geometry
   is literally the product, and their own logo is a hammer over a roofline, 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, the corner
   notch on promoted cards, and the angle of the hero's bottom edge.

   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.

   Palette and type were carried over from the WordPress build (Astra globals +
   Rubik/Karla) so the rebuild read as the same company. The 2026 redesign
   replaces both: Archivo/Barlow, and a navy/brick/gold palette that matches the
   new logo rather than the old Elementor theme.
   ========================================================================== */

:root {
  /* Brand — from the 2026 redesign (Direction B, "One call"). The previous
     values were the live Elementor globals, kept so the rebuild still read as
     the same company; the redesign replaces them deliberately. Red moved from
     a rose (#cb4154) into the brick family, which is also where the new logo
     sits — see tools/make-logo.py. */
  --red: #a41d28;
  --red-dark: #7d141d;
  --red-deep: #570f15;
  --navy: #17284a;
  --navy-lift: #20345f;
  --navy-deep: #101b33;
  --gold: #e8b13a;                   /* accent: highlight word, star rating */
  --gold-ink: #9a6b00;               /* gold that still passes on white */
  --ink: #2c3238;
  --body: #42474d;
  --muted: #5c6472;
  --on-navy: #d3d9e6;                /* body text on a navy field */
  --on-navy-dim: #b4bdd0;
  --line: #e6e8ec;
  --tint: #f4f5f7;
  --paper: #ffffff;

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

  /* Type — real range at both ends. --f-statement appears ONCE per page. */
  --f-micro: .75rem;
  --f-small: .9rem;
  --f-body: 1.0625rem;
  --f-lede: clamp(1.1rem, 1.6vw, 1.3rem);
  --f-h3: clamp(1.15rem, 1.6vw, 1.35rem);
  --f-h2: clamp(1.9rem, 4vw, 3.1rem);
  --f-h1: clamp(2.6rem, 7vw, 5rem);
  --f-mega: clamp(3rem, 9vw, 6.5rem);
  --f-statement: clamp(2.6rem, 11vw, 8.5rem);

  /* 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; the burger was already
     built to it, so the redesign's tabs, filter chips and division picker
     match rather than inventing a second, smaller standard. */
  --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(--navy);
  --shadow-offset-red: 10px 10px 0 var(--red);
  --shadow-offset-sm: 5px 5px 0 var(--navy);
  --shadow-lift: 0 1px 2px rgb(23 40 74 / .16), 0 12px 32px -14px rgb(23 40 74 / .4);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@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 Barlow, system-ui, -apple-system, "Segoe UI", sans-serif;
}

h1, h2, h3, h4, .kicker, .btn, .nav a, .label, .idx-n {
  font-family: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
}
h1, h2, h3, h4 { color: var(--navy); line-height: 1.08; margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: var(--f-h1); letter-spacing: -.025em; font-weight: 800; text-wrap: balance; }
h2 { font-size: var(--f-h2); letter-spacing: -.02em; 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;
}

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--navy); 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(--navy); color: var(--on-navy); }
.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(--navy); color: var(--on-navy-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); flex: none; }

.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: .6rem; }
.brand { display: block; flex: none; }
.brand-mark { width: clamp(148px, 17vw, 192px); 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(--navy); text-decoration: none; font-size: var(--f-small); font-weight: 500; padding: .4rem 0; display: block; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--red); }
.nav a[aria-current="page"] { color: var(--red); border-bottom-color: var(--red); }
.head-cta { flex: none; }
.burger { display: none; }

/* ── Buttons: soft radius marks the things you can press ─────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .9rem 1.7rem; border-radius: var(--radius-control); border: 2px solid transparent;
  font-size: var(--f-small); font-weight: 600; letter-spacing: .02em;
  text-decoration: none; cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, box-shadow .18s, translate .18s;
}
.btn .ic { width: 17px; height: 17px; }
.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(--navy); border-color: var(--line); }
.btn-outline:hover { border-color: var(--navy); }
.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: var(--f-micro); font-weight: 700; letter-spacing: .18em;
  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(--gold); }   /* redesign: gold is the accent on navy */

.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; }

/* Rotated label — used twice on the site, never more. */
.label {
  display: inline-block; rotate: -2.5deg;
  background: var(--red); color: #fff;
  font-size: var(--f-micro); font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
  padding: .45rem .9rem; box-shadow: var(--shadow-offset-sm);
}

/* ── Hero: pitched bottom edge ───────────────────────────────────────────── */
.hero { position: relative; background: var(--navy); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; filter: grayscale(.35) contrast(1.1); }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(104deg, var(--navy) 20%, rgb(23 40 74 / .82) 52%, rgb(23 40 74 / .5));
}
.hero-in { position: relative; z-index: 1; padding-block: clamp(3.25rem, 8vw, 6rem) clamp(2rem, 4vw, 3rem); display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero h1 { color: #fff; }
.hero-lede { color: var(--on-navy); font-size: var(--f-lede); max-width: 34rem; }
.hero .cta-row { margin-top: 2rem; }
@media (min-width: 940px) { .hero-in { grid-template-columns: 7fr 5fr; } }

/* Stats along the hero's foot: removes an entire generic section from the page. */

/* ── Proof band: the client's real work, full-bleed, early ───────────────── */
.proof { background: var(--navy); color: var(--on-navy); 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; }

/* ── Service index: replaces icon-heading-paragraph triads ───────────────── */
/* One service argues at length with a photo; the rest are a dense ruled index.
   Real content is ragged -- identical cards of identical length are the tell. */
  /* corner notch cut at the true roof pitch */
  content: ""; position: absolute; right: 0; bottom: 0; width: 3.5rem; height: 1.75rem;
  background: var(--paper); clip-path: polygon(100% 0, 100% 100%, 0 100%);
}


/* ── 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(--navy); }
.sec-dark .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }


/* ── Stats: numerals as imagery ──────────────────────────────────────────── */

/* ── Lists ───────────────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; color: var(--navy); }
.badge .ic { width: 19px; height: 19px; color: var(--red); }

/* ── Testimonials, merged into the trust section ─────────────────────────── */
.stars { color: #f0a202; letter-spacing: .1em; }
.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(--navy); }
.quote figcaption { font-size: var(--f-small); color: var(--muted); font-weight: 500; }

/* ── 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(--navy); padding: clamp(1.35rem, 3vw, 2.1rem); box-shadow: var(--shadow-offset-red); }
.sec-dark .form, .hero .form { box-shadow: var(--shadow-offset-red); background: #fff; }
.form-h { margin-bottom: .25em; }
.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(--navy); margin-bottom: .35rem; }
.req { color: var(--red); }
.field input, .field textarea {
  width: 100%; padding: .7rem .85rem; font: inherit; font-size: var(--f-small);
  border: 1px solid var(--line); border-radius: var(--radius-control); background: #fff; color: var(--ink);
}
/* 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.9rem 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: #b9c0ca; }
.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; }

/* ── 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. */
.band { background: var(--red); color: #fff; }
/* The phone number takes its own full-width row rather than sharing a column.
   At --f-statement it needs ~950px, 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-family: Archivo, sans-serif; font-weight: 800;
  font-size: var(--f-statement); line-height: .85; letter-spacing: -.045em;
  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(--navy); }
.band .btn-primary { background: #fff; color: var(--red-deep); border-color: #fff; }
.band .btn-primary:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.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(--navy); overflow: hidden; }
.banner-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; filter: grayscale(.35) contrast(1.1); }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--navy) 24%, rgb(23 40 74 / .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-navy); 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) {
  .anchored { grid-template-columns: 5fr 7fr; }
  .anchored .sec-head { position: sticky; top: clamp(5rem, 12vh, 8rem); margin-bottom: 0; }
}
.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; }
.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: 1rem; }
.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(--navy); }
.help-lines a:hover { color: var(--red); }
.help-lines .ic { width: 19px; height: 19px; color: var(--red); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-foot { background: var(--navy); color: #96a1ba; 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-h { font-size: 1rem; color: #fff; margin-bottom: .9rem; }
.foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.foot-list a, .foot-contact a { color: #96a1ba; 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); 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: #96a1ba; text-decoration: none; }

.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(--navy); 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(--navy); --shadow-offset-red: 6px 6px 0 var(--red); }
}

/* ── Divisions ────────────────────────────────────────────────────────────────
   Three divisions, one phone number -- that is the whole proposition of the
   redesign, 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(--navy); }
.banner-plain::after { display: none; }
.banner .kicker-on-dark { color: var(--gold); }   /* beats `.banner p`, which sets --on-navy */

.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; }

.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-family: Archivo, sans-serif; font-size: var(--f-small); 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-family: Archivo, sans-serif; font-size: .92rem; font-weight: 700; letter-spacing: .02em;
  padding: .75rem 1.2rem; border: 0; cursor: pointer; border-radius: 0;
  display: inline-flex; align-items: center; min-height: var(--tap);
  background: var(--tint); color: #4d535a; box-shadow: inset 0 0 0 1px #dfe3e9;
  transition: background .18s, color .18s;
}
.div-tab:hover { background: #e8eaee; }
.div-tab[aria-selected="true"] { background: var(--navy); 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: the redesign leads on a two-line statement, the second line in gold. */
.badge {
  display: inline-block; margin: 0 0 1.1rem; padding: .45rem .85rem;
  background: var(--red); color: #fff; font-family: Archivo, sans-serif;
  font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.hero-h1 {
  text-transform: uppercase; line-height: .92; letter-spacing: -.042em;
  /* The redesign sets this at 6.2rem, but its hero gives the headline the full
     width -- ours shares the row with the lead form, leaving ~600px, where
     6.2rem breaks "we do it all." across two lines and loses the two-line
     shape the line is built on. Capped to the largest size that still lands
     it on one line at this column width. */
  /* Floor is 2.5rem, not the redesign's 2.7rem: "we do it all." runs about
     6.6x the font size, and a 320px phone leaves 273px of content width, which
     2.7rem overruns by ~11px and breaks onto a third line. */
  font-size: clamp(2.5rem, 8.5vw, 5.4rem);
}
.hero-hi { color: var(--gold); }

.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
   counters that used to sit here made four contradictory ones.              */
.badges { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
@media (min-width: 40rem) { .badges { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .badges { grid-template-columns: repeat(5, 1fr); } }
.badges li { display: flex; gap: .75rem; align-items: flex-start; }
.badge-ic { width: 26px; height: 26px; color: var(--red); flex: none; margin-top: .1em; }
.badges h3 { font-size: 1rem; margin: 0 0 .15em; letter-spacing: -.01em; }
.badges p { margin: 0; font-size: var(--f-small); color: var(--muted); }
.sec-dark .badges p { color: var(--on-navy); }
.sec-dark .badge-ic { color: var(--gold); }

/* 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: #4d535a; box-shadow: inset 0 0 0 1px #dfe3e9;
  transition: background .18s, color .18s;
}
.chip:hover { background: #e8eaee; }
.chip[aria-pressed="true"] { background: var(--navy); 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(--gold); 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(--navy); }
.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: #4d535a; box-shadow: inset 0 0 0 1px #d9dde4;
  transition: background .18s, color .18s;
}
.choices label:hover { background: var(--tint); }
.choices input:checked + label { background: var(--navy); color: #fff; box-shadow: none; }
.choices input:focus-visible + label { outline: 3px solid var(--red); outline-offset: 2px; }