/* ==========================================================================
   Africa Brand | main.css | shared design system (spec sections 2, 3, 4, 7)
   Page engineers: do not edit this file. Page-specific rules go in
   assets/css/page-<name>.css loaded after this one.
   ========================================================================== */
@property --bevel-angle { syntax: '<angle>'; inherits: false; initial-value: 210deg; }

:root {
  /* ---- 1. Colour: forge (dark grounds) ---- */
  --forge-black: #0a0406;
  --forge-deep:  #120508;
  --oxblood:     #1f0509;
  --oxblood-2:   #2a0810;
  --maroon:      #4a0a12;
  --crimson:     #9b1220;
  --scarlet:     #d4212b;
  --molten:      #e8632b;
  --amber:       #f29a3c;
  --ember:       #ffb35c;
  --cream:       #f8e3c4;
  /* ---- Colour: paper (light grounds) ---- */
  --paper:       #f7f3ee;
  --paper-2:     #f0e9e1;
  --paper-3:     #e8dfd5;
  --paper-line:  #e3d9cf;
  --ink:         #1a0d10;
  --ink-2:       #5a4a4d;
  --ink-3:       #6f5c5a;
  /* ---- Chrome family ---- */
  --chrome-100: #ffffff; --chrome-200: #eef1f4; --chrome-300: #dfe3e8; --chrome-400: #b8c0c8;
  --chrome-500: #9aa3ad; --chrome-550: #7c848d; --chrome-600: #5d656e; --chrome-700: #2b3138;
  /* ---- Text ---- */
  --text-on-dark:   #f4eee9;  --text-on-dark-2:  #c9bfbb;  --text-on-dark-3:  #9a8f8c;
  --text-on-light:  #1a0d10;  --text-on-light-2: #5a4a4d;  --text-on-light-3: #6f5c5a;
  --link-on-dark:   #f7b25a;  --link-on-light:   #9b1220;  --focus: #f29a3c;

  /* ---- 2. Two-tone gradient recipes ---- */
  --grad-molten:         linear-gradient(135deg, #9b1220 0%, #d4212b 45%, #e8632b 80%, #f29a3c 100%);
  --grad-btn:            linear-gradient(180deg, #d9262f 0%, #b8171f 55%, #8c0f1a 100%);
  --grad-btn-hover:      linear-gradient(180deg, #e6303a 0%, #c41a24 55%, #9b1220 100%);
  --grad-oxblood:        linear-gradient(180deg, #0a0406 0%, #1f0509 60%, #3a0810 100%);
  --grad-crimson-maroon: linear-gradient(160deg, #d4212b 0%, #9b1220 40%, #4a0a12 100%);
  --grad-scarlet-amber:  linear-gradient(90deg, #d4212b, #f29a3c);
  --grad-eyebrow:        linear-gradient(90deg, #f29a3c, #f8e3c4);
  --grad-wordmark:       linear-gradient(180deg, #f29a3c 0%, #d4212b 48%, #9b1220 100%);
  --grad-wordmark-light: linear-gradient(180deg, #9b1220 0%, #6e0f18 60%, #4a0a12 100%);
  --grad-heat:           radial-gradient(60% 50% at 50% 100%, rgba(232,99,43,.30), rgba(155,18,32,.12) 45%, transparent 72%);
  --grad-cta-ground:     linear-gradient(160deg, #9b1220 0%, #4a0a12 42%, #120508 100%);
  --grad-africa:         linear-gradient(160deg, #f29a3c 0%, #e8632b 18%, #d4212b 42%, #9b1220 70%, #4a0a12 100%);

  /* ---- 3. Chrome recipes ---- */
  --chrome-text:      linear-gradient(180deg, #ffffff 0%, #eef1f4 18%, #c3cad2 36%, #7c848d 49%, #d4d9df 53%, #f8e3c4 66%, #f29a3c 74%, #c9d0d7 86%, #ffffff 100%);
  --chrome-text-hot:  linear-gradient(180deg, #ffffff 0%, #e6e9ed 20%, #aeb6be 38%, #7c848d 49%, #f8e3c4 53%, #f29a3c 62%, #e8632b 72%, #d4212b 84%, #f8e3c4 100%);
  --chrome-text-ink:  linear-gradient(180deg, #4a4043 0%, #1a0d10 34%, #6b5d60 50%, #2b1f22 58%, #4a0a12 100%);
  --chrome-bevel:      conic-gradient(from var(--bevel-angle, 210deg) at 50% 50%, #ffffff 0deg, #9aa3ad 40deg, #eef1f4 90deg, #5d656e 140deg, #dfe3e8 190deg, #2b3138 240deg, #b8c0c8 290deg, #ffffff 360deg);
  --chrome-bevel-soft: conic-gradient(from var(--bevel-angle, 200deg), #ffffff, #9aa3ad 25%, #ffffff 50%, #7c848d 75%, #ffffff);
  --chrome-line:       linear-gradient(90deg, transparent, #9aa3ad 25%, #ffffff 50%, #9aa3ad 75%, transparent);
  --chrome-line-v:     linear-gradient(180deg, transparent, #9aa3ad 30%, #ffffff 50%, #9aa3ad 70%, transparent);
  --chrome-sweep:      linear-gradient(115deg, transparent 42%, rgba(255,255,255,.8) 50%, transparent 58%);
  --chrome-sweep-dark: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%);
  --chrome-face:       linear-gradient(180deg, #f4f6f8 0%, #d5dae0 38%, #aeb6bf 52%, #cfd5dc 62%, #eef1f4 100%);
  --brushed:           repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px, rgba(0,0,0,.06) 3px 4px);

  /* ---- 4. Glow recipes ---- */
  --glow-img:        0 0 0 1px rgba(255,255,255,.06), 0 0 40px -6px rgba(212,33,43,.55), 0 0 90px -20px rgba(232,99,43,.45);
  --glow-img-hover:  0 0 0 1px rgba(255,255,255,.10), 0 0 60px -4px rgba(212,33,43,.85), 0 0 130px -20px rgba(242,154,60,.65);
  --glow-img-light:  0 0 0 1px rgba(155,18,32,.08), 0 18px 50px -24px rgba(212,33,43,.40);
  --glow-btn:        0 0 24px -6px rgba(232,99,43,.7), 0 0 60px -20px rgba(212,33,43,.9);
  --glow-node:       0 0 6px 1px rgba(242,154,60,.9), 0 0 18px 4px rgba(212,33,43,.55);
  --glow-cursor:     radial-gradient(circle, rgba(247,178,90,.085) 0%, rgba(212,33,43,.035) 38%, transparent 68%); /* round-3 design ruling (a): .085/.035 so the 0 to 180px rings land at about +3.5 to +4 L on dark (spec 2 and 3.9 carry .18/.07; amendment drafted in build-notes 7) */
  --glow-cursor-warm:radial-gradient(circle, rgba(232,99,43,.10) 0%, rgba(155,18,32,.04) 40%, transparent 70%);
  --halo-radial:     radial-gradient(60% 60% at 50% 60%, rgba(232,99,43,.6), rgba(212,33,43,.38) 45%, transparent 75%);

  /* ---- 5. Type ---- */
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Manrope", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-hero:  clamp(2.5rem, 1.2rem + 3.9vw, 4.5rem);
  --fs-h1:    clamp(2.25rem, 1.2rem + 3vw, 3.75rem);
  --fs-h2:    clamp(1.9rem, 1.25rem + 2.3vw, 3.2rem);
  --fs-h3:    clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
  --fs-h4:    clamp(1.1rem, 1rem + .4vw, 1.3rem);
  --fs-lead:  clamp(1.0625rem, 1rem + .4vw, 1.3rem);
  --fs-body:  clamp(1rem, .95rem + .2vw, 1.0625rem);
  --fs-small: .875rem;
  --fs-eyebrow: .74rem;
  --fs-stat:  clamp(1.9rem, 1.4rem + 1.8vw, 3rem);
  --lh-tight: 1.04; --lh-snug: 1.15; --lh-body: 1.65;
  --ls-display: -.02em; --ls-eyebrow: .22em; --ls-wordmark: .34em;

  /* ---- 6. Spacing and layout ---- */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --section-y: clamp(4.5rem, 4rem + 5vw, 8.5rem);
  --container: 1240px; --container-wide: 1400px; --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --nav-h: 78px; --nav-h-compact: 66px; --nav-h-mobile: 64px;

  /* ---- 7. Radii ---- */
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* ---- 8. Shadows ---- */
  --shadow-1:     0 1px 2px rgba(10,4,6,.25), 0 8px 24px -12px rgba(10,4,6,.45);
  --shadow-2:     0 20px 50px -20px rgba(10,4,6,.7);
  --shadow-light: 0 1px 0 #fff inset, 0 10px 30px -14px rgba(74,10,18,.25);
  --shadow-plate: 0 40px 80px -40px rgba(0,0,0,.85), 0 1px 0 #fff inset, 0 -1px 0 #454b52 inset;

  /* ---- 9. Z-index map ---- */
  --z-fx: -1; --z-content: 1; --z-ring: 2; --z-filterbar: 20; --z-cursor: 30; --z-beam: 40;
  --z-nav: 50; --z-mega: 55; --z-overlay: 60; --z-lightbox: 70; --z-skip: 100;

  /* ---- 10. Motion ---- */
  --ease: cubic-bezier(.2,.7,.2,1); --ease-sweep: cubic-bezier(.4,0,.2,1);
  --d-fast: .2s; --d-base: .3s; --d-reveal: .8s;

  /* ---- 11. Breakpoints (documentation) ---- */
  --bp-xs: 480px; --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px;
}

/* ---- 2.1 Semantic re-mapping per theme ---- */
.forge { --bg: var(--forge-deep); --surface: var(--oxblood-2); --fg: var(--text-on-dark); --fg-2: var(--text-on-dark-2); --fg-3: var(--text-on-dark-3); --line: rgba(255,255,255,.08); --link: var(--link-on-dark); color: var(--fg); background: var(--grad-oxblood); }
.silk  { --bg: var(--paper); --surface: #ffffff; --fg: var(--text-on-light); --fg-2: var(--text-on-light-2); --fg-3: var(--text-on-light-3); --line: var(--paper-line); --link: var(--link-on-light); color: var(--fg); background: var(--paper); }

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-on-dark); background: var(--forge-black); overflow-x: hidden; }
body.menu-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); line-height: var(--lh-snug); letter-spacing: var(--ls-display); text-wrap: balance; }
h1, h2 { font-weight: 800; }
h3 { font-weight: 700; font-size: var(--fs-h3); }
h4 { font-weight: 700; font-size: var(--fs-h4); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button { font: inherit; color: inherit; }
svg { display: block; }
[id] { scroll-margin-top: calc(var(--nav-h-compact) + 16px); }
.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.container--wide { width: min(var(--container-wide), 100% - 2 * var(--gutter)); }
.section { padding: var(--section-y) 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -80px; z-index: var(--z-skip); padding: .75rem 1.25rem; border-radius: var(--r-pill); border: 1.5px solid transparent; background: var(--grad-btn) padding-box, var(--chrome-bevel) border-box; color: #fff8f0; font-weight: 700; text-decoration: none; }
.skip:focus { top: 16px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.skip:focus-visible { border-radius: var(--r-pill); }
main:focus { outline: none; }   /* <main id="main" tabindex="-1"> is the skip-link target; programmatic focus needs no ring */
.silk :focus-visible { outline-color: var(--crimson); }
.lead { font-size: var(--fs-lead); color: var(--fg-2, var(--text-on-dark-2)); max-width: 62ch; }
.small { font-size: var(--fs-small); color: var(--fg-3, var(--text-on-dark-3)); }
.text-2 { color: var(--fg-2, var(--text-on-dark-2)); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem; }
.prose > * + * { margin-top: 1rem; }
.prose p { color: var(--fg-2, var(--text-on-dark-2)); max-width: 62ch; }
.forge a:not([class]) { color: var(--link-on-dark); }
.silk a:not([class]) { color: var(--link-on-light); }

/* ==========================================================================
   Chrome text (2.4), dividers, eyebrow, section header (4.3)
   ========================================================================== */
.chrome {
  background-image: var(--chrome-sweep), var(--chrome-text);
  background-size: 250% 100%, 100% 100%;
  background-position: -150% 0, 0 0;
  background-repeat: no-repeat, no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* Block-level chrome headings tile the metal per line (1lh) so every line carries its own warm band. */
h1.chrome, h2.chrome, h3.chrome, h4.chrome, p.chrome, .chrome--block { background-size: 250% 100%, 100% 1lh; background-repeat: no-repeat, repeat-y; }
.chrome--hot { background-image: var(--chrome-sweep), var(--chrome-text-hot); }
.chrome--on-light, .silk .chrome { background-image: var(--chrome-sweep-dark), var(--chrome-text-ink); }
.silk .panel .chrome, .silk .chrome--on-dark { background-image: var(--chrome-sweep), var(--chrome-text); }
.chrome.in, .in .chrome { animation: chromeSweep 1.9s var(--ease-sweep) .3s 1 both; }
@keyframes chromeSweep { from { background-position: -150% 0, 0 0; } to { background-position: 250% 0, 0 0; } }
@supports not (background-clip: text) {
  .chrome { color: var(--chrome-300); -webkit-text-fill-color: currentColor; background: none; }
  .chrome--on-light, .silk .chrome { color: var(--ink); }
}

.divider--chrome { position: relative; height: 1px; background: var(--chrome-line); opacity: .6; }
.divider--chrome::after { content: ""; position: absolute; inset: 1px 0 -2px; background: var(--chrome-line); opacity: .35; box-shadow: 0 0 3px 1px rgba(255,255,255,.18); }
.divider--chrome-v { width: 1px; background: var(--chrome-line-v); opacity: .6; }

.eyebrow { display: inline-flex; align-items: flex-start; gap: .75rem; margin: 0; font: 700 var(--fs-eyebrow)/1.3 var(--font-body); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
/* The rule sits on the first line even when the eyebrow wraps (half the 1.3 line box, minus half the 1px rule). */
.eyebrow::before { content: ""; width: 28px; height: 1px; margin-top: calc(.65em - .5px); background: var(--chrome-line); flex: none; }
.eyebrow span { background: var(--grad-eyebrow); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.silk .eyebrow span, .eyebrow--light span { background: none; color: var(--crimson); -webkit-text-fill-color: currentColor; }
.silk .eyebrow::before, .eyebrow--light::before { background: linear-gradient(90deg, transparent, var(--chrome-600), var(--chrome-400)); }
.silk .panel .eyebrow span { background: var(--grad-eyebrow); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.silk .panel .eyebrow::before { background: var(--chrome-line); }

.sec-head { max-width: 760px; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.sec-head h2, .sec-head h1 { font-size: var(--fs-h2); margin: 1rem 0 1.2rem; }
.sec-head h2::after { content: ""; display: block; width: 64px; height: 3px; border-radius: 3px; margin-top: 1.1rem; background: var(--grad-scarlet-amber); transform-origin: left; transition: transform .9s var(--ease) .4s; }
.js .sec-head h2::after { transform: scaleX(0); }
.js .sec-head.in h2::after, .js .in .sec-head h2::after { transform: scaleX(1); }
.sec-head .lead { margin: 0; }
.sec-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; max-width: none; }
.sec-head--split > div { max-width: 760px; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .lead { margin-inline: auto; }
.sec-head--center h2::after { margin-inline: auto; transform-origin: center; }

/* ==========================================================================
   Buttons (4.2)
   ========================================================================== */
.btn { --bevel-angle: 210deg; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 52px; padding: .85rem 1.7rem; border-radius: var(--r-pill); border: 1.5px solid transparent; font: 700 .95rem/1 var(--font-body); letter-spacing: .02em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .25s var(--ease), box-shadow .3s, --bevel-angle .8s var(--ease), background-color .25s, color .25s; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { color: #fff8f0; background: var(--grad-btn) padding-box, var(--chrome-bevel) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 8px rgba(74,10,18,.55), var(--glow-btn); }
.btn--primary:hover { --bevel-angle: 570deg; transform: translateY(-2px); background: var(--grad-btn-hover) padding-box, var(--chrome-bevel) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 8px rgba(74,10,18,.55), 0 0 34px -4px rgba(232,99,43,.9), 0 0 80px -16px rgba(212,33,43,1); }
.btn--secondary { color: var(--chrome-200); background: linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.02)) padding-box, linear-gradient(var(--oxblood-2), var(--oxblood-2)) padding-box, var(--chrome-bevel) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 30px -14px rgba(0,0,0,.8); }
.btn--secondary:hover { --bevel-angle: 570deg; transform: translateY(-2px); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 30px -10px rgba(242,154,60,.6); }
.silk .btn--secondary { color: var(--ink); background: linear-gradient(#fff, #f3eee7) padding-box, var(--chrome-bevel-soft) border-box; box-shadow: var(--shadow-light); }
.silk .btn--secondary:hover { color: var(--crimson); box-shadow: 0 1px 0 #fff inset, 0 14px 30px -14px rgba(212,33,43,.45); }
.btn--plate-secondary { color: var(--ink); background: linear-gradient(#ffffff, #eef1f4) padding-box, var(--chrome-bevel) border-box; box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.18); }
.btn--plate-secondary:hover { --bevel-angle: 570deg; transform: translateY(-2px); color: var(--crimson); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.18), 0 10px 24px -12px rgba(10,4,6,.6); }
.btn--ghost { min-height: 0; padding: .35rem 0; border: 0; border-radius: 0; gap: .45rem; color: var(--cream); }
.btn--ghost::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--chrome-line); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.btn--ghost:hover::after { transform: scaleX(1); }
.btn--ghost svg { transition: transform .3s var(--ease); }
.btn--ghost:hover svg { transform: translateX(4px); }
.silk .btn--ghost { color: var(--crimson); }
.silk .btn--ghost::after { background: linear-gradient(90deg, var(--crimson), var(--amber)); }
.btn--sm { min-height: 44px; padding: .6rem 1.25rem; font-size: .875rem; }
.btn--wa svg { width: 20px; height: 20px; }
.btn--block { width: 100%; }
.icon-btn { --bevel-angle: 210deg; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1.5px solid transparent; background: linear-gradient(var(--oxblood-2), var(--oxblood-2)) padding-box, var(--chrome-bevel) border-box; color: var(--chrome-200); cursor: pointer; text-decoration: none; transition: box-shadow .3s, transform .25s var(--ease), --bevel-angle .8s var(--ease), color .25s; }
.icon-btn:hover { --bevel-angle: 570deg; transform: translateY(-2px); box-shadow: 0 0 26px -6px rgba(242,154,60,.8); color: #fff; }
.icon-btn svg { width: 20px; height: 20px; }
.silk .icon-btn { background: linear-gradient(#fff, #fff) padding-box, var(--chrome-bevel-soft) border-box; color: var(--ink); box-shadow: var(--shadow-light); }
.silk .icon-btn:hover { color: var(--crimson); }

/* ==========================================================================
   Cursor glow (3.9) and progress beam (3.7)
   ========================================================================== */
.cursor-glow, .cursor-warm { position: fixed; left: 0; top: 0; width: 720px; height: 720px; border-radius: 50%; pointer-events: none; z-index: var(--z-cursor); opacity: 0; transition: opacity .6s; will-change: transform; transform: translate3d(-2000px, -2000px, 0); }
.cursor-glow { background: var(--glow-cursor); mix-blend-mode: screen; }
.cursor-warm { background: var(--glow-cursor-warm); mix-blend-mode: multiply; }
.cursor-glow.on, .cursor-warm.on { opacity: 1; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .cursor-glow, .cursor-warm { display: none; } }
.beam { position: fixed; top: 0; right: 0; width: 2px; height: 100vh; z-index: var(--z-beam); pointer-events: none; background: linear-gradient(180deg, #f29a3c, #d4212b 55%, #9b1220); transform-origin: top; transform: scaleY(var(--prog, 0)); opacity: .9; }
.beam__tip { position: fixed; top: -5px; right: -4px; width: 10px; height: 10px; border-radius: 50%; z-index: var(--z-beam); pointer-events: none; background: var(--ember); box-shadow: var(--glow-node); transform: translateY(calc(var(--prog, 0) * 100vh)); }
@media (max-width: 1023px), (hover: none) { .beam, .beam__tip { display: none; } }

/* ==========================================================================
   Header, mega menu, mobile overlay (4.1)
   ========================================================================== */
.nav { position: sticky; top: 0; z-index: var(--z-nav); background: rgba(18,5,8,.68); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
/* Once the bar has left the dark hero it sits over light sections: raise the ground so the wordmark and links keep contrast. */
.nav--compact { background: rgba(18,5,8,.98); }
.nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--chrome-line); opacity: .45; pointer-events: none; }
.nav__bar { display: flex; align-items: center; gap: 1.5rem; height: var(--nav-h); transition: height .3s var(--ease); }
.nav--compact .nav__bar { height: var(--nav-h-compact); }
.brand { display: flex; align-items: center; gap: .85rem; text-decoration: none; flex: none; }
.brand__mark { width: 46px; height: 48px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 24px -6px rgba(212,33,43,.8); transition: box-shadow .3s; }
.brand:hover .brand__mark { box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 0 32px -4px rgba(232,99,43,.95); }
.brand__word { display: flex; flex-direction: column; line-height: 1; }
.brand__word b, .brand__word small { font-family: var(--font-body); font-weight: 800; text-transform: uppercase; background: var(--grad-wordmark); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.brand__word b { font-size: 17px; letter-spacing: var(--ls-wordmark); }
.brand__word small { font-size: 10.5px; letter-spacing: .46em; margin-top: 4px; padding-left: .3em; }
.nav__primary { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: .15rem; }
.nav__link { position: relative; display: inline-flex; align-items: center; gap: .35rem; padding: .7rem .9rem; font: 600 15px/1 var(--font-body); color: var(--text-on-dark-2); text-decoration: none; background: none; border: 0; cursor: pointer; border-radius: 8px; transition: color .25s; }
.nav__link::after { content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .3rem; height: 2px; border-radius: 2px; background: var(--grad-scarlet-amber); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav__link:hover, .nav__link[aria-current="page"], .has-mega.open .nav__link { color: var(--cream); }
.nav__link:hover::after, .nav__link:focus-visible::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link svg { width: 14px; height: 14px; transition: transform .3s; }
.has-mega.open .nav__link svg { transform: rotate(180deg); }
.nav__actions { display: flex; align-items: center; gap: .75rem; }
.nav__toggle { display: none; width: 46px; height: 46px; border: 1.5px solid transparent; border-radius: 12px; background: linear-gradient(var(--oxblood-2), var(--oxblood-2)) padding-box, var(--chrome-bevel) border-box; cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nav__toggle i { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--chrome-line); background-color: var(--chrome-300); transition: transform .3s, opacity .3s; }
.nav__toggle[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Opaque ground: 1.5 percent of transparency was enough for chrome hero text to ghost through. max-height keeps the foot strip reachable on short viewports. */
.mega { position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-mega); background: var(--forge-deep); max-height: calc(100vh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--shadow-2); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s; }
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--chrome-line); opacity: .6; }
.mega::after { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 42px), repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 42px); pointer-events: none; }
.has-mega.open .mega, html:not(.js) .has-mega:hover .mega, html:not(.js) .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s; }
.mega__grid { display: grid; grid-template-columns: repeat(6, 1fr) 1.2fr; gap: 1.5rem; padding: 2rem 0 1.75rem; }
.mega__h { font: 700 .95rem/1.2 var(--font-display); margin-bottom: .9rem; letter-spacing: .01em; }
.mega__h a { text-decoration: none; }
.mega__col a { display: block; padding: .3rem 0; font-size: .875rem; color: var(--text-on-dark-2); text-decoration: none; transition: color .2s, transform .2s; }
.mega__col a:hover { color: var(--cream); transform: translateX(3px); }
.mega__feature { border-left: 1px solid rgba(255,255,255,.08); padding-left: 1.5rem; }
.mega__feature .glow-frame { margin-bottom: .9rem; }
.mega__feature p { font-size: .85rem; color: var(--text-on-dark-2); margin-bottom: .6rem; }
.mega__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; padding: 1rem 0 1.5rem; border-top: 1px solid rgba(255,255,255,.08); font-size: .9rem; color: var(--text-on-dark-2); }

.mmenu { position: fixed; inset: 0; z-index: var(--z-overlay); display: flex; flex-direction: column; overflow: auto; padding: 96px var(--gutter) 2.5rem; background: var(--grad-oxblood); color: var(--text-on-dark); }
.mmenu[hidden] { display: none; }
.mmenu::before { content: ""; position: fixed; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 42px), repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 42px); pointer-events: none; }
.mmenu__close { position: absolute; top: 12px; right: var(--gutter); }
.mmenu__brand { position: absolute; top: 12px; left: var(--gutter); }
.mmenu__list { position: relative; display: flex; flex-direction: column; gap: .35rem; }
.mmenu__list > li > a, .mmenu__list summary { display: block; padding: .55rem 0; font: 800 clamp(1.6rem, 5vw, 2rem)/1.1 var(--font-display); text-decoration: none; cursor: pointer; list-style: none; }
.mmenu__list summary::-webkit-details-marker { display: none; }
.mmenu__list summary { display: flex; align-items: center; justify-content: space-between; }
.mmenu__list summary::after { content: "+"; font: 700 1.5rem/1 var(--font-body); color: var(--amber); }
.mmenu__list details[open] summary::after { content: "\2212"; }
.mmenu__group { padding: .25rem 0 .75rem; }
/* Group titles in the mega panel (.mega__h) and the overlay (.mmenu__h) are <p>, not headings: twelve of them precede the h1 in DOM order on every page. */
.mmenu__h, .mmenu__group h3 { font: 700 .8rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--amber); margin: .9rem 0 .4rem; }
/* Outranks .mmenu__group a below so the title link keeps the label's size, colour and inline flow (the h3 alias covers pages not yet migrated). */
.mmenu__group .mmenu__h a, .mmenu__group h3 a { display: inline; padding: 0; font: inherit; color: inherit; text-decoration: none; }
.mmenu__group a { display: block; padding: .3rem 0; color: var(--text-on-dark-2); text-decoration: none; font-size: .95rem; }
.mmenu__actions { position: relative; margin-top: auto; padding-top: 2rem; display: flex; flex-direction: column; gap: .75rem; }
.mmenu__actions .btn { width: 100%; }
.mmenu__tel { text-align: center; color: var(--text-on-dark-2); font-size: .9rem; }
.mmenu__tel a { color: var(--cream); text-decoration: none; font-weight: 700; }

/* ==========================================================================
   FORGE: dark sections with the grid floor (3.2)
   ========================================================================== */
.forge { position: relative; isolation: isolate; overflow: hidden; }
.forge > .container { position: relative; z-index: var(--z-content); }
.forge__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; }
.forge__grid { position: absolute; left: 0; right: 0; top: -420px; height: calc(100% + 840px);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.055) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(242,154,60,.13) 0 1px, transparent 1px 210px),
    repeating-linear-gradient(0deg,  rgba(242,154,60,.13) 0 1px, transparent 1px 210px);
  transform: translate3d(0, calc(var(--p, 0) * -160px), 0); will-change: transform; }
.forge__node { position: absolute; width: 5px; height: 5px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--ember); box-shadow: var(--glow-node); opacity: .55; animation: ember 4.5s ease-in-out infinite alternate; }
.forge__node:nth-child(2n) { animation-duration: 3.4s; animation-delay: -1.2s; }
.forge__node:nth-child(3n) { animation-duration: 5.6s; animation-delay: -2.6s; }
.forge__node:nth-child(4n+1) { animation-delay: -.7s; }
@keyframes ember { from { opacity: .3; transform: scale(.8); } to { opacity: 1; transform: scale(1.25); } }
/* The floor is capped to a 560px band so a tall section (#work is about 1,900px at 1440) shows the same converging lines at its base as the hero. */
.forge__floor { position: absolute; left: -30%; right: -30%; bottom: -60px; height: min(64%, 560px); overflow: hidden; transform-origin: 50% 100%;
  transform: translateY(calc(var(--p, 0) * -40px)) perspective(700px) rotateX(64deg);
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.85) 30%, transparent 92%); mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.85) 30%, transparent 92%); }
.forge__floor-lines { position: absolute; left: 0; right: 0; top: -168px; bottom: 0;
  background:
    repeating-linear-gradient(90deg, rgba(242,154,60,.26) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg,  rgba(242,154,60,.26) 0 1px, transparent 1px 84px),
    radial-gradient(circle, rgba(255,179,92,.85) 0 1.4px, transparent 2.8px);
  background-size: auto, auto, 84px 84px; background-position: 0 0, 0 0, -42px -42px;
  animation: floorDrift 9s linear infinite; }
@keyframes floorDrift { from { transform: translateY(0); } to { transform: translateY(84px); } }
.forge__heat { position: absolute; inset: 0; background: var(--grad-heat); }
.forge__vignette { position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 40%, rgba(10,4,6,.55), transparent 72%); }
.hero .forge__vignette, .forge--left .forge__vignette { background: radial-gradient(62% 70% at 26% 48%, rgba(10,4,6,.86), transparent 70%); }

/* Light trails (Work-page dark sections) */
.fx-trail { position: absolute; left: 0; height: 2px; z-index: 0; pointer-events: none; opacity: .75; background: linear-gradient(90deg, transparent, var(--amber), transparent); transform: translateX(calc((var(--p, 0) - .5) * var(--dir, 1) * 150vw)); }
.fx-trail--a { width: 38vw; top: 18%; --dir: 1; }
.fx-trail--b { width: 26vw; top: 52%; --dir: -1; }
.fx-trail--c { width: 38vw; top: 84%; --dir: 1; }

/* ==========================================================================
   Africa silhouette (3.6)
   ========================================================================== */
.africa-wrap { position: absolute; z-index: -1; pointer-events: none; right: -3%; top: 3%; width: min(86vh, 900px); aspect-ratio: 1335 / 1423; transform: translate3d(0, calc(var(--p, 0) * 90px), 0); will-change: transform; }
.africa { position: absolute; inset: 0; -webkit-mask: url(../img/africa-outline.svg) center / contain no-repeat; mask: url(../img/africa-outline.svg) center / contain no-repeat; background: var(--grad-africa); opacity: .22; }
.africa-glow { position: absolute; inset: 0; filter: blur(40px); animation: africaPulse 7s ease-in-out infinite alternate; }
.africa-glow .africa { opacity: 1; background: radial-gradient(circle at 45% 35%, #e8632b, #9b1220 50%, transparent 78%); }
@keyframes africaPulse { from { opacity: .26; } to { opacity: .46; } }
.africa--brand .africa { -webkit-mask-image: url(../img/africa-brand-silhouette.svg); mask-image: url(../img/africa-brand-silhouette.svg); }
.africa-wrap.africa--brand { aspect-ratio: 1393 / 1256; }
.hero--inner .africa-wrap { right: -6%; top: 0; width: min(80vh, 820px); }
.africa-wrap--center { right: auto; left: 50%; top: 50%; transform: translate3d(-50%, calc(-50% + var(--p, 0) * 60px), 0); }
.africa-wrap--center .africa { opacity: .16; }
.cta .africa-wrap { right: auto; left: 50%; top: -10%; width: min(70vh, 640px); transform: translate3d(-50%, calc(var(--p, 0) * 60px), 0); }
.cta .africa { opacity: .14; }
.footer .africa-wrap { right: -8%; top: auto; bottom: -12%; width: min(52vh, 420px); transform: none; will-change: auto; }
.footer .africa { opacity: .08; }
.africa--paper { will-change: auto; }
.africa--paper .africa { background: var(--crimson); opacity: .05; }

/* ==========================================================================
   Molten threads (3.7)
   ========================================================================== */
.thread { position: absolute; left: 0; width: 100%; top: 60%; height: 40%; z-index: 0; pointer-events: none; overflow: visible; }
.hero .thread { top: 62%; height: 38%; }
/* Home and inner heroes box the thread to .hero__inner (first child) so it ends above the trust band instead of under it; full-bleed width. */
.hero__inner .thread { top: 56%; height: 44%; left: calc(50% - 50vw); width: 100vw; z-index: 0; }
.thread--full { top: 0; height: 100%; }
.thread--top { top: 0; height: 36%; }
.thread--grid { top: 24%; height: 17%; }   /* both paths stay inside the first card band (24 to 41 percent), clear of every caption row */
.thread--low { top: 76%; height: 24%; }
.thread__line { fill: none; stroke: url(#threadGrad); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.thread__glow { opacity: .28; }
.thread__glow .thread__line { stroke-width: 7; }
.thread--light .thread__line { stroke: url(#silkChrome); stroke-width: 2; }

/* ==========================================================================
   SILK: light sections with swoosh ribbons (3.3)
   ========================================================================== */
.silk { position: relative; isolation: isolate; overflow: hidden; overflow: clip; }
.silk__svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.silk__wash { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 50% at 20% 25%, rgba(247,243,238,.9), transparent 70%); }
/* .silk--vivid: the first light section after a hero, where a card grid covers most of the SVG; stronger ribbon and stroke, tighter wash. */
.silk--vivid .silk__a { opacity: .16; }
.silk--vivid .silk__c { opacity: .8; }
.silk--vivid .silk__wash { background: radial-gradient(50% 45% at 18% 22%, rgba(247,243,238,.85), transparent 70%); }
.silk > .container { position: relative; z-index: var(--z-content); }
.silk__a, .silk__b, .silk__c { transform-box: fill-box; transform-origin: center; }
.silk__a { animation: silkA 26s ease-in-out infinite alternate; }
.silk__b { filter: blur(18px); animation: silkB 34s ease-in-out infinite alternate; }
/* Blur budget (3.10): only the first light section on a page blurs its deep ribbon; later ones carry .silk--lite */
.silk--lite .silk__b { filter: none; opacity: .07; }
.silk__c { animation: silkC 22s ease-in-out infinite alternate; }
@keyframes silkA { from { transform: translate(-2%, 1.5%) rotate(-1.2deg); } to { transform: translate(2%, -1.5%) rotate(1.2deg); } }
@keyframes silkB { from { transform: translate(2%, -1%) rotate(1deg); } to { transform: translate(-2%, 1%) rotate(-1deg); } }
@keyframes silkC { from { transform: translate(-1%, 2%) rotate(-.6deg); } to { transform: translate(1.5%, -2%) rotate(.8deg); } }

/* ==========================================================================
   Glow frames (3.8): tier A halo + chrome ring, tier B ambient photo halo
   ========================================================================== */
.glow-frame { position: relative; isolation: isolate; border-radius: var(--r-lg); box-shadow: var(--glow-img); transition: box-shadow .5s, transform .5s var(--ease); }
.glow-frame::before { content: ""; position: absolute; inset: -9%; z-index: -1; border-radius: inherit; background: var(--halo-radial); opacity: .62; transition: opacity .5s, transform .5s var(--ease); }
.glow-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--chrome-bevel); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; opacity: .85; z-index: var(--z-ring); }
.glow-frame__media { position: relative; overflow: hidden; border-radius: inherit; background: var(--oxblood); }
.glow-frame__media picture, .glow-frame__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.glow-frame img { object-fit: cover; transition: transform .7s var(--ease); }
.silk .glow-frame { box-shadow: var(--glow-img-light); }
.silk .glow-frame::before { opacity: .4; }
/* Tier B: the halo is a real child element carrying an inline background-image (a url() inside a custom
   property resolves against main.css in Chromium, so --img is not used). */
.glow-frame--ambient::before { display: none; }
.glow-frame__halo { position: absolute; inset: -6%; z-index: -1; border-radius: inherit; background-position: center; background-size: cover; background-repeat: no-repeat; filter: blur(30px) saturate(1.6); opacity: .5; pointer-events: none; transition: opacity .5s, transform .5s var(--ease); }
/* The 2x2 card's halo has an elliptical falloff (no straight edges on an 820px wide blur) and a lower rest opacity, so it reads as light from the sign, not a box behind the caption. */
.proj--lg .glow-frame__halo { inset: -4%; opacity: .42; -webkit-mask-image: radial-gradient(75% 70% at 50% 45%, #000 40%, transparent 100%); mask-image: radial-gradient(75% 70% at 50% 45%, #000 40%, transparent 100%); }
@media (hover: hover) {
  .glow-frame:hover, .proj:hover .glow-frame, .proj:focus-within .glow-frame { box-shadow: var(--glow-img-hover); }
  .glow-frame:hover::before, .proj:hover .glow-frame::before { opacity: 1; transform: scale(1.06); }
  .glow-frame:hover .glow-frame__halo, .proj:hover .glow-frame__halo { opacity: .92; transform: scale(1.06); }
  .proj--lg:hover .glow-frame__halo { opacity: .75; }
  .glow-frame:hover img, .proj:hover img { transform: scale(1.035); }
}
@media (hover: none) { .glow-frame::before { opacity: .8; } .glow-frame__halo { opacity: .7; } }

/* ==========================================================================
   Home hero (4.4) and trust strip
   ========================================================================== */
.hero__inner { display: flex; flex-direction: column; min-height: calc(100svh - var(--nav-h)); }
.hero__grid { position: relative; z-index: 1; flex: 1; display: grid; grid-template-columns: 1.55fr 1fr; gap: 3.5rem; align-items: center; padding: clamp(2rem, 4vh, 3.5rem) 0 clamp(2.5rem, 5vh, 4rem); }
.hero__grid > * { min-width: 0; }
.hero__copy { max-width: 720px; }
.hero h1 { font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: var(--ls-display); margin: 1.1rem 0 1.4rem; max-width: 720px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.45)); }
.hero h1 .chrome--hot { display: block; }
.hero__lead { font-size: var(--fs-lead); color: var(--text-on-dark-2); max-width: 58ch; margin-bottom: 1.8rem; }
.hero__lead + .hero__lead { margin-top: -.8rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 1.8rem; }
.caps { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; max-width: 100%; }
.caps__label { font: 700 .74rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--text-on-dark-3); margin-right: .25rem; }
.caps a { display: inline-flex; align-items: center; padding: .45rem .8rem; border-radius: var(--r-pill); border: 1px solid transparent; background: linear-gradient(var(--oxblood-2), var(--oxblood-2)) padding-box, var(--chrome-bevel-soft) border-box; font: 600 .78rem/1 var(--font-body); color: var(--text-on-dark-2); text-decoration: none; white-space: nowrap; transition: color .25s, box-shadow .3s, transform .25s var(--ease); }
.caps a:hover { color: var(--cream); transform: translateY(-1px); box-shadow: 0 0 18px -6px rgba(242,154,60,.8); }
.hero__visual { position: relative; aspect-ratio: 5 / 4.6; margin: 0; }
.hero__main { position: absolute; left: 0; top: 0; width: 82%; z-index: 2; transform: rotate(-1.5deg); }
.hero__sub { position: absolute; right: 0; bottom: 0; width: 52%; z-index: 3; border-radius: var(--r-md); transform: rotate(2.5deg); }
.hero__main .glow-frame__media, .hero__sub .glow-frame__media { aspect-ratio: 4 / 3; }
.float .hero__main { animation: floatA 8s ease-in-out infinite; }
.float .hero__sub { animation: floatB 9s ease-in-out infinite; }
@keyframes floatA { 0%, 100% { transform: rotate(-1.5deg) translateY(0); } 50% { transform: rotate(-1.5deg) translateY(-10px); } }
@keyframes floatB { 0%, 100% { transform: rotate(2.5deg) translateY(0); } 50% { transform: rotate(2.5deg) translateY(-10px); } }
.proj__chip { position: absolute; top: 14px; left: 14px; z-index: 1; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .75rem; border-radius: var(--r-pill); border: 1px solid transparent; background: linear-gradient(rgba(18,5,8,.85), rgba(18,5,8,.85)) padding-box, linear-gradient(var(--oxblood), var(--oxblood)) padding-box, var(--chrome-bevel) border-box; font: 700 .74rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--chrome-200); white-space: nowrap; }
.proj__chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--ember); box-shadow: var(--glow-node); }
/* The Savanna photo and its frame are both 4:3 (object-position has no crop to move) and the script's "S" starts 19 percent down
   on the left, under a top-left chip; the top-right quadrant is plain green wall, so the sub card's chip sits there. */
.hero__sub .proj__chip { left: auto; right: 10px; top: 10px; gap: .35rem; padding: .3rem .55rem; font-size: .6rem; }
.hero__sub .proj__chip i { width: 5px; height: 5px; }
.proj__cap { position: absolute; left: 0; bottom: 0; z-index: 1; max-width: 55%; padding: 2.4rem 1.1rem .9rem 1rem; border-radius: 0 var(--r-md) 0 0; background: linear-gradient(to top, rgba(10,4,6,.92) 0%, rgba(10,4,6,.6) 55%, transparent 100%); }
.proj__cap strong { display: block; font: 700 .95rem/1.25 var(--font-display); color: var(--cream); }

.trust { position: relative; z-index: 1; background: rgba(10,4,6,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.trust__intro { padding: 1.4rem 0 .2rem; font-size: .95rem; line-height: 1.6; color: var(--text-on-dark-2); max-width: 78ch; }
.trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust__item { display: flex; align-items: center; gap: .9rem; padding: 1.2rem 1.5rem; position: relative; }
.trust__item:first-child { padding-left: 0; }
.trust__item + .trust__item::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: var(--chrome-line-v); opacity: .8; }
.trust__num { font: 800 var(--fs-stat)/1 var(--font-display); letter-spacing: -.02em; white-space: nowrap; }
.trust__tile { --bevel-angle: 210deg; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid transparent; background: linear-gradient(var(--oxblood-2), var(--oxblood-2)) padding-box, var(--chrome-bevel) border-box; color: var(--amber); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.trust__tile svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.trust__item span { font: 600 .9rem/1.3 var(--font-body); color: var(--text-on-dark-2); }

/* ==========================================================================
   Inner-page hero with a backlit piece (4.5)
   ========================================================================== */
.hero--inner .hero__grid { grid-template-columns: 1.15fr .85fr; }
.hero--inner h1 { font-size: var(--fs-h1); }
.hero--compact .hero__inner { min-height: 0; padding: var(--section-y) 0; }
.hero--compact .hero__grid { padding: 0; }
.piece--backlit { position: relative; isolation: isolate; margin: 0; padding: 0 0 1rem; }
.piece--backlit::before { content: ""; position: absolute; inset: 14% -6% -8% -6%; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse at 50% 60%, rgba(212,33,43,.5), rgba(232,99,43,.16) 45%, transparent 72%); filter: blur(26px); }
.piece--backlit .glow-frame { transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); transition: transform .7s var(--ease), box-shadow .5s; }
.piece--backlit:hover .glow-frame { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg); }
.piece--backlit .glow-frame__media { aspect-ratio: 4 / 3; }
.piece--backlit .glow-frame--portrait .glow-frame__media { aspect-ratio: 3 / 4; }
.piece__reflect { aspect-ratio: 3.5 / 1; margin: 6px 6% 0; background-position: center bottom; background-size: cover; background-repeat: no-repeat; transform: scaleY(-1); opacity: .18; border-radius: var(--r-lg); -webkit-mask-image: linear-gradient(to top, #000, transparent 80%); mask-image: linear-gradient(to top, #000, transparent 80%); pointer-events: none; }
.piece--backlit figcaption { padding: .9rem .25rem 0; }
.piece--backlit .proj__meta { padding-top: .6rem; }

/* ==========================================================================
   Service cards (4.6)
   ========================================================================== */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.svc { --bevel-angle: 200deg; position: relative; display: flex; flex-direction: column; gap: .8rem; padding: 1.75rem 1.5rem 1.5rem; border-radius: var(--r-lg); border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--chrome-bevel-soft) border-box; box-shadow: var(--shadow-light); overflow: hidden; color: var(--ink); text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s, --bevel-angle 1s var(--ease); }
.svc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 1; background: var(--grad-molten); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.svc:hover { --bevel-angle: 560deg; transform: translateY(-5px); box-shadow: 0 24px 44px -22px rgba(212,33,43,.4), var(--shadow-light); }
.svc:hover::before { transform: scaleX(1); }
.svc__thumb { border-radius: var(--r-md); margin-bottom: .25rem; }
.svc__thumb .glow-frame__media { aspect-ratio: 16 / 10; }
.svc__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--chrome-bevel-soft) border-box; box-shadow: inset 0 1px 0 #fff, 0 4px 10px -6px rgba(74,10,18,.35); color: var(--crimson); transition: color .3s, box-shadow .3s; }
.svc__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.svc:hover .svc__icon { color: var(--molten); box-shadow: inset 0 1px 0 #fff, 0 0 20px -4px rgba(232,99,43,.6); }
.svc h3 { font-size: 1.2rem; font-weight: 700; line-height: 1.2; }
.svc p { font-size: .92rem; color: var(--ink-2); flex: 1; }
.svc__more { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .4rem; padding-top: .9rem; border-top: 1px solid var(--paper-line); font: 700 .78rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--crimson); }
.svc__more svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.svc:hover .svc__more svg { transform: translateX(4px); }

/* ==========================================================================
   Feature split panel, project cards (4.7), featured grid
   ========================================================================== */
.feature { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.feature--reverse { grid-template-columns: 5fr 6fr; }
.feature--reverse .feature__copy { order: 2; }
.feature__copy .sec-head { margin-bottom: 1.75rem; }
.feature__copy .actions { margin-top: 1.75rem; }
.feature__media { margin: 0; }
.feature__media .glow-frame__media { aspect-ratio: 4 / 3; }
.proj-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.proj-pair .proj:nth-child(2) { margin-top: 2.5rem; }

.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.proj { display: flex; flex-direction: column; text-decoration: none; color: inherit; border-radius: var(--r-lg); }
.proj > a, .proj > button { display: flex; flex-direction: column; flex: 1; padding: 0; border: 0; background: none; color: inherit; text-decoration: none; border-radius: inherit; cursor: pointer; text-align: left; }
.proj .glow-frame { flex: 1; display: flex; flex-direction: column; }
.proj .glow-frame__media { flex: 1; aspect-ratio: 4 / 3; }
.proj--portrait .glow-frame__media { aspect-ratio: 3 / 4; }
.proj--lg { grid-column: 1 / 3; grid-row: 1 / 3; }
.proj--lg .glow-frame__media { aspect-ratio: auto; min-height: 100%; }
.proj--lg .proj__title { font-size: 1.25rem; }
.proj__meta { padding: .9rem .25rem 0; }
.proj__cat { display: block; font: 700 var(--fs-eyebrow)/1.2 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); margin-bottom: .4rem; }
.silk .proj__cat { color: var(--crimson); }
.proj__title { display: block; font: 600 1rem/1.3 var(--font-display); color: var(--fg, var(--text-on-dark)); }
.proj__caption { font-size: var(--fs-small); line-height: 1.5; color: var(--fg-2, var(--text-on-dark-2)); margin-top: .3rem; }
.work-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; }
.work-foot p { color: var(--text-on-dark-3); font-size: .85rem; max-width: 70ch; }

/* ==========================================================================
   Why / reasons / industries / panel / quote (4.8)
   ========================================================================== */
.why-layout { display: grid; grid-template-columns: 1.35fr .9fr; gap: 3rem; align-items: start; }
/* The panel follows the reader down the longer left column (the .silk section uses overflow: clip, which keeps sticky alive). */
@media (min-width: 1024px) { .why-layout .panel { position: sticky; top: calc(var(--nav-h-compact) + 24px); } }
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 2rem; }
.reason { position: relative; padding: 1.25rem 0 1.25rem 4.6rem; border-top: 1px solid var(--paper-line); }
.forge .reason { border-top-color: rgba(255,255,255,.1); }
.reason b { position: absolute; left: 0; top: 1.1rem; font: 800 1.9rem/1 var(--font-display); letter-spacing: -.02em; }
.reason h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: .35rem; }
.reason p { font-size: .92rem; color: var(--fg-2, var(--ink-2)); }
.industries-wrap { position: relative; isolation: isolate; margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--paper-line); }
/* 3.3 and 9.3-A7: on a light section the sliced ribbon SVG puts the bright middle of the chrome stroke across the industries block at every width
   (1024 to 1440), so the block sits on its own paper wash (same device as .silk__wash under the section header); the stroke stays visible
   in the column gap and the right column. The watermark child (z -1, later in tree order) still paints above the wash. */
.silk .industries-wrap::before { content: ""; position: absolute; inset: -1.5rem -2rem; z-index: -1; background: radial-gradient(90% 80% at 35% 50%, rgba(247,243,238,.95) 0 70%, transparent 100%); pointer-events: none; }
.industries-wrap h3 { font-size: var(--fs-h3); margin-bottom: .75rem; }
.industries-wrap > p { color: var(--fg-2, var(--ink-2)); max-width: 62ch; }
.industries { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.6rem 0 0; position: relative; }
.industries li { --bevel-angle: 200deg; padding: .5rem .9rem; border-radius: var(--r-pill); border: 1px solid rgba(74,10,18,.18); background: linear-gradient(var(--paper-2), var(--paper-2)) padding-box; font: 600 .82rem/1.3 var(--font-body); color: var(--ink-2); transition: color .25s, box-shadow .3s; }
.industries li:hover { border-color: transparent; background: linear-gradient(var(--paper-2), var(--paper-2)) padding-box, var(--chrome-bevel-soft) border-box; color: var(--ink); box-shadow: 0 6px 16px -10px rgba(74,10,18,.4); }
.forge .industries li { border-color: rgba(255,255,255,.12); background: linear-gradient(var(--oxblood-2), var(--oxblood-2)) padding-box; color: var(--text-on-dark-2); }
.forge .industries li:hover { background: linear-gradient(var(--oxblood-2), var(--oxblood-2)) padding-box, var(--chrome-bevel) border-box; color: var(--cream); }
.industries-wrap .africa-wrap { z-index: -1; right: -4%; top: 40%; width: min(60vh, 520px); transform: translateY(-50%); }

.panel { --bevel-angle: 210deg; position: relative; overflow: hidden; padding: 2.25rem; border-radius: var(--r-xl); border: 1px solid transparent; background: var(--grad-oxblood) padding-box, var(--chrome-bevel) border-box; color: var(--text-on-dark); box-shadow: var(--shadow-2), 0 0 60px -20px rgba(212,33,43,.45); }
.panel::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 42px), repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 42px); -webkit-mask-image: linear-gradient(to top, #000, transparent 90%); mask-image: linear-gradient(to top, #000, transparent 90%); pointer-events: none; }
.panel > * { position: relative; }
.panel h3, .panel h2 { font-size: var(--fs-h3); font-weight: 800; margin: .8rem 0 1rem; }
.panel p { color: var(--text-on-dark-2); margin-bottom: 1.4rem; }
.panel .btn { margin-top: .2rem; }
.silk .panel { --fg: var(--text-on-dark); --fg-2: var(--text-on-dark-2); --fg-3: var(--text-on-dark-3); }

.quote { position: relative; margin: 0; padding: .35rem 0 .35rem 1.4rem; border-left: 4px solid var(--scarlet); border-image: var(--grad-molten) 1; font: 600 clamp(1.2rem, 1rem + .9vw, 1.7rem)/1.3 var(--font-display); letter-spacing: -.01em; max-width: 24ch; text-wrap: balance; }
.quote p { margin: 0; }
.quote cite, .quote footer { display: block; margin-top: .6rem; font: 600 .82rem/1.4 var(--font-body); letter-spacing: .04em; color: var(--fg-2, var(--text-on-dark-2)); font-style: normal; }
.quote .chrome { font-weight: 800; }
.quote-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2.5rem; }

/* ==========================================================================
   Generic service-page components: ring-grid and tile-list
   ========================================================================== */
.ring-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.ring-card { --bevel-angle: 210deg; position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem 1.4rem; border-radius: var(--r-lg); border: 1px solid transparent; background: linear-gradient(var(--oxblood-2), var(--oxblood-2)) padding-box, var(--chrome-bevel) border-box; box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.08); color: var(--fg, var(--text-on-dark)); text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s, --bevel-angle 1s var(--ease); }
.ring-card:hover { --bevel-angle: 570deg; transform: translateY(-4px); box-shadow: var(--shadow-2), 0 0 40px -16px rgba(242,154,60,.55); }
.ring-card h3, .ring-card h4 { font-size: 1.05rem; line-height: 1.25; }
.ring-card p { font-size: .92rem; line-height: 1.55; color: var(--fg-2, var(--text-on-dark-2)); }
.ring-card__num { font: 800 1.6rem/1 var(--font-display); letter-spacing: -.02em; margin-bottom: .2rem; }
.silk .ring-card { background: linear-gradient(#fff, #fff) padding-box, var(--chrome-bevel-soft) border-box; box-shadow: var(--shadow-light); }
.silk .ring-card:hover { box-shadow: 0 1px 0 #fff inset, 0 24px 44px -22px rgba(212,33,43,.35); }

.tile-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem .9rem; }
.tile-list > li { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border-radius: var(--r-md); border: 1px solid transparent; background: linear-gradient(var(--oxblood-2), var(--oxblood-2)) padding-box, var(--chrome-bevel) border-box; font: 600 .95rem/1.4 var(--font-body); color: var(--fg, var(--text-on-dark)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.tile-list > li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px 1px rgba(242,154,60,.55); }
.silk .tile-list > li { background: linear-gradient(#fff, #fff) padding-box, var(--chrome-bevel-soft) border-box; box-shadow: var(--shadow-light); }

/* ==========================================================================
   CTA plate (4.9)
   ========================================================================== */
.cta { background: var(--grad-cta-ground); }
.cta::before, .cta::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--chrome-line); opacity: .7; z-index: 2; }
.cta::before { top: 0; } .cta::after { bottom: 0; }
.cta .forge__grid { opacity: .7; }
.plate { position: relative; display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; padding: 56px 60px 56px 64px; border-radius: var(--r-md); background: var(--chrome-face); box-shadow: var(--shadow-plate); color: var(--ink); overflow: hidden; }
.plate::before { content: ""; position: absolute; inset: 0; background: var(--brushed); opacity: .8; pointer-events: none; }
.plate::after  { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: linear-gradient(180deg, var(--scarlet), var(--maroon)); }
.plate > * { position: relative; z-index: 1; }
.plate .eyebrow span { background: none; color: var(--chrome-700); -webkit-text-fill-color: currentColor; }
.plate .eyebrow::before { background: linear-gradient(90deg, transparent, var(--chrome-700), var(--chrome-600)); }
.plate h2 { font: 800 var(--fs-h2)/1.04 var(--font-display); letter-spacing: var(--ls-display); color: var(--ink); max-width: 15ch; margin: .6rem 0 1rem; }
.plate h2 em { font-style: normal; background: var(--grad-crimson-maroon); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.plate p { color: var(--ink-2); max-width: 56ch; }
.plate__actions { display: flex; flex-direction: column; gap: 12px; }
.plate__actions .btn { width: 100%; border-radius: var(--r-sm); }
.plate .btn--ghost { color: var(--ink); }
.plate .btn--ghost::after { background: linear-gradient(90deg, transparent, var(--chrome-700) 30%, var(--ink) 50%, var(--chrome-700) 70%, transparent); }
.plate .reg { position: absolute; width: 14px; height: 14px; background: linear-gradient(var(--crimson), var(--crimson)) center / 1px 100% no-repeat, linear-gradient(var(--crimson), var(--crimson)) center / 100% 1px no-repeat; opacity: .9; }
.plate .reg--tr { right: 18px; top: 16px; } .plate .reg--bl { left: 24px; bottom: 16px; }
.cta__line { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 1.5rem; text-align: center; color: var(--text-on-dark-2); font-size: .95rem; }
/* Each part is a nowrap span (a flex item, so source whitespace between the spans does not count) and the separator belongs to the
   following part with an even .55em on both sides; a line can never end on a dangling dot. */
.cta__line span { white-space: nowrap; }
.cta__line span + span::before { content: "\00B7"; margin: 0 .55em; }
.cta__line a { color: var(--text-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .85rem; }

/* ==========================================================================
   Footer (4.10)
   ========================================================================== */
.footer { position: relative; isolation: isolate; background: var(--forge-black); color: var(--text-on-dark-2); padding: 4.5rem 0 2rem; overflow: hidden; }
.footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 42px), repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 42px); -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent); pointer-events: none; }
.footer .container { position: relative; z-index: 1; }
.footer__grid { display: grid; grid-template-columns: 1.4fr .9fr .9fr 1.5fr; gap: 2.5rem; margin-bottom: 3rem; }
.footer h3 { font: 700 .8rem/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--cream); margin-bottom: 1.1rem; }
.footer__brand p { font-size: .9rem; max-width: 40ch; margin: 1.1rem 0 1.2rem; }
.footer li { margin-bottom: .45rem; font-size: .92rem; }
.footer a { text-decoration: none; transition: color .2s; }
.footer a:not(.btn):hover { color: var(--cream); }
.footer__contact li { display: flex; gap: .6rem; align-items: flex-start; }
.footer__contact svg { width: 16px; height: 16px; flex: none; margin-top: .3rem; fill: none; stroke: var(--amber); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 1rem; }
/* Contact column (about 350px at 1440): the two pills share one row. */
.footer__contact-col .footer__links { gap: .5rem; }
.footer__contact-col .btn--sm { padding: .55rem 1rem; }
.footer__bottom { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem 3rem; align-items: end; padding-top: 1.75rem; font-size: .8rem; color: var(--text-on-dark-3); }
.footer__bottom .tagline { font: 800 1.1rem/1 var(--font-display); text-align: right; white-space: nowrap; }
.footer__bottom p { max-width: 90ch; }

/* ==========================================================================
   Reveal (4.16)
   ========================================================================== */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }
.svc-grid > [data-reveal]:nth-child(2), .work-grid > [data-reveal]:nth-child(2), .why-grid > [data-reveal]:nth-child(2), .steps > [data-reveal]:nth-child(2), .ring-grid > [data-reveal]:nth-child(2) { transition-delay: .08s; }
.svc-grid > [data-reveal]:nth-child(3), .work-grid > [data-reveal]:nth-child(3), .why-grid > [data-reveal]:nth-child(3), .steps > [data-reveal]:nth-child(3), .ring-grid > [data-reveal]:nth-child(3) { transition-delay: .16s; }
.svc-grid > [data-reveal]:nth-child(4), .work-grid > [data-reveal]:nth-child(4), .why-grid > [data-reveal]:nth-child(4), .steps > [data-reveal]:nth-child(4), .ring-grid > [data-reveal]:nth-child(4) { transition-delay: .24s; }
.svc-grid > [data-reveal]:nth-child(5), .work-grid > [data-reveal]:nth-child(5), .why-grid > [data-reveal]:nth-child(5), .steps > [data-reveal]:nth-child(5), .ring-grid > [data-reveal]:nth-child(5) { transition-delay: .32s; }
.svc-grid > [data-reveal]:nth-child(6), .work-grid > [data-reveal]:nth-child(6), .why-grid > [data-reveal]:nth-child(6), .ring-grid > [data-reveal]:nth-child(6) { transition-delay: .4s; }
.svc-grid > [data-reveal]:nth-child(7), .ring-grid > [data-reveal]:nth-child(7) { transition-delay: .48s; }
.svc-grid > [data-reveal]:nth-child(8), .ring-grid > [data-reveal]:nth-child(8) { transition-delay: .56s; }

/* ==========================================================================
   Reduced motion (7.1)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .cursor-glow, .cursor-warm, .beam, .beam__tip, .fx-trail { display: none !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .thread__line { stroke-dashoffset: 0 !important; }
  .forge__node { opacity: .7 !important; transform: none !important; }
  .africa-glow { opacity: .36; }
  .js .sec-head h2::after { transform: scaleX(1); }
  .chrome.in, .in .chrome { animation: none; }
  .float .hero__main { animation: none; transform: rotate(-1.5deg); }
  .float .hero__sub { animation: none; transform: rotate(2.5deg); }
  /* main.js attaches no scroll listener under reduced motion (spec 7.1), so .nav--compact never toggles: this near-opaque ground keeps the bar legible over light sections. */
  .nav { background: rgba(18,5,8,.96); }
}

/* ==========================================================================
   Responsive (7.2)
   ========================================================================== */
/* Desktop hero (1440 up): the thread box starts at 60 percent so the upper path's 7px glow band stays at least 16px below the capability chips at 1440x900.
   Between 1280 and 1439 the copy column is the same 720px but the viewport is shorter (1280x800, 1366x768), so the chips sit lower in the hero and the
   box drops to 70 percent, as it does from 1024 to 1279. */
@media (min-width: 1440px) {
  .hero__inner .thread { top: 60%; height: 40%; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .hero__inner .thread { top: 70%; height: 30%; }
}
/* Short desktop viewports (1366x768, 1440x800): the copy fills the hero and the chips sit at about 90 percent, so the box drops to the last 22 percent. */
@media (min-width: 1280px) and (max-height: 820px) {
  .hero__inner .thread { top: 78%; height: 22%; }
}
/* Between 1024 and 1199 the copy column is 540 to 645px wide: cap the hero h1 so "Impossible to Miss" stays on one line. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .hero h1 { font-size: calc(6vw - .5rem); }
}
/* 1024 to 1279: the hero copy column is 538 to 645px wide. The four chips fit on one line (no scrolling, nothing clipped) once the
   "Featured" label is visually hidden (the nav keeps aria-label="Featured capabilities") and the chips tighten; the hero thread
   moves below the strip so neither path crosses the chip row. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .caps { gap: .4rem; }
  .caps__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
  .caps a { font-size: .72rem; padding: .4rem .65rem; }
  .hero__inner .thread { top: 70%; height: 30%; }
  /* Mega panel with the feature cell (spec 4.1 below 1280): tighter rows so nav (78px) plus panel stays inside a 1024x768 viewport (about 731px). */
  .mega__grid { padding: 1.25rem 0 .75rem; gap: .75rem 1.5rem; }
  .mega__col a { padding: .2rem 0; }
  .mega__foot { padding: .75rem 0 1rem; }
  /* The two span-3 service cards are 1.5 tracks wider than the rest: a 21:9 thumb keeps all eight thumbnails within 20 percent of one height. */
  .svc:nth-last-child(-n+2) .svc__thumb .glow-frame__media { aspect-ratio: 21 / 9; }
  /* Split panels and the reasons column are 190 to 250px per track here: equal halves for the vehicle pair (category label dropped, the chip
     already names it), a single reasons column beside a narrower panel, and a tighter panel eyebrow so nothing wraps. */
  .feature--reverse { grid-template-columns: 1fr 1fr; }
  .proj-pair .proj__cat { display: none; }
  .why-layout { grid-template-columns: 1.15fr .85fr; gap: 2rem; }
  .why-grid { grid-template-columns: 1fr; gap: .25rem; }
  .panel { padding: 1.75rem; }
  .panel .eyebrow { letter-spacing: .16em; }
}
@media (max-width: 1279px) {
  /* 8 service cards on a 6-track grid: three per row (span 2), the last two span 3 so no cell is left empty. */
  .svc-grid { grid-template-columns: repeat(6, 1fr); }
  .svc { grid-column: span 2; }
  .svc:nth-last-child(-n+2) { grid-column: span 3; }
  .ring-grid { grid-template-columns: repeat(3, 1fr); }
  /* Mega panel (spec 4.1 below 1280): six link columns in two rows of three plus the feature cell spanning both rows. */
  .mega__grid { grid-template-columns: repeat(3, 1fr) 1.2fr; gap: 1rem 1.5rem; padding: 1.5rem 0 1rem; }
  .mega__feature { grid-row: 1 / 3; }
  .hero .eyebrow { letter-spacing: .16em; font-size: .7rem; }
  /* Secondary hero card is 190 to 290px wide here: let its caption scrim use most of the card. */
  .hero__sub .proj__cap { max-width: 80%; padding: 1.6rem .8rem .7rem .8rem; }
  .hero__sub .proj__cap strong { font-size: .85rem; }
  /* Capability strip: one line. From 1024 up the four chips fit the column; below 1024 the strip is full width and scrolls only on phones (fade affordance in the 672px rule). */
  .caps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: .25rem; }
  .caps::-webkit-scrollbar { display: none; }
  .caps__label { flex: none; }
}
@media (max-width: 1100px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1023px) {
  .nav__bar { height: var(--nav-h-mobile); }
  .nav--compact .nav__bar { height: var(--nav-h-mobile); }
  .nav__primary { display: none; }
  .nav__toggle { display: flex; }
  .nav__actions { margin-left: auto; }
  .hero__inner { min-height: 0; }
  .hero__grid, .hero--inner .hero__grid { grid-template-columns: 1fr; gap: 3rem; }
  .hero__visual { max-width: 560px; }
  .caps { margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
  .piece--backlit { max-width: 560px; }
  .africa-wrap, .hero--inner .africa-wrap { right: -18%; top: 0; width: min(110vw, 760px); }
  .trust__grid { grid-template-columns: repeat(2, 1fr); }
  .trust__item:nth-child(3)::before { display: none; }
  .trust__item:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.08); }
  .trust__item:nth-child(3) { padding-left: 0; }
  .why-layout { grid-template-columns: 1fr; }
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .svc, .svc:nth-last-child(-n+2) { grid-column: auto; }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .thread--grid { height: 12%; }   /* two-column grid: the large card is full width on top, so the band is shallower */
  .proj--lg, .work-grid > .proj:last-child:nth-child(even) { grid-column: 1 / -1; grid-row: auto; }
  .proj--lg .glow-frame__media, .work-grid > .proj:last-child:nth-child(even) .glow-frame__media { aspect-ratio: 16 / 9; min-height: 0; }
  .feature, .feature--reverse { grid-template-columns: 1fr; }
  .feature--reverse .feature__copy { order: 0; }
  .feature__media { max-width: 640px; }
  .ring-grid { grid-template-columns: repeat(3, 1fr); }
  .plate { grid-template-columns: 1fr; padding: 44px 36px 44px 40px; }
}
/* Below 673px the strip (column width plus the right gutter) is narrower than the four chips, so it scrolls: fade the right edge as the affordance. */
@media (max-width: 672px) {
  .caps { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
}
@media (max-width: 767px) {
  /* ---- mobile raster block (3.10): fewer and smaller composited layers ---- */
  .forge__floor { display: none; }
  .forge__node:nth-child(n+7) { display: none; }
  .forge__grid, .africa-wrap { will-change: auto; }
  .forge__grid { top: -84px; height: calc(100% + 84px); transform: translate3d(0, calc(var(--p, 0) * -84px), 0);
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.065) 0 1px, transparent 1px 42px), repeating-linear-gradient(0deg, rgba(255,255,255,.065) 0 1px, transparent 1px 42px); }
  .silk__b, .africa-glow, .thread__glow, .fx-trail, .cursor-glow, .cursor-warm, .divider--chrome::after { display: none; }
  .thread { display: none; } .hero .thread { display: block; top: 70%; height: 30%; }
  .africa { opacity: .27; }
  .nav { background: rgba(18,5,8,.93); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .trust { background: rgba(10,4,6,.72); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hero h1 { filter: none; }
  .glow-frame { box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 0 22px -6px rgba(212,33,43,.65); }
  .glow-frame::before, .glow-frame--ambient::before { display: block; filter: none; background: var(--halo-radial); inset: -4%; opacity: .55; }
  .glow-frame__halo { display: none; }
  .btn--primary, .btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 8px rgba(74,10,18,.55), 0 0 18px -6px rgba(232,99,43,.7); }
  .panel { box-shadow: 0 16px 30px -20px rgba(10,4,6,.7); }
  .svc { box-shadow: 0 6px 16px -12px rgba(74,10,18,.3); }
  .brand__mark { box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
  .piece--backlit::before { filter: none; background: var(--halo-radial); border-radius: var(--r-xl); }
  .piece--backlit .glow-frame, .piece--backlit:hover .glow-frame { transform: none; }
  .piece__reflect { display: none; }
  .mega { -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* ---- layout ---- */
  :root { --section-y: clamp(3.5rem, 3rem + 4vw, 5rem); }
  .svc-grid { grid-template-columns: 1fr; gap: .75rem; }
  .svc { display: grid; grid-template-columns: 64px 1fr 24px; gap: 0 .85rem; padding: .7rem .9rem .7rem .7rem; align-items: center; border-radius: var(--r-md); }
  .svc::before, .svc__icon, .svc p, .svc__more span { display: none; }
  .svc__thumb { width: 64px; height: 64px; margin: 0; border-radius: 10px; }
  .svc__thumb .glow-frame__media { aspect-ratio: 1; }
  .svc__thumb::before { display: none; }
  .svc h3 { font-size: 1rem; }
  .svc__more { margin: 0; padding: 0; border: 0; justify-content: flex-end; }
  .svc:hover { transform: none; }
  .why-grid { grid-template-columns: 1fr; gap: 0; }
  .reason { padding: .65rem 0 .65rem 3rem; }
  .reason b { font-size: 1.35rem; top: .6rem; }
  .footer__bottom { grid-template-columns: 1fr; }
  .footer__bottom .tagline { text-align: left; }
  .sec-head--split { flex-direction: column; align-items: flex-start; }
  .ring-grid { grid-template-columns: repeat(2, 1fr); gap: .9rem; }
  .quote-grid { grid-template-columns: 1fr; }
  .work-foot { margin-top: 1.75rem; }
  .hero__grid { gap: 2rem; padding-top: 1.5rem; }
  .trust__intro { padding-top: 1.1rem; font-size: .9rem; }
}
@media (max-width: 639px) {
  :root { --section-y: 2rem; }
  .sec-head { margin-bottom: 1rem; }
  .sec-head h2, .plate h2 { font-size: 1.75rem; }
  .sec-head h2 { margin: .6rem 0 .8rem; }
  .sec-head h2::after { margin-top: .7rem; }
  .lead, .hero__lead, .sec-head .lead { font-size: 1rem; line-height: 1.5; }
  body { line-height: 1.55; }
  .feature__copy .actions { margin-top: 1.25rem; }
  .feature__media .proj__caption { display: none; }
  .work-foot p { display: none; }
  .btn { min-height: 48px; }
  /* Phone override of --fs-hero (design ruling, round 3: three lines win). Sora 800 at 9.3vw = 33.5px (360), 36.3px (390), 38.3px (412), 46px cap.
     "Impossible to Miss" measures 341px at 36px against a 320px column at 360, so 36px there would break the hot phrase and make four lines;
     9.3vw is the largest size that keeps "Signage That / Makes Your Brand / Impossible to Miss" on three lines from 360 up. */
  .hero h1 { font-size: clamp(2rem, 9.3vw, 2.9rem); margin: .7rem 0 .9rem; }
  /* The hot phrase is inline here so text-wrap: balance can rebalance the whole heading. */
  .hero h1 .chrome--hot { display: inline; }
  .hero__grid { gap: 1rem; padding: .25rem 0 .75rem; }
  .hero__lead { margin-bottom: 1.2rem; }
  .hero__actions { gap: .6rem; margin-bottom: 1.2rem; }
  .hero__actions .btn, .cta__actions .btn, .mmenu__actions .btn, .actions .btn { width: 100%; }
  /* Hero paragraph 2 stays on phones (content.md has two hero paragraphs); the height it adds is recovered below (sec-head, work-grid, industries, footer). */
  .trust__intro { padding: .7rem 0 0; font-size: .86rem; line-height: 1.45; }
  .trust__grid { grid-template-columns: 1fr 1fr; }
  .trust__item { padding: .35rem .75rem .35rem 0; gap: .6rem; }
  .trust__item + .trust__item::before { top: 24%; bottom: 24%; }
  .trust__item:nth-child(even) { padding-left: 1rem; }
  .trust__item span { font-size: .82rem; }
  .trust__tile { width: 34px; height: 34px; }
  .trust__num { font-size: 1.7rem; }
  .svc-grid { gap: .3rem; }
  .svc { grid-template-columns: 48px 1fr 20px; padding: .3rem .6rem .3rem .3rem; }
  .svc__thumb { width: 48px; height: 48px; }
  .svc h3 { font-size: .95rem; }
  .feature__media .glow-frame__media { aspect-ratio: 16 / 9; }
  .sec-head--split { gap: 1.25rem; }
  .proj-pair { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .proj-pair .proj:nth-child(2) { margin-top: 0; }
  /* Featured grid on phones (9.3-F as built): the large card keeps its full width and caption, the other five run two-up;
     the last odd card also spans the row (1023 rule) so no cell is empty. */
  .work-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .work-grid .glow-frame__media { aspect-ratio: 16 / 10; min-height: 0; }
  .proj--lg .glow-frame__media, .work-grid > .proj:last-child:nth-child(even) .glow-frame__media { aspect-ratio: 16 / 9; }
  .work-grid .proj__caption, .proj-pair .proj__caption { display: none; }
  .work-grid .proj--lg .proj__caption { display: block; }
  /* On phones the chip inside the frame already names the category; the label under the frame would repeat it over two or three lines. */
  .work-grid .proj__cat, .proj-pair .proj__cat { display: none; }
  .work-grid .proj__meta, .proj-pair .proj__meta { padding-top: .3rem; }
  .proj__title { font-size: .92rem; }
  /* Two-up titles in 170px columns: balance the two lines instead of leaving one word on the second. */
  .work-grid .proj__title, .proj-pair .proj__title { font-size: .88rem; line-height: 1.25; text-wrap: balance; }
  .work-grid .proj--lg .proj__title { font-size: 1.05rem; }
  .proj__cat { font-size: .68rem; margin-bottom: .25rem; }
  .proj__chip { top: 8px; left: 8px; padding: .35rem .55rem; font-size: .68rem; }
  .work-foot { margin-top: .5rem; gap: .6rem; }
  .work-foot p { font-size: .8rem; }
  .why-layout { gap: 1.25rem; }
  .reason { padding: .45rem 0 .45rem 3rem; }
  .reason b { top: .4rem; }
  .reason h3 { font-size: 1rem; }
  .reason p { font-size: .88rem; line-height: 1.45; }
  .industries-wrap { margin-top: 1rem; padding-top: 1rem; }
  .industries-wrap h3 { font-size: 1.2rem; }
  .industries { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; margin-top: 1.1rem; }
  .industries li { font-size: .74rem; padding: .3rem .5rem; text-align: center; line-height: 1.3; }
  .panel { padding: 1rem .9rem; }
  .panel p { margin-bottom: .7rem; }
  .panel p:not(.eyebrow) { font-size: .92rem; line-height: 1.55; }
  .panel h3, .panel h2 { margin: .6rem 0 .8rem; }
  .plate { padding: 18px 14px 18px 20px; gap: 14px; }
  .plate__actions { gap: 8px; }
  .plate p:not(.eyebrow) { font-size: .95rem; }
  .cta__line { flex-direction: column; align-items: center; margin-top: .5rem; font-size: .85rem; }
  .cta__line span { display: block; }
  .cta__line span + span::before { content: none; }
  .footer { padding: 1.75rem 0 1rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
  .footer__bottom { padding-top: 1.25rem; gap: 1rem; }
  .footer__brand p { font-size: .8rem; line-height: 1.45; max-width: none; }
  .footer h3 { margin-bottom: .7rem; }
  .footer__brand, .footer__contact-col { grid-column: 1 / -1; }
  .footer__brand p { margin: .8rem 0 .9rem; }
  .footer li { margin-bottom: .2rem; font-size: .88rem; }
  .brand__word b { font-size: 15px; }
  .tile-list, .ring-grid { grid-template-columns: 1fr; }
}
@media (max-width: 479px) {
  /* Trust strip: single column (4.4), one hairline between rows, no vertical rules. */
  .trust__grid { grid-template-columns: 1fr; }
  .trust__item, .trust__item:nth-child(even), .trust__item:nth-child(3) { padding: .35rem 0; }
  .trust__item + .trust__item { border-top: 1px solid rgba(255,255,255,.08); }
  .trust__item + .trust__item::before { display: none; }
  /* One line at 360 to 479. Measured: the 52-character eyebrow is 343px at .6rem/.1em, so it cannot share a 320px column with the 28px rule;
     the rule is dropped here and the size tracks the viewport (9.3px at 360, 10.1px at 390, capped at .68rem), which leaves about 8px spare at 360. */
  .hero .eyebrow { font-size: clamp(.56rem, 2.58vw, .68rem); letter-spacing: .06em; }
  .hero .eyebrow::before { display: none; }
  .hero__sub { display: none; }
  .hero__visual { aspect-ratio: auto; max-width: 480px; }
  .hero__main { position: relative; width: 100%; transform: none; }
  .hero__main .glow-frame__media { aspect-ratio: 16 / 9; }
  .float .hero__main { animation: none; }
  .nav__actions { gap: .5rem; }
  .nav__actions .btn--sm { padding: .5rem .8rem; min-height: 40px; }
  .nav__actions .btn--sm .btn__long { display: none; }
  .brand__mark { width: 40px; height: 42px; }
}
@media (max-width: 399px) {
  .nav .brand__word { display: none; }
  .nav__bar { gap: .75rem; }
}

/* Review fix: on wide screens of medium height (1440x900, 1536x864) lower the hero threads so their glow clears the featured chips */
@media (min-width: 1440px) and (min-height: 821px) and (max-height: 940px) { .hero__inner .thread { top: 74%; height: 26%; } }
/* Review fix: on laptop and tablet-landscape screens of short height (1024x768, 1280x800, 1366x768, 1440x800) the featured chips
   sit inside the thread band, so the hero threads fade in to the right of the chips (the chip row ends at about 57 percent of the width) */
@media (min-width: 1024px) and (max-width: 1439px) and (max-height: 880px), (min-width: 1440px) and (max-height: 820px) {
  .hero__inner .thread { -webkit-mask-image: linear-gradient(90deg, transparent 0 60%, #000 76%); mask-image: linear-gradient(90deg, transparent 0 60%, #000 76%); }
}