/* GENERATED from _src/css/style.css by _src/build.py. Do not edit directly. */
@font-face { font-family: "Instrument Sans"; src: url(../fonts/instrument-sans.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(../fonts/instrument-sans-italic.woff2) format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(../fonts/plex-mono.woff2) format("woff2"); font-weight: 400; font-display: swap; }
/* =====================================================================
   UVONGO PROJECTS — site styles
   Brand: Uvongo Yellow #F8D927 · Ink #0C0C0D · White
   ===================================================================== */

:root {
  /* brand */
  --y: #F8D927;
  --y-600: #E9C300;
  --y-700: #C9A400;
  --y-100: #FDF3B8;
  --y-50: #FFFBE6;
  --amber: #F5A524;
  --ink: #0C0C0D;
  --ink-900: #111113;
  --ink-800: #18181B;
  --ink-700: #222226;
  --ink-600: #2E2F34;
  --olive: #2B2A12;
  --paper: #F4F1E8;
  --mist: #F5F5F2;
  --line: #E6E4DC;
  --line-2: #D9D6CB;
  --muted: #64646B;
  --muted-2: #8B8B92;
  --white: #fff;

  /* type */
  --f-display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Plex Mono", ui-monospace, Menlo, monospace;
  --f-hand: "Caveat", "Segoe Print", cursive;

  /* shape + motion */
  --r-sm: 12px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --ease: cubic-bezier(.22, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --shadow-1: 0 1px 2px rgba(12, 12, 13, .05), 0 8px 24px -12px rgba(12, 12, 13, .14);
  --shadow-2: 0 30px 60px -30px rgba(12, 12, 13, .35), 0 10px 20px -12px rgba(12, 12, 13, .12);
  --gutter: clamp(16px, 3vw, 28px);
  --header-h: 76px;
}

/* ------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font: 400 16px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-loading { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--y); color: var(--ink); }
:focus-visible { outline: 2px solid var(--y-600); outline-offset: 3px; border-radius: 12px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: var(--y); padding: 10px 16px; border-radius: 10px; }
.skip:focus { top: 12px; }
svg use { pointer-events: none; }

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

/* ------------------------------------------------------------- type */
.h1, .h2, .h3, .hero__title, .bcard h3 {
  font-family: var(--f-display); font-weight: 700; letter-spacing: -.025em; line-height: 1.04;
}
.h1 { font-size: clamp(2.2rem, 4.6vw, 4rem); }
.h2 { font-size: clamp(1.9rem, 3.5vw, 3.05rem); }
.h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); letter-spacing: -.02em; }
.tone { color: var(--muted-2); }
.tone-y { color: var(--y); }
.hl { position: relative; white-space: nowrap; z-index: 0; }
.hl::after {
  content: ""; position: absolute; left: -.08em; right: -.08em; bottom: .06em; height: .36em; z-index: -1;
  background: var(--y); border-radius: 4px; transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--ease-out) .5s;
}
.is-in .hl::after, .hl.is-in::after { transform: scaleX(1); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 .72rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 16px;
}
.eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--y); border-radius: 2px; box-shadow: 0 0 0 3px var(--y-100); }
.eyebrow--center { justify-content: center; }
.eyebrow--dark { color: rgba(255, 255, 255, .6); }
.eyebrow--dark::before { box-shadow: 0 0 0 3px rgba(248, 217, 39, .18); }

/* split line reveal */
[data-split] .ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
[data-split] .ln > span { display: block; transform: translateY(108%); transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * .09s + var(--d, 0s)); }
[data-split].is-in .ln > span { transform: none; }

