/* ============================================
   SUPER FLAPS — MASTER STYLESHEET
   ============================================ */

:root{
  --black:#0A0A0B;
  --panel:#18191C;
  --panel-raised:#212226;
  --steel-100:#E7E8EA;
  --steel-400:#9A9DA3;
  --steel-600:#4B4E54;
  --line: rgba(231,232,234,0.10);
  --rust:#E0621C;
  --rust-dark:#A8480F;
}

*{box-sizing:border-box; margin:0; padding:0;}

body{
  background:var(--black);
  color:var(--steel-100);
  font-family:'Inter',sans-serif;
  line-height:1.55;
}

h1,h2,h3,.display{
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.01em;
  font-weight:700;
  line-height:1.05;
}

.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--rust);
}

a{color:inherit; text-decoration:none;}
.wrap{max-width:1140px; margin:0 auto; padding:0 24px;}
.wrap-wide{max-width:1140px; margin:0 auto; padding:0 24px;}
img,svg{display:block; max-width:100%;}

/* ---------- Reusable surface treatments ---------- */
.brushed{
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 4px),
    linear-gradient(155deg, #232529 0%, #1C1D20 45%, #232529 100%);
}
.cut{ clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
.cut-sm{ clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.metal-text{
  background:linear-gradient(105deg, #8B8E93 0%, #F2F3F4 22%, #C6C8CB 40%, #E7E8EA 55%, #8B8E93 75%, #D4D6D9 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Header / nav (all pages) ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,11,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; max-width:1140px; margin:0 auto; gap:24px;
}
.logo-img{height:34px; width:auto;}
.nav-links{display:flex; gap:30px; align-items:center;}
.nav-links a{color:var(--steel-400); font-size:14px; font-weight:500; transition:color .15s;}
.nav-links a:hover{color:var(--steel-100);}
.nav-links a.active{color:var(--rust);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; font-family:'IBM Plex Mono',monospace;
  font-weight:600; font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
  padding:12px 24px; border:none; cursor:pointer; transition:transform .12s, filter .12s;
}
.btn-primary{background:var(--rust); color:#100600;}
.btn-primary:hover{filter:brightness(1.1); transform:translateY(-1px);}
.btn-ghost{background:transparent; color:var(--steel-100); border:1.5px solid var(--steel-600);}
.btn-ghost:hover{border-color:var(--rust); color:var(--rust);}
.btn-lg{padding:16px 28px; font-size:14px;}

/* ---------- Breadcrumb ---------- */
.crumb{padding:22px 0 0; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--steel-600);}
.crumb span{color:var(--rust);}

/* ---------- Generic section shell ---------- */
section{padding:64px 0;}
.section-head{max-width:600px; margin-bottom:44px;}
.section-head h2{font-size:34px; margin-top:10px; color:var(--steel-100);}
.section-head p{color:var(--steel-400); font-size:16px; margin-top:12px;}
.page-head{max-width:640px;}
.page-head h1{font-size:40px; margin:12px 0 14px; color:var(--steel-100);}
.page-head p{font-size:17px; color:var(--steel-400);}

/* ---------- Footer (all pages) ---------- */
footer{padding:52px 0 28px; border-top:1px solid var(--line);}
.foot-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;
  padding-bottom:32px; border-bottom:1px solid var(--line);
}
.foot-grid h4{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--rust); margin-bottom:14px;}
.foot-grid a, .foot-grid p{font-size:14px; display:block; margin-bottom:8px; color:var(--steel-400);}
.foot-logo{height:26px;}
.foot-tag{font-size:13px; margin-top:14px; max-width:220px; color:var(--steel-600);}
.foot-bottom{padding-top:20px; font-size:12px; font-family:'IBM Plex Mono',monospace; color:var(--steel-600);}

/* ============================================
   HOME PAGE
   ============================================ */
.launch-banner{background:var(--panel); border-bottom:1px solid var(--rust); padding:14px 0; text-align:center;}
.launch-banner .wrap{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;}
.launch-banner p{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--steel-100); letter-spacing:0.01em;}
.launch-banner strong{color:var(--rust);}
.launch-banner a{color:var(--rust); text-decoration:underline; font-weight:600;}

