/* ============================================================
   EXECUTIVE BUILDING SYSTEMS INC.
   One stylesheet, zero build.
   Palette: white and light grey surfaces, neutral graphite ink and
   a single signal red. No navy. Light-first: dark tone appears only
   on photography, the scrolled header and the footer.
   Motion: opacity + transform only, one ease family, entrance
   keyed on a single body gate class (is-in). Every JS-dependent
   hidden state is scoped :where(html.js) so content can never be
   trapped invisible without JS.
   ============================================================ */

html { scroll-behavior: smooth; }

:root {
  --paper: #FFFFFF;
  --cream: #F7F6F3;         /* limestone: warm off white, the default page surface */
  --sand: #E8E4DE;          /* cast concrete */
  --ink: #1E2023;           /* graphite: steel dark, near neutral (AA 16.3:1 on paper) */
  --ink-2: #2C3033;         /* steel */
  --accent: #CE2233;        /* signal red (AA 5.4:1 on paper) */
  --accent-deep: #B01B2A;   /* red for text on light (AA 6.9:1 on paper) */
  --accent-warm: #FF8A94;   /* red for text on dark (AA 7.3:1 on ink) */
  --btn-ink: #FFFFFF;       /* label on the graphite button (AA 16.5:1) */

  --line: rgba(30, 32, 35, 0.14);
  --line-dark: rgba(255, 255, 255, 0.16);
  --muted: #55575B;         /* body copy, warm neutral (AA 7.2:1 on paper) */
  --muted-dark: rgba(255, 255, 255, 0.80);

  --ease: cubic-bezier(0.22, 0.62, 0.18, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-1: 0.6s;
  --t-2: 0.85s;
  --t-3: 1.1s;

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;
  --r-xl: 32px;

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --wrap: 1280px;
  --gut: clamp(20px, 4vw, 48px);
  --nav-h: 124px;  /* the supplied lockup is stacked, so the header gives it room */

  --shadow-s: 0 1px 3px rgba(30, 32, 35, 0.06), 0 6px 18px rgba(30, 32, 35, 0.05);
  --shadow-m: 0 2px 8px rgba(30, 32, 35, 0.07), 0 18px 44px rgba(30, 32, 35, 0.09);
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-400-900.woff2") format("woff2");
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #FFFFFF;
  padding: 10px 18px; z-index: 300; font-weight: 700; border-radius: 999px;
}
.skip:focus { left: 12px; top: 12px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 940px; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- type ---------- */
.display { font-weight: 800; letter-spacing: -0.025em; line-height: 1.04; }
.h1 { font-size: clamp(2.4rem, 6.4vw, 5rem); }
.h2 { font-size: clamp(1.7rem, 3.8vw, 2.85rem); }
.h3 { font-size: clamp(1.08rem, 2vw, 1.35rem); font-weight: 700; letter-spacing: -0.012em; }
.lede { font-size: clamp(1.04rem, 1.9vw, 1.22rem); line-height: 1.58; max-width: 40em; }
.small { font-size: 0.875rem; }
.kicker { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.muted { color: var(--muted); }
.on-dark .muted, .band--ink .muted, .band--ink2 .muted { color: var(--muted-dark); }
.accent { color: var(--accent-deep); }
.band--ink .accent, .band--ink2 .accent, .hero .accent, .page-head .accent { color: var(--accent-warm); }

/* ============================================================
   ENTRANCE, one gate (body.is-in), one authority
   ============================================================ */
:where(html.js) [data-rv] {
  opacity: 0; transform: translateY(26px);
  transition: opacity var(--t-2) var(--ease), transform var(--t-2) var(--ease);
  transition-delay: var(--d, 0s);
}
:where(html.js) [data-rv="fade"] { transform: none; }
body.is-in [data-rv] { opacity: 1; transform: none; }

.hl-line { display: block; overflow: clip; }
.hl-inner { display: inline-block; }
:where(html.js) .hl-inner {
  transform: translateY(112%);
  transition: transform var(--t-3) var(--ease);
  transition-delay: var(--d, 0s);
}
body.is-in .hl-inner { transform: translateY(0); }

:where(html.js) .hero-media-inner {
  transform: scale(1.09);
  transition: transform 1.6s var(--ease-out);
}
body.is-in .hero-media-inner { transform: scale(1); }

.rule-line { display: none; }
.rule-fill { position: absolute; inset: 0; background: var(--accent); transform-origin: left center; transform: scaleX(1); }
:where(html.js) .rule-fill { transform: scaleX(0); transition: transform var(--t-3) var(--ease) 0.45s; }
body.is-in .rule-fill { transform: scaleX(var(--rule-base, 0.4)); }
body.is-in .rule-fill.bound { transition: none; }

/* scroll reveals */
:where(html.js) [data-io] {
  opacity: 0; transform: translateY(26px);
  transition: opacity var(--t-2) var(--ease), transform var(--t-2) var(--ease);
  transition-delay: var(--d, 0s);
}
:where(html.js) [data-io][data-fx="fade"] { transform: none; }
:where(html.js) [data-io][data-fx="left"] { transform: translateX(-28px); }
:where(html.js) [data-io][data-fx="right"] { transform: translateX(28px); }
:where(html.js) [data-io][data-fx="zoom"] { transform: scale(0.94); }
/* the process rows run the full width, so they need a longer travel than a
   card before the slide reads as a slide */
:where(html.js) .tl[data-fx="left"]  { transform: translateX(-64px); }
:where(html.js) .tl[data-fx="right"] { transform: translateX(64px); }
@media (max-width: 700px) {
  :where(html.js) .tl[data-fx="left"]  { transform: translateX(-26px); }
  :where(html.js) .tl[data-fx="right"] { transform: translateX(26px); }
}
:where(html.js) [data-io][data-fx="draw"] { transform: scaleX(0); transform-origin: left center; opacity: 1; }
[data-io].in { opacity: 1; transform: none; }
[data-io][data-fx="draw"].in { transform: scaleX(1); }
/* set by the observer once the reveal is done, or once the element has left
   the screen mid fade: nothing is left to animate, so drop the transition and
   let the compositor release the layer. */
[data-io].settled { transition: none; }
body.js-fallback [data-io] { opacity: 1; transform: none; }
body.js-fallback [data-io][data-fx="draw"] { transform: scaleX(1); }

/* ============================================================
   HEADER + SERVICES DROPDOWN
   ============================================================ */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 200; color: #FFFFFF; }
.nav-bg {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(22, 24, 27, 0.94), rgba(22, 24, 27, 0.66));
  opacity: 0.62;
  transition: opacity 0.35s var(--ease), backdrop-filter 0.35s var(--ease);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* Glass, but only where it is affordable. Blurring behind a fixed bar makes the
   compositor re-blur on every scroll frame; on a phone that is a real cost for
   an effect nobody is looking at, so it is limited to pointer-fine devices. */
@media (hover: hover) and (pointer: fine) {
  .nav-bg { backdrop-filter: blur(16px) saturate(125%); -webkit-backdrop-filter: blur(16px) saturate(125%); }
  /* Once scrolled the bar is solid white, so blurring behind it would be
     invisible work. Drop it rather than pay for it on every frame. */
  .nav.scrolled .nav-bg { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
body.menu-open .nav-bg { background: var(--ink); opacity: 1; }
html:not(.js) .nav-bg { background: var(--ink); opacity: 1; }
.nav-inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  height: var(--nav-h);
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut);
}
.lg-words { display: block; }
.lg-name {
  display: block; font-weight: 800; font-size: 1.06rem; line-height: 1;
  letter-spacing: -0.012em; text-transform: uppercase;
}
.lg-sub {
  display: block; font-weight: 600; font-size: 0.56rem; line-height: 1;
  letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.8; margin-top: 5px;
}
.footer .lg-name { font-size: 1.3rem; }
.footer .lg-sub { font-size: 0.64rem; margin-top: 6px; }
@media (max-width: 400px) {
  .nav-logo { gap: 9px; }
  .nav-logo .lg-mark { height: 32px; }
  .lg-name { font-size: 0.94rem; }
  .lg-sub { font-size: 0.5rem; letter-spacing: 0.16em; }
}

.nav-links { display: none; }
.nav-tools { display: none; }
.nav-phone {
  display: none; align-items: center; gap: 8px; white-space: nowrap;
  font-weight: 700; text-decoration: none; font-size: 1.02rem; min-height: 44px;
}
.nav-phone svg { width: 19px; height: 19px; flex: none; }
.nav-phone:hover { color: var(--accent-warm); }
/* the header sits on ink once scrolled, so its CTA inverts to stay visible */
.nav-tools .btn { background: #FFFFFF; border-color: #FFFFFF; color: var(--ink); }
.nav-tools .btn:hover { background: var(--accent-warm); border-color: var(--accent-warm); color: var(--ink); }

.nav-burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
  width: 48px; height: 46px; align-items: center;
}
.nav-burger span {
  display: block; width: 24px; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
body.menu-open .nav-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* desktop dropdown */
.nav-item { position: relative; }
.nav-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 0.92rem; padding: 12px 2px; white-space: nowrap;
}
.nav-trigger svg { width: 13px; height: 13px; transition: transform 0.3s var(--ease); }
.nav-item.open .nav-trigger svg { transform: rotate(180deg); }
.nav-drop {
  /* Centred on the viewport, not on the trigger. The trigger sits well left of
     centre, so centring the panel on it pushed the left column off screen once
     the panel grew wide enough to hold two columns of text. */
  position: fixed; top: calc(var(--nav-h) + 6px); left: 50%;
  width: min(860px, calc(100vw - 2 * var(--gut)));
  max-height: calc(100vh - var(--nav-h) - 34px); overflow-y: auto;
  transform: translateX(-50%);
  background: var(--paper); color: var(--ink);
  border-radius: var(--r-l); box-shadow: var(--shadow-m);
  padding: 18px; z-index: 210;
}
:where(html.js) .nav-drop {
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-8px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0s linear 0.28s;
}
.nav-item.open .nav-drop {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0s;
}
.nav-drop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; }
.nav-drop a {
  display: block; padding: 9px 12px; border-radius: var(--r-m); text-decoration: none;
  transition: background 0.2s var(--ease);
}
.nav-drop a:hover { background: var(--cream); }
.nav-drop a .dn { font-weight: 800; font-size: 0.8rem; color: var(--accent-deep); }
.nav-drop a b { display: block; font-weight: 700; font-size: 0.93rem; line-height: 1.25; }
.nav-drop a span { display: block; font-size: 0.78rem; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.nav-drop-foot {
  margin-top: 10px; padding: 12px 14px; border-radius: var(--r-m);
  background: var(--cream); display: flex; flex-wrap: wrap; gap: 8px 16px;
  align-items: center; justify-content: space-between; font-size: 0.88rem;
}
.nav-drop-foot a { display: inline-flex; padding: 0; font-weight: 700; color: var(--accent-deep); }

/* mobile panel */
.nav-panel {
  position: fixed; inset: 0; z-index: 190;
  background: var(--ink); color: #FFFFFF;
  padding: calc(var(--nav-h) + 26px) var(--gut) 40px;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
}
:where(html.js) .nav-panel {
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s linear 0.35s;
}
body.menu-open .nav-panel {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s;
}
html:not(.js) .nav-panel { position: static; display: none; }
html:not(.js) .nav-burger { display: none; }
html:not(.js) .nav-links { display: flex; gap: 16px; overflow-x: auto; font-size: 0.8rem; }
html:not(.js) .nav-links a { text-decoration: none; white-space: nowrap; padding: 10px 0; }
.nav-panel > nav > a, .nav-acc-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; text-decoration: none;
  font-weight: 700; font-size: 1.2rem; padding: 13px 0;
  border-bottom: 1px solid var(--line-dark);
}
.nav-panel > nav > a[aria-current="page"] { color: var(--accent-warm); }
.nav-acc-btn svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
.nav-acc.open .nav-acc-btn svg { transform: rotate(180deg); }
.nav-acc-list { display: grid; }
:where(html.js) .nav-acc-list { display: none; }
:where(html.js) .nav-acc.open .nav-acc-list { display: grid; }
.nav-acc-list a {
  display: flex; gap: 10px; padding: 11px 0 11px 14px; text-decoration: none;
  font-size: 1rem; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.nav-acc-list a .dn { color: var(--accent-warm); font-size: 0.78rem; font-weight: 800; }
.nav-acc-list a[aria-current="page"] { color: var(--accent-warm); }
.nav-panel-foot { margin-top: auto; padding-top: 24px; display: grid; gap: 2px; }
.nav-panel-foot a, .nav-panel-foot span {
  display: inline-flex; align-items: center; min-height: 42px; font-size: 0.98rem; font-weight: 600;
}
.nav-panel-foot .npf-addr { font-weight: 400; color: var(--muted-dark); min-height: 0; padding-top: 6px; }
body.menu-open { overflow: hidden; }

@media (min-width: 1280px) {
  .nav-burger, .nav-panel { display: none; }
  .nav-links { display: flex; gap: clamp(12px, 1.6vw, 26px); align-items: center; }
  .nav-links > a, .nav-links .nav-trigger {
    position: relative; text-decoration: none; font-weight: 600; font-size: 0.96rem;
    padding: 14px 2px; white-space: nowrap;
  }
  .nav-links > a::after, .nav-item > .nav-trigger::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px;
    border-radius: 2px; background: var(--accent);
    transform: scaleX(0); transform-origin: left center;
    transition: transform 0.3s var(--ease);
  }
  .nav-links > a:hover::after, .nav-links > a[aria-current="page"]::after,
  .nav-item.open > .nav-trigger::after, .nav-item.is-section > .nav-trigger::after { transform: scaleX(1); }
  .nav-tools { display: flex; align-items: center; gap: 15px; flex: none; }
  .nav-phone { display: inline-flex; }
}


/* the named compliance services, listed under the systems in the dropdown.
   Text only and two up, so eleven more entries do not turn the menu into a
   wall of thumbnails. */
.nav-drop-svc { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.nds-h {
  display: block; padding: 0 12px 8px; font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.nds-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; }
.nav-drop .nds-list a { display: block; padding: 8px 12px; border-radius: var(--r-s); min-height: 24px; }
.nav-drop .nds-list a:hover { background: var(--cream); color: var(--accent-deep); }
.nav-drop .nds-list a[aria-current="page"] { color: var(--accent-deep); }

/* A service card that links through to its own page. The arrow used to be
   absolutely positioned at the foot of the card, which meant it sat on top of
   the copy whenever the text grew past the space reserved for it. It is in
   normal flow now, pushed to the bottom by margin-top, so it cannot overlap
   anything no matter how long the blurb runs. */
.sci--link { text-decoration: none; color: inherit;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.sci--link:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-s); }
.sci-go {
  margin-top: auto; padding-top: 12px;
  display: inline-flex; align-items: center;
  min-height: 24px; color: var(--accent-deep);
  transition: transform 0.25s var(--ease);
}
.sci-go svg { width: 16px; height: 16px; }
.sci--link:hover .sci-go { transform: translateX(4px); }
@media (max-width: 700px) { .nds-list { grid-template-columns: minmax(0, 1fr); } }

/* cross-link between systems that share a boundary */
.seealso { color: var(--muted); }
.seealso b { color: var(--ink); font-weight: 700; }
.seealso a { color: var(--accent-deep); font-weight: 600; }
.seealso a:hover { text-decoration: underline; }

/* the named services under the system cards on the home page: plain, legible
   links so violations, FISP removal, expediting and permits are visible at a
   glance rather than hidden behind a card flip */
.svclist {
  display: grid; gap: 2px 22px; margin-top: clamp(26px, 4vh, 40px);
  grid-template-columns: minmax(0, 1fr); list-style: none;
}
.svclist li { border-top: 1px solid var(--line); }
.svclist a {
  display: block; padding: 12px 2px; min-height: 24px;
  font-weight: 700; font-size: 0.96rem; letter-spacing: -0.01em;
  text-decoration: none; color: var(--ink);
  transition: color 0.2s var(--ease), padding-left 0.2s var(--ease);
}
.svclist a:hover { color: var(--accent-deep); padding-left: 6px; }
@media (min-width: 700px) { .svclist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .svclist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- pointer ----------
   A ring easing after a dot, in place of the arrow. Fine pointers only: on a
   touch screen there is no pointer to replace. The native cursor is hidden
   only once JS has added .has-cursor, so if the script never runs the normal
   arrow stays and the site is still usable. */
@media (hover: hover) and (pointer: fine) {
  html.has-cursor.cursor-on,
  html.has-cursor.cursor-on body,
  html.has-cursor.cursor-on a,
  html.has-cursor.cursor-on button,
  html.has-cursor.cursor-on [role="button"],
  html.has-cursor.cursor-on summary,
  html.has-cursor.cursor-on label { cursor: none; }

  .cur-ring, .cur-dot {
    position: fixed; left: 0; top: 0; z-index: 400;
    pointer-events: none; opacity: 0;
    transition: opacity 0.25s var(--ease);
    will-change: transform;
  }
  html.cursor-on .cur-ring, html.cursor-on .cur-dot { opacity: 1; }

  .cur-ring {
    width: 34px; height: 34px; margin: -17px 0 0 -17px;
    border: 1.5px solid var(--ink); border-radius: 999px;
    transition: opacity 0.25s var(--ease), width 0.22s var(--ease),
                height 0.22s var(--ease), margin 0.22s var(--ease),
                border-color 0.22s var(--ease), background-color 0.22s var(--ease);
  }
  .cur-dot {
    width: 6px; height: 6px; margin: -3px 0 0 -3px;
    border-radius: 999px; background: var(--ink);
  }
  /* over anything clickable the ring opens up and takes the brand colour */
  .cur-ring.hot {
    width: 52px; height: 52px; margin: -26px 0 0 -26px;
    border-color: var(--accent); background: rgba(206, 34, 51, 0.08);
  }
  .cur-ring.down { width: 26px; height: 26px; margin: -13px 0 0 -13px; }

  /* Over a dark band both parts invert, or they vanish into it. The class is
     set from JS because the ring is a child of body, not of the band. */
  .cur-ring.on-dark { border-color: #FFFFFF; }
  .cur-dot.on-dark { background: #FFFFFF; }
  .cur-ring.on-dark.hot { border-color: var(--accent-warm); background: rgba(255, 138, 148, 0.14); }
}
/* a text caret is more useful than a ring inside a field */
html.has-cursor.cursor-on input,
html.has-cursor.cursor-on textarea { cursor: text; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 14px 28px;
  font-weight: 700; font-size: 0.97rem; text-decoration: none;
  border: 2px solid var(--ink); border-radius: 999px;
  background: var(--ink); color: var(--btn-ink);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn .mag-in { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--sm svg { width: 16px; height: 16px; }
.btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn--ghost:hover { background: rgba(255,255,255,.1); border-color: currentColor; }
.band--cream .btn--ghost:hover, .band--sand .btn--ghost:hover { background: rgba(30, 32, 35,.05); color: var(--ink); }
.btn--sm { min-height: 46px; padding: 11px 22px; font-size: 0.94rem; }
.btn:hover .arrow { transform: translateX(4px); }
.arrow { display: inline-block; transition: transform 0.3s var(--ease); }

/* ============================================================
   HERO, cinematic, layered, scroll-scrubbed
   ============================================================ */
.hero {
  position: relative; overflow: clip;
  min-height: 94vh; min-height: 94svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: #FFFFFF; background: var(--ink);
  padding-top: calc(var(--nav-h) + 26px);
}
.hero--lite { min-height: 66vh; min-height: 66svh; }
.hero-media { position: absolute; inset: 0; z-index: 1; }
.hero-media-inner { position: absolute; inset: -2%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(22, 24, 27, 0.62), rgba(22, 24, 27, 0.38) 40%, rgba(22, 24, 27, 0.94) 97%);
}
.hero-grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 30%, transparent 40%, rgba(22, 24, 27, 0.45) 100%);
}
.hero-content { position: relative; z-index: 3; width: 100%; padding-bottom: clamp(26px, 4vh, 48px); }
.hero-kicker { display: flex; align-items: center; gap: 11px; margin-bottom: clamp(12px, 2vh, 20px); }
.hero .h1 { margin-bottom: clamp(16px, 2.4vh, 24px); max-width: 16em; text-shadow: 0 2px 30px rgba(10, 15, 20, 0.35); }
.hero-sub {
  font-size: clamp(0.96rem, 1.6vw, 1.1rem); font-weight: 500; line-height: 1.62;
  color: rgba(255, 255, 255, 0.9); max-width: 42em; margin-bottom: clamp(20px, 3vh, 30px);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
/* over photography the solid slate button reads as a hole, so it inverts */
.hero .hero-ctas .btn:not(.btn--ghost), .page-head .hero-ctas .btn:not(.btn--ghost) {
  background: #FFFFFF; border-color: #FFFFFF; color: var(--ink);
}
.hero .hero-ctas .btn:not(.btn--ghost):hover,
.page-head .hero-ctas .btn:not(.btn--ghost):hover {
  background: var(--accent-warm); border-color: var(--accent-warm); color: var(--ink);
}

.trust { position: relative; z-index: 3; background: rgba(22, 24, 27, 0.9); border-top: 1px solid var(--line-dark); }
.trust-grid { display: grid; gap: 1px; max-width: var(--wrap); margin-inline: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trust-item {
  display: flex; align-items: center; gap: 11px; padding: 15px var(--gut);
  color: #FFFFFF; font-weight: 600; font-size: 0.88rem; line-height: 1.3;
}
.trust-item svg { width: 21px; height: 21px; flex: none; color: var(--accent-warm); }
@media (min-width: 900px) {
  .trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trust-item { padding-inline: clamp(14px, 2vw, 26px); }
  .trust-item:first-child { padding-left: var(--gut); }
  .trust-item:last-child { padding-right: var(--gut); }
}

.page-head {
  position: relative; overflow: clip; background: var(--ink); color: #FFFFFF;
  padding: calc(var(--nav-h) + clamp(52px, 9vh, 96px)) 0 clamp(36px, 6vh, 62px);
}
.page-head::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 120% at 15% 0%, rgba(255, 255, 255, 0.07), transparent 60%);
}
.page-head .wrap { position: relative; }
.page-head .rule-line { margin-top: clamp(16px, 2.5vh, 26px); max-width: 300px; }
.page-head .hero-sub { margin-top: 16px; margin-bottom: 0; }

/* ============================================================
   BANDS + SECTION HEADS
   ============================================================ */
.band { padding-block: clamp(58px, 9vh, 112px); position: relative; }
.band--cream { background: var(--cream); }
.band--sand { background: var(--sand); }
.band--ink { background: var(--ink); color: #FFFFFF; }
.band--ink2 { background: var(--ink-2); color: #FFFFFF; }
.band--tight { padding-block: clamp(40px, 6vh, 70px); }

.shead { margin-bottom: clamp(28px, 5vh, 52px); max-width: 48em; }
.shead-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.shead-eyebrow .kicker { color: var(--accent-deep); }
.band--ink .shead-eyebrow .kicker, .band--ink2 .shead-eyebrow .kicker { color: var(--accent-warm); }
.shead p { margin-top: 15px; color: var(--muted); }
.band--ink .shead p, .band--ink2 .shead p { color: var(--muted-dark); }
.shead--center { margin-inline: auto; text-align: center; }
.shead--center .shead-eyebrow { justify-content: center; }

/* ============================================================
   FLIP CARDS (services)
   ============================================================ */
.flip-grid { display: grid; gap: 18px; }
@media (min-width: 680px) { .flip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .flip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.flip { perspective: 1400px; content-visibility: auto; contain-intrinsic-size: auto 330px; }
.flip-inner {
  position: relative; height: 100%; min-height: 310px;
  transition: transform 0.75s var(--ease);
  transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
}
.flip:hover .flip-inner, .flip:focus-within .flip-inner, .flip.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: var(--r-l); overflow: hidden; overflow: clip;
  display: flex; flex-direction: column;
}
.flip-front { background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-s); }
.flip-front img { width: 100%; height: 62%; object-fit: cover; }
.flip-front .ff-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.flip-front .ff-num { font-size: 0.74rem; font-weight: 800; color: var(--accent-deep); letter-spacing: 0.08em; }
.flip-back {
  transform: rotateY(180deg);
  background: var(--ink); color: #FFFFFF; padding: 22px 22px 20px;
  gap: 10px; justify-content: space-between;
}
.flip-back ul { display: grid; gap: 7px; margin-top: 4px; }
.flip-back li { display: flex; gap: 9px; font-size: 0.9rem; color: var(--muted-dark); line-height: 1.4; }
.flip-back li::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--accent-warm); flex: none; margin-top: 9px; }
.flip-go { font-weight: 700; font-size: 0.92rem; color: var(--accent-warm); display: inline-flex; align-items: center; gap: 8px; }
.flip-hint {
  position: absolute; right: 12px; top: 12px; z-index: 2;
  width: 30px; height: 30px; border-radius: 999px;
  background: rgba(20, 32, 48, 0.74); color: #fff;
  display: grid; place-items: center; font-size: 0.8rem; font-weight: 700;
}
.flip-hint svg { width: 15px; height: 15px; }

/* ============================================================
   SERVICE LIST CARDS (non-flip)
   ============================================================ */
.cards { display: grid; gap: 18px; }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card {
  display: flex; flex-direction: column; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-l);
  overflow: hidden; overflow: clip; text-decoration: none; box-shadow: var(--shadow-s);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-m); }
.card-media { position: relative; overflow: hidden; overflow: clip; }
.card-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.7s var(--ease); }
.card:hover .card-media img { transform: scale(1.05); }
.card-num {
  position: absolute; left: 12px; top: 12px; background: rgba(30, 32, 35,.92); color: #FFFFFF;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; padding: 5px 12px; border-radius: 999px;
}
.card-body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.card-body p { color: var(--muted); font-size: 0.95rem; }
.card-go { margin-top: auto; padding-top: 12px; font-weight: 700; font-size: 0.9rem; color: var(--accent-deep); display: inline-flex; align-items: center; gap: 7px; }
.card:hover .card-go .arrow { transform: translateX(4px); }

