/* ==========================================================================
   CONCEPT 6 — "THE OVERTURE"
   The other five concepts were static documents. This one is choreographed.
   A curtain lifts, the headline arrives word by word, photographs are
   revealed by wipes and drift inside their own frames, one movement pins
   while its picture breathes, the collection travels sideways under a
   vertical scroll, and a plate follows the cursor across the service index.
   Every easing is linear and slow. Nothing bounces. Palette and faces are
   unchanged; the craft is in the timing.
   ========================================================================== */

:root {
  --shell: 84rem;
  --pad: clamp(1.25rem, 5vw, 5.5rem);
  --slow: cubic-bezier(.16, .84, .28, 1);
  --veil: rgba(40, 55, 37, .55);
}

body { background: #EFF8EB; line-height: 1.85; }

.wrap { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); }
.measure { max-width: 40rem; }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 300; padding: .75rem 1.25rem; background: var(--forest); color: var(--mint-100); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; transition: top .25s ease; }
.skip:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   TYPE
   -------------------------------------------------------------------------- */
.d1 { font-size: clamp(2.1rem, 1rem + 3.9vw, 4.75rem); line-height: 1.04; letter-spacing: -.018em; }
.d2 { font-size: clamp(1.65rem, 1.05rem + 2.1vw, 3.1rem); line-height: 1.14; letter-spacing: -.012em; }
.d3 { font-size: clamp(1.2rem, 1.02rem + .68vw, 1.7rem); line-height: 1.28; }
.d4 { font-size: clamp(1.02rem, .96rem + .3vw, 1.2rem); line-height: 1.38; }
.lede { font-size: clamp(1.12rem, 1rem + .62vw, 1.6rem); line-height: 1.54; }

.label {
  display: block; font-family: var(--sans);
  font-size: clamp(.5625rem, .53rem + .1vw, .625rem);
  letter-spacing: .42em; text-transform: uppercase; color: var(--gilt-ink);
  margin-bottom: clamp(1rem, 2.2vw, 1.75rem);
}

/* --------------------------------------------------------------------------
   CHOREOGRAPHY PRIMITIVES
   -------------------------------------------------------------------------- */

/* A word arrives from beneath its own baseline. */
/* The horizontal padding/negative-margin pair keeps the mask from shaving the
   overhang off an italic, without changing where the word sits. */
.w { display: inline-block; overflow: hidden; vertical-align: bottom;
     padding-inline: .08em; margin-inline: -.08em; }
.w__i { display: inline-block; transform: translateY(105%); transition: transform 1.15s var(--slow); }
[data-sequence].is-in .w__i { transform: none; }
/* Stagger rides on --i, which the script sets on every word in document order.
   :nth-child would restart its count inside an inline span such as the italic,
   so the emphasised words would fire out of turn. */
[data-sequence] .w__i { transition-delay: calc(.02s + var(--i, 0) * .06s); }

/* A block rises a little and settles. */
[data-rise] { opacity: 0; transform: translateY(22px); transition: opacity 1.1s var(--slow), transform 1.1s var(--slow); }
[data-rise].is-in { opacity: 1; transform: none; }

/* A picture is uncovered rather than faded in. */
[data-wipe] { clip-path: inset(0 0 100% 0); transition: clip-path 1.5s var(--slow); }
[data-wipe].is-in { clip-path: inset(0 0 0 0); }

/* A rule draws itself. */
[data-draw] { transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--slow); }
[data-draw].is-in { transform: scaleX(1); }

/* The picture drifts against its frame — depth, not sliding. */
.frame { position: relative; overflow: hidden; background: var(--mint-300); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame [data-float] { position: absolute; inset: -9% 0; }
.frame [data-float] img { height: 100%; transform: translateY(var(--fy, 0%)); will-change: transform; }
.frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(168deg, rgba(40,55,37,.10), rgba(40,55,37,.30)); pointer-events: none; }

/* --------------------------------------------------------------------------
   THE CURTAIN
   -------------------------------------------------------------------------- */
.curtain {
  /* A fixed box resolves against the viewport *including* the scrollbar gutter,
     so inset:0 would push the document 15-34px wide on any engine that still
     draws a classic scrollbar. Width comes off the measured gutter instead. */
  position: fixed; top: 0; left: 0; height: 100%;
  width: calc(100vw - var(--sbw, 0px));
  z-index: 260; pointer-events: none;
  background: #EFF8EB;
  display: grid; place-items: center;
  transition: transform 1.5s var(--slow), opacity .5s ease 1.1s, visibility 0s linear 1.6s;
}
/* visibility, not just opacity — a transparent box still contributes to the
   scrollable overflow area. */
