/* Go Powder Inc. site styles. One accent (brand red), cool steel neutrals, 6px radius everywhere. */
/* Light is the default (Ken chose the lighter version B on 2026-10-21): white and light grey body,
   with a dark header, page tops, quote form and footer. The switch in the header sets data-gp-theme="dark"
   on <html> to turn the whole page dark. The device's own light or dark setting is not used. */
:root{
  --bg:#FBFBFC; --band:#EEF0F2; --ink:#17191C; --muted:#4F545A; --line:#D8DBDF; --field:#868C94;
  --accent:#C8141B; --accent-hi:#A50F15; --accent-ink:#B01117; --on-accent:#FFFFFF;
  --tint:rgba(200,20,27,.08); --shadow:0 14px 34px rgba(23,25,28,.14);
  --r:6px; --wrap:1280px; --gut:clamp(16px,4vw,48px);
  --font:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}
:root[data-gp-theme="dark"]{
  --bg:#111315; --band:#191C1F; --ink:#ECEEF0; --muted:#A8ADB4; --line:#2D3136; --field:#727880;
  --accent-ink:#FF7C80; --tint:rgba(255,124,128,.12); --shadow:0 14px 34px rgba(0,0,0,.5);
  color-scheme:dark;
}
/* the dark zones stay dark in both modes */
.gp.site-header,.gp .phead,.gp .hero + .wrap:has(> .specs),.gp .phead + .wrap:has(> .specs),.gp.quote,.gp.site-footer{
  --bg:#111315; --band:#191C1F; --ink:#ECEEF0; --muted:#A8ADB4; --line:#2D3136; --field:#727880;
  --accent-ink:#FF7C80; --tint:rgba(255,124,128,.12);
  color-scheme:dark; background:var(--bg); color:var(--ink);
}
/* the numbers strip under a dark page top runs full width */
.gp .hero + .wrap:has(> .specs),.gp .phead + .wrap:has(> .specs){box-shadow:0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax)}
/* some sections are written with padding-top: 0 to sit flush under the page top; under a dark page top they need the gap back */
.gp .phead + .sec{padding-top:clamp(40px,5vw,64px) !important}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg)}
.gp{font-family:var(--font);font-size:17px;line-height:1.6;color:var(--ink);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
.page{background:var(--bg);overflow-x:clip}
.gp h1,.gp h2,.gp h3{margin:0;font-stretch:108%;line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
.gp h1{font-size:clamp(2.1rem,4.2vw,3.5rem);font-weight:800}
.gp h2{font-size:clamp(1.6rem,2.8vw,2.4rem);font-weight:750}
.gp h3{font-size:1.2rem;font-weight:700;line-height:1.25;letter-spacing:-.005em}
.gp p{margin:0}
.gp a{color:var(--accent-ink);text-underline-offset:3px}
.gp a:hover{color:var(--ink)}
.gp :focus-visible{outline:3px solid var(--accent-ink);outline-offset:3px}
.gp img{max-width:100%}
/* short red bar above the page headline and each section title */
.gp .hero h1::before,.gp .phead h1::before,.gp .sec-head h2::before,.gp .quote h2::before{content:"";display:block;width:48px;height:4px;margin-bottom:20px;background:var(--accent)}
.gp figure{margin:0}
.gp figcaption{margin-top:10px;font-size:.9rem;line-height:1.45;color:var(--muted)}

/* layout */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(56px,8vw,104px)}
.sec.tight{padding-block:clamp(40px,5vw,64px)}
.sec.band{background:var(--band)}
.sec-head{display:grid;gap:14px;max-width:70ch;margin-bottom:clamp(28px,4vw,48px)}
.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-ink)}
.lede{font-size:clamp(1.05rem,1.4vw,1.22rem);line-height:1.55;color:var(--muted);max-width:62ch}
.stack{display:grid;gap:18px;align-content:start}
.stack.lg{gap:28px}
.prose{max-width:68ch}
.prose p+p{margin-top:1em}
.muted{color:var(--muted)}
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center}
.split.top{align-items:start}
.split.even{grid-template-columns:repeat(2,minmax(0,1fr))}
.ph{display:block;width:100%;height:auto;border-radius:var(--r);background:var(--band);object-fit:cover}
.ph.tall{aspect-ratio:4/5}
.ph.wide{aspect-ratio:16/10}
.ph.sq{aspect-ratio:1}
.tbc{background:var(--tint);border-bottom:1px dashed var(--accent-ink);padding:0 3px;border-radius:2px}
.note{padding:20px 24px;border-radius:var(--r);background:var(--tint)}
.slot{display:grid;place-items:center;min-height:300px;padding:24px;border:1.5px dashed var(--field);border-radius:var(--r);background:var(--band);color:var(--muted);text-align:center}
.map{position:relative;overflow:hidden;min-height:340px;border:1px solid var(--line);border-radius:var(--r);background:var(--band)}
.map iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
:root[data-gp-theme="dark"] .map iframe{filter:invert(.9) hue-rotate(180deg)}
.map-wrap{display:grid;gap:12px;align-content:start}
.map-link{font-weight:600}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border:1.5px solid transparent;border-radius:var(--r);font:inherit;font-size:1rem;font-weight:700;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .18s,color .18s,border-color .18s,transform .12s}
.btn:active{transform:translateY(1px)}
.gp .btn-primary{background:var(--accent);color:var(--on-accent)}
.gp .btn-primary:hover{background:var(--accent-hi);color:var(--on-accent)}
.gp .btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.gp .btn-ghost:hover{background:var(--ink);color:var(--bg)}
.gp .btn-light{border-color:#FFFFFF;color:#FFFFFF;background:rgba(17,19,21,.35)}
.gp .btn-light:hover{background:#FFFFFF;color:#17191C}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* header */
.site-header{position:sticky;top:0;z-index:40;background:var(--bg);border-top:4px solid var(--accent);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:clamp(12px,1.4vw,16px);min-height:72px}
.logo{display:block;flex:none}
.logo img{display:block;height:44px;width:auto}
.nav{margin-left:auto}
.nav>ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.nav li{position:relative}
.gp .nav a,.nav button{display:flex;align-items:center;gap:7px;min-height:44px;padding:0 9px;border:0;border-radius:var(--r);background:none;font:inherit;font-size:.95rem;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap;cursor:pointer}
.nav button::after{content:"";width:6px;height:6px;border-right:1.5px solid;border-bottom:1.5px solid;transform:translateY(-2px) rotate(45deg)}
.gp .nav a:hover,.nav button:hover,.nav li:focus-within>button{background:var(--band);color:var(--ink)}
.sub{display:none;position:absolute;top:100%;left:0;min-width:280px;margin:0;padding:8px;list-style:none;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.has-sub:hover>.sub,.has-sub:focus-within>.sub{display:block}
.gp .sub a{font-weight:500}
.gp .tel{display:none;font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap}
.theme-btn{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1.5px solid var(--line);border-radius:var(--r);background:none;color:var(--ink);cursor:pointer;transition:background .18s,border-color .18s}
.theme-btn:hover{background:var(--band);border-color:var(--field)}
.theme-btn svg{display:block;width:20px;height:20px}
.theme-btn .i-sun{display:none}
:root[data-gp-theme="dark"] .theme-btn .i-sun{display:block}
:root[data-gp-theme="dark"] .theme-btn .i-moon{display:none}
.mnav{display:none;margin-left:auto}
.mnav>summary{display:flex;align-items:center;min-height:44px;padding:0 16px;border:1.5px solid var(--ink);border-radius:var(--r);font-weight:700;cursor:pointer;list-style:none}
.mnav summary::-webkit-details-marker{display:none}
.mnav[open]>summary{background:var(--ink);color:var(--bg)}
.mnav .panel{position:absolute;left:0;right:0;top:100%;max-height:min(80vh,640px);overflow:auto;padding:8px var(--gut) 28px;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.mnav .panel details{border-bottom:1px solid var(--line)}
.mnav .panel summary{display:flex;justify-content:space-between;align-items:center;min-height:52px;font-weight:700;cursor:pointer;list-style:none}
.mnav .panel summary::after{content:"+";font-size:1.3rem;font-weight:400;color:var(--accent-ink)}
.mnav .panel details[open]>summary::after{content:"\2212"}
.gp .mnav .panel a{display:flex;align-items:center;min-height:48px;color:var(--ink);text-decoration:none}
.gp .mnav .panel details a{padding-left:14px;color:var(--muted)}
.gp .mnav .panel>a{border-bottom:1px solid var(--line);font-weight:700}
@media (min-width:1340px){.gp .tel{display:block}}
@media (max-width:1160px){.nav{display:none}.mnav{display:block;margin-left:0}.theme-btn{margin-left:auto}}
@media (max-width:560px){.bar>.btn{display:none}.logo img{height:38px}}

/* hero */
.hero{position:relative;isolation:isolate;display:grid;align-items:end;min-height:clamp(480px,62vw,680px);background:#17191C;color:#FFFFFF}
.hero-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(13,15,17,.88) 0%,rgba(13,15,17,.6) 45%,rgba(13,15,17,.08) 100%),linear-gradient(0deg,rgba(13,15,17,.5),rgba(13,15,17,0) 45%)}
.hero-in{display:grid;gap:22px;padding-block:clamp(64px,9vw,96px) clamp(40px,6vw,72px)}
.gp .hero h1{max-width:22em;font-size:clamp(2rem,3.9vw,3.25rem);color:#FFFFFF}
.hero p{max-width:46ch;font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.5;color:#E4E6E9}

/* page head for inner pages */
.phead{padding-block:clamp(28px,4vw,48px) clamp(40px,5vw,72px)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(20px,3vw,36px);padding:0;list-style:none;font-size:.9rem;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--field)}
.gp .crumbs a{color:var(--muted)}

/* number strip */
.specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none;border-top:3px solid var(--accent);border-bottom:1px solid var(--line)}
.specs.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.specs li{display:grid;gap:8px;align-content:start;padding:28px 24px 28px 0}
.specs li+li{padding-left:24px;border-left:1px solid var(--line)}
.specs strong{font-size:clamp(1.9rem,3.4vw,3rem);font-weight:800;font-stretch:108%;line-height:1;letter-spacing:-.02em}
.specs span{font-size:.95rem;line-height:1.4;color:var(--muted)}
@media (max-width:820px){
  .specs,.specs.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .specs li{padding:20px 16px 20px 0}
  .specs li:nth-child(odd){padding-left:0;border-left:0}
  .specs li:nth-child(n+3){border-top:1px solid var(--line)}
}

/* image tiles */
.tiles{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,2.4vw,32px) clamp(16px,2vw,28px)}
.gp .tile{grid-column:span 3;display:grid;gap:10px;align-content:start;color:var(--ink);text-decoration:none}
.tile.lg{grid-column:span 6}
.tile.md{grid-column:span 4}
.tile .im{overflow:hidden;border-radius:var(--r);background:var(--band)}
.tile img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.tile.lg img{aspect-ratio:16/10}
a.tile:hover img{transform:scale(1.03)}
.tile h3{margin-top:6px}
.tile p{font-size:.97rem;color:var(--muted)}
.gp a.tile:hover h3{color:var(--accent-ink)}
@media (max-width:900px){.gp .tile,.tile.md{grid-column:span 6}.tile.lg{grid-column:span 12}}
@media (max-width:540px){.gp .tile,.tile.md,.tile.lg{grid-column:span 12}}

/* link rows */
.rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,56px);margin:0;padding:0;list-style:none}
.gp .rows a{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:14px 0;border-top:1px solid var(--line);font-size:1.14rem;font-weight:650;font-stretch:104%;color:var(--ink);text-decoration:none}
.rows a::after{content:"\2192";color:var(--accent-ink);transition:transform .2s}
.gp .rows a:hover{color:var(--accent-ink)}
.rows a:hover::after{transform:translateX(4px)}
@media (max-width:700px){.rows{grid-template-columns:1fr}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin:0;padding:0;list-style:none;counter-reset:s}
.steps.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.steps.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps li{counter-increment:s;display:grid;gap:8px;align-content:start;padding-top:16px;border-top:3px solid var(--accent)}
.steps li::before{content:counter(s);font-size:.95rem;font-weight:800;color:var(--accent-ink)}
.gp .steps h3{font-size:1.1rem}
.steps p{font-size:.95rem;color:var(--muted)}
@media (max-width:960px){.steps,.steps.four,.steps.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps,.steps.four,.steps.three{grid-template-columns:1fr}}

