@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Barlow:wght@300;400;500;600;700&display=swap');

/* =========================================================================
   JR POWER WASHING — design tokens
   Palette derived from the company logo (deep navy + bright aqua + ice).
   ========================================================================= */
:root{
  /* surfaces */
  --ink:#04101B;
  --surface:#081C2E;
  --surface-2:#0C2740;
  --surface-3:#123E63;
  --surface-raised:#0F3050;

  /* brand */
  --navy:#0F3B6B;
  --navy-deep:#071A2C;
  --aqua:#5BB2D4;
  --aqua-bright:#86D9F5;
  --aqua-dim:#3E90B4;
  --ice:#DCEEF7;

  /* text */
  --text:#EAF4FA;
  --text-soft:#B9D2E1;
  --text-mute:#8FAEC2;

  /* lines + glows */
  --line:rgba(134,217,245,.14);
  --line-strong:rgba(134,217,245,.28);
  --glow:0 0 0 1px rgba(134,217,245,.18), 0 18px 50px -18px rgba(91,178,212,.55);

  /* type */
  --display:'Barlow Condensed',ui-sans-serif,system-ui,sans-serif;
  --body:'Barlow',ui-sans-serif,system-ui,-apple-system,sans-serif;

  /* spacing scale (density 4/10 — marketing, spacious) */
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem;
  --s-5:3rem; --s-6:4rem; --s-7:6rem; --s-8:8rem;

  /* Height of the fixed mobile contact dock: its 52px buttons plus .7rem of
     padding above and below, plus whatever the phone reserves for the home
     indicator. Anything that has to scroll clear of the dock reads this, so
     the two cannot drift apart. */
  --dock-h:calc(52px + 1.4rem + env(safe-area-inset-bottom));

  --radius:14px;
  --radius-lg:22px;
  --shell:min(1240px,92vw);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* =========================================================================
   base
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:.98;letter-spacing:-.01em;margin:0;text-wrap:balance}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--aqua-bright);outline-offset:3px;border-radius:6px}
::selection{background:var(--aqua);color:var(--ink)}

.shell{width:var(--shell);margin-inline:auto}
.section{padding:var(--s-7) 0;position:relative;scroll-margin-top:90px}
.section--tight{padding:var(--s-6) 0}

/* headings scale */
.h-display{font-size:clamp(2.9rem,9vw,7.2rem);text-transform:uppercase;letter-spacing:-.02em}
.h1{font-size:clamp(2.3rem,5.6vw,4.6rem);text-transform:uppercase}
.h2{font-size:clamp(1.5rem,2.6vw,2.2rem);text-transform:uppercase}
.lead{font-size:clamp(1.05rem,1.6vw,1.28rem);color:var(--text-soft);max-width:62ch}
.muted{color:var(--text-mute)}

/* eyebrow */
.eyebrow{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.22em;font-size:.82rem;color:var(--aqua);
  display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1rem;
}
.eyebrow::before{
  content:"";width:26px;height:2px;background:linear-gradient(90deg,transparent,var(--aqua));
}

/* =========================================================================
   buttons
   ========================================================================= */
.btn{
  --btn-bg:transparent;--btn-fg:var(--text);--btn-line:var(--line-strong);
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.6rem;min-height:56px;padding:0 1.7rem;border-radius:999px;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:1.02rem;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1.5px solid var(--btn-line);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease),background .25s,color .25s,border-color .25s;
  will-change:transform;overflow:hidden;isolation:isolate;
}
.btn svg{width:19px;height:19px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}

/* primary = the "Contact" action. Deliberately the loudest thing on screen. */
.btn--primary{
  --btn-fg:#04121D;--btn-line:transparent;
  background:linear-gradient(135deg,var(--aqua-bright),var(--aqua) 55%,var(--aqua-dim));
  box-shadow:0 10px 34px -10px rgba(91,178,212,.85),inset 0 1px 0 rgba(255,255,255,.45);
  font-weight:800;
}
.btn--primary::after{ /* water shine sweep */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 47%,transparent 62%);
  transform:translateX(-120%);
}
.btn--primary:hover::after{transform:translateX(120%);transition:transform .85s var(--ease)}
.btn--primary:hover{box-shadow:0 16px 46px -10px rgba(134,217,245,.95),inset 0 1px 0 rgba(255,255,255,.5)}

.btn--ghost{background:rgba(255,255,255,.04);backdrop-filter:blur(8px)}
.btn--ghost:hover{background:rgba(134,217,245,.12);border-color:var(--aqua)}
.btn--lg{min-height:64px;padding:0 2.2rem;font-size:1.15rem}
@media(min-width:900px){
  .hero__actions .btn--lg{min-height:78px;padding:0 2.9rem;font-size:1.42rem;letter-spacing:.05em}
  .hero__actions .btn--lg svg{width:23px;height:23px}
}
.btn--block{width:100%}

/* =========================================================================
   scroll gauge (pressure gauge that fills as you read)
   ========================================================================= */
.gauge{position:fixed;top:0;left:0;height:3px;width:100%;z-index:120;background:transparent;pointer-events:none}
.gauge__fill{height:100%;width:0;background:linear-gradient(90deg,var(--navy),var(--aqua),var(--aqua-bright));box-shadow:0 0 14px rgba(134,217,245,.9)}

/* =========================================================================
   header
   ========================================================================= */
