/* =================================================================
   Solution Supply — editorial / architecture-press visual system
   ================================================================= */
:root{
  --ink:#101010;
  --accent:#ff3035;
  --cream:#f5f3ef;
  --paper:#fff;
  --muted:#666;

  --hair:rgba(16,16,16,.16);
  --hair-soft:rgba(16,16,16,.09);
  --ink-70:rgba(16,16,16,.7);

  --ui:Arial,Helvetica,"Helvetica Neue",sans-serif;
  --serif:Georgia,"Times New Roman",Times,serif;

  --wrap:1280px;
  --gut:clamp(20px,4vw,56px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--ui);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
hr{border:0;border-top:1px solid var(--hair);margin:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:99;background:var(--ink);color:#fff;padding:10px 16px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Type scale ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.025em}
.display{
  font-size:clamp(3rem,8.4vw,7.6rem);
  line-height:.92;
  letter-spacing:-.04em;
}
.h1{font-size:clamp(2.4rem,5.6vw,4.6rem);line-height:.98;letter-spacing:-.035em}
.h2{font-size:clamp(1.75rem,3.2vw,2.9rem);line-height:1.03;letter-spacing:-.03em}
.h3{font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.15;letter-spacing:-.02em}
.lead{font-family:var(--serif);font-size:clamp(1.12rem,1.55vw,1.44rem);line-height:1.5;color:var(--ink-70)}
.kicker{
  font-family:var(--ui);
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  display:block;
}
.kicker .num{color:var(--accent)}
.small{font-size:.82rem;color:var(--muted)}
.mono-num{font-variant-numeric:tabular-nums}
.serif{font-family:var(--serif)}
.red{color:var(--accent)}

/* ---------- Ticker + masthead ---------- */
.ticker{background:var(--ink);color:#cfcbc4;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase}
.ticker-in{display:flex;justify-content:space-between;gap:16px;padding-block:9px;flex-wrap:wrap}
.ticker a{color:#cfcbc4;margin-left:22px}
.ticker a:first-child{margin-left:0}
.ticker a:hover{color:var(--accent);text-decoration:none}
.ticker-links{display:flex;gap:22px;flex-wrap:wrap}
.ticker-links a{margin-left:0}

.masthead{position:sticky;top:0;z-index:40;background:var(--cream);border-bottom:1px solid var(--ink)}
.masthead-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:16px}
.wordmark{display:flex;align-items:center;color:var(--ink)}
.wordmark:hover{text-decoration:none}
/* Supplied logo artwork. Only the height is set per placement; width follows the file. */
.logo{flex:none;width:auto;height:auto}
.logo-mast{height:clamp(54px,5.4vw,68px)}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav a{
  color:var(--ink);
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.nav a:hover{color:var(--accent);text-decoration:none}
.nav a[aria-current="page"]{color:var(--accent)}
.nav-login{color:var(--ink)}
.nav-login::before{content:"";display:inline-block;width:6px;height:6px;background:var(--accent);transform:rotate(45deg);margin-right:9px;vertical-align:middle}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--accent);color:#fff;
  border:1px solid var(--accent);
  font-family:var(--ui);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  padding:14px 24px;cursor:pointer;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}
.btn:hover{background:var(--ink);border-color:var(--ink);color:#fff;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:10px 16px;font-size:.7rem}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-quiet{background:transparent;color:var(--ink);border-color:var(--hair)}
.btn-quiet:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-line{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn-line:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-ink{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-ink:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.link-underline{
  font-family:var(--ui);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;
  white-space:nowrap;
}
.link-underline:hover{color:var(--ink)}
.linkish{
  background:none;border:0;padding:0;cursor:pointer;color:var(--accent);
  font-family:var(--ui);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
}
.linkish:hover{text-decoration:underline}
.arrow{display:inline-block}

/* ---------- Hero ---------- */
.hero{border-bottom:1px solid var(--ink);overflow:hidden}
.hero-in{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:0;
}
.hero-left{padding:clamp(40px,7vw,104px) clamp(24px,4vw,56px) clamp(36px,5vw,64px) var(--gut)}
.hero-right{
  border-left:1px solid var(--ink);
  padding:clamp(28px,4vw,48px) var(--gut) clamp(28px,4vw,48px) clamp(24px,3vw,40px);
  background:var(--paper);
  display:flex;flex-direction:column;justify-content:space-between;gap:32px;
}
.hero h1{margin:22px 0 0}
.hero .lead{margin:26px 0 0;max-width:44ch}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
.hero-facts{display:grid;gap:0}
.hero-fact{padding:16px 0;border-top:1px solid var(--hair)}
.hero-fact:first-child{border-top:0;padding-top:0}
.hero-fact dt{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.hero-fact dd{margin:6px 0 0;font-family:var(--serif);font-size:1.18rem;letter-spacing:-.02em}

.rule-marquee{
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  background:var(--ink);color:var(--cream);
  padding:12px 0;overflow:hidden;
}
.rule-marquee-in{
  display:flex;gap:44px;white-space:nowrap;
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  animation:slide 44s linear infinite;
  will-change:transform;
}
.rule-marquee span{display:flex;gap:44px;align-items:center}
.rule-marquee i{color:var(--accent);font-style:normal}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.rule-marquee-in{animation:none}}

/* ---------- Brand hero (home) ---------- */
.eyebrow{
  display:block;
  font-family:var(--ui);
  font-size:.68rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent);
}
.hero-brand{background:var(--cream);border-bottom:1px solid var(--ink)}
.hero-brand-in{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(28px,5vw,80px);
  align-items:end;
  padding-block:clamp(52px,8.5vw,124px);
}
.brandline{
  margin:clamp(18px,2.4vw,30px) 0 0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.9rem,7.6vw,6.6rem);
  line-height:.94;
  letter-spacing:-.04em;
  color:var(--ink);
}
.brandline em{font-style:italic;color:var(--accent);display:block}
.hero-copy{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1.06rem,1.4vw,1.3rem);
  line-height:1.55;
  color:var(--ink-70);
  max-width:42ch;
}
.hero-brand-cta{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(16px,2.6vw,34px);
  margin-top:clamp(26px,3.2vw,40px);
}

/* ---------- Dark material category grid ---------- */
.matrix{
  background:var(--ink);color:var(--cream);
  border-bottom:1px solid var(--ink);
  padding-block:clamp(52px,7vw,104px);
}
.matrix-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  gap:clamp(20px,4vw,60px);align-items:start;
  padding-bottom:clamp(28px,4vw,52px);
}
.matrix-head h2{color:var(--cream);margin-top:14px}
.matrix-head p{
  margin:0;color:#a5a099;
  font-family:var(--serif);
  font-size:clamp(1.06rem,1.4vw,1.3rem);line-height:1.5;
}
.matrix-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid rgba(255,255,255,.2);
  border-left:1px solid rgba(255,255,255,.2);
}
.matrix-card{
  display:flex;flex-direction:column;gap:11px;
  padding:clamp(24px,2.9vw,38px);
  border-right:1px solid rgba(255,255,255,.2);
  border-bottom:1px solid rgba(255,255,255,.2);
  transition:background .18s ease;
}
.matrix-card:hover{background:rgba(255,255,255,.05)}
.matrix-idx{font-family:var(--serif);font-size:1.05rem;color:var(--accent)}
.matrix-card h3{color:var(--cream);margin:0}
.matrix-card p{margin:0;color:#a5a099;font-size:.92rem}
.matrix-card .tags{margin-top:auto;padding-top:10px}
.matrix-card .tag{border-color:rgba(255,255,255,.22);color:#8d8880;background:transparent}
.matrix-card-cta{justify-content:center;gap:16px;text-decoration:none}
.matrix-card-cta:hover{background:rgba(255,48,53,.1);text-decoration:none}
.matrix-card-cta .link-underline{white-space:normal}

/* Dark chrome takes the white-ring cut of the logo. */
.logo-app{height:52px}
.logo-foot{height:100px}

/* ---------- Sections ---------- */
.section{padding-block:clamp(52px,7vw,104px);border-bottom:1px solid var(--hair)}
.section-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  gap:clamp(20px,4vw,60px);align-items:start;
  padding-bottom:clamp(28px,4vw,52px);
}
.section-head p{margin:0}

.grid-cols{display:grid;gap:0;border-top:1px solid var(--ink)}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cell{
  padding:clamp(26px,3vw,40px) clamp(20px,2.4vw,34px);
  border-left:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  background:var(--paper);
}
.cell:first-child{border-left:0}
.cell h3{margin:14px 0 10px}
.cell p{margin:0;color:var(--ink-70);font-size:.94rem}
.cell .idx{font-family:var(--serif);font-size:1.05rem;color:var(--accent)}

/* zig-zag capability rows */
.row-list{border-top:1px solid var(--ink)}
.row{
  display:grid;grid-template-columns:88px minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(16px,3vw,44px);
  padding:clamp(24px,3.4vw,44px) 0;
  border-bottom:1px solid var(--hair);
  align-items:start;
  transition:background .2s ease;
}
.row:hover{background:rgba(255,255,255,.62)}
.row-num{font-family:var(--serif);font-size:1.5rem;color:var(--accent);letter-spacing:-.02em}
.row-body{color:var(--ink-70)}
.row-body p{margin:0 0 12px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tag{
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--hair);padding:5px 10px;color:var(--muted);background:var(--paper);
}

/* pull quote */
.pull{
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  background:var(--ink);color:var(--cream);
  padding-block:clamp(48px,7vw,96px);
}
.pull blockquote{
  margin:0;font-family:var(--serif);
  font-size:clamp(1.6rem,3.6vw,3rem);line-height:1.12;letter-spacing:-.03em;
  max-width:20ch;
}
.pull .attrib{margin-top:28px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#8d8880}
.pull-in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end}

/* CTA band */
.cta-band{background:var(--paper);border-bottom:1px solid var(--ink);padding-block:clamp(44px,6vw,84px)}
.cta-in{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:#b9b4ac;padding-top:clamp(44px,6vw,76px);font-size:.9rem}
.footer a{color:#e7e3dc}
.footer a:hover{color:var(--accent)}
.footer-in{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,48px);padding-bottom:44px}
.footer-name{line-height:0}
.footer-blurb{max-width:36ch;margin:12px 0 0}
.footer h4{font-family:var(--ui);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:#7d786f;margin-bottom:12px}
.footer-col p{margin:0 0 12px;line-height:1.75}
.footer-base{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.14);padding-block:20px;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#7d786f;
}

/* ---------- Page header (interior) ---------- */
.pagehead{border-bottom:1px solid var(--ink);padding-block:clamp(40px,6vw,84px);background:var(--cream)}
.pagehead-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:end}
.pagehead h1{margin:18px 0 0}
.pagehead .lead{margin:20px 0 0;max-width:46ch}

/* ---------- Forms ---------- */
.form-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:clamp(24px,5vw,72px);align-items:start}
.form-aside{position:sticky;top:96px}
.form-aside dl{margin:22px 0 0}
.form-aside dt{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:18px}
.form-aside dd{margin:5px 0 0;font-family:var(--serif);font-size:1.05rem}

