@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  --ddb-yellow: #FBD10D;
  --ddb-green: #BAE0C2;
  --ddb-red: #EE3E40;
  --ddb-blue: #99BAC2;
  --ddb-black: #241F21;
  --ddb-gray: #CCCECE;
  --ddb-off-white: #F4F4F3;
  --white: #FFFFFF;

  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;
  --space-3xl: 144px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast: 200ms;
  --dur-med: 400ms;
  --dur-slow: 700ms;

  --container: 1440px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--white);
  color: var(--ddb-black);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

@media (max-width: 640px) {
  .container { padding: 0 var(--space-sm); }
}

h1, h2, h3, h4, p {
  margin: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ddb-black);
}

.eyebrow::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--ddb-black);
  display: inline-block;
}

.section {
  padding: var(--space-3xl) 0;
}

@media (max-width: 900px) {
  .section { padding: var(--space-2xl) 0; }
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.section-head h2 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.section-head p {
  max-width: 360px;
  color: #55504f;
  font-size: 1.05rem;
}

@media (max-width: 760px) {
  .section-head { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
}

/* ---------- Logo (official DDB mark) ---------- */

.logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.logo-img {
  height: 34px;
  width: auto;
  display: block;
}

/* Default: light (white-knockout) logo for dark backgrounds. */
.logo-img--dark { display: none; }
.logo-img--light { display: block; }

.d-glyph {
  display: block;
}

.d-glyph .d-top,
.d-glyph .d-bottom {
  border-radius: 0 999px 999px 0;
}

.d-glyph .d-top { background: var(--ddb-yellow); }
.d-glyph .d-bottom {
  background: var(--ddb-black);
  color: var(--white);
  font-weight: 700;
  display: flex;
  align-items: center;
  padding-left: 12%;
  letter-spacing: -0.02em;
}

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  transition: background var(--dur-med) var(--ease-out), padding var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}

.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 14px 0;
  box-shadow: 0 1px 0 rgba(36, 31, 33, 0.08);
}

/* Scrolled nav sits on a light background -> show the dark logo. */
.nav.is-scrolled .logo-img--light { display: none; }
.nav.is-scrolled .logo-img--dark { display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--white);
  position: relative;
  padding-bottom: 4px;
  transition: color var(--dur-fast) var(--ease-out);
}

.nav.is-scrolled .nav-links a { color: var(--ddb-black); }

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--ddb-yellow);
  transition: width var(--dur-med) var(--ease-out);
}

.nav-links a:hover::after,
.nav-links a.is-active::after {
  width: 100%;
}

/* ---------- Language toggle (segmented EN / AR pill) ---------- */
.lang-switch {
  position: relative; width: 88px; height: 38px; flex: none;
  border-radius: 19px; padding: 0; cursor: pointer; direction: ltr;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  transition: background var(--dur-med) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.lang-switch:hover { border-color: rgba(255, 255, 255, 0.5); }
.lang-switch .lang-thumb {
  position: absolute; top: 2.5px; left: 2.5px; width: 40px; height: 30px;
  border-radius: 15px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
  transition: transform 280ms var(--ease-out), background var(--dur-med) var(--ease-out);
}
.lang-switch.is-ar .lang-thumb { transform: translateX(43px); }
.lang-switch .lang-opt {
  position: absolute; top: 0; height: 38px; width: 40px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; line-height: 1;
  z-index: 1; pointer-events: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.lang-switch .lang-opt--en { left: 2.5px; color: #241f21; }
.lang-switch .lang-opt--ar { left: 45.5px; color: rgba(255, 255, 255, 0.55); }
.lang-switch.is-ar .lang-opt--en { color: rgba(255, 255, 255, 0.55); }
.lang-switch.is-ar .lang-opt--ar { color: #241f21; }
/* light (scrolled) nav — dark thumb, light active label */
.nav.is-scrolled .lang-switch { background: rgba(36, 31, 33, 0.05); border-color: rgba(36, 31, 33, 0.18); }
.nav.is-scrolled .lang-switch:hover { border-color: rgba(36, 31, 33, 0.35); }
.nav.is-scrolled .lang-switch .lang-thumb { background: #241f21; box-shadow: 0 2px 5px rgba(36, 31, 33, 0.22); }
.nav.is-scrolled .lang-switch .lang-opt--en { color: #fff; }
.nav.is-scrolled .lang-switch .lang-opt--ar { color: rgba(36, 31, 33, 0.5); }
.nav.is-scrolled .lang-switch.is-ar .lang-opt--en { color: rgba(36, 31, 33, 0.5); }
.nav.is-scrolled .lang-switch.is-ar .lang-opt--ar { color: #fff; }
@media (prefers-reduced-motion: reduce) { .lang-switch .lang-thumb { transition: none; } }

.nav-cta {
  border: 1.5px solid currentColor;
  border-radius: 999px;
  padding: 10px 22px !important;
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 32px;
  height: 22px;
  position: relative;
  z-index: 1100;
}

.nav-toggle span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-fast) var(--ease-out), top var(--dur-med) var(--ease-out);
}

.nav-toggle span:nth-child(1) { top: 0; }
.nav-toggle span:nth-child(2) { top: 10px; }
.nav-toggle span:nth-child(3) { top: 20px; }

.nav-toggle.is-open span:nth-child(1) { top: 10px; transform: rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { top: 10px; transform: rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: block; color: var(--white); }
  .nav.is-scrolled .nav-toggle { color: var(--ddb-black); }
  .nav-links {
    position: fixed;
    inset: 0;
    background: var(--ddb-black);
    flex-direction: column;
    justify-content: center;
    gap: var(--space-lg);
    transform: translateY(-100%);
    transition: transform var(--dur-slow) var(--ease-in-out);
  }
  .nav-links.is-open { transform: translateY(0); }
  .nav-links a { color: var(--white); font-size: 22px; }
  .nav-links a::after { background: var(--ddb-yellow); }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--ddb-black);
  color: var(--white);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(251, 209, 13, 0.16), transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(238, 62, 64, 0.14), transparent 50%),
    linear-gradient(160deg, #1a1617 0%, #241f21 55%, #100d0e 100%);
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 40%, black 10%, transparent 70%);
  opacity: 0.5;
}

.hero-glyph {
  position: absolute;
  top: 13%;
  right: 0%;
  width: clamp(200px, 21vw, 320px);
  will-change: transform;
}

@media (max-width: 760px) {
  .hero-glyph { display: none; }
}

/* Dallah + B hero mark (replaces the flat yellow B glyph) */
.hero-dallah {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  filter: drop-shadow(0 26px 55px rgba(0, 0, 0, 0.45));
  /* fade-in (opacity) + a very small idle float (transform) — different
     properties, so they don't collide; the scroll parallax lives on the
     .hero-glyph wrapper, so it doesn't collide either. */
  animation: dallahFade 800ms var(--ease-out) 200ms forwards,
             dallahFloat 7s ease-in-out 1s infinite;
}
@keyframes dallahFade { to { opacity: 1; } }
@keyframes dallahFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(-1.2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-dallah { animation: none; opacity: 1; }
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: var(--space-lg) 0 var(--space-2xl);
}

.hero-eyebrow {
  color: var(--ddb-yellow);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-md);
}

.hero-eyebrow::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--ddb-yellow);
}

.hero h1 {
  font-size: clamp(2.6rem, 8.4vw, 7.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.98;
  text-transform: uppercase;
  max-width: 16ch;
}

.hero h1 .line {
  display: block;
  overflow: hidden;
  padding: 0.12em 0.05em;
  margin: -0.12em -0.05em;
}

.hero h1 .word {
  display: inline-block;
  transform: translateY(115%);
  will-change: transform;
}

.hero h1 .accent { color: var(--ddb-yellow); }

.hero-sub {
  margin-top: var(--space-lg);
  max-width: 46ch;
  font-size: 1.15rem;
  color: rgba(255,255,255,0.72);
}

.hero-meta {
  margin-top: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: var(--space-md);
}

.hero-meta div strong {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--white);
}

.hero-meta div span {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.scroll-cue {
  position: absolute;
  right: var(--space-md);
  bottom: var(--space-lg);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

.scroll-cue .line {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.3);
  position: relative;
  overflow: hidden;
}

.scroll-cue .line::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--ddb-yellow);
  animation: scrollcue 1.8s var(--ease-in-out) infinite;
}

@keyframes scrollcue {
  0% { top: -100%; }
  60% { top: 100%; }
  100% { top: 100%; }
}

@media (max-width: 640px) {
  .scroll-cue { display: none; }
}

