/* =====================================================================
   CaPow Pressure Washing - dark edition
   Design tokens pulled straight from the logo: black field, deep navy
   droplet, bright cyan water. Monochrome + one signal accent.
   ===================================================================== */

:root{
  /* --- surface ladder (darkest to lightest) --- */
  --void:#04070c;
  --base:#070c14;
  --panel:#0c141f;
  --panel-2:#111c2a;
  --raised:#162435;

  /* --- brand --- */
  --navy:#164574;
  --navy-2:#1d5b98;
  --cyan:#2bb8e8;
  --cyan-hi:#6fe0ff;
  --cyan-deep:#1a86b8;

  /* --- text --- */
  --bone:#e8f1f8;
  --dim:#93a8bd;
  --faint:#5f7488;

  /* --- lines + glow --- */
  --line:rgba(120,190,235,.11);
  --line-2:rgba(120,190,235,.2);
  --glow:0 0 60px -12px rgba(43,184,232,.55);
  --gold:#f5b41c;

  /* --- elevation --- */
  --sh-1:0 10px 30px -14px rgba(0,0,0,.8);
  --sh-2:0 26px 64px -22px rgba(0,0,0,.9);
  --sh-3:0 44px 100px -30px rgba(0,0,0,.95);

  /* --- geometry --- */
  --r:18px;
  --r-lg:26px;
  --maxw:1200px;

  /* --- type --- */
  --dsp:'Sora',system-ui,-apple-system,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;

  /* --- easing pair --- */
  --enter:cubic-bezier(.22,1,.36,1);
  --panel-ease:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  /* ONE base colour for the entire page. Sections only paint soft radial
     accents on top, which is what stops hard horizontal seams appearing
     where two sections meet. */
  background:#05090f;
  color:var(--bone);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--cyan);color:#03080d}

h1,h2,h3,h4{font-family:var(--dsp);line-height:1.04;letter-spacing:-.03em;font-weight:800}

/* ===== ambient page texture: faint grid + noise, sits under everything ===== */
.bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none}
.bg-fx::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(120,190,235,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,190,235,.028) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000,transparent 78%);
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000,transparent 78%);
}
.grain{
  position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}   16%{transform:translate(-3%,-4%)}
  33%{transform:translate(2%,-2%)}    50%{transform:translate(-2%,3%)}
  66%{transform:translate(3%,2%)}     83%{transform:translate(-3%,1%)}
}

/* ===== layout primitives ===== */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:2}
.section{padding:clamp(72px,10vw,132px) 0;position:relative;z-index:2}
main{position:relative;z-index:2}

.kicker{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-weight:500;font-size:.7rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);
  border:1px solid var(--line-2);background:rgba(43,184,232,.06);
  padding:7px 14px;border-radius:100px;margin-bottom:22px;
}
.kicker::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}

.section-head{max-width:760px;margin:0 auto clamp(44px,6vw,72px);text-align:center}
.section-head h2{font-size:clamp(2rem,5vw,3.4rem);margin-bottom:16px;color:#fff}
.section-head .lead{color:var(--dim);font-size:clamp(1rem,1.6vw,1.12rem);max-width:600px;margin:0 auto}
.section-head--left{text-align:left;margin-left:0}

/* accent word inside headings */
.hl{font-style:normal;
  background:linear-gradient(100deg,var(--cyan) 10%,var(--cyan-hi) 45%,var(--cyan) 80%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 6s linear infinite;
}
@keyframes shimmer{to{background-position:220% center}}

/* ===== scroll reveal - straight lift, no rotation (rotation jitters text) ===== */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--enter),transform .8s var(--enter)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
.reveal[data-d="4"]{transition-delay:.36s}
.reveal[data-d="5"]{transition-delay:.45s}

/* while JS is writing transform every frame, the CSS tween must stand down */
.is-tilting{transition:none!important}

/* ===== buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--dsp);font-weight:600;font-size:.98rem;
  padding:15px 28px;border-radius:100px;cursor:pointer;white-space:nowrap;
  transition:transform .35s var(--enter),box-shadow .35s,background .3s,border-color .3s;
  will-change:transform;position:relative;overflow:hidden;
}
.btn-primary{
  background:linear-gradient(115deg,var(--cyan),var(--navy-2));
  color:#04121c;font-weight:700;
  box-shadow:0 14px 34px -14px rgba(43,184,232,.85),inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-primary:hover{box-shadow:0 22px 50px -14px rgba(43,184,232,1),inset 0 1px 0 rgba(255,255,255,.4);transform:translateY(-2px)}
/* transform, not `left`, so the shine stays on the compositor */
.btn-primary::after{
  content:"";position:absolute;top:0;left:0;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translate3d(-270%,0,0) skewX(-20deg);
  transition:transform .7s var(--enter);
}
.btn-primary:hover::after{transform:translate3d(330%,0,0) skewX(-20deg)}
.btn-ghost{
  background:rgba(255,255,255,.04);color:var(--bone);
  border:1px solid var(--line-2);backdrop-filter:blur(8px);
}
.btn-ghost:hover{background:rgba(43,184,232,.12);border-color:var(--cyan);transform:translateY(-2px)}
.btn-light{background:var(--bone);color:#061019;font-weight:700;box-shadow:var(--sh-2)}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--sh-3)}
.btn.big{padding:18px 40px;font-size:1.05rem}

/* ===== preloader ===== */
#loader{
  position:fixed;inset:0;z-index:300;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%,rgba(29,91,152,.28),transparent 70%),
    linear-gradient(175deg,#08111c 0%,#04070c 60%,#020407 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:opacity .5s ease,visibility .5s;
}
#loader.hide{opacity:0;visibility:hidden;pointer-events:none;transition-duration:.4s}

/* The animation frames have a near-black (#040706) background baked in,
   not real transparency. `screen` blending makes any near-black pixel
   read as fully transparent against the dark page, so the rectangle
   edge disappears and the artwork floats. Once it floats, a glow can
   sit behind it without outlining a box. */
.loader-anim-wrap{position:relative;display:grid;place-items:center}
.loader-anim-wrap::before{
  content:"";position:absolute;width:150%;height:90%;border-radius:50%;
  background:radial-gradient(circle,rgba(43,184,232,.34),rgba(29,91,152,.14) 45%,transparent 70%);
  filter:blur(34px);animation:loaderPulse 2.6s ease-in-out infinite;
}
@keyframes loaderPulse{50%{transform:scale(1.12);opacity:.75}}
.loader-anim{
  position:relative;z-index:2;
  width:180px;height:321px;object-fit:contain;
  mix-blend-mode:screen;
}
.loader-bar{width:170px;height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.loader-bar i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;background:linear-gradient(90deg,var(--cyan),var(--cyan-hi))}
.loader-word{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.42em;
  color:var(--cyan);text-transform:uppercase;padding-left:.42em;
}
/* curtain wipe - sits just under the loader so the handoff has no flash */
.curtain{position:fixed;left:0;right:0;height:51vh;z-index:299;background:#000;pointer-events:none;
  transition:transform .9s var(--panel-ease)}
.curtain.top{top:0}
.curtain.bot{bottom:0}
body.loaded .curtain.top{transform:translateY(-101%)}
body.loaded .curtain.bot{transform:translateY(101%)}

/* ===== scroll progress ===== */
/* full width + scaleX keeps this on the compositor (animating `width` did not) */
#progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:120;
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;
  background:linear-gradient(90deg,var(--cyan-deep),var(--cyan-hi));box-shadow:0 0 12px var(--cyan)}

