/* ============================================================
   SPM — Super Power Management
   "Adeco" construction-industrial redesign
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --amber:        #F6B01E;
  --amber-600:    #E29A05;
  --amber-700:    #C6850A;
  --amber-soft:   rgba(246,176,30,.14);

  --ink:          #16181D;   /* charcoal */
  --ink-900:      #0E0F13;   /* near black */
  --ink-800:      #1B1E25;
  --steel:        #2A2E37;
  --steel-line:   #343945;

  --paper:        #F4F1EB;   /* warm concrete */
  --paper-2:      #ECE7DE;
  --white:        #FFFFFF;

  --text:         #20242C;
  --muted:        #62697A;
  --muted-2:      #8A91A0;
  --on-dark:      #E7E4DD;
  --on-dark-mut:  #9AA0AC;

  --line:         #DED8CC;
  --line-dark:    rgba(255,255,255,.10);

  --maxw:         1200px;
  --radius:       3px;
  --shadow:       0 24px 60px -24px rgba(15,17,22,.35);
  --shadow-lg:    0 40px 90px -30px rgba(15,17,22,.55);

  --font-body:    'Barlow', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-head:    'Oswald', 'Barlow Condensed', Impact, sans-serif;
  --font-cond:    'Barlow Condensed', 'Oswald', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'Barlow', monospace;

  /* aliases used by inner pages */
  --text-3:       var(--muted-2);
}

/* ---------- Reset ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  color:var(--text);
  background:var(--paper);
  line-height:1.65;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* ---------- Shared type ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-cond);
  font-weight:600; font-size:15px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--amber-700);
}
.eyebrow::before{
  content:""; width:34px; height:2px; background:var(--amber); display:inline-block;
}
.eyebrow.on-dark{ color:var(--amber); }

.section-title{
  font-family:var(--font-head);
  font-weight:600; text-transform:uppercase;
  font-size:clamp(30px,4.4vw,52px);
  line-height:1.03; letter-spacing:-.006em;
  color:var(--ink);
  margin-top:16px;
}
.on-dark .section-title,
.section-title.on-dark{ color:var(--white); }

.section-sub{
  margin-top:18px; max-width:60ch; color:var(--muted); font-size:17px;
}

.section{ padding:104px 0; position:relative; }
.section-head{ max-width:760px; margin-bottom:56px; }

/* accent word */
.hl{ color:var(--amber-700); }
.on-dark .hl{ color:var(--amber); }

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--amber); --fg:var(--ink-900);
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--font-cond); font-weight:600;
  text-transform:uppercase; letter-spacing:.10em; font-size:16px;
  padding:15px 28px; border:2px solid transparent;
  background:var(--bg); color:var(--fg);
  border-radius:var(--radius);
  transition:transform .18s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  position:relative;
}
.btn svg{ width:17px; height:17px; }
.btn-primary{ background:var(--amber); color:var(--ink-900); box-shadow:0 12px 26px -12px rgba(246,176,30,.7); }
.btn-primary:hover{ background:var(--amber-600); transform:translateY(-2px); }
.btn-dark{ background:var(--ink); color:var(--white); }
.btn-dark:hover{ background:#000; transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:rgba(22,24,29,.28); }
.btn-ghost:hover{ border-color:var(--ink); background:var(--ink); color:var(--white); }
.btn-ghost.on-dark{ color:var(--white); border-color:rgba(255,255,255,.35); }
.btn-ghost.on-dark:hover{ background:var(--white); color:var(--ink); border-color:var(--white); }
.btn-lg{ padding:17px 34px; font-size:17px; }
.btn-block{ width:100%; justify-content:center; }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  background:var(--ink-900); color:var(--on-dark-mut);
  font-family:var(--font-cond); letter-spacing:.06em; font-size:14.5px;
  border-bottom:1px solid var(--line-dark);
}
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; height:44px; }
.topbar-left{ display:flex; gap:26px; }
.topbar-left span{ display:inline-flex; align-items:center; gap:8px; }
.topbar-left svg{ width:14px; height:14px; color:var(--amber); }
.topbar-left a:hover{ color:var(--white); }
.topbar-right{ display:flex; gap:14px; }
.topbar-right a{ color:var(--on-dark-mut); }
.topbar-right a:hover{ color:var(--amber); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:60;
  background:var(--white);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease;
}
.nav.scrolled{ box-shadow:0 10px 30px -18px rgba(0,0,0,.4); }
.nav-inner{ display:flex; align-items:center; gap:28px; height:80px; }
.brand-logo{ height:34px; width:auto; }
.nav-links{
  display:flex; align-items:center; gap:30px; margin-left:14px;
  font-family:var(--font-cond); font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; font-size:16px;
}
.nav-links a{ color:var(--ink); padding:6px 0; position:relative; }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:var(--amber); transition:width .22s ease;
}
.nav-links a:hover{ color:var(--amber-700); }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ margin-left:auto; display:flex; align-items:center; gap:18px; }
.nav-phone{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-cond); font-weight:600; letter-spacing:.05em; font-size:17px;
  color:var(--ink);
}
.nav-phone svg{ width:16px; height:16px; color:var(--amber-700); }
.nav-toggle{ display:none; background:none; border:0; flex-direction:column; gap:5px; padding:8px; }
.nav-toggle span{ width:26px; height:2px; background:var(--ink); display:block; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  background:var(--ink-900);
  color:var(--on-dark);
  padding:150px 0 140px;
  isolation:isolate;
}
/* full-bleed background photo */
.hero-photo-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 40%; z-index:-2;
}
.hero-bg{ position:absolute; inset:0; z-index:-1; }
.hero-bg::before{ /* legibility scrim over photo — lightened so the photo reads through */
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(8,9,12,.82) 0%, rgba(8,9,12,.66) 34%, rgba(8,9,12,.32) 68%, rgba(8,9,12,.12) 100%),
    linear-gradient(0deg, rgba(8,9,12,.78) 0%, rgba(8,9,12,.18) 36%, transparent 60%),
    radial-gradient(90% 90% at 88% 4%, rgba(246,176,30,.14), transparent 52%);
}
.hero-bg::after{ /* subtle blueprint grid on the dark side */
  content:""; position:absolute; inset:0; opacity:.35;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:linear-gradient(90deg, #000 0%, #000 30%, transparent 70%);
  -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 30%, transparent 70%);
}
/* thin amber accent along the bottom edge */
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg, var(--amber) 0%, var(--amber) 30%, transparent 70%);
  z-index:1;
}
.hero-inner{ position:relative; }
.hero-copy{ max-width:680px; }

