/* ============================================================
   ERAM Group — Corporate site stylesheet
   Version 1.0 · 17 May 2026
   Industrial-Technical design language
   Anchor-only ERAM red (#C8102E) · Neutrals dominant
   Inter (geometric sans) + JetBrains Mono for codes
   ============================================================ */

/* === Design tokens ============================================ */
:root{
  /* Brand */
  --eram-red:#C8102E;
  --eram-red-50:#FDF2F4;
  --eram-red-100:#FBE0E5;
  --eram-red-200:#F5BFC8;
  --eram-red-500:#C8102E;
  --eram-red-700:#A50D26;
  --eram-red-800:#82091F;
  --eram-red-900:#5E0617;

  /* Neutrals */
  --n-0:#FFFFFF;
  --n-50:#F7F8FA;
  --n-100:#EEF0F3;
  --n-150:#E5E8ED;
  --n-200:#DDE1E7;
  --n-300:#C2C8D1;
  --n-400:#98A0AC;
  --n-500:#666D78;
  --n-600:#4F5762;
  --n-700:#353B45;
  --n-800:#1F242C;
  --n-900:#0E1116;

  /* Semantic */
  --success:#15803D; --success-50:#ECFDF3; --success-100:#D1FAE0;
  --warning:#B45309; --warning-50:#FFF7ED;
  --info:#1D4ED8; --info-50:#EFF6FF;

  /* Typography */
  --font-sans:'Inter','Söhne','Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono','Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* Radius */
  --r-sm:4px;
  --r-md:6px;
  --r-lg:8px;
  --r-xl:12px;

  /* Layout */
  --container:1200px;
  --container-narrow:880px;

  /* Focus ring */
  --ring:0 0 0 3px rgba(200,16,46,.18);
}

/* === Reset & base ============================================ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  color:var(--n-700);
  background:var(--n-0);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'cv02','cv03','cv11','ss01';
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
img,svg,video{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:none; background:none}
input,textarea,select{font-family:inherit}
ul,ol{list-style:none}

/* Accessibility — skip link */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--eram-red);
  color:var(--n-0);
  padding:12px 20px;
  font-size:14px;
  font-weight:500;
  z-index:1000;
}
.skip-link:focus{left:0}

/* Focus states */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:none;
  box-shadow:var(--ring);
  border-radius:var(--r-sm);
}

/* === Typography =============================================== */
h1,h2,h3,h4,h5,h6{
  color:var(--n-900);
  font-weight:600;
  letter-spacing:-0.015em;
  line-height:1.15;
}
h1{font-size:48px; margin-bottom:20px}
h2{font-size:36px; margin-bottom:16px}
h3{font-size:24px; margin-bottom:12px}
h4{font-size:18px; margin-bottom:8px; font-weight:500}
h5{font-size:14px; margin-bottom:6px; font-weight:500}
p{margin-bottom:0}

.h1-display{font-size:60px; line-height:1.05; letter-spacing:-0.025em; margin-bottom:24px}

.eyebrow{
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--eram-red);
  margin-bottom:12px;
}
.eyebrow-light{color:var(--n-400)}

.lede{
  font-size:18px;
  line-height:1.55;
  color:var(--n-600);
  max-width:680px;
  margin-bottom:32px;
}
.section-dark .lede{color:var(--n-300)}
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4{color:var(--n-0)}

.mono{font-family:var(--font-mono); font-size:0.9em; letter-spacing:0}

/* === Container & layout ====================================== */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}
.container-narrow{max-width:var(--container-narrow)}

.section{padding:80px 0}
.section-tight{padding:48px 0}
.section-dark{background:var(--n-900); color:var(--n-100)}
.section-mid{background:var(--n-50)}

.row{display:grid; gap:24px}
.r-2{grid-template-columns:1fr 1fr}
.r-3{grid-template-columns:repeat(3,1fr)}
.r-4{grid-template-columns:repeat(4,1fr)}
.r-2-1{grid-template-columns:2fr 1fr}
.r-1-2{grid-template-columns:1fr 2fr}

.two-col{display:grid; grid-template-columns:280px 1fr; gap:64px}
.two-col-r{display:grid; grid-template-columns:1fr 320px; gap:48px}

/* === Buttons ================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:inherit;
  font-weight:500;
  font-size:14px;
  padding:0 20px;
  height:44px;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  transition:all .12s;
}
.btn-primary{background:var(--eram-red); color:var(--n-0); border-color:var(--eram-red)}
.btn-primary:hover{background:var(--eram-red-700); border-color:var(--eram-red-700); color:var(--n-0)}
.btn-secondary{background:var(--n-0); color:var(--n-900); border-color:var(--n-300)}
.btn-secondary:hover{border-color:var(--n-900)}
.section-dark .btn-secondary{background:transparent; color:var(--n-0); border-color:var(--n-500)}
.section-dark .btn-secondary:hover{border-color:var(--n-0)}
.btn-tertiary{background:transparent; color:var(--n-700); border-color:transparent; padding:0 8px}
.btn-tertiary:hover{color:var(--eram-red)}
.btn-arrow::after{content:'→'; font-size:16px; margin-left:4px}
.btn-lg{height:52px; font-size:15px; padding:0 24px}
.btn-block{width:100%}

/* === Tags & pills ============================================ */
.tag{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  font-size:11px;
  background:var(--n-100);
  color:var(--n-700);
  border:1px solid var(--n-200);
  border-radius:var(--r-sm);
  font-weight:500;
  letter-spacing:.02em;
}
.tag-success{background:var(--success-50); color:var(--success); border-color:var(--success-100)}
.tag-warning{background:var(--warning-50); color:var(--warning)}
.tag-red{background:var(--eram-red-50); color:var(--eram-red-800); border-color:var(--eram-red-100)}

.cert-pill{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.04em;
  padding:5px 10px;
  border:1px solid var(--n-300);
  border-radius:var(--r-sm);
  color:var(--n-700);
  background:var(--n-0);
}

/* === Site chrome — preview bar (removed in production) ======== */

/* === Site chrome — utility nav =============================== */
.utility-nav{
  background:var(--n-900);
  color:var(--n-100);
  padding:0 24px;
  height:36px;
  display:flex;
  align-items:center;
  gap:20px;
  font-size:12px;
}
.utility-nav a{color:var(--n-300); transition:color .12s}
.utility-nav a:hover{color:var(--n-0)}
.utility-nav .right{margin-left:auto; display:flex; gap:16px; align-items:center}
.utility-nav .lang{display:inline-flex; gap:0; align-items:center}
.utility-nav .lang a{padding:0 6px; color:var(--n-500); font-weight:400}
.utility-nav .lang a.active{color:var(--n-0); font-weight:500}
.utility-nav .lang .sep{color:var(--n-600); padding:0 2px}

.shop-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--eram-red) !important;
  color:var(--n-0) !important;
  padding:0 14px;
  height:36px;
  font-weight:500;
  font-size:13px;
  transition:background .12s;
}
.shop-link:hover{background:var(--eram-red-700) !important; color:var(--n-0) !important}
.shop-link svg{width:14px; height:14px}

/* === Site chrome — main nav ================================== */
.main-nav{
  background:var(--n-0);
  border-bottom:1px solid var(--n-200);
  padding:0 24px;
  height:72px;
  display:flex;
  align-items:center;
  gap:32px;
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:0 1px 0 rgba(0,0,0,0.02);
}
.brand{
  display:flex;
  align-items:center;
  font-weight:700;
  font-size:26px;
  color:var(--eram-red);
  letter-spacing:-0.02em;
  line-height:1;
}
.brand img{height:36px; width:auto}
.brand .wordmark{display:flex; flex-direction:column; gap:2px}
.brand .wordmark .sub{
  font-size:10px;
  letter-spacing:.18em;
  color:var(--n-500);
  font-weight:600;
}
.main-nav .nav-primary{display:flex; gap:24px; flex:1}
.main-nav .nav-primary a{
  font-size:14px;
  color:var(--n-700);
  font-weight:500;
  padding:6px 0;
  position:relative;
  transition:color .12s;
}
.main-nav .nav-primary a:hover{color:var(--eram-red)}
.main-nav .nav-primary a[aria-current="page"]{color:var(--eram-red)}
.main-nav .nav-primary a[aria-current="page"]::after{
  content:'';
  position:absolute;
  bottom:-26px;
  left:0;
  right:0;
  height:2px;
  background:var(--eram-red);
}
.main-nav .nav-actions{display:flex; gap:8px; align-items:center}

.search-trigger{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border:1px solid var(--n-200);
  border-radius:var(--r-sm);
  color:var(--n-500);
  font-size:13px;
  cursor:pointer;
  background:var(--n-50);
  min-width:240px;
}
.search-trigger:hover{border-color:var(--n-300)}

.mobile-toggle{display:none}

/* === Hero ===================================================== */
.hero{position:relative; padding:96px 0 64px; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:center}
.hero h1{font-size:60px; line-height:1.05; letter-spacing:-0.025em; margin-bottom:24px}
.hero .hero-supp{font-size:20px; line-height:1.5; color:var(--n-600); margin-bottom:32px; max-width:560px}
.hero-actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap}

.hero-photo{
  background:var(--n-900);
  aspect-ratio:5/6;
  border-radius:var(--r-md);
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
}
.hero-photo::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, #1f242c 0%, #0E1116 100%);
}
.hero-photo::after{
  content:'';
  position:absolute;
  right:-40%;
  top:-20%;
  width:120%;
  height:120%;
  background:radial-gradient(ellipse at center, rgba(200,16,46,0.35), transparent 60%);
}
.photo-meta{
  position:relative;
  padding:24px;
  color:var(--n-300);
  font-size:12px;
  z-index:1;
  width:100%;
  border-top:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.3);
  backdrop-filter:blur(4px);
}
.photo-meta strong{color:var(--n-0); font-weight:500; display:block; margin-bottom:4px}

.photo-pin{
  position:absolute;
  top:24px;
  left:24px;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  color:var(--n-0);
  padding:4px 10px;
  border-radius:var(--r-sm);
  font-size:11px;
  font-family:var(--font-mono);
  letter-spacing:0;
}
.photo-placeholder-icon{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:rgba(255,255,255,.06);
}

/* === Credentials strip ======================================= */
.credentials{
  padding:32px 0;
  border-top:1px solid var(--n-200);
  border-bottom:1px solid var(--n-200);
  background:var(--n-50);
}
.cred-row{display:flex; align-items:center; gap:48px; justify-content:space-between; flex-wrap:wrap}
.cred-label{
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--n-500);
  white-space:nowrap;
}
.cred-marks{display:flex; gap:36px; align-items:center; flex-wrap:wrap}
.cred-mark{
  font-family:var(--font-sans);
  font-weight:700;
  font-size:18px;
  color:var(--n-500);
  letter-spacing:-0.01em;
}
.cred-mark.featured{color:var(--n-900)}
.cred-certs{display:flex; gap:12px; align-items:center; flex-wrap:wrap}

/* === Sector grid ============================================== */
.sector-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--n-200);
  border:1px solid var(--n-200);
  border-radius:var(--r-md);
  overflow:hidden;
}
.sector-grid-3{grid-template-columns:repeat(3,1fr)}
.sector-tile{
  background:var(--n-0);
  padding:32px 24px;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:220px;
  cursor:pointer;
  transition:background .12s;
  position:relative;
  text-decoration:none;
  color:inherit;
}
.sector-tile:hover{background:var(--n-50)}
.sector-tile .icon{color:var(--eram-red); width:32px; height:32px}
.sector-tile .code{font-family:var(--font-mono); font-size:11px; color:var(--n-500); letter-spacing:.04em}
.sector-tile h3,.sector-tile h4{font-size:17px; color:var(--n-900); margin:0}
.sector-tile p{font-size:13px; color:var(--n-600); line-height:1.5; margin-bottom:auto}
.sector-tile .skus{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--n-400);
  padding-top:12px;
  border-top:1px solid var(--n-150);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.sector-tile .skus .arrow{font-size:14px; color:var(--n-500); transition:.12s}
.sector-tile:hover .arrow{color:var(--eram-red); transform:translateX(2px)}

/* === Stat strip ============================================== */
.stat-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
  padding:48px 0;
  border-top:1px solid var(--n-700);
  border-bottom:1px solid var(--n-700);
}
.stat-strip .stat{display:flex; flex-direction:column; gap:4px}
.stat-num{
  font-family:var(--font-mono);
  font-size:44px;
  font-weight:500;
  color:var(--n-0);
  letter-spacing:-0.02em;
  line-height:1;
}
.stat-lbl{font-size:13px; color:var(--n-400); margin-top:8px}

.stat-card{
  background:var(--n-0);
  border:1px solid var(--n-200);
  border-radius:var(--r-md);
  padding:24px;
}
.stat-card .num{
  font-family:var(--font-mono);
  font-size:36px;
  font-weight:500;
  color:var(--n-900);
  letter-spacing:-0.02em;
}
.stat-card .lbl{font-size:13px; color:var(--n-500); margin-top:6px}
.stat-card.dark{background:var(--n-900); color:var(--n-0); border:none}
.stat-card.dark .num{color:var(--n-0)}
.stat-card.dark .lbl{color:var(--n-400)}

/* === News card ============================================== */
.news-card{display:flex; flex-direction:column; gap:8px}
.news-photo{
  aspect-ratio:16/10;
  background:var(--n-100);
  border-radius:var(--r-md);
  border:1px solid var(--n-200);
  position:relative;
  overflow:hidden;
}
.news-photo::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, var(--n-200), var(--n-100));
}
.news-photo .photo-pin{
  top:12px;
  left:12px;
  background:rgba(255,255,255,.85);
  border-color:var(--n-200);
  color:var(--n-700);
  z-index:1;
}
.news-card .meta{
  display:flex;
  gap:8px;
  font-size:11px;
  color:var(--n-500);
  font-family:var(--font-mono);
  margin-top:8px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.news-card h3,.news-card h4{font-size:18px; line-height:1.3; color:var(--n-900); margin-bottom:6px}
.news-card p{font-size:14px; color:var(--n-600); line-height:1.5}
.news-card a:hover h3,.news-card a:hover h4{color:var(--eram-red)}

/* === Brand mini-card ======================================== */
.brand-card{
  background:var(--n-0);
  border:1px solid var(--n-200);
  border-radius:var(--r-md);
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:8px;
  cursor:pointer;
  transition:.12s;
  text-decoration:none;
  color:inherit;
}
.brand-card:hover{border-color:var(--n-900)}
.brand-mark{
  font-family:var(--font-sans);
  font-weight:700;
  font-size:24px;
  color:var(--n-900);
  letter-spacing:-0.02em;
  margin-bottom:8px;
}
.brand-card .pill{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  font-size:11px;
  background:var(--eram-red-50);
  color:var(--eram-red-800);
  border:1px solid var(--eram-red-100);
  border-radius:var(--r-sm);
  width:max-content;
  font-weight:500;
  letter-spacing:.02em;
}
.brand-card .pill.exclusive{background:var(--n-900); color:var(--n-0); border-color:var(--n-900)}
.brand-card p{font-size:13px; color:var(--n-600); line-height:1.5}
.brand-card .role{
  font-size:11px;
  color:var(--n-500);
  font-family:var(--font-mono);
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* === Leadership card ========================================= */
.leader{display:flex; flex-direction:column; gap:12px}
.leader-photo{
  aspect-ratio:1/1;
  background:var(--n-100);
  border-radius:var(--r-md);
  position:relative;
  overflow:hidden;
  border:1px solid var(--n-200);
}
.leader-photo::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, var(--n-200), var(--n-150));
}
.leader-photo .photo-pin{
  top:12px;
  left:12px;
  background:rgba(255,255,255,.85);
  border-color:var(--n-200);
  color:var(--n-700);
  z-index:1;
  font-size:10px;
}
.leader h3,.leader h4{font-size:16px; margin:0}
.leader .role{font-size:13px; color:var(--n-500); margin-bottom:4px}
.leader .bio{font-size:13px; color:var(--n-600); line-height:1.5}

