/* =============================================================================
   Delta Roofing Inc. - deltaroofing.ca
   Single stylesheet · mobile-first · no frameworks · no build step
   -----------------------------------------------------------------------------
   Premium commercial-contractor design: dark/enterprise (Flynn) meets modern,
   crisp, high-contrast (AA Roofing). Every colour is a CSS custom property so
   the palette swaps in one place once Delta's brand colours are confirmed.
   ========================================================================== */

/* ---- Self-hosted variable fonts (2 WOFF2 files, font-display: swap) -------- */
@font-face {
  font-family: "Archivo";               /* headings - geometric industrial grotesque */
  src: url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "InterVar";              /* body - clean neutral */
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  /* ---- Brand / dark palette ---- */
  --navy-950: #081521;   /* darkest - trust band */
  --navy-900: #0b1b29;   /* footer / quote */
  --navy-800: #0e2233;   /* primary dark sections + header */
  --navy-700: #123049;   /* dark-section cards / hairlines */
  --navy-600: #1b3a5b;   /* logo navy - mid accent */
  --navy-100: #e9eef4;

  /* ---- Accent (safety amber-orange) - PLACEHOLDER, confirm brand accent ---- */
  --accent:      #f5811e;
  --accent-600:  #d96b0f;   /* graphics / borders on light */
  --accent-ink:  #a85400;   /* accent TEXT on light bg - AA ≥ 4.5:1 on --paper/--card */
  --accent-300:  #ffb066;   /* accent text/links on dark bg */
  --accent-tint: #fdf1e6;
  --gold:        #ffc24b;   /* rating stars */

  /* ---- Warm neutrals (never pure flat white everywhere) ---- */
  --paper:   #f7f4ef;   /* light section bg */
  --paper-2: #efeae2;   /* alt light bg */
  --card:    #ffffff;   /* card surface on light */
  --ink:     #14202b;   /* body text on light */
  --ink-soft:#4a5b6b;   /* secondary text on light */
  --line:    #e2ddd4;   /* borders on light */

  /* ---- Text on dark ---- */
  --on-dark:      #f4f7fa;
  --on-dark-soft: rgba(238, 244, 250, .78);
  --line-dark:    rgba(255, 255, 255, .14);

  --focus: #ffc24b;

  /* ---- Type ---- */
  --font-display: "Archivo", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-sans: "InterVar", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-hero: clamp(2.5rem, 6vw, 4.5rem);
  --fs-900: clamp(2rem, 1.3rem + 3vw, 3.25rem);
  --fs-700: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
  --fs-500: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  --fs-400: 1.0625rem;
  --fs-300: 0.9375rem;
  --fs-200: 0.8125rem;

  /* ---- Layout ---- */
  --container: 1200px;
  --gutter: clamp(1.1rem, 4vw, 2.25rem);
  --section-y: clamp(4rem, 8vw, 7rem);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 6px rgba(8,21,33,.06), 0 1px 2px rgba(8,21,33,.08);
  --shadow-md: 0 12px 30px rgba(8,21,33,.12);
  --shadow-lg: 0 28px 60px rgba(8,21,33,.28);
  --header-h: 96px;
  --header-h-scrolled: 66px;
  --t: .22s cubic-bezier(.4,.0,.2,1);
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  overflow-x: clip;                   /* clip stray overflow without making body a scroll container (keeps sticky header working) */
  font-family: var(--font-sans);
  font-size: var(--fs-400);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.08; letter-spacing: -0.02em; font-weight: 800;
  color: var(--navy-900); margin: 0 0 .5em;
}
p { margin: 0 0 1rem; }
a { color: var(--navy-600); }
ul, ol { margin: 0; padding: 0; list-style: none; } /* styled numerals are used throughout; suppress native <ol> markers site-wide */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-sm);
}

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden, .skip-link:not(:focus):not(:focus-within) {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 1rem; top: .75rem; z-index: 1000;
  background: var(--accent); color: #201200; font-weight: 700; padding: .7rem 1.1rem;
  border-radius: var(--radius-sm); text-decoration: none; transform: translateY(-160%); transition: transform var(--t);
}
.skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-shadow: 0 8px 20px rgba(245,129,30,.28);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-300); line-height: 1.1;
  letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  padding: .95rem 1.5rem; border-radius: var(--radius-sm); border: 2px solid transparent;
  cursor: pointer; transition: transform var(--t), background var(--t), color var(--t), box-shadow var(--t), border-color var(--t);
}
.btn--lg { padding: 1.1rem 1.9rem; font-size: var(--fs-400); }
.btn--block { width: 100%; }
.btn::after { content: "→"; font-size: 1.05em; transform: translateX(0); transition: transform var(--t); }
.btn--accent { background: var(--accent); color: #201200; box-shadow: var(--btn-shadow); }
.btn--accent:hover { background: var(--accent-600); color: #fff; transform: translateY(-3px); box-shadow: 0 14px 30px rgba(245,129,30,.42); }
.btn--accent:hover::after { transform: translateX(4px); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--ghost:hover { background: #fff; color: var(--navy-900); border-color: #fff; transform: translateY(-3px); }
.btn--light { background: #fff; color: var(--navy-900); }
.btn--light:hover { background: var(--navy-100); transform: translateY(-3px); }
/* buttons that shouldn't show the arrow */
.header-cta::after, .nav-cta-mobile::after { content: none; }

.link-strong {
  display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; text-decoration: none;
  color: var(--accent-ink); border-bottom: 2px solid transparent; padding-bottom: 2px; transition: border-color var(--t), gap var(--t);
}
.link-strong:hover { border-bottom-color: var(--accent); gap: .65rem; }

/* --------------------------------------------------------------------------
   Header - transparent over hero, solid dark on scroll
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy-800); border-bottom: 1px solid var(--line-dark);
  transition: background var(--t), box-shadow var(--t), border-color var(--t), height var(--t);
}
.page-home .site-header:not(.is-scrolled) { background: transparent; border-bottom-color: transparent; }
.site-header.is-scrolled { background: rgba(11,27,41,.94); backdrop-filter: blur(8px); box-shadow: var(--shadow-md); }
.header-inner {
  display: flex; align-items: center; gap: 1rem; position: relative; /* mega panels anchor here */
  max-width: var(--container); margin-inline: auto; padding: 0 var(--gutter);
  height: var(--header-h); transition: height var(--t);
}
.site-header.is-scrolled .header-inner { height: var(--header-h-scrolled); }

.brand { display: inline-flex; align-items: center; margin-right: auto; }
/* Logo is dark navy artwork → render white for the dark header */
.brand__logo { width: auto; height: 76px; filter: brightness(0) invert(1); transition: height var(--t); }
.site-header.is-scrolled .brand__logo { height: 44px; }

/* Primary nav + mega-menu + mobile drawer live in the "SITE NAVIGATION"
   section near the end of this file (kept together, and ordered after the
   service-area map rules so the decorative panel map can override them). */

.header-actions { display: flex; align-items: center; gap: 1.1rem; margin-left: 1rem; }
.header-phone { display: none; text-decoration: none; color: var(--on-dark); line-height: 1.05; }
.header-phone__label { display: block; font-size: var(--fs-200); color: var(--on-dark-soft); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.header-phone__num { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.header-phone:hover .header-phone__num { color: var(--accent-300); }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; background: var(--accent); border: 0; border-radius: var(--radius-sm); cursor: pointer;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; display: block; width: 22px; height: 2px; background: #201200; position: relative; transition: transform var(--t), opacity var(--t);
}
.nav-toggle__bars::before { position: absolute; top: -7px; }
.nav-toggle__bars::after  { position: absolute; top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Hero - full-bleed photo, gradient overlay, clipped bottom
   -------------------------------------------------------------------------- */
.hero {
  position: relative; color: #fff; isolation: isolate;
  margin-top: calc(-1 * var(--header-h));      /* slide under the transparent header */
  padding-top: var(--header-h);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4.5vw), 0 100%);
  background: var(--navy-900);
}
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__img { width: 100%; height: 100%; object-fit: cover; }
/* Rotating banner (multiple hero images): stack + crossfade */
.hero__media--slideshow .hero__img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.hero__media--slideshow .hero__img.is-active { opacity: 1; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(118deg, rgba(8,21,33,.94) 0%, rgba(8,21,33,.74) 42%, rgba(8,21,33,.34) 100%),
    linear-gradient(0deg, rgba(8,21,33,.72) 0%, rgba(8,21,33,0) 40%);
}
.hero__content { max-width: var(--container); margin-inline: auto; padding: clamp(3.5rem, 9vw, 7rem) var(--gutter) clamp(5rem, 10vw, 8rem); }

.hero__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: 1.5rem; }
/* Trust pill (dark-glass) */
.hero__badge {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  padding: .5rem .95rem; border-radius: var(--radius-pill); backdrop-filter: blur(4px);
  font-size: var(--fs-200); font-weight: 600; color: #fff; letter-spacing: .02em;
}

.hero__title { color: #fff; font-size: var(--fs-hero); font-weight: 800; letter-spacing: -0.025em; line-height: 1.04; max-width: 18ch; text-wrap: balance; margin-bottom: 1.1rem; }
.hero__sub { font-size: var(--fs-500); color: var(--on-dark-soft); max-width: 56ch; line-height: 1.55; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* --------------------------------------------------------------------------
   Section shell + eyebrow
   -------------------------------------------------------------------------- */
.section { padding: var(--section-y) 0; position: relative; }
.section--tint { background: var(--paper-2); }
/* City pages open with the tiles directly under the banner; a full --section-y
   on both sides of that seam left a very large gap before the local copy. */
.city-tiles { padding-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.city-tiles + .section { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
/* The services band follows the local copy; a full --section-y above it pushed
   the tint a long way down the page. */
.city-services { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.section--dark { background: var(--navy-800); color: var(--on-dark); }
/* Two dark sections stacking (e.g. industries → stats) share one navy band;
   drop the second's top padding so the gap isn't doubled. */
.section--dark + .section--dark { padding-top: 0; }
.section--dark .section-title { color: #fff; }
.section--dark .section-lead { color: var(--on-dark-soft); }

.section-head { max-width: 60ch; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.section-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  text-transform: uppercase; letter-spacing: .18em; font-weight: 700; font-size: var(--fs-200);
  font-family: var(--font-display); color: var(--accent-ink); margin: 0 0 1rem;
}
.section-eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--accent); border-radius: 2px; }
.section--dark .section-eyebrow { color: var(--accent-300); }
.section-title { font-size: var(--fs-700); text-wrap: balance; }
.section-lead { font-size: var(--fs-500); color: var(--ink-soft); line-height: 1.55; }
.section-more { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   Card grids
   -------------------------------------------------------------------------- */
.cards { display: grid; gap: clamp(1.1rem, 2.5vw, 1.75rem); }
.cards--3, .cards--4 { grid-template-columns: 1fr; }

/* --------------------------------------------------------------------------
   Services - photo-forward portfolio tiles (architectural, not soft cards)
   Base rules = final/resting state (no-JS & reduced-motion show everything).
   Entrance (mask wipe + image settle + text rise) lives under `.services-anim`.
   -------------------------------------------------------------------------- */
.stiles { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2.5vw, 1.5rem); }
.stile {
  position: relative; display: block; overflow: hidden; border-radius: 6px; isolation: isolate;
  aspect-ratio: 16 / 11; background: var(--paper-2); text-decoration: none; color: #fff;
}
.stile__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; clip-path: inset(0 0 0 0); }
.stile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1); }
.stile__scrim {
  position: absolute; inset: 0; opacity: .92; transition: opacity .7s ease;
  background: linear-gradient(to top, rgba(8,21,33,.88) 0%, rgba(8,21,33,.55) 26%, rgba(8,21,33,0) 55%);
}
.stile__body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: clamp(1.3rem, 3vw, 1.9rem); display: grid; gap: .55rem; }
.stile__eyebrow { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-200); letter-spacing: .16em; color: var(--accent-300); }
.stile__title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; font-size: clamp(1.45rem, 2.6vw, 1.9rem); color: #fff; margin: 0; }
.stile__text { color: rgba(255,255,255,.86); font-size: var(--fs-300); line-height: 1.5; max-width: 44ch; }
.stile__link { display: inline-flex; align-items: center; gap: .45rem; margin-top: .35rem; font-weight: 700; color: var(--accent-300); }
.stile__arrow { display: inline-block; transition: transform var(--t); }
.stile__bar { position: absolute; left: 0; bottom: 0; z-index: 3; width: 100%; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }

/* Mobile: drop the fixed ratio and let each tile grow to fit its overlay text
   (bottom-anchored), so long descriptions never clip the title at the top. */
@media (max-width: 899px) {
  .stile { display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: auto; min-height: 15rem; }
  .stile__body { position: relative; inset: auto; width: 100%; background: linear-gradient(to top, rgba(8,21,33,.94) 55%, rgba(8,21,33,.35)); }
}

/* Hover - slow heavy zoom, deepen scrim, arrow slide, accent bottom bar */
@media (hover: hover) {
  .stile:hover .stile__scrim { opacity: 1; }
  .stile:hover .stile__arrow { transform: translateX(4px); }
  .stile:hover .stile__bar { transform: scaleX(1); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .stile__media { transition: transform .7s ease-out; }
  .stile:hover .stile__media { transform: scale(1.06); }
}

/* Per-tile entrance sequence (heading fires first ~200ms before tile 1) */
.stile:nth-child(1) { --tb: 200ms; }
.stile:nth-child(2) { --tb: 380ms; }
.stile:nth-child(3) { --tb: 560ms; }

/* Hidden initial states - ONLY while animating */
.services-anim .stile__media { clip-path: inset(100% 0 0 0); transition: clip-path .9s cubic-bezier(.65,0,.35,1) var(--tb), transform .7s ease-out; }
.services-anim .stile__img { transform: scale(1.15); transition: transform 1.1s cubic-bezier(.65,0,.35,1) var(--tb); }
.services-anim .stile__eyebrow,
.services-anim .stile__title,
.services-anim .stile__text,
.services-anim .stile__link { opacity: 0; transform: translateY(16px); }
.services-anim .stile__eyebrow { transition: opacity .5s ease calc(var(--tb) + 540ms), transform .5s ease calc(var(--tb) + 540ms); }
.services-anim .stile__title   { transition: opacity .5s ease calc(var(--tb) + 620ms), transform .5s ease calc(var(--tb) + 620ms); }
.services-anim .stile__text    { transition: opacity .5s ease calc(var(--tb) + 700ms), transform .5s ease calc(var(--tb) + 700ms); }
.services-anim .stile__link    { transition: opacity .5s ease calc(var(--tb) + 780ms), transform .5s ease calc(var(--tb) + 780ms); }

/* Revealed states */
.services-anim.is-inview .stile__media { clip-path: inset(0 0 0 0); }
.services-anim.is-inview .stile__img { transform: scale(1); }
.services-anim.is-inview .stile__eyebrow,
.services-anim.is-inview .stile__title,
.services-anim.is-inview .stile__text,
.services-anim.is-inview .stile__link { opacity: 1; transform: none; }

/* Desktop → three tall imposing tiles across */
@media (min-width: 768px) {
  .stiles { grid-template-columns: repeat(3, 1fr); }
  .stile { aspect-ratio: 4 / 5; }
}

/* Emergency strip - self-contained urgent alert card on the light section */
.emergency-strip { margin-top: clamp(2.5rem, 5vw, 3.75rem); padding-inline: var(--gutter); }
/* Contact page: breathing room below the emergency strip, above the contact form. */
.page-contact .emergency-strip { margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.emergency-strip__card {
  max-width: var(--container); margin-inline: auto;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem);
  background: linear-gradient(120deg, var(--navy-900) 0%, var(--navy-800) 100%);
  border: 1px solid var(--line-dark); border-left: 6px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow-md); color: var(--on-dark);
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3.5vw, 2.5rem);
}
.emergency-strip__badge {
  flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(245,129,30,.16); color: var(--accent-300);
}
.emergency-strip__copy { flex: 1 1 auto; min-width: 0; }
.emergency-strip__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.15rem, 2.2vw, 1.5rem); color: #fff; margin: 0 0 .2rem; line-height: 1.15; }
.emergency-strip__sub { margin: 0; color: var(--on-dark-soft); font-size: var(--fs-300); line-height: 1.5; }
.emergency-strip__cta {
  flex: none; display: inline-flex; flex-direction: column; text-decoration: none;
  background: var(--accent); color: #201200; padding: .7rem 1.4rem; border-radius: var(--radius-sm);
  box-shadow: 0 8px 20px rgba(245,129,30,.28); transition: transform var(--t), background var(--t), color var(--t), box-shadow var(--t);
}
.emergency-strip__cta:hover { background: var(--accent-600); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(245,129,30,.42); }
.emergency-strip__cta-label { font-size: var(--fs-200); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.emergency-strip__cta-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.15; }

