/* ==========================================================================
   MYNT MODELS — "The Private House"  ·  v2
   Engraved stationery in mint. Depth comes from photography and layering,
   never from a heavy fill: the only forest grounds on the page are the thin
   utility strip and the footer, which bookend an entirely light document.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand ground — supplied palette.
     The page alternates strictly between two grounds: --paper (the light
     band) and --band (the mint band). --paper is deliberately tinted, not
     white; there is no white anywhere on this page. */
  --paper:        #EFF8EB;
  --mint-100:     #E6F8E1;
  --mint-200:     #E3F5DE;
  --mint-300:     #E1F0DC;
  --band:         #E1F0DC;
  --sage:         #7BA673;
  --forest:       #384D34;

  /* The strip and the footer use the brand green itself, not a deepened
     derivative — dark enough to ground the page, soft enough not to strike. */
  --forest-900:   #384D34;

  /* Ink. Every value clears WCAG AA (4.5:1) on both --paper and --mint-200,
     the two grounds body copy sits on. Hierarchy comes from size and family,
     not from fading text out. */
  --ink:          #384D34;   /*  8.7:1 on paper */
  --ink-2:        #55694F;   /*  5.7:1 on paper */
  --ink-3:        #54684F;   /*  5.6:1 on paper · 4.7:1 on the deepest footer mint */
  --ink-on-dark:  #E6F8E1;
  --ink-on-dark-2:#B7CFB0;   /*  9.0:1 on forest-900 */

  /* The one warm note — aged brass.
     --gilt is ornament and hairlines; --gilt-ink is the darker cut used
     wherever brass carries actual words. */
  --gilt:         #A98F5F;
  --gilt-ink:     #7A5F30;   /*  5.5:1 on paper · 4.7:1 on the deepest footer mint */
  --gilt-soft:    #CDB88C;   /*  7.8:1 on forest-900 */

  /* Rules */
  --rule:         rgba(56, 77, 52, .16);
  --rule-dark:    rgba(230, 248, 225, .18);
  --rule-gilt:    rgba(169, 143, 95, .42);
  --mount:        rgba(255, 255, 255, .58);   /* the gallery hairline */

  /* Type */
  --serif: "DM Serif Display", "Iowan Old Style", "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Measure & rhythm */
  --wrap:      78rem;
  --wrap-text: 44rem;
  --gutter:    clamp(1.25rem, 4vw, 3.25rem);
  --section-y: clamp(3.25rem, 6vw, 6.5rem);
  --rail:      clamp(8rem, 15vw, 14rem);      /* the header's two equal margins */
  --header-h:  11rem;                          /* measured at runtime by main.js */

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 8rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: clamp(1rem, .955rem + .19vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Grain. Flat mint reads like a screen fill; a whisper of tooth makes it
   read like stock. Invisible on its own, felt across a whole page. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }

:focus-visible { outline: 2px solid var(--gilt-ink); outline-offset: 3px; border-radius: 1px; }
::selection { background: var(--sage); color: var(--paper); }

/* --------------------------------------------------------------------------
   3. TYPE PRIMITIVES
   -------------------------------------------------------------------------- */
.d1, .d2, .d3, .d4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -.02em;
}

.d1 { font-size: clamp(2.35rem, .95rem + 5.1vw, 5.25rem); line-height: .98; }
.d2 { font-size: clamp(2.15rem, 1.1rem + 3.1vw, 3.9rem);  line-height: 1.05; }
.d3 { font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.2rem);  line-height: 1.16; letter-spacing: -.014em; }
.d4 { font-size: clamp(1.15rem, 1.03rem + .4vw, 1.45rem); line-height: 1.28; letter-spacing: -.008em; }

/* The signature: one brand-critical word per major heading, held in italic. */
.em { font-style: italic; }

.eyebrow {
  display: block;
  margin: 0 0 clamp(1.1rem, 2.2vw, 1.75rem);
  font-family: var(--sans);
  font-size: clamp(.625rem, .59rem + .14vw, .6875rem);
  font-weight: 500;
  letter-spacing: .26em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--gilt-ink);
}
.eyebrow::before { content: "\2756"; margin-right: .9em; font-size: .8em; letter-spacing: 0; opacity: .85; }
.eyebrow--center { text-align: center; }

.lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 1.02rem + 1.15vw, 2rem);
  line-height: 1.4;
  letter-spacing: -.012em;
  color: var(--ink);
}

.prose > * + * { margin-top: 1.35em; }
.prose { max-width: var(--wrap-text); }
/* Centred text is for short interludes only. Longer passages sit in a
   centred column but stay left-aligned, so the eye keeps its margin. */
.prose--center { margin-inline: auto; text-align: center; }
.prose--column { margin-inline: auto; text-align: left; }

.note { font-size: .875rem; line-height: 1.7; color: var(--ink-3); }

