/* LUMIQ design system — shared by every page. Generated from the homepage reference. */
/* ============ LUMIQ design tokens ============ */
:root{
  --orange:#F36B1D; --orange-ink:#C25617; --orange-lift:#FF701E;
  --black:#000; --ink:#111114; --charcoal:#352F3D; --white:#fff;
  --grey-light:#F2F2F2; --grey-ink:#747474;
  --font:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-disp:"Google Sans","Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mx:clamp(20px,5vw,80px);
  --s1:clamp(.83rem,.80rem + .15vw,.90rem);
  --s0:clamp(1rem,.96rem + .2vw,1.08rem);
  --s2:clamp(1.3rem,1.2rem + .4vw,1.5rem);
  --s3:clamp(1.8rem,1.5rem + 1.3vw,2.7rem);
  --s4:clamp(2.4rem,1.7rem + 3vw,4.6rem);
  --s5:clamp(3rem,1.9rem + 5.6vw,7.4rem);
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
html[data-theme="dark"]{
  --bg:var(--black); --bg-2:#0B0B0D; --bg-3:#141417;
  --tx:var(--white); --tx-2:#A8A8AE; --line:#26262B; --accent-tx:var(--orange-lift);
  --card:#0E0E11;
}
html[data-theme="light"]{
  --bg:#F3F2EE; --bg-2:#EDECE7; --bg-3:#E6E5DF;
  --tx:var(--black); --tx-2:#6E6E68; --line:#DAD9D2; --accent-tx:var(--orange-ink);
  --card:#FBFAF8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--font);font-size:var(--s0);
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{line-height:1.08;letter-spacing:-.028em;margin:0;font-weight:800}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1280px;margin:0 auto;padding-inline:var(--mx)}
.skip{position:absolute;left:-9999px;background:var(--orange);color:#000;padding:12px 20px;
  z-index:100;font-weight:700;border-radius:0 0 6px 0}
.skip:focus{left:0;top:0}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:2px}

/* ============ header ============ */
header{position:sticky;top:0;z-index:50;padding:14px 0;background:transparent}
header::before{content:"";position:absolute;inset:0;backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  background:linear-gradient(var(--bg) 55%,transparent);pointer-events:none}
.nav{display:flex;align-items:center;gap:26px;height:64px;position:relative;
  background:var(--card);border:1px solid var(--line);border-radius:100px;
  padding:0 12px 0 24px;max-width:1240px}
@media (max-width:960px){.nav{border-radius:16px;padding:0 10px 0 18px}}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{height:30px;width:auto}
html[data-theme="dark"] .l-light{display:none}
html[data-theme="light"] .l-dark{display:none}
.nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0;font-size:.93rem;font-weight:500}
.nav ul a{text-decoration:none;color:var(--tx-2);transition:color .15s;padding:6px 0;display:block}
.nav ul a:hover{color:var(--tx)}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:12px}
.tgl{background:none;border:1px solid var(--line);color:var(--tx-2);width:38px;height:38px;
  border-radius:8px;cursor:pointer;display:grid;place-items:center;flex-shrink:0}
.tgl:hover{border-color:var(--orange);color:var(--tx)}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:650;text-decoration:none;
  padding:12px 22px;border-radius:8px;font-size:.93rem;border:1px solid transparent;
  transition:transform .15s,background .15s;white-space:nowrap;cursor:pointer;font-family:inherit}