/* "shipping now" note */
.hero-note{
  display:inline-flex; align-items:center; gap:11px; margin-top:38px;
  font-family:var(--font-cond); font-weight:600; text-transform:uppercase; letter-spacing:.1em;
  font-size:15px; color:var(--on-dark);
  background:rgba(8,9,12,.5); border:1px solid rgba(255,255,255,.14);
  border-left:3px solid var(--amber); border-radius:var(--radius); padding:11px 18px;
  backdrop-filter:blur(4px);
}
.hero-note-dot{ width:9px; height:9px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 0 0 rgba(246,176,30,.7); animation:pulse 2s infinite; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--font-cond); font-weight:600; text-transform:uppercase;
  letter-spacing:.24em; font-size:15px; color:var(--on-dark-mut);
  margin-bottom:26px;
}
.hero-eyebrow .amber{ color:var(--amber); }
.hero-eyebrow .bar{ width:38px; height:2px; background:var(--amber); }
.pulse-dot{ width:9px; height:9px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 0 0 rgba(246,176,30,.7); animation:pulse 2s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 12px rgba(246,176,30,0);} 100%{ box-shadow:0 0 0 0 rgba(246,176,30,0);} }

.hero-title{
  font-family:var(--font-head); font-weight:700; text-transform:uppercase;
  font-size:clamp(42px,7vw,86px); line-height:.96; letter-spacing:-.012em;
  color:var(--white);
}
.hero-title .amber{ color:var(--amber);
  -webkit-text-stroke:0; text-shadow:0 0 40px rgba(246,176,30,.25); }
.hero-sub{
  margin-top:26px; max-width:60ch; font-size:19px; color:var(--on-dark-mut);
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:38px; }

.hero-stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  margin-top:64px; border-top:1px solid var(--line-dark);
}
.hero-stats .stat{ padding:26px 24px 4px 0; border-right:1px solid var(--line-dark); }
.hero-stats .stat:last-child{ border-right:0; }
.stat-num{
  font-family:var(--font-head); font-weight:600;
  font-size:clamp(34px,4vw,50px); color:var(--white); line-height:1;
}
.stat-num .accent,
.hero-stats .stat-num{ color:var(--white); }
.hero-stats .stat-num{ color:var(--amber); }
.stat-label{
  font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.14em;
  font-size:14px; color:var(--on-dark-mut); margin-top:8px;
}

/* ============================================================
   TRUST MARQUEE
   ============================================================ */
.trust{ background:var(--ink); padding:28px 0; overflow:hidden; border-bottom:1px solid var(--line-dark); }
.logo-marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.logo-track{ display:flex; align-items:center; gap:40px; width:max-content; animation:marquee 30s linear infinite; }
.logo-item{
  font-family:var(--font-head); font-weight:600; text-transform:uppercase;
  letter-spacing:.10em; font-size:21px; color:rgba(231,228,221,.9); white-space:nowrap;
}
.logo-sep{ color:var(--amber); font-size:13px; line-height:1; }
@keyframes marquee{ to{ transform:translateX(-50%);} }

/* ============================================================
   ABOUT / INTRO
   ============================================================ */
/* content overlaid on the side of the construction photo */
.about{ position:relative; background:var(--ink-900); overflow:hidden; isolation:isolate; }
.about-hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 45%; z-index:0; }
.about-hero-scrim{ position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(8,9,12,.95) 0%, rgba(8,9,12,.86) 30%, rgba(8,9,12,.45) 62%, rgba(8,9,12,.12) 100%),
    linear-gradient(0deg, rgba(8,9,12,.55), transparent 42%),
    radial-gradient(80% 90% at 90% 6%, rgba(246,176,30,.14), transparent 55%); }
.about .container{ position:relative; z-index:2; }
.about-hero-card{ max-width:600px; padding:104px 0; color:var(--on-dark); }
.about-hero-card .section-title{ margin-top:14px; }
.about-lead{ color:var(--on-dark-mut); font-size:17.5px; margin-top:20px; max-width:52ch; }

.about-caps{ margin-top:34px; display:grid; }
.about-cap{ display:flex; gap:20px; align-items:flex-start; padding:18px 0;
  border-top:1px solid var(--line-dark); }
.about-cap:last-child{ border-bottom:1px solid var(--line-dark); }
.about-cap-num{ font-family:var(--font-head); font-weight:700; font-size:22px; color:var(--amber);
  line-height:1; min-width:34px; padding-top:2px; }
.about-cap h4{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.05em;
  font-size:18px; color:var(--white); margin-bottom:4px; }
.about-cap p{ color:var(--on-dark-mut); font-size:14.5px; max-width:46ch; }

.about-hero-foot{ display:flex; align-items:center; gap:38px; margin-top:36px; flex-wrap:wrap; }
.about-stats{ display:flex; gap:30px; }
.about-stats > div{ display:flex; flex-direction:column; }
.about-stats b{ font-family:var(--font-head); font-weight:700; font-size:30px; color:var(--amber); line-height:1; }
.about-stats span{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.1em;
  font-size:12.5px; color:var(--on-dark-mut); margin-top:5px; }

