/* ============================================================
   PILANTZ MOBILE SERVICES — design system
   Palette: iron/charcoal base, brushed silver, weld-spark accent
   Type: Big Shoulders Display / Barlow / IBM Plex Mono
   ============================================================ */
:root{
  --iron:#101216;
  --charcoal:#16181d;
  --panel:#1c1f25;
  --raised:#23272e;
  --line:#2c313a;
  --line-lt:#3a404b;
  --silver:#c9ced7;
  --chrome:#eef0f4;
  --steel:#8b929e;
  --steel-dk:#5f6672;
  --spark:#ff8a1e;
  --spark-hot:#ffb15c;
  --spark-dim:rgba(255,138,30,.14);
  /* Weld temper oxides. When steel is heated, the oxide layer runs straw then
     blue either side of the bead. These two are the real colours that appear on
     welded steel, and they are the only cool notes allowed in an otherwise warm
     accent scheme: they earn their place by being physically true. */
  --temper-straw:#c9a227;
  --temper-blue:#4a6b8a;
  /* Micro grain. Grayscale fractal noise, alpha baked in, tiled as a plain
     background layer so it never collides with a pseudo element. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  --ok:#69c774;
  --bad:#e05656;
  --disp:'Big Shoulders Display',Impact,'Arial Narrow',sans-serif;
  --body:'Barlow','Segoe UI',system-ui,sans-serif;
  --mono:'IBM Plex Mono','Courier New',monospace;
  --max:1180px;
  --rad:10px;
  --sh:0 18px 50px rgba(0,0,0,.45);
  --ease:cubic-bezier(.22,.9,.28,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html:focus-within{scroll-behavior:smooth}
body{
  font-family:var(--body);font-size:17px;line-height:1.65;
  color:var(--silver);background:var(--iron);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%}
a{color:var(--chrome);text-decoration:none}
a:hover{color:var(--spark-hot)}
ul{list-style:none}
::selection{background:var(--spark);color:#14161a}
:focus-visible{outline:2px solid var(--spark);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--spark);color:#14161a;padding:.6rem 1rem;z-index:999;font-weight:700;border-radius:6px}
.skip:focus{left:8px}

/* -------- texture: brushed steel + shop-floor grain --------
   Real brushed metal has three things a flat gradient does not: an anisotropic
   grain that runs one way, a broad specular sheen that MOVES as your angle to
   the surface changes, and micro pitting. All three below.
   The sheen is driven by --mx/--my, which main.js sets from the pointer, so the
   highlight slides across the metal as you move. Falls back to a fixed
   top-left highlight when JS has not run. */
.brushed{
  background:
    var(--grain),
    radial-gradient(130% 90% at var(--mx,26%) var(--my,-10%),rgba(255,255,255,.11),transparent 58%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.030) 0 1px,rgba(0,0,0,.022) 1px 2px,transparent 2px 5px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.013) 0 1px,transparent 1px 7px),
    linear-gradient(180deg,#2b3038 0,var(--raised) 16%,var(--panel) 84%,#161a1e 100%);
  background-size:120px 120px,auto,auto,auto,auto;
  /* machined edge: light catches the top, the bottom sits in shadow */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.55);
}
.grain::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(1200px 500px at 85% -10%,rgba(255,138,30,.05),transparent 60%),
    radial-gradient(900px 420px at 8% 108%,rgba(201,206,215,.045),transparent 60%);
}

/* -------- type scale -------- */
h1,h2,h3,.disp{font-family:var(--disp);color:var(--chrome);line-height:.96;letter-spacing:.5px;text-transform:uppercase;font-weight:800}
h1{font-size:clamp(3rem,8.5vw,6.4rem)}
h2{font-size:clamp(2.1rem,4.6vw,3.4rem)}
h3{font-size:clamp(1.3rem,2.4vw,1.7rem);letter-spacing:1px}
p{max-width:64ch}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--silver)}
.eyebrow{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--spark);display:inline-flex;align-items:center;gap:.7rem;margin-bottom:1rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--spark)}
.muted{color:var(--steel)}
.mono{font-family:var(--mono)}

/* -------- layout -------- */
/* Padding based container, not width:92vw. vw units include the scrollbar and
   cannot account for a grid item that refuses to shrink, which is exactly how
   this page came to scroll sideways by 28px on a 390px phone. */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2.5rem)}
section{position:relative;padding:clamp(4.2rem,9vw,7.5rem) 0}
.grid2{display:grid;gap:clamp(2rem,4vw,4rem);grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:center}
.center{text-align:center}
.center p{margin-inline:auto}

/* weld-bead section divider
   A real MIG bead is a row of overlapping crescent ripples: each has a bright
   specular crest, a shadowed trailing edge where the next ripple laps over it,
   and a heat affected zone either side running straw then blue. Three layers:
   ::before paints the HAZ temper bands, ::after paints the bead itself. */
