/* Kıvanç Kız Yurdu — generated by tools/package.py.
   Edit the partials in css/, not this file. */

/* ===== _foundation.css ===== */
/* ==========================================================================
   KIVANÇ ÖĞRENCİ YURDU — DESIGN FOUNDATION
   Design tokens only. No component styles belong in this file.
   Palette: warm-neutral base + a single disciplined accent (antique gold,
   taken from the logo). Dark charcoal is used for the header, testimonials
   and footer, which is where the gold badge and bright gold can appear.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     COLOR — Warm neutral scale
     The whole site sits on this. Never introduce a pure #fff / #000.
     --------------------------------------------------------------------- */
  --c-cream:        #FBF8F3;  /* page background                     */
  --c-sand:         #F4EEE5;  /* alternating section background      */
  --c-sand-deep:    #EAE1D4;  /* card wells, hairline fills          */
  --c-line:         #DFD5C6;  /* borders / dividers                  */
  --c-line-soft:    #EDE5D9;

  --c-ink:          #191411;  /* headings                            */
  --c-ink-soft:     #3A322C;  /* body copy                           */
  --c-ink-mute:     #6E635A;  /* captions, meta, labels              */
  /* The lightest text tone still carries real copy (disclaimers, form notes,
     card meta), so it is pinned to WCAG AA rather than picked by eye:
     4.92:1 on --c-cream, 4.52:1 on --c-sand. Don't lighten it. */
  --c-ink-faint:    #756B61;

  /* ---------------------------------------------------------------------
     COLOR — Accent (ONE strong accent, used sparingly)
     Reserved for: primary CTAs, active states, numerals in the stat bar,
     and small typographic accents.
     --------------------------------------------------------------------- */
  /* Antique gold, sampled from the Kıvanç logo (its mid-tone is #9E7330) and
     then darkened until it passes WCAG AA as body text on BOTH light surfaces:
     5.00:1 on --c-cream, 4.59:1 on --c-sand. Do not lighten it — gold is an
     inherently light hue and loses legibility on cream very fast (the literal
     logo gold manages only 2.28:1 there). */
  --c-accent:       #8A6524;
  --c-accent-deep:  #6D521E;  /* hover / pressed — 6.89:1 on cream   */
  --c-accent-soft:  #F3EAD6;  /* tinted backgrounds                  */
  --c-accent-line:  #E3D3AE;

  /* The bright, literal logo gold. DARK SURFACES ONLY — 7.43:1 on --c-ink but
     2.28:1 on cream, so it must never carry text on a light background. */
  --c-gold:         #C9A227;
  --c-gold-light:   #E8CE86;  /* 10:1 on --c-ink — emphasis on dark  */

  /* Deep forest. Retained for exactly one thing: the WhatsApp button, where a
     green reads as the platform. It is no longer a residence tone — the
     residence is female-only, so there is no second tone to distinguish. */
  --c-forest:       #35493C;
  --c-forest-deep:  #2A3A30;

  /* Semantic */
  --c-success:      #3F6B4A;
  --c-error:        #B33A28;

  /* ---------------------------------------------------------------------
     TYPOGRAPHY
     Fraunces (serif, editorial) for display + Inter (grotesk) for UI/body.
     Committed pairing — do not mix in a third family.
     --------------------------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale — minor third at mobile, major third at desktop.
     clamp(min, preferred, max) so nothing needs a media query. */
  --t-xs:    0.75rem;                                   /* 12px  — eyebrow/meta */
  --t-sm:    0.8125rem;                                 /* 13px               */
  --t-base:  clamp(0.9375rem, 0.90rem + 0.18vw, 1rem);  /* 15 → 16            */
  --t-md:    clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --t-lg:    clamp(1.125rem, 1.05rem + 0.38vw, 1.375rem);
  --t-xl:    clamp(1.375rem, 1.22rem + 0.75vw, 1.875rem);
  --t-2xl:   clamp(1.75rem,  1.48rem + 1.35vw, 2.625rem);
  --t-3xl:   clamp(2.125rem, 1.68rem + 2.20vw, 3.5rem);
  --t-4xl:   clamp(2.5rem,   1.75rem + 3.75vw, 5rem);   /* hero headline      */

  --lh-tight:  1.08;
  --lh-snug:   1.22;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* Fraunces optical-size + softness axes, set once so headings stay
     consistent wherever they appear. */
  --fraunces-display: "SOFT" 22, "WONK" 1, "opsz" 128;
  --fraunces-text:    "SOFT" 12, "WONK" 0, "opsz" 24;

  --ls-tight:  -0.022em;
  --ls-normal: -0.011em;
  --ls-wide:   0.02em;
  --ls-caps:   0.14em;   /* eyebrows / small caps labels */

  /* ---------------------------------------------------------------------
     SPACING — 4px base, geometric-ish progression
     --------------------------------------------------------------------- */
  --s-1:  0.25rem;   /*  4 */
  --s-2:  0.5rem;    /*  8 */
  --s-3:  0.75rem;   /* 12 */
  --s-4:  1rem;      /* 16 */
  --s-5:  1.5rem;    /* 24 */
  --s-6:  2rem;      /* 32 */
  --s-7:  2.5rem;    /* 40 */
  --s-8:  3rem;      /* 48 */
  --s-9:  4rem;      /* 64 */
  --s-10: 5rem;      /* 80 */
  --s-11: 6.5rem;    /* 104 */
  --s-12: 8rem;      /* 128 */

  /* Vertical rhythm for section padding — generous whitespace is the point. */
  --section-y:    clamp(4rem, 2.5rem + 7.5vw, 8.5rem);
  --section-y-sm: clamp(3rem, 2rem + 5vw, 5.5rem);

  /* ---------------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------------- */
  --container:      1240px;
  --container-tight: 880px;
  --container-wide: 1480px;
  --gutter: clamp(1.25rem, 0.75rem + 2.5vw, 3rem);

  --header-h: 76px;

  /* ---------------------------------------------------------------------
     RADII — restrained. Cards are near-square; only pills are fully round.
     --------------------------------------------------------------------- */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-pill: 999px;

  /* ---------------------------------------------------------------------
     SHADOWS — warm-tinted, low opacity. Depth comes from layout, not glow.
     --------------------------------------------------------------------- */
  --sh-xs: 0 1px 2px rgba(25, 20, 17, 0.05);
  --sh-sm: 0 2px 6px rgba(25, 20, 17, 0.06);
  --sh-md: 0 8px 24px -8px rgba(25, 20, 17, 0.14);
  --sh-lg: 0 18px 44px -14px rgba(25, 20, 17, 0.20);
  --sh-xl: 0 32px 70px -22px rgba(25, 20, 17, 0.28);

  /* ---------------------------------------------------------------------
     MOTION — subtle only. No bounce, no springs, no libraries.
     --------------------------------------------------------------------- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  160ms;
  --dur:       280ms;
  --dur-slow:  620ms;

  /* Z-index ladder */
  --z-base:    1;
  --z-sticky:  50;
  --z-header:  100;
  --z-drawer:  200;
  --z-modal:   300;
}

/* --------------------------------------------------------------------------
   LOGICAL-PROPERTY HELPERS
   Everything in this project uses logical properties (inline-start/end,
   margin-inline, etc.) rather than left/right, so adding Arabic later is a
   `dir="rtl"` flip and nothing more. These tokens flip with direction.
   -------------------------------------------------------------------------- */
[dir="ltr"] { --dir: 1; }
[dir="rtl"] { --dir: -1; }

/* Arabic-ready: when an RTL locale is added, swap the body face here only. */
[dir="rtl"] body {
  --font-body:    "Inter", "Noto Sans Arabic", system-ui, sans-serif;
  --font-display: "Fraunces", "Noto Naskh Arabic", Georgia, serif;
}

/* ===== _base.css ===== */
/* ==========================================================================
   BASE — reset, element defaults, shared primitives (container, buttons,
   section headers, eyebrows, scroll-reveal).
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor links must clear the sticky header. */
  scroll-padding-top: calc(var(--header-h) + var(--s-5));
}

body {
  background-color: var(--c-cream);
  color: var(--c-ink-soft);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-normal);
  font-feature-settings: "cv05" 1, "cv11" 1, "ss03" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Locks scroll while the mobile drawer or lightbox is open. */
body.is-locked { overflow: hidden; }

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { background: none; border: 0; cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

a {
  color: inherit;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY DEFAULTS
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-display);
  color: var(--c-ink);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); line-height: var(--lh-snug); }
h4 {
  font-size: var(--t-md);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-snug);
}

p { text-wrap: pretty; }

strong { font-weight: 600; color: var(--c-ink); }

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