.header::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,16,27,.82),rgba(4,16,27,.42) 55%,transparent);
  transition:opacity .35s var(--ease);
}
.header.is-stuck::before{opacity:0}
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:1.15rem 0;transition:padding .35s var(--ease),background .35s,border-color .35s,backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.header.is-stuck{
  padding:.55rem 0;background:rgba(4,16,27,.86);backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
}
.header__bar{display:flex;align-items:center;gap:1.1rem;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:.75rem;margin-right:auto;flex:none}
.brand img{height:58px;width:auto;transition:height .35s var(--ease);filter:drop-shadow(0 2px 10px rgba(4,16,27,.9))}
.header.is-stuck .brand img{height:40px}
.brand__txt{display:none;font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.95;letter-spacing:.01em;white-space:nowrap}
.brand__txt b{display:block;font-size:1.15rem}
.brand__txt span{display:block;font-size:.7rem;letter-spacing:.26em;color:var(--aqua);font-weight:600}
@media(min-width:360px){.brand__txt{display:block}}
@media(max-width:559px){
  .brand img{height:44px}
  .brand__txt b{font-size:.98rem}
  .brand__txt span{font-size:.58rem;letter-spacing:.2em}
}

.nav{display:none;gap:.35rem;align-items:center}
@media(min-width:1200px){.nav{display:flex}}
.nav a{
  position:relative;padding:.52rem .6rem;border-radius:999px;white-space:nowrap;
  font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.07em;
  font-size:.88rem;color:var(--text-soft);transition:color .25s,background .25s;
}
/* Laptop widths: the nav is showing but the wordmark no longer fits beside
   it. The emblem carries the brand on its own here; the wordmark returns
   as soon as there is room. */
@media(min-width:1200px) and (max-width:1339px){ .brand__txt{display:none} }
.nav a:hover,.nav a[aria-current="page"]{color:var(--text);background:rgba(134,217,245,.1)}
.nav a::after{
  content:"";position:absolute;left:.6rem;right:.6rem;bottom:.3rem;height:2px;
  background:var(--aqua);transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease-out);
}
.nav a:hover::after{transform:scaleX(1)}

.header__cta{display:none;align-items:center;gap:.7rem}
.header__cta .btn,.header__cta .tel-link{white-space:nowrap}
@media(min-width:760px){.header__cta{display:flex}}
.tel-link{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);
  font-weight:700;font-size:1.08rem;letter-spacing:.04em;color:var(--text);
  padding:.5rem .4rem;transition:color .25s;white-space:nowrap;
}
.tel-link:hover{color:var(--aqua-bright)}
.tel-link svg{width:18px;height:18px;color:var(--aqua)}

/* burger */
.burger{
  /* flex, not grid: as a grid the three bars became three stretched rows and
     drifted ~15px apart regardless of any margin set on them */
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:50px;height:50px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid var(--line-strong);color:var(--text);
}
@media(min-width:1080px){.burger{display:none}}
.burger span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:99;background:rgba(4,16,27,.97);backdrop-filter:blur(20px);
  display:grid;place-content:center;gap:.4rem;text-align:center;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
}
.drawer.is-open{opacity:1;visibility:visible}
.drawer a{
  font-family:var(--display);font-size:clamp(1.9rem,7vw,2.8rem);font-weight:800;
  text-transform:uppercase;padding:.35rem 1rem;opacity:0;transform:translateY(18px);
  transition:opacity .45s var(--ease-out),transform .45s var(--ease-out),color .2s;
}
.drawer.is-open a{opacity:1;transform:none}
.drawer a:hover{color:var(--aqua-bright)}
.drawer__foot{margin-top:2rem;display:grid;gap:.8rem;justify-items:center}

/* =========================================================================
   hero
   ========================================================================= */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;
  padding-top:clamp(5.5rem,14svh,7rem);padding-bottom:clamp(2.2rem,7svh,5.5rem)}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media video,.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
}
.hero__media video{opacity:0;transition:opacity 1.2s ease}
.hero__media video.is-ready{opacity:1}
/* scrim: keeps text at AA contrast over any frame of the footage */
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(4,16,27,.60) 0%,rgba(4,16,27,.12) 26%,rgba(4,16,27,.30) 58%,rgba(4,16,27,.90) 100%),
    linear-gradient(100deg,rgba(4,16,27,.76) 0%,rgba(4,16,27,.38) 40%,rgba(4,16,27,.04) 70%,transparent 100%),
    radial-gradient(110% 80% at 12% 92%,rgba(7,26,44,.78),transparent 60%);
}
.hero__fx{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.hero__inner{position:relative;z-index:3;width:var(--shell);margin-inline:auto;
  text-shadow:0 2px 18px rgba(4,16,27,.72),0 1px 3px rgba(4,16,27,.5)}

.hero__title{margin:0 0 1.1rem;text-shadow:0 3px 26px rgba(4,16,27,.92),0 1px 4px rgba(4,16,27,.85)}
.hero__title .ln{display:block;overflow:hidden}
.hero__title .ln>span{display:block;transform:translateY(105%);transition:transform 1s var(--ease-out)}
.hero.is-in .hero__title .ln>span{transform:none}
.hero__title .ln:nth-child(2)>span{transition-delay:.09s}
.hero__title .ln:nth-child(3)>span{transition-delay:.18s}
.hero__title em{
  /* a solid light tone, not a gradient — the gradient's darker end vanished
     against bright siding once the scrim was thinned out */
  font-style:normal;color:#9FE4FA;
}
.hero__sub{max-width:56ch;font-size:clamp(1.05rem,1.7vw,1.32rem);color:var(--text-soft);
  opacity:0;transform:translateY(16px);transition:opacity .8s .38s var(--ease-out),transform .8s .38s var(--ease-out)}
.hero.is-in .hero__sub{opacity:1;transform:none}
.hero__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(1.2rem,3svh,1.9rem);
  opacity:0;transform:translateY(16px);transition:opacity .8s .5s var(--ease-out),transform .8s .5s var(--ease-out)}