.btn:hover{transform:translateY(-1px)}
/* brand orange fill ALWAYS takes black text — white on orange fails WCAG AA */
.btn-p{background:var(--orange);color:#000}
.btn-p:hover{background:#FF7A2E}
.btn-s{border-color:var(--line);color:var(--tx);background:transparent}
.btn-s:hover{border-color:var(--orange)}
.burger{display:none;background:none;border:1px solid var(--line);color:var(--tx);width:38px;
  height:38px;border-radius:8px;cursor:pointer}
@media (max-width:960px){
  .nav ul{display:none} .burger{display:grid;place-items:center}
  .nav ul.open{display:flex;position:absolute;top:74px;left:0;right:0;background:var(--bg);
    flex-direction:column;gap:0;padding:12px var(--mx) 24px;border-bottom:1px solid var(--line)}
  .nav ul.open li{border-bottom:1px solid var(--line)}
  .nav ul.open a{padding:15px 0;font-size:1.05rem}
  .nav-r .btn-p{display:none}
}

/* ============ hero ============ */
.hero{position:relative;padding:clamp(80px,13vw,190px) 0 clamp(64px,9vw,130px);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 100% at 8% -10%,rgba(243,107,29,.16),transparent 62%)}
html[data-theme="light"] .hero::before{background:radial-gradient(70% 100% at 8% -10%,rgba(243,107,29,.10),transparent 62%)}
.hero>*{position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:.72rem;
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-2);margin-bottom:30px}
.eyebrow::before{content:"";width:30px;height:1px;background:var(--orange);flex-shrink:0}
.eyebrow b{color:var(--accent-tx);font-weight:600}
h1{font-size:var(--s5);font-weight:850;max-width:15ch;line-height:.94;letter-spacing:-.042em}
h1 em{font-style:normal;color:var(--orange);display:block}
/* highlighter: orange marker block behind a phrase (black text stays AA on orange) */
.mark{background:var(--orange);color:#000;padding:.02em .22em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;border-radius:3px}
.sub{font-size:clamp(1.05rem,.98rem + .55vw,1.35rem);color:var(--tx-2);max-width:56ch;margin-top:32px;
  line-height:1.55}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px;
  margin-top:clamp(52px,7vw,86px);background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.stat{background:var(--bg);padding:26px 24px}
.stat b{display:block;font-size:clamp(1.8rem,1.4rem + 1.4vw,2.7rem);font-weight:850;letter-spacing:-.03em;line-height:1}
.stat b span{color:var(--orange)}
.stat i{display:block;font-style:normal;color:var(--tx-2);font-size:.83rem;margin-top:9px;line-height:1.4}

/* ============ generic section ============ */
section{padding:clamp(46px,5.5vw,86px) 0}
.alt{background:var(--bg-2);border-block:1px solid var(--line)}
.hd{max-width:52ch;margin-bottom:clamp(24px,3vw,40px)}
.kicker{font-family:var(--mono);font-size:.71rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx-2);margin-bottom:18px;display:flex;align-items:center;gap:12px}
.kicker::before{content:"";width:24px;height:1px;background:var(--orange);flex-shrink:0}
h2{font-size:var(--s4);font-weight:830;line-height:1.02;letter-spacing:-.035em}
.hd p{color:var(--tx-2);margin-top:16px;font-size:1.02rem}

/* trust strip */
.trust{padding:30px 0;border-bottom:1px solid var(--line)}
.trust-in{display:flex;align-items:center;gap:clamp(16px,3vw,44px);flex-wrap:wrap;justify-content:center}
.trust span{font-size:.74rem;font-weight:650;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tx-2);padding:7px 15px;border:1px solid var(--line);border-radius:100px}
.trust .lead{border:0;padding:0;color:var(--tx);font-weight:700}

/* cards */
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:30px 28px;
  transition:border-color .18s,transform .18s;position:relative}
.card:hover{border-color:var(--orange);transform:translateY(-3px)}
.card .num{font-size:.7rem;font-weight:800;letter-spacing:.12em;color:var(--accent-tx)}
.card h3{font-size:1.24rem;margin:14px 0 10px;font-weight:750;letter-spacing:-.015em}
.card p{color:var(--tx-2);font-size:.94rem;line-height:1.6}
a.card{text-decoration:none;display:block}
.card .go{margin-top:18px;font-size:.85rem;font-weight:650;color:var(--accent-tx);display:inline-flex;gap:7px}

/* industries */
.ind{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ind>div{background:var(--bg);padding:34px 30px;transition:background .18s}
.ind>div:hover{background:var(--bg-3)}
.ind h3{font-size:1.3rem;font-weight:780;margin-bottom:10px}
.ind p{color:var(--tx-2);font-size:.93rem}
.ind .bar{width:34px;height:3px;background:var(--orange);margin-bottom:20px}

/* quotes */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}
.q{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--orange);
  border-radius:0 14px 14px 0;padding:30px 28px}
