/* Ramos Earthworks LLC site stylesheet.
   Brand tokens sampled from the client logo (see _dev/operator-config.md).
   Layout architecture per agency standard: 1180px container, one spacing
   scale, carded groups, two shadow tiers, weighted footer grid. */

/* ---------- tokens ---------- */
:root {
  --red: #B53F46;
  --red-dark: #8E3137;
  --red-bright: #CC6167; /* small text on black: #B53F46 is only 3.41:1 there */
  --silver: #D9D9D8;
  --grey: #A5A6A5;
  --black: #101012;  /* tone A: primary dark section ground */
  --ink: #FFFFFF;    /* heading and emphasis text on the dark theme (light theme value was #1C1C1E) */
  --body: #D9D9D8;   /* body copy on the dark theme (light theme value was #3A3A3D) */
  --line: #2A2A2E;   /* hairlines and card borders on dark (light theme value was #E3E1DE) */
  --ground: #17171A; /* tone B: alternating dark section ground (light theme value was #F7F5F2) */
  --panel: #222226;  /* tone C: raised cards and panels, formerly white surfaces */
  --white: #FFFFFF;

  --container: 1180px;
  --section-pad: clamp(56px, 9vw, 104px);
  --header-h: 72px;
  --foldband-h: 96px; /* declared fold-band height; the arrival reads it */

  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.07);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.08), 0 16px 40px rgba(0,0,0,.14);

  --radius: 10px;
}

/* ---------- fonts (self-hosted) ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-var-full-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* metric-compatible fallback so the swap moves nothing (CLS guard) */
@font-face {
  font-family: 'Archivo-fallback';
  src: local('Arial');
  size-adjust: 99%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Archivo-fallback-cond';
  src: local('Arial Narrow'), local('Arial');
  size-adjust: 90%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: 'Archivo', 'Archivo-fallback', -apple-system, Arial, sans-serif;
  font-size: 16px; line-height: 1.55;
  color: var(--body);
  background: var(--ground);
}
img { max-width: 100%; display: block; height: auto; }
a { color: var(--red-bright); } /* --red-dark is 2.0:1 on tone A; bright red is the dark-surface link colour */
h1, h2, h3, h4 {
  color: var(--ink);
  font-family: 'Archivo', 'Archivo-fallback-cond', 'Arial Narrow', Arial, sans-serif;
  font-stretch: 68%;
  text-transform: uppercase;
  letter-spacing: .015em;
  line-height: 1.06;
  text-wrap: balance;
  font-weight: 700;
}
strong { color: var(--ink); }

/* two-ring focus indicator: visible on light AND dark */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--white);
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 2000;
  background: var(--white); color: #1C1C1E; font-weight: 600; /* stays a light chip; text pinned dark */
  padding: 10px 16px; border-radius: 6px; text-decoration: none;
}
.skip-link:focus { top: 8px; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(16px, 4vw, 28px); }
.section { padding-block: var(--section-pad); }
/* dark theme: plain .section shows the body ground (tone B #17171A);
   .section--white now carries tone A so the light-era A/B page rhythm survives */
.section--white { background: var(--black); }
.section--black { background: var(--black); }

/* removes an element visually while keeping it in the DOM and the
   accessibility tree (SEO + breadcrumb structured data retained) */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.section-head { max-width: 720px; margin-bottom: clamp(26px, 4vw, 40px); }
.section-head--center { margin-inline: auto; text-align: center; }
.kicker {
  color: var(--red-bright); font-weight: 700; letter-spacing: .14em; font-size: 13px; /* every kicker now sits on dark */
  font-stretch: 80%; text-transform: uppercase; margin-bottom: 10px;
  display: flex; align-items: center; gap: 10px;
}
.kicker::before { content: ""; width: 26px; height: 3px; background: var(--red); flex: none; }
.section-head--center .kicker { justify-content: center; }
.section-head--center .kicker::after { content: ""; width: 26px; height: 3px; background: var(--red); flex: none; }
.section-head h2 { font-size: clamp(27px, 3.4vw, 40px); margin-bottom: 12px; }
.section-head p { color: var(--body); }
.section--black .section-head h2 { color: var(--white); }
.section--black .section-head p { color: var(--grey); }

.nowrap { white-space: nowrap; }

