/* Service-page styles — Exterior Services LLC
   Shared components (nav, buttons, sections, mosaic, footer) are in base.css.
   This file covers service-page-specific layouts. */

/* ══════════════════════════════════════════════════════════════════════════════
   SERVICE BAND — RTH format (Brief 15): solid --char text band, centered
   content, then the photo below in its own framed plate (.svc-plate).
   The band carries the .dk class so eyebrow/hairline dark rules apply.
   Brief 18: the nav no longer floats over this band — it is a solid bar that
   occupies its own space above it — so the top padding no longer has to buy
   nav clearance and drops from 136px to 80px, which is the breathing room the
   band actually had before (136 minus the ~56px the nav used to overlay).
   ══════════════════════════════════════════════════════════════════════════════ */
.svc-band {
  padding: calc(var(--sp-7) + var(--sp-4)) var(--gutter) var(--sp-7);
  text-align: center;
}
.svc-band__in { width: min(64rem, 100%); margin-inline: auto; }
.svc-band__h1 {
  margin-top: var(--sp-4);
  color: var(--paper);
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 600;
  text-wrap: balance;
}
/* Accent phrase — real Zilla Slab 600 italic face is self-hosted, so the
   em keeps its default italic and only takes the green */
.svc-band__h1 em { color: var(--green-lt); }
.svc-band__sub {
  margin-top: var(--sp-4);
  color: var(--mut-d);
  font-size: clamp(var(--fs-3), 1.5vw, var(--fs-4));
  line-height: 1.65;
  width: min(46rem, 100%); margin-inline: auto;
}
.svc-band__rule {
  width: min(9rem, 40%); height: 1px;
  margin: var(--sp-6) auto 0;
  background: var(--hair-d);
}
.svc-band__loc {
  margin-top: var(--sp-5);
  color: var(--green-lt);
  font-size: var(--fs-1); font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
}

/* ── Framed photo plate below the band ──────────────────────────────────────
   Inset from the page edges, sand .frame border, landscape ratio — never a
   viewport-height cover crop. Real photographs wired in Brief 16 pt 2. */
.svc-plate { padding: var(--sp-6) var(--gutter) 0; }
.svc-plate .frame { width: min(72rem, 100%); margin-inline: auto; }
.svc-plate .shot { aspect-ratio: 21 / 9; }

/* ══════════════════════════════════════════════════════════════════════════════
   SERVICE HERO — single static panel, ~62vh. ABOUT PAGE ONLY as of Brief 15
   (the five service pages use .svc-band above).
   Satisfies Mobile Hero Law: ≤880px stacks image band then text band,
   no fixed height, no cover crop.
   ══════════════════════════════════════════════════════════════════════════════ */
.svc-hero {
  position: relative;
  /* Brief 35 whole-photo audit: About-only (the five service pages use .svc-band).
     TEAM-051 is native 1.77803, so the band goes 16:9 to match — at 1440x900 the
     16:9 band is 810px and FITS under the 836px cap: ZERO CROP, up from 68.9% at
     the old 62vh box. At 1920 the cap binds (1016px = 1.890) and keeps 94.1%.
     The 62vh floor stays for short windows. */
  /* height, not aspect-ratio: ratio transfer would shrink the band's width
     (see home.css). 62vh floor retained for short windows. */
  height: min(calc(100vw / 1.778), calc(100svh - var(--nav-h)));
  min-height: 62vh;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.svc-hero__img {
  position: absolute; inset: 0;
}
.svc-hero__img .shot { height: 100%; border-radius: 0; }
.svc-hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--ink) 72%, transparent) 0%,
      color-mix(in srgb, var(--ink) 38%, transparent) 30%,
      transparent 55%),
    linear-gradient(to top,
      color-mix(in srgb, var(--ink) 62%, transparent) 0%,
      transparent 28%);
}
.svc-hero__body {
  position: relative; z-index: 2;
  padding: var(--sp-8) var(--gutter) var(--sp-7);
  max-width: min(40rem, 52vw);
}
/* CONTAINED LEGIBILITY WASH (Brief 35). The 16:9 whole-photo band moved the About
   text block lower into TEAM-051's bright yard gravel and the 12px eyebrow and sub
   fell to 3.5:1 on glyph pixels. Same discipline as home.css and work.css: a wash
   anchored to the TEXT BLOCK, transparent by its right edge and masked at its top
   so it draws no line across the photograph. Tuned to the text zone, not the frame.
   TUNING LEVERS: the 62%/94% stops are the reach; 88/78 the depth. */
