/* ═══════════════════════════════════════════════════════════
   Kyro — global styles & design tokens
   POPPIN'-style bold editorial · light + dark
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  /* Kyro's own two-tone identity — magenta through to cyan, the palette from the reference
     swirl animation. Deliberately not a single flat brand color: nearly every accent use in
     this file (buttons, underlines, the shimmer on "sells.", the marquee dashes, the logo
     ring) already reads var(--accent)/var(--accent-2), so changing these two values is what
     recolors the whole site in one place rather than hunting down every hardcoded hex. */
  --accent: #ff2f8f;           /* magenta — primary accent */
  --accent-2: #22d3ee;         /* cyan — secondary, paired with --accent in gradients */
  --radius: 4px;
  --maxw: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

/* Both themes are first-class — the toggle in the nav (#themeToggle, persisted as
   localStorage['kyro-theme']) is a real switch, not a dark theme with a washed-out twin.
   Each palette is tuned on its own: the dark one is warm-neutral, the light one is a warm
   off-white rather than a blue-grey, so the same orange accent sits correctly in both. */

/* DARK (default) — near-black with warm cream text.
   Lifted off pure #050505: at full black, thin hairline borders and soft shadows have
   nothing to separate from, so the fine 1px rules this design leans on disappear. The text
   is warm cream rather than white, which reads as printed rather than emitted. */
:root[data-theme="dark"] {
  --bg: #08090b;
  --bg-2: #0e1013;
  --panel: #14171b;
  --fg: #f4f1ea;
  --muted: #8b9097;
  --line: rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.24);
  --mark-fg: #08090b;
  --brand-tile: #f4f1ea;
  --hero-veil: rgba(8,9,11,.55);
}
/* LIGHT — warm off-white, ink-black text.
   Warm (#fbfaf8) rather than the previous cool #f8fafc: against a warm-orange accent a
   blue-grey ground makes the brand colour read slightly dirty. */
:root[data-theme="light"] {
  --bg: #fbfaf8;
  --bg-2: #f3f1ec;
  --panel: #ffffff;
  --fg: #14161a;
  --muted: #6b7078;
  --line: rgba(20,22,26,.11);
  --line-strong: rgba(20,22,26,.26);
  --mark-fg: #fbfaf8;
  --brand-tile: #14161a;
  --hero-veil: rgba(251,250,248,.4);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .5s var(--ease), color .5s var(--ease);
}
a { color: inherit; text-decoration: none; }
em { font-style: normal; color: var(--accent); }
::selection { background: var(--accent); color: #fff; }

.eyebrow {
  font-family: var(--font-display);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--muted);
}

/* ── NAV ─────────────────────────────────────────────── */
/* Split navigation: links left, wordmark optically centred, links right — the arrangement
   the reference walkthrough uses. A three-column grid (rather than the previous flex row)
   is what keeps the wordmark centred to the viewport instead of to the leftover space. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 1.5rem;
  padding: 1.1rem clamp(1.2rem, 4vw, 3rem);
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease), background .4s var(--ease), padding .4s var(--ease);
}
.nav.scrolled { border-bottom-color: var(--line); padding-top: .8rem; padding-bottom: .8rem; }
/* Mark left, name right — the standard lockup. The optical centre of the pair is the gap,
   so the mark is nudged down a hair to sit on the wordmark's baseline rather than its box. */
.brand { display: flex; align-items: center; gap: .58rem; }
.brand-mark { display: inline-flex; transform: translateY(1px); }
.brand-mark svg { display: block; }
.brand-word {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.22rem; letter-spacing: .2em;
  /* The tracking adds a trailing gap after the O that the eye reads as a lopsided lockup;
     pulling it back re-centres the pair. */
  margin-right: -.2em;
}
.nav-side { display: flex; align-items: center; gap: 1.15rem; min-width: 0; }
.nav-side-l { justify-self: start; }
.brand { justify-self: center; }
/* Right column holds the secondary links plus the theme/auth controls, so the grid stays
   three columns and the wordmark stays truly centred. */
.nav-end { justify-self: end; display: flex; align-items: center; gap: 1.6rem; min-width: 0; }

/* Hairline between each pair of links — the small detail that makes the row read as a
   typeset masthead rather than a list of buttons. */