.bead{height:26px;position:relative;overflow:hidden;background:var(--charcoal)}
.bead::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    transparent 0 4px,
    rgba(74,107,138,.16) 4px 6px,
    rgba(201,162,39,.14) 6px 8px,
    transparent 8px 18px,
    rgba(201,162,39,.12) 18px 20px,
    rgba(74,107,138,.15) 20px 22px,
    transparent 22px);
}
.bead::after{
  content:"";position:absolute;left:0;right:0;top:7px;height:12px;
  background-image:
    /* specular crest on each ripple */
    radial-gradient(circle at 50% 135%,rgba(255,255,255,.34) 0 11%,transparent 24%),
    /* ripple body with the lap shadow on its trailing edge */
    radial-gradient(circle at 50% 145%,#8d949e 0 44%,#4b515b 44% 50%,transparent 51%),
    linear-gradient(180deg,#6e757f,#33383f);
  background-size:11px 100%,11px 100%,100% 100%;
  background-repeat:repeat-x,repeat-x,no-repeat;
  box-shadow:0 2px 3px rgba(0,0,0,.55),inset 0 -1px 1px rgba(0,0,0,.5);
}

/* -------- nav -------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  background:rgba(16,18,22,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
.nav.scrolled{border-color:var(--line);background:rgba(16,18,22,.92)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:74px}
.brand{display:flex;align-items:center;gap:.8rem;color:var(--chrome)}
.brand svg{height:44px;width:auto}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:var(--disp);font-weight:800;font-size:1.45rem;letter-spacing:2px}
.brand-sub{font-family:var(--mono);font-size:.56rem;letter-spacing:.42em;color:var(--steel)}
.nav-links{display:flex;gap:1.7rem;align-items:center}
.nav-links a{font-weight:600;font-size:.92rem;color:var(--silver);position:relative;padding:.3rem 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--spark);transition:width .28s var(--ease)}
.nav-links a:hover{color:var(--chrome)}
.nav-links a:hover::after,.nav-links a[aria-current]::after{width:100%}
.nav-cta{display:flex;gap:.7rem;align-items:center}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:.55rem .7rem;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--silver);margin:5px 0;transition:.3s}
.mnav{display:none}
@media(max-width:980px){
  .nav-links,.nav-cta .btn-ghost{display:none}
  .burger{display:block}
  .mnav{position:fixed;inset:74px 0 auto 0;z-index:59;background:var(--charcoal);border-bottom:1px solid var(--line);
    display:flex;flex-direction:column;padding:1rem 4vw 1.6rem;gap:.2rem;transform:translateY(-110%);transition:transform .35s var(--ease)}
  .mnav.open{transform:none}
  .mnav a{padding:.85rem .4rem;border-bottom:1px solid var(--line);font-weight:600}
  body.mopen .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.mopen .burger span:nth-child(2){opacity:0}
  body.mopen .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* -------- buttons -------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-weight:700;font-size:1rem;letter-spacing:.4px;
  padding:.95rem 1.9rem;border-radius:8px;border:1px solid transparent;
  cursor:pointer;transition:transform .22s var(--ease),box-shadow .22s,background .22s,border-color .22s;
  position:relative;overflow:hidden;white-space:nowrap;
}
.btn-spark{background:linear-gradient(180deg,var(--spark-hot),var(--spark));color:#181205;box-shadow:0 8px 26px rgba(255,138,30,.28)}
.btn-spark:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(255,138,30,.4);color:#181205}
.btn-spark::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-22deg);transition:left .6s var(--ease)}
.btn-spark:hover::after{left:130%}
.btn-ghost{border-color:var(--line-lt);color:var(--chrome);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--silver);background:rgba(255,255,255,.06);transform:translateY(-2px);color:var(--chrome)}
.btn-big{padding:1.15rem 2.4rem;font-size:1.08rem}
.btn svg{width:18px;height:18px}

/* -------- hero -------- */
.hero{min-height:100svh;display:flex;align-items:center;padding:8.5rem 0 4rem;overflow:hidden}
#arc-canvas{position:absolute;inset:0;z-index:0;opacity:.9}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(1000px 620px at 68% 30%,rgba(255,138,30,.08),transparent 62%),
             linear-gradient(180deg,rgba(16,18,22,.15),rgba(16,18,22,.92) 88%)}
.hero .wrap{position:relative;z-index:2}
.hero-badge{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--silver);
  border:1px solid var(--line-lt);border-radius:999px;padding:.5rem 1.05rem;background:rgba(22,24,29,.6);margin-bottom:1.6rem}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(105,199,116,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(105,199,116,0)}100%{box-shadow:0 0 0 0 rgba(105,199,116,0)}}
.hero h1{margin-bottom:1.1rem}
.hero h1 .l{display:block;overflow:hidden}
.hero h1 .l>span{display:inline-block}
.arc-word{position:relative;color:var(--spark);text-shadow:0 0 34px rgba(255,138,30,.35)}
.arc-line{position:absolute;left:0;bottom:-.08em;width:100%;height:.09em;overflow:visible}
.arc-line path{stroke:var(--spark);stroke-width:7;fill:none;stroke-linecap:round;
  stroke-dasharray:600;stroke-dashoffset:600;filter:drop-shadow(0 0 8px rgba(255,138,30,.8))}