.hero{
  padding:64px 0 80px;
  background: radial-gradient(ellipse 900px 500px at 80% -10%, rgba(224,98,28,0.12), transparent 60%), var(--black);
  border-bottom:1px solid var(--line);
}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
.hero-logo-wrap{margin-bottom:22px;}
.hero-logo{width:100%; max-width:420px;}
.hero-sub{font-size:18px; color:var(--steel-400); max-width:460px; margin:14px 0 32px;}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap;}

.plate{
  background:var(--panel-raised); position:relative; padding:38px;
  /* aspect-ratio controls the box's SHAPE, not the photo's — a landscape truck
     photo will get cropped top/bottom if this is taller than it is wide.
     4/3 works well for typical landscape photos. If your photo still crops
     wrong, try 3/2 (wider) or adjust object-position on .product-photo below
     to shift which part of the photo stays visible. */
  aspect-ratio:4/3; display:flex; flex-direction:column; justify-content:flex-end;
  border:1px solid var(--line); overflow:hidden;
}
.plate img.product-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  /* object-position controls WHICH part of the photo stays visible when
     cropping happens. "center" is the default. If an important part of your
     photo (e.g. the truck's face) is getting cut off, try "center 30%" to
     shift the visible crop upward, or "center 70%" to shift it downward. */
  object-position:center 100%;
}
.plate::after{
  content:""; position:absolute; inset:16px; border:1px solid rgba(231,232,234,0.12); pointer-events:none;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.plate-label{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--rust); letter-spacing:0.1em; margin-bottom:8px; position:relative; z-index:2;}
.plate-title{font-family:'Oswald',sans-serif; color:var(--steel-100); font-size:22px; text-transform:uppercase; font-weight:600; position:relative; z-index:2;}
.plate-sub{font-family:'IBM Plex Mono',monospace; color:var(--steel-400); font-size:12px; margin-top:6px; position:relative; z-index:2;}
.plate-img-note{
  position:absolute; top:38px; left:38px; right:38px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--steel-600);
  border:1px dashed var(--line); padding:12px; text-align:center;
}

.problem{padding:58px 0; border-bottom:1px solid var(--line);}
.problem .wrap{display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:start;}
.problem h2{font-size:30px; max-width:640px; margin:10px 0 0; color:var(--steel-100);}
.problem h2 .hl{color:var(--rust);}

.plates-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.mini-plate{padding:26px 22px; position:relative; border:1px solid var(--line);}
.mini-plate .num{font-family:'IBM Plex Mono',monospace; color:var(--rust); font-size:13px; font-weight:600;}
.mini-plate h3{font-size:18px; margin:12px 0 8px; color:var(--steel-100);}
.mini-plate p{font-size:14px; color:var(--steel-400);}

.why{background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.why-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px 40px;}
.check-row{display:flex; gap:14px; align-items:flex-start;}
.check-mark{
  flex:none; width:28px; height:28px; background:var(--rust); color:#100600;
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:14px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.check-row h3{font-size:16px; font-family:'Inter',sans-serif; text-transform:none; font-weight:600; letter-spacing:0; color:var(--steel-100);}
.check-row p{font-size:14px; color:var(--steel-400); margin-top:4px;}

.made{padding:64px 0; text-align:center; border-bottom:1px solid var(--line);}
.made h2{font-size:28px; max-width:640px; margin:12px auto 16px; color:var(--steel-100);}
.made p{color:var(--steel-400); max-width:560px; margin:0 auto;}
.made .fitment-tag{
  display:inline-flex; gap:10px; align-items:center; margin-top:26px; padding:11px 20px;
  border:1px solid var(--rust); font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--rust);
}

