/* ==========================================================================
   Graystone Water Solutions — landing page
   Hand-written. No framework, no build step. Drop the folder into public_html.

   Section order follows the client's own wireframe
   (Website/Research/client-brief/wireframe-p*.png).
   ========================================================================== */

@import url("../fonts/fonts-local.css");

/* --------------------------------------------------------------- tokens -- */
:root{
  --navy-900:#0A1A2F;
  --navy-800:#0E2340;
  --navy-700:#123A63;
  --blue-600:#065C99;   /* true brand accent, measured from the logo droplet */
  --blue-500:#2E9BFF;   /* screen accent, used across all three ads */
  --blue-300:#7FC4FF;
  /* White text on --blue-500 measures 2.9:1 — a WCAG AA failure, and it was
     landing on every primary CTA on the page. --blue-cta is the darkest blue
     that still reads as the bright template blue while passing: 5.19:1 with
     white. Use it for any FILLED surface carrying white text. Keep --blue-500
     for icons, ticks, borders, and text on navy, where it passes comfortably. */
  --blue-cta:#0F6FBF;
  --blue-cta-hover:#1580D6;
  --ice-50:#F2F8FD;
  --ice-100:#E3EDF7;
  --ink-900:#0B1220;
  --ink-700:#243447;
  --ink-500:#5A6B80;
  --red-500:#FF4D4D;

  --wrap:1200px;
  --pad:24px;
  --sec:clamp(64px,7vw,104px);

  --f-display:"Archivo Black","Arial Black",system-ui,sans-serif;
  --f-label:"Barlow Condensed","Arial Narrow",sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  --r:12px;
  --ease:cubic-bezier(.22,1,.36,1);
  --line-d:rgba(255,255,255,.14);   /* hairline on dark */
  --line-l:#E3EDF7;                 /* hairline on light */
}

/* ---------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--navy-900);color:#fff;
  font-family:var(--f-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* height:auto is REQUIRED — every <img> carries width/height attributes for CLS,
   and without this the attribute height wins and images stretch. */
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul{padding:0;list-style:none}

:focus-visible{outline:3px solid var(--blue-500);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--blue-cta);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;font-weight:600;
}
.skip:focus{left:0}

/* ------------------------------------------------------------ typography -- */
.eyebrow{
  font-family:var(--f-label);font-weight:600;font-size:15px;
  letter-spacing:.20em;text-transform:uppercase;color:var(--blue-300);
}
.eyebrow--dark{color:var(--blue-600)}
.h1{font-family:var(--f-display);font-size:clamp(36px,5.2vw,64px);line-height:1.05;letter-spacing:-.015em;margin-top:18px}
.h2{font-family:var(--f-display);font-size:clamp(28px,3.6vw,44px);line-height:1.1;letter-spacing:-.012em;margin-top:14px}
.h3{font-family:var(--f-display);font-size:clamp(19px,1.7vw,23px);line-height:1.2}
.h1 em,.h2 em{font-style:normal;color:var(--blue-300)}
.h2--dark em{color:var(--blue-600)}
.lede{font-size:clamp(16px,1.3vw,18px);line-height:1.65;color:rgba(255,255,255,.80);max-width:56ch;margin-top:18px}
.lede--dark{color:var(--ink-500)}
.center{text-align:center}
.center .lede{margin-inline:auto}

