/* ═══════════════════════════════════════════════════════════════
   PRO FINISH COATINGS — Orlando, FL
   ───────────────────────────────────────────────────────────────
   Design thesis: "the cut line".
   A painter's whole craft is the edge where wall meets trim. So the
   page is built entirely from hard edges — zero radius, colour fields
   that meet on a straight line, and a 4px amber rule marking the
   boundary. Amber is scarce: CTAs, the guarantee field, and the cut.
   ═══════════════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────────────── */
:root{
  /* colour */
  --ink:       #111111;
  --ink-2:     #191919;   /* raised surface on dark */
  --ink-3:     #232323;   /* deeper well on dark    */
  --line-dark: #2E2E2C;
  --warm:      #F6F4F0;
  --warm-2:    #EDEAE4;
  --white:     #FFFFFF;
  --amber:     #E8871E;   /* 7.1:1 on ink — display + CTA only, never text on white */
  --amber-dp:  #96500A;   /* 5.4:1 on white — the amber that is allowed to be text */
  --amber-sf:  #FDF1E3;
  --text:      #111111;
  --muted:     #5C5A56;
  --muted-2:   #6E6B66;   /* 4.9:1 on warm — placeholders, captions */
  --muted-lt:  #A8A49C;   /* muted on dark */
  --line:      #DDD9D2;
  --danger:    #B4472F;

  /* type */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:    'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* metrics */
  --cut:  4px;              /* the signature rule weight */
  --pad:  clamp(20px, 5vw, 40px);
  --sec:  clamp(54px, 7vw, 104px);
  --stack: clamp(32px, 5vw, 52px);   /* heading block -> content */
  --max:  1240px;
  --hdr-h: 88px;          /* sticky header height — anchors offset by this */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ── RESET ──────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.6;
  color:var(--text);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3{ margin:0; }
p{ margin:0; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }

/* Amber alone is only 2.65:1 on white, so the ring is drawn twice —
   an ink core with an amber halo. One of the two always has contrast,
   whichever surface it lands on. */
:focus-visible{
  outline:3px solid var(--ink); outline-offset:2px;
  box-shadow:0 0 0 6px rgba(232,135,30,.55);
}
.sec--ink :focus-visible,
.hero :focus-visible,
.hdr :focus-visible,
.ftr :focus-visible{ outline-color:var(--amber); box-shadow:0 0 0 6px rgba(246,244,240,.35); }
.sec--amber :focus-visible{ outline-color:var(--ink); box-shadow:0 0 0 6px rgba(17,17,17,.22); }

/* every section the CTAs jump to must clear the sticky header */
section[id]{ scroll-margin-top:calc(var(--hdr-h) + 12px); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--amber); color:var(--ink);
  padding:14px 20px; font-family:var(--mono); font-size:13px; font-weight:600;
}
.skip:focus{ left:0; }

/* ── PRIMITIVES ─────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }
.wrap--tight{ max-width:860px; }

.sec{ padding-block:var(--sec); background:var(--white); }
.sec--warm{  background:var(--warm); }
.sec--ink{   background:var(--ink);  color:var(--warm); }
.sec--amber{ background:var(--amber); color:var(--ink); text-align:center; }

/* the cut: every dark/amber field opens on an amber rule */
.sec--ink{   border-top:var(--cut) solid var(--amber); }
.sec--amber{ border-top:var(--cut) solid var(--ink);   }

/* the amber square — still used to mark the hero photo caption */
.chip{ width:10px; height:10px; background:var(--amber); flex:0 0 auto; }

.h2{
  font-family:var(--display);
  font-weight:800; font-stretch:125%;
  font-size:clamp(31px,4.6vw,56px);
  line-height:1.03; letter-spacing:-.022em;
  color:var(--ink);
  max-width:19ch;
}
.h2--light{ color:var(--warm); }

.lede{
  margin-top:18px; max-width:58ch;
  font-size:clamp(16.5px,1.6vw,19px); line-height:1.62; color:var(--muted);
}
.lede--light{ color:var(--muted-lt); }
.lede--ink{ color:var(--ink); opacity:.82; }