/* options side by side */
.opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.opts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.opt{display:grid;gap:10px;align-content:start;padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
.opt .tag{font-size:.85rem;font-weight:700;color:var(--muted)}
.opt p{color:var(--muted)}
@media (max-width:860px){.opts,.opts.two{grid-template-columns:1fr}}

/* spec sheet */
.sheet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,56px);margin:0}
.sheet.one{grid-template-columns:1fr}
.sheet div{display:grid;grid-template-columns:minmax(120px,36%) minmax(0,1fr);gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.sheet dt{font-weight:700}
.sheet dd{margin:0;color:var(--muted)}
@media (max-width:760px){.sheet{grid-template-columns:1fr}}

/* lists */
.ticks{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.ticks.cols{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
.ticks li{position:relative;padding-left:26px}
.ticks li::before{content:"";position:absolute;left:0;top:.72em;width:14px;height:2px;background:var(--accent)}
@media (max-width:640px){.ticks.cols{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.gp .chips a,.chips span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--field);border-radius:var(--r);background:var(--bg);font-weight:600;color:var(--ink);text-decoration:none}
.gp .chips a:hover{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.chips span{border-style:dashed;color:var(--muted)}

/* gallery and filters */
.gallery{columns:3;column-gap:clamp(14px,1.8vw,24px)}
.gallery figure{break-inside:avoid;margin:0 0 clamp(20px,2.6vw,34px)}
.gallery img{display:block;width:100%;height:auto;border-radius:var(--r);background:var(--band)}
.gallery strong{display:block;color:var(--ink);font-size:1rem}
@media (max-width:900px){.gallery{columns:2}}
@media (max-width:540px){.gallery{columns:1}}
.filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(24px,3vw,40px)}
.filter input{position:absolute;opacity:0;pointer-events:none}
.filter label{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--field);border-radius:var(--r);font-weight:600;cursor:pointer}
.filter input:checked+label{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.filter input:focus-visible+label{outline:3px solid var(--accent-ink);outline-offset:3px}
.projects:has(#f-industrial:checked) .gallery figure:not([data-c~="industrial"]),
.projects:has(#f-wheels:checked) .gallery figure:not([data-c~="wheels"]),
.projects:has(#f-architectural:checked) .gallery figure:not([data-c~="architectural"]),
.projects:has(#f-automotive:checked) .gallery figure:not([data-c~="automotive"]),
.projects:has(#f-shop:checked) .gallery figure:not([data-c~="shop"]){display:none}

/* faq */
.faq{max-width:880px;border-bottom:1px solid var(--line)}
.faq details{border-top:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:64px;padding:16px 0;font-size:1.12rem;font-weight:700;line-height:1.3;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-size:1.6rem;font-weight:400;line-height:1;color:var(--accent-ink)}
.faq details[open]>summary::after{content:"\2212"}
.faq details>p{max-width:68ch;padding:0 0 22px;color:var(--muted)}

/* reviews */
.bigquote{margin:0;display:grid;gap:18px;padding-left:28px;border-left:4px solid var(--accent)}
.bigquote p{font-size:clamp(1.5rem,3vw,2.3rem);font-weight:700;font-stretch:106%;line-height:1.2;letter-spacing:-.012em;max-width:26ch;text-wrap:balance}
.bigquote footer{color:var(--muted)}

/* tables */
.table-wrap{overflow-x:auto}
.gp table{width:100%;min-width:560px;border-collapse:collapse}
.gp th,.gp td{padding:14px 20px 14px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.gp th{font-size:.82rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.gp td:first-child{font-weight:700}

/* forms */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.field{display:grid;gap:6px;align-content:start}
.field.full{grid-column:1/-1}
.field label{font-size:.95rem;font-weight:650}
.gp input[type=text],.gp input[type=tel],.gp input[type=email],.gp input[type=date],.gp input[type=number],.gp select,.gp textarea{width:100%;min-height:48px;padding:10px 14px;border:1.5px solid var(--field);border-radius:var(--r);background:var(--bg);font:inherit;color:var(--ink)}
.gp textarea{min-height:120px;resize:vertical}
.gp input:focus,.gp select:focus,.gp textarea:focus{outline:3px solid var(--accent-ink);outline-offset:1px}
.hint{font-size:.88rem;line-height:1.45;color:var(--muted)}
.drop{position:relative;display:grid;place-items:center;gap:4px;min-height:120px;padding:20px;border:1.5px dashed var(--field);border-radius:var(--r);background:var(--bg);text-align:center;color:var(--muted);cursor:pointer}
.drop strong{color:var(--ink)}
.drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drop:focus-within{outline:3px solid var(--accent-ink);outline-offset:1px}
@media (max-width:640px){.form{grid-template-columns:1fr}}
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.doors>input{position:absolute;opacity:0;pointer-events:none}
.doors>label{display:grid;gap:2px;align-content:center;min-height:76px;padding:14px 20px;border:1.5px solid var(--field);font-weight:700;cursor:pointer}
.doors>label span{font-size:.9rem;font-weight:400;color:var(--muted)}
.doors>label:first-of-type{border-radius:var(--r) 0 0 var(--r);border-right:0}
.doors>label:last-of-type{border-radius:0 var(--r) var(--r) 0}
.doors>input:checked+label{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.doors>input:checked+label span{color:var(--bg)}
.doors>input:focus-visible+label{outline:3px solid var(--accent-ink);outline-offset:3px}
.doors>.form{grid-column:1/-1;display:none;margin-top:28px}
#d-personal:checked~.door-personal,#d-business:checked~.door-business{display:grid}

.quote{border-top:3px solid var(--accent)}

/* blog */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px) clamp(16px,2vw,28px)}
.post{display:grid;gap:10px;align-content:start;padding-top:16px;border-top:3px solid var(--accent)}
.gp .post h3 a{color:var(--ink);text-decoration:none}
.gp .post h3 a:hover{color:var(--accent-ink)}
.post p{font-size:.95rem;color:var(--muted)}
@media (max-width:900px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.posts{grid-template-columns:1fr}}
.article{max-width:72ch}
.article>*+*{margin-top:1.1em}
.gp .article h2{margin-top:1.7em;font-size:clamp(1.4rem,2.2vw,1.75rem)}

/* footer */
.site-footer{padding-block:56px 32px;border-top:3px solid var(--accent);background:var(--bg);font-size:.97rem}
.fcols{display:grid;grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:32px}
.gp .fcols h2{margin-bottom:12px;font-size:.82rem;font-stretch:100%;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fcols ul{display:grid;gap:0;margin:0;padding:0;list-style:none}
.gp .fcols a{display:inline-flex;align-items:center;min-height:36px;color:var(--ink);text-decoration:none}
.gp .fcols a:hover{color:var(--accent-ink);text-decoration:underline}
.fcols address{font-style:normal;line-height:1.6}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted)}
.callbar{display:none}
@media (max-width:960px){.fcols{grid-template-columns:repeat(2,minmax(0,1fr))}.fcols>:first-child{grid-column:1/-1}}
@media (max-width:767px){
  .callbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line)}
  .site-footer{padding-bottom:104px}
}
@media (max-width:860px){
  .split,.split.even{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .gp *,.gp *::before,.gp *::after{transition:none !important}
}

/* Version F, the live look since 2026-11-03 (first built at /f/ on 2026-11-02). build_site.py adds this on top of site.css.
   A simpler, lighter look for contractors and people dropping off parts: Barlow type, white header, light page tops
   and quote form, red only on the main buttons, dark footer. Inner pages use E's content with this look.
   Home hero: the powder clip plays once as soon as the page loads and stops on the red. The headline is dark on the
   white start and turns white as the powder covers it. While you scroll, the hero stays put, zooms in a little and
   dims, the headline lifts away, and the next section slides up over it. */
:root{
  --bg:#FFFFFF; --band:#F2F3F4; --ink:#16181B; --muted:#50555C; --line:#DADDE1;
  --font:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --head:'Barlow Semi Condensed','Barlow',system-ui,sans-serif;
  --hdr:76px;
}
:root[data-gp-theme="dark"]{--bg:#121416;--band:#1A1D20;--ink:#ECEEF0;--muted:#A9AEB5;--line:#2E3237}

/* light header. Page tops on inner pages and the quote form stay dark (Ken, 2026-11-03), like the footer */
.gp.gp.site-header{
  --bg:inherit;--band:inherit;--ink:inherit;--muted:inherit;--line:inherit;--field:inherit;--accent-ink:inherit;--tint:inherit;
  color-scheme:inherit;color:var(--ink)}
.gp.gp.site-header{background:var(--bg)}
.site-header{border-top:3px solid var(--accent);border-bottom:1px solid var(--line)}
.logo .logo-on-dark{display:none}
:root[data-gp-theme="dark"] .logo .logo-on-light{display:none}
:root[data-gp-theme="dark"] .logo .logo-on-dark{display:block}
/* Arnold's full logo (logo-gp.webp, 638x96, no padding): 30px tall on every screen so the full menu has room */
.gp .logo img{height:30px;width:auto}
.f-foot-logo{display:block;height:40px;width:auto}
.gp .nav a,.nav button{font-size:1rem;font-weight:600}

/* type */
.gp{font-size:17.5px;line-height:1.6}
.gp h1,.gp h2,.gp h3{font-family:var(--head);font-stretch:normal;letter-spacing:-.01em}
.gp h1{font-weight:800;line-height:1.02}
.gp h2{font-weight:700;font-size:clamp(1.8rem,3.2vw,2.75rem);line-height:1.05}
.gp h3{font-weight:700;font-size:1.3rem}
.gp .hero h1::before,.gp .phead h1::before,.gp .sec-head h2::before,.gp .quote h2::before{content:none}
.gp .specs strong,.gp .bigquote p,.gp .rows a{font-family:var(--head);font-stretch:normal}
.btn{font-weight:700;font-size:1.02rem}

/* ---------- home hero ---------- */
.f-hero{--ink-h:#FFFFFF;position:relative;isolation:isolate;display:grid;align-items:end;height:calc(100svh - var(--hdr));min-height:560px;max-height:1000px;overflow:hidden;background:#B50A16 url(/img/d-powder-end.jpg) 0% 55%/cover no-repeat;color:var(--ink-h)}
.f-video{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:0% 50%;background:#FFFFFF;--f-s:1.3;transform:scale(var(--f-s));transform-origin:0% 55%}
/* a dark-red wash behind the headline once the powder is down, so white text always reads */
.f-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(60,0,6,.5) 0%,rgba(60,0,6,.28) 45%,rgba(60,0,6,0) 72%),linear-gradient(0deg,rgba(60,0,6,.35) 0%,rgba(60,0,6,0) 50%);transition:opacity .9s ease}
.f-copy{position:relative;z-index:1;display:grid;gap:22px;width:100%;padding-block:clamp(48px,8vh,96px) clamp(48px,9vh,104px)}
.gp .f-hero h1{max-width:11.5em;font-size:clamp(2.6rem,5.6vw,5rem);color:var(--ink-h);transition:color .45s ease}
.f-hero p{max-width:40ch;font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.5;color:var(--ink-h);transition:color .45s ease}
.gp .f-btn-line{border-color:var(--ink-h);color:var(--ink-h);background:transparent;transition:background .18s,color .45s,border-color .45s}
.gp .f-btn-line:hover{background:var(--ink-h);color:#16181B}
.gp .f-hero .btn-primary{background:#16181B;color:#FFFFFF;border-color:#16181B}
.gp .f-hero .btn-primary:hover{background:#33373C;border-color:#33373C}
/* while the clip runs on its white start: dark text, no wash */
/* html.f-js is set in the head before first paint, so the white start never flashes from the red */
.f-js .f-hero:not(.f-red){--ink-h:#16181B;--f-bg:#FFFFFF;background:#FFFFFF}
.f-js .f-hero:not(.f-red) .f-shade{opacity:0}

/* the sections after the hero slide up over it */
.f-hero{position:sticky;top:var(--hdr);z-index:0}
.f-hero ~ *{position:relative;z-index:1;background:var(--bg)}
.f-hero ~ .band{background:var(--band)}
.f-hero + *{box-shadow:0 -24px 48px rgba(22,24,27,.18)}

/* scroll effect, where the browser supports scroll-driven animation: zoom in, dim, lift the headline away */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    .f-video{animation:f-zoom linear both;animation-timeline:scroll(root);animation-range:0 100svh}
    .f-hero::after{content:"";position:absolute;inset:0;z-index:0;background:#16181B;pointer-events:none;opacity:0;animation:f-dim linear both;animation-timeline:scroll(root);animation-range:0 100svh}
    .f-copy{animation:f-lift linear both;animation-timeline:scroll(root);animation-range:0 75svh}
  }
}
@keyframes f-zoom{from{transform:scale(var(--f-s))}to{transform:scale(calc(var(--f-s) * 1.18))}}
@keyframes f-dim{from{opacity:0}to{opacity:.55}}
@keyframes f-lift{from{transform:none;opacity:1}to{transform:translateY(-14vh);opacity:0}}

/* phones: the clip as a panel across the top, the headline on a panel below that goes from white to the powder red */
@media (max-width:700px){
  .f-hero{--f-bg:rgb(128,8,16);display:flex;flex-direction:column;min-height:560px;max-height:none;background:var(--f-bg);transition:background-color .6s ease}
  .f-js .f-hero:not(.f-red){background:var(--f-bg)}
  .f-video{--f-s:1;position:relative;inset:auto;flex:none;height:54%;object-position:64% 50%;transform-origin:64% 50%;background:transparent;
    -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent);mask-image:linear-gradient(to bottom,#000 72%,transparent)}
  .f-shade{display:none}
  .f-copy{flex:1;align-content:start;gap:16px;margin-top:-8px;padding-block:0 104px}
  .gp .f-hero h1{font-size:clamp(2.2rem,10vw,3rem)}
}
/* phones already have the call and quote buttons pinned along the bottom */
@media (max-width:767px){.f-hero .actions{display:none}}

/* ---------- section heads ---------- */
.f-head{display:grid;gap:12px;max-width:60ch;margin-bottom:clamp(28px,4vw,44px)}
.f-head p{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--muted)}

/* ---------- what are you bringing in: five photo cells ---------- */
.f-bento{display:grid;grid-template-columns:1.05fr 1fr 1fr 1.05fr;grid-template-rows:repeat(2,clamp(250px,22vw,330px));gap:14px;
  grid-template-areas:"w r r t" "w e b t"}
.f-wheels{grid-area:w}.f-rail{grid-area:r}.f-truck{grid-area:t}.f-equip{grid-area:e}.f-blast{grid-area:b}
.gp .f-cell{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r);background:var(--band);color:var(--ink);text-decoration:none}
.f-cell img{display:block;flex:1;min-height:0;width:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.f-cap{display:grid;gap:2px;padding:14px 16px 16px}
.f-cap strong{font-family:var(--head);font-size:1.25rem;line-height:1.15}
.f-cap span{font-size:.95rem;color:var(--muted)}
a.f-cell:hover img{transform:scale(1.04)}
.gp a.f-cell:hover strong{color:var(--accent-ink)}
@media (max-width:900px){
  .f-bento{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-template-areas:"w t" "r r" "e b"}
  .f-cell img{flex:none;aspect-ratio:4/3}
  .f-wheels img,.f-truck img{aspect-ratio:3/4}
  .f-rail img{aspect-ratio:16/9}
}
@media (max-width:560px){
  .f-bento{grid-template-columns:1fr;grid-template-areas:"w" "r" "t" "e" "b"}
  .f-cell img,.f-wheels img,.f-truck img,.f-rail img{aspect-ratio:16/10}
}

/* ---------- how it works ---------- */
.f-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);margin:0;padding:0;list-style:none;counter-reset:f}
.f-steps li{counter-increment:f;display:grid;gap:10px;align-content:start}
.f-steps li::before{content:counter(f);font-family:var(--head);font-size:clamp(3rem,5vw,4.25rem);font-weight:800;line-height:1;color:var(--accent-ink)}
.f-steps p{color:var(--muted);max-width:34ch}
@media (max-width:760px){.f-steps{grid-template-columns:1fr;gap:28px}.f-steps li{grid-template-columns:56px 1fr;column-gap:12px}.f-steps li::before{grid-row:span 2;font-size:2.6rem}}

/* ---------- the shop ---------- */
.f-shop-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:end}
.f-shop-img img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r)}
.f-shop-copy{display:grid;gap:18px;padding-bottom:8px}
.f-shop-copy p{font-size:1.1rem;color:var(--muted);max-width:40ch}
.gp .f-more{font-weight:700;color:var(--ink);text-decoration-color:var(--accent);text-decoration-thickness:2px}
.gp .f-more:hover{color:var(--accent-ink)}
.f-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,32px);margin:clamp(36px,5vw,56px) 0 0;padding:0;list-style:none}
.f-nums li{display:grid;gap:6px;align-content:start}
.f-nums strong{font-family:var(--head);font-size:clamp(2.4rem,4.4vw,3.75rem);font-weight:800;line-height:1;letter-spacing:-.02em}
.f-nums span{font-size:.98rem;line-height:1.4;color:var(--muted);max-width:24ch}
@media (max-width:860px){.f-shop-grid{grid-template-columns:1fr}.f-nums{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}}

/* ---------- review ---------- */
.f-quote{margin:0 auto;max-width:900px;display:grid;gap:20px;text-align:center}
.f-quote p{font-family:var(--head);font-size:clamp(1.8rem,3.8vw,3rem);font-weight:700;line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
.f-quote footer{color:var(--muted)}
.f-quote footer a{margin-left:8px;font-weight:700}

/* ---------- find the shop ---------- */
.f-facts{display:grid;gap:18px;margin:0}
.f-facts div{display:grid;gap:2px}
.f-facts dt{font-size:.9rem;font-weight:700;color:var(--muted)}
.f-facts dd{margin:0;font-size:1.2rem;font-weight:600;line-height:1.45}
.gp .f-facts a{color:var(--ink)}

/* ---------- faq ---------- */
.f-all{margin-top:24px;font-weight:700}

@media (prefers-reduced-motion:reduce){
  .f-hero{position:relative;top:auto}
}

/* ---------- header mega menu (2026-11-03) ----------
   Services opens one full-width panel: services, industries and service areas side by side, plus an estimate box.
   Opens on hover, on click and from the keyboard (F_NAV in build_site.py); every link stays in the HTML for search. */
.gp .nav .has-mega{position:static}
.mega{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 18px 34px rgba(23,25,28,.12)}
.mega::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:22px}
.has-mega:hover>.mega,.has-mega:focus-within>.mega,.has-sub.open>.mega,.has-sub.open>.sub{display:block}
.f-nav .has-sub:focus-within:not(.open):not(:hover)>.mega,.f-nav .has-sub:focus-within:not(.open):not(:hover)>.sub,
.f-nav .has-sub.shut>.mega,.f-nav .has-sub.shut>.sub{display:none}
.nav .has-sub.open>button::after{transform:translateY(2px) rotate(225deg)}
.mega-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(250px,1.05fr);gap:clamp(24px,3vw,48px);padding-block:28px 32px}
.gp .mega-h{margin:0 0 8px;padding-bottom:10px;border-bottom:1px solid var(--line);font-family:var(--head);font-size:1.1rem;font-weight:700;line-height:1.2;color:var(--ink)}
.mega ul{list-style:none;margin:0;padding:0}
.gp .nav .mega-col a{min-height:40px;margin-inline:-10px;padding:7px 10px;font-size:.98rem;font-weight:500;line-height:1.3;white-space:normal}
.mega-cta{align-self:start;padding:20px 22px 22px;border-radius:var(--r);background:var(--band)}
.gp .mega-cta .mega-h{border-bottom:0;padding-bottom:0}
.mega-cta p:not(.mega-h){margin:0 0 16px;font-size:.95rem;line-height:1.5;color:var(--muted)}
.gp .nav .mega-cta .btn{width:100%;min-height:48px;padding:0 20px;justify-content:center;background:var(--accent);color:var(--on-accent);font-size:1rem;font-weight:700}
.gp .nav .mega-cta .btn:hover{background:var(--accent-hi);color:var(--on-accent)}
.gp .nav .mega-cta .mega-tel{justify-content:center;min-height:40px;margin-top:6px;font-weight:600}
.gp .nav .mega-cta .mega-tel:hover{background:none;text-decoration:underline}
/* phone menu: one Services section with three small groups */
.gp .mnav-h{margin:12px 0 2px;padding-left:14px;font-family:var(--head);font-size:.95rem;font-weight:700;color:var(--ink)}
.gp .mega-towns{margin:12px 0 0;font-size:.92rem;line-height:1.55;color:var(--muted)}
/* the shorter menu fits on smaller laptops and iPads held sideways, so it stays out of the Menu button down to 960px */
@media (min-width:960px) and (max-width:1160px){.nav{display:block}.mnav{display:none}.gp .theme-btn{margin-left:0}}
@media (min-width:1100px){.gp .bar>.tel{display:block}}

/* photos from Arnold (2026-11-03) */
.gp .f-more-head{margin-top:clamp(48px,6vw,80px)}
.ph.f-natural{aspect-ratio:auto}

/* the logo's three swishes, full left-to-right versions from Ken (2026-11-03): the red and grey one (img/gp-swish-original.svg)
   large behind every dark page top, and the all-grey one (img/gp-swish-gray.svg) faint behind the light grey bands as texture.
   Both sit behind the content (z-index -1 inside an isolated section), kept faint so text stays readable. */
.gp .phead{position:relative;isolation:isolate;overflow:hidden}
.gp .phead::before{content:"";position:absolute;z-index:-1;top:50%;right:-4%;width:min(78vw,1240px);aspect-ratio:1244/348;
  transform:translateY(-46%);background:url(/img/gp-swish-original.svg) center/contain no-repeat;opacity:.2;pointer-events:none}
@media (max-width:700px){.gp .phead::before{top:40px;right:-35%;width:160vw;transform:none;opacity:.14}}
.gp .sec.band{position:relative;isolation:isolate;overflow:hidden}
.gp .sec.band::before{content:"";position:absolute;z-index:-1;top:6%;bottom:6%;right:-3%;width:min(92vw,1500px);
  background:url(/img/gp-swish-gray.svg) right center/contain no-repeat;opacity:.16;pointer-events:none}
.gp .sec.band:nth-of-type(even)::before{right:auto;left:-3%;background-position:left center}
:root[data-gp-theme="dark"] .gp .sec.band::before{opacity:.07}
@media (max-width:700px){.gp .sec.band::before{width:150vw;right:-30%}.gp .sec.band:nth-of-type(even)::before{left:-30%}}

/* light only (Ken, 2026-11-03): the dark switch is gone, so the Menu button takes the right-hand slot it used to push */
@media (max-width:959px){.gp .mnav{margin-left:auto}}

/* quote forms sent through n8n (2026-11-06): hidden spam trap, status line, thank-you message (added by build_site.py) */
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form{position:relative}
.form-status{grid-column:1/-1;margin:0;font-size:.95rem;font-weight:600}
.form-status:empty{display:none}
.form-status.err{color:var(--accent-ink)}
.form-done h3{margin:0 0 8px}
.form-done:focus{outline:none}
.form button[disabled]{opacity:.6;cursor:wait}
/* quote form layouts: the form gets the wider column, and both stack on phones (an inline style used to stop that) */
.split.form-right{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
@media (max-width:860px){.split.form-right{grid-template-columns:1fr}}
/* quote form heads-up when job details are blank (2026-11-06) */
.form-check{display:grid;gap:10px;padding:18px 20px;border:1.5px solid var(--accent);border-radius:var(--r)}
.form-check p{margin:0}
.form-check-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.form-check .btn{white-space:normal;line-height:1.25;padding:12px 18px;text-align:center}
@media (max-width:640px){.form-check-btns .btn{width:100%}}
.field label .req{color:var(--accent-ink);font-weight:700}
.gp .field input[aria-invalid=true]{border-color:var(--accent-ink);box-shadow:0 0 0 1px var(--accent-ink)}
.field-err{margin:6px 0 0;color:var(--accent-ink);font-size:.9rem;font-weight:600;line-height:1.35}