/* buttons */
.btn {
  display: inline-block; text-decoration: none; font-weight: 700; font-size: 14px;
  font-stretch: 76%; text-transform: uppercase; letter-spacing: .06em;
  padding: 14px 22px; border-radius: 6px; border: 0; cursor: pointer;
  font-family: inherit;
}
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-dark); }
.btn--ghost-dark { color: var(--silver); border: 1px solid var(--grey); background: transparent; }
.btn--ghost-dark:hover { color: var(--white); border-color: var(--silver); }
.btn--ghost-light { color: var(--ink); border: 1px solid var(--grey); background: transparent; }
.btn--ghost-light:hover { border-color: var(--ink); }

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 1200;
  background: var(--black);
  height: var(--header-h);
}
.hdr__in {
  max-width: var(--container); margin-inline: auto; height: 100%;
  padding-inline: clamp(16px, 4vw, 28px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.hdr__brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.hdr__mark { height: 42px; width: auto; }
.hdr__brand .hdr__name { line-height: 1; }
.hdr__name { color: var(--silver); font-weight: 800; letter-spacing: .14em; font-size: 17px; }
.hdr__llc { color: var(--red-bright); font-weight: 700; letter-spacing: .14em; font-size: 11px; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav__item { position: relative; display: flex; align-items: stretch; }
.nav__link {
  color: var(--silver); text-decoration: none; font-size: 15px; font-weight: 500;
  padding: 10px 12px; border-radius: 6px; display: flex; align-items: center;
}
.nav__item:hover > .nav__link, .nav__link:hover { color: var(--white); background: #1d1d20; }
/* dropdown parent reads as ONE control: shared hover surface, label + caret */
.nav__item--parent { border-radius: 6px; }
.nav__item--parent:hover { background: #1d1d20; }
.nav__item--parent:hover > .nav__link { background: transparent; }
.nav__caret {
  background: transparent; border: 0; color: var(--silver); cursor: pointer;
  padding: 10px 8px 10px 2px; display: flex; align-items: center; border-radius: 6px;
  font-family: inherit;
}
.nav__caret svg { transition: transform .15s ease; }
.nav__item--parent:hover .nav__caret { color: var(--white); }
.nav__item--open > .nav__caret svg { transform: rotate(180deg); }
.nav__panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 1300;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lift); min-width: 250px; padding: 8px;
}
.nav__panel a {
  display: block; text-decoration: none; color: var(--ink); font-size: 15px;
  padding: 9px 12px; border-radius: 6px;
}
.nav__panel a:hover { background: var(--ground); }
.nav__panel a.nav__overview { font-weight: 700; border-bottom: 1px solid var(--line); border-radius: 6px 6px 0 0; margin-bottom: 4px; }
.hdr__phone { color: var(--silver); text-decoration: none; font-size: 15px; white-space: nowrap; }
.hdr__phone:hover { color: var(--white); }
.hdr__cta { white-space: nowrap; padding: 10px 18px; font-size: 14px; }
.nav-toggle {
  display: none; background: transparent; border: 0; color: var(--silver);
  width: 44px; height: 44px; cursor: pointer; align-items: center; justify-content: center;
}

@media (max-width: 980px) {
  .nav-toggle { display: flex; }
  .hdr__phone { display: none; }
  .hdr__llc { display: none; } /* mark carries the LLC identity on small screens */
  .hdr__mark { height: 36px; }
  .nav {
    display: none;
    position: absolute; top: var(--header-h); left: 0; right: 0; z-index: 1250;
    background: var(--black); border-top: 1px solid #2a2a2e;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 10px clamp(16px, 4vw, 28px) 18px;
    /* panel must fit the viewport and scroll internally */
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
  }
  .nav.nav--open { display: flex; }
  .nav__item { flex-direction: column; align-items: stretch; }
  .nav__link { padding: 13px 8px; font-size: 16px; }
  .nav__item--parent { display: grid; grid-template-columns: 1fr 48px; align-items: center; }
  .nav__caret { grid-column: 2; justify-content: center; height: 48px; }
  .nav__panel {
    position: static; grid-column: 1 / -1; box-shadow: none; border: 0;
    background: #17171a; padding: 0 0 6px 14px; min-width: 0;
  }
  .nav__panel a { color: var(--silver); }
  .nav__panel a:hover { background: #222226; }
  .nav__panel a.nav__overview { border-color: #2a2a2e; }
}

/* small red kicker text on dark surfaces needs the brighter red */
.section--black .kicker, .proof .kicker, .quote .kicker, .okmap-band .kicker, .stats .kicker { color: var(--red-bright); }

/* ---------- arrival (H4 screen one) ---------- */
.arrival {
  position: relative;
  height: calc(100svh - var(--header-h) - var(--foldband-h));
  min-height: 470px;
  overflow: hidden;
  background: var(--black);
}
.arrival__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.arrival__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,16,18,0) 16%, rgba(16,16,18,.64) 44%, rgba(16,16,18,.9) 70%, rgba(16,16,18,.97) 100%);
}
.arrival__copy {
  position: absolute; left: 0; right: 0; bottom: 0;
  color: var(--silver);
  padding: 0 clamp(16px, 4vw, 48px) clamp(20px, 3vw, 36px);
  max-width: 760px;
}
.arrival__badge {
  display: inline-block; white-space: nowrap;
  background: rgba(16,16,18,.94); color: var(--red-bright);
  border: 1px solid rgba(204,97,103,.45); border-radius: 999px;
  font-weight: 700; letter-spacing: .12em; font-size: 12px; font-stretch: 80%;
  text-transform: uppercase; padding: 8px 14px; margin-bottom: 14px;
}
.arrival__h1 {
  color: var(--white); font-size: clamp(34px, 5vw, 62px);
  margin-bottom: 12px;
}
.arrival__h1 em { font-style: normal; color: var(--red-bright); }
.arrival__sub { font-size: clamp(14px, 1.3vw, 17px); color: var(--grey); margin-bottom: 16px; max-width: 54ch; }

.arrival__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.arrival__cue {
  position: absolute; right: clamp(20px, 4vw, 48px); bottom: 20px;
  color: var(--white); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(16,16,18,.72); padding: 8px 14px; border-radius: 6px;
}
@media (max-width: 560px) {
  .arrival__img { object-position: 58% 100%; }
  .arrival__cue { display: none; }
  .arrival__copy { padding-bottom: 18px; }
}

/* ---------- fold band: content at the fold pulls the scroll ---------- */
.foldband {
  height: var(--foldband-h);
  background: var(--red);
  display: grid; align-items: center;
  position: relative; overflow: hidden;
}
/* the band speaks the arrival's language: facts settle in sequence, then a
   bright bead crosses the band's top edge once, echoing the map's tracer */
html.mo-arrive .foldband__list li { transform-origin: left bottom; animation: hset-x .55s cubic-bezier(.22,.7,.28,1) both; }
html.mo-arrive .foldband__list li:nth-child(1) { animation-delay: .10s; }
html.mo-arrive .foldband__list li:nth-child(2) { animation-delay: .18s; }
html.mo-arrive .foldband__list li:nth-child(3) { animation-delay: .26s; }
html.mo-arrive .foldband__list li:nth-child(4) { animation-delay: .34s; }
.foldband::after {
  content: ""; position: absolute; top: 0; left: 0; width: 14%; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  transform: translateX(-110%);
}
@keyframes band-sweep { to { transform: translateX(760%); } }
html.mo-arrive .foldband::after { animation: band-sweep 1.25s cubic-bezier(.45,.05,.35,1) .5s 1 forwards; }
.foldband__list {
  list-style: none;
  max-width: var(--container); margin-inline: auto; width: 100%;
  padding-inline: clamp(16px, 4vw, 28px);
  display: flex; justify-content: space-between; gap: 12px 28px;
}
.foldband__list li {
  color: #fff; font-weight: 700; font-size: 13.5px; letter-spacing: .08em;
  font-stretch: 78%; text-transform: uppercase; white-space: nowrap;
}
@media (max-width: 900px) {
  :root { --foldband-h: 132px; }
  .foldband__list { flex-wrap: wrap; justify-content: flex-start; gap: 10px 26px; }
  .foldband__list li { white-space: normal; }
}

/* ---------- proof grid (H4 screen two) ---------- */
.proof { background: var(--black); padding-block: clamp(48px, 7vw, 88px); }
.proof__grid {
  max-width: var(--container); margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 28px);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.proof__cell { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 6px; }
.proof__cell img { width: 100%; height: 100%; object-fit: cover; }
.proof__cell figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(16,16,18,.82); color: var(--silver);
  font-size: 11.5px; letter-spacing: .04em; padding: 5px 9px;
}
@media (max-width: 760px) { .proof__grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- services grid ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; }
.svc-card {
  grid-column: span 2;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  border-top: 3px solid var(--red);
  box-shadow: var(--shadow); overflow: hidden;
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
}
/* 5 cards in a 3-col rhythm: last row of 2 centered by span offsets */
.svc-card:nth-child(4) { grid-column: 2 / span 2; }
.svc-card:nth-child(5) { grid-column: 4 / span 2; }
.svc-card__media { aspect-ratio: 3 / 2; overflow: hidden; }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; }
.svc-card__body { padding: 24px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.svc-card__body h3 { font-size: 19px; }
.svc-card__body p { font-size: 15px; }
.svc-card__more {
  margin-top: auto; padding-top: 10px; color: var(--silver);
  font-weight: 700; font-size: 13px; letter-spacing: .08em;
  font-stretch: 76%; text-transform: uppercase;
}
/* demolition: honest text-led card, no photo exists */
.svc-card--text { background: var(--black); border-color: var(--black); }
.svc-card--text .svc-card__rule { width: 56px; height: 4px; background: var(--red); margin: 26px 22px 0; }
.svc-card--text h3 { color: var(--white); }
.svc-card--text p { color: var(--grey); }
.svc-card--text .svc-card__more { color: var(--silver); }
@media (max-width: 980px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-card { grid-column: auto !important; }
  .svc-card:last-child:nth-child(odd) { grid-column: 1 / -1 !important; }
}
@media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } }

