/* Conductor Electric — global styles.
   Ported from mockups/homepage-canvas/Main.dc.html (the approved Main artboard).
   Geometry is the artboard's, exact: 1440px content column, 1312x93 header, 60° cuts.
   Responsive is plan 01-03 — there are deliberately no breakpoints here. */

* { box-sizing: border-box; }

body {
  position: relative;
  margin: 0;
  font-family: var(--font-heading);
  background: var(--ground-dark);
  color: var(--text-on-dark);
}

a { color: var(--green-bright); text-decoration: none; }
a:hover { color: var(--green-hover); }

main { display: block; }

/* ---------------------------------------------------------------
   Motion grammar — site-wide, fixed. See DESIGN-HANDOFF.md.
   --------------------------------------------------------------- */
.hov {
  position: relative;
  overflow: hidden;
  transition: filter var(--hover-ease), transform var(--hover-ease), box-shadow var(--hover-ease);
  cursor: pointer;
}
.hov::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  transition: left var(--sweep-ease);
  pointer-events: none;
}

@keyframes bolt-flick {
  0%   { transform: none; }
  30%  { transform: rotate(-9deg) scale(1.18); }
  60%  { transform: rotate(6deg) scale(1.08); }
  100% { transform: none; }
}

.nav-link { position: relative; transition: color 0.15s ease, text-shadow 0.18s ease; cursor: pointer; }
/* The strip allows 10px under the text box and no nav word has a descender, so
   the rule sits tight to the word (1px gap) and gives its remaining 8px to the
   strip's bottom edge. It was 2px at -5px: heavy against 13.5px text, and only
   3px clear of the edge while 10px sat unused above. --green-tint, not
   --green-bright: a 1px line in the darker green all but disappears on
   --green-deep. Brad's call 2026-09-02 from a five-step comparison. */
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 0;
  background: var(--green-tint);
  transition: width 0.22s ease;
}

.text-link { transition: color 0.15s ease, transform 0.15s ease; cursor: pointer; }

/* Every effect below is gated on a real pointer. On a touch screen `:hover`
   fires on tap and then sticks until the next tap elsewhere — a lit-up card
   the user never asked for. The resting styles above are unguarded. */
@media (hover: hover) and (pointer: fine) {
.hov:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(57, 176, 97, 0.35);
}
.hov:hover::after { left: 130%; }
.hov:hover .bolt { animation: bolt-flick 0.45s ease; }
.nav-link:hover::after { width: 100%; }
/* Was sitting outside this guard, down in the .nav-strip block: on a touch
   screen the colour change stuck after a tap. Moved here with the glow. */
.nav-strip .nav-link:hover { color: var(--text-white); text-shadow: var(--glow-nav-soft); }
/* :hover is (0,3,0) and --current is (0,2,0), so without this the current page
   DIMS to the soft glow when you point at it. It keeps its full one. */
.nav-strip .nav-link--current:hover { text-shadow: var(--glow-nav); }
.text-link:hover { color: var(--green-tint-strong); transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .hov,
  .nav-link,
  .nav-link::after,
  .text-link { transition: none; }
  .hov::after { display: none; }
  .hov:hover { transform: none; }
  .hov:hover .bolt { animation: none; }
  .text-link:hover { transform: none; }
}

/* ---------------------------------------------------------------
   Header — floats over the top band. Every number below is the
   artboard's; the clip-path coordinates are absolute and must not
   be approximated or converted to polygon() (that drops the
   rounded corners on the 60° cut).
   --------------------------------------------------------------- */
.header-shell {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--shell-pad);
}