.hero.is-in .hero__actions{opacity:1;transform:none}

.hero__trust{
  display:flex;flex-wrap:wrap;gap:.45rem;margin-top:clamp(1.2rem,3svh,2.2rem);
  opacity:0;transition:opacity .9s .7s ease;
}
.hero.is-in .hero__trust{opacity:1}
.chip{
  display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .95rem;border-radius:999px;
  background:rgba(255,255,255,.055);border:1px solid var(--line);backdrop-filter:blur(10px);
  font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  font-size:.8rem;color:var(--text-soft);
}
.chip svg{width:15px;height:15px;color:var(--aqua);flex:none}
@media(min-width:900px){
  .hero__trust .chip{font-size:.98rem;padding:.72rem 1.25rem;gap:.6rem;letter-spacing:.09em;color:var(--text)}
  .hero__trust .chip svg{width:18px;height:18px}
  .hero__trust{gap:.7rem}
}
@media(max-width:560px){
  .chip{font-size:.68rem;padding:.42rem .7rem;gap:.38rem;letter-spacing:.07em}
  .chip svg{width:13px;height:13px}
  .hero__actions .btn{width:100%}
}

.scroll-cue{
  position:absolute;right:clamp(1rem,4vw,3rem);bottom:1.6rem;z-index:3;
  display:grid;justify-items:center;gap:.5rem;color:var(--text-mute);
  font-family:var(--display);text-transform:uppercase;letter-spacing:.24em;font-size:.68rem;
}
.scroll-cue__rail{width:1px;height:44px;background:linear-gradient(180deg,var(--aqua),transparent);position:relative;overflow:hidden}
.scroll-cue__rail::after{content:"";position:absolute;top:-40%;left:0;width:100%;height:40%;background:var(--aqua-bright);animation:drip 2.1s var(--ease) infinite}
@keyframes drip{0%{top:-40%}70%,100%{top:100%}}
@media(max-width:900px){.scroll-cue{display:none}}

/* =========================================================================
   marquee (never pauses — always in motion)
   ========================================================================= */
.marquee{
  overflow:hidden;border-block:1px solid var(--line);
  background:linear-gradient(90deg,var(--navy-deep),var(--surface) 50%,var(--navy-deep));
  padding:1.05rem 0;
}
.marquee__track{display:flex;width:max-content;animation:slide 38s linear infinite}
.marquee__group{display:flex;align-items:center;gap:2.4rem;padding-right:2.4rem;flex:none}
.marquee span{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.15em;font-size:clamp(1rem,1.9vw,1.5rem);color:var(--text-soft);white-space:nowrap;
}
.marquee span:nth-child(even){color:var(--aqua);}
.marquee .dot{width:7px;height:7px;border-radius:50%;background:var(--aqua-dim);flex:none}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =========================================================================
   stats
   ========================================================================= */
