/* =====================================================================
   LE CLOS DU CAFÉ BLANC — Coastal Norman Editorial design system
   Single source of truth for typography, color, spacing, components.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Color palette — chalk cliff, half-timber, garden moss, warm copper */
  --chalk:        #F8F5EE;       /* main bg — chalk cliff */
  --chalk-pure:   #FDFBF6;       /* near-white card surface */
  --bone:         #EAE5DA;       /* section divider bg */
  --bone-deep:    #D6CFBE;       /* darker divider */
  --ink:          #1B1A17;       /* primary text — deep timber charcoal */
  --ink-soft:     #4A4842;       /* secondary text */
  --mist:         #8A867D;       /* muted */
  --mist-soft:    #C7C2B6;
  --moss:         #4A5C45;       /* sage moss — secondary accent */
  --moss-deep:    #2F3D2C;       /* dark sections */
  --copper:       #B4582E;       /* PRIMARY ACCENT — terracotta copper */
  --copper-deep:  #8E3F1D;       /* hover */
  --copper-soft:  #D08760;       /* light on dark */
  --line:         rgba(27, 26, 23, 0.10);
  --line-strong:  rgba(27, 26, 23, 0.20);
  --line-light:   rgba(27, 26, 23, 0.05);

  /* Typography */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:    "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-script:  "Italiana", "Cormorant Garamond", serif;

  /* Type scale (1.25) */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-lg:    20px;
  --fs-xl:    25px;
  --fs-2xl:   31px;
  --fs-3xl:   39px;
  --fs-4xl:   49px;
  --fs-5xl:   61px;
  --fs-6xl:   76px;
  --fs-7xl:   92px;

  /* Spacing — 8px base */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 48px;
  --sp-7: 64px;
  --sp-8: 96px;
  --sp-9: 128px;
  --sp-10: 192px;

  /* Layout */
  --container-w: 1320px;
  --container-x: 32px;
  --section-y-mobile: 72px;
  --section-y: 120px;
  --header-h: 80px;

  /* Motion */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 180ms;
  --t-med:  280ms;
  --t-slow: 600ms;

  /* Radius */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 10px;
}

@media (max-width: 768px) {
  :root {
    --fs-7xl: 56px;
    --fs-6xl: 48px;
    --fs-5xl: 40px;
    --fs-4xl: 32px;
    --fs-3xl: 27px;
    --fs-2xl: 22px;
    --fs-xl:  19px;
    --container-x: 22px;
    --header-h: 64px;
  }
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--chalk);
  font-feature-settings: "ss01", "ss02";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.no-scroll { overflow: hidden; }

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

a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--copper); }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

::selection { background: var(--copper); color: var(--chalk); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.005em;
  line-height: 1.12;
  text-wrap: balance;
}
h1 { font-size: var(--fs-6xl); line-height: 1.04; letter-spacing: -0.014em; font-weight: 500; }
h2 { font-size: var(--fs-4xl); line-height: 1.08; letter-spacing: -0.008em; }
h3 { font-size: var(--fs-2xl); line-height: 1.2; }
h4 { font-size: var(--fs-xl); line-height: 1.25; }
p  { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 600; }
em, i { font-style: italic; }
ul, ol { padding-left: 1.4em; margin: 0 0 1.2em; }
li { margin-bottom: 0.4em; }
small { font-size: var(--fs-sm); }

.script {
  font-family: var(--font-script);
  font-style: normal;
  letter-spacing: 0.02em;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: var(--sp-3);
}
.eyebrow-on-dark { color: var(--copper-soft); }
.eyebrow-line {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}
.eyebrow-line::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}

.lede {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-soft);
  font-weight: 300;
  max-width: 56ch;
}
@media (min-width: 900px) { .lede { font-size: 19px; } }

.serif-lede {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: 1.4;
  font-weight: 400;
  font-style: italic;
  color: var(--ink-soft);
  max-width: 36ch;
}

.text-copper { color: var(--copper); }
.text-moss { color: var(--moss); }
.text-mist { color: var(--mist); }
.text-soft { color: var(--ink-soft); }
.italic { font-style: italic; }

/* ---------- Layout ---------- */
.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding-left: var(--container-x);
  padding-right: var(--container-x);
  position: relative;
}
.container-narrow { max-width: 880px; }
.container-wide { max-width: 1480px; }

section {
  padding-top: var(--section-y-mobile);
  padding-bottom: var(--section-y-mobile);
}
@media (min-width: 900px) {
  section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
}
section.section-tight { padding-top: 56px; padding-bottom: 56px; }
@media (min-width: 900px) {
  section.section-tight { padding-top: 88px; padding-bottom: 88px; }
}

.bg-chalk { background: var(--chalk); }
.bg-pure { background: var(--chalk-pure); }
.bg-bone { background: var(--bone); }
.bg-ink { background: var(--ink); color: var(--chalk); }
.bg-moss { background: var(--moss-deep); color: var(--chalk); }

/* Dark section overrides */
.bg-ink, .bg-moss { color: var(--mist-soft); }
.bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink h4,
.bg-moss h1, .bg-moss h2, .bg-moss h3, .bg-moss h4 { color: var(--chalk); }
.bg-ink p, .bg-moss p,
.bg-ink .lede, .bg-moss .lede,
.bg-ink .serif-lede, .bg-moss .serif-lede { color: var(--mist-soft); }
.bg-ink .eyebrow, .bg-moss .eyebrow { color: var(--copper-soft); }
.bg-ink a:not(.btn), .bg-moss a:not(.btn) { color: var(--chalk); }
.bg-ink a:not(.btn):hover, .bg-moss a:not(.btn):hover { color: var(--copper-soft); }
.bg-ink hr.divider, .bg-moss hr.divider { background: rgba(248, 245, 238, 0.14); }

.section-head { max-width: 920px; margin-bottom: var(--sp-7); }
.section-head h2 { margin-bottom: var(--sp-3); }

.split { display: grid; gap: var(--sp-7); }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
  .split-narrow { grid-template-columns: 5fr 7fr; }
  .split-wide   { grid-template-columns: 7fr 5fr; }
  .split-offset > *:nth-child(2) { padding-top: var(--sp-7); }
}

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

