/* ==========================================================================
   CONCEPT 5 — "THE APPROVED FIGMA"
   Built to the signed-off Figma desktop layout, in the house palette.
   Structure, section order, card system, rules, bands and footer follow the
   Figma exactly. Two devices are borrowed from the supplied reference: the
   welcome panel with its standing word and drop capital, and the medallion
   feature card. Both are re-drawn in mint, forest and brass — no black, no
   striking gold.
   ========================================================================== */

:root {
  --shell: 82rem;
  --pad:   clamp(1.25rem, 4vw, 3.5rem);
  --card:  #E4F5DF;
  --card-2:#DCEFD6;
  --line:  rgba(56, 77, 52, .18);
}

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

/* A whisper of guilloche behind the page — the Figma's patterned ground,
   translated to brass at 3%. Felt, not seen. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .045;
  background-image:
    repeating-linear-gradient(45deg,  var(--gilt) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-45deg, var(--gilt) 0 1px, transparent 1px 14px);
}
main, .masthead, .foot, .strip { position: relative; z-index: 1; }

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

.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; }

/* --------------------------------------------------------------------------
   TYPE — the Figma's hierarchy, our faces
   -------------------------------------------------------------------------- */
.d1 { font-size: clamp(1.85rem, .9rem + 3.3vw, 4rem); line-height: 1.12; letter-spacing: .01em; }
.d2 { font-size: clamp(1.6rem, 1.05rem + 1.9vw, 2.9rem); line-height: 1.18; letter-spacing: -.008em; }
.d3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.6rem);   line-height: 1.3; }
.d4 { font-size: clamp(1.02rem, .96rem + .3vw, 1.22rem); line-height: 1.35; }
.lede { font-size: clamp(1.08rem, 1rem + .5vw, 1.45rem); line-height: 1.6; }

/* Centred section head with the Figma's short rule beneath it. */
.head { text-align: center; max-width: 52rem; margin-inline: auto; }
.head--left { text-align: left; margin-inline: 0; }
.head__rule { width: clamp(9rem, 22vw, 16rem); height: 1px; background: var(--forest); opacity: .45; margin: clamp(.9rem, 2vw, 1.4rem) auto clamp(1.1rem, 2.4vw, 1.9rem); }
.head--left .head__rule { margin-inline: 0; }
.head p { margin-top: 0; color: var(--ink-2); }

.eyebrow { font-size: .625rem; letter-spacing: .34em; color: var(--gilt-ink); margin-bottom: 1rem; }
.eyebrow::before { content: none; }

.section { padding-block: clamp(2.75rem, 6vw, 6rem); }

/* --------------------------------------------------------------------------
   ORNAMENT — the Figma's flourish and the reference's medallion, in brass
   -------------------------------------------------------------------------- */
.medallion { display: block; width: clamp(4rem, 7vw, 5.5rem); height: auto; margin: 0 auto; color: var(--gilt); }
.flourish  { display: block; width: clamp(5rem, 9vw, 7rem);  height: auto; margin: 0 auto clamp(1rem, 2vw, 1.6rem); color: var(--gilt-soft); }

/* --------------------------------------------------------------------------
   MASTHEAD — utility strip, then Menu / wordmark / Contact Us
   -------------------------------------------------------------------------- */
.strip { background: var(--forest); color: var(--ink-on-dark-2); font-size: .7rem; letter-spacing: .04em; }
.strip__inner { display: flex; align-items: center; gap: clamp(.6rem, 1.6vw, 1.4rem); flex-wrap: wrap; min-height: 2.3rem; }
.strip__locale { display: inline-flex; align-items: center; gap: .4em; font-size: .65rem; letter-spacing: .18em; 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 { display: inline-flex; align-items: center; gap: .4em; transition: color .3s ease; white-space: nowrap; }
.strip a:hover { color: var(--mint-100); }
.strip span { color: var(--gilt-soft); letter-spacing: .12em; }
.strip svg { width: .82em; height: .82em; opacity: .8; }
.strip__toggle { display: none; font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gilt-soft); }
.strip__search { margin-left: auto; }