/* === Location card =========================================== */
.loc-card{
  background:var(--n-0);
  border:1px solid var(--n-200);
  border-radius:var(--r-md);
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.loc-card .role{
  display:inline-flex;
  padding:3px 8px;
  font-size:10px;
  background:var(--n-100);
  border:1px solid var(--n-200);
  border-radius:var(--r-sm);
  color:var(--n-700);
  font-family:var(--font-mono);
  width:max-content;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.loc-card .role.apis{background:var(--eram-red-50); border-color:var(--eram-red-100); color:var(--eram-red-800)}
.loc-card h3,.loc-card h4{font-size:16px; margin:0}
.loc-card .addr{font-size:13px; color:var(--n-600); line-height:1.5}
.loc-card .hours{
  font-size:12px;
  color:var(--n-500);
  font-family:var(--font-mono);
  padding-top:8px;
  border-top:1px solid var(--n-150);
  margin-top:8px;
}

/* === Sustainability pillar =================================== */
.pillar{
  padding:24px;
  border:1px solid var(--n-200);
  border-radius:var(--r-md);
  background:var(--n-0);
}
.pillar-tag{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--eram-red);
  margin-bottom:8px;
  letter-spacing:.04em;
}
.pillar h3,.pillar h4{font-size:18px; margin:0 0 8px}
.pillar p{font-size:14px; color:var(--n-600); line-height:1.6; margin-bottom:0}
.pillar ul{margin:12px 0 0 18px; font-size:13px; color:var(--n-700); list-style:disc}
.pillar ul li{margin-bottom:4px}

/* === Generic card ============================================ */
.legal-card{
  background:var(--n-0);
  border:1px solid var(--n-200);
  border-radius:var(--r-md);
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:8px;
  text-decoration:none;
  color:inherit;
  transition:border-color .12s;
}
.legal-card:hover{border-color:var(--n-400)}
.legal-card h3,.legal-card h4{font-size:16px; margin:0}
.legal-card p{font-size:13px; color:var(--n-500); margin-bottom:8px}
.legal-card .link{font-size:13px; color:var(--eram-red); font-weight:500; margin-top:auto}

/* === Page header ============================================ */
.page-header{
  padding:64px 0 48px;
  background:var(--n-50);
  border-bottom:1px solid var(--n-200);
}
.crumbs{
  display:flex;
  gap:6px;
  font-size:12px;
  color:var(--n-500);
  margin-bottom:20px;
  font-family:var(--font-mono);
  flex-wrap:wrap;
}
.crumbs a{color:var(--n-500); transition:color .12s}
.crumbs a:hover{color:var(--eram-red)}
.crumbs .sep{color:var(--n-300)}
.crumbs .here{color:var(--n-700); font-weight:500}

.page-header-dark{
  background:var(--n-900);
  color:var(--n-100);
  border-bottom-color:var(--n-700);
}
.page-header-dark .crumbs, .page-header-dark .crumbs a{color:var(--n-500)}
.page-header-dark .crumbs .sep{color:var(--n-600)}
.page-header-dark .crumbs .here{color:var(--n-300)}
.page-header-dark h1{color:var(--n-0)}
.page-header-dark .lede{color:var(--n-300)}

/* === Side navigation (for two-col pages) ==================== */
.side-nav{position:sticky; top:96px; align-self:flex-start}
.side-nav h5{
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--n-500);
  margin-bottom:12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--n-200);
}
.side-nav ul{display:flex; flex-direction:column}
.side-nav a{
  display:block;
  padding:8px 0;
  font-size:14px;
  color:var(--n-600);
  border-bottom:1px solid var(--n-150);
  transition:color .12s;
}
.side-nav a:hover{color:var(--eram-red)}
.side-nav a.active{color:var(--eram-red); font-weight:500}

/* === Prose styles (article bodies) =========================== */
.prose{
  font-size:16px;
  line-height:1.7;
  color:var(--n-700);
  max-width:680px;
}
.prose > * + *{margin-top:16px}
.prose h2{margin:40px 0 16px}
.prose h3{margin:32px 0 12px; font-size:20px}
.prose ul, .prose ol{margin:0 0 0 20px; list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:6px}
.prose blockquote{
  border-left:3px solid var(--eram-red);
  padding:8px 0 8px 20px;
  font-size:18px;
  color:var(--n-700);
  margin:24px 0;
  font-style:italic;
}
.prose strong{font-weight:500; color:var(--n-900)}
.prose a{color:var(--eram-red); font-weight:500; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px}
.prose a:hover{color:var(--eram-red-700)}

/* === Article meta strip ====================================== */
.article-meta{
  display:flex;
  gap:16px;
  align-items:center;
  padding-bottom:24px;
  margin-bottom:24px;
  border-bottom:1px solid var(--n-200);
  font-size:13px;
  color:var(--n-500);
  flex-wrap:wrap;
}
.article-meta .dot{width:3px; height:3px; background:var(--n-300); border-radius:50%}

/* === Tables ================================================== */
.eram-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
.eram-table th{
  text-align:left;
  padding:10px 12px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--n-500);
  border-bottom:1px solid var(--n-200);
}
.eram-table td{
  padding:10px 12px;
  border-bottom:1px solid var(--n-150);
  color:var(--n-700);
}
.eram-table td.mono{font-family:var(--font-mono); font-size:12px; color:var(--n-500)}
.eram-table td.right{text-align:right}
.eram-table tbody tr:last-child td{border-bottom:0}

/* === Map block =============================================== */
.map-block{
  aspect-ratio:21/9;
  background:var(--n-900);
  border-radius:var(--r-md);
  position:relative;
  overflow:hidden;
}
.map-block::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 40%, rgba(200,16,46,.2) 0, transparent 25%),
    radial-gradient(circle at 50% 55%, rgba(200,16,46,.3) 0, transparent 12%),
    radial-gradient(circle at 65% 50%, rgba(200,16,46,.15) 0, transparent 18%),
    linear-gradient(135deg, #1F242C, #0E1116);
}
.map-block .photo-pin{top:24px; left:24px; z-index:2}
.map-block .legend{
  position:absolute;
  bottom:24px;
  left:24px;
  right:24px;
  display:flex;
  gap:16px;
  z-index:2;
  color:var(--n-300);
  font-size:12px;
  font-family:var(--font-mono);
  flex-wrap:wrap;
}
.legend-pin{display:inline-flex; align-items:center; gap:6px}
.legend-dot{width:8px; height:8px; background:var(--eram-red); border-radius:50%; box-shadow:0 0 0 3px rgba(200,16,46,.3)}

/* === CTA banner ============================================== */
.cta-banner{
  background:var(--n-900);
  color:var(--n-0);
  padding:80px 0;
  position:relative;
  overflow:hidden;
}
.cta-banner::after{
  content:'';
  position:absolute;
  right:-20%;
  top:50%;
  transform:translateY(-50%);
  width:600px;
  height:600px;
  background:radial-gradient(circle, rgba(200,16,46,.2), transparent 60%);
}
.cta-banner h2{color:var(--n-0); position:relative; z-index:1; max-width:680px}
.cta-banner .lede{color:var(--n-300); margin-bottom:32px; position:relative; z-index:1}
.cta-banner .row-actions{position:relative; z-index:1; display:flex; gap:12px; flex-wrap:wrap}
.cta-banner .btn-secondary{background:transparent; color:var(--n-0); border-color:var(--n-500)}
.cta-banner .btn-secondary:hover{border-color:var(--n-0)}

/* === Forms =================================================== */
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.form-field{margin-bottom:16px}
.form-field label{
  display:block;
  font-size:12px;
  font-weight:500;
  color:var(--n-700);
  margin-bottom:6px;
}
.form-field input,
.form-field select,
.form-field textarea{
  font-family:inherit;
  font-size:14px;
  padding:0 12px;
  height:44px;
  width:100%;
  border:1px solid var(--n-300);
  border-radius:var(--r-sm);
  background:var(--n-0);
  color:var(--n-900);
  transition:border-color .12s, box-shadow .12s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--eram-red);
  box-shadow:var(--ring);
}
.form-field textarea{
  height:auto;
  padding:12px;
  min-height:120px;
  resize:vertical;
  line-height:1.5;
}

/* === Notes & alerts ========================================= */
.note{
  background:var(--info-50);
  border-left:3px solid var(--info);
  padding:14px 20px;
  font-size:13px;
  color:var(--n-700);
  margin:24px 0;
  border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.note strong{color:var(--info); font-weight:500}
.note-warning{background:var(--warning-50); border-color:var(--warning)}
.note-warning strong{color:var(--warning)}

/* === Role row (careers) ====================================== */
.role-row{
  display:grid;
  grid-template-columns:2fr 1fr 1fr auto;
  align-items:center;
  gap:16px;
  padding:20px 0;
  border-bottom:1px solid var(--n-200);
  text-decoration:none;
  color:inherit;
  transition:background .12s;
}
.role-row:hover{background:var(--n-50); cursor:pointer}
.role-row h3,.role-row h4{margin:0; font-size:17px}
.role-row .dept{
  font-size:13px;
  color:var(--n-500);
  font-family:var(--font-mono);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.role-row .loc{font-size:13px; color:var(--n-600)}

/* === Footer ================================================== */
.footer{
  background:var(--n-900);
  color:var(--n-300);
  padding:64px 0 0;
  margin-top:auto;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr;
  gap:32px;
  padding-bottom:48px;
  border-bottom:1px solid var(--n-700);
}
.footer h5{
  color:var(--n-0);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:16px;
}
.footer ul{display:flex; flex-direction:column; gap:8px}
.footer ul a{color:var(--n-400); font-size:13px; transition:color .12s}
.footer ul a:hover{color:var(--n-0)}
.footer-brand .brand{color:var(--eram-red); font-size:28px}
.footer-brand .brand .sub{color:var(--n-500); font-size:10px; margin-top:2px; letter-spacing:.18em; font-weight:600}
.footer-brand p{font-size:13px; color:var(--n-400); max-width:280px; margin-top:12px; line-height:1.6}

.social-icons{display:flex; gap:10px; margin-top:20px}
.social-icons a{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--n-700);
  border-radius:var(--r-sm);
  color:var(--n-400);
  transition:all .12s;
}
.social-icons a:hover{
  border-color:var(--eram-red);
  background:var(--eram-red);
  color:var(--n-0);
}
.social-icons svg{width:16px; height:16px}

.footer-certs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:16px 0;
  border-top:1px solid var(--n-700);
}
.footer-certs .cert-pill{
  background:transparent;
  color:var(--n-400);
  border-color:var(--n-700);
  font-size:10px;
}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:24px 0;
  font-size:12px;
  color:var(--n-500);
  flex-wrap:wrap;
  gap:16px;
}
.footer-bottom-links{display:flex; gap:20px; flex-wrap:wrap}
.footer-bottom-links a{color:var(--n-500); transition:color .12s}
.footer-bottom-links a:hover{color:var(--n-300)}
.footer-credit{font-size:11px; color:var(--n-500); letter-spacing:.04em}
.footer-credit a{color:var(--n-300); text-decoration:none; font-weight:500; transition:color .12s}
.footer-credit a:hover{color:var(--n-0)}

/* === Cookie banner =========================================== */
.cookie-banner{
  position:fixed;
  bottom:24px;
  left:24px;
  right:24px;
  max-width:560px;
  margin:0 auto;
  background:var(--n-900);
  color:var(--n-100);
  padding:20px 24px;
  border-radius:var(--r-md);
  box-shadow:0 8px 32px rgba(0,0,0,0.3);
  z-index:100;
  display:none;
}
.cookie-banner.show{display:block}
.cookie-banner h5{color:var(--n-0); margin-bottom:8px; font-size:14px}
.cookie-banner p{font-size:13px; color:var(--n-300); margin-bottom:14px; line-height:1.5}
.cookie-banner a{color:var(--n-0); text-decoration:underline}
.cookie-banner .actions{display:flex; gap:8px; flex-wrap:wrap}

/* === Responsive ============================================== */
@media (max-width:1100px){
  .r-4, .sector-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr; gap:32px 24px}
  .stat-strip{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:48px}
}
@media (max-width:760px){
  .hero{padding:64px 0 48px}
  .hero-grid,
  .r-2, .r-3, .r-2-1, .r-1-2,
  .two-col, .two-col-r,
  .sector-grid, .sector-grid-3{grid-template-columns:1fr}
  .stat-strip{grid-template-columns:1fr 1fr; gap:24px}
  .stat-num{font-size:32px}
  h1{font-size:32px}
  .h1-display, .hero h1{font-size:36px}
  h2{font-size:24px}
  .section{padding:48px 0}
  .main-nav{height:60px}
  .main-nav .nav-primary{display:none}
  .main-nav .nav-actions .search-trigger{display:none}
  .mobile-toggle{display:flex; align-items:center; justify-content:center; width:40px; height:40px; color:var(--n-700)}
  .main-nav.mobile-open .nav-primary{
    display:flex;
    position:absolute;
    top:60px;
    left:0;
    right:0;
    flex-direction:column;
    background:var(--n-0);
    border-bottom:1px solid var(--n-200);
    padding:16px 24px;
    gap:0;
  }
  .main-nav.mobile-open .nav-primary a{
    padding:14px 0;
    border-bottom:1px solid var(--n-150);
  }
  .utility-nav{font-size:11px; gap:12px; overflow-x:auto; white-space:nowrap; padding:0 16px}
  .utility-nav .right{margin-left:auto; flex-shrink:0}
  .role-row{grid-template-columns:1fr; gap:6px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column; align-items:flex-start}
}

/* === Print =================================================== */
@media print{
  .utility-nav,.main-nav,.footer,.cookie-banner{display:none}
  body{color:#000}
  a{color:#000; text-decoration:none}
  .section{padding:24px 0}
  .page-header{padding:24px 0}
}

/* Footer subscription + payment methods */
.footer-subscribe{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;padding:0 0 40px;margin-bottom:40px;border-bottom:1px solid var(--n-700)}
.footer-subscribe-text h5{margin:0 0 4px;color:var(--n-0);font-size:16px}
.footer-subscribe-text p{margin:0;color:var(--n-400);font-size:14px;max-width:440px}
.footer-subscribe-form{display:flex;gap:10px;flex:0 1 460px;min-width:280px}
.footer-subscribe-form input{flex:1;padding:12px 14px;border:1px solid var(--n-600);border-radius:4px;background:var(--n-800);color:var(--n-0);font-family:inherit;font-size:14px;outline:none}
.footer-subscribe-form input:focus{border-color:var(--red)}
.footer-subscribe-form input::placeholder{color:var(--n-500)}
.footer-payments{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:28px 0 0;margin-top:8px}
.footer-payments-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--n-500)}
.footer-payments-icons{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.footer-payments-icons img{height:22px;width:auto;background:#fff;border-radius:3px;padding:3px 5px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
@media(max-width:768px){.footer-subscribe{flex-direction:column;align-items:flex-start}.footer-subscribe-form{width:100%;flex-basis:auto}}

/* News & Insights — category bar + post grid */
.news-catbar{position:sticky;top:0;z-index:15;background:var(--n-0);border-bottom:1px solid var(--n-200);box-shadow:0 1px 0 rgba(0,0,0,.02)}
.news-catbar-inner{display:flex;gap:8px;overflow-x:auto;padding:14px 0;scrollbar-width:none}
.news-catbar-inner::-webkit-scrollbar{display:none}
.news-cat-btn{flex:0 0 auto;padding:8px 16px;border:1px solid var(--n-300);border-radius:20px;background:var(--n-0);color:var(--n-700);font-family:inherit;font-size:13.5px;font-weight:500;cursor:pointer;white-space:nowrap;transition:all .15s}
.news-cat-btn:hover{border-color:var(--n-900);color:var(--n-900)}
.news-cat-btn.active{background:var(--red);border-color:var(--red);color:#fff}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.news-post{display:flex;flex-direction:column;border:1px solid var(--n-200);border-radius:8px;overflow:hidden;background:var(--n-0);transition:box-shadow .18s,transform .18s;text-decoration:none;color:inherit}
.news-post:hover{box-shadow:0 12px 28px rgba(16,24,40,.10);transform:translateY(-3px)}
.news-post-img{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,#f0f1f4,#e2e5ea);display:flex;align-items:center;justify-content:center}
.news-post-tag{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.92);color:var(--n-700);font-size:11px;font-weight:600;padding:4px 10px;border-radius:12px}
.news-post-body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.news-post-cat{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--red);font-weight:600}
.news-post-body h3{font-size:18px;line-height:1.3;margin:0}
.news-post-body p{font-size:14px;color:var(--n-600);line-height:1.55;margin:0;flex:1}
.news-post-more{font-size:13px;font-weight:600;color:var(--red);margin-top:4px}
.news-post.featured{grid-column:1 / -1;flex-direction:row}
.news-post.featured .news-post-img{flex:0 0 46%;aspect-ratio:auto}
.news-post.featured .news-post-body{padding:32px;justify-content:center}
.news-post.featured h3{font-size:26px}
.news-post.featured p{font-size:16px;flex:none}
.news-empty{text-align:center;color:var(--n-500);padding:48px;font-size:15px}
@media(max-width:900px){.news-grid{grid-template-columns:1fr 1fr}.news-post.featured{flex-direction:column}.news-post.featured .news-post-img{flex:auto;aspect-ratio:16/10}}
@media(max-width:600px){.news-grid{grid-template-columns:1fr}}

/* Hero band for content pages (page-header) — image-ready */
.page-header{position:relative;padding:64px 0 56px;background:linear-gradient(120deg,var(--n-50) 0%,#eef0f3 60%,#f6eceedd 100%);overflow:hidden}
.page-header::after{content:"";position:absolute;top:0;right:0;bottom:0;width:42%;background:linear-gradient(135deg,rgba(200,16,46,.06),rgba(20,23,28,.04));clip-path:polygon(22% 0,100% 0,100% 100%,0 100%);pointer-events:none}
.page-header .container{position:relative;z-index:1}
.page-header.has-photo{background-size:cover;background-position:center}
.page-header.has-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,23,28,.78) 0%,rgba(20,23,28,.55) 55%,rgba(20,23,28,.30) 100%)}
.page-header.has-photo .container{color:var(--n-0)}
.page-header.has-photo .crumbs,.page-header.has-photo .crumbs a,.page-header.has-photo .lede{color:rgba(255,255,255,.85)}
.page-header.has-photo .eyebrow{color:#ff7a6b}
.page-header.has-photo .h1-display{color:#fff}

/* ============================================================
   EXTENSIONS v1.2 · 11 Jun 2026
   Commerce bridge (sector/brand featured products + categories),
   social share, careers application, foundation.
   Reuses existing design tokens. Mobile-first responsive.
   ============================================================ */

/* --- Section heading helper --- */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:48px 0 18px}
.sec-head h2{margin:0}
.sec-head .sec-head-link{font-size:14px;font-weight:600;color:var(--eram-red);white-space:nowrap}
.sec-head .sec-head-link:hover{color:var(--eram-red-700)}
.muted-note{font-size:13px;color:var(--n-500);margin-top:8px}

/* --- Featured category chips (deep-link to shop) --- */
.cat-chips{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 8px}
.cat-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--n-200);
  border-radius:999px;background:var(--n-0);font-size:14px;font-weight:500;color:var(--n-700);transition:.15s}
