/* =============================================================
   312 Masonry — design system
   One file. Tokens → reset → base → layout → components.
   Warm Neutral + Clay · Clean modern SaaS · Inter only.
   ============================================================= */

/* ----- 1. Fonts (brand: Bebas Neue headlines + Montserrat body) ----- */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ----- 2. Tokens ----- */
:root{
  /* color — 312 Masonry brand palette */
  --bg:#FFFFFF;
  --surface:#EAF3FB;          /* light skyline-blue tint (no gray) */
  --surface-2:#DCEBF8;        /* slightly deeper sky tint */
  --ink:#1A1A1A;
  --muted:#5F6672;
  --line:#E2E4E9;
  --accent:#D71920;           /* Chicago Red */
  --accent-ink:#A5121A;
  --blue:#1E3A8A;             /* Deep Blue */
  --blue-ink:#152A66;
  --sky:#8CC9F2;              /* Skyline Blue */
  --success:#2E7D5B;
  --error:#C0392B;

  /* type */
  --font:'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display:'Bebas Neue', 'Montserrat', system-ui, sans-serif;

  /* space scale (4·8·12·16·24·32·48·64·96) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* layout */
  --container:1400px;
  --radius:10px;
  --radius-sm:6px;

  /* shadows — only on interactive */
  --shadow-sm:0 1px 2px rgba(20, 20, 20, .05);
  --shadow-md:0 6px 24px rgba(20, 20, 20, .08);

  /* motion */
  --t:150ms;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ----- 3. Reset (minimal modern) ----- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video, picture { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ----- 4. Typography ----- */
h1, h2, h3, h4 {
  font-family: var(--font);
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
}
/* Display headlines: Bebas Neue, uppercase, tall & condensed (brand) */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.95;
}
h1 { font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5rem); }
h2 { font-size: clamp(2rem, 1.4rem + 2.8vw, 3.25rem); }
h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; }
h4 { font-size: 1rem; font-weight: 600; }
p  { color: var(--ink); max-width: 65ch; }
p + p { margin-top: var(--s4); }

.lede { font-size: clamp(1.0625rem, .95rem + .5vw, 1.25rem); color: var(--muted); max-width: 60ch; line-height: 1.55; }
.answer-first {
  font-size: clamp(1rem, .95rem + .25vw, 1.0625rem);
  line-height: 1.6;
  color: var(--ink);
  max-width: 65ch;
  margin-top: var(--s5);
}
.eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.muted { color: var(--muted); }

a.link {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t) var(--ease), text-decoration-thickness var(--t) var(--ease);
}
a.link:hover { color: var(--blue-ink); text-decoration-thickness: 2px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: auto;
  background: var(--ink); color: #fff;
  padding: var(--s2) var(--s4);
  border-radius: var(--radius-sm);
  font-weight: 600;
  z-index: 200;
}
.skip-link:focus { left: var(--s4); top: var(--s4); }

/* ----- 5. Layout primitives ----- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s5);
}
@media (min-width: 768px) {
  .container { padding-inline: var(--s6); }
}

.section { padding-block: var(--s8); }
@media (min-width: 768px) { .section { padding-block: var(--s9); } }
.section--surface  { background: var(--surface); }
.section--surface2 { background: var(--surface-2); }
.section--tight    { padding-block: var(--s7); }

.section__head { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s5); max-width: 60ch; }

.grid { display: grid; gap: var(--s5); }
@media (min-width: 640px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) { .grid--5 { grid-template-columns: repeat(5, 1fr); } }

.stack { display: flex; flex-direction: column; gap: var(--s4); }
.row   { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* ----- 6. Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  height: 44px;
  padding-inline: var(--s5);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t) var(--ease),
              color      var(--t) var(--ease),
              border     var(--t) var(--ease),
              box-shadow var(--t) var(--ease),
              transform  var(--t) var(--ease);
}
.btn:focus-visible { outline-offset: 3px; }

.btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); box-shadow: var(--shadow-md); }

.btn--ghost   { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }

.btn--lg { height: 52px; padding-inline: var(--s6); font-size: 1rem; }

.btn__icon { width: 18px; height: 18px; flex: none; }

/* ----- 6b. Check list (what's included on service pillars) ----- */
.check-list { display: flex; flex-direction: column; gap: var(--s3); padding: 0; list-style: none; }
.check-list--cols { display: grid; gap: var(--s3); }
@media (min-width: 640px) { .check-list--cols { grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s6); } }
.check-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  color: var(--ink);
  line-height: 1.55;
}
.check-list__icon {
  width: 18px; height: 18px;
  color: var(--accent);
  flex: none;
  margin-top: 3px;
}

/* ----- 6c. Callout (used on commercial / facade pages) ----- */
.callout {
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--s5) var(--s6);
}
.callout > * + * { margin-top: var(--s3); }
.callout h3 { font-size: 1.0625rem; }
.callout p  { color: var(--muted); max-width: 65ch; }

/* ----- 7. Header ----- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.site-header--scrolled {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  min-height: 64px;
}
.brand {
  font-family: var(--font);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}
.brand__dot { color: inherit; }
/* 80px, not 58: the client's logo file carries baked-in whitespace, so the
   artwork inside only fills about half the box. */
.brand img { display: block; height: 80px; width: auto; }
@media (max-width: 560px) { .brand img { height: clamp(36px, 11vw, 46px); } }
.nowrap { white-space: nowrap; }

.nav {
  display: none;
  align-items: center;
  gap: var(--s5);
}
.nav__link {
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--ink);
  padding: var(--s2) 0;
  position: relative;
  transition: color var(--t) var(--ease);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t) var(--ease);
}
.nav__link:hover { color: var(--accent); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--accent); }

.header__cta { display: flex; align-items: center; gap: var(--s2); }
.header__phone {
  display: none;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--ink);
  transition: color var(--t) var(--ease);
}
.header__phone:hover { color: var(--accent); }
.header__phone-strong { display: inline-flex; align-items: center; }
.header__phone-icon { width: 20px; height: 20px; flex: none; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: border-color var(--t) var(--ease);
}
.nav-toggle:hover { border-color: var(--ink); }
.nav-toggle__icon { width: 18px; height: 18px; }

@media (min-width: 900px) {
  .nav { display: flex; }
  .header__phone { display: inline-flex; align-items: center; gap: var(--s2); }
  .nav-toggle { display: none; }
}

/* mobile nav drawer */
.nav--mobile {
  display: none;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s4) var(--s5) var(--s6);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.nav--mobile.is-open {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 45;              /* under the sticky header (50) so the hamburger stays clickable */
  padding: 82px var(--s5) var(--s6);   /* clear the header at the top */
  overflow-y: auto;
  background: var(--bg);
  border-bottom: 0;
  justify-content: flex-start;
}
.nav--mobile .nav__link {
  width: 100%;
  text-align: left;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
}
.nav--mobile .nav__link::after { display: none; }
.nav--mobile .nav__link:last-of-type { border-bottom: 0; }
.nav--mobile .btn { margin-top: var(--s3); align-self: flex-start; }
@media (min-width: 900px) { .nav--mobile { display: none !important; } }

/* ----- 8. Footer ----- */
.site-footer {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  padding-block: var(--s8) var(--s5);
  color: var(--ink);
}
.site-footer__grid {
  display: grid;
  gap: var(--s7);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px)  { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; } }

.site-footer__col h3 {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: var(--s4);
}
.site-footer__col ul { display: flex; flex-direction: column; gap: var(--s2); }
.site-footer__col a { color: var(--ink); transition: color var(--t) var(--ease); font-size: 0.9375rem; }
.site-footer__col a:hover { color: var(--accent); }

.site-footer__brand p { color: var(--muted); margin-top: var(--s3); font-size: 0.9375rem; }
.site-footer__lic { display: inline-block; margin-top: var(--s4); font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.site-footer__nap { display: flex; flex-direction: column; gap: var(--s2); font-size: 0.9375rem; }
.site-footer__nap-strong { font-weight: 600; }

.site-footer__legal {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s3);
  color: var(--muted);
  font-size: 0.8125rem;
}

/* ----- 9. Hero (type-driven, no media) ----- */
.hero { padding-block: clamp(var(--s8), 10vw, var(--s9)) var(--s8); position: relative; }
.hero__inner { max-width: 880px; }
.hero__art { display: none; }
@media (min-width: 1140px) {
  .hero:not(.hero--media) .hero__inner { max-width: calc(100% - clamp(300px, 26vw, 400px) - var(--s7)); }
  .hero__art {
    display: block;
    position: absolute;
    top: 50%;
    right: max(var(--s6), calc(50vw - (var(--container) / 2) + var(--s6)));
    transform: translateY(-50%);
    width: clamp(300px, 26vw, 400px);
    height: auto;
    color: var(--line);
    pointer-events: none;
  }
}
.hero h1 { margin-top: var(--s4); }
.hero .lede { margin-top: var(--s5); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.hero__meta {
  margin-top: var(--s5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s5);
  list-style: none;
  padding: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero__meta li { display: inline-flex; align-items: center; gap: var(--s5); }
.hero__meta li:not(:first-child)::before {
  content: '';
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--line);
  display: inline-block;
}

/* ----- 10. Trust band ----- */
.trust-band {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: var(--s5);
}
.trust-band__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* justify-content: center; */
  gap: var(--s4) var(--s6);
  color: var(--muted);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.trust-band__item { display: inline-flex; align-items: center; gap: var(--s2); }
.trust-band__check { width: 14px; height: 14px; color: var(--accent); flex: none; }

/* ----- 11. Cards (service, area, generic) ----- */
.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s6);
  transition: border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.card__title { font-size: 1.125rem; margin-bottom: var(--s2); }
.card__body  { color: var(--muted); font-size: 0.9375rem; line-height: 1.55; }
.card__link  {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin-top: var(--s4);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--accent);
  transition: gap var(--t) var(--ease);
}
.card__link:hover { color: var(--accent-ink); gap: var(--s3); }
.card__arrow { width: 14px; height: 14px; transition: transform var(--t) var(--ease); }

.service-card .card__eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s3);
  font-variant-numeric: tabular-nums;
}

.area-card .card__title { font-size: 1rem; }
.area-card .card__zip   {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  margin-top: var(--s1);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* ----- 12. Why-us (mini feature trio) ----- */
.why-card { padding: 0; border: 0; background: transparent; }
.why-card:hover { box-shadow: none; transform: none; }
.why-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: var(--s3);
  font-variant-numeric: tabular-nums;
}
.why-card__num::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--accent);
  margin-right: var(--s2);
}
.why-card h3 { margin-bottom: var(--s2); }
.why-card p  { color: var(--muted); font-size: 0.9375rem; }

/* ----- 13. Process steps ----- */
.process { counter-reset: step; display: grid; gap: var(--s5); }
@media (min-width: 768px) { .process { grid-template-columns: repeat(4, 1fr); gap: var(--s5); } }
.process__step {
  counter-increment: step;
  position: relative;
  padding-top: var(--s6);
}
.process__step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0; left: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.process__step::after {
  content: '';
  position: absolute;
  top: 8px; left: 36px; right: 0;
  height: 1px;
  background: var(--line);
}
@media (max-width: 767px) { .process__step::after { display: none; } }
.process__step:last-child::after { display: none; }
.process__step h3 { font-size: 1rem; margin-bottom: var(--s2); }
.process__step p  { color: var(--muted); font-size: 0.9375rem; }

/* ----- 14. Testimonial ----- */
.testimonial {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.testimonial__quote {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
}
.testimonial__quote::before {
  content: '“';
  display: block;
  font-size: 2.5rem;
  line-height: 0.6;
  color: var(--accent);
  margin-bottom: var(--s3);
  font-weight: 700;
}
.testimonial__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line); }
.testimonial__author { font-weight: 600; font-size: 0.9375rem; }
.testimonial__role   { color: var(--muted); font-size: 0.8125rem; }
.testimonial__stars { color: var(--accent); font-size: 0.95rem; letter-spacing: 2px; line-height: 1; }
.testimonial__source {
  margin-left: auto;
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}
.testimonial__source:hover { border-color: var(--accent); color: var(--accent); }
/* Reviews wall — CSS masonry for uneven review cards */
.reviews-wall { columns: 2; column-gap: var(--s5); }
.reviews-wall > .testimonial { break-inside: avoid; margin: 0 0 var(--s5); }
@media (max-width: 560px) { .reviews-wall { columns: 1; } }
/* Review photos */
.testimonial__photos { display: flex; flex-wrap: wrap; gap: var(--s2); }
.testimonial__photo { display: block; line-height: 0; }
.testimonial__photo img {
  width: 84px; height: 84px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  transition: transform 0.15s, border-color 0.15s;
}
.testimonial__photo:hover img { transform: scale(1.04); border-color: var(--accent); }

/* ----- 14b. Static map (area pages) ----- */
.map {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
}
.map img {
  display: block;
  width: 100%;
  height: auto;
}
.map iframe {
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
}

/* ----- 14c. Inline SVG diagrams (guides) ----- */
.diagram {
  display: block;
  width: 100%;
  height: auto;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.diagram--surface { background: var(--surface); }

/* ----- 14d. Glossary (definition list / DefinedTermSet) ----- */
.glossary {
  display: flex;
  flex-direction: column;
  gap: var(--s6);
  margin: 0;
}
.glossary dt {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: var(--s2);
}
.glossary dd {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 65ch;
  margin: 0;
}
.glossary__see {
  display: inline-block;
  margin-top: var(--s2);
  font-size: 0.875rem;
}

/* ----- 14e. Numbered list (inline narratives, glossary, guides) ----- */
.list-numbered {
  list-style: decimal;
  padding-left: var(--s5);
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.list-numbered li::marker { color: var(--accent); font-weight: 600; }

/* ----- 15. Before / After ----- */
.before-after {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 640px) { .before-after { grid-template-columns: 1fr 1fr; } }
.before-after__frame {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
}
.before-after__frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.before-after__caption {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.875rem;
  padding-top: var(--s2);
}

/* ----- 16. FAQ (details/summary) ----- */
.faq { display: flex; flex-direction: column; }
.faq__item {
  border-top: 1px solid var(--line);
  padding-block: var(--s4);
}
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ink);
  padding-block: var(--s2);
  transition: color var(--t) var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent); }
.faq__icon {
  width: 18px; height: 18px; flex: none;
  transition: transform var(--t) var(--ease);
  color: var(--muted);
}
.faq__item[open] .faq__icon { transform: rotate(45deg); color: var(--accent); }
.faq__a {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  padding-top: var(--s3);
  max-width: 70ch;
}