/* ===== nav ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:16px 0;
  transition:background .4s,box-shadow .4s,padding .4s,border-color .4s;
  border-bottom:1px solid transparent}
.nav-inner{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:22px}
/* the supplied logo has the business name baked in at a size that turns to
   mush in a nav bar, so the nav uses the droplet mark plus live text */
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{height:42px;width:auto;transition:height .4s;
  filter:drop-shadow(0 3px 14px rgba(43,184,232,.4))}
.brand-type{display:flex;flex-direction:column;line-height:1}
.brand-type b{font-family:var(--dsp);font-weight:800;font-size:1.16rem;
  color:#fff;letter-spacing:-.025em}
.brand-type small{font-family:var(--mono);font-weight:500;font-size:.56rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin-top:3px}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:32px}
.nav-links a{font-size:.92rem;font-weight:500;color:var(--dim);position:relative;transition:color .25s}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1.5px;
  background:var(--cyan);box-shadow:0 0 8px var(--cyan);transition:right .3s var(--enter)}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{right:0}
.nav-right{display:flex;align-items:center;gap:18px}
.nav-phone{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-weight:500;
  font-size:.86rem;color:var(--bone);letter-spacing:.02em}
.nav-phone .dot{width:7px;height:7px;border-radius:50%;background:#3ce08d;box-shadow:0 0 0 0 rgba(60,224,141,.5);animation:ping 2.4s infinite}
@keyframes ping{70%{box-shadow:0 0 0 8px rgba(60,224,141,0)}100%{box-shadow:0 0 0 0 rgba(60,224,141,0)}}
.nav-cta{background:linear-gradient(115deg,var(--cyan),var(--navy-2));color:#04121c;font-weight:700;
  font-family:var(--dsp);padding:11px 22px;border-radius:100px;font-size:.9rem;
  box-shadow:0 10px 26px -12px rgba(43,184,232,.9);transition:transform .3s var(--enter),box-shadow .3s}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(43,184,232,1)}
.nav.scrolled{background:rgba(7,12,20,.82);backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);padding:10px 0;box-shadow:0 12px 40px -24px #000}
.nav.scrolled .brand-mark{height:34px}

.hamburger{display:none;margin-left:auto;flex-direction:column;gap:5px;padding:8px;z-index:101}
.hamburger span{width:25px;height:2px;background:var(--bone);border-radius:2px;transition:.35s var(--enter)}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{
  position:fixed;top:72px;left:14px;right:14px;z-index:99;
  background:rgba(12,20,31,.97);backdrop-filter:blur(20px);
  border:1px solid var(--line-2);border-radius:22px;padding:14px;
  flex-direction:column;gap:2px;box-shadow:var(--sh-3);
  display:none;opacity:0;transform:translateY(-12px);
  transition:opacity .3s var(--enter),transform .3s var(--enter);
}
.mobile-menu.open{display:flex;opacity:1;transform:none}
.mobile-menu a{padding:14px 16px;border-radius:13px;font-weight:500;color:var(--dim);transition:.2s}
.mobile-menu a:hover{background:rgba(43,184,232,.1);color:#fff}
.mobile-menu .m-cta{background:linear-gradient(115deg,var(--cyan),var(--navy-2));color:#04121c;
  text-align:center;font-family:var(--dsp);font-weight:700;margin-top:8px}
.mobile-menu .m-call{background:rgba(255,255,255,.05);border:1px solid var(--line-2);
  color:#fff;text-align:center;font-family:var(--dsp);font-weight:600;margin-top:4px}
.menu-scrim{position:fixed;inset:0;background:rgba(4,7,12,.7);z-index:98;backdrop-filter:blur(3px)}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:132px 0 78px;overflow:hidden;
  /* accents only - the base colour comes from the page, so the hero has
     no bottom edge to butt against the next section */
  background:
    radial-gradient(ellipse 70% 50% at 78% 18%,rgba(29,91,152,.38),transparent 64%),
    radial-gradient(ellipse 60% 46% at 12% 82%,rgba(43,184,232,.15),transparent 62%),
    radial-gradient(ellipse 120% 70% at 50% 0%,rgba(16,34,58,.7),transparent 72%);
}
.hero-drops{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.hero-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 92% 76% at 50% 46%,transparent 40%,rgba(4,7,12,.72) 100%)}
.hero-inner{
  position:relative;z-index:3;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center;
  perspective:1400px;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);
  background:rgba(43,184,232,.07);border:1px solid var(--line-2);
  padding:8px 16px;border-radius:100px;margin-bottom:26px;
}
.eyebrow .pulse{width:7px;height:7px;border-radius:50%;background:#3ce08d;
  box-shadow:0 0 0 0 rgba(60,224,141,.6);animation:ping 2.4s infinite}