.curtain.is-up { transform: translateY(-101%); opacity: 0; visibility: hidden; }
.curtain__mark { width: clamp(7rem, 14vw, 11rem); opacity: .9; animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 0%,100% { opacity: .45 } 50% { opacity: 1 } }

/* --------------------------------------------------------------------------
   MASTHEAD
   -------------------------------------------------------------------------- */
/* Width off the measured gutter, for the same reason as the curtain.
   Top rides on the measured strip height so the masthead starts below the
   utility strip, then rises to the top once the strip has scrolled away. */
.masthead { position: fixed; top: var(--strip-h, 0px); left: 0; width: calc(100vw - var(--sbw, 0px)); z-index: 120;
            transition: top .55s var(--slow), background-color .7s ease; }
.masthead.is-scrolled { top: 0; }
.masthead::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(40,55,37,.82) 0%, rgba(40,55,37,.5) 60%, transparent 100%);
  transition: opacity .7s ease;
}
.masthead.is-scrolled::before { opacity: 0; }
.masthead.is-scrolled { background: rgba(239,248,235,.94); backdrop-filter: saturate(1.3) blur(20px); }

.strip { background: var(--forest); color: var(--ink-on-dark-2); font-size: .68rem; letter-spacing: .08em; }
.strip__inner { display: flex; align-items: center; gap: clamp(.6rem, 1.6vw, 1.4rem); flex-wrap: wrap; min-height: 2.15rem; }
.strip__locale { font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gilt-soft); }
.strip__group { display: flex; align-items: center; gap: clamp(.6rem, 1.6vw, 1.4rem); flex-wrap: wrap; }
.strip a { transition: color .35s ease; white-space: nowrap; }
.strip a:hover { color: var(--mint-100); }
.strip span { color: var(--gilt-soft); margin-right: .4em; letter-spacing: .16em; }
.strip__toggle { display: none; font-size: .6rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gilt-soft); }
.strip a[href^="mailto"] { margin-left: auto; }

.masthead__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-block: clamp(.9rem, 2vw, 1.5rem); }
.brand { grid-column: 2; justify-self: center; }
.brand img { width: clamp(9rem, 15vw, 12.5rem); transition: filter .7s ease; }
.masthead:not(.is-scrolled) .brand img { filter: brightness(0) invert(1); }
.masthead__tools { grid-column: 3; justify-self: end; display: flex; gap: .4rem; }
.masthead__left { grid-column: 1; }
.mbtn { display: inline-flex; align-items: center; gap: .55em; font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink); transition: color .35s ease, opacity .35s ease; opacity: .85; }
.mbtn:hover { opacity: 1; color: var(--gilt-ink); }
.masthead:not(.is-scrolled) .mbtn { color: var(--mint-100); }
.masthead:not(.is-scrolled) .mbtn:hover { color: var(--gilt-soft); }
.mbtn svg { width: 1rem; height: 1rem; }
.icon-btn { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; color: var(--ink); opacity: .85; transition: opacity .3s ease; }
.icon-btn:hover { opacity: 1; }
.icon-btn svg { width: 1.05rem; height: 1.05rem; }
.masthead:not(.is-scrolled) .icon-btn { color: var(--mint-100); }

.search { display: grid; grid-template-rows: 0fr; background: var(--paper); transition: grid-template-rows .5s var(--slow); }
.search.is-open { grid-template-rows: 1fr; }
.search__inner { overflow: hidden; }
.search__form { display: flex; align-items: center; gap: 1rem; padding-block: clamp(1rem, 2vw, 1.6rem); }
.search__form input { flex: 1; min-width: 0; padding: .8rem 0; border: 0; border-bottom: 1px solid var(--rule); background: transparent; font-family: var(--serif); font-size: clamp(1rem, .95rem + .5vw, 1.4rem); color: var(--ink); }
.search__form input:focus { outline: none; border-bottom-color: var(--gilt); }

/* --------------------------------------------------------------------------
   THE OVERTURE — hero
   -------------------------------------------------------------------------- */
/* The strip sits above the hero in flow, so the fold is what remains under it.
   Without this subtraction the hero runs exactly one strip-height past the
   bottom of the screen and the fold lands mid-sentence. */
