/* =============================================================================
   Illinois Mechanical Solutions — design system
   -----------------------------------------------------------------------------
   NEW FILE (visual rebuild). No content decisions live here; all copy is in the
   HTML and is verbatim from the original site (see build/CONTENT-VERBATIM.md).

   World: a steam and hydronic central plant. Cold steel and steam-white, with
   the logo's exact red (#FF0000) reserved as a *signal* colour only — it is the
   hot end of a heat scale that runs blue (chilled water) -> amber (combustion)
   -> red (the mark itself). Nothing here recolours or redraws the logo.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* Steel / ink — the plant at rest */
  --ink:        #07090C;
  --plant:      #0E1318;
  --steel-900:  #141B22;
  --steel-800:  #1B242D;
  --steel-700:  #29333D;
  --steel-600:  #3A4653;
  --steel-500:  #566472;
  --steel-400:  #7A8896;
  --steel-300:  #9DAAB6;
  --steel-200:  #C6CFD8;
  --steam:      #E9EEF2;
  --paper:      #F5F7F9;
  --paper-2:    #ECF0F3;

  /* Heat scale */
  --chill:      #46A6C8;   /* chilled water */
  --chill-deep: #1F6B86;
  --flame:      #FF8A1F;   /* combustion amber */
  --ember:      #C4160B;   /* deep red field */
  --red:        #FF0000;   /* EXACT logo red — signal only, never large fields */

  /* Hairlines — the blueprint grid */
  --rule:       rgba(157,170,182,.20);
  --rule-soft:  rgba(157,170,182,.11);
  --rule-dark:  rgba(7,9,12,.14);
  --rule-dark-soft: rgba(7,9,12,.08);

  /* Type */
  --display: "Archivo", "Archivo Expanded", "Helvetica Neue", Arial, sans-serif;
  --body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Rhythm */
  --gut: clamp(20px, 4.2vw, 60px);
  --maxw: 1360px;
  --ease: cubic-bezier(.22,.61,.28,1);
  --ease-heavy: cubic-bezier(.16,.84,.24,1);
}

/* Wide, engineered display face. The width axis is what gives the wordmark its
   poster weight — without it Archivo reads as a generic grotesque. */
.display, h1, h2, h3, .h-display{
  font-family: var(--display);
  font-variation-settings: "wdth" 118, "wght" 700;
  font-weight: 700;
  letter-spacing: -.018em;
  line-height: .96;
  text-wrap: balance;
}

/* ---------- 2. Reset ----------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html,body{ margin:0; padding:0; }
body{
  background: var(--ink);
  color: var(--steam);
  font-family: var(--body);
  font-size: clamp(15.5px, 1.02vw, 17.5px);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background: var(--red); color:#fff; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* Keyboard users get a real, visible skip link */
.skip{
  position:fixed; top:-100px; left:16px; z-index:200;
  background:var(--red); color:#fff; padding:12px 18px;
  font:600 13px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  transition: top .18s var(--ease);
}
.skip:focus{ top:16px; }
:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

/* ---------- 3. Shared type -------------------------------------------- */
/* Mono kicker: the plant-equipment tag. Used to label every section so the
   page reads like a spec sheet and visitors always know where they are. */
.kicker{
  font: 500 clamp(10.5px, .78vw, 12px)/1 var(--mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--steel-400);
  display:flex; align-items:center; gap:.85em;
}
.kicker::before{
  content:""; width:clamp(18px,2.4vw,34px); height:1px;
  background: var(--red); flex:none;
}
.kicker .num{ color: var(--red); }