.founder-grid{display:grid; grid-template-columns:220px 1fr; gap:36px; align-items:center;}
.founder-photo{
  aspect-ratio:1/1; border:1px solid var(--line); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--steel-600); text-align:center; padding:16px;
}
.founder-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.founder-quote{font-size:20px; font-family:'Oswald',sans-serif; font-weight:500; text-transform:none; letter-spacing:0; line-height:1.4; color:var(--steel-100);}
.founder-quote span{color:var(--rust);}
.founder-link{margin-top:16px; display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--rust); font-weight:600;}

.final-cta{background:var(--rust); color:#100600; text-align:center; padding:64px 0;}
.final-cta .display{font-size:26px; color:#100600; margin-bottom:8px;}
.final-cta p{font-family:'IBM Plex Mono',monospace; font-size:14px; color:rgba(16,6,0,0.75); margin-bottom:28px;}
.final-cta .btn-primary{background:var(--black); color:var(--steel-100);}
.final-cta .btn-primary:hover{filter:brightness(1.3);}
.final-cta .btn-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.final-cta .btn-ghost{border:1.5px solid rgba(16,6,0,0.4); color:#100600; padding:15px 26px; font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:14px; text-transform:uppercase;}

/* ============================================
   SHOP / PRODUCT PAGE
   ============================================ */
.product-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; padding-top:24px;}
.gallery-main{
  /* Same note as .plate above — 4/3 suits a landscape product photo.
     Adjust if your shots are a different shape. */
  aspect-ratio:4/3; position:relative; padding:30px; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.gallery-main img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;}
.gallery-label{
  position:absolute; left:14px; bottom:14px; z-index:2; padding:8px 14px;
  background:rgba(10,10,11,0.82); border:1px solid var(--rust);
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--steel-100); letter-spacing:0.04em;
}
.gallery-note{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--steel-600); text-align:center; border:1px dashed var(--line); padding:16px; position:relative; z-index:2;}
.gallery-thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px;}
.thumb{aspect-ratio:1/1; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--steel-600); text-align:center; padding:6px; position:relative; overflow:hidden; cursor:pointer; transition:border-color .15s;}
.thumb:hover{border-color:var(--steel-600);}
.thumb.thumb-active{border-color:var(--rust);}
.thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}

.product-title{font-size:38px; margin:6px 0 10px; color:var(--steel-100);}
.product-sub{font-size:16px; color:var(--steel-400); margin-bottom:26px; max-width:440px;}

.option-group{margin-bottom:24px;}
.option-label{font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--steel-100); margin-bottom:10px;}
.option-pills{display:flex; flex-wrap:wrap; gap:10px;}
.pill{padding:10px 16px; border:1.5px solid var(--line); font-family:'IBM Plex Mono',monospace; font-size:13px; background:var(--panel); cursor:pointer; color:var(--steel-400);}
.pill.selected{border-color:var(--rust); background:var(--rust); color:#100600;}
.helper-link{font-size:13px; color:var(--rust); margin-top:8px; display:inline-block; font-family:'IBM Plex Mono',monospace;}

.price-row{display:flex; align-items:baseline; gap:10px; margin:26px 0 22px; padding-top:22px; border-top:1px solid var(--line);}
.price{font-family:'Oswald',sans-serif; font-size:30px; font-weight:600; color:var(--steel-100);}
.price-note{font-size:13px; color:var(--steel-600);}

.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:30px;}
.cta-row .btn{padding:15px 26px; font-size:14px;}

.includes{background:var(--panel); border:1px solid var(--line); padding:22px 24px;}
.includes h4{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--rust); margin-bottom:12px;}
.includes ul{list-style:none;}
.includes li{font-size:14px; padding:6px 0; border-bottom:1px dashed var(--line); color:var(--steel-400);}
.includes li:last-child{border-bottom:none;}
.includes li::before{content:"— "; color:var(--rust);}

.details-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px;}
.detail-card{background:var(--panel); border:1px solid var(--line); padding:24px;}
.detail-card .eyebrow{display:block; margin-bottom:8px;}
.detail-card p{font-size:14px; color:var(--steel-400);}