.hero { position: relative; isolation: isolate; min-height: calc(100svh - var(--strip-h, 0px)); display: grid; align-items: center; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(40,55,37,0) 8%, rgba(40,55,37,.46) 30%, rgba(40,55,37,.58) 54%, rgba(40,55,37,.40) 74%, rgba(40,55,37,0) 90%),
    linear-gradient(180deg, rgba(40,55,37,.62) 0%, rgba(40,55,37,.46) 46%, rgba(40,55,37,.56) 100%);
}
.hero__inner { position: relative; z-index: 3; text-align: center; padding-block: clamp(4rem, 10vw, 7rem); }
.hero .label { color: #DCC9A2; opacity: 0; transform: translateY(14px); transition: opacity 1s var(--slow) .15s, transform 1s var(--slow) .15s; }
.hero__title { color: var(--mint-100); max-width: 20ch; margin-inline: auto; }
.hero__rule { width: min(22rem, 60%); height: 1px; background: var(--gilt-soft); margin: clamp(1.4rem, 3vw, 2.25rem) auto; transform: scaleX(0); transition: transform 1.4s var(--slow) .75s; }
.hero__sub { max-width: 34rem; margin-inline: auto; font-size: clamp(.98rem, .93rem + .32vw, 1.12rem); color: rgba(230,248,225,.94); opacity: 0; transform: translateY(14px); transition: opacity 1s var(--slow) .95s, transform 1s var(--slow) .95s; }
.hero__actions { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); opacity: 0; transform: translateY(14px); transition: opacity 1s var(--slow) 1.1s, transform 1s var(--slow) 1.1s; }

.stage.is-on .label,
.stage.is-on .hero__sub,
.stage.is-on .hero__actions { opacity: 1; transform: none; }
.stage.is-on .hero__rule { transform: scaleX(1); }
.stage.is-on .hero__title .w__i { transform: none; }
.hero__title .w__i { transition-delay: calc(.3s + var(--i, 0) * .07s); }

.btn {
  background: none; border: 0; border-bottom: 1px solid rgba(230,248,225,.45);
  color: var(--mint-100); padding: .55em 0; letter-spacing: .32em; font-size: .68rem;
  transition: color .45s ease, border-color .45s ease, transform .4s var(--slow);
}
.btn::before { display: none; }
.btn:hover { color: #DCC9A2; border-bottom-color: #DCC9A2; }
.btn__mark { display: none; }
.btn--ink { color: var(--ink); border-bottom-color: var(--rule-gilt); }
.btn--ink:hover { color: var(--gilt-ink); border-bottom-color: var(--gilt); }

/* --------------------------------------------------------------------------
   MOVEMENTS
   -------------------------------------------------------------------------- */
/* Section rhythm. The first cut of this concept ran 11rem of padding at the
   head AND foot of eleven sections — some 3,500px of nothing on a page of
   2,300 words, which is what made it read as empty rather than as composed.
   Air is not the same thing as luxury; it only reads that way when there is
   something on either side of it. */
.mv { padding-block: clamp(3.25rem, 6.5vw, 6.5rem); }
.mv--tight { padding-block: clamp(1rem, 2vw, 2rem) clamp(3.25rem, 6.5vw, 6.5rem); }
.mv__grid { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (min-width: 62rem) {
  .mv__grid { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); }
  .mv__aside { position: sticky; top: clamp(7rem, 14vh, 10rem); }
}
.mv__rule { width: 100%; height: 1px; background: var(--rule-gilt); margin: clamp(1rem, 2.2vw, 1.6rem) 0 clamp(1.25rem, 2.6vw, 2rem); }

/* --------------------------------------------------------------------------
   PHOTOGRAPHY IN THE TEXT SECTIONS
   Five consecutive sections carried no picture at all — heading, rule, a
   paragraph and a list, over and over, which is where "too dry" came from.
   Each of them now has a standing photograph beside it, drifting inside its
   own frame the way the rest of the concept does.
   -------------------------------------------------------------------------- */
@media (min-width: 62rem) {
  .mv__grid--shot { grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); }
  .mv__grid--shot .shot { position: sticky; top: clamp(6rem, 12vh, 9rem); }
  /* The flipped variant puts the picture on the right so two consecutive
     sections do not repeat the same silhouette. */
  .mv__grid--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 23rem); }
  .mv__grid--flip .shot { order: 2; }
}

