/* =================================================================
   VILLA MOREA — STYLESHEET
   Design language: Aegean horizon. A deep sea-blue and warm stone
   palette, one display face (Aboreto) for headings paired
   with a quiet sans (Work Sans) for reading text. Structure is
   built around a horizontal "horizon" rule motif rather than cards,
   echoing the sea line visible from the villa's pool terrace.
   ================================================================= */

/* -----------------------------------------------------------------
   1. DESIGN TOKENS
   ----------------------------------------------------------------- */
:root {
  /* Colour */
  --color-aegean-900: #113445;
  --color-aegean-700: #1d4e63;
  --color-aegean-500: #3d7a91;
  --color-sand-500: #c9a877;
  --color-sand-300: #e3d2b0;
  --color-stone-100: #efe9dd;
  --color-off-white: #faf7f0;
  --color-olive-600: #6b7256;
  --color-ink: #1e231f;
  --color-ink-soft: #4a5049;
  --color-white: #ffffff;
  --color-line: rgba(30, 35, 31, 0.14);
  --color-focus: #c9622a;

  /* Type */
  --font-display: "Aboreto", "Iowan Old Style", Georgia, serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.45vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.3rem + 0.9vw, 1.9rem);
  --step-3: clamp(2rem, 1.6rem + 1.8vw, 2.9rem);
  --step-4: clamp(2.6rem, 2rem + 3vw, 4.2rem);

  /* Layout */
  --max-width: 1220px;
  --gutter: clamp(1.25rem, 3vw, 3rem);
  --radius-sm: 2px;
  --radius-md: 4px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* -----------------------------------------------------------------
   2. RESET & BASE
   ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { 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;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-off-white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.18;
  margin: 0 0 0.5em;
  color: var(--color-aegean-900);
}
h1 { font-size: var(--step-4); font-weight: 400; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); font-family: var(--font-body); font-weight: 600; }

