/* ============================================================
   HERMES TOUR — Editorial Luxury Design System
   Palette: espresso (#463F38) on warm cream (#F3EFE7)
   Type: Lemon Milk (display) · Cormorant Garamond (editorial)
   ============================================================ */

/* ---------- Fonts ---------- */
/* Lemon Milk — drop the .woff2 files into /fonts (see fonts/README.txt).
   Until present, the geometric fallback (Jost) renders gracefully. */
@font-face {
  font-family: "Lemon Milk";
  src: url("../fonts/LEMONMILK-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lemon Milk";
  src: url("../fonts/LEMONMILK-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lemon Milk";
  src: url("../fonts/LEMONMILK-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lemon Milk";
  src: url("../fonts/LEMONMILK-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* brand — espresso brown-grey accent on soft ivory + light-blue grounds */
  --espresso: #47413E;
  --espresso-deep: #322D2B;
  --espresso-ink: #47413E;
  --cream: #F5F2EB;        /* soft ivory — primary background + light text on dark */
  --sky: #DCE6EF;          /* pale blue — primary background across the whole site */
  --sky-deep: #9EC4D8;     /* light blue, one step down (lines / hover) */
  --ivory: #FFFFFF;
  --sand: #ECEAE8;
  --stone: #847E79;
  --stone-soft: #A6A09B;
  --brass: #47413E;        /* accent on light surfaces */
  --brass-soft: #CFC9C3;   /* accent on dark surfaces */

  /* derived */
  --line: rgba(71, 65, 62, 0.16);
  --line-soft: rgba(71, 65, 62, 0.09);
  --line-cream: rgba(247, 247, 247, 0.24);
  --line-cream-soft: rgba(247, 247, 247, 0.14);
  --overlay-grad: linear-gradient(180deg, rgba(28,25,23,0.34) 0%, rgba(28,25,23,0.06) 32%, rgba(28,25,23,0.10) 60%, rgba(28,25,23,0.62) 100%);
  --media-fallback: linear-gradient(135deg, #e2dedb 0%, #9a938d 45%, #47413E 100%);
  --media-fallback-dark: linear-gradient(150deg, #6c6560 0%, #47413E 55%, #2c2826 100%);
  --radius: 2px;

  /* type */
  --font-display: "Lemon Milk", "Jost", "Century Gothic", "Futura", sans-serif;
  --font-serif: "Cormorant Garamond", "Hoefler Text", "Georgia", serif;

  --fs-hero: clamp(2.7rem, 6.6vw, 5.6rem);
  --fs-h1: clamp(2.2rem, 4.6vw, 3.7rem);
  --fs-h2: clamp(1.8rem, 3.4vw, 2.9rem);
  --fs-h3: clamp(1.25rem, 1.7vw, 1.6rem);
  --fs-lead: clamp(1.35rem, 2.3vw, 2rem);
  --fs-body: clamp(1.04rem, 1.15vw, 1.18rem);
  --fs-label: 0.72rem;

  /* rhythm — Aman-style percentage side gutters */
  --pad-x: clamp(1.5rem, 8vw, 12rem);
  --section-y: clamp(5rem, 11vh, 9.5rem);
  --maxw: 1760px;
  --maxw-text: 720px;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-luxe: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: calc(108px + env(safe-area-inset-top, 0px));
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* root canvas is footer-dark so any overscroll below the footer matches it (no light-blue strip) */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--espresso-deep); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.7;
  font-weight: 500;
  color: var(--espresso-ink);
  background: var(--sky);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* Always-on brand-brown fill for the notch/home-indicator safe areas — real
   painted content, so it holds regardless of header/menu state, scroll
   position, or Safari's own (unreliable) theme-color chrome tinting. */
body::before, body::after {
  content: ""; position: fixed; left: 0; right: 0; z-index: 100; pointer-events: none;
  background: var(--espresso-deep);
}
body::before { top: 0; height: env(safe-area-inset-top, 0px); }
body::after { bottom: 0; height: env(safe-area-inset-bottom, 0px); }
body.no-scroll { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }

::selection { background: var(--espresso); color: var(--cream); }

/* ---------- Film grain ---------- */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.05; mix-blend-mode: multiply;
  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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Type helpers ---------- */
.display { font-family: var(--font-display); font-weight: 400; line-height: 1.04; letter-spacing: 0.01em; text-transform: uppercase; }
h1, h2, h3 { font-weight: 400; }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}
.eyebrow::before {
  content: ""; width: 30px; height: 1px; background: currentColor; opacity: 0.7;
}
.eyebrow.is-centered { justify-content: center; }
.eyebrow.on-dark { color: var(--brass-soft); }

.lead {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  line-height: 1.45;
  font-weight: 500;
  color: var(--espresso);
  letter-spacing: 0.002em;
}
.muted { color: var(--stone); }
.serif-italic { font-style: italic; }

.section-title { font-size: var(--fs-h2); }
.measure { max-width: var(--maxw-text); }
.center { text-align: center; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3.5rem, 7vh, 6rem); }
.quote-section { padding-block: clamp(7rem, 16vh, 12rem); display: flex; align-items: center; justify-content: center; }
/* Text-only page header sitting under the fixed solid navbar — clear its height */
.page-intro { padding-top: calc(var(--header-h) + clamp(1.6rem, 4vh, 3rem)); }
.page-intro__sub { margin-top: 1rem; }
.about-intro { min-height: 100svh; display: flex; align-items: center; justify-content: center; padding-top: calc(var(--header-h) + clamp(1rem, 3vh, 2rem)); padding-bottom: clamp(2rem, 5vh, 3rem); }
.about-intro__grid { margin-inline: auto; }
.section--flush-top { padding-top: clamp(1.4rem, 3vh, 2.4rem); }
.section--flush-bottom { padding-bottom: clamp(1.4rem, 3vh, 2.4rem); }
/* The site rides on one light-blue ground; former light panels fold into it. */
.bg-ivory { background: var(--sky); }
.bg-sand { background: var(--sky); }
.bg-sky { background: var(--sky); }
.bg-espresso { background: var(--espresso); color: var(--cream); }
.bg-espresso .lead, .bg-espresso h1, .bg-espresso h2, .bg-espresso h3 { color: var(--cream); }
.bg-espresso .muted { color: var(--stone-soft); }

.rule { height: 1px; background: var(--line); border: 0; }

/* ---------- Buttons & links ---------- */
.btn {
  --bg: transparent; --fg: var(--espresso); --bd: var(--espresso);
  display: inline-flex; align-items: center; gap: 0.85rem;
  font-family: var(--font-display); font-weight: 500;
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg); background: var(--bg);
  padding: 1.05rem 1.7rem;
  border: 1px solid var(--bd);
  position: relative; overflow: hidden;
  transition: color 0.6s var(--ease), border-color 0.6s var(--ease);
  white-space: nowrap;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--espresso);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.6s var(--ease-luxe);
}
.btn > * { position: relative; z-index: 1; }
.btn .arrow { transition: transform 0.6s var(--ease); }
.btn:hover { color: var(--cream); }
.btn:hover::before { transform: scaleY(1); }
.btn:hover .arrow { transform: translateX(5px); }
.btn:active { transform: scale(0.985); }

.btn--solid { --fg: var(--cream); --bg: var(--espresso); --bd: var(--espresso); }
.btn--solid::before { background: var(--ivory); }
.btn--solid:hover { color: var(--espresso); }

.btn--ghost-light { --fg: var(--cream); --bd: rgba(243,239,231,0.55); }
.btn--ghost-light::before { background: var(--cream); }
.btn--ghost-light:hover { color: var(--espresso); }

/* button with nested arrow disc (primary CTA) */
.btn-disc {
  display: inline-flex; align-items: center; gap: 1.1rem;
  font-family: var(--font-display); font-weight: 500;
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--espresso);
}
.btn-disc .disc {
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  border: 1px solid var(--espresso);
  display: grid; place-items: center;
  transition: background 0.6s var(--ease-luxe), color 0.6s var(--ease), transform 0.6s var(--ease);
}
.btn-disc .disc svg { width: 14px; height: 14px; transition: transform 0.6s var(--ease); }
.btn-disc:hover .disc { background: var(--espresso); color: var(--cream); }
.btn-disc:hover .disc svg { transform: translate(3px, -3px); }
.btn-disc.on-dark { color: var(--cream); }
.btn-disc.on-dark .disc { border-color: rgba(243,239,231,0.5); }
.btn-disc.on-dark:hover .disc { background: var(--cream); color: var(--espresso); }

/* underline text link */
.link-u {
  font-family: var(--font-display); font-weight: 500;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding-bottom: 4px; position: relative;
}
.link-u::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(1); transform-origin: right;
  transition: transform 0.55s var(--ease-luxe);
}
.link-u:hover::after { transform: scaleX(0); transform-origin: left; }
.link-u .arrow { transition: transform 0.5s var(--ease); }
.link-u:hover .arrow { transform: translateX(5px); }