.shot { position: relative; overflow: hidden; aspect-ratio: 3 / 4; margin: 0; }
.shot--aside { margin-top: clamp(1.5rem, 3vw, 2.25rem); aspect-ratio: 4 / 3; }
.shot__float { position: absolute; inset: -8% 0; display: block; }
.shot__float img { width: 100%; height: 100%; object-fit: cover; transform: translateY(var(--fy, 0%)); will-change: transform; }
.shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(170deg, rgba(40,55,37,.12), rgba(40,55,37,.48));
}
.shot::before {
  content: ""; position: absolute; inset: clamp(.5rem, 1vw, .8rem); z-index: 2;
  border: 1px solid rgba(255,255,255,.32); pointer-events: none;
}
.shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(.9rem, 2vw, 1.4rem);
  font-size: .58rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gilt-soft);
}

/* A wide cinematic band, used where a section is one long passage of prose and
   would otherwise open on nothing but type. */
.band { position: relative; overflow: hidden; aspect-ratio: 21 / 8; margin: 0; }
.band__float { position: absolute; inset: -10% 0; display: block; }
.band__float img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transform: translateY(var(--fy, 0%)); will-change: transform; }
.band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(170deg, rgba(40,55,37,.16), rgba(40,55,37,.44));
}
.band::before {
  content: ""; position: absolute; inset: clamp(.5rem, 1vw, .85rem); z-index: 2;
  border: 1px solid rgba(255,255,255,.30); pointer-events: none;
}
.prose > * + * { margin-top: 1.5em; }
.prose p { line-height: 1.95; }

/* --------------------------------------------------------------------------
   THE SERVICE INDEX — the cursor carries a plate
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   THE SERVICE INDEX
   Previously five bare lines of type on an otherwise blank field — 686px tall
   with, measurably, no picture in it at all. A cursor-led plate is a fine
   flourish but it only exists while a mouse is moving, so at rest the section
   was empty, and that is precisely how it read.

   Now it stands on its own: a tall standing photograph on the left with the
   film drifting inside its frame, and beside it five rows that each carry
   their own thumbnail, title and category. The cursor plate is kept as what it
   should always have been — an enhancement on top of a section that is already
   composed without it.
   -------------------------------------------------------------------------- */
.idx { display: grid; gap: clamp(1.75rem, 4vw, 4rem); align-items: start; }
@media (min-width: 62rem) { .idx { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); } }

.idx__plate { position: relative; overflow: hidden; aspect-ratio: 3 / 4; margin: 0; }
.idx__float { position: absolute; inset: -8% 0; display: block; }
.idx__float img { width: 100%; height: 100%; object-fit: cover; transform: translateY(var(--fy, 0%)); will-change: transform; }
.idx__plate::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(170deg, rgba(40,55,37,.14), rgba(40,55,37,.52));
}
.idx__plate .idx__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(.9rem, 2vw, 1.4rem);
  font-size: .58rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gilt-soft);
}
/* The hairline mount, inset — the device the rest of the house uses. */
.idx__plate::before {
  content: ""; position: absolute; inset: clamp(.5rem, 1vw, .8rem); z-index: 2;
  border: 1px solid rgba(255,255,255,.34); pointer-events: none;
}

.idx__list { border-top: 1px solid var(--rule); }
.idx__list a {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: clamp(.9rem, 2vw, 1.6rem);
  padding: clamp(.85rem, 1.7vw, 1.2rem) .25rem;
  border-bottom: 1px solid var(--rule);
  color: var(--forest); transition: color .5s ease, padding-left .5s var(--slow);
}
.idx__thumb { width: clamp(3.25rem, 5.5vw, 4.5rem); aspect-ratio: 4 / 5; overflow: hidden; flex: none; }
.idx__thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72); transition: filter .6s ease, transform 1s var(--slow); }
.idx__txt { display: grid; }
.idx__t { font-family: var(--serif); font-size: clamp(1rem, .9rem + .62vw, 1.5rem); line-height: 1.26; }
.idx__s { margin-top: .3rem; font-size: .6rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-3); }
.idx__list a:hover, .idx__list a:focus-visible { color: var(--gilt-ink); padding-left: .75rem; }
.idx__list a:hover .idx__thumb img { filter: saturate(1); transform: scale(1.06); }

