/* ============================================================================
   SNOOK SHACK MEDIA — shared site styles · REDLINE
   Every selector and custom-property name from the previous sheet is preserved,
   so all 27 subpages restyle from this one file with no HTML changes.
   Only the values and the typography change.
   ========================================================================== */
:root{
  --void:#0B0B0C;      /* ink */
  --panel:#121214;
  --panel2:#17171A;
  --line:#26262A;
  --hair:#1B1B1E;
  --amber:#FF3B14;     /* the signal — red, not gold */
  --amber-dim:#C42D0F;
  --ice:#F2F0EC;
  --steel:#5C5C63;
  --txt:#F2F0EC;
  --dim:#8E8E94;
  --grad:linear-gradient(100deg,#FF3B14,#FF6A45 48%,#FF3B14);
  --disp:"Archivo Black",Archivo,Impact,sans-serif;
  --body:Barlow,-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  --num:"Barlow Condensed",Barlow,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--void);color:var(--txt);font-family:var(--body);font-size:16.5px;line-height:1.6}
img,video{display:block;max-width:100%}
a{color:var(--txt);text-decoration:none}
a:hover{color:var(--amber);text-decoration:none}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
::selection{background:var(--amber);color:#fff}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.mono{font-family:var(--num);font-weight:600;letter-spacing:.14em;text-transform:uppercase}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:60;background:rgba(11,11,12,.94);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);border-bottom:1px solid var(--line)}
.nrow{display:flex;align-items:center;justify-content:space-between;padding:13px 0;gap:14px}
.logo{font-family:var(--disp);font-weight:400;letter-spacing:.02em;font-size:16px;
  color:var(--txt);white-space:nowrap;text-transform:uppercase}
.logo span{color:var(--amber)}
.nlinks{display:flex;gap:19px;font-family:var(--num);font-weight:600;font-size:14px;
  text-transform:uppercase;letter-spacing:.13em;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.nlinks a{color:var(--dim)}
.nlinks a:hover{color:var(--txt)}
.nlinks a.cta{background:var(--amber);color:#fff;padding:9px 17px;border-radius:0;font-weight:700;
  clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%)}
.nlinks a.cta:hover{background:#ff5a3a;color:#fff}

/* ---------- page hero ---------- */
.phero{padding:clamp(56px,9vw,96px) 0 clamp(34px,5vw,54px);
  background:linear-gradient(180deg,#131315 0%,var(--void) 78%);border-bottom:1px solid var(--hair)}
.kicker{font-family:var(--num);font-weight:600;font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--amber);margin-bottom:16px}
h1{font-family:var(--disp);font-weight:400;font-size:clamp(34px,6.4vw,68px);line-height:.94;
  letter-spacing:-.02em;max-width:17ch;text-transform:uppercase;text-wrap:balance}
h1 em{color:var(--amber);font-style:normal}
.lede{color:var(--dim);font-size:clamp(15.5px,2vw,19px);max-width:64ch;margin:20px 0 30px}
.btnrow{display:flex;gap:11px;flex-wrap:wrap}
.btn{display:inline-block;font-family:var(--num);font-weight:700;font-size:16px;letter-spacing:.13em;
  text-transform:uppercase;padding:15px 28px;border-radius:0;transition:.15s}
.btn.gold{background:var(--amber);color:#fff}
.btn.gold:hover{background:#ff5a3a;color:#fff}
.btn.ghost{border:1.5px solid var(--line);color:var(--txt)}
.btn.ghost:hover{border-color:var(--txt);background:var(--txt);color:var(--void)}

/* ---------- sections ---------- */
section{padding:clamp(48px,7vw,86px) 0}
section.alt{background:var(--panel);border-block:1px solid var(--hair)}
h2{font-family:var(--disp);font-weight:400;font-size:clamp(25px,4.2vw,44px);margin-bottom:12px;
  letter-spacing:-.02em;line-height:.98;text-transform:uppercase;text-wrap:balance}
h2 span,h2 em{color:var(--amber);font-style:normal}
h3{font-family:var(--disp);font-weight:400;font-size:19px;margin-bottom:7px;letter-spacing:-.01em;text-transform:uppercase}
.sub{color:var(--dim);max-width:66ch;margin-bottom:34px}
p{margin-bottom:12px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:0;padding:24px}
.card h3{color:var(--txt)}
.card p{color:var(--dim);font-size:15px;margin:0}
.card .big{display:block;font-family:var(--disp);font-weight:400;font-size:36px;color:var(--amber);
  margin-bottom:3px;letter-spacing:-.03em}
.card small{color:var(--steel);font-family:var(--num);font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;font-size:12px}

/* ---------- stat band ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  text-align:center;background:var(--line);border:1px solid var(--line)}
.stats .card{border:0;background:var(--void)}

/* ---------- tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.tier{background:var(--panel2);border:0;border-radius:0;padding:28px}
.tier.feat{background:#1B1214;box-shadow:inset 0 2px 0 var(--amber)}
.tier h3{font-family:var(--num);font-weight:600;font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--steel)}
.price{font-family:var(--disp);font-weight:400;font-size:40px;color:var(--amber);margin:8px 0 2px;letter-spacing:-.03em}
.price small{font-size:14px;color:var(--dim);font-weight:400;font-family:var(--body)}
.tier ul{list-style:none;margin:16px 0 0;font-size:15px;color:#C9C7C2}
.tier li{padding:8px 0;border-bottom:1px solid var(--hair)}
.tier li:last-child{border-bottom:0}
.tier li:before{content:'— ';color:var(--amber)}

/* ---------- quote / close band ---------- */
.close-band{background:var(--panel);text-align:center;border-block:1px solid var(--hair)}
.close-band blockquote{font-family:var(--disp);font-weight:400;font-size:clamp(22px,3.4vw,40px);
  line-height:1.06;max-width:20ch;margin:0 auto 14px;text-transform:uppercase;letter-spacing:-.02em}
.close-band blockquote em{color:var(--amber);font-style:normal}

/* ---------- faq ---------- */
.faq details{background:var(--panel2);border:1px solid var(--line);border-radius:0;margin-bottom:8px;padding:0}
.faq summary{cursor:pointer;font-weight:600;padding:17px 20px;list-style:none;position:relative;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:18px;color:var(--amber);font-size:22px;line-height:1}
.faq details[open] summary::after{content:'–'}
.faq details p{padding:0 20px 17px;color:var(--dim);font-size:15px;margin:0;max-width:70ch}

/* ---------- contact ---------- */
.contact-band{background:linear-gradient(180deg,var(--void) 0%,#141416 100%);text-align:center}
.bigphone{font-family:var(--disp);font-weight:400;font-size:clamp(28px,5vw,50px);color:var(--amber);
  display:block;margin:16px 0 6px;letter-spacing:-.02em}
.bigphone:hover{color:#ff5a3a}
form{max-width:660px;margin:30px auto 0;text-align:left;display:grid;gap:14px}
form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{font-family:var(--num);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--steel);display:block;margin-bottom:5px}
input,select,textarea{width:100%;background:transparent;border:0;border-bottom:1.5px solid var(--line);
  border-radius:0;color:var(--txt);padding:11px 2px;font:inherit;font-size:17px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--amber)}
select{background:var(--panel2);border:1.5px solid var(--line);padding:12px 14px}
button.submit{background:var(--amber);color:#fff;border:0;border-radius:0;padding:16px;
  font-family:var(--num);font-weight:700;font-size:17px;cursor:pointer;letter-spacing:.14em;text-transform:uppercase}
button.submit:hover{background:#ff5a3a}
.formok{display:none;background:var(--panel2);border:1.5px solid var(--amber);border-radius:0;
  padding:24px;text-align:center;margin-top:24px}

/* ---------- breadcrumbs, footer ---------- */
.crumbs{font-family:var(--num);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--steel);padding:14px 0 0}
.crumbs a{color:var(--steel);text-decoration:none}
.crumbs a:hover{color:var(--amber)}
footer{border-top:1px solid var(--line);padding:38px 0 44px;color:var(--dim);font-size:14px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;margin-bottom:24px}
.fgrid h4{font-family:var(--num);font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--txt);margin-bottom:10px}
.fgrid a{display:block;color:var(--dim);padding:3px 0;font-size:14px}
.fgrid a:hover{color:var(--amber)}
.fbase{border-top:1px solid var(--hair);padding-top:18px;text-align:center;font-family:var(--num);
  font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
@media(max-width:700px){.nlinks{gap:12px}.row2{grid-template-columns:1fr}form .row2{grid-template-columns:1fr}}

/* ---------- mobile sticky action bar ---------- */
.mobilebar{display:none}
@media(max-width:700px){
  .mobilebar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;
    background:rgba(11,11,12,.97);border-top:1px solid var(--amber);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .mobilebar a{flex:1;text-align:center;padding:15px 8px;color:var(--txt);
    font-family:var(--num);font-weight:700;font-size:15px;letter-spacing:.12em;text-transform:uppercase}
  .mobilebar a.gold{background:var(--amber);color:#fff}
  body{padding-bottom:54px}
  .nlinks{gap:11px;font-size:12.5px}
  h1{max-width:none}
}

/* ============================================================================
   THE WALL — shared by /portfolio/ and the home page preview
   ========================================================================== */
.wallbar{display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:14px 0 18px}
.wallbar .chip{font-family:var(--num);font-weight:600;font-size:13.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);border:1px solid var(--line);padding:7px 14px;
  background:none;cursor:pointer;transition:.13s;white-space:nowrap}
.wallbar .chip:hover{color:var(--txt);border-color:var(--steel)}
.wallbar .chip.on{background:var(--amber);border-color:var(--amber);color:#fff}
.wallbar .count{margin-left:auto;font-family:var(--num);font-weight:600;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--steel);white-space:nowrap}

.wall{column-count:4;column-gap:8px}
@media(max-width:1100px){.wall{column-count:3}}
@media(max-width:760px){.wall{column-count:2;column-gap:6px}}
.ptile{break-inside:avoid;margin:0 0 8px;position:relative;background:#0F0F11;overflow:hidden;
  cursor:zoom-in;display:block;width:100%;border:0;padding:0;
  opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.ptile.vis{opacity:1;transform:none}
.ptile.hide{display:none}
.ptile img,.ptile video{width:100%;height:auto;display:block;background:#000;transition:transform .5s}
@media(hover:hover){.ptile:hover img,.ptile:hover video{transform:scale(1.035)}
  .ptile:hover figcaption{opacity:1}}
.ptile figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 10px 8px;
  font-family:var(--num);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:linear-gradient(to top,rgba(0,0,0,.86),transparent);
  opacity:0;transition:opacity .25s;pointer-events:none;text-align:left}
@media(hover:none){.ptile figcaption{opacity:1}}
.ptile.vtile{cursor:pointer}
.ptile.vtile .dur{position:absolute;right:7px;top:7px;font-family:var(--num);font-weight:600;
  font-size:11px;letter-spacing:.1em;color:#fff;background:rgba(0,0,0,.6);padding:2px 7px;pointer-events:none}
.ptile.vtile::before{content:'';position:absolute;left:9px;top:9px;z-index:2;pointer-events:none;
  border-style:solid;border-width:5.5px 0 5.5px 9px;
  border-color:transparent transparent transparent var(--amber);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.7));transition:opacity .2s}
.ptile.vtile.playing::before{opacity:0}
.wallmore{display:block;margin:26px auto 0;font-family:var(--num);font-weight:700;font-size:16px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--txt);background:none;
  border:1.5px solid var(--line);padding:14px 32px;cursor:pointer}
.wallmore:hover{border-color:var(--amber);color:var(--amber)}
.wallend{text-align:center;color:var(--steel);font-family:var(--num);font-weight:600;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;padding:28px 0 0}

/* ---------- lightbox ---------- */
#lb{position:fixed;inset:0;z-index:100;background:rgba(6,6,7,.97);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:20px}
#lb.on{display:flex}
#lb img,#lb video{max-width:96vw;max-height:84vh;width:auto;height:auto;object-fit:contain;background:#000}
#lb .hide{display:none !important}
#lb .x,#lb .p,#lb .n{position:absolute;background:none;border:0;cursor:pointer;color:var(--txt);
  font-family:var(--num);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:14px;padding:12px}
#lb .x{top:14px;right:18px}
#lb .p{left:6px;top:50%;transform:translateY(-50%);font-size:30px;padding:18px}
#lb .n{right:6px;top:50%;transform:translateY(-50%);font-size:30px;padding:18px}
#lb .x:hover,#lb .p:hover,#lb .n:hover{color:var(--amber)}
#lb .cap{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:var(--dim);
  font-family:var(--num);font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase}
#lb .cnt{position:absolute;left:0;right:0;top:20px;text-align:center;color:var(--steel);
  font-family:var(--num);font-weight:600;font-size:12px;letter-spacing:.18em}
@media(max-width:700px){#lb .p,#lb .n{font-size:24px;padding:10px}}

/* ---------- builder HUD, lifted form, testimonial ---------- */
#hud{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(11,11,12,.97);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:2px solid var(--amber);
  transform:translateY(110%);transition:transform .3s}
#hud.on{transform:none}
.hudrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0}
.hudrow .ht{font-family:var(--num);font-weight:600;font-size:12px;letter-spacing:.18em;
  color:var(--steel);text-transform:uppercase}
.hudbtn{background:var(--amber);color:#fff;border:0;border-radius:0;padding:14px 28px;
  font-family:var(--num);font-weight:700;font-size:15px;cursor:pointer;letter-spacing:.14em;text-transform:uppercase}
.hudbtn:hover{background:#ff5a3a}
@media(max-width:700px){#hud{bottom:54px}}

.formcard{background:var(--panel);border:1px solid var(--line);border-radius:0;padding:26px;max-width:720px}
.formcard .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:700px){.formcard .row2{grid-template-columns:1fr}}
.go{background:var(--amber);color:#fff;border:0;border-radius:0;padding:15px 30px;
  font-family:var(--num);font-weight:700;font-size:16px;cursor:pointer;letter-spacing:.14em;text-transform:uppercase}
.go:hover{background:#ff5a3a}
.confirm{background:var(--panel);border:1.5px solid var(--amber);border-radius:0;padding:34px;
  max-width:720px;text-align:center}
.confirm h3{font-size:28px;color:var(--amber);margin-bottom:8px}
.confirm p{color:var(--dim);margin-bottom:8px}
.hidden{display:none}
#contact h2{text-align:center}
.tst{padding:clamp(46px,7vw,84px) 0;background:var(--panel);text-align:center;border-block:1px solid var(--hair)}
.tst blockquote{font-family:var(--disp);font-weight:400;font-size:clamp(19px,2.6vw,28px);line-height:1.24;
  max-width:26ch;margin:0 auto 16px;text-transform:uppercase;letter-spacing:-.02em}
.tst cite{color:var(--steel);font-style:normal;font-family:var(--num);font-weight:600;
  font-size:14px;letter-spacing:.14em;text-transform:uppercase}
#fullpkg{margin-bottom:12px}
.bcopy{position:relative;z-index:2;padding:30px;width:100%}
.bcopy .bk{font-family:var(--num);font-weight:600;font-size:12px;letter-spacing:.22em;
  color:var(--amber);text-transform:uppercase}
.bcopy p{color:#C9C7C2;font-size:15px;max-width:56ch}

/* ---------- mobile nav: scrollable link row instead of a clipped wrap ---------- */
@media(max-width:820px){
  .nrow{flex-wrap:wrap;padding:11px 0;gap:9px}
  .nlinks{flex-wrap:nowrap;overflow-x:auto;width:100%;justify-content:flex-start;
    gap:16px;padding-bottom:2px;scrollbar-width:none;-ms-overflow-style:none}
  .nlinks::-webkit-scrollbar{display:none}
  .nlinks a{flex:0 0 auto}
  .nlinks a.cta{margin-left:auto}
}


/* ============================================================================
   HOME PAGE — hero, wall strip, rig, doors, builder
   ========================================================================== */
.hero{position:relative;min-height:86svh;display:flex;align-items:flex-end;overflow:hidden;background:#000}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(11,11,12,.98) 4%,rgba(11,11,12,.22) 48%,rgba(11,11,12,.72) 100%)}
.hin{position:relative;z-index:3;width:100%;padding:120px 0 clamp(56px,8vw,86px)}
.hero h1{font-size:clamp(46px,11vw,150px);line-height:.84;margin:14px 0 0;max-width:none;
  text-shadow:0 2px 30px rgba(0,0,0,.5)}
.hero h1 em{display:block;color:transparent;-webkit-text-stroke:1.5px var(--txt)}
.hsub{max-width:44ch;margin:20px 0 0;font-size:clamp(15.5px,2.2vw,19px);color:#D6D4CF}
.hero .btnrow{margin-top:26px}
.hstats{display:flex;gap:clamp(20px,5vw,54px);margin-top:38px;flex-wrap:wrap}
.hstats b{display:block;font-family:var(--disp);font-weight:400;font-size:clamp(20px,3vw,30px);
  color:var(--amber);letter-spacing:-.02em}
.hstats small{color:var(--dim);font-family:var(--num);font-weight:600;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase}
.tick{position:absolute;left:0;right:0;bottom:0;z-index:4;border-top:1px solid var(--line);
  background:rgba(11,11,12,.86);overflow:hidden}
.tickrow{display:flex;gap:40px;width:max-content;padding:11px 0;animation:sstick 30s linear infinite;
  font-family:var(--num);font-weight:600;font-size:13.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--steel);white-space:nowrap}
.tickrow b{color:var(--txt);font-weight:600}
@keyframes sstick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tickrow{animation:none}}

.wallstrip{padding:clamp(44px,6vw,76px) 0 clamp(34px,5vw,58px)}
.wallhd{display:flex;gap:24px;align-items:flex-end;flex-wrap:wrap;margin-bottom:22px}
.wallnote{color:var(--dim);font-size:15px;max-width:34ch;margin:0 0 0 auto}
.wallnote b{color:var(--amber);font-family:var(--disp);font-weight:400;font-size:19px;letter-spacing:-.02em}
.wallpreview{column-count:initial;display:flex;gap:8px;overflow-x:auto;
  padding:0 clamp(18px,4vw,40px) 14px;margin-bottom:22px;
  scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.wallpreview::-webkit-scrollbar{height:5px}
.wallpreview::-webkit-scrollbar-thumb{background:var(--line)}
.wallpreview .ptile{flex:0 0 auto;height:clamp(190px,24vw,280px);width:auto;margin:0;
  scroll-snap-align:start;cursor:pointer}
.wallpreview .ptile img,.wallpreview .ptile video{height:100%;width:auto;max-width:none}
.wallhint{color:var(--steel);font-family:var(--num);font-weight:600;font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;padding:0 clamp(18px,4vw,40px) 18px}

.rigwrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,60px);align-items:center;margin-top:30px}
@media(max-width:860px){.rigwrap{grid-template-columns:1fr}}
.spec{margin-top:24px;border-top:1px solid var(--line)}
.spec div{display:flex;gap:18px;padding:12px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.spec dt{font-family:var(--num);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel);width:104px;flex:0 0 auto}
.spec dd{margin:0;font-size:15.5px}
.spec dd b{color:var(--amber);font-weight:600}
.rigshot{position:relative;aspect-ratio:4/3;overflow:hidden;background:#000;margin:0}
.rigshot video{width:100%;height:100%;object-fit:cover}
.rigshot figcaption{position:absolute;left:12px;bottom:12px;font-family:var(--num);font-weight:700;
  font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;background:var(--amber);color:#fff;padding:5px 11px}

.doors{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);border-block:1px solid var(--line)}
@media(max-width:760px){.doors{grid-template-columns:1fr}}
.door{position:relative;min-height:clamp(300px,40vw,440px);overflow:hidden;background:#000;
  display:flex;align-items:flex-end}
.door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45;transition:.5s}
.door:hover img{opacity:.72;transform:scale(1.04)}
.door::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(11,11,12,.95),transparent 64%)}
.dtx{position:relative;z-index:2;padding:clamp(20px,3vw,34px)}
.dtx h3{font-size:clamp(26px,4.4vw,46px);margin-bottom:10px}
.dtx p{color:#CFCDC8;max-width:36ch;font-size:15.5px;margin:0}
.dtx .arrow{display:inline-block;margin-top:16px;font-family:var(--num);font-weight:700;font-size:15px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--amber)}

/* ---------- the builder, in Redline ---------- */
#build{padding:clamp(52px,8vw,92px) 0;background:linear-gradient(180deg,#131315 0%,var(--void) 62%);
  border-top:1px solid var(--hair)}