form.stack{background:var(--paper);border:1px solid var(--ink);padding:clamp(22px,3vw,40px)}
fieldset{border:0;padding:0;margin:0 0 30px}
fieldset legend{
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  padding:0 0 14px;width:100%;border-bottom:1px solid var(--hair);margin-bottom:20px;
}
.field{margin-bottom:18px}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.field-row-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
label{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
label .req{color:var(--accent)}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],
input[type=date],input[type=file],select,textarea{
  width:100%;
  font-family:var(--ui);font-size:1rem;color:var(--ink);
  background:var(--cream);
  border:1px solid var(--hair);
  border-radius:0;
  padding:12px 14px;
  transition:border-color .15s ease,background .15s ease;
}
textarea{min-height:150px;resize:vertical;line-height:1.6}
input:hover,select:hover,textarea:hover{border-color:rgba(16,16,16,.34)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);background:var(--paper)}
input[type=file]{padding:10px;font-size:.86rem;background:var(--paper)}
input[type=file]::file-selector-button{
  font-family:var(--ui);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--ink);background:var(--ink);color:#fff;padding:8px 14px;margin-right:14px;cursor:pointer;
}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 12px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px}
.help{font-size:.78rem;color:var(--muted);margin-top:7px}
.form-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;border-top:1px solid var(--hair);padding-top:24px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--ink-70)}
.check input{width:auto;margin-top:3px}
.check label{text-transform:none;letter-spacing:0;font-size:.88rem;color:var(--ink-70);margin:0}