/* ============================================================
   CINEMATIC SCROLL PANEL
   ============================================================ */
.cine { position: relative; overflow: clip; background: var(--ink); color: #FFFFFF; }
.cine-media { position: absolute; inset: -8% 0; will-change: transform; }
.cine-media img { width: 100%; height: 100%; object-fit: cover; }
.cine::after {
  content: ""; position: absolute; inset: 0;
  /* The copy sits on this photograph, so the scrim has to hold AA on its own
     over a sunlit facade. At the old 0.55 midpoint white ran to 4.15:1; the
     weakest point here is 0.72, which measures 5.81:1. */
  background: linear-gradient(to right, rgba(30, 32, 35, 0.94), rgba(30, 32, 35, 0.72) 62%, rgba(30, 32, 35, 0.86));
}
.cine-inner { position: relative; z-index: 2; padding-block: clamp(84px, 16vh, 190px); }
.cine-inner .h2 { max-width: 15em; }
.cine-inner p { margin-top: 16px; color: rgba(255, 255, 255, 0.85); }

/* ============================================================
   STATS / COUNTERS
   ============================================================ */
.stats { display: grid; gap: 16px; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-dark); border-radius: var(--r-m); padding: 22px; }
.stat-num { font-weight: 800; font-size: clamp(2.1rem, 4.6vw, 2.9rem); line-height: 1; font-variant-numeric: tabular-nums; }
.stat-title { font-weight: 700; margin: 9px 0 5px; font-size: 0.98rem; }
.stat-copy { color: var(--muted-dark); font-size: 0.9rem; }

