/* ==========================================================================
   Camille · OBM landing page (v7, built on v5/v6)
   The professional wing of the Galaxy Museum. Continuous Deep Space sky as
   the primary canvas, with Moonlight panels used selectively (About, final
   CTA), individual cards elsewhere, Nebula and Deep Supernova surfaces,
   small Comet details, thin champagne-gold portrait frames, and a
   printed-postcard system for case-study deliverables.
   ========================================================================== */

:root {
  --deep: #16133A;
  --nebula: #4A3B9C;
  --stardust: #C3B2EC;
  --moon: #F5F2FA;
  --nova: #C8489C;            /* Supernova: small magenta highlights only */
  --nova-deep: #A42D78;       /* Deep Supernova: Encore + improved-outcome surfaces (Moonlight text 5.9:1) */
  --aurora: #F8D0E8;          /* small accents on dark backgrounds only */
  --comet: #9FE0CC;

  --space: #120F31;
  --ink: #16133A;
  --ink-muted: rgba(22, 19, 58, .78);
  --on-dark: rgba(245, 242, 250, .92);
  --on-dark-muted: rgba(245, 242, 250, .72);
  --line-light: rgba(74, 59, 156, .18);
  --line-dark: rgba(195, 178, 236, .24);

  --serif: "Libre Baskerville", Georgia, serif;
  --sans: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1200px;
  --gutter: clamp(16px, 3.5vw, 40px);
  --panel-r: clamp(22px, 3vw, 32px);
  --sy: clamp(26px, 3vw, 42px);   /* section padding: ~72–84px between sections on desktop, ~48–60px on mobile */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  color: var(--on-dark); font-family: var(--sans); font-size: 18px; line-height: 1.65; -webkit-font-smoothing: antialiased;
  background-color: #070720;   /* deep coming-soon night; the sky itself lives on the fixed .sky canvas */
}
.stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.page { position: relative; z-index: 1; }

img { max-width: 100%; display: block; }
a { color: inherit; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: rgba(195, 178, 236, .4); }
:focus-visible { outline: 2px solid var(--comet); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--moon); color: var(--deep); padding: 10px 16px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 16px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sec { padding: var(--sy) 0; position: relative; }

/* ---------- Type ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.15; }
h2 { font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -.01em; color: var(--moon); }
h2 em { font-style: italic; color: var(--aurora); }
h3 { font-size: clamp(20px, 2vw, 24px); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--stardust); }
.eyebrow::before { content: ""; width: 9px; height: 9px; flex-shrink: 0; background: currentColor; opacity: .8;
  clip-path: path("M4.5 0C4.85 2.9 6.1 4.15 9 4.5C6.1 4.85 4.85 6.1 4.5 9C4.15 6.1 2.9 4.85 0 4.5C2.9 4.15 4.15 2.9 4.5 0Z"); }
.lede { font-size: clamp(18px, 1.5vw, 20px); color: var(--on-dark-muted); max-width: 40em; }
.head { max-width: 680px; margin-bottom: clamp(20px, 2.4vw, 30px); }
.head h2 { margin: 12px 0 14px; }
.head--center { margin-left: auto; margin-right: auto; text-align: center; }
.head--center .lede { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; font: 600 16px/1 var(--sans); padding: 15px 26px; border-radius: 999px; border: 1px solid transparent; text-decoration: none; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease; }
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--down:hover svg { transform: translateY(3px); }
.btn--nebula { background: var(--nebula); color: var(--moon); box-shadow: 0 10px 26px -12px rgba(74, 59, 156, .9); }
.btn--nebula:hover { background: #5A49B3; }
.btn--moon { background: var(--moon); color: var(--deep); }
.btn--moon:hover { box-shadow: 0 0 0 4px rgba(195, 178, 236, .3); }
.btn--aurora { background: var(--aurora); color: var(--deep); }
.btn--quiet { border-color: rgba(195, 178, 236, .26); color: var(--on-dark-muted); background: transparent; }
.btn--quiet:hover { border-color: var(--stardust); color: var(--moon); }
.btn--outline { border-color: var(--nebula); color: var(--nebula); background: transparent; }
.btn--outline:hover { background: var(--nebula); color: var(--moon); }
.btn--sm { padding: 11px 18px; font-size: 15px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Logo + navigation (as Home V5) ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--deep); }
.logo svg { width: 34px; height: 34px; }
.logo b { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 21px; letter-spacing: -.01em; }
.nav { position: fixed; top: 14px; left: 0; right: 0; z-index: 50; padding: 0 var(--gutter); }
.nav__bar { max-width: calc(var(--wrap) - 2 * var(--gutter)); margin: 0 auto; height: 64px; padding: 0 10px 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: rgba(245, 242, 250, .94); color: var(--deep); border-radius: 999px; box-shadow: 0 12px 34px -14px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nav__links { display: flex; align-items: center; gap: 24px; }
.nav__links a:not(.btn) { text-decoration: none; font-size: 15.5px; font-weight: 600; color: rgba(22, 19, 58, .72); transition: color .2s ease; }
.nav__links a:not(.btn):hover, .nav__links a:not(.btn).is-active { color: var(--nebula); }
.nav__links a.btn.is-active { color: var(--moon); }
.nav__toggle { display: none; background: none; border: 1px solid var(--line-light); border-radius: 999px; color: var(--deep); font: 600 13px var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 10px 16px; cursor: pointer; }
@media (max-width: 920px) {
  .nav__toggle { display: inline-block; }
  .nav__bar { position: relative; }
  .nav__links { position: absolute; top: calc(100% + 10px); left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; background: var(--moon); border-radius: 22px; padding: 10px 20px 20px; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .6); }
  .nav.is-open .nav__links { display: flex; }
  .nav__links li { border-bottom: 1px solid var(--line-light); }
  .nav__links li:last-child { border: 0; padding-top: 14px; }
  .nav__links a:not(.btn) { display: block; padding: 13px 4px; font-size: 17px; }
  .nav__links .btn { width: 100%; }
}

/* ---------- Panels: flat Moonlight (V8: no translucency or blur) ---------- */
.panel { position: relative; border-radius: var(--panel-r); padding: clamp(22px, 3.4vw, 44px); color: var(--ink);
  background: var(--moon);
  box-shadow: 0 34px 90px -44px rgba(4, 2, 20, .95), inset 0 0 0 1px rgba(255, 255, 255, .5); }