.masthead { position: sticky; top: 0; z-index: 100; background: rgba(239,248,235,.97); backdrop-filter: saturate(1.3) blur(14px); border-bottom: 1px solid var(--line); }
.masthead__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding-block: clamp(.7rem, 1.6vw, 1.15rem); }
.mbtn { display: inline-flex; align-items: center; gap: .55em; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); transition: color .3s ease; }
.mbtn:hover { color: var(--gilt-ink); }
.mbtn svg { width: 1rem; height: 1rem; }
.masthead__row > :last-child { justify-self: end; }
.brand { grid-column: 2; justify-self: center; }
.brand img { width: clamp(9rem, 17vw, 13.5rem); }

.search { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.search.is-open { grid-template-rows: 1fr; border-top: 1px solid var(--line); }
.search__inner { overflow: hidden; }
.search__form { display: flex; align-items: center; gap: 1rem; padding-block: clamp(.9rem, 2vw, 1.5rem); }
.search__form input { flex: 1; min-width: 0; padding: .8rem 0; border: 0; border-bottom: 1px solid var(--line); 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); }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
/* Exactly the screen left below the chrome. Concept 5's strip is a sibling
   above the sticky masthead, so both come off. */
.hero { position: relative; isolation: isolate; min-height: calc(100svh - var(--header-h, 4.5rem) - var(--strip-h, 2.3rem)); 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) 10%, rgba(40,55,37,.44) 32%, rgba(40,55,37,.56) 54%, rgba(40,55,37,.40) 72%, rgba(40,55,37,0) 88%),
    linear-gradient(180deg, rgba(40,55,37,.60) 0%, rgba(40,55,37,.46) 46%, rgba(40,55,37,.58) 100%);
}
.hero__inner { position: relative; z-index: 3; text-align: center; padding-block: clamp(3rem, 8vw, 6rem); }
/* Sentence case, not caps: a large serif set in capitals loses its italic and
   reads as signage rather than as a masthead. The measure is widened to about
   34 characters so the line breaks two-up — "Discreet Elite Escort and" /
   "Travel Companion Agency" — instead of three. */
.hero__title { color: var(--mint-100); letter-spacing: -.014em; max-width: 34ch; margin-inline: auto; }
.hero__sub { margin-top: clamp(.9rem, 2vw, 1.4rem); font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, .95rem + .55vw, 1.5rem); color: rgba(230,248,225,.95); }
.hero__actions { display: flex; flex-wrap: wrap; gap: clamp(.6rem, 1.6vw, 1rem); justify-content: center; margin-top: clamp(1.5rem, 3vw, 2.4rem); }
.hero .btn { background: transparent; border: 1px solid rgba(230,248,225,.75); color: var(--mint-100); }
.hero .btn::before { background: var(--mint-100); }
.hero .btn:hover { color: var(--forest); border-color: var(--mint-100); }

/* --------------------------------------------------------------------------
   THE WELCOME PANEL — standing word, drop capital, overlapping plate
   -------------------------------------------------------------------------- */
.welcome { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.welcome__panel { position: relative; background: var(--card); padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1.5rem, 3.5vw, 3rem) clamp(1.75rem, 4vw, 3.25rem) clamp(3.5rem, 7vw, 6rem); }
.welcome__panel::before { content: ""; position: absolute; inset: .6rem; border: 1px solid var(--rule-gilt); pointer-events: none; }
/* The standing word, set in the margin of the panel. */
.welcome__standing {
  position: absolute; left: clamp(.9rem, 2vw, 1.7rem); top: 50%;
  transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl;
  font-family: var(--serif); font-size: clamp(1.6rem, 3.4vw, 2.9rem);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--forest); opacity: .10; pointer-events: none; user-select: none;
}
.welcome__panel .prose > p:first-of-type::first-letter {
  float: left; font-family: var(--serif); font-size: 3.6em; line-height: .8;
  padding: .06em .14em 0 0; color: var(--forest);
}
.welcome__media { position: relative; }
@media (min-width: 62rem) {
  .welcome { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); }
  .welcome__media { margin-left: clamp(-5rem, -5vw, -2rem); }
}

