/* Soulscape Enterprise in the company site's dress (version 10).
   The release build links this after the page's own stylesheet (scripts/build-company-production.mjs). The archived Enterprise page
   and its stylesheet are not edited: its words, sections and case dialogs are exactly as they were. This file changes colour and type,
   adds the shared footer and the way back, and repairs two things on phones. */
@font-face{font-family:Grotesk;src:url(assets/fonts/SpaceGrotesk-Variable.ttf);font-weight:300 700;font-display:swap}
@font-face{font-family:Mono;src:url(assets/fonts/geist-mono-latin.woff2);font-display:swap}
@font-face{font-family:Cormorant;src:url(assets/fonts/CormorantGaramond-SemiboldItalic.ttf);font-style:italic;font-display:swap}
:root{
  --acid:#D2FF1F;--paper:#F3EEE5;--dim:#A6A196;--g:clamp(22px,4vw,68px);
  /* the page's own names, given the site's values: ink ground, paper text, one accent */
  --coal:#05070B;--coal-deep:#030508;--panel:#0B0E14;--panel-soft:#11151C;
  --ink:#F3EEE5;--ink-soft:#B9B4AA;
  --copper:var(--acid);--copper-deep:#8FAE12;--mint:var(--acid);
  --display:Grotesk,sans-serif;--body:Grotesk,sans-serif;--mono:Mono,monospace;--serif:Cormorant,serif;
}

/* ── ground: flat ink, no warm glow ───────────────────────────────── */
body{background:var(--coal)}
.creator-engine,.featured-proof,.mobile-navigation{background:var(--coal-deep)}
.roadmap{background:var(--coal)}
.mandate-card{background:rgba(11,14,20,.68)}
.hero-figure::after{background:linear-gradient(to top,rgba(5,7,11,.78),transparent 32%)}
.hero-figure img{filter:saturate(.92) contrast(1.04) brightness(.95)}
.final-cta{background:linear-gradient(120deg,rgba(5,7,11,.95),rgba(5,7,11,.66)),url("/public/images/soulscape-room.jpg") center 52%/cover}

/* ── the accent is for small markers and actions; large figures and the italic in headings are paper ───────────── */
.hero h1 em,.section-intro h2 em,.final-cta h2 em{color:var(--paper);font-weight:600}
.metric strong,.trust-stat strong,.trust-stat-value,.model-duration strong,.phase strong,.creator-reach{color:var(--paper)}
.header-cta,.primary-action,.mobile-navigation-cta{color:#05070B}
.header-cta:hover,.primary-action:hover{box-shadow:none}
.roadmap-anchor{border-color:rgba(210,255,31,.5);background:rgba(210,255,31,.06)}
.roadmap-anchor .roadmap-dot{box-shadow:0 0 0 1px var(--acid),0 0 30px rgba(210,255,31,.35)}
.carousel-arrows button:hover,.carousel-arrows button:focus-visible{background:rgba(210,255,31,.08)}

/* ── header: the site's mark, the site's type ─────────────────────── */
.site-header{min-height:76px;border-bottom:0;background:rgba(5,7,11,.82)}
.brand-logo{width:215px;height:auto}
.site-header nav{gap:clamp(22px,2.8vw,42px);font-size:12px;letter-spacing:.16em}
.site-header nav a{color:var(--paper);opacity:.82;transition:opacity .2s}
.site-header nav a:hover,.site-header nav a:focus-visible{opacity:1}
.header-cta{min-height:46px;padding:0 18px;font-size:12px;letter-spacing:.14em}
.primary-action{min-height:48px;padding:0 20px;font-size:12px;letter-spacing:.14em}
.mobile-menu-trigger{gap:10px;font-size:12px;letter-spacing:.16em}
.mobile-menu-trigger::before{content:"";width:18px;height:7px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor}

/* ── the way back, and the site's footer ──────────────────────────── */
.company-return{display:flex;align-items:baseline;gap:14px;padding:26px var(--g);border-top:1px solid var(--line);color:var(--paper);font:500 12px/1.3 Mono,monospace;letter-spacing:.14em;text-transform:uppercase;transition:color .2s}
.company-return::before{content:"←";color:var(--acid)}
.company-return:hover{color:var(--acid)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:22px var(--g) 30px;border-top:1px solid var(--line);color:var(--dim);font:400 13.5px/1.6 Grotesk,sans-serif;letter-spacing:0;text-transform:none}
.foot img{display:block;width:auto;height:13px}
.foot nav{display:flex;gap:22px;flex-wrap:wrap}
.foot nav a:hover{color:var(--paper)}

@media (max-width:1120px){.brand-logo{width:215px}}
@media (max-width:760px){
  .site-header{min-height:60px}
  .brand-logo{width:215px}
  /* the coverage marks sat on the lettering in the photograph; on a phone they stand in a row beneath it */
  .hero-figure{overflow:visible;margin-bottom:62px}
  .hero-media-lockup{top:calc(100% + 18px);right:auto;left:0;grid-template-columns:auto 92px 76px 44px;gap:14px}
  .hero-media-lockup>span{font-size:9px}
}
@media (max-width:380px){.brand-logo{width:179px}.hero-media-lockup{grid-template-columns:auto 80px 66px 40px;gap:10px}.hero-media-lockup>span{display:inline}}
/* on a phone the header's mark is the two-line logo, as on the rest of the site (the build chooses the file at the same width) */
@media (max-width:600px){.brand-logo{width:auto;height:28px}}

/* a link inside a case study reads as one */
.case-dialog .dialog-copy a{color:inherit;border-bottom:1px solid currentColor}