.hero-title{
  font-size:clamp(2.3rem,5vw,3.9rem);color:#fff;margin-bottom:24px;
  letter-spacing:-.035em;line-height:1.04;
}
/* The overflow mask drives the line reveal, but it clips in BOTH axes.
   Padding on all sides (cancelled by negative margin) keeps descenders
   and the last glyph of each line from being sliced off. */
.hero-title .ln{
  display:block;overflow:hidden;
  padding:.06em .14em .16em;margin:0 -.14em -.16em;
}
.hero-title .ln > span{display:block;transform:translateY(112%);
  transition:transform 1s var(--enter)}
body.ready .hero-title .ln > span{transform:none}
.hero-title .ln:nth-child(2) > span{transition-delay:.12s}
.hero-title .ln:nth-child(3) > span{transition-delay:.24s}

.hero-sub{color:var(--dim);font-size:clamp(1rem,1.5vw,1.12rem);max-width:520px;margin-bottom:32px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.hero-trust{display:flex;align-items:center;gap:13px;color:var(--dim);font-size:.92rem;flex-wrap:wrap}
.hero-trust strong{color:#fff;font-weight:600}
.stars{color:var(--gold);letter-spacing:2.5px;line-height:1}
.stars.sm{font-size:.8rem;letter-spacing:1.5px}
.stars.big{font-size:1.55rem}

/* --- hero 3D photo stack --- */
.hero-media{position:relative;display:flex;justify-content:center}
.hero-stack{position:relative;width:min(100%,414px);
  transition:transform .5s var(--enter)}
.glow-ring{
  position:absolute;width:126%;height:126%;top:-13%;left:-13%;border-radius:50%;
  background:conic-gradient(from 0deg,transparent,rgba(43,184,232,.6),transparent 58%);
  filter:blur(38px);animation:spin 20s linear infinite;z-index:0;
}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-photo{
  position:relative;z-index:2;border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:4/5;box-shadow:var(--sh-3),0 0 0 1px var(--line-2);
}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(4,7,12,.62),transparent 46%);
}
/* animate transform, never `left` - animating a layout property made this
   the single biggest Cumulative Layout Shift source on the page */
.hero-photo .sweep{
  position:absolute;top:0;left:0;width:42%;height:100%;z-index:3;
  background:linear-gradient(100deg,transparent,rgba(160,225,255,.3),transparent);
  will-change:transform;animation:sweep 7s ease-in-out infinite;
}
@keyframes sweep{
  0%,100%{transform:translate3d(-160%,0,0) skewX(-18deg)}
  55%     {transform:translate3d(330%,0,0)  skewX(-18deg)}
}

.float-badge{
  position:absolute;z-index:5;background:rgba(12,20,31,.9);backdrop-filter:blur(14px);
  border:1px solid var(--line-2);border-radius:16px;padding:12px 16px;
  box-shadow:var(--sh-2);display:flex;line-height:1.3;
}
.float-badge b{font-family:var(--dsp);color:#fff;font-size:.9rem;font-weight:600;display:block}
.float-badge small{color:var(--faint);font-size:.72rem;display:block;font-family:var(--mono)}
.b-rating{top:6%;left:-7%;flex-direction:column;animation:bob 5s ease-in-out infinite}
.b-come{bottom:8%;right:-8%;align-items:center;gap:11px;animation:bob 5.6s ease-in-out infinite .6s}
.b-come .ico{font-size:1.4rem;filter:drop-shadow(0 0 10px rgba(43,184,232,.6))}
@keyframes bob{50%{transform:translateY(-10px)}}

.scroll-cue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:9px}
.scroll-cue .mouse{width:24px;height:38px;border:1.5px solid var(--line-2);border-radius:20px;position:relative}
.scroll-cue .mouse span{position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:3px;height:7px;background:var(--cyan);border-radius:2px;animation:cue 1.9s infinite}
@keyframes cue{0%{opacity:0;top:7px}40%{opacity:1}100%{opacity:0;top:22px}}
.scroll-cue small{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint)}

/* =====================================================================
   SHOWCASE - 3D coverflow slideshow
   ===================================================================== */
.showcase{padding:clamp(56px,7vw,90px) 0;
  position:relative;z-index:2;overflow:hidden;--cf-w:clamp(230px,25vw,320px)}
