/* ==========================================================================
   tf-brickz - theme-forge "Hard-Hat Industrial" theme  (Ironvale Construction)
   LIKENESS build of the Brickz reference: warm charcoal + off-white world
   punched by ONE high-vis safety yellow, hard-edged square icon-tokens, a bold
   word-marquee, ghost-outline numerals, dot-flanked eyebrows, boxy dark/light
   cards, alternating white / off-white / charcoal bands.
   Fonts: Clash Display (display) + Manrope (body). All color = :root role tokens.
   Zero external requests. IP guardrail: repos/theme-forge/README.md.
   ========================================================================== */

/* ---- self-hosted fonts ---- */
@font-face {
  font-family: "Clash Display";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/clash-display.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
}

/* ---- tokens ---- */
:root {
  /* role palette (named hex, reference hue family) */
  --paper: #ffffff;        /* white band */
  --off:   #f5f5f4;        /* off-white band */
  --ink:   #1b1b1c;        /* near-black ink */
  --dark:  #2e2e30;        /* charcoal band + cards */
  --dark-2:#262628;        /* deeper charcoal (featured price card) */
  --dark-3:#333335;        /* inset input on dark */
  --muted: #6d6d72;        /* muted gray body text (>=4.6:1 on white) */
  --accent:#f5c518;        /* single high-vis yellow accent */
  --accent-deep:#e0b510;

  /* supports */
  --line:      #e4e4e2;    /* hairline on light */
  --line-dark: #45454a;    /* hairline on charcoal */
  --on-dark:   #ffffff;
  --on-dark-muted:#a7a7ad;
  --token-bg:  #2e2e30;    /* charcoal icon token */
  --ghost:     #d8d8d6;    /* offset ghost square behind token */

  /* fonts */
  --font-display: "Clash Display", system-ui, -apple-system, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, sans-serif;

  /* type scale */
  --fs-hero: clamp(2.7rem, 1.1rem + 5.6vw, 5.05rem);   /* 43-81 */
  --fs-h1:   clamp(2.1rem, 1.3rem + 2.9vw, 3.35rem);   /* 34-54 */
  --fs-h2:   clamp(1.85rem, 1.1rem + 2.6vw, 3.25rem);  /* 30-52 */
  --fs-h3:   clamp(1.2rem, 1.06rem + 0.6vw, 1.45rem);  /* 19-23 */
  --fs-body: 1rem;
  --fs-lead: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  --fs-eyebrow: 0.78rem;
  --fs-price: clamp(2.4rem, 1.7rem + 2.4vw, 3.1rem);

  /* spacing */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:90px; --s10:120px;

  /* geometry */
  --r-card: 6px;
  --r-token: 8px;
  --r-pill: 6px;

  /* shadows */
  --sh-1: 0 2px 8px rgba(20,20,22,.05), 0 18px 40px rgba(20,20,22,.07);
  --sh-2: 0 10px 30px rgba(20,20,22,.14);

  /* motion */
  --t: 240ms;
  --ease: cubic-bezier(.22,.61,.36,1);

  --wrap: 1300px;
  --util-h: 40px;
}

/* ---- reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; margin: 0; color: var(--ink); letter-spacing: -0.01em; }
h1 { font-weight: 600; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--ink); }
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 300; }
.skip:focus { left: 12px; top: 12px; }

/* ---- layout primitives ---- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.section { padding: var(--s9) 0; }
.section--off { background: var(--off); }
.section--paper { background: var(--paper); }
.section--dark { background: var(--dark); color: var(--on-dark); }
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4 { color: #fff; }

/* ---- eyebrow (dot-flanked centered + left variant) ---- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-eyebrow);
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
}
.eyebrow::before, .eyebrow--both::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none;
}
.eyebrow--left::after { display: none; }
.section--dark .eyebrow, .dark-panel .eyebrow { color: #fff; }
.eyebrow-center { text-align: center; display: flex; justify-content: center; }

/* section head (centered) */
.sec-head { text-align: center; max-width: 660px; margin: 0 auto var(--s8); }
.sec-head h2 { font-size: var(--fs-h2); margin: 20px 0 0; }
.sec-head .lead { color: var(--muted); margin-top: 16px; font-size: var(--fs-lead); }
.section--dark .sec-head .lead { color: var(--on-dark-muted); }

