/* ============================================================
   FNS Supply LLC — preview site
   Design language: the drilled plate. Every ornament on this page
   is a hole on a 60° pitch, a hairline rule, or a title block.
   ============================================================ */

:root{
  /* mill scale → stainless */
  --ink:      #070A0D;
  --steel:    #0F1D27;
  --steel-2:  #162936;
  --steel-3:  #1F3948;
  --paper:    #E9ECEA;
  --paper-2:  #DCE0DE;
  --text:     #0D1317;
  --text-mid: #4A565E;

  /* the one loud accent, sampled from the FNS deck rule */
  --blue:     #1872EA;
  --blue-dk:  #0E4E9E;
  --blue-lt:  #4C9AC8;
  /* means "defect" — used nowhere else */
  --oxide:    #C2622F;

  --line-d: rgba(255,255,255,.13);
  --line-l: rgba(13,19,23,.14);

  --f-disp: "Oswald", "Arial Narrow", sans-serif;
  --f-body: "Archivo", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "Consolas", monospace;

  --gut: clamp(20px, 5vw, 72px);
  --maxw: 1280px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:72px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--f-body);
  font-size:clamp(15.5px,1.03vw,17px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--blue); color:#fff; padding:12px 18px; font-family:var(--f-mono);
}
.skip:focus{ left:12px; top:12px; }

:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

/* ── shared type ────────────────────────────────────────────── */

.eyebrow{
  font-family:var(--f-mono); font-size:11.5px; font-weight:700;
  letter-spacing:.20em; text-transform:uppercase;
  color:var(--blue-lt); margin:0 0 18px;
}
.section .eyebrow{ color:var(--blue-dk); }
.section--dark .eyebrow,
.section--shop .eyebrow,
.hero .eyebrow{ color:var(--blue-lt); }
.eyebrow .dot{ opacity:.45; padding:0 .35em; }

.sechead{ max-width:62ch; margin-bottom:clamp(34px,4.5vw,62px); }
.sechead__h2,
.product__h2{
  font-family:var(--f-disp); font-weight:600;
  font-size:clamp(30px,4.1vw,54px); line-height:1.02;
  letter-spacing:-.012em; margin:0 0 20px; text-wrap:balance;
}
.sechead__lede{ margin:0; color:var(--text-mid); font-size:1.06em; max-width:56ch; }
.section--dark .sechead__lede,
.section--shop .shop__lede{ color:rgba(233,236,234,.68); }

.rule{ height:3px; width:120px; background:var(--blue); margin:26px 0 26px; }

/* ── buttons ────────────────────────────────────────────────── */

