/* ==========================================================================
   WGW — GLAZING
   Sections:  00 reset · 01 tokens · 02 type · 03 layout · 04 nav & overlay
              05 buttons · 06 photography · 07 components · 08 hero
              09 sections · 10 forms · 11 footer · 12 motion · 13 responsive

   Light, warm and photography-led. The page is chalk; photographs carry it.
   Every photo frame has an explicit aspect ratio chosen to match the source
   image's real orientation — portraits go in portrait frames. Nothing is
   cropped into a shape it was never shot for.
   ========================================================================== */

/* Self-hosted so the site has no third-party dependency at all. Both are
   variable fonts: one file per family and style covers every weight used. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('../fonts/manrope-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('../fonts/manrope-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 500;font-display:swap;src:url('../fonts/newsreader-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 500;font-display:swap;src:url('../fonts/newsreader-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 600;font-display:swap;src:url('../fonts/newsreader-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 600;font-display:swap;src:url('../fonts/newsreader-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ---------- 00 RESET ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
img,svg,video{display:block;max-width:100%}
/* The UA rule for [hidden] is a bare element-less selector, so any class
   that sets display (.btn, .step) silently beats it. Make it stick. */
[hidden]{display:none!important}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:none}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
body{overflow-x:hidden}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px}
::selection{background:var(--orange);color:#fff}

/* ---------- 01 TOKENS ----------------------------------------------------- */
:root{
  /* surfaces — chalk, then two warmer sands */
  --chalk:#FBF9F5;
  --sand:#F3EEE6;
  --sand-2:#E9E1D4;

  /* Navy and orange are sampled from the Warm Guard Windows logo artwork,
     so the mark sits in the page rather than on top of it. */
  --navy:#182438;            /* logo shield navy */
  --navy-2:#101A29;

  --ink:#16202E;             /* text: the same navy, a shade softer */
  --ink-2:#3C4756;

  --orange:#F29823;          /* logo orange — 6.9:1 on navy, graphics on chalk */
  --orange-hi:#FFAE45;
  --orange-txt:#A55E09;      /* 4.75:1 on chalk — use for any small text */

  /* roles (light surface is the default) */
  --fg:var(--ink);
  --fg-2:#5E5A53;
  --fg-3:#928D84;
  --bg:var(--chalk);
  --rule:rgba(21,24,29,.13);
  --rule-2:rgba(21,24,29,.26);

  /* type */
  --serif:"Newsreader",Georgia,'Times New Roman',serif;
  --sans:"Manrope",system-ui,-apple-system,'Segoe UI',sans-serif;

  /* scale */
  --t-hero:clamp(2.9rem,6.6vw,6.1rem);
  --t-h2:clamp(2.1rem,4.3vw,3.9rem);
  --t-h3:clamp(1.5rem,2.5vw,2.3rem);
  --t-h4:clamp(1.16rem,1.5vw,1.42rem);
  --t-lead:clamp(1.06rem,1.4vw,1.32rem);
  --t-body:clamp(.97rem,1vw,1.045rem);
  --t-sm:.875rem;
  --t-xs:.75rem;

  /* metrics */
  --gut:clamp(1.15rem,4vw,4rem);
  --sec:clamp(4.6rem,10vw,9rem);
  --maxw:1400px;
  --nav:84px;

  /* motion */
  --ez:cubic-bezier(.22,1,.36,1);
  --ez-io:cubic-bezier(.65,.05,.36,1);

  color-scheme:light;
}

/* any band on dark ground simply re-points the roles */
.inv{
  --fg:#F6F2EA; --fg-2:rgba(246,242,234,.74); --fg-3:rgba(246,242,234,.5);
  --bg:var(--navy); --rule:rgba(246,242,234,.16); --rule-2:rgba(246,242,234,.3);
  /* on navy the logo orange is already 6.9:1, so it needs no darkening */
  --orange:#F29823; --orange-txt:#F5A94A;
  background:var(--navy);color:var(--fg);
}
.sand{background:var(--sand)}
.sand-2{background:var(--sand-2)}

/* ---------- 02 TYPE ------------------------------------------------------- */
body{
  background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:var(--t-body);font-weight:400;
  line-height:1.68;letter-spacing:-.002em;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--serif);font-weight:400;
  line-height:1.06;letter-spacing:-.022em;text-wrap:balance;
}
h1{font-size:var(--t-hero);line-height:1.02;letter-spacing:-.032em}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);line-height:1.12}
h4{font-size:var(--t-h4);line-height:1.24;letter-spacing:-.014em;font-weight:500}
p{max-width:64ch}
em{font-style:italic}
strong{font-weight:600}

.lead{font-size:var(--t-lead);line-height:1.58;color:var(--fg-2);max-width:52ch}
.mute{color:var(--fg-2)}
.faint{color:var(--fg-3)}
.sm{font-size:var(--t-sm);line-height:1.6}
.xs{font-size:var(--t-xs);line-height:1.6}

/* the eyebrow: a serif italic numeral, a hairline, then a sans label */
.eyebrow{
  display:flex;align-items:center;gap:.85rem;
  font-family:var(--sans);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);
  margin-bottom:1.5rem;max-width:none;
}
.eyebrow em{
  font-family:var(--serif);font-style:italic;font-size:1.06rem;
  letter-spacing:0;text-transform:none;color:var(--orange-txt);font-weight:400;
  line-height:1;
}
.eyebrow i{flex:none;width:34px;height:1px;background:var(--rule-2);display:block}

/* a numeral used as a display element */
.figure{font-family:var(--serif);font-size:clamp(2.4rem,4.4vw,3.9rem);
  line-height:1;letter-spacing:-.03em;color:var(--fg)}