/* Every section leads with a centred title over centred supporting text.
   The estimate section is the one exception — it is a two-column layout
   where the copy sits beside the form and has to stay left-aligned. */
.sec:not(.est) .h2,
.sec:not(.est) .lede{ margin-inline:auto; text-align:center; }
.sec:not(.est) .h2{ max-width:22ch; }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn{
  --btn-bg:var(--amber); --btn-fg:var(--ink); --btn-bd:var(--amber);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border:2px solid var(--btn-bd);
  background:var(--btn-bg); color:var(--btn-fg);
  font-family:var(--mono); font-size:14px; font-weight:600; letter-spacing:.01em;
  text-decoration:none; cursor:pointer; border-radius:0;
  transition:background .18s var(--ease), border-color .18s var(--ease),
             color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--amber:hover{ --btn-bg:var(--amber-dp); --btn-bd:var(--amber-dp); }
.btn--ink{ --btn-bg:var(--ink); --btn-fg:var(--warm); --btn-bd:var(--ink); }
.btn--ink:hover{ --btn-bg:transparent; --btn-fg:var(--ink); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--warm); --btn-bd:#3A3A38; }
.btn--ghost:hover{ --btn-bd:var(--warm); }
.btn--sm{ padding:11px 18px; font-size:13px; }
.btn--lg{ padding:18px 32px; font-size:15px; }
.btn--block{ width:100%; }
.btn__arw{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2; flex:0 0 auto; }

.lnk{
  display:inline-flex; align-items:center; gap:8px; margin-top:26px;
  font-family:var(--mono); font-size:13.5px; font-weight:600;
  text-decoration:none; color:var(--ink);
  border-bottom:2px solid var(--amber); padding-bottom:4px;
}
.lnk svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2;
  transition:transform .18s var(--ease); }
.lnk:hover svg{ transform:translateX(4px); }

@media (prefers-reduced-motion:reduce){
  .btn:hover{ transform:none; }
}

/* ── HEADER ─────────────────────────────────────────────────── */
.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(17,17,17,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-dark);
}
.hdr__in{
  max-width:var(--max); margin-inline:auto; padding:14px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
/* the real mark, all-white for the ink header */
.logo{ display:flex; align-items:center; text-decoration:none; }
.logo img{ height:58px; width:auto; }
.hdr__act{ display:flex; align-items:center; gap:14px; }
.hdr__tel{
  font-family:var(--mono); font-size:14px; font-weight:600;
  color:var(--warm); text-decoration:none; white-space:nowrap;
}
.hdr__tel:hover{ color:var(--amber); }
.hdr__tel-lbl{ color:var(--muted-lt); margin-right:8px; font-weight:400; }
.hdr__call-icon{ display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:var(--amber); }
.hdr__call-icon svg{ width:21px; height:21px; fill:var(--ink); }

/* ── 01 HERO ────────────────────────────────────────────────── */
/* Full-bleed hero: the photograph is the whole section, edge to edge.
   Its composition carries open sky across the left half, and the copy
   sits in that emptiness. The gradient below only guarantees contrast —
   the breathing room comes from the picture, not from a scrim. */
.hero{
  position:relative; overflow:hidden;
  background:var(--ink); color:var(--warm);
  min-height:clamp(540px, 88vh, 940px);
  display:flex; align-items:center;
}
.hero__bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:72% 50%;
}
.hero::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg,
    rgba(17,17,17,.90) 0%,
    rgba(17,17,17,.78) 30%,
    rgba(17,17,17,.42) 52%,
    rgba(17,17,17,.10) 72%,
    rgba(17,17,17,0)   88%);
}
.hero__inner{
  position:relative; z-index:2;
  width:100%; max-width:var(--max); margin-inline:auto;
  padding:clamp(64px,8vw,110px) var(--pad);
}
.hero__copy{ max-width:min(640px, 58%); }
.hero__h1{
  font-family:var(--display); font-weight:800; font-stretch:125%;
  font-size:clamp(38px,5.6vw,70px); line-height:.99; letter-spacing:-.03em;
  color:var(--warm); text-wrap:balance;
}
.hero__h1 em{ display:block; font-style:normal; color:var(--amber); }
.hero__sub{
  margin-top:26px; max-width:47ch;
  font-size:clamp(16.5px,1.7vw,19px); line-height:1.6; color:var(--muted-lt);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }

