/* ============================================================
   HASTINGS MARINE CONSTRUCTION — homepage concept
   Blue tokens below are pulled from the live site's own theme
   CSS (hastingsmarineconstruction.com — a Beaver Builder /
   WordPress build), not estimated from the logo: #2b7bb9 is the
   live site's link/nav/accent color, #368ac5 its button color,
   #1f5a87 its button border and hover-dark. Client confirmed the
   blue direction (feedback 2026-09-15); green is not used as a
   structural color anywhere on this page.
   ============================================================ */
:root{
  --water:#2b7bb9;
  --water-d:#1f5a87;
  --water-l:#368ac5;
  --ink:#08121a;
  --ink-2:#0e1d28;
  --paper:#ffffff;
  --bone:#f5f2ea;
  --bone-d:#ebe6d9;
  --line:#dbd5c4;
  --body:#2f3539;
  --muted:#596066;
  --chip:#858b8f;

  --sans:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --cond:"Barlow Condensed","Barlow Semi Condensed",system-ui,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;

  --wrap:1200px;
  --gut:clamp(1.15rem,4vw,2.5rem);
  --r:3px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--paper);color:var(--body);overflow-x:clip;
  font-family:var(--sans);font-size:clamp(1.02rem,.98rem + .25vw,1.14rem);
  line-height:1.62;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--water-d)}
h1,h2,h3,h4{margin:0;color:var(--ink);line-height:1.04;font-weight:700}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

/* The header is sticky, so in-page anchors need clearance. */
section[id]{scroll-margin-top:clamp(72px,9vh,104px)}

.wrap{width:min(100% - (2 * var(--gut)),var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--water-d);color:#fff;padding:.85rem 1.25rem;font-weight:600}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--water-l);outline-offset:3px}

/* ============================================================
   MOTION LAYER (GSAP + ScrollTrigger)
   Nothing here applies unless the inline script in <head> adds
   .motion to <html>, which it only does when the visitor has NOT
   asked for reduced motion. A watchdog in the same script strips
   .motion again if GSAP fails to load, so a blocked CDN leaves a
   fully visible page rather than a blank one.
   ============================================================ */
.motion [data-anim]{opacity:0}
.motion .svc__card{opacity:0}
.motion .towns li{opacity:0}
.motion .motto blockquote{opacity:0}
.motion .bar{transform:scaleX(0)}
/* Oversized so the parallax translate can never expose an edge. */
.motion .hero__media{height:122%;top:-11%}

/* A short animated rule that replaces a static border-top, so it can
   be drawn in rather than just appearing. */
.bar{display:block;height:2px;background:var(--water-l);transform-origin:left center;margin-bottom:1.1rem}

/* ---------- type scale ---------- */
.eyebrow{
  font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;font-size:.82rem;color:var(--water-d);
  margin:0 0 .9rem;display:flex;align-items:center;gap:.7rem;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line);max-width:120px}
.eyebrow--dark{color:var(--water-l)}
.eyebrow--dark::after{background:rgba(255,255,255,.22)}

.h1{font-family:var(--cond);font-weight:700;font-size:clamp(2.9rem,1.7rem + 5.4vw,5.5rem);letter-spacing:-.012em;line-height:.96}
.h2{font-family:var(--cond);font-weight:700;font-size:clamp(2.05rem,1.5rem + 2.3vw,3.3rem);letter-spacing:-.008em;line-height:1.02}
.h3{font-family:var(--cond);font-weight:600;font-size:clamp(1.32rem,1.2rem + .55vw,1.65rem);letter-spacing:.002em;line-height:1.12}
.lede{font-size:clamp(1.1rem,1.02rem + .42vw,1.32rem);line-height:1.55;color:var(--muted)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--cond);font-weight:600;font-size:1.12rem;letter-spacing:.05em;
  text-transform:uppercase;text-decoration:none;padding:.92rem 1.6rem;border-radius:var(--r);
  border:2px solid transparent;transition:background-color .18s,color .18s,border-color .18s,translate .18s;
}
/* `translate` rather than `transform` so a GSAP transform on a parent
   or on the element itself never cancels the hover lift. */