/* --------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:999px;
  font-size:15px;font-weight:600;border:1px solid transparent;
  transition:transform .18s var(--ease),background .18s,box-shadow .18s,border-color .18s,color .18s;
  white-space:nowrap;text-align:center;
}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:16px;height:16px;flex:none}
.btn--primary{background:var(--blue-cta);color:#fff;box-shadow:0 6px 20px rgba(15,111,191,.38)}
.btn--primary:hover{background:var(--blue-cta-hover);box-shadow:0 10px 26px rgba(15,111,191,.5)}
.btn--phone{background:#fff;color:var(--blue-600);border-color:rgba(6,92,153,.35)}
.btn--phone:hover{border-color:var(--blue-500);color:var(--blue-500)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.38)}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.btn--ghost-dark{background:transparent;color:var(--ink-900);border-color:rgba(11,18,32,.28)}
.btn--ghost-dark:hover{border-color:var(--blue-600);color:var(--blue-600)}
.btn--lg{padding:16px 30px;font-size:16px}

/* ------------------------------------------------------------- announce -- */
.announce{
  background:linear-gradient(90deg,var(--blue-600),var(--blue-500));
  text-align:center;padding:9px 16px;
  font-family:var(--f-label);font-weight:600;font-size:15px;
  letter-spacing:.09em;text-transform:uppercase;
}
.announce .dot{opacity:.55;margin-inline:10px}

/* ------------------------------------------------------------------ nav -- */
.nav{background:#fff;color:var(--ink-900);position:sticky;top:0;z-index:60;
     box-shadow:0 1px 0 var(--line-l);transition:box-shadow .2s,height .2s}
.nav.is-stuck{box-shadow:0 6px 24px rgba(10,26,47,.12)}
.nav__in{display:flex;align-items:center;gap:28px;height:78px;transition:height .2s}
.nav.is-stuck .nav__in{height:66px}
.nav__logo img{height:40px;width:auto;transition:height .2s}
.nav.is-stuck .nav__logo img{height:34px}
.nav__links{display:flex;gap:26px;margin-left:auto;font-size:15px;font-weight:500;color:var(--ink-700)}
.nav__links a{transition:color .18s}
.nav__links a:hover{color:var(--blue-600)}
.nav__cta{display:flex;gap:10px}
.nav__burger{display:none;margin-left:auto;padding:10px;border-radius:8px}
.nav__burger svg{width:24px;height:24px}

.drawer{
  position:fixed;inset:0 0 0 auto;width:min(86vw,360px);z-index:80;
  background:var(--navy-900);padding:26px 24px;
  transform:translateX(100%);transition:transform .28s var(--ease);
  display:flex;flex-direction:column;gap:6px;overflow-y:auto;
}
.drawer.is-open{transform:none}
.drawer a{padding:14px 4px;border-bottom:1px solid var(--line-d);font-size:17px;font-weight:500}
.drawer .btn{margin-top:18px}
.drawer__close{position:absolute;top:16px;right:16px;padding:8px}
.drawer__close svg{width:22px;height:22px}
.scrim{position:fixed;inset:0;background:rgba(5,12,22,.6);z-index:70;opacity:0;visibility:hidden;transition:opacity .28s}
.scrim.is-open{opacity:1;visibility:visible}