.about-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:70px; align-items:center; }
.about-visual{ position:relative; }
.about-panel{
  background:var(--ink-900); color:var(--on-dark);
  border-radius:var(--radius); padding:46px 44px; position:relative; overflow:hidden;
  box-shadow:var(--shadow);
}
.about-panel::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:40px 40px;
}
.about-panel > *{ position:relative; }
.about-panel h3{
  font-family:var(--font-head); font-weight:600; text-transform:uppercase;
  font-size:24px; color:var(--white); margin-bottom:20px;
}
.cap-row{ display:flex; gap:18px; padding:22px 0; border-top:1px solid var(--line-dark); }
.cap-row:last-child{ border-bottom:1px solid var(--line-dark); }
.cap-num{
  font-family:var(--font-head); font-weight:700; font-size:26px; color:var(--amber);
  line-height:1; min-width:44px;
}
.cap-row h4{ font-family:var(--font-cond); font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; font-size:19px; color:var(--white); margin-bottom:4px; }
.cap-row p{ color:var(--on-dark-mut); font-size:15.5px; }

/* experience badge */
.exp-badge{
  position:absolute; right:-18px; bottom:-26px;
  background:var(--amber); color:var(--ink-900);
  border-radius:var(--radius); padding:22px 26px; text-align:center;
  box-shadow:var(--shadow-lg); rotate:-3deg;
}
.exp-badge b{ font-family:var(--font-head); font-weight:700; font-size:46px; line-height:.9; display:block; }
.exp-badge span{ font-family:var(--font-cond); font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; font-size:14px; }

.about-copy .section-title{ margin-top:14px; }
.about-copy p{ color:var(--muted); margin-top:20px; font-size:17px; }
.about-points{ margin-top:26px; display:grid; gap:14px; }
.about-points li{ display:flex; gap:13px; align-items:flex-start; font-size:16px; }
.about-points .tick{
  width:22px; height:22px; flex:0 0 22px; border-radius:2px; background:var(--amber);
  color:var(--ink-900); display:grid; place-items:center; margin-top:2px;
}
.about-points .tick svg{ width:13px; height:13px; }
.about-copy .btn{ margin-top:34px; }

/* ============================================================
   SERVICES / PRODUCTS
   ============================================================ */
.products{ background:var(--paper-2); border-top:1px solid var(--line); }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }
.section-head.center .section-sub{ margin-left:auto; margin-right:auto; }

.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.product-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 28px 30px; position:relative; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.product-card::before{ /* top accent bar */
  content:""; position:absolute; left:0; top:0; height:4px; width:100%;
  background:var(--amber); transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
}
.product-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--amber); }
.product-card:hover::before{ transform:scaleX(1); }
.product-index{
  font-family:var(--font-head); font-weight:700; font-size:48px; line-height:1;
  color:var(--paper-2); position:absolute; top:20px; right:22px;
}
.product-card:hover .product-index{ color:var(--amber-soft); }
.product-icon{
  width:64px; height:64px; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius);
  display:grid; place-items:center; margin-bottom:24px; transition:.25s ease;
}
.product-icon svg{ width:34px; height:34px; }
.product-card:hover .product-icon{ background:var(--amber); color:var(--ink-900); border-color:var(--amber); }
.product-card h3{
  font-family:var(--font-head); font-weight:600; text-transform:uppercase;
  font-size:26px; color:var(--ink); margin-bottom:6px;
}
.product-range{
  font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.06em;
  font-size:15px; color:var(--amber-700); margin-bottom:20px;
}
.product-list{ display:grid; gap:11px; margin-bottom:26px; }
.product-list li{ position:relative; padding-left:22px; color:var(--muted); font-size:15.5px; }
.product-list li::before{ content:""; position:absolute; left:0; top:9px; width:9px; height:9px;
  background:var(--amber); clip-path:polygon(0 0,100% 50%,0 100%); }
.product-link{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-cond); font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  font-size:15.5px; color:var(--ink); padding-top:18px; border-top:1px solid var(--line);
}
.product-link svg{ width:15px; height:15px; transition:transform .2s ease; }
.product-link:hover{ color:var(--amber-700); }
.product-link:hover svg{ transform:translateX(4px); }

/* ============================================================
   STAT COUNTER BAND
   ============================================================ */