.bhead .bk{font-family:var(--num);font-weight:600;font-size:13px;letter-spacing:.22em;
  color:var(--amber);text-transform:uppercase}
.bhead h2{margin:8px 0 10px}
.bhead p{color:var(--dim);max-width:62ch;margin-bottom:32px}
.steps{display:flex;gap:7px;margin-bottom:26px;flex-wrap:wrap}
.stepdot{font-family:var(--num);font-weight:600;font-size:12.5px;letter-spacing:.14em;color:var(--steel);
  border:1px solid var(--line);border-radius:0;padding:7px 15px;text-transform:uppercase}
.stepdot.on{color:#fff;background:var(--amber);border-color:var(--amber);font-weight:700}
.bgrid{display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:start}
@media(max-width:900px){.bgrid{grid-template-columns:1fr}}
.gaugebox{background:var(--panel);border:1px solid var(--line);border-radius:0;padding:22px;
  text-align:center;position:sticky;top:76px}
.gaugebox svg{width:100%;max-width:230px}
.gtotal{font-family:var(--disp);font-weight:400;font-size:40px;color:var(--amber);letter-spacing:-.03em}
.svcgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:9px}
.svc{background:var(--panel2);border:1.5px solid var(--line);border-radius:0;padding:15px 16px;
  cursor:pointer;display:flex;justify-content:space-between;gap:9px;align-items:center;transition:.14s}
