/* =====================================================================
   Idaho Pipe & Steel — shared shell stylesheet  (LIGHT industrial theme)
   Barlow Condensed + Barlow + JetBrains Mono. Brand red + steel + slate.
   All pages use these classes; keep page-specific CSS minimal.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root{
  --bg:#FFFFFF; --bg-2:#F3F5F8; --surface:#FFFFFF; --surface-2:#EEF1F5;
  --border:#E4E8ED; --border-2:#D3D9E1;
  --text:#161A1F; --text-2:#48515A; --text-3:#565D66;
  --steel:#5D6B7A; --steel-lt:#8A95A2;
  --red:#D42A24; --red-2:#AE1F1A; --red-text:#BC1F18; --red-ink:#FFFFFF;
  --red-glow:rgba(212,42,36,.20);

  /* dark tokens (footer only) */
  --d-bg:#12161B; --d-text:#EDEFF2; --d-text-2:#AAB2BB; --d-text-3:#79828C;
  --d-border:rgba(255,255,255,.10);

  --f-display:"Barlow Condensed","Arial Narrow",sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;

  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
  --s7:48px;--s8:64px;--s9:96px;--s10:128px;
  --container:1180px; --pad:24px;
  --radius:14px; --radius-sm:10px; --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --shadow:0 10px 30px -12px rgba(16,24,40,.18), 0 2px 8px rgba(16,24,40,.06);
  --shadow-lg:0 24px 60px -18px rgba(16,24,40,.28);
  --ease:cubic-bezier(.16,1,.3,1); --dur:.5s;
  --header-h:70px;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  font-family:var(--f-body); background:var(--bg); color:var(--text-2);
  font-size:1.0625rem; line-height:1.65; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
img,svg,video{display:block; max-width:100%}
img{height:auto}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--red); outline-offset:2px; border-radius:3px}
::selection{background:var(--red); color:#fff}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-family:var(--f-display); color:var(--text); line-height:1.04; font-weight:700; letter-spacing:-.01em}
h1{font-size:clamp(2.6rem,6vw,4.75rem); text-transform:uppercase; letter-spacing:-.015em}
h2{font-size:clamp(2rem,4vw,3rem); text-transform:uppercase}
h3{font-size:1.5rem; font-weight:600}
h4{font-size:1.05rem; font-weight:600; letter-spacing:.01em}
p{max-width:66ch}
strong{color:var(--text); font-weight:600}
.lead{font-size:clamp(1.075rem,1.7vw,1.28rem); color:var(--text-2); line-height:1.6}
.eyebrow{
  font-family:var(--f-mono); font-size:.78rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--red-text); display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1rem;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--red); display:inline-block}
.spec{font-family:var(--f-mono); font-size:.82rem; color:var(--steel); letter-spacing:.02em}
.muted{color:var(--text-3)}
.center{text-align:center}
.center p{margin-left:auto;margin-right:auto}

/* ---------- Layout ---------- */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad)}
.section{padding-block:clamp(64px,10vw,128px); position:relative}
.section--alt{background:var(--bg-2)}
.section-head{max-width:64ch; margin-bottom:var(--s7)}
.section-head.center{margin-inline:auto}
.divider{height:1px; background:var(--border); border:0}

.skip-link{position:absolute; left:-999px; top:8px; z-index:200; background:var(--red); color:#fff;
  padding:.6rem 1rem; border-radius:6px; font-weight:600}
.skip-link:focus{left:8px}

.scroll-progress{position:fixed; top:0; left:0; height:3px; width:0; z-index:120;
  background:linear-gradient(90deg,var(--red-2),var(--red)); will-change:width}