/* ---------- why cards ---------- */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.why-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  border-top: 3px solid var(--red);
  box-shadow: var(--shadow); padding: 26px 20px 22px;
}
.why-card__num {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--red); color: #fff; font-weight: 700;
  display: grid; place-items: center; margin-bottom: 14px; font-size: 17px;
}
.why-card h3 { font-size: 17.5px; margin-bottom: 8px; }
.why-card p { font-size: 14.5px; }
@media (max-width: 980px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; } }

/* ---------- why editorial (pull quote + in-section CTA pair) ---------- */
.why-ed { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.why-ed h2 { font-size: clamp(28px, 3.6vw, 44px); margin-bottom: 16px; }
.why-ed__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.why-ed p:not(.pull):not(.kicker) { margin-bottom: 14px; }
@media (max-width: 860px) { .why-ed { grid-template-columns: 1fr; } }

/* ---------- process steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.step {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  border-top: 3px solid var(--red);
  box-shadow: var(--shadow); padding: 26px 20px 22px;
}
.step__num {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--red); color: #fff; font-weight: 700;
  display: grid; place-items: center; margin-bottom: 14px; font-size: 17px;
}
.step h3 { font-size: 17.5px; margin-bottom: 8px; }
.step p { font-size: 14.5px; }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ---------- gallery preview + gallery ---------- */
.gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gal-tile {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4 / 3; box-shadow: var(--shadow); display: block;
}
.gal-tile img { width: 100%; height: 100%; object-fit: cover; }
.gal-tile figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(16,16,18,.78); color: var(--silver);
  font-size: 12.5px; padding: 6px 10px;
}
@media (max-width: 760px) { .gal-grid { grid-template-columns: repeat(2, 1fr); } }