.site-header {
  position: relative;
  margin-top: 26px;
  width: 100%;
  height: 93px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--hdr-pad);
  background: var(--surface-frosted);
  -webkit-backdrop-filter: blur(var(--blur-header));
  backdrop-filter: blur(var(--blur-header));
  /* The 60 degree cuts, at any width. `clip-path: path()` has no percentage
     form, so a 1312px path string cannot go fluid. Three mask layers do it
     instead: the left cut and the right cut are fixed 62x93 SVGs pinned to
     their own ends, and a plain rectangle fills whatever is left between them
     (`calc(100% - 124px)`). The angle and the ~10px corner radii are therefore
     identical at 1440px and at 1024px — only the flat middle stretches.
     One element, so one backdrop-filter context and no seam. */
  -webkit-mask-image: var(--hdr-cut-l), var(--hdr-cut-r), linear-gradient(#000, #000);
  mask-image: var(--hdr-cut-l), var(--hdr-cut-r), linear-gradient(#000, #000);
  -webkit-mask-position: left top, right top, var(--hdr-cut-w) top;
  mask-position: left top, right top, var(--hdr-cut-w) top;
  -webkit-mask-size: var(--hdr-cut-w) 100%, var(--hdr-cut-w) 100%, calc(100% - var(--hdr-cut-w) * 2) 100%;
  mask-size: var(--hdr-cut-w) 100%, var(--hdr-cut-w) 100%, calc(100% - var(--hdr-cut-w) * 2) 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.site-header__logo { display: flex; }
.site-header__logo img { width: 172px; height: 65px; object-fit: contain; display: block; }
.site-header__right { display: flex; align-items: center; }

/* Nav strip. Left end is the 60° cut: 21px of horizontal inset over 36px of
   height (36 x 0.5774 = 20.8). Width is measured from the rendered 4-link
   content, not inherited from the 5-link artboard — see 01-01-SUMMARY.md. */
.nav-strip {
  position: relative;
  top: 5px;
  display: flex;
  align-items: center;
  gap: 30px;
  height: 36px;
  width: 416px;
  padding: 0 72px 0 34px;
  margin-right: -56px;
  background: var(--green-deep);
  clip-path: path('M 6 0 L 416 0 L 416 36 L 27 36 Q 21 36 17.98 30.82 L 3.02 5.18 Q 0 0 6 0 Z');
  font-size: 13.5px;
  font-weight: 600;
}
/* The strip is a fixed 416px — its 60 degree cut is a path() with no
   percentage form — so nothing inside it may change width from page to
   page. A weight bump on the current link did: on /services/ the row
   outgrew the content box, the links shrank, and "About Us" broke at its
   space. The current page is marked by colour and a persistent underline,
   both of which cost zero width. */
.nav-strip .nav-link { color: rgba(255, 255, 255, 0.78); white-space: nowrap; }
/* Current page is white lit from behind — the same figure/ground move as .glow
   on a section headline, at --glow-nav's smaller scale. Colour and glow only:
   both cost zero width, which the fixed 416px path demands. The rule below is
   the third marker, so the state never rests on colour alone. */
.nav-strip .nav-link--current { color: var(--text-white); text-shadow: var(--glow-nav); }
.nav-strip .nav-link--current::after { width: 100%; }

.cta-angled {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 290px;
  height: 55px;
  background: linear-gradient(180deg, var(--green-bright), var(--green-primary));
  color: var(--cta-ink);
  font-weight: 700;
  font-size: 18px;
  clip-path: path('M 9 0 L 281 0 Q 290 0 285.54 7.81 L 262.46 48.19 Q 258 56 249 56 L 41 56 Q 32 56 27.54 48.19 L 4.46 7.81 Q 0 0 9 0 Z');
}
.cta-angled:hover { color: var(--cta-ink); }
.bolt { flex: none; }

/* ---------------------------------------------------------------
   Mobile header — its own object, not the 1312px bar shrunk.
   The desktop bar carries four 60-degree cuts; at phone width four
   cuts read as noise, so this uses the angle once at each end (the
   same cut as the desktop bar, mirrored) and lets the open panel
   continue it. Same frosted ground, same deep-green nav material on
   the control.
   --------------------------------------------------------------- */
.mheader {
  display: none;
  position: relative;
  margin-top: 16px;
  height: var(--mheader-h);
  align-items: center;
  justify-content: space-between;
  /* left: the logo starts where the cut ends, as on the desktop bar (66px pad
     past a 62px cut); at 18px the hexagon's point sat on the angled edge.
     Right stays 18px: the menu's own cut runs parallel to the bar's. */
  padding: 0 18px 0 var(--mcut-w);
}
/* The cut lives on a background layer, not on .mheader itself: a mask clips
   every descendant, and the open panel hangs below the bar. Masking the bar
   directly erased it. */
.mheader::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--surface-frosted);
  -webkit-backdrop-filter: blur(var(--blur-header));
  backdrop-filter: blur(var(--blur-header));
  /* a cut at each end: the same 62x93 cut SVGs the desktop bar uses, scaled
     to this bar's height so the angle is identical, with a plain block between */
  -webkit-mask-image: var(--hdr-cut-l), var(--hdr-cut-r), linear-gradient(#000, #000);
  mask-image: var(--hdr-cut-l), var(--hdr-cut-r), linear-gradient(#000, #000);
  /* --mcut-w is 42.67px, so the tiles meet mid-pixel and WebKit antialiases
     both edges into a visible seam. The flat block overlaps each cut by 1px. */
  -webkit-mask-position: left top, right top, center top;
  mask-position: left top, right top, center top;
  -webkit-mask-size: var(--mcut-w) 100%, var(--mcut-w) 100%, calc(100% - var(--mcut-w) * 2 + 2px) 100%;
  mask-size: var(--mcut-w) 100%, var(--mcut-w) 100%, calc(100% - var(--mcut-w) * 2 + 2px) 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* open: the bar squares off and the panel below carries the cut instead,
   so the two read as one shape rather than two with a notch between */
.mheader:has(.mnav[open])::before {
  -webkit-mask-image: linear-gradient(#000, #000);
  mask-image: linear-gradient(#000, #000);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* No position: relative on either flex item — the panel is absolutely
   positioned and must resolve against .mheader, not against the 116px button.
   Flex items honour z-index without being positioned, so the stacking still
   holds them above the ::before background layer. */
.mheader__logo { z-index: 1; display: flex; flex: none; }
.mheader__logo img { width: auto; height: 46px; object-fit: contain; display: block; }

.mnav { z-index: 1; flex: none; }
.mnav__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 116px;
  height: 44px;
  background: var(--green-deep);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-condensed);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  /* the nav strip's leading cut, scaled 36 -> 44 high, mirrored onto the trailing end */
  clip-path: path('M 7.33 0 L 108.67 0 Q 116 0 112.31 6.33 L 94.02 37.67 Q 90.33 44 83 44 L 33 44 Q 25.67 44 21.98 37.67 L 3.69 6.33 Q 0 0 7.33 0 Z');
}
.mnav__btn::-webkit-details-marker { display: none; }
.mnav__ico { flex: none; }
.mnav__ico--close { display: none; }
.mnav[open] .mnav__ico--open { display: none; }
.mnav[open] .mnav__ico--close { display: block; }

.mnav__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 18px calc(20px + var(--mcut-h) * 0.4) 18px;
  background: var(--green-deep);
  box-shadow: var(--shadow-lift);
  /* the bar's cuts, continued on the panel's own bottom corners */
  -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000), var(--hdr-cut-l), var(--hdr-cut-r);
  mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000), var(--hdr-cut-l), var(--hdr-cut-r);
  /* The cut SVG rounds its top corner to meet the bar's top edge; here that
     corner meets the panel's straight side and read as a notch. So each cut
     tile shifts out by the SVG's own inset (5.02 of 62) and the side block runs
     down past the rounding (8.65 of 93): side and diagonal meet in one bend.
     Every block overlaps its neighbour, so no tile edge falls mid-pixel. */
  -webkit-mask-position: left top, center bottom, left calc(var(--mcut-w) * -0.081) bottom 0, right calc(var(--mcut-w) * -0.081) bottom 0;
  mask-position: left top, center bottom, left calc(var(--mcut-w) * -0.081) bottom 0, right calc(var(--mcut-w) * -0.081) bottom 0;
  -webkit-mask-size: 100% calc(100% - var(--mcut-h) * 0.907), calc(100% - var(--mcut-w) * 2 + 10px) var(--mcut-h), var(--mcut-w) var(--mcut-h), var(--mcut-w) var(--mcut-h);
  mask-size: 100% calc(100% - var(--mcut-h) * 0.907), calc(100% - var(--mcut-w) * 2 + 10px) var(--mcut-h), var(--mcut-w) var(--mcut-h), var(--mcut-w) var(--mcut-h);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.mnav__links { display: flex; flex-direction: column; }
.mnav__links .nav-link {
  display: flex;
  align-items: center;
  min-height: 48px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.mnav__links .nav-link--current { color: var(--green-tint); font-weight: 700; }
.mnav__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  margin-top: 4px;
  font-size: 16px;
}

/* ---------------------------------------------------------------
   Living-sky hero band
   --------------------------------------------------------------- */
.hero-band { position: relative; overflow: hidden; }

.hero-sky {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-sky-top,
.hero-sky-left,
.hero-sky-horizon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.hero-sky-top     { background: linear-gradient(180deg, rgba(10,15,12,0.08) 0%, rgba(10,15,12,0) 26%, rgba(10,15,12,0) 100%); }
.hero-sky-left    { background: linear-gradient(90deg, rgba(8,14,11,0.42) 0%, rgba(8,14,11,0.16) 42%, rgba(8,14,11,0) 68%); }
.hero-sky-horizon { background: linear-gradient(180deg, rgba(255,255,255,0) 50%, rgba(250,252,252,0.35) 80%, rgba(250,252,252,0.75) 100%); }

/* Top padding = --header-block (26 offset + 93 bar) + the artboard's own 64px.
   The header is absolute, so the band pays for it here — and it must follow the
   header's real height at every breakpoint, not the desktop sum. 119 + 64 = 183. */
.hero {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  gap: 64px;
  align-items: center;
  padding: calc(var(--header-block) + 64px) var(--gutter-hero) 110px var(--gutter-hero);
}

.hero-copy { flex: 1 1 0; display: flex; flex-direction: column; gap: 26px; }

.hero-eyebrow { display: flex; align-items: center; gap: 10px; align-self: flex-start; }
.hero-eyebrow span {
  font-family: var(--font-condensed);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  color: var(--green-tint-strong);
  text-shadow: 0 1px 10px rgba(8, 14, 11, 0.5);
}

.hero h1 {
  margin: 0;
  font-size: 50px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-white);
  text-shadow: 0 2px 20px rgba(8, 14, 11, 0.45);
}
.hero h1 .accent { color: var(--green-accent); }

.hero-lede {
  margin: 0;
  max-width: 520px;
  font-size: 17px;
  line-height: 1.65;
  font-weight: 500;
  color: var(--text-lede);
  text-shadow: 0 1px 12px rgba(10, 20, 16, 0.4);
}

.hero-actions { display: flex; gap: 16px; align-items: center; }

.btn-primary {
  background: linear-gradient(180deg, var(--green-bright), var(--green-primary));
  color: var(--cta-ink);
  font-weight: 700;
  font-size: 15px;
  padding: 16px 30px;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 32px rgba(57, 176, 97, 0.4);
}
/* keeps its own glow on hover, as the artboard renders it */
.btn-primary:hover { color: var(--cta-ink); box-shadow: 0 0 32px rgba(57, 176, 97, 0.4); }

.btn-secondary {
  border: 1px solid rgba(233, 241, 236, 0.25);
  color: var(--text-on-dark);
  font-weight: 600;
  font-size: 15px;
  padding: 16px 26px;
  border-radius: var(--radius-sm);
}
.btn-secondary:hover { color: var(--text-on-dark); }

.hero-trust {
  display: flex;
  gap: 22px;
  font-family: var(--font-condensed);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--text-trust);
  text-shadow: 0 1px 10px rgba(10, 20, 16, 0.45);
}
.hero-trust i { font-style: normal; color: var(--text-sep); }

/* glass estimate card */
.estimate-card {
  /* 588 = the artboard's flex-basis 530 + 28px padding + 1px border on each side.
     The mockup has no box-sizing reset, so its 530 is a content box and the card
     occupies 588px of the hero row. This site does reset box-sizing, so the basis
     is restated as the rendered width. Measured, not assumed. */
  flex: 0 0 588px;
  background: var(--surface-glass);
  border: 1px solid var(--border-green-card);
  border-radius: var(--radius-lg);
  padding: 28px;
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
.estimate-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.estimate-card__brand { display: flex; align-items: center; gap: 10px; }
.estimate-card__brand img { width: 30px; height: 24px; display: block; }
.estimate-card__title {
  font-family: var(--font-condensed);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--text-on-dark);
}
.estimate-card__badge {
  font-family: var(--font-condensed);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: var(--green-tint);
}
.estimate-card__list { display: flex; flex-direction: column; gap: 12px; }
.estimate-card__item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 14px;
}
.estimate-card__item svg { flex: none; }
.estimate-card__item b { font-weight: 700; color: var(--text-white); }
.estimate-card__item span { font-weight: 500; color: var(--text-on-dark-soft); }
.estimate-card__foot {
  margin-top: 20px;
  border-top: 1px solid var(--hairline-soft);
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.estimate-card__note {
  font-size: 15px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--text-on-dark-soft);
}
.btn-ghost-green {
  background: rgba(57, 176, 97, 0.2);
  border: 1px solid var(--border-green-strong);
  color: var(--green-tint);
  font-weight: 700;
  font-size: 13px;
  padding: 11px 18px;
  border-radius: var(--radius-xs);
}
.btn-ghost-green:hover { color: var(--green-tint); }

