/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --white:   #FFFFFF;
  --black:   #1F1F1F;
  --red:     #D42222;
  --blue:    #6B7FD4;
  --green:   #14A62A;
  --grey:    #888888;
  --border:  #E5E5E5;
  --banner-bg: #111111;
  --stamp-ink: #33312f;

  --font-heading: 'Domine', Georgia, serif;
  --font-body:    'Space Grotesk', Inter, sans-serif;

  --nav-h: 68px;
  --pad-x: 60px;
  --max-w: 1200px;
}

@media (max-width: 768px) {
  :root { --pad-x: 20px; }
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  /* No global scroll-behavior:smooth — the one in-page anchor link (#works)
     already does its own scrollIntoView({behavior:'smooth'}) in JS with
     preventDefault, so this was doing nothing for navigation but was still
     applied to every plain wheel/trackpad scroll — that's what caused the
     page to overshoot and spring back ("bounce") when scrolling past the
     footer on Chrome/Edge on Windows. */
  overflow-x: hidden; /* belt-and-braces alongside body's own overflow-x:hidden below — some content (e.g. the arc carousel, which needs overflow:visible for its own vertical bleed) can end up wider than the viewport, and relying on body alone to clip that isn't reliable in every browser */
  background: #0d0d0d; /* matches .footer — every page ends on the dark footer, so any residual overscroll edge shows this instead of flashing white */
  overscroll-behavior-y: contain; /* stops Chrome/Edge's scroll-past-the-end glow on Windows touchpads. "contain" only (not "none") and only on html, not body — the html+body "none" combo previously locked up scrolling entirely */
  /* Horizontal counterpart of the line above. Checked with a script that
     flags every element whose rendered box extends past the viewport
     edge, on this page and a case-study page, at both desktop and
     mobile widths, with the arc carousel animating and idle:
     document.documentElement.scrollWidth and document.body.scrollWidth
     matched window.innerWidth exactly every time — there's no element
     actually wider than the page (the hero marquee is, deliberately,
     but .hero-banner already clips it locally with its own
     overflow:hidden). So there's no real horizontal scroll distance to
     be at the "end" of; the sideways slide-and-snap-back on drag/scroll
     near the left/right edge is the browser's native edge-swipe/scroll
     -chaining gesture (e.g. the swipe-back-navigation affordance),
     which fires regardless of whether there's anything to scroll to.
     `contain` alone (stops chaining, but per spec still allows the
     element's own local bounce/glow affordance to play) wasn't enough —
     confirmed still visible after trying it — so this is `none` (also
     suppresses that local affordance), unlike the `-y` line above which
     stays `contain`. This is a narrower risk than a `none` on the
     vertical axis would be: html has no horizontal scroll content at
     all (overflow-x:hidden, scrollWidth already == innerWidth per the
     check above), so there's nothing for this to "lock up" — it can
     only suppress a gesture with no scrollable destination anyway. Only
     set on html, not body, same as -y. */
  overscroll-behavior-x: none;
}
body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--black);
  /* overflow: hidden (not just overflow-x) is load-bearing: html is the
     only element that should ever scroll (confirmed via
     document.scrollingElement). Because overflow-x was hidden here but
     overflow-y was left unset, the CSS overflow spec forces overflow-y
     to compute to `auto` instead of `visible` (an element can't mix
     visible on one axis with non-visible on the other) — quietly
     turning body into its own scroll container. The arc carousel's
     cards (deliberately transform-only, see js/main.js) dip past
     .arc-section/.arc-stage's `overflow: visible` into the footer's
     area, and with body an `auto` container, its scrollHeight kept
     recomputing to include however far the currently-mid-swing cards
     reached — a value that grew and shrank every frame as the carousel
     spun, even though html's real scrollHeight (the actual scroll
     limit) stayed fixed at the footer's bottom. That phantom, oscillating
     region is what showed up as a white gap under the footer and a
     spring-back/bounce when scrolling to the bottom. Explicitly clipping
     both axes here removes the ambiguity — the dipping cards still
     paint into the footer's area fine (that area is well within body's
     natural height), they just stop inflating body's own overflow.
     Do not narrow this back to overflow-x alone. */
  overflow: hidden;
  cursor: none;
}
a { color: inherit; text-decoration: none; }

/* Hide the scrollbar entirely — scrolling itself still works fine via
   wheel/trackpad/touch/keyboard, this only removes the visible track. */
html {
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* old Edge/IE */
}
::-webkit-scrollbar { display: none; width: 0; height: 0; }  /* Chrome/Edge/Safari */
img { display: block; max-width: 100%; }