/* title hairline */
.hair { width: 116px; height: 3px; background: var(--accent); border: 0; margin: 22px 0; }
.hair--center { margin-left: auto; margin-right: auto; }
.hair--sm { width: 46px; margin: 14px 0; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 14px; justify-content: space-between;
  font-family: var(--font-body); font-weight: 700; font-size: .95rem;
  padding: 15px 26px; border-radius: var(--r-pill); border: 1.5px solid transparent;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.btn .btn__ico { display: inline-flex; }
.btn .btn__ico svg, .btn > svg { width: 17px; height: 17px; flex: none; }
.btn--pill { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.btn--pill:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--dark { background: var(--dark); color: #fff; border-color: var(--dark); }
.btn--dark:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--ghost-d { background: transparent; color: #fff; border-color: var(--line-dark); }
.btn--ghost-d:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.btn--block { width: 100%; }
.btn--sm { padding: 11px 20px; font-size: .88rem; }

/* underline arrow link */
.arrowlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .95rem; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.arrowlink svg { width: 15px; height: 15px; }
.notecue { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; color: var(--ink); }
.notecue__sq { width: 24px; height: 24px; background: var(--accent); color: var(--ink); display: grid; place-items: center; border-radius: 3px; flex: none; }
.notecue__sq svg { width: 15px; height: 15px; }
.notecue a { text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }

/* ---- icon token (charcoal square + yellow line icon) ---- */
.token { position: relative; width: 62px; height: 62px; flex: none; }
.token__box { position: relative; z-index: 2; width: 62px; height: 62px; background: var(--token-bg); border-radius: var(--r-token); display: grid; place-items: center; }
.token__box svg { width: 30px; height: 30px; color: var(--accent); }
.token--ghost::before { content: ""; position: absolute; z-index: 1; left: -12px; top: -12px; width: 46px; height: 46px; background: var(--ghost); border-radius: var(--r-token); }
.section--dark .token--ghost::before, .dark-panel .token--ghost::before { background: #3d3d40; }

/* =========================================================================
   UTILITY BAR (inner pages)
   ========================================================================= */
.util-bar { background: var(--accent); color: var(--ink); font-size: .82rem; font-weight: 600; }
.util-bar .wrap { max-width: 1400px; height: var(--util-h); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.util-bar a { font-weight: 700; }
.util-bar__l { display: inline-flex; align-items: center; gap: 8px; }
.util-bar__r { display: flex; align-items: center; gap: 26px; }
.util-bar__r span { display: inline-flex; align-items: center; gap: 8px; }
.util-bar svg { width: 15px; height: 15px; }

/* =========================================================================
   HEADER
   ========================================================================= */
.header { background: var(--paper); border-bottom: 1px solid var(--line); position: relative; z-index: 40; }
.header .wrap { max-width: 1400px; height: 84px; display: flex; align-items: center; gap: 28px; }
.header--over { position: absolute; top: 0; left: 0; right: 0; background: transparent; border-bottom: 0; z-index: 40; }
.header--over .wrap { height: 92px; }

.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; letter-spacing: -0.02em; color: var(--ink); }
.brand__mark { width: 38px; height: 38px; flex: none; }
.header--over .brand, .footer .brand { color: #fff; }

.nav { display: flex; align-items: center; gap: 30px; margin: 0 auto; }
.nav__link { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: .98rem; color: var(--ink); transition: color var(--t); }
.nav__link svg { width: 13px; height: 13px; opacity: .6; }
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--accent-deep); }
.header--over .nav__link { color: #fff; }
.header--over .nav__link:hover, .header--over .nav__link[aria-current="page"] { color: var(--accent); }

.header__cta { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.header--over .header__cta { margin-left: 0; }
.icon-btn { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; display: grid; place-items: center; color: var(--ink); }
.icon-btn svg { width: 19px; height: 19px; }
.header--over .icon-btn { border-color: rgba(255,255,255,.35); color: #fff; }
.nav-toggle { display: grid; }

/* mobile panel */
.mobile-panel { position: fixed; inset: 0 0 0 auto; width: min(86vw, 340px); background: var(--dark); color: #fff; transform: translateX(100%); visibility: hidden; transition: transform var(--t) var(--ease), visibility 0s var(--t); z-index: 200; padding: 24px; display: flex; flex-direction: column; }
.mobile-panel.open { transform: translateX(0); visibility: visible; transition: transform var(--t) var(--ease); }
.mobile-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.mobile-panel__close { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--line-dark); background: transparent; color: #fff; display: grid; place-items: center; }
.mobile-panel__close svg { width: 20px; height: 20px; }
.mobile-panel nav { display: flex; flex-direction: column; gap: 4px; }
.mobile-panel nav a { padding: 13px 4px; font-weight: 600; font-size: 1.05rem; border-bottom: 1px solid var(--line-dark); color: #fff; }
.mobile-panel .btn { margin-top: 20px; justify-content: center; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero { position: relative; min-height: 781px; min-height: max(100svh, 781px); display: flex; align-items: flex-start; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__photo { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.hero__scrim { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(20,20,22,.94) 0%, rgba(20,20,22,.82) 32%, rgba(20,20,22,.36) 55%, rgba(20,20,22,.28) 100%); }
.hero .wrap { position: relative; z-index: 2; width: 100%; max-width: 1400px; }
.hero__copy { max-width: 530px; padding-top: 227px; padding-left: 40px; }
.hero__copy .hair { margin: 12px 0; }
.hero__eyebrow { color: var(--accent); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: .84rem; }
.hero h1 { color: #fff; font-size: var(--fs-hero); font-weight: 600; margin: 12px 0 0; line-height: 1.06; max-width: 12ch; }
.hero__lead { color: rgba(255,255,255,.82); max-width: 440px; margin-top: 0; }
.hero__cta { margin-top: 12px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero__card {
  position: absolute; right: max(28px, calc((100vw - 1344px)/2)); bottom: 68px; z-index: 3;
  width: 300px; background: rgba(30,30,32,.66); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.12); border-radius: 6px; padding: 22px 24px;
}
.hero__row { display: flex; gap: 12px; align-items: baseline; padding: 12px 0; color: rgba(255,255,255,.55); font-size: 1.05rem; }
.hero__row--on { color: #fff; border-bottom: 1px solid rgba(255,255,255,.18); }
.hero__row b { font-family: var(--font-display); font-weight: 600; }

/* =========================================================================
   FEATURE TRIO (charcoal cards floating over hero/white seam)
   ========================================================================= */
.feature-wrap { background: var(--paper); }
.feature-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: -96px; position: relative; z-index: 5; }
.fcard { background: var(--dark); color: #fff; border-radius: 6px; padding: 30px 30px 34px; }
.fcard__head { display: flex; align-items: center; gap: 18px; }
.fcard__head h3 { color: #fff; font-size: 1.35rem; }
.fcard .token--ghost::before, .pcard .token--ghost::before { display: none; }
.fcard .token__box, .pcard .token__box { background: #3a3a3d; }
.fcard .hair { margin: 20px 0 16px; }
.fcard p { color: var(--on-dark-muted); font-size: .96rem; }

/* =========================================================================
   ABOUT (asymmetric: text right-of-center, tabs, 25 years, side photo)
   ========================================================================= */
.about { display: block; margin-left: 43%; }
.about__head h2 { font-size: var(--fs-h2); margin: 20px 0 18px; }
.about__head > p { color: var(--muted); margin-bottom: 26px; max-width: 52ch; }
.about__cols { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }
.tabs__nav { display: flex; gap: 30px; border-bottom: 1px solid var(--line); }
.tab-btn { background: none; border: 0; padding: 0 0 14px; font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; color: var(--ink); position: relative; }
.tab-btn[aria-selected="true"] { color: var(--accent-deep); }
.tab-btn[aria-selected="true"]::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 3px; background: var(--accent); }
.tab-panel { display: none; padding-top: 26px; }
.tab-panel.active { display: block; }
.tab-panel p { color: var(--muted); margin-bottom: 20px; }
.checkrows { display: grid; gap: 12px; margin-bottom: 26px; }
.checkrow { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.checkrow svg { width: 20px; height: 20px; color: var(--accent-deep); flex: none; }
.checkrow--circle svg { background: var(--ink); color: #fff; border-radius: 50%; padding: 4px; box-sizing: content-box; width: 13px; height: 13px; }
.about__side-photo { border-radius: 6px; overflow: hidden; }
.about__side-photo img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.about__cap { color: var(--muted); margin: 20px 0; max-width: 300px; }
.years { display: flex; align-items: center; gap: 16px; }
.years__num { font-family: var(--font-display); font-weight: 600; font-size: 3.6rem; line-height: .9; }
.years__lbl { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.1; }

/* progress bars (about inner) */
.progs { display: grid; gap: 22px; margin-top: 12px; }
.prog__top { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 8px; }
.prog__track { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.prog__fill { height: 100%; background: var(--ink); border-radius: 4px; width: 0; transition: width 1.1s var(--ease); }

/* =========================================================================
   SERVICES GRID (light cards)
   ========================================================================= */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.svc-grid--6 { grid-template-columns: repeat(3, 1fr); }
.scard { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 30px 28px 28px; display: flex; flex-direction: column; }
.section--off .scard { background: var(--paper); }
.scard h3 { font-size: 1.3rem; margin: 26px 0 14px; }
.scard__desc { color: var(--muted); font-size: .95rem; margin-bottom: 22px; }
.scard .checkrows { margin-bottom: 26px; }
.scard .checkrow { font-size: .95rem; }
.scard .btn { margin-top: auto; }
.svc-note { text-align: center; margin-top: 46px; }

/* =========================================================================
   CTA PHOTO (newsletter panel over photo)
   ========================================================================= */
.ctaphoto { position: relative; padding: 120px 0; }
.ctaphoto__bg { position: absolute; inset: 0; z-index: 0; }
.ctaphoto__bg img { width: 100%; height: 100%; object-fit: cover; }
.ctaphoto .wrap { position: relative; z-index: 2; }
.ctaphoto__panel { background: rgba(34,34,36,.9); backdrop-filter: blur(3px); border-radius: 8px; padding: 48px 56px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 50px; align-items: center; color: #fff; }
.ctaphoto__panel h2 { color: #fff; font-size: 1.75rem; margin-bottom: 22px; }
.mailform { display: flex; align-items: center; gap: 10px; background: var(--dark-3); border-radius: 6px; padding: 8px 8px 8px 18px; }
.mailform svg { width: 20px; height: 20px; color: var(--on-dark-muted); flex: none; }
.mailform input { flex: 1; min-width: 0; background: none; border: 0; color: #fff; font-family: inherit; font-size: .95rem; padding: 10px 0; }
.mailform input::placeholder { color: var(--on-dark-muted); }
.mailform input:focus { outline: none; }
.ctaphoto__right { display: flex; flex-direction: column; }
.avatars { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.avatars__stack { display: flex; }
.avatars__stack img { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--dark); object-fit: cover; margin-left: -14px; }
.avatars__stack img:first-child { margin-left: 0; }
.avatars h3 { color: #fff; font-size: 1.35rem; }
.ctaphoto__right p { color: var(--on-dark-muted); font-size: .96rem; }

/* =========================================================================
   MARQUEE
   ========================================================================= */
.marquee { background: var(--accent); overflow: hidden; padding: 16px 0; }
.marquee__track { display: flex; gap: 0; width: max-content; animation: marq 26s linear infinite; }
.marquee__item { display: inline-flex; align-items: center; gap: 44px; padding-right: 44px; font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; color: var(--ink); white-space: nowrap; }
.marquee__item svg { width: 22px; height: 22px; }
@keyframes marq { to { transform: translateX(-50%); } }

/* =========================================================================
   WORK PROCESS
   ========================================================================= */
.proc-top { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; margin-bottom: var(--s8); }
.proc-top h2 { font-size: var(--fs-h2); margin: 18px 0 0; max-width: 12ch; }
.proc-top__lead { color: var(--muted); margin-top: 20px; max-width: 40ch; }
.proc-top__right { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.proc-top__photo { border-radius: 6px; overflow: hidden; width: 100%; }
.proc-top__photo img { aspect-ratio: 16/6; object-fit: cover; width: 100%; }
.proc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.pcard { background: var(--dark); color: #fff; border-radius: 6px; padding: 28px 26px 30px; position: relative; }
.pcard__head { display: flex; align-items: flex-start; justify-content: space-between; }
.pcard__num { font-family: var(--font-display); font-weight: 600; font-size: 3.4rem; line-height: .8; color: transparent; -webkit-text-stroke: 1.4px rgba(245,197,24,.4); }
.pcard .hair { margin: 26px 0 16px; }
.pcard h3 { color: #fff; font-size: 1.28rem; }
.pcard p { color: var(--on-dark-muted); font-size: .95rem; margin-top: 12px; }
/* circular-photo process variant (services page) */
.pcard--photo { background: transparent; color: var(--ink); text-align: center; padding: 0; }
.pcard--photo .pcirc { position: relative; width: 168px; height: 168px; margin: 0 auto 24px; }
.pcard--photo .pcirc img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.pcard--photo .pcirc__num { position: absolute; right: 4px; bottom: 4px; width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
.pcard--photo h3 { color: var(--ink); font-size: 1.28rem; }
.pcard--photo p { color: var(--muted); margin-top: 12px; }

/* =========================================================================
   WHY CHOOSE US (charcoal overlay over photo)
   ========================================================================= */
.why { position: relative; padding: 0; }
.why__bg { position: absolute; inset: 0; z-index: 0; }
.why__bg img { width: 100%; height: 100%; object-fit: cover; }
.why .wrap { position: relative; z-index: 2; padding-top: 60px; padding-bottom: 60px; }
.why__panel { background: rgba(30,30,32,.94); border-radius: 8px; padding: 54px 60px; color: #fff; }
.why__head { text-align: center; max-width: 620px; margin: 0 auto 30px; }
.why__panel .eyebrow, .why__panel h2 { color: #fff; }
.why__head .lead { color: var(--on-dark-muted); margin-top: 20px; }
.pilltabs { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.pilltab { background: transparent; border: 1.5px solid var(--line-dark); color: #fff; padding: 12px 24px; border-radius: 999px; font-weight: 700; font-size: .92rem; }
.pilltab[aria-selected="true"] { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.why__body { display: grid; grid-template-columns: 380px 1fr; gap: 44px; align-items: center; border-top: 1px solid var(--line-dark); margin-top: 34px; padding-top: 40px; }
.why__photo { border-radius: 6px; overflow: hidden; }
.why__photo img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.why__panel-content h3 { color: #fff; font-size: 1.6rem; margin-bottom: 14px; }
.why__panel-content > p { color: var(--on-dark-muted); margin-bottom: 24px; }
.why__feats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; }
.why__feats .checkrow { color: #fff; font-size: .95rem; }
.why__feats .checkrow svg { color: var(--accent); }
.why__panel-content .tab-panel { padding-top: 0; }

/* =========================================================================
   STATS
   ========================================================================= */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat { background: var(--off); border: 1px solid var(--line); border-radius: 6px; padding: 34px 30px 30px; position: relative; min-height: 210px; display: flex; flex-direction: column; }
.section--off .stat { background: var(--paper); }
.stat__ico { color: var(--accent-deep); margin-bottom: auto; }
.stat__ico svg { width: 34px; height: 34px; }
.stat__num { font-family: var(--font-display); font-weight: 600; font-size: 2.8rem; line-height: 1; margin-top: 20px; }
.stat__lbl { color: var(--muted); font-weight: 600; margin-top: 8px; }
.stat__badge { position: absolute; left: 0; bottom: 0; width: 58px; height: 58px; background: var(--dark); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; border-bottom-left-radius: 6px; }

/* =========================================================================
   PROJECTS SLIDER (charcoal)
   ========================================================================= */
.projslider__tabs { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); padding: 22px 0; margin-bottom: 0; }
.filtertab { background: transparent; border: 0; color: #fff; padding: 10px 22px; border-radius: var(--r-pill); font-weight: 700; font-size: .92rem; }
.filtertab[aria-selected="true"] { background: var(--accent); color: var(--ink); }
.projslider__viewport { overflow: hidden; }
.projslider__track { display: flex; gap: 0; transition: transform 480ms var(--ease); }
.pslide { position: relative; flex: 0 0 25%; height: 420px; }
.pslide img { width: 100%; height: 100%; object-fit: cover; }
.pslide__ov { position: absolute; inset: auto 0 0 0; padding: 30px 28px; background: linear-gradient(transparent, rgba(20,20,22,.92)); color: #fff; opacity: 0; transition: opacity var(--t); }
.pslide--active .pslide__ov, .pslide:hover .pslide__ov { opacity: 1; }
.pslide__ov h3 { color: #fff; font-size: 1.4rem; }
.pslide__ov .hair { margin: 14px 0 12px; }
.pslide__ov p { color: rgba(255,255,255,.8); font-size: .92rem; margin-bottom: 14px; }

/* =========================================================================
   PRICING
   ========================================================================= */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.plan { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 34px 32px; }
.section--off .plan { background: var(--paper); }
.section--off .plan--feat { background: var(--dark-2); }
.plan--feat { background: var(--dark-2); color: #fff; border-color: var(--dark-2); }
.plan__name { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .82rem; color: var(--ink); }
.plan--feat .plan__name { color: #fff; }
.plan .hair { width: 100%; height: 1px; background: var(--line); margin: 20px 0; }
.plan--feat .hair { background: var(--line-dark); }
.plan__fig { display: flex; align-items: baseline; gap: 4px; }
.plan__amt { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-price); }
.plan--feat .plan__amt, .plan--feat .plan__cur { color: var(--accent); }
.plan__per { color: var(--muted); font-weight: 600; }
.plan--feat .plan__per { color: var(--on-dark-muted); }
.plan__desc { color: var(--muted); margin: 16px 0 24px; font-size: .95rem; }
.plan--feat .plan__desc { color: var(--on-dark-muted); }
.plan .btn { margin-bottom: 28px; }
.planfeats { display: grid; gap: 14px; }
.planfeat { display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: .95rem; }
.planfeat svg { width: 19px; height: 19px; flex: none; }
.planfeat--on svg { color: var(--ink); }
.plan--feat .planfeat--on svg { color: #fff; }
.planfeat--off { color: var(--muted); }
.planfeat--off svg { color: var(--muted); }

/* =========================================================================
   TESTIMONIALS (charcoal + 98% + overlapping card)
   ========================================================================= */
.testi { position: relative; }
.testi__top { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; margin-bottom: var(--s8); }
.testi__top p { color: var(--on-dark-muted); margin-top: 20px; max-width: 40ch; }
.testi__pct { font-family: var(--font-display); font-weight: 600; font-size: 5.5rem; line-height: .8; text-align: right; }
.testi__pct em { color: var(--accent); font-style: normal; }
.testi__pct span { display: block; font-size: 1.15rem; margin-top: 8px; }
.testi__card { background: var(--off); color: var(--ink); border-radius: 8px; display: grid; grid-template-columns: 300px 1fr; gap: 40px; padding: 30px; align-items: center; }
.testi__photo { border-radius: 6px; overflow: hidden; align-self: stretch; }
.testi__photo img { width: 100%; height: 100%; object-fit: cover; min-height: 260px; }
.testi__q h3 { font-size: 1.5rem; margin-bottom: 10px; color: var(--ink); }
.testi__stars { display: inline-flex; gap: 3px; color: var(--accent); margin-bottom: 16px; }
.testi__stars svg { width: 18px; height: 18px; }
.testi__quote { font-style: italic; color: var(--muted); font-size: 1.1rem; line-height: 1.6; margin-bottom: 22px; }
.testi__foot { display: flex; align-items: flex-end; justify-content: space-between; }
.testi__by strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.testi__by span { color: var(--muted); font-size: .92rem; }
.testi__arrows { display: flex; gap: 10px; }
.rarrow { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; display: grid; place-items: center; color: var(--ink); }
.rarrow:hover { background: var(--accent); border-color: var(--accent); }
.rarrow svg { width: 18px; height: 18px; }

/* =========================================================================
   PARTNERS (over photo)
   ========================================================================= */
.partners { position: relative; }
.partners__bg { position: absolute; inset: 0; z-index: 0; }
.partners__bg img { width: 100%; height: 100%; object-fit: cover; }
.partners__strip { position: relative; z-index: 2; background: rgba(20,20,22,.62); }
.partners__row { display: grid; grid-template-columns: repeat(6, 1fr); }
.partner { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 10px; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; border-right: 1px solid rgba(255,255,255,.12); }
.partner:last-child { border-right: 0; }
.partner svg { width: 26px; height: 26px; color: var(--accent); }

/* =========================================================================
   BLOG
   ========================================================================= */
.blog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.bpost { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 3/3.5; }
.bpost img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bpost::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(20,20,22,.9)); }
.bpost__date { position: absolute; top: 18px; left: 18px; z-index: 2; background: rgba(20,20,22,.7); color: #fff; font-size: .78rem; font-weight: 600; padding: 7px 14px; border-radius: 4px; }
.bpost__body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 26px 24px; }
.bpost__meta { display: flex; gap: 18px; color: rgba(255,255,255,.85); font-size: .84rem; font-weight: 600; margin-bottom: 12px; }
.bpost__meta span { display: inline-flex; align-items: center; gap: 6px; }
.bpost__meta svg { width: 14px; height: 14px; }
.bpost__body h3 { color: #fff; font-size: 1.3rem; line-height: 1.2; }

/* =========================================================================
   CONTACT BAND ("Have Any Questions?")
   ========================================================================= */
.contactband { background: var(--off); position: relative; }
.contactband__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: stretch; }
.contactband__form { position: relative; }
.contactband__photo { position: absolute; left: -40px; top: 40px; bottom: 40px; width: 170px; border-radius: 6px; overflow: hidden; z-index: 1; }
.contactband__photo img { width: 100%; height: 100%; object-fit: cover; }
.formpanel { position: relative; z-index: 2; background: var(--dark); color: #fff; border-radius: 8px; padding: 44px 46px; border-top: 4px solid var(--accent); margin-left: 90px; }
.formpanel h2 { color: #fff; font-size: 1.9rem; }
.formpanel > p { color: var(--on-dark-muted); margin: 8px 0 26px; }
.formgrid { display: grid; gap: 16px; }
.formgrid .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.finput { background: var(--dark-3); border: 1px solid var(--line-dark); border-radius: 6px; padding: 15px 16px; color: #fff; font-family: inherit; font-size: .95rem; width: 100%; }
.finput::placeholder { color: var(--on-dark-muted); }
.finput:focus { outline: none; border-color: var(--accent); }
textarea.finput { min-height: 120px; resize: vertical; }
select.finput { appearance: none; }
.contactband__info { align-self: center; }
.contactband__info .lead { color: var(--muted); margin: 20px 0 30px; }
.crow { display: flex; align-items: center; gap: 18px; padding: 18px 0; }
.crow h4 { font-size: 1.15rem; }
.crow p { color: var(--muted); }
.bulldozer { position: absolute; right: 0; bottom: 0; width: 220px; color: var(--accent); z-index: 1; opacity: .95; }

/* =========================================================================
   PAGE HEAD (inner hero)
   ========================================================================= */
.pagehead { position: relative; min-height: 400px; display: grid; place-items: center; text-align: center; }
.pagehead__bg { position: absolute; inset: 0; z-index: 0; }
.pagehead__bg img { width: 100%; height: 100%; object-fit: cover; }
.pagehead__bg::after { content: ""; position: absolute; inset: 0; background: rgba(20,20,22,.68); }
.pagehead__inner { position: relative; z-index: 2; padding: 40px 20px; }
.crumb { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: .84rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.crumb svg { width: 14px; height: 14px; color: var(--accent); }
.crumb a { color: #fff; }
.pagehead h1 { color: #fff; font-size: clamp(2.2rem, 1.3rem + 3vw, 3.4rem); }
.pagehead__lead { color: rgba(255,255,255,.82); max-width: 46ch; margin: 20px auto 0; }

/* =========================================================================
   ROADMAP (about) timeline
   ========================================================================= */
.roadmap__line { display: grid; gap: 60px; position: relative; }
.roadmap__line::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line-dark); transform: translateX(-50%); }
.mile { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; }
.mile__photo { border-radius: 6px; overflow: hidden; }
.mile__photo img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.mile__text .yr { color: var(--accent); font-weight: 700; letter-spacing: .1em; font-size: .85rem; }
.mile__text h3 { color: #fff; font-size: 1.5rem; margin: 10px 0 12px; }
.mile__text p { color: var(--on-dark-muted); max-width: 40ch; }
.mile--rev .mile__photo { order: 2; }
.mile__dot { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 16px; height: 16px; border-radius: 50%; background: var(--accent); z-index: 2; }

/* =========================================================================
   TEAM
   ========================================================================= */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.member { position: relative; border-radius: 8px; overflow: hidden; }
.member img { aspect-ratio: 4/4.4; object-fit: cover; width: 100%; }
.member__bar { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; background: var(--paper); border: 1px solid var(--line); border-top: 0; }
.member__name { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; }
.member__role { color: var(--muted); font-size: .9rem; }
.member__arrow { width: 40px; height: 40px; border-radius: 50%; background: var(--off); display: grid; place-items: center; color: var(--ink); flex: none; }
.member__arrow svg { width: 17px; height: 17px; }
.member:hover .member__arrow { background: var(--accent); }

/* video band */
.videoband { position: relative; min-height: 440px; display: grid; place-items: center; }
.videoband__bg { position: absolute; inset: 0; }
.videoband__bg img { width: 100%; height: 100%; object-fit: cover; }
.videoband__bg::after { content: ""; position: absolute; inset: 0; background: rgba(20,20,22,.35); }
.playbtn { position: relative; z-index: 2; width: 84px; height: 84px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; border: 0; box-shadow: 0 0 0 0 rgba(245,197,24,.5); animation: pulse 2.4s infinite; }
.playbtn svg { width: 30px; height: 30px; }
@keyframes pulse { to { box-shadow: 0 0 0 26px rgba(245,197,24,0); } }

/* reviews */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.review { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 30px 28px; }
.review__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.review__av { display: flex; align-items: center; gap: 14px; }
.review__av img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.review__av strong { display: block; font-family: var(--font-display); font-weight: 600; }
.review__av span { color: var(--muted); font-size: .86rem; }
.review__stars { display: inline-flex; gap: 2px; color: var(--accent); }
.review__stars svg { width: 16px; height: 16px; }
.review p { color: var(--muted); }

/* =========================================================================
   COLLAB CTA (yellow left + charcoal right + form + map)
   ========================================================================= */
.collab { display: grid; grid-template-columns: 1fr 1fr; }
.collab__left { background: var(--accent); color: var(--ink); padding: 56px; }
.collab__left .eyebrow { color: var(--ink); }
.collab__left h2 { font-size: 2rem; margin: 18px 0 14px; }
.collab__left p { max-width: 40ch; font-weight: 500; }
.collab__right { background: var(--dark); color: #fff; padding: 56px; display: flex; gap: 50px; }
.collab__contact h4 { color: var(--on-dark-muted); font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.collab__contact strong { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: #fff; }
.collab__form { background: var(--off); position: relative; }
.collab__form-inner { padding: 44px; display: grid; grid-template-columns: 1fr 1fr; }
.collab__mapwrap { position: relative; background: #e9e9e6; min-height: 320px; overflow: hidden; }
.collab__map { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.pincard { position: absolute; left: 30px; top: 30px; background: var(--paper); border-radius: 6px; box-shadow: var(--sh-1); padding: 14px; display: flex; gap: 12px; align-items: flex-start; max-width: 240px; z-index: 2; }
.pincard img { width: 54px; height: 54px; border-radius: 5px; object-fit: cover; }
.pincard strong { display: block; font-family: var(--font-display); font-weight: 600; }
.pincard span { color: var(--muted); font-size: .84rem; }
.collab__formfields { padding: 40px; display: grid; gap: 14px; align-content: center; }
.collab__formfields .finput { background: var(--paper); color: var(--ink); border-color: var(--line); }
.collab__formfields .finput::placeholder { color: var(--muted); }
.collab__formfields .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* map placeholder (contact page) */
.mapblock { height: 380px; background: repeating-linear-gradient(45deg, #ededea, #ededea 22px, #e6e6e2 22px, #e6e6e2 44px); display: grid; place-items: center; color: var(--muted); font-weight: 600; }

/* build CTA yellow band */
.buildcta { background: var(--accent); }
.buildcta .wrap { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 44px 28px; flex-wrap: wrap; }
.buildcta h2 { font-size: clamp(1.6rem, 1rem + 2vw, 2.4rem); color: var(--ink); }

/* contact rows (contact page 2-up) */
.talk { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; align-items: stretch; }
.talk__panel { background: var(--off); border-radius: 8px; padding: 44px; }
.talk__panel h2 { font-size: 2rem; margin: 16px 0 26px; }
.talk__rows { display: grid; }
.trow { display: flex; align-items: center; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.trow:last-child { border-bottom: 0; }
.trow h4 { font-size: 1.15rem; }
.trow p { color: var(--muted); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer { background: var(--dark); color: var(--on-dark-muted); }
.footer__news { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; padding: 40px 0; border-bottom: 1px solid var(--line-dark); }
.footer__newsform { display: flex; gap: 10px; background: var(--dark-3); border-radius: 6px; padding: 7px 7px 7px 18px; min-width: 380px; }
.footer__newsform input { flex: 1; background: none; border: 0; color: #fff; font-family: inherit; padding: 10px 0; }
.footer__newsform input::placeholder { color: var(--on-dark-muted); }
.footer__newsform input:focus { outline: none; }
.footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding: 56px 0; }
.footer__col h4 { color: #fff; font-size: 1.25rem; position: relative; padding-bottom: 14px; margin-bottom: 22px; }
.footer__col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; background: var(--accent); }
.footer__col p { margin-bottom: 18px; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.footer__col ul a:hover { color: var(--accent); }
.footer__contactline { display: block; margin-bottom: 6px; }
.footer__certs { display: flex; gap: 30px; justify-content: center; padding: 30px 0; border-top: 1px solid var(--line-dark); }
.footer__cert { width: 74px; height: 74px; border-radius: 50%; border: 1px solid var(--line-dark); display: grid; place-items: center; color: var(--on-dark-muted); }
.footer__cert svg { width: 32px; height: 32px; }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; border-top: 1px solid var(--line-dark); flex-wrap: wrap; }
.footer__social { display: flex; gap: 12px; }
.footer__social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-dark); display: grid; place-items: center; color: #fff; }
.footer__social a:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.footer__social svg { width: 17px; height: 17px; }
.footer__legal { font-size: .85rem; color: var(--on-dark-muted); max-width: 70ch; }
.footer__disclaimer { padding: 20px 0 40px; }
.footer__disclaimer p { font-size: .8rem; color: #8b8b90; max-width: 100%; }

/* ---- reveal ---- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[style*="--i"] { transition-delay: calc(var(--i) * 90ms); }

/* demo form success */
.form__success { display: none; background: rgba(245,197,24,.14); border: 1px solid var(--accent); border-radius: 6px; padding: 20px; color: inherit; }
.form__success.show { display: block; }
.formpanel .form__success { color: #fff; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1080px) {
  .feature-trio { grid-template-columns: 1fr; margin-top: -60px; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-grid--6 { grid-template-columns: repeat(2, 1fr); }
  .proc-grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .pricing { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .blog, .team, .reviews { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
  .pslide { flex: 0 0 50%; }
  .why__body { grid-template-columns: 1fr; }
  .why__feats { grid-template-columns: 1fr 1fr; }
  .partners__row { grid-template-columns: repeat(3, 1fr); }
  .partner:nth-child(3) { border-right: 0; }
  .about { margin-left: 0; }
  .about__cols { grid-template-columns: 1fr; gap: 40px; }
  .mile, .mile--rev .mile__photo { grid-template-columns: 1fr; order: 0; }
  .mile { grid-template-columns: 1fr; gap: 24px; }
  .roadmap__line::before, .mile__dot { display: none; }
  .collab, .talk { grid-template-columns: 1fr; }
  .collab__form-inner { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .header__cta .btn { display: none; }
  .nav { display: none; }
  .header__cta .icon-btn--search { display: none; }
  .nav-toggle { display: grid; }
  .util-bar__l { display: none; }
  .util-bar .wrap { justify-content: center; }
  .util-bar__r { gap: 16px; font-size: .76rem; }
  .ctaphoto__panel { grid-template-columns: 1fr; gap: 30px; padding: 34px 28px; }
  .proc-top, .testi__top, .contactband__grid { grid-template-columns: 1fr; }
  .testi__pct { text-align: left; }
  .testi__card { grid-template-columns: 1fr; }
  .contactband__photo { display: none; }
  .formpanel { margin-left: 0; }
  .collab__right { flex-direction: column; gap: 24px; }
  .bulldozer { display: none; }
}
@media (max-width: 620px) {
  .ctaphoto__panel { grid-template-columns: 1fr; padding: 32px 24px; gap: 28px; }
  .section { padding: var(--s8) 0; }
  .wrap { padding: 0 20px; }
  .svc-grid, .svc-grid--6, .proc-grid, .stats, .talk { grid-template-columns: 1fr; }
  .stat { min-height: 180px; }
  .pslide { flex: 0 0 100%; }
  .partners__row { grid-template-columns: repeat(2, 1fr); }
  .partner { border-right: 0; }
  .why__feats { grid-template-columns: 1fr; }
  .formgrid .row2, .collab__formfields .row2 { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr; gap: 30px; }
  .footer__news { grid-template-columns: 1fr; }
  .footer__newsform { min-width: 0; }
  .hero__card { display: none; }
  .why__panel, .why__panel-content { padding-left: 0; }
  .why .wrap { padding-left: 20px; padding-right: 20px; }
  .why__panel { padding: 34px 24px; }
  .collab__left, .collab__right, .talk__panel, .formpanel { padding: 34px 24px; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .marquee__track { animation: none; }
  .playbtn { animation: none; }
  .projslider__track { transition: none; }
  .projslider__prog span { transition: none; }
  .prog__fill { transition: none; }
  .feat-quad__card { transition: none; }
  .hero__slide { transition: none; }
  .scrollcue { animation: none; }
  .acc-a { transition: none; }
}

/* =========================================================================
   ==========  VARIANT DEMOS (industry / modern / civil)  ==================
   Extra homepages that reuse the tokens + component vocabulary above and add
   variant-specific chrome. Namespaced by .v-industry / .v-modern / .v-civil
   on <body>, plus shared new components.
   ========================================================================= */

/* ---- light feature trio (modern + civil) ---- */
.feature-trio--light .fcard { background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
.feature-trio--light .fcard h3 { color: var(--ink); }
.feature-trio--light .fcard p { color: var(--muted); }
.feature-trio--light .fcard .token--ghost::before { display: block; background: var(--ghost); }
.feature-trio--light .fcard .token__box { background: var(--token-bg); }

/* ---- header: dark charcoal variant (civil) ---- */
.header--dark { background: var(--dark); border-bottom: 1px solid var(--line-dark); }
.header--dark .brand { color: #fff; }
.header--dark .nav__link { color: #fff; }
.header--dark .nav__link:hover, .header--dark .nav__link[aria-current="page"] { color: var(--accent); }
.header--dark .icon-btn { border-color: var(--line-dark); color: #fff; }

/* ---- header cta: yellow rect + attached dark arrow box (industry ref) ---- */
.btn--boxed { padding: 0 0 0 26px; gap: 0; border-radius: 4px; overflow: hidden; align-items: center; }
.btn--boxed .btn__box { background: var(--dark); color: var(--accent); width: 46px; align-self: stretch; display: grid; place-items: center; margin-left: 22px; }
.btn--boxed .btn__box svg { width: 16px; height: 16px; }
.header .btn--boxed { height: 52px; }

/* ---- INDUSTRY: centered slider hero (wide gutters 1680+) + left mail rail ---- */
.v-industry .hero--slider { margin: 0 0 0 56px; overflow: visible; min-height: 640px; min-height: max(calc(100svh - 92px), 640px); align-items: center; }
.v-industry .hero--slider .hero__stage { position: absolute; inset: 0; overflow: hidden; }
.v-industry .hero__copy { padding-top: 170px; max-width: 640px; }
.v-industry .hero--slider h1 { font-size: clamp(2.8rem, 5.5vw, 5rem); max-width: 18ch; margin-top: 14px; }
.v-industry .hero--slider .hero__copy { padding-top: 0; max-width: 760px; }
.v-industry .hero--slider .hero__eyebrow { font-size: .95rem; }
.v-industry .hero--slider .hero__lead { font-size: 1.08rem; max-width: 52ch; margin-top: 18px; }
.v-industry .hero--slider .hero__cta { margin-top: 30px; }
/* dark rail in the white left gutter (mostly clipped at 1440, visible at 1680+) */
.v-industry .hero__sidebar { position: absolute; left: -56px; top: 0; bottom: 0; width: 56px; background: var(--paper); z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 26px 0 22px; }
.v-industry .hero__sidebar-contacts { writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; gap: 14px; color: var(--ink); font-weight: 600; font-size: .8rem; letter-spacing: .06em; }
.v-industry .hero__sidebar-contacts i { width: 1px; height: 26px; background: var(--ink); opacity: .35; }
.v-industry .hero__sidebar-scroll { writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; font-size: .8rem; letter-spacing: .06em; }
.v-industry .hero__sidebar-box { writing-mode: horizontal-tb; transform: rotate(180deg); width: 26px; height: 26px; border: 1px solid var(--line); display: grid; place-items: center; }
.v-industry .hero__sidebar-box svg { width: 12px; height: 12px; transform: rotate(90deg); }
.v-industry .hero__arrows { right: 0; }
@media (max-width: 900px) { .v-industry .hero__sidebar { display: none; } .v-industry .hero--slider { margin: 0; } }
@media (max-width: 720px) { .v-industry .hero__arrows { display: none; } }

/* ---- INDUSTRY: slider hero (full-bleed dark, like home) ---- */
.hero--slider .hero__stage { position: absolute; inset: 0; z-index: 0; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--ease); }
.hero__slide.is-active { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero--slider .hero__scrim { background:
  linear-gradient(90deg, rgba(16,15,14,.92) 0%, rgba(16,15,14,.72) 34%, rgba(16,15,14,.34) 60%, rgba(16,15,14,.2) 100%); }
.hero__arrows { position: absolute; right: max(20px, calc((100vw - 1400px)/2 + 20px)); top: 50%; transform: translateY(-50%); z-index: 4; display: flex; flex-direction: column; gap: 3px; }
.hero__arrow { width: 62px; height: 62px; background: rgba(24,23,22,.85); color: #fff; border: 1px solid rgba(255,255,255,.14); display: grid; place-items: center; cursor: pointer; transition: background var(--t), color var(--t); }
.hero__arrow:hover { background: var(--accent); color: var(--ink); }
.hero__arrow svg { width: 22px; height: 22px; }

/* ---- INDUSTRY: 4-up outlined boxed feature cards (below hero) ---- */
.feat-quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.v-industry .feature-wrap { padding: 90px 0 40px; }
.v-industry .header .wrap { max-width: none; padding-left: 72px; padding-right: 28px; }
@media (max-width: 900px) { .v-industry .header .wrap { padding-left: 28px; } }
.feat-quad__card { padding: 30px 28px 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
.feat-quad__card:hover { box-shadow: var(--sh-1); transform: translateY(-4px); }
.feat-quad__ico { color: var(--ink); margin-bottom: 22px; }
.feat-quad__ico svg { width: 40px; height: 40px; }
.feat-quad__card h3 { font-size: 1.3rem; margin: 0 0 12px; }
.feat-quad__card p { color: var(--muted); font-size: .95rem; margin: 0; }

/* ---- LIGHT HERO (modern + civil): shared ---- */
.herol { position: relative; overflow: hidden; }
.herol--off { background: var(--off); }
.herol--paper { background: var(--paper); }
.herol .wrap { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.herol__copy { max-width: 560px; }
.herol__eyebrow { color: var(--ink); font-weight: 700; letter-spacing: .26em; text-transform: uppercase; font-size: .78rem; }
.herol h1 { color: var(--ink); font-size: clamp(2.3rem, 1.05rem + 3.4vw, 4rem); font-weight: 600; line-height: 1.05; margin: 22px 0 0; max-width: 15ch; }
.herol__rule { display: flex; align-items: center; margin: 30px 0; max-width: 480px; }
.herol__rule span { width: 74px; height: 3px; background: var(--accent); flex: none; }
.herol__rule i { flex: 1; height: 1px; background: var(--line); }
.herol__lead { color: var(--muted); max-width: 46ch; margin: 0 0 30px; }

/* ---- MODERN hero right: photo panel + yellow mark + service card + scroll cue ---- */
.herol--modern .wrap { padding: 96px 0 130px; min-height: 780px; }
.herol--modern .herol__copy { padding-left: 40px; }
.mhero__media { position: relative; align-self: stretch; min-height: 470px; }
.mhero__photo { position: absolute; inset: 0; border-radius: 4px; overflow: hidden; }
.mhero__photo img { width: 100%; height: 100%; object-fit: cover; }
.heromark { position: absolute; right: 14px; bottom: 14px; width: 132px; height: 132px; color: var(--accent); z-index: 3; }
.scrollcue { position: absolute; left: -22px; bottom: 200px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; writing-mode: vertical-rl; transform: rotate(180deg); border: 1px solid var(--line); border-radius: 999px; padding: 16px 9px; color: var(--ink); font-weight: 600; font-size: .78rem; letter-spacing: .08em; background: rgba(255,255,255,.7); animation: cuebob 2.2s var(--ease) infinite; }
.scrollcue svg { width: 14px; height: 14px; transform: rotate(90deg); }
@keyframes cuebob { 0%,100%{ transform: rotate(180deg) translateX(0);} 50%{ transform: rotate(180deg) translateX(6px);} }
.svc-slidecard { position: absolute; left: 34%; bottom: 34px; z-index: 5; width: min(560px, 55%); background: var(--dark); color: #fff; border-radius: 4px; overflow: hidden; box-shadow: var(--sh-2); }
.svc-slidecard__thumb { overflow: hidden; }
.svc-slidecard__thumb img { width: 100%; height: 100%; object-fit: cover; min-height: 170px; }
.svc-slidecard__body { padding: 26px 30px; position: relative; }
.svc-slidecard__body h3 { color: #fff; font-size: 1.4rem; margin: 0 0 10px; }
.svc-slidecard__body p { color: var(--on-dark-muted); font-size: .95rem; margin: 0 0 16px; }
.svc-slidecard .arrowlink { color: #fff; }
.svc-slidecard__dots { position: absolute; right: 24px; top: 26px; display: flex; gap: 6px; }
.svc-slidecard__dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; background: rgba(255,255,255,.3); cursor: pointer; padding: 0; }
.svc-slidecard__dots button.is-active { background: var(--accent); }
.svc-slide { display: none; }
.svc-slide.is-active { display: block; }

/* ---- CIVIL hero right: cutout photo + partner strip overlap ---- */
.herol--civil .wrap { padding: 92px 0 0; min-height: 700px; align-items: end; }
.chero__media { position: relative; align-self: end; justify-self: end; width: 100%; height: 100%; min-height: 560px; }
.chero__photo { position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; }
.chero__photo img { width: 100%; height: 100%; object-fit: contain; object-position: bottom right; }
.herol--civil .herol__copy { padding-bottom: 120px; }
.hero-partners { position: relative; z-index: 6; background: var(--dark); margin-top: -84px; }
.hero-partners__row { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1400px; margin: 0 auto; padding: 0 28px; }
.hero-partners .partner { padding: 30px 10px; }

/* ---- shared: dark accordion (industries + FAQ) ---- */
.accordion { display: grid; }
.acc-item { border-bottom: 1px solid var(--line-dark); }
.acc-item:first-child { border-top: 1px solid var(--line-dark); }
.acc-q { width: 100%; text-align: left; background: none; border: 0; color: #fff; padding: 22px 4px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-family: var(--font-display); font-weight: 500; font-size: 1.18rem; cursor: pointer; }
.acc-q[aria-expanded="true"] { color: var(--accent); }
.acc-q__ico { width: 26px; height: 26px; flex: none; position: relative; }
.acc-q__ico::before, .acc-q__ico::after { content: ""; position: absolute; background: currentColor; }
.acc-q__ico::before { left: 50%; top: 4px; width: 2px; height: 18px; transform: translateX(-50%); }
.acc-q__ico::after { top: 50%; left: 4px; height: 2px; width: 18px; transform: translateY(-50%); }
.acc-q[aria-expanded="true"] .acc-q__ico::before { opacity: 0; }
.acc-a { overflow: hidden; max-height: 0; transition: max-height 340ms var(--ease); }
.acc-a__inner { padding: 0 4px 24px; color: var(--on-dark-muted); max-width: 62ch; }

/* ---- INDUSTRY industries accordion band (accordion + image card) ---- */
.indacc { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.indacc__list .acc-item { border-color: var(--line-dark); }
.indcard { position: relative; border-radius: 6px; overflow: hidden; min-height: 420px; }
.indcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.indcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(16,15,14,.92)); }
.indcard__body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 30px 32px; }
.indcard__body h3 { color: #fff; font-size: 1.5rem; margin: 0 0 10px; }
.indcard__body p { color: rgba(255,255,255,.82); font-size: .95rem; margin: 0 0 16px; }
.indcard__body .arrowlink { color: #fff; }
/* yellow corner tab on the industry image card (mirrors reference) */
.indcard::before { content: ""; position: absolute; top: 0; right: 0; z-index: 3; border-width: 0 40px 40px 0; border-style: solid; border-color: transparent var(--accent) transparent transparent; }

/* ---- INDUSTRY band-4 as a TAB list (yellow active bar, no inline text) ---- */
.indacc__list--tabs { display: grid; gap: 0; align-self: stretch; }
.indacc__list--tabs .acc-item { border: 0; border-bottom: 1px solid var(--line-dark); }
.indacc__list--tabs .acc-item:first-child { border-top: 1px solid var(--line-dark); }
.indacc__list--tabs .acc-q { padding: 24px 22px; font-size: 1.22rem; color: #fff; transition: background var(--t), color var(--t), padding var(--t); }
.indacc__list--tabs .acc-q[aria-expanded="true"] { background: var(--accent); color: var(--ink); }
.indacc__list--tabs .acc-q__arrow { display: inline-flex; flex: none; }
.indacc__list--tabs .acc-q__arrow svg { width: 20px; height: 20px; }
.indacc__list--tabs .acc-a { display: none; }

/* ---- INDUSTRY strategy band-6 (image left, checks + pill right) ---- */
.strat2 { display: grid; grid-template-columns: 1fr 1.12fr; gap: 60px; align-items: center; }
.strat2__media { border-radius: 6px; overflow: hidden; align-self: stretch; }
.strat2__media img { width: 100%; height: 100%; object-fit: cover; min-height: 430px; }
.strat2__body h2 { font-size: var(--fs-h2); margin: 16px 0 18px; max-width: 15ch; }
.strat2__lead { color: var(--muted); margin: 0 0 24px; max-width: 48ch; }
.strat2__checks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 30px; margin-bottom: 30px; }

/* ---- INDUSTRY counter cards (light-gray, 1px border, dark monoline icon) ---- */
.stats--cards .stat { background: #f5f5f5; border: 1px solid var(--line); border-radius: 10px; min-height: 0; padding: 30px 32px 28px; }
.section--off .stats--cards .stat { background: #f5f5f5; }
.stats--cards .stat__ico { color: var(--ink); }
.stats--cards .stat__num { margin-top: 14px; }
.stats--cards .stat__lbl { margin-top: 10px; }

/* ---- shared helpers added for INDUSTRY ---- */
.eyebrow--plain::before, .eyebrow--plain::after { display: none; }
.eyebrow--accent { color: var(--accent); }
.section--dark .eyebrow--accent { color: var(--accent); }
.btn--boxed { height: 52px; }
.checkrow--ring svg { border: 1.5px solid var(--line); color: var(--ink); border-radius: 50%; padding: 5px; width: 14px; height: 14px; box-sizing: content-box; background: transparent; }
.section--dark .checkrow--ring svg { border-color: var(--line-dark); color: #fff; }

/* ---- INDUSTRY welcome band (header + portrait photo + mission/vision/progress) ---- */
.iwelcome__head { max-width: 780px; margin: 0 0 var(--s7); }
.iwelcome__head h2 { font-size: var(--fs-h2); margin: 18px 0 0; max-width: 22ch; }
.iwelcome__head h2 em { color: var(--accent-deep); font-style: normal; }
.iwelcome { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 58px; align-items: stretch; }
.iwelcome__media { border-radius: 8px; overflow: hidden; }
.iwelcome__media img { width: 100%; height: 100%; object-fit: cover; min-height: 540px; }
.iwelcome__body h3 { font-size: 1.5rem; margin: 0 0 12px; }
.iwelcome__body > p { color: var(--muted); margin: 0 0 24px; max-width: 56ch; }
.iwelcome__checks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 30px; margin-bottom: 34px; }
.iwelcome__vision { margin-top: 6px; }
.iwelcome .progs { margin-top: 22px; gap: 24px; }

/* ---- INDUSTRY smart-solutions tabs on LIGHT band ---- */
.section--off .indacc__list--tabs .acc-item { border-color: var(--line); }
.section--off .indacc__list--tabs .acc-item:first-child { border-top-color: var(--line); }
.section--off .indacc__list--tabs .acc-q { color: var(--ink); }
.section--off .indacc__list--tabs .acc-q[aria-expanded="true"] { background: var(--accent); color: var(--ink); }

/* ---- INDUSTRY projects slider: LIGHT variant (no tabs + progress bar) ---- */
.projslider--light .rarrow { border-color: var(--line); color: var(--ink); }
.projslider--light .rarrow:hover { background: var(--accent); border-color: var(--accent); }
.projslider__prog { width: 230px; height: 3px; background: var(--line); border-radius: 2px; margin: 36px auto 0; overflow: hidden; }
.projslider__prog span { display: block; height: 100%; background: var(--accent); width: 25%; transition: width 420ms var(--ease); }

/* ---- INDUSTRY FAQ aside as photo card ---- */
.faq2__aside--photo { position: relative; padding: 0; border-radius: 10px; overflow: hidden; min-height: 430px; align-self: stretch; display: block; }
.faq2__aside--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.faq2__aside--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 38%, rgba(16,15,14,.92)); }
.faq2__badge { position: absolute; top: 22px; left: 22px; z-index: 3; width: 56px; height: 56px; }
.faq2__badge svg { width: 56px; height: 56px; }
.faq2__aside-ov { position: absolute; inset: auto 0 0 0; z-index: 3; padding: 30px 30px; }
.faq2__aside-ov h3 { color: #fff; font-size: 1.4rem; margin: 0 0 16px; line-height: 1.28; }
.faq2__aside-ov .arrowlink { color: var(--accent); }

/* ---- INDUSTRY collab map (own-art SVG world) ---- */
.collab__mapwrap--map { background: #dfe6e9; }
.collab__mapsvg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.collab__mapsvg .land { fill: #b7c6cc; }
.collab__mapsvg .dot { fill: #7f97a0; }
.collab__pin { position: absolute; left: 30%; top: 46%; z-index: 2; transform: translate(-50%,-100%); }
.collab__pin svg { width: 30px; height: 40px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }

/* ---- INDUSTRY footer variant (bottom subscribe row + social under company) ---- */
.footer--industry .footer__cols { padding-top: 56px; padding-bottom: 44px; }
.footer__col--brand .brand { margin-bottom: 20px; }
.footer--industry .footer__social { justify-content: flex-start; margin-top: 24px; }
.footer__subrow { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; background: #262628; border-radius: 10px; padding: 26px 40px; }
.footer__subrow h4 { color: #fff; font-size: 1.55rem; margin: 0; }
.footer__subrow .footer__newsform { margin: 0; }
.footer--industry .footer__bottom { margin-top: 4px; }
.footer__policy { display: flex; gap: 26px; }
.footer__policy a:hover { color: var(--accent); }

/* ---- shared: dark "industries we serve" grid (thumb rows) ---- */
.indgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
.indgrid__rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.indrow { display: flex; align-items: center; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line-dark); }
.indrow__thumb { width: 58px; height: 46px; border-radius: 4px; object-fit: cover; flex: none; }
.indrow__ico { color: var(--accent); flex: none; }
.indrow__ico svg { width: 22px; height: 22px; }
.indrow span { color: #fff; font-family: var(--font-display); font-weight: 500; font-size: 1.08rem; flex: 1; }
.indrow a { color: var(--on-dark-muted); display: inline-flex; }
.indrow a svg { width: 18px; height: 18px; }
.indrow a:hover { color: var(--accent); }

/* ---- MODERN numbered service list (image + 01-05 rows) ---- */
.numsvc { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.numsvc__media { border-radius: 6px; overflow: hidden; align-self: stretch; }
.numsvc__media img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }
.numsvc__list { display: grid; }
.numrow { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; padding: 22px 26px; border: 1px solid var(--line-dark); border-bottom: 0; color: #fff; }
.numrow:last-child { border-bottom: 1px solid var(--line-dark); }
.numrow__n { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; opacity: .7; }
.numrow__t { font-family: var(--font-display); font-weight: 500; font-size: 1.22rem; }
.numrow__a { color: currentColor; display: inline-flex; }
.numrow__a svg { width: 18px; height: 18px; }
.numrow--on { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.numrow--on .numrow__n { opacity: 1; }

/* ---- CIVIL 6-cell service grid with ghost numbers ---- */
.svc6 { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); }
.svc6__cell { padding: 38px 40px; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); display: grid; grid-template-columns: 1fr auto; gap: 10px 18px; align-items: start; }
.svc6__ico { grid-column: 1; color: var(--accent); }
.svc6__ico svg { width: 34px; height: 34px; }
.svc6__n { grid-row: 1 / span 3; grid-column: 2; font-family: var(--font-display); font-weight: 600; font-size: 3.4rem; line-height: .8; color: transparent; -webkit-text-stroke: 1.4px rgba(245,197,24,.38); align-self: center; }
.svc6__cell h3 { grid-column: 1; color: #fff; font-size: 1.32rem; margin: 8px 0 0; }
.svc6__cell p { grid-column: 1; color: var(--on-dark-muted); font-size: .94rem; margin: 0; max-width: 40ch; }

/* ---- shared: strategy two-col (heading/checks + yellow stat box) ---- */
.strategy { display: grid; grid-template-columns: 1.25fr 1fr; gap: 54px; align-items: center; }
.strategy h2 { font-size: var(--fs-h2); margin: 18px 0 20px; max-width: 14ch; }
.strategy > div:first-child > p { color: var(--muted); margin: 0 0 24px; max-width: 46ch; }
.strategy__checks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 30px; margin-bottom: 28px; }
.strategy__stat { background: var(--accent); color: var(--ink); padding: 48px 44px; border-radius: 6px; text-align: center; }
.strategy__stat b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 3.2rem; line-height: 1; }
.strategy__stat span { display: block; font-weight: 600; margin: 10px 0 22px; }

/* ---- INDUSTRY: process-over-photo band ---- */
.procphoto { position: relative; padding: 90px 0; }
.procphoto__bg { position: absolute; inset: 0; z-index: 0; }
.procphoto__bg img { width: 100%; height: 100%; object-fit: cover; }
.procphoto::after { content: ""; position: absolute; inset: 0; background: rgba(16,15,14,.78); z-index: 1; }
.procphoto .wrap { position: relative; z-index: 2; }
.procphoto__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.procphoto__cell { position: relative; text-align: center; padding: 20px 26px; }
.procphoto__num { position: absolute; top: -10px; right: 14px; font-family: var(--font-display); font-weight: 600; font-size: 4.4rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.16); }
.procphoto__tok { width: 74px; height: 74px; border-radius: 14px; background: var(--dark); display: grid; place-items: center; margin: 0 auto 22px; }
.procphoto__tok svg { width: 34px; height: 34px; color: var(--accent); }
.procphoto__cell h3 { color: #fff; font-size: 1.35rem; margin: 0 0 12px; }
.procphoto__cell p { color: rgba(255,255,255,.78); font-size: .95rem; margin: 0 auto; max-width: 34ch; }

/* ---- CIVIL: yellow strategy strip (worker + badge) ---- */
.ystrip { background: var(--accent); position: relative; overflow: hidden; }
.ystrip .wrap { min-height: 200px; display: flex; align-items: center; gap: 34px; padding-left: 300px; }
.ystrip__photo { position: absolute; left: max(28px, calc((100vw - 1300px)/2)); bottom: 0; width: 250px; }
.ystrip__photo img { width: 100%; display: block; }
.ystrip__badge { width: 118px; height: 118px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; color: var(--ink); flex: none; position: relative; }
.ystrip__badge svg { width: 30px; height: 30px; }
.ystrip__badge span { position: absolute; inset: 0; }
.ystrip__badge span svg { width: 118px; height: 118px; animation: spin 16s linear infinite; }
.ystrip__txt .eyebrow { color: var(--ink); }
.ystrip__txt h2 { color: var(--ink); font-size: 1.7rem; margin: 6px 0 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- shared: dark "welcome/since" band (photo+badge + text+progress) ---- */
.welc { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.welc__media { position: relative; border-radius: 6px; overflow: hidden; }
.welc__media img { width: 100%; aspect-ratio: 4/3.4; object-fit: cover; display: block; }
.welc__badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 128px; height: 128px; border-radius: 50%; background: rgba(20,20,22,.55); display: grid; place-items: center; color: var(--accent); }
.welc__badge svg { width: 40px; height: 40px; }
.welc__prog .prog__track { background: var(--line-dark); }
.welc__prog .prog__fill { background: var(--accent); }
.welc h2 { font-size: var(--fs-h2); margin: 18px 0 20px; max-width: 16ch; }
.welc__body > p { color: var(--on-dark-muted); margin: 0 0 22px; }

/* ---- FAQ two-col (accordion + small join card) ---- */
.faq2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 54px; align-items: start; }
.faq2__head { margin-bottom: 26px; }
.faq2__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; align-self: center; }
.faq2__aside .brand__mark, .faq2__aside > svg { width: 48px; height: 48px; }
.faq2__aside h3 { color: #fff; font-size: 1.5rem; margin: 6px 0 6px; line-height: 1.2; }
.faq2__aside .arrowlink { color: var(--accent); }

/* ---- variant responsive ---- */
@media (max-width: 1080px) {
  .feat-quad { grid-template-columns: 1fr 1fr; }
  .indacc, .indgrid, .numsvc, .strategy, .strat2, .welc, .faq2, .iwelcome { grid-template-columns: 1fr; gap: 40px; }
  .iwelcome__media img { min-height: 360px; }
  .svc6 { grid-template-columns: 1fr; }
  .procphoto__row { grid-template-columns: 1fr; }
  .procphoto__cell { padding: 24px 0; }
  .hero-partners__row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .herol .wrap { grid-template-columns: 1fr; }
  .herol--modern .wrap { padding: 70px 0 90px; }
  .mhero__media { min-height: 380px; }
  .svc-slidecard { position: static; width: 100%; margin-top: 26px; }
  .scrollcue { display: none; }
  .herol--civil .herol__copy { padding-bottom: 40px; }
  .chero__media { min-height: 360px; }
  .chero__photo img { object-position: bottom center; }
  .hero-partners { margin-top: 0; }
  .ystrip .wrap { padding-left: 28px; flex-wrap: wrap; }
  .ystrip__photo { display: none; }
  .strategy__checks, .strat2__checks, .indgrid__rows { grid-template-columns: 1fr; }
  .iwelcome__checks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .feat-quad { grid-template-columns: 1fr; }
  .hero-partners__row { grid-template-columns: 1fr; }
  .iwelcome__checks { grid-template-columns: 1fr; }
  .footer__subrow { grid-template-columns: 1fr; gap: 18px; text-align: center; }
  .footer__subrow .footer__newsform { min-width: 0; }
  .footer--industry .footer__social { justify-content: center; }
  .svc-slidecard { grid-template-columns: 1fr; }
  .numrow { grid-template-columns: auto 1fr; }
  .numrow__a { grid-column: 1 / -1; }
  .procphoto__cell { padding: 20px 0; }
}