/* single dome hill — the section transition, echoing the hex mark's inner curve */
.hero-hill {
  position: absolute;
  bottom: -27px;
  left: 0;
  width: 100%;
  height: var(--hill-h);
  display: block;
  z-index: 1;
}

/* ---------------------------------------------------------------
   Sections below the hill.
   Each section is full-bleed so its background reaches the viewport
   edge like the sky and the hill do; the content sits in the same
   centred 1440px column the hero uses.
   --------------------------------------------------------------- */
.sec { position: relative; }
.sec__inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 64px var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* the hill's green bleeding down into the page ground */
/* the hill-green bleed belongs to whichever section sits under the hill —
   the homepage's steps section, or an inner page's first section */
.sec--steps { background: linear-gradient(180deg, var(--green-hill) 0%, rgba(10, 15, 12, 0) 140px); }
/* the sub-page artboards blend over 220px, not 140px — a taller sub-hero
   sits above it and the hill has further to fall */
.sec--first { background: linear-gradient(180deg, var(--green-hill) 0%, rgba(10, 15, 12, 0) 220px); }
.sec--steps .sec__inner,
.sec--first .sec__inner { padding: 12px var(--gutter) 64px var(--gutter); }
.sec--reasons .sec__inner { padding: 40px var(--gutter); }
.sec--crew .sec__inner { padding: 84px var(--gutter) 72px var(--gutter); }
.sec--crew .sec__title { text-shadow: 0 2px 14px rgba(4, 8, 6, 0.6); }