.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-mono); font-size:12.5px; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; text-decoration:none;
  padding:15px 24px; border:1px solid transparent; border-radius:0;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
  cursor:pointer;
}
.btn--blue{ background:var(--blue); color:#fff; }
.btn--blue:hover{ background:#0F63D2; transform:translateY(-1px); }
.btn--ghost{ background:transparent; color:inherit; border-color:currentColor; opacity:.85; }
.btn--ghost:hover{ opacity:1; background:rgba(255,255,255,.07); }

/* ── masthead ───────────────────────────────────────────────── */

.masthead{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:clamp(14px,2.4vw,34px);
  padding:10px var(--gut);
  background:rgba(7,10,13,.90);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line-d);
  color:var(--paper);
}
.masthead__mark{ flex:none; display:block; }
.masthead__mark img{ height:34px; width:auto; }
.masthead__nav{ display:flex; gap:clamp(10px,1.6vw,22px); margin-left:auto; }
.masthead__nav a{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.09em;
  text-transform:uppercase; text-decoration:none; color:rgba(233,236,234,.66);
  padding:6px 0; border-bottom:1px solid transparent; white-space:nowrap;
  transition:color .16s var(--ease), border-color .16s var(--ease);
}
.masthead__nav a:hover{ color:#fff; border-bottom-color:var(--blue); }
.masthead__cta{ flex:none; padding:11px 18px; }

@media (max-width:1080px){
  .masthead__nav{ display:none; }
  .masthead__cta{ margin-left:auto; }
}

/* ── hero ───────────────────────────────────────────────────── */

.hero{
  position:relative; background:var(--ink); color:var(--paper);
  display:grid; grid-template-columns:1.06fr .94fr; align-items:center;
  gap:clamp(24px,4vw,64px);
  padding:clamp(56px,7vw,104px) var(--gut) clamp(48px,6vw,88px);
  min-height:min(88vh,880px);
  overflow:hidden;
}
/* the drilled-plate ground: holes on 60° stagger */
.hero__plate{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 6px 6px, rgba(120,160,200,.16) 2.4px, transparent 2.9px),
    radial-gradient(circle at 18px 18px, rgba(120,160,200,.16) 2.4px, transparent 2.9px);
  background-size:24px 24px;
  mask-image:radial-gradient(120% 90% at 12% 40%, #000 12%, transparent 72%);
  -webkit-mask-image:radial-gradient(120% 90% at 12% 40%, #000 12%, transparent 72%);
  opacity:.85;
}
.hero__text{ position:relative; z-index:2; max-width:44ch; }
.hero .eyebrow{ white-space:nowrap; }
.hero__h1{
  font-family:var(--f-disp); font-weight:600;
  font-size:clamp(38px,5.1vw,74px); line-height:.98;
  letter-spacing:-.018em; margin:0; text-transform:none;
}
.hero__h1 span{ display:block; white-space:nowrap; }
@media (max-width:520px){ .hero__h1 span{ white-space:normal; } }
.hero__h1 em{ font-style:normal; color:var(--blue-lt); }
.hero__sub{ color:rgba(233,236,234,.72); max-width:48ch; margin:0 0 30px; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; }

.hero__figure{ position:relative; z-index:2; margin:0; }
.hero__figure img{
  width:100%; object-fit:cover;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
  filter:contrast(1.06) saturate(.94);
}
.hero__figure::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:4px; background:var(--blue);
}

@media (max-width:900px){
  .hero{ grid-template-columns:1fr; padding-top:clamp(40px,9vw,64px); min-height:0; }
  .hero__figure{ order:-1; }
  .hero__text{ max-width:none; }
}

/* hero entrance */
.js-rise{ opacity:0; transform:translateY(16px); }
.is-ready .js-rise{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.is-ready .hero__h1 span:nth-child(1){ transition-delay:.06s; }
.is-ready .hero__h1 span:nth-child(2){ transition-delay:.14s; }
.is-ready .hero__h1 span:nth-child(3){ transition-delay:.22s; }
.is-ready .hero__sub{ transition-delay:.34s; }
.is-ready .hero__actions{ transition-delay:.42s; }
.rule--draw{ width:0; }
.is-ready .rule--draw{ width:120px; transition:width .8s var(--ease) .28s; }

/* ── title block (the structural signature) ─────────────────── */

.titleblock{
  display:grid; grid-template-columns:auto 1fr; gap:0;
  font-family:var(--f-mono); font-size:11.5px; line-height:1.5;
  border:1px solid var(--line-l); margin:30px 0 0; max-width:430px;
}
.titleblock__k{
  padding:8px 10px; text-transform:uppercase; letter-spacing:.10em;
  color:var(--text-mid); border-right:1px solid var(--line-l);
  border-bottom:1px solid var(--line-l); background:rgba(13,19,23,.035);
}
.titleblock__v{ padding:8px 12px; border-bottom:1px solid var(--line-l); font-weight:700; }
.titleblock__k:nth-last-child(2), .titleblock__v:last-child{ border-bottom:0; }

.titleblock--float{
  position:absolute; right:0; bottom:-1px; margin:0; max-width:270px;
  background:var(--ink); border-color:var(--line-d); color:var(--paper);
}
.titleblock--float .titleblock__k{
  color:rgba(233,236,234,.55); border-color:var(--line-d); background:rgba(255,255,255,.04);
}
.titleblock--float .titleblock__v{ border-color:var(--line-d); }
@media (max-width:560px){ .titleblock--float{ display:none; } }

/* ── generic sections ───────────────────────────────────────── */

.section{ padding:clamp(64px,8.5vw,132px) 0; position:relative; }
.section--tint{ background:var(--paper-2); }
.section--dark{ background:var(--steel); color:var(--paper); }
.section--dark .titleblock{ border-color:var(--line-d); }

/* hairline of holes between light sections */
.section + .section:not(.section--dark):not(.section--shop)::before{
  content:""; position:absolute; top:0; left:var(--gut); right:var(--gut); height:1px;
  background-image:radial-gradient(circle, rgba(13,19,23,.42) 1px, transparent 1.4px);
  background-size:9px 9px;
}

/* ── open-area signature ────────────────────────────────────── */

.oa{
  display:grid; grid-template-columns:1.5fr 1fr;
  gap:clamp(22px,3vw,48px); align-items:start;
}
.oa__stage{
  position:relative; background:var(--ink);
  border:1px solid var(--line-d); overflow:hidden;
}
#oa-canvas{ display:block; width:100%; height:auto; }
.oa__badge{
  position:absolute; left:0; bottom:0;
  background:var(--blue); color:#fff; padding:14px 20px 12px;
  display:flex; align-items:baseline; gap:2px; font-family:var(--f-disp);
}
.oa__badge-num{ font-size:44px; font-weight:600; line-height:.88; letter-spacing:-.02em; }
.oa__badge-pct{ font-size:22px; font-weight:500; }
.oa__badge-lbl{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  margin-left:10px; align-self:flex-end; opacity:.9;
}

.oa__panel{ padding-top:4px; }
.oa__label{
  display:block; font-family:var(--f-mono); font-size:11px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(233,236,234,.6); margin-bottom:14px;
}
.oa__range{
  -webkit-appearance:none; appearance:none; width:100%; height:34px;
  background:transparent; cursor:ew-resize; margin:0;
}
.oa__range::-webkit-slider-runnable-track{
  height:2px; background:rgba(233,236,234,.28);
}
.oa__range::-moz-range-track{ height:2px; background:rgba(233,236,234,.28); }
.oa__range::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:30px; margin-top:-14px;
  background:var(--blue); border:0; border-radius:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.25);
}
.oa__range::-moz-range-thumb{
  width:16px; height:30px; background:var(--blue); border:0; border-radius:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.25);
}
.oa__ticks{
  display:flex; justify-content:space-between;
  font-family:var(--f-mono); font-size:11px; color:rgba(233,236,234,.45);
  margin:2px 0 26px;
}