/* ============================================================
   PAGE LOADER — index.html only (see the markup right after <body>
   and the timing IIFE at the top of js/main.js).
   ============================================================ */
#page-loader {
  position: fixed;
  inset: 0;
  background: var(--white);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
}
#page-loader.loader-hidden { opacity: 0; pointer-events: none; }
.loader-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.loader-dot { width: 18px; height: 18px; border-radius: 50%; animation: loader-bounce 1s ease-in-out infinite; }
.loader-dot--red   { background: var(--red); }
.loader-dot--blue  { background: var(--blue); }
.loader-dot--green { background: var(--green); }
.loader-dot:nth-child(1) { animation-delay: 0s; }
.loader-dot:nth-child(2) { animation-delay: 0.1s; }
.loader-dot:nth-child(3) { animation-delay: 0.2s; }
@keyframes loader-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(-10px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .loader-dot { animation: none !important; opacity: 1; }
}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
#cursor-dot {
  width: 10px;
  height: 10px;
  background: var(--blue);
  border-radius: 50%;
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: transform 0.08s ease, opacity 0.2s ease;
}
#cursor-dot.hovering {
  transform: translate(-50%, -50%) scale(2.5);
  opacity: 0.7;
}
@media (hover: none), (pointer: coarse) {
  #cursor-dot { display: none; }
  body { cursor: auto; }
  * { cursor: auto !important; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: var(--white);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--pad-x);
  z-index: 1000;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--black);
  flex-shrink: 0;
  grid-column: 1;
  justify-self: start;
}
.logo-svg {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
}

/* Desktop links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 40px;
  grid-column: 2;
  justify-self: center;
}
.nav-links a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--black);
  position: relative;
  padding-bottom: 4px;
  transition: font-weight 0.15s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  background: var(--black);
  width: 0;
  transition: width 0.25s cubic-bezier(0.4,0,0.2,1);
}
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }
.nav-links a.active { font-weight: 600; }

/* Back to works (case study pages) */
.nav-back {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--black);
  border: 1.5px solid var(--black);
  padding: 6px 16px;
  border-radius: 100px;
  transition: background 0.2s, color 0.2s;
  grid-column: 3;
  justify-self: end;
}
.nav-back:hover { background: var(--black); color: var(--white); }

/* Mobile hamburger */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: none;
  gap: 5px;
  flex-shrink: 0;
  grid-column: 3;
  justify-self: end;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--black);
  border-radius: 1px;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.2s;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu overlay */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--white);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  animation: fadeIn 0.22s ease;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-family: var(--font-body);
  font-size: 28px;
  font-weight: 400;
  color: var(--black);
}
.mobile-menu a.active { font-weight: 600; }

@media (max-width: 640px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .nav-back { grid-column: 2; justify-self: center; }
}

/* ============================================================
   NAV — SCROLL-DIRECTION BEHAVIOUR
   js/main.js adds .nav--hidden when scrolling down and removes it on
   any upward scroll (and always at the top of the page).
   ============================================================ */
