/* "Pastel Bulut" theme: cream paper, sunny yellow + lilac, soft organic shapes. Loaded after style.css. */
:root {
  --bg: #fff9ef; --surface: #ffffff; --surface-2: #f4edff;
  --line: rgba(42, 35, 64, .10); --line-2: rgba(42, 35, 64, .18);
  --text: #2a2340; --muted: #655c7c; --dim: #9a91ad;
  --accent: #ffc93c; --accent-2: #c9b6ff; --on-accent: #2a2340;
  --ink-accent: #7351d6;           /* readable lilac for text on light backgrounds */
  --butter: #fff0bf; --lilac: #ece3ff; --mint: #dcf4e8; --peach: #ffe4d4; --sky: #e0edff;
  color-scheme: light;
}
html { overflow-x: clip; }
html body { background: var(--bg); color: var(--text); }
::selection { background: var(--accent-2); color: var(--text); }
body::after { background-image: radial-gradient(rgba(115, 81, 214, .10) 1.2px, transparent 1.4px); background-size: 28px 28px; opacity: 1; }

/* nav */
.nav.scrolled { background: rgba(255, 249, 239, .82); border-color: var(--line); }
.nav-links { background: #fff; border-color: transparent; box-shadow: 0 6px 24px -12px rgba(42, 35, 64, .25); }
.nav-links a:hover, .nav-links a.active { background: var(--lilac); color: var(--text); }
.nav-links a.active { box-shadow: none; }
.logo-mark { background: var(--accent); color: var(--text); }

/* buttons */
.btn { background: var(--text); color: #fff; }
.btn:hover { background: #3a3157; }
.btn.accent { background: var(--accent); color: var(--text); box-shadow: 0 10px 24px -10px rgba(255, 170, 0, .7); }
.btn.accent:hover { background: #ffd35f; }
.btn.ghost { color: var(--text); border-color: var(--line-2); background: #fff; }
.btn.ghost:hover { background: var(--lilac); }

/* hero */
.hero::before { background: radial-gradient(closest-side, rgba(255, 201, 60, .35), transparent 70%); }
.hero::after { background: radial-gradient(closest-side, rgba(201, 182, 255, .45), transparent 70%); }
.pill { background: #fff; border-color: transparent; box-shadow: 0 6px 20px -12px rgba(42, 35, 64, .3); color: var(--muted); }
.hero h1 em { color: var(--ink-accent); }
.hero-sub { color: var(--muted); }
.stats { border-color: var(--line-2); }
.stat b { color: var(--text); }
.stat:nth-child(1) b { box-shadow: inset 0 -.32em 0 var(--accent); }
.stat:nth-child(2) b { box-shadow: inset 0 -.32em 0 var(--accent-2); }
.stack::before {
  content: ""; position: absolute; inset: 4% -2% -4% 4%; z-index: 0;
  background: var(--lilac); border-radius: 46% 54% 42% 58% / 52% 40% 60% 48%;
  animation: morph 14s ease-in-out infinite alternate;
}
.stack::after {
  content: ""; position: absolute; width: 34%; aspect-ratio: 1; right: -4%; bottom: -2%; z-index: 0;
  background: var(--accent); border-radius: 50%; opacity: .85;
}
@keyframes morph { to { border-radius: 58% 42% 55% 45% / 42% 58% 44% 56%; } }
.stack .card { box-shadow: 0 30px 60px -28px rgba(42, 35, 64, .45), 0 0 0 6px #fff; border-radius: 22px; }
.stack .card:hover { box-shadow: 0 34px 70px -28px rgba(42, 35, 64, .5), 0 0 0 6px var(--accent); }
.stack .card figcaption { color: #fff; }
.badge-spin text { fill: var(--text); }
.badge-spin .star { fill: var(--ink-accent); }

/* decorative layer (markup injected in the hero) */
.deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.deco .blob { position: absolute; border-radius: 50%; filter: blur(.5px); }
.deco .b1 { width: 120px; height: 120px; left: 46%; top: 12%; background: var(--mint); border-radius: 42% 58% 60% 40% / 50% 45% 55% 50%; }
.deco .b2 { width: 70px; height: 70px; left: 30%; bottom: 3%; background: var(--peach); }
.deco .b3 { width: 46px; height: 46px; left: 40%; bottom: 18%; background: var(--sky); }
.deco .spark { position: absolute; fill: var(--accent); animation: twinkle 3.6s ease-in-out infinite; }
.deco .sp1 { width: 34px; left: 52%; top: 64%; }
.deco .sp2 { width: 22px; left: 8%; top: 18%; fill: var(--accent-2); animation-delay: 1.2s; }
.deco .sp3 { width: 18px; right: 4%; top: 14%; fill: var(--ink-accent); animation-delay: 2.1s; }
.deco .squiggle { position: absolute; width: 180px; left: 30%; top: 8%; fill: none; stroke: var(--accent-2); stroke-width: 5; stroke-linecap: round; }
@keyframes twinkle { 50% { transform: scale(.7) rotate(20deg); opacity: .6; } }

/* marquee: a soft butter ribbon */
.marquee { background: var(--butter); border: 0; transform: rotate(-1.2deg); margin: 10px -12px; box-shadow: 0 10px 30px -18px rgba(42, 35, 64, .4); }
.marquee span { color: var(--muted); }
.marquee span:nth-child(even) { color: var(--ink-accent); }
.marquee span::after { color: var(--ink-accent); }

/* section heads */
.eyebrow { display: inline-flex; color: var(--text); background: var(--accent); padding: 6px 12px; border-radius: 99px; transform: rotate(-2deg); }
.eyebrow::before { color: var(--text); }
.sec-head h2 em { color: var(--ink-accent); }
.sec-head p { color: var(--muted); }
.sec-head .big-num { -webkit-text-stroke: 2px var(--accent-2); }

/* featured + event cases become rounded pastel blocks */
.case {
  position: relative; overflow: hidden; border-top: 0; border-radius: 44px;
  margin: 0 var(--gutter) 24px; background: var(--cb, var(--lilac));
}
#cases .case:nth-child(5n+1) { --cb: var(--lilac); }
#cases .case:nth-child(5n+2) { --cb: var(--butter); }
#cases .case:nth-child(5n+3) { --cb: var(--mint); }
#cases .case:nth-child(5n+4) { --cb: var(--sky); }
#cases .case:nth-child(5n+5) { --cb: var(--peach); }
#event-cases .case:nth-child(3n+1) { --cb: var(--butter); }
#event-cases .case:nth-child(3n+2) { --cb: #ffe3f1; }
#event-cases .case:nth-child(3n+3) { --cb: var(--lilac); }
.case::before {
  content: ""; position: absolute; width: 340px; height: 340px; right: -110px; top: -130px; border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 30%, white); opacity: .55;
}
.case .wrap { width: calc(100% - 2 * clamp(20px, 4vw, 60px)); position: relative; }
.case .rail { padding-inline: clamp(20px, 4vw, 60px); scroll-padding-inline: clamp(20px, 4vw, 60px); }
.case h3 em { color: color-mix(in srgb, var(--brand) 55%, #2a2340); }
.case-index { color: color-mix(in srgb, var(--brand) 55%, #2a2340); }
.case-index i { box-shadow: 0 0 0 6px #fff; }
.case-body > p { color: var(--muted); }
.case-kicker { color: var(--muted); }
.tags li { background: #fff; border-color: transparent; color: var(--text); display: inline-flex; align-items: center; gap: 7px; }
.tags li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.facts { border-color: rgba(42, 35, 64, .12); }
.work { border-radius: 20px; background: #fff; box-shadow: 0 18px 40px -26px rgba(42, 35, 64, .45); }
.work::after { box-shadow: inset 0 0 0 1px rgba(42, 35, 64, .06); }
.work.print { box-shadow: none; }
.work.print::before { --m: rgba(42, 35, 64, .55); }
.print-tag { color: #fff; background: rgba(42, 35, 64, .78); }
.progress { background: rgba(42, 35, 64, .12); }
.arrow { background: #fff; border-color: transparent; }
.arrow:hover { background: var(--accent); color: var(--text); }
.rail-count { color: var(--muted); }

/* motion section as a lilac block */
#motion { background: var(--lilac); border-radius: 44px; margin: 60px var(--gutter) 0; padding-bottom: clamp(50px, 6vw, 80px); }
#motion .wrap { width: calc(100% - 2 * clamp(20px, 4vw, 60px)); }
#motion .sec-head { padding-top: clamp(50px, 6vw, 80px); }
.phone { background: linear-gradient(160deg, #ffffff, #f1eaff); box-shadow: 0 24px 50px -26px rgba(42, 35, 64, .45); }
.phone:hover { box-shadow: 0 24px 50px -26px rgba(42, 35, 64, .45), 0 0 0 2px var(--accent); }
.phone .meta b { color: var(--text); }
.phone .play { background: var(--accent); color: var(--text); }

/* other brands */
.filter { background: #fff; border-color: transparent; color: var(--muted); }
.filter.on { background: var(--accent); color: var(--text); }
.filter.on sup { color: var(--muted); }
.tile { border-radius: 28px; box-shadow: 0 18px 40px -26px rgba(42, 35, 64, .5); }
.tile .info, .tile .badge, .tile .count { color: #fff; }
.tile:hover::after { box-shadow: inset 0 0 0 3px var(--accent); }
.tile.name-only { background: var(--lilac); }
.tile.name-only::before { background: none; }
.tile.name-only .mark, .tile.name-only .info { color: var(--text); }
.tile.name-only .badge { color: var(--text); background: #fff; border-color: transparent; }

footer.foot { color: var(--dim); border-color: var(--line-2); }

/* lightbox and cursor stay dark for viewing */
.lb { color: #f5ede0; --text: #f5ede0; --muted: #aca191; --line-2: rgba(255, 240, 220, .17); }
.cursor { background: var(--accent); color: var(--text); }

@media (max-width: 760px) {
  .case { border-radius: 30px; margin: 0 10px 16px; }
  #motion { border-radius: 30px; margin: 40px 10px 0; }
  .deco .b1 { width: 70px; height: 70px; left: 70%; top: 6%; }
  .deco .squiggle { width: 120px; left: 50%; top: 3%; }
}

/* headings use one typeface and colour throughout (no serif-italic accent words) */
.hero h1 em, .sec-head h2 em, .case h3 em {
  font-family: inherit; font-style: normal; font-weight: inherit; letter-spacing: inherit; color: inherit; padding: 0;
}
.tile.name-only .mark { font-family: var(--display); font-style: normal; font-weight: 700; letter-spacing: -.02em; }
/* without the narrow serif accent the hero lines run wider; keep three lines on desktop */
.hero h1 { font-size: clamp(38px, 4.8vw, 78px); }