/* ============ FLUXUS. — finessed ============ */

:root{
  --paper:#F2EFE8;
  --paper-2:#E9E5DA;
  --ink:#0B0B10;
  --ink-soft:#1A1A22;
  --mute:#6F6E69;
  --rule:#0B0B10;
  --cobalt:#1E37F0;
  --cobalt-deep:#0C1FBF;
  --cobalt-tint:#DCE0FF;
  --acid:#D9FF3D;

  --maxw: 1640px;
  --pad: clamp(20px, 4vw, 64px);

  --f-display: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --f-body: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{display:block;max-width:100%}

::selection{background:var(--cobalt);color:var(--paper)}

/* ---------- shared ---------- */
.eyebrow{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mute);
}
.eyebrow.dot::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--cobalt); margin-right:10px; transform:translateY(-2px);
  vertical-align:middle;
}
.rule{height:1px;background:var(--ink);width:100%}
.rule-soft{height:1px;background:rgba(11,11,16,.14);width:100%}
.col{display:flex;flex-direction:column}

.shell{
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--pad);
  padding-right:var(--pad);
}

/* ============ NAV ============ */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--ink);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.brand{
  font-family:var(--f-display);
  font-weight:900;
  font-stretch:125%;
  font-size:22px;
  letter-spacing:-0.02em;
  line-height:1;
}
.brand .dot{color:var(--cobalt)}

.brand,
.foot-brand{
  color: var(--cobalt);
}
.brand .dot,
.foot-brand .dot{
  -webkit-text-fill-color: var(--cobalt);
  color: var(--cobalt);
}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  position:relative;
}
.nav-links a:hover{color:var(--cobalt)}
.nav-cta{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:8px 14px;
  border:1px solid var(--ink);
  background:var(--ink); color:var(--paper);
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.nav-cta:hover{ background:var(--cobalt); border-color:var(--cobalt) }

/* ============ HERO ============ */
.hero{
  position:relative;
  padding: clamp(40px, 7vw, 100px) 0 clamp(40px, 5vw, 80px);
  border-bottom:1px solid var(--ink);
  overflow:hidden;
}
.hero-meta{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px;
  margin-bottom: clamp(28px, 5vw, 64px);
}
.hero-meta-left{display:flex;gap:36px;flex-wrap:wrap}
.meta-pair{display:flex;flex-direction:column;gap:6px}
.meta-pair .k{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.meta-pair .v{font-family:var(--f-mono);font-size:12px;letter-spacing:.04em}

.hero-display{
  font-family:var(--f-display);
  font-weight:900;
  font-stretch:125%;
  letter-spacing:-0.035em;
  line-height:.86;
  font-size: clamp(54px, 12.8vw, 220px);
  text-transform:uppercase;
}
.hero-display .line{display:block; overflow:hidden; padding-bottom:.04em}
.hero-display .line-flex{display:flex; align-items:baseline; gap:.18em; flex-wrap:nowrap}
.hero-display .slot{
  display:inline-flex; align-items:center;
  vertical-align:baseline;
  height:.86em; overflow:hidden;
  position:relative;
  color:var(--cobalt);
}
.hero-display .slot .slot-track{
  display:flex; flex-direction:column;
  transition: transform .8s cubic-bezier(.7,0,.2,1);
}
.hero-display .slot .slot-item{
  height:.86em; line-height:.86;
  display:flex; align-items:center;
  white-space:nowrap;
  padding-right:.04em;
}
.hero-display .scrambleword{ color:var(--cobalt); font-feature-settings:"tnum" }
.hero-display .arrow{
  display:inline-block;
  width:.7em; height:.7em;
  margin-left:.15em;
  position:relative;
  transform:translateY(-.05em);
}
.hero-display .arrow svg{width:100%;height:100%;display:block}

.hero-foot{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-top: clamp(32px, 5vw, 64px);
}
.hero-blurb{
  max-width:520px;
  font-size:16px;
  line-height:1.4;
  color:var(--ink-soft);
}
.hero-blurb b{font-weight:600;color:var(--ink)}
.hero-cta-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn-pill{
  font-family:var(--f-mono);
  font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  padding:14px 18px;
  white-space:nowrap;
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--ink);
  background:var(--ink); color:var(--paper);
  border-radius:999px;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}
.btn-pill:hover{background:var(--cobalt); border-color:var(--cobalt)}
.btn-pill .arr{width:14px;height:14px}
.btn-ghost{
  font-family:var(--f-mono);
  font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  padding:14px 18px;
  white-space:nowrap;
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--ink);
  background:transparent; color:var(--ink);
  border-radius:999px;
}
.btn-ghost:hover{background:var(--ink); color:var(--paper)}

/* small grid lines decoration */
.hero-marks{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(11,11,16,.06) 1px, transparent 1px);
  background-size: calc(100%/12) 100%;
  mask-image: linear-gradient(to bottom, transparent 0, black 25%, black 75%, transparent 100%);
  opacity:.7;
}