.btn-row { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center; }

/* ---------- Media frames (with graceful fallback) ---------- */
.frame { position: relative; overflow: hidden; background: var(--media-fallback); }
.frame.is-dark { background: var(--media-fallback-dark); }
.frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.6s var(--ease-luxe), opacity 1.2s var(--ease);
}
.frame img.img-failed { opacity: 0; }
.frame--hover img:hover { transform: scale(1.05); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 60;
  height: var(--header-h);
  display: flex; align-items: center;
  color: var(--cream);
  /* lowkey frosted bar — keeps the nav legible over any hero image */
  background: linear-gradient(180deg, rgba(28,25,23,0.40) 0%, rgba(28,25,23,0.14) 100%);
  -webkit-backdrop-filter: blur(9px) saturate(115%);
  backdrop-filter: blur(9px) saturate(115%);
  transition: background 0.6s var(--ease), color 0.5s var(--ease), box-shadow 0.6s var(--ease), -webkit-backdrop-filter 0.6s var(--ease), backdrop-filter 0.6s var(--ease), height 0.5s var(--ease);
}
.site-header .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; width: 100%; }
.site-header.is-solid {
  background: rgba(183, 214, 230, 0.86);   /* frosted light blue */
  -webkit-backdrop-filter: blur(18px) saturate(120%); backdrop-filter: blur(18px) saturate(120%);
  color: var(--espresso);
  box-shadow: 0 1px 0 rgba(71, 65, 62, 0.10);
  /* height stays var(--header-h) in every state so the navbar is the same height on every page */
}
.site-header .menu-toggle { justify-self: start; }
.site-header .brand { justify-self: center; }
.site-header .nav-cta { justify-self: end; }

.brand { display: inline-flex; align-items: center; }
/* Brand logo: the full HERMES TOUR lockup (SVG, dark #2b2b2b) */
.brand__logo { display: block; width: auto; height: 46px; flex: none; }
.site-header .brand__logo { height: 58px; }
/* The SVG fill is dark; over the transparent header (dark hero) flip it to light.
   On the solid header and the pale overlay, its native dark reads correctly. */
.site-header:not(.is-solid) .brand__logo { filter: brightness(0) invert(1); }
.brand--overlay .brand__logo { height: 50px; }

/* Enquire button (standalone, sits at the header's right edge) */
.nav-cta {
  font-family: var(--font-display); font-weight: 500;
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid currentColor; padding: 0.7rem 1.25rem; border-radius: var(--radius);
  transition: background 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s var(--ease);
}
.is-solid .nav-cta:hover { background: var(--espresso); color: var(--cream); border-color: var(--espresso); }
.site-header:not(.is-solid) .nav-cta:hover { background: var(--cream); color: var(--espresso); }

/* hamburger + label (always visible, top-left) */
.menu-toggle { display: inline-flex; align-items: center; gap: 0.7rem; position: relative; z-index: 80; }
.menu-toggle__bars { position: relative; width: 26px; height: 14px; flex: none; }
.menu-toggle__bars span {
  position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor;
  transition: transform 0.5s var(--ease-luxe), opacity 0.3s var(--ease), top 0.4s var(--ease);
}
.menu-toggle__bars span:nth-child(1) { top: 0; }
.menu-toggle__bars span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.menu-toggle__bars span:nth-child(3) { bottom: 0; top: auto; }
.menu-toggle__label {
  font-family: var(--font-display); font-weight: 500;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1;
}
body.menu-open .menu-toggle__bars span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
body.menu-open .menu-toggle__bars span:nth-child(2) { opacity: 0; }
body.menu-open .menu-toggle__bars span:nth-child(3) { bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }

/* full-screen overlay nav — expandable Aman-style mega-menu */
.nav-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: var(--sky); color: var(--espresso);
  display: flex; flex-direction: column;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.8s var(--ease-luxe);
  pointer-events: none; overflow-y: auto;
}
body.menu-open .nav-overlay { clip-path: inset(0 0 0 0); pointer-events: auto; }
/* the header steps aside while the menu owns the screen */
body.menu-open .site-header { opacity: 0; visibility: hidden; pointer-events: none; }

/* top bar of the overlay: brand left, close × right */
.nav-overlay__bar {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h); padding-inline: var(--pad-x);
}
.brand--overlay { color: var(--espresso); }
.nav-close { width: 34px; height: 34px; display: grid; place-items: center; color: var(--espresso); border-radius: 50%; transition: background 0.4s var(--ease), transform 0.5s var(--ease); }
.nav-close svg { width: 24px; height: 24px; }
.nav-close:hover { background: rgba(71,65,62,0.08); transform: rotate(90deg); }

/* the two-column cascade */
.megamenu {
  flex: 1; display: grid; grid-template-columns: minmax(auto, max-content) 1fr;
  column-gap: clamp(2rem, 8vw, 9rem); align-content: center;
  padding: clamp(1.5rem, 4vh, 3rem) var(--pad-x);
}
.mm-primary { display: flex; flex-direction: column; gap: clamp(0.15rem, 0.7vh, 0.55rem); }
.mm-top {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(1.45rem, 3.4vw, 2.5rem); letter-spacing: 0.02em; line-height: 1.22;
  color: var(--espresso); display: inline-flex; align-items: center; gap: 0.55rem;
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  transition: color 0.4s var(--ease), opacity 0.4s var(--ease);
}
/* dim the list while it is engaged (panel open OR hovered); active/hovered stays dark */
.megamenu.has-active .mm-top,
.mm-primary:hover .mm-top { color: var(--stone-soft); }
.mm-primary:hover .mm-top:hover,
.megamenu .mm-group.is-active .mm-top { color: var(--espresso); }
.mm-caret { width: 0.74em; height: 0.74em; opacity: 0.45; transition: transform 0.4s var(--ease), opacity 0.4s var(--ease); }
.mm-group.is-active .mm-caret { opacity: 1; transform: translateX(3px); }

