/* ============================================================================
   Homepage-only composition — "Clear Coast"
   ========================================================================== */

/* ------------------------------------------------------------------ HERO -- */
.hero{
  position:relative;
  padding:clamp(48px,7vh,86px) 0 8px;
  overflow:clip;                 /* contains the fracture radial */
}
/* The signature mark. Its CENTRE must land on open paper - a radial whose
   middle is covered shows only ray-ends and reads as stray lines. In the hero
   the only real clearance is the gutter under the CTAs, so it sits there,
   small and quiet; the section marks below carry it at full size. */
.hero .frac{bottom:2%;left:50.5%;width:min(330px,34vw)}

.hero-grid{
  display:grid;grid-template-columns:74px 1.32fr .78fr;gap:0 46px;align-items:start;
}

/* vertical rail — rotated brand + seal, the couture-atelier detail */
.rail{
  position:relative;align-self:stretch;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;gap:22px;padding:6px 0 28px;
  border-right:1px solid var(--line-soft);
}
.rail .rseal{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;font-family:'Fraunces',serif;font-size:15px;
  color:var(--ink-soft);flex-shrink:0;
}
.rail .rtext{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:'Spline Sans Mono',monospace;font-size:9.5px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ink-mute);white-space:nowrap;
}
/* hairline running the rail's length so the seal and label read as one column */
.rail::after{
  content:"";width:1px;flex:1;min-height:40px;background:var(--line-soft);
}

/* the H1 — masked line rise, serif × grot collision */
.hero h1{
  font-size:clamp(31px,4.5vw,62px);line-height:.98;letter-spacing:-.021em;
  margin:0 0 26px;
}
.hero h1 .ln{display:block;overflow:hidden;padding:.055em 0}
.hero h1 .ln > span{
  display:block;white-space:nowrap;transform:translateY(106%);
  animation:up 1.05s var(--ease) forwards;
}
.hero h1 .grot{font-size:.95em}
.hero h1 .ser-i{font-size:1.03em;line-height:1.02}
.hero h1 .out{
  -webkit-text-stroke:2px var(--ink);-webkit-text-fill-color:transparent;
  color:transparent;paint-order:stroke fill;
}
.hero h1 .gr{color:var(--green)}
.hero h1 .ln:nth-child(1) > span{animation-delay:.05s}
.hero h1 .ln:nth-child(2) > span{animation-delay:.14s}
.hero h1 .ln:nth-child(3) > span{animation-delay:.23s}
.hero h1 .ln:nth-child(4) > span{animation-delay:.32s}
.hero h1 .ln:nth-child(5) > span{animation-delay:.41s}
@keyframes up{to{transform:translateY(0)}}

.hero .lede{
  opacity:0;animation:fadeUp .95s var(--ease) .58s forwards;max-width:56ch;
}
.hero-pts{
  display:flex;flex-wrap:wrap;gap:9px 22px;margin:24px 0 27px;
  opacity:0;animation:fadeUp .95s var(--ease) .72s forwards;
}
.hero-pts li{
  display:flex;align-items:center;gap:9px;font-size:13.8px;color:var(--ink-soft);
}
.hero-pts svg{color:var(--green-br);flex-shrink:0}
.hero-acts{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  opacity:0;animation:fadeUp .95s var(--ease) .86s forwards;
}
.hero-call{
  font-size:14px;color:var(--ink-soft);margin-top:20px;
  opacity:0;animation:fadeUp .95s var(--ease) .96s forwards;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* credential plate — the inspection card */
.hero-plate{
  opacity:0;animation:fadeUp 1s var(--ease) 1.02s forwards;position:relative;
}
.hero-plate .figure{margin-bottom:34px;position:relative}
.hero-plate .figure .fig{aspect-ratio:1;border:1px solid var(--line)}
/* the one element that breaks a boundary: the seal straddles the image edge */
.hero-plate .stamp{
  position:absolute;left:-26px;bottom:-24px;width:92px;height:92px;
  border-radius:50%;background:var(--paper);border:1px solid var(--ink);
  display:grid;place-items:center;text-align:center;transform:rotate(-8deg);
  z-index:3;box-shadow:0 0 0 5px var(--paper);
}
.hero-plate .stamp span{
  font-family:'Spline Sans Mono',monospace;font-size:8px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--green);line-height:1.5;
}
.hero-plate .stamp b{display:block;font-family:'Fraunces',serif;font-size:17px;
  font-weight:400;color:var(--ink);letter-spacing:0;margin-bottom:2px}