.hero.lit .arc-line path{animation:draw 1s .9s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero-sub{font-size:clamp(1.05rem,1.7vw,1.3rem);max-width:56ch;margin-bottom:2rem}
.hero-sub strong{color:var(--chrome)}
.hero-ctas{display:flex;gap:.9rem;flex-wrap:wrap;margin-bottom:2.4rem}
.hero-trust{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;font-size:.86rem;color:var(--steel)}
.hero-trust span{display:inline-flex;align-items:center;gap:.45rem}
.hero-trust svg{width:15px;height:15px;color:var(--spark)}
.hero-plates{position:absolute;right:4vw;bottom:2.2rem;z-index:2;display:flex;gap:.7rem}
@media(max-width:900px){.hero-plates{position:static;margin-top:2rem}}

/* stamped state tag */
.tag{
  font-family:var(--disp);font-weight:800;font-size:1.5rem;letter-spacing:2px;color:var(--steel);
  background:linear-gradient(180deg,#2a2e36,#1d2026);
  border:1px solid var(--line-lt);border-radius:8px;padding:.55rem 1.05rem .5rem;position:relative;
  text-shadow:0 1px 0 rgba(255,255,255,.06),0 -1px 1px rgba(0,0,0,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 6px 18px rgba(0,0,0,.35);
}
.tag::before,.tag::after{content:"";position:absolute;top:50%;width:6px;height:6px;border-radius:50%;
  transform:translateY(-50%);background:radial-gradient(circle at 35% 30%,#565d68,#20242b 70%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.15)}
.tag::before{left:6px}.tag::after{right:6px}

/* -------- marquee ticker -------- */
.ticker{border-block:1px solid var(--line);background:var(--charcoal);overflow:hidden;padding:.9rem 0}
.ticker-track{display:flex;gap:3rem;width:max-content;animation:tick 30s linear infinite;
  font-family:var(--disp);font-weight:700;font-size:1.05rem;letter-spacing:3px;color:var(--steel-dk);text-transform:uppercase}
.ticker-track b{color:var(--spark);font-weight:700}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker:hover .ticker-track{animation-play-state:paused}

/* -------- service cards (3D tilt) -------- */
.cards{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));perspective:1400px}
.card{
  position:relative;border:1px solid var(--line);border-radius:var(--rad);
  padding:1.9rem 1.6rem 1.7rem;min-height:300px;display:flex;flex-direction:column;gap:.85rem;
  transform-style:preserve-3d;transition:transform .35s var(--ease),border-color .3s,box-shadow .35s;
  will-change:transform;
}
.card:hover{border-color:var(--line-lt);box-shadow:var(--sh)}
.card .glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px 260px at var(--gx,50%) var(--gy,20%),rgba(255,255,255,.09),transparent 60%)}
.card:hover .glare{opacity:1}
.card-ico{width:52px;height:52px;color:var(--spark);transform:translateZ(38px)}
.card h3{transform:translateZ(30px)}
.card p{font-size:.95rem;color:var(--steel);transform:translateZ(18px);flex:1}
.card .spec{font-family:var(--mono);font-size:.66rem;letter-spacing:.26em;color:var(--steel-dk);transform:translateZ(12px)}
.card .more{font-weight:700;font-size:.9rem;color:var(--chrome);display:inline-flex;gap:.4rem;align-items:center;transform:translateZ(24px)}
.card .more::after{content:"\2192";transition:transform .25s}
.card:hover .more::after{transform:translateX(5px)}
.card:hover .more{color:var(--spark-hot)}

/* -------- comparison table -------- */
.compare{overflow-x:auto;border:1px solid var(--line);border-radius:var(--rad)}
.compare table{width:100%;border-collapse:collapse;min-width:640px}
.compare th,.compare td{padding:1rem 1.2rem;text-align:left;border-bottom:1px solid var(--line);font-size:.95rem}
.compare thead th{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);background:var(--charcoal)}
.compare .you{background:var(--spark-dim);border-inline:1px solid rgba(255,138,30,.3)}
.compare thead .you{color:var(--spark);font-weight:700}
.compare td:first-child{color:var(--silver);font-weight:600}
.compare .y{color:var(--ok);font-weight:700}
.compare .n{color:var(--steel-dk)}
.compare tbody tr:last-child td{border-bottom:none}

/* -------- process (earned sequence) -------- */
.steps{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));counter-reset:st}
.step{position:relative;border:1px solid var(--line);border-radius:var(--rad);padding:2.2rem 1.6rem 1.7rem;counter-increment:st}
.step::before{content:"0" counter(st);position:absolute;top:-1.05rem;left:1.3rem;
  font-family:var(--disp);font-weight:800;font-size:2.2rem;color:var(--spark);
  background:var(--iron);padding:0 .5rem;letter-spacing:2px}
.step h3{margin-bottom:.5rem}
.step p{font-size:.95rem;color:var(--steel)}

/* -------- stats band -------- */
.stats{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));text-align:center}
.stat{border:1px solid var(--line);border-radius:var(--rad);padding:1.7rem 1rem}
.stat b{font-family:var(--disp);font-weight:800;font-size:clamp(2.4rem,4.5vw,3.4rem);color:var(--chrome);display:block;line-height:1}
.stat b .u{color:var(--spark)}
.stat span{font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--steel)}