/* ------------------------------------------------------------- buttons */
.btn {
  --bg: var(--ink); --fg: #fff;
  position: relative; display: inline-flex; align-items: center; gap: 12px; isolation: isolate;
  height: 50px; padding: 0 8px 0 24px; border-radius: 999px; overflow: hidden;
  background: var(--bg); color: var(--fg); font-weight: 600; font-size: .93rem; letter-spacing: -.005em;
  transition: color .45s var(--ease), background .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
  white-space: nowrap;
}
.btn:not(:has(.btn__ico)) { padding: 0 24px; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--y); transform: translateY(101%); transition: transform .55s var(--ease-out);
}
.btn:hover::before, .btn.is-hover::before { transform: none; }
.btn:hover, .btn.is-hover { color: var(--ink); }
.btn__ico {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--y); color: var(--ink); transition: transform .5s var(--ease), background .4s;
}
.btn__ico svg { width: 16px; height: 16px; }
.btn:hover .btn__ico, .btn.is-hover .btn__ico { background: var(--ink); color: var(--y); transform: rotate(-45deg); }
.btn--sm { height: 42px; padding: 0 24px; font-size: .86rem; }
.btn--dark { --bg: var(--ink); --fg: #fff; }
.btn--light { --bg: #fff; --fg: var(--ink); }
.btn--light .btn__ico { background: var(--ink); color: var(--y); }
.btn--light:hover .btn__ico, .btn--light.is-hover .btn__ico { background: var(--ink); }
.btn--yellow { --bg: var(--y); --fg: var(--ink); }
.btn--yellow::before { background: #fff; }
.btn--ghost { --bg: transparent; --fg: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn--glass {
  --bg: rgba(255, 255, 255, .12); --fg: #fff;
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; }
.link-arrow svg { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.link-arrow:hover svg, .link-arrow.is-hover svg { transform: translateX(4px); }

.glass {
  background: linear-gradient(135deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .08));
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .45);
  color: #fff;
}
.glass-light {
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: var(--shadow-1), 0 30px 60px -40px rgba(12, 12, 13, .3);
}

/* ------------------------------------------------------------- loader */
.loader {
  position: fixed; inset: 0; z-index: 300; background: var(--ink); color: #fff;
  display: grid; place-items: center;
  transition: transform 1s var(--ease-io) .1s, visibility 0s 1.2s;
}
.loader.is-done { transform: translateY(-100%); visibility: hidden; }
.loader__inner { display: grid; justify-items: center; gap: 18px; width: min(320px, 80vw); }
.loader__mark { width: 84px; height: 84px; overflow: visible; }
.loader__mark .lm-up { fill: none; stroke: var(--y); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 260; stroke-dashoffset: 260; animation: draw 1.1s var(--ease-out) .1s forwards; }
.loader__mark .lm-bolt { fill: #fff; stroke: var(--ink); stroke-width: 3; transform-origin: 50% 50%; opacity: 0; transform: translate(-14px, -22px) scale(.9); animation: strike .55s var(--ease-out) .8s forwards; }
.loader__word { font: 800 1.05rem/1 var(--f-display); font-stretch: 112%; letter-spacing: .08em; opacity: 0; animation: fadeUp .7s var(--ease-out) 1s forwards; }
.loader__word span { color: var(--y); }
.loader__bar { width: 100%; height: 2px; background: rgba(255, 255, 255, .12); border-radius: 2px; overflow: hidden; }
.loader__bar i { display: block; height: 100%; width: 100%; background: var(--y); transform-origin: left; transform: scaleX(0); }
.loader__meta { width: 100%; display: flex; justify-content: space-between; font: 500 .7rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.loader__meta b { color: var(--y); font-weight: 500; }
.loader__meta b::after { content: "%"; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes strike { 60% { opacity: 1; transform: translate(2px, 3px) scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------- header */
.logo-mark { width: 42px; height: 42px; flex: none; overflow: visible; }
/* plain background: on light the colour roles invert (ink U+P, yellow bolt) so the mark never washes out;
   on dark (.brand--light, open menu, loader) it keeps the original yellow U+P and white bolt */
.logo-mark .lm-up { fill: none; stroke: var(--ink); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.logo-mark .lm-bolt { fill: var(--y); stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; transition: transform .6s var(--ease); transform-origin: 50% 50%; }
.brand:hover .lm-bolt, .brand.is-hover .lm-bolt { transform: translate(1.5px, 2px) rotate(-3deg); }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__word { display: grid; line-height: 1; }
.brand__word b { font: 800 1.02rem/1 var(--f-display); font-stretch: 108%; letter-spacing: .02em; }
.brand__word b i { font-style: normal; color: var(--y-700); }
.brand__word small { font: 500 .58rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); margin-top: 4px; }
.brand--light .lm-up { stroke: var(--y); }
.brand--light .lm-bolt { fill: #fff; stroke: var(--ink); }
.brand--light .brand__word b { color: #fff; }
.brand--light .brand__word b i { color: var(--y); }

.site-header {
  position: sticky; top: 0; z-index: 100; height: var(--header-h);
  background: rgba(255, 255, 255, .0);
  transition: background .4s, box-shadow .4s, transform .5s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: 0 1px 0 rgba(12, 12, 13, .06), 0 10px 30px -20px rgba(12, 12, 13, .25);
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header__row { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.nav { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: var(--mist); border: 1px solid var(--line); }
.nav__link { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 16px; border-radius: 999px; font-size: .88rem; font-weight: 500; color: #3a3a40; transition: background .3s, color .3s; }
.nav__link svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .3s; }
.nav__link:hover { color: var(--ink); background: #fff; }
.nav__link.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 10px -6px rgba(0, 0, 0, .2); }
.nav__link.is-active::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--y-600); }
.nav__item { position: relative; }
.has-mega:hover .nav__link svg, .has-mega:focus-within .nav__link svg { transform: rotate(180deg); }

.mega {
  position: absolute; top: calc(100% + 14px); left: 50%; width: 620px; padding: 12px;
  transform: translate(-50%, 10px); opacity: 0; visibility: hidden;
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid #fff; border-radius: 24px; box-shadow: var(--shadow-2);
  transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s .45s;
}
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.has-mega:hover .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mega__item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; transition: background .3s; }
.mega__item img { width: 46px; height: 46px; object-fit: contain; transition: transform .6s var(--ease); filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .15)); }
.mega__item:hover { background: var(--mist); }
.mega__item:hover img { transform: rotate(-10deg) scale(1.1); }
.mega__item b { display: block; font-size: .9rem; font-weight: 600; }
.mega__item small { color: var(--muted); font-size: .78rem; }
.mega__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding: 16px 16px; border-radius: 16px; background: var(--ink); color: rgba(255, 255, 255, .7); font-size: .82rem; }
.mega__foot b { display: inline-flex; gap: 8px; align-items: center; color: var(--y); font-weight: 600; }
.mega__foot svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.site-header__cta { display: flex; align-items: center; gap: 16px; }
.hdr-phone { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 500; }
.hdr-phone svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; padding: 0; }
.burger { display: none; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); position: relative; }
.burger span { position: absolute; left: 14px; right: 14px; height: 1.6px; background: #fff; transition: transform .4s var(--ease), top .4s var(--ease); }
.burger span:first-child { top: 18px; }
.burger span:last-child { top: 25px; }
.burger[aria-expanded="true"] span:first-child { top: 21.5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 21.5px; transform: rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 90; padding: calc(var(--header-h) + 24px) var(--gutter) 32px;
  background: var(--ink); color: #fff; display: flex; flex-direction: column; gap: 32px;
  clip-path: circle(0 at calc(100% - 40px) 38px); transition: clip-path .8s var(--ease-io); visibility: hidden;
}
.drawer.is-open { clip-path: circle(150% at calc(100% - 40px) 38px); visibility: visible; }
.drawer__nav { display: grid; gap: 4px; }
.drawer__nav a { font: 700 2.1rem/1.15 var(--f-display); letter-spacing: -.02em; }
.drawer__nav a:hover, .drawer__nav a.is-hover { color: var(--y); }
.drawer__divs { display: flex; flex-wrap: wrap; gap: 8px; }
.drawer__divs a { padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); font-size: .85rem; }
.drawer__foot { margin-top: auto; display: grid; gap: 12px; color: rgba(255, 255, 255, .7); }
.drawer__foot .btn { justify-content: center; margin-top: 8px; }
body.menu-open .site-header { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.menu-open .site-header .brand__word b { color: #fff; }
body.menu-open .site-header .lm-bolt { fill: #fff; stroke: var(--ink); }
body.menu-open .site-header .lm-up { stroke: var(--y); }

/* ------------------------------------------------------------- sections */
.section { position: relative; padding: clamp(64px, 8vw, 112px) 0; }
.section--tight { padding: clamp(24px, 4vw, 48px) 0; }
.section--mist { background: var(--mist); }
.section--lines::before {
  /* drafting grid from the pattern family, at the section's top-right corner */
  content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(12, 12, 13, .11);
  -webkit-mask-image: url(../img/patterns/construction.svg), radial-gradient(circle 760px at 100% 0%, #000 0%, rgba(0, 0, 0, .45) 40%, transparent 92%);
  mask-image: url(../img/patterns/construction.svg), radial-gradient(circle 760px at 100% 0%, #000 0%, rgba(0, 0, 0, .45) 40%, transparent 92%);
  -webkit-mask-size: 720px 720px, 100% 100%; mask-size: 720px 720px, 100% 100%;
  -webkit-mask-position: right top, 0 0; mask-position: right top, 0 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.section--lines > .container { position: relative; }
.section--dark { background: var(--ink); color: #fff; overflow: hidden; }

.head-row { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 32px; }
.section-head { display: grid; grid-template-columns: 1fr minmax(0, 440px); gap: 32px 64px; align-items: end; margin-bottom: clamp(40px, 5vw, 56px); }
.section-head > p { color: var(--muted); font-size: .96rem; }
.section-head--dark > p { color: rgba(255, 255, 255, .62); }
.center-head { text-align: center; max-width: 720px; margin: 0 auto clamp(40px, 5vw, 56px); }
.center-head p { color: var(--muted); margin-top: 16px; }

/* reveal */
[data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: var(--d, 0s); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* floating 3D objects */
[data-float] { will-change: transform; }
@keyframes bob { 50% { transform: translateY(-14px) rotate(-3deg); } }

/* ------------------------------------------------------------- hero */
.hero { padding: 8px 0 0; }
.hero__frame {
  position: relative; margin: 0 clamp(8px, 1.4vw, 16px); border-radius: var(--r-xl); overflow: hidden;
  min-height: clamp(560px, 86vh, 820px); color: #fff; isolation: isolate; background: var(--ink);
  display: flex; flex-direction: column; justify-content: center;
}
.hero__slides, .hero__slide { position: absolute; inset: 0; }
.hero__slide { opacity: 0; transition: opacity 1.4s var(--ease); z-index: 0; }
.hero__slide.is-active { opacity: 1; z-index: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 7.5s linear; }
.hero__slide.is-active img { transform: scale(1.0); }
.hero__shade {
  position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(80% 60% at 50% 45%, rgba(12, 12, 13, .25), rgba(12, 12, 13, .7)),
    linear-gradient(180deg, rgba(12, 12, 13, .55) 0%, rgba(12, 12, 13, .2) 35%, rgba(12, 12, 13, .65) 100%);
}
.hero__shade::after { /* warm sunlight tint */
  content: ""; position: absolute; inset: 0; mix-blend-mode: soft-light;
  background: radial-gradient(60% 50% at 85% 10%, rgba(248, 217, 39, .45), transparent 70%);
}
.hero__grain {
  position: absolute; inset: 0; z-index: 3; opacity: .12; pointer-events: none; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__content { position: relative; z-index: 5; text-align: center; padding-top: 40px; padding-bottom: 120px; }
.hero__kicker { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px; border-radius: 999px; font: 500 .72rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; background: rgba(12, 12, 13, .35); border: 1px solid rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero__kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--y); box-shadow: 0 0 0 0 rgba(248, 217, 39, .6); animation: ping 2s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 10px rgba(248, 217, 39, 0); } 100% { box-shadow: 0 0 0 0 rgba(248, 217, 39, 0); } }
.hero__title { margin: 24px auto 0; font-weight: 800; font-stretch: 118%; text-transform: uppercase; font-size: clamp(2.9rem, 8.6vw, 7.6rem); line-height: .9; letter-spacing: -.035em; }
.hero__line { display: block; overflow: hidden; padding: .02em 0; }
.hero__word { display: inline-block; color: rgba(255, 255, 255, .92); transition: color .8s var(--ease); position: relative; }
.hero__word.is-on { color: var(--y); text-shadow: 0 0 60px rgba(248, 217, 39, .35); }
.hero__word::after { content: ""; position: absolute; left: 0; right: .25em; bottom: .02em; height: .05em; background: var(--y); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-out); }
.hero__word.is-on::after { transform: scaleX(1); }
.is-ready .hero__line > .hero__word { animation: rise 1.2s var(--ease-out) both; }
.is-ready .hero__line:nth-child(2) > .hero__word { animation-delay: .12s; }
.is-ready .hero__line > .hero__word + .hero__word { animation-delay: .08s; }
.is-ready .hero__line:nth-child(2) > .hero__word + .hero__word { animation-delay: .2s; }
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
.hero__lede { max-width: 640px; margin: 24px auto 0; color: rgba(255, 255, 255, .84); font-size: clamp(.95rem, 1.2vw, 1.06rem); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.is-ready .hero__kicker, .is-ready .hero__lede, .is-ready .hero__actions { animation: fadeUp 1s var(--ease-out) both; }
.is-ready .hero__lede { animation-delay: .35s; }
.is-ready .hero__actions { animation-delay: .5s; }

.hero__meta { position: absolute; z-index: 6; left: 0; right: 0; bottom: 96px; display: flex; justify-content: space-between; align-items: end; gap: 24px; max-width: none; padding: 0 clamp(24px, 3vw, 40px); }
.hero__progress { display: flex; gap: 16px; }
.hero__progress button { display: grid; gap: 8px; width: 96px; text-align: left; color: rgba(255, 255, 255, .55); font: 500 .66rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; transition: color .3s; }
.hero__progress button i { display: block; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .25); overflow: hidden; position: relative; }
.hero__progress button i::after { content: ""; position: absolute; inset: 0; background: var(--y); transform: scaleX(0); transform-origin: left; }
.hero__progress button.is-active { color: #fff; }
.hero__progress button.is-active i::after { animation: prog var(--slide-ms, 6500ms) linear forwards; }
.hero__progress button.is-done i::after { transform: scaleX(1); }
@keyframes prog { to { transform: scaleX(1); } }
.hero__chip { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 999px; font-size: .82rem; max-width: 380px; }
.hero__chip-live { width: 8px; height: 8px; border-radius: 50%; background: #3BE07A; box-shadow: 0 0 0 4px rgba(59, 224, 122, .2); flex: none; animation: ping2 2s infinite; }
@keyframes ping2 { 50% { box-shadow: 0 0 0 7px rgba(59, 224, 122, .05); } }
.hero__chip-txt { transition: opacity .4s, transform .4s var(--ease); }
.hero__chip-txt.is-swap { opacity: 0; transform: translateY(6px); }
.hero__obj { position: absolute; z-index: 4; width: clamp(110px, 12vw, 180px); right: 7%; top: 14%; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .5)); animation: bob 7s ease-in-out infinite; pointer-events: none; }

.hero__strip {
  position: relative; z-index: 10; margin: -64px auto 0; max-width: 1020px;
  background: #fff; border-radius: 24px; padding: 16px 24px 16px;
  box-shadow: 0 1px 0 rgba(12, 12, 13, .04), 0 30px 60px -30px rgba(12, 12, 13, .35); border: 1px solid var(--line);
}
.hero__strip-label { text-align: center; font: 500 .66rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.hero__strip-list { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.hero__strip-list a { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 16px; font-weight: 600; font-size: .8rem; transition: background .3s; }
.hero__strip-list img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .15)); transition: transform .6s var(--ease); }
.hero__strip-list a:hover, .hero__strip-list a.is-hover { background: var(--mist); }
.hero__strip-list a:hover img, .hero__strip-list a.is-hover img { transform: translateY(-4px) rotate(-10deg) scale(1.1); }

/* ------------------------------------------------------------- episode cards */
.ep-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ep-card h3 { font-size: .98rem; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; margin-top: 16px; }
.ep-card h3 span { color: var(--muted); font-weight: 500; }
.ep-card__media { position: relative; display: block; aspect-ratio: 4 / 3.3; border-radius: var(--r); overflow: hidden; background: var(--mist); }
.ep-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.ep-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(12, 12, 13, .45)); opacity: 0; transition: opacity .5s; }
.ep-card:hover .ep-card__media img, .ep-card.is-hover .ep-card__media img { transform: scale(1.07); }
.ep-card:hover .ep-card__media::after, .ep-card.is-hover .ep-card__media::after { opacity: 1; }
.ep-card__tag { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 8px 12px; border-radius: 999px; font: 500 .64rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; background: rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ep-card__play { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--y); color: var(--ink); transform: scale(.5) rotate(-45deg); opacity: 0; transition: transform .5s var(--ease), opacity .4s; }
.ep-card__play svg { width: 16px; height: 16px; }
.ep-card:hover .ep-card__play, .ep-card.is-hover .ep-card__play { transform: none; opacity: 1; }
.ep-card__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .82rem; font-weight: 600; }
.ep-card__link svg { width: 12px; height: 12px; padding: 0; }
.ep-card__link:hover, .ep-card__link.is-hover { color: var(--y-700); }

/* ------------------------------------------------------------- about split */
.about-split { display: grid; grid-template-columns: 1fr minmax(0, 380px) 1fr; gap: clamp(24px, 3.5vw, 56px); align-items: center; }
.about-split__l p, .about-split__r > p { color: var(--muted); margin: 16px 0 24px; font-size: .96rem; }
.about-split__r > p { margin-top: 0; }
.about-split__media { position: relative; aspect-ratio: 3 / 4.1; border-radius: var(--r-lg); overflow: visible; }
.about-split__media > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-lg); object-position: 70% 50%; }
.about-split__media::before { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); overflow: hidden; z-index: 1; background: linear-gradient(180deg, transparent 55%, rgba(12, 12, 13, .55)); pointer-events: none; }
.about-split__chip { position: absolute; z-index: 2; left: 16px; bottom: 16px; display: grid; padding: 12px 16px; border-radius: 16px; font-size: .78rem; }
.about-split__chip b { font: 800 1.2rem/1.1 var(--f-display); }
.about-split__obj { position: absolute; z-index: 3; width: 128px; right: -44px; top: -36px; filter: drop-shadow(0 26px 24px rgba(12, 12, 13, .35)); animation: bob 7s ease-in-out infinite -2s; }
.sectors { margin-top: 32px; }
.sectors__label { font: 500 .7rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.sectors__list { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 16px; }
.sectors__list span { display: inline-flex; align-items: center; gap: 8px; font: 700 .9rem/1 var(--f-display); letter-spacing: -.01em; }
.sectors__list svg { width: 20px; height: 20px; color: var(--ink); }
.play-link { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; font-size: .9rem; }
.play-link__btn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--ink); color: var(--y); transition: transform .4s var(--ease), background .3s; }
.play-link__btn svg { width: 14px; height: 14px; }
.play-link:hover .play-link__btn, .play-link.is-hover .play-link__btn { background: var(--y); color: var(--ink); transform: scale(1.06); }
.kpis { display: grid; gap: 16px; margin: 32px 0 24px; }
.kpis > div { display: grid; }
.kpi__label { font-size: .78rem; color: var(--muted); }
.kpi__num { font: 800 2.2rem/1 var(--f-display); letter-spacing: -.03em; }
.obj-stack { display: flex; align-items: center; }
.obj-stack > span { width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 2px solid var(--mist); display: grid; place-items: center; margin-left: -12px; box-shadow: var(--shadow-1); }
.obj-stack > span:first-child { margin-left: 0; }
.obj-stack img { width: 32px; height: 32px; object-fit: contain; }
.obj-stack p { margin-left: 12px; font-size: .78rem; line-height: 1.35; color: var(--muted); }

/* ------------------------------------------------------------- bento (card concept) */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, minmax(220px, auto)) minmax(230px, auto); gap: 16px;
  grid-template-areas: "a b c c" "d d c c" "d d e f" "g g h h"; }