@media (max-width: 639px) {
  .emergency-strip__card { flex-direction: column; align-items: flex-start; text-align: left; }
  .emergency-strip__cta { width: 100%; align-items: center; }
}

/* Industries - 3D flip cards on dark (front = photo+title, back = accent+CTA) */
.industry { perspective: 1200px; background: transparent; }
.industry__link { display: block; text-decoration: none; color: inherit; border-radius: var(--radius); }
.industry__flip {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 5;
  transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.industry__face {
  position: absolute; inset: 0; border-radius: var(--radius); overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: var(--shadow-md);
}
/* Front */
.industry__front { background: var(--navy-700); }
.industry__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.industry__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,21,33,.9) 0%, rgba(8,21,33,.5) 30%, rgba(8,21,33,0) 62%); }
.industry__body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 1.2rem 1.35rem 1.4rem; }
.industry__title { display: block; font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.2rem; margin-bottom: .35rem; }
.industry__text { display: block; color: rgba(255,255,255,.82); font-size: var(--fs-300); line-height: 1.5; }
/* Back */
.industry__back {
  transform: rotateY(180deg);
  background: linear-gradient(150deg, var(--navy-700) 0%, var(--navy-950) 100%);
  border-top: 3px solid var(--accent);
  display: grid; align-content: center; gap: .55rem; padding: clamp(1.3rem, 3vw, 1.7rem);
}
.industry__back-title { font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 1.35rem; line-height: 1.1; }
.industry__back-text { color: var(--on-dark-soft); font-size: var(--fs-300); line-height: 1.55; }
.industry__cta { display: inline-flex; align-items: center; gap: .45rem; margin-top: .35rem; font-family: var(--font-display); font-weight: 700; color: var(--accent-300); }