.stats{display:grid;gap:1px;grid-template-columns:repeat(2,1fr);background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
@media(min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--surface);padding:2.1rem 1.4rem;text-align:center;position:relative;transition:background .35s}
.stat:hover{background:var(--surface-2)}
.stat__num{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;
  background:linear-gradient(180deg,var(--ice),var(--aqua));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat__lbl{font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;color:var(--text-mute);margin-top:.55rem}

/* =========================================================================
   section heading block
   ========================================================================= */
.sec-head{max-width:70ch;margin-bottom:var(--s-5)}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head--center .eyebrow{justify-content:center}
.sec-head--center .lead{margin-inline:auto}

/* =========================================================================
   services
   ========================================================================= */
.svc-grid{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media(min-width:680px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.svc-grid{grid-template-columns:repeat(3,1fr)}}
.svc{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;isolation:isolate;
  background:var(--surface);border:1px solid var(--line);
  min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.6rem;transition:transform .5s var(--ease-out),border-color .4s,box-shadow .5s;
}
.svc:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:0 26px 60px -30px rgba(91,178,212,.6)}
.svc__bg{position:absolute;inset:0;z-index:-2}
.svc__bg img{width:100%;height:100%;object-fit:cover;object-position:center 28%;transition:transform 1.1s var(--ease-out),filter .6s;filter:saturate(.85)}
.svc:hover .svc__bg img{transform:scale(1.07);filter:saturate(1.05)}
.svc__veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(4,16,27,.25) 0%,rgba(4,16,27,.62) 48%,rgba(4,16,27,.94) 100%)}
.svc__tag{
  position:absolute;top:1.1rem;left:1.1rem;z-index:1;padding:.34rem .7rem;border-radius:999px;
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.13em;font-size:.68rem;
  border:1px solid;backdrop-filter:blur(8px);
}
.svc__tag--soft{color:var(--aqua-bright);border-color:rgba(134,217,245,.45);background:rgba(134,217,245,.14)}
.svc__tag--pressure{color:#FFD9A8;border-color:rgba(255,190,120,.4);background:rgba(255,180,100,.14)}
.svc h3{font-size:1.72rem;text-transform:uppercase;margin-bottom:.4rem}
.svc p{color:var(--text-soft);font-size:.98rem;margin:0}
.svc__more{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.11em;
  font-size:.83rem;color:var(--aqua);
}
.svc__more svg{width:15px;height:15px;transition:transform .35s var(--ease-out)}
.svc:hover .svc__more svg{transform:translateX(5px)}
.svc__link{position:absolute;inset:0;z-index:2}

/* =========================================================================
   soft wash vs pressure wash — interactive PSI dial
   ========================================================================= */
.psi{display:grid;gap:2.6rem;align-items:center}
/* Nothing in this block is meant to be selected or dragged. Without this, a
   click-drag that starts on the video, the readout or the label begins a native
   text/image drag — the pointer turns into the "no-drop" cursor and the range
   input stops responding until you let go. That was the stuck-slider bug. */
.psi,.psi *{user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.psi img,.psi video,.psi canvas{-webkit-user-drag:none;pointer-events:none}
@media(min-width:980px){.psi{grid-template-columns:1fr 1fr;gap:4rem}}
.psi__stage{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);
  /* The footage is 4:3 and the algae band sits along the top of it. Framing
     the stage wider than the clip and pinning the clip high crops the empty
     window glass off the bottom, so the dirty siding — the thing the section
     is actually about — fills more of the frame. */
  aspect-ratio:16/9;background:var(--surface-2);
}
.psi__stage img,.psi__stage video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 10%;
}
.psi__jet{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.psi__readout{
  position:absolute;left:1rem;bottom:1rem;z-index:3;padding:.85rem 1.15rem;border-radius:14px;
  background:rgba(4,16,27,.78);border:1px solid var(--line-strong);backdrop-filter:blur(12px);
}
.psi__val{font-family:var(--display);font-weight:800;font-size:2.3rem;line-height:1;color:var(--aqua-bright)}
.psi__val small{font-size:.9rem;letter-spacing:.14em;color:var(--text-mute);margin-left:.3rem}
.psi__mode{font-family:var(--display);text-transform:uppercase;letter-spacing:.18em;font-size:.74rem;color:var(--text-soft);margin-top:.25rem}
.psi__caption{
  position:absolute;right:1rem;top:1rem;z-index:3;margin:0;padding:.5rem .85rem;border-radius:999px;
  background:rgba(4,16,27,.74);border:1px solid var(--line);backdrop-filter:blur(10px);
  font-family:var(--display);text-transform:uppercase;letter-spacing:.13em;font-size:.68rem;color:var(--text-soft);
}

.psi__control{margin-top:1.8rem;padding-block:.5rem;touch-action:none}
.psi__control label{display:block;font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;font-size:.8rem;color:var(--text-mute);margin-bottom:.9rem}
input[type=range].slider{
  -webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;
  touch-action:none;                     /* let the thumb win over page scroll */
  background:linear-gradient(90deg,var(--aqua) 0%,var(--aqua) var(--pct,30%),rgba(255,255,255,.1) var(--pct,30%));
  outline:none;cursor:grab;
}
input[type=range].slider:active{cursor:grabbing}
input[type=range].slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,var(--aqua) 60%,var(--aqua-dim));
  border:2px solid rgba(255,255,255,.8);box-shadow:0 0 0 6px rgba(91,178,212,.18),0 6px 18px rgba(0,0,0,.5);
  transition:box-shadow .25s,transform .2s;
}
input[type=range].slider:hover::-webkit-slider-thumb{box-shadow:0 0 0 10px rgba(91,178,212,.22),0 6px 18px rgba(0,0,0,.5)}
input[type=range].slider::-moz-range-thumb{
  width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.8);
  background:radial-gradient(circle at 35% 30%,#fff,var(--aqua) 60%,var(--aqua-dim));
}
.psi__notes{display:grid;gap:.7rem;margin-top:1.7rem}
.psi__note{
  display:flex;gap:.85rem;padding:1rem 1.15rem;border-radius:var(--radius);width:100%;text-align:left;
  border:1px solid var(--line);background:var(--surface);color:inherit;font:inherit;cursor:pointer;
  transition:border-color .35s,background .35s,opacity .35s,transform .3s var(--ease-out);
}
.psi__note:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.psi__note:focus-visible{outline:3px solid var(--aqua-bright);outline-offset:3px}
.psi__note.is-active{border-color:var(--aqua);background:rgba(91,178,212,.09)}
.psi__note[data-dim="1"]{opacity:.45}
.psi__note b{display:block;font-family:var(--display);text-transform:uppercase;letter-spacing:.09em;font-size:1.02rem}
.psi__note span{font-size:.94rem;color:var(--text-soft)}
.psi__note svg{width:22px;height:22px;flex:none;color:var(--aqua);margin-top:.15rem}

/* ---- soft washing: heading beside the booking box ---------------------
   The dial and the notes below want the full width, so only this top row is
   split. The box is deliberately the narrower column — it is an offer beside
   the argument, not a second hero. */
.sw-top{display:grid;gap:1.8rem;align-items:start}
/* Same columns and gap as .psi below, so the box's left edge lines up with the
   Soft Wash panel underneath it instead of floating off on its own axis. */