.q blockquote{margin:0;font-size:.97rem;line-height:1.65;color:var(--tx)}
.q cite{display:block;margin-top:20px;font-style:normal;font-weight:750;font-size:.85rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--accent-tx)}

/* CTA band */
.band{background:var(--orange);color:#000;border-radius:18px;padding:clamp(40px,6vw,72px);
  display:flex;gap:34px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.band h2{color:#000;max-width:20ch;font-size:var(--s3)}
.band p{color:rgba(0,0,0,.78);margin-top:12px;max-width:46ch;font-weight:500}
.band .btn{background:#000;color:#fff}
.band .btn:hover{background:#1a1a1a}

/* footer */
footer{border-top:1px solid var(--line);padding:clamp(50px,6vw,80px) 0 34px;background:var(--bg-2)}
.fgrid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:40px}
@media (max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}
.fgrid img{height:28px;width:auto;margin-bottom:18px}
.fgrid h3{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--tx-2);
  margin-bottom:16px;font-weight:700}
.fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:.91rem}
.fgrid a{color:var(--tx-2);text-decoration:none}
.fgrid a:hover{color:var(--orange)}
.fbot{margin-top:52px;padding-top:26px;border-top:1px solid var(--line);display:flex;
  justify-content:space-between;gap:18px;flex-wrap:wrap;color:var(--tx-2);font-size:.83rem}
.fbot p{color:var(--tx-2)}

/* ============ nav dropdowns ============ */
.has-dd{position:relative}
.dd-t{background:none;border:0;font:inherit;font-size:.93rem;font-weight:500;color:var(--tx-2);
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:6px 0;font-family:inherit}
.dd-t:hover{color:var(--tx)}
.dd-t svg{transition:transform .18s}
.dd-t[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav ul.dd{position:absolute;top:calc(100% + 14px);left:-16px;min-width:250px;background:var(--bg);
  border:1px solid var(--line);border-radius:12px;padding:8px;list-style:none;margin:0;
  display:none;box-shadow:0 18px 44px rgba(0,0,0,.14);z-index:60}
html[data-theme="dark"] .dd{box-shadow:0 18px 44px rgba(0,0,0,.6)}
.nav ul.dd.open{display:block}
.dd a{display:block;padding:10px 13px;border-radius:8px;font-size:.9rem;color:var(--tx-2);
  text-decoration:none}
.dd a:hover{background:var(--bg-3);color:var(--tx)}
.dd a[aria-current="page"]{color:var(--accent-tx);font-weight:650}
@media (max-width:960px){
  .nav ul.dd{position:static;display:none;border:0;box-shadow:none;padding:0 0 10px 14px;min-width:0;background:transparent}
  .nav ul.dd.open{display:block}
  .dd a{padding:9px 0}
  .has-dd{display:block;width:100%}
  .dd-t{width:100%;justify-content:space-between;padding:15px 0;font-size:1.05rem}
}

/* ============ article / prose ============ */
.article{max-width:760px;margin:0 auto}
.article-hd{padding:clamp(46px,7vw,86px) 0 0}
.crumbs{font-size:.8rem;color:var(--tx-2);margin-bottom:22px}
.crumbs a{color:var(--tx-2);text-decoration:none}
.crumbs a:hover{color:var(--accent-tx)}
.article h1{font-size:clamp(1.9rem,1.4rem + 2.2vw,3.1rem);max-width:22ch;font-weight:830}
.meta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:24px;font-size:.85rem;
  color:var(--tx-2);padding-bottom:26px;border-bottom:1px solid var(--line)}
.meta .pill{border:1px solid var(--line);border-radius:100px;padding:4px 12px;font-size:.73rem;
  font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-tx)}
.prose{padding:38px 0 10px;font-size:1.05rem;line-height:1.78}
.prose h2{font-size:clamp(1.35rem,1.15rem + .8vw,1.85rem);margin:44px 0 14px;font-weight:780;
  letter-spacing:-.02em;scroll-margin-top:90px}