.figure sup{font-size:.4em;vertical-align:super;color:var(--fg-3);
  font-family:var(--sans);font-weight:600;letter-spacing:.06em}

/* ---------- 03 LAYOUT ----------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:1080px}
.sect{padding-block:var(--sec);position:relative}
.sect--tight{padding-block:calc(var(--sec)*.58)}
.sect--flush-b{padding-bottom:0}

.g{display:grid;gap:clamp(1.5rem,3vw,3.2rem)}
.g-12{grid-template-columns:repeat(12,1fr)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.c-4{grid-column:span 4}.c-5{grid-column:span 5}.c-6{grid-column:span 6}
.c-7{grid-column:span 7}.c-8{grid-column:span 8}.c-12{grid-column:span 12}
/* offsets must set the whole grid-column — `span n` resolves to a *start* */
.at-6{grid-column:6/-1}.at-7{grid-column:7/-1}.at-8{grid-column:8/-1}

.row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.stack{display:flex;flex-direction:column}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.75rem}
.mt-4{margin-top:2.75rem}.mt-5{margin-top:4rem}
.hr{height:1px;background:var(--rule);border:0;width:100%}

/* section head — a rule with the title sitting on it */
.shead{margin-bottom:clamp(2.2rem,4vw,3.6rem)}
.shead__rule{display:flex;align-items:baseline;gap:1.5rem;
  padding-bottom:1.1rem;border-bottom:1px solid var(--rule-2)}
.shead h2{flex:1;max-width:20ch}
.shead__note{font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-3);font-weight:600;flex:none;text-align:right;padding-bottom:.4rem}

/* ---------- 04 NAV & OVERLAY ---------------------------------------------- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);
  color:#fff;padding:.8rem 1.2rem;font-size:var(--t-sm)}
.skip:focus{left:0}

.nav{position:fixed;top:0;left:0;right:0;height:var(--nav);z-index:80;
  transition:background .45s var(--ez),box-shadow .45s,height .45s var(--ez)}
.nav.stuck{background:rgba(251,249,245,.9);backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 1px 0 var(--rule);height:70px}
.nav__in{height:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
  display:flex;align-items:center;gap:1.6rem}

/* The logo. Two files: the full-colour lockup for light ground, and a knockout
   whose wordmark is cream, for navy ground and for sitting over photographs.
   Only one is ever displayed, so there is no flash on load. */
.brand{display:block;flex:none;line-height:0}
.brand img{height:52px;width:auto;transition:height .45s var(--ez)}
/* `.brand img` is (0,1,1), so a bare `.brand__light` at (0,1,0) would lose to
   it. Every variant toggle is therefore written with two classes. */
.brand .brand__dark{display:block}
.brand .brand__light{display:none}
.nav--over:not(.stuck) .brand .brand__dark{display:none}
.nav--over:not(.stuck) .brand .brand__light{display:block}
.foot .brand .brand__dark{display:none}
.foot .brand .brand__light{display:block}
.nav.stuck .brand img{height:42px}
.foot .brand img{height:54px}
/* over a photographic hero the nav sits light until it sticks */
.nav--over:not(.stuck) .nav__links a{color:rgba(255,255,255,.9)}
.nav--over:not(.stuck) .nav__tel{color:rgba(255,255,255,.9)}
.nav--over:not(.stuck) .menu{color:#fff;border-color:rgba(255,255,255,.4)}

.nav__links{display:flex;gap:1.7rem;margin-left:auto}
.nav__links a{font-size:.925rem;color:var(--fg-2);position:relative;
  transition:color .3s;padding-block:.3rem}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--orange);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .45s var(--ez)}
.nav__links a:hover{color:var(--fg)}
.nav__links a:hover::after,.nav__links a[aria-current]::after{transform:scaleX(1)}
.nav__links a[aria-current]{color:var(--fg)}

.nav__act{display:flex;align-items:center;gap:.9rem;flex:none;margin-left:.6rem}
.nav__tel{display:flex;align-items:center;gap:.45rem;font-size:.9rem;
  color:var(--fg-2);transition:color .3s;white-space:nowrap}
.nav__tel:hover{color:var(--orange-txt)}
.nav__tel svg{width:15px;height:15px;flex:none}

.menu{display:none;align-items:center;gap:.6rem;font-size:var(--t-xs);
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--rule-2);padding:.6rem .8rem;color:var(--fg)}
.menu__g{width:15px;height:9px;position:relative;flex:none}
.menu__g i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;
  transition:transform .45s var(--ez),opacity .3s}
.menu__g i:nth-child(1){top:0}
.menu__g i:nth-child(2){top:7.5px}
.menu[aria-expanded="true"] .menu__g i:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.menu[aria-expanded="true"] .menu__g i:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}

/* full-screen menu panel */
.panel{position:fixed;inset:0;z-index:75;background:var(--chalk);
  display:grid;grid-template-rows:var(--nav) 1fr auto;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ez),visibility .5s}
.panel.on{opacity:1;visibility:visible}
.panel__body{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--gut);
  align-content:center;padding:1.5rem var(--gut);overflow-y:auto}
.panel__nav{display:flex;flex-direction:column}
.panel__nav a{display:flex;align-items:baseline;gap:1.2rem;
  padding:clamp(.55rem,1.5vh,1rem) 0;border-bottom:1px solid var(--rule);
  font-family:var(--serif);font-size:clamp(1.8rem,4.6vw,3.2rem);line-height:1.06;
  letter-spacing:-.028em;color:var(--fg);
  opacity:0;transform:translateY(12px);
  transition:color .3s,opacity .55s var(--ez),transform .55s var(--ez)}