.spec{
  display:flex; flex-wrap:wrap; gap:0; margin-top:44px;
  border-top:1px solid var(--line-dark);
}
.spec__i{ padding:18px 26px 0 0; margin-right:26px; border-right:1px solid var(--line-dark); }
.spec__i:last-child{ border-right:0; margin-right:0; padding-right:0; }
.spec dt{
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted-lt);
}
.spec dd{
  margin:6px 0 0;
  font-family:var(--display); font-weight:800; font-stretch:125%;
  font-size:26px; letter-spacing:-.02em; color:var(--warm);
}

.hero__cap{
  position:absolute; right:0; bottom:0; z-index:2;
  display:flex; align-items:center; gap:9px;
  background:var(--ink); padding:11px 18px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted-lt);
}

/* ── 02 TRUST STRIP ─────────────────────────────────────────── */
.strip{ background:var(--amber); border-top:var(--cut) solid var(--ink); overflow:hidden; }
.strip__list{
  max-width:var(--max); margin-inline:auto; padding:15px var(--pad);
  display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:center;
  font-family:var(--mono); font-size:11.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
}
/* Marker leads the item instead of trailing it. A trailing separator
   dangles in empty space whenever the list wraps; a leading one never can. */
.strip__list li{ display:flex; align-items:center; gap:10px; }
.strip__list li::before{
  content:''; width:5px; height:5px; flex:0 0 auto;
  background:var(--ink); opacity:.45;
}

/* ── 03 THE PROBLEM ─────────────────────────────────────────── */
/* 4 items — pinned so the row always fills. auto-fit only collapses
   fully-empty tracks, not empty cells in a partial last row, so at 3
   columns this left two hollow rectangles of grid background showing. */
.fear{
  margin-top:var(--stack);
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line);
}
.fear__i{ background:var(--warm); padding:30px 26px 32px; }
.fear__x{
  display:block; width:30px; height:30px; line-height:28px; text-align:center;
  border:1.5px solid var(--danger); color:var(--danger);
  font-size:19px; margin-bottom:18px;
}
.fear__i h3{
  font-family:var(--display); font-weight:700; font-stretch:110%;
  font-size:18px; line-height:1.2; letter-spacing:-.012em; margin-bottom:10px;
}
.fear__i p{ font-size:15px; line-height:1.58; color:var(--muted); }

.callout{
  margin-top:34px; padding:26px 30px;
  background:var(--ink); color:var(--warm);
  border-left:var(--cut) solid var(--amber);
  font-family:var(--display); font-weight:700; font-stretch:110%;
  font-size:clamp(17px,2.1vw,22px); line-height:1.32; letter-spacing:-.015em;
  max-width:64ch;
}

/* ── 04 RESIDENTIAL / COMMERCIAL ────────────────────────────── */
.path{
  margin-top:var(--stack);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.path__c{ background:var(--white); display:flex; flex-direction:column; }
.path__img{ width:100%; aspect-ratio:16/10; object-fit:cover;
  border-bottom:var(--cut) solid var(--amber); }
.path__body{ padding:32px 30px 36px; display:flex; flex-direction:column; flex:1; }
.path__kicker{
  font-family:var(--mono); font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--amber-dp); margin-bottom:14px;
}
.path__h{
  font-family:var(--display); font-weight:800; font-stretch:118%;
  font-size:clamp(21px,2.5vw,27px); line-height:1.12; letter-spacing:-.02em; margin-bottom:14px;
}
.path__body > p{ font-size:15.5px; line-height:1.6; color:var(--muted); }

.tick{ margin-top:24px; display:grid; gap:9px; }
.tick li{ position:relative; padding-left:26px; font-size:14.5px; line-height:1.5; }
.tick li::before{
  content:''; position:absolute; left:0; top:8px;
  width:9px; height:9px; background:var(--amber);
}
.tick--light li{ color:var(--warm); }
.path__c .lnk{ margin-top:auto; align-self:flex-start; padding-top:28px; }