/* ---------- Topbar ---------- */
.topbar {
  background: var(--ink);
  color: var(--mist-soft);
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 10px 0;
  position: relative;
  z-index: 30;
  font-weight: 300;
}
.topbar-inner {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--container-x);
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.topbar-tag { display: inline-flex; align-items: center; gap: 8px; }
.topbar-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--copper-soft); display: inline-block; }
.topbar-divider { color: var(--mist); opacity: 0.6; }
.topbar-phone { color: var(--chalk); font-weight: 500; letter-spacing: 0.02em; }
.topbar-phone:hover { color: var(--copper-soft); }
@media (max-width: 768px) {
  .topbar-hide-sm { display: none; }
  .topbar { font-size: 12px; padding: 8px 0; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--chalk);
  border-bottom: 1px solid var(--line-light);
  transition: box-shadow var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
.site-header.is-scrolled {
  box-shadow: 0 1px 0 var(--line);
  background: rgba(248, 245, 238, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-header-inner {
  max-width: none;
  margin: 0;
  padding: 0 var(--sp-6);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}
@media (max-width: 768px) {
  .site-header-inner { padding: 0 var(--container-x); }
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.brand:hover { color: var(--ink); }
.brand-img {
  height: 56px;
  width: auto;
  display: block;
  transition: filter var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
  filter: drop-shadow(0 0 0 transparent);
}
.brand:hover .brand-img { opacity: 0.78; }
@media (max-width: 768px) { .brand-img { height: 42px; } }
.brand-img-mobile { height: 50px; }
.brand-img-footer { height: 64px; }
/* Invert the brush-script logo on dark surfaces */
.bg-ink .brand-img,
.bg-moss .brand-img,
.site-footer .brand-img { filter: invert(1) brightness(2); }

.nav {
  display: none;
  align-items: center;
  gap: var(--sp-5);
}
@media (min-width: 1024px) { .nav { display: flex; } }
/* Tighten the nav between the breakpoint and ~desktop so 8 labels fit on one
   row alongside the brand, language toggle and CTA. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav { gap: var(--sp-3); }
  .site-header-inner { gap: var(--sp-3); }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .nav { gap: var(--sp-4); }
}
.nav-link {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  position: relative;
  padding: 8px 0;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--t-fast) var(--ease);
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav-link { font-size: 13px; letter-spacing: 0.04em; }
}
.nav-link:hover, .nav-link.is-active { color: var(--ink); }
.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--copper);
}

.header-cta {
  display: none;
  align-items: center;
  gap: var(--sp-4);
}
@media (min-width: 1024px) { .header-cta { display: flex; } }

.header-phone {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  text-decoration: none;
  line-height: 1.1;
}
.header-phone-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
}
.header-phone-num {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.header-phone:hover .header-phone-num { color: var(--copper); }

/* Language toggle */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 7px 14px;
  transition: all var(--t-fast) var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.lang-toggle:hover { border-color: var(--ink); color: var(--ink); }
.lang-toggle .lang-opt { color: var(--mist); transition: color var(--t-fast) var(--ease); }
.lang-toggle .lang-opt.is-active { color: var(--ink); font-weight: 500; }
.lang-toggle .lang-divider { color: var(--mist); opacity: 0.5; }
.bg-ink .lang-toggle, .bg-moss .lang-toggle {
  border-color: rgba(248, 245, 238, 0.20);
  color: var(--mist-soft);
}
.bg-ink .lang-toggle .lang-opt.is-active,
.bg-moss .lang-toggle .lang-opt.is-active { color: var(--chalk); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 14px 26px;
  border-radius: var(--r-md);
  cursor: pointer;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition:
    background var(--t-med) var(--ease),
    color var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease),
    transform var(--t-med) var(--ease),
    box-shadow var(--t-med) var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--copper);
  color: var(--chalk);
  border-color: var(--copper);
}
.btn-primary:hover {
  background: var(--copper-deep);
  border-color: var(--copper-deep);
  color: var(--chalk);
  box-shadow: 0 14px 32px -16px rgba(180, 88, 46, 0.55);
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline:hover {
  background: var(--ink);
  color: var(--chalk);
}
.bg-ink .btn-outline, .bg-moss .btn-outline {
  color: var(--chalk);
  border-color: var(--chalk);
}
.bg-ink .btn-outline:hover, .bg-moss .btn-outline:hover {
  background: var(--chalk);
  color: var(--ink);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}
.btn-ghost:hover { color: var(--copper); }

.btn-sm { padding: 10px 18px; font-size: 12px; }
.btn-lg { padding: 17px 32px; font-size: 14px; }
.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  transition: all var(--t-fast) var(--ease);
}
.link-arrow:hover { color: var(--copper); border-color: var(--copper); gap: 12px; }

/* ---------- Hamburger / Mobile nav ---------- */
.hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px; height: 44px;
  gap: 5px;
}
.hamburger span {
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition: all var(--t-med) var(--ease);
}
@media (min-width: 1024px) { .hamburger { display: none; } }

.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(27, 26, 23, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease);
  z-index: 50;
  backdrop-filter: blur(2px);
}
.mobile-overlay.is-open { opacity: 1; pointer-events: auto; }

.mobile-nav {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: min(86vw, 380px);
  background: var(--chalk);
  z-index: 60;
  transform: translateX(100%);
  transition: transform var(--t-med) var(--ease);
  display: flex;
  flex-direction: column;
  padding: var(--sp-4) var(--sp-5);
  overflow-y: auto;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line-light);
  margin-bottom: var(--sp-5);
}
.mobile-close {
  font-size: 32px;
  line-height: 1;
  color: var(--ink);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
}
.mobile-nav-links a {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  padding: 6px 0;
  letter-spacing: -0.01em;
}
.mobile-nav-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-light);
  margin-top: var(--sp-4);
}
.mobile-lang {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-3);
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  padding: 0;
  background: var(--chalk);
}
.hero-stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  position: relative;
}
@media (min-width: 1024px) {
  .hero-stage {
    grid-template-columns: 5fr 7fr;
    min-height: calc(100vh - var(--header-h) - 36px);
    align-items: stretch;
  }
}

.hero-copy {
  padding: var(--sp-7) var(--container-x) var(--sp-7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  max-width: 680px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .hero-copy {
    padding: var(--sp-9) clamp(40px, 6vw, 88px) var(--sp-9) var(--container-x);
    margin: 0;
  }
}

.hero-h1 {
  font-size: clamp(40px, 6.4vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.018em;
  font-weight: 400;
  margin-bottom: var(--sp-4);
}
.hero-h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--copper);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: var(--sp-5);
}

.hero-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.hero-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-meta-num {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1;
  color: var(--ink);
  font-weight: 500;
}
.hero-meta-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
}

.hero-image {
  position: relative;
  min-height: 60vh;
  background: var(--bone);
  overflow: hidden;
}
@media (min-width: 1024px) { .hero-image { min-height: 100%; } }

.hero-slider {
  position: absolute;
  inset: 0;
}
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
  display: block;
}
.slide.is-active { opacity: 1; z-index: 2; }
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.slide-caption {
  position: absolute;
  left: var(--sp-5);
  bottom: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  background: rgba(27, 26, 23, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--chalk);
  border-radius: var(--r-md);
  max-width: 320px;
}
.slide-loc {
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--copper-soft);
}
.slide-title {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.2;
  font-style: italic;
}

.hero-tag {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  background: rgba(248, 245, 238, 0.9);
  backdrop-filter: blur(8px);
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  border-radius: 999px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--copper);
  display: inline-block;
}