/* --------------------------------------------------------------------------
   ACCESSIBILITY
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--s-4);
  z-index: calc(var(--z-header) + 1);
  padding: var(--s-3) var(--s-5);
  background-color: var(--c-ink);
  color: var(--c-cream);
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: var(--t-sm);
  font-weight: 600;
  transition: inset-block-start var(--dur-fast) var(--ease);
}
.skip-link:focus { inset-block-start: 0; }

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

.section { padding-block: var(--section-y); }
.section--sm   { padding-block: var(--section-y-sm); }
.section--sand { background-color: var(--c-sand); }
.section--ink  { background-color: var(--c-ink); color: rgba(251, 248, 243, 0.78); }
.section--ink h2,
.section--ink h3 { color: var(--c-cream); }

/* --------------------------------------------------------------------------
   SECTION HEADER — eyebrow + title + lede.
   Deliberately left-aligned by default (not centered-everything).
   -------------------------------------------------------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-block-end: var(--s-4);
}
.eyebrow::before {
  content: "";
  inline-size: 28px;
  block-size: 1px;
  background-color: currentColor;
  flex: none;
}
.eyebrow--forest { color: var(--c-forest); }
.eyebrow--light  { color: var(--c-accent-line); }

.section-head {
  max-width: 60ch;
  margin-block-end: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.section-head__lede {
  font-size: var(--t-md);
  color: var(--c-ink-mute);
  margin-block-start: var(--s-5);
  max-width: 54ch;
}
.section--ink .section-head__lede { color: rgba(251, 248, 243, 0.66); }

/* Header with an action pinned to the far end on wide screens. */
.section-head--split {
  max-width: none;
  display: grid;
  gap: var(--s-6);
  align-items: end;
}
@media (min-width: 900px) {
  .section-head--split {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .section-head--split .section-head__text { max-width: 60ch; }
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--c-accent);
  --btn-fg: var(--c-cream);
  --btn-bd: var(--c-accent);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: 0.95rem var(--s-6);
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur) var(--ease);
}
.btn:hover {
  --btn-bg: var(--c-accent-deep);
  --btn-bd: var(--c-accent-deep);
  transform: translateY(-1px);
  box-shadow: var(--sh-md);
}
.btn:active { transform: translateY(0); box-shadow: none; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink);
  --btn-bd: var(--c-line);
}
.btn--ghost:hover {
  --btn-bg: transparent;
  --btn-fg: var(--c-accent);
  --btn-bd: var(--c-accent);
}

.btn--light {
  --btn-bg: rgba(251, 248, 243, 0.08);
  --btn-fg: var(--c-cream);
  --btn-bd: rgba(251, 248, 243, 0.4);
  backdrop-filter: blur(6px);
}
.btn--light:hover {
  --btn-bg: var(--c-cream);
  --btn-fg: var(--c-ink);
  --btn-bd: var(--c-cream);
}

.btn--solid-ink {
  --btn-bg: var(--c-ink);
  --btn-bd: var(--c-ink);
}
.btn--solid-ink:hover {
  --btn-bg: var(--c-accent);
  --btn-bd: var(--c-accent);
}

.btn--sm  { padding: 0.7rem var(--s-5); font-size: var(--t-xs); }
.btn--lg  { padding: 1.1rem var(--s-7); font-size: var(--t-base); }
.btn--block { display: flex; width: 100%; }

/* Text link that reads as an editorial "read more" */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-accent);
  padding-block-end: 2px;
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease);
}
.link-arrow svg { transition: transform var(--dur-fast) var(--ease); }
.link-arrow:hover {
  border-block-end-color: currentColor;
  gap: var(--s-3);
}
/* Arrow points along the reading direction — flips automatically for RTL. */
[dir="rtl"] .link-arrow svg { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   MEDIA WRAPPER — every placeholder photo sits in one of these so the
   layout never jumps while images load.
   -------------------------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  background-color: var(--c-sand-deep);
  border-radius: var(--r-lg);
}
.media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.media--4x3 { aspect-ratio: 4 / 3; }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--1x1 { aspect-ratio: 1 / 1; }
.media--4x5 { aspect-ratio: 4 / 5; }
.media--16x9 { aspect-ratio: 16 / 9; }

/* --------------------------------------------------------------------------
   SCROLL REVEAL — opt-in via [data-reveal]; JS adds .is-visible.
   Content is fully visible if JS fails (see js/main.js no-js guard).
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@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;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   INLINE ICON SIZING — all icons are inline SVG, currentColor stroked.
   -------------------------------------------------------------------------- */
.icon {
  inline-size: 20px;
  block-size: 20px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { inline-size: 16px; block-size: 16px; }
.icon--lg { inline-size: 26px; block-size: 26px; }

/* Utility */
.u-hide { display: none !important; }

/* ===== _header.css ===== */
/* ==========================================================================
   HEADER + MOBILE DRAWER
   Transparent over the hero, solid CHARCOAL once scrolled — not cream.
   That is a brand constraint, not a taste call: the Kıvanç badge is gold and
   only reads on a dark surface (2.28:1 on cream vs 7.43:1 on ink), so the
   header must never turn light underneath it.
   ========================================================================== */

.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);

  /* Swapped wholesale by .is-scrolled — every child reads these two. */
  --hd-fg: var(--c-cream);
  --hd-fg-mute: rgba(251, 248, 243, 0.78);

  color: var(--hd-fg);
  background-color: transparent;
  border-block-end: 1px solid transparent;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.header.is-scrolled {
  background-color: rgba(20, 16, 13, 0.90);
  backdrop-filter: saturate(140%) blur(12px);
  border-block-end-color: rgba(232, 206, 134, 0.16);
}
.header.is-scrolled.is-lifted { box-shadow: 0 8px 30px -12px rgba(0, 0, 0, 0.55); }

.header__inner {
  block-size: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

/* --------------------------------------------------------------------------
   BRAND WORDMARK
   -------------------------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
  margin-inline-end: auto;
}

/* The badge is a detailed circular seal — at header size its ring of text is
   decorative, so the name is carried by the wordmark beside it and the image
   is aria-hidden. */
.brand__badge {
  inline-size: 44px;
  block-size: 44px;
  flex: none;
  object-fit: contain;
}

.brand__text {
  display: flex;
  align-items: baseline;
  gap: 0.34em;
  line-height: 1;
}
.brand__name {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-display);
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  color: var(--hd-fg, var(--c-ink));
}
.brand__suffix {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--hd-fg-mute, var(--c-ink-mute));
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   NAV
   -------------------------------------------------------------------------- */
.nav { display: none; }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

.nav__link {
  position: relative;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--hd-fg-mute);
  padding-block: var(--s-2);
  transition: color var(--dur-fast) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: var(--nav-origin, left);
  transition: transform var(--dur) var(--ease);
}
[dir="rtl"] .nav__link::after { --nav-origin: right; }

.nav__link:hover,
.nav__link.is-current { color: var(--hd-fg); }
.nav__link:hover::after,
.nav__link.is-current::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   HEADER ACTIONS
   -------------------------------------------------------------------------- */
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex: none;
}

.header__cta { display: none; }
.header .btn--sm {
  --btn-bg: var(--c-accent);
  --btn-bd: var(--c-accent);
  --btn-fg: var(--c-cream);
}
.header .btn--sm:hover {
  --btn-bg: var(--c-gold);
  --btn-bd: var(--c-gold);
  --btn-fg: #16120F;
}

.nav-toggle {
  display: grid;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  margin-inline-end: calc(var(--s-2) * -1);
  color: var(--hd-fg);
  border-radius: var(--r-sm);
}
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open  { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* --------------------------------------------------------------------------
   LANGUAGE SWITCHER — one component, three placements
   -------------------------------------------------------------------------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.3rem var(--s-3);
  border: 1px solid var(--ls-border, var(--c-line));
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
}

.lang-switch__btn {
  color: var(--ls-fg-mute, var(--c-ink-faint));
  padding: 0.15rem 0.2rem;
  border-radius: var(--r-xs);
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease);
}
.lang-switch__btn:hover { color: var(--ls-fg, var(--c-ink)); }
.lang-switch__btn.is-active { color: var(--ls-fg-active, var(--c-accent)); }

.lang-switch__sep {
  inline-size: 1px;
  block-size: 12px;
  background-color: var(--ls-border, var(--c-line));
}
.lang-switch__globe { opacity: 0.7; }

/* Header placement — inherits the header's light/dark state */
.lang-switch--compact {
  display: none;
  --ls-border: color-mix(in srgb, currentColor 28%, transparent);
  --ls-fg: var(--hd-fg);
  --ls-fg-mute: var(--hd-fg-mute);
  --ls-fg-active: var(--hd-fg);
}
.header.is-scrolled .lang-switch--compact { --ls-fg-active: var(--c-gold-light); }

/* --------------------------------------------------------------------------
   MOBILE DRAWER
   -------------------------------------------------------------------------- */
.drawer {
  position: fixed;
  inset-block-start: var(--header-h);
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-8);
  padding: var(--s-8) var(--gutter) var(--s-9);
  background-color: #16120F;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* `display: flex` above outranks the UA stylesheet's `[hidden] {display:none}`
   (same specificity, author sheet wins), so without this the closed drawer
   stays laid out — an invisible full-screen layer eating every tap on mobile.
   JS toggles the `hidden` attribute, so this is what actually removes it. */
.drawer[hidden] { display: none; }

.drawer.is-open { opacity: 1; transform: none; }

.drawer__nav {
  display: flex;
  flex-direction: column;
}