.mm-panel { position: relative; min-width: 0; }
.mm-sub { display: none; flex-direction: column; gap: clamp(0.2rem, 0.9vh, 0.7rem); }
.mm-sub.is-open { display: block; column-count: 2; column-gap: clamp(1.6rem, 4vw, 3.6rem); animation: mmsub 0.5s var(--ease-luxe); }
.mm-sub.is-open li { break-inside: avoid; margin-bottom: clamp(0.2rem, 0.9vh, 0.7rem); }
#sub-heritage.is-open { column-count: 1; }
@keyframes mmsub { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.mm-sub a {
  font-family: var(--font-serif); font-weight: 500; line-height: 1.4;
  font-size: clamp(1.1rem, 1.5vw, 1.45rem); color: var(--stone);
  width: -moz-fit-content; width: fit-content; transition: color 0.35s var(--ease);
}
.mm-sub a:hover { color: var(--espresso); }
.mm-sub__lead { margin-bottom: 0.45rem; -webkit-column-span: all; column-span: all; }
.mm-sub__lead a {
  color: var(--espresso); font-family: var(--font-display); text-transform: uppercase;
  font-size: 0.66rem; letter-spacing: 0.2em;
}

.overlay-foot {
  flex: none; display: flex; flex-wrap: wrap; gap: 1.2rem 3rem;
  padding: clamp(1.5rem, 4vh, 2.6rem) var(--pad-x) clamp(2rem, 5vh, 3rem);
  font-family: var(--font-serif); font-size: 1.05rem; color: var(--stone);
  opacity: 0; transition: opacity 0.6s var(--ease) 0.4s;
}
body.menu-open .overlay-foot { opacity: 1; }
.overlay-foot a { font-size: 1.05rem; letter-spacing: normal; text-transform: none; font-family: var(--font-serif); }

@media (max-width: 760px) {
  .megamenu { grid-template-columns: 1fr; row-gap: clamp(1.4rem, 4vh, 2.4rem); align-content: start; }
  .mm-top { font-size: clamp(1.5rem, 7vw, 2.2rem); }
  .mm-panel { min-height: 1px; }
}

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: var(--cream); overflow: hidden; }
.hero--page { min-height: 78svh; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 18s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero__overlay { position: absolute; inset: 0; z-index: 1; background: var(--overlay-grad); }
.hero__inner { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(3.5rem, 9vh, 7rem); padding-top: calc(var(--header-h) + 2rem); }
.hero__title { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-hero); line-height: 1.02; letter-spacing: 0.005em; max-width: 16ch; }
.hero__sub { font-family: var(--font-serif); font-size: var(--fs-lead); font-weight: 500; max-width: 46ch; margin-top: 1.6rem; color: rgba(243,239,231,0.92); }
.hero__cta { margin-top: 2.6rem; }
.hero__scroll {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2;
  font-family: var(--font-display); font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem; color: rgba(243,239,231,0.8);
}
.hero__scroll .bar { width: 1px; height: 46px; background: linear-gradient(var(--cream), transparent); position: relative; overflow: hidden; }
.hero__scroll .bar::after { content: ""; position: absolute; top: -46px; left: 0; width: 100%; height: 46px; background: var(--brass-soft); animation: scrolldrop 2.4s var(--ease) infinite; }
@keyframes scrolldrop { 0% { top: -46px; } 60%, 100% { top: 46px; } }

/* ---------- Reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(20px); filter: blur(4px); transition: opacity 0.6s var(--ease), transform 0.65s var(--ease), filter 0.5s var(--ease); transition-delay: var(--d, 0s); }
[data-reveal].is-visible { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero__media img { animation: none; }
  .hero__scroll .bar::after { animation: none; }
}

/* ---------- Intro / statement ---------- */
.statement { max-width: 30ch; font-family: var(--font-serif); font-size: clamp(1.7rem, 3.4vw, 3rem); line-height: 1.28; font-weight: 500; color: var(--espresso); }
.statement em { font-style: italic; color: var(--brass); }
.about-split-media { border-radius: var(--radius); overflow: hidden; }
.about-split-media img { display: block; width: 100%; height: clamp(340px, 42vw, 560px); object-fit: cover; }
.brand-stamp { width: clamp(96px, 12vw, 140px); height: auto; margin-inline: auto; mix-blend-mode: multiply; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 7vw, 7rem); align-items: center; }
.two-col--text { grid-template-columns: 1.05fr 1fr; }

/* ---------- Collections split ---------- */
.collection { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1px, 0.4vw, 6px); }
.collection__panel { position: relative; min-height: clamp(420px, 64vh, 720px); display: flex; align-items: flex-end; overflow: hidden; color: var(--cream); }
/* Full-width banner panel — spans both columns (as wide as two pictures) */
.collection__panel--wide { grid-column: 1 / -1; min-height: clamp(340px, 46vh, 560px); }
.collection__panel .frame { position: absolute; inset: 0; }
.collection__panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,28,24,0.12) 0%, rgba(31,28,24,0.0) 40%, rgba(31,28,24,0.66) 100%); z-index: 1; transition: background 0.7s var(--ease); }
.collection__panel:hover::after { background: linear-gradient(180deg, rgba(31,28,24,0.2) 0%, rgba(31,28,24,0.1) 40%, rgba(31,28,24,0.74) 100%); }
.collection__panel .frame img { transition: transform 2s var(--ease-luxe); }
.collection__panel:hover .frame img { transform: scale(1.06); }
.collection__body { position: relative; z-index: 2; padding: clamp(2rem, 4vw, 3.4rem); width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(1.2rem, 2.4vw, 2.4rem); row-gap: clamp(1rem, 2vw, 1.6rem); }
.collection__body h3 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.05; }
/* description sits to the right of the name, vertically centred, two lines max */
.collection__body p { min-width: 0; margin: 0; max-width: 46ch; color: rgba(243,239,231,0.86); font-size: 1.05rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* the link sits on its own row and stays content-width so only its text is underlined */
.collection__body .link-u { grid-column: 1 / -1; justify-self: start; margin-top: 0; }
/* on the full-width Heritage panel, sit the description against the right edge with the same inset as the title has on the left */
.collection__panel--wide .collection__body p { justify-self: end; text-align: right; }

/* ---------- Journey cards grid ---------- */
.grid-journeys { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 2.8rem) clamp(1.4rem, 2.4vw, 2.2rem); }
.grid-journeys.cols-2 { grid-template-columns: repeat(2, 1fr); }
.jcard { display: flex; flex-direction: column; }
.jcard__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.jcard__media .frame { position: absolute; inset: 0; }
.jcard__media .frame img { transition: transform 1.8s var(--ease-luxe); }
.jcard:hover .jcard__media .frame img { transform: scale(1.06); }
.jcard__media .tag {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  font-family: var(--font-display); font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cream); background: rgba(43,39,34,0.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 0.5rem 0.8rem; border: 1px solid rgba(243,239,231,0.2);
}
.jcard__body { padding-top: 1.3rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.jcard__loc { font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brass); }
.jcard__title { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-h3); line-height: 1.08; }
.jcard__desc { color: var(--stone); font-size: 1.02rem; line-height: 1.55; }
.jcard__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.jcard__meta .dur { font-family: var(--font-display); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); }
.jcard__meta .price { font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; color: var(--espresso); }
.jcard__meta .price b { font-style: normal; font-weight: 600; }

