/* =========================================================
   Teel Supply — Design System
   Responsive industrial supply. HTML/CSS/JS only, no frameworks.
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* Brand */
  --gold:        #C79038;
  --gold-bright: #E1B65B;
  --gold-deep:   #A9761F;
  --cream:       #F5ECD6;
  --paper:       #F6F1E6;
  --paper-2:     #EFE8D8;

  /* Ink / steel / graphite */
  --ink:     #14130E;
  --ink-2:   #1C1B15;
  --ink-3:   #26251E;
  --steel:   #2B2C30;
  --graphite:#3A3B40;
  --slate:   #6C6E74;
  --mist:    #9A9CA2;

  /* Text */
  --tx-on-dark:      #F3EFE6;
  --tx-on-dark-soft: #B7B4AA;
  --tx-on-light:     #211F18;
  --tx-on-light-soft:#5A574C;

  /* Lines */
  --line-dark:  rgba(255,255,255,.12);
  --line-light: rgba(20,19,14,.12);

  /* Layout */
  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --radius: 4px;
  --radius-lg: 8px;

  --shadow-sm: 0 2px 8px rgba(0,0,0,.10);
  --shadow-md: 0 12px 30px rgba(0,0,0,.16);
  --shadow-lg: 0 30px 70px rgba(0,0,0,.30);

  --ease: cubic-bezier(.2,.7,.2,1);

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Barlow Condensed", "Oswald", Impact, system-ui, sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--tx-on-light);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-head); font-weight:600; line-height:1.02; letter-spacing:.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

:focus-visible{ outline:3px solid var(--gold-bright); outline-offset:2px; border-radius:2px; }

/* ---------- Utilities ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(64px, 9vw, 128px); }
.eyebrow{
  font-family:var(--font-head); font-weight:600; text-transform:uppercase;
  letter-spacing:.24em; font-size:.82rem; color:var(--gold-deep);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--gold); display:inline-block; }
.on-dark .eyebrow{ color:var(--gold-bright); }
.h1{ font-size:clamp(2.6rem, 6.2vw, 5rem); text-transform:uppercase; letter-spacing:.005em; }
.h2{ font-size:clamp(2rem, 4.2vw, 3.4rem); text-transform:uppercase; }
.h3{ font-size:clamp(1.3rem,2vw,1.6rem); text-transform:uppercase; letter-spacing:.02em; }
.lead{ font-size:clamp(1.05rem,1.5vw,1.28rem); color:var(--tx-on-light-soft); line-height:1.65; }
.on-dark .lead{ color:var(--tx-on-dark-soft); }
.text-gold{ color:var(--gold); }
.center{ text-align:center; }
.measure{ max-width:62ch; }
.mx-auto{ margin-inline:auto; }

.section-head{ max-width:760px; margin-bottom:clamp(36px,5vw,64px); }
.section-head.center{ margin-inline:auto; }
.section-head .h2{ margin-top:.35em; }
.section-head p{ margin-top:1rem; }

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--gold); --fg:#1a1305; --bd:var(--gold);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--font-head); font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; font-size:1.02rem;
  padding:.92em 1.6em; border-radius:var(--radius);
  background:var(--bg); color:var(--fg); border:2px solid var(--bd);
  cursor:pointer; transition:transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
  will-change:transform; white-space:nowrap;
}
.btn svg{ width:1.1em; height:1.1em; }
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn:active{ transform:translateY(0); }
.btn--gold{ --bg:var(--gold); --fg:#1c1406; --bd:var(--gold); }
.btn--gold:hover{ background:var(--gold-bright); border-color:var(--gold-bright); }
.btn--ghost{ --bg:transparent; --fg:var(--gold-bright); --bd:var(--gold); }
.btn--ghost:hover{ background:var(--gold); color:#1c1406; }
.btn--ghost-light{ --bg:transparent; --fg:var(--tx-on-light); --bd:rgba(20,19,14,.35); }
.btn--ghost-light:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.btn--solid-dark{ --bg:var(--ink); --fg:var(--cream); --bd:var(--ink); }
.btn--solid-dark:hover{ background:var(--ink-3); border-color:var(--ink-3); }
.btn--lg{ font-size:1.12rem; padding:1.05em 1.9em; }
.btn--block{ width:100%; }

/* =========================================================
   Header
   ========================================================= */
