:root {
  --ink: #12251e;
  --paper: #f7f2e8;
  --paper-2: #e9dfd0;
  --clay: #d66c43;
  --clay-dark: #a84e31;
  --oak: #cc9865;
  --line: rgba(18, 37, 30, .16);
  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --mono: "DM Mono", monospace;
  --content: 1180px;
  --edge: max(clamp(24px, 4vw, 64px), calc((100vw - var(--content)) / 2));
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: var(--sans); }
button, input { font: inherit; }
a { color: inherit; }
em { color: var(--clay); }
.detail-shell { width: 100%; max-width: calc(var(--content) + 2 * var(--edge)); margin-inline: auto; padding-inline: var(--edge); }

.skip-link { position: fixed; z-index: 90; top: 12px; left: 12px; padding: 13px 16px; background: var(--ink); color: var(--paper); font: 500 10px/1 var(--mono); letter-spacing: .1em; text-decoration: none; text-transform: uppercase; transform: translateY(-160%); transition: transform 220ms var(--ease-out); }
.skip-link:focus { transform: translateY(0); }
#main-content:focus { outline: none; }
.scroll-progress { position: fixed; z-index: 80; inset: 0 0 auto; height: 3px; pointer-events: none; }
.scroll-progress span { display: block; width: 100%; height: 100%; background: var(--clay); transform: scaleX(0); transform-origin: left; }