/* ---------- Notices ---------- */
.notice{
  border:1px solid var(--hair);border-left:3px solid var(--ink);
  background:var(--paper);padding:16px 20px;margin-bottom:24px;font-size:.92rem;
}
.notice strong{display:block;font-family:var(--serif);font-size:1.06rem;letter-spacing:-.01em;margin-bottom:4px}
.notice-error{border-left-color:var(--accent);background:#fff5f5}
.notice-ok{border-left-color:#1f7a4d;background:#f2f9f5}
.notice-warn{border-left-color:#b8860b;background:#fdf9ef}

.banner-cta{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  border:1px solid var(--ink);background:var(--ink);color:var(--cream);
  padding:18px 22px;margin-bottom:26px;
}
.banner-cta p{margin:0;font-family:var(--serif);font-size:1.08rem;letter-spacing:-.01em}
.banner-cta small{display:block;font-family:var(--ui);font-size:.76rem;color:#8d8880;letter-spacing:.04em;margin-top:4px}

/* ---------- Auth screens ---------- */
.auth{min-height:calc(100vh - 190px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.auth-art{
  background:var(--ink);color:var(--cream);
  padding:clamp(36px,6vw,84px) clamp(24px,4vw,64px);
  display:flex;flex-direction:column;justify-content:space-between;gap:40px;
  border-right:1px solid var(--ink);
}
.auth-art h1{color:var(--cream);margin-top:18px}
.auth-art p{color:#a5a099;max-width:34ch}
.auth-art .kicker{color:#7d786f}
.auth-grid-deco{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.18);border-left:1px solid rgba(255,255,255,.18)}
.auth-grid-deco i{aspect-ratio:1;border-right:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18)}
.auth-grid-deco i.on{background:var(--accent)}
.auth-form{padding:clamp(32px,5vw,72px) clamp(24px,4vw,64px);background:var(--cream);display:flex;flex-direction:column;justify-content:center}
.auth-form form.stack{border:0;background:transparent;padding:0;max-width:420px}
.auth-form .form-actions{border-top:0;padding-top:8px}

/* ---------- App chrome ---------- */
.appbar{background:var(--ink);color:var(--cream);position:sticky;top:0;z-index:40;border-bottom:1px solid #000}
.appbar-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px;flex-wrap:wrap}
.appbar-brand{display:flex;align-items:center;gap:11px;color:var(--cream);font-family:var(--serif);font-size:1.18rem;letter-spacing:-.02em}
.appbar-brand:hover{text-decoration:none}
.appbar-brand em{
  font-family:var(--ui);font-style:normal;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream);background:var(--accent);padding:4px 9px;margin-left:4px;
}
.appbar-right{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.appbar-link{color:#b9b4ac;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.appbar-link:hover,.appbar-link.is-active{color:var(--accent);text-decoration:none}
.appbar-user{font-size:.74rem;color:#8d8880;display:flex;gap:8px;align-items:center}
.appbar-user em{font-style:normal;border:1px solid #4a453e;padding:2px 7px;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}
.appbar .linkish{color:#b9b4ac;font-size:.72rem}
.appbar .linkish:hover{color:var(--accent)}

.app-main{padding-block:clamp(28px,4vw,52px)}
.app-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid var(--ink);margin-bottom:32px}
.app-head h1{margin:10px 0 0}

.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border:1px solid var(--hair);background:var(--paper);margin-bottom:34px}
.stat{padding:20px 22px;border-left:1px solid var(--hair)}
.stat:first-child{border-left:0}
.stat dt{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.stat dd{margin:8px 0 0;font-family:var(--serif);font-size:2rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* ---------- Panels + tables ---------- */
.panel{background:var(--paper);border:1px solid var(--hair);margin-bottom:32px}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 22px;border-bottom:1px solid var(--hair)}
.panel-head h2{font-size:1.3rem}
.panel-body{padding:22px}
.panel-body.tight{padding:0}

.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--hair-soft);vertical-align:top}
thead th{
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--ink);white-space:nowrap;font-weight:400;
}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--cream)}
td.num{text-align:right;font-variant-numeric:tabular-nums}
th.num{text-align:right}
.cellhead{font-family:var(--serif);font-size:1.02rem;letter-spacing:-.015em}
.cellsub{color:var(--muted);font-size:.8rem;margin-top:3px}
.route{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.route i{color:var(--accent);font-style:normal}

.pill{
  display:inline-block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--hair);padding:4px 9px;white-space:nowrap;
}
.pill-live{border-color:var(--accent);color:var(--accent)}
.pill-done{border-color:#1f7a4d;color:#1f7a4d}
.pill-warn{border-color:#b8860b;color:#b8860b}
.pill-mute{color:var(--muted)}
.pill-ink{border-color:var(--ink);color:var(--ink)}

.empty{padding:56px 24px;text-align:center;color:var(--muted)}
.empty .h3{color:var(--ink);margin-bottom:8px}

details.disclose{border-top:1px solid var(--hair-soft)}
details.disclose > summary{
  cursor:pointer;padding:12px 16px;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  list-style:none;
}
details.disclose > summary::-webkit-details-marker{display:none}
details.disclose > summary::before{content:"+ ";color:var(--accent)}
details.disclose[open] > summary::before{content:"– "}
details.disclose > summary:hover{color:var(--accent)}
.disclose-body{padding:6px 16px 22px;background:var(--cream);border-top:1px solid var(--hair-soft)}

.inline-form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.inline-form .field{margin-bottom:0;min-width:150px;flex:1}
.doc-list{list-style:none;margin:0;padding:0;font-size:.86rem}
.doc-list li{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--hair-soft)}
.doc-list li:last-child{border-bottom:0}

.split-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.confirm-card{background:var(--paper);border:1px solid var(--ink);padding:clamp(26px,4vw,52px);max-width:760px}
.confirm-card dl{display:grid;grid-template-columns:auto 1fr;gap:12px 26px;margin:26px 0 0;border-top:1px solid var(--hair);padding-top:22px}
.confirm-card dt{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding-top:4px}
.confirm-card dd{margin:0;font-family:var(--serif);font-size:1.1rem}
.steps{counter-reset:s;list-style:none;padding:0;margin:26px 0 0}
.steps li{counter-increment:s;padding:12px 0 12px 42px;border-top:1px solid var(--hair-soft);position:relative;color:var(--ink-70)}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:12px;font-family:var(--serif);color:var(--accent)}

/* --- Pallet line items -------------------------------------------
   Editable rows carry no per-row labels: the micro-label strip above
   the rows is the header, so a five-field row still fits the half-width
   column the update form sits in. */
.pallet-head,.pallet-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 58px 58px 58px 84px 26px;
  gap:8px;align-items:center;
}
.pallet-head{
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  padding-bottom:8px;border-bottom:1px solid var(--hair);
}
.pallet-head span+span{text-align:right}
.pallet-row{padding:9px 0;border-bottom:1px solid var(--hair-soft)}
.pallet-row input{padding:8px 10px;font-size:.82rem}
.pallet-row input[type=number]{text-align:right}
.pallet-drop{
  appearance:none;-webkit-appearance:none;background:transparent;border:1px solid var(--hair);
  border-radius:0;color:var(--muted);width:26px;height:26px;padding:0;line-height:1;
  font-size:.92rem;cursor:pointer;
}
.pallet-drop:hover{border-color:var(--accent);color:var(--accent)}
.pallet-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:16px}
.pallet-total{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pallet-total strong{font-family:var(--serif);font-size:1.05rem;letter-spacing:0;color:var(--ink);margin-left:10px}
.pallet-hint{margin:12px 0 0;color:var(--muted)}

.pallet-manifest{margin:0 0 24px}
.pallet-manifest table{background:var(--paper);border:1px solid var(--hair)}
.pallet-manifest th,.pallet-manifest td{padding:9px 13px;font-size:.85rem}
.pallet-manifest tfoot td{border-bottom:0;border-top:1px solid var(--ink)}
.pallet-manifest tfoot .pallet-sum{font-family:var(--serif);font-size:1.02rem}
.pallet-manifest tbody tr:hover{background:transparent}

@media (max-width:900px){
  .pallet-head{display:none}
  .pallet-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:12px 0}
  .pallet-row input[name=pallet_description]{grid-column:1 / -1}
  .pallet-drop{grid-column:1 / -1;justify-self:end}
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .hero-in,.section-head,.pagehead-in,.pull-in,.cta-in,.form-shell,.split-2{grid-template-columns:minmax(0,1fr)}
  .hero-brand-in,.matrix-head{grid-template-columns:minmax(0,1fr)}
  .hero-brand-in{align-items:start;gap:clamp(24px,4vw,40px)}
  .matrix-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-right{border-left:0;border-top:1px solid var(--ink)}
  .form-aside{position:static}
  .footer-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .auth{grid-template-columns:minmax(0,1fr)}
  .auth-art{border-right:0;border-bottom:1px solid var(--ink)}
}
@media (max-width:820px){
  .cols-3,.cols-2,.matrix-grid{grid-template-columns:minmax(0,1fr)}
  .cell{border-left:0}
  .row{grid-template-columns:minmax(0,1fr);gap:12px}
  .row-num{font-size:1.15rem}
  .field-row,.field-row-3{grid-template-columns:minmax(0,1fr)}
  .nav{gap:12px}
  .nav a{font-size:.68rem;letter-spacing:.1em}
  .masthead-in{flex-wrap:wrap}
}
@media (max-width:560px){
  .footer-in{grid-template-columns:minmax(0,1fr)}
  .ticker-in{font-size:.62rem}
  .app-head{align-items:flex-start}
}

/* ---------------------------------------------------------------------------
   Photography
   Additive layer only: every rule below targets a new class, so the existing
   type, colour and grid system is untouched. Frames are hairline-bordered and
   square-cornered like everything else; no shadows, no rounding.
   --------------------------------------------------------------------------- */

/* Hero collage — the right-hand column of the brand hero.
   The hero grid bottom-aligns its two columns, so the two columns have to be
   about the same height or the shorter one leaves a void above it. All of the
   hero copy therefore lives in the left column and the collage is the right
   column outright; at these clamp values the two land within ~15px of each
   other from 1080px up. Scoped to the collage variant only. */
.hero-shot .hero-copy{margin-top:clamp(20px,2.6vw,32px)}

.hero-collage{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(8px,.9vw,12px);
  align-items:start;
  margin-top:0;
}
.hero-collage .shot{
  margin:0;
  overflow:hidden;
  border:1px solid var(--hair);
  background:var(--ink);
}
.hero-collage .shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.88) contrast(1.05);
}
.hero-collage .shot-a,.hero-collage .shot-b{aspect-ratio:4/5}
.hero-collage .shot-c,.hero-collage .shot-d{aspect-ratio:16/10}
.hero-collage .shot-b,.hero-collage .shot-d{margin-top:clamp(14px,1.8vw,26px)}