/* ============================================================
   CHECK LIST / SPLIT
   ============================================================ */
.split { display: grid; gap: clamp(28px, 4vw, 60px); align-items: center; }
@media (min-width: 920px) { .split { grid-template-columns: 1fr 1fr; } }
.split--wide-media { grid-template-columns: 1fr; }
@media (min-width: 920px) { .split--wide-media { grid-template-columns: 1.15fr 1fr; } }
.split-media img { width: 100%; border-radius: var(--r-l); }
.checks { display: grid; gap: 15px; margin-top: 22px; }
.check { display: flex; gap: 12px; align-items: flex-start; }
.check svg { width: 21px; height: 21px; flex: none; color: var(--accent-deep); margin-top: 3px; }
.band--ink .check svg, .band--ink2 .check svg, .on-dark .check svg { color: var(--accent-warm); }
.check b { display: block; font-weight: 700; }
.check span { color: var(--muted); font-size: 0.95rem; }
.band--ink .check span, .band--ink2 .check span { color: var(--muted-dark); }

/* ============================================================
   SCOPE LIST
   ============================================================ */
.scope { display: grid; border-top: 1px solid var(--line); }
.band--ink .scope, .band--ink2 .scope { border-color: var(--line-dark); }
.scope-item {
  display: grid; grid-template-columns: 46px 1fr; gap: 5px 16px;
  padding: clamp(15px, 2.3vh, 24px) 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.band--ink .scope-item, .band--ink2 .scope-item { border-color: var(--line-dark); }
.scope-num { font-weight: 800; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.band--ink .scope-num, .band--ink2 .scope-num { color: var(--accent-warm); }
.scope-name { font-weight: 700; font-size: clamp(1rem, 1.9vw, 1.18rem); }
.scope-copy { grid-column: 2; color: var(--muted); max-width: 56em; }
.band--ink .scope-copy, .band--ink2 .scope-copy { color: var(--muted-dark); }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee { overflow: clip; border-block: 1px solid var(--line-dark); padding-block: 15px; background: var(--ink-2); color: #FFFFFF; }
.mq-track { display: flex; width: max-content; }
:where(html.js) .marquee.mq-on .mq-track { animation: mq 42s linear infinite; }
.marquee:hover .mq-track, .marquee:focus-within .mq-track { animation-play-state: paused; }
.mq-seg {
  display: flex; gap: 22px; padding-right: 22px;
  font-weight: 700; text-transform: uppercase; white-space: nowrap;
  font-size: clamp(0.82rem, 1.5vw, 0.98rem); letter-spacing: 0.1em;
}
.mq-seg .dot { color: var(--accent-warm); }
@keyframes mq { to { transform: translateX(-50%); } }

/* ============================================================
   TILES / GALLERY / FILTERS
   ============================================================ */
.tiles { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile { position: relative; display: block; border-radius: var(--r-m); overflow: hidden; overflow: clip; }
.tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.7s var(--ease); }
.tile:hover img { transform: scale(1.06); }
.tile-veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(22, 24, 27,.78), rgba(22, 24, 27,0) 55%); opacity: 0.85; pointer-events: none; }
.tile-tag {
  position: absolute; left: 12px; bottom: 11px; right: 12px;
  color: #FFFFFF; font-size: 0.8rem; font-weight: 600; line-height: 1.3;
}
.tile-loc { display: block; font-size: 0.72rem; font-weight: 600; color: var(--accent-warm); }
.pgrid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pgrid .tile[hidden] { display: none; }
/* initial cap: applied by the stylesheet so it is in force before any
   transition starts. Without JS every tile stays visible. */
/* the archive is never truncated: see main.js */
.pgrid .tile { content-visibility: auto; contain-intrinsic-size: auto 240px; }
.filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: clamp(22px, 4vh, 36px); }
.fbtn {
  min-height: 44px; padding: 9px 19px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); font-weight: 600; font-size: 0.9rem;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.fbtn:hover { border-color: var(--accent-deep); color: var(--accent-deep); }