.topbar{
  background:#0d0c08; color:var(--tx-on-dark-soft);
  font-size:.82rem; border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar__in{ display:flex; align-items:center; justify-content:space-between; gap:1rem; height:38px; }
.topbar a{ display:inline-flex; align-items:center; gap:.5em; color:var(--tx-on-dark-soft); transition:color .15s; }
.topbar a:hover{ color:var(--gold-bright); }
.topbar__group{ display:flex; align-items:center; gap:1.5rem; }
.topbar .muted{ letter-spacing:.14em; text-transform:uppercase; font-size:.72rem; }
.topbar svg{ width:14px; height:14px; opacity:.8; }

.site-header{ position:sticky; top:0; z-index:60; background:linear-gradient(rgba(15,14,9,.86),rgba(15,14,9,.86)), url("../assets/img/teel-topo-background.jpg") center/cover no-repeat;}
.site-header.scrolled{ box-shadow:0 6px 24px rgba(0,0,0,.35); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:116px; }
.brand{ display:flex; align-items:center; gap:.7rem; flex-shrink:0; }
.brand img{ height:106px; width:auto; }
.brand img.scrolled{ height: 86px; width:auto; }
.brand__type{ display:flex; flex-direction:column; line-height:1; }
.brand__type b{ font-family:var(--font-head); font-weight:600; font-size:1.35rem; letter-spacing:.16em; color:var(--cream); text-transform:uppercase; }
.brand__type span{ font-size:.62rem; letter-spacing:.42em; color:var(--gold); text-transform:uppercase; margin-top:3px; }

.nav__links{ display:flex; align-items:center; gap:.35rem; margin-left:auto; }
.nav__links a{
  font-family:var(--font-head); font-weight:500; text-transform:uppercase; letter-spacing:.08em;
  color:var(--tx-on-dark); font-size:1.02rem; padding:.55em .85em; border-radius:var(--radius);
  position:relative; transition:color .15s;
}
.nav__links a::after{
  content:""; position:absolute; left:.85em; right:.85em; bottom:.42em; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .22s var(--ease);
}
.nav__links a:hover{ color:var(--gold-bright); }
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav__links a[aria-current="page"]{ color:var(--gold-bright); }
.nav__cta{ display:flex; align-items:center; gap:.75rem; margin-left:1rem; }
.nav__divider{ width:1px; height:30px; background:var(--line-dark); }

.nav__toggle{
  display:none; width:46px; height:46px; border:1px solid var(--line-dark); background:transparent;
  border-radius:var(--radius); cursor:pointer; position:relative;
}
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{
  content:""; position:absolute; left:50%; top:50%; width:22px; height:2px; background:var(--cream);
  transform:translate(-50%,-50%); transition:.25s var(--ease);
}
.nav__toggle span::before{ transform:translate(-50%,-8px); }
.nav__toggle span::after{ transform:translate(-50%,6px); }
body.menu-open .nav__toggle span{ background:transparent; }
body.menu-open .nav__toggle span::before{ transform:translate(-50%,-50%) rotate(45deg); }
body.menu-open .nav__toggle span::after{ transform:translate(-50%,-50%) rotate(-45deg); }

/* =========================================================
   Hero (split, matches design plan)
   ========================================================= */
.hero{ position:relative; background:var(--ink); color:var(--tx-on-dark); overflow:hidden; }
.hero__grid{ display:grid; grid-template-columns:1.02fr 1fr; min-height:clamp(560px, 78vh, 760px); }
.hero__copy{
  display:flex; flex-direction:column; justify-content:center; gap:1.6rem;
  padding:clamp(48px,7vw,96px) clamp(24px,4.5vw,80px);
  position:relative; z-index:3;
  transition:opacity .38s ease;
}
.hero__copy.is-swapping{ opacity:0; }
.hero__copy .eyebrow{ color:var(--gold-bright); }
.hero__title{ font-size:clamp(2.7rem,5.4vw,5.1rem); text-transform:uppercase; }
.hero__title .accent{ color:var(--gold); display:block; }
.hero__sub{ max-width:52ch; color:var(--tx-on-dark-soft); font-size:clamp(1.05rem,1.4vw,1.24rem); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:.4rem; }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media::before{
  content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(90deg, rgba(20,19,14,.92) 0%, rgba(20,19,14,.074) 45%, rgba(20,19,14,.058) 100%);
}
.hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.92) contrast(1.02); }
.hero__slides{ position:absolute; inset:0; overflow:hidden; }
.hero__slide{
  position:absolute; inset:0; z-index:0;
  opacity:0;
  transition:opacity 1.2s ease-in-out;
}
.hero__slide.is-active{ z-index:1; opacity:1; }
.hero__dots{ position:absolute; z-index:4; right:6%; bottom:16%; display:flex; gap:10px; }
.hero__dot{
  width:9px; height:9px; padding:0; border-radius:50%; border:1px solid rgba(245,236,214,.55); background:transparent; cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.hero__dot:hover{ border-color:var(--gold-bright); }
.hero__dot.is-active{ background:var(--gold); border-color:var(--gold); transform:scale(1.15); }
.hero__truck{
  position:absolute; z-index:3; right:-2%; bottom:5%; width:112%; max-width:none;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.55));
}
.hero__specline{ position:absolute; z-index:2; left:6%; bottom:16%; font-family:var(--font-head); letter-spacing:.35em; text-transform:uppercase; font-size:.7rem; color:rgba(245,236,214,.4); }
.hero__scroll{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--gold);
}
.hero__scroll .dot{ width:34px; height:34px; border:1px solid var(--gold); border-radius:50%; display:grid; place-items:center; animation:bob 2.2s var(--ease) infinite; }
.hero__scroll svg{ width:16px; height:16px; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }
@media (prefers-reduced-motion: reduce){ .hero__scroll .dot{ animation:none; } }

