/* =====================================================================
   A.W. WINDOWS: styles
   Brand colours, gradients and fonts live in :root below. Change them
   there and the whole site follows. Mobile first: base styles are for
   phones, wider screens are added in the min-width blocks at the bottom.

   The look: deep water. Navy to sky blue gradients with a fine grain,
   the water drop from Andrew's van as large background art and as a
   photo frame, real water beading on the hero photo, square glass panels,
   and small capitals taken from the van lettering. No small icons.
   ===================================================================== */

:root {
  /* ---- Brand colours ---- */
  --ink-950: #04101f;
  --navy-900: #071a33;
  --navy: #0b2244;        /* deep navy */
  --navy-700: #133a6b;
  --blue: #1667b5;        /* deep water blue */
  --sky: #3aa0e8;         /* the drop on the van */
  --sky-300: #8fd0fb;
  --ice: #d7eefe;
  --mist: #eaf4fc;
  --paper: #f3f7fb;
  --white: #ffffff;
  --ink: #0b2244;         /* heading text */
  --text: #33465f;        /* body text */
  --muted: #5f7189;       /* small print */
  --lattice: #dbe5ef;

  /* ---- Signature gradients ---- */
  --g-water: linear-gradient(135deg, #2a92de 0%, #1667b5 52%, #0f4c92 100%);            /* buttons */
  --g-water-hi: linear-gradient(135deg, #43a8ee 0%, #1b74c4 52%, #12579f 100%);         /* buttons on hover */
  --g-text: linear-gradient(100deg, #e4f4ff 0%, #8fd0fb 42%, #3aa0e8 100%);             /* headline words on dark */
  --g-ink: linear-gradient(100deg, #0b2244 0%, #1667b5 62%, #3aa0e8 100%);              /* headline words on light */
  --g-deep:
    radial-gradient(90% 70% at 88% 0%, rgba(58, 160, 232, .34) 0%, rgba(58, 160, 232, 0) 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(22, 103, 181, .38) 0%, rgba(22, 103, 181, 0) 62%),
    linear-gradient(180deg, #0b2244 0%, #071a33 100%);                                 /* dark sections */
  --g-light: linear-gradient(180deg, #ffffff 0%, #f3f8fd 100%);                         /* light sections */
  /* fine grain over gradients, so they look printed rather than flat */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

  /* ---- Fonts ---- */
  /* option 2 from Pack 1 (Andrew, 26 Oct): Cinzel has no lowercase, so lowercase
     letters come out as small capitals, like the lettering on the van */
  --f-head: 'Cinzel', 'Times New Roman', serif;             /* headings */
  --f-sc: 'Cinzel', 'Times New Roman', serif;               /* small capitals for labels and buttons */
  --f-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ---- Depth and motion ---- */
  --glass: rgba(255, 255, 255, .07);
  --shadow-sm: 0 1px 2px rgba(7, 26, 51, .06), 0 8px 20px -12px rgba(7, 26, 51, .3);
  --shadow: 0 2px 4px rgba(7, 26, 51, .04), 0 22px 46px -24px rgba(7, 26, 51, .4);
  --shadow-lg: 0 2px 6px rgba(7, 26, 51, .05), 0 40px 80px -36px rgba(7, 26, 51, .55);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --wrap: 1200px;
  --gut: 20px;
  --hd-h: 64px;
  --dock-h: 0px;
}

/* ================= Base ================= */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hd-h) + 16px); }
body {
  margin: 0; background: var(--white); color: var(--text);
  font: 400 16px/1.65 var(--f-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  padding-bottom: var(--dock-h);
}
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--f-head); font-weight: 500; color: var(--ink); line-height: 1.12; letter-spacing: 0; margin: 0; text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic { width: 18px; height: 18px; }
.wrap { position: relative; width: 100%; max-width: calc(var(--wrap) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); }
.sc { font-family: var(--f-sc); text-transform: lowercase; letter-spacing: .07em; }
.grad, .grad-ink { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.grad { background-image: var(--g-text); }
.grad-ink { background-image: var(--g-ink); }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--navy); color: #fff; padding: 10px 16px; }
.skip:focus { top: 12px; }

/* Parts that wait for a switch in config.js */
html:not(.f-rating) [data-needs="rating"],
html:not(.f-reviews) [data-needs="reviews"],
html:not(.f-email) [data-needs="email"],
html:not(.f-wa) [data-needs="wa"],
html:not(.f-socials) [data-needs="socials"],
html:not(.f-towns) [data-needs="towns"],
html:not(.f-extras) [data-needs="extras"] { display: none !important; }

/* large water drops used as background art */
.art { position: absolute; z-index: 0; pointer-events: none; width: 520px; height: 676px; stroke: none; }
.art use { fill: url(#g-drop-sky); }

/* ================= Buttons: square, with a square arrow cell ================= */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 24px; border: 0; cursor: pointer; overflow: hidden; isolation: isolate;
  font: 400 17px/1 var(--f-sc); letter-spacing: .04em; white-space: nowrap;
  transition: background-color .3s, color .3s, box-shadow .35s var(--ease), transform .35s var(--ease);
}
.btn .arr {
  /* auto pushes the arrow cell to the right edge when the button is full width */
  align-self: stretch; display: grid; place-items: center; width: 52px; margin: 0 -24px 0 auto;
  background: rgba(4, 16, 31, .22); transition: background-color .3s;
}
.btn .arr svg { width: 18px; height: 18px; transition: transform .4s var(--ease); }
.btn:hover .arr svg { transform: translateX(4px); }
.btn:active { transform: scale(.985); }
.btn-lg { min-height: 58px; font-size: 18px; }
.btn-lg .arr { width: 58px; }
/* a band of light crosses the button on hover, like a squeegee pass */
.btn::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -50%; width: 35%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-20deg);
  transition: left .8s var(--ease);
}
.btn:hover::after { left: 120%; }
.btn-grad { color: #fff; background: var(--g-water); box-shadow: 0 14px 30px -14px rgba(22, 103, 181, .95); }
.btn-grad::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--g-water-hi); opacity: 0; transition: opacity .35s; }
.btn-grad:hover::before { opacity: 1; }
.btn-navy { color: #fff; background: var(--navy); box-shadow: 0 12px 26px -14px rgba(7, 26, 51, .9); }
.btn-navy .arr { background: var(--g-water); }
.btn-navy:hover { background: var(--navy-700); }
.btn-glass {
  color: #fff; background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 12px 28px -16px rgba(4, 16, 31, .6);
}
.btn-glass:hover { background: rgba(255, 255, 255, .18); }
.btn-white { color: var(--navy); background: var(--white); box-shadow: var(--shadow-sm); }
.btn-white:hover { background: var(--mist); }
.btn-ghost { color: #fff; background: rgba(255, 255, 255, .1); }
.btn-ghost .arr { background: rgba(255, 255, 255, .08); }
.btn-ghost:hover { background: rgba(255, 255, 255, .13); }
.btn-wa { color: #fff; background: linear-gradient(135deg, #25c464, #128a45); box-shadow: 0 12px 26px -14px rgba(18, 138, 69, .9); }
.btn-wa:hover { filter: brightness(1.06); }

/* ================= Header ================= */
.hd-top { display: none; background: var(--navy-900); color: rgba(255, 255, 255, .72); font-size: 14px; }
.hd-top-in { display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.hd-top .sc { font-size: 15px; }
.hd-top-r { display: flex; align-items: center; gap: 24px; }
.hd-top-r a { color: #fff; font-weight: 700; transition: color .25s; }
.hd-top-r a:hover { color: var(--sky-300); }
/* the long strapline only fits on computers; tablets keep the insured, WhatsApp and phone side */
@media (max-width: 1039px) { .hd-top-in > .sc { display: none; } .hd-top-in { justify-content: flex-end; } }

.hd { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: box-shadow .4s var(--ease); }
.hd.scrolled { box-shadow: 0 16px 34px -24px rgba(7, 26, 51, .55); }
.hd-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--hd-h); }
/* Andrew wants the logo on the right: menu and call on the left on phones, nav and quote button on the left on computers */
.brand { display: flex; align-items: center; flex: none; order: 2; }
.brand-logo {
  height: 50px; width: auto; max-width: none;
}
.nav { display: none; }
.hd-cta { display: flex; align-items: center; gap: 8px; order: 1; }
.menu-btn { order: -1; }
.hd-quote { display: none; }
.sq { display: grid; place-items: center; width: 46px; height: 46px; border: 0; cursor: pointer; flex: none; }
.sq-call { width: auto; padding: 0 14px; color: #fff; background: var(--g-water); font: 400 17px/1 var(--f-sc); letter-spacing: .04em; }
.menu-btn { position: relative; background: var(--navy); }
.menu-btn span { position: absolute; left: 13px; right: 13px; height: 2px; background: #fff; transition: transform .35s var(--ease), opacity .2s, top .35s var(--ease); }
.menu-btn span:nth-child(1) { top: 16px; }
.menu-btn span:nth-child(2) { top: 22px; }
.menu-btn span:nth-child(3) { top: 28px; }
.hd.open .menu-btn span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.hd.open .menu-btn span:nth-child(2) { opacity: 0; }
.hd.open .menu-btn span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

/* the water line: fills as you scroll down the page */

.menu { position: absolute; left: 0; right: 0; top: 100%; height: calc(100svh - var(--hd-h)); overflow-y: auto; background: var(--g-deep); padding: 12px 0 32px; }
.menu-nav { display: grid; counter-reset: mn; }
.menu-nav a {
  display: flex; align-items: baseline; gap: 16px; padding: 18px 0; counter-increment: mn;
  font: 400 29px/1.1 var(--f-head); color: #fff;
}
.menu-nav a span { font: 700 13px/1 var(--f-body); color: var(--sky-300); letter-spacing: .08em; }
.menu-nav a span::before { content: counter(mn, decimal-leading-zero); }
.menu-cta { display: grid; gap: 10px; margin-top: 28px; }
.menu-cta .btn { width: 100%; }

/* ================= Hero: through the glass ================= */
.hero { position: relative; overflow: hidden; isolation: isolate; color: rgba(255, 255, 255, .86); background: var(--navy-900); }
/* phones and tablets: the photo sits on top, clear of the words, and fades into the navy */
.hero-media { position: absolute; left: 0; right: 0; top: 0; height: min(60svh, 640px); z-index: -3; }
.hero-media picture, .hero-media img { width: 100%; height: 100%; }
/* crops keep Andrew and the window he is cleaning in frame at every size */
/* Andrew's block of flats photo: kept on him and the top floor window his pole is cleaning */
.hero-media img { object-fit: cover; object-position: 80% 50%; animation: settle 2.6s var(--ease) both; }
/* the drops sit on the glass, in front of the colour wash */
.drops { position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: min(60svh, 640px); pointer-events: none; }
/* deep water wash, strongest where the words sit */
.hero::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: min(60svh, 640px); z-index: -2;
  background:
    linear-gradient(180deg, rgba(7, 26, 51, .25) 0%, rgba(7, 26, 51, 0) 22%, rgba(7, 26, 51, 0) 66%, rgba(7, 26, 51, .72) 88%, #071a33 100%),
    radial-gradient(80% 50% at 100% 0%, rgba(58, 160, 232, .25), rgba(58, 160, 232, 0) 70%);
}
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: .06; mix-blend-mode: overlay; pointer-events: none; }
.hero-in { padding-top: calc(min(60svh, 640px) - 64px); padding-bottom: 44px; }
.hero-copy > * { animation: rise 1s var(--ease) both; animation-delay: calc(.3s + var(--d, 0s)); }
.hero-copy > :nth-child(3) { --d: .08s; }
.hero-copy > :nth-child(4) { --d: .16s; }
.hero-copy > :nth-child(5) { --d: .24s; }
.hero-copy > :nth-child(6) { --d: .3s; }
.hero-copy > :nth-child(7) { --d: .4s; }
.kicker { display: flex; align-items: center; gap: 12px; color: var(--sky-300); font-size: 17px; margin-bottom: 16px; }
.hero h1 { color: #fff; font-size: clamp(1.75rem, 7.4vw, 3rem); line-height: 1.14; max-width: 22ch; text-shadow: 0 2px 30px rgba(4, 16, 31, .35); }
.hero h1 .grad { text-shadow: none; }
.lede { margin-top: 18px; font-size: 1.05rem; line-height: 1.6; max-width: 40rem; color: rgba(255, 255, 255, .86); }
.hero-btns { display: grid; gap: 10px; margin-top: 28px; }
.hero-btns .btn { width: 100%; }
.hero-btns.hero-btns-3 { display: grid; }
.home-link { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 20px; font-size: 15px; color: rgba(255, 255, 255, .78); transition: color .25s; }
.home-link b { display: inline-flex; align-items: center; gap: 8px; color: var(--sky-300); font-weight: 700; }
.home-link svg { width: 16px; height: 16px; color: var(--sky-300); transition: transform .4s var(--ease); }
.home-link:hover { color: #fff; }
.home-link:hover svg { transform: translateX(4px); }

.g-badge {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 8px 14px 8px 8px;
  font-size: 14px; color: #fff; background: rgba(255, 255, 255, .12);
}
.g-badge b { font-weight: 800; }
.g-logo { width: 22px; height: 22px; padding: 3px; background: #fff; box-sizing: content-box; }
.g-stars { display: inline-flex; gap: 1px; color: #fbbc04; }
.g-stars svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.g-count { opacity: .75; }

/* ================= Section shell ================= */
main { counter-reset: sec; }
.sec { position: relative; padding: 60px 0; overflow: hidden; isolation: isolate; }
.sec > .wrap { z-index: 1; }
.sh { margin-bottom: 28px; }
.sh h2 { font-size: clamp(2.15rem, 8vw, 3.6rem); }
.sh > p { margin-top: 16px; font-size: 1.05rem; max-width: 34rem; }
.idx { display: flex; align-items: center; margin-bottom: 18px; font: 400 17px/1 var(--f-sc); text-transform: lowercase; letter-spacing: .07em; color: var(--blue); counter-increment: sec; }
.idx span { display: inline-flex; align-items: center; font: 400 16px/1 var(--f-head); letter-spacing: .04em; }
/* section numbers count only what's showing, so a switched off section never leaves a gap */
.idx span::before { content: counter(sec, decimal-leading-zero); }
.idx span { margin-right: 12px; }
.sh-light h2 { color: #fff; }
.sh-light > p { color: rgba(255, 255, 255, .8); }
.sh-light .idx, .quote .idx { color: var(--sky-300); }

/* dark sections share the deep water gradient and grain */
.sectors, .quote, .ft { background: var(--g-deep); color: rgba(255, 255, 255, .8); }
.sectors::after, .quote::after, .ft::after {
  content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: .07; mix-blend-mode: overlay; pointer-events: none;
}

/* ================= In numbers: they count up when they come into view ================= */
.counts { position: relative; padding: 36px 0 30px; background: linear-gradient(180deg, var(--mist) 0%, var(--white) 100%); }
.counts-in { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 8px; text-align: center; }
a.count { color: inherit; }
.count { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.count b { font: 600 clamp(1.7rem, 8.4vw, 4.6rem)/1 var(--f-head); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.count span { font-size: clamp(14px, 3.6vw, 19px); line-height: 1.2; color: var(--blue); }

/* ================= About ================= */
.about { background: var(--white); }
.about-in, .whyc-in { display: grid; gap: 36px; }
.about-copy h2, .whyc-copy h2 { font-size: clamp(2rem, 7.4vw, 3.2rem); }
.big-p { margin-top: 22px; font: 500 clamp(1.14rem, 3.9vw, 1.34rem)/1.55 var(--f-body); color: var(--ink); max-width: 40rem; }
.about-copy > p:not(.idx):not(.big-p), .whyc-copy > p:not(.idx):not(.big-p) { margin-top: 16px; max-width: 40rem; }
.about-photo, .whyc-photo { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; background: var(--mist); box-shadow: var(--shadow-lg); }
.about-photo picture, .about-photo img, .whyc-photo picture, .whyc-photo img { width: 100%; height: 100%; }
.about-photo img, .whyc-photo img { object-fit: cover; }

/* ================= Services: Andrew's eight ================= */
.svc { background: var(--g-light); }
.art-1 { right: -260px; top: -140px; width: 640px; height: 832px; opacity: .55; }
.art-1 use { fill: url(#g-drop-ice); }
.svc-grid { display: grid; gap: 12px; }
.svc-card { position: relative; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; background-color: var(--white); box-shadow: var(--shadow); }
.svc-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist); }
.svc-img picture, .svc-img img { width: 100%; height: 100%; }
.svc-img img { object-fit: cover; transition: transform 1.4s var(--ease), filter 1.6s var(--ease), scale 1.9s var(--ease); }
.svc-card:hover .svc-img img { transform: scale(1.05); }
.svc-txt { padding: 22px 22px 26px; }
.svc-txt h3 { font-size: 1.34rem; line-height: 1.2; }
.svc-txt p { margin-top: 10px; font-size: 15.5px; }
/* services without a photo yet: deep water, with the van's drop behind the words */
.svc-plain { justify-content: flex-end; min-height: 220px; color: rgba(255, 255, 255, .82); background-color: var(--navy); }
.svc-plain::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--g-deep); }
.svc-plain h3 { color: #fff; }
.svc-plain.glow { --glow-c: rgba(143, 208, 251, .17); }
.svc-drop { position: absolute; right: -36px; top: -46px; z-index: -1; width: 180px; height: 234px; stroke: none; opacity: .55; transition: translate 1.2s var(--ease); }
.svc-drop use { fill: url(#g-drop-sky); }
.svc-plain:hover .svc-drop { translate: -8px 10px; }
.svc-cta { display: grid; gap: 10px; margin-top: 34px; }
.svc-cta .btn { width: 100%; }

/* ================= Why choose A.W. Windows ================= */
.whyc { background: var(--white); }

/* ================= Who we work with ================= */
.art-2 { left: -220px; top: -180px; width: 560px; height: 728px; opacity: .35; filter: blur(2px); }
.sect-grid { display: grid; gap: 40px; }
.sect-photo { position: relative; margin: 0 auto; width: min(90vw, 480px); }
/* the photo sits inside the van's water drop */
.drop-frame { position: relative; aspect-ratio: 100 / 130; clip-path: url(#drop-clip); background: var(--navy-700); }
.drop-frame picture, .drop-frame img { width: 100%; height: 100%; }
.drop-frame img { object-fit: cover; }

/* Who we work with: Andrew by his van, as a normal photo (29 Oct) */
.photo-frame { position: relative; overflow: hidden; aspect-ratio: 1220 / 1289; background: var(--navy-700); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); }
.photo-frame picture, .photo-frame img { width: 100%; height: 100%; }
.photo-frame img { object-fit: cover; }
.drop-frame::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(40% 26% at 34% 52%, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 70%),
    linear-gradient(200deg, rgba(58, 160, 232, .0) 40%, rgba(11, 34, 68, .5) 100%);
}
.sect-photo::before {
  content: ''; position: absolute; inset: 14% 6% -2%; z-index: -1;
  background: radial-gradient(closest-side, rgba(58, 160, 232, .55), rgba(58, 160, 232, 0)); filter: blur(24px);
}
.sect-list { display: grid; gap: 10px; counter-reset: st; }
.sect {
  position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 18px; row-gap: 8px; padding: 22px 20px;
  background: rgba(7, 26, 51, .72); counter-increment: st; transition: background-color .35s;
}
.sect::before { content: counter(st, decimal-leading-zero); grid-row: 1 / span 3; font: 400 20px/1.3 var(--f-head); color: var(--sky-300); }
.sect-name { font-size: 1.45rem; color: #fff; }
.sect-name a { color: inherit; }
.sect p { color: rgba(255, 255, 255, .74); font-size: 15px; }
.sect-go { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; color: var(--sky-300); font-size: 17px; justify-self: start; }
.sect-go svg { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.sect:hover { background: rgba(19, 58, 107, .78); }
.sect:hover .sect-go svg { transform: translateX(4px); }

/* ================= How it works ================= */
.how { background: var(--paper); }
.steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: hw; }
.step { position: relative; padding: 30px 24px 32px; background: var(--white); box-shadow: var(--shadow); counter-increment: hw; }
.step::before { content: counter(hw, decimal-leading-zero); display: block; font: 400 58px/1 var(--f-head); background: var(--g-ink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.step h3 { margin-top: 18px; font-size: 1.45rem; }
.step p { margin-top: 10px; }

/* ================= Our work: a window of photos ================= */
.work { background: var(--paper); }
.gal {
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: calc((100vw - var(--gut) * 2 - 24px) / 2); grid-auto-flow: dense;
  gap: 8px; padding: 8px; background: var(--white); box-shadow: var(--shadow-lg);
}
.gal[hidden] { display: none; }
.gi { position: relative; margin: 0; min-height: 0; overflow: hidden; background: var(--mist); }
.g-tall { grid-row: span 2; }
.g-wide { grid-column: span 2; }
.g-big { grid-column: span 2; grid-row: span 2; }
.gi-btn { display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: zoom-in; background: none; }
.gi-btn picture, .gi-btn img { width: 100%; height: 100%; }
.gi-btn img { object-fit: cover; transition: transform 1.4s var(--ease); }
.gi:hover img { transform: scale(1.05); }
.gi figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; pointer-events: none;
  font: 400 15px/1.2 var(--f-sc); text-transform: lowercase; letter-spacing: .05em; color: #fff;
  background: linear-gradient(180deg, rgba(7, 26, 51, 0), rgba(7, 26, 51, .82));
}

/* ================= Before and after: drag to compare ================= */
@property --pos { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
.ba { background: var(--paper); }
.ba-grid { display: grid; gap: 30px; }
.ba-fig { margin: 0; }
.ba-fig figcaption { display: inline-block; padding: 10px 16px 9px; font-size: 16px; color: #fff; background: var(--g-water); }
.slider-tall { aspect-ratio: 4 / 5; }
.slider { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist); box-shadow: var(--shadow-lg); cursor: ew-resize; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.slider picture, .slider img { position: absolute; inset: 0; width: 100%; height: 100%; }
.slider img { object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.s-top { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.s-lab { position: absolute; top: 12px; z-index: 2; padding: 8px 12px 7px; font-size: 15px; color: #fff; background: rgba(7, 26, 51, .74); pointer-events: none; }
.s-lab-b { left: 12px; }
.s-lab-a { right: 12px; background: var(--g-water); }
.s-range { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.s-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 3; width: 0; pointer-events: none; }
.s-handle::before { content: ''; position: absolute; top: 0; bottom: 0; left: -2px; width: 4px; background: rgba(255, 255, 255, .92); box-shadow: 0 0 22px rgba(4, 16, 31, .45); }
.s-handle i { position: absolute; top: 50%; left: 0; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; color: #fff; background: var(--g-water); box-shadow: 0 12px 26px -8px rgba(4, 16, 31, .75); transform: translate(-50%, -50%); transition: transform .35s var(--ease); }
.s-handle svg { width: 17px; height: 17px; stroke-width: 2.6; }
.slider:hover .s-handle i, .slider.drag .s-handle i { transform: translate(-50%, -50%) scale(1.08); }
.slider:has(.s-range:focus-visible) .s-handle i { outline: 3px solid var(--sky); outline-offset: 3px; }
/* when a slider first comes into view the handle sweeps across once, so people know they can drag it */
.slider.hint { animation: hint 2.6s var(--ease) .35s; }
@keyframes hint { 0% { --pos: 50%; } 35% { --pos: 78%; } 72% { --pos: 26%; } 100% { --pos: 50%; } }

/* ================= Reviews ================= */
.rev { background: var(--g-light); }
.rev-sum { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 18px 12px 12px; background: var(--paper); }
.rev-sum b { font: 800 1.5rem/1 var(--f-body); color: var(--ink); margin-right: 8px; }
.rev-sum .g-logo { width: 28px; height: 28px; }
.rev-sum small { display: block; color: var(--muted); font-size: 13px; }
.rev-grid { display: grid; gap: 14px; }
.rev-card { display: flex; flex-direction: column; gap: 14px; padding: 28px 24px; background: var(--white); box-shadow: var(--shadow); }
.rev-card .g-stars svg { width: 17px; height: 17px; }
.rev-card blockquote { margin: 0; color: var(--text); font-size: 15.5px; }
.rev-card .who { margin-top: auto; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.rev-card .who .g-logo { width: 16px; height: 16px; }
.rev-more { margin-top: 32px; }

/* ================= Areas ================= */
.areas { background: var(--white); }
.areas-copy { padding: 0 var(--gut); }
.areas-copy > p:not(.idx) { margin-top: 16px; max-width: 32rem; }
.areas-copy > p:not(.idx) + p { margin-top: 12px; }
.areas-copy h2 { font-size: clamp(2.15rem, 8vw, 3.4rem); }
.towns { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 30px; }
.town { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px 0 14px; font-weight: 700; color: var(--navy); background: var(--mist); }
.town::before { content: ''; width: 8px; height: 8px; background: var(--g-water); }
a.town:hover { background: var(--ice); }
.areas-vis { position: relative; margin-top: 48px; padding-bottom: 70px; }
.map { position: relative; z-index: 0; height: 360px; background: var(--mist); }
/* the map tiles are tinted to the brand with CSS; the tiles themselves are untouched */
.map .leaflet-tile-pane { filter: grayscale(1) sepia(.2) hue-rotate(178deg) saturate(1.5) brightness(1.03) contrast(.92); }
.map .leaflet-control-attribution { font-size: 10px; background: rgba(255, 255, 255, .85); }
.map .leaflet-bar, .map .leaflet-bar a { border-radius: 0 !important; }
.pin { position: relative; width: 30px; height: 30px; background: var(--navy); box-shadow: 0 10px 20px -8px rgba(7, 26, 51, .8); }
.pin::after { content: ''; position: absolute; inset: 9px; background: var(--sky); }
.pin-sm { width: 20px; height: 20px; }
.pin-sm::after { inset: 6px; }
.pin-label { font: 700 13px/1 var(--f-body); color: #fff !important; background: var(--navy) !important; border: 0 !important; border-radius: 0 !important; padding: 8px 10px !important; box-shadow: var(--shadow-sm) !important; }
.pin-label::before { display: none; }
.van-card { position: absolute; right: var(--gut); bottom: 0; z-index: 2; width: 54%; max-width: 260px; margin: 0; padding: 8px; background: var(--white); box-shadow: var(--shadow-lg); }
.van-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.van-card figcaption { padding: 10px 4px 4px; font-size: 16px; color: var(--navy); }

/* ================= FAQ ================= */
.faq { background: var(--paper); }
.faq-in { display: grid; gap: 34px; }
.faq-hd h2 { font-size: clamp(2.15rem, 8vw, 3.4rem); }
.faq-hd > p:not(.idx) { margin-top: 16px; max-width: 28rem; }
.faq-hd a { color: var(--blue); font-weight: 700; }
.qas { display: grid; gap: 10px; }
.qa { background: var(--white); box-shadow: var(--shadow-sm); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { font-size: 1.25rem; line-height: 1.25; transition: color .25s; }
.qa summary:hover h3 { color: var(--blue); }
/* a plus that turns into a minus */
.pm { position: relative; flex: none; width: 36px; height: 36px; background: var(--mist); transition: background-color .3s; }
.pm::before, .pm::after { content: ''; position: absolute; left: 11px; right: 11px; top: 17px; height: 2px; background: var(--navy); transition: transform .35s var(--ease); }
.pm::after { transform: rotate(90deg); }
.qa[open] .pm { background: var(--blue); }
.qa[open] .pm::before, .qa[open] .pm::after { background: #fff; }
.qa[open] .pm::after { transform: rotate(0); }
.qa p { padding: 0 22px 24px; max-width: 46rem; }

/* ================= Quote ================= */
.art-5 { right: -200px; top: -200px; width: 560px; height: 728px; opacity: .3; }
.quote-in { display: grid; gap: 34px; }
.quote-side h2 { color: #fff; font-size: clamp(2.15rem, 8vw, 3.4rem); }
.quote-side > p:not(.idx):not(.quote-facts) { margin-top: 16px; max-width: 30rem; }
.quote-side > p:not(.idx):not(.quote-facts) + p:not(.quote-facts) { margin-top: 12px; }
.contact-list { display: grid; gap: 10px; margin-top: 28px; }
.c-row { display: block; padding: 16px 18px; background: rgba(7, 26, 51, .7); transition: background-color .3s; }
.c-row small { display: block; font-size: 16px; color: var(--sky-300); }
.c-row b { display: block; margin-top: 4px; color: #fff; font: 400 24px/1.15 var(--f-head); overflow-wrap: anywhere; }
.c-row:hover { background: rgba(19, 58, 107, .8); }
.quote-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 26px; font: 400 16px/1.2 var(--f-sc); text-transform: lowercase; letter-spacing: .06em; color: rgba(255, 255, 255, .78); }
.quote-facts span { display: inline-flex; align-items: center; gap: 10px; }
.quote-facts span::before { content: ''; width: 7px; height: 7px; background: var(--sky); }

.qf { position: relative; padding: 26px 20px 28px; background: var(--white); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .7); color: var(--text); }
.mode { display: grid; grid-template-columns: 1fr 1fr; margin: -26px -20px 26px; }
.mode-opt { position: relative; cursor: pointer; }
.mode-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mode-opt span {
  display: grid; place-items: center; min-height: 62px; font: 400 19px/1 var(--f-sc); letter-spacing: .05em; color: var(--muted);
  background: var(--paper); transition: color .25s, background-color .25s;
}
.mode-opt input:checked + span { color: #fff; background: var(--g-water); box-shadow: none; }
.mode-opt input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: -3px; }
.qf-grid { display: grid; gap: 20px; }
.qf-grid[hidden] { display: none; }
.fld { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.fld label, .fld legend { font-weight: 700; font-size: 14.5px; color: var(--ink); padding: 0; }
.fld legend { margin-bottom: 10px; }
.fld-msg { margin-top: 20px; }
.opt-l { font-weight: 500; color: var(--muted); }
.fld input, .fld textarea {
  width: 100%; min-height: 54px; padding: 14px 16px; border: 0; background: #ebf1f7; font-size: 16px; color: var(--ink);
  transition: box-shadow .25s, background-color .25s;
}
.fld textarea { resize: vertical; min-height: 96px; }
.fld input::placeholder, .fld textarea::placeholder { color: #8796a9; }
.fld input:focus, .fld textarea:focus { outline: none; background: var(--mist); box-shadow: 0 0 0 3px rgba(58, 160, 232, .35); }
.fld.bad input { background: #fde8e8; }
.err { color: #b42f2f; font-size: 13.5px; font-weight: 600; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tile, .chk { position: relative; cursor: pointer; }
.tile input, .chk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tile span {
  display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 10px 8px;
  font-weight: 700; font-size: 14px; line-height: 1.25; color: var(--navy); text-align: center; background: var(--paper); transition: background-color .25s, color .25s, box-shadow .25s;
}
.tile:hover span { background: var(--mist); }
.tile input:checked + span { color: #fff; background: var(--g-water); }
.checks { display: grid; gap: 8px; }
.chk span { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; font-weight: 600; color: var(--navy); background: var(--paper); transition: background-color .25s; }
.chk i { display: grid; place-items: center; width: 24px; height: 24px; background: #fff; box-shadow: inset 0 0 0 2px #b9cbdc; flex: none; transition: background-color .2s, box-shadow .2s; }
.chk i svg { width: 15px; height: 15px; color: #fff; stroke-width: 3; opacity: 0; }
.chk:hover span, .chk input:checked + span { background: var(--mist); }
.chk input:checked + span i { background: var(--blue); box-shadow: none; }
.chk input:checked + span i svg { opacity: 1; }
.tile input:focus-visible + span, .chk input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; }
.qf-send { display: grid; gap: 10px; margin-top: 26px; }
.qf-send .btn { width: 100%; }
.qf-note { margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.qf-desk { margin-top: 20px; padding: 18px; background: var(--mist); box-shadow: inset 4px 0 0 var(--blue); }
.qf-desk p { color: var(--navy); }
.qf-desk pre { margin: 12px 0 14px; padding: 14px; background: #fff; white-space: pre-wrap; font: 500 14px/1.6 var(--f-body); color: var(--ink); }

/* ================= Footer ================= */
.ft { position: relative; overflow: hidden; isolation: isolate; padding: 56px 0 26px; background: linear-gradient(180deg, var(--navy-900), var(--ink-950)); }
.ft a { transition: color .25s; }
.ft a:hover { color: #fff; }
.art-ft { right: -240px; top: -330px; width: 620px; height: 806px; opacity: .2; }
.ft .wrap { z-index: 1; }
.ft-top { display: grid; gap: 28px; padding-bottom: 20px; }
.wordmark { color: #fff; }
.ft-about > p:not(.wordmark) { margin-top: 18px; max-width: 26rem; }
.wordmark span { display: block; font: 400 clamp(30px, 8.5vw, 56px)/1 var(--f-head); letter-spacing: .1em; text-transform: uppercase; }
.wordmark small { display: block; margin-top: 12px; font: 400 16px/1 var(--f-sc); text-transform: lowercase; letter-spacing: .18em; color: var(--sky-300); }
.ft-cta { display: grid; gap: 10px; }
.ft-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; padding: 28px 0; }
.ft-col h2 { font-size: 17px; color: var(--sky-300); margin-bottom: 14px; }
.ft-col li { margin-bottom: 10px; }
/* the towns run in two columns, full width on phones */
.ft-col-areas { grid-column: 1 / -1; }
.ft-areas { columns: 2; column-gap: 20px; }
.ft-areas li { break-inside: avoid; }
.ft-social { display: flex; gap: 8px; margin-top: 14px; }
.ft-social a { display: grid; place-items: center; width: 40px; height: 40px; background: rgba(255, 255, 255, .08); }
.ft-social a[hidden] { display: none; }
.ft-social svg { width: 18px; height: 18px; }
.ft-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 10px; font-size: 14px; color: rgba(255, 255, 255, .55); }
.ft-base p:last-child { display: flex; gap: 22px; }

/* ================= Inner pages (privacy, 404, later town, sector and service pages) ================= */
.page-hd { position: relative; overflow: hidden; isolation: isolate; padding: 72px 0 52px; color: rgba(255, 255, 255, .84); background: var(--g-deep); }
.page-hd::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: .07; mix-blend-mode: overlay; }
.page-hd .eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font: 400 17px/1 var(--f-sc); text-transform: lowercase; letter-spacing: .07em; color: var(--sky-300); }
.page-hd h1 { color: #fff; font-size: clamp(2.4rem, 7vw, 4rem); max-width: 18ch; }
.page-hd p:not(.eyebrow) { margin-top: 16px; max-width: 38rem; font-size: 1.06rem; }
.page-hd .hero-btns { margin-top: 28px; }
.page-404 { min-height: 64vh; display: flex; align-items: center; }
.prose-sec { padding-top: 56px; }
.prose { max-width: calc(46rem + var(--gut) * 2); }
.prose h2 { font-size: 1.8rem; margin: 36px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose p + p { margin-top: 12px; }
.prose ul { margin-top: 12px; display: grid; gap: 8px; }
.prose li { position: relative; padding-left: 22px; }
.prose li::before { content: ''; position: absolute; left: 2px; top: .6em; width: 8px; height: 8px; background: var(--g-water); }
.prose a { color: var(--blue); font-weight: 700; }
.prose a:hover { color: var(--navy); }

/* ================= Phone bar: call, WhatsApp, quote ================= */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex;
  padding-bottom: env(safe-area-inset-bottom); background: var(--navy);
  box-shadow: 0 -12px 30px -16px rgba(4, 16, 31, .6);
  transform: translateY(100%); transition: transform .5s var(--ease);
}
.dock.on { transform: none; }
.dock a { flex: 1; display: grid; place-items: center; min-height: 60px; font: 400 18px/1 var(--f-sc); letter-spacing: .04em; color: #fff; }
.dock-call { background: var(--g-water); }
.dock-wa { background: linear-gradient(135deg, #25c464, #128a45); }
.dock-quote { background: var(--navy); }

/* ================= Photo viewer ================= */
.lb { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; }
.lb::backdrop { background: rgba(4, 16, 31, .94); }
.lb[open] { display: grid; place-items: center; animation: fade .35s var(--ease); }
.lb-fig { margin: 0; display: grid; justify-items: center; padding: 64px 16px 90px; max-width: 100%; }
.lb-fig img { max-width: min(100%, 1400px); max-height: calc(100dvh - 190px); width: auto; height: auto; border: 8px solid #fff; }
.lb-fig figcaption { padding: 12px 18px; color: #fff; background: var(--g-water); font: 400 17px/1.2 var(--f-sc); text-transform: lowercase; letter-spacing: .05em; }
.lb-btn { position: fixed; display: grid; place-items: center; width: 52px; height: 52px; border: 0; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .12); }
.lb-btn:hover { background: var(--blue); }
.lb-btn svg { width: 22px; height: 22px; }
.lb-x { top: 14px; right: 14px; }
.lb-prev, .lb-next { bottom: 20px; }
.lb-prev { left: calc(50% - 56px); }
.lb-next { left: calc(50% + 4px); }

/* ================= Reveal on scroll ================= */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }

@keyframes settle { from { transform: scale(1.07); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ================= Wider screens ================= */
@media (min-width: 560px) {
  .hero-btns, .ft-cta { display: flex; flex-wrap: wrap; }
  .hero-btns .btn { width: auto; }
  .hero-btns.hero-btns-3 { grid-template-columns: max-content max-content; }
  .hero-btns-3 .btn { width: 100%; }
  .hero-btns-3 .b-call { grid-column: 2; grid-row: 1; }
  .hero-btns-3 .b-res { grid-column: 1; grid-row: 2; }
  .qf-grid { grid-template-columns: 1fr 1fr; }
  .fld-wide { grid-column: 1 / -1; }
  .tiles-3 { grid-template-columns: repeat(3, 1fr); }
  .tiles-4 { grid-template-columns: repeat(4, 1fr); }
  .qf-send { display: flex; flex-wrap: wrap; }
  .qf-send .btn { width: auto; flex: 1 1 auto; }
  .gal { grid-auto-rows: 200px; }
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .svc-cta { display: flex; flex-wrap: wrap; }
  .svc-cta .btn { width: auto; }
}

@media (min-width: 700px) {
  :root { --gut: 32px; }
  .hd-top { display: block; }
  .hero-media img { object-position: 80% 50%; }
  .rev-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step { padding: 34px 32px 36px; }
  .ba-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .counts { padding: 52px 0 44px; }
  .counts-in { grid-template-columns: repeat(4, 1fr); }
  .ft-cols { grid-template-columns: repeat(4, 1fr); }
  .ft-col-areas { grid-column: auto; }
  .ft-top { grid-template-columns: 1fr auto; align-items: end; }
  .ft-cta { display: flex; }
  .map { height: 440px; }
  .van-card { width: 260px; }
  .qf { padding: 34px 32px 34px; }
  .mode { margin: -34px -32px 30px; }
}

@media (min-width: 1040px) {
  :root { --hd-h: 84px; }
  body { font-size: 17px; padding-bottom: 0; }
  .brand-logo { height: 66px; }
  .nav { display: flex; gap: 2px; margin-left: -13px; margin-right: auto; }
  .brand { margin-left: 22px; }
  .nav a { position: relative; padding: 12px 13px; font: 400 18px/1 var(--f-sc); text-transform: lowercase; letter-spacing: .05em; color: var(--navy); white-space: nowrap; transition: color .25s; }
  .nav a:hover { color: var(--blue); }
  .nav a.on { color: var(--blue); }
  .hd-quote { display: inline-flex; }
  .sq-call, .menu-btn { display: none; }

  .hero { display: flex; min-height: min(calc(100svh - var(--hd-h) - 40px), 920px); }
  /* computers: the words on deep water to the left, the photo on the right, blended in */
  .hero { background: #071a33; }
  .hero-media, .hero::before, .drops { top: 0; left: 38%; right: auto; width: 62%; height: 100%; }
  .hero::before {
    background:
      linear-gradient(90deg, #071a33 0%, rgba(7, 26, 51, .85) 22%, rgba(7, 26, 51, .35) 36%, rgba(7, 26, 51, 0) 50%),
      linear-gradient(180deg, rgba(7, 26, 51, .25) 0%, rgba(7, 26, 51, 0) 26%, rgba(7, 26, 51, 0) 70%, rgba(7, 26, 51, .55) 100%),
      radial-gradient(60% 60% at 100% 0%, rgba(58, 160, 232, .22), rgba(58, 160, 232, 0) 70%);
  }
  .hero-media img { object-position: 72% 50%; }
  .hero-in { display: flex; align-items: center; padding-top: 96px; padding-bottom: 72px; }
  .hero-copy { max-width: 660px; }
  .hero h1 { font-size: clamp(2.6rem, 3.5vw, 3.7rem); max-width: 19ch; }
  .lede { font-size: 1.16rem; }

  .sec { padding: 88px 0; }
  .sh { display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: end; margin-bottom: 44px; }
  .sh h2 { max-width: 16ch; }
  .sh > p { margin-top: 0; padding-bottom: 6px; }

  .about-in { grid-template-columns: 7fr 5fr; gap: 72px; align-items: center; }
  .whyc-in { grid-template-columns: 5fr 7fr; gap: 72px; align-items: center; }
  .about-photo, .whyc-photo { aspect-ratio: 4 / 5; }
  .svc-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .faq-in { grid-template-columns: 4fr 7fr; gap: 72px; align-items: start; }
  .faq-hd { position: sticky; top: calc(var(--hd-h) + 40px); }
  .qa summary { padding: 26px 30px; }
  .qa p { padding: 0 30px 28px; }

  .sect-grid { grid-template-columns: 6fr 6fr; gap: 56px; align-items: center; }
  .sect-photo { width: 100%; max-width: 600px; }
  .sect { grid-template-columns: 52px 1fr auto; align-items: baseline; padding: 26px 28px; }
  .sect::before { grid-row: 1 / span 2; }
  .sect-go { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; }
  .sect p { grid-column: 2 / span 2; }

  .gal { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; gap: 10px; padding: 10px; }
  .ba-grid { gap: 52px 40px; }

  .areas.sec { padding: 0; }
  .areas-in { display: grid; grid-template-columns: 1fr 1fr; min-height: 640px; }
  .areas-copy { align-self: center; padding: 88px 72px 88px max(var(--gut), calc((100vw - var(--wrap)) / 2)); }
  .areas-vis { margin: 0; padding: 0; }
  .map { height: 100%; min-height: 640px; }
  .van-card { left: -72px; right: auto; bottom: 56px; width: 280px; }

  .quote-in { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
  .quote-side { position: sticky; top: calc(var(--hd-h) + 40px); }
  .qf { padding: 44px 48px 46px; }
  .mode { margin: -44px -48px 34px; }
  .rev-grid { grid-template-columns: repeat(3, 1fr); }
  .dock { display: none; }
}

@media (min-width: 1500px) {
  :root { --wrap: 1280px; }
}

/* ================= Motion and personality ================= */
/* headlines rise into place word by word */
/* the padding keeps descenders (g, p, y) inside the box, so gradient words aren't clipped */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .2em; margin: 0 -.04em -.2em; }
.wi { display: inline-block; padding-bottom: .2em; margin-bottom: -.2em; transition: transform 1.1s var(--ease); transition-delay: calc(var(--wd, 0) * 60ms + var(--hd, 0s)); }
.js .split .wi { transform: translateY(110%); }
.js .split.in .wi, .js .rv.in .split .wi { transform: none; }
.hero-copy > h1 { animation: none; }
/* a slow shimmer across the area, like light moving on glass */
.hero h1 .grad { background-image: linear-gradient(100deg, #e4f4ff 0%, #8fd0fb 22%, #3aa0e8 45%, #8fd0fb 70%, #e4f4ff 100%); background-size: 220% 100%; animation: shimmer 7s ease-in-out infinite alternate; }

/* the band of who A.W. Windows cleans for */
.ticker { position: relative; overflow: hidden; background: var(--navy-900); }
.ticker::before, .ticker::after { content: ''; position: absolute; top: 0; bottom: 0; z-index: 1; width: 90px; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, var(--navy-900), rgba(7, 26, 51, 0)); }
.ticker::after { right: 0; background: linear-gradient(270deg, var(--navy-900), rgba(7, 26, 51, 0)); }
.ticker-track { display: flex; width: max-content; animation: tick 38s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker span { display: inline-flex; align-items: center; gap: 30px; padding: 24px 0 24px 30px; font: 400 clamp(21px, 3vw, 30px)/1 var(--f-head); color: #fff; white-space: nowrap; }
.ticker span:nth-child(even) { color: var(--sky-300); }
.ticker span::after { content: ''; width: 9px; height: 9px; background: var(--g-water); }

/* photos start misted and clear as they come into view, then a glint of light passes over */
.js .mist img { filter: blur(12px) saturate(.55) brightness(1.12); scale: 1.07; transition: filter 1.6s var(--ease), scale 1.9s var(--ease); }
.js .mist.clear img { filter: none; scale: 1; }
.sheen { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(112deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, .4) 48%, rgba(255, 255, 255, 0) 64%); transform: translateX(-130%); }
.mist.clear .sheen { transform: translateX(130%); transition: transform 1.6s .5s var(--ease); }
.van-card { overflow: hidden; }


/* the large drops drift slowly, and the drop photo floats */
.art { animation: drift 13s ease-in-out infinite alternate; }
.sect-photo { animation: float 7s ease-in-out infinite alternate; }

/* a water ripple where a button is pressed */
.dock a, .sq { position: relative; overflow: hidden; isolation: isolate; }
.ripple { position: absolute; z-index: -1; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: rgba(255, 255, 255, .45); pointer-events: none; animation: ripple .8s var(--ease) forwards; }

/* a soft light follows the cursor across cards */
.glow { background-image: radial-gradient(260px circle at var(--mx, -500px) var(--my, -500px), var(--glow-c, rgba(58, 160, 232, .12)), rgba(58, 160, 232, 0) 72%); }
.sect.glow, .c-row.glow { --glow-c: rgba(143, 208, 251, .17); }

@keyframes shimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes tick { to { transform: translateX(-50%); } }
@keyframes drift { from { translate: 0 0; rotate: 0deg; } to { translate: 0 -30px; rotate: 1.5deg; } }
@keyframes float { from { translate: 0 0; } to { translate: 0 -12px; } }
@keyframes ripple { to { transform: scale(30); opacity: 0; } }

/* ================= Less motion ================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { opacity: 1; transform: none; }
  .js .split .wi, .js .mist img { transform: none; filter: none; scale: 1; }
  .sheen, .ripple { display: none; }
  .slider.hint { animation: none; }
}

/* ================= Print ================= */
@media print {
  .hd, .hd-top, .dock, .lb, .hero-media, .map, .qf-send, .art { display: none !important; }
  .hero, .sectors, .ba, .quote, .ft, .svc-plain { background: none; color: var(--ink); }
  .hero h1, .sh-light h2, .quote-side h2 { color: var(--ink); }
}