.bcard--a { grid-area: a; } .bcard--b { grid-area: b; } .bcard--c { grid-area: c; } .bcard--d { grid-area: d; }
.bcard--e { grid-area: e; } .bcard--f { grid-area: f; } .bcard--g { grid-area: g; } .bcard--h { grid-area: h; }
.bcard {
  --bg: var(--ink); --fg: #fff; --sub: rgba(255, 255, 255, .72); --pat: rgba(255, 255, 255, .08); --seal: #fff; --seal-ico: var(--ink);
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px; border-radius: var(--r-lg); background: var(--bg); color: var(--fg);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.bcard:hover, .bcard.is-hover { transform: translateY(-6px); box-shadow: 0 40px 60px -40px rgba(12, 12, 13, .55); }
.bcard__pat { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; color: var(--pat); transition: transform 1.4s var(--ease); }
.bcard:hover .bcard__pat, .bcard.is-hover .bcard__pat { transform: scale(1.06) rotate(-1deg); }
.bcard__eyebrow { position: absolute; left: 20px; top: 18px; font-size: .78rem; font-weight: 500; opacity: .85; }
.bcard__seal { position: absolute; right: 16px; top: 14px; width: 54px; height: 54px; display: grid; place-items: center; transition: transform 1s var(--ease); }
.bcard__seal .seal { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--seal); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .15)); }
.bcard__seal .ico { position: relative; width: 20px; height: 20px; color: var(--seal-ico); }
.bcard:hover .bcard__seal, .bcard.is-hover .bcard__seal { transform: rotate(30deg); }
.bcard:hover .bcard__seal .ico, .bcard.is-hover .bcard__seal .ico { transform: rotate(-30deg); transition: transform 1s var(--ease); }
.bcard h3 { font-weight: 500; font-size: clamp(1.3rem, 1.8vw, 1.6rem); letter-spacing: -.02em; line-height: 1.05; }
.bcard p { color: var(--sub); font-size: .82rem; line-height: 1.45; margin-top: 8px; max-width: 46ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bcard__stats { display: flex; gap: 16px; margin-top: 16px; font-size: .74rem; font-weight: 500; opacity: .9; }
.bcard__stats span { display: inline-flex; align-items: center; gap: 4px; }
.bcard__stats svg { width: 12px; height: 12px; }
.bcard--big { padding: 32px; }
.bcard--big h3 { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 400; }
.bcard--big p { font-size: 1.02rem; -webkit-line-clamp: 4; max-width: 40ch; }
.bcard--big .bcard__eyebrow { left: 30px; top: 28px; font-size: 1rem; }
.bcard--big .bcard__seal { width: 76px; height: 76px; right: 26px; top: 24px; }
.bcard--big .bcard__seal .ico { width: 28px; height: 28px; }
.bcard--big .bcard__stats { font-size: .95rem; gap: 24px; }
.bcard--big .bcard__stats svg { width: 16px; height: 16px; }
.bcard__obj { position: absolute; z-index: -1; width: 46%; max-width: 260px; right: 6%; top: 18%; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .35)); transition: transform 1.1s var(--ease); }
.bcard:hover .bcard__obj, .bcard.is-hover .bcard__obj { transform: translateY(-10px) rotate(-8deg) scale(1.05); }
.bcard__obj--sm { width: 26%; max-width: 150px; top: auto; bottom: 16%; right: 5%; }
.bcard--wide p { max-width: 52ch; }
.bcard--ink { --bg: var(--ink); --pat: rgba(248, 217, 39, .16); --seal: var(--y); }
.bcard--ink2 { --bg: linear-gradient(140deg, #1b1b1f, #0c0c0d); --pat: rgba(248, 217, 39, .18); --seal: var(--y); }
.bcard--yellow { --bg: var(--y); --fg: var(--ink); --sub: rgba(12, 12, 13, .72); --pat: rgba(12, 12, 13, .13); --seal: var(--ink); --seal-ico: var(--y); }
.bcard--amber { --bg: var(--amber); --fg: var(--ink); --sub: rgba(12, 12, 13, .72); --pat: rgba(255, 255, 255, .22); }
.bcard--paper { --bg: var(--paper); --fg: var(--ink); --sub: var(--muted); --pat: rgba(201, 164, 0, .25); --seal: var(--ink); --seal-ico: var(--y); }
.bcard--graphite { --bg: var(--ink-600); --pat: rgba(248, 217, 39, .28); --seal: var(--y); }
.bcard--white { --bg: #fff; --fg: var(--ink); --sub: var(--muted); --pat: rgba(12, 12, 13, .1); --seal: var(--y); box-shadow: inset 0 0 0 1px var(--line); }
.bcard--olive { --bg: linear-gradient(140deg, #3a3714, #1f1e0c); --pat: rgba(248, 217, 39, .22); --seal: var(--y); }

/* ------------------------------------------------------------- voices */
.voices { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
.voices__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.voice__media { aspect-ratio: 3 / 3.7; border-radius: var(--r); overflow: hidden; background: #ddd; }
.voice__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .8s; filter: saturate(.9); }
.voice:hover .voice__media img, .voice.is-hover .voice__media img { transform: scale(1.06); filter: saturate(1.05); }
.voice figcaption { margin-top: 12px; display: grid; gap: 2px; }
.voice figcaption b { font: 700 .98rem/1.2 var(--f-display); letter-spacing: -.01em; }
.voice figcaption span { font-size: .8rem; color: var(--muted); }
.voices__text p { color: var(--muted); margin: 16px 0 24px; }

/* ------------------------------------------------------------- black banner */
.banner {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 24px;
  min-height: 340px; padding: clamp(32px, 5vw, 64px); border-radius: var(--r-xl);
  background: var(--ink); color: #fff;
}
.banner__glow { position: absolute; z-index: -1; width: 620px; height: 620px; right: -120px; top: -180px; background: radial-gradient(circle, rgba(248, 217, 39, .35), rgba(248, 217, 39, 0) 62%); filter: blur(10px); }
.banner__lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; color: rgba(248, 217, 39, .18); }
.banner__text p { color: rgba(255, 255, 255, .66); margin-top: 16px; max-width: 46ch; }
.banner__form { display: flex; gap: 8px; margin-top: 24px; max-width: 520px; padding: 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.banner__form input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; padding: 0 16px; color: #fff; }
.banner__form input::placeholder { color: rgba(255, 255, 255, .45); }
.banner__note { font-size: .8rem; color: var(--y); min-height: 1.2em; margin-top: 12px; }
.banner__art { position: relative; height: 300px; }
.banner__ring { position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; margin: -128px 0 0 -128px; border-radius: 50%; border: 1px dashed rgba(248, 217, 39, .35); animation: spin 40s linear infinite; }
.banner__ring::after { content: ""; position: absolute; inset: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .08); }
@keyframes spin { to { transform: rotate(360deg); } }
.banner__art img { position: absolute; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .55)); }
.banner__o1 { width: 46%; left: 26%; top: 18%; animation: bob 7s ease-in-out infinite; }
.banner__o2 { width: 34%; left: 2%; top: 52%; animation: bob 8s ease-in-out infinite -2s; }
.banner__o3 { width: 22%; right: 6%; top: 0; animation: bob 6s ease-in-out infinite -1s; }
.banner__o4 { width: 26%; right: 4%; bottom: 0; animation: bob 9s ease-in-out infinite -4s; }

/* ------------------------------------------------------------- map */
.section--map { padding-bottom: clamp(48px, 6vw, 80px); overflow: hidden; }
.section--map::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 55%, var(--y-50), transparent 70%); pointer-events: none; }
.map-head { position: relative; z-index: 2; text-align: center; max-width: 820px; margin: 0 auto; }
.map-head p { color: var(--muted); max-width: 560px; margin: 16px auto 0; }
.pill-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: .8rem; font-weight: 600; margin-bottom: 16px; box-shadow: var(--shadow-1); }
.pill-badge__dot { width: 20px; height: 20px; border-radius: 50%; background: var(--y); box-shadow: inset 0 0 0 6px var(--ink); }
.map-filter { display: inline-grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 8px; margin-top: 24px; padding: 8px 8px 8px 16px; border-radius: 16px; text-align: left; width: min(560px, 100%); }
.map-filter__f { display: grid; gap: 2px; padding-right: 12px; border-right: 1px solid var(--line); }
.map-filter__f:nth-child(2) { border: 0; }
.map-filter__f span { font-size: .68rem; color: var(--muted); }
.map-filter__f select, .map-filter__f b { font-size: .86rem; font-weight: 600; border: 0; background: transparent; padding: 0; outline: 0; appearance: none; cursor: pointer; }
.map-filter__f select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%230C0C0D' stroke-width='1.6'/%3E%3C/svg%3E") right center no-repeat; padding-right: 16px; }
.map-filter__go { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--y); transition: transform .4s var(--ease); }
.map-filter__go svg { width: 16px; height: 16px; }
.map-filter__go:hover, .map-filter__go.is-hover { transform: rotate(-45deg); }

.map-stage { position: relative; max-width: 900px; margin: clamp(-24px, -2vw, 0px) auto 0; aspect-ratio: 840 / 759; }
.zimmap { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.zimmap .outline { fill: rgba(255, 255, 255, .6); stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 4 5; }
.zimmap .dots circle { fill: #CFCBBE; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .6s var(--ease-out); }
.zimmap .dots circle.warm { fill: #C9B65A; }
.zimmap .dots circle.hot { fill: var(--y-600); }
.map-stage.is-in .zimmap .dots circle { transform: scale(1); }
.zimmap .arc { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 3 5; opacity: .55; stroke-dashoffset: 0; animation: dash 18s linear infinite; transition: opacity .5s, stroke .5s; }
.zimmap .arc.is-dim { opacity: .08; }
.zimmap .arc.is-hot { stroke: var(--y-700); opacity: 1; stroke-width: 2; }
@keyframes dash { to { stroke-dashoffset: -200; } }
.zimmap .city .core { fill: var(--ink); stroke: #fff; stroke-width: 2; }
.zimmap .city .pulse { fill: rgba(248, 217, 39, .45); transform-box: fill-box; transform-origin: center; animation: pulse 2.6s var(--ease-out) infinite; }
.zimmap .city[data-city="harare"] .core { fill: var(--y); stroke: var(--ink); stroke-width: 2.5; r: 7; }
.zimmap .city text { font: 600 11px/1 var(--f-body); fill: var(--ink-600); paint-order: stroke; stroke: rgba(255, 255, 255, .9); stroke-width: 3px; }
@keyframes pulse { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }

.mpin { position: absolute; z-index: 3; transform: translate(-50%, -100%) scale(0); transform-origin: 50% 100%; display: grid; justify-items: center; gap: 4px; transition: transform .7s var(--ease-out), opacity .4s; }
.map-stage.is-in .mpin { transform: translate(-50%, calc(-100% - 8px)) scale(1); }
.mpin img, .mpin b { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 12px 24px -10px rgba(12, 12, 13, .55); transition: transform .4s var(--ease), border-color .3s; }
.mpin b { display: grid; place-items: center; background: var(--ink); color: var(--y); font: 700 .95rem/1 var(--f-display); }
.mpin b svg { width: 20px; height: 20px; }
.mpin::after { content: ""; position: absolute; bottom: 14px; width: 2px; height: 10px; background: #fff; z-index: -1; }
.mpin span { font-size: .7rem; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-1); }
.mpin:hover img, .mpin:hover b, .mpin.is-active img, .mpin.is-active b, .mpin.is-hover img, .mpin.is-hover b { transform: scale(1.12); border-color: var(--y); }
.mpin.is-off { opacity: .2; pointer-events: none; }
.map-card {
  position: absolute; z-index: 5; width: 250px; transform: translate(calc(-50% + var(--nx, 0px)), calc(-100% - 22px));
  background: #fff; border-radius: 16px; padding: 8px; box-shadow: 0 40px 60px -30px rgba(12, 12, 13, .45), 0 0 0 1px var(--line);
  transition: left .7s var(--ease), top .7s var(--ease), opacity .4s;
}
.map-card::after { content: ""; position: absolute; left: calc(50% - var(--nx, 0px)); bottom: -8px; width: 16px; height: 16px; margin-left: -8px; background: #fff; transform: rotate(45deg); border-radius: 0 0 4px 0; box-shadow: 1px 1px 0 var(--line); }
.map-card__media { position: relative; aspect-ratio: 16 / 9.5; border-radius: 12px; overflow: hidden; }
.map-card__media img { width: 100%; height: 100%; object-fit: cover; }
.map-card__new { position: absolute; right: 8px; top: 8px; padding: 4px 8px; border-radius: 999px; background: #fff; font-size: .66rem; font-weight: 600; }
.map-card__body { padding: 12px 8px 4px; }
.map-card__body > b { font: 700 .95rem/1.2 var(--f-display); }
.map-card__loc { display: flex; align-items: center; gap: 4px; font-size: .72rem; color: var(--muted); margin-top: 3px; }
.map-card__loc svg { width: 12px; height: 12px; flex: none; }
.map-card__meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.map-card__meta span { font-size: .66rem; padding: 3px 8px; border-radius: 12px; background: var(--mist); }
.map-card__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line); font-size: .78rem; }
.map-card__foot b { font: 700 .9rem/1 var(--f-display); }
.map-card__foot a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.map-card.is-swap { opacity: 0; }

.stats-row { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 32px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { display: flex; align-items: center; gap: 16px; padding: 32px 24px; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat b { font: 800 clamp(1.8rem, 3vw, 2.6rem)/1 var(--f-display); letter-spacing: -.03em; }
.stat > span { font-size: .72rem; line-height: 1.25; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* ------------------------------------------------------------- why */
.why { display: grid; grid-template-columns: 1fr minmax(0, 400px) 1fr; gap: clamp(24px, 3.5vw, 56px); align-items: center; }
.why__l p { color: var(--muted); margin-top: 16px; font-size: .96rem; }
.why__sub { font-size: .88rem !important; }
.why__media { position: relative; aspect-ratio: 4 / 3.4; border-radius: var(--r-lg); overflow: hidden; }
.why__media img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; }
.why__badge { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; font-size: .78rem; }
.why__badge svg { width: 32px; height: 32px; padding: 8px; border-radius: 50%; background: var(--y); color: var(--ink); flex: none; }
.why__badge b { display: block; font-size: .9rem; }
.acc { display: grid; gap: 8px; }
.acc__head { display: flex; justify-content: space-between; align-items: center; padding: 16px 16px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 600; font-size: .92rem; }
.acc__head svg { width: 16px; height: 16px; color: var(--y); }
.acc__intro { font-size: .84rem; color: var(--muted); padding: 4px 2px 8px; }
.acc__item { border-radius: 12px; background: #fff; border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s; }
.acc__item.is-open { border-color: var(--line-2); box-shadow: var(--shadow-1); }
.acc__btn { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 16px 16px; font-weight: 600; font-size: .9rem; text-align: left; }
.acc__btn i { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); flex: none; transition: background .3s, border-color .3s, transform .4s var(--ease); }
.acc__btn i::before, .acc__btn i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 1.5px; margin: -.75px 0 0 -4px; background: currentColor; transition: transform .4s var(--ease); }
.acc__btn i::after { transform: rotate(90deg); }
.acc__item.is-open .acc__btn i { background: var(--y); border-color: var(--y); transform: rotate(180deg); }
.acc__item.is-open .acc__btn i::after { transform: rotate(0); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.acc__panel > p { overflow: hidden; padding: 0 16px; font-size: .86rem; color: var(--muted); }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__item.is-open .acc__panel > p { padding-bottom: 16px; }

/* ------------------------------------------------------------- process */
.process::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 60% at 80% 0%, rgba(248, 217, 39, .12), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(255, 255, 255, .06), transparent 70%); pointer-events: none; }
.process .container { position: relative; }
.process__track { position: relative; height: 2px; background: rgba(255, 255, 255, .1); border-radius: 2px; margin-bottom: 24px; overflow: hidden; }
.process__track i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--y), var(--amber)); transform-origin: left; transform: scaleX(var(--p, 0)); }
.process__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pcard { position: relative; display: flex; flex-direction: column; min-height: 360px; padding: 24px 24px 24px; border-radius: var(--r); background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .09); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color .5s, transform .6s var(--ease), background .5s; }
.pcard:hover, .pcard.is-hover { border-color: rgba(248, 217, 39, .45); transform: translateY(-6px); background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); }
.pcard__n { font: 500 .72rem/1 var(--f-mono); color: var(--y); letter-spacing: .1em; }
.pcard h3 { font: 600 1.15rem/1.2 var(--f-display); margin-top: 16px; }
.pcard p { color: rgba(255, 255, 255, .6); font-size: .84rem; margin-top: 8px; }
.pcard__art { width: 100%; max-width: 180px; margin: auto auto 16px; color: rgba(255, 255, 255, .85); overflow: visible; }
.pcard__art .y { fill: var(--y); }
.pcard__art .y-s { stroke: var(--y); }
.pcard__art g path, .pcard__art g rect, .pcard__art g line { stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 2.2s var(--ease-out) .3s; }
.pcard.is-in .pcard__art g path, .pcard.is-in .pcard__art g rect, .pcard.is-in .pcard__art g line { stroke-dashoffset: 0; }
.pcard__art .burst line { stroke-dasharray: 60; stroke-dashoffset: 60; transition-delay: calc(var(--k) * 20ms + .3s); }
.pcard__art .y, .pcard__art .y-s { animation: glow 3s ease-in-out infinite; }
@keyframes glow { 50% { filter: drop-shadow(0 0 8px rgba(248, 217, 39, .9)); } }
.pcard__foot { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; color: rgba(255, 255, 255, .7); padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .08); }
.pcard__foot svg { width: 14px; height: 14px; }

