/* =========================================================================
   Sonja Weissberg — Portfolio
   Design system rebuilt from Figma exports.
   Palette, type + spacing sampled from the source designs.
   ========================================================================= */

:root {
  /* Neutrals */
  --bg:        #f9f9f9;
  --bg-alt:    #f1f1f1;
  --bg-cs:     #fafafa;
  --surface:   #ffffff;
  --ink:       #0a0a0a;
  --ink-soft:  #1d1d1d;
  --muted:     #8a8a8a;
  --muted-2:   #b4b4b4;
  --line:      #e4e4e4;
  --line-soft: rgba(10, 10, 10, 0.07);

  /* Brand / accents */
  --lime:      #d6ff00;   /* Louco neon */
  --lime-deep: #b6db00;
  --lime-ink:  #22290a;   /* dark olive that pairs with lime */
  --navy:      #19233f;   /* Lumio */
  --near-black:#0a0a0a;   /* Louco card */

  /* Status colors (from the Louco design system) */
  --st-draft:  #3377ff;
  --st-pending:#ff844a;
  --st-active: #00c950;
  --st-cancel: #fb2c36;
  --st-past:   #a8b0c2;

  /* Shadows (soft, large-radius — matches source cards) */
  /* soft, light shadows — same character as the carousel cards
     (0 18px 40px -18px rgba(10,10,10,.22)); scaled by element size */
  --shadow-sm: 0 6px 16px -10px rgba(10, 10, 10, 0.18);
  --shadow-md: 0 12px 30px -16px rgba(10, 10, 10, 0.20);
  --shadow-lg: 0 18px 40px -18px rgba(10, 10, 10, 0.22);
  --shadow-xl: 0 26px 58px -24px rgba(10, 10, 10, 0.24);

  /* Radii */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* Type */
  --font: "Helvetica Neue", Helvetica, "Inter", "Segoe UI", Arial, sans-serif;

  /* Layout */
  --wrap: 1280px;
  --pad: clamp(20px, 5vw, 140px);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--lime); color: var(--lime-ink); }

/* ------------------------------------------------------------------ type */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
/* avoid orphan/runt words (e.g. a lone "I") at the end of body copy */
p, li, figcaption, blockquote, .cs-p, .consider { text-wrap: pretty; }
.display {
  font-size: clamp(2rem, 5.2vw, 4rem);
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.eyebrow {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.muted { color: var(--muted); }
.lead { font-size: clamp(1rem, 1.4vw, 1.2rem); color: var(--ink-soft); }

/* ------------------------------------------------------------------ layout */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(64px, 10vw, 140px); }
.section-tight { padding-block: clamp(40px, 6vw, 80px); }
.bg-alt { background: var(--bg-alt); }

/* ============================================================= HEADER / NAV */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-block: 18px;
  transition: transform .5s var(--ease), background .4s ease, box-shadow .4s ease, padding .4s ease;
}
.site-header.hidden { transform: translateY(-104%); }
.site-header.scrolled {
  background: rgba(249, 249, 249, 0.72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 1px 0 var(--line-soft);
  padding-block: 12px;
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; flex-direction: column; line-height: 1.1; }
.brand .name { color: var(--muted); font-size: 1.05rem; font-weight: 500; transition: color .3s; }
.brand .role { color: var(--ink); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.brand:hover .name { color: var(--ink); }

.nav-right { display: flex; align-items: center; gap: 8px; }

/* dropdown */
.dropdown { position: relative; }
.dropdown-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--r-pill);
  background: rgba(10,10,10,0.05); color: var(--ink);
  font-size: 0.92rem; font-weight: 600;
  transition: background .25s, transform .25s var(--ease);
}
.dropdown-toggle:hover { background: rgba(10,10,10,0.09); }
.dropdown-toggle svg { transition: transform .35s var(--ease); }
.dropdown.open .dropdown-toggle svg { transform: rotate(180deg); }
.dropdown-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 264px; padding: 8px;
  background: var(--surface); border-radius: var(--r-md);
  box-shadow: var(--shadow-md); border: 1px solid var(--line-soft);
  opacity: 0; transform: translateY(-8px) scale(0.98); transform-origin: top right;
  pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.dropdown.open .dropdown-menu { opacity: 1; transform: none; pointer-events: auto; }
