/* ============================================================
   SOUTH COAST SHINGLE — site.css
   Brand: white / black / #ED1C24 (sampled from logo)
   Register: hard-working supply yard. No luxury styling.
   ============================================================ */
:root{
  --white:#FFFFFF;
  --off:#F6F6F6;
  --black:#121212;
  --black-2:#1D1D1D;
  --red:#ED1C24;
  --red-d:#C8141B;
  --gray:#5E5E5E;
  --line:#E4E4E4;
  --line-d:#D2D2D2;
  --ease:cubic-bezier(.23,1,.32,1);
  --maxw:1280px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--white);color:var(--black);font-family:'Barlow',system-ui,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.cond{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase}
.eyebrow{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:15px 26px;border-radius:4px;cursor:pointer;border:2px solid transparent;white-space:nowrap;transition:transform 150ms var(--ease),background 200ms ease,color 200ms ease,border-color 200ms ease}
.btn:active{transform:scale(.97)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-d)}
.btn-black{background:var(--black);color:#fff}
.btn-black:hover{background:#000}
.btn-line{background:transparent;color:var(--black);border-color:var(--black)}
.btn-line:hover{background:var(--black);color:#fff}
.btn-white{background:#fff;color:var(--black)}
.btn-white:hover{background:var(--off)}
.btn .arr{transition:transform 200ms var(--ease)}
@media(hover:hover){.btn:hover .arr{transform:translateX(4px)}}
.btn[disabled],.btn.disabled{opacity:.5;pointer-events:none}

/* ---------- top bar ---------- */
.topbar{background:var(--black);color:#fff}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:40px;font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.topbar .l{display:flex;gap:24px}
.topbar .l span b{color:var(--red)}
.topbar .r{display:flex;gap:22px;color:#bbb}
.topbar .r a:hover{color:#fff}
.topbar .r a#yardStatus{display:inline-flex;align-items:center;gap:7px}
.yd-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 auto}
.yd-open{background:#38C15E;animation:ydpulse 2.2s infinite}
.yd-closed{background:#8f8f8f}
@keyframes ydpulse{0%{box-shadow:0 0 0 0 rgba(56,193,94,.55)}70%{box-shadow:0 0 0 6px rgba(56,193,94,0)}100%{box-shadow:0 0 0 0 rgba(56,193,94,0)}}
@media(prefers-reduced-motion:reduce){.yd-open{animation:none}}
@media(max-width:760px){
  .topbar .r{display:none}
  .topbar .wrap{height:auto;padding:0}
  .topbar .l{display:grid;grid-template-columns:1fr 1fr;gap:0;width:100%}
  .topbar .l a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:8px 4px;font-size:13px;line-height:1.25;white-space:nowrap;text-align:center}
  .topbar .l a:first-child{border-right:1px solid #2e2e2e}
}

/* ---------- nav ---------- */
header.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:3px solid var(--red)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:84px;gap:18px}
.nav .logo{flex:0 0 auto}
.nav .logo img{height:44px;width:auto}
/* Logo must NEVER be squeezed: lock aspect ratio everywhere it appears */
img[src*="scs-logo"],img[src*="scs-logo-white"]{width:auto;object-fit:contain;flex-shrink:0;max-width:100%}
.navlinks{display:flex;gap:28px}
.navlinks a{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--black);white-space:nowrap;border-bottom:3px solid transparent;padding:4px 0;transition:border-color .2s,color .2s}
.navlinks a:hover,.navlinks a.active{color:var(--red);border-color:var(--red)}
.nav-cta{display:flex;gap:10px;align-items:center}
.hamb{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
.hamb span{width:24px;height:3px;background:var(--black)}

/* mobile menu */
.mnav{display:none;position:fixed;inset:0;z-index:200;background:rgba(18,18,18,.98);color:#fff;padding:80px 28px}
.mnav.open{display:block}
.mnav a{display:block;font-family:'Barlow Condensed',sans-serif;font-size:34px;font-weight:800;text-transform:uppercase;padding:14px 0;border-bottom:1px solid #2c2c2c}
.mnav a:hover{color:var(--red)}
.mnav .x{position:absolute;top:24px;right:28px;font-size:34px;cursor:pointer;color:#fff;background:none;border:none}

/* ---------- reveals ---------- */
[data-r]{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-r].in{opacity:1;transform:none}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}

/* ---------- page hero (sub-pages) ---------- */
.phero{padding:64px 0 52px;background:linear-gradient(180deg,#fff 0%,#fafafa 100%);border-bottom:1px solid var(--line)}
.phero .kicker{display:inline-flex;align-items:center;gap:10px;font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gray);margin-bottom:14px}
.phero .kicker .sq{width:10px;height:10px;background:var(--red)}
.phero h1{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(46px,6vw,84px);line-height:.92;letter-spacing:-.01em}
.phero h1 .red{color:var(--red)}
.phero .lead{font-size:19px;color:var(--gray);max-width:60ch;margin-top:18px}
.phero .ctas{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}

/* ---------- generic sections ---------- */
section{padding:88px 0}
.sec-head{max-width:760px;margin-bottom:44px}
.sec-head h2{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(38px,4.6vw,64px);line-height:.94;margin-top:12px}
.sec-head h2 .red{color:var(--red)}
.sec-head p{color:var(--gray);font-size:18px;margin-top:16px;max-width:56ch}

/* kicker chips */
.kchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.kchip{font-family:'Barlow Condensed',sans-serif;font-size:14.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 13px;border-radius:3px;border:2px solid var(--black);color:var(--black);white-space:nowrap}
.kchip.red{background:var(--red);border-color:var(--red);color:#fff}
@media(max-width:680px){.kchip{font-size:13px;padding:5px 10px}}

/* ---------- hero (home) ---------- */
.hero{padding:56px 0 86px;background:linear-gradient(180deg,#fff 0%,#fafafa 100%)}
.hero .top{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:38px;flex-wrap:wrap}
.hero h1{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(52px,6.8vw,96px);line-height:.92;letter-spacing:-.01em}
.hero h1 .red{color:var(--red)}
.hero .kicker{display:inline-flex;align-items:center;gap:10px;font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gray);margin-bottom:18px}
.hero .kicker .sq{width:10px;height:10px;background:var(--red)}
.hero .lead{font-size:19px;color:var(--gray);max-width:46ch;line-height:1.5}
.hero .lead b{color:var(--black)}
.hero .ctas{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}

/* ---------- try-on stage ---------- */
.stage{position:relative;aspect-ratio:16/8.4;border-radius:6px;overflow:hidden;background:var(--black);box-shadow:0 24px 60px -24px rgba(0,0,0,.4);border:1px solid var(--line-d)}
.stage .roof{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease),filter .6s var(--ease);filter:blur(6px)}
.stage .roof.on{opacity:1;filter:blur(0)}
.stage .roof img{width:100%;height:100%;object-fit:cover}
.stage .live{position:absolute;top:16px;left:16px;z-index:5;display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:8px 14px;border-radius:4px}
.stage .live .dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:pulse 1.6s ease infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.stage .readout{position:absolute;top:16px;right:16px;z-index:5;background:rgba(18,18,18,.85);backdrop-filter:blur(6px);color:#fff;border-radius:4px;border-left:4px solid var(--red);padding:12px 18px;text-align:left;min-width:230px}
.stage .readout .nm{font-family:'Barlow Condensed',sans-serif;font-size:23px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;line-height:1.05}
.stage .readout .meta{font-size:13px;color:#ccc;margin-top:4px}
.stage .readout .meta b{color:var(--red);font-weight:700}
.stage .readout .swap{transition:opacity .25s ease,transform .25s var(--ease)}
.stage .readout .swap.out{opacity:0;transform:translateY(5px)}
.switcher{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.chip{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid var(--line-d);border-radius:6px;padding:10px 14px 10px 10px;cursor:pointer;transition:transform .15s var(--ease),border-color .2s ease,box-shadow .2s ease;user-select:none}
.chip:active{transform:scale(.97)}
@media(hover:hover){.chip:hover{border-color:var(--black)}}
.chip.on{border-color:var(--red);box-shadow:0 8px 22px -10px rgba(237,28,36,.45)}
.chip .sw{width:46px;height:46px;border-radius:4px;overflow:hidden;flex:none}
.chip .sw img{width:100%;height:100%;object-fit:cover}
.chip .tx .t{font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;line-height:1.05}
.chip .tx .s{font-size:12.5px;color:var(--gray);margin-top:2px}
.chip.on .tx .s{color:var(--red);font-weight:600}
.stage-note{font-size:13.5px;color:var(--gray);margin-top:14px;text-align:center}

/* ---------- trust bar ---------- */
.trust{background:var(--black);color:#fff}
.trust .wrap{display:flex;justify-content:space-between;align-items:center;padding:24px 28px;gap:18px;flex-wrap:wrap}
.trust .t{display:flex;align-items:baseline;gap:10px}
.trust .n{font-family:'Barlow Condensed',sans-serif;font-size:38px;font-weight:800;line-height:1;color:#fff}
.trust .n.red{color:var(--red)}
.trust .l{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#aaa}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{background:#fff;border:2px solid var(--line);border-radius:6px;padding:30px 28px;position:relative;transition:border-color .25s ease,transform .25s var(--ease)}
@media(hover:hover){.step:hover{border-color:var(--black);transform:translateY(-4px)}}
.step .num{font-family:'Barlow Condensed',sans-serif;font-size:52px;font-weight:800;color:var(--red);line-height:1}
.step h3{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;margin:14px 0 8px}
.step p{font-size:15.5px;color:var(--gray)}
.step .tag{position:absolute;top:26px;right:24px;font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--black);padding:4px 10px;border-radius:3px}

/* ---------- product cards ---------- */
.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.prods.cols2{grid-template-columns:repeat(2,1fr)}
.prod{background:#fff;border:2px solid var(--line);border-radius:6px;overflow:hidden;transition:border-color .25s ease,transform .25s var(--ease)}
@media(hover:hover){.prod:hover{border-color:var(--black);transform:translateY(-4px)}}
.prod .ph{aspect-ratio:16/9.5;overflow:hidden;position:relative}
.prod .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
@media(hover:hover){.prod:hover .ph img{transform:scale(1.05)}}
.prod .ph .tier{position:absolute;top:12px;right:12px;background:var(--black);color:#fff;font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;letter-spacing:.08em;padding:4px 10px;border-radius:3px}
.prod .ph .tier b{color:var(--red)}
.prod .b{padding:22px 24px 24px}
.prod h3{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.prod p{font-size:15px;color:var(--gray);margin-top:8px}
.prod .specs{display:flex;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap}
.prod .specs .s .k{font-family:'Barlow Condensed',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#999}
.prod .specs .s .v{font-size:14.5px;font-weight:600;margin-top:2px}
.prod .specs .s .v.red{color:var(--red)}

/* spec list rows (commercial etc) */
.specrows{border-top:2px solid var(--black)}
.specrow{display:grid;grid-template-columns:200px 1fr auto;gap:20px;align-items:center;padding:22px 4px;border-bottom:1px solid var(--line)}
.specrow .n{font-family:'Barlow Condensed',sans-serif;font-size:24px;font-weight:700;text-transform:uppercase}
.specrow p{color:var(--gray);font-size:15.5px}
.specrow .go{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;color:var(--red);white-space:nowrap}
@media(max-width:760px){.specrow{grid-template-columns:1fr;gap:6px}}

/* ---------- showroom cards ---------- */
.show-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.show-card{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:4/3.4;cursor:pointer;border:1px solid var(--line-d)}
.show-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
@media(hover:hover){.show-card:hover img{transform:scale(1.05)}}
.show-card .ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.82))}
.show-card .b{position:absolute;left:0;bottom:0;right:0;padding:20px;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.show-card .b h3{font-family:'Barlow Condensed',sans-serif;font-size:27px;font-weight:700;text-transform:uppercase;color:#fff;line-height:1}
.show-card .b p{font-size:13px;color:#ddd;margin-top:5px}
.show-card .b .go{flex:none;width:38px;height:38px;background:var(--red);border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}

/* ---------- quote ---------- */
.quote{text-align:center;max-width:860px;margin:0 auto}
.quote .stars{color:var(--red);letter-spacing:5px;font-size:20px;margin-bottom:18px}
.quote .q{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(26px,3.4vw,42px);line-height:1.15;text-transform:uppercase}
.quote .q .red{color:var(--red)}
.quote .who{margin-top:20px;font-size:15px;color:var(--gray)}
.quote .who b{color:var(--black)}

/* ---------- locations ---------- */
.locs{background:var(--black);color:#fff}
.locs .sec-head h2{color:#fff}
.locs .sec-head p{color:#aaa}
.locs .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.loc{background:var(--black-2);border:1px solid #333;border-radius:6px;padding:30px;border-top:4px solid var(--red)}
.loc .city{font-family:'Barlow Condensed',sans-serif;font-size:32px;font-weight:800;text-transform:uppercase}
.loc .addr{color:#bbb;font-size:15.5px;margin-top:8px;line-height:1.5}
.loc .row{display:flex;gap:28px;margin-top:20px;padding-top:20px;border-top:1px solid #333;flex-wrap:wrap}
.loc .cell .k{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#888}
.loc .cell .v{font-size:16px;font-weight:600;margin-top:4px;color:#fff}
.loc .cell .v.red{color:var(--red);font-size:19px;font-weight:700}
.loc .map{margin-top:20px;border-radius:4px;overflow:hidden;border:1px solid #333}
.loc .map iframe{display:block;width:100%;height:240px;border:0;filter:grayscale(.2)}

/* ---------- cta band ---------- */
.cta{background:var(--red);color:#fff;text-align:center;position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;right:-90px;top:50%;transform:translateY(-50%) rotate(-8deg);width:430px;height:480px;background:url(/img/mark-white.png) center/contain no-repeat;opacity:.13;pointer-events:none}
.cta .wrap{position:relative;z-index:1}
@media(max-width:760px){.cta::after{width:300px;height:330px;right:-110px}}
.cta h2{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(44px,6vw,84px);line-height:.92}
.cta p{color:rgba(255,255,255,.92);font-size:18.5px;max-width:52ch;margin:18px auto 32px}
.cta .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta .btn-white{color:var(--red-d)}

/* ---------- forms ---------- */
.formcard{background:#fff;border:2px solid var(--line);border-radius:6px;padding:38px;max-width:720px}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.formgrid .full{grid-column:1/-1}
label{display:block;font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
input[type=text],input[type=tel],input[type=email],select,textarea{width:100%;font-family:'Barlow',sans-serif;font-size:16px;padding:13px 14px;border:2px solid var(--line-d);border-radius:4px;background:#fff;color:var(--black);transition:border-color .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--red)}
textarea{min-height:110px;resize:vertical}
.formnote{font-size:13px;color:var(--gray);margin-top:14px}
@media(max-width:680px){.formgrid{grid-template-columns:1fr}}

/* ---------- designer ---------- */
.dz{border:3px dashed var(--line-d);border-radius:6px;background:#fff;padding:46px 30px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s}
.dz:hover,.dz.drag{border-color:var(--red);background:#FFF6F6}
.dz .ic{font-size:40px;line-height:1}
.dz h3{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:700;text-transform:uppercase;margin-top:10px}
.dz p{color:var(--gray);font-size:14.5px;margin-top:6px}
.dstage{position:relative;border-radius:6px;overflow:hidden;background:var(--black);border:1px solid var(--line-d)}
.dstage img{width:100%;display:block}
.dstage .scanline{position:absolute;left:0;right:0;height:3px;background:var(--red);box-shadow:0 0 18px 2px rgba(237,28,36,.8);animation:scan 2.2s var(--ease) infinite;z-index:4}
@keyframes scan{0%{top:0}50%{top:calc(100% - 3px)}100%{top:0}}
.dstage .badge{position:absolute;top:14px;left:14px;z-index:5;background:var(--red);color:#fff;font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;border-radius:4px}
.dpanel{background:#fff;border:2px solid var(--line);border-radius:6px;padding:26px}
.dpanel h4{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px}
.matrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px}
.matbtn{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:12px 8px;border:2px solid var(--line-d);border-radius:4px;background:#fff;cursor:pointer;transition:all .15s}
.matbtn:hover{border-color:var(--black)}
.matbtn.on{border-color:var(--red);background:#FFF3F3;color:var(--red-d)}
.brandsel{margin-top:14px}
.colorgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px;margin-top:10px}
.colorbtn{border:2px solid var(--line-d);border-radius:4px;background:#fff;cursor:pointer;padding:6px;transition:all .15s;text-align:center}
.colorbtn:hover{border-color:var(--black)}
.colorbtn.on{border-color:var(--red);box-shadow:0 4px 14px -6px rgba(237,28,36,.5)}
.colorbtn .swatch{height:38px;border-radius:3px;border:1px solid rgba(0,0,0,.12)}
.colorbtn .nm{font-family:'Barlow Condensed',sans-serif;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;margin-top:5px;line-height:1.1}
.dgrid{display:grid;grid-template-columns:1.25fr .75fr;gap:18px;align-items:start}
@media(max-width:980px){.dgrid{grid-template-columns:1fr}}
.derr{background:#FFF3F3;border:2px solid var(--red);border-radius:4px;color:var(--red-d);font-size:14.5px;padding:12px 14px;margin-top:12px}

/* compare slider (result) */
.cmp{position:relative;width:100%;overflow:hidden;user-select:none;cursor:ew-resize;border-radius:6px;border:1px solid var(--line-d)}
.cmp img{display:block;width:100%;pointer-events:none}
.cmp .after{position:absolute;inset:0;clip-path:inset(0 0 0 50%)}
.cmp .after img{position:absolute;inset:0;height:100%;object-fit:cover}
.cmp .hd{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--red);z-index:4;transform:translateX(-50%)}
.cmp .kn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;z-index:5;border-radius:4px;font-weight:700}
.cmp .tg{position:absolute;bottom:0;font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:8px 13px;z-index:3;color:#fff}
.cmp .tg.b{left:0;background:var(--black)}
.cmp .tg.a{right:0;background:var(--red)}

/* ---------- footer ---------- */
footer{background:var(--black);color:#999;padding:60px 0 36px;font-size:14.5px}
footer .grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:38px;padding-bottom:40px;border-bottom:1px solid #2c2c2c}
footer .logos{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
footer .logos .lg{background:#fff;border-radius:4px;padding:8px 12px}
footer .logos .lg img{height:30px;width:auto}
footer .logos+p{margin-top:16px;max-width:34ch;line-height:1.6;color:#888}
footer h5{font-family:'Barlow Condensed',sans-serif;font-size:16px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#fff;margin-bottom:14px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:9px}
footer ul a{color:#999;transition:color .15s}
footer ul a:hover{color:var(--red)}
footer .base{display:flex;justify-content:space-between;padding-top:22px;font-size:13px;color:#666}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .navlinks{display:none}
  .hamb{display:flex}
  .steps,.prods,.prods.cols2{grid-template-columns:1fr}
  .show-grid{grid-template-columns:1fr}
  .show-card{aspect-ratio:16/9}
  .locs .grid{grid-template-columns:1fr}
  .switcher{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .wrap{padding:0 18px}
  section{padding:60px 0}
  .nav .logo img{height:34px}
  .nav-cta .btn-line{display:none}
  .hero{padding:36px 0 64px}
  .hero .top{flex-direction:column;align-items:flex-start}
  .stage{aspect-ratio:4/3}
  .stage .readout{display:none}
  .switcher{grid-template-columns:1fr 1fr;gap:8px}
  .chip .sw{width:38px;height:38px}
  .chip .tx .s{display:none}
  .trust .wrap{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px;padding:22px 18px}
  .trust .t{gap:8px;align-items:baseline}
  .trust .n{font-size:30px}
  .trust .l{font-size:13px;letter-spacing:.04em}
  .trust .t:last-child{grid-column:1/-1;justify-content:flex-start}
  .cta .row,.hero .ctas,.phero .ctas{flex-direction:column;align-items:stretch}
  .cta .row .btn,.hero .ctas .btn,.phero .ctas .btn{justify-content:center}
  .formcard{padding:26px 20px}
  footer .grid{grid-template-columns:1fr 1fr;gap:28px 18px}
  footer .base{flex-direction:column;gap:8px}
}

/* two-col promo sections collapse on mobile */
@media(max-width:860px){
  .dpromo{display:block !important}
  .dpromo > div + div{margin-top:26px}
}
/* admin-managed announcement banner — slim yellow ticker */
.sitebanner{background:#FFC400;color:#1a1a1a;overflow:hidden;height:30px;display:flex;align-items:center;border-bottom:1px solid rgba(0,0,0,.12)}
.sb-track{display:inline-flex;gap:0;white-space:nowrap;animation:sbmarq 22s linear infinite;will-change:transform}
.sb-copy{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14.5px;letter-spacing:.07em;text-transform:uppercase;padding-right:56px;display:inline-flex;align-items:center;gap:0}
.sb-copy::after{content:"\2022";margin-left:56px;opacity:.5}
@keyframes sbmarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.sb-track{animation:none !important}.sb-copy:not(:first-child){display:none}.sitebanner{justify-content:center}}
html.a11y-motion .sb-track{animation:none !important}
html.a11y-motion .sb-copy:not(:first-child){display:none}
html.a11y-motion .sitebanner{justify-content:center}

/* ---------- accessibility ---------- */
:focus-visible{outline:3px solid var(--red-d);outline-offset:2px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--black);color:#fff;padding:12px 18px;z-index:500;font-weight:700}
.skip:focus{left:8px;top:8px}
/* small red text needs darker red for WCAG AA contrast */
.eyebrow{color:var(--red-d)}
.kchip.red{background:var(--red-d);border-color:var(--red-d)}
/* native reduced-motion respect */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  [data-r]{opacity:1 !important;transform:none !important}
}
/* a11y widget modes (toggled on <html>) */
html.a11y-text{font-size:115%}
html.a11y-text2{font-size:130%}
html.a11y-underline a:not(.btn){text-decoration:underline !important}
html.a11y-motion *{animation:none !important;transition:none !important}
html.a11y-motion [data-r]{opacity:1 !important;transform:none !important}
html.a11y-contrast body{background:#fff}
html.a11y-contrast .topbar,html.a11y-contrast footer,html.a11y-contrast .trust,html.a11y-contrast .locs{background:#000 !important}
html.a11y-contrast :is(p,li,.lead,.l,.addr){color:#111 !important}
html.a11y-contrast .trust .l,html.a11y-contrast footer :is(p,a,li,.base),html.a11y-contrast .topbar a{color:#fff !important}
html.a11y-contrast .btn-red{background:#A00 !important}
html.a11y-contrast img{filter:contrast(1.1)}
/* widget */
.a11y-btn{position:fixed;left:16px;bottom:16px;z-index:400;width:52px;height:52px;border-radius:50%;background:var(--black);color:#fff;border:2px solid #fff;box-shadow:0 6px 20px rgba(0,0,0,.35);cursor:pointer;display:flex;align-items:center;justify-content:center}
.a11y-btn svg{width:28px;height:28px}
.a11y-panel{display:none;position:fixed;left:16px;bottom:78px;z-index:401;background:#fff;border:2px solid var(--black);border-radius:8px;padding:18px;width:248px;box-shadow:0 16px 44px rgba(0,0,0,.3)}
.a11y-panel.open{display:block}
.a11y-panel h2{font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:800;text-transform:uppercase;margin-bottom:10px}
.a11y-panel button.opt{display:flex;justify-content:space-between;align-items:center;width:100%;background:#fff;border:2px solid var(--line-d);border-radius:5px;padding:10px 12px;margin-bottom:8px;font:600 14.5px Barlow,sans-serif;cursor:pointer;text-align:left}
.a11y-panel button.opt[aria-pressed="true"]{border-color:var(--red-d);background:#FFF3F3}
.a11y-panel button.opt .state{font-size:12px;color:var(--gray);font-weight:700;text-transform:uppercase}
.a11y-panel button.opt[aria-pressed="true"] .state{color:var(--red-d)}
.a11y-panel .lnk{font-size:13px;color:var(--gray);margin-top:6px;display:block}
.a11y-panel .lnk a{color:var(--red-d);font-weight:600;text-decoration:underline}

/* comic speech bubbles for the duo */
.cbbl{position:relative;background:#fff;border:2px solid var(--black);border-radius:10px;padding:7px 10px;font-family:'Barlow Condensed',sans-serif;font-size:13.5px;font-weight:700;text-transform:uppercase;line-height:1.2;text-align:center}
.cbbl::after{content:"";position:absolute;bottom:-9px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:9px solid var(--black)}
.cbbl::before{content:"";position:absolute;bottom:-6px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid #fff;z-index:1}
.cbbl.tl::after{left:26px}.cbbl.tl::before{left:28px}
.cbbl.tr::after{right:26px}.cbbl.tr::before{right:28px}

/* auto-playing before/after mini-slider (RUFUS promo) */
.minicmp{position:relative;border-radius:6px;overflow:hidden;border:1px solid var(--line-d);box-shadow:0 24px 60px -24px rgba(0,0,0,.35)}
.minicmp img{display:block;width:100%}
.minicmp .after{position:absolute;inset:0;clip-path:inset(0 0 0 50%);animation:mcwipe 5.5s ease-in-out infinite alternate}
.minicmp .after img{position:absolute;inset:0;height:100%;object-fit:cover}
.minicmp .div{position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--red);z-index:3;animation:mcdiv 5.5s ease-in-out infinite alternate;box-shadow:0 0 10px rgba(0,0,0,.3)}
.minicmp .tagb,.minicmp .taga{position:absolute;bottom:10px;z-index:4;font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:3px;color:#fff}
.minicmp .tagb{left:10px;background:rgba(18,18,18,.78)}
.minicmp .taga{right:10px;background:var(--red)}
@keyframes mcwipe{from{clip-path:inset(0 0 0 12%)}to{clip-path:inset(0 0 0 88%)}}
@keyframes mcdiv{from{left:12%}to{left:88%}}

/* editorial pull-quotes (poster style) */
.pullq{position:relative;background:#fff;border:2px solid var(--black);border-radius:6px;box-shadow:7px 7px 0 var(--red);padding:34px 26px 20px 28px;margin-top:26px}
.pullq .qmark{position:absolute;top:-30px;left:16px;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:88px;line-height:1;color:var(--red);background:transparent;text-shadow:3px 0 0 #fff,-3px 0 0 #fff,0 3px 0 #fff}
.pullq p.qt{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:23px;line-height:1.3;letter-spacing:.01em;color:var(--black)}
.pullq .who{display:flex;align-items:baseline;gap:9px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.pullq .who .sq{width:9px;height:9px;background:var(--red);flex:none;align-self:center}
.pullq .who b{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:var(--black)}
.pullq .who span{font-size:13px;color:var(--gray)}

/* sub-page hero with photo */
.phero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center}
.phero-img{border-radius:6px;overflow:hidden;border:2px solid var(--black);box-shadow:8px 8px 0 var(--red);transform:rotate(.4deg)}
.phero-img img{display:block;width:100%}
@media(max-width:980px){.phero-grid{display:block}.phero-img{margin-top:28px;transform:none}}

/* reviews wall */
.rev-wall{columns:2;column-gap:20px}
.rev-wall .pullq{break-inside:avoid;margin:0 0 20px;display:inline-block;width:100%}
.rev-stars{color:var(--red);letter-spacing:2px;font-size:14px}
@media(max-width:860px){.rev-wall{columns:1}}

/* reviews — kinetic marquee wall */
.rfeat{max-width:980px}
.rfeat .qmk{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:120px;line-height:.4;color:var(--red);display:block;margin-bottom:4px}
.rfeat p.big{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(30px,4.4vw,56px);line-height:1.06;text-transform:uppercase;letter-spacing:.01em}
.rfeat p.big em{font-style:normal;color:var(--red)}
.rmq{overflow:hidden;margin:0 -28px;padding:10px 0}
.rmq-track{display:flex;gap:16px;width:max-content;animation:rmqmove 70s linear infinite}
.rmq.alt .rmq-track{animation-direction:reverse;animation-duration:84s}
.rmq:hover .rmq-track{animation-play-state:paused}
@keyframes rmqmove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.rcard{flex:none;width:360px;background:#fff;border:2px solid var(--black);border-radius:6px;padding:20px 20px 16px;box-shadow:5px 5px 0 var(--red)}
.rcard p.q{font-size:15px;line-height:1.5;color:#2a2a2a;min-height:88px}
.rcard .w{display:flex;align-items:baseline;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.rcard .w b{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:16px;letter-spacing:.05em;text-transform:uppercase}
.rcard .w span{font-size:12px;color:var(--gray)}
.rcard .stars{color:var(--red);font-size:13px;letter-spacing:2px}
.rcard.k{background:var(--black);border-color:var(--black);box-shadow:5px 5px 0 var(--red)}
.rcard.k p.q{color:#ddd}
.rcard.k .w b{color:#fff}
.rcard.k .w span{color:#999}
.rcard.k .w{border-top-color:#333}
.rcard.r{background:var(--red);border-color:var(--red);box-shadow:5px 5px 0 var(--black)}
.rcard.r p.q{color:#fff}
.rcard.r .w b{color:#fff}
.rcard.r .w span{color:rgba(255,255,255,.8)}
.rcard.r .stars{color:#fff}
.rcard.r .w{border-top-color:rgba(255,255,255,.3)}
.rstats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.rstat{border:2px solid var(--black);border-radius:6px;padding:26px;text-align:center;box-shadow:6px 6px 0 var(--red)}
.rstat.k{background:var(--black);color:#fff;box-shadow:6px 6px 0 var(--red)}
.rstat .n{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:54px;line-height:1}
.rstat .n .st{color:var(--red)}
.rstat.k .n .st{color:var(--red)}
.rstat .l{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);margin-top:8px}
.rstat.k .l{color:#aaa}
@media(prefers-reduced-motion:reduce){.rmq-track{animation:none !important;flex-wrap:wrap;width:auto;padding:0 28px}}
html.a11y-motion .rmq-track{animation:none !important;flex-wrap:wrap;width:auto;padding:0 28px}
@media(max-width:760px){.rcard{width:290px}.rstats{grid-template-columns:1fr}.rcard p.q{min-height:104px}}

/* RUFUS promo duo placement */
.duo-wrap{position:relative;padding-left:200px}
.duo-pod{position:absolute;left:-14px;bottom:-6px;z-index:3;width:196px}
.duo-pod img{width:152px;height:auto;margin-left:22px;filter:drop-shadow(2px 4px 6px rgba(0,0,0,.18))}
@media(max-width:860px){
  .duo-wrap{padding-left:0}
  .duo-pod{position:static;width:auto;display:flex;flex-direction:column;align-items:center;margin:0 0 18px}
  .duo-pod .cbbl{max-width:280px;margin:0 0 10px !important;transform:none !important}
  .duo-pod img{width:132px;margin:4px 0 0}
}

/* generic button row */
.btnrow{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:680px){.btnrow{flex-direction:column;align-items:stretch}.btnrow .btn{justify-content:center}}

/* mobile: duo peeks over the top of the before/after card */
.duo-pod .peek{display:none}
@media(max-width:860px){
  .duo-pod img.stand{display:none}
  .duo-pod .peek{display:block;width:225px;margin:4px auto -30px;position:relative;z-index:1}
  .duo-wrap .minicmp{position:relative;z-index:2}
}

/* the RUFUS promo lives inside a real comic strip panel */
.strip-frame{background:#fff;border:2px solid var(--black);border-radius:4px;box-shadow:8px 8px 0 var(--red);padding:12px 14px 16px}
.strip-frame .mast{display:block;width:100%;max-width:430px;height:auto;margin:0 0 12px;border-bottom:2px solid var(--black);padding-bottom:10px}
.strip-frame .minicmp{border:1px solid var(--line-d);box-shadow:none;border-radius:4px}
@media(max-width:860px){.strip-frame{padding:10px 10px 12px}.strip-frame .mast{max-width:100%}}

/* inside the strip panel, duo gets a real column (no absolute overlay) */
.strip-frame .duo-wrap{padding-left:0;display:grid;grid-template-columns:190px 1fr;gap:16px;align-items:end;background:url(/img/strip-bg.jpg) left bottom/cover no-repeat;border-radius:3px;padding:14px 12px 12px}
.strip-frame .duo-pod{position:static;left:auto;bottom:auto;width:auto}
.strip-frame .duo-pod img.stand{width:100%;max-width:158px;margin:10px auto 0;display:block}
.strip-frame .duo-pod .cbbl{font-size:12.5px}
@media(max-width:860px){
  .strip-frame .duo-wrap{display:block}
  .strip-frame .duo-pod img.stand{display:none}
}

/* vertical-wipe variant of the mini comparison (tall card) */
.minicmp.vert{height:470px}
.minicmp.vert > img{height:100%;width:100%;object-fit:cover}
.minicmp.vert .after{clip-path:inset(0 0 50% 0);animation:mcwipeV 5.5s ease-in-out infinite alternate}
.minicmp.vert .after img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.minicmp.vert .div{left:0;right:0;width:auto;height:3px;top:50%;animation:mcdivV 5.5s ease-in-out infinite alternate}
.minicmp.vert .taga{top:10px;right:10px;bottom:auto}
@keyframes mcwipeV{from{clip-path:inset(0 0 88% 0)}to{clip-path:inset(0 0 12% 0)}}
@keyframes mcdivV{from{top:12%}to{top:88%}}
@media(max-width:860px){.minicmp.vert{height:360px}}

/* The Yard Log (blog) */
.post-body{max-width:760px;margin:0 auto}
.post-body p{font-size:17px;line-height:1.75;color:#2e2e2e;margin-bottom:20px}
.post-body h2{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:32px;text-transform:uppercase;margin:38px 0 14px}
.post-body h2 span{color:var(--red)}
.post-body ul{margin:0 0 20px 22px}
.post-body li{font-size:17px;line-height:1.7;color:#2e2e2e;margin-bottom:10px}
.post-body img{border-radius:6px;border:1px solid var(--line-d);margin:8px 0 24px}
.post-meta{display:flex;gap:12px;align-items:center;font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gray)}
.post-meta .sq{width:9px;height:9px;background:var(--red)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.blog-card{border:2px solid var(--line);border-radius:6px;overflow:hidden;background:#fff;transition:border-color .25s,transform .25s var(--ease)}
@media(hover:hover){.blog-card:hover{border-color:var(--black);transform:translateY(-4px)}}
.blog-card .ph{aspect-ratio:16/9;overflow:hidden}
.blog-card .ph img{width:100%;height:100%;object-fit:cover}
.blog-card .b{padding:20px 22px 22px}
.blog-card h3{font-family:'Barlow Condensed',sans-serif;font-size:24px;font-weight:800;text-transform:uppercase;line-height:1.05}
.blog-card p{font-size:14.5px;color:var(--gray);margin-top:8px}
.blog-card .tag{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--red-d)}
@media(max-width:980px){.blog-grid{grid-template-columns:1fr}}