.peeklist { border-top: 1px solid var(--rule); }
.peeklist a {
  position: relative; display: flex; align-items: baseline; gap: 1.25rem;
  padding: clamp(1.1rem, 2.6vw, 2rem) .25rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif); font-size: clamp(1.15rem, .95rem + 1.15vw, 2.15rem);
  line-height: 1.28; color: var(--ink);
  transition: color .5s ease, padding-left .6s var(--slow);
}
.peeklist a:hover { color: var(--gilt-ink); padding-left: 1.25rem; }
/* --gilt-ink, not --gilt: brass that carries words has to clear AA, and at
   .58rem these numerals are small text needing 4.5:1. */
.peeklist .n,
.idx__list .n { flex: none; font-family: var(--sans); font-size: .58rem; letter-spacing: .28em; color: var(--gilt-ink); }
.peeklist .n { transform: translateY(-.45em); }
.idx__list .n { margin-bottom: .4rem; }
.peeklist .go,
.idx__list .go { margin-left: auto; flex: none; font-family: var(--sans); font-size: .78rem; color: var(--gilt-ink); opacity: 0; transform: translateX(-.6rem); transition: opacity .5s ease, transform .5s var(--slow); }
.peeklist a:hover .go,
.idx__list a:hover .go, .idx__list a:focus-visible .go { opacity: 1; transform: none; }

.peek {
  position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none;
  width: clamp(11rem, 17vw, 16rem); aspect-ratio: 4 / 5;
  opacity: 0; transition: opacity .55s ease;
  overflow: hidden;
}
.peek.is-on { opacity: 1; }
.peek img { width: 100%; height: 100%; object-fit: cover; }
.peek::after { content: ""; position: absolute; inset: 0; background: linear-gradient(168deg, rgba(40,55,37,.12), rgba(40,55,37,.34)); }
@media (hover: none) { .peek { display: none; } }

/* --------------------------------------------------------------------------
   THE PINNED MOVEMENT — words hold while the picture breathes
   -------------------------------------------------------------------------- */
/* 260vh meant 1,400px of scrolling in which nothing arrives — the movement
   held far longer than it had anything to say. 175vh keeps the pin legible as
   a deliberate pause without becoming a corridor. */
.pin { position: relative; height: 175vh; }
/* Padding, not a sticky offset: the photograph must stay edge-to-edge behind
   the masthead while the words sit inside the part of the frame you can see. */
.pin__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center;
              box-sizing: border-box; padding-top: var(--header-h, 0px); }
.pin__bg { position: absolute; inset: 0; }
.pin__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.06 + var(--p, 0) * .12)); transition: transform .1s linear; }
.pin__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40,55,37,.62), rgba(40,55,37,.5) 45%, rgba(40,55,37,.68)); }
.pin__in { position: relative; z-index: 2; text-align: center; }
.pin__in .d2, .pin__in .lede { color: var(--mint-100); }
.pin__in .lede { max-width: 40rem; margin: clamp(1.25rem, 2.6vw, 2rem) auto 0; }
/* Three lines cross-fade against scroll progress. */
.pin__line { transition: opacity .5s ease; color: rgba(230,248,225,.94); max-width: 42rem; margin-inline: auto; }
.pin__line + .pin__line { margin-top: clamp(1rem, 2vw, 1.5rem); }

/* --------------------------------------------------------------------------
   THE SIXTEEN — a ruled register
   -------------------------------------------------------------------------- */