/* ---------- Section: page header ---------- */
.page-header {
  background: var(--chalk-pure);
  padding: var(--sp-8) 0 var(--sp-7);
  border-bottom: 1px solid var(--line-light);
  position: relative;
}
@media (min-width: 900px) { .page-header { padding: var(--sp-9) 0 var(--sp-8); } }
.page-header h1 { font-size: clamp(40px, 5.6vw, 76px); line-height: 1.02; font-weight: 400; margin-bottom: var(--sp-3); }
.page-header h1 em { font-style: italic; color: var(--copper); }
.page-header .lede { font-size: 19px; max-width: 60ch; }
.page-header-meta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
  margin-top: var(--sp-5);
}
.page-header-meta span + span::before {
  content: "·";
  margin-right: 14px;
  color: var(--bone-deep);
}

/* ---------- Welcome / Story splits ---------- */
.welcome {
  padding-top: var(--section-y-mobile);
  padding-bottom: var(--section-y-mobile);
  background: var(--chalk);
}
@media (min-width: 900px) {
  .welcome { padding-top: var(--section-y); padding-bottom: var(--section-y); }
}

.welcome-grid {
  display: grid;
  gap: var(--sp-7);
}
@media (min-width: 900px) {
  .welcome-grid {
    grid-template-columns: 6fr 6fr;
    gap: var(--sp-8);
    align-items: center;
  }
}

.welcome-image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-md);
}
.welcome-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-out);
}
.welcome-image:hover img { transform: scale(1.04); }
.welcome-image-tag {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  background: var(--chalk);
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  border-radius: 999px;
}

.welcome-copy h2 {
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.04;
  margin-bottom: var(--sp-4);
}
.welcome-copy h2 em { font-style: italic; color: var(--copper); }
.welcome-copy p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.welcome-signature {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: var(--sp-5);
}
.welcome-signature-mark {
  font-family: var(--font-script);
  font-size: 28px;
  line-height: 1;
  color: var(--copper);
  font-style: italic;
}
.welcome-signature-meta {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
}

/* ---------- Stats / glance row ---------- */
.glance {
  background: var(--moss-deep);
  color: var(--chalk);
  padding: var(--sp-7) 0;
}
.glance-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4) var(--sp-3);
}
@media (min-width: 768px) {
  .glance-grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
}
.glance-item {
  text-align: center;
  padding: var(--sp-3) var(--sp-2);
}
@media (min-width: 768px) {
  .glance-item:not(:last-child) {
    border-right: 1px solid rgba(248, 245, 238, 0.18);
  }
}
.glance-num {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.4vw, 60px);
  font-weight: 400;
  font-style: italic;
  color: var(--copper-soft);
  line-height: 1;
  margin-bottom: 8px;
}
.glance-num small { font-size: 0.5em; font-style: normal; color: var(--mist-soft); margin-left: 2px; }
.glance-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist-soft);
}

/* ---------- Mosaic / Photo strip ---------- */
.mosaic {
  background: var(--chalk);
}
.mosaic-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 900px) {
  .mosaic-grid {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 140px;
    gap: 12px;
  }
}
.mosaic-cell {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--bone);
  aspect-ratio: 1 / 1;
}
@media (min-width: 900px) {
  .mosaic-cell { aspect-ratio: auto; }
  .mosaic-cell-1 { grid-column: span 5; grid-row: span 3; }
  .mosaic-cell-2 { grid-column: span 4; grid-row: span 2; }
  .mosaic-cell-3 { grid-column: span 3; grid-row: span 2; }
  .mosaic-cell-4 { grid-column: span 4; grid-row: span 2; }
  .mosaic-cell-5 { grid-column: span 3; grid-row: span 3; }
}
.mosaic-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.mosaic-cell:hover img { transform: scale(1.04); }

/* ---------- Amenities grid ---------- */
.amenities {
  background: var(--chalk-pure);
}
.amenities-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .amenities-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .amenities-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }

.amenity {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  background: var(--chalk);
  border-radius: var(--r-md);
  transition: border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.amenity:hover { border-color: var(--copper); transform: translateY(-2px); }
.amenity-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--copper);
  margin-bottom: var(--sp-3);
}
.amenity h3 {
  font-size: var(--fs-xl);
  font-weight: 500;
  margin-bottom: var(--sp-2);
  color: var(--ink);
}
.amenity p { color: var(--ink-soft); font-size: 15px; line-height: 1.65; margin: 0; }
.amenity-list {
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
}
.amenity-list li {
  font-size: 14px;
  color: var(--ink-soft);
  padding: 7px 0;
  border-top: 1px solid var(--line-light);
  display: flex;
  align-items: center;
  gap: 10px;
}
.amenity-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--copper);
  flex-shrink: 0;
}

/* ---------- Rooms (room-by-room) ---------- */
.rooms-grid {
  display: grid;
  gap: var(--sp-7);
}
.room {
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 900px) {
  .room {
    grid-template-columns: 7fr 5fr;
    gap: var(--sp-7);
    align-items: center;
  }
  .room.room-flip { grid-template-columns: 5fr 7fr; }
  .room.room-flip .room-photo { order: 2; }
}
.room-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--bone);
}
.room-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.room-photo:hover img { transform: scale(1.03); }
.room-photo-tag {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  background: rgba(248, 245, 238, 0.92);
  padding: 4px 12px;
  border-radius: 999px;
  color: var(--ink);
}
.room-copy h3 {
  font-size: var(--fs-3xl);
  margin-bottom: var(--sp-3);
}
.room-copy h3 em { font-style: italic; color: var(--copper); }
.room-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--sp-4);
}
.room-meta span {
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: var(--bone);
  padding: 5px 12px;
  border-radius: 999px;
  color: var(--ink-soft);
}

/* ---------- Reviews ---------- */
.reviews {
  background: var(--chalk-pure);
}
.review-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--copper);
  font-size: 18px;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-3);
}
.review-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--sp-7);
}
.review-rating-num {
  font-family: var(--font-display);
  font-size: clamp(60px, 8vw, 100px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
}
.review-rating-num small { font-size: 0.4em; color: var(--mist); }
.review-rating-label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
  margin-top: var(--sp-2);
}

.testimonials {
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 800px) { .testimonials { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); } }
@media (min-width: 1100px) { .testimonials { grid-template-columns: repeat(3, 1fr); } }

.testimonial {
  padding: var(--sp-6);
  background: var(--chalk);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.testimonial-quote {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.5;
  color: var(--ink);
  font-style: italic;
  font-weight: 400;
  margin: 0;
}
.testimonial-quote::before {
  content: "“";
  font-size: 60px;
  line-height: 0;
  display: block;
  color: var(--copper);
  font-family: var(--font-display);
  height: 24px;
  margin-bottom: 6px;
  font-style: normal;
}
.testimonial-attr {
  font-size: 13px;
  color: var(--mist);
  letter-spacing: 0.04em;
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-light);
}
.testimonial-attr strong { color: var(--ink); font-weight: 500; }

/* ---------- Area / map ---------- */
.area-grid {
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 800px) { .area-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .area-grid { grid-template-columns: repeat(4, 1fr); } }