.readout{ margin:0 0 22px; border-top:1px solid var(--line-d); }
.readout__row{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:9px 0; border-bottom:1px solid var(--line-d);
}
.readout dt{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:rgba(233,236,234,.55);
}
.readout dd{
  margin:0; font-family:var(--f-mono); font-size:14px; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.oa__note{ font-size:.86em; color:rgba(233,236,234,.55); margin:0; }

@media (max-width:860px){ .oa{ grid-template-columns:1fr; } }

/* ── spec strip ─────────────────────────────────────────────── */

.specstrip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  margin:clamp(34px,4vw,58px) 0 0; border:1px solid var(--line-d);
}
.section:not(.section--dark) .specstrip{ border-color:var(--line-l); }
.specstrip > div{ padding:16px 20px; border-right:1px solid var(--line-d); }
.section:not(.section--dark) .specstrip > div{ border-right-color:var(--line-l); }
.specstrip > div:last-child{ border-right:0; }
.specstrip dt{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; opacity:.55; margin-bottom:6px;
}
.specstrip dd{ margin:0; font-family:var(--f-disp); font-size:clamp(15px,1.35vw,19px); font-weight:500; }
@media (max-width:760px){
  .specstrip{ grid-template-columns:repeat(2,1fr); }
  .specstrip > div{ border-bottom:1px solid var(--line-d); }
  .specstrip > div:nth-child(2n){ border-right:0; }
}

/* ── capability index ───────────────────────────────────────── */