/* Category cards — a photo header above the existing index/title/body/tags */
.matrix-figure{
  margin:0;
  overflow:hidden;
  aspect-ratio:16/9;
  border:1px solid rgba(255,255,255,.2);
  background:#000;
}
.matrix-figure img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(.3) contrast(1.08) brightness(.9);
  transition:transform .5s ease,filter .3s ease;
}
.matrix-card:hover .matrix-figure img{
  transform:scale(1.035);
  filter:grayscale(0) contrast(1.02) brightness(1);
}

/* Quote band — photograph behind the existing ink block, held well back */
.pull-photo{position:relative;overflow:hidden}
.pull-photo .band-photo{position:absolute;inset:0;z-index:0}
.pull-photo .band-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.2);
  opacity:.32;
}
.pull-photo .band-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,var(--ink) 0%,rgba(16,16,16,.9) 42%,rgba(16,16,16,.55) 100%);
}
.pull-photo > .wrap{position:relative;z-index:1}

/* Interior page heads — a photo under the standfirst, in the existing right column */
.pagehead-photo{
  margin:clamp(22px,2.6vw,32px) 0 0;
  overflow:hidden;
  aspect-ratio:16/7;
  border:1px solid var(--hair);
  background:var(--ink);
}
.pagehead-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.9) contrast(1.04);
}

