:root {
  --paper: #e9e6dc;
  --paper-light: #f4f1e9;
  --ink: #202923;
  --muted: #596159;
  --forest: #26362e;
  --deep: #172522;
  --accent: #b67554;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; overflow-x: hidden; }
img, video { display: block; width: 100%; }
img { height: auto; }
a { color: inherit; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
figure, h1, h2, h3, p { margin: 0; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: -5rem;
  left: 1rem;
  padding: .8rem 1rem;
  background: #fff;
  color: #111;
}
.skip-link:focus { top: 1rem; }

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.3rem, 3vw, 3rem) clamp(1.25rem, 4.2vw, 5rem);
  color: #f8f5ef;
}
.brand {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: .42em;
  font-size: clamp(.95rem, 1.18vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.brand-slash { font-weight: 400; opacity: .7; }
.site-nav { display: flex; gap: clamp(1.25rem, 3vw, 3rem); }
.site-nav a {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-decoration: none;
  text-transform: uppercase;
}
.site-nav a:hover { text-decoration: underline; text-underline-offset: .35em; }

.hero {
  position: relative;
  display: flex;
  min-height: min(900px, 100vh);
  min-height: min(900px, 100svh);
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  color: #faf7ef;
  background: #303b32;
}
.hero-media, .hero-media img, .hero::after { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: center 52%; }
.hero::after {
  content: '';
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 18, 15, .44) 0%, transparent 28%, rgba(10, 18, 15, .12) 49%, rgba(10, 18, 15, .78) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 14rem clamp(1.25rem, 4.2vw, 5rem) clamp(5rem, 8vw, 8rem);
}
.eyebrow {
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.3;
  text-transform: uppercase;
}
.eyebrow--light { color: #e7ddcb; }
.hero h1 {
  margin-top: 1.1rem;
  font-size: clamp(4.75rem, 13.4vw, 13.25rem);
  font-weight: 500;
  letter-spacing: -.092em;
  line-height: .78;
}
.hero h1 span { display: block; margin-left: clamp(2.5rem, 12vw, 13rem); font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.085em; }
.hero-bottom {
  display: flex;
  max-width: 69rem;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-top: clamp(2rem, 5vw, 5rem);
}
.hero-bottom p { max-width: 27rem; font-size: clamp(1.15rem, 1.7vw, 1.55rem); line-height: 1.3; }
.hero-bottom a { flex: none; font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-decoration: none; text-transform: uppercase; }
.hero-bottom a span { margin-left: .8rem; font-size: 1.1rem; }
.hero-credit { position: absolute; z-index: 2; right: clamp(1.25rem, 4.2vw, 5rem); bottom: 1.5rem; font-size: .58rem; letter-spacing: .13em; opacity: .7; text-transform: uppercase; }

.section-pad { padding: clamp(5.5rem, 10vw, 10rem) clamp(1.25rem, 5vw, 6rem); }
.section-pad > * { width: 100%; max-width: 1500px; margin-left: auto; margin-right: auto; }
.section-head {
  display: flex;
  align-items: baseline;
  gap: clamp(2rem, 8vw, 9rem);
  margin-bottom: clamp(3.25rem, 8vw, 8rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(32, 41, 35, .28);
  color: #4d584e;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.section-head--inverse { border-color: rgba(244, 241, 233, .35); color: rgba(244, 241, 233, .72); }
.section-index { min-width: 4.5rem; }
h2 { font-weight: 400; letter-spacing: -.075em; line-height: .97; }
h2 em { font-family: var(--serif); font-weight: 400; }

.idea { background: var(--paper-light); }
.idea-copy { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(18rem, .55fr); align-items: end; gap: 4rem; }
.idea h2 { max-width: 13ch; font-size: clamp(3.7rem, 7.8vw, 9rem); }
.idea-copy p { max-width: 20rem; padding-bottom: .5rem; font-size: clamp(1.1rem, 1.4vw, 1.4rem); line-height: 1.5; }
.idea-words { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(5rem, 11vw, 12rem); padding-top: 1rem; border-top: 1px solid rgba(32, 41, 35, .28); color: var(--muted); font-family: var(--serif); font-size: clamp(.85rem, 1vw, 1rem); font-style: italic; }

.case { color: #f5f1e6; background: var(--forest); }
.case-intro { display: grid; grid-template-columns: 1.2fr .55fr; align-items: end; gap: 3rem; margin-bottom: clamp(3rem, 6vw, 6rem); }
.case h2 { font-size: clamp(4.5rem, 9.5vw, 10rem); }
.case-intro p { max-width: 23rem; padding-bottom: .45rem; color: #dedfd3; font-size: clamp(1rem, 1.35vw, 1.3rem); line-height: 1.55; }
.case-media { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .65fr); align-items: start; gap: clamp(1rem, 3vw, 3rem); }
.case-main-image img { aspect-ratio: 1.48; object-fit: cover; }
.case figcaption, .content figcaption, .screens figcaption { margin-top: .75rem; font-size: .63rem; font-weight: 700; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; }
.case-side { padding-top: clamp(2rem, 8vw, 9rem); }
.case-moving-image { position: relative; }
.case-moving-image img, .case-moving-image video { aspect-ratio: .8; object-fit: cover; }
.case-moving-image video { position: absolute; top: 0; left: 0; width: 100%; height: auto; }
.case-side p { max-width: 22rem; margin-top: clamp(2rem, 4vw, 4rem); color: #d8d8ce; font-size: clamp(1.05rem, 1.4vw, 1.4rem); line-height: 1.55; }
.case-outro { display: flex; justify-content: space-between; gap: 1rem; margin-top: clamp(5rem, 10vw, 10rem); padding-top: 1.2rem; border-top: 1px solid rgba(244, 241, 233, .35); font-family: var(--serif); font-size: clamp(1rem, 1.4vw, 1.4rem); font-style: italic; }

.sound { color: #f4efe3; background: var(--deep); }
.sound-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); align-items: start; gap: clamp(3rem, 8vw, 10rem); }
.sound h2 { font-size: clamp(4.5rem, 8vw, 9.5rem); }
.sound-copy > p { max-width: 29rem; margin-top: clamp(2.5rem, 5vw, 5rem); color: #d5dacf; font-size: clamp(1.15rem, 1.55vw, 1.5rem); line-height: 1.55; }
.conversation { align-self: end; padding: clamp(1.5rem, 3vw, 3rem); color: var(--ink); background: #eae6da; box-shadow: 1rem 1rem 0 rgba(255, 255, 255, .08); }
.conversation-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 4rem); padding-bottom: .85rem; border-bottom: 1px solid rgba(32, 41, 35, .35); font-size: .65rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.conversation-question { display: grid; grid-template-columns: 2.4rem 1fr; gap: .5rem; padding: 1.2rem 0; border-bottom: 1px solid rgba(32, 41, 35, .24); font-family: var(--serif); font-size: clamp(1.2rem, 1.55vw, 1.65rem); font-style: italic; line-height: 1.3; }
.conversation-question span { padding-top: .25rem; font-family: var(--sans); font-size: .6rem; font-style: normal; font-weight: 700; letter-spacing: .13em; }
.conversation-outcome { display: grid; grid-template-columns: 1fr auto 1.1fr; align-items: start; gap: 1rem; margin-top: clamp(2.5rem, 5vw, 5rem); font-size: .62rem; font-weight: 700; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; }
.conversation-outcome > span:nth-child(2) { font-size: 2.2rem; font-weight: 400; line-height: .7; }
.conversation-outcome strong { font-size: clamp(.9rem, 1.2vw, 1.2rem); letter-spacing: -.01em; line-height: 1.35; text-transform: none; }

.content { background: var(--paper-light); }
.content-intro { display: grid; grid-template-columns: 1.3fr .55fr; align-items: end; gap: 3rem; }
.content h2 { font-size: clamp(4rem, 8.5vw, 9rem); }
.content-intro p { max-width: 24rem; font-size: clamp(1.05rem, 1.35vw, 1.35rem); line-height: 1.55; }
.content-gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; gap: clamp(1rem, 2.5vw, 2.5rem); margin-top: clamp(4rem, 8vw, 8rem); }
.content-image img { object-fit: cover; }
.content-image--large { grid-column: 1 / span 8; grid-row: 1; }
.content-image--large img { aspect-ratio: 1.6; }
.content-image--portrait { grid-column: 10 / span 3; grid-row: 1 / span 2; margin-top: 16%; }
.content-image--portrait img { aspect-ratio: .7; }
.content-image--detail { grid-column: 4 / span 4; grid-row: 2; margin-top: 5%; }
.content-image--detail img { aspect-ratio: 1.25; }
.content figcaption { color: var(--muted); }

.routes { background: #d9d9cf; }
.routes-top { display: grid; grid-template-columns: 1.2fr .55fr; align-items: end; gap: 3rem; }
.routes h2 { font-size: clamp(3.6rem, 7.2vw, 8rem); }
.routes-top > p { max-width: 19rem; padding-bottom: .5rem; font-family: var(--serif); font-size: clamp(1.15rem, 1.6vw, 1.7rem); font-style: italic; line-height: 1.35; }
.routes-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(4rem, 9vw, 9rem); border-top: 1px solid rgba(32, 41, 35, .4); border-bottom: 1px solid rgba(32, 41, 35, .4); }
.routes-grid article { min-height: 21rem; padding: clamp(2rem, 4vw, 4rem) clamp(1rem, 4vw, 4rem) clamp(2.5rem, 5vw, 5rem) 0; }
.routes-grid article + article { padding-left: clamp(1rem, 4vw, 4rem); border-left: 1px solid rgba(32, 41, 35, .4); }
.route-number { display: block; margin-bottom: clamp(3rem, 5vw, 6rem); font-size: .67rem; font-weight: 700; letter-spacing: .13em; }
.routes h3 { font-family: var(--serif); font-size: clamp(2.25rem, 3.6vw, 4rem); font-weight: 400; font-style: italic; letter-spacing: -.055em; }
.routes-grid p { max-width: 28rem; margin-top: 1.5rem; color: #39443b; font-size: clamp(1rem, 1.22vw, 1.25rem); line-height: 1.55; }

.screens { background: #e9e6dc; }
.screens-copy { display: grid; grid-template-columns: 1.15fr .55fr; align-items: end; gap: 3rem; }
.screens h2 { font-size: clamp(3.8rem, 7.7vw, 8.5rem); }
.screens-copy p { max-width: 24rem; font-size: clamp(1.05rem, 1.35vw, 1.35rem); line-height: 1.55; }
.screens-composition { position: relative; min-height: clamp(35rem, 60vw, 58rem); margin-top: clamp(4rem, 8vw, 8rem); }
.screen-wide { position: absolute; top: 0; left: 0; width: 77%; }
.screen-wide img { aspect-ratio: 1.65; object-fit: cover; }
.screen-tall { position: absolute; top: 12%; right: 0; width: 28%; padding: .7rem; background: var(--paper-light); box-shadow: 0 1.5rem 4rem rgba(32, 41, 35, .16); }
.screen-tall img { aspect-ratio: .66; object-fit: cover; }
.screens figcaption { color: var(--muted); }
.screen-tall figcaption { padding-left: .3rem; }

.technical { background: var(--paper-light); }
.technical-grid { display: grid; grid-template-columns: 1fr .65fr; gap: 4rem; }
.technical h2 { font-size: clamp(4.4rem, 8vw, 9rem); }
.technical-grid > div { align-self: end; max-width: 29rem; }
.technical-grid p { font-size: clamp(1.1rem, 1.45vw, 1.5rem); line-height: 1.55; }
.technical-grid p + p { margin-top: 1.8rem; color: var(--muted); }

.after { color: #f4efe3; background: #6a5140; }
.after-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .65fr); align-items: center; gap: clamp(3rem, 8vw, 9rem); }
.after h2 { font-size: clamp(4.4rem, 8vw, 9rem); }
.after-copy p { max-width: 28rem; margin-top: clamp(2rem, 4vw, 4rem); font-size: clamp(1.1rem, 1.45vw, 1.5rem); line-height: 1.55; }
.after figure { margin-top: clamp(2rem, 5vw, 5rem); }
.after img { aspect-ratio: .86; object-fit: cover; }

.contact { position: relative; display: flex; min-height: min(850px, 90svh); align-items: end; overflow: hidden; color: #f8f4eb; background: #28362e; }
.contact > img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: center 45%; }
.contact::after { position: absolute; inset: 0; content: ''; background: linear-gradient(90deg, rgba(13, 23, 18, .8), rgba(13, 23, 18, .08)), linear-gradient(0deg, rgba(13, 23, 18, .7), transparent 55%); }
.contact-content { position: relative; z-index: 1; width: 100%; padding: clamp(5rem, 10vw, 10rem) clamp(1.25rem, 5vw, 6rem) clamp(4rem, 7vw, 7rem); }
.contact .section-head { max-width: 1500px; margin: 0 auto clamp(5rem, 9vw, 9rem); }
.contact h2 { max-width: 16ch; margin: 0 auto; font-size: clamp(4rem, 8vw, 9rem); }
.contact-content > p { max-width: 1500px; margin: 2rem auto 0; font-size: clamp(1.15rem, 1.55vw, 1.55rem); }
.contact-note { display: block; max-width: 1500px; margin: clamp(3rem, 6vw, 6rem) auto 0; padding-top: .8rem; border-top: 1px solid rgba(244, 241, 233, .5); font-size: .67rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2.5rem clamp(1.25rem, 5vw, 6rem); background: var(--deep); color: #f4efe3; }
.site-footer > span { font-size: .63rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 900px) {
  .idea-copy, .case-intro, .content-intro, .routes-top, .screens-copy, .technical-grid { grid-template-columns: 1fr; gap: 2rem; }
  .idea-copy p, .case-intro p, .content-intro p, .routes-top > p, .screens-copy p, .technical-grid > div { max-width: 36rem; }
  .sound-grid { grid-template-columns: 1fr; }
  .sound-copy > p { max-width: 40rem; }
  .conversation { width: min(100%, 44rem); margin-left: auto; }
  .screens-composition { min-height: clamp(33rem, 80vw, 46rem); }
}

@media (max-width: 700px) {
  .site-header { align-items: flex-start; }
  .site-nav { gap: 1rem; }
  .site-nav a { font-size: .61rem; }
  .site-nav a:nth-child(2) { display: none; }
  .hero { min-height: 88svh; }
  .hero-media img { object-position: center 44%; }
  .hero-content { padding-top: 11rem; padding-bottom: 5.5rem; }
  .hero h1 { font-size: clamp(4.1rem, 16vw, 7rem); }
  .hero h1 span { margin-left: 1.3rem; }
  .hero-bottom { align-items: start; flex-direction: column; gap: 2rem; margin-top: 3rem; }
  .hero-credit { left: 1.25rem; right: auto; bottom: 1.2rem; font-size: .5rem; }
  .section-pad { padding-top: 5.5rem; padding-bottom: 6rem; }
  .section-head { gap: 2rem; margin-bottom: 3.5rem; }
  .idea h2, .case h2, .sound h2, .content h2, .routes h2, .screens h2, .technical h2, .after h2 { font-size: clamp(3.6rem, 13vw, 6rem); }
  .idea-words { justify-content: start; gap: .8rem 1.5rem; margin-top: 5rem; }
  .case-media { grid-template-columns: 1fr; }
  .case-side { display: grid; grid-template-columns: .8fr .6fr; align-items: end; gap: 1.25rem; padding-top: 2rem; }
  .case-side p { margin: 0; font-size: .95rem; }
  .case-outro { flex-direction: column; gap: .5rem; margin-top: 5rem; }
  .content-gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 4rem; }
  .content-image--large { grid-column: 1 / 7; grid-row: 1; }
  .content-image--portrait { grid-column: 3 / 7; grid-row: 2; margin-top: 2rem; }
  .content-image--detail { grid-column: 1 / 4; grid-row: 3; margin-top: -4rem; }
  .routes-grid { grid-template-columns: 1fr; }
  .routes-grid article { min-height: auto; padding: 2.5rem 0 3rem; }
  .routes-grid article + article { padding: 2.5rem 0 3rem; border-top: 1px solid rgba(32, 41, 35, .4); border-left: 0; }
  .route-number { margin-bottom: 3rem; }
  .screens-composition { min-height: 37rem; }
  .screen-wide { width: 100%; }
  .screen-tall { top: 33%; right: 0; width: 45%; padding: .4rem; }
  .after-grid { grid-template-columns: 1fr; gap: 2rem; }
  .after figure { width: 73%; margin-left: auto; }
  .contact { min-height: 75svh; }
  .contact h2 { font-size: clamp(3.65rem, 13vw, 6rem); }
  .site-footer { flex-wrap: wrap; }
}

@media (max-width: 460px) {
  .site-nav { gap: .8rem; }
  .site-nav a { font-size: .56rem; }
  .site-header .brand { font-size: .93rem; }
  .hero h1 { font-size: clamp(3.4rem, 15.7vw, 4.8rem); }
  .hero-bottom p { font-size: 1.12rem; }
  .case-side { grid-template-columns: 1fr; }
  .case-moving-image { width: 72%; margin-left: auto; }
  .case-side p { max-width: 18rem; }
  .conversation { padding: 1.3rem; }
  .conversation-question { grid-template-columns: 1.8rem 1fr; font-size: 1.15rem; }
  .conversation-outcome { grid-template-columns: 1fr auto 1.2fr; gap: .5rem; }
  .screens-composition { min-height: 29rem; }
  .site-footer { align-items: start; flex-direction: column; gap: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  [data-ambient-video] { display: none; }
}