.register { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); column-gap: clamp(2rem, 5vw, 4.5rem); border-top: 1px solid var(--rule); }
.register li { border-bottom: 1px solid var(--rule); }
.register .r { display: block; padding: clamp(.85rem, 1.9vw, 1.3rem) 0; transition: padding-left .55s var(--slow); }
a.register-row:hover { padding-left: .6rem; }
.register .k { display: block; font-family: var(--serif); font-size: 1.05rem; line-height: 1.35; color: var(--ink); transition: color .4s ease; }
a.register-row:hover .k { color: var(--gilt-ink); }
.register .bar { display: none; }
.register .v { display: block; margin-top: .2rem; font-size: .84rem; line-height: 1.75; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   MARQUEE — press, and the destinations
   -------------------------------------------------------------------------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__t { display: flex; width: max-content; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; animation: slide 46s linear infinite; }
.marquee:hover .marquee__t { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee img { width: clamp(5.5rem, 8vw, 7.5rem); filter: brightness(0); opacity: .4; transition: opacity .4s ease; }
.marquee img:hover { opacity: .9; }
.marquee--cities .marquee__t { animation-duration: 58s; gap: 0; }
.marquee--cities a { display: inline-flex; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); padding-inline: clamp(.75rem, 2vw, 1.5rem); font-family: var(--serif); font-size: clamp(1.35rem, 1.05rem + 1.2vw, 2.4rem); color: var(--ink); white-space: nowrap; transition: color .4s ease; }
.marquee--cities a::after { content: "\2756"; font-size: .32em; color: var(--gilt); transform: translateY(-.5em); }
.marquee--cities a:hover { color: var(--gilt-ink); }
@media (prefers-reduced-motion: reduce) { .marquee__t { animation: none; } }

/* --------------------------------------------------------------------------
   THE PROCESS — a line draws between the four steps
   -------------------------------------------------------------------------- */
.proc { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: clamp(1.75rem, 4vw, 3rem); }
.proc__line { position: absolute; left: 0; right: 0; top: clamp(1.6rem, 2.6vw, 2.2rem); height: 1px; background: var(--rule-gilt); }
.step { position: relative; display: grid; gap: .85rem; align-content: start; justify-items: start; }
.step__dot { width: clamp(3.2rem, 5.2vw, 4.4rem); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--paper); border: 1px solid var(--rule-gilt); }
.step__dot img { width: 54%; height: 54%; object-fit: contain; mix-blend-mode: multiply; opacity: .7; }
.step__n { font-size: .56rem; letter-spacing: .36em; text-transform: uppercase; color: var(--gilt-ink); }
.step h4 { font-family: var(--serif); font-size: clamp(1rem, .95rem + .3vw, 1.16rem); line-height: 1.32; color: var(--forest); }
.step p { font-size: .84rem; line-height: 1.85; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   THE COLLECTION — travels sideways beneath a vertical scroll
   -------------------------------------------------------------------------- */
.rail { position: relative; height: 320vh; }
.rail__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; align-content: center; gap: clamp(1.5rem, 3vw, 2.5rem);
               box-sizing: border-box; padding-top: var(--header-h, 0px); }
.rail__head { padding-inline: var(--pad); max-width: var(--shell); margin-inline: auto; width: 100%; }
.rail__track { display: flex; gap: clamp(1rem, 2.4vw, 2rem); padding-inline: var(--pad); transform: translate3d(calc(var(--p, 0) * -1 * var(--travel, 0px)), 0, 0); will-change: transform; }
.rail__card { flex: 0 0 clamp(14rem, 24vw, 21rem); }
.rail__card .frame { aspect-ratio: 4 / 5; }
.rail__card figcaption { padding-top: .9rem; }
.rail__k { display: block; font-family: var(--serif); font-size: clamp(.98rem, .93rem + .28vw, 1.14rem); line-height: 1.35; color: var(--forest); }
.rail__colon { color: var(--gilt-ink); }
.rail__v { display: block; margin-top: .3rem; font-size: .8rem; line-height: 1.75; color: var(--ink-3); }
.rail__hint { padding-inline: var(--pad); max-width: var(--shell); margin-inline: auto; width: 100%; font-size: .56rem; letter-spacing: .34em; text-transform: uppercase; color: var(--gilt-ink); }

/* --------------------------------------------------------------------------
   PIECES
   -------------------------------------------------------------------------- */
.quote { max-width: 46rem; margin-inline: auto; text-align: center; }
.quote p { font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 1.02rem + 1.05vw, 2rem); line-height: 1.5; color: var(--forest); }

.card { max-width: 42rem; }
.card > * + * { margin-top: clamp(1rem, 2vw, 1.5rem); }
.ticks { display: grid; gap: .7rem; }
.ticks li { position: relative; padding-left: 1.25rem; font-size: .9rem; line-height: 1.85; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .85em; width: .5rem; height: 1px; background: var(--gilt); }

.defs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: clamp(1.5rem, 3.5vw, 3rem); }
.defs .k { display: block; font-family: var(--serif); font-size: 1.06rem; line-height: 1.4; color: var(--ink); }
.defs .dash { color: var(--gilt-ink); }
.defs .v { display: block; margin-top: .4rem; font-size: .85rem; line-height: 1.85; color: var(--ink-3); }

.disclaimer { max-width: 48rem; font-family: var(--serif); font-style: italic; font-size: clamp(.9rem, .87rem + .2vw, 1rem); line-height: 1.8; color: var(--ink-3); }