/* --------------------------------------------------------------------------
   THE CARD SYSTEM — the Figma's core building block
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   THE REGISTER
   Two earlier attempts failed here. Separate mint tiles in an auto-fit grid
   gave ten different heights and a ragged edge. Forcing every cell onto shared
   subgrid rows fixed the alignment but bought a worse problem: the title row
   sizes to the tallest title in the row, so a two-word entry sat above a
   two-line hole before its rule.

   The answer is not to align the parts — it is to have fewer parts. A hairline
   above each entry, the term in the serif, the definition beneath it, and
   nothing else: no fill, no box, no middle rule, no forced row. Each entry is
   as tall as it needs to be, the rules across the top of each row line up
   because the grid rows do, and there is no gap to be uneven.

   The column count divides the item count exactly, so no row is ever left with
   an orphan: sixteen entries run four across, four entries run two by two.
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 3.2vw, 3rem);
  row-gap: clamp(1.6rem, 3.2vw, 2.6rem);
}
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 62rem) { .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 44rem) {
  .cards, .cards--4 { grid-template-columns: minmax(0, 1fr); }
}

.cards > li { display: flex; }
.card {
  position: relative;
  display: flex; flex-direction: column;
  width: 100%;
  padding-top: clamp(.9rem, 1.8vw, 1.25rem);
  border-top: 1px solid var(--rule-gilt);
  transition: border-color .5s ease;
}
a.card:hover, a.card:focus-visible { border-top-color: var(--gilt); }
a.card:hover .card__t { color: var(--gilt-ink); }

.card__t { font-family: var(--serif); font-size: clamp(1.02rem, .96rem + .32vw, 1.2rem); line-height: 1.3; color: var(--forest); transition: color .4s ease; }
/* The middle rule is what created the hole. It is gone; the hairline above the
   entry is the only rule the register needs. */
.card__rule { display: none; }
.card__b { margin-top: .45rem; font-size: .85rem; line-height: 1.7; color: var(--ink-2); }
.card--center { text-align: left; }

/* --------------------------------------------------------------------------
   THE SERVICE MOSAIC
   Five services in an auto-fit grid left a four-and-one orphan row and five
   boxes of different heights, because each title wraps to a different number
   of lines. Both problems come from letting the content size the tiles.

   So the grid sizes the tiles instead: a fixed four-column field with the
   first service held as a lead tile two columns wide and two rows deep, and
   the remaining four filling the 2x2 block beside it. Every edge lines up and
   nothing is orphaned.
   -------------------------------------------------------------------------- */
.services { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(9.5rem, 15vw, 13.5rem); gap: clamp(.6rem, 1.2vw, 1rem); list-style: none; padding: 0; margin: 0; }
.services__lead { grid-column: span 2; grid-row: span 2; }

.svc { position: relative; display: flex; height: 100%; overflow: hidden; isolation: isolate; text-decoration: none; }
.svc__media { position: absolute; inset: 0; z-index: 0; }
.svc__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.1s var(--ease); }
.svc__media::after {
  content: \; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(40,55,37,.30) 0%, rgba(40,55,37,.52) 46%, rgba(40,55,37,.86) 100%);
  transition: opacity .6s ease;
}
.svc::after {
  content: \; position: absolute; inset: clamp(.45rem, .9vw, .7rem); z-index: 2;
  border: 1px solid rgba(255,255,255,.34); pointer-events: none; transition: border-color .6s ease;
}
.svc__in { position: relative; z-index: 3; margin-top: auto; display: flex; flex-direction: column; padding: clamp(1rem, 2.1vw, 1.6rem); }
.svc__n { font-size: .58rem; letter-spacing: .3em; color: var(--gilt-soft); margin-bottom: .5rem; }
.svc__t { font-family: var(--serif); font-size: clamp(1rem, .93rem + .34vw, 1.22rem); line-height: 1.28; color: var(--mint-100); }
.services__lead .svc__t { font-size: clamp(1.3rem, 1.05rem + 1.05vw, 2rem); line-height: 1.2; }
.svc__b {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: .8rem; padding-top: .7rem; border-top: 1px solid rgba(205,184,140,.42);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gilt-soft);
}
.svc__go { transition: transform .5s var(--ease); }
.svc:hover .svc__media img, .svc:focus-visible .svc__media img { transform: scale(1); }
.svc:hover .svc__media::after, .svc:focus-visible .svc__media::after { opacity: .82; }
.svc:hover::after, .svc:focus-visible::after { border-color: rgba(205,184,140,.8); }
.svc:hover .svc__go, .svc:focus-visible .svc__go { transform: translateX(.35rem); }