.fbtn[aria-pressed="true"] { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.fbtn .fx { color: var(--accent-deep); font-weight: 700; }
.fbtn[aria-pressed="true"] .fx { color: var(--accent-warm); }
.pcount { margin-top: 18px; font-size: 0.9rem; color: var(--muted); }
.more-wrap { margin-top: 26px; display: flex; justify-content: center; }

/* ============================================================
   VIDEO CARDS
   ============================================================ */
.vids { display: grid; gap: 18px; }
@media (min-width: 800px) { .vids { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vid { content-visibility: auto; contain-intrinsic-size: auto 300px; border: 1px solid var(--line-dark); border-radius: var(--r-m); overflow: hidden; overflow: clip; background: rgba(255,255,255,.04); }
.vid video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.vid figcaption { padding: 13px 16px 15px; font-size: 0.9rem; font-weight: 600; }

/* ============================================================
   DRAG SCROLLER
   ============================================================ */
.drag { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.drag::-webkit-scrollbar { display: none; }
.drag.drag-live { cursor: grab; }
.drag.drag-live.dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.drag-track { display: flex; gap: 16px; width: max-content; padding-inline: var(--gut); }
.drag.drag-live img { pointer-events: none; }
.tx-card { flex: none; width: clamp(240px, 62vw, 380px); }
.tx-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: var(--r-m); }
.tx-card figcaption { padding-top: 10px; font-size: 0.9rem; font-weight: 600; }
.band--ink .tx-card figcaption { color: var(--muted-dark); }
.drag-hint { font-size: 0.8rem; margin-top: 15px; }

/* ============================================================
   PROCESS RAIL (pinned, scrubbed)
   ============================================================ */
.rail-panels { display: grid; gap: 20px; }
.rail-panel img { width: 100%; object-fit: cover; aspect-ratio: 4 / 3; border-radius: var(--r-m); }
.rail-panel figcaption { padding-top: 12px; }
.rail-step-num { font-weight: 800; color: var(--accent-warm); margin-right: 9px; }
.rail-step-title { font-weight: 700; }
.rail-step-copy { color: var(--muted-dark); margin-top: 5px; max-width: 38em; }
.rail-bar { display: none; }
.rail-inner {
  display: grid; gap: clamp(20px, 3.6vw, 54px);
  width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut);
  padding-block: clamp(58px, 9vh, 112px);
}
.rail:not(.rail-live) .rail-steps { display: none; }
:where(html.js) .rail.rail-live { height: 360vh; height: 360svh; }
:where(html.js) .rail-live .rail-stick {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  overflow: clip; display: flex; align-items: center; align-items: safe center;
}
:where(html.js) .rail-live .rail-inner { padding-block: 0; grid-template-columns: 1fr; align-items: center; max-height: 100%; }
:where(html.js) .rail-live .rail-panels {
  position: relative; aspect-ratio: 4 / 3; max-height: 50vh; max-height: 50svh;
  border-radius: var(--r-m); overflow: hidden; overflow: clip;
}
:where(html.js) .rail-live .rail-panel { position: absolute; inset: 0; opacity: 0; }
:where(html.js) .rail-live .rail-panel img { height: 100%; border-radius: 0; }
:where(html.js) .rail-live .rail-panel:first-child { opacity: 1; }
:where(html.js) .rail-live .rail-panel figcaption { display: none; }
:where(html.js) .rail-live .rail-steps { display: grid; gap: clamp(10px, 1.8vh, 20px); }
:where(html.js) .rail-live .rail-step { opacity: 0.4; transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
:where(html.js) .rail-live .rail-step.on { opacity: 1; transform: translateX(6px); }
:where(html.js) .rail-live .rail-bar {
  display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,.16);
  position: relative; overflow: clip; margin-top: 18px;
}
:where(html.js) .rail-live .rail-fill { position: absolute; inset: 0; background: var(--accent-warm); transform: scaleX(0); transform-origin: left center; }
@media (min-width: 900px) {
  :where(html.js) .rail-live .rail-inner { grid-template-columns: 1.1fr 1fr; }
  .rail-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(html.js) .rail-live .rail-panels { grid-template-columns: 1fr; }
}
@media (max-width: 899px), (max-height: 640px) {
  :where(html.js) .rail-live .rail-panels { max-height: 36vh; max-height: 36svh; }
  :where(html.js) .rail-live .rail-side .h2 { font-size: 1.4rem; margin-bottom: 10px; }
  :where(html.js) .rail-live .rail-steps { gap: 8px; }
  :where(html.js) .rail-live .rail-step-copy { display: none; }
  :where(html.js) .rail-live .rail-step.on .rail-step-copy { display: block; }
}
.rail-side .h2 { margin-bottom: 18px; }

/* ============================================================
   CONTACT / FORM / FOOTER / CALLBAR
   ============================================================ */
.info-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-l);
  padding: 26px; box-shadow: var(--shadow-s); display: grid; gap: 16px; align-content: start;
}
.info-row { display: grid; gap: 3px; }
.info-row .kicker { color: var(--accent-deep); }
.info-row a, .info-row address, .info-row span:not(.kicker) {
  font-style: normal; font-weight: 700; font-size: 1.04rem; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 30px;
}
.info-row a:hover { color: var(--accent-deep); }

.contact-lines { display: grid; gap: 4px; margin-block: 18px; }
.contact-lines a, .contact-lines address {
  display: inline-flex; align-items: center; gap: 10px; font-style: normal;
  font-weight: 700; font-size: clamp(1.06rem, 2.4vw, 1.42rem); text-decoration: none; min-height: 44px;
}
.contact-lines svg { width: 20px; height: 20px; flex: none; color: var(--accent-deep); }
.contact-lines a:hover { color: var(--accent-warm); }