/* -------- state plates section -------- */
.plates{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.plate{position:relative;border:1px solid var(--line-lt);border-radius:12px;padding:2rem 1.7rem 1.8rem;
  overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s;display:block;color:var(--silver)}
.plate:hover{transform:translateY(-6px);box-shadow:var(--sh);color:var(--silver)}
.plate::after{content:attr(data-abbr);position:absolute;right:-1rem;bottom:-2.6rem;
  font-family:var(--disp);font-weight:800;font-size:9.5rem;letter-spacing:-2px;color:rgba(255,255,255,.035);
  text-shadow:0 1px 0 rgba(255,255,255,.03);pointer-events:none;line-height:1}
.plate h3{margin-bottom:.4rem}
.plate .cities{font-size:.88rem;color:var(--steel);margin-bottom:1rem}
.plate .go{font-weight:700;color:var(--spark);font-size:.92rem}
.plate .rivet{position:absolute;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#5d6470,#22262d 72%);box-shadow:inset 0 1px 1px rgba(255,255,255,.2)}
.plate .rivet:nth-child(1){top:10px;left:10px}.plate .rivet:nth-child(2){top:10px;right:10px}
.plate .rivet:nth-child(3){bottom:10px;left:10px}.plate .rivet:nth-child(4){bottom:10px;right:10px}

/* -------- honesty box / guarantee -------- */
.box{border:1px solid var(--line);border-left:4px solid var(--spark);border-radius:0 var(--rad) var(--rad) 0;
  padding:1.6rem 1.7rem;background:var(--panel)}
.box.trust{border-left-color:var(--ok)}
.box h3{font-size:1.15rem;margin-bottom:.6rem;letter-spacing:.8px}
.box ul{display:grid;gap:.45rem;font-size:.94rem;color:var(--steel)}
.box li{padding-left:1.4rem;position:relative}
.box li::before{content:"";position:absolute;left:0;top:.52em;width:8px;height:8px;
  background:var(--spark);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.box.trust li::before{background:var(--ok)}
.guar{display:flex;gap:1.4rem;align-items:flex-start;border:1px dashed var(--line-lt);border-radius:var(--rad);
  padding:1.8rem;background:linear-gradient(120deg,rgba(255,138,30,.06),transparent 55%)}
.guar svg{width:56px;height:56px;flex:none;color:var(--spark)}

/* -------- checklist / scope lists -------- */
.scope{display:grid;gap:.55rem;columns:auto}
@media(min-width:760px){.scope{grid-template-columns:1fr 1fr}}
.scope li{display:flex;gap:.7rem;align-items:flex-start;font-size:.98rem}
.scope svg{width:19px;height:19px;flex:none;margin-top:.2rem;color:var(--spark)}

/* -------- testimonials -------- */
.quotes{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(285px,1fr))}
.quote{border:1px solid var(--line);border-radius:var(--rad);padding:1.8rem;position:relative}
.quote::before{content:"\201C";font-family:var(--disp);font-size:4.5rem;line-height:0;
  position:absolute;top:2.2rem;left:1.4rem;color:var(--spark);opacity:.35}
.quote p{font-size:.98rem;padding-top:1.2rem}
.quote .who{margin-top:1.1rem;display:flex;align-items:center;gap:.8rem}
.quote .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#3a3f4b,#23272e);
  border:1px solid var(--line-lt);display:grid;place-items:center;font-family:var(--disp);font-weight:800;color:var(--silver)}
.quote .who b{display:block;font-size:.92rem;color:var(--chrome)}
.quote .who span{font-size:.78rem;color:var(--steel)}
.starr{color:var(--spark);letter-spacing:2px;font-size:.85rem}

/* -------- FAQ -------- */
.faq{display:grid;gap:.7rem;max-width:820px;margin-inline:auto}
.faq details{border:1px solid var(--line);border-radius:var(--rad);background:var(--panel);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;
  padding:1.15rem 1.4rem;font-weight:700;color:var(--chrome);font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--disp);font-size:1.6rem;color:var(--spark);transition:transform .3s var(--ease);line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 1.4rem 1.3rem;color:var(--steel);font-size:.97rem}
.faq details[open]{border-color:var(--line-lt)}

/* -------- forms -------- */
.form{display:grid;gap:1rem}
.form label{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);display:block;margin-bottom:.4rem}
.form input,.form select,.form textarea{
  width:100%;background:var(--charcoal);border:1px solid var(--line);border-radius:8px;
  color:var(--chrome);font:inherit;padding:.9rem 1rem;transition:border-color .25s,box-shadow .25s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--spark);box-shadow:0 0 0 3px var(--spark-dim)}