/* ------------------------------------------------------------- testimonials */
.testi-head { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; align-items: start; margin-bottom: 40px; }
.testi-head p { color: var(--muted); margin-top: 16px; max-width: 54ch; }
.testi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tcard { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: transform .6s var(--ease), box-shadow .6s; }
.tcard:hover, .tcard.is-hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }
.tcard blockquote { font: italic 600 1.02rem/1.5 var(--f-body); letter-spacing: -.01em; }
.tcard figcaption { display: flex; align-items: center; gap: 12px; font-size: .8rem; }
.tcard figcaption b { display: block; font-size: .86rem; }
.tcard figcaption small { color: var(--muted); }
.tcard__av { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--y); color: var(--ink); font: 700 .82rem/1 var(--f-display); flex: none; box-shadow: inset 0 -6px 12px rgba(201, 164, 0, .45); }
.tcard__stars { margin-left: auto; display: flex; gap: 1px; color: var(--y-600); }
.tcard__stars svg { width: 12px; height: 12px; }
.dots { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.dots button { width: 7px; height: 7px; border-radius: 999px; background: var(--line-2); transition: width .4s var(--ease), background .3s; }
.dots button.is-active { width: 26px; background: var(--ink); }

/* ------------------------------------------------------------- topics */
.topics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; }

/* ------------------------------------------------------------- contact */
.contact { display: grid; grid-template-columns: 1fr minmax(0, 360px) 1.1fr; gap: clamp(24px, 3.5vw, 48px); align-items: stretch; }
.contact__info p { color: var(--muted); margin: 16px 0 24px; font-size: .94rem; }
.contact__list { display: grid; gap: 16px; }
.contact__list li { display: flex; gap: 16px; font-size: .9rem; }
.contact__list b { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 500; margin-bottom: 2px; }
.contact__list a:hover, .contact__list a.is-hover { color: var(--y-700); }
.contact__ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--y); flex: none; }
.contact__ico svg { width: 20px; height: 20px; }
.contact__media { position: relative; min-height: 440px; border-radius: var(--r-lg); overflow: hidden; }
.contact__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact__chip { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 999px; font-size: .78rem; }
.contact__form { display: grid; gap: 12px; align-content: start; }
.contact__form .h3 { margin-bottom: 8px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 16px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--mist);
  font-size: .9rem; outline: 0; transition: border-color .3s, background .3s, box-shadow .3s; resize: vertical;
}
.field select { appearance: none; background: var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%230C0C0D' stroke-width='1.6'/%3E%3C/svg%3E") right 16px center no-repeat; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); background: #fff; box-shadow: 0 0 0 4px var(--y-100); }
.contact__form .btn { justify-self: end; }
.form-note { font-size: .82rem; color: var(--y-700); min-height: 1.2em; text-align: right; }

/* ------------------------------------------------------------- CTA */
.section--cta { padding-top: 0; }
.cta-card { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: clamp(48px, 7vw, 88px) var(--gutter); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 80px -50px rgba(12, 12, 13, .35); }
.cta-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 70% at 50% 120%, var(--y-100), transparent 70%); }
.cta-card p { color: var(--muted); max-width: 520px; margin: 16px auto 0; }
.cta-card__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.cta-card__obj { position: absolute; z-index: -1; filter: drop-shadow(0 26px 24px rgba(12, 12, 13, .25)); }
.cta-card__obj--l { width: 120px; left: 7%; top: 18%; animation: bob 8s ease-in-out infinite; }
.cta-card__obj--r { width: 130px; right: 7%; top: 14%; animation: bob 7s ease-in-out infinite -3s; }
.cta-card__obj--b { width: 150px; right: 18%; bottom: -30px; animation: bob 9s ease-in-out infinite -5s; opacity: .9; }

/* ------------------------------------------------------------- footer */
.site-footer { position: relative; background: var(--ink); color: rgba(255, 255, 255, .72); padding: clamp(56px, 7vw, 88px) 0 24px; margin: 0 clamp(8px, 1.4vw, 16px) clamp(8px, 1.4vw, 16px); border-radius: var(--r-xl); overflow: hidden; }
.site-footer::before { content: ""; position: absolute; width: 700px; height: 700px; left: -200px; top: -380px; background: radial-gradient(circle, rgba(248, 217, 39, .14), transparent 65%); pointer-events: none; }
.footer__top { position: relative; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 40px; }
.footer__brand p { margin-top: 16px; max-width: 36ch; font-size: .9rem; }
.footer__divs { display: flex; gap: 8px; margin-top: 24px; }
.footer__divs img { width: 40px; height: 40px; object-fit: contain; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .06); transition: transform .5s var(--ease), background .3s; }
.footer__divs img:hover, .footer__divs img.is-hover { transform: translateY(-4px) rotate(-8deg); background: rgba(255, 255, 255, .12); }
.footer__col { display: grid; align-content: start; gap: 8px; font-size: .88rem; }
.footer__col h4 { font: 600 .7rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--y); margin-bottom: 8px; }
.footer__col h4.mt { margin-top: 16px; }
.footer__col a { transition: color .3s, transform .3s; width: fit-content; }
.footer__col a:hover, .footer__col a.is-hover { color: #fff; transform: translateX(3px); }
.footer__hours { display: flex; justify-content: space-between; max-width: 230px; }
.footer__hours b { color: #fff; font-weight: 500; }
.footer__word { position: relative; margin: clamp(40px, 6vw, 72px) 0 12px; line-height: .8; user-select: none; }
.footer__word span { display: block; font: 900 clamp(4.6rem, 20vw, 18rem)/.8 var(--f-display); font-stretch: 125%; letter-spacing: -.05em; text-align: center; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .16);
  background: linear-gradient(90deg, var(--y) 0%, var(--y) var(--fill, 0%), transparent var(--fill, 0%)); -webkit-background-clip: text; background-clip: text; }
.footer__bottom { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .8rem; }
.footer__tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.footer__tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--y); }
.to-top { display: inline-flex; align-items: center; gap: 8px; color: #fff; }
.to-top svg { width: 32px; height: 32px; padding: 8px; border-radius: 50%; background: var(--y); color: var(--ink); fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .4s var(--ease); }
.to-top:hover svg, .to-top.is-hover svg { transform: translateY(-3px); }

/* =====================================================================
   INNER PAGES
   ===================================================================== */
.page-hero { padding: 8px 0 0; }
.page-hero__frame { position: relative; margin: 0 clamp(8px, 1.4vw, 16px); border-radius: var(--r-xl); overflow: hidden; min-height: clamp(420px, 62vh, 560px); color: #fff; display: flex; align-items: flex-end; isolation: isolate; }
.page-hero__frame > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.08); animation: kb 14s ease-out forwards; }
@keyframes kb { to { transform: scale(1); } }
.page-hero__frame::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 12, 13, .35), rgba(12, 12, 13, .1) 30%, rgba(12, 12, 13, .82)); }
.page-hero__content { padding-bottom: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: end; }
.crumbs { display: inline-flex; gap: 8px; align-items: center; font: 500 .7rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .7); margin-bottom: 16px; }
.crumbs a:hover, .crumbs a.is-hover { color: var(--y); }
.crumbs i { width: 4px; height: 4px; border-radius: 50%; background: var(--y); }
.page-hero h1 { font-family: var(--f-display); font-weight: 800; font-stretch: 112%; text-transform: uppercase; letter-spacing: -.035em; line-height: .92; font-size: clamp(2.6rem, 6.4vw, 5.6rem); }
.page-hero h1 em { font-style: normal; color: var(--y); }
.page-hero p { color: rgba(255, 255, 255, .82); max-width: 48ch; }
.page-hero__obj { position: absolute; right: 6%; top: 12%; width: clamp(100px, 11vw, 170px); filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .5)); animation: bob 7s ease-in-out infinite; z-index: 1; }

/* about page */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.story__media { position: relative; }
.story__media .m1 { border-radius: var(--r-lg); aspect-ratio: 4 / 3.2; object-fit: cover; width: 100%; }
.story__media .m2 { position: absolute; width: 46%; right: -6%; bottom: -12%; border-radius: var(--r); aspect-ratio: 1; object-fit: cover; border: 6px solid #fff; box-shadow: var(--shadow-2); }
.story__media .obj { position: absolute; width: 120px; left: -30px; top: -40px; filter: drop-shadow(0 24px 24px rgba(12, 12, 13, .3)); animation: bob 7s ease-in-out infinite; }
.story__text p { color: var(--muted); margin-top: 16px; }
.story__text p.lead { color: var(--ink); font-size: 1.12rem; font-weight: 500; line-height: 1.55; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin-top: 24px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; font-weight: 500; }
.checks svg { width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: var(--y); flex: none; margin-top: 1px; }

.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.vcard { position: relative; overflow: hidden; isolation: isolate; padding: 24px; min-height: 340px; border-radius: var(--r-lg); display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
.vcard > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.vcard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 12, 13, .1), rgba(12, 12, 13, .85)); }
.vcard:hover > img:first-child, .vcard.is-hover > img:first-child { transform: scale(1.07); }
.vcard__n { position: absolute; top: 20px; left: 22px; font: 500 .72rem/1 var(--f-mono); letter-spacing: .1em; color: var(--y); }
.vcard__glass { padding: 16px; border-radius: 16px; }
.vcard h3 { font: 700 1.45rem/1.1 var(--f-display); letter-spacing: -.02em; }
.vcard p { font-size: .85rem; color: rgba(255, 255, 255, .82); margin-top: 8px; }

.timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 1px; background: var(--line-2); }
.tl { position: relative; padding-top: 56px; }
.tl::before { content: ""; position: absolute; left: 0; top: 14px; width: 17px; height: 17px; border-radius: 50%; background: var(--y); box-shadow: 0 0 0 5px #fff, 0 0 0 6px var(--line-2); }
.tl b { font: 800 1.6rem/1 var(--f-display); letter-spacing: -.02em; }
.tl h3 { font: 600 1rem/1.3 var(--f-display); margin-top: 8px; }
.tl p { font-size: .86rem; color: var(--muted); margin-top: 8px; }

.sector-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.scard { display: flex; gap: 16px; align-items: flex-start; padding: 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); transition: transform .5s var(--ease), box-shadow .5s, border-color .3s; }
.scard:hover, .scard.is-hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: transparent; }
.scard__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--ink); color: var(--y); flex: none; transition: background .3s, color .3s; }
.scard:hover .scard__ico, .scard.is-hover .scard__ico { background: var(--y); color: var(--ink); }
.scard__ico svg { width: 24px; height: 24px; }
.scard h3 { font: 700 1.05rem/1.2 var(--f-display); }
.scard p { font-size: .85rem; color: var(--muted); margin-top: 4px; }

/* divisions page */
.div-nav { position: sticky; top: calc(var(--header-h) + 8px); z-index: 50; margin: -32px auto 0; width: fit-content; max-width: calc(100% - 2 * var(--gutter)); display: flex; gap: 4px; padding: 8px; border-radius: 999px; overflow-x: auto; scrollbar-width: none; }
.div-nav::-webkit-scrollbar { display: none; }
.div-nav a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 8px; border-radius: 999px; font-size: .84rem; font-weight: 600; white-space: nowrap; transition: background .3s, color .3s; }
.div-nav a img { width: 30px; height: 30px; object-fit: contain; }
.div-nav a:hover, .div-nav a.is-hover { background: var(--mist); }
.div-nav a.is-active { background: var(--ink); color: #fff; }
.div-sec { padding: clamp(64px, 8vw, 104px) 0; position: relative; scroll-margin-top: 140px; }
.div-sec:nth-of-type(even) { background: var(--mist); }
.div-sec__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.div-sec--flip .div-sec__media { order: 2; }
.div-sec__media { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; aspect-ratio: 1.15; }
.div-sec__media img.p { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); }
.div-sec__media img.p:first-child { grid-row: span 2; }
.div-sec__obj { position: absolute; width: clamp(100px, 10vw, 150px); left: -34px; bottom: -34px; filter: drop-shadow(0 26px 26px rgba(12, 12, 13, .35)); animation: bob 7s ease-in-out infinite; }
.div-sec--flip .div-sec__obj { left: auto; right: -34px; }
.div-sec__spec { display: inline-flex; align-items: center; gap: 16px; margin: 16px 0 8px; padding: 8px 16px 8px 8px; border-radius: 16px; background: var(--y); color: var(--ink); font: 400 .8rem/1.35 var(--f-text); max-width: 100%; }
.div-sec__spec img { width: 52px; height: 52px; object-fit: contain; flex: none; background: var(--ink); border-radius: 12px; padding: 8px; }
.div-sec__spec b { display: block; font: 700 1.05rem/1.15 var(--f-display); letter-spacing: -.01em; }
.div-sec__num { font: 500 .78rem/1 var(--f-mono); letter-spacing: .12em; color: var(--muted); display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.div-sec__num::after { content: ""; width: 60px; height: 1px; background: var(--line-2); }
.div-sec__text > p { color: var(--muted); margin-top: 16px; }
.offer { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 24px 0 32px; }
.offer li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: .86rem; font-weight: 500; line-height: 1.35; transition: border-color .3s, transform .4s var(--ease); }
.offer li:hover, .offer li.is-hover { border-color: var(--y-600); transform: translateY(-2px); }
.offer svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--y); flex: none; }
.div-sec__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* kV range graph */
.kv { margin: 24px 0 8px; padding: 16px; border-radius: var(--r); background: var(--ink); color: #fff; }
.kv__head { display: flex; justify-content: space-between; font: 500 .7rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-bottom: 16px; }
.kv__bars { display: flex; align-items: end; gap: 8px; height: 90px; }
.kv__bars span { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--y), rgba(248, 217, 39, .25)); height: 0; transition: height 1.2s var(--ease-out); transition-delay: calc(var(--i) * 60ms); position: relative; }
.kv.is-in .kv__bars span { height: var(--h); }
.kv__bars span em { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font: 500 .62rem/1 var(--f-mono); font-style: normal; color: rgba(255, 255, 255, .8); white-space: nowrap; }
.kv__axis { display: flex; justify-content: space-between; font-size: .7rem; color: rgba(255, 255, 255, .5); margin-top: 8px; }