.drawer__link {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-display);
  font-size: var(--t-xl);
  color: var(--c-cream);
  padding-block: var(--s-4);
  border-block-end: 1px solid rgba(251, 248, 243, 0.12);
  transition: color var(--dur-fast) var(--ease), padding-inline-start var(--dur-fast) var(--ease);
}
.drawer__link:hover {
  color: var(--c-gold-light);
  padding-inline-start: var(--s-2);
}

.drawer__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
}

/* Header sits above the drawer so the close button stays reachable. */
.drawer-open .header {
  background-color: #16120F;
  border-block-end-color: rgba(251, 248, 243, 0.12);
}
.drawer .lang-switch {
  --ls-border: rgba(251, 248, 243, 0.24);
  --ls-fg: var(--c-cream);
  --ls-fg-mute: rgba(251, 248, 243, 0.6);
  --ls-fg-active: var(--c-gold-light);
}

/* --------------------------------------------------------------------------
   BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (min-width: 700px) {
  .lang-switch--compact { display: inline-flex; }
}

/* The nav appears at 1080px, not 980px. The badge lockup is ~228px wide, and
   brand + nav + actions measures ~1006px in Turkish — more than the 907px a
   980px viewport leaves inside the gutters, so the actions used to overflow.
   Measured, not guessed; re-check both numbers if the wordmark changes. */
@media (min-width: 1080px) {
  :root { --header-h: 88px; }

  .nav { display: block; margin-inline-end: auto; }
  .header__cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .drawer { display: none !important; }

  .brand { margin-inline-end: var(--s-6); }
  .header__inner { gap: var(--s-6); }
}

/* In the band where the nav is present but space is tightest, the badge plus
   "Kıvanç" carries the brand on its own and the descriptor steps aside. */
@media (min-width: 1080px) and (max-width: 1319px) {
  .brand__suffix { display: none; }
}

@media (min-width: 1320px) {
  .brand { margin-inline-end: var(--s-8); }
  .header__inner { gap: var(--s-8); }
}

/* ===== _hero.css ===== */
/* ==========================================================================
   HERO — full-height photo, dark scrim, trust bar pinned to the bottom edge
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-block-size: 100svh;
  padding-block-start: calc(var(--header-h) + var(--s-8));
  background-color: var(--c-ink);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   MEDIA + SCRIM
   Two layered gradients: a bottom-up wash for the copy, and a top band so
   the transparent header stays legible over bright photography.
   -------------------------------------------------------------------------- */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 40%;
  /* A touch of warmth so stock photography sits inside the palette. */
  filter: saturate(0.92) contrast(1.02);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(20, 15, 12, 0.62) 0%,
      rgba(20, 15, 12, 0.10) 26%,
      rgba(20, 15, 12, 0.10) 40%,
      rgba(20, 15, 12, 0.74) 82%,
      rgba(20, 15, 12, 0.92) 100%),
    linear-gradient(to right,
      rgba(20, 15, 12, 0.55) 0%,
      rgba(20, 15, 12, 0.12) 62%,
      rgba(20, 15, 12, 0.00) 100%);
}
[dir="rtl"] .hero__scrim { transform: scaleX(-1); }

/* On phones the copy spans the full width, so the horizontal gradient does
   almost nothing — lean harder on the vertical wash to keep text legible
   over bright photography. */
@media (max-width: 699px) {
  .hero__scrim {
    background: linear-gradient(to bottom,
      rgba(20, 15, 12, 0.66) 0%,
      rgba(20, 15, 12, 0.42) 22%,
      rgba(20, 15, 12, 0.52) 45%,
      rgba(20, 15, 12, 0.82) 80%,
      rgba(20, 15, 12, 0.94) 100%);
  }
}

/* --------------------------------------------------------------------------
   CONTENT
   -------------------------------------------------------------------------- */
.hero__inner {
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding-block-end: var(--s-9);
}

.hero__content {
  max-width: 44ch;
  color: var(--c-cream);
}

/* Hero language switcher — the primary one, per the brief. */
.lang-switch--hero {
  --ls-border: rgba(251, 248, 243, 0.34);
  --ls-fg: var(--c-cream);
  --ls-fg-mute: rgba(251, 248, 243, 0.62);
  --ls-fg-active: var(--c-cream);
  margin-block-end: var(--s-6);
  padding: 0.4rem var(--s-4);
  background-color: rgba(20, 15, 12, 0.28);
  backdrop-filter: blur(8px);
  color: var(--c-cream);
}
.lang-switch--hero .lang-switch__btn.is-active {
  /* Underline rather than a colour change — reads clearly on photography. */
  box-shadow: inset 0 -1px 0 0 currentColor;
}

.hero__eyebrow {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: rgba(251, 248, 243, 0.72);
  margin-block-end: var(--s-5);
}

.hero__title {
  color: var(--c-cream);
  font-size: var(--t-4xl);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 30px rgba(20, 15, 12, 0.3);
}
.hero__title em {
  font-style: italic;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 128;
  color: var(--c-gold-light); /* light logo gold — legible over photography */
}

/* --------------------------------------------------------------------------
   HEADLINE WORD REVEAL
   js/main.js wraps each word in .word > .word__in after i18n has written the
   copy, then adds .is-shown. Without JS the spans never exist and these rules
   simply do not apply, so the headline renders normally.
   -------------------------------------------------------------------------- */
.hero__title .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Breathing room for descenders (ğ, ş, y) and the italic overhang, cancelled
     by equal negative margins so the headline's metrics are unchanged. */
  padding: 0.10em 0.07em 0.18em;
  margin: -0.10em -0.07em -0.18em;
}
.hero__title .word__in {
  display: inline-block;
  transform: translateY(115%);
  opacity: 0;
  transition:
    transform 0.85s var(--ease-out),
    opacity 0.5s var(--ease-out);
  /* Offset so the words begin roughly in step with the rest of the hero,
     which starts animating without waiting for the translations. */
  transition-delay: calc(0.2s + var(--i, 0) * 55ms);
}
.hero__title.is-shown .word__in {
  transform: none;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   HERO ENTRANCE
   -------------------------------------------------------------------------- */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(14px); }
}
.lang-switch--hero { animation: hero-in 0.7s var(--ease-out) 0.05s backwards; }
.hero__eyebrow     { animation: hero-in 0.7s var(--ease-out) 0.15s backwards; }
.hero__lede        { animation: hero-in 0.7s var(--ease-out) 0.55s backwards; }
.hero__actions     { animation: hero-in 0.7s var(--ease-out) 0.70s backwards; }
.hero__trust       { animation: hero-in 0.8s var(--ease-out) 0.85s backwards; }

@media (prefers-reduced-motion: reduce) {
  /* Belt and braces: the JS also skips the reveal, but if the words are ever
     split anyway they must not be left sitting outside their mask. */
  .hero__title .word__in { transform: none; opacity: 1; }
}

.hero__lede {
  font-size: var(--t-md);
  line-height: 1.62;
  color: rgba(251, 248, 243, 0.86);
  margin-block-start: var(--s-6);
  max-width: 46ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-block-start: var(--s-8);
}
/* Narrow phones can't fit both CTAs on one line; stacking them full-width
   reads as a decision rather than a wrap, and gives a bigger tap target. */
@media (max-width: 479px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { inline-size: 100%; }
}

/* --------------------------------------------------------------------------
   TRUST BAR
   -------------------------------------------------------------------------- */
.hero__trust {
  position: relative;
  border-block-start: 1px solid rgba(251, 248, 243, 0.16);
  background-color: rgba(20, 15, 12, 0.34);
  backdrop-filter: blur(10px);
}

.trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.trust__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-5) 0;
  padding-inline-end: var(--s-5);
}
/* Hairlines between chips, drawn only where they don't hit an edge. */
.trust__item:nth-child(n + 3) { border-block-start: 1px solid rgba(251, 248, 243, 0.12); }
.trust__item:nth-child(odd)   { border-inline-end: 1px solid rgba(251, 248, 243, 0.12); padding-inline-start: 0; }
.trust__item:nth-child(even)  { padding-inline-start: var(--s-5); }

.trust__value {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-display);
  font-size: var(--t-xl);
  line-height: 1;
  color: var(--c-gold-light);
  letter-spacing: -0.02em;
  /* Equal-width digits, so a number counting up from 0 does not jitter as the
     glyphs change underneath it. */
  font-variant-numeric: tabular-nums;
}
.trust__label {
  font-size: var(--t-xs);
  line-height: 1.4;
  color: rgba(251, 248, 243, 0.68);
}

/* --------------------------------------------------------------------------
   BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (min-width: 700px) {
  .hero__content { max-width: 52ch; }
}

@media (min-width: 900px) {
  .trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trust__item {
    padding-block: var(--s-6);
    padding-inline: var(--s-6);
    border-block-start: 0 !important;
    border-inline-end: 1px solid rgba(251, 248, 243, 0.12) !important;
  }
  .trust__item:first-child { padding-inline-start: 0; }
  .trust__item:last-child  { border-inline-end: 0 !important; }
  .trust__value { font-size: var(--t-2xl); }
}

@media (min-width: 1200px) {
  .hero__content { max-width: 56ch; }
  .hero__inner { padding-block-end: var(--s-10); }
}

/* Short landscape screens (phones turned sideways) shouldn't force 100vh. */
@media (max-height: 620px) and (min-width: 700px) {
  .hero { min-block-size: auto; padding-block-end: var(--s-6); }
}

