/* ==========================================================================
   Diversified Excavating & Site Utilities — redesign system
   Shared across every page. No runtime dependency and zero external requests.

   Accent colour rules (measured, do not break):
     --green       #30fc0c the logo green, sampled from the logo file. ACCENT
                  ONLY, and only on dark: 13.22:1 on ink, 11.84 on ink-2,
                  10.20 on ink-3 -> eyebrows, headline accents, rules, marks.
                  NEVER on a light surface (1.18:1 on paper, 1.01 on paper-2)
                  and NEVER as a button fill — yellow owns action.
     --yellow      #ffc72c equipment/safety yellow. 11.81:1 on ink -> primary
                  action + dark-surface accents; ink text on yellow passes.
                  NEVER as text on a light surface (1.32:1 on --paper).
     --orange      5.95:1 both ways vs ink -> fills, rules, ink-on-orange.
                  NEVER as small text on a light surface (2.56:1).
     --orange-ink  6.22:1 on --paper, 5.31:1 on --paper-2 -> the only orange
                  permitted as text on light surfaces.
   Display type uses the locally stored Oswald variable font with a condensed
   system fallback stack. Sizes remain clamp()-bounded so a failed font load
   cannot overflow a phone width.
   ========================================================================== */

@font-face {
  font-family: "Oswald";
  src: url("assets/oswald-latin.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #141413;
  --ink-2: #1f1f1c;
  --ink-3: #2b2b26;
  --paper: #f1ece1;
  --paper-2: #e2dbcb;
  --concrete: #b4aa99;
  --orange: #ff5b28;
  --orange-ink: #9e2f0b;
  --yellow: #ffc72c;
  --green: #30fc0c;   /* the logo green, unmodified — dark surfaces only */
  --line: rgba(20, 20, 19, 0.16);
  --line-strong: rgba(20, 20, 19, 0.5);
  --white-line: rgba(255, 255, 255, 0.22);
  --muted: #5d594f;
  --muted-dark: #a9a69d;
  --display: "Oswald", "Arial Narrow", "Roboto Condensed", "Franklin Gothic Condensed", Impact, sans-serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --shell: clamp(1.15rem, 5vw, 5rem);
  --maxw: 1480px;
}

* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, a { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  line-height: .95; letter-spacing: -.01em; overflow-wrap: break-word;
}
/* Focus: ink ring on light surfaces (yellow measures only 1.32:1 on paper),
   yellow ring inside dark-surface contexts. */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.dark :focus-visible, .utility-bar :focus-visible, .site-footer :focus-visible,
.cta-band :focus-visible, .page-hero :focus-visible, .home-hero :focus-visible,
.emergency-band :focus-visible { outline-color: var(--yellow); }

.skip-link {
  position: fixed; left: 1rem; top: -6rem; z-index: 200;
  padding: .7rem 1rem; background: var(--yellow); color: var(--ink);
  font-weight: 800; text-decoration: none;
}
.skip-link:focus { top: 1rem; }
.shell { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--shell); }
.eyebrow {
  margin: 0 0 1rem; color: var(--orange-ink);
  font-size: .68rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase;
}
.dark .eyebrow, .eyebrow.on-dark { color: var(--green); }
.lede { max-width: 56ch; color: var(--muted); font-size: 1.05rem; }
.dark .lede { color: var(--muted-dark); }
.accent { color: var(--orange-ink); font-style: normal; }
.dark .accent, h1 .accent-green, .accent-green { color: var(--green); font-style: normal; }

/* ---------- utility bar + header ---------------------------------------- */
/* The utility bar and header travel together as one floating unit, so the
   call buttons stay reachable at any scroll position. */
.chrome-stick { position: sticky; top: 0; z-index: 100; }

.utility-bar {
  background: var(--ink); color: #cfccc4;
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.utility-bar .shell { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; align-items: center; min-height: 46px; padding-block: .35rem; }
.utility-bar b { color: var(--yellow); font-weight: 800; }
.utility-area { margin-right: auto; }

/* Call targets. The office line is the one most people want, so it is the
   filled box. Emergency is set apart by colour rather than weight — findable
   without competing for the routine call. */
.utility-call {
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  padding: .42rem .8rem; text-decoration: none;
  transition: transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
.utility-call .ul { font-size: .58rem; font-weight: 900; letter-spacing: .12em; }
.utility-call .num { font-family: var(--display); font-size: 1rem; font-weight: 600; letter-spacing: .02em; }
.utility-call .call-icon { font-family: Arial, Helvetica, sans-serif; font-size: 1rem; font-weight: 900; line-height: 1; transform: translateY(-1px); }

.utility-call.is-office {
  min-height: 40px; background: var(--yellow); color: var(--ink);
  box-shadow: inset 0 -3px 0 rgba(20,20,19,.28);
}
.utility-call.is-office:hover { transform: translateY(-1px); background: #ffd44f; box-shadow: inset 0 -3px 0 rgba(20,20,19,.42), 0 4px 12px rgba(0,0,0,.2); }
.utility-call.is-emergency {
  flex-direction: column; align-items: flex-start; gap: .05rem;
  padding: .18rem .45rem; color: var(--orange); border: 0;
}
.utility-call.is-emergency .ul { font-size: .5rem; line-height: 1.1; }
.utility-call.is-emergency .num { font-size: .9rem; line-height: 1.05; }
.utility-call.is-emergency:hover { background: rgba(255,91,40,.12); color: var(--orange); }

.site-header { background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header .shell { display: flex; align-items: center; gap: 1.25rem; min-height: 84px; }
.brand { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; margin-right: auto; }
.brand img { width: 150px; height: 50px; object-fit: contain; object-position: left center; mix-blend-mode: multiply; overflow: hidden; color: var(--muted); font-size: .58rem; font-weight: 800; }
.main-nav { display: flex; align-items: center; gap: 1.5rem; }
.main-nav a {
  position: relative; padding-block: .35rem; text-decoration: none;
  font-size: .74rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap;
}
.main-nav a:hover { color: var(--orange-ink); }
.main-nav a[aria-current="page"] { color: var(--orange-ink); }
.main-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--orange);
}
.nav-cta {
  display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.35rem;
  background: var(--yellow); color: var(--ink); text-decoration: none;
  font-size: .74rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap;
  transition: transform .16s ease, background .16s ease;
}
.nav-cta:hover { transform: translateY(-2px); background: #ffd44f; }
.nav-toggle { display: none; }

/* ---------- buttons ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 1.4rem;
  min-height: 58px; padding: 1rem 1.5rem; border: 1px solid transparent; text-decoration: none;
  font-size: .78rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase;
  transition: transform .16s ease, background .16s ease, color .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn b { font-size: 1.2rem; line-height: 0; }
.btn-yellow { background: var(--yellow); color: var(--ink); }
.btn-yellow:hover { background: #ffd44f; }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--orange); color: var(--ink); }
.btn-orange { background: var(--orange); color: var(--ink); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-ghost-light { border-color: var(--white-line); color: #fff; }
.btn-ghost-light:hover { background: #fff; color: var(--ink); }
.btn-xl { min-height: 72px; padding: 1.1rem 2rem; font-size: .88rem; }
.link-quiet {
  display: inline-block; padding-bottom: .2rem; border-bottom: 1px solid currentColor;
  text-decoration: none; font-size: .76rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase;
}

/* ---------- home hero ---------------------------------------------------- */
.home-stage {
  padding-top: 0; background-color: var(--ink);
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(118deg, rgba(255,199,44,.035), transparent 44%);
  background-size: 48px 48px, 48px 48px, auto;
}
.home-hero-band { background: transparent; }
.home-hero { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(390px, .98fr); background: transparent; color: #fff; }
.home-hero-copy { padding: clamp(2.6rem, 4.6vw, 5.4rem) clamp(1.15rem, 4.4vw, 4.6rem) clamp(2.6rem, 4vw, 4rem); position: relative; align-self: center; }
.home-hero-copy::before { content: none; }
.home-hero-copy > * { position: relative; }
.home-hero h1 { margin: 0; font-size: clamp(2.9rem, 5vw, 5.8rem); }
.home-hero .lede { margin: 1.4rem 0 2rem; font-size: clamp(1rem, 1.2vw, 1.15rem); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 1.6rem; }
.hero-media { position: relative; min-height: 460px; overflow: hidden; background: var(--ink-3); }
.hero-media::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(20,20,19,.72), transparent 46%); }

/* Cinematic hero: four stills crossfading with a slow push. Only opacity and
   transform animate, so it composites on the GPU and costs no extra bytes over
   the images themselves — no video file, no player, no external request. */
.hero-frames { position: absolute; inset: 0; z-index: 0; }
.hero-frames img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: saturate(.85) contrast(1.06);
  opacity: 0; will-change: opacity, transform;
  animation: heroFade 32s linear infinite, heroPush 32s ease-out infinite;
}
.hero-frames img:nth-child(1) { animation-delay: 0s, 0s; }
.hero-frames img:nth-child(2) { animation-delay: 8s, 8s; }
.hero-frames img:nth-child(3) { animation-delay: 16s, 16s; }
.hero-frames img:nth-child(4) { animation-delay: 24s, 24s; }
@keyframes heroFade {
  0%    { opacity: 0; }
  3%    { opacity: 1; }
  22%   { opacity: 1; }
  27%   { opacity: 0; }
  100%  { opacity: 0; }
}
@keyframes heroPush {
  0%     { transform: scale(1.03); }
  27%    { transform: scale(1.13); }
  27.01% { transform: scale(1.03); }
  100%   { transform: scale(1.03); }
}
.hero-rule {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: .6rem clamp(1rem, 2vw, 1.6rem);
  display: flex; justify-content: space-between; gap: 1rem;
  border-top: 1px solid var(--white-line); color: #fff;
  font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}

/* ---------- capability strip -------------------------------------------- */
.cap-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--orange); color: var(--ink); }
.cap-strip > * {
  display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem;
  min-height: 128px; padding: 1.3rem clamp(1rem, 1.8vw, 1.7rem);
  border-right: 1px solid rgba(20,20,19,.26); text-decoration: none;
}
.cap-strip > *:last-child { border-right: 0; }
.cap-strip span { font-size: .64rem; font-weight: 900; letter-spacing: .12em; }
.cap-strip strong { font-family: var(--display); font-size: clamp(1.15rem, 1.6vw, 1.5rem); font-weight: 500; text-transform: uppercase; line-height: .95; }
a.cap-strip-item:hover { background: var(--ink); color: #fff; }

/* ---------- generic sections -------------------------------------------- */
.section { padding-block: clamp(3.4rem, 6vw, 7rem); }
.section.dark { background: var(--ink); color: #fff; }
.section.tone { background: var(--paper-2); }
.section-head { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: end; margin-bottom: clamp(2rem, 3.5vw, 3.4rem); }
.section-head h2 { margin: 0; font-size: clamp(2.5rem, 4.4vw, 5rem); }
.section-head .lede { margin: 0; }

/* ---------- service cards ------------------------------------------------ */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line-strong); border: 1px solid var(--line-strong); }
.svc-card { position: relative; display: flex; flex-direction: column; min-height: 340px; padding: 1.6rem; background: var(--paper); text-decoration: none; overflow: hidden; transition: background .18s ease, color .18s ease; }
.svc-card .num { color: var(--orange-ink); font-size: .66rem; font-weight: 900; letter-spacing: .14em; }
.svc-card h3 { margin: auto 0 .8rem; font-size: clamp(1.9rem, 2.5vw, 2.7rem); }
.svc-card p { margin: 0; color: var(--muted); font-size: .86rem; }
.svc-card .go { margin-top: 1.1rem; color: var(--orange-ink); font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.svc-card:hover { background: var(--ink); color: #fff; }
.svc-card:hover .num, .svc-card:hover .go { color: var(--green); }
.svc-card:hover p { color: var(--muted-dark); }
.svc-card.is-media { padding: 0; min-height: 340px; background: var(--ink); }
.svc-card.is-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); }