p { max-width: 62ch; margin: 0 0 1.1em; color: var(--color-ink-soft); }
p.lede { font-size: var(--step-1); max-width: 46ch; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

a.skip-link {
  position: absolute; left: 1rem; top: -60px;
  background: var(--color-aegean-900); color: var(--color-white);
  padding: 0.75em 1.25em; z-index: 200; border-radius: var(--radius-sm);
  transition: top 0.2s var(--ease);
}
a.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* -----------------------------------------------------------------
   3. BUTTONS
   ----------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.9em 1.7em;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.15s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--color-sand-500);
  color: var(--color-aegean-900);
}
.btn-primary:hover { background: #b4914e; }

.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.btn-outline:hover { background: rgba(255,255,255,0.12); }

.btn-ghost {
  background: transparent;
  color: var(--color-aegean-900);
  padding-inline: 0;
  border-bottom: 1px solid var(--color-aegean-900);
  border-radius: 0;
}

/* -----------------------------------------------------------------
   4. HEADER
   ----------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 247, 240, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--color-line);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.9rem;
}
.logo {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-aegean-900);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.logo span { color: var(--color-sand-500); }

.logo-img {
  height: 40px;
  width: auto;
  display: block;
}
.logo-chip {
  background: var(--color-off-white);
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
}
.logo-chip .logo-img { height: 34px; }
.footer-grid .logo-chip { margin-bottom: 0.8rem; }

.main-nav { display: none; }
.main-nav ul {
  list-style: none;
  display: flex;
  gap: 1.9rem;
  margin: 0;
  padding: 0;
}
.main-nav a {
  text-decoration: none;
  font-size: 0.92rem;
  color: var(--color-ink);
  padding: 0.4em 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.main-nav a:hover,
.main-nav a:focus-visible { border-color: var(--color-sand-500); }

.header-actions { display: flex; align-items: center; gap: 1rem; }

.lang-select-wrap { position: relative; }
.lang-select {
  appearance: none;
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: 0.5em 1.8em 0.5em 0.9em;
  font-size: 0.85rem;
  color: var(--color-ink);
  cursor: pointer;
}
.lang-select-wrap::after {
  content: "";
  position: absolute;
  right: 0.75em;
  top: 50%;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--color-ink);
  border-bottom: 1.5px solid var(--color-ink);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: none;
  border: none;
  padding: 0.4em;
  cursor: pointer;
  color: var(--color-aegean-900);
}
.menu-toggle .bars { display: flex; flex-direction: column; gap: 4px; }
.menu-toggle .bars span { width: 22px; height: 2px; background: currentColor; display: block; }

.header-actions .btn-primary { display: none; }

.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--color-aegean-900);
  color: var(--color-white);
  transform: translateX(100%);
  transition: transform 0.35s var(--ease);
  z-index: 150;
  display: flex;
  flex-direction: column;
  padding: 1.5rem var(--gutter) 2.5rem;
  overflow-y: auto;
}
.mobile-menu[data-open="true"] { transform: translateX(0); }
.mobile-menu__top {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.5rem;
}
.mobile-menu__top .logo { color: var(--color-white); }
.mobile-menu__close {
  background: none; border: none; color: var(--color-white);
  font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 0.2em;
}
.mobile-menu nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.mobile-menu nav a {
  display: block;
  text-decoration: none;
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 1.6rem;
  padding: 0.5em 0;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.mobile-menu__langs {
  display: flex; gap: 0.75rem; margin-top: 2rem; flex-wrap: wrap;
}
.mobile-menu__langs a {
  color: var(--color-white);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: var(--radius-sm);
  padding: 0.4em 0.9em;
  text-decoration: none;
  font-size: 0.85rem;
}
.mobile-menu__langs a[aria-current="true"] { background: var(--color-sand-500); border-color: var(--color-sand-500); color: var(--color-aegean-900); }
.mobile-menu .btn-primary { margin-top: 2rem; align-self: flex-start; }

@media (min-width: 960px) {
  .main-nav { display: block; }
  .menu-toggle { display: none; }
  .header-actions .btn-primary { display: inline-flex; }
  .mobile-menu { display: none; }
}

/* -----------------------------------------------------------------
   5. HERO
   ----------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  color: var(--color-white);
  overflow: hidden;
}
.hero__media {
  position: absolute; inset: 0; z-index: 0;
}
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
}
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(17,52,69,0.15) 0%, rgba(17,52,69,0.35) 35%, rgba(17,52,69,0.72) 65%, rgba(17,52,69,0.95) 100%);
  z-index: 1;
}
.hero__content {
  position: relative; z-index: 2;
  padding-block: 3.5rem 3rem;
  max-width: 780px;
}
.hero__eyebrow {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 0.9rem;
  color: var(--color-sand-300);
}
.hero h1 { color: var(--color-white); margin-bottom: 0.4em; }
.hero p.lede { color: rgba(255,255,255,0.9); }
.hero__facts {
  display: flex; flex-wrap: wrap; gap: 1.4rem 2.2rem;
  margin: 1.6rem 0 2.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,0.3);
}
.hero__fact { font-size: 0.92rem; }
.hero__fact strong {
  display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 400;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem; }

/* -----------------------------------------------------------------
   6. SECTIONS
   ----------------------------------------------------------------- */
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--tint { background: var(--color-stone-100); }
.section--dark {
  background: var(--color-aegean-900); color: var(--color-white);
}
.section--dark h2, .section--dark h3 { color: var(--color-white); }
.section--dark p { color: rgba(255,255,255,0.82); }

.section__head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: 1.5rem; margin-bottom: 2.6rem;
}
.section__head .eyebrow {
  display: block; color: var(--color-sand-500); font-weight: 600; margin-bottom: 0.6rem; font-size: 0.9rem;
}

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

/* Quick facts strip */
.quickfacts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
}
@media (min-width: 720px) { .quickfacts { grid-template-columns: repeat(4, 1fr); } }
.quickfacts__item {
  padding-top: 1.1rem;
  border-top: 2px solid var(--color-sand-500);
}
.quickfacts__item strong {
  display: block; font-family: var(--font-display); font-size: var(--step-3); font-weight: 400; color: var(--color-aegean-900);
}
.quickfacts__item span { font-size: 0.88rem; color: var(--color-ink-soft); }

/* Residence feature rows — spacing/divider wrapper only;
   column layout and media treatment come from .overlap-grid below */
.feature-rows { display: flex; flex-direction: column; }
.feature-row {
  padding-block: 2.4rem;
  border-top: 1px solid var(--color-line);
}
.feature-row:last-child { border-bottom: 1px solid var(--color-line); }
.feature-row__label { font-size: 0.85rem; color: var(--color-sand-500); font-weight: 600; margin-bottom: 0.5rem; display: block; }

/* -----------------------------------------------------------------
   Overlap grid — text and photo share a row, with the photo
   extending under the text and fading out at that edge. Used for
   the residence intro, the four "Inside Villa Morea" rows, and the
   location section. Replaces the old .split / .feature-row grid /
   .location-block layouts, which stretched photos to fill a much
   taller text column and distorted them.
   ----------------------------------------------------------------- */