/* thin gold rule that the scroll circle sits on */
.hero__foot{ height:0; }

/* =========================================================
   Trust strip
   ========================================================= */
.trust{ background:var(--ink-2); color:var(--tx-on-dark); border-top:1px solid var(--line-dark); }
.trust__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.trust__item{ display:flex; gap:1rem; align-items:flex-start; padding:clamp(26px,3vw,40px) clamp(18px,2.2vw,32px); border-left:1px solid var(--line-dark); }
.trust__item:first-child{ border-left:none; }
.trust__ico{ flex-shrink:0; width:40px; height:40px; color:var(--gold-bright); }
.trust__ico svg{ width:100%; height:100%; }
.trust__item h4{ font-family:var(--font-head); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:1.05rem; color:var(--cream); }
.trust__item p{ font-size:.9rem; color:var(--tx-on-dark-soft); margin-top:.3rem; }

/* =========================================================
   Products grid (bespoke material tiles)
   ========================================================= */
.products{ background:var(--paper); }
.prod-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,22px); }
.prod-card{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:1/1.06;
  background:linear-gradient(160deg,var(--steel),#17181b 130%);
  border:1px solid rgba(20,19,14,.10); box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; justify-content:flex-end;
  color:var(--tx-on-dark); isolation:isolate; transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.prod-card::before{ /* dimensional/spec-line motif */
  content:""; position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:26px 26px, 26px 26px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 70%);
}
.prod-card::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, transparent 30%, rgba(10,10,8,.82)); }
.prod-card__ico{ position:absolute; top:18px; left:18px; z-index:2; width:46px; height:46px; color:var(--gold-bright); opacity:.95; }
.prod-card__ico svg{ width:100%; height:100%; }
.prod-card__num{ position:absolute; top:20px; right:20px; z-index:2; font-family:var(--font-head); font-size:.85rem; letter-spacing:.2em; color:rgba(245,236,214,.45); }
.prod-card__body{ position:relative; z-index:2; padding:20px; }
.prod-card__body h3{ font-size:1.28rem; text-transform:uppercase; letter-spacing:.02em; }
.prod-card__body p{ font-size:.85rem; color:var(--tx-on-dark-soft); margin-top:.35rem; }
.prod-card__link{ display:inline-flex; align-items:center; gap:.4em; margin-top:.8rem; font-family:var(--font-head); text-transform:uppercase; letter-spacing:.1em; font-size:.82rem; color:var(--gold-bright); }
.prod-card__link svg{ width:14px; height:14px; transition:transform .2s var(--ease); }
.prod-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.prod-card:hover .prod-card__link svg{ transform:translateX(4px); }
/* accent gradients per index */
.prod-card:nth-child(4n+1){ background:linear-gradient(160deg,#33343a,#16171a); }
.prod-card:nth-child(4n+2){ background:linear-gradient(160deg,#3a3630,#181713); }
.prod-card:nth-child(4n+3){ background:linear-gradient(160deg,#2f3338,#141618); }
.prod-card:nth-child(4n+4){ background:linear-gradient(160deg,#37342c,#171612); }
.prod-card--feature{ background:linear-gradient(160deg,var(--gold-deep),#241a08) !important; }
.prod-card--feature .prod-card__num,.prod-card--feature .prod-card__ico{ color:var(--cream); }

/* =========================================================
   One capability / industries
   ========================================================= */
.capabilities{ background:var(--ink); color:var(--tx-on-dark); }
.cap-lead{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(28px,4vw,64px); align-items:end; margin-bottom:clamp(36px,5vw,60px); }
.cap-tags{ display:flex; flex-wrap:wrap; gap:.6rem; }
.cap-tag{ font-family:var(--font-head); text-transform:uppercase; letter-spacing:.08em; font-size:.9rem; color:var(--cream); border:1px solid var(--line-dark); border-radius:999px; padding:.5em 1.1em; background:rgba(255,255,255,.03); }
.cap-tag-link{ font-size:1.3rem;}
.cap-tag-link a:hover{ color:var(--gold-bright); }
.cap-tag b{ color:var(--gold-bright); font-weight:600; }
.ind-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,28px); }
.ind-card{ position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:clamp(340px,42vw,440px); display:flex; align-items:flex-end; color:var(--tx-on-dark); }
.ind-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.ind-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,12,9,.15) 30%, rgba(12,12,9,.92)); }
.ind-card__in{ position:relative; z-index:2; padding:clamp(24px,3vw,40px); }
.ind-card__in .h3{ color:var(--cream); }
.ind-card__in p{ color:var(--tx-on-dark-soft); margin-top:.6rem; max-width:44ch; }
.ind-card__in ul{ display:flex; flex-wrap:wrap; gap:.4rem .5rem; margin-top:1rem; }
.ind-card__in li{ font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--cream); background:rgba(255,255,255,.08); border:1px solid var(--line-dark); padding:.35em .7em; border-radius:3px; }
.ind-card:hover img{ transform:scale(1.05); }
.ind-card__link{ display:inline-flex; gap:.4em; align-items:center; margin-top:1.2rem; font-family:var(--font-head); text-transform:uppercase; letter-spacing:.1em; color:var(--gold-bright); font-size:.9rem; }
.ind-card__link svg{ width:15px; height:15px; }

/* =========================================================
   Why Teel — outcomes
   ========================================================= */
.why{ background:var(--paper-2); }
.why-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(14px,1.6vw,20px); }
.why-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.why-card{ background:#fff; border:1px solid var(--line-light); border-radius:var(--radius-lg); padding:clamp(22px,2.4vw,30px); box-shadow:var(--shadow-sm); transition:transform .25s var(--ease),box-shadow .25s var(--ease); }
.why-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.why-card__ico{ display:inline-block; width:38px; height:38px; color:var(--gold-deep); margin-bottom:1rem; }
.why-card__ico svg{ width:100%; height:100%; }
.why-card h3{ font-size:1.18rem; text-transform:uppercase; }
.why-card p{ font-size:.92rem; color:var(--tx-on-light-soft); margin-top:.5rem; }
.why-card .n{ font-family:var(--font-head); color:var(--gold); font-size:.85rem; letter-spacing:.2em; }

/* =========================================================
   Urgent sourcing (split feature)
   ========================================================= */
.urgent{ position:relative; color:var(--tx-on-dark); background:var(--ink); overflow:hidden; }
.urgent__grid{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.urgent__media{ position:relative; min-height:340px; }
.urgent__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.urgent__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,19,14,0) 40%, var(--ink)); }
.urgent__copy{ padding:clamp(48px,6vw,96px) clamp(24px,4vw,72px); display:flex; flex-direction:column; gap:1.2rem; justify-content:center; }
.urgent__copy h2{ font-size:clamp(1.9rem,3.4vw,3rem); text-transform:uppercase; }
.urgent__steps{ display:grid; gap:.9rem; margin-top:.4rem; }
.urgent__step{ display:flex; gap:1rem; align-items:flex-start; }
.urgent__step .k{ font-family:var(--font-head); color:var(--gold-bright); font-size:1.1rem; border:1px solid var(--gold); width:2em; height:2em; display:grid; place-items:center; border-radius:50%; flex-shrink:0; }
.urgent__step p{ color:var(--tx-on-dark-soft); }
.urgent__step b{ color:var(--cream); font-weight:600; }

/* =========================================================
   About / relationship
   ========================================================= */
.about{ background:var(--paper); }
.about__grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(32px,5vw,72px); align-items:center; }
.about__media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.about__media img{ width:100%; height:100%; object-fit:cover; }
.about__badge{ position:absolute; left:20px; bottom:20px; background:var(--ink); color:var(--cream); padding:.9rem 1.2rem; border-radius:var(--radius); border-left:3px solid var(--gold); }
.about__badge b{ font-family:var(--font-head); font-size:1.7rem; display:block; line-height:1; color:var(--gold-bright); }
.about__badge span{ font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--tx-on-dark-soft); }
.about__stats{ display:flex; gap:2rem; flex-wrap:wrap; margin-top:1.6rem; }
.about__stats .s b{ font-family:var(--font-head); font-size:2rem; color:var(--gold-deep); display:block; line-height:1; }
.about__stats .s span{ font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--tx-on-light-soft); }