.cat-chip:hover{border-color:var(--eram-red);color:var(--eram-red);box-shadow:var(--ring)}
.cat-chip svg{width:13px;height:13px;opacity:.6}

/* --- Product grid (rendered from shop API by shop-bridge.js) --- */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:8px 0 8px}
.product-card{display:flex;flex-direction:column;border:1px solid var(--n-150);border-radius:var(--r-lg);
  background:var(--n-0);overflow:hidden;transition:.15s;min-height:230px}
.product-card:hover{border-color:var(--n-300);box-shadow:0 6px 24px -12px rgba(14,17,22,.25);transform:translateY(-2px)}
.product-card .pc-img{aspect-ratio:1/1;background:var(--n-50);display:flex;align-items:center;justify-content:center;overflow:hidden}
.product-card .pc-img img{width:100%;height:100%;object-fit:contain;padding:14px}
.product-card .pc-body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.product-card .pc-brand{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--n-500);font-weight:600}
.product-card .pc-name{font-size:14px;font-weight:600;color:var(--n-800);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-card .pc-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:8px}
.product-card .pc-price{font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--n-900)}
.product-card .pc-price small{font-weight:400;color:var(--n-500);font-size:11px}
.product-card .pc-cta{font-size:12px;font-weight:700;color:var(--eram-red)}

/* --- Shop-bridge states: loading skeleton + fallback CTA --- */
.shop-skeleton{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.shop-skeleton .sk{border:1px solid var(--n-150);border-radius:var(--r-lg);height:230px;
  background:linear-gradient(100deg,var(--n-50) 30%,var(--n-100) 50%,var(--n-50) 70%);
  background-size:200% 100%;animation:sk 1.2s ease-in-out infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.shop-fallback{border:1px dashed var(--n-300);border-radius:var(--r-lg);background:var(--n-50);
  padding:28px 24px;text-align:center}
.shop-fallback p{color:var(--n-600);margin:0 0 16px;font-size:15px}

/* --- Social share bar --- */
.share-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:28px 0;
  padding:16px 0;border-top:1px solid var(--n-150);border-bottom:1px solid var(--n-150)}
.share-bar .share-label{font-size:13px;font-weight:600;color:var(--n-500);text-transform:uppercase;letter-spacing:.04em;margin-right:4px}
.share-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border:1px solid var(--n-200);border-radius:var(--r-md);color:var(--n-600);background:var(--n-0);transition:.15s}
.share-btn:hover{border-color:var(--eram-red);color:var(--eram-red);background:var(--eram-red-50)}
.share-btn svg{width:18px;height:18px}
.share-btn.copied{border-color:var(--success);color:var(--success);background:var(--success-50)}

/* --- Careers: subpage tiles + open-roles list + application form --- */
.career-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:8px 0}
.career-tile{display:flex;flex-direction:column;gap:10px;padding:24px;border:1px solid var(--n-150);
  border-radius:var(--r-lg);background:var(--n-0);transition:.15s}
.career-tile:hover{border-color:var(--eram-red);box-shadow:0 8px 28px -16px rgba(14,17,22,.3);transform:translateY(-2px)}
.career-tile .ct-icon{width:40px;height:40px;border-radius:var(--r-md);background:var(--eram-red-50);
  color:var(--eram-red);display:flex;align-items:center;justify-content:center}
.career-tile .ct-icon svg{width:20px;height:20px}
.career-tile h3,.career-tile h4{margin:0;font-size:17px}
.career-tile p{margin:0;font-size:14px;color:var(--n-600)}
.career-tile .ct-arrow{margin-top:auto;font-weight:700;color:var(--eram-red);font-size:14px}

.job-list{display:flex;flex-direction:column;gap:12px;margin:8px 0}
.job-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;
  border:1px solid var(--n-150);border-radius:var(--r-lg);background:var(--n-0);transition:.15s;flex-wrap:wrap}
.job-row:hover{border-color:var(--n-300);box-shadow:0 6px 22px -14px rgba(14,17,22,.25)}
.job-row .job-main h3,.job-row .job-main h4{margin:0 0 4px;font-size:16px}
.job-row .job-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--n-500)}
.job-row .job-meta span{display:inline-flex;align-items:center;gap:5px}
.job-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;background:var(--n-100);color:var(--n-600)}
.job-tag.open{background:var(--success-50);color:var(--success)}
.job-tag.pipeline{background:var(--info-50);color:var(--info)}

.apply-form{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin:8px 0 12px}
.apply-form .fld{display:flex;flex-direction:column;gap:6px}
.apply-form .fld.full{grid-column:1 / -1}
.apply-form label{font-size:13px;font-weight:600;color:var(--n-700)}
.apply-form label .req{color:var(--eram-red)}
.apply-form input,.apply-form select,.apply-form textarea{
  width:100%;padding:11px 13px;border:1px solid var(--n-200);border-radius:var(--r-md);
  font-size:15px;color:var(--n-800);background:var(--n-0);transition:.15s}
.apply-form input:focus,.apply-form select:focus,.apply-form textarea:focus{
  outline:none;border-color:var(--eram-red);box-shadow:var(--ring)}
.apply-form textarea{min-height:120px;resize:vertical}
.file-drop{border:1.5px dashed var(--n-300);border-radius:var(--r-lg);background:var(--n-50);
  padding:22px;text-align:center;cursor:pointer;transition:.15s}
.file-drop:hover{border-color:var(--eram-red);background:var(--eram-red-50)}
.file-drop .fd-icon{color:var(--n-400);margin-bottom:8px}
.file-drop .fd-icon svg{width:26px;height:26px;margin:0 auto}
.file-drop p{margin:0;font-size:14px;color:var(--n-600)}
.file-drop small{display:block;margin-top:4px;color:var(--n-400);font-size:12px}
.file-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.file-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;
  padding:8px 12px;background:var(--n-50);border:1px solid var(--n-150);border-radius:var(--r-md)}
.file-list li button{color:var(--eram-red);font-size:12px;font-weight:600}
.consent-row{grid-column:1 / -1;display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--n-600)}
.consent-row input{width:auto;margin-top:3px;flex-shrink:0}
.form-note{grid-column:1 / -1;font-size:13px;color:var(--n-500);background:var(--n-50);
  border-left:3px solid var(--eram-red);padding:12px 16px;border-radius:0 var(--r-md) var(--r-md) 0}

/* --- Foundation / CSR --- */
.found-hero{background:linear-gradient(135deg,#5E0617 0%,#82091F 55%,#0E1116 100%);color:var(--n-0)}
.found-hero .eyebrow{color:var(--eram-red-200)}
.found-hero .lede{color:rgba(255,255,255,.85)}
.found-motto{font-style:italic;font-size:18px;color:var(--n-0);border-left:3px solid var(--eram-red);padding-left:16px;margin-top:18px}
.value-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:8px 0}
.value-item{padding:18px 20px;border:1px solid var(--n-150);border-radius:var(--r-lg);background:var(--n-0)}
.value-item h3,.value-item h4{margin:0 0 5px;font-size:15px}
.value-item p{margin:0;font-size:14px;color:var(--n-600)}

/* --- Responsive --- */
@media(max-width:1000px){
  .product-grid,.shop-skeleton{grid-template-columns:repeat(3,1fr)}
  .career-tiles{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .product-grid,.shop-skeleton{grid-template-columns:repeat(2,1fr)}
  .career-tiles{grid-template-columns:1fr}
  .apply-form{grid-template-columns:1fr}
  .value-grid{grid-template-columns:1fr}
  .sec-head{margin:36px 0 14px}
  .job-row{flex-direction:column;align-items:flex-start}
}
@media(max-width:420px){
  .product-grid,.shop-skeleton{grid-template-columns:1fr 1fr;gap:12px}
}

/* ============================================================
   Industries we serve — image-ready vertical cards
   Launches today with an on-brand gradient + angled red panel.
   Upgrade path: add class "has-photo" and an inline
   style="background-image:url('../assets/img/industries/<x>.jpg')"
   to any card; the overlay and arrow styling adapt automatically.
   ============================================================ */
.industry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:32px}
.industry-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:230px;border-radius:14px;overflow:hidden;padding:22px;color:#fff;text-decoration:none;background:#14171c;isolation:isolate;transition:transform .15s ease,box-shadow .15s ease}
.industry-card::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(150deg,#1d2127 0%,#14171c 62%)}
.industry-card::after{content:"";position:absolute;right:-30%;top:-22%;width:78%;height:92%;z-index:-1;background:linear-gradient(135deg,var(--eram-red),#9d0c22);transform:rotate(8deg);opacity:.20;transition:opacity .15s ease}
.industry-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(20,23,28,.18)}
.industry-card:hover::after{opacity:.32}
.industry-card.has-photo{background-size:cover;background-position:center}
.industry-card.has-photo::before{background:linear-gradient(0deg,rgba(20,23,28,.93) 0%,rgba(20,23,28,.55) 46%,rgba(20,23,28,.22) 100%)}
.industry-card.has-photo::after{display:none}
.industry-card .ind-title{font-size:18px;font-weight:700;margin:0 0 6px;line-height:1.2;letter-spacing:-.01em}
.industry-card .ind-tags{font-size:13px;color:rgba(255,255,255,.82);line-height:1.45;margin:0;padding-right:30px}
.industry-card .ind-arrow{position:absolute;right:18px;bottom:18px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.35);font-size:15px;line-height:1;transition:.15s}
.industry-card:hover .ind-arrow{background:var(--eram-red);border-color:var(--eram-red);transform:translateX(2px)}
@media(max-width:900px){.industry-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.industry-grid{grid-template-columns:1fr}.industry-card{min-height:180px}}

/* ============================================================
   Partner logos + category cards (v1_11)
   ============================================================ */
/* Brand-page hero logo (replaces the dashed placeholder slot) */
.brand-logo-lg{width:180px;height:72px;background:#fff;border:1px solid var(--n-200);border-radius:8px;display:grid;place-items:center;padding:14px;box-sizing:border-box}
.brand-logo-lg img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}

/* Logo inside brand cards (directory + sector featured brands) */
.brand-card .brand-logo{height:60px;width:100%;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.brand-card .brand-logo img{max-height:42px;max-width:80%;width:auto;object-fit:contain;object-position:center;display:block;margin:0 auto}

/* Home / section partner logo wall */
.logo-wall{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:28px}
.logo-wall a{background:#fff;border:1px solid var(--n-200);border-radius:10px;height:76px;display:grid;place-items:center;padding:16px;transition:.14s}
.logo-wall a:hover{border-color:var(--n-400);box-shadow:0 6px 16px rgba(20,23,28,.07)}
.logo-wall img{max-height:40px;max-width:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.72;transition:.14s}
.logo-wall a:hover img{filter:grayscale(0);opacity:1}
@media(max-width:900px){.logo-wall{grid-template-columns:repeat(4,1fr)}}
@media(max-width:560px){.logo-wall{grid-template-columns:repeat(3,1fr)}.logo-wall a{height:64px;padding:12px}}

/* Category cards (featured + all categories) */
.cat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:18px 0 8px}
.cat-card{display:flex;flex-direction:column;padding:0;overflow:hidden;border:1px solid var(--n-200);border-radius:12px;background:var(--n-0);text-decoration:none;color:var(--n-900);transition:.14s}
.cat-card .cat-media{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,var(--n-100),var(--n-50));display:flex;align-items:center;justify-content:center;overflow:hidden}
.cat-card .cat-media svg{width:34px;height:34px;color:var(--eram-red);opacity:.9;transition:.16s}
.cat-card .cat-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cat-card:hover .cat-media svg{transform:scale(1.1)}
.cat-card .cat-body{display:flex;flex-direction:column;gap:6px;justify-content:space-between;flex:1;padding:12px 14px}
.cat-card:hover{border-color:var(--n-900);transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,23,28,.08)}
.cat-card .cat-ico{width:26px;height:26px;color:var(--eram-red)}
.cat-card .cat-name{font-weight:600;font-size:15px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cat-card .cat-go{font-family:var(--font-mono);font-size:11px;color:var(--n-500);letter-spacing:.04em;display:flex;align-items:center;gap:5px}
.cat-card:hover .cat-go{color:var(--eram-red)}
@media(max-width:520px){.cat-cards{grid-template-columns:repeat(2,1fr)}}
.cat-card .cat-go svg{width:15px;height:15px;flex:0 0 auto}
.cat-card .cat-go{gap:8px}

/* Light/white logos need a dark tile to stay visible */
.brand-logo-lg:has(img[src*="brands/presto."]),
.brand-logo-lg:has(img[src*="brands/msa."]),
.brand-logo-lg:has(img[src*="brands/tolsen."]){background:#1d2127;border-color:#1d2127}
.brand-card .brand-logo:has(img[src*="brands/presto."]) img,
.brand-card .brand-logo:has(img[src*="brands/msa."]) img,
.brand-card .brand-logo:has(img[src*="brands/tolsen."]) img{background:#1d2127;border-radius:6px;padding:7px 12px;max-height:38px;box-sizing:content-box}

/* Embedded location map (v1_15) */
.map-embed{position:relative;width:100%;aspect-ratio:21/9;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--n-200);background:var(--n-100)}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-cap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px}
.map-cap p{font-size:13px;color:var(--n-600);margin:0}
.loc-card .loc-dir{display:inline-block;margin-top:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--eram-red-800);text-decoration:none}
.loc-card .loc-dir:hover{text-decoration:underline}
@media(max-width:640px){.map-embed{aspect-ratio:4/3}}


/* Markets & Services pages (v1_16) */
.section-alt{background:var(--n-50)}
.market-band{display:flex;gap:18px;align-items:flex-start;max-width:840px;margin-bottom:28px}
.market-ic{width:40px;height:40px;flex:none;color:var(--eram-red);margin-top:4px}
.market-band h2{font-size:26px;margin:2px 0 8px}
.market-band .lede{margin:0}
.cta-band{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.cta-band h2{font-size:24px;margin:0 0 6px}
.cta-band .lede{margin:0;max-width:560px}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap}
.svc-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc-tier{border:1px solid var(--n-200);border-radius:var(--r-md);padding:26px 24px;background:var(--n-0);display:flex;flex-direction:column}
.svc-tier:nth-child(2){border-color:var(--eram-red-200)}
.svc-badge{display:inline-block;align-self:flex-start;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--eram-red-800);background:var(--eram-red-50);border:1px solid var(--eram-red-100);border-radius:999px;padding:5px 12px;margin-bottom:14px}
.svc-tier h3{font-size:16px;margin:0 0 14px;color:var(--n-900)}
.svc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.svc-list li{position:relative;padding-left:24px;font-size:14px;color:var(--n-700);line-height:1.5}
.svc-list li::before{content:'';position:absolute;left:0;top:5px;width:14px;height:14px;border-radius:50%;background:var(--eram-red-50);border:1px solid var(--eram-red-100)}
.svc-list li::after{content:'';position:absolute;left:5px;top:8px;width:4px;height:7px;border:solid var(--eram-red);border-width:0 2px 2px 0;transform:rotate(45deg)}
.svc-note{margin-top:26px;padding:18px 22px;background:var(--n-50);border-left:3px solid var(--eram-red);border-radius:6px;font-size:14px;color:var(--n-700);line-height:1.6}
@media(max-width:900px){.svc-tiers{grid-template-columns:1fr}}
@media(max-width:720px){.cta-band{flex-direction:column;align-items:flex-start}}