.dropdown-menu a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 14px; border-radius: var(--r-sm);
  transition: background .2s;
}
.dropdown-menu a:hover { background: var(--bg-alt); }
.dropdown-menu a .t { font-weight: 600; font-size: 0.95rem; }
.dropdown-menu a .s { font-size: 0.8rem; color: var(--muted); }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--r-pill);
  font-weight: 600; font-size: 0.92rem;
  background: var(--ink); color: #fff;
  transition: transform .3s var(--ease), background .3s, box-shadow .3s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-lime { background: var(--lime); color: var(--lime-ink); }
.btn-lime:hover { box-shadow: 0 10px 34px rgba(214, 255, 0, 0.5); }
.btn-ghost { background: rgba(10,10,10,0.05); color: var(--ink); }
.btn-ghost:hover { background: rgba(10,10,10,0.09); }

/* ============================================================= HERO (landing) */
.hero { padding-top: clamp(120px, 16vh, 200px); padding-bottom: clamp(30px, 6vw, 70px); }
.hero-head { max-width: 900px; margin-bottom: clamp(30px, 5vw, 56px); }
.hero-head h1 {
  font-size: clamp(2.1rem, 6vw, 4.6rem);
  letter-spacing: -0.04em; line-height: 0.98;
}
.hero-head h1 .g { color: var(--muted); }
.hero-head p { margin-top: 22px; max-width: 560px; font-size: clamp(1rem,1.5vw,1.22rem); color: var(--muted); }

/* ============================================================= PROJECT CAROUSEL */
.carousel { --cgap: clamp(16px, 1.6vw, 24px); }
.carousel-viewport { overflow: hidden; padding-block: 6px; }
.carousel-track { display: flex; gap: var(--cgap); will-change: transform; }
.carousel-track.animate { transition: transform .62s var(--ease); }
/* 2 full cards + ~3/4 of the third peeking */
.carousel-track > .project-card { flex: 0 0 calc((100% - 2 * var(--cgap)) / 2.75); }
.carousel-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-top: clamp(22px, 3vw, 34px);
}
.carousel-dots { display: flex; gap: 8px; align-items: center; }
.carousel-dots button {
  width: 8px; height: 8px; border-radius: 999px; background: rgba(10,10,10,0.18);
  padding: 0; transition: width .4s var(--ease), background .4s;
}
.carousel-dots button.on { width: 26px; background: var(--ink); }
.carousel-nav { display: flex; gap: 10px; }
.cbtn {
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm);
  display: grid; place-items: center;
  transition: transform .3s var(--ease), background .3s, color .3s, opacity .3s;
}
.cbtn:hover { transform: translateY(-2px); background: var(--ink); color: #fff; box-shadow: var(--shadow-md); }
.cbtn:active { transform: translateY(0) scale(0.94); }
.cbtn[disabled] { opacity: 0.32; pointer-events: none; box-shadow: none; }

/* ============================================================= PROJECT CARDS */
.project-card {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-xl); aspect-ratio: 5 / 8;
  background: #111; color: #fff; isolation: isolate;
  /* size the CSS-built card's type against the card itself, so it tracks the
     baked Figma cards (whose text scales with the image) at every width */
  container-type: inline-size;
  transform: translateZ(0);
  transition: box-shadow .5s var(--ease), transform .5s var(--ease);
  box-shadow: none;                 /* no resting shadow — appears on hover only */
}
.project-card:hover { box-shadow: 0 18px 40px -18px rgba(10, 10, 10, 0.22); transform: translateY(-4px); }
/* cards exported straight from the Figma (exact match).
   The card images already have rounded corners baked in (~7.5% radius) with a
   light area outside them; clip the container at the SAME radius so no light
   sliver ("white outline") shows at the corners of the dark cards. */
