/* DTS brand theme: red #DA0D12 / #80060B on #161616, greys #424141 #666362 #CBCAC8.
   Loaded after store.css and overrides its colours. */
:root{
  color-scheme: dark;
  /* "Graphite & signal red": neutral graphite surfaces, red kept for actions and accents only */
  --cyc:#0E0F11; --cyc-hi:#131417; --card:#17191C; --line:#2C2F35; --line2:#202328;
  --ink:#F2F3F5; --ink2:#B6BAC1; --mute:#80858E; --signal:#D7141B; --signal-hi:#B30F15; --signal-ink:#FFFFFF;
  --brand:#D7141B; --brand-2:#6E0A0E; --rose:#1E1416; --sun:#E2A13A;
  --night:#0B0C0E; --night2:#0E0F11; --nline:#24272C; --npaper:#F2F3F5; --nmute:#80858E; --ir:#D7141B;
  --studio:radial-gradient(90% 75% at 50% 40%,#F4F4F5,#CFD1D4 88%);
  --stage:radial-gradient(55% 22% at 50% 86%,rgba(215,20,27,.16),transparent 72%),radial-gradient(90% 75% at 50% 26%,#34363A 0%,#212327 42%,#141518 100%);
  --redglow:radial-gradient(70% 90% at 0% 0%,rgba(255,255,255,.04),transparent 60%),radial-gradient(55% 70% at 100% 100%,rgba(215,20,27,.08),transparent 65%);
}
body{background:var(--cyc);color:var(--ink)}

/* header + logo */
.top,.top.dark{background:rgba(16,16,16,.78);border-color:var(--nline);color:var(--ink)}
.brand{gap:11px}
.brand .mark{flex:none;filter:drop-shadow(0 4px 12px rgba(218,13,18,.35))}
.brand .bt{display:flex;flex-direction:column;line-height:1;font-size:22px;font-weight:800;letter-spacing:.02em}
.brand .bt small{margin-top:4px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.nav a{opacity:.7}
.nav a:hover{opacity:1;color:#fff}
.cartbtn{border-color:var(--line)}
.cartbtn:hover{border-color:var(--signal)}
.sig{display:flex;align-items:center;gap:12px}
.sig .mark{width:40px;height:40px}

/* buttons */
.btn.solid{background:var(--signal);border-color:var(--signal);color:#fff}
.btn.solid:hover{background:var(--signal-hi);border-color:var(--signal-hi)}
.btn.hollow{border-color:var(--line);color:var(--ink)}
.btn.hollow:hover{border-color:var(--signal);color:#fff}
.chip{border-color:var(--line);color:var(--ink2);background:transparent}
.chip[aria-pressed="true"]{background:var(--signal);border-color:var(--signal);color:#fff}

/* product cards: products sit on a light studio tile so the photos read well */
.card{background:var(--card);border-color:var(--line2)}
.card:hover{border-color:var(--line);box-shadow:0 30px 60px -36px rgba(218,13,18,.45)}
.cbody{background:var(--card)}
.card .br{color:var(--signal)}
.addb{border-color:var(--signal);color:#fff}
.addb:hover{background:var(--signal)}
.svc .ph,.svc-in .ph{background:var(--studio)}
.shot,.qv-view,.item img,.sum-items img{background:var(--stage)}
.shot{position:relative}
.shot::after{content:"";position:absolute;left:18%;right:18%;bottom:10%;height:14px;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.65),transparent 75%);pointer-events:none;z-index:0}
.shot::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.06) 50%,transparent 60%);background-size:250% 100%;background-position:120% 0;transition:background-position 1.1s var(--ease);pointer-events:none;z-index:2}
.card:hover .shot::before{background-position:-20% 0}
.shot .tag{background:rgba(22,22,22,.78);color:#F4F3F1;border-color:transparent}
.shot img{position:relative;z-index:1}
.shot img[src^="/"],.shot img[src^="http"]{width:76%;height:76%;object-fit:contain;border-radius:12px;filter:drop-shadow(0 22px 20px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(218,13,18,.08))}
.inspect{background:rgba(22,22,22,.85);color:#fff}
.qv-close{background:rgba(22,22,22,.8);color:#fff}
.qv-box,.qv-info{background:var(--card);color:var(--ink)}
.rack,.work{background:var(--cyc)}
.more .btn{border-color:var(--line)}

/* services */
.svcs{position:relative;padding:110px 0 90px;background:var(--redglow),#121212;border-block:1px solid var(--nline);overflow:hidden}
.svcs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:40px}
.svcs-head h2{font-size:clamp(38px,5vw,68px);line-height:.98;margin-top:12px}
.svcs-head p{max-width:420px;color:var(--ink2)}
.svcs .label{color:#F07A6E}
.svgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sv{background:#1B1B1B;border:1px solid var(--line2);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:transform .5s var(--ease),border-color .3s,box-shadow .5s var(--ease)}
.sv:hover{transform:translateY(-6px);border-color:rgba(218,13,18,.6);box-shadow:0 34px 60px -34px rgba(218,13,18,.55)}
.sv-img{aspect-ratio:16/10;overflow:hidden;background:#0d0d0d}
.sv-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);filter:saturate(1.05)}
.sv:hover .sv-img img{transform:scale(1.06)}
.sv-b{padding:18px 18px 22px;display:flex;flex-direction:column;gap:8px}
.sv-n{font-family:var(--mono);font-size:11px;color:var(--signal);letter-spacing:.1em}
.sv-b h3{font-size:22px}
.sv-b p{font-size:14px;color:var(--ink2);line-height:1.55}
@media (max-width:1000px){.svgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.svgrid{grid-template-columns:1fr}.svcs{padding:80px 0 60px}}

/* projects */
.ptile{background:var(--card);border-color:var(--line2)}
.pmedia,.pv-slide.img,.pv-th{background:#0d0d0d}
.pmedia img{object-fit:cover;width:100%;height:100%}
.pv-slide img{object-fit:contain}
.pv-box,.pv-side{background:var(--card);color:var(--ink)}
.pv-facts li{border-color:var(--line2)}
.pv-cap{background:rgba(22,22,22,.8);color:#fff}
.plogo{background:var(--pc,#80060B);color:#fff}

/* solar */
.solar{background:var(--redglow),#141414}
.calc{background:var(--card);border-color:var(--line2);color:var(--ink)}
.calc input,.units{background:#121212;color:var(--ink);border-color:var(--line)}
.readout,.day{background:rgba(22,22,22,.86);border-color:var(--line);color:var(--ink)}
.res div{border-color:var(--line2)}

/* quote */
.quote{background:radial-gradient(70% 90% at 0% 0%,#DA0D12 0%,transparent 60%),radial-gradient(60% 80% at 100% 100%,#80060B,transparent 70%),#161616!important}
form.q input,form.q select{background:#121212;color:var(--ink);border-color:var(--line)}
.quote form.q button[type=submit]{background:#fff!important;color:#161616!important}
.out{background:#121212;color:var(--ink)}

/* footer */
footer#contact{background:#0E0E0E;border-top:3px solid var(--signal)}

/* cart + checkout */
.drawer,.co-box,.co-sum,.co-head,.co-foot{background:var(--card);color:var(--ink);border-color:var(--line2)}
.co-body,.co-main{background:var(--cyc-hi)}
.co-form input,.co-form select,.co-form textarea{background:#121212;color:var(--ink);border-color:var(--line)}
.pm{background:#1B1B1B;border-color:var(--line);color:var(--ink)}
.pm[aria-checked="true"]{background:#2A1213;border-color:var(--signal)}
.pay-info,.rv{background:#1B1B1B;border-color:var(--line2);color:var(--ink)}
.toast{background:#F4F3F1;color:#161616}

/* ---- product photos: no background effects, the photo fills the tile ---- */
.shot,.sc-img{background:#1b1b1b!important}
.shot::before,.shot::after,.sc-img::after{display:none!important}
.shot img[src^="/"],.shot img[src^="http"],.sc-img img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:0!important;filter:none!important;position:absolute!important;inset:0;z-index:1}
.card:hover .shot img{transform:scale(1.04)}
.shot .tag,.sc-tag{z-index:3!important}
/* "Inspect in 3D" sits on top of the photo */
.shot .inspect{position:absolute!important;right:12px;bottom:12px;z-index:3!important;display:inline-flex!important;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:17px;background:rgba(14,14,14,.82)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18);font-size:12.5px;font-weight:600;backdrop-filter:blur(6px);opacity:1!important;transform:none!important}
.shot .inspect:hover{background:#DA0D12!important;border-color:#DA0D12}
.pd-main,.pd-rimg,.pd-thumbs button{background:#1b1b1b!important}
.pd-main img,.pd-rimg img,.pd-thumbs img{filter:none!important;border-radius:0!important}

/* account button: sits next to the cart */
.top .wrap{gap:28px}
.acctbtn{height:42px;padding:0 16px 0 13px;border-radius:21px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--ink);text-decoration:none;border:1px solid var(--line);margin-right:-18px;transition:border-color .2s,background .2s}
.acctbtn:hover{border-color:var(--signal);background:rgba(218,13,18,.12)}
.acctbtn.in svg{color:#ff5a5e}
.nav{align-items:center}
@media (max-width:860px){.acctbtn{width:42px;padding:0;justify-content:center}.acctbtn span{display:none}}
a.cartbtn{text-decoration:none;color:inherit}


/* ================= Graphite palette: calmer surfaces, red only where it matters ================= */
body{background:var(--cyc)}
.top,.top.dark{background:rgba(11,12,14,.78);border-color:rgba(255,255,255,.07)}
.brand .mark{filter:none}
/* hero: graphite spotlight instead of a red cloud */
.intro{background:var(--night)}
.intro::before{background:radial-gradient(55% 60% at 50% 42%,#1D1F24 0%,#131519 45%,rgba(11,12,14,0) 75%),radial-gradient(40% 24% at 50% 104%,rgba(215,20,27,.14),transparent 70%)!important}
.intro .label{color:#C9CDD3!important;letter-spacing:.18em}
/* section rhythm: alternate two graphite tones */
.svcs{background:linear-gradient(180deg,#121316,#0E0F11)!important;border-color:rgba(255,255,255,.06)}
.svcs .label,.label{color:#9EA3AB}
.sv{background:var(--card);border-color:rgba(255,255,255,.06)}
.sv:hover{border-color:rgba(255,255,255,.18);box-shadow:0 30px 60px -36px rgba(0,0,0,.9)}
.sv-n{color:var(--mute)}
.rack,.work{background:var(--cyc)}
.card{background:var(--card);border-color:rgba(255,255,255,.06)}
.card:hover{border-color:rgba(255,255,255,.16);box-shadow:0 30px 60px -36px rgba(0,0,0,.9)}
.card .br{color:#9EA3AB}
.chip{border-color:rgba(255,255,255,.12);color:var(--ink2)}
.chip[aria-pressed="true"]{background:#F2F3F5;border-color:#F2F3F5;color:#0E0F11}
.addb{border-color:rgba(255,255,255,.22);color:#fff}
.addb:hover{background:var(--signal);border-color:var(--signal)}
.btn.hollow{border-color:rgba(255,255,255,.22)}
.btn.hollow:hover{border-color:#fff;background:rgba(255,255,255,.06);color:#fff}
/* solar + projects */
.solar{background:linear-gradient(180deg,#121316,#0E0F11)!important;border-color:rgba(255,255,255,.06)}
.calc{background:var(--card);border-color:rgba(255,255,255,.07)}
.ptile{background:var(--card);border-color:rgba(255,255,255,.06)}
/* quote: graphite panel with a single red hairline, no red flood */
.quote{background:radial-gradient(60% 90% at 100% 0%,rgba(215,20,27,.10),transparent 60%),linear-gradient(180deg,#141518,#0E0F11)!important;border-top:1px solid rgba(255,255,255,.06);position:relative}
.quote::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--signal) 30%,var(--signal) 70%,transparent);opacity:.7}
.quote .label{color:#FF5A60!important}
.quote .lead{color:var(--ink2)!important}
.quote .steps li b{color:var(--signal)!important}
.quote form.q label{color:#C9CDD3!important}
.quote form.q input,.quote form.q select{background:#0B0C0E!important;border:1px solid rgba(255,255,255,.1)!important;color:var(--ink)}
.quote form.q input:focus,.quote form.q select:focus{border-color:var(--signal)!important;box-shadow:0 0 0 3px rgba(215,20,27,.2)!important}
.quote form.q button[type=submit]{background:var(--signal)!important;color:#fff!important}
.quote form.q button[type=submit]:hover{background:var(--signal-hi)!important}
/* footer: hairline instead of a thick red bar */
footer#contact{background:#0B0C0E;border-top:1px solid rgba(255,255,255,.07)}
/* small things */
.shot .tag{background:rgba(11,12,14,.78)}
.pm[aria-checked="true"]{background:#1E1416;border-color:var(--signal)}

/* ================= Header: announcement bar + icon actions + quote button ================= */
:root{--hdr:102px}
.annbar{height:34px;line-height:34px;display:block;text-align:center;padding:0 16px;background:#08090A;border-bottom:1px solid rgba(255,255,255,.06);color:#B6BAC1;font-size:13px;white-space:nowrap;overflow:hidden}
.annbar b{color:#fff;font-weight:600}
.top .wrap{height:68px!important;gap:34px}
.top .nav{gap:30px}
.top .nav a{opacity:1!important;color:#A9AEB6;font-size:15px;font-weight:500;transition:color .2s}
.top .nav a:hover{color:#fff}
.top .nav a[aria-current=page]{color:#fff;font-weight:600}
.hright{display:flex;align-items:center;gap:6px}
.hico{position:relative;width:42px;height:42px;border-radius:50%;display:grid!important;place-items:center;padding:0!important;margin:0!important;border:0!important;background:transparent;color:#F2F3F5!important;cursor:pointer;transition:background .2s;text-decoration:none}
.hico:hover{background:rgba(255,255,255,.08)!important}
.hico span:not(.n){display:none!important}
.hico.in{color:#fff!important}
.hico.in::after{content:"";position:absolute;right:9px;bottom:9px;width:8px;height:8px;border-radius:50%;background:#3FB45A;border:2px solid #0B0C0E}
.cartbtn.hico .n{position:absolute;right:2px;top:2px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--signal);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;line-height:1;border:2px solid #0B0C0E}
.hquote{display:inline-flex;align-items:center;height:42px;padding:0 20px;margin-left:8px;border-radius:999px;background:var(--signal);color:#fff!important;font-weight:600;font-size:14.5px;text-decoration:none;white-space:nowrap;transition:background .2s,transform .2s}
.hquote:hover{background:var(--signal-hi)}
.hquote:active{transform:scale(.97)}
/* every page starts below the taller header */
.intro{padding-top:calc(var(--hdr) + env(safe-area-inset-top,0px))!important}
.pg{padding-top:calc(var(--hdr) + env(safe-area-inset-top,0px))!important}
.lt{padding-top:var(--hdr)!important}
.shop-bar,.cb-bar,.lt .cb-bar{top:var(--hdr)!important}
html{scroll-padding-top:calc(var(--hdr) + 10px)}
@media (max-width:1000px){.top .nav{gap:20px}.hquote{padding:0 16px}}
@media (max-width:860px){.top .nav{display:none}}
@media (max-width:560px){:root{--hdr:90px}.annbar{height:30px;line-height:30px;font-size:11.5px}.annbar span{display:none}.top .wrap{height:60px!important;gap:10px}.hquote{height:38px;padding:0 14px;font-size:13.5px;margin-left:2px}.hico{width:38px;height:38px}.hright{gap:0}.brand .bt small{display:none}}
@media (max-width:380px){.hico[aria-label="Search"]{display:none!important}}

/* ================= Product photos: always on white ================= */
.shot,.sc-img,.pc-img,.lt .pc-img,.pd-main,.pd-rimg,.pd-thumbs button,.citem .ph,.item img,.sum-items img,.co-sum img,.ac-orders img{background:#fff!important}
.shot img[src],.sc-img img,.pc-img img,.lt .pc-img img,.pd-main img,.pd-rimg img{object-fit:contain!important;padding:8%!important;box-sizing:border-box;filter:none!important;border-radius:0!important}
.pc-img img.fb,.lt .pc-img img.fb{padding:12%!important}
.pd-thumbs img{object-fit:contain!important;padding:6%;background:#fff}
.item img,.sum-items img{object-fit:contain!important;padding:4px}
.shot::before,.shot::after{display:none!important}
.shot .tag,.pc-tag,.lt .pc-tag{z-index:3}
.shot .tag{background:rgba(17,17,17,.82)!important;color:#fff!important}
.lt .pc-tag{background:rgba(255,255,255,.92)!important;padding:4px 10px!important;border-radius:12px;color:#5f6368}
.lt .pc-tag.ok{color:#16803c!important}

/* ===== moving brand-logo strip (home) ===== */
.lstrip .ls-in{display:flex;align-items:center;gap:28px;flex-wrap:nowrap!important;padding-block:26px!important;overflow:hidden}
.lstrip .label{flex:none;white-space:nowrap}
.ls-view{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ls-track{display:flex;width:max-content;animation:lsMove var(--dur,40s) linear infinite}
.ls-dup{display:contents}
.ls-view:hover .ls-track{animation-play-state:paused}
.lstrip .lg{flex:none;display:grid;place-items:center;width:150px;height:56px;margin-right:56px}
.lstrip .lg img{width:150px!important;height:44px!important;max-width:none;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter .25s,opacity .25s}
.lstrip .lg:hover img{filter:none;opacity:1}
html:not([data-pal="white"]):not([data-pal="light"]) .lstrip .lg img{filter:grayscale(1) brightness(1.8);}
@keyframes lsMove{to{transform:translateX(-50%)}}
@media (max-width:760px){.lstrip .label{display:none}.lstrip .lg{width:110px;height:40px;margin-right:36px}.lstrip .lg img{width:110px!important;height:36px!important}}
@media (prefers-reduced-motion:reduce){.ls-track{animation:none}.ls-view{overflow-x:auto}}
/* built-in brand SVGs are white: on the light theme draw them dark */
html[data-pal="white"] .lstrip .lg img[src$=".svg"],html[data-pal="light"] .lstrip .lg img[src$=".svg"]{filter:brightness(0);opacity:.55}
html[data-pal="white"] .lstrip .lg:hover img[src$=".svg"],html[data-pal="light"] .lstrip .lg:hover img[src$=".svg"]{filter:brightness(0);opacity:1}
.lstrip .lg{height:48px}