
:root{--ink:#162735;--muted:#526272;--navy:#0e2639;--blue:#1177bf;--light:#f3f7fa;--line:#dbe5ea;--orange:#ecab53;--white:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;line-height:1.65;background:white}a{color:#0869a7}a:hover{text-decoration:none}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #ed9d29;outline-offset:4px}img{max-width:100%;height:auto} .skip{position:absolute;left:-9999px;top:8px;background:#fff;padding:8px;z-index:100}.skip:focus{left:12px}.wrap{max-width:1160px;margin:auto;padding-inline:24px}.top{background:#091d2b;color:#e8f3fb;font-size:.88rem}.top .wrap{display:flex;justify-content:space-between;gap:1rem;padding-block:6px}.top a{color:#fff}.header{background:white;position:sticky;top:0;z-index:10;border-bottom:1px solid #e0e8ed;box-shadow:0 3px 20px #102f4610}.header-inner{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:1rem}.brand{display:inline-flex;align-items:center;gap:.65rem;color:var(--navy);text-decoration:none;font-weight:850;letter-spacing:-.04em;font-size:1.6rem;white-space:nowrap}.mark{display:grid;place-items:center;background:var(--blue);color:white;width:41px;height:41px;border-radius:9px;font-size:1.4rem;font-weight:900}.brand small{font-size:.42em;display:block;letter-spacing:.12em;line-height:1.1;color:#60798b;font-weight:700;text-transform:uppercase}nav{display:flex;align-items:center;gap:1.25rem}nav a{color:#1c3546;text-decoration:none;font-weight:650;font-size:.93rem}nav a[aria-current=page]{color:#0869a7}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:8px;padding:13px 20px;background:var(--blue);color:white;text-decoration:none;font-weight:750;line-height:1.25;border:2px solid var(--blue)}.btn:hover{background:#0c5990;color:white}.btn.light{background:white;color:#0b517c;border-color:white}.btn.outline{background:transparent;color:#0e679f;border-color:#9bbdcc}.btn.outline:hover{background:#eaf4fa}.menu{display:none;background:transparent;border:1px solid #c4d5e0;padding:9px 12px;border-radius:7px;font-weight:700;color:var(--navy);cursor:pointer}.hero{background:linear-gradient(113deg,#092536,#123f5e);color:white;overflow:hidden}.hero-inner{display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:40px;padding-block:74px}.eyebrow{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:#7cc8f5;font-weight:850;margin:0 0 14px}.hero h1{font-size:clamp(2.2rem,5vw,4.25rem);line-height:1.12;letter-spacing:-.05em;margin:0 0 22px}.hero p{color:#dbeaf3;font-size:1.13rem;max-width:630px}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:27px}.hero-art{width:100%;filter:drop-shadow(0 12px 25px #0004)}.section{padding-block:76px}.section.soft{background:var(--light)}.section h2{font-size:clamp(1.8rem,3vw,2.7rem);letter-spacing:-.035em;line-height:1.22;margin:0 0 20px}.section-intro{max-width:780px;color:var(--muted);font-size:1.06rem;margin-bottom:28px}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.tile{border:1px solid var(--line);border-radius:17px;background:white;overflow:hidden;box-shadow:0 6px 20px #15344908}.tile-content{padding:28px}.tile h3{font-size:1.4rem;letter-spacing:-.02em;margin:0 0 10px}.tile p{margin-top:0;color:var(--muted)}.tile .pic{display:block;background:#e8f1f7;padding:25px;min-height:220px}.tile .pic img{width:100%;height:180px;object-fit:contain}.link{font-weight:800;text-decoration:underline;text-underline-offset:4px}.mini{background:white;padding:25px;border:1px solid var(--line);border-radius:14px}.mini strong{display:block;font-size:1.05rem;margin-bottom:8px}.mini p{margin:0;color:var(--muted)}.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.split img{background:#e9f3f8;border-radius:20px;padding:30px}.details{border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line);padding:16px 0}summary{font-weight:750;font-size:1.05rem;cursor:pointer;list-style:revert}details p{margin:10px 0;color:var(--muted)}.notice{border-left:4px solid var(--orange);padding:18px 22px;background:#fff7eb;border-radius:0 10px 10px 0}.check{list-style:none;padding:0;margin:20px 0}.check li{padding:7px 0 7px 28px;position:relative}.check li:before{content:'✓';position:absolute;left:0;color:#15815e;font-weight:900}.cta{background:#12354e;color:white;border-radius:20px;padding:35px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px}.cta h2{color:white;margin:0 0 9px}.cta p{color:#dbe9f2;margin:0}.footer{background:#081d2b;color:#b7cad6;padding:46px 0 20px}.footer a{color:#d5eaf6}.footer-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:25px}.footer strong{color:white}.footer .fine{margin-top:30px;border-top:1px solid #3b5362;padding-top:15px;font-size:.81rem}.pagehead{background:linear-gradient(120deg,#0a293d,#195477);color:#fff;padding-block:58px}.pagehead h1{font-size:clamp(2.2rem,4vw,3.3rem);line-height:1.17;margin:0 0 15px;letter-spacing:-.035em}.pagehead p{color:#daebf3;max-width:760px}.breadcrumb{font-size:.85rem;color:#cae1f0;margin-bottom:20px}.breadcrumb a{color:#fff}.spec{width:100%;border-collapse:collapse}.spec th,.spec td{border-bottom:1px solid #d9e3e9;text-align:left;vertical-align:top;padding:13px}.spec th{width:39%;color:#2c4c60}.note-small{font-size:.87rem;color:#526272}.content-narrow{max-width:840px}.bottom-space{margin-top:40px}@media(max-width:850px){.hero-inner,.split{grid-template-columns:1fr}.hero-inner{padding-block:50px}.hero-art{max-width:610px;margin:auto}.grid3{grid-template-columns:1fr 1fr}.menu{display:block}nav{display:none;position:absolute;top:100%;left:0;right:0;background:white;padding:20px 24px;box-shadow:0 12px 20px #1234;flex-direction:column;align-items:stretch}nav.open{display:flex}.header-inner{min-height:70px}.top .wrap{flex-wrap:wrap}}@media(max-width:590px){.grid2,.grid3{grid-template-columns:1fr}.section{padding-block:48px}.cta{flex-direction:column;align-items:flex-start;padding:28px}.top{font-size:.75rem}.hero h1{font-size:2.25rem}.tile-content{padding:23px}}

/* Real-world installation photography */
.hero-art{aspect-ratio:4/3;object-fit:cover;border-radius:18px;box-shadow:0 20px 38px #0005;filter:none}
.tile .pic{padding:0;min-height:0;background:#eef3f6}
.tile .pic img{height:270px;object-fit:cover;display:block}
.photo-caption{font-size:.78rem;color:#476277;background:#eef3f6;padding:7px 15px}
.split img{padding:0;aspect-ratio:4/3;object-fit:cover}
@media(max-width:590px){.tile .pic img{height:220px}}


.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.brand-logo img{display:block;height:auto;max-width:280px;width:100%}
.footer-logo-wrap{margin:0 0 10px}
.footer-logo{display:block;height:auto;max-width:220px;width:100%}
@media(max-width:850px){.brand-logo img{max-width:240px}}
@media(max-width:590px){.brand-logo img{max-width:210px}}

/* Genuine kit diagrams / roof profile technical references */
.technical-figure{margin:28px 0 40px;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;padding:20px}
.technical-figure img{display:block;width:100%;height:auto;object-fit:contain}
.technical-figure figcaption{color:var(--muted);font-weight:750;font-size:.95rem;margin-top:12px}
.visual-reference-section{background:#f3f7fa}
@media(max-width:590px){.technical-figure{padding:10px;margin:20px 0 30px}}

/* Customer installation photography */
.customer-installation .wrap.split > p{grid-column:2;margin-top:-28px;font-size:.88rem;color:var(--muted)}
.customer-photo{margin:0}
.customer-photo img{display:block;width:100%;height:auto;border-radius:16px}
.customer-photo figcaption{margin-top:10px;font-size:.88rem;color:var(--muted)}
@media(max-width:850px){.customer-installation .wrap.split > p{grid-column:1;margin-top:0}}
