/* ============================================================
   B3G ENGINEERING SERVICES — Design System
   Industrialising the built environment.
   Brand: Engineering Blue #0E76BE · Robotics Purple #6A1F9C · Charcoal #14161C
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --blue:        #0E76BE;
  --blue-bright: #1E9BEA;
  --blue-deep:   #0A4E80;
  --purple:      #6A1F9C;
  --purple-bright:#9B4DD4;
  --eco:         #2FBF8F;   /* sustainability accent — used sparingly */

  /* Ink / neutrals (warm charcoal from the logo) */
  --ink:      #101318;
  --ink-2:    #171B22;
  --ink-3:    #1F2530;
  --line-dk:  #2A313E;

  --slate-900:#0F1620;
  --slate-700:#3A4656;
  --slate-500:#647285;
  --slate-400:#8B97A8;
  --slate-300:#B7C0CD;
  --slate-200:#DCE2EA;
  --slate-100:#EDF1F6;
  --slate-50: #F6F8FB;
  --white:    #FFFFFF;

  /* Semantic (light) */
  --bg:        #FFFFFF;
  --surface:   #F6F8FB;
  --surface-2: #EDF1F6;
  --text:      #101318;
  --text-soft: #414D5E;
  --text-mute: #616E7F;
  --border:    #E2E7EF;
  --border-strong:#CBD3DE;

  /* Type */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Rhythm */
  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --radius: 4px;
  --radius-lg: 10px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --shadow-sm: 0 1px 2px rgba(16,19,24,.06), 0 2px 8px rgba(16,19,24,.05);
  --shadow-md: 0 10px 30px -12px rgba(16,19,24,.22);
  --shadow-lg: 0 30px 70px -30px rgba(10,40,70,.35);
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg,video,canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input,textarea,select { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }
/* The `hidden` attribute must always win, even over author display rules
   (e.g. .pf-modal{display:flex}). Without this, hidden modals/overlays render. */
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; }
#main:focus { outline: none; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 200; background: var(--blue); color: #fff; padding: 12px 20px; border-radius: var(--radius); font-family: var(--font-display); font-weight: 600; transform: translateY(-160%); transition: transform .25s var(--ease-out); }
.skip-link:focus { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; }
::selection { background: var(--blue); color: #fff; }

/* ---------- Type scale ---------- */
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
p, .lead { text-wrap: pretty; }
/* Keep muted labels legible on dark surfaces after token darkening (WCAG AA) */
.section.dark .rule-label span,
.metrics.dark .metric .l { color: var(--slate-400); }
.display { font-size: clamp(2.6rem, 6.5vw, 5.6rem); line-height: .98; letter-spacing: -.035em; font-weight: 600; }
h2.section-title { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.03em; }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
p { color: var(--text-soft); }
.lead { font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.5; color: var(--text-soft); }

/* Mono technical label */
.eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-weight: 700;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: currentColor;
  opacity: .7;
}
.eyebrow.on-dark { color: var(--blue-bright); }
.idx { font-family: var(--font-mono); color: var(--slate-400); font-size: .8rem; letter-spacing: .1em; }

.grad-text { background: linear-gradient(100deg, var(--blue-bright), var(--purple-bright)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.blue { color: var(--blue); }
.purple { color: var(--purple); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(64px, 9vw, 130px); position: relative; }
.section[id] { scroll-margin-top: 130px; }
:target { scroll-margin-top: 130px; }
.section.tight { padding-block: clamp(48px, 6vw, 84px); }
.section.dark { background: var(--ink); color: var(--slate-200); }
.section.dark h1,.section.dark h2,.section.dark h3,.section.dark h4 { color: #fff; }
.section.dark p { color: var(--slate-300); }
.section.surface { background: var(--surface); }

.grid { display: grid; gap: clamp(20px, 3vw, 40px); }
.two { grid-template-columns: repeat(2, 1fr); }
.three { grid-template-columns: repeat(3, 1fr); }
.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 940px){ .two,.three,.four { grid-template-columns: 1fr; } .three.keep-2,.four.keep-2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .three.keep-2,.four.keep-2 { grid-template-columns: 1fr; } }

.stack-sm > * + * { margin-top: .8rem; }
.stack > * + * { margin-top: 1.5rem; }
.center { text-align: center; }
.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 68px); }
.section-head.center { margin-inline: auto; }
.section-head .eyebrow { margin-bottom: 1.1rem; }
.section-head p { margin-top: 1.1rem; }