.panel.on .panel__nav a{opacity:1;transform:none}
.panel__nav a em{font-size:.9rem;font-style:italic;color:var(--orange-txt);flex:none}
.panel__nav a:hover{color:var(--orange-txt)}
.panel__side{align-self:center;display:flex;flex-direction:column;gap:1.7rem;
  padding-left:var(--gut);border-left:1px solid var(--rule)}
.panel__side h5{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-3);font-weight:600;margin-bottom:.55rem}
.panel__side a,.panel__side p{font-size:.95rem;color:var(--fg-2);line-height:1.7;display:block}
.panel__side a:hover{color:var(--orange-txt)}
.panel__foot{padding:1.2rem var(--gut);border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}

/* Fixed call / survey bar, phones only. On a trades site the two things a
   visitor wants are always within thumb reach. */
.mbar{display:none}
.mbar a{display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:1rem .8rem;font-weight:600;font-size:.92rem;letter-spacing:.01em}
.mbar svg{width:16px;height:16px;flex:none}
.mbar a:first-child{color:var(--ink);border-right:1px solid var(--rule)}
.mbar a:last-child{background:var(--ink);color:var(--chalk)}

/* ---------- 05 BUTTONS ---------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.65rem;position:relative;
  font-size:.875rem;font-weight:600;letter-spacing:.01em;
  padding:.95rem 1.5rem;background:var(--ink);color:var(--chalk);
  overflow:hidden;isolation:isolate;transition:color .35s
}
.btn::before{content:"";position:absolute;inset:0;background:var(--orange);z-index:-1;
  transform:translateY(101%);transition:transform .5s var(--ez)}
.btn:hover::before{transform:translateY(0)}
.btn svg{width:15px;height:15px;flex:none;transition:transform .45s var(--ez)}
.btn:hover svg{transform:translateX(4px)}
.btn--line{background:none;color:var(--fg);border:1px solid var(--rule-2)}
.btn--line:hover{color:var(--chalk);border-color:var(--orange)}
.btn--orange{background:var(--orange);color:#fff}
.btn--orange::before{background:var(--ink)}
.btn--lg{padding:1.1rem 1.8rem;font-size:.92rem}
.inv .btn{background:var(--chalk);color:var(--ink)}
.inv .btn--line{background:none;color:var(--fg);border-color:var(--rule-2)}

/* a quiet text link with a sliding rule */
.tlink{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;
  font-weight:600;color:var(--fg);position:relative;padding-bottom:.3rem}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--orange);transform-origin:0 50%;transition:transform .45s var(--ez)}
.tlink:hover{color:var(--orange-txt)}
.tlink svg{width:14px;height:14px;transition:transform .45s var(--ez)}
.tlink:hover svg{transform:translateX(4px)}

/* ---------- 06 PHOTOGRAPHY ------------------------------------------------ */
/* One frame class, one ratio modifier. Pick the modifier that matches the
   photograph's real shape — see the table in the README. */
.ph{position:relative;overflow:hidden;background:var(--sand-2);display:block}
.ph img{width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform 1.3s var(--ez)}
.ph--tall{aspect-ratio:2/3}
.ph--port{aspect-ratio:3/4}
.ph--sq{aspect-ratio:1}
.ph--land{aspect-ratio:4/3}
.ph--wide{aspect-ratio:3/2}
.ph--pano{aspect-ratio:2/1}
.ph--band{aspect-ratio:21/9}
.ph--free{aspect-ratio:auto}
.ph--free img{height:auto}
/* zoom on hover only where the frame is a link or card */
.zoom:hover .ph img,a.ph:hover img{transform:scale(1.04)}
/* a soft scrim so white text stays legible over a photograph */
.ph--scrim::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(16,18,22,.62),rgba(16,18,22,.12) 52%,transparent)}

/* caption sits under the photograph, magazine style */
.cap{display:flex;justify-content:space-between;gap:1.2rem;
  padding-top:.75rem;margin-top:.85rem;border-top:1px solid var(--rule);
  font-size:var(--t-xs);letter-spacing:.05em;color:var(--fg-3)}
.cap b{font-weight:600;color:var(--fg-2);letter-spacing:0;font-size:var(--t-sm)}
.cap span{white-space:nowrap;text-transform:uppercase;letter-spacing:.12em;
  padding-top:.12rem}

/* text laid over a photograph */
.ph__over{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(1.2rem,2.4vw,2.2rem);color:#fff}
.ph__over h3,.ph__over h4{color:#fff}
.ph__over p{color:rgba(255,255,255,.82)}

/* ---------- 07 COMPONENTS ------------------------------------------------- */
/* editorial product card: photo, then title and copy beneath */
.card{display:block;height:100%}
.card h3,.card h4{margin-top:1.1rem;transition:color .3s}
.card:hover h3,.card:hover h4{color:var(--orange-txt)}
.card p{margin-top:.55rem;color:var(--fg-2);font-size:.95rem}
.card__meta{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}

.pill{display:inline-flex;align-items:center;font-size:var(--t-xs);font-weight:600;
  letter-spacing:.08em;padding:.38rem .7rem;border:1px solid var(--rule-2);
  color:var(--fg-2);border-radius:100px}
.pill--orange{border-color:rgba(242,152,35,.55);color:var(--orange-txt)}

/* figure list — big serif numerals over hairlines */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  border-top:1px solid var(--rule-2)}
.stats div{padding:1.5rem 1.2rem 1.5rem 0;border-bottom:1px solid var(--rule)}
.stats dt{font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-3);font-weight:600;margin-bottom:.7rem}
.stats dd{font-family:var(--serif);font-size:clamp(1.9rem,3vw,2.6rem);line-height:1;
  letter-spacing:-.03em}