.area-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: flex-end;
  background: var(--bone);
}
.area-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
  z-index: 1;
}
.area-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(27, 26, 23, 0.78) 0%, rgba(27, 26, 23, 0.10) 60%, transparent 100%);
  z-index: 2;
}
.area-card:hover img { transform: scale(1.05); }
.area-card-copy {
  position: relative;
  z-index: 3;
  padding: var(--sp-5);
  color: var(--chalk);
}
.area-card-distance {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper-soft);
  margin-bottom: 6px;
}
.area-card-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  margin: 0 0 6px;
  color: var(--chalk);
}
.area-card-desc { font-size: 14px; color: var(--mist-soft); margin: 0; line-height: 1.5; }

/* ---------- Distance list (chevron) ---------- */
.distance-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 700px) { .distance-list { grid-template-columns: 1fr 1fr; column-gap: var(--sp-7); } }
.distance-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-light);
  margin: 0;
  font-size: 16px;
  gap: var(--sp-3);
}
.distance-list li span:first-child { color: var(--ink); }
.distance-list li span:last-child {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--copper);
  white-space: nowrap;
}

/* ---------- Pricing ---------- */
.rates-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.rates-table th, .rates-table td {
  padding: 16px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.rates-table th {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
  font-weight: 500;
}
.rates-table td.rate {
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  color: var(--copper);
}
.rates-table tr:hover td { background: var(--chalk-pure); }

.included-grid {
  display: grid;
  gap: var(--sp-3);
}
@media (min-width: 700px) { .included-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .included-grid { grid-template-columns: repeat(3, 1fr); } }
.included-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--chalk-pure);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 15px;
}
.included-item::before {
  content: "✓";
  color: var(--copper);
  font-size: 16px;
  font-weight: 600;
}

/* ---------- Gallery (full) ---------- */
.gallery-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: var(--sp-7);
}
.gallery-tab {
  padding: 9px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: transparent;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.gallery-tab:hover { border-color: var(--ink); color: var(--ink); }
.gallery-tab.is-active { background: var(--ink); color: var(--chalk); border-color: var(--ink); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 700px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 1100px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  aspect-ratio: 1 / 1;
  background: var(--bone);
  cursor: pointer;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item.tall { aspect-ratio: 3 / 4; }
.gallery-item.wide { aspect-ratio: 4 / 3; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 19, 17, 0.95);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3);
}
.lightbox.is-open { display: flex; }
.lightbox-img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--r-sm);
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  background: rgba(248, 245, 238, 0.10);
  border: 1px solid rgba(248, 245, 238, 0.20);
  color: var(--chalk);
  width: 48px; height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(248, 245, 238, 0.25); }
.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }

/* ---------- Contact form ---------- */
.contact-grid {
  display: grid;
  gap: var(--sp-7);
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 5fr 7fr; gap: var(--sp-8); }
}
.contact-info-card {
  background: var(--moss-deep);
  color: var(--chalk);
  padding: var(--sp-6);
  border-radius: var(--r-md);
}
.contact-info-card h3 { color: var(--chalk); margin-bottom: var(--sp-3); }
.contact-info-card .lede { color: var(--mist-soft); }
.contact-info-list {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
}
.contact-info-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  border-top: 1px solid rgba(248, 245, 238, 0.14);
  margin: 0;
}
.contact-info-list li:first-child { border-top: 0; padding-top: 0; }
.contact-info-list strong {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper-soft);
  font-weight: 500;
}
.contact-info-list a, .contact-info-list span:not(strong) {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--chalk);
  font-weight: 400;
}
.contact-info-list a:hover { color: var(--copper-soft); }

.form-card {
  background: var(--chalk-pure);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-6);
}
.form-row {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
@media (min-width: 600px) { .form-row.form-row-2 { grid-template-columns: 1fr 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
  font-weight: 500;
}
.form-field input, .form-field select, .form-field textarea {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  padding: 13px 14px;
  background: var(--chalk);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease);
  outline: none;
  width: 100%;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--copper);
}
.form-field textarea { min-height: 130px; resize: vertical; }
.form-actions { margin-top: var(--sp-4); }
.form-note {
  font-size: 12px;
  color: var(--mist);
  margin-top: var(--sp-3);
}

/* ---------- Footer CTA ---------- */
.footer-cta {
  background: var(--ink);
  color: var(--chalk);
  padding: var(--sp-8) 0;
  position: relative;
  overflow: hidden;
}
.footer-cta::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -8%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(180, 88, 46, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.footer-cta-grid {
  display: grid;
  gap: var(--sp-6);
  position: relative;
  z-index: 2;
}
@media (min-width: 900px) {
  .footer-cta-grid { grid-template-columns: 7fr 5fr; gap: var(--sp-7); align-items: end; }
}
.footer-cta-title { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.04; color: var(--chalk); }
.footer-cta-title em { font-style: italic; color: var(--copper-soft); }
.footer-cta-lede { color: var(--mist-soft); margin-top: var(--sp-3); }
.footer-cta-actions { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 600px) { .footer-cta-actions { flex-direction: row; flex-wrap: wrap; } }
.bg-ink .btn-ghost { color: var(--chalk); }
.bg-ink .btn-ghost:hover { color: var(--copper-soft); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--mist-soft);
  padding: var(--sp-7) 0 var(--sp-5);
  border-top: 1px solid rgba(248, 245, 238, 0.10);
}
.footer-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: var(--sp-7); } }
.footer-col-brand { max-width: 360px; }
.brand-footer { display: inline-flex; margin-bottom: var(--sp-3); }
.brand-footer .brand-mark { color: var(--chalk); }
.footer-blurb { font-size: 14px; color: var(--mist-soft); line-height: 1.7; margin: var(--sp-3) 0; }
.footer-credentials { display: flex; flex-direction: column; gap: 6px; margin-top: var(--sp-3); }
.credential {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
}

.footer-heading {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--copper-soft);
  margin: 0 0 var(--sp-3);
}
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: 8px; }
.footer-list a { font-size: 15px; color: var(--mist-soft); }
.footer-list a:hover { color: var(--chalk); }

.footer-phone {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--chalk);
  display: inline-block;
  margin-top: 4px;
  letter-spacing: 0.01em;
}
.footer-phone:hover { color: var(--copper-soft); }
.footer-hours {
  font-size: 14px;
  color: var(--mist-soft);
  margin-top: var(--sp-3);
  line-height: 1.7;
}

.footer-base {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(248, 245, 238, 0.10);
}
@media (min-width: 700px) { .footer-base { flex-direction: row; justify-content: space-between; align-items: center; } }
.footer-copy, .footer-credit {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--mist);
  margin: 0;
}
.footer-credit a { color: var(--mist-soft); border-bottom: 1px solid rgba(248, 245, 238, 0.20); }
.footer-credit a:hover { color: var(--chalk); border-color: var(--chalk); }

/* ---------- Reveal animations ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
[data-reveal][data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal][data-reveal-delay="4"] { transition-delay: 0.32s; }
[data-reveal][data-reveal-delay="5"] { transition-delay: 0.40s; }

/* ---------- Brand mark (text logo) ---------- */
.brand-mark {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink);
  transition: color var(--t-fast) var(--ease);
}
.brand-mark-le {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--copper);
  margin-bottom: 1px;
}
.brand-mark-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  text-transform: none;
}
.brand-mark-tagline {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--mist);
  margin-top: 4px;
}
.brand:hover .brand-mark-name { color: var(--copper); }