/* ---------- Section heading block ---------- */
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.head__lead { max-width: 56ch; }
.head h2 { margin-top: 1.1rem; }

/* ---------- Ethos / numbered list ---------- */
.ethos { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.ethos__media { position: relative; aspect-ratio: 4 / 5; min-height: 360px; }
.ethos__media .frame { position: absolute; inset: 0; }
.ethos__list { display: flex; flex-direction: column; }
.ethos__item { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; padding: 1.8rem 0; border-top: 1px solid var(--line-cream-soft); }
.ethos__item:last-child { border-bottom: 1px solid var(--line-cream-soft); }
.ethos__num { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--brass-soft); padding-top: 0.4rem; }
.ethos__item h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 1.05rem; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.ethos__item p { color: var(--stone-soft); font-size: 1.02rem; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.stats--awarded { grid-template-columns: repeat(3, 1fr); }
.stat { background: var(--sky); padding: clamp(2rem, 4vw, 3rem) clamp(1.2rem, 2vw, 2rem); text-align: center; }
.bg-ivory .stat { background: var(--sky); }
.stat .n { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; color: var(--espresso); }
.stat .l { font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone); margin-top: 1rem; }

/* ---------- Quote ---------- */
.quote { max-width: 640px; margin-inline: auto; text-align: center; }
.quote blockquote { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.34; color: var(--espresso); }
.quote .mark { font-family: var(--font-display); font-size: 2rem; color: var(--brass); margin-bottom: 1rem; }
.quote cite { display: block; margin-top: 2rem; font-family: var(--font-display); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--stone); font-style: normal; }

/* ---------- Journal ---------- */
.jentry { display: flex; flex-direction: column; }
.jentry__media { aspect-ratio: 3 / 2; overflow: hidden; position: relative; }
.jentry__media .frame { position: absolute; inset: 0; }
.jentry__media .frame img { transition: transform 1.8s var(--ease-luxe); }
.jentry:hover .jentry__media .frame img { transform: scale(1.05); }
.jentry__cat { font-family: var(--font-display); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass); margin-top: 1.3rem; }
.jentry__title { font-family: var(--font-serif); font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.25; margin-top: 0.7rem; color: var(--espresso); }
.jentry__meta { margin-top: 0.9rem; font-size: 0.95rem; color: var(--stone); font-style: italic; }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band h2 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.9rem, 4.4vw, 3.4rem); line-height: 1.05; }
.cta-band p { max-width: 50ch; margin: 1.4rem auto 0; color: var(--stone-soft); font-size: var(--fs-lead); line-height: 1.5; }
/* CTA on a light (single-colour) section needs darker subtitle text */
.section:not(.bg-espresso) .cta-band p { color: var(--stone); }
.cta-band .btn-row { justify-content: center; margin-top: 2.6rem; }

/* ---------- Filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.filter {
  font-family: var(--font-display); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.7rem 1.3rem; border: 1px solid var(--line); color: var(--stone);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.filter:hover { color: var(--espresso); border-color: var(--espresso); }
.filter.active { background: var(--espresso); color: var(--cream); border-color: var(--espresso); }
.jcard.is-hidden { display: none; }

/* ---------- Forms ---------- */
.enquire-grid { display: grid; grid-template-columns: 1.3fr 0.85fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.4rem; }
.field { display: flex; flex-direction: column; gap: 0.55rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--font-display); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); }
.field input, .field select, .field textarea {
  font-family: var(--font-serif); font-size: 1.08rem; color: var(--espresso);
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 0.7rem 0; transition: border-color 0.4s var(--ease);
}
.field textarea { resize: vertical; min-height: 90px; }
.field input::placeholder, .field textarea::placeholder { color: var(--stone-soft); opacity: 0.7; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--espresso); }
.field select { -webkit-appearance: none; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238A7F72' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; }
.form .actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 0.6rem; }
.form-note { font-size: 0.95rem; color: var(--stone); font-style: italic; }
.form-success { grid-column: 1 / -1; display: none; padding: 1.4rem 1.6rem; border: 1px solid var(--brass); color: var(--espresso); font-family: var(--font-serif); font-size: 1.1rem; }
.form-success.show { display: block; }

.contact-aside { display: flex; flex-direction: column; gap: 2rem; }
.contact-block h4 { font-family: var(--font-display); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); margin-bottom: 0.7rem; }
.contact-block p, .contact-block a { font-size: 1.08rem; color: var(--espresso); line-height: 1.6; }
.contact-block a.link-u { font-size: 0.72rem; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.8rem, 4vw, 3.5rem); }
.step__n { font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--brass); padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); margin-bottom: 1.4rem; }
.step h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 1.05rem; letter-spacing: 0.04em; margin-bottom: 0.7rem; }
.step p { color: var(--stone); font-size: 1.02rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--espresso-deep); color: var(--cream); padding-top: clamp(2.75rem, 5vh, 4.25rem); padding-bottom: env(safe-area-inset-bottom, 0px); overflow: hidden; }
.site-footer a:hover { color: var(--brass-soft); }
.footer-top { display: grid; grid-template-columns: repeat(4, minmax(120px, 200px)); gap: clamp(1.6rem, 3.5vw, 3.5rem); padding-bottom: clamp(1.25rem, 2.5vh, 2rem); }
/* Soneva-style oversized faded wordmark, kept close to the columns */
.footer-wordmark {
  font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
  font-size: clamp(4.5rem, 30vw, 26rem); line-height: 1; letter-spacing: 0.012em;
  color: rgba(247, 247, 247, 0.055); text-align: center; white-space: nowrap;
  height: 0.66em; overflow: hidden; /* reveal about the top two-thirds of the letters */
  margin-top: 40px; -webkit-user-select: none; user-select: none;
}
.footer-brand .mark { display: block; width: 46px; height: 46px; color: var(--cream); margin-bottom: 1.1rem; }
.footer-brand .mark svg { width: 100%; height: 100%; display: block; }
.footer-brand p { color: var(--stone-soft); max-width: 32ch; font-size: 0.96rem; }
.footer-col h5 { font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass-soft); margin-bottom: 1rem; }
.footer-col h5.footer-col__sub { margin-top: 1.8rem; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col a { font-size: 0.98rem; color: rgba(247,247,247,0.8); transition: color 0.4s var(--ease); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding-top: 1.35rem; padding-bottom: 0; }
.footer-bottom small, .footer-bottom a { font-family: var(--font-display); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone-soft); }
.footer-legal { display: flex; gap: 1.6rem; flex-wrap: wrap; }