/* ── 05 THE RULES ───────────────────────────────────────────── */
/* 6 items — pinned to 3 columns so both rows fill completely.
   auto-fit would give 4 tracks here and leave 2 hollow cells showing
   the grid background through. */
.rules{
  margin-top:var(--stack);
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line); border:1px solid var(--line);
}
.rules__i{ background:var(--warm); padding:30px 28px 34px; }
.rules__n{
  display:block;
  font-family:var(--display); font-weight:800; font-stretch:125%;
  font-size:38px; line-height:1; letter-spacing:-.03em;
  color:var(--amber); opacity:.32; margin-bottom:14px;
}
.rules__i h3{
  font-family:var(--display); font-weight:700; font-stretch:110%;
  font-size:18.5px; line-height:1.2; letter-spacing:-.014em; margin-bottom:10px;
}
.rules__i p{ font-size:15px; line-height:1.58; color:var(--muted); }

/* ── 06 THE WORK — before/after ─────────────────────────────── */
.ba{ margin-top:var(--stack); }
.ba__stage{
  position:relative; overflow:hidden; aspect-ratio:16/9;
  background:var(--ink-2); border:1px solid var(--line-dark);
  touch-action:pan-y;
}
.ba__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  user-select:none; -webkit-user-drag:none;
}
.ba__img--before{ clip-path:inset(0 50% 0 0); }
.ba__tag{
  position:absolute; bottom:14px; z-index:3;
  background:var(--ink); color:var(--warm); padding:7px 13px;
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; pointer-events:none;
}
.ba__tag--l{ left:14px; }
.ba__tag--r{ right:14px; background:var(--amber); color:var(--ink); }
.ba__line{
  position:absolute; top:0; bottom:0; left:50%; z-index:4;
  width:var(--cut); margin-left:calc(var(--cut) / -2);
  background:var(--amber); pointer-events:none;
}
.ba__grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; background:var(--amber);
  display:flex; align-items:center; justify-content:center;
}
.ba__grip::before{
  content:'‹ ›'; font-family:var(--mono); font-size:15px; font-weight:600;
  color:var(--ink); letter-spacing:.06em;
}
.ba__srlabel{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.ba__range{
  -webkit-appearance:none; appearance:none;
  display:block; width:100%; margin-top:16px; height:34px;
  background:transparent; cursor:ew-resize;
}
.ba__range::-webkit-slider-runnable-track{ height:2px; background:var(--line-dark); }
.ba__range::-moz-range-track{ height:2px; background:var(--line-dark); }
.ba__range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; margin-top:-13px;
  width:var(--cut); height:28px; background:var(--amber); border:0; border-radius:0;
}
.ba__range::-moz-range-thumb{
  width:var(--cut); height:28px; background:var(--amber); border:0; border-radius:0;
}

.gal{
  margin-top:var(--stack);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px;
}
.gal li{ position:relative; }
.gal img{ width:100%; aspect-ratio:4/3; object-fit:cover;
  border-bottom:var(--cut) solid var(--amber); }
.gal__cap{
  display:block; margin-top:12px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted-lt);
}

/* ── 07 PROCESS ─────────────────────────────────────────────── */
.steps{
  margin-top:var(--stack);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:0; border-top:1px solid var(--line);
}
/* text was butting straight into the divider on its left — every column
   gets breathing room, except the first, which stays flush with the container */
.steps__i{ padding:30px 34px 34px; border-right:1px solid var(--line); }
.steps__i:first-child{ padding-left:0; }
.steps__i:last-child{ border-right:0; padding-right:0; }
.steps__n{
  display:block;
  font-family:var(--display); font-weight:800; font-stretch:125%;
  font-size:15px; letter-spacing:.02em; color:var(--amber-dp); margin-bottom:16px;
}
.steps__i h3{
  font-family:var(--display); font-weight:800; font-stretch:115%;
  font-size:clamp(20px,2.3vw,24px); line-height:1.15; letter-spacing:-.02em; margin-bottom:12px;
}
.steps__i p:not(.steps__meta){ font-size:15.5px; line-height:1.6; color:var(--muted); }
.steps__meta{
  margin-top:16px;
  font-family:var(--mono); font-size:11.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
  border-top:1px solid var(--line); padding-top:12px; display:inline-block;
}

