/* ===================================================================
   Own More of the CX Opportunity · partner growth briefing by Cresyn
   Cresyn is the primary brand: deep navy #0D1B2A, dark blue #1B263B,
   slate #415A77, muted blue #778DA9, light neutral #E0E1DD,
   gray #9AA4B2, accent orange #C65A1E. Type: Geist + Geist Mono
   (as on cresyn.ai).
   Zendesk's published palette is used sparingly for product-related
   details: Licorice #11110D, Matcha #D1F470, Sesame #F5F5F2.
   Semantic colors: contact center path = muted blue,
   service-platform path = matcha, convergence/emphasis = orange.
=================================================================== */

:root{
  /* Cresyn */
  --navy:      #0d1b2a;
  --navy-2:    #1b263b;
  --slate:     #415a77;
  --muted:     #778da9;
  --neutral:   #e0e1dd;
  --gray:      #9aa4b2;
  --orange:    #c65a1e;
  --orange-hi: #e8834a;   /* orange lifted for small text on navy */
  --orange-dk: #a94a16;   /* orange text on light surfaces */
  --orange-fill: #b4501a; /* solid fill behind white text */
  --white:     #ffffff;
  --paper:     #f6f5f1;
  /* Zendesk accents (official brand guidelines) */
  --licorice:  #11110d;
  --matcha:    #d1f470;
  --sesame:    #f5f5f2;
  --matcha-ink:#4b6b12;   /* matcha family, dark enough for text on light surfaces */

  --ink:       #0d1b2a;
  --ink-soft:  #415a77;
  --on-dark:   #e0e1dd;
  --on-dark-soft: #a7b0bd;
  --line-dark: rgba(224,225,221,.14);
  --line-ink:  rgba(13,27,42,.14);

  --font:  'Geist', 'Segoe UI', system-ui, sans-serif;
  --mono:  'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fs-display: clamp(2.4rem, 1.1rem + 4.6vw, 5.2rem);
  --fs-headline: clamp(1.8rem, 1rem + 2.5vw, 3.1rem);
  --fs-lead: clamp(1.12rem, .95rem + .8vw, 1.5rem);
  --fs-body-lg: clamp(1.02rem, .95rem + .35vw, 1.22rem);
  --fs-body: clamp(.98rem, .94rem + .18vw, 1.06rem);
  --fs-eyebrow: clamp(.72rem, .68rem + .18vw, .82rem);

  --gutter: clamp(16px, 4.5vw, 72px);
  --hud-h: 72px;
  --pager-h: 0px;
  --maxw: 1240px;
  --radius: 14px;

  --ease-out: cubic-bezier(.16,.84,.3,1);
  --ease-inout: cubic-bezier(.65,0,.35,1);
  --t-reveal: 780ms;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; background:var(--navy); }