/* ---------- Utility ---------- */
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.text-center { text-align: center; }
.mt-3 { margin-top: var(--sp-3); }
.mt-5 { margin-top: var(--sp-5); }
.mt-7 { margin-top: var(--sp-7); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-7 { margin-bottom: var(--sp-7); }

/* Hide elements based on language */
[data-i18n-show="fr"] { display: none; }
html[lang="fr"] [data-i18n-show="en"] { display: none; }
html[lang="fr"] [data-i18n-show="fr"] { display: initial; }


/* =====================================================================
   HOME REDESIGN — "ISSUE 76G1515" travel-magazine front-of-book
   Photo-led editorial, set in the existing chalk/ink/copper/moss tokens.
   Sections: hr-hero, hr-masthead, hr-spread, hr-ticker, hr-rooms,
             hr-garden, hr-setting, hr-pursuits, hr-quote, hr-stay
   ===================================================================== */

/* ---- Shared editorial primitives ---- */
.hr-section { position: relative; padding: clamp(72px, 9vw, 144px) 0; }
.hr-section.tight { padding: clamp(48px, 6vw, 88px) 0; }
.hr-section.flush { padding: 0; }

.hr-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--copper);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.hr-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}

.hr-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--copper);
  letter-spacing: 0.02em;
}

/* ===================================================================
   1. HERO — magazine cover (photo CONTAINED at native resolution)
   Replaces full-bleed because source photos top out at ~800–1064 px.
   =================================================================== */
.hr-hero {
  position: relative;
  background: var(--chalk);
  overflow: hidden;
  isolation: isolate;
  padding: clamp(18px, 2.5vw, 32px) 0 clamp(40px, 5vw, 72px);
}

/* Subtle paper-grain backdrop — magazine page feel without overpowering */
.hr-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 60% at 12% 0%, rgba(180, 88, 46, 0.05), transparent 60%),
    radial-gradient(80% 60% at 100% 100%, rgba(74, 92, 69, 0.06), transparent 70%);
  z-index: 0;
}

.hr-hero-mast {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 clamp(20px, 3vw, 48px) clamp(14px, 1.6vw, 22px);
  border-bottom: 1px solid var(--ink);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  max-width: 1480px;
  margin: 0 auto;
}
.hr-hero-mast > span { display: inline-flex; align-items: center; gap: 10px; }
.hr-hero-mast .dot { width: 5px; height: 5px; background: var(--copper); border-radius: 50%; display: inline-block; }
.hr-hero-issue {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 14px;
  color: var(--copper);
}

.hr-hero-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 5vw, 80px);
  padding: clamp(36px, 5vw, 72px) clamp(20px, 4vw, 56px) 0;
  max-width: 1480px;
  margin: 0 auto;
  align-items: center;
}
@media (min-width: 900px) {
  .hr-hero-stage {
    grid-template-columns: minmax(360px, 6fr) minmax(0, 7fr);
    gap: clamp(56px, 6vw, 96px);
  }
}

/* PHOTO COVER — bounded, sharp, magazine-frame */
.hr-hero-cover {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 560px;
  background: var(--bone);
  overflow: hidden;
  justify-self: start;
}
@media (min-width: 900px) {
  .hr-hero-cover { max-width: 100%; aspect-ratio: 5 / 6; }
}
.hr-hero-slides {
  position: absolute;
  inset: 0;
}
.hr-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}
.hr-hero-slide.is-active { opacity: 1; z-index: 2; }
.hr-hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Subtle ken-burns only on the active slide so the contained photo doesn't feel static */
  transform: scale(1);
  transition: transform 8s var(--ease-out);
}
.hr-hero-slide.is-active img { transform: scale(1.04); }

/* Editorial corner ticks — like a film cell */
.hr-hero-cover::before,
.hr-hero-cover::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid var(--ink);
  z-index: 4;
  pointer-events: none;
}
.hr-hero-cover::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.hr-hero-cover::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.hr-hero-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  background: linear-gradient(0deg, rgba(27, 26, 23, 0.62), transparent);
  color: var(--chalk);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hr-hero-cap em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--copper-soft);
}
.hr-hero-cap-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--mist-soft);
}

/* TYPE COLUMN */
.hr-hero-text {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.4vw, 34px);
}
.hr-hero-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--copper);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.hr-hero-eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: currentColor;
  display: inline-block;
}

.hr-hero-h1 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 400;
  font-size: clamp(48px, 8.4vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
  font-feature-settings: "lnum";
}
.hr-hero-h1 em { font-style: italic; color: var(--copper); }
.hr-hero-h1 .small {
  font-family: var(--font-display);
  font-size: 0.28em;
  letter-spacing: 0;
  display: block;
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
  line-height: 1.3;
  margin-top: 22px;
  max-width: 24ch;
}

.hr-hero-strap {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 38ch;
  margin: 0;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  padding: 18px 0 0;
}

.hr-hero-cta { display: inline-flex; gap: 12px; flex-wrap: wrap; }

/* coordinates / footer caption inside text column */
.hr-hero-coords {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(20px, 2.4vw, 36px);
  align-items: baseline;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mist);
}
.hr-hero-coords strong {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--copper);
}

/* Mobile stacking — photo first, then type */
@media (max-width: 899px) {
  .hr-hero-stage {
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 48px);
    padding-top: clamp(24px, 4vw, 40px);
  }
  .hr-hero-cover { aspect-ratio: 1 / 1; max-width: 100%; }
  .hr-hero-mast { font-size: 10px; letter-spacing: 0.16em; gap: 8px; padding-bottom: 10px; }
  .hr-hero-mast .hide-sm { display: none; }
}

/* ===================================================================
   2. MASTHEAD STRIP — magazine credits one-liner
   =================================================================== */
.hr-masthead {
  background: var(--chalk);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  overflow: hidden;
}
.hr-masthead-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 22px);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hr-masthead-row .sep { color: var(--copper); font-style: italic; font-family: var(--font-display); text-transform: none; letter-spacing: 0; }
.hr-masthead-row em { color: var(--copper); font-family: var(--font-display); font-style: italic; text-transform: none; letter-spacing: 0; }

/* ===================================================================
   3. OPENING SPREAD — asymmetric magazine spread
   =================================================================== */