/* ---------- Legal / policy pages ---------- */
.legal-page { padding-top: calc(var(--header-h) + clamp(2.75rem, 7vh, 5.5rem)); padding-bottom: clamp(4rem, 9vh, 7.5rem); }
.legal { max-width: 820px; margin-inline: auto; padding-inline: clamp(1.5rem, 6vw, 3rem); }
.legal__title { font-family: var(--font-serif); font-weight: 500; text-align: center; font-size: var(--fs-h1); line-height: 1.1; letter-spacing: 0.005em; margin-bottom: clamp(2.25rem, 5vh, 3.5rem); }
.legal__updated { font-size: 0.95rem; color: var(--stone); margin-bottom: clamp(2rem, 4vh, 3rem); }
.legal__toc-label { font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass); margin-bottom: 1.35rem; }
.legal__toc { display: block; columns: 2; column-gap: clamp(1.75rem, 5vw, 4rem); counter-reset: toc; margin-bottom: clamp(2.5rem, 6vh, 4rem); padding-bottom: clamp(2rem, 4vh, 3rem); border-bottom: 1px solid var(--line); }
.legal__toc a { display: block; width: fit-content; break-inside: avoid; margin-bottom: 0.85rem; padding-bottom: 3px; color: var(--espresso-ink); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: left bottom; background-size: 0% 1px; transition: background-size 0.4s var(--ease), color 0.3s var(--ease); }
.legal__toc a::before { counter-increment: toc; content: counter(toc) ".\00a0\00a0"; color: var(--stone); }
.legal__toc a:hover { background-size: 100% 1px; }
@media (max-width: 640px) { .legal__toc { columns: 1; } }
.legal__body { counter-reset: sec; }
.legal__body > * + * { margin-top: 1.4rem; }
.legal__body h2 { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-h3); line-height: 1.25; margin-top: clamp(2.5rem, 5vh, 3.75rem); scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.legal__body h2::before { counter-increment: sec; content: counter(sec) ".\00a0"; color: var(--stone); }
.legal__body p, .legal__body li { line-height: 1.8; }
.legal__body ul { padding-left: 1.4rem; list-style: disc; }
.legal__body li { margin-top: 0.5rem; }
.legal__body a { color: var(--espresso-ink); text-decoration: underline; text-underline-offset: 3px; }
.legal__body a:hover { color: var(--stone); }
.legal__body strong { font-weight: 600; }

/* ---------- Utilities ---------- */
.mt-s { margin-top: 1.2rem; } .mt-m { margin-top: 2rem; } .mt-l { margin-top: 3rem; }
.prose p + p { margin-top: 1.2rem; }
.prose p { color: var(--stone); }
.prose .lead + p { margin-top: 1.6rem; }
.prose--bold p { color: var(--espresso-ink); font-weight: 600; font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.68; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2.6rem; }
  .footer-brand { grid-column: 1 / -1; }
  .grid-journeys { grid-template-columns: repeat(2, 1fr); }
  .ethos { grid-template-columns: 1fr; }
  .ethos__media { max-width: 460px; }
}
@media (max-width: 860px) {
  :root { --header-h: calc(88px + env(safe-area-inset-top, 0px)); }
  .two-col, .two-col--text { grid-template-columns: 1fr; gap: 2.5rem; }
  .collection { grid-template-columns: 1fr; }
  .collection__body { grid-template-columns: 1fr; align-items: start; }
  .enquire-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; gap: 2.5rem; }
  .head { flex-direction: column; align-items: flex-start; }
  .site-header .nav-cta { display: none; }
  .stats--awarded { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .site-header .wrap { gap: 0.75rem; }
  .menu-toggle__label { display: none; }
  .grid-journeys, .grid-journeys.cols-2 { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats--awarded { grid-template-columns: repeat(2, 1fr); background: none; gap: 0; }
  .stats--awarded .stat { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .stats--awarded .stat:nth-child(2n) { border-right: none; }
  .stats--awarded .stat:last-child { grid-column: 1 / -1; justify-self: center; width: 50%; border: none; border-top: 1px solid var(--line); }
  .hero__sub { font-size: 1.2rem; }
  .btn-row { gap: 0.9rem; }
  .btn, .btn--solid { width: 100%; justify-content: center; }
  .footer-wordmark { font-size: clamp(3.2rem, 21.5vw, 10rem); }
}

/* ---------- Corner radius (2px on buttons & rectangles) ---------- */
.btn, .nav-cta, .filter, .frame, .jcard__media, .ethos__media,
.jentry__media, .collection__panel, .stat, .form-success,
.jcard__media .tag { border-radius: var(--radius); }

/* ---------- Why Hermes (Jacada-style 3-up) ---------- */
.why { text-align: center; }
.why__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.08; color: var(--espresso); }
.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2.5rem, 5vw, 5.5rem); margin-top: clamp(3rem, 6vw, 5.5rem); }
.why__col { display: flex; flex-direction: column; align-items: center; }
.why__icon { width: 78px; height: 78px; color: var(--espresso); margin-bottom: 1.9rem; }
.why__icon svg { width: 100%; height: 100%; }
.why__col h3 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.45rem, 2vw, 1.85rem); color: var(--espresso); margin-bottom: 1rem; }
.why__col p { color: var(--stone); font-size: 1.06rem; line-height: 1.62; width: 300px; max-width: 100%; }
.why__col--center-solo { grid-column: 2; }
@media (max-width: 860px) {
  .why__grid { grid-template-columns: 1fr; gap: 3.2rem; }
  .why__col--center-solo { grid-column: 1; }
}

/* ---------- Why (editorial, left-aligned variant — About Us) ---------- */
.about-why .why { text-align: left; }
.about-why .why__grid { grid-template-columns: repeat(3, 1fr); gap: clamp(2.4rem, 4.5vw, 4rem) clamp(2rem, 4vw, 3.6rem); }
.about-why .why__col { align-items: flex-start; }
.about-why .why__icon { width: 46px; height: 46px; margin-bottom: 1.6rem; }
.about-why .why__col p { max-width: 32ch; }
.about-why .why__statement { max-width: 640px; margin-top: clamp(3rem, 6vw, 4.8rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.about-why .why__statement p { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.5; color: var(--espresso); }
@media (max-width: 860px) {
  .about-why .why__grid { grid-template-columns: 1fr; }
}

/* ---------- Awards / recognition ---------- */
.awards { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 0; margin-top: 2.6rem; }
.award { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; text-align: center; padding-inline: clamp(1.2rem, 3vw, 2.4rem); }
.award:not(:first-child) { border-left: 1px solid var(--line); }
.award__mark { font-size: 0.8rem; color: var(--brass); margin-bottom: 0.7rem; }
.award__txt { font-family: var(--font-display); text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.16em; line-height: 1.7; color: var(--espresso-deep); }
.award__txt b { font-weight: 600; display: block; margin-top: 4px; letter-spacing: 0.14em; }
@media (max-width: 700px) { .award:not(:first-child) { border-left: none; } .awards { gap: 1.6rem 2.4rem; flex-wrap: wrap; } }
.stats--awarded { margin-top: clamp(3rem, 6vw, 5rem); }

/* ---------- Video hero (minimal) ---------- */
.hero__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero--video { align-items: stretch; }
.hero--video .hero__overlay { background: linear-gradient(180deg, rgba(20,18,16,0.44) 0%, rgba(20,18,16,0.22) 38%, rgba(20,18,16,0.30) 72%, rgba(20,18,16,0.56) 100%); }
.hero--video .hero__inner {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center;
  min-height: 100svh; padding-top: var(--header-h); padding-bottom: clamp(3rem, 9vh, 6.5rem);
}
.hero--video .hero__title { font-size: clamp(2.1rem, 4.4vw, 3.9rem); max-width: 18ch; }
.hero--video .hero__center .eyebrow { margin-bottom: 1.3rem; }
.hero__actions { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; margin-top: clamp(1.8rem, 4vh, 2.6rem); }
.hero-btn {
  font-family: var(--font-display); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cream); padding: 1rem 1.9rem; border-radius: var(--radius);
  background: rgba(247, 247, 247, 0.10);
  -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid rgba(247, 247, 247, 0.30);
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease), transform 0.5s var(--ease);
}
.hero-btn:hover { background: rgba(247, 247, 247, 0.20); border-color: rgba(247, 247, 247, 0.52); }
.hero-btn:active { transform: scale(0.98); }
/* ink variant — same shape on light backgrounds (e.g. the CTA band) */
.hero-btn--ink { color: var(--espresso); border-color: rgba(71, 65, 62, 0.30); background: rgba(71, 65, 62, 0.04); }
.hero-btn--ink:hover { background: var(--espresso); color: var(--cream); border-color: var(--espresso); }