/* ---------- split feature ------------------------------------------------ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 4.5rem); align-items: center; }
.split-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-3); }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-media.tall { aspect-ratio: 3 / 4; }
.checklist { margin: 0; padding: 0; list-style: none; }
.checklist li { position: relative; padding: .85rem 0 .85rem 2.1rem; border-top: 1px solid var(--line); font-size: .95rem; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 1.15rem; width: 12px; height: 12px; background: var(--orange); }
.dark .checklist li { border-color: var(--white-line); }

/* ---------- interior page hero ------------------------------------------ */
.page-hero { position: relative; min-height: 400px; display: flex; align-items: flex-end; background: var(--ink); color: #fff; overflow: hidden; }
.page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.05); }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,20,19,.94) 6%, rgba(20,20,19,.55) 55%, rgba(20,20,19,.35)); }
.page-hero .shell { position: relative; z-index: 1; padding-block: clamp(2.4rem, 4vw, 3.6rem); width: 100%; }
.page-hero h1 { margin: 0; font-size: clamp(2.7rem, 6vw, 5.6rem); }
.page-hero .lede { margin: 1.1rem 0 0; color: #ddd9d1; }
.crumbs { margin-bottom: 1rem; color: var(--green); font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.crumbs a { text-decoration: none; color: #cfccc4; }
.crumbs a:hover { color: #fff; }

/* ---------- gallery ------------------------------------------------------ */
.gallery-grid { columns: 4; column-gap: 14px; }
.gallery-grid figure { break-inside: avoid; margin: 0 0 14px; position: relative; background: var(--ink-3); overflow: hidden; }
.gallery-grid img { display: block; width: 100%; height: auto; transition: transform .4s ease; }
.gallery-grid figure:hover img { transform: scale(1.04); }
.gallery-grid figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .8rem 1rem;
  background: linear-gradient(0deg, rgba(20,20,19,.9), transparent);
  color: #fff; font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}

/* ---------- careers ------------------------------------------------------ */
.role-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line-strong); border: 1px solid var(--line-strong); }
.role-card { display: flex; flex-direction: column; min-height: 300px; padding: 1.6rem; background: var(--paper); }
.role-card .num { color: var(--orange-ink); font-size: .66rem; font-weight: 900; letter-spacing: .14em; }
.role-card h3 { margin: auto 0 .7rem; font-size: clamp(1.7rem, 2.2vw, 2.4rem); }
.role-card p { margin: 0 0 1.2rem; color: var(--muted); font-size: .85rem; }
.role-card .btn { align-self: flex-start; }
.role-example {
  align-self: flex-start; padding: .4rem .65rem; border: 1px solid var(--line-strong);
  color: var(--muted); font-size: .66rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
}
.proposal-note { color: var(--muted); font-size: .9rem; }
.value-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.2rem, 2.4vw, 2.4rem); }
.value-grid h3 { margin: 0 0 .6rem; font-size: 1.5rem; }
.value-grid p { margin: 0; font-size: .88rem; color: var(--muted-dark); }
.value-grid .bar { width: 46px; height: 5px; margin-bottom: 1.1rem; background: var(--green); }

