/* SHARED SITE STYLESHEET
 * A COPY of the style blocks in site/index.html, extracted 2026-09-02 so the new pages inherit the
 * real visual language - the seal, the scene stages, the character treatment, the meander, the
 * marble - instead of a thinner parallel system built beside it.
 *
 * A COPY, deliberately, not a move. tools/test_mythika_relay_story_contract.mjs asserts against the
 * literal CSS text inside site/index.html - the Relay track height, the seal keyframes, the swap
 * order. Extracting it out of that file would fail those gates and, worse, would mean editing
 * owner-approved work in order to add pages beside it.
 *
 * Regenerate with: node tools/build_site_pages.mjs
 */


/* ============================================================================
   MYTHIKA — brand tokens
   Taken from Ramy's own logo vision: GOLD gods on a deep dark ground, wired
   together with NEON CIRCUIT light. Gold = the pantheon, the authority, the
   ancient half. Cyan = the wiring between them. Magenta = the living system.
   Three lights on near-black is what gives the page depth; a single accent
   on flat dark is what made the last version look poor.
   ============================================================================ */
:root{
  --bg:var(--brand-navy);
  --bg-2:var(--brand-navy-soft);
  --surface:var(--brand-navy-soft);
  --surface-2:#1A2A50;
  --surface-3:#20375F;
  --gold:var(--brand-gold);
  --gold-deep:var(--brand-gold-deep);
  --gold-soft:rgba(216,168,75,.10);
  --gold-line:rgba(216,168,75,.32);
  --purple:var(--brand-purple);
  --purple-hi:var(--brand-pink);
  --purple-soft:rgba(192,38,211,.16);
  --purple-line:rgba(244,114,208,.55);
  --cyan:var(--brand-signal-blue);
  --cyan-soft:rgba(56,168,255,.14);
  --fg:var(--brand-parchment);
  --fg-dim:#C3CBDC;
  --fg-faint:var(--brand-muted);
  --line:rgba(247,245,240,.08);
  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --body:'Inter',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --maxw:1180px;
  --header-h:88px;
  /* the depth system — every raised surface uses one of these, never a flat border */
  --lift-1:0 1px 0 rgba(255,255,255,.05) inset, 0 10px 24px -12px rgba(0,0,0,.9);
  --lift-2:0 1px 0 rgba(255,255,255,.07) inset, 0 22px 48px -20px rgba(0,0,0,.95), 0 2px 8px rgba(0,0,0,.5);
  --lift-3:0 1px 0 rgba(255,255,255,.09) inset, 0 40px 80px -28px rgba(0,0,0,1), 0 4px 14px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}

/* The Mythika ground: dark Aegean marble plus the exact v9 Greek-key unit. */
body{
  margin:0;background-color:var(--brand-navy);
  background-image:linear-gradient(180deg,rgba(10,23,51,.2),rgba(7,17,38,.34)),url('mythika-marble-texture.svg');
  background-size:auto,cover;background-repeat:no-repeat;background-attachment:fixed;color:var(--fg-dim);font-family:var(--body);
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;
  position:relative;overflow-x:clip;padding-top:var(--header-h);
}
body:after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(110deg,rgba(245,239,225,.025),transparent 28%,rgba(216,168,75,.025) 52%,transparent 74%);
}
body:before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 50% 10%,transparent 0 38%,rgba(4,10,24,.16) 100%)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;position:relative;z-index:4}
a{color:inherit}
.skip-link{position:fixed;left:16px;top:12px;z-index:1000;padding:10px 14px;border-radius:8px;
  background:var(--fg);color:var(--bg);font-weight:700;text-decoration:none;
  transform:translateY(-180%);transition:transform .15s}
.skip-link:focus{transform:translateY(0);outline:3px solid var(--gold);outline-offset:3px}
main:focus{outline:none}

.meander{height:8px;position:relative;z-index:2;overflow:hidden;
  background:linear-gradient(90deg,transparent,rgba(216,168,75,.42) 7%,var(--gold) 48%,var(--gold) 52%,rgba(216,168,75,.42) 93%,transparent)}
.meander:before{content:"";position:absolute;left:50%;top:50%;width:92px;height:8px;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 8px 50%,var(--gold) 0 2px,transparent 2.5px),radial-gradient(circle at 46px 50%,var(--cyan) 0 2px,transparent 3px),radial-gradient(circle at 84px 50%,var(--gold) 0 2px,transparent 2.5px),linear-gradient(var(--gold),var(--gold)) center/100% 1px no-repeat;
  filter:drop-shadow(0 0 6px rgba(56,168,255,.5))}

header{position:fixed;left:0;right:0;top:0;z-index:100;background:rgba(7,12,25,.91);
  backdrop-filter:blur(18px) saturate(140%);border-bottom:0;transform:translateZ(0);
  box-shadow:0 18px 38px -32px rgba(0,0,0,.95);transition:background .2s,box-shadow .2s}
header.is-scrolled{background:rgba(7,12,25,.97);box-shadow:0 18px 42px -24px rgba(0,0,0,1)}
main{padding-top:0}
.nav{display:flex;align-items:center;justify-content:space-between;height:80px;gap:24px}
.brand{color:var(--fg);text-decoration:none;white-space:nowrap;display:flex;align-items:center;flex:0 0 auto}
.brand .brand-wordmark{display:block;width:148px;height:auto;filter:drop-shadow(0 0 8px rgba(216,168,75,.2))}
.nav-links{display:flex;gap:34px;align-items:center}
.nav-links a{color:var(--fg-dim);text-decoration:none;font-size:15px;transition:color .18s}
.nav-links a:hover{color:var(--fg)}
.nav-links a[aria-current="location"]{color:var(--fg);background:rgba(244,114,208,.12);box-shadow:inset 0 -2px var(--purple-hi)}
@media(max-width:900px){
  :root{--header-h:112px}
  .nav{height:auto;min-height:64px;display:grid;grid-template-columns:auto 1fr auto;gap:6px 12px;padding-top:7px}
  .nav>.btn{grid-column:3;grid-row:1;justify-self:end}
  .nav-links{display:flex;grid-column:1/-1;grid-row:2;gap:6px;overflow-x:auto;overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;padding:2px 0 8px;scrollbar-width:none}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{flex:none;scroll-snap-align:start;font-size:12px;padding:6px 10px;border-radius:999px;
    background:rgba(255,255,255,.035);border:1px solid rgba(245,239,225,.07)}
}
@media(max-width:560px){
  .nav{height:auto;min-height:92px}
  header .btn{padding:12px 18px;font-size:13.5px;white-space:nowrap}
  header .btn .lg{display:none}
  .brand .brand-wordmark{width:122px}
  h1{font-size:clamp(32px,9vw,44px)}
}

.btn{display:inline-block;background:linear-gradient(135deg,var(--purple),var(--purple-hi));
  color:#fff;font-weight:700;font-size:15px;padding:16px 32px;border-radius:9px;
  text-decoration:none;border:none;position:relative;
  box-shadow:0 0 26px rgba(244,114,208,.34), 0 12px 26px -12px rgba(192,38,211,.9), 0 1px 0 rgba(255,255,255,.22) inset;
  transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s}
.btn:hover{transform:translateY(-3px);
  box-shadow:0 0 40px rgba(244,114,208,.5), 0 20px 34px -14px rgba(192,38,211,.95), 0 1px 0 rgba(255,255,255,.3) inset}
.btn-ghost{background:transparent;color:var(--gold);border:1px solid var(--gold-line);
  box-shadow:0 10px 24px -16px rgba(0,0,0,.9)}
.btn-ghost:hover{background:var(--gold-soft);border-color:var(--gold);
  box-shadow:0 0 26px rgba(232,194,100,.2), 0 14px 26px -16px rgba(0,0,0,.9)}
.btn-lg{font-size:16.5px;padding:19px 42px}

section{padding:104px 0;position:relative;z-index:auto}
.sec-label{display:inline-flex;align-items:center;gap:11px;font-size:11.5px;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.sec-label:before{content:'';width:30px;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent)}
h1,h2,h3,h4{font-family:var(--display);color:var(--fg);font-weight:700;line-height:1.12;margin:0}
h2{font-size:clamp(30px,4.1vw,45px);letter-spacing:-.005em;margin-bottom:20px}
h3{font-size:22px;margin-bottom:10px}
h4{font-size:19px;margin-bottom:9px}
.sec-lede{font-size:18px;max-width:74ch;margin:0 0 52px}

/* ============================================================================
   HERO — two columns: the argument, and the seal from Ramy's logo vision
   ============================================================================ */
.hero{padding:52px 0 60px;overflow:visible;background:linear-gradient(90deg,rgba(7,17,38,.96) 0 48%,rgba(7,17,38,.74) 76%,rgba(7,17,38,.62)),url('mythika-environment-v1-1600.webp') center/cover no-repeat}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(340px,.85fr);gap:34px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  background:var(--gold-soft);border:1px solid var(--gold-line);
  padding:8px 17px;border-radius:100px;margin-bottom:26px;
  box-shadow:0 0 22px rgba(232,194,100,.12), 0 8px 20px -12px rgba(0,0,0,.9)}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 9px var(--cyan);font-style:normal}
h1{font-size:clamp(40px,6vw,68px);letter-spacing:-.018em;margin-bottom:26px}
h1 em{font-style:normal;position:relative;white-space:nowrap;
  background:linear-gradient(120deg,var(--purple-hi),var(--gold));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lede{font-size:19.5px;max-width:60ch;margin:0 0 20px}
.hero-note{font-size:16px;color:var(--fg-faint);margin:0 0 34px}
.hook{font-size:16.5px;line-height:1.6;color:var(--fg-dim);margin:0 0 22px;max-width:56ch;
  border-left:2px solid var(--purple-hi);padding:10px 0 10px 18px;
  background:linear-gradient(90deg,rgba(192,38,211,.1),transparent 70%);border-radius:0 9px 9px 0}
.hook b{color:var(--purple-hi)}
.launch-signal{display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:58ch;margin:0 0 18px;
  padding:10px 13px;border:1px solid rgba(56,168,255,.35);border-radius:10px;background:rgba(56,168,255,.07);font-size:14px;color:var(--fg-dim)}
.launch-signal b{color:var(--gold);font-family:var(--display);font-size:17px;letter-spacing:.02em}
.launch-signal .signal-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);flex:0 0 auto}
.launch-signal a{color:var(--purple-hi);font-weight:700;text-decoration:none}
.launch-signal a:hover{text-decoration:underline}
.hero-cta{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.price-tag{font-size:14.5px;color:var(--fg-faint)}
.price-tag b{color:var(--gold);font-size:18px;font-family:var(--display)}
.offer-clarity{padding:46px 0 42px;border-top:1px solid rgba(216,168,75,.16);border-bottom:1px solid rgba(216,168,75,.16);background:radial-gradient(circle at 84% 36%,rgba(192,38,211,.13),transparent 28%),linear-gradient(180deg,rgba(13,31,64,.94),rgba(7,17,38,.98));overflow:hidden}
.offer-clarity-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,340px);align-items:end;gap:34px;margin-bottom:24px}.offer-clarity-head h2{max-width:820px;margin:0;font-size:clamp(31px,4.2vw,49px)}.offer-clarity-head p{margin:0;color:var(--fg-dim);font-size:14px;line-height:1.55}
.agency-stage{display:block;min-height:0;border:1px solid rgba(216,168,75,.2);background:rgba(5,13,31,.55);box-shadow:0 38px 80px -56px #000}
.agency-offers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid rgba(216,168,75,.16)}
.agency-offer{appearance:none;border:0;border-right:1px solid rgba(247,245,240,.07);background:transparent;color:var(--fg-faint);font:700 13px/1.25 var(--body);text-align:left;padding:14px 15px;min-height:104px;cursor:pointer;transition:background .2s,color .2s,transform .2s}.agency-offer:last-child{border-right:0}.agency-offer:hover,.agency-offer.is-active{color:var(--fg);background:linear-gradient(180deg,rgba(216,168,75,.17),rgba(56,168,255,.06));transform:translateY(-2px)}.agency-offer.is-active{box-shadow:inset 0 3px var(--purple-hi)}.agency-offer small,.offer-price{display:block;margin-top:5px}.agency-offer small{color:var(--fg-faint);font-size:9px;letter-spacing:.08em;text-transform:uppercase}.offer-price{color:var(--gold);font-family:var(--display);font-size:18px;line-height:1}
.agency-scenes{position:relative;min-width:0;overflow:hidden;scroll-margin-top:calc(var(--header-h) + 14px)}.agency-scene{position:relative;min-height:350px;padding:34px min(36%,330px) 30px 38px;animation:agencySceneIn .8s ease both}.agency-scene[hidden]{display:none}.agency-scene:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,19,43,.98) 0 57%,rgba(8,19,43,.26) 86%),var(--scene-image) 92% 30%/auto 118% no-repeat;z-index:-1}.agency-scene .scene-kicker{color:var(--purple-hi);font-size:10px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.agency-scene h3{font-size:clamp(30px,3.4vw,44px);margin:10px 0 12px;max-width:620px}.agency-scene>p{font-size:15px;line-height:1.55;max-width:600px;margin:0}.scene-results{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0}.scene-results span{padding:7px 10px;border:1px solid rgba(56,168,255,.22);border-radius:999px;background:rgba(56,168,255,.07);color:var(--fg-dim);font-size:11px}.scene-action{display:inline-block;margin:0 0 14px;color:var(--purple-hi);font-size:12px;font-weight:800;text-decoration:none}.scene-action:hover{text-decoration:underline}.scene-crew{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:var(--fg-faint);font-size:11px}.scene-crew b{color:var(--gold)}
.offer-terms{margin:14px 0 0;padding:11px 14px;border-left:2px solid var(--gold);background:rgba(216,168,75,.06);color:var(--fg-faint);font-size:11px;line-height:1.5}.offer-terms b{color:var(--gold)}
.capability-rail{display:flex;gap:8px;overflow-x:auto;padding:16px 2px 2px;scrollbar-width:none}.capability-rail::-webkit-scrollbar{display:none}.capability-rail span{flex:none;color:var(--fg-faint);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.capability-rail span+span:before{content:"→";color:var(--purple-hi);margin-right:8px}
@keyframes agencySceneIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@media(max-width:800px){.offer-clarity-head{display:block}.offer-clarity-head p{margin-top:10px}.agency-offers{display:flex;overflow-x:auto;scrollbar-width:none}.agency-offer{flex:0 0 168px;min-width:168px}.agency-offer:hover,.agency-offer.is-active{transform:none}.agency-scene{padding:28px 28% 28px 22px;min-height:410px}.agency-scene:before{background:linear-gradient(90deg,rgba(8,19,43,.98) 0 61%,rgba(8,19,43,.25) 90%),var(--scene-image) 112% 72%/auto 92% no-repeat}}
@media(max-width:520px){.agency-scene{padding:24px 18px 210px;min-height:520px}.agency-scene:before{background:linear-gradient(180deg,rgba(8,19,43,.99) 0 55%,rgba(8,19,43,.18) 86%),var(--scene-image) 78% 106%/auto 55% no-repeat}.agency-scene h3{font-size:30px}.agency-stage{min-height:0}}

/* One composed seal is visible in the hero; the travelling background copy stays at zero opacity
   until the hero has passed, so the two never stack into a false mark. */
.seal-stage{display:grid;place-items:center;position:relative;min-width:0;perspective:900px;transform-style:preserve-3d}
.legacy-seal{display:none!important}
.seal-stage:before{content:'';position:absolute;width:70%;height:56%;left:15%;top:26%;
  background:radial-gradient(ellipse,rgba(232,194,100,.3),transparent 68%);
  filter:blur(56px);z-index:0;animation:sealHalo 6s ease-in-out infinite}
.brand-crest{display:none}
@keyframes crestfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes crestassemble{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.seal{display:block;width:min(100%,470px);aspect-ratio:1;transform:none;
  transform-style:preserve-3d;transform-origin:50% 50%;position:relative;z-index:1;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.75));will-change:transform}
@media(max-width:1050px){.hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:22px}.seal{width:min(100%,390px)}}
@media(max-width:820px){.hero{overflow:hidden}.hero-grid{grid-template-columns:1fr}.seal-stage{margin:28px auto 0;width:min(88vw,430px)}.seal{width:100%}}
/* ASSEMBLY ON FIRST PAINT. The seal already breathes, spins and pulses; what it did not do is
   ARRIVE. It was simply present at load, which states the conclusion without showing the argument.
   The page's whole claim is that separate specialists are wired into one system, so the mark is
   worth watching resolve rather than finding finished.
   Pure CSS on elements that already exist — no library, no external script, no scroll listener, and
   nothing that touches layout, so it cannot move Largest Contentful Paint. Load speed is the single
   best-evidenced conversion factor on this page and it is not being traded for an effect.
   It runs once and stops: motion that repeats forever competes with the copy for attention. */
