/* pvcpools.ca/en/ — the marketing home page.
   A light page: water-white ground, brand navy for the anchors (header, contact, footer),
   brand blue for action. The one recurring idea is the weld: a thin line that draws itself
   down the page, and light moving over water wherever a photograph is full-bleed. */

:root{
  --navy:#071B3A;            /* the colour the client gave — same as the card's --page-bg */
  --navy-2:#0C2B57;
  --blue:#2F7BFF;            /* accents, glows, lines */
  --blue-ink:#1F5FDB;        /* text and buttons on light: 5.4:1 on white */
  --aqua:#19B6D2;
  --ground:#F5FAFD;
  --tint:#EAF4FA;
  --ink:#0B1F3A;
  --sub:#4F6480;
  --line:rgba(11,31,58,.12);
  --white:#fff;
  --r:18px;
  --wrap:1240px;
  --pad:clamp(20px,5vw,56px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --head:'Archivo',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --body:'Barlow',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 17px/1.6 var(--body);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:inherit}
h1,h2,h3,p,figure,blockquote,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
address{font-style:normal}
[hidden]{display:none!important}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--blue-ink);color:#fff;padding:10px 16px}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}

/* ── type ─────────────────────────────────────────────────────────── */
h2{font:800 clamp(30px,4.4vw,54px)/1.04 var(--head);letter-spacing:-.025em;color:var(--navy);text-wrap:balance}
.kicker{font:700 12.5px/1 var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-ink);margin-bottom:16px}
.kicker-light{color:#9CC4FF}
.sec-lead{margin-top:14px;max-width:60ch;color:var(--sub);font-size:18px}

/* ── buttons ──────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 22px;border-radius:999px;border:1.5px solid transparent;
  font:700 15px/1 var(--head);letter-spacing:.01em;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform .25s var(--ease),background .25s,border-color .25s,color .25s,box-shadow .25s;
}
.btn-lg{padding:17px 30px;font-size:16px}
.btn-solid{background:var(--blue-ink);color:#fff;box-shadow:0 10px 26px -10px rgba(47,123,255,.75)}
.btn-solid:hover{transform:translateY(-2px);background:#174FBE;box-shadow:0 16px 32px -10px rgba(47,123,255,.8)}
.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--navy);transform:translateY(-2px)}
.btn-line{border-color:var(--navy);color:var(--navy)}
.btn-line:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}

/* ── the seam ─────────────────────────────────────────────────────── */
.seam{position:fixed;left:22px;top:0;width:12px;height:100vh;z-index:5;pointer-events:none;display:none}
.seam path{fill:none;stroke-width:2;vector-effect:non-scaling-stroke}
.seam-bed{stroke:rgba(11,31,58,.10)}
.seam-weld{stroke:var(--blue);stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--scroll,0));filter:drop-shadow(0 0 4px rgba(47,123,255,.7))}
@media (min-width:1360px){.seam{display:block}}