.nav {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.nav.nav--hidden { transform: translateY(-100%); }

/* ============================================================
   CUSTOM SCROLLBAR — project (case study) pages only; created by
   js/main.js. The native scrollbar stays hidden (see above); this is
   a slim, draggable replacement on the right edge. mix-blend-mode keeps
   the thumb visible on light and dark sections alike.
   ============================================================ */
.scrollbar {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 16px;                       /* generous grab area, thumb is slimmer */
  z-index: 1001;
  mix-blend-mode: difference;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.scrollbar[hidden] { display: none; }
.scrollbar__thumb {
  position: absolute;
  top: 0; right: 3px;
  width: 6px;
  min-height: 40px;
  border-radius: 999px;
  background: #fff;
  opacity: 0.38;
  will-change: transform;
  transition: width 0.18s ease, right 0.18s ease, opacity 0.18s ease;
}
.scrollbar:hover .scrollbar__thumb { width: 10px; right: 3px; opacity: 0.6; }
.scrollbar.is-dragging .scrollbar__thumb { width: 10px; opacity: 0.85; }
html.is-dragging-scrollbar, html.is-dragging-scrollbar * { user-select: none !important; -webkit-user-select: none !important; }

/* Touch devices: wider grab area, and the thumb only shows while
   scrolling or dragging (like the native mobile scrollbar). */
@media (hover: none), (pointer: coarse) {
  .scrollbar { width: 24px; }
  .scrollbar__thumb { width: 6px; right: 4px; opacity: 0; transition: opacity 0.3s ease; }
  .scrollbar:hover .scrollbar__thumb { width: 6px; opacity: 0; }
  .scrollbar.is-active .scrollbar__thumb { opacity: 0.55; }
  .scrollbar.is-dragging .scrollbar__thumb { width: 8px; opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
  .scrollbar__thumb { transition: none; }
}

/* ============================================================
   PAGE WRAPPER
   ============================================================ */
.page-body {
  padding-top: var(--nav-h);
  /* Hard vertical clip at the true end of the page (this <main> wraps
     everything through the footer). The arc carousel's cards
     (index.html only) are animated purely via CSS transform so nothing
     is added/removed from layout each frame, but .arc-section/.arc-stage
     use overflow:visible so the outer cards can dip past their own box
     into the footer's area (see the ARC CAROUSEL comment in js/main.js).
     Without a clip somewhere past the footer, that transform overflow
     keeps leaking up to body/html's scrollable-overflow calculation,
     and since the cards are mid-swing at different depths every frame,
     that leaked overflow grows and shrinks continuously — confirmed via
     document.body.scrollHeight polling, which sawtoothed between ~5195
     and ~5295 while document.documentElement.scrollHeight (the real,
     intended scroll limit) stayed rock solid. That fluctuating phantom
     region below the footer is what showed up as a white gap and a
     spring-back/bounce when scrolling to the bottom. Clipping here
     absorbs it: this element's own natural height already ends exactly
     at the footer's bottom, so the cards still visually dip into the
     footer's area fine (that's well inside this box) — they just can't
     inflate anything above it anymore.

     overflow-x must be set here too (not left implicit) — this was the
     actual cause of a follow-up horizontal-bounce bug. The arc cards
     swing wide as well as low (same transform, same overflow:visible on
     .arc-section/.arc-stage), and with only overflow-y declared here,
     the CSS overflow spec forces this element's overflow-x to compute
     to `auto` instead of `visible` (an element can't mix visible on one
     axis with non-visible on the other — the same rule documented on
     body below). That quietly turned this <main> into its own
     independent, genuinely-scrollable horizontal container: measured
     clientWidth 1422 vs scrollWidth 1690, a real 268px of horizontal
     scroll room, traced to specific .arc-card elements extending exactly
     268px past this element's right edge. html's own overflow-x/
     overscroll-behavior-x were already correctly locked down, but that's
     a different element — dragging near the edge was scrolling *this*
     nested auto container instead, which had no overscroll-behavior set
     at all. Explicit `hidden` on both axes removes the ambiguity, same
     fix as body's overflow below. */
  overflow: hidden;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.hero-body {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 48px var(--pad-x) 40px;
}

.hero-heading {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
}

.hero-heading p {
  font-family: var(--font-heading);
  font-size: clamp(28px, 5.5vw, 60px);
  font-weight: 700;
  color: var(--black);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 0.08em;
}
.hero-heading p:last-child { margin-bottom: 0; }

.hero-line3 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.28em;
}

/* Typing word */
.typing-word {
  font-family: var(--font-heading);
  font-size: clamp(28px, 5.5vw, 60px);
  font-weight: 700;
  display: inline-flex;
  align-items: baseline;
  min-width: 1ch;
}
.typing-caret {
  display: inline-block;
  width: 2px;
  height: 0.85em;
  margin-left: 2px;
  vertical-align: baseline;
  position: relative;
  top: 0.05em;
  animation: blink 1.06s step-end infinite;
}
@keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* Banner marquee */
.hero-banner {
  background: var(--banner-bg);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.hero-banner-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee 32s linear infinite;
  padding: 13px 0;
  will-change: transform;
}
.hero-banner-track span.text {
  font-family: var(--font-body);
  font-size: clamp(11px, 1.2vw, 15px);
  color: #ffffff;
  letter-spacing: 0.03em;
  font-weight: 400;
  opacity: 0.85;
  white-space: pre;
}
.hero-banner-track .star {
  display: inline-flex;
  align-items: center;
  padding: 0 24px;
}
@keyframes marquee {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner-track, .typing-caret { animation: none !important; }
}

/* ============================================================
   SECTION SHARED
   ============================================================ */
.section {
  padding: 100px var(--pad-x);
}
.section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.section-title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 700;
  color: var(--black);
  margin-bottom: 60px;
}

@media (max-width: 768px) {
  .section { padding: 64px var(--pad-x); }
  .section-title { margin-bottom: 36px; }
}

/* ============================================================
   PROJECTS
   ============================================================ */
.projects-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.project-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  display: block;
  width: 100%;
  max-width: 1040px;
  aspect-ratio: 1672 / 941; /* matches the project cover images 1:1, no cropping */
  background: #111;
}
.project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: block;
}
.project-card:hover img { transform: scale(1.03); }