/* ------------------------------------------------------------- trustbar -- */
.trust{background:var(--ice-50);color:var(--ink-900);border-bottom:1px solid var(--line-l)}
.trust__in{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;padding:16px 0}
.trust__item{display:flex;gap:10px;align-items:flex-start;min-width:0}
.trust__item svg{width:19px;height:19px;flex:none;margin-top:1px;color:var(--blue-500)}
.trust__t{font-size:14px;font-weight:700;line-height:1.25;color:#12233A}
.trust__s{font-size:12.5px;line-height:1.3;color:var(--ink-500);margin-top:2px}

/* Below the desktop grid the five badges stacked into three rows and ate ~170px
   of screen before the hero. On narrow screens they become ONE scrolling line.
   main.js duplicates the item set once so translateX(-50%) loops seamlessly;
   without that duplication the track would visibly restart. */
@media (max-width:1080px){
  .trust{overflow:hidden}
  .trust__in{
    display:flex;flex-wrap:nowrap;width:max-content;max-width:none;
    gap:0;padding:11px 0;
    animation:trust-scroll 34s linear infinite;
  }
  .trust__item{
    align-items:center;gap:8px;padding:0 20px;white-space:nowrap;
    border-right:1px solid #DCE7F3;
  }
  .trust__item svg{width:17px;height:17px;margin-top:0}
  .trust__t{font-size:13.5px}
  .trust__s{display:none}          /* the sub-lines clipped badly in one line */
  @keyframes trust-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
}
/* Motion-sensitive visitors get a static, manually swipeable strip instead. */
@media (max-width:1080px) and (prefers-reduced-motion:reduce){
  .trust{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .trust__in{animation:none}
}

/* ------------------------------------------------------------- sections -- */
.sec{padding:var(--sec) 0;position:relative}
.sec--dark{background:var(--navy-900)}
.sec--light{background:#fff;color:var(--ink-900)}
.sec--ice{background:var(--ice-50);color:var(--ink-900)}
.sec--blueprint{
  background:
    linear-gradient(180deg,rgba(10,26,47,.94),rgba(10,26,47,.97)),
    url("../img/bg-blueprint.jpg") center/cover no-repeat,
    var(--navy-900);
}
.sec__head{max-width:760px}
.sec__head.center{margin-inline:auto}

/* ---------------------------------------------------------------- hero A -- */
.hero{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(72px,8vw,104px) 0 clamp(80px,9vw,112px);
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(46,155,255,.30) 0%, rgba(46,155,255,0) 58%),
    radial-gradient(90% 70% at 78% 92%, rgba(6,92,153,.55) 0%, rgba(6,92,153,0) 60%),
    linear-gradient(168deg, var(--navy-900) 0%, #10305A 52%, var(--navy-800) 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:url("../img/hero-water.jpg") center/cover no-repeat;
  opacity:.30;mix-blend-mode:screen;pointer-events:none;
}
.hero::after{
  content:"";position:absolute;inset:auto 0 -30% 0;height:70%;
  background:radial-gradient(60% 100% at 50% 100%, rgba(127,196,255,.16), transparent 70%);
  pointer-events:none;
}
.hero .wrap{position:relative;z-index:2;max-width:920px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:32px}
.pricenote{
  margin-top:26px;font-family:var(--f-label);font-size:16px;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62);
}
.pricenote b{color:#fff;font-weight:700}
/* .45 measured 4.43:1 — just under AA for this 16px size. .54 clears it. */
.pricenote s{color:rgba(255,255,255,.54)}

/* --------------------------------------------------------------- problem -- */
.probs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px}
.prob{
  background:#fff;border:1px solid var(--line-l);border-radius:var(--r);
  padding:22px;text-align:center;transition:transform .2s var(--ease),box-shadow .2s;
}
.prob:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(10,26,47,.10)}
.prob__img{height:150px;display:grid;place-items:center;margin-bottom:16px}
.prob__img img{max-height:150px;width:auto;object-fit:contain}
.prob h3{font-family:var(--f-display);font-size:17px;line-height:1.25;color:var(--ink-900)}
.prob p{font-size:14.5px;line-height:1.55;color:var(--ink-500);margin-top:8px}

/* ----------------------------------------------------------- how it works -- */
.how{display:grid;grid-template-columns:1fr 380px;gap:56px;align-items:center}
.steps{margin-top:34px;display:grid;gap:22px}
.step{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.step__n{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--blue-cta);color:#fff;font-family:var(--f-display);font-size:16px;
}
.step h3{font-family:var(--f-display);font-size:17px;line-height:1.3}
.step p{font-size:15px;line-height:1.6;color:rgba(255,255,255,.75);margin-top:6px}

.phone{
  position:relative;width:100%;max-width:340px;margin-inline:auto;
  border:10px solid #16212F;border-radius:38px;background:#000;
  box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 0 2px rgba(127,196,255,.18);
  overflow:hidden;aspect-ratio:9/16;
}
.phone video{width:100%;height:100%;object-fit:cover;display:block}
.phone__notch{
  position:absolute;top:0;left:50%;translate:-50% 0;width:38%;height:22px;
  background:#16212F;border-radius:0 0 12px 12px;z-index:3;
}
.phone__play{
  position:absolute;inset:0;z-index:4;display:grid;place-items:center;
  background:rgba(10,26,47,.28);border:0;width:100%;
  transition:background .2s,opacity .2s;
}
.phone__play:hover{background:rgba(10,26,47,.14)}
.phone__play span{
  width:74px;height:74px;border-radius:50%;background:#fff;
  display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.4);
  transition:transform .2s var(--ease);
}
.phone__play:hover span{transform:scale(1.06)}
.phone__play svg{width:26px;height:26px;color:var(--blue-600);margin-left:4px}
.phone.is-playing .phone__play{opacity:0;pointer-events:none}
.phone__cap{
  text-align:center;font-family:var(--f-label);font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:16px;
}