.index2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); column-gap: clamp(2rem, 5vw, 4rem); border-top: 1px solid var(--rule); }
.index2 li { border-bottom: 1px solid var(--rule); }
.index2 a { display: flex; align-items: baseline; gap: .9rem; padding: clamp(.8rem, 1.8vw, 1.15rem) 0; font-family: var(--serif); font-size: clamp(1rem, .95rem + .3vw, 1.18rem); line-height: 1.42; color: var(--ink); transition: color .4s ease, padding-left .5s var(--slow); }
.index2 a:hover { color: var(--gilt-ink); padding-left: .5rem; }
.index2 .go { margin-left: auto; font-family: var(--sans); font-size: .76rem; color: var(--gilt-ink); opacity: .35; transition: opacity .4s ease; }
.index2 a:hover .go { opacity: 1; }

/* The closing invitation, full bleed with drift */
.finale { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(5rem, 12vw, 11rem); }
.finale__bg { position: absolute; inset: -8% 0; z-index: -1; }
.finale__bg img { width: 100%; height: 100%; object-fit: cover; transform: translateY(var(--fy, 0%)); }
.finale__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40,55,37,.72), rgba(40,55,37,.6) 45%, rgba(40,55,37,.78)); }
.finale__in { text-align: center; max-width: 44rem; margin-inline: auto; }
.finale .d2, .finale .d3, .finale .lede { color: var(--mint-100); }
.finale p { color: rgba(230,248,225,.92); }
.finale__rule { width: 5rem; height: 1px; background: var(--gilt-soft); margin: 1.25rem auto; }

.contact-grid { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; column-gap: clamp(2rem, 5vw, 4rem); row-gap: .7rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.contact-line { display: flex; align-items: baseline; gap: .9em; font-size: .9rem; }
.contact-label { flex: none; min-width: 3.1rem; font-size: .56rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gilt-soft); }
.contact-line a { color: var(--mint-100); transition: color .35s ease; }
.contact-line a:hover { color: #DCC9A2; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.foot { background: #E7F4E2; border-top: 1px solid var(--rule); position: relative; z-index: 4; }

.foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: clamp(2rem, 4vw, 3.5rem); padding-block: clamp(3rem, 6vw, 5rem); }
.foot__h { margin-bottom: 1.1rem; font-size: .56rem; letter-spacing: .36em; text-transform: uppercase; color: var(--gilt-ink); }
.foot__links { display: grid; gap: .3rem; }
.foot__links a { font-size: .8125rem; line-height: 1.6; color: var(--ink-2); transition: color .35s ease; }
.foot__links a:hover { color: var(--gilt-ink); }
.foot__note { font-size: .8125rem; line-height: 1.75; color: var(--ink-3); }
.foot__tel { display: grid; gap: .4rem; margin-top: .8rem; }
.foot__tel a, .foot__mail a { font-size: .875rem; color: var(--ink); transition: color .35s ease; }
.foot__tel a:hover, .foot__mail a:hover { color: var(--gilt-ink); }
.foot__tel span { color: var(--gilt-ink); margin-right: .5em; font-size: .56rem; letter-spacing: .3em; }
.foot__mail { margin-top: 1.1rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.foot__social { display: inline-grid; place-items: center; width: 2rem; height: 2rem; color: var(--ink-2); transition: color .35s ease; }
.foot__social:hover { color: var(--gilt-ink); }
.foot__social svg { width: 1rem; height: 1rem; }
.pay { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1rem; }
.pay li { font-size: .56rem; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-3); }
.foot__base { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); padding-block: clamp(1.75rem, 3.5vw, 2.75rem); border-top: 1px solid var(--rule); }
.foot__brand { justify-self: start; width: 100%; }
.foot__brand img { width: min(100%, 14rem); opacity: .9; }
.foot__copy { font-size: .68rem; line-height: 1.85; color: var(--ink-3); text-align: center; }
.foot__locale { display: flex; gap: clamp(1rem, 2.4vw, 1.75rem); flex-wrap: wrap; justify-self: end; }
.foot__locale a { display: inline-flex; align-items: center; gap: .55em; font-size: .56rem; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-2); transition: color .35s ease; }
.foot__locale a:hover { color: var(--gilt-ink); }
.foot__flag { width: 1.1rem; flex: none; }

/* --------------------------------------------------------------------------
   DRAWER
   -------------------------------------------------------------------------- */