/* ===== _rooms.css ===== */
/* ==========================================================================
   ROOMS — room cards
   One residence (female), so there is no second tone and no tab UI: the
   accent gold carries every highlight in this section.
   ========================================================================== */

/* --------------------------------------------------------------------------
   INTRO NOTE
   -------------------------------------------------------------------------- */
.rooms__note {
  max-width: 68ch;
  padding-inline-start: var(--s-5);
  border-inline-start: 2px solid var(--c-accent-line);
  font-size: var(--t-base);
  color: var(--c-ink-mute);
  margin-block-end: var(--s-8);
}

/* --------------------------------------------------------------------------
   ROOM GRID
   -------------------------------------------------------------------------- */
.room-grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
}

.room-card {
  /* The footer layout depends on how wide the CARD is, not the viewport — the
     same card is 560px in a two-up grid and 330px in a four-up one. A container
     query asks the right question; viewport breakpoints only approximated it. */
  container-type: inline-size;
  container-name: roomcard;

  display: flex;
  flex-direction: column;
  background-color: var(--c-cream);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.room-card:hover {
  border-color: var(--c-accent-line);
  box-shadow: var(--sh-md);
  transform: translateY(-3px);
}
.room-card:hover .media img { transform: scale(1.04); }

.room-card__media {
  border-radius: 0;
  position: relative;
}

.room-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--s-4);
  padding: var(--s-6);
}

.room-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
}

.room-card__title {
  font-size: var(--t-lg);
  color: var(--c-ink);
}

.room-card__cap {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--c-ink-mute);
  white-space: nowrap;
}
.room-card__cap .icon { color: var(--c-accent); }

.room-card__desc {
  font-size: var(--t-base);
  color: var(--c-ink-mute);
  line-height: 1.6;
}

/* Amenity chips ---------------------------------------------------------- */
.amenity-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.amenity-chips li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.35rem var(--s-3);
  background-color: var(--c-sand);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  color: var(--c-ink-soft);
}
.amenity-chips .icon { color: var(--c-accent); opacity: 0.9; }

/* Footer: price + CTA ---------------------------------------------------- */
.room-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-block-start: auto;
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--c-line-soft);
}

/* "From" sits on its own line as a small label, with the figure beneath it.
   Inline, the three parts are ~200px wide and push the Apply button onto a
   second row in a 3-up grid; stacked, the whole footer fits on one line at
   every card width. It also reads better — the classic listing-price pattern. */
.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s-2);
  white-space: nowrap;
}
.price__from {
  flex-basis: 100%;
  font-size: var(--t-xs);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--c-ink-faint);
}
.price__value {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-display);
  font-size: var(--t-lg);
  color: var(--c-ink);
  letter-spacing: -0.02em;
}
.price__unit {
  font-size: var(--t-xs);
  color: var(--c-ink-mute);
}

.room-card .btn--ghost:hover {
  --btn-fg: var(--c-accent);
  --btn-bd: var(--c-accent);
}

/* --------------------------------------------------------------------------
   DISCLAIMER
   -------------------------------------------------------------------------- */
.rooms__disclaimer {
  max-width: 68ch;
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--c-line-soft);
  font-size: var(--t-sm);
  color: var(--c-ink-faint);
}

/* --------------------------------------------------------------------------
   BREAKPOINTS
   -------------------------------------------------------------------------- */
/* Under ~330px of card there is not room for the price and the Apply button
   on one line (the price block measures ~168px, the button ~91px). Rather than
   let them half-wrap, the button takes the full width. */
@container roomcard (max-width: 330px) {
  .room-card__foot { align-items: stretch; }
  .room-card__foot .btn { inline-size: 100%; }
}

/* Browsers without container queries keep the old viewport approximation. */
@supports not (container-type: inline-size) {
  @media (max-width: 479px) {
    .room-card__foot { align-items: stretch; }
    .room-card__foot .btn { inline-size: 100%; }
  }
}


/* There are four room types, so the column count must divide four: 1, 2 or 4.
   Three columns leaves the fourth card stranded on a row of its own, which is
   what this grid used to do between 1240px and up. Do not add a 3-up step. */
@media (min-width: 700px) {
  .room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


@media (min-width: 1280px) {
  .room-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
}

/* ===== _universities.css ===== */
/* ==========================================================================
   NEARBY UNIVERSITIES — proof-of-location card grid
   ========================================================================== */

.uni-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}

.uni-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "logo body"
    "times times";
  align-items: center;
  gap: var(--s-4) var(--s-5);
  padding: var(--s-5);
  background-color: var(--c-cream);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.uni-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--c-accent-line);
}

/* Logo well ---------------------------------------------------------------
   The monogram is the visible default. Dropping a real file at
   assets/logos/<slug>.svg layers it on top and hides the monogram; if the
   file is missing the <img> removes itself (see the onerror in index.html).
   ------------------------------------------------------------------------- */
.uni-card__logo {
  grid-area: logo;
  position: relative;
  display: grid;
  place-items: center;
  /* Wider than tall on purpose: real university marks are mostly horizontal
     wordmark lockups (Gelişim's is 2.4:1). In a square well, `contain` would
     shrink those to an illegible strip while square crests filled the box. */
  inline-size: 92px;
  block-size: 64px;
  flex: none;
  background-color: var(--c-sand);
  border-radius: var(--r-md);
  overflow: hidden;
}
.uni-card__monogram {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-text);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-accent);
}
.uni-card__logo img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  padding: var(--s-2);
  background-color: var(--c-sand);
}

.uni-card__body { grid-area: body; min-width: 0; }

.uni-card__name {
  font-size: var(--t-md);
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-text);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--c-ink);
}
.uni-card__short {
  font-size: var(--t-xs);
  color: var(--c-ink-faint);
  margin-block-start: var(--s-1);
}

.uni-card__times {
  grid-area: times;
  /* Cross-fades with .uni-journey, which occupies the same grid cell. */
  transition: opacity var(--dur-fast) var(--ease);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--c-line-soft);
}
.uni-card__times li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-ink-soft);
}
.uni-card__times .icon { color: var(--c-accent); }

/* --------------------------------------------------------------------------
   JOURNEY STRIP — revealed on hover
   A vehicle crosses a track from the residence to the campus, with the
   duration alongside. Decorative: the same time is already stated in
   .uni-card__times above, so the whole strip is aria-hidden.
   -------------------------------------------------------------------------- */
.uni-journey {
  /* Deliberately the SAME grid cell as .uni-card__times, so the two cross-fade
     in place. An earlier version expanded the card on hover, which grew its
     grid row, pushed the row below it down, and slid cards out from under the
     cursor — a hover effect must never reflow the page. */
  grid-area: times;
  align-self: center;

  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-block-start: var(--s-4);

  /* The rail below is translated by nearly its own width to carry the vehicle
     across. It is invisible, but it still extends past the card and counts
     toward the document's scroll width — which pushed the page sideways when a
     card in the last column was hovered. Clip it at the strip. */
  overflow: hidden;

  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease);
}

.uni-journey__track {
  position: relative;
  flex: 1;
  min-inline-size: 0;
  block-size: 2px;
  border-radius: var(--r-pill);
  /* The un-travelled part of the route. */
  background-image: repeating-linear-gradient(
    to right, var(--c-line) 0 3px, transparent 3px 7px);
}

/* The travelled part, filling in behind the vehicle. */
.uni-journey__track::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  border-radius: inherit;
  background-color: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left center;
}
[dir="rtl"] .uni-journey__track::after { transform-origin: right center; }

/* A full-width rail: translating it by a percentage moves the vehicle by that
   share of the TRACK, which is the one length CSS cannot otherwise measure. */
.uni-journey__rail {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  block-size: 0;
}

.uni-journey__vehicle {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  padding-inline: 3px;
  /* Sits on the line rather than being crossed by it. */
  background-color: var(--c-cream);
  color: var(--c-accent);
}

.uni-journey__time {
  flex: none;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  color: var(--c-accent);
  white-space: nowrap;
}

/* Each loop fades in at the origin and out at the destination. Without that,
   the vehicle snaps back across the whole track on every repeat, which reads
   as a glitch rather than a journey. */
@keyframes journey-move {
  0%        { transform: translateX(0);                    opacity: 0; }
  12%       { opacity: 1; }
  88%       { opacity: 1; }
  100%      { transform: translateX(calc(100% - 22px));    opacity: 0; }
}
@keyframes journey-move-rtl {
  0%        { transform: translateX(0);                    opacity: 0; }
  12%       { opacity: 1; }
  88%       { opacity: 1; }
  100%      { transform: translateX(calc(-100% + 22px));   opacity: 0; }
}
@keyframes journey-fill {
  0%        { transform: scaleX(0);  opacity: 0; }
  12%       { opacity: 1; }
  88%       { opacity: 1; }
  100%      { transform: scaleX(1);  opacity: 0; }
}

/* Hover is the trigger, so the whole thing is limited to devices that have it.
   On touch the strip never renders and the card keeps its compact height. */