.project-card.pc-image {
  background: transparent;
  border-radius: 7.3% / 4.55%;
}
.project-card.pc-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-card .pc-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transform: scale(1.06); transition: transform 1.1s var(--ease);
}
.project-card:hover .pc-bg { transform: scale(1.14); }
.project-card .pc-overlay { position: absolute; inset: 0; z-index: 1; }
.project-card .pc-content {
  position: relative; z-index: 3; height: 100%;
  display: flex; flex-direction: column;
  padding: clamp(20px, 2.2vw, 30px) clamp(20px, 2.2vw, 30px) 0;   /* fallback */
  padding: 5.2cqw 6.44cqw 0;
}
.project-card .pc-head { flex: 0 0 auto; }
/* metrics sampled from the baked Figma cards: eyebrow cap 3.56% of card width,
   title cap 4.31%, line advance 7.5%, text inset 6.44% */
/* #767676 matches the baked cards' company-name grey (measured mean ink 146 vs
   their 147); inheriting near-black at .85 opacity read far darker than them */
.project-card .pc-eyebrow { display: block; font-size: 0.9rem; font-weight: 500; color: #767676; opacity: 1; line-height: 1.2; }
.project-card .pc-eyebrow { font-size: 4.97cqw; }
.project-card .pc-title {
  display: block; margin-top: 10px; font-size: clamp(1.02rem, 1.2vw, 1.34rem);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.14; max-width: 22ch;
}
/* weight 500 (Helvetica Neue Medium) measures 3.56px stroke against the baked
   cards' 3.43px; 700 rendered 4.20px, i.e. visibly bolder than its neighbours */
.project-card .pc-title { margin-top: 0.9cqw; font-size: 5.97cqw; line-height: 1.256; font-weight: 500; }
/* device sits in the space below the heading and never overlaps it */
.project-card .pc-device {
  position: relative; flex: 1 1 auto; min-height: 0;
  margin-top: clamp(10px, 1.6vw, 18px);
}

/* iPhone-style device frame for the landing mockups */
.phone {
  position: absolute; overflow: hidden;
  background: linear-gradient(145deg, #45454c 0%, #1b1b1e 20%, #0b0b0c 56%, #18181b 100%);
  border-radius: 14% / 6.6%;
  padding: 1.9%;
  box-shadow: 0 24px 55px rgba(0,0,0,.5),
              inset 0 0 0 1px rgba(255,255,255,.05),
              inset 1.5px 0 0 rgba(228,198,142,.5);
  transition: transform .8s var(--ease); will-change: transform;
}
.phone img { display: block; width: 100%; height: auto; border-radius: 11.5% / 5.5%; }
.phone.island::before {
  content: ""; position: absolute; z-index: 3;
  top: 4.2%; left: 50%; transform: translateX(-50%);
  width: 30%; height: 2.8%; min-height: 9px; background: #050505; border-radius: 999px;
}
/* metallic side buttons so the frame reads as a real iPhone */
.phone .btns { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.phone .btns::before {   /* left: volume up / down */
  content: ""; position: absolute; left: -1.5px; top: 27%; width: 2.5px; height: 20%;
  border-radius: 2px;
  background: linear-gradient(90deg, #e4c88f, #7c683f);
}
.phone .btns::after {    /* right: side/power button */
  content: ""; position: absolute; right: -1.5px; top: 33%; width: 2.5px; height: 12%;
  border-radius: 2px;
  background: linear-gradient(270deg, #e4c88f, #7c683f);
}
.project-card .pc-cta {
  position: absolute; z-index: 4; right: clamp(20px,2.4vw,32px); bottom: clamp(20px,2.4vw,32px);
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.14); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.25);
  opacity: 0; transform: translateY(10px) scale(.9);
  transition: opacity .4s var(--ease), transform .4s var(--ease), background .3s;
}
.project-card:hover .pc-cta { opacity: 1; transform: none; }
.project-card .pc-cta svg { transition: transform .3s var(--ease); }
.project-card:hover .pc-cta { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); }

/* spotlight that follows the cursor on dark cards */
.project-card .pc-spot {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.16), transparent 60%);
  transition: opacity .4s ease;
}
.project-card:hover .pc-spot { opacity: 1; }