.form .row{display:grid;gap:1rem}
@media(min-width:640px){.form .row{grid-template-columns:1fr 1fr}}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.qsteps{border:1px solid var(--line);border-radius:var(--rad);padding:1.9rem;background:var(--panel);position:relative}
.qbar{height:5px;border-radius:999px;background:var(--line);overflow:hidden;margin-bottom:1.6rem}
.qbar i{display:block;height:100%;width:33%;background:linear-gradient(90deg,var(--spark),var(--spark-hot));transition:width .45s var(--ease)}
.qstep{display:none}
.qstep.on{display:block;animation:fadeUp .4s var(--ease)}
.qstep h3{margin-bottom:1.1rem}
.pills{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.pill{border:1px solid var(--line);border-radius:8px;padding:1rem .8rem;text-align:center;cursor:pointer;
  font-weight:600;color:var(--silver);background:var(--charcoal);transition:.22s}
.pill:hover{border-color:var(--line-lt)}
.pill.sel{border-color:var(--spark);background:var(--spark-dim);color:var(--spark-hot)}
.qnav{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem}
.qdone{text-align:center;padding:1.5rem 0;display:none}
.qdone.on{display:block;animation:fadeUp .5s var(--ease)}
.qdone svg{width:60px;height:60px;color:var(--ok);margin:0 auto 1rem}
.err{color:var(--bad);font-size:.85rem;margin-top:.4rem;display:none}
.err.on{display:block}

/* -------- CTA band -------- */
.cta-band{background:
  radial-gradient(700px 320px at 80% 0,rgba(255,138,30,.12),transparent 60%),
  linear-gradient(180deg,var(--panel),var(--charcoal));
  border-block:1px solid var(--line)}
.cta-band .wrap{display:grid;gap:2rem;align-items:center}
@media(min-width:900px){.cta-band .wrap{grid-template-columns:1.3fr 1fr}}

/* -------- slide-in CTA -------- */
.slidein{position:fixed;right:1rem;bottom:5.4rem;z-index:55;max-width:330px;
  border:1px solid var(--line-lt);border-radius:12px;background:var(--raised);padding:1.2rem 1.2rem 1.1rem;
  box-shadow:var(--sh);transform:translateX(120%);transition:transform .5s var(--ease)}
.slidein.on{transform:none}
.slidein b{color:var(--chrome);display:block;margin-bottom:.3rem}
.slidein p{font-size:.86rem;color:var(--steel);margin-bottom:.8rem}
.slidein .x{position:absolute;top:.4rem;right:.6rem;background:none;border:none;color:var(--steel);font-size:1.2rem;cursor:pointer}
@media(max-width:640px){.slidein{display:none}}

/* -------- sticky mobile call bar -------- */
.callbar{position:fixed;inset:auto 0 0 0;z-index:58;display:none;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .4s var(--ease)}
.callbar.on{transform:none}
.callbar a{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem;font-weight:800;font-size:1rem}
.callbar .c1{background:linear-gradient(180deg,var(--spark-hot),var(--spark));color:#181205}
.callbar .c2{background:var(--raised);color:var(--chrome)}
.callbar svg{width:18px;height:18px}
@media(max-width:860px){.callbar{display:grid}body{padding-bottom:56px}}

/* -------- footer -------- */
footer{border-top:1px solid var(--line);background:var(--charcoal);padding:3.6rem 0 2rem;font-size:.93rem}
.f-grid{display:grid;gap:2.4rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-bottom:2.6rem}
.f-grid h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--steel);margin-bottom:1rem}
.f-grid a{display:block;padding:.28rem 0;color:var(--silver);font-size:.92rem}
.f-grid a:hover{color:var(--spark-hot)}
.f-bottom{border-top:1px solid var(--line);padding-top:1.4rem;display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;color:var(--steel-dk);font-size:.82rem}
.f-brand svg{height:52px;width:auto;margin-bottom:1rem}
.f-brand p{color:var(--steel);font-size:.9rem}

/* -------- page hero (interior) -------- */
.phero{padding:10rem 0 4rem;position:relative;overflow:hidden;
  background:radial-gradient(900px 420px at 78% -10%,rgba(255,138,30,.09),transparent 60%),var(--iron)}
.crumbs{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-dk);margin-bottom:1.2rem}
.crumbs a{color:var(--steel)}
.crumbs a:hover{color:var(--spark-hot)}