/* ---------- Header / Nav ---------- */
.site-header{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(12px); -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid transparent; transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.site-header.scrolled{background:rgba(255,255,255,.96); border-bottom-color:var(--border); box-shadow:0 1px 12px rgba(16,24,40,.06)}
.header-inner{display:flex; align-items:center; justify-content:space-between; min-height:var(--header-h)}
.brand{display:inline-flex; align-items:center; gap:.6rem; flex-shrink:0}
.brand-mark{flex-shrink:0}
.brand-text{font-family:var(--f-display); font-weight:700; line-height:.92; text-transform:uppercase; letter-spacing:.01em}
.brand-text b{display:block; color:var(--text); font-size:1.12rem}
.brand-text i{display:block; font-style:normal; color:var(--red-text); font-size:.82rem; letter-spacing:.14em}

.nav{display:flex; align-items:center}
.nav-menu{list-style:none; display:flex; align-items:center; gap:.35rem; padding:0}
.nav-menu a:not(.btn){display:block; padding:.5rem .7rem; font-weight:500; color:var(--text-2);
  font-size:.98rem; border-radius:7px; transition:color .2s var(--ease),background .2s var(--ease)}
.nav-menu a:not(.btn):hover{color:var(--text); background:rgba(16,24,40,.05)}
.nav-menu a[aria-current="page"]{color:var(--text)}
.nav-menu a[aria-current="page"]::after{content:""; display:block; height:2px; margin-top:2px;
  background:var(--red); border-radius:2px}
.nav-cta{margin-left:.35rem}
.nav-toggle{display:none; width:44px; height:44px; background:transparent; border:1px solid var(--border-2);
  border-radius:9px; cursor:pointer; padding:0; align-items:center; justify-content:center; flex-direction:column; gap:5px}
.nav-toggle span{display:block; width:20px; height:2px; background:var(--text); transition:transform .3s var(--ease),opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; cursor:pointer;
  font-family:var(--f-body); font-weight:600; font-size:1rem; line-height:1; text-align:center;
  padding:.85rem 1.4rem; border-radius:var(--radius-sm); border:1px solid transparent;
  transition:transform .18s var(--ease),background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
  white-space:nowrap}
.btn svg{flex-shrink:0}
.btn-red{background:var(--red); color:var(--red-ink); box-shadow:0 6px 18px -8px var(--red-glow)}
.btn-red:hover{background:var(--red-2); transform:translateY(-2px); box-shadow:0 12px 26px -8px var(--red-glow)}
.btn-steel{background:var(--surface-2); color:var(--text); border-color:var(--border-2)}
.btn-steel:hover{border-color:var(--steel); transform:translateY(-2px); background:#E5EAF0}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border-2)}
.btn-ghost:hover{border-color:var(--steel); background:rgba(16,24,40,.04)}
.btn-lg{padding:1.05rem 1.8rem; font-size:1.075rem}
.btn-sm{padding:.55rem .9rem; font-size:.9rem}
.btn-full{width:100%}

/* ---------- Chips / tags / stats ---------- */
.chips{display:flex; flex-wrap:wrap; gap:.6rem}
.chip{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--f-mono); font-size:.78rem;
  letter-spacing:.02em; color:var(--text-2); background:var(--surface);
  border:1px solid var(--border); border-radius:99px; padding:.45rem .85rem; box-shadow:var(--shadow-sm)}
.chip svg{color:var(--red)}
.tags{display:flex; flex-wrap:wrap; gap:.5rem}
.tag{font-family:var(--f-mono); font-size:.8rem; color:var(--text-2); background:var(--surface);
  border:1px solid var(--border); border-radius:7px; padding:.4rem .8rem}

.stat-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border);
  border-block:1px solid var(--border)}
.stat{background:var(--bg-2); padding:clamp(24px,4vw,44px) var(--s4); text-align:center}
.stat-num{font-family:var(--f-display); font-weight:700; font-size:clamp(2.4rem,5vw,3.6rem);
  color:var(--text); line-height:1}
.stat-num .u{color:var(--red)}
.stat-label{font-family:var(--f-mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-3); margin-top:.5rem}
.stat-num.stat-word{font-size:clamp(1.5rem,2.6vw,2.1rem); letter-spacing:.01em}