/* ---------- Hello (opening) ---------- */
.hello {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
  padding: 120px var(--space-md) 108px;
  color: #fff;
  background:
    radial-gradient(120% 115% at 50% -10%, rgba(23,86,71,0.55) 0%, rgba(12,50,40,0) 60%),
    linear-gradient(180deg, #0e3a2e 0%, #0a2b22 55%, #06201a 100%);
}
.hello-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hello-glow { position: absolute; border-radius: 50%; filter: blur(90px); mix-blend-mode: screen; will-change: transform; }
.hello-glow--1 { width: 48vw; height: 48vw; left: -10vw; top: -12vw; background: #67ec03; opacity: 0.30; animation: helloG1 15s var(--ease-in-out) infinite; }
.hello-glow--2 { width: 42vw; height: 42vw; right: -8vw; bottom: -14vw; background: #14e6a0; opacity: 0.22; animation: helloG2 19s var(--ease-in-out) infinite; }
.hello-glow--3 { width: 34vw; height: 34vw; left: 50%; top: 58%; background: #8bff3a; opacity: 0.16; animation: helloG3 17s var(--ease-in-out) infinite; }
@keyframes helloG1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(7vw,5vw) scale(1.18); } }
@keyframes helloG2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-6vw,-4vw) scale(1.12); } }
@keyframes helloG3 { 0%,100% { transform: translate(-50%,0) scale(1); } 50% { transform: translate(-42%,-5vw) scale(1.22); } }
.hello-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(103,236,3,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103,236,3,0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 42%, #000 28%, transparent 74%);
  mask-image: radial-gradient(120% 90% at 50% 42%, #000 28%, transparent 74%);
}

/* Riyadh wall-sketch — subtle line-art atmosphere grounding the hero. */
.hello-city {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: auto;
  opacity: 0.15;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}
@media (max-width: 760px) { .hello-city { width: 175%; left: -37%; opacity: 0.13; } }

.hello-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(26px, 4vh, 46px); max-width: 1000px; }
.hello-partners { display: flex; align-items: center; gap: clamp(22px, 4vw, 54px); }
.hello-logo { width: auto; display: block; }
.hello-logo--ia { height: clamp(56px, 8.4vw, 116px); }
.hello-logo--ddb { height: clamp(50px, 7.4vw, 104px); }
.hello-x { display: inline-flex; color: #67ec03; opacity: 0.85; }
.hello-x svg { width: clamp(20px, 2.4vw, 30px); height: auto; }
.hello-label { font-size: 12px; font-weight: 700; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin: -8px 0 0; }
.hello-line { font-size: clamp(2.3rem, 6.6vw, 5.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.03; margin: 0; max-width: 17ch; text-wrap: balance; }
.hello-cue { left: 50%; right: auto; transform: translateX(-50%); flex-direction: column; gap: 8px; color: rgba(255,255,255,0.65); }
.hello-cue .line::after { background: #67ec03; }

/* ---------- Video banner ---------- */
.video-banner { position: relative; width: 100%; background: #06201a; display: flex; justify-content: center; overflow: hidden; }
.video-banner-el { width: 100%; height: auto; max-height: 100svh; object-fit: cover; display: block; }

/* ---------- Reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-group .reveal:nth-child(1) { transition-delay: 0ms; }
.reveal-group .reveal:nth-child(2) { transition-delay: 90ms; }
.reveal-group .reveal:nth-child(3) { transition-delay: 180ms; }
.reveal-group .reveal:nth-child(4) { transition-delay: 270ms; }
.reveal-group .reveal:nth-child(5) { transition-delay: 360ms; }
.reveal-group .reveal:nth-child(6) { transition-delay: 450ms; }

/* ---------- About / mantra ---------- */

.mantra {
  background: var(--ddb-off-white);
}

.mantra-text {
  font-size: clamp(1.6rem, 3.6vw, 2.8rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  max-width: 22ch;
}

.mantra-text .hl { color: var(--ddb-red); }
.mantra-text .hl2 { background: var(--ddb-yellow); padding: 0 6px; }

.about-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
  margin-top: var(--space-2xl);
}

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
}

.stat-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.stat-list .stat {
  border-top: 1px solid rgba(36,31,33,0.14);
  padding-top: var(--space-sm);
}

.stat strong {
  display: block;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
}

.stat span {
  font-size: 0.9rem;
  color: #6b6664;
}

/* ---------- Capabilities ---------- */

.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(36,31,33,0.12);
  border: 1px solid rgba(36,31,33,0.12);
}

@media (max-width: 900px) {
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .cap-grid { grid-template-columns: 1fr; }
}

.cap-card {
  background: var(--white);
  padding: var(--space-lg) var(--space-md);
  position: relative;
  overflow: hidden;
  transition: background var(--dur-med) var(--ease-out);
}

.cap-card::before {
  content: attr(data-index);
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  font-size: 12px;
  color: rgba(36,31,33,0.35);
  font-weight: 700;
}

.cap-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: var(--space-lg);
  letter-spacing: -0.01em;
}

.cap-card p {
  margin-top: var(--space-xs);
  font-size: 0.95rem;
  color: #6b6664;
}

.cap-card:hover {
  background: var(--ddb-off-white);
}

.cap-icon {
  width: 30px;
  height: 30px;
  border-radius: 0 999px 999px 0;
  background: var(--ddb-yellow);
  transition: transform var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out);
}

.cap-card:nth-child(3n+2) .cap-icon { background: var(--ddb-red); }
.cap-card:nth-child(3n) .cap-icon { background: var(--ddb-blue); }

.cap-card:hover .cap-icon {
  transform: translateX(6px);
}

/* ---------- Work grid ---------- */

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

@media (max-width: 760px) {
  .work-grid { grid-template-columns: 1fr; }
}

.work-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  color: var(--white);
  padding: var(--space-lg);
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
}

.work-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--card-bg, linear-gradient(160deg, #2b2528, #171415));
  transition: transform var(--dur-slow) var(--ease-out);
}

.work-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 55%);
}

.work-card:hover::before {
  transform: scale(1.06);
}

.work-tag {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(6px);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: auto;
}

.work-card h3 {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  max-width: 20ch;
}

.work-card p {
  margin-top: var(--space-xs);
  font-size: 0.95rem;
  color: rgba(255,255,255,0.75);
  max-width: 42ch;
}