/* ----------------------------------------------------------------- offer -- */
.offer{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.price-row{display:flex;align-items:flex-end;gap:26px;flex-wrap:wrap;margin-top:22px}
.price-old{font-family:var(--f-display);font-size:clamp(24px,2.4vw,32px);line-height:1;color:rgba(255,255,255,.45);position:relative}
.price-old::after{
  content:"";position:absolute;left:-4%;right:-4%;top:52%;height:4px;
  background:var(--red-500);transform:rotate(-7deg);border-radius:2px;
}
.price-lbl{font-family:var(--f-label);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:8px}
.price-new{font-family:var(--f-display);font-size:clamp(46px,5.6vw,72px);line-height:.92}
/* A raised currency mark is the standard direct-response price treatment, but
   at .42em with `vertical-align:super` it sat high and small enough to read as
   a rendering fault rather than a deliberate choice. Bigger, and aligned to an
   explicit offset instead of `super`, so it reads as typography. */
.price-new sup{font-size:.52em;vertical-align:.52em;margin-right:3px;color:var(--blue-300);line-height:1}
.price-sub{font-family:var(--f-label);font-size:17px;letter-spacing:.11em;text-transform:uppercase;color:var(--blue-300);margin-top:10px}

.speccard{
  border:1px solid rgba(46,155,255,.35);border-radius:var(--r);
  padding:20px 22px;margin-top:28px;background:rgba(46,155,255,.06);
}
.speccard h3{font-family:var(--f-label);font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-300)}
.speclist{margin-top:12px;display:grid;gap:9px}
/* NOT display:flex on the li. Flex makes every child its own flex item, so an
   inline <b> inside the text becomes a THIRD item and gets pushed to the end of
   the first line the moment the text wraps — "…reverse osmosis   free" / "drinking
   filter —". Absolutely positioning the tick keeps the text in normal inline flow. */
.speclist li{position:relative;padding-left:30px;font-size:15.5px;line-height:1.45;color:rgba(255,255,255,.9)}
.speclist svg{position:absolute;left:0;top:2px;width:19px;height:19px;color:var(--blue-500)}
.offer .hero-cta{justify-content:flex-start}

/* The tank image is trimmed to the unit's own bounding box, so it is tall and
   narrow (760×1639). Constrain it by HEIGHT — constraining by width would make
   the section 950 px tall. The wrapper shrinks to the image so the absolutely
   positioned spec chips land on the tank, not in empty column space. */
.product{position:relative;justify-self:center;width:fit-content;max-width:100%}
.product img{max-height:600px;width:auto;margin-inline:auto;filter:drop-shadow(0 40px 60px rgba(0,0,0,.55))}
.product::before{
  content:"";position:absolute;left:50%;bottom:5%;translate:-50% 0;
  width:86%;height:34%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(46,155,255,.40),transparent 72%);
  filter:blur(15px);z-index:-1;
}
/* Specificity is deliberate: `.ph{position:relative}` is declared further down
   and would otherwise beat a bare `.spec-chip{position:absolute}`, dropping the
   chips into normal flow above the product. Keep this two-class selector. */