.prose h3{font-size:1.2rem;margin:32px 0 10px;font-weight:730}
.prose p{margin:0 0 22px}
.prose,.prose p,.prose li,.prose a,.prose h2,.prose h3{overflow-wrap:anywhere}
.prose ul,.prose ol{margin:0 0 24px;padding-left:24px}
.prose li{margin-bottom:10px}
.prose li::marker{color:var(--orange)}
.prose a{color:var(--accent-tx);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.prose a:hover{text-decoration-thickness:2px}
.prose img{border-radius:12px;margin:30px 0;border:1px solid var(--line);width:100%;height:auto}
.prose pre{background:var(--bg-3);border:1px solid var(--line);border-radius:12px;padding:20px;
  overflow-x:auto;font-size:.86rem;line-height:1.6;margin:0 0 26px}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em}
.prose :not(pre)>code{background:var(--bg-3);padding:2px 6px;border-radius:5px}
.prose blockquote{margin:0 0 26px;padding:4px 0 4px 22px;border-left:3px solid var(--orange);
  color:var(--tx-2);font-size:1.05rem}
.prose strong{font-weight:700;color:var(--tx)}
.prose hr{border:0;border-top:1px solid var(--line);margin:38px 0}

/* listing */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.filters a{font-size:.85rem;font-weight:600;padding:9px 17px;border:1px solid var(--line);
  border-radius:100px;text-decoration:none;color:var(--tx-2)}
.filters a:hover{border-color:var(--orange);color:var(--tx)}
.filters a[aria-current="page"]{background:var(--orange);border-color:var(--orange);color:#000}
a.card.post-card,.post-card{display:flex;flex-direction:column;height:100%}
.post-card .thumb{aspect-ratio:16/9;background:var(--bg-3);border-radius:10px;overflow:hidden;
  margin:-8px 0 18px;border:1px solid var(--line)}
.post-card .thumb img{width:100%;height:100%;object-fit:cover}
.post-card .date{font-size:.75rem;color:var(--tx-2);letter-spacing:.06em;text-transform:uppercase;
  font-weight:650;margin-top:auto;padding-top:16px}
.empty{color:var(--tx-2);padding:40px 0}
.video{position:relative;aspect-ratio:16/9;margin:30px 0;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:var(--bg-3)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ============================================================
   Rich layout components — imagery, splits, logo walls
   ============================================================ */

/* hero with artwork */
.hero-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);align-items:center}
@media (max-width:900px){.hero-split{grid-template-columns:1fr}.hero-art{order:-1;max-width:420px}}
.hero-art{position:relative}
.hero-art img{width:100%;height:auto;filter:none}
html[data-theme="dark"] .hero-art img{filter:invert(1) hue-rotate(180deg) brightness(1.1)}
.hero-art::after{content:"";position:absolute;inset:-8% -6%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,rgba(243,107,29,.14),transparent 68%)}

/* split: artwork + copy, alternating */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.split.rev .split-art{order:2}
@media (max-width:880px){.split{grid-template-columns:1fr;gap:32px}.split.rev .split-art{order:0}}
.split-art{border:1px solid var(--line);border-radius:16px;padding:clamp(20px,3vw,38px);
  background:var(--bg-2);display:grid;place-items:center}
.split-art img{width:100%;height:auto;max-height:420px;object-fit:contain}
html[data-theme="dark"] .split-art img.line{filter:invert(1) hue-rotate(180deg) brightness(1.08)}
.split-copy h2{margin-bottom:16px}
.split-copy p{color:var(--tx-2);margin-bottom:16px}
.ticks{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:13px}
.ticks li{padding-left:30px;position:relative;color:var(--tx);font-size:.97rem}
.ticks li::before{content:"";position:absolute;left:0;top:.5em;width:15px;height:2px;background:var(--orange)}

/* logo wall */
.logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:2px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.logos div{background:var(--bg);display:grid;place-items:center;padding:26px 20px;min-height:104px}
.logos img{max-height:38px;width:auto;max-width:130px;object-fit:contain;
  filter:grayscale(1);opacity:.72;transition:filter .2s,opacity .2s}
.logos div:hover img{filter:grayscale(0);opacity:1}
html[data-theme="dark"] .logos img{filter:grayscale(1) invert(1) brightness(1.6);opacity:.62}
html[data-theme="dark"] .logos div:hover img{filter:grayscale(0) invert(1) brightness(1.6);opacity:.95}