.form { display: grid; gap: 14px; }
.form label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; display: grid; gap: 6px; }
.form input, .form textarea, .form select {
  font: inherit; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--paper); color: var(--ink); width: 100%;
}
.form input:focus, .form textarea:focus, .form select:focus { outline: 2px solid var(--accent-deep); outline-offset: 0; }
.form-status { font-weight: 600; }
.hp { position: absolute; left: -9999px; }

.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 180;
  display: grid; grid-template-columns: 1fr 1fr; background: var(--ink);
  border-top: 1px solid var(--line-dark); border-radius: var(--r-m) var(--r-m) 0 0;
  overflow: hidden; overflow: clip; padding-bottom: env(safe-area-inset-bottom);
}
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; text-decoration: none; font-weight: 700; font-size: 0.94rem; color: #FFFFFF;
}
.callbar a.cb-bid { background: #FFFFFF; color: var(--ink); }
body.has-callbar { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
@media (min-width: 1080px) { .callbar { display: none; } body.has-callbar { padding-bottom: 0; } }

.footer { background: var(--ink); color: #FFFFFF; padding: clamp(46px, 7vh, 76px) 0 30px; }
.footer-grid { display: grid; gap: 32px; margin-bottom: 36px; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; } }
.footer h3 { font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,.66); margin-bottom: 10px; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--accent-warm); }
.footer-brand p { color: var(--muted-dark); max-width: 32em; margin-top: 12px; font-size: 0.95rem; }
.footer-nav { display: grid; }
.footer-nav a { padding-block: 8px; font-size: 0.95rem; }
.footer-contact { display: grid; gap: 2px; font-weight: 600; }
.footer-contact a, .footer-contact address { padding-block: 8px; font-style: normal; display: block; font-size: 0.95rem; }
.footer-contact address { font-weight: 400; color: var(--muted-dark); }
.footer-contact .fc-web { display: block; padding-block: 8px; font-size: 0.95rem; }
.footer-legal {
  border-top: 1px solid var(--line-dark); padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between;
  font-size: 0.82rem; color: rgba(255,255,255,.62);
}

/* ============================================================
   TOUCH / REDUCED MOTION
   ============================================================ */
@media (hover: none) {
  .card:hover { transform: none; box-shadow: var(--shadow-s); }
  .card:hover .card-media img, .tile:hover img { transform: none; }
  .flip:hover .flip-inner { transform: none; }
  .flip.flipped .flip-inner { transform: rotateY(180deg); }
  .card-go .arrow, .arrow { transform: none !important; }
  .nav-links a::after { transition: none; }
}
@media (hover: hover) and (pointer: fine) { .flip-hint { display: none; } }


/* ============================================================
   REBUILD COMPONENTS
   Eleven service categories, breadcrumbs, timeline, FAQ, quotes,
   certifications, project cards, contact and the floating actions.
   Mobile first; every grid reserves its space so nothing shifts.
   ============================================================ */

/* ---------- breadcrumbs ---------- */
.crumbs { background: var(--cream); border-bottom: 1px solid var(--line); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-block: 13px; font-size: 0.82rem; }
.crumbs li { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.crumbs li + li::before { content: "/"; opacity: 0.45; }
/* WCAG 2.5.8 target size: these sit inline in a dense row, so the hit area
   is grown vertically rather than by adding visible spacing */
.crumbs a { color: var(--accent-deep); text-decoration: none; font-weight: 600;
  display: inline-flex; align-items: center; min-height: 24px; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { font-weight: 700; color: var(--ink); }

/* ---------- hero variants ---------- */
.hero--sm { min-height: 62svh; }
@supports not (min-height: 1svh) { .hero--sm { min-height: 62vh; } }
.hero--flat { background: var(--ink); color: #FFFFFF; min-height: 0; padding-block: clamp(120px, 20vh, 210px) clamp(48px, 8vh, 90px); }
.hero--flat .hero-content { padding-bottom: 0; }
.hero--flat::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 70% at 20% 0%, rgba(206,34,51,0.16), transparent 70%);
}

/* ---------- stat band ---------- */
.statband { padding-block: clamp(34px, 5vh, 54px); }
.stats { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 860px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat {
  display: flex; flex-direction: column; align-items: flex-start;
  background: rgba(255,255,255,0.05); border: 1px solid var(--line-dark);
  border-radius: var(--r-m); padding: 20px 20px 18px; min-height: 132px;
}
.stat-n { font-weight: 800; font-size: clamp(2rem, 5vw, 3rem); line-height: 1; }
.stat-suf { font-weight: 800; font-size: clamp(1.1rem, 2.4vw, 1.5rem); color: var(--accent-warm); line-height: 1; margin-top: -0.9em; margin-left: 2.2ch; }
.stat-l { margin-top: auto; padding-top: 12px; font-size: 0.86rem; color: var(--muted-dark); line-height: 1.35; }

/* ---------- service category cards ---------- */
.scgrid { display: grid; gap: 16px; }
@media (min-width: 700px) { .scgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .scgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.scgrid-foot { display: flex; justify-content: center; margin-top: 30px; }

.sc { content-visibility: auto; contain-intrinsic-size: auto 348px; }
@media (min-width: 700px) { .sc-link, .sc-front { min-height: 348px; } }
.sc-link { display: block; position: relative; text-decoration: none; border-radius: var(--r-l); }
.sc-face {
  display: flex; flex-direction: column; border-radius: var(--r-l);
  overflow: hidden; overflow: clip;
}
.sc-front { background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-s); }
.sc-media { display: block; height: 196px; background: var(--sand); overflow: clip; }
.sc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.sc-link:hover .sc-media img { transform: scale(1.05); }
.sc-body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 22px; flex: 1; }
.sc-n { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; color: var(--accent-deep); }
.sc-h { font-weight: 800; font-size: 1.12rem; letter-spacing: -0.012em; line-height: 1.2; color: var(--ink); }
.sc-s { font-size: 0.92rem; color: var(--muted); line-height: 1.45; }
.sc-back {
  position: absolute; inset: 0; background: var(--ink); color: #FFFFFF;
  padding: 22px 22px 20px; gap: 8px; opacity: 0; visibility: hidden;
  transition: opacity 0.34s var(--ease), visibility 0.34s var(--ease);
}
.sc-back .sc-n { color: var(--accent-warm); }
.sc-back .sc-h { color: #FFFFFF; }
.sc-list { display: grid; gap: 6px; margin-top: 6px; flex: 1; align-content: start; }
.sc-list li { display: flex; gap: 9px; font-size: 0.88rem; color: var(--muted-dark); line-height: 1.35; }
.sc-list li::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--accent-warm); flex: none; margin-top: 8px; }
.sc-list .sc-more { color: var(--accent-warm); font-weight: 600; }
.sc-list .sc-more::before { opacity: 0; }
.sc-go { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.92rem; color: var(--accent-warm); margin-top: 6px; }
.sc-go svg { width: 17px; height: 17px; }
@media (hover: hover) and (pointer: fine) {
  .sc-link:hover .sc-back, .sc-link:focus-visible .sc-back { opacity: 1; visibility: visible; }
}
/* touch: the back face is reachable on the category page itself, so the front
   face stays put rather than flipping under a finger that meant to scroll */
@media (hover: none) { .sc-back { display: none; } }

/* ---------- feature bands ---------- */
.feature { position: relative; overflow: clip; }
.feature-grid { display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; }
@media (min-width: 940px) { .feature-grid { grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr); } }
.feature-copy .h2 { margin: 12px 0 14px; }
.feature-list { display: grid; gap: 9px; margin: 20px 0 26px; }
@media (min-width: 600px) { .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feature-list--2 { max-width: 640px; }
.feature-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.94rem; color: var(--muted-dark); line-height: 1.4; }
.feature-list svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--accent-warm); }

.feature-art {
  position: relative; display: grid; gap: 14px; align-content: center;
  padding: clamp(26px, 4vw, 44px); border-radius: var(--r-xl);
  border: 1px solid var(--line-dark); background: rgba(255,255,255,0.04);
  min-height: 300px;
}
.fa-deck { display: block; height: 46px; border-radius: var(--r-s); background: linear-gradient(100deg, rgba(206,34,51,0.5), rgba(206,34,51,0.12)); position: relative; }
.fa-deck::after { content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: 2px; background: rgba(22,32,42,0.5); border-radius: 2px; }
.fa-deck:nth-child(2) { opacity: 0.72; }
.fa-deck:nth-child(3) { opacity: 0.46; }
.fa-label { display: block; margin-top: 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-warm); }

/* ---------- timeline ---------- */
.timeline { display: grid; gap: 2px; counter-reset: tl; }
.tl { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px 0; border-top: 1px solid var(--line); }
.tl:last-child { border-bottom: 1px solid var(--line); }
.tl-n { font-weight: 800; font-size: 1.05rem; color: var(--accent-deep); letter-spacing: 0.04em; padding-top: 2px; }
.tl b { display: block; font-size: 1.08rem; letter-spacing: -0.012em; margin-bottom: 4px; }
.tl p { color: var(--muted); font-size: 0.95rem; max-width: 56ch; }
.band--ink .tl, .band--ink2 .tl { border-color: var(--line-dark); }
.band--ink .tl p, .band--ink2 .tl p { color: var(--muted-dark); }