/* before/after pairs: two tiles side by side at every width so the
   comparison is always one glance; tiles reuse the standard .gal-tile */
.gal-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
/* one column below 860, the breakpoint the site's other two-column layouts
   (svc-split, two-col, quote__wrap, faq-wrap) already collapse at; at 760
   a two-column slider would be ~343px wide and the drag gets fiddly */
@media (max-width: 860px) { .gal-pairs { grid-template-columns: 1fr; } }
.gal-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .gal-pairs, .gal-pair { gap: 12px; } }
.gal-tile__tag {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  background: rgba(16,16,18,.82); color: var(--silver);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 6px;
}

/* before/after drag slider: JS upgrade of a .gal-pair. The no-JS state is
   the side-by-side tiles above; when the script runs, both photos merge
   into one 4:3 box, an invisible range input drives --ba-pos, and the
   after layer is clipped with inset(). */
.gal-pair--ba { display: block; }
.ba {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: var(--radius); box-shadow: var(--shadow);
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--ba-pos, 50%)); }
.ba__divider {
  position: absolute; top: 0; bottom: 0; left: var(--ba-pos, 50%);
  width: 3px; margin-left: -1.5px; background: var(--red);
  box-shadow: 0 0 0 1px rgba(255,255,255,.85); /* keeps the line visible over red dirt */
  pointer-events: none; z-index: 1;
}
.ba__divider::after {
  content: "\2194";
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--red); border: 2px solid var(--white);
  color: #fff; font-size: 19px; font-weight: 700; line-height: 1;
  display: grid; place-items: center;
}
.ba .gal-tile__tag--after { left: auto; right: 10px; }
.ba__range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize; z-index: 2;
  -webkit-appearance: none; appearance: none;
  touch-action: pan-y pinch-zoom; /* vertical drag scrolls the page, horizontal moves the divider */
}
.ba:has(.ba__range:focus-visible) .ba__divider::after {
  box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--red); /* the site's two-ring focus */
}

.gal-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.gal-filter {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.gal-filter[aria-pressed="true"] { background: var(--white); color: var(--black); border-color: var(--white); } /* active filter inverts to light on the dark theme */

/* gallery video (contract: strict by default; JS enhances to loop mode) */
.gal-subhead {
  display: flex; align-items: center; gap: 14px;
  font-size: 15px; letter-spacing: .1em; color: var(--ink);
  margin-bottom: 20px;
}
.gal-subhead::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.gal-videos { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 300px) 1fr; gap: 22px; align-items: start; }
.gal-videos__aside { align-self: stretch; display: flex; flex-direction: column; }
.gal-videos__aside .glance__btn { margin-top: auto; }
.gal-videos__aside .glance__phone { margin: 14px 0 0; }
@media (max-width: 860px) {
  .gal-videos { grid-template-columns: 1fr 1fr; }
  .gal-videos__aside { grid-column: 1 / -1; }
}
.gal-video { position: relative; }
.gal-video video { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); display: block; }
.gal-video figcaption { font-size: 13px; color: var(--body); margin-top: 8px; }
.gal-video__expand {
  position: absolute; top: 10px; right: 10px;
  background: rgba(16,16,18,.82); color: #fff; border: 0; border-radius: 6px;
  font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 7px 10px; cursor: pointer;
}
@media (max-width: 480px) { .gal-videos { grid-template-columns: repeat(2, 1fr); } }