body{
  margin:0; background:var(--navy); color:var(--on-dark);
  font-family:var(--font); font-size:var(--fs-body); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,p,ol,ul,dl,dd,figure,blockquote,fieldset{ margin:0; }
ol,ul{ padding:0; list-style:none; }
fieldset{ border:0; padding:0; min-width:0; }
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
address,cite{ font-style:normal; }
kbd{
  font-family:var(--mono); font-size:.75em; font-weight:600;
  padding:.15em .5em; border-radius:6px; border:1px solid var(--line-dark);
  background:rgba(255,255,255,.06); color:var(--on-dark);
}
.sr-only{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.skip-link{
  position:fixed; left:12px; top:-60px; z-index:100; padding:10px 16px; border-radius:8px;
  background:var(--orange-fill); color:var(--white); font-weight:600; text-decoration:none;
}
.skip-link:focus{ top:12px; }
:focus-visible{ outline:3px solid var(--orange-hi); outline-offset:3px; border-radius:6px; }
.scene--light :focus-visible{ outline-color:var(--orange-dk); }
.scene:focus{ outline:none; }

/* ---------- partner view: show only the copy for the selected path ---------- */
html[data-path="both"]    [data-for]:not([data-for~="both"]),
html[data-path="ccaas"]   [data-for]:not([data-for~="ccaas"]),
html[data-path="zendesk"] [data-for]:not([data-for~="zendesk"]){ display:none; }

/* ===================================================================
   CAMERA BACKDROP: two paths converging into one opportunity
=================================================================== */
.backdrop{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.backdrop-world{
  position:absolute; left:50%; top:50%; width:2800px; height:2800px;
  margin:-1400px 0 0 -1400px; transform-origin:50% 50%; will-change:transform;
}
.backdrop-world svg{ width:100%; height:100%; overflow:visible; }
.bw-grid{ fill:none; stroke:var(--muted); stroke-width:1; opacity:.08; vector-effect:non-scaling-stroke; }
.bw-path{ fill:none; stroke-width:26; stroke-linecap:round; opacity:.16; }
.bw-path--cc{ stroke:var(--muted); }
.bw-path--zd{ stroke:var(--matcha); opacity:.16; }
.bw-path--trunk{ stroke:var(--orange); opacity:.24; }
.bw-dash{ fill:none; stroke:var(--neutral); stroke-width:2; stroke-dasharray:6 18; opacity:.22; vector-effect:non-scaling-stroke; }
.bw-ring{ fill:none; stroke:var(--muted); stroke-width:2; opacity:.16; vector-effect:non-scaling-stroke; }
.bw-ring--o{ stroke:var(--orange); opacity:.4; }
.bw-hub{ fill:var(--orange); opacity:.22; }
.bw-node{ fill:var(--navy-2); stroke:var(--muted); stroke-width:2; opacity:.7; vector-effect:non-scaling-stroke; }
.bw-sq{ fill:var(--slate); opacity:.22; }
.bw-half{ fill:var(--matcha); opacity:.1; }
.bw-layer{ fill:var(--slate); opacity:.2; }
.bw-layer--o{ fill:var(--orange); opacity:.28; }
.bw-sun{ fill:none; stroke:var(--orange); stroke-width:3; opacity:.3; vector-effect:non-scaling-stroke; }
/* keep the reading side of each dark scene calm */
.backdrop::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(13,27,42,.9) 0%, rgba(13,27,42,.62) 44%, rgba(13,27,42,.22) 80%),
    radial-gradient(120% 90% at 50% 50%, transparent 50%, rgba(8,17,27,.7) 100%);
}

/* ===================================================================
   HUD / RAIL / PAGER / SCENE MENU
=================================================================== */
.hud{
  position:fixed; z-index:20; top:0; left:0; right:0; height:var(--hud-h);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:max(12px, env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
  pointer-events:none;
}
.hud > *{ pointer-events:auto; }
.hud-logo, .hud-scene{
  background:rgba(13,27,42,.84); border:1px solid var(--line-dark);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-radius:999px; height:44px; display:flex; align-items:center;
}
.hud-logo{ padding:0 18px 0 10px; gap:10px; text-decoration:none; transition:opacity .4s, visibility .4s; }
[data-scene="opportunity"] .hud-logo{ opacity:0; visibility:hidden; }
.hud-mark{ width:26px; height:26px; }
.hud-word{ height:14px; width:auto; }
.hud-scene{ flex:none; white-space:nowrap; padding:0 8px 0 18px; gap:12px; font-size:.82rem; letter-spacing:.02em; color:var(--on-dark); min-width:44px; }
.hud-scene svg{ width:28px; height:28px; padding:5px; border-radius:50%; fill:none; stroke:var(--on-dark); stroke-width:2; stroke-linecap:round; background:rgba(255,255,255,.06); }
.hud-scene:hover svg{ background:rgba(255,255,255,.14); }
.hud-count{ font-family:var(--mono); color:var(--orange-hi); font-weight:600; font-variant-numeric:tabular-nums; }
.hud-title{ font-weight:500; }

.rail{
  position:fixed; z-index:20; right:max(18px, env(safe-area-inset-right)); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:4px; padding:10px 6px; border-radius:999px;
  background:rgba(13,27,42,.8); border:1px solid var(--line-dark);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.rail-dot{ position:relative; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; }
.rail-dot::before{
  content:""; width:8px; height:8px; border-radius:50%; background:rgba(224,225,221,.38);
  transition:transform .35s var(--ease-out), background .35s;
}
.rail-dot:hover::before{ background:var(--on-dark); }
.rail-dot[aria-current="step"]::before{ background:var(--orange); transform:scale(1.5); }
.rail-label{
  position:absolute; right:40px; top:50%; transform:translate(6px,-50%); white-space:nowrap;
  padding:6px 12px; border-radius:8px; background:var(--navy); border:1px solid var(--line-dark); color:var(--on-dark);
  font-size:.8rem; font-weight:500; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.rail-dot:hover .rail-label, .rail-dot:focus-visible .rail-label{ opacity:1; transform:translate(0,-50%); }

.pager{
  position:fixed; z-index:20; right:max(var(--gutter), env(safe-area-inset-right)); bottom:max(22px, env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:10px; padding:6px; border-radius:999px;
  background:rgba(13,27,42,.88); border:1px solid var(--line-dark);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.pager-btn{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; transition:background .25s, opacity .25s; }
.pager-btn svg{ width:22px; height:22px; fill:none; stroke:var(--on-dark); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pager-btn:hover{ background:rgba(255,255,255,.08); }
.pager-btn--next{ background:var(--orange-fill); }
.pager-btn--next svg{ stroke:var(--white); }
.pager-btn--next:hover{ background:#a24716; }
.pager-btn:disabled{ opacity:.3; cursor:default; background:none; }
.pager-meter{ width:84px; height:4px; border-radius:4px; background:rgba(255,255,255,.14); overflow:hidden; }
.pager-fill{ display:block; height:100%; width:0; background:var(--orange); border-radius:4px; transition:width .6s var(--ease-out); }

.scene-menu{
  width:min(440px, calc(100vw - 32px)); max-height:min(640px, calc(100svh - 48px)); padding:0;
  border:1px solid var(--line-dark); border-radius:18px; background:var(--navy-2); color:var(--on-dark);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.scene-menu::backdrop{ background:rgba(8,17,27,.66); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.scene-menu-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 14px 10px 22px; border-bottom:1px solid var(--line-dark); }
.scene-menu-title{ font-family:var(--mono); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--on-dark-soft); }
.scene-menu-close{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; }
.scene-menu-close:hover{ background:rgba(255,255,255,.08); }
.scene-menu-close svg{ width:20px; height:20px; fill:none; stroke:var(--on-dark); stroke-width:2; stroke-linecap:round; }
.scene-menu-list{ padding:8px; }
.scene-menu-list button{ width:100%; min-height:48px; display:flex; align-items:center; gap:14px; padding:8px 14px; border-radius:10px; text-align:left; }
.scene-menu-list button:hover{ background:rgba(255,255,255,.06); }
.scene-menu-list button[aria-current="step"]{ background:rgba(198,90,30,.18); }
.scene-menu-list .n{ font-family:var(--mono); font-size:.8rem; color:var(--orange-hi); }

/* ===================================================================
   SCENES & TYPE
=================================================================== */
#deck{ position:relative; z-index:1; }
.scene{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  padding:calc(var(--hud-h) + clamp(20px, 4vh, 48px)) var(--gutter) calc(clamp(72px, 10vh, 104px) + var(--pager-h));
  overflow:hidden;
}
.scene-inner{ width:100%; max-width:var(--maxw); margin:0 auto; position:relative; }
.scene--dark{ background:transparent; color:var(--on-dark); }
.scene--light{ color:var(--ink); background:var(--paper); }
/* light scenes: a quiet geometric field (Zendesk-style shapes, Cresyn colors) */
.scene--light::before, .scene--light::after{ content:""; position:absolute; pointer-events:none; }
.scene--light::before{
  right:-120px; top:-120px; width:420px; height:420px; border-radius:50%;
  border:1px solid rgba(65,90,119,.12); box-shadow:0 0 0 70px rgba(65,90,119,.025);
}
.scene--light::after{ left:-60px; bottom:-60px; width:180px; height:180px; background:rgba(65,90,119,.05); transform:rotate(12deg); }

.eyebrow{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--mono); font-weight:600; font-size:var(--fs-eyebrow);
  letter-spacing:.16em; text-transform:uppercase; color:var(--orange-hi); margin-bottom:clamp(12px, 2vh, 20px);
}
.eyebrow--ink{ color:var(--orange-dk); }
.display{ font-weight:700; font-size:var(--fs-display); line-height:1.02; letter-spacing:-.035em; color:var(--white); }
.display em, .headline .hl{ font-style:normal; color:var(--orange-hi); }
.headline{ font-weight:700; font-size:var(--fs-headline); line-height:1.08; letter-spacing:-.028em; color:var(--white); max-width:24ch; }
.headline--ink{ color:var(--ink); }
.hl-ink{ color:var(--orange-dk); }
/* a matcha marker stroke: the one place Zendesk green carries a headline */
.hl-matcha{ background:linear-gradient(transparent 58%, var(--matcha) 58%, var(--matcha) 92%, transparent 92%); padding:0 .06em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.display, .headline, .lead{ text-wrap:balance; }
.lead{ font-size:var(--fs-lead); line-height:1.42; color:var(--on-dark); max-width:34ch; margin-top:clamp(16px, 2.6vh, 28px); }
.lead--sm{ font-size:clamp(1.05rem, .95rem + .5vw, 1.3rem); max-width:44ch; }
.body-lg{ font-size:var(--fs-body-lg); color:var(--on-dark-soft); max-width:56ch; margin-top:clamp(14px, 2.2vh, 24px); }
.body-ink{ color:var(--ink-soft); max-width:58ch; margin-top:14px; }
.body-ink b, .body-ink strong{ color:var(--ink); }
.fine-note{ margin-top:clamp(18px, 3vh, 30px); font-size:.9rem; color:var(--on-dark-soft); max-width:60ch; }
.fine-note--ink{ color:var(--ink-soft); }
.source{ margin-top:clamp(14px, 2.4vh, 22px); font-size:.78rem; color:var(--ink-soft); }
.source a, cite a{ text-underline-offset:3px; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:0 26px;
  border-radius:999px; font-weight:600; font-size:1rem; text-decoration:none;
  transition:transform .25s var(--ease-out), background .25s, box-shadow .25s, border-color .25s;
}
.btn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.btn--primary{ background:var(--orange-fill); color:var(--white); box-shadow:0 12px 32px rgba(198,90,30,.32); }
.btn--primary:hover{ background:#a24716; transform:translateY(-2px); }

/* ---------------- reveal system ---------------- */
.js [data-reveal]{
  opacity:0; transform:translate3d(0,26px,0);
  transition:opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
  transition-delay:calc(var(--i, 0) * 80ms);
}
.js .scene.is-in [data-reveal]{ opacity:1; transform:none; }

/* ===================================================================
   01 · THE OPPORTUNITY
=================================================================== */
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,5vw,80px); align-items:center; }
.presented{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:clamp(20px, 4vh, 40px); }
.presented-mark{ width:38px; height:38px; }
.presented-word{ height:19px; width:auto; }
.presented-with{ font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-soft); margin:0 4px 0 8px; }
.presented-omn{ height:30px; width:auto; opacity:.92; }
.scene--hero .display{ max-width:12ch; }
.hero-actions{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:clamp(24px, 4.5vh, 44px); }
.key-hint{ display:flex; align-items:center; gap:6px; font-size:.86rem; color:var(--on-dark-soft); }
.hero-for{ margin-top:clamp(18px, 3vh, 28px); font-size:.92rem; color:var(--on-dark-soft); }
.hero-for a{ color:var(--on-dark); text-underline-offset:4px; text-decoration-color:rgba(232,131,74,.6); }
.hero-for a:hover{ color:var(--orange-hi); }

.converge{ position:relative; width:100%; max-width:560px; margin-left:auto; aspect-ratio:560 / 480; font-size:clamp(.74rem, .62rem + .4vw, .95rem); }
.converge-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.cv-shape--sq{ fill:var(--slate); opacity:.55; }
.cv-shape--half{ fill:var(--matcha); opacity:.9; }
.cv-path{ fill:none; stroke-width:6; stroke-linecap:round; }
.cv-path--cc{ stroke:var(--muted); }
.cv-path--zd{ stroke:var(--matcha); }
.cv-ring{ fill:none; stroke:var(--orange-hi); stroke-width:1.5; stroke-dasharray:4 6; }
.cv-core{ fill:var(--orange); }
.cv-trunk{ stroke:var(--orange-hi); stroke-width:3; stroke-linecap:round; }
.cv-layer{ fill:var(--slate); }
.cv-layer--1{ fill:var(--orange); }
.cv-layer--2{ fill:#8a5a3e; }
.cv-label{ position:absolute; display:flex; flex-direction:column; gap:2px; line-height:1.25; }
.cv-label b{ color:var(--white); font-weight:600; font-size:1.08em; white-space:nowrap; }
.cv-label span{ color:var(--on-dark-soft); font-size:.9em; }
.cv-label--cc{ left:22%; top:3%; max-width:26%; }
.cv-label--zd{ right:23%; top:3%; max-width:26%; text-align:right; align-items:flex-end; }
.cv-label--core{ left:63%; top:62.5%; transform:translateY(-50%); max-width:34%; }
/* draw-on animation */
.js .cv-path{ stroke-dasharray:520; stroke-dashoffset:520; transition:stroke-dashoffset 1.6s var(--ease-inout) .3s; }
.js .cv-path--zd{ transition-delay:.5s; }
.js .scene--hero.is-in .cv-path{ stroke-dashoffset:0; }
.js .cv-core, .js .cv-ring{ transform-box:fill-box; transform-origin:center; transform:scale(0); transition:transform .9s var(--ease-out) 1.7s; }
.js .scene--hero.is-in .cv-core, .js .scene--hero.is-in .cv-ring{ transform:none; }
.scene--hero.is-in .cv-ring{ animation:spin 40s linear 2.6s infinite; }
.js .cv-layer{ transform-box:fill-box; transform-origin:center; transform:scaleX(0); transition:transform .7s var(--ease-out); }
.js .cv-layer--1{ transition-delay:2.2s; } .js .cv-layer--2{ transition-delay:2.35s; }
.js .cv-layer--3{ transition-delay:2.5s; } .js .cv-layer--4{ transition-delay:2.65s; }
.js .scene--hero.is-in .cv-layer{ transform:none; }
.js .cv-label{ opacity:0; transition:opacity .8s var(--ease-out); }
.js .cv-label--cc, .js .cv-label--zd{ transition-delay:.9s; }
.js .cv-label--core{ transition-delay:2.4s; }
.js .scene--hero.is-in .cv-label{ opacity:1; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ===================================================================
   02 · A DIVIDED OPPORTUNITY
=================================================================== */
.divided-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px, 5vw, 72px); align-items:center; }
.split{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(110px,.62fr) minmax(0,1fr); gap:clamp(8px, 1vw, 14px); align-items:stretch;
}
.split-lane{ background:var(--white); border:1px solid var(--line-ink); border-radius:var(--radius); padding:clamp(16px, 2.2vh, 22px) clamp(14px, 1.4vw, 20px); box-shadow:0 20px 40px -30px rgba(13,27,42,.4); }
.split-lane--cc{ border-top:6px solid var(--muted); }
.split-lane--zd{ border-top:6px solid var(--licorice); }
.split-who{ font-weight:700; font-size:1.02rem; letter-spacing:-.01em; color:var(--ink); padding-bottom:10px; border-bottom:1px solid var(--line-ink); }
.split-lane li{ margin-top:12px; font-size:.95rem; color:var(--ink); line-height:1.35; }
.split-lane li span{ display:block; font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:2px; }
.split-mid{ display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:12px; text-align:center; }
.split-customer{ display:flex; flex-direction:column; align-items:center; gap:8px; padding-top:6px; }
.split-customer svg{ width:54px; height:54px; padding:12px; border-radius:50%; background:var(--navy); fill:none; stroke:var(--white); stroke-width:1.7; stroke-linecap:round; }
.split-customer b{ font-size:.86rem; line-height:1.25; color:var(--ink); }
.split-seam{ position:relative; flex:1; width:100%; display:grid; place-items:center; min-height:90px; }
.split-seam::before{ content:""; position:absolute; top:0; bottom:0; left:50%; border-left:2px dashed var(--orange); }
.split-seam span{ position:relative; background:var(--paper); padding:6px 4px; font-family:var(--mono); font-size:.66rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--orange-dk); line-height:1.35; }
.split-foot{ grid-column:1 / -1; margin-top:clamp(8px, 1.4vh, 14px); padding:14px 18px; border-radius:12px; background:var(--navy); color:var(--on-dark); font-size:.98rem; }
.split-foot b{ color:var(--orange-hi); }
.js .split .split-lane--cc{ transform:translateX(-18px); transition:transform 1s var(--ease-out) .5s; }
.js .split .split-lane--zd{ transform:translateX(18px); transition:transform 1s var(--ease-out) .5s; }
.js .scene.is-in .split .split-lane{ transform:none; }

/* ===================================================================
   03 · A CONNECTED ENVIRONMENT
=================================================================== */
.connected-grid{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(28px, 5vw, 72px); align-items:center; }
.eco{ position:relative; width:100%; max-width:540px; aspect-ratio:1; margin-left:auto; font-size:clamp(.72rem, .62rem + .35vw, .9rem); }
.eco-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.eco-orbit{ fill:none; stroke:var(--muted); stroke-width:1; stroke-dasharray:3 6; opacity:.6; }
.eco-spokes path{ stroke:var(--muted); stroke-width:1.5; opacity:.5; }
.eco-hub{ fill:var(--orange); }
.eco-center{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:7.6em; text-align:center; font-weight:600; color:var(--white); line-height:1.2; font-size:1.05em; }
.eco-nodes{ position:absolute; inset:0; }
.eco-node{
  position:absolute; left:50%; top:50%; width:12.6em; transform:translate(-50%,-50%);
  padding:.75em .9em; border-radius:12px; text-align:center; line-height:1.25;
  background:rgba(27,38,59,.94); border:1px solid var(--line-dark); box-shadow:0 16px 30px -18px rgba(0,0,0,.6);
}
/* six positions on the orbit (r = 37.5% of the figure) */
.eco-node[style*="--a:0"]{ top:12.5%; }
.eco-node[style*="--a:1"]{ left:82.5%; top:31.25%; }
.eco-node[style*="--a:2"]{ left:82.5%; top:68.75%; }
.eco-node[style*="--a:3"]{ top:87.5%; }
.eco-node[style*="--a:4"]{ left:17.5%; top:68.75%; }
.eco-node[style*="--a:5"]{ left:17.5%; top:31.25%; }
.eco-node b{ display:block; color:var(--white); font-weight:600; font-size:1em; }
.eco-node span{ display:block; margin-top:2px; color:var(--on-dark-soft); font-size:.86em; }
.eco-node--zd{ border-color:rgba(209,244,112,.55); box-shadow:inset 0 3px 0 var(--matcha), 0 16px 30px -18px rgba(0,0,0,.6); }
.eco-node--cc{ border-color:rgba(119,141,169,.7); box-shadow:inset 0 3px 0 var(--muted), 0 16px 30px -18px rgba(0,0,0,.6); }
.js .eco-node{ opacity:0; transition:opacity .7s var(--ease-out), translate .7s var(--ease-out); transition-delay:calc(.35s + var(--a) * 110ms); translate:0 10px; }
.js .scene--connected.is-in .eco-node{ opacity:1; translate:0 0; }
.js .eco-spokes path{ stroke-dasharray:160; stroke-dashoffset:160; transition:stroke-dashoffset 1s var(--ease-inout) 1s; }
.js .scene--connected.is-in .eco-spokes path{ stroke-dashoffset:0; }
.scene--connected.is-in .eco-orbit{ animation:spin 60s linear infinite; transform-origin:200px 200px; }

/* ===================================================================
   04 · WHY ZENDESK (Zendesk-influenced: licorice, sesame, matcha)
=================================================================== */
.scene--zendesk{ background:var(--sesame); }
.vendor-mark--zendesk{ color:var(--licorice); font-family:var(--font); font-weight:700; letter-spacing:-.01em; text-transform:none; font-size:1.18em; }
.zendesk-head .headline{ max-width:22ch; }
.zendesk-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(18px, 3vw, 44px); margin-top:clamp(22px, 4vh, 40px); align-items:start; }
.caps{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(17,17,13,.12); border:1px solid rgba(17,17,13,.12); border-radius:12px; overflow:hidden; }
.caps li{ background:var(--white); padding:clamp(12px, 1.8vh, 18px) clamp(12px, 1.2vw, 18px); }
.caps b{ display:flex; align-items:center; gap:8px; color:var(--licorice); font-size:.98rem; line-height:1.25; }
.caps b::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--matcha); box-shadow:0 0 0 1.5px var(--licorice); flex:none; }
.caps span{ display:block; margin-top:4px; font-size:.86rem; color:#55554f; line-height:1.4; }
.scenarios{ display:grid; gap:12px; }
.scenario{ padding:clamp(14px, 2vh, 20px) clamp(16px, 1.6vw, 22px); border-radius:12px; background:var(--licorice); color:#f0f0ea; }
.scenario-k{ font-family:var(--mono); font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--matcha); }
.scenario h3{ margin-top:4px; font-size:clamp(1.05rem, .98rem + .35vw, 1.22rem); color:var(--white); letter-spacing:-.01em; }
.scenario p:last-child{ margin-top:6px; font-size:.94rem; color:#c9c9c2; line-height:1.45; }
.fit{ padding:12px 16px; border-left:4px solid var(--orange); background:var(--white); border-radius:0 10px 10px 0; color:var(--ink-soft); font-size:.95rem; }
.fit b{ color:var(--ink); }

/* ===================================================================
   05 · ZENDESK + AMAZON CONNECT
=================================================================== */
.connect-head .headline{ max-width:32ch; }
.arch{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(12px, 1.6vw, 20px); margin-top:clamp(22px, 4vh, 38px); }
.arch-card{ display:flex; flex-direction:column; padding:clamp(16px, 2.2vh, 22px) clamp(16px, 1.6vw, 22px); border-radius:var(--radius); background:rgba(27,38,59,.88); border:1px solid var(--line-dark); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.arch-card--other{ background:rgba(13,27,42,.6); border-style:dashed; }
.arch-pic{ height:88px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; margin-bottom:14px; border-radius:10px; background:rgba(13,27,42,.6); border:1px solid var(--line-dark); padding:10px; }
.arch-card--byo .arch-pic{ flex-direction:row; gap:0; }
.ap-box{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px 14px; border-radius:8px; font-weight:600; font-size:.88rem; line-height:1.2; text-align:center; }
.ap-box i{ font-style:normal; font-weight:500; font-size:.72rem; opacity:.8; }
.ap-box--zd{ background:var(--licorice); color:var(--white); box-shadow:inset 0 -3px 0 var(--matcha); width:88%; }
.ap-box--cc{ background:var(--slate); color:var(--white); box-shadow:inset 0 -3px 0 var(--muted); }
.ap-box--sm{ width:auto; padding:10px 12px; font-size:.82rem; }
.ap-base{ width:88%; padding:5px 8px; border-radius:6px; background:var(--slate); color:var(--white); font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; text-align:center; }
.ap-link{ width:clamp(16px, 2.6vw, 34px); height:0; border-top:2px dashed var(--orange-hi); position:relative; }
.ap-link::before, .ap-link::after{ content:""; position:absolute; top:-5px; width:8px; height:8px; border-radius:50%; background:var(--orange-hi); }
.ap-link::before{ left:-4px; } .ap-link::after{ right:-4px; }
.ap-box--ghost{ border:1.5px dashed rgba(224,225,221,.35); color:var(--on-dark-soft); font-weight:500; }
.arch-k{ font-family:var(--mono); font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--orange-hi); }
.arch-card h3{ margin-top:2px; font-size:clamp(1.06rem, .98rem + .35vw, 1.24rem); color:var(--white); letter-spacing:-.01em; }
.arch-card p:last-child{ margin-top:8px; font-size:.93rem; color:var(--on-dark); line-height:1.45; }
.connect-foot{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(12px, 1.6vw, 20px); margin-top:clamp(12px, 1.6vw, 20px); }
.differs, .timely{ padding:14px 18px; border-radius:12px; font-size:.93rem; line-height:1.45; }
.differs{ border:1px solid var(--line-dark); color:var(--on-dark-soft); }
.differs b{ color:var(--on-dark); }
.timely{ background:linear-gradient(120deg, rgba(198,90,30,.26), rgba(27,38,59,.9) 70%); border:1px solid rgba(232,131,74,.5); color:var(--on-dark); }
.timely b{ color:var(--orange-hi); }
.timely i{ font-style:normal; color:var(--white); }
.timely cite{ display:block; margin-top:6px; font-size:.76rem; color:var(--on-dark-soft); }
.timely cite a{ color:inherit; }
.timely cite a:hover{ color:var(--on-dark); }

/* ===================================================================
   06 · TWO WAYS IN (interactive)
=================================================================== */
.paths-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px 32px; flex-wrap:wrap; }
.paths-head .headline{ max-width:20ch; }
.seg-legend{ padding:0; margin-bottom:8px; font-family:var(--mono); font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.seg-options{ display:flex; flex-wrap:wrap; gap:4px; padding:4px; border-radius:999px; background:var(--white); border:1px solid var(--line-ink); box-shadow:0 10px 24px -18px rgba(13,27,42,.5); }
.seg label{ position:relative; cursor:pointer; }
.seg input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.seg label span{ display:flex; align-items:center; min-height:44px; padding:0 18px; border-radius:999px; font-weight:600; font-size:.92rem; color:var(--ink-soft); transition:background .25s, color .25s; white-space:nowrap; }
.seg label:hover span{ color:var(--ink); background:rgba(13,27,42,.05); }
.seg input:checked + span{ background:var(--navy); color:var(--white); }
.seg input:focus-visible + span{ outline:3px solid var(--orange-dk); outline-offset:2px; }

.lanes{ display:grid; grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr); gap:0; margin-top:clamp(20px, 3.4vh, 34px); align-items:stretch; }
.lane{ border-radius:var(--radius); background:var(--white); border:1.5px solid var(--line-ink); padding:clamp(16px, 2.4vh, 24px) clamp(16px, 1.8vw, 26px); transition:opacity .45s var(--ease-out), transform .45s var(--ease-out), box-shadow .45s, border-color .45s; }
.lane--cc{ border-top:6px solid var(--muted); }
.lane--zd{ border-top:6px solid var(--licorice); }
.lane-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding-bottom:12px; border-bottom:1px solid var(--line-ink); }
.lane-tag{ font-family:var(--mono); font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding:3px 8px; border-radius:6px; }
.lane--cc .lane-tag{ background:rgba(119,141,169,.2); color:var(--slate); }
.lane--zd .lane-tag{ background:var(--matcha); color:var(--licorice); }
.lane h3{ font-size:clamp(1.08rem, .98rem + .45vw, 1.34rem); letter-spacing:-.015em; color:var(--ink); }
.lane-arrow{ color:var(--orange); }
.lane-steps > div{ display:grid; grid-template-columns:118px minmax(0,1fr); gap:14px; padding:11px 0; border-bottom:1px dashed var(--line-ink); }
.lane-steps > div:last-child{ border-bottom:0; padding-bottom:0; }
.lane-steps dt{ font-family:var(--mono); font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--orange-dk); padding-top:3px; }
.lane-steps dd{ color:var(--ink); font-size:.95rem; line-height:1.42; }
.lanes-join{ position:relative; }
.lanes-join::before{ content:""; position:absolute; left:8px; right:8px; top:50%; height:2px; background:linear-gradient(90deg, var(--muted), var(--orange), var(--licorice)); }
.lanes-join span{ position:absolute; left:50%; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 5px var(--paper); }
/* selection state: the chosen lane leads, the other stays readable */
/* (scoped to .scene.is-in so these outrank the reveal rule) */
html[data-path="ccaas"] .scene.is-in .lane--cc, html[data-path="zendesk"] .scene.is-in .lane--zd{ border-color:var(--orange); box-shadow:0 24px 50px -30px rgba(198,90,30,.6); transform:translateY(-4px); }
html[data-path="ccaas"] .scene.is-in .lane--zd, html[data-path="zendesk"] .scene.is-in .lane--cc{ opacity:.55; }
html[data-path="ccaas"] .scene.is-in .lane--zd:hover, html[data-path="zendesk"] .scene.is-in .lane--cc:hover{ opacity:.85; }
.converged{ margin-top:clamp(14px, 2.4vh, 22px); padding:clamp(14px, 2.2vh, 20px) clamp(16px, 1.8vw, 24px); border-radius:var(--radius); background:var(--navy); color:var(--on-dark); display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 24px; align-items:baseline; }
.converged-k{ font-family:var(--mono); font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--orange-hi); }
.converged-v{ font-size:clamp(1.05rem, .98rem + .35vw, 1.22rem); color:var(--white); }
.converged-v b{ color:var(--orange-hi); font-weight:600; }
.converged-next{ grid-column:2; font-size:.93rem; color:var(--on-dark-soft); }
.converged-next b{ color:var(--on-dark); }