/* --- v1_18: request-a-quote, partner forms & hub cards --- */
.rfq-link{display:inline-flex; align-items:center; height:36px; padding:0 14px; border:1px solid var(--n-600); color:var(--n-100); font-weight:500; font-size:13px; transition:border-color .12s,color .12s}
.rfq-link:hover{border-color:var(--n-0); color:var(--n-0)}
.form-panel{background:var(--n-50); padding:32px; border-radius:var(--r-md); border:1px solid var(--n-200)}
.rfq-steps{margin:8px 0 0; padding-left:20px}
.rfq-steps li{margin-bottom:8px; line-height:1.6; color:var(--n-700)}
.tick-list{list-style:none; margin:8px 0 0; padding:0}
.tick-list li{position:relative; padding-left:26px; margin-bottom:8px; line-height:1.6; color:var(--n-700)}
.tick-list li::before{content:""; position:absolute; left:2px; top:6px; width:12px; height:7px; border-left:2px solid var(--eram-red); border-bottom:2px solid var(--eram-red); transform:rotate(-45deg)}
.legal-card.is-muted{background:var(--n-50); border-style:dashed}
.legal-card.is-muted h3,.legal-card.is-muted h4{color:var(--n-600)}
.form-field input[type=file]{padding:9px; background:var(--n-0); border:1px dashed var(--n-300); font-size:13px; width:100%; border-radius:var(--r-sm); cursor:pointer}

.login-link{color:var(--n-100) !important; font-weight:500}
.login-link:hover{color:var(--n-0) !important}

/* ============================================================
   v1.27 — Contrast remediation + Pro/Trade + Community (CSR)
   Appended 28 July 2026. Rules below are deliberately last in
   the cascade: several earlier blocks were being overridden by
   the later "hero band" block, producing light-on-light text.
   ============================================================ */

