:root{
  /* ===== TurFresh-aligned palette, all pairings WCAG AA verified ===== */
  --navy:#041E42; --navy-2:#0C3468;--navy-card:#0E2747; --navy-d:#02132B; --gunmetal:#5C6672;
  --porcelain:#F6F8FA; --white:#FFFFFF;
  /* brand green: use --pool on navy surfaces, --pool-deep for text/links on light */
  --pool:#80C241; --pool-deep:#4D7B26; --pool-soft:#B6DE87; --pool-wash:#E9F4D8;
  /* CTA orange: --cta for large bold buttons (AA Large), --cta-deep for small/compact (AA Normal) */
  --cta:#FA4616; --cta-deep:#C23A0F; --cta-light:#FF7A4D;
  /* product finish colors, NOT UI. Used only by the funnel color picker. */
  --finish-tan:#C9B795; --finish-grey:#9AA1A8;
  /* Plus Jakarta Sans, geometric sans. 300 is the body weight, headings stay heavy. */
  --display:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --max:1180px; --radius:14px; --shadow:0 14px 44px rgba(4,30,66,.12);
  --seam-glow:0 0 16px rgba(128,194,65,.55), 0 0 3px rgba(128,194,65,.9);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);font-weight:300;color:var(--navy);background:var(--white);line-height:1.68;font-size:17.5px;letter-spacing:-.003em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
a{color:var(--pool-deep);text-decoration:none}
.on-dark a{color:var(--pool)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--pool);outline-offset:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
h1,h2,h3,.display{font-family:var(--display);font-weight:800;line-height:1.08;letter-spacing:.01em}
h1{font-weight:900;font-size:clamp(2.5rem,5.4vw,4.3rem);letter-spacing:.005em}
h2{font-size:clamp(2rem,3.8vw,2.9rem)}
h3{font-size:1.2rem;font-weight:700}
.eyebrow{font-family:var(--mono);font-size:.76rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--pool-deep);display:flex;align-items:center;gap:12px;margin-bottom:18px}
.eyebrow::before{content:"";width:34px;height:3px;background:var(--pool);box-shadow:var(--seam-glow);border-radius:2px}
.on-dark .eyebrow{color:var(--pool)}
.lede{font-size:1.16rem;color:var(--gunmetal);max-width:62ch}
.on-dark .lede{color:rgba(246,248,250,.8)}
.mono{font-family:var(--mono)}

/* motion */
@keyframes waveSlide{from{transform:translateX(0)}to{transform:translateX(-120px)}}
@keyframes caustic{0%,100%{opacity:.2}50%{opacity:.55}}
@keyframes shimmer{from{transform:translateX(-140%)}to{transform:translateX(240%)}}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes drawSeam{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ping{0%{transform:scale(.7);opacity:.85}100%{transform:scale(2.4);opacity:0}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes scan{0%{left:8%}100%{left:84%}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

.seam{height:3px;border:0;background:linear-gradient(90deg,transparent,var(--pool) 14%,var(--pool) 86%,transparent);box-shadow:var(--seam-glow);transform-origin:left center}
.js .seam{transform:scaleX(0)}
.seam.in{animation:drawSeam 1.1s cubic-bezier(.6,0,.2,1) forwards}
@media (prefers-reduced-motion:reduce){.seam{transform:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--display);font-weight:800;font-size:.98rem;letter-spacing:.02em;padding:17px 30px;border-radius:10px;border:0;cursor:pointer;transition:background .18s,transform .18s,box-shadow .18s;text-align:center;position:relative;overflow:hidden}



.btn-ghost{background:transparent;color:#fff;border:2px solid rgba(246,248,250,.4)}
.btn-ghost:hover{border-color:var(--pool);color:var(--pool)}
.btn-dark{background:var(--navy);color:#fff}.btn-dark:hover{background:var(--navy-2)}
.btn-block{width:100%}


/* luxury ghosted hero + animated stat band */
.lux-hero{position:relative;overflow:hidden;background:var(--navy)}
.lux-hero .lux-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.22;filter:saturate(.9)}
.lux-hero .lux-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,30,66,.72),rgba(2,19,43,.92))}
.lux-hero .wrap{position:relative;z-index:2}
.lux-stats{display:flex;flex-wrap:wrap;gap:30px;margin-top:30px}
.lux-stat b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(2rem,5vw,3rem);color:var(--pool);line-height:1;text-shadow:0 0 34px rgba(128,194,65,.35)}
.lux-stat b i{font-style:normal;font-size:.45em;color:var(--pool-soft);margin-left:2px}
.lux-stat>span{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(246,248,250,.66);margin-top:10px}
@media(max-width:560px){.lux-stats{gap:22px}}