/* solar calculator */
.calc { display: grid; grid-template-columns: 1fr 1.35fr; gap: 16px; }
.calc__panel { padding: clamp(24px, 3vw, 40px); border-radius: var(--r-lg); background: var(--ink); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.calc__panel::before { content: ""; position: absolute; width: 400px; height: 400px; right: -160px; top: -160px; z-index: -1; background: radial-gradient(circle, rgba(248, 217, 39, .3), transparent 65%); }
.calc__panel .h3 { margin-bottom: 8px; }
.calc__panel > p { color: rgba(255, 255, 255, .6); font-size: .88rem; }
.calc__field { margin-top: 24px; }
.calc__field label { display: flex; justify-content: space-between; font-size: .82rem; color: rgba(255, 255, 255, .7); margin-bottom: 12px; }
.calc__field output { font: 700 1rem/1 var(--f-display); color: var(--y); }
.calc input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 12px; background: linear-gradient(90deg, var(--y) var(--v, 30%), rgba(255, 255, 255, .15) var(--v, 30%)); outline: 0; }
.calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 5px solid var(--y); box-shadow: 0 4px 12px rgba(0, 0, 0, .4); cursor: grab; }
.calc input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 5px solid var(--y); cursor: grab; }
.calc__seg { display: flex; gap: 8px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .08); }
.calc__seg button { flex: 1; height: 38px; border-radius: 12px; font-size: .82rem; font-weight: 600; color: rgba(255, 255, 255, .7); transition: background .3s, color .3s; }
.calc__seg button.is-active { background: var(--y); color: var(--ink); }
.calc__results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 32px; }
.calc__results div { padding: 16px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.calc__results b { display: block; font: 800 1.45rem/1 var(--f-display); color: #fff; }
.calc__results span { font-size: .7rem; color: rgba(255, 255, 255, .55); }
.calc__note { font-size: .72rem; color: rgba(255, 255, 255, .45); margin-top: 16px; }
.calc__chart { padding: clamp(24px, 3vw, 32px); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; }
.calc__chart-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; flex-wrap: wrap; }
.calc__chart-head b { font: 700 1.1rem/1.2 var(--f-display); }
.calc__chart-head small { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; }
.legend { display: flex; gap: 16px; font-size: .76rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }
.chart { position: relative; flex: 1; min-height: 300px; margin-top: 16px; }
.chart svg { width: 100%; height: 100%; overflow: visible; }
.chart .grid line { stroke: var(--line); }
.chart .axis text { font: 500 10px var(--f-mono); fill: var(--muted-2); }
.chart .bar-grid { fill: #2E2F34; }
.chart .bar-solar { fill: var(--y); }
.chart .line-cum { fill: none; stroke: var(--ink); stroke-width: 2; }
.chart .area-cum { fill: url(#cumGrad); }
.chart .pt { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.chart .be line { stroke: var(--y-700); stroke-dasharray: 4 4; }
.chart .be text { font: 600 11px var(--f-body); fill: var(--ink); }
.chart .be rect { fill: var(--y); }
.chart-tip { position: absolute; pointer-events: none; padding: 8px 12px; border-radius: 12px; background: var(--ink); color: #fff; font-size: .74rem; line-height: 1.4; opacity: 0; transform: translate(-50%, -110%); transition: opacity .2s; white-space: nowrap; }
.chart-tip b { color: var(--y); }

/* FAQ */
.faq { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(32px, 5vw, 72px); }
.faq .acc__item { background: #fff; }

/* contact page */
.cinfo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: -64px; position: relative; z-index: 5; }
.cinfo__card { padding: 24px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-2); display: grid; gap: 8px; transition: transform .5s var(--ease); }
.cinfo__card:hover, .cinfo__card.is-hover { transform: translateY(-4px); }
.cinfo__card .contact__ico { margin-bottom: 12px; }
.cinfo__card b { font: 700 1.05rem/1.2 var(--f-display); }
.cinfo__card span, .cinfo__card a { font-size: .9rem; color: var(--muted); }
.cinfo__card a:hover, .cinfo__card a.is-hover { color: var(--ink); }
.quote { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.quote__form { padding: clamp(24px, 3.5vw, 40px); border-radius: var(--r-xl); background: var(--mist); border: 1px solid var(--line); display: grid; gap: 12px; }
.quote__form .field input, .quote__form .field select, .quote__form .field textarea { background: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; }
.chips span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: .82rem; font-weight: 600; cursor: pointer; transition: background .3s, border-color .3s; }
.chips input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.chips input:checked + span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--y); }
.chips input:focus-visible + span { outline: 2px solid var(--y-600); outline-offset: 2px; }
.form-label { font: 500 .72rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.quote__map { position: sticky; top: 100px; }
.quote__map .map-stage { margin: 0; }
.quote__map-card { padding: 24px; border-radius: var(--r-lg); background: var(--ink); color: #fff; margin-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.quote__map-card b { font: 700 1.05rem/1.2 var(--f-display); display: block; }
.quote__map-card span { font-size: .84rem; color: rgba(255, 255, 255, .65); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1180px) {
  .nav__link { padding: 0 12px; }
  .hdr-phone span { display: none; }
  .about-split { grid-template-columns: 1fr 1fr; }
  .about-split__media { grid-row: span 2; order: 2; }
  .about-split__l { order: 1; }
  .about-split__r { order: 3; }
  .why { grid-template-columns: 1fr 1fr; }
  .why__media { order: 3; grid-column: span 2; aspect-ratio: 16 / 7; }
  .contact { grid-template-columns: 1fr 1fr; }
  .contact__media { order: 3; grid-column: span 2; min-height: 320px; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
  :root { --header-h: 68px; }
  .nav, .site-header__cta .btn { display: none; }
  .burger { display: block; }
  .hdr-phone span { display: inline; }
  .ep-grid, .topics { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; grid-template-areas: "c c" "a b" "d d" "e f" "g g" "h h"; }
  .bcard { min-height: 240px; }
  .bcard--big { min-height: 440px; }
  .voices { grid-template-columns: 1fr; }
  .banner { grid-template-columns: 1fr; }
  .banner__art { height: 240px; order: -1; }
  .process__grid { grid-template-columns: repeat(2, 1fr); }
  .section-head, .testi-head { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .hero__strip-list { grid-template-columns: repeat(4, 1fr); }
  .story, .div-sec__grid, .calc, .faq, .quote { grid-template-columns: 1fr; }
  .div-sec--flip .div-sec__media { order: 0; }
  .values { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .sector-grid { grid-template-columns: repeat(2, 1fr); }
  .page-hero__content { grid-template-columns: 1fr; }
  .quote__map { position: static; }
}
@media (max-width: 720px) {
  body { font-size: 15px; }
  .brand__word small { display: none; }
  .hdr-phone span { display: none; }
  .hdr-phone { width: 44px; height: 44px; border-radius: 50%; justify-content: center; border: 1px solid var(--line); }
  .hero__frame { min-height: 640px; border-radius: 24px; }
  .hero__content { padding-bottom: 152px; }
  .hero__title { font-stretch: 100%; }
  .hero__meta { bottom: 82px; flex-direction: column; align-items: stretch; }
  .hero__progress { justify-content: space-between; gap: 8px; }
  .hero__progress button { width: auto; flex: 1; }
  .hero__progress button span { display: none; }
  .hero__chip { font-size: .74rem; max-width: none; }
  .hero__obj { width: 84px; right: 4%; top: 6%; }
  .hero__strip { margin-top: -48px; padding: 16px 12px; }
  .hero__strip-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .hero__strip-list::-webkit-scrollbar { display: none; }
  .hero__strip-list a { flex: 0 0 25%; scroll-snap-align: start; font-size: .74rem; }
  .ep-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .ep-card h3 { font-size: .86rem; }
  .topics { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .head-row { flex-direction: column; align-items: start; }
  .about-split { grid-template-columns: 1fr; }
  .about-split__media { grid-row: auto; order: 2; aspect-ratio: 4 / 4.4; }
  .about-split__obj { width: 96px; right: -6px; top: -30px; }
  .sectors__list { grid-template-columns: repeat(2, auto); }
  .bento { grid-template-columns: 1fr; grid-template-areas: "c" "a" "b" "d" "e" "f" "g" "h"; }
  .bcard--big { min-height: 400px; padding: 24px; }
  .bcard--big .bcard__eyebrow { left: 22px; top: 22px; }
  .bcard__obj { width: 52%; }
  .voices__grid { grid-template-columns: repeat(3, 72%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
  .voices__grid::-webkit-scrollbar { display: none; }
  .voice { scroll-snap-align: start; }
  .banner { padding: 32px 24px; }
  .banner__form { flex-direction: column; border-radius: 16px; background: transparent; border: 0; padding: 0; }
  .banner__form input { height: 50px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
  .map-filter { grid-template-columns: 1fr auto; }
  .map-filter__f:nth-child(2) { display: none; }
  .map-filter__f { border: 0; }
  .mpin img, .mpin b { width: 36px; height: 36px; border-width: 2px; }
  .mpin span { display: none; }
  .map-card { width: 190px; }
  .map-card__meta { display: none; }
  .zimmap .city text { display: none; }
  .why { grid-template-columns: 1fr; }
  .why__media { grid-column: auto; aspect-ratio: 4 / 3; }
  .process__grid { grid-template-columns: 1fr; }
  .pcard { min-height: 300px; }
  .testi { grid-template-columns: repeat(3, 86%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter) 24px; }
  .testi::-webkit-scrollbar { display: none; }
  .tcard { scroll-snap-align: center; }
  .contact { grid-template-columns: 1fr; }
  .contact__media { grid-column: auto; }
  .field-row { grid-template-columns: 1fr; }
  .contact__form .btn { justify-self: stretch; justify-content: center; }
  .cta-card__obj--l { width: 70px; left: 2%; top: 4%; }
  .cta-card__obj--r { width: 70px; right: 2%; top: 4%; }
  .cta-card__obj--b { display: none; }
  .footer__top { grid-template-columns: 1fr; gap: 32px; }
  .footer__bottom { flex-direction: column; align-items: start; }
  .stat { padding: 24px 12px; flex-direction: column; align-items: start; gap: 8px; }
  .story__media .m2 { right: 4%; }
  .checks, .offer { grid-template-columns: 1fr; }
  .values, .sector-grid { grid-template-columns: 1fr; }
  .div-sec__obj { width: 90px; left: -6px; bottom: -26px; }
  .div-sec--flip .div-sec__obj { right: -6px; }
  .calc__results { grid-template-columns: 1fr 1fr 1fr; }
  .calc__results b { font-size: 1.1rem; }
  .cinfo { grid-template-columns: 1fr; margin-top: -40px; }
  .div-nav { top: calc(var(--header-h) + 4px); }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal], [data-split] .ln > span { opacity: 1 !important; transform: none !important; }
  .hero__slide img { transform: none !important; }
}

/* ---- refinements after first QA pass ---- */
.hero__title { font-size: clamp(2.9rem, 8vw, 7rem); }
.hero__obj { right: 3.5%; top: 7%; width: clamp(90px, 9vw, 140px); }
.about-split .h2 { font-size: clamp(1.9rem, 2.9vw, 2.6rem); }
.about-split__frame { position: absolute; inset: 0; border-radius: var(--r-lg); overflow: hidden; }
.about-split__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.about-split__media::before { z-index: 1; }
.map-head { max-width: 1000px; }
.map-head .h1 { font-size: clamp(2.1rem, 4.2vw, 3.7rem); }
.map-stage { margin-top: 72px; }
@media (max-width: 720px) { .map-stage { margin-top: 88px; } }
.footer__word span { font-size: clamp(3.6rem, 16.5vw, 15rem); font-stretch: 112%; }
.quote__map .map-stage { margin-top: 152px; }
.vcard > img[src*="generators"] { object-position: 50% 85%; }
.why__badge { background: linear-gradient(135deg, rgba(12,12,13,.66), rgba(12,12,13,.42)); border-color: rgba(255,255,255,.2); }
@media (max-width: 900px) { [data-parallax] { transform: none !important; } }

/* =============================================================== MOBILE TRANSLATION
   Every desktop component has a designed phone counterpart, not just a collapsed one.
   - copy: <span class="d"> desktop text / <span class="m"> phone text (shorter, one line)
   - headings: data-m swaps in a shorter version; each line is held to one line
   - hover: generated .is-hover twins fire as elements cross the screen's centre
   =============================================================== */
.m, br.m { display: none !important; }
@media (max-width: 720px) {
  .d { display: none !important; }
  span.m, br.m { display: inline !important; }

  /* one designed line = one rendered line */
  [data-split] .ln > span, .page-hero h1, .hero__title { white-space: nowrap; }
  .h2 { font-size: clamp(1.65rem, 8.2vw, 2.3rem); }
  .h1, .map-head .h1 { font-size: clamp(1.9rem, 9.4vw, 2.6rem); }
  .about-split .h2 { font-size: clamp(1.75rem, 8.6vw, 2.4rem); }
  .page-hero h1 { font-size: clamp(2.2rem, 11.4vw, 3.4rem); }
  .hero__title { font-size: clamp(2.4rem, 12.2vw, 3.6rem); }
  .eyebrow, .pill-badge, .hero__kicker, .hero__strip-label, .hero__chip, .btn, .chips span,
  .ep-card h3, .topic h3, .bcard h3, .bcard__tags span, .voice figcaption b, .voice figcaption span,
  .kpi__label, .checks li, .footer__tag, .footer__bottom p, .map-card__body > b,
  .quote__map-card b, .quote__map-card span, .calc__chart-head b, .calc__legend span, .tl h3, .vcard h3, .scard h3 { white-space: nowrap; }
  .ep-card h3, .topic h3 { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; }

  /* hero: kicker + chip shorten, buttons share one row */
  .hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .hero__actions .btn { justify-content: center; padding-left: 16px; padding-right: 8px; }
  .hero__actions .btn--glass { padding-right: 16px; }

  /* process: four columns → one swipe row; the gold track follows the swipe */
  .process__grid { display: grid; grid-template-columns: repeat(4, 80%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px; scroll-padding: 0 var(--gutter); }
  .process__grid::-webkit-scrollbar { display: none; }
  .pcard { scroll-snap-align: start; min-height: 340px; }

  /* values: four glass cards in a row → swipe row with the same glass panels */
  .values { grid-template-columns: repeat(4, 82%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px; scroll-padding: 0 var(--gutter); }
  .values::-webkit-scrollbar { display: none; }
  .vcard { scroll-snap-align: start; }

  /* timeline: horizontal rule with steps → vertical rail */
  .timeline { grid-template-columns: 1fr; row-gap: 24px; padding-left: 56px; }
  .timeline::before { left: 21px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .tl { padding-top: 0; }
  .tl::before { left: -45.5px; top: 3px; }

  /* map: pin labels → the active pin shows its label (the tour moves it) */
  .mpin.is-active span { display: block; position: absolute; top: calc(100% + 4px); }
  .map-card { width: 200px; }
  .map-card__loc > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .map-card__meta { display: flex; }
  .map-card__meta span:nth-child(n+3) { display: none; }

  /* specialists: peek row keeps the portrait rhythm */
  .voices__grid { grid-template-columns: repeat(3, 76%); }

  /* sectors: compact two-up icon grid like desktop's three-up */
  .sector-grid { grid-template-columns: 1fr; gap: 12px; }
  .scard { padding: 16px; }

  /* calculator + kV graph */
  .calc__results > div { min-width: 0; }
  .calc__legend { gap: 12px; }

  /* footer: links in two columns like desktop's grid */
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand, .footer__col:last-child { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
  .hero__actions { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hero__title { font-size: clamp(2.2rem, 10.6vw, 3.4rem); }
  .tcard figcaption > span:nth-child(2) { min-width: 0; flex: 1; }
  .tcard figcaption b, .tcard figcaption small { white-space: nowrap; }
  .tcard__stars { align-self: flex-start; margin-top: 3px; }
  .tcard__stars svg { width: 12px; height: 12px; }
}
@media (max-width: 720px) { .ep-grid > *, .topics > * { min-width: 0; } }
@media (min-width: 721px) { .why .h2 { font-size: clamp(1.9rem, 2.7vw, 2.6rem); } [data-split] .ln > span { white-space: nowrap; } }
main, .site-footer { overflow-x: clip; }
.tcard figcaption > span:nth-child(2) { min-width: 0; flex: 1; } .tcard figcaption b { white-space: nowrap; } @media (max-width: 1180px) { .tcard figcaption b .d { display: none !important; } .tcard figcaption b .m { display: inline !important; } }
@media (min-width: 721px) and (max-width: 1024px) { .testi { grid-template-columns: repeat(3, 46%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter) 24px; } .testi::-webkit-scrollbar { display: none; } .tcard { scroll-snap-align: start; } }

/* =============================================================== MAP (tx engine, Uvongo brand)
   official boundary + hex dot grid; routes searched across the grid from Harare HQ */
.zsec { background: var(--mist); position: relative; overflow: hidden; }
.zsec__g { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 32px clamp(32px, 5vw, 88px); align-items: center; }
.zsec__txt .h1 { margin-top: 16px; font-size: clamp(2rem, 2.95vw, 3rem); }
.zsec__lede { color: var(--muted); margin-top: 16px; max-width: 46ch; font-size: 1.04rem; }
.zstats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 32px; border-top: 1px solid var(--line-2); }
.zstats div { padding: 16px 16px 0; }
.zstats div:first-child { padding-left: 0; }
.zstats div + div { border-left: 1px solid var(--line-2); }
.zstats b { display: block; font: 400 clamp(2rem, 3.3vw, 3rem)/1.05 var(--f-display); letter-spacing: -.035em; font-variant-numeric: tabular-nums lining-nums; }
.zstats > div > span { font-size: .84rem; color: var(--muted); }
.zsec__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; margin-top: 32px; }

.zfig { position: relative; }
.zm { display: block; width: 100%; height: auto; overflow: visible; }
.zm-dots { fill: none; stroke: #CBC6B5; stroke-width: 6.4; stroke-linecap: round; }
.zm-outline { fill: none; stroke: var(--ink); stroke-width: 2.5px; stroke-linejoin: miter; stroke-miterlimit: 3; vector-effect: non-scaling-stroke; }
.zm-town { fill: var(--ink); transition: fill .4s, stroke .4s; }
.zm-town--route { cursor: pointer; stroke: var(--mist); stroke-width: 2.5; }
.zm-town.is-hot { fill: var(--y); stroke: var(--ink); stroke-width: 3; }
.zm-ping { fill: none; stroke: var(--amber); stroke-width: 2.2; transform-box: fill-box; transform-origin: center; animation: zping 3s var(--ease-out) infinite; }
.zm-ping:nth-of-type(3n) { animation-delay: -1s; } .zm-ping:nth-of-type(3n+1) { animation-delay: -2s; }
@keyframes zping { from { transform: scale(.35); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.zm-hq__dot { fill: var(--y); stroke: var(--ink); stroke-width: 3.5; }
.zm-hq__ring { fill: rgba(248, 217, 39, .22); stroke: var(--amber); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: zhq 3.2s var(--ease-out) infinite; }
.zm-hq__ring--2 { animation-delay: -1.6s; }
@keyframes zhq { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.zm-label { font: 500 15px var(--f-display); fill: var(--ink); paint-order: stroke; stroke: var(--mist); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.zm-label--hq { font-weight: 700; font-size: 17px; }
.zm-arc { fill: none; stroke: var(--ink); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.zm-srch { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .55; transition: opacity .7s; }
.zm-seen { fill: none; stroke: var(--y-600, #E0B800); stroke-width: 7; stroke-linecap: round; opacity: .75; transition: opacity .7s; }
.zm-srch.off { opacity: .16; } .zm-seen.off { opacity: .14; }
.zm-hop { fill: var(--y); stroke: var(--ink); stroke-width: 3; }

.ztick { position: absolute; left: 0; bottom: 4%; width: min(300px, 46%); display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 16px;
  background: rgba(255, 255, 255, .72); border: 1px solid #fff; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 44px -24px rgba(12, 12, 13, .35);
  opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .6s var(--ease-out); }
.ztick.is-on { opacity: 1; transform: none; }
.ztick img { width: 46px; height: 46px; object-fit: contain; flex: none; filter: drop-shadow(0 8px 10px rgba(12, 12, 13, .25)); }
.ztick div { min-width: 0; }
.ztick__k { display: block; font: 400 .66rem/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ztick b { display: block; font: 600 1rem/1.25 var(--f-display); margin: 3px 0 2px; white-space: nowrap; }
.ztick b i { font-style: normal; color: var(--amber); }
.ztick__j { display: block; font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Caveat hand notes: the human voice next to the engineering */
.hand { font: 600 1.6rem/1 var(--f-hand); color: var(--ink); letter-spacing: 0; }
.zfig__note { position: absolute; left: 80%; top: 4%; transform: rotate(-5deg); white-space: nowrap; pointer-events: none; }
.zfig__note svg { position: absolute; left: -38px; top: 70%; width: 54px; height: 36px; transform: scaleX(-1) rotate(-8deg); fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.zfig--card { background: #fff; border-radius: var(--r-lg); padding: 32px 24px 24px; box-shadow: var(--shadow-1); }
.zfig--card .zm-label { stroke: #fff; }
.zfig--card .zm-town--route { stroke: #fff; }

@media (max-width: 1024px) {
  .zsec__g { grid-template-columns: minmax(0, 1fr); }
  .zfig__note { left: auto; right: 2%; }
}
@media (max-width: 720px) {
  .zfig { display: flex; flex-direction: column; }
  .ztick { position: static; order: 2; width: auto; margin-top: 16px; }
  .zsec__txt { order: -1; }
  .zm-label { font-size: 27px; stroke-width: 6px; }
  .zm-label--hq { font-size: 30px; }
  .zm-label--minor { display: none; }
  .zstats > div > span { white-space: nowrap; font-size: .78rem; }
  .zfig__note { font-size: 1.25rem; top: 0; right: 0; }
  .zfig__note svg { width: 40px; left: -30px; }
  .zstats b { font-size: 1.9rem; }
  .zstats div { padding-inline: 12px; }
  .zstats div:first-child { padding-left: 0; }
  .zsec__cta .btn { width: 100%; justify-content: center; }
}

/* =============================================================== NOTCH (concave cut-out tab)
   one solid box painted in the surrounding colour (--nb) + two inverted rounded corners.
   corner squares are 1px larger than the radius and overlap the body, so no hairline seams. */
.notch { position: absolute; z-index: 7; background: var(--nb, #fff); --nr: 18px; }
.notch::before, .notch::after { content: ""; position: absolute; width: calc(var(--nr) + 1px); height: calc(var(--nr) + 1px); pointer-events: none; }
.notch--br { right: -1px; bottom: -1px; border-top-left-radius: var(--nr); }
.notch--br::before { right: 0; bottom: calc(100% - 1px); background: radial-gradient(circle at 0 0, transparent calc(var(--nr) - .5px), var(--nb, #fff) var(--nr)); }
.notch--br::after { right: calc(100% - 1px); bottom: 0; background: radial-gradient(circle at 0 0, transparent calc(var(--nr) - .5px), var(--nb, #fff) var(--nr)); }

.hero__dots, .hero__notch { display: none; }

/* =============================================================== INDUSTRY PATTERNS
   generated by _src/tools/patterns.py. One family: same hairline, same 720px scale,
   anchored to the top-right corner and faded radially so it dies out before the copy
   (always bottom-left). Colour comes from the surface's --pat token. */
.pat { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--pat, rgba(12, 12, 13, .14));
  /* three masks, intersected: the pattern tile, a radial fade from the corner, and a
     vertical cut that ends above where this surface's copy begins (--ve) */
  --fr: 300px; --vs: 10%; --ve: 44%;
  --fade: radial-gradient(circle var(--fr) at 100% 0%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 95%);
  --cut: linear-gradient(180deg, #000 var(--vs), transparent var(--ve));
  -webkit-mask-image: var(--pi), var(--fade), var(--cut); mask-image: var(--pi), var(--fade), var(--cut);
  -webkit-mask-size: 720px 720px, 100% 100%, 100% 100%; mask-size: 720px 720px, 100% 100%, 100% 100%;
  -webkit-mask-position: right top, 0 0, 0 0; mask-position: right top, 0 0, 0 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
  transform-origin: 100% 0; transition: transform 1.6s var(--ease), opacity .6s; }
.pat--solar { --pi: url(../img/patterns/solar.svg); }
.pat--electrical { --pi: url(../img/patterns/electrical.svg); }
.pat--power { --pi: url(../img/patterns/power.svg); }
.pat--construction { --pi: url(../img/patterns/construction.svg); }
.pat--agriculture { --pi: url(../img/patterns/agriculture.svg); }
.pat--medical { --pi: url(../img/patterns/medical.svg); }
.pat--laboratory { --pi: url(../img/patterns/laboratory.svg); }
.pat--tools { --pi: url(../img/patterns/tools.svg); }
.pat--wide { --fr: 640px; --vs: 20%; --ve: 70%; }
.bcard--big .pat { --fr: 620px; --vs: 26%; --ve: 56%; }
.bcard--wide .pat { --vs: 16%; --ve: 50%; }
.bcard:hover .pat, .bcard.is-hover .pat { transform: scale(1.05); }

/* tokens per surface: tuned so every pattern sits at the same perceived weight */
.bcard--ink { --pat: rgba(248, 217, 39, .42); }
.bcard--ink2 { --pat: rgba(248, 217, 39, .4); }
.bcard--yellow { --pat: rgba(12, 12, 13, .26); }
.bcard--amber { --pat: rgba(255, 255, 255, .55); }
.bcard--paper { --pat: rgba(168, 136, 0, .5); }
.bcard--graphite { --pat: rgba(248, 217, 39, .36); }
.bcard--white { --pat: rgba(12, 12, 13, .2); }
.bcard--olive { --pat: rgba(248, 217, 39, .42); }

/* patterns on the other surfaces (same family, same rules) */
.pat--banner { --pat: rgba(248, 217, 39, .34); --fr: 680px; --vs: 40%; --ve: 100%; }
.pat--section { --pat: rgba(248, 217, 39, .2); --fr: 820px; --vs: 30%; --ve: 70%; z-index: 0; }
.process { isolation: isolate; }
.pat--cta { --pat: rgba(12, 12, 13, .12); --fr: 520px; --vs: 30%; --ve: 75%; }
.pat--calc { --pat: rgba(248, 217, 39, .3); --fr: 420px; --vs: 12%; --ve: 38%; }
.banner__lines { display: none; }
@media (max-width: 720px) {
  .hero__title { font-size: clamp(2.2rem, 10.8vw, 3.3rem); }
  .section--lines::before { background: rgba(12, 12, 13, .08); -webkit-mask-image: url(../img/patterns/construction.svg), radial-gradient(circle 260px at 100% 0%, #000 0%, rgba(0, 0, 0, .4) 40%, transparent 90%); mask-image: url(../img/patterns/construction.svg), radial-gradient(circle 260px at 100% 0%, #000 0%, rgba(0, 0, 0, .4) 40%, transparent 90%); }
}
.ztick__k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zfig--card .ztick { width: min(330px, 62%); }

/* =============================================================== TYPE: small text bodies in Gellix
   Gellix ships Regular + Light only, so emphasis inside it borrows real cuts from
   Instrument Sans (600 for bold, the true italic for em) instead of faux styles. */
@font-face { font-family: "Gellix"; src: url(../fonts/Gellix-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Gellix"; src: url(../fonts/Gellix-Light.woff2) format("woff2"); font-weight: 300; font-display: swap; }
:root { --f-text: "Gellix", "Instrument Sans", system-ui, sans-serif; }
p, li, blockquote, figcaption small, .acc__body, .tl p, .scard p, .vcard p, .bcard p, .pcard p, .ep-card h3 span, .kpi__label, .zstats > div > span, .footer__brand p, .footer__col a, .footer__col p, .field input, .field textarea, .field select, .contact__list span { font-family: var(--f-text); }
p strong, li strong, blockquote strong, p b, li b { font-family: var(--f-display); font-weight: 600; color: inherit; }
p em, li em, blockquote em { font-family: var(--f-display); font-style: italic; }
.section--dark p strong, .banner p strong { color: #fff; }
p strong { color: var(--ink); }
.section--dark p strong, .hero p strong, .page-hero p strong { color: #fff; }

/* italic accent words in headings: the true Instrument Sans italic, a touch lighter */
.h1 em, .h2 em, .h3 em { font-style: italic; font-weight: 500; letter-spacing: -.035em; padding-right: .04em; }
.tone em { color: inherit; }

/* =============================================================== ICONS (Phosphor, fill-based)
   plain symbols take currentColor; duotone ones tint their back layer with --duo */

.ico, .scard__ico svg, .contact__ico svg { --duo: var(--y); --duo-o: .55; }
.section--dark .ico, .banner .ico { --duo: var(--y); --duo-o: .45; }
.offer li svg, .checks li svg { --duo: var(--y); --duo-o: .9; color: var(--ink); }
.section--dark .offer li svg, .section--dark .checks li svg { color: #fff; --duo-o: .5; }
.nav__link svg { width: 12px; height: 12px; }
@media (max-width: 720px) {
  .site-header .brand { gap: 8px; }
  .site-header .brand__word b { font-size: .86rem; letter-spacing: .03em; }
  .site-header .brand__word small { display: block; font-size: .5rem; letter-spacing: .2em; margin-top: 4px; }
  .site-header .logo-mark { width: 34px; height: 34px; }
}
p.div-sec__spec, p.div-sec__spec span { color: var(--ink); }
p.div-sec__spec { margin-bottom: 24px; }
@media (max-width: 720px) { .zfig--card .ztick { width: auto; } .zfig--card .ztick__k { font-size: .6rem; letter-spacing: .08em; } }

/* =============================================================== HERO WORD TEXTURES
   each word is filled with the material of the trade it names:
   POWER  a monocrystalline PV module catching a moving glint of sun
   BUILD  a draughtsman's outline, like a structure before it is clad
   EQUIP  surgical gauze, the open linen weave of a dressing
   GROW   crop rows seen from the air, sunlit at the top                              */
.hero__word .hw { display: inline-block; color: transparent; -webkit-background-clip: text; background-clip: text; padding-right: .02em; }
.hero__word.is-on { color: inherit; text-shadow: none; }
.hero__word { opacity: .8; transition: opacity .8s var(--ease); }
.hero__word.is-on { opacity: 1; }
.hw--power {
  background-image:
    linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .9) 50%, transparent 58%),
    repeating-linear-gradient(90deg, rgba(12, 12, 13, .42) 0 1px, transparent 1px .17em),
    repeating-linear-gradient(0deg, rgba(12, 12, 13, .42) 0 1px, transparent 1px .17em),
    linear-gradient(180deg, #FFE866 0%, #F8D927 50%, #D9AE00 100%);
  background-size: 260% 100%, auto, auto, auto;
  background-position: 160% 0, 0 0, 0 0, 0 0;
  animation: glint 5s cubic-bezier(.5, 0, .3, 1) infinite 1.4s;
}
@keyframes glint { 0% { background-position: 160% 0, 0 0, 0 0, 0 0; } 55%, 100% { background-position: -70% 0, 0 0, 0 0, 0 0; } }
.hw--build { -webkit-text-stroke: clamp(1.1px, .017em, 2.2px) #fff; transition: -webkit-text-stroke-color .8s var(--ease); }
.hero__word.is-on .hw--build { -webkit-text-stroke-color: var(--y); }
.hw--equip {
  background-color: #F6F3EC;
  background-image:
    repeating-linear-gradient(90deg, rgba(70, 58, 44, .34) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(70, 58, 44, .34) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .95) 1px 2px, transparent 2px 4px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .95) 1px 2px, transparent 2px 4px);
  background-size: 4px 4px;
}
.hw--grow {
  background-image:
    linear-gradient(180deg, rgba(248, 217, 39, .75) 0%, rgba(248, 217, 39, 0) 45%),
    repeating-linear-gradient(-58deg, #A9D45E 0 .055em, #5E9A32 .055em .11em);
}
@media (prefers-reduced-motion: reduce) { .hw--power { animation: none; background-position: -70% 0, 0 0, 0 0, 0 0; } }

/* Caveat accent: a handwritten word inside a heading, sized up to sit level with the bold */
em.cv { font-family: var(--f-hand); font-style: normal; font-weight: 700; font-size: 1.24em; line-height: .7; letter-spacing: 0; color: var(--y-700); padding: 0 .04em; text-transform: none; }
.section--dark em.cv, .banner em.cv, .tone-y em.cv { color: var(--y); }
[data-split] .ln { padding-bottom: .06em; }

/* =============================================================== PHONE HERO (lamcent pattern)
   one rounded card per screen: the nav floats over the photo, the photo dissolves into the card
   and a blurred copy of it tints the lower half, so each slide carries its own colour.     */
.hero__ambient, .hero__stat { display: none; }
@media (max-width: 720px) {
  .site-header { position: absolute; top: 16px; left: 8px; right: 8px; height: 60px; background: transparent !important; box-shadow: none !important; border: 0 !important; -webkit-backdrop-filter: none; backdrop-filter: none; z-index: 100; }
  .site-header.is-hidden { transform: none; }
  .site-header .site-header__row { padding: 0 8px 0 16px; gap: 12px; }
  .site-header:not(.is-fixed) .brand__word b { color: #fff; }
  .site-header:not(.is-fixed) .brand__word b i { color: var(--y); }
  .site-header:not(.is-fixed) .brand__word small { color: rgba(255, 255, 255, .62); }
  .site-header:not(.is-fixed) .lm-up { stroke: var(--y); }
  .site-header:not(.is-fixed) .lm-bolt { fill: #fff; stroke: var(--ink); }
  .site-header .hdr-phone { display: none !important; }
  .site-header .site-header__cta { gap: 4px; margin-left: auto; }
  .site-header .site-header__cta > .btn { display: inline-flex !important; height: 40px; padding: 0 16px; font-size: .84rem; background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .burger { width: 40px; height: 40px; background: transparent !important; }
  .burger span { background: #fff !important; }
  .site-header.is-fixed { position: fixed; top: 8px; height: 58px; background: rgba(255, 255, 255, .9) !important; -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-radius: 999px; box-shadow: 0 18px 40px -22px rgba(12, 12, 13, .45) !important; animation: headerIn .5s var(--ease) both; }
  .site-header.is-fixed .site-header__cta > .btn { background: var(--ink); border-color: var(--ink); }
  .site-header.is-fixed .burger span { background: var(--ink) !important; }
  body.menu-open .site-header { background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.menu-open .site-header .burger span { background: #fff !important; }
  body.menu-open .site-header .site-header__cta > .btn { display: none !important; }

  .hero { padding: 8px 8px 0; }
  .hero > .container { padding: 0; }
  .hero__frame { margin: 0; border-radius: 12px; height: auto; min-height: calc(100svh - 16px); max-height: none; justify-content: flex-end; background: #0C0C0D; }
  .hero__ambient { display: block; position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent 20%, #000 55%); mask-image: linear-gradient(180deg, transparent 20%, #000 55%); }
  .hero__ambient img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); filter: blur(42px) saturate(1.7); opacity: 0; transition: opacity 1.4s var(--ease); }
  .hero__ambient img.is-active { opacity: .6; }
  .hero__slides { position: relative; inset: auto; flex: 1 1 0; min-height: 150px; margin-bottom: -56px; z-index: 1; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0, 0, 0, .7) 70%, rgba(0, 0, 0, .3) 85%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0, 0, 0, .7) 70%, rgba(0, 0, 0, .3) 85%, transparent 100%); }
  .hero__shade { background: linear-gradient(180deg, rgba(12, 12, 13, .5) 0%, rgba(12, 12, 13, 0) 18%) !important; }
  .hero__shade::after { display: none; }
  .hero__content { position: relative; z-index: 5; text-align: left; padding: 0 16px; margin: 0; max-width: none; }
  .hero__kicker { display: none; }
  .hero__title { margin: 0; font-size: clamp(2.3rem, 11.2vw, 3.3rem); line-height: .94; }
  .hero__lede { margin: 12px 0 0; max-width: none; font-size: .92rem; line-height: 1.5; color: rgba(255, 255, 255, .84); }
  .hero__actions { display: flex; gap: 12px; margin-top: 16px; justify-content: stretch; }
  .hero__actions .btn { flex: 1; justify-content: center; height: 50px; padding: 0 16px; }
  .hero__actions .btn--glass { display: inline-flex; }
  .hero__actions .btn--light { --bg: #fff; --fg: var(--ink); border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hero__actions .btn--light .btn__ico { display: none; }
  .hero__meta { display: block; position: relative; inset: auto; bottom: auto; z-index: 5; padding: 16px 16px 0; }
  .hero__progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .hero__progress button { width: auto; display: flex; flex-direction: column-reverse; gap: 8px; font-size: .62rem; }
  .hero__stat { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 16px; position: relative; z-index: 5; margin: 16px 16px 16px; padding: 12px 16px; border-radius: 16px; background: linear-gradient(140deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
  .hero__stat b { font: 700 1.7rem/1 var(--f-display); letter-spacing: -.03em; color: #fff; }
  .hero__stat span { font: 400 .76rem/1.35 var(--f-text); color: rgba(255, 255, 255, .78); }
  .hero__dots, .hero__notch { display: none !important; }
  .hero__strip { margin-top: 12px; }

  /* inner pages: photo on top, dissolving into the ink card that carries the copy */
  .page-hero { padding: 8px 8px 0; }
  .page-hero__frame { margin: 0; border-radius: 12px; min-height: 88svh; display: flex; flex-direction: column; justify-content: flex-end; background: #0C0C0D; }
  .page-hero__frame > img:first-child { position: relative; inset: auto; flex: 1 1 0; min-height: 240px; height: auto; margin-bottom: -80px; z-index: 1; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0, 0, 0, .6) 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0, 0, 0, .6) 72%, transparent 100%); }
  .page-hero__frame .hero__ambient { display: block; }
  .page-hero__frame::before { z-index: 2; background: linear-gradient(180deg, rgba(12, 12, 13, .5) 0%, rgba(12, 12, 13, 0) 18%); }
  .page-hero__content { position: relative; z-index: 3; padding: 0 16px 32px; }
}
@media (max-width: 720px) { .hero__progress button > span { display: block; } .hero__progress button > span > .m { display: inline !important; } }

/* =============================================================== WORDMARK
   a nameplate lockup: UVONGO set heavy and tight, a yellow rule the exact width of the word,
   and PROJECTS tracked out letter by letter so it ends flush on both edges. The two lines
   together stand the height of the mark, so mark and word share one top and one bottom. */
.brand { gap: 12px; }
.brand__word { display: inline-grid; justify-items: stretch; line-height: 1; }
.brand__word b { display: block; font: 800 23px/.74 var(--f-display); font-stretch: 112%; letter-spacing: -.012em; color: var(--ink); padding-top: 2px; }
.brand__rule { display: block; height: 2px; margin: 8px 0 4px; background: var(--y); border-radius: 2px; }
.brand__word small { display: flex !important; justify-content: space-between; margin: 0; font: 700 9px/.74 var(--f-display); letter-spacing: 0; text-transform: uppercase; color: var(--ink); opacity: .72; }
.brand__word small span { display: block; }
.brand--light .brand__word b, body.menu-open .site-header .brand__word b { color: #fff; }
.brand--light .brand__word small, body.menu-open .site-header .brand__word small { color: var(--y); opacity: 1; }
@media (max-width: 720px) {
  .site-header .brand__word b { font-size: 20px; letter-spacing: -.012em; }
  .site-header .brand__word small { font-size: 7px; margin: 0; }
  .site-header .brand__rule { margin: 4px 0 4px; }
  .site-header:not(.is-fixed) .brand__word small { color: var(--y); opacity: 1; }
  .site-header .logo-mark { width: 36px; height: 36px; }
}

/* =============================================================== ACTIVE HERO WORD: dotted rule
   a row of yellow dots instead of a solid underline; it still draws in from the left */
.hero__word::after {
  height: .075em; bottom: -.04em; right: .2em;
  background: radial-gradient(circle closest-side, var(--y) 92%, transparent 100%) 0 50% / .15em .075em repeat-x;
}

/* =============================================================== GOVERNANCE
   one scale (4/8), one axis (the container edge), one repetition (same parts behave the same)
   space  4 8 12 16 24 32 40 48 64 80 96 112
   radius 4 micro · 12 small (inputs, icon tiles) · 16 media · 24 card · 32 frame · pill
   icons  14 inline · 16 buttons · 20 chrome · 24 feature                                    */
:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;
  --gutter: clamp(24px, 3.4vw, 48px);
  --btn-h: 48px; --btn-h-sm: 40px;
}
/* one button height, everywhere; outline variants keep the same box */
.btn { height: var(--btn-h); }
.btn--sm { height: var(--btn-h-sm); padding: 0 var(--s4); }
/* vertical rhythm */
.eyebrow { margin-bottom: var(--s6); }
.h1 + p, .h2 + p, .section-head > p { margin-top: var(--s6); }
.section-head { margin-bottom: clamp(48px, 5vw, 64px); row-gap: var(--s6); }
.section-head > .h1 + p, .section-head > .h2 + p { margin-top: 0; }
.head-row { margin-bottom: var(--s8); }
.h3 + p { margin-top: var(--s3); }
/* phone: every edge lands on the 24px gutter; the hero card is 8 from the screen, its copy 16 inside */
@media (max-width: 720px) {
  .hero__content, .hero__meta { padding-left: var(--s4); padding-right: var(--s4); }
  .hero__meta { padding-top: var(--s6); }
  .hero__stat { margin: var(--s4); padding: var(--s3) var(--s4); }
  .hero__actions { gap: var(--s3); margin-top: var(--s6); }
  .hero__actions .btn { height: var(--btn-h); }
  .hero__lede { margin-top: var(--s3); }
  .page-hero__content { padding: 0 var(--s4) var(--s8); }
  .site-header { top: var(--s4); }
  .site-header .site-header__row { padding: 0 var(--s1) 0 var(--s4); }
  .hero__frame, .page-hero__frame { border-radius: 16px; }
  .site-header .site-header__cta > .btn { height: var(--btn-h-sm); }
}
/* grey second line: the statement in ink, its answer in a quieter tone */
.section--dark .tone, .banner .tone, .page-hero .tone { color: rgba(255, 255, 255, .42); }
.tone em.cv { color: var(--y-700); }
.section--dark .tone em.cv, .banner .tone em.cv { color: var(--y); }
/* sharper hero corners on every width: the same 16px the phone hero uses */
.hero__frame, .page-hero__frame { border-radius: 16px; }
/* dotted rule: small round dots, a whole number of them (round), seated above the line box edge */
.hero__word::after {
  height: .07em; bottom: .05em; left: 0; right: .2em;
  background: radial-gradient(circle closest-side, var(--y) 88%, transparent 100%) 0 50% / .14em .07em;
  background-repeat: round no-repeat;
}
/* room under the baseline for the dots, without moving the lines apart */
.hero__line { padding-bottom: .14em; margin-bottom: -.12em; }
.hero__word::after { bottom: -.075em; }
@media (max-width: 720px) {
  .hero__word::after { height: 4px; bottom: -3px; background-size: 9px 4px; background-image: radial-gradient(circle 2px at 50% 50%, var(--y) 1.6px, transparent 2px); }
}

/* =============================================================== SYMMETRY: balanced columns
   side-by-side columns share one top line and one bottom line. The tallest column sets the
   row; photos stretch to it, and text columns pin their last block to the bottom edge.     */
@media (min-width: 721px) {
  /* home / About: copy | photo | figures */
  .about-split { align-items: stretch; }
  .about-split__l, .about-split__r { display: flex; flex-direction: column; }
  .about-split__l .sectors, .about-split__r .obj-stack { margin-top: auto; }
  .about-split__l .btn { align-self: flex-start; }
  .about-split__l .sectors { padding-top: var(--s8); }
  .about-split__media { aspect-ratio: auto; min-height: 440px; }
  .about-split .kpis { margin: var(--s8) 0; }

  /* home / contact: details | photo | form */
  .contact { align-items: stretch; }
  .contact__info { display: flex; flex-direction: column; }
  .contact__list { margin-top: auto; }
  .contact__media { min-height: 0; }
  .contact__form { grid-template-rows: auto auto auto auto 1fr auto; align-content: stretch; }
  .contact__form .field:has(textarea) { display: flex; }
  .contact__form textarea { height: 100%; min-height: 112px; }
  .contact__form .form-note:empty { display: none; }

  /* contact page: form card | map card + call card, both ending on one line */
  .quote { align-items: stretch; }
  .quote__map { position: static; display: flex; flex-direction: column; }
  .quote__map .zfig--card { flex: 1; display: flex; flex-direction: column; justify-content: center; }

  /* about / Who We Are: the photo stands exactly as tall as the copy beside it */
  .story { align-items: stretch; }
  .story__media { position: relative; min-height: 480px; }
  .story__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-lg); }
}

/* every partner band breathes the same above and below */
.section--cta { padding-top: clamp(64px, 8vw, 112px); }

/* =============================================================== ABOUT: facts + values
   a 2 x 2 fact grid on hairlines replaces the check list; value cards drop the glass panel
   for a plain scrim, an index top-left and copy anchored bottom-left (titles share a line) */
.story__media img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: var(--r-lg); }
.facts { display: grid; grid-template-columns: 1fr 1fr; margin: var(--s8) 0 0; border-top: 1px solid var(--line); }
.facts > div { padding: var(--s6) var(--s4) var(--s6) 0; border-bottom: 1px solid var(--line); }
.facts > div:nth-child(even) { padding-left: var(--s6); border-left: 1px solid var(--line); }
.facts dt { font: 700 clamp(1.4rem, 2vw, 1.75rem)/1 var(--f-display); letter-spacing: -.03em; color: var(--ink); }
.facts dd { margin: var(--s2) 0 0; font: 400 .86rem/1.4 var(--f-text); color: var(--muted); }

.vcard { padding: var(--s6); justify-content: flex-end; }
.vcard::before { background: linear-gradient(180deg, rgba(12, 12, 13, .05) 0%, rgba(12, 12, 13, .15) 40%, rgba(12, 12, 13, .88) 100%); }
.vcard__body { display: flex; flex-direction: column; }
.vcard__i { position: absolute; top: var(--s6); left: var(--s6); font: 500 .72rem/1 var(--f-mono); letter-spacing: .14em; color: var(--y); }
.vcard h3 { color: #fff; }
.vcard p { min-height: calc(3 * 1.45em); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* =============================================================== HEROES: one radius, clipped hard
   clip-path rounds every layer (zooming photo, blurred ambient, scrim) to the same corner,
   so nothing can show square behind the rounded picture on any device                       */
.hero__frame, .page-hero__frame { border-radius: 12px; clip-path: inset(0 round 12px); }
.page-hero__frame > img:first-child, .page-hero__frame::before, .hero__shade, .hero__ambient { border-radius: inherit; }

/* =============================================================== PHONE: two-up where items are short
   short, repeating items sit two to a row so the column never runs as a long single file  */
@media (max-width: 720px) {
  /* sectors: equal cells with real horizontal air */
  .sectors__list { grid-template-columns: 1fr 1fr; column-gap: var(--s6); row-gap: var(--s4); }
  /* figures: established / divisions / kV as a 2 x 2 with the trust note across the bottom */
  .about-split .kpis { grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s6); margin: var(--s8) 0 var(--s6); }
  .about-split .kpis > div:first-child { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
  .about-split .kpis > div { align-content: start; }
  .about-split .obj-stack { padding-top: var(--s6); border-top: 1px solid var(--line); }

  /* divisions bento: the four small cards pair up */
  .bento { grid-template-columns: 1fr 1fr; grid-template-areas: "c c" "a b" "d d" "e f" "g g" "h h"; gap: var(--s3); }
  .bcard--a, .bcard--b, .bcard--e, .bcard--f { min-height: 176px; padding: var(--s4); }
  .bcard--a p, .bcard--b p, .bcard--e p, .bcard--f p, .bcard--a .bcard__stats, .bcard--b .bcard__stats, .bcard--e .bcard__stats, .bcard--f .bcard__stats { display: none; }
  .bcard--a h3, .bcard--b h3, .bcard--e h3, .bcard--f h3 { font-size: 1.3rem; white-space: nowrap; }
  .bcard--a .bcard__eyebrow, .bcard--b .bcard__eyebrow, .bcard--e .bcard__eyebrow, .bcard--f .bcard__eyebrow { left: var(--s4); top: var(--s4); font-size: .7rem; }
  .bcard--a .bcard__seal, .bcard--b .bcard__seal, .bcard--e .bcard__seal, .bcard--f .bcard__seal { width: 44px; height: 44px; right: var(--s3); top: var(--s3); }
  .bcard--a .bcard__seal .ico, .bcard--b .bcard__seal .ico, .bcard--e .bcard__seal .ico, .bcard--f .bcard__seal .ico { width: 16px; height: 16px; }

  /* about: who we serve, six sectors as a 2 x 3 of icon + name */
  .sector-grid { grid-template-columns: 1fr 1fr; gap: var(--s3); }
  .sector-grid .scard { flex-direction: column; gap: var(--s3); padding: var(--s4); }
  .sector-grid .scard p { display: none; }
  .sector-grid .scard h3 { font-size: 1rem; white-space: normal; line-height: 1.2; }

  /* facts stay 2 x 2, tighter */
  .facts > div { padding: var(--s4) var(--s3) var(--s4) 0; }
  .facts > div:nth-child(even) { padding-left: var(--s4); }
  .facts dt { font-size: 1.35rem; }
  .facts dd { font-size: .8rem; }
  .story__media img { aspect-ratio: 4 / 3.2; }

  .section--cta { padding-top: 64px; }
}
/* text is set, not poured: balanced headings, no single-word last lines in copy */
h1, h2, h3, .h1, .h2, .h3 { text-wrap: balance; }
p, li, dd, blockquote { text-wrap: pretty; }
/* home contact: details under the intro, working hours anchor the column's bottom edge */
.contact__hours { margin-top: var(--s6); padding: var(--s4) var(--s6); border-radius: 16px; background: var(--mist); border: 1px solid var(--line); }
.contact__hours > b { display: block; font: 500 .7rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s3); }
.contact__hours dl { margin: 0; display: grid; gap: var(--s2); }
.contact__hours dl > div { display: flex; justify-content: space-between; gap: var(--s4); font: 400 .88rem/1.3 var(--f-text); }
.contact__hours dt { color: var(--muted); }
.contact__hours dd { margin: 0; font-weight: 600; font-family: var(--f-display); color: var(--ink); }
@media (min-width: 721px) {
  .contact__list { margin-top: 0; }
  .contact__hours { margin-top: auto; }
}
@media (max-width: 720px) {
  /* figures: three equal cells on hairlines, one row */
  .about-split .kpis { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .about-split .kpis > div, .about-split .kpis > div:first-child { display: flex; flex-direction: column; justify-content: flex-start; padding: 0 var(--s3); border-left: 1px solid var(--line); }
  .about-split .kpis > div:first-child { flex-direction: column-reverse; justify-content: flex-end; padding-left: 0; border-left: 0; }
  .about-split .kpi__num { font-size: clamp(1.6rem, 8vw, 2rem); }
  .about-split .kpi__label { font-size: .74rem; line-height: 1.3; margin-top: var(--s1); }

  /* big division cards: the object takes the top-right, the copy keeps the bottom clear */
  .bcard--c, .bcard--d, .bcard--g, .bcard--h { padding-top: 168px; }
  .bcard__obj, .bcard__obj--sm { width: 132px; max-width: none; top: 56px; bottom: auto; right: 64px; }
}
@media (max-width: 720px) { .bcard__obj, .bcard__obj--sm { height: 104px; width: 132px; object-fit: contain; object-position: 50% 50%; } }
@media (max-width: 720px) { .sector-grid .scard h3 { min-height: 2.4em; } }