/* ---------- Grid / cards ---------- */
.grid{display:grid; gap:var(--s5)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-auto{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:var(--s6); box-shadow:var(--shadow-sm); transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.card:hover{transform:translateY(-4px); border-color:var(--border-2); box-shadow:var(--shadow)}
.card-icon{width:48px; height:48px; border-radius:11px; background:rgba(212,42,36,.08);
  border:1px solid rgba(212,42,36,.2); display:flex; align-items:center; justify-content:center; margin-bottom:var(--s4)}
.card-icon svg{color:var(--red)}
.card h3{margin-bottom:.5rem}
.card p{color:var(--text-2)}

/* product / photo card */
.p-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.p-card:hover{transform:translateY(-4px); border-color:var(--border-2); box-shadow:var(--shadow)}
.p-thumb{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--surface-2)}
.p-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.p-card:hover .p-thumb img{transform:scale(1.06)}
.p-body{padding:var(--s5); display:flex; flex-direction:column; gap:.5rem; flex:1}
.p-body h3{font-size:1.35rem}
.p-body .spec{margin-top:auto}
.p-link{display:inline-flex; align-items:center; gap:.4rem; color:var(--red-text); font-weight:600; font-size:.95rem; margin-top:.4rem}
.p-card:hover .p-link{gap:.65rem}
.p-link svg{transition:transform .2s var(--ease)}

.feature-list{list-style:none; padding:0; display:flex; flex-direction:column; gap:.85rem}
.feature-list li{display:flex; gap:.75rem; align-items:flex-start; color:var(--text-2)}
.feature-list svg{color:var(--red); flex-shrink:0; margin-top:3px}

/* ---------- Hero (photo) ---------- */
.hero{position:relative; min-height:clamp(580px,90vh,880px); display:flex; align-items:center;
  overflow:hidden; border-bottom:1px solid var(--border)}
.hero-photo{position:absolute; inset:0; z-index:0; overflow:hidden; background:#dfe4ea}
.hero-photo img{width:100%; height:100%; object-fit:cover; object-position:center 40%;
  transform-origin:60% 45%; animation:heroDrift 28s ease-in-out infinite alternate; will-change:transform}
@keyframes heroDrift{from{transform:scale(1.05)} to{transform:scale(1.13)}}
.hero-scrim{position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.9) 32%,rgba(255,255,255,.5) 60%,rgba(255,255,255,.15) 100%)}
.hero-scrim::after{content:""; position:absolute; inset:0;
  background:linear-gradient(0deg,var(--bg) 1%,transparent 24%)}
.hero .container{position:relative; z-index:2; width:100%}
.hero-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,64px); align-items:center;
  padding-block:clamp(48px,8vh,90px)}
.hero-copy{max-width:640px}
.hero-copy h1{color:var(--text); margin-bottom:1.2rem}
.hero-copy h1 .accent{color:var(--red)}
.hero-copy .lead{color:var(--text-2); margin-bottom:1.8rem}
.hero-actions{display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:1.8rem}
.hero .chips{gap:.5rem}

/* hero quote card */
.hero-form{background:var(--surface); border:1px solid var(--border-2); border-radius:var(--radius-lg);
  padding:clamp(22px,3vw,32px); box-shadow:var(--shadow-lg)}
.hero-form h2{font-size:1.5rem; text-transform:none; letter-spacing:-.01em; margin-bottom:.3rem}
.hero-form .sub{font-size:.92rem; color:var(--text-3); margin-bottom:1.2rem}