/* ----- 17. Cost table (P0 minimal — full styles in T5) ----- */
.cost-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.cost-table th, .cost-table td { text-align: left; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.cost-table th { font-weight: 600; color: var(--muted); font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; }
.cost-table td { font-variant-numeric: tabular-nums; }

/* ----- 18. CTA band ----- */
.cta-band { background: var(--surface-2); padding-block: var(--s8); text-align: center; }
.cta-band__inner { max-width: 720px; margin: 0 auto; }
.cta-band h2 { margin-bottom: var(--s4); }
.cta-band p { color: var(--muted); margin: 0 auto var(--s6); }
.cta-band__cta { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); }

/* ----- 19. Breadcrumb (used from P1+) ----- */
.breadcrumb {
  padding-block: var(--s5);
  font-size: 0.8125rem;
  color: var(--muted);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.breadcrumb li:not(:last-child)::after { content: '/'; margin-left: var(--s2); color: var(--line); }
.breadcrumb a { color: var(--muted); transition: color var(--t) var(--ease); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb [aria-current="page"] { color: var(--ink); }

/* ----- 20. Form (used from P1+) ----- */
.form { display: grid; gap: var(--s4); }
.form__row { display: grid; gap: var(--s4); }
@media (min-width: 640px) { .form__row--split { grid-template-columns: 1fr 1fr; } }
.form__field { display: flex; flex-direction: column; gap: var(--s2); }
.form__label { font-weight: 600; font-size: 0.875rem; }
.form__input, .form__textarea, .form__select {
  font: inherit;
  padding: var(--s3) var(--s4);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.form__input:focus, .form__textarea:focus, .form__select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(180, 80, 46, 0.15);
}
.form__textarea { min-height: 140px; resize: vertical; }
.form__hint { color: var(--muted); font-size: 0.8125rem; }
.form__error { color: var(--error); font-size: 0.8125rem; }

/* ----- 21. Reveal on scroll ----- */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ----- 22. Page-specific small helpers ----- */
.text-center { text-align: center; }
.mt-s4 { margin-top: var(--s4); }
.mt-s5 { margin-top: var(--s5); }
.mt-s6 { margin-top: var(--s6); }
.mt-s7 { margin-top: var(--s7); }
.text-sm { font-size: 0.875rem; }
.container--narrow { max-width: 880px; }
.stack--gap-7 { display: flex; flex-direction: column; gap: var(--s7); }
.area-card--more { border-style: dashed; }

/* ----- 14c. Projects ----- */
.project-video { margin: var(--s5) 0; }
.project-video video { width: 100%; height: auto; border-radius: var(--radius); display: block; background: #1a1a1a; }
.project-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s2); }
.project-gallery__item { display: block; line-height: 0; position: relative; }
.project-gallery__item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); transition: transform 0.15s, border-color 0.15s; }
.project-gallery__item:hover img { transform: scale(1.03); border-color: var(--accent); }
.project-gallery__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(20, 16, 14, .55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.project-gallery__play svg { width: 15px; height: 15px; margin-left: 2px; }
.project-card { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow 0.15s, transform 0.15s; }
.project-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.project-card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.project-card__body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); }
.project-card__tags { display: flex; flex-wrap: wrap; gap: var(--s2); }
.project-card__tag { font-size: 0.75rem; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
.project-card__more { color: var(--accent); font-weight: 600; font-size: 0.9rem; margin-top: auto; }

.hero--flush { padding-bottom: var(--s6); }

/* ----- 23. Project hero media (project detail pages only) ----- */
.hero--media .hero__grid { display: grid; gap: var(--s6); }
@media (min-width: 900px) {
  .hero--media .hero__grid { grid-template-columns: 1fr clamp(280px, 30vw, 400px); align-items: center; gap: var(--s7); }
}
.hero__media { max-width: 420px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.hero__media img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; }

/* ----- 24. Project highlights (large labels) ----- */
.project-highlights { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
@media (min-width: 640px)  { .project-highlights { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .project-highlights { grid-template-columns: repeat(3, 1fr); } }
.project-highlights__item {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--ink);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.project-highlights__item:hover { border-color: var(--accent); transform: translateY(-1px); }
.project-highlights__icon { flex: none; width: 22px; height: 22px; color: var(--accent); }
.project-description p { max-width: none; }

/* ----- 25. Lightbox (project gallery) ----- */
body.no-scroll { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: rgba(20, 16, 14, .92);
  padding: var(--s6);
}
.lightbox.is-open { display: flex; }
.lightbox__img, .lightbox__video { max-width: min(1100px, 90vw); max-height: 85vh; width: auto; height: auto; border-radius: var(--radius); display: block; }
.lightbox__img[hidden], .lightbox__video[hidden] { display: none; }
.lightbox__close, .lightbox__arrow {
  position: absolute; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.lightbox__close:hover, .lightbox__arrow:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .5); }
.lightbox__close svg, .lightbox__arrow svg { width: 20px; height: 20px; }
.lightbox__close { top: var(--s5); right: var(--s5); }
.lightbox__arrow--prev { left: var(--s5); top: 50%; transform: translateY(-50%); }
.lightbox__arrow--next { right: var(--s5); top: 50%; transform: translateY(-50%); }
.lightbox__count {
  position: absolute; bottom: var(--s5); left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, .8); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .lightbox__arrow--prev { left: var(--s3); }
  .lightbox__arrow--next { right: var(--s3); }
  .lightbox__close { top: var(--s3); right: var(--s3); }
}

/* ----- 26. Related services slider (Swiper — vendored, project pages only) ----- */
.related-slider { position: relative; }
.related-slider__swiper { overflow: hidden; }
.related-slider__swiper .swiper-slide { height: auto; display: flex; }
.related-slider__swiper .swiper-slide .card { width: 100%; }
.related-slider__controls { display: flex; align-items: center; justify-content: center; gap: var(--s5); margin-top: var(--s6); }
.related-slider__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.related-slider__arrow svg { width: 18px; height: 18px; }
.related-slider__arrow:hover { border-color: var(--accent); color: var(--accent); }
.related-slider__arrow.swiper-button-disabled { opacity: .35; pointer-events: none; }
.related-slider__dots.swiper-pagination { position: static; display: inline-flex; align-items: center; gap: var(--s2); width: auto; }
.related-slider__dots .swiper-pagination-bullet {
  width: 7px; height: 7px; margin: 0 !important; border-radius: 999px; background: var(--line); opacity: 1;
  transition: background var(--t) var(--ease), width var(--t) var(--ease);
}
.related-slider__dots .swiper-pagination-bullet-active { background: var(--accent); width: 20px; }

/* =============================================================
   27. DESIGN ENHANCEMENT LAYER
   Pure-CSS polish appended on top of the optimized base.
   No new fonts, images, or JS — zero added network weight.
   Overrides via the cascade; safe to remove as one block.
   ============================================================= */
:root{
  --grad-accent:linear-gradient(135deg,#E23B42 0%,#D71920 55%,#A5121A 100%);
  --ink-deep:#0B1B34;
  --ink-deep-2:#14264D;
  --shadow-lg:0 24px 60px -20px rgba(30,18,12,.35);
  --shadow-card:0 2px 4px rgba(20,20,20,.03),0 12px 30px -14px rgba(30,18,12,.16);
  --ring-accent:rgba(215,25,32,.14);
  --te:cubic-bezier(.16,.84,.28,1);
}

/* ----- Eyebrow: editorial lead line ----- */
.eyebrow{ display:inline-flex; align-items:center; gap:var(--s3); }
.eyebrow::before{
  content:''; width:22px; height:2px; border-radius:2px;
  background:var(--grad-accent); flex:none;
}
/* keep centered eyebrows tidy inside the dark CTA / centered heads */
.cta-band .eyebrow{ justify-content:center; }

/* ----- Section head: subtle emphasis ----- */
.section__head h2{ position:relative; }
.section__head .lede{ margin-top:var(--s2); }

/* ----- Buttons: dimensional primary + refined ghost ----- */
.btn{ transition:background var(--t) var(--ease),color var(--t) var(--ease),
      border-color var(--t) var(--ease),box-shadow var(--t) var(--te),
      transform var(--t) var(--te); }
.btn--primary{
  background:var(--grad-accent); border-color:transparent;
  box-shadow:0 1px 2px rgba(30,18,12,.18),0 8px 20px -10px rgba(215,25,32,.5);
}
.btn--primary:hover{
  background:var(--grad-accent); filter:brightness(1.04);
  transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(30,18,12,.2),0 16px 34px -12px rgba(215,25,32,.55);
}
.btn--primary:active{ transform:translateY(0); }
.btn--ghost{ background:var(--bg); }
.btn--ghost:hover{ border-color:var(--ink); background:var(--surface); transform:translateY(-1px); }

/* ----- Header: refined scrolled state with translucency ----- */
@supports (backdrop-filter:blur(8px)){
  .site-header{ background:rgba(255,255,255,.72); backdrop-filter:saturate(1.4) blur(10px); }
}
.site-header--scrolled{ box-shadow:0 1px 0 var(--line),0 6px 24px -18px rgba(30,18,12,.4); }

/* ----- Hero: layered depth + entrance ----- */
.hero{ overflow:hidden; }
.hero::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(58% 55% at 88% 26%, rgba(215,25,32,.10), transparent 62%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 58%);
}
.hero__art{ color:var(--line); }
img.hero__art{ height:auto; filter:drop-shadow(0 34px 46px rgba(30,18,12,.24)); }
@media (min-width:1140px){
  img.hero__art{ width:clamp(320px, 27vw, 440px); }
  /* Only narrow the copy column when a brick image is actually present
     (homepage). Heroes without the art get their full width back. */
  .hero:not(.hero--media) .hero__inner{ max-width:none; }
  .hero:has(> img.hero__art):not(.hero--media) .hero__inner{
    max-width:calc(100% - clamp(320px, 27vw, 440px) - var(--s9));
  }
}
/* slightly smaller hero headline (homepage hero only) */
.hero h1{ font-size:clamp(1.9rem, 1.3rem + 2.6vw, 3.4rem); }
.hero__inner > *{ opacity:0; transform:translateY(14px); animation:heroIn .7s var(--te) forwards; }
.hero__inner > *:nth-child(1){ animation-delay:.02s; }
.hero__inner > *:nth-child(2){ animation-delay:.10s; }
.hero__inner > *:nth-child(3){ animation-delay:.18s; }
.hero__inner > *:nth-child(4){ animation-delay:.26s; }
.hero__inner > *:nth-child(5){ animation-delay:.34s; }
@keyframes heroIn{ to{ opacity:1; transform:none; } }
@media (min-width:1140px){
  .hero__art{ animation:heroFloat 9s ease-in-out infinite; }
}
@keyframes heroFloat{ 0%,100%{ transform:translateY(-50%); } 50%{ transform:translateY(calc(-50% - 12px)); } }

/* eyebrow as a soft chip inside the hero */
.hero .eyebrow{
  padding:6px 14px 6px 12px; border-radius:999px;
  background:rgba(215,25,32,.08); border:1px solid var(--ring-accent);
}

/* ----- Trust band: quiet credential chips ----- */
.trust-band{ background:linear-gradient(180deg,var(--surface),var(--bg)); }
.trust-band__item{ transition:color var(--t) var(--ease); }

/* ----- Cards: depth + accent reveal ----- */
.card{ position:relative; box-shadow:var(--shadow-card); overflow:hidden; }
.card::before{
  content:''; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--grad-accent); transform:scaleX(0); transform-origin:left;
  transition:transform 320ms var(--te);
}
.card:hover{ border-color:var(--line); box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.card:hover::before{ transform:scaleX(1); }
/* why-cards are borderless mini-features — no bar/lift */
.why-card{ box-shadow:none; }
.why-card::before{ display:none; }
.area-card:hover .card__title{ color:var(--accent); }

/* service-card number becomes a quiet accent */
.service-card .card__eyebrow{ color:var(--accent); opacity:.85; }

/* ----- Process: connecting gradient rail ----- */
.process__step::after{ background:linear-gradient(90deg,var(--accent),transparent); }

/* ----- Testimonials: soft lift + warmer quote ----- */
.testimonial{ box-shadow:var(--shadow-card); transition:box-shadow var(--t) var(--te),transform var(--t) var(--te),border-color var(--t) var(--ease); }
.testimonial:hover{ box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.testimonial__quote::before{ background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ----- Before/After: nicer framing ----- */
.before-after__frame{ box-shadow:var(--shadow-card); transition:box-shadow var(--t) var(--te); }
.before-after:hover .before-after__frame{ box-shadow:var(--shadow-lg); }

/* ----- FAQ: rounded interactive rows ----- */
.faq__item{ border-radius:var(--radius); padding-inline:var(--s4); transition:background var(--t) var(--ease); }
.faq__item[open]{ background:var(--surface); }
.faq__item summary{ padding-block:var(--s3); }

/* =============================================================
   CTA BAND — cinematic dark block (biggest premium win)
   ============================================================= */
.cta-band{
  position:relative; overflow:hidden;
  background:radial-gradient(90% 130% at 100% 0%, var(--ink-deep-2), var(--ink-deep) 60%);
  color:#F5EFEA;
}
.cta-band::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(40% 60% at 88% 10%, rgba(215,25,32,.35), transparent 60%),
    radial-gradient(46% 70% at 6% 100%, rgba(215,25,32,.18), transparent 55%);
}
.cta-band::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 32px;
  -webkit-mask-image:radial-gradient(70% 80% at 50% 40%,#000,transparent 78%);
          mask-image:radial-gradient(70% 80% at 50% 40%,#000,transparent 78%);
}
.cta-band__inner{ position:relative; z-index:1; }
.cta-band h2{ color:#FFFFFF; }
.cta-band p{ color:rgba(245,239,234,.72); }
.cta-band .eyebrow{ color:#8CC9F2; }
.cta-band .eyebrow::before{ background:#8CC9F2; }
.cta-band .btn--ghost{
  background:rgba(255,255,255,.04); color:#F5EFEA; border-color:rgba(255,255,255,.24);
}
.cta-band .btn--ghost:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.5); }

/* ----- Footer: warm top accent hairline ----- */
.site-footer{ position:relative; }
.site-footer::before{
  content:''; position:absolute; top:-1px; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.5;
}

/* ----- Respect reduced motion for the new animations ----- */
@media (prefers-reduced-motion:reduce){
  .hero__inner > *{ opacity:1; transform:none; animation:none; }
  .hero__art{ animation:none; }
  .btn--primary:hover,.card:hover,.testimonial:hover,.btn--ghost:hover{ transform:none; }
}

/* =============================================================
   28. HOMEPAGE PREMIUM LAYOUTS
   Editorial/asymmetric section rebuilds. Pure CSS, zero weight.
   New BEM blocks — do not affect shared components on other pages.
   ============================================================= */

/* ----- Stat band (expressive: big accent numbers, accent tick, hover) ----- */
.stat-band{
  background:var(--bg);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.stat-band__grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line);
}
@media (min-width:768px){ .stat-band__grid{ grid-template-columns:repeat(4,1fr); } }
.stat-band__item{
  padding:var(--s7) var(--s5);
  background:var(--bg);
}
.stat-band__item::before{
  content:''; display:block;
  width:32px; height:3px; border-radius:2px;
  background:var(--grad-accent); margin-bottom:var(--s5);
  transition:width var(--t) var(--te);
}
.stat-band__item:hover::before{ width:56px; }
.stat-band__num{
  font-size:clamp(3.25rem, 2rem + 4.4vw, 5.5rem);
  font-weight:800; letter-spacing:-.045em; line-height:.9;
  color:var(--ink); font-variant-numeric:tabular-nums;
  display:flex; align-items:flex-start; gap:3px;
}
.stat-band__num sup{ font-size:.34em; top:.35em; font-weight:800; color:var(--accent); }
.stat-band__star{ color:var(--accent); font-size:.5em; margin-left:5px; align-self:center; }
.stat-band__label{
  margin-top:var(--s4); font-size:.75rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  line-height:1.5;
}

/* ----- Services as an editorial numbered list ----- */
.svc-list{ border-top:1px solid var(--line); margin-top:var(--s2); }
.svc-row{
  display:grid; grid-template-columns:auto 1fr; align-items:start;
  gap:var(--s3) var(--s5); padding:var(--s6) var(--s4);
  border-bottom:1px solid var(--line);
  position:relative; color:var(--ink);
  transition:background 300ms var(--te), padding 300ms var(--te);
}
.svc-row::after{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--grad-accent); transform:scaleY(0); transform-origin:top;
  transition:transform 320ms var(--te);
}
.svc-row:hover{ background:var(--surface); }
.svc-row:hover::after{ transform:scaleY(1); }
.svc-row__num{
  grid-row:1 / span 2;
  font-size:clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  font-weight:800; letter-spacing:-.03em; line-height:1;
  color:var(--accent); font-variant-numeric:tabular-nums;
  transition:color 300ms var(--te);
  min-width:2.4ch;
}
.svc-row:hover .svc-row__num{ color:var(--accent-ink); }
.svc-row__head{ display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--s3); }
.svc-row__title{
  font-size:clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  font-weight:700; letter-spacing:-.02em; line-height:1.1; color:var(--ink);
  transition:transform 300ms var(--te);
}
.svc-row:hover .svc-row__title{ transform:translateX(6px); }
.svc-row__tag{
  font-size:.6875rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:3px 10px;
  align-self:center;
}
.svc-row__desc{ color:var(--muted); font-size:1rem; line-height:1.55; max-width:60ch; margin-top:var(--s1); }
.svc-row__arrow{
  position:absolute; right:var(--s4); top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; flex:none;
  border:1px solid var(--line); color:var(--accent);
  display:none; align-items:center; justify-content:center;
  transition:background 260ms var(--te),border-color 260ms var(--te),transform 260ms var(--te);
}
.svc-row__arrow svg{ width:18px; height:18px; }
@media (min-width:768px){
  .svc-row{ grid-template-columns:auto 1fr; padding-right:calc(var(--s8) + var(--s4)); }
  .svc-row__arrow{ display:inline-flex; }
  .svc-row:hover .svc-row__arrow{ background:var(--grad-accent); border-color:transparent; color:#fff; transform:translateY(-50%) translateX(4px); }
}

/* ----- Pitch (why-us) split composition ----- */
.pitch{ display:grid; gap:var(--s7); }
@media (min-width:900px){
  .pitch{ grid-template-columns:1.05fr 1fr; gap:var(--s9); align-items:start; }
  .pitch__lead{ position:sticky; top:96px; }
}
.pitch__lead h2{ font-size:clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
.pitch__lead .lede{ margin-top:var(--s5); }
.pitch__points{ display:flex; flex-direction:column; }
.pitch__point{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s5);
  padding:var(--s6) 0; border-top:1px solid var(--line);
}
.pitch__point:last-child{ border-bottom:1px solid var(--line); }
.pitch__point-num{
  font-size:.8125rem; font-weight:700; letter-spacing:.08em;
  color:var(--accent); font-variant-numeric:tabular-nums; padding-top:5px;
}
.pitch__point-icon{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:46px; height:46px; border-radius:50%;
  background:rgba(215,25,32,.08); border:1px solid var(--ring-accent); color:var(--accent);
  transition:background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.pitch__point-icon svg{ width:23px; height:23px; }
.pitch__point:hover .pitch__point-icon{ background:var(--grad-accent); border-color:transparent; color:#fff; }
.pitch__point h3{ font-size:1.25rem; margin-bottom:var(--s2); }
.pitch__point p{ color:var(--muted); font-size:.9375rem; }

/* ----- Section head with right-aligned actions (reviews, etc.) ----- */
.head-actions{ display:flex; flex-direction:column; gap:var(--s5); margin-bottom:var(--s7); }
.head-actions .section__head{ margin-bottom:0; }
.head-actions__cta{ display:flex; flex-wrap:wrap; gap:var(--s3); flex:none; }
@media (min-width:768px){
  .head-actions{ flex-direction:row; align-items:flex-end; justify-content:space-between; gap:var(--s6); }
  .head-actions__cta{ padding-bottom:var(--s1); }
}

/* ----- Before / After: labeled, premium framing ----- */
.before-after__frame{ position:relative; }
.before-after__frame::after{
  content:''; position:absolute; inset:auto 0 0 0; height:40%; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(22,19,17,.28));
}
.before-after__tag{
  position:absolute; top:var(--s4); left:var(--s4); z-index:2;
  font-size:.6875rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; color:#fff;
  background:rgba(22,19,17,.66);
}
@supports (backdrop-filter:blur(4px)){ .before-after__tag{ backdrop-filter:blur(6px); } }
.before-after__tag--after{ background:var(--grad-accent); }
.before-after__frame img{ transition:transform 600ms var(--te); }
.before-after:hover .before-after__frame img{ transform:scale(1.05); }
@media (prefers-reduced-motion:reduce){ .before-after:hover .before-after__frame img{ transform:none; } }

/* ----- Process: clean 4-across row with big accent numbers (no cards) ----- */
.process{ display:grid; grid-template-columns:1fr; gap:var(--s6); }
@media (min-width:768px){ .process{ grid-template-columns:repeat(4,1fr); gap:var(--s6); } }
.process__step{
  display:block; position:relative;
  padding:var(--s5) 0 0;
  border:0; border-top:2px solid var(--line); border-radius:0;
  background:transparent;
  transition:border-color var(--t) var(--ease);
}
.process__step::before{
  content:counter(step, decimal-leading-zero);
  position:static; display:block; margin:0 0 var(--s4);
  font-size:clamp(2rem, 1.4rem + 1.4vw, 2.75rem);
  font-weight:800; letter-spacing:-.03em; line-height:1;
  color:var(--accent); font-variant-numeric:tabular-nums;
}
.process__step::after{ display:none !important; }
.process__step:hover{ border-top-color:var(--accent); }
.process__step-body{ max-width:none; }
.process__step h3{ font-size:1.0625rem; margin-bottom:var(--s2); }
.process__step p{ color:var(--muted); font-size:.9375rem; }

/* ----- Split section head (eyebrow+heading as left block; lede centered on it) ----- */
.split-head{ margin-bottom:var(--s5); }
.split-head__row{ display:flex; flex-direction:column; gap:var(--s4); }
.split-head__title{ display:flex; flex-direction:column; gap:var(--s3); }
.split-head .lede{ margin-top:0; font-size:0.9375rem; line-height:1.6; max-width:56ch; }
@media (min-width:900px){
  .split-head__row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s7); align-items:center; }
}

/* ----- Header spacing: taller bar + breathing room around phone/CTA ----- */
.site-header__inner{ min-height:78px; }
.header__cta{ gap:var(--s4); }
@media (min-width:900px){
  .header__phone{ margin-right:var(--s3); }
}

/* ----- Before/After comparison slider (drag the divider) ----- */
.ba-compare + .ba-compare{ margin-top:var(--s7); }
.ba-compare__frame{
  position:relative; container-type:inline-size;
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  aspect-ratio:21/9; background:var(--surface-2);
  box-shadow:var(--shadow-card); touch-action:pan-y; user-select:none;
}
.ba-compare__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ba-compare__before{ position:absolute; inset:0; width:var(--pos,50%); overflow:hidden; }
.ba-compare__before img{ position:absolute; inset:0; width:100cqw; max-width:none; height:100%; object-fit:cover; }
.ba-compare__divider{
  position:absolute; top:0; bottom:0; left:var(--pos,50%); width:2px;
  background:#fff; transform:translateX(-1px);
  box-shadow:0 0 0 1px rgba(20,16,14,.18); pointer-events:none; z-index:3;
}
.ba-compare__knob{
  position:absolute; top:50%; left:var(--pos,50%); transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%; background:#fff;
  box-shadow:var(--shadow-md); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; z-index:4;
}
.ba-compare__knob svg{ width:22px; height:22px; }
.ba-compare__range{
  position:absolute; inset:0; width:100%; height:100%; margin:0;
  opacity:0; cursor:ew-resize; z-index:5; touch-action:pan-y;
}
.ba-compare__range:focus-visible + .ba-compare__knob{ outline:2px solid var(--accent); outline-offset:3px; }
.ba-compare__tag{
  position:absolute; top:var(--s4); z-index:3;
  font-size:.6875rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; color:#fff; pointer-events:none;
}
@supports (backdrop-filter:blur(4px)){ .ba-compare__tag{ backdrop-filter:blur(6px); } }
.ba-compare__tag--before{ left:var(--s4); background:rgba(22,16,14,.62); }
.ba-compare__tag--after{ right:var(--s4); background:var(--grad-accent); }
.ba-compare__caption{ color:var(--muted); font-size:.875rem; padding-top:var(--s3); }

/* ----- Footer logo sizing ----- */
.site-footer__brand .brand img{ height:68px; width:auto; }

/* ----- Reviews slider (scroll-snap + dots + autoplay) ----- */
.rev-slider{ position:relative; }
.rev-slider__viewport{
  display:flex; gap:var(--s5);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
  padding-bottom:var(--s2);
}
.rev-slider__viewport::-webkit-scrollbar{ display:none; }
.rev-slider__viewport > .testimonial{ flex:0 0 100%; scroll-snap-align:start; }
@media (min-width:768px){
  .rev-slider__viewport > .testimonial{ flex-basis:calc(50% - var(--s5) / 2); }
}
.rev-slider__dots{ display:flex; justify-content:center; gap:var(--s2); margin-top:var(--s6); }
.rev-slider__dot{
  width:8px; height:8px; padding:0; border:0; border-radius:999px;
  background:var(--line); cursor:pointer;
  transition:background var(--t) var(--ease), width var(--t) var(--ease);
}
.rev-slider__dot:hover{ background:var(--muted); }
.rev-slider__dot.is-active{ background:var(--accent); width:22px; }

/* ----- Dark section variant (cinematic, reuses CTA-band look) -----
   NOTE: no overflow:hidden here — it would break position:sticky
   on inner blocks (e.g. .pitch__lead). Pseudo-glows are inset:0. */
.section--dark{
  position:relative;
  background:radial-gradient(90% 130% at 100% 0%, var(--ink-deep-2), var(--ink-deep) 60%);
  color:#F5EFEA;
}
.section--dark::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(40% 60% at 88% 6%, rgba(215,25,32,.30), transparent 60%),
    radial-gradient(46% 70% at 4% 100%, rgba(215,25,32,.16), transparent 55%);
}
.section--dark::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 32px;
  -webkit-mask-image:radial-gradient(80% 90% at 50% 30%,#000,transparent 82%);
          mask-image:radial-gradient(80% 90% at 50% 30%,#000,transparent 82%);
}
.section--dark > .container{ position:relative; z-index:1; }
.section--dark h2{ color:#FFFFFF; }
.section--dark .eyebrow{ color:#8CC9F2; }
.section--dark .eyebrow::before{ background:#8CC9F2; }
.section--dark .muted{ color:rgba(245,239,234,.66); }
.section--dark .btn--ghost{
  background:rgba(255,255,255,.05); color:#F5EFEA; border-color:rgba(255,255,255,.24);
}
.section--dark .btn--ghost:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.5); }
.section--dark .rev-slider__dot{ background:rgba(255,255,255,.28); }
.section--dark .rev-slider__dot:hover{ background:rgba(255,255,255,.5); }
.section--dark .rev-slider__dot.is-active{ background:var(--accent); }

/* ----- Dark section: text-on-dark blocks (pitch / split-head lede) ----- */
.section--dark .lede{ color:rgba(245,239,234,.72); }
.section--dark .pitch__point{ border-color:rgba(255,255,255,.12); }
.section--dark .pitch__point h3{ color:#F5EFEA; }
.section--dark .pitch__point p{ color:rgba(245,239,234,.6); }
.section--dark .pitch__point-icon{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); color:#8CC9F2;
}
.section--dark .pitch__point:hover .pitch__point-icon{ background:var(--grad-accent); border-color:transparent; color:#fff; }

/* ----- White footer ----- */
.site-footer{ background:var(--bg); }

/* ----- Breadcrumb → hero seamless blend (no hard seam) ----- */



/* ----- Hero with stats on the right (inner pages) ----- */
.hero--stats .hero__grid{ display:block; }
@media (min-width:900px){
  .hero--stats .hero__grid{
    display:grid; grid-template-columns:1fr clamp(300px, 36%, 430px);
    gap:var(--s8); align-items:center;
  }
}
.hero__stats{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  margin-top:var(--s7);
}
@media (min-width:900px){ .hero__stats{ margin-top:0; } }
.hero__stat{ background:var(--bg); padding:var(--s5); }
.hero__stat::before{
  content:''; display:block; width:28px; height:3px; border-radius:2px;
  background:var(--grad-accent); margin-bottom:var(--s4);
}
.hero__stat .stat-band__num{ font-size:clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem); }
.hero__stat .stat-band__label{ margin-top:var(--s3); font-size:.75rem; letter-spacing:.06em; }

/* ----- Dark-section service cards (outline style, not white boxes) ----- */
.section--dark .service-card{
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.1);
  box-shadow:none;
}
.section--dark .service-card:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.28);
  box-shadow:none;
  transform:translateY(-4px);
}
.section--dark .service-card .card__title{ color:#F5EFEA; }
.section--dark .service-card .card__body{ color:rgba(245,239,234,.6); }
.section--dark .service-card .card__eyebrow{ color:#8CC9F2; opacity:1; }
.section--dark .service-card .card__link{ color:#8CC9F2; }
.section--dark .service-card .card__link:hover{ color:#fff; }

/* ----- Breadcrumb now lives INSIDE the hero (on its warm background) ----- */
.hero > .breadcrumb{ background:transparent; padding-block:0; margin-bottom:var(--s7); position:relative; z-index:1; }
.hero:has(> .breadcrumb){ padding-top:var(--s5); }

/* ----- Premium coverage map ----- */
.map{
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  position:relative;
  background:var(--surface-2);
}
.map::after{
  content:''; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
}
.map iframe{ height:clamp(360px, 42vw, 540px); }
/* map caption: plain small link */
.map + p{ margin-top:var(--s4) !important; }

/* ----- Projects: tighter hero→grid gap + premium even cards ----- */
.hero--flush + .section{ padding-top:var(--s5); }
@media (min-width:768px){ .hero--flush + .section{ padding-top:var(--s6); } }

.project-card{ box-shadow:var(--shadow-card); }
.project-card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.project-card__media{ overflow:hidden; }
.project-card__media img{ transition:transform 500ms var(--te); }
.project-card:hover .project-card__media img{ transform:scale(1.05); }
.project-card__body{ gap:var(--s3); flex:1 1 auto; }
.project-card__more{ margin-top:auto; padding-top:var(--s3); }
.project-card__tags{ min-height:26px; }
.project-card__body h3{
  font-size:1.0625rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.project-card__body p{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  margin:0;
}
@media (prefers-reduced-motion:reduce){ .project-card:hover{ transform:none; } .project-card:hover .project-card__media img{ transform:none; } }

/* ----- Dark "Scope of work" check-list: items as subtle cards ----- */
.section--dark .check-list--cols{ gap:var(--s3) var(--s5); }
.section--dark .check-list__item{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius);
  padding:var(--s4) var(--s5);
  color:rgba(245,239,234,.82);
  transition:border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.section--dark .check-list__item:hover{ border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.06); }
.section--dark .check-list__icon{ color:#8CC9F2; }

/* ----- Compact premium project gallery (first 8 shown; rest via lightbox) ----- */
.project-gallery{
  grid-template-columns:repeat(2, 1fr);
  gap:var(--s3);
}
@media (min-width:640px){ .project-gallery{ grid-template-columns:repeat(4, 1fr); gap:var(--s4); } }
.project-gallery__item.is-hidden{ display:none; }
.project-gallery__item{
  border-radius:14px; overflow:hidden; position:relative;
  box-shadow:var(--shadow-card);
  transition:box-shadow var(--t) var(--te), transform var(--t) var(--te);
}
.project-gallery__item img{
  aspect-ratio:4/3; object-fit:cover; width:100%; height:100%;
  border:0; border-radius:0;
  transition:transform 600ms var(--te);
}
/* Load-more button under the gallery */
.gallery-more{ display:flex; justify-content:center; margin-top:var(--s6); }
.project-gallery__item::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, rgba(20,16,14,.42));
  opacity:0; transition:opacity var(--t) var(--ease);
}
.project-gallery__item:hover{ box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.project-gallery__item:hover img{ transform:scale(1.08); }
.project-gallery__item:hover::after{ opacity:1; }
/* bigger, clearer play badge on video items */
.project-gallery__play{ width:44px; height:44px; background:rgba(20,16,14,.6); }
@supports (backdrop-filter:blur(4px)){ .project-gallery__play{ backdrop-filter:blur(4px); } }
@media (prefers-reduced-motion:reduce){
  .project-gallery__item:hover{ transform:none; }
  .project-gallery__item:hover img{ transform:none; }
}

/* ----- Dark "Project highlights": outline cards ----- */
.section--dark .project-highlights__item{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.1);
  color:#F5EFEA;
}
.section--dark .project-highlights__item:hover{ border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.06); }
.section--dark .project-highlights__icon{ color:#8CC9F2; }

/* ----- Related-services slider cards: white, premium refined ----- */
.related-slider__swiper .card{
  background:var(--bg);
  border:1px solid var(--line);
}
.related-slider__swiper .card::before{ transform:scaleX(1); }
.related-slider__swiper .card:hover{
  border-color:var(--line);
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}
.related-slider__swiper .card .card__eyebrow,
.related-slider__swiper .card .service-card .card__eyebrow{ color:var(--accent); }
.related-slider__swiper .card__title{ font-size:1.1875rem; }

/* ----- Related slider: group all controls on the left ----- */
.related-slider__controls{ justify-content:flex-start; gap:var(--s4); }
.related-slider__dots.swiper-pagination{ position:static !important; width:auto !important; flex:0 0 auto !important; left:auto !important; }

/* ----- Related cards: pin "Explore" link to the bottom (aligned) ----- */
.related-slider__swiper .card{ display:flex; flex-direction:column; height:100%; }
.related-slider__swiper .card__link{ margin-top:auto; padding-top:var(--s4); }

/* ----- Footer column headings in accent ----- */
.site-footer__col h3{ color:var(--accent); }

/* ----- Hero with map on the right (area pages) ----- */
.hero--map .hero__grid{ display:block; }
@media (min-width:900px){
  .hero--map .hero__grid{ display:grid; grid-template-columns:1fr clamp(380px, 44%, 560px); gap:var(--s7); align-items:center; }
  .hero--map .hero__mapcol{ margin-top:0; }
}
.hero--map .hero__mapcol{ margin-top:var(--s6); }
.hero--map .map iframe{ height:clamp(300px, 32vw, 420px); }
.hero--map .hero__mapcol > p{ margin-top:var(--s3) !important; }

/* ----- Dark section: standalone headings (not card titles) go light ----- */
.section--dark h3:not(.card__title){ color:#F5EFEA; }

/* ----- Local context section: premium modern ----- */
.section--local .check-list--cols{ gap:var(--s3) var(--s5); margin-top:var(--s5); }
.section--local .check-list__item{
  display:block; position:relative;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s4) var(--s5) var(--s4) calc(var(--s5) + 26px); line-height:1.5;
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--te), transform var(--t) var(--te);
}
.section--local .check-list__item:hover{ border-color:var(--accent); box-shadow:var(--shadow-card); transform:translateY(-2px); }
.section--local .check-list__item strong{ color:var(--accent); font-weight:700; white-space:nowrap; }
.section--local .check-list__icon{ position:absolute; left:var(--s5); top:calc(var(--s4) + 4px); margin:0; }
.section--local h3{ font-size:1rem; letter-spacing:.02em; }
/* Anchors paragraph → callout */
.section--local h3.mt-s7 + p{
  background:var(--surface); border-left:3px solid var(--accent);
  border-radius:var(--radius-sm); padding:var(--s5) var(--s6);
  margin-top:var(--s4); color:var(--muted); max-width:none;
}

/* ----- Dark section: callout panel + accent list names ----- */
.section--dark .callout{ background:rgba(255,255,255,.04); border-left-color:var(--accent); }
.section--dark .callout h3{ color:#FFFFFF; }
.section--dark .callout p{ color:rgba(245,239,234,.7); }
.section--dark .check-list__item strong{ color:#8CC9F2; }

/* ----- Section heads: single-line headings on desktop ----- */
@media (min-width:900px){
  .section__head{ max-width:none; }
  .section__head h2{ text-wrap:nowrap; }
}

/* ----- Before/After carousel (scroll + bottom arrows) ----- */
.ba-carousel__viewport{
  display:flex; gap:var(--s5); overflow-x:auto;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
}
.ba-carousel__viewport::-webkit-scrollbar{ display:none; }
.ba-carousel__viewport > .ba-compare{ flex:0 0 100%; scroll-snap-align:start; margin:0 !important; }
.ba-carousel__controls{ display:flex; justify-content:center; gap:var(--s4); margin-top:var(--s6); }
.ba-carousel__arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; flex:none;
  border:1px solid var(--line); background:var(--bg); color:var(--ink); cursor:pointer;
  transition:border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.ba-carousel__arrow:hover{ border-color:var(--accent); color:var(--accent); }
.ba-carousel__arrow svg{ width:20px; height:20px; }
.ba-carousel__arrow:disabled{ opacity:.35; cursor:default; }

/* ----- Testimonial cards stay dark-text even inside dark sections ----- */
.testimonial{ color:var(--ink); }
.testimonial__author{ color:var(--ink); }

/* ----- Modern cost table ----- */
.cost-table{
  border-collapse:separate; border-spacing:0;
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow-card); font-size:1rem;
}
.cost-table th{
  background:var(--surface); color:var(--muted);
  padding:var(--s4) var(--s5); border-bottom:1px solid var(--line);
}
.cost-table td{ padding:var(--s4) var(--s5); border-bottom:1px solid var(--line); }
.cost-table tbody tr{ transition:background var(--t) var(--ease); }
.cost-table tbody tr:hover{ background:var(--surface); }
.cost-table tbody tr:last-child td{ border-bottom:0; }
.cost-table th:last-child, .cost-table td:last-child{ text-align:right; }
.cost-table td:last-child{ color:var(--accent); font-weight:700; white-space:nowrap; }
.cost-table td:first-child{ font-weight:500; }

/* ----- Cost-section intro paragraph spans full table width ----- */
.answer-first--wide{ max-width:none; }

/* ----- Dark cost table ----- */
.section--dark .answer-first{ color:rgba(245,239,234,.72); }
.section--dark .cost-table{ background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.12); box-shadow:none; }
.section--dark .cost-table th{ background:rgba(255,255,255,.05); color:rgba(245,239,234,.6); border-bottom-color:rgba(255,255,255,.14); }
.section--dark .cost-table td{ color:#F5EFEA; border-bottom-color:rgba(255,255,255,.1); }
.section--dark .cost-table tbody tr:hover{ background:rgba(255,255,255,.05); }
.section--dark .cost-table td:last-child{ color:#8CC9F2; }

/* ----- Cost intro paragraph spans full width (robust: header before a cost-table) ----- */
.section__head:has(+ .cost-table) .answer-first,
.section__head:has(+ .cost-table) p{ max-width:none; }

/* ----- Dark + local: factor cards as dark outline cards ----- */
.section--dark.section--local .check-list__item{
  background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1);
  color:rgba(245,239,234,.82);
}
.section--dark.section--local .check-list__item:hover{ border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.06); }

/* ----- Cost-table links: black by default, accent on hover ----- */
.cost-table a{ color:var(--ink); }
.cost-table a:hover{ color:var(--accent); }
.section--dark .cost-table a{ color:#F5EFEA; }
.section--dark .cost-table a:hover{ color:#8CC9F2; }

/* ----- Facade-ordinance cost section: white, premium (callout on white) ----- */
.facade-cost .callout{
  background:transparent;
  border-left:0;
  border-radius:0;
  padding:0;
}
.facade-cost .callout h3{ font-size:1.125rem; }
.facade-cost .callout > table + p,
.facade-cost .callout > p + h3,
.facade-cost .callout > table{ margin-top:var(--s5); }

/* ----- Facade-cost callout text spans full width ----- */
.facade-cost .callout p, .facade-cost .callout h3{ max-width:none; }

/* ----- Estimate process intro spans full width ----- */
.section__head:has(+ .process) .answer-first,
.section__head:has(+ .process) p{ max-width:none; }

/* ----- Trim trailing gap when a block ends with a ghost-button row ----- */
.section:has(> .container > .row:last-child .btn--ghost){ padding-bottom: var(--s6); }
.hero:has(> .container > .row:last-child .btn),
.hero:has(> .hero__inner .hero__actions:last-child){ padding-bottom: var(--s7); }

/* ----- Premium definition block ----- */
.def-grid{ display:flex; flex-direction:column; gap:var(--s7); }
.def-grid__lead .section__head{ margin-bottom:var(--s5); }
.def-points{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s4); }
.def-points__item{
  display:flex; align-items:flex-start; gap:var(--s4);
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:var(--s5) var(--s5) var(--s5) var(--s4);
  box-shadow:var(--shadow-card);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.def-points__item:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:rgba(215,25,32,.28); }
.def-points__icon{
  flex:0 0 auto; width:38px; height:38px; padding:9px; border-radius:11px;
  color:var(--accent); background:rgba(215,25,32,.10); box-sizing:border-box;
}
.def-points__item span{ align-self:center; font-weight:500; color:var(--ink); line-height:1.5; }
@media(min-width:960px){
  .def-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s9); align-items:start; }
  .def-grid__lead{ position:sticky; top:96px; }
}

/* ----- Premium scope list (dark) ----- */
.section--scope .split-head{ margin-bottom:var(--s7); }
.scope-list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s4); }
@media(min-width:820px){ .scope-list{ grid-template-columns:1fr 1fr; gap:var(--s4) var(--s5); } }
.scope-list__item{
  display:flex; align-items:flex-start; gap:var(--s4);
  padding:var(--s5);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  transition:transform .3s ease, background .3s ease, border-color .3s ease;
}
.scope-list__item:hover{ transform:translateY(-3px); background:rgba(255,255,255,.07); border-color:rgba(140,201,242,.40); }
.scope-list__icon{
  flex:0 0 auto; width:38px; height:38px; padding:9px; border-radius:11px; box-sizing:border-box;
  color:var(--accent-light, #8CC9F2); background:rgba(140,201,242,.14);
}
.scope-list__item span{ align-self:center; color:rgba(245,239,234,.78); line-height:1.55; }
.scope-list__item span strong{ color:#F5EFEA; font-weight:700; }

/* ----- Cost block (dark) modern polish ----- */
.section--costblock h3{ font-size:clamp(1.05rem,1.4vw,1.25rem); margin-bottom:var(--s2); }
@media(min-width:760px){ .section--costblock .check-list{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3) var(--s4); } }
.section--costblock .cost-table{ box-shadow:0 30px 60px -30px rgba(0,0,0,.6); }

/* ----- First cost section: tighter top, roomier bottom ----- */
.section--cost-first{ padding-top:var(--s6) !important; padding-bottom:var(--s9) !important; }

/* ----- Service areas grid (dark) ----- */
.section--areas .area-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  transition:transform .3s ease, background .3s ease, border-color .3s ease;
}
.section--areas .area-card:hover{ transform:translateY(-4px); background:rgba(255,255,255,.07); border-color:rgba(140,201,242,.40); }
.section--areas .area-card .card__title{ color:#F5EFEA; }
.section--areas .area-card .card__zip{ color:rgba(245,239,234,.55); }
.section--areas .area-card .card__body{ color:rgba(245,239,234,.72); }
.section--areas .area-card--more{ background:transparent; border-style:dashed; border-color:rgba(255,255,255,.20); }
.section--areas .area-card--more:hover{ border-color:rgba(140,201,242,.55); background:rgba(255,255,255,.03); }

/* ----- Building-stock cards: gap between eyebrow tag and title ----- */
.section--stock .card__eyebrow{ display:block; margin-bottom:var(--s3); }

/* ----- Service cards: gap between eyebrow tag and title ----- */
.service-card .card__eyebrow{ display:block; margin-bottom:var(--s3); }


/* ----- Facade Ordinance: premium single panel ----- */
.ordinance-panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:22px;
  padding:clamp(24px,3.5vw,48px);
  box-shadow:var(--shadow-card);
}
.ordinance-panel__intro{ max-width:68ch; }
.ordinance-panel__intro h3{ margin:0 0 var(--s3); font-size:clamp(1.05rem,1.5vw,1.3rem); }
.ordinance-panel__intro p{ margin:0; color:var(--muted); }
.ordinance-list{
  list-style:none; margin:var(--s6) 0 0; padding:var(--s6) 0 0;
  border-top:1px solid var(--line);
  display:grid; gap:var(--s5) var(--s7);
}
@media(min-width:760px){ .ordinance-list{ grid-template-columns:1fr 1fr; } }
.ordinance-list__item{ display:flex; align-items:flex-start; gap:var(--s3); }
.ordinance-list__check{
  flex:0 0 auto; width:26px; height:26px; margin-top:2px;
  display:grid; place-items:center; border-radius:8px;
  color:#fff; background:var(--accent);
  box-shadow:0 4px 10px -4px rgba(215,25,32,.6);
}
.ordinance-list__check svg{ width:15px; height:15px; }
.ordinance-list__item > span:last-child{ line-height:1.55; color:var(--ink); }
.ordinance-list__item strong{ font-weight:700; }