/* --- Louco (dark): crowd photo as a dark backdrop, phone in front --- */
.pc-louco { background: #0a0a0a; }
.pc-louco .pc-bg { background-position: center 52%; }
.pc-louco .pc-overlay { background: linear-gradient(180deg, rgba(8,8,8,.96) 0%, rgba(8,8,8,.86) 42%, rgba(8,8,8,.55) 100%); }
.pc-louco .pc-device .phone { width: 54%; left: 50%; bottom: 0; transform: translateX(-50%); }
.pc-louco:hover .pc-device .phone { transform: translateX(-50%) translateY(-8px); }

/* --- Deutsche Bahn: train-station photo, light at top for the title --- */
.pc-db { background: #dbdce0; color: var(--ink); }
.pc-db .pc-overlay { background: linear-gradient(180deg, rgba(231,232,234,.94) 0%, rgba(231,232,234,.42) 18%, rgba(222,224,227,.06) 40%, rgba(20,20,20,.03) 100%); }
.pc-db .pc-title { color: var(--ink); }
.pc-db .pc-device .phone.ph1 { width: 48%; bottom: 9%; left: -1%; transform: rotate(-5deg); z-index: 1; }
.pc-db .pc-device .phone.ph2 { width: 52%; bottom: 3%; right: -2%; transform: rotate(4deg); z-index: 2; }
.pc-db:hover .pc-device .phone.ph1 { transform: translateY(-8px) rotate(-5deg); }
.pc-db:hover .pc-device .phone.ph2 { transform: translateY(-12px) rotate(4deg); }
.pc-db .pc-cta { background: rgba(10,10,10,0.08); border-color: rgba(10,10,10,0.12); color: var(--ink); }

/* --- Lumio: code photo as a dark navy backdrop, dashboard in a MacBook --- */
.pc-lumio { background: #141d34; }
.pc-lumio .pc-overlay { background: linear-gradient(180deg, rgba(18,25,46,.82) 0%, rgba(15,22,44,.55) 46%, rgba(11,17,36,.78) 100%); }
.pc-lumio .pc-device .laptop { position: absolute; bottom: 12%; left: 50%; transform: translateX(-50%); width: 124%; transition: transform .8s var(--ease); will-change: transform; }
.pc-lumio .laptop .frame { position: relative; width: 100%; display: block; filter: drop-shadow(0 24px 46px rgba(0,0,0,.55)); }
.pc-lumio .laptop .screen { position: absolute; left: 8%; top: 1.6%; width: 84%; height: 94.5%; object-fit: cover; object-position: top center; border-radius: 2px; }
.pc-lumio:hover .pc-device .laptop { transform: translateX(-50%) translateY(-8px); }

/* --- Rizing (light / brand): website in an iMac --- */
.pc-rizing { background: #e8ead9; color: var(--ink); }
.pc-rizing .pc-title { color: var(--ink); }
/* the iMac PNG is a transparent cut-out — a box-shadow/radius here would draw a
   rectangle around its bounding box, so it carries neither */
.pc-rizing .pc-device .imac { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); width: 100%; }
/* no separate lift on the device — the whole card already levitates on hover */
.pc-rizing .pc-cta { background: rgba(10,10,10,0.08); border-color: rgba(10,10,10,0.12); color: var(--ink); }

/* ============================================================= ABOUT */
.about { text-align: center; }
.about h2 { font-size: clamp(1.35rem, 2.4vw, 1.95rem); letter-spacing: -0.03em; }
.about h2 .g { color: var(--muted); }
.about-photo {
  width: clamp(190px, 24vw, 270px); aspect-ratio: 3.5/4; margin: clamp(30px,5vw,54px) auto 0;
  border-radius: var(--r-lg); object-fit: cover; box-shadow: var(--shadow-lg);
}
/* 832px = the live site's max-w-4xl (896px) minus its lg:px-8 gutters, which is
   what makes the seven pills wrap 4 + 3 instead of sitting on one long row */
.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(30px,5vw,52px); max-width: 832px; margin-inline: auto; }
/* sized from the live site's pills: h-10/sm:h-12, px-3/sm:px-4, gap-2,
   text-[14px]/sm:text-[16px]/lg:text-[18px], emoji trailing the label */
.tag {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: clamp(40px, 3.4vw, 48px);
  padding: 0 clamp(12px, 1.3vw, 16px); border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
  font-size: clamp(0.875rem, 1.15vw, 1.125rem); color: var(--ink-soft); font-weight: 500;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.tag:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; }
.tag .em { font-size: 1em; line-height: 1; }

/* ============================================================= TESTIMONIALS */
.tst-head { text-align: center; margin-bottom: clamp(34px,5vw,60px); }
.tst-head h2 { font-size: clamp(1.35rem, 2.4vw, 1.95rem); letter-spacing: -0.03em; }
.tst-head h2 .g { color: var(--muted); }
.tst-grid { columns: 3; column-gap: clamp(16px, 1.8vw, 26px); }
.tst-card {
  break-inside: avoid; margin-bottom: clamp(16px,1.8vw,26px);
  background: var(--surface); border-radius: var(--r-lg);
  padding: clamp(22px, 2.4vw, 32px); box-shadow: var(--shadow-lg);
  transition: transform .4s var(--ease), box-shadow .4s;
}
.tst-card:hover { transform: translateY(-4px); }
.tst-card p { font-size: 0.98rem; color: var(--ink-soft); line-height: 1.55; }
.tst-card .who { margin-top: 22px; }
.tst-card .who .n { font-weight: 700; font-size: 0.98rem; }
.tst-card .who .r { color: var(--muted); font-size: 0.88rem; margin-top: 2px; }

/* ============================================================= FOOTER */
.site-footer {
  position: relative; overflow: hidden;
  background: var(--ink); color: #fff;
  padding-block: clamp(70px, 11vw, 150px);
}
.footer-aurora {
  position: absolute; inset: -40% -10% auto -10%; height: 120%; z-index: 0;
  background:
    radial-gradient(40% 60% at 20% 30%, rgba(214,255,0,0.16), transparent 60%),
    radial-gradient(45% 55% at 80% 20%, rgba(51,119,255,0.18), transparent 60%),
    radial-gradient(50% 60% at 60% 90%, rgba(255,132,74,0.12), transparent 60%);
  filter: blur(20px); animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate3d(4%, 3%, 0) scale(1.08); } }
.footer-inner { position: relative; z-index: 1; text-align: center; }
.footer-inner h2 { font-size: clamp(2rem, 6vw, 4.4rem); letter-spacing: -0.04em; }
.footer-inner h2 .g { color: rgba(255,255,255,0.4); }
.footer-cta { margin-top: 34px; }
.footer-cta .btn-lime { font-size: 1rem; padding: 15px 28px; }
.footer-meta {
  margin-top: clamp(50px, 8vw, 90px); display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; color: rgba(255,255,255,0.55); font-size: 0.85rem;
}
.footer-meta a { color: rgba(255,255,255,0.8); }
.footer-meta a:hover { color: var(--lime); }

/* ============================================================= REVEAL */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .footer-aurora, .marquee-track { animation: none !important; }
  .project-card .pc-bg { transform: none !important; }
}