/* ===================================================================
   07 · THE REVENUE STACK
=================================================================== */
.revenue-grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px, 5vw, 72px); align-items:center; }
.stack{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) 34px; gap:14px; }
.stack-layers{ display:flex; flex-direction:column; gap:10px; }
.layer{
  position:relative; display:grid; grid-template-columns:96px minmax(0,1fr); gap:16px; align-items:center;
  padding:clamp(12px, 1.8vh, 18px) clamp(14px, 1.6vw, 22px); border-radius:12px;
  background:rgba(27,38,59,.92); border:1px solid var(--line-dark); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  margin-left:calc(var(--n) * clamp(10px, 2vw, 28px));
}
.layer::before{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:4px; border-radius:0 4px 4px 0; background:var(--muted); }
.layer--1{ background:linear-gradient(110deg, rgba(198,90,30,.34), rgba(27,38,59,.94) 62%); border-color:rgba(232,131,74,.5); }
.layer--1::before{ background:var(--orange-hi); }
.layer--2::before{ background:var(--neutral); }
.layer--3::before{ background:var(--matcha); }
.layer--4{ background:rgba(13,27,42,.6); border-style:dashed; }
.layer--4::before{ background:var(--gray); }
.layer-type{ font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-soft); }
.layer--1 .layer-type{ color:var(--orange-hi); }
.layer h3{ font-size:clamp(1.02rem, .96rem + .32vw, 1.2rem); color:var(--white); letter-spacing:-.01em; }
.layer-body p{ margin-top:3px; font-size:.92rem; color:var(--on-dark); line-height:1.4; }
.stack-axis{ display:flex; flex-direction:column-reverse; justify-content:space-between; align-items:center; position:relative; padding:10px 0; }
.stack-axis::before{ content:""; position:absolute; top:6px; bottom:6px; left:50%; width:2px; margin-left:-1px; background:linear-gradient(0deg, var(--orange-hi), rgba(224,225,221,.2)); }
.stack-axis span{ position:relative; writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-soft); background:var(--navy); padding:6px 0; }
/* the layers build from the base up */
.js .layer{ opacity:0; transform:translate3d(0,24px,0) scale(.98); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay:calc(.3s + var(--n) * 260ms); }
.js .scene--revenue.is-in .layer{ opacity:1; transform:none; }