.panel .eyebrow { color: var(--nebula); }
.panel h2 { color: var(--deep); }
.panel h2 em { color: var(--nebula); }
.panel .lede { color: var(--deep); }
.speck { position: absolute; width: 12px; height: 12px; background: var(--comet); pointer-events: none; filter: drop-shadow(0 0 3px rgba(159, 224, 204, .7));
  clip-path: path("M6 0C6.45 3.8 8.2 5.55 12 6C8.2 6.45 6.45 8.2 6 12C5.55 8.2 3.8 6.45 0 6C3.8 5.55 5.55 3.8 6 0Z"); }

/* ---------- Champagne-gold frame (as Home V5) ---------- */
.mframe { --g-hi: #F3E7D3; --g-mid: #C7A56F; --g-lo: #95754E; position: relative; display: block; padding: 5px; border-radius: 2px;
  background: linear-gradient(135deg, var(--g-hi) 0%, var(--g-mid) 30%, var(--g-hi) 52%, var(--g-mid) 70%, var(--g-lo) 100%);
  box-shadow: inset 1px 1px 0 rgba(255, 250, 240, .8), inset -1px -1px 0 rgba(80, 58, 30, .55), 0 16px 34px -16px rgba(4, 2, 20, .8); }
.mframe__mat { position: relative; padding: 1px; background: var(--g-lo); }
.mframe__mat > img, .mframe__mat > .ph { display: block; width: 100%; aspect-ratio: var(--ratio, 4 / 5); object-fit: cover; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35); }
.r-portrait { --ratio: 4 / 5; } .r-tall { --ratio: 3 / 4; }
@media (max-width: 640px) { .mframe { padding: 3.5px; } }
.ph { position: relative; overflow: hidden;
  background: radial-gradient(1px 1px at 20% 24%, rgba(255,255,255,.9), transparent 60%), radial-gradient(1.5px 1.5px at 42% 68%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(circle at 30% 28%, rgba(195, 178, 236, .55), transparent 55%), radial-gradient(circle at 76% 78%, rgba(200, 72, 156, .3), transparent 52%), linear-gradient(160deg, #3A2F86, #1C1850); }
.ph::before { content: attr(data-label); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 600 11.5px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(245, 242, 250, .75); white-space: nowrap; padding: 6px 11px; border: 1px dashed rgba(245, 242, 250, .35); border-radius: 999px; }

/* ==========================================================================
   2. HERO
   ========================================================================== */
.ohero { padding: 120px 0 36px; }
.ohero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.ohero h1 { font-size: clamp(40px, 5.4vw, 66px); letter-spacing: -.02em; line-height: 1.06; margin: 18px 0 22px; color: var(--moon); }
.ohero h1 em { display: block; font-style: italic; color: var(--aurora); }
.ohero .lede { margin-bottom: 32px; }
.ohero__art { width: min(100%, 380px); justify-self: center; }
/* V8: "Worked with brands featured in" logos, under the portrait and availability line */
.proof { display: grid; justify-items: center; gap: 12px; margin-top: 26px; text-align: center; }
.proof__label { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-muted); }
.proof__logos { display: flex; align-items: center; justify-content: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.proof__logos li { height: 28px; display: flex; align-items: center; }
.proof__logos img { height: 100%; width: auto; filter: brightness(0) invert(1); opacity: .9; }   /* every logo in white */
.avail { display: block; margin-top: 22px; font-size: 15px; color: var(--on-dark-muted); }   /* wraps as one sentence on narrow screens */
.avail i { display: inline-block; vertical-align: middle; margin: -2px 10px 0 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--comet); box-shadow: 0 0 0 4px rgba(159, 224, 204, .18); }
.avail em { font-style: normal; color: var(--moon); font-weight: 600; }
/* Mobile: eyebrow → headline → intro → CTAs → availability, then the portrait */
@media (max-width: 860px) { .ohero { padding: 110px 0 26px; } .ohero__grid { grid-template-columns: 1fr; gap: 28px; } .ohero__art { width: min(100%, 250px); } }

/* ==========================================================================
   3. DOES THIS RESONATE?  Individual light cards on Deep Space
   ========================================================================== */
.pains { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 18px); }
.pain { text-align: left; cursor: pointer; padding: 18px 18px 20px; min-height: 150px; display: flex; flex-direction: column; gap: 12px; color: var(--deep);
  background: rgba(245, 242, 250, .82); border: 1px solid rgba(255, 255, 255, .55); border-radius: 14px; box-shadow: 0 18px 36px -24px rgba(4, 2, 20, .9);
  transition: transform .3s var(--ease), background .25s ease, color .25s ease, box-shadow .3s ease; }
.pain:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -22px rgba(4, 2, 20, .95); }
.pain__box { width: 22px; height: 22px; flex-shrink: 0; border: 1.5px solid var(--nebula); border-radius: 5px; display: grid; place-items: center; transition: background .25s, border-color .25s; }
.pain__box svg { width: 14px; height: 14px; stroke: var(--deep); stroke-width: 2.5; fill: none; opacity: 0; transition: opacity .2s; }
.pain__text { font-family: var(--serif); font-size: 16px; line-height: 1.5; }
.pain[aria-pressed="true"] { background: var(--nebula); color: var(--moon); border-color: var(--stardust); }
.pain[aria-pressed="true"] .pain__box { background: var(--comet); border-color: var(--comet); }
.pain[aria-pressed="true"] .pain__box svg { opacity: 1; }
.tally { margin: 24px auto 0; max-width: 560px; text-align: center; }
.tally__bar { height: 4px; background: rgba(245, 242, 250, .12); border-radius: 4px; overflow: hidden; }
.tally__bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--stardust), var(--comet)); transition: width .5s var(--ease); }
.tally__count { margin-top: 12px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--stardust); }
.tally__msg { margin-top: 6px; font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--moon); min-height: 1.8em; }
@media (max-width: 1000px) { .pains { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pains { grid-template-columns: 1fr; } .pain { min-height: 0; flex-direction: row; align-items: flex-start; } }

/* ==========================================================================
   4. WHAT STRONGER OPERATIONS MAKE POSSIBLE  (inside a panel)
   ========================================================================== */
.shift__cols, .shift__row { display: grid; grid-template-columns: 1fr 56px 1fr; gap: 0 8px; }
.shift__cols { margin-bottom: 12px; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
/* Open Deep Space wrapper (Stronger Operations, A.R.M.Y.): no panel surface */
.open-block { position: relative; }

.shift__cols span:first-child { color: var(--aurora); }
.shift__cols span:last-child { grid-column: 3; color: var(--moon); }
.shift__list { display: grid; gap: 12px; }
.shift__row > span:not(.shift__arrow) { padding: 18px 22px; border-radius: 12px; display: flex; align-items: center; line-height: 1.45; font-size: 17px; }
.shift__before { background: var(--moon); border: 1px dashed rgba(74, 59, 156, .28); color: var(--deep); }
.shift__after { background: #A42D78; color: var(--moon); font-family: var(--serif); box-shadow: 0 14px 28px -18px rgba(4, 2, 20, .9); }
.shift__arrow { display: grid; place-items: center; color: var(--nova); }
.shift__arrow svg { width: 40px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
@media (max-width: 760px) {
  .shift__cols { display: none; }
  .shift__row { grid-template-columns: 1fr; }
  .shift__arrow { height: 32px; }
  .shift__arrow svg { transform: rotate(90deg); width: 26px; }
}

/* ==========================================================================
   5. TWO WAYS TO WORK TOGETHER
   ========================================================================== */
.offers { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 1.8vw, 22px); }
/* Both offers share one structure; only the surface colour differs */
.offer { padding: clamp(26px, 3.2vw, 40px); border-radius: 22px; display: flex; flex-direction: column; position: relative; overflow: hidden; color: var(--moon);
  box-shadow: 0 30px 60px -32px rgba(4, 2, 20, .95), inset 0 0 0 1px rgba(245, 242, 250, .14); }
.offer--main { background: #4A3B9C; }
.offer--encore { background: #A42D78; }
.offer__tag { align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px;
  background: rgba(245, 242, 250, .14); color: var(--moon); border: 1px solid rgba(245, 242, 250, .3); }
.offer__name { font-family: var(--serif); font-style: italic; font-size: clamp(40px, 4.6vw, 56px); line-height: 1; margin-top: 18px; }
.offer__sub { font-weight: 600; font-size: 18px; margin-top: 10px; color: var(--moon); }
.offer__for { margin-top: 10px; padding-bottom: 18px; color: var(--moon); border-bottom: 1px solid rgba(245, 242, 250, .24); }
.offer__list { margin: 18px 0 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; flex-grow: 1; align-content: start; }
.offer__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.4; }
.offer__list li::before { content: "✦"; font-size: 10px; margin-top: 5px; color: var(--comet); }
.offer .btn { align-self: flex-start; }
@media (max-width: 860px) { .offers { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .offer__list { grid-template-columns: 1fr; } }

/* ==========================================================================
   6. A.R.M.Y.  (open on Deep Space: tabs + one dark active-step card)
   ========================================================================== */
.army__tabs { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; margin-bottom: 24px; }
.army__line { position: absolute; left: 12.5%; right: 12.5%; bottom: -12px; height: 2px; background: rgba(195, 178, 236, .2); border-radius: 2px; }
.army__line span { position: absolute; inset: 0; background: linear-gradient(90deg, var(--nebula), var(--nova)); transform-origin: left; transform: scaleX(0); transition: transform .6s var(--ease); }
.army__tab { background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 10px; color: var(--stardust); transition: color .3s; }
.army__tab .L { font-family: var(--serif); font-style: italic; font-size: clamp(38px, 4.6vw, 60px); line-height: 1; transition: transform .4s var(--ease); }
.army__tab .w { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.army__tab:hover { color: var(--moon); }
.army__tab[aria-selected="true"] { color: var(--aurora); }
.army__tab[aria-selected="true"] .L { transform: translateY(-3px); }
.army__panel { display: grid; grid-template-columns: 62px 1fr; gap: clamp(16px, 3vw, 32px); align-items: start; padding: clamp(20px, 3vw, 32px); color: var(--moon);
  background: #352A82; border-radius: 18px; border: 1px solid rgba(195, 178, 236, .22); box-shadow: 0 24px 48px -30px rgba(4, 2, 20, .95); }
.army__icon { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; color: var(--aurora);
  background: rgba(245, 242, 250, .1); border: 1px solid rgba(195, 178, 236, .4); }
.army__icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.army__panel h3 { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--moon); }
.army__step { font-size: 13px; color: var(--stardust); margin: 4px 0 10px; }
.army__desc { font-family: var(--serif); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--moon); max-width: 46em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip { font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(245, 242, 250, .3); color: var(--moon); }
.army__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.army__foot p { color: var(--on-dark-muted); font-size: 15px; display: flex; align-items: center; gap: 10px; }
.army__nav { display: flex; gap: 8px; }
.icon-btn { width: 46px; height: 46px; border: 1px solid rgba(195, 178, 236, .45); border-radius: 50%; background: rgba(245, 242, 250, .06); color: var(--moon); cursor: pointer; display: grid; place-items: center; transition: background .2s, color .2s, border-color .2s; }
.icon-btn:hover { background: var(--comet); border-color: var(--comet); color: var(--deep); }
.army__nav .icon-btn:hover { background: var(--moon); border-color: var(--moon); }
.icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.js .army__panel:not([hidden]), .js .case:not([hidden]) { animation: panelIn .45s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .army__panel { grid-template-columns: 1fr; gap: 12px; }
  .army__icon { width: 52px; height: 52px; } .army__icon svg { width: 24px; height: 24px; }
  .army__tab .w { font-size: 12px; letter-spacing: .06em; }   /* V8: 12px minimum on phones */
}

/* ==========================================================================
   7. CASE STUDIES
   ========================================================================== */
.case-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.case-tab { border: 1px solid var(--line-dark); background: transparent; padding: 11px 18px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 15px; color: var(--on-dark-muted); transition: background .25s, color .25s, border-color .25s; }
.case-tab:hover { border-color: var(--stardust); color: var(--moon); }
.case-tab[aria-selected="true"] { background: var(--moon); color: var(--deep); border-color: var(--moon); }
.case { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.case__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.case__kind { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--stardust); }
.tag { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.tag--live { background: var(--comet); color: var(--deep); }
.tag--verify { border: 1px dashed rgba(248, 208, 232, .55); color: var(--aurora); }
.case h3 { font-size: clamp(24px, 2.6vw, 32px); color: var(--moon); margin-bottom: 18px; }
.facts div { padding: 13px 0; border-top: 1px solid var(--line-dark); }
.facts dt { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--aurora); margin-bottom: 4px; }
.facts dd { color: var(--on-dark-muted); font-size: 16.5px; }
.evidence { margin-top: 18px; }
.evidence__sub { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--moon); margin: -4px 0 10px; }
.evidence__label { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--stardust); margin-bottom: 10px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat { padding: 16px 18px; border-radius: 14px; background: rgba(245, 242, 250, .94); color: var(--deep); box-shadow: 0 16px 30px -22px rgba(4, 2, 20, .9); }
.stat b { display: block; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--nebula); }
.stat span { font-size: 14.5px; color: var(--ink-muted); }
.evidence__note { margin-top: 10px; font-size: 14px; color: var(--on-dark-muted); font-style: italic; }
.milestones { padding: 16px 20px; border-radius: 14px; background: rgba(245, 242, 250, .94); color: var(--deep); display: grid; gap: 8px; }
.milestones li { display: flex; gap: 10px; font-size: 15.5px; }
.milestones li::before { content: "✦"; color: var(--nebula); font-size: 10px; margin-top: 5px; }
@media (max-width: 980px) { .case { grid-template-columns: 1fr; } }

/* ---------- Postcard collage ---------- */
.collage { position: relative; aspect-ratio: 1 / .8; }
.pc {
  --rot: 0deg;
  position: absolute; display: block; cursor: zoom-in; border-radius: 3px;
  padding: 8px 8px 0; background: var(--moon);                     /* printed paper edge */
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 2px 4px rgba(4, 2, 20, .25), 0 22px 40px -18px rgba(4, 2, 20, .85);
  transform: rotate(var(--rot)); transition: transform .35s var(--ease), box-shadow .35s ease;
  container-type: inline-size;
}
.pc:hover, .pc:focus-visible { transform: rotate(var(--rot)) translateY(-6px); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 4px 8px rgba(4, 2, 20, .25), 0 30px 50px -18px rgba(4, 2, 20, .9); }
.pc:focus-visible { outline: 2px solid var(--comet); outline-offset: 4px; }
.pc__shot { display: block; border: 1px solid rgba(195, 178, 236, .8); border-radius: 2px; overflow: hidden; aspect-ratio: 16 / 10; background: #fff; }
.pc__shot > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }   /* real deliverable screenshots, cropped to 16:10 */
.pc__cap { display: block; padding: 7px 2px 8px; font-family: var(--serif); font-style: italic; font-size: 13px; color: rgba(22, 19, 58, .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* One primary postcard + two supporting ones */
.pc--a { left: 0; top: 6%; width: 68%; --rot: -1.5deg; z-index: 2; }
.pc--b { right: 0; top: 0; width: 46%; --rot: 2.5deg; z-index: 1; }
.pc--c { right: 3%; top: 47%; width: 52%; --rot: 1.5deg; z-index: 3; }
.pc.is-front { z-index: 10; }                          /* last opened postcard stays in front */
.pc:hover, .pc:focus-visible { z-index: 11; }          /* hovered/focused postcard comes forward temporarily */
.collage__note { margin-top: 10px; font-size: 13.5px; font-style: italic; color: var(--on-dark-muted); }
@media (max-width: 560px) { .pc { padding: 5px 5px 0; } .pc__cap { font-size: 12px; padding: 5px 1px 6px; } }

/* Postcard preview */
.viewer { border: 0; padding: 0; background: transparent; color: var(--deep); width: min(92vw, 960px); max-width: none; margin: auto; }
.viewer::backdrop { background: rgba(8, 6, 26, .86); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.viewer__card { background: var(--moon); border-radius: 4px; padding: clamp(10px, 1.6vw, 16px); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9); container-type: inline-size; }
.viewer__card .pc__shot { border-color: rgba(195, 178, 236, .9); }
.viewer__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 2px 2px; }
.viewer__title { font-family: var(--serif); font-style: italic; font-size: 17px; }
.viewer__close { border: 1px solid rgba(74, 59, 156, .35); background: transparent; color: var(--nebula); border-radius: 999px; padding: 8px 16px; font-weight: 600; font-size: 14px; cursor: pointer; }
.viewer__close:hover { background: var(--nebula); color: var(--moon); }
.viewer__note { margin-top: 12px; text-align: center; font-size: 13px; font-style: italic; color: var(--on-dark-muted); }

/* ---------- Illustrative UI mockups (fictional data). Sized in em off the postcard width ---------- */
.ui { display: grid; grid-template-rows: auto 1fr; height: 100%; font: 400 2.3cqi/1.3 var(--sans); color: #2B2850; background: #fff; text-align: left; }
.viewer .ui { font-size: max(2.1cqi, 11px); }
.viewer .u-item, .viewer .u-step { white-space: normal; }
@media (max-width: 700px) { .viewer .pc__shot { aspect-ratio: auto; min-height: 60cqi; overflow-x: auto; } }   /* readable on phones: grows instead of shrinking */
.ui__bar { display: flex; justify-content: space-between; align-items: center; gap: .6em; padding: .7em 1em; border-bottom: 1px solid #ECE8F5; font-weight: 600; }
.ui__bar small { font-weight: 400; color: #8A85A8; font-size: .85em; }
.ui__body { padding: .9em 1em; display: grid; gap: .6em; align-content: start; overflow: hidden; }
.ui__k { font-size: .72em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8A85A8; }
.dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; margin-right: .4em; vertical-align: middle; }
.d-done { background: #7DCFB6; } .d-prog { background: #A796E8; } .d-todo { background: #E3DEF0; } .d-risk { background: #E890C2; }

.u-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; }
.u-col { background: #F7F5FC; border-radius: .4em; padding: .55em; display: grid; gap: .4em; align-content: start; }
.u-item { background: #fff; border: 1px solid #ECE8F5; border-radius: .3em; padding: .35em .5em; font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; }
.u-tile { background: #F7F5FC; border-radius: .4em; padding: .6em .7em; }
.u-tile b { display: block; font-size: 1.7em; color: #4A3B9C; font-weight: 600; }
.u-bars { display: grid; gap: .45em; }
.u-bar { display: grid; grid-template-columns: 8em 1fr 2.4em; align-items: center; gap: .6em; font-size: .9em; }
.u-bar i { height: .55em; border-radius: 1em; background: #EEEAF7; position: relative; overflow: hidden; }
.u-bar i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 50%); background: linear-gradient(90deg, #A796E8, #4A3B9C); border-radius: 1em; }
.u-gantt { display: grid; gap: .45em; }
.u-gantt__head, .u-gantt__row { display: grid; grid-template-columns: 8em repeat(6, 1fr); align-items: center; gap: .2em; font-size: .9em; }
.u-gantt__head span { color: #8A85A8; font-size: .85em; text-align: center; }
.u-gantt__row i { grid-column: var(--s) / span var(--l); height: 1em; border-radius: .3em; background: #CFC4F2; }
.u-gantt__row i.hl { background: #E890C2; }
.u-flow { display: flex; align-items: center; gap: .4em; flex-wrap: wrap; }
.u-step { padding: .5em .7em; border-radius: .35em; background: #F7F5FC; border: 1px solid #ECE8F5; font-size: .92em; white-space: nowrap; }
.u-step.on { background: #4A3B9C; color: #fff; border-color: #4A3B9C; }
.u-arrow { color: #A796E8; }
.u-split { display: grid; grid-template-columns: 9em 1fr; height: 100%; }
.u-side { background: #F7F5FC; border-right: 1px solid #ECE8F5; padding: .8em .7em; display: grid; gap: .45em; align-content: start; font-size: .9em; }
.u-side span.on { color: #4A3B9C; font-weight: 600; }
.u-table { width: 100%; border-collapse: collapse; font-size: .9em; }
.u-table th, .u-table td { padding: .4em .5em; border-bottom: 1px solid #F0EDF7; text-align: left; white-space: nowrap; }
.u-table th { font-size: .78em; letter-spacing: .08em; text-transform: uppercase; color: #8A85A8; font-weight: 600; }
.u-table td.c { text-align: center; }
.ok { color: #3FA98A; font-weight: 700; } .pend { color: #C9C2DF; }
.u-kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5em; }
.u-entry { border: 1px solid #ECE8F5; border-radius: .4em; padding: .5em .7em; display: grid; gap: .2em; font-size: .9em; }
.u-entry b { color: #4A3B9C; }
.u-load { display: grid; grid-template-columns: 5em 1fr 3em; align-items: center; gap: .6em; font-size: .9em; }
.u-load i { height: .8em; border-radius: 1em; background: #EEEAF7; position: relative; overflow: hidden; }
.u-load i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--c, #A796E8); border-radius: 1em; }

/* ==========================================================================
   8. KIND WORDS ALONG THE WAY
   ========================================================================== */
.kind { padding: var(--sy) 0; overflow: hidden; }
.marquee { overflow: hidden; padding: 10px 0 18px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.mq-track { display: flex; gap: 18px; width: max-content; animation: slide 70s linear infinite; }
.mq-track ul { display: flex; gap: 18px; }
.marquee:hover .mq-track, .marquee:focus-within .mq-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(calc(-50% - 9px)); } }
.q { width: 290px; flex-shrink: 0; border-radius: 16px; padding: 22px 22px 24px; color: var(--deep); font-family: var(--serif); font-style: italic; font-size: 17.5px; line-height: 1.5;
  box-shadow: 0 18px 36px -24px rgba(4, 2, 20, .9); }
.q:nth-child(odd) { transform: rotate(-1deg); } .q:nth-child(even) { transform: rotate(1deg) translateY(10px); }
.q::before { content: "\201C"; display: block; font-size: 34px; line-height: .7; color: var(--nova); margin-bottom: 8px; }
.q:nth-child(4n+2)::before, .q:nth-child(4n+3)::before { color: var(--nova-deep); }
.q:nth-child(4n+1) { background: var(--moon); }
.q:nth-child(4n+2) { background: var(--stardust); }
.q:nth-child(4n+3) { background: var(--aurora); }        /* Aurora pink */
.q:nth-child(4n+4) { background: #E3F6EF; }               /* soft Comet tint */
@media (prefers-reduced-motion: reduce) {
  .mq-track { animation: none; }
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .mq-track ul[aria-hidden="true"] { display: none; }
}

/* ==========================================================================
   9. ABOUT YOUR OBM  (panel)
   ========================================================================== */
.oabout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px, 6vw, 84px); align-items: center; }
.oabout__art .mframe { width: min(100%, 340px); margin: 0 auto; }
.oabout__text h2 { margin: 12px 0 6px; }
.oabout__role { font-weight: 600; color: var(--nebula); margin-bottom: 16px; }
.oabout__text > p:not(.eyebrow):not(.oabout__role) { color: var(--deep); }
.oabout__text > p + p { margin-top: 1em; }
.oabout__text strong { font-weight: 600; }
/* Off the clock: one quiet line of personality */
.offclock { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-light); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.offclock__label { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--deep); }
.offclock__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.offclock__tags li { font-size: 14px; font-weight: 600; color: var(--nebula); padding: 5px 12px; border-radius: 999px; background: #FFFFFF; border: 1px solid rgba(74, 59, 156, .22); display: inline-flex; align-items: center; gap: 7px; }
.offclock__tags li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--comet); box-shadow: 0 0 0 1px rgba(22, 19, 58, .15); }
@media (max-width: 860px) { .oabout { grid-template-columns: 1fr; gap: 24px; } .oabout__art .mframe { width: min(100%, 250px); } }

/* ==========================================================================
   10. FAQ  (open, individual cards)
   ========================================================================== */
.faq { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.faq__side p:not(.eyebrow) { color: var(--on-dark-muted); margin-top: 14px; max-width: 30em; }
.faq__side .btn { margin-top: 22px; }
.faq__list { display: grid; gap: 10px; }
.faq details { border-radius: 14px; background: rgba(22, 19, 58, .7); border: 1px solid var(--line-dark); transition: border-color .3s, background .3s; }
.faq details[open] { background: rgba(22, 19, 58, .92); border-color: rgba(195, 178, 236, .45); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 22px; font-family: var(--serif); font-size: clamp(17px, 1.6vw, 19px); line-height: 1.35; color: var(--moon); }
.faq summary::-webkit-details-marker { display: none; }
/* Comet controls in both states; the + rotates to × when open */
.faq summary::after { content: "+"; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--sans); font-size: 20px; color: var(--deep); background: var(--comet); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > p { padding: 0 22px 20px; color: rgba(245, 242, 250, .85); }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } }

/* ==========================================================================
   11. FINAL CTA  (bright panel)
   ========================================================================== */
/* A clean gallery information panel: Moonlight rectangle, 8px corners */
.final { position: relative; text-align: center; color: var(--deep); background: var(--moon); border-radius: 8px; padding: clamp(28px, 4vw, 48px) clamp(22px, 4vw, 48px);
  border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 30px 70px -40px rgba(4, 2, 20, .95); }
.final .eyebrow { color: var(--nebula); }
.final h2 { margin: 14px auto 16px; max-width: 16em; color: var(--deep); }
.final h2 em { color: var(--nebula); }
.final .lede { color: var(--deep); }
.btn--supernova { background: var(--nova-deep); color: var(--moon); box-shadow: 0 10px 26px -12px rgba(164, 45, 120, .8); }
.btn--supernova:hover { background: #8E2668; }
.final :focus-visible, .panel :focus-visible { outline-color: var(--nebula); }   /* Comet focus ring is too faint on Moonlight */
.final .lede { margin: 0 auto 26px; }
.final .btn-row { justify-content: center; }
.final__note { margin-top: 18px; font-size: 15.5px; }
.final__note a { color: var(--nebula); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(74, 59, 156, .35); padding-bottom: 2px; }
.final__note a:hover { border-color: var(--nebula); }

/* ==========================================================================
   12. FOOTER  (as Home V5)
   ========================================================================== */
.footer { padding: clamp(24px, 4vw, 40px) 0 34px; color: var(--on-dark-muted); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-top: 40px; border-top: 1px solid var(--line-dark); }
.footer .logo { color: var(--moon); }
.footer__brand p { margin-top: 14px; font-family: var(--serif); font-style: italic; max-width: 20em; }
.footer h4 { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--stardust); margin-bottom: 14px; }
.footer__links { display: grid; gap: 8px; }
.footer__links a { text-decoration: none; color: var(--on-dark-muted); }
.footer__links a:hover { color: var(--moon); }
.socials { display: flex; gap: 10px; }
.socials a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-dark); color: var(--stardust); transition: background .2s, color .2s; }
.socials a:hover { background: var(--moon); color: var(--deep); }
.socials svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.footer__bottom { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; color: rgba(245, 242, 250, .5); }
@media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }

/* ---------- Reveal ---------- */
.js .rv { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { opacity: 1; transform: none; }
}

/* ==========================================================================
   v6 treatment (matches home-v6): coming-soon sky, Phosphor icons
   ========================================================================== */
.sky {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 40% 40%, #0E0C3A, rgba(7, 7, 32, 0) 70%),
    linear-gradient(155deg, #070720 30%, #100F3D 100%);
}
svg.pi { fill: currentColor !important; stroke: none !important; }

/* ==========================================================================
   Updated copy (final copy doc)
   ========================================================================== */
/* Sections without eyebrows: headings start the block */
.head h2:first-child { margin-top: 0; }

/* Challenge cards: message + button instead of a counter */
.tally__msg { margin-top: 14px; }
.tally__cta { margin-top: 14px; }

/* Offers: icon, description, "It may include" list and fine print */
.offer__icon { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: rgba(245, 242, 250, .12); color: var(--moon); }
.offer__icon svg { width: 26px; height: 26px; }
.offer__name { margin-top: 20px; }
.offer__desc { margin-top: 16px; color: rgba(245, 242, 250, .88); font-size: 16.5px; }
.offer__inc { margin-top: 18px; font-family: var(--serif); font-style: italic; color: var(--moon); }
.offer__list { margin-top: 10px; }
.offer__fine { margin-top: 16px; font-size: 13.5px; font-style: italic; line-height: 1.5; color: rgba(245, 242, 250, .75); }

/* A.R.M.Y.: description follows the title directly; only the arrows remain in the footer */
.army__desc { margin-top: 10px; }
.army__foot { justify-content: center; }

/* Case studies */
.collage__label { margin-bottom: 14px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--stardust); }
.facts__list { display: grid; gap: 6px; margin-top: 4px; }
.facts__list li { display: flex; gap: 10px; }
.facts__list li::before { content: "✦"; font-size: 9px; margin-top: 6px; color: var(--comet); flex: none; }
.evidence__text { padding: 16px 20px; border-radius: 14px; background: rgba(245, 242, 250, .94); color: var(--deep); display: grid; gap: 10px; font-size: 15.5px; line-height: 1.6; }
.cases__disclaimer { margin-top: clamp(24px, 3vw, 36px); max-width: 52em; font-size: 13.5px; font-style: italic; line-height: 1.55; color: var(--on-dark-muted); }

/* Kind words: the quotes carry their own quote marks, so the card shows its number instead */
.q::before { content: none; }
.q__no { display: block; margin-bottom: 10px; font-family: var(--sans); font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: .16em; color: var(--nebula); }
.kind .marquee { margin-top: 6px; }

/* About your OBM: title, then the greeting line as a subheading */
.oabout__text h2 { margin-top: 0; }
h3.oabout__role { font-family: var(--sans); font-size: 18px; line-height: 1.45; }

/* FAQs: answers can have several paragraphs */
.faq details > p + p { margin-top: -8px; }
.faq__side h2 { margin: 0; }

/* Headings wrap into even lines (no single word left on its own) */
h1, h2, h3 { text-wrap: balance; }

/* ==========================================================================
   V7 (consolidated revision doc). Layered on top of v6 so earlier rules stay readable.
   Navigation, buttons, panels and footer match home-v7.
   ========================================================================== */
:root { --lift-shadow: 0 14px 28px -14px rgba(4, 2, 20, .75); --sy: clamp(24px, 3.4vw, 46px); }   /* ~92px between sections on desktop, ~48px on mobile */

/* ---------- Navigation (as home-v7) ---------- */
.nav .logo svg { color: var(--nebula); }
@media (max-width: 369px) { .logo__last { display: none; } }
.nav__links a:not(.btn) { position: relative; }
.nav__links a:not(.btn):hover, .nav__links a:not(.btn).is-active { color: var(--deep); }
.nav__links a:not(.btn)::after, .footer__links a::after, .footer__bottom a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; border-radius: 2px; background: var(--nova);
  transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
}
.nav__links a:not(.btn):hover::after, .nav__links a:not(.btn).is-active::after,
.footer__links a:hover::after, .footer__bottom a:hover::after { transform: scaleX(1); }
/* The full name and "Book a Call" need a little more room, so the menu collapses a bit earlier than v6 */
@media (max-width: 1020px) {
  .nav__toggle { display: inline-block; }
  .nav__bar { position: relative; }
  .nav__links { position: absolute; top: calc(100% + 10px); left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; background: var(--moon); border-radius: 22px; padding: 10px 20px 20px; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .6); }
  .nav.is-open .nav__links { display: flex; }
  .nav__links li { border-bottom: 1px solid var(--line-light); }
  .nav__links li:last-child { border: 0; padding-top: 14px; }
  .nav__links a:not(.btn) { display: block; padding: 13px 4px; font-size: 17px; }
  .nav__links .btn { width: 100%; }
  .nav__links a:not(.btn)::after { left: 4px; right: auto; width: 2.6em; bottom: 8px; }
}

/* ---------- Buttons: same colours and hover as the homepage ---------- */
.btn:hover { box-shadow: var(--lift-shadow); }
.btn--supernova:hover { background: #962970; box-shadow: var(--lift-shadow); }
.nav__links a.btn--supernova.is-active { color: var(--moon); }
.btn--moon:hover { box-shadow: var(--lift-shadow); }
.btn--quiet { border-color: var(--stardust); color: var(--moon); }
.btn--quiet:hover { background: rgba(195, 178, 236, .1); }
.btn--outline:hover { background: rgba(74, 59, 156, .08); color: var(--nebula); }

/* ---------- Hero: availability under the portrait ---------- */
.ohero__side { display: grid; justify-items: center; }
.ohero__side .ohero__art { width: min(100%, 380px); }
.avail { margin-top: 22px; text-align: center; font-size: 16.5px; white-space: nowrap; }
.avail i { animation: availBlink 1.6s ease-in-out 3; }   /* blinks 3 times (under 5s), then stays lit */
@keyframes availBlink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
@media (max-width: 860px) { .ohero__side .ohero__art { width: min(100%, 250px); } .avail { margin-top: 18px; } }
.avail.avail--top { margin: 0; text-align: left; }   /* V8: sits above the headline */

/* ---------- Challenge cards: the CTA steps forward once something is picked ---------- */
.tally__cta { transition: background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease; }
.tally.has-picks .tally__cta { background: var(--nova-deep); border-color: var(--nova-deep); color: var(--moon); box-shadow: 0 10px 24px -12px rgba(164, 45, 120, .8); }
.tally.has-picks .tally__cta:hover { background: #962970; box-shadow: var(--lift-shadow); }

/* ---------- Offers ---------- */
.offer__name { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; }

/* ---------- Case studies ---------- */
.case-tab:hover { border-color: var(--stardust); background: rgba(195, 178, 236, .12); color: var(--moon); }
.case-tab[aria-selected="true"] { background: var(--nebula); color: var(--moon); border-color: var(--stardust); }
.collage__note { margin-top: 16px; max-width: 46em; line-height: 1.55; }
.facts dd { line-height: 1.6; }
.evidence .stats { margin-bottom: 12px; }
.stat b { font-size: clamp(22px, 2vw, 26px); }   /* smaller than the case-study heading */

/* ---------- Kind words: more room before About Your OBM ---------- */
.kind { padding-bottom: calc(var(--sy) + clamp(32px, 4vw, 60px)); }

/* ---------- About Your OBM: clean Moonlight frosted glass ---------- */
.panel { background: var(--moon); }   /* V8: flat Moonlight, no frosted glass */

/* ---------- Footer (as home-v7) ---------- */
.footer__links a, .footer__bottom a { position: relative; text-decoration: none; }

/* ---------- V7 round 2 ---------- */
/* Offer buttons: Main Stage turns Stardust, Encore turns Aurora on hover and press */
.offer--main .btn--moon:hover, .offer--main .btn--moon:active { background: var(--stardust); color: var(--deep); }
.offer--encore .btn--moon:hover, .offer--encore .btn--moon:active { background: var(--aurora); color: var(--deep); }

/* Case studies: "What I Managed & Created" folds away (native <details>) */
.managed { border-top: 1px solid var(--line-dark); }
.managed summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 0;
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--aurora); }
.managed summary::-webkit-details-marker { display: none; }
.managed summary::after { content: "+"; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font: 400 18px/1 var(--sans); letter-spacing: 0; color: var(--deep); background: var(--comet); transition: transform .25s var(--ease); }
.managed[open] summary::after { transform: rotate(45deg); }
.managed summary:hover { color: var(--moon); }
.managed .facts__list { padding-bottom: 14px; color: var(--on-dark-muted); font-size: 16.5px; }

/* About: "Your OBM" in Deep Supernova */
#oabout-title em { color: var(--nova-deep); }

/* Final CTA: a printed card, with the same paper edge and lift as the case-study postcards */
.final {
  max-width: 780px; margin: 0 auto; border: 0; border-radius: 3px; background: var(--moon);
  padding: clamp(34px, 4.6vw, 52px) clamp(24px, 5vw, 60px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 2px 4px rgba(4, 2, 20, .25), 0 22px 40px -18px rgba(4, 2, 20, .85);
}
.final::before {                                    /* thin champagne printed border, inset like a card's margin */
  content: ""; position: absolute; inset: 8px; border: 1px solid rgba(199, 165, 111, .6); border-radius: 2px; pointer-events: none;
}
.final .speck { background: #C7A56F; filter: none; }
.final h2 { margin: 0 auto 12px; font-size: clamp(24px, 2.6vw, 32px); max-width: 18em; }
.final .lede { margin: 0 auto 22px; font-size: 16.5px; line-height: 1.6; max-width: 32em; }
.final__note { margin-top: 16px; }

/* Buttons: they still lift on hover, but never glow at rest or cast a shadow on hover.
   !important because several button variants set their own box-shadow above. */
.btn, .btn:hover, .btn:active { box-shadow: none !important; }

/* ---------- V8 readability: reading text on Deep Space in full Moonlight (footer and small labels stay softer) ---------- */
:root { --on-dark: #F5F2FA; }
.lede, .avail, .army__foot p, .facts dd, .managed .facts__list, .faq__side p:not(.eyebrow), .faq details > p, .offer__desc,
.collage__note, .evidence__note, .offer__fine, .cases__disclaimer { color: var(--moon); }

/* ---------- V8 accessibility (WCAG 2.2 AA) ---------- */
.nav :focus-visible { outline-color: var(--nebula); }   /* mint ring is ~1.4:1 on the light nav pill */
.footer__links a, .footer__bottom a { display: inline-flex; align-items: center; min-height: 24px; }   /* tap targets ≥24px */
@media (min-width: 921px) { .nav__links a:not(.btn) { display: inline-flex; align-items: center; min-height: 24px; } }
.footer .footer__h { font-family: var(--sans); font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; color: var(--stardust); margin: 0 0 14px; }   /* footer headings are h2 for a clean outline; same look as before */
/* Kind Words: Pause/Play (WCAG 2.2.2), styled like the other quiet pill buttons */
.marquee.is-paused .mq-track { animation-play-state: paused; }
.kind__ctrl { display: flex; justify-content: center; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .kind__ctrl { display: none; } }   /* nothing moves, so nothing to pause */

/* Quiet pause/play icon for moving strips (WCAG 2.2.2); hover-to-pause still works for mouse users */
.pause-icon { width: 30px; height: 30px; padding: 0; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid rgba(195, 178, 236, .35); background: transparent; color: var(--moon); opacity: .6; cursor: pointer; transition: opacity .2s ease, border-color .2s ease; }
.pause-icon:hover, .pause-icon:focus-visible { opacity: 1; border-color: var(--stardust); }
.pause-icon svg { width: 12px; height: 12px; fill: currentColor; }

/* Mobile (2026-10-15): portrait and "Trusted by" first, then the headline; portrait a little shorter so the headline starts near the first screen */
@media (max-width: 640px) {
  .ohero__side { order: -1; }
  .ohero__side .ohero__art { width: min(100%, 220px); }
  .ohero__grid { gap: 18px; }
}

/* Mobile (2026-10-15): "The backend is pulling you back in", "What Stronger Operations Make Possible" and "Two Ways to Work Together"
   show one card at a time like A.R.M.Y.: swipe or use the arrows (assets/js/swipe-v8.js). Desktop is unchanged. */
.swipe__bar { display: none; }
@media (max-width: 640px) {
  [data-swipe] > .is-off { display: none; }
  .pains[data-swipe] { grid-template-columns: 1fr; touch-action: pan-y; }
  .shift__list[data-swipe], .offers[data-swipe] { touch-action: pan-y; }
  .swipe__bar--top { margin: 0 0 14px; }
  .pains[data-swipe] .pain { min-height: 168px; flex-direction: column; align-items: flex-start; justify-content: center; }
  .pains[data-swipe] .pain:hover { transform: none; }
  .pains[data-swipe] .pain__text { font-size: 18px; }
  .swipe-in-r { animation: swipeInR .35s var(--ease) both; }
  .swipe-in-l { animation: swipeInL .35s var(--ease) both; }
  .swipe__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 14px 0 6px; }
  .swipe__count { color: var(--on-dark-muted); font-size: 15px; letter-spacing: .08em; }
  .swipe__bar .icon-btn:disabled { opacity: .35; cursor: default; background: transparent; border-color: rgba(195, 178, 236, .3); color: var(--moon); }
}
@keyframes swipeInR { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes swipeInL { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }


/* Mobile (2026-10-15): phones use the light CSS fade-in (museum.js) instead of the GSAP reveals; no sideways overflow */
@media (max-width: 640px) {
  .sec { overflow-x: clip; }
}
/* Mobile (2026-10-15): hero text centered under the portrait */
@media (max-width: 640px) {
  .ohero__grid > div:first-child { text-align: center; }
  .avail.avail--top { text-align: center; }
  .ohero .btn-row { justify-content: center; }
}
/* Mobile (2026-10-15): more breathing room between sections (about 88px instead of 48px) and under section headings */
@media (max-width: 640px) {
  :root { --sy: 44px; }
  .sec .head { margin-bottom: 28px; }
  .ohero { padding-bottom: 40px; }
}

/* Phones (2026-10-17): every section heading is centred */
@media (max-width: 640px) {
  #cases .head, .faq__side h2, .oabout__text h2, .oabout__role { text-align: center; }
}