.index{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-l); }
.index__row{
  display:grid; grid-template-columns:minmax(230px,.42fr) 1fr;
  gap:clamp(12px,3vw,48px); align-items:baseline;
  padding:18px 4px; border-bottom:1px solid var(--line-l);
  transition:background .2s var(--ease), padding-left .2s var(--ease);
}
.index__row:hover{ background:rgba(24,114,234,.055); padding-left:14px; }
.index__name{
  font-family:var(--f-disp); font-weight:500; font-size:clamp(18px,1.9vw,25px);
  line-height:1.16; letter-spacing:-.005em;
}
.index__note{ color:var(--text-mid); font-size:.94em; }
@media (max-width:700px){ .index__row{ grid-template-columns:1fr; gap:4px; } }

/* ── product blocks ─────────────────────────────────────────── */

.product__grid{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(28px,4.5vw,72px); align-items:center;
}
.product__grid--rev .product__copy{ order:2; }
.product__copy p{ color:var(--text-mid); max-width:46ch; }
.section--dark .product__copy p{ color:rgba(233,236,234,.7); }

.product__plates{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.plate{ margin:0; overflow:hidden; background:var(--ink); }
.plate--tall{ grid-column:1 / -1; }
.plate img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease), filter .6s var(--ease);
  filter:contrast(1.04);
}
.plate:hover img{ transform:scale(1.035); filter:contrast(1.1); }
.plate--tall img{ aspect-ratio:16/9; }
.product__plates .plate:not(.plate--tall) img{ aspect-ratio:4/5; }

@media (max-width:880px){
  .product__grid{ grid-template-columns:1fr; }
  .product__grid--rev .product__copy{ order:0; }
}

/* ── vane comparison ────────────────────────────────────────── */

.compare{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2.4vw,32px); }
.compare__item{ margin:0; }
.compare__imgwrap{ position:relative; overflow:hidden; background:#000; }
.compare__imgwrap img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.compare__item figcaption{
  display:flex; align-items:center; gap:12px; margin-top:14px;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.06em;
  color:rgba(233,236,234,.6);
}
.tag{
  font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:10.5px;
  padding:5px 9px; color:#fff;
}
.tag--bad{ background:var(--oxide); }
.tag--good{ background:var(--blue); }

.pin{
  position:absolute; left:var(--x); top:var(--y);
  transform:translate(-50%,-50%);
  background:none; border:0; padding:0; cursor:help; z-index:3;
}
.pin__dot{
  display:block; width:16px; height:16px; border-radius:50%;
  background:var(--oxide); box-shadow:0 0 0 0 rgba(194,98,47,.55);
  animation:ping 2.6s var(--ease) infinite;
}
@keyframes ping{
  0%   { box-shadow:0 0 0 0 rgba(194,98,47,.5); }
  70%  { box-shadow:0 0 0 16px rgba(194,98,47,0); }
  100% { box-shadow:0 0 0 0 rgba(194,98,47,0); }
}
.pin__body{
  position:absolute; left:50%; bottom:calc(100% + 12px); transform:translateX(-50%) translateY(6px);
  width:min(250px,52vw); background:var(--ink); color:var(--paper);
  border:1px solid var(--oxide); padding:12px 14px;
  font-family:var(--f-body); font-size:12.5px; line-height:1.5; text-align:left;
  opacity:0; pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.pin:hover .pin__body,
.pin:focus-visible .pin__body{ opacity:1; transform:translateX(-50%) translateY(0); }

/* markers near the top edge open downward instead */
.pin--below .pin__body{
  bottom:auto; top:calc(100% + 12px); transform:translateX(-50%) translateY(-6px);
}
.pin--below:hover .pin__body,
.pin--below:focus-visible .pin__body{ transform:translateX(-50%) translateY(0); }

@media (max-width:720px){
  .compare{ grid-template-columns:1fr; }
  .pin__body{ width:min(220px,70vw); }
}

/* ── assemblies mosaic ──────────────────────────────────────── */

.mosaic{
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(150px,17vw,230px); gap:12px;
}
.mosaic__cell{ position:relative; margin:0; overflow:hidden; background:var(--ink); }
.mosaic__cell--wide{ grid-row:span 2; }
.mosaic__cell img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease);
}
.mosaic__cell:hover img{ transform:scale(1.04); }
.mosaic__cell figcaption{
  position:absolute; left:0; bottom:0; right:0;
  padding:26px 14px 11px; color:#fff;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  background:linear-gradient(to top, rgba(7,10,13,.88), transparent);
}
.mosaic__cell:nth-child(3),
.mosaic__cell:nth-child(5){ grid-column:span 2; }
@media (max-width:820px){
  .mosaic{ grid-template-columns:repeat(2,1fr); }
  .mosaic__cell:nth-child(3),
  .mosaic__cell:nth-child(5){ grid-column:span 1; }
}