@media(min-width:980px){
  .sw-top{grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
  .sw-top .sec-head{margin-bottom:0;max-width:none}
  /* Sized to hold "Brutal on the algae." on one line in the narrower column —
     at the full display scale it broke into four ragged lines. */
  .sw-top .sec-head .h1{font-size:clamp(1.9rem,3.75vw,3.3rem)}
}

.ctabox{
  display:flex;flex-direction:column;gap:.65rem;align-items:stretch;
  padding:clamp(1.3rem,2.4vw,1.7rem);
  border:1px solid var(--line-strong);border-radius:var(--radius-lg);
  background:
    radial-gradient(120% 140% at 8% 0%,rgba(91,178,212,.16),transparent 58%),
    linear-gradient(180deg,var(--surface-raised),var(--surface));
  box-shadow:0 24px 60px -34px rgba(0,0,0,.9);
}
.ctabox h3{
  font-family:var(--display);font-weight:800;line-height:1.03;margin:.1rem 0 .2rem;
  font-size:clamp(1.35rem,2.1vw,1.7rem);text-transform:uppercase;letter-spacing:.005em;
}
.ctabox > p{margin:0 0 .35rem;color:var(--text-soft);font-size:.94rem}
.ctabox .btn{width:100%;justify-content:center}
.ctabox__note{
  margin:.35rem 0 0;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.13em;font-size:.72rem;color:var(--text-mute);text-align:center;
}


/* =========================================================================
   wash-to-reveal panel (drag to blast the grime)
   ========================================================================= */
.wash{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);min-height:clamp(380px,58svh,560px);display:grid}
.wash__base{position:absolute;inset:0;z-index:0}
.wash__base video,.wash__base img{width:100%;height:100%;object-fit:cover}
.wash__tint{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(4,16,27,.48),rgba(4,16,27,.78))}
.wash__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;touch-action:none;cursor:none}
.wash__content{position:relative;z-index:3;place-self:center;text-align:center;padding:2.5rem 1.5rem;pointer-events:none;max-width:60ch}
.wash__content .btn{pointer-events:auto}
.wash__hint{
  position:absolute;z-index:4;left:50%;bottom:1.4rem;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:.55rem;padding:.6rem 1.1rem;border-radius:999px;
  background:rgba(4,16,27,.72);border:1px solid var(--line-strong);backdrop-filter:blur(10px);
  font-family:var(--display);text-transform:uppercase;letter-spacing:.15em;font-size:.75rem;color:var(--text-soft);
  transition:opacity .5s;pointer-events:none;
}
.wash__hint svg{width:16px;height:16px;color:var(--aqua)}
.wash.is-washing .wash__hint{opacity:0}

/* =========================================================================
   process steps
   ========================================================================= */
.steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
@media(min-width:820px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{background:var(--surface);padding:2.2rem 1.6rem;position:relative;transition:background .4s}
.step:hover{background:var(--surface-2)}
.step__n{font-family:var(--display);font-weight:800;font-size:3.4rem;line-height:1;color:transparent;
  -webkit-text-stroke:1.5px var(--aqua-dim);opacity:.65;transition:opacity .4s,-webkit-text-stroke-color .4s}
.step:hover .step__n{opacity:1;-webkit-text-stroke-color:var(--aqua-bright)}
.step h3{font-size:1.35rem;text-transform:uppercase;margin:.9rem 0 .5rem}
.step p{font-size:.96rem;color:var(--text-soft);margin:0}

/* =========================================================================
   gallery — a continuous right-to-left belt, flush with no gaps.
   Per house rule it never pauses on hover; the work keeps moving.
   ========================================================================= */
.workbelt{
  position:relative;overflow:hidden;
  border-block:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.workbelt__track{display:flex;width:max-content;animation:beltslide 82s linear infinite}
.workbelt__group{display:flex;flex:none}
@keyframes beltslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.gal__item{
  position:relative;flex:none;margin:0;cursor:zoom-in;overflow:hidden;
  width:clamp(178px,20vw,268px);
  height:clamp(266px,30vw,402px);
  background:var(--surface-2);
}
.gal__item img{
  width:100%;height:100%;object-fit:cover;object-position:center 32%;
  filter:saturate(.88) brightness(.92);
  transition:transform .9s var(--ease-out),filter .45s;
}
.gal__item:hover img,.gal__item:focus-visible img{transform:scale(1.06);filter:saturate(1.08) brightness(1.04)}
.gal__item:focus-visible{outline:3px solid var(--aqua-bright);outline-offset:-3px}
.gal__item figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:2rem .9rem .85rem;
  background:linear-gradient(180deg,transparent,rgba(4,16,27,.94));
  font-family:var(--display);text-transform:uppercase;letter-spacing:.11em;
  font-size:.74rem;color:var(--text);
  opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s var(--ease-out);
}
.gal__item:hover figcaption,.gal__item:focus-visible figcaption{opacity:1;transform:none}

/* lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(3,10,18,.96);backdrop-filter:blur(14px);
  display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.lb.is-open{opacity:1;visibility:visible}
.lb img{max-width:100%;max-height:82vh;border-radius:var(--radius);box-shadow:0 40px 90px -30px #000;
  transform:scale(.96);transition:transform .45s var(--ease-out)}
.lb.is-open img{transform:none}
.lb__cap{margin-top:1rem;text-align:center;font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;color:var(--text-mute)}
.lb__btn{position:absolute;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid var(--line-strong);color:var(--text);transition:background .25s,transform .25s}
.lb__btn:hover{background:var(--aqua);color:var(--ink);transform:scale(1.06)}
.lb__btn svg{width:22px;height:22px}
.lb__close{top:1.2rem;right:1.2rem}
.lb__prev{left:1.2rem;top:50%;margin-top:-27px}
.lb__next{right:1.2rem;top:50%;margin-top:-27px}

/* =========================================================================
   about
   ========================================================================= */
.about{display:grid;gap:2.6rem;align-items:center}
@media(min-width:940px){.about{grid-template-columns:.92fr 1.08fr;gap:4rem}}
.about__media{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line)}
.about__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.about__badge{
  position:absolute;left:1.1rem;bottom:1.1rem;padding:.9rem 1.2rem;border-radius:14px;
  background:rgba(4,16,27,.82);border:1px solid var(--line-strong);backdrop-filter:blur(12px);
}
.about__badge b{display:block;font-family:var(--display);font-size:1.5rem;text-transform:uppercase;line-height:1}
.about__badge span{font-size:.8rem;color:var(--text-mute);letter-spacing:.1em;text-transform:uppercase;font-family:var(--display)}
.about .h1{margin-bottom:1.1rem}
.about__points{display:grid;gap:1rem;margin:2rem 0;padding:0;list-style:none}
.about__points li{display:flex;gap:.9rem;align-items:flex-start}
.about__points svg{width:22px;height:22px;color:var(--aqua);flex:none;margin-top:.2rem}
.about__points b{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;display:block;font-size:1.05rem}
.about__points span{color:var(--text-soft);font-size:.97rem}