.stats dd em{font-style:normal;font-family:var(--sans);font-size:.72rem;
  font-weight:600;letter-spacing:.09em;color:var(--fg-3);
  display:block;margin-top:.5rem;text-transform:uppercase}

/* data table */
.tbl{font-size:.925rem}
.tbl caption{text-align:left;font-size:var(--t-xs);letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-3);font-weight:600;padding-bottom:1rem}
.tbl th,.tbl td{text-align:left;padding:1rem 1.1rem 1rem 0;
  border-bottom:1px solid var(--rule);vertical-align:top}
.tbl thead th{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-3);font-weight:600;border-bottom-color:var(--rule-2)}
.tbl td{color:var(--fg-2)}
.tbl td:first-child{color:var(--fg);font-weight:500}
.tbl td b{font-weight:600;color:var(--fg)}

/* pull quote */
.quote{display:flex;flex-direction:column;gap:1.4rem;height:100%;
  padding-top:1.6rem;border-top:2px solid var(--ink)}
.quote p{font-family:var(--serif);font-size:clamp(1.15rem,1.65vw,1.42rem);
  line-height:1.45;letter-spacing:-.014em;flex:1}
.quote footer{font-size:var(--t-xs);letter-spacing:.11em;text-transform:uppercase;
  color:var(--fg-3);font-weight:600}
.stars{display:flex;gap:3px;margin-bottom:.2rem}
.stars svg{width:13px;height:13px;fill:var(--orange);flex:none}

/* caution / disclosure block */
.note{border-left:2px solid var(--orange);padding:.2rem 0 .2rem 1.3rem}
.note h5{font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase;
  color:var(--orange-txt);font-weight:600;margin-bottom:.5rem}

/* accordion */
.acc{border-top:1px solid var(--rule-2)}
.acc__i{border-bottom:1px solid var(--rule)}
.acc__b{width:100%;display:flex;align-items:flex-start;gap:1.2rem;text-align:left;
  padding:1.5rem 0;transition:color .3s}
.acc__b:hover{color:var(--orange-txt)}
.acc__n{font-family:var(--serif);font-style:italic;font-size:1rem;
  color:var(--orange-txt);flex:none;padding-top:.32rem;line-height:1}
.acc__q{flex:1;font-family:var(--serif);font-size:clamp(1.08rem,1.5vw,1.32rem);
  line-height:1.32;letter-spacing:-.015em}
.acc__s{width:14px;height:14px;flex:none;position:relative;margin-top:.55rem}
.acc__s::before,.acc__s::after{content:"";position:absolute;background:currentColor;
  transition:transform .45s var(--ez)}
.acc__s::before{left:0;right:0;top:6.5px;height:1.5px}
.acc__s::after{top:0;bottom:0;left:6.5px;width:1.5px}
.acc__b[aria-expanded="true"] .acc__s::after{transform:scaleY(0)}
.acc__b[aria-expanded="true"]{color:var(--orange-txt)}
.acc__p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ez)}
.acc__i.on .acc__p{grid-template-rows:1fr}
.acc__p>div{overflow:hidden}
.acc__p p{padding:0 0 1.6rem 2.3rem;color:var(--fg-2);max-width:72ch}

/* the sticky product panel used on the home page systems list */
.sys{display:grid;grid-template-columns:1fr .92fr;gap:clamp(2rem,5vw,5rem);
  align-items:start}
.sys__list{border-top:1px solid var(--rule-2)}
.sys__row{display:block;padding:clamp(1.5rem,3vw,2.4rem) 0;
  border-bottom:1px solid var(--rule);position:relative;
  transition:padding-left .5s var(--ez)}
.sys__row:hover,.sys__row:focus-visible{padding-left:1.1rem}
.sys__row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--orange);transform:scaleY(0);transform-origin:50% 0;
  transition:transform .5s var(--ez)}
.sys__row:hover::before,.sys__row:focus-visible::before{transform:scaleY(1)}
.sys__hd{display:flex;align-items:baseline;gap:1.1rem}
.sys__n{font-family:var(--serif);font-style:italic;font-size:1rem;
  color:var(--orange-txt);flex:none}
.sys__t{font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.5rem);
  line-height:1;letter-spacing:-.03em;transition:color .35s}
.sys__row:hover .sys__t{color:var(--orange-txt)}
.sys__ar{margin-left:auto;width:17px;height:17px;flex:none;color:var(--fg-3);
  transition:transform .5s var(--ez),color .35s}
.sys__row:hover .sys__ar{transform:translateX(6px);color:var(--orange-txt)}
.sys__pane{position:sticky;top:calc(var(--nav) + 2rem)}
.sys__pane .ph{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ez)}
.sys__pane .ph.on{opacity:1}
.sys__pane .ph img{height:100%}
.sys__frame{position:relative;aspect-ratio:4/5}

/* process — a rule that fills as you scroll */
.steps{position:relative;padding-left:clamp(1.6rem,4vw,3.6rem)}
.steps::before{content:"";position:absolute;left:0;top:.6rem;bottom:.6rem;width:1px;
  background:var(--rule-2)}
.steps__fill{position:absolute;left:0;top:.6rem;width:1px;height:0;background:var(--orange)}
.steps__i{position:relative;padding-block:clamp(1.6rem,3.4vw,2.6rem);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);
  gap:clamp(1.5rem,3vw,3rem);align-items:start;border-bottom:1px solid var(--rule)}
.steps__i:last-child{border-bottom:0}
.steps__i::before{content:"";position:absolute;
  left:calc(-1*clamp(1.6rem,4vw,3.6rem) - 3.5px);
  top:calc(clamp(1.6rem,3.4vw,2.6rem) + .7rem);
  width:8px;height:8px;border-radius:50%;background:var(--chalk);
  border:1px solid var(--rule-2);transition:.5s var(--ez)}