/* Order-desk band — a slim cladding strip above the existing call to action */
.cta-photo{
  margin:0 0 clamp(22px,2.4vw,30px);
  overflow:hidden;
  aspect-ratio:16/7;
  border:1px solid var(--hair);
  background:var(--ink);
}
.cta-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.85) contrast(1.06);
}

@media (max-width:1080px){
  .hero-collage{max-width:560px}
  .cta-photo{max-width:620px}
  .pagehead-aside{max-width:620px}
}
@media (max-width:560px){
  .hero-collage .shot-b,.hero-collage .shot-d{margin-top:0}
}

/* ---------------------------------------------------------------------------
   Manufacturer profile catalogs (EasyTrim / FastPlank)
   Additive layer only: every rule below targets a new class, so the existing
   type, colour and grid system is untouched. Hairlines, square corners, the
   dark band carrying the filter row, red reserved for the part number.
   --------------------------------------------------------------------------- */

/* Manufacturer entry on /manufacturers — the existing .cell, made clickable */
.cell-link{display:flex;flex-direction:column;align-items:flex-start;color:var(--ink);transition:background .18s ease}
.cell-link:hover{background:var(--paper);text-decoration:none}
.cell-link p{margin-bottom:18px}
.cell-link .link-underline{margin-top:auto}