/* Flip on hover or keyboard focus - motion-safe, pointer devices only.
   Touch / reduced-motion never flip; the front already carries all content. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .industry:hover .industry__flip,
  .industry:focus-within .industry__flip { transform: rotateY(180deg); }
}

/* --------------------------------------------------------------------------
   Process - editorial "lit rows" (light-background skin). Shares the
   two-column sticky layout (.values__grid / .values__aside) and the JS
   reveal + active-on-centre hooks (data-lit-row) with the About values
   section. Base rules = resting/lit state, so no-JS / reduced-motion shows
   every row fully visible and lit; the .anim layer adds the dim→lit motion.
   -------------------------------------------------------------------------- */
.flow__list { list-style: none; margin: 0; padding: 0; }
.flow__hint { color: var(--ink-soft); font-size: var(--fs-500); margin: 1rem 0 0; max-width: 32ch; line-height: 1.5; }
.flow__row {
  position: relative; display: grid; grid-template-columns: auto 1fr;
  gap: clamp(1rem, 3vw, 2rem); align-items: start;
  padding: clamp(1.5rem, 3.5vw, 2.25rem) 0; border-top: 1px solid var(--line);
}
.flow__row:last-child { border-bottom: 1px solid var(--line); }
.flow__idx { font-family: var(--font-display); font-weight: 900; line-height: 1; font-size: clamp(2.5rem, 6vw, 3.75rem); color: var(--accent); opacity: 1; }
.flow__name { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 1.75rem); color: var(--navy-900); margin: 0 0 .4rem; }
.flow__text { color: var(--ink-soft); margin: 0; max-width: 60ch; line-height: 1.55; }

/* Motion layer: muted at rest, lit on the centred row, staggered reveal. */
.anim .flow__row { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 80ms); will-change: opacity, transform; }
.anim .flow__row.is-visible { opacity: 1; transform: none; }
.anim .flow__idx { opacity: .28; transition: opacity .5s ease; }
.anim .flow__name { color: var(--ink-soft); transition: color .5s ease; }
.anim .flow__row.is-active .flow__idx { opacity: 1; }
.anim .flow__row.is-active .flow__name { color: var(--navy-900); }

/* --------------------------------------------------------------------------
   Trust band - dark, logo-row placeholders
   -------------------------------------------------------------------------- */
.trust-band { background: var(--navy-950); color: var(--on-dark); text-align: center; }
.trust-band__title { font-size: var(--fs-500); color: #fff; margin-bottom: 2rem; }
.trust-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 2rem; }
.trust-logo {
  display: inline-flex; align-items: center; justify-content: center; min-width: 150px; height: 68px; padding: 0 1.5rem;
  border: 1px solid var(--line-dark); border-radius: var(--radius-sm); background: rgba(255,255,255,.04);
  font-family: var(--font-display); font-weight: 700; color: #fff; font-size: var(--fs-300);
  opacity: .6; filter: grayscale(1); transition: opacity var(--t), filter var(--t), border-color var(--t);
}
.trust-logo:hover { opacity: 1; filter: grayscale(0); border-color: var(--accent); }
.trust-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2.5rem; color: var(--on-dark-soft); }
.trust-facts strong { color: var(--accent-300); }
.trust-note { margin-top: 1.25rem; font-size: var(--fs-200); color: var(--on-dark-soft); opacity: .8; }

/* --------------------------------------------------------------------------
   Projects - photo-forward with overlaid category pill
   -------------------------------------------------------------------------- */
.project {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--t), box-shadow var(--t);
}
.project:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.project__img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.project__type {
  position: absolute; top: 1rem; left: 1rem; z-index: 2; margin: 0;
  background: var(--accent); color: #201200; font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-200);
  padding: .35rem .8rem; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);
}
.project__body { padding: 1.35rem 1.5rem 1.6rem; }
.project__name { font-size: var(--fs-500); margin-bottom: .85rem; color: var(--ink-soft); font-style: italic; font-weight: 500; }
/* In the 3-across grid (industries / projects) the summary is the card's lead
   text, not a caption — solid, non-italic display type at a smaller size. The
   italic showcase treatment above stays on the single .case-solo card used on
   service pages. */
.cards .project__name { font-family: var(--font-display); font-style: normal; font-weight: 600; font-size: var(--fs-400); color: var(--navy-900); line-height: 1.4; }
.project__meta { display: flex; gap: 2.5rem; margin: 0; }
.project__meta dt { font-size: var(--fs-200); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin-bottom: .15rem; }
.project__meta dd { margin: 0; font-family: var(--font-display); font-weight: 700; color: var(--navy-900); font-size: var(--fs-400); }

/* --------------------------------------------------------------------------
   Service areas - pill / chip row
   -------------------------------------------------------------------------- */
