/* DeckStainDealer.com - bold TWP red / black / white */
:root{
  --blk:#0f0f10; --blk2:#1c1c1f; --red:#d3212b; --red-d:#a8141c; --red-l:#fdeaea;
  --ink:#1a1a1c; --muted:#5f6068; --paper:#f4f3ef; --white:#fff; --line:#e2e0da; --gold:#f3c318;
  --hd:"Barlow Condensed","Arial Narrow",Impact,sans-serif; --sans:"Barlow",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  --cut:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17.5px/1.65 var(--sans)}
img{max-width:100%;height:auto;display:block}
a{color:var(--red-d)}
a:hover{color:var(--blk)}
h1,h2,h3{font-family:var(--hd);font-weight:800;color:var(--blk);line-height:1.02;text-transform:uppercase;letter-spacing:.2px;margin:1.6em 0 .45em}
h2{font-size:2.05rem;position:relative;padding-left:18px}
h2:before{content:"";position:absolute;left:0;top:.08em;bottom:.12em;width:7px;background:var(--red);transform:skewX(-12deg)}
h3{font-size:1.35rem}
p{margin:0 0 1em}
.wrap{max-width:1220px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}.skip:focus{left:10px;top:10px;background:#fff;padding:8px;z-index:99}
.muted{color:var(--muted);font-size:.95rem}

/* utility + header */
.util{background:var(--red);color:#fff;font-size:.86rem;font-weight:500}
.util .wrap{display:flex;justify-content:space-between;gap:12px;padding-top:5px;padding-bottom:5px}
.util p{margin:0}.util a{color:#fff;font-weight:700;text-decoration:none}.util a:hover{text-decoration:underline}
.hdr{background:var(--blk);position:sticky;top:0;z-index:50;box-shadow:0 3px 0 var(--red)}
.hdr-in{display:flex;align-items:center;gap:18px;min-height:76px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;flex-shrink:0}
.brand-mark{background:var(--red);color:#fff;font:italic 800 22px/1 var(--hd);padding:12px 12px 10px;clip-path:polygon(0 0,100% 0,100% 72%,80% 100%,0 100%);letter-spacing:1px}
.brand-logo{height:50px;width:auto;border-radius:3px}
.brand-txt b{display:block;font:800 1.7rem/1 var(--hd);text-transform:uppercase;letter-spacing:.5px}
.brand-txt b i{font-style:normal;color:var(--red)}
.brand-txt small{display:block;font-size:.74rem;color:#a9a9b0;letter-spacing:2px;text-transform:uppercase;margin-top:3px}
.nav{margin-left:auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:0;flex-wrap:nowrap;white-space:nowrap}
.nav a{display:block;padding:10px 11px;text-decoration:none;color:#fff;font:600 1.12rem/1 var(--hd);text-transform:uppercase;letter-spacing:.6px;border-bottom:3px solid transparent}
.nav a:hover,.nav a[aria-current]{color:#fff;border-bottom-color:var(--red)}
.menu-btn{display:none;margin-left:auto;background:var(--red);color:#fff;border:0;padding:10px 16px;font:700 1.05rem var(--hd);text-transform:uppercase;letter-spacing:1px}
.hdr-cta{flex-shrink:0}

/* buttons */
.btn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;font:800 1.1rem/1 var(--hd);text-transform:uppercase;letter-spacing:1px;padding:14px 24px;border:0;cursor:pointer;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);transition:background .15s}
.btn:hover{background:var(--red-d);color:#fff}
.btn-alt{background:var(--blk)}.btn-alt:hover{background:#333}
.btn-ghost{background:transparent;box-shadow:inset 0 0 0 2px #fff;clip-path:none}.btn-ghost:hover{background:#fff;color:var(--blk)}
.btn-sm{padding:9px 16px;font-size:.98rem;--cut:9px}
.btn-block{display:block;text-align:center;margin-top:14px}
.btns .btn{margin:0 8px 8px 0}

/* hero */
.hero{position:relative;background:var(--blk);color:#fff;overflow:hidden}
.hero-stage{position:absolute;right:0;top:0;bottom:0;width:50%;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:7px;padding:34px 0 34px 70px}
.planks-h{font:700 .9rem var(--hd);text-transform:uppercase;letter-spacing:3px;color:#8d8d94;margin:0 0 6px 40px}
.plank{--c:#ae6f3b;position:relative;display:flex;align-items:center;gap:14px;height:46px;padding:0 24px 0 40px;text-decoration:none;color:#fff;transform:skewX(-12.5deg);transform-origin:left;
  background:
    repeating-linear-gradient(180deg,rgba(0,0,0,.10) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(180deg,rgba(255,255,255,.06) 0 2px,transparent 2px 13px),
    linear-gradient(90deg,rgba(255,255,255,.14),rgba(0,0,0,.28)),
    var(--c);
  box-shadow:0 6px 14px rgba(0,0,0,.45),inset 0 -3px 0 rgba(0,0,0,.25);transition:transform .2s,margin .2s}
.plank:nth-child(odd){margin-left:22px}
.plank:hover{transform:skewX(-12.5deg) translateX(-14px);color:#fff}
.plank span,.plank b{transform:skewX(12.5deg)}
.plank span{font:italic 800 1.7rem/1 var(--hd);min-width:52px;text-shadow:0 2px 4px rgba(0,0,0,.4)}
.plank b{font:700 1.1rem var(--hd);text-transform:uppercase;letter-spacing:1.5px;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.hero:before{content:"";position:absolute;top:0;bottom:0;left:calc(46% - 8px);width:34px;background:var(--red);transform:skewX(-12.5deg);z-index:0}
.hero-in{position:relative;z-index:2;padding:84px 20px 88px}
.eyebrow{display:inline-block;background:var(--red);color:#fff;font:700 .95rem/1 var(--hd);text-transform:uppercase;letter-spacing:2.5px;padding:7px 12px;margin:0 0 18px}
.hero h1{color:#fff;font-size:clamp(2.8rem,5.4vw,4.6rem);margin:0 0 18px;max-width:560px;line-height:.92}
.hero h1 span{display:block;color:var(--red);font-style:italic}
.lede{font-size:1.14rem;max-width:470px;color:#d8d8dc}
.hero-btns .btn{margin:6px 12px 6px 0}
.ticker{background:var(--red);color:#fff;overflow:hidden}
.ticker .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 26px;padding-top:12px;padding-bottom:12px}
.ticker span{font:700 1.05rem/1.2 var(--hd);text-transform:uppercase;letter-spacing:1px}
.ticker span:before{content:"\25B2";display:inline-block;transform:rotate(90deg);font-size:.7em;margin-right:10px;color:var(--blk)}

/* title bar */
.titlebar{background:var(--blk);color:#fff;padding:34px 0 36px;position:relative;overflow:hidden;border-bottom:6px solid var(--red)}
.titlebar:after{content:"";position:absolute;right:-60px;top:-20px;bottom:-20px;width:320px;background:repeating-linear-gradient(-60deg,var(--red) 0 16px,transparent 16px 34px);opacity:.9}
.titlebar .wrap{position:relative;z-index:1}
.titlebar h1{color:#fff;margin:8px 0 0;font-size:clamp(2.2rem,5vw,3.6rem);line-height:.95;max-width:820px}
.bc ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:.84rem;color:#a9a9b0;text-transform:uppercase;letter-spacing:1px}
.bc li+li:before{content:"/";margin-right:6px;color:var(--red)}
.bc a{color:#fff;text-decoration:none}

/* layout */
main{padding:10px 0 60px}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:42px;align-items:start}
.content>:first-child{margin-top:32px}
.side{margin-top:32px}
.card{background:#fff;border:0;border-top:5px solid var(--blk);padding:18px 20px 20px;margin-bottom:20px;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.card-h{font-size:1.35rem;margin:0 0 10px;padding-left:0}
.card-h:before{display:none}
.card p{font-size:.96rem}
.buylist{list-style:none;margin:0;padding:0}
.buylist a{display:flex;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.buylist img{width:56px;height:56px;object-fit:contain;background:var(--paper)}
.buylist span{font:800 1.15rem/1.05 var(--hd);text-transform:uppercase}
.buylist small{display:block;font:400 .82rem var(--sans);text-transform:none;color:var(--muted);margin-top:3px}
.buylist a:hover span{color:var(--red)}

/* content blocks */
.kicker{color:var(--red);font:700 1rem var(--hd);text-transform:uppercase;letter-spacing:2.5px;margin:32px 0 0}
.intro h2{margin-top:.15em;font-size:2.7rem}
.lead{font-size:1.15rem}
.big{font:800 1.6rem/1.1 var(--hd);text-transform:uppercase;color:var(--blk)}
.red{color:var(--red)}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:28px 0}
.pcard{position:relative;background:#fff;padding:22px 22px 20px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.06);border-bottom:5px solid var(--blk);transition:transform .15s,border-color .15s}
.pcard:hover{transform:translateY(-4px);border-bottom-color:var(--red)}
.pnum{position:absolute;right:-6px;top:-14px;font:italic 800 6.2rem/1 var(--hd);color:transparent;-webkit-text-stroke:2px var(--red);opacity:.35;pointer-events:none}
.pimg{align-self:flex-start;background:var(--paper);padding:10px;margin-bottom:12px;position:relative}
.pcard img{width:118px;height:118px;object-fit:contain}
.pcard h3{margin:.1em 0 .4em;font-size:1.45rem}.pcard h3 a{color:var(--blk);text-decoration:none}
.pcard p{font-size:.95rem}
.pcard-a{margin-top:auto;display:flex;justify-content:space-between;align-items:center}
.pcard-a>a:first-child{font-weight:700;text-transform:uppercase;font-size:.85rem;letter-spacing:1px;color:var(--blk)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);background:var(--blk);color:#fff;margin:30px 0;clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}
.stats div{padding:22px 18px;border-right:1px solid #2c2c30}
.stats div:last-child{border-right:0}
.stats b{display:block;font:italic 800 3.2rem/1 var(--hd);color:var(--red)}
.stats b small{font-size:.45em;margin-left:3px;color:#fff}
.stats span{display:block;font:600 .95rem var(--hd);text-transform:uppercase;letter-spacing:1px;color:#ccc;margin-top:6px}
figure{margin:26px 0}
figcaption{font-size:.88rem;color:var(--muted);margin-top:6px}
.wide img{width:100%;clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.split figure img{clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:32px}
ul.feat,ul.ticks,ul.plain{padding:0;list-style:none}
ul.feat li,ul.ticks li{position:relative;padding-left:30px;margin-bottom:9px}
ul.feat li:before{content:"";position:absolute;left:2px;top:.42em;width:14px;height:14px;background:var(--red);clip-path:polygon(0 0,100% 50%,0 100%)}
ul.ticks li:before{content:"\2714";position:absolute;left:3px;color:var(--red);font-weight:700}
ul.plain li{margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.chips{list-style:none;padding:0;margin:16px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.chips li{background:#fff;padding:0 0 8px;font:700 .95rem/1.15 var(--hd);text-transform:uppercase;letter-spacing:.4px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,.05)}
.chips img{width:100%;height:48px;object-fit:cover;margin-bottom:8px}
.alert{background:var(--blk);color:#fff;padding:18px 22px;margin:22px 0;border-left:8px solid var(--red)}
.alert-h{color:#fff;font:800 1.5rem/1.05 var(--hd);text-transform:uppercase;margin-bottom:6px}
.alert-h:before{content:"!";display:inline-grid;place-items:center;width:28px;height:28px;background:var(--red);margin-right:10px;font-style:italic}
.alert-states{color:#ffb3b6;font-weight:500}
.alert a.btn{margin-top:4px}
.note{background:#fff;border-left:8px solid var(--gold);padding:14px 18px;margin:22px 0;box-shadow:0 4px 12px rgba(0,0,0,.05)}
.callout{background:var(--red-l);border-left:6px solid var(--red);padding:12px 16px;color:var(--blk)}
.prod-top{display:grid;grid-template-columns:230px 1fr;gap:30px;align-items:center;background:#fff;padding:24px;box-shadow:0 8px 24px rgba(0,0,0,.06);border-top:6px solid var(--red)}
.prod-top h2{margin-top:0}
.prod-img{background:var(--paper);padding:16px}
.prod-img img{margin:0 auto;max-height:260px;width:auto}
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:20px 0;background:var(--blk)}
.specs div{padding:14px 16px;border-right:1px solid #2c2c30;border-bottom:1px solid #2c2c30}
.specs dt{font:700 .8rem var(--hd);text-transform:uppercase;letter-spacing:1.5px;color:var(--red)}
.specs dd{margin:3px 0 0;font:600 1.12rem/1.2 var(--hd);color:#fff}
.steps{padding-left:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:4px 0 10px 54px;margin-bottom:6px}
.steps li:before{content:counter(s);position:absolute;left:0;top:0;width:38px;height:38px;display:grid;place-items:center;background:var(--red);color:#fff;font:italic 800 1.35rem var(--hd)}
.faq details{background:#fff;margin-bottom:8px;padding:0 18px;border-left:5px solid var(--blk)}
.faq details[open]{border-left-color:var(--red)}
.faq summary{cursor:pointer;font:700 1.18rem var(--hd);text-transform:uppercase;letter-spacing:.3px;padding:13px 0;color:var(--blk)}
.faq p{margin-top:0}
.tags{font-size:.85rem;color:var(--muted);font-style:italic}
.linkgrp{border-bottom:1px solid var(--line);padding:8px 0 10px}
.linkgrp ul{margin:0;padding-left:20px}
.colorlist{columns:2;padding-left:20px}
.tbl{width:100%;border-collapse:collapse;margin:14px 0;font-size:.95rem;background:#fff}
.tbl th{background:var(--blk);color:#fff;text-align:left;padding:10px 12px;font:700 1rem var(--hd);text-transform:uppercase;letter-spacing:1px}
.tbl td{padding:8px 12px;border-bottom:1px solid var(--line)}
.tbl tr:nth-child(even) td{background:#fafaf8}

/* dealer locations */
.jump{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 10px}
.jump a{font:600 .95rem var(--hd);text-transform:uppercase;letter-spacing:.5px;background:var(--blk);color:#fff;padding:6px 11px;text-decoration:none}
.jump a:hover{background:var(--red)}
.st{background:#fff;padding:6px 22px 14px;margin:14px 0;scroll-margin-top:100px;border-left:6px solid var(--blk)}
.st:target{border-left-color:var(--red)}
.st h2{font-size:1.6rem;margin:.7em 0 .3em;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-left:0}
.st h2:before{display:none}
.st p{font-size:.97rem}
.pill{font:700 .78rem var(--hd);background:var(--blk);color:#fff;padding:4px 9px;text-transform:uppercase;letter-spacing:1px}
.pill-voc{background:var(--red)}
.cities{list-style:none;padding:0;margin:0 0 6px;display:flex;flex-wrap:wrap;gap:6px}
.cities li{background:var(--paper);padding:3px 10px;font-size:.92rem;font-weight:500}

/* form */
.form{background:#fff;padding:24px;margin:20px 0;border-top:6px solid var(--red);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.form label{display:block;font:700 1rem var(--hd);text-transform:uppercase;letter-spacing:.8px;margin-bottom:14px}
.form input,.form select,.form textarea{display:block;width:100%;margin-top:6px;padding:11px 12px;border:2px solid #d8d6d0;border-radius:0;font:1rem var(--sans);background:#fff;text-transform:none;letter-spacing:0}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--red)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hp{position:absolute!important;left:-9999px!important}
.form-err{background:var(--red-l);color:var(--red-d);padding:10px;font-weight:700}

/* footer */
.ftr{background:var(--blk);color:#b8b8be;padding:50px 0 0;font-size:.95rem;border-top:6px solid var(--red)}
.ftr a{color:#fff;text-decoration:none}.ftr a:hover{color:var(--red)}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
.ftr-h{font:800 1.3rem var(--hd);text-transform:uppercase;color:#fff;margin-bottom:12px;letter-spacing:.5px}
.ftr-h:after{content:"";display:block;width:40px;height:4px;background:var(--red);margin-top:6px;transform:skewX(-20deg)}
.ftr ul{list-style:none;margin:0;padding:0}.ftr li{margin-bottom:7px}
.tsd img{max-width:220px;margin-top:12px}
.legal{border-top:1px solid #2a2a2e;margin-top:34px;padding-top:16px;padding-bottom:22px;font-size:.8rem;color:#85858c}

@media (max-width:1100px){
  .cols{grid-template-columns:1fr}
  .hdr-cta{display:none}
  .menu-btn{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--blk);border-top:3px solid var(--red);padding:8px 20px 16px}
  .nav.open{display:block}
  .nav ul{flex-direction:column}
  .nav a{padding:12px 0;border-bottom:1px solid #2a2a2e}
  .hdr-in{position:relative}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .hero-stage{position:relative;width:100%;padding:10px 20px 40px 30px;gap:6px}
  .plank{height:40px}
  .planks-h{margin-left:20px}
  .hero:before{display:none}
  .hero{display:flex;flex-direction:column}
  .hero-in{order:-1;padding-bottom:10px}
}
@media (max-width:680px){
  body{font-size:16.5px}
  h2{font-size:1.7rem}
  .util .wrap{flex-direction:column;gap:2px}
  .brand-txt b{font-size:1.35rem}
  .brand-txt small{display:none}
  .brand-logo{height:40px}
  .pgrid,.split,.two,.row2{grid-template-columns:1fr}
  .prod-top{grid-template-columns:1fr}
  .specs{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr}
  .stats div{border-bottom:1px solid #2c2c30}
  .ftr-grid{grid-template-columns:1fr}
  .hero-in{padding:56px 20px 60px}
  .titlebar:after{width:140px;opacity:.5}
  .ticker span{font-size:.92rem}
  .colorlist{columns:1}
}