/* ============================================================= RESPONSIVE (landing) */
@media (max-width: 900px) {
  .carousel-track > .project-card { flex-basis: calc((100% - var(--cgap)) / 1.85); }
  .tst-grid { columns: 2; }
}
@media (max-width: 620px) {
  .carousel-track > .project-card { flex-basis: 86%; }
  .tst-grid { columns: 1; }
  .brand .name { font-size: 0.95rem; }
  .brand .role { font-size: 0.95rem; }
  .dropdown-menu { min-width: min(78vw, 264px); left: auto; right: 0; }
  /* header gets tight on phones — the footer carries the contact CTA */
  .nav-right > .btn { display: none; }
}

/* ========================================================================
   CASE STUDY PAGES
   ======================================================================== */
body.cs { background: var(--bg-cs); }

.cs-hero { padding-top: clamp(120px, 15vh, 190px); padding-bottom: clamp(44px, 6vw, 84px); }
.cs-hero-media {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--shadow-lg); background: #111;
  height: clamp(280px, 46vw, 620px);   /* fixed height so the image can overfill */
}
/* image overfills top & bottom so the parallax shift never exposes the backdrop */
.cs-hero-media img { position: absolute; left: 0; top: -80px; width: 100%; height: calc(100% + 160px); object-fit: cover; }
.cs-hero-media.contain { background: #eaeaea; }
.cs-hero-media.contain img { position: static; top: auto; height: 100%; object-fit: contain; }
.cs-hero-logo {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
}
.cs-hero-logo img { width: clamp(160px, 26vw, 340px); height: auto; filter: drop-shadow(0 0 40px rgba(214,255,0,0.35)); }

/* meta row: tags + title + sidebar */
.cs-meta { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: start; margin-top: clamp(40px,6vw,72px); }
.cs-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 26px; }
.cs-tags .chip {
  padding: 8px 16px; border-radius: var(--r-pill); background: rgba(10,10,10,0.05);
  font-size: 0.86rem; font-weight: 600;
}
.cs-tags .plus { color: var(--muted); font-weight: 500; }
.cs-tags .timeline { color: var(--muted); font-size: 0.9rem; }
.cs-title { font-size: clamp(1.6rem, 3vw, 2.35rem); letter-spacing: -0.03em; line-height: 1.08; }
.cs-side {
  background: rgba(10,10,10,0.035); border-radius: var(--r-lg);
  padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 22px;
}
.cs-side h3 { font-size: 1.12rem; }
.cs-side p { color: var(--muted); font-size: 0.96rem; line-height: 1.5; margin-top: 6px; }
.cs-side .tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.cs-side .tools span { padding: 6px 14px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid rgba(10,10,10,0.06); font-size: 0.85rem; font-weight: 600; }

