:root {
  --navy: #172733;
  --navy-soft: #233945;
  --blush: #f3cdd7;
  --ivory: #f6f2ec;
  --paper: #fffdf9;
  --ink: #172733;
  --muted: #657078;
  --line: rgba(23, 39, 51, .18);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 17px; line-height: 1.65; }
img { display: block; width: 100%; }
a { color: inherit; }
.site-header { position: absolute; z-index: 20; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 26px clamp(24px, 5vw, 76px); color: white; border-bottom: 1px solid rgba(255,255,255,.3); }
.wordmark { display: block; width: clamp(190px, 19vw, 270px); padding: 9px 13px; background: rgba(255,253,249,.96); text-decoration: none; }
.wordmark img { width: 100%; height: auto; }
nav { display: flex; align-items: center; gap: 30px; }
nav a { font-size: 14px; font-weight: 700; text-decoration: none; letter-spacing: .08em; text-transform: uppercase; }
.nav-cta { border: 1px solid rgba(255,255,255,.7); padding: 10px 18px; }

.hero { position: relative; min-height: min(900px, 100svh); overflow: hidden; color: white; background: var(--navy); }
.hero-image, .hero-wash { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.hero-wash { background: linear-gradient(90deg, rgba(9,20,27,.78) 0%, rgba(9,20,27,.42) 48%, rgba(9,20,27,.05) 78%), linear-gradient(0deg, rgba(9,20,27,.55), transparent 42%); }
.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: min(900px, 100svh); width: min(760px, 90%); padding: 190px clamp(24px, 6vw, 90px) clamp(54px, 8vw, 110px); }
.hero h1, h2, .case-copy h3 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: .98; letter-spacing: -.035em; }
.hero h1 { font-size: clamp(48px, 7vw, 102px); }
.hero-copy > p:not(.eyebrow) { max-width: 650px; margin: 28px 0 0; font-size: clamp(18px, 2vw, 24px); line-height: 1.5; }
.eyebrow, .section-label { margin: 0 0 20px; font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow.light { color: var(--blush); }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; padding: 14px 23px; border: 1px solid transparent; text-decoration: none; text-transform: uppercase; letter-spacing: .1em; font-size: 13px; font-weight: 800; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-blush { color: var(--navy); background: var(--blush); }
.button-ghost { color: white; border-color: rgba(255,255,255,.72); background: rgba(255,255,255,.04); }

.section-pad { padding: clamp(82px, 10vw, 150px) clamp(24px, 7vw, 110px); }
.intro { background: var(--blush); }
.section-label { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.intro-grid { display: grid; grid-template-columns: minmax(300px, .85fr) minmax(360px, 1.15fr); gap: clamp(48px, 8vw, 130px); margin-top: 56px; }
.intro h2, .development h2, .transform-intro h2, .next-copy h2, .closing h2 { font-size: clamp(48px, 6.5vw, 92px); }
.prose { max-width: 720px; }
.prose p, .project-intro p, .transform-intro > p:last-child, .case-copy p, .closing > p:not(.eyebrow) { margin: 0 0 22px; }
.lead { font-size: clamp(20px, 2vw, 27px); line-height: 1.45; }
.approach-card { display: grid; grid-template-columns: .7fr 1fr 1.4fr; gap: 34px; margin-top: clamp(72px, 9vw, 130px); padding: 38px 0 0; border-top: 1px solid var(--line); }
.approach-card h3 { margin: 0; font: 400 clamp(27px, 3vw, 40px)/1.15 var(--serif); }
.approach-card p:last-child { margin: 0; }

.development { color: white; background: var(--navy); }
.project-heading { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px, 10vw, 160px); margin-bottom: 62px; }
.status { display: inline-block; margin-top: 22px; padding: 7px 12px; border: 1px solid rgba(239,194,206,.55); color: var(--blush); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.project-intro { align-self: end; max-width: 650px; }
.text-link { display: inline-flex; gap: 8px; align-items: center; margin-top: 8px; padding-bottom: 4px; border-bottom: 1px solid currentColor; font-weight: 800; font-size: 13px; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.text-link.light { color: var(--blush); }

.carousel { width: 100%; min-width: 0; max-width: 1440px; margin: 0 auto; }
.carousel-stage { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #0e1c25; }
.carousel-stage > img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.carousel-stage > img[hidden] { display: none; }
.carousel-chrome { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 54px 1fr 54px; align-items: center; color: white; background: linear-gradient(0deg, rgba(7,17,23,.86), rgba(7,17,23,.18)); padding: 36px 18px 16px; }
.carousel-caption { margin: 0; text-align: center; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.carousel-button { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; color: white; background: rgba(18,31,40,.35); cursor: pointer; font-size: 18px; }
.carousel-button:hover, .carousel-button:focus-visible { color: var(--navy); background: var(--blush); outline: none; }
.carousel-dots { display: flex; justify-content: center; gap: 9px; padding: 18px 0 0; }
.carousel-dots button { width: 9px; height: 9px; padding: 0; border: 1px solid currentColor; border-radius: 50%; color: inherit; background: transparent; cursor: pointer; }
.carousel-dots button.active { background: currentColor; }

.next-project { position: relative; min-height: 760px; display: flex; align-items: flex-end; color: white; overflow: hidden; }
.next-project > img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.next-project::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,22,29,.82), rgba(11,22,29,.05) 72%); }
.next-copy { position: relative; z-index: 2; width: min(780px, 100%); padding: clamp(48px, 7vw, 105px); }
.next-copy p:not(.eyebrow) { max-width: 600px; font-size: 21px; }

.transformations { --section-gutter: clamp(24px, 7vw, 110px); padding-bottom: 0; background: var(--blush); }
.transform-intro { max-width: 900px; margin-bottom: clamp(54px, 7vw, 92px); }
.transform-intro > p:last-child { max-width: 720px; margin-top: 30px; font-size: 20px; }
.case-study { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); gap: clamp(38px, 5vw, 74px); align-items: center; margin: 0 0 clamp(52px, 7vw, 92px); padding: clamp(38px, 5vw, 72px); background: transparent; }
.case-study.reverse .case-copy { order: 2; }
.case-study.reverse .carousel { order: 1; }
.case-study.reverse { position: relative; isolation: isolate; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); color: white; background: var(--navy); }
.case-study.reverse::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(0px - var(--section-gutter)); right: calc(0px - var(--section-gutter)); background: var(--navy); }
.case-study.reverse .video-card { order: 3; grid-column: 1 / -1; }
.case-study.reverse .case-number,
.case-study.reverse .text-link { color: var(--blush); }
.case-study.reverse .gallery-note { border-color: rgba(255,255,255,.32); }
.case-study.reverse .video-card { border-top: 1px solid rgba(243,205,215,.42); }
.case-study.reverse { margin-bottom: 0; }
.case-copy { max-width: 470px; padding: 0; }
.case-number { color: var(--navy); font-weight: 800; font-size: 13px; letter-spacing: .16em; }
.case-copy h3 { margin-bottom: 30px; font-size: clamp(42px, 5vw, 72px); }
.gallery-note { padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.55; }
.compact .carousel-stage { aspect-ratio: 3 / 2; }
.video-card { grid-column: 1 / -1; display: grid; grid-template-columns: 280px 1fr; margin-top: 4px; color: white; background: var(--navy); }
.video-heading { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 34px; }
.video-heading span { color: var(--blush); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.video-heading strong { font: 400 34px/1.1 var(--serif); }
.video-poster { position: relative; display: block; padding: 0; border: 0; aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer; background: #0c1820; text-decoration: none; }
.video-poster img { height: 100%; object-fit: cover; transition: transform .35s ease, opacity .35s ease; }
.video-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,22,29,.58), rgba(10,22,29,.04) 62%); }
.video-poster:hover img { transform: scale(1.015); opacity: .92; }
.play { position: absolute; z-index: 2; left: 28px; bottom: 24px; display: inline-flex; align-items: center; gap: 12px; color: white; font: 800 13px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.play > span { display: grid; place-items: center; width: 52px; height: 52px; padding-left: 3px; border-radius: 50%; color: var(--navy); background: var(--blush); }

.closing { position: relative; min-height: 760px; display: grid; place-items: center; overflow: hidden; text-align: center; color: white; background: var(--navy-soft); }
.closing-image, .closing-wash { position: absolute; inset: 0; width: 100%; height: 100%; }
.closing-image { object-fit: cover; }
.closing-wash { background: linear-gradient(0deg, rgba(9,22,29,.58), rgba(9,22,29,.18)); }
.closing-content { position: relative; z-index: 2; width: min(960px, 100%); }
.closing-content { text-shadow: 0 2px 18px rgba(5,14,20,.72); }
.closing h2 { max-width: 940px; margin: 0 auto; font-size: clamp(46px, 6vw, 84px); line-height: 1.03; }
.closing-content > p:not(.eyebrow) { max-width: 760px; margin: 30px auto 0; font-size: 20px; }
.actions.centered { justify-content: center; }
.email { display: inline-block; margin-top: 38px; color: var(--blush); font-size: clamp(18px, 2vw, 25px); text-decoration: none; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 26px clamp(24px, 7vw, 110px); color: var(--navy); background: var(--blush); font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 820px) {
  body { font-size: 16px; }
  .site-header { padding: 20px 22px; }
  nav a:not(.nav-cta) { display: none; }
  .hero { min-height: 820px; }
  .wordmark { width: 190px; }
  .hero-copy { min-height: 820px; padding: 210px 22px 58px; }
  .hero h1 { font-size: clamp(47px, 13vw, 68px); }
  .intro-grid, .approach-card, .project-heading, .case-study, .video-card { grid-template-columns: 1fr; }
  .intro-grid { gap: 36px; margin-top: 38px; }
  .approach-card { gap: 12px; }
  .project-heading { gap: 34px; }
  .case-study { padding: 30px 20px; }
  .case-study.reverse { grid-template-columns: 1fr; }
  .case-study.reverse .case-copy, .case-study.reverse .carousel { order: initial; }
  .case-study.reverse .video-card, .video-card { grid-column: auto; }
  .video-heading { min-height: 150px; }
  .carousel-stage, .compact .carousel-stage { aspect-ratio: 4 / 3; }
  .next-project { min-height: 650px; }
  footer { flex-direction: column; }
}

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