h1{ font-size: clamp(2.6rem, 8.4vw, 8.2rem); }
h2{ font-size: clamp(2rem, 4.6vw, 4.35rem); }
h3{ font-size: clamp(1.3rem, 1.9vw, 1.9rem); font-variation-settings:"wdth" 108,"wght" 700; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

.lede{ font-size: clamp(1.06rem, 1.42vw, 1.4rem); line-height:1.52; color:var(--steel-200); }
.tagline{
  font-family: var(--body); font-style: italic; font-weight:400;
  letter-spacing:.01em; color: var(--steel-200);
}

/* ---------- 4. Header --------------------------------------------------- */
.hdr{
  position: fixed; inset: 0 0 auto 0; z-index:120;
  display:flex; align-items:center; gap:clamp(14px,2vw,34px);
  padding: clamp(12px,1.5vw,20px) var(--gut);
  color: var(--steam);
  transition: background .4s var(--ease), border-color .4s var(--ease), color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
/* Over film, the header floats on a gradient scrim; once we reach content it
   becomes a solid bar. .on-light flips it for bright frames (engine.md). */
.hdr::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: linear-gradient(to bottom, rgba(7,9,12,.80), rgba(7,9,12,0));
  transition: opacity .4s var(--ease);
}
.hdr.solid{ background: rgba(10,13,17,.90); backdrop-filter: blur(14px) saturate(1.3); border-bottom-color: var(--rule-soft); }
.hdr.solid::before{ opacity:0; }
.hdr.on-light{ color: var(--ink); }
.hdr.on-light::before{ background: linear-gradient(to bottom, rgba(240,244,247,.86), rgba(240,244,247,0)); }
.hdr.on-light.solid{ background: rgba(245,247,249,.92); border-bottom-color: var(--rule-dark-soft); }

/* Logo lockup. The GIF is the original asset, untouched. */
.lockup{ display:flex; align-items:center; gap:clamp(10px,1vw,16px); flex:none; }
.lockup img{ width:auto; height:clamp(30px,3.1vw,40px); image-rendering:auto; }
.lockup .words{ display:none; }
@media (min-width:900px){
  .lockup .words{ display:block; border-left:1px solid currentColor; padding-left:14px; opacity:.72; }
  .lockup .words b{
    display:block; font:600 12.5px/1.25 var(--mono);
    letter-spacing:.13em; text-transform:uppercase;
  }
  .lockup .words span{ display:block; font:400 10.5px/1.4 var(--mono); letter-spacing:.1em; opacity:.7; }
}

.nav{ margin-left:auto; display:none; align-items:center; gap:clamp(4px,1.4vw,14px); }
@media (min-width:1000px){ .nav{ display:flex; } }
.nav > li{ position:relative; }
.nav a, .nav .navbtn{
  display:flex; align-items:center; gap:7px;
  padding:11px 13px;
  font:500 12.5px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase;
  color:currentColor; opacity:.82;
  transition: opacity .2s var(--ease);
}
.nav a:hover, .nav .navbtn:hover, .nav a:focus-visible{ opacity:1; }
/* Active page marker — a red tick under the current section */
.nav a[aria-current="page"]{ opacity:1; }
.nav a[aria-current="page"]::after{
  content:""; position:absolute; left:13px; right:13px; bottom:4px;
  height:2px; background:var(--red);
}
.nav .caret{ width:7px; height:7px; border-right:1.5px solid; border-bottom:1.5px solid; transform:rotate(45deg) translateY(-2px); opacity:.6; }

/* Products dropdown */
.drop{
  position:absolute; top:calc(100% + 6px); left:0; min-width:274px;
  background: rgba(12,16,21,.97); backdrop-filter: blur(16px);
  border:1px solid var(--rule-soft);
  padding:7px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.85);
}
.nav li:hover > .drop, .nav li:focus-within > .drop{ opacity:1; visibility:visible; transform:none; }
.drop a{
  color: var(--steam); opacity:.78; padding:11px 13px;
  letter-spacing:.09em; justify-content:space-between;
}
.drop a:hover{ opacity:1; background: rgba(255,255,255,.05); }
.drop a::after{ content:"→"; opacity:0; transform:translateX(-5px); transition:.2s var(--ease); font-family:var(--body); }
.drop a:hover::after{ opacity:.7; transform:none; }
.drop a[aria-current="page"]::after{ content:"→"; opacity:.7; }


/* Burger + mobile drawer */
.burger{ margin-left:auto; display:grid; gap:5px; padding:10px; }
@media (min-width:1000px){ .burger{ display:none; } }
.burger i{ display:block; width:24px; height:1.5px; background:currentColor; transition:transform .3s var(--ease), opacity .2s; }
body.menu-open .burger i:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
body.menu-open .burger i:nth-child(2){ opacity:0; }
body.menu-open .burger i:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:110; background:var(--plant);
  padding: clamp(84px,13vh,120px) var(--gut) var(--gut);
  display:flex; flex-direction:column; gap:6px; overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-2%);
  transition: opacity .34s var(--ease), transform .34s var(--ease), visibility .34s;
}
body.menu-open .drawer{ opacity:1; visibility:visible; transform:none; }
.drawer a{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:clamp(13px,2vh,20px) 0; border-bottom:1px solid var(--rule-soft);
  font-family:var(--display); font-variation-settings:"wdth" 112,"wght" 700;
  font-size:clamp(1.5rem,7vw,2.4rem); letter-spacing:-.02em; line-height:1;
}
.drawer a small{ font:500 11px/1 var(--mono); letter-spacing:.16em; color:var(--steel-500); }
.drawer .sub a{ font-size:clamp(1rem,4.2vw,1.25rem); padding-left:clamp(16px,5vw,30px); color:var(--steel-300); }
.drawer .dcontact{ margin-top:auto; padding-top:26px; }

