/* Australian Pool Resurfacing site styles.
   Layout: full-width bands on a tinted-water neutral; deep-water navy bands frame each page;
   resin amber marks what matters; the layer cross-section is the one bold moment. */
:root{
  /* APR brand: logo navy #232C6B and pool cyan #29ABE2 */
  --ink:#1b2154; --ink-2:#4a5078; --ground:#f3f6fb; --panel:#ffffff; --line:#d6dbea;
  --blue:#29abe2; --blue-ink:#0f1440; --resin:#1f93cc; --resin-soft:#e2f3fb; --resin-ink:#0b6e9f;
  --concrete:#a9a59c; --mat:#e9e3d2; --amber:#c98a1b;
  --band:#232c6b; --band-fg:#ffffff; --band-2:#b7bfe6;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --gut-l:max(16px, env(safe-area-inset-left, 0px));
  --gut-r:max(16px, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --ink:#e8ebf7; --ink-2:#aab1d4; --ground:#0e1230; --panel:#161b42; --line:#2a3166;
  --blue:#29abe2; --blue-ink:#0f1440; --resin:#4cc0ef; --resin-soft:#13304a; --resin-ink:#4cc0ef;
  --concrete:#6f6c66; --mat:#cfc6ae; --amber:#e3a843; --band:#0a0d26; --band-fg:#ffffff; --band-2:#a9b1dc; color-scheme:dark}}
:root[data-theme="dark"]{
  --ink:#e8ebf7; --ink-2:#aab1d4; --ground:#0e1230; --panel:#161b42; --line:#2a3166;
  --blue:#29abe2; --blue-ink:#0f1440; --resin:#4cc0ef; --resin-soft:#13304a; --resin-ink:#4cc0ef;
  --concrete:#6f6c66; --mat:#cfc6ae; --amber:#e3a843; --band:#0a0d26; --band-fg:#ffffff; --band-2:#a9b1dc; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:#ffffff}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.05;letter-spacing:.005em;text-wrap:balance;margin:0}
h2{font-size:clamp(2rem,4.2vw,3rem)}
h3{font-size:1.45rem}
p{margin:0}
a{color:inherit}
.skip{position:absolute;left:-999px;top:0;background:#29abe2;color:#0f1440;padding:.5em 1em;z-index:20}
.skip:focus{left:var(--gut-l)}
.eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--display);font-weight:600;font-size:1.15rem;letter-spacing:.03em;text-transform:uppercase;padding:.7em 1.2em;border-radius:3px;text-decoration:none;border:2px solid var(--blue);transition:transform .15s ease}
.btn-solid{background:var(--blue);color:var(--blue-ink)}
.btn-line{color:inherit;border-color:currentColor}
.btn:hover{transform:translateY(-1px)}
.ctas{display:flex;flex-wrap:wrap;gap:.8rem}
:focus-visible{outline:3px solid var(--resin);outline-offset:2px}

/* offer band */
.offer{background:#29abe2;color:#0f1440}
.offer .wrap{display:flex;flex-wrap:wrap;gap:.3em 1.2em;align-items:center;justify-content:center;padding-block:.55em;font-size:.95rem;text-align:center}
.offer strong{font-family:var(--display);font-size:1.12rem;letter-spacing:.02em;text-transform:uppercase}
.offer a{font-weight:600}

/* header */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:#ffffff;color:#232c6b;border-bottom:3px solid #29abe2;box-shadow:0 2px 10px rgba(15,20,64,.08)}
header.site .wrap{display:flex;align-items:center;gap:1.4rem;padding-block:.75rem}
.brand{display:block;line-height:0;margin-right:auto}
.brand img{height:74px;width:auto;display:block}
@media (max-width:520px){.brand img{height:44px}}
.brand b{font-family:var(--display);font-size:1.4rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.brand span{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--band-2);margin-top:.3rem}
nav.main{display:flex;gap:1.2rem;font-size:.95rem;align-items:center}
nav.main a{white-space:nowrap;text-decoration:none;color:#232c6b;opacity:.9;font-weight:500}
nav.main a:hover,nav.main a[aria-current="page"]{opacity:1;text-decoration:underline;text-underline-offset:5px;text-decoration-color:#29abe2;text-decoration-thickness:2px}
.drop{position:relative}
.drop>summary{list-style:none;cursor:pointer;white-space:nowrap;opacity:.9;color:#232c6b;font-weight:500}
.drop>summary::-webkit-details-marker{display:none}
.drop>summary::after{content:" ▾";font-size:.8em}
.drop[open]>summary{opacity:1}
.drop .menu{position:absolute;top:calc(100% + .7rem);left:-1rem;background:#ffffff;border:1px solid #d6dbea;box-shadow:0 8px 24px rgba(15,20,64,.12);padding:.6rem 0;min-width:250px;display:grid}
.drop .menu a{padding:.45rem 1rem;opacity:.9}
.drop .menu a:hover{background:#e2f3fb;text-decoration:none}
.phone{font-family:var(--mono);font-size:.92rem;white-space:nowrap;color:#232c6b;text-decoration:none;font-weight:500}
.head-cta{padding:.45em .9em;font-size:1rem}
.mob{display:none}
.mob>summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:#232c6b;border:1px solid #232c6b;padding:.4em .7em;border-radius:2px}
.mob>summary::-webkit-details-marker{display:none}
.mob .panel{position:absolute;left:0;right:0;top:100%;background:#ffffff;color:#232c6b;box-shadow:0 10px 24px rgba(15,20,64,.15);border-top:1px solid rgba(159,182,187,.2);padding:1rem var(--gut-r) 1.4rem var(--gut-l);display:grid;gap:.15rem;max-height:75vh;overflow:auto}
.mob .panel a{text-decoration:none;padding:.5rem 0;border-bottom:1px solid rgba(159,182,187,.15)}
.mob .panel .sub{padding-left:1rem;font-size:.95rem;color:#4a5078}
@media (max-width:1060px){nav.main,.head-cta{display:none}.mob{display:block}}
@media (max-width:520px){.phone{display:none}}

/* hero (home) */
.hero{background:var(--band);color:var(--band-fg)}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding-block:clamp(2.5rem,6vw,4.5rem)}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.4rem);font-weight:700;text-transform:uppercase;letter-spacing:.01em;margin-top:.8rem}
.hero h1 em{font-style:normal;color:#29abe2}
.hero .eyebrow{color:var(--band-2)}
.hero .sub{font-size:1.15rem;margin-top:1.1rem;max-width:34em}
.hero .support{margin-top:.8rem;max-width:34em;color:var(--band-2)}
.hero .ctas{margin-top:1.6rem}
.hero .btn-line{color:var(--band-fg)}
.hero figure{margin:0;position:relative}
.hero figure img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.hero figcaption,.cap{position:absolute;left:0;bottom:0;background:rgba(6,20,26,.78);color:#e6efee;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;padding:.45em .7em;text-transform:uppercase}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}}

.fader{aspect-ratio:4/3;overflow:hidden;border-radius:2px;background:var(--band)}
.hero .fader img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;opacity:0;transition:opacity 1.6s ease,transform 7s ease;transform:scale(1.04)}
.hero .fader img.on{opacity:1;transform:scale(1)}
.hero .fader figcaption{z-index:2}
@media (prefers-reduced-motion:reduce){.hero .fader img{transform:none}}

/* page header (inner pages) */
.pagehead{background:var(--band);color:var(--band-fg)}
.pagehead .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:end;padding-block:clamp(2rem,5vw,3.6rem)}
.pagehead.noimg .wrap{grid-template-columns:minmax(0,1fr)}
.pagehead h1{font-size:clamp(2.4rem,5vw,3.8rem);font-weight:700;text-transform:uppercase;margin-top:.6rem}
.pagehead .lead{margin-top:1rem;font-size:1.12rem;max-width:36em}
.pagehead .eyebrow{color:var(--band-2)}
.pagehead .ctas{margin-top:1.4rem}
.pagehead .btn-line{color:var(--band-fg)}
.pagehead figure{margin:0;position:relative}
.pagehead figure img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.crumbs{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--band-2)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
@media (max-width:860px){.pagehead .wrap{grid-template-columns:1fr}}

/* stats */
.stats{border-bottom:1px solid var(--line);background:var(--panel)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding-block:1.4rem;padding-right:1rem;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat:not(:first-child){padding-left:1.2rem}
.stat b{display:block;font-family:var(--display);font-size:clamp(2rem,4vw,2.8rem);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-size:.92rem;color:var(--ink-2)}
@media (max-width:700px){.stats .wrap{grid-template-columns:1fr 1fr}.stat:nth-child(2){border-right:0}.stat:nth-child(3){padding-left:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}}

section{padding-block:clamp(3rem,7vw,5.5rem)}
section.tight{padding-top:0}
.head{display:grid;gap:.7rem;max-width:44rem;margin-bottom:2.2rem}
.head p{color:var(--ink-2);font-size:1.05rem}
.alt{background:var(--panel);border-block:1px solid var(--line)}

/* prose and two-column content */
.cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
@media (max-width:860px){.cols{grid-template-columns:1fr}}
.prose{max-width:40rem;display:grid;gap:1rem}
.prose h2{font-size:clamp(1.8rem,3.4vw,2.4rem);margin-top:1rem}
.prose h3{margin-top:.6rem}
.prose ul{margin:0;padding-left:1.2rem;display:grid;gap:.4rem}
.prose li::marker{color:var(--resin)}
.prose .note{border-left:3px solid var(--resin);padding:.6rem 0 .6rem 1rem;background:var(--resin-soft);color:var(--ink)}
.aside{display:grid;gap:1rem;position:sticky;top:calc(env(safe-area-inset-top,0px) + 90px)}
.aside .card{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:1.3rem;display:grid;gap:.7rem}
.aside .card h3{font-size:1.35rem}
.aside .card p{color:var(--ink-2);font-size:.97rem}
.aside figure{margin:0}
.aside figure img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
@media (max-width:860px){.aside{position:static}}

/* signs list: problem -> what it means */
.signs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.signs div{background:var(--panel);padding:1.2rem 1.2rem 1.3rem;display:grid;gap:.4rem;align-content:start}
.signs h3{font-size:1.3rem}
.signs .ph img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;margin-bottom:.5rem}
.signs p{color:var(--ink-2);font-size:.97rem}
@media (max-width:640px){.signs{grid-template-columns:1fr}}

/* layers */
.layer-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.stage{position:sticky;top:calc(env(safe-area-inset-top,0px) + 90px)}
.stack{position:relative;height:400px;perspective:1100px;overflow:hidden}
.slab{position:absolute;left:10%;right:10%;height:120px;border-radius:6px;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .4s;box-shadow:0 18px 30px -18px rgba(0,0,0,.45)}
.slab.active{outline:3px solid var(--resin);outline-offset:3px}
.s-shell{background:repeating-linear-gradient(135deg,var(--concrete) 0 6px,#9a958b 6px 12px)}
.s-prep{background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 2px,transparent 2px 9px),linear-gradient(90deg,#b9b3a6,#cfc9bb)}
.s-mat{background-color:var(--mat);background-image:repeating-linear-gradient(32deg,rgba(150,120,60,.35) 0 1px,transparent 1px 7px),repeating-linear-gradient(-28deg,rgba(150,120,60,.3) 0 1px,transparent 1px 9px),linear-gradient(rgba(201,138,27,.35),rgba(201,138,27,.35))}
.s-base{background:linear-gradient(180deg,#7fb3d8,#5f9ac4)}
.s-gel{background:linear-gradient(180deg,#2d8ad0,#1d6fb0)}
.legend{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.35rem;font-family:var(--mono);font-size:.76rem;color:var(--ink-2)}
.legend li{display:flex;align-items:center;gap:.6rem;padding:.2rem .4rem;border-radius:2px}
.legend li i{width:22px;height:12px;border-radius:2px;flex:none}
.legend li.on{background:var(--resin-soft);color:var(--ink)}
.stack-note{font-family:var(--mono);font-size:.75rem;color:var(--ink-2);margin-top:.6rem}
.steps{display:grid;gap:1rem;counter-reset:s}
.step{border-left:3px solid var(--line);padding:1rem 0 1rem 1.2rem;transition:border-color .3s}
.step.on{border-left-color:var(--resin)}
.step h3{display:flex;gap:.6rem;align-items:baseline}
.step h3::before{counter-increment:s;content:counter(s);font-family:var(--mono);font-size:.85rem;color:var(--resin);font-weight:500}
.step p{margin-top:.4rem;color:var(--ink-2)}
.spec{display:inline-block;margin-top:.55rem;font-family:var(--mono);font-size:.74rem;background:var(--resin-soft);color:var(--ink);padding:.2em .55em;border-radius:2px}
@media (max-width:860px){.layer-grid{grid-template-columns:1fr}.stage{position:relative;top:0}.stack{height:330px}.slab{left:6%;right:6%;height:100px}}

/* services grid */
.svc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.svc a{background:var(--panel);padding:1.4rem 1.3rem 1.5rem;text-decoration:none;display:grid;gap:.5rem;align-content:start;transition:background .2s}
.svc a:hover{background:var(--ground)}
.svc .tag{font-family:var(--mono);font-size:.72rem;color:var(--resin-ink);letter-spacing:.06em;text-transform:uppercase}
.svc p{color:var(--ink-2);font-size:.97rem}
.svc .go{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--resin-ink);margin-top:.3rem}
@media (max-width:1000px){.svc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.svc{grid-template-columns:1fr}}

/* before after */
.ba-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.ba{position:relative;max-width:100%;aspect-ratio:2/3;max-height:640px;overflow:hidden;border-radius:2px;user-select:none;touch-action:pan-y;background:var(--line)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.ba .after{clip-path:inset(0 0 0 var(--cut,50%))}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--cut,50%);width:3px;background:#fff;transform:translateX(-1.5px);pointer-events:none}
.ba .handle::after{content:"⇆";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:#fff;color:#0c2633;display:grid;place-items:center;font-size:1.2rem;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.work{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:1.6rem}
.work figure,.gallery figure{margin:0}
.work img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.work figcaption,.gallery figcaption{font-family:var(--mono);font-size:.72rem;color:var(--ink-2);margin-top:.35rem}
@media (max-width:860px){.ba-grid{grid-template-columns:1fr}.ba{aspect-ratio:3/4;max-height:520px}}
@media (max-width:560px){.work{grid-template-columns:1fr 1fr}.work figure:last-child{display:none}}

/* gallery */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem}
.filters button{font:inherit;font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:.45em .8em;border-radius:2px;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}

/* dark band: report + trust */
.dark{background:var(--band);color:var(--band-fg)}
.dark .head p,.dark .eyebrow{color:var(--band-2)}
.dark .btn-line{color:var(--band-fg)}
.report-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem)}
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.checklist li{display:grid;grid-template-columns:1.6rem 1fr;gap:.4rem;align-items:start}
.checklist li::before{content:"";width:1rem;height:1rem;margin-top:.3rem;border:2px solid var(--resin);border-radius:2px;background:linear-gradient(135deg,transparent 45%,var(--resin) 45% 60%,transparent 60%)}
.dark .checklist b{color:var(--band-fg)}
.dark .checklist span{color:var(--band-2)}
.checklist span{color:var(--ink-2)}
.checklist b{color:var(--ink)}
.trust{display:grid;gap:1.2rem;align-content:start}
.trust div{border-top:1px solid rgba(159,182,187,.35);padding-top:1rem}
.trust h3{font-size:1.3rem}
.trust p{color:var(--band-2);margin-top:.3rem;font-size:.97rem}
.dark .ctas{margin-top:1.8rem}
@media (max-width:860px){.report-grid{grid-template-columns:1fr}}

/* colours */
.chips{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.4rem}
.chip{display:grid;gap:.4rem;font-family:var(--mono);font-size:.78rem;color:var(--ink-2)}
.chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem}
.chip i{display:block;width:100%;height:64px;border-radius:2px;border:1px solid var(--line)}

.colours{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.colours figure{margin:0}
.colours img,.colours .sw{display:block;width:100%;aspect-ratio:2.44/1;object-fit:cover;border-radius:2px;border:1px solid var(--line)}
.colours figcaption{font-family:var(--mono);font-size:.75rem;color:var(--ink-2);margin-top:.35rem}
@media (max-width:860px){.colours{grid-template-columns:repeat(2,minmax(0,1fr))}}

.lights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.light{background:var(--panel);border:1px solid var(--line);border-top:4px solid #29abe2;border-radius:3px;padding:1.4rem;display:grid;gap:.6rem;align-content:start}
.light .dot{width:64px;height:64px;border-radius:50%;box-shadow:0 0 0 6px var(--resin-soft),0 0 28px rgba(41,171,226,.45)}
.light p{color:var(--ink-2);font-size:.97rem}
@media (max-width:860px){.lights{grid-template-columns:1fr}}

/* faq */
.faq{display:grid;gap:0;border-top:1px solid var(--line);max-width:48rem}
.faq details{border-bottom:1px solid var(--line);padding-block:.9rem}
.faq summary{cursor:pointer;font-family:var(--display);font-size:1.3rem;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--resin)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin-top:.6rem;color:var(--ink-2)}

/* forms, contact */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.placeholder{border:2px dashed var(--line);border-radius:3px;padding:1.2rem;color:var(--ink-2);font-size:.95rem;background:var(--panel)}
.placeholder b{display:block;font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--resin);margin-bottom:.4rem}
.tradify{width:100%;min-height:900px;border:1px solid var(--line);border-radius:3px;background:#fff}
.contact-list{display:grid;gap:.9rem;margin-top:1.2rem}
.contact-list div{display:grid;grid-template-columns:7rem 1fr;gap:.6rem;border-bottom:1px solid var(--line);padding-bottom:.8rem}
.contact-list .k{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);padding-top:.2rem}
.contact-list a{text-decoration:none;border-bottom:1px solid var(--line)}
.copy{font:inherit;font-size:.8rem;border:1px solid var(--line);background:transparent;color:var(--ink-2);border-radius:2px;padding:.1em .5em;margin-left:.5rem;cursor:pointer}

/* cta band */
.ctaband{background:var(--resin-soft);border-top:1px solid var(--line)}
.ctaband .wrap{display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:center;justify-content:space-between;padding-block:2.2rem}
.ctaband h2{font-size:clamp(1.7rem,3.4vw,2.4rem)}
.ctaband p{color:var(--ink-2);margin-top:.3rem}

footer.site{background:var(--band);color:var(--band-2);font-size:.9rem}
footer.site .wrap.top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem;padding-block:2.8rem 2rem}
footer.site b{color:var(--band-fg);font-family:var(--display);font-size:1.2rem;letter-spacing:.03em;text-transform:uppercase}
footer.site ul{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.35rem}
footer.site a{color:var(--band-fg);text-decoration:none}
footer.site a:hover{text-decoration:underline}
footer.site .eyebrow{color:var(--band-2)}
.legal{border-top:1px solid rgba(159,182,187,.25);font-family:var(--mono);font-size:.72rem;padding-block:1rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
@media (max-width:860px){footer.site .wrap.top{grid-template-columns:1fr 1fr}}
@media (max-width:520px){footer.site .wrap.top{grid-template-columns:1fr}}

@media (max-width:420px){.chips{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* preferred suppliers strip: always on white so brand logos read correctly */
.suppliers{background:#fff;color:#1b2154;border-top:1px solid #e3e7ef}
.suppliers .wrap{padding-block:1.8rem 2rem;text-align:center}
.suppliers .eyebrow{color:#5a6178}
.suppliers .logos{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.2rem 2.6rem}
.suppliers .logos a{display:block;line-height:0;transition:opacity .2s}
.suppliers .logos a:hover{opacity:.8}
.suppliers .logos img{height:40px;width:auto;max-width:170px;object-fit:contain}
@media (max-width:600px){.suppliers .logos{gap:1rem 1.6rem}.suppliers .logos img{height:30px;max-width:120px}}
.trust .member{display:flex;align-items:center;gap:1rem;background:#fff;border:0;border-radius:4px;padding:.8rem 1rem}
.trust .member img{height:40px;width:auto;flex:none}
.trust .member p{color:#1b2154;margin:0;font-size:.92rem}
section.suppliers{padding:0}
.suppliers .logos img[src*="bwtlincoln"],.suppliers .logos img[src*="allnex"],.suppliers .logos img[src*="summit"]{height:52px}
@media (max-width:600px){.suppliers .logos img[src*="bwtlincoln"],.suppliers .logos img[src*="allnex"]{height:40px}}
/* colour visualiser */
.viz{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(1.2rem,3vw,2.4rem);align-items:start}
.viz-canvas-wrap{position:relative;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#0e1230;line-height:0}
.viz canvas{display:block;width:100%;height:auto;cursor:crosshair;touch-action:manipulation}
.viz-tag{position:absolute;left:0;bottom:0;background:rgba(15,20,64,.82);color:#fff;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:.5em .8em;line-height:1.2}
.viz-busy{position:absolute;inset:0;display:grid;place-items:center;background:rgba(14,18,48,.45);color:#fff;font-family:var(--mono);font-size:.85rem;line-height:1.2}
.viz-busy[hidden]{display:none}
.viz-hint{color:var(--ink-2);font-size:.95rem;margin:.7rem 0 0}
.viz-tools{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1rem}
.viz-upload{position:relative;cursor:pointer}
.viz-upload input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.viz-upload:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.viz-swatches{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.6rem}
.viz-swatches button{display:flex;align-items:center;gap:.6rem;padding:.55rem .65rem;border:1px solid var(--line);border-radius:3px;background:var(--panel);color:var(--ink);font:inherit;font-size:.92rem;text-align:left;cursor:pointer}
.viz-swatches button span{width:1.6rem;height:1.6rem;border-radius:2px;flex:none;border:1px solid rgba(0,0,0,.15)}
.viz-swatches button[aria-checked="true"]{border-color:var(--blue);box-shadow:inset 0 0 0 2px var(--blue)}
.viz-range{display:flex;flex-direction:column;gap:.4rem;margin-top:.6rem;font-size:.92rem;color:var(--ink-2)}
.viz-range input{width:100%;accent-color:var(--resin)}
.viz-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.viz-mini{font:inherit;font-size:.88rem;padding:.5rem .8rem;border:1px solid var(--line);border-radius:3px;background:var(--panel);color:var(--ink);cursor:pointer;text-decoration:none}
.viz-mini:hover{border-color:var(--blue)}
@media (max-width:860px){.viz{grid-template-columns:1fr}}
.colours-cta{margin-top:1.4rem}
/* pool problem checker */
.chk{max-width:62rem}
.chk-steps{list-style:none;display:flex;gap:.4rem;margin:0 0 1.6rem;padding:0;counter-reset:s}
.chk-steps li{flex:1;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);border-top:3px solid var(--line);padding-top:.5rem;counter-increment:s}
.chk-steps li::before{content:counter(s) ". "}
.chk-steps li.on{border-color:var(--blue);color:var(--ink)}
.chk h2 small{display:block;font-family:Barlow,Arial,sans-serif;font-size:1rem;font-weight:400;color:var(--ink-2);margin-top:.3rem;letter-spacing:0;text-transform:none}
.chk-types{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin-top:1.2rem}
.chk-types button{display:flex;flex-direction:column;gap:.35rem;text-align:left;padding:1.1rem 1rem;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--ink);font:inherit;cursor:pointer}
.chk-types button b{font-family:var(--display);font-size:1.35rem;font-weight:600;text-transform:uppercase;letter-spacing:.02em}
.chk-types button span{font-size:.9rem;color:var(--ink-2)}
.chk-types button:hover,.chk-types button[aria-checked="true"]{border-color:var(--blue);box-shadow:inset 0 0 0 2px var(--blue)}
.chk-unsure{margin-top:1.4rem;padding:1.2rem 1.3rem;background:var(--panel);border:1px solid var(--line);border-radius:4px}
.chk-unsure ul{margin:.6rem 0;padding-left:1.1rem;display:grid;gap:.4rem}
.chk-symptoms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin-top:1.2rem}
.chk-sym{display:flex;gap:.7rem;align-items:flex-start;padding:.85rem 1rem;border:1px solid var(--line);border-radius:4px;background:var(--panel);cursor:pointer}
.chk-sym input{width:1.2rem;height:1.2rem;margin-top:.1rem;accent-color:var(--resin);flex:none}
.chk-sym:has(input:checked){border-color:var(--blue);box-shadow:inset 0 0 0 2px var(--blue)}
.chk-nav{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
.chk-nav .btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.chk-summary{padding:1.4rem 1.5rem;background:var(--band);color:var(--band-fg);border-radius:4px}
.chk-summary h2{margin-top:.6rem}
.chk-summary p{color:var(--band-2);margin-top:.5rem;max-width:46rem}
.chk-lvl{display:inline-block;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:.3em .6em;border-radius:2px;font-weight:500}
.chk-act{background:#c8322b;color:#fff}
.chk-plan{background:#f2b632;color:#1b2154}
.chk-check{background:#29abe2;color:#0f1440}
.chk-results{display:grid;gap:1rem;margin-top:1rem}
.chk-card{display:grid;gap:1.2rem;padding:1.2rem;border:1px solid var(--line);border-radius:4px;background:var(--panel)}
.chk-card.has-img{grid-template-columns:minmax(0,15rem) minmax(0,1fr)}
.chk-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px}
.chk-card h3{font-size:1.45rem;margin-top:.5rem}
.chk-card dl{margin:.7rem 0 0;display:grid;gap:.15rem}
.chk-card dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-top:.5rem}
.chk-card dd{margin:0}
.chk-links{margin:.8rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.chk-links a{font-weight:600}
.chk-next{margin-top:1.6rem;padding:1.4rem 1.5rem;border:2px solid var(--blue);border-radius:4px;background:var(--resin-soft)}
.chk-next .ctas{margin-top:1rem}
.chk-copied{margin-top:.7rem;font-weight:600}
@media (max-width:860px){.chk-types{grid-template-columns:1fr 1fr}.chk-symptoms{grid-template-columns:1fr}.chk-card.has-img{grid-template-columns:1fr}}
/* partner form */
.pform{max-width:58rem;display:grid;gap:1.2rem}
.pform label{display:flex;flex-direction:column;gap:.35rem;font-weight:500;font-size:.95rem}
.pform input:not([type=checkbox]),.pform select,.pform textarea{font:inherit;font-weight:400;padding:.65rem .75rem;border:1px solid var(--line);border-radius:3px;background:var(--panel);color:var(--ink);width:100%}
.pform input:focus,.pform select:focus,.pform textarea:focus{outline:2px solid var(--blue);outline-offset:1px}
.pform .err{border-color:#c8322b!important;box-shadow:0 0 0 1px #c8322b}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.pgrid .wide,.pform>.wide{grid-column:1/-1}
.pset,.pchecks{border:1px solid var(--line);border-radius:4px;padding:1rem 1.1rem 1.2rem;margin:0;display:grid;gap:.9rem;background:var(--panel)}
.pset legend,.pchecks legend{font-family:var(--display);font-size:1.3rem;font-weight:600;text-transform:uppercase;letter-spacing:.02em;padding:0 .4rem}
.pset-hint,.pset-sub{margin:0;color:var(--ink-2);font-size:.92rem}
.pservices{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.5rem}
.pform .pservices label,.pform .pstates label,.pform .pchecks label,.pform .pconsent{flex-direction:row;align-items:center;gap:.55rem;font-weight:400}
.pform input[type=checkbox]{width:1.15rem;height:1.15rem;accent-color:var(--resin);flex:none}
.pstates{display:flex;flex-wrap:wrap;gap:.5rem}
.pstates label{border:1px solid var(--line);border-radius:3px;padding:.45rem .7rem}
.pstates label:has(input:checked){border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.pstates.err{outline:2px solid #c8322b;outline-offset:3px;border-radius:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pform-msg{font-weight:600;margin:0}
.pform-msg.ok{color:var(--resin)}
.pform-msg.bad{color:#c8322b}
@media (max-width:700px){.pgrid{grid-template-columns:1fr}}
/* partner directory */
.pdir{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(1.2rem,3vw,2.4rem);align-items:start}
.pdir-map{position:sticky;top:6.5rem}
.aumap{width:100%;height:auto;display:block}
.aumap .st{fill:var(--resin-soft);stroke:var(--panel);stroke-width:2;cursor:pointer;transition:fill .15s}
.aumap .st.has{fill:#9fd6ef}
.aumap .st:hover,.aumap .st:focus{fill:#6cc2e8;outline:none}
.aumap .st.sel{fill:var(--blue)}
.aumap .lbl text{font-family:var(--mono);font-size:15px;fill:var(--ink);text-anchor:middle;pointer-events:none}
.aumap .pin{fill:#232c6b;stroke:#fff;stroke-width:2}
.pdir-hint{font-size:.88rem;color:var(--ink-2);margin-top:.5rem}
.pdir-filters{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.pdir-filters label{display:flex;flex-direction:column;gap:.3rem;font-size:.9rem;font-weight:500}
.pdir-filters select{font:inherit;padding:.6rem .7rem;border:1px solid var(--line);border-radius:3px;background:var(--panel);color:var(--ink)}
.pdir-count{font-family:var(--mono);font-size:.78rem;color:var(--ink-2);margin:.8rem 0}
.pcards{display:grid;gap:.9rem}
.pcard{padding:1.1rem 1.2rem;border:1px solid var(--line);border-radius:4px;background:var(--panel)}
.pcard h3{font-size:1.4rem;margin-top:.4rem}
.pbase{color:var(--ink-2);font-size:.92rem;margin-top:.3rem}
.psvc{list-style:none;padding:0;margin:.7rem 0 0;display:flex;flex-wrap:wrap;gap:.35rem}
.psvc li{font-size:.82rem;padding:.25rem .55rem;border-radius:2px;background:var(--resin-soft)}
.plinks{display:flex;gap:1.2rem;margin-top:.8rem;font-weight:600}
.pempty{padding:1.4rem;border:1px dashed var(--line);border-radius:4px;background:var(--panel)}
.pempty p{color:var(--ink-2);margin-top:.4rem}
@media (max-width:860px){.pdir{grid-template-columns:1fr}.pdir-map{position:static}}
.pcard-top{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:space-between}
.pbadge{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;padding:.25em .55em;border-radius:2px}
.pcard.partner{border-left:4px solid #232c6b}
.pcard.partner .pbadge{background:#232c6b;color:#fff}
.pcard.worked{border-left:4px solid #f2b632}
.pcard.worked .pbadge{background:#fdf0cf;color:#6b4e00}
.aumap .pin.worked{fill:#f2b632;stroke:#6b4e00}
.pdir-legend{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;font-size:.85rem;color:var(--ink-2);margin-top:.6rem}
.pdir-legend .lg{display:inline-block;width:.8rem;height:.8rem;border-radius:50%;margin-right:-.5rem;vertical-align:middle}
.pdir-legend .lg.partner{background:#232c6b}
.pdir-legend .lg.worked{background:#f2b632}

/* finance page */
.pagehead.noimg .wrap.fin-head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:2.5rem;align-items:center}
.humm-card{background:#fff;border:1px solid var(--line);border-top:4px solid #ff6c0e;border-radius:4px;padding:2rem 1.8rem;display:grid;gap:1rem;justify-items:start;box-shadow:0 10px 30px rgba(15,20,64,.08)}
.humm-card img{width:100%;max-width:320px;height:auto}
.humm-tag{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.humm-card p{color:#4a5078;font-size:.95rem;margin:0}
.fin-head .ctas{margin-top:1.4rem}
.fin-steps{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:980px){.fin-steps{grid-template-columns:1fr}}
@media (max-width:860px){.pagehead.noimg .wrap.fin-head{grid-template-columns:1fr}}

/* example condition report pages */
.rep-ex{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;max-width:56rem}
.rep-ex figure{margin:0}
.rep-ex a{display:block;border:1px solid var(--line);border-radius:4px;overflow:hidden;box-shadow:0 12px 30px rgba(15,20,64,.12);background:#fff;transition:transform .2s}
.rep-ex a:hover{transform:translateY(-3px)}
.rep-ex img{display:block;width:100%;height:auto}
.rep-ex figcaption{font-family:var(--mono);font-size:.76rem;color:var(--ink-2);margin-top:.6rem}
@media (max-width:640px){.rep-ex{grid-template-columns:1fr}}

/* fibreglass recent work gallery */
.fg-gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.fg-gal figure{margin:0}
.fg-gal img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.fg-gal figcaption{font-family:var(--mono);font-size:.76rem;color:var(--ink-2);margin-top:.5rem}
@media (max-width:760px){.fg-gal{grid-template-columns:1fr}}
@media (min-width:1200px){.svc{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* reviews */
.revs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
.rev{margin:0;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--resin);border-radius:4px;padding:1.4rem 1.5rem;display:grid;gap:1rem;align-content:space-between}
.rev blockquote{margin:0;font-size:1.05rem;line-height:1.55}
.rev figcaption{display:flex;flex-direction:column;gap:.15rem}
.rev figcaption span{font-family:var(--mono);font-size:.74rem;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em}
@media (max-width:760px){.revs{grid-template-columns:1fr}}