/* NAV - bigger logo */
.nav{position:sticky;top:0;z-index:60;background:rgba(4,30,66,.94);backdrop-filter:blur(10px);border-bottom:1px solid rgba(128,194,65,.25)}
.nav-inner{display:flex;align-items:center;gap:26px;height:150px}
.logo-img{height:190px;width:auto;display:block;transition:transform .2s}
.logo:hover .logo-img{transform:scale(1.03)}
.nav-links{display:flex;gap:24px;margin-left:auto}
.nav-links a{color:rgba(246,248,250,.86);font-weight:700;font-size:.93rem}
.nav-links a:hover{color:var(--pool)}
.nav-phone{color:#fff;font-family:var(--mono);font-size:.9rem;white-space:nowrap}
.nav-phone:hover{color:var(--pool)}
.nav .btn{padding:13px 20px;font-size:.9rem}
.ham{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto}
.ham span{display:block;width:26px;height:2.6px;background:#fff;margin:5px 0;border-radius:2px}
.mnav{position:fixed;inset:0;background:rgba(2,19,43,.985);z-index:90;display:none;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-align:center;padding:20px}
.mnav.open{display:flex}
.mnav a{font-family:var(--display);font-weight:800;font-size:1.4rem;color:#fff}
.mnav a:hover{color:var(--pool)}
.mnav .m-phone{font-family:var(--mono);font-size:1rem;color:var(--pool)}
.mnav-close{position:absolute;top:20px;right:24px;background:none;border:0;color:#fff;font-size:2.2rem;cursor:pointer;line-height:1}
@media(max-width:1040px){.nav-links{display:none}.nav .btn{display:none}.ham{display:block}.logo-img{height:144px}}
@media(min-width:1041px){.mnav{display:none!important}}

/* HERO with ghosted pool */
.hero{position:relative;overflow:hidden;color:#fff;background:linear-gradient(180deg,var(--navy-d),var(--navy) 55%,var(--navy-2))}
.hero-pool{position:absolute;inset:0;z-index:0;opacity:.92}
.hero-pool svg{width:100%;height:100%}
.hero-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(2,19,43,.92) 0%,rgba(2,19,43,.72) 38%,rgba(2,19,43,.30) 70%,rgba(2,19,43,.12) 100%),linear-gradient(0deg,rgba(2,19,43,.55),transparent 45%)}
.hero-copy{position:relative;z-index:2;text-align:center;max-width:880px;margin:0 auto;padding:96px 24px 40px}
.hero-kicker{font-family:var(--mono);font-size:.76rem;letter-spacing:.3em;text-transform:uppercase;color:var(--pool);margin-bottom:24px;display:inline-flex;align-items:center;gap:14px}
.hero-kicker::before,.hero-kicker::after{content:"";width:30px;height:3px;background:var(--pool);box-shadow:var(--seam-glow);border-radius:2px}
.hero h1{margin-bottom:22px}.hero h1 em{font-style:normal;color:var(--pool);text-shadow:0 0 30px rgba(128,194,65,.5)}
.hero-sub{font-size:1.2rem;color:rgba(246,248,250,.86);max-width:54ch;margin:0 auto 36px}.hero-sub b{color:#fff}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:44px}
.hero-stats{display:flex;justify-content:center;flex-wrap:wrap}
.stat{padding:0 34px;border-left:1px solid rgba(246,248,250,.2)}.stat:first-child{border-left:0}
.stat b{display:block;font-family:var(--display);font-weight:900;font-size:1.8rem;color:var(--pool)}
.stat b .count{color:var(--pool);font-size:inherit;font-family:inherit;font-weight:inherit;letter-spacing:0;text-transform:none}
.stat span{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,248,250,.62)}
@media(max-width:560px){.stat{padding:0 16px}.hero-copy{padding-top:64px}}

/* ticker */
.ticker{background:var(--navy-2);border-top:1px solid rgba(128,194,65,.25);border-bottom:1px solid rgba(128,194,65,.25);overflow:hidden;padding:13px 0;position:relative;z-index:3}
.ticker-track{display:flex;width:max-content;animation:ticker 40s linear infinite;font-family:var(--mono);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(246,248,250,.58);white-space:nowrap}
.ticker-track span{padding:0 24px}.ticker-track .dot{color:var(--pool)}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* trust */
.trust{background:#fff;border-bottom:1px solid #E5EAF0}
.trust-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:24px 0}
.trust-item{display:flex;align-items:center;gap:12px;font-weight:700;font-size:.9rem}.trust-item svg{flex:none}
@media(max-width:920px){.trust-inner{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.trust-inner{grid-template-columns:1fr;gap:12px}}

section{padding:92px 0}@media(max-width:720px){section{padding:62px 0}}
.section-head{max-width:760px;margin-bottom:54px}
.bg-porcelain{background:var(--porcelain)}
.bg-navy{background:var(--navy);color:#fff}


/* cost */
.cost{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:stretch;max-width:1000px;margin:0 auto}
.cost-card{border-radius:var(--radius);padding:40px 36px;position:relative;overflow:hidden}
.cost-now{background:#fff;border:2px solid var(--pool);box-shadow:0 18px 50px rgba(128,194,65,.22)}
.cost-now::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--pool);box-shadow:var(--seam-glow)}
.cost-wait{background:var(--navy);color:#fff}
.cost-wait::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:repeating-linear-gradient(90deg,var(--gunmetal) 0 14px,transparent 14px 24px)}
.cost-label{font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px;display:block}
.cost-now .cost-label{color:var(--pool-deep)}.cost-wait .cost-label{color:rgba(246,248,250,.6)}
.cost-amount{font-family:var(--display);font-weight:900;font-size:clamp(2.3rem,4vw,3.4rem);line-height:1;margin-bottom:14px}
.cost-card ul{list-style:none;margin-top:18px}.cost-card li{padding:8px 0 8px 26px;position:relative;font-size:.94rem}
.cost-now li{color:var(--gunmetal)}.cost-wait li{color:rgba(246,248,250,.78)}
.cost-card li::before{content:"";position:absolute;left:0;top:14px;width:14px;height:3px;border-radius:2px}
.cost-now li::before{background:var(--pool)}.cost-wait li::before{background:var(--gunmetal)}
.cost-vs{align-self:center;font-family:var(--display);font-weight:900;color:var(--gunmetal);background:var(--porcelain);border:1.5px solid #E5EAF0;width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center}
@media(max-width:760px){.cost{grid-template-columns:1fr}.cost-vs{margin:0 auto}}

/* process photos */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.step{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1.5px solid #E5EAF0}
.step-photo{aspect-ratio:4/3;overflow:hidden;background:var(--navy-2);position:relative}
.step-photo img{width:100%;height:100%;object-fit:cover}
.step-badge{position:absolute;top:14px;left:14px;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;background:rgba(4,30,66,.86);color:var(--pool);padding:6px 11px;border-radius:6px}
.step-inner{padding:24px 28px 30px}
.step h3{margin-bottom:10px}.step p{color:var(--gunmetal);font-size:.94rem}
.step .mono-fact{display:block;margin-top:16px;padding-top:14px;border-top:1px solid #E5EAF0;font-family:var(--mono);font-size:.74rem;color:var(--pool-deep)}
@media(max-width:880px){.steps{grid-template-columns:1fr}}

/* video */
.video-card{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#000;position:relative}
.video-card video{width:100%;height:auto;display:block}
.video-frame{border:1.5px solid rgba(128,194,65,.3)}

/* quote / forms */
.quote-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start}
.quote-points{list-style:none;margin-top:26px}
.quote-points li{padding:12px 0 12px 34px;position:relative;color:rgba(246,248,250,.82)}
.quote-points li::before{content:"";position:absolute;left:0;top:20px;width:18px;height:3px;background:var(--pool);box-shadow:var(--seam-glow);border-radius:2px}
.quote-points b{color:#fff}
.form-card{background:#fff;border-radius:var(--radius);padding:40px 36px;box-shadow:0 30px 80px rgba(0,0,0,.4);color:var(--navy);position:relative}
.form-card::before{content:"";position:absolute;top:0;left:24px;right:24px;height:4px;background:var(--pool);box-shadow:var(--seam-glow);border-radius:0 0 4px 4px}
.form-card h3{font-size:1.35rem;margin-bottom:6px}
.form-promise{font-family:var(--mono);font-size:.74rem;color:var(--pool-deep);margin-bottom:24px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f-field{margin-bottom:15px}
.f-field label{display:block;font-weight:700;font-size:.84rem;margin-bottom:6px}
.f-field input,.f-field select,.f-field textarea{width:100%;padding:13px 14px;border:1.5px solid #D5DCE4;border-radius:8px;font-family:var(--body);font-size:1rem;color:var(--navy);background:#fff}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{border-color:var(--pool)}
.spec-label{display:block;font-weight:700;font-size:.84rem;margin-bottom:6px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{flex:1;min-width:80px;border:1.5px solid #D5DCE4;border-radius:8px;padding:11px 6px;cursor:pointer;font-weight:700;font-size:.84rem;background:#fff;color:var(--navy);display:flex;align-items:center;justify-content:center;gap:7px;font-family:var(--body)}
.chip.sel{border-color:var(--pool);background:rgba(128,194,65,.1);color:var(--pool-deep)}
.swatch{width:14px;height:14px;border-radius:50%;border:1px solid rgba(4,30,66,.25);flex:none}
.sw-grey{background:#8B9097}.sw-tan{background:var(--pool)}
.sw-sand{background:#8B9097 url("data:image/svg+xml,%3Csvg width='8' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='.9' fill='%23F6F8FA' fill-opacity='.8'/%3E%3Ccircle cx='6' cy='5' r='.8' fill='%230A1C33' fill-opacity='.5'/%3E%3C/svg%3E")}
.form-fine{font-size:.76rem;color:var(--gunmetal);margin-top:12px}
.form-success{display:none;text-align:center;padding:30px 10px}
.form-success b{font-family:var(--display);font-size:1.3rem;display:block;margin-bottom:8px}
@media(max-width:920px){.quote-grid{grid-template-columns:1fr;gap:38px}}
@media(max-width:560px){.f-row{grid-template-columns:1fr}.form-card{padding:30px 22px}}

/* map + areas */
.map-shell{background:var(--navy);border-radius:var(--radius);padding:34px 26px 20px;position:relative;overflow:hidden;margin-bottom:30px}
.map-shell::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 50% 110%,rgba(128,194,65,.16),transparent 70%)}
.map-shell svg{position:relative;width:100%;height:auto}
.map-legend{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;padding:18px 0 6px;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(246,248,250,.65);position:relative}
.lg{display:flex;align-items:center;gap:9px}.lg i{width:11px;height:11px;border-radius:50%;flex:none}
.lg-live i{background:var(--pool);box-shadow:var(--seam-glow)}.lg-soon i{background:transparent;border:2px solid var(--gunmetal)}
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.area-card{background:#fff;border:1.5px solid #E5EAF0;border-radius:var(--radius);padding:26px 24px}
.area-card.active{border-color:var(--pool);box-shadow:0 12px 36px rgba(128,194,65,.16)}
.area-tag{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;padding:4px 10px;border-radius:99px;display:inline-block;margin-bottom:14px}
.tag-live{background:rgba(128,194,65,.14);color:var(--pool-deep)}.tag-soon{background:#EDF0F4;color:var(--gunmetal)}
.area-card h3{font-size:1.04rem;margin-bottom:6px}.area-card p{font-size:.86rem;color:var(--gunmetal)}
.area-call{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-family:var(--mono);font-size:.84rem;color:var(--pool-deep);font-weight:700}
.area-call:hover{color:var(--navy)}
.franchise-card{grid-column:1/-1;background:var(--navy);color:#fff;border-radius:var(--radius);padding:42px 40px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;position:relative;overflow:hidden}
.franchise-card::after{content:"PROTECTED TERRITORY";position:absolute;right:-30px;bottom:-26px;font-family:var(--display);font-weight:900;font-size:5rem;color:transparent;-webkit-text-stroke:1px rgba(128,194,65,.16);pointer-events:none;white-space:nowrap}
.franchise-card h3{font-size:1.4rem;margin-bottom:8px}.franchise-card p{color:rgba(246,248,250,.75);max-width:54ch}
.franchise-card .btn{position:relative;z-index:1}
@media(max-width:880px){.areas{grid-template-columns:1fr 1fr}}@media(max-width:560px){.areas{grid-template-columns:1fr}}

/* projects / before-after */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.ba-card{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#fff;border:1.5px solid #E5EAF0}
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#E5EAF0;position:relative}
.ba-half{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--navy-2)}
.ba-half img{width:100%;height:100%;object-fit:cover}
.ba-half span{position:absolute;top:10px;left:10px;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:#fff;padding:5px 9px;border-radius:5px}
.ba-half.before span{background:rgba(92,102,114,.92)}.ba-half.after span{background:rgba(128,194,65,.92);color:var(--navy);left:auto;right:10px}
.ba-body{padding:22px 24px}.ba-body h3{font-size:1.05rem;margin-bottom:6px}.ba-body p{font-size:.9rem;color:var(--gunmetal)}
@media(max-width:760px){.ba-grid{grid-template-columns:1fr}}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gphoto{border-radius:12px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:3/4;background:var(--navy-2);position:relative}
.gphoto img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gphoto:hover img{transform:scale(1.05)}
.gphoto span{position:absolute;left:10px;bottom:10px;right:10px;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(4,30,66,.82);padding:7px 9px;border-radius:6px}
@media(max-width:880px){.gallery{grid-template-columns:1fr 1fr}}

/* reviews widget */
.rev-head{display:flex;align-items:center;gap:18px;justify-content:center;margin-bottom:38px;flex-wrap:wrap}
.rev-badge{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid #E5EAF0;border-radius:14px;padding:14px 22px;box-shadow:var(--shadow)}
.rev-badge .g{font-family:var(--display);font-weight:800;font-size:1.5rem}
.rev-badge .g b:nth-child(1){color:#4285F4}.rev-stars{color:#FBBC05;letter-spacing:2px;font-size:1.1rem}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.review{background:#fff;border-radius:var(--radius);padding:32px 28px 26px;box-shadow:var(--shadow);display:flex;flex-direction:column;position:relative}
.review .stars{color:#FBBC05;letter-spacing:2px;margin-bottom:14px}
.review p{flex:1;font-size:.98rem}
.review-meta{margin-top:20px;padding-top:14px;border-top:1px solid #E5EAF0;font-family:var(--mono);font-size:.78rem;color:var(--gunmetal);display:flex;align-items:center;gap:8px}
.review-meta b{color:var(--navy);font-weight:700}
.gmark{margin-left:auto;font-family:var(--display);font-weight:800}
.gmark b:nth-child(1){color:#4285F4}.gmark b:nth-child(2){color:#EA4335}.gmark b:nth-child(3){color:#FBBC05}.gmark b:nth-child(4){color:#4285F4}.gmark b:nth-child(5){color:#34A853}.gmark b:nth-child(6){color:#EA4335}
.widget-note{text-align:center;font-family:var(--mono);font-size:.7rem;color:var(--gunmetal);margin-top:24px;letter-spacing:.06em}
@media(max-width:880px){.reviews{grid-template-columns:1fr}}

/* jobs widget */
.jobs-strip{background:var(--navy);border-radius:var(--radius);padding:26px 26px 30px;position:relative;overflow:hidden}
.jobs-head{display:flex;align-items:center;gap:12px;margin-bottom:20px;color:#fff}
.jobs-live{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--pool)}
.jobs-live i{width:9px;height:9px;border-radius:50%;background:var(--pool);box-shadow:var(--seam-glow);animation:caustic 1.8s ease-in-out infinite}
.jobs-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.job{background:rgba(12,52,104,.7);border:1px solid rgba(128,194,65,.22);border-radius:10px;padding:16px 16px}
.job .city{font-family:var(--display);font-weight:700;color:#fff;font-size:.96rem}
.job .svc{font-size:.82rem;color:rgba(246,248,250,.7);margin:4px 0 10px}
.job .meta{font-family:var(--mono);font-size:.68rem;color:var(--pool);letter-spacing:.1em}
@media(max-width:880px){.jobs-row{grid-template-columns:1fr 1fr}}@media(max-width:520px){.jobs-row{grid-template-columns:1fr}}

/* faq */
.faq-list{max-width:800px;margin:0 auto}
.faq-item{border-bottom:1px solid #E5EAF0}
.faq-q{width:100%;background:none;border:0;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 4px;cursor:pointer;font-family:var(--display);font-weight:700;font-size:1.06rem;color:var(--navy)}
.faq-q .x{font-family:var(--mono);color:var(--pool-deep);font-size:1.3rem;font-weight:400;transition:transform .2s;flex:none}
.faq-item.open .x{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.faq-a p{padding:0 4px 26px;color:var(--gunmetal);max-width:66ch}

/* booking */
.cal{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);border:1.5px solid #E5EAF0;overflow:hidden}
.cal-head{background:var(--navy);color:#fff;padding:20px 26px;display:flex;align-items:center;justify-content:space-between}
.cal-head h3{font-size:1.1rem}.cal-nav{display:flex;gap:8px}
.cal-nav button{background:rgba(255,255,255,.12);border:0;color:#fff;width:34px;height:34px;border-radius:8px;cursor:pointer;font-size:1.1rem}
.cal-nav button:hover{background:var(--pool);color:var(--navy)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:22px 26px}
.cal-dow{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gunmetal);text-align:center;padding-bottom:6px}
.cal-day{aspect-ratio:1/1;border:1.5px solid #E5EAF0;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:700;cursor:pointer;font-size:.95rem;background:#fff;transition:all .15s}
.cal-day:hover:not(.disabled){border-color:var(--pool);background:rgba(128,194,65,.08)}
.cal-day.disabled{color:#C5CDD6;cursor:not-allowed;background:var(--porcelain)}
.cal-day.sel{background:var(--pool);color:var(--navy);border-color:var(--pool)}
.cal-day.empty{border:0;background:none;cursor:default}
.cal-times{padding:0 26px 24px;display:none}
.cal-times.show{display:block}
.cal-times h4{font-family:var(--display);font-size:.95rem;margin-bottom:12px}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.slot{border:1.5px solid #D5DCE4;border-radius:8px;padding:10px 4px;text-align:center;font-weight:700;font-size:.84rem;cursor:pointer;background:#fff}
.slot:hover{border-color:var(--pool)}.slot.sel{background:var(--pool);color:var(--navy);border-color:var(--pool)}
.cal-note{background:var(--porcelain);border-left:3px solid var(--pool);padding:14px 18px;margin:0 26px 24px;border-radius:0 8px 8px 0;font-size:.86rem;color:var(--gunmetal)}
@media(max-width:520px){.slots{grid-template-columns:repeat(2,1fr)}.cal-grid{padding:16px}}

/* page hero (subpages) */
.page-hero{background:linear-gradient(180deg,var(--navy-d),var(--navy) 60%,var(--navy-2));color:#fff;padding:90px 0 76px;position:relative;overflow:hidden}
.page-hero .lede{margin-top:18px}.crumb{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pool);margin-bottom:22px;display:block}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fcard{background:#fff;border:1.5px solid #E5EAF0;border-radius:var(--radius);padding:28px 26px}
.fcard h3{font-size:1.04rem;margin:14px 0 8px}.fcard p{font-size:.9rem;color:var(--gunmetal)}
.fnum{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--pool-deep)}
@media(max-width:880px){.fgrid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
.etable{width:100%;border-collapse:collapse;font-size:.94rem;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.etable th{background:var(--navy);color:#fff;font-family:var(--display);font-weight:700;font-size:.84rem;text-align:left;padding:16px 20px}
.etable td{padding:15px 20px;border-bottom:1px solid #EDF0F4}.etable td.num{font-family:var(--mono)}
.etable tr:last-child td{border-bottom:0}
.fineprint{font-size:.76rem;color:var(--gunmetal);line-height:1.7;margin-top:24px;max-width:88ch}

/* footer */
footer{background:var(--navy-d);color:rgba(246,248,250,.65);border-top:1px solid rgba(128,194,65,.25);padding:56px 0 116px;font-size:.9rem}
.foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:30px}
.foot-logo img{height:64px;margin-bottom:14px}
.foot-tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;color:var(--pool)}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}.foot-links a{color:rgba(246,248,250,.75);font-weight:700}.foot-links a:hover{color:var(--pool)}
.socials{display:flex;gap:12px;margin-top:16px}
.socials a{width:40px;height:40px;border-radius:9px;background:rgba(128,194,65,.12);border:1px solid rgba(128,194,65,.3);display:flex;align-items:center;justify-content:center;color:var(--pool);transition:all .18s}
.socials a:hover{background:var(--pool);color:var(--navy);transform:translateY(-2px)}
.foot-legal{font-family:var(--mono);font-size:.72rem;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid rgba(246,248,250,.12);padding-top:24px}

.mobile-bar{position:fixed;bottom:0;left:0;right:0;z-index:70;display:none;grid-template-columns:1fr 1fr;gap:1px;background:var(--navy-2)}
.mobile-bar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 10px;font-family:var(--display);font-weight:800;font-size:.94rem}
.mb-call{background:var(--navy);color:#fff}.mb-quote{background:var(--pool);color:var(--navy)}
@media(max-width:1040px){.mobile-bar{display:grid}}@media(min-width:1041px){footer{padding-bottom:56px}}

.reveal{transition:opacity .6s ease,transform .6s ease}
.js .reveal{opacity:0;transform:translateY(24px)}
.js .reveal.in{opacity:1;transform:none}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ===== CUSTOM ANIMATED CURSOR (desktop only) ===== */
.cursor-ring,.cursor-dot{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:50%;mix-blend-mode:difference;will-change:transform;opacity:0;transition:opacity .3s}
.cursor-ring{width:38px;height:38px;border:1.6px solid #fff;margin:-19px 0 0 -19px;transition:width .25s cubic-bezier(.6,0,.2,1),height .25s cubic-bezier(.6,0,.2,1),margin .25s cubic-bezier(.6,0,.2,1),background .25s,opacity .3s}
.cursor-dot{width:6px;height:6px;background:#fff;margin:-3px 0 0 -3px;transition:opacity .3s,transform .2s}
.cursor-label{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);background:var(--pool);padding:5px 9px;border-radius:99px;transform:translate(-50%,-50%) scale(.4);opacity:0;transition:opacity .22s,transform .22s cubic-bezier(.6,0,.2,1);white-space:nowrap;font-weight:500}
body.cursor-on body.cursor-on .cursor-ring,body.cursor-on .cursor-dot{opacity:1}
body.cursor-on.cursor-hover .cursor-ring{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(255,255,255,.12)}
body.cursor-on.cursor-hover .cursor-dot{opacity:0}
body.cursor-on.cursor-label-on .cursor-ring{width:74px;height:74px;margin:-37px 0 0 -37px;border-color:transparent;background:transparent}
body.cursor-on.cursor-label-on .cursor-label{opacity:1;transform:translate(-50%,-50%) scale(1)}
body.cursor-on.cursor-down .cursor-ring{width:28px;height:28px;margin:-14px 0 0 -14px}
@media (hover:none),(pointer:coarse){.cursor-ring,.cursor-dot,.cursor-label{display:none!important}}
@media (prefers-reduced-motion:reduce){.cursor-ring,.cursor-dot,.cursor-label{display:none!important}}
body.cursor-on,body.cursor-on a,body.cursor-on button,body.cursor-on .chip,body.cursor-on .slot,body.cursor-on .cal-day,body.cursor-on .faq-q,body.cursor-on input,body.cursor-on select,body.cursor-on textarea{cursor:none}

/* ===== HERO BEFORE/AFTER SLIDER ===== */
.baslider-wrap{max-width:1000px;margin:0 auto}
.baslider{position:relative;width:100%;aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;box-shadow:0 30px 80px rgba(4,30,66,.28);cursor:ew-resize;user-select:none;background:var(--navy-2)}
.baslider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.baslider .ba-after-img{clip-path:inset(0 0 0 var(--split,50%))}
.baslider .ba-tag2{position:absolute;top:16px;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:#fff;padding:7px 12px;border-radius:6px;z-index:3}
.baslider .tag-before{left:16px;background:rgba(92,102,114,.92)}
.baslider .tag-after{right:16px;background:rgba(128,194,65,.94);color:var(--navy)}
.baslider .ba-divider{position:absolute;top:0;bottom:0;left:var(--split,50%);width:3px;background:var(--pool);box-shadow:var(--seam-glow);z-index:4;transform:translateX(-50%)}
.baslider .ba-knob{position:absolute;top:50%;left:var(--split,50%);width:52px;height:52px;border-radius:50%;background:#fff;border:3px solid var(--pool);box-shadow:0 6px 20px rgba(4,30,66,.35);z-index:5;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center}
.baslider .ba-knob::before{content:"";width:18px;height:18px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231690B4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E")}
@media(max-width:560px){.baslider .ba-knob{width:44px;height:44px}}

/* ===== STAKES SPLIT BAND ===== */
.stakes-band{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.stake-half{position:relative;min-height:340px;border-radius:var(--radius);overflow:hidden;background-size:cover;background-position:center;display:flex;align-items:flex-end;box-shadow:var(--shadow)}
.stake-tag{position:absolute;top:16px;left:16px;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;color:#fff;padding:7px 12px;border-radius:6px}
.stake-copy{padding:26px 28px;color:#fff}
.stake-copy h3{color:#fff;font-size:1.18rem;margin-bottom:6px}
.stake-copy p{color:rgba(246,248,250,.82);font-size:.92rem}
@media(max-width:720px){.stakes-band{grid-template-columns:1fr}.stake-half{min-height:280px}}

/* ===== ARAMCO/PRODUX ELEVATION LAYER ===== */
/* Editorial statement line */
.statement{padding:120px 0;text-align:center;background:var(--navy);color:#fff;position:relative;overflow:hidden}
.statement .wrap{position:relative;z-index:1}
.statement h2{font-size:clamp(2.4rem,6.5vw,5.2rem);line-height:1.04;letter-spacing:.005em;max-width:16ch;margin:0 auto}
.statement h2 em{font-style:normal;color:var(--pool);text-shadow:0 0 40px rgba(128,194,65,.45)}
.statement .sub{font-family:var(--mono);font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;color:var(--pool);margin-bottom:26px}
@media(max-width:720px){.statement{padding:80px 0}}

/* The prep band sits directly above the statement on the home page. Both are
   navy, so the prep band's 80px of bottom padding plus the statement's 120px
   of top padding read as one dead 200px stretch of colour rather than a pause
   between two sections. Tightened here with an adjacent sibling selector
   instead of by editing .statement, which pmp-about and pmp-projects also use
   and which should keep its full breathing room there. */
.prep-band + .statement{padding-top:56px}
@media(max-width:720px){
 .prep-band + .statement{padding-top:40px}
}

/* Scroll-story sequence */


/* Impact counters band */
.impact{background:linear-gradient(180deg,var(--navy),var(--navy-2));color:#fff;text-align:center}
.impact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:50px;align-items:start}
.impact-stat{text-align:center}
.impact-stat b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(2.6rem,5.4vw,4rem);color:var(--pool);line-height:1;text-shadow:0 0 36px rgba(128,194,65,.3)}
.impact-stat b i{font-style:normal;font-weight:800;font-size:.4em;color:var(--pool-soft);margin-left:3px;vertical-align:baseline}
.impact-stat>span{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(246,248,250,.66);margin-top:14px;line-height:1.5}
@media(max-width:760px){.impact-grid{grid-template-columns:1fr 1fr;gap:36px 20px}}


@keyframes kenburnsBg{0%{background-size:100% 100%}100%{background-size:118% 118%}}
.stake-half.kenburns{background-size:100% 100%;animation:kenburnsBg 20s ease-out forwards}
@media(prefers-reduced-motion:reduce){.stake-half.kenburns{animation:none;background-size:cover!important}}
/* Ken Burns slow motion on photo backgrounds */
@keyframes kenburns{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.12) translate(-1.5%,-1.5%)}}
.kenburns{overflow:hidden}
.kenburns>img,.kenburns .kb-layer{animation:kenburns 18s ease-out forwards}
@media(prefers-reduced-motion:reduce){.kenburns>img,.kenburns .kb-layer{animation:none}}

/* ===== WATER DROP RIPPLE CURSOR TRAIL ===== */
.ripple{position:fixed;top:0;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid rgba(128,194,65,.7);pointer-events:none;z-index:9998;opacity:0;transform:scale(.4);will-change:transform,opacity}
.ripple.go{animation:rippleOut 1.05s cubic-bezier(.2,.6,.3,1) forwards}
@keyframes rippleOut{0%{opacity:.65;transform:scale(.35);border-width:2.5px}70%{opacity:.25}100%{opacity:0;transform:scale(3.6);border-width:.5px}}
@media (hover:none),(pointer:coarse){.ripple{display:none!important}}
@media (prefers-reduced-motion:reduce){.ripple{display:none!important}}
.foot-credit{text-align:center;margin-top:22px;padding-top:18px;border-top:1px solid rgba(246,248,250,.08);font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,248,250,.5)}
.foot-credit a{color:var(--pool);font-weight:500}.foot-credit a:hover{color:#fff}

/* ===== SCROLLING REVIEWS MARQUEE ===== */
.rev-marquee{overflow:hidden;padding:10px 0 20px;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.rev-track{display:flex;gap:24px;width:max-content;animation:revscroll 48s linear infinite;padding:0 12px}
.rev-marquee:hover .rev-track{animation-play-state:paused}
.rev-track .review{width:380px;flex:none;margin:0}
@keyframes revscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.rev-g{margin-left:auto;display:inline-flex;align-items:center}
@media(prefers-reduced-motion:reduce){.rev-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}
@media(max-width:520px){.rev-track .review{width:300px}}

/* ===== POOL WATER BUTTON EFFECT ===== */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn-primary{background:linear-gradient(160deg,var(--pool-soft) 0%,var(--pool) 45%,var(--pool-deep) 100%);color:var(--navy-d);box-shadow:0 8px 26px rgba(128,194,65,.42),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -3px 8px rgba(79,127,40,.4)}
.btn-primary::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(130% 90% at 28% 0%,rgba(255,255,255,.45),transparent 52%),linear-gradient(160deg,var(--pool-soft),var(--pool-deep));opacity:.85;transition:opacity .35s}
.btn-primary:hover::before{opacity:1}
/* moving caustic shimmer band */
.btn-primary::after{content:"";position:absolute;top:-50%;bottom:-50%;width:45%;left:-60%;z-index:-1;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:btnSheen 4.5s ease-in-out infinite}
@keyframes btnSheen{0%{left:-60%}55%{left:140%}100%{left:140%}}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(128,194,65,.6),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -3px 8px rgba(79,127,40,.4)}
/* subtle waterline caustic texture on dark buttons too */
.btn-dark{position:relative}
.btn-dark::after{content:"";position:absolute;top:-50%;bottom:-50%;width:40%;left:-60%;z-index:-1;background:linear-gradient(105deg,transparent,rgba(128,194,65,.25),transparent);transform:skewX(-18deg);animation:btnSheen 5.5s ease-in-out infinite}
.btn-ghost:hover{background:rgba(128,194,65,.08)}
/* click ripple-fill (water drop spreading) */
.btn .wfill{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55),rgba(182,222,135,.35) 55%,transparent 72%);transform:translate(-50%,-50%) scale(0);pointer-events:none;z-index:-1;mix-blend-mode:screen}
.btn .wfill.go{animation:wfillOut .7s cubic-bezier(.2,.6,.3,1) forwards}
@keyframes wfillOut{0%{transform:translate(-50%,-50%) scale(0);opacity:.9}100%{transform:translate(-50%,-50%) scale(8);opacity:0}}
@media (prefers-reduced-motion:reduce){.btn-primary::after,.btn-dark::after,.btn .wfill{animation:none!important}}



/* ===== FAILURE SEQUENCE (compact, graphical, scroll-reactive) ===== */
.seq{background:linear-gradient(180deg,var(--navy-d),var(--navy));padding:90px 0}
.seq-head{text-align:center;max-width:640px;margin:0 auto 46px}
.seq-head .eyebrow{justify-content:center}
.seq-head h2{color:#fff;font-size:clamp(2rem,5vw,3.2rem);line-height:1.05}
.seq-head p{color:rgba(246,248,250,.66);margin-top:14px;font-size:1.02rem;line-height:1.6}
.seq-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:1040px;margin:0 auto;position:relative}
.seq-rail{position:absolute;top:54px;left:12%;right:12%;height:3px;background:rgba(128,194,65,.18);overflow:hidden;border-radius:2px}
.seq-rail i{position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--pool),var(--pool-soft));box-shadow:0 0 14px rgba(128,194,65,.8);transition:width 1.3s cubic-bezier(.3,.7,.3,1)}
.seq.in .seq-rail i{width:100%}
.seq-node{text-align:center;padding:0 14px;position:relative;transition:opacity .7s,transform .7s}
.js .seq-node{opacity:0;transform:translateY(26px)}
.js .seq.in .seq-node{opacity:1;transform:none}
.seq.in .seq-node{opacity:1;transform:none}
.seq.in .seq-node:nth-child(2){transition-delay:.12s}
.seq.in .seq-node:nth-child(3){transition-delay:.24s}
.seq.in .seq-node:nth-child(4){transition-delay:.36s}
.seq.in .seq-node:nth-child(5){transition-delay:.48s}
.seq-ico{width:108px;height:108px;margin:0 auto 18px;position:relative}
.seq-ico svg{width:100%;height:100%;display:block}
.seq-num{position:absolute;top:-6px;right:6px;font-family:var(--mono);font-size:.7rem;color:var(--pool-soft);background:var(--navy);border:1px solid rgba(128,194,65,.4);border-radius:20px;padding:3px 8px;letter-spacing:.1em}
.seq-node h3{color:#fff;font-family:var(--display);font-weight:800;font-size:1.15rem;margin:0 0 6px;letter-spacing:.01em}
.seq-node p{color:rgba(246,248,250,.6);font-size:.86rem;line-height:1.5;margin:0}
.seq-node:last-child h3{color:var(--pool-soft)}
/* animated bits inside icons */
@keyframes seqDrip{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(7px);opacity:1}}
.seq.in .seq-drip{animation:seqDrip 2.4s ease-in-out infinite}
@keyframes seqCrack{0%{stroke-dashoffset:60}100%{stroke-dashoffset:0}}
.seq.in .seq-crack{stroke-dasharray:60;animation:seqCrack 1.4s .4s ease forwards}
@media(prefers-reduced-motion:reduce){.seq-rail i,.seq-node{transition:none}.seq.in .seq-rail i{width:100%}.seq-drip,.seq-crack{animation:none!important}}
@media(max-width:780px){
 .seq-flow{grid-template-columns:1fr 1fr;gap:34px 0}
 .seq-rail{display:none}
 .seq-ico{width:88px;height:88px}
}
@media(max-width:380px){.seq-flow{grid-template-columns:1fr}}
.partner-logos{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:10px}
.partner-card{background:#fff;border:1.5px solid #E4E9EF;border-radius:14px;padding:26px 16px;text-align:center;transition:transform .25s,box-shadow .25s,border-color .25s;position:relative}
.partner-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(4,30,66,.12);border-color:var(--pool)}
.partner-badge{width:34px;height:34px;border-radius:50%;background:var(--navy);color:var(--pool);font-family:var(--mono);font-size:.78rem;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.partner-name{font-family:var(--display);font-weight:800;color:var(--navy);font-size:.98rem;line-height:1.25}
.partner-meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gunmetal);margin-top:8px}
@media(max-width:860px){.partner-logos{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.partner-logos{grid-template-columns:1fr 1fr}}
/* ===== 3D INTERACTIVE SERVICE MAP ===== */
.m3{display:grid;grid-template-columns:1.55fr 1fr;gap:30px;align-items:center;max-width:1100px;margin:0 auto;position:relative;z-index:0;isolation:isolate}
.m3-stage{perspective:1400px;perspective-origin:50% 40%;overflow:hidden;border-radius:16px;position:relative;z-index:0}
.m3-plane{position:relative;transform-style:flat;transition:transform .25s cubic-bezier(.2,.7,.2,1);transform:rotateX(16deg)}
.m3-map{width:100%;height:auto;display:block;filter:drop-shadow(0 40px 60px rgba(0,0,0,.5))}
.m3-pin{position:absolute;transform:translate(-50%,-50%);background:none;border:none;cursor:pointer;padding:0;z-index:3}
.m3-dot{display:block;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--pool-wash),var(--pool) 60%,var(--pool-deep));box-shadow:0 0 0 6px rgba(128,194,65,.2),0 8px 18px rgba(0,0,0,.5);position:relative;transition:transform .2s}
.m3-dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--pool);animation:m3ping 2.6s ease-out infinite}
@keyframes m3ping{0%{transform:scale(.7);opacity:.9}70%{opacity:0}100%{transform:scale(2.4);opacity:0}}
.m3-pin.is-hq .m3-dot{width:24px;height:24px;background:radial-gradient(circle at 35% 30%,var(--pool-wash),var(--pool) 60%,var(--pool-deep));box-shadow:0 0 0 7px rgba(128,194,65,.25),0 10px 22px rgba(0,0,0,.55)}
.m3-pin.is-hq .m3-dot::after{border-color:var(--pool)}
.m3-tag{position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);white-space:nowrap;font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.04em;color:#fff;background:rgba(2,19,43,.92);border:1px solid rgba(128,194,65,.4);padding:5px 10px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 8px 20px rgba(0,0,0,.4)}
.m3-pin:hover .m3-dot,.m3-pin.act .m3-dot{transform:scale(1.25)}
.m3-pin:hover .m3-tag,.m3-pin.act .m3-tag{opacity:1;transform:translateX(-50%) translateY(-2px)}
.m3-panel{background:linear-gradient(160deg,rgba(12,52,104,.9),rgba(4,30,66,.9));border:1px solid rgba(128,194,65,.25);border-radius:18px;padding:30px 28px;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.m3-eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--pool-soft)}
.m3-panel h3{font-family:var(--display);font-weight:800;color:#fff;font-size:1.7rem;margin:10px 0 12px;transition:opacity .25s}
.m3-panel p{color:rgba(246,248,250,.78);line-height:1.6;font-size:.98rem;margin:0 0 16px;transition:opacity .25s;min-height:3em}
.m3-meta{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(128,194,65,.95);border-top:1px solid rgba(255,255,255,.1);padding-top:14px}
.m3-dots{display:flex;gap:8px;margin-top:18px}
.m3-dots button{width:9px;height:9px;border-radius:50%;border:none;background:rgba(246,248,250,.25);cursor:pointer;padding:0;transition:.2s}
.m3-dots button.on{background:var(--pool);width:24px;border-radius:5px}
@media(max-width:880px){.m3{grid-template-columns:1fr;gap:18px}.m3-plane{transform:rotateX(12deg)}.m3-panel{text-align:center}.m3-dots{justify-content:center}}
@media(prefers-reduced-motion:reduce){.m3-plane{transition:none}.m3-dot::after{animation:none}}
.vid-row{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;max-width:840px;margin:0 auto}
.vid-col{flex:0 1 330px;max-width:330px;width:100%}
.vid9{position:relative;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:var(--navy-2);box-shadow:0 26px 64px rgba(0,0,0,.45);border:1px solid rgba(128,194,65,.28)}
.vid9 iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vid-cap{text-align:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--pool-soft);margin-top:15px}
.vid-cap b{display:block;font-family:var(--display);color:#fff;font-size:1rem;letter-spacing:.02em;text-transform:none;margin-bottom:3px}
@media(max-width:760px){.vid-col{flex:0 1 86%;max-width:340px}}
.area-view{display:inline-block;margin-top:14px;font-family:var(--display);font-weight:700;font-size:.86rem;color:var(--pool-deep);text-decoration:none}.area-view:hover{color:var(--pool)}.area-card.active .area-view{color:var(--pool)}



/* On a 568px tall iPhone SE this notice was 254px, 45% of the viewport, and
   anything scrolled to the bottom of the screen sat under it. Tighter type
   and padding, and the button shares the row rather than taking its own. */

/* ==========================================================================
   V2 CHROME LAYER, TurFresh design grammar on the PMP token system
   Overrides sit after the base so the original architecture stays intact.
   ========================================================================== */

/* ---------- 1. CTA taxonomy: exactly three buttons sitewide ---------- */
/* Orange appears ONLY on CTAs. --cta on large bold labels (AA Large 3.53:1),
   --cta-deep on compact labels (AA Normal 5.38:1). */
.btn-primary,a.btn-primary,.on-dark a.btn-primary,.on-dark .btn-primary{
  background:var(--cta);color:#fff;
  font-size:1.19rem;font-weight:800;letter-spacing:.01em;
  box-shadow:0 8px 26px rgba(250,70,22,.34);
}
.btn-primary::before,.btn-primary::after{display:none!important}
.btn-primary:hover{background:var(--cta-deep);box-shadow:0 10px 30px rgba(194,58,15,.42)}
.btn-primary.btn-sm,a.btn-primary.btn-sm,.nav a.btn-primary,.nav .btn-primary,.sticky-bar .btn-primary,.pmpq .btn-primary{
  background:var(--cta-deep);font-size:.95rem;box-shadow:0 6px 18px rgba(194,58,15,.34)
}
.btn-primary.btn-sm:hover,.nav .btn-primary:hover,.sticky-bar .btn-primary:hover{background:#A63009}

/* Book My Job, secondary */
.btn-secondary,a.btn-secondary,.on-dark a.btn-secondary{background:var(--pool);color:var(--navy-d);font-weight:800;box-shadow:0 8px 24px rgba(128,194,65,.30)}
.btn-secondary:hover{background:var(--pool-soft)}
.on-dark .btn-secondary{background:var(--pool);color:var(--navy-d)}

/* Call Us, tertiary ghost */
.btn-ghost,a.btn-ghost{background:transparent;border:2px solid var(--pool);color:var(--pool-deep);font-weight:800}
.on-dark a.btn-ghost,.on-dark .btn-ghost,.nav .btn-ghost{border-color:var(--pool);color:var(--pool)}
.btn-ghost:hover{background:var(--pool);color:var(--navy-d);border-color:var(--pool)}

/* ---------- 2. Utility bar ---------- */
.utility{background:var(--navy);border-bottom:1px solid rgba(128,194,65,.18);font-family:var(--mono)}
.utility-inner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 22px;
  padding:9px 0;font-size:.76rem;letter-spacing:.06em;color:rgba(246,248,250,.82)}
.utility-inner .dot{color:rgba(128,194,65,.5)}
.utility-inner .u-phone{color:var(--pool);font-weight:700;letter-spacing:.04em;
  display:inline-block;padding:8px 4px;margin:-8px 0}  /* 18px tall was not a tap target */
.utility-inner .u-phone:hover{color:var(--pool-soft)}
@media(max-width:700px){.utility-inner{font-size:.68rem;gap:6px 12px;padding:7px 0}.utility-inner .u-hide{display:none}}

/* ---------- 3. Nav: SOLID navy, no alpha blend ---------- */
.nav{position:sticky;top:0;z-index:60;background:var(--navy);backdrop-filter:none;
  border-bottom:1px solid rgba(128,194,65,.22)}
.nav-inner{height:92px;gap:22px}
.logo-img{max-height:56px;width:auto}
.nav-links{margin-left:auto;gap:22px;align-items:center}
.nav-links>a,.nav-drop>button{
  color:rgba(246,248,250,.90);font-family:var(--display);font-weight:700;font-size:.92rem;
  background:none;border:0;cursor:pointer;padding:8px 2px;display:inline-flex;align-items:center;gap:6px}
.nav-links>a:hover,.nav-drop>button:hover,.nav-drop[data-open="1"]>button{color:var(--pool)}
.nav-drop{position:relative}



.nav-drop[data-open="1"] 





.nav-phone{color:var(--pool);font-weight:700}
.nav-phone:hover{color:var(--pool-soft)}
@media(max-width:1100px){
  .nav-links,.nav-phone{display:none}
  .ham{display:block}
  .nav-inner{height:74px}
  .logo-img{max-height:44px}
}

/* mobile nav */
.mnav{background:var(--navy);justify-content:flex-start;padding:84px 24px 40px;overflow-y:auto;gap:0}
.mnav a{font-size:1.12rem;padding:14px 0;width:100%;max-width:420px;border-bottom:1px solid rgba(128,194,65,.14)}
.mnav .m-group{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pool);padding:22px 0 6px;width:100%;max-width:420px;text-align:left}
.mnav .m-sub{padding-left:14px;font-size:1rem;font-weight:600}
.mnav .btn{margin-top:24px;width:100%;max-width:420px}
.mnav-close{position:absolute;top:22px;right:22px;background:none;border:0;color:#fff;font-size:2.4rem;line-height:1;cursor:pointer}

/* ---------- 4. Breadcrumbs, on navy, no white strip ---------- */
.crumbs{background:var(--navy);padding:14px 0 16px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.03em}
.crumbs li{display:flex;align-items:center;gap:8px;color:rgba(246,248,250,.62)}
.crumbs li+li::before{content:"/";color:rgba(128,194,65,.45)}
.crumbs a{color:rgba(246,248,250,.82)}
.crumbs a:hover{color:var(--pool)}
.crumbs [aria-current="page"]{color:var(--pool)}

/* ---------- 5. Applications strip ---------- */
.apps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:980px){.apps-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.apps-grid{grid-template-columns:1fr}}
.app-card{display:flex;flex-direction:column;background:#fff;border:1px solid #E5EAF0;border-radius:var(--radius);
  padding:28px 24px 24px;transition:transform .22s,box-shadow .22s,border-color .22s;height:100%}
.app-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--pool)}
.app-card .app-ico{width:56px;height:56px;margin-bottom:18px}
.app-card h3{font-size:1.12rem;margin:0 0 8px;color:var(--navy)}
.app-card p{font-size:.92rem;color:var(--gunmetal);margin:0 0 18px;flex:1}
.app-card .app-go{font-family:var(--display);font-weight:800;font-size:.86rem;color:var(--pool-deep);
  display:inline-flex;align-items:center;gap:7px}
.app-card:hover .app-go{gap:11px}
.on-dark .app-card{background:var(--navy-2);border-color:rgba(128,194,65,.22)}
.on-dark .app-card h3{color:#fff}
.on-dark .app-card p{color:rgba(246,248,250,.74)}
.on-dark .app-card .app-go{color:var(--pool)}

/* application chips, city + hub pages */
.app-chips{display:flex;flex-wrap:wrap;gap:10px}
.app-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;
  border:1px solid #E5EAF0;background:#fff;font-family:var(--display);font-weight:700;font-size:.85rem;color:var(--navy)}
.app-chip:hover{border-color:var(--pool);background:var(--pool-wash);color:var(--pool-deep)}

/* ---------- 6. Labeled media placeholders, never a broken image ---------- */
.ph{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
  background:
    linear-gradient(135deg,rgba(128,194,65,.07) 0 12px,transparent 12px 24px) repeat,
    var(--navy-2);
  border:1px solid rgba(128,194,65,.3);border-radius:var(--radius);overflow:hidden;
  min-height:240px;padding:32px 26px}
.ph::before{content:attr(data-kind);position:absolute;top:14px;left:14px;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--navy-d);
  background:var(--pool);padding:5px 10px;border-radius:5px;font-weight:700}
.ph span{font-family:var(--mono);font-size:.84rem;line-height:1.7;color:rgba(246,248,250,.88);max-width:44ch}
.ph.ph-16x9{aspect-ratio:16/9;min-height:0}
.ph.ph-4x3{aspect-ratio:4/3;min-height:0}
.ph.ph-1x1{aspect-ratio:1/1;min-height:0}
.ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.ph-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ph-grid{grid-template-columns:1fr}}

/* ---------- 7. Footer, one consistent navy ---------- */
footer{background:var(--navy);color:rgba(246,248,250,.68);
  border-top:1px solid rgba(128,194,65,.22);padding:64px 0 116px;font-size:.9rem}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:36px 28px;padding-bottom:40px}
@media(max-width:980px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px 24px}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-brand .logo-img{max-height:52px;margin-bottom:16px}
.foot-tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.26em;color:var(--pool);margin-bottom:14px}
.foot-brand p{font-size:.86rem;line-height:1.7;color:rgba(246,248,250,.62);max-width:34ch}
.foot-col h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pool);margin:0 0 14px;font-weight:700}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot-col a{color:rgba(246,248,250,.74);font-size:.88rem}
.foot-col a:hover{color:var(--pool)}
.foot-legal{border-top:1px solid rgba(128,194,65,.18);padding-top:26px;display:flex;flex-wrap:wrap;
  gap:10px 22px;align-items:center;justify-content:space-between;font-size:.8rem}
.foot-legal a{color:rgba(246,248,250,.7)}
.foot-legal a:hover{color:var(--pool)}
.foot-lic{font-family:var(--mono);letter-spacing:.04em}

/* ---------- 8. Sticky mobile CTA bar ---------- */
.sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
  grid-template-columns:1fr 1fr;background:var(--navy);border-top:1px solid rgba(128,194,65,.28)}
.sticky-bar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 10px;
  font-family:var(--display);font-weight:800;font-size:.94rem}
.sticky-bar .s-call{color:var(--pool)}
.sticky-bar .s-quote{background:var(--cta-deep);color:#fff}
@media(max-width:820px){.sticky-bar{display:grid}body{padding-bottom:58px}}

/* ---------- 9. Hero v2, two column ---------- */
.hero-v2{background:var(--navy);padding:66px 0 74px;position:relative;overflow:hidden}
.hero-v2::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 90% at 78% 20%,rgba(128,194,65,.10),transparent 62%)}
.hero-v2-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:54px;align-items:center;position:relative;z-index:1}
@media(max-width:980px){.hero-v2-grid{grid-template-columns:1fr;gap:38px}.hero-v2{padding:44px 0 54px}}
.hero-badge{display:inline-block;font-family:var(--mono);font-size:.7rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--pool);border:1px solid rgba(128,194,65,.42);
  background:rgba(128,194,65,.10);padding:8px 15px;border-radius:999px;margin-bottom:22px}
.hero-v2 h1,.hero-v2-copy h1{font-size:clamp(2.3rem,4.6vw,3.9rem);line-height:1.05;margin:0 0 20px;max-width:16ch;color:#fff}
.hero-v2-copy h1 em{font-style:normal;color:var(--pool);display:block}
.hero-v2 .hero-sub,.hero-v2-copy .hero-sub{font-size:1.07rem;line-height:1.72;color:rgba(246,248,250,.8);max-width:52ch;margin:0 0 26px}
.hero-v2-copy .hero-sub b{color:#fff}
.trust-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.trust-chips .chip{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;
  background:rgba(255,255,255,.055);border:1px solid rgba(128,194,65,.3);
  font-family:var(--display);font-weight:700;font-size:.81rem;color:rgba(246,248,250,.94)}
.trust-chips .chip svg{width:16px;height:16px;color:var(--pool);flex:none}
.hero-v2 .hero-ctas{justify-content:flex-start;margin-bottom:38px}
.hero-v2 .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 22px;border-top:1px solid rgba(128,194,65,.2);padding-top:26px}
.hero-v2 .hero-stats .stat{min-width:0}
.hero-v2 .hero-stats .stat b{display:block;white-space:nowrap;font-family:var(--display);font-weight:900;font-size:clamp(1.45rem,2.1vw,1.85rem);color:var(--pool);line-height:1}
.hero-v2 .hero-stats .stat>span:not(.count){display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(246,248,250,.62);margin-top:7px}
.hero-v2 .hero-stats .stat b .count{display:inline;font-size:inherit;font-weight:inherit;
  font-family:inherit;color:inherit;letter-spacing:0;text-transform:none;margin:0}
.hero-v2-media .ph{min-height:420px}
@media(max-width:980px){.hero-v2-media .ph{min-height:280px}}
@media(max-width:520px){.hero-v2 .hero-stats{grid-template-columns:1fr 1fr}}
.hero-media-cap{font-family:var(--mono);font-size:.76rem;line-height:1.6;color:rgba(246,248,250,.62);
  margin-top:14px;text-align:center}

/* ---------- 10. Service areas, 5 region blocks ---------- */
.area-region{border-top:1px solid #E5EAF0;padding:34px 0}
.area-region:first-of-type{border-top:0}
.area-region-head{display:grid;grid-template-columns:auto 1fr auto;gap:10px 26px;align-items:baseline;margin-bottom:18px}
@media(max-width:880px){.area-region-head{grid-template-columns:1fr;gap:8px}}
.area-region-head h3{margin:0;font-size:1.3rem;color:var(--navy);white-space:nowrap}
.area-region-head h3 a{color:var(--navy)}
.area-region-head h3 a:hover{color:var(--pool-deep)}
.area-region-head p{margin:0;font-size:.92rem;color:var(--gunmetal);line-height:1.6}
.area-hub-link{font-family:var(--display);font-weight:800;font-size:.85rem;color:var(--pool-deep);white-space:nowrap}
.area-hub-link:hover{color:var(--navy)}

/* ---------- 11. Warranty band ---------- */
.warranty-band{background:var(--navy-2);padding:76px 0}
.warranty-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
@media(max-width:900px){.warranty-grid{grid-template-columns:1fr;gap:34px}}
.warranty-band h2{color:#fff;margin:0 0 16px}
.warranty-band .lede{color:rgba(246,248,250,.82)}
.warranty-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.warranty-points li{position:relative;padding-left:34px;color:rgba(246,248,250,.78);
  font-size:.95rem;line-height:1.65}
.warranty-points li b{color:#fff;display:block;margin-bottom:2px}
.warranty-points li::before{content:"";position:absolute;left:0;top:3px;width:21px;height:21px;border-radius:50%;
  background:var(--pool);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20.3 5.7L9 17 3.7 11.7l1.4-1.4L9 14.2l9.9-9.9z'/%3E%3C/svg%3E") center/78% no-repeat,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude}

/* custom cursor ring is decorative and pointer-dependent: hide it where there is no mouse */
@media (hover:none),(pointer:coarse){.cursor-ring,.cursor-dot{display:none!important}}
@media (prefers-reduced-motion:reduce){.cursor-ring,.cursor-dot{display:none!important}}

/* ---------- 12. Location page blocks ---------- */
.hero-parent{font-family:var(--mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pool);margin:-8px 0 18px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:30px}
@media(max-width:880px){.two-col{grid-template-columns:1fr;gap:18px}}
.proc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:880px){.proc-grid{grid-template-columns:1fr}}
.proc-step{background:#fff;border:1px solid #E5EAF0;border-radius:var(--radius);padding:30px 26px;position:relative}
.proc-num{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
  background:var(--navy);color:var(--pool);font-family:var(--display);font-weight:900;font-size:1.15rem;margin-bottom:16px}
.proc-step h3{margin:0 0 10px;font-size:1.08rem;color:var(--navy)}
.proc-step p{margin:0;font-size:.93rem;line-height:1.7;color:var(--gunmetal)}
.bg-porcelain .proc-step{background:#fff}
.faq-list{display:flex;flex-direction:column;gap:12px;max-width:860px}
.faq-item{background:#fff;border:1px solid #E5EAF0;border-radius:var(--radius);overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;padding:20px 54px 20px 24px;position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary h3{margin:0;font-size:1rem;color:var(--navy);font-weight:700}
.faq-item summary::after{content:"";position:absolute;right:24px;top:26px;width:9px;height:9px;
  border-right:2px solid var(--pool-deep);border-bottom:2px solid var(--pool-deep);
  transform:rotate(45deg);transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(-135deg);top:30px}
.faq-item[open] summary{border-bottom:1px solid #E5EAF0}
.faq-item p{margin:0;padding:18px 24px 22px;font-size:.94rem;line-height:1.75;color:var(--gunmetal)}
.faq-item:hover{border-color:var(--pool)}
.oc-links{display:grid;grid-template-columns:repeat(4,1fr);gap:2px 18px}
@media(max-width:880px){.oc-links{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.oc-links{grid-template-columns:1fr}}
.oc-links a{display:block;padding:11px 0 11px 16px;position:relative;font-size:.93rem;color:var(--navy);
  border-bottom:1px solid rgba(4,30,66,.07)}
.oc-links a::before{content:"";position:absolute;left:0;top:calc(50% - 3px);width:6px;height:6px;
  border-radius:50%;background:var(--pool)}
.oc-links a:hover{color:var(--pool-deep)}
.final{background:var(--navy);padding:78px 0}

/* ---------- 13. Applications page blocks ---------- */
.who-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:980px){.who-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.who-grid{grid-template-columns:1fr}}
.who-card{background:#fff;border:1px solid #E5EAF0;border-radius:var(--radius);padding:24px 22px}
.who-card h3{margin:0 0 9px;font-size:1rem;color:var(--navy)}
.who-card p{margin:0;font-size:.9rem;line-height:1.65;color:var(--gunmetal)}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 34px}
@media(max-width:880px){.why-grid{grid-template-columns:1fr}}
.why-row{border-left:3px solid var(--pool);padding-left:20px}
.why-row h3{margin:0 0 8px;font-size:1.05rem;color:var(--navy)}
.why-row p{margin:0;font-size:.94rem;line-height:1.7;color:var(--gunmetal)}
.includes-list li{color:var(--gunmetal)}
.includes-list li::before{background:var(--pool-deep)}

/* ---------- 14. Contrast fixes for pre-existing defects ---------- */
/* #video had no background while .vid-cap b was pure white: the captions were
   invisible on the live site. The section is a dark media band by design. */
/* #video is an ID, so it outranks the .prep-band class rules below and is
   what actually sets this section's padding. The reduced bottom value
   closes the dead navy band where it meets .statement on the home page,
   which is the only place this id appears. */
#video{background:var(--navy);color:rgba(246,248,250,.8);padding:72px 0 48px}
#video h2,#video .section-head h2{color:#fff}
#video .eyebrow{color:var(--pool)}
#video .lede{color:rgba(246,248,250,.8)}
.vid-cap{color:var(--pool)}
.vid-cap b{color:#fff}
/* these two were re-overridden later in the base sheet by duplicate rules */
.area-card .area-view,a.area-view{color:var(--pool-deep)}
.area-card .area-view:hover,a.area-view:hover{color:var(--navy)}
/* exact-specificity overrides: these base rules were written for dark cards but
   the cards render white and every one of them carries .active */
.area-card.active .area-view{color:var(--pool-deep)}
.area-card.active .area-view:hover{color:var(--navy)}
/* funnel optional-field hint: lift off the floor for the dark panel */
.pmpq-opt{color:rgba(246,248,250,.66)}

/* ---------- 15. Real photography ---------- */
.photo{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;
  background:var(--navy-2);border:1px solid rgba(128,194,65,.22)}
.photo img{display:block;width:100%;height:100%;object-fit:cover}
.photo-4x5{aspect-ratio:4/5}
.photo-4x3{aspect-ratio:4/3}
.photo-16x9{aspect-ratio:16/9}
.photo-1x1{aspect-ratio:1/1}
.photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 18px 14px;
  font-family:var(--mono);font-size:.74rem;line-height:1.5;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(2,19,43,.86))}
.hero-v2-media .photo{max-height:560px}
@media(max-width:980px){.hero-v2-media .photo{max-height:420px}}
.ph-grid .photo{aspect-ratio:4/3}
.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:42px}
@media(max-width:700px){.photo-pair{grid-template-columns:1fr}}

/* ---------- 16. "The quality is in the prep" video band ---------- */
.prep-band{background:var(--navy-2);padding:80px 0}
.prep-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
@media(max-width:980px){.prep-grid{grid-template-columns:1fr;gap:38px}.prep-band{padding:56px 0}}
.prep-copy h2{color:#fff;margin:0 0 18px}
.prep-copy .lede{color:rgba(246,248,250,.82);margin:0 0 16px;max-width:60ch}
.prep-copy .lede b{color:#fff}
.prep-points{list-style:none;margin:26px 0 30px;padding:0;display:flex;flex-direction:column;gap:14px}
.prep-points li{position:relative;padding-left:32px;color:rgba(246,248,250,.78);font-size:.95rem;line-height:1.65}
.prep-points li b{color:var(--pool);display:block;margin-bottom:2px;font-weight:800}
.prep-points li::before{content:"";position:absolute;left:0;top:4px;width:19px;height:19px;border-radius:50%;
  background:var(--pool);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20.3 5.7L9 17l-5.3-5.3 1.4-1.4L9 14.2l9.9-9.9z'/%3E%3C/svg%3E") center/78% no-repeat,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude}
.prep-links{margin-top:22px;font-size:.86rem;color:rgba(246,248,250,.6);line-height:1.9}
.prep-links a{color:var(--pool)}
.prep-links a:hover{color:var(--pool-soft)}

.prep-media{display:flex;flex-direction:column;gap:14px}
.prep-player{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;
  background:var(--navy-d);border:1px solid rgba(128,194,65,.28);max-width:440px;width:100%;margin-inline:auto}
.prep-video{display:block;width:100%;height:auto;background:var(--navy-d)}
.prep-video.is-hidden{display:none}
.prep-play{position:absolute;left:14px;right:14px;bottom:14px;display:flex;align-items:center;gap:13px;
  padding:13px 16px;border:0;border-radius:11px;cursor:pointer;text-align:left;
  background:rgba(2,19,43,.86);backdrop-filter:blur(6px);color:#fff;
  font-family:var(--display);font-weight:800;font-size:.92rem;transition:background .18s}
.prep-play:hover{background:var(--cta-deep)}
.prep-play.is-hidden{display:none}
.prep-play small{display:block;font-family:var(--body);font-weight:400;font-size:.74rem;
  color:rgba(246,248,250,.7);margin-top:2px}
.prep-play:hover small{color:rgba(255,255,255,.85)}
.prep-play-ico{flex:none;width:34px;height:34px;border-radius:50%;background:var(--pool);position:relative}
.prep-play-ico::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent var(--navy-d)}
.prep-cap{position:absolute;top:0;left:0;right:0;padding:14px 16px 26px;
  font-family:var(--mono);font-size:.72rem;line-height:1.5;color:rgba(246,248,250,.92);
  background:linear-gradient(180deg,rgba(2,19,43,.8),transparent)}
.prep-chapters{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:440px;width:100%;margin-inline:auto}
.prep-chapters button{background:rgba(255,255,255,.06);border:1px solid rgba(128,194,65,.3);
  border-radius:9px;padding:10px 8px;cursor:pointer;color:rgba(246,248,250,.92);
  font-family:var(--display);font-weight:700;font-size:.78rem;transition:background .18s,border-color .18s}
.prep-chapters button:hover{background:var(--pool);color:var(--navy-d);border-color:var(--pool)}
.prep-chapters button small{display:block;font-family:var(--mono);font-weight:400;font-size:.66rem;
  color:rgba(246,248,250,.55);margin-top:3px}
.prep-chapters button:hover small{color:rgba(2,19,43,.7)}

/* ---------- 17. Failure evidence block ---------- */
.evidence{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:center;margin:46px 0 64px}
@media(max-width:900px){.evidence{grid-template-columns:1fr;gap:26px}}
.evidence .photo{max-width:460px;width:100%}
.evidence-copy h3{font-size:1.5rem;color:var(--navy);margin:0 0 14px}
.evidence-copy p{color:var(--gunmetal);line-height:1.75;margin:0 0 14px;max-width:60ch}
.on-dark .evidence-copy h3{color:#fff}
.on-dark .evidence-copy p{color:rgba(246,248,250,.82)}

/* ---------- 18. Prep pillars ---------- */
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:28px 0 30px}
@media(max-width:820px){.pillars{grid-template-columns:1fr}}
.pillar{background:rgba(255,255,255,.05);border:1px solid rgba(128,194,65,.26);
  border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.pillar .photo{border:0;border-radius:0;aspect-ratio:4/3}
.pillar-body{padding:20px 20px 22px}
.pillar-tag{display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--navy-d);background:var(--pool);
  padding:4px 9px;border-radius:5px;margin-bottom:11px;font-weight:700}
.pillar h3{margin:0 0 9px;font-size:1.08rem;color:#fff}
.pillar p{margin:0;font-size:.9rem;line-height:1.7;color:rgba(246,248,250,.8)}
.jointfig{margin:6px 0 28px}
.jointfig .jointdia{display:block;width:100%;height:auto;background:var(--navy-d);
  border:1px solid rgba(128,194,65,.26);border-radius:var(--radius)}
.jointfig figcaption{margin-top:12px;font-size:.86rem;line-height:1.7;color:rgba(246,248,250,.7);max-width:72ch}
/* prep band: keep the player in view while the reader works down the copy */
.prep-grid{align-items:start}
@media(min-width:981px){
  .prep-media{position:sticky;top:112px}
  .prep-copy{padding-top:4px}
}
/* prep-links is reused inside the evidence block, which sits on a light background */
.evidence-copy .prep-links a{color:var(--pool-deep)}
.evidence-copy .prep-links a:hover{color:var(--navy)}

/* ---------- 19. Get My Price v2 ---------- */
.pmpq-shell{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:30px;align-items:start;
  max-width:1120px;margin:0 auto}
@media(max-width:1080px){.pmpq-shell{grid-template-columns:1fr;max-width:640px}}
.pmpq-aside{position:sticky;top:104px;background:var(--navy-2);border:1px solid rgba(128,194,65,.26);
  border-radius:var(--radius);padding:20px;color:rgba(246,248,250,.82)}
@media(max-width:1080px){.pmpq-aside{position:static;margin-top:6px}}
@media(max-width:820px){.pmpq-wrap.is-open .pmpq-aside{display:none}}
.pmpq-aside .photo{margin-bottom:14px;border-color:rgba(128,194,65,.22)}
.qa-h{font-family:var(--display);font-weight:800;font-size:1.02rem;color:#fff;margin:0 0 9px}
.qa-p{font-size:.88rem;line-height:1.7;margin:0 0 11px;color:rgba(246,248,250,.8)}
.qa-p a{color:var(--pool)}
.qa-quiet{color:rgba(246,248,250,.6);font-size:.83rem}
.qa-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.qa-list li{position:relative;padding-left:24px;font-size:.87rem;line-height:1.6;color:rgba(246,248,250,.82)}
.qa-list li::before{content:"";position:absolute;left:0;top:6px;width:13px;height:13px;border-radius:50%;
  background:var(--pool);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20.3 5.7L9 17l-5.3-5.3 1.4-1.4L9 14.2l9.9-9.9z'/%3E%3C/svg%3E") center/80% no-repeat,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude}
.qa-areas{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:9px}
.qa-areas a{display:block;padding:11px 14px;border-radius:9px;background:rgba(255,255,255,.06);
  border:1px solid rgba(128,194,65,.28);color:#fff;font-family:var(--display);font-weight:700;font-size:.9rem}
.qa-areas a:hover{background:var(--pool);color:var(--navy-d);border-color:var(--pool)}

/* measuring guide. the heading must beat .pmpq-panel typography, hence the scope */
.pmpq-panel .measure-guide{margin:16px 0 18px}
.pmpq-panel .measure-guide .measure-h{font-family:var(--display);font-weight:900;
  font-size:clamp(1.5rem,3.2vw,1.9rem);color:var(--cta);margin:0 0 8px;letter-spacing:.01em}
.pmpq-panel .measure-guide .measure-sub{font-size:.95rem;line-height:1.65;
  color:rgba(246,248,250,.84);margin:0 0 14px}
.pmpq-panel .measure-guide .measure-sub b{color:#fff}
.cadpool{display:block;width:100%;height:auto;border-radius:10px;border:1px solid rgba(128,194,65,.26)}
.pmpq-panel .measure-guide .measure-note{margin:13px 0 0;font-size:.9rem;line-height:1.7;
  color:rgba(246,248,250,.8)}
.pmpq-panel .measure-guide .measure-note b{color:var(--cta);font-size:.96rem}

/* colour swatches: the sand fills the box */
.pmpq-photoswatch button{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;align-items:stretch}
.pmpq-photoswatch .sw{display:block;width:100%;height:104px;background-size:cover;
  background-position:center;border-radius:0;margin:0}
.pmpq-photoswatch button>span{display:block;padding:12px 8px;font-family:var(--display);font-weight:800;
  letter-spacing:.16em;font-size:.88rem}

/* contact preferences */
.contact-prefs{margin:4px 0 14px;padding:14px 16px;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(128,194,65,.24)}
.cp-h{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pool);margin:0 0 10px;font-weight:700}
.cp-locked span{opacity:.92}

/* agreement scroll gate */
.agree-gate{margin-top:14px}
.agree-one span b{color:#fff}
.agree-hint{font-family:var(--mono);font-size:.76rem;color:var(--cta);margin:10px 0 0;letter-spacing:.02em}
.agree-approve{margin-top:14px;width:100%;opacity:.45;pointer-events:none;transition:opacity .2s}
.agree-approve.is-ready{opacity:1;pointer-events:auto}
#qTerms.is-read{border-color:rgba(128,194,65,.5)}

/* book-now closing block */
.done-shot{margin:18px 0}
.done-shot figcaption{margin-top:9px;font-family:var(--mono);font-size:.74rem;
  color:rgba(246,248,250,.62);text-align:center}

/* orange text on a dark surface needs a lighter tint: #FA4616 is only 4.25 there */
.pmpq-panel .measure-guide .measure-note b,
.pmpq-panel .measure-guide .measure-h,
.agree-hint{color:var(--cta-light)}


/* ---------- 20. Mega menu, TurFresh nav grammar ---------- */
/* the panel spans the nav bar, so .nav is the positioning context */
.nav{position:sticky;overflow:visible}
.nav-drop.has-mega{position:static;display:flex;align-items:center}
.nav-links>a,.nav-drop-trigger{font-size:1rem;font-weight:500;color:#fff;padding:7px 12px;
  border-radius:6px;transition:background .14s,color .14s;white-space:nowrap;display:inline-flex;
  align-items:center;gap:3px}
.nav-links>a:hover,.nav-drop-trigger:hover,.nav-drop.is-open .nav-drop-trigger{
  color:#fff;background:rgba(255,255,255,.14)}
.nav-caret{font-size:.58rem;opacity:.7;margin-left:2px;display:inline-block;
  transition:transform .25s cubic-bezier(.16,1,.3,1)}
.nav-drop:hover .nav-caret,.nav-drop:focus-within .nav-caret,
.nav-drop.is-open .nav-caret{transform:rotate(180deg)}
/* hover bridge so the pointer can travel from the trigger down into the panel */
.nav-drop.has-mega:hover>.nav-drop-trigger::after,
.nav-drop.has-mega.is-open>.nav-drop-trigger::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:10px}

.mega-menu{position:absolute;left:0;right:0;top:100%;
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-d) 96%);
  border-top:2px solid rgba(128,194,65,.6);border-bottom:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 60px rgba(2,19,43,.45);padding:32px 24px 24px;
  opacity:0;visibility:hidden;transform:translateY(-10px) scale(.985);transform-origin:center top;
  pointer-events:none;transition:opacity .16s,transform .18s ease-in,visibility linear .18s;z-index:1001}
.nav-drop.has-mega:hover .mega-menu,
.nav-drop.has-mega:focus-within .mega-menu,
.nav-drop.has-mega.is-open .mega-menu{
  opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto;
  transition:opacity .24s cubic-bezier(.22,.61,.36,1),transform .26s cubic-bezier(.16,1,.3,1),visibility}

.mega-grid{max-width:1300px;margin:0 auto;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:1240px){.mega-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mega-item{min-width:0;display:flex;gap:16px;align-items:flex-start;padding:19px 20px;
  border-radius:14px;border:1px solid transparent;text-decoration:none;
  transition:transform .18s,background .18s,border-color .18s}
.mega-item:hover{background:rgba(255,255,255,.05);border-color:rgba(128,194,65,.45);
  transform:translateY(-2px)}
.mega-item:focus-visible{background:transparent;border-color:transparent;
  outline:2px solid var(--pool);outline-offset:2px;transform:none}
.mega-ic{flex-shrink:0;width:52px;height:52px;border-radius:50%;background:#fff;
  border:1px solid rgba(128,194,65,.45);display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(2,19,43,.25);color:var(--navy);transition:transform .18s}
.mega-ic svg{width:26px;height:26px}
.mega-item:hover .mega-ic{transform:scale(1.12);color:var(--pool-deep)}
.mega-txt{min-width:0}
.mega-item .mega-title{display:block;margin:2px 0 5px;font-size:1.09rem;font-weight:800;color:#fff;
  font-family:var(--display);line-height:1.25;transition:color .18s}
.mega-item:hover .mega-title{color:var(--pool)}
.mega-item p{margin:0;font-size:.81rem;line-height:1.55;color:rgba(255,255,255,.75);
  white-space:normal;overflow-wrap:break-word}
@media(max-width:1100px){.mega-menu{display:none}}

/* ==========================================================================
   21. FLOATING 3D CAD JOINT ANATOMY
   A rotating, hoverable cutaway of the pool joint system. Parts pop out on
   hover / focus, PMP pointers track them live in 2D screen space.
   ========================================================================== */
.anat-band{background:linear-gradient(180deg,var(--navy-d) 0%,var(--navy) 42%,var(--navy-2) 100%);
  color:#fff;position:relative;overflow:hidden;padding:88px 0 96px}
.anat-band::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(128,194,65,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(128,194,65,.055) 1px,transparent 1px);
  background-size:44px 44px}
.anat-band>.wrap{position:relative;z-index:1}
.anat-head{max-width:720px;margin:0 auto 10px;text-align:center}
.anat-head .eyebrow{justify-content:center}
.anat-head .lede{margin:16px auto 0}

.anat-hint{display:flex;justify-content:center;align-items:center;gap:10px;margin:22px 0 4px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(246,248,250,.55)}
.anat-hint svg{flex:none;opacity:.8}

/* ---- stage -------------------------------------------------------------- */
.anat3d{position:relative;margin-top:14px}
.anat-stage{position:relative;height:600px;contain:layout paint;touch-action:pan-y;cursor:grab;
  perspective:1500px;perspective-origin:50% 48%}
.anat-stage.is-drag{cursor:grabbing}
.anat-stage::after{content:"";position:absolute;left:50%;bottom:58px;width:560px;max-width:76%;
  height:70px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(2,19,43,.66) 0%,rgba(2,19,43,0) 70%);
  filter:blur(6px);animation:anatShadow 9s ease-in-out infinite}
@keyframes anatShadow{0%,100%{transform:translateX(-50%) scale(1);opacity:.85}
  50%{transform:translateX(-50%) scale(.9);opacity:.6}}

.anat-scene{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.anat-model{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;
  transform:translateY(0) scale(1) rotateX(14deg) rotateY(-22deg);
  will-change:transform;contain:layout paint}

/* ---- parts and boxes ---------------------------------------------------- */
.anat-part{position:absolute;transform-style:preserve-3d}
.anat-box{position:absolute;transform-style:preserve-3d;pointer-events:none;
  transform:translate3d(var(--cx),var(--cy),var(--cz));
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.anat-part.is-on .anat-box{transform:translate3d(calc(var(--cx) + var(--ox,0px)),
  calc(var(--cy) + var(--oy,0px)),calc(var(--cz) + var(--oz,0px)))}
.anat-f{position:absolute;left:0;top:0;pointer-events:auto;
  background-color:var(--mat,#8E99A6);
  background-image:var(--hatch,none);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);
  transition:filter .3s ease,box-shadow .3s ease}
.anat-f.f-top{filter:brightness(1.16)}
.anat-f.f-bot{filter:brightness(.62)}
.anat-f.f-l{filter:brightness(.78)}
.anat-f.f-r{filter:brightness(.88)}
.anat-f.f-bk{filter:brightness(.7)}

/* dim everything else while one part is live */
.anat3d.is-live .anat-part:not(.is-on) .anat-f{filter:brightness(.68) saturate(.62)}
.anat3d.is-live .anat-part:not(.is-on) .anat-f.f-top{filter:brightness(.82) saturate(.62)}
.anat-part.is-on .anat-f{box-shadow:inset 0 0 0 2px var(--cta-light),0 0 26px rgba(250,70,22,.38)}

/* materials */
.m-water{--mat:rgba(46,143,214,.42);
  --hatch:repeating-linear-gradient(115deg,rgba(255,255,255,.16) 0 2px,transparent 2px 11px)}
.m-water .anat-f{box-shadow:inset 0 0 0 1px rgba(182,222,255,.5)}
.m-coping{--mat:#D7DDE4;
  --hatch:repeating-linear-gradient(90deg,rgba(4,30,66,.10) 0 1px,transparent 1px 26px)}
.m-mastic{--mat:#C9B795;
  --hatch:repeating-linear-gradient(45deg,rgba(4,30,66,.14) 0 1.5px,transparent 1.5px 5px)}
.m-rod{--mat:#79828C;--hatch:none}
.m-deck{--mat:#BAC3CD;
  --hatch:repeating-linear-gradient(0deg,rgba(4,30,66,.09) 0 1px,transparent 1px 7px)}
.m-conc{--mat:#8A95A2;
  --hatch:radial-gradient(circle at 22% 34%,rgba(4,30,66,.20) 0 2px,transparent 3px),
          radial-gradient(circle at 68% 71%,rgba(255,255,255,.16) 0 2px,transparent 3px),
          repeating-linear-gradient(45deg,rgba(4,30,66,.09) 0 1.5px,transparent 1.5px 8px)}
.m-soil{--mat:#6E5A47;
  --hatch:radial-gradient(circle at 18% 28%,rgba(0,0,0,.34) 0 2.5px,transparent 3.5px),
          radial-gradient(circle at 62% 62%,rgba(255,255,255,.12) 0 2px,transparent 3px),
          radial-gradient(circle at 84% 22%,rgba(0,0,0,.28) 0 2px,transparent 3px)}
.m-void{--mat:#0B1A2E;--hatch:none}
.m-void .anat-f{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}

/* backer rod barrel strips read as a cylinder */
.anat-rodstrip{position:absolute;left:0;top:0;pointer-events:auto;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.anat-part.is-on .anat-rodstrip{box-shadow:inset 0 0 0 1px rgba(255,167,130,.55)}
.anat-cap{border-radius:50%!important;
  background-image:radial-gradient(circle at 36% 32%,rgba(255,255,255,.34),rgba(0,0,0,.30))!important}

/* ---- leader lines ------------------------------------------------------- */
.anat-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;
  overflow:visible}
.anat-lines .ln{stroke:rgba(182,222,135,.42);stroke-width:1.25;fill:none;
  transition:stroke .25s ease,stroke-width .25s ease}
.anat-lines .dot{fill:rgba(182,222,135,.55);transition:fill .25s ease,r .25s ease}
.anat-lines .ln.on{stroke:var(--cta-light);stroke-width:2}
.anat-lines .dot.on{fill:var(--cta-light)}

/* ---- pointer chips ------------------------------------------------------ */
.anat-chips{position:absolute;inset:0;z-index:4;pointer-events:none}
.anat-chip{position:absolute;pointer-events:auto;display:flex;align-items:center;gap:9px;contain:layout;
  padding:9px 15px 9px 11px;border-radius:999px;cursor:pointer;
  background:rgba(2,19,43,.78);border:1px solid rgba(128,194,65,.42);
  color:#fff;font-family:var(--display);font-weight:700;font-size:.74rem;
  letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
  backdrop-filter:blur(7px);box-shadow:0 10px 26px rgba(2,19,43,.5);
  transition:border-color .22s ease,background .22s ease,transform .22s ease,box-shadow .22s ease}
.anat-chip .sw{width:16px;height:16px;border-radius:4px;flex:none;
  border:1px solid rgba(255,255,255,.45);background:var(--sw,#8A95A2)}
.anat-chip:hover,.anat-chip:focus-visible,.anat-chip.on{background:var(--cta);border-color:var(--cta-light);
  transform:scale(1.05);box-shadow:0 14px 34px rgba(250,70,22,.4)}
.anat-chip.pos-l{right:auto;transform-origin:left center}
.anat-chip.pos-r{left:auto;transform-origin:right center}
.anat-chip.pos-l:hover,.anat-chip.pos-l.on{transform:scale(1.05)}

/* ---- readout panel ------------------------------------------------------ */
.anat-read{max-width:860px;margin:6px auto 0;min-height:132px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);
  border-left:4px solid var(--pool);border-radius:var(--radius);padding:24px 28px}
.anat-read .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--pool);margin-bottom:8px;display:block}
.anat-read h3{font-size:1.32rem;margin-bottom:8px;color:#fff}
.anat-read p{color:rgba(246,248,250,.82);font-size:1rem;margin:0}
.anat-read.hot{border-left-color:var(--cta)}
.anat-read.hot .k{color:var(--cta-light)}

.anat-cta{text-align:center;margin-top:34px}


/* ---- responsive --------------------------------------------------------- */
@media(max-width:1080px){
  .anat-stage{height:500px}
  .anat-chip{font-size:.68rem;padding:7px 12px 7px 9px}
}
@media(max-width:860px){
  .anat-band{padding:64px 0 72px}
  .anat-stage{height:300px}
  .anat-stage::after{bottom:26px;height:46px}
  .anat-lines{display:none}
  .anat-stage{margin-bottom:152px}
  .anat-chips{position:absolute;top:100%;left:0;right:0;bottom:auto;margin-top:14px;
    display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
  .anat-chips .anat-chip{position:static!important;inset:auto!important;transform:none!important}
  .anat-chips .anat-chip:hover,.anat-chips .anat-chip.on{transform:none!important}
  .anat-read{min-height:0;padding:20px 20px}
}
@media(max-width:520px){.anat-stage{height:268px;margin-bottom:164px}}

@media (prefers-reduced-motion:reduce){
  .anat-stage::after{animation:none}
  .anat-box{transition:none}
}

/* Google Maps jump on the linear feet step */
.pmpq-maps{display:flex;align-items:flex-start;gap:12px;margin:0 0 18px;padding:14px 16px;
  border-radius:12px;text-decoration:none;
  background:rgba(128,194,65,.10);border:1px solid rgba(128,194,65,.38);
  transition:background .2s ease,border-color .2s ease,transform .2s ease}
.pmpq-maps:hover,.pmpq-maps:focus-visible{background:rgba(128,194,65,.18);
  border-color:var(--pool);transform:translateY(-1px)}
.pmpq-maps>svg:first-child{flex:none;color:var(--pool);margin-top:1px}
.pmpq-maps span{display:block;flex:1 1 auto;min-width:0}
.pmpq-maps b{display:block;color:#fff;font-family:var(--display);font-weight:700;
  font-size:.96rem;line-height:1.3}
.pmpq-maps small{display:block;margin-top:3px;color:rgba(246,248,250,.72);
  font-size:.83rem;line-height:1.5}
.pmpq-maps-go{flex:none;color:var(--pool);margin-top:3px;opacity:.85}

/* the side panel has nothing to say on some steps, so give the tool the room */
.pmpq-shell.no-aside{grid-template-columns:minmax(0,1fr)}
.pmpq-shell.no-aside .pmpq-aside{display:none}

/* application page cross link grids */
.apps-grid-3{grid-template-columns:repeat(3,1fr)}
.apps-grid-4{grid-template-columns:repeat(4,1fr)}
.region-card .app-ico{color:var(--pool-deep)}
.region-card .app-go{color:var(--navy);font-weight:700;letter-spacing:.01em}
@media(max-width:980px){.apps-grid-3,.apps-grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.apps-grid-3,.apps-grid-4{grid-template-columns:1fr}}

/* About page work strip, captions sit under the photo not on it */
.about-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.ab-shot{margin:0}
.ab-shot picture{display:block;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;
  border:1px solid #E5EAF0;box-shadow:0 10px 30px rgba(4,30,66,.10)}
.ab-shot img{display:block;width:100%;height:100%;object-fit:cover}
.ab-shot figcaption{margin-top:16px;font-size:.94rem;line-height:1.6;color:var(--gunmetal)}
.ab-shot figcaption b{display:block;font-family:var(--display);font-weight:800;font-size:1.02rem;
  color:var(--navy);margin-bottom:6px}
@media(max-width:900px){.about-strip{grid-template-columns:1fr;gap:30px;max-width:520px;margin:0 auto}}

/* ==========================================================================
   22. NAV TYPE, LOGO SCALE AND A FORGIVING MEGA MENU
   One authoritative rule for every item in the bar, so the dropdown triggers
   and the plain links cannot drift apart again.
   ========================================================================== */
.nav-links a,
.nav-links>a,
.nav-drop-trigger,
.nav-phone{
  font-family:var(--display);
  font-size:1.02rem;
  font-weight:500;
  letter-spacing:-.005em;
  color:#FFFFFF;
}
.nav-links>a,.nav-drop-trigger{padding:8px 13px;border-radius:7px}
.nav-links a:hover,.nav-drop-trigger:hover,
.nav-drop.is-open .nav-drop-trigger{color:#FFFFFF;background:rgba(255,255,255,.15)}
.nav-phone{font-weight:600;color:#FFFFFF}
.nav-phone:hover{color:var(--pool-soft)}
.nav .btn{font-size:1.02rem;font-weight:700}

/* logo, 75 percent larger, with the bar grown to carry it */
.logo-img{max-height:98px}
.nav-inner{height:126px}
@media(max-width:1100px){
  .logo-img{max-height:77px}
  .nav-inner{height:100px}
}
@media(max-width:560px){
  .logo-img{max-height:62px}
  .nav-inner{height:84px}
}

/* the panel must survive the trip from the trigger down into it, and must not
   vanish the instant the pointer clips the edge of the bar */
.nav-drop.has-mega>.nav-drop-trigger::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:22px;pointer-events:none}
.nav-drop.has-mega:hover>.nav-drop-trigger::after,
.nav-drop.has-mega.is-open>.nav-drop-trigger::after{pointer-events:auto}
/* JS holds the panel open with .is-open, so hover alone no longer drives it */
.nav-drop.has-mega:hover .mega-menu{opacity:0;visibility:hidden}
.nav-drop.has-mega.is-open .mega-menu,
.nav-drop.has-mega:focus-within .mega-menu{
  opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.mega-menu{padding-bottom:34px}
.nav .btn{white-space:nowrap}
.nav-inner{gap:18px}
@media(max-width:1240px){.nav-links>a,.nav-drop-trigger{padding:8px 9px}.nav-inner{gap:12px}}

/* the linear feet input is the one number that decides the price, so it gets
   the weight of a hero field rather than a row in a form */
.pmpq-feet-field{max-width:420px;margin:0 auto 6px;text-align:center}
.pmpq-feet-field label{display:block;text-align:center;margin-bottom:12px}
.pmpq-feet-field input{
  width:100%;height:96px;text-align:center;
  font-family:var(--display);font-size:3rem;font-weight:700;letter-spacing:-.02em;
  color:#fff;padding:0 16px;border-radius:14px;
  border:2px solid rgba(128,194,65,.45);background:rgba(2,19,43,.55);
  -moz-appearance:textfield}
.pmpq-feet-field input::-webkit-outer-spin-button,
.pmpq-feet-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pmpq-feet-field input::placeholder{color:rgba(246,248,250,.28);font-weight:700}
.pmpq-feet-field input:focus{outline:none;border-color:var(--pool);
  box-shadow:0 0 0 4px rgba(128,194,65,.18)}
.pmpq-feet-unit{display:block;margin-top:10px;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(246,248,250,.62)}
@media(max-width:560px){.pmpq-feet-field input{height:80px;font-size:2.4rem}}

/* Book later: the one question worth asking before they leave */
.pmpq-when{margin-top:20px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.pmpq-when-q{font-family:var(--display);font-weight:700;font-size:1.06rem;color:#fff;
  margin-bottom:14px}
.pmpq-when-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pmpq-when-opts button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:13px 15px;border-radius:11px;cursor:pointer;text-align:left;
  background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.16);
  color:#fff;font-family:var(--display);font-weight:600;font-size:.95rem;
  transition:border-color .18s,background .18s,transform .18s}
.pmpq-when-opts button small{font-family:var(--body);font-weight:300;font-size:.79rem;
  color:rgba(246,248,250,.66);letter-spacing:0}
.pmpq-when-opts button:hover{border-color:rgba(128,194,65,.6);background:rgba(128,194,65,.10)}
.pmpq-when-opts button.sel{border-color:var(--pool);background:rgba(128,194,65,.18);
  transform:translateY(-1px)}
.pmpq-when-opts button.sel small{color:rgba(246,248,250,.85)}
@media(max-width:560px){.pmpq-when-opts{grid-template-columns:1fr}}

/* ---------- 23. Logo at full size, and true Gators orange ---------- */
.logo-img{max-height:147px}
.nav-inner{height:176px}
@media(max-width:1240px){.logo-img{max-height:120px}.nav-inner{height:146px}}
@media(max-width:1100px){.logo-img{max-height:104px}.nav-inner{height:128px}}
@media(max-width:560px){.logo-img{max-height:80px}.nav-inner{height:102px}}

/* Every orange button is now #FA4616, University of Florida orange. The small
   button variants used to fall back to the darker #C23A0F purely to reach AA on
   small text, so the type grows instead of the colour changing. */
.btn-primary,a.btn-primary,.on-dark a.btn-primary,.on-dark .btn-primary,
.btn-primary.btn-sm,a.btn-primary.btn-sm,
.nav a.btn-primary,.nav .btn-primary,
.sticky-bar .btn-primary,.pmpq .btn-primary,
.s-quote,.anat-cta .btn-primary{
  background:var(--cta);color:#FFFFFF;
  font-size:1.18rem;font-weight:800;letter-spacing:-.01em}
.btn-primary:hover,a.btn-primary:hover,.on-dark .btn-primary:hover,
.btn-primary.btn-sm:hover,.nav .btn-primary:hover,.sticky-bar .btn-primary:hover,
.s-quote:hover{background:#E13F13;box-shadow:0 12px 32px rgba(250,70,22,.45)}
.nav .btn-primary{padding:14px 24px}
@media(max-width:1240px){.nav .btn-primary{font-size:1.06rem;padding:12px 18px}}

/* the sticky bar quote button had its own darker background, bring it in line */
.sticky-bar .s-quote,a.s-quote{background:var(--cta)!important;color:#fff!important;
  font-size:1.18rem;font-weight:800}
.sticky-bar .s-quote:hover,a.s-quote:hover{background:#E13F13!important}
/* the nav is a flex row, so the logo must be told not to shrink */
.logo{flex:0 0 auto;display:flex;align-items:center}
.logo-img{flex:0 0 auto;width:auto;max-width:none}

/* The bar now carries a 221px logo, larger type and a larger button, which no
   longer fits the 1180px content wrap. Let the nav use the full viewport. */
.nav .nav-inner{max-width:1560px;padding-left:28px;padding-right:28px;gap:14px}
.nav-links{gap:6px}
.nav-links>a,.nav-drop-trigger{padding:8px 11px}
.nav-phone{margin-left:8px}
@media(max-width:1420px){
  .nav .nav-inner{gap:10px;padding-left:20px;padding-right:20px}
  .nav-links>a,.nav-drop-trigger{padding:8px 8px;font-size:.97rem}
  .logo-img{max-height:120px}
  .nav-inner{height:148px}
}
@media(max-width:1260px){
  /* the number is already in the utility bar directly above, so the duplicate goes */
  .nav-phone{display:none}
  .logo-img{max-height:104px}
  .nav-inner{height:130px}
}

/* ---------- 24. REAL JOB GALLERY ---------- */
.jseq-wrap{display:grid;gap:34px}
.jseq{background:#fff;border:1px solid #E5EAF0;border-radius:var(--radius);padding:26px 26px 30px;
  box-shadow:0 10px 30px rgba(4,30,66,.07)}
.jseq-head h3{font-size:1.24rem;margin-bottom:8px;color:var(--navy)}
.jseq-head p{font-size:.97rem;color:var(--gunmetal);max-width:68ch;margin-bottom:22px}
.jseq-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.jseq:nth-child(2) .jseq-strip{grid-template-columns:repeat(2,1fr);max-width:620px}
.jseq-step{margin:0}
.jseq-shot{position:relative;border-radius:11px;overflow:hidden;border:1px solid #E5EAF0;
  background:#EEF2F6}
.jseq-shot picture,.jcard-shot picture{display:block;aspect-ratio:3/4}
.jseq-shot img,.jcard-shot img{display:block;width:100%;height:100%;object-fit:cover}
.jseq-tag{position:absolute;left:9px;top:9px;padding:5px 11px;border-radius:999px;
  font-family:var(--display);font-size:.66rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:#fff;backdrop-filter:blur(5px)}
.t-before{background:rgba(92,102,114,.94)}
/* navy on the brand orange reaches 4.69:1, so the badge keeps the exact
   Gators orange instead of being darkened for legibility */
.t-during{background:var(--cta);color:var(--navy)}
.t-after{background:rgba(77,123,38,.95)}
.seq-time{position:absolute;right:9px;top:9px;padding:5px 9px;border-radius:7px;
  background:rgba(2,19,43,.78);color:#fff;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.06em}
.jseq-step figcaption,.jcard figcaption{margin-top:11px;font-size:.87rem;line-height:1.55;
  color:var(--gunmetal)}

.jfilter{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:28px}
.jfilter button{display:inline-flex;align-items:center;gap:8px;padding:10px 17px;border-radius:999px;
  cursor:pointer;background:#fff;border:1.5px solid #E5EAF0;color:var(--navy);
  font-family:var(--display);font-weight:700;font-size:.9rem;transition:all .18s}
.jfilter button span{font-family:var(--mono);font-size:.76rem;font-weight:400;color:var(--gunmetal)}
.jfilter button:hover{border-color:var(--pool)}
.jfilter button.sel{background:var(--navy);border-color:var(--navy);color:#fff}
.jfilter button.sel span{color:var(--pool-soft)}
.jgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.jcard{margin:0}
.jcard-shot{position:relative;border-radius:12px;overflow:hidden;border:1px solid #E5EAF0;
  background:#EEF2F6;box-shadow:0 8px 24px rgba(4,30,66,.08)}
.jnote{margin-top:30px;text-align:center;font-family:var(--mono);font-size:.78rem;
  letter-spacing:.04em;color:var(--gunmetal)}
@media(max-width:900px){
  .jseq-strip,.jseq:nth-child(2) .jseq-strip{grid-template-columns:repeat(2,1fr)}
  .jgrid{grid-template-columns:repeat(2,1fr)}
  .jseq{padding:20px 18px 24px}
}
@media(max-width:560px){.jgrid{grid-template-columns:1fr}}

/* ---------- 25. THE WORK REEL ---------- */
/* the source is phone footage, so the player is portrait rather than a wide
   box cropping 60 percent of every frame away */
.reel-band{background:linear-gradient(180deg,var(--navy-d),var(--navy) 60%,var(--navy-2));
  padding:76px 0 82px}
.reel-grid{display:grid;grid-template-columns:1fr 390px;gap:56px;align-items:center}
.reel-copy h2{margin-bottom:14px;color:#fff}
.reel-beats{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:13px}
.reel-beats li{display:flex;align-items:flex-start;gap:14px;font-size:1rem;
  color:rgba(246,248,250,.86);line-height:1.5}
.reel-beats span{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:rgba(128,194,65,.16);border:1px solid rgba(128,194,65,.5);color:var(--pool);
  font-family:var(--display);font-weight:800;font-size:.76rem}
.reel{margin:0;position:relative;border-radius:20px;overflow:hidden;
  border:1px solid rgba(128,194,65,.3);box-shadow:0 30px 70px rgba(2,19,43,.55);background:#02132B}
.reel video{display:block;width:100%;height:auto;aspect-ratio:406/720;object-fit:cover;cursor:pointer}
.reel-play{position:absolute;inset:0;margin:0;width:100%;height:100%;border:0;cursor:pointer;
  background:rgba(2,19,43,.34);display:flex;align-items:center;justify-content:center;
  transition:opacity .3s ease,visibility .3s}
.reel-play span{width:78px;height:78px;border-radius:50%;background:var(--cta);
  box-shadow:0 12px 34px rgba(250,70,22,.5);position:relative;display:block;transition:transform .2s}
.reel-play span::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);
  border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent}
.reel-play:hover span{transform:scale(1.07)}
.reel-play.gone{opacity:0;visibility:hidden}
@media(max-width:900px){
  .reel-grid{grid-template-columns:1fr;gap:34px}
  .reel{max-width:360px;margin:0 auto}
}
@media(max-width:700px){.reel-band{padding:56px 0 60px}.reel-play span{width:64px;height:64px}}

/* ---------- 26. ROUND FINISH SWATCHES ---------- */
.pmpq-roundswatch{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.pmpq-roundswatch button{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:14px;padding:24px 14px 20px;border-radius:16px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.16);
  transition:border-color .2s,background .2s,transform .2s}
.pmpq-roundswatch button:hover{border-color:rgba(128,194,65,.6);background:rgba(128,194,65,.08)}
.pmpq-roundswatch button.sel{border-color:var(--pool);background:rgba(128,194,65,.14)}
.rs-ring{display:block;width:132px;height:132px;border-radius:50%;padding:5px;
  background:rgba(255,255,255,.14);box-shadow:0 10px 26px rgba(2,19,43,.45);
  transition:box-shadow .22s,background .22s}
.pmpq-roundswatch button.sel .rs-ring{background:var(--pool);
  box-shadow:0 0 0 4px rgba(128,194,65,.26),0 12px 30px rgba(2,19,43,.5)}
.pmpq-roundswatch .rs-img{display:block;width:122px;height:122px;border-radius:50%;
  background-size:cover;background-position:center}
.rs-name{font-family:var(--display);font-weight:800;letter-spacing:.18em;font-size:.94rem;color:#fff}
/* the second circle: empty until chosen, then it fills with the check */
.rs-check{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  border:2px solid rgba(255,255,255,.34);background:transparent;color:transparent;
  transition:background .2s,border-color .2s,color .2s,transform .2s}
.rs-check svg{width:18px;height:18px;display:block}
.pmpq-roundswatch button:hover .rs-check{border-color:rgba(128,194,65,.75)}
.pmpq-roundswatch button.sel .rs-check{background:var(--pool);border-color:var(--pool);
  color:var(--navy-d);transform:scale(1.06)}
@media(max-width:520px){
  .pmpq-roundswatch{gap:12px}
  .rs-ring{width:106px;height:106px}
  .pmpq-roundswatch .rs-img{width:96px;height:96px}
  .pmpq-roundswatch button{padding:18px 8px 16px;gap:11px}
}

/* calendar: a date inside our lead time and a date genuinely booked read
   differently, because they are different things */
.pmpq-cal-cell.booked,.pmpq-cal-cell.off{position:relative}
.cal-flag{display:block;font-family:var(--mono);font-size:.54rem;letter-spacing:.06em;
  text-transform:uppercase;line-height:1;margin-top:3px;font-weight:700}
.pmpq-cal-cell.booked{background:rgba(128,194,65,.13);border-color:rgba(128,194,65,.4);
  color:rgba(246,248,250,.72);cursor:not-allowed}
.pmpq-cal-cell.booked .cal-flag{color:var(--pool)}
.pmpq-cal-cell.booked::after{content:"";position:absolute;right:5px;top:5px;width:11px;height:11px;
  border-radius:50%;background:var(--pool)}
.pmpq-cal-cell .cal-soon{color:rgba(246,248,250,.42)}

/* ---------- 27. APPLICATION PAGE PHOTOGRAPHY ---------- */
.ap-photos{background:var(--porcelain);padding:74px 0 80px}
.ap-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ap-shot{margin:0}
.ap-shot picture{display:block;aspect-ratio:4/3;border-radius:13px;overflow:hidden;
  border:1px solid #E5EAF0;box-shadow:0 10px 28px rgba(4,30,66,.09);background:#EEF2F6}
.ap-shot img{display:block;width:100%;height:100%;object-fit:cover}
.ap-shot figcaption{margin-top:13px;font-size:.92rem;line-height:1.55;color:var(--gunmetal)}
.ap-wide{margin:36px 0 0}
.ap-wide picture{display:block;aspect-ratio:21/9;border-radius:15px;overflow:hidden;
  border:1px solid #E5EAF0;box-shadow:0 16px 40px rgba(4,30,66,.12);background:#EEF2F6}
.ap-wide img{display:block;width:100%;height:100%;object-fit:cover}
.ap-wide figcaption{margin-top:14px;text-align:center;font-family:var(--mono);font-size:.84rem;
  letter-spacing:.02em;color:var(--gunmetal)}
@media(max-width:900px){
  .ap-strip{grid-template-columns:1fr;gap:28px;max-width:520px;margin:0 auto}
  .ap-wide picture{aspect-ratio:16/9}
  .ap-photos{padding:56px 0 60px}
}

/* ---------- 28. ONE CITY HERO, USED ON EVERY LOCATION PAGE ---------- */
/* image-set lets the browser take WebP where it can, and the right size for the
   screen, without a <picture> element inside a background */
.city-hero{
  position:relative;color:#fff;overflow:hidden;
  background-color:var(--navy);
  background-image:
    linear-gradient(90deg,rgba(4,30,66,.93) 0%,rgba(4,30,66,.80) 46%,rgba(4,30,66,.42) 100%),
    image-set(url("../img/pmp-city-hero-1920.webp") type("image/webp"),
              url("../img/pmp-city-hero-1920.jpg")  type("image/jpeg"));
  background-size:cover;
  background-position:center 62%;
  background-repeat:no-repeat;
}
@media(max-width:1100px){
  .city-hero{background-image:
    linear-gradient(90deg,rgba(4,30,66,.94) 0%,rgba(4,30,66,.86) 52%,rgba(4,30,66,.55) 100%),
    image-set(url("../img/pmp-city-hero-1400.webp") type("image/webp"),
              url("../img/pmp-city-hero-1400.jpg")  type("image/jpeg"))}
}
@media(max-width:700px){
  /* on a phone the copy sits over the whole frame, so the wash has to be heavier */
  .city-hero{background-image:
    linear-gradient(180deg,rgba(4,30,66,.90) 0%,rgba(4,30,66,.84) 55%,rgba(4,30,66,.92) 100%),
    image-set(url("../img/pmp-city-hero-900.webp") type("image/webp"),
              url("../img/pmp-city-hero-900.jpg")  type("image/jpeg"));
    background-position:center}
}
/* the green wash the v2 hero used to carry sits on top of the photograph */
.city-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 90% at 82% 18%,rgba(128,194,65,.16),transparent 60%)}
.city-hero>.wrap,.city-hero>div{position:relative;z-index:1}

/* ---------- 29. BYPASS BLOCKS (WCAG 2.4.1, Level A) ---------- */
/* The bar is 176px with a mega menu behind it, so a keyboard or screen reader
   user had a long walk to the content. This gives them one keystroke. */
.skip-link{position:absolute;left:14px;top:-100px;z-index:200;
  background:var(--navy-d);color:#fff;border:2px solid var(--pool);border-top:0;
  font-family:var(--display);font-weight:800;
  font-size:1rem;padding:14px 22px;border-radius:0 0 10px 10px;
  text-decoration:none;box-shadow:0 10px 30px rgba(2,19,43,.5);
  transition:top .18s ease}
.skip-link:focus{top:0;outline:3px solid var(--pool);outline-offset:3px}
main:focus{outline:none}

/* blog cards are h2 for the outline, but keep the card sized type */
.post-title{font-size:1.2rem;font-weight:700;line-height:1.3}

/* ---------- 30. Local content pillars (city pages) ---------- */
/* Its own band treatment so it separates cleanly from whichever section sits
   above it, which differs between the two city templates. */
.locpil{background:linear-gradient(180deg,var(--porcelain) 0%,#fff 62%)}
.lp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
@media(max-width:1040px){.lp-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.lp-grid{grid-template-columns:1fr}}
.lp-card{position:relative;background:#fff;border:1.5px solid #E5EAF0;
  border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 24px 26px}
.lp-card::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;
  border-radius:3px;background:var(--pool)}
.lp-num{display:block;font-family:var(--mono);font-size:.72rem;font-weight:700;
  letter-spacing:.18em;color:var(--pool-deep);margin-bottom:10px}
.lp-kicker{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gunmetal);margin:0 0 8px}
.lp-card h3{font-size:1.1rem;line-height:1.32;color:var(--navy);margin:0 0 12px}
.lp-card p{color:var(--gunmetal);font-size:.97rem;line-height:1.78;margin:0}
.lp-constant{margin:30px 0 0;padding:20px 22px;border-radius:var(--radius);
  background:var(--pool-wash);border:1px solid rgba(77,123,38,.22);
  color:var(--navy);font-size:.97rem;line-height:1.75}
.lp-constant b{font-family:var(--display);color:var(--navy)}

/* ---------- 31. Footer address (NAP), matching the Business Profile ---------- */
.foot-nap{font-style:normal;margin-top:16px;font-size:.9rem;line-height:1.7;
  color:rgba(234,241,246,.78)}
.foot-nap a{color:var(--pool-soft);text-decoration:none;font-weight:500}
.foot-nap a:hover,.foot-nap a:focus-visible{text-decoration:underline}
.foot-nap span{color:rgba(234,241,246,.62)}

/* ---------- 32. Self hosted clips in the 9:16 frames on Projects ---------- */
/* .vid9 used to hold a YouTube iframe. It now holds a <video>, which needs the
   same absolute fill. .reel-play is reused for the button, so nothing else is
   added for that. */
.vid9 video{position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;cursor:pointer;border:0;background:var(--navy-2)}
.vid-row.vid-3{max-width:1120px}
@media(max-width:1100px){.vid-row.vid-3{max-width:840px}}

/* ---------- 33. Footer build stamp ---------- */
/* Written by _build/stamp.py. Lets you tell at a glance whether the preview or
   the live site is serving the push you just made. */
.foot-build{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  color:rgba(234,241,246,.55);white-space:nowrap}  /* 5.51:1 on --navy-d */

/* ---------- 34. Quote starter on the home page ---------- */
/* Carries id="book". Five CTAs on the home page, the hero button among them,
   already pointed at #book, and nothing on the page had that id, so all five
   were dead. This is both the fix and the missing first step of the funnel. */
.qstart{background:linear-gradient(180deg,var(--navy),var(--navy-d));padding:64px 0 72px}
.qstart-card{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;
  background:rgba(255,255,255,.04);border:1px solid rgba(128,194,65,.28);
  border-radius:var(--radius);padding:44px 48px;box-shadow:0 26px 64px rgba(0,0,0,.35)}
.qstart-copy h2{color:#fff;margin-bottom:12px}
.qstart-copy p{color:rgba(234,241,246,.82);font-size:1rem;line-height:1.75}
.qstart-label{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--pool-soft);margin-bottom:10px}
.qstart-row{display:flex;gap:12px;flex-wrap:wrap}
.qstart-row input{flex:1 1 150px;min-width:0;font-family:var(--display);font-weight:700;
  font-size:1.5rem;padding:14px 18px;border-radius:12px;border:1.5px solid rgba(234,241,246,.44);
  background:rgba(2,19,43,.6);color:#fff}
.qstart-row input::placeholder{color:rgba(234,241,246,.52);font-weight:400}
.qstart-row input:focus-visible{outline:none;border-color:var(--pool);
  box-shadow:0 0 0 3px rgba(128,194,65,.28)}
.qstart-row .btn{flex:0 0 auto}
/* 5.4:1 on the card over --navy */
.qstart-note{margin-top:14px;font-size:.84rem;line-height:1.6;color:rgba(234,241,246,.62)}
@media(max-width:900px){
  .qstart-card{grid-template-columns:1fr;gap:28px;padding:34px 26px}
  .qstart-row .btn{width:100%}
}

/* ---------- 35. HOA page establishing shot ---------- */
.who-aerial{margin:0 0 40px;max-width:1100px}
.who-aerial picture{display:block;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);background:var(--navy-2)}
.who-aerial img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.who-aerial figcaption{margin-top:14px;font-size:.92rem;line-height:1.6;color:var(--gunmetal);
  max-width:64ch}
@media(max-width:700px){.who-aerial{margin-bottom:28px}
  .who-aerial figcaption{font-size:.88rem}}

/* ---------- 36. Temporary build badge, top bar ---------- */
/* Written by _build/stamp.py alongside the footer stamp. Both come out with
   `python3 _build/stamp.py strip` before launch. */
.build-badge{order:-1;background:var(--cta);color:#fff;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.08em;padding:3px 8px;border-radius:5px;
  font-weight:700;white-space:nowrap}

/* four clips in the row instead of three. 4 x 255 plus 3 x 30 of gap is 1110,
   inside the 1180px wrap less its 48px of padding. */
.vid-row.vid-4{max-width:1140px}
.vid-row.vid-4 .vid-col{flex:0 1 255px;max-width:255px}
@media(max-width:1180px){.vid-row.vid-4{max-width:720px}}
@media(max-width:760px){.vid-row.vid-4 .vid-col{flex:0 1 86%;max-width:300px}}

/* ---------- 24. Scroll padding for the two fixed bars ----------
   Scrolls the browser performs itself, anchor jumps, validation focus and
   scrollIntoView, know nothing about the sticky header or the fixed mobile
   CTA bar, so they can leave the control they just revealed sitting
   underneath one of them. Measured on device: the header is 131px and the
   mobile bar is 65px. The funnel's own E-Quote button was landing under the
   bottom bar on short viewports, where a tap hits the bar instead.
   scroll-padding reserves that space for every browser initiated scroll.
   The bar is 65px but body padding-bottom was 58px, so the last element on
   every page sat 7px under it. */
html{scroll-padding-top:140px}
@media(max-width:820px){
  html{scroll-padding-bottom:78px}
  body{padding-bottom:72px}
}

/* ---------- 25. While the on screen keyboard is open ----------
   The fixed bar is 65px of a screen the keyboard has already taken most of,
   and on Android it floats above the keyboard across the field being typed
   into. The class is set from the visual viewport, see book-online.html. */
html.kb-open .sticky-bar{display:none}
html.kb-open body{padding-bottom:0}

/* ---------- 26. Minimum touch target ----------
   Measured on iPhone SE, these all sat under the 44px that Apple's HIG and
   WCAG 2.5.5 ask for. The padding grows the hittable box without changing
   anything you can see, so the layout is untouched. */
@media(max-width:820px),(pointer:coarse){
  .u-phone{padding:8px 6px;display:inline-flex;align-items:center;min-height:44px}
  .ham{min-width:44px;min-height:44px}
  .foot-legal a,.foot-legal span a{display:inline-block;padding:11px 4px;min-height:44px;
    line-height:22px;box-sizing:border-box}
  .m3-pin{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  /* the pin graphic keeps its size, only the reachable area grows */
  .m3-pin>*{pointer-events:none}
}

/* The remaining near misses, most of them 1 to 3px under. A target that is
   43px tall fails the same check a 20px one does, and costs the same to fix. */
@media(max-width:820px),(pointer:coarse){
  .crumbs a,.crumbs li>span{display:inline-block;padding:12px 2px;min-height:44px;
    line-height:20px;box-sizing:border-box}
  .m3-pin{min-height:46px;min-width:46px}
  .agree-jump{min-height:44px;padding:12px 4px;display:inline-flex;align-items:center}
  .oc-links a,.near-grid a,.foot-grid a,.foot-nap a,.pmpq-more-links a{
    min-height:44px;display:inline-flex;align-items:center}
  .mega-item,.nav-links a{min-height:44px;display:flex;align-items:center}
}

/* The last of them, named precisely rather than guessed at. The carousel dots
   and the calendar month arrows were the worst: 9x9 and 38x38. */
@media(max-width:820px),(pointer:coarse){
  .m3-dots button{min-width:44px;min-height:44px;background-clip:content-box;
    padding:17px 17px;box-sizing:border-box}
  .area-call,.area-hub-link,.area-view{min-height:44px;display:inline-flex;align-items:center}
  .crumb a,.crumbs a{display:inline-block;padding:14px 3px;min-height:44px;
    line-height:16px;box-sizing:border-box}
  .cal-note a{min-height:44px;display:inline-flex;align-items:center}
}
/* The calendar arrows are a control at every width, not just on a phone. */
#qCalPrev,#qCalNext{min-width:44px;min-height:44px;display:inline-flex;
  align-items:center;justify-content:center}
/* The project filter row. 38px tall on every device, including the iPad. */
.proj-filters button,[data-f]{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
/* Visually hidden, still read aloud. For status messages that must reach a
   screen reader without changing the visual design. WCAG 4.1.3. */
.pmp-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* WCAG 2.2.2 pause control for the rotating service map. */
.m3-pause{position:absolute;right:12px;bottom:12px;z-index:5;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1.5px solid rgba(246,248,250,.3);background:rgba(10,28,51,.82);color:#F6F8FA;font-size:.8rem;line-height:1;cursor:pointer;transition:.18s}
.m3-pause::before{content:'\275A\275A';letter-spacing:1px}
.m3-pause.is-paused::before{content:'\25B6';letter-spacing:0}
.m3-pause:hover{border-color:var(--pool);color:var(--pool)}
.m3-pause:focus-visible{outline:3px solid var(--pool);outline-offset:2px}