/* ---------- CTA band ----------------------------------------------------- */
.cta-band { background: var(--ink); color: #fff; }
.cta-band .shell { display: grid; grid-template-columns: 1.2fr auto; gap: clamp(1.6rem, 4vw, 4rem); align-items: center; padding-block: clamp(3rem, 5vw, 5rem); }
.cta-band h2 { margin: 0; font-size: clamp(2.3rem, 4vw, 4.2rem); }
.cta-band p { margin: 1rem 0 0; color: var(--muted-dark); max-width: 52ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------- contact ------------------------------------------------------ */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.field { display: block; margin-bottom: 1.1rem; }
.field span { display: block; margin-bottom: .45rem; font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: .9rem 1rem; border: 1px solid var(--line-strong); background: #fffdf8;
  font-family: var(--body); font-size: .95rem; color: var(--ink);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--ink); outline-offset: 2px; }
.form-disclosure {
  margin: .2rem 0 1rem; padding: .85rem 1rem; border-left: 5px solid var(--orange);
  background: var(--paper-2); color: var(--ink); font-size: .82rem; font-weight: 750;
}
.detail-list { margin: 0; padding: 0; list-style: none; }
.detail-list > div { padding: 1.2rem 0; border-top: 1px solid var(--line); }
.detail-list dt { margin-bottom: .35rem; font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.detail-list dd { margin: 0; font-family: var(--display); font-size: 1.6rem; text-transform: uppercase; line-height: 1.1; }
.detail-list dd.email { font-family: var(--body); font-size: 1.05rem; font-weight: 800; text-transform: none; overflow-wrap: anywhere; }
.slot {
  display: inline-block; padding: .25rem .6rem; background: var(--paper-2);
  border-bottom: 3px solid var(--orange); color: var(--muted);
  font-family: var(--body); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.dark .slot { background: var(--ink-3); color: #cfccc4; }

/* ---------- facebook concept -------------------------------------------- */
.facebook-concept-page { min-width: 0; background: #f0f2f5; }
.concept-topbar {
  position: sticky; top: 0; z-index: 150; display: flex; align-items: center;
  justify-content: center; gap: .75rem 1.5rem; min-height: 34px; padding: .42rem 1rem;
  background: var(--ink); color: #fff; border-bottom: 3px solid var(--yellow);
  font-size: .68rem; font-weight: 800; letter-spacing: .035em; text-align: center;
}
.concept-topbar a { color: var(--green); white-space: nowrap; }
.facebook-concept-page .skip-link:focus { top: 3.2rem; }
.fb-frame { width: 100%; min-height: calc(100vh - 37px); background: #f0f2f5; color: #1c1e21; font-family: Helvetica, Arial, sans-serif; }
.fb-frame button { font: inherit; }
.fb-topbar { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 18px; background: #fff; border-bottom: 1px solid #dddfe2; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.fb-mark { display: grid; place-items: end center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: #0866ff; color: #fff; font-size: 34px; font-weight: 800; line-height: .9; cursor: pointer; }
.fb-search { display: flex; align-items: center; gap: .4rem; width: 238px; padding: 10px 14px; border: 0; border-radius: 22px; background: #f0f2f5; color: #65676b; font-size: .9rem; text-align: left; cursor: pointer; }
.fb-search span { font-size: 1.3rem; line-height: .7; }
.fb-top-actions { display: flex; gap: .5rem; margin-left: auto; }
.fb-top-actions button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #e4e6eb; color: #050505; cursor: pointer; }
.fb-page-head { background: #fff; }
.fb-cover { position: relative; width: min(100%, 1240px); height: clamp(300px, 34vw, 490px); margin-inline: auto; overflow: hidden; background: #343434; border-radius: 0 0 8px 8px; }
.fb-cover img { width: 100%; height: 100%; object-fit: cover; }
.fb-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.63), rgba(0,0,0,.03) 65%), linear-gradient(0deg, rgba(0,0,0,.42), transparent 52%); }
.fb-cover-copy { position: absolute; z-index: 1; left: 3rem; bottom: 2.2rem; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.fb-cover-copy span { display: block; margin-bottom: .6rem; color: var(--green); font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.fb-cover-copy strong { font-family: var(--display); font-size: clamp(2.2rem, 4.4vw, 4rem); line-height: .9; letter-spacing: .01em; text-transform: uppercase; }
.fb-identity { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; width: min(100%, 1180px); min-height: 132px; margin-inline: auto; padding: 1rem 2rem 1rem 11.4rem; border-bottom: 1px solid #dddfe2; }
.fb-avatar { position: absolute; left: 2rem; bottom: 1rem; display: grid; place-items: center; width: 142px; height: 142px; padding: 10px; border: 5px solid #fff; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.2); overflow: hidden; }
.fb-avatar img { width: 100%; height: 100%; object-fit: contain; }
.fb-identity-copy { min-width: 0; }
.fb-identity h1 { margin: 0 0 .4rem; font-family: Helvetica, Arial, sans-serif; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; line-height: 1.1; letter-spacing: 0; text-transform: none; }
.fb-identity p { margin: 0; color: #65676b; font-size: .9rem; }
.fb-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 40px; padding: .65rem 1.1rem; border: 0; border-radius: 6px; background: #0866ff; color: #fff; font-size: .88rem; font-weight: 700; cursor: pointer; }
.fb-btn.ghost { background: #e4e6eb; color: #1c1e21; }
.fb-btn.icon { width: 40px; padding-inline: 0; }
.fb-actions { display: flex; gap: .6rem; }
.fb-nav { display: flex; align-items: stretch; gap: .25rem; width: min(100%, 1180px); min-height: 58px; margin-inline: auto; padding: 0 2rem 0 11.4rem; color: #65676b; font-size: .9rem; font-weight: 700; }
.fb-nav button { position: relative; display: grid; place-items: center; min-width: max-content; min-height: 52px; padding: .25rem .9rem; border: 0; border-radius: 6px; background: transparent; color: inherit; font-weight: inherit; cursor: pointer; }
.fb-nav button:hover { background: #f0f2f5; }
.fb-nav button[aria-selected="true"] { color: #0866ff; border-radius: 0; }
.fb-nav button[aria-selected="true"]::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: #0866ff; }
.fb-panel[hidden] { display: none; }
.fb-body { display: grid; grid-template-columns: minmax(290px, .78fr) minmax(0, 1.22fr); gap: 1rem; width: min(100%, 1180px); margin-inline: auto; padding: 1rem; background: #f0f2f5; }
.fb-sidebar, .fb-feed { display: grid; align-content: start; gap: 1rem; }
.fb-card { padding: 1rem; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.14); }
.fb-card h2 { margin: 0 0 .8rem; font-family: Helvetica, Arial, sans-serif; font-size: 1.1rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.fb-card p, .fb-card li { font-size: .86rem; line-height: 1.45; }
.fb-card ul { margin: 0; padding-left: 1.15rem; }
.fb-intro-line { display: grid; grid-template-columns: 18px 1fr; gap: .35rem; margin: .7rem 0; }
.fb-intro-line span { color: #65676b; text-align: center; }
.fb-card-title, .fb-posts-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.fb-card-title h2, .fb-posts-head h2 { margin-bottom: 0; }
.fb-card-title button, .fb-posts-head button { padding: .45rem .6rem; border: 0; border-radius: 5px; background: transparent; color: #0866ff; font-weight: 700; cursor: pointer; }
.fb-posts-head button { background: #e4e6eb; color: #1c1e21; }
.fb-transparency p:last-child { margin-bottom: 0; color: #65676b; }
.fb-photo-grid { display: grid; gap: 4px; overflow: hidden; border-radius: 8px; }
.fb-photo-grid.compact { grid-template-columns: repeat(3, 1fr); }
.fb-photo-grid.large { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fb-photo-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.fb-post { padding: 1rem; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.14); }
.fb-post-meta { display: flex; align-items: center; gap: .65rem; color: #65676b; font-size: .74rem; line-height: 1.3; }
.fb-post-meta b { color: #1c1e21; }
.fb-dots { margin-left: auto; padding: .4rem .25rem; border: 0; background: transparent; color: #65676b; font-size: 1rem; font-weight: 800; cursor: pointer; }
.fb-ava-sm { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 800; overflow: hidden; }
.fb-ava-sm img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.fb-post p, .fb-post li { color: #3d4248; font-size: .9rem; line-height: 1.45; }
.fb-post-copy { margin-top: .85rem; }
.fb-post-copy p { margin: 0 0 .75rem; }
.fb-post-copy ul { margin: -.25rem 0 .8rem; padding-left: 1.25rem; }
.fb-draft-note { padding: .75rem; border-left: 3px solid #0866ff; background: #f0f2f5; color: #65676b !important; font-size: .8rem !important; }
.fb-post-media { position: relative; margin: .9rem -1rem 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink); }
.fb-post-media img { width: 100%; height: 100%; object-fit: cover; }
.fb-career-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,20,19,.88), rgba(20,20,19,.17) 78%); }
.fb-career-media > div { position: absolute; z-index: 1; left: clamp(1rem, 4vw, 2.3rem); bottom: clamp(1rem, 4vw, 2rem); color: #fff; }
.fb-career-media span, .fb-career-media small { display: block; color: var(--green); font-size: .65rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.fb-career-media strong { display: block; margin: .5rem 0 .65rem; font-family: var(--display); font-size: clamp(2rem, 5vw, 3.6rem); line-height: .88; text-transform: uppercase; }
.fb-media-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; aspect-ratio: 16 / 9; }
.fb-video-media span { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 58px; height: 58px; transform: translate(-50%, -50%); border: 4px solid #fff; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 1.5rem; }
.fb-shared-label { margin: .9rem 0 .65rem; }
.fb-shared-post { margin: 0 -1rem; padding: 1rem; border: 1px solid #dddfe2; background: #f7f8fa; }
.fb-shared-post > b, .fb-shared-post > span { display: block; }
.fb-shared-post > span { margin: .15rem 0 .75rem; color: #65676b; font-size: .75rem; }
.fb-shared-post p { margin: 0; }
.fb-engagement { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem .1rem; color: #65676b; font-size: .77rem; }
.fb-post-actions { display: grid; grid-template-columns: repeat(3, 1fr); padding-top: .35rem; border-top: 1px solid #e4e6eb; }
.fb-post-actions button { min-height: 40px; border: 0; border-radius: 5px; background: transparent; color: #65676b; font-size: .82rem; font-weight: 700; cursor: pointer; }
.fb-post-actions button:hover { background: #f0f2f5; }
.fb-section-panel { min-height: 430px; padding: 1.25rem; background: #f0f2f5; }
.fb-section-card { width: min(100%, 930px); margin-inline: auto; padding: 1.25rem; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.14); }
.fb-section-card h2, .fb-section-card h3 { font-family: Helvetica, Arial, sans-serif; letter-spacing: 0; text-transform: none; }
.fb-section-card h2 { margin: 0 0 1rem; font-size: 1.3rem; }
.fb-section-card h3 { margin: 0 0 .8rem; font-size: 1rem; }
.fb-about-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.fb-about-grid > div { padding: 1rem; border: 1px solid #dddfe2; border-radius: 8px; }
.fb-about-grid p { font-size: .9rem; line-height: 1.45; }
.fb-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.fb-stat-row div { display: grid; gap: .3rem; padding: 1.5rem; border-radius: 8px; background: #f0f2f5; }
.fb-stat-row strong { font-size: 2rem; }
.fb-stat-row span { color: #65676b; font-size: .82rem; }
.fb-mention { padding: 1rem; border: 1px solid #dddfe2; border-radius: 8px; }
.fb-mention > b, .fb-mention > span { display: block; }
.fb-mention > span { color: #65676b; font-size: .78rem; }
.fb-more-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.fb-more-grid button { display: grid; gap: .25rem; min-height: 82px; padding: 1rem; border: 1px solid #dddfe2; border-radius: 8px; background: #fff; color: #1c1e21; font-weight: 700; text-align: left; cursor: pointer; }
.fb-more-grid button:hover { background: #f0f2f5; }
.fb-more-grid span { color: #65676b; font-size: .78rem; font-weight: 400; }

/* ---------- content calendar -------------------------------------------- */
.cal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--white-line); border: 1px solid var(--white-line); }
.cal-cell { padding: 1.3rem; background: var(--ink); }
.cal-cell .wk { color: var(--green); font-size: .64rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.cal-cell h4 { margin: .8rem 0 .5rem; font-size: 1.35rem; }
.cal-cell p { margin: 0; color: var(--muted-dark); font-size: .82rem; }

/* ---------- footer ------------------------------------------------------- */
.site-footer { background: var(--ink); color: #cfccc4; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); padding-block: clamp(2.8rem, 4.5vw, 4.2rem); }
.footer-top img { width: 168px; height: 56px; object-fit: contain; object-position: left center; }
.site-footer h4 { margin: 0 0 1rem; color: #fff; font-size: 1.1rem; letter-spacing: .02em; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin-bottom: .55rem; font-size: .88rem; }
.site-footer a { text-decoration: none; font-size: .88rem; }
.site-footer a:hover { color: var(--green); }
.site-footer a.tel { font-weight: 800; color: #fff; border-bottom: 1px solid rgba(255,255,255,.3); }
.site-footer a.tel:hover { color: var(--yellow); border-color: var(--yellow); }
.site-footer a.tel-emergency { color: #fff; border-color: rgba(255,255,255,.3); }
.site-footer a.tel-emergency:hover { color: var(--yellow); border-color: var(--yellow); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; padding-block: 1.2rem; border-top: 1px solid var(--white-line); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.footer-bottom .spacer { margin-left: auto; }

/* ---------- demo notice -------------------------------------------------- */
.notice {
  position: fixed; z-index: 300; right: 1.2rem; bottom: 1.2rem; max-width: 330px;
  padding: 1rem 1.2rem; background: var(--ink); color: #fff;
  border-left: 5px solid var(--yellow); box-shadow: 0 12px 30px rgba(0,0,0,.3); font-size: .82rem;
}

/* ---------- call boxes ---------------------------------------------------
   The office line gets the solid, filled treatment: it is the call almost
   everyone is making. The emergency line is set apart by colour and an
   outline instead — clearly findable, deliberately not the loudest thing
   on the page. */
.call-box {
  display: block; padding: 1.4rem 1.5rem; margin-bottom: 1.6rem;
  background: var(--ink); color: #fff; text-decoration: none;
  border-left: 6px solid var(--yellow);
  transition: transform .16s ease, background .16s ease;
}
.call-box:hover { transform: translateY(-2px); background: var(--ink-2); }
.call-box .cb-label {
  display: block; margin-bottom: .5rem; color: var(--yellow);
  font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
}
.call-box .cb-num {
  display: block; font-family: var(--display); font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 600; text-transform: uppercase; line-height: 1; letter-spacing: .01em;
}
.call-box .cb-note { display: block; margin-top: .7rem; color: var(--muted-dark); font-size: .88rem; line-height: 1.5; }

.call-box.is-emergency {
  margin-top: 2rem; margin-bottom: 0;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-strong); border-left: 6px solid var(--orange);
}
.call-box.is-emergency:hover { background: var(--paper-2); transform: translateY(-2px); }
.call-box.is-emergency .cb-label { color: var(--orange-ink); }
.call-box.is-emergency .cb-num { font-size: clamp(1.6rem, 2.4vw, 2.1rem); color: var(--orange-ink); }
.call-box.is-emergency .cb-note { color: var(--muted); }
.dark .call-box.is-emergency { color: #fff; border-color: var(--white-line); border-left-color: var(--orange); }
.dark .call-box.is-emergency .cb-label, .dark .call-box.is-emergency .cb-num { color: var(--orange); }

/* ---------- emergency band ----------------------------------------------- */
.emergency-band { background: var(--orange); color: var(--ink); }
.emergency-band .shell {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem 2.5rem;
  align-items: center; padding-block: 1.5rem;
}
.emergency-band h2 { margin: 0; font-size: clamp(1.5rem, 2.2vw, 2.1rem); white-space: nowrap; }
.emergency-band p { margin: 0; font-size: .9rem; font-weight: 600; max-width: 62ch; }
.emergency-band .em-phone {
  font-family: var(--display); font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  font-weight: 600; white-space: nowrap; letter-spacing: .01em;
  color: var(--ink); text-decoration: none; border-bottom: 3px solid rgba(20,20,19,.4);
  transition: border-color .16s ease;
}
.emergency-band .em-phone:hover { border-bottom-color: var(--ink); }

/* ---------- responsive --------------------------------------------------- */
@media (max-width: 1120px) {
  .main-nav { gap: 1.05rem; }
  .main-nav a { font-size: .68rem; }
}
@media (max-width: 980px) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1rem;
    border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
    font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  }
  .main-nav {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 90;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .5rem var(--shell) 1.4rem; background: var(--paper);
    border-bottom: 1px solid var(--line); box-shadow: 0 16px 30px rgba(0,0,0,.12);
  }
  .main-nav[hidden] { display: none; }
  .main-nav a { padding-block: .95rem; border-bottom: 1px solid var(--line); font-size: .82rem; }
  .main-nav a[aria-current="page"]::after { display: none; }
  .main-nav a[aria-current="page"] { border-left: 4px solid var(--orange); padding-left: .8rem; }
  .main-nav .nav-cta { margin-top: 1rem; justify-content: center; }
  .site-header .shell { position: relative; }
  .home-hero, .split, .section-head, .contact-layout, .cta-band .shell { grid-template-columns: 1fr; }
  .section-head { align-items: start; }
  .cta-band .shell { gap: 2rem; }
  .svc-grid, .role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cap-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cap-strip > *:nth-child(2n) { border-right: 0; }
  .cap-strip > *:nth-child(-n+2) { border-bottom: 1px solid rgba(20,20,19,.26); }
  .gallery-grid { columns: 3; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .fb-body { grid-template-columns: 1fr; }
  .fb-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fb-sidebar .fb-card:first-child { grid-row: span 2; }
  .cal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-media { min-height: 380px; }
  .split-media, .split-media.tall { aspect-ratio: 16 / 10; }
  .emergency-band .shell { grid-template-columns: 1fr; gap: .8rem; }
  .emergency-band h2, .emergency-band .em-phone { white-space: normal; }
}
@media (max-width: 660px) {
  .utility-bar { font-size: .6rem; }
  .utility-bar .spacer { margin-left: 0; }
  .site-header .shell { min-height: 70px; }
  .brand img { width: 118px; height: 40px; }
  .home-hero h1 { font-size: clamp(2.3rem, 12.4vw, 4rem); }
  .page-hero h1 { font-size: clamp(2.1rem, 11.4vw, 3.6rem); }
  .page-hero { min-height: 320px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 1.1rem; }
  .hero-actions .btn { width: 100%; }
  .hero-actions .link-quiet { align-self: flex-start; }
  .svc-grid, .role-grid, .value-grid, .cap-strip, .cal-grid { grid-template-columns: 1fr; }
  .cap-strip > * { border-right: 0; border-bottom: 1px solid rgba(20,20,19,.26); }
  .cap-strip > *:last-child { border-bottom: 0; }
  .gallery-grid { columns: 2; column-gap: 10px; }
  .gallery-grid figure { margin-bottom: 10px; }
  .footer-top { grid-template-columns: 1fr; }
  .detail-list dd { font-size: 1.3rem; }
  .concept-topbar { justify-content: space-between; text-align: left; }
  .fb-topbar { padding-inline: .7rem; }
  .fb-search { width: 42px; height: 42px; padding: 0; justify-content: center; font-size: 0; }
  .fb-search span { font-size: 1.4rem; }
  .fb-top-actions button:nth-child(2) { display: none; }
  .fb-cover { height: 240px; border-radius: 0; }
  .fb-cover-copy { left: 1.1rem; right: 1.1rem; bottom: 4.4rem; }
  .fb-cover-copy strong { font-size: clamp(2rem, 10vw, 2.8rem); }
  .fb-identity { grid-template-columns: 1fr; min-height: 0; padding: 3.6rem 1rem 1.1rem; }
  .fb-avatar { top: -46px; left: 1rem; bottom: auto; width: 96px; height: 96px; }
  .fb-identity h1 { font-size: 1.5rem; }
  .fb-actions { flex-wrap: wrap; }
  .fb-actions .fb-btn:not(.icon) { flex: 1; }
  .fb-nav { gap: 0; padding: 0 .5rem; overflow-x: auto; scrollbar-width: thin; }
  .fb-nav button { min-height: 54px; padding-inline: .75rem; white-space: nowrap; }
  .fb-body { padding: .65rem 0; }
  .fb-sidebar { grid-template-columns: 1fr; padding-inline: .65rem; }
  .fb-sidebar .fb-card:first-child { grid-row: auto; }
  .fb-feed { gap: .65rem; }
  .fb-feed > .fb-card, .fb-feed > .fb-post { border-radius: 0; }
  .fb-post { padding-inline: .75rem; }
  .fb-post-media, .fb-shared-post { margin-left: -.75rem; margin-right: -.75rem; }
  .fb-career-media { aspect-ratio: 4 / 3; }
  .fb-career-media strong { font-size: clamp(1.85rem, 9vw, 2.5rem); }
  .fb-media-pair { aspect-ratio: 1; }
  .fb-section-panel { padding: .65rem; }
  .fb-section-card { padding: 1rem; }
  .fb-about-grid, .fb-stat-row, .fb-more-grid { grid-template-columns: 1fr; }
  .fb-photo-grid.large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .notice { left: 1rem; right: 1rem; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
  /* Hold a single static frame rather than flashing all four at once. */
  .hero-frames img { animation: none !important; opacity: 0; transform: none; }
  .hero-frames img:nth-child(1) { opacity: 1; }
}

/* ---------- 2026-08-09 proposal finish pass ----------------------------- */
.utility-bar .shell { justify-content: flex-end; gap: .4rem .9rem; }
.utility-area { margin-right: auto; }

.home-hero { isolation: isolate; }
.home-hero-copy { z-index: 2; }
.hero-media { position: relative; overflow: hidden; background: var(--ink); }
.home-hero .hero-media { margin-right: 0; }
.hero-video { width: 100%; height: 100%; min-height: inherit; object-fit: cover; object-position: 34% center; display: block; }
.hero-media::before {
  content: ""; position: absolute; z-index: 1; inset: 0 auto 0 0; width: 55%;
  background: linear-gradient(90deg, var(--ink) 0%, rgba(20,20,19,.92) 20%, rgba(20,20,19,.52) 63%, transparent 100%);
  pointer-events: none;
}
.hero-media::after {
  content: ""; position: absolute; z-index: 1; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.08) 45%, rgba(0,0,0,.58) 100%);
  pointer-events: none;
}
.hero-rule { z-index: 2; }
.hero-secondary {
  min-height: 72px; padding: 1.1rem 2rem; border: 1px solid rgba(255,255,255,.58);
  color: #fff; background: rgba(255,255,255,.035); gap: 1rem;
}
.home-hero .hero-actions .btn {
  flex: 0 0 250px; width: 250px; min-height: 72px; padding-inline: 1.7rem;
  letter-spacing: .075em; white-space: nowrap;
}
.home-hero .hero-actions .btn-yellow { font-size: 1rem; }
.home-hero .hero-actions .hero-secondary { font-size: .86rem; }
.hero-secondary b { color: #fff; font-size: 1rem; transition: transform .18s ease; }
.hero-secondary:hover { border-color: var(--yellow); background: rgba(255,199,44,.1); }
.hero-secondary:hover b { transform: translate(2px,-2px); }

.cap-band {
  background: transparent;
  box-shadow: none;
}
.cap-strip { gap: 8px; padding-block: 12px; background: transparent; }
.cap-strip > * {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    linear-gradient(125deg, rgba(255,255,255,.11), transparent 55%),
    linear-gradient(90deg, #e55229, #dc4822);
  border: 1px solid rgba(255,199,44,.12);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transition: color .2s ease, background .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.cap-strip > *:nth-child(even) {
  background:
    linear-gradient(125deg, rgba(20,20,19,.1), transparent 58%),
    linear-gradient(90deg, #e04d26, #d84420);
}
.cap-strip > *::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background:
    repeating-linear-gradient(116deg, transparent 0 22px, rgba(20,20,19,.12) 22px 24px, transparent 24px 46px),
    linear-gradient(90deg, transparent 68%, rgba(20,20,19,.09));
  transition: opacity .24s ease;
}
.cap-strip > * > * { position: relative; z-index: 1; }
.cap-strip > *::after {
  content: ""; position: absolute; right: 1.15rem; top: 1rem; width: 36px; height: 7px;
  border-left: 10px solid var(--yellow); background: rgba(20,20,19,.58); transform: skewX(-26deg);
  transition: width .24s ease, background .24s ease, transform .24s ease;
}
.cap-strip span {
  align-self: flex-start; min-width: 34px; padding: .28rem .4rem .24rem;
  background: rgba(20,20,19,.88); color: var(--yellow); line-height: 1;
}
.cap-strip strong { font-size: clamp(1.25rem, 1.75vw, 1.65rem); }
a.cap-strip-item:hover {
  color: #fff;
  background: linear-gradient(135deg, rgba(20,20,19,.98), rgba(67,35,24,.96));
  border-color: rgba(255,199,44,.65);
  box-shadow: inset 0 3px 0 var(--yellow), inset 0 -3px 0 rgba(255,91,40,.7), 0 10px 24px rgba(0,0,0,.28);
}
a.cap-strip-item:hover::before { opacity: .72; }
a.cap-strip-item:hover::after { width: 48px; background: var(--yellow); transform: skewX(-26deg) translateX(-4px); }

.svc-grid { gap: 12px; background: transparent; border: 0; }
.svc-card {
  isolation: isolate; display: grid; grid-template-rows: auto 1fr auto; min-height: 360px; border: 1px solid rgba(255,255,255,.12);
  background: var(--ink); color: #fff; box-shadow: 0 12px 28px rgba(35,26,14,.08);
  transition: border-color .22s ease, box-shadow .22s ease;
}
.svc-card::before {
  content: ""; position: absolute; z-index: -2; inset: 0;
  background-image: var(--card-image); background-size: cover; background-position: center;
  filter: saturate(.72) contrast(1.08); transform: none;
  transition: filter .32s ease;
}
.svc-card::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(180deg, rgba(15,15,14,.32), rgba(15,15,14,.68) 43%, rgba(15,15,14,.96) 100%);
  transition: background .3s ease;
}
.svc-card .num, .svc-card .go {
  width: fit-content; padding: 0; background: transparent; box-shadow: none;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.96), 1px -1px 0 rgba(0,0,0,.96),
    -1px 1px 0 rgba(0,0,0,.96), 1px 1px 0 rgba(0,0,0,.96),
    0 2px 2px rgba(0,0,0,.82);
}
.svc-card .num { color: var(--green); }
.svc-card-body { align-self: end; display: grid; grid-template-rows: minmax(5rem, auto) minmax(5.4rem, auto); padding-top: 1rem; }
.svc-card h3 { align-self: end; margin: 0 0 .8rem; text-shadow: 0 3px 18px rgba(0,0,0,.38); }
.svc-card p { color: #d8d4ca; max-width: 42ch; }
.svc-card .go { align-self: end; color: var(--green); }
.svc-card:hover {
  color: #fff; background: var(--ink); border-color: rgba(255,199,44,.92);
  box-shadow: inset 0 -5px 0 var(--yellow), 0 18px 36px rgba(35,26,14,.2);
}
.svc-card:hover::before { transform: none; filter: saturate(.96) contrast(1.1) brightness(1.05); }
.svc-card:hover::after { background: linear-gradient(180deg, rgba(15,15,14,.12), rgba(15,15,14,.52) 42%, rgba(15,15,14,.94) 100%); }
.svc-card:hover p { color: #fff; }
.svc-card:hover .go { background: transparent; color: var(--yellow); }
.js .reveal { opacity: 0; transform: translateY(24px); }
.js .reveal-left { transform: translate(-26px, 12px); }
.js .reveal-right { transform: translate(26px, 12px); }
.js .reveal.is-visible { opacity: 1; transform: none; transition: opacity .62s ease var(--reveal-delay), transform .62s cubic-bezier(.2,.75,.25,1) var(--reveal-delay); }
.motion-head { overflow: hidden; }

.gallery-grid figure { cursor: zoom-in; }
.gallery-open {
  display: block; width: 100%; padding: 0; border: 0; background: transparent;
  color: inherit; cursor: zoom-in; text-align: inherit;
}
.gallery-open:focus-visible { outline: 4px solid var(--yellow); outline-offset: 3px; }
.lightbox {
  width: min(1120px, calc(100vw - 2rem)); max-width: none; height: min(860px, calc(100dvh - 2rem));
  margin: auto; padding: 0; border: 1px solid rgba(255,255,255,.2); background: #0d0d0c;
  color: #fff; box-shadow: 0 28px 80px rgba(0,0,0,.65); overflow: hidden;
}
.lightbox::backdrop { background: rgba(6,6,6,.9); backdrop-filter: blur(5px); }
.lightbox-inner { display: grid; grid-template-rows: auto minmax(0,1fr) auto; height: 100%; }
.lightbox-head, .lightbox-foot { display: flex; align-items: center; gap: 1rem; padding: .8rem 1rem; }
.lightbox-head { justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.13); }
.lightbox-kicker { margin: 0; color: var(--green); font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.lightbox-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 1rem 4rem; }
.lightbox-stage img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox-close, .lightbox-nav {
  display: grid; place-items: center; min-width: 44px; min-height: 44px; border: 1px solid rgba(255,255,255,.32);
  background: #171716; color: #fff; font: 800 1rem/1 var(--sans); cursor: pointer;
}
.lightbox-close:hover, .lightbox-nav:hover { border-color: var(--yellow); color: var(--yellow); }
.lightbox-nav { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); border-radius: 50%; }
.lightbox-prev { left: .75rem; }
.lightbox-next { right: .75rem; }
.lightbox-foot { justify-content: space-between; border-top: 1px solid rgba(255,255,255,.13); color: #cfccc4; font-size: .78rem; }
.lightbox-caption { margin: 0; }

.footer-top {
  grid-template-columns: minmax(470px,1.7fr) minmax(130px,.55fr) minmax(120px,.55fr);
  align-items: start; gap: clamp(1.5rem,2.4vw,2rem); padding-block: clamp(1.8rem,2.8vw,2.5rem);
}
.footer-brand-col { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 1.35rem; align-items: start; }
.footer-brand-info { padding-top: .15rem; }
.footer-project-cta { padding-bottom: .85rem; margin-bottom: .85rem; border-bottom: 1px solid var(--white-line); }
.footer-project-cta .eyebrow { margin-bottom: .3rem; font-size: .58rem; }
.site-footer .footer-project-cta h3 { margin: 0; color: #fff; font-size: clamp(1.4rem,2vw,1.85rem); line-height: .98; }
.footer-project-links { display: flex; flex-wrap: wrap; gap: .45rem 1rem; margin-top: .65rem; }
.site-footer .footer-project-links a {
  color: var(--yellow); font-size: .66rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
}
.site-footer .footer-project-links a:last-child { color: #fff; }
.site-footer .footer-project-links a:hover { color: var(--orange); }
.footer-brand-info > p { margin: 1rem 0 0; max-width: 32ch; font-size: .84rem; }
.footer-address { margin: 0; color: #fff; font-size: .82rem; font-style: normal; line-height: 1.55; }
.footer-contact-list { display: grid; gap: .5rem; margin-top: 1.15rem; }
.footer-contact-list p { display: flex; align-items: center; gap: .65rem; margin: 0; font-size: .82rem; }
.footer-contact-list .footer-contact-icon {
  display: inline-grid; place-items: center; width: 18px; height: auto; border: 0; color: var(--yellow); font-size: 1rem; line-height: 1;
}
.footer-contact-list .is-alert { color: var(--orange); font-family: var(--display); font-size: 1.1rem; }
.footer-contact-list .is-email { color: var(--yellow); font-size: .92rem; }
.footer-contact-list strong { color: #fff; }
.footer-map-frame {
  width: min(250px,100%); aspect-ratio: 1; margin: 1rem 0 0;
  overflow: hidden; border: 1px solid var(--white-line); background: #202a2c;
}
.footer-map-frame iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(.12) contrast(1.03); }

@media (max-width: 980px) {
  .home-hero { grid-template-columns: 1fr; }
  .home-hero .hero-media { margin-inline: calc(-1 * var(--shell)); }
  .hero-media::before { width: 100%; background: linear-gradient(180deg, rgba(20,20,19,.3), transparent 38%, rgba(20,20,19,.56)); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand-col { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .utility-bar .shell { justify-content: center; padding-block: .5rem; }
  /* Phone width: the two call targets are what matter, so the service-area
     line steps aside rather than pushing them onto a third row. */
  .utility-area { display: none; }
  .utility-call { flex: 1 1 0; justify-content: center; min-height: 44px; align-items: center; }
  .utility-call.is-office { flex-grow: 1.15; }
  .utility-call.is-emergency { flex-grow: .85; align-items: center; }
  .home-hero .hero-actions .btn { flex-basis: auto; width: 100%; }
  .cap-strip { gap: 6px; padding-block: 8px; }
  .svc-card-body { grid-template-rows: auto auto; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand-col { grid-column: 1 / -1; }
  .lightbox-stage { padding-inline: .5rem; }
  .lightbox-nav { top: auto; bottom: .65rem; transform: none; }
  .lightbox-foot { padding-right: 7.2rem; }
}
@media (max-width: 440px) {
  .utility-call { flex-direction: column; align-items: center; gap: .1rem; padding: .35rem .4rem; line-height: 1.25; }
  .utility-call.is-office { flex-direction: row; }
  .utility-call .num { font-size: .95rem; }
  .utility-call.is-emergency .num { font-size: .84rem; }
  .hero-video { min-height: 320px; }
  .svc-card { min-height: 330px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 1rem; padding-block: 1.25rem; }
  .footer-brand-col { grid-column: 1 / -1; grid-template-columns: 150px minmax(0,1fr); gap: .9rem; }
  .footer-brand-media > img { width: 150px; }
  .footer-map-frame { width: 150px; margin-top: .7rem; }
  .footer-brand-info > p { margin-top: .75rem; font-size: .76rem; line-height: 1.45; }
  .footer-address { font-size: .75rem; line-height: 1.45; }
  .footer-contact-list { gap: .4rem; margin-top: .8rem; }
  .footer-contact-list p { gap: .35rem; font-size: .7rem; line-height: 1.35; }
  .footer-contact-list .footer-contact-icon { width: 16px; font-size: .9rem; }
  .footer-project-cta { padding-bottom: .55rem; margin-bottom: .55rem; }
  .footer-project-cta .eyebrow { margin-bottom: .15rem; font-size: .52rem; }
  .site-footer .footer-project-cta h3 { font-size: 1.12rem; line-height: 1; }
  .footer-project-links { flex-direction: column; align-items: flex-start; gap: .22rem; margin-top: .35rem; }
  .site-footer .footer-project-links a { font-size: .56rem; }
  .site-footer h4 { margin-bottom: .65rem; font-size: 1rem; }
  .site-footer li { margin-bottom: .35rem; font-size: .78rem; }
  .site-footer a { font-size: .78rem; }
  .footer-bottom { gap: .35rem 1rem; padding-block: .8rem; font-size: .58rem; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { transform: none; }
  .js .reveal.is-visible { transition: opacity .18s linear var(--reveal-delay); }
}

/* ---------- 2026-08-10 interior-page system -----------------------------
   The seven standard interior routes inherit the homepage's black planning
   field, framed equipment photography, orange navigation rail, and compact
   reveal language. Facebook remains a deliberately separate platform mockup. */
.interior-stage {
  background-color: var(--ink);
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(118deg, rgba(255,199,44,.035), transparent 44%);
  background-size: 48px 48px, 48px 48px, auto;
}
.interior-hero { color: #fff; }
.interior-hero-shell {
  display: grid; grid-template-columns: minmax(0,.88fr) minmax(420px,1.12fr);
  min-height: clamp(430px,49vw,650px); padding-inline: var(--shell);
}
.interior-hero-copy {
  position: relative; z-index: 2; align-self: center;
  padding: clamp(2.7rem,5vw,5.4rem) clamp(1.5rem,4vw,4rem) clamp(2.8rem,5vw,4.7rem) 0;
}
.interior-hero h1 { margin: 0; font-size: clamp(3.1rem,5.5vw,6.2rem); }
.interior-hero .lede { margin: 1.4rem 0 0; color: #cfccc4; font-size: clamp(1rem,1.25vw,1.16rem); }
.interior-hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.interior-hero-media {
  position: relative; min-height: 100%; overflow: hidden; background: var(--ink-3);
}
.interior-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.08); }
.interior-hero-media::before {
  content: ""; position: absolute; z-index: 1; inset: 0;
  background: linear-gradient(90deg,var(--ink) 0%,rgba(20,20,19,.8) 13%,rgba(20,20,19,.18) 48%,rgba(20,20,19,.05));
}
.interior-hero-media::after {
  content: ""; position: absolute; z-index: 1; inset: 45% 0 0;
  background: linear-gradient(180deg,transparent,rgba(20,20,19,.72));
}
.interior-hero-stamp {
  position: absolute; z-index: 2; inset: auto 0 0; display: flex; justify-content: space-between; gap: 1rem;
  padding: .7rem 1rem; border-top: 1px solid var(--white-line); color: #fff;
  font-size: .62rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase;
}
.interior-rail { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; padding-block: 12px; }
.interior-rail > * {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .45rem;
  min-height: 104px; padding: 1.1rem 1.25rem; overflow: hidden;
  background: linear-gradient(125deg,rgba(255,255,255,.1),transparent 55%),linear-gradient(90deg,#e55229,#dc4822);
  border: 1px solid rgba(255,199,44,.15); color: var(--ink); text-decoration: none;
  transition: color .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.interior-rail > *::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(116deg,transparent 0 22px,rgba(20,20,19,.12) 22px 24px,transparent 24px 46px);
}
.interior-rail span,.interior-rail strong { position: relative; z-index: 1; }
.interior-rail span { width: fit-content; padding: .25rem .38rem; background: rgba(20,20,19,.9); color: var(--yellow); font-size: .6rem; font-weight: 900; letter-spacing: .1em; }
.interior-rail strong { font-family: var(--display); font-size: clamp(1.1rem,1.5vw,1.45rem); font-weight: 600; line-height: .96; text-transform: uppercase; }
.interior-rail a:hover { color: #fff; border-color: var(--yellow); background: linear-gradient(135deg,rgba(20,20,19,.98),rgba(67,35,24,.96)); box-shadow: inset 0 3px 0 var(--yellow); }

.section-title { margin: 0 0 1.35rem; font-size: clamp(2.5rem,4.4vw,5rem); }
.content-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.8rem; }
.scope-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.scope-card {
  position: relative; isolation: isolate; display: grid; grid-template-rows: auto 1fr auto;
  min-height: 360px; padding: 1.6rem; overflow: hidden; border: 1px solid rgba(255,255,255,.16);
  background: var(--ink); color: #fff; box-shadow: 0 12px 28px rgba(35,26,14,.09);
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.scope-card::before {
  content: ""; position: absolute; z-index: -2; inset: 0; background: var(--scope-image) center/cover no-repeat;
  filter: saturate(.7) contrast(1.08); transition: filter .3s ease;
}
.scope-card::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(180deg,rgba(15,15,14,.28),rgba(15,15,14,.62) 42%,rgba(15,15,14,.96));
}
.scope-card .num { color: var(--green); font-size: .66rem; font-weight: 900; letter-spacing: .13em; text-shadow: -1px -1px #000,1px -1px #000,-1px 1px #000,1px 1px #000; }
.scope-card-body { align-self: end; padding-top: 4rem; }
.scope-card h3 { margin: 0 0 .8rem; font-size: clamp(1.9rem,2.5vw,2.7rem); text-shadow: 0 3px 14px #000; }
.scope-card p { margin: 0; max-width: 42ch; color: #ddd8cf; font-size: .86rem; }
.scope-card .go { margin-top: 1.2rem; color: var(--yellow); font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.scope-card:hover { transform: translateY(-4px); border-color: var(--yellow); box-shadow: inset 0 -5px 0 var(--yellow),0 18px 36px rgba(35,26,14,.22); }
.scope-card:hover::before { filter: saturate(.95) contrast(1.1) brightness(1.05); }

.fact-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-block: 1px solid var(--white-line); }
.fact-strip > div { padding: 1.6rem clamp(1rem,2vw,1.8rem); border-right: 1px solid var(--white-line); }
.fact-strip > div:last-child { border-right: 0; }
.fact-strip span { color: var(--green); font-size: .62rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.fact-strip h3 { margin: .65rem 0 .55rem; font-size: clamp(1.35rem,2vw,1.9rem); }
.fact-strip p { margin: 0; color: var(--muted-dark); font-size: .84rem; }

.gallery-intro { margin-bottom: clamp(1.7rem,3vw,2.8rem); }
.gallery-intro .lede { margin-bottom: 0; }
.contact-note { margin: 0; color: var(--muted); font-size: .82rem; }
.contact-note strong { color: var(--ink); }
.role-card { position: relative; overflow: hidden; border: 1px solid rgba(20,20,19,.22); }
.role-card::after { content: ""; position: absolute; right: -24px; top: -24px; width: 70px; height: 70px; border: 12px solid rgba(255,91,40,.18); transform: rotate(18deg); }
.role-card .role-example { border: 0; padding: 0; color: var(--orange-ink); }

/* Existing interior markup also receives the unified black-grid hero. This
   keeps the page files portable while aligning their first viewport with the
   richer commercial route above. */
body:not(.facebook-concept-page) .page-hero {
  min-height: clamp(430px,48vw,620px); align-items: stretch;
  background-color: var(--ink);
  background-image: linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px);
  background-size: 48px 48px;
}
body:not(.facebook-concept-page) .page-hero img { left: auto; right: max(0px,calc((100vw - var(--maxw))/2 + var(--shell))); width: min(56vw,850px); }
body:not(.facebook-concept-page) .page-hero::after { background: linear-gradient(90deg,var(--ink) 0%,var(--ink) 38%,rgba(20,20,19,.8) 51%,rgba(20,20,19,.18) 76%),linear-gradient(180deg,transparent 50%,rgba(20,20,19,.68)); }
body:not(.facebook-concept-page) .page-hero .shell { align-self: center; padding-block: clamp(3rem,5vw,5rem); }
body:not(.facebook-concept-page) .page-hero h1 { max-width: 8.5ch; font-size: clamp(3.1rem,5.5vw,6rem); }
body:not(.facebook-concept-page) .page-hero .lede { max-width: 48ch; }
.route-rail-wrap { background-color: var(--ink); background-image: linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size: 48px 48px; }
.route-rail-wrap .interior-rail { padding-top: 0; }
.page-hero + .route-rail-wrap { margin-top: 0; }

.residential-page .svc-card:nth-child(1) { --card-image:url('assets/webp/gal-07.webp'); }
.residential-page .svc-card:nth-child(2) { --card-image:url('assets/webp/gal-04.webp'); }
.residential-page .svc-card:nth-child(3) { --card-image:url('assets/webp/gal-12.webp'); }
.residential-page .svc-card:nth-child(4) { --card-image:url('assets/webp/svc-residential.webp'); }
.residential-page .svc-card:nth-child(5) { --card-image:url('assets/webp/gal-05.webp'); }
.residential-page .svc-card:nth-child(6) { --card-image:url('assets/webp/gal-10.webp'); }
.demolition-page .svc-card:nth-child(1) { --card-image:url('assets/webp/gal-01.webp'); }
.demolition-page .svc-card:nth-child(2) { --card-image:url('assets/webp/gal-13.webp'); }
.demolition-page .svc-card:nth-child(3) { --card-image:url('assets/webp/svc-demolition.webp'); }
.demolition-page .svc-card:nth-child(4) { --card-image:url('assets/webp/gal-07.webp'); }
.demolition-page .svc-card:nth-child(5) { --card-image:url('assets/webp/public-gallery-2a.webp'); }
.demolition-page .svc-card:nth-child(6) { --card-image:url('assets/webp/gal-09.webp'); }
.about-page .svc-card:nth-child(1) { --card-image:url('assets/webp/svc-commercial.webp'); }
.about-page .svc-card:nth-child(2) { --card-image:url('assets/webp/public-gallery-2a.webp'); }
.about-page .svc-card:nth-child(3) { --card-image:url('assets/webp/gal-08.webp'); }

@media (max-width: 980px) {
  .interior-hero-shell { grid-template-columns: 1fr; padding-inline: var(--shell); }
  .interior-hero-copy { padding-right: 0; }
  .interior-hero-media { min-height: 380px; margin-inline: calc(-1 * var(--shell)); }
  .interior-hero-media::before { background: linear-gradient(180deg,rgba(20,20,19,.15),transparent 42%,rgba(20,20,19,.65)); }
  .scope-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .fact-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .fact-strip > div:nth-child(2) { border-right: 0; }
  .fact-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--white-line); }
  body:not(.facebook-concept-page) .page-hero img { right: 0; width: 72%; }
  body:not(.facebook-concept-page) .page-hero::after { background: linear-gradient(90deg,var(--ink) 0%,rgba(20,20,19,.93) 44%,rgba(20,20,19,.3) 100%),linear-gradient(180deg,transparent,rgba(20,20,19,.68)); }
}
@media (max-width: 660px) {
  .interior-hero-shell { min-height: 0; }
  .interior-hero h1 { font-size: clamp(2.7rem,13vw,4.2rem); }
  .interior-hero-copy { padding-block: 2.7rem; }
  .interior-hero-actions { flex-direction: column; align-items: stretch; }
  .interior-hero-actions .btn { width: 100%; }
  .interior-hero-media { min-height: 300px; }
  .interior-hero-stamp { font-size: .54rem; }
  .interior-rail { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; padding-block: 8px; }
  .interior-rail > * { min-height: 92px; padding: .9rem; }
  .scope-grid { grid-template-columns: 1fr; }
  .scope-card { min-height: 330px; }
  .fact-strip { grid-template-columns: 1fr; }
  .fact-strip > div { border-right: 0; border-bottom: 1px solid var(--white-line); }
  .fact-strip > div:last-child { border-bottom: 0; }
  body:not(.facebook-concept-page) .page-hero { min-height: 430px; }
  body:not(.facebook-concept-page) .page-hero img { width: 100%; opacity: .58; }
  body:not(.facebook-concept-page) .page-hero::after { background: linear-gradient(90deg,rgba(20,20,19,.96),rgba(20,20,19,.6)),linear-gradient(0deg,rgba(20,20,19,.88),transparent 68%); }
  body:not(.facebook-concept-page) .page-hero h1 { font-size: clamp(2.7rem,13vw,4rem); }
}

/* ---------- homepage editorial proof rail ------------------------------- */
.press-ribbon { position: relative; overflow: visible; background: var(--paper); border-bottom: 1px solid var(--line-strong); }
.press-ribbon-backdrop { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.press-ribbon-backdrop span {
  position: absolute; color: rgba(20,20,19,.05); font-family: var(--display);
  font-size: clamp(2.45rem,4.25vw,4.25rem); font-weight: 700; line-height: .82;
  text-transform: uppercase; white-space: nowrap;
}
.press-ribbon-backdrop span:nth-child(1) { left: 18%; top: -.35rem; transform: rotate(-1.5deg); }
.press-ribbon-backdrop span:nth-child(2) { left: 38%; bottom: -.45rem; transform: rotate(.8deg); }
.press-ribbon-backdrop span:nth-child(3) { right: 6%; top: 34%; transform: rotate(-1deg); }
.press-ribbon-inner {
  position: relative; z-index: 1; display: grid; width: 100%; max-width: 1260px;
  grid-template-areas: "title cover quote";
  grid-template-columns: minmax(370px,1fr) 160px minmax(330px,.86fr);
  gap: clamp(1rem,1.8vw,1.8rem); align-items: center; height: 156px;
}
.press-ribbon-title { grid-area: title; }
.press-ribbon-cover {
  grid-area: cover; align-self: center; justify-self: center; width: 142px; margin: 0;
  padding: 3px; background: var(--ink); box-shadow: 7px 7px 0 var(--orange);
  transform: translateY(14px); transform-origin: 50% 50%;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 75%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 75%, transparent 100%);
}
.press-ribbon-cover img { display: block; width: 100%; height: auto; }
.press-ribbon-title .eyebrow { margin: 0 0 .35rem; font-size: .58rem; }
.press-ribbon-title h2 { margin: 0; font-size: clamp(1.5rem,2.45vw,2.45rem); line-height: .92; }
.press-ribbon-quote { grid-area: quote; align-self: center; margin: 0; padding-left: clamp(.85rem,1.8vw,1.55rem); border-left: 1px solid var(--line-strong); }
.press-ribbon-quote p { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(1.45rem,2.25vw,2.15rem); font-weight: 600; line-height: .93; text-transform: uppercase; }
.press-ribbon-quote cite { display: block; margin-top: .45rem; color: var(--muted); font-size: .57rem; font-style: normal; font-weight: 900; letter-spacing: .08em; line-height: 1.35; text-transform: uppercase; }

.home-careers-section {
  position: relative; isolation: isolate; border-top: 4px solid var(--green);
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(118deg, rgba(31,255,43,.04), transparent 48%);
  background-size: 48px 48px, 48px 48px, auto;
}
.home-careers-section .btn-yellow { box-shadow: 7px 7px 0 var(--orange); }

@media (min-width: 981px) {
  .home-services-section { padding-top: calc(clamp(3.4rem, 6vw, 7rem) - 14px); }
}

@media (max-width: 900px) {
  .press-ribbon { overflow: hidden; }
  .press-ribbon-inner { grid-template-areas: "cover title" "cover quote"; grid-template-columns: 72px minmax(0,1fr); gap: .7rem 1rem; height: auto; min-height: 156px; padding-block: 1rem; }
  .press-ribbon-cover { width: 68px; grid-row: span 2; box-shadow: 4px 4px 0 var(--orange); transform: none; -webkit-mask-image: none; mask-image: none; }
  .press-ribbon-quote { padding: .6rem 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .press-ribbon-backdrop span:nth-child(1) { left: 20%; }
}

@media (max-width: 760px) {
  .press-ribbon-inner { grid-template-areas: "cover title" "quote quote"; grid-template-columns: 62px minmax(0,1fr); gap: .9rem 1.1rem; min-height: 0; padding-block: 1rem; }
  .press-ribbon-cover { width: 58px; grid-row: auto; box-shadow: 4px 4px 0 var(--orange); }
  .press-ribbon-title .eyebrow { font-size: .52rem; line-height: 1.35; }
  .press-ribbon-title h2 { font-size: clamp(1.4rem,6.1vw,2rem); }
  .press-ribbon-quote { padding: .7rem 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .press-ribbon-quote p { font-size: clamp(1.3rem,6vw,1.8rem); }
  .press-ribbon-quote cite { margin-top: .3rem; }
  .press-ribbon-backdrop span { font-size: clamp(2.3rem,12vw,3.4rem); opacity: .72; }
}