/* hero bottom rule with the scroll cue */
.hero-foot{
  margin-top:clamp(38px,5vh,64px);padding:15px 0;
  border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  opacity:0;animation:fadeUp .9s var(--ease) 1.2s forwards;
}
.hero-foot .mono{color:var(--ink-mute)}
.cue{display:flex;align-items:center;gap:9px;color:var(--ink-mute)}
.cue svg{animation:bob 4.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ------------------------------------------------------- section headings -- */
.sec-hd{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:end;margin-bottom:46px}
.sec-hd--solo{grid-template-columns:1fr;max-width:78ch}

/* ------------------------------------------------------------ why / cells -- */
.why-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.why-grid .cell{padding:26px 20px}

/* --------------------------------------------------------------- the map --
   The heading spans the full width; the plate and the map sit below it as two
   height-matched columns (align-items:stretch), so both columns start and end
   on the same lines instead of floating at different heights. */
.map-hd{margin-bottom:34px;max-width:44ch}
.map-h2{font-size:clamp(26px,3.2vw,40px);line-height:1.1;margin-bottom:0}

.map-sec{
  display:grid;grid-template-columns:.8fr 1.2fr;gap:34px;align-items:stretch;
}
/* the plate fills its column and pins the CTA to the bottom edge */
.map-plate{display:flex;flex-direction:column}
.map-dl{margin-bottom:4px}
.map-plate .wx{margin-top:auto}      /* pushes weather + button to the bottom */
.map-btn{align-self:flex-start;margin-top:20px}
.mapwrap{display:flex}
.mapwrap iframe{height:100%;min-height:clamp(340px,46vh,470px)}

/* ------------------------------------------------------------- the areas -- */
.areas-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
@media(min-width:981px){
  .areas-grid > div:first-child{position:sticky;top:calc(var(--bar) + 34px)}
}

/* --------------------------------------------------------- closing plate -- */
.close-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}

@media(max-width:1080px){
  .why-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .rail{display:none}
  .hero .frac{opacity:.5;top:auto;bottom:-8%;left:auto;right:-26%;width:min(430px,86vw)}
  .hero-plate{max-width:520px}
  .sec-hd{grid-template-columns:1fr;gap:20px}
  .map-sec,.areas-grid,.close-grid{grid-template-columns:1fr;gap:30px}
}
@media(max-width:760px){
  .why-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .why-grid{grid-template-columns:1fr}
  .hero-plate .stamp{width:70px;height:70px;left:6px;bottom:-16px}
}
@media(prefers-reduced-motion:reduce){
  .hero h1 .ln > span,.hero .lede,.hero-pts,.hero-acts,.hero-call,.hero-plate,.hero-foot{
    animation:none!important;opacity:1!important;transform:none!important;
  }
}

/* ========================================================= COVERAGE PLATE ==
   The areas section: a drawn county schematic with the served cities plotted,
   beside a typeset index. Replaces the flat pill field.
   ========================================================================== */
.cov{display:grid;grid-template-columns:1.14fr .86fr;gap:52px;align-items:start}

.cov-fig{margin:0;position:sticky;top:calc(var(--bar) + 30px)}
.cov-hd{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding-bottom:12px;border-bottom:1px solid var(--line);
}
.cov-hd .mono{color:var(--ink-mute)}

.cov-svg{
  width:100%;height:auto;display:block;margin-top:14px;
  border:1px solid var(--line-soft);background:var(--paper-2);
}
.cov-sea{fill:rgba(16,28,30,.055)}
.cov-coast{stroke:var(--ink);stroke-width:1.4;opacity:.5}
.cov-line{stroke:var(--ink);stroke-width:1;opacity:.3;stroke-dasharray:7 5}
.cov-relief path{stroke:var(--ink);stroke-width:.7;opacity:.16;fill:none}
.cov-grid path{stroke:var(--ink);stroke-width:.5;opacity:.075}