.fitment-strip{border:1px solid var(--rust); padding:30px 32px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;}
.fitment-strip h3{color:var(--steel-100); font-size:20px;}
.fitment-strip p{font-size:13px; color:var(--steel-400); font-family:'IBM Plex Mono',monospace; margin-top:6px;}

/* ---------- Truck fitment selector (Shop page) ---------- */
.option-group.locked{opacity:0.4; pointer-events:none; transition:opacity .2s;}
.pill.disabled{opacity:0.35; cursor:not-allowed; pointer-events:none;}
.fitment-note{
  display:none; margin-top:12px; padding:12px 14px;
  border:1px dashed var(--line); font-family:'IBM Plex Mono',monospace;
  font-size:12.5px; color:var(--steel-400);
}
.fitment-note.show{display:block;}

/* ---------- Before-you-order disclaimer (Fitment page) ---------- */
.disclaimer-panel{border:1px solid var(--rust); padding:28px 30px; margin-top:40px;}
.disclaimer-panel h3{color:var(--steel-100); font-size:19px; margin:8px 0 14px;}
.disclaimer-panel p{color:var(--steel-400); font-size:14px; margin-bottom:10px; max-width:640px;}
.disclaimer-panel p:last-child{margin-bottom:0;}
.disclaimer-panel-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:32px; align-items:center;}
.disclaimer-photo{aspect-ratio:4/3; overflow:hidden; border:1px solid var(--line);}
.disclaimer-photo img{width:100%; height:100%; object-fit:cover;}
.disclaimer-photo-pair{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.disclaimer-photo-pair .disclaimer-photo{aspect-ratio:3/4;}

.reviews-placeholder{border:1.5px dashed var(--line); padding:40px; text-align:center; color:var(--steel-600); font-family:'IBM Plex Mono',monospace; font-size:13px;}

/* ============================================
   HOW IT WORKS PAGE
   ============================================ */
.tools-box{padding:26px 30px; margin-top:36px; display:flex; gap:24px; align-items:center; flex-wrap:wrap; border:1px solid var(--line);}
.tools-box h3{color:var(--steel-100); font-size:18px; margin-top:6px;}
.tools-box p{font-size:14px; color:var(--steel-400); font-family:'IBM Plex Mono',monospace; margin-top:4px;}

.steps{border-top:1px solid var(--line);}
.step{display:grid; grid-template-columns:90px 1fr; gap:28px; padding:34px 0; border-bottom:1px solid var(--line); align-items:start;}
.step-num{font-family:'Oswald',sans-serif; font-size:44px; font-weight:700; color:var(--rust); line-height:1;}
.step h3{font-size:19px; margin-bottom:8px; color:var(--steel-100);}
.step p{color:var(--steel-400); font-size:15px; max-width:560px;}
.step-tag{display:inline-block; margin-top:10px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--rust); border:1px dashed var(--line); padding:6px 10px;}

.media-placeholder{
  margin-top:48px; border:1.5px dashed var(--line); padding:60px 30px; text-align:center;
  font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--steel-600); position:relative; overflow:hidden;
}
.media-placeholder img, .media-placeholder video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}

.takeoff{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:56px 0;}
.takeoff .wrap{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;}
.takeoff h2{font-size:26px; margin:10px 0 12px; color:var(--steel-100);}
.takeoff p{color:var(--steel-400); font-size:15px;}

/* ============================================
   FITMENT PAGE
   ============================================ */
.fit-table{margin-top:40px; position:relative; border:1px solid var(--line);}
table{width:100%; border-collapse:collapse; color:var(--steel-100);}
th{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--rust); text-align:left; padding:26px 28px 14px; font-weight:600;}
td{padding:16px 28px; font-size:14px; border-top:1px solid var(--line);}
tr:last-child td{padding-bottom:26px;}
td.model{font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:0.02em;}
td.note{color:var(--steel-400); font-family:'IBM Plex Mono',monospace; font-size:12px;}
.badge{display:inline-block; background:rgba(224,98,28,0.14); color:var(--rust); padding:3px 8px; font-family:'IBM Plex Mono',monospace; font-size:11px;}