/* certification badges */
.badges{display:flex;flex-wrap:wrap;gap:clamp(14px,3vw,38px);align-items:center;justify-content:center}
.badges img{height:56px;width:auto;opacity:.85}
html[data-theme="dark"] .badges img{filter:brightness(0) invert(1);opacity:.72}

/* numbered process */
.steps{counter-reset:s;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:14px;overflow:hidden}
.steps>div{background:var(--bg);padding:26px 30px;display:grid;
  grid-template-columns:64px 1fr;gap:20px;align-items:start}
@media (max-width:640px){.steps>div{grid-template-columns:44px 1fr;gap:14px;padding:22px}}
.steps>div::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  font-size:1.5rem;font-weight:850;color:var(--orange);letter-spacing:-.03em;line-height:1.1}
.steps h3{font-size:1.12rem;font-weight:730;margin-bottom:6px}
.steps p{color:var(--tx-2);font-size:.94rem}

/* icon card with artwork */
.card .art{height:120px;display:grid;place-items:center;margin:-6px 0 16px;
  background:var(--bg-3);border-radius:10px;border:1px solid var(--line);overflow:hidden}
.card .art img{max-height:96px;width:auto;max-width:82%;object-fit:contain}
html[data-theme="dark"] .card .art img.line{filter:invert(1) hue-rotate(180deg) brightness(1.08)}

/* page banner (interior hero) */
.pbanner{border-bottom:1px solid var(--line);position:relative;overflow:hidden;
  padding:clamp(52px,8vw,104px) 0 clamp(44px,6vw,80px)}
.pbanner::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 100% at 88% 0%,rgba(243,107,29,.13),transparent 62%)}
.pbanner>*{position:relative}
.pbanner h1{font-size:var(--s4);max-width:19ch;font-weight:840}
.pbanner .sub{margin-top:20px;max-width:58ch}

/* pull stat row */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:28px;
  padding:34px 0;border-block:1px solid var(--line)}
.figs b{display:block;font-size:clamp(1.7rem,1.3rem + 1.4vw,2.5rem);font-weight:850;
  letter-spacing:-.03em;line-height:1}
.figs b span{color:var(--orange)}
.figs i{font-style:normal;color:var(--tx-2);font-size:.86rem;display:block;margin-top:8px}

/* ============================================================
   Editorial layer — numbered eyebrows, grid rules, mono meta
   ============================================================ */
.eyebrow .idx,.kicker .idx{font-family:var(--mono);color:var(--accent-tx);font-weight:600}

/* thin vertical grid rule behind hero (structural, like a spec sheet) */
.hero{border-bottom:1px solid var(--line)}
.hero .wrap{position:relative}
.hero-split{position:relative}
.hero-split::before{content:"";position:absolute;top:-40px;bottom:-40px;left:58%;width:1px;
  background:var(--line);display:none}
@media (min-width:1100px){.hero-split::before{display:block}}

/* stat strip: mono labels, no boxes — quieter, more editorial */
.stats{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;gap:0}
.stat{background:transparent;padding:30px 30px 0 0;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
@media (max-width:640px){.stat{border-right:0;padding-right:0}}
.stat i{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  line-height:1.45;margin-top:12px}

.figs b span{color:var(--orange)}
.figs i{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}

/* cards: flatter, more editorial */
.card{border-radius:12px;padding:32px 30px}
.card .num{font-family:var(--mono);font-size:.71rem;letter-spacing:.12em;font-weight:600}
.card h3{font-size:1.18rem;letter-spacing:-.02em}

/* interior banner gets the same scale as the hero */
.pbanner{padding:clamp(64px,10vw,140px) 0 clamp(52px,7vw,96px)}
.pbanner h1{max-width:17ch;line-height:.98;letter-spacing:-.038em}

/* article headline scale up */
.article h1{font-size:clamp(2.1rem,1.5rem + 2.8vw,3.8rem);line-height:1.0;letter-spacing:-.035em}
.meta{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase}
.crumbs{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}

/* buttons: pill, matching the reference language */
.btn{border-radius:100px;padding:14px 26px;font-weight:600}
.filters a{border-radius:100px}

/* ---- hero scale correction: split layout needs a tighter headline ---- */
.hero-split h1{font-size:clamp(2.5rem, 1.5rem + 3.6vw, 4.6rem);max-width:none;line-height:1.0}
.hero-split .sub{margin-top:26px;font-size:clamp(1rem, .95rem + .35vw, 1.15rem);max-width:48ch}
.hero-split .cta{margin-top:30px}
.mark{padding:.04em .16em;border-radius:2px;line-height:1.18}
@media (max-width:900px){.hero-split h1{font-size:clamp(2.2rem, 1.4rem + 4vw, 3.4rem)}}

/* ---- corrections pass 2 ---- */
/* section headings: hero owns the biggest type, h2 steps down clearly */
h2{font-size:clamp(1.7rem, 1.3rem + 1.7vw, 2.9rem)}
.hd{max-width:34ch}
.band h2{font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem)}

