/* ============================================================
   SUPERIOR TECHNOLOGIES CORP - "SUBSURFACE"
   Design system: industrial editorial dark + APWA utility color code
   New Elements / 2026
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  /* canvas */
  --asphalt:      #08090a;
  --asphalt-2:    #0d0f11;
  --surface:      #121517;
  --surface-2:    #171b1e;
  --line:         #23282c;
  --line-strong:  #333a40;

  /* ink */
  --ink:          #f4f6f7;
  --ink-dim:      #a7b0b6;
  --ink-mute:     #6c757c;

  /* brand */
  --brand:        #dd6426;   /* logo Superior Technologies */
  --brand-hi:     #ff7a33;
  --brand-glow:   rgba(221,100,38,.35);

  /* APWA uniform color code - utility locate markings */
  --apwa-telecom: #ff6a13;   /* orange  - communication, fiber, conduit */
  --apwa-electric:#e4002b;   /* red     - electric power lines, cables */
  --apwa-gas:     #ffd100;   /* yellow  - gas, oil, steam, petroleum */
  --apwa-water:   #0090d4;   /* blue    - potable water */
  --apwa-sewer:   #00a54f;   /* green   - sewer, drain lines, force mains */
  --apwa-survey:  #ff69b4;   /* pink    - temporary survey markings */
  --apwa-excav:   #ffffff;   /* white   - proposed excavation */

  /* type */
  --display: 'Archivo', 'Arial Narrow', sans-serif;
  --sans:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* geometry */
  --r:      4px;
  --r-lg:   8px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --maxw:   1360px;

  --ease: cubic-bezier(.16,1,.3,1);
}

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{
  margin:0;
  background:var(--asphalt);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  font-feature-settings:'ss01','cv11';
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:800; line-height:.95; letter-spacing:-.02em; }
p{ margin:0 0 1em; }
::selection{ background:var(--brand); color:#fff; }

/* ---------- TEXTURE ---------- */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:200; opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- LAYOUT ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
section{ position:relative; }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* eyebrow / kicker */
.kicker{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-mute); display:flex; align-items:flex-start; gap:.7rem; margin-bottom:1.4rem;
}
.kicker::before{ content:''; width:26px; height:2px; background:var(--brand); flex:none; margin-top:.62em; }

.h-xl{ font-size:clamp(2.6rem,7.2vw,6rem); font-stretch:112%; text-transform:uppercase; }
.h-lg{ font-size:clamp(2.1rem,4.6vw,3.7rem); font-stretch:108%; text-transform:uppercase; }
.h-md{ font-size:clamp(1.5rem,2.6vw,2.1rem); font-stretch:104%; }
.lede{ font-size:clamp(1.02rem,1.5vw,1.22rem); color:var(--ink-dim); max-width:62ch; }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; padding:.95rem 1.7rem;
  font-family:var(--mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  border-radius:var(--r); border:1px solid transparent; transition:.35s var(--ease);
}
.btn-primary{ background:var(--brand); color:#fff; box-shadow:0 10px 34px -12px var(--brand-glow); }
.btn-primary:hover{ background:var(--brand-hi); transform:translateY(-2px); box-shadow:0 16px 40px -12px var(--brand-glow); }
.btn-ghost{ border-color:var(--line-strong); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--brand); color:var(--brand-hi); background:rgba(221,100,38,.06); }
.btn .ar{ transition:transform .35s var(--ease); }
.btn:hover .ar{ transform:translateX(4px); }

/* ---------- TOP BAR (811) ---------- */
.tape{
  background:var(--apwa-gas); color:#0b0b0b; font-family:var(--mono);
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
}
.tape .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; height:34px; }
.tape a{ text-decoration:underline; text-underline-offset:3px; }
.tape .t-hide{ display:none; }
@media(min-width:860px){ .tape .t-hide{ display:block; } }

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:120;
  background:rgba(8,9,10,.82); backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav .wrap{ display:flex; align-items:center; gap:1.6rem; height:72px; }