/* frosted booking bar */
.hero-search {
  position: absolute; z-index: 3; left: 50%; bottom: clamp(1.75rem, 5vh, 3rem); transform: translateX(-50%);
  display: flex; align-items: stretch; justify-content: center; gap: 0.6rem; flex-wrap: wrap;
  width: min(92%, 780px);
}
.hs-field, .hs-go {
  background: rgba(247, 247, 247, 0.10);
  -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid rgba(247, 247, 247, 0.26);
  border-radius: var(--radius); color: var(--cream);
  transition: background 0.45s var(--ease), border-color 0.45s var(--ease);
}
.hs-field { flex: 1 1 168px; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 0.72rem 1.15rem; text-align: left; }
.hs-field:hover, .hs-go:hover { background: rgba(247, 247, 247, 0.18); border-color: rgba(247, 247, 247, 0.46); }
.hs-field label { font-family: var(--font-display); font-size: 0.54rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(247, 247, 247, 0.72); }
.hs-field select, .hs-field input {
  background: transparent; border: 0; color: var(--cream); width: 100%;
  font-family: var(--font-serif); font-size: 1.02rem; padding: 1px 0;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.hs-field select { padding-right: 1.1rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F7F7F7' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; }
.hs-field input::placeholder { color: rgba(247, 247, 247, 0.82); }
.hs-field select:focus, .hs-field input:focus { outline: none; }
.hs-field select option { color: var(--espresso); }
.hs-go { flex: 0 0 auto; width: 58px; display: grid; place-items: center; color: var(--cream); }
.hs-go svg { width: 18px; height: 18px; }
.hs-go:active { transform: scale(0.97); }
@media (max-width: 640px) {
  .hero-search { width: 92%; gap: 0.5rem; }
  .hs-field { flex: 1 1 100%; }
  .hs-go { width: 100%; padding: 0.7rem; }
}

/* ============================================================
   COLLECTIONS — underline collapses on whole-panel hover
   (mirror the .link-u:hover behaviour anywhere on the picture)
   ============================================================ */
.collection__panel:hover .link-u::after { transform: scaleX(0); transform-origin: left; }
.collection__panel:hover .link-u .arrow { transform: translateX(5px); }

/* ============================================================
   UNIQUE EXPERIENCE — centred, text-only band (no imagery)
   ============================================================ */
.feature-note { max-width: 680px; margin-inline: auto; text-align: center; }
.feature-note__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.1; letter-spacing: 0.005em;
  color: var(--espresso); margin: 0 auto clamp(1rem, 2.1vw, 1.5rem);
}
.feature-note p { color: var(--espresso-deep); font-size: 1.08rem; line-height: 1.75; margin: 0 auto; max-width: 60ch; }
.feature-note p + p { margin-top: 1.1rem; }
.feature-note .btn-row { justify-content: center; margin-top: clamp(1.4rem, 2.6vw, 2.2rem); }

/* ---------- About Us: editorial story block (label column + body column) ---------- */
.story { display: grid; grid-template-columns: minmax(180px, 300px) 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.story__label { position: sticky; top: calc(var(--header-h) + 2rem); }
.story__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.1rem, 4vw, 3.2rem); line-height: 1.08; color: var(--espresso); margin-top: 1rem; }
.story__body { max-width: 62ch; }
.story__body p { color: var(--espresso-deep); font-size: 1.08rem; line-height: 1.75; }
.story__body p + p { margin-top: 1.2rem; }
.story__stat { display: flex; align-items: baseline; gap: 1.6rem; margin-top: clamp(2.6rem, 5vw, 4rem); padding-top: clamp(1.6rem, 3vw, 2.2rem); border-top: 1px solid var(--line); }
.story__stat-n { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 4.6vw, 3.4rem); color: var(--espresso); line-height: 1; }
.story__stat-l { font-family: var(--font-display); font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); line-height: 1.55; }
@media (max-width: 860px) {
  .story { grid-template-columns: 1fr; gap: 1.6rem; }
  .story__label { position: static; }
}

/* ---------- About Us: single stat + full-bleed image band ---------- */
.about-stat { display: flex; justify-content: center; margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.about-stat__figure { max-width: 320px; width: 100%; }
.about-band { position: relative; overflow: hidden; border-radius: var(--radius); }
.about-band img { display: block; width: 100%; height: clamp(320px, 46vw, 560px); object-fit: cover; }
.about-band figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(1.6rem, 4vw, 3.2rem) clamp(1.5rem, 8vw, 12rem);
  background: linear-gradient(0deg, rgba(28,25,23,0.68) 0%, rgba(28,25,23,0) 70%);
  color: var(--cream); font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.4; max-width: 44ch;
}

/* ============================================================
   CATEGORY PANELS — five full-viewport collections with imagery
   ============================================================ */
.cats-full { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(2px, 0.4vw, 6px); min-height: calc(100svh - var(--header-h)); }
.cat-panel { position: relative; display: flex; align-items: flex-end; overflow: hidden; min-height: calc(100svh - var(--header-h)); color: var(--cream); }
.cat-panel .frame { position: absolute; inset: 0; }
.cat-panel .frame img { transition: transform 2s var(--ease-luxe); }
.cat-panel:hover .frame img { transform: scale(1.06); }
.cat-panel::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(31,28,24,0.10) 0%, rgba(31,28,24,0) 38%, rgba(31,28,24,0.74) 100%);
  transition: background 0.7s var(--ease);
}
.cat-panel:hover::after { background: linear-gradient(180deg, rgba(31,28,24,0.22) 0%, rgba(31,28,24,0.10) 38%, rgba(31,28,24,0.84) 100%); }
.cat-panel__body { position: relative; z-index: 2; padding: clamp(1.5rem, 2.1vw, 2.6rem); width: 100%; }
.cat-panel__body h3 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.2rem, 1.5vw, 1.95rem); line-height: 1.06; letter-spacing: 0.03em; }
.cat-panel__body .link-u { margin-top: 1.1rem; }
/* whole-panel hover collapses the underline & nudges the arrow (mirrors collections) */
.cat-panel:hover .link-u::after { transform: scaleX(0); transform-origin: left; }
.cat-panel:hover .link-u .arrow { transform: translateX(5px); }
@media (max-width: 1024px) {
  .cats-full { grid-template-columns: repeat(2, 1fr); min-height: 0; }
  .cat-panel { min-height: 46svh; }
  .cat-panel:last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .cats-full { grid-template-columns: 1fr; }
  .cat-panel { min-height: 44svh; }
}