/* -------- reveal + parallax -------- */
.rv{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
[data-plx]{will-change:transform}

/* -------- gallery placeholders -------- */
.gal{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.gal figure{border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;background:var(--panel)}
.gal .ph{aspect-ratio:4/3;display:grid;place-items:center;color:var(--steel-dk);font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;
  background:repeating-linear-gradient(45deg,var(--panel) 0 14px,var(--charcoal) 14px 28px)}
.gal figcaption{padding:.8rem 1rem;font-size:.85rem;color:var(--steel)}

@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* -------- reduced motion -------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  #arc-canvas{display:none}
  .ticker-track{animation:none}
}
@media print{.nav,.callbar,.slidein,#arc-canvas{display:none!important}body{background:#fff;color:#111}}

/* ============================================================================
   MATERIAL + RESPONSIVE LAYER
   Appended so it overrides the base rules above at equal specificity. Two jobs:
   make the surfaces read as fabricated metal, and make the page behave on
   phones and tablets.
   ========================================================================= */

/* -------- 1. overflow containment ----------------------------------------
   Grid and flex items default to min-width:auto, so an item whose content
   cannot shrink pushes past its track instead of wrapping. That is what made
   .cta-band .wrap 402px wide inside a 390px viewport. */
.grid2>*,.cta-band .wrap>*,.cards>*,.plates>*,.steps>*,.stats>*,.f-grid>*,.gal>*{min-width:0}
.guar,.guar>*{min-width:0}
h1,h2,h3,.disp{overflow-wrap:break-word}
.f-bottom span,.crumbs{overflow-wrap:anywhere}

/* -------- 2. spherical rivets with a contact shadow ---------------------- */
.plate .rivet,.tag::before,.tag::after{
  background:
    radial-gradient(circle at 32% 26%,#8e96a3 0 18%,#5d6470 42%,#2a2e36 78%,#1a1d22 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.34),
    inset 0 -1px 1px rgba(0,0,0,.6),
    0 1px 2px rgba(0,0,0,.7);
}
.plate .rivet{width:10px;height:10px}

/* -------- 3. stamped state plate ----------------------------------------
   Debossed type: a dark shadow above and a light one below reads as struck
   INTO the metal rather than sitting on it. */
.tag{
  background:
    var(--grain),
    linear-gradient(180deg,#33383f 0,#262a31 42%,#1b1e24 100%);
  background-size:120px 120px,auto;
  color:#aab1bc;
  text-shadow:0 -1px 1px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.13);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -2px 3px rgba(0,0,0,.55),
    0 8px 20px rgba(0,0,0,.45);
}

/* -------- 4. diamond tread plate -----------------------------------------
   Staggered raised diamonds, the pattern on every truck bed and shop step.
   Used on the stats band so the numbers sit on something physical. */
.tread{
  background-color:#1b1f25;
  background-image:
    var(--grain),
    linear-gradient(135deg,rgba(255,255,255,.05) 0 25%,transparent 25% 50%,rgba(255,255,255,.05) 50% 75%,transparent 75%),
    linear-gradient(45deg,rgba(0,0,0,.34) 0 25%,transparent 25% 50%,rgba(0,0,0,.34) 50% 75%,transparent 75%),
    linear-gradient(135deg,rgba(255,255,255,.035) 0 25%,transparent 25% 50%,rgba(255,255,255,.035) 50% 75%,transparent 75%),
    linear-gradient(45deg,rgba(0,0,0,.22) 0 25%,transparent 25% 50%,rgba(0,0,0,.22) 50% 75%,transparent 75%);
  background-size:120px 120px,20px 20px,20px 20px,20px 20px,20px 20px;
  background-position:0 0,0 0,0 0,10px 10px,10px 10px;
}

/* -------- 5. machined bevels on panels ---------------------------------- */
.card,.step,.plate,.stat,.box,.qsteps,.faq details,.compare{
  background-image:var(--grain),linear-gradient(180deg,rgba(255,255,255,.018),transparent 40%);
  background-size:120px 120px,auto;
}
.card,.plate,.stat{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.5)}
.card:hover,.plate:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.55),var(--sh);
}

/* -------- 6. spark bloom behind the hero arc ----------------------------- */
.arc-word::before{
  content:"";position:absolute;inset:-.35em -.5em -.5em;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 120% at 50% 60%,rgba(255,138,30,.20),transparent 70%);
  filter:blur(6px);
}

/* -------- 7. TABLET TIER -------------------------------------------------
   The base grids jump straight from one column to three. Between 700 and
   1024 that leaves cards either enormous or cramped, so pin the counts. */
@media(min-width:700px) and (max-width:1024px){
  .cards,.plates,.gal,.quotes{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  .grid2{grid-template-columns:1fr;gap:2.4rem}
  .card{min-height:0}
  h1{font-size:clamp(3.1rem,7vw,4.6rem)}
}
/* Five service cards read badly as 2+2+1. At tablet, let the last one span. */
@media(min-width:700px) and (max-width:1024px){
  .cards>:last-child:nth-child(odd){grid-column:1 / -1}
  .cards>:last-child:nth-child(odd) p{max-width:60ch}
}

/* -------- 8. PHONE TIER ------------------------------------------------- */
@media(max-width:699px){
  body{font-size:16px}
  section{padding:clamp(3.2rem,11vw,4.4rem) 0}
  h1{font-size:clamp(2.5rem,10.5vw,3.4rem)}
  h2{font-size:clamp(1.85rem,7.4vw,2.4rem)}
  .lead{font-size:1.02rem}
  .hero{min-height:auto;padding:7rem 0 3rem}
  .hero-sub{max-width:100%}
  .hero-ctas{flex-direction:column;align-items:stretch;gap:.7rem}
  .hero-ctas .btn{width:100%}
  .btn{padding:1rem 1.4rem;white-space:normal;min-height:48px}
  .btn-big{padding:1.1rem 1.5rem;font-size:1rem}
  .card,.step,.plate{padding:1.5rem 1.25rem}
  .card{min-height:0}
  .qsteps{padding:1.35rem 1.1rem}
  .qnav{flex-direction:column-reverse;gap:.7rem}
  .qnav .btn{width:100%}
  .pills{grid-template-columns:1fr 1fr}
  .pill{min-height:48px;display:flex;align-items:center;justify-content:center}
  .plate::after{font-size:6.5rem;bottom:-1.6rem;right:-.4rem}
  .guar{flex-direction:column;gap:1rem;padding:1.4rem}
  .faq summary{padding:1rem 1.1rem;font-size:.98rem}
  .faq details p{padding:0 1.1rem 1.1rem}
  .f-bottom{flex-direction:column;gap:.5rem}
  .ticker-track{font-size:.92rem;letter-spacing:2px;gap:2rem}
  .stat{padding:1.3rem .8rem}
}

/* -------- 9. comparison table: stack into labelled rows on phone --------
   A 640px table in a horizontal scroller is a shrug. Below 700px each row
   becomes its own card and every cell carries its column name, so the
   comparison is actually readable with a thumb. */
@media(max-width:699px){
  .compare{overflow-x:visible;border:none;border-radius:0}
  .compare table,.compare tbody,.compare tr,.compare td{display:block;width:100%;min-width:0}
  .compare thead{display:none}
  .compare table{min-width:0}
  .compare tr{
    border:1px solid var(--line);border-radius:var(--rad);margin-bottom:.9rem;
    background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 45%);
    overflow:hidden;
  }
  .compare td{
    border-bottom:1px solid var(--line);padding:.7rem 1rem;
    display:flex;justify-content:space-between;align-items:baseline;gap:1rem;text-align:right;
  }
  .compare td::before{
    content:attr(data-col);font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;
    text-transform:uppercase;color:var(--steel);text-align:left;flex:none;max-width:48%;
  }
  .compare td:first-child{
    background:var(--charcoal);font-family:var(--disp);text-transform:uppercase;
    letter-spacing:1px;font-size:1.12rem;color:var(--chrome);text-align:left;display:block;
  }
  .compare td:first-child::before{display:none}
  .compare tr td:last-child{border-bottom:none}
  .compare .you{border-inline:none;border-left:3px solid var(--spark)}
}