@media (hover: hover) and (pointer: fine) {
  .uni-card:hover .uni-journey,
  .uni-card:focus-within .uni-journey { opacity: 1; }

  .uni-card:hover .uni-card__times,
  .uni-card:focus-within .uni-card__times { opacity: 0; }

  .uni-card:hover .uni-journey__rail,
  .uni-card:focus-within .uni-journey__rail {
    animation: journey-move var(--journey-dur, 1.6s) var(--ease-out) infinite;
  }
  [dir="rtl"] .uni-card:hover .uni-journey__rail,
  [dir="rtl"] .uni-card:focus-within .uni-journey__rail {
    animation-name: journey-move-rtl;
  }

  .uni-card:hover .uni-journey__track::after,
  .uni-card:focus-within .uni-journey__track::after {
    animation: journey-fill var(--journey-dur, 1.6s) var(--ease-out) infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Still reveal the strip, but do not drive anything across the screen:
     show the completed journey instead. */
  .uni-journey__rail { transform: translateX(calc(100% - 22px)); }
  [dir="rtl"] .uni-journey__rail { transform: translateX(calc(-100% + 22px)); }
  .uni-journey__track::after { transform: scaleX(1); }
  .uni-card:hover .uni-journey__rail,
  .uni-card:hover .uni-journey__track::after { animation: none; }
}

/* --------------------------------------------------------------------------
   TRANSIT STRIP — the "you can walk to it" reassurance
   -------------------------------------------------------------------------- */
.uni-transit {
  display: grid;
  gap: var(--s-4);
  align-items: center;
  margin-block-start: var(--s-8);
  padding: var(--s-6);
  background-color: var(--c-ink);
  color: rgba(251, 248, 243, 0.8);
  border-radius: var(--r-lg);
}

.uni-transit__title {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-display);
  font-size: var(--t-lg);
  color: var(--c-cream);
  letter-spacing: -0.02em;
}

.uni-transit__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
}
.uni-transit__list li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-sm);
}
.uni-transit__list .icon { color: var(--c-gold-light); }

.uni-note {
  margin-block-start: var(--s-5);
  font-size: var(--t-sm);
  color: var(--c-ink-faint);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .uni-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .uni-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
  .uni-card { padding: var(--s-6); }

  .uni-transit {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-8);
    padding: var(--s-6) var(--s-8);
  }
}

/* ===== _amenities.css ===== */
/* ==========================================================================
   AMENITIES — icon grid
   Deliberately borderless: the grid reads as a printed spec sheet, held
   together by hairlines rather than a field of boxes.
   ========================================================================== */

.amen-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  background-color: var(--c-line-soft);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.amen-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  background-color: var(--c-cream);
  transition: background-color var(--dur) var(--ease);
}
.amen-card:hover { background-color: var(--c-sand); }

.amen-card__icon {
  color: var(--c-accent);
  margin-block-end: var(--s-2);
  transition: transform var(--dur) var(--ease);
}
.amen-card:hover .amen-card__icon { transform: translateY(-2px); }

.amen-card__title {
  font-family: var(--font-body);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: var(--ls-normal);
  color: var(--c-ink);
  line-height: 1.3;
}

.amen-card__desc {
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--c-ink-mute);
}

@media (min-width: 560px) {
  .amen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 880px) {
  .amen-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Twelve facilities, so the column count must divide twelve: 1, 2, 3 or 4.
   This grid used to go 5-up, which left the last two stranded on their own
   row — and 3-up stranded one. Do not add a 5-up step. */
@media (min-width: 1180px) {
  .amen-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .amen-card { padding: var(--s-6) var(--s-5); }
}

/* ===== _about.css ===== */
/* ==========================================================================
   ABOUT — intro copy, then a scroll-expand stage that hands the section
   over to the photograph and lays the value props on top of it.
   ========================================================================== */

.about { padding-block-end: 0; }

/* --------------------------------------------------------------------------
   INTRO — heading on one side, the argument on the other
   -------------------------------------------------------------------------- */
.about__intro {
  display: grid;
  gap: var(--s-8);
  margin-block-end: var(--s-9);
}

.about__head > h2 { margin-block-end: 0; }

.about__lede {
  font-size: var(--t-md);
  color: var(--c-ink-soft);
  margin-block-end: var(--s-4);
}
.about__text { color: var(--c-ink-mute); }

/* The founding seal. Its own colours are set explicitly rather than inherited:
   an earlier version relied on inheritance and a neighbouring paragraph rule
   won on specificity, leaving the date at 1.1:1 on the gold. */
.about__seal {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  inline-size: max-content;
  max-inline-size: 100%;
  margin-block-start: var(--s-7);
  padding: var(--s-4) var(--s-6);
  background-color: var(--c-accent);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
}
.about__seal-value {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-display);
  font-size: var(--t-lg);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-cream);              /* 5.00:1 on --c-accent */
}
.about__seal-label {
  font-size: var(--t-xs);
  line-height: 1.4;
  color: rgba(251, 248, 243, 0.88);   /* 4.62:1 on --c-accent */
}

/* Facts, counted up by js/main.js when they scroll into view ------------- */
.about__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
  margin-block-start: var(--s-7);
  padding-block-start: var(--s-6);
  border-block-start: 1px solid var(--c-line-soft);
}

.fact {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.fact__value {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-display);
  font-size: var(--t-2xl);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-accent);
  /* Equal-width digits so a counting number does not jitter. */
  font-variant-numeric: tabular-nums;
}
.fact__label {
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--c-ink-mute);
  max-width: 22ch;
}

/* --------------------------------------------------------------------------
   SCROLL EXPAND
   A tall track supplies the scroll distance; the stage sticks to the viewport
   while the frame's clip-path opens from a small rectangle to full bleed.
   js/main.js owns clip-path, transform and opacity — everything set here is
   the resting state, so the section still reads correctly without scripting.
   -------------------------------------------------------------------------- */
.scroll-expand {
  position: relative;
  inline-size: 100%;
  background-color: var(--c-ink);
}

.scroll-expand__track {
  position: relative;
  inline-size: 100%;
}

.scroll-expand__stage {
  position: sticky;
  inset-block-start: 0;
  inline-size: 100%;
  overflow: hidden;
  --se-title-size: clamp(1.75rem, 1rem + 3vw, 4rem);
}

.scroll-expand__frame {
  position: absolute;
  inset: 0;
  /* Matches the JS resting state, so there is no flash before the first
     frame is applied. */
  clip-path: inset(19% 27% 19% 27% round 10px);
  will-change: clip-path;
}

.scroll-expand__media {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transform: scale(1.3);
  transform-origin: center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

/* The overlay copy sits in the lower half, so this is weighted to make that
   band effectively solid ink rather than a wash over unknown photography —
   contrast there has to be predictable, not lucky. */
.scroll-expand__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(to top,
      rgba(18, 14, 11, 0.95) 0%,
      rgba(18, 14, 11, 0.88) 34%,
      rgba(18, 14, 11, 0.55) 62%,
      rgba(18, 14, 11, 0.30) 100%);
}

.scroll-expand__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block-end: clamp(2rem, 1rem + 5vh, 5rem);
  opacity: 0;
  will-change: opacity, transform;
}

.scroll-expand__kicker {
  font-size: clamp(0.75rem, 0.68rem + 0.3vw, 0.9375rem);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-gold-light);
  margin-block-end: var(--s-7);
}

/* The held headline, which lifts away as the picture takes over. */
.scroll-expand__title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding-inline: 8%;
  text-align: center;
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 128;
  font-style: italic;
  font-size: var(--se-title-size);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-cream);
  text-shadow: 0 2px 28px rgba(18, 14, 11, 0.55);
  pointer-events: none;
  will-change: opacity, transform;
}

.scroll-expand__hint {
  position: absolute;
  inset-inline: 0;
  inset-block-end: var(--s-6);
  text-align: center;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: rgba(251, 248, 243, 0.62);
  pointer-events: none;
  will-change: opacity, transform;
}
.scroll-expand__hint::after {
  content: "";
  display: block;
  inline-size: 1px;
  block-size: 26px;
  margin: var(--s-3) auto 0;
  background: linear-gradient(to bottom, var(--c-gold-light), transparent);
}

/* --------------------------------------------------------------------------
   VALUE PROPS, laid over the photograph
   -------------------------------------------------------------------------- */
.value-list {
  display: grid;
  gap: var(--s-5);
}

.value-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
}

.value-item__icon {
  /* Scales with the copy it sits beside. */
  inline-size: clamp(20px, 1rem + 0.6vw, 28px);
  block-size: clamp(20px, 1rem + 0.6vw, 28px);
  color: var(--c-gold-light);
  margin-block-start: 2px;
}

/* This copy is read at full-screen size, so it is set noticeably larger than
   the same pattern elsewhere on the site — the type has to hold a whole
   viewport rather than sit inside a card. */
.value-item__title {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.5rem);
  font-weight: 600;
  letter-spacing: var(--ls-normal);
  color: var(--c-cream);
  line-height: 1.3;
  margin-block-end: var(--s-2);
}