.project-card-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 28px 32px;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
}
.project-card-tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 6px;
}
.project-card-title {
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}

/* Placeholder image bg */
.project-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.05em;
}

/* ============================================================
   AI LAB (part of Works)
   ============================================================ */
.ai-lab-divider {
  width: 100%;
  max-width: 1040px;
  height: 1px;
  margin: 56px auto 56px;
  background: rgba(0,0,0,0.1);
}

.ai-lab {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ai-lab-label {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  color: var(--black);
  margin-bottom: 8px;
}

.ai-lab-subtitle {
  font-family: var(--font-body);
  font-size: 15px;
  color: rgba(0,0,0,0.55);
  margin-bottom: 32px;
}

.ai-lab-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  width: 100%;
}

.ai-lab-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  display: block;
  width: 100%;
  max-width: 504px; /* half the main project card's dimensions */
  aspect-ratio: 1672 / 941;
  background: #111;
  text-align: left;
}
.ai-lab-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: block;
}
.ai-lab-card:hover img { transform: scale(1.03); }

.ai-lab-card .project-card-info {
  padding: 16px 18px;
}
.ai-lab-card .project-card-tag {
  font-size: 10px;
}
.ai-lab-card .project-card-title {
  font-size: clamp(15px, 1.6vw, 19px);
}

/* "Explore More Projects" link + target section */
.more-projects-link {
  display: block;
  width: fit-content;
  margin: 40px auto 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: rgba(0,0,0,0.55);
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.more-projects-link span {
  display: inline-block;
  transition: transform 0.25s ease;
}
.more-projects-link:hover {
  color: var(--black);
  border-color: currentColor;
}
.more-projects-link:hover span { transform: translateX(4px); }

@media (max-width: 640px) {
  .ai-lab-divider { margin: 40px auto; }
  .ai-lab-card { max-width: 100%; }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about {
  background: var(--white);
}

.about-inner {
  display: grid;
  grid-template-columns: 1fr 520px;
  gap: 64px;
  align-items: start;
  max-width: var(--max-w);
  margin: 0 auto;
}

.about-rows { display: flex; flex-direction: column; }

.about-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--border);
}
.about-row:first-child { border-top: 1px solid var(--border); }

.about-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
  padding-top: 2px;
}
.about-text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--black);
}

/* Photo card — scrapbook Polaroid (shadow, tilt & torn-paper backing are
   baked into the artwork itself; the profile photo is pre-composited into
   its window so it stays pixel-aligned with the frame at every size). */
.about-photo-wrap {
  position: sticky;
  top: calc(var(--nav-h) + 32px);
}
.about-photo-card {
  display: block;
}
.about-photo-card img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}
.about-photo-wrap:hover .about-photo-card img {
  transform: scale(1.015);
}
.about-stamp {
  position: absolute;
  left: 16.6%;
  top: 85.9%;
  width: 92px;
  height: 92px;
  transform: translate(-50%, -50%) rotate(-6deg);
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.2));
}
.about-stamp svg { display: block; width: 100%; height: 100%; }
.about-stamp-text {
  font-family: 'Courier New', Courier, monospace;
  font-size: 9.68px;
  font-weight: 700;
  fill: var(--stamp-ink);
}

@media (max-width: 900px) {
  /* Below this width the photo drops from beside the text (where it's
     sticky and costs no extra scroll height) to stacked below it —
     that adds the photo's full height on top of the text, so this
     section gets its own smaller padding + a smaller photo here rather
     than waiting for the general 768px breakpoint, to keep the section
     from ballooning to ~2 viewports tall. */
  #about {
    padding: 64px var(--pad-x);
  }
  .about-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .about-photo-wrap {
    position: relative;
    max-width: 300px;
    margin: 0 auto;
  }
  .about-stamp {
    width: 68px;
    height: 68px;
  }
  .about-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 24px 0;
  }
}

/* ============================================================
   ARC CAROUSEL
   ============================================================ */
.arc-section {
  background: var(--white);
  overflow: visible; /* let the outer cards dip down past the section and be covered by the footer, instead of being clipped/hidden abruptly */
  padding-bottom: 0; /* the arc's own track already ends right above the footer — the default .section bottom padding just left a gap */
}