/* ---------- Buttons ---------- */
.btn {
  --bh: #0b5f9c;
  display: inline-flex; align-items: center; gap: .6em;
  padding: .95em 1.6em;
  font-family: var(--font-display);
  font-weight: 600; font-size: .95rem; letter-spacing: -.01em;
  background: var(--blue); color: #fff;
  border-radius: var(--radius);
  transition: transform .35s var(--ease-out), background .25s, box-shadow .35s;
  position: relative;
  will-change: transform;
}
.btn:hover { background: var(--bh); transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(14,118,190,.6); }
.btn:active { transform: translateY(0); }
.btn .arw { transition: transform .35s var(--ease-out); }
.btn:hover .arw { transform: translateX(4px); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.btn.ghost:hover { background: var(--ink); color: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn.on-dark.ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); }
.btn.on-dark.ghost:hover { background: #fff; color: var(--ink); }
.btn.lg { padding: 1.1em 2em; font-size: 1.02rem; }
.link-arrow { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-display); font-weight: 600; color: var(--blue); }
.link-arrow .arw { transition: transform .3s var(--ease-out); }
.link-arrow:hover .arw { transform: translateX(4px); }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .4s var(--ease), box-shadow .4s, backdrop-filter .4s;
}
.site-header .bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 78px; gap: 20px;
}
.site-header::after { content:""; position:absolute; inset: auto 0 0 0; height:1px; background: rgba(255,255,255,.09); transition: background .4s; }
.site-header.scrolled { background: rgba(255,255,255,.82); backdrop-filter: saturate(1.6) blur(16px); box-shadow: 0 1px 0 rgba(16,19,24,.07); }
.site-header.scrolled::after { background: transparent; }

/* ---- Brand wordmark (text placeholder for official logo) ---- */
.brand { justify-self: start; display: inline-flex; align-items: center; z-index: 2; }
.brand .wordmark { display: inline-flex; align-items: baseline; gap: .5em; line-height: 1; }
.brand .wordmark b {
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  letter-spacing: -.01em; color: #fff; transition: color .4s;
}
.brand .wordmark i {
  font-style: normal; font-family: var(--font-mono);
  font-size: .6rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--slate-400); transition: color .4s;
  padding-left: .7em; border-left: 1px solid rgba(255,255,255,.22);
  transform: translateY(-1px);
}
.scrolled .brand .wordmark b { color: var(--ink); }
.scrolled .brand .wordmark i { color: var(--text-mute); border-left-color: var(--border-strong); }
@media (max-width: 560px){ .brand .wordmark i { display: none; } }

/* ---- Primary nav ---- */
.nav { justify-self: center; display: flex; align-items: center; gap: 4px; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: .35em;
  white-space: nowrap;
  font-family: var(--font-display); font-weight: 500; font-size: .92rem; letter-spacing: -.01em;
  color: rgba(255,255,255,.82); padding: .6em .85em; border-radius: 7px;
  transition: color .25s var(--ease);
}
.scrolled .nav-link { color: var(--slate-700); }
.nav-link:hover, .nav-link.active { color: #fff; }
.scrolled .nav-link:hover, .scrolled .nav-link.active { color: var(--blue); }
/* animated underline indicator */
.nav-link::after {
  content: ""; position: absolute; left: .85em; right: .85em; bottom: .35em; height: 1.5px;
  background: var(--blue-bright); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out);
}
.scrolled .nav-link::after { background: var(--blue); }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link .caret { opacity: .55; transition: transform .3s var(--ease-out); }
.has-menu:hover .caret, .has-menu:focus-within .caret { transform: rotate(180deg); opacity: 1; }

.header-actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
.nav-cta { padding-block: .7em; }

/* Has-dropdown */
.nav .has-menu { position: relative; }
.nav .menu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 10px; min-width: 300px;
  opacity: 0; visibility: hidden; transition: opacity .28s var(--ease-out), visibility .28s var(--ease-out), transform .28s var(--ease-out);
}
.nav .has-menu:hover .menu,
.nav .has-menu:focus-within .menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav .menu a { display: flex; gap: 12px; padding: 12px; border-radius: var(--radius); color: var(--ink); align-items:flex-start; }
.nav .menu a:hover { background: var(--surface); }
.nav .menu a .mi { font-family: var(--font-mono); font-size:.7rem; color: var(--blue); margin-top:3px; min-width: 26px; }
.nav .menu a b { display:block; font-family: var(--font-display); font-size:.92rem; color: var(--ink); font-weight:600; }
.nav .menu a small { color: var(--text-mute); font-size: .78rem; }

