/* ============================================================
   TIDEWATER PRESSURE WASHING — showstopper design system v2
   Cinematic storm-at-sea palette, layered parallax, bold type.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap');

:root{
  /* color — cinematic storm-at-sea */
  --abyss:      #12263A;
  --abyss-2:    #19354B;
  --deep:       #1A435D;
  --foam:       #F4FBFA;
  --foam-dim:   #E4EFEE;
  --ink:        #0B1B20;
  --ink-soft:   #4A5568;
  --cyan:       #70C1E8;
  --cyan-dk:    #247BA0;
  --coral:      #247BA0;
  --coral-dk:   #1C607D;
  --line:       rgba(11,27,32,0.12);
  --line-light: rgba(244,251,250,0.18);

  --display: 'Bricolage Grotesque', sans-serif;
  --body: 'Plus Jakarta Sans', sans-serif;
  --mono: 'Plus Jakarta Sans', sans-serif;

  --radius: 10px;
  --container: 1220px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--body);
  background: var(--foam);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}

.wrap{max-width: var(--container); margin: 0 auto; padding: 0 32px;}

h1,h2,h3,h4{
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.03;
  color: var(--abyss);
}
h1{font-size: clamp(3rem, 7.5vw, 6.4rem); font-weight:800; letter-spacing:-0.02em;}
h2{font-size: clamp(2.1rem, 4.6vw, 3.6rem);}
h3{font-size: clamp(1.25rem, 2.2vw, 1.55rem); font-weight:700;}

.eyebrow{
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan-dk);
  font-weight: 700;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width: 26px; height: 2px;
  background: var(--coral);
  display:inline-block;
}

p.lead{font-size: 1.18rem; color: var(--ink-soft); max-width: 58ch; font-weight: 400;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family: var(--body); font-weight:700; font-size:1rem;
  padding: 17px 32px;
  border-radius: 100px;
  border: 2px solid transparent;
  cursor:pointer;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
}
.btn-primary{
  background: var(--coral);
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(36,123,160,0.6);
}
.btn-primary:hover{ transform: translateY(-3px) scale(1.02); box-shadow: 0 14px 30px -8px rgba(36,123,160,0.7); }

.btn-ghost{
  background: rgba(255,255,255,0.06);
  border-color: var(--line-light);
  color: #fff;
  backdrop-filter: blur(6px);
}
.btn-ghost:hover{ background: rgba(255,255,255,0.14); border-color: var(--cyan); }