.svc-hero__body::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1; pointer-events: none;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--ink) 88%, transparent) 0%,
    color-mix(in srgb, var(--ink) 78%, transparent) 62%,
    transparent 94%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 18%);
}

/* Eyebrow inside dark hero: left-aligned, no left rule, green-lt color */
.svc-hero__eyebrow {
  justify-content: flex-start;
  color: var(--green-lt);
}
.svc-hero__eyebrow::before { display: none; }
.svc-hero__eyebrow::after  { background: color-mix(in srgb, var(--sand) 55%, transparent); }

.svc-hero__h1 {
  margin-top: var(--sp-4);
  color: var(--paper);
  font-size: clamp(2.1rem, 3.8vw, 3.5rem);
  font-weight: 600;
}
.svc-hero__sub {
  margin-top: var(--sp-3);
  color: var(--mut-d);
  font-size: var(--fs-3); line-height: 1.65;
  max-width: 42ch;
}
.svc-hero__cta { margin-top: var(--sp-5); }

/* ══════════════════════════════════════════════════════════════════════════════
   INTRO — 2-column body with drop cap on first paragraph
   ══════════════════════════════════════════════════════════════════════════════ */
.intro {
  margin-top: var(--sp-6);
  width: min(64rem, 100%); margin-inline: auto;
}
.intro__body {
  column-count: 2; column-gap: var(--sp-7);
}
.intro__body p { break-inside: avoid; line-height: 1.8; color: var(--mut); }
.intro__body p + p { margin-top: var(--sp-5); }
.intro__body p:first-child { color: var(--ink); }
.intro__body p:first-child::first-letter {
  font-family: var(--font-display); font-weight: 700;
  font-size: 3.2em; line-height: 0.8;
  float: left; padding-right: var(--sp-3); padding-top: var(--sp-1);
  color: var(--green);
}

/* ══════════════════════════════════════════════════════════════════════════════
   WHAT WE BUILD — sub-service grid
   ══════════════════════════════════════════════════════════════════════════════ */
.build-grid {
  margin-top: var(--sp-7);
  width: min(72rem, 100%); margin-inline: auto;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
/* Odd item count: the orphan takes the full row rather than leaving a gap */
.build-grid > .build-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.build-item {
  padding: var(--sp-5);
  border: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  border-radius: var(--r-card);
}
.build-item h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-4); color: var(--green-lt);
}
.build-item p {
  margin-top: var(--sp-2);
  color: var(--mut-d); font-size: var(--fs-2); line-height: 1.7;
}

/* ══════════════════════════════════════════════════════════════════════════════
   8-TILE MOSAIC — modifier for service pages
   Uses nth-child: 2-3-2-1 coursed pattern
   ══════════════════════════════════════════════════════════════════════════════ */
.mosaic--8 figure:nth-child(-n+2)               { grid-column: span 3; }
.mosaic--8 figure:nth-child(n+3):nth-child(-n+5) { grid-column: span 2; }
.mosaic--8 figure:nth-child(6),
.mosaic--8 figure:nth-child(7)                  { grid-column: span 3; }
.mosaic--8 figure:nth-child(8)                  { grid-column: 1 / -1; }
/* 16/9, not a deeper letterbox: nothing in the photo archive is natively wider
   than 1.778:1, so 16/5 discarded 44-58% of every frame (Brief 16 pt 1d). The
   drone frames are exactly 1.778, so they now sit here at zero crop. */