/* ============ MISSION ============ */
.mission{
  padding: clamp(56px, 8vw, 132px) 0;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
}
.mission-inner{
  display:grid;
  grid-template-columns: minmax(0, 1100px);
}
.mission .eyebrow{ margin-bottom: clamp(24px, 3vw, 44px); }
.mission-statement{
  font-family:var(--f-display);
  font-weight:600; font-stretch:100%;
  font-size: clamp(28px, 4.4vw, 66px);
  line-height:1.04;
  letter-spacing:-0.022em;
  color:var(--ink-soft);
  margin:0;
  text-wrap:balance;
}
.mission-statement b{ font-weight:700; color:var(--cobalt); }
.mission-cta{ margin-top: clamp(32px, 4vw, 56px); }

/* ============ KINETIC HERO VARIANTS ============ */
.hero[data-variant="slot"] .scrambleword,
.hero[data-variant="slot"] .static-word{ display:none }
.hero[data-variant="slot"] .slot{ display:inline-flex }

.hero[data-variant="scramble"] .slot,
.hero[data-variant="scramble"] .static-word{ display:none }
.hero[data-variant="scramble"] .scrambleword{ display:inline-block }

.hero[data-variant="static"] .slot,
.hero[data-variant="static"] .scrambleword{ display:none }
.hero[data-variant="static"] .static-word{ display:inline-block; color:var(--cobalt) }

/* ============ OFFERINGS TICKER ============ */
.offerings{
  position:relative;
  padding: clamp(36px, 5vw, 64px) 0 clamp(40px, 5vw, 72px);
  border-bottom:1px solid var(--ink);
  overflow:hidden;
}
.offerings .section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-bottom: 32px;
}
.offerings .section-head h3{
  font-family:var(--f-display);
  font-weight:800;
  font-stretch:110%;
  font-size: clamp(28px, 3.4vw, 48px);
  letter-spacing:-0.02em;
  line-height:1;
  margin:0;
  text-transform:uppercase;
}
.offer-note{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.04em;
  color:var(--mute); margin:0; max-width:24ch; text-align:right;
}

/* the moving rail */
.offer-ticker{
  position:relative; width:100%; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.offer-track{
  --gap:24px;
  display:flex; gap:var(--gap); width:max-content;
  padding: 14px var(--pad) 34px;
  animation: offerScroll 72s linear infinite;
}
.offer-ticker:hover .offer-track{ animation-play-state: paused; }

/* the card */
.offer-card{
  flex:0 0 auto;
  width: clamp(282px, 26vw, 352px);
  display:flex; flex-direction:column;
  border:1px solid var(--ink);
  border-radius:18px;
  background:var(--paper);
  box-shadow: 8px 8px 0 0 var(--ink);
  overflow:hidden;
  transition: transform .4s cubic-bezier(.7,0,.2,1), box-shadow .3s ease;
}
.offer-card:hover{ transform: translateY(-6px); box-shadow: 12px 12px 0 0 var(--cobalt); }
.offer-window{
  position:relative;
  aspect-ratio: 16 / 11;
  overflow:hidden;
  border-bottom:1px solid var(--ink);
}
.offer-window .meta-strip{
  position:absolute; left:14px; right:14px; top:13px; z-index:4;
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase;
  mix-blend-mode: difference; color:#fff;
}
.offer-foot{
  padding:15px 17px 17px;
  display:flex; flex-direction:column; gap:6px;
}
.offer-title{
  font-family:var(--f-display); font-weight:800; font-stretch:110%;
  font-size:19px; letter-spacing:-.01em; text-transform:uppercase;
  line-height:1.05;
}
.offer-desc{
  font-family:var(--f-body); font-size:13px; line-height:1.42;
  color:var(--mute); text-wrap:pretty;
}
@keyframes offerScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(calc(-50% - var(--gap) / 2)); }
}