.why-not{margin-top:52px; display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start;}
.why-not h2{font-size:26px; margin:10px 0 14px; color:var(--steel-100);}
.why-not p{color:var(--steel-400); font-size:15px;}

.year-examples{margin-top:52px;}
.year-examples-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.year-example{position:relative; aspect-ratio:4/3; overflow:hidden; border:1px solid var(--line);}
.year-example img{width:100%; height:100%; object-fit:cover;}
.year-example-tag{
  position:absolute; left:14px; bottom:14px; padding:8px 14px;
  background:rgba(10,10,11,0.82); border:1px solid var(--rust);
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--steel-100); letter-spacing:0.04em;
}

.unsure{margin-top:56px; border:1px solid var(--line); padding:36px; text-align:center;}
.unsure h3{font-size:22px; margin:10px 0 8px; color:var(--steel-100);}
.unsure p{color:var(--steel-400); margin-bottom:20px;}

/* ============================================
   ABOUT PAGE
   ============================================ */
.hero-about{padding:56px 0 0;}
.hero-about-grid{display:grid; grid-template-columns:220px 1fr; gap:40px; align-items:center;}
.hero-about h1{font-size:38px; margin:12px 0 16px; color:var(--steel-100);}
.hero-about p.lead{font-size:17px; color:var(--steel-400); max-width:560px;}

.story{max-width:680px;}
.story p{font-size:16px; color:var(--steel-100); margin-bottom:18px;}
.story p.quote{
  font-family:'Oswald',sans-serif; font-size:22px; text-transform:none; letter-spacing:0; font-weight:500;
  padding-left:20px; border-left:3px solid var(--rust); color:var(--steel-100); margin:30px 0;
}

.made-band{border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.made-band .wrap{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;}
.made-band h2{color:var(--steel-100); font-size:26px; margin:10px 0 12px;}
.made-band p{color:var(--steel-400); font-size:15px;}
.made-plate{border:1px dashed var(--line); padding:30px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--steel-400);}
.made-plate ul{list-style:none;}
.made-plate li{padding:6px 0; border-bottom:1px dashed var(--line);}
.made-plate li:last-child{border-bottom:none;}

.vision{max-width:680px;}
.vision h2{font-size:26px; margin:10px 0 16px; color:var(--steel-100);}
.vision p{font-size:16px; color:var(--steel-400);}
.vision-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center;}
.vision-photo{aspect-ratio:4/3; overflow:hidden; border:1px solid var(--line);}
.vision-photo img{width:100%; height:100%; object-fit:cover;}

/* ============================================
   FAQ PAGE
   ============================================ */