.chips{
  list-style:none; display:flex; flex-wrap:wrap; gap:8px;
  margin:26px 0 0; padding:0;
}
.chips li{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em;
  padding:8px 13px; border:1px solid var(--line-l); color:var(--text-mid);
}
.chips__more{ border-style:dashed; color:var(--blue-dk); }

/* ── housings ───────────────────────────────────────────────── */

.housings{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center; }
.housings__figs .plate{ background:#fff; }
.housings__figs .plate img{ aspect-ratio:auto; }

.spectable{ width:100%; border-collapse:collapse; font-size:.94em; }
.spectable th, .spectable td{ padding:13px 14px; text-align:left; border-bottom:1px solid var(--line-l); }
.spectable thead th{
  font-family:var(--f-disp); font-weight:600; font-size:clamp(16px,1.5vw,21px);
  line-height:1.1; border-bottom:2px solid var(--text); vertical-align:bottom;
}
.spectable__sub{
  display:block; font-family:var(--f-mono); font-size:10.5px; font-weight:400;
  letter-spacing:.13em; text-transform:uppercase; color:var(--text-mid); margin-top:5px;
}
.spectable tbody th{
  font-family:var(--f-mono); font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-mid); width:1%; white-space:nowrap;
}
.spectable tbody td{ font-family:var(--f-body); font-weight:500; }
.spectable tbody tr:hover{ background:rgba(24,114,234,.05); }

.housings__kit{
  margin:clamp(28px,3.5vw,44px) 0 0; padding:20px 24px;
  border-left:3px solid var(--blue); background:rgba(24,114,234,.06);
  max-width:70ch;
}
@media (max-width:880px){ .housings{ grid-template-columns:1fr; } }

/* ── shop ───────────────────────────────────────────────────── */

.section--shop{
  position:relative; background:var(--ink); color:var(--paper); overflow:hidden;
  padding-block:clamp(90px,11vw,180px);
}
.shop__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.34; filter:grayscale(.35) contrast(1.1);
}
.shop__inner{ position:relative; z-index:2; }
.shop__h2{
  font-family:var(--f-disp); font-weight:600; font-size:clamp(38px,6.4vw,88px);
  line-height:.95; letter-spacing:-.02em; margin:0 0 22px;
}
.shop__lede{ max-width:52ch; margin:0 0 clamp(34px,4vw,56px); }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:0; border-top:1px solid var(--line-d); }
.stats__item{ padding:22px 20px 4px 0; border-right:1px solid var(--line-d); }
.stats__item:last-child{ border-right:0; }
.stats dt{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(233,236,234,.55); margin-bottom:8px;
}
.stats dd{
  margin:0; font-family:var(--f-disp); font-size:clamp(32px,4.4vw,56px);
  font-weight:600; line-height:1; letter-spacing:-.02em;
}
.stats dd span{
  display:block; font-family:var(--f-mono); font-size:11px; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(233,236,234,.55);
  margin-top:9px;
}
@media (max-width:760px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stats__item{ border-bottom:1px solid var(--line-d); }
  .stats__item:nth-child(2n){ border-right:0; }
}

/* ── quote ──────────────────────────────────────────────────── */

.quote__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); align-items:start; }