.sec__label {
  font-family: var(--font-condensed);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.4px;
  color: var(--green-tint);
}
.sec__title {
  margin: 0;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-white);
}
/* the emphasised word in a section headline: white, lit from behind */
.glow { color: var(--text-white); text-shadow: var(--glow-green); }
/* its counterpart where a headline crosses the hill green */
.on-hill { text-shadow: var(--shadow-on-hill); }
.sec__sub {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-on-dark-soft);
}
.sec__sub--narrow { max-width: 680px; text-align: center; }

.sec__grid { display: grid; margin-top: 36px; width: 100%; }

/* how it works — three steps under 2px rules */
.steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.step {
  border-top: 2px solid var(--green-primary);
  padding: 26px 8px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.step__n {
  font-family: var(--font-condensed);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--text-dim);
}
.step__t { font-size: 21px; font-weight: 700; color: var(--text-white); }
.step__c { font-size: 14px; line-height: 1.6; font-weight: 500; color: var(--text-on-dark-soft); }

/* why us — six numbered cards */
.reasons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.reason {
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.reason__head { display: flex; align-items: center; gap: 14px; }
.reason__icon {
  /* 44 = the artboard's 42px content box plus its 1px border each side.
     The artboard has no box-sizing reset; this file does. Same trap as
     the hero's glass card — see 01-01-SUMMARY.md. */
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--fill-green-tile);
  border: 1px solid var(--border-green-tile);
  display: flex;
  align-items: center;
  justify-content: center;
}
.reason__t { font-size: 17px; font-weight: 700; color: var(--text-white); }
.reason__c { font-size: 13.5px; line-height: 1.6; font-weight: 500; color: var(--text-on-dark-soft); }

/* services — the four lines, floating on the crew photo */
.crew-frame { position: relative; width: 100%; margin-top: 36px; }
.crew-photo {
  width: 100%;
  height: 620px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-lift);
}
.crew-photo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
/* the cards overhang the photo's top third, inset 28px from its edges */
.services {
  position: absolute;
  top: 44px;
  left: 28px;
  right: 28px;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.service {
  background: var(--surface-scrim);
  -webkit-backdrop-filter: blur(var(--blur-scrim));
  backdrop-filter: blur(var(--blur-scrim));
  border: 1px solid var(--border-green-mid);
  border-radius: var(--radius-md);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.service > svg { flex: none; align-self: flex-start; }
.service__t { font-size: 18px; font-weight: 700; color: var(--text-white); }
.service__c { font-size: 13.5px; line-height: 1.65; font-weight: 500; color: var(--text-on-dark-soft); }
.service .text-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--green-tint);
  align-self: flex-start;
}

/* closing band — lifts off the page and overlaps the crew photo by 52px */
.cta-wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }
.cta-band {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1090px;
  margin: var(--band-pull) auto 72px auto;
  background: linear-gradient(135deg, rgba(23, 66, 44, 0.88), rgba(10, 26, 19, 0.92));
  -webkit-backdrop-filter: blur(var(--blur-band));
  backdrop-filter: blur(var(--blur-band));
  border: 1px solid var(--border-green-card);
  /* artboard says 11px; ported as 10px to stay on the halved radius system */
  border-radius: var(--radius-lg);
  padding: 40px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.cta-band__copy { display: flex; flex-direction: column; gap: 10px; }
.cta-band__title { font-size: 32px; font-weight: 800; letter-spacing: -0.5px; color: var(--text-white); }
.cta-band__sub { font-size: 15px; font-weight: 500; color: var(--text-muted); }
.cta-band__actions { display: flex; gap: 14px; flex-shrink: 0; }

/* band variants of the hero buttons — the artboard's own values, and no
   resting glow here (that glow belongs to the hero's primary alone) */
.btn-primary--band { padding: 16px 28px; box-shadow: none; }
.btn-primary--band:hover { box-shadow: 0 8px 26px rgba(57, 176, 97, 0.35); }
.btn-secondary--band {
  padding: 16px 24px;
  border-color: rgba(233, 241, 236, 0.3);
  color: var(--text-white);
}
.btn-secondary--band:hover { color: var(--text-white); }

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.site-footer { position: relative; border-top: 1px solid var(--hairline-soft); }
.site-footer__inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.site-footer__brand { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; }
.site-footer__brand img { width: 34px; height: 27px; display: block; }
.site-footer__line { font-size: 13px; font-weight: 500; color: var(--text-dim); }
.site-footer a { color: var(--text-dim); }
.site-footer a:hover { color: var(--green-tint); }

/* ---------------------------------------------------------------
   Inner pages (page.njk)

   The band, sky, gradients and hill are the homepage's — reused,
   not restated. Only the block above the hill is different: one
   column, a crumb trail, a title and a lede, on roughly half the
   homepage hero's height. Everything below the hill is .sec.
   --------------------------------------------------------------- */
.phero {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* Centred and full-bleed inside --phero-pad, rather than left-aligned at a
     fixed measure: the copy fills the band it sits in and wraps only when the
     band runs out. The section stack below keeps its own left-aligned gutter. */
  text-align: center;
  /* same header debt the hero pays, then a shorter band: the page below
     is the content, so the hero introduces it rather than carrying it */
  padding: calc(var(--header-block) + 56px) var(--phero-pad) 170px var(--phero-pad);
}

/* the condensed line above the h1. The artboards replaced the crumb trail
   with it: on a seven-page site a trail said nothing the nav didn't, and the
   kicker carries the page's positioning line instead. */
.phero__kicker {
  font-family: var(--font-condensed);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.4px;
  color: var(--green-tint-strong);
  text-shadow: 0 1px 10px rgba(8, 14, 11, 0.5);
}

.phero h1 {
  margin: 0;
  font-size: 46px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-white);
  text-shadow: 0 2px 20px rgba(8, 14, 11, 0.45);
}
.phero h1 .accent { color: var(--green-accent); }

