/* ================================================================
   AIC HOME — motion-led, minimal words, no divider lines.
   Dark "void" stages with an amber signal, alternating with light
   stages. Everything that moves is driven by scroll (js/home.js).
================================================================ */
:root {
  --void: #0B0B0C;  --ink: #111112;  --ink-2: #1C1C1E;
  --amber: #C7A66A;  --amber-hi: #E3C98F;  --amber-ink: #7A5F2C;
  --ice: #E9E2D0;  --paper: #F2F0E9;  --white: #fff;
  --text: #111112;  --muted: #66625A;
  --on-dark: rgba(255,255,255,.88);  --on-dark-2: rgba(255,255,255,.62);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nav-h: 64px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-family: var(--font); font-size: 16px; scroll-behavior: smooth; scroll-padding-top: 0; -webkit-font-smoothing: antialiased; background: var(--void); }
body { font-family: var(--font); background: var(--void); color: var(--on-dark); line-height: 1.5; overflow-x: clip; }
img, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; background: var(--amber); color: var(--ink); padding: 12px 20px; font-weight: 600; z-index: 5000; border-radius: 999px; }
.skip:focus { top: 14px; }
.wrap { width: min(1240px, 100% - 64px); margin-inline: auto; }

/* grain: a fine texture over dark stages */
.grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .09; mix-blend-mode: overlay; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .8 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* text texture: a moving sheen inside the letters */
.tx { background: linear-gradient(100deg, #fff 0%, #fff 30%, #E8D3A0 44%, #C7A66A 50%, #BDBAB2 58%, #fff 72%, #fff 100%); background-size: 260% 100%; background-position: 0% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: sheen 9s ease-in-out infinite alternate; padding-bottom: .16em; margin-bottom: -.16em; }
@keyframes sheen { to { background-position: 100% 0; } }
.tx-ink { background: linear-gradient(100deg, #111112 0%, #111112 40%, #8A6D35 55%, #111112 70%, #111112 100%); background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: sheen 11s ease-in-out infinite alternate; padding-bottom: .16em; margin-bottom: -.16em; }

/* reveal */
.js .rv { opacity: 0; transform: translateY(34px); filter: blur(8px); transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js .rv.in { opacity: 1; transform: none; filter: none; }

/* buttons: pills */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 30px; border-radius: 999px; border: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; cursor: pointer; white-space: nowrap;
  transition: transform .35s var(--ease), background-color .25s, box-shadow .35s, color .25s; will-change: transform; }
.btn-amber { background: var(--amber); color: var(--ink); box-shadow: 0 0 0 0 rgba(199,166,106,.0); }
.btn-amber:hover { background: var(--amber-hi); box-shadow: 0 10px 40px -6px rgba(199,166,106,.55); transform: translateY(-2px); }
.btn-ghost { background: rgba(255,255,255,.1); color: #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.btn-ghost:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #262628; transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* cursor light (desktop) */
.glow { position: fixed; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; pointer-events: none; z-index: 40; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(199,166,106,.16), rgba(199,166,106,0)); transition: opacity .6s; will-change: transform; }
.glow.on { opacity: 1; }

/* ---------- nav ---------- */
#navbar { position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 1000; transition: background-color .4s, backdrop-filter .4s; }
#navbar.scrolled { background: rgba(10,10,10,.62); backdrop-filter: saturate(160%) blur(22px); -webkit-backdrop-filter: saturate(160%) blur(22px); }
.nav-inner { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; width: min(1240px, 100% - 48px); margin-inline: auto; }
.nav-logo { display: flex; align-items: center; gap: 14px; }
.nav-logo-icon { height: 22px; width: auto; }
.nav-logo-text { display: block; line-height: 1.15; }
.nav-logo-primary { display: block; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; }
.nav-logo-sub { display: block; color: var(--amber); font-size: 9.5px; font-weight: 600; letter-spacing: 4.4px; text-transform: uppercase; margin-top: 2px; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-link { font-size: 14px; color: var(--on-dark-2); transition: color .25s; }
.nav-link:hover, .nav-link.active { color: #fff; }
.nav-cta { min-height: 38px; padding: 0 18px; font-size: 14px; }
.hamburger { display: none; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
.hamburger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform .35s var(--ease), opacity .25s; }
.hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- 1 · hero (pinned, canvas) ---------- */
#hero { position: relative; height: 270vh; background: var(--void); }
.hero-stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
#heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-glow { position: absolute; left: 50%; top: 31%; width: min(92vw, 980px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(199,166,106,.34), rgba(199,166,106,.08) 55%, rgba(199,166,106,0) 72%); }
.hero-vig { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 38%, rgba(10,10,10,0) 45%, rgba(10,10,10,.9) 100%), linear-gradient(to top, rgba(10,10,10,.92), rgba(10,10,10,0) 38%); }
.st { position: absolute; left: 0; right: 0; bottom: 11vh; text-align: center; padding: 0 24px; opacity: 0; will-change: opacity, transform, filter; pointer-events: none; }
.st-h { font-size: clamp(30px, 4.6vw, 66px); font-weight: 700; letter-spacing: -.045em; line-height: 1.02; color: #fff; }
.st-a, .st-b { bottom: 17vh; }
.st-c { pointer-events: auto; bottom: 6vh; }
.st-brand { font-size: 12px; font-weight: 600; letter-spacing: 5px; text-transform: uppercase; color: var(--amber); margin-bottom: 14px; }
.st-sub { font-size: clamp(15px, 1.25vw, 18px); color: var(--on-dark-2); margin: 14px auto 0; max-width: 34em; }
.st-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.cue { position: absolute; left: 50%; bottom: 3.4vh; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--on-dark-2); opacity: 0; transition: opacity .6s; pointer-events: none; }
.cue i { display: block; width: 22px; height: 36px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); position: relative; }
.cue i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: wheel 1.8s var(--ease) infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- 2 · statement (words rise in, quickly) ---------- */
#about { position: relative; background: var(--void); padding: 20vh 0 18vh; overflow: hidden; }
.stmt { font-size: clamp(26px, 3.5vw, 52px); line-height: 1.12; font-weight: 700; letter-spacing: -.04em; max-width: 21em; margin-inline: auto; text-align: center; padding: 0 24px; color: #fff; position: relative; z-index: 1; }
.stmt .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .14em; margin-bottom: -.14em; }
.stmt .w i { display: inline-block; font-style: normal; transform: translateY(115%) rotate(4deg); transform-origin: 0 100%; opacity: 0;
  transition: transform .9s var(--ease), opacity .5s, color .9s; transition-delay: calc(var(--i) * 38ms); }
.stmt.in .w i { transform: none; opacity: 1; }
.stmt .w.amber i { transition-delay: calc(var(--i) * 38ms), calc(var(--i) * 38ms), 1.1s; }
.stmt.in .w.amber i { color: var(--amber); }
.stmt .sent { display: block; text-wrap: balance; }
.stmt .sent + .sent { margin-top: .5em; }

/* ---------- 3 · numbers ---------- */
#proof { position: relative; padding: 14vh 0 16vh; background: linear-gradient(180deg, var(--void), var(--ink-2) 55%, var(--void)); overflow: hidden; }
.nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; position: relative; z-index: 1; }
.num b { display: block; font-size: clamp(44px, 6.6vw, 96px); font-weight: 700; letter-spacing: -.055em; line-height: 1; font-variant-numeric: tabular-nums; }
.num span { display: block; margin-top: 8px; font-size: clamp(14px, 1.15vw, 16px); color: var(--on-dark-2); }
.award { text-align: center; margin-top: 9vh; font-size: clamp(17px, 1.8vw, 24px); font-weight: 600; letter-spacing: -.02em; color: var(--on-dark); position: relative; z-index: 1; }
.award em { font-style: normal; color: var(--amber); }

/* ---------- 4 · clients (five rows, all forty visible, always flowing) ---------- */
#clients { position: relative; background: var(--paper); color: var(--ink); padding: 13vh 0 12vh; overflow: hidden; }
.sec-title { font-size: clamp(30px, 4vw, 56px); font-weight: 700; letter-spacing: -.045em; line-height: 1.04; text-align: center; padding: 0 24px; }
.sec-sub { text-align: center; margin: 14px auto 0; padding: 0 24px; color: var(--muted); font-size: clamp(15px, 1.25vw, 18px); max-width: 36em; }
.mq { margin-top: 7vh; display: grid; gap: 12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.mq-row { display: flex; width: max-content; will-change: transform; gap: 12px; padding-right: 12px; }
.mq-row li { flex: none; font-size: clamp(13px, 1.08vw, 16px); font-weight: 600; letter-spacing: -.015em; line-height: 1; color: var(--ink); background: #fff; padding: 14px 24px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(10,10,10,.05), 0 10px 26px -18px rgba(10,10,10,.4); transition: background .3s, color .3s, transform .3s var(--ease); cursor: default; }
.mq-row li:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
.mq-row.alt li { background: rgba(255,255,255,.62); }

/* ---------- 5 · process (pinned, one word at a time) ---------- */
.pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#process { position: relative; height: 320vh; background: var(--void); }
.proc { width: min(1240px, 100% - 64px); margin-inline: auto; display: grid; grid-template-columns: 1.15fr .85fr; gap: 6vw; align-items: center; position: relative; z-index: 1; }
.pwords { display: grid; }
.pstep { grid-area: 1 / 1; opacity: 0; transform: translateY(40px); filter: blur(14px); transition: opacity .7s var(--ease), transform .8s var(--ease), filter .7s var(--ease); pointer-events: none; }
.pstep.on { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.pstep.past { transform: translateY(-40px); }
.pstep h3 { font-size: clamp(48px, 8.2vw, 124px); font-weight: 700; letter-spacing: -.055em; line-height: .98; }
.pstep p { margin-top: 16px; font-size: clamp(17px, 1.7vw, 24px); color: var(--on-dark-2); letter-spacing: -.02em; }
.ring { position: relative; width: min(100%, 420px); aspect-ratio: 1; margin-inline: auto; }
.ring svg { width: 100%; height: 100%; overflow: visible; }
.ring-base { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 2; }
.ring-arc { fill: none; stroke: url(#arcg); stroke-width: 3; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 100px 100px; }
.ring-node { fill: #1C1C1E; stroke: rgba(255,255,255,.25); stroke-width: 2; transition: fill .4s, stroke .4s, r .4s; }
.ring-node.on { fill: var(--amber); stroke: var(--amber); }
.ring-head { fill: #fff; filter: drop-shadow(0 0 8px #C7A66A) drop-shadow(0 0 22px #C7A66A); }
.ring-n { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(40px, 5.6vw, 72px); font-weight: 700; letter-spacing: -.055em; color: #fff; font-variant-numeric: tabular-nums; }

/* ---------- 6 · programmes (three columns, all visible, each card opens its page) ---------- */
#programmes { position: relative; background: #E7E3D8; color: var(--ink); padding: 14vh 0 15vh; }
.prog-head { text-align: center; }
.pcols { margin-top: 7vh; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.pcol { display: flex; flex-direction: column; gap: 10px; }
.pcol-head { min-height: 178px; position: relative; overflow: hidden; border-radius: 26px; background: var(--ink); color: #fff; padding: 26px 26px 24px; }
.pcol-head::before { content: ""; position: absolute; inset: -40% -30% auto auto; width: 90%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(199,166,106,.5), rgba(199,166,106,0)); }
.pcol-head h3 { position: relative; font-size: clamp(20px, 1.9vw, 27px); font-weight: 700; letter-spacing: -.035em; line-height: 1.08; }
.pcol-head p { position: relative; margin-top: 8px; font-size: 14.5px; color: var(--on-dark-2); }
.pcol-count { position: relative; display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--amber); background: rgba(199,166,106,.14); padding: 6px 13px; border-radius: 999px; }
.pcard { flex: 1 1 auto; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "code title go" "code tag go" "code days go"; column-gap: 16px; row-gap: 4px; align-items: center; background: #fff; border-radius: 22px; padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(10,10,10,.05), 0 14px 34px -24px rgba(10,10,10,.35); transition: transform .45s var(--ease), box-shadow .45s, background .3s; }
.pcard:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(10,10,10,.05), 0 24px 50px -22px rgba(10,10,10,.45); }
.pcode { grid-area: code; font-size: clamp(30px, 2.6vw, 38px); font-weight: 800; letter-spacing: -.06em; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--ink); min-width: 1.7em; transition: color .35s, -webkit-text-stroke-color .35s; }
.pcard:hover .pcode { color: var(--amber); -webkit-text-stroke-color: var(--amber); }
.ptitle { grid-area: title; font-size: 15px; font-weight: 650; letter-spacing: -.015em; line-height: 1.28; color: var(--ink); }
.ptag { grid-area: tag; font-size: 13px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pdays { grid-area: days; justify-self: start; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--amber-ink); background: rgba(199,166,106,.16); padding: 4px 11px; border-radius: 999px; }
.pgo { grid-area: go; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 16px; transition: transform .4s var(--ease), background .3s, color .3s; }
.pcard:hover .pgo { transform: rotate(-45deg) scale(1.08); background: var(--amber); color: var(--ink); }
.prog-foot { margin-top: 6vh; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; font-size: clamp(16px, 1.5vw, 20px); font-weight: 600; letter-spacing: -.02em; }

/* ---------- 7 · services (six tiles, visible at once) ---------- */
#services { position: relative; background: linear-gradient(180deg, var(--void), var(--ink) 45%, var(--void)); padding: 14vh 0 15vh; overflow: hidden; }
.svc { margin-top: 7vh; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; position: relative; z-index: 1; }
.tile { --mx: 50%; --my: 0%; position: relative; overflow: hidden; border-radius: 28px; padding: 30px 28px 28px; min-height: 250px; display: flex; flex-direction: column; gap: 12px; color: #fff; background: linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  transition: transform .5s var(--ease), background .4s; cursor: default; }
.tile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(260px circle at var(--mx) var(--my), rgba(199,166,106,.28), rgba(199,166,106,0) 70%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.tile:hover, .tile:focus-visible { transform: translateY(-8px); }
.tile:hover::before, .tile:focus-visible::before { opacity: 1; }
.tile-ic { width: 54px; height: 54px; color: var(--amber); position: relative; transition: transform .6s var(--ease); }
.tile-ic svg { width: 100%; height: 100%; fill: currentColor; }
.tile:hover .tile-ic { transform: rotate(-8deg) scale(1.12); }
.tile h3 { position: relative; margin-top: auto; font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.tile p { position: relative; font-size: 15.5px; line-height: 1.45; color: var(--on-dark-2); }
.sil { position: absolute; z-index: 0; color: #fff; opacity: .05; will-change: transform; pointer-events: none; }
.sil svg { width: 100%; height: 100%; fill: currentColor; }

/* ---------- 8 · expert (square photo, orbit, floating highlights) ---------- */
#expert { position: relative; background: var(--void); padding: 16vh 0 10vh; overflow: hidden; }
.ex { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: center; position: relative; z-index: 1; }
.ex-stage { position: relative; width: min(100%, 600px); margin-inline: auto; }
.ex-photo { position: relative; aspect-ratio: 1; width: 86%; margin-inline: auto; border-radius: 34px;
  background: radial-gradient(58% 52% at 50% 44%, rgba(227,201,143,.34) 0%, rgba(199,166,106,.14) 52%, rgba(199,166,106,0) 78%), linear-gradient(165deg, #323235 0%, #1B1B1D 55%, #0E0E0F 100%);
  box-shadow: 0 50px 110px -34px rgba(199,166,106,.55), 0 30px 70px -30px rgba(0,0,0,.7); animation: stageglow 7s ease-in-out infinite alternate; }
@keyframes stageglow { from { box-shadow: 0 50px 110px -34px rgba(199,166,106,.35), 0 30px 70px -30px rgba(0,0,0,.7); } to { box-shadow: 0 50px 130px -26px rgba(199,166,106,.7), 0 30px 70px -30px rgba(0,0,0,.7); } }
.reduced .ex-photo, .ex-photo.static { animation: none; }
.ex-photo::after { content: ""; position: absolute; inset: -22%; background: radial-gradient(closest-side, rgba(199,166,106,.22), rgba(199,166,106,0)); z-index: -1; pointer-events: none; }
.orbit { position: absolute; inset: -4%; border-radius: 50%; pointer-events: none; z-index: 1;
  background: conic-gradient(from 0deg, rgba(199,166,106,0) 0 55%, rgba(199,166,106,.9) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: spin 14s linear infinite; }
.orbit.o2 { inset: 2%; animation-duration: 22s; animation-direction: reverse; opacity: .55; background: conic-gradient(from 90deg, rgba(226,214,190,0) 0 60%, rgba(226,214,190,.9) 100%); }
.orbit::after { content: ""; position: absolute; right: 50%; top: -5px; width: 10px; height: 10px; margin-right: -5px; border-radius: 50%; background: var(--amber-hi); box-shadow: 0 0 16px 4px rgba(199,166,106,.8); }
.orbit.o2::after { background: #E9E2D0; box-shadow: 0 0 14px 3px rgba(226,214,190,.7); }
@keyframes spin { to { transform: rotate(360deg); } }
.chip { position: absolute; z-index: 3; white-space: nowrap; font-size: clamp(12px, 1vw, 14.5px); font-weight: 600; letter-spacing: -.01em; color: #fff; padding: 10px 16px; border-radius: 999px;
  background: rgba(28,28,30,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 14px 34px -14px rgba(0,0,0,.6); animation: bob var(--t, 6s) ease-in-out infinite alternate; animation-delay: var(--dl, 0s); will-change: transform; }
.chip b { color: var(--amber); font-weight: 700; margin-right: .35em; }
@keyframes bob { from { translate: 0 -7px; } to { translate: 0 9px; } }
.ex-role { font-size: 12px; font-weight: 600; letter-spacing: 5px; text-transform: uppercase; color: var(--amber); }
.ex h2 { margin-top: 14px; font-size: clamp(28px, 3.4vw, 46px); font-weight: 700; letter-spacing: -.045em; line-height: 1.04; color: #fff; }
.ex-line { margin-top: 16px; font-size: clamp(16px, 1.3vw, 19px); color: var(--on-dark-2); letter-spacing: -.01em; max-width: 28em; }
.ex-facts { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ex-facts li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.06); font-size: 14.5px; line-height: 1.3; color: var(--on-dark); transition: background .3s, transform .4s var(--ease); }
.ex-facts li:hover { background: rgba(255,255,255,.11); transform: translateX(4px); }
.ex-facts b { flex: none; min-width: 2.6em; font-size: clamp(22px, 2vw, 28px); font-weight: 700; letter-spacing: -.04em; color: var(--amber); font-variant-numeric: tabular-nums; }
.ex-quote { margin-top: 26px; font-family: var(--font); font-weight: 600; letter-spacing: -.03em; font-size: clamp(20px, 1.9vw, 27px); line-height: 1.24; color: #fff; max-width: 21em; }
.ex-links { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }
.creds { margin-top: 9vh; display: grid; gap: 10px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); position: relative; z-index: 1; }
.creds .mq-row li { font-size: clamp(13px, 1.1vw, 16px); font-weight: 600; color: rgba(255,255,255,.82); background: rgba(255,255,255,.07); box-shadow: none; }
.creds .mq-row li:hover { background: var(--amber); color: var(--ink); }
.creds .mq-row.alt li { background: rgba(255,255,255,.045); }

/* ---------- 9 · results ---------- */
#impact { position: relative; background: var(--paper); color: var(--ink); padding: 14vh 0 15vh; }
.res { margin-top: 7vh; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.rc { position: relative; border-radius: 32px; padding: 40px 34px 36px; min-height: 380px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; overflow: hidden;
  background: linear-gradient(160deg, #222224, #111112 70%); transition: transform .6s var(--ease), box-shadow .6s; box-shadow: 0 30px 70px -36px rgba(10,10,10,.6); }
.rc::before { content: ""; position: absolute; width: 80%; aspect-ratio: 1; right: -30%; top: -25%; border-radius: 50%; background: radial-gradient(closest-side, rgba(199,166,106,.5), rgba(199,166,106,0)); transition: transform 1s var(--ease); }
.rc:hover { transform: translateY(-10px); }
.rc:hover::before { transform: scale(1.35) translate(-6%, 8%); }
.rc-sector { font-size: 13px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--amber); position: relative; }
.rc h3 { font-size: clamp(30px, 3.3vw, 46px); font-weight: 700; letter-spacing: -.05em; line-height: 1; position: relative; }
.rc p { margin-top: 14px; font-size: 16.5px; color: var(--on-dark-2); letter-spacing: -.01em; position: relative; }
.res-note { margin-top: 34px; text-align: center; color: var(--muted); font-size: 15px; }

/* ---------- 10 · insights rail ---------- */
#insights { position: relative; background: var(--void); padding: 14vh 0 15vh; overflow: hidden; }
#insights .sec-title { color: #fff; }
.rail { margin-top: 7vh; display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity; padding: 12px max(32px, calc((100vw - 1240px) / 2)) 36px; scrollbar-width: none; cursor: grab; }
.rail::-webkit-scrollbar { display: none; }
.rail.drag { cursor: grabbing; scroll-snap-type: none; }
.ic { flex: none; scroll-snap-align: start; width: clamp(280px, 27vw, 380px); height: 420px; border-radius: 30px; padding: 30px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(150deg, var(--g1, #2A2A2C), var(--g2, #111112)); transition: transform .6s var(--ease); user-select: none; -webkit-user-drag: none; }
.ic::before { content: ""; position: absolute; width: 110%; aspect-ratio: 1; left: var(--bx, -40%); top: var(--by, 40%); border-radius: 50%; background: radial-gradient(closest-side, var(--gl, rgba(199,166,106,.35)), rgba(0,0,0,0)); transition: transform 1s var(--ease); }
.ic:hover { transform: translateY(-10px); }
.ic:hover::before { transform: scale(1.3); }
.ic-cat { font-size: 12px; font-weight: 600; letter-spacing: 3.4px; text-transform: uppercase; color: rgba(255,255,255,.75); position: relative; }
.ic-title { font-size: clamp(22px, 2vw, 27px); font-weight: 650; letter-spacing: -.03em; line-height: 1.18; position: relative; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.ic-meta { margin-top: 16px; font-size: 14px; color: rgba(255,255,255,.65); position: relative; }

/* ---------- 11 · contact ---------- */
#contact { position: relative; background: var(--void); padding: 18vh 0; overflow: hidden; text-align: center; }
#contact .orb { position: absolute; left: 50%; top: 46%; width: min(120vw, 1300px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(199,166,106,.28), rgba(199,166,106,.07) 50%, rgba(199,166,106,0) 70%); animation: breathe 8s ease-in-out infinite alternate; }
@keyframes breathe { from { transform: translate(-50%, -50%) scale(.9); opacity: .75; } to { transform: translate(-50%, -50%) scale(1.08); opacity: 1; } }
#contact h2 { font-size: clamp(40px, 7vw, 104px); font-weight: 700; letter-spacing: -.055em; line-height: .98; position: relative; z-index: 1; }
.ct-sub { margin-top: 20px; font-size: clamp(16px, 1.6vw, 22px); color: var(--on-dark-2); letter-spacing: -.02em; position: relative; z-index: 1; }
.cta-form { margin: 44px auto 0; width: min(720px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; position: relative; z-index: 1; text-align: left; }
.cta-form .full { grid-column: 1 / -1; }
.cta-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cta-form input[type=text], .cta-form input[type=email] { width: 100%; height: 58px; border: 0; border-radius: 16px; background: rgba(255,255,255,.07); color: #fff; font: inherit; font-size: 17px; padding: 0 22px; transition: background .3s, box-shadow .3s; }
.cta-form input::placeholder { color: rgba(255,255,255,.45); }
.cta-form input:focus { outline: none; background: rgba(255,255,255,.12); box-shadow: 0 0 0 2px var(--amber), 0 0 40px -6px rgba(199,166,106,.5); }
.cta-form .btn { width: 100%; min-height: 60px; font-size: 17px; }
.form-status { min-height: 22px; text-align: center; font-size: 15px; color: #FFB4A8; }
.cta-note { text-align: center; color: var(--on-dark-2); font-size: 15px; margin-top: 4px; }
.ct-contact { margin-top: 56px; display: flex; gap: 12px 34px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; font-size: 17px; }
.ct-contact a { color: var(--on-dark); transition: color .25s; }
.ct-contact a:hover { color: var(--amber); }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* ---------- footer ---------- */
footer { background: #070708; padding: 9vh 0 6vh; color: var(--on-dark-2); font-size: 15px; }
.foot { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.foot-name { color: #fff; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; font-size: 13px; margin-top: 14px; }
.foot-mark { height: 28px; width: auto; }
.foot-hrd { display: inline-block; margin-top: 14px; color: var(--amber); font-size: 13px; font-weight: 600; background: rgba(199,166,106,.12); padding: 6px 14px; border-radius: 999px; }
.foot-links, .foot-contact { display: flex; flex-direction: column; gap: 10px; }
.foot a:hover { color: #fff; }
.foot-bottom { margin-top: 8vh; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 14px; color: rgba(255,255,255,.45); }
.foot-bottom a { color: rgba(255,255,255,.6); margin-left: 22px; }
.foot-bottom a:first-child { margin-left: 0; }

/* ---------- popup (light modal) ---------- */
.popup-overlay { display: none; position: fixed; inset: 0; background: rgba(5,5,5,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 4000; align-items: center; justify-content: center; padding: 20px; }
.popup-overlay.active { display: flex; }
.popup-modal { background: #fff; color: var(--ink); border-radius: 28px; width: 100%; max-width: 680px; max-height: 92vh; overflow-y: auto; padding: 42px 44px 34px; position: relative; box-shadow: 0 40px 120px rgba(0,0,0,.55); }
.popup-close { position: absolute; top: 14px; right: 16px; width: 44px; height: 44px; background: none; border: none; font-size: 30px; color: var(--muted); cursor: pointer; line-height: 1; }
.popup-close:hover { color: var(--ink); }
.popup-header h2 { font-family: var(--font); font-size: 34px; line-height: 1.05; margin-bottom: 10px; font-weight: 700; letter-spacing: -.04em; color: var(--ink); }
.popup-header p { font-size: 15px; color: var(--muted); margin-bottom: 26px; line-height: 1.6; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full-width { margin-bottom: 16px; }
.form-group label { font-size: 13px; font-weight: 600; color: var(--ink); }
.required { color: var(--amber-ink); }
.form-group input, .form-group select, .form-group textarea { font-family: var(--font); font-size: 16px; color: var(--ink); background: var(--paper); border: 1.5px solid transparent; border-radius: 12px; padding: 11px 14px; width: 100%; min-height: 48px; }
.form-group textarea { resize: vertical; min-height: 96px; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(199,166,106,.25); background: #fff; }
.form-group input.invalid, .form-group select.invalid, .form-group textarea.invalid { border-color: #C53030; }
.form-error { background: #FFF5F5; border: 1px solid #FC8181; color: #9B1C1C; padding: 10px 14px; border-radius: 12px; font-size: 14px; margin-bottom: 14px; }
.btn-submit { width: 100%; margin-top: 6px; }
.btn-gold { background: var(--amber); color: var(--ink); }
.btn-gold:hover { background: var(--amber-hi); }
.form-note { text-align: center; font-size: 13px; color: var(--muted); margin-top: 12px; }
#popup-success { text-align: center; padding: 20px 0; }
.success-icon { width: 56px; height: 56px; background: var(--amber); color: var(--ink); font-size: 24px; font-weight: 700; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
#popup-success h3 { font-size: 28px; margin-bottom: 10px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
#popup-success p { font-size: 15px; color: var(--muted); margin-bottom: 24px; }
.popup-modal .btn-outline { color: var(--ink); }

/* ---------- reduced motion: everything visible, nothing pinned ---------- */
.reduced #hero { height: 100vh; height: 100svh; }
.reduced #process { height: auto; }
.reduced .pin { position: relative; height: auto; padding: 14vh 0; }
.reduced .stmt .w i { transform: none; opacity: 1; transition: none; }
.reduced .stmt .w.amber i { color: var(--amber); }
.reduced .proc { padding: 10vh 0; }
.reduced .pwords { gap: 8vh; }
.reduced .pstep { grid-area: auto; opacity: 1; transform: none; filter: none; }
.reduced .ring { display: none; }
.reduced .mq { -webkit-mask-image: none; mask-image: none; }
.reduced .mq-row { width: auto; flex-wrap: wrap; justify-content: center; }
.reduced .tx, .reduced .tx-ink { animation: none; }
.reduced .glow, .reduced #contact .orb, .reduced .orbit, .reduced .chip { display: none; }
.reduced .rv { opacity: 1 !important; transform: none !important; filter: none !important; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .pcols { grid-template-columns: 1fr; }
  .pcol { gap: 10px; }
  .svc { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .nav-links { display: none; position: fixed; inset: var(--nav-h) 0 0 0; background: rgba(10,10,10,.97); backdrop-filter: blur(20px); flex-direction: column; justify-content: center; gap: 22px; padding: 24px; }
  .nav-links.nav-open { display: flex; }
  .nav-link { font-size: 30px; font-weight: 700; letter-spacing: -.03em; color: #fff; }
  .nav-cta { min-height: 52px; font-size: 17px; padding: 0 30px; margin-top: 10px; }
  .hamburger { display: flex; }
  .proc { grid-template-columns: 1fr; gap: 4vh; }
  .ring { width: min(56vw, 250px); order: -1; }
  .ex { grid-template-columns: 1fr; gap: 8vh; }
  .res { grid-template-columns: 1fr; }
  .rc { min-height: 300px; }
  .nums { grid-template-columns: repeat(2, 1fr); gap: 6vh 16px; }
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - 40px); }
  .nav-logo-text { display: none; }
  .cta-form { grid-template-columns: 1fr; }
  .popup-modal { padding: 34px 20px 26px; }
  .form-row { grid-template-columns: 1fr; gap: 12px; }
  .st { bottom: 11vh; }
  .st-c { bottom: 5vh; }
  .st-cta .btn { width: 100%; }
  .svc { grid-template-columns: 1fr; }
  .tile { min-height: 200px; }
  .ex-facts { grid-template-columns: 1fr; }
  .ex-stage { width: 92%; }
  .chip.hide-m { display: none; }
  .pcard { padding: 16px; column-gap: 12px; }
  .foot { flex-direction: column; }
  .rail { padding-left: 20px; padding-right: 20px; }
}

/* ---------- APX layer ---------- */
.nav-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, #8F7236, #E3C98F, #C7A66A); transform-origin: 0 50%; transform: scaleX(0); opacity: .9; pointer-events: none; }
.ex-x { position: absolute; left: 50%; top: 46%; width: 56%; height: 56%; transform: translate(-50%, -50%); z-index: 2; filter: drop-shadow(0 24px 44px rgba(199,166,106,.4)); animation: xfloat 6s ease-in-out infinite alternate; }
@keyframes xfloat { from { transform: translate(-50%, -52%); } to { transform: translate(-50%, -47%); } }
.ex-tag { position: absolute; left: 0; right: 0; bottom: 9%; text-align: center; z-index: 2; font-size: 11px; font-weight: 600; letter-spacing: 5px; text-transform: uppercase; color: rgba(242,240,233,.6); }
.reduced .ex-x { animation: none; }

/* logo wall: one tone, gold on hover */
.mq-logos { gap: 18px; }
.mq-row.lg { gap: clamp(44px, 6vw, 96px); padding-right: clamp(44px, 6vw, 96px); align-items: center; }
.mq-row.lg li.lg-i { background: transparent; padding: 10px 0; border-radius: 0; box-shadow: none; color: rgba(10,10,10,.5); transition: color .35s, transform .45s var(--ease); display: flex; align-items: center; }
.mq-row.lg li.lg-i:hover { background: transparent; color: #7A5F2C; transform: scale(1.08); }
.mq-row.lg li.lg-i svg { display: block; height: auto; max-width: none; }
.mq-row.lg.alt li.lg-i, .mq-row.lg li.lg-i { background: transparent; }
/* floating call to action */
.fab { position: fixed; right: clamp(16px, 2.4vw, 32px); bottom: var(--fab-b, clamp(16px, 2.4vw, 28px)); z-index: 900; display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 15px/1 var(--font); letter-spacing: -.01em; color: #0B0B0C; background: linear-gradient(120deg, #EBD7A6, #C7A66A 55%, #A98640); box-shadow: 0 18px 44px -14px rgba(199,166,106,.65), 0 2px 0 rgba(255,255,255,.35) inset;
  opacity: 0; transform: translate3d(0,24px,0); pointer-events: none; transition: opacity .5s var(--ease), transform .6s var(--ease), box-shadow .35s; }
.fab.on { opacity: 1; transform: none; pointer-events: auto; }
.fab:hover { box-shadow: 0 22px 54px -12px rgba(227,201,143,.85), 0 2px 0 rgba(255,255,255,.35) inset; transform: translateY(-2px); }
@media (max-width: 700px) { .fab { left: 16px; right: 16px; justify-content: center; } }

/* ===== APX4: premium + speed layer ===== */
:root{--disp:"Outfit","Inter",system-ui,sans-serif;--g1:#F0DDB4;--g2:#C7A66A;--g3:#A5844A;--gold-grad:linear-gradient(120deg,var(--g1),var(--g2) 55%,var(--g3))}
h1,h2,h3,.st-h,.num b,.sec-title,.pcode,.rc-stat,.stmt{font-family:var(--disp)}
.num b{background-image:linear-gradient(180deg,#fff 20%,#E6D2A2 60%,#B8975A);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#proof{background:radial-gradient(60% 80% at 50% 0%,rgba(199,166,106,.16),transparent 70%),linear-gradient(180deg,var(--void),#141413 55%,var(--void))}
.speed{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.speed i{position:absolute;left:-60vw;width:var(--w);height:1.5px;background:linear-gradient(90deg,transparent,rgba(240,221,180,.85) 70%,rgba(255,255,255,.95));transform:skewX(-35deg);opacity:.0;animation:streak var(--t) cubic-bezier(.5,0,.2,1) var(--dl) infinite}
@keyframes streak{0%{transform:translateX(0) skewX(-35deg);opacity:0}8%{opacity:.7}60%{opacity:.5}100%{transform:translateX(190vw) skewX(-35deg);opacity:0}}
.st-tag{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px;font:600 11.5px/1 var(--disp);letter-spacing:.34em;text-transform:uppercase;color:rgba(242,240,233,.72)}
.st-tag i{width:2px;height:15px;background:var(--gold-grad);transform:skewX(-20deg)}
.slash{position:relative;height:46px;margin:-23px 0;z-index:5;pointer-events:none;overflow:hidden}
.slash::before{content:"";position:absolute;left:-5%;right:-5%;top:18px;height:10px;background:linear-gradient(90deg,transparent,rgba(199,166,106,.0) 10%,var(--g2) 50%,rgba(199,166,106,.0) 90%,transparent);clip-path:polygon(0 100%,100% 0,100% 12%,0 100%);transform:skewY(-2deg)}
.slash i{position:absolute;top:0;bottom:0;width:22%;left:-30%;background:linear-gradient(90deg,transparent,rgba(255,244,214,.95),transparent);clip-path:polygon(18% 0,100% 0,82% 100%,0 100%);animation:sweep 5.5s ease-in-out infinite;mix-blend-mode:screen;opacity:.8}
@keyframes sweep{0%{left:-30%}60%,100%{left:120%}}
.rc{position:relative;border:1px solid rgba(199,166,106,.28);box-shadow:0 30px 60px -34px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05)}
.rc::before{content:"";position:absolute;left:0;top:0;width:44%;height:2px;background:var(--gold-grad)}
.rc-stat{display:block;font-size:clamp(44px,5vw,72px);font-weight:700;letter-spacing:-.05em;line-height:1;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin:18px 0 6px}
.rc-stat small{font-size:.28em;letter-spacing:.02em;font-weight:500;color:inherit}
#voices,#check{position:relative;padding:12vh 0;background:var(--void);color:#fff}
#check{background:radial-gradient(70% 90% at 50% 100%,rgba(199,166,106,.14),transparent 70%),var(--ink)}
.vcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:44px}
.vc{position:relative;margin:0;padding:30px 26px 26px;border-radius:22px;background:linear-gradient(160deg,#17171a,#0f0f11);border:1px solid rgba(199,166,106,.3)}
.vc-tag{position:absolute;top:14px;right:16px;font:600 10.5px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--g2)}
.vc blockquote{margin:12px 0 22px;font-size:18px;line-height:1.45;color:rgba(255,255,255,.86);font-weight:500}
.vc figcaption{font-size:13px;color:rgba(255,255,255,.5)} .vc figcaption small{color:var(--g2)}
.qz-wrap{max-width:760px;margin:0 auto;padding:0 20px}
.qz{margin-top:38px;border-radius:26px;padding:28px;background:linear-gradient(160deg,#18181b,#0e0e10);border:1px solid rgba(199,166,106,.3);box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.qz-bar{height:3px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;margin-bottom:26px}
.qz-bar i{display:block;height:100%;width:0;background:var(--gold-grad);transform:skewX(-30deg);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.qz-q{font:600 clamp(21px,2.6vw,28px)/1.2 var(--disp);letter-spacing:-.02em;margin:0 0 20px;color:#fff}
.qz-opts{display:grid;gap:10px}
.qz-opts button{all:unset;box-sizing:border-box;cursor:pointer;padding:16px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.88);font-size:16px;line-height:1.35;transition:border-color .25s,background .25s,transform .25s}
.qz-opts button:hover,.qz-opts button:focus-visible{border-color:var(--g2);background:rgba(199,166,106,.1);transform:translateX(4px)}
.qz-res h3{font:700 clamp(28px,4vw,44px)/1.05 var(--disp);letter-spacing:-.04em;margin:0 0 12px;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.qz-res p{color:rgba(255,255,255,.72);line-height:1.55;margin:0 0 20px}
.qz-act{display:flex;flex-wrap:wrap;gap:12px}
.qz-act a,.qz-act button{all:unset;box-sizing:border-box;cursor:pointer;padding:13px 22px;border-radius:999px;font-weight:600;font-size:15px}
.qz-act .go{background:var(--g2);color:#0B0B0C}.qz-act .ghost{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);color:#fff}
.ptabs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:6px 0 26px}
.ptabs button{all:unset;cursor:pointer;padding:10px 18px;border-radius:999px;font-weight:600;font-size:14px;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(17,17,18,.25);transition:background .25s,color .25s}
.ptabs button[aria-selected=true]{background:var(--ink);color:#fff;box-shadow:none}
.ptabs button:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
#pcols .pcol{transition:opacity .45s,transform .45s,filter .45s}
#pcols[data-f="0"] .pcol:not(:nth-child(1)),#pcols[data-f="1"] .pcol:not(:nth-child(2)),#pcols[data-f="2"] .pcol:not(:nth-child(3)){opacity:.22;filter:grayscale(1);transform:scale(.97)}
.sky{position:absolute;left:0;right:0;bottom:0;height:min(34vw,300px);pointer-events:none;background:linear-gradient(0deg,rgba(199,166,106,.34),rgba(199,166,106,.1) 45%,transparent);z-index:0}
.sky svg{position:absolute;inset:0;width:100%;height:100%}
#contact{padding-bottom:calc(min(34vw,300px) + 40px)}
.wa{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(var(--fab-b,22px) + env(safe-area-inset-bottom,0px));z-index:900;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#F2F0E9;background:rgba(17,17,18,.88);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1.5px rgba(199,166,106,.55),0 14px 34px -10px rgba(0,0,0,.7);transition:transform .3s,color .3s}
.wa:hover{transform:translateY(-3px);color:var(--g2)} .wa svg{width:25px;height:25px}
#ld{position:fixed;inset:0;z-index:9000;background:#0A0A0A;display:grid;place-items:center;transition:opacity .5s .0s,visibility .5s}
#ld.out{opacity:0;visibility:hidden}
.ld-in{width:min(64vw,360px)} .ld-svg{width:100%;display:block;clip-path:inset(0 100% 0 0);animation:ldin .9s cubic-bezier(.7,0,.2,1) forwards}
@keyframes ldin{to{clip-path:inset(0 0 0 0)}}
.ld-bar{display:block;height:2px;margin-top:22px;background:var(--gold-grad);transform:scaleX(0);transform-origin:left;animation:ldbar 1s cubic-bezier(.7,0,.2,1) forwards}
@keyframes ldbar{to{transform:scaleX(1)}}
@media(max-width:860px){.vcs{grid-template-columns:1fr}.qz{padding:22px 18px}.wa{width:46px;height:46px;bottom:calc(var(--fab-b,22px) + 66px + env(safe-area-inset-bottom,0px))}}
@media(prefers-reduced-motion:reduce){.speed i,.slash i{animation:none}#ld{display:none}}

.ex-photo .ex-img{position:absolute;left:50%;bottom:0;height:118%;width:auto;max-width:none;transform:translateX(-50%);z-index:2;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
.ex-photo .ex-img{height:118%;width:auto;aspect-ratio:1190/1840;object-fit:contain;max-width:none;max-height:none;image-rendering:auto}
.ex-photo .ex-img{height:122%;-webkit-mask-image:linear-gradient(to bottom,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,#000 86%,transparent 100%)}

/* bulletproof placement: object-fit can never stretch the photo */
.ex-photo .ex-img{position:absolute;left:50%;bottom:0;width:82%;height:122%;max-width:none;max-height:none;aspect-ratio:auto;object-fit:contain;object-position:50% 100%;transform:translateX(-50%)}

/* ===== APX5: spacing, process, expert, logos ===== */
.st-brand{margin-bottom:20px}
.st-h{line-height:1.06}
.st-sub{margin:20px auto 0;line-height:1.55}
.st-tag{margin-top:28px}
.st-cta{margin-top:32px}
.mq-row.lg li.lg-i{color:inherit;opacity:1;filter:none}
.mq-row.lg li.lg-i:hover{transform:scale(1.1)}
.mq-row.lg li.lg-i svg{height:40px;width:auto}.mq-row.lg li.lg-i svg[width='86']{height:26px}
.mq-more{max-width:62em;margin:34px auto 0;padding:0 24px;text-align:center;font-size:14px;line-height:1.7;color:rgba(17,17,18,.55)}
.pstep-tag{display:inline-block;margin-bottom:18px;padding:7px 14px;border-radius:999px;font:600 12px/1 var(--disp);letter-spacing:.24em;text-transform:uppercase;color:var(--amber);box-shadow:inset 0 0 0 1px rgba(199,166,106,.45)}
.pstep h3{margin:0}
.pstep-sub{margin-top:14px!important}
.pstep-ctx{margin-top:22px;max-width:30em;font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:rgba(242,240,233,.82)}
.pstep-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px;max-width:32em}
.pstep-list li{position:relative;padding:14px 18px 14px 46px;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid rgba(199,166,106,.2);font-size:clamp(14.5px,1.2vw,17px);color:#fff;opacity:0;transform:translateX(-26px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.pstep-list li::before{content:"";position:absolute;left:18px;top:50%;width:14px;height:2px;background:var(--gold-grad);transform:translateY(-50%) skewX(-30deg)}
.pstep.on .pstep-list li{opacity:1;transform:none;transition-delay:calc(.25s + var(--i) * .14s)}
.ring::before{content:"";position:absolute;inset:-9%;border-radius:50%;border:1px dashed rgba(199,166,106,.28);animation:spin 40s linear infinite}
.ring::after{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(closest-side,rgba(199,166,106,.14),transparent 72%);animation:pulse 4s ease-in-out infinite alternate}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{from{opacity:.5;transform:scale(.94)}to{opacity:1;transform:scale(1.04)}}
.ring-n{align-items:start;padding-top:19%;font-size:clamp(20px,2.6vw,32px);color:rgba(255,255,255,.55);letter-spacing:.12em}
.ring-ic{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.ri{grid-area:1/1;width:34%;opacity:0;transform:scale(.7) rotate(-8deg);transition:opacity .5s,transform .7s var(--ease)}
.ri.on{opacity:1;transform:none}
.ric{width:100%;fill:none;stroke:url(#arcg);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ri .ic-a,.ri .ic-b,.ri .ic-c{stroke-dasharray:140;stroke-dashoffset:140}
.ri.on .ic-a{animation:draw 1.1s .1s var(--ease) forwards}.ri.on .ic-b{animation:draw 1s .5s var(--ease) forwards}.ri.on .ic-c{animation:draw .9s .8s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.ri.on:nth-child(4) .ric{animation:spin 8s linear infinite}
.ri.on:nth-child(3) .ric{animation:nudge 1.8s ease-in-out infinite alternate}
@keyframes nudge{to{transform:translateX(8px)}}
.reduced .pstep-list li{opacity:1;transform:none}.reduced .ri{opacity:1;transform:none}.reduced .ri .ic-a,.reduced .ri .ic-b,.reduced .ri .ic-c{stroke-dashoffset:0}
#expert{background:radial-gradient(60% 70% at 24% 52%,rgba(227,201,143,.3),transparent 70%),radial-gradient(40% 50% at 80% 20%,rgba(199,166,106,.12),transparent 70%),var(--void)}
.ex-photo{background:radial-gradient(70% 60% at 50% 34%,#FFF8E2 0%,#F0DDB0 48%,#D2B06E 100%);box-shadow:0 50px 120px -30px rgba(227,201,143,.75),0 0 0 1px rgba(255,243,210,.55) inset}
.ex-photo::after{background:radial-gradient(closest-side,rgba(240,221,180,.5),rgba(240,221,180,0))}
.ex-photo .ex-img{-webkit-mask-image:none;mask-image:none;filter:drop-shadow(0 26px 30px rgba(60,40,10,.45))}
.orbit{opacity:.9}
.speed i:nth-child(n+3){display:none}
.mq-row.lg li.lg-i svg{height:52px}.mq-row.lg li.lg-i svg[width='86']{height:32px}

/* APX6: coloured client wall */
.wm span{display:inline-block;font-family:var(--disp);font-size:26px;line-height:1;color:var(--c);padding-left:12px;border-left:4px solid var(--c);white-space:nowrap}
.wm.bd span{font-weight:800;letter-spacing:-.02em}.wm.it span{font-weight:700;font-style:italic;letter-spacing:-.01em}.wm.up span{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:20px}
.mq-row.lg li.lg-i{opacity:.95;filter:none}.mq-row.lg li.lg-i:hover{transform:scale(1.1) translateY(-2px)}
@media(max-width:700px){.wm span{font-size:21px}.wm.up span{font-size:16px}}

/* APX7: the word INNOVATION behind the bulb */
.hero-word{position:absolute;left:0;right:0;z-index:0;text-align:center;white-space:nowrap;font-family:var(--disp);font-weight:800;line-height:1;letter-spacing:.01em;pointer-events:none;opacity:0;will-change:opacity,transform;
  background:linear-gradient(180deg,rgba(255,232,180,.42),rgba(255,206,120,.07) 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transform:translate3d(0,-50%,0)}

/* APX7: brighter, confident palette. Midnight navy with a vivid blue lift, true white light sections, richer gold */
:root{--void:#070C1B;--ink:#0C1530;--ink-2:#14204A;--amber:#DDAF5D;--amber-hi:#F5DA94;--amber-ink:#8A6217;--paper:#fff;--muted:#586074;--on-dark:rgba(255,255,255,.94);--on-dark-2:rgba(255,255,255,.72);--g1:#F9E6B4;--g2:#E1B35F;--g3:#BC882F;--blue:#4C7DFF}
.grain::after{opacity:.05}
.hero-vig{background:radial-gradient(130% 100% at 50% 38%,rgba(7,12,27,0) 50%,rgba(7,12,27,.85) 100%),linear-gradient(to top,rgba(7,12,27,.9),rgba(7,12,27,0) 36%)}
#hero{background:radial-gradient(75% 60% at 50% 38%,rgba(58,96,230,.30),transparent 72%),radial-gradient(40% 40% at 85% 85%,rgba(225,179,95,.10),transparent 70%),var(--void)}
#about{background:radial-gradient(60% 70% at 12% 15%,rgba(76,125,255,.26),transparent 70%),radial-gradient(55% 60% at 92% 92%,rgba(225,179,95,.16),transparent 70%),var(--void)}
#proof{background:linear-gradient(180deg,var(--void),#12234F 50%,var(--void))}
#clients{background:#fff}
#programmes{background:linear-gradient(180deg,#F4F7FD,#EAF0FB)}
#services{background:radial-gradient(60% 55% at 85% 10%,rgba(76,125,255,.26),transparent 70%),radial-gradient(50% 50% at 5% 95%,rgba(225,179,95,.14),transparent 70%),linear-gradient(180deg,var(--void),#0D1A40 50%,var(--void))}
.tile{background:linear-gradient(160deg,rgba(120,160,255,.14),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(150,180,255,.16)}
#process{background:radial-gradient(55% 55% at 78% 50%,rgba(76,125,255,.22),transparent 70%),var(--void)}
#expert{background:radial-gradient(70% 60% at 25% 40%,rgba(76,125,255,.30),transparent 70%),radial-gradient(50% 50% at 90% 90%,rgba(225,179,95,.14),transparent 70%),linear-gradient(180deg,#0A1330,#0F2050 60%,#070C1B)}
#impact{background:#fff}
#insights{background:linear-gradient(180deg,#F4F7FD,#EAF0FB);color:var(--ink)}
#insights .sec-title{color:var(--ink)}
#voices{background:radial-gradient(60% 70% at 50% 0%,rgba(76,125,255,.26),transparent 70%),var(--void)}
#check{background:#fff;color:var(--ink)}
#check .sec-title{color:var(--ink)}
#check .sec-sub{color:var(--muted)}
#check .qz{box-shadow:0 40px 90px -40px rgba(12,21,48,.55)}
#contact{background:var(--void)}
#contact .orb{background:radial-gradient(closest-side,rgba(76,125,255,.32),rgba(225,179,95,.12) 50%,rgba(0,0,0,0) 72%)}
footer{background:#050914}
.vc{background:linear-gradient(160deg,#14204A,#0B1432);border-color:rgba(225,179,95,.34)}
.qz{background:linear-gradient(160deg,#14204A,#0B1432)}
.btn-amber{background:linear-gradient(120deg,#F5DA94,#DDAF5D 55%,#C99636);box-shadow:0 10px 30px -10px rgba(221,175,93,.7)}

/* APX10: 3D story hero */
#hero{height:560vh}
.reduced #hero,.no3d #hero{height:100svh}
#heroGL{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.hero-glow{display:none}
.hero-vig{z-index:1;background:radial-gradient(140% 110% at 50% 45%,rgba(3,5,13,0) 62%,rgba(3,5,13,.5) 100%)}
.h-head{position:absolute;z-index:2;left:0;right:0;top:calc(72px + 5vh);text-align:center;opacity:0;pointer-events:none;will-change:opacity,transform;padding:0 16px}
.h-title{margin:0;font-family:var(--disp);font-weight:700;font-size:min(13.5vw,17vh);line-height:.95;letter-spacing:-.045em;padding-bottom:.06em;background:linear-gradient(100deg,#fff 0%,#FFF1CF 30%,#E7BE6E 50%,#FFF1CF 70%,#fff 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:hsheen 8s ease-in-out infinite}
@keyframes hsheen{0%,100%{background-position:100% 0}50%{background-position:0% 0}}
.h-sub{margin:.45em 0 0;font-size:clamp(17px,1.8vw,26px);font-weight:500;letter-spacing:-.01em;color:rgba(255,255,255,.6)}
.cap{position:absolute;z-index:2;left:0;right:0;bottom:8vh;text-align:center;padding:0 20px;opacity:0;pointer-events:none;will-change:opacity,transform}
.cap-h{margin:0 auto;max-width:19ch;font-family:var(--disp);font-weight:600;font-size:clamp(28px,4.1vw,58px);line-height:1.08;letter-spacing:-.035em;color:#fff}
.st-c{z-index:2}
@media(max-width:760px){.h-head{top:calc(72px + 4vh)}.h-title{font-size:16vw}.cap{bottom:16vh}.cap-h{font-size:clamp(26px,7.6vw,34px)}}
@media(prefers-reduced-motion:reduce){.h-title{animation:none}}
.no3d .h-head,.no3d .cap{display:none}