/* A passage of continuous prose is set once, in one generous measure, at a
   size that invites reading. It is never chopped into columns — the text is
   an argument, not a table — and it is anchored by a full-width hairline so
   it reads as placed rather than stranded. */
.passage {
  max-width: 48rem;
  margin: clamp(2rem, 4vw, 3.25rem) auto 0;
  padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--rule-gilt);
}
.passage > * + * { margin-top: 1.4em; }
.passage p { font-size: clamp(1rem, .96rem + .2vw, 1.075rem); line-height: 1.85; }
.passage--flush { margin-top: 0; padding-top: 0; border-top: 0; }

.prose a, .note a, .passage a, .linkish {
  color: var(--ink);
  background-image: linear-gradient(var(--gilt), var(--gilt));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: .08em;
  transition: background-size .35s var(--ease), color .35s ease;
}
.prose a:hover, .note a:hover, .passage a:hover, .linkish:hover { background-size: 100% 2px; color: var(--gilt-ink); }

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--section-y); position: relative; }
.section--half-top { padding-block-start: clamp(2.5rem, 5vw, 5rem); }

.section-head { max-width: 48rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { text-align: center; }
.section-head > * + * { margin-top: clamp(1rem, 2vw, 1.5rem); }

/* ONE continuous ground for the whole document.
   Sections are transparent; the tone drifts between the supplied mint values
   down the length of the page. Nothing ever meets at a hard edge, so the
   background reads as a single slow wave of green rather than a stack of
   coloured boxes. */
main {
  background: linear-gradient(180deg,
    #EFF8EB  0%,
    #E9F6E4  6%,
    #E3F5DE 14%,
    #EDF8E9 23%,
    #E1F0DC 32%,
    #EFF8EB 41%,
    #E4F5DF 50%,
    #EEF8EA 59%,
    #E1F0DC 68%,
    #EDF8E9 77%,
    #E3F5DE 86%,
    #E9F6E4 94%,
    #DFEFD9 100%);
}
.tone-band, .tone-paper { background: none; }

/* The ❖ rule — a hairline broken by the house mark. */
.rule { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); color: var(--gilt); }
.rule::before, .rule::after { content: ""; flex: 1; height: 1px; background: var(--rule-gilt); }
.rule span { font-size: .7rem; line-height: 1; opacity: .9; }
.rule--tight { max-width: 8rem; margin-inline: auto; }

/* --------------------------------------------------------------------------
   5. THE MOUNT & THE VEIL — signature image treatment
   No photograph is shown flat. Each sits behind a mint wash inside a hairline
   frame inset from its own edge, and unveils only on hover or focus.
   -------------------------------------------------------------------------- */
.plate {
  position: relative;
  overflow: hidden;
  background: var(--mint-300);
  isolation: isolate;
}
.plate img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.88) contrast(.98);
  transform: scale(1.015);
  transition: transform 1.4s var(--ease), filter 1s ease;
}
/* The veil is the brand green, not a white wash — it deepens the photograph
   and ties every image on the page to the palette. */
.plate::before {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(158deg,
    rgba(56, 77, 52, .14) 0%,
    rgba(56, 77, 52, .26) 48%,
    rgba(56, 77, 52, .46) 100%);
  transition: opacity .9s var(--ease);
}
.plate::after {
  content: "";
  position: absolute;
  inset: clamp(.6rem, 1.3vw, 1.05rem);
  z-index: 2; pointer-events: none;
  border: 1px solid var(--mount);
}
.plate:hover img, .plate:focus-within img { transform: scale(1.045); filter: saturate(1) contrast(1); }
.plate:hover::before, .plate:focus-within::before { opacity: .38; }

.plate--wide      { aspect-ratio: 21 / 9; }
.plate--cinema    { aspect-ratio: 16 / 7; }
.plate--landscape { aspect-ratio: 4 / 3; }
.plate--portrait  { aspect-ratio: 4 / 5; }
.plate--tall      { aspect-ratio: 3 / 4; }

/* Two prints on a desk: a large plate with a smaller one laid over its
   corner. Depth without a drop shadow doing the work. */
.stack { position: relative; padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.stack__a { width: 84%; }
.stack__b {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
  padding: clamp(.4rem, .8vw, .6rem);
  background: var(--paper);
  box-shadow: 0 26px 60px -24px rgba(30, 42, 27, .38);
}

/* Icon discs for the process — line art on mint, no veil. */
.disc {
  position: relative;
  width: clamp(4.5rem, 8vw, 5.75rem);
  aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--mint-100);
  border: 1px solid var(--rule-gilt);
}
.disc img { width: 58%; height: 58%; object-fit: contain; mix-blend-mode: multiply; opacity: .82; }

/* --------------------------------------------------------------------------
   6. IMMERSION — a photograph as the ground, never a colour block
   The page's depth comes from these. A light mint wash keeps the palette
   soft; a frosted panel carries the words at full contrast.
   -------------------------------------------------------------------------- */