.fade-img {
  border-radius: 8px;
  object-fit: cover;
  width: 100%;
  height: 100%;
  min-height: 350px; /* keeps the photo readable at any column height */
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}
.fade-img:hover { transform: scale(1.02); }

/* Mobile: simple stack */
.overlap-grid {
  display: grid;
  gap: 1.5rem;
  overflow: hidden;
}
.overlap-grid__text { z-index: 2; position: relative; }
.overlap-grid__media { z-index: 1; position: relative; }

/* Desktop: 12-column overlap */
@media (min-width: 780px) {
  .overlap-grid {
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    gap: 0;
  }

  /* Text left, photo right (extends left, under the text) */
  .overlap-grid--text-left .overlap-grid__text {
    grid-column: 1 / 8;
    grid-row: 1;
  }
  .overlap-grid--text-left .overlap-grid__media {
    grid-column: 4 / 13;
    grid-row: 1;
  }
  .overlap-grid--text-left .fade-img {
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 26%, rgba(0,0,0,0) 52%);
    mask-image: linear-gradient(to left, rgba(0,0,0,1) 26%, rgba(0,0,0,0) 52%);
  }

  /* Photo left (extends right, under the text), text right.
     Text is pulled further right and right-aligned, and the photo
     fades out well before it reaches the text column, so no letters
     ever sit on top of a still-visible, detailed part of the photo. */
  .overlap-grid--text-right .overlap-grid__media {
    grid-column: 1 / 9;
    grid-row: 1;
  }
  .overlap-grid--text-right .overlap-grid__text {
    grid-column: 7 / 13;
    grid-row: 1;
    text-align: right;
  }
  .overlap-grid--text-right .overlap-grid__text .distance-list {
    text-align: left; /* rows with a label + value read better left-aligned even here */
  }
  .overlap-grid--text-right .fade-img {
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 26%, rgba(0,0,0,0) 60%);
    mask-image: linear-gradient(to right, rgba(0,0,0,1) 26%, rgba(0,0,0,0) 60%);
  }

  /* "Contained" variant — the photo is the full background of the card
     and the text sits inside it (on a dark scrim), never past its
     edges. Used for the residence intro, where the copy is kept short
     enough to fit the photo at any width. Overrides the plain
     text-left column split above for this one block. */
  .overlap-grid--contained {
    display: block;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    min-height: 420px; /* height grows with the text content below, so
                           the copy always has room and never overflows
                           the photo — the photo (absolutely positioned,
                           object-fit: cover) simply fills whatever
                           height that ends up being. */
  }
  .overlap-grid--contained .overlap-grid__media {
    position: absolute;
    inset: 0;
  }
  .overlap-grid--contained .fade-img {
    width: 100%;
    height: 100%;
    border-radius: 0;
    min-height: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .overlap-grid--contained .overlap-grid__text {
    position: relative;
    max-width: 46%;
    padding: 2.6rem 2.2rem;
    box-sizing: border-box;
  }
  .overlap-grid--contained .overlap-grid__text::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(115deg, rgba(17,52,69,0.94) 0%, rgba(17,52,69,0.88) 55%, rgba(17,52,69,0.35) 85%, rgba(17,52,69,0) 100%);
  }
  .overlap-grid--contained .eyebrow { color: var(--color-sand-300); }
  .overlap-grid--contained h2 { color: var(--color-off-white); font-size: var(--step-2); }
  .overlap-grid--contained p { color: rgba(250,247,240,0.92); }
  .overlap-grid--contained p.lede { font-size: var(--step-0); max-width: none; }
}

/* Amenities */
.amenity-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem 2.2rem;
}
.amenity-group h3 { font-size: var(--step-1); margin-bottom: 0.9rem; }
.amenity-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.amenity-group li {
  display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.94rem; color: var(--color-ink-soft);
}
.amenity-group li svg { flex-shrink: 0; margin-top: 0.2em; color: var(--color-olive-600); }

/* Gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
}
@media (min-width: 700px) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; }
  .gallery-grid .g-wide { grid-column: span 2; }
  .gallery-grid .g-tall { grid-row: span 2; }
}
.gallery-grid button {
  border: none; padding: 0; margin: 0; background: none; cursor: zoom-in;
  width: 100%; height: 100%; border-radius: var(--radius-sm); overflow: hidden;
  display: block;
}
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.gallery-grid button:hover img { transform: scale(1.045); }

.lightbox {
  position: fixed; inset: 0; background: rgba(17,20,17,0.94); z-index: 300;
  display: none; align-items: center; justify-content: center; padding: 1.5rem;
}
.lightbox[data-open="true"] { display: flex; }
.lightbox img { max-height: 84vh; max-width: 90vw; object-fit: contain; border-radius: var(--radius-sm); }
.lightbox__caption { color: var(--color-white); text-align: center; margin-top: 1rem; font-size: 0.9rem; }
.lightbox__close, .lightbox__prev, .lightbox__next {
  position: absolute; background: rgba(255,255,255,0.12); border: none; color: var(--color-white);
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer; font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
}
.lightbox__close { top: 1.4rem; right: 1.4rem; }
.lightbox__prev { left: 1.4rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 1.4rem; top: 50%; transform: translateY(-50%); }
.lightbox__prev:hover, .lightbox__next:hover, .lightbox__close:hover { background: rgba(255,255,255,0.24); }

/* Location — layout comes from .overlap-grid */
.distance-list { list-style: none; margin: 1.5rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.distance-list li {
  display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.6rem;
  border-bottom: 1px dashed var(--color-line); font-size: 0.95rem;
}
.distance-list strong { color: var(--color-aegean-900); font-weight: 600; }

/* Why stay */
.reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2.2rem; }
.reason__num {
  font-family: var(--font-display); color: var(--color-sand-500); font-size: 1rem; display: block; margin-bottom: 0.6rem;
}

/* FAQ */
.faq { max-width: 780px; }
.faq-item { border-top: 1px solid var(--color-line); }
.faq-item:last-child { border-bottom: 1px solid var(--color-line); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 1.3rem 0; display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--font-display); font-size: 1.1rem; color: var(--color-aegean-900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-size: 1.4rem; color: var(--color-sand-500); flex-shrink: 0; transition: transform 0.25s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding-bottom: 1.3rem; margin: 0; }

/* Final CTA */
.final-cta {
  position: relative; color: var(--color-white); overflow: hidden;
  padding-block: clamp(4rem, 10vw, 7rem);
}
.final-cta__media { position: absolute; inset: 0; z-index: 0; }
.final-cta__media img { width: 100%; height: 100%; object-fit: cover; }
.final-cta__scrim { position: absolute; inset: 0; background: rgba(17,52,69,0.72); z-index: 1; }
.final-cta .container { position: relative; z-index: 2; text-align: center; max-width: 700px; }
.final-cta h2 { color: var(--color-white); }
.final-cta p { color: rgba(255,255,255,0.88); margin-inline: auto; }
.final-cta__ctas { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* -----------------------------------------------------------------
   7. FOOTER
   ----------------------------------------------------------------- */
.site-footer {
  background: var(--color-aegean-900); color: rgba(255,255,255,0.78);
  padding-block: 4rem 2rem; font-size: 0.92rem;
}
.footer-grid {
  display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 2.5rem;
}
.footer-grid h4 { color: var(--color-white); font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0.03em; margin-bottom: 1rem; }
.footer-grid .logo { color: var(--color-white); display: block; margin-bottom: 0.8rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-grid a { text-decoration: none; color: inherit; }
.footer-grid a:hover { color: var(--color-white); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15); padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: 0.82rem;
}
.footer-bottom a { text-decoration: underline; }

/* -----------------------------------------------------------------
   8. MOBILE STICKY BOOK BAR
   ----------------------------------------------------------------- */
.mobile-book-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  background: var(--color-off-white);
  border-top: 1px solid var(--color-line);
  padding: 0.75rem var(--gutter);
  display: flex;
}
.mobile-book-bar .btn { width: 100%; justify-content: center; }
@media (min-width: 960px) { .mobile-book-bar { display: none; } }
body { padding-bottom: 78px; }
@media (min-width: 960px) { body { padding-bottom: 0; } }

/* -----------------------------------------------------------------
   9. MISC PAGES (legal, 404)
   ----------------------------------------------------------------- */
.legal-content { max-width: 74ch; }
.legal-content h2 { margin-top: 2rem; }
.error-page {
  min-height: 70vh; display: flex; flex-direction: column; justify-content: center;
  text-align: center;
}
.error-page__code {
  font-family: var(--font-display); font-size: clamp(4rem, 14vw, 8rem); color: var(--color-sand-500); margin-bottom: 0;
}

/* -----------------------------------------------------------------
   10. UTILITIES
   ----------------------------------------------------------------- */
.mt-0 { margin-top: 0; }
.text-center { text-align: center; margin-inline: auto; }
.note {
  font-size: 0.82rem; color: var(--color-ink-soft); border-left: 2px solid var(--color-sand-500); padding-left: 0.9rem;
}