/* ---------- 5. Buttons -------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:11px;
  padding:15px 26px; border:1px solid currentColor;
  font:600 12px/1 var(--mono); letter-spacing:.15em; text-transform:uppercase;
  position:relative; overflow:hidden; isolation:isolate;
  transition: color .28s var(--ease), border-color .28s var(--ease);
}
/* wipe-fill on hover — mechanical, not bouncy */
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--red);
  transform:scaleX(0); transform-origin:left; transition:transform .38s var(--ease-heavy);
}
.btn:hover{ color:#fff; border-color:var(--red); }
.btn:hover::before{ transform:scaleX(1); }
.btn--fill{ background:var(--red); border-color:var(--red); color:#fff; }
.btn--fill::before{ background:#d90000; }
.btn .arw{ transition:transform .3s var(--ease); font-family:var(--body); }
.btn:hover .arw{ transform:translateX(4px); }

/* ---------- 6. Sections ------------------------------------------------- */
.sec{ position:relative; padding: clamp(64px, 9.5vh, 130px) 0; }
.sec--dark{ background:var(--plant); color:var(--steam); }
.sec--ink{ background:var(--ink); color:var(--steam); }
.sec--light{ background:var(--paper); color:var(--ink); }
.sec--light .kicker{ color:var(--steel-500); }
.sec--light .lede{ color:var(--steel-600); }

/* Blueprint grid — a faint engineering substrate, not a decoration people
   consciously notice. Sits behind content, never over it. */
.grid-bg{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.grid-bg::before{
  content:""; position:absolute; inset:-1px;
  background-image:
    linear-gradient(to right, var(--rule-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule-soft) 1px, transparent 1px);
  background-size: clamp(48px,6vw,92px) clamp(48px,6vw,92px);
  mask-image: radial-gradient(120% 62% at 50% 0%, #000 4%, transparent 82%);
}
.sec--light .grid-bg::before{
  background-image:
    linear-gradient(to right, var(--rule-dark-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule-dark-soft) 1px, transparent 1px);
}

.sec-head{ display:grid; gap:clamp(18px,2.4vw,30px); margin-bottom:clamp(34px,5vw,66px); }
@media (min-width:1000px){
  .sec-head{ grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); align-items:end; column-gap:clamp(30px,5vw,90px); }
  .sec-head .side{ padding-bottom:.4em; }
}
.sec-head h2{ margin:.42em 0 0; }

/* Scroll reveal — small, heavy, once. Nothing springs.
   The hidden state is scoped to html.js (set by an inline <head> script) so that
   without JavaScript the content is simply visible rather than stuck at
   opacity:0. Never make content depend on script to be readable. */
.rv{ opacity:1; transform:none; }
.js .rv{ opacity:0; transform:translateY(22px); transition: opacity .85s var(--ease-heavy), transform .85s var(--ease-heavy); }
.js .rv.in{ opacity:1; transform:none; }
.rv-2{ transition-delay:.09s; } .rv-3{ transition-delay:.18s; } .rv-4{ transition-delay:.27s; }

/* ---------- 7. Prose (the verbatim paragraph blocks) -------------------- */
.prose{ max-width:74ch; }
.prose p{ margin-bottom:1.5em; }
.prose--cols{ max-width:none; }
@media (min-width:1080px){
  .prose--cols{ columns:2; column-gap:clamp(38px,5vw,84px); }
  .prose--cols p{ break-inside:avoid; }
}
/* First paragraph gets a hairline rule + drop-weight opening for editorial lift */
.prose--lead > p:first-child{
  font-size: clamp(1.04rem,1.3vw,1.28rem); line-height:1.55; color:var(--steel-200);
}
.sec--light .prose--lead > p:first-child{ color:var(--steel-700); }

/* ---------- 8. Markets chips ------------------------------------------- */
/* The industries named in the (verbatim) body paragraph, surfaced as scannable
   chips. The full paragraph is still printed in the prose block above — this is
   emphasis, never a substitute. */
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 16px; border:1px solid var(--rule);
  font:500 11.5px/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--steel-200); background:rgba(255,255,255,.02);
  transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.chip::before{ content:""; width:4px; height:4px; background:var(--red); flex:none; }
.chip:hover{ border-color:var(--steel-500); color:#fff; background:rgba(255,255,255,.05); }

/* ---------- 9. Category cards ----------------------------------------- */
.cards{ display:grid; gap:1px; background:var(--rule-soft); border:1px solid var(--rule-soft); }
@media (min-width:660px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .cards{ grid-template-columns:repeat(3,1fr); } }
.card{
  position:relative; display:flex; flex-direction:column; gap:14px;
  padding:clamp(24px,2.6vw,38px); min-height:clamp(190px,20vw,250px);
  background:var(--plant); overflow:hidden;
  transition: background .3s var(--ease);
}
.sec--light .card{ background:var(--paper); }
.card .idx{ font:500 11.5px/1 var(--mono); letter-spacing:.16em; color:var(--red); }
.card h3{ margin:0; }
.card .foot{ margin-top:auto; display:flex; align-items:center; gap:9px;
  font:600 11px/1 var(--mono); letter-spacing:.15em; text-transform:uppercase; color:var(--steel-400); }
.card .foot .arw{ transition:transform .3s var(--ease); font-family:var(--body); }
a.card:hover{ background:var(--steel-900); }
.sec--light a.card:hover{ background:#fff; }
a.card:hover .foot{ color:var(--red); }
a.card:hover .foot .arw{ transform:translateX(5px); }
/* Heat bar wipes across the top edge on hover */
a.card::after{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(to right, var(--chill), var(--flame), var(--red));
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease-heavy);
}
a.card:hover::after{ transform:scaleX(1); }

/* Categories with no detail page on the original site (/boilers, /burners,
   /mission-critical all 404). They stay clickable — opening a product inquiry —
   but read as a secondary action so the hierarchy is honest about which
   categories have published specifications. */
.card--ask .foot{ color:var(--steel-500); }
.card--ask::after{ background:linear-gradient(to right, var(--steel-500), var(--steel-400)); }
.card--ask:hover .foot{ color:var(--ink); }
.sec--dark .card--ask:hover .foot, .sec--ink .card--ask:hover .foot{ color:var(--steam); }

/* ---------- 10. Brand wall -------------------------------------------- */
.brandwall{ display:grid; gap:1px; background:var(--rule-soft); border:1px solid var(--rule-soft); }
@media (min-width:520px){ .brandwall{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:820px){ .brandwall{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1160px){ .brandwall{ grid-template-columns:repeat(4,1fr); } }
.brand{
  position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:18px;
  padding:clamp(20px,2.2vw,30px); min-height:clamp(150px,15vw,186px);
  background:var(--paper); transition:background .28s var(--ease);
}
.brand .logo{ flex:1; display:flex; align-items:center; }
/* Real supplier logos, unmodified, on the white field they were made for */
.brand .logo img{ max-height:clamp(46px,5vw,64px); width:auto; object-fit:contain; }
.brand .meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.brand .name{ font:600 11.5px/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--steel-600); }
.brand .go{ font:400 15px/1 var(--body); color:var(--steel-400); opacity:0; transform:translateX(-5px); transition:.26s var(--ease); }
a.brand:hover{ background:#fff; }
a.brand:hover .name{ color:var(--ink); }
a.brand:hover .go{ opacity:1; transform:none; color:var(--red); }
a.brand::after{
  content:""; position:absolute; inset:0; border:2px solid var(--red);
  opacity:0; transition:opacity .26s var(--ease); pointer-events:none;
}
a.brand:hover::after{ opacity:1; }
.brand .tag{ font:400 12.5px/1.45 var(--body); color:var(--steel-500); }

/* ---------- 11. Spec sheet (product detail pages) --------------------- */
/* The original crams Types/Capacity/Applications into run-on paragraphs. Same
   words, laid out as the spec table an engineer actually wants to read. */
.spec{ border-top:1px solid var(--rule-dark); }
.sec--dark .spec, .sec--ink .spec{ border-top-color:var(--rule); }
.spec-item{
  display:grid; gap:clamp(14px,2vw,26px);
  padding:clamp(26px,3.4vw,48px) 0; border-bottom:1px solid var(--rule-dark);
}
.sec--dark .spec-item, .sec--ink .spec-item{ border-bottom-color:var(--rule); }
@media (min-width:960px){
  .spec-item{ grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); column-gap:clamp(34px,5vw,90px); }
}
.spec-item .name{ display:flex; flex-direction:column; gap:12px; }
.spec-item .name .idx{ font:500 11.5px/1 var(--mono); letter-spacing:.18em; color:var(--red); }
.spec-item h3{ margin:0; }
.spec-rows{ display:grid; gap:0; align-self:start; width:100%; }
.spec-row{
  display:grid; gap:6px 26px; padding:15px 0;
  border-top:1px solid var(--rule-dark-soft);
}
.sec--dark .spec-row, .sec--ink .spec-row{ border-top-color:var(--rule-soft); }
.spec-row:first-child{ border-top:0; padding-top:0; }
@media (min-width:620px){ .spec-row{ grid-template-columns: 15.5ch minmax(0,1fr); } }
.spec-row dt{
  font:500 10.8px/1.5 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--steel-500); padding-top:.28em;
}
.spec-row dd{ margin:0; color:var(--steel-700); }
.sec--dark .spec-row dd, .sec--ink .spec-row dd{ color:var(--steel-200); }
/* Numeric capacity strings read as instrument data */
.spec-row dd.num{ font-family:var(--mono); font-size:.94em; letter-spacing:-.01em; }

/* ---------- 12. Services list ----------------------------------------- */
.svc{ display:grid; gap:clamp(40px,6vw,90px); }
@media (min-width:980px){ .svc{ grid-template-columns:repeat(2,1fr); } }
.svc-block h3{ margin:0 0 .7em; }
.svc-block .intro{ color:var(--steel-300); margin-bottom:1.6em; }
.sec--light .svc-block .intro{ color:var(--steel-600); }
.svc-list{ display:grid; gap:1px; background:var(--rule); }
.sec--light .svc-list{ background:var(--rule-dark); }
.svc-list li{
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
  padding:19px 0 19px 2px; background:var(--plant);
}
.sec--light .svc-list li{ background:var(--paper); }
.svc-list li .n{ font:500 11px/1.7 var(--mono); letter-spacing:.12em; color:var(--red); }

/* ---------- 13. Contact ----------------------------------------------- */
.contact-grid{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media (min-width:760px){ .contact-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1320px){ .contact-grid{ grid-template-columns:repeat(4,1fr); } }
.contact-cell{
  display:flex; flex-direction:column; gap:11px; justify-content:space-between;
  padding:clamp(24px,2.7vw,38px); min-height:clamp(164px,16vw,200px); background:var(--plant);
  transition:background .28s var(--ease);
}
a.contact-cell:hover{ background:var(--steel-900); }
.contact-cell .lbl{ font:500 10.8px/1.5 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--steel-500); }
.contact-cell .val{
  font-family:var(--display); font-variation-settings:"wdth" 104,"wght" 600;
  font-size:clamp(.95rem,1.12vw,1.18rem); line-height:1.25; letter-spacing:-.012em;
  /* Long address-like tokens must never split mid-word; break only if the
     viewport truly cannot fit them. */
  overflow-wrap:break-word; word-break:normal; hyphens:none;
}
a.contact-cell:hover .val{ color:var(--red); }

/* ---------- 14. Footer ------------------------------------------------ */
.ftr{ background:var(--ink); border-top:1px solid var(--rule-soft); padding:clamp(48px,7vh,86px) 0 26px; }
.ftr-top{ display:grid; gap:clamp(30px,4vw,60px); padding-bottom:clamp(34px,4.5vw,58px); border-bottom:1px solid var(--rule-soft); }
@media (min-width:900px){ .ftr-top{ grid-template-columns: minmax(0,1.25fr) repeat(2, minmax(0,.75fr)); } }
.ftr h2{ margin:0 0 18px; font:500 10.8px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--steel-500); }
.ftr-links li{ margin-bottom:11px; }
.ftr-links a{ color:var(--steel-300); transition:color .2s var(--ease); }
.ftr-links a:hover{ color:#fff; }
.ftr-bottom{
  padding-top:24px; display:flex; flex-wrap:wrap; gap:10px 24px;
  align-items:center; justify-content:space-between;
  font:400 11.5px/1.6 var(--mono); letter-spacing:.07em; color:var(--steel-500);
}

/* ---------- 15. Motion & print safety -------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .rv, .js .rv{ opacity:1 !important; transform:none !important; }
}

/* ---------- 16. Page banner (all pages except home) -------------------- */
/* Every inner page opens on a still from the same film, dimmed hard so the
   type stays legible. This is what makes the 9 pages read as one world rather
   than a film homepage bolted to a plain brochure site. */
.phero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--ink);
  padding: clamp(120px,20vh,210px) 0 clamp(46px,7vh,84px);
  display:flex; align-items:flex-end; min-height:clamp(340px,52vh,540px);
}
.phero-bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.phero-bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
/* Scrim lives on the image box, not the section, so a variant that insets or
   halves the image carries its scrim with it automatically. */
.phero-bg::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top, var(--plant) 0%, rgba(7,9,12,.86) 34%, rgba(7,9,12,.62) 70%, rgba(7,9,12,.72) 100%),
    radial-gradient(120% 100% at 18% 100%, rgba(7,9,12,.7), transparent 70%);
}
.phero-in{ position:relative; width:100%; }
.phero .kicker{ margin:0 0 clamp(14px,2vw,22px); color:var(--steel-300); }
.phero h1{
  margin:0; font-size:clamp(2.3rem,7.4vw,6.4rem);
  font-variation-settings:"wdth" 118,"wght" 700;
  text-shadow:0 6px 46px rgba(0,0,0,.6);
}
.phero .lede{ margin:clamp(18px,2.6vw,30px) 0 0; max-width:62ch; color:var(--steel-200); }