.nav-rule {
  display: inline-block; width: 34px; height: 1px;
  background: var(--line-strong); opacity: .55; flex: none;
}

.nav-side a, .nav-links a {
  font-family: var(--font-display); font-size: .74rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); position: relative; white-space: nowrap;
  transition: color .25s var(--ease);
}
.nav-side a::after, .nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0;
  background: var(--accent); transition: width .35s var(--ease);
}
.nav-side a:hover, .nav-links a:hover { color: var(--fg); }
.nav-side a:hover::after, .nav-links a:hover::after { width: 100%; }
.nav-side a.is-active { color: var(--fg); }
.nav-side a.is-active::after { width: 100%; opacity: .5; }

.nav-links { display: flex; gap: 1.9rem; margin-left: auto; }

.nav-right { display: flex; align-items: center; gap: .85rem; }

.theme-toggle {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--fg);
  display: grid; place-items: center; cursor: pointer;
  transition: border-color .25s, transform .3s var(--ease), background .25s;
}
.theme-toggle:hover { border-color: var(--line-strong); transform: rotate(18deg); }
.theme-toggle .ico-moon { display: none; }
:root[data-theme="light"] .theme-toggle .ico-sun { display: none; }
:root[data-theme="light"] .theme-toggle .ico-moon { display: block; }

/* Both are mobile-only; the responsive block below turns them on. Without this base rule
   the drawer's links would render stacked under the desktop header. */
.nav-burger { display: none; }
.nav-mobile { display: none; }

/* ── BUTTONS ─────────────────────────────────────────── */
.btn {
  --pad: .95rem 1.6rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  letter-spacing: .16em; text-transform: uppercase; padding: var(--pad);
  cursor: pointer; position: relative; transition: all .3s var(--ease);
  border: 1px solid transparent; white-space: nowrap;
  background: none; /* reset the browser's default <button> chrome — .btn is used on
                        both <a> and <button> tags, only <button> has a UA background */
}
.btn.center { display: inline-flex; margin: 3rem auto 0; }
.btn-solid { background: var(--fg); color: var(--bg); }
.btn-solid:hover { background: var(--accent); color: #fff; }
.btn-line { border-color: var(--line-strong); color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.btn-line:hover { background: var(--fg); color: var(--bg); }
.btn-ghost { color: var(--fg); border-color: var(--line); padding: .6rem 1.1rem; font-size: .74rem; background: none; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* The help-chat entry point used to be a gradient pill in the nav and was styled here by
   id. It is now the floating launcher (.chat-launcher, in the editorial layer at the end of
   this file) and keeps the same id so the existing wiring works — but an id selector
   outranks a class, so leaving these rules here would silently override the launcher's
   background, border and colour. Deliberately removed rather than commented out. */

/* corner-bracket accents (POPPIN' signature) */
.bracket::before, .bracket::after {
  content: ''; position: absolute; width: 10px; height: 10px; opacity: 0; transition: all .3s var(--ease);
}
.bracket::before { top: 5px; left: 5px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; }
.bracket::after { bottom: 5px; right: 5px; border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; }
.bracket:hover::before { opacity: .9; top: 7px; left: 7px; }
.bracket:hover::after { opacity: .9; bottom: 7px; right: 7px; }

/* ── HERO ────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100vh; display: flex; flex-direction: column;
  justify-content: center; padding: 8rem clamp(1.2rem,5vw,4rem) 4rem;
  overflow: hidden;
}
.hero-grid { display: none; } /* replaced by the site-wide .site-network-bg canvas below */
/* Fixed, full-viewport, mounted once by shell.js on EVERY page (Dashboard/Editor/
   Studio included) — not just pages with a .hero — so the look is truly consistent
   site-wide, matching royalbengal.ai. Sits behind all content; opaque cards/panels
   naturally cover it wherever a page needs a solid surface, same as the reference. */
.site-network-bg {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: -1; /* guaranteed behind all normal-flow content */
}
.hero::after {
  content: ''; position: absolute; width: 60vw; height: 60vw; right: -15vw; top: -10vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent), transparent 62%);
  filter: blur(30px); opacity: .55; pointer-events: none; animation: float 14s ease-in-out infinite;
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(40px)} }
.hero-inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.8rem, 8vw, 6.4rem); line-height: .98; letter-spacing: -.02em;
  margin: 1.4rem 0 1.6rem;
}
.hero-title span { display: block; }
.shimmer {
  /* Sweeps magenta -> cyan -> magenta rather than through a hardcoded gold midpoint, so the
     "sells." highlight carries the same two-tone identity as the rest of the palette. */
  background: linear-gradient(100deg, var(--accent) 25%, var(--accent-2) 50%, var(--accent) 75%);
  background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 3.6s ease-in-out infinite;
}
@keyframes shimmer { 0% { background-position: 0% 0; } 50% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .shimmer { animation: none; } }
.hero-sub { max-width: 46ch; color: var(--muted); font-size: clamp(1rem,1.6vw,1.18rem); line-height: 1.6; }
.hero-cta { display: flex; gap: 1rem; margin-top: 2.4rem; flex-wrap: wrap; justify-content: center; }
.hero-scroll {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-size: .66rem; letter-spacing: .3em; color: var(--muted);
}
.hero-scroll i { width: 1px; height: 42px; background: var(--line-strong); position: relative; overflow: hidden; }
.hero-scroll i::after { content:''; position:absolute; top:-42px; left:0; width:1px; height:42px; background: var(--accent); animation: scrolldot 2s var(--ease) infinite; }
@keyframes scrolldot { 0%{transform:translateY(0)} 60%,100%{transform:translateY(84px)} }

