:root {
  --ink: #10100e;
  --paper: #f3f0e8;
  --blue: #5b6cff;
  --muted: #a5a39c;
  --line: rgba(16,16,14,.18);
  --dark-line: rgba(243,240,232,.18);
  --gold: #c8a66a;
  --case-paper: #eee9df;
  --max: 1460px;
  --pad: clamp(1.25rem, 4vw, 4.75rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Manrope", sans-serif; font-size: 1rem; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
.skip-link { position: fixed; z-index: 100; top: 1rem; left: 1rem; transform: translateY(-180%); padding: .75rem 1rem; background: var(--blue); color: white; }
.skip-link:focus { transform: none; }

.topbar { position: relative; z-index: 10; height: 5.5rem; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; padding: 0 var(--pad); border-bottom: 1px solid var(--line); background: var(--paper); font: 500 .72rem/1 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
.topbar > p { justify-self: center; }
.topbar > a:last-child { justify-self: end; }
.studio-mark { display: flex; align-items: center; gap: .8rem; }
.studio-mark > span { width: 2.35rem; aspect-ratio: 1; display: grid; place-items: center; background: var(--blue); color: white; font: 500 .72rem/1 "DM Mono", monospace; }
.studio-mark strong { font-weight: 600; }

.case-hero { min-height: calc(100svh - 5.5rem); padding: clamp(4rem, 7vw, 7rem) var(--pad) 3rem; display: flex; flex-direction: column; justify-content: space-between; }
.hero-kicker { display: flex; gap: 2rem; font: 500 .68rem/1.4 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
.case-hero h1 { margin: 1rem 0; font: 500 clamp(7rem, 20vw, 20rem)/.7 "Newsreader", serif; letter-spacing: -.075em; }
.case-hero h1 em { color: var(--blue); font-weight: 500; }
.hero-summary { display: flex; justify-content: space-between; align-items: end; gap: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.hero-summary p { max-width: 39rem; margin: 0; font-size: clamp(1.1rem, 2vw, 1.6rem); line-height: 1.35; }
.hero-summary span { font: 500 .72rem/1 "DM Mono", monospace; }

.project-stage { position: relative; height: min(74vw, 920px); min-height: 44rem; overflow: hidden; background: var(--ink); color: var(--case-paper); }
.project-stage > img { position: absolute; inset: 0; height: 100%; object-fit: cover; filter: saturate(.7) contrast(1.06); }
.stage-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,8,.9), rgba(10,10,8,.44) 48%, rgba(10,10,8,.08)); }
.stage-ui { position: absolute; left: var(--pad); top: 12%; z-index: 2; }
.stage-brand { display: flex; align-items: center; gap: .8rem; font: 500 1.2rem/1 "Newsreader", serif; }
.stage-brand span { width: 2.8rem; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--gold); color: var(--gold); font-size: .85rem; }
.stage-ui > p { margin-top: clamp(7rem, 15vw, 15rem); color: var(--gold); font: 500 .7rem/1 "DM Mono", monospace; letter-spacing: .15em; }
.stage-ui h2 { margin: 1.5rem 0 2rem; font: 500 clamp(4.5rem, 9vw, 9rem)/.82 "Newsreader", serif; letter-spacing: -.055em; }
.stage-ui h2 em { color: var(--gold); }
.stage-button { display: inline-flex; gap: 3rem; padding: 1rem 1.2rem; background: var(--gold); color: var(--ink); font: 500 .7rem/1 "DM Mono", monospace; text-transform: uppercase; }
.stage-rating { position: absolute; z-index: 2; right: var(--pad); bottom: var(--pad); display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; background: rgba(16,16,14,.82); border: 1px solid var(--dark-line); }
.stage-rating strong { font: 500 2.5rem/1 "Newsreader", serif; }
.stage-rating span { color: var(--gold); font-size: .66rem; line-height: 1.5; }

.meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.meta-grid > div { min-height: 9rem; display: flex; flex-direction: column; justify-content: space-between; padding: 1.5rem var(--pad); border-right: 1px solid var(--line); }
.meta-grid span, .section-label { font: 500 .68rem/1 "DM Mono", monospace; color: #6f6d67; text-transform: uppercase; letter-spacing: .08em; }
.meta-grid strong { font-size: .9rem; font-weight: 600; }

.section { max-width: var(--max); margin: auto; padding: clamp(6rem, 11vw, 11rem) var(--pad); }
.narrative { display: grid; grid-template-columns: .7fr 2fr; gap: 4rem; }
.narrative h2, .challenge h2, .art-copy h2, .gallery-head h2, .mobile-copy h2, .outcome h2, .next-project h2 { margin: 0; font: 500 clamp(3.6rem, 7vw, 7rem)/.95 "Newsreader", serif; letter-spacing: -.055em; }
.narrative-copy p { max-width: 49rem; margin: 2.5rem 0 0; color: #55534e; font-size: clamp(1.05rem, 1.5vw, 1.3rem); }

.challenge { max-width: none; background: var(--ink); color: var(--paper); }
.challenge > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.challenge .section-label { color: var(--blue); }
.challenge-title { display: grid; grid-template-columns: 1.2fr .8fr; gap: 5rem; align-items: end; margin-top: 3rem; }
.challenge-title p { margin: 0 0 .6rem; color: rgba(243,240,232,.64); font-size: 1.1rem; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 6rem; border-top: 1px solid var(--dark-line); }
.principles article { min-height: 20rem; padding: 2rem 2rem 2rem 0; border-right: 1px solid var(--dark-line); }
.principles article + article { padding-left: 2rem; }
.principles span { color: var(--blue); font: 500 .7rem/1 "DM Mono", monospace; }
.principles h3 { margin: 5rem 0 1rem; font: 500 2.1rem/1 "Newsreader", serif; }
.principles p { color: rgba(243,240,232,.58); }

.art-direction { display: grid; grid-template-columns: 1fr 1fr; gap: 7rem; align-items: center; }
.art-copy h2 { margin: 2rem 0; }
.art-copy > p:last-child { color: #5f5c55; }
.palette { display: grid; grid-template-columns: repeat(3, 1fr); min-height: 31rem; border: 1px solid var(--line); }
.swatch { display: flex; flex-direction: column; justify-content: space-between; padding: 1.25rem; border-right: 1px solid rgba(255,255,255,.2); }
.swatch span { font: 500 .66rem/1 "DM Mono", monospace; }
.swatch strong { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; }
.swatch-ink { background: #11110f; color: white; }
.swatch-paper { background: #eee9df; color: var(--ink); }
.swatch-gold { background: #c8a66a; color: var(--ink); }

.gallery-section { padding-bottom: clamp(6rem, 10vw, 10rem); background: #d9d5cb; }
.gallery-head { display: flex; justify-content: space-between; gap: 4rem; align-items: end; padding-bottom: 4rem; }
.gallery-head h2 { max-width: 56rem; }
.case-gallery { max-width: var(--max); margin: auto; padding: 0 var(--pad); display: grid; grid-template-columns: 1.15fr .85fr .85fr; grid-auto-rows: 280px; gap: .9rem; }
.case-gallery figure { margin: 0; overflow: hidden; background: #bbb7ad; }
.case-gallery img { height: 100%; object-fit: cover; filter: saturate(.83); transition: transform .6s, filter .6s; }
.case-gallery figure:hover img { transform: scale(1.035); filter: saturate(1); }
.gallery-tall { grid-row: span 2; }
.gallery-wide { grid-column: span 2; }

.mobile-story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(4rem, 10vw, 10rem); align-items: center; background: var(--paper); }
.phone-wrap { display: grid; place-items: center; padding: clamp(2rem, 5vw, 5rem); background: var(--blue); }
.phone { position: relative; width: min(330px, 100%); min-height: 650px; overflow: hidden; border: 8px solid var(--ink); border-radius: 2.1rem; background: var(--ink); color: var(--case-paper); box-shadow: 0 35px 80px rgba(16,16,14,.28); }
.phone-top { position: relative; z-index: 3; height: 4.2rem; display: flex; align-items: center; gap: .65rem; padding: 0 1rem; background: rgba(17,17,15,.96); font: 500 .95rem/1 "Newsreader", serif; }
.phone-top i { margin-left: auto; width: 1.3rem; height: .65rem; border-top: 1px solid white; border-bottom: 1px solid white; }
.mini-mark { width: 1.8rem; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--gold); color: var(--gold); font-size: .55rem; }
.phone-hero { position: relative; height: 430px; padding: 11rem 1.2rem 1rem; overflow: hidden; }
.phone-hero img, .phone-hero > div { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.phone-hero > div { background: linear-gradient(90deg, rgba(10,10,8,.86), rgba(10,10,8,.2)), linear-gradient(0deg, rgba(10,10,8,.78), transparent 60%); }
.phone-hero p, .phone-hero h3, .phone-hero .phone-cta { position: relative; }
.phone-hero p { color: var(--gold); font: 500 .5rem/1 "DM Mono", monospace; letter-spacing: .12em; }
.phone-hero h3 { margin: .8rem 0 1.3rem; font: 500 3.2rem/.85 "Newsreader", serif; }
.phone-hero h3 em { color: var(--gold); }
.phone-cta { display: inline-block; padding: .7rem .8rem; background: var(--gold); color: var(--ink); font: 500 .55rem/1 "DM Mono", monospace; text-transform: uppercase; }
.phone-price { display: flex; justify-content: space-between; align-items: center; padding: 1.3rem 1rem 5rem; border-top: 1px solid var(--dark-line); }
.phone-price small { color: rgba(243,240,232,.55); font-size: .5rem; }
.phone-price strong { color: var(--gold); font-size: .8rem; }
.phone-sticky { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 1rem; background: var(--gold); color: var(--ink); font: 500 .6rem/1 "DM Mono", monospace; }
.mobile-copy h2 { margin: 2rem 0; }
.mobile-copy > p:not(.section-label) { color: #5f5c55; }
.mobile-copy ul { list-style: none; margin: 2.5rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.mobile-copy li { display: grid; grid-template-columns: 3rem 1fr; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.mobile-copy li span { color: var(--blue); font: 500 .68rem/1.6 "DM Mono", monospace; }

.system-strip { display: flex; align-items: center; gap: 2rem; overflow: hidden; padding: 1.1rem var(--pad); background: var(--blue); color: white; white-space: nowrap; font: 500 .7rem/1 "DM Mono", monospace; text-transform: uppercase; }
.system-strip p { margin: 0; }
.system-strip span { opacity: .6; }

.outcome { max-width: none; background: var(--ink); color: var(--paper); }
.outcome > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.outcome .section-label { color: var(--blue); }
.outcome-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 7rem; margin-top: 3rem; }
.outcome-grid > div > p { color: rgba(243,240,232,.66); font-size: 1.1rem; }
.honesty-note { margin-top: 2.2rem; padding-top: 2.2rem; border-top: 1px solid var(--dark-line); font-size: .88rem !important; }
.honesty-note strong { color: var(--paper); }
.outcome-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 7rem; border-top: 1px solid var(--dark-line); }
.outcome-stats div { min-height: 12rem; display: flex; flex-direction: column; justify-content: space-between; padding: 1.5rem 1.5rem 1.5rem 0; border-right: 1px solid var(--dark-line); }
.outcome-stats div + div { padding-left: 1.5rem; }
.outcome-stats strong { font: 500 4.5rem/1 "Newsreader", serif; color: var(--blue); }
.outcome-stats span { max-width: 10rem; color: rgba(243,240,232,.56); font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; }

.next-project { max-width: none; background: var(--case-paper); text-align: center; }
.next-project p, .next-project span { font: 500 .68rem/1 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
.next-project h2 { margin: 3rem auto; max-width: 70rem; }
.next-project h2 em { color: var(--blue); }
footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 8rem; padding: 2rem var(--pad); border-top: 1px solid var(--line); font: 500 .68rem/1 "DM Mono", monospace; text-transform: uppercase; }
footer p { justify-self: center; }
footer > a { justify-self: end; }

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

@media (max-width: 900px) {
  .topbar { grid-template-columns: 1fr auto; }
  .topbar > p { display: none; }
  .hero-kicker { flex-wrap: wrap; gap: .75rem 1.5rem; }
  .case-hero { min-height: 46rem; }
  .project-stage { min-height: 47rem; }
  .stage-ui > p { margin-top: 8rem; }
  .meta-grid { grid-template-columns: 1fr 1fr; }
  .narrative, .challenge-title, .art-direction, .mobile-story, .outcome-grid { grid-template-columns: 1fr; gap: 3rem; }
  .principles { grid-template-columns: 1fr; }
  .principles article, .principles article + article { min-height: 0; padding: 2rem 0; border-right: 0; border-bottom: 1px solid var(--dark-line); }
  .principles h3 { margin-top: 2rem; }
  .palette { min-height: 22rem; }
  .case-gallery { grid-template-columns: 1fr 1fr; }
  .gallery-wide { grid-column: span 1; }
  .outcome-stats { grid-template-columns: 1fr 1fr; }
  footer { grid-template-columns: 1fr 1fr; }
  footer p { display: none; }
}

@media (max-width: 600px) {
  .topbar { height: 4.7rem; }
  .studio-mark strong { display: none; }
  .case-hero { min-height: 43rem; padding-top: 3rem; }
  .case-hero h1 { font-size: clamp(6.2rem, 37vw, 9rem); line-height: .75; }
  .hero-summary { align-items: flex-start; flex-direction: column; }
  .project-stage { min-height: 43rem; }
  .stage-shade { background: linear-gradient(90deg, rgba(10,10,8,.86), rgba(10,10,8,.2)), linear-gradient(0deg, rgba(10,10,8,.76), transparent 58%); }
  .stage-ui { top: 6%; right: var(--pad); }
  .stage-ui > p { margin-top: 10rem; }
  .stage-ui h2 { font-size: 4rem; }
  .stage-rating { display: none; }
  .meta-grid { grid-template-columns: 1fr; }
  .meta-grid > div { min-height: 7rem; }
  .narrative { grid-template-columns: 1fr; }
  .narrative h2, .challenge h2, .art-copy h2, .gallery-head h2, .mobile-copy h2, .outcome h2, .next-project h2 { font-size: clamp(3.1rem, 15vw, 4.7rem); }
  .palette { grid-template-columns: 1fr; min-height: 36rem; }
  .case-gallery { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .case-gallery figure, .gallery-tall, .gallery-wide { grid-row: auto; grid-column: auto; aspect-ratio: 4 / 5; }
  .gallery-head { align-items: flex-start; flex-direction: column; }
  .phone-wrap { padding: 2rem .8rem; }
  .outcome-stats { grid-template-columns: 1fr 1fr; }
  .outcome-stats div { min-height: 10rem; }
  .outcome-stats strong { font-size: 3.5rem; }
}