/* Breadcrumb above the catalog page title */
.crumbs{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent)}
.crumbs i{color:var(--accent);font-style:normal;margin-inline:8px}

/* Dark filter band */
.catbar{background:var(--ink);color:var(--cream);border-bottom:1px solid var(--ink);padding-block:clamp(22px,3vw,34px)}
.catbar-in{display:grid;gap:16px}
.catfilter{
  display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);
  gap:8px 18px;align-items:baseline;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.2);
}
.catfilter:first-child{padding-top:0;border-top:0}
.catfilter-label{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:#8d8880}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  appearance:none;background:transparent;color:#cfcbc4;
  border:1px solid rgba(255,255,255,.26);border-radius:0;
  font-family:var(--ui);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  padding:8px 13px;cursor:pointer;line-height:1;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.catcount{margin:0;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#8d8880}
.catcount b{color:var(--cream);font-weight:400;font-variant-numeric:tabular-nums}

/* Grouped profile grid */
.catgroup{padding-block:clamp(38px,5vw,72px)}
.catgroup[hidden]{display:none}
.catgroup .section-head{align-items:start}
.catgrid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--ink);border-left:1px solid var(--hair);
}
.catcard{
  display:flex;flex-direction:column;gap:8px;
  padding:clamp(18px,2.1vw,28px);
  background:var(--paper);
  border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
  transition:background .16s ease;
}
.catcard[hidden]{display:none}
.catcard:hover{background:var(--cream)}

/* Product artwork at the head of each card — Engage's own renders. A fixed-height centring
   box rather than a fixed aspect ratio: the packed set is mostly 4:3 but not all of it
   (ez41 is a native square), and pinning one ratio on the well forced every file into the
   same box. Height is what needs to be consistent to keep the card grid even, so the well
   sets height and lets width follow the artwork.
   The image is capped by max-width/max-height with width/height:auto, so each profile
   renders at its own true proportions, centred, whole — never cropped, never stretched.
   White ground because their set mixes transparent PNG with white-background JPEG and white
   is what they were authored on. flex:0 0 auto stops the card's column flex squashing it.
   The three finish rows fall back to a swatch from lib/profileart.ts. */
.catart{
  flex:0 0 auto;
  margin:0 0 6px;
  width:100%;
  height:200px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid var(--hair-soft);
}
.catart img{
  display:block;
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  object-fit:contain;
}
.catart-swatch{display:grid;place-items:center;background:var(--cream)}
/* Capped at the svg's own viewBox width so the taller well does not upscale the
   finish swatches past the size they were drawn at. */
.pa{display:block;width:74%;max-width:120px;height:auto}
.pa-sub{fill:rgba(16,16,16,.07)}
.pa-panel{fill:rgba(16,16,16,.15);stroke:rgba(16,16,16,.3);stroke-width:.9}
.pa-ghost{fill:none;stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3;opacity:.38}
.pa-chip{fill:none;stroke:var(--hair);stroke-width:1}
.pa-fill-ink{fill:var(--ink)}
.pa-fill-accent{fill:var(--accent)}
.catcode{font-family:var(--serif);font-size:1.02rem;color:var(--accent);letter-spacing:-.01em}
.catname{font-family:var(--serif);font-size:1.06rem;line-height:1.24;letter-spacing:-.02em;margin:0}
.catsize{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.catnote{margin:0;font-size:.82rem;line-height:1.5;color:var(--ink-70)}
.catcard .tags{margin-top:auto;padding-top:12px}
.catempty{
  max-width:var(--wrap);margin:0 auto;padding:clamp(28px,4vw,52px) var(--gut);
  font-family:var(--serif);font-size:1.1rem;color:var(--ink-70);
}
.catempty[hidden]{display:none}

@media (max-width:1080px){
  .catgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:820px){
  .catgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catfilter{grid-template-columns:minmax(0,1fr)}
  .cell-link{border-left:0}
}
@media (max-width:640px){
  .catart{height:150px}
}
@media (max-width:560px){
  .catgrid{grid-template-columns:minmax(0,1fr)}
}

/* Manufacturer catalog hero photograph — full inner width under the page head,
   so it never competes with the two-column head for height. */
.mfr-photo{
  margin:clamp(28px,3.6vw,48px) 0 0;
  overflow:hidden;
  aspect-ratio:16/7;
  border:1px solid var(--hair);
  background:var(--ink);
}
.mfr-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.9) contrast(1.04);
}