.product .spec-chip{
  position:absolute;z-index:3;background:rgba(10,26,47,.86);
  border:1px solid rgba(127,196,255,.42);backdrop-filter:blur(6px);
  border-radius:8px;padding:8px 13px;
  font-family:var(--f-label);font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue-300);white-space:nowrap;
}
.product .spec-chip b{color:#fff;font-weight:700;display:block;letter-spacing:.04em;font-size:15px}

/* ------------------------------------------------------------ spec table -- */
/* Sits full-width UNDER the offer grid rather than inside the copy column —
   in the column it squeezed to ~460px and the dt/dd pairs wrapped every row. */
.specs{
  margin-top:clamp(48px,5vw,72px);border-top:1px solid rgba(127,196,255,.28);padding-top:38px;
}
.specs__h{
  font-family:var(--f-label);font-size:16px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-300);
}
.specgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:22px;
  background:rgba(127,196,255,.20);border:1px solid rgba(127,196,255,.20);border-radius:var(--r);overflow:hidden}
.specgrid > div{background:var(--navy-900);padding:18px 20px}
.specgrid dt{
  font-family:var(--f-label);font-size:13.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--blue-300);
}
.specgrid dd{margin:6px 0 0;font-family:var(--f-display);font-size:19px;line-height:1.25;color:#fff}
.specnotes{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:14px 34px;list-style:none;padding:0}
.specnotes li{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.72);
  padding-left:16px;border-left:2px solid var(--blue-500)}