/* --- Banner variants -------------------------------------------------- */
/* Eight inner pages on one identical banner read as a template. Three variants,
   assigned by the kind of page, break the repetition while keeping one world.
   All collapse to the full-bleed default below 900px, where a split or inset
   frame has no room to read. */

/* SPLIT — frame occupies the right side, type sits on solid ink at the left.
   Used for the two narrative pages (About, Services). */
@media (min-width:900px){
  .phero--split{ min-height:clamp(400px,60vh,620px); }
  .phero--split .phero-bg{ inset:0 0 0 40%; }
  .phero--split .phero-bg::after{
    background:
      linear-gradient(to right, var(--ink) 0%, rgba(7,9,12,.88) 22%, rgba(7,9,12,.52) 46%, rgba(7,9,12,.30) 72%, rgba(7,9,12,.34) 100%),
      linear-gradient(to top, rgba(14,19,24,.72), transparent 46%);
  }
  .phero--split h1{ max-width:15ch; }
  .phero--split .lede{ max-width:36ch; }
  /* A hairline where the frame begins — reads as a film edge, not a crop */
  .phero--split::after{
    content:""; position:absolute; top:0; bottom:0; left:40%; width:1px;
    background:linear-gradient(to bottom, transparent, var(--rule), transparent);
  }
}