.brand{ display:flex; align-items:center; gap:.75rem; flex:none; }
.brand img{ height:37px; width:auto; }
.nav-links{ display:none; margin-left:auto; gap:.35rem; align-items:center; }
@media(min-width:1100px){ .nav-links{ display:flex; } }
.nav-links a{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-dim); padding:.55rem .62rem; border-radius:var(--r); transition:.25s; white-space:nowrap;
}
@media(min-width:1240px){ .nav-links a{ font-size:.72rem; letter-spacing:.13em; padding:.55rem .8rem; } }
.nav-links a:hover{ color:var(--ink); background:var(--surface); }
.nav-links a.on{ color:var(--brand-hi); }
.nav-cta{ margin-left:auto; display:flex; align-items:center; gap:.6rem; }
@media(min-width:1100px){ .nav-cta{ margin-left:0; } }
.lang{ display:flex; gap:2px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.lang a{ font-family:var(--mono); font-size:.65rem; letter-spacing:.08em; padding:.4rem .5rem; color:var(--ink-mute); }
.lang a.on{ background:var(--surface-2); color:var(--ink); }
.lang a:hover{ color:var(--brand-hi); }
.burger{ display:grid; place-items:center; width:42px; height:42px; background:none; border:1px solid var(--line); border-radius:var(--r); }
@media(min-width:1100px){ .burger{ display:none; } }
.burger span{ display:block; width:17px; height:1.5px; background:var(--ink); margin:3px 0; transition:.3s; }
/* header compacto no celular: so marca + menu */
@media(max-width:759px){
  .nav-cta .btn-primary,
  .nav .lang{ display:none; }
  .nav .wrap{ height:64px; }
  .brand img{ height:33px; }
}
.mobile{
  position:fixed; inset:0 0 0 auto; width:min(88vw,380px); z-index:130;
  background:var(--asphalt-2); border-left:1px solid var(--line);
  transform:translateX(100%); visibility:hidden;
  transition:transform .45s var(--ease), visibility 0s .45s;
  padding:1.6rem; display:flex; flex-direction:column; gap:.2rem; overflow-y:auto;
  box-shadow:-30px 0 60px -20px rgba(0,0,0,.8);
}
.mobile.open{ transform:translateX(0); visibility:visible; transition:transform .45s var(--ease), visibility 0s 0s; }
.mobile a{ font-family:var(--display); font-stretch:108%; text-transform:uppercase; font-size:1.5rem;
  padding:.6rem 0; border-bottom:1px solid var(--line); }
.mobile a:hover{ color:var(--brand-hi); }
.mobile .close{ align-self:flex-end; background:none; border:0; color:var(--ink); font-size:1.6rem; margin-bottom:1rem; }

/* ---------- HERO ---------- */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:.42; filter:grayscale(.3) contrast(1.06); }
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,9,10,.55) 0%, rgba(8,9,10,.78) 45%, var(--asphalt) 100%),
    radial-gradient(900px 500px at 82% 18%, rgba(221,100,38,.22), transparent 65%);
}
.hero-inner{ position:relative; z-index:2; padding:clamp(1.6rem,5.2vw,4.6rem) 0 clamp(3.4rem,6.5vw,5.6rem); }
.hero h1{ max-width:16ch; }
.hero h1 .lit{ color:var(--brand-hi); }
.hero .lede{ margin-top:1.8rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.4rem; }

/* depth ruler */
.ruler{
  position:absolute; right:var(--gutter); top:50%; transform:translateY(-50%);
  display:none; flex-direction:column; gap:0; z-index:2;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; color:var(--ink-mute);
  border-left:1px solid var(--line-strong); padding-left:.8rem;
}
@media(min-width:1180px){ .ruler{ display:flex; } }
.ruler div{ position:relative; padding:.55rem 0; }
.ruler div::before{ content:''; position:absolute; left:-.8rem; top:50%; width:8px; height:1px; background:var(--line-strong); }
.ruler div.hit{ color:var(--apwa-telecom); }
.ruler div.hit::before{ background:var(--apwa-telecom); width:14px; }