/* generic section blocks */
.cs-block { max-width: 760px; }
.cs-block.center { margin-inline: auto; text-align: center; }
.cs-kicker { font-size: 0.9rem; font-weight: 600; color: var(--muted); margin-bottom: 14px; }
.cs-h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: -0.028em; }
.cs-h3 { font-size: clamp(1.15rem, 1.8vw, 1.5rem); letter-spacing: -0.02em; }
.cs-p { font-size: clamp(0.98rem, 1.05vw, 1.08rem); color: var(--ink-soft); line-height: 1.62; margin-top: 16px; }
.cs-p.muted { color: var(--muted); }

.cs-challenge { text-align: center; padding-block: clamp(70px, 12vw, 150px); }
.cs-challenge .cs-kicker { color: var(--muted-2); }
.cs-challenge h2 { font-size: clamp(1.35rem, 2.3vw, 1.95rem); letter-spacing: -0.025em; max-width: 58ch; margin-inline: auto; line-height: 1.18; }

/* approach 3-col */
.approach { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.approach .col { background: var(--surface); border-radius: var(--r-lg); padding: clamp(22px,2.4vw,30px); box-shadow: var(--shadow-sm); }
.approach .col h4 { font-size: 1.3rem; margin-bottom: 18px; }
.approach .col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.approach .col li { color: var(--muted); font-size: 0.98rem; line-height: 1.45; padding-left: 18px; position: relative; }
.approach .col li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--lime-deep); }