.value-item__desc {
  font-size: clamp(0.875rem, 0.8rem + 0.34vw, 1.1875rem);
  line-height: 1.55;
  color: rgba(251, 248, 243, 0.85);
  max-width: 44ch;
}

/* --------------------------------------------------------------------------
   NO-MOTION FALLBACK
   With prefers-reduced-motion the script collapses the track and shows the
   finished state, so the stage becomes an ordinary full-bleed band.
   -------------------------------------------------------------------------- */
.scroll-expand.is-static .scroll-expand__stage {
  position: relative;
  min-block-size: clamp(30rem, 78vh, 46rem);
}
.scroll-expand.is-static .scroll-expand__title,
.scroll-expand.is-static .scroll-expand__hint { display: none; }

/* Without JS nothing sets the inline styles, so show a plain framed image
   rather than a clipped rectangle with invisible copy underneath it. */
.scroll-expand:not(.is-live):not(.is-static) .scroll-expand__stage {
  position: relative;
  min-block-size: clamp(26rem, 70vh, 42rem);
}
.scroll-expand:not(.is-live):not(.is-static) .scroll-expand__frame { clip-path: none; }
.scroll-expand:not(.is-live):not(.is-static) .scroll-expand__media { transform: none; }
.scroll-expand:not(.is-live):not(.is-static) .scroll-expand__scrim { opacity: 1; }
.scroll-expand:not(.is-live):not(.is-static) .scroll-expand__overlay { opacity: 1; }
.scroll-expand:not(.is-live):not(.is-static) .scroll-expand__title,
.scroll-expand:not(.is-live):not(.is-static) .scroll-expand__hint { display: none; }

/* --------------------------------------------------------------------------
   BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (min-width: 700px) {
  .value-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-8); }
}

@media (min-width: 1000px) {
  /* Heading left, argument right — the intro used to be one narrow column
     with the right half of the section empty. */
  .about__intro {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--s-10);
    align-items: start;
    margin-block-end: var(--s-10);
  }
  .about__head { position: sticky; inset-block-start: calc(var(--header-h) + var(--s-8)); }
  .value-list { gap: var(--s-8) var(--s-10); }
}

/* ===== _gallery.css ===== */
/* ==========================================================================
   GALLERY — mixed-span grid + lightbox
   ========================================================================== */

/* --------------------------------------------------------------------------
   GALLERY GRID
   Spans are set per breakpoint with :nth-child() rather than by classes in the
   markup, because the pattern that tiles cleanly depends on the column count.
   Each breakpoint below is chosen so the 8 items fill their rows exactly —
   no holes. If you add or remove a photo, re-check the arithmetic:
     2 cols: 8 items, no spans                    = 8 cells  = 4 rows
     3 cols: item 1 tall (+1)                     = 9 cells  = 3 rows
     4 cols: items 1 & 6 tall, 3 & 7 wide (+4)    = 12 cells = 3 rows
   -------------------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 180px;
  /* Backfills any gap left by a span, so a future edit degrades gracefully
     instead of punching a hole in the layout. */
  grid-auto-flow: dense;
}

.gallery-item { min-width: 0; }

.gallery-item__btn {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: zoom-in;
}
.gallery-item__btn .media {
  block-size: 100%;
  border-radius: 0;
}
.gallery-item__btn img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Scrim + zoom affordance appear on hover / keyboard focus. */
.gallery-item__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(20, 15, 12, 0.28);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.gallery-item__btn:hover::after,
.gallery-item__btn:focus-visible::after { opacity: 1; }
.gallery-item__btn:hover img { transform: scale(1.05); }

.gallery-item__zoom {
  position: absolute;
  inset-block-end: var(--s-3);
  inset-inline-end: var(--s-3);
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  background-color: var(--c-cream);
  color: var(--c-ink);
  border-radius: var(--r-pill);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.gallery-item__btn:hover .gallery-item__zoom,
.gallery-item__btn:focus-visible .gallery-item__zoom {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   LIGHTBOX
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5);
  background-color: rgba(15, 11, 9, 0.94);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  max-block-size: 100%;
  min-width: 0;
}
.lightbox__img {
  max-inline-size: 100%;
  max-block-size: 76svh;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: var(--sh-xl);
}
.lightbox__caption {
  font-size: var(--t-sm);
  color: rgba(251, 248, 243, 0.7);
  text-align: center;
  max-width: 56ch;
}

.lightbox__close,
.lightbox__nav {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  flex: none;
  color: var(--c-cream);
  background-color: rgba(251, 248, 243, 0.1);
  border: 1px solid rgba(251, 248, 243, 0.2);
  border-radius: var(--r-pill);
  transition: background-color var(--dur-fast) var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover { background-color: rgba(251, 248, 243, 0.22); }

.lightbox__close {
  position: absolute;
  inset-block-start: var(--s-5);
  inset-inline-end: var(--s-5);
  z-index: 1;
}

/* Arrows point along the reading direction. */
.lightbox__nav--prev svg { transform: rotate(180deg); }
[dir="rtl"] .lightbox__nav--prev svg { transform: none; }
[dir="rtl"] .lightbox__nav--next svg { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 200px;
  }
  .gallery-item:nth-child(1) { grid-row: span 2; }
}

@media (min-width: 1000px) {
  .gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 230px;
    gap: var(--s-4);
  }
  .gallery-item:nth-child(1),
  .gallery-item:nth-child(6) { grid-row: span 2; }
  .gallery-item:nth-child(3),
  .gallery-item:nth-child(7) { grid-column: span 2; }
}

@media (min-width: 700px) {
  .lightbox { padding: var(--s-8) var(--s-9); gap: var(--s-6); }
}

/* ===== _testimonials.css ===== */
/* ==========================================================================
   TESTIMONIALS — on the dark ink section
   ========================================================================== */

.test-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}

.test-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-6);
  background-color: rgba(251, 248, 243, 0.045);
  border: 1px solid rgba(251, 248, 243, 0.12);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.test-card:hover {
  background-color: rgba(251, 248, 243, 0.075);
  border-color: rgba(251, 248, 243, 0.22);
}

.test-card__quote {
  color: var(--c-accent);
  opacity: 0.9;
}

.test-card__quote-text {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-text);
  font-size: var(--t-md);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: rgba(251, 248, 243, 0.92);
}

.test-card__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-block-start: auto;
  padding-block-start: var(--s-4);
  border-block-start: 1px solid rgba(251, 248, 243, 0.12);
}
.test-card__name {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-cream);
}
.test-card__meta {
  font-size: var(--t-xs);
  color: rgba(251, 248, 243, 0.55);
}

.test-note {
  margin-block-start: var(--s-7);
  font-size: var(--t-sm);
  color: rgba(251, 248, 243, 0.55); /* AA on --c-ink: 5.84:1 */
  max-width: 62ch;
}

@media (min-width: 760px) {
  .test-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
}

/* ===== _faq.css ===== */
/* ==========================================================================
   FAQ — sticky aside + accordion
   ========================================================================== */

.faq__grid {
  display: grid;
  gap: var(--s-8);
}

.faq__aside h2 { margin-block-end: var(--s-4); }
.faq__aside .section-head__lede { margin-block-start: var(--s-4); }
.faq__cta { margin-block-start: var(--s-6); }

/* --------------------------------------------------------------------------
   ACCORDION
   -------------------------------------------------------------------------- */
.faq__list {
  border-block-start: 1px solid var(--c-line);
}

.faq-item { border-block-end: 1px solid var(--c-line); }

.faq-item__heading { margin: 0; }

.faq-item__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
  inline-size: 100%;
  padding-block: var(--s-5);
  text-align: start;

  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-text);
  font-size: var(--t-md);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--c-ink);

  transition: color var(--dur-fast) var(--ease);
}
.faq-item__trigger:hover { color: var(--c-accent); }

.faq-item__icon {
  flex: none;
  margin-block-start: 3px;
  color: var(--c-accent);
  transition: transform var(--dur) var(--ease);
}
/* The plus rotates into a minus — no second icon needed. */
.faq-item.is-open .faq-item__icon { transform: rotate(135deg); }

.faq-item__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur) var(--ease);
}
.faq-item__panel[hidden] { display: none; }
.faq-item__panel p {
  padding-block-end: var(--s-6);
  padding-inline-end: var(--s-8);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--c-ink-mute);
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .faq__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--s-10);
    align-items: start;
  }
  .faq__aside {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--s-8));
  }
  .faq-item__trigger { font-size: var(--t-lg); padding-block: var(--s-6); }
}

/* ===== _contact.css ===== */
/* ==========================================================================
   CONTACT — details, map placeholder, inquiry form
   ========================================================================== */

.contact__grid {
  display: grid;
  gap: var(--s-8);
  align-items: start;
}

/* --------------------------------------------------------------------------
   CONTACT DETAILS
   -------------------------------------------------------------------------- */
.contact-list {
  display: grid;
  gap: var(--s-5);
  margin-block-end: var(--s-7);
}

.contact-list__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
}

.contact-list__icon {
  color: var(--c-accent);
  margin-block-start: 3px;
}

.contact-list__label {
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--c-ink-faint);
  margin-block-end: var(--s-1);
}