/* animated conduit line */
.conduit{ position:absolute; left:0; right:0; bottom:0; width:100%; height:120px; z-index:1; pointer-events:none; opacity:.9; }
.conduit path.pipe{ fill:none; stroke:rgba(255,106,19,.28); stroke-width:6; stroke-linecap:round; }
.conduit path.pulse{
  fill:none; stroke:var(--apwa-telecom); stroke-width:6; stroke-linecap:round;
  stroke-dasharray:60 1400; filter:drop-shadow(0 0 8px rgba(255,106,19,.9));
  animation:travel 6s linear infinite;
}
@keyframes travel{ from{ stroke-dashoffset:1460; } to{ stroke-dashoffset:0; } }

/* ---------- MARQUEE ---------- */
.marq{ border-block:1px solid var(--line); background:var(--asphalt-2); overflow:hidden; padding:.9rem 0; }
.marq-track{ display:flex; gap:3.5rem; width:max-content; animation:slide 42s linear infinite; }
.marq:hover .marq-track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.marq span{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-mute); display:flex; align-items:center; gap:.9rem; white-space:nowrap;
}
.marq span::after{ content:''; width:5px; height:5px; background:var(--brand); border-radius:50%; }

/* ---------- STATS ---------- */
.stats{ padding:clamp(2.45rem,4.9vw,4.2rem) 0; }
.stat-grid{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  grid-template-columns:1fr; }
@media(min-width:680px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1040px){ .stat-grid{ grid-template-columns:repeat(4,1fr); } }
.stat{ background:var(--asphalt-2); padding:2.2rem 1.8rem; position:relative; transition:background .4s; }
.stat:hover{ background:var(--surface); }
.stat::before{ content:''; position:absolute; top:0; left:0; width:0; height:2px; background:var(--brand); transition:width .6s var(--ease); }
.stat:hover::before{ width:100%; }
.stat .n{ font-family:var(--display); font-stretch:110%; font-weight:800; font-size:clamp(2.4rem,4.6vw,3.4rem);
  line-height:1; color:var(--ink); display:flex; align-items:baseline; gap:.15rem; }
.stat .n small{ font-size:.42em; color:var(--brand-hi); font-stretch:100%; }
.stat .l{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); margin-top:.9rem; }
.stat .d{ font-size:.92rem; color:var(--ink-dim); margin-top:.5rem; }

/* ---------- SECTION HEAD ---------- */
.sec{ padding:clamp(2.8rem,5.6vw,5.25rem) 0; }
.sec-head{ display:grid; gap:1.6rem; margin-bottom:clamp(1.7rem,3.5vw,2.8rem); }
@media(min-width:980px){ .sec-head{ grid-template-columns:1.05fr .95fr; align-items:end; gap:3rem; } }

/* ---------- SERVICES / APWA ---------- */
.svc-list{ border-top:1px solid var(--line); }
.svc{
  display:grid; grid-template-columns:auto 1fr; gap:1.2rem 1.4rem; align-items:start;
  padding:1.9rem 0 1.9rem 1.2rem; border-bottom:1px solid var(--line);
  position:relative; transition:.45s var(--ease);
}
@media(min-width:900px){
  /* colunas fixas: todas as linhas alinham no mesmo eixo */
  .svc{ grid-template-columns:56px minmax(0,300px) minmax(0,1fr) 92px; align-items:center; gap:2.4rem; padding-block:2.1rem; }
}
@media(min-width:1200px){
  .svc{ grid-template-columns:56px minmax(0,340px) minmax(0,1fr) 92px; }
}
.svc::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c); transform:scaleY(.28); transform-origin:center; transition:transform .45s var(--ease); }
.svc:hover::before{ transform:scaleY(1); }
.svc:hover{ background:linear-gradient(90deg, color-mix(in srgb, var(--c) 7%, transparent), transparent 55%); padding-left:1.9rem; }
.svc .idx{ font-family:var(--mono); font-size:.7rem; color:var(--ink-mute); letter-spacing:.1em; }
.svc h3{ font-size:clamp(1.35rem,2.4vw,1.85rem); font-stretch:106%; text-transform:uppercase; }
.svc h3 em{ font-style:normal; color:var(--c); }
.svc p{ margin:0; color:var(--ink-dim); font-size:.97rem; }
.svc .code{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--c); color:var(--c); padding:.3rem .55rem; border-radius:2px; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem; justify-self:end; width:max-content;
}
.svc .code::before{ content:''; width:7px; height:7px; background:var(--c); border-radius:1px; }