.specnotes b{color:#fff;font-weight:600}

/* -------------------------------------------------------------------- RO -- */
.ro{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ro__art{position:relative;justify-self:center;max-width:400px;width:100%}
.ro__art img{width:100%;filter:drop-shadow(0 34px 54px rgba(0,0,0,.5))}
.freeflag{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--blue-cta);color:#fff;border-radius:999px;
  padding:7px 16px;font-family:var(--f-label);font-size:14px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:600;
}
/* The RO stage train. Numbered by the counter, not by <ol> markers — the marker
   sits on the baseline of a two-line item and drifts away from the heading. */
.stages{list-style:none;counter-reset:stage;margin-top:26px;padding:0;display:grid;gap:2px}
.stages li{
  counter-increment:stage;position:relative;padding:12px 0 12px 46px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.stages li:last-child{border-bottom:0}
.stages li::before{
  content:counter(stage);position:absolute;left:0;top:11px;
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:rgba(46,155,255,.16);border:1px solid rgba(127,196,255,.45);
  font-family:var(--f-label);font-size:14px;font-weight:600;color:var(--blue-300);
}
.stages b{display:block;font-size:15.5px;color:#fff}
.stages span{display:block;font-size:14px;line-height:1.55;color:rgba(255,255,255,.68);margin-top:3px}

.benefits2{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin-top:24px}
/* Same reason as .speclist above — inline flow, absolutely positioned tick. */
.benefits2 li{position:relative;padding-left:28px;font-size:15px;line-height:1.45;color:rgba(255,255,255,.85)}
.benefits2 svg{position:absolute;left:0;top:2px;width:18px;height:18px;color:var(--blue-500)}

/* ------------------------------------------------------------- why cards -- */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.why__card{
  background:rgba(255,255,255,.05);border:1px solid var(--line-d);
  border-radius:var(--r);overflow:hidden;transition:transform .2s var(--ease),border-color .2s;
}
.why__card:hover{transform:translateY(-3px);border-color:rgba(127,196,255,.45)}
.why__card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.why__body{padding:20px 22px 24px}
.why__body h3{font-family:var(--f-display);font-size:18px;line-height:1.25}
.why__body p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.72);margin-top:8px}

/* ------------------------------------------------------------------ team -- */
.team{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:52px;max-width:900px;margin-inline:auto}
.person{background:#fff;border:1px solid var(--line-l);border-radius:var(--r);overflow:hidden}
.person__img{aspect-ratio:4/5;background:var(--ice-50);position:relative;overflow:hidden}
.person__img img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.person__body{padding:22px}
.person__name{font-family:var(--f-display);font-size:21px;color:var(--ink-900)}
.person__role{font-family:var(--f-label);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-600);margin-top:6px}
.person__bio{font-size:15px;line-height:1.65;color:var(--ink-500);margin-top:12px}

/* ---------------------------------------------------------- placeholders -- */
/* The on-screen yellow badges were removed 2026-08-10 — they made a finished
   page look broken. Placeholders are now tracked ONLY in the source:
   `<!-- PLACEHOLDER: … -->` comments in index.html, and the register in
   TASKS.md Phase 6. Search the HTML for PLACEHOLDER before launch.
   `.ph` is kept as a no-op hook so the markup does not have to be rewritten
   when real content lands — just delete the class. */
.ph{position:relative}
.ph--box{
  display:grid;place-items:center;background:
    repeating-linear-gradient(45deg,#E8EFF7 0 12px,#DDE7F2 12px 24px);
  color:var(--ink-500);min-height:180px;border-radius:var(--r);
  font-family:var(--f-label);font-size:15px;letter-spacing:.14em;text-transform:uppercase;
}
.ph--dark.ph--box{
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 12px,rgba(255,255,255,.09) 12px 24px);
  color:rgba(255,255,255,.5);
}
/* Placeholder prose. It has to READ as unfinished without failing contrast —
   #9AA8B8 on white measured 2.26:1, which is a real accessibility failure that
   would still be on the page the day it goes live. Italic carries the signal;
   the colour carries the legibility. Two variants because placeholder text
   appears on both dark and light sections. */
.ph-text{color:rgba(255,255,255,.74);font-style:italic}
.sec--light .ph-text,
.sec--ice .ph-text,
.trust .ph-text,
.formwrap .ph-text{color:#5A6B80}

/* --------------------------------------------------------------- promise -- */
/* Replaced the review grid 2026-08-18 — no verified Google profile yet. The
   reviews rules below are kept intact because ../Snippets/reviews-section.html
   drops straight back in when Nick has real ones. Do not delete them. */
.pquote{
  display:grid;grid-template-columns:96px 1fr;gap:26px;align-items:center;
  max-width:820px;margin:46px auto 0;padding:30px 34px;
  background:var(--ice-50);border:1px solid var(--line-l);
  border-left:4px solid var(--blue-cta);border-radius:var(--r);
}
.pquote img{width:96px;height:96px;border-radius:50%;object-fit:cover}
.pquote blockquote{
  font-family:var(--f-display);font-size:clamp(19px,2.1vw,25px);line-height:1.35;
  color:var(--ink-900);
}
.pquote blockquote::before{content:"\201C"}
.pquote blockquote::after{content:"\201D"}
.pquote figcaption{
  font-family:var(--f-label);font-size:14.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-500);margin-top:14px;
}
.pquote figcaption b{color:var(--blue-600);font-weight:600}

.pledge{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
.pledge__c{background:#fff;border:1px solid var(--line-l);border-radius:var(--r);padding:26px 24px 28px}
.pledge__n{font-family:var(--f-display);font-size:clamp(30px,3.4vw,40px);line-height:1;color:var(--blue-600)}
.pledge__c h3{font-size:17px;font-weight:700;color:var(--ink-900);margin-top:12px}
.pledge__c p{font-size:14.5px;line-height:1.65;color:var(--ink-500);margin-top:9px}

/* ---------------------------------------------------------------- install -- */
/* ONE photo, framed as a feature rather than dropped into a five-tile grid.
   The .gallery rules below stay for ../Snippets/gallery-grid.html. */
.install{display:grid;grid-template-columns:.82fr 1fr;gap:clamp(32px,4vw,60px);align-items:center;margin-top:46px}
.install__fig{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-d);
  box-shadow:0 30px 60px rgba(0,0,0,.45)}
.install__fig img{width:100%;aspect-ratio:3/4;object-fit:cover}
.install__body h3{font-family:var(--f-display);font-size:clamp(20px,2.3vw,27px);line-height:1.25}
.install__body .lede{margin-top:14px}

/* --------------------------------------------------------------- reviews -- */
.gcard{
  display:inline-flex;align-items:center;gap:12px;background:#fff;color:var(--ink-900);
  border:1px solid var(--line-l);border-radius:999px;padding:10px 22px;
}
.gcard__score{font-family:var(--f-display);font-size:22px}
.stars{display:inline-flex;gap:2px;color:#FFB400}
.stars svg{width:17px;height:17px}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.review{background:#fff;border:1px solid var(--line-l);border-radius:var(--r);padding:22px;color:var(--ink-900)}
.review__top{display:flex;align-items:center;gap:12px}
.review__av{width:38px;height:38px;border-radius:50%;background:var(--ice-100);display:grid;place-items:center;
            font-weight:700;color:var(--ink-500)}
.review__n{font-weight:600;font-size:15px}
.review__d{font-size:13px;color:var(--ink-500)}
.review__b{font-size:14.5px;line-height:1.6;color:var(--ink-500);margin-top:12px}

/* --------------------------------------------------------------- gallery -- */
.gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:40px}
.gallery > *{aspect-ratio:3/4;border-radius:10px;overflow:hidden}

/* ------------------------------------------------------------------- FAQ -- */
.faq{max-width:840px;margin:44px auto 0;display:grid;gap:12px}
.q{border:1px solid var(--line-d);border-radius:10px;background:rgba(255,255,255,.04);overflow:hidden}
.q__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 22px;text-align:left;font-size:16px;font-weight:600;
}
.q__btn svg{width:20px;height:20px;flex:none;color:var(--blue-300);transition:transform .25s var(--ease)}
.q[open] .q__btn svg,.q.is-open .q__btn svg{transform:rotate(180deg)}
.q__a{
  display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s var(--ease);
}
.q.is-open .q__a{grid-template-rows:1fr}
.q__a > div{overflow:hidden}
.q__a p{padding:0 22px 20px;font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.76)}

/* ------------------------------------------------------------- final CTA -- */
.quote{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.formwrap{
  background:#fff;border-radius:16px;padding:28px;color:var(--ink-900);
  box-shadow:0 30px 70px rgba(0,0,0,.35);
}
.formwrap h3{font-family:var(--f-display);font-size:22px}
.formwrap p.sm{font-size:14px;color:var(--ink-500);margin-top:6px}
.field{display:grid;gap:6px;margin-top:16px}
.field label{font-size:13.5px;font-weight:600;color:var(--ink-700)}
.field input,.field textarea,.field select{
  border:1px solid var(--line-l);border-radius:9px;padding:12px 14px;
  font:inherit;font-size:15px;color:var(--ink-900);background:#FBFDFF;width:100%;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--blue-500);outline:none;background:#fff}
.formwrap .btn{width:100%;margin-top:20px}
/* Honeypot. NOT display:none — some bots skip hidden inputs, and some screen
   readers would announce a display:none field's label anyway. Pulled off-canvas
   and taken out of the tab order instead. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formnote{font-size:12.5px;color:var(--ink-500);margin-top:12px;text-align:center}
.callbig{
  display:flex;align-items:center;gap:16px;margin-top:28px;
  border:1px solid var(--line-d);border-radius:var(--r);padding:20px 22px;
}
.callbig svg{width:38px;height:38px;color:var(--blue-500);flex:none}
.callbig__l{font-family:var(--f-label);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.callbig__n{font-family:var(--f-display);font-size:clamp(22px,2.4vw,30px);line-height:1.1;margin-top:4px}

/* ---------------------------------------------------------------- footer -- */
.foot{background:var(--navy-800);border-top:1px solid var(--line-d);padding:64px 0 0}
.foot__in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.foot__logo img{height:44px;width:auto}
.foot__blurb{font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.65);margin-top:18px;max-width:38ch}
.foot__contact{display:grid;gap:10px;margin-top:20px;font-size:14.5px}
.foot__contact a,.foot__contact span{display:flex;gap:10px;align-items:center;color:rgba(255,255,255,.8)}
.foot__contact svg{width:17px;height:17px;color:var(--blue-500);flex:none}
.foot h4{font-family:var(--f-label);font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.foot ul{margin-top:14px;display:grid;gap:9px;font-size:14.5px}
.foot ul a{color:rgba(255,255,255,.7)}
.foot ul a:hover{color:var(--blue-300)}
/* Service area. 100+ town names, so it is deliberately quiet — small, low-contrast
   enough to read as a directory rather than as body copy, but still 4.6:1 on
   --navy-800, which is AA for the size it is set at. Do not take it lower. */
.areas{margin-top:52px;border-top:1px solid var(--line-d);padding-top:36px}
.areas__h{font-family:var(--f-label);font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.areas__sub{font-size:14px;color:rgba(255,255,255,.62);margin-top:8px}
.areas__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 34px;margin-top:24px}
.areas__grid h5{
  font-family:var(--f-label);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-300);margin:0 0 8px;
}
.areas__grid h5 + p + h5{margin-top:20px}
.areas__grid p{font-size:13px;line-height:1.75;color:rgba(255,255,255,.66)}
.areas__note{font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.52);margin-top:24px;font-style:italic}

.foot__bar{
  margin-top:40px;border-top:1px solid var(--line-d);padding:20px 0 26px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:13.5px;color:rgba(255,255,255,.55);
}
.social{display:flex;gap:10px}
.social a{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.08);transition:background .2s,transform .2s;
}
.social a:hover{background:var(--blue-500);transform:translateY(-2px)}
.social svg{width:18px;height:18px}