.after{ margin-top:56px; background:var(--warm); padding:36px clamp(24px,4vw,42px) 40px;
  border-left:var(--cut) solid var(--amber); }
.after__h{
  font-family:var(--display); font-weight:800; font-stretch:118%;
  font-size:clamp(20px,2.4vw,26px); letter-spacing:-.02em; margin-bottom:22px;
}
/* two bullet lists side by side — four items across three auto-fit columns
   left a hollow cell and an off-balance second row */
.after__list{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px 48px; }
.after__list > div{ padding-left:22px; position:relative; }
.after__list > div::before{
  content:''; position:absolute; left:0; top:7px;
  width:9px; height:9px; background:var(--amber);
}
.after__list dt{
  font-family:var(--mono); font-size:12px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink); margin-bottom:7px;
}
.after__list dd{ font-size:15px; line-height:1.55; color:var(--muted); }

/* ── 08 GUARANTEE ───────────────────────────────────────────── */
.chips{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin:34px 0 38px;
}
.chips li{
  border:2px solid var(--ink); padding:10px 16px;
  font-family:var(--mono); font-size:12.5px; font-weight:600;
  letter-spacing:.05em;
}

/* ── 09 TESTIMONIALS ────────────────────────────────────────── */
/* Google-review card: avatar + name + relative date on top, quote in the
   middle, stars and the Google mark pinned to the bottom. Square corners
   rather than the usual rounded treatment — every other edge here is a
   hard cut. */