.phero__lede {
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.65;
  font-weight: 500;
  color: var(--text-lede);
  text-shadow: 0 1px 12px rgba(10, 20, 16, 0.4);
}

/* The four service lines, offered from the hero of the page that lists them.
   The main nav has no room for a fourth level (the strip is a fixed 416px and
   is already full), so the way in to each line is here and in the rows below.
   Rendered from the `heroLinks` front matter, so any page can carry a set. */
.phero__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}
.phero__link {
  font-family: var(--font-condensed);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-white);
  /* dark frosted, not the header's light frost: these sit low in the band
     where the sky photo is at its brightest */
  background: rgba(8, 14, 11, 0.34);
  -webkit-backdrop-filter: blur(var(--blur-header));
  backdrop-filter: blur(var(--blur-header));
  border: 1px solid rgba(233, 241, 236, 0.3);
  border-radius: var(--radius-sm);
  padding: 13px 22px;
}
.phero__link:hover { color: var(--text-white); border-color: var(--green-tint); }

/* the closing band on an inner page has no photo to overlap */
/* The closing space above the footer is the band's own 72px bottom margin,
   which collapses out through .cta-wrap and .subpage (both zero-padding). A
   page that suppresses the band therefore loses that space entirely and sits
   flush on the footer — so it pays the same 72px itself. Padding, not margin:
   it must not collapse away the way the band's did. */
.subpage--noband { padding-bottom: 72px; }

.cta-band--flat { margin-top: 72px; }
.cta-band--flat .cta-band__title { font-size: 30px; }
.cta-band__note { font-size: 14px; font-weight: 500; color: var(--text-dim); }

/* ===============================================================
   SUB-PAGE COMPONENTS
   Ported from mockups/homepage-canvas/*.dc.html, approved 2026-08-31.
   The artboards set every sub-page on the hero's own 120px inset,
   not the 72px section gutter.
   =============================================================== */
.subpage .sec__inner { padding: 72px var(--gutter-hero) 0 var(--gutter-hero); }
.subpage .sec--first .sec__inner { padding: 48px var(--gutter-hero) 0 var(--gutter-hero); }
.subpage .cta-wrap { padding: 0 var(--gutter-hero); }

/* a section whose content sits left rather than centred */
.sec__inner--left { align-items: flex-start; }
/* the smaller headline the artboards use over a two-column block */
.sec__title--sm { font-size: 30px; }

/* --- split: copy beside a photo, or two columns of copy ---------- */
.split { width: 100%; display: flex; gap: 64px; align-items: flex-start; }
.split--mid { align-items: center; }
.split__body { flex: 1.2 1 0; display: flex; flex-direction: column; gap: 16px; text-align: left; }
.split__body--even { flex: 1 1 0; }
/* the mission column's green rule */
.split__body--ruled { border-left: 2px solid var(--green-primary); padding-left: 40px; }
.split__media { flex: none; }
.split__media img {
  display: block;
  width: 460px;
  height: 340px;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.split__c { font-size: 14.5px; line-height: 1.7; font-weight: 500; color: var(--text-on-dark-soft); }
/* the button pair under running copy */
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 6px; }

/* --- tiles: the six things a service line actually does ---------- */
.tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.tile {
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.tile__t { font-size: 16px; font-weight: 700; color: var(--text-white); }
.tile__c { font-size: 13.5px; line-height: 1.6; font-weight: 500; color: var(--text-on-dark-soft); }

/* --- rows: the services overview, photo and copy alternating ----- */
.rows { width: 100%; display: flex; flex-direction: column; gap: 64px; }
.row { display: flex; gap: 56px; align-items: center; }
.row--flip { flex-direction: row-reverse; }
.row img {
  display: block;
  width: 480px;
  height: 300px;
  object-fit: cover;
  border-radius: var(--radius-md);
  flex: none;
}
.row__body { flex: 1 1 0; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.row__t { margin: 0; font-size: 26px; font-weight: 800; color: var(--text-white); }
.row__t a { color: inherit; }
.row__t a:hover { color: var(--green-tint); }
.row__c { font-size: 14.5px; line-height: 1.7; font-weight: 500; color: var(--text-on-dark-soft); }

/* --- check list -------------------------------------------------
   The artboard inlines a stroked check per item; the same mark as a
   mask keeps the markup to one <li> and takes the token colour. */
.checks {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.checks li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  line-height: 1.7;
  font-weight: 500;
  color: var(--text-on-dark-soft);
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 16px;
  height: 16px;
  background-color: var(--green-bright);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.checks b { color: var(--text-white); font-weight: 700; }

/* --- panel: a bordered block that is content, not a link target -- */
.panel {
  width: 100%;
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 40px;
  display: flex;
  gap: 56px;
  align-items: center;
  text-align: left;
}
.panel--col { flex-direction: column; align-items: flex-start; gap: 14px; }
.panel img {
  display: block;
  width: 380px;
  height: 250px;
  object-fit: cover;
  border-radius: var(--radius-md);
  flex: none;
}
.panel__body { display: flex; flex-direction: column; gap: 14px; }
.panel__t { font-size: 26px; font-weight: 800; color: var(--text-white); }
.panel--col .panel__t { font-size: 24px; }
.panel__c { font-size: 14.5px; line-height: 1.7; font-weight: 500; color: var(--text-on-dark-soft); }

/* --- pillars: the four values, each under the logo's zigzag ------ */
.pillars {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  text-align: left;
}
.pillar { display: flex; flex-direction: column; gap: 12px; }
.pillar__t {
  font-family: var(--font-condensed);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-white);
}
.pillar__z { stroke: var(--green-bright); }
.pillar__c { font-size: 13.5px; line-height: 1.65; font-weight: 500; color: var(--text-on-dark-soft); }

/* --- supplier band ----------------------------------------------
   Placeholders, visibly bracketed: Brad owes the list, the URLs and
   the logo files, and each logo links out when they arrive. */
.suppliers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  margin-top: 20px;
  width: 100%;
}
.supplier-ph {
  width: 170px;
  height: 64px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-green);
  background: rgba(57, 176, 97, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-condensed);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--green-tint);
}