/* our-work ticker (contract: enhancement over the static grid) */
.ticker { overflow: hidden; }
.ticker__track { display: flex; width: max-content; animation: ticker-run 46s linear infinite; }
.ticker:hover .ticker__track, .ticker:focus-within .ticker__track { animation-play-state: paused; }
.ticker__set { display: flex; }
.ticker__item { padding-right: 18px; }
.ticker__item img { height: 190px; width: auto; border-radius: 8px; display: block; }
@keyframes ticker-run { to { transform: translateX(-50%); } }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 1500;
  background: rgba(10,10,12,.92);
  display: flex; align-items: center; justify-content: center; padding: 4vh 4vw;
}
.lightbox img { max-width: 100%; max-height: 82vh; width: auto; height: auto; border-radius: 6px; }
.lightbox__caption { position: absolute; bottom: 3vh; left: 0; right: 0; text-align: center; color: var(--silver); font-size: 14px; }
.lightbox__btn {
  position: absolute; background: rgba(255,255,255,.1); color: #fff; border: 0;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer; font-size: 20px;
  display: grid; place-items: center;
}
.lightbox__btn:hover { background: rgba(255,255,255,.22); }
.lightbox__close { top: 18px; right: 18px; }
.lightbox__prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 14px; top: 50%; transform: translateY(-50%); }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; }
.faq__item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 12px; }
.faq__q {
  width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer;
  font-family: inherit; font-size: 16.5px; font-weight: 700; color: var(--ink);
  text-transform: none; font-stretch: 100%; letter-spacing: 0; line-height: 1.3;
  padding: 18px 52px 18px 20px; position: relative;
}
.faq__q::after {
  content: ""; position: absolute; right: 20px; top: 50%;
  width: 10px; height: 10px; border-right: 2px solid var(--red-bright); border-bottom: 2px solid var(--red-bright);
  transform: translateY(-70%) rotate(45deg); transition: transform .15s ease;
}
.faq__q[aria-expanded="true"]::after { transform: translateY(-30%) rotate(225deg); }
.faq__a { padding: 0 20px 18px; font-size: 15px; }
.faq__a a { color: var(--silver); } /* red-bright is only 4.13:1 on tone C; underline keeps it reading as a link */