.contact-list__value {
  font-size: var(--t-md);
  color: var(--c-ink);
  line-height: 1.4;
  /* Same reason as the footer: the email address cannot be hyphenated. */
  overflow-wrap: anywhere;
}

.contact-list__link {
  border-block-end: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.contact-list__link:hover {
  color: var(--c-accent);
  border-block-end-color: currentColor;
}

.contact-list__hint {
  font-size: var(--t-sm);
  color: var(--c-ink-faint);
  margin-block-start: var(--s-1);
}

.contact-list__directions {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-block-start: var(--s-3);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-accent);
  padding-block-end: 2px;
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease);
}
.contact-list__directions:hover { border-block-end-color: currentColor; gap: var(--s-3); }
/* Arrow points along the reading direction. */
[dir="rtl"] .contact-list__directions svg { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   MAP PLACEHOLDER
   -------------------------------------------------------------------------- */
.contact__map {
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background-color: var(--c-sand-deep);
}
.contact__map iframe {
  display: block;
  inline-size: 100%;
  block-size: 280px;
  border: 0;
  /* Warms the default map tiles into the palette. */
  filter: saturate(0.72) contrast(1.02);
}
.contact__map-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-block-start: 1px solid var(--c-line);
  background-color: var(--c-cream);
  font-size: var(--t-xs);
  color: var(--c-ink-mute);
}
.contact__map-link {
  font-weight: 600;
  color: var(--c-accent);
  white-space: nowrap;
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.contact__map-link:hover { border-block-end-color: currentColor; }

/* --------------------------------------------------------------------------
   FORM
   -------------------------------------------------------------------------- */
.contact__form-wrap {
  padding: var(--s-6);
  background-color: var(--c-cream);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

.form { display: grid; gap: var(--s-5); }

.form__row { display: grid; gap: var(--s-5); }

.field { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.field--fieldset { border: 0; padding: 0; margin: 0; }

.field__label {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-ink);
  padding: 0;
}

.field__input {
  inline-size: 100%;
  padding: 0.85rem var(--s-4);
  background-color: var(--c-sand);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--t-base);
  color: var(--c-ink);
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}
.field__input::placeholder { color: var(--c-ink-faint); }
.field__input:hover { border-color: var(--c-line); }
.field__input:focus {
  outline: none;
  background-color: var(--c-cream);
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}
.field__input--area { resize: vertical; min-block-size: 110px; line-height: 1.55; }

.field__input.has-error {
  border-color: var(--c-error);
  background-color: color-mix(in srgb, var(--c-error) 5%, var(--c-cream));
}

.field__error {
  font-size: var(--t-xs);
  color: var(--c-error);
}
.field__error[hidden] { display: none; }

/* Residence choice ------------------------------------------------------- */
.choice-group {
  display: grid;
  gap: var(--s-3);
  margin-block-start: var(--s-2);
}

.choice {
  --choice-tone: var(--c-accent);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.85rem var(--s-4);
  background-color: var(--c-sand);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.choice:hover { border-color: var(--c-line); }

.choice input {
  position: absolute;
  opacity: 0;
  inline-size: 1px;
  block-size: 1px;
}

.choice__box {
  inline-size: 18px;
  block-size: 18px;
  flex: none;
  border: 1.5px solid var(--c-ink-faint);
  border-radius: var(--r-pill);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.choice:has(input:checked) {
  border-color: var(--choice-tone);
  background-color: var(--c-cream);
}
.choice:has(input:checked) .choice__box {
  border-color: var(--choice-tone);
  box-shadow: inset 0 0 0 4px var(--choice-tone);
}
.choice:has(input:focus-visible) {
  outline: 2px solid var(--choice-tone);
  outline-offset: 2px;
}
.choice__text { color: var(--c-ink-soft); }
.choice:has(input:checked) .choice__text { color: var(--c-ink); font-weight: 500; }

/* Footnote + status ------------------------------------------------------ */
.form__note {
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--c-ink-faint);
}

.form__status:empty { display: none; }
.form__status {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
}
.form__status.is-pending { background-color: var(--c-sand); color: var(--c-ink-mute); }
.form__status.is-success {
  background-color: color-mix(in srgb, var(--c-success) 10%, var(--c-cream));
  color: var(--c-success);
}
.form__status.is-error {
  background-color: color-mix(in srgb, var(--c-error) 8%, var(--c-cream));
  color: var(--c-error);
}

/* --------------------------------------------------------------------------
   BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (min-width: 560px) {
  .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Three room types tile evenly in three columns, four in two. */
  .choice-group--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .choice-group--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 980px) {
  .contact__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-9);
  }
  .contact__form-wrap { padding: var(--s-8); }
  .contact__map iframe { block-size: 320px; }
}

/* ===== _footer.css ===== */
/* ==========================================================================
   FOOTER + FLOATING WHATSAPP BUTTON
   ========================================================================== */

.footer {
  background-color: var(--c-ink);
  color: rgba(251, 248, 243, 0.62);
  padding-block: var(--s-9) var(--s-6);
}

.footer__top {
  display: grid;
  gap: var(--s-8);
  padding-block-end: var(--s-8);
  border-block-end: 1px solid rgba(251, 248, 243, 0.12);
}

/* --------------------------------------------------------------------------
   BRAND BLOCK
   -------------------------------------------------------------------------- */
.brand--footer .brand__badge { inline-size: 56px; block-size: 56px; }
.brand--footer .brand__name   { color: var(--c-cream); }
.brand--footer .brand__suffix { color: rgba(251, 248, 243, 0.6); }

.footer__desc {
  max-width: 42ch;
  margin-block-start: var(--s-5);
  font-size: var(--t-sm);
  line-height: 1.65;
}

.social {
  display: flex;
  gap: var(--s-3);
  margin-block-start: var(--s-6);
}
.social a {
  display: grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  color: rgba(251, 248, 243, 0.7);
  border: 1px solid rgba(251, 248, 243, 0.18);
  border-radius: var(--r-pill);
  transition:
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
}
.social a:hover {
  color: var(--c-cream);
  border-color: var(--c-accent);
  background-color: var(--c-accent);
}

/* --------------------------------------------------------------------------
   LINK COLUMNS
   -------------------------------------------------------------------------- */
.footer__title {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--c-cream);
  margin-block-end: var(--s-5);
}

.footer__links {
  display: grid;
  gap: var(--s-3);
  font-size: var(--t-sm);
}
.footer__links a {
  color: rgba(251, 248, 243, 0.62);
  transition: color var(--dur-fast) var(--ease);
  /* The email is a 30-character unbreakable string and the footer columns get
     down to ~200px; without this it overflows the page at ~1000px. */
  overflow-wrap: anywhere;
}
.footer__links a:hover { color: var(--c-cream); }

.lang-switch--footer {
  --ls-border: rgba(251, 248, 243, 0.22);
  --ls-fg: var(--c-cream);
  --ls-fg-mute: rgba(251, 248, 243, 0.55);
  --ls-fg-active: var(--c-gold-light);
  margin-block-start: var(--s-6);
}

/* --------------------------------------------------------------------------
   BOTTOM BAR
   -------------------------------------------------------------------------- */
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  align-items: center;
  justify-content: space-between;
  padding-block-start: var(--s-6);
  font-size: var(--t-xs);
  color: rgba(251, 248, 243, 0.55); /* AA on --c-ink: 5.84:1 */
}
.footer__legal {
  display: flex;
  gap: var(--s-3);
  align-items: center;
}
.footer__legal a { transition: color var(--dur-fast) var(--ease); }
.footer__legal a:hover { color: var(--c-cream); }

/* --------------------------------------------------------------------------
   FLOATING WHATSAPP CTA
   -------------------------------------------------------------------------- */
.wa-fab {
  position: fixed;
  inset-block-end: var(--s-5);
  inset-inline-end: var(--s-5);
  z-index: var(--z-sticky);
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  background-color: var(--c-forest);
  color: var(--c-cream);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-lg);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.wa-fab:hover {
  transform: translateY(-2px) scale(1.04);
  background-color: var(--c-forest-deep);
}
/* Stays out of the way while a full-screen layer is open. */
.is-locked .wa-fab { display: none; }

/* ...and while the footer is on screen, where it would otherwise cover the
   legal links. js/main.js toggles this. */
.wa-fab.is-tucked {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.9);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              visibility 0s linear var(--dur);
}

/* --------------------------------------------------------------------------
   BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (min-width: 620px) {
  .footer__top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-8) var(--s-6);
  }
  .footer__brand { grid-column: 1 / -1; }
}

@media (min-width: 1000px) {
  .footer { padding-block: var(--s-10) var(--s-6); }
  .footer__top {
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: var(--s-9);
  }
  .footer__brand { grid-column: auto; }
  .wa-fab {
    inline-size: 58px;
    block-size: 58px;
    inset-block-end: var(--s-6);
    inset-inline-end: var(--s-6);
  }
}

/* ===== _roomspage.css ===== */
/* ==========================================================================
   ROOMS PAGE (rooms.html)
   Page head · alternating room rows · rate table · features · included · CTA
   ========================================================================== */

/* --------------------------------------------------------------------------
   PAGE HEAD
   A dark band under the fixed charcoal header, so the header has something to
   sit on from the very top of a subpage (there is no full-bleed hero here).
   -------------------------------------------------------------------------- */