/* ===================================================================
   08 · BEYOND ONE ENGAGEMENT
=================================================================== */
.beyond-grid{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(28px, 5vw, 72px); align-items:center; }
.reach{ width:100%; max-width:500px; margin:0 auto; }
.reach-rings{ position:relative; aspect-ratio:1; font-size:clamp(.72rem, .64rem + .3vw, .88rem); }
.ring{ position:absolute; left:50%; top:50%; border-radius:50%; transform:translate(-50%,-50%); }
.ring--outer{ width:92%; height:92%; border:1.5px dashed rgba(198,90,30,.55); background:rgba(198,90,30,.04); }
.ring--inner{ width:46%; height:46%; border:1.5px solid var(--muted); background:rgba(119,141,169,.1); }
.reach-you{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:4.6em; height:4.6em; border-radius:50%; display:grid; place-items:center; background:var(--navy); color:var(--white); font-weight:700; }
.reach-rings{ container-type:inline-size; }
.chip{
  --d:46cqw; position:absolute; left:50%; top:50%; white-space:nowrap; padding:.5em .9em; border-radius:999px; font-weight:600; font-size:.95em;
  background:var(--white); border:1.5px solid var(--orange); color:var(--ink); box-shadow:0 10px 20px -14px rgba(13,27,42,.5);
  transform:translate(-50%,-50%) translate(calc(cos(var(--ang)) * var(--d)), calc(sin(var(--ang)) * var(--d)));
}
.chip--in{ --d:23cqw; border-color:var(--muted); background:#eef1f5; }
.reach-legend{ display:flex; justify-content:center; align-items:center; gap:8px 10px; flex-wrap:wrap; margin-top:10px; font-size:.8rem; color:var(--ink-soft); }
.lg{ display:inline-block; width:14px; height:14px; border-radius:50%; }
.lg--in{ border:1.5px solid var(--muted); background:#eef1f5; }
.lg--out{ border:1.5px dashed var(--orange); margin-left:10px; }
.js .chip:not(.chip--in){ opacity:0; transition:opacity .6s var(--ease-out), scale .6s var(--ease-out); scale:.8; }
.js .chip:not(.chip--in){ transition-delay:calc(.6s + var(--k, 0) * 120ms); }
.js .scene--beyond.is-in .chip{ opacity:1; scale:1; }
.js .ring--outer{ scale:.5; opacity:0; transition:scale 1.1s var(--ease-out) .4s, opacity .8s .4s; }
.js .scene--beyond.is-in .ring--outer{ scale:1; opacity:1; }
.ticks{ margin-top:10px; display:grid; gap:2px; }
.ticks li{ position:relative; padding:7px 0 7px 26px; color:var(--ink); border-bottom:1px solid var(--line-ink); font-size:.98rem; }
.ticks li::before{ content:""; position:absolute; left:2px; top:.95em; width:10px; height:6px; border-left:2px solid var(--orange); border-bottom:2px solid var(--orange); transform:rotate(-45deg); }
.cust-value{ margin-top:clamp(14px, 2.4vh, 22px); padding:12px 16px; border-radius:10px; background:var(--navy); color:var(--on-dark); font-size:.96rem; }
.cust-value b{ color:var(--orange-hi); }

/* ===================================================================
   09 · CRESYN + OMNINGAGE
=================================================================== */
.team-head{ max-width:780px; }
.roles{ display:grid; grid-template-columns:.85fr 1.15fr 1fr; gap:clamp(12px, 1.6vw, 20px); margin-top:clamp(22px, 4vh, 38px); }
.role{ display:flex; flex-direction:column; padding:clamp(16px, 2.4vh, 24px) clamp(16px, 1.8vw, 24px); border-radius:var(--radius); background:rgba(27,38,59,.88); border:1px solid var(--line-dark); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.role--you{ background:rgba(13,27,42,.6); border:1.5px dashed rgba(224,225,221,.32); }
.role--cresyn{ border-color:rgba(232,131,74,.5); background:linear-gradient(160deg, rgba(198,90,30,.18), rgba(27,38,59,.92) 55%); }
.role-brand{ display:flex; align-items:center; gap:10px; height:40px; margin-bottom:12px; }
.role-mark{ width:32px; height:32px; }
.role-word{ height:16px; width:auto; }
.role-omn{ height:30px; width:auto; }
.role-you{ font-family:var(--mono); font-weight:600; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark); padding:7px 12px; border:1px dashed rgba(224,225,221,.4); border-radius:8px; }
.role-k{ font-size:clamp(1.02rem, .96rem + .32vw, 1.18rem); font-weight:700; letter-spacing:-.01em; color:var(--white); padding-bottom:10px; margin-bottom:4px; border-bottom:1.5px solid var(--orange-hi); }
.role--you .role-k{ border-bottom-color:var(--muted); }
.role--omn .role-k{ border-bottom-color:var(--muted); }
.role ul li{ position:relative; padding-left:16px; margin-top:8px; color:var(--on-dark); font-size:.94rem; line-height:1.4; }
.role ul li::before{ content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--orange-hi); }
.role--you ul li::before, .role--omn ul li::before{ background:var(--muted); }
.team-foot{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px, 1.6vw, 20px); margin-top:clamp(12px, 1.6vw, 20px); }
.team-foot p{ padding:12px 16px; border-radius:12px; border:1px solid var(--line-dark); font-size:.93rem; color:var(--on-dark-soft); }
.team-foot b{ color:var(--on-dark); }