/* ---------------------------------------------------------------------------
   FastPlank finish range
   Reference block on the FastPlank catalog page, between Planks and Trims. The
   commercial content here is the availability split, not the colour: stock finishes
   ship from inventory, special order woodgrains carry minimums and a 12-14 week lead
   time. So the accent does the work it always does on this site — one red mark per
   idea — on the special order group only: red rule above the group, red-outlined
   availability tag, red-ruled lead-time note. The two stock groups take the ink rule.
   Tiles are pinned to 128px because the source samples are 256 square, so anything
   larger is served under 2x and goes soft. Square with object-fit:cover is safe here
   (unlike .catart) because a swatch is a seamless texture with no part to keep whole.
   --------------------------------------------------------------------------- */
.finishsets{display:grid;gap:clamp(34px,4.4vw,60px)}
.finishset{border-top:1px solid var(--ink)}
.finishset.is-special{border-top-color:var(--accent)}
.finishset-head{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:8px clamp(12px,1.6vw,20px);
  padding:16px 0 clamp(18px,2.2vw,26px);
}
.finishset-head h3{margin:0}
.finishset-count{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.finishset-head .tag{margin-left:auto}
.tag-special{border-color:var(--accent);color:var(--accent)}
/* Same .notice frame as the app screens, re-ruled in the accent and untinted — the
   pale yellow of .notice-warn belongs to form chrome, not to an editorial page. */
.finishnote{
  border-left-color:var(--accent);
  background:var(--paper);
  margin:0 0 clamp(20px,2.4vw,28px);
  max-width:88ch;
}
/* Fixed 128px columns rather than auto-fit minmax: a flexible track would stretch the
   tiles past the size the samples were photographed at on a wide viewport. */
.swatchgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,128px);
  gap:clamp(16px,2vw,26px);
}
.swatch{margin:0;display:flex;flex-direction:column;gap:9px;width:128px}
.swatch img{
  width:128px;height:128px;
  object-fit:cover;
  border:1px solid var(--hair-soft);
  background:var(--paper);
}
.swatch-name{font-size:.78rem;line-height:1.34;color:var(--ink-70)}
.finishfoot{margin-top:clamp(36px,4.4vw,60px)}

/* ---------------------------------------------------------------------------
   Home page
   Additive layer for the rebuilt home page. Same rules as everywhere else:
   hairlines not shadows, square corners, red reserved for links and single
   accent marks. Nothing here is shared with another template.
   --------------------------------------------------------------------------- */

/* ---------- Hero: copy on the wrap gutter, four project frames bleeding right ---------- */
.hero-quad-sec{
  background:var(--cream);
  border-bottom:1px solid var(--ink);
  overflow:hidden;
  /* Percentage padding resolves against the body width, so the copy lands on exactly the
     same gutter as every .wrap below it while the photo block still runs to the edge. */
  padding-left:max(var(--gut),calc((100% - var(--wrap)) / 2 + var(--gut)));
}
.hero-quad-in{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:stretch;
}
/* Left column keeps the site gutter; the photo block runs to the viewport edge. */
.hero-quad-copy{
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(44px,6vw,92px);
  padding-right:clamp(24px,3.4vw,56px);
}
.hero-quad-copy .brandline{margin-top:clamp(16px,2vw,28px)}
.hero-quad-copy .hero-copy{margin-top:clamp(18px,2.2vw,28px)}

.hero-quad{
  position:relative;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  min-height:clamp(440px,42vw,620px);
  background:var(--ink);
  border-left:1px solid var(--ink);
}
.hero-quad .quad{
  position:relative;margin:0;overflow:hidden;
  border-left:1px solid rgba(255,255,255,.18);
  border-top:1px solid rgba(255,255,255,.18);
}
.hero-quad .quad:nth-child(-n+2){border-top:0}
.hero-quad .quad:nth-child(odd){border-left:0}
.hero-quad .quad img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.04)}
.quad-label{
  position:absolute;left:0;bottom:0;
  background:var(--ink);color:var(--cream);
  font-family:var(--ui);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  padding:7px 12px;
}
.quad-card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:2;max-width:240px;
  background:var(--accent);color:#fff;
  padding:14px 18px;
}
.quad-card strong{
  display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.15;letter-spacing:-.02em;
}
.quad-card span{
  display:block;margin-top:7px;
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.86);
}

/* ---------- Stat strip ---------- */
.statbar{background:var(--ink);color:var(--cream)}
.statbar-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.statbar-item{
  padding:clamp(18px,2.2vw,26px) clamp(16px,2vw,30px);
  border-left:1px solid rgba(255,255,255,.18);
}
.statbar-item:first-child{border-left:0;padding-left:0}
.statbar-item strong{
  display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.05rem,1.5vw,1.38rem);letter-spacing:-.02em;
}
.statbar-item span{
  display:block;margin-top:6px;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:#8d8880;
}

