/* =====================================================================
   Strategy Partners — CONCEPT 1  (dark premium)

   Direction correction, 2026-09-13: the "inkjet-friendly" rule applies to
   printed flyers ONLY. The website keeps the dark, sophisticated Concept 1
   presentation — depth, atmosphere, rich blue glow, restrained motion.

   The brain stays warm pink/peach. On a deep navy field it is the signature
   element; it reads as a person thinking, not as a machine.

   Scoped to `body.c1`, which every page now carries.
   ===================================================================== */

body.c1 {
  /* ---- ground ---- */
  --c1-bg:          #070b14;
  --c1-bg-2:        #0a1020;
  --c1-surface:     rgba(17,26,45,.72);
  --c1-surface-2:   rgba(23,34,58,.86);
  --c1-line:        rgba(122,156,222,.20);
  --c1-line-strong: rgba(122,156,222,.42);

  /* ---- type ---- */
  --c1-text:        #e9eefc;
  --c1-text-dim:    #a6b6d6;
  --c1-text-faint:  #7e8fb2;

  /* ---- blue: identity, structure, glow ---- */
  --c1-blue:        #4a8dff;
  --c1-blue-bright: #7db0ff;
  --c1-blue-deep:   #1c4fd4;
  --c1-blue-ink:    #05context;          /* overwritten below */
  --c1-glow:        rgba(74,141,255,.42);
  --c1-glow-soft:   rgba(74,141,255,.14);

  /* ---- the brain ---- */
  --c1-pink:        #ffd9d2;
  --c1-peach:       #ffb59c;
  --c1-pink-deep:   #e07f63;
  --c1-pink-warm:   #ff9a72;

  --c1-radius:      16px;
  --c1-pill:        999px;
  --c1-max:         1180px;

  background: var(--c1-bg);
  color: var(--c1-text);
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
body.c1 { --c1-blue-ink: #06101f; }

/* ---- atmosphere: depth without clutter. No canvas, no JS, no neon. ---- */
body.c1::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(1100px 700px at 78% -6%,  rgba(74,141,255,.20), transparent 62%),
    radial-gradient(760px 560px at 12% 14%,   rgba(255,150,116,.09), transparent 60%),
    radial-gradient(900px 900px at 50% 108%,  rgba(28,79,212,.16),  transparent 62%),
    linear-gradient(180deg, #070b14 0%, #0a1020 46%, #070b14 100%);
}
/* one slow, very soft drift — the only ambient motion on the page */
body.c1::after {
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  top: -18vh; right: -14vw; width: 62vw; height: 62vw; max-width: 900px; max-height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74,141,255,.13), transparent 66%);
  filter: blur(28px);
  animation: c1Drift 34s ease-in-out infinite alternate;
}
@keyframes c1Drift {
  from { transform: translate3d(0,0,0)          scale(1);    opacity: .85; }
  to   { transform: translate3d(-6vw, 7vh, 0)   scale(1.12); opacity: 1;   }
}

/* legacy layers retired site-wide: the particle canvas, the drifting
   schematics, the floating thought diagrams and the terminal ticker. Their
   source files are kept, they are simply no longer loaded or rendered. */
body.c1 .think-bg,
body.c1 .schematic-layer,
body.c1 .thought-layer,
body.c1 .sys-ticker { display: none !important; }