.work-card .work-arrow {
  margin-top: var(--space-md);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.work-card .work-arrow svg {
  width: 16px; height: 16px;
  transition: transform var(--dur-fast) var(--ease-out);
}

.work-card:hover .work-arrow svg { transform: translateX(4px); }

.work-card.card-hero { grid-column: span 2; min-height: 460px; }
@media (max-width: 760px) { .work-card.card-hero { grid-column: span 1; } }

.view-all {
  margin-top: var(--space-xl);
  display: flex;
  justify-content: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 34px;
  border-radius: 999px;
  background: var(--ddb-black);
  color: var(--white);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  border: 1px solid var(--ddb-black);
}

.btn:hover {
  background: var(--ddb-yellow);
  color: var(--ddb-black);
  transform: translateY(-2px);
}

.btn--ghost {
  background: transparent;
  color: var(--ddb-black);
}

.btn--ghost:hover {
  background: var(--ddb-black);
  color: var(--white);
}

.btn--light {
  background: var(--white);
  color: var(--ddb-black);
  border-color: var(--white);
}

.btn--light:hover {
  background: var(--ddb-yellow);
  border-color: var(--ddb-yellow);
}

/* ---------- Clients marquee ---------- */

.clients {
  background: var(--ddb-black);
  color: var(--white);
  overflow: hidden;
}

.marquee {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}

.marquee:hover { animation-play-state: paused; }

.marquee-track {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  padding-right: var(--space-2xl);
}

.marquee-track span {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
  letter-spacing: -0.01em;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Awards ---------- */

.awards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

@media (max-width: 760px) {
  .awards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .awards-grid { grid-template-columns: 1fr; }
}

.award-card {
  padding: var(--space-lg);
  border: 1px solid rgba(36,31,33,0.12);
  border-radius: 14px;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.award-card:hover {
  border-color: var(--ddb-yellow);
  transform: translateY(-4px);
}

.award-card strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
}

.award-card span {
  font-size: 0.9rem;
  color: #6b6664;
}

/* ---------- CTA band ---------- */

.cta-band {
  background: var(--ddb-yellow);
  color: var(--ddb-black);
  overflow: hidden;
  position: relative;
}

.cta-band h2 {
  font-size: clamp(2rem, 6vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  max-width: 14ch;
  line-height: 1.02;
}

.cta-band-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

/* ---------- Footer ---------- */

.footer {
  background: var(--ddb-black);
  color: rgba(255,255,255,0.7);
  padding: var(--space-2xl) 0 var(--space-lg);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

@media (max-width: 760px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}

.footer-col h4 {
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col a {
  font-size: 0.95rem;
  transition: color var(--dur-fast) var(--ease-out);
}

.footer-col a:hover { color: var(--ddb-yellow); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-lg);
  font-size: 13px;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* ---------- Page hero (work/contact) ---------- */

.page-hero {
  padding: calc(var(--space-3xl) + 40px) 0 var(--space-xl);
  background: var(--ddb-black);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.page-hero h1 {
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  max-width: 18ch;
}

.page-hero p {
  margin-top: var(--space-md);
  max-width: 50ch;
  color: rgba(255,255,255,0.7);
  font-size: 1.1rem;
}

/* ---------- Work list (work.html) ---------- */

.work-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--space-xl);
}

.filter-btn {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid rgba(36,31,33,0.18);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: transparent;
  transition: all var(--dur-fast) var(--ease-out);
}

.filter-btn:hover,
.filter-btn.is-active {
  background: var(--ddb-black);
  color: var(--white);
  border-color: var(--ddb-black);
}

.case-list {
  display: flex;
  flex-direction: column;
}

.case-row {
  display: grid;
  grid-template-columns: 0.9fr 1.6fr;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  border-top: 1px solid rgba(36,31,33,0.12);
  align-items: center;
  transition: background var(--dur-fast) var(--ease-out);
}

.case-list .case-row:last-child { border-bottom: 1px solid rgba(36,31,33,0.12); }

@media (max-width: 760px) {
  .case-row { grid-template-columns: 1fr; gap: var(--space-sm); }
}

.case-visual {
  height: 220px;
  border-radius: 14px;
  background: var(--case-bg, linear-gradient(150deg, #2b2528, #171415));
  position: relative;
  overflow: hidden;
  color: var(--white);
  padding: var(--space-md);
  display: flex;
  align-items: flex-end;
}

.case-visual span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.18);
  padding: 6px 12px;
  border-radius: 999px;
}

.case-body .client {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ddb-red);
}

.case-body h3 {
  margin-top: 10px;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.case-body p {
  margin-top: var(--space-sm);
  color: #55504f;
  max-width: 62ch;
}

.case-meta {
  margin-top: var(--space-md);
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.case-meta div strong {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
}
.case-meta div span {
  font-size: 12px;
  color: #918c8a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- Contact page ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
}

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.info-row {
  padding: var(--space-md) 0;
  border-top: 1px solid rgba(36,31,33,0.12);
}

.info-row:last-child { border-bottom: 1px solid rgba(36,31,33,0.12); }

.info-row span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #918c8a;
  margin-bottom: 6px;
}

.info-row strong, .info-row a {
  font-size: 1.15rem;
  font-weight: 600;
}

.form-field {
  margin-bottom: var(--space-md);
}

.form-field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: #55504f;
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid rgba(36,31,33,0.18);
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  background: var(--ddb-off-white);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--ddb-black);
  background: var(--white);
}

.form-field textarea { resize: vertical; min-height: 130px; }

.form-note {
  font-size: 0.85rem;
  color: #918c8a;
  margin-top: var(--space-sm);
}

.map-block {
  margin-top: var(--space-lg);
  border-radius: 16px;
  overflow: hidden;
  height: 260px;
  background: linear-gradient(150deg, #1a1617, #241f21);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.map-block .pin {
  width: 46px;
  height: 46px;
  border-radius: 0 999px 999px 0;
  background: var(--ddb-yellow);
  position: relative;
  animation: pinPulse 2.4s ease-in-out infinite;
}

@keyframes pinPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

/* ---------- Scroll progress ---------- */

.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: var(--ddb-yellow);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 1001;
  pointer-events: none;
}

/* ---------- Film grain ---------- */

.grain {
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Custom cursor ---------- */

.cursor-dot, .cursor-ring { display: none; }

@media (hover: hover) and (pointer: fine) {
  html.cursor-custom,
  html.cursor-custom a,
  html.cursor-custom button,
  html.cursor-custom input,
  html.cursor-custom textarea,
  html.cursor-custom select,
  html.cursor-custom label { cursor: none; }

  html.cursor-custom .cursor-dot,
  html.cursor-custom .cursor-ring { display: flex; }

  .cursor-dot {
    position: fixed; top: 0; left: 0;
    width: 6px; height: 6px;
    background: var(--ddb-yellow);
    border-radius: 50%;
    z-index: 10001;
    pointer-events: none;
    will-change: transform;
  }

  .cursor-ring {
    position: fixed; top: 0; left: 0;
    width: 38px; height: 38px;
    border: 1.5px solid rgba(150, 150, 150, 0.55);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    pointer-events: none;
    will-change: transform, width, height;
    transition: width 260ms var(--ease-out), height 260ms var(--ease-out),
                background-color 260ms var(--ease-out), border-color 260ms var(--ease-out);
  }

  .cursor-ring span {
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ddb-black);
    opacity: 0; transform: scale(0.5);
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  }

  .cursor-ring.is-hover { width: 54px; height: 54px; border-color: var(--ddb-yellow); }
  .cursor-ring.is-view {
    width: 84px; height: 84px;
    background: var(--ddb-yellow);
    border-color: var(--ddb-yellow);
  }
  .cursor-ring.is-view span { opacity: 1; transform: scale(1); }
}

/* ---------- Press feedback ---------- */

.btn:active,
.btn--ghost:active,
.btn--light:active { transform: scale(0.97); }
.filter-btn:active { transform: scale(0.96); }
.work-card:active { transform: scale(0.992); }
.cap-card:active { transform: scale(0.99); }
.award-card:active { transform: scale(0.99); }

/* ---------- Preloader ---------- */

body.preload-lock { overflow: hidden; }

.preloader {
  position: fixed;
  inset: 0;
  z-index: 10010;
  background: var(--ddb-black);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(0);
  transition: transform 800ms var(--ease-in-out);
}

.preloader.is-done { transform: translateY(-100%); }

.preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.pl-b { width: 54px; height: auto; overflow: visible; }

.pl-d {
  opacity: 0;
  animation: plDrop 700ms var(--ease-out) forwards;
}
.pl-d-top { transform: translateY(-16px); }
.pl-d-bottom { transform: translateY(16px); animation-delay: 130ms; }

@keyframes plDrop {
  to { opacity: 1; transform: translateY(0); }
}

.preloader-text {
  display: flex;
  gap: 9px;
  overflow: hidden;
  padding-bottom: 2px;
}
.preloader-text span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  transform: translateY(120%);
  animation: plWord 600ms var(--ease-out) forwards;
}
.preloader-text span:nth-child(1) { animation-delay: 520ms; }
.preloader-text span:nth-child(2) { animation-delay: 600ms; color: var(--ddb-yellow); }
.preloader-text span:nth-child(3) { animation-delay: 680ms; }
.preloader-text span:nth-child(4) { animation-delay: 760ms; }

@keyframes plWord {
  to { transform: translateY(0); }
}

/* ===================================================================
   IA PITCH — fine-print interstitial + Insurance Authority takeover
   =================================================================== */

/* ---------- Fine-print interstitial (the bridge) ---------- */

.fineprint {
  position: relative;
  min-height: 100dvh;
  color: var(--white);
  display: flex;
  align-items: center;
  overflow: hidden;
  /* IA green world — the button is the hero; bg recedes into vibrant green */
  background:
    radial-gradient(58% 55% at 14% 38%, rgba(103,236,3,0.20) 0%, rgba(10,43,34,0) 60%),
    radial-gradient(52% 52% at 92% 82%, rgba(20,230,160,0.16) 0%, rgba(10,43,34,0) 60%),
    radial-gradient(42% 42% at 4% 92%, rgba(139,255,58,0.14) 0%, rgba(10,43,34,0) 55%),
    linear-gradient(180deg, #0e3a2e 0%, #0a2b22 60%, #06201a 100%);
}

/* Left-aligned block, pinned to the left gutter on all widths (Figma x=24),
   not centered by the max-width container */
.fineprint-inner {
  position: relative; z-index: 2;
  max-width: none; margin: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 30px;
}

.fineprint .eyebrow { color: #8bff4a; }
.fineprint .eyebrow::before { background: #8bff4a; }

.fineprint h2 {
  font-size: clamp(2.6rem, 10.4vw, 9.375rem); /* caps at 150px, per Figma */
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.9;
  margin: 0;
}
.fineprint h2 .strike { color: rgba(255, 255, 255, 0.4); }
.fineprint h2 .hl { color: #ffffff; }

.fineprint-sub {
  margin: 0;
  max-width: 520px;
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}

.fineprint-cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 28px 52px;
  border-radius: 999px;
  background: var(--ddb-yellow);
  color: var(--ddb-black);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.01em;
  border: none;
  box-shadow: 0 10px 40px rgba(251, 209, 13, 0.30);
  transition: transform 200ms var(--ease-out), box-shadow 260ms var(--ease-out), gap 200ms var(--ease-out);
}
/* Radiating beacon behind the button — draws the eye to the one action that
   matters on this screen. Seen once per visit, so a gentle pulse is warranted.
   Transform + opacity only (GPU); the blurred halo reads as a soft glow. */
.fineprint-cta::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: var(--ddb-yellow);
  filter: blur(10px);
  animation: ctaBeacon 2.6s var(--ease-out) infinite;
}
@keyframes ctaBeacon {
  0%   { transform: scale(1);    opacity: 0.55; }
  70%  { transform: scale(1.16); opacity: 0; }
  100% { transform: scale(1.16); opacity: 0; }
}
.fineprint-cta:active { transform: scale(0.97); }
.fineprint-cta svg { width: 22px; height: 22px; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .fineprint-cta:hover { transform: translateY(-3px); box-shadow: 0 22px 60px rgba(251, 209, 13, 0.45); gap: 18px; }
  .fineprint-cta:hover svg { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .fineprint-cta::before { animation: none; opacity: 0; }
}

/* ---------- IA takeover overlay ---------- */

.ia-takeover {
  --ia-dark: #004137;
  --ia-green: #64F000;
  --ia-teal: #00AF8C;
  --ia-ink: #EAFBF0;
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: var(--ia-dark);
  color: var(--ia-ink);
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 480ms var(--ease-in-out), visibility 0s linear 480ms;
  font-family: 'Poppins', var(--font);
}
.ia-takeover.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 720ms var(--ease-in-out), visibility 0s linear 0s;
}
body.ia-open { overflow: hidden; }

.ia-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px clamp(20px, 5vw, 64px);
  background: linear-gradient(var(--ia-dark) 30%, rgba(0, 65, 55, 0.72) 75%, transparent);
}
.ia-bar img { height: 38px; width: auto; }

.ia-close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: var(--ia-ink);
  font-family: 'Poppins', var(--font);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out), transform 160ms var(--ease-out);
}
.ia-close:hover { border-color: var(--ia-green); background: rgba(100, 240, 0, 0.08); }
.ia-close:active { transform: scale(0.96); }
.ia-close svg { width: 15px; height: 15px; }

.ia-wrap { max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }

.ia-hero { padding: clamp(20px, 4vh, 50px) 0 clamp(36px, 7vh, 80px); }
.ia-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ia-green);
}
.ia-eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--ia-green); }

.ia-hero h2 {
  margin: 26px 0 0;
  font-family: 'Poppins', var(--font);
  font-weight: 300;
  font-size: clamp(2.3rem, 6.4vw, 5.6rem);
  line-height: 1.03;
  letter-spacing: -0.01em;
  max-width: 20ch;
}
.ia-hero h2 b { font-weight: 600; color: var(--ia-green); }

.ia-hero-sub {
  margin-top: 28px; max-width: 54ch;
  font-size: 1.1rem; line-height: 1.6; color: rgba(234, 251, 240, 0.72);
  font-weight: 300;
}

/* graphic signature */
.ia-signature { margin-top: 44px; width: 100%; height: clamp(120px, 22vh, 240px); position: relative; }
.ia-signature svg { width: 100%; height: 100%; overflow: visible; }
.ia-signature .sig-line {
  fill: none; stroke: var(--ia-green); stroke-width: 1; stroke-linecap: round;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
}
.ia-takeover.is-open .ia-signature .sig-line { animation: sigDraw 1200ms var(--ease-out) forwards; }
@keyframes sigDraw { to { stroke-dashoffset: 0; } }
.ia-signature .sig-label {
  position: absolute; font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(234, 251, 240, 0.6);
}
.ia-signature .sig-label.today { left: 1%; bottom: 6%; }
.ia-signature .sig-label.tomorrow { right: 1%; top: 4%; color: var(--ia-green); }