/* ----- FAQ on dark background ----- */
.section--dark .faq__item{ border-top-color:rgba(255,255,255,.12); }
.section--dark .faq__item:last-child{ border-bottom-color:rgba(255,255,255,.12); }
.section--dark .faq__item summary{ color:#F5EFEA; }
.section--dark .faq__item summary:hover{ color:var(--accent-light,#8CC9F2); }
.section--dark .faq__icon{ color:rgba(245,239,234,.55); }
.section--dark .faq__item[open]{ background:rgba(255,255,255,.04); }
.section--dark .faq__item[open] .faq__icon{ color:var(--accent-light,#8CC9F2); }
.section--dark .faq__a{ color:rgba(245,239,234,.72); }

/* ----- Reviews wall: premium masonry ----- */
.reviews-wall{ columns:3; column-gap:var(--s5); }
@media (max-width:1080px){ .reviews-wall{ columns:2; } }
@media (max-width:560px){ .reviews-wall{ columns:1; } }
.reviews-wall > .testimonial{
  position:relative; overflow:hidden;
  border-radius:20px;
  padding:clamp(22px,2vw,30px);
  border:1px solid var(--line);
  box-shadow:0 2px 4px rgba(20,19,17,.03);
  transition:transform .35s var(--te), box-shadow .35s var(--te), border-color .35s var(--ease);
}
.reviews-wall > .testimonial:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lift, 0 24px 48px -24px rgba(20,19,17,.28));
  border-color:rgba(215,25,32,.30);
}
/* faint watermark quote */
.reviews-wall > .testimonial::after{
  content:'\201D';
  position:absolute; top:6px; right:20px; z-index:0;
  font:700 5.5rem/1 Georgia, "Times New Roman", serif;
  color:rgba(215,25,32,.07); pointer-events:none;
}
.reviews-wall > .testimonial > *{ position:relative; z-index:1; }
.reviews-wall .testimonial__quote{ font-size:1.02rem; line-height:1.6; }
.reviews-wall .testimonial__source{ background:var(--surface); }
.reviews-wall .testimonial__source:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* ----- Reviews wall: 2-up grid + load more ----- */
.reviews-wall{ columns:auto; display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); align-items:stretch; }
@media (max-width:720px){ .reviews-wall{ grid-template-columns:1fr; } }
.reviews-wall > .testimonial{ margin:0; break-inside:auto; height:100%; }
.reviews-wall > .testimonial.is-hidden{ display:none; }
.reviews-more{ display:flex; justify-content:center; margin-top:var(--s7); }

/* ----- Reviews as a vertical list (override card look) ----- */
.reviews-wall{ display:block; columns:auto; }
.reviews-wall > .testimonial{
  display:grid; grid-template-columns:210px 1fr; gap:var(--s7);
  align-items:start;
  margin:0; padding:var(--s6) 0; height:auto;
  background:transparent; border:0; border-bottom:1px solid var(--line);
  border-radius:0; box-shadow:none; overflow:visible;
}
.reviews-wall > .testimonial:first-child{ padding-top:0; }
.reviews-wall > .testimonial:hover{ transform:none; box-shadow:none; border-color:var(--line); }
.reviews-wall > .testimonial::after{ display:none; }        /* remove watermark quote */
.testimonial__aside{ display:flex; flex-direction:column; gap:var(--s2); }
.testimonial__aside .testimonial__stars{ margin-bottom:var(--s1); }
.testimonial__aside .testimonial__author{ font-size:0.95rem; }
.testimonial__aside .testimonial__source{ margin:var(--s3) 0 0; align-self:flex-start; }
.testimonial__body{ display:flex; flex-direction:column; gap:var(--s4); }
.testimonial__body .testimonial__quote{ margin:0; }
.testimonial__body .testimonial__quote::before{ display:none; }  /* no big quote mark */
@media (max-width:640px){
  .reviews-wall > .testimonial{ grid-template-columns:1fr; gap:var(--s4); }
}

/* ----- Slider testimonials: no hover-lift (avoids clipping in viewport) ----- */
.rev-slider .testimonial:hover{ transform:none; box-shadow:var(--shadow-card); }

/* ----- Credentials (dark) premium spec grid ----- */
.section--creds .creds-intro{ max-width:60ch; margin:0 0 var(--s7); color:rgba(245,239,234,.8); }
.section--creds .creds-intro strong{ color:#F5EFEA; }
.creds-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
@media (max-width:820px){ .creds-grid{ grid-template-columns:1fr; } }
.creds-card{
  display:flex; flex-direction:column; gap:var(--s2);
  padding:var(--s5);
  border:1px solid rgba(255,255,255,.10); border-radius:16px;
  background:rgba(255,255,255,.04);
  transition:transform .3s var(--te), border-color .3s var(--ease), background .3s var(--ease);
}
.creds-card:hover{ transform:translateY(-3px); border-color:rgba(140,201,242,.40); background:rgba(255,255,255,.07); }
.creds-card__label{ font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-light,#8CC9F2); }
.creds-card__value{ color:rgba(245,239,234,.80); line-height:1.55; }
.creds-card--wide{ grid-column:1 / -1; }
@media (max-width:820px){ .creds-card--wide{ grid-column:auto; } }

/* ----- Contact block: premium form panel + direct cards ----- */
.section--contact .contact-card{
  background:var(--bg); border:1px solid var(--line); border-radius:22px;
  padding:clamp(24px,3vw,40px); box-shadow:var(--shadow-card);
}
.section--contact .form__input,
.section--contact .form__select,
.section--contact .form__textarea{
  border-radius:12px; border:1px solid var(--line); background:var(--surface);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.section--contact .form__input:focus,
.section--contact .form__select:focus,
.section--contact .form__textarea:focus{
  outline:none; border-color:var(--accent); background:var(--bg);
  box-shadow:0 0 0 3px rgba(215,25,32,.14);
}
/* Direct accent panel */
.contact-direct{
  display:flex; flex-direction:column; gap:var(--s1);
  padding:var(--s5) var(--s6); border-radius:18px;
  background:radial-gradient(120% 140% at 100% 0%, rgba(215,25,32,.14), rgba(215,25,32,.05) 70%);
  border:1px solid rgba(215,25,32,.20);
}
.contact-direct__label{ font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:var(--s2); }
.contact-direct__phone{ font-size:1.5rem; font-weight:800; color:var(--ink); text-decoration:none; letter-spacing:-.01em; }
.contact-direct__phone:hover{ color:var(--accent); }
.contact-direct__email{ color:var(--muted); text-decoration:none; }
.contact-direct__email:hover{ color:var(--accent); }
/* Direct info cards hover */
.section--contact aside .card{ transition:transform .3s var(--te), box-shadow .3s var(--te), border-color .3s var(--ease); }
.section--contact aside .card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift, 0 20px 40px -22px rgba(20,19,17,.22)); border-color:rgba(215,25,32,.22); }

/* ----- Contact grid: don't stretch the form panel to block height ----- */
.section--contact .grid--2{ align-items:start; }

/* ----- Contact: sticky form column, tops aligned with aside ----- */
@media (min-width:900px){
  .section--contact .grid--2 > .reveal:first-child{ position:sticky; top:96px; align-self:start; }
}

/* ----- Mobile: hide header CTA button (keep hamburger) ----- */
@media (max-width:899px){
  .site-header .header__cta .btn--primary{ display:none; }
}

/* ----- Mobile: kill horizontal overflow (fixes janky vertical scroll) ----- */
html, body{ overflow-x:clip; max-width:100%; }

/* ----- Mobile: hero buttons smaller and in one row ----- */
@media (max-width:560px){
  .hero__cta{ flex-wrap:nowrap; gap:var(--s2); }
  .hero__cta .btn{ flex:1 1 0; min-width:0; white-space:nowrap; }
  .hero__cta .btn--lg{ height:46px; padding-inline:var(--s3); font-size:.9rem; }
  .hero__cta .btn__icon{ width:17px; height:17px; }
}

/* ----- Mobile scroll performance ----- */
@media (max-width:768px){
  /* masked grid texture is GPU-expensive to repaint while scrolling — drop it on mobile */
  .section--dark::after{ display:none; }
  /* softer snap so horizontal sliders don't fight vertical page scroll */
  .rev-slider__viewport, .ba-carousel__viewport, .related-slider__swiper{ scroll-snap-type:x proximity; }
}

/* ----- Process: mobile horizontal slider with dots ----- */
.process-dots{ display:none; }
@media (max-width:768px){
  .process{
    display:flex; gap:0; overflow-x:auto; scroll-snap-type:x mandatory;
    scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
    grid-template-columns:none;
  }
  .process::-webkit-scrollbar{ display:none; }
  .process{ scrollbar-width:none; }
  .process__step{ flex:0 0 100%; width:100%; scroll-snap-align:start; padding-right:0; }
  .process-dots{ display:flex; justify-content:center; gap:8px; margin-top:var(--s5); }
  .process-dots__dot{
    width:8px; height:8px; padding:0; border:0; border-radius:99px;
    background:var(--line); cursor:pointer; transition:background .25s, width .25s;
  }
  .process-dots__dot.is-active{ background:var(--accent); width:22px; }
}

/* ----- Mobile: reviews head buttons smaller+row, shorter cards, smaller photos ----- */
@media (max-width:560px){
  .head-actions__cta{ flex-wrap:nowrap; gap:var(--s2); }
  .head-actions__cta .btn{ flex:1 1 0; min-width:0; white-space:nowrap; height:44px; padding-inline:var(--s3); font-size:.85rem; }
  .rev-slider__viewport{ align-items:stretch; }
  .rev-slider .testimonial{ padding:var(--s5); gap:var(--s3); }
  .rev-slider .testimonial__quote{ font-size:.95rem; line-height:1.5; }
  .testimonial__photo img{ width:56px; height:56px; }
}

/* ----- Grid -> mobile slider (Service areas etc.) ----- */
@media (max-width:768px){
  .grid--slider{
    display:flex; flex-direction:row; grid-template-columns:none; gap:0;
    overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
  }
  .grid--slider::-webkit-scrollbar{ display:none; }
  .grid--slider{ scrollbar-width:none; }
  .grid--slider > *{ flex:0 0 100%; width:100%; scroll-snap-align:start; }
}

/* ----- Mobile: all main CTA button pairs smaller and in one row ----- */
@media (max-width:560px){
  .hero__cta, .cta-band__cta, .head-actions__cta{ display:flex; flex-wrap:nowrap; gap:var(--s2); }
  .hero__cta > .btn, .cta-band__cta > .btn, .head-actions__cta > .btn{
    flex:1 1 0; min-width:0; white-space:nowrap;
    height:46px; padding-inline:var(--s3); font-size:.85rem;
  }
  .hero__cta > .btn .btn__icon{ width:17px; height:17px; }
}

/* ----- Stat-band slider (mobile): line under card, dots below the line ----- */
@media (max-width:768px){
  .stat-band__grid.grid--slider{ background:transparent; gap:0; border-bottom:1px solid var(--line); }
  .stat-band{ border-bottom:0; }
  .stat-band .process-dots{ margin-top:var(--s5); padding-bottom:var(--s6); }
}

/* ----- Mobile: long ghost link-buttons wrap instead of overflowing ----- */
@media (max-width:560px){
  .def-grid__lead .row{ width:100%; }
  .def-grid__lead .row .btn{ white-space:nowrap; max-width:100%; width:100%; text-align:center; padding-inline:var(--s3); font-size:clamp(.7rem,3.4vw,.85rem); }
}

/* ----- Cost table: compact & presentable on mobile ----- */
@media (max-width:560px){
  .cost-table{ font-size:.76rem; table-layout:fixed; width:100%; }
  .cost-table th, .cost-table td{ padding:9px 8px; line-height:1.3; word-break:break-word; vertical-align:middle; }
  .cost-table th{ font-size:.62rem; letter-spacing:.04em; }
  .cost-table td:last-child{ font-size:.76rem; white-space:normal; }
}

/* ----- Mobile: smaller eyebrow tags/chips site-wide ----- */
@media (max-width:560px){
  .eyebrow{ font-size:.68rem; letter-spacing:.07em; gap:var(--s2); }
  .eyebrow::before{ width:18px; }
  .hero .eyebrow{ padding:4px 11px 4px 9px; }
}

/* ----- Mobile: tighter gap between hero and first section ----- */
@media (max-width:560px){
  .hero{ padding-bottom:var(--s6) !important; }
  .hero + .section{ padding-top:var(--s6); }
}

/* ----- Area hero: map before text on mobile ----- */
@media (max-width:767px){
  .hero--map .hero__grid{ display:flex; flex-direction:column; }
  .hero--map .hero__mapcol{ order:-1; margin-top:0; margin-bottom:var(--s6); }
}

/* ----- Mobile misc fixes ----- */
@media (max-width:768px){
  /* related-services slider pagination centered */
  .related-slider__controls{ justify-content:center; }
}
@media (max-width:560px){
  /* breadcrumbs stay on one line (scroll if long) instead of wrapping */
  .breadcrumb ol{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .breadcrumb ol::-webkit-scrollbar{ display:none; }
  .breadcrumb li{ white-space:nowrap; }
  /* project card tags: 3 in a row */
  .project-card__tags{ flex-wrap:nowrap; gap:6px; overflow:hidden; }
  .project-card__tag{ white-space:nowrap; flex:0 1 auto; font-size:.68rem; padding:2px 8px; }
}

/* ----- Grid slider: prev/next arrows variant ----- */
.grid-arrows{ display:none; }
@media (max-width:768px){
  .grid-arrows{ display:flex; justify-content:center; gap:var(--s4); margin-top:var(--s6); }
  .grid-arrows__btn{
    width:44px; height:44px; border-radius:50%;
    border:1px solid var(--line); background:var(--bg); color:var(--ink);
    display:grid; place-items:center; cursor:pointer;
    transition:border-color .2s, color .2s, opacity .2s;
  }
  .grid-arrows__btn svg{ width:18px; height:18px; }
  .grid-arrows__btn:disabled{ opacity:.3; pointer-events:none; }
  .section--dark .grid-arrows__btn{ border-color:rgba(255,255,255,.25); background:transparent; color:#F5EFEA; }
}

/* ----- Mobile: smaller trailing gap after a ghost-button row ----- */
@media (max-width:560px){
  .section:has(> .container > .row:last-child .btn--ghost){ padding-bottom:var(--s5) !important; }
  .section:has(> .container > .row:last-child .btn--ghost) + .section{ padding-top:var(--s5); }
}

/* ----- Mobile: smaller ghost link-buttons in rows ----- */
@media (max-width:560px){
  .row .btn--ghost{ font-size:.8rem; padding:8px 14px; height:auto; min-height:0; }
}

/* ----- Mobile: reviews head buttons smaller + facade-cost gap ----- */
@media (max-width:560px){
  .head-actions__cta .btn{ font-size:clamp(.66rem,3vw,.8rem); padding-inline:var(--s2); white-space:nowrap; height:46px; }
  .facade-cost{ padding-bottom:var(--s5); }
  .facade-cost + .section{ padding-top:var(--s5); }
}

/* ----- Mobile: smaller gap between head-actions and slider cards ----- */
@media (max-width:560px){ .head-actions{ margin-bottom:var(--s5); } }

/* ----- Mobile: review source badge to the right of the author ----- */
@media (max-width:640px){
  .testimonial__aside{
    display:grid; grid-template-columns:1fr auto; column-gap:var(--s3);
    grid-template-areas:"stars stars" "author source" "role role";
    align-items:center;
  }
  .testimonial__aside .testimonial__stars{ grid-area:stars; }
  .testimonial__aside .testimonial__author{ grid-area:author; }
  .testimonial__aside .testimonial__role{ grid-area:role; }
  .testimonial__aside .testimonial__source{ grid-area:source; justify-self:end; align-self:center; margin:0; }
}

/* ----- Show hero brick on mobile/tablet (below the text), homepage only ----- */
@media (max-width:1139px){
  .hero:has(> img.hero__art){ display:flex; flex-direction:column; }
  .hero:has(> img.hero__art) > .container{ order:2; }
  .hero:has(> img.hero__art) > img.hero__art{
    order:1; display:block; position:static; transform:none;
    width:min(72%,300px); margin:0 auto var(--s6); animation:none;
  }
}

/* ----- Mobile: smaller hero top padding (esp. brick hero) ----- */
@media (max-width:560px){
  .hero:has(> img.hero__art){ padding-top:var(--s5); }
}

/* =============================================================
   29. BRAND HOMEPAGE (mockup-aligned) — red / deep-blue / sky
   ============================================================= */

/* Display numerals in Bebas Neue */
.stat-band__num, .svc-row__num,
.process__step::before, .hero__stat .stat-band__num,
.contact-direct__phone{
  font-family:var(--font-display); font-weight:400; letter-spacing:.01em;
}

/* ----- Hero: white left → photo right (fades into background) ----- */
.hero--photo{
  position:relative; overflow:hidden;
  min-height:clamp(500px, 72vh, 720px);
  display:flex; align-items:center;
  padding-block:var(--s8);
  background:var(--bg);
}
.hero--photo::before{ display:none; }
/* Photo pinned to the right, blended into the white background on its left edge */
.hero__photo{
  position:absolute; top:0; right:0; z-index:0;
  width:min(62%, 1160px); height:100%;
  object-fit:cover; object-position:60% 28%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 20%, #000 46%);
          mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 20%, #000 46%);
}
.hero--photo > .container{ position:relative; z-index:2; }
.hero--photo .hero__inner{ max-width:600px; }
.hero--photo .hero__title{
  margin-top:var(--s6);
  font-size:clamp(3rem, 1.9rem + 5.4vw, 6rem);
  line-height:.88; letter-spacing:.01em;
}
.hero__title-red{ color:var(--accent); }
.hero__title-sky{ color:var(--blue); }           /* Deep Blue */
.hero--photo .lede{ color:var(--muted); max-width:46ch; margin-top:var(--s5); }
@media (max-width:900px){
  .hero__photo{ width:74%; -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 26%,#000 58%); mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 26%,#000 58%); }
}
/* Mobile: photo becomes a banner above the copy (no side-fade) */
@media (max-width:640px){
  .hero--photo{ display:block; min-height:0; padding-block:0 var(--s7); }
  .hero__photo{
    position:relative; width:100%; height:clamp(220px,52vw,320px);
    object-position:64% 26%;
    -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
  }
  .hero--photo > .container{ margin-top:calc(-1 * var(--s5)); }
  .hero--photo .hero__inner{ max-width:none; }
  .hero--photo .hero__title{ font-size:clamp(2.6rem, 2rem + 6vw, 3.4rem); }
}

/* ----- Centered section head ----- */
.section__head--center{ align-items:center; text-align:center; margin-inline:auto; max-width:62ch; }
.section__head--center .eyebrow{ justify-content:center; }
@media (min-width:900px){ .section__head--center h2{ text-wrap:balance; } }

/* ----- Services: icon cards ----- */
.svc-grid{ display:grid; gap:var(--s5); grid-template-columns:1fr; margin-top:var(--s7); }
@media (min-width:560px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .svc-grid{ grid-template-columns:repeat(5,1fr); gap:var(--s4); } }
.svc-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s3);
  padding:var(--s6) var(--s5); background:var(--bg);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-card); color:var(--ink); position:relative; overflow:hidden;
  transition:transform .3s var(--te), box-shadow .3s var(--te), border-color .3s var(--ease);
}
.svc-card::before{
  content:''; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--grad-accent); transform:scaleX(0); transform-origin:left; transition:transform .32s var(--te);
}
.svc-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:transparent; }
.svc-card:hover::before{ transform:scaleX(1); }
.svc-card__ico{
  display:flex; align-items:center; justify-content:center;
  height:64px; margin-bottom:var(--s3);
  transition:transform .3s var(--te);
}
.svc-card__ico img{ width:60px; height:60px; object-fit:contain; display:block; }
.svc-card__ico img.svc-card__ico--wide{ width:80px; height:80px; }
.svc-card:hover .svc-card__ico{ transform:translateY(-2px) scale(1.04); }
.svc-card__title{ font-size:1.0625rem; color:var(--blue); letter-spacing:-.01em; }
.svc-card__desc{ color:var(--muted); font-size:.9rem; line-height:1.5; margin:0; }
.svc-card__link{
  margin-top:auto; padding-top:var(--s2); display:inline-flex; align-items:center; gap:6px;
  color:var(--accent); font-weight:700; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  transition:gap .2s var(--ease);
}
.svc-card__link svg{ width:14px; height:14px; }
.svc-card:hover .svc-card__link{ gap:10px; }

/* ----- Brand stat band ----- */
.stat-band--brand{ background:var(--surface); border-color:var(--line); }
.stat-band--brand .stat-band__grid{ background:var(--line); }
.stat-band--brand .stat-band__item{
  background:var(--surface); text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.stat-band--brand .stat-band__item::before{ display:none; }
.stat-band__ico{ width:38px; height:38px; color:var(--blue); opacity:.55; margin-bottom:var(--s4); }
.stat-band__ico svg{ width:100%; height:100%; }
.stat-band--brand .stat-band__num{
  color:var(--blue);
  font-size:clamp(2.1rem, 1.6rem + 1.4vw, 2.75rem);
  line-height:1;
}
.stat-band--brand .stat-band__num sup{ color:var(--accent); font-size:.38em; top:.2em; }
.stat-band--brand .stat-band__star{ color:var(--accent); }
.stat-band--brand .stat-band__num--sm{ font-size:clamp(1.6rem, 1.1rem + 1.4vw, 2.2rem); line-height:1; white-space:nowrap; }

/* ----- About + CTA ----- */
.about-cta{ padding-block:var(--s7); }
.about-cta__grid{ display:grid; gap:var(--s7); align-items:center; }
.about-cta__art img{ max-width:440px; }
@media (min-width:900px){ .about-cta__grid{ grid-template-columns:1.25fr .9fr; gap:var(--s8); align-items:center; } }
.about-cta__about h2{ color:var(--blue); margin:var(--s3) 0 var(--s4); }
.about-cta__about .btn{ margin-top:var(--s5); }
.about-cta__card{
  color:#fff; border-radius:20px; padding:clamp(26px,3vw,42px);
  background:radial-gradient(130% 150% at 100% 0%, var(--blue) 0%, var(--blue-ink) 100%);
  box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
}
.about-cta__card::after{
  content:''; position:absolute; right:-40px; bottom:-40px; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle, rgba(140,201,242,.25), transparent 70%); pointer-events:none;
}
.about-cta__card-ico{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.12); color:#fff; margin-bottom:var(--s4);
}
.about-cta__card-ico svg{ width:24px; height:24px; }
.about-cta__card h3{ color:#fff; font-size:1.375rem; position:relative; }
.about-cta__card p{ color:rgba(255,255,255,.82); margin-top:var(--s3); font-size:.95rem; position:relative; }
.about-cta__card-actions{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s5); position:relative; }
.about-cta__card .btn--ghost{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.38); }
.about-cta__card .btn--ghost:hover{ background:rgba(255,255,255,.16); border-color:#fff; }

/* ----- Trust strip (credentials band + skyline watermark) ----- */
.trust-strip{ position:relative; overflow:hidden; background:var(--surface); text-align:center; }
.trust-strip::before{
  content:''; position:absolute; left:50%; bottom:-2%; transform:translateX(-50%);
  width:min(1000px, 94%); aspect-ratio:1440/1080; z-index:0; pointer-events:none;
  background:url('/assets/img/about-skyline.png') center bottom / contain no-repeat;
  opacity:.09; mix-blend-mode:multiply;
}
.trust-strip > .container{ position:relative; z-index:1; }
.trust-strip__head{ display:flex; flex-direction:column; align-items:center; gap:var(--s3); margin-bottom:var(--s7); }
.trust-strip__head .eyebrow{ justify-content:center; }
.trust-strip__title{ color:var(--blue); }
.trust-strip__sub{ color:var(--muted); max-width:52ch; margin:0 auto; }
.trust-strip__list{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4);
  max-width:960px; margin-inline:auto;
}
@media (min-width:640px){ .trust-strip__list{ grid-template-columns:repeat(5,1fr); gap:var(--s5); } }
.trust-strip__item{
  display:flex; flex-direction:column; align-items:center; gap:var(--s3);
  padding:var(--s5) var(--s3);
  background:rgba(255,255,255,.72); border:1px solid var(--line); border-radius:var(--radius);
  color:var(--muted); font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; line-height:1.35;
  transition:transform .3s var(--te), box-shadow .3s var(--te), border-color .3s var(--ease);
}
@supports (backdrop-filter:blur(4px)){ .trust-strip__item{ backdrop-filter:blur(3px); } }
.trust-strip__item:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card); border-color:transparent; }
.trust-strip__item svg{
  width:30px; height:30px; color:var(--blue);
  padding:9px; box-sizing:content-box; border-radius:50%;
  background:rgba(30,58,138,.08);
}