/* --- contact: the form card beside the facts -------------------- */
.cwrap { width: 100%; display: flex; gap: 56px; align-items: flex-start; }
.cinfo { flex: 1 1 0; display: flex; flex-direction: column; gap: 18px; text-align: left; }
.cinfo__phone {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 26px;
  font-weight: 800;
  color: var(--text-white);
}
.cinfo__phone a { color: inherit; }
.cinfo__phone a:hover { color: var(--green-tint); }
.cinfo__phone svg { flex: none; }
.cinfo__c { font-size: 14.5px; line-height: 1.7; font-weight: 500; color: var(--text-on-dark-soft); }
.cinfo__facts {
  border-top: 1px solid var(--hairline-soft);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.7;
  font-weight: 500;
  color: var(--text-on-dark-soft);
}
.cinfo__facts b { color: var(--text-white); font-weight: 700; }
.cinfo__facts a { color: var(--green-accent); }
.alert {
  background: rgba(57, 176, 97, 0.08);
  border: 1px solid var(--border-green-mid);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--text-card);
}
.alert svg { flex: none; margin-top: 2px; }

/* --- the form card ----------------------------------------------
   Markup only until Phase 4 attaches delivery; the note under the
   button says so rather than promising a reply. */
.cform {
  flex: 1.2 1 0;
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}
.cform__t { font-size: 22px; font-weight: 800; color: var(--text-white); }
.cform__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cform__f { display: flex; flex-direction: column; gap: 7px; }
.cform__f label { font-size: 13px; font-weight: 700; letter-spacing: 0.3px; color: var(--text-on-dark); }
.cform__f input,
.cform__f textarea {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-white);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  transition: border-color var(--hover-ease), box-shadow var(--hover-ease);
}
.cform__f textarea { resize: vertical; line-height: 1.6; min-height: 140px; }
.cform__f input:focus-visible,
.cform__f textarea:focus-visible {
  outline: none;
  border-color: var(--border-green-strong);
  box-shadow: 0 0 0 3px rgba(57, 176, 97, 0.18);
}
.cform__note { margin: 0; font-size: 13px; line-height: 1.6; font-weight: 500; color: var(--text-dim); }
.cform__note a { color: var(--green-accent); }
.cform .btn-primary { align-self: flex-start; }
.cform .btn-primary[disabled] {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  color: var(--text-on-dark-soft);
  box-shadow: none;
  cursor: not-allowed;
}

/* --- person card ------------------------------------------------
   Same border, radius and hover as .reason, with the portrait the
   artboards added beside the copy. */
