/* ═══════════════════════════════════════════════════════════
   Wedding in Normandy — Stylesheet
   ═══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Color tokens — named for design intent ── */
  --color-chalk:        #EDE8DD;
  --color-linen:        #F8F5EE;
  --color-channel-grey: #363E42;
  --color-oak-ink:      #2A2420;
  --color-aged-brass:   #A47B3F;
  --color-sage:         #6E7A62;
  --color-agence-pink:  #9C0859; /* Agence Chance brand mark — used sparingly, only at points that touch the agency itself */

  /* semantic aliases — implementation reads these, not raw palette names */
  --surface-bg:       var(--color-chalk);
  --surface-bg-alt:   var(--color-linen);
  --surface-bg-deep:  var(--color-channel-grey);
  --text-primary:     var(--color-oak-ink);
  --text-on-dark:     var(--color-chalk);
  --text-muted:       color-mix(in srgb, var(--color-oak-ink) 62%, transparent);
  --text-muted-dark:  color-mix(in srgb, var(--color-chalk) 62%, transparent);
  --accent:           var(--color-aged-brass);
  --accent-secondary: var(--color-sage);
  --accent-agence:    var(--color-agence-pink);
  /* the raw brand pink fails contrast on the dark footer (~1.35:1) — lighten
     it toward white until it clears WCAG AA (~5.5:1) while staying legibly pink */
  --accent-agence-on-dark: color-mix(in srgb, var(--color-agence-pink) 35%, white 65%);
  --border-hairline:  color-mix(in srgb, var(--color-oak-ink) 14%, transparent);
  --border-hairline-dark: color-mix(in srgb, var(--color-chalk) 18%, transparent);
  --focus-ring:       var(--color-aged-brass);

  /* ── Type families ── */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;

  /* ── Type scale ── */
  --step-eyebrow: 0.75rem;
  --step-small:   0.875rem;
  --step-body:    1rem;
  --step-lead:    1.125rem;
  --step-h3:      clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --step-h2:      clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  --step-hero:    clamp(2.5rem, 1.8rem + 3.5vw, 5rem);
  --step-quote:   clamp(1.375rem, 1.1rem + 1.2vw, 2rem);

  --leading-tight:  1.12;
  --leading-snug:   1.3;
  --leading-normal: 1.65;

  /* ── Spacing scale ── */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 5rem;
  --space-7: 8rem;

  /* ── Layout ── */
  --max-content: 1200px;
  --gutter: clamp(1.25rem, 4vw, 4rem);

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.3s;
  --dur-base: 0.6s;
  --dur-slow: 0.85s;
  --dur-chateau: 1.6s;
  --stagger-step: 0.12s;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.001s;
    --dur-base: 0.001s;
    --dur-slow: 0.001s;
    --dur-chateau: 0.001s;
    --stagger-step: 0s;
  }
}

/* ─── BASE ─────────────────────────────────────────────────── */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  background: var(--surface-bg);
  color: var(--text-primary);
  line-height: var(--leading-normal);
  font-size: var(--step-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); font-weight: 500; }

p { max-width: 62ch; }

a {
  color: inherit;
  text-decoration: none;
}

img, svg { display: block; max-width: 100%; }

button {
  font-family: var(--font-body);
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

input, select, textarea {
  font-family: var(--font-body);
  font-size: var(--step-body);
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* ─── UTILITIES ────────────────────────────────────────────── */

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--step-quote);
  line-height: var(--leading-snug);
  color: var(--text-primary);
  border-left: 2px solid var(--accent);
  padding-left: var(--space-3);
  margin: var(--space-4) 0;
  max-width: 34ch;
}

.section-head {
  max-width: 640px;
  margin: 0 0 var(--space-5);
}

.section-head h2 {
  margin-top: var(--space-1);
}