/* certification badges are full-colour logos — never filter them.
   Give them a light chip so they read on dark surfaces. */
.badges img{height:44px;background:#fff;border-radius:8px;padding:8px 12px;opacity:1}
html[data-theme="dark"] .badges img{filter:none;opacity:.94}

/* stat strip breathing room */
.stats{margin-top:clamp(44px, 6vw, 72px)}
.stat{padding:26px 26px 6px 0}
.stat i{margin-top:14px}

/* badges: real logos, legible size */
.badges{gap:clamp(12px,2vw,24px)}
.badges img{height:74px;padding:10px 14px;border-radius:10px;background:#fff;
  border:1px solid var(--line);object-fit:contain;width:auto}

/* ---- Fulcrum event pages ---- */
.fq{margin:26px 0 0;font-size:clamp(1.05rem,.98rem + .5vw,1.3rem);line-height:1.55;
  color:var(--tx);max-width:68ch;padding-left:22px;border-left:3px solid var(--o)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:32px}
.facts div{background:var(--bg);padding:18px 20px}
.facts span{display:block;font-family:var(--mono);font-size:.63rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tx-2)}
.facts b{display:block;margin-top:6px;font-weight:650;font-size:.98rem}
.strap{font-size:clamp(1.15rem,1rem + .8vw,1.6rem);font-weight:650;letter-spacing:-.02em;
  max-width:30ch;margin-bottom:30px}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  grid-auto-rows:clamp(130px, 15vw, 205px)}
@media (max-width:900px){.gal{grid-template-columns:repeat(2,1fr)}}
.gal figure{margin:0;border-radius:11px;overflow:hidden;border:1px solid var(--line);
  background:var(--bg-3);height:100%}
.gal img{width:100%;height:100%;object-fit:cover;display:block}
.gal figure:first-child{grid-column:span 2;grid-row:span 2}
b.fx{display:block;font-size:clamp(1.6rem,1.3rem + 1.2vw,2.4rem);font-weight:750;
  letter-spacing:-.035em;color:var(--orange);line-height:1}

/* display face — headings and the hero */
h1,h2,h3,.figs b,.stat b,.hero h1{font-family:var(--font-disp)}

/* long listings: progressive disclosure (see assets/js/listing.js) */
a.card.post-card.is-hidden,.post-card.is-hidden{display:none}
.more-wrap{display:grid;justify-items:center;gap:10px;margin-top:34px}
.more-count{font-size:.8rem;color:var(--tx-2);margin:0}

/* ============ contact form (single canonical form: /get-started/) ============ */
.lead-form{max-width:640px}
.lead-form .frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:620px){.lead-form .frow{grid-template-columns:1fr}}
.lead-field{display:grid;gap:7px;margin-bottom:18px}
.lead-field label{font-size:.82rem;font-weight:650;color:var(--tx)}
.lead-field .req{color:var(--accent-tx)}
.lead-field input,.lead-field select,.lead-field textarea{
  font:inherit;font-size:.95rem;color:var(--tx);background:var(--bg);
  border:1px solid var(--ctl-line,var(--line));border-radius:10px;padding:12px 14px;width:100%;
  transition:border-color .15s ease,box-shadow .15s ease}