.immersion {
  position: relative;
  isolation: isolate;
  padding-block: clamp(4.5rem, 10vw, 9rem);
  overflow: hidden;
}
/* The photograph is masked at both ends rather than covered by a matching
   fade. It dissolves into whatever tone the page gradient happens to be at
   that point, so the seam is invisible and stays invisible if the section
   above or below ever changes. */
.immersion__bg {
  position: absolute; inset: 0; z-index: -2;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.immersion__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.immersion__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(150deg, rgba(56, 77, 52, .26), rgba(56, 77, 52, .44));
}
/* The mount fades with the photograph — a hairline that ran past the
   dissolve would give the seam away. */
.immersion__mount {
  position: absolute;
  inset: clamp(.85rem, 1.7vw, 1.6rem);
  z-index: -1; pointer-events: none;
  border: 1px solid var(--mount);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
}

/* Frosted stationery — the panel that floats over an immersion. */
.panel {
  position: relative;
  padding: clamp(1.9rem, 4.5vw, 3.75rem);
  background: rgba(230, 248, 225, .94);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: 0 40px 90px -50px rgba(56, 77, 52, .5);
}
.panel::before {
  content: "";
  position: absolute; inset: .6rem;
  border: 1px solid var(--rule-gilt);
  pointer-events: none;
}
.panel > * + * { margin-top: clamp(1rem, 2vw, 1.5rem); }
.panel--narrow { max-width: 44rem; margin-inline: auto; }
/* A whole movement set on one sheet of stationery laid over the photograph,
   rather than a panel followed by a stranded block of text underneath it. */
.panel--sheet { max-width: 54rem; margin-inline: auto; }
.panel--sheet .prose { max-width: none; }
.panel--sheet .pullquote { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.panel--sheet .prose p { font-size: clamp(1rem, .96rem + .2vw, 1.075rem); line-height: 1.85; }

/* --------------------------------------------------------------------------
   7. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .8em;
  padding: 1.1em 2.35em;
  font-family: var(--serif);
  font-size: clamp(.8125rem, .78rem + .12vw, .9375rem);
  letter-spacing: .17em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid var(--forest);
  background: var(--forest);
  color: var(--mint-100);
  position: relative; overflow: hidden;
  transition: color .5s var(--ease), border-color .5s ease;
}
.btn::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: var(--mint-100);
  transform: scaleX(0); transform-origin: right;
  transition: transform .55s var(--ease);
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { color: var(--forest); }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-gilt); }
.btn--ghost::before { background: var(--forest); }
.btn--ghost:hover { color: var(--mint-100); border-color: var(--forest); }

.btn__mark { font-size: .85em; opacity: .7; }

/* --------------------------------------------------------------------------
   8. THE INDEX — reusable hairline link list
   -------------------------------------------------------------------------- */
.index { border-top: 1px solid var(--rule); }
.index li { border-bottom: 1px solid var(--rule); }
.index a {
  display: flex; align-items: baseline;
  gap: clamp(.85rem, 2vw, 1.4rem);
  padding: clamp(1.05rem, 2vw, 1.55rem) clamp(.5rem, 1.5vw, 1.1rem);
  font-family: var(--serif);
  font-size: clamp(1.05rem, .95rem + .48vw, 1.4rem);
  line-height: 1.32;
  color: var(--ink);
  transition: background-color .45s var(--ease), padding-left .45s var(--ease), color .35s ease;
}
.index a:hover, .index a:focus-visible {
  background: var(--mint-200);
  padding-left: clamp(1rem, 2.5vw, 1.9rem);
  color: var(--forest);
}
.index__mark { flex: none; font-size: .6em; color: var(--gilt); transform: translateY(-.15em); }
/* The arrow is always present — it anchors the right end of the row, so a
   short label doesn't leave the line trailing off into empty space. */
.index__arrow {
  flex: none; margin-left: auto;
  font-family: var(--sans); font-size: .85rem; color: var(--gilt-ink);
  opacity: .4; transform: translateX(-.4rem);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.index a:hover .index__arrow, .index a:focus-visible .index__arrow { opacity: 1; transform: translateX(0); }

.index--two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
}

/* --------------------------------------------------------------------------
   9. MASTHEAD — the letterhead
   -------------------------------------------------------------------------- */
.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  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; }

/* Visually hidden, still read aloud. Not `.skip` — that is a focusable control
   parked above the viewport, and it only stays out of sight while the page root
   is its containing block. A <label> never takes focus, so inside a positioned
   ancestor `.skip` would leave it permanently on display. */
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.masthead {
  position: sticky; top: 0; z-index: 100;
  background: rgba(244, 251, 241, .95);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow .4s ease;
}
.masthead.is-scrolled { box-shadow: 0 1px 26px rgba(30, 42, 27, .08); }

