:root {
  color-scheme: dark;
  --ink: #0d0d0b;
  --ink-soft: #151512;
  --ink-raised: #1c1c18;
  --paper: #f0ece4;
  --paper-soft: #d6d0c5;
  --warm: #b28d5c;
  --warm-light: #d1b187;
  --line: rgba(240, 236, 228, 0.18);
  --line-dark: rgba(13, 13, 11, 0.18);
  --gutter: clamp(1.25rem, 4.25vw, 5.5rem);
  --serif: Iowan Old Style, Baskerville, "Times New Roman", Times, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
  background: var(--ink);
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(240, 236, 228, 0.32) var(--ink);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  color: var(--paper);
  background: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-open { overflow: hidden; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button, input { font: inherit; }

::selection { color: var(--ink); background: var(--warm-light); }

:focus-visible {
  outline: 2px solid var(--warm-light);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1rem;
  color: var(--ink);
  background: var(--paper);
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

.skip-link:focus { transform: none; }

.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 5.5rem;
  padding: 0 var(--gutter);
  border-bottom: 1px solid rgba(240, 236, 228, 0.15);
  transition: min-height 300ms ease, background 300ms ease, backdrop-filter 300ms ease;
}

.site-header.is-scrolled {
  min-height: 4.5rem;
  background: rgba(13, 13, 11, 0.84);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.brand {
  display: inline-grid;
  justify-self: start;
  text-decoration: none;
  line-height: 0.82;
}

.brand strong {
  font-size: 1.6rem;
  font-weight: 680;
  letter-spacing: 0.08em;
}

.brand span {
  margin-top: 0.5rem;
  font-size: 0.49rem;
  font-weight: 600;
  letter-spacing: 0.38em;
}

.site-menu {
  display: flex;
  align-items: center;
  gap: clamp(1.6rem, 3vw, 3.75rem);
}

.site-menu a,
.header-project,
.menu-toggle {
  font-size: 0.63rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-menu a { position: relative; padding: 0.75rem 0; }

.site-menu a::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 260ms ease;
}

.site-menu a:hover::after,
.site-menu a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.header-project {
  justify-self: end;
  padding: 0.85rem 1.1rem;
  border: 1px solid rgba(240, 236, 228, 0.5);
  transition: color 220ms ease, background 220ms ease;
}

.header-project:hover,
.header-project:focus-visible { color: var(--ink); background: var(--paper); }

.menu-toggle {
  display: none;
  justify-self: end;
  align-items: center;
  gap: 0.7rem;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
}

.menu-toggle i,
.menu-toggle i::before {
  display: block;
  width: 1.25rem;
  height: 1px;
  background: currentColor;
  transition: transform 240ms ease;
}

.menu-toggle i { position: relative; }
.menu-toggle i::before { content: ""; position: absolute; top: -0.38rem; }
.menu-toggle[aria-expanded="true"] i { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] i::before { top: 0; transform: rotate(90deg); }

.scene { position: relative; isolation: isolate; }

.eyebrow {
  margin: 0;
  color: var(--warm-light);
  font-size: clamp(0.6rem, 0.62vw, 0.72rem);
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

h1, h2, h3, p { text-wrap: pretty; }
h1, h2, h3 { margin: 0; }
h1 em, h2 em { font-weight: 400; }

.button {
  display: inline-flex;
  min-width: clamp(13.5rem, 17vw, 17.5rem);
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.1rem 1.25rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 999px;
  transition: gap 220ms ease, color 220ms ease, background 220ms ease, transform 220ms ease;
}

.button:hover,
.button:focus-visible { gap: 2.7rem; transform: translateY(-2px); }
.button--light { color: var(--ink); background: var(--paper); }
.button--light:hover, .button--light:focus-visible { background: #fff; }

.scene-index {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.63rem;
  letter-spacing: 0.12em;
}

.scene-index i { width: 3.5rem; height: 1px; background: currentColor; opacity: 0.45; }

/* 01 — Hero */

.scene--hero {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  align-items: flex-end;
  overflow: hidden;
  padding: clamp(8rem, 14vh, 11rem) var(--gutter) clamp(4.75rem, 8vh, 7rem);
  background: #11110f;
}

.hero-media,
.hero-shade,
.contact-media,
.contact-shade { position: absolute; z-index: -2; inset: 0; }

.hero-media img,
.contact-media img { width: 100%; height: 100%; object-fit: cover; }

.hero-media img {
  transform: scale(1.035);
  transform-origin: center;
  transition: transform 2.2s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.is-ready .hero-media img { transform: scale(1); }

.hero-shade {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(6, 7, 5, 0.82) 0%, rgba(6, 7, 5, 0.35) 52%, rgba(6, 7, 5, 0.16) 100%),
    linear-gradient(0deg, rgba(6, 7, 5, 0.68) 0%, transparent 52%, rgba(6, 7, 5, 0.22) 100%);
}

.hero-copy { width: min(70rem, 88vw); }

.hero-copy h1 {
  max-width: 66rem;
  margin: clamp(1.25rem, 2.5vh, 2rem) 0 1.5rem;
  font-family: var(--serif);
  font-size: clamp(3.8rem, 7.4vw, 9rem);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.055em;
}

.hero-copy h1 em { color: var(--paper-soft); font-style: italic; }

.hero-lead {
  max-width: 39rem;
  margin: 0 0 2.3rem;
  color: rgba(240, 236, 228, 0.82);
  font-size: clamp(0.95rem, 1.15vw, 1.2rem);
  line-height: 1.65;
}

.scene-index--hero { position: absolute; right: var(--gutter); bottom: clamp(5rem, 8vh, 7.3rem); }

.hero-location {
  position: absolute;
  top: 50%;
  right: var(--gutter);
  margin: 0;
  writing-mode: vertical-rl;
  color: rgba(240, 236, 228, 0.62);
  font-size: 0.57rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transform: translateY(-50%);
}

.scroll-cue {
  position: absolute;
  right: var(--gutter);
  bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  text-decoration: none;
  text-transform: uppercase;
}

.scroll-cue i { font-size: 1rem; font-style: normal; }

/* Shared editorial structure */

.scene--transformation,
.scene--projects,
.scene--commitments,
.seo-answers {
  padding: clamp(7rem, 12vw, 13rem) var(--gutter);
}

.section-heading,
.projects-heading {
  display: grid;
  grid-template-columns: minmax(9rem, 0.5fr) minmax(22rem, 1.4fr) minmax(16rem, 0.65fr);
  gap: 2rem clamp(2.5rem, 6vw, 7rem);
  align-items: end;
  max-width: 112rem;
  margin: 0 auto clamp(4rem, 7vw, 7rem);
}

.section-heading h2,
.projects-heading h2,
.approach-intro h2,
.visualisation-copy h2,
.commitments-heading h2,
.contact-copy h2,
.seo-answers h2 {
  font-family: var(--serif);
  font-size: clamp(3.25rem, 6.2vw, 7.5rem);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.052em;
}

.section-heading h2 em,
.projects-heading h2 em,
.approach-intro h2 em,
.visualisation-copy h2 em,
.commitments-heading h2 em,
.contact-copy h2 em { color: var(--paper-soft); font-style: italic; }

.section-heading > p,
.projects-heading > p,
.approach-intro > p:last-child,
.visualisation-copy > p:last-child {
  margin: 0;
  color: rgba(240, 236, 228, 0.62);
  font-size: clamp(0.9rem, 1.08vw, 1.08rem);
  line-height: 1.75;
}

.section-rule { display: block; width: min(8rem, 100%); height: 1px; margin-top: 1.5rem; background: var(--line); }

.section-link {
  display: flex;
  justify-content: flex-end;
  max-width: 112rem;
  margin: 2rem auto 0;
}

.section-link a {
  display: flex;
  width: min(27rem, 100%);
  justify-content: space-between;
  padding: 1.3rem 0;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}

.section-link a span { transition: transform 220ms ease; }
.section-link a:hover span, .section-link a:focus-visible span { transform: translateX(0.4rem); }

/* 02 + 04 — Comparators */

.scene--transformation { background: var(--ink); }

.compare {
  --compare-position: 50%;
  position: relative;
  max-width: 112rem;
  aspect-ratio: 16 / 8.5;
  margin: 0 auto;
  overflow: hidden;
  background: #1b1b18;
  border-radius: 0.18rem;
  box-shadow: 0 2rem 7rem rgba(0, 0, 0, 0.32);
  touch-action: pan-y;
}

.compare__image,
.compare__image picture,
.compare__image img { position: absolute; inset: 0; width: 100%; height: 100%; }
.compare__image img { object-fit: cover; }
.compare__image--after { z-index: 0; }
.compare__image--before { z-index: 1; clip-path: inset(0 calc(100% - var(--compare-position)) 0 0); }

.compare__label {
  position: absolute;
  z-index: 2;
  top: 1.5rem;
  padding: 0.7rem 0.85rem;
  color: var(--paper);
  background: rgba(13, 13, 11, 0.65);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--serif);
  font-size: clamp(1rem, 1.4vw, 1.45rem);
  font-style: italic;
}

.compare__label--left { left: 1.5rem; }
.compare__label--right { right: 1.5rem; }

.compare__divider {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: var(--compare-position);
  width: 1px;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.94);
  transform: translateX(-0.5px);
}

.compare__divider span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  width: 3.5rem;
  height: 3.5rem;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgba(13, 13, 11, 0.2);
  border-radius: 50%;
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.25);
  transform: translate(-50%, -50%);
}

.compare__divider i { font-size: 0.82rem; font-style: normal; }

.compare__range {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: ew-resize;
  opacity: 0;
}

.compare figcaption {
  position: absolute;
  z-index: 3;
  right: 1.5rem;
  bottom: 1.35rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.57rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* 03 — Approach */

.scene--approach {
  padding: clamp(7rem, 12vw, 13rem) var(--gutter) clamp(6rem, 10vw, 11rem);
  color: var(--ink);
  background: #e7e1d7;
}

.approach-intro {
  display: grid;
  grid-template-columns: 0.6fr 1.5fr 0.7fr;
  gap: 2rem clamp(2.5rem, 6vw, 7rem);
  align-items: end;
  max-width: 112rem;
  margin: 0 auto clamp(5rem, 9vw, 9rem);
}

.scene--approach .eyebrow { color: #82663f; }
.approach-intro h2 em { color: #6c665d; }
.approach-intro > p:last-child { color: #57544e; }

.acts { max-width: 112rem; margin: auto; }

.act {
  display: grid;
  grid-template-columns: 0.2fr minmax(20rem, 1.15fr) minmax(17rem, 0.75fr);
  gap: clamp(1.5rem, 4.5vw, 5.5rem);
  align-items: center;
  min-height: min(55rem, 88vh);
  padding: clamp(3.5rem, 6vw, 6.5rem) 0;
  border-top: 1px solid var(--line-dark);
}

.act:last-child { border-bottom: 1px solid var(--line-dark); }
.act--reverse .act__media { grid-column: 3; }
.act--reverse .act__copy { grid-column: 2; grid-row: 1; }

.act__number {
  align-self: start;
  font-family: var(--serif);
  font-size: clamp(3.5rem, 6vw, 7rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  opacity: 0.2;
}

.act__media {
  position: relative;
  min-height: clamp(24rem, 50vw, 47rem);
  overflow: hidden;
  background: #c7c0b4;
}

.act__media picture,
.act__media img { width: 100%; height: 100%; }
.act__media picture { position: absolute; inset: 0; }
.act__media img { object-fit: cover; }

.act__copy { max-width: 30rem; }
.act__copy h3 { margin: 0.85rem 0 1.4rem; font-family: var(--serif); font-size: clamp(2.8rem, 4.7vw, 5.5rem); font-weight: 400; line-height: 0.88; letter-spacing: -0.05em; }
.act__copy > p:not(.eyebrow) { margin: 0; color: #54514b; font-size: clamp(0.94rem, 1.08vw, 1.08rem); line-height: 1.7; }
.act__copy ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--line-dark); list-style: none; }
.act__copy li { padding: 0.85rem 0; color: #4d4943; font-size: 0.77rem; line-height: 1.4; border-bottom: 1px solid var(--line-dark); }
.act__copy li:nth-child(odd) { padding-right: 1rem; }

/* 04 — Visualisation */

.scene--visualisation {
  display: grid;
  grid-template-columns: minmax(17rem, 0.65fr) minmax(28rem, 1.55fr);
  gap: clamp(3rem, 7vw, 9rem);
  align-items: center;
  min-height: 100vh;
  padding: clamp(7rem, 11vw, 12rem) var(--gutter);
  background: var(--ink-soft);
}

.visualisation-copy { max-width: 37rem; }
.visualisation-copy h2 { margin: 1.5rem 0 2rem; }
.compare--study { width: 100%; aspect-ratio: 4 / 5; }
.compare--study .compare__image img { object-position: center; }

/* 05 — Projects */

.scene--projects { background: var(--ink); }

.featured-project {
  display: grid;
  grid-template-columns: minmax(25rem, 1.7fr) minmax(16rem, 0.65fr);
  grid-template-rows: auto 1fr;
  gap: clamp(1.25rem, 2.5vw, 2.75rem);
  max-width: 112rem;
  margin: auto;
}

.featured-project__main {
  position: relative;
  grid-row: 1 / 3;
  min-height: min(62rem, 76vw);
  overflow: hidden;
  text-decoration: none;
}

.featured-project__main picture,
.featured-project__main img { width: 100%; height: 100%; }
.featured-project__main picture { position: absolute; inset: 0; }
.featured-project__main img { object-fit: cover; }

.featured-project__main > span {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  color: var(--ink);
  background: var(--paper);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.featured-project__main > span i { font-size: 0.9rem; font-style: normal; transition: transform 220ms ease; }
.featured-project__main:hover > span i { transform: translate(0.2rem, -0.2rem); }

.featured-project__meta { align-self: end; padding: clamp(1rem, 2vw, 2rem) 0; }
.featured-project__meta p { margin: 0 0 1rem; color: var(--warm-light); font-size: 0.63rem; font-weight: 650; letter-spacing: 0.16em; text-transform: uppercase; }
.featured-project__meta h3 { margin: 0 0 2rem; font-family: var(--serif); font-size: clamp(2.4rem, 4vw, 4.5rem); font-weight: 400; line-height: 0.9; letter-spacing: -0.045em; }
.featured-project__meta a { font-size: 0.67rem; font-weight: 650; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; }

.featured-project__detail { position: relative; min-height: 28rem; overflow: hidden; }
.featured-project__detail picture,
.featured-project__detail img { width: 100%; height: 100%; }
.featured-project__detail picture { position: absolute; inset: 0; }
.featured-project__detail img { object-fit: cover; object-position: 70% center; transform: scale(1.55); }

/* 06 — Commitments */

.scene--commitments { color: var(--ink); background: #e7e1d7; }
.commitments-heading { display: grid; grid-template-columns: 0.55fr 1.45fr; gap: 3rem; align-items: end; max-width: 112rem; margin: 0 auto clamp(4rem, 7vw, 7rem); }
.scene--commitments .eyebrow { color: #82663f; }
.commitments-heading h2 em { color: #6c665d; }

.commitments { max-width: 112rem; margin: 0 auto; padding: 0; border-top: 1px solid var(--line-dark); list-style: none; }
.commitments li { display: grid; grid-template-columns: minmax(4rem, 0.35fr) 1.65fr; align-items: center; min-height: clamp(7rem, 10vw, 10rem); border-bottom: 1px solid var(--line-dark); }
.commitments span { color: #857e74; font-size: 0.7rem; letter-spacing: 0.14em; }
.commitments h3 { font-family: var(--serif); font-size: clamp(1.7rem, 3.4vw, 4.25rem); font-weight: 400; letter-spacing: -0.035em; transition: transform 260ms ease; }
.commitments li:hover h3 { transform: translateX(0.7rem); }

.service-links { display: flex; flex-wrap: wrap; gap: 0.55rem; max-width: 112rem; margin: 4rem auto 0; }
.service-links a { padding: 0.75rem 0.95rem; color: #3f3c37; font-size: 0.68rem; font-weight: 650; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; border: 1px solid var(--line-dark); border-radius: 999px; transition: color 200ms ease, background 200ms ease; }
.service-links a:hover, .service-links a:focus-visible { color: var(--paper); background: var(--ink); }

/* 07 — Contact */

.scene--contact {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  align-items: center;
  overflow: hidden;
  padding: clamp(8rem, 13vh, 11rem) var(--gutter) clamp(6rem, 10vh, 8rem);
  background: #0a0a08;
}

.contact-media { z-index: -2; }
.contact-media img { transform: scale(1.04); }
.contact-shade { z-index: -1; background: linear-gradient(90deg, rgba(6, 7, 5, 0.94) 0%, rgba(6, 7, 5, 0.63) 56%, rgba(6, 7, 5, 0.22) 100%), linear-gradient(0deg, rgba(6, 7, 5, 0.72), transparent 55%); }
.contact-copy { max-width: 75rem; }
.contact-copy h2 { margin: 1.35rem 0 1.7rem; }
.contact-copy > p:not(.eyebrow) { margin: 0 0 2.5rem; color: rgba(240, 236, 228, 0.68); font-size: clamp(1rem, 1.3vw, 1.28rem); }
.scene-index--contact { position: absolute; top: clamp(7rem, 12vh, 10rem); right: var(--gutter); }
.contact-details { position: absolute; right: var(--gutter); bottom: clamp(3rem, 6vh, 5rem); display: grid; justify-items: end; gap: 0.6rem; }
.contact-details a { font-family: var(--serif); font-size: clamp(1.2rem, 1.65vw, 1.7rem); text-decoration: none; }
.contact-details p { margin: 0.5rem 0 0; color: rgba(240, 236, 228, 0.55); font-size: 0.57rem; letter-spacing: 0.13em; text-transform: uppercase; }

/* Answers + footer */

.seo-answers {
  display: grid;
  grid-template-columns: minmax(17rem, 0.7fr) minmax(24rem, 1.3fr);
  gap: clamp(3rem, 8vw, 10rem);
  background: var(--ink-soft);
}

.seo-answers h2 { margin-top: 1.2rem; font-size: clamp(2.8rem, 4.7vw, 5.6rem); }
.answers-list { border-top: 1px solid var(--line); }
.answers-list details { border-bottom: 1px solid var(--line); }
.answers-list summary { padding: 1.5rem 2rem 1.5rem 0; cursor: pointer; font-family: var(--serif); font-size: clamp(1.15rem, 1.6vw, 1.55rem); }
.answers-list p { max-width: 48rem; margin: 0 0 1.75rem; color: rgba(240, 236, 228, 0.62); font-size: 0.92rem; line-height: 1.7; }

.site-footer {
  display: grid;
  grid-template-columns: 1.25fr 0.8fr 0.8fr 1fr;
  gap: 3rem clamp(2rem, 5vw, 6rem);
  padding: clamp(5rem, 8vw, 8rem) var(--gutter) 2rem;
  background: #080806;
  border-top: 1px solid var(--line);
}

.brand--footer { margin-bottom: 2rem; }
.footer-intro > p { max-width: 24rem; margin: 0; color: rgba(240, 236, 228, 0.5); font-size: 0.85rem; line-height: 1.65; }
.footer-nav, .footer-contact { display: grid; align-content: start; gap: 0.75rem; }
.footer-nav p, .footer-contact > p { margin: 0 0 0.65rem; color: var(--warm-light); font-size: 0.62rem; font-weight: 650; letter-spacing: 0.16em; text-transform: uppercase; }
.footer-nav a, .footer-contact a, .footer-contact address { color: rgba(240, 236, 228, 0.6); font-size: 0.77rem; font-style: normal; line-height: 1.6; text-decoration: none; }
.footer-nav a:hover, .footer-contact a:hover { color: var(--paper); }
.footer-contact address { margin-bottom: 0.8rem; }

.footer-bottom {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  color: rgba(240, 236, 228, 0.42);
  font-size: 0.62rem;
  border-top: 1px solid var(--line);
}

.footer-bottom div { display: flex; gap: 1.5rem; }
.footer-bottom a { text-decoration: none; }
.footer-bottom > a:last-child { justify-self: end; }

.noscript { margin: 0; padding: 1rem var(--gutter); color: var(--ink); background: var(--warm-light); text-align: center; font-size: 0.78rem; }

/* Motion */

html.js [data-hero-intro] > *,
html.js .hero-location,
html.js .scroll-cue,
html.js .scene-index--hero {
  opacity: 0;
  transform: translateY(1.5rem);
}

html.js body.is-ready [data-hero-intro] > *,
html.js body.is-ready .hero-location,
html.js body.is-ready .scroll-cue,
html.js body.is-ready .scene-index--hero {
  opacity: 1;
  transform: none;
  transition: opacity 900ms ease, transform 1100ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

html.js body.is-ready [data-hero-intro] > *:nth-child(2) { transition-delay: 120ms; }
html.js body.is-ready [data-hero-intro] > *:nth-child(3) { transition-delay: 240ms; }
html.js body.is-ready [data-hero-intro] > *:nth-child(4) { transition-delay: 340ms; }
html.js body.is-ready .hero-location { transition-delay: 350ms; }
html.js body.is-ready .scene-index--hero { transition-delay: 450ms; }
html.js body.is-ready .scroll-cue { transition-delay: 520ms; }

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(2.25rem);
  transition: opacity 750ms ease, transform 950ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

html.js [data-reveal].is-visible { opacity: 1; transform: none; }

.media-reveal::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
}

html.js [data-reveal] .media-reveal img,
html.js .media-reveal[data-reveal] img { transform: scale(1.045); transition: transform 1.5s cubic-bezier(0.2, 0.75, 0.2, 1); }
html.js [data-reveal].is-visible .media-reveal img,
html.js .media-reveal[data-reveal].is-visible img { transform: scale(1); }

@media (max-width: 1100px) {
  .site-header { grid-template-columns: auto 1fr auto; }
  .site-menu { justify-self: center; gap: 1.4rem; }
  .header-project { display: none; }
  .section-heading, .projects-heading { grid-template-columns: 0.45fr 1.25fr; }
  .section-heading > p, .projects-heading > p { grid-column: 2; }
  .approach-intro { grid-template-columns: 0.45fr 1.25fr; }
  .approach-intro > p:last-child { grid-column: 2; }
  .act { grid-template-columns: 0.15fr 1fr 0.75fr; }
  .scene--visualisation { grid-template-columns: 0.75fr 1.25fr; }
  .site-footer { grid-template-columns: 1.3fr 1fr 1fr; }
  .footer-contact { grid-column: 1; grid-row: 2; }
}

@media (max-width: 800px) {
  .site-header { min-height: 4.6rem; grid-template-columns: 1fr auto auto; gap: 1rem; }
  .brand strong { font-size: 1.35rem; }
  .brand span { font-size: 0.43rem; }
  .header-project { display: inline-flex; padding: 0.72rem 0.8rem; font-size: 0.53rem; }
  .menu-toggle { display: inline-flex; }

  .site-menu {
    position: fixed;
    z-index: -1;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: 7rem var(--gutter) 3rem;
    background: rgba(13, 13, 11, 0.98);
  }

  .site-menu a { width: 100%; padding: 1rem 0; font-family: var(--serif); font-size: clamp(2rem, 10vw, 4.2rem); font-weight: 400; letter-spacing: -0.04em; text-transform: none; border-bottom: 1px solid var(--line); }
  .js .site-menu { visibility: hidden; opacity: 0; transform: translateY(-1rem); transition: opacity 300ms ease, transform 400ms ease, visibility 300ms; }
  .js .site-menu.is-open { visibility: visible; opacity: 1; transform: none; }

  .scene--hero { min-height: max(52rem, 100svh); padding-bottom: 5.5rem; }
  .hero-media img { object-position: 46% center; }
  .hero-shade { background: linear-gradient(0deg, rgba(6, 7, 5, 0.9) 0%, rgba(6, 7, 5, 0.25) 68%, rgba(6, 7, 5, 0.32) 100%); }
  .hero-copy { width: 100%; }
  .hero-copy h1 { font-size: clamp(3.4rem, 15.2vw, 5.7rem); line-height: 0.84; }
  .hero-location { display: none; }
  .scene-index--hero { top: 6.5rem; right: var(--gutter); bottom: auto; }
  .scroll-cue { right: var(--gutter); bottom: 1.4rem; }

  .scene--transformation, .scene--projects, .scene--commitments, .seo-answers { padding-top: 6.5rem; padding-bottom: 6.5rem; }
  .section-heading, .projects-heading, .approach-intro, .commitments-heading, .seo-answers { grid-template-columns: 1fr; }
  .section-heading > p, .projects-heading > p, .approach-intro > p:last-child { grid-column: auto; }
  .section-heading h2, .projects-heading h2, .approach-intro h2, .visualisation-copy h2, .commitments-heading h2, .contact-copy h2 { font-size: clamp(3.05rem, 13.5vw, 5rem); }
  .section-heading, .projects-heading { margin-bottom: 3rem; }

  .compare { aspect-ratio: 4 / 5; }
  .compare__image img { object-fit: cover; object-position: 50% center; }
  .compare__label { top: 1rem; font-size: 1rem; }
  .compare__label--left { left: 1rem; }
  .compare__label--right { right: 1rem; }
  .compare__divider span { width: 3rem; height: 3rem; }
  .compare figcaption { right: 1rem; bottom: 1rem; }

  .scene--approach { padding-top: 6.5rem; padding-bottom: 6.5rem; }
  .approach-intro { margin-bottom: 4rem; }
  .act, .act--reverse { grid-template-columns: 3.2rem 1fr; min-height: auto; }
  .act__number { grid-column: 1; grid-row: 1; font-size: 3.4rem; }
  .act__media, .act--reverse .act__media { grid-column: 2; grid-row: 1; min-height: 31rem; }
  .act__copy, .act--reverse .act__copy { grid-column: 2; grid-row: 2; max-width: none; }
  .act__copy h3 { font-size: clamp(2.8rem, 12vw, 4.6rem); }

  .scene--visualisation { grid-template-columns: 1fr; min-height: 0; padding-top: 6.5rem; padding-bottom: 6.5rem; }
  .visualisation-copy { max-width: none; }
  .compare--study { aspect-ratio: 4 / 5; }

  .featured-project { grid-template-columns: 1fr; grid-template-rows: auto; }
  .featured-project__main { grid-row: auto; min-height: 38rem; }
  .featured-project__meta { padding: 1.5rem 0 2rem; }
  .featured-project__detail { min-height: 25rem; }

  .commitments-heading { margin-bottom: 3rem; }
  .commitments li { grid-template-columns: 3.2rem 1fr; min-height: 7.2rem; }
  .commitments h3 { font-size: clamp(1.55rem, 7vw, 2.5rem); }

  .scene--contact { min-height: max(52rem, 100svh); align-items: flex-end; padding-bottom: 11rem; }
  .contact-media img { object-position: 54% center; }
  .contact-shade { background: linear-gradient(0deg, rgba(6, 7, 5, 0.94) 0%, rgba(6, 7, 5, 0.42) 72%, rgba(6, 7, 5, 0.32) 100%); }
  .scene-index--contact { top: 6.5rem; }
  .contact-copy h2 br { display: none; }
  .contact-details { right: var(--gutter); bottom: 3rem; left: var(--gutter); align-items: start; justify-items: start; }
  .contact-details p { line-height: 1.5; }

  .site-footer { grid-template-columns: 1fr 1fr; }
  .footer-intro { grid-column: 1 / -1; }
  .footer-contact { grid-column: 1 / -1; grid-row: auto; }
  .footer-bottom { grid-template-columns: 1fr; }
  .footer-bottom div { flex-wrap: wrap; }
  .footer-bottom > a:last-child { justify-self: start; }
}

/* Hero media rotation — the editorial layout and copy remain unchanged. */
.hero-media {
  isolation: isolate;
  background: #11110f;
}

.hero-slide {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    visibility 0s linear 1.35s;
  will-change: opacity;
}

.hero-slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.hero-slide img { display: block; }

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

@media (max-width: 480px) {
  .site-header { gap: 0.6rem; }
  .header-project { padding: 0.65rem 0.7rem; letter-spacing: 0.1em; }
  .header-project { font-size: 0; }
  .header-project::before { content: "Projet"; font-size: 0.53rem; }
  .menu-toggle span { font-size: 0.53rem; }
  .scene--hero { min-height: 100svh; padding-top: 7rem; }
  .hero-copy h1 { font-size: clamp(3.2rem, 15.8vw, 4.5rem); }
  .hero-lead { max-width: 20rem; font-size: 0.92rem; }
  .button { width: 100%; min-width: 0; }
  .scroll-cue span { display: none; }
  .act, .act--reverse { grid-template-columns: 1fr; }
  .act__number, .act__media, .act--reverse .act__media, .act__copy, .act--reverse .act__copy { grid-column: 1; }
  .act__number { grid-row: auto; }
  .act__media, .act--reverse .act__media { grid-row: auto; min-height: 27rem; }
  .act__copy, .act--reverse .act__copy { grid-row: auto; }
  .act__copy ul { grid-template-columns: 1fr; }
  .featured-project__main { min-height: 31rem; }
  .seo-answers h2 { font-size: 3rem; }
  .site-footer { grid-template-columns: 1fr; }
  .footer-intro { grid-column: auto; }
  .footer-contact { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  html.js [data-reveal], html.js [data-hero-intro] > *, html.js .hero-location, html.js .scroll-cue, html.js .scene-index--hero { opacity: 1; transform: none; }
  .hero-media img, .contact-media img { transform: none; }
}

/* V2 — compact editorial cut */

.site-header {
  min-height: 4.75rem;
  background: linear-gradient(90deg, rgba(8, 8, 7, 0.97), rgba(13, 13, 11, 0.91));
}

.site-header.is-scrolled { min-height: 4.25rem; }

.scene--approach,
.scene--commitments { background: #e9e3d9; }

.scene--projects { background: #0d0d0b; }

.seo-answers {
  color: var(--ink);
  background: #e9e3d9;
}

.seo-answers .eyebrow { color: #82663f; }
.seo-answers h2 { color: var(--ink); }
.seo-answers .answers-list { border-color: var(--line-dark); }
.seo-answers .answers-list details { border-color: var(--line-dark); }
.seo-answers .answers-list p { color: #57534c; }

@media (min-width: 801px) {
  .scene--hero {
    display: grid;
    grid-template-columns: minmax(25rem, 42%) minmax(0, 58%);
    grid-template-rows: 1fr;
    height: clamp(28rem, 54svh, 34rem);
    min-height: 0;
    align-items: stretch;
    padding: 4.75rem 0 0;
    background: #090908;
    border-bottom: 1px solid var(--line);
  }

  .hero-media {
    position: relative;
    z-index: 0;
    inset: auto;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
  }

  .hero-media img { object-position: 54% 52%; }

  .hero-shade {
    z-index: 1;
    top: 4.75rem;
    left: 42%;
    background:
      linear-gradient(90deg, rgba(8, 8, 7, 0.38), transparent 24%),
      linear-gradient(0deg, rgba(8, 8, 7, 0.43), transparent 42%);
    pointer-events: none;
  }

  .hero-copy {
    position: relative;
    z-index: 2;
    grid-column: 1;
    grid-row: 1;
    display: flex;
    width: auto;
    max-width: 43rem;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(2rem, 3.2vw, 3.75rem) var(--gutter);
    background: #090908;
  }

  .hero-copy h1 {
    max-width: 9ch;
    margin: clamp(0.8rem, 1.5vh, 1.15rem) 0 1.05rem;
    font-size: clamp(3.25rem, 4.7vw, 5.75rem);
    line-height: 0.8;
  }

  .hero-lead {
    max-width: 31rem;
    margin-bottom: 1.55rem;
    font-size: clamp(0.82rem, 0.95vw, 1rem);
    line-height: 1.55;
  }

  .hero-copy .button {
    min-width: min(17rem, 100%);
    padding: 0.95rem 1.1rem;
  }

  .scene-index--hero {
    z-index: 3;
    right: var(--gutter);
    bottom: 2rem;
  }

  .hero-location {
    z-index: 3;
    top: calc(50% + 2.2rem);
  }

  .scroll-cue {
    z-index: 3;
    right: auto;
    bottom: 1.8rem;
    left: calc(42% + clamp(1.25rem, 2.5vw, 3rem));
  }

  .scene--transformation {
    display: grid;
    grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 1.55fr);
    column-gap: clamp(2rem, 5vw, 6rem);
    align-items: center;
    min-height: 0;
    padding: clamp(2rem, 2.8vw, 2.7rem) var(--gutter);
  }

  .scene--transformation .section-heading {
    display: block;
    max-width: 31rem;
    margin: 0;
    padding-bottom: 3.25rem;
  }

  .scene--transformation .section-heading h2 {
    margin: 1rem 0 1.1rem;
    font-size: clamp(2.4rem, 3.6vw, 4.4rem);
    line-height: 0.86;
  }

  .scene--transformation .section-heading > p {
    max-width: 27rem;
    font-size: clamp(0.78rem, 0.86vw, 0.92rem);
    line-height: 1.58;
  }

  .scene--transformation .section-rule { width: 4.5rem; margin-top: 0.85rem; }

  .scene--transformation .compare {
    width: 100%;
    height: clamp(16rem, 21vw, 20rem);
    aspect-ratio: auto;
    margin: 0;
    box-shadow: 0 1.25rem 4rem rgba(0, 0, 0, 0.28);
  }

  .scene--transformation .section-link {
    position: absolute;
    bottom: clamp(2rem, 2.8vw, 2.7rem);
    left: var(--gutter);
    width: min(25rem, 28vw);
    margin: 0;
  }

  .scene--transformation .section-link a { width: 100%; padding: 0.85rem 0; font-size: 0.6rem; }

  .scene--approach {
    padding: clamp(5.5rem, 7vw, 7.5rem) var(--gutter) clamp(5rem, 6.5vw, 7rem);
  }

  .approach-intro {
    grid-template-columns: 0.42fr 1.15fr 0.72fr;
    gap: 2rem clamp(2rem, 4vw, 5rem);
    margin-bottom: clamp(2.5rem, 4vw, 4.25rem);
  }

  .approach-intro h2 { font-size: clamp(3rem, 5vw, 6rem); }
  .approach-intro > p:last-child { font-size: clamp(0.82rem, 0.95vw, 0.98rem); line-height: 1.6; }

  .acts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--line-dark);
    border-bottom: 1px solid var(--line-dark);
  }

  .act,
  .act.act--reverse {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    grid-template-rows: auto 12.5rem auto;
    gap: 1.25rem 1rem;
    min-height: 0;
    align-items: start;
    padding: clamp(1.5rem, 2.1vw, 2.35rem);
    border-top: 0;
    border-right: 1px solid var(--line-dark);
    border-bottom: 0;
  }

  .act:last-child { border-right: 0; border-bottom: 0; }

  .act__number {
    grid-column: 1;
    grid-row: 1;
    font-size: clamp(2.5rem, 3.2vw, 3.8rem);
  }

  .act__media,
  .act.act--reverse .act__media {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    height: 12.5rem;
    min-height: 0;
  }

  .act__media img { object-position: center 52%; }
  .act:nth-child(2) .act__media img { object-position: center 45%; }
  .act:nth-child(3) .act__media img { object-position: 60% center; }

  .act__copy,
  .act.act--reverse .act__copy {
    grid-column: 1 / -1;
    grid-row: 3;
    max-width: none;
  }

  .act__copy h3 {
    margin: 0.65rem 0 0.85rem;
    font-size: clamp(2.15rem, 2.8vw, 3.35rem);
  }

  .act__copy > p:not(.eyebrow) { font-size: 0.82rem; line-height: 1.55; }
  .act__copy ul { margin-top: 1.2rem; }
  .act__copy li { padding: 0.65rem 0; font-size: 0.68rem; }

  .scene--visualisation {
    grid-template-columns: minmax(17rem, 0.62fr) minmax(0, 1.38fr);
    min-height: 0;
    padding: clamp(5.5rem, 7.5vw, 8rem) var(--gutter);
  }

  .visualisation-copy h2 { font-size: clamp(3rem, 5vw, 6rem); }
  .compare--study { max-height: 38rem; aspect-ratio: 16 / 10; }

  .scene--projects { padding: clamp(5.5rem, 7vw, 7.5rem) var(--gutter); }

  .projects-heading {
    grid-template-columns: minmax(9rem, 0.45fr) minmax(22rem, 1.1fr) minmax(16rem, 0.65fr);
    margin-bottom: clamp(2.5rem, 4vw, 4rem);
  }

  .projects-heading h2 { font-size: clamp(3rem, 5vw, 6rem); }

  .featured-project {
    grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.62fr);
    grid-template-rows: 0.72fr 1.28fr;
    height: clamp(31rem, 42vw, 39rem);
  }

  .featured-project__main {
    grid-row: 1 / 3;
    min-height: 0;
  }

  .featured-project__main img { object-position: 43% center; }
  .featured-project__meta { align-self: stretch; padding: 1.5rem 0 1rem; }
  .featured-project__meta h3 { margin-bottom: 1.3rem; font-size: clamp(2.35rem, 3.4vw, 4rem); }
  .featured-project__detail { min-height: 0; }
  .featured-project__detail img { object-position: 68% 48%; transform: scale(1.28); }
  .scene--projects .section-link { margin-top: 1.5rem; }

  .scene--commitments { padding: clamp(5rem, 6.5vw, 7rem) var(--gutter); }

  .commitments-heading {
    grid-template-columns: 0.45fr 1.55fr;
    margin-bottom: clamp(2.25rem, 3.5vw, 3.5rem);
  }

  .commitments-heading h2 { font-size: clamp(3rem, 5vw, 6rem); }

  .commitments {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .commitments li {
    grid-template-columns: 3.5rem 1fr;
    min-height: clamp(6rem, 8vw, 8rem);
    padding: 1.25rem 1.5rem;
  }

  .commitments li:nth-child(odd) { border-right: 1px solid var(--line-dark); }
  .commitments h3 { font-size: clamp(1.65rem, 2.5vw, 3rem); }
  .service-links { margin-top: 2.5rem; }

  .scene--contact {
    min-height: clamp(34rem, 72svh, 46rem);
    padding: clamp(6.5rem, 9vh, 8rem) var(--gutter) clamp(4.5rem, 7vh, 6rem);
  }

  .contact-copy { max-width: 68rem; }
  .contact-copy h2 { font-size: clamp(3.3rem, 5.7vw, 7rem); }
  .scene-index--contact { top: 6.5rem; }
  .contact-details { bottom: 3rem; }

  .seo-answers { padding-top: clamp(4.5rem, 6vw, 6rem); padding-bottom: clamp(4.5rem, 6vw, 6rem); }
}

@media (max-width: 800px) {
  .scene--hero {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto clamp(19rem, 73vw, 25rem);
    min-height: 0;
    align-items: stretch;
    padding: 4.6rem 0 0;
    background: #090908;
  }

  .hero-copy {
    position: relative;
    z-index: 2;
    grid-row: 1;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(2.8rem, 10vw, 4.5rem) var(--gutter) clamp(2.6rem, 9vw, 4rem);
    background: #090908;
  }

  .hero-copy h1 {
    max-width: 8.5ch;
    margin: 1rem 0 1.2rem;
    font-size: clamp(3.35rem, 15.5vw, 5.8rem);
    line-height: 0.8;
  }

  .hero-lead { max-width: 31rem; margin-bottom: 1.7rem; line-height: 1.55; }

  .hero-media {
    position: relative;
    z-index: 0;
    inset: auto;
    grid-row: 2;
    min-height: 0;
    overflow: hidden;
  }

  .hero-media img { object-position: 51% center; }

  .hero-shade {
    z-index: 1;
    top: auto;
    height: clamp(19rem, 73vw, 25rem);
    background: linear-gradient(0deg, rgba(8, 8, 7, 0.62), transparent 52%);
  }

  .scene-index--hero { z-index: 3; top: auto; right: var(--gutter); bottom: 1.4rem; }
  .scroll-cue { z-index: 3; right: auto; bottom: 1.3rem; left: var(--gutter); }

  .scene--transformation {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.25rem;
    padding: 4.75rem var(--gutter);
  }

  .scene--transformation .section-heading { margin: 0; }
  .scene--transformation .section-heading h2 { font-size: clamp(3rem, 12.5vw, 4.8rem); }
  .scene--transformation .section-heading > p { max-width: 34rem; font-size: 0.9rem; line-height: 1.6; }
  .scene--transformation .compare { width: 100%; aspect-ratio: 4 / 5; }
  .scene--transformation .section-link { margin-top: -0.75rem; }

  .scene--approach { padding-top: 5.25rem; padding-bottom: 5.25rem; }
  .approach-intro { margin-bottom: 3rem; }

  .acts {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--line-dark);
  }

  .act,
  .act.act--reverse {
    display: grid;
    grid-template-columns: 3.1rem minmax(0, 1fr);
    gap: 1.1rem 1rem;
    min-height: 0;
    padding: 1.8rem 0 2.3rem;
    border-top: 0;
    border-bottom: 1px solid var(--line-dark);
  }

  .act__number {
    grid-column: 1;
    grid-row: 1;
    font-size: 3rem;
  }

  .act__media,
  .act.act--reverse .act__media {
    grid-column: 2;
    grid-row: 1;
    height: clamp(12rem, 49vw, 19rem);
    min-height: 0;
  }

  .act__copy,
  .act.act--reverse .act__copy {
    grid-column: 2;
    grid-row: 2;
  }

  .act__copy h3 { margin-bottom: 1rem; font-size: clamp(2.5rem, 10vw, 4rem); }
  .act__copy > p:not(.eyebrow) { font-size: 0.86rem; line-height: 1.55; }
  .act__copy ul { margin-top: 1.3rem; }
  .act__copy li { padding: 0.65rem 0; font-size: 0.7rem; }

  .scene--visualisation { padding-top: 5.25rem; padding-bottom: 5.25rem; }
  .compare--study { aspect-ratio: 4 / 5; }

  .scene--projects { padding-top: 5.25rem; padding-bottom: 5.25rem; }
  .featured-project__main { min-height: clamp(22rem, 104vw, 34rem); }
  .featured-project__detail { min-height: clamp(12rem, 55vw, 19rem); }
  .featured-project__detail img { transform: scale(1.2); }

  .scene--commitments { padding-top: 5.25rem; padding-bottom: 5.25rem; }
  .commitments li { min-height: 5.5rem; }
  .service-links { margin-top: 2.5rem; }

  .scene--contact {
    min-height: clamp(39rem, 82svh, 47rem);
    padding-bottom: 10rem;
  }

  .seo-answers { padding-top: 5rem; padding-bottom: 5rem; }
}

@media (max-width: 480px) {
  .hero-copy { padding-top: 2.75rem; padding-bottom: 2.75rem; }
  .hero-copy h1 { font-size: clamp(3.15rem, 15vw, 4.25rem); }
  .hero-copy .button { width: auto; min-width: min(18rem, 100%); }
  .scene--transformation { padding-top: 4rem; padding-bottom: 4rem; }
  .act__copy ul { grid-template-columns: 1fr 1fr; }
  .act__copy li:nth-child(odd) { padding-right: 0.75rem; }
  .contact-copy h2 { font-size: clamp(3rem, 13.5vw, 4.25rem); }
}

/* V3 — proportions calées sur le storyboard cinématique */

.scene[id] { scroll-margin-top: 4.25rem; }

.scene--transformation {
  color: var(--ink);
  background: #e9e3d9;
}

.scene--approach {
  color: var(--paper);
  background: #0d0d0b;
}

.scene--visualisation {
  color: var(--ink);
  background: #e9e3d9;
}

.scene--approach .eyebrow,
.scene--visualisation .eyebrow,
.scene--transformation .eyebrow { color: #9a7444; }

.scene--approach .approach-intro h2 em { color: var(--paper-soft); }
.scene--approach .approach-intro > p:last-child,
.scene--approach .act__copy > p:not(.eyebrow),
.scene--approach .act__copy li { color: rgba(240, 236, 228, 0.62); }

.scene--visualisation .visualisation-copy > p:last-child { color: #57534c; }
.scene--visualisation .visualisation-copy h2 em,
.scene--transformation h2 em { color: #70685d; }

.transformation-copy { align-self: center; }

.transformation-kicker {
  margin: 0.8rem 0 0;
  color: #786f63;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.45vw, 1.55rem);
  font-style: italic;
}

.transformation-copy h2 {
  margin: 0.7rem 0 0.9rem;
  font-family: var(--serif);
  font-size: clamp(2rem, 2.65vw, 3rem);
  font-weight: 400;
  line-height: 0.93;
  letter-spacing: -0.045em;
}

.transformation-copy > p:not(.eyebrow):not(.transformation-kicker) {
  max-width: 22rem;
  margin: 0;
  color: #57534c;
  font-size: 0.78rem;
  line-height: 1.55;
}

.transformation-copy > a {
  display: flex;
  width: min(17rem, 100%);
  justify-content: space-between;
  margin-top: 1rem;
  padding: 0.75rem 0;
  color: var(--ink);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-dark);
}

.transformation-note {
  align-self: center;
  margin: 0;
  padding: 1.25rem 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.transformation-note span {
  color: #8b6b43;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.transformation-note p {
  margin: 0.75rem 0 0;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.8vw, 2rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
}

@media (min-width: 801px) {
  .site-header { min-height: 4.25rem; }
  .site-header.is-scrolled { min-height: 3.9rem; }

  .scene--hero {
    grid-template-columns: minmax(23rem, 40%) minmax(0, 60%);
    height: clamp(25.5rem, 50svh, 28.5rem);
    padding: 4.25rem 0 0 var(--gutter);
    border: 0;
  }

  .hero-copy {
    max-width: none;
    padding: clamp(1.75rem, 2.6vw, 2.6rem) clamp(1.75rem, 2.8vw, 3rem);
    border-radius: 0.18rem 0 0 0.18rem;
  }

  .hero-copy h1 {
    max-width: 8ch;
    margin: 0.65rem 0 0.9rem;
    font-size: clamp(3.1rem, 4.15vw, 4.8rem);
    line-height: 0.79;
  }

  .hero-lead {
    max-width: 27rem;
    margin-bottom: 1.2rem;
    font-size: clamp(0.76rem, 0.82vw, 0.88rem);
    line-height: 1.5;
  }

  .hero-copy .button {
    min-width: min(15rem, 100%);
    padding: 0.82rem 1rem;
    font-size: 0.59rem;
  }

  .hero-media {
    border-radius: 0 0.18rem 0.18rem 0;
  }

  .hero-media img { object-position: 52% 51%; }
  .hero-shade { display: none; }

  .scene-index--hero {
    right: 1.35rem;
    bottom: 1.2rem;
  }

  .hero-location { right: 0.8rem; }

  .scroll-cue {
    left: calc(var(--gutter) + 40% + 1.4rem);
    bottom: 1.15rem;
  }

  .scene--transformation {
    grid-template-columns: minmax(14rem, 0.72fr) minmax(29rem, 1.62fr) minmax(11rem, 0.52fr);
    gap: clamp(1.5rem, 2.7vw, 3rem);
    padding: clamp(1.75rem, 2.2vw, 2.25rem) var(--gutter);
  }

  .scene--transformation .compare {
    width: 100%;
    height: clamp(13.5rem, 16.6vw, 15rem);
    margin: 0;
    border-radius: 0.12rem;
    box-shadow: 0 1rem 3rem rgba(43, 36, 27, 0.16);
  }

  .scene--transformation .compare__label {
    top: 0.8rem;
    padding: 0.48rem 0.62rem;
    font-size: 0.9rem;
  }

  .scene--transformation .compare__label--left { left: 0.8rem; }
  .scene--transformation .compare__label--right { right: 0.8rem; }
  .scene--transformation .compare__divider span { width: 2.7rem; height: 2.7rem; }
  .scene--transformation .compare figcaption { right: 0.8rem; bottom: 0.7rem; font-size: 0.5rem; }

  .scene--approach {
    padding: clamp(3.5rem, 4.2vw, 4.5rem) var(--gutter);
  }

  .approach-intro {
    grid-template-columns: 0.4fr 1.05fr 0.62fr;
    gap: 1.5rem clamp(1.75rem, 3vw, 3.5rem);
    margin-bottom: clamp(1.75rem, 2.3vw, 2.5rem);
  }

  .approach-intro h2 { font-size: clamp(2.7rem, 4vw, 4.6rem); }
  .approach-intro > p:last-child { font-size: clamp(0.76rem, 0.82vw, 0.87rem); line-height: 1.55; }

  .scene--approach .acts {
    border-color: var(--line);
  }

  .scene--approach .act,
  .scene--approach .act.act--reverse {
    grid-template-rows: auto 8.5rem auto;
    gap: 0.85rem 0.8rem;
    padding: clamp(1.15rem, 1.5vw, 1.55rem);
    border-color: var(--line);
  }

  .scene--approach .act__number { font-size: clamp(2.1rem, 2.5vw, 2.8rem); }

  .scene--approach .act__media,
  .scene--approach .act.act--reverse .act__media { height: 8.5rem; }

  .scene--approach .act__copy h3 {
    margin: 0.45rem 0 0.55rem;
    font-size: clamp(1.8rem, 2.2vw, 2.45rem);
  }

  .scene--approach .act__copy > p:not(.eyebrow) { font-size: 0.72rem; line-height: 1.45; }
  .scene--approach .act__copy ul { margin-top: 0.75rem; border-color: var(--line); }
  .scene--approach .act__copy li { padding: 0.42rem 0; font-size: 0.59rem; border-color: var(--line); }

  .scene--visualisation {
    grid-template-columns: minmax(15rem, 0.56fr) minmax(0, 1.44fr);
    gap: clamp(2.5rem, 5vw, 6rem);
    padding: clamp(3.75rem, 4.8vw, 5rem) var(--gutter);
  }

  .visualisation-copy h2 {
    margin: 1rem 0 1.25rem;
    font-size: clamp(2.7rem, 4vw, 4.6rem);
  }

  .visualisation-copy > p:last-child { font-size: 0.82rem; line-height: 1.55; }
  .scene--visualisation .compare--study { max-height: 27rem; aspect-ratio: 16 / 8.8; }

  .scene--projects { padding: clamp(3.75rem, 4.8vw, 5rem) var(--gutter); }

  .projects-heading {
    grid-template-columns: minmax(8rem, 0.4fr) minmax(20rem, 1fr) minmax(15rem, 0.55fr);
    gap: 1.5rem clamp(2rem, 3.5vw, 4rem);
    margin-bottom: clamp(1.75rem, 2.4vw, 2.5rem);
  }

  .projects-heading h2 { font-size: clamp(2.8rem, 4vw, 4.7rem); }
  .projects-heading > p { font-size: 0.8rem; line-height: 1.55; }

  .featured-project {
    grid-template-columns: minmax(0, 1.55fr) minmax(17rem, 0.6fr);
    height: clamp(23rem, 30vw, 27rem);
    gap: clamp(1rem, 1.8vw, 2rem);
  }

  .featured-project__meta { padding: 0.75rem 0; }
  .featured-project__meta h3 { margin-bottom: 0.9rem; font-size: clamp(2rem, 2.8vw, 3.1rem); }
  .featured-project__detail img { transform: scale(1.18); }
  .scene--projects .section-link { margin-top: 1rem; }

  .scene--commitments { padding: clamp(3.5rem, 4.4vw, 4.5rem) var(--gutter); }

  .commitments-heading {
    grid-template-columns: 0.4fr 1.6fr;
    margin-bottom: clamp(1.75rem, 2.4vw, 2.5rem);
  }

  .commitments-heading h2 { font-size: clamp(2.8rem, 4vw, 4.6rem); }

  .commitments li {
    min-height: clamp(4.8rem, 6vw, 6rem);
    padding: 0.9rem 1.2rem;
  }

  .commitments h3 { font-size: clamp(1.45rem, 2vw, 2.25rem); }
  .service-links { margin-top: 1.75rem; }
  .service-links a { padding: 0.58rem 0.78rem; font-size: 0.58rem; }

  .scene--contact {
    min-height: clamp(30rem, 58svh, 36rem);
    padding: clamp(4.75rem, 7vh, 6rem) var(--gutter) clamp(3.5rem, 5vh, 4.5rem);
  }

  .contact-copy { max-width: 58rem; }
  .contact-copy h2 { margin: 0.9rem 0 1.1rem; font-size: clamp(3rem, 4.8vw, 5.6rem); }
  .contact-copy > p:not(.eyebrow) { margin-bottom: 1.5rem; font-size: 0.95rem; }
  .scene-index--contact { top: 4.75rem; }
  .contact-details { bottom: 2rem; }

  .seo-answers { padding-top: 3.75rem; padding-bottom: 3.75rem; }
  .site-footer { padding-top: 4rem; }
}

@media (max-width: 800px) {
  .site-header { min-height: 4.25rem; }

  .scene--hero {
    grid-template-rows: auto clamp(16.5rem, 65vw, 20rem);
    padding-top: 4.25rem;
  }

  .hero-copy { padding: 2.3rem var(--gutter) 2.35rem; }

  .hero-copy h1 {
    margin: 0.75rem 0 1rem;
    font-size: clamp(3rem, 14vw, 4.35rem);
    line-height: 0.79;
  }

  .hero-lead { margin-bottom: 1.3rem; font-size: 0.82rem; line-height: 1.5; }
  .hero-copy .button { min-width: min(16rem, 100%); padding: 0.88rem 1rem; font-size: 0.59rem; }
  .hero-shade { height: clamp(16.5rem, 65vw, 20rem); }

  .scene--transformation {
    gap: 1.5rem;
    padding: 3.25rem var(--gutter);
  }

  .transformation-kicker { margin-top: 0.65rem; }
  .transformation-copy h2 { margin-top: 0.55rem; font-size: clamp(2.45rem, 10vw, 3.4rem); }
  .transformation-copy > p:not(.eyebrow):not(.transformation-kicker) { font-size: 0.82rem; }
  .scene--transformation .compare { width: 100%; aspect-ratio: 5 / 5.7; }
  .transformation-note { padding: 1rem 0; }
  .transformation-note p { font-size: 1.55rem; }

  .scene--approach { padding-top: 3.75rem; padding-bottom: 3.75rem; }
  .approach-intro { margin-bottom: 2rem; }
  .approach-intro h2 { font-size: clamp(2.8rem, 11.5vw, 4rem); }
  .approach-intro > p:last-child { font-size: 0.82rem; line-height: 1.5; }

  .scene--approach .acts { border-color: var(--line); }

  .scene--approach .act,
  .scene--approach .act.act--reverse {
    grid-template-columns: 2.6rem minmax(0, 1fr);
    gap: 0.8rem 0.85rem;
    padding: 1.35rem 0 1.65rem;
    border-color: var(--line);
  }

  .scene--approach .act__number { font-size: 2.5rem; }

  .scene--approach .act__media,
  .scene--approach .act.act--reverse .act__media {
    height: clamp(8rem, 36vw, 11rem);
  }

  .scene--approach .act__copy h3 { margin: 0.45rem 0 0.65rem; font-size: clamp(2rem, 8.5vw, 3rem); }
  .scene--approach .act__copy > p:not(.eyebrow) { font-size: 0.78rem; line-height: 1.45; }
  .scene--approach .act__copy ul { margin-top: 0.8rem; border-color: var(--line); }
  .scene--approach .act__copy li { padding: 0.4rem 0; font-size: 0.6rem; border-color: var(--line); }

  .scene--visualisation { padding-top: 3.75rem; padding-bottom: 3.75rem; }
  .visualisation-copy h2 { margin: 0.9rem 0 1rem; font-size: clamp(2.8rem, 11.5vw, 4rem); }
  .scene--visualisation .compare--study { aspect-ratio: 16 / 11; }

  .scene--projects { padding-top: 3.75rem; padding-bottom: 3.75rem; }
  .projects-heading { margin-bottom: 2rem; }
  .featured-project__main { min-height: clamp(19rem, 86vw, 26rem); }
  .featured-project__meta { padding: 1.1rem 0 1.5rem; }
  .featured-project__detail { min-height: clamp(9rem, 42vw, 14rem); }

  .scene--commitments { padding-top: 3.75rem; padding-bottom: 3.75rem; }
  .commitments-heading { margin-bottom: 2rem; }
  .commitments li { min-height: 4.8rem; }
  .service-links { margin-top: 1.75rem; }

  .scene--contact {
    min-height: clamp(34rem, 72svh, 40rem);
    padding-bottom: 8.5rem;
  }

  .seo-answers { padding-top: 3.75rem; padding-bottom: 3.75rem; }
  .site-footer { padding-top: 3.75rem; }
}

@media (min-width: 600px) and (max-width: 800px) {
  .scene--transformation .compare { aspect-ratio: 16 / 9.5; }
}

@media (max-width: 480px) {
  .hero-copy { padding-top: 2.15rem; padding-bottom: 2.2rem; }
  .hero-copy h1 { font-size: clamp(2.95rem, 13.6vw, 3.8rem); }
  .scene--transformation { padding-top: 3rem; padding-bottom: 3rem; }
  .transformation-copy h2 { font-size: clamp(2.35rem, 10.5vw, 3.15rem); }
  .scene--approach .act__copy ul { grid-template-columns: 1fr 1fr; }
  .contact-copy h2 { font-size: clamp(2.8rem, 12.5vw, 3.8rem); }
}