.statband{ background:var(--ink-900); color:var(--on-dark); padding:78px 0; position:relative; overflow:hidden; }
.statband::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(80% 120% at 50% 0%, #000, transparent 80%);
  -webkit-mask-image:radial-gradient(80% 120% at 50% 0%, #000, transparent 80%);
}
.statband-grid{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.statband-grid .stat{ text-align:center; padding:8px 20px; border-right:1px solid var(--line-dark); }
.statband-grid .stat:last-child{ border-right:0; }
.statband .stat-num{ color:var(--amber); font-size:clamp(40px,5vw,60px); }
.statband .stat-label{ color:var(--on-dark-mut); }

/* ============================================================
   INNOVATION
   ============================================================ */
.innovation{ background:var(--paper-2); color:var(--text); padding:104px 0; position:relative; overflow:hidden;
  border-top:1px solid var(--line); }
.innov-bg{ position:absolute; inset:0; opacity:.6; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(22,24,29,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22,24,29,.03) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(90% 80% at 50% 0%, #000, transparent 78%);
  -webkit-mask-image:radial-gradient(90% 80% at 50% 0%, #000, transparent 78%); }
.innovation .container{ position:relative; z-index:1; }
.innov-head{ max-width:820px; margin-bottom:50px; }
.innov-intro{ color:var(--muted); font-size:17.5px; margin-top:20px; max-width:70ch; }

/* 3-stage process flow */
.innov-flow{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; gap:16px; margin-bottom:26px; }
.innov-stage{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 26px; display:flex; flex-direction:column; }
.innov-stage-num{ font-family:var(--font-head); font-weight:700; font-size:22px; color:var(--amber-700); line-height:1; }
.innov-stage h4{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.04em;
  font-size:19px; color:var(--ink); margin:12px 0 8px; }
.innov-stage p{ color:var(--muted); font-size:14.5px; flex:1; }
.innov-stage-metric{ display:flex; align-items:baseline; gap:9px; margin-top:18px; padding-top:16px;
  border-top:1px solid var(--line); }
.innov-stage-metric b{ font-family:var(--font-head); font-weight:700; font-size:30px; color:var(--amber-700); line-height:1; }
.innov-stage-metric span{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.08em;
  font-size:13px; color:var(--muted); }
.innov-arrow{ display:grid; place-items:center; color:var(--amber-700); }
.innov-arrow svg{ width:26px; height:26px; }

/* bottom: comparison + stats/cta */
.innov-bottom{ display:grid; grid-template-columns:1.35fr 1fr; gap:44px; align-items:center;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:40px; box-shadow:var(--shadow); }
.innov-compare-head{ display:flex; justify-content:space-between; font-family:var(--font-cond);
  text-transform:uppercase; letter-spacing:.14em; font-size:13px; color:var(--amber-700); margin-bottom:24px; }
.innov-aside{ display:flex; flex-direction:column; gap:26px; }
.innov-stats{ display:flex; gap:30px; flex-wrap:wrap; }
.innov-stat strong{ font-family:var(--font-head); font-weight:700; font-size:42px; color:var(--ink);
  line-height:1; display:block; }
.innov-stat strong .pct{ color:var(--amber-700); font-size:24px; }
.innov-stat span{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.06em;
  font-size:13px; color:var(--muted); }
.innovation-cta{ display:flex; gap:14px; flex-wrap:wrap; }

.eff-row{ margin-bottom:22px; }
.eff-meta{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px; }
.eff-name{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.05em;
  font-size:16px; color:var(--ink); }
.eff-name small{ display:block; text-transform:none; letter-spacing:0; color:var(--muted);
  font-family:var(--font-body); font-size:13px; }
.eff-val{ font-family:var(--font-head); font-weight:700; font-size:26px; }
.eff-val.bad{ color:var(--muted-2); }
.eff-val.good{ color:var(--amber-700); }
.eff-track{ height:14px; border-radius:2px; background:var(--paper-2); overflow:hidden; }
.eff-fill{ height:100%; border-radius:2px; }
.eff-fill.bad{ width:35%; background:var(--steel); }
.eff-fill.good{ width:85%; background:linear-gradient(90deg,var(--amber-600),var(--amber)); }
.eff-legend{ display:flex; gap:18px; flex-wrap:wrap; margin-top:24px; padding-top:22px;
  border-top:1px solid var(--line);
  font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.06em; font-size:13px;
  color:var(--muted); }
.eff-legend .gain{ margin-left:auto; color:var(--amber-700); }

/* ============================================================
   PHOTO / CTA BAND
   ============================================================ */
.band{
  position:relative; padding:130px 0; color:var(--on-dark); overflow:hidden;
  background:#0b0c10 url("assets/chiller-winter.jpg") center/cover no-repeat;
}
.band::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(8,9,12,.95) 0%, rgba(8,9,12,.82) 44%, rgba(8,9,12,.30) 100%),
    radial-gradient(90% 120% at 88% 0%, rgba(246,176,30,.16), transparent 55%);
}
.band-inner{ position:relative; max-width:760px; }
.band-tag{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.2em;
  font-size:14px; color:var(--amber); }
.band-title{ font-family:var(--font-head); font-weight:700; text-transform:uppercase;
  font-size:clamp(32px,5vw,60px); line-height:1.0; letter-spacing:-.01em; color:var(--white); margin-top:14px; }
.band-copy{ margin-top:22px; color:var(--on-dark-mut); font-size:18px; max-width:58ch; }
.band-stats{ display:flex; gap:52px; margin-top:44px; flex-wrap:wrap; }
.band-stat b{ font-family:var(--font-head); font-weight:700; font-size:42px; color:var(--amber); display:block; line-height:1; }
.band-stat span{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.1em;
  font-size:14px; color:var(--on-dark-mut); }

/* ============================================================
   INDUSTRIES
   ============================================================ */
.industries{ background:var(--paper-2); border-top:1px solid var(--line); }
.industry-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.industry-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.industry-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--amber); }
.industry-bg{
  height:190px; background:var(--ink-900); position:relative; overflow:hidden;
  display:grid; place-items:center; color:rgba(246,176,30,.9);
}
.industry-bg::after{
  content:""; position:absolute; inset:0; opacity:.4;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:26px 26px;
}
.industry-art{ width:78%; height:auto; position:relative; z-index:1; color:rgba(255,255,255,.75); }
.industry-card:hover .industry-art{ color:var(--amber); }
.industry-content{ padding:24px 26px 26px; position:relative; }
.industry-content h4{ font-family:var(--font-head); font-weight:600; text-transform:uppercase;
  font-size:21px; color:var(--ink); margin-bottom:7px; }
.industry-content p{ color:var(--muted); font-size:14.5px; }
.industry-arrow{ position:absolute; top:24px; right:26px; font-size:20px; color:var(--amber);
  transition:transform .2s ease; }
.industry-card:hover .industry-arrow{ transform:translate(4px,-4px); }

/* ============================================================
   PROJECTS
   ============================================================ */
.projects{ background:var(--paper); }
.project-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.project-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 34px 32px; position:relative;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.project-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--amber); }
.project-card.feature{ grid-column:1 / -1; display:grid; grid-template-columns:1.05fr 1fr;
  gap:0; padding:0; overflow:hidden; }