/* ── header ───────────────────────────────────────────────────────── */
.hdr{position:fixed;inset:0 0 auto 0;z-index:40;transition:background .35s,box-shadow .35s,transform .4s var(--ease)}
.hdr-in{display:flex;align-items:center;gap:26px;max-width:1400px;margin:0 auto;padding:16px var(--pad);transition:padding .35s}
.hdr-logo{display:flex;align-items:center;min-height:44px}
.hdr-logo img{width:clamp(150px,15vw,200px);height:auto}
.hdr-nav{display:flex;gap:26px;margin-left:auto}
.hdr-nav a,.hdr-tel{font:600 15px/1 var(--head);color:#fff;text-decoration:none;position:relative;padding:6px 0;opacity:.92}
.hdr-nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--aqua);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.hdr-nav a:hover::after{transform:scaleX(1)}
.hdr-nav a.is-here::after,.nav-dd.is-here>a::after{transform:scaleX(1);background:rgba(255,255,255,.55)}
.nav-dd{position:relative;display:flex;align-items:center}
.nav-dd>a{padding-right:16px}
.nav-dd>a::before{content:'';position:absolute;right:0;top:calc(50% - 5px);width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.8;transition:transform .3s var(--ease)}
.nav-dd-menu{position:absolute;left:-18px;top:calc(100% + 14px);width:290px;padding:10px;border-radius:16px;background:#fff;color:var(--ink);box-shadow:0 30px 70px -28px rgba(7,27,58,.55),0 0 0 1px var(--line);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .3s var(--ease),visibility .25s}
.nav-dd-menu::before{content:'';position:absolute;left:0;right:0;top:-16px;height:16px}
.nav-dd-menu a{display:block;padding:11px 14px;border-radius:10px;color:var(--ink);opacity:1;font:600 15px/1.2 var(--head)}
.nav-dd-menu a::after{display:none}
.nav-dd-menu a b{display:block;color:var(--navy)}
.nav-dd-menu a span{display:block;margin-top:3px;font:400 13px/1.3 var(--body);color:var(--sub)}
.nav-dd-menu a:hover,.nav-dd-menu a[aria-current]{background:var(--tint)}
.nav-dd-menu .nav-dd-all{margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 10px 10px;color:var(--blue-ink);font-weight:700;font-size:14px}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu,.nav-dd.is-open .nav-dd-menu{opacity:1;visibility:visible;transform:none}
.nav-dd:hover>a::before,.nav-dd.is-open>a::before{transform:rotate(225deg) translate(-2px,-2px)}

.hdr-tel{opacity:1;font-weight:700}
.hdr.is-solid{background:var(--navy);box-shadow:0 10px 30px -18px rgba(0,0,0,.7)}
.hdr.is-solid .hdr-in{padding-top:10px;padding-bottom:10px}
.hdr.is-away{transform:translateY(-100%)}
.burger{display:none;width:44px;height:44px;border:0;background:none;padding:10px;cursor:pointer;margin-left:auto}
.burger span{display:block;height:2px;background:#fff;border-radius:2px;margin:6px 0;transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* the phone menu: photo tiles for services and work, a short list, the ways to reach them */
.menu{position:fixed;inset:0;z-index:35;padding:84px var(--pad) calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:22px;overflow:auto;-webkit-overflow-scrolling:touch;
  background:radial-gradient(120% 60% at 100% 0%,#123A78 0%,var(--navy) 60%);animation:menuIn .3s var(--ease)}
.menu nav{display:flex;flex-direction:column;gap:10px}
.mhead{margin:6px 0 0}
.mhead a{display:inline-flex;align-items:center;gap:8px;min-height:32px;font:700 12.5px/1 var(--head);letter-spacing:.16em;text-transform:uppercase;color:#9CC4FF;text-decoration:none}
.mhead i{font-style:normal;font-size:14px;letter-spacing:0}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mtile{position:relative;display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--navy-2);text-decoration:none;color:#fff;isolation:isolate;
  box-shadow:0 14px 30px -20px rgba(0,0,0,.9)}
.mtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.mtile::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,27,58,.92) 0%,rgba(7,27,58,.35) 55%,rgba(7,27,58,.05) 100%)}
.mtile span{position:absolute;left:12px;right:10px;bottom:10px;z-index:1}
.mtile b{display:block;font:800 17px/1.1 var(--head);letter-spacing:-.01em}
.mtile small{display:block;margin-top:3px;font:500 12.5px/1.2 var(--body);color:#CFE2FA}
.mtile:active img{transform:scale(1.06)}
.mtile[aria-current]{box-shadow:0 0 0 2px var(--aqua),0 14px 30px -20px rgba(0,0,0,.9)}
.mlist{display:flex;flex-direction:column;margin-top:6px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);overflow:hidden}
.mlink{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;color:#fff;text-decoration:none;border-top:1px solid rgba(255,255,255,.08)}
.mlink:first-child{border-top:0}
.mlink b{display:block;font:700 18px/1.15 var(--head)}
.mlink small{display:block;margin-top:3px;font-size:13px;color:#9FB8D8}
.mlink i{font-style:normal;font-size:18px;color:var(--aqua)}
.mlink[aria-current]{background:rgba(25,182,210,.12)}
.mcta{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding-top:6px}
.mcta .btn{width:100%}
.mquick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mquick a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:48px;border-radius:12px;border:1.5px solid rgba(255,255,255,.22);color:#fff;text-decoration:none;font:700 14px/1 var(--head)}
.mquick svg{color:#8FD8FF;flex:none}
.mfoot{text-align:center;font-size:13px;line-height:1.5;color:#9FB8D8}
.mfoot a{color:#CFE2FA;display:inline-block;padding:8px 2px}
.menu-open .hdr{background:var(--navy);box-shadow:0 10px 30px -18px rgba(0,0,0,.7);transform:none}
/* the pieces arrive one after another */
.menu nav>*,.mcta{animation:menuItem .45s var(--ease) both}
.menu nav>*:nth-child(2){animation-delay:.04s}.menu nav>*:nth-child(3){animation-delay:.08s}
.menu nav>*:nth-child(4){animation-delay:.12s}.menu nav>*:nth-child(5){animation-delay:.16s}.mcta{animation-delay:.2s}
@keyframes menuIn{from{opacity:0}to{opacity:1}}
@keyframes menuItem{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (max-width:1080px){.hdr-nav,.hdr-tel{display:none}.hdr-cta{margin-left:auto}.burger{display:block;margin-left:0}}
@media (max-width:640px){.hdr-cta{display:none}.burger{margin-left:auto}}

/* ── hero ─────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:clamp(620px,100svh,940px);display:flex;align-items:flex-end;overflow:hidden;background:var(--navy);color:#fff;isolation:isolate}
.hero-photo{position:absolute;inset:-8% 0 -8% 0;z-index:0;will-change:transform}
.hero-photo picture,.hero-photo img{width:100%;height:100%}
.hero-photo img{object-fit:cover;object-position:50% 60%;animation:kenburns 22s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.12) translate(-1.5%,1%)}}
.hero-shade{position:absolute;inset:0;z-index:2;background:
  linear-gradient(90deg,rgba(7,27,58,.92) 0%,rgba(7,27,58,.72) 38%,rgba(7,27,58,.18) 72%,rgba(7,27,58,.05) 100%),
  linear-gradient(0deg,rgba(7,27,58,.85) 0%,rgba(7,27,58,0) 42%),
  linear-gradient(180deg,rgba(7,27,58,.7) 0%,rgba(7,27,58,0) 22%)}

/* light moving over water: soft patches drifting against each other. A plain translucent
   layer, NOT mix-blend-mode — Chromium blends against the section background only and
   ignores the photograph once that sits on its own compositor layer, which painted the
   whole hero flat navy. It also stays inside the section (inset:0, no transform): the
   oversized rotating version of this layer blanked the photograph in Chromium as well —
   measured, 2026-09-19, by sampling the hero with each property switched off in turn. */
.hero-caustics,.contact-caustics{display:none;position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.2;
  background:
    radial-gradient(ellipse 38% 22% at 20% 30%,rgba(255,255,255,.55),transparent 60%),
    radial-gradient(ellipse 30% 18% at 70% 60%,rgba(160,220,255,.5),transparent 60%),
    radial-gradient(ellipse 26% 30% at 45% 80%,rgba(255,255,255,.4),transparent 60%),
    radial-gradient(ellipse 22% 14% at 85% 20%,rgba(190,235,255,.45),transparent 60%);
  background-size:70% 70%,85% 85%,60% 60%,75% 75%;
  animation:caustics 16s ease-in-out infinite alternate}
/* Switched on by home.js after the page has loaded. Present from the first frame, this
   layer held the hero photograph back for about a second in Chrome (sampled over time:
   navy at 0.4 s, photograph at 1.2 s; without the layer, photograph at once). */
.lit .hero-caustics,.lit .contact-caustics{display:block}
.lit .hero-caustics{animation:caustics 16s ease-in-out infinite alternate,lightIn 2.4s ease both}
@keyframes lightIn{from{opacity:0}to{opacity:.2}}
@keyframes caustics{
  from{background-position:0% 0%,100% 100%,30% 70%,80% 10%}
  to{background-position:60% 40%,20% 30%,90% 20%,10% 80%}}

.hero-in{position:relative;z-index:3;width:100%;max-width:var(--wrap);margin:0 auto;padding:130px var(--pad) clamp(110px,14vh,160px)}
.hero-kicker{opacity:0;animation:rise .9s var(--ease) .15s forwards}
.hero-h{font:900 clamp(38px,6vw,88px)/.95 var(--head);letter-spacing:-.04em;text-transform:uppercase}
.hero-h .ln>span{white-space:nowrap}
.hero-h .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero-h .ln>span{display:block;transform:translateY(110%);animation:lineUp 1s var(--ease) forwards}
.hero-h .ln:nth-child(1)>span{animation-delay:.25s}
.hero-h .ln:nth-child(2)>span{animation-delay:.38s}
.hero-h .ln:nth-child(3)>span{animation-delay:.51s}
.hero-h em{font-style:normal;color:transparent;-webkit-text-stroke:2px #8FD8FF;background:linear-gradient(90deg,#8FD8FF,#2F7BFF 60%,#8FD8FF);-webkit-background-clip:text;background-clip:text;background-size:200% 100%;animation:sheen 6s linear infinite}
@keyframes sheen{to{background-position:-200% 0}}
@keyframes lineUp{to{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-sub{margin-top:26px;max-width:46ch;font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:#DCE9FA;opacity:0;animation:rise .9s var(--ease) .75s forwards}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero .hero-cta{opacity:0;animation:rise .9s var(--ease) .9s forwards}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px;opacity:0;animation:rise .9s var(--ease) 1.05s forwards}
.hero-badges li{font:500 13px/1.2 var(--head);letter-spacing:.02em;color:#CFE2FA;padding:9px 14px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(7,27,58,.35)}
.hero-badges b{color:#fff;font-weight:700}

/* phones: the headline is sized to the screen so its longest line always fits, and the
   shade covers the whole photograph because the text does too */
@media (max-width:700px){
  .hero-h{font-size:clamp(26px,8.3vw,60px)}
  .hero-shade{background:linear-gradient(180deg,rgba(7,27,58,.82) 0%,rgba(7,27,58,.6) 45%,rgba(7,27,58,.92) 100%)}
  .hero-in{padding-top:110px}
  .hero-badges{margin-top:28px}
}

.hero-wave{position:absolute;left:0;bottom:-1px;width:200%;height:clamp(50px,8vw,110px);z-index:4}
.hero-wave .w1{fill:rgba(245,250,253,.45);animation:wave 14s linear infinite}
.hero-wave .w2{fill:var(--ground);animation:wave 9s linear infinite reverse}
@keyframes wave{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── figures ──────────────────────────────────────────────────────── */
.figs{position:relative;z-index:2;margin-top:clamp(-70px,-5vw,-40px)}
.figs-in{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#fff;border-radius:var(--r);box-shadow:0 30px 70px -40px rgba(7,27,58,.45);max-width:calc(var(--wrap) - 2*var(--pad));padding:0}
.fig{padding:34px 28px;border-left:1px solid var(--line)}
.fig:first-child{border-left:0}
.fig b{display:block;font:900 clamp(34px,4.4vw,58px)/1 var(--head);letter-spacing:-.04em;color:var(--navy);font-variant-numeric:tabular-nums}
.fig b small{font-size:.46em;letter-spacing:0;margin-left:.18em}
.fig>span{display:block;margin-top:10px;font-size:15px;line-height:1.4;color:var(--sub)}
@media (max-width:860px){.figs-in{grid-template-columns:1fr 1fr;width:auto;margin:0 var(--pad)}.fig{border-left:0;border-top:1px solid var(--line)}.fig:nth-child(-n+2){border-top:0}.fig:nth-child(even){border-left:1px solid var(--line)}.fig{padding:24px 20px}}

/* ── sections ─────────────────────────────────────────────────────── */
.sec{padding:clamp(72px,10vw,140px) 0}
.sec-tint{background:var(--tint)}
.sec-h{margin-bottom:clamp(34px,5vw,60px);max-width:900px}
.sec-h-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;max-width:none;margin-bottom:34px}

/* reveal — only once script has said it is running: without it (or for anything that reads
   the page without executing it) every block is simply visible */
.js .rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0)*90ms)}
.js .rv.is-in{opacity:1;transform:none}

/* photographs do not fade in, they are UNROLLED — left to right, the way a membrane sheet
   goes down — while the picture inside settles from a slight zoom */
/* The clip is on the PICTURE inside, never on the observed figure itself: a box clipped to
   nothing by its own clip-path never counts as intersecting, so it would never open. */
.js .wipe{opacity:1;transform:none;transition:background-color .2s ease 1.2s}
.js .wipe:not(.is-in){background-color:transparent}
.js .wipe picture{clip-path:inset(0 100% 0 0);transition:clip-path 1.25s var(--ease);transition-delay:calc(var(--d,0)*120ms)}
.js .wipe.is-in picture{clip-path:inset(0 0 0 0)}
.js .wipe figcaption{opacity:0;transition:opacity .6s ease .9s}
.js .wipe.is-in figcaption{opacity:1}
.js .wipe img{transform:scale(1.16);transition:transform 1.8s var(--ease);transition-delay:calc(var(--d,0)*120ms)}
.js .wipe.is-in img{transform:none}

/* every section heading is "welded": a line runs out under it with a bright point at its
   tip, which is what a hot-air weld looks like while it is being made */
.sec-h h2,.mem-text h2{position:relative;padding-bottom:26px}
.sec-h h2::after,.mem-text h2::after{content:'';position:absolute;left:0;bottom:0;width:104px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--blue),var(--aqua));transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease) .3s}
.sec-h h2::before,.mem-text h2::before{content:'';position:absolute;left:-4px;bottom:-3px;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(47,123,255,.35),0 0 16px 5px rgba(25,182,210,.95);opacity:0}
.is-in h2::after{transform:scaleX(1)}
.is-in h2::before{animation:spark 1.3s var(--ease) .3s both}
html:not(.js) .sec-h h2::after,html:not(.js) .mem-text h2::after{transform:none}
@keyframes spark{0%{opacity:0;transform:translateX(0)}12%{opacity:1}82%{opacity:1}100%{opacity:0;transform:translateX(104px)}}

/* ── services ─────────────────────────────────────────────────────── */
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.svc-card{position:relative;display:block;aspect-ratio:3/4.3;border-radius:var(--r);overflow:hidden;color:#fff;text-decoration:none;background:var(--navy);isolation:isolate}
.svc-card picture,.svc-card img{position:absolute;inset:0;width:100%;height:100%}
.svc-card img.keep-left{object-position:8% 50%}
.svc-card img{object-fit:cover;transition:transform 1.1s var(--ease)}
.svc-card::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,27,58,.95) 0%,rgba(7,27,58,.45) 42%,rgba(7,27,58,0) 70%);transition:opacity .4s}
.svc-card:hover img{transform:scale(1.08)}
.svc-n{position:absolute;top:18px;left:20px;z-index:2;font:800 13px/1 var(--head);letter-spacing:.14em;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3)}
.svc-t{position:absolute;left:22px;right:22px;bottom:22px;z-index:2;font-size:15.5px;line-height:1.4;color:#D5E4F8;transition:transform .5s var(--ease)}
.svc-t b{display:block;font:800 clamp(22px,2vw,28px)/1.1 var(--head);letter-spacing:-.02em;color:#fff;margin-bottom:8px}
.svc-t b::after{content:'→';display:inline-block;margin-left:10px;color:var(--aqua);opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s var(--ease)}
.svc-card:hover .svc-t b::after{opacity:1;transform:none}
@media (max-width:1000px){.svc{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.svc{grid-template-columns:1fr}.svc-card{aspect-ratio:4/3.4}}

/* ── ticker ───────────────────────────────────────────────────────── */
.ticker{overflow:hidden;border-block:1px solid var(--line);padding:22px 0;background:#fff}
.ticker-run{display:flex;align-items:center;gap:38px;width:max-content;animation:ticker 32s linear infinite}
.ticker span{font:900 clamp(30px,5vw,64px)/1 var(--head);letter-spacing:-.03em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px rgba(11,31,58,.35)}
.ticker span:nth-child(4n+1){color:var(--navy);-webkit-text-stroke:0}
.ticker i{width:14px;height:14px;border-radius:50%;background:var(--aqua);flex:none}
@keyframes ticker{to{transform:translateX(-33.333%)}}

/* ── estimate band ────────────────────────────────────────────────── */
.band{position:relative;overflow:hidden;color:#fff;background:var(--navy);isolation:isolate;padding:clamp(90px,13vw,190px) 0}
.band-photo{position:absolute;inset:-14% 0;z-index:0;will-change:transform}
.band-photo picture,.band-photo img{width:100%;height:100%}
.band-photo img{object-fit:cover}
.band-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(7,27,58,.93),rgba(7,27,58,.62) 55%,rgba(7,27,58,.25))}
.band-in{position:relative;z-index:2;max-width:var(--wrap)}
.band blockquote{font:800 clamp(28px,4.2vw,56px)/1.06 var(--head);letter-spacing:-.03em;max-width:20ch;text-wrap:balance}
.band blockquote::before{content:'';display:block;width:64px;height:4px;border-radius:4px;background:var(--aqua);margin-bottom:26px}
.band p:not(.kicker){margin:24px 0 32px;max-width:48ch;font-size:19px;color:#DCE9FA}

/* ── details ──────────────────────────────────────────────────────── */
.craft{display:grid;grid-template-columns:1fr 1.25fr .85fr;grid-template-rows:auto auto;gap:16px}
.craft figure{position:relative;border-radius:var(--r);overflow:hidden;background:var(--navy)}
.craft picture,.craft img{width:100%;height:100%}
.craft img{object-fit:cover;transition:transform 1.1s var(--ease)}
.craft figure:hover img{transform:scale(1.06)}
.craft-a{grid-row:1/3;min-height:520px}
.craft-b{grid-column:2;grid-row:1/3}
.craft-c,.craft-d{aspect-ratio:1}
.craft figcaption,.abt-shots figcaption{position:absolute;left:14px;bottom:14px;font:700 12px/1 var(--head);letter-spacing:.1em;text-transform:uppercase;color:#fff;padding:9px 12px;border-radius:999px;background:rgba(7,27,58,.72)}
@media (max-width:900px){.craft{grid-template-columns:1fr 1fr}.craft-a{grid-row:auto;grid-column:1/3;min-height:0;aspect-ratio:4/3}.craft-b{grid-column:1/3;grid-row:auto;aspect-ratio:4/3}}

/* ── work rail ────────────────────────────────────────────────────── */
.rail-ctl{display:flex;gap:10px;flex:none}
.rail-btn{width:54px;height:54px;border-radius:50%;border:1.5px solid var(--navy);background:none;color:var(--navy);font-size:20px;cursor:pointer;transition:background .25s,color .25s,transform .25s var(--ease),opacity .25s}
.rail-btn:hover{background:var(--navy);color:#fff;transform:scale(1.06)}
.rail-btn:disabled{opacity:.28;cursor:default;transform:none;background:none;color:var(--navy)}
.rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px max(var(--pad),calc((100vw - var(--wrap))/2 + var(--pad))) 26px;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail.is-drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.rail.is-drag *{pointer-events:none}
.rail-item{position:relative;flex:none;width:min(82vw,520px);aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;scroll-snap-align:center;background:var(--navy)}
.rail-item picture,.rail-item img{width:100%;height:100%}
.rail-item img{object-fit:cover;transition:transform 1.2s var(--ease);-webkit-user-drag:none;user-select:none}
.rail-item:hover img{transform:scale(1.05)}
.rail-item figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:40px 20px 18px;font:700 15px/1.2 var(--head);color:#fff;background:linear-gradient(0deg,rgba(7,27,58,.9),transparent)}
.rail-item figcaption span{font-size:12px;letter-spacing:.14em;color:var(--aqua)}
.rail-more{flex:none;width:min(70vw,340px);aspect-ratio:3/3.4;border-radius:var(--r);scroll-snap-align:center;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:26px;text-decoration:none;color:#fff;background:linear-gradient(150deg,var(--blue),var(--navy-2) 70%);position:relative;overflow:hidden}
.rail-more b{font:800 28px/1.05 var(--head);letter-spacing:-.02em}
.rail-more span{font-size:15px;color:#CFE2FA}
.rail-more i{position:absolute;top:22px;right:24px;font:400 30px/1 var(--head);font-style:normal;transition:transform .35s var(--ease)}
.rail-more:hover i{transform:translateX(8px)}
.rail-bar{height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.rail-bar i{display:block;height:100%;width:20%;border-radius:3px;background:var(--blue);transform-origin:left;transition:width .2s linear}
@media (max-width:700px){.rail-ctl{display:none}}

/* ── membranes ────────────────────────────────────────────────────── */
.mem{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,6vw,90px);align-items:center}
.mem-text p:not(.kicker){margin-top:18px;color:var(--sub);max-width:52ch}
.mem-brands{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 30px}
.mem-brands li{font:800 15px/1 var(--head);letter-spacing:.12em;padding:13px 18px;border-radius:12px;background:#fff;border:1px solid var(--line);color:var(--navy)}
.mem-vis{position:relative}

/* The pool. No picture of a pool anywhere: ONE plane, tilted in perspective, with the
   depth drawn inside it. Looking down into a pool from the near side, the floor appears
   pushed toward you and the two FAR walls open up behind it — so the floor is the opening
   shifted by (--sx, --sy), the walls are the two slivers that shift uncovers, and .p-in
   clips everything to the opening the way a deck would. Nested 3D planes did this more
   literally, but the WebKit build we can test with draws nested preserve-3d flat (floor
   level with the deck, no walls — sampled 2026-09-19), and a flat plane cannot fail that
   way. Every surface holds all four membranes; [data-tex] on the root fades one in. */
.pool3d{position:relative;height:clamp(290px,35vw,430px);display:grid;place-items:center;perspective:1300px;overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse 74% 76% at 50% 48%,#000 60%,transparent 97%);mask-image:radial-gradient(ellipse 74% 76% at 50% 48%,#000 60%,transparent 97%);
  background:radial-gradient(ellipse 60% 26% at 50% 80%,rgba(7,27,58,.2),transparent 70%)}
.pool-body{--w:clamp(230px,28vw,360px);--sx:calc(var(--w)*.115);--sy:calc(var(--w)*.2);
  position:relative;width:var(--w);aspect-ratio:1.5;border:calc(var(--w)*.03) solid #F8FBFD;border-radius:0;
  box-shadow:0 0 0 calc(var(--w)*.22) #DDE7EF,0 calc(var(--w)*.08) calc(var(--w)*.12) calc(var(--w)*.2) rgba(7,27,58,.10);
  transform:rotateX(56deg) rotateZ(-30deg);animation:poolTurn 12s ease-in-out infinite alternate}
@keyframes poolTurn{from{transform:rotateX(57deg) rotateZ(-33deg) translateZ(0)}to{transform:rotateX(55deg) rotateZ(-27deg) translateZ(14px)}}
.p-in{position:absolute;inset:0;overflow:hidden;background:#0B2A55}
.p-in i{position:absolute;display:block}
.p-in b{position:absolute;inset:0;background-size:calc(var(--w)*.62) calc(var(--w)*.62);opacity:0;transition:opacity 1s var(--ease)}
.t-mosaic{background-image:url(../img/tex-mosaic.jpg)}
.t-granite{background-image:url(../img/tex-granite.jpg)}
.t-marble{background-image:url(../img/tex-marble.jpg)}
.t-blue{background-image:url(../img/tex-blue.jpg)}
[data-tex="mosaic"] .t-mosaic,[data-tex="granite"] .t-granite,[data-tex="marble"] .t-marble,[data-tex="blue"] .t-blue{opacity:1}

/* far walls: the full opening, cut to the sliver the shifted floor leaves uncovered */
.p-wall{inset:0}
.p-wall-n{clip-path:polygon(0 0,100% 0,calc(100% - var(--sx)) var(--sy),calc(var(--sx)*-1) var(--sy))}
.p-wall-e{clip-path:polygon(100% 0,100% 100%,calc(100% - var(--sx)) calc(100% + var(--sy)),calc(100% - var(--sx)) var(--sy))}
.p-wall::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,27,58,.05),rgba(7,27,58,.42) 20%)}
.p-wall-e::after{background:linear-gradient(270deg,rgba(7,27,58,.3),rgba(7,27,58,.68) 12%)}
/* the floor: the opening, pushed toward the viewer by the depth */
.p-floor{inset:0;transform:translate(calc(var(--sx)*-1),var(--sy));box-shadow:inset 0 0 calc(var(--w)*.12) rgba(7,27,58,.4)}
/* two steps in the far-left corner, each a third of the depth higher than the last */
.p-step-2{left:0;top:0;width:40%;height:54%;transform:translate(calc(var(--sx)*-.66),calc(var(--sy)*.66));box-shadow:calc(var(--w)*.012) calc(var(--w)*.02) calc(var(--w)*.04) rgba(7,27,58,.45)}
.p-step-1{left:0;top:0;width:25%;height:34%;transform:translate(calc(var(--sx)*-.33),calc(var(--sy)*.33));box-shadow:calc(var(--w)*.012) calc(var(--w)*.02) calc(var(--w)*.04) rgba(7,27,58,.45)}
/* water: a tint over the whole opening, and light that wanders across it */
.p-water{inset:0;
  background:
    radial-gradient(ellipse 30% 22% at 30% 35%,rgba(255,255,255,.5),transparent 65%),
    radial-gradient(ellipse 26% 18% at 72% 62%,rgba(255,255,255,.38),transparent 65%),
    radial-gradient(ellipse 22% 26% at 55% 20%,rgba(200,240,255,.42),transparent 65%),
    linear-gradient(135deg,rgba(70,200,240,.36),rgba(25,120,215,.46));
  background-size:140% 140%,150% 150%,130% 130%,100% 100%;
  animation:poolLight 9s ease-in-out infinite alternate}
@keyframes poolLight{from{background-position:0% 0%,100% 100%,40% 80%,0 0}to{background-position:80% 60%,10% 20%,90% 10%,0 0}}

.pool-pick{display:flex;justify-content:center;gap:clamp(8px,1.6vw,18px);margin-top:10px}
.pool-pick button{display:flex;flex-direction:column;align-items:center;gap:9px;padding:6px;border:0;background:none;cursor:pointer;
  font:600 12.5px/1.2 var(--head);letter-spacing:.03em;color:var(--sub);transition:color .3s,transform .4s var(--ease)}
.pool-pick span{width:clamp(52px,6vw,68px);aspect-ratio:1;border-radius:50%;background-size:cover;background-position:center;
  border:3px solid #fff;box-shadow:0 10px 24px -12px rgba(7,27,58,.6);transition:box-shadow .35s,transform .4s var(--ease)}
.pool-pick button:hover span{transform:translateY(-4px)}
.pool-pick .is-on{color:var(--navy)}
.pool-pick .is-on span{box-shadow:0 0 0 3px var(--blue),0 14px 28px -12px rgba(47,123,255,.8);transform:translateY(-4px) scale(1.06)}
.pool-note{margin-top:16px;text-align:center;font-size:14px;color:var(--sub)}
@media (max-width:900px){.mem{grid-template-columns:1fr}}

/* ── about ────────────────────────────────────────────────────────── */
.abt{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,5vw,80px);align-items:start}
.abt-team{border-radius:var(--r);overflow:hidden;position:sticky;top:110px}
.abt-team img{width:100%;aspect-ratio:4/4.4;object-fit:cover}
.abt-line{position:relative;padding-left:34px;counter-reset:s}
.abt-line::before{content:'';position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--blue),var(--aqua));border-radius:2px}
.abt-line li{position:relative;padding:0 0 38px}
.abt-line li:last-child{padding-bottom:0}
.abt-line li::before{content:'';position:absolute;left:-34px;top:12px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--blue);box-shadow:0 0 0 5px var(--ground)}
.abt-line b{display:block;font:900 clamp(34px,4.6vw,60px)/1 var(--head);letter-spacing:-.04em;color:var(--navy)}
.abt-line span{display:block;margin-top:10px;color:var(--sub);max-width:46ch}
.abt-shots{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;margin-top:clamp(40px,6vw,80px)}
.abt-shots figure{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:auto;height:clamp(220px,28vw,380px);background:var(--navy)}
.abt-shots picture,.abt-shots img{width:100%;height:100%}
.abt-shots img{object-fit:cover;transition:transform 1.1s var(--ease)}
.abt-shots figure:hover img{transform:scale(1.06)}
.certs{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:22px;margin-top:34px;padding:26px 28px;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.certs ul{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 520px}
.certs li{font:600 13.5px/1.2 var(--head);padding:10px 14px;border-radius:999px;background:var(--tint);color:var(--navy)}
.certs li::before{content:'✓';color:var(--blue-ink);font-weight:900;margin-right:8px}
@media (max-width:900px){.abt{grid-template-columns:1fr}.abt-team{position:static}.abt-shots{grid-template-columns:1fr 1fr}.abt-shots figure:first-child{grid-column:1/3}}

/* ── questions ────────────────────────────────────────────────────── */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,80px);align-items:start}
.faq .sec-h{margin-bottom:0;position:sticky;top:110px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0;font:700 clamp(18px,1.8vw,22px)/1.25 var(--head);letter-spacing:-.01em;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--navy);background:
  linear-gradient(var(--navy),var(--navy)) center/12px 1.5px no-repeat,
  linear-gradient(var(--navy),var(--navy)) center/1.5px 12px no-repeat;transition:transform .35s var(--ease),background-color .25s}
.faq details[open] summary::after{transform:rotate(45deg);background-color:var(--tint)}
.faq details p{padding:0 54px 26px 0;color:var(--sub);max-width:62ch;animation:rise .45s var(--ease)}
@media (max-width:900px){.faq{grid-template-columns:1fr}.faq .sec-h{position:static;margin-bottom:24px}}

/* ── contact ──────────────────────────────────────────────────────── */
.contact{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(120% 140% at 85% 0%,#123A78 0%,var(--navy) 55%);color:#fff;padding:clamp(80px,11vw,150px) 0}
.contact-caustics{opacity:.12}
.contact-in{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,90px);align-items:center}
.contact h2{color:#fff}
.contact-lead{margin-top:18px;max-width:50ch;color:#CFE2FA;font-size:18px}
.nap{display:grid;gap:0;border-radius:var(--r);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);padding:8px 26px}
.nap div{padding:20px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.nap div:last-child{border-bottom:0}
.nap span{display:block;font:700 12px/1 var(--head);letter-spacing:.16em;text-transform:uppercase;color:#9CC4FF;margin-bottom:8px}
.nap a,.nap p{font:600 clamp(17px,1.6vw,21px)/1.35 var(--head);color:#fff;text-decoration:none}
.nap a:hover{color:var(--aqua)}
@media (max-width:900px){.contact-in{grid-template-columns:1fr}}

/* ── footer ───────────────────────────────────────────────────────── */
.ftr{background:#04122A;color:#9FB4CF;padding:44px 0 110px;font-size:14.5px}
.ftr-in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px 40px}
.ftr-logo{width:170px;height:auto}
.ftr-ca{display:flex;align-items:center;gap:8px;font:700 12.5px/1 var(--head);letter-spacing:.18em;text-transform:uppercase;color:#CFE2FA}
.ftr nav{display:flex;flex-wrap:wrap;gap:20px}
.ftr nav a{color:#CFE2FA;text-decoration:none;display:inline-block;padding:9px 0}
.ftr nav a:hover,.ftr-legal a:hover{color:#fff}
.ftr-legal{grid-column:1/-1;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:13px;line-height:1.7}
@media (max-width:800px){.ftr-in{grid-template-columns:1fr}}
@media (min-width:761px){.ftr{padding-bottom:44px}}

/* ── phone dock ───────────────────────────────────────────────────── */
.dock{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:30;display:none;gap:8px;padding:8px;border-radius:999px;background:rgba(7,27,58,.94);box-shadow:0 18px 40px -18px rgba(0,0,0,.7);transform:translateY(140%);transition:transform .5s var(--ease)}
.dock.is-up{transform:none}
.dock a{flex:1;text-align:center;padding:14px 10px;border-radius:999px;font:700 15px/1 var(--head);color:#fff;text-decoration:none;border:1.5px solid rgba(255,255,255,.3)}
.dock .dock-main{flex:2.1;background:var(--blue-ink);border-color:var(--blue-ink)}
@media (max-width:760px){.dock{display:flex}}

/* ── what follows the visitor: the call button and the way to the simple view ───────── */
.fab{position:fixed;right:22px;bottom:22px;z-index:31;display:flex;align-items:center;gap:0;height:60px;min-width:60px;padding:0 18px;border-radius:999px;
  background:var(--blue-ink);color:#fff;text-decoration:none;font:700 15px/1 var(--head);box-shadow:0 16px 34px -12px rgba(47,123,255,.85);transition:gap .35s var(--ease),transform .3s var(--ease),background .25s}
.fab span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .4s var(--ease)}
.fab:hover,.fab:focus-visible{gap:10px;background:#174FBE;transform:translateY(-2px)}
.fab:hover span,.fab:focus-visible span{max-width:170px}
.fab::before{content:"";position:absolute;left:0;top:0;width:60px;height:60px;border-radius:50%;border:2px solid var(--blue);animation:ring 2.6s ease-out infinite;pointer-events:none}
@keyframes ring{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.7);opacity:0}}
@media (max-width:760px){.fab{display:none}}

.side{position:fixed;right:0;top:54%;z-index:32;transform:translateY(-50%);width:36px}
.side-tab{display:flex;align-items:center;gap:9px;writing-mode:vertical-rl;transform:rotate(180deg);padding:16px 9px;border:0;border-radius:0 12px 12px 0;cursor:pointer;
  background:var(--navy);color:#fff;font:700 12px/1 var(--head);letter-spacing:.16em;text-transform:uppercase;box-shadow:0 12px 30px -14px rgba(7,27,58,.8);transition:background .25s,padding .3s var(--ease)}
.side-tab svg{transform:rotate(90deg);color:#8FD8FF}
.side-tab{width:36px;justify-content:center}
.side-tab:hover,.side.is-open .side-tab{background:var(--blue-ink)}
.side-panel{position:absolute;right:calc(100% + 12px);top:50%;width:min(280px,76vw);padding:22px;border-radius:16px;background:#fff;color:var(--ink);
  box-shadow:0 30px 70px -30px rgba(7,27,58,.6),0 0 0 1px var(--line);opacity:0;visibility:hidden;transform:translate(14px,-50%);transition:opacity .3s,transform .35s var(--ease),visibility .3s}
.side-panel b{display:block;font:800 19px/1.15 var(--head);letter-spacing:-.015em;color:var(--navy)}
.side-panel p{margin:9px 0 16px;font-size:15px;line-height:1.45;color:var(--sub)}
.side-panel .btn{width:100%}
.side-panel p:first-child{margin-top:0}
.side.is-open .side-panel{opacity:1;visibility:visible;transform:translate(0,-50%)}
@media (hover:hover){.side:hover .side-panel{opacity:1;visibility:visible;transform:translate(0,-50%)}}
/* phones: lower than on a desktop — at 46% it ran into the end of the hero's text lines; at
   60% it has the empty space beside the two buttons, and is still well clear of the dock */
@media (max-width:760px){.side{top:60%;width:34px}.side-tab{width:34px;padding:13px 0;font-size:12px}}
/* a phone held sideways: the round call button would sit on the Simple-view tab, so the
   bottom dock takes its place and the tab moves up a little */
@media (max-width:900px) and (max-height:520px){.fab{display:none}.dock{display:flex}.side{top:42%}}

/* ── people who asked for less motion get none ────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.hero-kicker,.hero-sub,.hero .hero-cta,.hero-badges{opacity:1;transform:none}
  .hero-h .ln>span{transform:none}
}