@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,600;0,700;1,700&family=Montserrat:wght@400;500;600;700&display=swap');
:root{--navy:#0D1B2A;--blue:#0077C8;--orange:#4CA517;--green:#4CA517;--ink:#0D1B2A;--muted:#52616d;--light:#f3f5f6;--line:#d7dce0;--concrete:#7A7D80;--display:'Exo 2',Arial,sans-serif;--body:'Montserrat',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;color:var(--ink);font:1rem/1.65 var(--body);background:#fff}a{color:inherit}button{font:inherit}a,button,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:5px}.skip{position:fixed;top:-100px;left:16px;z-index:100;padding:10px 20px;background:#fff}.skip:focus{top:16px}.header{min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 5%;background:#fff}.brand{text-decoration:none;display:inline-flex;gap:12px;align-items:center;font-size:1.3rem;font-weight:500;letter-spacing:-.04em;white-space:nowrap}.brand b{font-weight:800}.brand-mark{width:28px;display:grid;gap:4px;transform:skewY(-12deg)}.brand-mark i{height:5px;background:var(--orange)}.brand-mark i:last-child{width:19px;background:var(--blue)}nav{display:flex;align-items:center;gap:29px}nav a{font-weight:700;text-decoration:none;font-size:.875rem}nav a:hover{color:var(--blue)}.nav-cta{border:1px solid var(--ink);padding:12px 18px}.menu-toggle{display:none}.hero{display:grid;grid-template-columns:1.06fr 1fr;background:var(--navy);min-height:620px;overflow:hidden}.hero-copy{padding:66px 9% 30px;color:white;display:flex;flex-direction:column;align-items:flex-start}.eyebrow{font-size:.875rem;letter-spacing:.13em;font-weight:700;display:flex;align-items:center;gap:12px;margin:0 0 22px}.eyebrow.dark{color:var(--blue)}.line{height:2px;width:28px;background:var(--orange)}h1,h2,h3,p{margin-top:0}h1,h2{font-family:var(--display);font-weight:600;letter-spacing:-.015em;line-height:1.03}h1{font-size:clamp(3.6rem,5.4vw,5.5rem);margin-bottom:26px}h1 em{font-style:normal;color:var(--orange)}.hero-intro{max-width:475px;color:#c8d6e6;font-size:1.06rem;line-height:1.8;margin-bottom:32px}.hero-actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap}.button{display:inline-flex;text-decoration:none;font-weight:800;font-size:.875rem;padding:16px 22px}.orange{background:var(--orange);color:var(--navy)}.orange:hover{background:#ff945f}.text-link{font-weight:700;font-size:.875rem;text-underline-offset:6px}.hero-bottom{width:100%;margin-top:auto;padding-top:66px;display:flex;justify-content:space-between;gap:20px;color:#98aec7;font-size:.75rem;letter-spacing:.06em}.hero-visual{position:relative;min-height:620px;background:#125de7;display:flex;flex-direction:column;justify-content:center;padding:54px 10%;isolation:isolate}.visual-grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff15 1px,transparent 1px),linear-gradient(90deg,#ffffff15 1px,transparent 1px);background-size:64px 64px;z-index:-1}.visual-title{color:#fff;margin-bottom:30px}.visual-title span{font-size:.75rem;letter-spacing:.12em}.visual-title strong{display:block;font:600 3.5rem/1.05 var(--display);margin-top:20px}.hero-layers{display:grid;gap:8px;transform:skewY(-6deg);margin:16px 0 45px}.hero-layers span{padding:15px 20px;box-shadow:8px 8px 0 #001e6b40;background:#e8f0ff;font-weight:700;color:var(--navy)}.hero-layers span:nth-child(2){background:var(--orange)}.hero-layers span:nth-child(3){background:#06266f;color:white}.hero-layers span:nth-child(4){background:#081b35;color:white}.visual-caption{position:absolute;bottom:28px;left:30px;color:white;font-size:.75rem;z-index:2}.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.hero-visual.has-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#081b3580,transparent 50%)}.hero-visual.has-photo .visual-caption{background:#081b35bd;padding:6px 10px;left:22px;bottom:20px}.intro-strip{display:flex;justify-content:space-around;gap:20px;padding:24px 5%;border-bottom:1px solid var(--line);font-weight:700;font-size:.875rem}.intro-strip span:before{content:'+';color:var(--blue);font-size:1.25rem;margin-right:12px}.section{padding:92px 6%;max-width:1600px;margin:auto}h2{font-size:clamp(2.8rem,4vw,4.25rem);margin-bottom:24px}h3{font-size:1.25rem;line-height:1.3;margin-bottom:12px}.section-heading{max-width:655px}.section-heading>p:last-child{color:var(--muted);max-width:610px;font-size:1.06rem}.drainage-content{display:grid;grid-template-columns:1fr 1fr;gap:7%;align-items:center;margin-top:44px}.diagram{background:var(--light);padding:28px;border:1px solid var(--line)}.diagram-label{display:flex;justify-content:space-between;font-size:.75rem;font-weight:700;letter-spacing:.06em;color:var(--muted)}.water-indicators{display:flex;justify-content:space-around;color:var(--blue);font-size:2rem;line-height:1.3;margin:16px 0 10px}.layer{display:grid;grid-template-columns:25px 1fr;gap:0 14px;padding:17px 20px;margin-bottom:6px}.layer>span{grid-row:span 2;font-size:.75rem;padding-top:3px;opacity:.75}.layer strong{font-size:.94rem}.layer small{font-size:.875rem}.surface{background:#125de7;color:white}.concrete{background:#ced9e6;border:1px solid #a8b8cb;background-image:radial-gradient(#718aa244 1.5px,transparent 1.5px);background-size:10px 10px}.subbase{background:#526983;color:white}.soil{background:#263b52;color:white}.diagram>p{font-size:.875rem;color:var(--muted);margin:18px 0 0}.principles article{display:flex;gap:20px;padding:26px 0;border-bottom:1px solid var(--line)}.principles article:first-child{padding-top:0}.number{font:600 1.7rem var(--display);color:var(--blue)}.principles p{color:var(--muted);margin-bottom:0}.source-details{margin-top:32px;font-size:.875rem;color:var(--muted)}summary{cursor:pointer;font-weight:700;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px}summary::-webkit-details-marker{display:none}summary:after{content:'+';font-size:1.5rem;font-weight:400;color:var(--blue)}details[open]>summary:after{content:'−'}details p{margin:16px 0 8px}.source-details p{max-width:850px}.source-details a{color:var(--blue)}.applications{background:var(--light);max-width:none}.section-top{display:flex;justify-content:space-between;align-items:flex-end;gap:60px;margin-bottom:36px}.section-top h2{margin-bottom:0}.section-top>p{max-width:390px;color:var(--muted);margin-bottom:4px}.application-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.application-card{padding:36px;background:var(--navy);color:#fff;position:relative;overflow:hidden}.application-card.blue{background:var(--blue)}.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}.application-no{font:500 3rem var(--display);color:var(--orange)}.tag{border:1px solid #ffffff55;padding:5px 9px;font-size:.75rem;letter-spacing:.05em}.application-card h3{font:600 3.2rem var(--display)}.application-card p{max-width:420px;color:#d5e2f2}.card-rule{margin:27px 0 20px;background:#ffffff40;height:1px}.application-card .card-bottom{margin:0;font-size:.875rem;color:white}.future{display:grid;grid-template-columns:1fr 1fr;gap:8%;padding-top:60px}.future h3{font:600 2.4rem var(--display)}.future p{color:var(--muted);max-width:460px}.future ul{list-style:none;padding:0;margin:0}.future li{padding:18px 0;border-bottom:1px solid #cbd7e6;display:flex;justify-content:space-between;align-items:center;gap:14px}.future li>span:first-child{font-weight:800;font-size:1.2rem}.future li>span:last-child{color:var(--muted);font-size:.875rem}.approach{max-width:none;background:var(--navy);color:#fff}.approach .eyebrow{color:var(--orange)}.approach .section-top>p{color:#c8d6e6}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:5%;margin-top:58px}.steps article{border-top:1px solid #496079;padding-top:23px}.steps article>span{font:500 2.2rem var(--display);color:var(--orange);display:block;margin-bottom:28px}.steps p{color:#c8d6e6;margin-bottom:0}.faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:9%}.questions details{border-bottom:1px solid var(--line);padding:22px 0}.questions details:first-child{padding-top:5px}.questions summary{font-size:1.05rem}.questions p{color:var(--muted)}.project{max-width:none;background:#eaf0f8;display:grid;grid-template-columns:1fr 1fr;gap:9%}.project>div>p:last-child{max-width:390px;color:var(--muted)}.checklist{list-style:none;margin:0;padding:0}.checklist li{display:flex;gap:22px;border-bottom:1px solid #c9d5e5;padding:18px 0}.checklist li:first-child{padding-top:0}.checklist li>span{color:var(--blue);font:600 1.8rem var(--display)}.checklist strong{font-size:1rem}.checklist p{margin:4px 0 0;color:var(--muted);font-size:.94rem}footer{padding:38px 5%;display:flex;align-items:center;justify-content:space-between;gap:24px}footer p{font-size:.875rem;color:var(--muted);margin:0}footer>a:last-child{font-size:.875rem;text-underline-offset:4px}
@media(min-width:1600px){.hero-copy{padding-left:max(9%,calc((100vw - 1500px)/2))}.applications,.approach,.project{padding-left:calc((100vw - 1400px)/2);padding-right:calc((100vw - 1400px)/2)}}
@media(max-width:1000px){.header{padding:20px 4%}nav{gap:17px}nav a{font-size:.8rem}.brand{font-size:1.1rem}.hero{min-height:580px}.hero-copy{padding:52px 8% 28px}.hero-visual{min-height:580px;padding:48px 8%}h1{font-size:4rem}.hero-actions{gap:18px}.hero-bottom{padding-top:44px}.section{padding:70px 5%}.section-top{gap:35px}.section-top>p{max-width:310px}.drainage-content{gap:5%}.application-card{padding:30px}.intro-strip{gap:10px;font-size:.8rem}footer{flex-wrap:wrap}footer p{order:3;width:100%}}
@media(max-width:760px){html{scroll-padding-top:20px}.header{min-height:76px;position:relative;flex-wrap:wrap;padding:18px 5%}.brand{font-size:1.17rem}.menu-toggle{display:block;border:1px solid var(--line);padding:6px 12px;background:white;font-size:.875rem;font-weight:700}nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding-top:8px}nav.open{display:flex}nav a{font-size:1rem;padding:13px 0;border-top:1px solid var(--line)}nav .nav-cta{border:0;border-top:1px solid var(--line);padding:13px 0;color:var(--blue)}.hero{grid-template-columns:1fr}.hero-copy{padding:42px 6% 28px}h1{font-size:clamp(3.5rem,11vw,5rem)}.hero-intro{font-size:1rem;margin-bottom:27px}.hero-actions{gap:25px}.hero-bottom{padding-top:38px}.hero-visual{min-height:370px;padding:36px 8%;overflow:hidden}.visual-title strong{font-size:2.8rem}.visual-title{margin-bottom:8px}.hero-layers{margin:8px 0 22px;gap:5px}.hero-layers span{padding:9px 16px;font-size:.875rem}.hero-visual.has-photo{min-height:370px}.visual-caption{bottom:10px;font-size:.75rem;left:20px}.intro-strip{flex-direction:column;gap:9px;padding:24px 6%;font-size:.875rem}.section{padding:56px 6%}h2{font-size:3rem}.section-top{display:block;margin-bottom:28px}.section-top>p{max-width:100%;margin-top:24px}.drainage-content{grid-template-columns:1fr;gap:32px;margin-top:30px}.diagram{padding:20px}.layer{padding:14px}.principles article{padding:23px 0}.application-grid{grid-template-columns:1fr;gap:18px}.application-card{padding:28px}.card-top{margin-bottom:25px}.future{grid-template-columns:1fr;gap:16px;padding-top:38px}.future p{margin-bottom:8px}.future li{padding:16px 0}.steps{grid-template-columns:1fr;margin-top:35px;gap:28px}.steps article>span{margin-bottom:12px}.faq,.project{grid-template-columns:1fr;gap:25px}.faq h2{margin-bottom:0}.questions summary{font-size:1rem}.checklist{margin-top:8px}footer{padding:30px 6%;gap:20px}footer>a:last-child{font-size:.8rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Official PerCon identity and page composition. */
.header{min-height:115px;padding:15px 6%;border-bottom:3px solid var(--green)}
.brand{display:block;flex-shrink:0;line-height:0}
.brand img{display:block;width:194px;height:auto}
nav a{font-weight:600}
.nav-cta{background:var(--green);color:var(--navy);border-color:var(--green);font-weight:700}
.nav-cta:hover{color:var(--navy);background:#60b92a}
.hero{display:block;position:relative;min-height:610px}
.hero-copy{position:relative;z-index:2;width:67%;min-height:610px;padding:72px 6% 48px}
.hero-visual{position:absolute;inset:0;min-height:0;padding:0;background:var(--navy)}
.hero-photo{object-position:center 58%}
.hero-visual.has-photo:after{background:linear-gradient(90deg,#0d1b2afc 0%,#0d1b2aeb 32%,#0d1b2ab8 51%,#0d1b2a20 80%,#0d1b2a33 100%)}
.hero-visual.has-photo .visual-caption{left:auto;right:24px;bottom:20px;background:#0d1b2acc}
h1,h2{font-weight:700;font-style:italic;line-height:1.13;letter-spacing:-.025em}
h1{font-size:clamp(2.7rem,4.4vw,4.5rem);margin-bottom:28px}
h1 em{font-style:inherit;color:#35aeff}
.hero-intro{font-weight:500;color:#e0e8ef;max-width:575px;font-size:1rem}
.eyebrow{letter-spacing:.09em;font-weight:600}
.line{height:3px;background:var(--green)}
.button.green{background:var(--green);color:var(--navy);font-weight:700}
.button.green:hover{background:#60b92a}
.button{border-radius:3px}
.brand-slogan{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:55px;font:700 italic .875rem/1.5 var(--display);letter-spacing:.05em}
.brand-slogan span+span:before{content:'•';margin-right:12px;color:var(--green)}
.brand-slogan span:nth-child(2){color:#35aeff}
.brand-slogan span:nth-child(3){color:#8dda54}
.intro-strip{background:#fff;border-bottom:1px solid var(--line);font-weight:600}
.intro-strip span:before{color:var(--green)}
h2{font-size:clamp(2.25rem,3.2vw,3.5rem)}
.application-card h3{font-size:clamp(1.8rem,3vw,2.65rem);font-weight:700;font-style:italic}
.application-card{border-top:4px solid var(--green)}
.application-card.blue{background:#073b5e;border-top-color:var(--blue)}
.application-no{font-weight:700;color:#8dda54}
.future h3{font-size:2rem;font-weight:700;font-style:italic}
.approach .eyebrow,.steps article>span{color:#8dda54}
.surface{background:var(--green);color:var(--navy)}
.concrete{background-color:#e1e3e5;border-color:#7a7d80;background-image:radial-gradient(#7a7d8055 1.5px,transparent 1.5px)}
.subbase{background:var(--concrete)}
.soil{background:var(--navy)}
.project{background:#edf2f4}
footer{padding:34px 6%;border-top:4px solid var(--green)}
footer .brand img{width:180px}
@media(min-width:1600px){.hero-copy{padding-left:calc((100vw - 1400px)/2);padding-right:7%;width:65%}}
@media(max-width:1100px){.header{padding:14px 4%}.brand img{width:175px}nav{gap:18px}.hero-copy{width:76%;padding:62px 5% 46px}.hero-visual.has-photo:after{background:linear-gradient(90deg,#0d1b2afa 0%,#0d1b2ad9 46%,#0d1b2a30 100%)}h1{font-size:3.25rem}.brand-slogan{margin-top:42px}}
@media(max-width:760px){.header{min-height:104px;padding:12px 5%}.brand img{width:176px}.nav-cta,.nav-cta:hover{background:white}nav .nav-cta{color:var(--blue)}.hero,.hero-copy{min-height:590px}.hero-copy{width:100%;padding:44px 6% 78px}.hero-visual,.hero-visual.has-photo{min-height:0}.hero-photo{object-position:66% center}.hero-visual.has-photo:after{background:linear-gradient(90deg,#0d1b2aee 0%,#0d1b2abf 100%)}.hero-visual.has-photo .visual-caption{right:6%;bottom:17px;font-size:.75rem}.hero-intro{font-size:1rem;line-height:1.8}h1{font-size:clamp(2.3rem,8.3vw,3.5rem);line-height:1.2}h2{font-size:2.25rem}.hero-actions{gap:22px}.brand-slogan{gap:7px;letter-spacing:.015em;font-size:.875rem;margin-top:34px}.brand-slogan span+span:before{margin-right:7px}.application-card h3{font-size:1.95rem}.future h3{font-size:1.65rem}.section-top h2{overflow-wrap:normal}.steps article>span{font-size:1.75rem}.diagram-label{flex-wrap:wrap;gap:6px}.layer{grid-template-columns:22px 1fr}.layer strong{font-size:.875rem}.layer small{font-size:.875rem}footer .brand img{width:164px}footer>a:last-child{font-size:.875rem}}
@media(max-width:360px){.hero-actions{gap:18px}.brand-slogan{max-width:250px;row-gap:7px}.layer{padding:13px 10px;column-gap:9px}}

/* Sport-first direction: army green, stone and earth. */
:root{--navy:#182219;--blue:#566344;--orange:#a5b278;--green:#566344;--ink:#20251d;--muted:#606354;--light:#e5dfd2;--line:#c9c4b6;--concrete:#8d897d;--sand:#e8e0d0;--olive-light:#b4bf80;--earth:#9c7656}
body{background:#f5f2ea}
.header{background:var(--sand);border-bottom:0;position:relative}
.header:after{content:'';position:absolute;bottom:0;left:6%;right:6%;height:3px;background:var(--green)}
.brand img{mix-blend-mode:multiply}
nav a{font-weight:700;font-size:.875rem}
nav a:hover{color:#303e29}
.nav-cta{background:var(--navy);color:var(--sand);border:1px solid var(--navy);text-transform:uppercase;font:700 italic .875rem/1.4 var(--display);padding:14px 19px}
.nav-cta:hover{background:#34472b;color:var(--sand)}
.hero{min-height:635px;background:var(--navy)}
.hero-copy{min-height:635px;padding-top:78px;padding-bottom:52px}
.hero-photo{filter:grayscale(.85) sepia(.28) saturate(.65) contrast(1.12);object-position:center 58%}
.hero-visual.has-photo:after{background:linear-gradient(90deg,#182219fc 0%,#182219eb 31%,#182219ae 53%,#18221920 84%),linear-gradient(0deg,#30291b55,#34402b33)}
.hero-visual.has-photo .visual-caption{background:#182219cf;color:var(--sand);border-left:2px solid #b4bf80;border-radius:0}
.hero .eyebrow{color:#c9cfb6;font-size:.875rem;letter-spacing:.16em}
.line{background:var(--olive-light);width:38px}
h1,h2,.application-card h3,.future h3{text-transform:uppercase;font-weight:700;font-style:italic;letter-spacing:-.02em}
h1{font-size:clamp(2.7rem,4.1vw,4.4rem);color:#f7f3e8;line-height:1.12;margin-bottom:30px}
h1 em{color:#c1c995}
.hero-intro{color:#e0dfd4;font-size:1rem;max-width:575px;line-height:1.8}
.button{border-radius:0;text-transform:uppercase;font:700 italic 1rem/1.4 var(--display);padding:18px 24px;letter-spacing:.015em;min-height:55px}
.button.green{background:var(--olive-light);color:#182219;border-bottom:3px solid #77834f}
.button.green:hover{background:#c9d598}
.text-link{color:#f5f0e5;text-underline-offset:7px;font-size:.875rem}
.brand-slogan{color:#e8e0d0;font-size:.875rem;margin-top:49px;letter-spacing:.09em}
.brand-slogan span:nth-child(2){color:#c1c995}.brand-slogan span:nth-child(3){color:#d1b38e}.brand-slogan span+span:before{color:#77834f}
.intro-strip{background:#252f22;color:#e8e0d0;border:0;padding-top:24px;padding-bottom:24px}
.intro-strip span:before{color:#b4bf80;content:'/';font:700 italic 1.25rem var(--display)}
.eyebrow.dark{color:#4e5d3e}
h2{font-size:clamp(2.1rem,3vw,3.3rem);line-height:1.12}
.section{padding-top:84px;padding-bottom:84px}
.diagram{background:#ebe5d8;border:1px solid #c3baa7;box-shadow:10px 10px 0 #ded6c6;padding:28px}
.surface{background:#566344;color:#fff}.concrete{background-color:#c4c1b7;border-color:#8d897d;background-image:radial-gradient(#64625766 1.5px,transparent 1.5px)}
.subbase{background:#8d897d;color:#fff}.soil{background:#594b3b;color:#fff}
.water-indicators{color:#566344}.layer small{opacity:.95}
.principles article{border-color:#c9c4b6}.number{color:#566344;font-weight:700}
.applications{background:#e5dfd2}
.application-grid{gap:0;border:1px solid #6f785b}
.application-card{background:#263122;border:0;border-top:5px solid #77834f;padding:40px}
.application-card.blue{background:#514736;border:0;border-top:5px solid #9c7656}
.application-no{color:#b4bf80;font-style:italic}.application-card.blue .application-no{color:#d1b38e}
.application-card p{color:#e5e4d7}.application-card .card-bottom{color:#eeebdf}
.application-card h3{font-size:clamp(1.8rem,2.7vw,2.45rem);margin-top:8px}
.tag{color:#d8deca;border-color:#aab49766;border-radius:0;font-weight:600}
.application-card.blue .tag{color:#e7d4bb;border-color:#c5ad8d66}
.card-rule{background:#b4ba9d55}
.future li{border-color:#bfb7a6}.future li>span:last-child{color:#626253}
.approach{background:#182219;color:#f7f3e8}
.approach .eyebrow,.steps article>span{color:#b4bf80}.approach .section-top>p,.steps p{color:#d5d8c9}
.steps article{border-top:2px solid #667357}
.questions details{border-color:#c9c4b6}.questions summary:after{color:#566344}
.project{background:#d7ccba;border-top:1px solid #baae99}
.checklist li{border-color:#b9ae99}.checklist li>span{color:#4e5d3e;font-weight:700;font-style:italic}
footer{background:#e8e0d0;border-top:3px solid #566344}
@media(max-width:1100px){.hero-copy{width:80%}h1{font-size:3.05rem}.hero-visual.has-photo:after{background:linear-gradient(90deg,#182219f5 0%,#182219ce 48%,#18221933 100%)}.header:after{left:4%;right:4%}}
@media(max-width:760px){.header:after{left:5%;right:5%}.header nav .nav-cta,.nav-cta:hover{background:var(--navy);color:var(--sand);padding:13px 16px;border:0;margin-top:4px}.menu-toggle{background:transparent;border-color:#bcb5a5}.hero,.hero-copy{min-height:605px}.hero-copy{width:100%;padding:45px 6% 78px}.hero-visual.has-photo:after{background:linear-gradient(90deg,#182219ee 0%,#182219bd 100%),linear-gradient(0deg,#30291b55,transparent)}h1{font-size:clamp(2rem,7.2vw,3.1rem);line-height:1.17}h2{font-size:2.1rem}.hero .eyebrow{letter-spacing:.1em;font-size:.875rem}.hero-actions{gap:22px}.button{font-size:.94rem;padding:17px 20px}.brand-slogan{letter-spacing:.025em;font-size:.875rem;margin-top:35px}.section{padding-top:58px;padding-bottom:58px}.intro-strip{padding-top:23px;padding-bottom:23px}.diagram{padding:20px;box-shadow:6px 6px 0 #ded6c6}.application-grid{gap:0}.application-card{padding:29px}.application-card h3{font-size:1.85rem}.application-card.blue{border-top-color:#9c7656}.future h3{font-size:1.65rem}}

/* The original logo green appears as a focused brand accent. */
:root{--brand-green:#4CA517}
.header:after,.line{background:var(--brand-green)}
.button.green{background:var(--brand-green);color:#182219;border-bottom-color:#376c15}
.button.green:hover{background:#65b62e}
.application-card:first-child{border-top-color:var(--brand-green)}
.brand-slogan span:nth-child(3){color:#6dc438}
footer{border-top-color:var(--brand-green)}
.contact{max-width:none;background:#263122;color:#f5f1e7;display:grid;grid-template-columns:1.25fr 1fr;gap:9%;align-items:center;border-top:3px solid var(--brand-green)}
.contact .eyebrow{color:#b4bf80}.contact h2{font-size:clamp(1.9rem,2.8vw,3rem)}.contact>div>p:last-child{color:#d4d8c9;max-width:600px;margin-bottom:0}
.contact-details{display:flex;flex-direction:column;align-items:flex-start;gap:16px}.contact-email{font-size:1.1rem;text-underline-offset:5px;font-weight:600;overflow-wrap:anywhere}.contact-details p{color:#c9cfbd;font-size:.875rem;margin:0}
@media(max-width:760px){.contact{grid-template-columns:1fr;gap:30px}.contact h2{font-size:1.85rem}.contact-email{font-size:1rem}}

/* A fresh, warm finish with no blue in the site palette. */
:root{--light:#ece6d9;--sand:#f3ecdd;--line:#d4cabb;--muted:#626557;--earth:#9c7656}
body{background:#faf8f2}
.header{background:#faf8f2}
.brand img{filter:url('#percon-earth-tone');mix-blend-mode:multiply}
.hero-photo{filter:grayscale(1) sepia(.38) saturate(.9) contrast(1.04)}
.hero-visual.has-photo:after{background:linear-gradient(90deg,#243321f5 0%,#243321dc 30%,#2433218c 54%,#3435200d 84%),linear-gradient(0deg,#76604333,transparent 70%)}
.hero h1{color:#fffdf3}.hero h1 em{color:#c9d59b}.hero-intro{color:#f0eee4}
.intro-strip{background:#34472b;color:#f4eedf}
.applications{background:#ece6d9}
.application-card{background:#34472b}.application-card.blue{background:#75624c}
.diagram{background:#f3ecdd;border-color:#d4cabb;box-shadow:8px 8px 0 #e5dccb}
.subbase{background:#8b8273}.soil{background:#76624c}
.approach{background:#283824}.contact{background:#34472b}
.project{background:#eee4d5}.checklist li{border-color:#d1c3ad}
footer{background:#faf8f2}
@media(max-width:1100px){.hero-visual.has-photo:after{background:linear-gradient(90deg,#243321f0 0%,#243321c4 48%,#34352025 100%)}}
@media(max-width:760px){.hero-visual.has-photo:after{background:linear-gradient(90deg,#243321e6 0%,#243321be 100%),linear-gradient(0deg,#76604333,transparent 70%)}.diagram{box-shadow:5px 5px 0 #e5dccb}}

.hero h1 .hero-expertise{display:block;font-size:clamp(1.3rem,1.9vw,1.85rem);line-height:1.4;letter-spacing:0;margin-top:18px}

/* Shorter project-led page. */
.application-card.earth{background:#75624c;border-top:5px solid #9c7656}
.application-card.earth .application-no{color:#ead4b5}
.card-top{margin-bottom:24px}
.application-card p{max-width:520px}
.simplified-drainage{margin-top:0;align-items:start;gap:10%}
.simplified-drainage .section-heading>p{margin-bottom:24px}
.project-link{display:inline-flex;align-items:center;gap:14px;font-weight:700;text-underline-offset:6px;font-size:.875rem}
.project-link span{color:#4e5d3e;font-size:1.2rem}
@media(max-width:760px){.simplified-drainage{gap:32px}.application-card .card-bottom{font-size:.875rem}}

/* Preserve the original blue droplets within the official logo. */
.logo-artwork{display:block;position:relative;isolation:isolate;mix-blend-mode:multiply}
.brand .logo-artwork img{mix-blend-mode:normal}
.brand .logo-water{position:absolute;inset:0;width:100%;height:100%;filter:none;pointer-events:none;clip-path:polygon(35.9% 50%,59.2% 50%,66.9% 40.5%,66.9% 61.5%,35.9% 61.5%)}

/* Sport and indoor floors lead; other applications follow. */
.application-card.indoor{background:#f3ecdd;color:var(--ink);border-top:5px solid #566344;scroll-margin-top:24px}
.application-card.indoor .application-no{color:#566344}
.application-card.indoor p{color:var(--muted)}
.application-card.indoor .card-rule{background:#c9c4b6}
.application-card.indoor .card-bottom{color:#34472b;font-weight:600}
.application-card.wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(210px,.8fr) minmax(0,1.7fr);gap:32px}
.application-card.wide .application-no{display:block;margin-bottom:14px}
.application-card.wide h3{margin:0}
.application-card.wide p{max-width:780px;margin-bottom:18px}
.application-card.wide .card-bottom{margin-bottom:0}
@media(max-width:760px){.application-card.wide{grid-template-columns:1fr;gap:20px}.application-card.wide .application-no{margin-bottom:10px}}

/* Project advice: a prominent action and compact, expandable tips. */
.button.advice-cta{align-items:center;justify-content:space-between;gap:22px;max-width:100%;min-height:68px;padding:18px 24px;font-size:1.1rem;box-shadow:0 7px 0 #18221933;border:1px solid #79bf4a;border-bottom:4px solid #376c15}
.advice-cta .cta-arrow{display:grid;place-items:center;flex:none;width:32px;height:32px;background:#182219;color:#fffdf3;font:500 1.5rem/1 var(--display)}
.button.advice-cta:hover{box-shadow:0 7px 0 #18221944;background:#65b62e}
.advice-faq{border-top:1px solid var(--line)}
.faq-intro>p:not(.eyebrow){color:var(--muted);max-width:460px;margin-bottom:24px}
.advice-faq .questions details{padding:23px 0}
.advice-faq .questions details:first-child{padding-top:4px}
.advice-faq .questions summary{line-height:1.5}
.advice-faq .questions summary:after{flex:none}
.advice-faq .questions p{line-height:1.8}
@media(max-width:760px){.button.advice-cta{font-size:1rem;min-height:64px;padding:17px 18px;gap:14px}.advice-cta .cta-arrow{width:28px;height:28px}.advice-faq .questions details:first-child{padding-top:20px}.advice-faq .questions details{padding:20px 0}}

.indoor-actions{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:18px}
.indoor-actions .project-link{min-height:44px}

/* Official reference logos link to standards and independent inspection. */
.norm-references{margin-top:42px;padding-top:30px;border-top:1px solid var(--line)}
.norm-heading h3{font:700 italic 1.5rem/1.3 var(--display);text-transform:uppercase;margin-bottom:10px}
.norm-heading p{color:var(--muted);margin-bottom:22px;max-width:700px}
.reference-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.reference-link{display:grid;grid-template-columns:minmax(100px,140px) minmax(0,1fr) 20px;align-items:center;gap:18px;min-height:132px;padding:22px;text-decoration:none;border:1px solid var(--line);background:#fffdf6}
.reference-link:hover{border-color:#566344}
.reference-link-noc{background:#34472b;color:#fffdf3;border-color:#34472b}
.reference-link-noc:hover{border-color:#4ca517}
.reference-logo{display:flex;align-items:center;min-width:0;height:70px}
.reference-logo img{display:block;width:100%;height:70px;object-fit:contain;object-position:left center}
.reference-copy{min-width:0;overflow-wrap:anywhere}
.reference-copy strong{display:block;font-size:1rem;line-height:1.4;margin-bottom:6px}
.reference-copy>span{font-size:.875rem;line-height:1.5;text-decoration:underline;text-underline-offset:4px}
.reference-arrow{font:600 1.6rem/1 var(--display);color:#566344}
.reference-link-noc .reference-arrow{color:#b4bf80}
@media(max-width:760px){.reference-grid{grid-template-columns:1fr;gap:14px}.reference-link{grid-template-columns:100px minmax(0,1fr) 20px;gap:12px;padding:18px;min-height:124px}.norm-references{margin-top:32px;padding-top:26px}.norm-heading h3{font-size:1.35rem}}

/* Concrete project guidance */
.questions{min-width:0}.faq-answer{padding-top:2px}.faq-facts{padding-left:22px;margin:16px 0;color:var(--muted)}.faq-facts li{padding-left:3px;margin:10px 0;line-height:1.75}.faq-answer strong{color:var(--ink)}.faq-measurements{width:100%;border-collapse:collapse;font-size:.9rem;margin:18px 0 20px;line-height:1.65}.faq-measurements caption{text-align:left;color:var(--muted);font-size:.82rem;margin-bottom:8px}.faq-measurements th,.faq-measurements td{padding:12px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}.faq-measurements thead{background:#eeecdf}.faq-measurements tbody th{width:23%;color:var(--ink)}.faq-measurements td{color:var(--muted)}.faq-example{padding:16px 18px;border-left:3px solid #4ca517;background:#f3f1e7}.questions .faq-sources{font-size:.82rem;line-height:1.85;margin-top:20px}.faq-sources>span{font-weight:700;color:var(--ink)}.faq-sources a{text-underline-offset:3px;overflow-wrap:anywhere}.faq-sources a:hover{color:#376c15}@media(max-width:760px){.faq-measurements th,.faq-measurements td{padding:10px 7px}.faq-measurements{font-size:.85rem}.faq-measurements tbody th{width:25%}.faq-example{padding:14px}.faq-facts{padding-left:20px}}

.quote-choice{border:0;margin:0;padding:0;color:#fffdf3;display:flex;flex-wrap:wrap;gap:12px 24px}.quote-choice legend{font-weight:700;font-size:1.05rem;padding:0;margin-bottom:12px}.quote-choice label{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}.quote-choice input{accent-color:#4ca517;width:18px;height:18px;margin:0}.quote-choice input:focus-visible{outline:3px solid #b4bf80;outline-offset:4px}