/* --------------------------------------------------------------- reveal -- */
.rev{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.rev.is-in{opacity:1;transform:none}

/* ----------------------------------------------------------- responsive -- */
@media (max-width:1080px){
  .nav__links{display:none}
  .nav__cta{display:none}
  .nav__burger{display:block}
  .probs{grid-template-columns:repeat(2,1fr)}
  .why{grid-template-columns:repeat(2,1fr)}
  .reviews{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .foot__in{grid-template-columns:1fr 1fr}
  .specgrid{grid-template-columns:repeat(2,1fr)}
  .areas__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .how,.offer,.ro,.quote{grid-template-columns:1fr;gap:40px}
  .offer .product,.ro__art{order:-1;max-width:300px}
  .team{grid-template-columns:1fr}
  .product .spec-chip{display:none}
  .specnotes{grid-template-columns:1fr}
  .pledge{grid-template-columns:1fr}
  /* Photo above the copy, and capped — at full column width a 3:4 photo is
     taller than the phone screen and the reader never reaches the text. */
  .install{grid-template-columns:1fr;gap:32px}
  .install__fig{order:-1;max-width:380px;margin-inline:auto}
}
@media (max-width:640px){
  :root{--pad:18px}
  body{font-size:15.5px}
  .announce{font-size:12px;letter-spacing:.05em;padding:8px 12px;line-height:1.45}
  .announce .dot{margin-inline:5px}
  .nav__in{height:64px}
  .nav__logo img{height:32px}
  .probs,.why,.reviews{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .foot__in{grid-template-columns:1fr;gap:32px}
  .specgrid{grid-template-columns:1fr}
  .areas__grid{grid-template-columns:1fr;gap:20px}
  /* The portrait stacks above the quote; 96px in a single column looks like a
     stray thumbnail, so it grows and the whole card centres. */
  .pquote{grid-template-columns:1fr;text-align:center;padding:26px 22px;gap:18px}
  .pquote img{width:104px;height:104px;margin-inline:auto}
  .hero-cta .btn,.offer .hero-cta .btn{width:100%}
  .price-row{gap:18px}
  .formwrap{padding:22px}
  .foot__bar{justify-content:center;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rev{opacity:1;transform:none}
  .btn:hover,.why__card:hover,.prob:hover{transform:none}
}