/* The quote button is the main call to action on the page, so landing on this
   section should show as much of the form as possible. Default section padding
   put 96px of empty space above the eyebrow, and scroll-margin-top cleared the
   header by more than the header is tall — together that wasted ~185px before
   the visitor saw anything. Tightened here only. */
#contact{scroll-margin-top:76px;padding-top:clamp(1.6rem,3.5vw,2.4rem)}
#contact .sec-head{margin-bottom:clamp(1.4rem,2.6vw,2rem)}
/* The form is the point of this section, not the headline. Sized down from the
   display scale so the whole form clears the fold on a normal laptop. */
#contact .sec-head .h1{font-size:clamp(1.85rem,3.4vw,2.75rem)}
#contact .sec-head .lead{font-size:clamp(1rem,1.3vw,1.1rem)}
/* Trim the form's own vertical padding a little, again only here. The textarea
   stays resizable, so anyone writing more than a couple of lines can drag it. */
#contact .form{padding-block:clamp(1.2rem,2.2vw,1.7rem)}
#contact .field{margin-bottom:.8rem}
#contact .field textarea{min-height:98px}

/* =========================================================================
   contact
   ========================================================================= */
.contact{position:relative;overflow:hidden}
.contact__grid{display:grid;gap:2.6rem}
@media(min-width:980px){.contact__grid{grid-template-columns:.85fr 1.15fr;gap:3.5rem}}
.contact__side{display:grid;gap:1.1rem;align-content:start}
.ccard{
  display:flex;gap:1rem;padding:1.3rem;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--surface);transition:border-color .35s,transform .35s var(--ease-out),background .35s;
}
.ccard:hover{border-color:var(--aqua);transform:translateX(4px);background:var(--surface-2)}
.ccard svg{width:24px;height:24px;color:var(--aqua);flex:none;margin-top:.15rem}
.ccard b{display:block;font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--text-mute)}
.ccard strong{display:block;font-family:var(--display);font-size:1.35rem;font-weight:700;margin-top:.15rem}
.ccard p{margin:.2rem 0 0;font-size:.92rem;color:var(--text-soft)}

.form{
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.5rem,3vw,2.4rem);
  background:linear-gradient(165deg,rgba(15,59,107,.34),rgba(8,28,46,.86));backdrop-filter:blur(10px);
}
.form__row{display:grid;gap:1.1rem}
@media(min-width:620px){.form__row--2{grid-template-columns:1fr 1fr}}

/* City / state / ZIP. Widths follow what each field actually holds rather than
   splitting the row in three: town names run long, a state is two characters and
   a ZIP is five, so equal columns would leave the last two mostly empty while
   the first one wrapped.

   On narrow screens the row does NOT simply stack the way the others do — a
   two-character state box on its own line looks like a mistake. City takes the
   full width and state and ZIP share the line under it. */