.svc:hover{border-color:var(--steel)}
.svc.on{border-color:var(--amber);background:rgba(255,59,20,.09)}
.svc b{font-size:15px;display:block}
.svc small{color:var(--dim);font-size:12.5px}
.svc .pr{font-family:var(--disp);font-weight:400;color:var(--amber);font-size:17px;
  white-space:nowrap;letter-spacing:-.02em}
.svc.locked{opacity:.4;cursor:not-allowed}
.hudrow .hv{font-family:var(--disp);font-weight:400;font-size:25px;color:var(--amber);letter-spacing:-.02em}
.formbtns{display:flex;gap:11px;margin-top:20px;flex-wrap:wrap}
.back{background:none;border:1.5px solid var(--line);color:var(--txt);border-radius:0;
  padding:14px 24px;cursor:pointer;font-family:var(--num);font-weight:700;font-size:15px;
  letter-spacing:.13em;text-transform:uppercase}
.back:hover{border-color:var(--txt)}
.recap{text-align:left;background:var(--panel2);border:1.5px solid var(--amber);border-radius:0;
  padding:18px 20px;margin:18px 0;font-size:15px}
.recap div{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-bottom:1px solid var(--hair)}
.recap div:last-child{border:0;font-weight:700;color:var(--amber);font-family:var(--num);font-size:19px}