.arc-title-dots {
  color: var(--green);
}

/* .arc-stage centers the .arc-track "arc". Cards swing along a much
   bigger circle than this box and are never hidden by opacity — the
   outer ones simply dip low enough to be painted over by the footer
   (which comes right after this section in the HTML), so they read as
   sliding behind it rather than popping in/out of existence. That only
   works with overflow:visible here (and on .arc-section above). */
.arc-stage {
  /* break out of .section's left/right padding so the carousel spans
     the full viewport width (edge to edge) while the heading above it
     keeps its normal inset */
  width: auto;
  margin-left: calc(var(--pad-x) * -1);
  margin-right: calc(var(--pad-x) * -1);
  display: flex;
  justify-content: center;
  overflow: visible;
}

.arc-track {
  position: relative;
  margin: 0 auto;
}

.arc-card {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 16px;
  overflow: hidden;
  background: #ddd;
  transform-origin: center center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.16);
  will-change: transform, opacity;
  container-type: inline-size;
  user-select: none;
  -webkit-user-drag: none;
}

/* placeholder fallback color per card, visible until (or instead of) a
   real photo loads — see ARC_CONFIG.images in js/main.js. The carousel
   is built from repeats of 7 template cards, so this cycles every 7
   DOM positions (nth-child(7n+1)...) rather than only matching the
   first 7 cards in the whole (much longer) repeated strip. */
.arc-card:nth-child(7n+1) .arc-card-media { background: #b5c4e8; }
.arc-card:nth-child(7n+2) .arc-card-media { background: #e8c4b5; }
.arc-card:nth-child(7n+3) .arc-card-media { background: #c4e8b5; }
.arc-card:nth-child(7n+4) .arc-card-media { background: #e8e4b5; }
.arc-card:nth-child(7n+5) .arc-card-media { background: #d4b5e8; }
.arc-card:nth-child(7n+6) .arc-card-media { background: #b5e8e0; }
.arc-card:nth-child(7n+7) .arc-card-media { background: #e8b5c4; }

.arc-card-media {
  position: absolute;
  inset: 0;
}
.arc-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills the card without distorting the photo */
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.arc-card-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 9% 8% 8%;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.05) 55%, transparent 75%);
}
.arc-card-sublabel {
  font-family: var(--font-body);
  font-size: clamp(8px, 3.4cqw, 10px);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 0.4em;
}
.arc-card-name {
  font-family: var(--font-heading);
  font-size: clamp(13px, 5.2cqw, 17px);
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: #0d0d0d;
  padding: 64px var(--pad-x) 32px;
  /* The arc carousel's cards are position:absolute with their own
     z-index (up to ~1000), which by default renders them above normal
     (static) elements regardless of DOM order — including the footer,
     even though it comes after the carousel in the HTML. Positioning
     the footer and giving it a z-index higher than any card's puts it
     back on top, so the fading cards are fully hidden behind it rather
     than showing through as translucent ghosts over the footer text. */
  position: relative;
  z-index: 2000;
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.footer-connect {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.star {
  display: inline-flex;
  align-items: center;
  color: currentColor;
}
.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 40px;
  margin-bottom: 64px;
}
.footer-link-group {}
.footer-link-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 12px;
}
.footer-link-group a {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}
.footer-link-group a:hover { color: var(--blue); }
.footer-link-group a .arrow {
  font-size: 14px;
  display: inline-block;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-bottom-left {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-copyright {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.25);
}

@media (max-width: 640px) {
  .footer-links { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* ============================================================
   CASE STUDY PAGE
   ============================================================ */
.cs-hero {
  padding: 80px var(--pad-x) 60px;
  border-bottom: 1px solid var(--border);
}
.cs-hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.cs-tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 16px;
}
.cs-title {
  font-family: var(--font-heading);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 700;
  color: var(--black);
  line-height: 1.15;
  margin-bottom: 40px;
}
.cs-cover {
  width: 100%;
  aspect-ratio: 16/7;
  object-fit: cover;
  border-radius: 12px;
  background: #e8e8e8;
}
.cs-cover-placeholder {
  width: 100%;
  aspect-ratio: 16/7;
  background: #e8e8e8;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--grey);
}

.cs-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 40px 0;
}
.cs-meta-item {}
.cs-meta-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 6px;
}
.cs-meta-val {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--black);
  font-weight: 500;
}

.cs-body {
  padding: 80px var(--pad-x);
}
.cs-body-inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.cs-section-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 12px;
}
.cs-section-heading {
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 700;
  color: var(--black);
  margin-bottom: 20px;
  line-height: 1.3;
}
.cs-section-text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.8;
  color: #444;
}
.cs-image-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: #f0f0f0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--grey);
}
.cs-full-image {
  display: block;
  /* Break out of .cs-body-inner's 800px column so this matches the
     cover image's width (which sits in the wider .cs-hero-inner,
     max-width: var(--max-w)) instead of the narrower text column.
     Centred with position/margin rather than transform:translateX —
     .reveal (below) also animates `transform`, and since it's a plain
     class of equal specificity defined later in this file, it would
     silently overwrite a transform set here once the fade-in played. */
  --cs-full-w: min(var(--max-w), calc(100vw - 2 * var(--pad-x)));
  width: var(--cs-full-w);
  max-width: none;
  position: relative;
  left: 50%;
  margin-left: calc(var(--cs-full-w) / -2);
  height: auto;
  border-radius: 10px;
}
.cs-coming-soon {
  text-align: center;
  padding: 80px 20px;
  font-family: var(--font-body);
  color: var(--grey);
  font-size: 16px;
  line-height: 1.7;
}
.cs-coming-soon strong {
  font-family: var(--font-heading);
  display: block;
  font-size: 28px;
  color: var(--black);
  margin-bottom: 12px;
}

