:root {
  --bg: #f3f7fa;
  --bg-soft: #eaf2f7;
  --surface: rgba(255,255,255,0.82);
  --surface-strong: #ffffff;
  --text: #1f2933;
  --muted: #5d6b78;
  --line: rgba(31, 41, 51, 0.08);
  --line-strong: rgba(31, 41, 51, 0.16);
  --accent: #2ea7d7;
  --accent-deep: #176e99;
  --accent-soft: #dff5ff;
  --shadow: 0 24px 60px rgba(17, 24, 39, 0.08);
  --radius: 24px;
  --radius-sm: 18px;
  --container: min(1180px, calc(100vw - 40px));
  --header-height: 88px;
  --transition: 320ms cubic-bezier(.2,.7,.2,1);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Inter', sans-serif; color: var(--text); background: linear-gradient(180deg, #fbfdff 0%, var(--bg) 100%); }
a { color: inherit; text-decoration: none; }
/* Sitewide: inline content links inside <main> read as links (brand blue, no underline). UI anchors (buttons, cards, chips, nav, text-link) are excluded so chrome is untouched. */
main a:not(.button):not(.text-link):not(.nav-cta):not(.brand):not(.project-card):not(.pool-card):not(.colour-card):not(.colour-chip):not(.related-pool) { color: var(--accent-deep); transition: color var(--transition); }
main a:not(.button):not(.text-link):not(.nav-cta):not(.brand):not(.project-card):not(.pool-card):not(.colour-card):not(.colour-chip):not(.related-pool):hover,
main a:not(.button):not(.text-link):not(.nav-cta):not(.brand):not(.project-card):not(.pool-card):not(.colour-card):not(.colour-chip):not(.related-pool):focus-visible { color: var(--accent); }
img, video { max-width: 100%; display: block; }
button, input, textarea { font: inherit; }
.container { width: var(--container); margin: 0 auto; }
.site-header { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(18px); background: rgba(243,247,250,0.76); border-bottom: 1px solid transparent; transition: background var(--transition), border-color var(--transition), box-shadow var(--transition); }
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05); }
.header-inner { min-height: var(--header-height); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand img { height: 44px; width: auto; }
.site-nav { display:flex; align-items:center; gap:22px; color: var(--muted); font-weight:500; }
.site-nav a { position:relative; transition: color var(--transition); }
.site-nav a:hover, .site-nav a.is-active { color: var(--text); }
.nav-cta { padding: 14px 20px; border-radius:999px; color:white !important; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); box-shadow: 0 16px 28px rgba(46, 167, 215, 0.25); }
.menu-toggle { display:none; border:1px solid var(--line); background: rgba(255,255,255,0.88); color: var(--text); border-radius:999px; padding:12px 16px; }
/* "Pools" dropdown — click/keyboard toggled (never hover-only, so it works on touch) */
.nav-group { position:relative; }
.nav-group-toggle { display:inline-flex; align-items:center; gap:7px; padding:0; border:0; background:none; color:inherit; font-weight:500; cursor:pointer; transition: color var(--transition); }
.nav-group-toggle:hover, .nav-group.is-active .nav-group-toggle, .nav-group.is-open .nav-group-toggle { color: var(--text); }
.nav-caret { width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); transition: transform var(--transition); }
.nav-group.is-open .nav-caret { transform:rotate(-135deg) translate(-3px,-3px); }
.nav-group-menu { display:none; position:absolute; top:calc(100% + 16px); left:-18px; min-width:212px; padding:12px; border-radius:20px; background:rgba(255,255,255,.97); backdrop-filter:blur(18px); border:1px solid var(--line); box-shadow:0 22px 44px rgba(15,23,42,.12); z-index:50; }
.nav-group.is-open .nav-group-menu { display:grid; gap:2px; }
/* invisible bridge so the pointer can cross the gap between button and panel */
.nav-group.is-open .nav-group-menu::before { content:''; position:absolute; left:0; right:0; top:-16px; height:16px; }
.site-nav .nav-group-menu a { padding:10px 14px; border-radius:12px; white-space:nowrap; transition: background var(--transition), color var(--transition); }
.site-nav .nav-group-menu a:hover, .site-nav .nav-group-menu a:focus-visible { background:rgba(46,167,215,.10); color: var(--text); }
.site-nav .nav-group-menu a.is-active { background:rgba(46,167,215,.12); color: var(--text); font-weight:600; }
.hero-section { position:relative; min-height:min(68vh, 660px); display:flex; align-items:stretch; overflow:clip; }
.hero-video, .hero-overlay { position:absolute; inset:0; }
.hero-video { width:100%; height:100%; object-fit:cover; filter: saturate(0.8) contrast(0.94) brightness(0.68); }
.hero-overlay { background: linear-gradient(120deg, rgba(8,18,28,.78) 0%, rgba(8,18,28,.49) 45%, rgba(8,18,28,.17) 100%), linear-gradient(180deg, rgba(46,167,215,.20), transparent 40%); }
.hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:1.2fr .8fr; gap:36px; align-items:end; padding:78px 0 52px; }
.hero-copy { color:white; padding-bottom:20px; }
.hero-panel { padding-bottom:20px; }
.eyebrow, .section-tag, .mini-label, .trust-label { text-transform:uppercase; letter-spacing:.18em; font-size:12px; font-weight:700; }
.eyebrow { display:inline-flex; padding:11px 14px; border-radius:999px; border:1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.08); margin-bottom:24px; }
.hero-copy h1, .page-hero-inner h1 { margin:0; font-family:'Manrope',sans-serif; font-size:clamp(2.6rem,5.4vw,3.6rem); line-height:.95; letter-spacing:-.055em; max-width:16ch; }
.page-hero-inner h1 { max-width:18ch; }
.hero-copy p, .page-hero-inner p { margin:24px 0 0; max-width:42rem; font-size:clamp(1.05rem,1.9vw,1.22rem); line-height:1.75; color: rgba(255,255,255,.82); }
.page-hero { padding: 120px 0 40px; background: linear-gradient(180deg, #f7fbfe 0%, transparent 100%); }
.page-hero-inner p { color: var(--muted); }
.hero-actions, .quote-band-inner, .section-actions { display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-top:30px; }
.section-actions.center { justify-content:center; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:10px; min-height:54px; padding:0 24px; border-radius:999px; border:1px solid transparent; font-weight:700; transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition); }
.button:hover { transform: translateY(-2px); }
.button-primary { color:white; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); box-shadow: 0 18px 30px rgba(46,167,215,.25); }
.button-secondary { color:white; border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.08); }
.button-light { background:white; color: var(--accent-deep); box-shadow:none; }
.full { width:100%; }
.hero-metrics { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding:0; margin:38px 0 0; }
.hero-metrics li { padding:18px; border-radius:var(--radius-sm); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); }
.hero-metrics strong { display:block; font-size:1rem; margin-bottom:6px; }
.hero-metrics span { display:block; color: rgba(255,255,255,.72); font-size:.95rem; line-height:1.55; }
.panel-card, .info-card, .project-card, .step-card, .contact-card, .prompt-card, .slider-shell, .pool-card, .colour-card { background:var(--surface); backdrop-filter: blur(16px); border:1px solid rgba(255,255,255,.3); box-shadow:var(--shadow); }
.floating-card { padding:28px; border-radius:28px; }
.panel-card h2 { margin:10px 0 14px; font-size:1.8rem; line-height:1.05; }
.panel-card p, .panel-points, .feature-copy p, .contact-copy p { color: var(--muted); line-height:1.7; }
.panel-points { list-style:none; padding:0; margin:18px 0 24px; display:grid; gap:12px; }
.panel-points li::before { content:'•'; color: var(--accent); margin-right:10px; }
.panel-points a { color: var(--accent-deep); font-weight:600; transition: color var(--transition); }
.panel-points a:hover, .panel-points a:focus-visible { color: var(--accent); }
/* compact enquiry form inside the hero panel card */
.panel-form-title { margin:0 0 12px; font-family:'Manrope',sans-serif; font-size:1.4rem; line-height:1.08; letter-spacing:-.02em; }
.hero-enquiry { display:grid; gap:11px; }
.hero-enquiry label { display:block; }
.hero-enquiry input, .hero-enquiry textarea { padding:12px 14px; border-radius:14px; font-size:.95rem; }
.hero-enquiry textarea { resize:vertical; min-height:62px; }
.hero-enquiry .button { min-height:48px; margin-top:2px; }
.hero-enquiry .form-note { margin:0; }
.hero-enquiry .form-note:empty { display:none; }
.trust-strip { border-bottom:1px solid var(--line); border-top:1px solid var(--line); background: rgba(255,255,255,.6); }
/* "Our differences" blue band under the hero */
.differences-band { position:relative; overflow:hidden; padding:38px 0; background:linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%); color:#fff; }
.differences-band::before { content:''; position:absolute; top:-50%; right:-8%; width:460px; height:460px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); pointer-events:none; }
.differences-band::after { content:''; position:absolute; bottom:-55%; left:-10%; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.09), transparent 70%); pointer-events:none; }
.diff-eyebrow { display:block; text-align:center; text-transform:uppercase; letter-spacing:.22em; font-size:12px; font-weight:800; color:rgba(255,255,255,.85); margin-bottom:20px; }
.diff-grid { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.diff-dupe { display:none; }
.diff-card { text-align:center; padding:20px 22px; border-radius:18px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(6px); transition:transform var(--transition), background var(--transition), box-shadow var(--transition); }
.diff-card:hover { transform:translateY(-4px); background:rgba(255,255,255,.15); box-shadow:0 18px 36px rgba(8,18,28,.28); }
.diff-icon { display:grid; place-items:center; width:46px; height:46px; margin:0 auto 11px; border-radius:13px; background:rgba(255,255,255,.18); color:#fff; }
.diff-icon svg { width:24px; height:24px; }
.diff-card h3 { margin:0 0 6px; font-family:'Manrope',sans-serif; font-size:1.02rem; line-height:1.18; letter-spacing:-.01em; }
.diff-card p { margin:0; color:rgba(255,255,255,.85); line-height:1.5; font-size:.85rem; }
@media (prefers-reduced-motion: no-preference){ .diff-icon { animation:diff-float 3.6s ease-in-out infinite; } .diff-card:nth-child(2) .diff-icon { animation-delay:.5s; } .diff-card:nth-child(3) .diff-icon { animation-delay:1s; } }
@keyframes diff-float { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
/* Mobile: thin infinite horizontal scroller instead of a tall stack */
@media (max-width:760px){
  .differences-band { padding:26px 0; }
  .differences-band .container { width:100%; }
  .diff-eyebrow { margin-bottom:14px; }
  .diff-grid { display:flex; width:max-content; gap:0; animation:diff-marquee 24s linear infinite; }
  .diff-dupe { display:block; }
  .diff-card { flex:0 0 76vw; max-width:300px; margin-right:14px; }
  html.js .differences-band .reveal { opacity:1; transform:none; }
}
@keyframes diff-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (max-width:760px) and (prefers-reduced-motion: reduce){ .diff-grid { animation:none; overflow-x:auto; -webkit-overflow-scrolling:touch; } }
/* blue "differences"-style stat panel (e.g. founder experience card) */
.founder-stat { margin-top:28px; padding:16px; border-radius:22px; background:linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%); color:#fff; box-shadow:0 18px 40px rgba(23,110,153,.28); }
.founder-stat .diff-card { background:rgba(255,255,255,.13); }
.founder-stat .diff-card h3 { color:#fff; }
.founder-stat .diff-card p, .founder-copy .founder-stat .diff-card p { margin:0; color:rgba(255,255,255,.85); font-size:.86rem; line-height:1.5; }
.trust-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; padding:20px 0; }
.trust-label, .section-tag, .mini-label { color: var(--accent-deep); }
.trust-grid p { color: var(--muted); margin:10px 0 0; line-height:1.65; }
.section { padding:110px 0; }
.section.section-tight-top { padding-top: 24px; }
.section-head { max-width:720px; margin-bottom:42px; }
.section-head h2, .intro-section h2, .feature-copy h2, .quote-band-inner h2, .contact-copy h2 { margin:14px 0 0; font-family:'Manrope',sans-serif; font-size:clamp(1.7rem,2.8vw,3rem); line-height:1.02; letter-spacing:-.04em; }
.section-head p, .intro-section p, .feature-copy p, .contact-copy p, .legal-copy p { color: var(--muted); line-height:1.8; font-size:1.04rem; }
.two-col, .split-feature, .contact-grid, .faq-grid, .footer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:42px; align-items:start; }
.card-grid, .project-grid, .steps-grid, .prompt-grid, .pool-grid, .colour-grid { display:grid; gap:24px; }
.services-grid, .colour-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.info-card, .colour-card { padding:28px; border-radius:28px; }
.icon-badge { width:67px; height:67px; display:grid; place-items:center; border-radius:18px; background: rgba(46,167,215,.10); color: var(--accent-deep); font-size:1.25rem; font-weight:700; margin-bottom:20px; }
.info-card h3, .project-body h3, .step-card h3, .prompt-card h3, .site-footer h3, .pool-card h3, .colour-card h3 { margin:0 0 12px; font-size:1rem; }
.info-card p, .project-body p, .step-card p, .prompt-card p, .contact-copy li, .site-footer p, .site-footer li, .pool-card p, .colour-card p, .legal-copy li { color: var(--muted); line-height:1.75; }
.feature-visual { position:relative; min-height:520px; }
.mock-image { position:absolute; border-radius:28px; box-shadow:var(--shadow); background:linear-gradient(140deg, rgba(46,167,215,.18), rgba(255,255,255,.84)), linear-gradient(160deg, #d8dde0, #f3f4f6); border:1px solid rgba(255,255,255,.46); display:grid; place-items:center; color:var(--muted); font-weight:600; overflow:hidden; }
.mock-image img { width:100%; height:100%; object-fit:cover; }
.image-one { inset:0 80px 80px 0; }
.image-two { width:48%; height:48%; right:0; bottom:0; }
.feature-list { list-style:none; padding:0; margin:28px 0; display:grid; gap:18px; }
.feature-list li { padding-left:20px; border-left:3px solid rgba(46,167,215,.28); }
.text-link { color: var(--accent-deep); font-weight:700; display:inline-flex; gap:8px; }
.project-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.project-grid-wide { grid-template-columns:repeat(3,minmax(0,1fr)); }
.project-card, .pool-card { overflow:hidden; border-radius:28px; }
.project-media { aspect-ratio:4 / 3; background-size:cover; background-position:center; }
.project-body, .pool-card-body { padding:24px; }
.project-kicker { margin:0 0 8px; color: var(--accent-deep) !important; text-transform:uppercase; letter-spacing:.18em; font-size:12px; font-weight:700; }
/* Featured designs — infinite marquee slider */
.projects-head { display:flex; align-items:center; justify-content:space-between; gap:32px; max-width:none; }
.projects-head-text { max-width:720px; }
.projects-head-cta { flex:0 0 auto; }
@media (max-width:720px) { .projects-head { flex-direction:column; align-items:flex-start; gap:20px; } }
.project-marquee { overflow:hidden; padding-block:20px 48px; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%); }
.project-track { display:flex; width:max-content; will-change:transform; animation:project-marquee-scroll 45s linear infinite; }
.project-marquee:hover .project-track, .project-track:focus-within { animation-play-state:paused; }
.project-track .project-card { flex:0 0 360px; width:360px; margin-right:24px; }
@keyframes project-marquee-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .project-marquee { overflow-x:auto; } .project-track { animation:none; } }
.steps-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.step-card { padding:28px; border-radius:28px; }
.step-card span { display:inline-flex; width:40px; height:40px; border-radius:50%; align-items:center; justify-content:center; background: rgba(46,167,215,.10); color: var(--accent-deep); font-weight:700; margin-bottom:18px; }
.quote-band { padding-top:0; }
.quote-band-inner { padding:34px 40px; border-radius:30px; background: linear-gradient(135deg, rgba(46,167,215,.96), rgba(23,110,153,.98)); color:white; justify-content:space-between; }
.quote-band-inner .section-tag { color: rgba(255,255,255,.72); }
.quote-band-inner h2 { color:white; max-width:16ch; }
.hero-reassure { margin:16px 0 0; color:rgba(255,255,255,.82); font-size:.92rem; font-weight:600; letter-spacing:.01em; }
.eyebrow.urgent { align-items:center; background:rgba(46,167,215,.22); border-color:rgba(46,167,215,.5); color:#fff; }
.eyebrow.urgent::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--accent); margin-right:9px; box-shadow:0 0 0 0 rgba(46,167,215,.55); animation:nook-pulse 2.4s ease-out infinite; }
@keyframes nook-pulse { 0%{ box-shadow:0 0 0 0 rgba(46,167,215,.55); } 70%{ box-shadow:0 0 0 7px rgba(46,167,215,0); } 100%{ box-shadow:0 0 0 0 rgba(46,167,215,0); } }
@media (prefers-reduced-motion: reduce){ .eyebrow.urgent::before { animation:none; } }
.season-sub { color:rgba(255,255,255,.86); margin:12px 0 0; max-width:54ch; line-height:1.6; }
.mobile-cta { display:none; }
.faq-list { display:grid; gap:16px; }
.accordion-item { border-radius:22px; background: rgba(255,255,255,.84); border:1px solid var(--line); overflow:hidden; transition: border-color var(--transition), box-shadow var(--transition); }
.accordion-item.is-open { border-color: rgba(46,167,215,.22); box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06); }
.accordion-trigger { cursor:pointer; font-weight:700; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:24px; user-select:none; width:100%; background:none; border:none; color:inherit; text-align:left; }
.accordion-trigger:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; border-radius:22px; }
.faq-arrow { width:14px; height:14px; border-right:2px solid var(--accent-deep); border-bottom:2px solid var(--accent-deep); transform:rotate(45deg); transition: transform 400ms cubic-bezier(.22,1,.36,1); flex:0 0 auto; margin-right:4px; }
.is-open .faq-arrow { transform: rotate(225deg) translate(-2px,-2px); }
.accordion-body { display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows 400ms cubic-bezier(.22,1,.36,1), opacity 300ms ease; }
.is-open .accordion-body { grid-template-rows:1fr; opacity:1; }
.accordion-body-inner { overflow:hidden; }
.accordion-body-inner p { margin:0; padding:0 24px 24px; }
.contact-card { padding:30px; border-radius:28px; display:grid; gap:18px; }
.contact-card label { display:grid; gap:10px; }
.contact-card span { font-weight:600; }
input, textarea { width:100%; border:1px solid rgba(31,41,51,.12); background: rgba(255,255,255,.94); border-radius:18px; padding:16px 18px; color:var(--text); transition:border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
input:focus, textarea:focus { outline:none; border-color: rgba(46,167,215,.55); box-shadow:0 0 0 4px rgba(46,167,215,.12); }
.form-note { margin:0; color:var(--muted); font-size:.95rem; }
.contact-points { list-style:none; padding:0; display:grid; gap:12px; }
.slider-shell { display:grid; grid-template-columns:1.25fr .75fr; gap:0; overflow:hidden; border-radius:30px; }
.slider-visual { position:relative; min-height:520px; }
.slider-visual a { position:absolute; inset:0; display:block; }
.slider-visual img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
#pool-slide-image { z-index:1; }
#pool-slide-image-next { z-index:2; opacity:0; transition:opacity 1s ease; }
.slider-copy { padding:36px; display:flex; flex-direction:column; justify-content:center; }
#pool-slide-name { line-height:1.15; min-height:2.3em; margin:14px 0 0; }
#pool-slide-desc { margin:16px 0 4px; font-size:1.04rem; line-height:1.7; color:var(--muted); height:10.2em; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6; line-clamp:6; }
/* ============ Reusable YouTube players ============ */
/* Background player: full-bleed, looping, muted, no chrome, click-blocked. Put behind content rows (give the row's content position:relative; z-index:1). */
.yt-bg { position:absolute; inset:0; z-index:0; overflow:hidden; background-color:#0a141c; background-size:cover; background-position:center; }
.yt-bg iframe { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100vw; height:56.25vw; min-height:100%; min-width:177.78vh; border:0; pointer-events:none; }
/* Cover relative to the CONTAINER (not the viewport) so a tall hero/row never letterboxes (black bars) — shows a centre slice instead */
@supports (height:1cqh){ .yt-bg { container-type:size; } .yt-bg iframe { width:100cqw; height:56.25cqw; min-height:100cqh; min-width:177.78cqh; } }
.yt-bg .yt-bg-block { position:absolute; inset:0; }
/* Showcase player: 16:9, autoplay muted, custom controls (play / timeline / fullscreen), no YouTube chrome, custom replay (no end-screen suggestions) */
.yt-showcase { position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden; border-radius:24px; background-color:#0a141c; background-size:cover; background-position:center; box-shadow:var(--shadow); }
.yt-showcase iframe { position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none; }
.yt-bg iframe, .yt-showcase iframe { opacity:0; transition:opacity .5s ease; }
.yt-bg.is-ready iframe, .yt-showcase.is-ready iframe { opacity:1; }
.yt-controls { position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; align-items:center; gap:12px; padding:12px 14px; background:linear-gradient(0deg, rgba(8,18,28,.7), transparent); opacity:0; transition:opacity var(--transition); }
.yt-showcase:hover .yt-controls, .yt-showcase:focus-within .yt-controls, .yt-showcase:not(.is-playing) .yt-controls { opacity:1; }
.yt-play, .yt-mute, .yt-fs { flex:0 0 auto; width:40px; height:40px; border-radius:999px; border:none; cursor:pointer; color:#fff; background:rgba(255,255,255,.18); backdrop-filter:blur(6px); display:grid; place-items:center; font-size:14px; line-height:1; transition:background var(--transition); }
.yt-play:hover, .yt-mute:hover, .yt-fs:hover { background:rgba(255,255,255,.34); }
.yt-play::before { content:'\25B6'; }
.yt-showcase.is-playing .yt-play::before { content:'\275A\275A'; letter-spacing:-3px; }
.yt-fs::before { content:'\26F6'; }
.yt-track { flex:1 1 auto; height:6px; border-radius:999px; background:rgba(255,255,255,.3); position:relative; cursor:pointer; touch-action:none; }
.yt-prog { position:absolute; left:0; top:0; bottom:0; width:0; background:var(--accent); border-radius:999px; }
.yt-show-overlay { position:absolute; inset:0; z-index:4; display:grid; place-items:center; overflow:hidden; background-color:#0a141c; }
.yt-show-overlay .yt-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.yt-show-overlay::after { content:''; position:absolute; inset:0; background:rgba(8,18,28,.5); z-index:1; }
.yt-replay { position:relative; z-index:2; border:none; cursor:pointer; font-weight:700; color:#fff; background:linear-gradient(135deg, var(--accent), var(--accent-deep)); padding:13px 24px; border-radius:999px; box-shadow:0 14px 26px rgba(46,167,215,.28); }
/* Video gallery (3rd player type): auto-advancing stage + YouTube-thumbnail selector grid */
.yt-gallery > button { display:none; } /* raw source buttons, replaced by JS */
.yt-gallery-stage { position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden; border-radius:24px; background-color:#0a141c; background-size:cover; background-position:center; box-shadow:var(--shadow); }
.yt-gallery-stage iframe { position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none; opacity:0; transition:opacity .5s ease; }
.yt-gallery.is-ready .yt-gallery-stage iframe { opacity:1; }
.yt-gallery-ctrls { position:absolute; top:14px; right:14px; z-index:3; display:flex; gap:10px; opacity:0; transition:opacity var(--transition); }
.yt-gallery-stage:hover .yt-gallery-ctrls, .yt-gallery-stage:focus-within .yt-gallery-ctrls { opacity:1; }
/* slide-up drawer holding the thumbnail grid, over the still-playing video (only a faint tint — thumb borders do the separating) */
.yt-gallery-drawer { position:absolute; left:0; right:0; bottom:0; z-index:5; max-height:100%; overflow-y:auto; padding:18px 18px 60px; background:rgba(8,18,28,.18); transform:translateY(100%); transition:transform .5s cubic-bezier(.22,1,.36,1); }
.yt-gallery.is-peek .yt-gallery-drawer { transform:translateY(80%); }   /* 5s hint: peek the top of the thumbnails */
.yt-gallery.is-open .yt-gallery-drawer { transform:translateY(0); }     /* parked against the bottom of the player */
.yt-gallery-drawer .yt-gallery-thumbs { width:100%; }
/* now-playing caption — subtle, no dark bar */
.yt-gallery-cap { position:absolute; left:18px; bottom:16px; z-index:3; color:#fff; font-weight:700; font-size:.95rem; text-shadow:0 2px 14px rgba(0,0,0,.85), 0 0 4px rgba(0,0,0,.6); pointer-events:none; }
/* modern central pull-up tab */
.yt-gallery-toggle { position:absolute; left:50%; bottom:0; transform:translateX(-50%); z-index:6; display:inline-flex; align-items:center; gap:8px; padding:11px 26px; border:none; cursor:pointer; color:#fff; font-weight:700; font-size:.9rem; letter-spacing:.01em; background:linear-gradient(135deg, var(--accent), var(--accent-deep)); border-radius:16px 16px 0 0; box-shadow:0 -6px 22px rgba(46,167,215,.5); transition:padding-bottom var(--transition); }
.yt-gallery-toggle:hover { padding-bottom:15px; }
.yt-gallery-browse { display:inline-flex; align-items:center; gap:8px; }
.yt-gallery-browse i { font-style:normal; font-size:.9em; }
.yt-gallery-thumbs { display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; }
.yt-gallery-thumb { position:relative; padding:0; border:2px solid transparent; border-radius:14px; overflow:hidden; cursor:pointer; background:#0a141c; aspect-ratio:16 / 9; transition:border-color var(--transition), transform var(--transition); }
.yt-gallery-thumb img { width:100%; height:100%; object-fit:cover; display:block; opacity:.8; transition:opacity var(--transition); }
.yt-gallery-thumb:hover { transform:translateY(-2px); }
.yt-gallery-thumb:hover img, .yt-gallery-thumb.is-active img { opacity:1; }
.yt-gallery-thumb.is-active { border-color:var(--accent); }
.yt-gallery-thumb .g-label { position:absolute; left:0; right:0; bottom:0; padding:16px 10px 8px; text-align:left; background:linear-gradient(0deg, rgba(8,18,28,.9), transparent); color:#fff; display:flex; flex-direction:column; gap:1px; pointer-events:none; }
.yt-gallery-thumb .g-model { font-weight:700; font-size:.85rem; line-height:1.15; }
.yt-gallery-thumb .g-sub { font-size:.7rem; opacity:.82; font-weight:600; }
@media (max-width:880px){ .yt-gallery-thumbs { grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .yt-gallery-thumbs { grid-template-columns:repeat(2,1fr); } .yt-gallery-cap { top:14px; bottom:auto; } }
.thumb-list { display:grid; gap:10px; margin-top:22px; max-height:340px; overflow:auto; padding-right:4px; }
.pool-thumb { display:flex; align-items:center; gap:14px; width:100%; background:#fff; border:1px solid var(--line); border-radius:18px; padding:10px 12px; cursor:pointer; transition:border-color var(--transition), transform var(--transition), box-shadow var(--transition); text-align:left; }
.pool-thumb:hover, .pool-thumb.is-active { border-color: rgba(46,167,215,.35); transform:translateY(-1px); box-shadow: 0 10px 24px rgba(17,24,39,.06); }
.pool-thumb img, .pool-shape { width:54px; height:54px; object-fit:contain; background: var(--accent-soft); border-radius:14px; padding:6px; }
.pool-thumb span { font-weight:700; }
.pool-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.pool-card-media img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.pool-card-top { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.colour-swatch { aspect-ratio: 4 / 2.3; border-radius:20px; margin-bottom:18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 18px 30px rgba(17,24,39,.08); }
.why-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.legal-copy { max-width: 760px; display:grid; gap:14px; }
.site-footer { border-top:1px solid var(--line); background: rgba(255,255,255,.7); }
.footer-grid { grid-template-columns:1.2fr .8fr .8fr; gap:32px; padding:44px 0 28px; }
.footer-logo { height:42px; width:auto; margin-bottom:8px; }
.footer-lic { margin:0 0 18px; font-size:.75rem; color: var(--muted); }
.footer-logo-bar { height:28px; margin:0; }
.footer-credit { margin:0; }
.site-footer ul { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.footer-bar { background:#dbe7ef; border-top:1px solid rgba(31,41,51,.10); }
.footer-bar-inner { display:flex; justify-content:space-between; align-items:center; padding:11px 0; gap:16px; font-size:.78rem; color:#6b7280; }
.footer-certs { display:flex; gap:16px; align-items:center; margin-top:22px; }
.footer-certs img { height:34px; width:auto; }
.footer-legal { margin:0; }
.footer-address { margin:8px 0 0; font-size:.95rem; }
.reveal { opacity:1; transform:none; transition: opacity 800ms cubic-bezier(.22,1,.36,1), transform 800ms cubic-bezier(.22,1,.36,1); }
html.js .reveal { opacity:0; transform:translateY(26px); }
html.js .reveal.visible { opacity:1; transform:translateY(0); }
/* The hero is above the fold, so it must never wait on JS to become visible. script.js is deferred and
   adds html.js itself, which would otherwise paint the hero, hide it, then fade it back in: that round
   trip is what LCP ends up measuring. Same exemption as .differences-band above. */
html.js .hero-section .reveal { opacity:1; transform:none; }
.delay-1 { transition-delay:120ms; }
.delay-2 { transition-delay:220ms; }
.delay-3 { transition-delay:320ms; }
@media (max-width: 1080px) {
  .hero-grid, .two-col, .split-feature, .contact-grid, .faq-grid, .footer-grid, .slider-shell { grid-template-columns:1fr; }
  .hero-metrics, .services-grid, .project-grid, .prompt-grid, .steps-grid, .trust-grid, .pool-grid, .project-grid-wide, .why-grid, .colour-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .feature-visual { min-height:400px; }
}
/* ── Pool product page ─────────────────────────────────────── */
.product-hero { padding: 120px 0 0; }
.product-hero-grid { display:grid; grid-template-columns: 1.15fr .85fr; gap:40px; align-items:end; padding-bottom: 24px; }
.product-hero-copy { padding-bottom: 8px; }
.product-hero-copy .crumbs { display:flex; gap:10px; align-items:center; color: var(--muted); font-size:.88rem; margin-bottom:18px; }
.product-hero-copy .crumbs a { color: var(--accent-deep); font-weight:600; }
.product-hero-copy .crumbs span { opacity:.5; }
.product-hero-copy h1 { margin:0; font-family:'Manrope',sans-serif; font-size:clamp(2.4rem,4.8vw,3.4rem); line-height:1; letter-spacing:-.045em; }
.product-hero-copy .lede { color: var(--muted); line-height:1.7; font-size:1.08rem; margin:20px 0 26px; }
.product-tags { display:flex; gap:10px; flex-wrap:wrap; margin: 0 0 24px; padding:0; list-style:none; }
.product-tags li { background: var(--accent-soft); color: var(--accent-deep); padding: 8px 14px; border-radius:999px; font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.product-hero-image { position: relative; aspect-ratio: 5 / 4; border-radius: 28px; overflow:hidden; box-shadow: var(--shadow); background: var(--accent-soft); padding: 0; border: none; cursor: zoom-in; display: block; width: 100%; transition: transform var(--transition), box-shadow var(--transition); }
.product-hero-image:hover { transform: translateY(-2px); box-shadow: 0 30px 60px rgba(17,24,39,.18); }
.product-hero-image:focus-visible { outline: 3px solid rgba(46,167,215,.55); outline-offset: 3px; }
.product-hero-image img { width:100%; height:100%; object-fit:cover; transition: transform 600ms ease; }
.product-hero-image:hover img { transform: scale(1.03); }
.product-hero-image .gallery-zoom { position:absolute; right: 16px; bottom: 16px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--accent-deep); display:grid; place-items:center; font-size: 20px; font-weight: 700; box-shadow: 0 10px 22px rgba(0,0,0,.22); opacity: 0; transform: translateY(4px) scale(.9); transition: opacity var(--transition), transform var(--transition); pointer-events: none; }
.product-hero-image:hover .gallery-zoom, .product-hero-image:focus-visible .gallery-zoom { opacity: 1; transform: translateY(0) scale(1); }

.product-quickstats { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:16px; margin-top: 28px; padding:0; list-style:none; }
.product-quickstats li { background: rgba(255,255,255,.7); border:1px solid var(--line); border-radius: 18px; padding: 16px 18px; }
.product-quickstats strong { display:block; font-size:.74rem; color: var(--accent-deep); text-transform:uppercase; letter-spacing:.16em; margin-bottom:6px; }
.product-quickstats span { font-weight:700; color: var(--text); font-size:1.02rem; }

.product-section { padding: 70px 0; }
.product-section-head { max-width:680px; margin-bottom:32px; }
.product-section-head h2 { margin:8px 0 12px; font-family:'Manrope',sans-serif; font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height:1.05; letter-spacing:-.035em; }
.product-section-head p { color: var(--muted); line-height:1.75; font-size:1.02rem; margin:0; }

.product-overview-grid { display:grid; grid-template-columns: 1.15fr .85fr; gap:48px; align-items:start; }
.product-prose p { color: var(--muted); line-height:1.8; font-size:1.02rem; margin:0 0 18px; }
.product-prose p:last-child { margin-bottom:0; }
.product-features { background:var(--surface); backdrop-filter: blur(16px); border:1px solid rgba(255,255,255,.3); box-shadow:var(--shadow); border-radius: 28px; padding: 28px; }
.product-features h3 { margin:0 0 18px; font-size:1rem; }
.product-features ul { list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.product-features li { padding-left:30px; position:relative; color: var(--text); line-height:1.55; font-size:.98rem; }
.product-features li::before { content:''; position:absolute; left:0; top:6px; width:18px; height:18px; border-radius:50%; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); box-shadow: inset 0 0 0 4px rgba(255,255,255,.85); }

.product-shape { display:grid; grid-template-columns: 1fr 1fr; gap:36px; align-items:center; background: linear-gradient(160deg, #fff 0%, var(--bg-soft) 100%); border-radius: 30px; padding: 36px; border:1px solid var(--line); }
.product-shape-diagram { background:#fff; border-radius: 22px; padding: 24px; min-height: 280px; display:grid; place-items:center; box-shadow: inset 0 0 0 1px var(--line); position: relative; cursor: zoom-in; transition: box-shadow var(--transition); }
.product-shape-diagram:hover, .product-shape-diagram:focus-visible { box-shadow: inset 0 0 0 1px var(--line), 0 18px 36px rgba(17,24,39,.12); }
.product-shape-diagram:focus-visible { outline: 3px solid rgba(46,167,215,.55); outline-offset: 3px; }
.product-shape-diagram img { width:100%; height:auto; max-height: 360px; object-fit:contain; }
.product-shape-diagram .gallery-zoom { position:absolute; right: 16px; bottom: 16px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--accent-deep); display:grid; place-items:center; font-size: 18px; font-weight:700; box-shadow: 0 8px 18px rgba(0,0,0,.2); opacity: 0; transform: translateY(4px) scale(.9); transition: opacity var(--transition), transform var(--transition); pointer-events:none; }
.product-shape-diagram:hover .gallery-zoom, .product-shape-diagram:focus-visible .gallery-zoom { opacity: 1; transform: translateY(0) scale(1); }
.product-shape-copy h3 { margin:0 0 12px; font-family:'Manrope',sans-serif; font-size: 1.5rem; letter-spacing:-.02em; }
.product-shape-copy p { color: var(--muted); line-height:1.7; margin:0 0 16px; }

.size-table { width:100%; border-collapse:separate; border-spacing:0; background:#fff; border-radius:18px; overflow:hidden; border:1px solid var(--line); }
.size-table th, .size-table td { text-align:left; padding: 14px 18px; font-size:.95rem; }
.size-table thead { background: var(--accent-soft); }
.size-table th { color: var(--accent-deep); text-transform:uppercase; letter-spacing:.12em; font-size:.74rem; }
.size-table tbody tr + tr td { border-top: 1px solid var(--line); }
.size-table td:first-child { font-weight:700; color: var(--text); }

/* Pool sizes section (#pool-sizes) */
.sizes-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-strong); box-shadow: var(--shadow); }
.sizes-table { width:100%; border-collapse: collapse; font-size: .96rem; }
.sizes-table th, .sizes-table td { text-align:left; padding: 13px 16px; }
.sizes-table thead th { font-weight:700; background: var(--accent-soft); color: var(--accent-deep); text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; }
.sizes-table tbody tr + tr td { border-top: 1px solid var(--line); }
.sizes-table td:first-child { font-weight:700; color: var(--text); }
.sizes-cta { margin: 14px 0 0; color: var(--muted); font-size: .95rem; line-height:1.6; }
.sizes-cta a { color: var(--accent-deep); font-weight:700; transition: color var(--transition); }
.sizes-cta a:hover, .sizes-cta a:focus-visible { color: var(--accent); }
.product-quickstats .quickstat-link { font-weight:700; font-size:1.02rem; color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; transition: color var(--transition); }
.product-quickstats .quickstat-link:hover, .product-quickstats .quickstat-link:focus-visible { color: var(--accent); }
.product-tags li { cursor: default; }

.colour-chip-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap:14px; margin-top: 8px; }
.colour-chip { display:flex; flex-direction:column; gap:10px; align-items:stretch; padding:10px; background:#fff; border:1px solid var(--line); border-radius:16px; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); text-decoration:none; color: inherit; }
.colour-chip:hover { transform: translateY(-2px); box-shadow: 0 14px 26px rgba(17,24,39,.08); border-color: rgba(46,167,215,.35); }
.colour-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.colour-chip .swatch { width:100%; aspect-ratio: 550 / 248; border-radius:12px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #cfd8dc; }
.colour-chip .label { font-size:.86rem; font-weight:600; color: var(--text); padding: 0 4px; display:flex; align-items:center; gap:6px; }
.colour-chip .label::after { content:"↗"; margin-left:auto; color: var(--accent-deep); opacity:.55; font-weight:700; transition: transform var(--transition), opacity var(--transition); }
.colour-chip:hover .label::after { opacity:1; transform: translate(2px,-2px); }
.colour-chip-grid { grid-template-columns: repeat(auto-fill, minmax(170px,1fr)); }

/* Colours page (rich grid + intro) */
.colour-board-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; }
.colour-board { background: var(--surface); backdrop-filter: blur(16px); border:1px solid rgba(255,255,255,.3); box-shadow: var(--shadow); border-radius: 28px; overflow:hidden; display:flex; flex-direction:column; }
.colour-board .swatch-hero { aspect-ratio: 550 / 248; width:100%; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #cfd8dc; }
.colour-board .meta { padding: 22px 24px 24px; display:grid; grid-template-columns: 84px 1fr; gap: 18px; align-items:center; }
.colour-board .pool-thumb-btn { position:relative; width:84px; height:84px; padding:0; border:none; background:none; border-radius: 16px; overflow:hidden; cursor:pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 6px 14px rgba(17,24,39,.08); transition: transform var(--transition), box-shadow var(--transition); }
.colour-board .pool-thumb-btn:hover, .colour-board .pool-thumb-btn:focus-visible { transform: scale(1.04); box-shadow: inset 0 0 0 1px rgba(46,167,215,.45), 0 10px 22px rgba(17,24,39,.16); outline:none; }
.colour-board .pool-thumb-btn img { width:100%; height:100%; object-fit:cover; display:block; }
.colour-board .pool-thumb-btn .thumb-zoom { position:absolute; right:6px; bottom:6px; width:22px; height:22px; border-radius:50%; background: rgba(255,255,255,.92); color: var(--accent-deep); font-size:12px; font-weight:700; display:grid; place-items:center; opacity:0; transform: scale(.7); transition: opacity var(--transition), transform var(--transition); }
.colour-board .pool-thumb-btn:hover .thumb-zoom, .colour-board .pool-thumb-btn:focus-visible .thumb-zoom { opacity:1; transform:scale(1); }
.colour-board .meta-copy h3 { margin:0 0 4px; font-size: 1rem; }
.colour-board .meta-copy p { margin:0; color: var(--muted); font-size:.86rem; }

/* Compare bar above the colour grid */
.compare-bar { display:grid; grid-template-columns: 1.4fr 1.6fr auto; gap: 24px; align-items:center; padding: 22px 26px; margin-bottom: 28px; background: linear-gradient(135deg, rgba(46,167,215,.10), rgba(255,255,255,.7)); border:1px solid rgba(46,167,215,.18); border-radius: 22px; box-shadow: 0 12px 28px rgba(17,24,39,.06); }
.compare-bar-intro { display:flex; gap:14px; align-items:center; }
.compare-bar-icon { width:44px; height:44px; flex:0 0 auto; border-radius:50%; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color:#fff; display:grid; place-items:center; font-size: 22px; font-weight:700; box-shadow: 0 10px 18px rgba(46,167,215,.35); }
.compare-bar-intro strong { display:block; font-size: 1rem; line-height:1.3; color: var(--text); }
.compare-bar-intro p { margin: 4px 0 0; color: var(--muted); font-size: .9rem; line-height:1.5; }
.compare-bar-intro em { font-style: normal; font-weight:700; color: var(--accent-deep); background: rgba(46,167,215,.10); padding: 1px 6px; border-radius: 6px; }
.compare-bar-slots { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.compare-slot { background: #fff; border: 1.5px dashed rgba(46,167,215,.35); border-radius: 14px; padding: 12px 14px; display:flex; align-items:center; gap: 12px; min-height: 64px; transition: border-color var(--transition), background var(--transition), transform var(--transition); }
.compare-slot.is-filled { border-style: solid; border-color: rgba(46,167,215,.6); background: #fff; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(17,24,39,.08); }
.compare-slot-num { width: 26px; height: 26px; flex:0 0 auto; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); font-weight:700; font-size:.85rem; display:grid; place-items:center; }
.compare-slot.is-filled .compare-slot-num { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color:#fff; }
.compare-slot-thumb { width: 40px; height: 40px; flex:0 0 auto; border-radius: 10px; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); display:none; }
.compare-slot.is-filled .compare-slot-thumb { display:block; }
.compare-slot-name { font-size: .9rem; font-weight: 600; color: var(--muted); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.compare-slot.is-filled .compare-slot-name { color: var(--text); }
.compare-bar-actions { display:flex; gap: 12px; align-items:center; }
.compare-bar-actions .button { min-height: 46px; padding: 0 20px; }
.compare-bar-actions .button:disabled { opacity: .5; cursor: not-allowed; transform:none; box-shadow:none; }
#compare-clear { background:none; border:none; padding:6px 4px; cursor:pointer; }

/* Per-card compare toggle */
.colour-board { position: relative; }
.compare-toggle { position: absolute; top: 12px; left: 12px; z-index: 3; display:inline-flex; align-items:center; gap: 6px; padding: 7px 12px 7px 8px; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--text); border: 1.5px solid rgba(31,41,51,.08); font-size: .78rem; font-weight: 700; letter-spacing: .02em; cursor:pointer; box-shadow: 0 4px 10px rgba(17,24,39,.10); transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition); }
.compare-toggle:hover { transform: translateY(-1px); border-color: rgba(46,167,215,.45); }
.compare-toggle-mark { width: 18px; height: 18px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); display:grid; place-items:center; font-size: 14px; line-height:1; transition: background var(--transition), color var(--transition); }
.compare-toggle[aria-pressed="true"] { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color:#fff; border-color: transparent; }
.compare-toggle[aria-pressed="true"] .compare-toggle-mark { background: rgba(255,255,255,.95); color: var(--accent-deep); }
.compare-toggle[aria-pressed="true"] .compare-toggle-mark::before { content: "✓"; }
.compare-toggle[aria-pressed="true"] .compare-toggle-mark { font-size: 11px; }
.compare-toggle[aria-pressed="true"] .compare-toggle-mark > * { display:none; }
.colour-board.is-comparing { outline: 3px solid rgba(46,167,215,.55); outline-offset: 2px; border-radius: 28px; }

/* Compare modal */
.compare-modal .compare-stage { width: min(1100px, 94vw); display:flex; flex-direction:column; gap: 14px; align-items:center; }
.compare-frame { position: relative; width: 100%; aspect-ratio: 16/10; max-height: 80vh; background:#0c1820; border-radius: 18px; overflow:hidden; box-shadow: 0 30px 60px rgba(0,0,0,.55); user-select: none; touch-action: none; }
.compare-img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; display:block; }
.compare-img-a { clip-path: inset(0 50% 0 0); will-change: clip-path; }
.compare-divider { position:absolute; top:0; bottom:0; left:50%; width: 4px; background: rgba(255,255,255,.92); transform: translateX(-50%); cursor: ew-resize; box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 0 20px rgba(0,0,0,.35); z-index: 4; }
.compare-divider:focus-visible { outline: none; background: var(--accent); box-shadow: 0 0 0 3px rgba(255,255,255,.7); }
.compare-divider-handle { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--accent-deep); display:grid; place-items:center; box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.06); pointer-events:none; }
.compare-label { position:absolute; top: 14px; padding: 8px 14px; border-radius: 999px; background: rgba(8,18,28,.72); color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .04em; backdrop-filter: blur(6px); z-index: 3; pointer-events: none; }
.compare-label-a { left: 14px; }
.compare-label-b { right: 14px; }
.compare-hint { color: rgba(255,255,255,.78); font-size: .9rem; margin: 0; text-align:center; }

@media (max-width: 1080px) {
  .compare-bar { grid-template-columns: 1fr; gap: 18px; }
  .compare-bar-actions { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .compare-bar-slots { grid-template-columns: 1fr; }
  .compare-toggle .compare-toggle-label { display:none; }
  .compare-toggle { padding: 6px; }
  .compare-frame { aspect-ratio: 4/5; }
}

/* Catalog filter bar — compact two-column layout */
.filter-bar { background: var(--surface); backdrop-filter: blur(16px); border:1px solid rgba(255,255,255,.3); box-shadow: 0 14px 30px rgba(17,24,39,.07); border-radius: 20px; padding: 16px 20px; margin-bottom: 18px; }
.filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
.filter-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.filter-label { font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-deep); }
.filter-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-pill { padding: 5px 12px; border-radius: 999px; border: 1.5px solid rgba(31,41,51,.10); background: #fff; color: var(--text); font-weight: 600; font-size: .8rem; line-height: 1.3; cursor: pointer; transition: border-color var(--transition), background var(--transition), color var(--transition), transform var(--transition); }
.filter-pill:hover { border-color: rgba(46,167,215,.45); transform: translateY(-1px); }
.filter-pill.is-active { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #fff; border-color: transparent; box-shadow: 0 6px 14px rgba(46,167,215,.28); }

.filter-slider-wrap { display: grid; gap: 4px; }
.filter-slider { position: relative; height: 22px; }
.filter-slider-track { position: absolute; top: 50%; left: 8px; right: 8px; height: 4px; background: rgba(31,41,51,.10); border-radius: 999px; transform: translateY(-50%); overflow: hidden; }
.filter-slider-range { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); border-radius: 999px; }
.filter-slider input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none; margin: 0; }
.filter-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2.5px solid var(--accent-deep); box-shadow: 0 3px 6px rgba(0,0,0,.18); cursor: grab; transition: transform var(--transition); }
.filter-slider input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.filter-slider input[type=range]::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2.5px solid var(--accent-deep); box-shadow: 0 3px 6px rgba(0,0,0,.18); cursor: grab; }
.filter-slider-values { display: flex; justify-content: space-between; color: var(--muted); font-size: .76rem; }
.filter-slider-values strong { color: var(--accent-deep); font-size: .86rem; font-weight: 700; }

.filter-cell-results .filter-results { display: inline-flex; align-items: center; gap: 12px; color: var(--muted); font-size: .82rem; }
.filter-cell-results #filter-count { color: var(--accent-deep); font-weight: 800; font-size: 1rem; }
.filter-clear { background: none; border: 1.5px solid rgba(31,41,51,.12); color: var(--text); padding: 4px 10px; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: .72rem; transition: border-color var(--transition), color var(--transition); }
.filter-clear:hover { border-color: rgba(46,167,215,.5); color: var(--accent-deep); }

.filter-empty { text-align: center; color: var(--muted); padding: 30px 16px; font-size: .95rem; }
.filter-empty button { background: none; border: none; padding: 0; cursor: pointer; }

/* Card fade-out when filtered */
.pool-card { transition: opacity 300ms ease, transform 300ms ease, box-shadow var(--transition); }
.pool-card.is-hidden { opacity: 0; transform: scale(.92); pointer-events: none; }

/* Tighten space between filter bar and the grid */
.section.section-tight-top .filter-bar + .pool-grid { margin-top: 6px; }

@media (max-width: 880px) {
  .filter-grid { grid-template-columns: 1fr; gap: 12px; }
  .filter-bar { padding: 14px 16px; }
}

/* Quote modal */
.quote-modal { position: fixed; inset: 0; z-index: 100; opacity: 0; pointer-events: none; transition: opacity 280ms ease; }
.quote-modal.is-open { opacity: 1; pointer-events: auto; }
.quote-modal-backdrop { position: absolute; inset: 0; background: rgba(8,18,28,.66); backdrop-filter: blur(10px); cursor: pointer; }
.quote-modal-shell { position: absolute; inset: 28px; max-width: 1080px; max-height: calc(100vh - 56px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 320px) 1fr; background: linear-gradient(180deg, #fbfdff 0%, #eef6fa 100%); border-radius: 28px; overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,.45); transform: translateY(20px) scale(.985); transition: transform 320ms cubic-bezier(.2,.7,.2,1); }
.quote-modal.is-open .quote-modal-shell { transform: translateY(0) scale(1); }
.quote-modal-aside { background: linear-gradient(160deg, var(--accent-deep) 0%, #0f4c70 100%); color: #fff; padding: 40px 32px; display: flex; flex-direction: column; gap: 18px; position: relative; overflow: hidden; }
.quote-modal-aside::after { content: ''; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(46,167,215,.45), transparent 70%); pointer-events: none; }
.quote-modal-aside h2 { margin: 4px 0 0; font-family: 'Manrope', sans-serif; font-size: clamp(1.5rem, 2vw, 1.85rem); line-height: 1.15; letter-spacing: -.025em; color: #fff; }
.quote-modal-aside p { margin: 0; color: rgba(255,255,255,.82); line-height: 1.65; font-size: .96rem; }
.quote-modal-points { list-style: none; padding: 0; margin: auto 0 0; display: grid; gap: 12px; position: relative; z-index: 1; }
.quote-modal-points li { padding-left: 26px; position: relative; color: rgba(255,255,255,.92); font-size: .92rem; line-height: 1.5; }
.quote-modal-points li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: .72rem; display: grid; place-items: center; font-weight: 700; }
.quote-modal-points a { color: #fff; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.5); }
.quote-modal-close { position: absolute; top: 16px; right: 18px; z-index: 4; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.86); color: var(--text); font-size: 24px; line-height: 1; cursor: pointer; transition: background var(--transition), transform var(--transition); box-shadow: 0 6px 14px rgba(0,0,0,.18); }
.quote-modal-close:hover { background: #fff; transform: rotate(90deg); }

.quote-modal-form { padding: 40px 36px; overflow-y: auto; display: grid; gap: 18px; max-height: calc(100vh - 56px); }
.qf-row { display: grid; gap: 14px; }
.qf-row-2 { grid-template-columns: 1fr 1fr; }
.qf-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.qf-fieldset { border: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.qf-fieldset > legend, .qf-choice > legend { padding: 0; margin: 0 0 10px; font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep); }
.qf-fieldset > legend em, .qf-field > span em, .qf-choice > legend em { color: #d33; font-style: normal; }
.qf-field { display: grid; gap: 8px; }
.qf-field > span { font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep); }
.qf-field input, .qf-field select { width: 100%; border: 1px solid rgba(31,41,51,.12); background: #fff; border-radius: 14px; padding: 13px 16px; font: inherit; color: var(--text); transition: border-color var(--transition), box-shadow var(--transition); }
.qf-field input:focus, .qf-field select:focus { outline: none; border-color: rgba(46,167,215,.55); box-shadow: 0 0 0 4px rgba(46,167,215,.14); }
.qf-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--accent-deep) 50%), linear-gradient(135deg, var(--accent-deep) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px; }

.qf-choice { border: none; padding: 0; margin: 0; }
.qf-choice > div, .qf-choice { display: flex; flex-direction: column; }
.qf-choice { display: flex; flex-direction: column; gap: 10px; }
.qf-choice > legend { display: block; }
.qf-choice .qf-pill, .qf-choice { display: flex; }
.qf-choice { flex-direction: column; align-items: stretch; }
.qf-choice > .qf-pill { display: inline-flex; }
.qf-choice { display: block; }
.qf-choice > legend { display: block; margin-bottom: 10px; }
.qf-choice { display: flex; flex-direction: column; }
.qf-choice .qf-pill { margin-right: 8px; margin-bottom: 8px; display: inline-flex; }
.qf-choice { display: block; }

.qf-pill { position: relative; display: inline-flex; align-items: center; padding: 10px 16px; background: #fff; border: 1.5px solid rgba(31,41,51,.10); border-radius: 999px; cursor: pointer; transition: border-color var(--transition), background var(--transition), color var(--transition); margin-right: 8px; margin-bottom: 8px; }
.qf-pill input { position: absolute; opacity: 0; pointer-events: none; }
.qf-pill span { font-size: .92rem; font-weight: 600; color: var(--text); display: inline-flex; align-items: baseline; gap: 6px; }
.qf-pill span small { font-size: .78rem; color: var(--muted); font-weight: 500; }
.qf-pill:hover { border-color: rgba(46,167,215,.45); }
.qf-pill input:checked + span { color: #fff; }
.qf-pill:has(input:checked) { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); border-color: transparent; box-shadow: 0 8px 18px rgba(46,167,215,.32); }
.qf-pill:has(input:checked) span small { color: rgba(255,255,255,.78); }
.qf-pill-sm { padding: 10px 18px; }

.qf-actions { display: flex; align-items: center; gap: 18px; margin-top: 6px; flex-wrap: wrap; }
.qf-actions .button { min-height: 52px; }
.qf-note { margin: 0; font-size: .82rem; color: var(--muted); flex: 1; min-width: 220px; }

.qf-success { display: grid; place-items: center; text-align: center; padding: 30px 8px; gap: 16px; }
.qf-success-icon { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #fff; display: grid; place-items: center; font-size: 32px; box-shadow: 0 14px 28px rgba(46,167,215,.35); }
.qf-success h3 { margin: 0; font-family: 'Manrope', sans-serif; font-size: 1.5rem; }
.qf-success p { color: var(--muted); margin: 0; max-width: 36ch; line-height: 1.6; }
.qf-success a { color: var(--accent-deep); font-weight: 700; }

@media (max-width: 880px) {
  .quote-modal-shell { grid-template-columns: 1fr; inset: 12px; max-height: calc(100vh - 24px); }
  .quote-modal-aside { padding: 26px 24px; }
  .quote-modal-aside h2 { font-size: 1.3rem; }
  .quote-modal-form { padding: 24px 20px; }
  .qf-row-2, .qf-row-3 { grid-template-columns: 1fr; }
}

/* Floating call CTA (appears on every page) */
.floating-call { position: fixed; right: 22px; bottom: 27px; z-index: 60; display:inline-flex; align-items:center; gap:12px; padding: 10px 18px 10px 12px; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #fff; text-decoration: none; border-radius: 999px; box-shadow: 0 16px 30px rgba(46,167,215,.35), 0 4px 10px rgba(15,23,42,.18); font-weight: 700; transition: transform var(--transition), box-shadow var(--transition); animation: callPulse 3s ease-in-out infinite; }
.floating-call:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 22px 40px rgba(46,167,215,.45), 0 6px 14px rgba(15,23,42,.22); }
.floating-call:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.floating-call-icon { width: 36px; height: 36px; flex:0 0 auto; border-radius: 50%; background: rgba(255,255,255,.18); display:grid; place-items:center; }
.floating-call-text { display:flex; flex-direction:column; line-height: 1.1; }
.floating-call-tag { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .92; }
.floating-call-num { font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; }
.footer-phone { display:inline-flex; align-items:center; gap:8px; font-weight:700; color: var(--accent-deep); }
@keyframes callPulse {
  0%, 100% { box-shadow: 0 16px 30px rgba(46,167,215,.35), 0 4px 10px rgba(15,23,42,.18), 0 0 0 0 rgba(46,167,215,.5); }
  60% { box-shadow: 0 16px 30px rgba(46,167,215,.35), 0 4px 10px rgba(15,23,42,.18), 0 0 0 14px rgba(46,167,215,0); }
}
@media (max-width: 760px) {
  .floating-call { padding: 0; width: 56px; height: 56px; justify-content: center; right: 16px; bottom: 16px; }
  .floating-call-text { display: none; }
  .floating-call-icon { background: transparent; }
}
/* Lift the call button so it doesn't sit on the compare dock on the colours page */
body:has(#compare-dock.is-visible) .floating-call { bottom: 96px; }

/* Sticky compare dock (bottom of viewport) */
.compare-dock { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 24px); z-index: 50; opacity: 0; transition: opacity 280ms ease, transform 320ms cubic-bezier(.2,.7,.2,1); pointer-events: none; max-width: calc(100vw - 32px); }
.compare-dock.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.compare-dock-inner { display:flex; align-items:center; gap: 14px; padding: 10px 14px 10px 18px; background: rgba(255,255,255,.96); backdrop-filter: blur(18px); border: 1px solid rgba(31,41,51,.08); border-radius: 999px; box-shadow: 0 18px 40px rgba(15,23,42,.18), 0 4px 10px rgba(15,23,42,.08); }
.compare-dock-label { display:inline-flex; align-items:center; gap: 8px; font-weight: 700; font-size: .82rem; letter-spacing: .04em; color: var(--text); white-space: nowrap; }
.compare-dock-icon { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #fff; display:grid; place-items:center; font-size: 13px; }
.compare-dock-slots { display:flex; gap: 8px; }
.compare-dock-slot { display:inline-flex; align-items:center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); max-width: 180px; }
.compare-dock-num { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.85); color: var(--accent-deep); font-weight:700; font-size:.78rem; display:grid; place-items:center; flex:0 0 auto; }
.compare-dock-slot.is-filled { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #fff; }
.compare-dock-slot.is-filled .compare-dock-num { background: rgba(255,255,255,.95); color: var(--accent-deep); }
.compare-dock-name { font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.compare-dock-go.is-ready, #compare-dock-go:not(:disabled) { animation: dockPulse 2.4s ease-in-out infinite; }
.compare-dock .button { min-height: 40px; padding: 0 18px; font-size:.88rem; }
.compare-dock .button:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; animation: none; }
.compare-dock-clear { width: 32px; height: 32px; flex:0 0 auto; border-radius: 50%; border: none; background: transparent; color: var(--muted); font-size: 22px; line-height:1; cursor:pointer; transition: background var(--transition), color var(--transition); }
.compare-dock-clear:hover { background: rgba(31,41,51,.06); color: var(--text); }
@keyframes dockPulse {
  0%, 100% { box-shadow: 0 18px 30px rgba(46,167,215,.25); }
  50% { box-shadow: 0 18px 30px rgba(46,167,215,.55), 0 0 0 4px rgba(46,167,215,.18); }
}
@media (max-width: 760px) {
  .compare-dock-inner { padding: 8px 10px 8px 14px; gap: 10px; flex-wrap: wrap; justify-content: center; border-radius: 22px; }
  .compare-dock-label { display: none; }
  .compare-dock-name { max-width: 90px; font-size: .8rem; }
  .compare-dock-slot { padding: 5px 10px 5px 5px; }
  .compare-dock-slot .compare-dock-name { max-width: 80px; }
  .compare-dock { bottom: 14px; }
}

/* Lightbox */
.lightbox { position:fixed; inset:0; z-index:100; background: rgba(8,18,28,.86); backdrop-filter: blur(8px); display:grid; place-items:center; padding: 28px; opacity:0; pointer-events:none; transition: opacity 240ms ease; }
.lightbox.is-open { opacity:1; pointer-events:auto; }
.lightbox figure { margin:0; max-width: min(1100px, 92vw); max-height: 88vh; display:flex; flex-direction:column; gap:14px; align-items:center; }
.lightbox img { max-width:100%; max-height: 80vh; height:auto; width:auto; border-radius: 18px; box-shadow: 0 30px 60px rgba(0,0,0,.55); background:#0c1820; }
.lightbox figcaption { color: rgba(255,255,255,.92); font-weight:600; letter-spacing:.04em; font-size:.95rem; }
.lightbox-close { position:absolute; top:24px; right:28px; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.08); color:#fff; font-size:26px; line-height:1; cursor:pointer; transition: background var(--transition), transform var(--transition); }
.lightbox-close:hover { background: rgba(255,255,255,.18); transform: rotate(90deg); }
body.lightbox-open { overflow:hidden; }
.colour-intro { display:grid; gap:18px; }
.colour-intro h2 { margin:0; font-family:'Manrope',sans-serif; font-size:clamp(1.6rem,2.4vw,2.2rem); line-height:1.05; letter-spacing:-.03em; }
.colour-intro h3 { margin: 18px 0 6px; font-size: 1.05rem; color: var(--text); }
.colour-intro p, .colour-intro li { color: var(--muted); line-height:1.7; font-size:1rem; }
.colour-intro-wide { max-width: 980px; margin: 0 auto; text-align: left; }
.colour-intro-wide .section-tag { display: block; margin-bottom: 14px; }
.colour-intro-wide p { font-size: 1.04rem; line-height: 1.85; }
.colour-intro ul, .nice-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 14px; }
.colour-intro ul li, .nice-list li { padding-left: 30px; position: relative; color: var(--text); line-height: 1.6; font-size: .98rem; }
.colour-intro ul li::before, .nice-list li::before { content:''; position:absolute; left:0; top:8px; width:18px; height:18px; border-radius:50%; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); box-shadow: inset 0 0 0 4px rgba(255,255,255,.85); }
.colour-intro .disclaimer { padding: 14px 16px; border-left: 3px solid rgba(46,167,215,.45); background: rgba(255,255,255,.6); border-radius: 14px; }
.colour-intro .disclaimer p { font-size:.82rem; line-height:1.6; margin:0; color: var(--muted); }

@media (max-width: 1080px) {
  .colour-board-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.gallery-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.gallery-grid .gallery-item { position:relative; margin:0; padding:0; border:none; border-radius: 22px; overflow:hidden; aspect-ratio: 4/3; background: var(--accent-soft); box-shadow: var(--shadow); cursor: zoom-in; transition: transform var(--transition), box-shadow var(--transition); display:block; }
.gallery-grid .gallery-item:hover { transform: translateY(-2px); box-shadow: 0 24px 48px rgba(17,24,39,.18); }
.gallery-grid .gallery-item:focus-visible { outline: 3px solid rgba(46,167,215,.55); outline-offset: 3px; }
.gallery-grid .gallery-item img { width:100%; height:100%; object-fit:cover; transition: transform 600ms ease; display:block; }
.gallery-grid .gallery-item:hover img { transform: scale(1.04); }
.gallery-grid .gallery-item.span-2 { grid-column: span 2; aspect-ratio: 8/5; }
.gallery-grid .gallery-zoom { position:absolute; right: 14px; bottom: 14px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--accent-deep); display:grid; place-items:center; font-size: 18px; font-weight:700; box-shadow: 0 8px 18px rgba(0,0,0,.2); opacity: 0; transform: translateY(4px) scale(.9); transition: opacity var(--transition), transform var(--transition); pointer-events:none; }
.gallery-grid .gallery-item:hover .gallery-zoom, .gallery-grid .gallery-item:focus-visible .gallery-zoom { opacity: 1; transform: translateY(0) scale(1); }

.product-cta { padding: 36px 40px; border-radius: 30px; background: linear-gradient(135deg, rgba(46,167,215,.96), rgba(23,110,153,.98)); color:white; display:flex; align-items:center; justify-content:space-between; gap: 28px; flex-wrap:wrap; }
.product-cta h2 { margin:0; font-family:'Manrope',sans-serif; font-size: clamp(1.4rem, 2vw, 1.8rem); line-height:1.15; max-width: 36ch; color:#fff; }
.product-cta p { margin:8px 0 0; color: rgba(255,255,255,.78); max-width: 44ch; }

.related-pools { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.related-pool { background: var(--surface); border-radius:22px; overflow:hidden; box-shadow: var(--shadow); border:1px solid rgba(255,255,255,.3); display:flex; flex-direction:column; }
.related-pool .media { aspect-ratio: 4/3; background-size:cover; background-position:center; }
.related-pool .body { padding:18px 20px; display:flex; flex-direction:column; gap:8px; }
.related-pool h3 { margin:0; font-size: 1rem; }
.related-pool p { margin:0; color: var(--muted); font-size:.92rem; line-height:1.55; }
.related-pool a.text-link { margin-top:auto; padding-top: 8px; }

.pool-card { display:flex; flex-direction:column; text-decoration:none; color: inherit; transition: transform var(--transition), box-shadow var(--transition); }
.pool-card:hover { transform: translateY(-3px); box-shadow: 0 30px 60px rgba(17,24,39,.12); }
.pool-card:focus-visible { outline: 3px solid rgba(46,167,215,.55); outline-offset: 3px; }
.pool-card .pool-card-media img { transition: transform 600ms ease; }
.pool-card:hover .pool-card-media img { transform: scale(1.03); }
.pool-card-body { display:flex; flex-direction:column; gap:6px; flex:1; }
.pool-card-body .pool-meta { display:flex; gap:14px; flex-wrap:wrap; color: var(--muted); font-size:.82rem; margin: 4px 0 8px; }
.pool-card-body .pool-meta span { display:inline-flex; align-items:center; gap:6px; }
.pool-card-body .pool-meta strong { color: var(--accent-deep); font-weight:700; }
.pool-card .text-link { margin-top:auto; padding-top: 10px; }

@media (max-width: 1080px) {
  .product-hero-grid, .product-overview-grid, .product-shape, .product-cta { grid-template-columns: 1fr; }
  .product-quickstats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .gallery-grid, .related-pools { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Tablet widths: give the nav row a little more breathing room before it collapses at 760px. */
@media (max-width: 1000px) and (min-width: 761px) {
  .site-nav { gap:16px; font-size:0.95rem; }
  .nav-cta { padding:12px 16px; }
}

@media (max-width: 760px) {
  :root { --header-height:76px; }
  .menu-toggle { display:inline-flex; }
  .site-nav { position:absolute; top:calc(100% + 10px); right:20px; left:20px; padding:18px; border-radius:24px; background:rgba(255,255,255,.95); border:1px solid var(--line); box-shadow:var(--shadow); display:none; flex-direction:column; align-items:flex-start; }
  .site-nav.is-open { display:flex; }
  /* inside the slide-down menu the dropdown becomes an inline, indented sub-list */
  .nav-group { width:100%; }
  .nav-group-menu { position:static; min-width:0; margin-top:10px; padding:2px 0 2px 14px; border:0; border-left:2px solid rgba(46,167,215,.28); border-radius:0; background:none; box-shadow:none; backdrop-filter:none; }
  .nav-group.is-open .nav-group-menu::before { display:none; }
  .site-nav .nav-group-menu a { padding:8px 10px; }
  .hero-grid { padding-top:48px; }
  .hero-copy h1, .page-hero-inner h1 { max-width:none; }
  .hero-metrics, .services-grid, .project-grid, .prompt-grid, .steps-grid, .trust-grid, .pool-grid, .project-grid-wide, .why-grid, .colour-grid { grid-template-columns:1fr; }
  .section { padding:86px 0; }
  .quote-band-inner { padding:28px; }
  .slider-visual { min-height: 320px; }
  .slider-section { display: none; }
  .mobile-cta { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60; box-shadow:0 -8px 24px rgba(8,18,28,.18); }
  .mobile-cta a { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:15px 10px; font-weight:700; font-size:1rem; }
  .mobile-cta-call { background:#fff; color:var(--accent-deep); }
  .mobile-cta-book { background:linear-gradient(135deg, var(--accent), var(--accent-deep)); color:#fff; }
  #floating-call { display:none; }
  body { padding-bottom:58px; }
  .product-quickstats, .gallery-grid, .related-pools { grid-template-columns: 1fr; }
  .product-hero { padding-top: 96px; }
  .product-section { padding: 56px 0; }
  .product-shape, .product-features, .product-cta { padding: 24px; }
}