.detail-header { position: fixed; z-index: 70; top: 0; right: var(--edge); left: var(--edge); min-height: 72px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(255, 255, 255, .54); border-top: 0; border-radius: 0 0 18px 18px; background: linear-gradient(135deg, rgba(255, 252, 245, .77), rgba(231, 223, 208, .52)); box-shadow: 0 14px 40px rgba(23, 35, 29, .08), inset 0 1px rgba(255, 255, 255, .84); backdrop-filter: blur(26px) saturate(1.25); transition: transform 350ms var(--ease-out), border-radius 280ms ease, background 280ms ease; }
.detail-header.is-scrolled { border-radius: 18px; background: linear-gradient(135deg, rgba(255, 252, 245, .92), rgba(231, 223, 208, .76)); transform: translateY(12px); }
.brand { color: var(--ink); font: 700 32px/1 var(--serif); letter-spacing: -.09em; text-decoration: none; }
.brand span { color: var(--clay); }
.detail-header nav { padding: 4px; display: flex; border: 1px solid rgba(255, 255, 255, .58); border-radius: 999px; background: rgba(255, 255, 255, .3); box-shadow: inset 0 1px rgba(255, 255, 255, .9); }
.detail-header nav a { min-height: 38px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 999px; color: #46514b; font: 500 9px/1 var(--mono); letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.detail-header nav .header-cta { margin-left: 4px; background: var(--ink); color: var(--paper); }
.header-cta b { margin-left: 14px; color: #efab87; font-size: 14px; }

.eyebrow { margin: 0; color: var(--clay-dark); font: 500 9px/1.5 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.detail-hero { padding: clamp(145px, 16vw, 205px) 0 clamp(90px, 10vw, 145px); }
.back-link { width: fit-content; display: inline-flex; margin-bottom: clamp(45px, 7vw, 84px); color: #667069; font: 500 9px/1 var(--mono); letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.detail-hero-heading { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .48fr); gap: clamp(50px, 9vw, 140px); align-items: end; }
.detail-hero-heading h1 { max-width: 960px; margin: 22px 0 0; font: 600 clamp(5.4rem, 11vw, 12.5rem)/.8 var(--serif); letter-spacing: -.075em; }
.detail-hero-intro { padding-bottom: 8px; }
.detail-hero-intro p { margin: 0; color: #56615b; font-size: 16px; line-height: 1.7; }
.detail-hero-intro span { width: fit-content; margin-top: 24px; padding: 9px 12px; display: inline-block; border: 1px solid var(--line); border-radius: 999px; color: #667069; font: 500 8px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; }

.detail-hero-media { position: relative; min-height: 580px; height: min(68vw, 780px); margin-top: clamp(60px, 8vw, 110px); overflow: hidden; background: #233029; box-shadow: 0 30px 80px rgba(23, 35, 29, .18); }
.detail-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(9, 17, 13, .62), transparent 42%); pointer-events: none; }
.hero-media-index, .hero-media-caption { position: absolute; bottom: 22px; color: #fff; font: 500 8px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.hero-media-index { left: 22px; color: #efab87; }
.hero-media-caption { right: 22px; }

.project-meta { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.project-meta div { min-width: 0; padding: 23px 22px 23px 0; border-right: 1px solid var(--line); }
.project-meta div + div { padding-left: 22px; }
.project-meta div:last-child { border-right: 0; }
.project-meta dt { color: #6a736d; font: 500 7px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.project-meta dd { margin: 9px 0 0; font-size: 13px; font-weight: 600; line-height: 1.4; }

.transformation-section { padding: clamp(95px, 11vw, 160px) 0; border-top: 1px solid var(--line); background: #fbfaf6; }
.section-heading { margin-bottom: clamp(46px, 7vw, 86px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .48fr); gap: 18px clamp(50px, 9vw, 140px); align-items: end; }
.section-heading .eyebrow { grid-column: 1 / -1; }
.section-heading h2 { margin: 0; font: 600 clamp(4rem, 7.2vw, 8.2rem)/.88 var(--serif); letter-spacing: -.066em; }
.section-heading > p:last-child { max-width: 430px; margin: 0 0 7px; color: #59645e; font-size: 14px; line-height: 1.7; }

.project-comparison { --comparison-position: 50%; position: relative; min-height: 540px; height: min(57vw, 720px); overflow: hidden; background: #202a24; box-shadow: 0 30px 80px rgba(23, 35, 29, .15); }
.comparison-after, .comparison-before, .comparison-before img { position: absolute; inset: 0; width: 100%; height: 100%; }
.comparison-after, .comparison-before img { object-fit: cover; }
.comparison-before { z-index: 2; clip-path: inset(0 calc(100% - var(--comparison-position)) 0 0); }
.comparison-placeholder { position: absolute; z-index: 2; inset: 0 auto 0 0; width: 50%; padding: 32px; display: none; align-content: end; gap: 10px; background-color: #e5dfd3; background-image: linear-gradient(rgba(23, 35, 29, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 35, 29, .055) 1px, transparent 1px); background-size: 34px 34px; color: var(--ink); }
.comparison-placeholder:not([hidden]) { display: grid; }
.comparison-placeholder span { color: #6b746e; font: 500 8px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.comparison-placeholder strong { max-width: 320px; font: 600 clamp(3rem, 5vw, 5.4rem)/.9 var(--serif); letter-spacing: -.055em; }
.comparison-label { position: absolute; z-index: 4; top: 20px; padding: 9px 11px; border: 1px solid rgba(255, 255, 255, .34); border-radius: 999px; background: rgba(17, 27, 22, .62); color: #fff; font: 500 7px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; backdrop-filter: blur(10px); }
.comparison-label-before { left: 20px; }
.comparison-label-after { right: 20px; }
.comparison-handle { position: absolute; z-index: 5; top: 0; bottom: 0; left: var(--comparison-position); width: 2px; background: rgba(255, 255, 255, .9); color: transparent; transform: translateX(-1px); pointer-events: none; }
.comparison-handle::after { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .72); border-radius: 50%; background: var(--ink); color: #fff; font: normal 18px/1 var(--sans); content: "↔"; transform: translate(-50%, -50%); box-shadow: 0 12px 28px rgba(0, 0, 0, .22); }
.comparison-range { position: absolute; z-index: 6; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.project-comparison:has(.comparison-range:focus-visible) { outline: 3px solid var(--clay); outline-offset: 5px; }
.project-comparison.has-placeholder .comparison-handle, .project-comparison.has-placeholder .comparison-range { display: none; }
.comparison-note { margin: 16px 0 0; color: #667069; font: 500 8px/1.5 var(--mono); letter-spacing: .09em; text-align: center; text-transform: uppercase; }
.comparison-note span { margin-left: 8px; color: var(--clay); font-size: 15px; }

.project-story-section { padding: clamp(100px, 12vw, 175px) 0; background: var(--ink); color: var(--paper); }
.story-heading .eyebrow { color: #efab87; }
.story-heading > p:last-child { color: #bdc6c0; }
.project-story { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(330px, .68fr); gap: clamp(55px, 9vw, 130px); align-items: start; }
.project-story-stage { position: sticky; top: 112px; min-width: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; background: #0f1713; box-shadow: 0 30px 70px rgba(0, 0, 0, .22); }
.stage-bar { height: 39px; padding: 0 14px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid rgba(255, 255, 255, .11); }
.stage-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.stage-bar span { margin-left: auto; color: rgba(255, 255, 255, .45); font: 500 7px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.stage-frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.stage-frame img { --story-position: 46%; width: 100%; height: 100%; object-fit: cover; object-position: center var(--story-position); transform: scale(1.025); transition: object-position 800ms var(--ease-out), transform 800ms var(--ease-out); }
.stage-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 13, 10, .58), transparent 44%); }
.stage-frame b { position: absolute; right: 18px; bottom: 17px; color: #efab87; font: 500 9px/1 var(--mono); letter-spacing: .11em; }
.project-story-steps { display: grid; }
.project-story-step { min-height: 54svh; padding: clamp(36px, 5vw, 64px) 0; display: flex; flex-direction: column; justify-content: center; border-top: 1px solid rgba(255, 255, 255, .14); opacity: .38; transition: opacity 400ms ease, transform 600ms var(--ease-out); }
.project-story-step:last-child { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.project-story-step.is-active { opacity: 1; transform: translateX(-10px); }
.project-story-step > span { color: #efab87; font: 500 8px/1.4 var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.project-story-step h3 { margin: 23px 0 17px; font: 600 clamp(2.8rem, 4.4vw, 5.2rem)/.9 var(--serif); letter-spacing: -.055em; }
.project-story-step p { max-width: 500px; margin: 0; color: #bdc6c0; font-size: 14px; line-height: 1.7; }

.project-breakdown { padding: clamp(100px, 12vw, 175px) 0; background: var(--paper); }
.breakdown-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.breakdown-grid article { min-width: 0; padding: 34px clamp(22px, 3vw, 42px) 72px 0; border-right: 1px solid var(--line); }
.breakdown-grid article + article { padding-left: clamp(22px, 3vw, 42px); }
.breakdown-grid article:last-child { border-right: 0; }
.breakdown-grid article > span { color: var(--clay-dark); font: 500 9px/1 var(--mono); }
.breakdown-grid h2 { margin: 30px 0 14px; font: 600 clamp(2.2rem, 3.4vw, 4rem)/.92 var(--serif); letter-spacing: -.05em; }
.breakdown-grid p { margin: 0; color: #5d6761; font-size: 13px; line-height: 1.68; }
.project-status { margin: clamp(75px, 10vw, 130px) 0; padding: clamp(42px, 6vw, 80px); border: 1px solid rgba(23, 35, 29, .1); background: #fff; box-shadow: 0 25px 70px rgba(23, 35, 29, .07); }
.project-status h2 { margin: 20px 0 24px; font: 600 clamp(3.6rem, 6.5vw, 7.4rem)/.88 var(--serif); letter-spacing: -.065em; }
.project-status > p:last-child { max-width: 650px; margin: 0; color: #5e6862; font-size: 14px; line-height: 1.7; }
.next-project { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.next-project a { min-width: 0; padding: 30px 28px 32px 0; display: grid; grid-template-columns: 1fr auto; gap: 9px 25px; color: var(--ink); text-decoration: none; }
.next-project a + a { padding-right: 0; padding-left: 28px; border-left: 1px solid var(--line); text-align: right; }
.next-project small { grid-column: 1 / -1; color: #68716c; font: 500 7px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.next-project strong { font: 600 clamp(1.7rem, 2.8vw, 3.2rem)/.95 var(--serif); letter-spacing: -.045em; }
.next-project span { align-self: end; color: var(--clay); font-size: 25px; }

.detail-cta { padding: clamp(100px, 12vw, 165px) 0; background: var(--ink); color: var(--paper); }
.detail-cta .eyebrow { color: #efab87; }
.detail-cta h2 { max-width: 1000px; margin: 22px 0 35px; font: 600 clamp(4rem, 7.4vw, 8.3rem)/.88 var(--serif); letter-spacing: -.066em; }
.detail-cta a { width: fit-content; min-height: 50px; padding: 0 18px; display: inline-flex; align-items: center; gap: 34px; background: var(--paper); color: var(--ink); font: 500 9px/1 var(--mono); letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.detail-cta a span { color: var(--clay); font-size: 16px; }

footer { padding: 27px var(--edge); display: flex; align-items: center; justify-content: space-between; gap: 30px; background: #101814; color: var(--paper); font: 500 8px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.footer-brand { color: var(--paper); }
footer a:last-child { color: var(--paper); text-decoration: none; }

.motion-ready .detail-hero-heading,
.motion-ready .detail-hero-media,
.motion-ready .project-meta,
.motion-ready .section-heading,
.motion-ready .breakdown-grid article,
.motion-ready .project-status,
.motion-ready .next-project { opacity: 0; transform: translateY(26px); transition: opacity 700ms var(--ease-out) var(--reveal-delay, 0ms), transform 700ms var(--ease-out) var(--reveal-delay, 0ms); }
.motion-ready .is-visible { opacity: 1; transform: translateY(0); }

:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; box-shadow: 0 0 0 6px var(--ink); }

@media (hover: hover) and (pointer: fine) {
  .detail-header nav a:not(.header-cta):hover, .back-link:hover { color: var(--clay-dark); }
  .detail-cta a:hover { transform: translateY(-3px); }
  .next-project a:hover strong { color: var(--clay-dark); }
}

@media (max-width: 900px) {
  .detail-header, .detail-header.is-scrolled { top: 0; right: 12px; left: 12px; min-height: 72px; padding-inline: 12px; border-radius: 0 0 17px 17px; transform: none; }
  .detail-header nav a { padding-inline: 11px; }
  .detail-header nav .header-cta { display: none; }
  .detail-hero-heading, .section-heading { grid-template-columns: 1fr; gap: 28px; }
  .section-heading .eyebrow { grid-column: auto; }
  .detail-hero-intro, .section-heading > p:last-child { max-width: 600px; }
  .detail-hero-media { min-height: 520px; height: 72vw; }
  .project-meta { grid-template-columns: 1fr 1fr; }
  .project-meta div:nth-child(2) { border-right: 0; }
  .project-meta div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .project-story { grid-template-columns: 1fr; gap: 35px; }
  .project-story-stage { position: sticky; top: 84px; z-index: 4; }
  .project-story-step { min-height: 42svh; padding-inline: 10px; }
  .breakdown-grid { grid-template-columns: 1fr; }
  .breakdown-grid article, .breakdown-grid article + article { padding: 30px 0 42px; border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 600px) {
  .detail-header nav { border: 0; background: transparent; box-shadow: none; }
  .detail-hero { padding-top: 125px; }
  .back-link { margin-bottom: 44px; }
  .detail-hero-heading h1 { font-size: clamp(4.8rem, 22vw, 7rem); }
  .detail-hero-media { min-height: 500px; height: 120vw; }
  .hero-media-caption { display: none; }
  .project-meta { grid-template-columns: 1fr; }
  .project-meta div, .project-meta div + div { padding: 18px 0; border-right: 0; border-top: 1px solid var(--line); }
  .project-comparison { min-height: 560px; height: 130vw; }
  .comparison-placeholder { width: 50%; padding: 19px; }
  .comparison-placeholder strong { font-size: 2.5rem; }
  .section-heading h2 { font-size: clamp(3.7rem, 16vw, 5.4rem); }
  .project-story-stage { top: 80px; }
  .stage-frame { aspect-ratio: 4 / 3; }
  .stage-bar span { max-width: 55%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .project-story-step { min-height: 46svh; }
  .project-status { padding-inline: 25px; }
  .project-status h2 { font-size: clamp(3.3rem, 15vw, 5rem); }
  .next-project { grid-template-columns: 1fr; }
  .next-project a, .next-project a + a { padding: 25px 0; border-left: 0; text-align: left; }
  .next-project a + a { border-top: 1px solid var(--line); }
  .detail-cta h2 { font-size: clamp(3.8rem, 16vw, 5.6rem); }
  footer { padding-bottom: 90px; align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}