.area-list { display: flex; flex-wrap: wrap; gap: .75rem; }
.area-list a {
  display: inline-flex; align-items: center; text-decoration: none; font-family: var(--font-display); font-weight: 600;
  color: var(--navy-800); padding: .7rem 1.25rem; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-pill); transition: all var(--t);
}
.area-list a:hover { background: var(--navy-800); color: #fff; border-color: var(--navy-800); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* --------------------------------------------------------------------------
   Quote - two-column, raised card on dark
   -------------------------------------------------------------------------- */
.quote { background: var(--navy-900); color: var(--on-dark); }
.quote .section-eyebrow { color: var(--accent-300); }
.quote .section-title { color: #fff; }
.quote .section-lead { color: var(--on-dark-soft); }
.quote__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; }
.quote__points { margin-top: 1.5rem; display: grid; gap: .7rem; }
.quote__points li { position: relative; padding-left: 1.9rem; color: var(--on-dark-soft); }
.quote__points li::before { content: "✓"; position: absolute; left: 0; top: -1px; color: #201200; background: var(--accent); width: 1.3rem; height: 1.3rem; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 800; }
.quote__points a { color: #fff; }

.quote-form {
  background: var(--card); color: var(--ink); border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--shadow-lg); border-top: 4px solid var(--accent);
}
.form-row { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
.form-field { margin-bottom: 1.1rem; }
.form-field label { display: block; font-weight: 600; font-size: var(--fs-300); margin-bottom: .4rem; color: var(--navy-900); }
.req { color: var(--accent-ink); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; font: inherit; min-height: 48px; padding: .75rem .9rem; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; transition: border-color var(--t), box-shadow var(--t);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245,129,30,.18); outline: none;
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-fineprint { font-size: var(--fs-200); color: var(--ink-soft); margin: 1rem 0 0; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy-950); color: var(--on-dark-soft); font-size: var(--fs-300); }
.footer-inner {
  max-width: var(--container); margin-inline: auto; padding: clamp(3rem, 6vw, 4.5rem) var(--gutter);
  display: grid; grid-template-columns: 1fr; gap: 2.5rem;
}
.footer-logo { height: 50px; width: auto; filter: brightness(0) invert(1); margin-bottom: 1.1rem; }
.footer-tagline { color: var(--on-dark-soft); max-width: 32ch; }
.footer-heading { color: #fff; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .02em; margin: 0 0 1rem; }
.footer-heading--spaced { margin-top: 1.9rem; }
/* The global `a` colour is navy — unreadable on the near-black footer — so the
   linked headings (Services, Service Areas) take the heading's own white. */
.footer-heading a { color: inherit; text-decoration: none; }
.footer-heading a:hover, .footer-heading a:focus-visible { color: var(--accent-300); }
.footer-list { display: grid; gap: .6rem; }
.footer-list--2col { grid-template-columns: 1fr 1fr; }
.footer-list a, .nap a { color: var(--on-dark-soft); text-decoration: none; transition: color var(--t); }
.footer-list a:hover, .nap a:hover { color: var(--accent-300); }
.footer-emergency { color: var(--accent-300); font-weight: 700; }
.nap { font-style: normal; margin: 0 0 1.4rem; line-height: 1.7; }
.nap strong { color: #fff; display: inline-block; margin-bottom: .25rem; }
.nap-links { display: inline-flex; gap: 1rem; margin-top: .4rem; font-size: var(--fs-200); }
.nap-links a { font-weight: 700; color: var(--accent-300); }
.footer-badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.footer-badges li { border: 1px solid var(--line-dark); border-radius: var(--radius-sm); padding: .4rem .7rem; font-size: var(--fs-200); font-weight: 600; }
.footer-bottom {
  border-top: 1px solid var(--line-dark);
  max-width: var(--container); margin-inline: auto; padding: 1.4rem var(--gutter);
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; font-size: var(--fs-200);
}
.footer-bottom p { margin: 0; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-legal a { color: var(--on-dark-soft); text-decoration: none; }
.footer-legal a:hover { color: #fff; }

.notice { padding: 1rem 1.25rem; border-radius: var(--radius-sm); margin: 0 0 1.25rem; }
.notice--error { background: #fdeceb; color: #c0392b; border: 1px solid #f3c6c2; }
.notice--ok { background: #e7f4ec; color: #1e7a46; border: 1px solid #bfe2cd; }

/* --------------------------------------------------------------------------
   Scroll-reveal (progressive enhancement; JS adds .reveal-ready on <html>)
   -------------------------------------------------------------------------- */
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width: 560px) {
  .cards--3, .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: repeat(2, 1fr); }
  .header-phone { display: block; }
}
@media (min-width: 900px) {
  .cards--3 { grid-template-columns: repeat(3, 1fr); }
  .cards--4 { grid-template-columns: repeat(4, 1fr); }
  .quote__grid { grid-template-columns: 5fr 7fr; align-items: start; }
  .footer-inner { grid-template-columns: 2.2fr 1fr 1.2fr 1.2fr; }
}

/* (mobile nav rules moved into the "SITE NAVIGATION" section at end of file) */

/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */
.page-hero { position: relative; color: #fff; background: var(--navy-900); overflow: hidden; isolation: isolate; }
.page-hero__media { position: absolute; inset: 0; z-index: -1; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__scrim { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(8,21,33,.94) 0%, rgba(8,21,33,.72) 55%, rgba(8,21,33,.5) 100%); }
.page-hero__inner { max-width: var(--container); margin-inline: auto; padding: clamp(3rem, 7vw, 5.5rem) var(--gutter); }
.page-hero .section-eyebrow { color: var(--accent-300); }
.page-hero__title { color: #fff; font-size: var(--fs-900); max-width: 20ch; text-wrap: balance; margin: .25rem 0 1.1rem; }
.page-hero__lead { color: var(--on-dark-soft); font-size: var(--fs-500); max-width: 60ch; line-height: 1.55; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* Mid-page CTA band - matches the index "emergency-strip" card treatment
   (navy gradient card, 6px accent left border, rounded, shadowed). */
.cta-band { padding-inline: var(--gutter); margin-block: clamp(3rem, 7vw, 5rem); }
.cta-band__inner {
  max-width: var(--container); margin-inline: auto;
  display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center;
  background: linear-gradient(120deg, var(--navy-900) 0%, var(--navy-800) 100%);
  border: 1px solid var(--line-dark); border-left: 6px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow-md); color: var(--on-dark);
  padding: clamp(1.75rem, 5vw, 2.75rem) clamp(1.75rem, 6vw, 3rem);
}
.cta-band .section-eyebrow { color: var(--accent-300); }
.cta-band__title { color: #fff; font-size: var(--fs-700); max-width: 26ch; text-wrap: balance; margin: .25rem 0 .75rem; }
.cta-band__lead { color: var(--on-dark-soft); max-width: 56ch; line-height: 1.55; margin: 0; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
/* let grid tracks shrink instead of blowing out to a nowrap button's width */
.cta-band__inner > * { min-width: 0; }
.cta-band__title, .cta-band__lead { overflow-wrap: break-word; }
@media (min-width: 820px) {
  .cta-band__inner { grid-template-columns: 1fr auto; }
  .cta-band__actions { flex-direction: column; }
}
/* Phones: stack full-width buttons (the tel button can't nowrap-overflow now)
   and ease the card padding so nothing is forced past a narrow viewport. */
@media (max-width: 560px) {
  .cta-band__inner { padding: clamp(1.4rem, 5vw, 2.25rem) clamp(1.35rem, 5vw, 2rem); }
  .cta-band__actions { flex-direction: column; align-items: stretch; }
  .cta-band__actions .btn { width: 100%; white-space: normal; }
}

/* Story */
.about-story { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3rem); }
.about-story__body p { color: var(--ink-soft); max-width: 68ch; }
.about-sub { font-size: var(--fs-500); margin-top: 1.75rem; }
.about-story__img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.about-facts { margin-top: 1.5rem; display: grid; gap: .2rem; }
.about-facts > div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding: .7rem 0; }
.about-facts dt { color: var(--ink-soft); font-size: var(--fs-300); }
.about-facts dd { margin: 0; font-family: var(--font-display); font-weight: 700; color: var(--navy-900); text-align: right; }

/* Mission & Vision */
.mv { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 3vw, 1.75rem); }
.mv__card { background: var(--navy-700); border: 1px solid var(--line-dark); border-top: 3px solid var(--accent); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2rem); }
.mv__title { color: #fff; font-size: var(--fs-500); }
.mv__card p { color: var(--on-dark-soft); margin: 0; }

/* Core values - editorial sticky-scroll: sticky heading + large-type rows.
   Section sits on --dark. Rows reveal with stagger; the row crossing the
   viewport centre is "lit" (full-accent numeral + white name) while the rest
   dim. All motion is gated on .anim (added by JS only when motion is allowed),
   so reduced-motion / no-JS shows every row fully visible and lit. */
.values__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 5vw, 3rem); }
.values__hint { color: var(--on-dark-soft); font-size: var(--fs-500); margin: 1rem 0 0; max-width: 34ch; line-height: 1.5; }

.values__list { list-style: none; margin: 0; padding: 0; }
.value-row {
  position: relative; display: grid; grid-template-columns: auto 1fr;
  gap: clamp(1rem, 3vw, 2rem); align-items: start;
  padding: clamp(1.5rem, 3.5vw, 2.25rem) 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.value-row:last-child { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.value-row__idx {
  font-family: var(--font-display); font-weight: 900; line-height: 1;
  font-size: clamp(2.5rem, 6vw, 3.75rem); color: var(--accent); opacity: 1;
}
.value-row__name { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 1.75rem); color: #fff; margin: 0 0 .5rem; }
.value-row__stmt { color: var(--on-dark-soft); margin: 0 0 .55rem; max-width: 60ch; line-height: 1.55; }
.value-row__proof { color: #fff; margin: 0; max-width: 60ch; line-height: 1.55; }
.value-row__label { color: var(--accent-300); font-weight: 700; }

/* Motion layer: dim at rest, light the active row, reveal with stagger. */
.anim .value-row { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 80ms); will-change: opacity, transform; }
.anim .value-row.is-visible { opacity: 1; transform: none; }
.anim .value-row__idx { opacity: .2; transition: opacity .5s ease; }
.anim .value-row__name { color: rgba(255, 255, 255, .68); transition: color .5s ease; }
.anim .value-row.is-active .value-row__idx { opacity: 1; }
.anim .value-row.is-active .value-row__name { color: #fff; }

/* Core pillars */
.pillars { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.25rem); }
.pillar { position: relative; padding-left: 4.25rem; }
.pillar__n { position: absolute; left: 0; top: -.35rem; font-family: var(--font-display); font-weight: 900; font-size: 2.6rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--accent); text-stroke: 1.5px var(--accent); }
.pillar__t { font-size: var(--fs-500); margin: 0 0 .4rem; }
.pillar__p { color: var(--ink-soft); margin: 0; max-width: 60ch; }

@media (min-width: 760px) {
  .mv { grid-template-columns: 1fr 1fr; }
  .pillars { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 3.5rem); }
}
@media (min-width: 900px) {
  .values__grid { grid-template-columns: minmax(240px, 320px) 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
  .values__aside { position: sticky; top: 120px; align-self: start; }
}
@media (min-width: 900px) {
  .about-story { grid-template-columns: 1.6fr 1fr; align-items: start; }
}

/* ==========================================================================
   HOMEPAGE "WOW" PASS - hero cinematics, stats, map, project cards, polish
   (all transform/opacity/clip-path; reduced-motion falls back to visible)
   ========================================================================== */

/* ---- Cinematic hero ---- */
.hero__img { animation: kenburns 18s ease-in-out infinite alternate; will-change: transform; }
/* Mirrored so the footage reads into the headline rather than away from it. */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }

.hero__title .rline { display: block; overflow: hidden; }
.hero__title .rline__i { display: block; }
/* on-load two-stage reveal (headline lines rise, then badge/sub/cta fade) */
.hero__title .rline:nth-child(1) .rline__i { animation: rline .9s cubic-bezier(.22,1,.36,1) both .15s; }
.hero__title .rline:nth-child(2) .rline__i { animation: rline .9s cubic-bezier(.22,1,.36,1) both .27s; }
.hero__sub    { animation: fadeUp .7s ease both .5s; }
.hero__badge  { animation: fadeUp .7s ease both .62s; }
.hero__actions{ animation: fadeUp .7s ease both .72s; }
@keyframes rline { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.hero__cue { position: absolute; left: 50%; bottom: calc(4.5vw + 1.1rem); transform: translateX(-50%); z-index: 2; }
.hero__cue-line { position: relative; display: block; width: 2px; height: 52px; background: rgba(255,255,255,.22); border-radius: 2px; overflow: hidden; }
.hero__cue-line::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 42%; background: var(--accent); border-radius: 2px; animation: cue 1.9s ease-in-out infinite; }
@keyframes cue { 0% { transform: translateY(-110%); } 60%,100% { transform: translateY(240%); } }

/* ---- Unified section-heading line-rise (JS wraps text in .rise__i) ---- */
.anim .rise { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.anim .rise > .rise__i { display: block; transform: translateY(115%); transition: transform .8s cubic-bezier(.22,1,.36,1); }
.anim .rise.is-shown > .rise__i { transform: none; }

/* ---- Sticky-header scroll-progress bar ---- */
.site-header::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: var(--accent); transform: scaleX(var(--scroll, 0)); transform-origin: left; z-index: 2;
}

/* ---- Animated stats band ---- */
.stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; text-align: center; }
.stat__num { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; letter-spacing: -.02em; color: var(--accent-300); font-variant-numeric: tabular-nums; }
.stat__label { display: block; margin-top: .5rem; text-transform: uppercase; letter-spacing: .1em; font-size: var(--fs-200); font-weight: 700; color: var(--on-dark-soft); }
.stats__note { text-align: center; margin-top: 1.75rem; margin-bottom: 0; font-size: var(--fs-200); color: var(--on-dark-soft); opacity: .7; }

/* ---- Interactive service-area map ---- */
.areas__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center; }
.areas__map { background: linear-gradient(160deg, var(--card), var(--paper-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1rem, 3vw, 1.75rem); }
.areas__map svg { display: block; width: 100%; height: auto; }
.areas__land { fill: #eaeef2; }
.areas__water { fill: #c2d6e8; stroke: #9dbdd8; stroke-width: .6; }
.areas__label { fill: #6f8aa1; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 8.5px; letter-spacing: .4px; }
.areas__dot circle { fill: var(--accent); stroke: #fff; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; transition: transform .25s ease, filter .25s ease; }
.areas__dot--office circle { fill: var(--navy-800); stroke: var(--accent); stroke-width: 2.5; }
.areas__dot.is-hot circle, .areas__dot:hover circle { transform: scale(1.55); filter: drop-shadow(0 0 5px rgba(245,129,30,.85)); }
.anim .areas__dot circle { transform: scale(0); }
.anim .areas__map.is-in .areas__dot circle { animation: dotIn .5s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes dotIn { from { transform: scale(0); } to { transform: scale(1); } }
.area-list a.is-hot { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }

/* ---- Editorial project cards ---- */
.pcard { position: relative; }
.pcard__media { position: relative; display: block; overflow: hidden; border-radius: 8px; aspect-ratio: 16 / 11; background: var(--paper-2); clip-path: inset(0 0 0 0); }
.pcard__frame { position: absolute; inset: 0; transition: transform .7s ease-out; }
.pcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcard__pill { position: absolute; top: .9rem; left: .9rem; z-index: 3; background: rgba(8,21,33,.72); color: #fff; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-200); padding: .35rem .8rem; border-radius: var(--radius-pill); backdrop-filter: blur(3px); transition: background .25s ease, color .25s ease; }
.pcard__panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1rem 1.1rem; background: linear-gradient(to top, rgba(8,21,33,.94), rgba(8,21,33,.55)); transform: translateY(101%); transition: transform .45s cubic-bezier(.22,1,.36,1); }
.pcard__desc { margin: 0 0 .75rem; color: rgba(255,255,255,.92); font-size: var(--fs-300); line-height: 1.45; }
.pcard__meta { display: flex; gap: 2rem; margin: 0; }
.pcard__meta dt { font-size: var(--fs-200); text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.6); margin-bottom: .1rem; }
.pcard__meta dd { margin: 0; font-family: var(--font-display); font-weight: 700; color: #fff; font-size: var(--fs-300); }
.pcard__name { margin: .9rem 0 0; font-size: var(--fs-500); color: var(--ink-soft); font-style: italic; font-weight: 500; }
@media (hover: hover) {
  .pcard:hover .pcard__frame { transform: scale(1.06); }
  .pcard:hover .pcard__panel { transform: translateY(0); }
  .pcard:hover .pcard__pill { background: var(--accent); color: #201200; }
}
.pcard:nth-child(1) { --tb: 0ms; } .pcard:nth-child(2) { --tb: 150ms; } .pcard:nth-child(3) { --tb: 300ms; }
.projects-anim .pcard__media { clip-path: inset(100% 0 0 0); transition: clip-path .9s cubic-bezier(.65,0,.35,1) var(--tb); }
.projects-anim .pcard__img { transform: scale(1.15); transition: transform 1.1s cubic-bezier(.65,0,.35,1) var(--tb); }
.projects-anim.is-inview .pcard__media { clip-path: inset(0 0 0 0); }
.projects-anim.is-inview .pcard__img { transform: scale(1); }

/* ---- Footer office cards ---- */
.footer-brand .nap { background: rgba(255,255,255,.03); border: 1px solid var(--line-dark); border-radius: var(--radius-sm); padding: 1rem 1.1rem; transition: border-color .25s ease, box-shadow .25s ease; }
.footer-brand .nap:hover { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(245,129,30,.6), 0 10px 26px rgba(245,129,30,.12); }

@media (min-width: 760px) { .stats__grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 820px) { .areas__grid { grid-template-columns: 1.1fr 1fr; } }

/* ---- Inactive nav/footer links (target page not built yet) ---- */
.is-inactive { pointer-events: none; cursor: default; opacity: .45; }

/* ---- Pulsing office markers on the service-area map ---- */
.areas__pulse {
  fill: var(--accent); transform-box: fill-box; transform-origin: center; pointer-events: none;
  animation: officePulse 2.4s ease-out infinite;
}
@keyframes officePulse {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(2.8); opacity: 0; }
  100% { transform: scale(2.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .areas__pulse { display: none; } }

/* ==========================================================================
   SITE NAVIGATION - desktop mega-menu + mobile drawer
   ========================================================================== */
.nav { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 2rem); }
.nav__item { position: static; }            /* mega panels anchor to .header-inner */

/* Top-level links & panel triggers share one look */
.nav__link, .nav__trigger {
  display: inline-flex; align-items: center; gap: .45rem; position: relative;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: .01em;
  color: var(--on-dark); text-decoration: none; background: none; border: 0; cursor: pointer;
  padding: .5rem 0; transition: color var(--t);
}
.nav__link:hover, .nav__trigger:hover,
.nav__item.is-open .nav__trigger { color: #fff; }

/* Accent underline (hover / active section / open panel) */
.nav__link::after, .nav__trigger::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}
.nav__link:hover::after, .nav__trigger:hover::after,
.nav__item.is-open .nav__trigger::after,
.nav__item.is-active > .nav__link::after,
.nav__item.is-active > .nav__trigger::after { transform: scaleX(1); }
.nav__item.is-active > .nav__link, .nav__item.is-active > .nav__trigger { color: #fff; }

/* Chevron */
.nav__chev { width: .46rem; height: .46rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -3px; transition: transform var(--t); opacity: .85; }
.nav__item.is-open .nav__chev { transform: rotate(-135deg); margin-top: 2px; }

/* Dimmed unbuilt links stay legible inside panels */
.nav .is-inactive { opacity: .5; }

/* ---- Mega panel (desktop): full-width, bar-anchored ---------------------- */
.mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 90; padding-top: 10px; /* hover bridge */
  opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none;
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
}
.nav__item.is-open .mega {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .22s ease-out, transform .22s ease-out, visibility 0s;
}
.mega__inner {
  background: #13293c; border: 1px solid var(--line-dark); border-top: 2px solid var(--accent);
  border-radius: 0 0 12px 12px; box-shadow: 0 30px 60px -22px rgba(0,0,0,.7);
  padding: clamp(1.4rem, 2.6vw, 2.1rem); display: grid; gap: clamp(1.25rem, 3vw, 2.5rem);
}
/* Link stagger-in (open only) */
.mega [data-stagger] > * { opacity: 0; transform: translateY(8px); }
.nav__item.is-open .mega [data-stagger] > * { opacity: 1; transform: none; transition: opacity .3s ease, transform .3s ease; }
.nav__item.is-open .mega [data-stagger] > *:nth-child(1) { transition-delay: 30ms; }
.nav__item.is-open .mega [data-stagger] > *:nth-child(2) { transition-delay: 60ms; }
.nav__item.is-open .mega [data-stagger] > *:nth-child(3) { transition-delay: 90ms; }
.nav__item.is-open .mega [data-stagger] > *:nth-child(4) { transition-delay: 120ms; }
.nav__item.is-open .mega [data-stagger] > *:nth-child(5) { transition-delay: 150ms; }

/* Panel 1 - SERVICES */
.mega--services { grid-template-columns: 1fr auto; }
.svc-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.75rem, 1.6vw, 1.25rem); }
.svc__link { display: grid; align-content: start; gap: .35rem; height: 100%; padding: 1rem 1.1rem; border-radius: 10px; color: var(--on-dark); text-decoration: none; background: rgba(255,255,255,.02); border: 1px solid transparent; transition: transform var(--t), background var(--t), border-color var(--t); }
.svc__link:hover { transform: translateY(-4px); background: rgba(255,255,255,.05); border-color: var(--line-dark); }
.svc__no { font-family: var(--font-display); font-weight: 800; font-size: .78rem; letter-spacing: .12em; color: var(--accent-300); }
.svc__name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: #fff; }
.svc__desc { color: var(--on-dark-soft); font-size: var(--fs-300); line-height: 1.45; }
.svc__go { margin-top: .25rem; display: inline-flex; gap: .35rem; color: var(--accent-300); font-weight: 700; font-size: var(--fs-300); }
.svc__go span { display: inline-block; transition: transform var(--t); }
.svc__link:hover .svc__go span { transform: translateX(4px); }
.mega-emg { align-self: stretch; display: grid; align-content: center; justify-items: center; text-align: center; gap: .15rem; min-width: 150px; padding: 1.25rem 1.4rem; border-radius: 10px; text-decoration: none; background: linear-gradient(160deg, var(--accent), var(--accent-600)); color: #201200; box-shadow: 0 12px 26px rgba(245,129,30,.3); transition: transform var(--t), box-shadow var(--t); }
.mega-emg:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(245,129,30,.44); }
.mega-emg__k { font-family: var(--font-display); font-weight: 900; font-size: 1.7rem; line-height: 1; }
.mega-emg__t { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-200); }
.mega-emg__num { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; margin-top: .3rem; }

/* Panel 2 - PROJECTS */
.mega--projects { grid-template-columns: 1.2fr 1fr; align-items: start; }
.proj-links { display: grid; gap: .25rem; }
.proj-link { display: grid; gap: .05rem; padding: .8rem 1rem; border-radius: 10px; text-decoration: none; border: 1px solid transparent; transition: background var(--t), border-color var(--t), transform var(--t); }
.proj-link:hover { background: rgba(255,255,255,.05); border-color: var(--line-dark); transform: translateX(4px); }
.proj-link__t { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: #fff; }
.proj-link__d { color: var(--on-dark-soft); font-size: var(--fs-200); }
.feat { display: grid; grid-template-rows: auto 1fr; text-decoration: none; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.03); border: 1px solid var(--line-dark); transition: transform var(--t), box-shadow var(--t); }
.feat:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.feat__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.feat__media img { width: 100%; height: 100%; object-fit: cover; }
.feat__tag { position: absolute; top: .7rem; left: .7rem; background: rgba(8,21,33,.82); color: #fff; font-size: var(--fs-200); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .3rem .7rem; border-radius: var(--radius-pill); }
.feat__body { padding: 1rem 1.1rem; display: grid; gap: .2rem; }
.feat__name { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.1rem; }
.feat__meta { color: var(--on-dark-soft); font-size: var(--fs-200); }
.feat__go { margin-top: .4rem; color: var(--accent-300); font-weight: 700; font-size: var(--fs-300); }

/* Panel 3 - SERVICE AREAS */
.mega--areas { grid-template-columns: 1.5fr 1fr; align-items: center; }
.areas-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 3vw, 2.5rem); }
.areas-col__head { display: flex; flex-direction: column; gap: .1rem; padding-bottom: .55rem; margin-bottom: .55rem; border-bottom: 1px solid var(--line-dark); }
.areas-col__region { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.02rem; }
.areas-col__tel { width: max-content; color: var(--accent-300); font-weight: 700; font-size: var(--fs-300); text-decoration: none; }
.areas-col__tel:hover { text-decoration: underline; }
.areas-col__cities { display: grid; gap: .05rem; }
.area-city { display: block; padding: .45rem .6rem; border-radius: 8px; color: var(--on-dark); text-decoration: none; transition: background var(--t), color var(--t); }
.area-city:hover { background: rgba(255,255,255,.06); color: #fff; }
.mega-map { border-radius: 10px; overflow: hidden; padding: .4rem; background: rgba(0,0,0,.18); }
.mega-map svg { display: block; width: 100%; height: auto; }
.mega-map .areas__land { fill: #1b3247; }
.mega-map .areas__water { fill: #0c1f31; stroke: #274c66; }
.mega-map .areas__label { display: none; }               /* too small at this scale */
.mega-map .areas__dot circle { transform: none; }         /* static + visible (overrides scroll-in) */
.mega-map .areas__pulse { display: none; }

/* Drawer-only chrome hidden on desktop */
.drawer-top, .drawer-cta, .nav-cta-mobile { display: none; }
/* z-index sits just BELOW .site-header (z:100). The drawer lives inside the
   header's stacking context (capped at 100 vs the page), so a root-level
   backdrop must be <100 or it would paint over the drawer and swallow taps. */
.nav-backdrop { position: fixed; inset: 0; z-index: 99; background: rgba(4,10,16,.62); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility 0s linear .3s; }
.nav-backdrop.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s ease; }

@media (min-width: 900px) { .nav-toggle { display: none; } }

/* ---- Mobile drawer (≤899px) --------------------------------------------- */
@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; order: 3; }
  .header-actions { margin-left: auto; }
  .header-cta { display: none; }

  .primary-nav {
    position: fixed; top: 0; right: 0; height: 100dvh; width: min(88vw, 380px); z-index: 110;
    display: flex; flex-direction: column; background: var(--navy-900);
    box-shadow: -24px 0 60px rgba(0,0,0,.5); transform: translateX(100%);
    transition: transform .32s cubic-bezier(.22,1,.36,1); overflow-y: auto; overscroll-behavior: contain;
  }
  .primary-nav.is-open { transform: none; }

  .drawer-top { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1;
    padding: 1rem var(--gutter); background: var(--navy-900); border-bottom: 1px solid var(--line-dark); }
  .drawer-top__label { font-family: var(--font-display); font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .14em; font-size: var(--fs-200); }
  .drawer-close { background: none; border: 0; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; width: 44px; height: 44px; }

  .nav { flex-direction: column; align-items: stretch; gap: 0; flex: 1 1 auto; padding: .25rem var(--gutter) 1rem; }
  .nav__item { border-bottom: 1px solid var(--line-dark); }
  .nav__link, .nav__trigger { width: 100%; justify-content: space-between; padding: 1.05rem 0; font-size: 1.15rem; }
  .nav__link::after, .nav__trigger::after { display: none; }
  .nav__item.is-active > .nav__link, .nav__item.is-active > .nav__trigger { color: var(--accent-300); }

  /* Panels become height-animated accordions. max-height (not grid 0fr→1fr,
     which fails to expand on some mobile WebKit builds - showed only the top
     of the first line). 1200px clears the tallest panel; content caps below it. */
  .mega { position: static; opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    max-height: 0; overflow: hidden; padding: 0; transition: max-height .32s ease; }
  .nav__item.is-open .mega { max-height: 1200px; }
  .mega__inner { display: block; padding: .35rem 0 1rem; background: none; border: 0; box-shadow: none; border-radius: 0; }
  .mega--services, .mega--projects, .mega--areas, .svc-cols, .areas-cols { grid-template-columns: 1fr; display: block; }
  .svc__link { background: none; border: 0; padding: .55rem 0; }
  .svc__link:hover { transform: none; background: none; }
  .mega-emg { min-width: 0; margin-top: .6rem; }
  .proj-link { padding: .55rem 0; }
  .areas-col { margin-bottom: 1rem; }
  .feat, .mega-map { display: none; }                    /* keep the drawer light */
  .mega [data-stagger] > * { opacity: 1; transform: none; transition: none; }

  /* Pinned emergency bar at drawer bottom */
  /* Primary CTA inside the drawer. margin-top:auto pushes it (and the sticky
     emergency bar below it) to the bottom when the link list is short. */
  .nav-cta-mobile { display: flex; justify-content: center; margin: 1.25rem 1.1rem .9rem; margin-top: auto; }

  .drawer-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem .9rem;
    position: sticky; bottom: 0; margin-top: auto; padding: .9rem 1.1rem;
    background: var(--accent); color: #201200; text-decoration: none; }
  .drawer-cta__k { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: var(--fs-200); white-space: nowrap; }
  .drawer-cta__num { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; white-space: nowrap; }
}

body.nav-open { overflow: hidden; }

/* ==========================================================================
   BACK-TO-TOP
   ========================================================================== */
.to-top {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 80;
  width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--accent); color: #201200; box-shadow: 0 10px 24px rgba(245,129,30,.4);
  opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, background .2s ease, visibility 0s linear .3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .3s ease, transform .3s ease, background .2s ease, visibility 0s; }
.to-top:hover { background: var(--accent-600); color: #fff; transform: translateY(-2px); }
.to-top:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ==========================================================================
   COOL ROOF CALCULATOR  (/cool-roof-calculator)
   Namespaced .calc-* component. Uses site tokens; reuses the notice green/red
   (#1e7a46 / #c0392b) for savings-positive / cost-negative semantics.
   ========================================================================== */
.calc-tool { margin-top: clamp(1.5rem, 4vw, 2.5rem); }

/* Inputs - two stacked cards, side-by-side from 650px */
.calc-inputs { display: grid; grid-template-columns: 1fr; gap: clamp(1.1rem, 2.5vw, 1.75rem); }
.calc-card {
  background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--accent);
  border-radius: var(--radius); padding: clamp(1.35rem, 3vw, 1.9rem); box-shadow: var(--shadow-sm);
}
.calc-card__title {
  font-family: var(--font-display); font-size: 1.15rem; color: var(--navy-900);
  margin: 0 0 1.25rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line);
}

/* Fields - mirror .form-field, scoped so the calc can live on a light section */
.calc-field { margin-bottom: 1.1rem; }
.calc-field:last-child { margin-bottom: 0; }
.calc-field label { display: block; font-weight: 600; font-size: var(--fs-300); margin-bottom: .4rem; color: var(--navy-900); }
.calc-field input, .calc-field select {
  width: 100%; font: inherit; min-height: 48px; padding: .75rem .9rem; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff;
  transition: border-color var(--t), box-shadow var(--t);
}
.calc-field input:focus, .calc-field select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245,129,30,.18); outline: none;
}
.calc-field--auto { background: var(--paper-2) !important; font-weight: 700; }
.calc-field__note { display: block; margin-top: .4rem; font-size: var(--fs-200); color: var(--ink-soft); }

.calc-note {
  margin-top: .5rem; padding: .9rem 1.1rem; background: var(--accent-tint);
  border-left: 3px solid var(--accent); border-radius: var(--radius-sm);
  font-size: var(--fs-300); color: var(--ink); line-height: 1.5;
}

/* Action buttons */
.calc-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }
.calc-actions .btn { flex: 1 1 auto; }
.calc-pdf[hidden] { display: none; }

/* ---- Results ---- */
.calc-results { margin-top: clamp(2rem, 5vw, 3rem); padding-top: clamp(1.5rem, 4vw, 2rem); border-top: 2px dashed var(--line); }
.calc-results[hidden] { display: none; }
.calc-results__title {
  font-size: var(--fs-700); color: var(--navy-900);
  padding-bottom: .5rem; border-bottom: 2px solid var(--navy-800); margin-bottom: 1.75rem;
}
.calc-block { margin-bottom: 1.9rem; page-break-inside: avoid; }
.calc-block__title { font-family: var(--font-display); font-size: 1.1rem; color: var(--navy-700); margin: 0 0 .65rem; }

/* Tables - desktop grid; horizontal scroll guard on narrow desktops */
.calc-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.calc-table { width: 100%; border-collapse: collapse; background: #fff; font-size: var(--fs-300); }
.calc-table th, .calc-table td { padding: .85rem .9rem; text-align: center; border-bottom: 1px solid var(--line); vertical-align: middle; }
.calc-table thead th { background: var(--navy-800); color: #fff; font-weight: 600; font-size: var(--fs-200); letter-spacing: .01em; }
.calc-table tbody tr:nth-child(even) { background: var(--paper); }
.calc-table td:first-child { text-align: left; }
.calc-table__sub { display: block; font-size: var(--fs-200); color: var(--ink-soft); font-weight: 400; }
/* value semantics */
.calc-table .is-pos   { color: #1e7a46; font-weight: 700; }
.calc-table .is-neg   { color: #c0392b; font-weight: 700; }
.calc-table .is-brand { color: var(--navy-700); font-weight: 700; }
.calc-table .is-warn  { color: var(--accent-ink); font-weight: 700; }
.calc-table .is-lg    { font-size: 1.1rem; }

/* Mobile: turn each table row into a labelled card */
@media (max-width: 640px) {
  .calc-table-wrap { border: 0; overflow-x: visible; }
  .calc-table, .calc-table thead, .calc-table tbody, .calc-table th, .calc-table td, .calc-table tr { display: block; }
  .calc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .calc-table tr { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: .9rem; padding: .35rem .65rem; background: #fff; }
  .calc-table tbody tr:nth-child(even) { background: var(--paper); }
  .calc-table td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: right; padding: .6rem .2rem; border-bottom: 1px solid var(--line); }
  .calc-table td:first-child, .calc-table tr td:last-child { text-align: right; }
  .calc-table td:last-child { border-bottom: 0; }
  .calc-table td::before { content: attr(data-label); font-weight: 700; color: var(--navy-900); text-align: left; }
  .calc-table__sub { text-align: right; }
}

.calc-strategy {
  background: #eaf6ef; border: 1px solid #bfe2cd; color: #145233;
  padding: 1.1rem 1.25rem; border-radius: var(--radius-sm); font-size: var(--fs-300); line-height: 1.55;
  page-break-inside: avoid;
}

.calc-results__cta {
  margin-top: 1.75rem; padding: clamp(1.35rem, 3vw, 1.9rem);
  background: linear-gradient(120deg, var(--navy-900) 0%, var(--navy-800) 100%);
  border-radius: var(--radius); border-left: 6px solid var(--accent); color: var(--on-dark);
}
.calc-results__cta p { color: var(--on-dark-soft); margin: 0 0 1.1rem; }
.calc-results__cta-actions { display: flex; flex-wrap: wrap; gap: .9rem; }

/* Ghost button for light/dark-card contexts with ink border */
.btn--ghost-ink { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--ghost-ink:hover { background: #fff; color: var(--navy-900); border-color: #fff; transform: translateY(-3px); }

.calc-disclaimer { margin-top: 1.5rem; font-size: var(--fs-200); color: var(--ink-soft); line-height: 1.5; }

/* ---- Lead modal ---- */
.calc-modal { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 1.25rem; }
.calc-modal[hidden] { display: none; }
.calc-modal__backdrop { position: absolute; inset: 0; background: rgba(8,21,33,.68); }
.calc-modal__panel {
  position: relative; z-index: 1; width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto;
  background: var(--card); border-radius: var(--radius); border-top: 5px solid var(--accent);
  box-shadow: var(--shadow-lg); padding: clamp(1.5rem, 4vw, 2.1rem);
}
.calc-modal__close {
  position: absolute; top: .6rem; right: .85rem; width: 40px; height: 40px; border: 0; background: transparent;
  font-size: 1.7rem; line-height: 1; color: var(--ink-soft); cursor: pointer; border-radius: var(--radius-sm);
}
.calc-modal__close:hover { color: var(--navy-900); background: var(--paper-2); }
.calc-modal__panel h3 { font-family: var(--font-display); color: var(--navy-900); font-size: 1.35rem; margin: 0 0 .4rem; }
.calc-modal__lead { font-size: var(--fs-300); color: var(--ink-soft); margin: 0 0 1.25rem; }
.calc-modal__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.calc-modal__error {
  margin: 0 0 1rem; padding: .75rem 1rem; border-radius: var(--radius-sm);
  background: #fdeceb; color: #c0392b; border: 1px solid #f3c6c2; font-size: var(--fs-300);
}
.calc-modal__error[hidden] { display: none; }
body.calc-modal-open { overflow: hidden; }

@media (min-width: 650px) {
  .calc-inputs { grid-template-columns: 1fr 1fr; align-items: start; }
  .calc-actions .btn { flex: 0 1 auto; }
}

/* ---- Print: strip site chrome, show a clean branded report ---- */
.calc-report-head { display: none; }
@media print {
  /* .calc-strategy is sales copy that belongs on screen but pushed the printed
     report onto a second page, so it is dropped from print only. */
  .site-header, .site-footer, .to-top, .skip-link, .nav-backdrop,
  .page-hero, .section-head, .calc-inputs, .calc-actions, .calc-note,
  .calc-results__cta, .calc-modal, .calc-strategy { display: none !important; }
  body { background: #fff !important; }
  .section.calc-section { padding: 0 !important; }
  .calc-results { display: block !important; border-top: 0; margin-top: 0; padding-top: 0; }
  .calc-report-head {
    display: flex !important; align-items: center; justify-content: space-between; gap: 1rem;
    padding-bottom: .75rem; margin-bottom: 1.25rem; border-bottom: 3px solid var(--navy-800);
  }
  .calc-report-head__logo { height: 46px; width: auto; }
  .calc-report-head__meta { text-align: right; font-size: .8rem; color: var(--ink); line-height: 1.4; }
  .calc-table thead th, .calc-table tbody tr:nth-child(even)
    { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .calc-table, .calc-table thead, .calc-table tbody, .calc-table tr, .calc-table th, .calc-table td { display: revert !important; }
  .calc-table thead { position: static !important; width: auto !important; height: auto !important; clip: auto !important; }
  .calc-table td::before { content: none !important; }

  /* --- Keep the report to one sheet ------------------------------------------
     The content fits, but it was paginating onto three pages. Two things in the
     screen styles act as fragmentation barriers that the print engine cannot
     break across pages:
       1. .calc-table-wrap has overflow-x:auto. The max-width:640px rule that
          clears it never matches in print — the print viewport is ~720px — so
          each of the five wraps stayed an unbreakable scroll container.
       2. .calc-block carries page-break-inside:avoid, so any block that did not
          fit the remaining space was pushed whole onto a fresh page.
     Undo both, and protect table ROWS instead, which is the granularity that
     actually matters for legibility. */
  @page { margin: 12mm; }
  .calc-table-wrap { overflow: visible !important; border: 0 !important; }
  .calc-block { page-break-inside: auto; break-inside: auto; }
  .calc-table tr { page-break-inside: avoid; break-inside: avoid; }

  /* Tighten the report so it lands on one page. Page 1 was painting edge to
     edge, so the tables were crossing the boundary by a hair and dragging a
     repeated header onto a fresh sheet. */
  .calc-results { font-size: 9pt; line-height: 1.35; }
  .calc-results__title { font-size: 1.15rem; margin-bottom: .6rem; padding-bottom: .3rem; }
  .calc-block { margin-bottom: .7rem; }
  .calc-block:last-of-type { margin-bottom: 0; }
  .calc-block__title { font-size: .95rem; margin-bottom: .3rem; }
  .calc-table th, .calc-table td { padding: .28rem .45rem; }
  .calc-report-head { margin-bottom: .7rem; padding-bottom: .4rem; }
  .calc-report-head__logo { height: 34px; }
  .calc-disclaimer { font-size: 7.5pt; margin-top: .6rem; line-height: 1.3; }
  /* Nothing after the report may add height beyond the last line of content. */
  .calc-results > *:last-child, .calc-wrap > *:last-child { margin-bottom: 0 !important; }
}

/* ==========================================================================
   CONTENT / SERVICE PAGES  (services, roof-systems, industries)
   Namespaced helpers; everything else reuses existing components
   (.page-hero .section .flow .project .pillars .cta-band .emergency-strip).
   ========================================================================== */
.lede { font-size: var(--fs-500); color: var(--ink-soft); line-height: 1.6; max-width: 68ch; }

/* Readable prose column for detailed copy */
/* Everything in a builder body spans the full container, matching the CTA band
   and the rest of the site's sections. */
.prose { max-width: none; }
.prose > * + * { margin-top: 1.05rem; }
.prose h3 { font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--navy-900); margin-top: 2.4rem; line-height: 1.15; }
.prose h3:first-child { margin-top: 0; }
.prose p { color: var(--ink); line-height: 1.7; margin: 0; }
.prose strong { color: var(--navy-900); }
.prose a { color: var(--accent-ink); font-weight: 600; }

/* A CTA band placed by the builder sits inside .prose, whose paragraph and link
   colours are more specific than the band's own and were turning the lead navy
   on navy and the button text amber on amber. Restore the band's colours. */
.prose .cta-band__title { color: #fff; }
.prose .cta-band__lead { color: var(--on-dark-soft); }
.prose .cta-band .section-eyebrow { color: var(--accent-300); }
.prose .cta-band .btn--accent { color: #201200; }
.prose .cta-band .btn--accent:hover { color: #fff; }
.prose .cta-band .btn--ghost { color: #fff; }
.prose .cta-band .btn--ghost:hover { color: var(--navy-900); }

/* Checkmark list (light bg) */
.tick-list { display: grid; gap: .8rem; margin: 1.25rem 0 0; }
.tick-list li { position: relative; padding-left: 2rem; color: var(--ink); line-height: 1.55; }
.tick-list li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--accent); color: #201200; display: grid; place-items: center; font-size: .78rem; font-weight: 800; }
.tick-list strong { color: var(--navy-900); }

/* Careers: each role is a tick-list item with a short description under it. */
.careers-roles li { margin-bottom: .9rem; }
.careers-roles strong { display: block; color: var(--navy-800); }
.careers-roles__d { display: block; color: var(--ink-soft); font-size: var(--fs-300); line-height: 1.55; margin-top: .15rem; }
.section--dark .tick-list li { color: var(--on-dark-soft); }
.section--dark .tick-list strong { color: #fff; }

/* Generic titled info cards (roof systems, deliverables, diagnostics, sectors) */
.info-cards { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); grid-template-columns: 1fr; }
.info-card { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius); padding: clamp(1.35rem, 3vw, 1.9rem); box-shadow: var(--shadow-sm); }
.info-card__k { font-family: var(--font-display); font-weight: 800; font-size: .74rem; letter-spacing: .12em; color: var(--accent-ink); text-transform: uppercase; }
.info-card__t { font-family: var(--font-display); font-size: 1.3rem; color: var(--navy-900); margin: .3rem 0 .6rem; line-height: 1.12; }
.info-card__p { color: var(--ink-soft); line-height: 1.6; margin: 0; }
.info-card ul { display: grid; gap: .5rem; margin: .8rem 0 0; }
.info-card li { position: relative; padding-left: 1.2rem; color: var(--ink-soft); line-height: 1.5; font-size: var(--fs-300); }
.info-card li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.section--dark .info-card { background: var(--navy-700); border-color: var(--line-dark); }
.section--dark .info-card__t { color: #fff; }
.section--dark .info-card__p, .section--dark .info-card li { color: var(--on-dark-soft); }
.section--dark .info-card__k { color: var(--accent-300); }

/* Cross-link "keep exploring" cards at the foot of a page */
.xlinks { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); grid-template-columns: 1fr; }
.xlink { display: grid; gap: .35rem; padding: 1.3rem 1.5rem; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); text-decoration: none; box-shadow: var(--shadow-sm); transition: transform var(--t), box-shadow var(--t); }
.xlink:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.xlink__t { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--navy-900); }
.xlink__d { color: var(--ink-soft); font-size: var(--fs-300); line-height: 1.45; }
.xlink__go { color: var(--accent-ink); font-weight: 700; font-size: var(--fs-300); margin-top: .15rem; }

/* Single "real job example" case card reuses .project; give it room when solo */
.case-solo { max-width: 640px; }

@media (min-width: 560px) {
  .info-cards, .xlinks { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .info-cards--3 { grid-template-columns: repeat(3, 1fr); }
  .info-cards--4 { grid-template-columns: repeat(4, 1fr); }
  .xlinks--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Short hero for legal / utility / 404 pages (no media, compact padding) */
.page-hero--short .page-hero__inner { padding-block: clamp(2.5rem, 5vw, 3.75rem); }

/* Contact page - two office cards + map placeholder */
.contact-grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); grid-template-columns: 1fr; }
.contact-office address { font-style: normal; line-height: 1.75; color: var(--ink); margin: .6rem 0 1rem; }
.contact-office address a { color: var(--accent-ink); font-weight: 600; }
.contact-office__hours { color: var(--ink-soft); font-size: var(--fs-300); margin: 0 0 1rem; line-height: 1.6; }
.office-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.map-embed { margin-top: 1.2rem; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--paper-2); min-height: 200px; display: grid; place-items: center; text-align: center; color: var(--ink-soft); padding: 1.5rem; line-height: 1.6; }
.map-embed a { color: var(--accent-ink); font-weight: 700; }
.map-embed--live { padding: 0; border-style: solid; overflow: hidden; min-height: 0; }
.map-embed--live iframe { display: block; width: 100%; height: 260px; border: 0; }
@media (min-width: 820px) { .contact-grid { grid-template-columns: 1fr 1fr; } }

/* City pages - "areas we serve" chips (non-link, local district terms) */
.city-areas { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.city-areas__title { font-family: var(--font-display); font-size: 1.1rem; color: var(--navy-900); margin: 0 0 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip { display: inline-flex; align-items: center; padding: .5rem 1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-300); color: var(--navy-800); }

/* ============================================================
   BEFORE / AFTER COMPARISON SLIDER (.compare)
   Full-bleed "real project" showcase. Base layer is the
   selectable phase (After/During); the Before layer sits on top,
   clip-pathed to the left of the handle. A transparent full-area
   range input drives --pos, giving pointer + keyboard + AT support.
   ============================================================ */
/* contained (full content column, not full-bleed) */
.project-showcase .compare {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.compare {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  background: var(--navy-900);
  --pos: 50%;
  touch-action: pan-y;
  isolation: isolate;
}
.compare__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-select: none; user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
/* top layer = BEFORE, revealed to the left of the handle */
.compare__img--top { clip-path: inset(0 calc(100% - var(--pos)) 0 0); z-index: 1; }

/* corner tags */
.compare__tag {
  position: absolute; bottom: clamp(.9rem, 2.5vw, 1.5rem);
  z-index: 2;
  padding: .4rem .9rem;
  border-radius: var(--radius-pill);
  background: rgba(11,27,41,.72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #fff;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-200); letter-spacing: .08em; text-transform: uppercase;
}
.compare__tag--l { left: clamp(.9rem, 2.5vw, 1.5rem); }
.compare__tag--r { right: clamp(.9rem, 2.5vw, 1.5rem); }

/* divider line + handle */
.compare__divider {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 3px; transform: translateX(-50%);
  background: #fff; box-shadow: 0 0 0 1px rgba(11,27,41,.25);
  z-index: 2; pointer-events: none;
}
.compare__handle {
  position: absolute; top: 50%; left: var(--pos);
  transform: translate(-50%, -50%);
  z-index: 3; pointer-events: none;
  display: grid; place-items: center;
  width: clamp(42px, 8vw, 56px); height: clamp(42px, 8vw, 56px);
  border-radius: 50%;
  background: var(--accent); color: #201200;
  box-shadow: var(--shadow-md), 0 0 0 3px rgba(255,255,255,.9);
}
.compare__handle svg { display: block; }

/* the real control: transparent, covers the whole figure */
.compare__range {
  position: absolute; inset: 0; z-index: 4;
  width: 100%; height: 100%; margin: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent; cursor: ew-resize;
  touch-action: pan-y;
}
.compare__range:focus { outline: none; }
.compare__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 56px; height: 640px; background: transparent; border: 0; cursor: ew-resize;
}
.compare__range::-moz-range-thumb { width: 56px; height: 640px; background: transparent; border: 0; cursor: ew-resize; }
.compare__range::-moz-range-track { background: transparent; border: 0; }
.compare:focus-within .compare__handle { outline: 3px solid var(--focus); outline-offset: 3px; }

/* footer: phase toggle + project meta */
.compare__foot {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.25rem 2rem;
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
}
.compare__phases {
  display: inline-flex; gap: .35rem; padding: .35rem;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}
.compare__phase {
  appearance: none; border: 0; cursor: pointer;
  padding: .5rem 1.1rem; border-radius: var(--radius-pill);
  background: transparent; color: var(--ink-soft);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-300); letter-spacing: .02em;
  transition: background var(--t), color var(--t);
}
.compare__phase:hover { color: var(--navy-900); }
.compare__phase.is-active { background: var(--navy-800); color: #fff; }
.project__meta--row { flex-wrap: wrap; gap: 1.25rem 2rem; }

@media (max-width: 560px) {
  .compare { aspect-ratio: 4 / 3; }
  .compare__foot { flex-direction: column; align-items: flex-start; }
}