/* ── MARQUEE ─────────────────────────────────────────── */
.marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.4rem 0; overflow: hidden; }
.marquee-track { display: flex; gap: 2.4rem; width: max-content; animation: scroll-x 26s linear infinite; align-items: center; }
.marquee-track span { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem,3.4vw,2.4rem); letter-spacing: .04em; text-transform: uppercase; }
/* Separator drawn as a short accent rule rather than a text glyph — see the note in
   index.html: the ✦ it replaces was being rendered from the platform emoji font. */
.marquee-track i {
  display: inline-block; width: 26px; height: 1px; vertical-align: middle;
  background: var(--accent); opacity: .7; font-style: normal;
}
@keyframes scroll-x { to { transform: translateX(-50%); } }

/* ── SECTION SHELL ───────────────────────────────────── */
section { padding: clamp(5rem, 10vw, 9rem) clamp(1.2rem, 5vw, 4rem); }
.section-head { max-width: var(--maxw); margin: 0 auto 3.4rem; }
.section-head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem,5vw,3.6rem); line-height: 1.02; letter-spacing: -.02em; margin-top: 1rem; }

/* ── SERVICES ────────────────────────────────────────── */
.svc-list { max-width: var(--maxw); margin: 0 auto; border-top: 1px solid var(--line); }
.svc {
  display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 2rem;
  padding: 2.2rem 1rem; border-bottom: 1px solid var(--line);
  transition: background .35s var(--ease), padding .35s var(--ease); position: relative;
}
.svc::before { content:''; position:absolute; left:0; top:0; bottom:0; width:0; background: var(--accent); transition: width .35s var(--ease); }
.svc:hover { background: var(--panel); padding-left: 2rem; }
.svc:hover::before { width: 3px; }
.svc-num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--muted); }
.svc-body h3 { font-family: var(--font-display); font-size: clamp(1.5rem,3vw,2.2rem); font-weight: 600; letter-spacing: -.01em; }
.svc-body p { color: var(--muted); margin-top: .5rem; max-width: 52ch; }
.svc-go { font-family: var(--font-display); font-size: .8rem; letter-spacing: .14em; color: var(--accent); opacity: 0; transform: translateX(-8px); transition: all .35s var(--ease); }
.svc:hover .svc-go { opacity: 1; transform: translateX(0); }