.steps__i.on::before{background:var(--orange);border-color:var(--orange);
  box-shadow:0 0 0 4px rgba(242,152,35,.20)}
.sand .steps__i::before{background:var(--sand)}
.steps__i h4{margin:.5rem 0 .5rem}
.steps__i p{color:var(--fg-2);max-width:46ch}

/* a full-bleed photographic band */
.band{position:relative;overflow:hidden}
.band .ph{aspect-ratio:21/9}
.band__in{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;
  padding-bottom:clamp(2rem,5vw,4.5rem)}
.band h2,.band p{color:#fff}
.band p{color:rgba(255,255,255,.86)}

/* gallery grid */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,2rem)}
.gal figure{margin:0}

/* colour swatches — must never collapse to one giant chip per row on mobile */
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));
  gap:clamp(.7rem,1.6vw,1.2rem)}
.swatches i{display:block;aspect-ratio:1;border:1px solid var(--rule-2)}
.swatches p{margin-top:.5rem;font-size:var(--t-xs);color:var(--fg-2)}

/* coverage list */
.towns{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  border-top:1px solid var(--rule-2)}
.towns div{display:flex;justify-content:space-between;gap:.8rem;
  padding:.85rem .8rem .85rem 0;border-bottom:1px solid var(--rule);font-size:.92rem}
.towns span{color:var(--fg-2)}
.towns b{font-weight:500;color:var(--fg)}

/* ---------- 08 HERO ------------------------------------------------------- */
/* Full-bleed photograph with the copy laid over it. The scrim is a two-stop
   gradient rather than a flat tint: heavier at the top so the white nav reads,
   heavier again at the bottom behind the text, and lightest through the middle
   so the photograph is still the thing you notice. */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;isolation:isolate;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 54%}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(
  to bottom,
  rgba(14,20,30,.66) 0%,
  rgba(14,20,30,.26) 24%,
  rgba(14,20,30,.30) 46%,
  rgba(14,20,30,.72) 78%,
  rgba(14,20,30,.88) 100%)}

.hero__in{padding-top:calc(var(--nav) + 3rem);padding-bottom:clamp(2rem,4vw,3.4rem);
  width:100%}
.hero h1{color:#fff;max-width:15ch;
  text-shadow:0 2px 28px rgba(10,16,24,.4)}
.hero h1 .l{display:block;overflow:hidden}
.hero h1 .l>span{display:block;transform:translateY(105%);
  transition:transform 1s var(--ez)}