/* ============================================================
   EXPERIENCES — One&Only-style infinite carousel (fits the frame)
   heading · image · name · description · scroller all in view
   ============================================================ */
.exp { overflow: hidden; }
.exp--fit { padding-block: clamp(1.5rem, 4vh, 3.5rem); }
.exp__inner { display: flex; flex-direction: column; gap: clamp(0.9rem, 2.2vh, 1.6rem); }

.head--center { flex-direction: column; align-items: center; text-align: center; }
.head--center .head__lead { max-width: 60ch; }
.head--center h2 { margin-top: 0; }
.head--center .muted { margin-top: 0.85rem; font-size: 1.04rem; }
.exp__head { margin-bottom: 0; }

.exp__viewport { position: relative; width: 100%; overflow: hidden; cursor: grab; touch-action: pan-y; }
.exp__viewport:active { cursor: grabbing; }
.exp__track { position: relative; display: flex; flex-wrap: nowrap; gap: clamp(0.9rem, 2vw, 2rem); will-change: transform; transition: transform 0.6s var(--ease-luxe); }
.exp__track.no-anim { transition: none; }

.exp__slide { flex: 0 0 64vw; max-width: 1040px; -webkit-user-select: none; user-select: none; }
.exp__media { position: relative; height: clamp(300px, 62vh, 760px); overflow: hidden; border-radius: var(--radius); background: var(--media-fallback); }
.exp__media .frame { position: absolute; inset: 0; }
.exp__media .frame img { transition: transform 2s var(--ease-luxe); }
.exp__slide.is-active .exp__media .frame img { transform: scale(1.04); }
/* dim every slide except the centred one */
.exp__media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(28, 25, 23, 0.46); transition: opacity 0.8s var(--ease); opacity: 1; }
.exp__slide.is-active .exp__media::after { opacity: 0; }

/* foot = shared caption + scroller, always visible beneath the image */
.exp__foot { display: flex; flex-direction: column; align-items: center; gap: clamp(1rem, 2.6vh, 1.9rem); }
.exp__cap { text-align: center; max-width: 60ch; margin-inline: auto; transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.exp__cap.is-swap { opacity: 0; transform: translateY(10px); }
.exp__loc { display: none; }
.exp__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.08; color: var(--espresso); margin-top: 0.5rem; }
.exp__desc { color: var(--stone); font-size: 1.04rem; line-height: 1.55; margin-top: 0.7rem; }
.exp__cap .link-u { margin-top: 1.1rem; }

.exp__controls { display: flex; align-items: center; justify-content: center; gap: clamp(1.3rem, 3vw, 2.6rem); }
.exp__arrow { width: 44px; height: 44px; display: grid; place-items: center; color: var(--stone); border-radius: 50%; transition: color 0.4s var(--ease), background 0.4s var(--ease); }
.exp__arrow:hover { color: var(--espresso); background: rgba(71,65,62,0.06); }
.exp__arrow svg { width: 20px; height: 20px; }
.exp__bar { position: relative; width: clamp(170px, 30vw, 360px); height: 2px; background: var(--line); overflow: hidden; }
.exp__bar-fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--espresso); transition: transform 0.6s var(--ease-luxe); }

@media (max-width: 860px) {
  .exp__slide { flex-basis: 82vw; max-width: 82vw; }
  .exp__media { height: clamp(280px, 52vh, 560px); }
}

/* ============================================================
   DESTINATIONS — paged 3-up grid carousel
   ============================================================ */
.dest { overflow: hidden; scroll-margin-top: var(--header-h); }
.dest__inner { display: flex; flex-direction: column; gap: clamp(0.6rem, 1.6vh, 1.3rem); }
.dest .head { margin-bottom: clamp(1.4rem, 3vh, 2.3rem); }
.dest .head__lead .muted { margin-top: 0.85rem; }

.dest__viewport { position: relative; width: 100%; overflow: hidden; }
.dest__track { display: flex; flex-wrap: nowrap; will-change: transform; transition: transform 0.7s var(--ease-luxe); }
.dest__track.no-anim { transition: none; }
.dest__page { flex: 0 0 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.8rem, 1.8vw, 1.6rem); }

.dtile { position: relative; display: block; -webkit-user-select: none; user-select: none; }
.dtile__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--media-fallback); }
.dtile__media .frame { position: absolute; inset: 0; }
.dtile__media .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-luxe); }
.dtile:hover .dtile__media .frame img { transform: scale(1.06); }
.dtile__media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(28,25,23,0.62) 0%, rgba(28,25,23,0.12) 42%, rgba(28,25,23,0) 70%); transition: opacity 0.6s var(--ease); }
.dtile:hover .dtile__media::after { opacity: 0.85; }

.dtile__overlay { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: clamp(1rem, 1.8vw, 1.7rem); padding-bottom: clamp(0.6rem, 1.1vw, 0.95rem); color: var(--cream); }
.dtile__kicker { display: block; font-family: var(--font-display); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(247,243,237,0.78); }
.dtile__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.4rem; }
.dtile__name { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.1; color: var(--cream); }
.dtile__go { flex: none; position: relative; display: inline-flex; align-items: center; gap: 0.6rem; padding-bottom: 4px; font-family: var(--font-display); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream); white-space: nowrap; opacity: 0; transform: translateX(8px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.dtile__go::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: currentColor; transform-origin: left; transition: transform 0.55s var(--ease-luxe); }
.dtile__go .arrow { transition: transform 0.4s var(--ease); }
.dtile:hover .dtile__go { opacity: 1; transform: translateX(0); }
.dtile:hover .dtile__go .arrow { transform: translateX(4px); }

.dest__foot { display: flex; align-items: center; justify-content: center; gap: clamp(1.3rem, 3vw, 2.6rem); }
.dest__bar { position: relative; width: clamp(170px, 30vw, 360px); height: 2px; background: var(--line); overflow: hidden; }
.dest__bar-fill { position: absolute; top: 0; left: 0; height: 100%; width: 25%; background: var(--espresso); transition: transform 0.6s var(--ease-luxe); }

@media (max-width: 760px) {
  .dest__page { grid-template-columns: 1fr; gap: 0.55rem; }
  .dtile__media { aspect-ratio: 4 / 5; border-radius: 4px; }
  .dtile__overlay { padding: 1.1rem 1rem; }
  .dtile__kicker { font-size: 0.62rem; letter-spacing: 0.16em; }
  .dtile__go { display: inline-flex; opacity: 1; transform: none; }
}

/* ============================================================
   ENQUIRY — single-column, centred (One&Only residence style)
   ============================================================ */
.enquiry-form { max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: clamp(2.1rem, 3.4vw, 2.9rem); }
.enquiry-form__head { text-align: center; }
.enquiry-form__title {
  font-family: var(--font-serif); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.05em; font-size: clamp(2rem, 4.8vw, 3.3rem); line-height: 1.05;
  text-align: center; color: var(--espresso); margin-bottom: clamp(0.7rem, 1.6vw, 1.1rem);
}
.enquiry-form__intro { max-width: 54ch; margin: 0 auto; color: var(--stone); font-size: 1.06rem; line-height: 1.7; }
.enquiry-form .form-success { margin-bottom: 0.6rem; text-align: center; }