.showcase-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  max-width:var(--maxw);margin:0 auto 40px;padding:0 24px}
.showcase-head h2{font-size:clamp(1.5rem,3.2vw,2.3rem);color:#fff}
.showcase-head p{color:var(--dim);font-size:.95rem;margin-top:6px}

/* Continuous photo ribbon. Same idea as the text marquee: the track just
   glides left forever at a constant speed. The item list is duplicated in
   JS so the wrap is invisible. */
.coverflow{
  position:relative;overflow:hidden;padding:6px 0 10px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.cf-track{
  display:flex;gap:20px;width:max-content;will-change:transform;
  animation:ribbon var(--cf-speed,52s) linear infinite;
}
@keyframes ribbon{to{transform:translate3d(-50%,0,0)}}
/* it keeps gliding under the cursor - only opening a photo stops it */
.coverflow.frozen .cf-track{animation-play-state:paused}
.cf-item{
  position:relative;flex:0 0 var(--cf-w);width:var(--cf-w);
  aspect-ratio:3/4;margin:0;border-radius:var(--r);overflow:hidden;
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--sh-2);
  cursor:zoom-in;
  transition:transform .5s var(--enter),box-shadow .5s var(--enter),border-color .5s;
}
.cf-item img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.cf-item:hover{
  transform:translateY(-8px) scale(1.02);border-color:var(--line-2);
  box-shadow:var(--sh-3),0 0 66px -22px rgba(43,184,232,.7);
}
.cf-item figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:34px 16px 15px;
  background:linear-gradient(to top,rgba(4,7,12,.94),transparent);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--bone);
}
.cf-hint{
  display:block;text-align:center;margin-top:26px;color:var(--faint);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
}

/* =====================================================================
   TRUST STRIP
   ===================================================================== */
.trust{position:relative;z-index:3}
.trust::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(18,32,50,.55) 22%,rgba(18,32,50,.55) 78%,transparent)}
.trust::after{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--line-2),transparent)}
.trust-inner{max-width:var(--maxw);margin:0 auto;padding:44px 24px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;perspective:900px}
.stat{text-align:center;position:relative}
.stat:not(:last-child)::after{content:"";position:absolute;right:-11px;top:18%;height:64%;width:1px;
  background:linear-gradient(180deg,transparent,var(--line-2),transparent)}
.stat .num{display:block;font-family:var(--dsp);font-weight:800;font-size:clamp(2rem,4vw,3rem);
  background:linear-gradient(140deg,#fff 20%,var(--cyan) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.04em}
.stat .label{color:var(--faint);font-family:var(--mono);font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase}

/* ===== marquee ===== */
.marquee{overflow:hidden;padding:17px 0;position:relative;z-index:3;
  background:linear-gradient(90deg,rgba(22,69,116,.42),rgba(43,184,232,.16),rgba(22,69,116,.42));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:32px;white-space:nowrap;width:max-content;
  animation:scroll 34s linear infinite;font-family:var(--dsp);font-weight:600;
  font-size:1.1rem;color:rgba(232,241,248,.72);text-transform:uppercase;letter-spacing:.04em}
.marquee-track .sep{color:var(--cyan)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* =====================================================================
   MANIFESTO - words brighten one by one as you scroll through
   ===================================================================== */
/* The section is deliberately tall and the content sticks to the middle
   of it, so the page "holds" while the sentence fills in. The last third
   of the track is dead scroll with the line complete - that is the pause
   that lets you actually read it before the page moves on. */
.manifesto{position:relative;
  background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(20,44,74,.45),transparent 72%)}
.manifesto-track{height:300vh;position:relative}
.manifesto-sticky{
  position:sticky;top:0;height:100vh;
  display:flex;align-items:center;justify-content:center;
}
.manifesto-cue{
  display:block;text-align:center;margin-top:44px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--faint);
  opacity:0;transition:opacity .6s var(--enter);
}
.manifesto-cue.show{opacity:1;animation:cueBob 2.2s ease-in-out infinite}
@keyframes cueBob{50%{transform:translateY(5px)}}
.manifesto-line{
  font-family:var(--dsp);font-weight:800;
  font-size:clamp(1.5rem,4.1vw,3rem);
  line-height:1.28;letter-spacing:-.03em;
  max-width:1000px;margin:0 auto;text-align:center;
}
.manifesto-line span{
  color:rgba(232,241,248,.13);
  transition:color .5s var(--enter),text-shadow .5s var(--enter);
}
.manifesto-line span.lit{color:var(--bone)}
.manifesto-line span.hl.lit{
  color:var(--cyan-hi);
  text-shadow:0 0 34px rgba(43,184,232,.55);
}
/* the accent words keep their gradient off until lit, so they do not
   flash bright before the sentence reaches them */
.manifesto-line span.hl{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  animation:none;
}

/* =====================================================================
   SERVICES - 3D tilt cards
   ===================================================================== */
.services{background:radial-gradient(ellipse 80% 46% at 50% 50%,rgba(20,40,66,.5),transparent 72%)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;perspective:1300px}
.svc-card{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform .45s var(--enter),box-shadow .45s,border-color .45s;
  will-change:transform;
}
.svc-card::before{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  border-radius:inherit;transition:opacity .45s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(43,184,232,.14),transparent 62%);
}
.svc-card:hover{border-color:var(--line-2);box-shadow:var(--sh-3),0 0 60px -26px rgba(43,184,232,.7)}
.svc-card:hover::before{opacity:1}
.svc-img{position:relative;aspect-ratio:3/2;overflow:hidden}
.svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--enter);filter:saturate(1.05)}
.svc-card:hover .svc-img img{transform:scale(1.07)}
.svc-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--panel) 2%,rgba(12,20,31,.35) 40%,transparent 72%)}
.svc-price{
  position:absolute;bottom:13px;right:13px;z-index:3;
  background:rgba(4,7,12,.82);backdrop-filter:blur(8px);
  border:1px solid var(--line-2);color:var(--cyan);
  font-family:var(--mono);font-weight:500;font-size:.75rem;letter-spacing:.06em;
  padding:7px 13px;border-radius:100px;
}
.svc-body{padding:22px 24px 26px;position:relative;z-index:3}
.svc-body h3{font-size:1.24rem;margin-bottom:9px;color:#fff;font-weight:600}
.svc-body p{color:var(--dim);font-size:.93rem;margin-bottom:14px;line-height:1.62}
.svc-why{
  display:flex;gap:9px;background:rgba(43,184,232,.07);border:1px solid var(--line);
  border-left:2px solid var(--cyan);border-radius:0 10px 10px 0;
  padding:11px 13px;margin-bottom:14px;
}
.svc-why b{color:var(--cyan);font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;display:block;margin-bottom:3px}
.svc-why p{color:var(--dim);font-size:.85rem;margin:0;line-height:1.55}
.addons{list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.addons li{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--dim);
  background:rgba(255,255,255,.04);border:1px solid var(--line);padding:5px 10px;border-radius:100px}
.svc-note{text-align:center;margin-top:40px;color:var(--dim);font-size:.95rem}
.svc-note a{color:var(--cyan);font-weight:600;border-bottom:1px solid rgba(43,184,232,.45)}

/* =====================================================================
   PORTFOLIO
   ===================================================================== */
.portfolio{background:radial-gradient(ellipse 90% 44% at 50% 56%,rgba(16,34,58,.42),transparent 74%)}
.pf-tabs{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-bottom:38px}
.pf-tab{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--line);background:rgba(255,255,255,.02);
  padding:9px 17px;border-radius:100px;transition:.3s var(--enter);
}
.pf-tab:hover{color:#fff;border-color:var(--line-2)}
.pf-tab[aria-selected="true"]{background:var(--cyan);color:#04121c;border-color:var(--cyan);
  box-shadow:0 8px 24px -12px rgba(43,184,232,.9)}

/* --- before/after comparison grid (compact now) --- */
.ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;perspective:1300px}
.ba{margin:0}
.ba-frame{
  position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh-2);border:1px solid var(--line);
  user-select:none;touch-action:pan-y;background:var(--panel);cursor:ew-resize;
  transition:box-shadow .4s,border-color .4s;
}
.ba-frame:hover{border-color:var(--line-2);box-shadow:var(--sh-3),0 0 50px -24px rgba(43,184,232,.6)}
.ba-after,.ba-before{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba-before-wrap{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 50% 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,var(--cyan-hi) 12%,var(--cyan-hi) 88%,transparent);
  box-shadow:0 0 16px rgba(111,224,255,.9);pointer-events:none}