/* — utility strip — */
.utility { background: var(--forest-900); color: var(--ink-on-dark-2); font-size: .75rem; letter-spacing: .06em; }
.utility__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 2rem; flex-wrap: wrap;
}
.utility__group { display: flex; align-items: center; gap: clamp(.7rem, 1.8vw, 1.5rem); flex-wrap: wrap; }
.utility__locale {
  display: inline-flex; align-items: center; gap: .45em;
  font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gilt-soft);
}
.utility a { transition: color .3s ease; white-space: nowrap; }
.utility a:hover { color: var(--mint-100); }
.utility__tel span { color: var(--gilt-soft); margin-right: .4em; letter-spacing: .14em; }
.utility__sep { width: 1px; height: 12px; background: var(--rule-dark); }
.utility__toggle {
  display: none; align-items: center; gap: .5em;
  font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gilt-soft);
}

/* — brand row — two equal rails flanking the wordmark, so the margins read
     as deliberate rather than as whatever was left over. — */
.brand-row {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr) var(--rail);
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  /* Tightened: the brand row was taking 198px of a 900px screen before the
     photograph even began. The wordmark is the same size; only the air around
     it has come off, and the hero gets it back. */
  padding-block: clamp(.6rem, 1.15vw, .95rem);
}
.brand { grid-column: 2; justify-self: center; display: block; }
.brand img { width: clamp(9.5rem, 17vw, 13.5rem); height: auto; }

.brand-row__left  { grid-column: 1; width: 100%; }
.brand-row__right { grid-column: 3; width: 100%; display: flex; align-items: center; gap: .5rem; min-width: 0; }

.tagline {
  font-family: var(--sans);
  font-size: .625rem;
  letter-spacing: .2em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* The search box mirrors the tagline rail exactly. */
.header-search {
  flex: 1;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .8rem 1rem;
  border: 1px solid var(--rule);
  font-size: .625rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3);
  transition: border-color .35s ease, color .35s ease;
}
.header-search:hover, .header-search[aria-expanded="true"] { border-color: var(--gilt); color: var(--gilt-ink); }
.header-search svg { width: .95rem; height: .95rem; flex: none; }

.icon-btn {
  display: none;
  place-items: center;
  width: 2.75rem; height: 2.75rem; flex: none;
  border: 1px solid var(--rule);
  color: var(--ink);
  transition: border-color .35s ease, color .35s ease;
}
.icon-btn:hover { border-color: var(--gilt); color: var(--gilt-ink); }
.icon-btn svg { width: 1.05rem; height: 1.05rem; }

/* — primary navigation — */
.nav { border-top: 1px solid var(--rule); }
.nav__list {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.6rem, 1.45vw, 2rem);
  flex-wrap: nowrap;
}
.nav__link {
  display: inline-flex; align-items: center; gap: .45em;
  padding: 1.05rem 0;
  font-size: clamp(.625rem, .555rem + .1vw, .6875rem);
  font-weight: 500;
  letter-spacing: clamp(.1em, .04em + .1vw, .17em);
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  position: relative;
  transition: color .3s ease;
}
.nav__link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: .7rem; height: 1px;
  background: var(--gilt);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--gilt-ink); }
.nav__link:hover::after,
.nav__item:focus-within > .nav__link::after,
.nav__link[aria-expanded="true"]::after { transform: scaleX(1); transform-origin: left; }
.nav__caret { width: .5rem; height: .5rem; opacity: .55; transition: transform .35s var(--ease); }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.nav__item { position: relative; }
.nav__cta { margin-left: clamp(.25rem, 1vw, 1rem); }
.nav__cta .nav__link {
  padding: .7rem clamp(.85rem, 1.1vw, 1.4rem);
  border: 1px solid var(--rule-gilt);
  color: var(--gilt-ink);
}
.nav__cta .nav__link::after { display: none; }
.nav__cta .nav__link:hover { background: var(--forest); border-color: var(--forest); color: var(--mint-100); }

.submenu {
  position: absolute; top: 100%; left: 50%; translate: -50% 0;
  min-width: 15rem; padding: .6rem 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 18px 46px rgba(30, 42, 27, .12);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .3s ease, transform .3s var(--ease), visibility .3s;
}
.nav__item:hover > .submenu,
.nav__item:focus-within > .submenu,
.submenu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu a {
  display: block; padding: .7rem 1.4rem;
  font-size: .78rem; letter-spacing: .04em; color: var(--ink-2);
  transition: background-color .3s ease, color .3s ease, padding-left .3s var(--ease);
}
.submenu a:hover, .submenu a:focus-visible { background: var(--mint-200); color: var(--forest); padding-left: 1.75rem; }