.lead-field textarea{min-height:120px;resize:vertical}
.lead-field input::placeholder,.lead-field textarea::placeholder{color:var(--tx-2);opacity:.75}
.lead-field input:focus-visible,.lead-field select:focus-visible,.lead-field textarea:focus-visible{
  outline:3px solid var(--orange);outline-offset:2px;border-color:var(--orange)}
.lead-field [aria-invalid="true"]{border-color:#C0392B}
.lead-err{font-size:.8rem;color:#C0392B;min-height:1em}
html[data-theme="dark"] .lead-err{color:#FF8A7A}
.lead-note{font-size:.8rem;color:var(--tx-2);margin:6px 0 20px}
.lead-form button[type=submit]{cursor:pointer;border:0}
.lead-form button[disabled]{opacity:.6;cursor:progress}
.lead-status{margin-top:16px;font-size:.9rem;font-weight:600}
.lead-status.ok{color:var(--accent-tx)}
.lead-status.fail{color:#C0392B}
html[data-theme="dark"] .lead-status.fail{color:#FF8A7A}
.lead-done{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--orange);
  border-radius:12px;padding:26px 28px}
.lead-done h3{margin:0 0 8px;font-size:1.15rem}
.lead-done p{margin:0;color:var(--tx-2);font-size:.94rem}

/* ============ contact page: two-column layout ============ */
.contact-sec{padding:clamp(48px,6vw,84px) 0 clamp(56px,7vw,96px)}
.contact-grid{display:grid;grid-template-columns:0.92fr 1.08fr;gap:clamp(36px,5vw,72px);align-items:start}
@media (max-width:960px){.contact-grid{grid-template-columns:1fr;gap:40px}}
.contact-aside h1{margin:10px 0 16px}
.contact-aside .sub{color:var(--tx-2);font-size:1.02rem;max-width:46ch}
.contact-opts{display:grid;gap:10px;margin:30px 0 26px;padding:0;list-style:none}
.contact-opt{display:block;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;cursor:pointer;font:inherit;color:var(--tx);
  transition:border-color .16s ease,transform .16s ease}
.contact-opt:hover{border-color:var(--orange);transform:translateY(-2px)}
.contact-opt[aria-pressed="true"]{border-color:var(--orange);box-shadow:inset 3px 0 0 var(--orange)}
.contact-opt b{display:block;font-size:.97rem;font-weight:700;margin-bottom:3px}
.contact-opt span{display:block;color:var(--tx-2);font-size:.87rem;line-height:1.5}
.contact-meta{border-top:1px solid var(--line);padding-top:22px;display:grid;gap:12px}
.contact-meta p{margin:0;font-size:.9rem;color:var(--tx-2)}
.contact-meta a{color:var(--accent-tx);font-weight:650}
.contact-meta .cm-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.contact-meta .cm-badges span{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx-2);border:1px solid var(--line);
  border-radius:999px;padding:5px 10px}
.contact-panel{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:clamp(24px,3vw,36px)}
.contact-panel h2{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);margin:0 0 6px}
.contact-panel .panel-note{color:var(--tx-2);font-size:.9rem;margin:0 0 24px}
.contact-panel .lead-form{max-width:none}

/* Section headers: on wide screens run the heading and its intro as an editorial
   two-column split instead of a narrow left column with an empty right half.
   Only when there is an intro paragraph to place. */
@media (min-width:900px){
  .hd:has(p){max-width:none;display:grid;grid-template-columns:minmax(260px,.8fr) 1.2fr;
    gap:clamp(28px,4vw,64px);align-items:start}
  .hd:has(p) h2,.hd:has(p) h3{margin:0}
  .hd:has(p) p{margin-top:0}
}
/* page banner: shorter, it only carries an eyebrow, a title and a line of copy */
.pbanner{padding:clamp(56px,7vw,104px) 0 clamp(40px,5vw,72px)}
/* a header that ends its section has nothing to space away from */
.hd:last-child{margin-bottom:0}

/* ============ about us ============ */
.leaders{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,232px));
  gap:clamp(18px,2.4vw,26px);justify-content:start}