/* ---------- builder: full-package card, gauge label, service grid headings ---------- */
.full{border:1.5px solid var(--line);background:var(--panel2);padding:22px 24px;margin-bottom:14px;
  cursor:pointer;transition:.15s;display:block}
.full:hover{border-color:var(--steel)}
.full.on{border-color:var(--amber);background:rgba(255,59,20,.09)}
.full .pick{font-family:var(--num);font-weight:600;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--steel)}
.full.on .pick{color:var(--amber)}
.full h3{font-size:clamp(20px,2.6vw,27px);margin:5px 0 2px}
.full .fp{font-family:var(--disp);font-weight:400;font-size:34px;color:var(--amber);
  letter-spacing:-.03em;margin-bottom:8px}
.full p{color:var(--dim);font-size:14.5px;margin:0;max-width:62ch}
.glabel{font-family:var(--num);font-weight:600;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel);margin-top:4px}
.svlabel,.addlabel{font-family:var(--num);font-weight:600;font-size:12.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--steel);margin:22px 0 10px}

/* ---- Tap targets, phone only (added 2026-09-16 pre-launch) ----------------
   Footer and nav links measured 18-20px tall at 390px wide. Google wants a
   48px target with 8px of spacing; this gets the footer to 37px and the nav
   strip to 40px without touching desktop layout. */
@media (max-width:760px){
  .fgrid a{padding:9px 0;font-size:15px}
  .nlinks a{padding:10px 0}
  .nlinks a.cta{padding:10px 17px}
  .fbase{line-height:1.75}
}