/* ===== Sereno Pools — design system ===== */
:root{
  --ink:        #0c1a1e;
  --ink-soft:   #213237;
  --bg:         #f6f3ec;   /* warm travertine */
  --bg-2:       #efe8da;
  --card:       #fffdf8;
  --teal-900:   #062a32;
  --teal-800:   #0a3c47;
  --teal-700:   #0f5564;
  --aqua:       #2fb4c6;
  --aqua-bright:#5fd2de;
  --sand:       #c8b393;
  --muted:      #5d6e71;
  --line:       rgba(12,26,30,.12);

  --ff-display: "Fraunces", Georgia, serif;
  --ff-body:    "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 64px);
  --r: 18px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--ff-display); font-weight:500; line-height:1.04; letter-spacing:-.01em; }

.eyebrow{
  font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--teal-700);
}
.eyebrow--light{ color:var(--aqua-bright); }

/* ===== buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--teal-800); color:#fff;
  font-family:var(--ff-body); font-weight:600; font-size:.95rem;
  padding:14px 26px; border:none; border-radius:100px; cursor:pointer;
  transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.btn:hover{ background:var(--teal-700); transform:translateY(-2px); box-shadow:0 12px 30px -12px rgba(10,60,71,.55); }
.btn--sm{ padding:10px 20px; font-size:.88rem; }
.btn--full{ width:100%; padding:17px; font-size:1rem; }

/* ===== NAV ===== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  transition:background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
.nav__inner{
  max-width:var(--maxw); margin:0 auto; padding:18px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav.scrolled{
  background:rgba(246,243,236,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 var(--line);
}
.brand{ display:inline-flex; align-items:center; gap:9px; }
.brand__mark{ width:24px; height:24px; fill:var(--aqua); transition:fill .35s ease; flex:none; }
.brand__word{
  font-family:var(--ff-display); font-weight:600; font-size:1.32rem; letter-spacing:-.02em;
  color:#fff; transition:color .35s ease;
}
.brand__dot{ color:var(--aqua); }
.nav.scrolled .brand__word{ color:var(--ink); }
.nav__links{ display:flex; gap:30px; margin-left:auto; }
.nav__links a{
  font-size:.92rem; font-weight:500; color:rgba(255,255,255,.92);
  transition:color .35s ease, opacity .2s ease;
}
.nav__links a:hover{ opacity:.7; }
.nav.scrolled .nav__links a{ color:var(--ink-soft); }
.nav__cta{ margin-left:6px; }
.nav:not(.scrolled) .nav__cta{ background:rgba(255,255,255,.16); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.4); }

/* ===== HERO SCRUB ===== */
.scrolly{ position:relative; height:620vh; background:var(--ink); }
.pin{
  position:sticky; top:0; height:100vh; width:100%;
  overflow:hidden; display:flex;
}
.hero-media{ position:absolute; inset:0; }
.hero-canvas{
  display:block; width:100%; height:100%; background:var(--ink);
}
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(6,20,24,.78) 0%, rgba(6,20,24,.12) 36%, rgba(6,20,24,0) 60%),
    linear-gradient(to bottom, rgba(6,20,24,.45) 0%, rgba(6,20,24,0) 28%);
}
.hero-overlay{
  position:relative; z-index:2; width:100%;
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  display:flex; flex-direction:column; justify-content:space-between;
  padding-top:118px; padding-bottom:42px; color:#fff;
}
.hero-kicker{
  font-size:.8rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--aqua-bright); margin-bottom:14px;
}
.hero-title{
  font-size:clamp(2.6rem, 7vw, 5.6rem); font-weight:500; color:#fff;
  text-shadow:0 2px 30px rgba(0,0,0,.25);
}
.hero-captions{ position:relative; height:6.5em; margin-top:auto; }
.cap{
  position:absolute; left:0; bottom:0; max-width:620px;
  opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease;
  pointer-events:none;
}
.cap.is-active{ opacity:1; transform:translateY(0); }
.cap__num{
  display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--aqua-bright); margin-bottom:10px;
}
.cap__line{ font-family:var(--ff-display); font-size:clamp(1.4rem, 3.4vw, 2.4rem); line-height:1.15; color:#fff; }
.hero-foot{ display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:26px; }
.progress{ flex:1; height:2px; background:rgba(255,255,255,.22); border-radius:2px; overflow:hidden; }
.progress span{ display:block; height:100%; width:0%; background:var(--aqua-bright); transition:width .1s linear; }
.scroll-hint{
  display:inline-flex; align-items:center; gap:8px; font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.85); transition:opacity .4s ease;
}
.scroll-hint svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(-2px);} 50%{ transform:translateY(3px);} }
.scroll-hint.is-hidden{ opacity:0; }

