/* =====================================================================
   Mockup zone geometry (desktop, 1100px and up).

   Everything is laid out on the mockup's own grid: the comp is 667 units
   wide, so 1u = page width / 667 (set in main.js, CSS fallback below).
   Coordinates in comments are mockup units; local values are relative
   to each section's top edge.
   ===================================================================== */
:root { --u: calc(100vw / 667); }

/* ---------- footer (all pages) ---------- */
.foot-in { display: block; }
.foot-tag { margin: 0; }
.foot-nav { display: grid; grid-template-columns: auto auto; gap: 10px 40px; }
.foot-nav a { font: 600 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: #dbe4ea; }
.foot-nav a:hover { color: var(--cyan); }

@media (max-width: 1099px) {
  .foot-in { display: grid; gap: 26px; padding-bottom: 36px; }
}

@media (min-width: 1100px) {
  /* ---------- header ---------- */
  .top-in { height: calc(var(--u) * 45); padding: 0 calc(var(--u) * 15) 0 calc(var(--u) * 30); max-width: none; gap: 0; }
  .top .logo img { height: calc(var(--u) * 40); }
  .nav { margin-left: calc(var(--u) * 32); gap: calc(var(--u) * 16); }
  .nav > a, .dd > a { font-size: calc(var(--u) * 7.9); }
  .nav-cta { font-size: calc(var(--u) * 7); height: calc(var(--u) * 21); padding: 0 calc(var(--u) * 10); gap: calc(var(--u) * 6); }
  .nav-cta svg { width: calc(var(--u) * 7); height: calc(var(--u) * 7); }

  body.home .top { position: fixed; left: 0; right: 0; background: transparent; backdrop-filter: none; transition: background .3s, box-shadow .3s; }
  body.home .top.scrolled { background: rgba(255,255,255,.97); box-shadow: 0 6px 24px rgba(12,27,43,.08); }

  /* ---------- estimate + FAQ (all pages): page y 1520 -> 1805 ---------- */
  .estimate { height: calc(var(--u) * 285); padding: 0; overflow: visible; }
  .estimate .est-grid { position: static; display: block; max-width: none; padding: 0; }
  .est-bg { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--u) * 335); clip-path: none; background: none; }
  .est-bg::before, .est-bg::after { content: ""; position: absolute; inset: 0; background: var(--cyan); }
  .est-bg::before { clip-path: polygon(0 calc(var(--u) * 23), calc(var(--u) * 212) calc(var(--u) * 5), calc(var(--u) * 362) calc(var(--u) * 192), calc(var(--u) * 292) calc(var(--u) * 335), 0 calc(var(--u) * 335)); }
  .est-bg::after { clip-path: polygon(calc(var(--u) * 377) calc(var(--u) * 190), 100% calc(var(--u) * 152), 100% calc(var(--u) * 335), calc(var(--u) * 307) calc(var(--u) * 335)); }

  .faq { position: absolute; z-index: 2; left: calc(var(--u) * 250); top: calc(var(--u) * 2); width: calc(var(--u) * 395); margin: 0; padding: 0; background: none; }
  .q, .q:nth-child(n) { border: 0; border-top: 1px solid var(--line); padding: 0 0 calc(var(--u) * 6); }
  .q:nth-child(2) { margin-left: calc(var(--u) * 40); }
  .q:nth-child(3) { margin-left: calc(var(--u) * 70); }
  .q summary { font-size: calc(var(--u) * 12); padding: calc(var(--u) * 8) 0 calc(var(--u) * 3); }
  .q p { font-size: calc(var(--u) * 7.4); line-height: 1.4; padding: 0 calc(var(--u) * 30) 0 calc(var(--u) * 10); }
  .pm { width: calc(var(--u) * 8); height: calc(var(--u) * 8); }

  .talk { position: absolute; z-index: 2; left: calc(var(--u) * 32); top: calc(var(--u) * 30); width: calc(var(--u) * 272); padding: 0; }
  .talk .eyebrow { font-size: calc(var(--u) * 7.4); margin-bottom: calc(var(--u) * 6); }
  .talk h2 { font-size: calc(var(--u) * 35); line-height: .9; }
  .dark-rule { width: calc(var(--u) * 30); height: 2px; background: var(--navy); margin: calc(var(--u) * 10) 0 calc(var(--u) * 9); }
  .talk-p { font-size: calc(var(--u) * 8.2); line-height: 1.55; max-width: none; }
  .contact { margin-top: calc(var(--u) * 14); gap: calc(var(--u) * 9); }
  .contact li { gap: calc(var(--u) * 12); }
  .contact svg { width: calc(var(--u) * 11); height: calc(var(--u) * 11); }
  .contact b { font-size: calc(var(--u) * 7.6); }
  .contact small { font-size: calc(var(--u) * 7); }

  .form { position: absolute; z-index: 4; left: calc(var(--u) * 383); top: calc(var(--u) * 166); width: calc(var(--u) * 262); margin: 0;
          padding: calc(var(--u) * 10) calc(var(--u) * 13) calc(var(--u) * 12); gap: calc(var(--u) * 5.2); box-shadow: 0 18px 50px rgba(12,27,43,.2); }
  .form label, .form legend { font-size: calc(var(--u) * 5.8); }
  .form label > input, .form label > select { margin-top: calc(var(--u) * 2); }
  .form input:not([type=radio]), .form select { height: calc(var(--u) * 11.5); font-size: calc(var(--u) * 6.2); padding: 0 calc(var(--u) * 4); }
  .row2 { gap: calc(var(--u) * 12); }
  .form fieldset { gap: calc(var(--u) * 3) calc(var(--u) * 14); }
  .form legend { margin-bottom: calc(var(--u) * 3); }
  .radio { font-size: calc(var(--u) * 5.8) !important; }
  .btn-block { margin-top: calc(var(--u) * 3); padding: calc(var(--u) * 5) 0; font-size: calc(var(--u) * 8.4); }

  .frond { z-index: 1; }
  .frond-top { width: calc(var(--u) * 80); left: calc(var(--u) * -20); top: calc(var(--u) * -48); transform: rotate(-28deg); }
  .frond-bot { width: calc(var(--u) * 120); left: calc(var(--u) * -30); top: calc(var(--u) * 222); bottom: auto; transform: rotate(-4deg) scaleY(-1); }

  /* ---------- footer: page y 1805 -> 2000 ---------- */
  .foot, .foot.foot-plain { position: relative; z-index: 3; margin-top: 0; padding: 0; height: calc(var(--u) * 195);
          clip-path: polygon(0 calc(var(--u) * 41), calc(var(--u) * 150) calc(var(--u) * 5), calc(var(--u) * 295) calc(var(--u) * 47), 100% calc(var(--u) * 25), 100% 100%, 0 100%); }
  .foot.foot-plain { clip-path: none; }
  .foot-in { position: static; max-width: none; padding: 0; }
  .foot .logo-lg { position: absolute; left: calc(var(--u) * 40); top: calc(var(--u) * 33); }
  .logo-lg img { width: calc(var(--u) * 210); height: auto; }
  .foot-tag { position: absolute; left: calc(var(--u) * 282); top: calc(var(--u) * 88); height: calc(var(--u) * 47); padding: calc(var(--u) * 28) 0 0 calc(var(--u) * 16);
              border-left: 1px solid rgba(255,255,255,.35); font-size: calc(var(--u) * 5.8); white-space: nowrap; }
  .foot-nav { position: absolute; left: calc(var(--u) * 438); top: calc(var(--u) * 120); gap: calc(var(--u) * 4) calc(var(--u) * 26); padding-right: calc(var(--u) * 17); border-right: 1px solid rgba(255,255,255,.35); }
  .foot-nav a { font-size: calc(var(--u) * 5.4); }
  .foot-place { position: absolute; left: calc(var(--u) * 570); top: calc(var(--u) * 122); gap: calc(var(--u) * 6); font-size: calc(var(--u) * 5.6); }
  .foot-place svg { width: calc(var(--u) * 17); height: calc(var(--u) * 17); }
  .foot-bar { position: absolute; left: 0; right: 0; top: calc(var(--u) * 161); max-width: none; padding: calc(var(--u) * 8) calc(var(--u) * 20) 0; font-size: calc(var(--u) * 5.6); }
  .foot-bar::before { left: calc(var(--u) * 20); right: calc(var(--u) * 20); }

  /* =================================================================
     HOMEPAGE ZONES
     ================================================================= */
  body.home main > section { position: relative; }
  body.home main .wrap { max-width: none; padding: 0; }

  /* ---- hero: page y 0 -> 333 ---- */
  body.home .hero { height: calc(var(--u) * 333); min-height: 0; }
  body.home .hero-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
                        clip-path: polygon(calc(var(--u) * 405) 0, 100% 0, 100% 100%, calc(var(--u) * 194) 100%); object-position: 62% 40%; }
  body.home .hero-in { position: static; padding: 0; }
  body.home .hero h1 { position: absolute; left: calc(var(--u) * 20); top: calc(var(--u) * 58); font-size: calc(var(--u) * 46.5); line-height: .965; letter-spacing: -.012em; max-width: none; }
  body.home .hero-sub { position: absolute; left: calc(var(--u) * 20); top: calc(var(--u) * 200); margin: 0; font-size: calc(var(--u) * 11.6); line-height: 1.4; letter-spacing: .02em; }
  body.home .hero .btn { position: absolute; left: calc(var(--u) * 20); top: calc(var(--u) * 237); margin: 0; height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 15); font-size: calc(var(--u) * 10); gap: calc(var(--u) * 7); }
  body.home .hero .btn svg { width: calc(var(--u) * 8); height: calc(var(--u) * 8); }
  body.home .loc { position: absolute; left: calc(var(--u) * 20); top: calc(var(--u) * 278); margin: 0; font-size: calc(var(--u) * 7.9); gap: calc(var(--u) * 6); }
  body.home .loc svg { width: calc(var(--u) * 9); height: calc(var(--u) * 9); }

  /* ---- navy band: page y 215 -> 594 ---- */
  body.home .built { --slant: 0px; margin-top: calc(var(--u) * -118); height: calc(var(--u) * 379); padding: 0;
    clip-path: polygon(0 calc(var(--u) * 115), calc(var(--u) * 115) calc(var(--u) * 82), calc(var(--u) * 470) calc(var(--u) * 118), 100% calc(var(--u) * 3),
                       100% calc(var(--u) * 351), calc(var(--u) * 505) calc(var(--u) * 379), 0 calc(var(--u) * 348)); }
  body.home .built-tag { left: calc(var(--u) * 590); right: auto; top: calc(var(--u) * 57); font-size: calc(var(--u) * 6.4); line-height: 1.5; color: #fff; font-family: var(--body); font-weight: 500; letter-spacing: .12em; }
  body.home .built-tag span { color: var(--cyan); }
  body.home .built-tag::after { content: ""; display: block; width: calc(var(--u) * 25); height: 1.5px; background: var(--cyan); margin-top: calc(var(--u) * 7); }
  body.home .built-grid { position: static; display: block; }
  body.home .mat.reveal, body.home .svc.reveal { opacity: 1; transform: none; transition: none; }
  body.home .built-intro { position: absolute; left: calc(var(--u) * 20); top: calc(var(--u) * 131); padding: 0; }
  body.home .built h2 { font-size: calc(var(--u) * 33); line-height: .9; }
  body.home .rule-left { position: absolute; left: calc(var(--u) * 1); top: calc(var(--u) * 106); width: calc(var(--u) * 182); margin: 0; padding-left: calc(var(--u) * 10); font-size: calc(var(--u) * 8.8); line-height: 1.5; border-left-width: 1.5px; }
  body.home .mat-img { position: absolute; top: calc(var(--u) * 127); height: calc(var(--u) * 96); margin: 0 !important; }
  body.home .mat:nth-of-type(1) .mat-img { left: calc(var(--u) * 207); width: calc(var(--u) * 165); clip-path: polygon(18.2% 0, 100% 0, 80.6% 100%, 0 100%); }
  body.home .mat:nth-of-type(2) .mat-img { left: calc(var(--u) * 352); width: calc(var(--u) * 168); clip-path: polygon(18.5% 0, 100% 0, 82% 100%, 0 100%); }
  body.home .mat:nth-of-type(3) .mat-img { left: calc(var(--u) * 502); width: calc(var(--u) * 145); clip-path: polygon(22.8% 0, 100% 0, 100% 100%, 0 100%); }
  body.home .mat-text { position: absolute; top: calc(var(--u) * 240); width: calc(var(--u) * 124); min-height: 0; padding: 0; border: 0; }
  body.home .mat:nth-of-type(1) .mat-text { left: calc(var(--u) * 223); }
  body.home .mat:nth-of-type(2) .mat-text { left: calc(var(--u) * 375); }
  body.home .mat:nth-of-type(3) .mat-text { left: calc(var(--u) * 527); }
  body.home .mat:nth-of-type(n+2) .mat-text::before { content: ""; position: absolute; left: calc(var(--u) * -23); top: calc(var(--u) * 10); height: calc(var(--u) * 32); width: 1.5px; background: var(--cyan); opacity: .8; }
  body.home .mat h3 { font-size: calc(var(--u) * 14); margin-bottom: calc(var(--u) * 3); }
  body.home .mat p { font-size: calc(var(--u) * 8.4); line-height: 1.55; }
  body.home .mat .arr { right: calc(var(--u) * 2); bottom: calc(var(--u) * 1); width: calc(var(--u) * 10); height: calc(var(--u) * 10); }
  body.home .svc-row { position: absolute; left: calc(var(--u) * 20); top: calc(var(--u) * 302); width: calc(var(--u) * 627); margin: 0; grid-template-columns: calc(var(--u) * 221) calc(var(--u) * 200) 1fr; }
  body.home .svc-row a, body.home .svc-row a:first-child { height: calc(var(--u) * 40); padding: 0 calc(var(--u) * 28) 0 calc(var(--u) * 30); gap: calc(var(--u) * 14); font-size: calc(var(--u) * 10.6); white-space: nowrap; border-left: 1.5px solid var(--cyan); }
  body.home .svc-row a:first-child { border-left: 0; padding-left: calc(var(--u) * 20); }
  body.home .svc-row .ic { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
  body.home .svc-row .arr { width: calc(var(--u) * 10); height: calc(var(--u) * 10); }

  /* ---- replace / repair / inspect: page y 563 -> 858 ---- */
  body.home .services { margin-top: calc(var(--u) * -31); height: calc(var(--u) * 295); padding: 0; }
  body.home .svc-grid { display: block; }
  body.home .svc { position: absolute; top: calc(var(--u) * 177); width: calc(var(--u) * 162); }
  body.home .svc:nth-child(1) { left: calc(var(--u) * 23); }
  body.home .svc:nth-child(2) { left: calc(var(--u) * 237); }
  body.home .svc:nth-child(3) { left: calc(var(--u) * 455); }
  body.home .svc-img, body.home .svc:first-child .svc-img { position: absolute; margin: 0; }
  body.home .svc:nth-child(1) .svc-img { left: calc(var(--u) * -3); top: calc(var(--u) * -156); width: calc(var(--u) * 240); height: calc(var(--u) * 152); clip-path: polygon(6.25% 3.9%, 100% 0, 75% 100%, 0 92.1%); }
  body.home .svc:nth-child(2) .svc-img { left: calc(var(--u) * -24); top: calc(var(--u) * -148); width: calc(var(--u) * 253); height: calc(var(--u) * 152); clip-path: polygon(21.7% 0, 100% 2.6%, 81.8% 100%, 0 89.5%); }
  body.home .svc:nth-child(3) .svc-img { left: calc(var(--u) * -23); top: calc(var(--u) * -156); width: calc(var(--u) * 217); height: calc(var(--u) * 156); clip-path: polygon(21.2% 9%, 100% 0, 99.5% 100%, 0 91%); }
  body.home .svc h2 { font-size: calc(var(--u) * 35); line-height: .9; margin-bottom: calc(var(--u) * 8); }
  body.home .svc p { font-size: calc(var(--u) * 9.8); line-height: 1.28; max-width: none; color: #3a4652; }
  body.home .svc .link { margin-top: calc(var(--u) * 9); font-size: calc(var(--u) * 7.6); gap: calc(var(--u) * 6); }
  body.home .svc .link svg { width: calc(var(--u) * 8); height: calc(var(--u) * 8); }

  /* ---- our work / LOCAL: page y 858 -> 1166 ---- */
  body.home .work { height: calc(var(--u) * 308); padding: 0; }
  body.home .work-head { position: static; display: block; margin: 0; }
  body.home .work .eyebrow { position: absolute; z-index: 3; left: calc(var(--u) * 25); top: calc(var(--u) * 6); font-size: calc(var(--u) * 7.2); margin: 0; }
  body.home .local-row { position: static; display: block; }
  body.home .local { position: absolute; z-index: 3; left: calc(var(--u) * 17); top: calc(var(--u) * 16); padding: 0;
    font-size: calc(var(--u) * 109); line-height: .74; font-stretch: 90%; letter-spacing: -.012em;
    color: #fff; -webkit-text-stroke: calc(var(--u) * 1.2) var(--navy); text-shadow: none; }
  body.home .local .solid { color: var(--navy); }
  body.home .local-stack { position: absolute; z-index: 3; left: calc(var(--u) * 388); top: calc(var(--u) * 26); font-size: calc(var(--u) * 22); line-height: 1.04; }
  body.home .beyond { position: absolute; z-index: 3; left: calc(var(--u) * 585); top: calc(var(--u) * 23); margin: 0; font-size: calc(var(--u) * 6.4); line-height: 1.35; }
  body.home .beyond svg { width: calc(var(--u) * 9); height: calc(var(--u) * 9); margin-top: calc(var(--u) * 3); }
  body.home .beyond::after { content: ""; display: block; width: calc(var(--u) * 40); height: 1.5px; background: var(--cyan-deep); margin-top: calc(var(--u) * 3); }
  body.home .collage-link { position: absolute; left: 0; top: calc(var(--u) * 78); width: 100%; height: calc(var(--u) * 264); z-index: 1; }
  body.home .collage { display: block; width: 100%; height: 100%; }

  /* ---- local is personal: page y 1166 -> 1405 ---- */
  body.home .team { display: block; height: calc(var(--u) * 239); margin: 0; z-index: 2; }
  body.home .team-img { position: absolute; left: 0; top: 0; width: calc(var(--u) * 442); height: calc(var(--u) * 246); clip-path: polygon(0 8.9%, 100% 0, 100% 100%, 0 89%); }
  body.home .team-text { position: absolute; left: calc(var(--u) * 460); top: calc(var(--u) * 35); width: calc(var(--u) * 185); padding: 0; }
  body.home .team h2 { font-size: calc(var(--u) * 38); line-height: .87; }
  body.home .cyan-rule { width: calc(var(--u) * 32); height: 2px; margin: calc(var(--u) * 10) 0 calc(var(--u) * 8); }
  body.home .team p { font-size: calc(var(--u) * 9.8); line-height: 1.3; max-width: none; }
  body.home .team .link { margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 7.6); gap: calc(var(--u) * 6); }
  body.home .team .link svg { width: calc(var(--u) * 8); height: calc(var(--u) * 8); }

  /* ---- process: page y 1405 -> 1520 ---- */
  body.home .process { height: calc(var(--u) * 115); padding: 0; z-index: 3; }
  body.home .process-grid { display: block; }
  body.home .process-left { position: absolute; left: calc(var(--u) * 25); top: calc(var(--u) * 5); }
  body.home .process .eyebrow { font-size: calc(var(--u) * 7.2); margin-bottom: calc(var(--u) * 5); }
  body.home .process h2 { font-size: calc(var(--u) * 25); line-height: .9; white-space: nowrap; }
  body.home .process-img { width: calc(var(--u) * 190); height: calc(var(--u) * 66); margin: calc(var(--u) * 5) 0 0; clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%); }
  body.home .steps { position: absolute; left: calc(var(--u) * 237); top: calc(var(--u) * 18); width: calc(var(--u) * 410); margin: 0;
    grid-template-columns: calc(var(--u) * 70) calc(var(--u) * 38) calc(var(--u) * 77) calc(var(--u) * 38) calc(var(--u) * 70) calc(var(--u) * 38) 1fr; gap: 0; }
  body.home .num { font-size: calc(var(--u) * 14); margin-bottom: calc(var(--u) * 4); }
  body.home .steps .ic { width: calc(var(--u) * 17); height: calc(var(--u) * 17); margin-bottom: calc(var(--u) * 5); }
  body.home .steps h3 { font-size: calc(var(--u) * 9.4); margin-bottom: calc(var(--u) * 2); white-space: nowrap; }
  body.home .steps p { font-size: calc(var(--u) * 7); line-height: 1.4; }
  body.home .step-arr { padding: calc(var(--u) * 34) 0 0 calc(var(--u) * 6); }
  body.home .step-arr svg { width: calc(var(--u) * 10); height: calc(var(--u) * 10); }
}

/* =====================================================================
   SUBPAGES in the mockup style (1100px and up). Content flows, but every
   edge, shard and type size comes from the same 667-unit grid.
   ===================================================================== */
@media (min-width: 1100px) {
  body.zoned .top { position: fixed; left: 0; right: 0; background: transparent; backdrop-filter: none; transition: background .3s, box-shadow .3s; }
  body.zoned .top.scrolled { background: rgba(255,255,255,.97); box-shadow: 0 6px 24px rgba(12,27,43,.08); }
  body.zoned main .wrap { max-width: none; padding-left: calc(var(--u) * 20); padding-right: calc(var(--u) * 20); }

  /* ---- hero: 360u tall, photo behind the header, same diagonal as home ---- */
  body.zoned .hero-sub-page { height: calc(var(--u) * 360); min-height: 0; }
  body.zoned .hero-sub-page .hero-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    clip-path: polygon(calc(var(--u) * 405) 0, 100% 0, 100% 100%, calc(var(--u) * 177) 100%); }
  body.zoned .hero-sub-page:not(:has(+ .navy-band)) .hero-img { clip-path: polygon(calc(var(--u) * 405) 0, 100% 0, 100% calc(100% - var(--u) * 52), calc(var(--u) * 177) 100%); }
  body.zoned .hero-sub-page:not(:has(+ .navy-band)) { margin-bottom: calc(var(--u) * 10); }
  body.zoned .hero-sub-page .hero-in { position: absolute; left: calc(var(--u) * 20); top: calc(var(--u) * 50); width: calc(var(--u) * 262); padding: 0; }
  body.zoned .hero-sub-page .hero-in > * { max-width: none; }
  body.zoned .crumbs { font-size: calc(var(--u) * 5.8); gap: calc(var(--u) * 4); margin-bottom: calc(var(--u) * 9); }
  body.zoned .hero-sub-page h1 { font-size: calc(var(--u) * 36); line-height: .95; }
  body.zoned .hero-sub-page .hero-sub { width: calc(var(--u) * 236); margin-top: calc(var(--u) * 9); font-size: calc(var(--u) * 9); line-height: 1.45; color: #3a4652; }
  body.zoned .hero-ctas { margin-top: calc(var(--u) * 12); gap: calc(var(--u) * 7); flex-direction: column; align-items: flex-start; }
  body.zoned .hero-ctas .btn { height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 13); font-size: calc(var(--u) * 8.4); gap: calc(var(--u) * 6); }
  body.zoned .hero-ctas .btn svg { width: calc(var(--u) * 8); height: calc(var(--u) * 8); }
  body.zoned .call { font-size: calc(var(--u) * 10); gap: calc(var(--u) * 5); }
  body.zoned .call svg { width: calc(var(--u) * 9); height: calc(var(--u) * 9); }
  body.zoned .trust { width: calc(var(--u) * 200); margin-top: calc(var(--u) * 10); gap: calc(var(--u) * 4) calc(var(--u) * 10); }
  body.zoned .trust li { font-size: calc(var(--u) * 5.8); gap: calc(var(--u) * 4); }
  body.zoned .trust svg { width: calc(var(--u) * 8); height: calc(var(--u) * 8); }

  /* ---- navy band: V top edge under the hero, pointed bottom ---- */
  body.zoned .navy-band { --slant: 0px; margin-top: calc(var(--u) * 20); padding: calc(var(--u) * 62) 0 calc(var(--u) * 60);
    clip-path: polygon(0 calc(var(--u) * 34), 100% 0, 100% calc(100% - var(--u) * 28), calc(var(--u) * 505) 100%, 0 calc(100% - var(--u) * 31)); }
  body.zoned .hero + .navy-band { margin-top: calc(var(--u) * -118); padding-top: calc(var(--u) * 140);
    clip-path: polygon(0 calc(var(--u) * 115), calc(var(--u) * 115) calc(var(--u) * 82), calc(var(--u) * 470) calc(var(--u) * 118), 100% calc(var(--u) * 3),
                       100% calc(100% - var(--u) * 28), calc(var(--u) * 505) 100%, 0 calc(100% - var(--u) * 31)); }
  body.zoned .built-tag { left: calc(var(--u) * 590); right: auto; top: calc(var(--u) * 57); font: 500 calc(var(--u) * 6.4)/1.5 var(--body); letter-spacing: .12em; color: #fff; }
  body.zoned .navy-band:not(.hero + .navy-band) .built-tag { top: calc(var(--u) * 24); }
  body.zoned .built-tag::first-line { color: var(--cyan); }
  body.zoned .built-tag::after { content: ""; display: block; width: calc(var(--u) * 25); height: 1.5px; background: var(--cyan); margin-top: calc(var(--u) * 7); }
  body.zoned .band-head { grid-template-columns: calc(var(--u) * 230) 1fr; gap: calc(var(--u) * 30); margin-bottom: calc(var(--u) * 26); }
  body.zoned .navy-band h2 { font-size: calc(var(--u) * 33); line-height: .9; }
  body.zoned .navy-band .rule-left { font-size: calc(var(--u) * 8.8); line-height: 1.5; max-width: calc(var(--u) * 300); padding-left: calc(var(--u) * 10); }
  body.zoned .points li { padding: calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 14) 0; }
  body.zoned .points li:not(:nth-child(3n+1)) { padding-left: calc(var(--u) * 16); }
  body.zoned .points .ic { width: calc(var(--u) * 17); height: calc(var(--u) * 17); margin-bottom: calc(var(--u) * 7); }
  body.zoned .points h3 { font-size: calc(var(--u) * 12.5); margin-bottom: calc(var(--u) * 4); }
  body.zoned .points p { font-size: calc(var(--u) * 7.8); }

  /* ---- section heads + type ---- */
  body.zoned .section { padding: calc(var(--u) * 34) 0; }
  body.zoned .section-head { margin-bottom: calc(var(--u) * 20); }
  body.zoned .section-head h2, body.zoned .split h2 { font-size: calc(var(--u) * 36); line-height: .9; }
  body.zoned .section-head p { font-size: calc(var(--u) * 8.6); max-width: calc(var(--u) * 240); }
  body.zoned .eyebrow { font-size: calc(var(--u) * 7.2); margin-bottom: calc(var(--u) * 6); }
  body.zoned .link { font-size: calc(var(--u) * 7.4); gap: calc(var(--u) * 6); }
  body.zoned .link svg { width: calc(var(--u) * 8); height: calc(var(--u) * 8); }

  /* ---- split: slanted "team photo" frame ---- */
  body.zoned .split { gap: calc(var(--u) * 30); grid-template-columns: calc(var(--u) * 340) 1fr; }
  body.zoned .split.flip { grid-template-columns: 1fr calc(var(--u) * 340); }
  body.zoned .split-img { height: calc(var(--u) * 230); clip-path: polygon(0 9%, 100% 0, 100% 100%, 0 89%); }
  body.zoned .split.flip .split-img { clip-path: polygon(0 0, 100% 9%, 100% 89%, 0 100%); }
  body.zoned .split:not(.flip) .split-img { margin-left: calc(var(--u) * -20); width: calc(100% + var(--u) * 20); }
  body.zoned .split.flip .split-img { margin-right: calc(var(--u) * -20); width: calc(100% + var(--u) * 20); }
  body.zoned .split p { font-size: calc(var(--u) * 9.4); line-height: 1.5; margin-top: calc(var(--u) * 7); max-width: none; }
  body.zoned .ticks { margin-top: calc(var(--u) * 11); gap: calc(var(--u) * 6); }
  body.zoned .ticks li { font-size: calc(var(--u) * 8.6); gap: calc(var(--u) * 6); }
  body.zoned .ticks svg { width: calc(var(--u) * 10); height: calc(var(--u) * 10); }
  body.zoned .split .link { margin-top: calc(var(--u) * 13); }
  body.zoned .compare > div { padding: calc(var(--u) * 14) calc(var(--u) * 16); }
  body.zoned .compare h3 { font-size: calc(var(--u) * 13); }

  /* ---- cards / materials / recent: tilted shards like the homepage ---- */
  body.zoned .cards { gap: calc(var(--u) * 18) calc(var(--u) * 14); }
  body.zoned .card img { margin-bottom: calc(var(--u) * 9); }
  body.zoned .card:nth-child(4n+1) img { clip-path: polygon(6% 4%, 100% 0, 94% 100%, 0 92%); }
  body.zoned .card:nth-child(4n+2) img { clip-path: polygon(10% 0, 100% 3%, 92% 100%, 0 90%); }
  body.zoned .card:nth-child(4n+3) img { clip-path: polygon(8% 6%, 100% 0, 99.5% 100%, 0 93%); }
  body.zoned .card:nth-child(4n+4) img { clip-path: polygon(4% 0, 96% 5%, 100% 92%, 0 100%); }
  body.zoned .card h3 { font-size: calc(var(--u) * 15); margin-bottom: calc(var(--u) * 5); }
  body.zoned .card p { font-size: calc(var(--u) * 8); margin-bottom: calc(var(--u) * 8); }
  body.zoned .mat-cards, body.zoned .recent { gap: calc(var(--u) * 22); }
  body.zoned .mat-card .svc-img, body.zoned .recent .svc-img { width: 100%; margin: 0 0 calc(var(--u) * 12); height: calc(var(--u) * 140); }
  body.zoned :is(.mat-card, .recent figure):nth-child(3n+1) .svc-img { clip-path: polygon(6.25% 3.9%, 100% 0, 75% 100%, 0 92.1%); }
  body.zoned :is(.mat-card, .recent figure):nth-child(3n+2) .svc-img { clip-path: polygon(21.7% 0, 100% 2.6%, 81.8% 100%, 0 89.5%); }
  body.zoned :is(.mat-card, .recent figure):nth-child(3n+3) .svc-img { clip-path: polygon(21.2% 9%, 100% 0, 99.5% 100%, 0 91%); }
  body.zoned .mat-card h3 { font-size: calc(var(--u) * 30); margin-bottom: calc(var(--u) * 6); }
  body.zoned .mat-card > p { font-size: calc(var(--u) * 8.6); margin-bottom: calc(var(--u) * 9); }
  body.zoned .specs div { padding: calc(var(--u) * 5) 0; font-size: calc(var(--u) * 7.6); }
  body.zoned .specs dt { font-size: calc(var(--u) * 6.6); }
  body.zoned .recent figcaption, body.zoned .recent figcaption span { font-size: calc(var(--u) * 7.4); }

  /* ---- process (same as home, flowing) ---- */
  body.zoned .process-alt { padding: calc(var(--u) * 26) 0 calc(var(--u) * 34); }
  body.zoned .process-alt .process-grid { grid-template-columns: calc(var(--u) * 200) 1fr; gap: calc(var(--u) * 17); }
  body.zoned .process h2 { font-size: calc(var(--u) * 25); line-height: .9; }
  body.zoned .process-img { width: calc(100% + var(--u) * 20); height: calc(var(--u) * 66); margin: calc(var(--u) * 7) 0 0 calc(var(--u) * -20); clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%); }
  body.zoned .steps { margin-top: calc(var(--u) * 12); grid-template-columns: 1fr calc(var(--u) * 24) 1fr calc(var(--u) * 24) 1fr calc(var(--u) * 24) 1fr; gap: 0; }
  body.zoned .num { font-size: calc(var(--u) * 14); margin-bottom: calc(var(--u) * 4); }
  body.zoned .steps .ic { width: calc(var(--u) * 17); height: calc(var(--u) * 17); margin-bottom: calc(var(--u) * 6); }
  body.zoned .steps h3 { font-size: calc(var(--u) * 9.4); margin-bottom: calc(var(--u) * 3); }
  body.zoned .steps p { font-size: calc(var(--u) * 7.2); }
  body.zoned .step-arr { padding-top: calc(var(--u) * 38); }
  body.zoned .step-arr svg { width: calc(var(--u) * 10); height: calc(var(--u) * 10); }

  /* ---- navy "more" strip: slanted like the home services row ---- */
  body.zoned .more { padding: calc(var(--u) * 30) 0 calc(var(--u) * 26);
    clip-path: polygon(0 calc(var(--u) * 14), calc(var(--u) * 330) 0, 100% calc(var(--u) * 12), 100% 100%, 0 100%); }
  body.zoned .more .svc-row a, body.zoned .more .svc-row a:first-child { height: calc(var(--u) * 40); padding: 0 calc(var(--u) * 28) 0 calc(var(--u) * 30); gap: calc(var(--u) * 14); font-size: calc(var(--u) * 10.6); white-space: nowrap; border-top: 0; border-left: 1.5px solid var(--cyan); }
  body.zoned .more .svc-row a:first-child { border-left: 0; padding-left: calc(var(--u) * 20); }
  body.zoned .more .svc-row .ic { width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
  body.zoned .more .svc-row .arr { width: calc(var(--u) * 10); height: calc(var(--u) * 10); }

  /* ---- chips, gallery ---- */
  body.zoned .chips li, body.zoned .chips a { font-size: calc(var(--u) * 6.6); padding: calc(var(--u) * 5) calc(var(--u) * 8); }
  body.zoned .local-note { clip-path: polygon(0 calc(var(--u) * 10), 100% 0, 100% 100%, 0 calc(100% - var(--u) * 10)); }
  body.zoned .gallery { gap: calc(var(--u) * 12); }
  body.zoned .gallery img, body.zoned .gallery figure.wide img { height: calc(var(--u) * 150); }
  body.zoned .gallery figure:nth-child(3n+1) img { clip-path: polygon(0 4%, 100% 0, 98% 100%, 0 96%); }
  body.zoned .gallery figure:nth-child(3n+2) img { clip-path: polygon(3% 0, 100% 5%, 100% 100%, 0 94%); }
  body.zoned .gallery figure:nth-child(3n+3) img { clip-path: polygon(0 0, 97% 3%, 100% 96%, 2% 100%); }
  body.zoned .filters button { font-size: calc(var(--u) * 7.4); padding: calc(var(--u) * 6) calc(var(--u) * 10); }
  body.zoned .gallery figcaption, body.zoned .gallery figcaption span { font-size: calc(var(--u) * 7.2); }
}