.seal{animation:sealCinematic 12s cubic-bezier(.45,.05,.55,.95) infinite,sealReveal 1.35s ease-out both}
@keyframes sealCinematic{
  0%,100%{transform:translateY(0) rotateX(calc(2deg + var(--tilt-x,0deg))) rotateY(calc(-6deg + var(--tilt-y,0deg))) rotateZ(-.35deg)}
  25%{transform:translateY(-7px) rotateX(calc(-2deg + var(--tilt-x,0deg))) rotateY(calc(1deg + var(--tilt-y,0deg))) rotateZ(.15deg)}
  50%{transform:translateY(-14px) rotateX(calc(3deg + var(--tilt-x,0deg))) rotateY(calc(7deg + var(--tilt-y,0deg))) rotateZ(.4deg)}
  75%{transform:translateY(-6px) rotateX(calc(-1deg + var(--tilt-x,0deg))) rotateY(calc(-2deg + var(--tilt-y,0deg))) rotateZ(-.1deg)}}
@keyframes sealReveal{from{opacity:0}to{opacity:1}}
@keyframes sealHalo{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
.seal:after{content:"";position:absolute;z-index:8;inset:8%;border-radius:50%;pointer-events:none;
  background:linear-gradient(112deg,transparent 31%,rgba(255,240,184,0) 42%,rgba(255,240,184,.34) 49%,rgba(56,168,255,.16) 52%,transparent 61%);
  mix-blend-mode:screen;transform:translateZ(58px) translateX(-135%) rotate(-8deg);animation:sealLightSweep 8s ease-in-out infinite}
@keyframes sealLightSweep{0%,18%{opacity:0;transform:translateZ(58px) translateX(-135%) rotate(-8deg)}36%{opacity:.7}58%,100%{opacity:0;transform:translateZ(58px) translateX(135%) rotate(-8deg)}}
/* The outer ring draws itself, so the structure closes rather than appears closed. 1526 is the
   circumference of r=243 rounded up, which is why the dash never shows a seam. */
.seal>circle:first-of-type{stroke-dasharray:1526;animation:sealdraw 1.9s cubic-bezier(.3,.8,.3,1) .15s both}
@keyframes sealdraw{from{stroke-dashoffset:1526}to{stroke-dashoffset:0}}
.seal .spin-slow{transform-origin:250px 250px;animation:spin 64s linear infinite}
.seal .spin-rev{transform-origin:250px 250px;animation:spin 92s linear infinite reverse}
.seal .flow{stroke-dasharray:5 11;animation:flow 2.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-64}}
.seal .pulse{animation:pulse 3.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:820px){
  .seal{animation:sealCinematicMobile 11s ease-in-out infinite,sealReveal 1.35s ease-out both}
  @keyframes sealCinematicMobile{0%,100%{transform:translateY(0) rotateX(1deg) rotateY(-3deg)}50%{transform:translateY(-10px) rotateX(-1deg) rotateY(3deg)}}
}

/* The moving Pantheon seal is composed from approved parts: the exact 15-key ring from the
   production logo, six portrait medallions set inside that ring, and the production logo itself
   at the centre. No god marker is allowed to interrupt the logo perimeter. */
.world-seal{position:fixed;z-index:2;left:50%;top:54%;width:min(84vw,820px);aspect-ratio:1;pointer-events:none;opacity:0;perspective:1000px;transform-style:preserve-3d;
  transform:translate3d(calc(-50% + var(--orbit-x,24vw)),calc(-50% + var(--orbit-y,0px)),0);
  transition:opacity .35s ease;will-change:transform;mix-blend-mode:screen;filter:drop-shadow(0 0 42px rgba(56,168,255,.1))}
.seal-rings{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;animation:ringDepth 10s ease-in-out infinite;mix-blend-mode:screen;will-change:transform,filter}
.seal-center{position:absolute;z-index:3;left:50%;top:50%;width:25%;height:25%;aspect-ratio:1;transform:translate(-50%,-50%);object-fit:contain;border-radius:24%;
  box-shadow:0 0 0 1px rgba(216,168,75,.58),0 0 36px rgba(56,168,255,.2);background:#071126;animation:sealCoreDepth 4.8s ease-in-out infinite;will-change:transform,filter}
.seal-node{position:absolute;z-index:2;left:var(--seal-x);top:var(--seal-y);width:11.5%;aspect-ratio:1;transform:translate(-50%,-50%);overflow:hidden;border-radius:50%;
  border:2px solid rgba(216,168,75,.9);box-shadow:0 0 0 5px rgba(7,17,38,.72),0 0 24px rgba(56,168,255,.2);background:#071126;animation:sealNodeDepth 5.6s ease-in-out infinite;will-change:transform,filter}
.seal-node img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 13%;filter:saturate(.9) contrast(1.05);transition:transform .42s cubic-bezier(.2,.8,.2,1),filter .42s ease}
.seal-node:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(244,114,208,.34),inset 0 -18px 24px rgba(7,17,38,.44)}
.seal-node:hover{box-shadow:0 0 0 5px rgba(7,17,38,.82),0 0 34px rgba(244,114,208,.48),0 0 58px rgba(56,168,255,.24)}
.seal-node:hover img{transform:scale(1.14) translateY(-3%);filter:saturate(1.08) contrast(1.08) brightness(1.14)}
.seal-node--hermes,.seal-node--aphrodite{animation-delay:-1.4s}
.seal-node--poseidon,.seal-node--athena{animation-delay:-2.8s}
.seal-node--medusa{animation-delay:-4.2s}
@keyframes ringDepth{0%,100%{transform:translateZ(0) scale(.99);filter:drop-shadow(0 0 5px rgba(216,168,75,.22))}50%{transform:translateZ(8px) scale(1.012);filter:drop-shadow(0 0 14px rgba(216,168,75,.48))}}
@keyframes sealCoreDepth{0%,100%{transform:translate(-50%,-50%) translateZ(30px) scale(.985);filter:brightness(.94)}50%{transform:translate(-50%,-50%) translateZ(52px) scale(1.025);filter:brightness(1.1)}}
@keyframes sealNodeDepth{0%,100%{transform:translate(-50%,-50%) translateZ(18px);filter:brightness(.9)}50%{transform:translate(-50%,-50%) translateZ(34px);filter:brightness(1.12)}}
@media(max-width:900px){.world-seal{width:min(116vw,820px);left:58%}}
@media(max-width:620px){.world-seal{width:128vw;left:64%}}
/* ============================================================================
   FOCUS, PRESS, AND THE MOBILE CTA
   Measured 2026-08-17: 24 :hover rules and ZERO :focus-visible. Every interactive
   element told a mouse user where they were and told a keyboard user nothing —
   WCAG 2.4.7 Focus Visible, Level AA, which this project claims to meet.
   :focus-visible rather than :focus so a mouse click does not leave a ring behind;
   the browser decides, which is the whole point of the pseudo-class.
   ============================================================================ */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
select:focus-visible,details>summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
/* Windows High Contrast strips author colour, so the ring must not be the only signal. */
@media(forced-colors:active){
  a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid CanvasText}}
/* A press with no acknowledgement reads as a dead control on touch, where there is
   no hover state to fall back on. */
.btn:active,button:active{transform:translateY(1px)}

/* Persistent CTA on small screens. The hero CTA is the only conversion path and it
   scrolls away on a phone; this returns it once the hero is gone. Marked aria-hidden
   in the markup because it duplicates a link already in the document — a screen-reader
   user should not meet the same action twice. */
.cta-dock{display:none}
@media(max-width:720px){
  body{padding-bottom:76px}
  .cta-dock{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(11,14,20,.92);backdrop-filter:blur(10px);
    border-top:1px solid rgba(232,194,100,.22);opacity:0;pointer-events:none;visibility:hidden;transform:translateY(110%);transition:opacity .2s,transform .25s ease,visibility .2s}
  .cta-dock.is-visible{opacity:1;pointer-events:auto;visibility:visible;transform:none}
  .cta-dock .btn{display:block;text-align:center;width:100%}}
@media(max-height:520px){.cta-dock{display:none}}
@media(prefers-reduced-motion:reduce){.cta-dock{transition:none}}


/* The medallion after the figurative art was retired. Same circle and same gold so the section's
   rhythm is unchanged — what has gone is the invented face, not the structure around it.
   aria-hidden on the medallion because the initial is decoration: the name is already read out
   immediately after it, and a screen reader announcing "Z, Zeus" is noise. */
.medallion{display:grid;place-items:center;background:
    radial-gradient(circle at 50% 38%,rgba(232,194,100,.16),transparent 66%),
    linear-gradient(160deg,rgba(255,255,255,.05),rgba(0,0,0,.28));
  border:1px solid rgba(232,194,100,.34);overflow:hidden}
.medallion .glyph{font-family:var(--display,serif);font-weight:600;
  font-size:clamp(30px,4.6vw,44px);line-height:1;color:var(--gold);
  letter-spacing:.02em;text-shadow:0 2px 18px rgba(232,194,100,.28);
  transform:translateY(1px)}
.god:hover .medallion{border-color:rgba(232,194,100,.6)}
.team-statement{margin:22px 0 6px;padding:22px 24px;border-radius:14px;
  border:1px solid rgba(232,194,100,.22);
  background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(0,0,0,.22))}
.team-statement b{display:block;font-family:var(--display,serif);font-size:clamp(20px,2.6vw,26px);
  color:var(--fg);margin-bottom:8px}
.team-statement span{display:block;color:var(--muted);max-width:60ch;line-height:1.6}

/* The deity feature was a two-column grid — copy beside a photograph — with a 500px floor and a
   gradient scrim that existed to darken the image edge so white type stayed legible on it. With the
   photograph retired, that layout leaves a 300px empty column on six cards half a screen tall, and
   the scrim shades nothing. Collapsed to one column, the floor released so the card is the height of
   its own words, and the scrim dropped. Written here rather than by editing the original rules so
   the retirement stays one reversible block. */
.deity-feature,.deity-feature--reverse{grid-template-columns:minmax(0,1fr);min-height:0}
.deity-feature:before,.deity-feature--reverse:before{display:none}
.deity-copy{max-width:72ch}

@media(prefers-reduced-motion:reduce){
  .seal,.seal .spin-slow,.seal .spin-rev,.seal .flow,.seal .pulse,.seal-rings,.seal-center,.seal-node,.seal-stage:before,.seal:after{animation:none}
  /* The assembly is the one animation that carries meaning, so it is the one most likely to be
     kept by mistake. It is dropped too: a reader who has asked for stillness gets the finished
     mark, not a shorter version of the same movement. The ring must be re-closed explicitly,
     because the dash offset that draws it would otherwise leave it permanently open. */
  .seal>circle:first-of-type{animation:none;stroke-dasharray:none;stroke-dashoffset:0}}