.btn-dark-ghost{
  background: transparent;
  border-color: var(--abyss);
  color: var(--abyss);
}
.btn-dark-ghost:hover{ background: var(--abyss); color:#fff; }

.btn-light{ background: #fff; color: var(--abyss); }
.btn-light:hover{ transform: translateY(-3px) scale(1.02); }

/* ---------- header ---------- */
header.site{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
  padding: 6px 0;
}
header.site .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top: 16px; padding-bottom: 16px;
}
header.site.scrolled{
  background: rgba(18,38,58,0.85);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px -12px rgba(0,0,0,0.4);
}
.logo{
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.55rem;
  color: #fff;
  letter-spacing: -0.01em;
  display:flex; align-items:center; gap:10px;
  flex-shrink: 0;
}
.logo-img{
  height: 40px;
  width: auto;
  display:block;
}
nav.primary ul{ display:flex; gap: 38px; align-items:center; }
nav.primary a{
  font-weight: 600; font-size: 0.94rem;
  color: rgba(255,255,255,0.82);
  position: relative;
  padding: 4px 0;
}
nav.primary a::after{
  content:""; position:absolute; left:0; bottom:-2px;
  width:0; height:2px; background: var(--cyan);
  transition: width .18s ease;
}
nav.primary a:hover::after, nav.primary a.active::after{ width:100%; }
nav.primary a.active, nav.primary a:hover{ color: #fff; }
.lang-toggle{ display:inline-flex; align-items:center; gap:6px;
  font-family: var(--body); font-weight: 700; font-size: 0.82rem;
  color: #fff; background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 100px; padding: 7px 14px; cursor: pointer;
  transition: background .18s ease;
}
.lang-toggle:hover{ background: rgba(255,255,255,0.2); }
header.site.on-light .lang-toggle{ color: var(--abyss); background: rgba(11,27,32,0.06); border-color: var(--line); }
header.site.on-light .lang-toggle:hover{ background: rgba(11,27,32,0.12); }
@media (max-width: 640px){ .lang-toggle{ padding: 6px 11px; font-size: 0.78rem; } }

.nav-cta{display:flex; align-items:center; gap:20px;}
.nav-phone{
  font-family: var(--mono); font-weight:600; font-size:0.92rem;
  color: #fff;
}
.menu-btn{display:none; background:none; border:none; cursor:pointer; flex-shrink:0; position:relative; z-index:5;}

header.site.on-light{ background: rgba(244,251,250,0.9); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
header.site.on-light .logo{ color: var(--abyss); }
header.site.on-light nav.primary a{ color: var(--ink-soft); }
header.site.on-light nav.primary a.active, header.site.on-light nav.primary a:hover{ color: var(--abyss); }
header.site.on-light .nav-phone{ color: var(--abyss); }
header.site.on-light .btn-ghost{ background: transparent; border-color: var(--abyss); color: var(--abyss); }
header.site.on-light .btn-ghost:hover{ background: var(--abyss); color: #fff; }

@media (max-width: 880px){
  nav.primary{ display:none; }
  .nav-phone{ display:none; }
  .menu-btn{ display:block; }
}

/* ================= CINEMATIC VIDEO HERO ================= */
.hero-cinema{
  position: relative;
  height: clamp(600px, 100svh, 1000px);
  display:flex;
  align-items:flex-end;
  overflow: hidden;
  background: var(--abyss);
}
.hero-media{ position: absolute; inset: 0; z-index: 0; }
.hero-media video, .hero-media .poster-fallback{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.poster-fallback{
  background:
    radial-gradient(ellipse at 30% 20%, rgba(112,193,232,0.25), transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(36,123,160,0.18), transparent 50%),
    linear-gradient(160deg, #12263A 0%, #0E3644 45%, #124655 75%, #0A2530 100%);
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(18,38,58,0.35) 0%, rgba(18,38,58,0.35) 40%, rgba(18,38,58,0.96) 100%);
  z-index: 1;
}
.hero-content{ position: relative; z-index: 2; padding: 200px 0 90px; width: 100%; }
.hero-content .eyebrow{
  color: var(--cyan); margin-bottom: 22px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
  opacity: 0; animation: heroSlideUp .8s cubic-bezier(.2,.8,.2,1) .15s forwards;
}
.hero-content h1{
  color: #fff; max-width: 16ch;
  text-shadow: 0 4px 26px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.5);
  opacity: 0; animation: heroSlideUp .85s cubic-bezier(.2,.8,.2,1) .28s forwards;
}
.hero-content p.lead{
  color: rgba(244,251,250,0.82); margin-top: 22px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
  opacity: 0; animation: heroSlideUp .85s cubic-bezier(.2,.8,.2,1) .42s forwards;
}
.hero-cta-row{
  display:flex; gap:16px; margin-top: 34px; flex-wrap:wrap;
  opacity: 0; animation: heroSlideUp .85s cubic-bezier(.2,.8,.2,1) .56s forwards;
}
.hero-note{
  margin-top: 40px; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em;
  color: rgba(244,251,250,0.5); display:flex; align-items:center; gap:10px;
  text-shadow: 0 1px 10px rgba(0,0,0,0.5);
  opacity: 0; animation: heroSlideUp .85s cubic-bezier(.2,.8,.2,1) .68s forwards;
}
@keyframes heroSlideUp{
  from{ opacity: 0; transform: translateY(26px); }
  to{ opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .hero-content .eyebrow, .hero-content h1, .hero-content p.lead, .hero-cta-row, .hero-note{
    animation: none; opacity: 1;
  }
}

/* ---------- mobile-only hero recap: shown instead of the video-overlay text on small
   screens, where the full heading + lead + buttons was covering the video ---------- */
.hero-mobile-recap{
  display: none;
  background: var(--abyss);
  padding: 44px 0 48px;
}
.hero-mobile-recap .eyebrow{ color: var(--cyan); margin-bottom: 16px; }
.hero-mobile-recap h1{ color: #fff; font-size: clamp(1.9rem, 7vw, 2.4rem); }
.hero-mobile-recap p.lead{ color: rgba(244,251,250,0.82); margin-top: 16px; font-size: 1rem; }
.hero-mobile-recap .hero-cta-row{ margin-top: 26px; opacity: 1; animation: none; }
.hero-mobile-recap .hero-note{
  margin-top: 26px; opacity: 1; animation: none;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em;
  color: rgba(244,251,250,0.55); display:flex; align-items:center; gap:10px;
}
.hero-note svg{ flex-shrink:0; }

/* ================= PARALLAX SECTIONS ================= */
.parallax{ position: relative; min-height: 78vh; display:flex; align-items:center; overflow: hidden; background: var(--abyss); }
.parallax-layer{ position:absolute; inset: -12% -6%; will-change: transform; z-index: 0; }
.pl-a{
  background: radial-gradient(ellipse 60% 50% at 25% 30%, rgba(112,193,232,0.22), transparent 60%),
              radial-gradient(ellipse 55% 45% at 80% 75%, rgba(36,123,160,0.16), transparent 55%),
              linear-gradient(150deg, #12263A, #1A435D 60%, #0A2A34);
}
.pl-c{
  background-image:
    radial-gradient(circle 3px at 12% 22%, rgba(255,255,255,0.5), transparent 100%),
    radial-gradient(circle 2px at 28% 68%, rgba(255,255,255,0.35), transparent 100%),
    radial-gradient(circle 4px at 46% 15%, rgba(255,255,255,0.4), transparent 100%),
    radial-gradient(circle 2px at 63% 52%, rgba(255,255,255,0.3), transparent 100%),
    radial-gradient(circle 3px at 78% 30%, rgba(255,255,255,0.45), transparent 100%),
    radial-gradient(circle 2px at 88% 74%, rgba(255,255,255,0.3), transparent 100%),
    radial-gradient(circle 3px at 34% 88%, rgba(255,255,255,0.4), transparent 100%),
    radial-gradient(circle 2px at 95% 12%, rgba(255,255,255,0.35), transparent 100%);
}
.parallax-content{ position: relative; z-index: 2; padding: 100px 0; }
.parallax-content .eyebrow{ color: var(--cyan); }
.parallax-content h2{ color:#fff; margin-top:16px; max-width: 15ch; }
.parallax-content p.lead{ color: rgba(244,251,250,0.78); margin-top: 18px; }

.stat-strip{ display:flex; gap: 56px; margin-top: 46px; flex-wrap:wrap; }
.stat-strip .stat{ display:flex; flex-direction:column; gap: 4px; }
.stat-strip .num{ font-family: var(--display); font-weight:800; font-size: clamp(2rem, 4vw, 3rem); color: #fff; line-height:1; }
.stat-strip .num span{ color: var(--cyan); }
.stat-strip .lbl{ font-family: var(--mono); font-size:0.78rem; color: rgba(244,251,250,0.6); letter-spacing:0.04em; }

/* ================= sections (light) ================= */
section{ padding: 110px 0; }
.section-head{ max-width: 660px; margin-bottom: 54px; }
.section-head .eyebrow{ margin-bottom: 16px; }
.bg-abyss{ background: var(--abyss); color: #fff; }
.bg-abyss h2, .bg-abyss h3{ color: #fff; }
.bg-abyss .lead{ color: rgba(244,251,250,0.78); }
.bg-foam{ background: var(--foam-dim); position: relative; overflow: hidden; }
.bg-foam::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background-image: url('bg-droplets.png');
  background-size: 420px 420px;
  background-position: center;
  background-repeat: repeat;
  opacity: 0.18;
}
.bg-foam .wrap{ position: relative; z-index: 1; }
.bg-foam .reviews-marquee{ position: relative; z-index: 1; }

/* ---------- before/after slider ---------- */
.ba-wrap{ padding: 120px 0; background: var(--foam); }
.ba-slider{
  position: relative; width: 100%; aspect-ratio: 16/8.5;
  border-radius: 20px; overflow: hidden; margin-top: 40px;
  cursor: ew-resize; box-shadow: 0 40px 90px -30px rgba(18,38,58,0.5); user-select: none;
  touch-action: none;
}
.ba-pane{ position:absolute; inset:0; display:flex; align-items:flex-end; }
.ba-after{
  background:
    linear-gradient(180deg, rgba(18,38,58,0.05), rgba(18,38,58,0.5)),
    linear-gradient(135deg, #DFF4F3 0%, #A9E4E1 45%, #58C9C4 100%);
}
.ba-before{
  background:
    linear-gradient(180deg, rgba(20,25,15,0.2), rgba(30,26,12,0.6)),
    linear-gradient(135deg, #8a7a54 0%, #6b5c39 45%, #4a3f28 100%);
  filter: saturate(0.75) contrast(1.05);
}
.ba-before::before{
  content:"";
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.15  0 0 0 0 0.12  0 0 0 0 0.06  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.85;
}
.ba-label{
  position: relative; margin: 24px;
  font-family: var(--mono); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: #fff;
  background: rgba(18,38,58,0.55); padding: 8px 16px; border-radius: 100px;
  backdrop-filter: blur(3px);
}
.ba-clip{ position:absolute; inset:0; overflow:hidden; width: 50%; }
.ba-handle{ position:absolute; top:0; bottom:0; left:50%; width: 3px; background: #fff; transform: translateX(-50%); }
.ba-handle::after{
  content: "⇔"; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width: 54px; height: 54px; background: var(--coral); color:#fff; border-radius: 50%;
  display:flex; align-items:center; justify-content:center; font-size: 1.2rem;
  box-shadow: 0 10px 24px rgba(0,0,0,0.3);
}
.ba-hint{ font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); text-align:center; margin-top: 16px; letter-spacing:0.04em; }

.ba-before.ba-real::before{ display:none; }
.ba-pane.ba-real{ background-size: cover; background-position: center; }

.gauge-row{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
@media (max-width: 880px){ .gauge-row{ grid-template-columns: repeat(2,1fr);} }
.gauge{ display:flex; flex-direction:column; align-items:center; text-align:center; gap: 16px; }
.gauge-dial{
  width: 128px; height: 128px; border-radius: 50%; position: relative;
  background: conic-gradient(var(--coral) calc(var(--pct,70) * 1%), rgba(255,255,255,0.12) 0);
  display:flex; align-items:center; justify-content:center;
}
.gauge-dial::before{ content:""; position:absolute; inset: 11px; border-radius: 50%; background: var(--abyss); }
.gauge-val{ position: relative; font-family: var(--display); font-weight:700; font-size: 1.5rem; color: #fff; }
.gauge-label{ font-size: 0.9rem; color: rgba(244,251,250,0.65); max-width: 17ch; }

/* ---------- orbiting "running" dot on the pressure dials ---------- */
.gauge-dial::after{
  content:"";
  position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(circle 4.5px at 50% 5px, #fff, #fff 55%, transparent 60%);
  filter: drop-shadow(0 0 5px var(--cyan)) drop-shadow(0 0 10px rgba(112,193,232,0.65));
  animation: gaugeOrbit 3.4s linear infinite;
  pointer-events: none;
}
.gauge:nth-child(2) .gauge-dial::after{ animation-duration: 4.1s; animation-direction: reverse; }
.gauge:nth-child(3) .gauge-dial::after{ animation-duration: 2.8s; }
.gauge:nth-child(4) .gauge-dial::after{ animation-duration: 3.7s; animation-direction: reverse; }
@keyframes gaugeOrbit{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .gauge-dial::after{ animation: none; } }

/* ---------- fixed background section (image stays pinned while cards scroll over it) ---------- */
.fixed-bg{
  position: relative;
  background-image: linear-gradient(180deg, rgba(18,38,58,0.45), rgba(18,38,58,0.68)), url('services-bg.jpg');
  background-size: cover;
  background-position: center 30%;
  background-attachment: fixed;
  color: #fff;
}
.fixed-bg .section-head h2{ color: #fff; }
.fixed-bg .section-head .lead{ color: rgba(244,251,250,0.8); }
@media (max-width: 880px){
  /* background-attachment:fixed is unreliable on mobile Safari — fall back to a normal scrolling background */
  .fixed-bg{ background-attachment: scroll; }
}

/* ---------- service cards ---------- */
.card-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 900px){ .card-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .card-grid{ grid-template-columns: 1fr; } }
.svc-card{
  background:#fff; border: 1px solid var(--line); border-radius: 16px; padding: 34px 28px;
  box-shadow: 0 22px 44px -30px rgba(18,38,58,0.28), 0 2px 8px -2px rgba(18,38,58,0.06);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .22s ease;
}
.svc-card:hover{ transform: translateY(-8px); box-shadow: 0 34px 64px -28px rgba(18,38,58,0.4), 0 4px 12px -2px rgba(18,38,58,0.1); border-color: var(--cyan); }
.svc-icon{
  width: 52px; height: 52px; border-radius: 12px;
  background: linear-gradient(135deg, var(--cyan), var(--cyan-dk));
  display:flex; align-items:center; justify-content:center; margin-bottom: 20px; color: #fff;
}
.svc-card h3{ margin-bottom: 12px; }
.svc-card p{ color: var(--ink-soft); font-size: 0.97rem; }
.svc-price{ font-family: var(--mono); font-weight:600; font-size: 0.88rem; color: var(--coral-dk); margin-top: 16px; display:block; }

/* ---------- tips & guides (blog teaser) ---------- */
.blog-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 900px){ .blog-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .blog-grid{ grid-template-columns: 1fr; } }
.blog-card{
  display:block; background:#fff; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 22px 44px -30px rgba(18,38,58,0.28), 0 2px 8px -2px rgba(18,38,58,0.06);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .22s ease;
}
.blog-card:hover{ transform: translateY(-8px); box-shadow: 0 34px 64px -28px rgba(18,38,58,0.4), 0 4px 12px -2px rgba(18,38,58,0.1); border-color: var(--cyan); }
.blog-card-media{ position:relative; height: 190px; overflow:hidden; background: var(--abyss); }
.blog-card-media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.blog-card:hover .blog-card-media img{ transform: scale(1.08); }
.blog-tag{
  position:absolute; top:14px; left:14px; background: rgba(18,38,58,0.72); backdrop-filter: blur(4px);
  color:#fff; font-family: var(--mono); font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase;
  padding: 6px 12px; border-radius: 999px;
}
.blog-card-body{ padding: 24px 24px 26px; }
.blog-card-body h3{ font-size: 1.12rem; margin-bottom: 10px; line-height:1.25; }
.blog-card-body p{ color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 18px; }
.blog-read{ display:inline-flex; align-items:center; gap:6px; font-family: var(--mono); font-size: 0.82rem; font-weight:600; color: var(--coral-dk); }
.blog-read svg{ transition: transform .2s ease; }
.blog-card:hover .blog-read svg{ transform: translateX(4px); }

/* ---------- process rail ---------- */
.rail{ display:grid; grid-template-columns: repeat(4,1fr); gap: 0; position: relative; }
@media (max-width: 880px){ .rail{ grid-template-columns:1fr; gap: 36px; } }
.rail::before{ content:""; position:absolute; top: 28px; left:0; right:0; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 18px); }
@media (max-width: 880px){ .rail::before{ display:none; } }
.rail-step{ position:relative; padding-right: 20px; }
.rail-num{
  font-family: var(--display); font-weight:700; font-size: 0.95rem;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--abyss); color: var(--cyan);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 20px; position:relative; z-index:1;
}
.rail-step h4{ font-family: var(--body); font-weight:700; font-size:1.08rem; color:var(--abyss); margin-bottom:8px; }
.rail-step p{ color: var(--ink-soft); font-size: 0.94rem; }

/* ---------- testimonial ---------- */
.testi{ background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 30px 32px; box-shadow: 0 30px 60px -30px rgba(18,38,58,0.35), 0 4px 14px -4px rgba(18,38,58,0.08); transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease; }
.testi:hover{ transform: translateY(-4px); box-shadow: 0 36px 70px -28px rgba(18,38,58,0.42), 0 6px 16px -4px rgba(18,38,58,0.1); }
.testi p{ font-size: 1.08rem; color: var(--ink); font-weight: 500; }
.testi .who{ margin-top: 16px; font-family: var(--mono); font-size: 0.82rem; color: var(--ink-soft); }
.stars{ color: var(--coral); letter-spacing: 3px; margin-bottom:14px; font-size: 1.1rem; }

/* ---------- wave dividers (soften hard seams between color blocks) ---------- */
.wave-divider{ display:block; width:100%; height:64px; line-height:0; }
.wave-divider svg{ width:100%; height:100%; display:block; }
.wave-divider--overlap{ display:none; }

/* ---------- trust ticker: scrolling strip used to separate two photo/video
   sections where a color-matched curve can't work reliably ---------- */
.trust-ticker{
  position: relative; z-index: 3;
  background: linear-gradient(120deg, #19354B, var(--abyss) 55%, #0A2530);
  box-shadow: 0 -18px 34px -18px rgba(0,0,0,0.55), 0 18px 34px -18px rgba(0,0,0,0.55);
  overflow: hidden;
  padding: 15px 0;
}
.trust-ticker-track{
  display: flex; width: max-content;
  animation: tickerScroll 26s linear infinite;
  will-change: transform;
}
.trust-ticker-item{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(244,251,250,0.88); white-space: nowrap; padding: 0 28px;
  border-right: 1px solid rgba(244,251,250,0.14);
}
.trust-ticker-item svg{ flex-shrink: 0; color: var(--cyan); opacity: 0.9; }
@keyframes tickerScroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .trust-ticker-track{ animation: none; } }
@media (max-width: 640px){ .trust-ticker-item{ font-size: 0.72rem; padding: 0 18px; } }

/* ---------- wave-cut: clips a section's own bottom edge into a curve,
   overlapping the section below so there is never a color-matching seam ---------- */
.wave-cut-bottom{
  position: relative;
  z-index: 2;
  clip-path: polygon(0 0, 100% 0, 100.00% calc(100% - 38.5px), 95.83% calc(100% - 30.0px), 91.67% calc(100% - 22.4px), 87.50% calc(100% - 16.5px), 83.33% calc(100% - 12.9px), 79.17% calc(100% - 12.1px), 75.00% calc(100% - 14.0px), 70.83% calc(100% - 18.6px), 66.67% calc(100% - 25.3px), 62.50% calc(100% - 33.3px), 58.33% calc(100% - 42.0px), 54.17% calc(100% - 50.2px), 50.00% calc(100% - 57.2px), 45.83% calc(100% - 62.3px), 41.67% calc(100% - 64.8px), 37.50% calc(100% - 64.5px), 33.33% calc(100% - 61.4px), 29.17% calc(100% - 56.0px), 25.00% calc(100% - 48.6px), 20.83% calc(100% - 40.2px), 16.67% calc(100% - 31.6px), 12.50% calc(100% - 23.8px), 8.33% calc(100% - 17.5px), 4.17% calc(100% - 13.4px), 0.00% calc(100% - 12.0px));
  margin-bottom: -65px;
}
@media (max-width: 640px){ .wave-divider{ height:38px; } }

/* ---------- reviews marquee ---------- */
.reviews-marquee{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.reviews-track{
  display: flex;
  gap: 22px;
  width: max-content;
  animation: reviews-scroll 38s linear infinite;
}
.reviews-track:hover{ animation-play-state: paused; }
@keyframes reviews-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .reviews-track{ animation: none; }
}
.review-card{
  flex: 0 0 auto;
  width: 320px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 24px;
  box-shadow: 0 20px 40px -28px rgba(18,38,58,0.26);
}
.review-card .stars{ color: var(--coral); letter-spacing: 2px; margin-bottom: 12px; font-size: 0.95rem; }
.review-card p{ font-size: 0.94rem; color: var(--ink); line-height: 1.55; }
.review-card .who{ margin-top: 14px; font-family: var(--mono); font-size: 0.78rem; color: var(--ink-soft); }
@media (max-width: 640px){
  .review-card{ width: 260px; padding: 22px 20px; }
}

/* ---------- edge quote tab (vertical, right-hand side) + WhatsApp bubble ---------- */
.edge-quote-tab{
  position: fixed; top: 50%; right: 0; z-index: 200;
  transform: translateY(-50%);
  display: flex; align-items: center; gap: 10px;
  padding: 26px 16px;
  background: var(--coral);
  border-radius: 12px 0 0 12px;
  box-shadow: -10px 8px 30px -10px rgba(0,0,0,0.45);
  border: none; cursor: pointer;
  transition: padding-right .22s ease, background .18s ease, box-shadow .22s ease, opacity .2s ease;
}
.edge-quote-tab:hover{
  background: var(--coral-dk);
  padding-right: 22px;
  box-shadow: -14px 10px 36px -8px rgba(0,0,0,0.5);
}
.edge-quote-tab span{
  writing-mode: vertical-rl; transform: rotate(180deg);
  color: #fff; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.02em;
  font-family: var(--body); white-space: nowrap;
}

.edge-whatsapp{
  position: fixed; right: 14px; z-index: 200;
  top: calc(50% + 108px);
  width: 50px; height: 50px; border-radius: 50%;
  background: #25D366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px -8px rgba(0,0,0,0.4);
  transition: transform .18s ease, background .18s ease, opacity .2s ease;
}
.edge-whatsapp:hover{ transform: translateY(-2px) scale(1.06); background: #1EBE5A; }
.edge-whatsapp svg{ color:#fff; }

@media (max-width: 640px){
  .edge-quote-tab{ padding: 16px 10px; border-radius: 10px 0 0 10px; }
  .edge-quote-tab:hover{ padding-right: 14px; }
  .edge-quote-tab span{ font-size: 0.8rem; }
  .edge-whatsapp{ width: 44px; height: 44px; right: 10px; top: calc(50% + 82px); }
}

.drawer-overlay{
  position: fixed; inset: 0; z-index: 300;
  background: rgba(18,38,58,0.55);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.drawer-overlay.open{ opacity: 1; pointer-events: auto; }

.drawer-panel{
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 301;
  width: min(430px, 92vw);
  background: linear-gradient(165deg, var(--abyss-2), var(--abyss) 60%);
  box-shadow: -24px 0 60px -20px rgba(0,0,0,0.4);
  transform: translateX(100%);
  transition: transform .38s cubic-bezier(.2,.8,.2,1);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.drawer-panel.open{ transform: translateX(0); }
.drawer-head{
  padding: 24px 26px 18px; border-bottom: 1px solid rgba(244,251,250,0.12);
  display:flex; align-items:flex-start; justify-content:space-between; gap: 16px;
}
.drawer-head h3{ color: #fff; font-size: 1.3rem; }
.drawer-head p{ color: rgba(244,251,250,0.65); font-size: 0.88rem; margin-top: 6px; }
.drawer-trust{
  display:flex; align-items:center; gap: 5px; margin-bottom: 10px;
  color: var(--cyan); font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.03em; text-transform: uppercase; font-weight: 600;
}
.drawer-trust svg{ color: var(--cyan); }
.drawer-trust span{ margin-left: 4px; color: rgba(244,251,250,0.55); text-transform: none; letter-spacing: normal; }
.drawer-close{
  flex-shrink:0; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(244,251,250,0.1); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color: #fff;
}
.drawer-body{ padding: 22px 26px 30px; }

/* dark-card form styling, scoped to the drawer only */
.drawer-panel .form-card{ background: transparent; }
.drawer-panel label{ color: rgba(244,251,250,0.92); }
.drawer-panel input, .drawer-panel select, .drawer-panel textarea{
  background: var(--foam); color: var(--ink); border-color: rgba(244,251,250,0.14);
}
.drawer-panel input::placeholder, .drawer-panel textarea::placeholder{ color: var(--ink-soft); opacity: 0.7; }
.drawer-panel input:focus, .drawer-panel select:focus, .drawer-panel textarea:focus{ outline: 2px solid var(--cyan); outline-offset: 1px; }
.drawer-panel .check-group > label{ color: rgba(244,251,250,0.92); }
.drawer-panel .check-item{ color: rgba(244,251,250,0.85); }
.drawer-panel .check-item input[type="checkbox"]{ accent-color: var(--cyan); }
.drawer-panel .consent-row{ border-top-color: rgba(244,251,250,0.15); }
.drawer-panel .consent-label{ color: #fff; }
.drawer-panel .consent-label em{ color: var(--cyan); }
.drawer-panel .consent-row .check-item{ color: rgba(244,251,250,0.6); }
.drawer-panel #drawerQuoteForm .btn-primary{ padding: 14px 20px; font-size: 0.94rem; }

@media (max-width: 640px){
  .drawer-panel{
    top: auto; right: 0; left: 0; bottom: 0;
    width: 100%; height: min(85vh, 620px);
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
  }
  .drawer-panel.open{ transform: translateY(0); }
}

/* ---------- CTA band ---------- */
.cta-band{
  position: relative; background: linear-gradient(120deg, var(--coral), var(--coral-dk));
  color: #fff; padding: 74px 0; overflow: hidden;
}
.cta-band::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 85% 20%, rgba(255,255,255,0.18), transparent 45%); }
.cta-band .wrap{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.cta-band h2{ color: #fff; }
.cta-band p{ color: rgba(255,255,255,0.9); margin-top: 8px; font-size:1.05rem; }

/* ---------- footer ---------- */
footer.site{ background: var(--abyss); color: rgba(244,251,250,0.7); padding: 64px 0 30px; }
footer.site h4{ color:#fff; font-family: var(--body); font-weight:700; font-size:1rem; margin-bottom:16px;}
.foot-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 34px; }
@media (max-width: 780px){ .foot-grid{ grid-template-columns: 1fr 1fr; } }
footer.site a{ font-size: 0.92rem; }
footer.site ul li{ margin-bottom: 10px; }
footer.site ul li a:hover{ color:#fff; }
.foot-bottom{
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(244,251,250,0.12);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size: 0.82rem; color: rgba(244,251,250,0.5);
}

/* ---------- page hero (interior pages) ---------- */
.page-hero{ position: relative; background: var(--abyss); color: #fff; padding: 190px 0 90px; overflow: hidden; }
.page-hero::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(ellipse 60% 60% at 20% 10%, rgba(112,193,232,0.25), transparent 60%),
              radial-gradient(ellipse 50% 50% at 85% 90%, rgba(36,123,160,0.18), transparent 55%);
}
.page-hero .wrap{ position:relative; }
.page-hero h1{ color:#fff; font-size: clamp(2.6rem, 5.6vw, 4.2rem); max-width: 18ch; }
.page-hero .eyebrow{ color: var(--cyan); }
.page-hero p.lead{ color: rgba(244,251,250,0.8); margin-top: 16px; }

/* ---------- forms ---------- */
.form-card{
  background:#fff; border:1px solid var(--line); border-radius: 16px; padding: 38px;
  box-shadow: 0 30px 60px -30px rgba(18,38,58,0.35), 0 4px 14px -4px rgba(18,38,58,0.08);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
}
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; margin-bottom:18px; }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } }
.form-row-3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:18px; margin-bottom:18px; }
@media (max-width:640px){ .form-row-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:420px){ .form-row-3{ grid-template-columns:1fr; } }
label{ font-size:0.84rem; font-weight:700; color: var(--abyss); display:block; margin-bottom:8px; }
input, select, textarea{
  width:100%; min-width: 0; font-family: var(--body); font-size:0.97rem;
  padding: 13px 15px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--foam-dim); color: var(--ink);
}
input:focus, select:focus, textarea:focus{ outline: 2px solid var(--cyan-dk); outline-offset:1px; }
.full{ grid-column: 1 / -1; }

/* ---------- contact page 2-col layout, collapses on mobile ---------- */
.contact-grid{ display:grid; grid-template-columns: 1.3fr 1fr; gap:44px; align-items:start; }
@media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; } }

/* ---------- checkbox group (services needed) + consent ---------- */
.check-group{ margin-bottom: 20px; }
.check-group > label{ margin-bottom: 12px; }
.check-list{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
@media (max-width:480px){ .check-list{ grid-template-columns: 1fr; } }
.check-item{
  display:flex; align-items:center; gap: 10px; cursor:pointer;
  font-size: 0.9rem; font-weight: 500; color: var(--ink); margin-bottom: 0;
}
.check-item input[type="checkbox"]{
  width: 17px; height: 17px; flex-shrink:0; accent-color: var(--coral); cursor:pointer; padding:0;
}
.consent-row{ margin-bottom: 20px; padding-top: 4px; border-top: 1px solid var(--line); padding-top: 16px; }
.consent-label{ display:flex; align-items:baseline; gap:6px; margin-bottom:10px; }
.consent-label em{ font-style:normal; color: var(--coral-dk); font-size: 0.78rem; font-weight:700; }
.consent-row .check-item{ font-size: 0.86rem; color: var(--ink-soft); align-items:flex-start; }
.consent-row .check-item input{ margin-top: 2px; }

/* ---------- contact page quote CTA card (replaces inline form) ---------- */
.quote-cta-card{ text-align:center; padding: 48px 40px; }
.quote-cta-icon{
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 20px;
  background: linear-gradient(135deg, var(--coral), var(--coral-dk)); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.quote-cta-card h3{ margin-bottom: 12px; }
.quote-cta-card p{ color: var(--ink-soft); font-size: 0.96rem; max-width: 42ch; margin: 0 auto 26px; }
.quote-cta-alt{ margin-top: 22px; display:flex; flex-direction:column; gap: 12px; align-items:center; }
.quote-cta-alt-link{
  display:inline-flex; align-items:center; gap:8px; font-family: var(--mono); font-size: 0.85rem;
  font-weight:600; color: var(--ink-soft); transition: color .18s ease;
}
.quote-cta-alt-link:hover{ color: var(--coral-dk); }
@media (max-width: 600px){ .quote-cta-card{ padding: 38px 24px; } }

/* ---------- map ---------- */
.map-card{
  border-radius: 16px; overflow:hidden; border:1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(18,38,58,0.35), 0 4px 14px -4px rgba(18,38,58,0.08);
  filter: grayscale(0.15) contrast(1.02);
}

/* ---------- form success state ---------- */
.form-success{
  text-align:center; padding: 50px 20px;
}
.form-success .check{
  width: 64px; height:64px; border-radius:50%;
  background: linear-gradient(135deg, var(--cyan), var(--cyan-dk));
  color:#fff; display:flex; align-items:center; justify-content:center;
  margin: 0 auto 20px;
}
.form-success h3{ color: var(--abyss); margin-bottom: 10px; }
.form-success p{ color: var(--ink-soft); font-size:0.95rem; }
.drawer-panel .form-success h3{ color: #fff; }
.drawer-panel .form-success p{ color: rgba(244,251,250,0.65); }
/* ---------- project gallery ---------- */
.gal-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
@media (max-width: 880px){ .gal-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .gal-grid{ grid-template-columns: 1fr; } }
.gal-item{
  border-radius: 16px; overflow:hidden; border:1px solid var(--line); background:#fff;
  box-shadow: 0 20px 40px -28px rgba(18,38,58,0.26);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
}
.gal-item:hover{ transform: translateY(-6px); box-shadow: 0 30px 56px -26px rgba(18,38,58,0.35); }
.gal-thumb{ aspect-ratio: 4/3; position: relative; overflow:hidden; }
.gal-thumb .half{ position:absolute; top:0; bottom:0; width:50%; }
.gal-thumb .half.l{ left:0; }
.gal-thumb .half.r{ right:0; }
.gal-caption{ padding: 18px 20px; }
.gal-caption h4{ font-family:var(--body); font-weight:700; font-size:1rem; color:var(--abyss); }
.gal-caption span{ font-family: var(--mono); font-size:0.8rem; color: var(--ink-soft); }

/* utility */
.reveal{ opacity:0; transform: translateY(28px) scale(0.97); transition: opacity .65s cubic-bezier(.2,.8,.2,1), transform .65s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* staggered entrance for grid children — each card lifts in slightly after the last */
.card-grid .reveal:nth-child(1){ transition-delay: 0s; }
.card-grid .reveal:nth-child(2){ transition-delay: .08s; }
.card-grid .reveal:nth-child(3){ transition-delay: .16s; }
.card-grid .reveal:nth-child(4){ transition-delay: .24s; }
.card-grid .reveal:nth-child(5){ transition-delay: .32s; }
.card-grid .reveal:nth-child(6){ transition-delay: .4s; }

.gal-grid .reveal:nth-child(1){ transition-delay: 0s; }
.gal-grid .reveal:nth-child(2){ transition-delay: .08s; }
.gal-grid .reveal:nth-child(3){ transition-delay: .16s; }
.gal-grid .reveal:nth-child(4){ transition-delay: .24s; }
.gal-grid .reveal:nth-child(5){ transition-delay: .32s; }
.gal-grid .reveal:nth-child(6){ transition-delay: .4s; }

.blog-grid .reveal:nth-child(1){ transition-delay: 0s; }
.blog-grid .reveal:nth-child(2){ transition-delay: .1s; }
.blog-grid .reveal:nth-child(3){ transition-delay: .2s; }

.gauge-row .reveal:nth-child(1){ transition-delay: 0s; }
.gauge-row .reveal:nth-child(2){ transition-delay: .1s; }
.gauge-row .reveal:nth-child(3){ transition-delay: .2s; }
.gauge-row .reveal:nth-child(4){ transition-delay: .3s; }

.badge-row{ display:flex; gap:26px; flex-wrap:wrap; align-items:center; margin-top:30px; }
.badge{ display:flex; align-items:center; gap:9px; font-family: var(--mono); font-size:0.8rem; color: rgba(244,251,250,0.75); }
.badge svg{ color: var(--cyan); }

/* ============================================================
   MOBILE REFINEMENTS
   ============================================================ */
@media (max-width: 640px){
  .wrap{ padding: 0 20px; }

  section{ padding: 64px 0; }
  .section-head{ margin-bottom: 34px; }

  h1{ font-size: clamp(2.3rem, 9vw, 3.4rem); }
  h2{ font-size: clamp(1.7rem, 7vw, 2.4rem); }
  p.lead{ font-size: 1.02rem; }

  .btn{ padding: 14px 24px; font-size: 0.92rem; }
  .hero-cta-row{ gap: 12px; }
  .hero-cta-row .btn{ flex: 1 1 auto; }

  header.site .wrap{ padding-top: 14px; padding-bottom: 14px; }
  .logo-img{ height: 30px; }
  .nav-cta .btn-primary{ padding: 11px 18px; font-size: 0.85rem; }

  .hero-cinema{ min-height: 62svh; }
  .hero-content{ display: none; }

  .hero-mobile-recap{ display: block; }

  .page-hero{ padding: 150px 0 56px; }
  .page-hero h1{ max-width: none; }

  .parallax{ min-height: auto; }
  .parallax-content{ padding: 64px 0; }
  .parallax-content h2{ max-width: none; }
  .stat-strip{ gap: 28px 40px; margin-top: 32px; }
  .stat-strip .num{ font-size: 1.7rem; }

  .gauge-row{ gap: 22px 16px; }
  .gauge-dial{ width: 92px; height: 92px; }
  .gauge-val{ font-size: 1.1rem; }
  .gauge-label{ font-size: 0.82rem; }

  .svc-card{ padding: 26px 22px; }
  .rail-step{ padding-right: 0; }

  .ba-wrap{ padding: 64px 0; }
  .ba-slider{ aspect-ratio: 4/5; border-radius: 14px; }
  .ba-handle::after{ width: 44px; height: 44px; font-size: 1rem; }
  .badge-row{ gap: 14px 20px; margin-top: 24px; }

  .cta-band{ padding: 48px 0; text-align: center; }
  .cta-band .wrap{ flex-direction: column; text-align: center; }
  .cta-band .btn{ width: 100%; }

  .foot-grid{ grid-template-columns: 1fr; gap: 28px; }
  .foot-bottom{ flex-direction: column; gap: 6px; text-align: center; }

  .form-card{ padding: 24px 20px; }

  .gal-thumb{ aspect-ratio: 1/1; }
}

@media (max-width: 400px){
  .nav-cta .btn-primary{ display:none; }
  .stat-strip{ flex-direction: column; gap: 18px; }
  h1{ font-size: clamp(2rem, 10vw, 2.8rem); }
}