/* node diagram (Louco problem context) */
.nodes {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto;
  gap: clamp(20px, 4vw, 56px) clamp(30px, 6vw, 90px);
  align-items: center; justify-items: center; margin-top: clamp(40px,6vw,70px);
}
.node {
  position: relative; z-index: 1;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  padding: 20px 24px; text-align: center; color: var(--muted); font-size: 0.98rem;
  max-width: 240px; min-height: 72px; display: grid; place-items: center;
}
.node.center { background: var(--ink); color: #fff; font-weight: 600; box-shadow: var(--shadow-xl); }
/* deterministic placement: 2 nodes left, centre in the middle, 2 nodes right */
.nodes .node:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.nodes .node:nth-of-type(2) { grid-column: 2; grid-row: 1 / span 2; } /* centre */
.nodes .node:nth-of-type(3) { grid-column: 3; grid-row: 1; }
.nodes .node:nth-of-type(4) { grid-column: 1; grid-row: 2; }
.nodes .node:nth-of-type(5) { grid-column: 3; grid-row: 2; }
.node-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* pain point block */
/* phone column narrower than the text column, matching the design */
/* problem-text rows: text bottom-aligned to the phone card (like the SVG) */
.pain { display: grid; grid-template-columns: 1fr 0.82fr; gap: clamp(24px, 4vw, 64px); align-items: end; }
.pain.flip { grid-template-columns: 0.82fr 1fr; }
.pain > .pain-copy { padding-bottom: clamp(10px, 2vw, 30px); }
/* the redesigned-hub row: both columns share the same height (bottoms align) */
.pain.pp-rowb { align-items: stretch; }
.pain.flip .pain-copy { order: 2; }
.pain-label {
  display: inline-block; padding: 7px 16px; border-radius: var(--r-pill);
  background: var(--lime-ink); color: #fff; font-size: 0.82rem; font-weight: 700; margin-bottom: 20px;
}
.pain-label.private { background: var(--lime-ink); color: #fff; }
.pain-num { color: var(--muted); font-weight: 600; font-size: 1.02rem; margin-bottom: 12px; }
.pain-copy h3 { font-size: clamp(1.5rem, 2.5vw, 2.05rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.22; }
.pain-copy .sol { color: var(--muted); font-size: 1.05rem; line-height: 1.55; margin-top: 20px; }
.pain-stage {
  border-radius: var(--r-xl); padding: clamp(22px, 3vw, 46px);
  display: grid; place-items: center; background: #ededed;
}
.pain-stage.dark { background: #101010; }
.pain-stage img { width: 100%; max-width: 320px; border-radius: 26px; filter: drop-shadow(0 30px 50px rgba(0,0,0,.28)); }
.pain-stage.wide img { max-width: 100%; }
/* framed device mockups already carry their own rounded shape + alpha,
   so don't re-round them; the drop-shadow follows the phone silhouette.
   Extra padding + smaller phone → generous card margin like the design. */
/* device sits flush with the card's bottom edge (no bottom padding), like
   the design — reads as a phone mockup rather than a screenshot in a box */
.pain-stage.framed { align-items: end; padding: clamp(34px, 5vw, 66px) clamp(28px, 6vw, 84px) 0; overflow: hidden; }
.pain-stage.framed img { max-width: 285px; border-radius: 0; filter: drop-shadow(0 24px 40px rgba(0,0,0,.22)); }
/* hub card: caption header on top, device flush at the bottom (like the SVG) */
.pain-stage.pp-hub { display: flex; flex-direction: column; overflow: hidden;
  padding: clamp(28px, 3.2vw, 42px) clamp(28px, 3.5vw, 46px) clamp(22px, 3vw, 34px); }
.pp-caption { color: var(--muted); font-size: clamp(0.96rem, 1.1vw, 1.06rem); line-height: 1.55; margin: 0 0 clamp(22px, 3vw, 34px); }
.pain-stage.pp-hub img { max-width: 280px; margin: 0 auto; border-radius: 0; filter: drop-shadow(0 24px 40px rgba(0,0,0,.22)); }

/* impact strip */
.impact { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(20px, 4vw, 60px); align-items: center; background: var(--surface); border-radius: var(--r-xl); padding: clamp(28px, 4vw, 56px); box-shadow: var(--shadow-sm); }
.impact .k { color: var(--muted); font-weight: 600; margin-bottom: 12px; }
.impact h3 { font-size: clamp(1.2rem, 1.8vw, 1.55rem); letter-spacing: -0.02em; }
.impact p { color: var(--muted); font-size: 1.05rem; line-height: 1.55; }

/* status pills */
/* outcome block: status pills card beside the impact card */
.pp-outcome { display: grid; grid-template-columns: 0.68fr 1fr; gap: 16px; align-items: stretch; }
/* chips centred in their card rather than hugging the left edge */
.statuses { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: clamp(18px, 2vw, 24px); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.status { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 11px; border-radius: var(--r-pill); font-weight: 700; font-size: 0.9rem; }
.status svg { width: 15px; height: 15px; flex: none; }
.status.draft   { color: var(--st-draft);   background: color-mix(in srgb, var(--st-draft) 15%, #fff); }
.status.pending { color: var(--st-pending); background: color-mix(in srgb, var(--st-pending) 16%, #fff); }
.status.active  { color: var(--st-active);  background: color-mix(in srgb, var(--st-active) 15%, #fff); }
.status.cancel  { color: var(--st-cancel);  background: color-mix(in srgb, var(--st-cancel) 13%, #fff); }
.status.past    { color: var(--st-past);    background: color-mix(in srgb, var(--st-past) 24%, #fff); }
.pp-impact { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: clamp(22px, 2.6vw, 34px); }
.pp-impact .k { color: var(--muted); font-weight: 600; margin-bottom: 12px; }
.pp-impact h3 { font-size: clamp(1.05rem, 1.5vw, 1.4rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.28; }
@media (max-width: 780px) { .pp-outcome { grid-template-columns: 1fr; } }

/* figures (case study images) */
.figure { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-md); background: #f0f0f0; }
.figure img { width: 100%; display: block; }
.figure.pad { padding: clamp(16px, 3vw, 40px); background: #eef0f2; }
.figure.pad img { border-radius: var(--r-md); }
.figure.tall { max-width: 680px; margin-inline: auto; }
.cs-two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); align-items: start; }
@media (max-width: 780px) { .cs-two { grid-template-columns: 1fr; } }

/* main block + a subordinate sidenote — the narrower, dropped, ruled column
   keeps the supporting copy from reading as a peer of the main statement */
.cs-split { display: grid; grid-template-columns: 1.62fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.cs-note { border-left: 2px solid var(--lime-deep); padding-left: 22px; margin-top: clamp(28px, 5vw, 56px); }
.cs-note h3 { font-size: 0.96rem; font-weight: 700; letter-spacing: 0.02em; }
.cs-note .cs-p { font-size: 0.95rem; margin-top: 8px; }
@media (max-width: 780px) {
  .cs-split { grid-template-columns: 1fr; gap: 26px; }
  .cs-note { margin-top: 0; }
}
.figcap { text-align: center; color: var(--muted); font-size: 0.9rem; margin-top: 14px; }

/* considerations list */
.considers { display: grid; gap: 16px; margin-top: 30px; }
.consider { background: var(--surface); border-left: 3px solid var(--lime-deep); border-radius: var(--r-sm); padding: 20px 24px; box-shadow: var(--shadow-sm); color: var(--ink-soft); font-size: 1.02rem; }

/* two-up features (DB solution bullets) */
.feature-list { display: grid; gap: 20px; margin-top: 26px; }
.feature-list .f { display: flex; gap: 16px; align-items: flex-start; }
.feature-list .f .idx { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--lime); color: var(--lime-ink); font-weight: 700; display: grid; place-items: center; font-size: 0.85rem; }
.feature-list .f p { color: var(--muted); line-height: 1.5; }

/* back link */
.cs-back { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 600; transition: color .3s, gap .3s; }
.cs-back:hover { color: var(--ink); gap: 14px; }

/* prev/next nav */
.cs-more { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: clamp(40px,6vw,70px); }
.cs-more a { background: var(--surface); border-radius: var(--r-lg); padding: clamp(22px,2.6vw,34px); box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s; }
.cs-more a:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cs-more .lbl { color: var(--muted); font-size: 0.82rem; font-weight: 600; }
.cs-more .ti { font-size: clamp(1.05rem,1.6vw,1.35rem); font-weight: 700; letter-spacing: -0.02em; margin-top: 8px; }
.cs-more a.next { text-align: right; }

@media (max-width: 780px) {
  .cs-meta { grid-template-columns: 1fr; }
  .approach { grid-template-columns: 1fr; }
  .pain, .pain.flip, .impact, .cs-more { grid-template-columns: 1fr; }
  .pain.flip .pain-copy { order: 0; }
  .impact { text-align: left; }
  .nodes { grid-template-columns: 1fr; grid-template-rows: none; }
  .nodes .node:nth-of-type(1),
  .nodes .node:nth-of-type(2),
  .nodes .node:nth-of-type(3),
  .nodes .node:nth-of-type(4),
  .nodes .node:nth-of-type(5) { grid-column: 1; grid-row: auto; }
  .nodes .node.center { order: -1; }
  .node { max-width: 100%; width: 100%; }
  .node-lines { display: none; }
  .cs-more a.next { text-align: left; }
}