/* =========================================================
   Final CTA
   ========================================================= */
.cta{ background:linear-gradient(135deg,#1b1a13,#0e0d09); color:var(--tx-on-dark); position:relative; overflow:hidden; }
.cta::before{ content:""; position:absolute; inset:0;
  background-image:linear-gradient(90deg, rgba(199,144,56,.10) 1px, transparent 1px);
  background-size:52px 100%; opacity:.5; }
.cta__in{ position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
.cta__in h2{ font-size:clamp(2rem,4.4vw,3.6rem); text-transform:uppercase; max-width:16ch; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }

/* =========================================================
   Footer
   ========================================================= */
.footer{ background:linear-gradient(rgba(12,11,7,.88),rgba(12,11,7,.88)), url("../assets/img/teel-topo-background.jpg") center/cover no-repeat; color:var(--tx-on-dark-soft); padding-top:clamp(56px,7vw,88px); }
.footer__top{ display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:clamp(28px,4vw,56px); padding-bottom:48px; border-bottom:1px solid var(--line-dark); }
.footer__brand img{ height:54px; margin-bottom:1rem; }
.footer__brand p{ max-width:34ch; font-size:.92rem; }
.footer__brand .socials{ display:flex; gap:.6rem; margin-top:1.2rem; }
.footer__brand .socials a{ width:38px; height:38px; border:1px solid var(--line-dark); border-radius:50%; display:grid; place-items:center; color:var(--tx-on-dark-soft); transition:.2s; }
.footer__brand .socials a:hover{ color:var(--gold-bright); border-color:var(--gold); }
.footer__brand .socials svg{ width:16px; height:16px; }
.footer__pbt{ display:flex; align-items:center; gap:.7rem; margin-top:1.3rem; padding:.85rem 1rem; border:1px solid var(--gold); border-radius:var(--radius); max-width:34ch; transition:background .18s var(--ease); }
.footer__pbt:hover{ background:rgba(199,144,56,.1); }
.footer__pbt svg{ width:20px; height:20px; color:var(--gold-bright); flex-shrink:0; }
.footer__pbt span{ font-size:.8rem; color:var(--tx-on-dark-soft); line-height:1.5; }
.footer__pbt b{ color:var(--cream); font-family:var(--font-head); text-transform:uppercase; letter-spacing:.05em; font-size:.95rem; }
.footer col, .footer__col h4{ font-family:var(--font-head); text-transform:uppercase; letter-spacing:.1em; color:var(--cream); font-size:1rem; margin-bottom:1rem; }
.footer__col ul{ display:grid; gap:.55rem; }
.footer__col a{ font-size:.92rem; transition:color .15s; }
.footer__col a:hover{ color:var(--gold-bright); }
.footer__contact li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem; margin-bottom:.7rem; }
.footer__contact svg{ width:16px; height:16px; color:var(--gold); flex-shrink:0; margin-top:3px; }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding-block:24px; font-size:.82rem; }
.footer__bottom a:hover{ color:var(--gold-bright); }

/* =========================================================
   Page hero (interior pages)
   ========================================================= */
.pagehero{ background:var(--ink); color:var(--tx-on-dark); position:relative; overflow:hidden; padding-block:clamp(56px,8vw,104px); }
.pagehero::before{ content:""; position:absolute; inset:0; z-index:1;
  background-image:linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:48px 100%; opacity:.4; }
.pagehero__in{ position:relative; z-index:2; max-width:820px; }
.pagehero__media{ position:absolute; inset:0; z-index:0; }
.pagehero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.pagehero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(20,19,14,.92) 0%, rgba(20,19,14,.074) 45%, rgba(20,19,14,.058) 100%);
}
.pagehero .h1{ font-size:clamp(2.4rem,5.4vw,4.4rem); margin-top:.4rem; }
.pagehero p{ margin-top:1.1rem; color:var(--tx-on-dark-soft); font-size:clamp(1.05rem,1.5vw,1.25rem); max-width:56ch; }
.breadcrumb{ display:flex; gap:.5rem; align-items:center; font-size:.82rem; color:var(--tx-on-dark-soft); text-transform:uppercase; letter-spacing:.12em; font-family:var(--font-head); }
.breadcrumb a:hover{ color:var(--gold-bright); }
.breadcrumb svg{ width:12px; height:12px; opacity:.6; }