/* -------- 10. touch + input hygiene ------------------------------------- */
@media(hover:none){
  .card:hover,.plate:hover{transform:none}
  .card .glare{display:none}
}
.form input,.form select,.form textarea{font-size:16px}  /* stops iOS zoom on focus */
.burger{min-width:44px;min-height:44px}
.mnav a{min-height:48px;display:flex;align-items:center}
.callbar a{min-height:52px}
@media(max-width:860px){body{padding-bottom:60px}}

/* -------- 11. reduced motion: freeze the sheen too --------------------- */
@media (prefers-reduced-motion:reduce){
  .brushed{--mx:26%;--my:-10%}
}

/* stats band mounted on tread plate */
.stats.tread{
  border:1px solid var(--line);border-radius:var(--rad);
  padding-block:1.15rem;
}
.stats.tread .stat{background:rgba(16,18,22,.72);backdrop-filter:blur(2px)}

/* -------- 12. fixes found by screenshotting the real pages ---------------- */

/* The header call button wrapped onto three lines at 390px and pushed out of
   the nav: "Call (507) 838-0401" simply does not fit beside a burger. The hero
   opens with a full width Call button and the sticky bar covers the rest of the
   page, so the header copy of it is redundant on a phone rather than shrunk. */
@media(max-width:699px){
  /* Hide the CTA buttons only. The burger lives inside .nav-cta, so hiding the
     whole container removed the only way into the mobile menu. */
  .nav-cta .btn{display:none}
  .nav-in{height:66px}
  .mnav{inset-block-start:66px}
}
/* Chrome stays on one line even though phone body buttons are allowed to wrap. */
.nav .btn,.callbar a,.tag{white-space:nowrap}

/* 100svh on a 1180px tall tablet left ~600px of empty space above the headline,
   because the hero centres its content. Below desktop, let the hero be as tall
   as it needs to be. */
@media(max-width:1024px){
  .hero{min-height:auto;padding:7.5rem 0 3.5rem;align-items:flex-start}
}

/* ============================================================================
   PASS 2 — corrections from looking at the rendered pages
   ========================================================================= */

/* -------- 13. grain, dialled back -----------------------------------------
   One grain strength does not fit every surface. At full strength it looked
   like real pitted metal on the small stamped plates and like sandpaper on a
   large panel, and it wrecked legibility behind body copy. So: keep the strong
   tile for small stamped objects, use a soft tile on large panels, and keep
   text-heavy surfaces completely clean. */
:root{
  --grain-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}