.enquiry__intro {
  margin-top: var(--space-2);
  color: var(--text-muted-dark);
  font-size: var(--step-lead);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--step-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.9em 1.8em;
  border: 1px solid currentColor;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.btn--enquiry {
  color: var(--color-chalk);
  background: var(--accent);
  border-color: var(--accent);
  border-radius: 999px;
}

.btn--enquiry:hover {
  background: var(--color-oak-ink);
  border-color: var(--color-oak-ink);
  color: var(--color-chalk);
}

.btn--whatsapp {
  color: var(--color-chalk);
  background: #25D366;
  border-color: #25D366;
}

.btn--whatsapp:hover {
  background: #1EBE5A;
  border-color: #1EBE5A;
}

.btn__arrow {
  transition: transform var(--dur-fast) var(--ease-out);
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

/* section container rhythm, applied per-section below rather than via a
   generic .container class, since each section's background differs */

/* ─── CHÂTEAU MOTIF ────────────────────────────────────────── */

.chateau-mark {
  width: 100%;
  height: auto;
  overflow: visible;
}

.chateau-mark path,
.chateau-mark use {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.chateau-mark--animated {
  color: var(--color-chalk);
  opacity: 0.9;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}

.chateau-mark--static {
  color: var(--accent);
  opacity: 0.3;
}

.motif-divider {
  max-width: 280px;
  margin: 0 auto;
  padding: var(--space-2) var(--gutter);
}

.chateau-mark--footer {
  max-width: 220px;
  margin: 0 auto var(--space-3);
}

/* ─── HEADER / NAV ─────────────────────────────────────────── */

.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  opacity: 0;
  color: var(--text-on-dark);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  transition: opacity var(--dur-base) var(--ease-out);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.22) 65%, transparent 100%);
}

body.is-loaded .site-header {
  opacity: 1;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--gutter);
  flex-wrap: wrap;
}

.nav__logotype {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

.nav__toggle {
  font-size: var(--step-small);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--space-1);
}

.nav__links {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  width: 100%;
  padding-top: var(--space-3);
  font-size: var(--step-small);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.nav__links.is-open {
  display: flex;
  background: var(--surface-bg-alt);
  color: var(--text-primary);
  padding: var(--space-3) var(--gutter);
  margin: 0 calc(-1 * var(--gutter));
  width: calc(100% + var(--gutter) * 2);
}

.nav__links a {
  padding: var(--space-1) 0;
}

.nav__links .nav__ghost-cta {
  display: inline-block;
  color: var(--color-chalk);
  background: var(--accent);
  padding: 0.7em 1.6em;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.nav__links .nav__ghost-cta:hover {
  background: var(--color-oak-ink);
  color: var(--color-chalk);
}

@media (min-width: 860px) {
  .nav__toggle { display: none; }

  .nav__links {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    width: auto;
    padding-top: 0;
    background: none !important;
    margin: 0 !important;
    gap: var(--space-4);
  }
}

/* ─── HERO ─────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  transform: scale(1.12);
  will-change: transform;
}

/* Lighter than a typical hero wash, on purpose — the château should read
   clearly, not sit under a dark veil. Contrast for the text is carried
   mostly by the text-shadow on .hero__content plus a modest pool of
   darkening right behind the content block, instead of darkening the
   whole photo. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      70% 90% at 50% 100%,
      color-mix(in srgb, var(--color-oak-ink) 70%, transparent) 0%,
      color-mix(in srgb, var(--color-oak-ink) 40%, transparent) 40%,
      transparent 72%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-channel-grey) 26%, transparent) 0%,
      transparent 32%,
      color-mix(in srgb, var(--color-oak-ink) 16%, transparent) 60%,
      color-mix(in srgb, var(--color-oak-ink) 55%, transparent) 100%
    );
}


.hero__content {
  position: relative;
  z-index: 2;
  padding: 0 var(--gutter) var(--space-7);
  max-width: 720px;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65), 0 1px 3px rgba(0, 0, 0, 0.8);
}

.hero__content .eyebrow {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  padding: 0.5em 1.1em;
  color: var(--text-on-dark);
  background: rgba(0, 0, 0, 0.32);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-shadow: none;
}

.hero__headline {
  font-size: var(--step-hero);
  color: var(--text-on-dark);
  margin-top: var(--space-2);
  margin-left: auto;
  margin-right: auto;
  max-width: 16ch;
}

.hero__subline {
  font-size: var(--step-lead);
  color: color-mix(in srgb, var(--color-chalk) 92%, transparent);
  margin-top: var(--space-3);
  margin-left: auto;
  margin-right: auto;
  max-width: 42ch;
}

/* On narrow viewports the crop is tall and tight — bias toward the upper
   part of the facade instead of the geometric middle, and swap the
   corner-weighted scrim for a stronger, even wash full-bleed dark enough
   to hold text over any part of the frame. */
@media (max-width: 700px) {
  .hero__image {
    object-position: center 30%;
  }

  .hero__scrim {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-oak-ink) 28%, transparent) 0%,
      color-mix(in srgb, var(--color-oak-ink) 20%, transparent) 22%,
      color-mix(in srgb, var(--color-oak-ink) 34%, transparent) 45%,
      color-mix(in srgb, var(--color-oak-ink) 66%, transparent) 100%
    );
  }

  .hero__content {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 3px 14px rgba(0, 0, 0, 0.8);
  }

  .hero__subline {
    color: var(--text-on-dark);
  }
}