:root{ --kf-garnet:#8A1C30; --kf-garnet-900:#5E0617; --kf-gold:#C9A227; }

/* --- FIX 1 ---------------------------------------------------
   .page-header-dark (defined above) was overridden by the later
   .page-header hero-band rule of equal specificity, so dark
   headers rendered on a LIGHT gradient while keeping white text.
   Re-assert the dark treatment here.
   ------------------------------------------------------------- */
.page-header.page-header-dark{
  background:linear-gradient(120deg,var(--n-900) 0%,#171C24 58%,#2B1017 100%);
  border-bottom-color:var(--n-800);
  color:var(--n-100);
}
.page-header.page-header-dark::after{
  background:linear-gradient(135deg,rgba(200,16,46,.20),rgba(255,255,255,.02));
}
.page-header.page-header-dark .crumbs,
.page-header.page-header-dark .crumbs a{color:var(--n-400)}
.page-header.page-header-dark .crumbs .sep{color:var(--n-600)}
.page-header.page-header-dark .crumbs .here{color:var(--n-200)}
.page-header.page-header-dark h1,
.page-header.page-header-dark .h1-display{color:var(--n-0)}
.page-header.page-header-dark .lede{color:var(--n-200)}
.page-header.page-header-dark .eyebrow,
.page-header.page-header-dark .eyebrow-light{color:var(--eram-red-200)}

/* --- FIX 2 ---------------------------------------------------
   .eyebrow-light (--n-400) is only legible on dark surfaces.
   Guard it on light hero bands and light sections.
   ------------------------------------------------------------- */
.page-header:not(.page-header-dark):not(.has-photo):not(.found-hero) .eyebrow-light,
.section:not(.section-dark) .eyebrow-light{color:var(--n-600)}

/* --- FIX 3 ---------------------------------------------------
   White cards (.pillar / .legal-card / .sector-tile) placed inside
   .section-dark inherited white headings from ".section-dark h4",
   giving white-on-white. Give the cards a dark surface instead.
   ------------------------------------------------------------- */
.section-dark .pillar,
.section-dark .legal-card,
.section-dark .sector-tile,
.section-dark .step{background:#161B23; border-color:#2B323D}
.section-dark .pillar h3,.section-dark .pillar h4,
.section-dark .legal-card h3,.section-dark .legal-card h4,
.section-dark .sector-tile h3,.section-dark .sector-tile h4,
.section-dark .step h3,.step h4{color:var(--n-0)}
.section-dark .pillar p,.section-dark .pillar ul,
.section-dark .legal-card p,
.section-dark .sector-tile p,
.section-dark .step p{color:var(--n-300)}
.section-dark .pillar-tag,
.section-dark .step .step-num{color:var(--eram-red-200)}
.section-dark .sector-tile:hover{background:#1C222B}
.section-dark .check-list li{color:var(--n-300)}
.section-dark .check-list li::before{color:var(--eram-red-200)}

/* --- FIX 4 — unclassed paragraphs on the dark CTA banner ------ */
.cta-banner p{color:var(--n-300); position:relative; z-index:1; max-width:720px; margin-bottom:32px}
.cta-banner .hero-actions{position:relative; z-index:1}

/* --- FIX 5 — footer small print was 4.12:1 (below AA) --------- */
.footer-bottom{color:var(--n-400)}
.footer-bottom > span{color:var(--n-400)}
.footer-bottom-links a{color:var(--n-400)}
.footer-bottom-links a:hover{color:var(--n-0)}
.footer-credit{color:var(--n-400)}
.footer-payments-label{color:var(--n-400)}

/* --- In-page section navigation ------------------------------ */
.page-nav{background:var(--n-0); border-bottom:1px solid var(--n-150); position:sticky; top:72px; z-index:40}
.page-nav .container{display:flex; gap:28px; overflow-x:auto; scrollbar-width:none}
.page-nav .container::-webkit-scrollbar{display:none}
.page-nav a{display:inline-flex; align-items:center; height:52px; white-space:nowrap;
  font-size:13px; font-weight:500; color:var(--n-600); border-bottom:2px solid transparent}
.page-nav a:hover{color:var(--eram-red)}
.page-nav a.active{color:var(--eram-red); border-bottom-color:var(--eram-red)}

/* --- Hero fact strip ----------------------------------------- */
.hero-facts{display:flex; flex-wrap:wrap; gap:0; margin-top:32px; border-top:1px solid var(--n-200)}
.hero-facts .hf{padding:16px 32px 0 0; margin-right:32px; border-right:1px solid var(--n-200)}
.hero-facts .hf:last-child{border-right:0; margin-right:0; padding-right:0}
.hero-facts .hf-num{font-family:var(--font-mono); font-size:22px; font-weight:500; color:var(--n-900); letter-spacing:-.01em}
.hero-facts .hf-lbl{font-size:12px; color:var(--n-600); margin-top:2px}

/* --- Numbered step flow -------------------------------------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.step{padding:24px; border:1px solid var(--n-200); border-radius:var(--r-md); background:var(--n-0)}
.step .step-num{font-family:var(--font-mono); font-size:11px; font-weight:500; color:var(--eram-red);
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px}
.step h4{margin:0 0 8px; font-size:17px; color:var(--n-900)}
.step p{font-size:14px; color:var(--n-600); line-height:1.6; margin:0}

/* --- Check list ---------------------------------------------- */
.check-list{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px}
.check-list li{position:relative; padding-left:22px; font-size:13.5px; color:var(--n-600); line-height:1.55}
.check-list li::before{content:'✓'; position:absolute; left:0; top:0; color:var(--eram-red); font-weight:600; font-size:12px}

/* --- Grouped capability block -------------------------------- */
.cap-group{border-top:1px solid var(--n-200); padding-top:20px; margin-top:32px}
.cap-group:first-of-type{margin-top:0}
.cap-group > .cap-head{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--n-500); margin-bottom:18px}

/* --- Kelmendi Foundation co-brand ---------------------------- */
.kf-panel{border:1px solid var(--n-200); border-left:3px solid var(--kf-garnet);
  border-radius:0 var(--r-md) var(--r-md) 0; background:var(--n-0); padding:32px}
.kf-lockup{display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  padding-bottom:20px; border-bottom:1px solid var(--n-150); margin-bottom:20px}
.kf-lockup img{height:34px; width:auto; display:block}
.kf-lockup .kf-rel{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--n-500)}
.kf-panel p{font-size:14px; color:var(--n-600); line-height:1.65}
.kf-panel p + p{margin-top:12px}
.kf-band{background:linear-gradient(135deg,var(--kf-garnet-900) 0%,#82091F 55%,var(--n-900) 100%);
  color:var(--n-0); padding:64px 0}
.kf-band h2{color:var(--n-0); max-width:700px}
.kf-band p{color:rgba(255,255,255,.86); max-width:700px; font-size:17px; line-height:1.6; margin:12px 0 28px}
.kf-band img.kf-mark{height:30px; width:auto; display:block; margin-bottom:24px; opacity:.95}
.kf-band .btn-secondary{background:transparent; color:var(--n-0); border-color:rgba(255,255,255,.45)}
.kf-band .btn-secondary:hover{border-color:var(--n-0)}

/* --- Two-column pillar register ------------------------------ */
.pillar-list{display:grid; grid-template-columns:repeat(2,1fr); gap:0 48px; border-top:1px solid var(--n-200)}
.pl-item{display:flex; gap:14px; padding:13px 0; border-bottom:1px solid var(--n-150)}
.pl-no{font-family:var(--font-mono); font-size:11px; color:var(--n-400); padding-top:4px; min-width:22px}
.pl-txt{font-size:14px; color:var(--n-600); line-height:1.5}
.pl-txt strong{display:block; font-weight:600; color:var(--n-900); font-size:14.5px; margin-bottom:2px}
.pl-item.pl-focus{background:var(--eram-red-50); margin:0 -12px; padding-left:12px; padding-right:12px; border-bottom-color:var(--eram-red-100)}
.pl-item.pl-focus .pl-no{color:var(--eram-red)}

/* --- FAQ / disclosure ---------------------------------------- */
.faq{border-top:1px solid var(--n-200); margin-top:8px}
.faq details{border-bottom:1px solid var(--n-200)}
.faq summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:20px 0; font-size:16px; font-weight:500; color:var(--n-900)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; font-size:20px; line-height:1; color:var(--eram-red); flex:none}
.faq details[open] summary::after{content:'–'}
.faq summary:hover{color:var(--eram-red)}
.faq .faq-body{padding:0 0 22px; max-width:840px; font-size:14px; color:var(--n-600); line-height:1.65}
.faq .faq-body p + p{margin-top:12px}
.faq .faq-body a{color:var(--eram-red); font-weight:500}

/* --- Responsive ---------------------------------------------- */
@media(max-width:1000px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .pillar-list{grid-template-columns:1fr; gap:0}
}
@media(max-width:760px){
  .page-nav{position:static}
  .steps{grid-template-columns:1fr}
  .hero-facts .hf{border-right:0; padding-right:0; margin-right:24px}
  .kf-panel{padding:24px}
  .kf-lockup{gap:14px}
}

/* --- FIX 6 — small-text tokens below WCAG AA on light surfaces
       (--n-500 at 11–13px measures ~4.3:1 on the --n-50 section
       background). Raised to --n-600 (≈7.4:1). ---------------- */
.eram-table th{color:var(--n-600)}
.muted-note{color:var(--n-600)}
.cap-group > .cap-head{color:var(--n-600)}
.pl-no{color:var(--n-600)}
.kf-lockup .kf-rel{color:var(--n-600)}
.section-dark .muted-note{color:var(--n-400)}
.section-dark .eram-table th{color:var(--n-300)}

/* --- FIX 7 — .found-hero set an inherited white colour but the base
       heading rule (h1{color:var(--n-900)}) is explicit and won, so the
       Foundation hero H1 rendered near-black on the garnet gradient
       (1.47:1). Set the heading colour explicitly. ---------------- */
.found-hero h1,.found-hero h2,.found-hero h3,.found-hero .h1-display{color:var(--n-0)}
.found-hero .crumbs,.found-hero .crumbs a{color:rgba(255,255,255,.72)}
.found-hero .crumbs .sep{color:rgba(255,255,255,.40)}
.found-hero .crumbs .here{color:rgba(255,255,255,.90)}

/* --- FIX 8 — breadcrumb and article meta used --n-500 (#6E7682), which
       measures 4.28:1 against the light hero band (#F6F7F9) — marginally
       below WCAG AA for 12px text. Raised to --n-600 (≈6.9:1) on light
       headers; dark headers keep their own lighter values (FIX 1). ---- */
.crumbs, .crumbs a{color:var(--n-600)}
.crumbs .sep{color:var(--n-400)}
.crumbs .here{color:var(--n-800)}
.article-meta{color:var(--n-600)}
.page-header.page-header-dark .crumbs,
.page-header.page-header-dark .crumbs a{color:var(--n-400)}
.page-header.page-header-dark .crumbs .sep{color:var(--n-600)}
.page-header.page-header-dark .crumbs .here{color:var(--n-200)}
.page-header.has-photo .crumbs,.page-header.has-photo .crumbs a{color:rgba(255,255,255,.88)}
.found-hero .crumbs,.found-hero .crumbs a{color:rgba(255,255,255,.78)}

/* --- FIX 9 — ".prose a{color:var(--eram-red)}" (specificity 0,2,0) beat
       ".btn-primary{color:var(--n-0)}" (0,1,0), so call-to-action buttons
       placed inside prose rendered red text on a red fill — invisible.
       Restore button text colours inside prose. --------------------- */
.prose a.btn{text-decoration:none}
.prose a.btn-primary{color:var(--n-0)}
.prose a.btn-primary:hover{color:var(--n-0)}
.prose a.btn-secondary{color:var(--n-900)}
.prose a.btn-tertiary{color:var(--n-700)}
.section-dark .prose a.btn-secondary,
.cta-banner .prose a.btn-secondary{color:var(--n-0)}

/* --- FIX 10 — file-upload helper text used --n-400 on the --n-50 drop
       zone (2.48:1). Raised to --n-600 (≈4.9:1). ------------------- */
.file-drop small{color:var(--n-600)}

/* --- Brand status badge -------------------------------------------
   Status is expressed in the text, never in the class name, so that
   markup cannot assert a relationship the register does not support.
   (Previously .pill.exclusive, applied regardless of actual status.) */
.pill-status{
  border:1px solid var(--n-300);
  border-radius:100px;
  background:var(--n-0);
  color:var(--n-700);
  font-weight:500;
  letter-spacing:.01em;
  white-space:nowrap;
}

/* --- v1.30 — heading hierarchy normalisation ---------------------
   Card headings were promoted from h4 to h3 so that every page has a
   strictly sequential heading outline (h1 > h2 > h3) for accessibility
   and machine readability. The base h3 rule is heavier than h4, so the
   component weight is restated here to keep the visual design identical
   to before the change. */
.sector-tile h3,.news-card h3,.leader h3,.loc-card h3,.pillar h3,
.legal-card h3,.role-row h3,.career-tile h3,.job-row .job-main h3,
.value-item h3,.step h3{font-weight:500}

/* --- FIX 11 — after the heading-hierarchy normalisation some card headings
       inside .section-dark resolved to the dark base colour. Assert the
       light colour explicitly for every heading level in a dark section
       and in the dark card variants. ------------------------------------ */
.section-dark h1,.section-dark h2,.section-dark h3,
.section-dark h4,.section-dark h5,.section-dark h6,
.section-dark .step h3,.section-dark .step h4,
.section-dark .pillar h3,.section-dark .pillar h4,
.section-dark .sector-tile h3,.section-dark .sector-tile h4,
.section-dark .legal-card h3,.section-dark .legal-card h4,
.cta-banner h1,.cta-banner h2,.cta-banner h3,
.kf-band h1,.kf-band h2,.kf-band h3{color:var(--n-0)}

/* ============================================================================
   v1.31 — RESPONSIVE LAYER
   Mobile-first corrections from the responsive audit of 28 July 2026.
   Rationalised breakpoint scale, replacing the ad-hoc values used before:

       --bp-xl   1280px   large desktop and above
       --bp-lg   1024px   laptop / landscape tablet — navigation collapses here
       --bp-md    820px   portrait tablet
       --bp-sm    640px   large phone
       --bp-xs    400px   small phone

   Existing narrower media queries are left in place; this layer sits last and
   corrects the cases they miss. Nothing here changes content, brand identity
   or component styling at desktop widths.
   ============================================================================ */

/* --- 1. Global overflow guards ------------------------------------------
   Media and embeds can never exceed their container; long unbroken strings
   (URLs, email addresses, product codes, standard references) wrap instead of
   forcing the page sideways. */
img, svg, video, iframe, embed, object, canvas { max-width: 100%; }
/* Preserve the aspect ratio for images that carry intrinsic dimensions, but at
   zero specificity so any component that sets an explicit height still wins.
   Without :where() this rule overrode ".brand img{height:36px}" and the header
   logo rendered at its full 1,989px intrinsic width. */
:where(img[width][height]) { height: auto; }
table { max-width: 100%; }
p, li, dd, dt, td, th, figcaption, blockquote,
.lede, .crumbs, .footer a, .legal-card p, .pillar p { overflow-wrap: anywhere; }
a[href^="mailto:"], a[href^="http"], code, kbd, samp, .mono { overflow-wrap: anywhere; }
/* Targeted, not global: a universal min-width:0 breaks flex sizing in the
   header. Applied only to grid and flex children that must be allowed to
   shrink below their content width. */
.row > *, .sector-grid-3 > *, .steps > *, .brand-grid > *,
.two-col > *, .two-col-r > *, .footer-grid > *,
.pillar-list > *, .hero-facts > * { min-width: 0; }

/* --- 2. Accessible skip link ---------------------------------------------
   The off-screen negative-offset technique is replaced with clipping, which
   does not participate in layout and cannot be reported as overflow. */
.skip-link {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 1px; padding: 0; margin: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus {
  width: auto; height: auto; padding: 12px 20px; margin: 0;
  clip-path: none; overflow: visible; z-index: 1000;
}

/* --- 3. Header: collapse to the mobile menu before it can overflow -------
   The desktop header needs roughly 1,000px for the wordmark, eight primary
   links and the action group. It was collapsing at 760px, so between 768px
   and 1023px the full desktop header was rendering into a container that
   could not hold it — the single largest source of page overflow. */
@media (max-width: 1100px) {
  .main-nav { height: 60px; gap: 16px; padding: 0 16px; }
  .main-nav .nav-primary { display: none; }
  .main-nav .nav-actions .search-trigger { display: none; }
  .mobile-toggle { display: inline-flex; }
  .main-nav.mobile-open .nav-primary {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 60px; left: 0; right: 0;
    background: var(--n-0); border-bottom: 1px solid var(--n-200);
    padding: 8px 16px 16px; box-shadow: 0 12px 24px rgba(14,17,22,.10);
    max-height: calc(100vh - 60px); overflow-y: auto;
  }
  .main-nav.mobile-open .nav-primary a {
    padding: 14px 4px; border-bottom: 1px solid var(--n-150); font-size: 15px;
  }
  body.nav-open { overflow: hidden; }        /* background does not scroll */
}
.search-trigger { min-width: 0; flex: 0 1 240px; }

/* --- 4. Utility bar ------------------------------------------------------- */
@media (max-width: 1100px) {
  .utility-nav { padding: 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .utility-nav::-webkit-scrollbar { display: none; }
  .utility-nav { scrollbar-width: none; }
}

/* --- 5. Fluid container --------------------------------------------------- */
@media (max-width: 1100px) { .container { padding-left: 20px; padding-right: 20px; } }
@media (max-width: 640px)  { .container { padding-left: 16px; padding-right: 16px; } }

/* --- 6. Grids collapse on a consistent scale ------------------------------ */
@media (max-width: 1100px) {
  .row.r-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row.r-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sector-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .row, .row.r-2, .row.r-3, .row.r-4,
  .sector-grid-3, .steps, .brand-grid, .pillar-list { grid-template-columns: minmax(0, 1fr); }
  .two-col, .two-col-r { grid-template-columns: minmax(0, 1fr); }
}
.brand-grid, .row, .sector-grid-3, .steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
@media (min-width: 1101px) { .row.r-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .row.r-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .row.r-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .sector-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .steps { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* --- 7. Footer subscribe: the 320px overflow ------------------------------
   min-width:280px on the form exceeded the available 288px at 320px once the
   button was added. The form now wraps instead. */
.footer-subscribe-form { min-width: 0; flex-wrap: wrap; }
@media (max-width: 640px) {
  .footer-subscribe-form { width: 100%; flex-basis: auto; }
  .footer-subscribe-form input { flex: 1 1 100%; }
  .footer-subscribe-form .btn { width: 100%; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer-bottom-links { flex-wrap: wrap; gap: 12px 18px; }
  .footer-payments { flex-wrap: wrap; }
}

/* --- 8. Fluid typography --------------------------------------------------
   Display headings scale with the viewport instead of stepping at a
   breakpoint, so no heading overflows its container at any width. */
.h1-display { font-size: clamp(28px, 5.2vw, 48px); line-height: 1.12; }
h1 { font-size: clamp(26px, 4.6vw, 40px); }
h2 { font-size: clamp(22px, 3.2vw, 30px); }
h3 { font-size: clamp(17px, 2.1vw, 21px); }
.lede { font-size: clamp(15px, 1.5vw, 18px); }
.hero-facts .hf-num { font-size: clamp(18px, 2.4vw, 22px); }

/* --- 9. Minimum legible size on small screens ----------------------------
   Eyebrows, pills and footer labels were rendering at 10–11px on mobile. */
@media (max-width: 820px) {
  .eyebrow, .eyebrow-light, .pillar-tag, .step .step-num,
  .footer-payments-label, .footer-credit, .cert-pill,
  .muted-note, .eram-table th, .kf-lockup .kf-rel { font-size: 12px; }
  .utility-nav a, .login-link { font-size: 12.5px; }
  .brand .wordmark .sub { font-size: 11px; }
}

/* --- 10. Touch targets ----------------------------------------------------
   On coarse pointers every interactive element reaches ~44px of tappable
   height without changing the visual design on desktop. */
@media (pointer: coarse), (max-width: 820px) {
  .footer a, .footer-bottom-links a, .utility-nav a,
  .crumbs a, .side-nav a, .page-nav a, .nav-primary a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .footer-grid a { min-height: 40px; }
  .btn, button, input[type="submit"], .news-cat-btn, summary { min-height: 44px; }
  .mobile-toggle { min-width: 44px; min-height: 44px; }
  .cat-chip, .cert-pill { min-height: 32px; display: inline-flex; align-items: center; }
}

/* --- 11. Tables: contained horizontal scroll -----------------------------
   Technical tables keep every column; the scroll is inside the wrapper and
   never moves the page. */
.table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--n-200); border-radius: var(--r-md);
  background:
    linear-gradient(90deg, var(--n-0) 30%, rgba(255,255,255,0)) left / 40px 100% no-repeat,
    linear-gradient(90deg, rgba(255,255,255,0), var(--n-0) 70%) right / 40px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(14,17,22,.10), transparent) left / 14px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(14,17,22,.10), transparent) right / 14px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.table-scroll .eram-table { margin: 0; border: 0; min-width: 560px; }
.table-scroll:focus-visible { outline: 2px solid var(--eram-red); outline-offset: 2px; }
.table-scroll-hint { display: none; font-size: 12px; color: var(--n-600); margin: 6px 0 0; }
@media (max-width: 820px) { .table-scroll-hint { display: block; } }

/* --- 12. Components that were fixed-width -------------------------------- */
@media (max-width: 640px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-facts { flex-direction: column; gap: 0; }
  .hero-facts .hf { border-right: 0; border-bottom: 1px solid var(--n-200);
                    padding: 12px 0; margin: 0; width: 100%; }
  .hero-facts .hf:last-child { border-bottom: 0; }
  .kf-lockup { flex-direction: column; align-items: flex-start; }
  .kf-lockup img { margin-left: 0 !important; }
  .sec-head { flex-direction: column; align-items: flex-start; }
  .cta-banner .hero-actions .btn { width: 100%; }
}

/* --- 13. Forms ------------------------------------------------------------ */
@media (max-width: 820px) {
  .form-grid, .form-row { grid-template-columns: minmax(0, 1fr); }
  input, select, textarea { width: 100%; font-size: 16px; }  /* 16px stops iOS zoom */
  .file-drop { padding: 20px 16px; }
}

/* --- 14. Motion and focus ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}
:focus-visible { outline: 2px solid var(--eram-red); outline-offset: 2px; border-radius: 2px; }

/* --- 15. Landscape phones ------------------------------------------------- */
@media (max-height: 480px) and (orientation: landscape) {
  .main-nav { position: static; }
  .page-header { padding: 32px 0 28px; }
}

/* --- 16. Header flex sizing ---------------------------------------------
   The brand anchor was stretching to fill the header, giving a clickable
   region up to a metre wide on a phone. It is now sized to its content and
   the primary navigation takes the remaining space. */
.main-nav .brand { flex: 0 0 auto; }
.main-nav .nav-primary { flex: 1 1 auto; min-width: 0; }
.main-nav .nav-actions { flex: 0 0 auto; margin-left: auto; }
@media (max-width: 1100px) { .main-nav .nav-actions { margin-left: auto; } }

/* --- 17. Utility bar containment ----------------------------------------
   .utility-nav is a flex row whose ".right" group uses margin-left:auto.
   Without an explicit basis the row grew past the viewport on small screens.
   It is now a contained horizontal-scroll region: the bar scrolls, the page
   does not. */
.utility-nav { max-width: 100%; box-sizing: border-box; }
@media (max-width: 1100px) {
  .utility-nav {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    white-space: nowrap; flex-wrap: nowrap;
    scrollbar-width: none; padding: 0 16px; gap: 14px;
  }
  .utility-nav::-webkit-scrollbar { display: none; }
  .utility-nav > * { flex: 0 0 auto; }
  .utility-nav .right { margin-left: auto; flex: 0 0 auto; display: flex; gap: 14px; align-items: center; }
}
@media (max-width: 640px) {
  /* On a phone the left-hand secondary links duplicate the mobile menu, so the
     bar carries only the language switch, login and the two primary actions. */
  .utility-nav > a { display: none; }
  .utility-nav .right { margin-left: 0; }
}

/* --- 18. Remaining audit items ------------------------------------------- */

/* Buttons with long labels were nowrap and could exceed a 320px viewport. */
@media (max-width: 640px) {
  .btn { white-space: normal; text-align: center; max-width: 100%; }
  .row .btn, .two-col .btn { width: 100%; justify-content: center; }
}

/* Minimum legible size: these classes set their own size later in the sheet,
   so they are restated here rather than relying on the block above. */
@media (max-width: 820px) {
  .cert-pill, .photo-pin, .cred-label, .svc-badge,
  .news-photo .photo-pin, .leader-photo .photo-pin { font-size: 12px; }
  .footer p, .footer span, .footer li { font-size: 12.5px; }
}

/* Standalone call-to-action links get a real tap area. Inline links inside
   running prose are deliberately left alone: WCAG 2.2 SC 2.5.8 exempts links
   in a sentence, and padding them would break the line box. */
@media (pointer: coarse), (max-width: 820px) {
  .link, .sec-head-link, .brand-card a, .news-card a,
  .legal-card .link, .pillar .link { display: inline-flex; align-items: center; min-height: 44px; }
  .main-nav .brand { min-height: 44px; }
}

/* The clipped skip link must not be reported or treated as a tap target. */
.skip-link:not(:focus) { pointer-events: none; }

/* --- 19. Backstop against sub-pixel page scroll ---------------------------
   Every genuine overflow cause has been corrected above; the element-level
   audit reports zero offenders at all twelve tested widths. This rule is a
   final guard against sub-pixel and scrollbar rounding inside the intentional
   scroll regions. `clip` is used rather than `hidden` because it does not
   create a scroll container and therefore does not break position:sticky on
   the header, and it does not hide element-level overflow from auditing. */
html { overflow-x: clip; }

/* --- 20. Nested grids inside a two-column layout -------------------------
   The auto-fit track rule in section 6 was also applying to .row when nested
   inside a .two-col column. Two 220px tracks plus the gap exceeded the 384px
   column, producing a 4px page overflow on six brand pages at 768px. Nested
   rows now collapse to a single column, and .two-col itself stacks below the
   navigation breakpoint. */
.two-col .row, .two-col-r .row,
.two-col .sector-grid-3, .two-col-r .sector-grid-3 { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1100px) {
  .two-col, .two-col-r { grid-template-columns: minmax(0, 1fr); }
}

/* --- 21. Cookie banner on small screens ----------------------------------
   At 320 x 568 the banner occupied 54% of the viewport, which obstructs the
   content and the navigation it sits over. On short screens the copy tightens,
   the actions become a full-width stack and the panel is capped at 45% of the
   viewport height with its own scroll if the text still exceeds it. */
@media (max-width: 640px) {
  .cookie-banner {
    left: 8px; right: 8px; bottom: 8px; width: auto; max-width: none;
    padding: 16px; max-height: 45vh; overflow-y: auto;
  }
  .cookie-banner h5 { font-size: 13px; margin-bottom: 6px; }
  .cookie-banner p  { font-size: 12.5px; line-height: 1.45; margin-bottom: 12px; }
  .cookie-banner .actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .cookie-banner .actions > * { width: 100%; justify-content: center; text-align: center; }
}
@media (max-height: 620px) and (max-width: 640px) {
  .cookie-banner p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

/* --- 22. Minimum legible type on mobile — complete pass ------------------
   The section 9 and 18 rules covered the classes found in the representative
   sample. The full 113-page sweep at every width surfaced the remainder.
   12px is the floor for any text a user has to read on a phone. */
@media (max-width: 820px) {
  .footer-certs .cert-pill,
  .brand-card .role, .brand-card .pill,
  .cat-body .cat-go, .cat-go,
  .job-tag, .job-tag.open,
  .tag, .tag-success, .svc-badge,
  .meta span, .meta, .note span, .legal-card div,
  form p, form small, .form-note { font-size: 12px !important; line-height: 1.5; }
}
@media (max-width: 820px) {
  .cap-group > .cap-head,
  aside h3, aside h4, aside h5 { font-size: 12px; }
}
@media (max-width: 820px) {
  .news-post-tag, .news-post-cat, .role,
  .side-nav h3, .side-nav h4, .side-nav h5,
  .aside-card h3, .aside-card h4 { font-size: 12px; }
}
@media (max-width: 820px) {
  .loc-card .role, .loc-card .loc-dir, .loc-card p, .loc-card a,
  .two-col-r aside h3, .two-col-r aside h4,
  aside > div h3, aside > div h4,
  .row > div > p, .row > div > p a { font-size: 12px; }
}

/* --- 23. Micro type token -------------------------------------------------
   Small uppercase labels were set with inline font-size:11px, which no
   stylesheet rule can override. The declaration is now a token so the same
   labels lift to the 12px mobile floor without touching colour or spacing. */
:root { --fs-micro: 11px; }
@media (max-width: 820px) { :root { --fs-micro: 12px; } }

/* --- 24. Card headings at any level --------------------------------------
   The heading-hierarchy pass in v1.30 promoted the first card in a grid but
   left its siblings one level lower, so the first card rendered larger than
   the rest. Sibling headings are now levelled in the markup; the component
   rules below accept h2 as well as h3 and h4 so a card looks identical
   whichever level the document outline requires. */
.leader h2, .sector-tile h2, .news-card h2, .loc-card h2, .pillar h2,
.legal-card h2, .role-row h2, .career-tile h2, .job-row .job-main h2,
.value-item h2, .step h2, .brand-card h2 { font-weight: 500; }
.leader h2, .leader h3, .leader h4 { font-size: 16px; margin: 0; }
.loc-card h2, .loc-card h3, .loc-card h4 { font-size: 16px; margin: 0; }
.legal-card h2, .legal-card h3, .legal-card h4 { font-size: 16px; margin: 0; }
.sector-tile h2, .sector-tile h3, .sector-tile h4 { font-size: 17px; color: var(--n-900); margin: 0; }
.pillar h2, .pillar h3, .pillar h4 { font-size: 18px; margin: 0 0 8px; }
.step h2, .step h3, .step h4 { font-size: 17px; margin: 0 0 8px; }
.news-card h2, .news-card h3, .news-card h4 { font-size: 18px; line-height: 1.3; color: var(--n-900); margin-bottom: 6px; }
.career-tile h2, .career-tile h3, .career-tile h4 { font-size: 17px; margin: 0; }
.value-item h2, .value-item h3, .value-item h4 { font-size: 15px; margin: 0 0 5px; }
.role-row h2, .role-row h3, .role-row h4 { font-size: 17px; margin: 0; }

/* ============================================================================
   v1.35 — LEADERSHIP TEAM
   A portrait-led team grid. Every card is identical in shape whether or not a
   photograph has been supplied, so the grid never goes ragged as photography
   arrives one person at a time.
   ============================================================================ */

.team-grid{
  display:grid;
  /* Three columns only where a card can still carry a readable portrait at a
     useful size; two below that, one on a phone. */
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:44px 34px;
  margin-top:36px;
  max-width:1100px;
}
@media (max-width:1240px){ .team-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:36px 28px; max-width:820px; } }
@media (max-width:700px){  .team-grid{ grid-template-columns:minmax(0,1fr); gap:30px; max-width:420px; } }

.team-member{ display:flex; flex-direction:column; }

/* 4:5 portrait — the standard for corporate team photography. object-fit keeps
   every face correctly framed regardless of the source crop. */
.team-photo{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:var(--r-md);
  background:linear-gradient(135deg, var(--n-150), var(--n-200));
  border:1px solid var(--n-200);
  margin-bottom:18px;
}
.team-photo img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 22%;
  display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.team-member:hover .team-photo img{ transform:scale(1.03); }
@media (prefers-reduced-motion:reduce){ .team-photo img{ transition:none } }

/* Awaiting photography — same shape, quiet treatment, never an empty hole. */
.team-photo.is-pending{ display:flex; align-items:center; justify-content:center; }
.team-photo.is-pending::after{
  content:attr(data-initials);
  font-family:var(--font-display, inherit);
  font-size:clamp(30px, 4vw, 44px);
  font-weight:300;
  letter-spacing:.06em;
  color:var(--n-400);
}
.team-photo.is-pending .pending-note{
  position:absolute; left:12px; bottom:12px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
  color:var(--n-500); background:rgba(255,255,255,.86);
  border:1px solid var(--n-200); border-radius:100px; padding:3px 10px;
}

.team-member h2,.team-member h3,.team-member h4{
  font-size:18px; font-weight:600; color:var(--n-900);
  margin:0 0 4px; line-height:1.25;
}
.team-role{
  font-size:13px; font-weight:500; color:var(--eram-red);
  letter-spacing:.01em; margin-bottom:10px;
}
.team-bio{ font-size:14px; color:var(--n-600); line-height:1.6; margin:0; }
.team-bio .pending{
  font-family:var(--font-mono); font-size:12px; color:var(--n-500);
}
.team-links{ margin-top:12px; display:flex; gap:14px; flex-wrap:wrap; }
.team-links a{ font-size:12.5px; color:var(--n-600); }
.team-links a:hover{ color:var(--eram-red); }

@media (max-width:820px){
  .team-photo{ margin-bottom:14px; }
  .team-member h2,.team-member h3,.team-member h4{ font-size:17px; }
  .team-photo.is-pending .pending-note{ font-size:12px; }
}

/* ============================================================================
   v1.36 — HOMEPAGE HERO
   The hero previously held an empty photography placeholder. For a technical
   distributor the most characteristic thing in the business is not atmosphere
   but the authorisation itself: which brands, at what status, in which
   territory. So the right-hand panel is set as an extract from the record —
   mono labels, hairline rules, status in brand red — because that is what a
   procurement officer or a manufacturer actually wants to see, and because it
   is what this site already runs on. Its content is written from
   _data/brand-status.json by the build script and cannot drift.
   ============================================================================ */

.hero{ padding:clamp(48px, 7vw, 104px) 0 clamp(40px, 5vw, 72px); }
.hero-grid{
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px, 5vw, 64px);
  align-items:start;
}
.hero h1{
  font-size:clamp(32px, 5.4vw, 60px);
  line-height:1.04;
  letter-spacing:-.026em;
  text-wrap:balance;
  margin-bottom:20px;
}
.hero .hero-supp{
  font-size:clamp(16px, 1.5vw, 19px);
  line-height:1.55;
  color:var(--n-600);
  max-width:52ch;
  margin-bottom:28px;
}

/* --- the authorisation record ------------------------------------------- */
.hero-record{
  border:1px solid var(--n-200);
  border-top:2px solid var(--n-900);
  border-radius:0 0 var(--r-md) var(--r-md);
  background:var(--n-0);
  padding:22px 24px 18px;
}
.hero-record-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding-bottom:14px; margin-bottom:4px;
  border-bottom:1px solid var(--n-150);
}
.hero-record-head .t{
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--n-900); font-weight:500;
}
.hero-record-head .s{
  font-family:var(--font-mono); font-size:11px; color:var(--n-500);
}
.hero-record dl{ margin:0; }
.hero-record .rec{
  display:grid; grid-template-columns:1fr auto;
  gap:2px 16px; align-items:baseline;
  padding:11px 0;
  border-bottom:1px solid var(--n-150);
}
.hero-record .rec:last-of-type{ border-bottom:0; }
.hero-record dt{ font-size:14.5px; font-weight:500; color:var(--n-900); }
.hero-record dd{
  margin:0;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.05em;
  text-transform:uppercase; text-align:right; white-space:nowrap;
}
.hero-record dd.is-exclusive{ color:var(--eram-red); font-weight:500; }
.hero-record dd.is-official{ color:var(--n-800); font-weight:500; }
.hero-record dd.is-authorised{ color:var(--n-600); }
.hero-record .terr{
  grid-column:1 / -1;
  font-size:12px; color:var(--n-500);
}
.hero-record-foot{
  margin-top:14px; padding-top:14px;
  border-top:1px solid var(--n-150);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:12.5px; color:var(--n-600);
}
.hero-record-foot a{ color:var(--eram-red); font-weight:500; white-space:nowrap; }

/* --- fact rail beneath the hero ------------------------------------------ */
.hero-rail{
  margin-top:clamp(32px, 4vw, 48px);
  border-top:1px solid var(--n-200);
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
}
.hero-rail div{ padding:18px 20px 0 0; }
.hero-rail div + div{ border-left:1px solid var(--n-200); padding-left:20px; }
.hero-rail .n{
  font-family:var(--font-mono); font-size:clamp(19px, 2.1vw, 24px);
  font-weight:500; color:var(--n-900); letter-spacing:-.01em; display:block;
}
.hero-rail .l{ font-size:12.5px; color:var(--n-600); margin-top:3px; display:block; }

@media (max-width:1100px){
  .hero-grid{ grid-template-columns:minmax(0,1fr); gap:36px; }
  .hero-record{ max-width:560px; }
}
@media (max-width:640px){
  .hero-rail{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .hero-rail div{ padding:16px 12px 12px 0; }
  .hero-rail div:nth-child(2n+1){ border-left:0; padding-left:0; }
  .hero-rail div:nth-child(n+3){ border-top:1px solid var(--n-200); }
  .hero-record{ padding:18px 18px 14px; }
  .hero-record dd{ font-size:11px; }
}

/* ============================================================================
   v1.37 — MOBILE DEFECT FIXES
   From screenshots taken on a 402px device. Three of the four were caused by
   earlier work in this project and are noted as such.
   ============================================================================ */

/* --- 1. Sticky in-page nav overlapped the prose on mobile ------------------
   .side-nav is position:sticky at top:96px. On desktop it sits in its own
   column, which is what sticky is for. Below the two-column breakpoint the
   grid collapses and the nav becomes a full-width block above the article —
   at which point sticky pins it over the text scrolling underneath. */
@media (max-width: 1100px) {
  .side-nav { position: static; top: auto; margin-bottom: 28px; }
  .side-nav + * { margin-top: 0; }
}

/* --- 2. Featured brand panel: logo above, description below ----------------
   The split was an inline "grid-template-columns:1fr 2fr", which no media
   query can override, so the description rendered in a 149px column at about
   19 characters per line. Now a class, and single-column on mobile. */
.split-1-2 { grid-template-columns: 1fr 2fr; gap: 48px; align-items: center; }
@media (max-width: 900px) {
  .split-1-2 { grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
  .split-1-2 > div:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
  .split-1-2 .brand-logo { margin-bottom: 0 !important; }
}
.is-single-col { grid-template-columns: minmax(0, 1fr); }

.feature-panel {
  background: var(--n-0); border: 1px solid var(--n-200);
  border-radius: var(--r-md); padding: 48px; margin-bottom: 64px;
}
@media (max-width: 900px) { .feature-panel { padding: 28px; margin-bottom: 40px; } }
@media (max-width: 480px) { .feature-panel { padding: 20px; margin-bottom: 32px; } }

/* --- 3. Footer was 2,878px tall on a phone ---------------------------------
   The 40px min-height added for touch targets was applied to all 38 footer
   links, turning the footer into an 1,900px stack. WCAG 2.2 AA (SC 2.5.8)
   requires 24x24; 44px is the AAA/best-practice figure and belongs on primary
   controls, not on a dense link list. Footer links now run at 32px with a
   two-column layout so the block is roughly a third of its previous height. */
@media (pointer: coarse), (max-width: 820px) {
  .footer-grid a { min-height: 32px; }
  .footer a { min-height: 32px; }
  .footer-bottom-links a, .utility-nav a { min-height: 40px; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 26px 20px; }
  .footer-grid > *:first-child { grid-column: 1 / -1; }
  .footer-col-title { margin-bottom: 8px; }
  .footer-grid ul, .footer-grid nav { display: flex; flex-direction: column; gap: 2px; }
  .footer-grid a { font-size: 13px; line-height: 1.35; }
}
@media (max-width: 380px) {
  .footer-grid { grid-template-columns: minmax(0,1fr); }
}

/* --- 4. "F-020" in the hero record head broke onto separate lines ---------- */
.hero-record-head .s { white-space: nowrap; flex: 0 0 auto; }
.hero-record-head .t { min-width: 0; }

/* --- 5. Footer density on phones -----------------------------------------
   The link columns were still the bulk of the footer. Tightened so the whole
   block reads as a compact directory rather than a long scroll: the brand
   blurb is shortened by clamping, the nav columns run at a normal list
   rhythm, and the certification pills wrap tightly instead of stacking. */
@media (max-width: 640px) {
  .footer-subscribe { padding-bottom: 22px; }
  .footer-brand p { font-size: 12.5px; line-height: 1.45; margin-bottom: 12px; }
  .footer-grid { gap: 22px 18px; }
  .footer-col-title, .footer-grid h4, .footer-grid h3 {
    font-size: 11.5px; letter-spacing: .1em; margin-bottom: 6px;
  }
  .footer-grid a { min-height: 30px; font-size: 13px; line-height: 1.3; }
  .footer-certs { gap: 6px; padding-top: 18px; }
  .footer-certs .cert-pill { padding: 4px 9px; }
  .footer-payments { padding-top: 18px; gap: 10px; }
  .footer-payments-icons img { height: 19px; }
  .footer-bottom { padding-top: 18px; gap: 8px; }
  .footer-bottom span { font-size: 11.5px; line-height: 1.45; }
}

/* --- 6. Multi-column lists on phones ---------------------------------------
   .tick-list is set to two columns. At 402px that gives 177px tracks — about
   22 characters a line, which is unreadable. Single column below the tablet
   breakpoint. */
@media (max-width: 760px) {
  .tick-list, .col-2, .col-list { column-count: 1 !important; columns: auto !important; }
}

/* --- 7. Closed disclosure panels ------------------------------------------
   Defensive: some engines lay out the contents of a closed <details>, which
   puts the answer on top of the following question. Hiding non-summary
   children explicitly guarantees the behaviour everywhere. */
.faq details:not([open]) > *:not(summary) { display: none; }
details:not([open]) > *:not(summary) { display: none; }

/* --- 8. Table column comfort inside the scroll region ----------------------
   A flat 560px min-width squeezed four-column tables into 45px cells. Letting
   the table size to its content, with 560px only as a floor, gives every
   column room; the wrapper scrolls either way. */
.table-scroll .eram-table { width: 100%; min-width: 560px; max-width: none; }
.table-scroll .eram-table td, .table-scroll .eram-table th { white-space: normal; }
@media (max-width: 820px) {
  .table-scroll .eram-table td, .table-scroll .eram-table th { min-width: 110px; padding: 10px 12px; }
  .table-scroll .eram-table td:first-child, .table-scroll .eram-table th:first-child { min-width: 130px; }
}

/* ============================================================================
   v1.38 — TRADE ACCOUNT BLOCK
   A dedicated homepage block for the trade account, modelled on the pattern
   competitors use for their B2B platforms: name the platform, list what the
   account actually gives you, and offer two doors — sign in, or apply.
   ============================================================================ */

.trade-block{
  background:linear-gradient(120deg, var(--n-900) 0%, #171C24 62%, #2B1017 100%);
  color:var(--n-100);
  border-radius:var(--r-md);
  padding:clamp(28px, 4vw, 52px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(28px, 4vw, 56px);
  align-items:center;
  position:relative; overflow:hidden;
}
.trade-block::after{
  content:''; position:absolute; right:-20%; top:-40%; width:70%; height:180%;
  background:radial-gradient(ellipse at center, rgba(200,16,46,.28), transparent 62%);
  pointer-events:none;
}
.trade-block > *{ position:relative; z-index:1; }
.trade-block .eyebrow{ color:var(--eram-red-200); margin-bottom:10px; }
.trade-block h2{ color:var(--n-0); margin:0 0 12px; font-size:clamp(22px,2.6vw,30px); }
.trade-block p{ color:var(--n-300); font-size:15.5px; line-height:1.6; margin:0 0 22px; max-width:46ch; }
.trade-block .hero-actions .btn-secondary{
  background:transparent; color:var(--n-0); border-color:rgba(255,255,255,.42);
}
.trade-block .hero-actions .btn-secondary:hover{ border-color:var(--n-0); }

.trade-benefits{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; }
.trade-benefits li{
  display:grid; grid-template-columns:auto 1fr; gap:0 14px; align-items:start;
  padding:13px 0; border-bottom:1px solid rgba(255,255,255,.12);
}
.trade-benefits li:first-child{ border-top:1px solid rgba(255,255,255,.12); }
.trade-benefits .k{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  color:var(--eram-red-200); padding-top:3px;
}
.trade-benefits .v{ font-size:14.5px; color:var(--n-200); line-height:1.5; }
.trade-benefits .v b{ color:var(--n-0); font-weight:600; }

@media (max-width:900px){
  .trade-block{ grid-template-columns:minmax(0,1fr); }
  .trade-block p{ max-width:none; }
}
@media (max-width:640px){
  .trade-block .hero-actions{ flex-direction:column; align-items:stretch; }
  .trade-block .hero-actions .btn{ width:100%; justify-content:center; }
}

/* ============================================================================
   v1.39 — LIGHT HEADER AND FOOTER
   Aligns the corporate site chrome with the ERAM Shop design system: a pale
   n-50 tint at both ends of the page, white through the middle, with the dark
   #2A2A28 RFQ button as the only heavy element in the header.

   Store-system tokens introduced here so the two properties share one source.
   Existing --n-* neutrals already match the store scale exactly; only the ink
   and dark-fill values are new.
   ============================================================================ */

:root{
  --ink:#4A4A45;        /* Brand Book v2 warm slate — text only, never a background */
  --dark-fill:#2A2A28;  /* RFQ button, dark campaign panels, partner plate       */
  --mark-tile:#1D2127;  /* white-mark logo tiles only                            */
}

/* --- Utility bar ---------------------------------------------------------- */
.utility-nav{
  background:var(--n-50);
  color:var(--n-500);
  border-bottom:1px solid var(--n-150);
}
.utility-nav a{ color:var(--n-600); }
.utility-nav a:hover{ color:var(--eram-red); }
.utility-nav .lang a{ color:var(--n-500); }
.utility-nav .lang a.active{ color:var(--ink); font-weight:500; }
.utility-nav .lang .sep{ color:var(--n-300); }
.login-link{ color:var(--n-600) !important; }
.login-link:hover{ color:var(--eram-red) !important; }

/* The one heavy element up top. */
.utility-nav a.rfq-link, .rfq-link{
  background:var(--dark-fill);
  border-color:var(--dark-fill);
  color:var(--n-0);
}
.utility-nav a.rfq-link:hover, .rfq-link:hover{
  background:var(--ink); border-color:var(--ink); color:var(--n-0);
}
/* Shop button keeps brand red and must beat the utility link colour. */
.utility-nav a.shop-link{ color:var(--n-0) !important; }

/* --- Main row and nav ----------------------------------------------------- */
.main-nav{ background:var(--n-0); border-bottom-color:var(--n-100); }
.main-nav .nav-primary a{ color:var(--ink); }
.main-nav .nav-primary a:hover,
.main-nav .nav-primary a[aria-current="page"]{ color:var(--eram-red); }
.search-trigger{ background:var(--n-0); border-color:var(--n-200); color:var(--n-500); }
.search-trigger:hover{ border-color:var(--n-300); }
.mobile-toggle{ color:var(--ink); }

/* --- Footer --------------------------------------------------------------- */
.footer{
  background:var(--n-50);
  color:var(--n-600);
  border-top:1px solid var(--n-150);
}
.footer h5, .footer-col-title{ color:var(--n-500); }
.footer ul a, .footer a{ color:var(--n-600); }
.footer ul a:hover, .footer a:hover{ color:var(--eram-red); }
.footer-brand p{ color:var(--n-600); }
.footer-brand .brand .sub{ color:var(--n-500); }
.footer-grid{ border-bottom-color:var(--n-150); }

.footer-subscribe{ border-bottom-color:var(--n-150); }
.footer-subscribe-text h5{ color:var(--ink); font-size:16px; letter-spacing:0; text-transform:none; }
.footer-subscribe-text p{ color:var(--n-600); }
.footer-subscribe-form input{
  background:var(--n-0); border-color:var(--n-200); color:var(--ink);
}
.footer-subscribe-form input::placeholder{ color:var(--n-500); }
.footer-subscribe-form input:focus{ border-color:var(--eram-red); }

.social-icons a{ border-color:var(--n-200); color:var(--n-600); background:var(--n-0); }
.social-icons a:hover{ border-color:var(--eram-red); background:var(--eram-red); color:var(--n-0); }

.footer-certs{ border-top-color:var(--n-150); }
.footer-certs .cert-pill{ background:var(--n-0); color:var(--n-600); border-color:var(--n-200); }

.footer-payments{ border-top:0; }
.footer-payments-label{ color:var(--n-500); }
.footer-payments-icons img{ background:var(--n-0); border:1px solid var(--n-150); }

.footer-bottom{ color:var(--n-500); border-top:1px solid var(--n-150); }
.footer-bottom > span{ color:var(--n-500); }
.footer-bottom-links a{ color:var(--n-600); }
.footer-bottom-links a:hover{ color:var(--eram-red); }
.footer-credit{ color:var(--n-500); }
.footer-credit a{ color:var(--n-600); }
.footer-credit a:hover{ color:var(--eram-red); }

/* Corporate-site button in the footer: white fill, hairline border, ink text. */
.footer .btn-secondary, .footer .btn-tertiary{
  background:var(--n-0); border-color:var(--n-200); color:var(--ink);
}
.footer .btn-secondary:hover, .footer .btn-tertiary:hover{ border-color:var(--n-300); }

/* --- Mobile menu panel sits on white; keep it consistent ------------------ */
@media (max-width:1100px){
  .main-nav.mobile-open .nav-primary{ background:var(--n-0); border-bottom-color:var(--n-150); }
  .main-nav.mobile-open .nav-primary a{ border-bottom-color:var(--n-100); color:var(--ink); }
}

/* --- v1.40 — social icons on touch devices --------------------------------
   34px is comfortable with a mouse but under the 44px target for a thumb.
   Padding is added rather than the box being enlarged, so the visual size is
   unchanged on desktop and the row does not grow taller on a phone. */
@media (pointer: coarse), (max-width: 820px) {
  .social-icons { gap: 8px; }
  .social-icons a { width: 44px; height: 44px; }
}


/* ============================================================================
   v1.46 — FULL-BLEED HERO SLIDER
   The hero spans the full viewport width, breaking out of the 1200px container.
   Two slide modes, because the assets are genuinely different:

     .is-photo    ERAM and Systemair photography with no text in the image.
                  object-fit:cover, ERAM headline overlaid on a scrim.
     .is-artwork  Manufacturer campaign banners with the logo and headline baked
                  into the pixels. object-fit:contain against the artwork's own
                  edge colour, so nothing is cropped and no second headline
                  competes with theirs.

   Both modes share one band height, so the hero never jumps between slides.
   ============================================================================ */

.hero{ padding:0; }
.hero-slider{ position:relative; width:100%; }
.hero-slides{ position:relative; }

.hero-slide{ display:none; position:relative; }
.hero-slide.is-active{ display:block; }
.hero-slide[hidden], .hero-slide:not(.is-active){ display:none; }

.hero-band{
  position:relative;
  width:100%;
  height:clamp(380px, 44vw, 660px);
  overflow:hidden;
  background:var(--band, var(--n-100));
}
.hero-band img{
  position:absolute; inset:0;
  width:100%; height:100%; display:block; max-width:none;
}
.is-photo .hero-band img{ object-fit:cover; object-position:50% 55%; }
.is-artwork .hero-band img{ object-fit:contain; object-position:50% 50%; }

.is-photo .hero-band::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,
    rgba(18,20,24,.88) 0%,
    rgba(18,20,24,.74) 34%,
    rgba(18,20,24,.32) 60%,
    rgba(18,20,24,.08) 100%);
}

.hero-overlay{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center;
}
.hero-overlay .container{ width:100%; }
.hero-overlay .eyebrow{ color:var(--eram-red-200); margin-bottom:12px; }
.hero-overlay h1, .hero-overlay h2{
  color:var(--n-0);
  font-size:clamp(26px, 3.6vw, 50px);
  line-height:1.08; letter-spacing:-.022em;
  max-width:17ch; margin:0 0 16px; text-wrap:balance;
}
.hero-overlay p{
  color:rgba(255,255,255,.90);
  font-size:clamp(14.5px, 1.35vw, 18px);
  line-height:1.55; max-width:50ch; margin:0 0 26px;
}
.hero-overlay .btn-secondary{
  background:transparent; color:var(--n-0); border-color:rgba(255,255,255,.5);
}
.hero-overlay .btn-secondary:hover{ border-color:var(--n-0); background:rgba(255,255,255,.08); }

.hero-caption{ background:var(--n-0); border-bottom:1px solid var(--n-150); }
.hero-caption .container{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap; padding-top:20px; padding-bottom:20px;
}
.hero-caption .eyebrow{ margin-bottom:4px; }
.hero-caption h2{ font-size:clamp(17px, 1.9vw, 23px); margin:0; color:var(--ink); }
.hero-caption p{ margin:5px 0 0; font-size:14px; color:var(--n-600); max-width:64ch; }
.hero-caption .hero-actions{ margin:0; flex:0 0 auto; }

.hero-controls{ background:var(--n-0); border-bottom:1px solid var(--n-150); }
.hero-controls .container{
  display:flex; align-items:center; gap:14px;
  padding-top:14px; padding-bottom:14px;
}
.hero-controls .lbl{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--n-500);
}
.hero-dots{ display:flex; gap:8px; }
.hero-dot{
  min-width:34px; height:34px; padding:0 10px;
  border:1px solid var(--n-200); background:var(--n-0); border-radius:100px;
  font-family:var(--font-mono); font-size:11px; color:var(--n-500);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:border-color .12s, color .12s, background-color .12s;
}
.hero-dot:hover{ border-color:var(--n-300); color:var(--ink); }
.hero-dot[aria-selected="true"]{ border-color:var(--eram-red); background:var(--eram-red); color:var(--n-0); }
.hero-nav{ display:flex; gap:8px; margin-left:auto; }
.hero-nav button{
  width:38px; height:38px; border:1px solid var(--n-200); background:var(--n-0);
  border-radius:4px; color:var(--n-600); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.hero-nav button:hover{ border-color:var(--n-300); color:var(--ink); }
.hero-nav svg{ width:16px; height:16px; }
.hero-progress{ font-family:var(--font-mono); font-size:11px; color:var(--n-500); white-space:nowrap; }

.hero-rail{
  margin:0; border-top:0; border-bottom:1px solid var(--n-200);
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
}
.hero-rail div{ padding:18px 20px 18px 0; }
.hero-rail div + div{ border-left:1px solid var(--n-200); padding-left:20px; }
.hero-rail .n{
  font-family:var(--font-mono); font-size:clamp(19px, 2.1vw, 24px);
  font-weight:500; color:var(--n-900); letter-spacing:-.01em; display:block;
}
.hero-rail .l{ font-size:12.5px; color:var(--n-600); margin-top:3px; display:block; }

@media (max-width:1100px){
  .hero-band{ height:clamp(320px, 52vw, 520px); }
  .hero-overlay h1, .hero-overlay h2{ max-width:20ch; }
}
@media (pointer:coarse), (max-width:820px){
  .hero-dot{ height:44px; min-width:44px; }
  .hero-nav button{ width:44px; height:44px; }
}
@media (max-width:640px){
  .hero-band{ height:auto; aspect-ratio:16/11; }
  .is-artwork .hero-band{ aspect-ratio:auto; height:auto; }
  .is-artwork .hero-band img{ position:static; height:auto; }
  .is-photo .hero-band::after{
    background:linear-gradient(180deg, rgba(18,20,24,.50) 0%, rgba(18,20,24,.80) 60%, rgba(18,20,24,.92) 100%);
  }
  .hero-overlay{ align-items:flex-end; padding-bottom:10px; }
  .hero-overlay h1, .hero-overlay h2{ max-width:none; }
  .hero-overlay .hero-actions{ flex-direction:column; align-items:stretch; width:100%; }
  .hero-overlay .hero-actions .btn{ width:100%; justify-content:center; }
  .hero-caption .container{ flex-direction:column; align-items:flex-start; }
  .hero-caption .hero-actions{ width:100%; }
  .hero-caption .hero-actions .btn{ width:100%; justify-content:center; }
  .hero-controls .container{ flex-wrap:wrap; }
  .hero-nav{ margin-left:0; }
  .hero-rail{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .hero-rail div{ padding:14px 12px 14px 0; }
  .hero-rail div:nth-child(2n+1){ border-left:0; padding-left:0; }
  .hero-rail div:nth-child(n+3){ border-top:1px solid var(--n-200); }
}

/* --- Breadcrumb inside a hero overlay -------------------------------------
   .crumbs carries --n-600 from the light-header fix, which disappears on the
   scrim. Restate it for the overlay only. */
.hero-overlay .crumbs, .hero-overlay .crumbs a{ color:rgba(255,255,255,.80); }
.hero-overlay .crumbs a:hover{ color:var(--n-0); }
.hero-overlay .crumbs .sep{ color:rgba(255,255,255,.45); }
.hero-overlay .crumbs .here{ color:rgba(255,255,255,.95); }
.hero-overlay .crumbs{ margin-bottom:16px; }

/* --- check-list inside a pillar ------------------------------------------
   .pillar ul sets list-style:disc; the check-list draws its own tick, so the
   two markers doubled up. Reset the disc where the classes coincide. */
.pillar ul.check-list, .check-list{ list-style:none; margin-left:0; padding-left:0; }
.pillar ul.check-list li{ margin-bottom:0; }

/* --- v1.49 — scrim must not cover the manufacturer's mark ------------------
   The Hisense wordmark sits top-left on the campaign artwork, which is exactly
   where the scrim was darkest. The scrim is now masked out of the top band, so
   the maker's logo stays legible while ERAM's copy still reads against it. */
.is-photo .hero-band::after{
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 12%, #000 26%, #000 100%);
          mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 12%, #000 26%, #000 100%);
}
/* Copy sits in the lower two-thirds so it never rides over a logo or a lockup. */
.hero-overlay{ align-items:flex-end; padding-bottom:clamp(28px, 5vw, 64px); }
@media (max-width:640px){
  .is-photo .hero-band::after{
    -webkit-mask-image:none; mask-image:none;
  }
  .hero-overlay{ padding-bottom:14px; }
}

/* ============================================================================
   v1.54 — AVAILABILITY MODEL
   A three-class statement of how catalogue listing relates to stock, applied
   identically on every sector page. Classification is a data decision; supply
   is a commercial one. Saying so once, in the same words everywhere, is what
   stops a catalogue entry from reading as a promise.
   ============================================================================ */

.availability{
  border:1px solid var(--n-200); border-left:3px solid var(--n-400);
  border-radius:0 var(--r-md) var(--r-md) 0;
  background:var(--n-0); padding:22px 24px; margin-top:28px;
}
.availability > h3{
  font-size:15px; margin:0 0 6px; color:var(--ink); font-weight:600;
}
.availability > p{ font-size:14px; color:var(--n-600); line-height:1.6; margin:0 0 16px; max-width:none; }
.avail-classes{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0; margin:0; padding:0; list-style:none; }
.avail-classes li{ padding:14px 20px 4px 0; border-top:1px solid var(--n-150); }
.avail-classes li + li{ border-left:1px solid var(--n-150); padding-left:20px; }
.avail-classes .k{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  display:block; margin-bottom:5px;
}
.avail-classes .stocked .k{ color:#15803D; }
.avail-classes .quoted  .k{ color:#1D4ED8; }
.avail-classes .order   .k{ color:#B45309; }
.avail-classes .n{ display:block; font-size:14px; font-weight:600; color:var(--ink); margin-bottom:3px; }
.avail-classes .d{ display:block; font-size:13px; color:var(--n-600); line-height:1.5; }
.availability > .foot{ font-size:13px; color:var(--n-600); margin:18px 0 0; padding-top:14px; border-top:1px solid var(--n-150); max-width:none; }
.availability .foot a{ color:var(--eram-red); font-weight:500; }

@media (max-width:820px){
  .avail-classes{ grid-template-columns:minmax(0,1fr); }
  .avail-classes li + li{ border-left:0; padding-left:0; }
  .availability{ padding:18px; }
}

/* ============================================================================
   v1.56 — SECTOR IMAGERY
   Tiles carry a square photograph; sector pages carry the same full-bleed hero
   band the homepage uses, so the two properties share one hero system.
   ============================================================================ */

.sector-tile{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.tile-media{
  display:block; aspect-ratio:1/1; overflow:hidden; background:var(--n-100);
  border-bottom:1px solid var(--n-150);
}
.tile-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
.sector-tile:hover .tile-media img{ transform:scale(1.04); }
@media (prefers-reduced-motion:reduce){ .tile-media img{ transition:none } }

.sector-tile > .code,
.sector-tile > h2,
.sector-tile > p,
.sector-tile > .skus{ padding-left:20px; padding-right:20px; }
.sector-tile > .code{ padding-top:16px; }
.sector-tile > .skus{ padding-bottom:16px; margin-top:auto; }
.sector-tile > h2{ font-size:17px; margin:4px 0 6px; }
.sector-tile > p{ font-size:13.5px; line-height:1.5; }

@media (max-width:640px){
  .tile-media{ aspect-ratio:16/9; }
}

/* --- Brand category card with two destinations ---------------------------- */
.brand-cats{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap:14px; margin:26px 0 0; padding:0; list-style:none;
}
.brand-cat{
  display:flex; flex-direction:column; gap:8px;
  border:1px solid var(--n-200); border-radius:var(--r-md);
  background:var(--n-0); padding:18px 18px 16px;
}
.brand-cat h3{ font-size:16px; margin:0; color:var(--ink); }
.brand-cat p{ font-size:13.5px; color:var(--n-600); line-height:1.5; margin:0; flex:1 1 auto; }
.brand-cat .acts{ display:flex; gap:14px; flex-wrap:wrap; padding-top:10px; border-top:1px solid var(--n-150); }
.brand-cat .acts a{ font-size:12.5px; font-weight:500; display:inline-flex; align-items:center; gap:5px; }
.brand-cat .shop{ color:var(--eram-red); }
.brand-cat .mfr{ color:var(--n-600); }
.brand-cat .mfr:hover{ color:var(--ink); }
.brand-cat .acts svg{ width:12px; height:12px; opacity:.75; }
@media (pointer:coarse), (max-width:820px){ .brand-cat .acts a{ min-height:44px; } }

.app-strip{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,190px),1fr)); gap:10px; margin:20px 0 0; padding:0; list-style:none; }
.app-strip a{
  display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:52px;
  border:1px solid var(--n-200); border-radius:var(--r-md); padding:12px 14px;
  font-size:13.5px; font-weight:500; color:var(--ink); background:var(--n-0);
}
.app-strip a:hover{ border-color:var(--eram-red); color:var(--eram-red); }
.app-strip svg{ width:12px; height:12px; opacity:.7; flex:none; }

/* ============================================================================
   v1.58 — HOMEPAGE INDUSTRY CARDS AND SECTOR BRAND GRID
   ============================================================================ */

/* The .has-photo variant existed but expected a CSS background, which cannot
   carry a srcset. The photograph is an <img> layer instead, so the browser
   picks the right file for the device. */
.ind-media{ position:absolute; inset:0; z-index:-3; display:block; overflow:hidden; }
.ind-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.industry-card.has-photo:hover .ind-media img{ transform:scale(1.05); }
@media (prefers-reduced-motion:reduce){ .ind-media img{ transition:none } }
.industry-card.has-photo::before{
  background:linear-gradient(0deg, rgba(16,18,22,.94) 0%, rgba(16,18,22,.62) 44%, rgba(16,18,22,.24) 100%);
}

/* --- Featured brands: fill the row instead of forcing three -----------------
   Brand counts per sector run from 0 to 5. A fixed three-column grid leaves a
   gap on the pages with four or five and stretches the cards on the ones with
   one or two. auto-fit sizes to the content and caps at five. */
.brand-row{
  display:grid;
  /* auto-FILL, not auto-fit: empty tracks are kept, so a sector with one
     featured brand shows one normal-sized card rather than one card stretched
     across the full row. */
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 190px), 1fr));
  gap:14px; margin:16px 0 48px;
  align-items:stretch;
}
.brand-row .brand-card{ margin:0; }
.brand-row .brand-card .brand-logo{ height:54px; margin-bottom:10px; }
.brand-row .brand-card .brand-logo img{ max-height:38px; }
.brand-row .brand-card p{ font-size:12.5px; }
@media (max-width:520px){
  .brand-row{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
}

/* ============================================================================
   v1.60 — BRAND PRODUCT AND APPLICATION CARDS
   The card is built to carry a photograph. Until one is supplied it renders as
   a clean typographic card rather than a repeated placeholder icon — the same
   decision taken on the Systemair category list. Adding the <picture> block is
   the only change needed when imagery arrives; no CSS or markup restructuring.
   ============================================================================ */

.pcards{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap:16px; margin:24px 0 0; padding:0; list-style:none;
}
.pcards.is-wide{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }

.pcard{
  display:flex; flex-direction:column;
  border:1px solid var(--n-200); border-radius:var(--r-md);
  background:var(--n-0); overflow:hidden; color:var(--ink);
  transition:border-color .14s, box-shadow .14s, transform .14s;
}
.pcard:hover{
  border-color:var(--eram-red); transform:translateY(-2px);
  box-shadow:0 10px 26px -16px rgba(20,23,28,.4);
}
.pcard-media{
  display:block; aspect-ratio:4/3; overflow:hidden;
  background:linear-gradient(150deg, var(--n-100), var(--n-150));
  border-bottom:1px solid var(--n-150); position:relative;
}
.pcard-media img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .55s cubic-bezier(.2,.7,.3,1); }
.pcard:hover .pcard-media img{ transform:scale(1.05); }
@media (prefers-reduced-motion:reduce){ .pcard-media img{ transition:none } }

/* No photograph yet: a quiet initial mark, not a repeated icon. */
.pcard-media.is-pending::after{
  content:attr(data-mark); position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:clamp(22px, 3vw, 30px);
  font-weight:400; letter-spacing:.06em; color:var(--n-300);
}
.pcard-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1 1 auto; }
.pcard-body h4{ font-size:15px; margin:0; color:var(--ink); font-weight:600; line-height:1.3; }
.pcard-body p{ font-size:13px; color:var(--n-600); line-height:1.5; margin:0; flex:1 1 auto; }
.pcard-acts{ display:flex; gap:14px; flex-wrap:wrap; padding-top:10px; margin-top:2px; border-top:1px solid var(--n-150); }
.pcard-acts a{ font-size:12px; font-weight:500; display:inline-flex; align-items:center; gap:5px; }
.pcard-acts .shop{ color:var(--eram-red); }
.pcard-acts .mfr{ color:var(--n-600); }
.pcard-acts .mfr:hover{ color:var(--ink); }
.pcard-acts svg{ width:11px; height:11px; opacity:.75; }
@media (pointer:coarse), (max-width:820px){ .pcard-acts a{ min-height:44px; } }
@media (max-width:520px){ .pcards, .pcards.is-wide{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .pcard-body{ padding:12px; } .pcard-body h4{ font-size:14px; } }

/* Card title promoted from h4 to h3 so the outline never skips a level;
   the size is restated here so the card is visually unchanged. */
.pcard-body h3.pcard-title{ font-size:15px; margin:0; color:var(--ink); font-weight:600; line-height:1.3; }
@media (max-width:520px){ .pcard-body h3.pcard-title{ font-size:14px; } }

/* A hero without a slider still needs its own spacing; .hero{padding:0} exists
   for the full-bleed band only. */
.hero:not(:has(.hero-slider)){ padding:clamp(40px, 6vw, 88px) 0 clamp(32px, 4vw, 56px); }

/* --- Compact card variant ---------------------------------------------------
   For long category lists. Same component, smaller media and type, so a page
   with 49 of them stays scannable rather than becoming a catalogue in itself. */
.pcards.is-tight{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 178px), 1fr)); gap:12px; margin-top:16px; }
.pcards.is-tight .pcard-media{ aspect-ratio:3/2; }
.pcards.is-tight .pcard-media.is-pending::after{ font-size:20px; }
.pcards.is-tight .pcard-body{ padding:11px 12px 12px; gap:4px; }
.pcards.is-tight .pcard-body h3.pcard-title{ font-size:13.5px; }
.pcards.is-tight .pcard-body p{ display:none; }
.pcards.is-tight .pcard-acts{ padding-top:8px; }
.pcards.is-tight .pcard-acts a{ font-size:11.5px; }
@media (max-width:520px){ .pcards.is-tight{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:9px; } }