@media (max-width: 768px) {
  .cs-meta { grid-template-columns: repeat(2, 1fr); }
  .cs-body  { padding: 48px var(--pad-x); }
}

.cs-meta--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 768px) {
  .cs-meta--5 { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   CASE STUDY CONTENT BLOCKS
   (generic, reusable across case studies with rich research content)
   ============================================================ */
.cs-body-dark { background: var(--black); }
.cs-body-dark .cs-section-text { color: #ccc; }
.cs-body-dark .cs-section-heading { color: var(--white); }

.cs-glance-row { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 768px) { .cs-glance-row { grid-template-columns: 1fr; } }

.cs-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.cs-stat { background: var(--white); padding: 22px; }
.cs-stat-num { font-family: var(--font-heading); font-weight: 700; font-size: clamp(26px, 3vw, 36px); color: var(--blue); }
.cs-stat-num span { font-size: 0.5em; vertical-align: super; }
.cs-stat-label { font-family: var(--font-body); font-size: 12px; line-height: 1.5; color: var(--grey); margin-top: 6px; }

.cs-numbered-list { display: flex; flex-direction: column; margin-top: 28px; }
.cs-numbered-item { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--border); }
.cs-numbered-item:first-child { border-top: none; padding-top: 0; }
.cs-numbered-item .cs-num { font-family: var(--font-body); font-weight: 600; font-size: 12px; color: var(--blue); flex-shrink: 0; width: 20px; }
.cs-numbered-item p { font-size: 14px; line-height: 1.7; color: #444; }
.cs-numbered-item strong { color: var(--black); }

.cs-process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 28px; }
@media (max-width: 768px) { .cs-process-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .cs-process-grid { grid-template-columns: 1fr; } }
.cs-process-step { border-top: 2px solid var(--border); padding-top: 16px; }
.cs-process-eyebrow { font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; }
.cs-process-step h3 { font-family: var(--font-heading); font-size: 17px; color: var(--black); margin-bottom: 8px; }
.cs-process-step p { font-size: 13px; line-height: 1.6; color: #555; margin-bottom: 14px; }
.cs-tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-tag-pill { font-family: var(--font-body); font-size: 11px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 20px; color: var(--grey); }

.cs-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
@media (max-width: 768px) { .cs-photo-grid { grid-template-columns: 1fr 1fr; } }
.cs-photo-grid .cs-image-placeholder { aspect-ratio: 4/3; }
.cs-field-photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 3px solid #000; display: block; }
.cs-photo-caption { font-family: var(--font-body); font-size: 12px; color: var(--grey); text-align: center; margin-top: 8px; }

.cs-observation-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: 8px; }
@media (max-width: 768px) { .cs-observation-grid { grid-template-columns: 1fr 1fr; } }
.cs-observation { background: var(--white); padding: 20px; }
.cs-observation-num { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--blue); margin-bottom: 8px; }
.cs-observation h3 { font-family: var(--font-heading); font-size: 15px; color: var(--black); margin-bottom: 8px; }
.cs-observation p { font-size: 13px; line-height: 1.6; color: #555; }

.cs-callout-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 20px; padding-top: 24px; border-top: 1px solid var(--border); }
@media (max-width: 768px) { .cs-callout-grid { grid-template-columns: 1fr; } }
.cs-callout-label { font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; }
.cs-callout p { font-size: 13px; line-height: 1.6; color: #555; }

.cs-bar-charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 24px; }
@media (max-width: 768px) { .cs-bar-charts-grid { grid-template-columns: 1fr; } }
.cs-bar-chart h4 { font-family: var(--font-heading); font-size: 15px; color: var(--black); margin-bottom: 16px; }
.cs-bar-row { display: grid; grid-template-columns: 130px 1fr 26px; align-items: center; gap: 10px; margin-bottom: 12px; }
.cs-bar-row-label { font-family: var(--font-body); font-size: 12px; color: #444; line-height: 1.4; }
.cs-bar-track { background: #f0f0f0; height: 10px; border-radius: 4px; overflow: hidden; }
.cs-bar-fill { background: var(--blue); height: 100%; border-radius: 4px; }
.cs-bar-value { font-family: var(--font-body); font-size: 12px; color: var(--grey); text-align: right; }

.cs-persona-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; }
@media (max-width: 768px) { .cs-persona-grid { grid-template-columns: 1fr; } }
.cs-persona-card { border: 1px solid var(--border); border-radius: 10px; padding: 24px; }
.cs-persona-head { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.cs-persona-avatar { width: 48px; height: 48px; border-radius: 50%; background: #f0f0f0; flex-shrink: 0; object-fit: cover; display: block; }
.cs-persona-name { font-family: var(--font-heading); font-size: 16px; color: var(--black); }
.cs-persona-role { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); margin-top: 2px; }
.cs-persona-label { font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); margin: 16px 0 6px; }
.cs-persona-card ul { padding-left: 18px; }
.cs-persona-card li { font-size: 13px; color: #444; line-height: 1.6; margin-bottom: 4px; }
.cs-persona-quote { font-family: var(--font-heading); font-style: italic; font-size: 13px; color: #555; margin-top: 8px; line-height: 1.6; }

.cs-journey-list { margin-top: 28px; }
.cs-journey-step { display: grid; grid-template-columns: 48px 190px 1fr; gap: 20px; padding: 20px 0; border-top: 1px solid var(--border); }
.cs-journey-step:first-child { border-top: none; padding-top: 0; }
@media (max-width: 768px) { .cs-journey-step { grid-template-columns: 1fr; gap: 4px; } }
.cs-journey-num { font-family: var(--font-heading); font-size: 26px; color: var(--border); }
.cs-journey-titles .cs-eyebrow { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); margin-bottom: 4px; }
.cs-journey-titles strong { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--black); }
.cs-journey-step p { font-size: 13px; color: #555; line-height: 1.7; }

.cs-pull-quote { font-family: var(--font-heading); font-size: clamp(20px, 2.6vw, 30px); line-height: 1.45; color: var(--black); }
.cs-pull-quote em { color: var(--blue); font-style: italic; }
.cs-body-dark .cs-pull-quote { color: var(--white); }
.cs-body-dark .cs-pull-quote em { color: #a9b6ea; }
.cs-caption-note { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey); margin-top: 20px; }
.cs-body-dark .cs-caption-note { color: #999; }

.cs-hmw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
@media (max-width: 768px) { .cs-hmw-grid { grid-template-columns: 1fr; } }
.cs-hmw-card { border: 1px solid var(--border); border-radius: 10px; padding: 20px; }
.cs-hmw-num { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--blue); margin-bottom: 10px; }
.cs-hmw-card p { font-size: 14px; line-height: 1.6; color: #333; }
.cs-hmw-card em { color: var(--black); font-style: italic; }

.cs-shortlist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 28px; }
@media (max-width: 768px) { .cs-shortlist-grid { grid-template-columns: 1fr; } }
.cs-shortlist-grid h4 { font-family: var(--font-heading); font-size: 16px; color: var(--black); margin-bottom: 4px; }
.cs-shortlist-grid > div > p.cs-hint { font-size: 12px; font-style: italic; color: var(--grey); margin-bottom: 16px; }
.cs-scamper-list { display: flex; flex-direction: column; gap: 10px; }
.cs-scamper-item { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; }
.cs-scamper-letter { width: 26px; height: 26px; border-radius: 50%; background: var(--black); color: var(--white); font-family: var(--font-body); font-weight: 600; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cs-scamper-item div strong { display: block; font-size: 13px; color: var(--black); }
.cs-scamper-item div span { font-size: 12px; color: var(--grey); }
.cs-outcome-strip { margin-top: 20px; background: var(--black); color: var(--white); border-radius: 8px; padding: 24px; display: grid; grid-template-columns: 140px 140px 1fr; gap: 24px; }
@media (max-width: 640px) { .cs-outcome-strip { grid-template-columns: 1fr; } }
.cs-outcome-strip .cs-outcome-num { font-family: var(--font-heading); font-size: 26px; }
.cs-outcome-strip .cs-outcome-label { font-size: 11px; color: #999; margin-top: 4px; line-height: 1.4; }
.cs-outcome-strip .cs-outcome-list { font-size: 12px; line-height: 1.8; color: #ccc; }
.cs-outcome-strip .cs-outcome-list strong { display: block; color: #999; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }

.cs-layer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 28px; }
@media (max-width: 768px) { .cs-layer-grid { grid-template-columns: 1fr; } }
.cs-layer { border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; padding: 20px; }
.cs-layer-eyebrow { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #a9b6ea; margin-bottom: 8px; }
.cs-layer h3 { font-family: var(--font-heading); font-size: 17px; color: var(--white); margin-bottom: 10px; }
.cs-layer p { font-size: 13px; line-height: 1.6; color: #ccc; }

.cs-mock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; align-items: start; }
@media (max-width: 640px) { .cs-mock-grid { grid-template-columns: 1fr 1fr; } }
.cs-mock-grid .cs-image-placeholder, .cs-touchpoint-grid .cs-image-placeholder { aspect-ratio: 9/16; background: #2a2a2a; color: #999; }
.cs-mock-grid img, .cs-touchpoint-grid img { width: 100%; height: auto; aspect-ratio: 749/1623; object-fit: contain; border-radius: 12px; display: block; }
.cs-touchpoint-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 28px; align-items: start; }
@media (max-width: 640px) { .cs-touchpoint-grid { grid-template-columns: 1fr 1fr; } }

.cs-insight-table { margin-top: 28px; }
.cs-insight-row { display: grid; grid-template-columns: 1fr 24px 1fr; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--border); }
.cs-insight-row:first-child { border-top: none; padding-top: 0; }
@media (max-width: 640px) { .cs-insight-row { grid-template-columns: 1fr; gap: 6px; } .cs-insight-row .cs-arrow-col { display: none; } }
.cs-insight-row .cs-insight-text { font-size: 13px; color: #444; line-height: 1.6; }
.cs-insight-row .cs-insight-text em { color: var(--black); font-style: italic; }
.cs-insight-row .cs-arrow-col { text-align: center; color: var(--blue); font-size: 16px; }
.cs-insight-row .cs-response-text { font-size: 13px; color: #444; line-height: 1.6; }
.cs-body-dark .cs-insight-row { border-top-color: rgba(255,255,255,0.15); }
.cs-body-dark .cs-insight-row .cs-insight-text,
.cs-body-dark .cs-insight-row .cs-response-text { color: #ccc; }
.cs-body-dark .cs-insight-row .cs-insight-text em { color: var(--white); }

.cs-concept-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; }
@media (max-width: 768px) { .cs-concept-grid { grid-template-columns: 1fr; } }
.cs-concept-card { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.cs-concept-card .cs-image-placeholder { border-radius: 0; aspect-ratio: 16/10; }
.cs-concept-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.cs-concept-body { padding: 20px; }
.cs-concept-label { font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; }
.cs-concept-body h3 { font-family: var(--font-heading); font-size: 18px; color: var(--black); margin-bottom: 10px; }
.cs-concept-body p { font-size: 13px; color: #555; line-height: 1.6; margin-bottom: 14px; }
.cs-concept-meta { font-size: 12px; color: #444; margin-bottom: 4px; }
.cs-concept-meta strong { color: var(--black); }

.cs-reflection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 40px; margin-top: 28px; }
@media (max-width: 768px) { .cs-reflection-grid { grid-template-columns: 1fr; } }
.cs-reflection-item .cs-reflection-num { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--blue); margin-bottom: 8px; }
.cs-reflection-item h3 { font-family: var(--font-heading); font-size: 17px; color: var(--black); margin-bottom: 8px; line-height: 1.4; }
.cs-reflection-item p { font-size: 13px; color: #555; line-height: 1.7; }

.cs-credits-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 24px; margin-top: 28px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.15); }
@media (max-width: 768px) { .cs-credits-row { grid-template-columns: 1fr; } }
.cs-credits-label { font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #a9b6ea; margin-bottom: 10px; }
.cs-credits-row p { font-size: 13px; color: #ccc; line-height: 1.9; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}