[data-load-item] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger-step) + 0.15s);
}

body.is-loaded [data-load-item] {
  opacity: 1;
  transform: none;
}

.hero__scroll-cue {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.hero__scroll-cue span {
  display: block;
  width: 1px;
  height: 48px;
  background: var(--text-on-dark);
  opacity: 0.5;
  animation: scroll-cue 2.4s var(--ease-out) infinite;
  transform-origin: top;
}

@keyframes scroll-cue {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 0.4; }
  100% { transform: scaleY(0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-cue span { animation: none; transform: scaleY(1); opacity: 0.25; }
}

/* ─── SCROLL REVEAL (shared) ───────────────────────────────── */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

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

[data-reveal-child] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger-step));
}

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

/* ─── ICONS ────────────────────────────────────────────────── */

.icon {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--accent);
  flex-shrink: 0;
}

/* ─── FEATURE / CHIP CARDS (shared) ───────────────────────────
   .feature-card: icon + title + description — used where each item
   carries its own explanatory sentence (Why Normandy reasons).
   .chip-card: icon + single line — used for terser, denser lists
   (Bonnemare highlights, the planning checklist). Both share the
   same hover lift so the site reads as one system. ──────────── */

.feature-grid,
.chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-3);
}

.feature-card,
.chip-card {
  padding: var(--space-4);
  border: 1px solid var(--border-hairline);
  background: var(--surface-bg-alt);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.feature-card:hover,
.chip-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 20px 32px -22px rgba(0, 0, 0, 0.35);
}

.feature-card .icon {
  margin-bottom: var(--space-2);
}

.feature-card h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-lead);
}

.feature-card p {
  margin-top: 0.35rem;
  font-size: var(--step-small);
  color: var(--text-muted);
}

.chip-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.chip-card .icon {
  width: 22px;
  height: 22px;
}

.chip-card p {
  font-size: var(--step-small);
  font-weight: 500;
}

/* ─── WHY NORMANDY ─────────────────────────────────────────── */

.why-normandy {
  padding: var(--space-7) var(--gutter);
  max-width: var(--max-content);
  margin: 0 auto;
}

.why-normandy__intro {
  display: grid;
  gap: var(--space-5);
  grid-template-areas: "text" "stats" "image";
}

.why-normandy__text {
  grid-area: text;
}

/* Nested inside the max-width intro grid, but still breaks out full-bleed
   like the standalone counters band used to — negative margins pull it
   back out to the viewport edge regardless of the ancestor's max-width. */
.why-normandy__stats {
  grid-area: stats;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.why-normandy__text h2 {
  margin-top: var(--space-1);
  font-size: var(--step-h3);
}

.why-normandy__text > p {
  margin-top: var(--space-3);
  color: var(--text-muted);
  max-width: none;
}

.why-normandy__cta {
  margin-top: var(--space-4);
}

/* The image keeps its own fixed aspect ratio and never gets crushed to match
   the text column's length — at desktop widths its grid cell is stretched to
   the row height (see .why-normandy__intro below), and the image itself is
   sticky within that cell, so it travels with the scroll instead of leaving
   dead space, without ever being distorted. */
.why-normandy__image {
  grid-area: image;
}

.why-normandy__image img {
  position: sticky;
  top: var(--space-4);
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.why-normandy__reasons {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-hairline);
}

.why-normandy__reasons h3 {
  max-width: 40ch;
}

.why-normandy__reasons .feature-grid {
  margin-top: var(--space-5);
}

@media (min-width: 860px) {
  .why-normandy__intro {
    grid-template-columns: 1.1fr 0.9fr;
    grid-template-areas: "text image" "stats stats";
    align-items: stretch;
  }
}

/* ─── STATS ────────────────────────────────────────────────── */

.stats {
  background: var(--surface-bg-deep);
  color: var(--text-on-dark);
  padding: var(--space-6) var(--gutter);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: var(--max-content);
  margin: 0 auto;
}

.stat {
  padding: var(--space-3) var(--space-3) var(--space-4);
  text-align: center;
  border-top: 1px solid var(--border-hairline-dark);
}

.stat:nth-child(-n+2) {
  border-top: none;
}

.stat:nth-child(odd) {
  border-right: 1px solid var(--border-hairline-dark);
}

.stat__number {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1;
  color: var(--accent);
}

.stat__number sup {
  font-size: 0.4em;
  top: -0.5em;
}

.stat__label {
  margin-top: var(--space-2);
  font-size: var(--step-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted-dark);
  max-width: 20ch;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 780px) {
  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .stat {
    padding: var(--space-2) var(--space-4);
    border-top: none;
  }
  .stat:nth-child(-n+2) {
    border-top: none;
  }
  .stat:not(:last-child) {
    border-right: 1px solid var(--border-hairline-dark);
  }
  .stat:nth-child(odd) {
    border-right: 1px solid var(--border-hairline-dark);
  }
}

/* ─── VIDEO ────────────────────────────────────────────────── */

.video {
  padding: var(--space-6) var(--gutter);
  max-width: var(--max-content);
  margin: 0 auto;
}

.video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-oak-ink);
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.4);
}