.leader{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.leader img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--bg-3)}
.leader .who{padding:20px 22px}
.leader h3{margin:0 0 4px;font-size:1.1rem}
.leader p{margin:0;color:var(--tx-2);font-size:.88rem}
.awards{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,150px));gap:16px;justify-content:start}
.awards img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:14px}
.vidwrap{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  aspect-ratio:16/9;background:var(--bg-3)}
.vidwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.life-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.life-gal img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block;background:var(--bg-3)}
.locs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(18px,2.5vw,28px)}
.loc{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.loc .country{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-tx);display:block;margin-bottom:8px}
.loc h3{margin:0 0 8px;font-size:1.02rem}
.loc address{font-style:normal;color:var(--tx-2);font-size:.88rem;line-height:1.6}

/* intrinsic dimensions guard: width/height attributes are for CLS only —
   never let them override the CSS box. */
img{max-width:100%}
/* NOTE: .badges img and .logos img set their own height/max-height — they must
   NOT be reset here, or the width/height attributes added for CLS make them
   render at full intrinsic size. */
.awards img,.leader img,.life-gal img,.post-card .thumb img,
.card .art img,.contact-panel img{height:auto}

/* WCAG 2.5.8 target size: footer links were 20px tall. Pad them to >=24px and
   pull the list gap back so the footer keeps its rhythm. */
.fgrid a,.fg a,.fbot a{display:inline-block;padding:3px 0;min-height:24px}
.fgrid ul,.fg ul{gap:4px}
/* inline mailto/contact links inside prose blocks also need a 24px target */
.contact-meta a,.cform-email a,.prose a[href^="mailto:"]{display:inline-block;padding:2px 0;min-height:24px}
/* breadcrumb links were 15px tall */
.crumbs a{display:inline-block;padding:4px 0;min-height:24px}
/* standalone CTA links that are the only content of their paragraph are not
   covered by the WCAG 2.5.8 inline exception — give them a 24px target */
.prose p > a:only-child,
.prose li > a:only-child,
.prose p > strong:only-child > a:only-child{display:inline-block;padding:3px 0;min-height:24px}

/* Header: centre the menu in the space between the logo and the CTA, instead of
   leaving it flush against the logo. Auto margins on both sides of the menu share
   the free space equally; .nav-r must therefore not also claim it.
   Only above the mobile breakpoint — below that the menu is a dropped panel. */
@media (min-width:901px){
  .nav > #menu{margin-inline:auto}
  .nav > .nav-r{margin-left:0}
}

/* ============ video library ============ */
.vidgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(18px,2.5vw,28px)}
.vid-card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column}
.vid-shell{position:relative;aspect-ratio:16/9;background:var(--bg-3)}
.vid-shell iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-shell img{width:100%;height:100%;object-fit:cover;display:block}
.vid-play{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;
  background:rgba(0,0,0,.28);display:grid;place-items:center;transition:background .16s ease}
.vid-play:hover{background:rgba(0,0,0,.44)}
.vid-play span{width:60px;height:60px;border-radius:50%;background:var(--orange);
  display:grid;place-items:center;box-shadow:0 6px 22px rgba(0,0,0,.34)}
.vid-play svg{margin-left:3px}
.vid-body{padding:18px 20px 22px}
.vid-cat{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-tx);display:block;margin-bottom:8px}
.vid-card h3{font-size:1.02rem;margin:0 0 8px;font-weight:730}
.vid-card p{margin:0;color:var(--tx-2);font-size:.88rem;line-height:1.6}
/* life-at-LUMIQ gallery: two to a row on phones rather than ten full-width rows */
@media (max-width:620px){.life-gal{grid-template-columns:1fr 1fr;gap:10px}}

/* Phones: display leading of 1.02 is right for a two-line desktop headline, but a
   long heading wrapping to five lines needs air. */
@media (max-width:760px){
  h1{line-height:1.1}
  h2{line-height:1.16;letter-spacing:-.02em}
  h3{line-height:1.24}
  .hd p,.lede,.sub{line-height:1.62}
}
/* Phones: competency badges carry text, so two per row at a readable size beats
   a row of thumbnails nobody can read. Width drives the size here, so height:auto
   is deliberate and scoped. */
@media (max-width:620px){
  .badges{display:grid;grid-template-columns:1fr 1fr;gap:12px;justify-items:center;align-items:center}
  .badges img{height:auto;width:100%;max-width:158px;padding:10px}
}