/* ===================================================================
   10 · NEXT STEP
=================================================================== */
.scene--cta{ flex-direction:column; justify-content:center; }
.scene--cta::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(70% 60% at 85% 100%, rgba(198,90,30,.3), transparent 70%); }
.cta-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(24px, 4.5vw, 72px); align-items:center; }
.display--cta{ font-size:clamp(2rem, 1rem + 3.2vw, 3.9rem); max-width:17ch; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(22px, 4vh, 36px); }
.cta-side{ padding:clamp(16px, 2.4vh, 24px) clamp(16px, 1.8vw, 24px); border-radius:var(--radius); background:rgba(27,38,59,.92); border:1px solid var(--line-dark); }
.cta-side-k{ font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--orange-hi); }
.routes{ display:grid; gap:8px; margin-top:12px; }
.route{ display:block; padding:12px 44px 12px 14px; border-radius:10px; border:1px solid var(--line-dark); text-decoration:none; position:relative; transition:border-color .25s, background .25s; }
.route::after{ content:""; position:absolute; right:16px; top:50%; width:9px; height:9px; border-top:2px solid var(--orange-hi); border-right:2px solid var(--orange-hi); transform:translateY(-50%) rotate(45deg); }
.route b{ display:block; color:var(--white); font-weight:600; }
.route span{ display:block; margin-top:2px; font-size:.88rem; color:var(--on-dark-soft); line-height:1.4; }
.route:hover{ border-color:var(--orange-hi); background:rgba(198,90,30,.08); }
html[data-path="ccaas"] .route[data-route="ccaas"], html[data-path="zendesk"] .route[data-route="zendesk"]{ border-color:var(--orange-hi); background:rgba(198,90,30,.14); }
.cta-agenda{ margin-top:12px; font-size:.88rem; color:var(--on-dark-soft); }
.contact{ margin-top:10px; display:grid; gap:2px; }
.contact-row{ display:grid; grid-template-columns:52px minmax(0,1fr); align-items:center; min-height:34px; }
.contact-k{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-soft); }
.contact a{ color:var(--white); font-weight:500; text-underline-offset:4px; text-decoration-color:rgba(232,131,74,.6); overflow-wrap:anywhere; }
.contact a:hover{ color:var(--orange-hi); }
.cta-footer{ width:100%; max-width:var(--maxw); margin:clamp(28px, 5vh, 52px) auto 0; padding-top:20px; border-top:1px solid var(--line-dark); display:flex; align-items:center; gap:22px; position:relative; }
.cobrand{ display:flex; align-items:center; gap:14px; flex:none; }
.cobrand-stack{ height:clamp(48px, 6vh, 62px); width:auto; }
.cobrand-with{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-soft); }
.cobrand-omn{ height:clamp(28px, 4vh, 36px); width:auto; }
.legal{ font-size:.74rem; line-height:1.5; color:var(--on-dark-soft); max-width:86ch; }
@media (min-width: 760px){ .cta-footer{ padding-right:220px; } }