/* ---------- Material categories: photo-backed cards ---------- */
.sys-sec{background:var(--cream);border-bottom:1px solid var(--hair);padding-block:clamp(52px,7vw,104px)}
.sys-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;flex-wrap:wrap;padding-bottom:clamp(26px,3.4vw,44px);
}
.sys-head h2{margin-top:14px}
.sys-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.1vw,16px)}
.sys-card{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(260px,23vw,330px);
  padding:clamp(20px,2.2vw,30px);
  overflow:hidden;background:var(--ink);color:var(--cream);text-decoration:none;
}
.sys-card:hover{text-decoration:none}
.sys-photo{position:absolute;inset:0;margin:0}
.sys-photo img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.92) contrast(1.02);
  transition:transform .5s ease;
}
.sys-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,16,16,.12) 0%,rgba(16,16,16,.6) 48%,rgba(16,16,16,.92) 100%);
}
.sys-card > *:not(.sys-photo){position:relative;z-index:1}
.sys-card:hover .sys-photo img{transform:scale(1.04)}
.sys-card .sys-idx{
  position:absolute;top:clamp(18px,2vw,26px);left:clamp(20px,2.2vw,30px);
  font-family:var(--serif);font-size:.95rem;color:var(--accent);
}
.sys-card h3{color:var(--cream);margin:0}
.sys-card p{margin:9px 0 0;color:rgba(245,243,239,.74);font-size:.88rem;max-width:34ch}
.sys-more{
  margin-top:14px;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
}

/* ---------- Process ---------- */
.flow{background:var(--ink);color:var(--cream);padding-block:clamp(52px,7vw,104px)}
.flow h2{color:var(--cream);margin-top:14px}
.flow-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);
  margin-top:clamp(30px,4vw,56px);
  border-top:1px solid rgba(255,255,255,.2);
  padding-top:clamp(26px,3vw,44px);
}
.flow-step .mark{font-family:var(--serif);font-size:.95rem;color:var(--accent)}
.flow-step h3{color:var(--cream);margin:12px 0 9px}
.flow-step p{margin:0;color:#a5a099;font-size:.92rem;max-width:34ch}

/* ---------- Installation partner ---------- */
.partner{background:var(--paper);border-bottom:1px solid var(--hair);padding-block:clamp(42px,5.4vw,76px)}
.partner-in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,4vw,64px);align-items:center;
}
.partner-h{margin-top:14px}
.partner p{margin:0;color:var(--ink-70);max-width:46ch}
.partner-cta{margin-top:18px}

/* ---------- Manufacturer strip ---------- */
.mfr-strip{background:var(--cream);border-bottom:1px solid var(--hair);padding-block:clamp(40px,5vw,72px);text-align:center}
.mfr-names{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:clamp(14px,2.2vw,34px);
  max-width:880px;margin:clamp(20px,2.6vw,32px) auto 0;
}
.mfr-names span{font-size:clamp(.88rem,1.05vw,1.05rem);font-weight:700;letter-spacing:-.01em}
.mfr-strip .link-underline{display:inline-block;margin-top:clamp(22px,2.8vw,34px)}

/* ---------- Fabrication cross-sell ---------- */
.fab-band{background:#e6e4e0;border-bottom:1px solid var(--hair);padding-block:clamp(48px,6.4vw,92px);text-align:center}
.fab-band h2{margin-top:14px}
.fab-band p{margin:clamp(16px,2vw,24px) auto 0;max-width:58ch;color:var(--ink-70)}
.fab-band strong{font-weight:700}
.fab-actions{
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:clamp(16px,2.4vw,30px);margin-top:clamp(24px,3vw,36px);
}

@media (max-width:1080px){
  .hero-quad-sec{padding-left:0}
  .hero-quad-in{grid-template-columns:minmax(0,1fr)}
  .hero-quad-copy{padding-inline:var(--gut);padding-bottom:clamp(30px,4vw,46px)}
  .hero-quad{border-left:0;border-top:1px solid var(--ink);min-height:clamp(360px,66vw,520px)}
  .statbar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .statbar-item:nth-child(odd){border-left:0;padding-left:0}
  .statbar-item:nth-child(n+3){border-top:1px solid rgba(255,255,255,.18)}
  .sys-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .partner-in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  .sys-grid{grid-template-columns:minmax(0,1fr)}
  .statbar-grid{grid-template-columns:minmax(0,1fr)}
  .statbar-item{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.18)}
  .statbar-item:first-child{border-top:0}
  .quad-card{max-width:190px;padding:11px 14px}
}
@media (max-width:560px){
  .quad-card{position:static;transform:none;max-width:none;grid-column:1 / -1}
  .hero-quad{grid-template-rows:repeat(2,minmax(0,1fr)) auto;min-height:0}
  .hero-quad .quad{aspect-ratio:4/3}
}