/* ============================================================================
   THE GOD FIELD — six original neo-Olympian campaign portraits, dimmed into the
   architecture of the page. HTML owns the words; the art owns atmosphere.
============================================================================ */
.legacy-godfield{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict;
  background:
    linear-gradient(rgba(56,168,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(56,168,255,.025) 1px,transparent 1px),
    radial-gradient(circle at 50% 42%,rgba(192,38,211,.10),transparent 40%),var(--brand-navy-deep);
  background-size:72px 72px,72px 72px,auto,auto}
.god-layer{position:absolute;width:min(46vw,760px);height:72vh;opacity:.20;isolation:isolate;
  transform:translate3d(0,var(--shift,0px),0) scale(1.04);will-change:transform;
  filter:saturate(.82) contrast(1.08);mix-blend-mode:screen}
.god-layer picture,.god-art{display:block;width:100%;height:100%;position:relative;z-index:0}
.god-art{object-fit:cover;object-position:var(--focus,50% 40%)}
.god-layer:after{content:'';position:absolute;inset:0;z-index:1;opacity:.38;mix-blend-mode:screen;
  background:
    radial-gradient(circle at 69% 35%,transparent 0 15%,rgba(56,168,255,.22) 15.2% 15.5%,transparent 15.8% 24%,rgba(216,168,75,.16) 24.2% 24.5%,transparent 24.8%),
    repeating-linear-gradient(118deg,transparent 0 31px,rgba(56,168,255,.08) 32px,transparent 33px 68px);
  -webkit-mask-image:linear-gradient(to bottom,transparent 3%,#000 26%,#000 72%,transparent 98%);mask-image:linear-gradient(to bottom,transparent 3%,#000 26%,#000 72%,transparent 98%)}
.god-zeus{left:-5vw;top:-10vh;--focus:62% 43%;--speed:.10}
.god-hermes{right:-7vw;top:-6vh;--focus:66% 40%;--speed:.16}
.god-poseidon{left:-6vw;bottom:-22vh;--focus:66% 42%;--speed:.22}
.god-medusa{right:-7vw;bottom:-20vh;--focus:68% 38%;--speed:.28}
.god-athena{left:18vw;bottom:-34vh;--focus:68% 40%;--speed:.19;opacity:.12}
.god-aphrodite{right:18vw;bottom:-34vh;--focus:68% 38%;--speed:.24;opacity:.12}
.legacy-godfield:before{content:'';position:absolute;inset:0;z-index:2;background:
  radial-gradient(circle at 50% 48%,transparent 0 18%,rgba(6,15,36,.36) 50%,rgba(6,15,36,.78) 100%),
  linear-gradient(180deg,rgba(6,15,36,.44),rgba(6,15,36,.72));}
.ai-interface{position:absolute;z-index:3;left:50%;top:50%;width:min(34vw,480px);aspect-ratio:1;
  border:1px solid rgba(216,168,75,.20);border-radius:50%;transform:translate(-50%,-50%);
  box-shadow:0 0 90px rgba(192,38,211,.10),inset 0 0 60px rgba(56,168,255,.08);
  background:conic-gradient(from 15deg,transparent 0 12%,rgba(56,168,255,.13) 12.2% 12.6%,transparent 12.8% 37%,rgba(216,168,75,.12) 37.2% 37.7%,transparent 38% 74%,rgba(244,114,208,.10) 74.2% 74.7%,transparent 75%)}
.ai-interface:before,.ai-interface:after{content:'';position:absolute;border-radius:50%;inset:9%;border:1px dashed rgba(56,168,255,.14)}
.ai-interface:after{inset:27%;border-style:solid;border-color:rgba(216,168,75,.15)}
.hero,section,footer{position:relative;z-index:1}
@media(max-width:820px){
  .god-layer{width:82vw;height:64vh;opacity:.14;mix-blend-mode:screen}
  .god-zeus{left:-30vw;top:-8vh}.god-medusa{right:-32vw;bottom:-10vh}
  .god-hermes,.god-poseidon,.god-athena,.god-aphrodite{display:none}.ai-interface{width:68vw}
}
@media(prefers-reduced-motion:reduce){
  .god-layer,.god-art{transform:none!important;will-change:auto}
  .ai-interface{transform:translate(-50%,-50%)!important}
}

/* One clear futuristic specialist per section. Artwork is content, never fixed wallpaper. */
.deity-feature{display:grid;grid-template-columns:minmax(300px,.92fr) minmax(0,1.08fr);
  min-height:570px;margin:76px 0;border:0;border-top:1px solid rgba(216,168,75,.2);border-radius:0;
  overflow:visible;position:relative;isolation:isolate;background:
  radial-gradient(circle at 24% 52%,rgba(56,168,255,.13),transparent 35%),
  linear-gradient(90deg,rgba(13,31,64,.34),transparent 72%);box-shadow:none}
.deity-feature:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:linear-gradient(90deg,transparent 34%,rgba(6,15,36,.1) 56%,rgba(6,15,36,.3) 100%)}
.deity-feature--reverse{grid-template-columns:minmax(300px,.92fr) minmax(0,1.08fr)}
.deity-feature--reverse{background:radial-gradient(circle at 76% 52%,rgba(244,114,208,.1),transparent 35%),linear-gradient(270deg,rgba(13,31,64,.34),transparent 72%)}
.deity-feature--reverse:before{background:linear-gradient(270deg,transparent 34%,rgba(6,15,36,.1) 56%,rgba(6,15,36,.3) 100%)}
.deity-feature--reverse .deity-media{order:2}.deity-feature--reverse .deity-copy{order:1}
.deity-media{min-height:570px;position:relative;overflow:visible;background:transparent;display:grid;place-items:end center;z-index:1}
.deity-media picture,.deity-media img{display:block;width:100%;height:100%}
.deity-media img{position:absolute;inset:0;object-fit:contain;object-position:center bottom;
  filter:saturate(1.03) contrast(1.02) brightness(1.04) drop-shadow(0 30px 26px rgba(0,0,0,.5));transform:scale(.98);
  transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.deity-feature:hover .deity-media img{transform:scale(1.01) translateY(-4px)}
.deity-copy{padding:54px 48px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:3}
.deity-kicker{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#8FCAFF;margin-bottom:12px}
.deity-copy h3{font-size:clamp(31px,4vw,48px);margin-bottom:8px}.deity-copy p{font-size:16.5px;max-width:47ch;margin:12px 0 0}
.platform-badge{display:inline-flex;align-items:center;gap:9px;width:max-content;margin-top:22px;padding:9px 14px;
  border-radius:100px;border:1px solid rgba(143,202,255,.35);background:rgba(56,168,255,.11);
  color:#D9EDFF;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.platform-badge:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--platform-color,var(--brand-signal-blue));box-shadow:0 0 13px var(--platform-color,var(--brand-signal-blue))}
.deity-signal{height:1px;width:min(260px,80%);margin-top:24px;background:linear-gradient(90deg,var(--platform-color,var(--brand-signal-blue)),transparent);position:relative}
.deity-signal:after{content:'';position:absolute;left:0;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--platform-color,var(--brand-signal-blue));box-shadow:0 0 12px var(--platform-color,var(--brand-signal-blue))}
.team-portrait{margin:40px 0 54px;border-radius:24px;overflow:hidden;border:1px solid rgba(216,168,75,.3);box-shadow:var(--lift-3);background:#10203d}
.team-portrait picture,.team-portrait img{display:block;width:100%}.team-portrait img{height:auto;aspect-ratio:auto;object-fit:contain;object-position:center}
.team-caption{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:18px 22px;background:linear-gradient(90deg,rgba(216,168,75,.12),rgba(56,168,255,.08));font-size:13px}
.team-caption b{color:var(--fg);font-family:var(--display);font-size:20px}.team-caption span{color:var(--fg-faint);text-align:right}
.agent-console{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:420px;margin:24px 0 8px;border:1px solid rgba(216,168,75,.2);background:rgba(7,17,38,.72);box-shadow:0 38px 80px -58px #000;overflow:hidden}
.agent-tabs{display:grid;align-content:stretch;border-right:1px solid rgba(216,168,75,.16)}
.agent-tab{appearance:none;border:0;border-bottom:1px solid rgba(247,245,240,.07);background:rgba(10,23,51,.42);color:var(--fg-faint);font:700 13px/1.2 var(--body);text-align:left;padding:13px 18px;cursor:pointer;transition:background .2s,color .2s,transform .2s}.agent-tab:last-child{border-bottom:0}.agent-tab small{display:block;margin-top:4px;color:var(--fg-faint);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.agent-tab:hover,.agent-tab.is-active{color:var(--fg);background:linear-gradient(90deg,rgba(192,38,211,.2),rgba(56,168,255,.07));transform:translateX(3px)}.agent-tab.is-active{box-shadow:inset 3px 0 var(--gold)}.agent-tab.is-active small{color:var(--gold)}
.agent-panels{position:relative;min-width:0;touch-action:pan-y pinch-zoom;overflow-anchor:none}.agent-panel{position:relative;isolation:isolate;min-height:420px;padding:34px min(39%,390px) 30px 36px;animation:agencySceneIn .8s ease both;overflow:hidden}.agent-panel[hidden]{display:none}.agent-art{position:absolute;z-index:-2;inset:0 0 0 auto;width:48%;height:100%;object-fit:cover;object-position:center 16%;filter:saturate(.9) contrast(1.04)}.agent-panel:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,19,43,.99) 0 53%,rgba(8,19,43,.48) 74%,rgba(8,19,43,.14));z-index:-1}.agent-panel:after{content:"";position:absolute;right:8%;top:12%;width:250px;aspect-ratio:1;border:1px solid rgba(216,168,75,.18);border-radius:50%;box-shadow:0 0 60px rgba(56,168,255,.1);z-index:-1;animation:agentOrbit 8s linear infinite}.agent-number{color:var(--purple-hi);font-size:10px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.agent-panel h3{font-size:clamp(34px,4.2vw,48px);margin:8px 0 4px}.agent-title{color:var(--gold);font-size:13px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.agent-contract{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:620px;margin-top:20px}.agent-contract div{padding:11px 12px;border-left:2px solid rgba(56,168,255,.45);background:rgba(7,17,38,.66)}
/* The limit is what the specialist CANNOT do. It is the honesty half of the contract, so it spans
   the full grid rather than sitting as a fifth feature cell, and carries the gold edge instead of
   the blue one so it does not read as another capability. */
.agent-contract .agent-limit{grid-column:1/-1;border-left-color:var(--gold-line);background:var(--gold-soft)}
.agent-contract .agent-limit b{color:var(--gold)}.agent-contract b{display:block;color:var(--fg);font-size:10px;letter-spacing:.12em;text-transform:uppercase}.agent-contract span{display:block;color:var(--fg-faint);font-size:11.5px;line-height:1.4;margin-top:3px}
@keyframes agentOrbit{to{transform:rotate(360deg)}}
@media(max-width:760px){.agent-console{grid-template-columns:1fr;min-height:0}.agent-tabs{display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid rgba(216,168,75,.16);scrollbar-width:none}.agent-tab{flex:0 0 132px;border-right:1px solid rgba(247,245,240,.07);border-bottom:0}.agent-tab:hover,.agent-tab.is-active{transform:none}.agent-panel{min-height:510px;padding:24px 16px 230px}.agent-art{inset:auto 0 0;width:100%;height:48%;object-position:center 18%}.agent-panel:before{background:linear-gradient(180deg,rgba(8,19,43,.99) 0 54%,rgba(8,19,43,.28) 82%,rgba(8,19,43,.08))}.agent-panel:after{right:-8%;top:auto;bottom:0;width:230px}.agent-contract{grid-template-columns:1fr 1fr;margin-top:16px}}
@media(max-width:480px){.agent-panel{min-height:560px}.agent-contract{grid-template-columns:1fr}.agent-panel h3{font-size:36px}}
.agent-panel[data-agent="zeus"]{--portrait-focus:50% 2%}.agent-panel[data-agent="athena"]{--portrait-focus:50% 0%}.agent-panel[data-agent="aphrodite"]{--portrait-focus:50% 0%}.agent-panel[data-agent="hermes"]{--portrait-focus:50% 0%}.agent-panel[data-agent="poseidon"]{--portrait-focus:50% 0%}.agent-panel[data-agent="medusa"]{--portrait-focus:50% 0%}.agent-art{object-position:var(--portrait-focus)}
@media(prefers-reduced-motion:reduce){.agent-panel:after{animation:none}}
@media(max-width:820px){
  .deity-feature,.deity-feature--reverse{grid-template-columns:1fr;margin:44px 0;min-height:0}
  .deity-feature:before,.deity-feature--reverse:before{background:linear-gradient(180deg,transparent 0 58%,rgba(16,31,61,.88) 100%)}
  .deity-feature--reverse .deity-media,.deity-feature--reverse .deity-copy{order:initial}
  .deity-media{min-height:500px}.deity-copy{padding:34px 24px}.team-caption{align-items:flex-start;flex-direction:column}.team-caption span{text-align:left}
}
@media(prefers-reduced-motion:reduce){.deity-media img,.deity-feature:hover .deity-media img{transform:none!important;transition:none}}

/* ============================================================================
   CARDS — real elevation. Every card sits on a plane above the page, has a
   light edge on top, a coloured glow that grows on hover, and lifts in 3D.
   ============================================================================ */
.scope{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 56px}
@media(max-width:900px){.scope{grid-template-columns:repeat(2,1fr)}}
.scope div{display:flex;gap:11px;align-items:baseline;
  background:linear-gradient(160deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);border-left:2px solid var(--cyan);border-radius:11px;
  padding:16px 18px;box-shadow:var(--lift-1);transition:transform .22s,box-shadow .22s}
.scope div:hover{transform:translateY(-4px);box-shadow:var(--lift-2)}
.scope b{color:var(--cyan);font-size:12px;letter-spacing:.1em;
  text-shadow:0 0 10px rgba(34,211,238,.55)}
.scope span{font-size:14.5px;color:var(--fg-dim);line-height:1.45}
.brief-route{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 22px}.brief-route span{display:flex;align-items:center;gap:8px;color:var(--fg-dim);font-size:12px;font-weight:700}.brief-route span+span:before{content:"→";color:var(--purple-hi)}

.brief{display:grid;grid-template-columns:1fr 1fr;gap:26px;perspective:1600px}
@media(max-width:880px){.brief{grid-template-columns:1fr}}
.brief-card{position:relative;border-radius:15px;padding:32px 30px 28px;
  background:linear-gradient(158deg,var(--surface-2) 0%,var(--surface) 62%,#131826 100%);
  border:1px solid var(--line);box-shadow:var(--lift-2);
  transform-style:preserve-3d;transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s,border-color .28s}
.brief-card:before{content:'';position:absolute;inset:0;border-radius:15px;padding:1px;
  background:linear-gradient(150deg,var(--gold-line),transparent 42%,transparent 62%,var(--purple-line));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;transition:opacity .28s;pointer-events:none}
.brief-card:hover{transform:translateY(-8px) rotateX(2.5deg);box-shadow:var(--lift-3)}
.brief-card:hover:before{opacity:1}
.brief-card h3{display:flex;align-items:baseline;gap:12px}
.brief-card h3 .num{font-size:13px;font-family:var(--body);font-weight:700;color:var(--gold);
  letter-spacing:.12em;background:var(--gold-soft);border:1px solid var(--gold-line);
  border-radius:6px;padding:4px 9px;box-shadow:0 0 14px rgba(232,194,100,.14)}
.brief-card p{margin:0 0 18px;font-size:15.5px}
.pc{display:grid;gap:9px;border-top:1px solid var(--line);padding-top:16px}
.pc div{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.5}
.pc b{flex:none;width:21px;height:21px;border-radius:6px;display:grid;place-items:center;
  font-size:13px;font-weight:800;margin-top:1px}
.pc .p b{color:#6EE7B7;background:rgba(110,231,183,.13);box-shadow:0 0 12px rgba(110,231,183,.18)}
.pc .c b{color:#FCA5A5;background:rgba(252,165,165,.13);box-shadow:0 0 12px rgba(252,165,165,.18)}

/* ============================================================================
   THE PANTHEON — gold medallion portraits, layered: glow ring, coin, profile
   ============================================================================ */
#pantheon{background:linear-gradient(180deg,transparent,rgba(17,21,36,.72) 16%,rgba(17,21,36,.72) 84%,transparent);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gods{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;perspective:1600px}
@media(max-width:980px){.gods{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.gods{grid-template-columns:1fr}}
.god{position:relative;text-align:left;border-radius:15px;padding:0 0 26px;overflow:hidden;
  background:linear-gradient(165deg,var(--surface-2),var(--surface) 70%,#121724);
  border:1px solid var(--line);box-shadow:var(--lift-2);isolation:isolate;
  transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s}
.god:hover{transform:translateY(-9px) rotateX(3deg);box-shadow:var(--lift-3)}
.medallion{width:100%;height:260px;margin:0 0 24px;position:relative;overflow:hidden;background:#070f21}
.medallion picture,.medallion img{display:block;width:100%;height:100%}
.medallion img{object-fit:cover;object-position:var(--portrait-focus,50% 0%);filter:saturate(.94) contrast(1.06);transition:transform .55s cubic-bezier(.2,.8,.3,1)}
.medallion:after{content:'';position:absolute;inset:0;background:
  linear-gradient(180deg,transparent 44%,rgba(6,15,36,.22) 68%,rgba(6,15,36,.96)),
  radial-gradient(circle at 72% 28%,transparent 0 18%,rgba(56,168,255,.16) 18.4% 18.8%,transparent 19.2%);
  mix-blend-mode:screen;pointer-events:none}
.god:hover .medallion img{transform:scale(1.045)}
.god .name{font-family:var(--display);font-size:27px;color:var(--fg);font-weight:700;
  letter-spacing:.015em;margin:0 26px 3px}
.god .role{font-size:11.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--cyan);margin:0 26px 14px;text-shadow:0 0 12px rgba(34,211,238,.4)}
.god p{font-size:14.8px;margin:0;padding:0 26px;line-height:1.62}
.god .agent-signals{display:flex;flex-wrap:wrap;gap:7px;margin:16px 26px 14px;padding-top:13px;border-top:1px solid var(--line)}
.god .agent-signals span{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim);padding:5px 8px;border-radius:99px;border:1px solid rgba(56,168,255,.28);background:rgba(56,168,255,.07)}
.god .agent-signals span:first-child{color:var(--gold);border-color:var(--gold-line);background:var(--gold-soft)}
.god .agent-duty{display:block;margin:14px 26px 0;color:var(--fg-faint);font-size:12.5px;line-height:1.45}
.god .agent-duty b{color:var(--fg-dim);font-weight:700}
.god .agent-boundary{margin:0 26px 13px;padding-left:10px;border-left:2px solid rgba(244,114,208,.58);color:var(--fg-faint);font-size:11.5px;line-height:1.45}

/* ============================================================================
   HOW — a wired path, not four loose boxes
   ============================================================================ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative}
@media(max-width:940px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{position:relative;border-radius:14px;padding:30px 24px 26px;
  background:linear-gradient(160deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);box-shadow:var(--lift-1);
  transition:transform .24s,box-shadow .24s}
.step:hover{transform:translateY(-6px);box-shadow:var(--lift-2)}
.step .n{font-family:var(--display);font-size:42px;font-weight:700;line-height:1;margin-bottom:12px;
  background:linear-gradient(160deg,var(--gold),var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 14px rgba(232,194,100,.35))}
.step h3{font-size:19px;margin-bottom:8px}
.step p{font-size:14.6px;margin:0}

.promise{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
@media(max-width:900px){.promise{grid-template-columns:1fr}}
.promise>div{border-radius:14px;padding:30px 26px;
  background:linear-gradient(160deg,rgba(232,194,100,.055),transparent 70%),var(--surface);
  border:1px solid var(--gold-line);box-shadow:var(--lift-1);
  transition:transform .24s,box-shadow .24s}
.promise>div:hover{transform:translateY(-5px);box-shadow:var(--lift-2)}
.promise p{font-size:14.8px;margin:0}

/* ============================================================================
   CTA — the deepest plane on the page
   ============================================================================ */
.cta{text-align:center;position:relative}
.cta .wrap{max-width:820px}
.cta-box{border-radius:22px;padding:64px 48px 56px;position:relative;
  background:linear-gradient(165deg,var(--surface-2),var(--surface) 55%,#0F1420);
  border:1px solid var(--gold-line);box-shadow:var(--lift-3)}
.cta-box:before{content:'';position:absolute;inset:-2px;border-radius:24px;z-index:-1;
  background:linear-gradient(140deg,var(--gold),var(--purple),var(--cyan));
  opacity:.24;filter:blur(20px)}
.cta .sec-label{justify-content:center}
.cta .sec-label:before{display:none}
.cta .lede{margin:0 auto 34px;text-align:center}
.cta-terms{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px;
  font-size:13.5px;color:var(--fg-faint)}
.cta-terms span{background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:100px;padding:9px 19px;box-shadow:var(--lift-1)}
.cta-terms b{color:var(--gold)}

footer{padding:44px 0 60px;position:relative;z-index:2;font-size:14px;color:var(--fg-faint)}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-brand{display:inline-flex;align-items:center;gap:9px;color:var(--fg);font-family:var(--display);font-size:18px;text-decoration:none}
.footer-brand img{width:30px;height:30px}.footer-brand em{color:var(--gold);font-style:normal}
footer a{text-decoration:none;transition:color .18s}
footer a:hover{color:var(--gold)}
/* The footer's social row. These are real links to real accounts, unlike the platform icons in the
   services section, which illustrate what Mythika can publish TO and are marked aria-hidden. */
.social{display:inline-flex;align-items:center;gap:14px}
.social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:1px solid var(--line);border-radius:10px;color:var(--fg-dim);
  transition:color .18s,border-color .18s,transform .18s}
.social a:hover{color:var(--gold);border-color:var(--gold);transform:translateY(-2px)}
.social svg{width:19px;height:19px}
.guarantee{margin:30px 0 0;padding:16px 18px;border:1px solid var(--gold);border-radius:13px;
  background:linear-gradient(180deg,rgba(201,162,39,.07),transparent);font-size:15px;line-height:1.65}
.guarantee b{color:var(--gold)}
.guarantee em{display:block;font-style:normal;color:var(--fg-faint);font-size:13.5px;margin-top:7px}

/* guided intake */
.chat{max-width:620px;margin:0 auto;text-align:left;border-radius:16px;overflow:hidden;
  background:linear-gradient(160deg,var(--surface-2),var(--surface));
  border:1px solid var(--purple-line);box-shadow:0 0 40px rgba(192,38,211,.14),var(--lift-3)}
.chat-head{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.2)}
.chat-head b{color:var(--fg);font-family:var(--display);font-size:19px}
.chat-dot{width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.chat-sub{margin-left:auto;font-size:12.5px;color:var(--fg-faint)}
.chat-log{padding:20px;display:grid;gap:12px;max-height:340px;overflow-y:auto}
.msg{max-width:86%;padding:12px 16px;border-radius:13px;font-size:15px;line-height:1.55}
.msg.z{background:rgba(255,255,255,.045);border:1px solid var(--line);color:var(--fg-dim);
  border-bottom-left-radius:4px}
.msg.me{margin-left:auto;background:linear-gradient(135deg,var(--purple),var(--purple-hi));color:#fff;
  border-bottom-right-radius:4px}
.msg.err{background:rgba(252,165,165,.1);border:1px solid rgba(252,165,165,.35);color:#FCA5A5}
.msg.ok{background:rgba(110,231,183,.1);border:1px solid rgba(110,231,183,.35);color:#6EE7B7}
.chat-form{display:flex;gap:10px;padding:0 20px 18px}
.chat-form input{flex:1;min-width:0;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;color:var(--fg);font-family:var(--body);font-size:15.5px}
.chat-form input:focus{outline:none;border-color:var(--purple-hi);box-shadow:0 0 0 3px rgba(192,38,211,.15)}
.chat-form .btn{padding:14px 22px;font-size:14.5px;cursor:pointer;font-family:var(--body)}
.chat-foot{padding:0 20px 18px;font-size:13px;color:var(--fg-faint)}
.chat-foot a{color:var(--purple-hi)}
.chat-skip{background:none;border:1px solid var(--line);color:var(--fg-faint);border-radius:100px;
  padding:7px 15px;font-size:13px;cursor:pointer;font-family:var(--body);margin-top:4px}
.chat-skip:hover{color:var(--fg);border-color:var(--gold-line)}

/* qualifier: pick-one answers. Typing a budget band is friction nobody needs. */
.chat-opts{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 4px}
.chat-opt{background:none;border:1px solid var(--line);color:var(--fg-dim);border-radius:100px;
  padding:9px 16px;font-size:13.5px;cursor:pointer;font-family:var(--body);text-align:left;
  transition:border-color .16s,color .16s,background .16s}
.chat-opt:hover{color:var(--fg);border-color:var(--gold-line);background:rgba(255,255,255,.04)}
/* the recommendation card */
.rec{border:1px solid var(--gold-line);background:rgba(255,255,255,.03);border-radius:14px;
  padding:18px 20px;margin-top:4px}
.rec-eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint);
  font-weight:600;margin-bottom:8px}
.rec-title{font-size:19px;font-weight:650;color:var(--fg);line-height:1.3;margin-bottom:8px}
.rec-why{font-size:14px;color:var(--fg-dim);line-height:1.6}
.rec-meter{height:5px;border-radius:100px;background:rgba(255,255,255,.08);margin:14px 0 7px;overflow:hidden}
.rec-meter i{display:block;height:100%;border-radius:100px;
  background:linear-gradient(90deg,var(--purple),var(--purple-hi))}
.rec-band{font-size:12px;color:var(--fg-faint)}

/* services band */
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:1080px){.svc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.svc{grid-template-columns:1fr}}
.svc-hero{grid-column:1/-1;display:grid;grid-template-columns:1.25fr 1fr;gap:30px;align-items:center;
  padding:34px 34px 32px}
@media(max-width:820px){.svc-hero{grid-template-columns:1fr;gap:20px}}
.svc-hero .svc-tag{grid-column:1/-1}
.svc-hero h3{font-size:31px;margin-bottom:12px}
.svc-hero p{font-size:16.5px}
.svc-body{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.svc-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.svc-list li{position:relative;padding-left:26px;font-size:14.8px;color:var(--fg-dim);line-height:1.5}
.svc-list li:before{content:'';position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:50%;
  background:var(--purple-hi);box-shadow:0 0 10px rgba(244,114,208,.7)}
.svc-tag.svc-live{background:none;color:var(--cyan);border:1px solid rgba(34,211,238,.4);
  box-shadow:none;text-shadow:0 0 10px rgba(34,211,238,.35)}
.svc-spec{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  font-size:12.5px;letter-spacing:.06em;color:var(--fg-faint);text-transform:uppercase;font-weight:600}
.svc-card{position:relative;border-radius:15px;padding:30px 28px;display:flex;flex-direction:column;gap:14px;
  background:linear-gradient(160deg,var(--surface-2),var(--surface) 70%,#121724);
  border:1px solid var(--line);box-shadow:var(--lift-2);
  transition:transform .26s cubic-bezier(.2,.8,.3,1),box-shadow .26s}
.svc-card:hover{transform:translateY(-7px);box-shadow:var(--lift-3)}
.svc-now{border-color:var(--purple-line);
  box-shadow:0 0 34px rgba(192,38,211,.16),var(--lift-2)}
.svc-tag{align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand-navy);background:linear-gradient(120deg,var(--purple-hi),var(--purple));
  border-radius:100px;padding:5px 13px;box-shadow:0 0 16px rgba(244,114,208,.4)}
.svc-tag.svc-soon{background:none;color:var(--gold);border:1px solid var(--gold-line);box-shadow:none}
.svc-ico{width:46px;height:46px;color:var(--gold);filter:drop-shadow(0 0 10px rgba(232,194,100,.4))}
.svc-card h3{font-size:23px}
.svc-card p{margin:0;font-size:15px;flex:1}
.svc-card p b{color:var(--fg)}
.svc-card .btn{align-self:flex-start;padding:13px 24px;font-size:14px}

.fs-form{display:flex;gap:12px;max-width:620px;flex-wrap:wrap}
.fs-form input{flex:1;min-width:230px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:10px;padding:16px 18px;color:var(--fg);font-family:var(--body);font-size:16.5px;
  box-shadow:var(--lift-1);transition:border-color .2s,box-shadow .2s}
.fs-form input:focus{outline:none;border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(34,211,238,.16),var(--lift-1)}
.fs-form .btn{cursor:pointer;font-family:var(--body);white-space:nowrap}
.fs-note{font-size:13.5px;color:var(--fg-faint);margin:12px 0 0}
.fs-out{margin-top:30px;display:grid;gap:12px}
.fs-row{display:grid;grid-template-columns:186px 1fr;gap:18px;padding:17px 20px;border-radius:11px;
  background:linear-gradient(160deg,var(--surface-2),var(--surface));border:1px solid var(--line);
  box-shadow:var(--lift-1);align-items:baseline}
@media(max-width:700px){.fs-row{grid-template-columns:1fr;gap:6px}}
.fs-row b{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.fs-row span{font-size:15.2px;color:var(--fg-dim);line-height:1.55;word-break:break-word}
.fs-row.warn{border-left:2px solid #FCA5A5}
.fs-row.warn b{color:#FCA5A5}
.fs-row.good{border-left:2px solid #6EE7B7}
.fs-row.good b{color:#6EE7B7}
.fs-quote{font-family:var(--display);font-size:18px;color:var(--fg)}
.fs-cta{margin-top:8px;padding:22px 24px;border-radius:13px;border:1px solid var(--purple-line);
  background:linear-gradient(160deg,rgba(192,38,211,.1),transparent 70%);box-shadow:var(--lift-1)}
.fs-cta p{margin:0 0 15px;font-size:15.5px}
.fs-busy{font-size:15px;color:var(--fg-faint)}

.mk-wrap{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
@media(max-width:940px){.mk-wrap{grid-template-columns:1fr;gap:26px}}
.mk-controls{display:grid;gap:20px}
.mk-field{display:grid;gap:9px;border:0;padding:0;margin:0;min-width:0}
.mk-field>span,.mk-field>legend{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);padding:0}
.mk-field input{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  padding:15px 17px;color:var(--fg);font-family:var(--body);font-size:16.5px;width:100%;
  box-shadow:var(--lift-1);transition:border-color .2s,box-shadow .2s}
.mk-field input:focus{outline:none;border-color:var(--purple-hi);
  box-shadow:0 0 0 3px rgba(192,38,211,.16),var(--lift-1)}
.mk-chips{display:flex;gap:9px;flex-wrap:wrap}
.mk-chips button{background:var(--surface-2);border:1px solid var(--line);color:var(--fg-dim);
  border-radius:100px;padding:10px 18px;font-family:var(--body);font-size:14px;cursor:pointer;
  transition:all .18s}
.mk-chips button:hover{color:var(--fg);border-color:var(--gold-line)}
.mk-chips button.on{color:var(--brand-navy);font-weight:700;border-color:transparent;
  background:linear-gradient(120deg,var(--gold),#C9962F);box-shadow:0 0 16px rgba(232,194,100,.32)}
.mk-actions{display:flex;gap:12px;flex-wrap:wrap}
.mk-actions .btn{cursor:pointer;font-family:var(--body)}
.mk-honest{font-size:14.2px;color:var(--fg-faint);margin:0;line-height:1.6;
  border-left:2px solid var(--gold-line);padding-left:15px}
.mk-honest b{color:var(--fg-dim)}
.mk-stage{display:grid;gap:20px;justify-items:center}
.mk-canvas{width:100%;max-width:380px;aspect-ratio:1;display:grid;place-items:center;
  border-radius:16px;border:1px solid var(--line);box-shadow:var(--lift-2);
  background:radial-gradient(circle at 38% 30%,#232C42,#0A0D16 72%)}
.mk-canvas svg{width:78%;height:78%;filter:drop-shadow(0 10px 22px rgba(0,0,0,.6))}
.mk-cuts{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.mk-cuts>div{display:grid;gap:7px;justify-items:center}
.mk-cuts span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint)}
.mk-mini{width:78px;height:78px;border-radius:11px;display:grid;place-items:center;
  border:1px solid var(--line);background:#0A0D16;box-shadow:var(--lift-1)}
.mk-mini.mk-inv{background:var(--fg)}
.mk-mini svg{width:74%;height:74%}
#mkMini3{width:44px;height:44px;border-radius:8px}

.studio{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;
  padding:44px 42px;border-radius:18px;position:relative;
  background:linear-gradient(160deg,rgba(34,211,238,.06),transparent 55%),var(--surface);
  border:1px solid var(--line);box-shadow:var(--lift-2)}
@media(max-width:900px){.studio{grid-template-columns:1fr;gap:26px;padding:34px 26px}}
.studio h2{font-size:clamp(26px,3.3vw,35px);margin-bottom:16px}
.studio p{font-size:16px;margin:0 0 14px}
.studio-note{color:var(--fg-faint);font-size:14.6px;border-left:2px solid var(--cyan);
  padding-left:15px;margin-bottom:24px}
.studio-copy .btn{background:linear-gradient(135deg,#0EA5C4,var(--cyan));
  box-shadow:0 0 26px rgba(34,211,238,.3),0 12px 26px -12px rgba(14,165,196,.9),0 1px 0 rgba(255,255,255,.22) inset}
.studio-copy .btn:hover{box-shadow:0 0 40px rgba(34,211,238,.45),0 20px 34px -14px rgba(14,165,196,.95),0 1px 0 rgba(255,255,255,.3) inset}
.studio-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.studio-list li{padding:15px 18px;border-radius:11px;background:var(--surface-2);
  border:1px solid var(--line);border-left:2px solid var(--cyan);box-shadow:var(--lift-1)}
.studio-list b{display:block;color:var(--fg);font-size:15.5px;margin-bottom:2px}
.studio-list span{font-size:14px;color:var(--fg-faint);line-height:1.5}

.plat{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:30px 0 0;
  padding:16px 22px;border-radius:12px;border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(232,194,100,.05),transparent 70%);
  font-size:14px;color:var(--fg-faint)}
.plat span{font-weight:600;letter-spacing:.04em;color:var(--fg-dim)}
.plat svg{width:23px;height:23px;color:var(--purple-hi);flex:none;
  filter:drop-shadow(0 0 8px rgba(244,114,208,.45))}
.plat em{font-style:normal;flex:1;min-width:220px}

.chain{list-style:none;counter-reset:c;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px}
.chain li{counter-increment:c;position:relative;padding:18px 20px 18px 54px;border-radius:11px;
  background:linear-gradient(160deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);box-shadow:var(--lift-1);transition:transform .22s,box-shadow .22s}
.chain li:hover{transform:translateY(-4px);box-shadow:var(--lift-2)}
.chain li:before{content:counter(c);position:absolute;left:18px;top:18px;width:24px;height:24px;
  border-radius:7px;display:grid;place-items:center;font-size:12px;font-weight:800;
  color:var(--cyan);background:var(--cyan-soft);border:1px solid rgba(34,211,238,.34);
  box-shadow:0 0 12px rgba(34,211,238,.24)}
.chain b{display:block;color:var(--fg);font-size:15.5px;margin-bottom:3px}
.chain span{font-size:14px;color:var(--fg-faint);line-height:1.5}

.faq{display:grid;gap:12px;max-width:900px}
.faq details{border-radius:12px;border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(160deg,var(--surface-2),var(--surface));box-shadow:var(--lift-1)}
.faq summary{cursor:pointer;list-style:none;padding:20px 56px 20px 24px;position:relative;
  font-family:var(--display);font-size:20px;color:var(--fg);font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';position:absolute;right:24px;top:50%;transform:translateY(-50%);
  font-family:var(--body);font-size:22px;font-weight:400;color:var(--gold);transition:transform .2s}
.faq details[open] summary:after{transform:translateY(-50%) rotate(45deg)}
.faq summary:hover{color:var(--gold)}
.faq p{margin:0;padding:0 24px 22px;font-size:15.2px}
.faq a{color:var(--purple-hi)}

/* light sweeping across cards on hover — the sheen */
.brief-card,.svc-card,.god,.step{overflow:hidden}
.brief-card:after,.svc-card:after,.god:after{content:'';position:absolute;top:0;left:-80%;
  width:55%;height:100%;transform:skewX(-18deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(247,245,240,.055),transparent);
  transition:left .6s ease}
.brief-card:hover:after,.svc-card:hover:after,.god:hover:after{left:130%}

/* scroll reveal — sections rise in as you reach them */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
.rv.in{opacity:1;transform:none}

/* CTA heartbeat */
@keyframes beat{0%,100%{box-shadow:0 0 26px rgba(244,114,208,.34),0 12px 26px -12px rgba(192,38,211,.9),0 1px 0 rgba(255,255,255,.22) inset}
  50%{box-shadow:0 0 44px rgba(244,114,208,.6),0 12px 30px -12px rgba(192,38,211,1),0 1px 0 rgba(255,255,255,.22) inset}}
.btn-lg{animation:beat 2.8s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.btn-lg{animation:none}.rv{opacity:1;transform:none;transition:none}}
@media(max-width:480px){
  .wrap{padding-left:16px;padding-right:16px}
  .cta-box{padding:38px 14px 34px}
  .chat,.chat-form,.chat-form input,.chat-form .btn{min-width:0;max-width:100%}
  .chat-form{flex-direction:column;padding-left:14px;padding-right:14px}
  .chat-form .btn{width:100%}
  .chat-head{padding-left:14px;padding-right:14px;flex-wrap:wrap}
  .chat-sub{width:100%;margin-left:19px}
  .chat-log,.chat-foot{padding-left:14px;padding-right:14px}
}
/* Surface refinement: preserve the approved information architecture while making each region
   feel embedded in one environment instead of like a pile of independent rectangles. */
.scope div,.brief-card,.god,.step,.promise>div,.chat,.cta-box{
  border-color:transparent;border-top-color:rgba(216,168,75,.22);
  box-shadow:0 28px 60px -42px rgba(0,0,0,.96),inset 0 1px rgba(255,255,255,.035)}
.brief-card,.god,.step,.promise>div{background:linear-gradient(155deg,rgba(26,43,78,.82),rgba(13,28,57,.7))}
.deity-feature{border-color:rgba(216,168,75,.18);box-shadow:0 36px 72px -42px rgba(0,0,0,1),inset 0 1px rgba(255,255,255,.04)}
.team-portrait{border-color:rgba(216,168,75,.22);box-shadow:0 38px 78px -46px rgba(0,0,0,1)}
/* Compact narrative rhythm. Full-body specialists remain visible without turning six moments into
   six full-screen intermissions. On phones they become anchored side avatars; the Pantheon and
   process cards swipe horizontally instead of forming very long single-column stacks. */
section{padding:46px 0}
.deity-feature,.deity-feature--reverse{
  grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr);min-height:390px;margin:46px 0}
.deity-media{min-height:390px}
.deity-copy{padding:34px 36px}
.deity-copy h3{font-size:clamp(28px,3.25vw,40px)}
.deity-copy p{font-size:15.5px}
.platform-badge{margin-top:17px}.deity-signal{margin-top:18px}
@media(max-width:820px){
  section{padding:40px 0}
  .sec-lede{margin-bottom:34px}
  .deity-feature,.deity-feature--reverse{
    grid-template-columns:118px minmax(0,1fr);min-height:250px;margin:28px 0;
    background:radial-gradient(circle at 10% 60%,rgba(56,168,255,.12),transparent 32%),linear-gradient(90deg,rgba(13,31,64,.32),transparent 86%)}
  .deity-feature:before,.deity-feature--reverse:before{background:linear-gradient(90deg,transparent 0 18%,rgba(6,15,36,.12) 42%,rgba(6,15,36,.24) 100%)}
  .deity-feature--reverse .deity-media{order:1}.deity-feature--reverse .deity-copy{order:2}
  .deity-media{min-height:250px}
  .deity-media img{transform:none;filter:saturate(1.02) contrast(1.02) brightness(1.04) drop-shadow(0 16px 14px rgba(0,0,0,.42))}
  .deity-copy{padding:22px 16px 22px 8px}
  .deity-kicker{font-size:9px;letter-spacing:.15em;margin-bottom:7px}
  .deity-copy h3{font-size:clamp(22px,5vw,29px);line-height:1.03}
  .deity-copy p{font-size:14px;line-height:1.5;margin-top:8px}
  .platform-badge{margin-top:13px;padding:7px 10px;font-size:10px}
  .deity-signal{display:none}
  .team-portrait{margin:28px 0 36px;border-radius:14px}
}
@media(max-width:620px){
  section{padding:36px 0}.wrap{padding-inline:18px}
  .gods,.steps{display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    overscroll-behavior-inline:contain;padding:2px 2px 16px;scrollbar-width:thin}
  .god,.step{flex:0 0 min(82vw,340px);scroll-snap-align:start}
  .god{padding-bottom:22px}.god p{padding-inline:20px}.god .agent-signals,.god .agent-duty{margin-inline:20px}.god .agent-boundary{margin-inline:20px}
  .team-caption{padding:14px 16px}.team-caption b{font-size:18px}
}
@media(max-width:480px){
  .deity-feature,.deity-feature--reverse{grid-template-columns:96px minmax(0,1fr);min-height:224px;margin:22px 0}
  .deity-media{min-height:224px}
  .deity-copy{padding:18px 10px 18px 4px}
  .deity-copy h3{font-size:21px}
  .deity-copy p{font-size:13px;line-height:1.42}
  .platform-badge{font-size:9px;padding:6px 8px}
}

/* The Mythika Relay: a scroll-controlled 3D stage inspired by the owner's two motion references. */
.journey-section{position:relative;height:190vh;min-height:1100px;padding:0;background:#071126;isolation:isolate}
.journey-section:before{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(7,17,38,.08),rgba(7,17,38,.48) 42%,rgba(7,17,38,.88)),
  url('mythika-environment-v1-1600.webp') center/cover fixed no-repeat;opacity:.34;filter:saturate(.86) contrast(1.02)}
.journey-section>.wrap{position:sticky;z-index:4;top:106px;height:calc(100vh - 106px);min-height:560px;max-width:none;width:100%;padding:22px clamp(22px,5vw,80px) 18px;overflow:hidden}
.journey-section>.wrap:before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at calc(73% + var(--stage-drift,0px)) 45%,rgba(56,168,255,.17),transparent 25%),
  radial-gradient(circle at 25% 62%,rgba(192,38,211,.15),transparent 27%),
  linear-gradient(100deg,rgba(7,17,38,.96) 0 23%,rgba(7,17,38,.36) 54%,rgba(7,17,38,.82) 100%)}
.journey-section>.wrap:after{content:"";position:absolute;left:-5%;right:-5%;bottom:-17%;height:45%;pointer-events:none;transform:perspective(520px) rotateX(62deg);transform-origin:center bottom;background:
  repeating-linear-gradient(90deg,transparent 0 78px,rgba(216,168,75,.12) 79px 80px),
  repeating-linear-gradient(0deg,transparent 0 48px,rgba(216,168,75,.1) 49px 50px),
  linear-gradient(180deg,rgba(216,168,75,.12),transparent 65%);mask-image:linear-gradient(180deg,transparent,#000 28%,#000)}
.journey-intro{position:relative;z-index:8;display:block;margin:0}
.journey-intro h2{margin:0;font-size:clamp(21px,2.15vw,31px);line-height:1.02;max-width:720px}.journey-intro p{max-width:360px;margin:0;padding-left:15px;border-left:1px solid rgba(216,168,75,.3);color:var(--fg-dim);font-size:11.5px;line-height:1.45}
.relay-legend{position:relative;z-index:8;display:flex;align-items:center;gap:10px;margin:6px 0 0;color:var(--fg-faint);font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.relay-legend i{width:42px;height:2px;background:linear-gradient(90deg,var(--purple-hi),var(--cyan));box-shadow:0 0 14px rgba(56,168,255,.7)}
.handoff-track{position:absolute;z-index:4;inset:220px clamp(22px,5vw,80px) 62px;perspective:1200px;transform-style:preserve-3d}
.handoff-track:before{content:"";position:absolute;left:50%;top:48%;width:min(52vw,620px);aspect-ratio:1;border:1px solid rgba(216,168,75,.16);border-radius:50%;transform:translate(-50%,-50%) rotateX(68deg);box-shadow:0 0 80px rgba(56,168,255,.08),inset 0 0 50px rgba(192,38,211,.08)}
.handoff-track:after{display:none}
.handoff-card{--card-accent:56,168,255;position:absolute;inset:0;display:grid;grid-template-columns:minmax(320px,.9fr) minmax(340px,1.1fr);grid-template-rows:repeat(5,min-content);align-content:center;align-items:start;gap:0 clamp(20px,4vw,72px);overflow:visible;padding:24px 3%;opacity:0;visibility:hidden;transform:translate3d(0,42px,-120px) rotateX(3deg);filter:blur(5px);transition:opacity .48s ease,transform .72s cubic-bezier(.2,.82,.2,1),filter .5s ease,visibility .48s}
.handoff-card[data-agent="zeus"]{--card-accent:244,114,208}.handoff-card[data-agent="aphrodite"]{--card-accent:192,38,211}.handoff-card[data-agent="hermes"]{--card-accent:244,114,208}.handoff-card[data-agent="medusa"]{--card-accent:145,106,255}
.handoff-card.is-before{visibility:visible;opacity:0;transform:translate3d(-18%,-22px,-170px) rotateY(7deg);filter:blur(8px)}
.handoff-card.is-active{visibility:visible;opacity:1;transform:translate3d(0,0,0);filter:none}
.handoff-card.is-after{visibility:visible;opacity:0;transform:translate3d(18%,34px,-180px) rotateY(-7deg);filter:blur(9px)}
.handoff-card img{grid-column:2;grid-row:1/6;justify-self:center;align-self:end;width:min(39vw,510px);height:min(66vh,650px);object-fit:contain;object-position:center bottom;filter:brightness(1.08) saturate(.96) drop-shadow(0 32px 28px rgba(0,0,0,.62));transform:translate3d(calc((var(--scene-x,0) + var(--pointer-x,0)) * 1px),calc((var(--scene-y,0) + var(--pointer-y,0)) * 1px),calc(var(--pointer-z,0) * 1px)) rotateY(calc(var(--character-yaw,-1.5deg) + (var(--pointer-x,0) * .08deg))) scale(var(--scene-scale,.96));transition:transform .14s ease-out,filter .35s ease}
.handoff-card.is-active:hover img{filter:brightness(1.16) saturate(1.04) drop-shadow(0 38px 34px rgba(0,0,0,.66)) drop-shadow(0 0 22px rgba(var(--card-accent),.24))}
.handoff-card:before{content:"";position:absolute;z-index:-1;right:8%;top:48%;width:min(42vw,520px);aspect-ratio:1;border-radius:50%;transform:translateY(-50%) scale(var(--node-scale,.92));background:radial-gradient(circle,rgba(var(--card-accent),.26),rgba(var(--card-accent),.08) 32%,transparent 68%);filter:blur(2px);animation:relayAura 3.4s ease-in-out infinite}
.handoff-card:after{content:"";position:absolute;right:calc(28% - 19px);top:41%;width:38px;height:38px;border-radius:50%;background:radial-gradient(circle,#eaf8ff 0 6%,var(--brand-signal-blue) 14%,rgba(56,168,255,.38) 30%,transparent 68%);box-shadow:0 0 28px rgba(56,168,255,.78);animation:relayNode 1.7s ease-in-out infinite}
.handoff-card>span,.handoff-card>h3,.handoff-card>div,.handoff-card>p{grid-column:1;position:relative;z-index:3;max-width:520px}
.handoff-step{grid-row:1;color:var(--gold);font-size:10px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.handoff-card h3{grid-row:2;font-size:clamp(32px,4vw,56px);line-height:.94;margin:8px 0 10px;text-wrap:balance;text-shadow:0 18px 45px rgba(0,0,0,.5)}
.handoff-role{grid-row:3;color:rgb(var(--card-accent));font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.handoff-card p{grid-row:4;margin:14px 0 18px;color:var(--fg-dim);font-size:clamp(14px,1.25vw,18px);line-height:1.58;border-left:2px solid rgba(var(--card-accent),.7);padding-left:17px}
.handoff-next{grid-row:5;width:max-content;max-width:100%;padding:12px 16px;border:1px solid rgba(216,168,75,.3);border-radius:999px;background:rgba(7,17,38,.6);backdrop-filter:blur(10px);color:var(--purple-hi);font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 16px 38px -26px #000}
.journey-progress{position:absolute;z-index:9;left:clamp(22px,5vw,80px);right:clamp(22px,5vw,80px);bottom:21px;display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin:0;padding:0;list-style:none}
.journey-progress li{position:relative;padding-top:11px;color:rgba(238,241,248,.42);font-size:9px;font-weight:800;letter-spacing:.1em;text-align:center;text-transform:uppercase;transition:color .35s}
.journey-progress li:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:rgba(216,168,75,.16);transition:background .35s,box-shadow .35s,transform .35s}
.journey-progress li.is-active{color:#fff}.journey-progress li.is-active:before{background:linear-gradient(90deg,var(--purple-hi),var(--cyan));box-shadow:0 0 14px rgba(56,168,255,.6);transform:scaleY(1.8)}
.journey-loop{display:none!important}
@keyframes relayNode{0%,100%{transform:scale(.82);opacity:.65}50%{transform:scale(1.25);opacity:1}}
@keyframes relayAura{0%,100%{transform:translateY(-50%) scale(.9)}50%{transform:translateY(-50%) scale(1.04)}}

/* Progressive disclosure keeps every proof point without making it compulsory scrolling. */
.content-disclosure{margin:24px 0 0;border-top:1px solid rgba(216,168,75,.24);border-bottom:1px solid rgba(216,168,75,.14)}
.content-disclosure>summary{cursor:pointer;list-style:none;position:relative;padding:18px 52px 18px 18px;color:var(--fg);
  font:700 clamp(18px,2.2vw,24px)/1.25 var(--display);background:linear-gradient(90deg,rgba(216,168,75,.1),rgba(244,114,208,.05),transparent)}
.content-disclosure>summary::-webkit-details-marker{display:none}
.content-disclosure>summary:after{content:'+';position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--gold);font:500 26px/1 var(--body)}
.content-disclosure[open]>summary:after{transform:translateY(-50%) rotate(45deg)}
.disclosure-body{padding:24px 0 10px}
.faq-gateway{margin-top:0}.faq-gateway>summary{border:1px solid rgba(244,114,208,.32);border-radius:12px;color:var(--fg);
  background:linear-gradient(90deg,rgba(192,38,211,.18),rgba(216,168,75,.09),transparent)}
.faq-gateway[open]>summary{border-radius:12px 12px 0 0}
section[id]{scroll-margin-top:102px}
@media(max-width:900px){section[id]{scroll-margin-top:122px}.journey-intro{display:block}.journey-intro p{display:none}.meander{height:8px}.journey-section>.wrap{top:112px;height:calc(100svh - 112px);min-height:0}.journey-intro h2{font-size:clamp(20px,3.2vw,26px);max-width:76%}.relay-legend{margin-top:5px}.handoff-track{inset:180px 18px 50px}.handoff-card{grid-template-columns:minmax(0,.95fr) minmax(230px,1.05fr);align-content:center;padding:12px 0}.handoff-card img{width:min(50vw,410px);height:min(58svh,540px)}.handoff-card h3{font-size:clamp(29px,5vw,40px);line-height:.96}.handoff-card p{font-size:14px;line-height:1.43;margin-top:10px}.handoff-card:after{right:25%}}
@media(max-height:700px) and (min-width:621px){.journey-section>.wrap{padding-top:9px}.journey-section .sec-label{margin-bottom:3px}.journey-intro h2{font-size:clamp(19px,2.7vw,25px);max-width:72%}.relay-legend{font-size:7.5px}.handoff-track{inset:175px 18px 42px}.handoff-card h3{font-size:clamp(27px,4.2vw,36px)}.handoff-card p{font-size:13px;line-height:1.38}.handoff-card img{height:min(55svh,460px)}.handoff-next{padding:9px 12px}.journey-loop{display:none}}
@media(max-width:620px){
  .journey-section{height:180vh;min-height:1050px}.journey-section>.wrap{top:112px;padding:8px 14px}.journey-section .sec-label{margin-bottom:2px;font-size:8px;letter-spacing:.12em}.journey-intro h2{font-size:18px;line-height:1;max-width:88%}.relay-legend{margin-top:7px;font-size:6.7px;letter-spacing:.08em}.relay-legend i{width:24px}.handoff-track{inset:150px 0 42px}.handoff-card{display:block;padding:0}.handoff-card img{position:absolute;right:-12%;bottom:-3%;width:78%;height:76%;opacity:.98;mask-image:linear-gradient(180deg,#000 0 78%,transparent 99%)}.handoff-card>span,.handoff-card>h3,.handoff-card>div,.handoff-card>p{position:absolute;left:16px;right:16px;max-width:88%;grid-column:auto}.handoff-step{top:2%}.handoff-card h3{top:8%;font-size:clamp(27px,7.8vw,34px);max-width:68%}.handoff-role{top:28%;max-width:70%}.handoff-card p{top:35%;max-width:70%;font-size:12.25px;line-height:1.38;background:linear-gradient(90deg,rgba(7,17,38,.94) 0 78%,rgba(7,17,38,.2));padding:8px 6px 8px 14px}.handoff-next{top:auto!important;bottom:18px;right:auto;width:auto}.handoff-card:before{right:-15%;width:86vw}.handoff-card:after{right:18%;top:44%}.journey-progress{left:14px;right:14px;bottom:10px}.journey-progress li{font-size:0}
  .content-disclosure>summary{padding:15px 44px 15px 14px;font-size:18px}.disclosure-body{padding-top:18px}
}
@media(prefers-reduced-motion:reduce){.journey-section{height:auto;min-height:0;padding:58px 0}.journey-section>.wrap{position:relative;top:auto;height:auto;min-height:0;overflow:visible}.handoff-track{position:relative;inset:auto;display:grid;gap:18px;margin-top:24px}.handoff-card,.handoff-card.is-active,.handoff-card.is-before,.handoff-card.is-after{position:relative;display:grid;min-height:430px;opacity:1;visibility:visible;filter:none;transform:none}.handoff-card img{transform:none}.journey-progress{display:none}.journey-loop{position:relative;right:auto;top:auto;margin-top:18px}.handoff-card:before,.handoff-card:after{animation:none}}

/* The two main sales experiences exchange interaction models: the Relay becomes a direct selector,
   while the offer catalogue becomes the compact scroll-controlled story. Both live in one continuous
   environment so neither section reads as a pasted-on background panel. */
.experience-swap{display:flex;flex-direction:column;isolation:isolate;background:linear-gradient(180deg,rgba(7,17,38,.38),rgba(7,17,38,.78)),url('mythika-environment-v1-1600.webp') center/cover fixed no-repeat}.experience-swap #journey{order:1}.experience-swap #services-overview{order:2}
.experience-swap #journey,.experience-swap #services-overview{background:transparent}
.journey-section.journey-selector{height:auto;min-height:0;padding:clamp(22px,3.5vh,34px) 0 28px}
.journey-section.journey-selector:before{opacity:1;filter:none;background:linear-gradient(105deg,rgba(7,17,38,.9),rgba(7,17,38,.42) 54%,rgba(7,17,38,.72)),radial-gradient(circle at 76% 50%,rgba(56,168,255,.12),transparent 32%)}
.journey-selector>.wrap{position:relative;top:auto;height:auto;min-height:0;max-width:1440px;overflow:visible;padding:0 clamp(18px,5vw,72px)}
.journey-selector>.wrap:after{display:none}
.journey-selector .relay-legend,.journey-selector .journey-progress,.journey-selector .journey-loop{display:none}
.journey-selector .handoff-track{position:relative;inset:auto;display:block;height:clamp(390px,52svh,470px);min-height:0;margin-top:14px;overflow:hidden;overscroll-behavior:auto;border:1px solid rgba(216,168,75,.22);background:linear-gradient(110deg,rgba(5,13,31,.82),rgba(5,13,31,.48));perspective:1200px;touch-action:pan-y pinch-zoom}
.journey-selector .handoff-track:before{display:none}
.journey-selector .handoff-track:after{content:"";display:block;position:absolute;z-index:7;inset:-20% auto -20% -30%;width:18%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(56,168,255,.11),rgba(244,114,208,.13),transparent);transform:skewX(-14deg) translateX(-220%);mix-blend-mode:screen;animation:relayLightPass 7s ease-in-out infinite}
.journey-selector .handoff-card,.journey-selector .handoff-card.is-active,.journey-selector .handoff-card.is-before,.journey-selector .handoff-card.is-after{position:relative;inset:auto;display:grid;height:100%;min-height:0;overflow:hidden;opacity:1;visibility:visible;filter:none;transform:none;padding:20px 3%;animation:relayCardSelect .9s cubic-bezier(.2,.82,.2,1) both}
.journey-selector .handoff-card[hidden]{display:none}
.journey-selector .handoff-card img{height:min(49svh,450px);animation:relayCharacterFloat 4.8s ease-in-out infinite;will-change:transform,filter}
.relay-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));overscroll-behavior-inline:contain;overscroll-behavior-block:auto;border:1px solid rgba(216,168,75,.2);border-top:0;background:rgba(5,13,31,.72)}
.relay-tab{appearance:none;border:0;border-right:1px solid rgba(247,245,240,.07);background:transparent;color:var(--fg-faint);padding:9px 10px;text-align:left;font:800 9px/1.15 var(--body);letter-spacing:.08em;cursor:pointer;transition:background .2s,color .2s,transform .2s}.relay-tab:last-child{border-right:0}.relay-tab b,.relay-tab small{display:block}.relay-tab b{margin-top:3px;color:var(--fg);font-family:var(--display);font-size:17px;letter-spacing:0}.relay-tab small{margin-top:2px;color:var(--gold);font-size:7px;text-transform:uppercase}.relay-tab:hover,.relay-tab.is-active{background:linear-gradient(180deg,rgba(216,168,75,.17),rgba(56,168,255,.06));color:var(--fg);transform:translateY(-2px)}.relay-tab.is-active{box-shadow:inset 0 3px var(--purple-hi)}
@keyframes relayCardSelect{from{opacity:0;transform:translate3d(22px,10px,-36px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes relayCharacterFloat{0%,100%{transform:translate3d(calc((var(--scene-x,0) + var(--pointer-x,0)) * 1px),calc((var(--scene-y,0) + var(--pointer-y,0)) * 1px),calc(var(--pointer-z,0) * 1px)) rotateY(calc(var(--character-yaw,-1.5deg) + (var(--pointer-x,0) * .08deg))) scale(var(--scene-scale,.96));filter:brightness(1.08) saturate(.98) drop-shadow(0 30px 26px rgba(0,0,0,.62))}50%{transform:translate3d(calc((var(--scene-x,0) + var(--pointer-x,0)) * 1px),calc((var(--scene-y,0) + var(--pointer-y,0)) * 1px - 4px),calc(var(--pointer-z,0) * 1px)) rotateY(calc(var(--character-yaw,-1.5deg) + (var(--pointer-x,0) * .08deg))) scale(calc(var(--scene-scale,.96) + .005));filter:brightness(1.13) saturate(1.01) drop-shadow(0 34px 28px rgba(0,0,0,.66)) drop-shadow(0 0 14px rgba(var(--card-accent),.16))}}
@keyframes relayLightPass{0%,18%{opacity:0;transform:skewX(-14deg) translateX(-220%)}38%{opacity:1}62%,100%{opacity:0;transform:skewX(-14deg) translateX(900%)}}
.offer-scroll-section{height:auto;min-height:0;padding:38px 0;position:relative;overscroll-behavior:auto}
.offer-scroll-section>.wrap{position:relative;top:auto;height:auto;display:flex;flex-direction:column;justify-content:center;overflow:visible;padding-top:0;padding-bottom:0}
.offer-scroll-section .offer-clarity-head{margin-bottom:12px}.offer-scroll-section .agency-scene{min-height:min(39vh,350px)}.offer-scroll-section .offer-terms{margin-top:10px}.offer-scroll-section .capability-rail{padding-top:10px}
@media(max-width:800px){.journey-selector>.wrap{padding-inline:14px}.relay-tabs{display:flex;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;touch-action:pan-x}.relay-tab{flex:0 0 118px;scroll-snap-align:start}.journey-selector .handoff-track{height:clamp(400px,56svh,470px)}.journey-selector .handoff-card,.journey-selector .handoff-card.is-active{height:100%;min-height:0}.offer-scroll-section{height:auto;min-height:0;padding:28px 0}.offer-scroll-section>.wrap{justify-content:flex-start}.offer-scroll-section .offer-clarity-head{margin-bottom:10px}.offer-scroll-section .agency-scene{min-height:410px}}
@media(max-width:520px){.journey-section.journey-selector{padding:18px 0 22px}.journey-selector .journey-intro h2{max-width:100%;font-size:18px}.journey-selector .handoff-track{height:clamp(390px,55svh,455px);margin-top:10px}.journey-selector .handoff-card,.journey-selector .handoff-card.is-active{display:block;height:100%;padding:0}.journey-selector .handoff-card img{z-index:1;right:-8%;bottom:-4%;width:72%;height:72%;opacity:.72;mask-image:linear-gradient(180deg,#000 0 74%,transparent 99%)}.journey-selector .handoff-card>span,.journey-selector .handoff-card>h3,.journey-selector .handoff-card>div,.journey-selector .handoff-card>p{z-index:3;left:16px;right:16px;max-width:76%}.journey-selector .handoff-step{top:7%}.journey-selector .handoff-card h3{top:13%;font-size:clamp(25px,7.4vw,31px);max-width:68%}.journey-selector .handoff-role{top:31%;max-width:76%}.journey-selector .handoff-card p{top:38%;max-width:76%;font-size:11.5px;line-height:1.36;background:linear-gradient(90deg,rgba(7,17,38,.96) 0 82%,rgba(7,17,38,.12));padding:8px 6px 8px 12px}.journey-selector .handoff-next{left:16px;right:auto;bottom:14px;width:calc(100% - 32px);padding:9px 12px;text-align:center}.journey-selector .handoff-card:before{right:-22%;width:92vw}.journey-selector .handoff-card:after{right:18%;top:49%}.offer-scroll-section{height:auto;min-height:0;padding:24px 0}.offer-scroll-section .offer-clarity-head h2{font-size:28px}.offer-scroll-section .offer-clarity-head p{font-size:12px}.offer-scroll-section .agency-scene{min-height:470px}.offer-scroll-section .offer-terms{display:none}.offer-scroll-section .capability-rail{display:none}}
@media(prefers-reduced-motion:reduce){.offer-scroll-section{height:auto;min-height:0;padding:46px 0}.offer-scroll-section>.wrap{position:relative;top:auto;height:auto;overflow:visible}.relay-tab:hover,.relay-tab.is-active{transform:none}.journey-selector .handoff-card,.journey-selector .handoff-card img,.journey-selector .handoff-track:after{animation:none}}

/* One responsive scale system across the entire page. Every interactive chapter fits inside a
   useful viewport, mobile art stays subordinate to its message, and later sections keep the same
   compact rhythm established by the Relay. */
.agency-scene:before{animation:agencyBackdropDrift 8s ease-in-out infinite alternate}
.agent-panel:not([hidden]) .agent-art{animation:agentFigureFloat 5.4s ease-in-out infinite}
@keyframes agencyBackdropDrift{from{filter:brightness(.94);transform:scale(1)}to{filter:brightness(1.06);transform:scale(1.018)}}
@keyframes agentFigureFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.012)}}
#pantheon{padding:38px 0}#faq{padding:28px 0}#start.story-scene{padding:46px 0}footer{padding:30px 0 36px}
@media(max-width:820px){.hero{padding:30px 0 34px}.hero-grid{gap:12px}.eyebrow{margin-bottom:14px;padding:6px 12px;font-size:10px}.hero h1{font-size:clamp(38px,10.5vw,51px);margin-bottom:16px}.hero .lede{font-size:16px;line-height:1.5;margin-bottom:12px}.hero .hook{font-size:14px;line-height:1.48;margin-bottom:14px;padding-block:7px}.hero .launch-signal{margin-bottom:13px;padding:8px 10px;font-size:12px}.hero .seal-stage{width:min(72vw,320px);margin:14px auto 0}.experience-lab{padding:28px 0}.experience-head{margin-bottom:14px}.experience-tabs{margin-top:12px}.experience-panels,.experience-panel{min-height:430px}.experience-panel>.wrap{padding:24px 16px}#pantheon{padding:28px 0}.agent-console{margin:14px 0 4px}.agent-panel{min-height:460px;padding:20px 14px 188px}.agent-art{height:44%}.agent-contract{margin-top:12px}.agent-contract div{padding:8px 9px}#faq{padding:20px 0}#start.story-scene{padding:28px 0}.cta-box{padding:24px 14px 22px}.cta .lede{margin-bottom:20px}.cta-terms{gap:7px;margin-top:18px}.cta-terms span{padding:7px 11px;font-size:11px}footer{padding:24px 0 28px}}
@media(max-width:480px){.agent-panel{min-height:470px}.agent-panel h3{font-size:32px}.agent-contract{grid-template-columns:1fr 1fr}.experience-panels,.experience-panel{min-height:420px}}
@media(prefers-reduced-motion:reduce){.agency-scene:before,.agent-panel:not([hidden]) .agent-art{animation:none}}

/* Every remaining chapter continues the same client journey instead of reverting to stacked boxes. */
.story-scene{min-height:360px;overflow:hidden;border-top:1px solid rgba(216,168,75,.14);isolation:isolate;background:
  linear-gradient(90deg,rgba(7,17,38,.95) 0 38%,rgba(7,17,38,.76) 62%,rgba(7,17,38,.58)),
  linear-gradient(180deg,rgba(7,17,38,.18),rgba(7,17,38,.78)),
  url('mythika-environment-v1-1600.webp') center 52%/cover fixed no-repeat}
.story-scene:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:linear-gradient(112deg,transparent 0 46%,rgba(216,168,75,.12) 46.15% 46.35%,transparent 46.5%),radial-gradient(ellipse at 50% 105%,rgba(192,38,211,.13),transparent 55%);transform:translateX(var(--world-x,0px));transition:transform .12s linear}
.story-scene:after{content:"";position:absolute;z-index:0;right:1%;bottom:-2%;width:min(48vw,640px);height:22%;pointer-events:none;background:radial-gradient(ellipse,rgba(0,0,0,.66),rgba(7,17,38,.24) 42%,transparent 72%);filter:blur(7px)}
.story-scene.guide-left:after{right:auto;left:1%}
.story-scene>.wrap{min-height:250px;padding-right:clamp(330px,34vw,500px);transform:translateY(var(--chapter-y,0px));transition:transform .12s linear}
.story-scene.guide-left>.wrap{padding-right:32px;padding-left:clamp(330px,34vw,500px)}
.chapter-guide{position:absolute;z-index:3;right:clamp(8px,4vw,68px);bottom:-3%;width:clamp(350px,34vw,540px);height:106%;object-fit:contain;object-position:center bottom;pointer-events:none;opacity:.82;filter:brightness(1.02) saturate(.96) contrast(1.03) drop-shadow(0 32px 26px rgba(0,0,0,.72));transform:translate3d(var(--guide-x,0px),var(--guide-y,0px),0) scale(var(--guide-scale,.96));transition:transform .12s linear,opacity .45s}
.guide-left>.chapter-guide{right:auto;left:clamp(12px,5vw,72px)}
.story-scene:hover>.chapter-guide{opacity:.86}
.story-scene .content-disclosure{border-color:rgba(216,168,75,.17);background:linear-gradient(90deg,rgba(7,17,38,.32),transparent)}
.story-scene .content-disclosure>summary{background:linear-gradient(90deg,rgba(216,168,75,.1),rgba(56,168,255,.05),transparent);border-left:2px solid rgba(216,168,75,.46)}
.story-scene .svc-card{border:0;border-left:1px solid rgba(216,168,75,.3);border-radius:0;background:linear-gradient(90deg,rgba(19,35,71,.48),transparent);box-shadow:none}
.story-scene .svc-card:hover{transform:translateX(6px)}
.aphrodite-work{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:760px;margin:28px 0 22px}
.aphrodite-task{min-height:138px;padding:18px 20px;border:1px solid rgba(244,114,208,.22);border-left:3px solid rgba(244,114,208,.72);background:linear-gradient(135deg,rgba(52,26,75,.5),rgba(13,31,64,.42));box-shadow:inset 0 1px rgba(255,255,255,.035)}
.aphrodite-task span{display:block;color:var(--purple-hi);font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:7px}
.aphrodite-task b{display:block;color:var(--fg);font-family:var(--display);font-size:21px;line-height:1.08;margin-bottom:7px}
.aphrodite-task p{font-size:13.5px;line-height:1.55;margin:0;color:var(--fg-faint)}
.aphrodite-contract{max-width:760px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(216,168,75,.18);border:1px solid rgba(216,168,75,.18)}
.aphrodite-contract div{padding:14px 16px;background:rgba(7,17,38,.88)}
.aphrodite-contract b{display:block;color:var(--gold);font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:5px}
.aphrodite-contract span{display:block;color:var(--fg-faint);font-size:12.5px;line-height:1.5}
.story-scene .sec-label:before{content:"";display:inline-block;width:28px;height:1px;margin:0 10px 3px 0;background:linear-gradient(90deg,var(--purple-hi),var(--cyan));box-shadow:0 0 8px rgba(56,168,255,.5)}
#why .svc{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
#why .svc-card{min-width:0;padding:28px 26px}
#start.story-scene>.wrap{max-width:1180px;padding-left:clamp(330px,34vw,500px);padding-right:32px}
#start .cta-box{width:100%;max-width:720px;margin-left:auto}

/* Every chapter shares the Relay's scroll-as-story grammar. Without JavaScript the content stays
   static and fully readable; motion-ready is applied only when continuous motion is allowed. */
html.motion-ready main>section:not(.journey-section)>.wrap,
html.motion-ready main>section:not(.journey-section)>.experience-shell{
  opacity:var(--cinema-opacity,1);
  transform:translate3d(0,calc(var(--chapter-y,0px) + var(--cinema-shift,0px)),0) scale(var(--cinema-scale,1));
  transform-origin:center center;will-change:transform,opacity}
html.motion-ready main>section:not(.journey-section):before{transform:translate3d(var(--world-x,0px),var(--cinema-bg,0px),0)}

/* The three free experiences are one compact studio stage with guided scene changes. */
.experience-lab{padding:54px 0;background:linear-gradient(180deg,rgba(7,17,38,.86),rgba(12,28,59,.78),rgba(7,17,38,.9)),url('mythika-environment-v1-1600.webp') center/cover fixed no-repeat;overflow:hidden}
.experience-lab:before{content:"";position:absolute;inset:-20%;background:conic-gradient(from 90deg at 50% 50%,transparent,rgba(192,38,211,.1),transparent 32%,rgba(56,168,255,.09),transparent 68%);animation:worldTurn 24s linear infinite;pointer-events:none}
.experience-shell{position:relative;z-index:4;width:min(1180px,calc(100% - 48px));margin:0 auto}
.experience-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:22px}.experience-head h2{margin:6px 0 0;max-width:620px}
.experience-tabs{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.experience-tab{appearance:none;border:1px solid rgba(216,168,75,.2);border-radius:999px;background:rgba(7,17,38,.48);color:var(--fg-faint);padding:10px 14px;font:800 10px/1 var(--body);letter-spacing:.07em;text-transform:uppercase;cursor:pointer;transition:color .3s,border-color .3s,box-shadow .3s,transform .3s}
.experience-tab:hover{transform:translateY(-2px);color:var(--fg)}.experience-tab.is-active{color:#fff;border-color:rgba(244,114,208,.58);box-shadow:0 0 24px rgba(192,38,211,.16),inset 0 0 18px rgba(56,168,255,.05)}
.experience-panels{position:relative;min-height:440px;border-top:1px solid rgba(216,168,75,.18);border-bottom:1px solid rgba(216,168,75,.14);background:linear-gradient(135deg,rgba(19,35,71,.28),rgba(7,17,38,.18));overflow:hidden}
.experience-panel{position:relative;min-height:440px;padding:0;animation:experienceEnter .7s cubic-bezier(.2,.8,.2,1)}
.experience-panel>.wrap{max-width:none;padding:48px clamp(24px,4vw,54px)}
.experience-panel:after{content:"";position:absolute;right:-3%;bottom:-12%;width:300px;height:92%;background:center bottom/contain no-repeat;opacity:.14;filter:drop-shadow(0 24px 20px #000);pointer-events:none}
#fivesec:after{background-image:url('../pantheon/avatars/athena-fullbody-v7-clean-1100.webp')}#mark:after{background-image:url('../pantheon/avatars/aphrodite-fullbody-v7-clean-1100.webp')}#studio:after{background-image:url('../pantheon/avatars/hermes-fullbody-v7-clean-1100.webp')}
.experience-panel .wrap>*{position:relative;z-index:1}.experience-panel .mk-stage,.experience-panel .studio-list{position:relative;z-index:2}
@keyframes experienceEnter{from{opacity:0;transform:translate3d(5%,18px,-40px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes worldTurn{to{transform:rotate(360deg)}}
@media(max-width:1050px){.story-scene>.wrap,.story-scene.guide-left>.wrap,#start.story-scene>.wrap{padding-left:24px;padding-right:38%}.chapter-guide,.guide-left>.chapter-guide{left:auto;right:-4%;width:43%;opacity:.6}#start .cta-box{max-width:none}#why .svc{max-width:none}}
@media(max-width:900px){.experience-head{display:block}.experience-tabs{justify-content:flex-start;margin-top:18px}.experience-panels,.experience-panel{min-height:480px}.story-scene{background-attachment:scroll}}
@media(max-width:700px){.aphrodite-work{grid-template-columns:1fr;gap:9px}.aphrodite-task{min-height:0;padding:15px 16px}.aphrodite-contract{grid-template-columns:1fr}}
@media(max-width:700px){.story-scene{min-height:340px}.story-scene>.wrap,.story-scene.guide-left>.wrap,#start.story-scene>.wrap{padding-left:18px;padding-right:18px}.chapter-guide,.guide-left>.chapter-guide{left:auto;right:-18%;top:122px;bottom:auto;width:66%;height:min(112vw,480px);object-fit:contain;object-position:center top;opacity:.42;filter:brightness(.86) saturate(.9) drop-shadow(0 18px 16px rgba(0,0,0,.7));mask-image:linear-gradient(180deg,#000 0 76%,transparent 100%)}.story-scene:hover>.chapter-guide{opacity:.46}.story-scene:after{width:74%}.story-scene h2,.story-scene .sec-lede{position:relative;z-index:4;text-shadow:0 8px 24px rgba(2,8,20,.9)}.experience-lab{padding:34px 0}.experience-shell{width:calc(100% - 28px)}.experience-head h2{font-size:28px}.experience-tabs{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none}.experience-tab{flex:0 0 auto;text-align:left}.experience-panels,.experience-panel{min-height:500px}.experience-panel>.wrap{padding:26px 16px}.experience-panel:after{width:65%;opacity:.08}.cta-box{padding:30px 18px 26px}.brief-route{gap:5px}.brief-route span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.chapter-guide,.story-scene>.wrap,.story-scene:before{transform:none!important;transition:none}.experience-lab:before{animation:none}.experience-panel{animation:none}}

/* Final narrow-screen sizing is intentionally last so legacy section-specific media rules cannot
   re-expand the refined layouts. */
@media(max-width:700px){.offer-scroll-section .agency-scene{height:440px;min-height:0;padding:20px 16px 160px;overflow:hidden}.offer-scroll-section .agency-scene:before{background:linear-gradient(180deg,rgba(8,19,43,.99) 0 58%,rgba(8,19,43,.16) 88%),var(--scene-image) 78% 105%/auto 48% no-repeat}.offer-scroll-section .agency-scene h3{font-size:27px}.offer-scroll-section .scene-results{margin:12px 0}.experience-lab{padding:26px 0}.experience-head{margin-bottom:12px}.experience-panels,.experience-panel{min-height:420px}.experience-panel>.wrap{padding:22px 16px}}

/* Approved public-character standard: clean full-body v7 art, strong foreground visibility, and
   only a restrained weight shift. Retired fantasy/work-scene JPEGs are not used on this surface. */
.agency-scene{isolation:isolate}.agency-scene:before{background:linear-gradient(90deg,rgba(8,19,43,.99) 0 58%,rgba(8,19,43,.5) 72%,rgba(8,19,43,.12) 100%);filter:none;transform:none;animation:none}.agency-scene>*:not(.scene-character){position:relative;z-index:2}.scene-character{position:absolute;z-index:1;right:1%;bottom:-2%;width:36%;height:104%;object-fit:contain;object-position:center bottom;opacity:1;filter:brightness(1.12) saturate(1.04) contrast(1.02) drop-shadow(0 24px 24px rgba(0,0,0,.6));transform-origin:center bottom;animation:operatorBreath 5.6s ease-in-out infinite}
.agent-panel>.agent-art{z-index:0;inset:auto 1% 0 auto;width:46%;height:96%;object-fit:contain;object-position:center bottom;opacity:1;filter:brightness(1.12) saturate(1.03) contrast(1.02) drop-shadow(0 24px 24px rgba(0,0,0,.62));transform-origin:center bottom}.agent-panel:not([hidden])>.agent-art{animation:operatorBreath 5.9s ease-in-out infinite}.agent-panel:before{z-index:1;background:linear-gradient(90deg,rgba(8,19,43,.99) 0 54%,rgba(8,19,43,.64) 68%,rgba(8,19,43,.04) 100%)}.agent-panel:after{z-index:0}.agent-panel>*:not(.agent-art){position:relative;z-index:2}
.experience-panel:after{right:1%;bottom:0;width:34%;height:96%;opacity:.98;filter:brightness(1.12) saturate(1.03) drop-shadow(0 24px 22px rgba(0,0,0,.62));transform-origin:center bottom;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%);animation:operatorBreath 5.8s ease-in-out infinite}
@keyframes operatorBreath{0%,100%{transform:translate3d(0,0,0) rotateX(var(--character-pitch,0deg)) rotateY(var(--character-yaw,-1.5deg)) scale(1)}50%{transform:translate3d(0,-4px,8px) rotateX(var(--character-pitch,0deg)) rotateY(var(--character-yaw-active,.5deg)) scale(1.005)}}
@media(max-width:760px){.scene-character{right:-4%;bottom:-2%;width:54%;height:58%}.agent-panel>.agent-art{right:-3%;width:72%;height:54%}.agent-panel:before{background:linear-gradient(180deg,rgba(8,19,43,.99) 0 51%,rgba(8,19,43,.5) 67%,rgba(8,19,43,.04) 100%)}.experience-panel:after{right:-6%;width:52%;height:68%;opacity:.94}}
@media(max-width:520px){.scene-character{right:-4%;width:52%;height:46%;filter:brightness(1.16) saturate(1.05) drop-shadow(0 20px 20px rgba(0,0,0,.58))}.experience-panel:after{right:-8%;width:54%;height:57%;opacity:.98}.agent-panel>.agent-art{width:76%;height:52%}}
@media(prefers-reduced-motion:reduce){.scene-character,.agent-panel:not([hidden])>.agent-art,.experience-panel:after{animation:none}}

/* Full-site cinematic camera and type system.
   One set of tokens now controls browser zoom resilience, reading scale, character framing and
   perspective. Section-specific art may change, but its camera grammar must not. */
:root{
  --page-gutter:clamp(18px,3vw,36px);
  --type-body:clamp(15.5px,calc(14.8px + .18vw),17px);
  --type-h1:clamp(40px,5vw,66px);
  --type-h2:clamp(30px,3.45vw,47px);
  --type-h3:clamp(24px,2.7vw,38px);
  --section-space:clamp(36px,5vw,64px);
  --camera-depth:1400px;
  --camera-origin:72% 46%;
}
html{font-size:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 12px)}
body{font-size:var(--type-body);line-height:1.62}
.wrap{max-width:calc(var(--maxw) + (var(--page-gutter) * 2));padding-inline:var(--page-gutter)}
h1{font-size:var(--type-h1);line-height:1.01;letter-spacing:-.022em;text-wrap:balance}
h2{font-size:var(--type-h2);line-height:1.06;letter-spacing:-.012em;text-wrap:balance}
h3{line-height:1.08;text-wrap:balance}
p,li{ text-wrap:pretty }
.sec-label{font-size:clamp(10px,calc(9px + .15vw),11.5px);line-height:1.25;margin-bottom:clamp(10px,1.4vw,18px)}
.sec-lede,.lede{font-size:clamp(16px,1.25vw,18.5px);line-height:1.56}
.sec-lede{margin-bottom:clamp(22px,3.4vw,42px)}
input,select,textarea{font-size:max(16px,1em)}
.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:clamp(14px,1.05vw,16px)}
.nav-links a{font-size:clamp(13px,1vw,15px)}

/* A single eye line: stages look toward the message, never away from it. */
:is(.seal-stage,.agency-stage,.journey-selector .handoff-track,.experience-panels,.agent-console,.story-scene){
  perspective:var(--camera-depth);perspective-origin:var(--camera-origin);transform-style:preserve-3d
}
:is(.scene-character,.agent-panel>.agent-art,.experience-panel:after,.chapter-guide,.handoff-card img){
  --character-yaw:-1.5deg;--character-yaw-active:.5deg;--character-pitch:0deg;
  backface-visibility:hidden;transform-origin:center bottom
}
.guide-left>.chapter-guide{--character-yaw:1.5deg;--character-yaw-active:-.5deg}
.chapter-guide{width:clamp(310px,31vw,470px);height:102%;opacity:.94;
  filter:brightness(1.11) saturate(1.03) contrast(1.025) drop-shadow(0 30px 26px rgba(0,0,0,.68));
  transform:translate3d(var(--guide-x,0px),var(--guide-y,0px),18px) rotateX(var(--character-pitch,0deg)) rotateY(var(--character-yaw,-1.5deg)) scale(var(--guide-scale,.96))}
.scene-character{right:2%;bottom:0;width:clamp(280px,32%,390px);height:96%}
.agency-scene{padding-right:clamp(300px,35%,410px)}
.journey-selector .handoff-card img{width:clamp(310px,35vw,480px);height:94%;opacity:1}
.journey-selector .journey-intro h2{max-width:860px;font-size:clamp(28px,2.8vw,40px);line-height:1.04}
.experience-panel:after{right:2%;width:clamp(280px,31%,380px);height:92%}
.agent-panel{padding-right:clamp(330px,43%,500px)}
.agent-panel>.agent-art{right:2%;width:clamp(320px,42%,455px);height:94%}
.agency-scene:after,.agent-panel:after,.experience-panel:before{transform-style:preserve-3d}

/* At desktop browser zoom above 125%, the navigation becomes two rows before it can collide. */
@media(max-width:1060px){
  :root{--header-h:112px}
  .nav{height:auto;min-height:64px;display:grid;grid-template-columns:auto 1fr auto;gap:6px 12px;padding-top:7px}
  .nav>.btn{grid-column:3;grid-row:1;justify-self:end}
  .nav-links{display:flex;grid-column:1/-1;grid-row:2;gap:6px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;padding:2px 0 8px;scrollbar-width:none}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{flex:none;scroll-snap-align:start;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.035);border:1px solid rgba(245,239,225,.07)}
  section[id]{scroll-margin-top:122px}
}

@media(max-width:760px){
  :root{--page-gutter:18px;--type-body:16px;--type-h1:clamp(38px,10vw,48px);--type-h2:clamp(29px,8vw,36px);--camera-depth:1100px;--camera-origin:64% 48%}
  body{line-height:1.58}
  section{padding-block:var(--section-space)}
  .hero h1{font-size:var(--type-h1);line-height:1.01}
  .hero-grid{grid-template-columns:1fr}
  .hero{padding-bottom:48px}
  .hero .seal-stage{width:min(66vw,280px);margin:14px auto 4px}
  .agency-scene{height:auto;min-height:470px;padding:22px 18px 190px}
  .agency-scene h3,.offer-scroll-section .agency-scene h3{font-size:clamp(27px,7.5vw,32px)}
  .scene-character{right:-2%;bottom:-1%;width:clamp(205px,58vw,285px);height:49%}
  .journey-selector .handoff-card img{right:-4%;bottom:34px;width:clamp(205px,58vw,285px);height:47%;opacity:1}
  .journey-selector .handoff-card h3{font-size:clamp(26px,7.7vw,33px)}
  .journey-selector .journey-intro h2{max-width:100%;font-size:clamp(25px,7vw,30px);line-height:1.06}
  .experience-panel>.wrap{padding-bottom:190px}
  .experience-panel:after{right:-2%;bottom:8px;width:48%;height:43%;opacity:.98}
  .agent-panel{min-height:540px;padding:22px 16px 250px}
  .agent-contract{width:78%;max-width:78%}
  .agent-panel>.agent-art{right:-14%;bottom:12px;width:62%;height:48%}
  .chapter-guide,.guide-left>.chapter-guide{left:auto;right:-8%;top:112px;bottom:auto;width:54%;height:min(108vw,460px);opacity:.9;
    filter:brightness(1.08) saturate(1.02) contrast(1.02) drop-shadow(0 22px 18px rgba(0,0,0,.68));
    -webkit-mask-image:linear-gradient(180deg,#000 0 82%,transparent 100%);mask-image:linear-gradient(180deg,#000 0 82%,transparent 100%)}
  :is(.scene-character,.agent-panel>.agent-art,.experience-panel:after,.chapter-guide,.handoff-card img){--character-yaw:0deg;--character-yaw-active:0deg;--character-pitch:0deg}
  .story-scene h2,.story-scene .sec-lede{max-width:78%;text-shadow:0 8px 24px rgba(2,8,20,.95)}
  .content-disclosure>summary{font-size:clamp(18px,5.2vw,22px)}
}

@media(max-width:480px){
  .brand .brand-wordmark{width:116px}
  header .btn{min-height:42px;padding:10px 14px;font-size:14px}
  .hero .lede,.hero .hook{font-size:16px}
  .journey-selector .handoff-track{background:linear-gradient(110deg,rgba(3,10,25,.985),rgba(6,16,36,.94));box-shadow:inset 0 0 0 1px rgba(56,168,255,.05),0 20px 44px -30px #000}
  .journey-selector .handoff-card,.journey-selector .handoff-card.is-active{display:grid;height:100%;grid-template-columns:1fr;grid-template-rows:auto auto auto auto 1fr auto;align-content:start;padding:24px 16px 14px;background:linear-gradient(105deg,rgba(3,10,25,.99) 0 68%,rgba(4,13,31,.94) 100%)}
  .journey-selector .handoff-card>.handoff-step,.journey-selector .handoff-card>h3,.journey-selector .handoff-card>.handoff-role,.journey-selector .handoff-card>p{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;max-width:78%;margin-left:0;margin-right:0}
  .journey-selector .handoff-card>.handoff-step{grid-row:1;margin-bottom:10px}
  .journey-selector .handoff-card>h3{grid-row:2;margin:0 0 22px;padding-bottom:3px;font-size:clamp(25px,7.25vw,30px);line-height:1.03;max-width:82%}
  .journey-selector .handoff-card>.handoff-role{grid-row:3;margin:0 0 11px;max-width:82%;font-size:10px;line-height:1.25;letter-spacing:.105em}
  .journey-selector .handoff-card>p{grid-row:4;margin:0;max-width:76%;padding:9px 9px 9px 13px;font-size:12px;line-height:1.42;background:linear-gradient(90deg,rgba(4,13,31,.97) 0 88%,rgba(4,13,31,.72));box-shadow:0 10px 26px -22px #000}
  .journey-selector .handoff-card>.handoff-next{position:absolute;z-index:4;left:16px;right:auto;top:auto;bottom:14px;width:calc(100% - 32px);max-width:none;margin:0;padding:9px 12px;text-align:center;background:rgba(4,12,29,.94)}
  .journey-selector .handoff-card img{grid-column:auto;grid-row:auto;justify-self:auto;align-self:auto;right:-10%;bottom:29px;width:60%;height:50%;opacity:1}
  .journey-selector .handoff-card:before{opacity:.34}
  .relay-tabs{background:rgba(3,10,25,.96)}
  .agent-console,.agent-panels{background:rgba(3,10,25,.96)}
  .agent-panel{background:linear-gradient(180deg,rgba(4,13,31,.98),rgba(4,13,31,.94))}
  .agent-panel:before{background:linear-gradient(90deg,rgba(3,10,25,.995) 0 58%,rgba(3,10,25,.88) 72%,rgba(3,10,25,.04) 100%)}
  .agent-contract div{background:rgba(4,13,31,.91);border-left-color:rgba(56,168,255,.72);box-shadow:0 12px 24px -22px #000}
  .agency-stage{background:rgba(3,10,25,.94)}
  .agency-scene:before{background:linear-gradient(180deg,rgba(8,19,43,.995) 0 61%,rgba(8,19,43,.78) 78%,rgba(8,19,43,.34) 100%),var(--scene-image) 78% 106%/auto 55% no-repeat}
  .experience-head h2{font-size:var(--type-h2)}
  .agent-panel h3{font-size:34px}
  .agent-contract span{font-size:12px;line-height:1.42}
  .story-scene h2,.story-scene .sec-lede{max-width:82%}
}

@media(prefers-reduced-motion:reduce){
  :is(.scene-character,.agent-panel>.agent-art,.experience-panel:after,.chapter-guide,.handoff-card img){transform:none!important}
}

/* iPhone/Safari resilience. Functional navigation never depends on motion preferences, fixed
   background compositing is removed on touch screens, and translucent panels receive a real dark
   floor so Display P3/True Tone cannot wash the copy into the scenery. */
html{color-scheme:dark;background:#071126}
body{overflow-x:hidden;overflow-x:clip}
@media(max-width:760px){
  :root{--fg:#fff8e8;--fg-dim:#e3e9f4;--fg-faint:#bdc8dc;--gold:#f0c567;--purple-hi:#ff78d8;--cyan:#62bdff}
  body{background-color:#071126;background-attachment:scroll}
  header{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);-webkit-backdrop-filter:blur(18px) saturate(140%)}
  .experience-swap,.experience-lab,.story-scene,.journey-section:before{background-attachment:scroll!important}
  .journey-selector .handoff-track,.agent-console,.agent-panels,.agency-stage,.experience-panels{background-color:#06132c}
  .journey-selector .handoff-card,.journey-selector .handoff-card.is-active,.agent-panel{background-color:#07152f}
  .journey-selector .handoff-card p,.agent-contract div{color:#e3e9f4;background-color:rgba(5,16,38,.94)}
  .relay-tab,.agent-tab{color:#c9d3e5}
  .relay-tab.is-active,.agent-tab.is-active{color:#fff8e8}
  .journey-selector .handoff-track,.agent-panels{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:pan-y pinch-zoom}
  .journey-selector .handoff-card img,.agent-panel>.agent-art{-webkit-mask-image:linear-gradient(180deg,#000 0 82%,transparent 100%);mask-image:linear-gradient(180deg,#000 0 82%,transparent 100%)}
}
@supports(height:100dvh){
  @media(max-width:760px){.journey-selector .handoff-track{height:clamp(410px,56dvh,470px)}}
}

/* Human control and proof. The Pantheon names describe specialist functions; they are not
   autonomous staff. These surfaces stay intentionally opaque so the atmospheric seal supports
   the page without competing with the explanation. */
.human-system{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:-12px 0 24px;counter-reset:human-step}
.human-step{counter-increment:human-step;min-height:132px;padding:18px;border:1px solid rgba(216,168,75,.24);background:#0a1937;box-shadow:0 18px 38px -32px #000}
.human-step:before{content:"0" counter(human-step);display:block;margin-bottom:10px;color:var(--purple-hi);font-size:11px;font-weight:800;letter-spacing:.16em}
.human-step b{display:block;margin-bottom:7px;color:var(--fg);font-family:var(--display);font-size:21px;line-height:1.05}
.human-step span{display:block;color:var(--fg-dim);font-size:14px;line-height:1.5}
.human-accountability{margin:20px 0 0;padding:15px 18px;border-left:3px solid var(--gold);background:#091832;color:var(--fg-dim)}
.human-accountability strong{color:var(--fg)}
.operator-proof{position:relative;z-index:3;padding:var(--section-space) 0;background:linear-gradient(180deg,#08152e,#071126);border-block:1px solid rgba(216,168,75,.16)}
.operator-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,6vw,72px);align-items:start}
.operator-copy{padding:clamp(22px,3vw,34px);background:#0a1937;border:1px solid rgba(216,168,75,.25);box-shadow:0 28px 65px -52px #000}
.operator-copy h2{margin-bottom:16px}
.operator-copy p{color:var(--fg-dim)}
.operator-copy .operator-name{display:block;margin-top:20px;color:var(--gold);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:12px}
.proof-head{margin:0 0 18px;color:var(--fg);font-family:var(--display);font-size:clamp(24px,2.6vw,34px);line-height:1.06}
.proof-grid{display:grid;gap:10px}
.proof-card{padding:17px 18px;background:#0b1b3a;border:1px solid rgba(56,168,255,.22)}
.proof-card b{display:block;color:var(--fg);margin-bottom:5px;font-size:15px}
.proof-card span{display:block;color:var(--fg-dim);font-size:14px;line-height:1.52}
@media(max-width:760px){
  .human-system{grid-template-columns:1fr;margin-top:-4px}
  .human-step{min-height:0}
  .operator-layout{grid-template-columns:1fr}
  .operator-copy,.proof-card{background:#091832}
}


/* ---- next block ---- */


/* ===== MYTHIKA CINEMATIC SCROLL =========================================================
   Three additions: a page progress line, section snapping, and reveal-on-enter.
   All are motion, so all sit behind prefers-reduced-motion. A visitor who has asked their
   system for less movement gets the page exactly as it was before.
   ======================================================================================= */

/* The progress line is not motion - it is orientation - so it is not gated. On a page of nearly
   seven screens the reader has no idea how much is left, and "how long is this" is the question
   that makes a long page feel long. */
#mk-progress{position:fixed;left:0;top:0;height:2px;width:0;z-index:60;pointer-events:none;
  background:linear-gradient(90deg,var(--gold,#d4af37),#f6e3a1);
  box-shadow:0 0 10px rgba(212,175,55,.55);transition:width .1s linear;}
@media(prefers-reduced-motion:reduce){#mk-progress{transition:none;}}

@media(prefers-reduced-motion:no-preference){
  /* PROXIMITY, never mandatory. Mandatory snapping takes the scroll away from the reader and
     fights the Relay and the service catalogue, both of which capture wheel events on purpose.
     Proximity lands a section cleanly when the reader stops near one and is otherwise silent. */
  html{/* page-level y-snap removed 2026-09-02 - see tools/wire_section_rail.mjs */;}

  /* Only the six real top-level sections. Never the swap panels, never a wheel-capturing surface. */
  main > section{scroll-snap-align:start;scroll-snap-stop:normal;scroll-margin-top:124px;}
  .experience-swap section,
  .journey-selector,.offer-scroll-section,.agency-scenes,.agency-offers,.handoff-track,
  .experience-panel{scroll-snap-align:none;}

  /* Reveal is applied to CONTENT - headings, paragraphs, cards - and never to a panel or a section,
     so nothing that the swap toggles can be left invisible by an observer that never fires. */
  .mk-rise{opacity:0;transform:translateY(18px);
    transition:opacity .65s cubic-bezier(.22,.61,.36,1),transform .65s cubic-bezier(.22,.61,.36,1);}
  .mk-rise.mk-seen{opacity:1;transform:none;}
  /* Staggering by depth costs nothing and is most of what makes an arrival feel composed. */
  .mk-rise:nth-child(2){transition-delay:.06s}
  .mk-rise:nth-child(3){transition-delay:.12s}
  .mk-rise:nth-child(4){transition-delay:.18s}
}