/* ===== STATEMENT ===== */
.statement{
  max-width:var(--maxw); margin:0 auto; padding:clamp(80px,12vw,160px) var(--pad);
  text-align:center;
}
.statement .eyebrow{ margin-bottom:22px; }
.statement__h{ font-size:clamp(2.1rem, 5.2vw, 4rem); }
.statement__p{
  max-width:620px; margin:28px auto 0; font-size:clamp(1.02rem,1.4vw,1.18rem);
  color:var(--muted);
}

/* ===== STATS ===== */
.stats{ background:var(--teal-900); color:#fff; }
.stats__grid{
  max-width:var(--maxw); margin:0 auto; padding:clamp(48px,7vw,76px) var(--pad);
  display:grid; grid-template-columns:repeat(4,1fr); gap:30px;
}
.stat{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.stat__n{ font-family:var(--ff-display); font-size:clamp(2.6rem,5vw,3.8rem); line-height:1; color:#fff; }
.stat__suffix{ font-family:var(--ff-display); font-size:1.4rem; color:var(--aqua-bright); margin-top:-.4em; }
.stat__l{ margin-top:12px; font-size:.86rem; color:rgba(255,255,255,.7); letter-spacing:.02em; max-width:14ch; }

/* ===== SECTION HEADS ===== */
.section-head{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); text-align:center; }
.section-title{ font-size:clamp(1.9rem,4.4vw,3.2rem); margin-top:16px; }
.section-sub{ max-width:560px; margin:18px auto 0; color:var(--muted); font-size:1.05rem; }

/* ===== PROCESS ===== */
.process{ padding:clamp(70px,10vw,130px) 0; }
.steps{
  list-style:none; max-width:var(--maxw); margin:clamp(40px,6vw,68px) auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
}
.step{ padding:30px 22px; border-top:2px solid var(--ink); position:relative; }
.step:not(:last-child){ border-right:1px solid var(--line); }
.step__n{ font-family:var(--ff-display); font-size:1rem; color:var(--aqua); font-weight:600; }
.step h3{ font-size:1.18rem; margin:14px 0 10px; }
.step p{ font-size:.92rem; color:var(--muted); }

/* ===== GALLERY ===== */
.gallery{ padding:clamp(40px,6vw,80px) 0 clamp(70px,10vw,120px); }
.gallery__grid{
  max-width:var(--maxw); margin:clamp(36px,5vw,56px) auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:240px; gap:16px;
}
.g{ position:relative; overflow:hidden; border-radius:var(--r); background:var(--bg-2); }
.g img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.g:hover img{ transform:scale(1.06); }
.g figcaption{
  position:absolute; left:16px; bottom:14px; z-index:2; color:#fff;
  font-size:.82rem; font-weight:500; letter-spacing:.02em;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}
.g::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.5), transparent 45%); opacity:.9; }
.g--tall{ grid-row:span 2; }
.g--wide{ grid-column:span 2; }