.btn:hover{translate:0 -1px}
.btn--primary{background:var(--water-d);color:#fff}
.btn--primary:hover{background:#163f5c}
.btn--ghost{border-color:currentColor;color:var(--ink);background:transparent}
.btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--ghost-light{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.btn--ghost-light:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn svg{width:1.05em;height:1.05em;flex:none}

/* ---------- placeholder chip ---------- */
.ph{
  display:inline-flex;align-items:center;gap:.45rem;
  border:1px dashed var(--chip);color:var(--chip);background:transparent;
  font-family:var(--cond);font-size:.83rem;letter-spacing:.11em;text-transform:uppercase;
  padding:.28rem .6rem;border-radius:var(--r);font-weight:600;
}
.ph-note{font-size:.9rem;color:var(--chip);font-style:italic;margin-top:.5rem}

/* ============ HEADER ============ */
.topbar{background:var(--ink);color:#c8d0d6;font-size:.86rem}
.topbar .wrap{display:flex;gap:1.5rem;justify-content:space-between;align-items:center;padding:.5rem 0;flex-wrap:wrap}
.topbar a{color:#e0e6eb;text-decoration:none}
.topbar a:hover{text-decoration:underline}
.topbar .lic{font-family:var(--cond);letter-spacing:.09em;text-transform:uppercase;font-size:.8rem;color:#8fa2b0}
/* Hidden below the nav breakpoint. It costs 104px at phone width — more than a
   fifth of the first screen — to repeat two license numbers and an email that
   both appear twice more further down every page. The hero's own trust line and
   the footer carry the same information where there is room for it. */
@media (max-width:960px){.topbar{display:none}}

.hdr{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(8,18,26,.04);transition:box-shadow .3s ease}
.hdr .wrap{display:flex;align-items:center;gap:1.5rem;justify-content:space-between;padding:.75rem 0;transition:padding .3s ease}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand img{height:52px;width:auto;transition:height .3s ease}
/* Condensed state, toggled by ScrollTrigger once the page has moved. */
.hdr--sm .wrap{padding:.4rem 0}
.hdr--sm .brand img{height:40px}
.hdr--sm{box-shadow:0 8px 26px -18px rgba(8,18,26,.5)}
.nav{display:flex;align-items:center;gap:1.45rem}
.nav a{
  font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.075em;
  font-size:1.02rem;color:var(--ink);text-decoration:none;padding:.3rem 0;border-bottom:2px solid transparent;
  transition:color .18s,border-color .18s;
}
.nav a:hover{color:var(--water-d);border-bottom-color:var(--water-d)}
.hdr-cta{display:flex;align-items:center;gap:.85rem}
.hdr-portal{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  font-size:.92rem;color:var(--ink);text-decoration:none;white-space:nowrap;
  border:2px solid var(--line);border-radius:var(--r);padding:.5rem .95rem;
  transition:border-color .18s,color .18s;
}
.hdr-portal:hover{border-color:var(--water-d);color:var(--water-d)}
.hdr-portal svg{width:1.05em;height:1.05em;flex:none}
.hdr-phone{
  font-family:var(--cond);font-weight:700;font-size:1.35rem;color:var(--ink);
  text-decoration:none;letter-spacing:.01em;white-space:nowrap;
}
.hdr-phone:hover{color:var(--water-d)}
@media (max-width:960px){.nav{display:none}}
@media (max-width:560px){.hdr-phone{font-size:1.22rem}.brand img{height:40px}}
@media (max-width:480px){.hdr-portal .txt{display:none}.hdr-portal{padding:.5rem .65rem}}

/* ============ HERO ============ */
.hero{position:relative;isolation:isolate;background:var(--ink);color:#fff;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__img,.hero__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* The poster still is the LCP element. The loop is invisible until it is
   genuinely playing, so a slow or blocked connection never shows a black box. */
.hero__vid{opacity:0;transition:opacity 1.1s ease;border:0}
.hero__vid.is-on{opacity:1}

/* ---------- video controls (WCAG 2.2.2 — anything auto-playing past five
     seconds needs a way to stop it) ---------- */
.vid-toggle{
  position:absolute;z-index:3;display:none;align-items:center;justify-content:center;
  width:2.6rem;height:2.6rem;padding:0;border-radius:50%;cursor:pointer;
  background:rgba(8,18,26,.55);border:1px solid rgba(255,255,255,.42);color:#fff;
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  transition:background-color .18s,border-color .18s;
}
.vid-toggle.is-live{display:inline-flex}
.vid-toggle:hover{background:rgba(8,18,26,.85);border-color:#fff}
.vid-toggle svg{width:1.05rem;height:1.05rem;display:block;fill:currentColor}
.vid-toggle .i-play{display:none}
.vid-toggle[aria-pressed="true"] .i-play{display:block}
.vid-toggle[aria-pressed="true"] .i-pause{display:none}
.vid-toggle--hero{top:1rem;right:var(--gut)}

.vidfig{margin:clamp(2rem,4vw,3rem) 0 0;position:relative}
.vidfig video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:var(--r);background:var(--ink-2)}
.vidfig .vid-toggle{right:.85rem;bottom:3.2rem}
.vidfig figcaption{font-size:.82rem;color:#8a99a5;font-style:italic;margin-top:.7rem}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(8,18,26,.72) 0%,rgba(8,18,26,.42) 42%,rgba(8,18,26,.86) 100%),
    linear-gradient(90deg,rgba(8,18,26,.78) 0%,rgba(8,18,26,.24) 62%,rgba(8,18,26,.1) 100%);
}
.hero .wrap{padding:clamp(4rem,10vw,8.5rem) 0 clamp(3rem,6vw,5rem)}
.hero__inner{max-width:41rem}
.hero .h1{color:#fff;text-wrap:balance}
/* Each headline line sits in its own overflow-hidden block so GSAP can
   slide it up from behind a mask rather than just fading it in. */
.h1 .ln{display:block;overflow:hidden;padding-bottom:.07em;margin-bottom:-.07em}
.h1 .ln > span{display:block}
.hero .h1 em{font-style:normal;color:var(--water-l)}
.hero__sub{margin:1.35rem 0 2rem;font-size:clamp(1.1rem,1rem + .5vw,1.35rem);color:#dce3e9;line-height:1.5;max-width:35rem}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.85rem}
.hero__lic{
  margin-top:2.5rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.2);
  font-family:var(--cond);letter-spacing:.1em;text-transform:uppercase;font-size:.85rem;color:#a9bbc9;
  display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;
}
.hero__cap{
  position:absolute;right:var(--gut);bottom:.7rem;font-size:.72rem;color:rgba(255,255,255,.52);
  letter-spacing:.04em;margin:0;
}
@media (max-width:760px){.hero__cap{position:static;text-align:left;padding:0 0 1rem;color:rgba(255,255,255,.5)}}

/* ============ TRUST STRIP ============ */
.trust{background:var(--bone);border-bottom:1px solid var(--line)}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.trust__item{padding:1.9rem 1.5rem;border-left:1px solid var(--line)}
.trust__item:first-child{border-left:0;padding-left:0}
.trust__n{font-family:var(--cond);font-weight:700;font-size:2.5rem;line-height:1;color:var(--water-d);display:block}
.trust__l{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;font-size:.86rem;color:var(--muted);margin-top:.45rem;display:block;line-height:1.35}
@media (max-width:860px){
  .trust__grid{grid-template-columns:repeat(2,1fr)}
  .trust__item{border-left:0;border-top:1px solid var(--line);padding:1.4rem 0}
  .trust__item:nth-child(2){border-left:1px solid var(--line);padding-left:1.4rem}
  .trust__item:nth-child(4){border-left:1px solid var(--line);padding-left:1.4rem}
  .trust__item:first-child,.trust__item:nth-child(2){border-top:0}
}

/* ============ SECTION SHELL ============ */
.sec{padding:clamp(3.75rem,8vw,6.75rem) 0}
.sec--bone{background:var(--bone)}
.sec--ink{background:var(--ink);color:#d0d9e0}
.sec--ink .h2,.sec--ink .h3{color:#fff}
.sec__head{max-width:44rem;margin-bottom:clamp(2.25rem,4vw,3.25rem)}
.sec__head p{margin-top:1.05rem}
.h2 + .lede,.h2 + p{margin-top:1.15rem}
.sec--ink .sec__head p{color:#aebac3}

/* A smaller heading used to open a track inside a section. */
.track__head{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.6rem}
.track__head h3{font-family:var(--cond);font-weight:700;font-size:clamp(1.5rem,1.3rem + .9vw,2rem);letter-spacing:-.004em}
.track__note{font-size:.95rem;color:var(--muted);font-style:italic;margin:0}

/* ============ SERVICES ============ */
.svc{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.25rem,2.5vw,2rem)}
.svc__card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .2s,translate .2s,border-color .2s;
}
.svc__card:hover{box-shadow:0 14px 34px -18px rgba(8,18,26,.42);translate:0 -2px;border-color:#c4bda8}
.svc__fig{margin:0;position:relative;aspect-ratio:4/3;background:var(--bone-d);overflow:hidden}
.svc__fig img{width:100%;height:100%;object-fit:cover}
.svc__tag{
  position:absolute;left:0;bottom:0;background:var(--water-d);color:#fff;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;
  padding:.4rem .85rem;font-weight:600;z-index:2;
}
.svc__body{padding:1.5rem 1.5rem 1.65rem;flex:1;display:flex;flex-direction:column}
.svc__q{font-family:var(--serif);font-style:italic;font-size:1.02rem;color:var(--water-d);margin:0 0 .55rem;line-height:1.4}
.svc__card .h3{margin-bottom:.6rem}
.svc__body p{font-size:.99rem;color:var(--muted)}
@media (max-width:820px){.svc{grid-template-columns:1fr}}

.svc-more{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(1.25rem,2.5vw,2rem);border-radius:var(--r);overflow:hidden}
.svc-more__i{background:#fff;padding:1.5rem}
.svc-more__i h3{font-family:var(--cond);font-weight:600;font-size:1.22rem;color:var(--ink);margin:0 0 .4rem}
.svc-more__i p{font-size:.95rem;color:var(--muted);margin:0}
@media (max-width:980px){.svc-more{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.svc-more{grid-template-columns:1fr}}

.prompt-strip{
  margin-top:clamp(1.25rem,2.5vw,2rem);background:var(--bone);border:1px solid var(--line);
  border-radius:var(--r);padding:1.35rem 1.6rem;
}
.prompt-strip p{margin:0;font-size:1.02rem}
.prompt-strip strong{color:var(--ink)}

/* ============ COMMERCIAL BAND ============ */
/* The marina footage carries this band now, as a real figure rather than
   wallpaper — so the background is flat ink and the aerial still went back
   to the process band where it was working. */
.cband{position:relative;isolation:isolate;background:var(--ink);color:#d0d9e0;overflow:hidden}
.cband::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70rem 36rem at 86% 6%,rgba(43,123,185,.26),transparent 62%)}
.cband .h2,.cband .h3{color:#fff}
.cband .sec__head p{color:#b6c2cc}
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
.cap h3{font-family:var(--cond);font-weight:600;font-size:1.3rem;color:#fff;margin:0 0 .5rem}
.cap p{font-size:.96rem;color:#b6c2cc;margin:0}
@media (max-width:820px){.caps{grid-template-columns:1fr}}

/* ============ PROCESS ============ */
.proc{position:relative;isolation:isolate;color:#fff;background:var(--ink)}
.proc__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.34}
.proc::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,18,26,.9),rgba(8,18,26,.72))}
.proc .h2{color:#fff}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
.step__n{font-family:var(--cond);font-weight:700;font-size:.86rem;letter-spacing:.16em;color:var(--water-l);text-transform:uppercase;display:block;margin-bottom:.5rem}
.step h3{font-family:var(--cond);font-weight:600;font-size:1.3rem;color:#fff;margin:0 0 .5rem}
.step p{font-size:.96rem;color:#b6c2cc;margin:0}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* ============ FAMILY ============ */
.fam{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.35rem,2.5vw,2rem)}
.fam__c .bar{height:3px;background:var(--water-d);margin-bottom:1.2rem}
.fam__c h3{font-family:var(--cond);font-weight:700;font-size:1.42rem;margin:0 0 .12rem}
.fam__role{font-family:var(--cond);text-transform:uppercase;letter-spacing:.11em;font-size:.82rem;color:var(--water-d);font-weight:600;display:block;margin-bottom:.85rem}
.fam__c p{font-size:.97rem;color:var(--muted)}
@media (max-width:960px){.fam{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.fam{grid-template-columns:1fr}}

/* ============ MOTTO ============ */
.motto{background:var(--water-d);color:#fff;text-align:center;padding:clamp(3.5rem,7vw,5.5rem) 0}
.motto blockquote{
  margin:0 auto;max-width:36rem;font-family:var(--serif);
  font-size:clamp(1.55rem,1.1rem + 2.1vw,2.55rem);line-height:1.24;color:#fff;text-wrap:balance;
}
.motto cite{
  display:block;margin-top:1.5rem;font-family:var(--cond);font-style:normal;
  text-transform:uppercase;letter-spacing:.16em;font-size:.85rem;color:#cfe8fa;
}
.motto .btn{margin-top:2.15rem}

/* ============ AREA ============ */
.area{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.towns{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.35rem;padding:0}
.towns li{
  list-style:none;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:.42rem .8rem;font-family:var(--cond);font-size:1rem;letter-spacing:.03em;color:var(--ink);
}
.area h3{margin-bottom:.75rem}
.area__col + .area__col{margin-top:0}
.area__block + .area__block{margin-top:2rem}
@media (max-width:880px){.area{grid-template-columns:1fr}}

/* ============ CTA ============ */
.cta{background:var(--ink-2);color:#fff}
.cta__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.cta .h2{color:#fff}
.cta p{color:#b6c2cc}
.contact{list-style:none;margin:0;padding:0;display:grid;gap:1.15rem}
.contact li{display:flex;gap:1rem;align-items:flex-start}
.contact svg{width:1.35rem;height:1.35rem;flex:none;margin-top:.28rem;color:var(--water-l)}
.contact a{color:#fff;text-decoration:none;font-weight:600}
.contact a:hover{text-decoration:underline}
.contact .lbl{display:block;font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;color:#8494a1;margin-bottom:.1rem}
.contact .big{font-family:var(--cond);font-size:1.85rem;font-weight:700;letter-spacing:.01em}
@media (max-width:880px){.cta__grid{grid-template-columns:1fr}}

/* ============ FOOTER ============ */
.ftr{background:var(--ink);color:#92a0ab;padding:clamp(3rem,5vw,4rem) 0 clamp(2.5rem,4vw,3.25rem);border-top:1px solid rgba(255,255,255,.09);font-size:.94rem}
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem}
.ftr img{height:56px;width:auto;margin-bottom:1.15rem;filter:brightness(0) invert(1);opacity:.92}
.ftr h4{font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-size:.85rem;color:#fff;margin:0 0 1rem}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.ftr a{color:#bcc8d2;text-decoration:none}
.ftr a:hover{color:#fff;text-decoration:underline}
.ftr__lic{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:.6rem 2rem;font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;color:#7c8d9a}
.ftr__base{margin-top:1.35rem;font-size:.84rem;color:#707f8a}
@media (max-width:980px){.ftr__grid{grid-template-columns:1fr 1fr;gap:2.25rem}}
@media (max-width:620px){.ftr__grid{grid-template-columns:1fr;gap:2rem}.ftr{padding-bottom:7rem}}

/* ============ MOBILE CALL BAR ============ */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:var(--water-d);border-top:2px solid #00456f;
}
.callbar a{
  display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.95rem;
  color:#fff;text-decoration:none;font-family:var(--cond);font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;font-size:1.15rem;
}
.callbar svg{width:1.15em;height:1.15em}
@media (max-width:820px){.callbar{display:block}}

hr.rule{border:0;border-top:1px solid var(--line);margin:clamp(2.5rem,5vw,4rem) 0}
.sec--ink hr.rule,.cband hr.rule{border-color:rgba(255,255,255,.14)}

/* ============================================================
   MULTI-PAGE COMPONENTS
   Everything below was added when the concept went from a single
   homepage to a full site. Nothing above it changed.
   ============================================================ */

/* ---------- desktop nav: dropdowns ---------- */
.nav__grp{position:relative}
.nav__grp > a{display:inline-block}
.nav__sub{
  position:absolute;top:100%;left:-1rem;z-index:80;min-width:15rem;
  background:#fff;border:1px solid var(--line);border-top:2px solid var(--water-d);
  box-shadow:0 18px 40px -22px rgba(8,18,26,.55);padding:.5rem 0;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.nav__grp:hover .nav__sub,.nav__grp:focus-within .nav__sub{opacity:1;visibility:visible;transform:translateY(0)}
.nav__sub a{
  display:block;padding:.5rem 1.1rem;border-bottom:0;font-size:.97rem;
  letter-spacing:.055em;white-space:nowrap;
}
.nav__sub a:hover{background:var(--bone);color:var(--water-d)}
.nav a[aria-current="page"]{color:var(--water-d);border-bottom-color:var(--water-d)}
.nav__sub a[aria-current="page"]{background:var(--bone);color:var(--water-d)}

/* ---------- mobile nav ---------- */
.navbtn{
  display:none;width:2.9rem;height:2.9rem;padding:0;cursor:pointer;
  background:transparent;border:2px solid var(--line);border-radius:var(--r);
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.navbtn span{display:block;width:19px;height:2px;background:var(--ink);transition:transform .22s ease,opacity .18s ease}
.navbtn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navbtn[aria-expanded="true"] span:nth-child(2){opacity:0}
.navbtn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{display:none}
@media (max-width:960px){
  .navbtn{display:inline-flex}
  .mnav{display:block;position:sticky;top:0;z-index:55;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 16px 30px -22px rgba(8,18,26,.5)}
  .mnav[hidden]{display:none}
  .mnav__inner{width:min(100% - (2 * var(--gut)),var(--wrap));margin-inline:auto;padding:.9rem 0 1.4rem;display:grid;max-height:min(70vh,34rem);overflow-y:auto}
  .mnav a{text-decoration:none;font-family:var(--cond);letter-spacing:.06em}
  .mnav__top{
    font-weight:700;text-transform:uppercase;font-size:1.06rem;color:var(--ink);
    padding:.7rem 0;border-bottom:1px solid var(--line);
  }
  .mnav__sub{font-weight:500;font-size:1rem;color:var(--muted);padding:.42rem 0 .42rem 1.1rem;border-bottom:1px solid var(--bone-d)}
  .mnav__cta{margin-top:1.1rem;justify-content:center}
}

/* ---------- interior page hero ---------- */
.phero{position:relative;isolation:isolate;background:var(--ink);color:#fff;overflow:hidden}
.phero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.46}
.phero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,rgba(8,18,26,.93) 0%,rgba(8,18,26,.74) 58%,rgba(8,18,26,.6) 100%),
             radial-gradient(60rem 30rem at 88% 0%,rgba(43,123,185,.24),transparent 60%);
}
.phero--flat::after{background:radial-gradient(70rem 34rem at 84% -8%,rgba(43,123,185,.3),transparent 62%)}
.phero .wrap{padding:clamp(2.75rem,6vw,5rem) 0 clamp(2.5rem,5vw,4.25rem)}
.phero__inner{max-width:46rem}
.phero .h1{color:#fff;font-size:clamp(2.35rem,1.6rem + 3.3vw,4rem);text-wrap:balance}
.phero__sub{margin:1.15rem 0 0;font-size:clamp(1.06rem,1rem + .42vw,1.28rem);color:#cfd9e1;line-height:1.5;max-width:40rem}

/* ---------- breadcrumbs ---------- */
.crumbs{background:var(--bone);border-bottom:1px solid var(--line);font-family:var(--cond);font-size:.92rem;letter-spacing:.04em}
.crumbs .wrap{padding:.7rem 0;display:flex;flex-wrap:wrap;align-items:center;gap:.1rem}
.crumbs a{color:var(--water-d);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span[aria-current]{color:var(--muted)}
.crumbs__sep{margin:0 .55rem;color:var(--chip)}

/* ---------- long-form prose ---------- */
.prose{max-width:44rem}
.prose > * + *{margin-top:1.15rem}
.prose h3{font-family:var(--cond);font-weight:700;font-size:clamp(1.42rem,1.25rem + .7vw,1.85rem);margin-top:2.4rem}
.prose h3:first-child{margin-top:0}
.prose ul{margin:0;padding-left:1.15rem}
.prose li{margin-bottom:.5rem}
.prose li::marker{color:var(--water-d)}
.sec--ink .prose{color:#b6c2cc}

/* Two-column: prose left, sticky aside right. */
.withside{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(2rem,4.5vw,4rem);align-items:start}
@media (max-width:900px){.withside{grid-template-columns:1fr}}
.aside{position:sticky;top:7.5rem;background:var(--bone);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem}
.sec--bone .aside{background:#fff}
.aside h3{font-family:var(--cond);font-weight:700;font-size:1.3rem;margin:0 0 .9rem}
.aside dl{margin:0;display:grid;gap:.85rem}
.aside dt{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;font-size:.76rem;color:var(--muted)}
.aside dd{margin:.1rem 0 0;font-size:.98rem;color:var(--ink)}
.aside .btn{margin-top:1.35rem;width:100%}
@media (max-width:900px){.aside{position:static}}

/* ---------- key-facts strip ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.facts__i{background:#fff;padding:1.35rem}
.facts__k{display:block;font-family:var(--cond);text-transform:uppercase;letter-spacing:.11em;font-size:.76rem;color:var(--water-d);margin-bottom:.35rem}
.facts__v{display:block;font-size:.99rem;color:var(--body)}

/* ---------- related cards ---------- */
.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:clamp(1rem,2vw,1.5rem)}
.rel a{
  display:block;text-decoration:none;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:1.35rem;transition:box-shadow .2s,translate .2s,border-color .2s;
}
.rel a:hover{box-shadow:0 14px 34px -20px rgba(8,18,26,.42);translate:0 -2px;border-color:#c4bda8}
.rel h3{font-family:var(--cond);font-weight:600;font-size:1.22rem;color:var(--ink);margin:0 0 .35rem}
.rel p{font-size:.94rem;color:var(--muted);margin:0}
.go{display:inline-block;margin-top:.7rem;font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;color:var(--water-d);font-weight:600}
/* Chevron drawn from borders — Barlow Condensed has no U+2192 and the
   font fallback renders it as tofu. */
.go{position:relative;padding-right:1.15rem}
.go::after{content:"";position:absolute;right:.1rem;top:.34em;width:.38em;height:.38em;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .18s ease}
.svc__card:hover .go,.rel a:hover .go{color:var(--ink)}
.svc__card:hover .go::after,.rel a:hover .go::after{transform:rotate(45deg) translate(2px,-2px)}

/* ---------- FAQ accordion ---------- */
.faq{max-width:52rem;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.15rem 2.5rem 1.15rem 0;position:relative;
  font-family:var(--cond);font-weight:600;font-size:clamp(1.12rem,1.05rem + .3vw,1.3rem);
  color:var(--ink);line-height:1.25;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.35rem;top:1.5rem;width:.72rem;height:.72rem;
  border-right:2px solid var(--water-d);border-bottom:2px solid var(--water-d);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--water-d)}
.faq__a{padding:0 0 1.35rem;max-width:44rem}
.faq__a > * + *{margin-top:.9rem}
.faq__a ol,.faq__a ul{margin:0;padding-left:1.2rem}
.faq__a li{margin-bottom:.45rem}
.faq__a li::marker{color:var(--water-d)}

/* ---------- 404 ---------- */
.nf{min-height:62vh;display:grid;place-items:center;text-align:center;background:var(--ink);color:#d0d9e0;padding:clamp(3rem,8vw,6rem) 0}
.nf .h1{color:#fff}
.nf__code{font-family:var(--cond);font-weight:700;font-size:clamp(4rem,3rem + 8vw,9rem);line-height:.9;color:var(--water-l);letter-spacing:-.02em}
.nf__links{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:2rem}
.nf__links a{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em;font-size:.95rem;font-weight:600;
  color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.35);border-radius:var(--r);padding:.55rem 1rem;
  transition:background-color .18s,border-color .18s,color .18s;
}
.nf__links a:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ---------- misc ---------- */
.lead-note{background:var(--bone);border-left:3px solid var(--water-d);padding:1.15rem 1.4rem;border-radius:0 var(--r) var(--r) 0}
.sec--ink .lead-note{background:rgba(255,255,255,.06);border-left-color:var(--water-l)}
.towns-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:clamp(1.5rem,3vw,2.5rem)}
.towns-grid h3{margin-bottom:.6rem}
.towns-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;font-size:.97rem;color:var(--muted)}
.vals{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:clamp(1.5rem,3vw,2.5rem)}
.vals h3{font-family:var(--cond);font-weight:600;font-size:1.3rem;color:var(--ink);margin:0 0 .5rem}
.sec--ink .vals h3{color:#fff}
.vals p{font-size:.96rem;color:var(--muted);margin:0}
.sec--ink .vals p{color:#b6c2cc}
.tl{max-width:46rem;border-left:2px solid var(--line);padding-left:clamp(1.25rem,3vw,2.25rem);display:grid;gap:2.2rem}
.tl__i{position:relative}
.tl__i::before{content:"";position:absolute;left:calc(-1 * clamp(1.25rem,3vw,2.25rem) - 6px);top:.55rem;width:10px;height:10px;border-radius:50%;background:var(--water-d);box-shadow:0 0 0 4px var(--bone)}
.tl__y{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.84rem;color:var(--water-d);display:block;margin-bottom:.3rem}
.tl__i h3{font-family:var(--cond);font-weight:700;font-size:1.4rem;margin:0 0 .5rem}

/* ---------- embedded JobTread web form ---------- */
/* JobTread sends no resize postMessage, so the height is set here from the
   measured form height plus headroom. If they add fields, raise it — a short
   iframe makes the form scroll inside itself, which is horrible on a phone. */
/* The iframe carries JobTread's own styling — their blue field and a second
   copy of the Hastings logo. Nothing here can reach inside it (cross-origin),
   so instead the frame is constrained to a column width: it then reads as a
   deliberate embedded panel rather than a foreign full-bleed band. */
.formwrap{display:flex;justify-content:center}
/* JobTread renders the form as a fixed-height card -- 867px for the customer
   form, 1140px for the vendor one, measured, and identical at every width --
   and centres it vertically in whatever frame it is given. Any height beyond
   the card just becomes its blue background above and below, which is what the
   old 1220/1720 estimates were producing. These are the card plus about 90px
   of headroom. If the card ever grows past it (a validation state, a longer
   confirmation) the frame scrolls internally, which is fine now that the gate
   means nobody meets that scroller by accident. */
.formwrap iframe{display:block;width:100%;max-width:42rem;border:0;background:#fff;border-radius:var(--r);height:960px;box-shadow:0 18px 44px -28px rgba(8,18,26,.5)}
.formwrap--vendor iframe{height:1230px}
.formwrap__fallback{font-size:.95rem;color:var(--muted);margin-top:.9rem}

/* Legal fine print — the client's own opt-in and privacy wording. */
.fineprint{margin-top:1.6rem;font-size:.86rem;line-height:1.55;color:var(--muted);max-width:46rem}
.fineprint h4{font-family:var(--cond);text-transform:uppercase;letter-spacing:.11em;font-size:.76rem;color:var(--ink);margin:0 0 .3rem}
.fineprint p + h4{margin-top:1.1rem}

/* ---------- footer social ---------- */
.ftr__social{display:flex;align-items:center;gap:.55rem;margin-top:1.15rem}
.ftr__social a{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:#bcc8d2;
  border:1px solid rgba(255,255,255,.22);border-radius:var(--r);padding:.45rem .8rem;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;font-weight:600;
  transition:border-color .18s,color .18s,background-color .18s;
}
.ftr__social a:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.07);text-decoration:none}
.ftr__social svg{width:1.05em;height:1.05em;flex:none;fill:currentColor}

/* ---------- compact homepage blocks ---------- */
/* The homepage introduces and routes; the interior pages carry the detail. */
.mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:clamp(1.25rem,2.5vw,2rem)}
.mini__i .bar{margin-bottom:.9rem}
.mini__i h3{font-family:var(--cond);font-weight:700;font-size:1.28rem;color:var(--ink);margin:0 0 .3rem}
.sec--ink .mini__i h3,.proc .mini__i h3,.cband .mini__i h3{color:#fff}
.mini__i p{font-size:.95rem;color:var(--muted);margin:0}
.sec--ink .mini__i p,.proc .mini__i p,.cband .mini__i p{color:#b6c2cc}
.mini__i .role{font-family:var(--cond);text-transform:uppercase;letter-spacing:.11em;font-size:.76rem;color:var(--water-d);font-weight:600;display:block;margin-bottom:.3rem}
.sec--bone .mini__i .role{color:var(--water-d)}

.cta-note{margin-top:1rem;font-size:.92rem;color:#8b99a5}
.cta-note a{color:#cfe8fa}

/* ---------- service-area index: town list with its water ---------- */
.towns-list{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.towns-list li{border-bottom:1px solid var(--line)}
.towns-list a{display:block;padding:.5rem 0 .15rem;text-decoration:none;font-family:var(--cond);
  font-weight:600;font-size:1.05rem;letter-spacing:.03em;color:var(--ink)}
.towns-list a:hover{color:var(--water-d)}
.towns-grid__w{display:block;font-size:.84rem;color:var(--muted);padding-bottom:.55rem;line-height:1.35}

/* ---------- nearby-town chips on a location page ---------- */
.nearby{display:flex;flex-wrap:wrap;gap:.6rem}
.nearby a{display:inline-block;text-decoration:none;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:.5rem .95rem;font-family:var(--cond);font-weight:600;
  letter-spacing:.04em;color:var(--ink);transition:border-color .18s,color .18s,translate .18s}
.nearby a:hover{border-color:var(--water-d);color:var(--water-d);translate:0 -1px}

/* ---------- in the media ---------- */
.medialist{display:grid;gap:clamp(2.5rem,5vw,4rem)}
.mediaitem{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.5rem,3vw,2.5rem);align-items:start}
@media (max-width:820px){.mediaitem{grid-template-columns:1fr}}
.mediaitem figure{margin:0}
.mediaitem video{width:100%;aspect-ratio:16/9;display:block;border-radius:var(--r);background:var(--ink);
  box-shadow:0 18px 44px -28px rgba(8,18,26,.55)}
.mediaitem__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem;margin:0 0 .5rem;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;color:var(--muted)}
.mediaitem__outlet{background:var(--water-d);color:#fff;padding:.2rem .55rem;border-radius:var(--r);
  letter-spacing:.08em;font-weight:600}
.mediaitem__body h2{margin-bottom:.7rem}
.mediaitem__body p{color:var(--muted)}
.mediaitem__body p:first-of-type{color:inherit}

.asseen{margin-top:clamp(1.75rem,3vw,2.5rem);padding:1rem 1.3rem;background:#fff;
  border:1px solid var(--line);border-left:3px solid var(--water-d);border-radius:0 var(--r) var(--r) 0;
  font-size:1rem;max-width:46rem}
.asseen strong{color:var(--ink)}

.mediaitem__spon{background:var(--bone-d);color:var(--muted);padding:.2rem .5rem;border-radius:var(--r);
  letter-spacing:.09em;font-weight:600;border:1px solid var(--line)}

/* ── Photo galleries ───────────────────────────────────────────────────────
   The client's own photographs. Tiles are a uniform 4:5 so a mixed set of
   phone portraits (9:16) and drone landscapes (16:9) still reads as a grid
   instead of a ransom note; the lightbox shows each frame uncropped. */
.shots{display:grid;gap:clamp(.5rem,1.2vw,.9rem);
  grid-template-columns:repeat(auto-fill,minmax(clamp(146px,22vw,262px),1fr))}
.shots--few{grid-template-columns:repeat(auto-fill,minmax(clamp(240px,42vw,430px),1fr))}
.shots--one{grid-template-columns:minmax(0,min(100%,720px))}
.shots--one .shot{aspect-ratio:auto}
.shots--one .shot img{height:auto}
.shot{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bone-d);
  border-radius:var(--r);cursor:zoom-in;isolation:isolate}
.shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1),filter .35s ease}
.shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(8,18,26,.09);border-radius:var(--r)}
.shot:hover img,.shot:focus-visible img{transform:scale(1.045)}
.shot:focus-visible{outline:3px solid var(--water);outline-offset:2px}
.sec--shots{padding-bottom:clamp(2.5rem,5vw,4rem)}
.sec__head--wide{max-width:56rem}
.sec__head--wide .lede p+p{margin-top:.9rem}

/* Lightbox. Plain <a href> underneath, so it still works without JS. */
.lbx{position:fixed;inset:0;z-index:120;display:none;place-items:center;
  background:rgba(4,10,15,.94);padding:clamp(1rem,4vw,3rem)}
.lbx[open],.lbx.is-on{display:grid}
.lbx__img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;
  border-radius:var(--r);box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.lbx__cap{position:absolute;left:0;right:0;bottom:clamp(.6rem,2vw,1.4rem);margin:0;text-align:center;
  color:#cfd8de;font-size:.92rem;padding:0 4rem;text-shadow:0 1px 6px rgba(0,0,0,.9)}
.lbx__n{position:absolute;top:clamp(.6rem,2vw,1.4rem);right:clamp(.6rem,2vw,1.4rem);
  color:#8d9aa4;font-family:var(--cond);letter-spacing:.12em;font-size:.82rem}
.lbx button{position:absolute;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);
  color:#fff;width:2.9rem;height:2.9rem;border-radius:50%;display:grid;place-items:center;
  cursor:pointer;transition:background .2s ease,border-color .2s ease}
.lbx button:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.45)}
.lbx button:focus-visible{outline:3px solid var(--water-l);outline-offset:2px}
.lbx button svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
.lbx__x{top:clamp(.6rem,2vw,1.4rem);left:clamp(.6rem,2vw,1.4rem)}
.lbx__p{left:clamp(.5rem,2vw,1.6rem);top:50%;transform:translateY(-50%)}
.lbx__f{right:clamp(.5rem,2vw,1.6rem);top:50%;transform:translateY(-50%)}
@media (max-width:620px){
  .lbx__p{left:.5rem}.lbx__f{right:.5rem}
  .lbx__cap{padding:0 1rem;font-size:.85rem}
}
body.lbx-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){.shot img{transition:none}.shot:hover img{transform:none}}

/* ── Form embed scroll gate ────────────────────────────────────────────────
   The JobTread form sets `body{overflow:scroll}` on its own document even
   when its content fits, so the iframe is a scroll container with nothing to
   scroll. It swallows every wheel and touch gesture instead of chaining to
   this page, and because the frame is taller than a phone screen there is
   nowhere else to put your finger -- the page simply stops scrolling.

   We cannot reach into a cross-origin document to fix it, and `scrolling="no"`
   was measured and does NOT help. So the iframe only receives pointer events
   once you ask for them. All of this is added by site.js: with JS off you get
   the plain iframe, which still works, plus the direct link underneath. */
.fgate{position:relative;width:100%;max-width:42rem}
.fgate iframe{pointer-events:none}
.fgate.is-live iframe{pointer-events:auto}

/* The frame is ~1270px tall, so anything pinned to the middle of it is off
   screen for most of the scroll on a phone. Both controls are sticky instead,
   so whichever part of the form you are looking at, the control is with you. */
.fgate__veil{position:absolute;inset:0;display:block;cursor:pointer;
  background:rgba(245,242,234,.55);backdrop-filter:blur(.5px);border-radius:var(--r);
  border:0;padding:0;width:100%;transition:background .2s ease}
.fgate__veil:hover{background:rgba(245,242,234,.4)}
.fgate.is-live .fgate__veil{display:none}
.fgate__veil span{position:sticky;top:calc(50vh - 1.6rem);margin-inline:auto;
  width:max-content;max-width:calc(100% - 2rem);
  background:var(--water-d);color:#fff;font-family:var(--cond);font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;font-size:.95rem;padding:.85rem 1.6rem;
  border-radius:var(--r);box-shadow:0 14px 34px -14px rgba(8,18,26,.6);
  display:flex;align-items:center;gap:.6rem}
.fgate__veil span svg{width:1.05rem;height:1.05rem;fill:currentColor}
.fgate__veil:focus-visible{outline:3px solid var(--water);outline-offset:3px}

/* The way back out. Without this a phone user who starts the form is stuck
   again the moment they decide not to finish it. */
.fgate__bar{position:absolute;inset:0;display:none;flex-direction:column;align-items:flex-end;
  pointer-events:none;padding:.6rem}
.fgate.is-live .fgate__bar{display:flex}
.fgate__done{position:sticky;top:5.2rem;pointer-events:auto;display:flex;align-items:center;gap:.4rem;
  background:var(--ink);color:#fff;border:0;border-radius:var(--r);cursor:pointer;
  font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.09em;
  font-size:.8rem;padding:.5rem .8rem;box-shadow:0 10px 26px -12px rgba(8,18,26,.7)}
.fgate__done:hover{background:var(--water-d)}
.fgate__done:focus-visible{outline:3px solid var(--water);outline-offset:2px}
.fgate__done svg{width:.85rem;height:.85rem;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round}
@media (prefers-reduced-motion:reduce){.fgate__veil{transition:none}}