/* ---------- BORE PROFILE (signature) ---------- */
.bore{ background:var(--asphalt-2); border-block:1px solid var(--line); }
.bore-stage{ position:relative; margin-top:1rem; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:#0a0b0c; }
.bore-stage svg{ width:100%; height:auto; display:block; }
.strata{ opacity:.9; }
.util-layer{ cursor:pointer; transition:opacity .3s; }
.util-layer:hover{ opacity:1 !important; }
.bore-legend{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem; }
.bore-legend button{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-dim);
  padding:.5rem .8rem; border-radius:var(--r); display:inline-flex; align-items:center; gap:.5rem; transition:.3s;
}
.bore-legend button::before{ content:''; width:9px; height:9px; border-radius:2px; background:var(--c); }
.bore-legend button:hover,.bore-legend button.on{ border-color:var(--c); color:var(--ink); background:var(--surface-2); }
.bore-note{ font-family:var(--mono); font-size:.66rem; color:var(--ink-mute); letter-spacing:.06em; margin-top:1rem; }

/* ---------- METHODS ---------- */
.grid-3{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; grid-template-columns:1fr; }
@media(min-width:720px){ .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1080px){ .grid-3{ grid-template-columns:repeat(3,1fr); } }
.cell{ background:var(--asphalt-2); padding:2rem 1.8rem; transition:background .4s; position:relative; }
.cell:hover{ background:var(--surface); }
.cell .ic{ width:38px; height:38px; margin-bottom:1.3rem; color:var(--brand-hi); }
.cell h3{ font-size:1.12rem; font-stretch:104%; text-transform:uppercase; margin-bottom:.7rem; }
.cell p{ color:var(--ink-dim); font-size:.94rem; margin:0; }
.cell .tag{ font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; color:var(--ink-mute); text-transform:uppercase; }

/* ---------- GALLERY ---------- */
.gal{ display:grid; gap:1rem; grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; grid-auto-flow:dense; }
.gal .a{ grid-column:span 2; grid-row:span 2; }
.gal .b{ grid-column:span 2; }
.gal .f{ grid-column:span 2; }
@media(min-width:900px){
  .gal{ grid-template-columns:repeat(4,1fr); grid-auto-rows:215px; }
  .gal .a{ grid-column:span 2; grid-row:span 2; }
  .gal .b,.gal .f{ grid-column:span 2; grid-row:span 1; }
  .gal .c,.gal .d,.gal .e,.gal .g{ grid-column:span 1; grid-row:span 1; }
}
.shot{ position:relative; overflow:hidden; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--surface); }
.shot img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease), filter .5s; filter:grayscale(.35) contrast(1.05); }
.shot:hover img{ transform:scale(1.06); filter:grayscale(0); }
.shot figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1.4rem 1rem .8rem;
  background:linear-gradient(transparent,rgba(8,9,10,.92));
  font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim);
}
@media(min-width:900px){
  .shot.tall{ grid-row:span 2; }
  .shot.wide{ grid-column:span 2; }
}

