/* ==========================================================================
   CD Contracting & Quality Sandblasting - built by Click n Call.
   Copied to site/assets/app.<hash>.css by build.mjs.

   LOOK AND FEEL. The brand is the 2026 logo: a welding torch, a spray gun and a blast nozzle
   over crossed steel beams, lettered in chrome with a bright orange keyline, on black with a
   glow. The site is built out of the same three materials and nothing else:

     - BLACK (#000) for the header, every hero, the mobile menu and the footer. It has to be
       true black, not a dark grey: the logo file is the artwork on its own black ground, and
       on anything else its rectangle would show.
     - ORANGE #fa7100, the median of the logo's vivid orange (sampled by
       build/prepare-brand.py; the white version of the art reads #fe7200). It is a FILL and an
       accent, never text on white.
     - STEEL: the cool greys of the beams (#adb7b9 sampled) for rules, borders and the light
       bands, so the long copy sits on white and pale steel rather than on black.

   Type is Barlow Condensed 800 in capitals for headings - a squared industrial grotesque that
   sits comfortably beside the logo's block lettering without imitating it - over Barlow 400/600
   for reading. Three self-hosted files, 67 kB, no third-party font request.

   🔴 ORANGE IS A FILL, NEVER TEXT ON WHITE. #fa7100 on #fff is 2.8:1. It carries black ink
   (7.4:1 on #000 ink, 6.9:1 with --ink) as a button, a rule or a strip, and it is text only on
   the black and coal grounds (7.4:1 and 6.6:1). On white, emphasis is weight plus an orange
   bar under dark letters.

   Every pairing below states its measured ratio; build/check-live.mjs re-measures them in a
   real browser at 1440px and 390px.
   ========================================================================== */

@font-face {
  font-family: 'Barlow Condensed';
  src: url('/assets/fonts/barlow-condensed-800-latin.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('/assets/fonts/barlow-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('/assets/fonts/barlow-600-latin.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --black:    #000000;   /* logo ground. white on it 21:1 */
  --coal:     #101314;   /* dark bands that do NOT carry the logo. white on it 18.6:1 */
  --coal-2:   #191d1f;   /* raised surfaces on dark */
  --coal-3:   #2c3335;   /* borders and rules on dark */
  --orange:   #fa7100;   /* the logo's orange. --ink on it 6.9:1 */
  --orange-2: #ff8f2e;   /* hover on dark. --ink on it 8.6:1 */
  --ink:      #0e1112;   /* headings and strong text on white: 18.9:1 */
  --ink-2:    #434b4e;   /* body copy on white: 8.9:1, on --paper-2: 7.9:1 */
  --ink-3:    #596266;   /* small labels on white: 6.2:1, on --paper-2: 5.5:1 */
  --steel:    #adb7b9;   /* the beams, sampled */
  --steel-2:  #d6dcdd;
  --paper:    #ffffff;
  --paper-2:  #eff2f2;   /* pale steel band */
  --line:     #d3d9da;
  --line-2:   #b8c1c3;

  --on-dark:   #ffffff;
  --on-dark-2: #cdd4d6;  /* secondary copy on black: 13.9:1, on coal 12.3:1 */
  --on-dark-3: #9ba6a9;  /* small labels on black: 8.3:1, on coal 7.3:1 */

  --wrap:  1240px;
  --wrap-narrow: 800px;
  --gut:   clamp(1.15rem, 4vw, 3rem);

  --r-sm: 2px;
  --r:    4px;
  --pill: 999px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 8px 22px rgba(0,0,0,.08);
  --shadow-2: 0 2px 6px rgba(0,0,0,.16), 0 20px 48px rgba(0,0,0,.28);

  --display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', Arial, sans-serif;
  --sans: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --step: clamp(3.25rem, 6.5vw, 5.75rem);

  /* Brushed steel, used as a hairline under headings and as card edges. */
  --steel-bar: linear-gradient(90deg, #8f9a9d 0%, #e3e8e9 22%, #a3adaf 48%, #eef1f1 70%, #97a2a5 100%);
  /* Workshop floor marking. Decorative only - nothing is ever set on top of it. */
  --hazard: repeating-linear-gradient(135deg, var(--orange) 0 14px, var(--black) 14px 28px);
}

/* ---- reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 130px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
strong, b { font-weight: 600; }

:where(a):focus-visible,
:where(button):focus-visible,
:where(input, textarea, select):focus-visible,
:where(summary):focus-visible,
:where([tabindex]):focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
  box-shadow: 0 0 0 6px var(--black);   /* the orange ring alone is weak on white */
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--orange); color: var(--ink); padding: .85rem 1.25rem;
  border-radius: 0 0 var(--r) 0; font-weight: 600;
}
.skip:focus { left: 0; }

.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- type ---------------------------------------------------------------
   Headings carry data-len, stamped by the builder from the character count: the old site's
   H1s are frozen and run from 10 to 47 characters, and one clamp() cannot serve both. */
h1, h2, h3, h4 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  line-height: 1.02; letter-spacing: .005em; color: var(--ink);
  text-wrap: balance;
}
/* Emphasis inside a heading. On DARK it is orange text; on WHITE it is dark text over an
   orange bar, because orange letters on white do not reach AA. */
h1 em, h2 em { font-style: normal; }
.hero h1 em, .band--dark h2 em, .ctaband h2 em { color: var(--orange); }
.band h2 em, .band--paper2 h2 em {
  background: linear-gradient(transparent 78%, var(--orange) 78%, var(--orange) 96%, transparent 96%);
}
.band--dark h2 em { background: none; }

