:root {
  --paper: #f3eee5;
  --paper-2: #ebe4d9;
  --paper-3: #ddd5c9;
  --ink: #1d1d20;
  --ink-soft: #4e4c50;
  --ink-muted: #777278;
  --cobalt: #2557d6;
  --cobalt-soft: #dce6ff;
  --coral: #ef6b5b;
  --coral-soft: #ffe0da;
  --violet: #7c56d9;
  --line: rgba(29, 29, 32, .16);
  --line-soft: rgba(29, 29, 32, .09);
  --surface: rgba(255,255,255,.48);
  --content: 1280px;
  --header-height: 78px;
  --radius-sm: 12px;
  --radius-md: 22px;
  --radius-lg: 38px;
  --shadow: 0 28px 90px rgba(27, 25, 28, .14);
  --shadow-dark: 0 34px 110px rgba(0, 0, 0, .38);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --font-display: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Newsreader", Georgia, serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 16px); }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
::selection { background: var(--cobalt); color: white; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 4px; }

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 5000;
  padding: 10px 15px; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 700;
  transform: translateY(-160%); transition: transform 180ms ease;
}
.skip-link:focus { transform: translateY(0); }

.site-header { position: fixed; inset: 0 0 auto; z-index: 1000; height: var(--header-height); transition: background 220ms ease, border-color 220ms ease, color 220ms ease; }
.site-header.is-scrolled { border-bottom: 1px solid var(--line-soft); background: rgba(243, 238, 229, .84); backdrop-filter: blur(18px) saturate(125%); }
.site-header__inner { width: min(calc(100% - 40px), var(--content)); height: 100%; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: max-content;
}
.brand__symbol {
  display: block;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
}
.brand__name { font-size: .95rem; font-weight: 700; letter-spacing: -.025em; }
.primary-nav { display: flex; align-items: center; gap: 2px; }
.primary-nav a { position: relative; padding: 10px 11px; color: var(--ink-soft); font-size: .77rem; font-weight: 600; }
.primary-nav a:not(.primary-nav__contact)::after { content: ""; position: absolute; right: 11px; bottom: 6px; left: 11px; height: 2px; background: linear-gradient(90deg, var(--cobalt), var(--coral)); transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--ease); }
.primary-nav a:hover, .primary-nav a.is-active { color: var(--ink); }
.primary-nav a:hover::after, .primary-nav a.is-active::after { transform: scaleX(1); }
.primary-nav__contact { margin-left: 7px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.28); }
.primary-nav__contact:hover { border-color: var(--ink); }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: rgba(243,238,229,.88); cursor: pointer; }
.menu-toggle span { display: block; width: 18px; height: 1px; margin: 5px auto; background: currentColor; transition: transform 220ms ease; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

.kicker, .project-meta, .hero__role, .section-number, .detail-story__number, .character-section__heading > span {
  font-family: var(--font-mono);
}
.kicker { color: var(--coral); font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.project-meta { color: currentColor; opacity: .62; font-size: .68rem; font-weight: 500; letter-spacing: .045em; }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 10px; padding: 12px 19px; border: 1px solid transparent; border-radius: 999px; font-size: .82rem; font-weight: 700; transition: transform 220ms var(--ease), background 220ms ease, color 220ms ease, border-color 220ms ease; }
.button:hover { transform: translateY(-2px); }
.button--ink { background: var(--ink); color: var(--paper); }
.button--ink:hover { background: var(--cobalt); }
.button--line { border-color: var(--line); background: rgba(255,255,255,.24); }
.button--line:hover { border-color: var(--ink); background: rgba(255,255,255,.52); }
.button--paper { background: var(--paper); color: var(--ink); }
.button--paper:hover { background: white; }
.button--secondary { border-color: currentColor; background: transparent; }

.hero { position: relative; min-height: 82svh; overflow: hidden; padding: calc(var(--header-height) + clamp(54px, 7vw, 96px)) 20px clamp(58px, 8vw, 100px); isolation: isolate; background: linear-gradient(135deg, #f7f2e9 0%, var(--paper) 52%, #ebe4da 100%); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -3; opacity: .38; background-image: linear-gradient(rgba(29,29,32,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(29,29,32,.045) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, black, transparent 94%); }
.hero__ornament { position: absolute; z-index: -2; width: 34vw; max-width: 520px; aspect-ratio: 1; border-radius: 50%; filter: blur(75px); opacity: .17; }
.hero__ornament--cobalt { top: -12%; right: 4%; background: var(--cobalt); }
.hero__ornament--coral { bottom: -24%; left: -8%; background: var(--coral); }
.hero__inner { width: min(100%, var(--content)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr); align-items: center; gap: clamp(50px, 7vw, 104px); }
.hero__copy { max-width: 670px; }
.availability { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 25px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.32); color: var(--ink-soft); font-size: .66rem; font-weight: 600; }
.availability span { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px rgba(239,107,91,.14); }
.hero__role { color: var(--cobalt); font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.hero__name { display: flex; flex-wrap: wrap; column-gap: .22em; margin-top: 8px; font-size: clamp(4rem, 8.5vw, 9.4rem); font-weight: 700; letter-spacing: -.085em; line-height: .77; }
.hero__name span:last-child { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.hero__statement { max-width: 680px; margin-top: 35px; font-size: clamp(2rem, 3.6vw, 4.05rem); font-weight: 600; letter-spacing: -.055em; line-height: 1; }
.hero__statement em { color: var(--coral); font-family: var(--font-serif); font-weight: 600; }
.hero__lead { max-width: 620px; margin-top: 24px; color: var(--ink-soft); font-size: 1rem; line-height: 1.75; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 31px; }
.hero-media { position: relative; }
.hero-media__frame { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid rgba(29,29,32,.2); border-radius: clamp(24px, 3vw, 42px); background: #07111c; box-shadow: var(--shadow); }
.hero-media__poster, .hero-media__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media__video { z-index: 1; opacity: 0; transition: opacity 420ms ease; }
.hero-media__video.is-ready { opacity: 1; }
.hero-media__wash { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(3,8,16,.02), rgba(3,8,16,.72)); }
.hero-media__label { position: absolute; right: 28px; bottom: 26px; left: 28px; z-index: 3; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px 20px; color: white; }
.hero-media__label span, .hero-media__label small { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; opacity: .68; }
.hero-media__label strong { font-size: clamp(1.25rem, 2.3vw, 2.2rem); letter-spacing: -.04em; }
.hero-media__label small { grid-column: 2; grid-row: 1 / span 2; align-self: end; text-align: right; }
.hero-media__open { position: absolute; top: 20px; right: 20px; z-index: 4; padding: 10px 13px; border: 1px solid rgba(255,255,255,.34); border-radius: 999px; background: rgba(4,10,18,.58); color: white; font-size: .68rem; font-weight: 700; cursor: pointer; backdrop-filter: blur(12px); }
.hero-media__open:hover { background: white; color: var(--ink); }
.hero-media__caption { display: grid; grid-template-columns: 34px 1fr; gap: 14px; margin-top: 17px; color: var(--ink-soft); font-size: .76rem; }
.hero-media__caption span { color: var(--cobalt); font-family: var(--font-mono); font-weight: 600; }
.hero__scroll { position: absolute; right: max(20px, calc((100% - var(--content)) / 2)); bottom: 22px; display: flex; align-items: center; gap: 11px; color: var(--ink-muted); font-size: .65rem; font-weight: 600; }
.hero__scroll i { width: 42px; height: 1px; background: currentColor; }

.section { position: relative; padding: clamp(104px, 12vw, 180px) 20px; }

@supports (content-visibility: auto) {
  .masters, .products, .playground, .about, .contact {
    content-visibility: auto;
    contain-intrinsic-size: auto 1100px;
  }
}
.section-heading { width: min(100%, var(--content)); margin: 0 auto clamp(52px, 7vw, 92px); display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(280px, 390px); gap: 34px; align-items: end; }
.section-number { align-self: start; color: var(--ink); opacity: .1; font-size: clamp(5rem, 10vw, 10.5rem); font-weight: 600; line-height: .72; letter-spacing: -.08em; }
.section-heading h2 { margin-top: 12px; font-size: clamp(2.7rem, 5.2vw, 5.8rem); letter-spacing: -.065em; line-height: .95; }
.section-heading > p { color: var(--ink-soft); font-size: .93rem; line-height: 1.72; }
.section-heading--inverse { color: #f6f3ed; }
.section-heading--inverse .section-number { color: white; }
.section-heading--inverse > p { color: rgba(255,255,255,.7); }

.selected-work { overflow: hidden; color: white; background: #07111c; transition: background-color 700ms ease; isolation: isolate; }
.selected-work__ambient { position: absolute; inset: 0; z-index: -2; pointer-events: none; transition: background 700ms ease; }
.selected-work[data-active-atmosphere="shotgun"] .selected-work__ambient { background: radial-gradient(circle at 76% 16%, rgba(45,223,255,.19), transparent 34rem), radial-gradient(circle at 12% 76%, rgba(255,73,185,.13), transparent 32rem), #07111c; }
.selected-work[data-active-atmosphere="soma"] .selected-work__ambient { background: radial-gradient(circle at 18% 22%, rgba(105,85,226,.25), transparent 34rem), radial-gradient(circle at 84% 70%, rgba(41,136,255,.13), transparent 31rem), #0b0b1d; }
.selected-work[data-active-atmosphere="bookverse"] .selected-work__ambient { background: radial-gradient(circle at 78% 20%, rgba(218,180,91,.18), transparent 34rem), radial-gradient(circle at 8% 76%, rgba(34,83,150,.19), transparent 34rem), #06101e; }
.featured-list { width: min(100%, var(--content)); margin-inline: auto; display: grid; gap: clamp(100px, 13vw, 170px); }
.featured-project { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(340px, .82fr); align-items: center; gap: clamp(42px, 7vw, 96px); cursor: pointer; color: white; }
.featured-project--reverse { grid-template-columns: minmax(340px,.82fr) minmax(0,1.18fr); }
.featured-project--reverse .featured-project__media { order: 2; }
.featured-project__media { position: relative; overflow: hidden; aspect-ratio: 16/10; border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-lg); background: rgba(255,255,255,.04); box-shadow: var(--shadow-dark); }
.featured-project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 520ms var(--ease), filter 320ms ease; }
.featured-project:hover .featured-project__media img, .featured-project:focus-visible .featured-project__media img { transform: scale(1.025); filter: saturate(1.05); }
.featured-project__media--interface { padding: 18px; background: rgba(255,255,255,.05); }
.featured-project__media--interface img { border-radius: 22px; object-position: top; }
.featured-project__index { position: absolute; right: 22px; bottom: 10px; z-index: 2; color: white; opacity: .14; font-family: var(--font-mono); font-size: clamp(5rem, 10vw, 10rem); font-weight: 600; line-height: 1; }
.featured-project__copy h3 { margin-top: 12px; color: white; font-size: clamp(3rem, 6vw, 6.5rem); letter-spacing: -.075em; line-height: .88; }
.featured-project--shotgun .featured-project__copy h3 { color: #bff7ff; }
.featured-project--soma .featured-project__copy h3 { color: #d9d0ff; }
.featured-project--bookverse .featured-project__copy h3 { color: #f2d89b; }
.featured-project__copy > p:not(.project-meta) { max-width: 590px; margin-top: 24px; color: rgba(255,255,255,.72); font-size: 1rem; line-height: 1.75; }
.project-pill-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 27px; }
.project-pill-row span { padding: 6px 9px; border: 1px solid currentColor; border-radius: 999px; color: inherit; font-family: var(--font-mono); font-size: .61rem; opacity: .62; }
.project-cta { display: inline-flex; gap: 9px; margin-top: 30px; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.35); font-size: .77rem; }
.featured-project:hover .project-cta span { transform: translate(3px,-3px); }
.project-cta span { transition: transform 220ms var(--ease); }

.section--warm { background: linear-gradient(180deg, #e9e0d3, var(--paper)); }
.masters-grid { width: min(100%, var(--content)); margin-inline: auto; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.study-card { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(290px, .92fr); min-height: 350px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(255,255,255,.34); cursor: pointer; transition: transform 260ms var(--ease), border-color 220ms ease, background 220ms ease; }
.study-card--lead { grid-column: 1 / -1; min-height: 470px; }
.study-card:not(.study-card--lead) { grid-template-columns: 1fr; }
.study-card:hover, .study-card:focus-visible { border-color: rgba(37,87,214,.55); background: rgba(255,255,255,.58); transform: translateY(-5px); }
.study-card__media { min-height: 260px; overflow: hidden; }
.study-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 440ms var(--ease); }
.study-card:hover .study-card__media img { transform: scale(1.025); }
.study-card__copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(26px, 4vw, 50px); }
.study-card__copy h3 { margin-top: 9px; font-size: clamp(2rem, 3.7vw, 4.5rem); letter-spacing: -.06em; line-height: .94; }
.study-card:not(.study-card--lead) .study-card__copy h3 { font-size: clamp(1.8rem, 3vw, 3.25rem); }
.study-card__copy > p:not(.project-meta) { margin-top: 17px; color: var(--ink-soft); font-size: .88rem; }
.study-card__copy > span { margin-top: auto; padding-top: 25px; color: var(--cobalt); font-size: .74rem; font-weight: 700; }

.products { background: #f7f5f0; }
.product-list { width: min(100%, var(--content)); margin-inline: auto; display: grid; gap: 24px; }
.product-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); min-height: 590px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: white; cursor: pointer; transition: transform 280ms var(--ease), box-shadow 280ms ease; }
.product-card:nth-child(even) { grid-template-columns: minmax(360px,.9fr) minmax(0,1.1fr); }
.product-card:nth-child(even) .product-card__visual { order: 2; }
.product-card:hover, .product-card:focus-visible { transform: translateY(-5px); box-shadow: var(--shadow); }
.product-card__visual { position: relative; min-height: 500px; overflow: hidden; background: linear-gradient(135deg, #d8d7d3, #bfc1c6); }
.product-card--power .product-card__visual::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 65% 22%, rgba(239,107,91,.42), transparent 27rem); }
.product-card__phone { position: absolute; top: 50%; left: 50%; width: min(42%, 245px); border: 1px solid rgba(29,29,32,.2); border-radius: 28px; box-shadow: 0 30px 75px rgba(29,29,32,.28), 0 0 0 8px rgba(255,255,255,.24); }
.product-card__phone--front { z-index: 2; transform: translate(-73%,-48%) rotate(-4deg); }
.product-card__phone--back { z-index: 1; transform: translate(-4%,-50%) rotate(5deg) scale(.91); }
.product-card--meal .product-card__visual { background: linear-gradient(135deg, #e9f8ee, #ccebdc); }
.product-card__desktop { position: absolute; top: 50%; left: 50%; width: min(78%, 760px); border: 1px solid rgba(29,29,32,.14); border-radius: 22px; box-shadow: 0 30px 80px rgba(25,60,44,.2); transform: translate(-60%,-52%) rotate(-2deg); }
.product-card__mobile { position: absolute; top: 50%; left: 72%; z-index: 2; width: min(24%, 220px); border: 1px solid rgba(29,29,32,.14); border-radius: 25px; box-shadow: 0 28px 60px rgba(25,60,44,.22); transform: translate(-50%,-44%) rotate(5deg); }
.product-card__copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(34px, 5vw, 70px); }
.product-card__copy h3 { margin-top: 10px; font-size: clamp(2.5rem, 5vw, 5.7rem); letter-spacing: -.07em; line-height: .92; }
.product-card--power .product-card__copy h3 { color: #d85436; }
.product-card--meal .product-card__copy h3 { color: #167a54; }
.product-card__copy > p:not(.project-meta) { margin-top: 22px; color: var(--ink-soft); line-height: 1.75; }
.product-card__copy strong { margin-top: auto; padding-top: 34px; color: var(--ink); font-size: .76rem; }


/* Programeta product card */
.product-card--programeta .product-card__visual {
  background:
    radial-gradient(circle at 78% 18%, rgba(255,255,255,.58), transparent 21rem),
    linear-gradient(135deg, #f7d769 0%, #ead59a 100%);
}
.product-card--programeta .product-card__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .24;
  background-image:
    linear-gradient(rgba(58,47,18,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58,47,18,.08) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom, black, transparent 94%);
}
.product-card__programeta-desktop {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(82%, 790px);
  border: 1px solid rgba(58,47,18,.18);
  border-radius: 22px;
  box-shadow: 0 32px 86px rgba(58,47,18,.24), 0 0 0 9px rgba(255,255,255,.18);
  transform: translate(-60%,-52%) rotate(-2deg);
}
.product-card__programeta-mobile {
  position: absolute;
  top: 50%;
  left: 75%;
  z-index: 2;
  width: min(22%, 205px);
  border: 1px solid rgba(58,47,18,.18);
  border-radius: 27px;
  box-shadow: 0 30px 70px rgba(58,47,18,.28), 0 0 0 7px rgba(255,255,255,.22);
  transform: translate(-50%,-44%) rotate(5deg);
}
.product-card--programeta .product-card__copy h3 { color: #8a6510; }

/* Programeta case study */
.detail-hero--programeta {
  min-height: 620px;
  background: #e9c957;
}
.detail-hero--programeta > img {
  object-position: center;
}
.detail-hero--programeta::after {
  background: linear-gradient(180deg, rgba(40,32,12,.02) 34%, rgba(35,28,10,.88));
}
.project-detail--programeta {
  --bg: #1c1810;
  --bg-deep: #100d08;
  --surface: #292217;
  --surface-elevated: #352c1e;
  --text: #fff8e8;
  --text-soft: rgba(255,244,219,.75);
  --text-muted: rgba(255,244,219,.5);
  --yellow: #f6d365;
  --yellow-soft: #ffe9a0;
  --orange: #d7aa46;
  --line: rgba(246,211,101,.16);
  --line-strong: rgba(246,211,101,.32);
  --button-primary-text: #3a2f12;
}
.programeta-status-note {
  margin-top: 28px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}
.programeta-status-note span {
  color: var(--yellow);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.programeta-status-note p {
  margin-top: 7px;
  color: var(--text-soft);
  font-size: .84rem;
}
.programeta-figure img {
  aspect-ratio: 1900 / 940;
  object-fit: cover;
  object-position: top;
}
.programeta-gallery {
  display: grid;
  grid-template-columns: minmax(0,1.8fr) minmax(230px,.58fr);
  align-items: start;
  gap: 18px;
  margin-top: 36px;
}
.programeta-gallery figure {
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.programeta-gallery img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
}
.programeta-gallery__wide img {
  aspect-ratio: 1900 / 942;
  object-fit: cover;
  object-position: top;
}
.programeta-gallery__phone img {
  width: min(100%, 385px);
  margin-inline: auto;
  aspect-ratio: 385 / 843;
  object-fit: cover;
  object-position: top;
}
.programeta-gallery figcaption {
  margin-top: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: .68rem;
}

.section--playground { background: #222126; color: #f2eee6; }
.section--playground .section-number { color: white; }
.section--playground .section-heading > p { color: rgba(255,255,255,.66); }
.playground-grid { width: min(100%, var(--content)); margin-inline: auto; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); grid-auto-rows: 210px; gap: 18px; }
.play-card { position: relative; grid-column: span 4; grid-row: span 2; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 28px; background: #151418; cursor: pointer; transition: transform 260ms var(--ease), border-color 220ms ease; }
.play-card--sentient { grid-column: span 8; grid-row: span 3; }
.play-card--wide { grid-column: span 8; }
.play-card--small { grid-column: span 2; grid-row: span 2; }
.play-card:hover, .play-card:focus-visible { border-color: rgba(255,255,255,.34); transform: translateY(-5px); }
.play-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms var(--ease); }
.play-card:hover img { transform: scale(1.025); }
.play-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 32%, rgba(7,7,9,.92)); }
.play-card > div { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; padding: 26px; }
.play-card h3 { margin-top: 6px; color: white; font-size: clamp(1.5rem, 3.2vw, 3.5rem); letter-spacing: -.055em; line-height: 1; }
.play-card p:not(.project-meta) { max-width: 640px; margin-top: 12px; color: rgba(255,255,255,.72); font-size: .83rem; }
.play-card strong { display: inline-block; margin-top: 17px; color: #f0b8aa; font-size: .7rem; }
.play-card--small > div { padding: 18px; }
.play-card--small h3 { font-size: 1.25rem; }

.about { background: var(--paper); }
.about-grid { width: min(100%, var(--content)); margin-inline: auto; display: grid; grid-template-columns: 340px minmax(0,.9fr) minmax(360px,1.1fr); gap: clamp(34px, 6vw, 78px); align-items: start; }
.about-portrait { overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: var(--paper-2); }
.about-portrait img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.about-portrait figcaption { padding: 13px 16px; color: var(--ink-muted); font-family: var(--font-mono); font-size: .62rem; }
.about-copy__lead { font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: -.025em; line-height: 1.55; }
.about-copy > p + p { margin-top: 24px; color: var(--ink-soft); }
.text-link { display: inline-flex; gap: 9px; margin-top: 28px; padding-bottom: 4px; border-bottom: 1px solid var(--cobalt); color: var(--cobalt); font-weight: 700; }
.capability-list { border-top: 1px solid var(--line); }
.capability-list article { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 18px; padding: 25px 0; border-bottom: 1px solid var(--line); }
.capability-list span { color: var(--coral); font-family: var(--font-mono); font-size: .68rem; font-weight: 600; }
.capability-list h3 { font-size: 1.08rem; }
.capability-list p { margin-top: 8px; color: var(--ink-soft); font-size: .84rem; }
.education-list { width: min(100%, var(--content)); margin: 84px auto 0; border-top: 1px solid var(--line); }
.education-list article { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 30px; padding: 31px 0; border-bottom: 1px solid var(--line); }
.education-list > article > span { color: var(--cobalt); font-family: var(--font-mono); font-size: .7rem; }
.education-list p { color: var(--ink-muted); font-size: .68rem; }
.education-list h3 { margin-top: 7px; font-size: 1.25rem; letter-spacing: -.025em; }

.contact { padding: clamp(110px, 14vw, 190px) 20px 24px; background: #17161b; color: #f4efe6; }
.contact__inner, .contact__legal { width: min(100%, var(--content)); margin-inline: auto; }
.contact h2 { max-width: 1120px; margin-top: 17px; font-size: clamp(3.25rem, 7.8vw, 8.7rem); letter-spacing: -.08em; line-height: .88; }
.contact__actions { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-top: 65px; padding-bottom: 74px; }
.contact__actions nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 13px 25px; }
.contact__actions nav a { color: rgba(255,255,255,.7); font-size: .78rem; font-weight: 600; }
.contact__actions nav a:hover { color: white; }
.contact__legal { display: flex; justify-content: space-between; gap: 18px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.13); color: rgba(255,255,255,.48); font-family: var(--font-mono); font-size: .64rem; }
.back-to-top { position: fixed; right: 20px; bottom: 20px; z-index: 800; display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(29,29,32,.18); border-radius: 50%; background: rgba(243,238,229,.88); color: var(--ink); cursor: pointer; opacity: 0; pointer-events: none; backdrop-filter: blur(12px); transform: translateY(12px); transition: 220ms var(--ease); }
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================
   PROJECT DETAIL SYSTEM
   ========================================================= */
.project-detail {
  --bg: #111116;
  --bg-deep: #09090d;
  --surface: #19191f;
  --surface-elevated: #22222a;
  --text: #f5f1ea;
  --text-soft: rgba(245,241,234,.72);
  --text-muted: rgba(245,241,234,.48);
  --yellow: #8fcaff;
  --yellow-soft: #d9ecff;
  --orange: #ff7d6d;
  --line: rgba(255,255,255,.13);
  --line-strong: rgba(255,255,255,.22);
  --shadow-soft: 0 20px 70px rgba(0,0,0,.28);
  position: fixed; inset: 0; z-index: 2000; overflow: hidden; background: rgba(8,8,10,.76); opacity: 0; transition: opacity 300ms ease; backdrop-filter: blur(10px);
  color: var(--text);
}
.project-detail.is-open { opacity: 1; }
.project-detail__panel { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--yellow) 8%, transparent), transparent 30rem), var(--bg); transform: translateY(34px); transition: transform 380ms var(--ease); }
.project-detail.is-open .project-detail__panel { transform: translateY(0); }
.detail-progress { position: sticky; top: 0; z-index: 40; height: 3px; background: transparent; }
.detail-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--yellow), var(--orange)); box-shadow: 0 0 18px color-mix(in srgb, var(--yellow) 45%, transparent); }
.project-detail__toolbar { position: sticky; top: 3px; z-index: 30; height: 66px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 max(20px, calc((100% - var(--content)) / 2)); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(18px); }
.project-detail__toolbar > span { color: var(--text-muted); font-family: var(--font-mono); font-size: .64rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; }
.detail-back, .detail-close { border: 0; background: transparent; color: var(--text-soft); cursor: pointer; }
.detail-back { justify-self: start; padding: 8px 0; font-size: .8rem; font-weight: 600; }
.detail-close { justify-self: end; display: grid; width: 40px; height: 40px; place-items: center; font-size: 1.65rem; }
.detail-back:hover, .detail-close:hover { color: var(--yellow); }
.detail-container { width: min(calc(100% - 40px), var(--content)); margin-inline: auto; padding: 44px 0 110px; }
.detail-hero { position: relative; overflow: hidden; min-height: 480px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-deep); box-shadow: var(--shadow-dark); }
.detail-hero video, .detail-hero > img { width: 100%; height: min(68vh, 720px); object-fit: cover; }
.detail-hero--pixel > img { image-rendering: pixelated; }
.detail-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.03) 35%, rgba(0,0,0,.84)); }
.detail-hero__overlay { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; padding: clamp(28px, 5vw, 60px); }
.detail-hero__overlay p { color: var(--orange); font-family: var(--font-mono); font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.detail-hero__overlay h2 { max-width: 1000px; margin-top: 8px; color: var(--yellow-soft); font-size: clamp(2.8rem, 7vw, 7rem); letter-spacing: -.07em; line-height: .92; }
.detail-summary { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(320px,.75fr); gap: 70px; padding: 70px 0; border-bottom: 1px solid var(--line); }
.detail-summary--single { grid-template-columns: minmax(0,780px); }
.eyebrow { color: var(--orange); font-family: var(--font-mono); font-size: .66rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.detail-summary > div > p:last-child { margin-top: 12px; color: var(--text-soft); font-size: clamp(1.05rem,1.8vw,1.3rem); line-height: 1.75; }
.detail-summary dl { display: grid; grid-template-columns: repeat(2,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.detail-summary dl div { padding: 17px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.detail-summary dt { color: var(--text-muted); font-family: var(--font-mono); font-size: .62rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
.detail-summary dd { margin-top: 5px; font-size: .84rem; font-weight: 650; }
.detail-story > section { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 36px; padding: 70px 0; border-bottom: 1px solid var(--line); }
.detail-story__number { color: var(--orange); font-size: .72rem; font-weight: 600; letter-spacing: .06em; }
.detail-story h3, .character-section h3 { font-size: clamp(1.9rem,4vw,3.8rem); letter-spacing: -.055em; line-height: 1.03; }
.detail-story section > div:last-child > p { max-width: 800px; margin-top: 18px; color: var(--text-soft); font-size: 1rem; }
.detail-story figure { margin-top: 36px; }
.detail-story figure img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.detail-story figcaption { margin-top: 10px; color: var(--text-muted); font-family: var(--font-mono); font-size: .68rem; }
.detail-notes { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.detail-notes > div { min-height: 160px; padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.detail-notes > div > p:last-child { margin-top: 8px; color: var(--text-soft); font-size: .88rem; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.private-demo-note { display: inline-flex; min-height: 48px; align-items: center; padding: 11px 15px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-muted); font-size: .74rem; }

.character-section { padding: 70px 0; }
.character-section__heading { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 36px; margin-bottom: 36px; }
.character-section__heading > span { color: var(--orange); font-size: .72rem; font-weight: 600; }
.character-section__heading h3 { margin-top: 6px; }
.character-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.character-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); transition: transform 260ms var(--ease), border-color 220ms ease; }
.character-card:hover { border-color: var(--line-strong); transform: translateY(-5px); }
.character-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-bottom: 1px solid var(--line); image-rendering: pixelated; }
.character-card > div { padding: 18px; }
.character-card h4 { color: var(--yellow-soft); font-size: 1rem; }
.character-card p { margin-top: 8px; color: var(--text-soft); font-size: .8rem; line-height: 1.55; }

/* Shotgun */
.detail-hero--shotgun { background: radial-gradient(circle at 50% 20%, rgba(53,225,255,.18), transparent 28rem), #05101d; }
.shotgun-status-note { margin-top: 28px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.shotgun-status-note span { color: var(--yellow); font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase; }
.shotgun-status-note p { margin-top: 7px; color: var(--text-soft); font-size: .84rem; }
.shotgun-rule-grid, .webapp-feature-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 36px; }
.shotgun-rule-grid article, .webapp-feature-grid article { min-height: 180px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.shotgun-rule-grid article > span, .webapp-feature-grid article > span { color: var(--orange); font-family: var(--font-mono); font-size: .68rem; font-weight: 600; }
.shotgun-rule-grid h4, .webapp-feature-grid h4 { margin-top: 28px; color: var(--yellow-soft); font-size: 1.04rem; }
.shotgun-rule-grid p, .webapp-feature-grid p { margin-top: 8px; color: var(--text-soft); font-size: .82rem; }
.shotgun-gallery, .webapp-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-top: 36px; }
.shotgun-gallery figure, .webapp-gallery figure { margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.shotgun-gallery figure img { aspect-ratio: 16/10; object-fit: cover; }
.shotgun-system-list, .webapp-tech-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.shotgun-system-list span, .webapp-tech-list span { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-soft); font-family: var(--font-mono); font-size: .68rem; }
.shotgun-state-flow { display: flex; align-items: center; gap: 12px; margin-top: 34px; overflow-x: auto; padding-bottom: 8px; }
.shotgun-state-flow span { flex: 0 0 auto; padding: 11px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--yellow-soft); font-family: var(--font-mono); font-size: .66rem; }
.shotgun-state-flow i { flex: 0 0 32px; height: 1px; background: linear-gradient(90deg,var(--yellow),var(--orange)); }

/* Web application detail compositions */
.detail-hero--webapp { min-height: 650px; background: linear-gradient(135deg, rgba(216,216,214,.96), rgba(189,189,187,.88)); }
.detail-hero--webapp::after { background: linear-gradient(180deg, rgba(13,13,12,.02) 28%, rgba(13,13,12,.86) 100%); }
.webapp-hero__canvas, .bookverse-hero__canvas { position: absolute; inset: 0; overflow: hidden; }
.webapp-hero__canvas::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(61,61,64,.06) 1px, transparent 1px), linear-gradient(90deg,rgba(61,61,64,.06) 1px,transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom,black 10%,transparent 88%); }
.webapp-hero__glow { position: absolute; top: 2%; left: 52%; width: 520px; height: 520px; border-radius: 50%; background: rgba(240,90,26,.22); filter: blur(120px); transform: translateX(-50%); }
.webapp-hero__screen { position: absolute; top: 48px; width: min(30vw,330px); border: 1px solid rgba(61,61,64,.18); border-radius: 30px; box-shadow: 0 34px 80px rgba(31,31,32,.3),0 0 0 10px rgba(255,255,255,.11); }
.webapp-hero__screen--primary { left: 50%; z-index: 2; transform: translateX(-62%) rotate(-3deg); }
.webapp-hero__screen--secondary { left: 50%; z-index: 1; opacity: .9; transform: translateX(16%) translateY(42px) rotate(5deg) scale(.9); }
.webapp-figure { display: grid; justify-items: center; padding: 36px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.webapp-figure img { width: min(100%,390px) !important; aspect-ratio: 390/844; object-fit: cover; object-position: top; border-radius: 24px !important; }
.webapp-figure figcaption { width: min(100%,520px); text-align: center; }
.webapp-gallery figure img { width: 100%; aspect-ratio: 390/844; object-fit: cover; object-position: top; border-radius: 18px; border: 1px solid var(--line); }
.webapp-gallery figcaption { margin-top: 12px; color: var(--text-muted); font-family: var(--font-mono); font-size: .68rem; }
.webapp-figure--wide img { width: 100% !important; aspect-ratio: 16/10; object-fit: cover; }

/* Weekly Meal Planner */
.detail-hero--meal { min-height: 680px; background: linear-gradient(135deg, rgba(240,253,244,.98), rgba(209,250,229,.9)); }
.detail-hero--meal .webapp-hero__glow { left: 62%; background: rgba(5,150,105,.2); }
.meal-hero__screen { position: absolute; border: 1px solid rgba(15,23,42,.16); background: #f8fafc; box-shadow: 0 34px 90px rgba(15,23,42,.26),0 0 0 10px rgba(255,255,255,.18); }
.meal-hero__screen--desktop { top: 72px; left: 50%; width: min(64vw,760px); border-radius: 24px; transform: translateX(-62%) rotate(-2deg); }
.meal-hero__screen--mobile { top: 100px; left: 68%; z-index: 2; width: min(20vw,230px); border-radius: 28px; transform: rotate(5deg); }
.webapp-gallery--meal { grid-template-columns: minmax(0,1.75fr) minmax(220px,.65fr); align-items: start; }
.webapp-gallery--meal figure img { aspect-ratio: auto; height: auto; object-fit: contain; }
.webapp-gallery--meal .webapp-gallery__wide img { aspect-ratio: 16/10; object-fit: cover; }
.webapp-gallery--meal .webapp-gallery__phone img { width: min(100%,390px); margin-inline: auto; aspect-ratio: 390/844; object-fit: cover; object-position: top; }
.webapp-gallery--equal { grid-template-columns: repeat(2,minmax(0,1fr)); }
.webapp-gallery--equal figure img { width: 100%; max-height: 720px; object-fit: contain; }

/* Bookverse */
.detail-hero--bookverse { min-height: 700px; background: radial-gradient(circle at 58% 16%, rgba(231,197,111,.18), transparent 26rem), linear-gradient(135deg,#050914,#0c1830 58%,#070b14); }
.detail-hero--bookverse::after { background: linear-gradient(180deg,rgba(2,6,18,.02) 28%,rgba(5,8,16,.9) 100%); }
.bookverse-hero__canvas::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 28%,rgba(255,255,255,.62) 0 1px,transparent 1.6px),radial-gradient(circle at 72% 18%,rgba(255,255,255,.42) 0 1px,transparent 1.6px),radial-gradient(circle at 84% 74%,rgba(255,255,255,.34) 0 1px,transparent 1.6px),radial-gradient(circle at 38% 68%,rgba(255,255,255,.28) 0 1px,transparent 1.6px); background-size: 180px 180px,240px 240px,210px 210px,270px 270px; opacity: .7; }
.bookverse-hero__glow { position: absolute; top: 0; left: 58%; width: 620px; height: 620px; border-radius: 50%; background: rgba(231,197,111,.2); filter: blur(140px); transform: translateX(-50%); }
.bookverse-hero__screen { position: absolute; top: 72px; left: 50%; width: min(62vw,760px); aspect-ratio: 16/10; object-fit: cover; object-position: top; border: 1px solid rgba(231,197,111,.24); border-radius: 24px; box-shadow: 0 36px 100px rgba(0,0,0,.52),0 0 0 9px rgba(255,255,255,.055); }
.bookverse-hero__screen--primary { z-index: 2; transform: translateX(-67%) rotate(-2deg); }
.bookverse-hero__screen--secondary { z-index: 1; opacity: .78; transform: translateX(8%) translateY(74px) rotate(4deg) scale(.84); }
.bookverse-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
.bookverse-gallery figure img { aspect-ratio: 16/10; object-fit: cover; object-position: top; }

/* Hoverbike media switcher */
.detail-hero--switcher { isolation: isolate; }
.detail-media-tabs { position: absolute; top: 20px; left: 50%; z-index: 5; display: flex; max-width: calc(100% - 40px); padding: 4px; gap: 4px; overflow-x: auto; scrollbar-width: none; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(10,10,9,.82); backdrop-filter: blur(16px); transform: translateX(-50%); }
.detail-media-tabs::-webkit-scrollbar { display: none; }
.detail-media-tab { flex: 0 0 auto; padding: 10px 16px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--text-muted); font-size: .72rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.detail-media-tab:hover { color: var(--text); background: rgba(255,255,255,.05); }
.detail-media-tab.is-active { border-color: var(--yellow); background: color-mix(in srgb,var(--yellow) 12%,transparent); color: var(--yellow); }
.detail-media-image { transition: opacity 160ms ease, transform 240ms var(--ease); }
.detail-media-image.is-changing { opacity: .35; transform: scale(.995); }

/* Complete project atmospheres */
.project-detail--shotgun { --bg:#06111e; --bg-deep:#020811; --surface:#0c1a2a; --surface-elevated:#10253a; --text:#f3fbff; --text-soft:rgba(226,246,255,.74); --text-muted:rgba(226,246,255,.5); --yellow:#48e5ff; --yellow-soft:#c7f8ff; --orange:#ff56b5; --line:rgba(143,230,255,.16); --line-strong:rgba(143,230,255,.3); }
.project-detail--soma { --bg:#0d0b1b; --bg-deep:#060510; --surface:#17132a; --surface-elevated:#201a38; --text:#f6f2ff; --text-soft:rgba(234,227,255,.74); --text-muted:rgba(234,227,255,.48); --yellow:#978cff; --yellow-soft:#ded9ff; --orange:#ff6487; --line:rgba(173,159,255,.16); --line-strong:rgba(173,159,255,.3); }
.project-detail--bookverse { --bg:#07111f; --bg-deep:#030812; --surface:#0d1b2c; --surface-elevated:#12243a; --text:#fbf5e7; --text-soft:rgba(241,233,213,.74); --text-muted:rgba(241,233,213,.48); --yellow:#dfbd70; --yellow-soft:#f5dfaa; --orange:#7ca8e8; --line:rgba(223,189,112,.17); --line-strong:rgba(223,189,112,.32); }
.project-detail--mecha { --yellow:#ffc64a; --yellow-soft:#ffe5a4; --orange:#ff674f; }
.project-detail--monkey { --yellow:#72bdd9; --yellow-soft:#cbeefa; --orange:#e1a84c; }
.project-detail--mario { --yellow:#ff5a4f; --yellow-soft:#ffd2cc; --orange:#4d95ff; }
.project-detail--power { --bg:#f1efea; --bg-deep:#d6d4cf; --surface:#fff; --surface-elevated:#f9f7f2; --text:#252428; --text-soft:#5c595f; --text-muted:#817c83; --yellow:#e6602b; --yellow-soft:#9f3b1c; --orange:#e6602b; --line:rgba(37,36,40,.14); --line-strong:rgba(37,36,40,.26); }
.project-detail--meal { --bg:#f1f8f3; --bg-deep:#d7eadf; --surface:#fff; --surface-elevated:#eef8f1; --text:#183428; --text-soft:#49685a; --text-muted:#738a7e; --yellow:#16865d; --yellow-soft:#0d6041; --orange:#4a9d75; --line:rgba(24,52,40,.14); --line-strong:rgba(24,52,40,.26); }
.project-detail--sentient { --yellow:#58e8c4; --yellow-soft:#c7fff0; --orange:#ff7c9c; }
.project-detail--fantasy { --yellow:#d9b66d; --yellow-soft:#f5dfaf; --orange:#8fb0e7; }
.project-detail--thriller { --yellow:#e5d3bd; --yellow-soft:#fff2df; --orange:#d4685c; }
.project-detail--hoverbikes { --yellow:#82c8ff; --yellow-soft:#d5efff; --orange:#ff9f6a; }
.project-detail--malenia { --yellow:#d5ab64; --yellow-soft:#f1dbad; --orange:#b86b6b; }
.project-detail--pokeitems { --yellow:#ffcf4a; --yellow-soft:#ffe9a0; --orange:#e75b53; }

@media (max-width: 1120px) {
  .hero__inner { grid-template-columns: minmax(0,.9fr) minmax(420px,1.1fr); gap: 48px; }
  .section-heading { grid-template-columns: 120px minmax(0,1fr); }
  .section-heading > p { grid-column: 2; max-width: 650px; }
  .about-grid { grid-template-columns: 280px 1fr; }
  .capability-list { grid-column: 1 / -1; }
  .play-card--small { grid-column: span 4; }
}

@media (max-width: 900px) {
  :root { --header-height: 68px; }
  .menu-toggle { position: relative; z-index: 3; display: block; }
  .primary-nav { position: fixed; inset: var(--header-height) 14px auto; display: grid; overflow: hidden; padding: 10px; border: 1px solid var(--line); border-radius: 17px; background: rgba(243,238,229,.97); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(-10px); transition: opacity 180ms ease, transform 220ms var(--ease); }
  .primary-nav.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .primary-nav a { padding: 13px 14px; border-radius: 10px; }
  .primary-nav a::after { display: none; }
  .primary-nav a.is-active { background: var(--cobalt-soft); color: var(--cobalt); }
  .primary-nav__contact { margin: 4px 0 0; }
  .hero { min-height: auto; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__copy { max-width: 820px; }
  .hero-media { width: min(100%,780px); }
  .hero__scroll { display: none; }
  .featured-project, .featured-project--reverse { grid-template-columns: 1fr; gap: 35px; }
  .featured-project--reverse .featured-project__media { order: 0; }
  .masters-grid { grid-template-columns: 1fr; }
  .study-card--lead { grid-column: auto; }
  .study-card, .study-card--lead { grid-template-columns: 1fr; min-height: 0; }
  .product-card, .product-card:nth-child(even) { grid-template-columns: 1fr; }
  .product-card:nth-child(even) .product-card__visual { order: 0; }
  .playground-grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: 280px; }
  .play-card, .play-card--sentient, .play-card--wide, .play-card--small { grid-column: auto; grid-row: auto; }
  .play-card--sentient { grid-column: 1 / -1; min-height: 560px; }
  .detail-summary { grid-template-columns: 1fr; gap: 34px; }
  .webapp-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .shotgun-gallery { grid-template-columns: 1fr 1fr; }
  .shotgun-gallery figure:last-child { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .site-header__inner { width: min(calc(100% - 28px),var(--content)); }
  .brand__name { font-size: .86rem; }
  .hero { padding-inline: 14px; }
  .hero__name { display: grid; font-size: clamp(4.5rem,24vw,7.5rem); line-height: .74; }
  .hero__statement { font-size: clamp(2.15rem,10vw,3.5rem); }
  .hero-media__label { right: 17px; bottom: 16px; left: 17px; grid-template-columns: 1fr; }
  .hero-media__label small { grid-column: auto; grid-row: auto; text-align: left; }
  .hero-media__open { top: 12px; right: 12px; }
  .section { padding-inline: 14px; }
  .section-heading { grid-template-columns: 1fr; gap: 18px; }
  .section-number { font-size: 6rem; }
  .section-heading > p { grid-column: auto; }
  .section-heading h2 { font-size: clamp(2.6rem,13vw,4.4rem); }
  .featured-list { gap: 100px; }
  .featured-project__copy h3 { font-size: clamp(3.2rem,16vw,5.2rem); }
  .product-card__visual { min-height: 440px; }
  .product-card__phone { width: 205px; }
  .product-card__desktop { width: 560px; transform: translate(-68%,-52%) rotate(-2deg); }
  .product-card__mobile { left: 67%; width: 165px; }
  .playground-grid { grid-template-columns: 1fr; grid-auto-rows: 430px; }
  .play-card--sentient { grid-column: auto; min-height: 500px; }
  .about-grid { grid-template-columns: 1fr; }
  .about-portrait { width: min(100%,380px); }
  .capability-list { grid-column: auto; }
  .education-list article { grid-template-columns: 1fr; gap: 9px; }
  .contact h2 { font-size: clamp(3.1rem,15vw,5.4rem); }
  .contact__actions { align-items: flex-start; flex-direction: column; }
  .contact__actions nav { justify-content: flex-start; }
  .contact__legal { align-items: flex-start; flex-direction: column; }
  .project-detail__toolbar { grid-template-columns: 1fr auto; padding-inline: 16px; }
  .project-detail__toolbar > span { display: none; }
  .detail-container { width: min(calc(100% - 24px),var(--content)); padding-top: 20px; }
  .detail-hero { min-height: 360px; border-radius: 20px; }
  .detail-hero video, .detail-hero > img { height: min(62vh,520px); }
  .detail-summary { padding: 48px 0; }
  .detail-story > section, .character-section__heading { grid-template-columns: 1fr; gap: 12px; }
  .detail-story > section { padding: 48px 0; }
  .detail-notes, .character-gallery, .shotgun-rule-grid, .webapp-feature-grid, .shotgun-gallery, .webapp-gallery, .webapp-gallery--meal, .webapp-gallery--equal, .bookverse-gallery { grid-template-columns: 1fr; }
  .detail-hero--webapp, .detail-hero--meal, .detail-hero--bookverse { min-height: 560px; }
  .webapp-hero__screen { width: 220px; }
  .webapp-hero__screen--primary { left: 48%; transform: translateX(-78%) rotate(-3deg); }
  .webapp-hero__screen--secondary { left: 48%; transform: translateX(-2%) translateY(62px) rotate(5deg) scale(.82); }
  .meal-hero__screen--desktop { top: 74px; width: 520px; transform: translateX(-78%) rotate(-2deg); }
  .meal-hero__screen--mobile { top: 104px; left: 57%; width: 180px; }
  .bookverse-hero__screen { top: 70px; width: 510px; }
  .bookverse-hero__screen--primary { transform: translateX(-80%) rotate(-2deg); }
  .bookverse-hero__screen--secondary { transform: translateX(-10%) translateY(70px) rotate(4deg) scale(.77); }
  .detail-media-tabs { top: 14px; left: 14px; width: calc(100% - 28px); max-width: none; border-radius: 12px; transform: none; }
  .detail-media-tab { padding: 9px 13px; font-size: .66rem; }
  .brand__symbol {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 480px) {
  .hero__actions { display: grid; }
  .hero__actions .button { width: 100%; }
  .hero-media__caption { grid-template-columns: 1fr; }
  .product-card__copy { padding: 30px 22px 38px; }
  .detail-summary dl { grid-template-columns: 1fr; }
  .detail-actions { display: grid; }
  .detail-actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-media__video { display: none; opacity: 0; }
}

/* =========================================================
   CASE STUDY CORRECTIONS
   ========================================================= */
.project-detail {
  --button-primary-text: #07111c;
}

.project-detail .button--primary {
  border-color: var(--yellow);
  background: var(--yellow);
  color: var(--button-primary-text);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--yellow) 18%, transparent);
}

.project-detail .button--primary:hover {
  border-color: var(--yellow-soft);
  background: var(--yellow-soft);
  color: var(--button-primary-text);
  box-shadow: 0 18px 42px color-mix(in srgb, var(--yellow) 24%, transparent);
}

.project-detail .button--secondary {
  border-color: var(--line-strong);
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.project-detail .button--secondary:hover {
  border-color: var(--yellow);
  background: color-mix(in srgb, var(--yellow) 10%, var(--surface));
  color: var(--yellow-soft);
}

.project-detail--power,
.project-detail--meal {
  --button-primary-text: #ffffff;
}

.project-detail--brief .project-detail__toolbar {
  top: 0;
}

.project-detail--brief .detail-container {
  padding-top: 34px;
}

.project-detail video {
  background: var(--bg-deep);
}

.project-detail .button:focus-visible,
.detail-back:focus-visible,
.detail-close:focus-visible,
.detail-media-tab:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}


/* Programeta responsive refinements */
@media (max-width: 900px) {
  .product-card__programeta-desktop { width: min(86%, 760px); }
  .product-card__programeta-mobile { left: 73%; width: min(23%, 205px); }
}

@media (max-width: 700px) {
  .product-card--programeta .product-card__visual { min-height: 460px; }
  .product-card__programeta-desktop {
    width: 590px;
    transform: translate(-69%,-53%) rotate(-2deg);
  }
  .product-card__programeta-mobile {
    left: 67%;
    width: 165px;
  }
  .detail-hero--programeta { min-height: 470px; }
  .detail-hero--programeta > img { height: min(54vh, 470px); }
  .programeta-gallery { grid-template-columns: 1fr; }
  .programeta-gallery__phone { display: grid; justify-items: center; }
}

/* =========================================================
   PROGRAMETA — CHROMATIC RESTRUCTURE
   Warm light-first identity with umbra, pastel yellow and sage.
   These rules only affect Programeta's product card and case study.
   ========================================================= */

/* Product card: use the product's actual brand palette. */
.product-card--programeta .product-card__visual {
  background:
    radial-gradient(circle at 82% 14%, rgba(255,255,255,.62), transparent 20rem),
    radial-gradient(circle at 8% 88%, rgba(255,244,198,.5), transparent 18rem),
    linear-gradient(135deg, #f6d365 0%, #f4d77c 54%, #e8dfc9 100%);
}

.product-card--programeta .product-card__visual::before {
  opacity: .18;
  background-image:
    linear-gradient(rgba(58,47,18,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58,47,18,.07) 1px, transparent 1px);
}

.product-card--programeta .product-card__copy h3 {
  color: #3a2f12;
}

/* Light-first case-study palette. */
.project-detail--programeta {
  --bg: #f3eee5;
  --bg-deep: #e8dfcc;
  --surface: #fffaf1;
  --surface-elevated: #ffffff;
  --text: #3a2f12;
  --text-soft: rgba(58,47,18,.76);
  --text-muted: rgba(58,47,18,.54);
  --yellow: #f6d365;
  --yellow-soft: #ffedac;
  --orange: #64735e;
  --line: rgba(58,47,18,.14);
  --line-strong: rgba(58,47,18,.27);
  --shadow-soft: 0 18px 52px rgba(58,47,18,.10);
  --button-primary-text: #3a2f12;
  --programeta-umbra: #3a2f12;
  --programeta-umbra-deep: #1c1810;
  --programeta-cream: #f3eee5;
  --programeta-ivory: #fffaf1;
  --programeta-yellow: #f6d365;
  --programeta-yellow-soft: #ffedac;
  --programeta-sage: #dfe7da;
  --programeta-sage-ink: #53634e;
  --programeta-beige: #e8dfcc;
}

.project-detail--programeta .project-detail__panel {
  background:
    radial-gradient(circle at 100% 0%, rgba(246,211,101,.23), transparent 30rem),
    linear-gradient(180deg, #f8f4ec 0%, var(--programeta-cream) 42%, #ece4d5 100%);
}

.project-detail--programeta .project-detail__toolbar {
  border-bottom-color: rgba(58,47,18,.12);
  background: rgba(255,250,241,.88);
  color: var(--programeta-umbra);
}

.project-detail--programeta .detail-progress span {
  background: linear-gradient(90deg, var(--programeta-yellow), #8ca184);
  box-shadow: 0 0 18px rgba(246,211,101,.36);
}

/* Hero keeps the strongest brand-yellow moment. */
.detail-hero--programeta {
  min-height: 620px;
  border-color: rgba(58,47,18,.18);
  background:
    radial-gradient(circle at 86% 9%, rgba(255,255,255,.34), transparent 26rem),
    var(--programeta-yellow);
  box-shadow: 0 30px 90px rgba(58,47,18,.18);
}

.detail-hero--programeta::after {
  background: linear-gradient(
    180deg,
    rgba(58,47,18,0) 28%,
    rgba(58,47,18,.10) 54%,
    rgba(36,29,11,.91) 100%
  );
}

.project-detail--programeta .detail-hero__overlay p {
  color: var(--programeta-yellow-soft);
}

.project-detail--programeta .detail-hero__overlay h2 {
  color: #fff8e8;
}

/* Overview becomes a warm, contained introduction rather than a dark block. */
.project-detail--programeta .detail-summary {
  margin-top: 24px;
  padding: clamp(34px, 5vw, 58px);
  border: 1px solid rgba(58,47,18,.14);
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255,250,241,.98), rgba(255,244,198,.55));
  box-shadow: 0 18px 55px rgba(58,47,18,.08);
}

.project-detail--programeta .detail-summary dl {
  overflow: hidden;
  border-radius: 20px;
  background: rgba(255,255,255,.54);
}

.project-detail--programeta .programeta-status-note {
  border-color: rgba(83,99,78,.22);
  background: var(--programeta-sage);
  box-shadow: 0 12px 32px rgba(83,99,78,.08);
}

.project-detail--programeta .programeta-status-note span {
  color: var(--programeta-sage-ink);
}

.project-detail--programeta .programeta-status-note p {
  color: rgba(58,47,18,.76);
}

/* Chapter cards create a deliberate chromatic rhythm. */
.project-detail--programeta .detail-story {
  display: grid;
  gap: 18px;
  padding: 30px 0 72px;
}

.project-detail--programeta .detail-story > section {
  margin: 0;
  padding: clamp(34px, 5vw, 58px);
  border: 1px solid rgba(58,47,18,.13);
  border-radius: 30px;
  background: var(--programeta-ivory);
  box-shadow: 0 16px 48px rgba(58,47,18,.065);
}

.project-detail--programeta .detail-story > section:nth-child(1) {
  background:
    radial-gradient(circle at 96% 8%, rgba(246,211,101,.32), transparent 16rem),
    var(--programeta-ivory);
}

.project-detail--programeta .detail-story > section:nth-child(2) {
  background: #ffffff;
}

.project-detail--programeta .detail-story > section:nth-child(3) {
  background: linear-gradient(135deg, #f2ead9, #fffaf1);
}

.project-detail--programeta .detail-story > section:nth-child(4) {
  background: linear-gradient(135deg, #fffdf7, #f8f0d5);
}

/* Responsive and dark-theme chapter: one purposeful umbra section. */
.project-detail--programeta .detail-story > section:nth-child(5) {
  border-color: rgba(246,211,101,.18);
  background:
    radial-gradient(circle at 84% 18%, rgba(246,211,101,.13), transparent 24rem),
    var(--programeta-umbra-deep);
  color: #fff8e8;
  box-shadow: 0 24px 70px rgba(28,24,16,.22);
}

.project-detail--programeta .detail-story > section:nth-child(5) .detail-story__number,
.project-detail--programeta .detail-story > section:nth-child(5) .eyebrow {
  color: var(--programeta-yellow);
}

.project-detail--programeta .detail-story > section:nth-child(5) h3 {
  color: #fff8e8;
}

.project-detail--programeta .detail-story > section:nth-child(5) > div > p {
  color: rgba(255,248,232,.74);
}

.project-detail--programeta .detail-story > section:nth-child(5) .programeta-gallery figure {
  border-color: rgba(246,211,101,.18);
  background: #292217;
}

.project-detail--programeta .detail-story > section:nth-child(5) .programeta-gallery img {
  border-color: rgba(246,211,101,.15);
}

.project-detail--programeta .detail-story > section:nth-child(5) .programeta-gallery figcaption {
  color: rgba(255,248,232,.58);
}

/* Firebase chapter: use sage to represent sync, stability and persistence. */
.project-detail--programeta .detail-story > section:nth-child(6) {
  border-color: rgba(83,99,78,.20);
  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.50), transparent 18rem),
    var(--programeta-sage);
}

.project-detail--programeta .detail-story > section:nth-child(6) .detail-story__number,
.project-detail--programeta .detail-story > section:nth-child(6) .eyebrow {
  color: var(--programeta-sage-ink);
}

.project-detail--programeta .detail-story > section:nth-child(6) .webapp-tech-list span {
  border-color: rgba(83,99,78,.28);
  background: rgba(255,255,255,.42);
  color: #42503f;
}

/* Result chapter closes with a softer yellow brand echo. */
.project-detail--programeta .detail-story > section:nth-child(7) {
  border-color: rgba(181,143,37,.18);
  background:
    radial-gradient(circle at 92% 18%, rgba(255,255,255,.48), transparent 17rem),
    linear-gradient(135deg, var(--programeta-yellow-soft), #f9e6a8);
}

/* Feature cards alternate ivory and sage instead of inheriting generic dark cards. */
.project-detail--programeta .webapp-feature-grid article {
  border-color: rgba(58,47,18,.14);
  background: rgba(255,255,255,.72);
  box-shadow: 0 12px 32px rgba(58,47,18,.065);
}

.project-detail--programeta .webapp-feature-grid article:nth-child(2),
.project-detail--programeta .webapp-feature-grid article:nth-child(4) {
  border-color: rgba(83,99,78,.20);
  background: var(--programeta-sage);
}

.project-detail--programeta .webapp-feature-grid article > span {
  color: var(--programeta-sage-ink);
}

.project-detail--programeta .webapp-feature-grid h4 {
  color: var(--programeta-umbra);
}

.project-detail--programeta .webapp-feature-grid p {
  color: rgba(58,47,18,.70);
}

/* Figures read as warm editorial plates. */
.project-detail--programeta .webapp-figure,
.project-detail--programeta .programeta-gallery figure {
  border-color: rgba(58,47,18,.13);
  background: rgba(255,250,241,.82);
  box-shadow: 0 16px 44px rgba(58,47,18,.07);
}

.project-detail--programeta .webapp-figure img,
.project-detail--programeta .programeta-gallery img {
  border-color: rgba(58,47,18,.12);
  box-shadow: 0 14px 38px rgba(58,47,18,.08);
}

.project-detail--programeta .detail-story figcaption,
.project-detail--programeta .programeta-gallery figcaption {
  color: rgba(58,47,18,.56);
}

/* Links and buttons stay legible on the light palette. */
.project-detail--programeta .button--primary {
  border-color: var(--programeta-umbra);
  background: var(--programeta-umbra);
  color: #fff8e8;
  box-shadow: 0 14px 34px rgba(58,47,18,.18);
}

.project-detail--programeta .button--primary:hover {
  border-color: #211b0b;
  background: #211b0b;
  color: #fff8e8;
}

.project-detail--programeta .button--secondary {
  border-color: rgba(58,47,18,.30);
  background: rgba(255,255,255,.45);
  color: var(--programeta-umbra);
}

.project-detail--programeta .button--secondary:hover {
  border-color: var(--programeta-umbra);
  background: var(--programeta-yellow-soft);
  color: var(--programeta-umbra);
}

/* Closing notes become three distinct product-colour cards. */
.project-detail--programeta .detail-notes {
  gap: 14px;
  border: 0;
  background: transparent;
}

.project-detail--programeta .detail-notes > div {
  min-height: 170px;
  border: 1px solid rgba(58,47,18,.13);
  border-radius: 22px;
  background: var(--programeta-ivory);
  box-shadow: 0 14px 38px rgba(58,47,18,.06);
}

.project-detail--programeta .detail-notes > div:nth-child(2) {
  border-color: rgba(83,99,78,.20);
  background: var(--programeta-sage);
}

.project-detail--programeta .detail-notes > div:nth-child(3) {
  background: var(--programeta-yellow-soft);
}

.project-detail--programeta .detail-notes .eyebrow {
  color: var(--programeta-sage-ink);
}

.project-detail--programeta .detail-notes > div > p:last-child {
  color: rgba(58,47,18,.72);
}

@media (max-width: 900px) {
  .project-detail--programeta .detail-summary {
    padding: 34px;
  }

  .project-detail--programeta .detail-story > section {
    padding: 38px;
  }
}

@media (max-width: 700px) {
  .project-detail--programeta .detail-summary {
    margin-top: 14px;
    padding: 26px 22px;
    border-radius: 22px;
  }

  .project-detail--programeta .detail-story {
    gap: 12px;
    padding-top: 18px;
  }

  .project-detail--programeta .detail-story > section {
    padding: 30px 22px;
    border-radius: 22px;
  }

  .project-detail--programeta .detail-notes {
    gap: 10px;
  }
}

/* =========================================================
   IDEARIUM — PRODUCT CARD AND CASE STUDY
   ========================================================= */

.product-card--idearium .product-card__visual {
  background:
    radial-gradient(circle at 82% 16%, rgba(255,247,237,.72), transparent 19rem),
    radial-gradient(circle at 8% 88%, rgba(20,18,17,.20), transparent 24rem),
    linear-gradient(135deg, #d45c3f 0%, #c94f35 58%, #a93f2a 100%);
}

.product-card--idearium .product-card__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(255,247,237,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,247,237,.12) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 92%);
}

.idearium-card__brand {
  position: absolute;
  top: 34px;
  left: 36px;
  z-index: 4;
  width: 72px;
  height: 72px;
  padding: 8px;
  border: 1px solid rgba(255,247,237,.30);
  border-radius: 22px;
  background: rgba(22,18,16,.20);
  box-shadow: 0 16px 40px rgba(45,17,10,.22);
  backdrop-filter: blur(14px);
}

.idearium-card__brand img {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: cover;
}

.product-card__idearium-desktop {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(82%, 790px);
  border: 1px solid rgba(42,21,15,.26);
  border-radius: 22px;
  box-shadow: 0 34px 90px rgba(45,17,10,.34), 0 0 0 9px rgba(255,247,237,.16);
  transform: translate(-60%,-50%) rotate(-2deg);
}

.product-card__idearium-mobile {
  position: absolute;
  top: 50%;
  left: 76%;
  z-index: 3;
  width: min(22%, 205px);
  border: 1px solid rgba(42,21,15,.26);
  border-radius: 28px;
  box-shadow: 0 30px 70px rgba(45,17,10,.38), 0 0 0 7px rgba(255,247,237,.20);
  transform: translate(-50%,-42%) rotate(5deg);
}

.product-card--idearium .product-card__copy h3 {
  color: #b8442d;
}

.project-detail--idearium {
  --bg: #171311;
  --bg-deep: #0f0c0b;
  --surface: #241c19;
  --surface-elevated: #30231f;
  --text: #fff7ed;
  --text-soft: rgba(255,247,237,.75);
  --text-muted: rgba(255,247,237,.50);
  --yellow: #ef7a59;
  --yellow-soft: #ffd9c8;
  --orange: #f2a07f;
  --line: rgba(255,217,200,.15);
  --line-strong: rgba(255,217,200,.30);
  --shadow-soft: 0 20px 70px rgba(20,10,7,.30);
  --button-primary-text: #24120d;
  --idearium-terracotta: #d45c3f;
  --idearium-terracotta-dark: #a93f2a;
  --idearium-cream: #fff7ed;
  --idearium-paper: #f5e8dd;
  --idearium-ink: #241a17;
}

.project-detail--idearium .project-detail__panel {
  background:
    radial-gradient(circle at 100% 0%, rgba(212,92,63,.18), transparent 32rem),
    linear-gradient(180deg, #1a1513 0%, #120f0e 100%);
}

.detail-hero--idearium {
  min-height: 700px;
  background: linear-gradient(135deg, #2a1b17 0%, #171311 58%, #0f0c0b 100%);
}

.detail-hero--idearium::after {
  background: linear-gradient(180deg, rgba(15,12,11,.02) 25%, rgba(15,12,11,.90) 100%);
}

.idearium-hero__canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.idearium-hero__canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .34;
  background-image:
    linear-gradient(rgba(255,247,237,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,247,237,.06) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, black, transparent 92%);
}

.idearium-hero__glow {
  position: absolute;
  top: -12%;
  left: 68%;
  width: 680px;
  height: 680px;
  border-radius: 50%;
  background: rgba(212,92,63,.38);
  filter: blur(145px);
  transform: translateX(-50%);
}

.idearium-hero__mark {
  position: absolute;
  top: 62px;
  left: 56px;
  z-index: 3;
  width: 96px;
  height: 96px;
  border: 1px solid rgba(255,247,237,.22);
  border-radius: 30px;
  box-shadow: 0 24px 60px rgba(20,8,5,.36);
}

.idearium-hero__screen {
  position: absolute;
  border: 1px solid rgba(255,247,237,.16);
  background: #181513;
  box-shadow: 0 38px 100px rgba(0,0,0,.48), 0 0 0 9px rgba(255,247,237,.06);
}

.idearium-hero__screen--desktop {
  top: 74px;
  left: 50%;
  width: min(65vw, 800px);
  border-radius: 25px;
  transform: translateX(-66%) rotate(-2deg);
}

.idearium-hero__screen--mobile {
  top: 102px;
  left: 70%;
  z-index: 2;
  width: min(20vw, 225px);
  border-radius: 30px;
  transform: rotate(5deg);
}

.idearium-status-note {
  margin-top: 28px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}

.idearium-status-note span {
  color: var(--yellow);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.idearium-status-note p {
  margin-top: 7px;
  color: var(--text-soft);
  font-size: .84rem;
}

.project-detail--idearium .detail-story {
  display: grid;
  gap: 18px;
  padding: 30px 0 72px;
}

.project-detail--idearium .detail-story > section {
  margin: 0;
  padding: clamp(34px, 5vw, 58px);
  border: 1px solid var(--line);
  border-radius: 30px;
  background:
    radial-gradient(circle at 100% 0%, rgba(212,92,63,.09), transparent 18rem),
    var(--surface);
  box-shadow: 0 18px 54px rgba(0,0,0,.14);
}

.project-detail--idearium .detail-story > section:nth-child(3),
.project-detail--idearium .detail-story > section:nth-child(7) {
  background:
    radial-gradient(circle at 92% 10%, rgba(239,122,89,.16), transparent 20rem),
    var(--surface-elevated);
}

.project-detail--idearium .webapp-feature-grid article {
  border-color: var(--line);
  background: rgba(255,247,237,.045);
}

.project-detail--idearium .webapp-feature-grid h4 {
  color: var(--yellow-soft);
}

.project-detail--idearium .webapp-feature-grid p {
  color: var(--text-soft);
}

.idearium-state-flow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.idearium-state-flow span {
  flex: 0 0 auto;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,247,237,.045);
  color: var(--yellow-soft);
  font-family: var(--font-mono);
  font-size: .66rem;
}

.idearium-state-flow i {
  flex: 0 0 32px;
  height: 1px;
  background: linear-gradient(90deg, var(--yellow), var(--orange));
}

.idearium-figure img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
}

.idearium-gallery {
  display: grid;
  grid-template-columns: minmax(230px,.62fr) minmax(0,1.38fr);
  align-items: start;
  gap: 18px;
  margin-top: 36px;
}

.idearium-gallery figure {
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255,247,237,.045);
}

.idearium-gallery img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
}

.idearium-gallery figure:first-child img {
  width: min(100%, 390px);
  margin-inline: auto;
}

.idearium-gallery figure:last-child img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
}

.idearium-gallery figcaption {
  margin-top: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: .68rem;
}

.project-detail--idearium .detail-notes {
  gap: 14px;
  border: 0;
  background: transparent;
}

.project-detail--idearium .detail-notes > div {
  min-height: 170px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
}

.project-detail--idearium .detail-notes > div:nth-child(2) {
  background: var(--surface-elevated);
}

.project-detail--idearium .detail-notes > div:nth-child(3) {
  border-color: rgba(239,122,89,.25);
  background: rgba(212,92,63,.13);
}

@media (max-width: 900px) {
  .product-card__idearium-desktop {
    width: min(86%, 760px);
  }

  .product-card__idearium-mobile {
    left: 73%;
    width: min(23%, 205px);
  }

  .idearium-hero__screen--desktop {
    width: 760px;
    transform: translateX(-72%) rotate(-2deg);
  }

  .idearium-hero__screen--mobile {
    left: 66%;
    width: 205px;
  }
}

@media (max-width: 700px) {
  .product-card--idearium .product-card__visual {
    min-height: 470px;
  }

  .idearium-card__brand {
    top: 22px;
    left: 22px;
    width: 60px;
    height: 60px;
    border-radius: 18px;
  }

  .product-card__idearium-desktop {
    width: 590px;
    transform: translate(-69%,-51%) rotate(-2deg);
  }

  .product-card__idearium-mobile {
    left: 68%;
    width: 165px;
  }

  .detail-hero--idearium {
    min-height: 570px;
  }

  .idearium-hero__mark {
    top: 24px;
    left: 24px;
    width: 70px;
    height: 70px;
    border-radius: 22px;
  }

  .idearium-hero__screen--desktop {
    top: 76px;
    width: 520px;
    transform: translateX(-79%) rotate(-2deg);
  }

  .idearium-hero__screen--mobile {
    top: 108px;
    left: 58%;
    width: 175px;
  }

  .project-detail--idearium .detail-story {
    gap: 12px;
    padding-top: 18px;
  }

  .project-detail--idearium .detail-story > section {
    padding: 30px 22px;
    border-radius: 22px;
  }

  .idearium-gallery {
    grid-template-columns: 1fr;
  }
}