/* cases */
.ia-cases { padding-bottom: clamp(40px, 8vh, 90px); }
.ia-cases-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; margin-bottom: 40px; flex-wrap: wrap;
}
.ia-cases-head h3 {
  font-family: 'Poppins', var(--font); font-weight: 300;
  font-size: clamp(1.6rem, 4vw, 2.6rem); letter-spacing: -0.01em;
}
.ia-cases-head p { color: rgba(234, 251, 240, 0.6); max-width: 34ch; font-weight: 300; }

.ia-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 760px) { .ia-grid { grid-template-columns: 1fr; } }

.ia-card {
  --accent: var(--ia-green);
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
  color: var(--ia-ink);
  font-family: 'Poppins', var(--font);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.ia-card:focus-visible { outline: 2px solid var(--ia-green); outline-offset: 3px; }
.ia-card:active { transform: scale(0.992); }

.ia-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(130% 120% at 18% 12%, color-mix(in srgb, var(--accent) 58%, transparent), transparent 62%),
    linear-gradient(150deg, color-mix(in srgb, var(--accent) 24%, #00352b), #001f18);
}
.ia-card.wide .ia-card-media { aspect-ratio: 24 / 9; }
.ia-card-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 25, 20, 0.55), transparent 55%);
}
.ia-lineart { width: 56%; max-width: 240px; height: auto; position: relative; z-index: 1; }
.ia-lineart [data-draw] {
  fill: none; stroke: var(--ia-green); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1600; stroke-dashoffset: 1600;
}
.ia-takeover.is-open .ia-card .ia-lineart [data-draw] {
  animation: sigDraw 1700ms var(--ease-out) 720ms forwards;
}

.ia-card-body { padding: 26px 30px 30px; display: flex; flex-direction: column; flex: 1; }
.ia-card .ia-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ia-green); }
.ia-card h4 { font-family: 'Poppins', var(--font); font-weight: 500; font-size: 1.5rem; margin: 14px 0 0; letter-spacing: -0.01em; }
.ia-card p { margin-top: 12px; font-weight: 300; font-size: 0.98rem; line-height: 1.6; color: rgba(234, 251, 240, 0.72); }
.ia-card-cta { margin-top: auto; padding-top: 20px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; letter-spacing: 0.02em; color: var(--ia-ink); }
.ia-card-cta svg { width: 15px; height: 15px; transition: transform 200ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .ia-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); transform: translateY(-4px); }
  .ia-card:hover .ia-card-cta svg { transform: translateX(4px); }
  .ia-card:hover .ia-lineart { transform: scale(1.04); transition: transform 600ms var(--ease-out); }
}
.ia-card.wide { grid-column: span 2; }
@media (max-width: 760px) { .ia-card.wide { grid-column: span 1; } }

/* ---------- Case study takeover (DDB black / IA green) ---------- */
.cs-overlay {
  position: fixed; inset: 0; z-index: 9996;
  --cs-bg: #100e0e; --cs-fg: #f4f4f3; --cs-muted: rgba(244,244,243,0.58);
  --cs-accent: #FBD10D; --cs-line: rgba(244,244,243,0.13);
  background: var(--cs-bg); color: var(--cs-fg); font-family: var(--font);
  visibility: hidden; opacity: 0;
  transition: opacity 300ms var(--ease-out), visibility 0s linear 300ms;
}
.cs-overlay.is-open { visibility: visible; opacity: 1; transition: opacity 300ms var(--ease-out), visibility 0s linear 0s; }
.cs-overlay.cs--green {
  --cs-bg: #07230e; --cs-fg: #eafff0; --cs-muted: rgba(234,255,240,0.6);
  --cs-accent: #8bff4a; --cs-line: rgba(234,255,240,0.14);
}
.cs-overlay::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 85% -10%, color-mix(in srgb, var(--cs-accent) 12%, transparent), transparent 55%);
}
.cs-topbar {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  height: 72px; padding: 0 clamp(20px, 5.5vw, 80px);
  background: color-mix(in srgb, var(--cs-bg) 82%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cs-line);
}
.cs-back, .cs-close {
  display: inline-flex; align-items: center; gap: 9px;
  background: transparent; border: none; color: var(--cs-fg); cursor: pointer;
  font-family: var(--font); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: color 200ms var(--ease-out), transform 160ms var(--ease-out);
}
.cs-back svg { width: 18px; height: 18px; }
.cs-back:hover, .cs-close:hover { color: var(--cs-accent); }
.cs-back:active, .cs-close:active { transform: scale(0.97); }
.cs-close {
  width: 44px; height: 44px; justify-content: center; padding: 0;
  border: 1.5px solid var(--cs-line); border-radius: 999px;
}
.cs-close:hover { border-color: var(--cs-accent); }
.cs-close svg { width: 18px; height: 18px; }
.cs-counter {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em;
  color: var(--cs-muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cs-scroll { position: relative; z-index: 1; height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.cs-inner {
  max-width: var(--container); margin: 0 auto;
  padding: clamp(40px, 7vw, 96px) clamp(20px, 5.5vw, 80px) clamp(64px, 10vw, 140px);
}
.cs-chip {
  display: inline-flex; align-items: center;
  padding: 8px 16px; border: 1px solid var(--cs-line); border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cs-accent);
}
.cs-title {
  margin: 26px 0 0; max-width: 16ch;
  font-size: clamp(2.4rem, 6.4vw, 5.4rem); font-weight: 800;
  line-height: 0.98; letter-spacing: -0.03em;
}
.cs-title .cs-accent { color: var(--cs-accent); }
.cs-sections {
  margin-top: clamp(44px, 6vw, 84px);
  display: grid; gap: clamp(32px, 4vw, 52px);
}
.cs-block { max-width: 860px; }
.cs-block[hidden] { display: none; }
.cs-label {
  display: block; margin-bottom: 14px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cs-accent);
}
.cs-body { margin: 0; font-size: clamp(1.05rem, 1.8vw, 1.45rem); line-height: 1.55; color: var(--cs-fg); }
.cs-block--muted .cs-body { color: var(--cs-muted); }
.cs-film { margin-top: clamp(48px, 7vw, 96px); }
.cs-film[hidden] { display: none; }
.cs-film-stage {
  position: relative; margin-top: 18px;
  aspect-ratio: 1280 / 600; width: 100%;
  border: 1px solid var(--cs-line); border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(80% 120% at 50% 0%, color-mix(in srgb, var(--cs-accent) 10%, transparent), transparent 60%),
    color-mix(in srgb, var(--cs-fg) 5%, var(--cs-bg));
  display: flex; align-items: center; justify-content: center;
}
.cs-film-stage video,
.cs-film-stage iframe,
.cs-film-stage img.cs-film-art { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cs-film-stage video, .cs-film-stage img.cs-film-art { object-fit: cover; }
.cs-play {
  position: relative; z-index: 1;
  width: clamp(72px, 9vw, 104px); height: clamp(72px, 9vw, 104px);
  border-radius: 999px; border: none; cursor: pointer;
  background: var(--cs-accent);
  display: flex; align-items: center; justify-content: center;
  transition: transform 200ms var(--ease-out), box-shadow 260ms var(--ease-out);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--cs-accent) 50%, transparent);
}
.cs-play svg { width: 34%; height: 34%; margin-left: 6%; fill: #0c0c0c; }
.cs-film-stage:hover .cs-play { transform: scale(1.06); box-shadow: 0 0 0 14px color-mix(in srgb, var(--cs-accent) 12%, transparent); }
.cs-play:active { transform: scale(0.97); }
.cs-film-meta {
  position: absolute; left: 20px; bottom: 18px; z-index: 1;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cs-muted);
}
/* entrance rise + stagger (transition-based → interruptible) */
.cs-chip, .cs-title, .cs-block, .cs-film {
  opacity: 0; transform: translateY(18px);
  transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out);
}
.cs-overlay.is-open .cs-chip { opacity: 1; transform: none; transition-delay: 60ms; }
.cs-overlay.is-open .cs-title { opacity: 1; transform: none; transition-delay: 120ms; }
.cs-overlay.is-open .cs-block { opacity: 1; transform: none; }
.cs-overlay.is-open .cs-sections .cs-block:nth-child(1) { transition-delay: 190ms; }
.cs-overlay.is-open .cs-sections .cs-block:nth-child(2) { transition-delay: 250ms; }
.cs-overlay.is-open .cs-film { opacity: 1; transform: none; transition-delay: 320ms; }
@media (prefers-reduced-motion: reduce) {
  .cs-chip, .cs-title, .cs-block, .cs-film { transform: none; transition: opacity 200ms linear; }
}
@media (max-width: 600px) {
  .cs-title { max-width: none; }
  .cs-film-stage { aspect-ratio: 4 / 3; }
}
body.modal-open { overflow: hidden; }

/* general-work case rows are now clickable */
.case-row { cursor: pointer; }
.case-row:focus-visible { outline: 2px solid var(--ddb-black); outline-offset: 4px; }

/* outro */
.ia-outro { border-top: 1px solid rgba(255, 255, 255, 0.12); padding: clamp(40px, 8vh, 80px) 0; text-align: center; }
.ia-outro h3 { font-family: 'Poppins', var(--font); font-weight: 300; font-size: clamp(1.8rem, 5vw, 3.4rem); letter-spacing: -0.01em; }
.ia-outro h3 b { font-weight: 600; color: var(--ia-green); }
.ia-outro-note { margin-top: 18px; font-size: 0.9rem; color: rgba(234, 251, 240, 0.5); font-weight: 300; }
.ia-outro .ia-close { margin-top: 32px; }