.ff { position: relative; }
.ff input, .ff select, .ff textarea {
  width: 100%; font-family: var(--font-serif); font-size: 1.12rem; color: var(--espresso);
  background: transparent; border: 0; border-bottom: 1px solid var(--espresso);
  padding: 0.55rem 0 0.7rem; border-radius: 0;
}
.ff input:focus, .ff select:focus, .ff textarea:focus { outline: none; }
.ff label {
  position: absolute; left: 0; top: 0.6rem; pointer-events: none; transform-origin: left center;
  font-family: var(--font-display); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--stone);
  transition: transform 0.4s var(--ease), color 0.4s var(--ease);
}
.ff input:focus ~ label, .ff input:not(:placeholder-shown) ~ label,
.ff textarea:focus ~ label, .ff textarea:not(:placeholder-shown) ~ label,
.ff select:focus ~ label, .ff select:valid ~ label {
  transform: translateY(-1.5rem) scale(0.84); color: var(--espresso);
}
.ff--select select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 1.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2347413E' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center;
}
.ff--select select:invalid { color: var(--espresso); }
.ff--select select option { color: var(--espresso); }

.ff--area { display: flex; flex-direction: column; gap: 0.85rem; }
.ff--area label { position: static; transform: none; }
.ff--area textarea {
  border: 1px solid var(--espresso); border-radius: var(--radius);
  min-height: 210px; padding: 1rem 1.1rem; resize: vertical; line-height: 1.6;
}

.ff-check { display: flex; align-items: flex-start; gap: 0.85rem; cursor: pointer; font-family: var(--font-serif); font-size: 1.05rem; color: var(--espresso); line-height: 1.5; }
.ff-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.ff-check__box { width: 20px; height: 20px; flex: none; margin-top: 2px; border: 1px solid var(--espresso); border-radius: var(--radius); display: grid; place-items: center; transition: background 0.3s var(--ease); }
.ff-check__box::after { content: ""; width: 10px; height: 5.5px; margin-top: -2px; border-left: 2px solid var(--cream); border-bottom: 2px solid var(--cream); transform: rotate(-45deg) scale(0); transition: transform 0.25s var(--ease); }
.ff-check input:checked + .ff-check__box { background: var(--espresso); }
.ff-check input:checked + .ff-check__box::after { transform: rotate(-45deg) scale(1); }
.ff-check a { text-decoration: underline; text-underline-offset: 2px; }
.ff-check input:focus-visible + .ff-check__box { box-shadow: 0 0 0 2px var(--cream), 0 0 0 3px var(--espresso); }

.enquiry-form__actions { display: flex; justify-content: center; margin-top: clamp(0.6rem, 2vw, 1.4rem); }
.enquiry-send {
  font-family: var(--font-display); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--espresso); border: 1px solid var(--espresso); border-radius: var(--radius);
  padding: 1rem 3.4rem; transition: background 0.5s var(--ease), color 0.5s var(--ease);
}
.enquiry-send:hover { background: var(--espresso); color: var(--cream); }
.enquiry-send:active { transform: scale(0.985); }

.enquiry-contact {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 4vw, 3rem);
  text-align: center; max-width: 900px; margin: clamp(3rem, 6vw, 5rem) auto 0;
  border-top: 1px solid var(--line); padding-top: clamp(2.2rem, 4vw, 3.2rem);
}
.enquiry-contact .contact-block a.link-u { justify-content: center; }
@media (max-width: 700px) { .enquiry-contact { grid-template-columns: 1fr; gap: 2.2rem; } }

/* ============================================================
   PARTNERS — grouped list of linked partners
   ============================================================ */
.partners-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.8rem, 3.2vw, 3.4rem); }
.partner-group__title { font-family: var(--font-display); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); padding-bottom: 0.9rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.partner-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.partner-link { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-serif); font-size: 1.18rem; line-height: 1.2; color: var(--espresso); transition: color 0.4s var(--ease); }
.partner-link .arrow { opacity: 0; transform: translateX(-4px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.partner-link:hover { color: var(--stone); }
.partner-link:hover .arrow { opacity: 1; transform: translateX(2px); }

@media (max-width: 860px) { .partners-grid { grid-template-columns: repeat(2, 1fr); gap: 2.2rem 1.8rem; } }
@media (max-width: 480px) { .partners-grid { grid-template-columns: 1fr; } }

/* ============ Hotel detail (Iconic > Maldives) ============ */
.hotel { padding: calc(var(--header-h) + clamp(2.75rem, 6vh, 5rem)) 0 clamp(2rem, 5vh, 4rem); }
.hotel__grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(1.5rem, 3.5vw, 3.4rem); align-items: start; }
@media (min-width: 1200px) { .hotel__grid { grid-template-columns: 1.3fr 1.05fr; } }
.hotel__main { overflow: hidden; border-radius: 5px; }
.hotel__main img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.hotel__thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(0.35rem, 0.8vw, 0.6rem); margin-top: clamp(0.5rem, 1vw, 0.7rem); }
.hotel__thumb { padding: 0; border: 0; background: none; cursor: pointer; overflow: hidden; border-radius: 3px; opacity: 0.55; transition: opacity 0.4s var(--ease); }
.hotel__thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.hotel__thumb.is-active, .hotel__thumb:hover { opacity: 1; }
.hotel__panel { position: sticky; top: calc(var(--header-h) + 1.2rem); }
.hotel__kicker { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.7rem; color: var(--stone); }
.hotel__name { font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.06; margin: 0.5rem 0 0.9rem; }
.hotel__desc { color: var(--stone); line-height: 1.65; font-size: 1.02rem; margin-bottom: clamp(1.2rem, 2vw, 1.7rem); }
.booking { border: 1px solid var(--line); border-radius: 7px; padding: clamp(1.1rem, 2vw, 1.6rem); display: grid; gap: clamp(0.8rem, 1.4vw, 1.1rem); background: var(--cream); }
.booking__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.7rem, 1.4vw, 1rem); }
.booking label { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.62rem; color: var(--stone); }
.booking select, .booking input { font-family: var(--font-serif); font-size: 1rem; color: var(--espresso); padding: 0.6rem 0.7rem; border: 1px solid var(--line); border-radius: 4px; background: #fff; width: 100%; min-width: 0; box-sizing: border-box; }
.booking input[type="date"] { width: 100%; min-width: 0; max-width: 100%; -webkit-min-logical-width: 0; }
.booking__price { display: flex; align-items: baseline; justify-content: space-between; padding-top: 0.7rem; margin-top: 0.2rem; border-top: 1px solid var(--line); }
.booking__price span { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.62rem; color: var(--stone); }
.booking__price b { font-family: var(--font-display); font-size: 1.25rem; color: var(--espresso); }
.booking__cta { width: 100%; justify-content: center; text-align: center; }
.hotel__villa-note { font-size: 0.9rem; color: var(--stone); line-height: 1.5; margin: 0.2rem 0 0.1rem; font-style: italic; }
.hotel__note { font-size: 0.85rem; color: var(--stone-soft); margin-top: 0.9rem; line-height: 1.5; }
@media (max-width: 900px) { .hotel__grid { grid-template-columns: 1fr; } .hotel__panel { position: static; } }
@media (max-width: 520px) {
  .booking__row { grid-template-columns: 1fr; }
  .booking input[type="date"] { font-size: 0.9rem; padding: 0.6rem 0.5rem; }
}