.burger { display:none; width:44px; height:44px; align-items:center; justify-content:center; z-index: 2; }
.burger span { position: relative; width: 22px; height: 2px; background: #fff; transition: background .4s; }
.scrolled .burger span, .burger span { }
.burger span, .burger span::before, .burger span::after { display:block; }
.burger span::before, .burger span::after { content:""; position:absolute; left:0; width:22px; height:2px; background: inherit; transition: transform .3s var(--ease); }
.burger span::before { top:-7px; } .burger span::after { top:7px; }
.scrolled .burger span, .scrolled .burger span::before, .scrolled .burger span::after { background: var(--ink); }
body.menu-open .burger span { background: transparent; }
body.menu-open .burger span::before { transform: translateY(7px) rotate(45deg); background: var(--ink); }
body.menu-open .burger span::after { transform: translateY(-7px) rotate(-45deg); background: var(--ink); }

/* Mobile drawer */
.mobile-nav {
  position: fixed; inset: 0; z-index: 90; background: var(--white);
  padding: 100px var(--gut) 40px; transform: translateY(-100%);
  transition: transform .5s var(--ease-out); overflow-y: auto;
  visibility: hidden;
}
body.menu-open .mobile-nav { transform: translateY(0); visibility: visible; }
.mobile-nav a { display:block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--ink); padding: .5em 0; border-bottom: 1px solid var(--border); letter-spacing:-.02em; }
.mobile-nav a small { display:block; font-family: var(--font-mono); font-size:.7rem; letter-spacing:.2em; color: var(--text-mute); text-transform:uppercase; margin-top:2px; }