.checklist{ list-style:none; margin:28px 0 34px; padding:0; }
.checklist li{
  position:relative; padding:9px 0 9px 30px; border-bottom:1px solid var(--line-d);
  font-size:.95em; color:rgba(233,236,234,.78);
}
.checklist li::before{
  content:""; position:absolute; left:4px; top:17px;
  width:9px; height:9px; border-radius:50%; background:var(--blue);
}

.contactcard{ font-style:normal; border:1px solid var(--line-d); }
.contactcard__row{
  display:flex; gap:20px; align-items:baseline; padding:14px 18px;
  border-bottom:1px solid var(--line-d); text-decoration:none;
  transition:background .16s var(--ease);
}
.contactcard__row:last-child{ border-bottom:0; }
a.contactcard__row:hover{ background:rgba(24,114,234,.14); }
.contactcard__row > span:first-child{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(233,236,234,.5); width:56px; flex:none;
}
.contactcard__row strong{ font-family:var(--f-disp); font-weight:500; font-size:19px; line-height:1.3; }

.rfq{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  background:var(--steel-2); border:1px solid var(--line-d); padding:clamp(22px,3vw,38px);
}
.rfq__field{ display:flex; flex-direction:column; gap:7px; }
.rfq__field--full{ grid-column:1 / -1; }
.rfq label{
  font-family:var(--f-mono); font-size:10.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(233,236,234,.6);
}
.rfq input, .rfq select, .rfq textarea{
  font-family:var(--f-body); font-size:15px; color:var(--paper);
  background:rgba(7,10,13,.55); border:1px solid var(--line-d); border-radius:0;
  padding:12px 13px; width:100%;
  transition:border-color .16s var(--ease), background .16s var(--ease);
}
.rfq textarea{ resize:vertical; }
.rfq input:focus, .rfq select:focus, .rfq textarea:focus{
  outline:none; border-color:var(--blue); background:rgba(7,10,13,.8);
}
.rfq input::placeholder, .rfq textarea::placeholder{ color:rgba(233,236,234,.35); }
.rfq select option{ background:var(--steel-2); color:var(--paper); }
.rfq__submit{ grid-column:1 / -1; justify-content:center; }
.rfq__note{ grid-column:1 / -1; margin:0; font-size:.82em; color:rgba(233,236,234,.5); }
.rfq__note.is-error{ color:#FF9E7A; }

@media (max-width:880px){ .quote__grid{ grid-template-columns:1fr; } }
@media (max-width:520px){ .rfq{ grid-template-columns:1fr; } }

/* ── footer ─────────────────────────────────────────────────── */

.footer{ background:var(--ink); color:var(--paper); padding-top:clamp(48px,6vw,80px); }
.footer__inner{ display:grid; grid-template-columns:auto 1fr; gap:clamp(28px,5vw,72px); align-items:start; }
.footer__mark{ width:88px; height:auto; opacity:.9; }
.footer__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,42px); }
.footer__cols h3{
  font-family:var(--f-mono); font-size:10.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue-lt); margin:0 0 14px;
}
.footer__cols p{ margin:0 0 12px; font-size:.92em; color:rgba(233,236,234,.68); line-height:1.85; }
.footer__cols a{ text-decoration:none; border-bottom:1px solid transparent; }
.footer__cols a:hover{ color:#fff; border-bottom-color:var(--blue); }
.footer__tag{ font-family:var(--f-disp); font-size:20px; line-height:1.3; color:var(--paper) !important; }
.footer__legal{
  margin:clamp(40px,5vw,64px) 0 0; padding:18px var(--gut);
  border-top:1px solid var(--line-d);
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.05em;
  color:rgba(233,236,234,.4);
}
@media (max-width:820px){
  .footer__inner{ grid-template-columns:1fr; }
  .footer__cols{ grid-template-columns:1fr 1fr; }
}

/* ── scroll reveal ──────────────────────────────────────────── */

.reveal{ opacity:0; transform:translateY(22px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js-rise, .reveal{ opacity:1 !important; transform:none !important; }
  .rule--draw{ width:120px; }
}