/* Generic content sections */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
/* Grid items default to min-width:auto, so any child whose intrinsic width
   exceeds the column (a nowrap button row, a long URL) would widen the whole
   column and push the page past the viewport on phones. Clamp it. */
.split > *{ min-width:0; }
.split--reverse .split__media{ order:2; }
.split__media{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.feature-list{ display:grid; gap:1rem; margin-top:1.4rem; }
.feature-list li{ display:flex; gap:.8rem; align-items:flex-start; }
.feature-list svg{ width:22px; height:22px; color:var(--gold-deep); flex-shrink:0; margin-top:2px; }
/* .feature-list b{ display:block; } */
.feature-list span{ color:var(--tx-on-light-soft); font-size:.95rem; }

.pbt{ background:var(--ink); color:var(--tx-on-dark); }
.pbt__badge{ display:inline-block; padding:.4em .95em; border:1px solid var(--gold); border-radius:999px; color:var(--gold-bright); font-family:var(--font-head); text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; }
.pbt__list{ display:grid; gap:1rem; margin-top:1.4rem; }
.pbt__list li{ display:flex; gap:.8rem; align-items:flex-start; }
.pbt__list svg{ width:22px; height:22px; color:var(--gold-bright); flex-shrink:0; margin-top:2px; }
.pbt__list b{ color:var(--cream); }
.pbt__list span{ color:var(--tx-on-dark-soft); font-size:.95rem; }
/* Buttons sit side by side where they fit and wrap (then stack full-width via
   the 620px .hero__actions rule) where they don't — never force nowrap here. */
.pbt__actions{ margin-top:1.6rem; }

.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); }
.card-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.card-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.info-card{ background:#fff; border:1px solid var(--line-light); border-radius:var(--radius-lg); padding:clamp(24px,2.6vw,34px); box-shadow:var(--shadow-sm); transition:transform .25s var(--ease),box-shadow .25s var(--ease); }
.info-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.info-card__ico{ display:inline-block; width:40px; height:40px; color:var(--gold-deep); margin-bottom:1rem; }
.info-card h3{ font-size:1.25rem; text-transform:uppercase; }
.info-card p{ margin-top:.6rem; color:var(--tx-on-light-soft); font-size:.95rem; }
.info-card ul.mini{ margin-top:1rem; display:grid; gap:.4rem; }
.info-card ul.mini li{ font-size:.9rem; color:var(--tx-on-light-soft); padding-left:1.1rem; position:relative; }
.info-card ul.mini li::before{ content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; background:var(--gold); border-radius:1px; }

.spec-table{ width:100%; border-collapse:collapse; margin-top:1rem; overflow:hidden; border-radius:var(--radius); }
.spec-table th,.spec-table td{ text-align:left; padding:.85rem 1rem; border-bottom:1px solid var(--line-light); font-size:.92rem; }
.spec-table th{ font-family:var(--font-head); text-transform:uppercase; letter-spacing:.06em; background:var(--ink); color:var(--cream); }
.spec-table tr:nth-child(even) td{ background:rgba(20,19,14,.03); }

.table-scroll{ overflow-x:auto; }

/* =========================================================
   Quote / contact form
   ========================================================= */
.form-wrap{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,4vw,56px); align-items:start; }
.form-card{ background:#fff; border:1px solid var(--line-light); border-radius:var(--radius-lg); padding:clamp(26px,3.4vw,44px); box-shadow:var(--shadow-md); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.2rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; min-width:0; }
.field.col-span{ grid-column:1/-1; }
.field label{ font-family:var(--font-head); text-transform:uppercase; letter-spacing:.06em; font-size:.86rem; color:var(--tx-on-light); }
.field label .req{ color:var(--gold-deep); }
.field input,.field select,.field textarea{
  font-family:inherit; font-size:1rem; color:var(--tx-on-light);
  padding:.8em .9em; border:1.5px solid rgba(20,19,14,.18); border-radius:var(--radius); background:#fdfcf9;
  transition:border-color .15s, box-shadow .15s; width:100%; max-width:100%; min-width:0;
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(199,144,56,.16); }
.field textarea{ resize:vertical; min-height:120px; }
.field .hint{ font-size:.78rem; color:var(--tx-on-light-soft); }
.filedrop{ border:1.6px dashed rgba(20,19,14,.28); border-radius:var(--radius); padding:1.2rem; text-align:center; color:var(--tx-on-light-soft); font-size:.9rem; cursor:pointer; transition:.18s; background:#fdfcf9; }
.filedrop:hover,.filedrop.drag{ border-color:var(--gold); background:rgba(199,144,56,.06); color:var(--tx-on-light); }
.filedrop svg{ width:26px; height:26px; color:var(--gold-deep); margin:0 auto .5rem; }
.filedrop .names{ margin-top:.6rem; font-size:.82rem; color:var(--gold-deep); }
.form-note{ font-size:.82rem; color:var(--tx-on-light-soft); margin-top:1rem; }
.form-msg{ margin-top:1rem; padding:1rem 1.2rem; border-radius:var(--radius); font-size:.95rem; display:none; }
.form-msg.ok{ display:block; background:rgba(60,140,70,.12); border:1px solid rgba(60,140,70,.4); color:#1f5a2a; }
.form-msg.error{ display:block; background:rgba(180,50,40,.1); border:1px solid rgba(180,50,40,.35); color:#6e1e16; }

.aside-card{ background:var(--ink); color:var(--tx-on-dark); border-radius:var(--radius-lg); padding:clamp(26px,3vw,40px); }
.aside-card h3{ color:var(--cream); text-transform:uppercase; }
.aside-card .contact-row{ display:flex; gap:.9rem; align-items:flex-start; margin-top:1.4rem; }
.aside-card .contact-row svg{ width:22px; height:22px; color:var(--gold-bright); flex-shrink:0; margin-top:2px; }
.aside-card .contact-row b{ color:var(--cream); display:block; font-family:var(--font-head); letter-spacing:.04em; text-transform:uppercase; font-size:.95rem; }
.aside-card .contact-row a,.aside-card .contact-row span{ color:var(--tx-on-dark-soft); font-size:.95rem; }
.aside-card .contact-row a:hover{ color:var(--gold-bright); }
.aside-card .promise{ margin-top:1.8rem; padding-top:1.4rem; border-top:1px solid var(--line-dark); font-size:.9rem; color:var(--tx-on-dark-soft); }

/* =========================================================
   Reveal animation
   ========================================================= */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* =========================================================
   Product family explorer (products.html)
   Rail of seven families + a sticky stage. Desktop mirrors the hovered
   item's panel into the stage; below 900px the stage is hidden and each
   panel opens in place as an accordion.
   ========================================================= */
.explorer{ display:grid; grid-template-columns:minmax(300px,420px) minmax(0,1fr); gap:clamp(32px,4.5vw,56px); align-items:start; }
.explorer > *{ min-width:0; }
.explorer__rail{ display:flex; flex-direction:column; }
.explorer__btn{
  display:grid; grid-template-columns:44px minmax(0,1fr) 18px; gap:14px; align-items:center;
  width:100%; padding:18px; text-align:left; background:transparent; border:0; border-bottom:1px solid var(--line-light);
  color:var(--tx-on-light); cursor:pointer; font:inherit; transition:background .18s var(--ease), color .18s var(--ease);
}
.explorer__num{ font-family:var(--font-head); font-weight:600; font-size:1.05rem; letter-spacing:.08em; color:var(--gold-deep); }
.explorer__label{ display:flex; flex-direction:column; gap:2px; }
.explorer__name{ font-family:var(--font-head); font-weight:600; font-size:1.38rem; text-transform:uppercase; line-height:1.05; }
.explorer__tag{ font-size:.84rem; color:var(--tx-on-light-soft); }
.explorer__chev{ width:18px; height:18px; opacity:0; color:var(--gold-bright); transition:opacity .18s var(--ease), transform .22s var(--ease); }
.explorer__btn:hover{ background:rgba(20,19,14,.04); }
.explorer__item.is-active .explorer__btn{ background:var(--ink); color:var(--cream); border-bottom-color:var(--ink); }
.explorer__item.is-active .explorer__num{ color:var(--gold-bright); }
.explorer__item.is-active .explorer__tag{ color:var(--tx-on-dark-soft); }
.explorer__item.is-active .explorer__chev{ opacity:1; }
.explorer__hint{ margin-top:14px; font-family:var(--font-head); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--tx-on-light-soft); }
.explorer__panel{ display:none; }

.explorer__stage{ position:sticky; top:140px; display:flex; flex-direction:column; gap:26px; transition:opacity .22s var(--ease), transform .22s var(--ease); }
.explorer__stage.is-swapping{ opacity:0; transform:translateY(8px); }
.explorer__stage .explorer__panel{ display:flex; flex-direction:column; gap:26px; }
.explorer__media{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); aspect-ratio:16/9; max-width:100%; }
.explorer__media img{ width:100%; height:100%; object-fit:cover; }
.explorer__body{ display:flex; flex-direction:column; gap:14px; }
.explorer__title{ font-size:clamp(1.9rem,3vw,2.75rem); text-transform:uppercase; }
.explorer__body .lead{ font-size:1.12rem; }
.explorer__list{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 28px; margin-top:.2rem; }
.explorer__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:10px; }
@media (prefers-reduced-motion: reduce){ .explorer__stage{ transition:none; } .explorer__stage.is-swapping{ opacity:1; transform:none; } }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1080px){
  .trust__grid{ grid-template-columns:repeat(2,1fr); }
  .trust__item:nth-child(-n+2){ border-bottom:1px solid var(--line-dark); }
  .trust__item:nth-child(3){ border-left:none; }
  .prod-grid{ grid-template-columns:repeat(2,1fr); }
  .why-grid,.why-grid.cols-4{ grid-template-columns:repeat(2,1fr); }
  .cap-lead{ grid-template-columns:1fr; }
  .card-grid,.card-grid.cols-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 1220px){
  /* Two nav__cta buttons (Power by Teel + Request a Quote) plus the five
     nav__links no longer fit above phone widths — switch to the hamburger
     here instead of at 900px so nothing clips on tablet/small-laptop widths. */
  .nav__links,.nav__divider{ display:none; }
  .nav__toggle{ display:inline-block; }
  .nav__cta{ margin-left:auto; gap:.5rem; }
  .nav__cta .btn:not(.nav__cta-main){ display:none; }
}
@media (max-width: 900px){
  /* Logo + full-size CTA + toggle don't fit together at phone widths —
     shrink the two flexible pieces so nothing gets clipped by html's overflow-x:hidden. */
  .nav{ height:auto; padding-block:14px; gap:.6rem; }
  .brand img,.brand img.scrolled{ height:52px; }
  .nav__cta-main{ font-size:.86rem; padding:.6em 1em; }
  /* Mirrors .pagehero--video's mobile treatment: the box's aspect flips from
     wide (desktop) to tall (mobile, content-driven height), so a full-bleed
     absolute video under object-fit:cover would crop 60%+ of its width.
     Decouple media into its own bounded-aspect block above the copy instead. */
  .hero__grid{ grid-template-columns:1fr; }
  .hero__media{ position:relative; inset:auto; order:-1; height:56vw; min-height:200px; max-height:320px; }
  .hero__media::before{ background:linear-gradient(180deg, rgba(20,19,14,.1) 0%, rgba(20,19,14,.6) 78%, var(--ink) 100%); }
  .hero__truck{ width:96%; right:0; left:auto; bottom:0; }
  .hero__copy{ padding-top:36px; }
  .hero__scroll{ display:none; }
  .hero__specline{ display:none; }
  .ind-grid{ grid-template-columns:1fr; }
  .urgent__grid{ grid-template-columns:1fr; }
  .urgent__media{ min-height:260px; }
  .urgent__media::after{ background:linear-gradient(0deg, var(--ink) 5%, rgba(20,19,14,0) 60%); }
  .about__grid{ grid-template-columns:1fr; }
  .about__media{ order:-1; }
  .split{ grid-template-columns:1fr; }
  .split--reverse .split__media{ order:-1; }
  /* Explorer flips to an accordion: hide the stage, let each item's own
     panel open beneath its button (toggled by main.js). */
  .explorer{ grid-template-columns:1fr; gap:0; }
  .explorer__stage{ display:none; }
  .explorer__hint{ display:none; }
  .explorer__item.is-active .explorer__btn{ border-bottom-color:transparent; }
  .explorer__item.is-active .explorer__chev{ transform:rotate(90deg); }
  .explorer__panel:not([hidden]){ display:flex; flex-direction:column; gap:18px; padding:0 18px 26px; background:var(--ink); color:var(--tx-on-dark); }
  .explorer__panel .explorer__media{ aspect-ratio:16/10; box-shadow:none; }
  .explorer__panel .eyebrow{ color:var(--gold-bright); }
  .explorer__panel .lead{ color:var(--tx-on-dark-soft); font-size:1rem; }
  .explorer__panel .feature-list svg{ color:var(--gold-bright); }
  .explorer__panel .feature-list span{ color:var(--tx-on-dark); }
  .explorer__panel .btn--solid-dark{ --bg:var(--gold); --fg:#1c1406; --bd:var(--gold); }
  .explorer__panel .btn--ghost-light{ --fg:var(--gold-bright); --bd:var(--gold); }
  .explorer__panel .btn--ghost-light:hover{ background:var(--gold); color:#1c1406; border-color:var(--gold); }
  .form-wrap{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr 1fr; }

  /* Pagehero video: the box's aspect flips from wide (desktop) to tall (mobile,
     content-driven height), so a 16:9 clip under object-fit:cover would crop
     60%+ of its width. Decouple media into its own bounded-aspect block above
     the copy instead of a full-bleed backdrop behind it. */
  .pagehero--video{ padding-top:0 !important; }
  .pagehero--video .pagehero__media{
    position:relative; inset:auto; height:56vw; min-height:200px; max-height:320px;
  }
  .pagehero--video .pagehero__media::after{
    background:linear-gradient(180deg, rgba(20,19,14,.1) 0%, rgba(20,19,14,.6) 78%, var(--ink) 100%);
  }
  .pagehero--video .pagehero__in{ padding-top:28px; }
}
@media (max-width: 720px){
  .topbar{ display:none; }
}
@media (max-width: 620px){
  .trust__grid{ grid-template-columns:1fr; }
  .trust__item{ border-left:none !important; border-bottom:1px solid var(--line-dark); }
  .prod-grid{ grid-template-columns:1fr 1fr; }
  /* At 2-up phone widths the card is narrow enough that longer titles
     ("Carbon Steel Pipe") wrap to 2 lines, growing the bottom-anchored body
     past the top of the fixed aspect-ratio box and under the icon. Let the
     card grow with its content instead, with body padding reserving the
     icon's own footprint (top:18px + 46px tall) so text never reaches it. */
  .prod-card{ aspect-ratio:auto; justify-content:flex-start; }
  .prod-card__body{ padding-top:70px; }
  .why-grid,.why-grid.cols-4{ grid-template-columns:1fr; }
  .card-grid,.card-grid.cols-2,.card-grid.cols-4{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; }
  .about__stats{ gap:1.4rem; }
  .hero__actions .btn{ flex:1 1 auto; }
  .explorer__list{ grid-template-columns:1fr; gap:10px; }
  .explorer__actions .btn{ flex:1 1 auto; }
  .explorer__btn{ grid-template-columns:36px minmax(0,1fr) 18px; gap:12px; padding:16px 14px; }
}

/* mobile menu panel */
.mobile-menu{
  position:fixed; inset:0 0 0 auto; width:min(86vw,360px); z-index:70;
  background:#0f0e09; border-left:1px solid var(--line-dark);
  transform:translateX(100%); transition:transform .32s var(--ease);
  display:flex; flex-direction:column; padding:26px 24px; overflow-y:auto;
}
body.menu-open .mobile-menu{ transform:none; }
.mobile-menu__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.4rem; }
.mobile-menu__head img{ height:40px; }
.mobile-menu a.m-link{ font-family:var(--font-head); text-transform:uppercase; letter-spacing:.06em; font-size:1.3rem; color:var(--cream); padding:.7rem 0; border-bottom:1px solid var(--line-dark); }
.mobile-menu a.m-link[aria-current="page"]{ color:var(--gold-bright); }
.mobile-menu .btn{ margin-top:1.4rem; }
.mobile-menu__contact{ margin-top:auto; padding-top:1.6rem; color:var(--tx-on-dark-soft); font-size:.9rem; display:grid; gap:.6rem; }
.mobile-menu__contact a{ display:flex; gap:.5rem; align-items:center; }
.mobile-menu__contact svg{ width:15px; height:15px; color:var(--gold); }
.scrim{ position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:65; opacity:0; visibility:hidden; transition:.3s; }
body.menu-open .scrim{ opacity:1; visibility:visible; }
.mobile-close{ background:transparent; border:1px solid var(--line-dark); color:var(--cream); width:42px; height:42px; border-radius:var(--radius); cursor:pointer; font-size:1.3rem; }