/* text-heavy surfaces: no texture at all */
.compare,.faq details,.qsteps,.box{background-image:none}
.compare{background:var(--panel)}
/* panels: soft only */
.card,.step,.plate,.stat{
  background-image:var(--grain-soft),linear-gradient(180deg,rgba(255,255,255,.02),transparent 42%);
  background-size:140px 140px,auto;
}
.brushed{
  background:
    var(--grain-soft),
    radial-gradient(130% 90% at var(--mx,26%) var(--my,-10%),rgba(255,255,255,.10),transparent 58%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,rgba(0,0,0,.020) 1px 2px,transparent 2px 5px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 7px),
    linear-gradient(180deg,#2b3038 0,var(--raised) 16%,var(--panel) 84%,#161a1e 100%);
  background-size:140px 140px,auto,auto,auto,auto;
}
/* tread: quieter, so the numbers on it stay the loudest thing */
.tread{
  background-image:
    var(--grain-soft),
    linear-gradient(135deg,rgba(255,255,255,.035) 0 25%,transparent 25% 50%,rgba(255,255,255,.035) 50% 75%,transparent 75%),
    linear-gradient(45deg,rgba(0,0,0,.24) 0 25%,transparent 25% 50%,rgba(0,0,0,.24) 50% 75%,transparent 75%),
    linear-gradient(135deg,rgba(255,255,255,.022) 0 25%,transparent 25% 50%,rgba(255,255,255,.022) 50% 75%,transparent 75%),
    linear-gradient(45deg,rgba(0,0,0,.15) 0 25%,transparent 25% 50%,rgba(0,0,0,.15) 50% 75%,transparent 75%);
  background-size:140px 140px,22px 22px,22px 22px,22px 22px,22px 22px;
}

/* -------- 14. weld bead, rebuilt as an SVG tile --------------------------
   The gradient version only produced a scalloped bottom edge, because the
   circle centres sat below the strip. Drawing the ripples as real overlapping
   crescents in an inline SVG tile gives a bead that reads correctly: a bright
   crown, a dark lap line where each ripple laps the last, and a specular crest
   just above it. Still one CSS background, still no network request. */
.bead{height:30px;background:var(--charcoal)}
.bead::before{
  background:linear-gradient(180deg,
    transparent 0 6px,
    rgba(74,107,138,.20) 6px 8px,
    rgba(201,162,39,.17) 8px 10px,
    transparent 10px 20px,
    rgba(201,162,39,.15) 20px 22px,
    rgba(74,107,138,.18) 22px 24px,
    transparent 24px);
}
.bead::after{
  top:9px;height:12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233c424a'/%3E%3Cstop offset='.34' stop-color='%23a4abb5'/%3E%3Cstop offset='.62' stop-color='%237c838d'/%3E%3Cstop offset='1' stop-color='%2330353c'/%3E%3C/linearGradient%3E%3Crect width='14' height='12' fill='url(%23c)'/%3E%3Cpath d='M-2 12.5 Q7 -1.2 16 12.5' fill='none' stroke='%23000' stroke-opacity='.42' stroke-width='2.4'/%3E%3Cpath d='M-2 10.6 Q7 -3.1 16 10.6' fill='none' stroke='%23fff' stroke-opacity='.34' stroke-width='1.4'/%3E%3C/svg%3E");
  background-size:14px 12px;
  background-repeat:repeat-x;
  box-shadow:0 2px 4px rgba(0,0,0,.6),inset 0 -1px 1px rgba(0,0,0,.45);
}

/* -------- 15. comparison table legibility -------------------------------
   The Pilantz column read as muddy brown: an orange wash at 14% over noise.
   Clean tint, real border, and the losing values are no longer near-invisible. */
.compare .you{background:rgba(255,138,30,.10)}
.compare .n{color:var(--steel)}
@media(max-width:699px){
  .compare tr{background:var(--panel)}
  .compare td{background:transparent}
  .compare td:first-child{background:rgba(255,255,255,.035)}
  .compare .you{background:rgba(255,138,30,.11)}
  .compare td::before{color:var(--steel)}
}

/* -------- 16. the fifth card at tablet ----------------------------------
   Five cards in a 2-up grid leave one alone on the last row. Spanning it full
   width fixed the gap but left a tall airy block, so the spanning card lays
   itself out horizontally instead: identity on the left, copy on the right. */
@media(min-width:700px) and (max-width:1024px){
  .cards>:last-child:nth-child(odd){
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    gap:.5rem 2.2rem;align-content:center;padding-block:1.7rem;
  }
  .cards>:last-child:nth-child(odd) .card-ico{grid-column:1;grid-row:1}
  .cards>:last-child:nth-child(odd) .spec{grid-column:1;grid-row:2}
  .cards>:last-child:nth-child(odd) h3{grid-column:1;grid-row:3}
  .cards>:last-child:nth-child(odd) p{grid-column:2;grid-row:1/4;align-self:center;max-width:46ch;flex:none}
  .cards>:last-child:nth-child(odd) .more{grid-column:1/-1;grid-row:4;margin-top:.6rem}
}

/* -------- 17. comparison table fits its column ---------------------------
   min-width:640px made the table scroll sideways inside its 521px grid column
   even on a 1440px desktop. Let it fit and tighten the cells instead: a
   comparison you have to drag is a comparison nobody reads. */
@media(min-width:700px){
  .compare{overflow-x:visible}
  .compare table{min-width:0}
  .compare th,.compare td{padding:.8rem .7rem;font-size:.88rem}
  .compare thead th{font-size:.62rem;letter-spacing:.12em}
  .compare td:first-child,.compare thead th:first-child{padding-left:1rem}
}

/* -------- 18. four states, one row --------------------------------------
   auto-fit at minmax(280px,1fr) gave 3 columns and left Missouri stranded on
   its own row. Four plates across says "four states" in the layout itself. */
@media(min-width:1025px){
  .plates{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
  .plate{padding:1.7rem 1.35rem 1.5rem}
  .plate .cities{font-size:.84rem}
}