.faq-list{margin-top:36px; border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line); padding:22px 0;}
.faq-q{display:flex; justify-content:space-between; align-items:center; gap:20px; cursor:pointer;}
.faq-q .num{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--rust); margin-right:14px;}
.faq-q h3{font-family:'Inter',sans-serif; font-size:16px; font-weight:600; text-transform:none; letter-spacing:0; display:flex; align-items:baseline; color:var(--steel-100);}
.faq-q .mark{font-family:'IBM Plex Mono',monospace; color:var(--rust); font-size:18px; flex:none; transition:transform .2s ease;}
.faq-item.open .faq-q .mark{transform:rotate(135deg);}
.faq-a-wrap{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-item.open .faq-a-wrap{max-height:400px;}
.faq-a{font-size:14px; color:var(--steel-400); margin-top:12px; padding-left:30px; max-width:640px;}

.contact-cta{margin-top:56px; border:1px solid var(--rust); padding:36px; text-align:center;}
.contact-cta h3{color:var(--steel-100); font-size:22px; margin:10px 0 20px;}

/* ============================================
   CONTACT PAGE
   ============================================ */
.contact-grid{display:grid; grid-template-columns:1fr 1.2fr; gap:56px;}
.contact-photo{aspect-ratio:4/3; overflow:hidden; border:1px solid var(--line); margin-bottom:16px;}
.contact-photo img{width:100%; height:100%; object-fit:cover;}
.info-card{border:1px solid var(--line); padding:28px; margin-bottom:16px;}
.info-card .eyebrow{margin-bottom:8px;}
.info-card a, .info-card p{font-size:16px; display:block; margin-bottom:6px; color:var(--steel-100);}
.info-card .sub{font-size:13px; color:var(--steel-600); font-family:'IBM Plex Mono',monospace;}
.faq-nudge{font-size:13px; color:var(--steel-600); font-family:'IBM Plex Mono',monospace;}
.faq-nudge a{color:var(--rust); font-weight:600;}

form{border:1px solid var(--line); padding:32px;}
.field{margin-bottom:20px;}
label{display:block; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--steel-100); margin-bottom:8px;}
label .opt{color:var(--steel-600); text-transform:none; letter-spacing:0;}
input, textarea{
  width:100%; border:1.5px solid var(--line); padding:12px 14px;
  font-family:'Inter',sans-serif; font-size:14px; background:var(--panel); color:var(--steel-100);
}
input::placeholder, textarea::placeholder{color:var(--steel-600);}
input:focus, textarea:focus{outline:none; border-color:var(--rust);}
textarea{min-height:120px; resize:vertical;}
.submit-btn{width:100%; padding:15px; font-size:14px; margin-top:6px;}

/* ============================================
   RESPONSIVE — applies site-wide
   ============================================ */
@media (max-width: 860px){
  .nav-links{display:none;}
  .foot-grid{grid-template-columns:1fr 1fr;}

  .hero-grid{grid-template-columns:1fr;}
  .plate{aspect-ratio:16/9;}
  .hero-logo{max-width:320px;}
  .plates-grid{grid-template-columns:1fr 1fr;}
  .why-grid{grid-template-columns:1fr;}
  .founder-grid{grid-template-columns:1fr; text-align:center;}
  .founder-photo{margin:0 auto; width:160px;}
  .problem .wrap{grid-template-columns:1fr;}

  .product-grid{grid-template-columns:1fr;}
  .details-grid{grid-template-columns:1fr;}

  .step{grid-template-columns:1fr;}
  .step-num{font-size:30px;}
  .takeoff .wrap{grid-template-columns:1fr;}

  .why-not{grid-template-columns:1fr;}
  th, td{padding-left:16px; padding-right:16px;}
  .disclaimer-panel-grid{grid-template-columns:1fr;}
  .year-examples-grid{grid-template-columns:1fr;}

  .hero-about-grid{grid-template-columns:1fr; text-align:center;}
  .made-band .wrap{grid-template-columns:1fr;}
  .vision-grid{grid-template-columns:1fr;}

  .faq-a{padding-left:0;}

  .contact-grid{grid-template-columns:1fr;}
}

/* ============================================
   LEGAL / POLICY PAGES (privacy, warranty, shipping)
   ============================================ */
.policy-meta{color:var(--steel-600); font-size:13px; font-family:'IBM Plex Mono',monospace; margin-top:14px;}
.policy-content{max-width:680px; margin-top:36px;}
.policy-content h2{font-size:19px; margin:34px 0 12px; color:var(--steel-100); letter-spacing:0.01em;}
.policy-content h2:first-child{margin-top:0;}
.policy-content p{font-size:15px; color:var(--steel-400); margin-bottom:14px; line-height:1.65;}
.policy-content ul{list-style:none; margin:4px 0 18px;}
.policy-content li{font-size:15px; color:var(--steel-400); padding:5px 0 5px 20px; position:relative; line-height:1.5;}
.policy-content li::before{content:"—"; color:var(--rust); position:absolute; left:0;}
.policy-note{color:var(--steel-600); font-size:13px; font-family:'IBM Plex Mono',monospace; margin:24px 0 8px; border:1px dashed var(--line); padding:14px;}