.rev__score{
  display:flex; align-items:center; justify-content:center; gap:11px;
  margin-top:20px;
  font-family:var(--mono); font-size:13.5px; font-weight:500;
  letter-spacing:.04em; color:var(--muted-lt);
}
.revs{
  margin-top:var(--stack);
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.rev{
  display:flex; flex-direction:column; gap:16px;
  padding:24px 22px;
  background:#0A0A0A; border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.rev:hover{ border-color:rgba(255,255,255,.26); background:rgba(255,255,255,.035); transform:translateY(-2px); }
.rev__top{ display:flex; align-items:center; gap:12px; }
.rev__av{
  width:50px; height:50px; flex:0 0 auto; border-radius:50%;
  background:var(--amber); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:15px; font-weight:600;
}
.rev__top h3{
  font-family:var(--body); font-size:18px; font-weight:600;
  letter-spacing:-.02em; line-height:1.05; color:#F5F5F5;
}
/* scoped to the date span only — a bare `.rev__top span` also matched the
   avatar and overrode its flex centring and colour */
.rev__top > div > span{ display:block; margin-top:3px; font-size:14px; color:#8E8E8E; }
.rev p{ font-size:15px; line-height:1.5; letter-spacing:-.01em; color:#F0F0F0; }
.rev__bot{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-top:auto; }
.rev__stars{ color:#F5BA4B; font-size:19px; letter-spacing:1px; line-height:1; }
.rev__g{ width:28px; height:28px; flex:0 0 auto; }
.rev__g svg{ display:block; width:100%; height:100%; }

/* ── 10 SERVICE AREA ────────────────────────────────────────── */
/* Columns, not a paragraph. Set as one flowing run of display type the
   sixteen names produced a badly ragged right edge and a left edge that
   alternated between a capital and a 7px square. Each name in its own
   cell removes both problems: every edge is aligned by the grid. The
   block is centred so it sits under the centred title. */
.area{
  margin-top:var(--stack);
  /* equal columns, not auto — sized to content, the widest name
     ("Altamonte Springs") stretched column one and threw the gaps off */
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:16px clamp(20px,2.5vw,36px);
  max-width:920px; margin-inline:auto;
}
.area li{
  display:flex; align-items:baseline; gap:11px;
  font-family:var(--display); font-weight:700; font-stretch:112%;
  font-size:clamp(16px,1.5vw,19px); line-height:1.3;
  letter-spacing:-.012em; color:var(--ink);
  white-space:nowrap;
}
.area li::before{
  content:''; flex:0 0 auto;
  width:7px; height:7px; background:var(--amber);
  transform:translateY(-1px);
}
.area__note{
  max-width:940px; margin:30px auto 0;
  padding-top:18px; border-top:1px solid var(--line);
  text-align:center;
  font-family:var(--mono); font-size:12.5px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}

/* ── 11 FAQ ─────────────────────────────────────────────────── */
.faq{ margin-top:var(--stack); border-top:1px solid var(--line); }
.faq__i{ border-bottom:1px solid var(--line); }
.faq__i summary{
  list-style:none; cursor:pointer; padding:22px 46px 22px 0; position:relative;
  font-family:var(--display); font-weight:700; font-stretch:112%;
  font-size:clamp(17px,2vw,20px); line-height:1.3; letter-spacing:-.016em;
}
.faq__i summary::-webkit-details-marker{ display:none; }
.faq__i summary::after{
  content:''; position:absolute; right:6px; top:50%; width:14px; height:var(--cut);
  background:var(--amber); transform:translateY(-50%);
}
.faq__i summary::before{
  content:''; position:absolute; right:11px; top:50%; width:var(--cut); height:14px;
  background:var(--amber); transform:translateY(-50%);
  transition:opacity .2s var(--ease);
}
.faq__i[open] summary::before{ opacity:0; }
.faq__i summary:hover{ color:var(--amber-dp); }
.faq__a{ padding:0 8% 26px 0; }
.faq__a p{ font-size:15.8px; line-height:1.65; color:var(--muted); }

/* ── 12 ESTIMATE ────────────────────────────────────────────── */
.est__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,64px); align-items:start;
}
.est__alt{
  margin-top:30px; padding-top:22px; border-top:1px solid var(--line-dark);
  font-family:var(--mono); font-size:13.5px; color:var(--muted-lt);
}
.est__alt a{ color:var(--amber); text-decoration:none; font-weight:600; }
.est__alt a:hover{ text-decoration:underline; }
.est__card{ background:var(--warm); border-top:var(--cut) solid var(--amber);
  padding:clamp(26px,3.4vw,38px); color:var(--text); }

.noscript{
  background:var(--ink); color:var(--warm);
  border-left:var(--cut) solid var(--amber);
  padding:18px 20px; margin-bottom:24px;
  font-size:14.5px; line-height:1.55;
}
.noscript p + p{ margin-top:8px; color:var(--muted-lt); }
.noscript a{ color:var(--amber); font-family:var(--mono); font-weight:600; }

.form__logo{
  width:190px; height:auto; margin-bottom:22px;
}
.form__lead{
  font-family:var(--display); font-weight:800; font-stretch:115%;
  font-size:21px; letter-spacing:-.018em; margin-bottom:24px;
}
.form__seg{ border:0; padding:0; margin:0 0 20px; }
.form__seg legend{
  padding:0; margin-bottom:9px;
  font-family:var(--mono); font-size:11.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--muted);
}
.seg{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--ink); border:1px solid var(--ink); }
.seg input{ position:absolute; opacity:0; width:1px; height:1px; }
.seg label{
  background:var(--warm); text-align:center; padding:13px 10px; cursor:pointer;
  font-family:var(--mono); font-size:13.5px; font-weight:600;
  transition:background .16s var(--ease), color .16s var(--ease);
}
.seg label:hover{ background:var(--warm-2); }
.seg input:checked + label{ background:var(--ink); color:var(--warm); }
.seg input:focus-visible + label{ outline:3px solid var(--amber); outline-offset:-3px; }

.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field{ margin-bottom:16px; }
.field label{
  display:block; margin-bottom:7px;
  font-family:var(--mono); font-size:11.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--muted);
}
.field__opt{ text-transform:none; letter-spacing:.02em; font-weight:400; }
.field input,.field select,.field textarea{
  width:100%; padding:13px 14px; background:var(--white);
  border:1px solid var(--line); border-radius:0;
  font-family:var(--body); font-size:16px; color:var(--text);
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field textarea{ resize:vertical; min-height:88px; }
/* mouse focus gets the quiet treatment; keyboard focus keeps the same
   visible ring as the rest of the page — losing it inside the lead form
   is the worst possible place to lose it */
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink);
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:3px solid var(--ink); outline-offset:2px;
  box-shadow:0 0 0 6px rgba(232,135,30,.55);
}
.field input::placeholder,.field textarea::placeholder{ color:var(--muted-2); }
.field.is-bad input,.field.is-bad select{ border-color:var(--danger); box-shadow:inset 0 0 0 1px var(--danger); }
.field__err{
  display:none; margin-top:6px;
  font-family:var(--mono); font-size:11.5px; font-weight:500; color:var(--danger);
}
.field.is-bad .field__err{ display:block; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__fine{
  margin-top:16px; font-size:12.8px; line-height:1.5; color:var(--muted); text-align:center;
}
.form__status{
  display:none; margin-top:18px; padding:15px 16px;
  border-left:var(--cut) solid var(--ink); background:var(--white);
  font-family:var(--mono); font-size:13.5px; line-height:1.5;
}
.form__status.is-on{ display:block; }
.form__status.is-ok{ border-left-color:var(--amber); }
.form__status.is-bad{ border-left-color:var(--danger); color:var(--danger); }

/* ── FOOTER ─────────────────────────────────────────────────── */
.ftr{ background:var(--ink); color:var(--muted-lt);
  border-top:var(--cut) solid var(--amber); padding-top:var(--sec); }
.ftr__grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px;
  padding-bottom:52px;
}
.ftr__logo{ width:210px; height:auto; margin-bottom:18px; }
.ftr__blurb{ font-size:14.5px; line-height:1.6; max-width:38ch; }
.ftr__col h3{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--warm); margin-bottom:16px;
}
.ftr__col p{ font-size:14.5px; line-height:1.55; margin-bottom:9px; }
.ftr__col a{ text-decoration:none; }
.ftr__col a:hover{ color:var(--amber); }
.ftr__base{
  border-top:1px solid var(--line-dark);
  max-width:var(--max); margin-inline:auto; padding:24px var(--pad) 26px;
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
}