/* ---------- why grid ---------- */
.whygrid { display: grid; gap: 14px; }
@media (min-width: 620px) { .whygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .whygrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.why { display: flex; flex-direction: column; gap: 7px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--paper); min-height: 158px; }
.why-i { display: inline-flex; width: 30px; height: 30px; border-radius: 999px; align-items: center; justify-content: center; background: var(--sand); color: var(--accent-deep); flex: none; }
.why-i svg { width: 16px; height: 16px; }
.why b { font-size: 0.99rem; letter-spacing: -0.01em; }
.why span:last-child { font-size: 0.88rem; color: var(--muted); line-height: 1.45; }

/* ---------- industries ---------- */
.indgrid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .indgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ind { position: relative; display: block; border-radius: var(--r-m); overflow: clip; text-decoration: none; aspect-ratio: 4 / 3; background: var(--ink); }
.ind img { width: 100%; height: 100%; object-fit: cover; opacity: 0.72; transition: transform 0.7s var(--ease), opacity 0.4s var(--ease); }
.ind:hover img { transform: scale(1.06); opacity: 0.85; }
.ind-t { position: absolute; left: 14px; right: 14px; bottom: 12px; color: #FFFFFF; font-weight: 700; font-size: 0.92rem; line-height: 1.25; text-shadow: 0 2px 12px rgba(10, 15, 20,0.6); }

.indcgrid { display: grid; gap: 18px; }
@media (min-width: 700px) { .indcgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .indcgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.indc { border: 1px solid var(--line); border-radius: var(--r-l); overflow: clip; background: var(--paper); box-shadow: var(--shadow-s); display: flex; flex-direction: column; }
.indc-media { display: block; height: 196px; background: var(--sand); overflow: clip; }
.indc-media img { width: 100%; height: 100%; object-fit: cover; }
.indc-body { padding: 18px 20px 22px; display: grid; gap: 6px; }
.indc-body b { font-size: 1.06rem; letter-spacing: -0.012em; }
.indc-body p { font-size: 0.92rem; color: var(--muted); line-height: 1.45; }

/* ---------- emergency band ---------- */
.eb { display: grid; gap: 26px; align-items: center; }
@media (min-width: 940px) { .eb { grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr); } }
.eb .h2 { margin: 12px 0 14px; }
.eb-act { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
@media (min-width: 520px) and (max-width: 939px) { .eb-act { flex-direction: row; flex-wrap: wrap; } }
.btn--big { min-height: 64px; font-size: 1.06rem; }
.btn--big svg { width: 19px; height: 19px; }

/* ---------- quotes ---------- */
.quotegrid { display: grid; gap: 16px; }
@media (min-width: 780px) { .quotegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quote { display: flex; flex-direction: column; gap: 16px; padding: 26px 24px; border: 1px dashed var(--line); border-radius: var(--r-l); background: var(--paper); min-height: 200px; }
.quote blockquote p { font-size: 1.02rem; line-height: 1.5; color: var(--muted); }
.quote figcaption { margin-top: auto; display: grid; gap: 2px; }
.quote figcaption b { font-size: 0.95rem; }
.quote figcaption span { font-size: 0.85rem; color: var(--muted); }
.slotnote { display: block; margin-top: 22px; color: var(--muted); max-width: 62ch; }
.band--ink .slotnote, .band--ink2 .slotnote { color: var(--muted-dark); }

/* ---------- certifications ---------- */
.certgrid { display: grid; gap: 14px; }
@media (min-width: 660px) { .certgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .certgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cert { display: flex; flex-direction: column; gap: 8px; padding: 22px 20px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--paper); min-height: 172px; }
.cert-i { display: inline-flex; width: 30px; height: 30px; border-radius: 999px; align-items: center; justify-content: center; background: var(--sand); color: var(--accent-deep); flex: none; }
.cert-i svg { width: 16px; height: 16px; }
.cert b { font-size: 1rem; letter-spacing: -0.012em; }
.cert p { font-size: 0.89rem; color: var(--muted); line-height: 1.45; }
.band--cream .cert { background: var(--paper); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0; margin-top: 8px; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  width: 100%; text-align: left; padding: 20px 0; min-height: 56px;
  font-weight: 700; font-size: 1.02rem; letter-spacing: -0.012em; line-height: 1.35;
}
.faq-q svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--accent-deep); transition: transform 0.32s var(--ease); }
.faq-q[aria-expanded="true"] svg { transform: rotate(180deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.36s var(--ease); }
.faq-a > p { overflow: hidden; color: var(--muted); font-size: 0.98rem; line-height: 1.6; max-width: 68ch; }
.faq-q[aria-expanded="true"] + .faq-a { grid-template-rows: 1fr; }
.faq-q[aria-expanded="true"] + .faq-a > p { padding-bottom: 22px; }
html:not(.js) .faq-a { grid-template-rows: 1fr; }
html:not(.js) .faq-a > p { padding-bottom: 22px; }

/* ---------- services index page ---------- */
.cattoc { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); justify-items: stretch; margin-bottom: clamp(34px, 6vh, 62px); }
@media (min-width: 620px) { .cattoc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .cattoc { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Index cards: fixed 4:3 thumbnail whatever the source crop, the title in the
   middle column, the number holding the right column so it stays aligned
   however long the title runs. Three columns at most, not four: at four the
   longest system name had nowhere to go and was being cut off mid word. The
   title is not clamped now, so a name is either shown or the card grows, but
   never truncated. */
.cattoc a {
  position: relative; display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center; gap: 12px; padding: 15px 16px; min-height: 76px;
  border: 1px solid var(--line); border-radius: var(--r-m); text-decoration: none;
  font-weight: 700; font-size: 0.9rem; background: var(--paper);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.cattoc a:hover { border-color: var(--accent-deep); background: var(--cream); }
.cattoc a > b { min-width: 0; line-height: 1.3; overflow-wrap: anywhere; }
.cattoc .num { font-size: 0.74rem; color: var(--muted); letter-spacing: 0.08em; align-self: center; }

.catblocks { display: grid; gap: clamp(38px, 6vh, 66px); }
.catblock { scroll-margin-top: calc(var(--nav-h) + 20px); padding-top: clamp(20px, 3vh, 34px); border-top: 2px solid var(--line); }
.catblock--flag { border-top-color: var(--accent-deep); }
.catblock-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; align-items: start; margin-bottom: 22px; }
@media (min-width: 900px) { .catblock-head { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; } }
.cb-n { font-weight: 800; font-size: 1.5rem; color: var(--accent-deep); letter-spacing: 0.02em; }
.cb-h { margin-bottom: 6px; }
.catblock-head p { color: var(--muted); font-size: 0.97rem; line-height: 1.55; max-width: 68ch; grid-column: 2; }
.cb-go { grid-column: 2; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.92rem; color: var(--accent-deep); text-decoration: none; white-space: nowrap; min-height: 44px; }
@media (min-width: 900px) { .cb-go { grid-column: 3; } }
.cb-go svg { width: 17px; height: 17px; }
.cb-go:hover { text-decoration: underline; }
.cb-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
@media (min-width: 700px) { .cb-shots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cb-shot { border-radius: var(--r-m); overflow: clip; background: var(--sand); }
.cb-shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: transform 0.7s var(--ease); }
.cb-shot:hover img { transform: scale(1.05); }
.cb-list { display: grid; gap: 10px; }
@media (min-width: 700px) { .cb-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cb-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cb-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 11px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--paper); }
.cb-list svg { width: 16px; height: 16px; color: var(--accent-deep); margin-top: 4px; grid-row: span 2; }
.cb-list b { font-size: 0.96rem; letter-spacing: -0.01em; }
.cb-list span { font-size: 0.87rem; color: var(--muted); line-height: 1.45; }

/* ---------- category page scope ---------- */
.catintro { color: var(--muted); }
.catintro + .catintro { margin-top: 16px; }
.scigrid { display: grid; gap: 14px; }
@media (min-width: 680px) { .scigrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .scigrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sci { display: flex; flex-direction: column; gap: 8px; padding: 22px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); min-height: 168px; }
.sci-i { display: inline-flex; width: 30px; height: 30px; border-radius: 999px; align-items: center; justify-content: center; background: var(--sand); color: var(--accent-deep); flex: none; }
.sci-i svg { width: 16px; height: 16px; }
.sci b { font-size: 1rem; letter-spacing: -0.012em; }
.sci p { font-size: 0.9rem; color: var(--muted); line-height: 1.5; }

/* ---------- typographic panel for trades with no photography yet ---------- */
.specpanel-grid { display: grid; gap: clamp(26px, 4vw, 48px); }
@media (min-width: 940px) { .specpanel-grid { grid-template-columns: minmax(0,1.25fr) minmax(0,0.75fr); } }
.speclist { display: grid; gap: 10px; margin-top: 4px; }
@media (min-width: 620px) { .speclist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.speclist li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 3px 11px; padding: 15px 16px; border: 1px solid var(--line-dark); border-radius: var(--r-m); background: rgba(255,255,255,0.04); }
.speclist svg { width: 16px; height: 16px; color: var(--accent-warm); margin-top: 4px; grid-row: span 2; }
.speclist b { font-size: 0.95rem; }
.speclist span { font-size: 0.86rem; color: var(--muted-dark); line-height: 1.45; }
.photonote { align-self: start; padding: 24px 22px; border: 1px dashed var(--line-dark); border-radius: var(--r-l); background: rgba(255,255,255,0.03); display: grid; gap: 10px; }
.photonote p { color: var(--muted-dark); }
.photonote b { color: #FFFFFF; }
.photonote-ask { color: var(--accent-warm) !important; }
.photonote .btn { justify-self: start; margin-top: 4px; }

/* ---------- related ---------- */
.relgrid { display: grid; gap: 14px; }
@media (min-width: 700px) { .relgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rel { display: flex; flex-direction: column; gap: 7px; padding: 22px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-l); text-decoration: none; min-height: 180px; transition: border-color 0.25s var(--ease), transform 0.35s var(--ease); }
.rel:hover { border-color: var(--accent-deep); transform: translateY(-3px); }
.rel b { font-size: 1.04rem; letter-spacing: -0.012em; }
.rel-body > span:first-of-type { font-size: 0.89rem; color: var(--muted); line-height: 1.45; }
.rel-go { margin-top: auto; display: inline-flex; color: var(--accent-deep); }
.rel-go svg { width: 18px; height: 18px; }

/* ---------- project cards ---------- */
.pjgrid { display: grid; gap: 18px; }
@media (min-width: 700px) { .pjgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .pjgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pj { content-visibility: auto; contain-intrinsic-size: auto 330px; }
.pj a { display: flex; flex-direction: column; height: 100%; text-decoration: none; border: 1px solid var(--line); border-radius: var(--r-l); overflow: clip; background: var(--paper); box-shadow: var(--shadow-s); }
.pj-media { display: block; height: 210px; background: var(--sand); overflow: clip; }
.pj-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.pj a:hover .pj-media img { transform: scale(1.05); }
.pj-body { display: grid; gap: 7px; padding: 20px 22px 24px; }
.pj-body b { font-size: 1.2rem; letter-spacing: -0.016em; line-height: 1.2; }
.pj-go { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.9rem; color: var(--accent-deep); margin-top: 3px; }
.pj-go svg { width: 16px; height: 16px; }

/* ---------- gallery caption used by the generator ---------- */
.tile-cap { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 12px 14px; }
.tile-cap > span:last-child { position: relative; color: #FFFFFF; font-size: 0.78rem; font-weight: 600; line-height: 1.3; text-shadow: 0 1px 8px rgba(10, 15, 20,0.7); }

/* ---------- about ---------- */
.mv { display: grid; gap: 26px; }
@media (min-width: 820px) { .mv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; } }
.mv .lede { margin-top: 10px; color: var(--muted-dark); }
.valgrid { display: grid; gap: 14px; }
@media (min-width: 660px) { .valgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .valgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.val { display: flex; flex-direction: column; gap: 8px; padding: 24px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); min-height: 186px; }
.val-n { font-weight: 800; font-size: 0.8rem; letter-spacing: 0.1em; color: var(--accent-deep); }
.val b { font-size: 1.06rem; letter-spacing: -0.012em; }
.val p { font-size: 0.9rem; color: var(--muted); line-height: 1.5; }
.leadgrid { display: grid; gap: 16px; }
@media (min-width: 760px) { .leadgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lead { padding: 26px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-l); display: grid; gap: 5px; min-height: 168px; align-content: start; }
.lead--slot { border-style: dashed; }
.lead b { font-size: 1.16rem; letter-spacing: -0.014em; }
.lead > span { font-size: 0.88rem; color: var(--accent-deep); font-weight: 600; }
.lead p { margin-top: 8px; color: var(--muted); }
.lead p a { display: inline-flex; align-items: center; min-height: 24px;
  color: var(--accent-deep); font-weight: 700; }
.notice { padding: 28px 26px; border: 1px solid var(--line-dark); border-radius: var(--r-l); background: rgba(255,255,255,0.04); }
.notice .lede { margin-top: 10px; color: var(--muted-dark); }
/* The notice was written for a dark band, so its copy is near white. Dropped
   on a light band that reads as invisible text on cream, so it inverts with
   the band it is actually sitting on. */
.band--paper .notice, .band--cream .notice, .band--sand .notice {
  border-color: var(--line); background: rgba(255, 255, 255, 0.6);
}
.band--paper .notice .lede, .band--cream .notice .lede, .band--sand .notice .lede {
  color: var(--muted);
}
.band--paper .notice a, .band--cream .notice a, .band--sand .notice a { color: var(--accent-deep); }

/* ---------- contact ---------- */
.cgrid { display: grid; gap: clamp(28px, 4vw, 52px); align-items: start; }
@media (min-width: 940px) { .cgrid { grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr); } }
.cform-wrap .h3 { margin-bottom: 18px; }
.cside { display: grid; gap: 14px; }
.cbox { padding: 24px 22px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--paper); }
.cbox h3 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.cbox--em { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.cbox--em .kicker { color: var(--accent-warm); }
.cbox--em .small { color: var(--muted-dark); margin-top: 6px; }
.cbig { display: block; margin-top: 8px; font-weight: 800; font-size: clamp(1.5rem, 3.6vw, 2rem); letter-spacing: -0.02em; text-decoration: none; color: #FFFFFF; min-height: 44px; }
.arealist { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.arealist li { display: flex; gap: 8px; align-items: center; font-size: 0.9rem; color: var(--muted); }
.arealist svg { width: 15px; height: 15px; color: var(--accent-deep); flex: none; }
.mapbox { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--paper); overflow: clip; }
/* Concentric rings radiating from the pin, rather than the old crosshatch
   grid. It reads as coverage spreading out from the office, which is what the
   panel is actually saying. */
.mapbox-inner {
  position: relative; display: grid; gap: 9px; justify-items: center; text-align: center;
  padding: clamp(34px, 6vw, 58px) 24px; background: var(--cream); overflow: clip;
}
.mapbox-inner::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: min(150%, 620px); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: repeating-radial-gradient(circle at center,
    rgba(30, 32, 35, 0.07) 0 1px, transparent 1px 46px);
  pointer-events: none;
}
.mapbox-inner > * { position: relative; }
.mapbox-pin {
  display: inline-flex; width: 46px; height: 46px; align-items: center;
  justify-content: center; border-radius: 999px; background: var(--accent);
  color: #FFFFFF; box-shadow: 0 0 0 8px rgba(206, 34, 51, 0.12),
                              0 0 0 18px rgba(206, 34, 51, 0.06);
}
.mapbox-pin svg { width: 22px; height: 22px; }
.mapbox-inner b { font-size: 1.1rem; letter-spacing: -0.014em; }
.mapbox-inner > span { color: var(--muted); font-size: 0.94rem; }
.mapbox .btn { margin-top: 8px; }
.mapnote { max-width: 46ch; color: var(--muted); margin-top: 4px; }

/* ---------- CTA band ---------- */
.ctab { display: grid; gap: 24px; align-items: center; }
@media (min-width: 940px) { .ctab { grid-template-columns: minmax(0,1.2fr) minmax(0,0.8fr); gap: 48px; } }
.ctab .h2 { margin: 12px 0 12px; }
.ctab-act { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 520px) and (max-width: 939px) { .ctab-act { flex-direction: row; flex-wrap: wrap; } }

/* ---------- services dropdown items ---------- */
.ndi { display: inline-flex; align-items: center; justify-content: center; color: var(--accent-warm); margin-top: 2px; }
.ndi svg { width: 19px; height: 19px; }
.ndt { display: grid; gap: 2px; }

/* ---------- footer additions ---------- */
.footer-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.footer-badges span { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 7px 12px; border: 1px solid var(--line-dark); border-radius: 999px; color: var(--muted-dark); }
.fc-em { color: var(--accent-warm); }

/* ---------- primary button on dark surfaces ----------
   The solid button is var(--ink), which is also the dark band background, so
   anywhere the two meet the button has to invert or it reads as a hole. */
.band--ink .btn:not(.btn--ghost),
.band--ink2 .btn:not(.btn--ghost),
.cine .btn:not(.btn--ghost),
.specpanel .btn:not(.btn--ghost),
.cbox--em .btn:not(.btn--ghost) {
  background: #FFFFFF; border-color: #FFFFFF; color: var(--ink);
}
.band--ink .btn:not(.btn--ghost):hover,
.band--ink2 .btn:not(.btn--ghost):hover,
.cine .btn:not(.btn--ghost):hover,
.specpanel .btn:not(.btn--ghost):hover,
.cbox--em .btn:not(.btn--ghost):hover {
  background: var(--accent-warm); border-color: var(--accent-warm); color: var(--ink);
}

.nav-drop-foot a { white-space: nowrap; }

/* ---------- header: transparent over the hero, solid white once scrolled ----------
   Light-first, so the page never carries a heavy dark bar down its whole length. */
.nav.scrolled { color: var(--ink); }
.nav.scrolled .nav-bg {
  background: #FFFFFF; opacity: 1;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 20px rgba(30, 32, 35, 0.07);
}
/* Opening the services menu turns the bar white too, so everything sitting on
   it has to invert with it. Without drop-open here the top level labels, the
   phone number and the CTA were white on white whenever the menu was opened
   before the visitor had scrolled. */
.nav.scrolled .nav-links > a, .nav.scrolled .nav-trigger,
body.drop-open .nav-links > a, body.drop-open .nav-trigger { color: var(--ink); }
.nav.scrolled .nav-phone, body.drop-open .nav-phone { color: var(--ink); }
.nav.scrolled .nav-phone:hover, body.drop-open .nav-phone:hover { color: var(--accent-deep); }
.nav.scrolled .nav-burger span, body.drop-open .nav-burger span { background: var(--ink); }
.nav.scrolled .nav-tools .btn, body.drop-open .nav-tools .btn {
  background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.nav.scrolled .nav-tools .btn:hover, body.drop-open .nav-tools .btn:hover {
  background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.nav.scrolled .nav-drop { background: #FFFFFF; border-color: var(--line); }
.nav.scrolled .nav-drop a { color: var(--ink); }
.nav.scrolled .nav-drop a span { color: var(--muted); }
.nav.scrolled .nav-drop-foot { border-color: var(--line); color: var(--muted); }
body.drop-open .nav-bg { background: #FFFFFF; opacity: 1; }
body.menu-open .nav.scrolled { color: #FFFFFF; }
body.menu-open .nav-logo .lg-light { display: block !important; }
body.menu-open .nav-logo .lg-dark { display: none !important; }

/* ---------- logo: two tones, swapped by header state ----------
   The supplied lockup is used as-is; only which tone shows changes. */
.nav-logo { display: flex; align-items: center; text-decoration: none; min-height: 46px; flex: none; }
.nav-logo img { height: 104px; width: auto; display: block; }
.nav-logo .lg-dark { display: none; }
.nav.scrolled .nav-logo .lg-light, body.menu-open .nav-logo .lg-light,
body.drop-open .nav-logo .lg-light { display: none; }
.nav.scrolled .nav-logo .lg-dark, body.drop-open .nav-logo .lg-dark { display: block; }
body.menu-open .nav-logo .lg-light { display: block; }
body.menu-open .nav-logo .lg-dark { display: none; }
.footer .nav-logo img { height: 132px; }
.footer .nav-logo .lg-dark { display: none; }
/* the bar tracks the lockup, so the name can grow without the header
   swallowing the top of a small screen */
@media (max-width: 1279.98px) { :root { --nav-h: 112px; } .nav-logo img { height: 92px; } }
@media (max-width: 700px)  { :root { --nav-h: 96px; }  .nav-logo img { height: 78px; } }
@media (max-width: 420px)  { :root { --nav-h: 88px; }  .nav-logo img { height: 68px; } }

/* ---------- before & after ---------- */
.bagrid { display: grid; gap: 14px; }
@media (min-width: 820px) { .bagrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ba-half { position: relative; border-radius: var(--r-l); overflow: clip; background: var(--paper); border: 1px solid var(--line); }
.ba-half img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.ba-tag {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 999px; background: var(--ink); color: #FFFFFF;
}
.ba-half:last-child .ba-tag { background: var(--accent); }
.bacap { display: block; margin-top: 18px; color: var(--muted); max-width: 70ch; }

/* ---------- photo thumbnails that replaced the old icons ---------- */
.ndi { width: 60px; height: 44px; border-radius: 8px; overflow: clip; flex: none; background: var(--ink-2); }
.ndi img { width: 100%; height: 100%; object-fit: cover; display: block; }
.toci { width: 46px; aspect-ratio: 4 / 3; height: auto; border-radius: 7px; overflow: clip; flex: none; background: var(--sand); }
.toci img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rel { padding: 0; overflow: clip; }
.rel-media { display: block; height: 168px; overflow: clip; background: var(--sand); }
.rel-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.rel:hover .rel-media img { transform: scale(1.05); }
.rel-body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; flex: 1; }

/* ---------- offscreen sections cost nothing to scroll past ----------
   The home page carries nine category cards, a photo grid, a timeline and
   several card grids. content-visibility lets the browser skip layout and
   paint for the ones out of view; the intrinsic sizes keep the scrollbar
   honest so nothing shifts (CLS stays at 0). */
.whygrid, .certgrid, .quotegrid, .indgrid, .relgrid, .valgrid, .indcgrid, .pjgrid,
.timeline, .cb-shots {
  content-visibility: auto;
}
/* The placeholder size has to match the column count, or the page under
   reports its own height and grows as you scroll into each section. These are
   measured at each breakpoint, single column first. */
.whygrid   { contain-intrinsic-size: auto 1706px; }
.certgrid  { contain-intrinsic-size: auto 746px; }
.quotegrid { contain-intrinsic-size: auto 632px; }
.indgrid   { contain-intrinsic-size: auto 266px; }
.relgrid   { contain-intrinsic-size: auto 560px; }
.valgrid   { contain-intrinsic-size: auto 800px; }
.indcgrid  { contain-intrinsic-size: auto 2600px; }
.pjgrid    { contain-intrinsic-size: auto 3900px; }
.timeline  { contain-intrinsic-size: auto 868px; }
.cb-shots  { contain-intrinsic-size: auto 260px; }
@media (min-width: 620px) {
  .whygrid { contain-intrinsic-size: auto 880px; }
  .valgrid { contain-intrinsic-size: auto 420px; }
}
@media (min-width: 660px) { .certgrid { contain-intrinsic-size: auto 380px; } }
@media (min-width: 700px) {
  .relgrid  { contain-intrinsic-size: auto 200px; }
  .pjgrid   { contain-intrinsic-size: auto 1960px; }
  .indcgrid { contain-intrinsic-size: auto 1300px; }
  .cb-shots { contain-intrinsic-size: auto 200px; }
}
@media (min-width: 780px) { .quotegrid { contain-intrinsic-size: auto 220px; } }
@media (min-width: 900px) { .indgrid { contain-intrinsic-size: auto 420px; } }
@media (min-width: 1000px) { .whygrid { contain-intrinsic-size: auto 340px; } }
@media (min-width: 1040px) {
  .certgrid { contain-intrinsic-size: auto 360px; }
  .valgrid  { contain-intrinsic-size: auto 400px; }
  .indcgrid { contain-intrinsic-size: auto 900px; }
}
@media (min-width: 1060px) { .pjgrid { contain-intrinsic-size: auto 1320px; } }

/* ---------- project detail ---------- */
.pdetail { display: grid; gap: clamp(28px, 4vw, 52px); align-items: start; }
@media (min-width: 940px) { .pdetail { grid-template-columns: minmax(0,1.35fr) minmax(0,0.65fr); } }
.pdetail-body .catintro + .catintro { margin-top: 16px; }
.pmeta { display: grid; gap: 0; border-top: 1px solid var(--line); }
.pmeta-i { display: grid; gap: 3px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.pmeta dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.pmeta dd { margin: 0; font-size: 1rem; font-weight: 600; color: var(--ink); }
.pmeta dd a { color: var(--accent-deep); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 24px; }
.pmeta dd a:hover { text-decoration: underline; }

/* photo count badge on a project card */
.pj-media { position: relative; }
.pj-count {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(22, 24, 27, 0.82); color: #FFFFFF;
}

/* ---------- video cards ---------- */
.vgrid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 780px) { .vgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .vgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.vcard { border-radius: var(--r-l); overflow: clip; background: var(--ink); border: 1px solid var(--line); }
.vcard video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--ink); }
.vcard figcaption { padding: 12px 14px 14px; font-size: 0.84rem; font-weight: 600; color: #FFFFFF; line-height: 1.35; }

/* ---------- floating actions ---------- */
.fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 160;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 54px; padding: 0 18px; border-radius: 999px;
  background: var(--ink); color: #FFFFFF; text-decoration: none;
  font-weight: 700; font-size: 0.92rem; box-shadow: var(--shadow-m);
  transition: background 0.28s var(--ease);
}
.fab:hover { background: var(--accent-deep); }
.fab svg { width: 19px; height: 19px; }
.totop {
  position: fixed; right: 16px; bottom: 80px; z-index: 160;
  width: 46px; height: 46px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--shadow-s);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s var(--ease);
}
.totop.on { opacity: 1; visibility: visible; transform: none; }
.totop svg { width: 19px; height: 19px; }
/* On a phone the content runs the full width, so a wide floating pill sits on
   top of whatever scrolls under it. Icon only below 700px: same tap target,
   much smaller footprint over the page. */
@media (max-width: 699px) {
  .fab { gap: 0; padding: 0; width: 54px; justify-content: center; }
  .fab span { display: none; }
  /* keep the index number clear of the floating call button's column */
  .cattoc a { padding-right: 66px; }
}
@media (min-width: 700px) { .fab { right: 24px; bottom: 24px; } .totop { right: 24px; bottom: 90px; } }
html:not(.js) .totop { display: none; }

@media (prefers-reduced-motion: reduce) {
  :where(html.js) [data-rv],
  :where(html.js) [data-io],
  :where(html.js) .hl-inner,
  :where(html.js) .hero-media-inner,
  :where(html.js) .rule-fill {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  :where(html.js) .mq-track { animation: none !important; }
  .nav-bg, .arrow, .card, .card-media img, .tile img, .tile-veil,
  .nav-burger span, .nav-panel, .nav-drop, .fbtn, .nav-links a::after,
  .nav-trigger svg, .nav-acc-btn svg, .btn {
    transition: none !important;
  }
  /* flip cards fall back to a stacked, fully readable card */
  .flip-inner { transform: none !important; transition: none !important; min-height: 0; }
  .flip-face { position: static; backface-visibility: visible; -webkit-backface-visibility: visible; }
  .flip-back { transform: none !important; border-radius: 0 0 var(--r-l) var(--r-l); }
  .flip-front { border-radius: var(--r-l) var(--r-l) 0 0; border-bottom: 0; }
  .sc-back { transition: none !important; }
  .faq-a { transition: none !important; }
  .totop, .fab, .rel, .sc-media img, .indc-media img, .pj-media img, .ind img,
  .cb-shot img, .rel-media img { transition: none !important; }
  .rel:hover { transform: none !important; }
  .flip-hint { display: none; }
  html { scroll-behavior: auto; }
}