.hr-spread {
  background: var(--chalk);
}
.hr-spread-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--container-x);
}
@media (min-width: 1000px) {
  .hr-spread-grid {
    grid-template-columns: minmax(280px, 5fr) 7fr;
    gap: clamp(64px, 7vw, 120px);
  }
}
.hr-spread-text {
  position: relative;
  padding-top: clamp(16px, 4vw, 60px);
}
@media (min-width: 1000px) {
  .hr-spread-text { padding-top: clamp(60px, 8vw, 140px); }
}
.hr-spread-pull {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 26px 0 24px;
  text-wrap: balance;
}
.hr-spread-pull em { font-style: italic; color: var(--copper); }
.hr-spread-body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink-soft);
  font-weight: 300;
  max-width: 36ch;
}
.hr-spread-byline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 32px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mist);
  border-top: 1px solid var(--line);
  padding-top: 18px;
  max-width: 280px;
}
.hr-spread-byline strong {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.hr-spread-figure {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
@media (min-width: 1000px) {
  .hr-spread-figure {
    margin-top: -40px;
    aspect-ratio: 11 / 14;
  }
}
.hr-spread-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.8s var(--ease-out);
}
.hr-spread-figure:hover img { transform: scale(1.03); }
.hr-spread-fig-cap {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: var(--chalk);
  padding: 8px 14px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hr-spread-fig-cap em { color: var(--copper); font-family: var(--font-display); font-style: italic; text-transform: none; letter-spacing: 0; margin-right: 6px; }

/* ===================================================================
   4. NUMBERS TICKER — huge italic stats
   =================================================================== */
.hr-ticker {
  background: var(--ink);
  color: var(--chalk);
  padding: clamp(48px, 6vw, 96px) 0;
  overflow: hidden;
  border-top: 1px solid rgba(248, 245, 238, 0.10);
  border-bottom: 1px solid rgba(248, 245, 238, 0.10);
  position: relative;
}
.hr-ticker::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: var(--copper);
  height: 1px;
  width: 80px;
}
.hr-ticker-row {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(28px, 5vw, 80px);
  white-space: nowrap;
  align-items: baseline;
  padding: 0 var(--container-x);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.hr-ticker-row::-webkit-scrollbar { display: none; }
@media (min-width: 1100px) {
  .hr-ticker-row { justify-content: center; overflow-x: visible; }
}
.hr-ticker-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  scroll-snap-align: center;
  flex-shrink: 0;
}
.hr-ticker-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 8vw, 112px);
  line-height: 1;
  color: var(--copper-soft);
  letter-spacing: -0.01em;
}
.hr-ticker-num .unit {
  font-size: 0.42em;
  font-style: normal;
  color: var(--mist-soft);
  margin-left: 4px;
  letter-spacing: 0.04em;
}
.hr-ticker-lbl {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mist-soft);
}

/* ===================================================================
   5. ROOMS — horizontal cinematic strip
   =================================================================== */
.hr-rooms { background: var(--chalk); padding: clamp(48px, 6vw, 96px) 0 clamp(72px, 8vw, 120px); }
.hr-rooms-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: 0 clamp(20px, 4vw, 56px);
  max-width: 1480px;
  margin: 0 auto clamp(32px, 4vw, 56px);
}
.hr-rooms-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin: 8px 0 0;
  max-width: 18ch;
}
.hr-rooms-head h2 em { font-style: italic; color: var(--copper); }
.hr-rooms-help {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mist);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hr-rooms-help::after { content: "→"; color: var(--copper); font-style: italic; }

.hr-rooms-track {
  display: flex;
  gap: clamp(14px, 2vw, 28px);
  padding: 0 clamp(20px, 4vw, 56px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-padding-left: clamp(20px, 4vw, 56px);
}
.hr-rooms-track::-webkit-scrollbar { display: none; }
.hr-room {
  position: relative;
  flex: 0 0 clamp(280px, 78vw, 560px);
  height: clamp(440px, 60vh, 720px);
  scroll-snap-align: start;
  overflow: hidden;
  background: var(--bone);
  cursor: pointer;
}
.hr-room img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-out);
  z-index: 1;
}
.hr-room:hover img { transform: scale(1.05); }
.hr-room::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.18) 100%);
  z-index: 2;
  pointer-events: none;
}
.hr-room-num {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--copper-soft);
  letter-spacing: 0.04em;
}
.hr-room-cap {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  z-index: 3;
  color: var(--chalk);
}
.hr-room-cap-eyebrow {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(248, 245, 238, 0.7);
  display: block;
  margin-bottom: 6px;
}
.hr-room-cap-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0;
}
@media (max-width: 700px) {
  .hr-rooms-head { padding: 0 var(--container-x); }
  .hr-rooms-track { padding: 0 var(--container-x); scroll-padding-left: var(--container-x); }
  .hr-room { flex: 0 0 84vw; height: 64vh; }
}

/* ===================================================================
   6. GARDEN ESSAY — drop-cap two-column-ish editorial
   =================================================================== */
.hr-garden {
  background: var(--chalk-pure);
  padding: clamp(72px, 9vw, 144px) 0;
}
.hr-garden-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 80px);
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--container-x);
  align-items: center;
}
@media (min-width: 1000px) {
  .hr-garden-grid { grid-template-columns: 7fr 5fr; gap: clamp(80px, 7vw, 120px); }
}
.hr-garden-figure {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
}
.hr-garden-figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 2s var(--ease-out);
}
.hr-garden-figure:hover img { transform: scale(1.04); }
.hr-garden-figure-stamp {
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--ink);
  color: var(--chalk);
  padding: 12px 16px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.hr-garden-figure-stamp em { color: var(--copper-soft); font-style: normal; margin-left: 6px; }

.hr-garden-text h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin: 12px 0 22px;
  text-wrap: balance;
}
.hr-garden-text h2 em { font-style: italic; color: var(--copper); }
.hr-garden-text p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink-soft);
  font-weight: 300;
  margin: 0 0 1em;
}
.hr-garden-text p.dropcap::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  float: left;
  font-size: 5em;
  line-height: 0.85;
  margin: 4px 12px -4px 0;
  color: var(--copper);
}

/* ===================================================================
   7. SETTING — Étretat full-bleed + floating distance card
   =================================================================== */
.hr-setting {
  position: relative;
  background: var(--ink);
  color: var(--chalk);
}
.hr-setting-cover {
  position: relative;
  height: clamp(520px, 80vh, 820px);
  overflow: hidden;
}
.hr-setting-cover img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  animation: hr-kenburns 24s var(--ease-out) forwards;
}
.hr-setting-cover::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, transparent 30%, rgba(27, 26, 23, 0.55) 100%);
}
.hr-setting-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: clamp(24px, 4vw, 48px);
  z-index: 2;
  max-width: 1480px;
  margin: 0 auto;
}
.hr-setting-tag {
  align-self: start;
  justify-self: end;
  background: var(--chalk);
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 2px;
}
.hr-setting-block {
  align-self: end;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: end;
}
@media (min-width: 900px) {
  .hr-setting-block { grid-template-columns: 1.1fr auto; }
}
.hr-setting-block h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 5.4vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.014em;
  color: var(--chalk);
  margin: 0;
  text-wrap: balance;
}
.hr-setting-block h2 em { font-style: italic; color: var(--copper-soft); }

.hr-distance-card {
  background: rgba(248, 245, 238, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--ink);
  padding: clamp(20px, 2.4vw, 32px);
  width: min(100%, 360px);
  border: 1px solid rgba(27, 26, 23, 0.12);
}
.hr-distance-card-head {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hr-distance-card-head::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--copper);
  display: inline-block;
}
.hr-distance-list {
  list-style: none; padding: 0; margin: 0;
}
.hr-distance-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(27, 26, 23, 0.12);
  font-size: 15px;
  margin: 0;
}
.hr-distance-list li:first-child { border-top: 0; padding-top: 0; }
.hr-distance-list .place { color: var(--ink); font-weight: 400; }
.hr-distance-list .km {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--copper);
}