/* ── MOBILE ACTION BAR ──────────────────────────────────────── */
/* The safe-area inset lives on the BUTTONS, not on .bar. Put it on the
   container and that strip is transparent: on an iPhone, once Safari's
   toolbar collapses on scroll, the page shows through underneath and the
   bar reads as floating above a hole. Each button now paints its own
   background all the way down to the physical bottom edge. */
.bar{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:120;
  border-top:var(--cut) solid var(--amber);
  background:var(--ink); }
.bar__b{
  flex:1; display:flex; align-items:center; justify-content:center; gap:9px;
  padding:16px 10px calc(16px + env(safe-area-inset-bottom, 0px));
  text-decoration:none;
  font-family:var(--mono); font-size:13.5px; font-weight:600; letter-spacing:.03em;
}
.bar__b svg{ width:17px; height:17px; fill:currentColor; }
/* landscape on a notched phone puts the outer edges under the sensor
   housing — the inset goes on the button so its background still reaches
   the edge while the label stays clear of it */
.bar__b--call{ background:var(--ink); color:var(--warm);
  padding-left:calc(10px + env(safe-area-inset-left, 0px)); }
.bar__b--est{ background:var(--amber); color:var(--ink);
  padding-right:calc(10px + env(safe-area-inset-right, 0px)); }