.project-photo{ position:relative; min-height:360px; background:var(--ink-900); }
.project-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.project-photo::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 60%, rgba(255,255,255,.04) 100%),
             linear-gradient(0deg, rgba(8,9,12,.25), transparent 40%); }
.project-photo .project-photo-tag{ position:absolute; left:0; bottom:20px; z-index:2;
  background:var(--amber); color:var(--ink-900); padding:8px 16px;
  font-family:var(--font-cond); font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-size:14px; }
.project-feature-body{ padding:40px 42px; display:flex; flex-direction:column; justify-content:center; }
.project-card.feature:hover{ transform:none; }
.project-card.feature:hover .project-photo img{ transform:scale(1.04); }
.project-photo img{ transition:transform .5s ease; }
.project-tag{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.12em;
  font-size:14px; color:var(--amber-700); }
.project-card h3{ font-family:var(--font-head); font-weight:600; text-transform:uppercase;
  font-size:clamp(22px,2.4vw,30px); color:var(--ink); margin:8px 0 14px; line-height:1.08; }
.project-card p{ color:var(--muted); font-size:16px; max-width:70ch; }
.project-stats{ display:flex; gap:44px; margin-top:26px; flex-wrap:wrap;
  padding-top:22px; border-top:1px solid var(--line); }
.project-stats strong{ font-family:var(--font-head); font-weight:700; font-size:32px; color:var(--ink); display:block; line-height:1; }
.project-stats span{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.08em;
  font-size:13px; color:var(--muted); }

/* ============================================================
   TESTIMONIAL
   ============================================================ */
.testimonial-section{ background:var(--ink-900); color:var(--on-dark); }
.testimonial{ max-width:900px; margin:0 auto; text-align:center; position:relative; }
.quote-mark{ width:64px; height:auto; color:var(--amber); margin:0 auto 26px; opacity:.9; }
.testimonial blockquote{
  font-family:var(--font-head); font-weight:500; text-transform:none;
  font-size:clamp(22px,3vw,34px); line-height:1.32; color:var(--white); letter-spacing:.005em;
}
.testimonial figcaption{ margin-top:28px; font-family:var(--font-cond); text-transform:uppercase;
  letter-spacing:.08em; font-size:16px; color:var(--on-dark-mut); }
.testimonial figcaption strong{ color:var(--amber); }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ background:var(--paper); }
.faq-list{ display:grid; max-width:920px; }
.faq-item{ padding:26px 0; border-top:1px solid var(--line); }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-q{ font-family:var(--font-head); font-weight:600; text-transform:uppercase;
  font-size:clamp(18px,2.2vw,22px); color:var(--ink); margin-bottom:10px;
  position:relative; padding-left:36px; line-height:1.15; }
.faq-q::before{ content:"Q"; position:absolute; left:0; top:-1px;
  font-family:var(--font-head); font-weight:700; font-size:24px; color:var(--amber-700); }
.faq-a{ color:var(--muted); font-size:16px; max-width:82ch; padding-left:36px; }

/* ============================================================
   QUOTE / CONTACT
   ============================================================ */
.quote{ background:var(--paper-2); border-top:1px solid var(--line); }
.quote-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:64px; align-items:start; }
.quote-copy p{ color:var(--muted); margin-top:20px; font-size:17px; }
.contact-list{ margin-top:34px; display:grid; gap:8px; }
.contact-list li{ display:flex; gap:16px; align-items:center; padding:16px 0; border-top:1px solid var(--line); }
.contact-list li:last-child{ border-bottom:1px solid var(--line); }
.contact-icon{ width:44px; height:44px; flex:0 0 44px; background:var(--ink-900); color:var(--amber);
  border-radius:var(--radius); display:grid; place-items:center; }
.contact-icon svg{ width:19px; height:19px; }
.contact-list .c-label{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.14em;
  font-size:12.5px; color:var(--muted-2); display:block; }
.contact-list strong{ font-size:17px; color:var(--ink); font-weight:600; }

.quote-form{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:38px 36px; box-shadow:var(--shadow);
}
.quote-form .form-head{ font-family:var(--font-head); font-weight:600; text-transform:uppercase;
  font-size:24px; color:var(--ink); margin-bottom:24px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.quote-form label{ display:block; margin-bottom:18px; }
.quote-form label > span{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.1em;
  font-size:13px; color:var(--muted); display:block; margin-bottom:7px; }
.quote-form input, .quote-form select, .quote-form textarea{
  width:100%; padding:13px 15px; font-family:var(--font-body); font-size:15.5px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .2s ease, background .2s ease;
}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus{
  outline:none; border-color:var(--amber); background:var(--white);
  box-shadow:0 0 0 3px var(--amber-soft);
}
.quote-form textarea{ resize:vertical; }
.form-foot{ text-align:center; margin-top:14px; font-size:14px; color:var(--muted-2);
  font-family:var(--font-cond); letter-spacing:.06em; text-transform:uppercase; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--ink-900); color:var(--on-dark-mut); padding:74px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr; gap:40px; }
.footer-wordmark{ font-family:var(--font-head); font-weight:700; text-transform:uppercase;
  font-size:24px; letter-spacing:.01em; color:var(--white); margin-bottom:16px; line-height:1; }
.footer-wordmark span{ color:var(--amber); }
.footer-brand p{ font-size:15px; max-width:34ch; }
.footer-col h5{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.12em;
  font-size:15px; color:var(--white); margin-bottom:16px; }
.footer-col a{ display:block; padding:6px 0; font-size:15px; color:var(--on-dark-mut); }
.footer-col a:hover{ color:var(--amber); }
.footer-emergency{ font-family:var(--font-head); font-weight:600; font-size:22px; color:var(--amber)!important; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center;
  margin-top:56px; padding:24px 0; border-top:1px solid var(--line-dark);
  font-family:var(--font-cond); letter-spacing:.05em; font-size:14px; text-transform:uppercase; }