/* entrance choreography — staggered arrival on open */
.ia-takeover.is-open .ia-hero .ia-eyebrow { animation: iaIn 600ms var(--ease-out) 180ms both; }
.ia-takeover.is-open .ia-hero h2 { animation: iaInBlur 760ms var(--ease-out) 260ms both; }
.ia-takeover.is-open .ia-hero-sub { animation: iaIn 620ms var(--ease-out) 400ms both; }
.ia-takeover.is-open .sig-label.today { animation: iaIn 500ms var(--ease-out) 460ms both; }
.ia-takeover.is-open .sig-label.tomorrow { animation: iaIn 560ms var(--ease-out) 1120ms both; }
.ia-takeover.is-open .ia-cases-head { animation: iaIn 620ms var(--ease-out) 520ms both; }
/* cards use backwards fill so :hover transform still applies after arrival */
.ia-takeover.is-open .ia-card { animation: iaIn 600ms var(--ease-out) backwards; }
.ia-takeover.is-open .ia-card:nth-child(1) { animation-delay: 600ms; }
.ia-takeover.is-open .ia-card:nth-child(2) { animation-delay: 680ms; }
.ia-takeover.is-open .ia-card:nth-child(3) { animation-delay: 760ms; }
.ia-takeover.is-open .ia-card:nth-child(4) { animation-delay: 840ms; }
.ia-takeover.is-open .ia-card:nth-child(5) { animation-delay: 920ms; }

@keyframes iaIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes iaInBlur {
  from { opacity: 0; transform: translateY(20px); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ---------- Ambient colour field (DDB light sections) ---------- */

.section--ambient { position: relative; overflow: hidden; }
.section--ambient > .container { position: relative; z-index: 1; }

.ambient { position: absolute; inset: -12% 0; pointer-events: none; z-index: 0; }
.ambient i {
  position: absolute;
  display: block;
  border-radius: 50%;
  width: clamp(340px, 44vw, 700px);
  aspect-ratio: 1 / 1;
  filter: blur(80px);
  opacity: var(--amb-lo, 0.14);
  will-change: transform, opacity;
}
.ambient i:nth-child(1) { background: var(--ddb-yellow); top: -8%; left: -6%; animation: amb1 24s ease-in-out infinite; }
.ambient i:nth-child(2) { background: var(--ddb-red); bottom: -12%; right: -6%; animation: amb2 30s ease-in-out infinite; }
.ambient i:nth-child(3) { background: var(--ddb-blue); top: 26%; right: 22%; animation: amb3 36s ease-in-out infinite; }

.ambient--cool i:nth-child(1) { background: var(--ddb-blue); }
.ambient--cool i:nth-child(2) { background: var(--ddb-green); }
.ambient--cool i:nth-child(3) { background: var(--ddb-yellow); }

.ambient--strong { --amb-lo: 0.22; --amb-hi: 0.4; }
.ambient--strong i { filter: blur(72px); width: clamp(380px, 48vw, 780px); }

@keyframes amb1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: var(--amb-lo, 0.14); }
  50% { transform: translate3d(6%, 8%, 0) scale(1.16); opacity: var(--amb-hi, 0.24); }
}
@keyframes amb2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); opacity: var(--amb-lo, 0.12); }
  50% { transform: translate3d(-7%, -5%, 0) scale(1); opacity: var(--amb-hi, 0.22); }
}
@keyframes amb3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: var(--amb-lo, 0.1); }
  50% { transform: translate3d(-5%, 7%, 0) scale(1.1); opacity: var(--amb-hi, 0.2); }
}

/* ---------- People ---------- */

.people { background: var(--ddb-off-white); }
.dept { margin-top: clamp(40px, 7vh, 88px); }
.dept:first-of-type { margin-top: 0; }

.dept-head {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  border-top: 2px solid var(--dept-color, var(--ddb-yellow));
  padding: 20px 0 0; width: 100%; text-align: left;
}
.dept-num { font-size: clamp(1.3rem, 2.6vw, 2rem); font-weight: 800; color: var(--dept-color, var(--ddb-yellow)); letter-spacing: -0.02em; }
.dept-title { font-size: clamp(2.2rem, 6.5vw, 5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 0.95; margin: 0; }
.dept-count { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #837e7b; align-self: center; }
.dept-count b { color: var(--ddb-black); font-size: 1.35em; }

.dept-view {
  margin-left: auto; align-self: center; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px; border-radius: 999px;
  border: 2px solid var(--dept-color, var(--ddb-yellow));
  background: var(--dept-color, var(--ddb-yellow)); color: var(--ddb-black);
  font-size: 15px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  transition: transform 160ms var(--ease-out), box-shadow 260ms var(--ease-out), background 260ms var(--ease-out);
}
.dept-view svg { width: 18px; height: 18px; transition: transform 420ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .dept-view:hover { box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--dept-color, var(--ddb-yellow)) 70%, transparent); }
}
.dept-view:active { transform: scale(0.97); }
.dept-view:focus-visible { outline: 2px solid var(--ddb-black); outline-offset: 4px; }
.dept.is-open .dept-view { background: transparent; }
.dept.is-open .dept-view svg { transform: rotate(180deg); }

.dept-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 520ms var(--ease-out), opacity 380ms var(--ease-out); }
.dept.is-open .dept-body { grid-template-rows: 1fr; opacity: 1; }
.dept-body-inner { overflow: hidden; min-height: 0; }

.pc { padding-top: clamp(28px, 3.6vw, 48px); }
.pc-viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.pc-viewport::-webkit-scrollbar { display: none; }
.pc-track { display: flex; gap: clamp(20px, 2.4vw, 40px); align-items: stretch; }
.pc-slide { display: flex; }
.pc-slide { flex: 0 0 calc((100% - 2 * clamp(20px, 2.4vw, 40px)) / 3); scroll-snap-align: start; }
@media (max-width: 900px) { .pc-slide { flex-basis: calc((100% - clamp(20px, 2.4vw, 40px)) / 2); } }
@media (max-width: 600px) { .pc-slide { flex-basis: 100%; } }

/* People cards — white card: photo · name · role · divider · bio · read-more */
.person {
  background: #fff; border-radius: 18px; padding: 28px;
  display: flex; flex-direction: column; gap: 18px; align-items: stretch;
  width: 100%; height: 100%; box-sizing: border-box;
  text-align: left;
  box-shadow: 0 16px 18px rgba(36, 31, 33, 0.08);
}
[dir="rtl"] .person { text-align: right; }
.person-name, .person-role, .person-bio, .person-more { font-family: 'Tajawal', var(--font); }

.media { position: relative; width: 100%; height: 340px; background: #fff; border: 1px solid #eee; border-radius: 12px; overflow: hidden; }
.media-blob { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); width: 150px; height: 150px; border-radius: 50%; background: var(--dept-color, var(--ddb-yellow)); }
.media-photo { position: absolute; top: 16px; bottom: 16px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; z-index: 1; }
/* Composed photo already carries its own blob + framing on a white field —
   contain it full-height; the white margins blend into the white media box */