.video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ─── CHÂTEAU WEDDING EXPERIENCE ───────────────────────────── */

.experience {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-7) var(--gutter);
  max-width: var(--max-content);
  margin: 0 auto;
}

.experience__text h2 {
  margin-top: var(--space-1);
}

.experience__text h3 {
  margin-top: var(--space-3);
  font-weight: 400;
}

.experience__text > p {
  margin-top: var(--space-3);
  color: var(--text-muted);
  max-width: none;
}

.experience__days {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-hairline);
}

.experience__day .icon {
  margin-bottom: var(--space-2);
}

.experience__day p:last-child {
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-size: var(--step-lead);
}

.experience__text .pull-quote {
  max-width: none;
}

.experience__image img {
  position: sticky;
  top: var(--space-4);
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

@media (min-width: 860px) {
  .experience {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: stretch;
  }
}

/* ─── VENUES ───────────────────────────────────────────────── */

.venues {
  /* Bottom padding kept short on purpose — .gallery right after it already
     contributes a full --space-7 of its own top padding, and both sections
     share the same background, so the two paddings were stacking into one
     conspicuous blank gap instead of reading as normal section spacing. */
  padding: var(--space-6) var(--gutter) var(--space-5);
  max-width: var(--max-content);
  margin: 0 auto;
}

.venues__head {
  max-width: none;
}

.venues__head-title h2 {
  margin-top: var(--space-1);
}

.venues__lead {
  margin-top: var(--space-3);
  color: var(--text-muted);
  max-width: 62ch;
}

@media (min-width: 780px) {
  .venues__head {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.3fr);
    column-gap: var(--space-6);
    align-items: end;
  }
  .venues__lead {
    margin-top: 0;
  }
}

.venues__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.venue__image {
  min-height: 260px;
  overflow: hidden;
  position: relative;
}

.venue__image img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  transition: transform var(--dur-base) var(--ease-out);
}

.venue:hover .venue__image img {
  transform: scale(1.03);
}

/* ─── Venue photo carousel ────────────────────────────────── */

.venue__carousel {
  min-height: 320px;
}

.venue__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  pointer-events: none;
}

.venue__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.venue__slide img {
  min-height: 320px;
}