.form__row--csz{grid-template-columns:1fr 1fr}
.form__row--csz>.field:first-child{grid-column:1 / -1}
@media(min-width:620px){
  .form__row--csz{grid-template-columns:minmax(0,2.2fr) minmax(0,.7fr) minmax(0,1fr)}
  .form__row--csz>.field:first-child{grid-column:auto}
}
.input--state{text-transform:uppercase}
.input--state::placeholder{text-transform:none}
.field{display:grid;gap:.45rem;margin-bottom:1.1rem}
.field label{font-family:var(--display);text-transform:uppercase;letter-spacing:.13em;font-size:.78rem;color:var(--text-soft)}
.field label .req{color:var(--aqua)}
.field input,.field select,.field textarea{
  width:100%;padding:.9rem 1rem;border-radius:12px;font:inherit;font-size:1rem;
  background:rgba(4,16,27,.6);border:1.5px solid var(--line);color:var(--text);
  transition:border-color .25s,box-shadow .25s,background .25s;
}
.field textarea{min-height:130px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#6C8CA2}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line-strong)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--aqua);box-shadow:0 0 0 4px rgba(91,178,212,.16);background:rgba(4,16,27,.85)
}
.field small{font-size:.84rem;color:var(--text-mute)}
.field .err{font-size:.85rem;color:#FF9C8A;display:none}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:#FF7A63}
.field.is-invalid .err{display:block}

/* service checkbox chips */
.picks{display:flex;flex-wrap:wrap;gap:.5rem}
.pick input{position:absolute;opacity:0;width:0;height:0}
.pick span{
  display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1rem;border-radius:999px;
  border:1.5px solid var(--line);background:rgba(4,16,27,.5);cursor:pointer;
  font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;
  color:var(--text-soft);transition:all .25s var(--ease);
}
.pick span:hover{border-color:var(--line-strong);color:var(--text)}
.pick input:checked+span{background:rgba(91,178,212,.16);border-color:var(--aqua);color:var(--aqua-bright)}
.pick input:focus-visible+span{outline:3px solid var(--aqua-bright);outline-offset:2px}

.form__note{font-size:.86rem;color:var(--text-mute);margin:1rem 0 0;text-align:center}
.form__status{margin-top:1rem;padding:1rem;border-radius:12px;font-size:.95rem;display:none}
.form__status.is-ok{display:block;background:rgba(91,178,212,.14);border:1px solid var(--aqua);color:var(--ice)}
.form__status.is-err{display:block;background:rgba(255,122,99,.12);border:1px solid #FF7A63;color:#FFC9BE}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* =========================================================================
   footer
   ========================================================================= */
.footer{border-top:1px solid var(--line);background:var(--navy-deep);padding:var(--s-6) 0 2rem}
.footer__grid{display:grid;gap:2.4rem}
@media(min-width:800px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}
.footer h4{font-family:var(--display);text-transform:uppercase;letter-spacing:.15em;font-size:.82rem;color:var(--aqua);margin:0 0 1.1rem}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.footer a{color:var(--text-soft);font-size:.96rem;transition:color .2s,padding-left .25s}
.footer a:hover{color:var(--aqua-bright);padding-left:4px}
.footer__brand img{height:104px;width:auto;margin-bottom:1.1rem}
.footer__bottom{
  margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-size:.86rem;color:var(--text-mute);
}
/* A service card sends you to the form with its own box already ticked;
   this makes that obvious instead of leaving you to spot it. */
@keyframes pickflash{
  0%,100%{box-shadow:0 0 0 0 rgba(134,217,245,0)}
  25%,75%{box-shadow:0 0 0 4px rgba(134,217,245,.38)}
}
.pick.just-picked{animation:pickflash 1.5s ease both}
@media (prefers-reduced-motion: reduce){.pick.just-picked{animation:none}}

.footer__credit{
  margin:1.4rem 0 0;padding-top:1.3rem;border-top:1px solid var(--line);
  text-align:center;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.16em;font-size:.75rem;color:var(--text-mute);
}
.footer__credit a{
  color:var(--text-soft);text-decoration:none;
  border-bottom:1px solid var(--line-strong);padding-bottom:1px;
  transition:color .25s,border-color .25s;
}
.footer__credit a:hover{color:var(--aqua-bright);border-color:var(--aqua)}
.footer__credit a:focus-visible{outline:3px solid var(--aqua-bright);outline-offset:3px;border-radius:3px}
.footer__areas{font-size:.88rem;color:var(--text-mute);line-height:1.9}
.footer__areas a{color:var(--text-mute)}

/* =========================================================================
   waves divider
   ========================================================================= */
.wave{display:block;width:100%;height:clamp(40px,6vw,90px);color:var(--surface)}
.wave path{fill:currentColor}

/* =========================================================================
   scroll reveal
   ========================================================================= */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal-stagger]>*{opacity:0;transform:translateY(20px);transition:opacity .65s var(--ease-out),transform .65s var(--ease-out)}
[data-reveal-stagger].is-in>*{opacity:1;transform:none}
/* The stagger delay must stop applying once the reveal has played out.
   Left in place it keeps delaying every LATER transition on the same
   element — so hovering the fourth tile in a row sat still for .21s before
   it moved, and the seventh for .42s. site.js adds .is-done when the reveal
   has finished, which drops these rules and hands hover an instant response.
   The :not() is what keeps the specificity above .reel:hover and friends. */
[data-reveal-stagger].is-in:not(.is-done)>*:nth-child(1){transition-delay:.0s}
[data-reveal-stagger].is-in:not(.is-done)>*:nth-child(2){transition-delay:.07s}
[data-reveal-stagger].is-in:not(.is-done)>*:nth-child(3){transition-delay:.14s}
[data-reveal-stagger].is-in:not(.is-done)>*:nth-child(4){transition-delay:.21s}
[data-reveal-stagger].is-in:not(.is-done)>*:nth-child(5){transition-delay:.28s}
[data-reveal-stagger].is-in:not(.is-done)>*:nth-child(6){transition-delay:.35s}
[data-reveal-stagger].is-in:not(.is-done)>*:nth-child(7){transition-delay:.42s}

/* =========================================================================
   floating mobile contact bar — keeps "Contact" always reachable
   ========================================================================= */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:95;display:grid;grid-template-columns:1fr 1fr;gap:.6rem;
  padding:.7rem .8rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(4,16,27,.93);backdrop-filter:blur(16px);border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .45s var(--ease-out);
}
.dock.is-up{transform:none}
@media(min-width:760px){.dock{display:none}}
.dock .btn{min-height:52px;font-size:.95rem}

/* The dock is fixed to the bottom and, once it slides up, stays up all the way
   to the end of the page — so the last thing in the footer sits underneath it
   and cannot be read no matter how far you scroll. The footer keeps its own
   2rem of breathing room and adds the dock's height on top. Mobile only: above
   760px the dock is display:none and this padding would just be dead space. */
@media(max-width:759px){
  .footer{padding-bottom:calc(var(--dock-h) + 2rem)}
}

/* =========================================================================
   utilities
   ========================================================================= */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:.6rem;top:-100px;z-index:300;padding:.8rem 1.2rem;border-radius:10px;
  background:var(--aqua);color:var(--ink);font-family:var(--display);font-weight:700;text-transform:uppercase;transition:top .25s}
.skip:focus{top:.6rem}
.center{text-align:center}
.mt-4{margin-top:var(--s-4)}
.mt-5{margin-top:var(--s-5)}