/* ---------- Inner-page hero ---------- */
.page-hero{position:relative; overflow:hidden; border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%)}
.page-hero .container{position:relative; z-index:2; padding-block:clamp(56px,10vw,110px)}
.page-hero .breadcrumb{margin-bottom:1.2rem}
.page-hero h1{max-width:16ch}
.page-hero .lead{max-width:56ch; margin-top:1.1rem}
.page-hero-media{position:absolute; inset:0; z-index:0; opacity:.16;
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 30%,#000 100%)}
.page-hero-media img{width:100%;height:100%;object-fit:cover}
.breadcrumb{font-family:var(--f-mono); font-size:.76rem; letter-spacing:.06em; color:var(--text-3)}
.breadcrumb a{color:var(--text-2)} .breadcrumb a:hover{color:var(--red-text)}
.breadcrumb span{color:var(--steel)}

/* ---------- Split / facts ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:center}
.split-media{border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); aspect-ratio:4/3; box-shadow:var(--shadow)}
.split-media img{width:100%;height:100%;object-fit:cover}
.fact-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4)}
.fact{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--s5); box-shadow:var(--shadow-sm)}
.fact .n{font-family:var(--f-display); font-weight:700; font-size:1.9rem; color:var(--red-text); line-height:1}
.fact .l{color:var(--text-2); font-size:.95rem; margin-top:.35rem}

/* band w/ image (light) */
.band{position:relative; overflow:hidden; background:var(--bg-2)}
.band-media{position:absolute; inset:0; z-index:0}
.band-media img{width:100%;height:100%;object-fit:cover; opacity:.14}
.band::before{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,var(--bg-2) 32%,rgba(243,245,248,.62) 100%)}
.band .container{position:relative; z-index:2}

/* ---------- Forms ---------- */
.field{display:flex; flex-direction:column; gap:.4rem; margin-bottom:var(--s4)}
.field label{font-size:.86rem; font-weight:600; color:var(--text)}
.field label .req{color:var(--red-text)}
.field input,.field select,.field textarea{
  background:var(--surface-2); border:1px solid var(--border-2); border-radius:var(--radius-sm);
  padding:.75rem .85rem; color:var(--text); width:100%; transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.field textarea{min-height:96px; resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--red);
  box-shadow:0 0 0 3px rgba(212,42,36,.15)}