/* ===== subject-matter glyphs (one per offering) ===== */
.offer-glyph, .glyph-svg{ position:absolute; inset:0; width:100%; height:100%; }
.glyph-bg-agent{ background: radial-gradient(120% 95% at 50% 38%, #16172f, #0B0B10 72%); }
.glyph-bg-spatial{ background: linear-gradient(158deg, #142bd6 0%, #0a0a18 82%); }
.glyph-bg-zero{ background: var(--paper-2); }
.glyph-bg-ambient{ background: radial-gradient(120% 100% at 50% 50%, #16172f, #0B0B10 72%); }
.glyph-bg-voice{ background: radial-gradient(120% 100% at 50% 100%, #15162e, #0B0B10 70%); }
.glyph-bg-system{ background: var(--paper-2); }
.glyph-bg-research{ background: radial-gradient(120% 95% at 62% 30%, #15162c, #0B0B10 72%); }
.glyph-bg-facil{ background: var(--paper-2); }
.glyph-bg-convo{ background: linear-gradient(158deg, #1E37F0, #0C1FBF 92%); }
.glyph-bg-proto{ background: var(--paper); }

.g-pulse{ transform-box: fill-box; transform-origin:center; animation: gPulse 2.2s ease-in-out infinite; }
@keyframes gPulse{ 0%,100%{ transform:scale(.8); opacity:.7 } 50%{ transform:scale(1.14); opacity:1 } }

/* voice — equaliser */
.glyph-eq{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; gap:6px; padding:0 22px 24%; }
.glyph-eq span{ width:7px; height:64%; border-radius:4px; background:linear-gradient(180deg,#D9FF3D,#1E37F0); transform-origin:bottom; animation: eqBar 1s ease-in-out infinite alternate; }
@keyframes eqBar{ from{ transform:scaleY(.16) } to{ transform:scaleY(1) } }

/* spatial — floating depth planes */
.glyph-spatial{ position:absolute; inset:0; perspective:720px; }
.glyph-spatial .plane{
  position:absolute; left:50%; top:50%; width:44%; aspect-ratio:1;
  margin:-22% 0 0 -22%; border:1.5px solid rgba(200,208,255,.6); border-radius:8px;
  transform: rotateX(58deg) rotateZ(45deg) translateZ(var(--z));
  animation: planeBob 5s ease-in-out infinite;
}
.glyph-spatial .plane:nth-child(1){ --z:-46px; border-color:rgba(217,255,61,.85) }
.glyph-spatial .plane:nth-child(2){ --z:-15px; animation-delay:.4s }
.glyph-spatial .plane:nth-child(3){ --z:15px; animation-delay:.8s }
.glyph-spatial .plane:nth-child(4){ --z:46px; border-color:rgba(217,255,61,.45); animation-delay:1.2s }
@keyframes planeBob{ 0%,100%{ transform: rotateX(58deg) rotateZ(45deg) translateZ(var(--z)) } 50%{ transform: rotateX(58deg) rotateZ(45deg) translateZ(calc(var(--z) + 14px)) } }

/* zero UI — touchless gesture over a vanishing screen */
.glyph-zero{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.glyph-zero .ghost{ position:absolute; width:54%; height:58%; border:1.5px dashed rgba(11,11,16,.32); border-radius:12px; }
.glyph-zero .swipe{ position:absolute; display:flex; align-items:center; gap:9px; animation: swipeMove 2.8s ease-in-out infinite; }
.glyph-zero .swipe i{ width:11px; aspect-ratio:1; border-radius:50%; background:var(--cobalt); }
.glyph-zero .swipe i:nth-child(2){ width:8px; opacity:.5 }
.glyph-zero .swipe i:nth-child(3){ width:6px; opacity:.26 }
@keyframes swipeMove{ 0%{ transform:translateX(-34px) } 50%{ transform:translateX(34px) } 100%{ transform:translateX(-34px) } }

/* ambient computing — signal rippling through the room */
.glyph-ambient{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.glyph-ambient .ring{ position:absolute; width:30px; aspect-ratio:1; border:1.5px solid rgba(138,154,255,.7); border-radius:50%; animation: ripple 3.2s ease-out infinite; }
.glyph-ambient .ring:nth-child(2){ animation-delay:.8s }
.glyph-ambient .ring:nth-child(3){ animation-delay:1.6s }
.glyph-ambient .ring:nth-child(4){ animation-delay:2.4s }
.glyph-ambient .core{ width:12px; aspect-ratio:1; border-radius:50%; background:var(--acid); box-shadow:0 0 12px rgba(217,255,61,.6); }
@keyframes ripple{ 0%{ transform:scale(.4); opacity:.9 } 100%{ transform:scale(6); opacity:0 } }

/* design systems — token grid */
.glyph-grid{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:1fr; gap:7px; padding:20px; }
.glyph-grid span{ border-radius:5px; background:var(--cobalt-tint); border:1px solid rgba(30,55,240,.22); animation: tokPulse 3.2s ease-in-out infinite; }
.glyph-grid span:nth-child(3n){ background:var(--cobalt); border-color:transparent }
.glyph-grid span:nth-child(5n){ background:var(--ink); border-color:transparent }
.glyph-grid span:nth-child(7n){ background:var(--acid); border-color:transparent }
.glyph-grid span:nth-child(2n){ animation-delay:.5s }
.glyph-grid span:nth-child(3n){ animation-delay:1s }
.glyph-grid span:nth-child(4n){ animation-delay:1.5s }
@keyframes tokPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.5 } }

/* facilitation — sprint board */
.glyph-board{ position:absolute; inset:0; display:flex; gap:10px; padding:22px 18px; align-items:flex-start; justify-content:center; }
.glyph-board .bcol{ flex:1; display:flex; flex-direction:column; gap:8px; }
.glyph-board .note{ height:22px; border-radius:4px; background:var(--cobalt-tint); border:1px solid rgba(11,11,16,.22); box-shadow:1.5px 1.5px 0 rgba(11,11,16,.18); }
.glyph-board .note.a{ background:var(--acid); animation: noteNudge 4s ease-in-out infinite; }
.glyph-board .note.b{ background:var(--cobalt); }
@keyframes noteNudge{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(5px) } }

/* conversational — message stream */
.glyph-convo{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:9px; padding:0 22px; }
.glyph-convo .bubble{ height:18px; border-radius:10px; animation: bubbleIn 4.5s ease-in-out infinite; }
.glyph-convo .bubble.l{ align-self:flex-start; width:60%; background:rgba(255,255,255,.92); border-bottom-left-radius:3px; }
.glyph-convo .bubble.r{ align-self:flex-end; width:52%; background:var(--acid); border-bottom-right-radius:3px; }
.glyph-convo .bubble.short{ width:40%; }
.glyph-convo .bubble:nth-child(1){ animation-delay:0s }
.glyph-convo .bubble:nth-child(2){ animation-delay:.5s }
.glyph-convo .bubble:nth-child(3){ animation-delay:1s }
.glyph-convo .bubble:nth-child(4){ animation-delay:1.5s }
@keyframes bubbleIn{ 0%,100%{ opacity:.82; transform:translateY(0) } 50%{ opacity:1; transform:translateY(-2px) } }

/* prototyping — wireframe + cursor */
.glyph-proto{ position:absolute; inset:0; display:flex; flex-direction:column; gap:9px; padding:22px; }
.glyph-proto .wb{ background:#fff; border:1.5px solid var(--ink); border-radius:5px; }
.glyph-proto .wb.bar{ height:13px; width:54%; }
.glyph-proto .wb.img{ flex:1; background: repeating-linear-gradient(135deg, #E9E5DA 0 6px, #fff 6px 12px); }
.glyph-proto .wb.line{ height:8px; width:82%; }
.glyph-proto .wb.line.s{ width:58%; }
.glyph-proto .wb.btn{ height:16px; width:34%; background:var(--cobalt); border-color:var(--cobalt); }
.glyph-proto .proto-cursor{ position:absolute; width:22px; height:22px; right:24%; bottom:20%; animation: cursorMove 3.6s ease-in-out infinite; filter: drop-shadow(1px 1px 0 rgba(0,0,0,.3)); }
@keyframes cursorMove{ 0%,100%{ transform: translate(0,0) } 42%{ transform: translate(-10px,-12px) } 50%{ transform: translate(-10px,-12px) scale(.88) } 58%{ transform: translate(-10px,-12px) } }

@media (prefers-reduced-motion: reduce){
  .offer-track, .g-pulse, .glyph-eq span, .glyph-spatial .plane,
  .glyph-grid span, .glyph-board .note.a, .glyph-convo .bubble, .glyph-proto .proto-cursor,
  .glyph-zero .swipe, .glyph-ambient .ring{
    animation:none !important;
  }
  .glyph-convo .bubble{ opacity:1 !important; }
  .glyph-eq span{ transform:scaleY(.7); }
}

/* ============ CAPABILITY MARQUEE (refined) ============ */
.cap-marquee{
  border-bottom:1px solid var(--ink);
  background:var(--paper);
  overflow:hidden;
  display:none;
}
.cap-marquee[data-on="true"]{display:block}
.cap-marquee-inner{
  display:flex; align-items:center;
  height:48px;
  white-space:nowrap;
  animation: marqueeLeft 36s linear infinite;
}
.cap-marquee-item{
  display:inline-flex; align-items:center; gap:18px;
  padding-right:32px;
}
.cap-marquee-item .word{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.cap-marquee-item .sep{
  width:6px; height:6px; border-radius:50%;
  background:var(--cobalt);
}
@keyframes marqueeLeft{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes marqueeRight{ from{transform:translateX(-50%)} to{transform:translateX(0)} }

/* ============ WORK WITH US ============ */
.work-with{
  padding: clamp(60px, 7vw, 110px) 0;
  border-bottom:1px solid var(--ink);
}
.work-with-inner{
  display:grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(40px, 6vw, 90px);
  align-items:start;
}
.work-with h2{
  font-family:var(--f-display);
  font-weight:800; font-stretch:120%;
  font-size: clamp(40px, 5.6vw, 92px);
  line-height:.92;
  letter-spacing:-0.03em;
  text-transform:uppercase;
  margin:0;
}
.ww-lede{
  font-size:15px; line-height:1.5; color:var(--ink-soft);
  max-width:34ch; margin:22px 0 0; text-wrap:pretty;
}

/* ---- inquiry form ---- */
.ww-form{ display:flex; flex-direction:column; gap:28px; }
.ww-label{
  display:block;
  font-family:var(--f-mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mute); margin-bottom:10px;
}

.ww-engagement{ border:0; margin:0; padding:0; }
.ww-engagement-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ww-opt{
  position:relative;
  display:flex; align-items:flex-start; gap:14px;
  border:1px solid var(--ink);
  padding:18px;
  cursor:pointer;
  background:var(--paper);
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.ww-opt input{ position:absolute; opacity:0; pointer-events:none; }
.ww-opt:hover{ background:var(--paper-2); }
.ww-opt.on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.ww-opt-num{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em;
  color:var(--mute); padding-top:2px;
}
.ww-opt.on .ww-opt-num{ color:var(--cobalt-tint); }
.ww-opt-body{ display:flex; flex-direction:column; gap:5px; }
.ww-opt-label{
  font-family:var(--f-display); font-weight:700; font-stretch:112%;
  font-size:16px; line-height:1.05; letter-spacing:-0.01em;
}
.ww-opt-hint{ font-size:12.5px; color:var(--mute); line-height:1.3; }
.ww-opt.on .ww-opt-hint{ color:var(--paper-2); }

.ww-fields{ display:grid; grid-template-columns:1fr 1fr; gap:20px 24px; }
.ww-field{ display:flex; flex-direction:column; }
.ww-field-wide{ grid-column:1 / -1; }
.ww-form input,
.ww-form textarea{
  font-family:var(--f-body);
  font-size:15px; color:var(--ink);
  background:transparent;
  border:0; border-bottom:1px solid rgba(11,11,16,.28);
  padding:10px 0;
  width:100%;
  border-radius:0;
  transition:border-color .18s ease;
}
.ww-form textarea{ resize:vertical; min-height:48px; line-height:1.5; }
.ww-form input::placeholder,
.ww-form textarea::placeholder{ color:var(--mute); opacity:1; }
.ww-form input:focus,
.ww-form textarea:focus{ outline:none; border-bottom-color:var(--cobalt); }

.ww-actions{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.ww-or{ font-size:13px; color:var(--mute); }
.ww-or a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.ww-or a:hover{ color:var(--cobalt); }

.ww-sent{ gap:16px; }
.ww-sent .num{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--cobalt);
}
.ww-sent h3{
  font-family:var(--f-display); font-weight:800; font-stretch:115%;
  font-size:clamp(24px,2.4vw,34px); line-height:1; letter-spacing:-0.01em;
  text-transform:uppercase; margin:0;
}
.ww-sent p{ font-size:15px; line-height:1.5; color:var(--ink-soft); max-width:36ch; margin:0; }
.ww-sent .btn-pill{ align-self:flex-start; }

/* ============ LOGO MARQUEES ============ */
.logos{
  background:var(--cobalt);
  color:var(--paper);
  padding: clamp(60px, 7vw, 100px) 0;
  border-bottom:1px solid var(--ink);
  position:relative;
  overflow:hidden;
}
.logos::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(255,255,255,.18), transparent 70%),
    radial-gradient(50% 50% at 100% 100%, rgba(11,11,16,.25), transparent 70%);
  pointer-events:none;
}
.logos-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-bottom: clamp(36px, 5vw, 64px);
  position:relative;
}
.logos-head h2{
  font-family:var(--f-display);
  font-weight:900; font-stretch:130%;
  font-size: clamp(40px, 6vw, 110px);
  line-height:.9;
  letter-spacing:-0.03em;
  text-transform:uppercase;
  margin:0;
}
.logos-head .eyebrow{color:rgba(242,239,232,.6)}
.logos-head .eyebrow.dot::before{background:var(--paper)}
.logos-head p{
  max-width:380px; font-size:15px; line-height:1.45;
  color:rgba(242,239,232,.78);
}

.logo-row-wrap{
  overflow:hidden;
  margin: 0 calc(-1 * var(--pad));
  border-top:1px solid rgba(242,239,232,.18);
  border-bottom:1px solid rgba(242,239,232,.18);
}
.logo-row-wrap + .logo-row-wrap{ border-top:0 }
.logo-row{
  display:flex; align-items:center;
  white-space:nowrap;
  height: clamp(90px, 8vw, 130px);
}
.logo-row.left{ animation: marqueeLeft 50s linear infinite }
.logo-row.right{ animation: marqueeRight 60s linear infinite }
.logo-row.left2{ animation: marqueeLeft 70s linear infinite }
.logo-tile{
  flex:0 0 auto;
  padding: 0 clamp(28px, 4vw, 64px);
  display:inline-flex; align-items:center;
  font-family:var(--f-display);
  font-weight:800; font-stretch:115%;
  font-size: clamp(20px, 1.8vw, 28px);
  letter-spacing:-0.01em;
  text-transform:uppercase;
  color:var(--paper);
  position:relative;
}
.logo-tile.italic{font-style:italic; font-weight:600; text-transform:none; letter-spacing:-.02em}
.logo-tile.thin{font-weight:400; font-stretch:90%; text-transform:none; letter-spacing:.04em}
.logo-tile.mono{font-family:var(--f-mono); font-weight:500; font-size:.7em; letter-spacing:.18em}
.logo-tile.serif{font-family:'Times New Roman', serif; font-weight:500; text-transform:none; letter-spacing:-.01em}
.logo-tile + .logo-tile::before{
  content:""; position:absolute; left:0; top:50%;
  width:6px; height:6px; border-radius:50%;
  background: rgba(242,239,232,.4); transform:translateY(-50%);
}

/* ============ SELECTED WORK ============ */
.selected{
  padding: clamp(60px, 7vw, 110px) 0;
  border-bottom:1px solid var(--ink);
}
.selected-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-bottom: clamp(40px, 5vw, 64px);
}
.selected-head h2{
  font-family:var(--f-display);
  font-weight:900; font-stretch:130%;
  font-size: clamp(40px, 6.4vw, 120px);
  line-height:.88;
  letter-spacing:-0.035em;
  text-transform:uppercase;
  margin:0;
}
.selected-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(20px, 3vw, 40px) clamp(20px, 2.4vw, 28px);
}
.case{
  position:relative;
  display:flex; flex-direction:column;
}
.case.span-7{ grid-column: span 7 }
.case.span-5{ grid-column: span 5 }
.case.span-6{ grid-column: span 6 }
.case.span-12{ grid-column: span 12 }
.case .frame{
  position:relative;
  width:100%;
  aspect-ratio: 16/10;
  background:var(--paper-2);
  border:1px solid var(--ink);
  overflow:hidden;
  transition: transform .4s ease;
}
.case.tall .frame{ aspect-ratio: 4/5 }
.case.wide .frame{ aspect-ratio: 21/9 }
.case:hover .frame{ transform: translate(-4px,-4px) }
.case:hover .frame-shadow{ transform: translate(4px,4px) }
.case .frame-wrap{
  position:relative;
}
.case .frame-shadow{
  position:absolute; inset:0;
  background:var(--ink);
  z-index:-1;
  transition: transform .4s ease;
}
.case .case-foot{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; padding-top:16px;
  border-top:1px solid var(--ink);
  margin-top:16px;
}
.case h3{
  font-family:var(--f-display);
  font-weight:800; font-stretch:115%;
  font-size: clamp(22px, 2.4vw, 38px);
  line-height:1;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  margin:0;
}
.case .case-meta{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--mute);
  display:flex; gap:14px; flex-wrap:wrap;
}
.case .case-meta span{position:relative}
.case .case-meta span + span::before{
  content:""; position:absolute; left:-9px; top:50%;
  width:3px; height:3px; border-radius:50%;
  background:var(--mute); transform:translateY(-50%);
}
.case .case-link{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px;
  white-space:nowrap;
}
.case:hover .case-link{ color:var(--cobalt) }
.case-tag{
  position:absolute; top:14px; left:14px; z-index:2;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase;
  background:var(--paper); color:var(--ink);
  padding:6px 10px;
  border:1px solid var(--ink);
}

/* case backdrop variants — animated abstract */
.case-bg{position:absolute; inset:0}
.cb-1{ background: linear-gradient(135deg, #1E37F0, #6E80FF); }
.cb-1::before{
  content:""; position:absolute; inset:-30%;
  background:
    conic-gradient(from 90deg at 50% 50%, transparent 0deg, rgba(255,255,255,.3) 30deg, transparent 60deg, rgba(255,255,255,.18) 120deg, transparent 180deg);
  animation: spinSlow 22s linear infinite;
}
.cb-2{ background:#0B0B10 }
.cb-2::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(40% 60% at 30% 60%, var(--acid), transparent 70%),
              radial-gradient(50% 60% at 70% 40%, var(--cobalt), transparent 70%);
  filter: blur(20px);
  animation: specShift 16s ease-in-out infinite alternate;
}
.cb-3{ background:var(--paper) }
.cb-3::before{
  content:""; position:absolute; inset:5% 8%;
  border:1px solid var(--ink);
  background:
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(11,11,16,.06) 18px 19px),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(11,11,16,.06) 18px 19px);
}
.cb-3::after{
  content:""; position:absolute; left:14%; top:60%;
  width:32%; height:18%; background:var(--cobalt);
  animation: caseSlide 7s ease-in-out infinite alternate;
}
.cb-4{ background:#1E37F0 }
.cb-4::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(135deg, transparent 0 28px, rgba(255,255,255,.18) 28px 30px);
  animation: waveSlide 14s linear infinite;
}
.cb-4::after{
  content:""; position:absolute; left:8%; top:18%;
  width:36%; height:64%;
  background:var(--paper);
  border:1px solid var(--ink);
  box-shadow: 12px 12px 0 0 var(--ink);
}

@keyframes spinSlow{ to{ transform:rotate(360deg) } }
@keyframes caseSlide{ from{transform:translateX(0)} to{transform:translateX(40%)} }

/* ============ CAPABILITIES ============ */
.caps{
  background:var(--ink);
  color:var(--paper);
  padding: clamp(60px, 8vw, 120px) 0;
  border-bottom:1px solid var(--ink);
  position:relative;
}
.caps-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.caps-head h2{
  font-family:var(--f-display);
  font-weight:900; font-stretch:130%;
  font-size: clamp(40px, 6.4vw, 120px);
  line-height:.88;
  letter-spacing:-0.035em;
  text-transform:uppercase;
  margin:0;
}
.caps-head p{
  max-width:380px;
  font-size:15px; line-height:1.45;
  color:rgba(242,239,232,.75);
}
.caps-head .eyebrow{color:rgba(242,239,232,.6)}
.caps-head .eyebrow.dot::before{background:var(--cobalt)}

/* layout: cards */
.caps[data-layout="cards"] .caps-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(242,239,232,.2);
  border:1px solid rgba(242,239,232,.2);
}
.caps[data-layout="cards"] .cap{
  background:var(--ink);
  padding: clamp(28px, 3vw, 44px);
  display:flex; flex-direction:column;
  min-height: clamp(320px, 30vw, 460px);
  transition: background .2s ease;
}
.caps[data-layout="cards"] .cap:hover{ background:#15151E }
.caps[data-layout="cards"] .cap:hover .cap-num{ color:var(--cobalt) }
.cap{ position:relative; }
.cap-num{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.16em;
  color:rgba(242,239,232,.5); margin-bottom:24px;
}
.cap h3{
  font-family:var(--f-display);
  font-weight:800; font-stretch:120%;
  font-size: clamp(28px, 3.4vw, 56px);
  line-height:.92; letter-spacing:-0.025em;
  text-transform:uppercase;
  margin:0 0 16px;
}
.cap-desc{
  font-size:14.5px; line-height:1.55;
  color:rgba(242,239,232,.75);
  max-width:42ch; margin:0 0 24px;
}
.cap-tags{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-bottom:24px;
}
.cap-tags span{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase;
  padding:5px 10px;
  border:1px solid rgba(242,239,232,.25);
  border-radius:999px;
  color:rgba(242,239,232,.85);
}
.cap-examples{
  margin-top:auto;
  display:flex; gap:10px;
  padding-top:24px;
  border-top:1px solid rgba(242,239,232,.18);
}
.cap-example{
  flex:1 1 0;
  aspect-ratio: 4/5;
  position:relative;
  overflow:hidden;
  background: rgba(242,239,232,.06);
  border:1px solid rgba(242,239,232,.18);
  border-radius:10px;
  transition: border-color .2s ease, background .2s ease;
}
.cap-example.cap-feature{
  aspect-ratio: auto;
  flex: 1 1 0;
  min-height: 72px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding: 12px;
  border-radius:10px;
}
.cap-example.cap-feature .case-bg{
  position:absolute; inset:0; opacity:.22; border-radius:10px;
}
.cap-example.cap-feature:hover{ border-color:rgba(242,239,232,.45); background:rgba(242,239,232,.10) }
.cap-example .ce-label{
  position:relative;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff; z-index:1;
  line-height:1.3;
}
.cap-example .ce-arrow{
  position:relative; z-index:1;
  font-size:11px; color:rgba(242,239,232,.4);
  align-self:flex-end;
  transition: color .2s ease;
}
.cap-example.cap-feature:hover .ce-arrow{ color:rgba(242,239,232,.8) }

/* layout: accordion */
.caps[data-layout="accordion"] .caps-grid{
  display:flex; flex-direction:column;
}
.caps[data-layout="accordion"] .cap{
  border-top:1px solid rgba(242,239,232,.2);
  padding: 22px 0;
  cursor:pointer;
}
.caps[data-layout="accordion"] .cap:last-child{ border-bottom:1px solid rgba(242,239,232,.2) }
.caps[data-layout="accordion"] .cap-row{
  display:flex; align-items:center; gap:24px; justify-content:space-between;
}
.caps[data-layout="accordion"] .cap-num{ margin:0; min-width:60px }
.caps[data-layout="accordion"] .cap h3{
  font-size: clamp(28px, 3.4vw, 56px);
  margin:0; flex:1;
}
.caps[data-layout="accordion"] .cap-toggle{
  width:48px; height:48px; border-radius:50%;
  border:1px solid rgba(242,239,232,.4);
  display:inline-flex; align-items:center; justify-content:center;
  transition: all .2s ease;
}
.caps[data-layout="accordion"] .cap.open .cap-toggle{ background:var(--cobalt); border-color:var(--cobalt) }
.caps[data-layout="accordion"] .cap-body{
  max-height:0; overflow:hidden;
  transition: max-height .4s ease;
}
.caps[data-layout="accordion"] .cap.open .cap-body{ max-height: 480px }
.caps[data-layout="accordion"] .cap-body-inner{
  padding-top:20px;
  display:grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items:start;
}

/* layout: sticky */
.caps[data-layout="sticky"] .caps-grid{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items:start;
}
.caps[data-layout="sticky"] .cap-list{
  position:sticky; top:80px;
  display:flex; flex-direction:column; gap:14px;
}
.caps[data-layout="sticky"] .cap-list-item{
  font-family:var(--f-display);
  font-weight:700; font-stretch:115%;
  font-size:24px; text-transform:uppercase;
  letter-spacing:-0.01em;
  color: rgba(242,239,232,.4);
  cursor:pointer; transition: color .2s ease;
  display:flex; align-items:baseline; gap:12px;
}
.caps[data-layout="sticky"] .cap-list-item.active{ color:var(--paper) }
.caps[data-layout="sticky"] .cap-list-item .n{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.1em;
  color:rgba(242,239,232,.4);
}
.caps[data-layout="sticky"] .cap-list-item.active .n{ color:var(--cobalt) }
.caps[data-layout="sticky"] .cap-detail{
  display:flex; flex-direction:column; gap:32px;
}
.caps[data-layout="sticky"] .cap{ padding: 0 }

/* ============ FOOTER ============ */
.foot{
  padding: clamp(60px, 7vw, 100px) 0 32px;
  background:var(--paper);
}
.foot-top{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items:flex-start;
  padding-bottom: clamp(40px, 5vw, 64px);
  border-bottom:1px solid var(--ink);
}
.foot-brand{
  font-family:var(--f-display);
  font-weight:900; font-stretch:130%;
  font-size: clamp(60px, 10vw, 180px);
  line-height:.85; letter-spacing:-0.04em;
  text-transform:uppercase;
}
.foot-brand .dot{color:var(--cobalt)}
.foot-col h4{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mute);
  margin:0 0 14px; font-weight:500;
}
.foot-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.foot-col li{font-size:15px}
.foot-col a:hover{color:var(--cobalt)}
.foot-col .big{
  font-family:var(--f-display); font-weight:700; font-stretch:115%;
  font-size: clamp(22px, 1.8vw, 28px); letter-spacing:-0.01em;
  text-transform:uppercase; margin-bottom:8px;
}
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding-top:24px; flex-wrap:wrap;
}
.foot-bottom .small{ font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; color:var(--mute) }

/* ============ REVEALS ============ */
/* JS adds `.pre` before observing — so if JS fails, content is visible by default.
   When the element enters, JS REMOVES `.pre` (and adds `.in` for animation hooks).
   The end state is just `.reveal` which has no opacity/transform — so even if the
   CSS transition is throttled or frozen, the final rendered state is still visible. */
.reveal{ transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.pre{ opacity:0; transform: translateY(28px); }
.reveal.r2{ transition-delay:.08s }
.reveal.r3{ transition-delay:.16s }
.reveal.r4{ transition-delay:.24s }

/* ============ RESPONSIVE ============ */
@media (max-width: 980px){
  .work-with-inner{grid-template-columns:1fr}
  .ww-engagement-grid{grid-template-columns:1fr}
  .ww-fields{grid-template-columns:1fr}
  .case.span-7,.case.span-5,.case.span-6{grid-column: span 12}
  .caps[data-layout="cards"] .caps-grid{grid-template-columns: 1fr}
  .caps[data-layout="sticky"] .caps-grid{grid-template-columns: 1fr}
  .caps[data-layout="sticky"] .cap-list{position:static; flex-direction:row; flex-wrap:wrap}
  /* Stack heading + supporting copy on tablet/mobile so the paragraph drops
     under the title instead of squeezing alongside it. */
  .caps-head,
  .logos-head,
  .selected-head{
    flex-direction:column;
    align-items:flex-start;
    gap: clamp(20px, 3vw, 32px);
  }
  .caps-head p,
  .logos-head p{
    max-width:none;
  }
  .foot-top{grid-template-columns: 1fr 1fr}
  .nav-links{gap:18px}
  .nav-links a:not(.nav-cta){display:none}
}
@media (max-width: 640px){
  .hero-meta{
    /* Horizontal slide on mobile — gives all four meta pairs breathing room
       without stacking them into a tall column. */
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    gap:28px;
    /* Bleed past the shell padding so users see the scrollable edge */
    margin: 0 calc(-1 * var(--pad)) clamp(28px, 5vw, 64px);
    padding: 0 var(--pad) 12px;
    scrollbar-width:none;
  }
  .hero-meta::-webkit-scrollbar{display:none}
  .hero-meta-left{
    display:contents;
  }
  .hero-meta .meta-pair{
    flex: 0 0 auto;
    scroll-snap-align:start;
    min-width: 160px;
    text-align:left !important;
  }
  .hero-foot{flex-direction:column;align-items:flex-start}
  .foot-top{grid-template-columns: 1fr}
  /* Offerings: narrower cards on mobile, smaller shadow */
  .offer-card{
    width: clamp(220px, 72vw, 300px);
    box-shadow: 5px 5px 0 0 var(--ink);
  }
  .offerings .section-head{ flex-direction:column; align-items:flex-start; gap:14px; }
  .offer-note{ text-align:left; }
}