.hero.ready h1 .l>span{transform:none}
.hero h1 .l:nth-child(2)>span{transition-delay:.08s}
.hero h1 .l:nth-child(3)>span{transition-delay:.16s}
.hero .eyebrow{color:rgba(255,255,255,.76)}
.hero .eyebrow em{color:#F5A94A}
.hero .eyebrow i{background:rgba(255,255,255,.42)}
.hero__lead{margin-top:1.5rem;max-width:56ch;color:rgba(255,255,255,.9);
  font-size:var(--t-lead);line-height:1.58;text-shadow:0 1px 18px rgba(10,16,24,.5)}
.hero__acts{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
/* navy on a dark photograph disappears — the primary call to action takes the
   brand orange here, which also puts the logo colour above the fold */
.hero .btn:not(.btn--line){background:var(--orange);color:var(--ink)}
.hero .btn:not(.btn--line)::before{background:#fff}
/* on a photograph the outline button needs a solid edge to stay visible */
.hero .btn--line{border-color:rgba(255,255,255,.55);color:#fff}
.hero .btn--line:hover{color:var(--ink);border-color:#fff}
.hero .btn--line::before{background:#fff}

.hero__strip{width:100%;border-top:1px solid rgba(255,255,255,.22);
  padding-block:1rem;backdrop-filter:blur(2px)}
.hero__strip .wrap{display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.82);font-weight:600}

/* Interior page hero.
   The photograph is the background layer and the copy is the flow element, so
   the section is always at least as tall as its text. Sizing the image with an
   aspect-ratio and absolutely positioning the copy inside it — which is what
   this used to do — made the text overflow upward behind the nav on every
   phone, because the copy needs ~400px and a 4:3 image on a 390px screen is
   only ~293px tall. */
.phero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(430px,54svh,640px);overflow:hidden}
.phero__ph{position:absolute;inset:0;z-index:1}
.phero__ph img{width:100%;height:100%;object-fit:cover}
.phero__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(
  to bottom,
  rgba(14,16,20,.62) 0%,
  rgba(14,16,20,.30) 22%,
  rgba(14,16,20,.34) 48%,
  rgba(14,16,20,.80) 100%)}
.phero__in{position:relative;z-index:2;width:100%;
  padding-top:calc(var(--nav) + clamp(2rem,5vw,4rem));
  padding-bottom:clamp(2rem,4vw,3.6rem)}
.phero h1{color:#fff;max-width:17ch;font-size:clamp(2.2rem,5vw,4.4rem)}
.phero .lead{color:rgba(255,255,255,.88)}
.phero .eyebrow{color:rgba(255,255,255,.7)}
.phero .eyebrow em{color:#F5A94A}
.phero .eyebrow i{background:rgba(255,255,255,.4)}
.crumb{display:flex;align-items:center;gap:.6rem;margin-bottom:1.2rem;
  font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.66);font-weight:600}
.crumb a:hover{color:#fff}

/* ---------- 09 CTA -------------------------------------------------------- */
.cta{position:relative;overflow:hidden}
.cta__in{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(2rem,5vw,5rem);
  align-items:end}
.cta h2{max-width:16ch}
.cta__list{border-top:1px solid var(--rule-2)}
.cta__list div{display:flex;justify-content:space-between;gap:1.2rem;
  padding:.95rem 0;border-bottom:1px solid var(--rule);font-size:.92rem}
.cta__list span{color:var(--fg-2)}
.cta__list b{font-weight:500}

/* ---------- compare slider ------------------------------------------------ */
.cmp{position:relative;overflow:hidden;background:var(--sand-2);
  aspect-ratio:3/4;touch-action:pan-y;isolation:isolate}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp__after{position:absolute;inset:0;clip-path:inset(0 0 0 50%)}
.cmp__tag{position:absolute;top:1rem;z-index:3;font-size:var(--t-xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;padding:.42rem .7rem;
  background:rgba(22,32,46,.72);color:#fff;backdrop-filter:blur(6px);pointer-events:none}
.cmp__tag--a{left:1rem}
.cmp__tag--b{right:1rem;background:rgba(242,152,35,.92);color:#16202E}
.cmp__bar{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;
  z-index:4;pointer-events:none;box-shadow:0 0 0 1px rgba(22,32,46,.25)}
.cmp__bar::after{content:"";position:absolute;top:50%;left:50%;width:46px;height:46px;
  transform:translate(-50%,-50%);border-radius:50%;background:#fff;
  box-shadow:0 2px 14px rgba(22,32,46,.35);
  /* the two chevrons that say "drag me" */
  background-image:
    linear-gradient(45deg,transparent 46%,var(--ink) 46%,var(--ink) 54%,transparent 54%),
    linear-gradient(-45deg,transparent 46%,var(--ink) 46%,var(--ink) 54%,transparent 54%);
  background-size:9px 9px,9px 9px;
  background-position:calc(50% - 8px) 50%,calc(50% + 8px) 50%;
  background-repeat:no-repeat}
/* the range input IS the control — invisible, full-bleed, fully accessible */
.cmp__range{position:absolute;inset:0;z-index:5;width:100%;height:100%;
  margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:none}
.cmp__range::-webkit-slider-thumb{-webkit-appearance:none;width:56px;height:100%;cursor:ew-resize}
.cmp__range::-moz-range-thumb{width:56px;height:999px;border:0;background:transparent;cursor:ew-resize}
.cmp__range:focus-visible+.cmp__bar::after{outline:3px solid var(--orange);outline-offset:3px}

/* ---------- picker (tabbed product selector) ------------------------------ */
.pick{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(1.6rem,4vw,4rem);align-items:start}
.pick__tabs{display:flex;flex-direction:column;border-top:1px solid var(--rule-2)}
.pick__tab{display:flex;align-items:baseline;gap:1rem;width:100%;text-align:left;
  padding:clamp(1rem,2.2vw,1.5rem) 0;border-bottom:1px solid var(--rule);
  position:relative;transition:padding-left .45s var(--ez),color .3s}
.pick__tab::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--orange);transform:scaleY(0);transform-origin:50% 0;
  transition:transform .45s var(--ez)}
.pick__tab:hover{padding-left:.7rem}
.pick__tab[aria-selected="true"]{padding-left:1.1rem}
.pick__tab[aria-selected="true"]::before{transform:scaleY(1)}
.pick__n{font-family:var(--serif);font-style:italic;font-size:.98rem;
  color:var(--fg-3);flex:none;transition:color .3s}
.pick__tab[aria-selected="true"] .pick__n{color:var(--orange-txt)}
.pick__t{font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1;
  letter-spacing:-.03em;flex:1}
.pick__tab[aria-selected="true"] .pick__t{color:var(--ink)}
.pick__tab .pick__ar{width:16px;height:16px;color:var(--fg-3);flex:none;opacity:0;
  transform:translateX(-6px);transition:.45s var(--ez)}
.pick__tab[aria-selected="true"] .pick__ar{opacity:1;transform:none;color:var(--orange-txt)}

.pick__stage{position:relative}
.pick__panel{display:none}
.pick__panel.on{display:block;animation:pickIn .6s var(--ez)}
@keyframes pickIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pick__panel .ph{aspect-ratio:4/3}
.pick__meta{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.1rem}
.pick__panel p{margin-top:.9rem;color:var(--fg-2)}
.pick__panel h3{margin-top:1.1rem}

/* ---------- wizard -------------------------------------------------------- */
.wiz__head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  margin-bottom:1.3rem}
.wiz__count{font-size:var(--t-xs);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3)}
.wiz__bar{height:2px;background:var(--rule-2);overflow:hidden;margin-bottom:2rem}
.wiz__bar i{display:block;height:100%;background:var(--orange);
  transform:scaleX(.34);transform-origin:0 50%;transition:transform .55s var(--ez)}
.step{border:0;padding:0;margin:0;min-width:0}
.step legend{font-family:var(--serif);font-size:var(--t-h3);line-height:1.14;
  letter-spacing:-.025em;margin-bottom:1.4rem;padding:0}
.step p.sm{margin-top:-.7rem;margin-bottom:1.4rem;color:var(--fg-2)}
.wiz__nav{display:flex;gap:.7rem;align-items:center;margin-top:1.8rem;flex-wrap:wrap}
.wiz__nav .btn{flex:none}
.sendfail{display:none;border-left:2px solid #B4432B;padding:.2rem 0 .2rem 1.2rem;
  margin-bottom:1.4rem}
.sendfail.on{display:block}
.sendfail h5{font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase;
  color:#B4432B;font-weight:600;margin-bottom:.4rem}
/* the honeypot: off-screen, never focusable, invisible to real visitors */
.trap{position:absolute!important;left:-9999px!important;width:1px;height:1px;
  overflow:hidden}

@media (max-width:1024px){
  .pick{grid-template-columns:1fr}
  .pick__stage{order:-1}
}
@media (max-width:520px){
  .cmp{aspect-ratio:4/5}
  .cmp__tag{font-size:.62rem;padding:.34rem .5rem}
}

/* ---------- 10 FORMS ------------------------------------------------------ */
.form{display:grid;gap:1.3rem}
.fld{display:flex;flex-direction:column;gap:.5rem}
.fld label{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-3);font-weight:600}
.fld label span{color:var(--orange-txt)}
.fld input,.fld textarea,.fld select{
  background:var(--chalk);border:1px solid var(--rule-2);padding:.9rem 1rem;
  font-size:.97rem;color:var(--fg);border-radius:2px;
  transition:border-color .3s,box-shadow .3s}
.sand .fld input,.sand .fld textarea,.sand .fld select{background:#fff}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(242,152,35,.20);outline:none}
.fld textarea{resize:vertical;min-height:130px;line-height:1.6}
.fld select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--fg-3) 50%),
                   linear-gradient(135deg,var(--fg-3) 50%,transparent 50%);
  background-position:calc(100% - 19px) 54%,calc(100% - 14px) 54%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.fld.bad input,.fld.bad textarea,.fld.bad select{border-color:#B4432B}
.err{font-size:var(--t-xs);color:#B4432B;display:none;letter-spacing:.04em}
.fld.bad .err{display:block}
.g-2f{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.ok{display:none;border:1px solid var(--orange);background:rgba(242,152,35,.09);
  padding:1.7rem;margin-bottom:1.6rem}
.ok.on{display:block}
.ok h4{color:var(--orange-txt);margin-bottom:.5rem}
.ok p{color:var(--fg-2)}
.consent{display:flex;gap:.8rem;align-items:flex-start}
.consent input{width:16px;height:16px;flex:none;margin-top:.3rem;accent-color:var(--orange)}
.consent label{font-size:.9rem;letter-spacing:0;text-transform:none;
  color:var(--fg-2);line-height:1.55;font-weight:400}
.consent.bad label{color:#B4432B}

/* ---------- 11 FOOTER ----------------------------------------------------- */
.foot{background:var(--navy);color:#F6F2EA;
  --fg:#F6F2EA;--fg-2:rgba(246,242,234,.7);--fg-3:rgba(246,242,234,.46);
  --rule:rgba(246,242,234,.14);--rule-2:rgba(246,242,234,.26);--orange-txt:#F5A94A}
.foot__top{display:grid;grid-template-columns:1.6fr repeat(3,1fr);
  gap:clamp(1.6rem,3vw,3rem);padding-block:clamp(3.2rem,6vw,5.5rem)}
.foot__brand p{color:var(--fg-2);max-width:32ch;margin-top:1.2rem;font-size:.94rem}
.foot__col h5{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-3);font-weight:600;padding-bottom:.85rem;margin-bottom:.85rem;
  border-bottom:1px solid var(--rule)}
.foot__col a,.foot__col p{display:block;font-size:.93rem;color:var(--fg-2);
  padding:.3rem 0;transition:color .3s}
.foot__col a:hover{color:#F5A94A}
.foot__bot{display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  padding-block:1.4rem;border-top:1px solid var(--rule);
  font-size:var(--t-xs);color:var(--fg-3);letter-spacing:.04em}
.foot__bot a:hover{color:#F5A94A}
.foot__note{background:var(--navy-2);padding-block:1.1rem;
  font-size:var(--t-xs);color:rgba(246,242,234,.42);line-height:1.75}

/* two service regions side by side */
.regions{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.6rem);
  border-top:1px solid var(--rule-2);padding-top:1.4rem}
.regions__col h5{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange-txt);font-weight:600;margin-bottom:.9rem}
.regions__col ul{display:grid;gap:.1rem}
.regions__col li{font-size:.95rem;color:var(--fg-2);padding:.42rem 0;
  border-bottom:1px solid var(--rule)}
.regions__col li:last-child{border-bottom:0}
@media (max-width:520px){.regions{grid-template-columns:1fr 1fr;gap:1.1rem}
  .regions__col li{font-size:.88rem}}

/* ---------- touch targets -------------------------------------------------
   Everything tappable gets to at least ~44px on a phone. Most of these are
   fine visually already — they just needed the padding to make the hit area
   match what a thumb actually needs. */
@media (max-width:820px){
  .nav__tel{width:44px;height:44px;padding:0;display:grid;place-items:center}
  .nav__tel svg{width:18px;height:18px}
  .menu{min-height:44px}

  /* footer and panel link lists */
  .foot__col a{padding:.62rem 0;min-height:44px;display:flex;align-items:center}
  .foot__col p{padding:.4rem 0}
  .foot__bot nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 .5rem}
  .foot__bot nav a:first-child{padding-left:0}
  .panel__side a{min-height:40px;display:flex;align-items:center}

  /* inline text links */
  .tlink{min-height:44px;align-items:center;padding-bottom:0}
  .tlink::after{bottom:12px}
  .crumb a{display:inline-flex;align-items:center;min-height:40px}

  /* the accordion row is the target, and it is already tall — but make the
     whole width of it tappable rather than just the words */
  .acc__b{min-height:56px}
  .pick__tab{min-height:56px}

  /* form controls need to be 16px+ or iOS zooms the page on focus */
  .fld input,.fld textarea,.fld select{font-size:16px;padding:.95rem 1rem}
  .consent input{width:22px;height:22px;margin-top:.15rem}
  .consent label{padding:.3rem 0}
}
@media (max-width:520px){
  /* these were rendering at 9.9px — too small to read on a phone */
  .cmp__tag{font-size:.72rem;padding:.4rem .6rem}
}

/* ---------- 12 MOTION ----------------------------------------------------- */
[data-r]{opacity:0;will-change:opacity,transform}
[data-r="up"]{transform:translateY(24px)}
[data-r="fade"]{transform:none}
[data-r="rise"]{transform:translateY(40px)}
[data-r].in{opacity:1;transform:none;
  transition:opacity .9s var(--ez),transform 1s var(--ez);
  transition-delay:var(--d,0ms)}

/* Photographs settle: they come in very slightly enlarged and ease back to
   their true size as the frame reveals. Cheap, and it stops a grid of stills
   feeling completely inert. */
[data-r] .ph img{transform:scale(1.07)}
[data-r].in .ph img{transform:none;transition:transform 1.5s var(--ez);
  transition-delay:var(--d,0ms)}

/* Parallax. JS writes --py; the image drifts inside its own frame, so the
   layout never moves and nothing can overflow. */
.ph--par{overflow:hidden}
.ph--par img{will-change:transform;transform:translate3d(0,var(--py,0px),0) scale(1.16)}
[data-r].in .ph--par img{transform:translate3d(0,var(--py,0px),0) scale(1.16)}

/* Headings revealed line by line. JS wraps each visual line in .ln > span;
   until it has run the heading is plain text, so no-JS still reads correctly. */
.ln{display:block;overflow:hidden}
.ln>span{display:block;transform:translateY(105%);
  transition:transform .95s var(--ez);transition-delay:var(--ld,0ms)}
[data-lines].in .ln>span{transform:none}

/* the nav retracts on the way down and comes straight back on the way up */
.nav{transform:translateY(0);transition:background .45s var(--ez),box-shadow .45s,
  height .45s var(--ez),transform .5s var(--ez)}
.nav.away{transform:translateY(-105%)}

/* The curtain wipe clips the *child*, never the observed element itself.
   Clipping the observed node to zero height stops IntersectionObserver from
   ever reporting an intersection, so the reveal would never fire. */
[data-r="veil"]{opacity:1}
[data-r="veil"] .ph{clip-path:inset(0 0 100% 0)}
[data-r="veil"].in .ph{clip-path:inset(0 0 0 0);
  transition:clip-path 1.05s var(--ez-io);transition-delay:var(--d,0ms)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  [data-r]{opacity:1!important;transform:none!important}
  [data-r="veil"] .ph{clip-path:none!important}
  [data-r] .ph img,.ph--par img{transform:none!important}
  .ln>span{transform:none!important}
  .nav.away{transform:none!important}
  .hero h1 .l>span{transform:none}
  .hero__ph::after{display:none}
  .hero__ph .ph img{transform:none}
  .sys__pane{position:static}
}

/* ---------- 13 RESPONSIVE ------------------------------------------------- */
@media (max-width:1100px){
  .nav__links{display:none}
  .menu{display:flex}
  .foot__top{grid-template-columns:1fr 1fr 1fr}
  .foot__brand{grid-column:1/-1}
  .hero__top{grid-template-columns:1fr;align-items:start}
  .hero h1{max-width:18ch}
  .sys{grid-template-columns:1fr}
  .sys__pane{display:none}
  .cta__in{grid-template-columns:1fr}
  .panel__body{grid-template-columns:1fr;align-content:start;padding-top:2.5rem}
  .panel__side{border-left:0;padding-left:0;padding-top:1.6rem;
    border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(2,1fr)}
  .gal{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .g-12{grid-template-columns:repeat(6,1fr)}
  .c-4,.c-5,.c-6,.c-7,.c-8,.c-12{grid-column:span 6}
  .at-6,.at-7,.at-8{grid-column:span 6}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .g-2f{grid-template-columns:1fr}
  .steps__i{grid-template-columns:1fr}
  .steps__i .ph{max-width:330px}
  .shead__rule{flex-direction:column;gap:.9rem;align-items:flex-start}
  .shead__note{text-align:left;padding-bottom:0}
  .band .ph{aspect-ratio:3/2}
  .hero{min-height:92svh}
  .hero__in{padding-top:calc(var(--nav) + 1.6rem)}
  .hero__strip .wrap{gap:.5rem 1.2rem;font-size:.72rem;letter-spacing:.1em}
  .gal{grid-template-columns:1fr}
  .foot__top{grid-template-columns:1fr 1fr}

  /* Mobile nav: logo + phone + Menu only. The survey button moves to the fixed
     bar at the bottom — leaving it up here pushed Menu clean off the screen. */
  .nav__in{gap:.7rem}
  .brand img{height:40px}
  .nav.stuck .brand img{height:34px}
  .nav__act{gap:.5rem;margin-left:auto}
  .nav__act .btn{display:none}
  .nav__tel span{display:none}
  .nav__tel{padding:.62rem;border:1px solid var(--rule-2)}
  .nav--over:not(.stuck) .nav__tel{border-color:rgba(255,255,255,.42)}
  .menu{padding:.62rem .75rem}

  .mbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;
    left:0;right:0;bottom:0;z-index:78;border-top:1px solid var(--rule-2);
    background:rgba(251,249,245,.97);backdrop-filter:blur(14px)}
  body{padding-bottom:57px}
  .panel{bottom:57px}
}
@media (max-width:520px){
  :root{--nav:70px}
  .hero__strip .wrap{display:grid;grid-template-columns:1fr 1fr}
  .btn{padding:.85rem 1.2rem;font-size:.82rem}
  .stats{grid-template-columns:1fr 1fr}
  .towns{grid-template-columns:1fr 1fr}
  .acc__p p{padding-left:0}
  .foot__top{grid-template-columns:1fr}
}