@media (max-width: 62rem) {
  .services { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(9.5rem, 22vw, 13rem); }
  .services__lead { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 34rem) {
  .services { grid-template-columns: 1fr; grid-auto-rows: clamp(10rem, 42vw, 14rem); }
  .services__lead { grid-column: span 1; }
}

/* An image card: photograph, forest veil, words reversed out. */
.card--photo { padding: 0; border: 0; overflow: hidden; min-height: clamp(13rem, 26vw, 20rem); }
.card--photo .card__img { position: absolute; inset: 0; }
.card--photo img { width: 100%; height: 100%; object-fit: cover; }
.card--photo .card__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40,55,37,.30) 0%, rgba(40,55,37,.62) 60%, rgba(40,55,37,.82) 100%); }
.card--photo .card__in { position: relative; z-index: 2; margin-top: auto; padding: clamp(1.1rem, 2.4vw, 1.85rem); }
.card--photo .card__t { color: var(--mint-100); font-size: clamp(1.3rem, 1.05rem + 1vw, 1.95rem); }
.card--photo .card__b { color: rgba(230,248,225,.92); }

/* --------------------------------------------------------------------------
   THE MEDALLION CARD — from the supplied reference, in mint and brass
   -------------------------------------------------------------------------- */
.plan { max-width: 34rem; margin-inline: auto; }
.plan__crown { margin-bottom: clamp(-2.25rem, -3vw, -1.5rem); position: relative; z-index: 2; }
.plan__body { background: var(--card); border: 1px solid var(--rule-gilt); padding: clamp(2.75rem, 5vw, 4rem) clamp(1.5rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.25rem); text-align: center; }
.plan__eyebrow { font-size: .625rem; letter-spacing: .34em; text-transform: uppercase; color: var(--gilt-ink); }
.plan__t { font-family: var(--serif); font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2.1rem); line-height: 1.2; color: var(--forest); margin-top: .5rem; text-transform: uppercase; letter-spacing: .02em; }
.plan__d { margin-top: .9rem; font-size: .9rem; line-height: 1.75; color: var(--ink-2); }
.plan__list { margin-top: clamp(1.25rem, 2.5vw, 1.85rem); border-top: 1px solid var(--line); }
.plan__list li { padding: .8rem .5rem; border-bottom: 1px solid var(--line); font-size: .875rem; color: var(--ink-2); }
.plan__foot { margin-top: clamp(1.25rem, 2.5vw, 1.85rem); }

/* --------------------------------------------------------------------------
   BANDS — the Figma's deep-green statement and CTA strips
   -------------------------------------------------------------------------- */
.band {
  background: linear-gradient(170deg, var(--forest), #2E3F2B);
  color: var(--ink-on-dark-2);
  padding-block: clamp(2.5rem, 6vw, 5rem);
  text-align: center;
}
.band__t { font-family: var(--serif); font-size: clamp(1.25rem, 1rem + 1.15vw, 2.05rem); line-height: 1.42; color: var(--mint-100); max-width: 46rem; margin-inline: auto; }
.band .btn { background: var(--mint-100); border-color: var(--mint-100); color: var(--forest); margin-top: clamp(1.25rem, 2.5vw, 2rem); }
.band .btn::before { background: transparent; }
.band .btn:hover { background: transparent; color: var(--mint-100); }

.cta-bar {
  display: block; width: 100%; text-align: center;
  background: var(--forest); color: var(--mint-100);
  padding: clamp(1rem, 2.2vw, 1.5rem) 1.25rem;
  font-family: var(--serif); font-size: clamp(.8125rem, .76rem + .22vw, 1rem);
  letter-spacing: .16em; text-transform: uppercase;
  transition: background-color .45s ease, color .45s ease;
}
.cta-bar:hover { background: var(--gilt-ink); color: var(--mint-100); }

/* A full-bleed photographic band with the words reversed out of it. */
.feature { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3rem, 7vw, 6rem); }
.feature__bg { position: absolute; inset: 0; z-index: -1; }
.feature__bg img { width: 100%; height: 100%; object-fit: cover; }
.feature__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(40,55,37,.90) 0%, rgba(40,55,37,.78) 46%, rgba(40,55,37,.55) 100%); }
.feature__in { max-width: 44rem; }
.feature .d2, .feature .d3 { color: var(--mint-100); }
.feature__rule { width: 4.5rem; height: 1px; background: var(--gilt-soft); margin: 1rem 0 1.25rem; }
.feature p { color: rgba(230,248,225,.92); }
.feature .btn { background: var(--mint-100); border-color: var(--mint-100); color: var(--forest); }
.feature .btn::before { background: transparent; }
.feature .btn:hover { background: transparent; color: var(--mint-100); }