h1 { font-size: clamp(2.7rem, 6.6vw, 5.2rem); line-height: .96; }
h1[data-len="long"]  { font-size: clamp(2.45rem, 5.4vw, 4.3rem); }
h1[data-len="xlong"] { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1; }

h2 { font-size: clamp(2rem, 3.9vw, 3.1rem); }
h2[data-len="long"]  { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
h2[data-len="xlong"] { font-size: clamp(1.65rem, 2.8vw, 2.25rem); line-height: 1.06; }

h3 { font-size: clamp(1.4rem, 2.1vw, 1.7rem); line-height: 1.08; letter-spacing: .01em; }
h4 { font-size: 1.2rem; letter-spacing: .02em; }

.eyebrow {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: .98rem; letter-spacing: .14em; line-height: 1.2;
  color: var(--ink-2); margin-bottom: .9rem;
}
.eyebrow::before { content: ''; flex: 0 0 auto; width: 30px; height: 6px; background: var(--orange); transform: skewX(-24deg); }
.hero .eyebrow, .band--dark .eyebrow, .ctaband .eyebrow { color: var(--orange); }
.shead--center .eyebrow { justify-content: center; }

.lede { font-size: clamp(1.08rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--ink-2); }

/* Body links. Scoped with :not() so a .btn or .tlink inside prose keeps its own colour. */
.prose a:not(.btn):not(.tlink),
.rt a:not(.btn):not(.tlink) {
  color: var(--ink); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--orange);
  text-underline-offset: .2em; text-decoration-thickness: 3px;
}
.prose a:not(.btn):not(.tlink):hover,
.rt a:not(.btn):not(.tlink):hover { background: var(--orange); color: var(--ink); }

.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.9em; }
.prose h2 + p, .prose h3 + p, .prose h2 + ul, .prose h3 + ul { margin-top: .75em; }
.prose > .eyebrow + h2, .prose > .eyebrow + h3 { margin-top: 0; }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-2); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose--lg p, .prose--lg li { font-size: clamp(1.03rem, 1.25vw, 1.13rem); line-height: 1.62; }
.prose ul:not(.checks):not(.tags) { display: grid; gap: .45rem; padding-left: 1.25rem; list-style: square; }
.prose ul:not(.checks):not(.tags) li::marker { color: var(--orange); }
/* A heading in running copy gets the brushed-steel hairline of the beams in the logo. */
.prose h2::after {
  content: ''; display: block; height: 4px; width: 100%; max-width: 220px; margin-top: .55rem;
  background: linear-gradient(90deg, var(--orange) 0 44px, transparent 44px), var(--steel-bar);
}

/* ---- layout -------------------------------------------------------------- */
.wrap { width: min(100% - (var(--gut) * 2), var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - (var(--gut) * 2), var(--wrap-narrow)); margin-inline: auto; }

.band { padding-block: var(--step); }
.band--tight { padding-block: calc(var(--step) * .6); }
.band--paper2 { background: var(--paper-2); }
.band--dark  { background: var(--coal); color: var(--on-dark-2); }
.band--dark h1, .band--dark h2, .band--dark h3, .band--dark h4 { color: var(--on-dark); }
.band--dark p, .band--dark .lede { color: var(--on-dark-2); }

/* A LIGHT SURFACE INSIDE A DARK BAND restates every text colour, at higher specificity than
   the band's own rules, or the card's heading inherits white and renders white on white. */
.band--dark .formcard h2, .band--dark .formcard h3 { color: var(--ink); }
.band--dark .formcard p { color: var(--ink-2); }

/* The workshop floor marking: a thin strip between the page and the footer, and under heroes. */
.hazard { height: 10px; background: var(--hazard); }

/* Two-column "heading left, copy right". */
.split2 { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) {
  .split2 { grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: clamp(2.5rem, 6vw, 6rem); }
  .split2__head { position: sticky; top: 150px; }
}
.split2__head .btns { margin-top: 1.75rem; }
.split2__head .lede { margin-top: 1rem; }

/* Copy + photo. The photographs are 640px phone pictures, so the photo column is sized to
   them: the image is never stretched (the builder also caps each <img> at its native width)
   and sits in a steel frame with an orange corner, like a job card pinned to the wall. */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .split--flip .split__media { order: -1; }
}
/* The orange and steel corners belong to .frame__pic, not to the figure, so a caption of any
   length sits clear of them. */