/* ===================================================================
   8. PURSUITS — four typically-Norman activities
   =================================================================== */
.hr-pursuits {
  background: var(--chalk);
  padding: clamp(72px, 9vw, 144px) 0;
}
.hr-pursuits-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
  padding: 0 var(--container-x);
  margin: 0 auto clamp(40px, 5vw, 72px);
}
.hr-pursuits-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin: 4px 0 0;
}
.hr-pursuits-head h2 em { font-style: italic; color: var(--copper); }

.hr-pursuits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 40px) 0;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 var(--container-x);
}
@media (min-width: 700px) { .hr-pursuits-grid { grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3vw, 48px); } }
@media (min-width: 1100px) { .hr-pursuits-grid { grid-template-columns: repeat(4, 1fr); } }

.hr-pursuit { display: flex; flex-direction: column; gap: 16px; }
.hr-pursuit-fig {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bone);
}
.hr-pursuit-fig img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.hr-pursuit:hover .hr-pursuit-fig img { transform: scale(1.04); }
.hr-pursuit-fig-num {
  position: absolute;
  top: 14px; left: 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--chalk);
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  letter-spacing: 0.04em;
}
.hr-pursuit-eyebrow {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--copper);
}
.hr-pursuit-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  margin: 0;
  color: var(--ink);
}
.hr-pursuit-title em { font-style: italic; }
.hr-pursuit-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

/* ===================================================================
   9. GUEST QUOTE — typographic moment, no card
   =================================================================== */
.hr-quote {
  background: var(--moss-deep);
  color: var(--chalk);
  padding: clamp(96px, 12vw, 192px) 0;
  position: relative;
  overflow: hidden;
}
.hr-quote::before {
  content: "";
  position: absolute;
  top: -20%; right: -10%;
  width: 580px; height: 580px;
  background: radial-gradient(circle, rgba(180, 88, 46, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.hr-quote-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--container-x);
  position: relative;
  z-index: 2;
}
.hr-quote-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(96px, 14vw, 180px);
  line-height: 0.6;
  color: var(--copper-soft);
  margin-bottom: 8px;
  display: inline-block;
}
.hr-quote-body {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--chalk);
  margin: 0;
  max-width: 26ch;
  text-wrap: balance;
}
.hr-quote-attr {
  margin-top: clamp(28px, 4vw, 48px);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mist-soft);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.hr-quote-attr::before {
  content: "";
  width: 24px; height: 1px;
  background: var(--copper-soft);
  display: inline-block;
}
.hr-quote-attr strong { color: var(--copper-soft); font-weight: 500; }
.hr-quote-meta {
  margin-top: clamp(56px, 8vw, 96px);
  display: flex;
  flex-wrap: wrap;
  gap: 24px clamp(40px, 5vw, 72px);
  border-top: 1px solid rgba(248, 245, 238, 0.14);
  padding-top: 28px;
  align-items: baseline;
}
.hr-quote-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hr-quote-meta-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  color: var(--copper-soft);
}
.hr-quote-meta-lbl {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mist-soft);
}

/* ===================================================================
   10. STAY — closing CTA spread (lighter, photo-led)
   =================================================================== */
.hr-stay {
  background: var(--chalk);
  padding: clamp(72px, 9vw, 144px) 0;
}
.hr-stay-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 80px);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--container-x);
  align-items: center;
}
@media (min-width: 1000px) {
  .hr-stay-grid { grid-template-columns: 6fr 6fr; gap: clamp(64px, 7vw, 120px); }
}
.hr-stay-figure {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.hr-stay-figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.8s var(--ease-out);
}
.hr-stay-figure:hover img { transform: scale(1.04); }
.hr-stay-figure-tag {
  position: absolute;
  top: 16px; left: 16px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  background: var(--chalk);
  color: var(--ink);
  padding: 6px 12px;
}
.hr-stay-figure-tag em { color: var(--copper); font-style: normal; margin-right: 4px; }
.hr-stay-text h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 4.8vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.014em;
  margin: 12px 0 18px;
  text-wrap: balance;
}
.hr-stay-text h2 em { font-style: italic; color: var(--copper); }
.hr-stay-text p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink-soft);
  font-weight: 300;
  margin: 0 0 28px;
  max-width: 38ch;
}
.hr-stay-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hr-stay-tinydetail {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px clamp(28px, 4vw, 56px);
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.hr-stay-tinydetail > div {
  display: flex; flex-direction: column; gap: 2px;
}
.hr-stay-tinydetail .lbl {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mist);
}
.hr-stay-tinydetail .val {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  color: var(--ink);
}
.hr-stay-tinydetail .val em { color: var(--copper); }


/* =====================================================================
   HOME REDESIGN · 5b — MOMENTS
   Slow-luxury alternating walkthrough (echoes /the-house/).
   Photos breathe with subtle ken-burns once revealed.
   ===================================================================== */
.hr-moments {
  background: var(--chalk-pure);
  padding: clamp(72px, 9vw, 144px) 0;
  position: relative;
  overflow: hidden;
}
.hr-moments::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 40% at 100% 0%, rgba(74, 92, 69, 0.06), transparent 70%),
    radial-gradient(60% 30% at 0% 100%, rgba(180, 88, 46, 0.05), transparent 70%);
  pointer-events: none;
}

.hr-moments-head {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto clamp(48px, 6vw, 88px);
  padding: 0 var(--container-x);
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.hr-moments-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin: 4px 0 0;
  text-wrap: balance;
}
.hr-moments-head h2 em { font-style: italic; color: var(--copper); }

.hr-moments-grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(72px, 9vw, 144px);
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--container-x);
}

.hr-moment {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 1000px) {
  .hr-moment {
    grid-template-columns: 7fr 5fr;
    gap: clamp(56px, 6vw, 96px);
  }
  .hr-moment.hr-moment-flip { grid-template-columns: 5fr 7fr; }
  .hr-moment.hr-moment-flip .hr-moment-photo { order: 2; }
}

.hr-moment-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--bone);
  border-radius: 0;
}
.hr-moment-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* base state — pre-reveal: slightly zoomed and dim */
  transform: scale(1.08);
  filter: brightness(0.96);
  transition: transform 2.4s var(--ease-out), filter 1.6s var(--ease-out);
}
/* on reveal — settle into place */
.hr-moment.is-revealed .hr-moment-photo img {
  transform: scale(1);
  filter: brightness(1);
}
.hr-moment-photo:hover img {
  transform: scale(1.04);
  transition: transform 1.2s var(--ease-out);
}