/* --------------------------------------------------------------------------
   PRESS — the Figma's two rows
   -------------------------------------------------------------------------- */
.press { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem, 4.5vw, 3.75rem); }
.press li { flex: 0 1 7rem; display: grid; place-items: center; }
.press img { width: 100%; max-width: 8rem; filter: brightness(0); opacity: .5; transition: opacity .4s ease; }
.press li:hover img { opacity: .95; }

/* --------------------------------------------------------------------------
   CITY LIST — two columns with brass pins
   -------------------------------------------------------------------------- */
.cities { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); column-gap: clamp(1rem, 2.5vw, 2rem); row-gap: .1rem; margin-top: .35rem; }
.cities a { display: flex; align-items: center; gap: .5em; padding: .3rem 0; font-size: .875rem; color: var(--ink-2); transition: color .3s ease, padding-left .3s var(--ease); }
.cities a:hover { color: var(--gilt-ink); padding-left: .25rem; }
.cities svg { width: .78em; height: .78em; flex: none; color: var(--gilt); }

/* --------------------------------------------------------------------------
   THE PROCESS — numbered step cards
   -------------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: clamp(.85rem, 1.9vw, 1.5rem); }
.step { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(1.25rem, 2.6vw, 2rem) clamp(1rem, 2.2vw, 1.6rem); background: var(--card); border: 1px solid var(--line); }
.step__disc { width: clamp(3.25rem, 5vw, 4.25rem); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--mint-100); border: 1px solid var(--rule-gilt); }
.step__disc img { width: 56%; height: 56%; object-fit: contain; mix-blend-mode: multiply; opacity: .8; }
.step__num { margin-top: .8rem; font-size: .6rem; letter-spacing: .34em; text-transform: uppercase; color: var(--gilt-ink); }
.step__t { margin-top: .35rem; font-family: var(--serif); font-size: clamp(1rem, .95rem + .3vw, 1.15rem); line-height: 1.3; color: var(--forest); }
.step p { margin-top: .6rem; font-size: .82rem; line-height: 1.7; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   MISC BLOCKS
   -------------------------------------------------------------------------- */
.prose { max-width: 42rem; }
.prose--wide { max-width: 56rem; }
.prose--center { margin-inline: auto; }
.note { font-size: .85rem; color: var(--ink-3); }

.quote { max-width: 46rem; margin-inline: auto; text-align: center; padding-block: clamp(1.25rem, 2.5vw, 2rem); }
.quote p { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 1rem + .8vw, 1.7rem); line-height: 1.5; color: var(--forest); }

.disclaimer { max-width: 52rem; margin-inline: auto; padding: clamp(1rem, 2.2vw, 1.5rem) clamp(1.1rem, 2.6vw, 1.85rem); background: var(--card-2); border-left: 2px solid var(--gilt); font-family: var(--serif); font-style: italic; font-size: clamp(.9rem, .87rem + .2vw, 1rem); line-height: 1.7; color: var(--ink); }

.linklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: .5rem clamp(1rem, 2.5vw, 2rem); }
.linklist a { display: flex; align-items: baseline; gap: .7em; padding: .7rem .85rem; background: var(--card); border: 1px solid var(--line); font-size: .9rem; line-height: 1.5; color: var(--ink); transition: background-color .4s ease, color .3s ease, transform .4s var(--ease); }
.linklist a:hover { background: var(--mint-100); color: var(--gilt-ink); transform: translateX(3px); }
.linklist .m { flex: none; font-size: .6em; color: var(--gilt); transform: translateY(-.15em); }
.linklist .a { margin-left: auto; color: var(--gilt-ink); opacity: .4; font-size: .8rem; }
.linklist a:hover .a { opacity: 1; }

.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 1.8vw, 1.4rem); }
.gallery figcaption { padding-top: .85rem; }
.gallery__k { display: block; font-family: var(--serif); font-size: clamp(.95rem, .9rem + .28vw, 1.12rem); line-height: 1.32; color: var(--forest); }
.gallery__colon { color: var(--gilt-ink); }
.gallery__v { display: block; margin-top: .3rem; font-size: .8rem; line-height: 1.7; color: var(--ink-3); }

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

.btn { padding: .95em 2em; font-size: clamp(.7rem, .67rem + .16vw, .8125rem); letter-spacing: .18em; }