/* ===================================================================
   RESPONSIVE
=================================================================== */
/* short laptop screens (e.g. 1366×768) */
@media (min-width: 900px) and (max-height: 940px){
  :root{ --fs-display: clamp(2.3rem, 1rem + 3.9vw, 4.2rem); --fs-headline: clamp(1.6rem, 1rem + 1.8vw, 2.4rem); }
  .scene{ padding-top:calc(var(--hud-h) + 6px); padding-bottom:74px; }
  .body-lg{ margin-top:10px; font-size:1rem; }
  .body-ink{ margin-top:10px; font-size:.95rem; }
  .eyebrow{ margin-bottom:10px; }
  .caps li{ padding:9px 12px; } .caps span{ font-size:.8rem; }
  .zendesk-grid{ margin-top:16px; }
  .scenario{ padding:10px 16px; } .scenario p:last-child{ font-size:.88rem; }
  .fit{ font-size:.88rem; padding:9px 14px; }
  .arch{ margin-top:16px; } .arch-pic{ height:auto; min-height:74px; margin-bottom:10px; } .arch-card{ padding:14px 18px; } .arch-card p:last-child{ font-size:.88rem; }
  .differs, .timely{ padding:10px 14px; font-size:.86rem; }
  .lanes{ margin-top:14px; } .lane{ padding:12px 18px; } .lane-steps > div{ padding:7px 0; } .lane-steps dd{ font-size:.88rem; }
  .converged{ padding:10px 18px; margin-top:10px; }
  .layer{ padding:9px 16px; } .layer-body p{ font-size:.86rem; } .stack-layers{ gap:7px; }
  .roles{ margin-top:16px; } .role{ padding:14px 18px; } .role ul li{ font-size:.88rem; margin-top:5px; }
  .team-foot p{ padding:9px 14px; font-size:.86rem; }
  .ticks li{ padding:5px 0 5px 26px; font-size:.92rem; }
  .cust-value{ padding:9px 14px; font-size:.9rem; margin-top:10px; }
  .fine-note{ margin-top:12px; }
  .split-lane li{ margin-top:8px; }
  .route{ padding:9px 40px 9px 14px; } .route span{ font-size:.84rem; }
  .cta-footer{ margin-top:18px; padding-top:14px; }
}