.hr-moment-tag {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  background: var(--chalk);
  color: var(--ink);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 6px 14px;
}
/* corner ticks like the hero — film cell feel */
.hr-moment-photo::before,
.hr-moment-photo::after {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  border: 1px solid var(--ink);
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s var(--ease-out) 0.4s;
}
.hr-moment-photo::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.hr-moment-photo::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.hr-moment.is-revealed .hr-moment-photo::before,
.hr-moment.is-revealed .hr-moment-photo::after { opacity: 0.7; }

.hr-moment-copy {
  position: relative;
}
.hr-moment-copy h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.008em;
  margin: 12px 0 18px;
  text-wrap: balance;
  color: var(--ink);
}
.hr-moment-copy h3 em { font-style: italic; color: var(--copper); }
.hr-moment-copy p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  font-weight: 300;
  max-width: 50ch;
  margin: 0 0 22px;
}
.hr-moment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.hr-moment-meta span {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--chalk);
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--ink-soft);
  font-weight: 500;
}

/* Make the existing reveal animation a touch more luxe — longer and gentler */
.hr-moment[data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1.4s var(--ease-out), transform 1.4s var(--ease-out);
}
.hr-moment.is-revealed { opacity: 1; transform: none; }

/* Stagger flips so successive moments feel composed */
.hr-moment-flip[data-reveal] { transition-delay: 0.05s; }

@media (max-width: 999px) {
  .hr-moment-photo { aspect-ratio: 4 / 3; }
  .hr-moment-copy h3 { font-size: clamp(26px, 6.4vw, 36px); }
}

/* =====================================================================
   HOME REDESIGN · global luxe touch — extend reveal animations
   on photo-heavy components so they feel composed, not snappy.
   ===================================================================== */
.hr-spread-figure[data-reveal],
.hr-rooms .hr-room[data-reveal],
.hr-garden-figure[data-reveal],
.hr-pursuit[data-reveal],
.hr-stay-figure[data-reveal] {
  transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
}

/* Subtle lift on hr-spread figure */
.hr-spread-figure img,
.hr-garden-figure img,
.hr-stay-figure img {
  transform: scale(1.04);
  filter: brightness(0.97);
  transition: transform 2.2s var(--ease-out), filter 1.4s var(--ease-out);
}
.hr-spread-figure.is-revealed img,
.hr-garden-figure.is-revealed img,
.hr-stay-figure.is-revealed img {
  transform: scale(1);
  filter: brightness(1);
}
/* keep the existing :hover scale alive */
.hr-spread-figure:hover img,
.hr-garden-figure:hover img,
.hr-stay-figure:hover img {
  transform: scale(1.03);
  transition: transform 1.2s var(--ease-out);
}

/* Pursuits: fade up the 4:5 photo on reveal, like polaroids settling */
.hr-pursuit-fig img {
  transform: scale(1.06);
  filter: saturate(0.95) brightness(0.97);
  transition: transform 2s var(--ease-out), filter 1.4s var(--ease-out);
}
.hr-pursuit.is-revealed .hr-pursuit-fig img {
  transform: scale(1);
  filter: saturate(1) brightness(1);
}
.hr-pursuit:hover .hr-pursuit-fig img {
  transform: scale(1.04);
  transition: transform 1.2s var(--ease-out);
}


/* =====================================================================
   HOME REDESIGN · SPREAD slider
   Cross-fades between 4 property photos inside the bounded figure.
   Uses the existing [data-slider] / [data-slide] mechanism in main.js.
   ===================================================================== */
.hr-spread-figure { position: relative; }
.hr-spread-slides {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hr-spread-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
}
.hr-spread-slide.is-active { opacity: 1; z-index: 2; }
.hr-spread-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Subtle ken-burns ON the active slide so it breathes during its 6.5s */
  transform: scale(1);
  transition: transform 8s var(--ease-out);
}
.hr-spread-slide.is-active img { transform: scale(1.05); }

/* The figure already has aspect-ratio + overflow:hidden;
   we just need to make sure the slides cover the area perfectly */
@media (min-width: 1000px) {
  .hr-spread-figure { aspect-ratio: 11 / 14; }
}

/* Inactive figcaption sits above slides; bring it forward */
.hr-spread-fig-cap { z-index: 3; }

/* DOTS — minimal indicator under bottom-right corner */
.hr-spread-dots {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(248, 245, 238, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 999px;
}
.hr-spread-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(27, 26, 23, 0.30);
  transition: background var(--t-med) var(--ease), width var(--t-med) var(--ease);
  display: inline-block;
}
.hr-spread-dot.is-active {
  background: var(--copper);
  width: 18px;
  border-radius: 999px;
}

/* Override the global .hr-spread-figure[data-reveal] photo settle so it
   targets the active slide (since img is now inside .hr-spread-slide).
   The settle was applied to direct .hr-spread-figure img; we keep that
   working by giving the active slide the same effect on reveal. */
.hr-spread-figure img {
  /* reset the global pre-reveal scale we set earlier — the slide rules now own it */
  transform: scale(1);
  filter: brightness(1);
}
.hr-spread-figure[data-reveal]:not(.is-revealed) .hr-spread-slide img {
  filter: brightness(0.96);
}

@media (max-width: 999px) {
  .hr-spread-dots { bottom: 12px; right: 12px; padding: 5px 7px; }
  .hr-spread-dot { width: 4px; height: 4px; }
  .hr-spread-dot.is-active { width: 14px; }
}

/* ---------- Hosts page ---------- */
.hosts-grid {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
}
@media (min-width: 900px) {
  .hosts-grid { grid-template-columns: 5fr 7fr; gap: var(--sp-8); }
}

.hosts-portrait {
  position: relative;
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--mist-soft);
  box-shadow: 0 18px 48px -28px rgba(27, 26, 23, 0.45);
}
.hosts-portrait img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.hosts-portrait figcaption {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chalk);
  background: linear-gradient(to top, rgba(27, 26, 23, 0.78), rgba(27, 26, 23, 0));
  padding: var(--sp-6) var(--sp-4) var(--sp-3);
  position: absolute;
  inset: auto 0 0 0;
}
.hosts-portrait figcaption em {
  font-family: var(--font-script);
  font-style: normal;
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--copper-soft);
  margin-right: 8px;
}

.hosts-letter {
  background: var(--chalk-pure);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-6);
}
@media (min-width: 900px) {
  .hosts-letter { padding: var(--sp-7) var(--sp-7) var(--sp-6); }
}
.hosts-letter-stamp {
  display: inline-block;
  font-family: var(--font-script);
  font-size: 22px;
  color: var(--copper);
  margin-bottom: var(--sp-2);
  letter-spacing: 0.02em;
}
.hosts-letter h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05;
  margin: 0 0 var(--sp-5);
}
.hosts-letter h2 em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--copper);
}
.hosts-letter p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 var(--sp-4);
}
.hosts-letter p.dropcap::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  float: left;
  font-size: 4.2em;
  line-height: 0.85;
  padding: 0.08em 0.10em 0 0;
  color: var(--copper);
}
.hosts-signature {
  margin-top: var(--sp-5);
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.5;
}
.hosts-signature strong {
  font-family: var(--font-script);
  font-size: 32px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.hosts-signature-meta {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
}
.hosts-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}