/* — search drawer — */
.search { display: grid; grid-template-rows: 0fr; border-top: 0 solid var(--rule); transition: grid-template-rows .45s var(--ease); }
.search.is-open { grid-template-rows: 1fr; border-top-width: 1px; }
.search__inner { overflow: hidden; }
.search__form { display: flex; align-items: center; gap: 1rem; padding-block: clamp(1rem, 2.5vw, 1.75rem); }
.search__form input {
  flex: 1; min-width: 0; padding: .85rem 0;
  border: 0; border-bottom: 1px solid var(--rule);
  background: transparent;
  font-family: var(--serif);
  font-size: clamp(1.05rem, .95rem + .6vw, 1.5rem);
  color: var(--ink);
}
.search__form input::placeholder { color: var(--ink-3); }
.search__form input:focus { outline: none; border-bottom-color: var(--gilt); }

/* — mobile drawer — */
.drawer {
  position: fixed; inset: 0; z-index: 150;
  background: var(--paper);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-1.25rem);
  transition: opacity .4s ease, transform .5s var(--ease), visibility .4s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.drawer__top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1.25rem; border-bottom: 1px solid var(--rule);
}
.drawer__top img { max-width: 10rem; }
.drawer__top .icon-btn { display: inline-grid; }
.drawer__nav { padding-block: clamp(1.5rem, 5vw, 3rem) 4rem; }
.drawer__group + .drawer__group { border-top: 1px solid var(--rule); }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 1.15rem 0;
  font-family: var(--serif); font-size: 1.2rem; color: var(--ink); text-align: left;
}
.drawer__head svg { width: .7rem; height: .7rem; color: var(--gilt); transition: transform .35s var(--ease); }
.drawer__head[aria-expanded="true"] svg { transform: rotate(180deg); }
.drawer__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.drawer__panel.is-open { grid-template-rows: 1fr; }
.drawer__panel > ul { overflow: hidden; }
.drawer__panel a {
  display: block; padding: .6rem 0 .6rem 1.25rem;
  font-size: .9375rem; color: var(--ink-2);
  border-left: 1px solid var(--rule);
}
.drawer__panel li:last-child a { margin-bottom: 1rem; }
.drawer__panel a:hover { color: var(--gilt-ink); border-left-color: var(--gilt); }
.drawer__contact { padding-block: 1.75rem; border-top: 1px solid var(--rule); display: grid; gap: .5rem; font-size: .875rem; }

/* --------------------------------------------------------------------------
   10. HERO — a photograph, mounted
   -------------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; }
.hero__frame {
  position: relative;
  /* Exactly the screen that is left below the chrome, so the fold lands on the
     bottom edge of the photograph and never past it. Concept 1's utility bar
     lives *inside* the masthead, so --header-h already measures the whole of
     it — subtracting a strip on top of that would double-count. */
  min-height: calc(100svh - var(--header-h, 11rem));
  display: grid;
  align-items: end;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }

/* THE HERO FILM.
   Concept 1 is self-contained and does not load tokens.css, so the film needs
   its own rules here. Without them the <video> renders at its intrinsic
   1920x1080 inside the frame and you see a crop of the left edge — which is
   exactly what went wrong on phones. */