@media (min-width: 1600px) and (min-height: 900px){
  :root{
    --maxw: 1440px;
    --fs-display: clamp(4rem, 1rem + 3.8vw, 6.2rem);
    --fs-headline: clamp(3rem, 1rem + 2.1vw, 3.8rem);
    --fs-lead: 1.7rem; --fs-body-lg: 1.32rem; --fs-body: 1.12rem; --fs-eyebrow: .92rem;
  }
  .converge{ max-width:640px; }
  .eco{ max-width:620px; }
}

@media (min-width: 900px){
  html{ scroll-snap-type:y proximity; }
  .scene{ scroll-snap-align:start; }
}
@media (min-width: 1100px){
  .scene{ padding-right:max(var(--gutter), 96px); }
}
@media (max-width: 1099px){
  .rail{ display:none; }
  .zendesk-grid{ grid-template-columns:minmax(0,1fr); }
  .roles{ grid-template-columns:1fr 1fr; }
  .role--you{ grid-column:1 / -1; }
}

@media (max-width: 899px){
  :root{ --hud-h: 64px; --pager-h: 64px; }
  .hero-grid, .divided-grid, .connected-grid, .revenue-grid, .beyond-grid, .cta-grid{ grid-template-columns:minmax(0,1fr); }
  .converge{ margin:8px auto 0; max-width:480px; }
  .eco{ margin:0 auto; max-width:520px; }
  .arch{ grid-template-columns:minmax(0,1fr); }
  .arch-card{ display:grid; grid-template-columns:120px minmax(0,1fr); column-gap:16px; }
  .arch-pic{ grid-row:1 / span 3; height:auto; min-height:84px; margin:0; }
  .arch-card--byo .arch-pic{ flex-direction:column; gap:10px; }
  .ap-link{ width:0; height:16px; border-top:0; border-left:2px dashed var(--orange-hi); }
  .ap-link::before, .ap-link::after{ display:none; }
  .connect-foot, .team-foot{ grid-template-columns:minmax(0,1fr); }
  .lanes{ grid-template-columns:minmax(0,1fr); }
  .lanes-join{ height:34px; }
  .lanes-join::before{ left:50%; right:auto; top:4px; bottom:4px; width:2px; height:auto; background:linear-gradient(180deg, var(--muted), var(--orange), var(--licorice)); }
  html[data-path="ccaas"] .scene.is-in .lane--zd, html[data-path="zendesk"] .scene.is-in .lane--cc{ opacity:.7; }
  .beyond-grid .reach{ order:2; max-width:420px; }
  .roles{ grid-template-columns:minmax(0,1fr); }
  .cta-footer{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 759px){
  .hud-title{ display:none; }
  .hud-scene{ padding-left:14px; gap:8px; }
  .pager{ left:max(12px, env(safe-area-inset-left)); right:max(12px, env(safe-area-inset-right)); bottom:max(12px, env(safe-area-inset-bottom)); justify-content:space-between; }
  .pager-meter{ flex:1; width:auto; margin:0 6px; }
  .pager-btn{ width:48px; height:48px; }
  .scene{ align-items:flex-start; }
  .display{ font-size:clamp(2.2rem, 1rem + 7vw, 3.3rem); }
  .key-hint{ display:none; }
  .presented-omn{ height:26px; }
  .converge{ font-size:.72rem; }
  .cv-label--cc{ left:21%; max-width:30%; } .cv-label--zd{ right:21%; max-width:30%; }
  .converge{ margin-bottom:3.4em; }
  .cv-label--core{ left:50%; top:auto; bottom:-3.2em; transform:translateX(-50%); max-width:none; flex-direction:row; gap:.4em; white-space:nowrap; }
  /* the ecosystem becomes a list around a compact hub */
  .eco{ aspect-ratio:auto; max-width:none; }
  .eco-svg{ display:none; }
  .eco-center{ position:relative; left:auto; top:auto; transform:none; width:auto; margin:0 auto 12px; padding:12px 18px; border-radius:999px; background:var(--orange-fill); display:table; }
  .eco-nodes{ position:relative; inset:auto; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .eco-node, .eco-node[style]{ position:relative; left:auto !important; top:auto !important; transform:none; width:auto; font-size:.84rem; }
  .split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .split-mid{ grid-column:1 / -1; grid-row:1; flex-direction:row; justify-content:center; }
  .split-customer{ flex-direction:row; padding:0; }
  .split-customer svg{ width:42px; height:42px; padding:9px; }
  .split-seam{ display:none; }
  .split-lane{ padding:12px; } .split-who{ font-size:.92rem; } .split-lane li{ font-size:.86rem; }
  .caps{ grid-template-columns:minmax(0,1fr); }
  .arch-card{ grid-template-columns:minmax(0,1fr); }
  .arch-pic{ grid-row:auto; margin-bottom:12px; min-height:0; height:84px; }
  .arch-card--byo .arch-pic{ flex-direction:row; gap:0; }
  .ap-link{ width:26px; height:0; border-left:0; border-top:2px dashed var(--orange-hi); }
  .seg{ width:100%; }
  .seg-options{ border-radius:16px; display:grid; grid-template-columns:minmax(0,1fr); }
  .seg label span{ border-radius:12px; justify-content:center; }
  .lane-steps > div{ grid-template-columns:minmax(0,1fr); gap:2px; }
  .converged{ grid-template-columns:minmax(0,1fr); }
  .converged-next{ grid-column:1; }
  .layer{ grid-template-columns:minmax(0,1fr); gap:2px; margin-left:calc(var(--n) * 6px); }
  .stack{ grid-template-columns:minmax(0,1fr); }
  .stack-axis{ display:none; }
  .reach-rings{ font-size:.66rem; }
  .chip{ --d:40cqw; white-space:normal; max-width:8.4em; text-align:center; line-height:1.2; }
  .chip--in{ --d:23cqw; max-width:none; white-space:nowrap; }
  .cta-actions .btn{ width:100%; justify-content:center; text-align:center; }
}
@media (max-width: 380px){
  .hud-scene svg{ display:none; }
  .hud-scene{ padding:0 14px; }
  .eco-nodes{ grid-template-columns:minmax(0,1fr); }
  .split{ grid-template-columns:minmax(0,1fr); }
  .presented-with{ margin-left:2px; }
}

/* ===================================================================
   REDUCED MOTION: everything visible, no camera travel or loops
=================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-snap-type:none; }
  .js [data-reveal], .js .cv-label, .js .eco-node, .js .layer, .js .chip, .js .ring--outer{ opacity:1 !important; transition:none !important; }
  .js [data-reveal], .js .layer{ transform:none !important; }
  .js .eco-node, .js .chip, .js .ring--outer{ translate:none !important; scale:1 !important; }
  .js .cv-path, .js .eco-spokes path{ stroke-dashoffset:0 !important; transition:none !important; }
  .js .cv-core, .js .cv-ring, .js .cv-layer{ transform:none !important; transition:none !important; }
  .js .split .split-lane{ transform:none !important; transition:none !important; }
  .scene--hero.is-in .cv-ring, .scene--connected.is-in .eco-orbit{ animation:none; }
  .lane{ transition:none; }
  html[data-path] .scene .lane{ transform:none !important; }
  .backdrop-world{ will-change:auto; }
}