/* ----- Blue footer (brand) ----- */
.site-footer{ background:var(--blue); color:rgba(255,255,255,.72); border-top:0; }
.site-footer::before{ background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.9; }
/* CTA band bottom and footer now share --ink-deep, so the join is seamless */
.cta-band{ background-color:var(--ink-deep); }
.site-footer__col h3{ color:var(--sky); }
.site-footer__col a{ color:rgba(255,255,255,.72); }
.site-footer__col a:hover{ color:#fff; }
.site-footer__brand p{ color:rgba(255,255,255,.6); }
.site-footer__lic{ color:rgba(255,255,255,.5); }
.site-footer__nap{ color:rgba(255,255,255,.72); }
.site-footer__nap-strong, .site-footer__nap a{ color:#fff; }
.site-footer__nap a:hover{ color:var(--sky); }
.site-footer__legal{ border-top-color:rgba(255,255,255,.16); color:rgba(255,255,255,.5); }

/* ----- About hero: skyline stretched as a right-side background ----- */
.hero--about{ position:relative; overflow:hidden; }
.hero--about__bg{ display:none; margin:0; }
@media (min-width:900px){
  .hero--about__bg{
    display:block; position:absolute; top:0; right:0; bottom:0; z-index:0;
    width:52%; pointer-events:none;
  }
  .hero--about__bg img{
    width:100%; height:100%; object-fit:cover; object-position:center;
    mix-blend-mode:multiply;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 22%, #000 50%);
            mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 22%, #000 50%);
  }
  .hero--about > .container{ position:relative; z-index:1; }
  .hero.hero--about .hero__inner{ max-width:600px; }
}

/* ----- Brand stat band: calm, understated, centered ----- */
.stat-band--brand{ background:var(--surface); }
.stat-band--brand .stat-band__grid{ background:transparent; }
.stat-band--brand .stat-band__item{
  flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:0; padding-block:var(--s7);
}
.stat-band--brand .stat-band__item + .stat-band__item{ box-shadow:-1px 0 0 var(--line); }
.stat-band__text{ display:flex; flex-direction:column; align-items:center; }
.stat-band--brand .stat-band__num{ font-weight:400; }
.stat-band--brand .stat-band__label{
  margin-top:var(--s3); font-size:.72rem; letter-spacing:.1em;
  color:var(--muted); font-weight:600; line-height:1.5; max-width:20ch;
}
@media (max-width:640px){
  .stat-band--brand .stat-band__item + .stat-band__item{ box-shadow:none; }
}

/* ===== Stat band — FINAL: slim light-blue strip, deep-blue numbers ===== */
.stat-band--brand{ background:#DCEBF8; border:0; }
.stat-band--brand .stat-band__grid{ background:transparent; gap:0; grid-template-columns:repeat(2,1fr); }
@media (min-width:768px){ .stat-band--brand .stat-band__grid{ grid-template-columns:repeat(4,1fr); } }
.stat-band--brand .stat-band__item{
  background:transparent; flex-direction:row; align-items:center; justify-content:center;
  gap:var(--s3); text-align:left; padding:var(--s5) var(--s4);
  box-shadow:none;
}
.stat-band--brand .stat-band__item + .stat-band__item{ box-shadow:inset 1px 0 0 rgba(30,58,138,.14); }
@media (max-width:767px){ .stat-band--brand .stat-band__item:nth-child(odd){ box-shadow:none; } .stat-band--brand .stat-band__item:nth-child(n+3){ box-shadow:inset 0 1px 0 rgba(30,58,138,.14); } }
.stat-band--brand .stat-band__ico{ width:34px; height:34px; color:var(--blue); opacity:.6; margin:0; flex:none; }
.stat-band--brand .stat-band__text{ display:flex; flex-direction:column; align-items:flex-start; }
.stat-band--brand .stat-band__num{
  color:var(--blue); font-size:clamp(1.85rem, 1.4rem + 1.2vw, 2.35rem);
  line-height:1; font-weight:400;
  display:inline-flex; align-items:center; gap:3px;
}
.stat-band--brand .stat-band__num--sm{ display:block; font-size:clamp(1.25rem, 1rem + 1vw, 1.6rem); line-height:1.1; white-space:normal; }
.stat-band--brand .stat-band__num sup{ color:var(--blue); font-size:.62em; font-weight:400; vertical-align:baseline; top:auto; margin:0; }
.stat-band--brand .stat-band__star{ color:var(--blue); }
.stat-band--brand .stat-band__label{ color:#4a5568; font-size:.68rem; letter-spacing:.08em; font-weight:600; margin-top:3px; max-width:none; }

/* ----- Project hero: photo stretched as right-side background ----- */
.hero--media{ position:relative; overflow:hidden; }
.hero--media .hero__grid{ display:block; }
.hero--media .hero__inner{ position:relative; z-index:1; }
@media (min-width:900px){
  .hero.hero--media .hero__inner{ max-width:600px; }
  .hero--media .hero__media{
    position:absolute; top:0; right:0; bottom:0; z-index:0;
    width:48%; max-width:none; margin:0; border:0; border-radius:0; overflow:hidden;
  }
  .hero--media .hero__media img{
    width:100%; height:100%; aspect-ratio:auto; object-fit:cover; object-position:center;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 22%, #000 50%);
            mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 22%, #000 50%);
  }
}
@media (max-width:899px){
  /* Mobile: image first, then copy — photo is a soft-faded banner (like the homepage hero) */
  .hero--media .hero__grid{ display:flex; flex-direction:column; }
  .hero--media .hero__media{
    order:-1; max-width:none; border:0; border-radius:0; overflow:hidden;
    width:100vw; margin:0 0 var(--s2); margin-left:50%; transform:translateX(-50%);
    -webkit-mask-image:linear-gradient(180deg, #000 64%, transparent 100%);
            mask-image:linear-gradient(180deg, #000 64%, transparent 100%);
  }
  .hero--media .hero__media img{ aspect-ratio:4 / 3; }
}

/* ----- Hero CTA on mobile: stack full-width (photo hero) ----- */
@media (max-width:560px){
  .hero--photo .hero__cta{ flex-direction:column; flex-wrap:wrap; align-items:stretch; gap:var(--s3); }
  .hero--photo .hero__cta .btn{ width:100%; flex:0 0 auto; height:52px; font-size:1rem; padding-inline:var(--s5); }
  .hero--photo .hero__cta .btn__icon{ width:18px; height:18px; }
}

/* ----- Stat band on mobile: JS slider (one centered stat per slide + dots) ----- */
@media (max-width:767px){
  /* keep the native grid--slider (flex + scroll-snap); each item is one slide */
  .stat-band--brand .stat-band__grid.grid--slider{ border-bottom:0; }
  .stat-band--brand .stat-band__item{
    flex-direction:column; align-items:center; justify-content:center;
    text-align:center; gap:var(--s1); box-shadow:none !important; padding:var(--s5) var(--s4);
  }
  .stat-band--brand .stat-band__ico{
    display:block; width:40px; height:40px; opacity:.6; margin:0 0 var(--s1);
  }
  .stat-band--brand .stat-band__text{ align-items:center; }
  .stat-band--brand .stat-band__num{ font-size:2.4rem; min-height:2.4rem; justify-content:center; }
  .stat-band--brand .stat-band__num--sm{ font-size:1.7rem; }
  .stat-band--brand .stat-band__label{ line-height:1.3; font-size:.72rem; margin-top:var(--s1); }
  /* dots visible + on-brand, tighter spacing */
  .stat-band--brand .process-dots{ display:flex !important; margin-top:var(--s3); padding-bottom:var(--s4); }
  .stat-band--brand .process-dots__dot{ background:rgba(30,58,138,.25); }
  .stat-band--brand .process-dots__dot.is-active{ background:var(--accent); }
}


/* ----- Partner programs (logo strip before footer) ----- */
.partners__grid{
  list-style:none; margin:var(--s7) auto 0; padding:0; max-width:920px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4);
}
@media (min-width:768px){ .partners__grid{ grid-template-columns:repeat(4,1fr); gap:var(--s5); } }
.partners__item{
  display:flex; align-items:center; justify-content:center; min-height:150px;
  padding:var(--s5); background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-card); transition:transform .3s var(--te), box-shadow .3s var(--te), border-color .3s var(--ease);
}
.partners__item:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:transparent; }
.partners__logo{ height:78px; width:auto; aspect-ratio:864 / 288; max-width:100%; object-fit:contain; }
.partners__item--ph{ border-style:dashed; box-shadow:none; background:transparent; }
.partners__item--ph:hover{ transform:none; box-shadow:none; border-color:var(--blue); }
.partners__item--ph span{ color:var(--muted); font-weight:700; font-size:1rem; letter-spacing:.01em; text-align:center; }

.partners__logo--seal{ height:112px; width:112px; aspect-ratio:1 / 1; }
.partners__logo--sbif{ height:auto; width:auto; max-height:70px; max-width:100%; aspect-ratio:2206 / 636; }

.partners__logo--wide{ height:auto; width:100%; max-width:220px; max-height:52px; aspect-ratio:3818 / 721; }

/* ----- Family of companies: 2-up grid ----- */
.partners__grid--2{ max-width:640px; grid-template-columns:repeat(2,1fr); }
@media (min-width:768px){ .partners__grid--2{ grid-template-columns:repeat(2,1fr); } }

/* ----- Footer: social icons + legal links (blue footer) ----- */
.site-footer__social{ display:flex; gap:var(--s3); margin-top:var(--s5); }
.site-footer__social-link{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.22);
  transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--te);
}
.site-footer__social-link:hover{ background:#fff; color:var(--blue); transform:translateY(-2px); }
.site-footer__social-link svg{ width:19px; height:19px; }
.site-footer__legal-links{ display:flex; gap:var(--s5); }
.site-footer__legal-links a{ color:rgba(255,255,255,.6); transition:color .2s var(--ease); }
.site-footer__legal-links a:hover{ color:#fff; }

/* ----- Stat band: raster icons (client-supplied) ----- */
.stat-band--brand .stat-band__ico{ width:auto; height:auto; opacity:1; flex:none; }
.stat-band--brand .stat-band__item{ gap:var(--s3); }
.stat-band--brand .stat-band__ico img{ width:54px; height:54px; max-width:none; object-fit:contain; display:block; margin:0; }
@media (max-width:767px){ .stat-band--brand .stat-band__ico img{ width:60px; height:60px; } }

/* ----- Services grid -> swiper slider (all sizes) with dots below ----- */
.svc-grid.grid--slider{
  display:flex; flex-direction:row; grid-template-columns:none; gap:var(--s5);
  overflow-x:auto; overflow-y:visible; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding:14px 4px 28px;   /* room so hover-lift + shadow aren't clipped */
}
.svc-grid.grid--slider::-webkit-scrollbar{ display:none; }
.svc-grid.grid--slider > .svc-card{ flex:0 0 100%; width:auto; scroll-snap-align:start; }
@media (min-width:560px){ .svc-grid.grid--slider > .svc-card{ flex-basis:calc((100% - var(--s5)) / 2); } }
@media (min-width:900px){ .svc-grid.grid--slider > .svc-card{ flex-basis:calc((100% - 2 * var(--s5)) / 3); } }
@media (min-width:1200px){ .svc-grid.grid--slider > .svc-card{ flex-basis:calc((100% - 3 * var(--s5)) / 4); } }

/* dots (styled for all viewports, since base dot styles are mobile-only) */
.svc-grid.grid--slider + .process-dots{ display:flex; justify-content:center; gap:9px; margin-top:var(--s5); }
.svc-grid.grid--slider + .process-dots .process-dots__dot{
  width:9px; height:9px; padding:0; border:0; border-radius:50%;
  background:rgba(30,58,138,.25); cursor:pointer;
  transition:background .25s var(--ease), width .25s var(--ease);
}
.svc-grid.grid--slider + .process-dots .process-dots__dot:hover{ background:rgba(30,58,138,.5); }
.svc-grid.grid--slider + .process-dots .process-dots__dot.is-active{ background:var(--accent); width:26px; border-radius:99px; }

/* ----- About: skyline illustration on the right (replaces CTA card) ----- */
.about-cta__art{ margin:0; display:flex; align-items:center; justify-content:center; }
.about-cta__art img{ width:100%; max-width:520px; height:auto; }
@media (max-width:899px){ .about-cta__art{ order:-1; } .about-cta__art img{ max-width:380px; margin-inline:auto; } }

/* ----- Project cards: title / type / location (mockup style) ----- */
.project-card__body{ gap:var(--s2); padding:var(--s5); display:flex; flex-direction:column; flex:1 1 auto; }
.project-card__title{
  font-size:1.05rem; line-height:1.3; color:var(--ink); margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.project-card__type{ color:var(--muted); font-size:.9rem; line-height:1.4; }
.project-card__loc{ display:flex; align-items:center; gap:6px; color:var(--muted); font-size:.85rem; margin-top:auto; padding-top:var(--s2); }
.project-card__loc svg{ width:15px; height:15px; color:var(--blue); flex:none; }
/* wider, clearly landscape image */
.project-card__media img{ aspect-ratio:3 / 2; }
/* tighter gap between heading and cards */
.recent-projects .head-actions{ margin-bottom:var(--s5); }

/* ----- Partners: clean logos only, name in tooltip on hover/tap ----- */
.partners__grid--logos{ display:flex; flex-wrap:nowrap; justify-content:space-around; align-items:center; gap:var(--s6); width:100%; margin:var(--s5) auto 0; }
@media (max-width:680px){ .partners__grid--logos{ flex-wrap:wrap; gap:var(--s6) var(--s5); } }

/* Partners: Swiper only on mobile — tooltips need overflow visible on desktop */
.partners-swiper{ overflow:visible; }
.partners-swiper__dots{ display:none; }
.partners-swiper .partners__grid--logos{ margin-top:var(--s5); }
/* Swiper is never initialized above 768px, so its base .swiper-slide{width:100%}
   would stretch each logo to the full row and push the rest off-screen. */
.partners-swiper:not(.swiper-initialized) .partners__grid--logos{ height:auto; }
.partners-swiper:not(.swiper-initialized) .partners__item{ flex:0 1 auto; width:auto; height:auto; }
@media (max-width:768px){
  /* When Swiper is active, keep slides in a single row and let it page */
  .partners-swiper.swiper-initialized{ overflow:hidden; }
  .partners-swiper.swiper-initialized .partners__grid--logos{ flex-wrap:nowrap; justify-content:flex-start; gap:0; margin-top:0; }
  .partners-swiper.swiper-initialized .partners__item{ flex:0 0 100%; width:100%; height:auto; display:flex; align-items:center; justify-content:center; }
  .partners-swiper__dots{ display:flex; justify-content:center; gap:8px; margin-top:var(--s5); position:static; }
  .partners-swiper__dots .swiper-pagination-bullet{ width:8px; height:8px; background:var(--line); opacity:1; transition:background .25s var(--ease), width .25s var(--ease); }
  .partners-swiper__dots .swiper-pagination-bullet-active{ background:var(--accent); width:22px; border-radius:99px; }
}
.partners__grid--logos .partners__item,
.partners__grid--icons .partners__item{ min-height:0; padding:0; background:none; border:0; box-shadow:none; }
.partners__grid--logos .partners__item:hover,
.partners__grid--icons .partners__item:hover{ transform:none; box-shadow:none; border-color:transparent; }
.partners__logobtn{ position:relative; display:flex; align-items:center; justify-content:center; background:none; border:0; padding:var(--s3); cursor:pointer; }
.partners__tip{
  position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(4px);
  background:var(--blue); color:#fff; font-size:.72rem; font-weight:600; letter-spacing:.02em; white-space:nowrap;
  padding:6px 12px; border-radius:8px; opacity:0; pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease); z-index:6; box-shadow:var(--shadow-md);
}
.partners__tip::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--blue); }
.partners__logobtn:hover .partners__tip,
.partners__logobtn:focus .partners__tip,
.partners__logobtn:focus-visible .partners__tip{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ----- Partners: credential icons row (label in tooltip) ----- */
.partners__grid--icons{ list-style:none; margin:var(--s7) auto var(--s7); padding:0; width:100%; display:flex; flex-wrap:wrap; justify-content:space-around; gap:var(--s5) var(--s6); }
.partners__iconbtn{
  position:relative; width:66px; height:66px; border-radius:50%; display:grid; place-items:center;
  color:var(--blue); background:rgba(30,58,138,.08); border:1px solid rgba(30,58,138,.14); cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--te);
}
.partners__iconbtn:hover{ background:var(--blue); color:#fff; transform:translateY(-3px); }
.partners__iconbtn svg{ width:28px; height:28px; }

/* ----- Partners section: tighter top spacing ----- */
.partners{ padding-top:var(--s6); }

/* ----- Service areas: swiper slider (3/view) + dots + pin icon ----- */
.areas-slider{
  display:flex; flex-direction:row; grid-template-columns:none; gap:var(--s5);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:6px 4px 24px;
}
.areas-slider::-webkit-scrollbar{ display:none; }
.areas-slider > .area-card{ flex:0 0 100%; scroll-snap-align:start; }
@media (min-width:560px){ .areas-slider > .area-card{ flex-basis:calc((100% - var(--s5)) / 2); } }
@media (min-width:900px){ .areas-slider > .area-card{ flex-basis:calc((100% - 2 * var(--s5)) / 3); } }
.areas-slider + .process-dots{ display:flex; justify-content:center; gap:9px; margin-top:var(--s5); }
.areas-slider + .process-dots .process-dots__dot{ width:9px; height:9px; padding:0; border:0; border-radius:50%; background:rgba(30,58,138,.25); cursor:pointer; transition:background .25s var(--ease), width .25s var(--ease); }
.areas-slider + .process-dots .process-dots__dot:hover{ background:rgba(30,58,138,.5); }
.areas-slider + .process-dots .process-dots__dot.is-active{ background:var(--accent); width:26px; border-radius:99px; }
.area-card .card__title{ display:flex; align-items:center; gap:8px; }
.area-card__pin{ width:16px; height:16px; flex:none; color:var(--blue); }

/* ----- Area card: location image (full-bleed top media) ----- */
.area-card{ display:flex; flex-direction:column; }
.area-card__media{ display:block; margin:calc(-1 * var(--s6)) calc(-1 * var(--s6)) var(--s5); overflow:hidden; }
.area-card__media img{ width:100%; aspect-ratio:16 / 10; object-fit:cover; display:block; transition:transform 500ms var(--te); }
.area-card:hover .area-card__media img{ transform:scale(1.04); }
@media (prefers-reduced-motion:reduce){ .area-card:hover .area-card__media img{ transform:none; } }

/* ----- Review source badge with Google/Yelp icon ----- */
.testimonial__source{ display:inline-flex; align-items:center; gap:6px; }
.testimonial__src-ico{ width:14px; height:14px; flex:none; }

/* ===== CTA band — light with skyline (brand mockup) ===== */
.cta-band{ background:var(--surface); background-color:var(--surface); color:var(--ink); position:relative; overflow:hidden; padding-block:var(--s9); }
.cta-band::before{ display:none !important; }
.cta-band::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:100%; height:100%; top:0; bottom:0; z-index:0; pointer-events:none; opacity:.14;
  background:url("/assets/img/cta-skyline.png") center bottom / contain no-repeat;
  -webkit-mask-image:none; mask-image:none;
}
.cta-band__inner{ position:relative; z-index:1; }
.cta-band h2{ color:var(--blue); }
.cta-band p{ color:var(--muted); }
.cta-band .eyebrow{ color:var(--accent); }
.cta-band .eyebrow::before{ background:var(--accent); }
.cta-band .btn--ghost{ background:transparent; color:var(--accent); border-color:var(--accent); }
.cta-band .btn--ghost:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* ----- Fix: footer social icons color (override col link hover) ----- */
.site-footer__brand .site-footer__social-link{ color:#fff; }
.site-footer__brand .site-footer__social-link:hover{ color:var(--blue); background:#fff; }

/* ----- Bigger tag -> heading spacing (global) ----- */
.section__head{ gap:var(--s4); }
/* Tighter head -> content gap on mobile */
@media (max-width:640px){
  .section__head{ margin-bottom:var(--s4); }
  .svc-grid{ margin-top:var(--s4); }
}
.split-head__title{ gap:var(--s4); }
.hero h1{ margin-top:var(--s5); }

/* ----- Contact hero: worker photo (like homepage) + social icons ----- */
.hero--contact .hero--about__bg img{ mix-blend-mode:normal; object-position:62% 30%; }
.hero__social{ display:flex; gap:var(--s3); margin-top:var(--s6); }
.hero__social-link{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  color:var(--blue); background:rgba(30,58,138,.08); border:1px solid rgba(30,58,138,.16);
  transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--te);
}
.hero__social-link:hover{ background:var(--blue); color:#fff; transform:translateY(-2px); }
.hero__social-link svg{ width:19px; height:19px; }


/* ----- Family of companies: rectangular logo image placeholders ----- */
.family__grid{ list-style:none; margin:var(--s7) auto 0; padding:0; max-width:1040px; display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); }
@media (min-width:768px){ .family__grid{ grid-template-columns:repeat(4,1fr); } }
.family__item{ margin:0; }
.family__ph{
  display:flex; align-items:center; justify-content:center; aspect-ratio:16 / 9;
  background:var(--bg); border:1px dashed var(--line); border-radius:var(--radius);
  color:var(--muted); transition:border-color .3s var(--ease), color .3s var(--ease); box-shadow:var(--shadow-card);
}
.family__item:hover .family__ph{ border-color:var(--blue); color:var(--blue); }
.family__ph svg{ width:54px; height:54px; opacity:.55; }

/* ----- Reviews hero: flat blue bg + city skyline fading in on the right ----- */
.hero--reviews{ background:var(--surface); }
.hero--reviews::before{ display:none !important; }
.hero--reviews .hero--about__bg{ display:none; }
@media (min-width:900px){
  .hero--reviews .hero--about__bg{ display:block; width:58%; }
  .hero--reviews .hero--about__bg img{
    object-fit:contain; object-position:center bottom; opacity:.45; mix-blend-mode:normal;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 24%, #000 56%);
            mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 24%, #000 56%);
  }
}

/* ----- Services page hero: About-style, larger bottom-right trowel photo ----- */
@media (min-width:900px){
  .hero--svc .hero--about__bg{ width:52%; }
  .hero--svc .hero--about__bg img{ object-position:right bottom; opacity:.6; }
}

/* ----- Guides library: card image + numeric pagination ----- */
.guide-card__img{ display:flex; align-items:center; justify-content:center; aspect-ratio:16 / 9; background:var(--surface); border-radius:var(--radius-sm); margin-bottom:var(--s4); color:var(--muted); overflow:hidden; }
.guide-card__img svg{ width:46px; height:46px; opacity:.5; }
.guide-card__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 500ms var(--te); }
.guide-card:hover .guide-card__img img{ transform:scale(1.04); }
@media (prefers-reduced-motion:reduce){ .guide-card:hover .guide-card__img img{ transform:none; } }
.guide-card .card__eyebrow{ display:block; margin-bottom:var(--s2); }
.guides-pagination{ display:flex; justify-content:center; gap:var(--s2); margin-top:var(--s7); }
.guides-pagination__btn{ min-width:42px; height:42px; padding:0 12px; border:1px solid var(--line); background:var(--bg); border-radius:var(--radius-sm); color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; cursor:pointer; transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.guides-pagination__btn:hover{ border-color:var(--blue); color:var(--blue); }
.guides-pagination__btn.is-active{ background:var(--blue); color:#fff; border-color:var(--blue); }

/* =============================================================
   Convert all dark sections to the light skyline-blue theme.
   ============================================================= */
.section--dark{ background:var(--surface) !important; color:var(--ink); }
.section--dark.section--areas{ background:var(--bg) !important; }
.section--dark::before, .section--dark::after{ display:none !important; }
.section--dark h2, .section--dark h3:not(.card__title){ color:var(--ink); }
.section--dark .eyebrow{ color:var(--accent); }
.section--dark .eyebrow::before{ background:var(--accent); }
.section--dark .muted, .section--dark .lede{ color:var(--muted); }
.section--dark .btn--ghost{ background:var(--bg); color:var(--ink); border-color:var(--line); }
.section--dark .btn--ghost:hover{ border-color:var(--ink); background:var(--surface); }

/* cards / tiles -> white on light */
.section--dark .service-card,
.section--dark .area-card,
.section--dark .creds-card,
.section--dark .check-list__item,
.section--dark .project-highlights__item,
.section--dark .scope-list__item,
.section--dark .callout{
  background:var(--bg); border-color:var(--line); color:var(--ink); box-shadow:var(--shadow-card);
}
.section--dark .service-card .card__title,
.section--dark .area-card .card__title{ color:var(--ink); }
.section--dark .service-card .card__body,
.section--dark .area-card .card__body,
.section--dark .area-card .card__zip{ color:var(--muted); }
.section--dark .service-card .card__eyebrow,
.section--dark .service-card .card__link{ color:var(--accent); }
.section--dark .creds-card__label,
.section--dark .check-list__item strong,
.section--dark .scope-list__item span strong{ color:var(--blue); }
.section--dark .creds-card__value,
.section--dark .scope-list__item span,
.section--dark .callout p,
.section--dark .creds-intro{ color:var(--muted); }
.section--dark .creds-intro strong{ color:var(--ink); }
.section--dark .check-list__icon,
.section--dark .scope-list__icon,
.section--dark .project-highlights__icon{ color:var(--accent); }
.section--dark .scope-list__icon{ background:rgba(30,58,138,.08); }
.section--dark .area-card--more{ background:transparent; border-style:dashed; border-color:var(--line); }

/* callout accent bar back to accent */
.section--dark .callout{ border-left-color:var(--accent); }
.section--dark .callout h3{ color:var(--ink); }

/* cost table -> light */
.section--dark .cost-table{ background:var(--bg); border-color:var(--line); box-shadow:var(--shadow-card); }
.section--dark .cost-table th{ background:var(--surface); color:var(--muted); border-bottom-color:var(--line); }
.section--dark .cost-table td{ color:var(--ink); border-bottom-color:var(--line); }
.section--dark .cost-table tbody tr:hover{ background:var(--surface); }
.section--dark .cost-table td:last-child{ color:var(--accent); }
.section--dark .cost-table a{ color:var(--ink); }
.section--dark .cost-table a:hover{ color:var(--accent); }
.section--dark .answer-first{ color:var(--muted); }

/* FAQ -> light */
.section--dark .faq__item{ border-top-color:var(--line); }
.section--dark .faq__item:last-child{ border-bottom-color:var(--line); }
.section--dark .faq__item summary{ color:var(--ink); }
.section--dark .faq__item summary:hover{ color:var(--accent); }
.section--dark .faq__icon{ color:var(--muted); }
.section--dark .faq__item[open]{ background:var(--surface); }
.section--dark .faq__item[open] .faq__icon{ color:var(--accent); }
.section--dark .faq__a{ color:var(--muted); }

/* reviews dots + pitch trio -> light */
.section--dark .rev-slider__dot{ background:var(--line); }
.section--dark .rev-slider__dot:hover{ background:var(--muted); }
.section--dark .rev-slider__dot.is-active{ background:var(--accent); }
.section--dark .pitch__point{ border-color:var(--line); }
.section--dark .pitch__point h3{ color:var(--ink); }
.section--dark .pitch__point p{ color:var(--muted); }
.section--dark .pitch__point-icon{ background:rgba(30,58,138,.08); border-color:rgba(30,58,138,.14); color:var(--blue); }
.section--dark .pitch__point:hover .pitch__point-icon{ background:var(--blue); border-color:transparent; color:#fff; }

/* mobile grid-arrows on light */
.section--dark .grid-arrows__btn{ border-color:var(--line); background:var(--bg); color:var(--ink); }


/* ----- Cost tables: fully white + visible row hover on any background ----- */
.cost-table, .cost-table th,
.section--dark .cost-table, .section--dark .cost-table th,
.page-cost .section--dark .cost-table, .page-cost .section--dark .cost-table th{ background:#fff; }
.cost-table tbody tr,
.section--dark .cost-table tbody tr{ transition:background .15s var(--ease); }
.cost-table tbody tr:hover,
.section--dark .cost-table tbody tr:hover,
.page-cost .section--dark .cost-table tbody tr:hover{ background:rgba(30,58,138,.06); }

/* ----- Fix: local factor cards text on light bg (was light-on-light) ----- */
.section--dark.section--local .check-list__item{ background:var(--bg); border-color:var(--line); color:var(--muted); }
.section--dark.section--local .check-list__item:hover{ border-color:var(--accent); }
.section--dark.section--local .check-list__item strong{ color:var(--blue); }
.section--dark.section--local .check-list__icon{ color:var(--accent); }
.section--dark.section--local h3{ color:var(--ink); }
.section--dark.section--local h3.mt-s7 + p{ background:var(--bg); border-left-color:var(--accent); color:var(--muted); }

/* ----- Projects page: v2 card (type/loc top, date/View bottom) ----- */
.project-card--v2 .project-card__body{ display:flex; flex-direction:column; gap:var(--s3); padding:var(--s5); }
.project-card--v2 .project-card__meta{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s3); }
.project-card--v2 .project-card__type{ color:var(--blue); font-weight:700; font-size:.82rem; letter-spacing:.01em; text-transform:uppercase; padding:0; margin:0; }
.project-card--v2:hover .project-card__type{ color:var(--accent); }
.project-card--v2 .project-card__loc{ display:inline-flex; align-items:center; gap:5px; color:var(--muted); font-size:.82rem; margin:0; padding:0; text-align:right; }
.project-card--v2 .project-card__loc svg{ width:14px; height:14px; color:var(--accent); flex:none; }
.project-card--v2 .project-card__title{ font-size:1.18rem; line-height:1.25; margin:0; }
.project-card--v2 .project-card__body > .muted{ font-size:.92rem; line-height:1.55; margin:0; }
.project-card--v2 .project-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin-top:auto; padding-top:var(--s4); border-top:1px solid var(--line); }
.project-card--v2 .project-card__date{ color:var(--muted); font-size:.82rem; font-variant-numeric:tabular-nums; }
.project-card--v2 .project-card__more{ margin:0; padding:0; color:var(--accent); font-weight:700; font-size:.86rem; }

/* ----- Attribution line for the stand-in neighborhood photos (see assets/img/areas/CREDITS.md) ----- */
.areas-credits{ padding:var(--s6) 0 var(--s7); }
.areas-credits__text{ margin:0; color:var(--muted); font-size:.78rem; line-height:1.6; text-align:center; }
.areas-credits__text a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.areas-credits__text a:hover{ color:var(--accent); }