/* primary location */
.cov-home-halo{fill:rgba(31,143,58,.12);stroke:var(--green-br);stroke-width:1;stroke-dasharray:3 4}
.cov-home-dot{fill:var(--green-btn)}
.cov-home-t{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:12px;
  letter-spacing:.02em;fill:var(--ink);
}
.cov-home-s{
  font-family:'Spline Sans Mono',monospace;font-size:7.5px;letter-spacing:.16em;
  text-transform:uppercase;fill:var(--ink-mute);
}

/* served-city survey points */
.cov-pt{cursor:pointer}
.cov-hit{fill:transparent}
.cov-dot{fill:var(--ink);transition:fill .4s var(--ease),r .4s var(--ease)}
.cov-ring{
  fill:none;stroke:var(--green-br);stroke-width:1.2;
  opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.55);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.cov-t{
  font-family:'Spline Sans Mono',monospace;font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;fill:var(--ink-soft);transition:fill .4s var(--ease);
}
@media(hover:hover){
  .cov-pt:hover .cov-dot{fill:var(--green-btn)}
  .cov-pt:hover .cov-ring{opacity:1;transform:scale(1)}
  .cov-pt:hover .cov-t{fill:var(--green)}
}
.cov-pt:focus-visible{outline:none}
.cov-pt:focus-visible .cov-ring{opacity:1;transform:scale(1)}
.cov-pt:focus-visible .cov-dot{fill:var(--green-btn)}
.cov-pt:focus-visible .cov-t{fill:var(--green)}

.cov-cap{
  margin-top:12px;padding-top:11px;border-top:1px solid var(--line-soft);
  color:var(--ink-mute);text-transform:none;letter-spacing:.06em;
  font-size:10.5px;line-height:1.7;max-width:52ch;
}

/* --- the index --- */
.cov-lede{margin-bottom:24px}
.cov-list{border-top:2px solid var(--ink)}
.cov-li{
  display:flex;align-items:baseline;gap:10px;padding:8.5px 0;
  border-bottom:1px solid var(--line-soft);font-size:14px;
  transition:padding-left .38s var(--ease);
}
.cl-n{
  font-family:'Spline Sans Mono',monospace;font-size:9px;letter-spacing:.12em;
  color:var(--ink-mute);flex-shrink:0;
}
.cl-a{color:var(--ink);flex-shrink:0;transition:color .35s var(--ease)}
.cl-a--flat{color:var(--ink-soft)}
.cl-led{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px);min-width:14px}
.cl-s{
  flex-shrink:0;color:var(--green);font-size:8.5px;letter-spacing:.15em;
  transition:color .35s var(--ease);
}
.cl-s--flat{color:var(--ink-mute)}
@media(hover:hover){
  .cov-li.has:hover{padding-left:9px}
  .cov-li.has:hover .cl-a{color:var(--green)}
}

.cov-hoods{margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.cov-hoods-l{font-size:14.4px;line-height:1.68;color:var(--ink-soft);margin-bottom:13px;text-wrap:pretty}
.cov-hoods-t{font-size:13.6px;line-height:2;color:var(--ink-soft)}
.cv-h{white-space:nowrap}
.cv-sep{color:var(--green-br)}

@media(max-width:1080px){
  .cov{grid-template-columns:1fr;gap:40px}
  .cov-fig{position:static}
}
@media(max-width:560px){
  .cov-svg{border-left:0;border-right:0}
  .cov-t{font-size:11px}
  .cov-home-t{font-size:14px}
}

/* description for the four services that are not a diagram zone - client copy
   must render here too, not just the title and CTA */
.pm-d{
  display:block;margin-top:6px;font-size:13px;line-height:1.6;
  color:var(--ink-soft);text-wrap:pretty;
}
.pm-d + .pm-d{margin-top:5px}

@media(max-width:560px){
  /* figure header: the hint wraps under the caption rather than clipping */
  .plan-fig-hd,.cov-hd{flex-wrap:wrap;gap:4px 14px}
  .plan-fig-hd .mono,.cov-hd .mono{font-size:9px;letter-spacing:.18em}
}