/* =========================================================================
   reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal],[data-reveal-stagger]>*{opacity:1!important;transform:none!important}
  .hero__title .ln>span{transform:none!important}
  .hero__sub,.hero__actions,.hero__trust{opacity:1!important;transform:none!important}
  .marquee__track{animation:none}
  .workbelt{overflow-x:auto}
  .workbelt__track{animation:none}
  .tbelt__row{overflow-x:auto}
  .tbelt__track{animation:none}
}

/* =========================================================================
   testimonials — two belts running in opposite directions
   Same trick as the work belt: each row holds two identical groups and
   translates exactly -50%, so the seam lands where the second group starts.
   Neither row ever pauses, on hover or focus — the motion is decorative and
   stopping it under the cursor reads as a bug. Cards are buttons: the quote
   is clamped to keep every card the same height, and the full text opens in
   a dialog.
   ========================================================================= */
.tbelt{
  display:grid;gap:.9rem;
  padding-block:.2rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.tbelt__row{overflow:hidden}
.tbelt__track{display:flex;width:max-content;animation:tbeltslide 190s linear infinite}
.tbelt__track--rev{animation-duration:214s;animation-direction:reverse}
.tbelt__group{display:flex;flex:none}
@keyframes tbeltslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.tcard{
  flex:none;margin:0;display:flex;flex-direction:column;gap:.7rem;text-align:left;
  width:clamp(272px,27vw,368px);
  height:clamp(230px,25vw,258px);
  padding:clamp(1.15rem,1.9vw,1.45rem) clamp(1.15rem,1.8vw,1.4rem);
  font:inherit;color:inherit;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,var(--surface-raised),var(--surface));
  margin-right:.9rem;
  transition:border-color .3s,transform .3s var(--ease-out),background .3s;
}
.tcard:hover,.tcard:focus-visible{
  border-color:var(--line-strong);transform:translateY(-3px);
  background:linear-gradient(180deg,var(--surface-3),var(--surface-raised));
}
.tcard:focus-visible{outline:3px solid var(--aqua-bright);outline-offset:2px}
.tcard__stars{display:flex;gap:.2rem;color:var(--aqua-bright);flex:none}
.tcard__stars svg{width:15px;height:15px;flex:none}
.tcard__quote{
  flex:1 1 auto;min-height:0;overflow:hidden;
  font-size:.98rem;line-height:1.5;color:var(--text-soft);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;
}
.tcard__quote::before{content:'\201C'}
.tcard__quote::after{content:'\201D'}
.tcard__who{display:flex;flex-direction:column;gap:.1rem;flex:none}
.tcard__who b{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:.9rem;color:var(--text);
}
.tcard__who span{font-size:.78rem;color:var(--text-mute)}
/* only shown on cards whose quote actually got cut off (set in site.js) */
.tcard__more{
  display:none;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.12em;font-size:.72rem;color:var(--aqua);flex:none;
}
.tcard.is-clamped .tcard__more{display:block}

/* ---- full review dialog ---- */
.rmodal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:1.2rem}
.rmodal[hidden]{display:none}
.rmodal__backdrop{position:absolute;inset:0;background:rgba(2,8,14,.82);backdrop-filter:blur(6px)}
.rmodal__panel{
  position:relative;z-index:1;width:min(620px,100%);max-height:82svh;overflow:auto;
  display:flex;flex-direction:column;gap:1rem;
  padding:clamp(1.6rem,3.5vw,2.4rem);
  border:1px solid var(--line-strong);border-radius:var(--radius-lg);
  background:linear-gradient(180deg,var(--surface-raised),var(--surface));
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95);
  animation:rmpop .3s var(--ease-out) both;
}
@keyframes rmpop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.rmodal__panel blockquote{margin:0;font-size:1.05rem;line-height:1.62;color:var(--text);white-space:pre-line}
.rmodal__panel blockquote::before{content:'\201C'}
.rmodal__panel blockquote::after{content:'\201D'}
.rmodal__who{margin:0;display:flex;flex-direction:column;gap:.15rem}
.rmodal__who b{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:1rem;color:var(--text);
}
.rmodal__who span{font-size:.85rem;color:var(--text-mute)}
.rmodal__x{
  position:absolute;top:.7rem;right:.7rem;width:40px;height:40px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;background:var(--surface-2);color:var(--text-soft);
  cursor:pointer;transition:color .25s,border-color .25s,background .25s;
}
.rmodal__x:hover{color:var(--text);border-color:var(--line-strong);background:var(--surface-3)}
.rmodal__x:focus-visible{outline:3px solid var(--aqua-bright);outline-offset:2px}
.rmodal__x svg{width:20px;height:20px}

/* =========================================================================
   b-roll strip — vertical footage shown in the format it was shot
   ========================================================================= */
.reels{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:620px){.reels{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.reels{grid-template-columns:repeat(4,1fr)}}
.reel{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;isolation:isolate;
  aspect-ratio:9/14;border:1px solid var(--line);background:var(--surface-2);
  transition:transform .5s var(--ease-out),border-color .4s,box-shadow .5s;
}
.reel:hover{transform:translateY(-6px);border-color:var(--line-strong);box-shadow:0 26px 60px -30px rgba(91,178,212,.55)}
.reel video,.reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel__veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(4,16,27,.10) 0%,rgba(4,16,27,.15) 45%,rgba(4,16,27,.88) 100%);
}
.reel__cap{
  position:absolute;left:1rem;right:1rem;bottom:1rem;z-index:2;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.11em;font-size:.86rem;color:var(--text);
}
.reel__cap span{display:block;font-size:.7rem;letter-spacing:.16em;color:var(--aqua);font-weight:600;margin-bottom:.15rem}