.page-head {
  background-color: var(--c-ink);
  color: rgba(251, 248, 243, 0.72);
  padding-block: calc(var(--header-h) + var(--s-9)) var(--s-9);
}

.page-head__back {
  color: var(--c-gold-light);
  margin-block-end: var(--s-6);
}
/* This arrow points back, against the reading direction. */
.link-arrow--back svg { transform: scaleX(-1); }
[dir="rtl"] .link-arrow--back svg { transform: none; }

.page-head__title {
  color: var(--c-cream);
  font-size: var(--t-3xl);
  max-width: 18ch;
}

.page-head__lede {
  margin-block-start: var(--s-5);
  max-width: 62ch;
  font-size: var(--t-md);
  color: rgba(251, 248, 243, 0.7);
}

.page-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6) var(--s-8);
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-7);
  border-block-start: 1px solid rgba(251, 248, 243, 0.14);
}
.page-stats li {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}
.page-stats__value {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-display);
  font-size: var(--t-2xl);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-gold-light);
}
.page-stats__label {
  font-size: var(--t-sm);
  color: rgba(251, 248, 243, 0.62);
  max-width: 14ch;
}

/* --------------------------------------------------------------------------
   ROOM ROWS
   -------------------------------------------------------------------------- */
.room-rows .container {
  display: grid;
  gap: var(--s-10);
}

.room-row {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}

.room-row__media { border-radius: var(--r-lg); }
.room-row:hover .media img { transform: scale(1.03); }

.room-row__cap {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-accent);
}

.room-row__title {
  font-size: var(--t-2xl);
  margin-block-start: var(--s-3);
}

.room-row__desc {
  margin-block-start: var(--s-4);
  max-width: 52ch;
  color: var(--c-ink-mute);
  font-size: var(--t-base);
}

.room-row .amenity-chips { margin-block-start: var(--s-5); }

/* Rate block: monthly / per term / payment plan --------------------------- */
.rate {
  display: grid;
  gap: var(--s-4);
  margin-block-start: var(--s-6);
  padding-block: var(--s-5);
  border-block: 1px solid var(--c-line-soft);
}
.rate__cell dt {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin-block-end: var(--s-2);
}
.rate__cell dd { margin: 0; }
.rate__value {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-display);
  font-size: var(--t-xl);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  white-space: nowrap;
}
.rate__note {
  font-size: var(--t-xs);
  color: var(--c-ink-mute);
  margin-block-start: var(--s-1);
}
.rate__plan {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-accent);
  line-height: 1.35;
}

.room-row__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  margin-block-start: var(--s-6);
}

/* --------------------------------------------------------------------------
   RATE TABLE
   -------------------------------------------------------------------------- */
.rate-table__wrap {
  /* Four money columns cannot compress below a readable width, so the table
     scrolls inside its own box rather than pushing the page sideways. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background-color: var(--c-cream);
}

.rate-table {
  inline-size: 100%;
  min-inline-size: 560px;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
.rate-table th,
.rate-table td {
  padding: var(--s-4) var(--s-5);
  text-align: start;
  border-block-end: 1px solid var(--c-line-soft);
  white-space: nowrap;
}
.rate-table thead th {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-ink-faint);
  background-color: var(--c-sand);
}
.rate-table tbody th {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-text);
  font-size: var(--t-md);
  font-weight: 400;
  color: var(--c-ink);
  white-space: normal;
  min-inline-size: 12ch;
}
.rate-table tbody td:nth-child(2) {
  font-weight: 600;
  color: var(--c-accent);
}
.rate-table tbody tr:last-child th,
.rate-table tbody tr:last-child td { border-block-end: 0; }
.rate-table tbody tr:hover { background-color: var(--c-sand); }

.rate-table__note {
  margin-block-start: var(--s-5);
  font-size: var(--t-sm);
  color: var(--c-ink-faint);
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   ROOM FEATURES
   -------------------------------------------------------------------------- */
.feature-list {
  display: grid;
  gap: var(--s-4);
}
.feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-5) var(--s-6);
  background-color: var(--c-sand);
  border-radius: var(--r-lg);
  font-size: var(--t-md);
  color: var(--c-ink);
}
.feature__icon {
  color: var(--c-accent);
  margin-block-start: 3px;
}

/* --------------------------------------------------------------------------
   INCLUDED IN THE PRICE (on the dark section)
   -------------------------------------------------------------------------- */
.included__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background-color: rgba(251, 248, 243, 0.14);
  border: 1px solid rgba(251, 248, 243, 0.14);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.included__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-4);
  background-color: var(--c-ink);
  text-align: center;
  font-size: var(--t-sm);
  color: var(--c-cream);
}
.included__icon { color: var(--c-gold-light); }

/* --------------------------------------------------------------------------
   VIDEO TOUR + CLOSING CTA
   -------------------------------------------------------------------------- */
.room-cta__grid {
  display: grid;
  gap: var(--s-5);
}
.room-cta__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-7);
  background-color: var(--c-cream);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  color: var(--c-ink-mute);
}
.room-cta__icon { color: var(--c-accent); }
.room-cta__title {
  font-size: var(--t-xl);
  color: var(--c-ink);
}
.room-cta__card .btn,
.room-cta__actions { margin-block-start: var(--s-2); }

.room-cta__card--accent {
  background-color: var(--c-ink);
  border-color: var(--c-ink);
  color: rgba(251, 248, 243, 0.72);
}
.room-cta__card--accent .room-cta__title { color: var(--c-cream); }
.room-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
}
.link-arrow--light { color: var(--c-gold-light); }

/* --------------------------------------------------------------------------
   HOMEPAGE: the button through to this page
   -------------------------------------------------------------------------- */
.rooms__cta {
  display: flex;
  justify-content: center;
  margin-block-start: var(--s-8);
}

/* --------------------------------------------------------------------------
   BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (min-width: 560px) {
  .rate { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
  .included__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
  .room-cta__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
  .included__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .room-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-9);
  }
  /* Alternate which side the photograph sits on, so a list of four rooms
     reads as a sequence rather than a repeated template. */
  .room-row:nth-child(even) .room-row__media { order: 2; }

  .page-head__title { font-size: var(--t-4xl); }
  .rate-table { min-inline-size: 0; }
}

/* --------------------------------------------------------------------------
   ROOM PHOTO SLIDER
   The track is the source of truth: a scroll-snap container, so swipe and
   trackpad gestures work with no JS at all. The buttons and dots in
   js/main.js only nudge its scroll position and read it back.
   -------------------------------------------------------------------------- */
.room-slider {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background-color: var(--c-sand-deep);
}

.room-slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  /* The scrollbar is replaced by the dots and the counter. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.room-slider__track::-webkit-scrollbar { display: none; }
.room-slider__track:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: -2px;
}

.room-slider__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  aspect-ratio: 4 / 3;
}
.room-slider__slide img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

/* Controls ---------------------------------------------------------------- */
.room-slider__nav {
  position: absolute;
  inset-block-start: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  border-radius: var(--r-pill);
  background-color: rgba(251, 248, 243, 0.92);
  color: var(--c-ink);
  box-shadow: var(--sh-md);
  opacity: 0;
  transition: opacity var(--dur) var(--ease), background-color var(--dur-fast) var(--ease);
}
.room-slider:hover .room-slider__nav,
.room-slider:focus-within .room-slider__nav { opacity: 1; }
.room-slider__nav:hover { background-color: var(--c-cream); }
.room-slider__nav:disabled { opacity: 0 !important; pointer-events: none; }

.room-slider__nav--prev { inset-inline-start: var(--s-4); }
.room-slider__nav--next { inset-inline-end: var(--s-4); }
.room-slider__nav--prev svg { transform: scaleX(-1); }
[dir="rtl"] .room-slider__nav--prev svg { transform: none; }
[dir="rtl"] .room-slider__nav--next svg { transform: scaleX(-1); }

.room-slider__dots {
  position: absolute;
  inset-block-end: var(--s-4);
  inset-inline-start: 50%;
  translate: -50% 0;
  display: flex;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-pill);
  background-color: rgba(18, 14, 11, 0.42);
  backdrop-filter: blur(6px);
}
.room-slider__dot {
  inline-size: 7px;
  block-size: 7px;
  border-radius: var(--r-pill);
  background-color: rgba(251, 248, 243, 0.5);
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.room-slider__dot:hover { background-color: rgba(251, 248, 243, 0.8); }
.room-slider__dot.is-active {
  background-color: var(--c-gold-light);
  transform: scale(1.35);
}

.room-slider__count {
  position: absolute;
  inset-block-end: var(--s-4);
  inset-inline-end: var(--s-4);
  padding: 0.2rem var(--s-3);
  border-radius: var(--r-pill);
  background-color: rgba(18, 14, 11, 0.42);
  backdrop-filter: blur(6px);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--c-cream);
  font-variant-numeric: tabular-nums;
}

/* Touch devices have no hover, so the arrows would never appear. Swipe is
   the natural gesture there and the dots already show the position. */
@media (hover: none) {
  .room-slider__nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .room-slider__track { scroll-behavior: auto; }
}