.field input:user-invalid,.field textarea:user-invalid,.field select:user-invalid{border-color:#d64541}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3)}
.form-status{min-height:1.2em; font-size:.9rem; margin-top:.3rem}
.form-status.ok{color:#137a43} .form-status.err{color:#c0261f}
.form-note{font-size:.8rem; color:var(--text-3); margin-top:.6rem}
.form-note a{color:var(--red-text); font-weight:600}
.honey{position:absolute!important; left:-9999px!important}

/* ---------- FAQ ---------- */
.faq{max-width:820px; margin-inline:auto}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item summary{padding:1.15rem 2rem 1.15rem 0; cursor:pointer; font-family:var(--f-display);
  font-weight:600; font-size:1.2rem; color:var(--text); list-style:none; position:relative; text-transform:uppercase; letter-spacing:.01em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%);
  color:var(--red); font-family:var(--f-body); font-size:1.5rem; transition:transform .2s var(--ease)}
.faq-item[open] summary::after{content:"\2212"}
.faq-item p{padding-bottom:1.2rem; color:var(--text-2)}

/* ---------- CTA band ---------- */
.cta-band{position:relative; overflow:hidden; background:var(--bg-2); padding-block:clamp(56px,8vw,104px)}
.cta-band::before{content:""; position:absolute; z-index:0; inset:auto -10% -60% auto; width:520px; height:520px;
  background:radial-gradient(circle,var(--red-glow),transparent 62%); opacity:.7}
.cta-inner{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between;
  gap:var(--s6); flex-wrap:wrap}
.cta-inner h2{text-transform:none; letter-spacing:-.01em; max-width:18ch}
.cta-inner .lead{margin-top:.6rem; color:var(--text-2)}
.cta-actions{display:flex; gap:.9rem; flex-wrap:wrap}

/* ---------- Footer (deep steel, grounds the light page) ---------- */
.site-footer{background:var(--d-bg); color:var(--d-text-2); border-top:3px solid var(--red); padding-top:var(--s8)}
.site-footer .brand-text b{color:var(--d-text)}
.footer-inner{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--s6); padding-bottom:var(--s7)}
.footer-brand{max-width:38ch}
.footer-brand .brand{margin-bottom:1rem}
.footer-brand p{color:var(--d-text-3); font-size:.95rem}
.foot-nap{display:flex; flex-direction:column; gap:.25rem; margin-top:1rem; font-size:.92rem; color:var(--d-text-2)}
.foot-nap a:hover{color:#fff}
.footer-nav h3,.footer-hours h3{color:var(--d-text); margin-bottom:.9rem; text-transform:uppercase;
  font-family:var(--f-display); letter-spacing:.03em; font-size:1.05rem}
.footer-nav ul{list-style:none; padding:0; display:flex; flex-direction:column; gap:.55rem}
.footer-nav a{color:var(--d-text-3); font-size:.95rem} .footer-nav a:hover{color:#fff}
.footer-hours p{color:var(--d-text-3); font-size:.95rem}
.footer-bottom{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-block:var(--s5); border-top:1px solid var(--d-border); font-size:.85rem; color:var(--d-text-3)}

/* ---------- Mobile call bar ---------- */
.call-bar{position:fixed; left:0; right:0; bottom:0; z-index:95; display:none; align-items:center;
  justify-content:center; gap:.5rem; text-align:center; padding:.95rem; font-weight:700; letter-spacing:.02em;
  background:var(--red); color:#fff; box-shadow:0 -6px 24px rgba(16,24,40,.22)}

/* ---------- Reveal animations ---------- */
[data-reveal]{opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].from-left{transform:translateX(-40px)}
[data-reveal].from-right{transform:translateX(40px)}
[data-reveal].scale{transform:scale(.94)}
[data-reveal].in{opacity:1; transform:none}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}
.d4{transition-delay:.28s}.d5{transition-delay:.35s}.d6{transition-delay:.42s}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .hero-inner{grid-template-columns:1fr; gap:40px}
  .hero-form{max-width:520px}
  .footer-inner{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:860px){
  .split{grid-template-columns:1fr}
  .cols-3{grid-template-columns:1fr 1fr}
  .stat-strip{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .nav-toggle{display:flex}
  .nav-menu{position:fixed; inset:var(--header-h) 0 auto 0; flex-direction:column; align-items:stretch; gap:.15rem;
    background:rgba(255,255,255,.98); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border); padding:var(--s4) var(--pad) var(--s6); box-shadow:var(--shadow);
    transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none; transition:transform .28s var(--ease),opacity .28s var(--ease),visibility .28s var(--ease)}
  .nav-menu.open{transform:none; opacity:1; visibility:visible; pointer-events:auto}
  .nav-menu a:not(.btn){padding:.85rem .4rem; font-size:1.1rem; border-bottom:1px solid var(--border)}
  .nav-menu a[aria-current="page"]::after{display:none}
  .nav-cta{margin:.6rem 0 0}
  .nav-cta .btn{width:100%; padding:.85rem}
  .call-bar{display:flex}
  body{padding-bottom:58px}
  .cols-2,.cols-3{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .fact-grid{grid-template-columns:1fr 1fr}
  .footer-inner{grid-template-columns:1fr 1fr}
  .footer-bottom{flex-direction:column; gap:.3rem; text-align:center}
  .cta-inner{flex-direction:column; align-items:flex-start}
}
@media (max-width:420px){
  .stat-strip{grid-template-columns:1fr 1fr}
  .footer-inner{grid-template-columns:1fr}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important; transform:none!important}
  .hero-photo img{animation:none; transform:scale(1.02)}
  .p-card:hover .p-thumb img,.card:hover{transform:none}
}