/* ============================================================
   REVEAL + TOAST
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink-900); color:var(--white); border-left:3px solid var(--amber);
  padding:16px 22px; border-radius:var(--radius); box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:12px; opacity:0; pointer-events:none;
  transition:.3s ease; z-index:200; font-size:15px;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast svg{ width:18px; height:18px; color:var(--amber); }
.toast.toast-error{ border-left-color:#e5484d; }
.toast.toast-error svg{ color:#e5484d; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .hero{ padding:120px 0 100px; }
  .about-grid, .quote-grid{ grid-template-columns:1fr; gap:48px; }
  .innov-bottom{ grid-template-columns:1fr; gap:32px; }
  .product-grid, .industry-grid{ grid-template-columns:repeat(2,1fr); }
  .exp-badge{ right:16px; bottom:-22px; }
}
@media (max-width:760px){
  .topbar-left span:nth-child(3){ display:none; }
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-cta .nav-phone span{ display:none; }
  .nav-links[style]{ display:flex!important; position:absolute; top:80px; right:16px; left:16px;
    flex-direction:column; gap:6px; background:var(--white); padding:16px;
    border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
  .hero{ padding:78px 0 68px; }
  .innov-flow{ grid-template-columns:1fr; gap:14px; }
  .innov-arrow{ transform:rotate(90deg); }
  .innov-bottom{ padding:26px; }
  .about-hero-card{ max-width:none; padding:64px 0; }
  .about-hero-scrim{ background:linear-gradient(0deg, rgba(8,9,12,.94) 0%, rgba(8,9,12,.72) 60%, rgba(8,9,12,.6) 100%); }
  .section{ padding:72px 0; }
  .product-grid, .industry-grid, .project-grid,
  .statband-grid, .form-row{ grid-template-columns:1fr; }
  .statband-grid .stat{ border-right:0; border-bottom:1px solid var(--line-dark); padding:22px 0; }
  .project-card.feature{ grid-column:auto; grid-template-columns:1fr; }
  .project-photo{ min-height:230px; }
  .project-feature-body{ padding:30px 26px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-bottom{ flex-direction:column; gap:10px; text-align:center; }
  .band-stats{ gap:32px; }
}
@media (prefers-reduced-motion:reduce){
  .logo-track{ animation:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   INNER PAGE — shared breadcrumb + nav phone
   ============================================================ */
.nav-phone{ color:var(--ink); }
.breadcrumb, .cfg-breadcrumb, .case-breadcrumb{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.1em;
  font-size:13.5px; color:var(--muted-2); margin-bottom:26px;
}
.cfg-breadcrumb a, .case-breadcrumb a{ color:var(--muted); }
.cfg-breadcrumb a:hover, .case-breadcrumb a:hover{ color:var(--amber-700); }
.cfg-breadcrumb .sep, .case-breadcrumb .sep{ color:var(--line); }
.cfg-breadcrumb .current, .case-breadcrumb .current{ color:var(--ink); }

/* ============================================================
   CASE STUDY PAGE (innovation.html)
   ============================================================ */
.case-page{ background:var(--paper); padding:60px 0 0; }
.case-hero{ max-width:820px; margin:0 auto; padding:24px 0 56px; border-bottom:1px solid var(--line); text-align:center; }
.case-hero .case-breadcrumb{ justify-content:center; }
.case-hero .case-deck{ margin-left:auto; margin-right:auto; }
.case-tag{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--font-cond); font-weight:600; text-transform:uppercase; letter-spacing:.16em;
  font-size:14px; color:var(--amber-700); margin-bottom:22px;
}
.case-tag-dot{ width:9px; height:9px; border-radius:50%; background:var(--amber); }
.case-title{
  font-family:var(--font-head); font-weight:700; text-transform:uppercase;
  font-size:clamp(38px,6vw,68px); line-height:.98; letter-spacing:-.012em; color:var(--ink);
}
.innovation-plus{ color:var(--amber); }
.innovation-grad, .title-grad{ color:var(--amber-700); }
.case-deck{ margin-top:24px; font-size:20px; color:var(--muted); max-width:64ch; }
.case-hero-stats{ display:flex; flex-wrap:wrap; gap:44px; margin-top:40px; justify-content:center; }
.case-hero-stat strong{
  font-family:var(--font-head); font-weight:700; font-size:44px; color:var(--ink); display:block; line-height:1;
}
.case-hero-stat span{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.08em;
  font-size:13.5px; color:var(--muted); }

.case-section{ max-width:820px; margin:0 auto; padding:56px 0; border-bottom:1px solid var(--line); }
.case-section-num{
  font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.16em;
  font-size:14px; color:var(--amber-700); display:block; margin-bottom:16px;
}
.case-section h2{
  font-family:var(--font-head); font-weight:600; text-transform:uppercase;
  font-size:clamp(26px,3.4vw,40px); line-height:1.06; letter-spacing:-.006em; color:var(--ink); margin-bottom:22px;
}
.case-section p{ color:var(--muted); font-size:17.5px; margin-bottom:18px; }
.case-section p strong{ color:var(--ink); font-weight:600; }
.case-section p em{ color:var(--amber-700); font-style:normal; font-weight:600; }
.case-section ul{ display:grid; gap:12px; margin:8px 0 6px; }
.case-section li{ position:relative; padding-left:26px; color:var(--muted); font-size:17px; }
.case-section li::before{ content:""; position:absolute; left:0; top:10px; width:10px; height:10px;
  background:var(--amber); clip-path:polygon(0 0,100% 50%,0 100%); }
.case-section li strong{ color:var(--ink); font-weight:600; }

.case-callout{
  margin-top:30px; background:var(--ink-900); color:var(--on-dark);
  border-left:4px solid var(--amber); border-radius:var(--radius); padding:28px 30px;
}
.case-callout-label{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.16em;
  font-size:13px; color:var(--amber); margin-bottom:12px; }