.hero__media { background: linear-gradient(165deg, #2E3F2B, #1F2B1D); }
.hero__video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: saturate(.68) contrast(1.04) brightness(.9);
  opacity: 0;
  transition: opacity 1.6s ease;
}
.hero__video.is-playing { opacity: 1; }
.hero__video > img { width: 100%; height: 100%; object-fit: cover; }
/* The film is 540x960 — portrait. A portrait frame shows the whole figure, so
   phones need nothing. A landscape frame keeps only ~26% of the film's height,
   and centred that window lands on the waist. Her face is at ~25% down the
   frame, so the window is biased upwards. Orientation, not width: a phone held
   sideways has the desktop problem. */
@media (orientation: landscape) {
  .hero__video,
  .hero__video > img,
  .hero__media img { object-position: center 18%; }
}
/* A brand-green tint across the whole frame. The top carries a real wash of
   its own rather than sitting bare, so the eye never meets an abrupt jump
   from clear photograph to deep pool — the green is present everywhere and
   simply gathers towards the words. */
/* The film itself is masked away over the bottom third, so it dissolves into
   whatever the page beneath happens to be. No band, no second layer fading
   to a colour, and therefore no seam to see — the same technique used on the
   photographic sections further down. */
.hero__media {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.55) 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.55) 78%, transparent 100%);
}
/* Two layers: an even wash across the whole frame — stronger at the top than
   before — and a soft pool through the middle band where the words sit, which
   is gone again well before the dissolve begins. */
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(46, 63, 43, 0)   4%,
      rgba(46, 63, 43, .54) 20%,
      rgba(46, 63, 43, .64) 44%,
      rgba(46, 63, 43, .58) 62%,
      rgba(46, 63, 43, 0)   78%),
    linear-gradient(180deg,
      rgba(46, 63, 43, .60)  0%,
      rgba(46, 63, 43, .50) 40%,
      rgba(46, 63, 43, .54) 100%);
}
.hero__mount {
  position: absolute;
  inset: clamp(.85rem, 1.7vw, 1.6rem);
  z-index: 2; pointer-events: none;
  border: 1px solid var(--mount);
  border-bottom-color: transparent;
}
/* The words sit in the upper two-thirds, clear of the dissolve. */
.hero__inner {
  position: relative; z-index: 3;
  padding-block: 0 clamp(7rem, 20vh, 13rem);
  text-align: center;
}
/* Type reverses out of the photograph, as it does on the live site. */
.hero .eyebrow    { color: #DAC79E; }  /* 5.1:1 worst case over the pool */
.hero__title      { color: var(--mint-100); }
.hero__sub        { color: rgba(230, 248, 225, .95); }
.hero .btn        { background: var(--mint-100); border-color: var(--mint-100); color: var(--forest); }
.hero .btn::before{ background: transparent; }
.hero .btn:hover  { background: transparent; color: var(--mint-100); border-color: var(--mint-100); }
.hero__cue        { display: none; }
.hero__title { margin-bottom: clamp(1.1rem, 2.2vw, 1.75rem); }
.hero__sub {
  max-width: 40rem; margin-inline: auto;
  font-size: clamp(1.05rem, .96rem + .38vw, 1.25rem);
  line-height: 1.7;
}
.hero__actions { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* The opening sequence. The photograph settles, then the words arrive in
   order. It plays once, on load — nothing here is tied to scrolling. */
.js .hero__media img { transform: scale(1.07); }
.js .hero.is-ready .hero__media img { transform: scale(1); transition: transform 2.8s cubic-bezier(.16, 1, .3, 1); }

.js .hero__inner > * { opacity: 0; transform: translateY(18px); }
.js .hero.is-ready .hero__inner > * { animation: rise .95s var(--ease) forwards; }
.js .hero.is-ready .hero__inner > *:nth-child(1) { animation-delay: .10s; }
.js .hero.is-ready .hero__inner > *:nth-child(2) { animation-delay: .24s; }
.js .hero.is-ready .hero__inner > *:nth-child(3) { animation-delay: .40s; }
.js .hero.is-ready .hero__inner > *:nth-child(4) { animation-delay: .54s; }
.js .hero.is-ready .hero__inner > *:nth-child(5) { animation-delay: .70s; }

@keyframes rise { to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   11. EDITORIAL SPLIT
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(2rem, 5.5vw, 5.5rem);
  align-items: center;
}
.split--top { align-items: start; }
.split--wide-left  { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
.split--wide-right { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
.split__media--first { order: -1; }

/* --------------------------------------------------------------------------
   12. THE SIXTEEN STANDARDS
   -------------------------------------------------------------------------- */
.standards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.75rem, 4vw, 4rem);
  border-top: 1px solid var(--rule);
}
.standards li { border-bottom: 1px solid var(--rule); }
.standards__row { display: block; padding: clamp(1.05rem, 2vw, 1.4rem) 0; transition: color .3s ease; }
a.standards__row:hover { color: var(--gilt-ink); }
.standards__k {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1rem, .95rem + .32vw, 1.2rem);
  line-height: 1.25;
  color: var(--ink);
}
a.standards__row:hover .standards__k { color: var(--gilt-ink); }
.standards__bar { display: none; }
.standards__v { display: block; margin-top: .3rem; font-size: .875rem; line-height: 1.62; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   13. PRESS
   -------------------------------------------------------------------------- */
.press {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1.75rem, 4.5vw, 3.75rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.press li { flex: 0 1 7.5rem; display: grid; place-items: center; }
.press img {
  width: 100%; max-width: 8.5rem; height: auto;
  filter: brightness(0); opacity: .5;
  transition: opacity .45s ease;
}
.press li:hover img { opacity: .95; }

/* --------------------------------------------------------------------------
   14. PROCESS — the page's one genuine sequence
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.25rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.step { display: grid; gap: 1.25rem; align-content: start; }
/* Roman numerals, not 01/02/03 — a house established in 1991. */
.step__num { font-family: var(--serif); font-size: 1rem; line-height: 1; letter-spacing: .02em; color: var(--gilt-ink); }
.step__num::after { content: ""; display: block; width: 1.75rem; height: 1px; margin-top: .7rem; background: var(--rule-gilt); }
.step__title { margin-top: -.35rem; }
.step p { font-size: .9375rem; line-height: 1.72; }

.pullquote {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-block: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid var(--rule-gilt);
  border-bottom: 1px solid var(--rule-gilt);
  text-align: center;
}
.pullquote p {
  max-width: 46rem; margin-inline: auto;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.3rem, 1.05rem + 1.05vw, 2rem);
  line-height: 1.42;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   15. THE ENGRAVED INVITATION
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  padding: clamp(1.9rem, 4.5vw, 3.4rem);
  background: var(--paper);
  border: 1px solid var(--rule-gilt);
}
.card::before { content: ""; position: absolute; inset: .5rem; border: 1px solid rgba(169, 143, 95, .2); pointer-events: none; }
.card > * + * { margin-top: clamp(1rem, 2vw, 1.5rem); }

.ticks { display: grid; gap: .85rem; }
.ticks li { display: flex; gap: .8em; font-size: .9375rem; line-height: 1.6; }
.ticks li::before { content: "\2756"; flex: none; font-size: .6em; line-height: 2.4; color: var(--gilt); }

/* --------------------------------------------------------------------------
   16. DEFINITIONS
   -------------------------------------------------------------------------- */
.defs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 3rem);
  margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
}
.defs li { padding-top: 1.4rem; border-top: 1px solid var(--rule-gilt); }
.defs__k { display: block; font-family: var(--serif); font-size: clamp(1.08rem, 1rem + .3vw, 1.3rem); color: var(--ink); }
.defs__dash { color: var(--gilt-ink); }
.defs__v { display: block; margin-top: .5rem; font-size: .9125rem; line-height: 1.7; color: var(--ink-3); }