.frame { margin: 0; justify-self: center; width: 100%; max-width: 640px; }
.frame__pic { position: relative; line-height: 0; }
.frame img { width: 100%; border: 6px solid #fff; outline: 1px solid var(--line-2); box-shadow: var(--shadow-1); position: relative; z-index: 1; }
.frame__pic::before {
  content: ''; position: absolute; z-index: 0; right: -12px; top: -12px; width: 42%; height: 42%;
  background: var(--orange);
}
.frame__pic::after {
  content: ''; position: absolute; z-index: 0; left: -12px; bottom: -12px; width: 42%; height: 42%;
  background: var(--steel-bar);
}
.frame figcaption { margin-top: 1.5rem; font-size: .88rem; color: var(--ink-3); }
@media (max-width: 899px) {
  .frame__pic::before { right: -7px; top: -7px; }
  .frame__pic::after { left: -7px; bottom: -7px; }
}
.hero .frame img { border-color: var(--coal-2); outline-color: var(--coal-3); }
.hero .frame figcaption { color: var(--on-dark-3); }

/* ---- top bar + header ----------------------------------------------------
   Both are pure black - see the note at the top of this file. */
.topbar { background: var(--black); color: var(--on-dark-3); font-size: .84rem; border-bottom: 1px solid var(--coal-3); }
.topbar__in { display: flex; justify-content: space-between; gap: 1rem; padding-block: .45rem; }
.topbar__r { display: flex; gap: 1.5rem; white-space: nowrap; }
.topbar a { color: var(--on-dark-2); text-decoration: none; }
.topbar a:hover { color: var(--orange); }
@media (max-width: 980px) { .topbar__l { display: none; } .topbar__in { justify-content: center; } }
@media (max-width: 560px) { .topbar { display: none; } }

.hdr {
  position: sticky; top: 0; z-index: 90;
  background: var(--black);
  transition: box-shadow .2s ease;
}
.hdr::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--steel-bar); opacity: .55; }
.hdr.scrolled { box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.hdr__in { display: flex; align-items: center; gap: 1.5rem; min-height: 116px; padding-block: .4rem; }
.hdr__logo { flex: 0 0 auto; line-height: 0; }
/* The logo is a detailed illustration, so it gets real height: 104px tall on desktop.
   340px file at 156 CSS px = 2.2x, so it is sharp on a retina screen and never upscaled. */
.hdr__logo img { width: 156px; height: auto; }
@media (max-width: 480px) { .hdr__logo img { width: 112px; } .hdr__in { min-height: 86px; } }

.nav { margin-left: auto; display: flex; align-items: center; gap: .2rem; }
.nav a {
  position: relative; display: block; padding: .6rem .95rem;
  color: var(--on-dark); text-decoration: none;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 1.16rem; letter-spacing: .06em; white-space: nowrap;
}
.nav a::after {
  content: ''; position: absolute; left: .95rem; right: .95rem; bottom: .2rem; height: 4px;
  background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Services dropdown.
   🔴 THE DEAD ZONE (F:\_Websites\_knowledge\hover-dropdown-dead-zone.md). The panel sits 10px
   below the trigger, and that gap belongs to neither element: without the ::before bridge the
   pointer leaves .nav__grp on its way down and the menu closes before anyone can reach it. A
   hover() test teleports the cursor and passes regardless - check-live.mjs drives a REAL mouse
   to the LAST item instead. Do not "fix" it by removing the gap.
   Closed state is visibility + pointer-events, so the links leave the tab order and the bridge
   is inert. It opens on [data-open] (JS: hover with a close delay, focus, first tap). With no
   JavaScript the <html class="no-dropjs"> fallback opens it on :hover / :focus-within instead;
   app.js removes that class, otherwise :focus-within would defeat Escape. */
.nav__grp { position: relative; }
.nav .nav__trig { display: flex; align-items: center; gap: .3rem; }
.nav__trig svg { width: 13px; height: 13px; transition: transform .2s ease; }
.nav__grp[data-open] .nav__trig svg { transform: rotate(180deg); }
.nav__menu {
  position: absolute; left: 0; top: calc(100% + 10px); z-index: 95; min-width: 290px;
  background: var(--coal-2); border: 1px solid var(--coal-3); border-top: 4px solid var(--orange);
  box-shadow: var(--shadow-2); padding: .5rem;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.nav__menu::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav__grp[data-open] .nav__menu,
.no-dropjs .nav__grp:focus-within .nav__menu,
.no-dropjs .nav__grp:hover .nav__menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear 0s;
}
.nav .nav__menu a {
  padding: .6rem .85rem; white-space: nowrap;
  color: var(--on-dark-2); font-size: 1.1rem;
}
.nav .nav__menu a::after { content: none; }
.nav .nav__menu a:hover, .nav .nav__menu a:focus-visible { background: var(--orange); color: var(--ink); }
.nav .nav__menu a[aria-current="page"] { color: var(--orange); }
.nav .nav__menu a[aria-current="page"]:hover { color: var(--ink); }

.hdr__cta { display: flex; align-items: center; gap: .6rem; }
.hdr__phone svg { width: 16px; height: 16px; }

.burger {
  display: none; margin-left: auto;
  width: 48px; height: 48px; border: 2px solid var(--on-dark-3);
  border-radius: var(--r-sm); background: transparent; cursor: pointer;
  align-items: center; justify-content: center;
}
.burger span { display: block; width: 22px; height: 3px; background: #fff; position: relative; }
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 22px; height: 3px; background: #fff;
}
.burger span::before { top: -7px; }
.burger span::after  { top: 7px; }

@media (max-width: 1000px) {
  .nav { display: none; }
  .burger { display: flex; }
  .hdr__cta { margin-left: auto; }
}
@media (max-width: 440px) { .hdr__phone span { display: none; } .hdr__phone { padding-inline: .85rem; } }

/* Mobile menu. Closed state is genuinely inert - visibility and pointer-events, not opacity
   alone - so the links leave the tab order. It is position:fixed, so it can never shift the
   page (the CLS fault the fleet fixed on 2026-10-06 came from an in-flow menu). The visibility
   transition is asymmetric on purpose: it flips to visible IMMEDIATELY on open, because
   .focus() on an element still computed visibility:hidden is silently refused. */
.mnu {
  position: fixed; inset: 0; z-index: 120; background: var(--black);
  display: flex; flex-direction: column; overflow-y: auto;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, visibility 0s linear .22s;
}
.mnu[data-open] {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .22s ease, visibility 0s linear 0s;
}
.mnu > .wrap { display: flex; flex-direction: column; min-height: 100%; }
.mnu__top { display: flex; align-items: center; min-height: 100px; padding-block: .5rem; }
.mnu__top .hdr__logo img { width: 130px; }
.mnu__close {
  margin-left: auto; width: 48px; height: 48px; border-radius: var(--r-sm);
  border: 2px solid var(--on-dark-3); background: transparent; color: #fff;
  font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.mnu__list { padding-block: .5rem; display: grid; }
.mnu__list a {
  display: block; padding: .7rem .1rem; color: #fff; text-decoration: none;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 1.9rem; letter-spacing: .03em; border-bottom: 1px solid var(--coal-3);
}
.mnu__list a[aria-current="page"] { color: var(--orange); }
.mnu__k { margin-top: 1.4rem; font-family: var(--display); font-weight: 800; font-size: .95rem; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.mnu__sub { display: grid; gap: .1rem; margin-top: .5rem; }
.mnu__sub a { display: block; padding: .5rem .1rem; color: var(--on-dark-2); text-decoration: none; font-size: 1.08rem; }
.mnu__sub a:hover, .mnu__sub a[aria-current="page"] { color: var(--orange); }
.mnu__foot { margin-top: auto; padding-block: 1.75rem 2.5rem; display: grid; gap: .75rem; }

/* ---- buttons -------------------------------------------------------------
   Primary is the orange fill with black ink (6.9:1). It works on white AND on black, which is
   why there is one primary and not a per-surface pair. The corners are clipped like the plate
   the logo's lettering sits on. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.55rem; border: 0;
  background: var(--orange); color: var(--ink);
  font-family: var(--display); font-weight: 800; font-size: 1.16rem; line-height: 1.15; letter-spacing: .07em;
  text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.btn:hover { background: var(--ink); color: var(--orange); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { clip-path: none; }
.btn svg { width: 18px; height: 18px; }
.btn--sm { padding: .68rem 1.1rem; font-size: 1.08rem; }

/* Outlined on white. An inset box-shadow, not a border, so the clipped corners still read. */
.btn--ghost { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); clip-path: none; }
.btn--ghost:hover { background: var(--ink); color: #fff; }

/* Outlined on DARK. Every dark surface must be listed, or the ghost button renders dark on
   dark. check-live measures it rather than trusting this list. */
.btn--light,
.band--dark .btn--ghost, .hero .btn--ghost, .ctaband .btn--ghost {
  background: var(--black); color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.85); clip-path: none;
}
.btn--light:hover,
.band--dark .btn--ghost:hover, .hero .btn--ghost:hover, .ctaband .btn--ghost:hover {
  background: #fff; color: var(--ink);
}
/* The primary's hover is dark-on-dark on a dark surface unless it is restated there. */
.hero .btn:not(.btn--ghost):not(.btn--light):hover,
.band--dark .btn:not(.btn--ghost):not(.btn--light):hover,
.ctaband .btn:not(.btn--ghost):not(.btn--light):hover,
.hdr .btn:hover, .mnu .btn:not(.btn--light):hover { background: #fff; color: var(--ink); }

.btns { display: flex; flex-wrap: wrap; gap: .8rem; }

.tlink {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--ink); font-weight: 600; text-decoration: none;
  box-shadow: inset 0 -3px 0 var(--orange);
}
.tlink::after { content: '\2192'; transition: transform .15s ease; }
.tlink:hover { background: var(--orange); color: var(--ink); }
.tlink:hover::after { transform: translateX(3px); }
.band--dark .tlink, .ctaband .tlink, .hero .tlink { color: #fff; }
.band--dark .tlink:hover, .ctaband .tlink:hover, .hero .tlink:hover { color: var(--ink); }

/* ---- hero ----------------------------------------------------------------
   Always black, because the logo lives here. Three forms:
     .hero--home   copy left, the logo large on the right (never wider than 600px = 2x file)
     .hero--sub    copy left, a framed job photo on the right
     .hero--photo  a stock photograph full-bleed under a heavy scrim (two pages only)
     .hero--plain  no picture */
.hero { position: relative; background: var(--black); color: var(--on-dark-2); overflow: hidden; isolation: isolate; }
/* The picture is pinned to the right and never wider than 1240px, fading into the black on its
   left. Two reasons: the copy sits on clean black, and a 1900px photograph is not stretched
   across a 2560px monitor (check-live measures every image against its file). */
.hero__bg {
  position: absolute; top: 0; bottom: 0; right: 0; width: min(100%, 1240px); z-index: -2;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
}
.hero__bg img { width: 100%; height: 100%; max-width: none !important; object-fit: cover; }
@media (max-width: 760px) { .hero__bg { -webkit-mask-image: none; mask-image: none; } }
.hero--photo::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.82) 45%, rgba(0,0,0,.5) 80%, rgba(0,0,0,.4) 100%),
    linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 45%);
}
@media (max-width: 760px) {
  .hero--photo::before { background: linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.85) 60%, rgba(0,0,0,.93) 100%); }
}
.hero__in { padding-block: clamp(2.75rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem); }
.hero__grid { display: grid; gap: clamp(1.75rem, 4vw, 4rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 980px) { .hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); } }
.hero__copy { max-width: 720px; }
.hero__title { color: #fff; }
.hero .lede { color: var(--on-dark-2); margin-top: 1.3rem; max-width: 62ch; }
.hero .btns { margin-top: 1.9rem; }
.hero__call {
  margin-top: 1.5rem; font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 1.5rem; letter-spacing: .06em; line-height: 1.1; color: #fff;
}
.hero__call a { color: var(--orange); text-decoration: none; }
.hero__call a:hover { color: #fff; text-decoration: underline; }

/* "Call now on:" in running copy on a light band. Dark ink; the number is a prose link, so it
   is dark with an orange underline rather than orange text. */
.callnow {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 1.5rem; letter-spacing: .06em; line-height: 1.15; color: var(--ink);
}
.prose p.callnow { color: var(--ink); font-size: 1.5rem; line-height: 1.15; margin-top: 1.2em; }

/* The logo in the home hero. Pure black behind it, so the file's own ground disappears. */
.hero__logo { margin: 0; justify-self: center; width: 100%; max-width: 600px; }
.hero__logo img { width: 100%; height: auto; }
@media (max-width: 979px) {
  .hero--home .hero__logo { order: -1; max-width: 440px; }
  @media (max-width: 520px) { .hero--home .hero__logo { max-width: 320px; } }
  .hero--home .hero__in { padding-top: 1.25rem; }
}

.hero--sub .hero__in { padding-block: clamp(2.25rem, 5vw, 4rem) clamp(2.75rem, 5.5vw, 4.5rem); }
.hero--photo .hero__copy, .hero--plain .hero__copy { max-width: 780px; }
/* A hero with no photograph (gallery, contact, legal, thank-you): crossed beams in steel. */
.hero--plain::before {
  content: ''; position: absolute; z-index: -1; right: -6%; top: -40%; width: 60%; height: 180%;
  background:
    linear-gradient(115deg, transparent 0 46%, rgba(173,183,185,.10) 46% 48.5%, transparent 48.5% 51%, rgba(250,113,0,.22) 51% 52%, transparent 52%),
    linear-gradient(65deg, transparent 0 46%, rgba(173,183,185,.07) 46% 48.5%, transparent 48.5%);
}

/* Spec strip on the hero's bottom edge: orange plate, black ink (6.9:1 and above). */
.spec { background: var(--orange); color: var(--ink); }
.spec__in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 2rem; }
.spec__i { padding: 1.05rem 0; }
.spec__i + .spec__i { border-left: 2px solid rgba(0,0,0,.22); padding-left: 1.5rem; }
@media (max-width: 860px) {
  .spec__in { grid-template-columns: 1fr 1fr; }
  .spec__i { padding: .85rem 0; }
  .spec__i + .spec__i { padding-left: 1rem; }
  .spec__i:nth-child(3) { border-left: 0; padding-left: 0; }
  .spec__i:nth-child(n+3) { border-top: 2px solid rgba(0,0,0,.22); }
}
.spec__n {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.3rem, 2vw, 1.6rem); letter-spacing: .03em; line-height: 1.05;
  color: var(--ink); display: block; margin-bottom: .2rem;
  overflow-wrap: normal; word-break: keep-all; hyphens: none;
}
.spec__l { font-size: .9rem; color: #1c1206; line-height: 1.35; font-weight: 600; }  /* on orange: 6.6:1 */

/* ---- breadcrumb ---------------------------------------------------------- */
.crumb { font-size: .86rem; color: var(--on-dark-3); margin-bottom: 1.2rem; }
.crumb ol { display: flex; flex-wrap: wrap; gap: .4rem; }
.crumb li::after { content: '/'; margin-left: .4rem; opacity: .6; }
.crumb li:last-child::after { content: none; }
.crumb a { color: var(--on-dark-2); text-decoration: none; }
.crumb a:hover { color: var(--orange); text-decoration: underline; }
.crumb [aria-current] { color: #fff; }

/* ---- section heading ----------------------------------------------------- */
.shead { max-width: 68ch; margin-bottom: clamp(1.9rem, 3.6vw, 3rem); }
.shead .lede, .shead p { margin-top: 1rem; }
.shead p:not(.lede) { color: var(--ink-2); font-size: clamp(1.03rem, 1.25vw, 1.13rem); }
.band--dark .shead p:not(.lede) { color: var(--on-dark-2); }
.shead--center { margin-inline: auto; text-align: center; }
.shead--row { max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; }

/* ---- service cards -------------------------------------------------------
   A plate: photograph on top, steel edge, orange base that fills on hover. The copy is always
   visible. The whole card is one link target (the h3's link is stretched over it). */
.scards { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 620px) { .scards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .scards { grid-template-columns: repeat(4, 1fr); } .scards--3 { grid-template-columns: repeat(3, 1fr); } }
.scard {
  position: relative; display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line-2); border-bottom: 6px solid var(--ink);
  box-shadow: var(--shadow-1); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.scard:hover, .scard:focus-within { transform: translateY(-4px); border-bottom-color: var(--orange); box-shadow: var(--shadow-2); }
.scard .scard__pic { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--coal); }
.scard .scard__img { width: 100%; height: 100%; max-width: none !important; object-fit: cover; }
.scard .scard__body { padding: 1.3rem 1.35rem 1.45rem; display: flex; flex-direction: column; flex: 1; }
.scard .scard__body h3 { color: var(--ink); margin-bottom: .5rem; }
.scard .scard__body h3 a { color: var(--ink); text-decoration: none; }
.scard .scard__body h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.scard .scard__body p { color: var(--ink-2); font-size: .98rem; line-height: 1.5; }
.scard .scard__go {
  display: inline-flex; gap: .45rem; margin-top: auto; padding-top: 1rem; color: var(--ink);
  font-family: var(--display); font-weight: 800; font-size: 1.02rem; letter-spacing: .1em; text-transform: uppercase;
}
.scard .scard__go::after { content: '\2192'; color: var(--ink); transition: transform .15s ease; }
.scard:hover .scard__go::after { transform: translateX(4px); }

/* ---- checklist ----------------------------------------------------------- */
.checks { display: grid; gap: .7rem; }
.checks li { position: relative; padding-left: 2.1rem; color: var(--ink-2); }
.checks li::before {
  content: ''; position: absolute; left: 0; top: .22em; width: 1.3rem; height: 1.3rem;
  background: var(--orange);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.checks li::after {
  content: ''; position: absolute; left: .36rem; top: .52em; width: .6rem; height: .3rem;
  border-left: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(-45deg);
}
.checks strong { color: var(--ink); font-weight: 600; }
.band--dark .checks li { color: var(--on-dark-2); }
.band--dark .checks strong { color: #fff; }
.checks--2 { grid-template-columns: 1fr; }
@media (min-width: 620px) { .checks--2 { grid-template-columns: 1fr 1fr; gap: .7rem 2rem; } }

/* Stamped tags: the old site's "areas of expertise" list, and the industries list. */
.tags { display: flex; flex-wrap: wrap; gap: .55rem; }
.tags li {
  padding: .5rem .95rem; background: #fff; border: 1px solid var(--line-2); border-left: 5px solid var(--orange);
  font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  font-size: 1.05rem; line-height: 1.15; color: var(--ink);
}
.band--dark .tags li { background: var(--coal-2); border-color: var(--coal-3); border-left-color: var(--orange); color: #fff; }

/* ---- process steps ------------------------------------------------------- */
.steps { counter-reset: s; display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 1.4rem; }
.step { counter-increment: s; position: relative; padding: .1rem 0 .1rem 4rem; min-height: 3rem; }
.step::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; top: 0; left: 0; width: 3rem; height: 3rem; display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: .02em; color: var(--ink); line-height: 1;
  background: var(--orange);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.prose .step h4 { margin: 0 0 .25rem; }
.prose .step p { margin: 0; font-size: 1rem; color: var(--ink-2); }

/* ---- FAQ ------------------------------------------------------------------
   Native details/summary. No JavaScript, and the answers are in the HTML a crawler reads
   whether or not the panel is open. */
.faq { display: grid; gap: 0; border-top: 3px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.1rem 0; cursor: pointer; list-style: none;
  font-size: clamp(1.05rem, 1.4vw, 1.18rem); font-weight: 600; line-height: 1.35;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; flex: 0 0 auto; margin-left: auto; width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center; background: var(--orange); color: var(--ink);
  font-family: var(--display); font-weight: 800; font-size: 1.35rem; line-height: 1;
}
.faq details[open] summary::after { content: '\2212'; }
.faq .faq__a { padding: 0 0 1.25rem; max-width: 74ch; }
.faq .faq__a p { color: var(--ink-2); font-size: 1.02rem; margin: 0; }
.faq .faq__a p + p { margin-top: .8rem; }
.faq .faq__a a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: .2em; }
.prose .faq { margin-top: 1.1rem; }

/* ---- feature panels ------------------------------------------------------ */
.feats { display: grid; gap: clamp(1.4rem, 3vw, 2.25rem) 2rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .feats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .feats--3 { grid-template-columns: repeat(3, 1fr); } }
.feat { padding-top: 1.15rem; border-top: 4px solid var(--orange); }
.feat h3 { margin-bottom: .45rem; }
.feat p { color: var(--ink-2); font-size: .99rem; }
.band--dark .feat p { color: var(--on-dark-2); }

/* Notice box. Dark ink on a pale orange tint: 16:1. */
.notice { background: #fff1e3; border-left: 6px solid var(--orange); padding: 1.15rem 1.35rem; }
.notice p { color: var(--ink); font-size: .99rem; }
.notice p + p { margin-top: .6rem; }

/* ---- gallery -------------------------------------------------------------
   The tiles are at most ~400px wide against 640px sources, so nothing is stretched. */
.gal { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.gal--strip { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .gal--strip { grid-template-columns: repeat(2, 1fr); } }
.gal__b {
  padding: 0; border: 0; background: var(--steel-2); cursor: zoom-in;
  overflow: hidden; position: relative; display: block;
  aspect-ratio: 4 / 3;
}
.gal__b img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gal__b:hover img { transform: scale(1.04); }
.gal__b::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.gal__b:hover::after, .gal__b:focus-visible::after { transform: scaleX(1); }

/* ---- lightbox ------------------------------------------------------------
   width:auto, so a 640px photograph is shown at 640px and no larger. */
.lb {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(0,0,0,.96);
  align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem);
}
.lb[data-open] { display: flex; }
body.lb-open { overflow: hidden; }
body.lb-open .hdr { visibility: hidden; }
.lb__fig { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; gap: .9rem; }
.lb__fig img {
  max-width: 100%; max-height: calc(100vh - 11rem); width: auto; margin-inline: auto;
  border: 6px solid #fff; object-fit: contain;
}
.lb__cap { color: var(--on-dark-2); font-size: .94rem; text-align: center; max-width: 62ch; margin-inline: auto; }
.lb__n { color: var(--on-dark-3); font-size: .84rem; }
.lb__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; cursor: pointer;
  background: var(--orange); border: 0; color: var(--ink);
  font-size: 1.5rem; line-height: 1; display: grid; place-items: center; font-weight: 600;
}
.lb__btn:hover { background: #fff; }
.lb__prev { left: clamp(.5rem, 2vw, 1.5rem); }
.lb__next { right: clamp(.5rem, 2vw, 1.5rem); }
.lb__x {
  position: absolute; top: clamp(.75rem, 2vw, 1.5rem); right: clamp(.75rem, 2vw, 1.5rem);
  width: 46px; height: 46px; cursor: pointer;
  background: var(--coal-2); border: 2px solid var(--on-dark-3); color: #fff;
  font-size: 1.35rem; line-height: 1;
}
.lb__x:hover { background: #fff; color: var(--ink); }
@media (max-width: 640px) { .lb__btn { width: 42px; height: 42px; } }

/* ---- form -----------------------------------------------------------------
   Always a white card, on white pages and inside the dark contact band alike. Every text
   element is styled at two or more classes and nothing uses color:inherit, so a dark section
   can never bleed its colour into a field. */
.formcard {
  background: #fff; border: 1px solid var(--line-2); border-top: 8px solid var(--orange);
  padding: clamp(1.4rem, 3.2vw, 2.2rem); box-shadow: var(--shadow-1);
}
.band--dark .formcard { border-color: #fff; border-top-color: var(--orange); box-shadow: var(--shadow-2); }
.formcard .formcard__title { font-size: clamp(1.6rem, 2.5vw, 2.05rem); color: var(--ink); margin-bottom: .45rem; }
.formcard .formcard__title::after { content: none; }
.formcard .formcard__sub { color: var(--ink-2); font-size: .99rem; margin-bottom: 1.4rem; }

.f-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.f-grid .f-row--full { grid-column: 1 / -1; }
@media (max-width: 620px) { .f-grid { grid-template-columns: 1fr; } }

.f-row { display: grid; gap: .38rem; align-content: start; }
.f-row .f-label { font-size: .9rem; font-weight: 600; color: var(--ink); }
.f-row .f-label .f-req { color: #a3271b; }
.f-row .f-label .f-opt { font-weight: 400; font-size: .82rem; color: var(--ink-3); text-transform: lowercase; }
.f-row .f-input, .f-row .f-textarea, .f-row .f-select {
  width: 100%; padding: .78rem .9rem;
  font-family: var(--sans); font-size: 1rem; line-height: 1.45;
  color: var(--ink); background: #f8f9f9;
  -webkit-text-fill-color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
  appearance: none; -webkit-appearance: none;
}
.f-row .f-select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e1112' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 16px; padding-right: 2.6rem;
}
.f-row .f-input:focus, .f-row .f-textarea:focus, .f-row .f-select:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--orange);
}
.f-row .f-textarea { min-height: 124px; resize: vertical; }
.f-row .f-input::placeholder, .f-row .f-textarea::placeholder { color: #6a7377; opacity: 1; }

/* Honeypot. Not type=hidden and not display:none - capable bots skip both. Off canvas,
   out of the tab order, hidden from assistive tech. */
.f-hp { position: absolute !important; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }

.formcard .f-note { font-size: .88rem; color: var(--ink-2); margin-top: 1rem; }
.formcard .f-note a { color: var(--ink); font-weight: 600; }
.formcard .f-msg { margin-top: 1rem; padding: .85rem 1rem; border-radius: var(--r-sm); font-size: .95rem; }
.formcard .f-msg--err { background: #fdeceb; color: #8a2418; border: 1px solid #f3c9c4; }
.formcard .f-msg--ok  { background: #eaf5ec; color: #1d5c30; border: 1px solid #c3e2ca; }
.formcard .f-submit { margin-top: 1.3rem; width: 100%; }
.formcard .f-submit:hover { background: var(--ink); color: var(--orange); }
.formcard .f-submit[disabled] { opacity: .6; cursor: progress; }

.contact-split { display: grid; gap: clamp(2rem, 4vw, 4rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px) { .contact-split { grid-template-columns: .85fr 1.15fr; } }

.cinfo { display: grid; gap: 1.3rem; }
.cinfo__item { display: grid; gap: .2rem; }
.cinfo__k { font-family: var(--display); font-weight: 800; font-size: .98rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.cinfo__v { font-size: 1.12rem; font-weight: 600; color: var(--ink); }
.cinfo__v a { color: var(--ink); text-decoration: none; }
.cinfo__v a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; }
.cinfo__v small { display: block; font-size: .9rem; font-weight: 400; color: var(--ink-2); }
.cinfo__v--big { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 3.4vw, 2.6rem); letter-spacing: .02em; line-height: 1.1; }
.band--dark .cinfo__k { color: var(--orange); }
.band--dark .cinfo__v, .band--dark .cinfo__v a { color: #fff; }
.band--dark .cinfo__v small { color: var(--on-dark-2); }

/* Service page: copy column with a sticky enquiry card beside it (ads land here). */
.svc { display: grid; gap: clamp(2rem, 4vw, 4rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1040px) {
  .svc { grid-template-columns: minmax(0, 1.5fr) minmax(330px, .9fr); }
  .svc__aside { position: sticky; top: 140px; }
}
.svc__fig { margin-top: 2rem; margin-bottom: .5rem; }
.svc__fig img { border: 6px solid #fff; outline: 1px solid var(--line-2); box-shadow: var(--shadow-1); }
.svc__fig figcaption { margin-top: .65rem; font-size: .88rem; color: var(--ink-3); }

/* ---- areas --------------------------------------------------------------- */
.areas { display: flex; flex-wrap: wrap; gap: .5rem; }
.areas li {
  padding: .45rem .95rem; font-size: .95rem; font-weight: 600;
  background: #fff; border: 1px solid var(--line-2); color: var(--ink-2);
}
.band--dark .areas li { background: var(--coal-2); border-color: var(--coal-3); color: var(--on-dark-2); }

/* ---- CTA band ------------------------------------------------------------
   A stock photograph of a welder, darkened until it is texture rather than evidence. */
.ctaband { position: relative; background: var(--coal); color: var(--on-dark-2); overflow: hidden; isolation: isolate; }
.ctaband { background: var(--black); }
.ctaband__bg {
  position: absolute; top: 0; bottom: 0; right: 0; width: min(100%, 1280px); z-index: -2;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
}
@media (max-width: 760px) { .ctaband__bg { -webkit-mask-image: none; mask-image: none; } }
.ctaband__bg img { width: 100%; height: 100%; max-width: none !important; object-fit: cover; }
.ctaband--photo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.8) 55%, rgba(0,0,0,.62) 100%); }
@media (max-width: 760px) { .ctaband--photo::before { background: rgba(0,0,0,.86); } }
.ctaband__in { padding-block: clamp(2.75rem, 5.5vw, 4.5rem); display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 880px) { .ctaband__in { grid-template-columns: 1.35fr auto; gap: 2.5rem; } }
.ctaband h2 { color: #fff; }
.ctaband p { color: var(--on-dark-2); margin-top: .85rem; max-width: 60ch; }
.ctaband .hero__call { margin-top: 1rem; }

/* ---- footer --------------------------------------------------------------
   Pure black again: the logo sits here. */
.ftr { background: var(--black); color: var(--on-dark-2); padding-block: clamp(2.75rem, 5vw, 4.25rem) 0; }
.ftr__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ftr__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .ftr__grid { grid-template-columns: 1.55fr 1fr .9fr 1.15fr; gap: 3rem; } }
.ftr__logo img { width: 230px; margin: -.5rem 0 .6rem -.6rem; }
.ftr p { color: var(--on-dark-2); font-size: .97rem; max-width: 44ch; }
.ftr .ftr__hours { margin-top: 1rem; color: var(--on-dark-3); font-size: .9rem; }
.ftr .ftr__h { font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); margin-bottom: .9rem; }
.ftr ul { display: grid; gap: .5rem; }
.ftr a { color: var(--on-dark-2); text-decoration: none; font-size: .97rem; }
.ftr a:hover { color: var(--orange); text-decoration: underline; }
.ftr__contact li { color: var(--on-dark-2); font-size: .97rem; }
.ftr .ftr__phone { font-family: var(--display); font-weight: 800; font-size: 1.9rem; letter-spacing: .03em; line-height: 1.1; color: #fff; }
.ftr .ftr__sub { color: var(--on-dark-3); font-size: .86rem; }
.ftr .ftr__area { margin-top: clamp(2rem, 4vw, 3rem); max-width: none; color: var(--on-dark-2); font-size: .97rem; }
.ftr .ftr__area span { font-family: var(--display); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); margin-right: .6rem; }
.ftr__bottom {
  margin-top: clamp(1.5rem, 3vw, 2.25rem); padding-block: 1.3rem;
  border-top: 1px solid var(--coal-3);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  font-size: .88rem; color: var(--on-dark-3);
}
.ftr .ftr__credit { color: var(--on-dark-3); text-decoration: none; font-size: .88rem; }
.ftr .ftr__credit:hover { color: #fff; text-decoration: underline; }

/* ---- floating contact bar -----------------------------------------------
   Fleet component, RE-THEMED. The component's default is a white icon, which on this site's
   orange would measure 2.8:1 - under the 3:1 a UI control needs. Here the fill is the brand
   orange and the icon is --ink (6.9:1); hover inverts to orange on black. Collapsed state is
   visibility+pointer-events so the buttons genuinely leave the tab order. */
.floatbar { position: fixed; right: 16px; bottom: 16px; z-index: 110; display: grid; gap: 10px; justify-items: center; }
.floatbar__btn, .floatbar__toggle {
  width: 52px; height: 52px; border-radius: var(--pill); display: grid; place-items: center;
  background: var(--orange); color: var(--ink); border: 2px solid var(--black); cursor: pointer; text-decoration: none;
  box-shadow: var(--shadow-2);
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.floatbar__btn svg, .floatbar__toggle svg { width: 23px; height: 23px; fill: currentColor; }
.floatbar__btn { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px) scale(.85); }
.floatbar[data-open] .floatbar__btn { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
/* Restated AFTER the [data-open] rule: an equally specific transform:none written later
   silently cancels a hover scale. That bug survived weeks in the fleet reference. */
.floatbar[data-open] .floatbar__btn:hover { transform: scale(1.08); background: var(--black); color: var(--orange); border-color: var(--orange); }
.floatbar__toggle:hover { background: var(--black); color: var(--orange); border-color: var(--orange); }
.floatbar[data-open] .floatbar__toggle { background: var(--black); color: var(--orange); border-color: var(--orange); }
@media (max-width: 560px) { .floatbar { right: 12px; bottom: 12px; } }

.fbpop {
  position: fixed; inset: 0; z-index: 130; display: none; place-items: center; padding: 1.5rem;
  background: rgba(0,0,0,.72);
}
.fbpop[data-open] { display: grid; }
.fbpop__card {
  background: #fff; border-top: 8px solid var(--orange); padding: 2rem 2.25rem; text-align: center;
  position: relative; box-shadow: var(--shadow-2); max-width: 420px; width: 100%;
}
.fbpop__card .fbpop__t { font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: .5rem; }
.fbpop__card .fbpop__num { font-family: var(--display); font-weight: 800; font-size: 2.6rem; letter-spacing: .02em; color: var(--ink); text-decoration: none; }
.fbpop__card .fbpop__num:hover { text-decoration: underline; text-decoration-color: var(--orange); }
.fbpop__x { position: absolute; top: .6rem; right: .6rem; width: 36px; height: 36px;
  border: 0; background: var(--paper-2); color: var(--ink); cursor: pointer; }

/* ---- scroll reveal ------------------------------------------------------
   threshold 0 with rootMargin only, scoped to .js so no-JS visitors and crawlers see
   everything. Opacity and transform only - nothing here can shift the layout. */
.js [data-rv] { opacity: 0; transform: translateY(14px); }
.js [data-rv].is-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }
@media (prefers-reduced-motion: reduce) {
  .js [data-rv] { opacity: 1; transform: none; }
  .js [data-rv].is-in { transition: none; }
  .gal__b img, .scard { transition: none; }
}

/* ---- print --------------------------------------------------------------- */
@media print {
  .hdr, .topbar, .floatbar, .lb, .ctaband, .formcard, .burger, .hazard { display: none !important; }
  body { background: #fff; color: #000; }
}