.drawer { position: fixed; top: 0; left: 0; height: 100%; width: calc(100vw - var(--sbw, 0px)); z-index: 200; background: var(--paper); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(-1.25rem); transition: opacity .5s ease, transform .6s var(--slow), visibility .5s; padding-inline: var(--pad); }
.drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.drawer > * { max-width: var(--shell); margin-inline: auto; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; border-bottom: 1px solid var(--rule); }
.drawer__top img { width: 9.5rem; }
.drawer__nav { padding-block: clamp(1.5rem, 4vw, 3rem) 3rem; columns: 2; column-gap: clamp(2rem, 5vw, 4rem); }
.drawer__group { break-inside: avoid; border-top: 1px solid var(--rule); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .95rem 0; font-family: var(--serif); font-size: 1.1rem; color: var(--ink); text-align: left; }
.drawer__head svg { width: .66rem; height: .66rem; color: var(--gilt); transition: transform .4s var(--slow); }
.drawer__head[aria-expanded="true"] svg { transform: rotate(180deg); }
.drawer__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--slow); }
.drawer__panel.is-open { grid-template-rows: 1fr; }
.drawer__panel > ul { overflow: hidden; }
.drawer__panel a { display: block; padding: .5rem 0 .5rem 1.1rem; font-size: .9rem; color: var(--ink-2); border-left: 1px solid var(--rule); }
.drawer__panel li:last-child a { margin-bottom: .8rem; }
.drawer__contact { padding-block: 1.5rem; border-top: 1px solid var(--rule); display: grid; gap: .45rem; font-size: .875rem; }

/* --------------------------------------------------------------------------
   NARROW — the two travelling movements become ordinary stacks
   -------------------------------------------------------------------------- */
@media (max-width: 74rem) { .nav { display: none; } }
@media (max-width: 62rem) {
  .pin { height: auto; }
  .pin__stage { position: static; height: auto; padding-block: clamp(4rem, 12vw, 7rem); }
  .rail { height: auto; }
  .rail__stage { position: static; height: auto; padding-block: clamp(3rem, 8vw, 5rem); }
  .rail__track { transform: none; flex-wrap: wrap; }
  .rail__card { flex: 1 1 calc(50% - 1rem); }
  .rail__hint { display: none; }
}
@media (max-width: 48rem) {
  .strip__group--tel { display: none; }
  .strip__group--tel.is-open { display: flex; width: 100%; padding-bottom: .55rem; }
  .strip__toggle { display: inline-flex; }
  .strip a[href^="mailto"] { margin-left: 0; }
  .drawer__nav { columns: 1; }
  .foot__base { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .foot__brand { justify-self: center; width: auto; }
  .foot__locale { justify-self: center; }
  .contact-grid { grid-template-columns: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .curtain { display: none; }
  .w__i { transform: none !important; }
  [data-rise], [data-wipe], [data-draw] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .hero .label, .hero__sub, .hero__actions { opacity: 1 !important; transform: none !important; }
  .hero__rule { transform: scaleX(1) !important; }
  .pin__bg img, .finale__bg img, .frame [data-float] img { transform: none !important; }

  .curtain__mark { animation: none !important; }

  /* The script returns early under reduced motion, so --travel is never
     measured and --p never advances. Left as-is, the pinned movement and the
     sideways collection would become tall columns of dead scroll with the
     cards frozen off-screen. Flatten both to ordinary stacks — the same
     shape they already take on a narrow screen. */
  .pin { height: auto; }
  .pin__stage { position: static; height: auto; padding-block: clamp(4rem, 12vw, 7rem); }
  .rail { height: auto; }
  .rail__stage { position: static; height: auto; padding-block: clamp(3rem, 8vw, 5rem); }
  .rail__track { transform: none !important; flex-wrap: wrap; }
  .rail__card { flex: 1 1 clamp(14rem, 30%, 21rem); }
  .rail__hint { display: none; }
}

/* Section text takes the full width of the shell — see the note in concept-2.
   Scoped with the child combinator so a .measure sitting inside a narrow
   column of .mv__grid keeps its cap, which is the one place it is correct. */
.wrap > .measure,
.wrap > .prose,
.wrap > p { max-width: none; }

/* --------------------------------------------------------------------------
   BALANCED COLUMNS
   `auto-fit` fits as many columns as will physically go, which for a four-item
   list at this width means three across and one stranded on a row of its own.
   A count that divides the item count evenly is the only thing that reads as
   composed, so four items are laid two-by-two and drop to one column on a
   phone. Never three.
   -------------------------------------------------------------------------- */
.defs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 44rem) { .defs { grid-template-columns: minmax(0, 1fr); } }