.approach-page {
  --agency-rule: #584838;
  --agency-paper: #f1e9dc;
  --agency-paper-ink: #261d15;
  --agency-paper-muted: #594d42;
  --agency-paper-rule: #c9b69d;
}

.agency-hero {
  padding-block: clamp(3.7rem, 7.5vw, 8.4rem) clamp(4.5rem, 8vw, 8.4rem);
  background:
    radial-gradient(ellipse at 83% 100%, #302219 0%, transparent 53%),
    var(--ink);
}

.agency-edition {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--agency-rule);
  padding-bottom: 1rem;
  margin-bottom: clamp(1.6rem, 4vw, 4rem);
}

.agency-edition > p:last-child {
  color: var(--muted);
  font-size: .67rem;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.agency-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, .41fr);
  align-items: end;
  gap: clamp(2rem, 8vw, 8rem);
}

.agency-hero h1 {
  font-family: var(--display);
  font-size: clamp(4.6rem, 9.9vw, 10.3rem);
  line-height: .84;
  margin: 0 0 clamp(1.6rem, 3.5vw, 3.1rem);
}

.agency-hero-intro,
.agency-next-inner > div:last-child > p {
  max-width: 34rem;
  color: var(--muted);
  font-size: clamp(.97rem, 1.5vw, 1.13rem);
}

.agency-index .eyebrow { margin-bottom: .7rem; }

.agency-index ol,
.agency-chapters {
  list-style: none;
  margin: 0;
  padding: 0;
}

.agency-index li { border-top: 1px solid var(--agency-rule); }

.agency-index li:last-child { border-bottom: 1px solid var(--agency-rule); }

.agency-index a {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr) 1rem;
  align-items: center;
  min-height: 3rem;
  gap: .5rem;
  text-decoration: none;
  font-size: .94rem;
  transition: color .2s ease, padding-inline .2s ease;
}

.agency-index a:hover {
  padding-inline: .35rem;
  color: var(--gold);
}

.agency-index a span { color: var(--gold); }

.agency-index a span:first-child {
  font-size: .69rem;
  font-variant-numeric: tabular-nums;
}

.agency-method {
  padding-block: clamp(4.25rem, 8vw, 8rem);
  background: var(--agency-paper);
  color: var(--agency-paper-ink);
}

.agency-method .eyebrow,
.agency-method h2 em { color: #785121; }

.agency-method-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, .38fr);
  align-items: end;
  gap: clamp(1rem, 4vw, 3.5rem);
  padding-bottom: clamp(2rem, 4vw, 3.7rem);
}

.agency-method h2,
.agency-next h2 {
  font-family: var(--display);
  font-size: clamp(3.25rem, 6.8vw, 6.8rem);
  line-height: .92;
  margin-top: .85rem;
  text-wrap: balance;
}

.agency-method-head > p {
  max-width: 26ch;
  color: var(--agency-paper-muted);
}

.agency-chapter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  align-items: center;
  column-gap: clamp(2rem, 8vw, 8rem);
  border-top: 1px solid var(--agency-paper-rule);
  padding-block: clamp(1.9rem, 4.6vw, 4rem);
  scroll-margin-top: 6rem;
}

.agency-chapter:last-child {
  border-bottom: 1px solid var(--agency-paper-rule);
}

.agency-chapter:nth-child(even) .chapter-plate { grid-row: 1; grid-column: 1; }
.agency-chapter:nth-child(even) .chapter-copy { grid-row: 1; grid-column: 2; }

.chapter-copy h3 {
  font-family: var(--display);
  font-size: clamp(2.6rem, 4.6vw, 4.55rem);
  font-weight: 400;
  line-height: .97;
  letter-spacing: -.035em;
  margin: .7rem 0 1rem;
  max-width: 14ch;
}

.chapter-copy > p:not(.eyebrow) {
  max-width: 47ch;
  color: var(--agency-paper-muted);
}

.chapter-copy .chapter-note {
  display: grid;
  grid-template-columns: minmax(6rem, .32fr) 1fr;
  gap: .75rem;
  border-top: 1px solid var(--agency-paper-rule);
  margin-top: 1.35rem;
  padding-top: .85rem;
  font-size: .83rem;
}

.chapter-note strong { color: var(--agency-paper-ink); }

.chapter-plate {
  position: relative;
  aspect-ratio: 1.62;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #6d5540;
  background: radial-gradient(ellipse at center, #433022, #16120f 78%);
  color: #e8c38a;
}

.chapter-plate > span {
  position: absolute;
  z-index: 1;
  top: .85rem;
  left: .9rem;
  font-size: clamp(.56rem, .85vw, .7rem);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.chapter-plate svg {
  width: 86%;
  height: 81%;
  margin-top: 8%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
}

.chapter-plate .plate-guide { opacity: .32; stroke-dasharray: 3 5; }
.chapter-plate .plate-dim { opacity: .6; }
.chapter-plate .plate-point { fill: currentColor; stroke: none; }
.chapter-plate .plate-swatch { fill: #8f6640; stroke: none; }
.chapter-plate .plate-phone { fill: #241a13; }

.chapter-plate .plate-letter {
  font: 400 75px var(--display);
  letter-spacing: -.075em;
  fill: currentColor;
  stroke: none;
}

.plate-conception { background: radial-gradient(ellipse at 42% 54%, #624632, #231910 82%); }
.plate-developpement { background: radial-gradient(ellipse at 50% 45%, #42392f, #14100d 80%); }
.plate-lancement { background: radial-gradient(ellipse at 64% 40%, #573c27, #1b130d 82%); }

.agency-next {
  padding-block: clamp(4.5rem, 8vw, 8.7rem);
  background: radial-gradient(ellipse at 6% 100%, #3b291c, var(--ink) 66%);
}

.agency-next-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .57fr);
  align-items: end;
  gap: clamp(1.5rem, 6vw, 6rem);
}

.agency-next h2 { max-width: 12ch; }

@media (max-width: 760px) {
  .agency-hero-grid,
  .agency-method-head,
  .agency-chapter,
  .agency-next-inner { grid-template-columns: 1fr; }

  .agency-hero h1 { font-size: clamp(3.75rem, 14vw, 6.25rem); }
  .agency-method-head > p { max-width: 37ch; }
  .agency-chapter { gap: 1.35rem; scroll-margin-top: 7rem; }

  .agency-chapter:nth-child(even) .chapter-copy,
  .agency-chapter:nth-child(even) .chapter-plate {
    grid-row: auto;
    grid-column: auto;
  }
}

@media (max-width: 370px) {
  .agency-edition > p:last-child { letter-spacing: .06em; text-align: right; }
  .chapter-copy .chapter-note { grid-template-columns: minmax(4rem, .32fr) 1fr; }
}