:root{--navy:#0c2852;--slate:#384b5d;--gold:#f5ae00;--warm:#7c746c;--light:#f7f8fa;--white:#fff;--ink:#172331;--shadow:0 16px 45px rgba(12,40,82,.10)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{font-family:"Open Sans",sans-serif;color:var(--ink);background:#fff;line-height:1.7;padding-top:82px}
h1,h2,h3,h4,h5,.navbar-brand,.btn{font-family:"Montserrat",sans-serif;font-weight:700;line-height:1.16}
h1{font-size:clamp(2.55rem,6vw,5.4rem);letter-spacing:-.045em}
h2{font-size:clamp(2rem,4vw,3.35rem);letter-spacing:-.035em}
h3{font-size:1.25rem;color:var(--navy)}
a{color:var(--navy)}
.section-pad{padding:clamp(4.5rem,9vw,7.5rem) 0}
.home-page .section-pad{padding:clamp(2.75rem,4vw,4.25rem) 0}
.dockdeck-page .section-pad{padding:clamp(3rem,5vw,4.5rem) 0}
.dockdeck-page .section-pad + .section-pad{padding-top:clamp(2.25rem,4vw,3.5rem)}
.diy-install-page .section-pad{padding:clamp(3rem,5vw,4.5rem) 0}
.diy-install-page .section-pad + .section-pad{padding-top:clamp(2.25rem,4vw,3.5rem)}
.diy-install-page .cta-band{padding:clamp(2.75rem,4vw,3.75rem) 0}
.home-page .cta-band{padding:clamp(2.75rem,4vw,3.75rem) 0}
.home-page .dealer-note{padding:clamp(2rem,3vw,2.75rem) 0}
.section-soft{background:var(--light)}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;color:var(--navy);font-family:"Montserrat",sans-serif;font-size:.76rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1rem}
.eyebrow:before{content:"";width:30px;height:3px;background:var(--gold)}
.section-title{color:var(--navy);margin-bottom:1.25rem}
.title-rule{width:66px;height:5px;background:var(--gold);border-radius:9px;margin:1.35rem 0 1.7rem}
.lead-copy{font-size:1.08rem;color:#526274;max-width:720px}
.site-nav{background:rgba(255,255,255,.97);box-shadow:0 6px 24px rgba(12,40,82,.08);min-height:82px;backdrop-filter:blur(12px)}
.navbar-brand img{width:170px;height:58px;object-fit:contain}
.navbar-nav .nav-link{color:var(--slate);font-family:"Montserrat",sans-serif;font-size:.78rem;font-weight:700;padding:.8rem .62rem!important}
.site-nav .dropdown-menu{border:0;border-radius:6px;box-shadow:var(--shadow);padding:.45rem;margin-top:.35rem}
.site-nav .dropdown-item{color:var(--slate);font-family:"Montserrat",sans-serif;font-size:.76rem;font-weight:700;border-radius:4px;padding:.55rem .75rem}
.site-nav .dropdown-item:hover,.site-nav .dropdown-item:focus{background:#fff3cf;color:var(--navy)}
.site-nav .dropdown:hover>.dropdown-menu,.site-nav .dropdown:focus-within>.dropdown-menu{display:block}
.site-nav .dropdown:hover>.dropdown-toggle,.site-nav .dropdown:focus-within>.dropdown-toggle{color:var(--navy)}
.navbar-nav .nav-link:hover,.navbar-nav .nav-link.active{color:var(--navy)}
.navbar-nav .nav-link.active{position:relative}
.navbar-nav .nav-link.active:after{content:"";position:absolute;left:.62rem;right:.62rem;bottom:.35rem;height:2px;background:var(--gold)}
.btn{border-radius:4px;padding:.85rem 1.25rem;font-size:.79rem;letter-spacing:.025em;text-transform:uppercase}
.btn-gold{background:var(--gold);border:2px solid var(--gold);color:var(--navy)}
.btn-gold:hover{background:#ffc02c;border-color:#ffc02c;color:var(--navy);transform:translateY(-2px)}
.btn-outline-light:hover{color:var(--navy)}
.btn-outline-navy{border:2px solid var(--navy);color:var(--navy)}
.btn-outline-navy:hover{background:var(--navy);color:white}
.home-hero{padding:clamp(2rem,5vw,4.5rem) 0;background:linear-gradient(180deg,#eef3f7 0%,#f7f8fa 100%)}
.hero-panel{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 22px 65px rgba(12,40,82,.13)}
.hero-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(2.25rem,5vw,5rem)}
.hero-copy h1{font-size:clamp(2.45rem,4.6vw,4.45rem);color:var(--navy);max-width:700px}
.hero-lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:#5b6978;max-width:600px;margin:1.5rem 0 0}
.hero-kicker{font-family:"Montserrat",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:#9a6c00!important;font-size:.78rem!important}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
.hero-media{position:relative;height:100%;min-height:560px;overflow:hidden}
.hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(6,24,49,.46))}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .6s ease}
.hero-panel:hover .hero-media img{transform:scale(1.02)}
.hero-image-label{position:absolute;z-index:1;left:1.6rem;bottom:1.35rem;color:#fff;font:700 .78rem "Montserrat",sans-serif;letter-spacing:.12em;text-transform:uppercase}
.hero-specs{display:grid;grid-template-columns:repeat(4,1fr);background:var(--navy);color:#fff}
.hero-specs div{display:flex;align-items:baseline;justify-content:center;gap:.55rem;padding:1.25rem 1rem;border-right:1px solid rgba(255,255,255,.18)}
.hero-specs div:last-child{border-right:0}.hero-specs strong{color:var(--gold);font:800 1.1rem "Montserrat",sans-serif}.hero-specs span{font:600 .76rem "Montserrat",sans-serif;text-transform:uppercase;letter-spacing:.06em}
.dealer-note{padding:clamp(2.25rem,4vw,3.25rem) 0;background:#eaf0f5;border-top:4px solid var(--gold)}.dealer-note h2{font-size:clamp(1.45rem,2.4vw,2rem);color:var(--navy);margin:.65rem 0 0}.dealer-note p{font-size:1rem;color:#526274;margin:0}.dealer-badge{display:inline-flex;align-items:center;gap:.5rem;color:#8a6100;font:700 .72rem "Montserrat",sans-serif;letter-spacing:.1em;text-transform:uppercase}.dealer-badge i{font-size:1rem;color:var(--gold)}
.page-hero{padding:clamp(4.5rem,8vw,7rem) 0;background:linear-gradient(125deg,var(--navy),#173d6e);color:#fff;position:relative;overflow:hidden}
.page-hero-video{background:var(--navy);min-height:clamp(390px,48vw,620px);display:flex;align-items:center}
.page-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.page-hero-video:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,29,59,.68),rgba(8,29,59,.30));z-index:1}
.page-hero.page-hero-video:after{content:none}
.page-hero-video .container{z-index:2}
.page-hero:after{content:"";position:absolute;width:360px;height:360px;right:-100px;top:-180px;border:55px solid rgba(245,174,0,.14);border-radius:50%}
.page-hero h1{font-size:clamp(2.5rem,5vw,4.6rem);max-width:900px}
.diy-install-hero{background:linear-gradient(90deg,rgba(8,29,59,.76),rgba(8,29,59,.28)),url(../images/strong-durable.jpg) center/cover;min-height:clamp(390px,44vw,560px);display:flex;align-items:center}
.diy-install-hero:after{content:none}
.page-hero p{font-size:1.12rem;max-width:700px;color:#d8e1eb}
.card-clean{height:100%;background:#fff;border:1px solid #e7ebef;border-radius:8px;overflow:hidden;box-shadow:0 8px 25px rgba(12,40,82,.06);transition:.25s ease}
.card-clean:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.card-clean .card-body{padding:1.75rem}
.feature-img{height:190px;width:100%;object-fit:cover}
.feature-icon{width:52px;height:52px;display:grid;place-items:center;background:#fff3cf;color:var(--navy);border-radius:50%;font-size:1.3rem;margin-bottom:1.1rem}
.snapshot{background:var(--navy);color:white;border-radius:12px;padding:clamp(2rem,5vw,4rem);position:relative;overflow:hidden}
.snapshot h2,.snapshot h3{color:white}.snapshot p{color:#cbd8e5}
.check-list{list-style:none;padding:0;margin:0;columns:2;column-gap:2rem}
.check-list li{break-inside:avoid;margin:.65rem 0;padding-left:1.7rem;position:relative;color:#e2e9ef}
.check-list li:before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:bold}
.ratio.video-frame{background:linear-gradient(140deg,#e9edf2,#cad3dd);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
.install-image-frame{background:#e9edf2;border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
.install-image-frame img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.video-poster{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(rgba(12,40,82,.20),rgba(12,40,82,.55)),url('../images/deck-whitechair.jpg') center/cover;text-decoration:none}
.diy-install-poster{background:linear-gradient(rgba(12,40,82,.18),rgba(12,40,82,.42)),url('../images/DIY-install-pic.png') center/cover}
.video-modal .modal-content{border:0;border-radius:8px;overflow:hidden;box-shadow:0 24px 80px rgba(8,29,59,.28)}
.video-modal .modal-header{border:0;padding:1rem 1.25rem}
.video-modal .modal-body{padding:0;background:#081d3b}
.video-modal iframe{width:100%;height:100%;border:0}


.play{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;color:var(--navy);background:var(--gold);font-size:1.55rem;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.swatch{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.75rem;font-family:"Montserrat",sans-serif;font-size:.78rem;font-weight:700;color:var(--slate)}
.swatch-circle{width:82px;height:82px;border-radius:50%;border:6px solid white;box-shadow:0 5px 18px rgba(12,40,82,.18);position:relative;overflow:hidden;display:block;object-fit:cover}
.swatch-circle.cross:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 5px,rgba(12,40,82,.1) 5px 6px),repeating-linear-gradient(-45deg,transparent 0 5px,rgba(12,40,82,.08) 5px 6px)}
.swatch-circle.wood:after{content:"";position:absolute;inset:0;background:repeating-radial-gradient(ellipse at 30% 100%,transparent 0 8px,rgba(57,46,34,.12) 9px 10px)}
.white{background:#f2f2ed}.gray{background:#9ba0a1}.latte{background:#c2ad8c}.tan{background:#ad8c63}
.cta-band{background:linear-gradient(105deg,var(--gold),#ffc736);color:var(--navy);padding:clamp(3rem,6vw,5rem) 0}
.cta-band h2{margin-bottom:.65rem}.cta-band .btn{background:var(--navy);color:#fff;border:2px solid var(--navy)}
.stat{border-left:4px solid var(--gold);padding-left:1.1rem}.stat strong{display:block;color:var(--navy);font:700 1.35rem "Montserrat",sans-serif}
.panel-details-title{font-size:clamp(2.15rem,3.4vw,3.2rem)}
.panel-spec-visual{margin:0;background:#fff;border:1px solid #e2e7ec;border-radius:8px;overflow:hidden;box-shadow:0 10px 28px rgba(12,40,82,.08)}
.panel-spec-visual-large img{display:block;width:100%;height:clamp(360px,34vw,500px);object-fit:contain;background:#fff}
.panel-render-copy{padding:1.2rem 1.35rem;margin:0;border-top:1px solid #edf0f3;color:#526274;font-size:1rem;line-height:1.65}
.panel-details-section .spec-table td,.panel-details-section .spec-table th{padding:.85rem 1rem}
.panel-details-table{max-width:100%}
.spec-table{border-radius:8px;overflow:hidden;box-shadow:var(--shadow)}
.spec-table th{background:var(--navy);color:#fff}.spec-table td,.spec-table th{padding:1rem 1.2rem}
.application{padding:1.5rem;border-radius:8px;background:#fff;border:1px solid #e5e9ed;height:100%}
.resource-card{display:flex;flex-direction:column;height:100%;padding:1.7rem;background:#fff;border:1px solid #e3e8ed;border-top:5px solid var(--gold);border-radius:6px;text-decoration:none;transition:.25s}
.resource-card:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.resource-card i{font-size:2rem;color:var(--gold);margin-bottom:1rem}.resource-card p{color:#667586;flex-grow:1}.resource-card span{font-family:"Montserrat",sans-serif;font-weight:700;font-size:.78rem;text-transform:uppercase}
.gallery-item{position:relative;border-radius:8px;overflow:hidden;height:330px;background:#dbe1e6}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:.45s}.gallery-item:hover img{transform:scale(1.045)}
.gallery-caption{position:absolute;inset:auto 0 0;padding:3rem 1.4rem 1.2rem;background:linear-gradient(transparent,rgba(5,22,45,.9));color:#fff;font:700 1.05rem "Montserrat",sans-serif}
.installer-card{border-top:5px solid var(--gold)}
.installer-card dl{margin:0}.installer-card dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--warm);margin-top:.7rem}.installer-card dd{margin:0;color:var(--slate)}
.disclaimer{background:#fff8e6;border-left:5px solid var(--gold);padding:1.35rem;border-radius:4px;color:#5e5547}
.form-panel{background:#fff;padding:clamp(1.5rem,4vw,3rem);border-radius:10px;box-shadow:var(--shadow)}
.form-label{font-family:"Montserrat",sans-serif;font-size:.78rem;font-weight:700;color:var(--navy)}
.form-control,.form-select{border:1px solid #cfd7df;border-radius:4px;padding:.82rem}.form-control:focus,.form-select:focus{border-color:var(--gold);box-shadow:0 0 0 .2rem rgba(245,174,0,.18)}
.contact-panel{background:var(--navy);color:#fff;border-radius:10px;padding:2.3rem;height:100%}.contact-panel h3{color:#fff}.contact-panel a{color:#fff;text-decoration:none}.contact-line{display:flex;gap:1rem;margin:1.25rem 0}.contact-line i{color:var(--gold);font-size:1.2rem;margin-top:.25rem}
.site-footer{background:#081d3b;color:#c8d4df;padding:4.5rem 0 1.5rem}.footer-logo{width:250px;max-width:100%;background:#fff;border-radius:4px;padding:.4rem;margin-bottom:1.25rem}.site-footer h3{color:#fff;font-size:.95rem}.site-footer a{color:#c8d4df;text-decoration:none;overflow-wrap:anywhere}.site-footer a:hover{color:var(--gold)}.footer-links{list-style:none;padding:0}.footer-links li{margin:.45rem 0}.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:2.5rem;padding-top:1.3rem;font-size:.76rem;color:#92a3b3}.footer-credit{display:block;margin-top:.35rem}.footer-credit a{color:var(--gold);font-weight:700}
.empty-state{background:linear-gradient(135deg,#e8edf1,#cbd5de);display:grid;place-items:center;color:var(--slate);font-family:"Montserrat",sans-serif;font-weight:700}
.guide-card{gap:.75rem}
.guide-card h3{font-size:1.18rem;margin-bottom:.35rem}
.guide-card .btn{align-self:flex-start;margin-top:auto}
.finish-card h3{color:var(--gold);font-size:1.35rem;margin-bottom:.85rem}
.finish-card p{color:#5e6670;margin-bottom:0}
.finish-media{height:245px;background:#fff;display:grid;place-items:center;padding:1.4rem;border-bottom:1px solid #edf0f3}
.finish-media img{width:100%;height:100%;object-fit:contain}
.component-visual{position:relative;overflow:hidden;background:linear-gradient(145deg,#fff,#f2f4f6)}
.component-visual:before,.component-visual:after,.component-visual span{content:"";position:absolute;left:50%;top:50%;display:block;background:linear-gradient(90deg,#f9fafb,#dce1e5);border:1px solid #cfd6dc;box-shadow:0 12px 26px rgba(12,40,82,.09)}
.component-channel:before{width:66%;height:18px;transform:translate(-50%,-46px) skewX(-13deg)}
.component-channel:after{width:66%;height:18px;transform:translate(-50%,32px) skewX(-13deg)}
.component-channel span{width:18px;height:112px;transform:translate(-50%,-50%) skewX(-13deg)}
.component-htrim:before{width:72%;height:16px;transform:translate(-50%,-44px) skewX(-13deg)}
.component-htrim:after{width:72%;height:16px;transform:translate(-50%,44px) skewX(-13deg)}
.component-htrim span{width:22px;height:120px;transform:translate(-50%,-50%) skewX(-13deg)}
@media(max-width:1199.98px){.navbar-nav .nav-link{padding:.75rem .42rem!important;font-size:.7rem}.navbar .btn{padding:.7rem .8rem}}
@media(max-width:991.98px){body{padding-top:74px}.site-nav{min-height:74px}.navbar-collapse{padding:1rem 0 1.2rem}.navbar-nav .nav-link{font-size:.82rem;padding:.65rem 0!important}.navbar-nav .nav-link.active:after{left:0;right:auto;width:30px;bottom:.25rem}.hero-media{min-height:430px}.check-list{columns:1}}
@media(max-width:767.98px){.hero-specs{grid-template-columns:repeat(2,1fr)}.hero-specs div:nth-child(2){border-right:0}.hero-specs div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.18)}}
@media(max-width:575.98px){.section-pad{padding:4rem 0}.row.g-5{--bs-gutter-x:1.5rem}.home-hero{padding:1rem 0 2.5rem}.hero-panel{border-radius:9px}.hero-copy{padding:2rem 1.35rem 2.35rem}.hero-copy h1{font-size:2.35rem}.hero-actions .btn{width:100%}.hero-media{min-height:315px}.hero-image-label{left:1rem;bottom:.9rem}.hero-specs div{align-items:center;flex-direction:column;gap:.15rem;padding:1rem .5rem;text-align:center}.hero-specs span{font-size:.66rem}.swatch-circle{width:68px;height:68px}.gallery-item{height:270px}}
@media(max-width:575.98px){.dockdeck-page .section-pad{padding:3rem 0}.dockdeck-page .section-pad + .section-pad{padding-top:2.25rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}