.bios { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.bio {
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  gap: 22px;
  align-items: flex-start;
  text-align: left;
}
.bio img {
  display: block;
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: var(--radius-md);
  flex: none;
  /* the artboard grades both portraits back toward the page palette */
  filter: saturate(0.75) brightness(0.95) contrast(1.02);
}
.bio__body { display: flex; flex-direction: column; gap: 8px; }
.bio__n { font-size: 20px; font-weight: 800; color: var(--text-white); }
.bio__r {
  font-family: var(--font-condensed);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: var(--green-tint);
}
.bio__c { font-size: 14.5px; line-height: 1.7; font-weight: 500; color: var(--text-on-dark-soft); }
.bios-note {
  margin: 10px 0 0 0;
  font-size: 14.5px;
  line-height: 1.7;
  font-weight: 500;
  color: var(--text-on-dark-soft);
  text-align: center;
}

.reason--link { text-decoration: none; }

/* ---------------------------------------------------------------
   Card hover — "power-up". Not the .hov sweep: that white streak is
   for buttons and reads as cheap across a 400px card. This is the
   same idea in the card register — a 3px lift, the border and the
   icon coming up to full green, an ambient shadow instead of a glow.
   --------------------------------------------------------------- */
.reason,
.service,
.bio,
.tile {
  transition: transform var(--hover-ease), border-color var(--hover-ease),
    box-shadow var(--hover-ease), background-color var(--hover-ease);
}
@media (hover: hover) and (pointer: fine) {
  .reason:hover,
  .service:hover,
  .bio:hover,
  .tile:hover {
    transform: translateY(-3px);
    border-color: var(--border-green-strong);
    box-shadow: 0 14px 34px rgba(4, 8, 6, 0.5), 0 0 22px rgba(57, 176, 97, 0.14);
  }
  .reason:hover,
  .bio:hover,
  .tile:hover { background-color: rgba(57, 176, 97, 0.06); }
  /* the scrim deepens so the copy holds against the photo as the card rises */
  .service:hover { background-color: rgba(8, 14, 11, 0.78); }

  /* the tile is the filament: it brightens with the card */
  .reason__icon { transition: background-color var(--hover-ease), border-color var(--hover-ease); }
  .reason__icon svg { transition: stroke var(--hover-ease); }
  .reason:hover .reason__icon {
    background-color: rgba(57, 176, 97, 0.22);
    border-color: var(--green-bright);
  }
  .reason:hover .reason__icon svg { stroke: var(--green-tint-strong); }
  .service > svg { transition: stroke var(--hover-ease); }
  .service:hover > svg { stroke: var(--green-accent); }
  /* hovering anywhere on the card carries the link, so the whole card reads as one target */
  .service:hover .text-link { color: var(--green-tint-strong); transform: translateX(4px); }

  /* steps have no card chrome — their 2px rule is the surface that responds */
  .step { transition: border-color var(--hover-ease); }
  .step__n { transition: color var(--hover-ease); }
  .step:hover { border-top-color: var(--green-bright); }
  .step:hover .step__n { color: var(--green-tint); }
}

@media (prefers-reduced-motion: reduce) {
  .reason,
  .service,
  .bio,
  .tile,
  .reason__icon,
  .reason__icon svg,
  .service > svg,
  .step,
  .step__n { transition: none; }
  .reason:hover,
  .service:hover,
  .bio:hover,
  .tile:hover { transform: none; }
  .service:hover .text-link { transform: none; }
}

/* ---------------------------------------------------------------
   Typography: no widows. Brad's standing rule — the last line of a
   heading or a paragraph never carries a single word. Costs nothing
   at 1440 and earns its keep at every narrower width below.
   --------------------------------------------------------------- */
.hero h1,
.hero-lede,
.sec__title,
.sec__sub,
.step__t,
.step__c,
.reason__t,
.reason__c,
.service__t,
.service__c,
.cta-band__title,
.cta-band__sub,
.split__c,
.tile__t,
.tile__c,
.row__t,
.row__c,
.panel__t,
.panel__c,
.pillar__c,
.checks li,
.cinfo__c,
.alert,
.cform__note,
.bio__n,
.bio__c,
.bios-note,
.site-footer__line { text-wrap: pretty; }

/* Centred display copy balances instead: `pretty` only protects the last line,
   which on a centred two-line heading leaves a long line over a short one.
   `balance` evens them and still cannot leave a widow. */
.phero h1,
.phero__lede { text-wrap: balance; }

/* ===============================================================
   THE BREAKPOINT LADDER
   Four steps. Each one exists because something specific stops
   fitting there — not because the number is round. Nothing in this
   section applies at or above 1440px: the approved composition is
   the top of the ladder and is never overridden.
   =============================================================== */

/* --- 1300 — the crew composition breaks first -------------------
   Four cards in an absolute overlay run out of room before any
   other element does. Measured: the overlay is 200px narrower than
   the viewport and carries three 20px gaps, so a 260px card floor
   is hit at exactly 1300px. They come off the photo and into the
   flow there — not at a rounder number that would leave them at
   235px for a hundred pixels first. */
@media (max-width: 1300px) {
  :root {
    --gutter: 56px;
    --gutter-hero: 72px;
    --band-pull: 40px;   /* the -124px overlap only reads as intentional
                            while the cards are still on the photo */
  }
  .crew-photo { height: 420px; }
  .services {
    position: static;
    margin-top: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- 1024 — the desktop bar stops fitting -----------------------
   Below this the 1312px header can no longer hold logo + nav + CTA,
   so the mobile header takes over (see the header section above)
   and the hero gives up its second column. */
@media (max-width: 1024px) {
  :root {
    --gutter: 48px;
    --gutter-hero: 48px;
    --header-block: 80px;   /* 16px offset + the 64px mobile bar */
    /* the desktop bar is gone from here down, so there is no logo edge to
       line up with — the hero falls back to the page's own gutter */
    --phero-pad: var(--gutter-hero);
  }
  .hero {
    flex-direction: column;
    align-items: stretch;
    gap: 34px;
  }
  .site-header { display: none; }
  .mheader { display: flex; }
  .hero-copy { gap: 22px; align-items: center; text-align: center; }
  .hero-eyebrow { align-self: center; }
  .hero-lede { margin-inline: auto; }
  .hero-actions,
  .hero-trust { justify-content: center; }
  .hero-lede { max-width: none; }
  .estimate-card { flex: 0 0 auto; width: 100%; }
  .hero h1 { font-size: 42px; }
  /* one sentence per line, as on desktop. WebKit's text-wrap: pretty rebreaks
     the shrink-to-fit centred h1 onto three lines even when both fit. */
  .hero h1 { white-space: nowrap; }
  .phero h1 { font-size: 38px; }
  .phero { padding-bottom: 80px; }
  .sec__title { font-size: 36px; }
  .bios { grid-template-columns: minmax(0, 1fr); }
  .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* .sec__title grows to 36px above, so the small variant has to be
     restated at every rung or it inherits the larger size */
  .sec__title--sm { font-size: 30px; }
  /* the fixed photo widths leave the copy column under 400px at this
     gutter — the gap gives it back rather than the image shrinking */
  .split { gap: 40px; }
  .row { gap: 40px; }
  /* four value columns fall to 202px here, narrower than the 22px
     condensed title wants */
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
  /* three steps in three columns fall under 260px here — 768 would give them
     205px, which is narrower than the 21px step title wants. They stack. */
  .steps { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  /* the band's two-up row leaves the title ~210px at 768 — five lines of a
     24px headline. It stacks with the rest of the tablet layout instead. */
  .cta-band { flex-direction: column; align-items: stretch; gap: 24px; }
}

/* --- 720 — two columns stop being two columns ------------------- */
@media (max-width: 720px) {
  :root {
    --gutter: 28px;
    --gutter-hero: 28px;
    --hill-h: 90px;
    --shell-pad: 28px;   /* the bar lines up with the sections below it */
  }
  .steps,
  .reasons,
  .services,
  .tiles,
  .pillars,
  .cform__row { grid-template-columns: minmax(0, 1fr); }
  .sec__grid { margin-top: 26px; }

  /* every sub-page two-up becomes one column, and the photos go fluid:
     a 480px fixed image overflows the 440px column at 480px wide */
  .split,
  .row,
  .row--flip,
  .cwrap,
  .panel { flex-direction: column; align-items: stretch; gap: 28px; }
  .rows { gap: 44px; }
  .split__media img,
  .row img,
  .panel img { width: 100%; height: 260px; }
  .split__body--ruled {
    border-left: 0;
    padding-left: 0;
    border-top: 2px solid var(--green-primary);
    padding-top: 24px;
  }
  .subpage .sec__inner { padding: 44px var(--gutter-hero) 0 var(--gutter-hero); }
  .subpage .sec--first .sec__inner { padding: 32px var(--gutter-hero) 0 var(--gutter-hero); }
  .panel { padding: 28px; }
  .cform { padding: 28px; }

  .sec__inner { padding: 44px var(--gutter); }
  .sec--steps .sec__inner,
  .sec--first .sec__inner { padding: 12px var(--gutter) 44px var(--gutter); }
  .sec--reasons .sec__inner { padding: 32px var(--gutter); }
  .sec--crew .sec__inner { padding: 56px var(--gutter) 56px var(--gutter); }

  .hero { padding-bottom: 76px; }
  .phero { padding-bottom: 60px; gap: 16px; }
  .hero h1 { font-size: 34px; }
  .phero h1 { font-size: 32px; }
  .sec__title { font-size: 28px; }
  .sec__title--sm { font-size: 26px; }
  .cta-band__title { font-size: 24px; }
  .cta-band--flat .cta-band__title { font-size: 24px; }
  .row__t { font-size: 22px; }
  .panel__t { font-size: 22px; }
  .cinfo__phone { font-size: 24px; }
  .step__t { font-size: 19px; }
  .hero-trust { flex-wrap: wrap; gap: 10px 18px; }
  .hero-actions { flex-wrap: wrap; }
  .hero-eyebrow { flex-wrap: wrap; }

  .crew-photo { height: 300px; }

  .cta-band { padding: 32px 28px; }

  .site-footer__brand { flex-direction: column; gap: 12px; }
  .site-footer__inner { padding: 32px var(--gutter); }
  .site-footer__line { text-align: center; line-height: 1.8; }
}

/* --- 480 — phone ------------------------------------------------ */
@media (max-width: 480px) {
  :root {
    --gutter: 20px;
    --gutter-hero: 20px;
    --hill-h: 64px;
    --shell-pad: 20px;
  }
  /* at 64px tall the dome's flanks fall below the band's clip and the curve
     is cut flat short of the edges. Overscan the svg 15% each side (the band
     clips it) so only the higher, central part of the curve is on screen. */
  .hero-hill { left: -15%; width: 130%; }
  .hero h1 { font-size: min(30px, 8.5vw); }  /* the nowrap line still fits under 360 */
  .phero h1 { font-size: 28px; }
  .phero__kicker { font-size: 12px; letter-spacing: 1.6px; }
  /* 1.2px (the trust row's spacing) keeps the bolt beside the line at 360 */
  .hero-eyebrow { gap: 8px; }
  .hero-eyebrow span { font-size: 12px; letter-spacing: 1.2px; }
  /* the row wraps to two lines here, which leaves a diamond dangling at the
     end of line one — the gap does the separating instead */
  .hero-trust i { display: none; }
  .hero-trust { gap: 8px 18px; font-size: 12px; letter-spacing: 1.4px; }
  /* side by side down to 360: 14px labels, and the spare width shared out */
  .hero-actions { flex-wrap: nowrap; gap: 10px; width: 100%; }
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary { flex: 1 1 auto; padding: 16px 10px; font-size: 14px; white-space: nowrap; text-align: center; }
  .cta-band__actions { flex-direction: column; }
  .cta-band__actions a { text-align: center; }
  .estimate-card { padding: 20px; }
  /* under ~400 the badge drops below the brand rather than both labels breaking */
  .estimate-card__head { flex-wrap: wrap; gap: 6px 16px; }
  .estimate-card__title,
  .estimate-card__badge { white-space: nowrap; }
  /* the foot's two-up row squeezes "Book yours" onto two lines below ~480 */
  .estimate-card__foot { flex-direction: column; align-items: stretch; gap: 14px; }
  .estimate-card__foot .btn-ghost-green { text-align: center; }
  .reason,
  .service,
  .tile,
  .bio { padding: 18px; }
  /* the portrait beside 20px copy leaves under 200px for the name */
  .bio { flex-direction: column; }
  .split__media img,
  .row img,
  .panel img { height: 200px; }
  .supplier-ph { width: 100%; }
  .crew-photo { height: 260px; }
}

/* ===============================================================
   PHONE PASS (06-01)
   Found by measuring the built pages at 360 / 390 / 430 / 844x390,
   not by inspection: copy under 14px, tap boxes under 44px, form
   fields under 16px (iOS zooms the page on focus), wrapped section
   heads left-aligned under a centred label, and a menu panel taller
   than a landscape screen. 1024 is the ladder's own line — it is
   where the mobile header takes over, and every phone in either
   orientation is below it. Nothing here applies above 1024px.
   =============================================================== */
@media (max-width: 1024px) {
  /* --- readable without zooming: sentence copy 14px, tags 12px --- */
  .reason__c,
  .service__c,
  .tile__c,
  .pillar__c,
  .alert,
  .cform__note,
  .cform__f label,
  .site-footer__line,
  .service .text-link,
  .btn-ghost-green { font-size: 14px; }
  .estimate-card__badge,
  .supplier-ph { font-size: 12px; }
  /* the no-widow rule, for the one hero line that wraps only below 1024 */
  .estimate-card__note { text-wrap: pretty; }
  /* 16px is the size below which iOS Safari zooms the page on focus */
  .cform__f input,
  .cform__f textarea { font-size: 16px; }

  /* --- section heads: one alignment. They are centred on desktop
     because a one-line title is centred by the flex column; once it
     wraps, the title falls back to left while its label stays centred. --- */
  .sec__inner > .sec__label,
  .sec__inner > .sec__title,
  .sec__inner > .sec__sub { text-align: center; }
  .sec__inner > .sec__title { text-wrap: balance; }

  /* --- tap boxes: 44px, with the visible text left where it was --- */
  .text-link,
  .btn-ghost-green {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .btn-ghost-green { justify-content: center; }
  .row__t a,
  .cinfo__facts a {
    display: inline-block;
    padding: 10px 0;
    margin: -10px 0;
  }
  .cinfo__phone a { display: inline-flex; align-items: center; min-height: 44px; }
  /* phone and email are the actions a phone visitor came for: each its own 44px target */
  .site-footer__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 6px;
  }
  .site-footer__line a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
}

/* the menu panel is 408px tall: in landscape that is past the bottom of the screen */
@media (max-width: 1024px) and (max-height: 500px) {
  .mnav__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}

@media (max-width: 720px) {
  /* column gap + the heading's default margin stacked into a ~75px hole */
  .panel__t { margin: 0; }
  .panel--col { gap: 14px; }
}

@media (max-width: 480px) {
  /* four service links: a tidy 2 x 2 instead of 2 + 2 ragged */
  .phero__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
  .phero__link { text-align: center; padding: 13px 8px; }
}