/* INSET — the frame sits as a plate on ink with the title overlapping it.
   Used for the three specification pages, which are siblings. */
@media (min-width:760px){
  /* Taller than the default banner so the frame reads as a plate rather than a
     letterbox strip, with room for the title to overlap its lower edge. */
  .phero--inset{ padding-top:clamp(150px,22vh,220px); min-height:clamp(480px,68vh,700px); }
  .phero--inset .phero-bg{
    inset:clamp(112px,16vh,170px) var(--gut) clamp(26px,3.4vh,44px);
    border:1px solid var(--rule-soft);
  }
  .phero--inset .phero-bg::after{
    background:
      linear-gradient(to top, rgba(7,9,12,.94) 0%, rgba(7,9,12,.84) 26%, rgba(7,9,12,.56) 58%, rgba(7,9,12,.44) 100%),
      radial-gradient(90% 110% at 12% 100%, rgba(7,9,12,.74), transparent 66%);
  }
  /* Register mark on the plate's own top-left corner — an engineering-drawing
     tick. Anchored to the frame, not to the type, so it cannot drift. */
  .phero--inset .phero-bg::before{
    content:""; position:absolute; z-index:2; left:-1px; top:-1px;
    width:clamp(20px,2.4vw,34px); height:clamp(20px,2.4vw,34px);
    border-left:2px solid var(--red); border-top:2px solid var(--red);
  }
}

/* ---------- 17. Nav pill (Contact) ------------------------------------- */
/* Contact is the primary action, so the nav's own Contact item carries the red
   rather than sitting next to a duplicate button. */
.nav a.pill{
  background:var(--red); color:#fff; opacity:1;
  padding:12px 20px; margin-left:6px;
  transition: background .22s var(--ease), transform .22s var(--ease);
}
.nav a.pill:hover{ background:#d90000; transform:translateY(-1px); }
.nav a.pill[aria-current="page"]::after{ display:none; }
.hdr.on-light .nav a.pill{ color:#fff; }