.ba-handle{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;
  background:rgba(4,7,12,.75);backdrop-filter:blur(8px);
  border:1.5px solid var(--cyan);color:var(--cyan-hi);
  box-shadow:0 0 24px -4px rgba(43,184,232,.9);
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  cursor:ew-resize;pointer-events:auto;
}
.ba-handle:focus-visible{outline:2px solid var(--cyan-hi);outline-offset:3px}
.ba-tag{
  position:absolute;top:11px;z-index:2;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;padding:5px 10px;border-radius:100px;
  backdrop-filter:blur(6px);pointer-events:none;
}
.tag-before{left:11px;background:rgba(4,7,12,.8);color:var(--dim);border:1px solid var(--line)}
.tag-after{right:11px;background:rgba(43,184,232,.9);color:#04121c;font-weight:500}
.ba-cap{text-align:center;color:var(--faint);margin-top:12px;font-size:.86rem}

/* --- gallery --- */
.pf-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;perspective:1200px}
.pf-shot{
  position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;
  border:1px solid var(--line);background:var(--panel);cursor:zoom-in;
  transition:transform .5s var(--enter),box-shadow .5s,border-color .5s;
  }
.pf-shot img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--enter)}
.pf-shot:hover{transform:translateY(-7px) scale(1.015);border-color:var(--line-2);
  box-shadow:var(--sh-3),0 0 54px -26px rgba(43,184,232,.65)}
.pf-shot:hover img{transform:scale(1.08)}
.pf-shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:30px 14px 13px;
  background:linear-gradient(to top,rgba(4,7,12,.94),transparent);
  font-family:var(--mono);font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bone);
}
.pf-panel[hidden]{display:none}

/* --- lightbox --- */
.lightbox{
  position:fixed;inset:0;z-index:200;background:rgba(3,6,10,.94);backdrop-filter:blur(14px);
  display:flex;align-items:center;justify-content:center;padding:5vh 4vw;
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;
}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:100%;max-height:82vh;border-radius:var(--r);
  box-shadow:var(--sh-3);transform:scale(.94);transition:transform .45s var(--enter)}
.lightbox.open img{transform:none}
.lb-cap{position:absolute;bottom:4vh;left:0;right:0;text-align:center;color:var(--dim);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.lb-close{position:absolute;top:22px;right:24px;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line-2);color:var(--bone);font-size:1.3rem;
  display:flex;align-items:center;justify-content:center;transition:.25s}
.lb-close:hover{background:var(--cyan);color:#04121c;border-color:var(--cyan)}

/* =====================================================================
   ABOUT
   ===================================================================== */
.about{background:radial-gradient(ellipse 62% 54% at 22% 48%,rgba(22,52,86,.4),transparent 70%)}
.about-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(36px,5vw,64px);
  align-items:center;perspective:1300px}