/* ---------- CLIENTS ---------- */
.logos{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
@media(min-width:820px){ .logos{ grid-template-columns:repeat(4,1fr); } }
.logo-cell{ background:var(--asphalt-2); display:grid; place-items:center; padding:2.4rem 1.4rem; min-height:130px; transition:background .4s; }
.logo-cell:hover{ background:var(--surface); }
.logo-cell img{ max-height:34px; width:auto; filter:brightness(0) invert(1) opacity(.55); transition:.4s; }
.logo-cell:hover img{ filter:brightness(0) invert(1) opacity(1); }
.logo-cell .txt{ font-family:var(--display); font-stretch:108%; text-transform:uppercase; font-size:1.2rem; color:var(--ink-mute); transition:.4s; }
.logo-cell:hover .txt{ color:var(--ink); }

/* ---------- FAQ / GEO ---------- */
.faq{ border-top:1px solid var(--line); }
.qa{ border-bottom:1px solid var(--line); padding:1.6rem 0; }
.qa h3{
  font-family:var(--sans); font-weight:600; font-size:1.06rem; line-height:1.45; letter-spacing:0;
  display:flex; gap:.9rem; align-items:flex-start; cursor:pointer; color:var(--ink);
}
.qa h3::before{ content:'Q'; font-family:var(--mono); font-size:.7rem; color:var(--brand); border:1px solid var(--brand);
  width:22px; height:22px; display:grid; place-items:center; border-radius:2px; flex:none; margin-top:.15rem; }
.qa .a{ color:var(--ink-dim); font-size:.98rem; padding-left:2.6rem; margin-top:.8rem; }
.qa .a::before{ content:'A: '; font-family:var(--mono); font-size:.75rem; color:var(--apwa-sewer); letter-spacing:.08em; }

/* ---------- CTA BAND ---------- */
.band{
  position:relative; overflow:hidden; border-block:1px solid var(--line);
  background:linear-gradient(120deg,var(--asphalt-2),var(--surface));
}
.band::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(700px 320px at 78% 30%, rgba(221,100,38,.22), transparent 70%);
}
.band .wrap{ position:relative; z-index:2; padding:clamp(2.4rem,4.9vw,4.2rem) var(--gutter); text-align:center; }
.band .lede{ margin-inline:auto; }
.band-actions{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:2.2rem; }