@media (max-width: 1024px){
  .nav, .nav-cta { display: none; }
  .burger { display: flex; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; background: var(--ink); color: #fff; overflow: hidden; }
.hero__canvas { position: absolute; inset: 0; z-index: 0; }
.hero__veil { position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 90% at 80% 15%, rgba(14,118,190,.20), transparent 55%),
    radial-gradient(90% 80% at 15% 90%, rgba(106,31,156,.16), transparent 55%),
    linear-gradient(180deg, rgba(16,19,24,.55) 0%, rgba(16,19,24,.35) 40%, rgba(16,19,24,.82) 100%);
}
.hero__grid { position:absolute; inset:0; z-index:1; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 100% at 50% 30%, #000 40%, transparent 90%);
}
.hero .wrap { position: relative; z-index: 2; width: 100%; padding-top: 118px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.hero__tag {
  display:inline-flex; align-items:center; gap:.8em; margin-bottom: 1.8rem;
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color: var(--slate-300); border: 1px solid rgba(255,255,255,.14); padding: .5em 1em; border-radius: 40px;
  backdrop-filter: blur(6px);
}
.hero__tag .dot { width:7px; height:7px; border-radius:50%; background: var(--eco); box-shadow:0 0 0 4px rgba(47,191,143,.2); animation: pulse 2.4s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(47,191,143,0); } }
.hero h1 { color: #fff; max-width: 15ch; }
.hero h1 .line { display:block; overflow:hidden; }
.hero h1 .line > span { display:block; transform: translateY(110%); animation: rise .9s var(--ease-out) forwards; }
.hero h1 .line:nth-child(2) > span { animation-delay:.09s; }
.hero h1 .line:nth-child(3) > span { animation-delay:.18s; }
@keyframes rise { to { transform: translateY(0); } }
.hero .lead { color: var(--slate-300); max-width: 52ch; margin-top: 1.8rem; opacity:0; animation: fade .8s ease .5s forwards; }
.hero__cta { display:flex; flex-wrap:wrap; gap: 14px; margin-top: 2.5rem; opacity:0; animation: fade .8s ease .68s forwards; }
@keyframes fade { to { opacity: 1; } }

.hero__stats {
  position: relative; z-index: 2; flex: none;
  border-top: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.015);
  backdrop-filter: blur(3px);
}
.hero__stats .wrap { display:grid; grid-template-columns: repeat(4,1fr); gap: 0; padding-top: 0; padding-bottom: 0; flex: none; }
.hero__stats .stat { padding: clamp(20px,2.4vw,30px) clamp(18px,2vw,32px); border-right: 1px solid rgba(255,255,255,.09); }
.hero__stats .stat:first-child { padding-left: 0; }
.hero__stats .stat:last-child { border-right: none; }
.hero__stats .stat .n { font-family: var(--font-display); font-size: clamp(1.7rem,2.6vw,2.4rem); font-weight:600; color:#fff; letter-spacing:-.03em; line-height:1; }
.hero__stats .stat .n .u { color: var(--blue-bright); }
.hero__stats .stat .l { font-family: var(--font-mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color: var(--slate-300); margin-top:.7em; line-height:1.4; }
@media (max-width:760px){ .hero__stats .wrap { grid-template-columns: 1fr 1fr; } .hero__stats .stat:first-child { padding-left: clamp(18px,2vw,32px); } .hero__stats .stat:nth-child(2){border-right:none;} .hero__stats .stat:nth-child(1),.hero__stats .stat:nth-child(2){border-bottom:1px solid rgba(255,255,255,.1);} }
@media (max-width:420px){ .hero__stats .wrap { grid-template-columns: 1fr; } .hero__stats .stat { border-right:none; border-bottom:1px solid rgba(255,255,255,.1); padding-left: clamp(18px,2vw,32px)!important; } .hero__stats .stat:last-child{border-bottom:none;} }

.scroll-hint { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:3; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.24em; color:var(--slate-400); text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px; opacity:0; animation: fade 1s ease 1.1s forwards; }
.scroll-hint .rail { width:1px; height:38px; background: linear-gradient(var(--blue-bright), transparent); position:relative; overflow:hidden; }
.scroll-hint .rail::after { content:""; position:absolute; top:0; left:0; width:1px; height:12px; background:#fff; animation: scrolldot 2s infinite; }
@keyframes scrolldot { to { transform: translateY(38px); } }

/* ============================================================
   VALUE PROPS / PILLARS
   ============================================================ */
.pillars { display:grid; grid-template-columns: repeat(3,1fr); gap:0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow:hidden; }
.pillar { padding: clamp(28px,3.2vw,44px); border-right: 1px solid var(--border); position:relative; background:var(--white); transition: background .4s; }
.pillar:last-child { border-right:none; }
.pillar:hover { background: var(--surface); }
.pillar .pk { font-family:var(--font-mono); font-size:.72rem; color:var(--blue); letter-spacing:.1em; }
.pillar h3 { margin:.8rem 0 .6rem; }
.pillar p { font-size:.95rem; }
.pillar .ic { width:46px; height:46px; margin-bottom:1.4rem; color:var(--blue); }
@media (max-width:860px){ .pillars { grid-template-columns:1fr; } .pillar { border-right:none; border-bottom:1px solid var(--border); } .pillar:last-child{border-bottom:none;} }

/* Uniqueness ring / value badges */
.value-badges { display:grid; grid-template-columns: repeat(4,1fr); gap:14px; }
.vb { border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px; background:var(--white); transition: transform .4s var(--ease-out), border-color .4s, box-shadow .4s; }
.vb:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.vb .ic { width:34px; height:34px; color: var(--blue); margin-bottom:14px; }
.vb b { font-family:var(--font-display); display:block; font-size:1rem; color:var(--ink); }
.vb small { color: var(--text-mute); font-size:.82rem; }
@media (max-width:860px){ .value-badges { grid-template-columns:1fr 1fr; } }

/* ============================================================
   EXPERTISE / CAPABILITY CARDS
   ============================================================ */
.cap-card {
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height: 340px; padding: 28px; border-radius: var(--radius-lg); overflow:hidden;
  background: var(--ink-2); color:#fff; isolation:isolate;
}
.cap-card .cc-visual { position:absolute; inset:0; z-index:-1; opacity:.9; transition: transform .8s var(--ease-out); }
.cap-card:hover .cc-visual { transform: scale(1.06); }
.cap-card::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, rgba(16,19,24,.1), rgba(16,19,24,.86)); }
.cap-card .idx { color: var(--blue-bright); margin-bottom: auto; }
.cap-card h3 { color:#fff; margin-bottom:.5rem; }
.cap-card p { color: var(--slate-300); font-size:.92rem; }
.cap-card .link-arrow { color:#fff; margin-top:14px; }
.cap-card.wide { grid-column: span 2; }
@media (max-width:940px){ .cap-card.wide { grid-column: span 1; } }

/* ============================================================
   FEATURE / SPLIT
   ============================================================ */
.split { display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px,5vw,72px); align-items:center; }
.split.rev { direction: rtl; } .split.rev > * { direction: ltr; }
@media (max-width:900px){ .split { grid-template-columns:1fr; } .split.rev { direction:ltr; } }
.media-frame { position:relative; border-radius: var(--radius-lg); overflow:hidden; background: var(--ink); box-shadow: var(--shadow-lg); border:1px solid var(--line-dk); }
.media-frame .tech-corner { position:absolute; width:16px; height:16px; border:2px solid var(--blue-bright); z-index:3; }
.media-frame .tc1 { top:12px; left:12px; border-right:0; border-bottom:0; }
.media-frame .tc2 { top:12px; right:12px; border-left:0; border-bottom:0; }
.media-frame .tc3 { bottom:12px; left:12px; border-right:0; border-top:0; }
.media-frame .tc4 { bottom:12px; right:12px; border-left:0; border-top:0; }
.media-frame .label { position:absolute; left:14px; bottom:14px; z-index:3; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--slate-300); background:rgba(16,19,24,.6); backdrop-filter:blur(4px); padding:.4em .8em; border-radius:3px; }

/* Check list */
.checklist li { display:flex; gap:.9em; padding:.55em 0; align-items:flex-start; color:var(--text-soft); border-bottom:1px solid var(--border); }
.checklist li:last-child { border-bottom:none; }
.checklist li svg { flex:none; width:20px; height:20px; color: var(--eco); margin-top:3px; }
.checklist.on-dark li { border-color: var(--line-dk); color: var(--slate-300); }
.checklist strong { color: var(--ink); font-weight:600; }
.checklist.on-dark strong { color:#fff; }

/* Metric row */
.metrics { display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border); border:1px solid var(--border); border-radius: var(--radius-lg); overflow:hidden; }
.metrics.dark { background: var(--line-dk); border-color: var(--line-dk); }
.metric { background: var(--white); padding: 26px; }
.metrics.dark .metric { background: var(--ink-2); }
.metric .n { font-family: var(--font-display); font-size: clamp(1.9rem,3.4vw,2.9rem); font-weight:600; letter-spacing:-.03em; color: var(--ink); line-height:1; }
.metrics.dark .metric .n { color:#fff; }
.metric .n .u { color: var(--blue); font-size:.55em; }
.metric .l { font-family: var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color: var(--text-mute); margin-top:.7em; }
@media (max-width:700px){ .metrics { grid-template-columns:1fr; } }

/* ============================================================
   Reveal on scroll
   ============================================================ */
[data-reveal] { opacity:0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal].in { opacity:1; transform:none; }
[data-reveal][data-d="1"]{ transition-delay:.08s; }
[data-reveal][data-d="2"]{ transition-delay:.16s; }
[data-reveal][data-d="3"]{ transition-delay:.24s; }
[data-reveal][data-d="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after { animation-duration:.001ms !important; animation-delay:0 !important; transition-duration:.001ms !important; }
  [data-reveal] { opacity:1; transform:none; }
  .hero h1 .line > span { transform:none; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--ink); color: var(--slate-300); padding-top: clamp(60px,7vw,96px); position:relative; overflow:hidden; }
.site-footer .fgrid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 60px; border-bottom:1px solid var(--line-dk); }
.site-footer h4 { color:#fff; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; margin-bottom:1.2rem; }
.site-footer a { color: var(--slate-400); font-size:.92rem; display:block; padding:.35em 0; transition: color .25s; }
.site-footer a:hover { color:#fff; }
.site-footer .fbrand p { max-width: 34ch; margin: 1.2rem 0; font-size:.92rem; }
.site-footer .fbottom { display:flex; justify-content:space-between; align-items:center; padding: 26px 0 40px; flex-wrap:wrap; gap:14px; }
.site-footer .fbottom small, .site-footer .fbottom span { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; color: var(--slate-500); }
.footer-mega { font-family: var(--font-display); font-weight:600; letter-spacing:-.04em; line-height:.9; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.06); font-size: clamp(4rem, 18vw, 15rem); position:absolute; left:0; right:0; bottom:-2vw; text-align:center; z-index:0; pointer-events:none; user-select:none; }
.site-footer .wrap { position:relative; z-index:1; }
@media (max-width:860px){ .site-footer .fgrid { grid-template-columns: 1fr 1fr; } .site-footer .fbrand { grid-column: span 2; } }
@media (max-width:520px){ .site-footer .fgrid { grid-template-columns: 1fr; } .site-footer .fbrand { grid-column: span 1; } }

/* ============================================================
   PAGE HERO (interior pages)
   ============================================================ */
.page-hero { background: var(--ink); color:#fff; padding: 150px 0 clamp(56px,7vw,90px); position:relative; overflow:hidden; }
.page-hero::before { content:""; position:absolute; inset:0; opacity:.5;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:56px 56px; mask-image: radial-gradient(110% 120% at 70% 0%, #000, transparent 75%); }
.page-hero::after { content:""; position:absolute; inset:0; background: radial-gradient(90% 70% at 85% 10%, rgba(14,118,190,.18), transparent 60%); }
.page-hero .wrap { position:relative; z-index:2; }
.page-hero h1 { color:#fff; max-width: 18ch; font-size: clamp(2.4rem,5.5vw,4.4rem); }
.page-hero .lead { color: var(--slate-300); max-width: 60ch; margin-top:1.4rem; }
.breadcrumb { display:flex; gap:.6em; align-items:center; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--slate-400); margin-bottom:1.6rem; }
.breadcrumb a { color:var(--slate-400); } .breadcrumb a:hover{color:#fff;}
.breadcrumb .sep { color: var(--blue-bright); }

/* Anchored sub-nav */
.subnav { position: sticky; top: 76px; z-index: 40; background: rgba(255,255,255,.9); backdrop-filter: blur(14px); border-bottom:1px solid var(--border); }
.subnav .wrap { display:flex; gap: 4px; overflow-x:auto; padding-block: 0; scrollbar-width:none; }
.subnav .wrap::-webkit-scrollbar { display:none; }
.subnav a { white-space:nowrap; padding: 16px 14px; font-family:var(--font-display); font-weight:500; font-size:.9rem; color:var(--text-mute); border-bottom:2px solid transparent; transition: color .25s, border-color .25s; }
.subnav a:hover { color: var(--ink); }
.subnav a.active { color: var(--blue); border-color: var(--blue); }

/* ============================================================
   Generic cards
   ============================================================ */
.card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding: clamp(22px,2.6vw,32px); transition: transform .4s var(--ease-out), box-shadow .4s, border-color .4s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.card .ic { width:44px; height:44px; color:var(--blue); margin-bottom:18px; }
.card h3 { font-size:1.25rem; margin-bottom:.6rem; }
.card p { font-size:.94rem; }
.card.dark { background: var(--ink-2); border-color: var(--line-dk); }
.card.dark h3 { color:#fff; } .card.dark p { color: var(--slate-300); }

.tag { display:inline-block; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; padding:.4em .7em; border-radius:40px; background: var(--surface-2); color: var(--slate-700); }
.tag.blue { background: rgba(14,118,190,.1); color: var(--blue-deep); }
.tag.purple { background: rgba(106,31,156,.1); color: var(--purple); }
.tag.eco { background: rgba(47,191,143,.12); color: #17805e; }

/* Divider label */
.rule-label { display:flex; align-items:center; gap:16px; margin: 0 0 30px; }
.rule-label span { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-mute); }
.rule-label::after { content:""; flex:1; height:1px; background: var(--border); }

/* CTA band */
.cta-band { background: linear-gradient(120deg, var(--ink) 0%, #10233a 55%, #1a1030 100%); color:#fff; border-radius: var(--radius-lg); padding: clamp(40px,6vw,80px); position:relative; overflow:hidden; }
.cta-band::before { content:""; position:absolute; inset:0; opacity:.4; background-image: linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:44px 44px; mask-image: radial-gradient(90% 120% at 100% 0,#000,transparent 70%); }
.cta-band > * { position:relative; z-index:1; }
.cta-band h2 { color:#fff; max-width: 20ch; }
.cta-band p { color: var(--slate-300); max-width: 52ch; margin-top:1rem; }

/* Utility */
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.6rem}.mt-4{margin-top:2.4rem}
.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.6rem}
.muted{color:var(--text-mute)} .small{font-size:.88rem}
.flex{display:flex}.wrap-gap{flex-wrap:wrap;gap:10px}.aic{align-items:center}.jcsb{justify-content:space-between}
.hide-m{} @media(max-width:700px){.hide-m{display:none}}