.about-media{position:relative}
.about-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-2);box-shadow:var(--sh-3);z-index:2;aspect-ratio:4/5}
.about-frame img{width:100%;height:100%;object-fit:cover}
.about-frame::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(4,7,12,.55),transparent 52%)}
.about-badge{
  position:absolute;z-index:4;bottom:20px;left:-16px;
  background:rgba(12,20,31,.92);backdrop-filter:blur(14px);border:1px solid var(--line-2);
  padding:12px 18px;border-radius:14px;box-shadow:var(--sh-2);
  font-family:var(--dsp);font-weight:600;color:#fff;font-size:.92rem;
}
.about-copy h2{font-size:clamp(1.8rem,4.2vw,2.9rem);color:#fff;margin-bottom:18px}
.about-copy p{color:var(--dim);margin-bottom:15px;font-size:1.02rem}
.about-points{margin:24px 0 30px;display:flex;flex-direction:column;gap:11px}
.pt{display:flex;align-items:flex-start;gap:12px;color:var(--bone);font-size:.96rem}
.pt .tick{flex:0 0 auto;width:21px;height:21px;border-radius:50%;margin-top:2px;
  background:rgba(43,184,232,.14);border:1px solid var(--line-2);color:var(--cyan);
  display:flex;align-items:center;justify-content:center;font-size:.7rem}

/* =====================================================================
   SERVICE AREA
   ===================================================================== */
.area{background:radial-gradient(ellipse 66% 56% at 78% 44%,rgba(29,91,152,.34),transparent 70%)}
.area-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(36px,5vw,58px);align-items:center}
.area-copy h2{font-size:clamp(1.8rem,4.2vw,2.9rem);color:#fff;margin-bottom:16px}
.area-copy p{color:var(--dim);margin-bottom:24px;font-size:1.02rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.chips span{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;
  background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--dim);
  padding:8px 14px;border-radius:100px;transition:.28s var(--enter);cursor:default;
}
.chips span:hover{background:rgba(43,184,232,.14);border-color:var(--cyan);color:#fff;transform:translateY(-2px)}
.area-map{position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-2);box-shadow:var(--sh-3)}
.area-map img{width:100%;filter:saturate(.55) brightness(.82) contrast(1.08)}
.area-map::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(43,184,232,.14),transparent 55%,rgba(4,7,12,.5))}
.map-pin{position:absolute;top:40%;left:34%;width:14px;height:14px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 0 4px rgba(43,184,232,.28),0 0 20px var(--cyan);z-index:3}
.map-pin .ping{position:absolute;inset:0;border-radius:50%;background:var(--cyan);animation:pinp 2.4s infinite}
@keyframes pinp{0%{transform:scale(1);opacity:.65}100%{transform:scale(4);opacity:0}}

/* =====================================================================
   RUB TO CLEAN
   ===================================================================== */
.rub{background:radial-gradient(ellipse 70% 50% at 50% 44%,rgba(20,46,78,.44),transparent 72%)}
.rub-stage{
  position:relative;max-width:840px;margin:0 auto;aspect-ratio:1000/860;
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-3);
  border:1px solid var(--line-2);background:var(--panel);cursor:none;touch-action:none;
}
.rub-base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#rubCanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.rub-cursor{position:absolute;top:0;left:0;height:140px;width:auto;pointer-events:none;z-index:5;
  opacity:0;filter:drop-shadow(0 10px 16px rgba(0,0,0,.7));transition:opacity .25s}
.rub-progress{
  position:absolute;top:14px;left:14px;z-index:6;
  background:rgba(4,7,12,.82);backdrop-filter:blur(8px);border:1px solid var(--line-2);
  color:var(--cyan);font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;
  padding:8px 14px;border-radius:100px;
}
.rub-done{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:7;
  color:#fff;font-family:var(--dsp);font-weight:800;font-size:clamp(1.3rem,3.5vw,1.9rem);
  background:rgba(4,7,12,.55);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .55s;pointer-events:none;text-align:center;line-height:1.25;
}
.rub-done.show{opacity:1}
.rub-hint{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:6;
  background:var(--cyan);color:#04121c;padding:9px 18px;border-radius:100px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 10px 26px -10px rgba(43,184,232,.9);transition:opacity .4s;
  animation:bobflat 2.6s ease-in-out infinite;
}
@keyframes bobflat{50%{transform:translateX(-50%) translateY(-7px)}}

/* =====================================================================
   REVIEWS
   ===================================================================== */
.reviews{background:radial-gradient(ellipse 80% 46% at 50% 50%,rgba(17,36,60,.4),transparent 72%)}
.agg{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:10px}
.agg p{color:var(--dim);font-size:.95rem}
.agg strong{color:#fff}
.rev-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:960px;margin:0 auto;perspective:1200px}
.rev{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 28px;
  transition:transform .45s var(--enter),box-shadow .45s,border-color .45s;position:relative;overflow:hidden;
}
.rev::before{content:"\201C";position:absolute;top:-18px;right:14px;font-family:var(--dsp);
  font-size:7rem;color:rgba(43,184,232,.07);line-height:1}
.rev:hover{transform:translateY(-6px);border-color:var(--line-2);
  box-shadow:var(--sh-3),0 0 54px -28px rgba(43,184,232,.6)}
.rev blockquote{color:var(--dim);font-size:.97rem;margin:12px 0 20px;line-height:1.68;position:relative}
.rev figcaption{display:flex;align-items:center;gap:12px}
.av{width:42px;height:42px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(135deg,var(--navy),var(--cyan));color:#04121c;
  display:flex;align-items:center;justify-content:center;font-family:var(--dsp);font-weight:700}