/* hazard stripe */
.hazard{ height:6px; background:repeating-linear-gradient(45deg,var(--brand) 0 14px,#0b0b0b 14px 28px); opacity:.9; }

/* ---------- FORMS ---------- */
.form-tabs{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.form-tabs button{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
  background:var(--asphalt-2); border:1px solid var(--line); color:var(--ink-dim);
  padding:.7rem 1.1rem; border-radius:var(--r); transition:.3s;
}
.form-tabs button.on{ border-color:var(--brand); color:var(--brand-hi); background:rgba(221,100,38,.08); }
.form-tabs button:hover{ color:var(--ink); }
.fields{ display:grid; gap:1rem; }
@media(min-width:760px){ .fields.two{ grid-template-columns:1fr 1fr; } .fields .full{ grid-column:1/-1; } }
label{ font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); display:block; margin-bottom:.5rem; }
input,select,textarea{
  width:100%; background:var(--asphalt-2); border:1px solid var(--line); color:var(--ink);
  padding:.85rem 1rem; border-radius:var(--r); font-family:var(--sans); font-size:.97rem; transition:.3s;
}
input:focus,select:focus,textarea:focus{ outline:0; border-color:var(--brand); box-shadow:0 0 0 3px rgba(221,100,38,.12); }
textarea{ min-height:150px; resize:vertical; }
.form-note{ font-family:var(--mono); font-size:.64rem; color:var(--ink-mute); letter-spacing:.06em; }

/* ---------- FOOTER ---------- */
.foot{ background:#050607; border-top:1px solid var(--line); padding:clamp(3rem,6vw,5rem) 0 2rem; }
.foot-grid{ display:grid; gap:2.6rem; }
@media(min-width:880px){ .foot-grid{ grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:3rem; } }
.foot h4{ font-family:var(--mono); font-weight:600; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:1.2rem; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.foot a:hover{ color:var(--brand-hi); }
.foot .fine{ color:var(--ink-dim); font-size:.92rem; }
.foot-bot{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; color:var(--ink-mute); text-transform:uppercase; }
.by{ display:flex; align-items:center; gap:.6rem; opacity:.75; transition:opacity .3s; }
.by:hover{ opacity:1; }
.by img{ height:15px; width:auto; }

/* ---------- REVEAL ---------- */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  .marq-track,.conduit path.pulse{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- PAGE HEADER (inner pages) ---------- */
.phead{ border-bottom:1px solid var(--line); padding:clamp(2.1rem,4.9vw,3.85rem) 0 clamp(1.7rem,3.5vw,2.8rem);
  background:radial-gradient(800px 380px at 15% 0%, rgba(221,100,38,.13), transparent 68%); }
.crumb{ font-family:var(--mono); font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:1.4rem; }
.crumb a:hover{ color:var(--brand-hi); }

/* ---------- PROSE ---------- */
.prose{ max-width:74ch; }
.prose h2{ font-size:clamp(1.5rem,2.6vw,2rem); font-stretch:106%; text-transform:uppercase; margin:2.6rem 0 1rem; }
.prose h3{ font-family:var(--sans); font-weight:700; font-size:1.1rem; letter-spacing:0; margin:2rem 0 .7rem; }
.prose p,.prose li{ color:var(--ink-dim); }
.prose ul{ padding-left:1.1rem; display:grid; gap:.5rem; margin-bottom:1.4rem; }
.prose li::marker{ color:var(--brand); }
.prose strong{ color:var(--ink); }
.prose a{ color:var(--brand-hi); text-decoration:underline; text-underline-offset:3px; }

/* spec table */
.spec{ width:100%; border-collapse:collapse; font-size:.92rem; margin:1.6rem 0; }
.spec th,.spec td{ text-align:left; padding:.85rem 1rem; border-bottom:1px solid var(--line); }
.spec th{ font-family:var(--mono); font-size:.63rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); font-weight:600; }
.spec td{ color:var(--ink-dim); }
.spec td:first-child{ color:var(--ink); font-family:var(--mono); font-size:.84rem; }
.table-scroll{ overflow-x:auto; }

/* scope lists (services page) */
.prose ul.cols2{ columns:auto; display:grid; grid-template-columns:1fr; gap:.5rem 2.4rem; }
@media(min-width:760px){ .prose ul.cols2{ grid-template-columns:1fr 1fr; } }

/* ---------- CLIENT LOGO STRIP (horizontal) ---------- */
.logo-strip{
  position:relative; overflow:hidden;
  padding:clamp(1.6rem,3vw,2.4rem) 0;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--asphalt-2);
}
.logo-strip::before,.logo-strip::after{
  content:''; position:absolute; top:0; bottom:0; width:clamp(40px,9%,120px); z-index:2; pointer-events:none;
}
.logo-strip::before{ left:0;  background:linear-gradient(90deg,var(--asphalt-2),transparent); }
.logo-strip::after { right:0; background:linear-gradient(270deg,var(--asphalt-2),transparent); }
.logo-track{
  display:flex; align-items:center; gap:clamp(2.6rem,5vw,5.5rem);
  width:max-content; animation:slide 46s linear infinite;
}
.logo-strip:hover .logo-track{ animation-play-state:paused; }
.logo-track img{
  height:34px; width:auto; max-width:180px; object-fit:contain;
  opacity:.62; transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.logo-track img:hover{ opacity:1; transform:scale(1.06); }
.logo-track .txt{
  font-family:var(--display); font-stretch:106%; text-transform:uppercase;
  font-size:1.3rem; font-weight:800; color:var(--ink-mute); white-space:nowrap;
  transition:color .35s var(--ease);
}
.logo-track .txt:hover{ color:var(--ink); }
@media(prefers-reduced-motion:reduce){ .logo-track{ animation:none; } }