/* ===== BAND ===== */
.band{
  position:relative; background:var(--band-img) center/cover no-repeat fixed;
  color:#fff; isolation:isolate;
}
.band::before{ content:""; position:absolute; inset:0; background:linear-gradient(105deg, rgba(6,20,24,.82), rgba(6,20,24,.32)); z-index:-1; }
.band__inner{ max-width:var(--maxw); margin:0 auto; padding:clamp(90px,15vw,180px) var(--pad); max-width:760px; }
.band__h{ font-size:clamp(2.2rem,5.5vw,4.2rem); margin:18px 0; color:#fff; }
.band__p{ max-width:480px; font-size:1.1rem; color:rgba(255,255,255,.85); }

/* ===== SERVICES ===== */
.services{ padding:clamp(70px,10vw,130px) 0; background:var(--bg-2); }
.services__grid{
  max-width:var(--maxw); margin:clamp(40px,6vw,64px) auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.svc{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:32px 28px; transition:transform .3s ease, box-shadow .3s ease;
}
.svc:hover{ transform:translateY(-4px); box-shadow:0 22px 50px -28px rgba(12,26,30,.4); }
.svc h3{ font-size:1.28rem; margin-bottom:10px; }
.svc p{ font-size:.95rem; color:var(--muted); }

/* ===== REVIEWS ===== */
.reviews{ padding:clamp(70px,10vw,130px) 0; }
.reviews__grid{
  max-width:var(--maxw); margin:clamp(40px,6vw,64px) auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.quote{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:34px 30px; display:flex; flex-direction:column; gap:22px; }
.quote p{ font-family:var(--ff-display); font-size:1.22rem; line-height:1.35; }
.quote footer{ display:flex; flex-direction:column; gap:6px; }
.stars{ color:var(--sand); letter-spacing:2px; font-size:.95rem; }
.quote cite{ font-style:normal; font-size:.88rem; color:var(--muted); font-weight:500; }

/* ===== QUOTE CTA ===== */
.quote-cta{ background:var(--teal-900); color:#fff; }
.quote-cta__inner{
  max-width:var(--maxw); margin:0 auto; padding:clamp(70px,10vw,130px) var(--pad);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center;
}
.quote-cta__h{ font-size:clamp(2.2rem,5vw,3.8rem); color:#fff; margin:16px 0; }
.quote-cta__p{ color:rgba(255,255,255,.78); max-width:420px; }
.quote-cta__list{ list-style:none; margin-top:26px; display:flex; flex-direction:column; gap:12px; }
.quote-cta__list li{ position:relative; padding-left:28px; color:rgba(255,255,255,.9); font-size:.96rem; }
.quote-cta__list li::before{ content:"✓"; position:absolute; left:0; color:var(--aqua-bright); font-weight:700; }

.qform{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); border-radius:var(--r); padding:clamp(24px,3vw,36px); }
.qform__row{ margin-bottom:16px; }
.qform__row--2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.qform label{ display:flex; flex-direction:column; gap:7px; font-size:.82rem; font-weight:600; letter-spacing:.04em; color:rgba(255,255,255,.7); text-transform:uppercase; }
.qform input,.qform select,.qform textarea{
  font-family:var(--ff-body); font-size:.98rem; color:#fff;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); border-radius:11px;
  padding:13px 14px; width:100%; transition:border .2s ease, background .2s ease;
}
.qform input::placeholder,.qform textarea::placeholder{ color:rgba(255,255,255,.4); }
.qform input:focus,.qform select:focus,.qform textarea:focus{ outline:none; border-color:var(--aqua); background:rgba(255,255,255,.1); }
.qform select option{ color:#111; }
.qform textarea{ resize:vertical; }
.qform .btn--full{ margin-top:6px; background:var(--aqua); color:var(--teal-900); }
.qform .btn--full:hover{ background:var(--aqua-bright); }
.qform__note{ margin-top:14px; font-size:.9rem; color:var(--aqua-bright); text-align:center; }
.qform__note.is-error{ color:#ff9a8b; }

/* ===== FOOTER ===== */
.footer{ background:var(--ink); color:rgba(255,255,255,.74); }
.footer__inner{
  max-width:var(--maxw); margin:0 auto; padding:clamp(56px,8vw,84px) var(--pad) 40px;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px;
}
.brand--light .brand__word{ color:#fff; }
.footer__brand p{ margin-top:16px; max-width:34ch; font-size:.95rem; }
.footer__col h4{ font-family:var(--ff-body); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:16px; font-weight:600; }
.footer__col a,.footer__col span{ display:block; font-size:.95rem; margin-bottom:10px; transition:color .2s ease; }
.footer__col a:hover{ color:var(--aqua-bright); }
.footer__bar{
  max-width:var(--maxw); margin:0 auto; padding:22px var(--pad);
  border-top:1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.82rem; color:rgba(255,255,255,.5);
}

/* ===== reveal animation ===== */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in{ opacity:1; transform:none; }

/* ===== RESPONSIVE ===== */
@media (max-width:960px){
  .nav__links{ display:none; }
  .stats__grid{ grid-template-columns:repeat(2,1fr); gap:34px 20px; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .step{ border-right:none !important; }
  .services__grid,.reviews__grid{ grid-template-columns:repeat(2,1fr); }
  .gallery__grid{ grid-auto-rows:200px; }
  .quote-cta__inner{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr 1fr; }
}

@media (max-width:760px){
  /* Mobile: solid header bar on top, the FULL uncropped frame directly below it,
     then the scrub copy. The hero is PINNED and builds as you scroll (canvas
     frame-sequence, see main.js) — it never loops. */
  .scrolly{ height:520vh; }                 /* scroll distance the scrub plays over */
  .pin{ position:sticky; top:0; height:100vh; flex-direction:column; overflow:hidden; background:var(--ink); padding-top:56px; }
  .hero-media{ position:relative; inset:auto; width:100%; aspect-ratio:16/9; flex:none; background:#000; }
  .hero-canvas{ width:100%; height:100%; }
  .hero-scrim{ display:none; }
  .hero-overlay{
    position:relative; z-index:2; width:100%; flex:1 1 auto; min-height:0;
    display:flex; flex-direction:column; justify-content:flex-start;
    padding:18px var(--pad) 22px;
  }
  .hero-title{ font-size:clamp(1.9rem,7.6vw,2.7rem); }
  .hero-captions{ display:block; position:relative; height:auto; min-height:4.6em; margin-top:16px; }
  .cap{ position:absolute; }
  .hero-foot{ display:flex; margin-top:auto; }
}

@media (max-width:560px){
  .stats__grid{ grid-template-columns:1fr 1fr; }
  .steps,.services__grid,.reviews__grid{ grid-template-columns:1fr; }
  .gallery__grid{ grid-template-columns:1fr 1fr; grid-auto-rows:160px; }
  .g--wide{ grid-column:span 2; }
  .g--tall{ grid-row:span 1; }
  .qform__row--2{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr; gap:30px; }
  .band{ background-attachment:scroll; }
}

@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .scroll-hint svg{ animation:none; }
}