/* ═══ RESPONSIVE — one breakpoint, like the good reference ═══ */
@media (max-width:880px){
  /* no room for open sky beside the text on a phone — the gradient
     turns vertical and the copy sits over the darkened lower half */
  .hero{ min-height:clamp(500px, 76vh, 680px); align-items:flex-end; }
  .hero__copy{ max-width:none; }
  .hero__bg{ object-position:62% 42%; }
  .hero::after{
    background:linear-gradient(180deg,
      rgba(17,17,17,.45) 0%, rgba(17,17,17,.62) 34%,
      rgba(17,17,17,.88) 66%, rgba(17,17,17,.96) 100%);
  }
  .hero__cap{ display:none; }
  .hero__cap{ font-size:10px; padding:9px 13px; }
  .spec{ gap:0 22px; }
  .spec__i{ padding-right:22px; margin-right:0; }

  .hdr__tel{ display:none; }
  .hdr__call-icon{ display:flex; }
  .hdr__act .btn--sm{ padding:11px 14px; font-size:12.5px; }

  /* wrap rather than scroll — a hidden-scrollbar strip silently buried
     two of the five trust claims with no affordance they existed */
  .strip__list{ justify-content:flex-start; gap:9px 22px; padding-block:17px; }
  .strip__list li{ font-size:11px; }

  /* centred body copy runs five ragged lines on a phone, and centred
     chips of different widths stack into a staircase. Left-align both. */
  .sec--amber{ text-align:left; }
  .sec--amber .h2{ margin-inline:0; }
  .lede--ink{ margin-inline:0; }
  .chips{ justify-content:flex-start; }

  /* 4 and 6 items — both counts stay divisible so no cell is ever hollow */
  .fear{  grid-template-columns:repeat(2,1fr); }
  .area{  grid-template-columns:repeat(2,1fr); }  /* 16 items: only 4 and 2 divide evenly */
  .rules{ grid-template-columns:repeat(2,1fr); }

  .steps__i{ padding:26px 0 28px; border-right:0; border-bottom:1px solid var(--line); }
  .steps__i:last-child{ border-bottom:0; }

  .revs{ grid-template-columns:1fr; }
  .after__list{ grid-template-columns:1fr; gap:22px; }
  .steps__i{ padding:26px 0 28px; }
  .est__grid{ grid-template-columns:1fr; }
  .est__card{ margin-inline:calc(var(--pad) * -1); }
  /* Brand across the top, the three lists 3-up beneath it. A 2x2 here puts
     the two short lists in half-width cells and leaves a dead pocket under
     each one; 3-up keeps the nav on a single compact row. Below 640px the
     tracks get too narrow for the email and this drops to two — see below. */
  .ftr__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 24px;
    align-items:start; }
  .ftr__brand{ grid-column:1 / -1; }
  .ftr__base{ justify-content:flex-start; }
  /* minmax(0,1fr) stops a long token widening its track, so without this the
     address overflows into the next column instead of wrapping */
  .ftr__col p{ overflow-wrap:anywhere; }

  .ba__stage{ aspect-ratio:4/3; }
  .gal{ gap:16px; }

  .bar{ display:flex; }
  body{ padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px)); }
  :root{ --hdr-h:78px; }
  .logo img{ height:46px; }
}

/* Footer only. Three tracks stop fitting well before the 520px phone
   breakpoint — at 521px they are ~140px each and the email overflows its
   column. Drop to two here instead: brand spans the top, the two short
   lists pair off on one row, and the five page links go 2-up underneath.
   Three compact rows rather than four full-width ones, and no hollow cell. */
@media (max-width:640px){
  .ftr__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 20px;
    padding-bottom:34px; }
  .ftr__brand{ grid-column:1 / -1; }
  .ftr__col--contact{ grid-column:1; grid-row:2; }
  .ftr__col--hours{   grid-column:2; grid-row:2; }
  .ftr__col--nav{
    grid-column:1 / -1; grid-row:3;
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px;
  }
  .ftr__col--nav h3{ grid-column:1 / -1; }
  /* the <wbr> after the @ gives the address a clean break; a step down in
     size keeps the remaining domain on one line instead of orphaning its
     last character, whatever address gets swapped in at launch */
  .ftr__col a[href^="mailto:"]{ font-size:13px; }
}

@media (max-width:520px){
  /* the logo block wraps below ~400px, growing the header to ~115px */
  :root{ --hdr-h:98px; }
  .logo img{ height:40px; }
  .fear{  grid-template-columns:1fr; }
  .rules{ grid-template-columns:1fr; }
  .form__row{ grid-template-columns:1fr; gap:0; }
  .hero__cta .btn{ width:100%; }

  /* one per row so the right edge is flush instead of ragged */
  .chips{ display:grid; grid-template-columns:1fr; gap:8px; }
  .chips li{ font-size:12px; padding:11px 14px; }
  .sec--amber .btn--lg{ width:100%; }
}