/* ── HOW ─────────────────────────────────────────────── */
.how { background: var(--bg-2); }
.how-steps { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.step { background: var(--bg-2); padding: 2rem 1.4rem; transition: background .3s; }
.step:hover { background: var(--panel); }
.step b { font-family: var(--font-display); font-size: .9rem; color: var(--accent); letter-spacing: .1em; }
.step h4 { font-family: var(--font-display); font-size: 1.2rem; margin: .8rem 0 .5rem; }
.step p { color: var(--muted); font-size: .9rem; line-height: 1.5; }

/* ── SHOWCASE ────────────────────────────────────────── */
.show-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(2,1fr); gap: 1.4rem; }
.show-card { position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--panel); transition: transform .4s var(--ease); }
.show-card:hover { transform: translateY(-6px); }
.show-thumb { aspect-ratio: 16/10; transition: transform .6s var(--ease); }
.show-card:hover .show-thumb { transform: scale(1.05); }
.g1 { background: linear-gradient(135deg,#ff7a45,#c0392b); }
.g2 { background: linear-gradient(135deg,#00E0B8,#0b7285); }
.g3 { background: linear-gradient(135deg,#5B4BFF,#7048e8); }
.g4 { background: linear-gradient(135deg,#f0a6ca,#b5179e); }
.show-meta { padding: 1.2rem 1.4rem; display: flex; flex-direction: column; gap: .3rem; }
.show-meta span { font-family: var(--font-display); font-size: .68rem; letter-spacing: .24em; color: var(--accent); }
.show-meta h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; }
.show-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%; background: rgba(0,0,0,.55);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: .9rem; backdrop-filter: blur(4px); pointer-events: none;
}

/* ── CTA ─────────────────────────────────────────────── */
.cta { text-align: center; }
.cta-inner { max-width: 720px; margin: 0 auto; }
.cta-inner h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem,7vw,5rem); line-height: 1; letter-spacing: -.02em; margin: 1rem 0 1.2rem; }
.cta-inner p { color: var(--muted); margin-bottom: 2.2rem; }

/* ── FOOTER ──────────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); padding: 4rem clamp(1.2rem,5vw,4rem) 2rem; }
.foot-top { max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: space-between; gap: 3rem; flex-wrap: wrap; }
.foot-links { display: flex; gap: 3.5rem; flex-wrap: wrap; }
.foot-links h5 { font-family: var(--font-display); font-size: .7rem; letter-spacing: .2em; color: var(--muted); margin-bottom: 1rem; }
.foot-links a { display: block; font-size: .9rem; color: var(--fg); opacity: .8; margin-bottom: .5rem; transition: color .2s, opacity .2s; }
.foot-links a:hover { color: var(--accent); opacity: 1; }
.foot-bot { max-width: var(--maxw); margin: 3rem auto 0; padding-top: 1.6rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--muted); }
.foot-presented { max-width: var(--maxw); margin: 1.4rem auto 0; font-size: .78rem; color: var(--muted); text-align: center; }
.foot-presented strong { color: var(--accent); font-weight: 600; }

/* nav corner auth control */
.nav-auth { padding: .55rem 1.1rem; font-size: .72rem; }

/* ── HELP CHAT (floating "Let's Talk" guide widget) ─────── */
.help-chat {
  position: fixed; right: clamp(1rem,3vw,2rem); bottom: clamp(1rem,3vw,2rem); z-index: 200;
  width: min(370px, calc(100vw - 2rem)); max-height: min(520px, calc(100vh - 8rem));
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(16px) scale(.98); pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.help-chat.open { opacity: 1; transform: none; pointer-events: auto; }
.help-chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.1rem; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 600; font-size: .85rem; letter-spacing: .04em;
}
.help-chat-head button { background: none; border: 0; color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.help-chat-head button:hover { color: var(--fg); }
.help-chat-body { flex: 1; overflow-y: auto; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .7rem; min-height: 160px; }
.hc-msg { font-size: .86rem; line-height: 1.5; padding: .6rem .85rem; border-radius: 10px; max-width: 88%; }
.hc-bot { align-self: flex-start; background: var(--bg-2); color: var(--fg); }
.hc-user { align-self: flex-end; background: var(--accent); color: #fff; }
.help-chat-input { display: flex; gap: .5rem; padding: .8rem; border-top: 1px solid var(--line); }
.help-chat-input input {
  flex: 1; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px;
  padding: .6rem .8rem; color: var(--fg); font-family: var(--font-body); font-size: .86rem;
}
.help-chat-input input:focus { outline: none; border-color: var(--accent); }
.help-chat-input button {
  width: 38px; height: 38px; border-radius: 8px; border: 0; background: var(--accent); color: #fff;
  font-size: 1.1rem; cursor: pointer; flex-shrink: 0;
}

/* ── SCROLL REVEAL ───────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 900px) {
  /* Collapse the split nav back to brand + burger. The wordmark moves to the left edge so
     the burger has the right corner; a centred wordmark with a burger beside it reads as a
     mistake rather than a composition. */
  /* Two columns on mobile: wordmark left, controls right. The centred three-column
     masthead needs room the phone does not have. */
  .nav { grid-template-columns: auto 1fr; gap: 1rem; }
  .brand { justify-self: start; grid-column: 1; }
  .nav-end { grid-column: 2; }
  .nav-side-l, .nav-side-r { display: none; }
  .nav-links { display: none; }
  /* Sits in the .nav-right flex row beside the theme toggle, so no margin-left:auto — that
     was only needed back when it was a loose grid child pushing itself to the far edge. */
  .nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; padding: 0;
    background: none; border: 0; cursor: pointer; order: -1;
  }
  .nav-burger span {
    width: 22px; height: 1.5px; background: var(--fg);
    transition: transform .3s var(--ease), opacity .2s var(--ease);
  }
  .btn-ghost { display: none; }
  /* Drawer holding every link, including the ones desktop splits either side of the
     wordmark. Slides from under the fixed header rather than covering the whole screen,
     so the brand and the close affordance stay visible. */
  .nav-mobile {
    display: flex; flex-direction: column; gap: .2rem;
    position: absolute; top: 100%; left: 0; right: 0;
    padding: 1.4rem clamp(1.2rem, 4vw, 3rem) 2rem;
    background: color-mix(in srgb, var(--bg) 97%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .32s var(--ease), transform .32s var(--ease), visibility .32s;
  }
  .nav-mobile.open { opacity: 1; visibility: visible; transform: none; }
  .nav-mobile a { padding: .85rem 0; border-bottom: 1px solid var(--line); }
  .nav-mobile a:last-child { border-bottom: 0; }
  .nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger.is-open span:nth-child(2) { opacity: 0; }
  .nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .how-steps { grid-template-columns: 1fr 1fr; }
  .show-grid { grid-template-columns: 1fr; }
  .svc { grid-template-columns: 60px 1fr; }
  .svc-go { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } .reveal { opacity: 1; transform: none; } }

/* ═══════════════════════════════════════════════════════════
   EDITORIAL LAYER
   Refinements toward the reference walkthrough: thin elliptical
   outline buttons, letter-spaced eyebrows, wide vertical rhythm.
   Everything below is theme-agnostic — it resolves through the
   tokens, so light and dark both get it.
   ═══════════════════════════════════════════════════════════ */

/* ── Floating chat launcher (replaces the nav "LET'S TALK") ── */
.chat-launcher {
  position: fixed; z-index: 80;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .72rem 1.15rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(14px);
  color: var(--fg);
  font-family: var(--font-display); font-size: .74rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  cursor: grab;
  box-shadow: 0 10px 34px rgba(0,0,0,.24);
  /* Dragging sets top/left inline, so those must not animate or the button lags the
     pointer. Only the hover affordances transition. */
  transition: border-color .3s var(--ease), transform .3s var(--ease),
              box-shadow .3s var(--ease), background .3s var(--ease);
  touch-action: none;          /* let the drag handler own the gesture on touch */
  user-select: none;
}
.chat-launcher:hover { border-color: var(--accent); transform: translateY(-2px); }
.chat-launcher:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.chat-launcher.dragging {
  cursor: grabbing; transition: none;
  border-color: var(--accent); box-shadow: 0 16px 44px rgba(0,0,0,.34);
}
.chat-launcher svg { color: var(--accent); flex: none; }
/* Docked left, the label reads better after the icon; docked right, before it. */
.chat-launcher[data-side="left"] { flex-direction: row; }
.chat-launcher[data-side="right"] { flex-direction: row-reverse; }
@media (max-width: 640px) {
  /* Collapse to a circle so it never covers the composer or CTA on a narrow screen. */
  .chat-launcher-label { display: none; }
  .chat-launcher { padding: .8rem; border-radius: 50%; }
}

/* ── Thin elliptical outline button ─────────────────────────
   The signature control of this design: a hairline ellipse that fills from the centre on
   hover. Used for section-level actions where a solid button would shout. */
.btn-ellipse {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.15rem 3.2rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent; color: var(--fg);
  font-family: var(--font-display); font-size: .74rem; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase;
  cursor: pointer; position: relative; overflow: hidden; isolation: isolate;
  transition: color .45s var(--ease), border-color .45s var(--ease);
}
.btn-ellipse::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--fg); border-radius: inherit;
  transform: scale(.2); opacity: 0;
  transition: transform .55s var(--ease), opacity .4s var(--ease);
}
.btn-ellipse:hover { color: var(--bg); border-color: var(--fg); }
.btn-ellipse:hover::before { transform: scale(1); opacity: 1; }
.btn-ellipse:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ── Editorial rhythm ───────────────────────────────────── */
.ed-section { padding: clamp(6rem, 13vw, 11rem) 0; }
.ed-wrap { width: min(var(--maxw), 92vw); margin-inline: auto; }

.ed-label {
  display: flex; align-items: center; gap: 1.1rem;
  font-family: var(--font-display); font-size: .7rem; font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase; color: var(--muted);
}
.ed-label::after {
  content: ''; height: 1px; flex: 1; max-width: 90px;
  background: var(--line-strong); opacity: .6;
}

.ed-display {
  font-family: var(--font-display);
  font-weight: 400;                 /* light editorial weight, not the bold default */
  font-size: clamp(2.5rem, 6.4vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: -.024em;
}
.ed-lede {
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  line-height: 1.75; color: var(--muted);
  max-width: 54ch;
}

/* Media frame — full-bleed imagery with a slow scale on hover, the reference's main
   interaction. Scoped to the frame so text never scales with it. */
.ed-frame { overflow: hidden; position: relative; background: var(--bg-2); }
.ed-frame img, .ed-frame video {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.ed-frame:hover img, .ed-frame:hover video { transform: scale(1.045); }

@media (prefers-reduced-motion: reduce) {
  .ed-frame img, .ed-frame video, .btn-ellipse, .btn-ellipse::before,
  .chat-launcher { transition: none !important; }
  .ed-frame:hover img, .ed-frame:hover video { transform: none; }
}

/* ── Selected work grid (home) ────────────────────────────
   Deliberately uneven: a uniform 3x2 of equal boxes is the template look this design is
   avoiding. The first tile spans two columns and two rows so the eye has a clear entry
   point, and the rest settle around it. */
.work-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.work-head .ed-display { margin-top: 1.2rem; }
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 15.5rem;
  gap: 1rem;
}
.work-tile { margin: 0; border: 1px solid var(--line); background: var(--bg-2); }
.work-tile:first-child { grid-column: span 2; grid-row: span 2; }
.work-cta { margin: clamp(2.8rem, 5vw, 4rem) auto 0; display: flex; width: fit-content; }

@media (max-width: 900px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 12rem; }
  .work-tile:first-child { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 560px) {
  .work-grid { grid-template-columns: 1fr; grid-auto-rows: 13rem; }
  .work-tile:first-child { grid-column: span 1; }
}

/* ── Split hero ───────────────────────────────────────────
   Copy left, a real render full-bleed right. Overrides the stacked .hero layout only when
   .hero-split is present, so other pages using .hero are untouched. */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding-right: 0;                 /* media runs to the viewport edge */
}
.hero-split .hero-inner { margin: 0; max-width: 44rem; }
/* The base .hero-title is clamp(…, 8vw, …), sized for a full-bleed hero. In the split it
   only has about half the viewport, so 8vw overflows the column and breaks the headline
   into five ragged lines. Scale to the column instead. */
.hero-split .hero-title {
  font-size: clamp(2.3rem, 4.3vw, 4.5rem);
  line-height: 1.02;
  margin: 1.2rem 0 1.4rem;
}
.hero-split .hero-sub { max-width: 42ch; }
.hero-split .hero-media {
  position: relative; z-index: 1; margin: 0;
  align-self: stretch; min-height: 60vh;
  border-left: 1px solid var(--line);
}
.hero-split .hero-media:empty { border-left: 0; }
/* The hero's orange glow sits top-right, exactly where the media now is — pull it back so
   it warms the edge instead of washing the footage out. */
.hero-split::after { opacity: .3; right: -28vw; }
.hero-split .hero-scroll { grid-column: 1; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; }
/* Secondary action: same geometry, lighter until hovered. */
.btn-ellipse-quiet { border-color: var(--line); color: var(--muted); padding-inline: 2.4rem; }
.btn-ellipse-quiet:hover { color: var(--bg); }

@media (max-width: 900px) {
  /* Below the split breakpoint the media becomes a band under the copy rather than a
     column, so the headline keeps the full width it needs. */
  .hero-split { grid-template-columns: 1fr; padding-right: clamp(1.2rem, 5vw, 4rem); }
  .hero-split .hero-media {
    min-height: 46vw; border-left: 0; border-top: 1px solid var(--line);
    margin-top: 2.5rem;
  }
}

/* ── Editorial pass over the existing home sections ───────
   These override the earlier .section-head / .svc / .step / .cta rules rather than
   replacing them, so any other page still using those classes keeps working — the markup
   is untouched, only the typographic weight and density change.

   The common move is away from "bold heading + filled card on hover" toward light display
   type separated by hairlines, which is what makes the reference read as printed rather
   than as a component library. */

/* Section heads: light display weight, and the eyebrow gains the trailing rule that
   .ed-label uses, so every section opens the same way. */
.section-head { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.section-head h2 {
  font-weight: 400;
  font-size: clamp(2.1rem, 4.6vw, 4rem);
  line-height: 1.05; letter-spacing: -.022em;
  margin-top: 1.1rem;
}
.section-head .eyebrow {
  display: flex; align-items: center; gap: 1.1rem;
  font-weight: 500; font-size: .7rem;
}
.section-head .eyebrow::after {
  content: ''; height: 1px; flex: 1; max-width: 90px;
  background: var(--line-strong); opacity: .6;
}

/* Services: a typeset index, not a stack of cards. The panel fill on hover made each row
   look like a button; a hairline that lights up and a nudge to the right says the same
   thing far more quietly. */
.svc { padding: clamp(1.8rem, 3vw, 2.8rem) 1rem; gap: clamp(1.2rem, 3vw, 2.6rem); }
.svc:hover { background: transparent; padding-left: 1.9rem; }
.svc:hover::before { width: 2px; }
.svc-num {
  font-size: .78rem; font-weight: 500; letter-spacing: .2em;
  color: var(--muted); align-self: start; padding-top: .55rem;
}
.svc-body h3 { font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -.015em; }
.svc-body p { margin-top: .65rem; line-height: 1.7; }
.svc-go { letter-spacing: .22em; font-size: .7rem; }

/* How: keep the five-column rhythm but drop the filled tiles — hairlines alone, with the
   step number carrying the weight. */
.how { background: transparent; border-top: 1px solid var(--line); }
.how-steps { background: transparent; border: 0; gap: 0; }
.step {
  background: transparent; padding: clamp(1.6rem, 2.6vw, 2.4rem) clamp(1rem, 1.8vw, 1.6rem);
  border-left: 1px solid var(--line);
}
.step:first-child { border-left: 0; }
.step:hover { background: color-mix(in srgb, var(--fg) 3%, transparent); }
.step b { font-size: .72rem; letter-spacing: .24em; }
.step h4 { font-weight: 500; font-size: 1.05rem; margin: 1rem 0 .5rem; }

/* CTA: the page's closing statement, so it gets the largest light display setting. */
.cta-inner h2 {
  font-weight: 400;
  font-size: clamp(2.3rem, 6vw, 4.6rem);
  line-height: 1.04; letter-spacing: -.024em;
  margin: 1.2rem 0 1.4rem;
}
.cta-inner p { margin-bottom: 2.6rem; line-height: 1.7; }
.cta-inner .eyebrow { justify-content: center; }

@media (max-width: 900px) {
  /* Five hairline columns collapse before the text does. */
  .step { border-left: 0; border-top: 1px solid var(--line); }
  .step:first-child { border-top: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Full-screen output viewer (Kyro.openViewer)
   Replaces window.open(url) on finished renders. The close control is fixed to
   the viewport rather than the media, so it stays reachable no matter how tall
   or wide the asset is — a portrait 9:16 video used to push any in-flow control
   off-screen entirely, which is how "there is no cross button" happened.
   ══════════════════════════════════════════════════════════════════════════ */
.kv-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column;
  background: rgba(6, 7, 9, .92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: kvIn .22s ease both;
}
@keyframes kvIn { from { opacity: 0; } to { opacity: 1; } }

.kv-bar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .85rem 1.1rem;
}
.kv-title {
  color: rgba(244, 241, 234, .72); font-size: .85rem; font-family: var(--font-body);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kv-tools { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.kv-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(244, 241, 234, .22);
  background: rgba(244, 241, 234, .08); color: #f4f1ea;
  transition: background .2s, border-color .2s, transform .2s;
}
.kv-btn svg { width: 19px; height: 19px; }
.kv-btn:hover { background: rgba(244, 241, 234, .18); border-color: rgba(244, 241, 234, .45); }
/* The close control is the one that must never be missed — give it the accent on hover
   and a slightly larger tap target than the 44px minimum on touch. */
.kv-close:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: rotate(90deg); }

.kv-stage {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 1.1rem 0;
}
.kv-media {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  border-radius: 10px; background: #000;
  box-shadow: 0 30px 90px -25px rgba(0, 0, 0, .8);
}

.kv-hint {
  flex: 0 0 auto; text-align: center; padding: .9rem 1rem 1.1rem;
  color: rgba(244, 241, 234, .42); font-size: .76rem; font-family: var(--font-body);
}
.kv-hint kbd {
  font-family: inherit; font-size: .72rem; padding: .1rem .4rem; border-radius: 4px;
  border: 1px solid rgba(244, 241, 234, .28); background: rgba(244, 241, 234, .07);
}

@media (max-width: 640px) {
  .kv-btn { width: 46px; height: 46px; }
  .kv-stage { padding: 0 .5rem; }
  /* Touch users get Back and the X; the keyboard hint is noise on a phone. */
  .kv-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kv-backdrop { animation: none; }
  .kv-close:hover { transform: none; }
}

/* Expand-to-full-screen control, overlaid on any in-page player (Studio result stage,
   editor stage, chat result tile). Positioned against the player box, so it needs the
   player itself to be a positioning context — .result .player, .stage-player and
   .genjob-result all already set position: relative. */
.player-expand {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(244, 241, 234, .24);
  background: rgba(10, 11, 13, .58); color: #f4f1ea;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: .8; transition: opacity .2s, background .2s, border-color .2s;
}
.player-expand svg { width: 17px; height: 17px; }
.player-expand:hover { opacity: 1; background: var(--accent); border-color: var(--accent); color: #fff; }
/* A <video> puts its native controls along the bottom edge, so a top-right button never
   overlaps them — but on a short tile the two can crowd. Nudge clear on small players. */
@media (max-width: 640px) { .player-expand { width: 40px; height: 40px; top: 8px; right: 8px; } }

/* ── Custom Hero Highlight & Animation ── */
.hero-title-sm { font-size: clamp(2.4rem, 6vw, 4.4rem) !important; color: var(--accent-2); }
.hero-sub-lg {
  font-size: clamp(1.15rem, 2vw, 1.4rem) !important;
  max-width: 62ch !important;
  padding: 1.5rem !important;
  margin-top: 2rem !important;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.015);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  position: relative;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
  color: #fff !important;
}
.hero-sub-lg::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(100deg, rgba(255,47,143,0.5) 25%, rgba(34,211,238,0.5) 50%, rgba(255,47,143,0.5) 75%);
  background-size: 240% 100%;
  animation: shimmer 3.6s ease-in-out infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.hero-sub-lg .shimmer { font-weight: 600; display: inline-block; }

/* Inline Text Slider */
.inline-slider-wrap {
  display: inline-block;
  vertical-align: text-bottom;
  height: 1.2em;
  line-height: 1.2em;
  overflow: hidden;
  position: relative;
}
.inline-slider {
  display: block;
  animation: slideWords 10s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.hero-sub-lg .inline-slider b {
  display: flex;
  align-items: center;
  height: 1.2em;
  font-weight: inherit;
}
@keyframes slideWords {
  0%, 15% { transform: translateY(0); }
  20%, 35% { transform: translateY(-1.2em); }
  40%, 55% { transform: translateY(-2.4em); }
  60%, 75% { transform: translateY(-3.6em); }
  80%, 95% { transform: translateY(-4.8em); }
  100% { transform: translateY(-6.0em); }
}