.case-callout-text{ font-size:17px; color:var(--on-dark); line-height:1.6; }

.case-table{ width:100%; border-collapse:collapse; margin-top:24px; font-size:16px; }
.case-table th, .case-table td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); }
.case-table thead th{
  font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.08em;
  font-size:14px; color:var(--ink); background:var(--paper-2);
}
.case-table thead th:last-child{ color:var(--amber-700); }
.case-table td{ color:var(--muted); }
.case-table td:first-child{ color:var(--ink); font-weight:500; }
.case-table td:last-child{ color:var(--ink); font-weight:600; }
.case-table td.bad{ color:var(--muted-2); font-weight:400; }
.case-table tbody tr:hover{ background:var(--paper-2); }

.case-cta{
  max-width:820px; margin:0 auto; text-align:center; padding:72px 0 90px;
}
.case-cta h3{ font-family:var(--font-head); font-weight:700; text-transform:uppercase;
  font-size:clamp(28px,4vw,44px); color:var(--ink); margin-bottom:16px; letter-spacing:-.008em; }
.case-cta p{ color:var(--muted); font-size:18px; max-width:56ch; margin:0 auto 30px; }
.footer-legal{ display:flex; gap:20px; }
.footer-legal a{ color:var(--on-dark-mut); }
.footer-legal a:hover{ color:var(--amber); }

/* ============================================================
   CONFIGURATOR PAGE (configure.html)
   ============================================================ */
.cfg-page{ background:var(--paper); padding:56px 0 80px; }
.cfg-header{ max-width:900px; margin-bottom:40px; }
.cfg-title{
  font-family:var(--font-head); font-weight:700; text-transform:uppercase;
  font-size:clamp(36px,5.4vw,60px); line-height:.98; letter-spacing:-.012em; color:var(--ink);
}
.cfg-subtitle{ margin-top:18px; font-size:18px; color:var(--muted); max-width:70ch; }

.cfg-disclaimer{
  display:flex; gap:16px; align-items:flex-start; margin-top:28px;
  background:var(--amber-soft); border:1px solid rgba(246,176,30,.4); border-left:4px solid var(--amber);
  border-radius:var(--radius); padding:18px 22px;
}
.cfg-disclaimer-icon{
  flex:0 0 26px; width:26px; height:26px; border-radius:50%; background:var(--amber); color:var(--ink-900);
  display:grid; place-items:center; font-family:var(--font-head); font-weight:700; font-size:17px;
}
.cfg-disclaimer-body{ font-size:15px; color:var(--text); line-height:1.55; }
.cfg-disclaimer-body strong{ color:var(--ink); display:block; margin-bottom:3px;
  font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.04em; font-size:15.5px; }

.cfg-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:32px; align-items:start; }

/* ----- control panel ----- */
.cfg-panel{ display:grid; gap:20px; }
.cfg-step{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 28px;
}
.cfg-step-head{ display:flex; align-items:center; gap:14px; margin-bottom:20px; flex-wrap:wrap; }
.cfg-step-num{
  font-family:var(--font-head); font-weight:700; font-size:20px; color:var(--ink-900);
  background:var(--amber); border-radius:var(--radius); width:38px; height:38px; display:grid; place-items:center;
}
.cfg-step-head h3{ font-family:var(--font-head); font-weight:600; text-transform:uppercase;
  font-size:22px; color:var(--ink); }
.cfg-step-hint{ flex-basis:100%; font-size:14px; color:var(--muted-2); }

/* slider */
.cfg-slider-wrap{ display:grid; gap:14px; }
.cfg-slider-row{ display:flex; align-items:baseline; justify-content:space-between; }
.cfg-slider-value{ font-family:var(--font-head); font-weight:700; font-size:38px; color:var(--ink); }
.cfg-slider-unit{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.08em;
  font-size:16px; color:var(--amber-700); margin-left:6px; }
.cfg-slider-range{ font-family:var(--font-mono); font-size:13px; color:var(--muted-2); }
.cfg-slider{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:3px;
  background:var(--paper-2); outline:none; }
.cfg-slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:22px; height:22px;
  border-radius:50%; background:var(--amber); border:3px solid var(--white);
  box-shadow:0 2px 8px rgba(0,0,0,.25); cursor:pointer; }
.cfg-slider::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:var(--amber);
  border:3px solid var(--white); box-shadow:0 2px 8px rgba(0,0,0,.25); cursor:pointer; }
.cfg-slider-marks{ display:flex; justify-content:space-between;
  font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.05em;
  font-size:12px; color:var(--muted-2); }

/* option buttons */
.cfg-options{ display:flex; flex-wrap:wrap; gap:10px; }
.cfg-option{
  flex:1 1 auto; min-width:104px; display:flex; flex-direction:column; gap:2px; align-items:flex-start;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:13px 15px; text-align:left; transition:.18s ease;
}
.cfg-option > span:first-child{ font-family:var(--font-head); font-weight:600; font-size:18px; color:var(--ink); }
.cfg-option-sub{ font-size:12.5px; color:var(--muted-2); }
.cfg-option:hover{ border-color:var(--amber); }
.cfg-option.active{ background:var(--ink-900); border-color:var(--ink-900); }
.cfg-option.active > span:first-child{ color:var(--amber); }
.cfg-option.active .cfg-option-sub{ color:var(--on-dark-mut); }

/* select + note */
.cfg-select{
  width:100%; padding:14px 16px; font-family:var(--font-body); font-size:15.5px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); cursor:pointer;
}
.cfg-select:focus{ outline:none; border-color:var(--amber); box-shadow:0 0 0 3px var(--amber-soft); }
.cfg-tier-note{ margin-top:12px; font-size:14px; color:var(--muted); padding:12px 14px;
  background:var(--paper); border-left:3px solid var(--amber); border-radius:var(--radius); }