.venue__carousel-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--space-2);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.venue__carousel-prev,
.venue__carousel-next {
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.4rem 0.7rem;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 999px;
  transition: background var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.venue__carousel-prev:hover,
.venue__carousel-next:hover {
  background: rgba(0, 0, 0, 0.48);
}

.venue__carousel-dots {
  display: flex;
  gap: 0.5rem;
}

.venue__carousel-dots button {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.venue__carousel-dots button.is-active {
  background: #fff;
  transform: scale(1.25);
}

.venue__caption {
  padding: var(--space-3) 0.25rem;
  transition: transform var(--dur-base) var(--ease-out);
}

.venue:hover .venue__caption {
  transform: translateY(-2px);
}

.venue__tag {
  font-size: var(--step-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-secondary);
}

.venue__caption h3 {
  margin-top: var(--space-1);
}

.venue__region {
  font-size: var(--step-small);
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.venue__desc {
  margin-top: var(--space-2);
  font-size: var(--step-small);
  color: var(--text-muted);
}

@media (min-width: 780px) {
  .venues__grid {
    grid-template-columns: repeat(12, 1fr);
    align-items: start;
  }
  .venue--feature {
    grid-column: 1 / 13;
    display: flex;
    flex-direction: column;
  }
  .venue--feature .venue__image,
  .venue--feature .venue__image img,
  .venue--feature .venue__slide img {
    min-height: 520px;
  }
}

.venues__details {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-hairline);
}

.venues__details h3 {
  margin-bottom: var(--space-4);
}

.venues__note {
  margin-top: var(--space-4);
  color: var(--text-muted);
  max-width: 62ch;
}

.venues__cta {
  margin-top: var(--space-4);
}

/* ─── GALLERY ──────────────────────────────────────────────── */

.gallery {
  padding: var(--space-7) 0;
  overflow: hidden;
}

.gallery__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  max-width: var(--max-content);
  margin: 0 auto var(--space-5);
  padding: 0 var(--gutter);
}

.gallery__controls {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.gallery__prev,
.gallery__next {
  font-size: 1.1rem;
  color: var(--accent);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-hairline);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.gallery__prev:hover,
.gallery__next:hover {
  background: color-mix(in srgb, var(--color-aged-brass) 12%, transparent);
}

.gallery__track {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 0 var(--gutter) var(--space-4);
  cursor: grab;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  user-select: none;
}

.gallery__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.gallery__track::-webkit-scrollbar {
  display: none;
}

.gallery__item {
  position: relative;
  flex: 0 0 auto;
  width: min(80vw, 460px);
  scroll-snap-align: center;
  overflow: hidden;
}

.gallery__item img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
  pointer-events: none;
}

.gallery__item:hover img {
  transform: scale(1.03);
}

.gallery__item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-5) var(--space-3) var(--space-3);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-oak-ink) 82%, transparent));
  color: var(--text-on-dark);
  font-size: var(--step-small);
  letter-spacing: 0.03em;
}

.gallery__couple {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-lead);
}

.gallery__link {
  display: inline-block;
  margin-top: 0.5rem;
  color: inherit;
  font-size: var(--step-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.gallery__link:hover {
  opacity: 0.7;
}

.gallery__progress {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.gallery__bar {
  display: block;
  height: 1px;
  background: var(--border-hairline);
}

.gallery__bar-fill {
  display: block;
  height: 100%;
  width: 25%;
  background: var(--accent);
  transition: width 0.25s var(--ease-out);
}

/* ─── PLANNING ─────────────────────────────────────────────── */

.planning {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-7) var(--gutter);
  max-width: var(--max-content);
  margin: 0 auto;
}

.planning__image img {
  position: sticky;
  top: var(--space-4);
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.planning__brand-logo {
  width: 108px;
  height: auto;
  margin-bottom: var(--space-3);
}

/* The one spot on the page where the Agence Chance pink stands in for the
   site's usual brass eyebrow — ties this section back to the parent agency
   without touching the accent color anywhere else. */
.eyebrow--agence {
  color: var(--accent-agence);
}

.planning__text h2 {
  margin-top: var(--space-1);
}

.planning__text > p {
  margin-top: var(--space-3);
  color: var(--text-muted);
}

.planning__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: var(--space-3);
  font-weight: 600;
  color: var(--accent-agence);
  transition: opacity var(--dur-fast) var(--ease-out);
}

.planning__link span {
  border-bottom: 1px solid currentColor;
}

.planning__link:hover {
  opacity: 0.72;
}

.planning__link-mark {
  width: 20px;
  height: auto;
}

.planning__subhead {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-hairline);
  font-size: var(--step-h3);
}

.planning__text .chip-grid {
  margin-top: var(--space-4);
}

@media (min-width: 860px) {
  .planning {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: stretch;
  }
}

/* ─── TEAM PHOTO ───────────────────────────────────────────── */

.team-photo {
  padding: 0 var(--gutter) var(--space-7);
  max-width: var(--max-content);
  margin: 0 auto;
}

.team-photo__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.35);
}

.team-photo__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── PROCESS ──────────────────────────────────────────────── */

.process {
  padding: var(--space-7) var(--gutter);
  max-width: var(--max-content);
  margin: 0 auto;
  background: var(--surface-bg-alt);
}

.process__timeline {
  position: relative;
  --process-col-half: 1rem;
}

/* A single continuous spine spans from the first dot to the last —
   its exact top/height are measured from the real dot positions by
   initProcessTimeline() in script.js, since item heights vary with
   text wrapping and can't be predicted reliably in CSS alone. The
   static spine is the hairline track; the fill draws over it in
   sync with each item's scroll reveal. */