.rev figcaption b{display:block;color:#fff;font-size:.94rem;font-weight:600}
.rev figcaption small{color:var(--faint);font-family:var(--mono);font-size:.68rem}
.rev-more{display:block;text-align:center;margin-top:40px;font-family:var(--mono);
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}

/* =====================================================================
   BOOKING
   ===================================================================== */
.book{background:radial-gradient(ellipse 70% 60% at 22% 46%,rgba(29,91,152,.34),transparent 70%)}
.book-wrap{display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(34px,4.5vw,56px);align-items:start}
.book-intro h2{font-size:clamp(1.9rem,4.2vw,2.9rem);color:#fff;margin-bottom:16px}
.book-intro > p{color:var(--dim);margin-bottom:26px;font-size:1.02rem}

/* the "here's who's coming" photo card */
.book-photo{
  position:relative;border-radius:var(--r-lg);overflow:hidden;margin-bottom:26px;
  border:1px solid var(--line-2);box-shadow:var(--sh-3);aspect-ratio:3/4;max-width:330px;
}
.book-photo img{width:100%;height:100%;object-fit:cover}
.book-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(4,7,12,.95) 4%,rgba(4,7,12,.2) 42%,transparent 66%)}
.book-photo figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 20px}
.book-photo .bp-tag{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);
  background:rgba(43,184,232,.12);border:1px solid var(--line-2);
  padding:5px 11px;border-radius:100px;margin-bottom:9px;
}
.book-photo b{display:block;font-family:var(--dsp);font-weight:600;color:#fff;font-size:1.02rem}
.book-photo small{display:block;color:var(--dim);font-size:.82rem;margin-top:3px}

.book-perks{list-style:none;display:flex;flex-direction:column;gap:13px;margin-bottom:30px}
.book-perks li{display:flex;align-items:center;gap:13px;color:var(--bone);font-size:.96rem}
.book-perks .ico{flex:0 0 auto;width:34px;height:34px;border-radius:11px;
  background:rgba(43,184,232,.1);border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;font-size:.98rem}
.book-alt p{color:var(--faint);margin-bottom:11px;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
.book-alt-btns{display:flex;gap:10px;flex-wrap:wrap}

.book-card{
  background:var(--panel);border:1px solid var(--line-2);color:var(--bone);
  border-radius:var(--r-lg);padding:clamp(22px,3vw,34px);box-shadow:var(--sh-3);
}
.steps{display:flex;align-items:center;gap:7px;margin-bottom:30px}
.step-dot{display:flex;flex-direction:column;align-items:center;gap:5px;flex:0 0 auto}
.step-dot b{width:33px;height:33px;border-radius:50%;background:rgba(255,255,255,.05);
  border:1px solid var(--line);color:var(--faint);display:flex;align-items:center;
  justify-content:center;font-family:var(--mono);font-size:.82rem;transition:.35s var(--enter)}
.step-dot span{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);transition:.3s}
.step-dot.active b{background:linear-gradient(135deg,var(--cyan),var(--navy-2));color:#04121c;
  border-color:transparent;box-shadow:0 8px 20px -8px rgba(43,184,232,.9)}
.step-dot.active span{color:var(--cyan)}
.step-bar{flex:1;height:2px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden}
.step-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--cyan-hi));
  transition:width .5s var(--enter)}
