/* ============================================================
   Vision Cleaning Services  ·  Telford
   Palette sampled from their own logo, van livery, flyer and
   business card. Nothing invented.
   Mobile first. Every min-width query is an enhancement.
   ============================================================ */

:root{
  /* their assets */
  --cyan:#01B6E3;      /* mascot gloves + the "Vision" wordmark */
  --cyan-d:#0090CF;    /* mid blue from the mark */
  --brand:#005F95;     /* their exact deep wordmark blue */
  --sky:#C5DFF8;       /* their flyer background */
  --kraft:#B6977B;     /* their business card stock */
  --kraft-lt:#EFE6DA;
  --kraft-md:#E0CFB9;

  /* derived, kept in hex (never oklch: it blanks pre-Chrome-111) */
  --ink:#072235;
  --ink-2:#0E3A55;
  --navy:#0B3C63;
  --mist:#EAF3FB;
  --paper:#FFFFFF;
  --line:#D7E5F1;
  --muted:#42627C;

  --shadow-s:0 1px 2px rgba(7,34,53,.08), 0 2px 6px rgba(7,34,53,.06);
  --shadow-m:0 2px 6px rgba(7,34,53,.07), 0 12px 28px rgba(7,34,53,.10);
  --shadow-l:0 4px 12px rgba(7,34,53,.08), 0 24px 60px rgba(7,34,53,.14);

  --r-s:10px; --r-m:16px; --r-l:22px; --r-xl:30px;

  --pad:20px;
  --bar:66px;              /* mobile action bar height */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.7,0,.3,1);

  --ff-d:"Familjen Grotesk", ui-sans-serif, system-ui, sans-serif;
  --ff-b:"Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--ff-b);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom,0px));
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--ff-d);font-weight:700;line-height:1.08;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2.15rem,9vw,3.1rem)}
h2{font-size:clamp(1.75rem,6.6vw,2.5rem)}
h3{font-size:1.24rem;letter-spacing:-.01em}
p{margin:0 0 1.05em}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--pad)}
.narrow{max-width:760px}
.sec{padding-block:clamp(52px,11vw,104px)}
.sec-tight{padding-block:clamp(36px,8vw,68px)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- kicker: a plain small label. No tracked caps, no dash rule ---------- */
.kick{
  font-family:var(--ff-d);font-weight:600;font-size:.94rem;
  color:var(--brand);margin:0 0 .55rem;letter-spacing:0;
}
.kick.on-dark{color:var(--cyan)}

/* ============================ HEADER ============================ */
.hdr{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.hdr-in{display:flex;align-items:center;gap:12px;height:62px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;margin-right:auto;min-width:0;min-height:44px}
.brand img{width:32px;height:32px;object-fit:contain;flex:none}
.brand .wm{display:block;line-height:1}
.brand .v{font-family:var(--ff-d);font-weight:700;font-size:1.38rem;color:var(--cyan);letter-spacing:-.02em}
.brand .c{font-family:var(--ff-d);font-weight:600;font-size:.62rem;color:var(--navy);letter-spacing:.24em;display:block;margin-top:2px}

.navbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:42px;padding:0 14px;border:1px solid var(--line);background:#fff;
  border-radius:999px;font:600 .93rem/1 var(--ff-b);color:var(--ink);cursor:pointer;
}
.navbtn .bars{display:block;width:16px;height:11px;position:relative}
.navbtn .bars i{position:absolute;left:0;right:0;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.navbtn .bars i:nth-child(1){top:0}
.navbtn .bars i:nth-child(2){top:4.5px}
.navbtn .bars i:nth-child(3){top:9px}
.navbtn[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.navbtn[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.navbtn[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}

.hdr-call{
  display:none;align-items:center;gap:7px;height:42px;padding:0 15px;
  background:var(--brand);color:#fff;border-radius:999px;
  font:600 .93rem/1 var(--ff-b);text-decoration:none;white-space:nowrap;
}
.hdr-call svg{width:15px;height:15px;fill:currentColor}

/* drawer */
.nav{
  position:fixed;inset:62px 0 auto;z-index:59;
  background:#fff;border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-l);
  transform:translateY(calc(-100% - 64px));transition:transform .42s var(--ease-io);
  max-height:calc(100dvh - 62px);overflow-y:auto;
}
.nav.open{transform:translateY(0)}
.nav ul{list-style:none;margin:0;padding:10px var(--pad) 22px}
.nav li+li{border-top:1px solid var(--mist)}
.nav a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 2px;font:600 1.06rem/1.2 var(--ff-d);color:var(--ink);text-decoration:none;
}
.nav a .sub{font:400 .82rem/1.2 var(--ff-b);color:var(--muted);margin-top:3px;display:block}
.nav a span:first-child{min-width:0}
.nav a[aria-current="page"]{color:var(--brand)}
.nav .arw{width:8px;height:8px;border-right:2px solid var(--cyan);border-top:2px solid var(--cyan);transform:rotate(45deg);flex:none}
.nav .navcta{
  display:block;margin:16px var(--pad) 0;padding:15px;text-align:center;
  background:var(--ink);color:#fff;border-radius:var(--r-m);
  font:700 1rem/1 var(--ff-d);text-decoration:none;
}
.scrim{position:fixed;inset:0;z-index:58;background:rgba(7,34,53,.42);opacity:0;pointer-events:none;transition:opacity .35s}
.scrim.on{opacity:1;pointer-events:auto}

/* ==================== MOBILE ACTION BAR ==================== */
.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;
  background:var(--line);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);
  box-shadow:0 -6px 24px rgba(7,34,53,.10);
}
.actionbar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  height:var(--bar);background:#fff;color:var(--ink);text-decoration:none;
  font:600 .76rem/1 var(--ff-b);
}
.actionbar a svg{width:19px;height:19px;fill:var(--brand)}
.actionbar a.acc{background:var(--ink);color:#fff}
.actionbar a.acc svg{fill:var(--cyan)}
.actionbar a.wa svg{fill:#22a34a}

/* ============================ BUTTONS ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:0 26px;border:0;border-radius:999px;
  font:700 1.02rem/1 var(--ff-d);letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s;
}
.btn:active{transform:translateY(1px)}
.btn-p{background:var(--brand);color:#fff;box-shadow:0 6px 18px rgba(0,95,149,.28)}
.btn-p:hover{background:#00507e}
.btn-a{background:var(--cyan);color:#04283f;box-shadow:0 6px 18px rgba(1,182,227,.32)}
.btn-a:hover{background:#00a6d1}
.btn-g{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-g:hover{border-color:var(--brand);color:var(--brand)}
.btn-w{background:#fff;color:var(--ink);box-shadow:var(--shadow-m)}
.btn svg{width:17px;height:17px;fill:currentColor;flex:none}
.btn-row{display:flex;flex-direction:column;gap:11px}
@media(min-width:520px){.btn-row{flex-direction:row;flex-wrap:wrap}}

/* ============================ HERO ============================ */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero-glass{
  position:relative;
  aspect-ratio:4/5;
  width:100%;
  background:linear-gradient(178deg,#cfe2f2 0%,#a9c7de 46%,#8fb3cd 100%);
  overflow:hidden;
  touch-action:pan-y;
}
/* The view behind the glass.
   Deliberately a DESIGNED daylight panel, not a fake photo: the wipe has to
   reveal light or the whole moment falls flat, and a grey placeholder under
   the grime revealed nothing. When Darren sends a real window view it drops
   in on top of this and this stays as the fallback. */
.hero-view{
  position:absolute;inset:0;z-index:1;
  background:
    /* soft sun bloom, upper left */
    radial-gradient(46% 34% at 22% 16%, rgba(255,252,238,.95), rgba(255,250,232,0) 70%),
    /* rooftops suggested at the horizon, abstract on purpose */
    linear-gradient(to top, rgba(11,60,99,.30) 0 6%, rgba(11,60,99,.10) 6% 11%, transparent 11%),
    /* the sky */
    linear-gradient(178deg,#EAF6FE 0%,#C5DFF8 40%,#9CC6EA 74%,#BBD7EC 100%);
}
.hero-view::after{ /* window frame mullions, very faint */
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,transparent calc(50% - 1.5px),rgba(255,255,255,.62) calc(50% - 1.5px) calc(50% + 1.5px),transparent calc(50% + 1.5px)),
    linear-gradient(0deg,transparent calc(58% - 1.5px),rgba(255,255,255,.5) calc(58% - 1.5px) calc(58% + 1.5px),transparent calc(58% + 1.5px));
}
/* the shot brief sits ABOVE the grime so Kort can always read what to go and take */
.hero-ph{position:absolute;inset:auto 0 0;z-index:6;pointer-events:none}
.hero-ph .ph-i{position:absolute;top:auto;bottom:calc(100% - 2px);left:12px}
.hero-ph p{
  margin:0;padding:14px 16px 16px;
  background:linear-gradient(to top,rgba(7,34,53,.90),rgba(7,34,53,.66) 66%,rgba(7,34,53,0));
  color:#CFE4F1;font-size:.82rem;line-height:1.4;
}
.hero-ph p b{display:block;font-family:var(--ff-d);font-size:.9rem;color:#fff;margin-bottom:2px}
.grime,.beads{position:absolute;inset:0;width:100%;height:100%;display:block}
.grime{z-index:3;cursor:grab}
.grime:active{cursor:grabbing}
.beads{z-index:4;pointer-events:none}

.hero-hint{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:6;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;border-radius:999px;
  background:rgba(7,34,53,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#fff;font:600 .82rem/1 var(--ff-b);white-space:nowrap;
  transition:opacity .5s;
}
.hero-hint.gone{opacity:0}
.hero-hint{pointer-events:none;box-shadow:0 6px 20px rgba(7,34,53,.34)}
.hero-hint svg{width:16px;height:16px;fill:var(--cyan)}

.hero-body{position:relative;z-index:5;padding:26px var(--pad) 34px;background:var(--ink)}
.hero-body h1{color:#fff;margin-bottom:.42em}
.hero-body h1 em{font-style:normal;color:var(--cyan)}
.hero-lede{color:#BFD6E6;font-size:1.06rem;margin-bottom:1.35em;max-width:38ch}

.trust{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:rgba(255,255,255,.13);border-radius:var(--r-m);overflow:hidden;margin-top:26px;
}
.trust div{background:var(--ink);padding:14px 13px}
.trust b{display:block;font-family:var(--ff-d);font-size:1.16rem;color:var(--cyan);line-height:1.1}
.trust span{font-size:.81rem;color:#A9C4D6;line-height:1.3;display:block;margin-top:2px}

/* ============================ PLACEHOLDERS ============================ */
/* Deliberate, designed, and each one names the exact shot to go and take. */
.ph{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  background:
    linear-gradient(135deg,rgba(1,182,227,.09),rgba(0,95,149,.05)),
    repeating-linear-gradient(90deg,rgba(0,95,149,.05) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(0deg,rgba(0,95,149,.05) 0 1px,transparent 1px 26px),
    var(--mist);
  border:1.5px dashed rgba(0,95,149,.34);
  border-radius:var(--r-m);
  overflow:hidden;
  min-height:150px;
  isolation:isolate;
}
.ph::before{ /* slow glass sheen so it feels alive, not broken */
  content:"";position:absolute;top:0;bottom:0;width:52%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.62),transparent);
  animation:sheen 5.4s var(--ease) infinite;z-index:0;
}
@keyframes sheen{0%{left:-60%}55%,100%{left:110%}}
.ph::after{ /* soft frame glyph so the empty middle reads as a designed slot */
  content:"";position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:58px;height:46px;z-index:1;
  border:2.5px solid rgba(0,95,149,.20);border-radius:8px;
  box-shadow:0 0 0 7px rgba(0,95,149,.05);
}
.on-ink .ph::after{border-color:rgba(1,182,227,.30);box-shadow:0 0 0 7px rgba(1,182,227,.07)}
.ph-1x1::after,.ph-16x9::after,.ph-wide::after{top:42%}
.ph-i{
  position:absolute;top:12px;left:12px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.86);border-radius:999px;padding:5px 10px;
  font:600 .69rem/1 var(--ff-b);color:var(--brand);
}
.ph-i svg{width:12px;height:12px;fill:var(--brand)}
.ph-t{
  position:relative;z-index:2;margin:0;padding:12px 14px 13px;
  background:linear-gradient(to top,rgba(255,255,255,.94),rgba(255,255,255,.72) 70%,transparent);
  font:500 .82rem/1.36 var(--ff-b);color:var(--ink-2);
}
.ph-t b{font-weight:700;color:var(--ink);display:block;font-family:var(--ff-d);font-size:.86rem}
.ph-1x1{aspect-ratio:1/1}
.ph-4x3{aspect-ratio:4/3}
.ph-3x4{aspect-ratio:3/4}
.ph-16x9{aspect-ratio:16/9}
.ph-wide{aspect-ratio:2/1}
/* on dark sections */
.on-ink .ph{
  background:
    linear-gradient(135deg,rgba(1,182,227,.13),rgba(1,182,227,.03)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 26px),
    rgba(255,255,255,.045);
  border-color:rgba(1,182,227,.38);
}
.on-ink .ph::before{background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent)}
.on-ink .ph-i{background:rgba(1,182,227,.18);color:#CFEFFA}
.on-ink .ph-i svg{fill:var(--cyan)}
.on-ink .ph-t{background:linear-gradient(to top,rgba(7,34,53,.94),rgba(7,34,53,.7) 70%,transparent);color:#C6DCEA}
.on-ink .ph-t b{color:#fff}
@media(prefers-reduced-motion:reduce){.ph::before{animation:none;opacity:.35}}

/* ============================ RINSE REVEAL ============================ */
/* liquid-reveal port: an feTurbulence-displaced panel of their own #005F95
   sheets DOWN off the media, the way a water-fed pole rinse runs down glass. */
.rinse{position:relative;overflow:hidden;border-radius:var(--r-m)}
.rinse>.sheet{
  position:absolute;inset:-64px;z-index:5;background:var(--brand);
  filter:url(#vcs-rinse);
  transform:scaleY(1);transform-origin:top;
  transition:transform 1150ms var(--ease-io);
  will-change:transform;pointer-events:none;
}
.rinse.run>.sheet{transform:scaleY(0)}
@media(prefers-reduced-motion:reduce){
  .rinse>.sheet{transition:none;transform:scaleY(0)}
}

/* ============================ SERVICES ============================ */
.svc{display:grid;gap:22px}
.svc-c{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;box-shadow:var(--shadow-s);
  transition:box-shadow .3s var(--ease),transform .3s var(--ease),border-color .3s;
}
.svc-c:hover{box-shadow:var(--shadow-m);border-color:#BBD6EA}
.svc-c .rinse{border-radius:0}
.svc-b{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.svc-b h3{margin-bottom:.42em}
.svc-b p{color:var(--muted);font-size:.96rem;margin-bottom:1em}
.svc-l{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
.svc-l li{position:relative;padding-left:24px;font-size:.94rem;line-height:1.45}
.svc-l li svg{position:absolute;left:0;top:4px;width:15px;height:15px;fill:var(--cyan)}
.svc-more{
  margin-top:auto;display:inline-flex;align-items:center;gap:7px;
  font:700 .97rem/1 var(--ff-d);color:var(--brand);text-decoration:none;
  min-height:44px;padding:2px 0;
}
.svc-more .arw{width:7px;height:7px;border-right:2px solid var(--cyan);border-top:2px solid var(--cyan);transform:rotate(45deg);transition:transform .25s}
.svc-more:hover .arw{transform:rotate(45deg) translate(2px,-2px)}

/* ============================ GUTTER CAM ============================ */
/* Composed fresh. His only real photography is pole-cam shots looking down a
   gutter run, so the section IS a gutter and scrolling travels along it. */
/* NO overflow here: it would make this the scrollport for .cam-stage and
   silently break its position:sticky, which renders the section empty. */
.cam{background:var(--ink);color:#fff;position:relative}
.cam-h::before{ /* faint sky glow behind the opening line of the run */
  content:"";position:absolute;left:50%;top:-40px;width:min(520px,100%);height:300px;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(1,182,227,.20),transparent);
  pointer-events:none;z-index:-1;
}
.cam-h{position:relative;z-index:2;padding:clamp(48px,10vw,84px) var(--pad) 0;max-width:640px;margin-inline:auto;isolation:isolate}
.cam-h h2{color:#fff}
.cam-h p{color:#B7D2E4}
.cam-track{position:relative;z-index:2;height:420vh}
.cam-stage{
  position:sticky;top:0;height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:74px var(--pad) 34px;
}
/* the gutter: two UPVC walls with the channel between them */
.cam-gut{
  position:relative;width:min(100%,330px);aspect-ratio:3/4;max-height:58dvh;
  border-radius:8px 8px 14px 14px;overflow:hidden;
  background:#0A2E45;
  box-shadow:inset 7px 0 12px -6px rgba(0,0,0,.7), inset -7px 0 12px -6px rgba(0,0,0,.7), var(--shadow-l);
}
.cam-gut::before,.cam-gut::after{ /* the gutter lips */
  content:"";position:absolute;top:0;bottom:0;width:11px;z-index:6;pointer-events:none;
}
.cam-gut::before{left:0;width:14px;background:linear-gradient(90deg,#F4F8FB,#DCE6ED 34%,#9DB2C1 72%,rgba(120,145,163,0))}
.cam-gut::after{right:0;width:14px;background:linear-gradient(270deg,#F4F8FB,#DCE6ED 34%,#9DB2C1 72%,rgba(120,145,163,0))}
.cam-slide{
  position:absolute;inset:0;opacity:0;
  transform:translateY(14%) scale(1.04);
  transition:opacity .5s var(--ease),transform .7s var(--ease);
}
.cam-slide.on{opacity:1;transform:translateY(0) scale(1)}
.cam-slide img{width:100%;height:100%;object-fit:cover}
.cam-vig{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:radial-gradient(120% 74% at 50% 42%,transparent 40%,rgba(4,20,32,.5) 100%)}
.cam-tag{
  position:absolute;left:12px;top:12px;z-index:7;
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(4,20,32,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-radius:999px;padding:5px 11px 5px 9px;
  font:600 .7rem/1 var(--ff-b);color:#DCEEF8;
}
.cam-dot{width:7px;height:7px;border-radius:50%;background:#FF5A5A;animation:rec 1.6s ease-in-out infinite}
@keyframes rec{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.cam-dot{animation:none}}

.cam-cap{
  margin-top:18px;width:min(100%,420px);min-height:82px;text-align:center;
}
.cam-cap p{margin:0;font-size:.97rem;color:#C6DCEA;line-height:1.5;transition:opacity .35s}
.cam-cap b{display:block;font-family:var(--ff-d);font-size:1.1rem;color:#fff;margin-bottom:4px;letter-spacing:-.01em}
.cam-rail{
  width:min(100%,330px);height:4px;margin-top:16px;flex:none;
  background:rgba(255,255,255,.14);border-radius:3px;overflow:hidden;
}
.cam-rail i{display:block;width:0;height:100%;background:var(--cyan);border-radius:3px;box-shadow:0 0 10px rgba(1,182,227,.7)}
.cam-note{
  position:relative;z-index:2;max-width:640px;margin:0 auto;
  padding:0 var(--pad) clamp(48px,10vw,84px);
}
.cam-note .box{
  background:rgba(1,182,227,.09);border:1px solid rgba(1,182,227,.28);
  border-radius:var(--r-m);padding:18px 19px;
}
.cam-note p{margin:0;color:#CFE4F1;font-size:.98rem}
.cam-note b{color:#fff}

/* ============================ PROOF / REVIEW ============================ */
.quote-card{
  background:var(--kraft-lt);
  border:1px solid var(--kraft-md);
  border-radius:var(--r-l);
  padding:26px 22px;
  box-shadow:var(--shadow-s);
  position:relative;
}
.quote-card q{
  display:block;font-family:var(--ff-d);font-size:clamp(1.24rem,4.6vw,1.6rem);
  line-height:1.34;letter-spacing:-.015em;color:var(--ink);quotes:none;
}
.quote-card q::before{content:"\201C"}
.quote-card q::after{content:"\201D"}
.quote-card .by{margin:14px 0 0;font-size:.88rem;color:#6B5844;font-weight:600}
.quote-card .by span{font-weight:400;color:#87745F}
.stars{display:flex;gap:3px;margin-bottom:12px}
.stars svg{width:16px;height:16px;fill:#E8A33D}

/* ============================ GENERIC BLOCKS ============================ */
.lead{font-size:1.1rem;color:var(--muted)}
.sec-h{max-width:620px;margin-bottom:clamp(26px,5vw,42px)}
.sec-h p{color:var(--muted);margin-bottom:0}
.band{background:var(--mist)}
.band-k{background:var(--kraft-lt)}
.band-ink{background:var(--ink);color:#fff}
.band-ink h2,.band-ink h3{color:#fff}
.band-ink p{color:#B7D2E4}
.band-ink a:not(.btn){color:var(--cyan)}

.grid-2{display:grid;gap:22px}
.grid-3{display:grid;gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:22px 20px;box-shadow:var(--shadow-s)}
.card h3{margin-bottom:.4em}
.card p:last-child{margin-bottom:0}
.card .num{
  display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:11px;background:var(--sky);color:var(--brand);
  font:700 1.02rem/1 var(--ff-d);margin-bottom:13px;
}
.on-ink .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13)}
.on-ink .card .num{background:rgba(1,182,227,.19);color:var(--cyan)}

.tick{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.tick li{position:relative;padding-left:29px;line-height:1.5}
.tick li svg{position:absolute;left:0;top:3px;width:18px;height:18px;fill:var(--cyan)}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:18px 34px 18px 0;position:relative;
  font:700 1.03rem/1.35 var(--ff-d);color:var(--ink);letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:24px;width:9px;height:9px;
  border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:rotate(45deg);transition:transform .28s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);top:27px}
.faq .a{padding:0 0 20px;color:var(--muted);font-size:.97rem}
.faq .a p:last-child{margin-bottom:0}

/* ============================ QUOTE / ESTIMATE ============================ */
.est{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-l);overflow:hidden;
}
.est-h{background:var(--ink);color:#fff;padding:22px 20px}
.est-h h2{color:#fff;margin-bottom:.28em;font-size:clamp(1.45rem,5.6vw,1.9rem)}
.est-h p{color:#AECBDE;margin:0;font-size:.94rem}
.est-b{padding:22px 20px 24px}
.fld{margin-bottom:22px}
.fld>label,.fld>.lbl{display:block;font:700 .97rem/1.3 var(--ff-d);margin-bottom:10px;color:var(--ink)}
.hint{font:400 .84rem/1.4 var(--ff-b);color:var(--muted);display:block;margin-top:-4px;margin-bottom:10px}
.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.opts.c3{grid-template-columns:repeat(3,1fr)}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.opt span{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:54px;padding:9px 8px;border:1.5px solid var(--line);border-radius:var(--r-s);
  background:#fff;font:600 .93rem/1.22 var(--ff-b);color:var(--ink);
  transition:border-color .2s,background .2s,color .2s;
}
.opt input:checked+span{border-color:var(--brand);background:var(--brand);color:#fff}
.opt input:focus-visible+span{outline:3px solid var(--cyan);outline-offset:2px}
.opt input:disabled+span{opacity:.42}

input[type=text],input[type=tel],input[type=email],textarea,select{
  width:100%;min-height:54px;padding:14px 15px;
  border:1.5px solid var(--line);border-radius:var(--r-s);
  font:400 1rem/1.4 var(--ff-b);color:var(--ink);background:#fff;
}
textarea{min-height:110px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(1,182,227,.28)}

.est-out{
  background:var(--kraft-lt);border:1px solid var(--kraft-md);
  border-radius:var(--r-m);padding:20px 19px;margin-bottom:20px;
}
.est-out .lbl2{font:600 .86rem/1 var(--ff-b);color:#6B5844;margin:0 0 7px}
.est-price{font-family:var(--ff-d);font-weight:700;font-size:clamp(2rem,9vw,2.7rem);line-height:1;color:var(--ink);letter-spacing:-.03em;margin:0}
.est-price small{font-size:.42em;font-weight:600;color:#6B5844;letter-spacing:0}
.est-out .note{margin:11px 0 0;font-size:.85rem;color:#6B5844;line-height:1.45}
.est-empty{color:#6B5844;font-size:.94rem;margin:0}

/* ============================ CONTACT ============================ */
.ct-l{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ct-l a{
  display:flex;align-items:center;gap:14px;padding:16px 17px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-m);
  text-decoration:none;color:var(--ink);box-shadow:var(--shadow-s);
  transition:border-color .2s,transform .2s var(--ease);
}
.ct-l a:hover{border-color:var(--brand);transform:translateY(-1px)}
.ct-ic{
  width:42px;height:42px;border-radius:12px;background:var(--sky);
  display:grid;place-items:center;flex:none;
}
.ct-ic svg{width:19px;height:19px;fill:var(--brand)}
.ct-l .wa .ct-ic{background:#E4F7EA}
.ct-l .wa .ct-ic svg{fill:#1E9E45}
.ct-l a>span:last-child{min-width:0}
.ct-l b{display:block;font-family:var(--ff-d);font-size:1.04rem;letter-spacing:-.01em;overflow-wrap:anywhere}
.ct-l span{display:block;font-size:.87rem;color:var(--muted);margin-top:1px}
.mapwrap{border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line);background:var(--mist)}
.mapwrap iframe{display:block;width:100%;height:280px;border:0}

/* areas */
.area-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.area-l li{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-s);
  padding:12px 13px;font:600 .93rem/1.3 var(--ff-b);color:var(--ink);
}
.area-l li span{display:block;font-weight:400;font-size:.79rem;color:var(--muted);margin-top:2px}

/* ============================ FOOTER ============================ */
.ftr{background:var(--ink);color:#9FBFD4;padding:40px 0 30px;font-size:.93rem}
.ftr .brand .c{color:#88AABF}
.ftr h3{font-family:var(--ff-d);font-size:.98rem;color:#fff;margin:0 0 11px;letter-spacing:0}
.ftr ul{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:2px}
.ftr li{display:flex}
.ftr ul a{display:inline-flex;align-items:center;min-height:34px;padding:4px 0}
.ftr a{color:#9FBFD4;text-decoration:none}
.ftr li{color:#9FBFD4;min-height:34px;align-items:center}
.ftr a:hover{color:var(--cyan)}
.ftr-grid{display:grid;gap:26px}
.ftr-btm p{overflow-wrap:anywhere}
.ftr-btm{
  border-top:1px solid rgba(255,255,255,.12);margin-top:26px;padding-top:20px;
  font-size:.84rem;color:#7E9FB5;line-height:1.6;
}
.ftr-btm a{color:var(--cyan);text-decoration:underline;text-underline-offset:2px}
.ftr-mascot{width:56px;height:56px;object-fit:contain;opacity:.95}

/* ============================ REVEAL ON SCROLL ============================ */
/* opacity + transform only. Never clip-path on the observed element: that
   deadlocks IntersectionObserver and ships a blank page. */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto!important}
}

/* ============================ BREAKPOINTS ============================ */
@media(min-width:600px){
  :root{--pad:28px}
  .trust{grid-template-columns:repeat(4,1fr)}
  .opts.c4{grid-template-columns:repeat(4,1fr)}
  .area-l{grid-template-columns:repeat(3,1fr)}
  .grid-2{grid-template-columns:1fr 1fr}
  .est-b{padding:28px 28px 30px}
  .est-h{padding:26px 28px}
}
@media(min-width:860px){
  .ph-col{max-width:390px;margin-left:auto}
  body{font-size:17.5px;padding-bottom:0}
  :root{--pad:34px}
  .actionbar{display:none}
  .navbtn{display:none}
  .hdr-in{height:74px;gap:26px}
  .hdr-call{display:inline-flex;order:3}
  .brand img{width:38px;height:38px}
  .brand .v{font-size:1.5rem}
  .brand .c{font-size:.66rem}
  .nav{
    position:static;transform:none;background:none;border:0;box-shadow:none;
    max-height:none;overflow:visible;margin-left:auto;
  }
  .nav ul{display:flex;align-items:center;gap:3px;padding:0}
  .nav li+li{border:0}
  .nav a{padding:11px 11px;min-height:40px;font-size:.92rem;border-radius:999px;font-weight:600;white-space:nowrap}
  .nav ul{gap:1px}
  .hdr-in{gap:18px}
  .nav a:hover{background:var(--mist)}
  .nav a[aria-current="page"]{background:var(--sky);color:var(--brand)}
  .nav a .sub,.nav .arw,.nav .navcta{display:none}
  .scrim{display:none}

  .hero{display:grid;grid-template-columns:1.02fr .98fr;align-items:stretch}
  .hero-glass{aspect-ratio:auto;min-height:600px;height:100%;order:2}
  .hero-body{display:flex;flex-direction:column;justify-content:center;padding:60px 44px 60px 0;order:1}
  .hero-in{max-width:520px;margin-left:auto;padding-left:var(--pad)}
  .hero .trust{grid-template-columns:repeat(2,1fr)}
  .hero-hint{top:42%}

  .svc{grid-template-columns:repeat(3,1fr)}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .area-l{grid-template-columns:repeat(4,1fr)}
  .ftr-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}
  .quote-card{padding:34px 32px}

  .cam-stage{flex-direction:row;gap:30px;justify-content:center;align-items:center;padding-top:34px}
  .cam-gut{width:min(400px,32vw);max-height:76dvh;flex:none}
  .cam-cap{margin-top:0;text-align:left;width:min(360px,28vw);min-height:0}
  .cam-cap b{font-size:1.5rem;margin-bottom:10px}
  .cam-cap p{font-size:1.04rem;line-height:1.55}
  .cam-rail{order:-1;width:4px;height:min(66dvh,480px);margin-top:0;align-self:center}
  .cam-rail i{width:100%;height:0}
  .mapwrap iframe{height:400px}
}
@media(min-width:1100px){
  .hero-glass{min-height:670px}
  h1{font-size:3.4rem}
}