.process__spine {
  position: absolute;
  left: var(--process-col-half, 1rem);
  width: 1px;
  background: var(--border-hairline);
  transform: translateX(-50%);
}

.process__spine-fill {
  position: absolute;
  left: var(--process-col-half, 1rem);
  width: 2px;
  height: 0;
  background: var(--accent);
  transform: translateX(-50%);
  transition: height 0.8s var(--ease-out);
}

.process__list {
  list-style: none;
}

.process__list li {
  position: relative;
  display: grid;
  grid-template-columns: 2rem 1fr;
  column-gap: var(--space-3);
  padding: var(--space-5) 0;
}

.process__list li:first-child {
  padding-top: var(--space-2);
}

.process__list li:last-child {
  padding-bottom: var(--space-2);
}

.process__marker {
  position: relative;
}

.process__dot {
  position: absolute;
  top: 1.25rem;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out) 0.15s, transform 0.5s var(--ease-out) 0.15s;
}

.process__list li.is-visible .process__dot {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.process__content {
  position: relative;
  overflow: hidden;
}

.process__ghost {
  position: absolute;
  top: 50%;
  right: -0.25rem;
  transform: translateY(-54%);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(4.5rem, 11vw, 9rem);
  line-height: 1;
  color: var(--accent);
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

.process__content h3,
.process__content p {
  position: relative;
  z-index: 1;
}

.process__content h3 {
  margin-bottom: var(--space-1);
  padding-top: 0.15rem;
}

.process__content p {
  color: var(--text-muted);
  max-width: 46ch;
}

@media (min-width: 700px) {
  .process__timeline {
    --process-col-half: 1.25rem;
  }
  .process__list li {
    grid-template-columns: 2.5rem 1fr;
    column-gap: var(--space-5);
  }
  .process__content {
    display: grid;
    grid-template-columns: minmax(0, 15rem) 1fr;
    column-gap: var(--space-5);
    align-items: baseline;
  }
  .process__content h3 { margin-bottom: 0; }
  .process__ghost { font-size: clamp(5rem, 8vw, 8rem); }
}

/* ─── TESTIMONIALS ─────────────────────────────────────────── */

.testimonials {
  padding: var(--space-7) 0;
  text-align: center;
  overflow: hidden;
}

.testimonials__head {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.testimonials__head h2 {
  margin-top: var(--space-1);
}

.testimonials__intro {
  margin-top: var(--space-3);
  color: var(--text-muted);
  margin-left: auto;
  margin-right: auto;
}

.testimonials > .btn {
  margin-top: var(--space-6);
}

/* ─── GOOGLE REVIEWS (live, via Places API — see script.js) ──── */
/* Full-bleed, edge to edge — same pattern as .gallery: no outer max-width,
   the carousel track carries its own gutter padding and scrolls past the
   right edge of the viewport instead of sitting boxed-in and narrow. */

.google-reviews {
  margin-top: var(--space-6);
  text-align: left;
  display: grid;
  gap: var(--space-4);
}

.google-reviews[hidden] {
  display: none;
}

.google-reviews__summary {
  text-align: center;
  padding: 0 var(--gutter);
}

.google-reviews__badge {
  font-size: var(--step-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.google-reviews__stars {
  display: inline-flex;
  gap: 3px;
  color: var(--accent);
  margin-top: var(--space-2);
}

.google-reviews__stars .icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
  stroke: none;
}

.google-reviews__count {
  margin-top: var(--space-2);
  font-size: var(--step-small);
  color: var(--text-muted);
}

.google-reviews__count strong {
  color: var(--text-primary);
}

.google-reviews__wordmark {
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 700;
}

.google-reviews__wordmark .c1 { color: #4285F4; }
.google-reviews__wordmark .c2 { color: #EA4335; }
.google-reviews__wordmark .c3 { color: #FBBC05; }
.google-reviews__wordmark .c4 { color: #34A853; }

/* Below 780px there's no room for arrows flanking the track without
   squeezing the visible card window far narrower than the card itself —
   that's what was clipping the first review. So on small screens the
   carousel is just the track, full width, arrows hidden and native
   touch swipe takes over; the auto/1fr/auto arrow layout only kicks in
   once there's actually space for it (see the 780px media query). */
.google-reviews__carousel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.google-reviews__prev,
.google-reviews__next {
  display: none;
  font-size: 1.1rem;
  color: var(--accent);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-hairline);
  border-radius: 999px;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.google-reviews__prev:hover,
.google-reviews__next:hover {
  background: color-mix(in srgb, var(--color-aged-brass) 12%, transparent);
}

.google-reviews__track {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: var(--space-1) 0;
  /* Without this, a flex item inside a grid column defaults to
     min-width: auto — it refuses to shrink below its content's
     intrinsic width, so instead of scrolling within its own column it
     blows the whole row out past the viewport and gets hard-clipped
     by .testimonials' overflow: hidden (the cut-off card on mobile). */
  min-width: 0;
}

.google-reviews__track::-webkit-scrollbar {
  display: none;
}

/* Margin on the edge cards, not padding on the scroll container — padding
   on an overflow:auto flex container is inconsistently honored at the
   leading edge on mobile browsers, which was leaving the first/last card
   flush against the screen edge. Scoped to mobile only: at 780px+ the
   track already sits clear of the viewport edge, flanked by the arrows. */
@media (max-width: 779px) {
  .review-card:first-child {
    margin-left: var(--gutter);
  }
  .review-card:last-child {
    margin-right: var(--gutter);
  }
}

.review-card {
  position: relative;
  flex: 0 0 auto;
  width: min(78vw, 300px);
  scroll-snap-align: start;
  padding: var(--space-4);
  border: 1px solid var(--border-hairline);
  background: var(--surface-bg-alt);
  display: flex;
  flex-direction: column;
}

.review-card__google-icon {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 18px;
  height: 18px;
}

.review-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-right: 1.5rem;
}

.review-card__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  color: #fff;
}

.review-card__name {
  font-weight: 600;
  font-size: var(--step-small);
}

.review-card__time {
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.review-card__stars {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.review-card__stars-row {
  display: flex;
  gap: 1px;
  color: var(--accent);
}

.review-card__stars .icon {
  width: 13px;
  height: 13px;
  fill: currentColor;
  stroke: none;
}

.review-card__verified {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #4285F4;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.review-card__verified .icon {
  width: 9px;
  height: 9px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
}

.review-card__text {
  font-size: var(--step-small);
  color: var(--text-muted);
  max-width: none;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review-card.is-expanded .review-card__text {
  -webkit-line-clamp: unset;
  overflow: visible;
}

.review-card__more {
  align-self: flex-start;
  margin-top: var(--space-2);
  font-size: var(--step-small);
  font-weight: 600;
  color: var(--accent);
}

.review-card__more:hover {
  color: var(--accent-secondary);
}

@media (min-width: 780px) {
  .google-reviews {
    grid-template-columns: 220px 1fr;
    align-items: center;
    gap: var(--space-6);
  }
  .google-reviews__summary {
    text-align: left;
    padding: 0 0 0 var(--gutter);
  }
  .google-reviews__carousel {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--gutter) 0 0;
  }
  .google-reviews__prev,
  .google-reviews__next {
    display: inline-flex;
  }
  .google-reviews__track {
    padding: var(--space-1) 0;
  }
  .google-reviews__stars {
    margin-left: -2px;
  }
}

/* ─── ENQUIRY ──────────────────────────────────────────────── */

.enquiry {
  background: var(--surface-bg-deep);
  color: var(--text-on-dark);
  padding: var(--space-7) var(--gutter);
}

.enquiry__layout {
  max-width: var(--max-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.enquiry__intro-col h2 {
  margin-top: var(--space-1);
}

.enquiry__intro {
  margin-top: var(--space-2);
  color: var(--text-muted-dark);
  font-size: var(--step-lead);
}

.enquiry__meta {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-hairline-dark);
}

.enquiry__meta-item dt {
  font-size: var(--step-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted-dark);
}

.enquiry__meta-item dd {
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-size: var(--step-h3);
  font-weight: 400;
}

.enquiry__meta-item dd a {
  border-bottom: 1px solid var(--border-hairline-dark);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.enquiry__meta-item dd a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.btn--whatsapp {
  margin-top: var(--space-4);
}

.enquiry__card {
  position: relative;
  background: var(--surface-bg-alt);
  color: var(--text-primary);
  padding: var(--space-5) var(--gutter);
  border-top: 3px solid var(--accent);
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.enquiry__card-mark {
  position: absolute;
  right: -8%;
  bottom: -18%;
  width: 65%;
  color: var(--color-oak-ink);
  opacity: 0.05;
  pointer-events: none;
}

.enquiry__card-mark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.enquiry__form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.field label {
  font-size: var(--step-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-secondary);
}

.field__required {
  color: var(--accent);
  margin-left: 0.25em;
}

.field input,
.field select,
.field textarea {
  background: var(--surface-bg);
  border: 1px solid var(--border-hairline);
  padding: 0.85em 1em;
  color: var(--text-primary);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: color-mix(in srgb, var(--color-oak-ink) 32%, transparent);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-aged-brass) 16%, transparent);
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A47B3F' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
  padding-right: 2.5em;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-muted);
}

.field textarea {
  resize: vertical;
}

.btn--enquiry {
  align-self: flex-start;
  margin-top: var(--space-1);
}

.btn--enquiry:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Honeypot — hidden with the same clip technique used everywhere for
   screen-reader-only content (Bootstrap's/Tailwind's .sr-only), not the
   classic position:absolute;left:-9999px. That older trick is exactly
   what some password-manager/autofill extensions specifically detect and
   force back to visible, since it's also how dark patterns hide fields —
   this pattern is too widely relied on for real accessibility content
   for extensions to safely "unhide" it the same way. */
.field--honeypot {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.enquiry__success {
  text-align: center;
  padding: var(--space-5) 0;
}

.enquiry__success .icon {
  width: 40px;
  height: 40px;
  margin: 0 auto var(--space-3);
  padding: 0.6em;
  border-radius: 50%;
  background: var(--accent);
  color: var(--color-chalk);
  stroke-width: 2;
}

.enquiry__success h3 {
  font-size: var(--step-h3);
}

.enquiry__success p {
  margin-top: var(--space-2);
  color: var(--text-muted);
  margin-left: auto;
  margin-right: auto;
}

.enquiry__error {
  margin-top: var(--space-3);
  color: #B3261E;
  font-size: var(--step-small);
}

.enquiry__error a {
  text-decoration: underline;
}

@media (min-width: 700px) {
  .field-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .enquiry__layout {
    grid-template-columns: 5fr 7fr;
    align-items: start;
  }
  .enquiry__intro-col {
    position: sticky;
    top: var(--space-5);
  }
  .enquiry__card {
    padding: var(--space-6) var(--space-6);
  }
}

/* ─── FAQ ──────────────────────────────────────────────────── */

.faq {
  padding: var(--space-7) var(--gutter);
  max-width: 840px;
  margin: 0 auto;
}

.faq__list {
  display: flex;
  flex-direction: column;
}

.faq__item {
  border-top: 1px solid var(--border-hairline);
}

.faq__item:last-child {
  border-bottom: 1px solid var(--border-hairline);
}

.faq__item summary {
  position: relative;
  padding: var(--space-3) var(--space-5) var(--space-3) 0;
  font-family: var(--font-display);
  font-size: var(--step-lead);
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: var(--space-3);
  font-family: var(--font-body);
  font-size: 1.25rem;
  color: var(--accent);
  transition: transform var(--dur-fast) var(--ease-out);
}

.faq__item[open] summary::after {
  transform: rotate(45deg);
}

.faq__item summary:hover {
  color: var(--accent);
}

.faq__item p {
  padding: 0 var(--space-5) var(--space-4) 0;
  color: var(--text-muted);
  max-width: 62ch;
}

/* ─── FOOTER ───────────────────────────────────────────────── */

.site-footer {
  background: var(--surface-bg-deep);
  color: var(--text-muted-dark);
  text-align: center;
  padding: var(--space-6) var(--gutter) var(--space-4);
}

/* the global `p { max-width: 62ch }` rule caps these paragraphs without
   centering the box itself, so text-align: center alone left-anchors them —
   center the boxes too */
.site-footer p {
  margin-left: auto;
  margin-right: auto;
}

.footer__wordmark {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--text-on-dark);
}

.footer__tagline {
  margin-top: var(--space-3);
  font-size: var(--step-small);
  color: var(--text-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}

.footer__brand-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}

.footer__brand-mark {
  height: 22px;
  width: auto;
}

.footer__brand-name {
  color: var(--accent-agence-on-dark);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.footer__brand-link:hover .footer__brand-name {
  border-color: currentColor;
}

.footer__descriptors {
  margin-top: 0.5rem;
  font-size: var(--step-eyebrow);
  letter-spacing: 0.04em;
}

.footer__contact {
  margin-top: var(--space-3);
  font-size: var(--step-small);
}

.footer__region,
.footer__languages {
  margin-top: 0.5rem;
  font-size: var(--step-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer__copyright {
  margin-top: var(--space-3);
  font-size: var(--step-eyebrow);
  letter-spacing: 0.06em;
}