.fstep{animation:fadein .45s var(--enter)}
@keyframes fadein{from{opacity:0;transform:translateX(16px)}}
.fstep h3{font-size:1.24rem;color:#fff;margin-bottom:18px;font-weight:600}
.pick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:20px}
.pick{
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:13px;
  padding:14px 9px;font-family:var(--body);font-weight:500;font-size:.86rem;color:var(--dim);
  transition:.25s var(--enter);text-align:center;line-height:1.35;
}
.pick:hover{border-color:var(--line-2);color:#fff;background:rgba(255,255,255,.06)}
.pick.sel{border-color:var(--cyan);background:rgba(43,184,232,.14);color:#fff;
  box-shadow:0 0 0 3px rgba(43,184,232,.14)}
.pick .em{display:block;font-size:1.15rem;margin-bottom:5px}
.seg{display:flex;gap:8px;margin-top:7px}
.pick.sm{flex:1;padding:11px 8px;font-size:.85rem}
/* field label: standalone by default, ".field-w" when it wraps a control group */
.field{display:block;margin-bottom:8px;font-family:var(--mono);font-weight:500;
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.field-w{margin-bottom:16px}
.field small{text-transform:none;letter-spacing:0;font-family:var(--body)}

.book-card input,.book-card select,.book-card textarea{
  width:100%;margin-bottom:15px;padding:13px 15px;border:1px solid var(--line);
  border-radius:12px;font-family:var(--body);font-size:.98rem;letter-spacing:0;text-transform:none;
  color:var(--bone);background:rgba(255,255,255,.03);transition:.25s;
}
.book-card textarea{resize:vertical;min-height:64px}
.book-card input::placeholder,.book-card textarea::placeholder{color:#4a5c6e}
.book-card select option{background:var(--panel-2);color:var(--bone)}
.book-card input:focus,.book-card select:focus,.book-card textarea:focus{
  outline:none;border-color:var(--cyan);background:rgba(43,184,232,.06);
  box-shadow:0 0 0 3px rgba(43,184,232,.13)}
/* date input needs its picker icon lightened for dark mode */
.book-card input[type="date"]{color-scheme:dark}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fnav{display:flex;justify-content:space-between;align-items:center;margin-top:24px;gap:10px}
.fnav.center{justify-content:center;flex-wrap:wrap}
.ferr{color:#ff6b5b;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;min-height:1.1em}
.confirm{text-align:center;padding:12px 0}
.check{width:64px;height:64px;border-radius:50%;margin:0 auto 18px;
  background:linear-gradient(135deg,#3ce08d,var(--cyan));color:#04121c;font-size:1.9rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 44px -8px rgba(60,224,141,.8);animation:pop .55s cubic-bezier(.2,1.5,.4,1)}
@keyframes pop{from{transform:scale(0)}}
.confirm > p{color:var(--dim);margin-bottom:20px}
.summary{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;text-align:left;font-size:.9rem;color:var(--dim);margin-bottom:22px}
.summary div{display:flex;justify-content:space-between;gap:14px;padding:7px 0;
  border-bottom:1px solid var(--line)}
.summary div:last-child{border:0}
.summary span{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.summary b{color:#fff;font-weight:500;text-align:right}

/* =====================================================================
   CTA BAND + FOOTER
   ===================================================================== */
.cta-band{position:relative;overflow:hidden;text-align:center;
  padding:clamp(58px,8vw,88px) 0;
  background:linear-gradient(115deg,var(--navy),var(--cyan-deep) 55%,var(--navy))}
.cta-band::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 22% 18%,rgba(255,255,255,.2),transparent 44%)}
.cta-band::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(0,0,0,.14) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,0,0,.14) 1px,transparent 1px);
  background-size:44px 44px;opacity:.4}
.cta-inner{position:relative;z-index:2}
.cta-inner h2{color:#fff;font-size:clamp(1.6rem,4vw,2.6rem);margin-bottom:12px;
  text-shadow:0 4px 30px rgba(0,0,0,.35)}
.cta-inner > p{color:rgba(255,255,255,.85);margin-bottom:28px;font-size:1rem}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.social-btn{display:inline-flex;align-items:center;gap:9px;padding:16px 26px;border-radius:100px;
  font-family:var(--dsp);font-weight:600;color:#fff;background:rgba(0,0,0,.2);
  border:1px solid rgba(255,255,255,.35);transition:.3s var(--enter);backdrop-filter:blur(6px)}
.social-btn:hover{transform:translateY(-3px);background:rgba(0,0,0,.35)}
.social-btn.call:hover{background:#3ce08d;border-color:#3ce08d;color:#04211a}
.social-btn.text:hover{background:#fff;color:var(--navy)}
.social-btn.fb:hover{background:#1877f2;border-color:#1877f2}

.footer{background:var(--void);border-top:1px solid var(--line);
  color:var(--dim);padding:clamp(48px,6vw,70px) 0 26px;position:relative;z-index:2}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
.foot-logo{height:auto;width:170px;margin-bottom:16px}
.foot-tag{color:var(--faint);font-size:.92rem;max-width:270px;line-height:1.7}
.footer h4{font-family:var(--mono);font-weight:500;color:var(--cyan);margin-bottom:16px;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase}
.footer a{display:block;color:var(--dim);padding:5px 0;font-size:.92rem;transition:.22s}
.footer a:hover{color:var(--cyan-hi);transform:translateX(3px)}
.foot-bottom{max-width:var(--maxw);margin:44px auto 0;padding:22px 24px 0;
  border-top:1px solid var(--line);display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.08em;color:var(--faint)}

/* ===== sticky mobile CTA ===== */
.mobile-cta{position:fixed;bottom:0;left:0;right:0;z-index:90;display:none;gap:10px;
  background:rgba(7,12,20,.94);backdrop-filter:blur(18px);border-top:1px solid var(--line-2);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
.mc{flex:1;text-align:center;padding:14px;border-radius:13px;font-family:var(--dsp);font-weight:600;font-size:.94rem}
.mc.call{background:rgba(255,255,255,.05);border:1px solid var(--line-2);color:var(--bone)}
.mc.book{background:linear-gradient(115deg,var(--cyan),var(--navy-2));color:#04121c;font-weight:700}

/* ===== custom cursor (desktop only) ===== */
.cursor-dot{position:fixed;top:0;left:0;width:7px;height:7px;border-radius:50%;background:var(--cyan);
  z-index:150;pointer-events:none;mix-blend-mode:screen;transition:width .3s,height .3s,opacity .3s;opacity:0}
.cursor-ring{position:fixed;top:0;left:0;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(43,184,232,.55);z-index:149;pointer-events:none;opacity:0;
  transition:width .35s var(--enter),height .35s var(--enter),opacity .3s,background .3s}
body.cursor-on .cursor-dot,body.cursor-on .cursor-ring{opacity:1}
body.cursor-lg .cursor-ring{width:62px;height:62px;background:rgba(43,184,232,.1)}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:1024px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .ba-grid{grid-template-columns:repeat(2,1fr)}
  .pf-gallery{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:42px;text-align:center}
  .hero-copy{order:2}.hero-media{order:1}
  .hero-cta,.hero-trust,.eyebrow{justify-content:center}
  .hero-trust{justify-content:center}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-stack{width:min(100%,340px)}
  .about-grid,.area-grid,.book-wrap{grid-template-columns:1fr;gap:40px}
  .area-map{order:-1}
  .book-photo{max-width:100%}
  .showcase-head{flex-direction:column;align-items:flex-start}
}
@media(max-width:760px){
  /* shorter hold on phones - 300vh of pinned scroll feels like a stall */
  .manifesto-track{height:230vh}
  .nav-links,.nav-right{display:none}
  .hamburger{display:flex}
  .trust-inner{grid-template-columns:1fr 1fr;gap:30px 14px}
  .stat::after{display:none}
  .svc-grid{grid-template-columns:1fr}
  .ba-grid{grid-template-columns:1fr;gap:24px}
  .pf-gallery{grid-template-columns:repeat(2,1fr)}
  .rev-grid{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .mobile-cta{display:flex}
  body{padding-bottom:76px}
  .cta-row{flex-direction:column;align-items:stretch}
  .foot-bottom{flex-direction:column;text-align:center;align-items:center}
  .b-rating{left:-2%}.b-come{right:-2%}
  .cursor-dot,.cursor-ring{display:none}
  .rub-stage{aspect-ratio:1/1}
  .rub-cursor{height:104px}
}
@media(max-width:460px){
  .pick-grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr}
  .pf-gallery{grid-template-columns:1fr 1fr;gap:12px}
  .float-badge{padding:9px 12px}
  .float-badge b{font-size:.8rem}
  .float-badge small{font-size:.64rem}
}

/* =====================================================================
   REDUCED MOTION - everything degrades to a clean static site
   ===================================================================== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .reveal{opacity:1;transform:none}
  .hero-title .ln > span{transform:none}
  .hero-drops,.glow-ring,.sweep,.grain,.bg-fx::before{display:none}
  .marquee-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;white-space:normal}
  .cursor-dot,.cursor-ring{display:none}
  .curtain{display:none}
  /* no pinning: the manifesto becomes a plain, fully readable block */
  .manifesto-track{height:auto}
  .manifesto-sticky{position:static;height:auto;padding:clamp(80px,12vw,140px) 0}
  .manifesto-line span{color:var(--bone)}
  .manifesto-cue{display:none}
}