/* ============================================================================
   v1.64 — BRAND CATEGORY BLOCKS (restored)
   These rules were lost in an earlier stylesheet edit; the markup that depends
   on them survived, so the manufacturer-link icon rendered at its intrinsic
   300x150 default. Restored and re-verified.
   ============================================================================ */

.cat-block{ margin-top:38px; }
.cat-block:first-of-type{ margin-top:26px; }
.cat-block-head{ padding-bottom:12px; margin-bottom:16px; border-bottom:1px solid var(--n-200); }
.cat-block-head .row-top{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.cat-block-head h3{ margin:0; font-size:19px; color:var(--ink); }
.cat-block-head .mfr{
  font-size:12.5px; font-weight:500; color:var(--n-600); white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
}
.cat-block-head .mfr:hover{ color:var(--eram-red); }
.cat-block-head .mfr svg{ width:11px; height:11px; opacity:.7; flex:none; }
.cat-block-head .desc{ font-size:13.5px; color:var(--n-600); margin:8px 0 0; max-width:78ch; }
@media (max-width:820px){ .cat-block-head .row-top{ flex-direction:column; align-items:flex-start; gap:6px; } }

/* Guard: any inline SVG inside a link or button is an icon, never a 300x150
   block. This is what the missing rule would have prevented. */
a svg:not([width]):not([height]), button svg:not([width]):not([height]){
  width:1em; height:1em; flex:none;
}

/* ============================================================================
   v1.66 — RESPONSIVE QA REMEDIATION
   From the 117-page x 12-width matrix. Page and element overflow were already
   zero; these are the remaining touch-target, type-size and clipping items.
   ============================================================================ */

/* --- 1. Footer nav links: 30px tall, below the 44px thumb target ------------
   The 1.37 fix set min-height on `.footer a` but the footer nav lists use
   `li > a` inside `.footer-grid`, which the compact-footer rules then reduced.
   Padding is added rather than height, so the visual density is unchanged and
   the tap area grows into the gap between rows. */
@media (pointer: coarse), (max-width: 820px) {
  .footer-grid li > a{
    min-height:44px; padding-block:7px; align-items:center;
  }
  .footer-grid ul, .footer-grid nav{ gap:0; }
}

/* --- 2. Minimum 12px type on mobile ----------------------------------------
   Footer legal line, developer credit and slider labels were 11–11.5px. */
@media (max-width: 820px) {
  .footer-bottom > span,
  .footer-credit, .footer-credit a,
  .hero-controls .lbl, .hero-progress{ font-size:12px; }
}

/* --- 3. Clipping ------------------------------------------------------------
   .cta-banner and .trade-block use overflow:hidden to contain a decorative
   radial gradient. On narrow screens the copy grew past the fixed height and
   was being clipped with it. Height is now content-driven; the decoration is
   still contained. */
.cta-banner, .trade-block{ min-height:0; height:auto; }
@media (max-width: 820px) {
  .cta-banner{ padding-block:clamp(32px, 7vw, 56px); }
  .trade-block{ padding:clamp(24px, 6vw, 40px); }
}
/* Category names must wrap rather than be cut off. */
.cat-name, .pcard-title{ overflow:visible; white-space:normal; overflow-wrap:anywhere; }

/* --- 4. Remaining sub-12px type and tap targets ---------------------------
   Links inside a .note are prose links in a sentence and are exempt under
   WCAG 2.2 SC 2.5.8; they are given a comfortable line-box instead of a box
   height, so the sentence does not break. The rest are raised to 12px. */
@media (max-width: 820px) {
  .avail-classes .k{ font-size:12px; }
  .pcard-acts a{ font-size:12px; }
  .cat-block-head .mfr{ min-height:44px; }
  .note a{ line-height:1.9; }
}

/* .pcards.is-tight reduces the action link to 11.5px; the mobile floor wins. */
@media (max-width: 820px) {
  .pcards.is-tight .pcard-acts a{ font-size:12px; }
  .footer-credit a{ min-height:44px; }
}

/* --- 5. Last standalone links below the touch target ----------------------
   Block-level links in cards, sidebars and consent rows. Inline links inside
   a sentence remain exempt under WCAG 2.2 SC 2.5.8 — padding them would break
   the line box and the sentence with it. */
@media (pointer: coarse), (max-width: 820px) {
  aside a, .legal-card a, .legal-card .link,
  .form-note a, .consent-row a,
  .side-nav a, .page-nav a{ display:inline-flex; align-items:center; min-height:44px; }
  .consent-row a, .form-note a{ display:inline; line-height:2.2; }
}
@media (pointer: coarse), (max-width: 820px) {
  .loc-card a, .loc-dir{ display:inline-flex; align-items:center; min-height:44px; }
}

/* ============================================================================
   v1.71 — MOBILE FORM FIELDS
   The v1.31 rule set 16px on bare `input, select, textarea` (0,0,1), which
   `.form-field input` (0,1,1) outranks — so fields stayed at 14px and iOS
   Safari zooms the viewport on focus, which is one of the most disorienting
   things a mobile form can do. Restated at matching specificity.
   ============================================================================ */
@media (max-width: 820px) {
  .form-field input, .form-field select, .form-field textarea,
  .apply-form input, .apply-form select, .apply-form textarea,
  .form-grid input, .form-grid select, .form-grid textarea,
  form input, form select, form textarea{
    font-size:16px;
  }
  /* File inputs keep their smaller label but still avoid the zoom trigger. */
  .form-field input[type=file]{ font-size:16px; }
  /* Checkboxes and radios need a real tap area, not a 13px box. */
  .form-field input[type=checkbox], .form-field input[type=radio],
  form input[type=checkbox], form input[type=radio]{
    width:22px; height:22px; min-height:0; flex:none; accent-color:var(--eram-red);
  }
  .consent-row{ display:flex; align-items:flex-start; gap:12px; min-height:44px; }
  .consent-row input{ margin-top:2px; }
}
@media (max-width: 820px) {
  .footer-subscribe-form input{ font-size:16px; min-height:44px; }
  .apply-form input, .apply-form select, .apply-form textarea{ min-height:44px; }
  .apply-form textarea{ min-height:120px; }
}

/* ============================================================================
   v1.73 — MOBILE HERO LEGIBILITY
   The phone scrim ran 50% to 92% opacity over a 258px band, which made the
   photograph effectively invisible — the hero read as text on a dark panel.
   The band is taller, the scrim lighter and weighted to the bottom where the
   copy sits, so the image is visible and the text still clears AA.
   ============================================================================ */
@media (max-width:640px){
  .hero-band{ aspect-ratio:4/3; }
  .is-photo .hero-band::after{
    background:linear-gradient(180deg,
      rgba(16,18,22,.10) 0%,
      rgba(16,18,22,.30) 38%,
      rgba(16,18,22,.72) 72%,
      rgba(16,18,22,.88) 100%);
  }
  .hero-overlay{ align-items:flex-end; padding-bottom:18px; }
  .hero-overlay h1, .hero-overlay h2{ font-size:clamp(23px, 6.4vw, 30px); margin-bottom:10px; }
  .hero-overlay p{ font-size:14px; line-height:1.45; margin-bottom:16px; }
}
@media (max-width:400px){
  .hero-band{ aspect-ratio:1/1; }
  .hero-overlay p{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
}

/* ============================================================================
   v1.75 — FAQ BLOCKS (AEO)
   Question-shaped headings with answers, marked up as FAQPage. This is the
   structure answer engines and generative engines extract; a page that never
   asks a question is hard to quote.
   ============================================================================ */
.faq-block{ margin-top:36px; }
.faq-block > h2{ margin-bottom:6px; }
.faq-block > .lede{ margin-bottom:20px; }
.faq-item{ border-top:1px solid var(--n-200); }
.faq-item:last-child{ border-bottom:1px solid var(--n-200); }
.faq-item > summary{
  list-style:none; cursor:pointer; padding:18px 40px 18px 0; position:relative;
  font-size:16px; font-weight:600; color:var(--ink); line-height:1.4;
}
.faq-item > summary::-webkit-details-marker{ display:none; }
.faq-item > summary::after{
  content:''; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--n-500); border-bottom:2px solid var(--n-500);
  transform:translateY(-70%) rotate(45deg); transition:transform .18s;
}
.faq-item[open] > summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq-item > summary:hover{ color:var(--eram-red); }
.faq-item > summary:hover::after{ border-color:var(--eram-red); }
.faq-answer{ padding:0 0 20px; font-size:14.5px; line-height:1.65; color:var(--n-600); max-width:78ch; }
.faq-answer p + p{ margin-top:10px; }
.faq-answer a{ color:var(--eram-red); font-weight:500; }
@media (pointer:coarse), (max-width:820px){
  .faq-item > summary{ min-height:56px; display:flex; align-items:center; font-size:15px; }
}