/* ---------- quote form ---------- */
.quote { background: var(--black); }
.quote__wrap {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
.quote__intro h2 { color: var(--white); font-size: clamp(24px, 2.8vw, 34px); margin-bottom: 12px; }
.quote__intro p { color: var(--grey); margin-bottom: 16px; max-width: 46ch; }
.quote__phone { color: var(--white); font-weight: 700; font-size: 20px; text-decoration: none; }
.form {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lift);
  padding: clamp(22px, 3vw, 30px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.form__field { display: flex; flex-direction: column; gap: 5px; }
.form__field--full { grid-column: 1 / -1; }
.form label { font-size: 13.5px; font-weight: 600; color: #1C1C1E; } /* card stays white */
.form input, .form textarea {
  font-family: inherit; font-size: 15px; color: #1C1C1E;
  border: 1px solid #E3E1DE; border-radius: 6px; padding: 11px 12px; background: #FFFFFF;
}
.form input:focus, .form textarea:focus { border-color: var(--red); outline: none; box-shadow: 0 0 0 2px rgba(181,63,70,.18); }
.form textarea { min-height: 110px; resize: vertical; }
.form__error { color: var(--red-dark); font-size: 12.5px; min-height: 16px; }
.form__consent { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: #3A3A3D; }
.form__consent input { margin-top: 3px; }
.form__submit { grid-column: 1 / -1; justify-self: start; }
.form__status { grid-column: 1 / -1; font-size: 14px; color: var(--red-dark); min-height: 18px; }
@media (max-width: 860px) { .quote__wrap { grid-template-columns: 1fr; } .form { grid-template-columns: 1fr; } }

/* ---------- map ---------- */
.map-embed { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.map-embed iframe { display: block; width: 100%; height: 430px; border: 0; }

/* ---------- drawn service-area map ---------- */
.okmap-band { background: var(--black); border-top: 1px solid #26262a; }
.okmap-band .section-head h2 { color: var(--white); }
.okmap-band .section-head p { color: var(--grey); }
.okmap { display: block; width: 100%; height: auto; }
.okmap__label {
  font-family: 'Archivo', 'Archivo-fallback', Arial, sans-serif;
  font-size: 19px; font-weight: 600; fill: var(--silver);
  paint-order: stroke; stroke: var(--black); stroke-width: 5px; stroke-linejoin: round;
}
.okmap__label--home { fill: var(--white); font-weight: 800; font-size: 21px; }
.okmap a:hover .okmap__label, .okmap a:focus .okmap__label { fill: var(--white); text-decoration: underline; }
@media (max-width: 760px) { .okmap__label { font-size: 30px; } .okmap__label--home { font-size: 33px; } }
@media (max-width: 560px) {
  /* at phone scale the type cannot stay legible; dots remain linked and the
     city cards below carry the index */
  .okmap__label { display: none; }
  .okmap__label--home { display: block; font-size: 44px; }
}

.area-facts-band { background: var(--ground); padding-block: clamp(36px, 5vw, 48px); } /* tone B strip */
.area-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.area-chip {
  border: 1px solid var(--line); border-radius: 999px; text-decoration: none;
  color: var(--ink); background: var(--panel); box-shadow: var(--shadow);
  font-weight: 700; font-size: 13.5px; font-stretch: 78%; letter-spacing: .05em;
  text-transform: uppercase; padding: 11px 20px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.area-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--red); }
.area-chip--all { background: var(--red); color: #fff; border-color: var(--red); }
@media (prefers-reduced-motion: reduce) { .area-chip:hover { transform: none; } }
.area-facts {
  list-style: none; display: flex; flex-wrap: wrap; gap: 12px;
}
.area-facts li {
  border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 18px; font-size: 14.5px; background: var(--panel);
  box-shadow: var(--shadow);
}
/* on desktop the map band is self-sufficient; the strip is a mobile
   composition piece (and what places the map below the 390 fold, which is
   what earns the draw on the phone) */
@media (min-width: 861px) { .area-facts-band { display: none; } }

/* city index: one composed bar under the map, the map's own labels made
   tappable at every size (labels hide under 560, so this IS the index there) */
.area-index {
  border-top: 1px solid #26262a;
  margin-top: clamp(20px, 3vw, 30px);
  padding-top: 14px;
  display: flex; flex-wrap: wrap; gap: 2px 28px;
}
.area-index a {
  color: var(--silver); text-decoration: none; font-weight: 600;
  font-size: 15.5px; padding: 9px 0;
}
.area-index a:hover { color: var(--white); text-decoration: underline; }
@media (max-width: 560px) {
  .area-index { flex-direction: column; gap: 0; padding-top: 6px; }
  .area-index a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 13px 2px; border-bottom: 1px solid #1d1d20; font-size: 16px;
  }
  .area-index a::after { content: "\203A"; color: var(--red-bright); font-size: 20px; }
  .area-index a:hover { text-decoration: none; background: #17171a; }
}
.area-close {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
  margin-top: clamp(26px, 4vw, 40px);
}
.area-close__line { color: var(--grey); max-width: 52ch; font-size: 15px; }
.area-close__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* the recognition moment: the client's state draws itself in his own red.
   Armed BY JS only (okmap--armed), and only when the map starts below the
   viewport, so no-JS, reduced-motion and in-initial-view cases keep the
   complete static map at first paint. Runs once. */
.okmap--armed .okmap__state { stroke-dasharray: 1; stroke-dashoffset: 1; }
.okmap--armed .okmap__radius, .okmap--armed .okmap__spot { opacity: 0; }
@keyframes ok-draw { to { stroke-dashoffset: 0; } }
@keyframes ok-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.okmap--live .okmap__state { animation: ok-draw 2.1s cubic-bezier(.45,.05,.35,1) .15s forwards; }
.okmap--live .okmap__radius { animation: ok-in .9s ease 2.1s forwards; }
.okmap--live .okmap__spot {
  animation: ok-in .55s cubic-bezier(.22,.7,.28,1) calc(2.5s + var(--oki, 0) * .09s) forwards;
}
/* the heartbeat: a red bead runs the border, rests, runs again.
   8s cycle: 3.2s pass + 4.8s rest, so the border is quiet longer than it
   moves and a typical visit sees the pulse twice. Armed by JS post-paint
   (never hidden content); paused while the tab is hidden (.okmap--sleep);
   absent entirely under reduced motion. Opacity + dashoffset only: CLS 0. */
.okmap__tracer { opacity: 0; }
@keyframes ok-beat {
  0% { opacity: 0; stroke-dashoffset: 1; }
  3% { opacity: 1; }
  36% { opacity: 1; }
  40% { opacity: 0; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}
.okmap--beat .okmap__tracer { animation: ok-beat 8s cubic-bezier(.45,.05,.35,1) .8s infinite; }
.okmap--sleep .okmap__tracer { animation-play-state: paused; }

/* city-page figures: the bead runs the border once each time the figure is
   revealed, replaying with the site's retraction language */
.okmapfig__tracer { opacity: 0; }
.okmapfig.rv-in .okmapfig__tracer { animation: ok-beat 6s cubic-bezier(.45,.05,.35,1) .35s 1; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--red); }
.cta-band__in {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-block: clamp(30px, 4vw, 44px);
}
.cta-band h2 { color: #fff; font-size: clamp(20px, 2.4vw, 28px); }
.cta-band .btn { background: var(--black); color: #fff; }
.cta-band .btn:hover { background: #000; }

/* ---------- footer ---------- */
.footer { background: var(--black); color: var(--grey); }
.footer__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 5vw, 56px);
  padding-block: clamp(48px, 7vw, 72px);
}
.footer h3 { color: var(--white); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.footer ul { list-style: none; display: grid; gap: 9px; }
.footer a { color: var(--grey); text-decoration: none; font-size: 14.5px; }
.footer a:hover { color: var(--white); }
.footer p { font-size: 14.5px; }
.footer__mark { height: 64px; width: auto; margin-bottom: 14px; }
.footer__brand { color: var(--silver); font-weight: 800; letter-spacing: .14em; font-size: 16px; margin-bottom: 10px; }
.footer__brand span { color: var(--red-bright); font-size: 11px; }
.footer__legal {
  border-top: 1px solid #26262a; padding-block: 18px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 13px;
}
.footer__legal a { font-size: 13px; }
@media (max-width: 980px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- interior page shared ---------- */
.page-hero { background: var(--black); padding-block: clamp(40px, 6vw, 72px); }
.page-hero--slim { padding-block: clamp(20px, 3vw, 32px); }

/* sticky aside + glance card (service pages, about, FAQ) */
.svc-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 56px); align-items: start; }
@media (max-width: 860px) { .svc-split { grid-template-columns: 1fr; } }
.svc-aside { position: sticky; top: calc(var(--header-h) + 20px); }
@media (max-width: 860px) { .svc-aside { position: static; } }
.glance {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  border-top: 3px solid var(--red); box-shadow: var(--shadow-lift);
  padding: 24px 22px;
}
.glance h3 { font-size: 18px; margin-bottom: 14px; }
.glance .check-list { margin-bottom: 18px; }
.glance__btn { width: 100%; text-align: center; }
.glance__rows { list-style: none; display: grid; }
.glance__rows li { display: grid; gap: 2px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.glance__rows li:first-child { padding-top: 0; }
.glance__rows { margin-bottom: 18px; }
.glance__rows span { font-size: 13.5px; color: var(--body); }
.glance--dark { background: var(--black); border-color: #26262a; border-top-color: var(--red); }
.glance--dark h3 { color: var(--white); }
.glance__line { color: var(--grey); font-size: 14.5px; margin-bottom: 14px; }
.glance__phone {
  display: block; color: var(--white); text-decoration: none;
  font-family: 'Archivo', 'Archivo-fallback-cond', 'Arial Narrow', Arial, sans-serif;
  font-stretch: 72%; font-weight: 800; font-size: 26px; letter-spacing: .02em;
  margin-bottom: 14px; white-space: nowrap;
}
.glance__hours { color: var(--grey); font-size: 13px; margin-top: 12px; }
.faq-wrap { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(28px, 5vw, 56px); align-items: start; }
@media (max-width: 860px) { .faq-wrap { grid-template-columns: 1fr; } }

/* three-up variant of the photo card grid (related, city featured) */
.svc-grid--three { grid-template-columns: repeat(3, 1fr); }
.svc-grid--three .svc-card { grid-column: auto; }
@media (max-width: 980px) { .svc-grid--three { grid-template-columns: repeat(2, 1fr); } .svc-grid--three .svc-card:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 560px) { .svc-grid--three { grid-template-columns: 1fr; } .svc-grid--three .svc-card { grid-column: auto !important; } }
.page-hero h1 { color: var(--white); font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 10px; }
.page-hero p { color: var(--grey); max-width: 62ch; width: fit-content; }
.breadcrumb { font-size: 13.5px; margin-bottom: 14px; color: var(--grey); width: fit-content; }
.breadcrumb a { color: var(--grey); }
.breadcrumb a:hover { color: var(--white); }
.svc-hero-img { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lift); margin-top: clamp(24px, 4vw, 40px); }
.svc-hero-img img { width: 100%; height: auto; }

.check-list { list-style: none; display: grid; gap: 12px; }
.check-list li { padding-left: 30px; position: relative; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 16px; height: 9px; border-left: 3px solid var(--red-bright); border-bottom: 3px solid var(--red-bright);
  transform: rotate(-45deg);
}
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 56px); align-items: start; }
.two-col p:not(.kicker) { margin-bottom: 14px; } /* same prose rhythm as .why-ed */
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

.card-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mini-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  border-top: 3px solid var(--red);
  box-shadow: var(--shadow); padding: 24px 22px; text-decoration: none; color: inherit; display: block;
}
.mini-card h3 { font-size: 17px; margin-bottom: 6px; }
.mini-card p { font-size: 14.5px; }
@media (max-width: 860px) { .card-row { grid-template-columns: 1fr; } }

.pull {
  border-left: 4px solid var(--red);
  padding-left: 18px;
  font-family: 'Archivo', 'Archivo-fallback-cond', 'Arial Narrow', Arial, sans-serif;
  font-stretch: 72%; font-weight: 700;
  font-size: clamp(19px, 2vw, 24px); line-height: 1.3;
  color: var(--ink);
  margin: 18px 0 22px;
  max-width: 30ch;
}
.section--black .pull, .okmap-band .pull { color: var(--white); }

.prose { max-width: 720px; margin-inline: auto; }
.prose h2 { font-size: 22px; margin: 28px 0 10px; }
.prose p, .prose li { margin-bottom: 12px; font-size: 15.5px; }
.prose ul { padding-left: 20px; }

/* ---------- shared hover matrix (one rule set for every card group) ---------- */
.svc-card, .why-card, .step, .mini-card, .gal-tile {
  transition: transform .22s ease, box-shadow .22s ease;
}
.svc-card:hover, .why-card:hover, .step:hover, .mini-card:hover, .gal-tile:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}
/* media zoom inside clipped boxes: the hover you can feel */
.svc-card__media img, .gal-tile img { transition: transform .4s cubic-bezier(.22,.7,.28,1); }
.svc-card:hover .svc-card__media img, .gal-tile:hover img { transform: scale(1.05); }
.mini-card h3 { transition: color .18s ease; }
.mini-card:hover h3 { text-decoration: underline; text-decoration-color: var(--red-bright); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.btn { transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.btn:hover { transform: translateY(-1px); }
.nav__panel a { transition: background .15s ease, padding-left .15s ease; }
.nav__panel a:hover { padding-left: 16px; }

/* ---------- motion system: reversible scroll reveals ----------
   The hidden state is applied BY JAVASCRIPT only (class .rv), never in
   markup, and never to elements inside the initial viewport, so first
   paint is always complete on every page. Retract (.rv-in removed) only
   after an element is fully BELOW the viewport, so nothing vanishes while
   being read; re-entry re-staggers. Transform and opacity only. */
.rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.22,.7,.28,1), transform .6s cubic-bezier(.22,.7,.28,1);
  transition-delay: calc(var(--rv-i, 0) * 80ms);
}
.rv.rv-in { opacity: 1; transform: none; }

/* ---------- arrival: motion after paint, nothing hidden ----------
   html.mo-arrive is added by JS after first paint, only when reduced
   motion is off. Every element below starts AT ITS FINAL painted state;
   the animations move already-visible pixels. */
@keyframes arr-drift { from { transform: scale(1); } to { transform: scale(1.045); } }
html.mo-arrive .arrival__img {
  animation: arr-drift 16s cubic-bezier(.2,.6,.25,1) .9s 1 forwards;
}
/* the arrival entrance (operator-picked variant A): the badge pulses,
   then the two phrases settle in sequence. Paint-complete, transform-only,
   Speed Index measured unmoved against a same-build control. */
@keyframes hset-x { from { transform: scaleX(1.09); } to { transform: none; } }
@keyframes badge-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } }
html.mo-arrive .arrival__h1 .hl1,
html.mo-arrive .arrival__h1 em { display: inline-block; transform-origin: left bottom; }
html.mo-arrive .arrival__h1 .hl1 { animation: hset-x .8s cubic-bezier(.22,.7,.28,1) .08s both; }
html.mo-arrive .arrival__h1 em   { animation: hset-x .8s cubic-bezier(.22,.7,.28,1) .34s both; }
html.mo-arrive .arrival__badge   { animation: badge-pulse .6s ease-out .05s 1; }
/* interior pages inherit the entrance language on their H1s */
html.mo-arrive .page-hero h1 { transform-origin: left bottom; animation: hset-x .8s cubic-bezier(.22,.7,.28,1) .08s both; }
@keyframes cue-nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}
html.mo-arrive .arrival__cue .cue-chev {
  display: inline-block;
  animation: cue-nudge 1.1s ease-in-out 2.4s 3;
}

/* ---------- motion discipline ---------- */
@media (prefers-reduced-motion: reduce) {
  .svc-card:hover, .why-card:hover, .step:hover, .mini-card:hover, .gal-tile:hover { transform: none; }
  .svc-card:hover .svc-card__media img, .gal-tile:hover img { transform: none; }
  .btn:hover { transform: none; }
  .nav__caret svg, .faq__q::after { transition: none; }
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}