.disclaimer {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
  border-left: 2px solid var(--gilt);
  background: var(--mint-200);
  font-family: var(--serif); font-style: italic;
  font-size: clamp(.9375rem, .9rem + .25vw, 1.05rem);
  line-height: 1.65;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   17. DESTINATIONS
   -------------------------------------------------------------------------- */
/* Two columns, not four: at four, "Global Destinations" wraps and breaks the
   row. Two gives every name a full line and lets the type run larger. */
.cities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 4.5rem);
  border-top: 1px solid var(--rule);
  margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
}
.cities li { border-bottom: 1px solid var(--rule); }
.cities a {
  display: flex; align-items: baseline; gap: .7em;
  padding: clamp(1rem, 2vw, 1.4rem) clamp(.5rem, 1.5vw, 1rem);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.1rem + .85vw, 1.95rem);
  line-height: 1.2;
  color: var(--ink);
  transition: background-color .4s var(--ease), padding-left .4s var(--ease), color .3s ease;
}
.cities a:hover, .cities a:focus-visible {
  background: var(--mint-200);
  padding-left: clamp(1rem, 2.5vw, 1.75rem);
  color: var(--forest);
}
.cities__mark { font-size: .4em; color: var(--gilt); transform: translateY(-.35em); }

/* --------------------------------------------------------------------------
   18. COLLECTION
   -------------------------------------------------------------------------- */
.collection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr));
  gap: clamp(1.5rem, 3.2vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.collection figcaption { padding-top: 1.15rem; }
.collection__k { display: block; font-family: var(--serif); font-size: clamp(1.08rem, 1rem + .32vw, 1.3rem); line-height: 1.25; color: var(--ink); }
.collection__colon { color: var(--gilt-ink); }
.collection__v { display: block; margin-top: .45rem; font-size: .875rem; line-height: 1.65; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   19. CONTACT
   -------------------------------------------------------------------------- */
/* Four contact lines read as a 2 x 2 block, not a stacked list. */
.contact__lines {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  column-gap: clamp(1.75rem, 4vw, 3.5rem);
  row-gap: .9rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--rule-gilt);
}
.contact__line { display: flex; align-items: baseline; gap: .9em; font-size: .9375rem; }
.contact__label {
  flex: none; min-width: 3.25rem;
  font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gilt-ink);
}
.contact__line a { color: var(--ink); transition: color .3s ease; }
.contact__line a:hover { color: var(--gilt-ink); }

/* --------------------------------------------------------------------------
   20. FOOTER — the closing bar, echoing the strip at the top
   -------------------------------------------------------------------------- */
/* Mint, not dark green. The page gradient ends at #DFEFD9 and the footer
   picks it up and carries it a shade deeper — so the document closes without
   ever hitting a hard, striking block of colour. */
.foot {
  background: linear-gradient(180deg, #DFEFD9 0%, #D6E9CF 100%);
  color: var(--ink-2);
  position: relative; z-index: 4;
}
.foot__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: clamp(2rem, 4vw, 3.25rem);
  padding-block: clamp(3.25rem, 6vw, 5.5rem);
}
.foot__h { margin-bottom: 1.1rem; font-family: var(--serif); font-size: 1.1rem; color: var(--forest); }
/* Tight enough to read as a set, not as fifteen separate lines. */
.foot__links { display: grid; gap: .28rem; }
.foot__links a {
  font-size: .84375rem; line-height: 1.45; color: var(--ink-2);
  transition: color .3s ease, padding-left .3s var(--ease);
}
.foot__links a:hover { color: var(--gilt-ink); padding-left: .35rem; }

.foot__note { font-size: .8125rem; color: var(--ink-3); }
.foot__tel { display: grid; gap: .5rem; margin-top: .9rem; }
.foot__tel a, .foot__mail a { font-size: .9375rem; color: var(--ink); transition: color .3s 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: .6875rem; letter-spacing: .18em; }
.foot__mail { margin-top: 1.4rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.foot__social {
  display: inline-grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--rule-gilt);
  color: var(--ink);
  transition: border-color .3s ease, color .3s ease;
}
.foot__social:hover { border-color: var(--gilt); color: var(--gilt-ink); }
.foot__social svg { width: 1rem; height: 1rem; }