.media-photo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; transition: transform 600ms var(--ease-out); }
.person-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.person-ph svg { width: 40%; height: 40%; fill: #9a958f; }
@media (hover: hover) and (pointer: fine) { .person:hover .media-photo img { transform: scale(1.03); } }

.person-name { font-size: clamp(1.35rem, 1.8vw, 1.6rem); font-weight: 700; line-height: 1.24; letter-spacing: -0.01em; color: var(--ddb-black); }
.person-role { font-size: 0.9rem; font-weight: 500; color: var(--ddb-red); }
.person-divider { width: 48px; height: 3px; border-radius: 2px; background: var(--ddb-yellow); }
[dir="rtl"] .person-divider { align-self: flex-end; }
.person-bio { font-size: 0.9rem; line-height: 1.72; color: #555052; display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.person.is-expanded .person-bio { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.person-more { align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; border: none; cursor: pointer; font-size: 0.82rem; font-weight: 700; color: var(--ddb-black); transition: gap 200ms var(--ease-out), color 160ms var(--ease-out); }
[dir="rtl"] .person-more { align-self: flex-end; }
.person-more svg { width: 14px; height: 14px; }
[dir="rtl"] .person-more svg { transform: scaleX(-1); }
.person-more:hover { gap: 10px; color: var(--ddb-red); }

/* Partner logo cards keep their own plate — reset the white card wrapper */
.person--logo { background: transparent; box-shadow: none; padding: 0; gap: 14px; }

/* Production-partner cards — logo plate instead of the "B" photo */
.partner-logo {
  max-width: 320px;
  position: relative;
  background: #fff;
  border: 1.5px solid #e6e4df;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 200ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.partner-logo .pl-accent { display: block; height: 6px; background: var(--pc, var(--ddb-green)); }
.partner-logo .pl-holder {
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 36px;
}
.partner-logo .pl-slot {
  width: 55%; aspect-ratio: 1 / 1; border-radius: 18px;
  background: #efece6;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; letter-spacing: 0.08em; color: #96918b;
}
.partner-logo .pl-cap { font-size: 12px; font-weight: 500; color: #96918b; }
.partner-logo .pl-img { width: 72%; height: auto; max-height: 60%; object-fit: contain; }
@media (hover: hover) and (pointer: fine) {
  .person--logo:hover .partner-logo { transform: translateY(-4px); box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--pc, var(--ddb-green)) 60%, transparent); }
}

.pc-controls { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: clamp(24px, 3vw, 40px); }
.pc-controls[hidden] { display: none; }
.pc-status { display: flex; align-items: center; }
.pc-count { display: none; }
.pc-dots { display: inline-flex; gap: 9px; }
.pc-dots span { width: 9px; height: 9px; border-radius: 50%; background: #cfcdc7; transition: transform 220ms var(--ease-out), background 220ms var(--ease-out); }
.pc-dots span.on { background: var(--dept-color, var(--ddb-black)); transform: scale(1.25); }
.pc-nav { display: flex; align-items: center; gap: 12px; }
.pc-btn { font-family: inherit; cursor: pointer; }
.pc-prev, .pc-next {
  width: 30px; height: 48px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(36, 31, 33, 0.25); border-radius: 999px; background: transparent; color: var(--ddb-black);
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out), transform 160ms var(--ease-out);
}
.pc-prev svg, .pc-next svg { width: 16px; height: 16px; }
.pc-next span { display: none; } /* arrow-only in the new controls */
.pc-prev:hover, .pc-next:hover { background: var(--ddb-black); color: #fff; border-color: var(--ddb-black); }
.pc-prev:active, .pc-next:active { transform: scale(0.94); }
[dir="rtl"] .pc-prev svg, [dir="rtl"] .pc-next svg { transform: scaleX(-1); }

/* ---------- Member overlay (opens from "Read more") ---------- */
.member-overlay { position: fixed; inset: 0; z-index: 9993; display: flex; align-items: center; justify-content: center; padding: 24px; visibility: hidden; opacity: 0; transition: opacity 260ms var(--ease-out), visibility 0s linear 260ms; }
.member-overlay.is-open { visibility: visible; opacity: 1; transition: opacity 260ms var(--ease-out); }
body.member-open { overflow: hidden; }
.member-backdrop { position: absolute; inset: 0; background: rgba(20, 17, 18, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.member-modal {
  position: relative; z-index: 1; width: min(720px, 100%); height: 640px; max-height: 92vh;
  background: #fff; border-radius: 18px; padding: 36px 40px;
  display: flex; flex-direction: column; gap: 18px; overflow: hidden;
  box-shadow: 0 32px 80px -20px rgba(0, 0, 0, 0.28);
  transform: scale(0.96); transition: transform 300ms var(--ease-out);
  font-family: 'Tajawal', var(--font);
}
.member-overlay.is-open .member-modal { transform: scale(1); }
.member-close { position: absolute; top: 22px; right: 24px; z-index: 3; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(36, 31, 33, 0.05); border: none; color: #241f21; cursor: pointer; transition: background 160ms var(--ease-out), transform 140ms var(--ease-out); }
.member-close svg { width: 16px; height: 16px; }
.member-close:hover { background: rgba(36, 31, 33, 0.12); }
.member-close:active { transform: scale(0.92); }
[dir="rtl"] .member-close { right: auto; left: 24px; }
.member-head { display: flex; align-items: center; gap: 20px; padding-inline-end: 40px; }
.member-avatar { flex: none; width: 88px; height: 88px; border-radius: 16px; overflow: hidden; background: var(--pc, var(--ddb-yellow)); }
.member-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; display: block; }
.member-avatar.is-empty img { display: none; }
.member-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.member-name { font-size: 1.6rem; font-weight: 700; line-height: 1.2; color: var(--ddb-black); }
.member-role { font-size: 0.94rem; font-weight: 500; color: var(--ddb-red); }
.member-divider { width: 56px; height: 3px; border-radius: 2px; background: var(--ddb-yellow); flex: none; }
[dir="rtl"] .member-divider { align-self: flex-end; }
.member-bio-scroll { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 2px 26px; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 14px; }
.member-bio-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #b49202; }
.member-bio { font-size: 1rem; line-height: 1.9; color: #444042; white-space: pre-line; }
.member-scroll-fade { position: absolute; left: 40px; right: 40px; bottom: 36px; height: 40px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; z-index: 2; }
@media (max-width: 620px) { .member-modal { padding: 30px 24px; height: auto; max-height: 90vh; } .member-scroll-fade { left: 24px; right: 24px; bottom: 30px; } }

/* ---------- Kinetic headings ---------- */

.kinetic .kw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; }
.kinetic .kw > span { display: inline-block; transform: translateY(115%); transition: transform 720ms var(--ease-out); }
.kinetic.is-in .kw > span { transform: translateY(0); }

/* ---------- Hero floaters ---------- */

.hero-float { position: absolute; z-index: 1; pointer-events: none; opacity: 0.16; }
.hero-float svg { display: block; width: 100%; height: auto; }
.hero-float--1 { top: 20%; right: 34%; width: clamp(58px, 7vw, 104px); animation: floatA 15s ease-in-out infinite; }
.hero-float--2 { bottom: 30%; right: 13%; width: clamp(42px, 5vw, 74px); animation: floatB 19s ease-in-out infinite; }
@keyframes floatA { 0%, 100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(0,-26px,0) rotate(6deg); } }
@keyframes floatB { 0%, 100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(0,22px,0) rotate(-8deg); } }
@media (max-width: 760px) { .hero-float { display: none; } }

/* ---------- Small-screen refinements ---------- */

@media (max-width: 560px) {
  .section { padding: 72px 0; }
  .hero-meta { gap: 26px 30px; }
  .hero-meta div strong { font-size: 1.35rem; }
  .ia-wrap { padding: 0 18px; }
  .ia-card-body { padding: 22px 22px 26px; }
  .media-modal-panel { padding: 26px 20px; }
  .ambient i { filter: blur(60px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero h1 .word { transform: none; }
  .preloader { display: none; }
  .grain { display: none; }
  .ia-signature .sig-line { stroke-dashoffset: 0 !important; animation: none !important; }
  .ambient i { animation: none !important; }
  .hero-float { animation: none !important; }
  .kinetic .kw > span { transform: none !important; }
  .pc-next.pulse { animation: none !important; }
}

/* ============================================================
   v2 additions — How we work · Scope/SLA overlays · clients
   split · language toggle · RTL
   ============================================================ */

/* ---------- Language toggle ---------- */
.lang-toggle {
  background: transparent;
  border: 1.5px solid currentColor;
  color: inherit;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  padding: 7px 14px;
  border-radius: 999px;
  line-height: 1;
  opacity: 0.85;
  transition: opacity var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.lang-toggle:hover { opacity: 1; background: currentColor; }
.lang-toggle:hover { color: var(--ddb-black); }
.nav.is-scrolled .lang-toggle:hover { color: var(--white); }
.lang-toggle:active { transform: scale(0.96); }
html.is-ar body { font-family: 'Cairo', 'Plus Jakarta Sans', sans-serif; }

/* ---------- How we work (launcher) ---------- */
.how-we-work {
  position: relative;
  background: var(--ddb-black);
  color: var(--white);
  overflow: hidden;
}
.hww-bg { position: absolute; inset: 0; pointer-events: none; }
.hww-glow {
  position: absolute; border-radius: 50%;
  filter: blur(120px); opacity: 0.5;
}
.hww-glow--y { width: 520px; height: 520px; top: -140px; left: -120px; background: var(--ddb-yellow); opacity: 0.22; }
.hww-glow--r { width: 560px; height: 560px; bottom: -180px; right: -120px; background: var(--ddb-red); opacity: 0.20; }
.hww-glow--b { width: 380px; height: 380px; top: 30%; left: 42%; background: #4FA3C7; opacity: 0.16; }
.how-we-work .container { position: relative; z-index: 1; }
.eyebrow--light { color: var(--ddb-yellow); }
.eyebrow--light::before { background: var(--ddb-yellow); }
.hww-head { max-width: 720px; margin-bottom: 52px; }
.hww-title {
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.05;
  margin-top: 18px;
}
.hww-sub { margin-top: 18px; max-width: 600px; color: rgba(255,255,255,0.72); font-size: 1.05rem; }

.hww-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 760px) { .hww-cards { grid-template-columns: 1fr; } }

.hww-card {
  position: relative; text-align: left;
  display: flex; flex-direction: column; gap: 22px;
  padding: 44px; border-radius: 28px; border: 0;
  font-family: inherit; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
.hww-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(0,0,0,0.35); }
.hww-card:active { transform: translateY(-4px) scale(0.985); }
.hww-card--scope { background: var(--ddb-yellow); color: var(--ddb-black); }
.hww-card--sla { background: var(--ddb-red); color: var(--white); }
.hww-card-top { display: flex; align-items: center; justify-content: space-between; }
.hww-num { font-size: 40px; font-weight: 800; opacity: 0.28; line-height: 1; }
.hww-pill {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px;
}
.hww-card--scope .hww-pill { background: var(--ddb-black); color: var(--ddb-yellow); }
.hww-card--sla .hww-pill { background: rgba(255,255,255,0.16); color: var(--white); }
.hww-card h3 { font-size: 2.1rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.05; }
.hww-card > p { font-size: 1rem; line-height: 1.5; opacity: 0.82; margin-top: -6px; }
.hww-view {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 1rem;
  padding: 16px 26px; border-radius: 999px;
  transition: gap var(--dur-fast) var(--ease-out);
}
.hww-view svg { width: 18px; height: 18px; }
.hww-card--scope .hww-view { background: var(--ddb-black); color: var(--ddb-yellow); }
.hww-card--sla .hww-view { background: var(--white); color: var(--ddb-red); }
.hww-card:hover .hww-view { gap: 14px; }

/* ---------- Doc overlays (Scope / SLA) ---------- */
.doc-overlay {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vh, 56px) clamp(16px, 4vw, 60px);
  visibility: hidden; pointer-events: none;
}
.doc-overlay.is-open { visibility: visible; pointer-events: auto; }
body.doc-open { overflow: hidden; }
.doc-backdrop {
  position: absolute; inset: 0;
  background: rgba(16,13,14,0.62);
  opacity: 0; transition: opacity var(--dur-med) var(--ease-out);
  backdrop-filter: blur(2px);
}
.doc-overlay.is-open .doc-backdrop { opacity: 1; }
.doc-sheet {
  position: relative; width: min(1200px, 100%); max-height: 100%;
  background: var(--ddb-off-white); border-radius: 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  overflow: hidden; display: flex; flex-direction: column;
  opacity: 0; transform: translateY(14px) scale(0.97);
  transform-origin: center bottom;
  transition: opacity 200ms var(--ease-out), transform 220ms var(--ease-out);
}
.doc-overlay.is-open .doc-sheet { opacity: 1; transform: none; }
.doc-scroll { overflow-y: auto; padding: clamp(40px, 5vw, 64px) clamp(28px, 5vw, 72px); overscroll-behavior: contain; }
.doc-close {
  position: absolute; top: 22px; inset-inline-end: 22px; z-index: 2;
  width: 46px; height: 46px; border-radius: 999px; border: 0;
  background: var(--ddb-black); color: var(--white);
  display: grid; place-items: center;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.doc-close svg { width: 20px; height: 20px; }
.doc-close:hover { background: var(--ddb-red); }
.doc-close:active { transform: scale(0.94); }
.doc-head { margin-bottom: 40px; max-width: 640px; }
.doc-head h2 { font-size: clamp(1.9rem, 3.5vw, 3rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin-top: 14px; }
.doc-head p { margin-top: 12px; color: #55504f; font-size: 1.05rem; }

/* Scope list */
.scope-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
@media (max-width: 760px) { .scope-list { grid-template-columns: 1fr; } }
.scope-item {
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start;
  padding: 20px 0; border-top: 2px solid var(--acc, var(--ddb-black));
}
.scope-num { font-size: 40px; font-weight: 800; line-height: 1; color: var(--acc, var(--ddb-black)); }
.scope-item p { font-size: 1rem; line-height: 1.5; color: #2c2829; padding-top: 4px; }

/* SLA */
.sla-cats { position: relative; display: flex; flex-direction: column; gap: 56px; }
/* soft brand blobs behind the cards — subtle depth, static (matches Figma v2) */
.sla-cats::before {
  content: ''; position: absolute; inset: -60px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(28% 22% at 12% 6%,  color-mix(in srgb, #4FA3C7 30%, transparent), transparent 70%),
    radial-gradient(26% 20% at 92% 30%, color-mix(in srgb, #F2B705 28%, transparent), transparent 70%),
    radial-gradient(28% 22% at 18% 68%, color-mix(in srgb, #5BB98B 26%, transparent), transparent 70%),
    radial-gradient(30% 24% at 88% 96%, color-mix(in srgb, #EE3E40 24%, transparent), transparent 70%);
  filter: blur(40px); opacity: 0.45;
}
.sla-cat { position: relative; z-index: 1; }
.sla-cat-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 24px; }
.sla-cat-head h3 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ddb-black); }
.sla-cat-sub { font-size: 0.95rem; color: #7a7473; }
/* 2-column masonry — cards keep natural heights and flow without gaps */
.sla-grid { columns: 2; column-gap: 20px; }
@media (max-width: 720px) { .sla-grid { columns: 1; } }
.sla-card {
  position: relative; overflow: hidden; break-inside: avoid; margin-bottom: 20px;
  background: color-mix(in srgb, var(--acc) 9%, white);
  border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent);
  border-radius: 12px;
  font-family: 'Plus Jakarta Sans', var(--font);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .sla-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(36, 31, 33, 0.10); }
}
.sla-bar { position: absolute; top: 0; inset-inline: 0; height: 4px; background: var(--acc); }
.sla-card-in { padding: 22px 24px 24px; }
.sla-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sla-card-head h4 { font-size: 17px; font-weight: 700; line-height: 1.29; letter-spacing: -0.01em; color: var(--ddb-black); }
.sla-badge {
  flex: none; font-size: 13px; font-weight: 700; color: var(--ddb-black);
  background: var(--acc); padding: 7px 14px; border-radius: 999px; white-space: nowrap;
}
.sla-desc { font-size: 14px; line-height: 1.5; color: #55504f; }
.sla-divider { height: 1px; background: rgba(36, 31, 33, 0.1); margin: 16px 0 14px; }
.sla-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #837e7b; margin-bottom: 10px; }
.sla-pr { font-size: 12px; line-height: 1.66; color: #6b6664; }
.sla-pr-grp { margin: 8px 0 2px; color: #55504f; }
.sla-pr-grp:first-child { margin-top: 0; }
.sla-steps { list-style: disc; margin: 0; padding-inline-start: 18px; }
.sla-steps li { margin: 0; }
/* staggered entrance when the SLA overlay opens */
#docSla.is-open .sla-card { animation: slaCardIn 460ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes slaCardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  #docSla.is-open .sla-card { animation: none; }
  .sla-card { transition: none; }
}

/* ---------- Clients split rows ---------- */
.clients-row { display: flex; align-items: center; gap: 28px; margin-top: 30px; }
.clients-row-label {
  flex: none; width: 132px; text-align: end;
  font-size: 14px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ddb-yellow);
}
/* Clip the scrolling names to their own lane so they never slide over the
   Local / International label, with a soft fade in from the label side. */
.marquee-viewport {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
}
.marquee-viewport .marquee { width: max-content; }
.marquee--rev .marquee-track { animation-direction: reverse; }
@media (max-width: 760px) {
  .clients-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .clients-row-label { width: auto; text-align: start; }
  .marquee-viewport { width: 100%; }
}

/* ---------- RTL ---------- */
[dir="rtl"] .eyebrow::before,
[dir="rtl"] .eyebrow--light::before { margin-inline-end: 0; }
[dir="rtl"] .hero-eyebrow::before { margin-inline-end: 0; }
[dir="rtl"] .nav-links a::after { left: auto; right: 0; }
[dir="rtl"] .scope-item { border-top-color: var(--acc); }
[dir="rtl"] .marquee-track { animation-direction: reverse; }
[dir="rtl"] .marquee--rev .marquee-track { animation-direction: normal; }
[dir="rtl"] .work-arrow svg,
[dir="rtl"] .hww-view svg,
[dir="rtl"] .btn svg,
[dir="rtl"] .ia-card-cta svg,
[dir="rtl"] .fineprint-cta svg { transform: scaleX(-1); }

/* ---------- Reduced motion (v2) ---------- */
@media (prefers-reduced-motion: reduce) {
  .doc-sheet { transition: none; transform: none; }
  .doc-backdrop { transition: none; }
  .hww-card:hover { transform: none; }
  .hww-glow { display: none; }
}

/* ============================================================
   v3 additions — nav collab lockup · hello CTA · IA Pitch page
   ============================================================ */

/* ---------- Nav collab lockup ---------- */
.nav-lockup { display: inline-flex; align-items: center; gap: 14px; }
.nav-logo, .nav-ia { display: inline-flex; align-items: center; }
/* height/width only — do NOT force display here, or it overrides the
   light/dark swap below and both logos show at once. */
.nav-logo img { height: 34px; width: auto; }
.nav-ia img { height: 30px; width: auto; }
.ia-img--light { display: block; }
.logo-img--dark, .ia-img--dark { display: none; }
.nav.is-scrolled .logo-img--light, .nav.is-scrolled .ia-img--light { display: none; }
.nav.is-scrolled .logo-img--dark, .nav.is-scrolled .ia-img--dark { display: block; }
.nav-x { font-family: 'Poppins', var(--font); font-weight: 300; font-size: 18px; line-height: 1; color: rgba(255,255,255,0.5); }
.nav.is-scrolled .nav-x { color: rgba(36,31,33,0.4); }
@media (max-width: 620px) {
  .nav-x, .nav-ia { display: none; } /* keep only the DDB mark on very small screens */
}

/* ---------- Hello CTA + scroll cue ---------- */
.hello-cta-group { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: 8px; }
.hello-pitch-cta {
  display: inline-flex; align-items: center; gap: 12px;
  background: #64f000; color: #004137;
  font-family: 'Poppins', var(--font); font-weight: 600; font-size: 17px;
  padding: 22px 40px; border-radius: 999px;
  box-shadow: 0 10px 40px rgba(100,240,0,0.28);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), gap var(--dur-fast) var(--ease-out);
}
.hello-pitch-cta svg { width: 20px; height: 20px; }
.hello-pitch-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 50px rgba(100,240,0,0.42); gap: 16px; }
.hello-pitch-cta:active { transform: translateY(-2px) scale(0.98); }
.hello-scroll {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: 'Poppins', var(--font); font-weight: 500; font-size: 12px; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.55);
  transition: color var(--dur-fast) var(--ease-out);
}
.hello-scroll:hover { color: rgba(255,255,255,0.9); }
.hello-scroll svg { width: 18px; height: 18px; animation: hcBob 1.8s var(--ease-in-out) infinite; }
@keyframes hcBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ---------- IA Pitch page ---------- */
.pitch {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 140px 24px 120px; color: #fff;
  background:
    radial-gradient(58% 48% at 50% 34%, rgba(90,220,40,0.30) 0%, rgba(10,45,34,0) 62%),
    linear-gradient(180deg, #0c342a 0%, #0a2b22 60%, #072019 100%);
}
.pitch-glow { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; }
.pitch-glow--1 { width: 42vw; height: 42vw; left: 50%; top: 16%; transform: translateX(-50%); background: #5bd628; opacity: 0.26; }
.pitch-inner { position: relative; z-index: 2; max-width: 900px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.pitch-badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid rgba(120,240,60,0.55); color: #8bff4a;
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 10px 22px; border-radius: 999px;
}
.pitch-title { font-family: var(--font); font-weight: 800; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.04; letter-spacing: -0.03em; max-width: 15ch; }
.pitch-sub { max-width: 54ch; color: rgba(255,255,255,0.72); font-size: 1.1rem; line-height: 1.55; }
.pitch-cta {
  display: inline-flex; align-items: center; gap: 12px;
  background: #64f000; color: #004137;
  font-family: 'Poppins', var(--font); font-weight: 600; font-size: 17px;
  padding: 22px 44px; border-radius: 999px;
  box-shadow: 0 12px 44px rgba(100,240,0,0.3);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.pitch-cta svg { width: 20px; height: 20px; }
.pitch-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 54px rgba(100,240,0,0.44); }
.pitch-cta:active { transform: translateY(-2px) scale(0.98); }
.pitch-note { font-size: 12px; letter-spacing: 0.06em; color: rgba(255,255,255,0.5); }

.pitch-float {
  position: absolute; z-index: 1;
  transform: rotate(var(--rot, 0deg));
  transition: transform 300ms var(--ease-out);
  will-change: transform;
}
.pitch-stat {
  width: 214px; padding: 22px 24px; border-radius: 18px; text-align: left;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(140,255,90,0.18);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.22);
}
.pitch-stat .s-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8bff4a; margin-bottom: 8px; }
.pitch-stat .s-num { display: block; font-family: var(--font); font-weight: 800; font-size: 3rem; line-height: 1; margin-bottom: 12px; }
.pitch-stat .s-cap { font-size: 13px; color: rgba(255,255,255,0.62); }
.pitch-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(140,255,90,0.2);
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.pitch-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #64f000; flex: none; }
.pf-s1 { left: 3%; top: 45%; --rot: -5deg; }
.pf-s2 { right: 3%; top: 41%; --rot: 5deg; }
.pf-s3 { left: 9%; bottom: 7%; --rot: 3deg; }
.pf-s4 { right: 9%; bottom: 7%; --rot: -3deg; }
.pf-c1 { left: 8%; top: 39%; --rot: -4deg; }
.pf-c2 { right: 8%; top: 37%; --rot: 4deg; }
@media (max-width: 1120px) { .pitch-float { display: none; } }

[dir="rtl"] .hello-pitch-cta svg { transform: scaleX(-1); }

/* ---------- Entry gate + nav reveal ---------- */
/* Hello is a scroll-locked gate — only the CTA advances into the site */
html.gate-locked, body.gate-locked { overflow: hidden; overscroll-behavior: none; }
/* Nav hidden through the hello gate + pitch; reveals at the video banner */
.nav { transition: transform 420ms var(--ease-out), opacity 320ms var(--ease-out); }
.nav.is-hidden { transform: translateY(-104%); opacity: 0; pointer-events: none; }

/* ---------- IA Pitch page (inline — the site begins here) ---------- */
.pitch-page { scroll-margin-top: 0; }

/* small "back to landing" escape */
.pitch-landing-link {
  position: absolute; top: 24px; left: 26px; z-index: 4;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Poppins', var(--font); font-weight: 600; font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.pitch-landing-link svg { width: 16px; height: 16px; }
.pitch-landing-link:hover { color: #8bff4a; transform: translateY(-1px); }
[dir="rtl"] .pitch-landing-link { left: auto; right: 26px; }

/* Onward nudge: resting ghost link → elevated pill after download (overlaid via grid) */
.pitch-onward { position: relative; display: grid; justify-items: center; margin-top: 4px; }
.pitch-onward-rest, .pitch-onward-pill { grid-area: 1 / 1; }
.pitch-onward-rest {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Poppins', var(--font); font-weight: 500; font-size: 15px;
  color: rgba(255, 255, 255, 0.55);
  transition: color var(--dur-fast) var(--ease-out), opacity 260ms var(--ease-out), filter 260ms var(--ease-out);
}
.pitch-onward-rest .onward-chevron { width: 18px; height: 18px; }
.pitch-onward-rest:hover { color: rgba(255, 255, 255, 0.9); }
@media (prefers-reduced-motion: no-preference) {
  .pitch.is-live .pitch-onward-rest .onward-chevron { animation: hcBob 1.8s ease-in-out infinite; }
}
.pitch-onward-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: #64f000; color: #004137;
  font-family: 'Poppins', var(--font); font-weight: 600; font-size: 16px;
  padding: 16px 28px; border-radius: 999px;
  box-shadow: 0 10px 34px rgba(100, 240, 0, 0.34);
  opacity: 0; visibility: hidden; transform: scale(0.96); filter: blur(4px);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out), filter 300ms var(--ease-out), box-shadow var(--dur-med) var(--ease-out), visibility 0s linear 300ms;
}
.pitch-onward-pill svg { width: 20px; height: 20px; }
.pitch.is-downloaded .pitch-onward-rest { opacity: 0; visibility: hidden; filter: blur(4px); pointer-events: none; }
.pitch.is-downloaded .pitch-onward-pill {
  opacity: 1; visibility: visible; transform: none; filter: blur(0);
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out), filter 320ms var(--ease-out), box-shadow var(--dur-med) var(--ease-out), visibility 0s;
  animation: pillPulse 1500ms var(--ease-out) 120ms 1;
}
.pitch-onward-pill:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(100, 240, 0, 0.45); }
.pitch-onward-pill:active { transform: translateY(-2px) scale(0.98); }
[dir="rtl"] .pitch-onward-pill svg { transform: scaleX(-1); }
@keyframes pillPulse {
  0%   { box-shadow: 0 10px 34px rgba(100,240,0,0.34), 0 0 0 0 rgba(100,240,0,0.5); }
  70%  { box-shadow: 0 10px 34px rgba(100,240,0,0.34), 0 0 0 18px rgba(100,240,0,0); }
  100% { box-shadow: 0 10px 34px rgba(100,240,0,0.34), 0 0 0 0 rgba(100,240,0,0); }
}

/* Stat boxes: pop in when the pitch enters view, then idle-wiggle */
.pitch.is-live .pitch-float { animation: pfPop 720ms var(--ease-out) backwards; }
.pitch.is-live .pf-c1 { animation-delay: 40ms; }
.pitch.is-live .pf-c2 { animation-delay: 90ms; }
.pitch.is-live .pf-s1 { animation-delay: 150ms; }
.pitch.is-live .pf-s2 { animation-delay: 220ms; }
.pitch.is-live .pf-s3 { animation-delay: 290ms; }
.pitch.is-live .pf-s4 { animation-delay: 360ms; }
@keyframes pfPop {
  0%   { opacity: 0; transform: rotate(var(--rot, 0deg)) scale(0.55) translateY(34px); }
  55%  { opacity: 1; transform: rotate(var(--rot, 0deg)) scale(1.09) translateY(-7px); }
  75%  { transform: rotate(var(--rot, 0deg)) scale(0.97) translateY(2px); }
  100% { opacity: 1; transform: rotate(var(--rot, 0deg)) scale(1) translateY(0); }
}

.pitch.is-live .pitch-float > * {
  animation: pfWiggle 5.5s ease-in-out 1000ms infinite;
  transition: transform 240ms var(--ease-out), box-shadow 300ms var(--ease-out),
              border-color 240ms var(--ease-out), background 240ms var(--ease-out);
  will-change: transform;
}
.pitch.is-live .pf-s1 > * { animation-delay: 1000ms; }
.pitch.is-live .pf-s2 > * { animation-delay: 1220ms; }
.pitch.is-live .pf-s3 > * { animation-delay: 1090ms; }
.pitch.is-live .pf-s4 > * { animation-delay: 1310ms; }
.pitch.is-live .pf-c1 > * { animation-delay: 940ms; }
.pitch.is-live .pf-c2 > * { animation-delay: 1160ms; }
@keyframes pfWiggle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  20% { transform: translateY(-8px) rotate(-1.5deg); }
  45% { transform: translateY(3px) rotate(1deg); }
  70% { transform: translateY(-5px) rotate(1.6deg); }
  88% { transform: translateY(1px) rotate(-0.6deg); }
}

/* Hover: straighten, pop bigger, freeze the idle wiggle */
.pitch-float:hover, .pitch-float:focus-within {
  transform: rotate(0deg) scale(1.07) translateY(-8px); z-index: 5;
}
.pitch-float:hover > *, .pitch-float:focus-within > * { animation-play-state: paused; }
.pitch-float:hover .pitch-stat, .pitch-float:focus-within .pitch-stat {
  border-color: rgba(140,255,90,0.5); background: rgba(255,255,255,0.10);
  box-shadow: 0 34px 74px rgba(0,0,0,0.36), 0 0 0 1px rgba(140,255,90,0.22);
}
.pitch-float:hover .pitch-chip, .pitch-float:focus-within .pitch-chip {
  border-color: rgba(140,255,90,0.55); background: rgba(140,255,90,0.14);
}

@media (prefers-reduced-motion: reduce) {
  .pitch.is-live .pitch-float,
  .pitch.is-live .pitch-float > * { animation: none !important; }
  .pitch-float:hover, .pitch-float:focus-within { transform: rotate(var(--rot, 0deg)) scale(1.03); }
}

/* ---------- Before-you-go deck reminder ---------- */
.deck-reminder {
  position: relative; overflow: hidden;
  padding: 66px 24px; text-align: center;
  background: #201d1e;
  border-top: 2px solid rgba(100, 240, 0, 0.55);
}
.deck-reminder .dr-glow {
  position: absolute; width: 760px; height: 380px; left: 50%; top: -140px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(100,240,0,0.16), rgba(100,240,0,0));
  filter: blur(46px); pointer-events: none;
}
.dr-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dr-eyebrow {
  font-family: 'Poppins', var(--font); font-weight: 700; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; color: #8bff4a;
}
.dr-title { font-weight: 800; letter-spacing: -0.02em; font-size: clamp(1.7rem, 3.6vw, 2.3rem); color: #F4F4F3; }
.dr-sub { max-width: 46ch; color: rgba(244, 244, 243, 0.6); font-size: 15px; line-height: 1.55; }
.dr-cta {
  margin-top: 6px; display: inline-flex; align-items: center; gap: 10px;
  background: #64f000; color: #004137;
  font-family: 'Poppins', var(--font); font-weight: 600; font-size: 15px;
  padding: 15px 26px; border-radius: 999px;
  box-shadow: 0 8px 28px rgba(100, 240, 0, 0.3);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.dr-cta svg { width: 18px; height: 18px; }
.dr-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(100, 240, 0, 0.42); }
.dr-cta:active { transform: scale(0.97); }

/* Attention pulse on the deck download when summoned from the reminder */
.pitch-cta.pulse-attn { animation: ctaAttn 1.6s var(--ease-out) 1; }
@keyframes ctaAttn {
  0%   { box-shadow: 0 12px 44px rgba(100,240,0,0.3), 0 0 0 0 rgba(100,240,0,0.55); }
  18%  { transform: scale(1.05); }
  70%  { box-shadow: 0 12px 44px rgba(100,240,0,0.3), 0 0 0 22px rgba(100,240,0,0); }
  100% { transform: scale(1); box-shadow: 0 12px 44px rgba(100,240,0,0.3), 0 0 0 0 rgba(100,240,0,0); }
}
@media (prefers-reduced-motion: reduce) { .pitch-cta.pulse-attn { animation: none; } }