/* --------------------------------------------------------------------------
   FOOTER — the Figma's four columns and base bar
   -------------------------------------------------------------------------- */
.foot { background: #E4F5DF; border-top: 1px solid var(--line); }
.foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: clamp(1.5rem, 3.5vw, 3rem); padding-block: clamp(2.5rem, 5vw, 4rem); }
.foot__h { margin-bottom: .9rem; font-family: var(--serif); font-size: 1.02rem; color: var(--forest); }
.foot__links { display: grid; gap: .26rem; }
.foot__links a { font-size: .8125rem; line-height: 1.5; color: var(--ink-2); transition: color .3s ease, padding-left .3s var(--ease); }
.foot__links a:hover { color: var(--gilt-ink); padding-left: .3rem; }
.foot__note { font-size: .8rem; line-height: 1.7; color: var(--ink-3); }
.foot__tel { display: grid; gap: .35rem; margin-top: .7rem; }
.foot__tel a, .foot__mail a { font-size: .875rem; 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: .45em; font-size: .62rem; letter-spacing: .2em; }
.foot__mail { margin-top: 1rem; display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.foot__social { display: inline-grid; place-items: center; width: 2rem; height: 2rem; 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: .95rem; height: .95rem; }
.pay { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.pay li { padding: .35rem .7rem; border: 1px solid var(--rule-gilt); font-size: .6rem; letter-spacing: .16em; 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.5rem, 3.2vw, 2.5rem); border-top: 1px solid var(--line); }
.foot__brand { justify-self: start; width: 100%; }
.foot__brand img { width: min(100%, 15rem); opacity: .95; }
.foot__copy { font-size: .7rem; line-height: 1.8; color: var(--ink-3); text-align: center; }
.foot__locale { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .45rem 1rem; justify-self: end; }
.foot__locale a { display: inline-flex; align-items: center; gap: .55em; font-size: .65rem; 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.15rem; flex: none; border: 1px solid rgba(56,77,52,.2); }

/* --------------------------------------------------------------------------
   DRAWER — the Figma's Menu holds the whole navigation
   -------------------------------------------------------------------------- */
.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; 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(--line); }
.drawer__top img { width: 10rem; }
.icon-btn { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--line); color: var(--ink); transition: border-color .3s ease, color .3s ease; }
.icon-btn:hover { border-color: var(--gilt); color: var(--gilt-ink); }
.icon-btn svg { width: 1.05rem; height: 1.05rem; }
.drawer__nav { padding-block: clamp(1.25rem, 4vw, 2.5rem) 3rem; columns: 2; column-gap: clamp(1.5rem, 4vw, 3.5rem); }
.drawer__group { break-inside: avoid; border-top: 1px solid var(--line); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .9rem 0; font-family: var(--serif); font-size: 1.1rem; color: var(--ink); text-align: left; }
.drawer__head svg { width: .68rem; height: .68rem; 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: .5rem 0 .5rem 1.1rem; font-size: .9rem; color: var(--ink-2); border-left: 1px solid var(--line); }
.drawer__panel li:last-child a { margin-bottom: .8rem; }
.drawer__contact { padding-block: 1.5rem; border-top: 1px solid var(--line); display: grid; gap: .45rem; font-size: .875rem; }

/* --------------------------------------------------------------------------
   NARROW
   -------------------------------------------------------------------------- */
@media (max-width: 60rem) {
  .drawer__nav { columns: 1; }
  .welcome__standing { display: none; }
  .welcome__panel { padding-left: clamp(1.5rem, 3.5vw, 3rem); }
}
@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__search { margin-left: 0; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .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; }
}

/* Opening sequence */
.js .hero__inner > * { opacity: 0; transform: translateY(16px); }
.js .hero.is-ready .hero__inner > * { animation: rise 1.05s var(--ease) forwards; }
.js .hero.is-ready .hero__inner > *:nth-child(1) { animation-delay: .16s; }
.js .hero.is-ready .hero__inner > *:nth-child(2) { animation-delay: .34s; }
.js .hero.is-ready .hero__inner > *:nth-child(3) { animation-delay: .52s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .hero__inner > * { opacity: 1; transform: none; } }

/* Section text takes the full width of the shell — see the note in concept-2.
   The centred pull-quote in the statement band keeps its own measure. */
.wrap > .prose,
.wrap > .measure,
.wrap > p:not(.band__t):not(.disclaimer) { max-width: none; }
.prose--wide { max-width: none; }