.mosaic--8 figure:nth-child(8) .shot            { aspect-ratio: 16 / 9; }

/* PROCESS STRIP moved to base.css (Brief 18 Part C). It is a shared partial used
   on seven pages, one of which (our-work) never loads this stylesheet. */

/* The .design3d FEATURED BAND that lived here is REMOVED (Brief D14): its
   panel was the site's last .ph placeholder — an empty "Preview" frame that
   never received a 3D rendering — and the whole component was cut from the
   four pages that carried it. The 3D claims remain as text elsewhere. */

/* ══════════════════════════════════════════════════════════════════════════════
   CROSS-LINK STRIP — points at a sibling service page instead of restating it.
   Compact by design: the band it replaced was a full featured section, this is
   one line and one link, so the section padding drops with it.
   ══════════════════════════════════════════════════════════════════════════════ */
.sec--xlink { padding-block: var(--sp-7); }
.xlink {
  width: min(72rem, 100%); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--sp-3) var(--sp-6);
  padding: var(--sp-5);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: var(--r-card);
}
.xlink p { flex: 1 1 26rem; color: var(--mut); line-height: 1.7; }
.xlink__lede { color: var(--ink); font-weight: 600; }
.xlink .textlink { font-size: var(--fs-2); white-space: nowrap; }

/* ── Scroll-reveal for service sections ─────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .build-item, .process__step {
      animation: soften 1s both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE — ≤880px service-specific
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  /* Band tightens; plate ratio goes to the 4/3 the source photos carry —
     natural ratio, height derived, no crop (Mobile Hero Law substance) */
  .svc-band { padding: calc(var(--sp-7) + var(--sp-6)) var(--gutter) var(--sp-6); }
  .svc-band__h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); }
  .svc-band__loc { letter-spacing: 0.12em; }
  .svc-plate { padding-top: var(--sp-5); }
  .svc-plate .shot { aspect-ratio: 4 / 3; }

  /* MOBILE HERO LAW — stacked: image band at the SLOT ratio, then text band.
     Was `aspect-ratio: 4 / 3`, which despite the heading above was a cover crop:
     the band is a fixed box with overflow:hidden, so any frame wider than 1.333
     lost width on the way to mobile. The About hero slot is 16:9, so the old
     4:3 band threw away 25% of a 16:9 frame's width (and 11% of the 3:2 frame
     that held the slot before it). Corrected to match the slot, which is the
     same rule home.css already follows — "the band ratio IS the hero slot
     ratio, so the photograph is not re-cropped on the way to mobile" — and it
     takes the About hero to a true ZERO crop at every breakpoint.
     `.svc-hero` is About-only since Brief 15, so this touches no other page.
     Do not reintroduce a ratio here that differs from the slot. */
  /* height:auto — the desktop min() height must not constrain the stacked band */
  .svc-hero { display: block; height: auto; min-height: 0; }
  .svc-hero__img {
    position: relative;
    aspect-ratio: 16 / 9; height: auto; overflow: hidden;
  }
  .svc-hero__img .shot { height: 100%; }
  .svc-hero__scrim { display: none; }
  .svc-hero__body {
    background: var(--char); max-width: none;
    padding: var(--sp-6) var(--gutter);
  }
  .svc-hero__h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); }

  .intro__body { column-count: 1; }
  .build-grid { grid-template-columns: 1fr; }
  /* .process mobile rules moved to base.css with the component (Brief 18 pt C) */
  .xlink { padding: var(--sp-4); }
  .mosaic--8 figure:nth-child(n) { grid-column: 1 / -1; }
  .mosaic--8 figure:nth-child(8) .shot { aspect-ratio: 4 / 3; }
}