body.c1 a { color: var(--c1-blue-bright); }
body.c1 h1, body.c1 h2, body.c1 h3, body.c1 h4, body.c1 h5 { color: #fff; }
body.c1 .wrap { max-width: var(--c1-max); }
body.c1 p { color: var(--c1-text-dim); }

/* ---------------------------------------------------------------- nav */
body.c1 header {
  background: rgba(7,11,20,.78);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--c1-line);
  box-shadow: 0 1px 0 rgba(255,255,255,.04);
}
body.c1 .brand { color: #fff; letter-spacing: .2px; }
body.c1 .brand span { color: var(--c1-blue); }
body.c1 .nav a.link { color: var(--c1-text-dim); font-weight: 500; }
body.c1 .nav a.link:hover { color: #fff; }
body.c1 .nav a.link.active { color: #fff; font-weight: 700; }
body.c1 .nav .cta-mini {
  background: transparent; color: var(--c1-blue-bright);
  border: 1px solid var(--c1-line-strong); border-radius: var(--c1-pill);
  padding: 8px 18px;
}
body.c1 .nav .cta-mini:hover {
  border-color: var(--c1-blue); color: #fff;
  background: rgba(74,141,255,.14); box-shadow: 0 0 22px var(--c1-glow-soft);
}
body.c1 .nav-toggle { border-color: var(--c1-line-strong); background: transparent; }
body.c1 .nav-toggle span { background: var(--c1-text); }
body.c1 .nav.open a.link { border-top-color: var(--c1-line); color: var(--c1-text); }
body.c1 .nav.open .cta-mini {
  background: var(--c1-blue); color: #fff; border-color: var(--c1-blue);
}

body.c1 .skip { background: var(--c1-blue); color: #fff; }
body.c1 :focus-visible { outline: 2px solid var(--c1-blue-bright); outline-offset: 3px; }

/* ------------------------------------------------------------- buttons */
body.c1 .btn {
  border-radius: var(--c1-pill); padding: 12px 26px;
  font-weight: 600; font-size: 1rem; line-height: 1.35;
  border: 1px solid transparent;
  transition: box-shadow .28s ease, border-color .28s ease, background .28s ease, color .28s ease;
}
body.c1 .btn-primary {
  background: linear-gradient(180deg, #5f9bff, var(--c1-blue-deep));
  color: #fff; border-color: rgba(160,196,255,.55);
  box-shadow: 0 10px 30px rgba(28,79,212,.42), inset 0 1px 0 rgba(255,255,255,.28);
}
body.c1 .btn-primary:hover {
  box-shadow: 0 12px 40px rgba(74,141,255,.6), inset 0 1px 0 rgba(255,255,255,.34);
  transform: none; color: #fff;
}
body.c1 .btn-ghost {
  background: rgba(255,255,255,.03); color: var(--c1-text);
  border-color: var(--c1-line-strong);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: none;
}
body.c1 .btn-ghost:hover {
  border-color: var(--c1-blue); color: #fff;
  background: rgba(74,141,255,.10); box-shadow: 0 0 26px var(--c1-glow-soft); transform: none;
}

/* ============================ shared section furniture ============== */
body.c1 section { padding: clamp(56px, 7vw, 96px) 0; position: relative; }
body.c1 section:not(.hero):nth-of-type(even) { background: rgba(255,255,255,.014); }
body.c1 .kicker, body.c1 .c1-eyebrow {
  color: var(--c1-blue-bright); font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.7px; margin-bottom: 12px;
}
body.c1 h2 {
  font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.5rem);
  line-height: 1.14; letter-spacing: -.024em; margin-bottom: 14px;
  text-wrap: balance;
}
body.c1 .lede { color: var(--c1-text-dim); max-width: 46rem; }
body.c1 .c1-rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--c1-line-strong), transparent);
}

/* ==================================================================
   HERO — the brain rises out of the dark and fires.
   ================================================================== */
body.c1 .hero {
  padding: clamp(32px, 5vw, 64px) 0 clamp(52px, 7vw, 96px);
  min-height: 0; overflow: hidden; background: none;
}
body.c1 .hero::after { display: none; }
body.c1 .hero .wrap {
  max-width: var(--c1-max); padding: 0 20px;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(20px, 4vw, 40px);
}
/* THE BRAIN IS THE INTRO — it opens the page full and centered, the
   locked hero copy settles in below once the sequence has landed. */
body.c1 .c1-hero-cinematic .c1-brain-stage { width: 100%; max-width: 780px; margin: 0 auto; }
@media (min-width: 981px) {
  body.c1 .c1-brain { max-width: 620px; }
}
body.c1 .hero-copy {
  min-width: 0; text-align: center; max-width: 46rem; margin: 0 auto;
}
body.c1 .hero-copy.c1-hero-reveal {
  opacity: 0; transform: translateY(16px);
  animation: c1CopyReveal .9s ease 2.1s both;
}
@keyframes c1CopyReveal { to { opacity: 1; transform: none; } }
body.c1 .hero .kicker, body.c1 .hero h1, body.c1 .hero .lede { text-shadow: none; }
body.c1 .hero h1 {
  color: #fff;
  font-size: clamp(2.1rem, 1.25rem + 3vw, 3.7rem);
  line-height: 1.06; letter-spacing: -.03em;
  max-width: 20ch; margin: 0 auto 18px; text-wrap: balance;
  text-shadow: 0 0 60px rgba(74,141,255,.28);
}
body.c1 .hero .lede {
  color: var(--c1-text-dim); max-width: 34rem; margin: 0 auto;
  font-size: clamp(1rem, .96rem + .36vw, 1.14rem); line-height: 1.62;
}
body.c1 .hero .btn-row { margin-top: 32px; gap: 12px; justify-content: center; }

/* ==================================================================
   THE BRAIN
   ================================================================== */
body.c1 .c1-brain-stage {
  min-width: 0; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
body.c1 .c1-brain { width: 100%; max-width: 470px; margin: 0 auto; position: relative; overflow: hidden; }

/* the pool of light it rises out of */
body.c1 .c1-brain::before {
  content: ""; position: absolute; left: 50%; top: 54%;
  width: 118%; height: 118%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(74,141,255,.30), rgba(74,141,255,.07) 46%, transparent 68%);
  filter: blur(16px); pointer-events: none; z-index: 0;
  transition: opacity 1.2s ease, transform 1.2s ease;
}
body.c1 .c1-brain[data-lobe]::before { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }

/* smoke the brain rises out of — sits behind the image, cropped to the same stage */
body.c1 .c1-smoke {
  position: absolute; left: 50%; top: 50%; z-index: 0;
  width: 130%; height: 130%; transform: translate(-50%, -50%);
  object-fit: cover; pointer-events: none;
  mix-blend-mode: screen; opacity: .5;
  filter: grayscale(1) sepia(1) hue-rotate(180deg) saturate(4) brightness(1.05);
  mask-image: radial-gradient(ellipse 52% 58% at 50% 50%, #000 55%, transparent 88%);
  -webkit-mask-image: radial-gradient(ellipse 52% 58% at 50% 50%, #000 55%, transparent 88%);
}

/* rise on load, then keep a slow drift/breathe */
body.c1 .c1-brain-img-wrap {
  position: relative; z-index: 1;
  transform-origin: 50% 56%;
  animation: c1Rise 1.6s cubic-bezier(.22,.9,.26,1) both,
             c1Breathe 8s ease-in-out 1.6s infinite;
}
@keyframes c1Rise {
  from { opacity: 0; transform: translateY(38px) scale(.94); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
@keyframes c1Breathe {
  0%, 100%  { transform: translateY(0)    scale(1);     }
  50%       { transform: translateY(-5px) scale(1.012); }
}

/* crop the stock photo to an oval silhouette so it reads as a contained
   "brain" rather than a full rectangular image, and keeps its baked-in
   edge lightning out of frame */
body.c1 .c1-brain-photo {
  display: block; width: 100%; height: auto;
  mask-image: radial-gradient(ellipse 48% 52% at 50% 50%, #000 62%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse 48% 52% at 50% 50%, #000 62%, transparent 92%);
  filter: saturate(1.05) brightness(.92) contrast(1.08)
          drop-shadow(0 0 34px rgba(74,141,255,.35));
}

/* localized lobe firing — real cropped PNG overlays (same canvas/crop as
   c1-brain-photo) stacked on top of the base photo, one lit at a time,
   keyed to brain.js's data-lobe. Replaces the old radial-gradient blobs:
   each overlay only contains pixels where that region of the ACTUAL
   artwork is already bright, so "on" reads as that part of the brain
   firing, not a glow floating over it. */
body.c1 .c1-lobe-png {
  display: block; position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; pointer-events: none;
  mix-blend-mode: screen; opacity: 0;
  filter: brightness(1) drop-shadow(0 0 8px rgba(125,176,255,.2));
  transition: opacity 1.1s ease;
}
/* per-lobe soft masks — each is a small radial gradient centered on that
   overlay's real pixel-measured brightness centroid, sized well inside its
   own hard-cropped polygon so the mask always fades to fully transparent
   BEFORE reaching the PNG's real edge. Since visible opacity = PNG alpha x
   mask alpha, and the PNG is already opaque everywhere the mask is
   non-zero, no straight/rectangular/polygon edge can ever be exposed. */
body.c1 .c1-lobe-png[data-lobe="frontal"] {
  mask-image: radial-gradient(ellipse 8% 10% at 36.5% 54.8%, #000 0%, #000 25%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 8% 10% at 36.5% 54.8%, #000 0%, #000 25%, transparent 90%);
}
body.c1 .c1-lobe-png[data-lobe="parietal"] {
  mask-image: radial-gradient(ellipse 16% 13% at 56.9% 30.7%, #000 0%, #000 25%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 16% 13% at 56.9% 30.7%, #000 0%, #000 25%, transparent 90%);
}
body.c1 .c1-lobe-png[data-lobe="temporal"] {
  mask-image: radial-gradient(ellipse 12% 11% at 41.0% 51.6%, #000 0%, #000 25%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 12% 11% at 41.0% 51.6%, #000 0%, #000 25%, transparent 90%);
}
body.c1 .c1-lobe-png[data-lobe="occipital"] {
  mask-image: radial-gradient(ellipse 9% 21% at 72.9% 45.2%, #000 0%, #000 25%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 9% 21% at 72.9% 45.2%, #000 0%, #000 25%, transparent 90%);
}
body.c1 .c1-brain[data-lobe="frontal"]   .c1-lobe-png[data-lobe="frontal"],
body.c1 .c1-brain[data-lobe="parietal"]  .c1-lobe-png[data-lobe="parietal"],
body.c1 .c1-brain[data-lobe="temporal"]  .c1-lobe-png[data-lobe="temporal"],
body.c1 .c1-brain[data-lobe="occipital"] .c1-lobe-png[data-lobe="occipital"] {
  opacity: 1; animation: c1LobePulse 2.6s ease-in-out infinite, c1Firing 2.6s ease-in-out infinite;
}
@keyframes c1LobePulse {
  0%, 100% { opacity: .7; }
  46%      { opacity: 1;  }
}
/* subtle brain-surface electrical firing — a brightness flicker plus a soft
   cyan/blue drop-shadow spread into the neighboring folds, on the real
   overlay pixels only (the mask above keeps everything else invisible) */
@keyframes c1Firing {
  0%, 88%, 100% {
    filter: brightness(1)
      drop-shadow(0 0 22px rgba(190,225,255,.5))
      drop-shadow(0 0 60px rgba(125,176,255,.3))
      drop-shadow(0 0 110px rgba(74,141,255,.14));
  }
  90% {
    filter: brightness(1.5)
      drop-shadow(0 0 30px rgba(190,225,255,.65))
      drop-shadow(0 0 76px rgba(125,176,255,.42))
      drop-shadow(0 0 140px rgba(74,141,255,.2));
  }
  92% {
    filter: brightness(1)
      drop-shadow(0 0 22px rgba(190,225,255,.5))
      drop-shadow(0 0 60px rgba(125,176,255,.3))
      drop-shadow(0 0 110px rgba(74,141,255,.14));
  }
  95% {
    filter: brightness(1.7)
      drop-shadow(0 0 36px rgba(190,225,255,.75))
      drop-shadow(0 0 90px rgba(125,176,255,.46))
      drop-shadow(0 0 170px rgba(74,141,255,.24));
  }
}

/* ---------------------------------------------------- the thought chain */
body.c1 .c1-chain {
  width: 100%; max-width: 470px; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 182px;
}
body.c1 .c1-step {
  opacity: 0; transform: translateY(8px);
  transition: opacity .8s ease, transform .8s ease;
  border-radius: var(--c1-radius); padding: 13px 17px; margin: 0;
  font-size: .95rem; line-height: 1.45;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
body.c1 .c1-step.is-in { opacity: 1; transform: none; }
body.c1 .c1-step-problem {
  background: rgba(64,30,22,.5); border: 1px solid rgba(255,150,116,.42);
  color: #ffc9b4; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
body.c1 .c1-step-connection {
  background: rgba(18,34,68,.62); border: 1px solid rgba(122,176,255,.40);
  color: #cfe0ff; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
body.c1 .c1-step-result {
  background: linear-gradient(180deg, rgba(74,141,255,.30), rgba(28,79,212,.34));
  border: 1px solid rgba(140,186,255,.62); color: #fff; font-weight: 700;
  box-shadow: 0 10px 34px rgba(28,79,212,.34), inset 0 1px 0 rgba(255,255,255,.20);
}
body.c1 .c1-step-label {
  display: block; font-size: .63rem; font-weight: 800; letter-spacing: 1.6px;
  text-transform: uppercase; opacity: .76; margin-bottom: 4px;
}
body.c1 .c1-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==================================================================
   Panels — one surface language for every card on the site
   ================================================================== */
body.c1 .c1-panel,
body.c1 .card,
body.c1 .audit-box,
body.c1 .email-card,
body.c1 .chart-node,
body.c1 .roi-out {
  background: var(--c1-surface);
  background-image: none;
  border: 1px solid var(--c1-line);
  border-radius: var(--c1-radius);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 44px rgba(0,0,0,.42);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
body.c1 .c1-panel:hover, body.c1 .card:hover {
  border-color: var(--c1-line-strong); transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 24px 56px rgba(0,0,0,.5),
              0 0 34px var(--c1-glow-soft);
}
body.c1 .card::before, body.c1 .card::after,
body.c1 .frame::before, body.c1 .frame::after { display: none; }
body.c1 .card .tag { color: var(--c1-blue-bright); }
body.c1 .card .tag.roadmap { color: #ffb082; }

/* round icon language */
body.c1 .c1-icon {
  width: 52px; height: 52px; border-radius: 50%; flex: 0 0 52px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 32% 28%, rgba(122,176,255,.34), rgba(28,79,212,.20));
  border: 1px solid rgba(122,176,255,.44);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 26px var(--c1-glow-soft);
  margin-bottom: 16px;
}
body.c1 .c1-icon svg { width: 24px; height: 24px; fill: none; stroke: #bcd7ff; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }

/* ---- What We Build ---- */
body.c1 .c1-grid-4 {
  display: grid; gap: 18px; margin-top: 34px;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}
body.c1 .c1-grid-4 .c1-panel { padding: 24px 22px 26px; }
body.c1 .c1-grid-4 h3 { font-size: 1.08rem; margin-bottom: 8px; }
body.c1 .c1-grid-4 p { font-size: .93rem; line-height: 1.55; color: var(--c1-text-dim); }

/* ---- Featured Work ---- */
body.c1 .c1-work-grid {
  display: grid; gap: 18px; margin-top: 34px;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
}
body.c1 .c1-work-card {
  display: flex; flex-direction: column; overflow: hidden;
  padding: 0; text-decoration: none; position: relative;
}
body.c1 .c1-work-card:hover { text-decoration: none; }
body.c1 .c1-work-card.is-wide { grid-column: 1 / -1; }
body.c1 .c1-work-shot { position: relative; overflow: hidden; background: #0a1020; }
body.c1 .c1-work-shot img {
  display: block; width: 100%; height: 208px; object-fit: cover; object-position: center 20%;
  filter: saturate(.92) contrast(1.04) brightness(.86);
  transition: transform .5s ease, filter .4s ease;
}
body.c1 .c1-work-card.is-wide .c1-work-shot img { height: 290px; }
body.c1 .c1-work-card:hover .c1-work-shot img { transform: scale(1.035); filter: saturate(1) contrast(1.02) brightness(.96); }
body.c1 .c1-work-shot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,11,20,.10), rgba(7,11,20,.86));
}
/* a card with no screenshot gets a drawn plate instead of a stock image */
body.c1 .c1-work-plate {
  height: 208px; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(420px 200px at 50% 30%, rgba(74,141,255,.22), transparent 70%),
    linear-gradient(180deg, #0d1526, #080d18);
  border-bottom: 1px solid var(--c1-line);
}
body.c1 .c1-work-plate svg { width: 74px; height: 74px; fill: none; stroke: #86b2ff;
  stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: .82; }
body.c1 .c1-work-body { padding: 20px 22px 24px; }
body.c1 .c1-work-body h3 { font-size: 1.14rem; margin-bottom: 7px; }
body.c1 .c1-work-body p { color: var(--c1-text-dim); font-size: .92rem; line-height: 1.55; }
body.c1 .c1-status {
  display: inline-block; font-size: .64rem; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; padding: 5px 13px; border-radius: var(--c1-pill);
  border: 1px solid rgba(122,176,255,.42); color: #a9cbff;
  background: rgba(74,141,255,.12); margin-bottom: 11px;
}
body.c1 .c1-status.is-flagship { border-color: rgba(255,170,124,.5); color: #ffc7a4; background: rgba(255,150,116,.12); }
body.c1 .c1-status.is-dev { border-color: rgba(168,183,214,.4); color: #b7c5e0; background: rgba(255,255,255,.05); }

/* ---- How We Think ---- */
body.c1 .c1-steps {
  display: grid; gap: 16px; margin-top: 34px; counter-reset: c1step;
  grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
}
body.c1 .c1-steps .c1-panel { padding: 24px 22px; counter-increment: c1step; position: relative; }
body.c1 .c1-steps .c1-panel::before {
  content: counter(c1step, decimal-leading-zero);
  position: absolute; top: 16px; right: 18px;
  font: 800 1.7rem/1 "Inter", sans-serif; color: rgba(122,176,255,.20); letter-spacing: -1px;
}
body.c1 .c1-steps h3 { font-size: 1.05rem; margin-bottom: 7px; }
body.c1 .c1-steps p { font-size: .92rem; line-height: 1.55; }
body.c1 .c1-flow {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 30px; padding: 18px 20px;
  border: 1px solid var(--c1-line); border-radius: var(--c1-radius);
  background: rgba(10,16,32,.6);
}
body.c1 .c1-flow span {
  font-size: .78rem; font-weight: 700; letter-spacing: .6px; color: var(--c1-text);
  padding: 7px 14px; border-radius: var(--c1-pill);
  border: 1px solid var(--c1-line-strong); background: rgba(255,255,255,.035);
}
body.c1 .c1-flow i { color: var(--c1-blue); font-style: normal; opacity: .8; }

/* ---- Frontstage / Backstage ---- */
body.c1 .c1-stage-grid {
  display: grid; gap: 18px; margin-top: 34px;
  grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
}
body.c1 .c1-stage-grid .c1-panel { padding: 24px 22px 26px; }
body.c1 .c1-stage-grid h3 { font-size: 1.08rem; margin-bottom: 6px; }
body.c1 .c1-qa { list-style: none; margin: 26px 0 0; padding: 0; }
body.c1 .c1-qa li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  padding: 14px 2px; border-top: 1px solid var(--c1-line);
  font-size: .95rem;
}
body.c1 .c1-qa li:last-child { border-bottom: 1px solid var(--c1-line); }
body.c1 .c1-qa b { color: var(--c1-text); font-weight: 600; }
body.c1 .c1-qa em {
  color: var(--c1-blue-bright); font-style: normal; font-weight: 600;
}
body.c1 .c1-pull {
  margin-top: 30px; padding: 22px 26px; border-radius: var(--c1-radius);
  border: 1px solid var(--c1-line-strong);
  background: linear-gradient(180deg, rgba(74,141,255,.12), rgba(10,16,32,.5));
  font-size: clamp(1.05rem, .98rem + .5vw, 1.3rem); font-weight: 600; color: #fff;
  line-height: 1.45;
}

/* ---- Website Viewer ---- */
body.c1 .c1-viewer-grid {
  display: grid; gap: clamp(24px, 4vw, 46px); align-items: center; margin-top: 30px;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
}
body.c1 .c1-screens { display: flex; align-items: flex-end; justify-content: center; gap: 14px; }
body.c1 .c1-screen {
  border: 1px solid var(--c1-line-strong); border-radius: 12px; background: #0b1222;
  box-shadow: 0 22px 50px rgba(0,0,0,.5), 0 0 40px var(--c1-glow-soft);
  overflow: hidden; flex-shrink: 0;
}
body.c1 .c1-screen .bar {
  height: 22px; display: flex; align-items: center; gap: 5px; padding: 0 9px;
  background: rgba(255,255,255,.05); border-bottom: 1px solid var(--c1-line);
}
body.c1 .c1-screen .bar i { width: 6px; height: 6px; border-radius: 50%; background: rgba(140,170,220,.5); }
body.c1 .c1-screen .body { padding: 11px; display: flex; flex-direction: column; gap: 7px; }
body.c1 .c1-screen .body u {
  display: block; height: 7px; border-radius: 3px; text-decoration: none;
  background: linear-gradient(90deg, rgba(122,176,255,.42), rgba(122,176,255,.10));
}
body.c1 .c1-screen .body u.w60 { width: 60%; } body.c1 .c1-screen .body u.w80 { width: 80%; }
body.c1 .c1-screen .body u.tall { height: 30px; background: rgba(122,176,255,.13); }
body.c1 .c1-screen.is-desk { width: 220px; }
body.c1 .c1-screen.is-tab  { width: 120px; }
body.c1 .c1-screen.is-ph   { width: 74px; }

/* ---- final CTA ---- */
body.c1 .c1-final { text-align: center; }
body.c1 .c1-final .wrap { max-width: 800px; }
body.c1 .c1-final h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); }
body.c1 .c1-final .lede { margin: 0 auto; }
body.c1 .c1-final .btn-row { justify-content: center; }
body.c1 .c1-closing {
  margin-top: 30px; color: var(--c1-text-faint); font-size: .95rem;
  max-width: 44rem; margin-left: auto; margin-right: auto; line-height: 1.6;
}

/* ==================================================================
   Legacy content on the inner pages, brought into the same system
   ================================================================== */
body.c1 .workcard {
  background: var(--c1-surface); border: 1px solid var(--c1-line);
  border-radius: var(--c1-radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 44px rgba(0,0,0,.42);
}
body.c1 .workcard:hover {
  border-color: var(--c1-line-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 24px 56px rgba(0,0,0,.5), 0 0 34px var(--c1-glow-soft);
}
body.c1 .workcard img { filter: saturate(.9) contrast(1.04) brightness(.86); }
body.c1 .workcard:hover img { filter: saturate(1) contrast(1.02) brightness(.96); }
body.c1 .workcard .label h3 { color: #fff; }
body.c1 .workcard .label p { color: var(--c1-text-dim); }
body.c1 .workcard::before { color: rgba(122,176,255,.18); text-shadow: none; }
body.c1 .workcard::after { display: none; }

body.c1 .frame { background: #0b1222; border-color: var(--c1-line); border-radius: 12px; }
body.c1 .frame .chrome { background: rgba(255,255,255,.05); border-bottom-color: var(--c1-line); }
body.c1 .frame .chrome span { color: var(--c1-text-faint); }
body.c1 .gallery figcaption { color: var(--c1-text-faint); }

/* the old green "signal" accent and amber CTA are retired on c1 pages */
body.c1 .hero .accent, body.c1 .accent { color: var(--c1-blue-bright); text-shadow: none; }
body.c1 .hero .accent2, body.c1 .accent2 { color: #ffb89a; text-shadow: none; }
body.c1 .stat { border-left-color: var(--c1-line-strong); background: rgba(10,16,32,.5);
                border: 1px solid var(--c1-line); border-radius: 12px; }
body.c1 .stat .num { color: var(--c1-blue-bright); }
body.c1 .stat .lbl { color: var(--c1-text-dim); }
body.c1 .case { border-left-color: var(--c1-blue); }
body.c1 .case .meta { color: var(--c1-text-faint); }
body.c1 ul.plain li { color: var(--c1-text-dim); }
body.c1 ul.plain li::before { color: var(--c1-blue); }
body.c1 .metric-strip .m { border-left-color: var(--c1-blue); }
body.c1 .metric-strip .m b { color: var(--c1-text); }
body.c1 .metric-strip .m span { color: var(--c1-text-faint); }
body.c1 .stack-label, body.c1 .vbr-num, body.c1 .chart-node .node-tag { color: var(--c1-blue-bright); }
body.c1 .chart-badge { background: rgba(74,141,255,.12); border-color: rgba(122,176,255,.42); color: #a9cbff; }
body.c1 .audit-box select, body.c1 .audit-box input {
  background: rgba(10,16,32,.8); border-color: var(--c1-line-strong); color: var(--c1-text);
}
body.c1 .audit-box label, body.c1 .roi-row label { color: var(--c1-text-dim); }
body.c1 .roi-row .val, body.c1 .roi-out .cap { color: var(--c1-blue-bright); }
body.c1 .bar-fill, body.c1 .roi-fill { background: linear-gradient(90deg, var(--c1-blue), var(--c1-blue-bright)); }
body.c1 .bar-track, body.c1 .roi-track { background: rgba(255,255,255,.07); }
body.c1 .roi-out .big { color: #ffb89a; }
body.c1 .roi-out .big.year { color: var(--c1-blue-bright); }
body.c1 .roi-out .chain, body.c1 .roi-note { color: var(--c1-text-faint); }
body.c1 .roi-row input[type=range] { background: rgba(255,255,255,.09); }
body.c1 .roi-row input[type=range]::-webkit-slider-thumb {
  background: var(--c1-blue); border-color: var(--c1-bg);
  box-shadow: 0 0 0 1px var(--c1-blue), 0 0 14px var(--c1-glow);
}
body.c1 .scroll-progress { background: linear-gradient(90deg, var(--c1-blue-deep), var(--c1-blue-bright)); }

/* footer */
body.c1 footer {
  background: rgba(5,8,15,.86); border-top: 1px solid var(--c1-line); color: var(--c1-text-dim);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
body.c1 .f-brand-name { color: #fff; }
body.c1 .f-brand-name span { color: var(--c1-blue); }
body.c1 .footer-grid .f-brand p { color: var(--c1-text-dim); }
body.c1 .f-col h5, body.c1 .f-col h3.f-h { color: var(--c1-blue-bright); }
body.c1 .f-col a { color: var(--c1-text); }
body.c1 .f-col a:hover { color: #fff; }
body.c1 .footer-bottom { border-top-color: var(--c1-line); color: var(--c1-text-faint); }

body.c1 .build-badge {
  background: rgba(10,16,32,.9); border: 1px solid var(--c1-line);
  color: var(--c1-blue-bright); opacity: .55;
}

/* ==================================================================
   RESPONSIVE
   ================================================================== */
@media (max-width: 980px) {
  body.c1 .hero .wrap { grid-template-columns: 1fr; gap: 32px; }
  body.c1 .hero h1 { max-width: 18ch; }
  body.c1 .c1-brain-stage { align-items: stretch; }
  body.c1 .c1-brain { max-width: 390px; }
  body.c1 .c1-chain { max-width: 540px; margin: 0 auto; }
  body.c1 .c1-viewer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body.c1 .c1-work-card.is-wide { grid-column: auto; }
  body.c1 .c1-work-card.is-wide .c1-work-shot img { height: 208px; }
}

@media (max-width: 640px) {
  body.c1 { font-size: 16px; }
  body.c1 section { padding: 46px 0; }
  body.c1 .hero { padding: 28px 0 44px; }
  body.c1 .hero .wrap { padding: 0 18px; gap: 28px; }
  body.c1 .hero h1 { font-size: clamp(1.74rem, 1.05rem + 3.5vw, 2.3rem); max-width: 100%; }
  body.c1 .hero .lede { font-size: 1rem; }
  body.c1 .hero .btn-row { margin-top: 24px; gap: 10px; }
  body.c1 .hero .btn { width: 100%; text-align: center; padding: 13px 20px; }
  body.c1 .c1-brain { max-width: 300px; }
  body.c1 .c1-chain { min-height: 172px; }
  body.c1 .c1-step { font-size: .9rem; padding: 12px 14px; }
  body.c1 .c1-screen.is-desk { width: 168px; }
  body.c1 .c1-screen.is-tab  { width: 96px; }
  body.c1 .c1-screen.is-ph   { width: 62px; }
  body.c1 .c1-flow { gap: 7px; padding: 15px 16px; }
  body.c1 .c1-flow span { font-size: .72rem; padding: 6px 11px; }
  body.c1 .c1-qa li { gap: 4px; }
}

@media (max-width: 400px) {
  body.c1 .hero .wrap { padding: 0 16px; }
  body.c1 .wrap { padding: 0 16px; }
  body.c1 .c1-brain { max-width: 250px; }
  body.c1 .c1-brain-stage { gap: 16px; }
  body.c1 .c1-screens { gap: 10px; }
  body.c1 .c1-screen.is-desk { width: 148px; }
  body.c1 .c1-screen.is-tab  { width: 84px; }
  body.c1 .c1-screen.is-ph   { width: 54px; }
}

@media (max-width: 360px) {
  body.c1 .hero .wrap, body.c1 .wrap { padding: 0 14px; }
  body.c1 .hero .kicker { font-size: .7rem; letter-spacing: .9px; margin-bottom: 11px; }
  body.c1 .hero h1 { font-size: 1.62rem; letter-spacing: -.02em; }
  body.c1 .c1-brain { max-width: 214px; }
  body.c1 .c1-step { font-size: .86rem; padding: 11px 12px; }
  body.c1 .c1-chain { min-height: 180px; }
  body.c1 .c1-icon { width: 46px; height: 46px; flex-basis: 46px; }
  body.c1 .c1-screens { gap: 8px; }
  body.c1 .c1-screen.is-desk { width: 118px; }
  body.c1 .c1-screen.is-tab  { width: 68px; }
  body.c1 .c1-screen.is-ph   { width: 44px; }
}

/* ==================================================================
   REDUCED MOTION — atmosphere holds still, the brain does not rise,
   breathe, pulse or fire. One complete chain stays on screen.
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
  body.c1::after { animation: none; }
  body.c1 .c1-brain-img-wrap { animation: none; transform: none; opacity: 1; }
  body.c1 .hero-copy.c1-hero-reveal { animation: none; opacity: 1; transform: none; }
  body.c1 .c1-brain::before { transition: none; }
  body.c1 .c1-smoke { animation: none; }
  body.c1 .c1-lobe-png { transition: none; }
  body.c1 .c1-brain[data-lobe="frontal"]   .c1-lobe-png[data-lobe="frontal"],
  body.c1 .c1-brain[data-lobe="parietal"]  .c1-lobe-png[data-lobe="parietal"],
  body.c1 .c1-brain[data-lobe="temporal"]  .c1-lobe-png[data-lobe="temporal"],
  body.c1 .c1-brain[data-lobe="occipital"] .c1-lobe-png[data-lobe="occipital"] {
    opacity: .85; animation: none;
  }
  body.c1 .c1-step { transition: none; opacity: 1; transform: none; }
  body.c1 .c1-panel:hover, body.c1 .card:hover,
  body.c1 .workcard:hover, body.c1 .btn:hover { transform: none; }
  body.c1 .c1-work-card:hover .c1-work-shot img { transform: none; }
}

/* ==================================================================
   CINEMATIC INTRO - 13.5s full-screen opening (cut from 42s, 2026-09-24). Hidden by default
   ([hidden] in the HTML); intro.js is the only thing that reveals it,
   so a no-JS visitor gets the real homepage immediately. When the
   pre-body head script has flagged a pending intro, siblings are kept
   invisible so the homepage never flashes behind it.
   ================================================================== */
html.c1-intro-pending body > *:not(.c1-intro) { visibility: hidden; }
html.c1-intro-pending .c1-intro { display: flex !important; visibility: visible; }
html.c1-intro-lock, html.c1-intro-lock body { overflow: hidden; height: 100%; }

body.c1 .c1-intro {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: #02040a; overflow: hidden;
  transition: opacity .5s ease;
}
body.c1 .c1-intro[hidden] { display: none; }
body.c1 .c1-intro.is-exiting { opacity: 0; pointer-events: none; }

body.c1 .c1-intro-skip {
  position: absolute; top: 18px; right: 18px; z-index: 8;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.22);
  color: #cfe0ff; font: 700 .78rem/1 "Inter", sans-serif; letter-spacing: .5px;
  padding: 10px 18px; border-radius: 999px; cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
body.c1 .c1-intro-skip:hover { background: rgba(255,255,255,.12); }
body.c1 .c1-intro-skip:focus-visible { outline: 2px solid #7db0ff; outline-offset: 2px; }

/* Sound-entry choice — a small restrained card, not a splash screen. The
   storm is already faintly visible behind it (dark scrim only, no video
   box of its own). Removed entirely (display:none) once a choice is made
   so it can never intercept a click once the cinematic is running. */
body.c1 .c1-intro-choice {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(2,4,10,.35), rgba(2,4,10,.82) 100%);
  opacity: 1; transition: opacity .6s ease;
}
body.c1 .c1-intro.phase-choice-done .c1-intro-choice { opacity: 0; pointer-events: none; }
body.c1 .c1-intro-choice-card {
  text-align: center; padding: 0 24px;
}
body.c1 .c1-intro-choice-label {
  color: #b9c6e6; font: 600 .82rem/1.4 "Inter", sans-serif;
  letter-spacing: .3px; margin: 0 0 16px;
}
body.c1 .c1-intro-choice-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
body.c1 .c1-intro-choice-btn {
  font: 700 .82rem/1 "Inter", sans-serif; letter-spacing: .3px;
  padding: 12px 22px; border-radius: 999px; cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
body.c1 .c1-intro-choice-sound {
  background: #4a8dff; border: 1px solid #4a8dff; color: #071022;
}
body.c1 .c1-intro-choice-sound:hover { background: #6ba2ff; }
body.c1 .c1-intro-choice-muted {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.22); color: #cfe0ff;
}
body.c1 .c1-intro-choice-muted:hover { background: rgba(255,255,255,.12); }
body.c1 .c1-intro-choice-btn:focus-visible { outline: 2px solid #7db0ff; outline-offset: 2px; }

/* the stage used to be a capped min(94vw,920px) x min(88vh,920px) box —
   that fixed square, centered on an otherwise full-black screen, is what
   produced the visible frame/rectangle artifacts (anything painted with
   an inset:0 background inside it, like .c1-intro-message, ended exactly
   at that box's edges/corners instead of the real screen edges). The
   stage is now the full viewport itself, so every full-bleed layer inside
   it — brain, thoughts, message — paints all the way to the real screen
   edges and there is no inner boundary left to see. */
body.c1 .c1-intro-stage {
  /* absolute + no z-index (not fixed) so this stays full-bleed against
     the fixed #c1Intro ancestor WITHOUT creating its own stacking
     context — fixed positioning always creates one, which would trap
     the thoughts/message text behind .c1-intro-cloudfloor instead of
     letting their z-index compare directly against it as intended */
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding-bottom: 7vh; box-sizing: border-box;
}

/* 0-4s: near-black, low blue-white flashes firing UNDER the fog band —
   the radial center sits low (92% down) and small, so the flash reads as
   electrical energy lighting the fog from beneath rather than a bolt over
   the whole sky. Nothing here ever covers the upper 70-80% of the screen. */
body.c1 .c1-intro-storm {
  position: absolute; inset: -20vh -20vw; z-index: 1; opacity: 0;
  pointer-events: none; mix-blend-mode: screen;
}
body.c1 .c1-intro.phase-storm .c1-intro-storm { animation: c1StormFlash 1s ease-in-out both; }
@keyframes c1StormFlash {
  0%, 100% { background: transparent; opacity: 0; }
  17%      { background: radial-gradient(ellipse 46% 22% at 46% 92%, rgba(190,215,255,.6), transparent 68%); opacity: 1; }
  21%      { opacity: 0; }
  52%      { background: radial-gradient(ellipse 42% 20% at 58% 94%, rgba(150,190,255,.42), transparent 68%); opacity: .85; }
  56%      { opacity: 0; }
}

/* drifting smoke — lighter density than the low fog below, moving around
   the upper/side/behind-brain space. Hidden until the storm phase begins
   (gated by opacity, not always-on) so the opening frame is black, not a
   blue wash, and confined by its own vignette mask so its video-frame
   rectangle is never visible as a boxed edge against the black backdrop. */
/* Reference: Build #139's smoke.mp4 treatment (Eric's provided file) covered
   nearly the full frame — only a thin strip at the very top was faded, the
   rest full-bleed edge to edge — which is what gave it real drift into the
   upper third and both sides instead of sitting as one static central
   blob. Reproduced that COVERAGE SHAPE only (not its brightness/saturation,
   which is what turned Build #139's whole screen pale blue): three
   off-center blobs unioned (default mask-composite: add, same technique as
   .c1-intro-fogfront above) plus a full-height base fade, so wisps reach
   the top corners and sides while staying irregular/feathered — no shape
   or box edge visible — and opacity stays low enough to read as depth
   behind the brain, not a wash over it. */
body.c1 .c1-intro-smoke {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; mix-blend-mode: screen; transition: opacity .8s ease;
  filter: grayscale(1) sepia(1) hue-rotate(180deg) saturate(2.2) brightness(.76);
  mask-image:
    radial-gradient(ellipse 48% 44% at 20% 28%, #000 0%, #000 38%, transparent 100%),
    radial-gradient(ellipse 44% 40% at 80% 24%, #000 0%, #000 38%, transparent 100%),
    radial-gradient(ellipse 58% 50% at 50% 64%, #000 0%, #000 42%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 12%, #000 28%, #000 100%);
  -webkit-mask-image:
    radial-gradient(ellipse 48% 44% at 20% 28%, #000 0%, #000 38%, transparent 100%),
    radial-gradient(ellipse 44% 40% at 80% 24%, #000 0%, #000 38%, transparent 100%),
    radial-gradient(ellipse 58% 50% at 50% 64%, #000 0%, #000 42%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 12%, #000 28%, #000 100%);
}
body.c1 .c1-intro.phase-storm .c1-intro-smoke,
body.c1 .c1-intro.phase-rise  .c1-intro-smoke { opacity: .2; }
body.c1 .c1-intro.phase-settle .c1-intro-smoke,
body.c1 .c1-intro.phase-lobe1  .c1-intro-smoke,
body.c1 .c1-intro.phase-lobe2  .c1-intro-smoke,
body.c1 .c1-intro.phase-result .c1-intro-smoke,
body.c1 .c1-intro.phase-message .c1-intro-smoke { opacity: .15; }

/* fog-background.mp4 is the LOW FOG FOUNDATION only — masked to a band
   across the bottom ~45% of the viewport (linear fade, not a full-screen
   ellipse) so the upper 70-80% of the frame stays near-pure black instead
   of being washed in blue storm-sky. Sits behind the brain (z-index 0). */
body.c1 .c1-intro-cloudback {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity .8s ease;
  /* continuously graded, no flat opaque plateau — a flat 0-22% zone let
     the source footage's OWN horizon-like tonal boundary (real storm
     photography, not a compositing artifact) show through undiminished,
     which is what was still visible as a hard line after the ::after band
     was removed. A continuous curve never has a stop where alpha holds
     still long enough for an underlying edge to read as sharp. */
  mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.88) 16%, rgba(0,0,0,.5) 36%, transparent 68%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.88) 16%, rgba(0,0,0,.5) 36%, transparent 68%);
}
body.c1 .c1-intro.phase-storm .c1-intro-cloudback,
body.c1 .c1-intro.phase-rise  .c1-intro-cloudback { opacity: .62; }
body.c1 .c1-intro.phase-settle .c1-intro-cloudback,
body.c1 .c1-intro.phase-lobe1  .c1-intro-cloudback,
body.c1 .c1-intro.phase-lobe2  .c1-intro-cloudback,
body.c1 .c1-intro.phase-result .c1-intro-cloudback,
body.c1 .c1-intro.phase-message .c1-intro-cloudback { opacity: .55; }
body.c1 .c1-intro-cloudback video {
  /* Keep the Adobe material physically low. The earlier 170%-scale,
     centre-cropped treatment inflated it into a blue wall across the frame
     instead of fog resting at the bottom of a black void. */
  position: absolute; left: 50%; top: auto; bottom: -12%; width: 128%; height: 84%;
  transform: translateX(-50%); object-fit: cover;
  /* darker, less saturated than before — this layer is dark storm material,
     not a source of blue light; the brain and lightning carry the blue.
     blur(3px) physically diffuses whatever tonal edge exists baked into
     the source stock footage itself, so it can never read as a crisp line
     no matter which frame of the clip is showing. */
  filter: grayscale(1) sepia(1) hue-rotate(180deg) saturate(1.35) brightness(.48) contrast(1.24) blur(2px);
  mask-image: radial-gradient(ellipse 48% 48% at 50% 50%, #000 45%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse 48% 48% at 50% 50%, #000 45%, transparent 92%);
  opacity: 0; transition: opacity .8s linear;
}
/* intro.js drives which of the two identical-source videos is on top;
   the other keeps decoding in the background so the swap has no gap */
body.c1 .c1-intro-cloudback video.c1-cb-a,
body.c1 .c1-intro-cloudback video.c1-cb-b {
  will-change: opacity;
}

/* full-width cloud floor — three layered instances of the same smoke.mp4,
   masked to roughly the bottom 40-55% of the viewport and feathered
   upward, sitting ABOVE the brain in z-index. The brain doesn't move
   through the clouds — the clouds are a fixed band and the brain rises up
   INTO view above/through it, so the top emerges first and the lower brain
   stays partially obscured until it settles above the band. Each layer
   also carries its OWN top-edge mask (in addition to the container mask)
   so the video's own rectangular top boundary is already faded to
   nothing before it physically ends — this was the second visible "frame"
   artifact (a video's own hard top edge showing through where the
   container mask was still partly opaque). */
body.c1 .c1-intro-cloudfloor {
  position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none;
  mask-image: linear-gradient(to top, #000 0%, #000 34%, transparent 62%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 34%, transparent 62%);
  opacity: 0; transition: opacity 1s ease;
}
/* NOTE: this layer previously had a ::after pseudo-element here — a
   full-viewport-width band (inset: auto 0 0; height: 11%) with its own
   flat top/bottom edges. Even feathered internally, a full-width strip
   with a consistent height across the whole frame is exactly what reads
   as a horizontal compositing line. Removed outright rather than
   re-feathered; the depth glow it provided now comes only from the
   radial (non-full-width) .c1-cf-underlight glow below, which has no
   straight edge of its own to expose. */
body.c1 .c1-intro.phase-storm .c1-intro-cloudfloor,
body.c1 .c1-intro.phase-rise  .c1-intro-cloudfloor {
  opacity: 1;
}
body.c1 .c1-intro.phase-settle .c1-intro-cloudfloor,
body.c1 .c1-intro.phase-lobe1  .c1-intro-cloudfloor,
body.c1 .c1-intro.phase-lobe2  .c1-intro-cloudfloor,
body.c1 .c1-intro.phase-result .c1-intro-cloudfloor,
body.c1 .c1-intro.phase-message .c1-intro-cloudfloor {
  opacity: .38;
}
/* restrained storm lightning, confined to the cloud band by the parent's
   mask (children are clipped along with it) — mostly dark, brief
   blue-white flashes, no thunder audio, visual only */
body.c1 .c1-cf-lightning {
  position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(ellipse 60% 40% at 38% 88%, rgba(190,215,255,.55), transparent 70%);
}
/* A diffuse glow rises through the fog before the brain breaches it. */
body.c1 .c1-cf-underlight {
  position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(ellipse 48% 28% at 50% 96%, rgba(122,176,255,.82), transparent 74%);
}
body.c1 .c1-intro.phase-rise .c1-cf-underlight {
  animation: c1UnderlightBuild 2s linear forwards;
}
body.c1 .c1-intro.phase-firing-front .c1-cf-underlight,
body.c1 .c1-intro.phase-firing-middle .c1-cf-underlight,
body.c1 .c1-intro.phase-firing-back .c1-cf-underlight { opacity: .56; }
@keyframes c1UnderlightBuild {
  0%, 42% { opacity: 0; }
  70% { opacity: .18; }
  100% { opacity: .56; }
}
body.c1 .c1-intro.phase-rise .c1-cf-lightning,
body.c1 .c1-intro.phase-settle .c1-cf-lightning {
  animation: c1CloudLightning 3s ease-in-out infinite;
}
@keyframes c1CloudLightning {
  0%, 92%, 100% { opacity: 0; }
  93%           { opacity: .9; }
  94%           { opacity: .1; }
  95%           { opacity: .7; }
  96%           { opacity: 0; }
}

/* 4-16s: the brain rises from fully below the viewport at ONE constant
   linear speed — no easing, no scale change, no fade standing in for
   movement. It starts already fully visible (opacity 1) and simply
   travels, so the viewer reads it as physically climbing into frame.
   Sizing (the "75% bigger, dominates the screen" effect) is handled
   separately below, purely via width, so it never fights the motion. */
body.c1 .c1-intro-brain-wrap {
  position: relative; z-index: 2; width: min(66vw, 820px);
  opacity: 1; transform: translate3d(0, 135vh, 0);
  /* promotes this to its own GPU compositing layer up front so the rise
     animation never has to share a repaint pass with the masked/filtered
     lobe-png children stacked on top of it — that shared repaint (mask +
     drop-shadow filters recalculating every frame alongside the parent
     transform) was the actual cause of the "chunky/staggered" rise, not
     the animation itself, which was always a single linear keyframe */
  will-change: transform; backface-visibility: hidden;
}
body.c1 .c1-intro.phase-rise .c1-intro-brain-wrap {
  animation: c1IntroRise 2s forwards;
}
/* steady climb for the first ~82%, then a gentle cinematic deceleration
   into the settled position — per-keyframe animation-timing-function, not
   a single easing curve for the whole animation, so the bulk of the rise
   stays a constant physical speed and only the last stretch slows down */
@keyframes c1IntroRise {
  0%   { transform: translate3d(0, 135vh, 0); animation-timing-function: linear; }
  82%  { transform: translate3d(0, 9vh, 0); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  100% { transform: translate3d(0, 0, 0); }
}
body.c1 .c1-intro.phase-rise   .c1-intro-brain-wrap,
body.c1 .c1-intro.phase-settle .c1-intro-brain-wrap {
  width: min(66vw, 820px);
}
/* 15-20s onward: settle into a slow breathe/drift */
body.c1 .c1-intro.phase-settle .c1-intro-brain-wrap,
body.c1 .c1-intro.phase-lobe1  .c1-intro-brain-wrap,
body.c1 .c1-intro.phase-lobe2  .c1-intro-brain-wrap,
body.c1 .c1-intro.phase-result .c1-intro-brain-wrap,
body.c1 .c1-intro.phase-message .c1-intro-brain-wrap {
  opacity: 1; transform: none;
  animation: c1IntroBreathe 8s ease-in-out infinite;
}
/* 20s+: thoughts begin — brain reduces somewhat but stays visually large */
body.c1 .c1-intro.phase-lobe1  .c1-intro-brain-wrap,
body.c1 .c1-intro.phase-lobe2  .c1-intro-brain-wrap,
body.c1 .c1-intro.phase-result .c1-intro-brain-wrap,
body.c1 .c1-intro.phase-message .c1-intro-brain-wrap {
  width: min(54vw, 660px);
}
@keyframes c1IntroBreathe {
  0%, 100% { transform: translateY(0)    scale(1);     }
  50%      { transform: translateY(-7px) scale(1.015); }
}

/* brain.jpg's own background is a dark navy haze, not pure black — against
   the intro's #02040a stage that navy plate was visible as a soft oval
   "gel bag" no matter how far the mask's own fade reached. Fixed two ways:
   contrast/brightness crush the navy down toward true black so it merges
   into the backdrop instead of sitting on top of it, and the mask itself
   is bigger with a much longer feather so there is no radius where a
   uniform edge could still read as a shape. */
body.c1 .c1-intro-brain {
  display: block; width: 100%; height: auto;
  /* transparent stop pulled in from 100% to 82% so the fade actually
     finishes before it reaches the image's own rectangular edge, instead
     of landing exactly on it — otherwise that boundary itself reads as a
     faint box regardless of how gradual the fade leading up to it is */
  mask-image: radial-gradient(ellipse 58% 62% at 50% 50%, #000 40%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse 58% 62% at 50% 50%, #000 40%, transparent 82%);
  filter: saturate(1.05) brightness(.7) contrast(1.6) drop-shadow(0 0 70px rgba(74,141,255,.45));
}

/* fog-foreground.mp4 is a true full-screen foreground layer rather than a
   video clipped to the brain box. Its two masks feather both its frame and
   top edge, leaving no visible rectangle or horizontal seam. */
body.c1 .c1-intro-fogfront {
  position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none;
  /* three off-center blobs unioned (default mask-composite: add) with the
     base fade break the boundary into an irregular cloud line instead of
     a straight shelf, so it crosses the lower brain unevenly */
  mask-image:
    radial-gradient(ellipse 42% 30% at 22% 78%, #000 0%, #000 55%, transparent 100%),
    radial-gradient(ellipse 38% 26% at 68% 82%, #000 0%, #000 55%, transparent 100%),
    radial-gradient(ellipse 46% 24% at 46% 88%, #000 0%, #000 55%, transparent 100%),
    linear-gradient(to top, #000 0%, #000 18%, transparent 55%);
  -webkit-mask-image:
    radial-gradient(ellipse 42% 30% at 22% 78%, #000 0%, #000 55%, transparent 100%),
    radial-gradient(ellipse 38% 26% at 68% 82%, #000 0%, #000 55%, transparent 100%),
    radial-gradient(ellipse 46% 24% at 46% 88%, #000 0%, #000 55%, transparent 100%),
    linear-gradient(to top, #000 0%, #000 18%, transparent 55%);
}
/* forces the whole scene's hue toward navy/blue via CSS blend math
   (mix-blend-mode: hue takes hue+saturation from this layer, luminosity
   from the backdrop) instead of hunting every layer's own hue-rotate
   value — sits above every atmosphere/brain layer but below the text */
/* opacity roughly halved from the original .5 — at .5 this tinted enough
   of the frame's own near-black pixels toward blue (via nearby lit
   layers bleeding into it) to read as an overall blue wash instead of
   black-with-blue-accents; .22 still locks the hue without doing that */
body.c1 .c1-intro-colorlock {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: #1c3f8c; mix-blend-mode: hue; opacity: 0; transition: opacity .8s ease;
}
body.c1 .c1-intro.phase-storm .c1-intro-colorlock,
body.c1 .c1-intro.phase-rise  .c1-intro-colorlock,
body.c1 .c1-intro.phase-settle .c1-intro-colorlock,
body.c1 .c1-intro.phase-lobe1  .c1-intro-colorlock,
body.c1 .c1-intro.phase-lobe2  .c1-intro-colorlock,
body.c1 .c1-intro.phase-result .c1-intro-colorlock,
body.c1 .c1-intro.phase-message .c1-intro-colorlock { opacity: .22; }
body.c1 .c1-intro-fogfront video {
  /* normal blend, not screen — same reasoning as .c1-intro-cloudback:
     this needs to read as physical foreground cloud material occluding
     the lower brain, not a faint light-only overlay */
  position: absolute; left: 50%; bottom: -35%; width: 180%; height: 130%;
  transform: translateX(-50%); object-fit: cover;
  filter: grayscale(1) sepia(1) hue-rotate(180deg) saturate(3.2) brightness(1.05) contrast(1.05);
  opacity: .85;
  mask-image: linear-gradient(to top, #000 0%, #000 43%, transparent 94%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 43%, transparent 94%);
}

/* real PNG overlays fire in sequence, one broad region at a time,
   sharing the exact same box/crop/transform as c1-intro-brain so they move
   with it through the rise + breathe with pixel-perfect alignment. All
   five firing tiers below explicitly zero every region first, then light
   exactly one — deliberately swapping regions instead of accumulating a
   busy light show, and cycling through all five available overlays
   instead of only three. Never labeled anatomically — visual firing zones
   only. */
body.c1 .c1-intro-lobe-png {
  display: block; position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; pointer-events: none;
  mix-blend-mode: screen; opacity: 0;
  filter: brightness(1) drop-shadow(0 0 8px rgba(125,176,255,.2));
  transition: opacity .4s ease;
}
/* Simplified region model: FRONT (frontal), MIDDLE (parietal + temporal,
   fired together as one broad zone), BACK (occipital + rear, fired
   together as one broad zone). Masks are enlarged ~2.5-3x from the
   original tiny hotspots — still centered on each overlay's own
   brightness centroid and still comfortably inside its hard-cropped PNG
   edge, just big enough that a firing event lights a real third of the
   brain instead of a small dot, so activity reads from across the room. */
body.c1 .c1-intro-lobe-png[data-region="frontal"] {
  mask-image: radial-gradient(ellipse 24% 27% at 36.5% 54.8%, #000 0%, #000 24%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse 24% 27% at 36.5% 54.8%, #000 0%, #000 24%, transparent 92%);
}
body.c1 .c1-intro-lobe-png[data-region="parietal"] {
  mask-image: radial-gradient(ellipse 20% 23% at 56.9% 30.7%, #000 0%, #000 24%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse 20% 23% at 56.9% 30.7%, #000 0%, #000 24%, transparent 92%);
}
body.c1 .c1-intro-lobe-png[data-region="temporal"] {
  mask-image: radial-gradient(ellipse 20% 23% at 41% 51.6%, #000 0%, #000 24%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse 20% 23% at 41% 51.6%, #000 0%, #000 24%, transparent 92%);
}
body.c1 .c1-intro-lobe-png[data-region="occipital"] {
  mask-image: radial-gradient(ellipse 22% 32% at 72.9% 45.2%, #000 0%, #000 24%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse 22% 32% at 72.9% 45.2%, #000 0%, #000 24%, transparent 92%);
}
body.c1 .c1-intro-lobe-png[data-region="rear"] {
  mask-image: radial-gradient(ellipse 21% 26% at 71.8% 69.5%, #000 0%, #000 24%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse 21% 26% at 71.8% 69.5%, #000 0%, #000 24%, transparent 92%);
}

/* Broad front/middle/back firing during the rise — intro.js picks these
   in a randomized order with randomized hold/gap times (not a fixed
   cascade), so activity reads as real brain activity rather than a
   scripted light show. Dark structure stays between activations. */
body.c1 .c1-intro.phase-firing-front  .c1-intro-lobe-png[data-region],
body.c1 .c1-intro.phase-firing-middle .c1-intro-lobe-png[data-region],
body.c1 .c1-intro.phase-firing-back   .c1-intro-lobe-png[data-region] {
  opacity: 0; animation: none;
}
body.c1 .c1-intro.phase-firing-front .c1-intro-lobe-png[data-region="frontal"] {
  opacity: .85; animation: c1IntroLobePulse 1.2s ease-in-out infinite, c1IntroFiring 1.2s ease-in-out infinite;
}
body.c1 .c1-intro.phase-firing-middle .c1-intro-lobe-png[data-region="parietal"],
body.c1 .c1-intro.phase-firing-middle .c1-intro-lobe-png[data-region="temporal"] {
  opacity: .85; animation: c1IntroLobePulse 1.2s ease-in-out infinite, c1IntroFiring 1.2s ease-in-out infinite;
}
body.c1 .c1-intro.phase-firing-back .c1-intro-lobe-png[data-region="occipital"],
body.c1 .c1-intro.phase-firing-back .c1-intro-lobe-png[data-region="rear"] {
  opacity: .85; animation: c1IntroLobePulse 1.2s ease-in-out infinite, c1IntroFiring 1.2s ease-in-out infinite;
}

/* one immediate pulse on the region that matches each thought/message beat,
   so the text reads as originating from the brain area that just fired.
   lobe2/result both draw from the BACK group (occipital + rear) since the
   connection/result beats sit on the same right-hand side of the brain. */
body.c1 .c1-intro.phase-lobe1  .c1-intro-lobe-png[data-region="frontal"],
body.c1 .c1-intro.phase-lobe2  .c1-intro-lobe-png[data-region="occipital"],
body.c1 .c1-intro.phase-lobe2  .c1-intro-lobe-png[data-region="rear"],
body.c1 .c1-intro.phase-result .c1-intro-lobe-png[data-region="rear"] {
  opacity: 1; animation: c1IntroLobePulse 1.6s ease-in-out infinite, c1IntroFiring 1.6s ease-in-out infinite;
}
@keyframes c1IntroLobePulse { 0%, 100% { opacity: .75; } 46% { opacity: 1; } }
/* the precise mask above stays small and safely inside each PNG's real
   content (never a hard edge), but this stacked, increasingly-blurred
   drop-shadow is what actually reads as "roughly a third of the brain
   lighting up" — drop-shadow blur has no boundary of its own, so however
   far it spreads, it can only ever fade smoothly, never show an edge */
@keyframes c1IntroFiring {
  0%, 88%, 100% {
    filter: brightness(1)
      drop-shadow(0 0 30px rgba(190,225,255,.55))
      drop-shadow(0 0 80px rgba(125,176,255,.32))
      drop-shadow(0 0 150px rgba(74,141,255,.16))
      drop-shadow(0 0 240px rgba(74,141,255,.08));
  }
  90% {
    filter: brightness(1.5)
      drop-shadow(0 0 40px rgba(190,225,255,.7))
      drop-shadow(0 0 100px rgba(125,176,255,.45))
      drop-shadow(0 0 190px rgba(74,141,255,.22))
      drop-shadow(0 0 300px rgba(74,141,255,.11));
  }
  92% {
    filter: brightness(1)
      drop-shadow(0 0 30px rgba(190,225,255,.55))
      drop-shadow(0 0 80px rgba(125,176,255,.32))
      drop-shadow(0 0 150px rgba(74,141,255,.16))
      drop-shadow(0 0 240px rgba(74,141,255,.08));
  }
  95% {
    filter: brightness(1.85)
      drop-shadow(0 0 48px rgba(190,225,255,.8))
      drop-shadow(0 0 120px rgba(125,176,255,.5))
      drop-shadow(0 0 230px rgba(74,141,255,.26))
      drop-shadow(0 0 360px rgba(74,141,255,.13));
  }
}

/* the thought chain - one line at a time, emerging from the brain */
body.c1 .c1-intro-thoughts {
  position: absolute; z-index: 6; bottom: 8%; left: 50%; transform: translateX(-50%);
  width: min(90%, 640px); text-align: center;
}
/* a soft glow behind the text ties it back to the brain instead of it
   reading as a plain stacked card. THIS, not any fog/smoke/cloud layer,
   turned out to be the source of the reported horizontal line: unlike
   the individual .c1-intro-thought lines (opacity 0 until their own
   phase), this ::before glow had no phase gating at all, so its own
   radial-gradient box edge sat there rendering, full strength, from the
   very first black-screen frame — confirmed by isolating every fog/cloud
   layer independently and finding the line persisted with all of them
   hidden, only disappearing once thoughts+message were hidden too. Now
   gated to fade in alongside the thoughts it's meant to sit behind. */
body.c1 .c1-intro-thoughts::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 340%; height: 480%; pointer-events: none; z-index: -1;
  /* gradient center sits well inside this box (not on an edge) and fades to
     transparent at 62% of its radius, with plenty of box left over past
     that — otherwise the box's own boundary clips the gradient before it
     finishes fading, which reads as a hard horizontal line. */
  background: radial-gradient(ellipse 38% 32% at 50% 50%, rgba(74,141,255,.22), transparent 62%);
  opacity: 0; transition: opacity .6s ease;
}
body.c1 .c1-intro.phase-lobe1  .c1-intro-thoughts::before,
body.c1 .c1-intro.phase-lobe2  .c1-intro-thoughts::before,
body.c1 .c1-intro.phase-result .c1-intro-thoughts::before { opacity: 1; }
body.c1 .c1-intro-thought {
  opacity: 0; margin: 0;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.25,1);
  color: #e8f0ff; font-weight: 600; line-height: 1.4;
  font-size: clamp(1rem, .9rem + .8vw, 1.4rem);
  text-shadow: 0 0 24px rgba(125,176,255,.55), 0 0 60px rgba(125,176,255,.22);
}
/* each thought's rest transform starts it small and displaced toward its
   own lobe's on-screen position (frontal = left of center, occipital/rear
   = right of center), so it visibly gathers out of the brain and drifts
   down into place rather than fading in where it already sits */
body.c1 .c1-intro-thought[data-at="problem"] {
  transform: translate(-15vw, -130px) scale(.45); transform-origin: 30% 0%;
}
body.c1 .c1-intro-thought[data-at="connection"] {
  transform: translate(17vw, -130px) scale(.45); transform-origin: 74% 0%;
}
body.c1 .c1-intro-thought.c1-intro-result[data-at="result"] {
  transform: translate(15vw, -110px) scale(.45); transform-origin: 70% 0%;
}
body.c1 .c1-intro.phase-lobe1  .c1-intro-thought[data-at="problem"]    { opacity: 1; transform: none; }
body.c1 .c1-intro.phase-lobe2  .c1-intro-thought[data-at="problem"]    { opacity: .32; }
body.c1 .c1-intro.phase-lobe2  .c1-intro-thought[data-at="connection"]{ opacity: 1; transform: none; }
body.c1 .c1-intro.phase-result .c1-intro-thought[data-at="connection"]{ opacity: .28; }
body.c1 .c1-intro.phase-result .c1-intro-thought.c1-intro-result[data-at="result"] {
  opacity: 1; transform: none; color: #fff; font-weight: 800;
  font-size: clamp(1.3rem, 1.1rem + 1.4vw, 2rem);
}

/* 36-42s: the Strategy Partners message settles over the scene */
body.c1 .c1-intro-message {
  position: absolute; inset: 0; z-index: 7;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 26px; opacity: 0; transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
  background: radial-gradient(ellipse at 50% 50%, rgba(2,4,10,.72), rgba(2,4,10,.98) 68%);
}
body.c1 .c1-intro.phase-message .c1-intro-message { opacity: 1; transform: none; }
/* The last beat is not a title card over a dead scene. The brain remains in
   the cloud bed while the dense air moves around it and the final message
   settles above the image. */
body.c1 .c1-intro.phase-message .c1-intro-message {
  background:
    radial-gradient(ellipse 46% 42% at 50% 48%, rgba(2,5,13,.16), rgba(2,4,10,.62) 100%),
    linear-gradient(to bottom, rgba(2,4,10,.34), rgba(2,4,10,.2) 52%, rgba(2,4,10,.5));
}
body.c1 .c1-intro.phase-message .c1-intro-smoke {
  animation: c1PodSmokeOrbit 7s ease-in-out infinite;
  opacity: .5;
}
body.c1 .c1-intro.phase-message .c1-intro-fogfront video {
  animation: c1PodForegroundShift 6s ease-in-out infinite alternate;
}
@keyframes c1PodSmokeOrbit {
  0%, 100% { transform: translate3d(-2%, 1%, 0) scale(1.08); }
  50% { transform: translate3d(2%, -1%, 0) scale(1.15); }
}
@keyframes c1PodForegroundShift {
  from { transform: translateX(-53%) scale(1.04); }
  to { transform: translateX(-47%) scale(1.1); }
}
/* 3C — final transition. We were inside the thought; the answer was
   found; the thinking recedes; Strategy Partners emerges. The intro's own
   background goes transparent so the real homepage (already animating in
   underneath, see .c1-hero-cinematic below) shows through the same brain/
   storm scene as it fades, instead of a hard cut or a hero pasted over a
   still-full-size brain. */
body.c1 .c1-intro.phase-transition {
  background: transparent; transition: background .5s ease;
}
body.c1 .c1-intro.phase-transition .c1-intro-brain-wrap {
  opacity: 0; transform: scale(.86) translateY(-3vh);
  transition: opacity .5s ease, transform .5s ease;
  animation: none;
}
body.c1 .c1-intro.phase-transition .c1-intro-cloudback,
body.c1 .c1-intro.phase-transition .c1-intro-cloudfloor,
body.c1 .c1-intro.phase-transition .c1-intro-fogfront,
body.c1 .c1-intro.phase-transition .c1-intro-smoke,
body.c1 .c1-intro.phase-transition .c1-intro-colorlock,
body.c1 .c1-intro.phase-transition .c1-cf-lightning,
body.c1 .c1-intro.phase-transition .c1-cf-underlight {
  opacity: 0 !important; transition: opacity .5s ease;
}
body.c1 .c1-intro.phase-transition .c1-intro-message {
  opacity: 0; transform: translateY(-10px);
  transition: opacity .4s ease, transform .4s ease;
}

body.c1 .c1-intro-kicker {
  text-transform: uppercase; letter-spacing: 1.6px; font-weight: 800;
  font-size: .78rem; color: #7db0ff; margin: 0 0 14px;
}
body.c1 .c1-intro-message h2 {
  color: #fff; font-size: clamp(1.8rem, 1.15rem + 2.6vw, 2.9rem);
  line-height: 1.08; margin: 0 0 14px; max-width: 16ch;
}
body.c1 .c1-intro-lede { color: #b9c6e6; max-width: 34rem; font-size: 1rem; line-height: 1.6; margin: 0 auto; }

/* reduced motion: settled brain, one lobe, one full chain, message -
   all present immediately, nothing rises/flashes/pulses */
body.c1 .c1-intro.phase-reduced .c1-intro-storm  { display: none; }
body.c1 .c1-intro.phase-reduced .c1-intro-smoke  { animation: none; opacity: .18; }
body.c1 .c1-intro.phase-reduced .c1-intro-fogfront video { animation: none; }
body.c1 .c1-intro.phase-reduced .c1-intro-cloudfloor { opacity: .3; transition: none; }
body.c1 .c1-intro.phase-reduced .c1-cf-lightning { animation: none; opacity: 0; }
body.c1 .c1-intro.phase-reduced .c1-intro-cloudback,
body.c1 .c1-intro.phase-reduced .c1-intro-cloudback video { animation: none; }
/* reduced motion: show one still frame of the Adobe fog instead of the
   crossfade loop — intro.js skips starting the loop in this branch */
body.c1 .c1-intro.phase-reduced .c1-cb-a { opacity: 1 !important; transition: none; }
body.c1 .c1-intro.phase-reduced .c1-cb-b { opacity: 0 !important; }
body.c1 .c1-intro.phase-reduced .c1-intro-brain-wrap {
  opacity: 1; transform: none; animation: none; transition: none; width: min(92vw, 760px);
}
body.c1 .c1-intro.phase-reduced .c1-intro-lobe-png[data-region="frontal"] { opacity: .8; animation: none; }
body.c1 .c1-intro.phase-reduced .c1-intro-thought { transition: none; }
body.c1 .c1-intro.phase-reduced .c1-intro-thought[data-at="problem"],
body.c1 .c1-intro.phase-reduced .c1-intro-thought[data-at="connection"],
body.c1 .c1-intro.phase-reduced .c1-intro-thought.c1-intro-result[data-at="result"] {
  opacity: 1; transform: none;
}
body.c1 .c1-intro.phase-reduced .c1-intro-message { transition: none; opacity: 1; transform: none; }

/* The real homepage hero rises/fades in underneath the intro during
   .phase-transition (see intro.js), rather than the intro simply hiding to
   reveal an already-static page. Only visitors about to see the intro ever
   start at opacity 0 — a repeat-session visitor with c1-intro-pending never
   set gets the hero at full opacity immediately, no JS dependency. */
html.c1-intro-pending body.c1 .c1-hero-cinematic {
  opacity: 0; transform: translateY(26px);
}
body.c1 .c1-hero-cinematic {
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.25,1);
}
html.c1-intro-transition body.c1 .c1-hero-cinematic {
  opacity: 1; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.c1-intro-pending body.c1 .c1-hero-cinematic { opacity: 1; transform: none; }
  body.c1 .c1-hero-cinematic { transition: none; }
}

@media (max-width: 640px) {
  body.c1 .c1-intro-brain-wrap { width: min(92vw, 640px); }
  body.c1 .c1-intro.phase-rise .c1-intro-brain-wrap,
  body.c1 .c1-intro.phase-settle .c1-intro-brain-wrap { width: min(92vw, 640px); }
  body.c1 .c1-intro.phase-lobe1 .c1-intro-brain-wrap,
  body.c1 .c1-intro.phase-lobe2 .c1-intro-brain-wrap,
  body.c1 .c1-intro.phase-result .c1-intro-brain-wrap,
  body.c1 .c1-intro.phase-message .c1-intro-brain-wrap { width: min(72vw, 460px); }
  body.c1 .c1-intro-thoughts { bottom: 9%; }
  body.c1 .c1-intro-message h2 { font-size: clamp(1.5rem, 1.1rem + 3.6vw, 2.1rem); }
}

@media (prefers-reduced-motion: reduce) {
  body.c1 .c1-intro-storm,
  body.c1 .c1-intro-brain-wrap,
  body.c1 .c1-intro-lobe-png,
  body.c1 .c1-cf-lightning,
  body.c1 .c1-intro-fogfront video,
  body.c1 .c1-intro-cloudback,
  body.c1 .c1-intro-cloudback video { animation: none !important; }
}

/* =====================================================================
   SP-B013 MOTION (Eric approved 2026-09-30): press feedback + mobile menu
   ===================================================================== */
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }

/* press feedback: the interface heard the tap (160ms, subtle) */
body.c1 .btn, body.c1 .cta-mini, body.c1 .c1-work-card { transition-property: box-shadow, border-color, background, color, transform; }
body.c1 .btn:active, body.c1 .cta-mini:active { transform: scale(0.97); transition-duration: .16s; transition-timing-function: var(--ease-out); }
body.c1 .c1-work-card { transition: transform .16s var(--ease-out); }
body.c1 .c1-work-card:active { transform: scale(0.985); }

/* mobile menu: links settle in instead of snapping (opening only) */
@media (max-width: 900px) {
  body.c1 .nav.open a.link, body.c1 .nav.open .cta-mini { animation: c1MenuIn .4s var(--ease-out) both; }
  /* keep the menu button beside the brand when the menu is open */
  body.c1 .nav.open .nav-toggle { order: 1; }
  body.c1 .nav.open a.link, body.c1 .nav.open .cta-mini { order: 2; }
}
@keyframes c1MenuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  body.c1 .btn:active, body.c1 .cta-mini:active, body.c1 .c1-work-card:active { transform: none; }
  body.c1 .nav.open a.link, body.c1 .nav.open .cta-mini { animation-name: c1MenuFade; }
  body.c1 .scroll-progress { transition: none; }
}
@keyframes c1MenuFade { from { opacity: 0; } to { opacity: 1; } }

/* SP-B016: round Strategy Partners mark beside the name in the header */
body.c1 .brand { display: inline-flex; align-items: baseline; }
body.c1 .brand-mark { width: 30px; height: 30px; border-radius: 50%; display: block; margin-right: 9px; align-self: center; }

/* SP-B021: status tags raised to 12px (was 10.24px, below the 11px floor); footer headings are real h3s */
body.c1 .c1-status { font-size: .75rem; letter-spacing: 1.2px; }

/* =====================================================================
   SP-B022 COLORS (Eric approved option C, 2026-10-01): one warm "act" color,
   peach #FFB59C with navy #070B14 text (11.57:1); hover #FFC4B0 (12.91:1).
   Blue stays for structure, links and glow. Strategy Partners palette only.
   ===================================================================== */
body.c1 .btn-primary,
body.c1 .nav .cta-mini,
body.c1 .nav.open .cta-mini,
body.c1 .skip {
  background: #ffb59c; color: #070b14; border-color: #ffb59c;
}
body.c1 .btn-primary { box-shadow: 0 10px 30px rgba(255,181,156,.22), inset 0 1px 0 rgba(255,255,255,.35); }
body.c1 .btn-primary:hover,
body.c1 .nav .cta-mini:hover,
body.c1 .nav.open .cta-mini:hover {
  background: #ffc4b0; color: #070b14; border-color: #ffc4b0;
  box-shadow: 0 12px 34px rgba(255,181,156,.34), inset 0 1px 0 rgba(255,255,255,.4);
}
body.c1 .hero .accent2, body.c1 .accent2 { color: #ffb59c; }