.pay { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.pay li {
  padding: .45rem .85rem;
  border: 1px solid var(--rule-gilt);
  font-size: .625rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3);
}

/* A true 25 / 50 / 25 — the copyright gets the centre half, the logo and the
   locale an equal quarter each, so the bar reads as balanced. */
.foot__base {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--rule-gilt);
}
/* The wordmark fills its quarter of the base bar, aligned to the same left
   edge as the columns above it — otherwise it floats mid-column and opens a
   gap beside the copyright that the locale side does not have. */
.foot__brand { justify-self: start; width: 100%; }
.foot__brand img { width: min(100%, 15.5rem); opacity: .95; }
.foot__copy { font-size: .75rem; line-height: 1.75; color: var(--ink-3); text-align: center; }
.foot__locale { display: flex; gap: clamp(1rem, 2.5vw, 1.75rem); flex-wrap: wrap; justify-self: end; }
.foot__locale a {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2);
  transition: color .3s ease;
}
.foot__locale a:hover { color: var(--gilt-ink); }
.foot__flag {
  width: 1.25rem; height: auto; flex: none;
  border: 1px solid rgba(56, 77, 52, .22);
  transition: transform .35s var(--ease);
}
.foot__locale a:hover .foot__flag { transform: translateY(-1px); }

/* --------------------------------------------------------------------------
   21. MOTION — one gentle reveal, nothing more
   -------------------------------------------------------------------------- */
/* Content is visible by default. Only a JS-capable browser opts into the
   reveal, so a script failure can never hide the page from a reader or a
   crawler. */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .hero__inner > * { opacity: 1; transform: none; }
  .js .hero__media img { transform: none; }
}

/* --------------------------------------------------------------------------
   22. RESPONSIVE — the layout adjusts to its container, not to a device
   -------------------------------------------------------------------------- */

/* Once the page moves, the utility strip retires so the pinned masthead
   gives ~42px of reading height back. */
@media (min-width: 68.8125rem) {
  .masthead .utility { max-height: 3rem; overflow: hidden; transition: max-height .45s var(--ease); }
  .masthead.is-scrolled .utility { max-height: 0; }
}

@media (max-width: 68.75rem) {          /* 1100px — nav folds into the drawer */
  .nav { display: none; }
  .icon-btn { display: inline-grid; }
  .header-search { display: none; }
  .brand-row { grid-template-columns: auto 1fr auto; padding-block: 1rem; }
  .brand { grid-column: 1; justify-self: start; }
  .brand-row__left { display: none; }
  .brand-row__right { grid-column: 3; width: auto; justify-content: flex-end; }
  .split--wide-left,
  .split--wide-right { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 48rem) {             /* 768px */
  .utility__group--tel { display: none; }
  .utility__group--tel.is-open { display: flex; width: 100%; padding-bottom: .75rem; }
  .utility__toggle { display: inline-flex; }
  .utility__sep { display: none; }
  .foot__base { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .foot__locale { justify-self: center; justify-content: center; }
  .contact__lines { grid-template-columns: auto; }
  .split__media--first { order: 0; }
  .standards { grid-template-columns: 1fr; }
  .defs      { grid-template-columns: 1fr; }
  .cities    { grid-template-columns: 1fr; }
  .stack { padding-bottom: 0; }
  .stack__a { width: 100%; }
  .stack__b { position: static; width: 100%; margin-top: 1rem; padding: 0; box-shadow: none; }
  /* On a phone the hero fills exactly the screen that is left below the
     chrome — no more, so it never runs on past the fold, and no less, so
     the photograph still gets a real band above the words. Both variables are
     measured at runtime; the fallbacks cover a no-JS load. */
  .hero__frame {
    min-height: calc(100vh - var(--header-h, 11rem));
    min-height: max(26rem, calc(100svh - var(--header-h, 11rem)));
  }
  .hero__inner { padding-block: 0 clamp(4.5rem, 14vh, 8rem); }
}

@media (max-width: 30rem) {             /* 480px */
  .plate--cinema { aspect-ratio: 4 / 3; }
  .plate--wide { aspect-ratio: 3 / 2; }
  .btn { width: 100%; justify-content: center; padding-inline: 1.25rem; }
  .steps { grid-template-columns: 1fr; }
  /* NB: .hero__frame min-height and .cities column count are set in the 48rem
     block above and must not be re-declared here — this block comes later and
     would win the cascade. */
}

@media print {
  .masthead, .drawer, .search, .btn, .hero__cue { display: none !important; }
  body { background: #fff; color: #000; }
  body::after { display: none; }
  .plate::before, .plate::after, .immersion__bg::after { display: none; }
}