.cfg-tier-note strong{ color:var(--ink); }

/* ----- summary (sticky dark card) ----- */
.cfg-summary{
  position:sticky; top:100px; background:var(--ink-900); color:var(--on-dark);
  border-radius:var(--radius); padding:28px 26px; box-shadow:var(--shadow); overflow:hidden;
}
.cfg-summary-head{
  display:flex; align-items:center; gap:10px; font-family:var(--font-cond);
  text-transform:uppercase; letter-spacing:.16em; font-size:13.5px; color:var(--amber); margin-bottom:22px;
}
.status-dot{ width:9px; height:9px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 0 0 rgba(246,176,30,.7); animation:pulse 2s infinite; }

.cfg-load-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:22px; }
.cfg-load-card{ background:rgba(255,255,255,.04); border:1px solid var(--line-dark);
  border-radius:var(--radius); padding:14px 16px; }
.cfg-load-label{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.1em;
  font-size:11.5px; color:var(--on-dark-mut); display:block; margin-bottom:5px; }
.cfg-load-val{ font-family:var(--font-head); font-weight:700; font-size:24px; color:var(--white); }

.cfg-equip{ display:grid; gap:18px; margin-bottom:22px; }
.cfg-equip-section{ }
.cfg-equip-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.cfg-equip-tag{ width:24px; height:24px; flex:0 0 24px; background:var(--amber); color:var(--ink-900);
  border-radius:3px; display:grid; place-items:center; font-family:var(--font-head); font-weight:700; font-size:14px; }
.cfg-equip-head h4{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.06em;
  font-size:16px; color:var(--white); }
.cfg-equip-list{ display:grid; gap:8px; }
.cfg-equip-row{ display:grid; grid-template-columns:1fr auto; gap:4px 12px;
  padding:11px 14px; background:rgba(255,255,255,.03); border:1px solid var(--line-dark); border-radius:var(--radius); }
.cfg-equip-row-name{ font-size:14.5px; color:var(--white); font-weight:500; }
.cfg-equip-row-qty{ font-family:var(--font-head); font-weight:700; font-size:15px; color:var(--amber); text-align:right; }
.cfg-equip-row-detail{ grid-column:1 / -1; font-family:var(--font-mono); font-size:12.5px; color:var(--on-dark-mut); }

.cfg-arch-pill{ background:var(--amber-soft); border:1px solid rgba(246,176,30,.35);
  border-radius:var(--radius); padding:12px 16px; margin-bottom:16px; }
.cfg-arch-title{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.06em;
  font-size:15px; color:var(--amber); }
.cfg-arch-sub{ font-size:13px; color:var(--on-dark-mut); }

.cfg-price-block{ border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);
  padding:22px 0; margin-bottom:20px; }
.cfg-price-label{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.14em;
  font-size:12.5px; color:var(--on-dark-mut); margin-bottom:6px; }
.cfg-price-value{ font-family:var(--font-head); font-weight:700; font-size:52px; color:var(--amber); line-height:1; }
.cfg-price-foot{ display:flex; justify-content:space-between; margin-top:10px;
  font-family:var(--font-mono); font-size:12.5px; color:var(--on-dark-mut); }

.cfg-meta{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:22px; }
.cfg-meta-card{ background:rgba(255,255,255,.04); border:1px solid var(--line-dark);
  border-radius:var(--radius); padding:14px 16px; }
.cfg-meta-card span{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.1em;
  font-size:11.5px; color:var(--on-dark-mut); display:block; margin-bottom:5px; }
.cfg-meta-card strong{ font-family:var(--font-head); font-weight:700; font-size:22px; color:var(--white); }

.cfg-actions{ display:grid; gap:10px; }
.cfg-actions .btn-ghost{ color:var(--on-dark); border-color:var(--line-dark); }
.cfg-actions .btn-ghost:hover{ background:var(--white); color:var(--ink); border-color:var(--white); }

/* ----- modal ----- */
.cfg-modal{ position:fixed; inset:0; z-index:300; display:none; place-items:center;
  background:rgba(8,9,12,.7); backdrop-filter:blur(6px); padding:24px; }
.cfg-modal.show{ display:grid; }
.cfg-modal-box{ position:relative; width:100%; max-width:460px; background:var(--white);
  border-radius:var(--radius); padding:38px 36px; box-shadow:var(--shadow-lg); }
.cfg-modal-close{ position:absolute; top:16px; right:16px; background:none; border:0; color:var(--muted);
  padding:6px; }
.cfg-modal-close:hover{ color:var(--ink); }
.cfg-modal-box h3{ font-family:var(--font-head); font-weight:600; text-transform:uppercase;
  font-size:24px; color:var(--ink); margin-bottom:12px; }
.cfg-modal-box p{ color:var(--muted); font-size:15.5px; margin-bottom:22px; }
.cfg-modal-box label{ display:block; margin-bottom:16px; }
.cfg-modal-box label > span{ font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.1em;
  font-size:12.5px; color:var(--muted); display:block; margin-bottom:6px; }
.cfg-modal-box input, .cfg-modal-box textarea{
  width:100%; padding:12px 14px; font-family:var(--font-body); font-size:15px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); }
.cfg-modal-box input:focus, .cfg-modal-box textarea:focus{ outline:none; border-color:var(--amber);
  box-shadow:0 0 0 3px var(--amber-soft); }

@media (max-width:960px){
  .cfg-grid{ grid-template-columns:1fr; }
  .cfg-summary{ position:static; }
}
@media (max-width:760px){
  .case-hero-stats{ gap:28px; }
  .cfg-load-grid, .cfg-meta{ grid-template-columns:1fr 1fr; }
  .case-table{ font-size:14px; }
  .case-table th, .case-table td{ padding:11px 10px; }
}