/* =========================================================================
   Levant Hall — single stylesheet
   Tokens → reset → typography → layout → components → utilities → motion
   Notes:
   - Logical properties (margin-inline-*, padding-inline-*) so RTL works.
   - Arabic display swaps to Amiri; Latin display uses Cormorant Garamond.
   - Replace token values once we have real photography to sample from.
   ========================================================================= */

/* ---------- Tokens ---------- */
:root {
  --bg:           #F7F2EB;
  --bg-deep:      #EDE5D6;
  --ink:          #1F2421;
  --ink-soft:     #4B524E;
  --accent:       #B08D57;
  --accent-deep:  #8A6B3D;
  --rule:         #D9CFBE;
  --shadow:       0 1px 2px rgba(31,36,33,.04), 0 8px 24px rgba(31,36,33,.06);

  --font-display: "Cormorant Garamond", "Amiri", Georgia, serif;
  --font-body:    "Inter", "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step-0:  clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  --step-1:  clamp(1.1rem,  1rem   + 0.4vw, 1.3rem);
  --step-2:  clamp(1.4rem,  1.2rem + 0.8vw, 1.75rem);
  --step-3:  clamp(1.9rem,  1.6rem + 1.4vw, 2.5rem);
  --step-4:  clamp(2.6rem,  2rem   + 2.8vw, 4rem);
  --step-5:  clamp(3.5rem,  2.6rem + 4.5vw, 6rem);

  --gutter:  clamp(1.25rem, 1rem + 2vw, 2.5rem);
  --max-w:   72rem;
  --radius:  4px;

  --t-quick: 180ms ease-out;
  --t-med:   320ms cubic-bezier(.2,.6,.2,1);
  --t-slow:  640ms cubic-bezier(.2,.6,.2,1);

  --header-h: 3.75rem; /* 60px-ish — drives the mobile-nav offset */
}

[lang="ar"] {
  --font-display: "Amiri", "Cormorant Garamond", Georgia, serif;
  --font-body:    "Cairo", "Inter", system-ui, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; margin: 0; }
img, picture, video { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
a, button { -webkit-tap-highlight-color: transparent; }

/* ---------- Base ---------- */
html, body { background: var(--bg); color: var(--ink); }
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Typography ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
[lang="ar"] .display { letter-spacing: 0; line-height: 1.2; }

h1, .h1 { font: 400 var(--step-5)/1.05 var(--font-display); letter-spacing: -.015em; }
h2, .h2 { font: 400 var(--step-4)/1.1  var(--font-display); letter-spacing: -.01em; }
h3, .h3 { font: 500 var(--step-2)/1.25 var(--font-body); letter-spacing: .01em; }
h4, .h4 { font: 500 var(--step-1)/1.3  var(--font-body); }
[lang="ar"] :is(h1,h2) { line-height: 1.2; }

p { color: var(--ink-soft); max-width: 60ch; }
.lead { font-size: var(--step-1); color: var(--ink); max-width: 50ch; }

.eyebrow {
  font: 500 .78rem/1 var(--font-body);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  display: inline-block;
}
[lang="ar"] .eyebrow { letter-spacing: .08em; text-transform: none; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { padding-block: clamp(4rem, 3rem + 6vw, 8rem); }
section + section { border-block-start: 1px solid var(--rule); }

.grid { display: grid; gap: var(--gutter); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.stack > * + * { margin-block-start: 1rem; }
.stack-lg > * + * { margin-block-start: 2rem; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Stacking context only — backdrop-filter is moved to ::before so the
     header does NOT become a containing block for the mobile menu's
     position: fixed overlay. (backdrop-filter on a parent traps fixed
     descendants inside its box.) */
  isolation: isolate;
  border-block-end: 1px solid transparent;
  transition: border-color var(--t-quick);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
}
.site-header.is-scrolled { border-block-end-color: var(--rule); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.1rem;
  gap: 1rem;
}
.brand {
  font: 500 1.15rem/1 var(--font-display);
  letter-spacing: .04em;
  color: var(--ink);
}
.brand b { font-weight: 500; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.6rem + 1vw, 1.75rem);
}
.nav-links a {
  position: relative;
  color: var(--ink-soft);
  font-size: .92rem;
  letter-spacing: .04em;
  transition: color var(--t-quick);
}
.nav-links a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -6px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform var(--t-med);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }

.lang-toggle {
  font: 500 .78rem/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .5rem .75rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink);
  transition: border-color var(--t-quick), color var(--t-quick), background var(--t-quick);
}
.lang-toggle:hover { border-color: var(--accent); color: var(--accent-deep); }

.nav-toggle { display: none; }

@media (max-width: 820px) {
  .nav { padding-block: .9rem; }
  .nav-links {
    position: fixed;
    inset: 0;
    inset-block-start: var(--header-h);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.75rem;
    background: var(--bg);
    transform: translateY(-110%);
    transition: transform var(--t-med);
    padding: 2rem 2rem calc(2rem + env(safe-area-inset-bottom));
    /* Make sure the menu sits above page content but below the sticky header */
    z-index: 40;
  }
  .nav-links.is-open { transform: translateY(0); }
  .nav-links a {
    font-size: 1.1rem;
    padding: .5rem 0;
  }
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;   /* WCAG touch target minimum */
    height: 44px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: transparent;
    transition: border-color var(--t-quick), background var(--t-quick);
  }
  .nav-toggle:hover { border-color: var(--ink); }
  .nav-toggle span {
    display: block;
    width: 20px;
    height: 1.5px;
    background: var(--ink);
    transform-origin: center;
    transition: transform var(--t-quick), opacity var(--t-quick);
  }
  /* Animate hamburger → X when open */
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .9rem 1.6rem;
  font: 500 .9rem/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  border-radius: var(--radius);
  transition: background var(--t-quick), color var(--t-quick), border-color var(--t-quick), transform var(--t-quick);
  white-space: nowrap;
}
.btn:hover { background: var(--ink); color: var(--bg); }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--ink);
  color: var(--bg);
}
.btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

.btn--ghost { border-color: var(--rule); color: var(--ink-soft); }
.btn--ghost:hover { color: var(--ink); border-color: var(--ink); background: transparent; }

[lang="ar"] .btn { letter-spacing: 0; text-transform: none; font-weight: 500; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: min(92vh, 920px);
  /* Use dvh on browsers that support it so iOS Safari's URL bar doesn't crop the hero. */
  min-height: min(92dvh, 920px);
  display: grid;
  align-items: end;
  overflow: hidden;
  padding-block: 0;
  border-block-start: 0;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 50% 20%, #2a2e2b 0%, transparent 60%),
    linear-gradient(180deg, #2a2e2b 0%, #3a3530 60%, #5a4b39 100%);
  z-index: 0;
}
.hero::after {
  /* warm wash + subtle noise/grain via gradient stripes */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 60% at 50% 100%, rgba(176,141,87,.35), transparent 60%),
    linear-gradient(180deg, rgba(31,36,33,0) 40%, rgba(31,36,33,.55) 100%);
  z-index: 1;
  pointer-events: none;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* For the legacy div+background-image fallback if a page ever uses it */
  background-size: cover;
  background-position: center;
}
/* Video version doesn't need kenburns — it has its own motion.
   Legacy div fallback gets the slow zoom for visual interest. */
div.hero__media { animation: kenburns 24s ease-in-out infinite alternate; }
@keyframes kenburns {
  from { transform: scale(1.04) translate(0, 0); }
  to   { transform: scale(1.12) translate(-1%, -1%); }
}
.hero__content {
  position: relative;
  z-index: 2;
  color: var(--bg);
  padding-block-end: clamp(3rem, 2rem + 4vw, 6rem);
}
.hero h1 {
  color: var(--bg);
  font-size: var(--step-5);
  max-width: 14ch;
}
.hero .lead { color: rgba(247,242,235,.85); margin-block-start: 1.25rem; max-width: 36ch; }
.hero__ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-block-start: 2.25rem;
}
.hero__ctas .btn {
  border-color: var(--bg);
  color: var(--bg);
}
.hero__ctas .btn:hover { background: var(--bg); color: var(--ink); }
.hero__ctas .btn--primary {
  background: var(--bg);
  color: var(--ink);
}
.hero__ctas .btn--primary:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }

/* ---------- Hero play button ---------- */
.hero__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 88px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--bg);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 3;
  opacity: 1;
  transition: opacity 0.7s ease, transform 0.3s ease, background 0.25s ease;
  animation: heroPlayPulse 2.4s ease-in-out infinite;
  padding: 0;
}
.hero__play svg {
  width: 32px;
  height: 32px;
  /* Visual offset — play icon's optical centre sits slightly right of geometric centre */
  margin-inline-start: 4px;
}
.hero__play:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translate(-50%, -50%) scale(1.04);
}
.hero__play.is-hidden {
  opacity: 0;
  pointer-events: none;
}
@keyframes heroPlayPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.28); }
  50%      { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__play { animation: none; }
}

.hero__placeholder-tag {
  /* visible-in-dev signal that the hero needs a real photo/video */
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  z-index: 3;
  font: 500 .68rem/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(247,242,235,.55);
  border: 1px dashed rgba(247,242,235,.35);
  padding: .4rem .6rem;
  border-radius: var(--radius);
}

/* ---------- Section header ---------- */
.section-head {
  display: grid;
  gap: .75rem;
  margin-block-end: clamp(2rem, 1.4rem + 2vw, 3.5rem);
  max-width: 56ch;
}
.section-head .eyebrow + h2 { margin-block-start: .25rem; }

/* ---------- Services — editorial list ---------- */
.services-edit {
  list-style: none;
  margin: clamp(2rem, 1.5rem + 1.5vw, 3rem) 0 0;
  padding: 0;
  border-block-start: 1px solid var(--rule);
}
.service-row {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  align-items: start;
  gap: clamp(1rem, 1rem + 2vw, 2.5rem);
  padding: clamp(1.5rem, 1.25rem + 1.5vw, 2.5rem) clamp(.5rem, .5rem + 1vw, 1.25rem);
  border-block-end: 1px solid var(--rule);
  position: relative;
  cursor: default;
  transition: background var(--t-med), padding-inline-start var(--t-med);
}
.service-row::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--t-med);
}
.service-row:hover::before { transform: scaleY(1); }
.service-row:hover {
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 6%, transparent), transparent 70%);
  padding-inline-start: clamp(1rem, 1rem + 2vw, 2.5rem);
}
.service-row__num {
  font: 400 .9rem/1 var(--font-display);
  letter-spacing: .18em;
  color: var(--accent-deep);
  padding-block-start: .4rem;
}
[lang="ar"] .service-row__num { letter-spacing: .08em; font-size: 1rem; }
.service-row__body { display: grid; gap: .4rem; }
.service-row__name {
  font: 400 clamp(1.85rem, 1.4rem + 2vw, 3rem)/1.05 var(--font-display);
  color: var(--ink);
  margin: 0;
  letter-spacing: -.015em;
  transition: color var(--t-med), transform var(--t-med);
}
[lang="ar"] .service-row__name { letter-spacing: 0; line-height: 1.2; }
.service-row__desc {
  margin: 0;
  font-size: .95rem;
  color: var(--ink-soft);
  max-width: 56ch;
  line-height: 1.55;
}
.service-row__arrow {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--ink-soft);
  align-self: center;
  opacity: .6;
  transition: transform var(--t-med), opacity var(--t-med), color var(--t-med);
}
[dir="rtl"] .service-row__arrow { transform: scaleX(-1); }
.service-row:hover .service-row__arrow {
  transform: translateX(10px);
  opacity: 1;
  color: var(--accent-deep);
}
[dir="rtl"] .service-row:hover .service-row__arrow {
  transform: scaleX(-1) translateX(10px);
}
.service-row:hover .service-row__name {
  color: var(--accent-deep);
}
@media (max-width: 640px) {
  .service-row {
    grid-template-columns: 2rem 1fr;
  }
  .service-row__arrow { display: none; }
}

/* ====================================================================
   Gallery feature — editorial alternating layout (used on home).
   Replaces the older small-tile .gallery-preview. Each figure takes
   ~58% width and offsets left or right, with a large editorial
   caption to one side. Mobile collapses to a single stack.
   ==================================================================== */
.gallery-feature .section-head { margin-block-end: clamp(2.5rem, 2rem + 2vw, 4rem); }

.feature-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 2rem + 4vw, 6rem);
  margin-block-end: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.feature-figure {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(1.25rem, 1rem + 2vw, 3rem);
}
.feature-figure--right {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
}
.feature-figure--right .feature-figure__media { grid-column: 2; grid-row: 1; }
.feature-figure--right .feature-figure__caption {
  grid-column: 1; grid-row: 1;
  text-align: end;
  justify-self: end;
}

.feature-figure__media {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  position: relative;
  background: var(--bg-deep);
  border-radius: 2px;
  /* Clip-path reveal start state — animated by GSAP. Without GSAP, full image is shown. */
  cursor: zoom-in;
}
/* No CSS pre-hide — images are visible immediately on load.
   GSAP applies the clip-path FROM state via immediateRender:false,
   so the hide-then-show flash never happens (esp. important on slow
   mobile networks where GSAP arrives a second or two after first paint). */
.feature-figure__media picture,
.feature-figure__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.2, .6, .2, 1);
}
.feature-figure__media:hover img { transform: scale(1.04); }

.feature-figure__caption {
  padding-inline: .25rem;
  max-width: 28ch;
}
.feature-figure__num {
  display: block;
  font: 400 .85rem/1 var(--font-display);
  letter-spacing: .22em;
  color: var(--accent-deep);
  margin-block-end: 1rem;
}
[lang="ar"] .feature-figure__num { letter-spacing: .08em; font-size: .95rem; }
.feature-figure__title {
  font: 400 clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem)/1.1 var(--font-display);
  color: var(--ink);
  margin: 0 0 .65rem;
  letter-spacing: -.01em;
}
[lang="ar"] .feature-figure__title { letter-spacing: 0; line-height: 1.2; }
.feature-figure__meta {
  display: block;
  font: 500 .75rem/1 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
[lang="ar"] .feature-figure__meta { letter-spacing: 0; text-transform: none; font-size: .88rem; }

.feature-cta {
  text-align: center;
  margin: 0;
}

@media (max-width: 760px) {
  .feature-figure,
  .feature-figure--right {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .feature-figure--right .feature-figure__media { grid-column: 1; grid-row: 1; }
  .feature-figure--right .feature-figure__caption {
    grid-column: 1; grid-row: 2;
    text-align: start;
    justify-self: start;
  }
  .feature-figure__caption { max-width: none; }
}

/* ---------- Gallery preview (legacy, kept for any other pages that still use it) ---------- */
.gallery-preview {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 12rem;
  gap: .75rem;
}
.gallery-preview .tile {
  position: relative;
  overflow: hidden;
  background: var(--bg-deep);
  border-radius: 2px;
  transition: transform var(--t-med);
  display: block;
}
/* Real photo inside the tile — fills, gentle zoom on hover */
.gallery-preview .tile img,
.gallery-preview .tile picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow);
}
.gallery-preview .tile:hover img { transform: scale(1.04); }
/* Placeholder caption only shows on tiles without a real image */
.gallery-preview .tile:not(:has(img))::after {
  content: "Photo placeholder";
  position: absolute;
  inset: 50% 0 auto 0;
  transform: translateY(-50%);
  text-align: center;
  font: 500 .68rem/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: .35;
}
[lang="ar"] .gallery-preview .tile:not(:has(img))::after { content: "صورة لاحقًا"; letter-spacing: .04em; text-transform: none; }
.gallery-preview .tile:hover { transform: translateY(-2px); }
.gallery-preview .tile--a { grid-column: span 3; grid-row: span 2; }
.gallery-preview .tile--b { grid-column: span 3; }
.gallery-preview .tile--c { grid-column: span 2; }
.gallery-preview .tile--d { grid-column: span 2; }
.gallery-preview .tile--e { grid-column: span 2; }
@media (max-width: 720px) {
  .gallery-preview { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 10rem; }
  .gallery-preview .tile--a { grid-column: span 2; grid-row: span 2; }
  .gallery-preview .tile--b,
  .gallery-preview .tile--c,
  .gallery-preview .tile--d,
  .gallery-preview .tile--e { grid-column: span 1; grid-row: span 1; }
}
.gallery-preview-cta {
  margin-block-start: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  text-align: center;
}
.gallery-preview .tile--a { background: linear-gradient(135deg, #4a3f33, #2a2520); }
.gallery-preview .tile--b { background: linear-gradient(135deg, #c9b48d, #8a7556); }
.gallery-preview .tile--c { background: linear-gradient(135deg, #8d7a5a, #4a3f33); }
.gallery-preview .tile--d { background: linear-gradient(135deg, #d4c4a4, #a59175); }
.gallery-preview .tile--e { background: linear-gradient(135deg, #6a5a48, #3a3025); }

/* ---------- Why / value props — magazine cards ---------- */
.values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, .75rem + 1.5vw, 2rem);
}
@media (max-width: 820px) { .values { grid-template-columns: 1fr; gap: 2rem; } }

.value {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.2, .6, .2, 1), box-shadow .5s ease;
}
.value:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 36px rgba(31, 36, 33, .12);
}
.value__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
  background: var(--bg-deep);
}
/* Same pattern as feature-figure: no CSS pre-hide. GSAP owns initial state. */
.value__media picture,
.value__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.2, .6, .2, 1);
}
.value:hover .value__media img { transform: scale(1.05); }

.value__body {
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
}
.value__num {
  font: 400 .85rem/1 var(--font-display);
  letter-spacing: .22em;
  color: var(--accent-deep);
  margin-block-end: .35rem;
}
[lang="ar"] .value__num { letter-spacing: .08em; font-size: .95rem; }
.value__title {
  font: 400 clamp(1.4rem, 1.15rem + 1vw, 1.85rem)/1.15 var(--font-display);
  color: var(--ink);
  margin: 0;
  letter-spacing: -.005em;
}
[lang="ar"] .value__title { letter-spacing: 0; line-height: 1.25; }
.value__desc {
  font-size: .95rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.55;
}

/* ---------- Testimonials ---------- */
.testimonial {
  background: var(--bg-deep);
  border: 1px solid var(--rule);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  border-radius: var(--radius);
}
.testimonial blockquote {
  font: 400 var(--step-2)/1.4 var(--font-display);
  color: var(--ink);
  letter-spacing: -.005em;
  margin-block-end: 1rem;
}
.testimonial cite {
  font-style: normal;
  color: var(--ink-soft);
  font-size: .88rem;
  letter-spacing: .04em;
}

/* ---------- Location ---------- */
.location {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--gutter);
  align-items: center;
}
@media (max-width: 820px) { .location { grid-template-columns: 1fr; } }
.map-placeholder {
  aspect-ratio: 5 / 4;
  background:
    repeating-linear-gradient(45deg, var(--bg-deep) 0 14px, var(--rule) 14px 15px),
    var(--bg-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  font: 500 .8rem/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}
[lang="ar"] .map-placeholder { letter-spacing: .04em; text-transform: none; }

/* ---------- Embedded Google Map (contact page) ---------- */
.location-map {
  aspect-ratio: 5 / 4;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-deep);
  box-shadow: 0 4px 24px rgba(31, 36, 33, .05);
}
.location-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- Location photo (legacy — used on the home page) ---------- */
.location__photo {
  margin: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}
.location__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}
.location__photo figcaption {
  padding: .9rem 1rem;
  font-size: .85rem;
  color: var(--ink-soft);
  background: var(--bg);
  border-block-start: 1px solid var(--rule);
}
.location__photo code {
  font: 500 .8rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--bg-deep);
  padding: .15rem .4rem;
  border-radius: 3px;
}

/* ---------- CTA banner ---------- */
.cta-banner {
  background: var(--ink);
  color: var(--bg);
  text-align: center;
}
.cta-banner h2 { color: var(--bg); }
.cta-banner p { color: rgba(247,242,235,.75); margin-inline: auto; }
.cta-banner .btn {
  border-color: var(--bg);
  color: var(--bg);
  margin-block-start: 2rem;
}
.cta-banner .btn:hover { background: var(--bg); color: var(--ink); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--bg-deep);
  padding-block: 3rem;
  border-block-start: 1px solid var(--rule);
}
.site-footer .container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--gutter);
}
@media (max-width: 720px) {
  .site-footer .container { grid-template-columns: 1fr; }
}
.site-footer h4 {
  font: 500 .8rem/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-block-end: 1rem;
}
[lang="ar"] .site-footer h4 { letter-spacing: .04em; text-transform: none; }
.site-footer ul[role="list"] li + li { margin-block-start: .5rem; }
.site-footer a { color: var(--ink); transition: color var(--t-quick); }
.site-footer a:hover { color: var(--accent-deep); }
.copyright {
  margin-block-start: 2.5rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--rule);
  font-size: .82rem;
  color: var(--ink-soft);
  text-align: center;
}

/* ---------- Floating WhatsApp ---------- */
.whatsapp-fab {
  position: fixed;
  inset-block-end: 1.25rem;
  inset-inline-end: 1.25rem;
  z-index: 40;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #25D366;
  color: white;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(37,211,102,.35), 0 1px 3px rgba(0,0,0,.15);
  transition: transform var(--t-quick), box-shadow var(--t-quick);
}
.whatsapp-fab:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(37,211,102,.5), 0 2px 4px rgba(0,0,0,.2); }
.whatsapp-fab svg { width: 28px; height: 28px; }

/* ====================================================================
   /admin/ — owner-facing dashboard. Same brand palette, denser layout.
   ==================================================================== */
.admin-body {
  background: var(--bg-deep);
  min-height: 100vh;
}

/* ---- Login screen ---- */
.admin-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem var(--gutter);
}
.admin-login__form {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(2rem, 1.5rem + 2vw, 3rem);
  width: 100%;
  max-width: 28rem;
  display: grid;
  gap: 1rem;
  box-shadow: var(--shadow);
}
.admin-login__brand {
  font-size: 1rem;
  color: var(--ink-soft);
}
.admin-login__title {
  font-size: var(--step-3);
  margin: 0;
}
.admin-login__hint { color: var(--ink-soft); font-size: .9rem; margin: 0; }
.admin-login__hint code {
  background: var(--bg-deep);
  padding: .15rem .4rem;
  border-radius: 3px;
  font: 500 .82rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.admin-login__submit { margin-block-start: .5rem; }
.admin-login__error {
  color: #b3261e;
  background: rgba(179, 38, 30, .08);
  padding: .65rem .8rem;
  border-radius: var(--radius);
  font-size: .9rem;
  margin: 0;
}
.admin-login__diag {
  font-size: .82rem;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .5rem .75rem;
  background: var(--bg-deep);
}
.admin-login__diag summary {
  cursor: pointer;
  font: 500 .78rem/1 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.admin-login__diag ul {
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .4rem;
}
.admin-login__diag li {
  display: flex;
  gap: .5rem;
  align-items: baseline;
}
.admin-login__diag code {
  background: var(--bg);
  padding: .1rem .35rem;
  border-radius: 3px;
  font: 500 .78rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.admin-login__diag strong { color: #b3261e; }

.admin-login__note {
  font-size: .8rem;
  color: var(--ink-soft);
  margin: 0;
  border-block-start: 1px solid var(--rule);
  padding-block-start: 1rem;
}

/* ---- App shell (grid: header / sidebar / scrollable main) ---- */
.admin-app {
  display: grid;
  grid-template-columns: 14rem 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "header header"
    "sidebar main";
  height: 100vh;
  overflow: hidden;
  background: var(--bg-deep);
}

.admin-bar {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.25rem;
  background: var(--bg);
  border-block-end: 1px solid var(--rule);
  z-index: 30;
}
.admin-bar__brand {
  font: 500 1.05rem/1 var(--font-display);
  color: var(--ink);
  letter-spacing: .04em;
  flex-shrink: 0;
  min-width: 11rem;  /* matches sidebar width minus padding */
}
.admin-bar__viewname {
  font: 500 var(--step-1)/1 var(--font-display);
  color: var(--ink);
  margin: 0;
  flex: 1;
}
.admin-bar__right { display: flex; gap: .5rem; align-items: center; margin-inline-start: auto; }

/* ---- Sidebar nav ---- */
.admin-sidebar {
  grid-area: sidebar;
  background: var(--bg);
  border-inline-end: 1px solid var(--rule);
  padding: 1rem .75rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  overflow-y: auto;
}
.admin-tab {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .7rem .85rem;
  font: 500 .92rem/1 var(--font-body);
  color: var(--ink-soft);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  text-align: start;
  transition: color var(--t-quick), background var(--t-quick), border-color var(--t-quick);
}
.admin-tab svg { flex-shrink: 0; opacity: .8; transition: opacity var(--t-quick); }
.admin-tab > span:first-of-type { flex: 1; }
.admin-tab:hover {
  color: var(--ink);
  background: var(--bg-deep);
}
.admin-tab:hover svg { opacity: 1; }
.admin-tab.is-active {
  color: var(--ink);
  background: var(--bg-deep);
  border-color: var(--rule);
  font-weight: 600;
}
.admin-tab.is-active svg { color: var(--accent-deep); opacity: 1; }
.admin-tab__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font: 600 .72rem/1 var(--font-body);
  letter-spacing: 0;
}
.admin-tab__count:empty,
.admin-tab__count:contains("0") { display: none; }

/* ---- Main content area (scrollable) ---- */
.admin-main {
  grid-area: main;
  overflow-y: auto;
  background: var(--bg-deep);
}
.admin-bar__refresh,
.admin-bar__logout {
  font: 500 .8rem/1 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: .55rem .85rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  transition: color var(--t-quick), border-color var(--t-quick);
}
.admin-bar__refresh:hover,
.admin-bar__logout:hover { color: var(--ink); border-color: var(--ink); }
.admin-bar__refresh { padding: .55rem; }

/* ---- View container (lives inside .admin-main which scrolls) ---- */
.admin-view {
  padding: clamp(1rem, 1rem + 1.5vw, 1.75rem);
  max-width: 80rem;
  margin-inline: auto;
  width: 100%;
}

/* ---- Toolbar (shared by inbox + calendar) ---- */
.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-block-end: 1.5rem;
}
.admin-filters { display: flex; flex-wrap: wrap; gap: .35rem; }
.admin-filters .filter {
  padding: .5rem .9rem;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--ink-soft);
  font: 500 .78rem/1 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  background: transparent;
  cursor: pointer;
  transition: all var(--t-quick);
}
.admin-filters .filter:hover { color: var(--ink); border-color: var(--rule); }
.admin-filters .filter.is-active {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
}
.admin-search input {
  width: 18rem;
  max-width: 100%;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .55rem .85rem;
  font: 400 .9rem/1.4 var(--font-body);
  color: var(--ink);
}
.admin-search input:focus { outline: none; border-color: var(--accent); }

/* ---- Booking cards (compact for dashboard feel) ---- */
.admin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: .85rem;
}
.admin-card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  display: grid;
  gap: .55rem;
  position: relative;
  transition: border-color var(--t-quick), box-shadow var(--t-quick);
}
.admin-card:hover { box-shadow: var(--shadow); }
.admin-card--new { border-inline-start: 3px solid var(--accent); }
.admin-card--approved { border-inline-start: 3px solid #2e7d32; }
.admin-card--suggested { border-inline-start: 3px solid #e0a106; }
.admin-card--declined { border-inline-start: 3px solid #b3261e; opacity: .8; }
.admin-card--handled { opacity: .6; }

.admin-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .78rem;
}
.admin-card__status {
  font: 500 .68rem/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: var(--bg-deep);
  color: var(--ink-soft);
}
.admin-card--new .admin-card__status { background: color-mix(in oklab, var(--accent) 20%, var(--bg-deep)); color: var(--accent-deep); }
.admin-card--approved .admin-card__status { background: rgba(46, 125, 50, .12); color: #2e7d32; }
.admin-card--suggested .admin-card__status { background: rgba(224, 161, 6, .15); color: #966500; }
.admin-card--declined .admin-card__status { background: rgba(179, 38, 30, .12); color: #b3261e; }
.admin-card__when { color: var(--ink-soft); }
.admin-card__name {
  font: 500 var(--step-2)/1.2 var(--font-display);
  color: var(--ink);
  margin: 0;
}
.admin-card__meta {
  margin: 0;
  font-size: .9rem;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.admin-card__kind { color: var(--ink); }
.admin-card__details {
  margin: 0;
  display: grid;
  gap: .35rem;
}
.admin-card__details > div { display: flex; gap: .5rem; }
.admin-card__details dt {
  min-width: 5.5rem;
  font-size: .8rem;
  color: var(--ink-soft);
  letter-spacing: .04em;
}
.admin-card__details dd { margin: 0; font-size: .9rem; color: var(--ink); }
.admin-card__details a { color: var(--accent-deep); }
.admin-card__notes {
  padding: .65rem .8rem;
  background: var(--bg-deep);
  border-radius: var(--radius);
  font-size: .88rem;
  color: var(--ink);
  font-style: italic;
  margin: 0;
}
.admin-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding-block-start: .25rem;
  border-block-start: 1px solid var(--rule);
  margin-block-start: .25rem;
}
.admin-card__actions .btn {
  font-size: .75rem;
  padding: .55rem .85rem;
  letter-spacing: .06em;
  text-transform: none;
}

.admin-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
}

/* ---- Stats strip (Reservations view) ---- */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  margin-block-end: 1.25rem;
}
@media (max-width: 720px) { .admin-stats { grid-template-columns: repeat(2, 1fr); } }
.admin-stat {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  display: grid;
  gap: .25rem;
}
.admin-stat dt {
  font: 500 .7rem/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.admin-stat dd {
  font: 500 var(--step-2)/1.1 var(--font-display);
  color: var(--ink);
  margin: 0;
}
.admin-stat small { color: var(--ink-soft); font-size: .75rem; }

/* ---- Reservation cards ---- */
.admin-cards--res { grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); }
.res-card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.1rem;
  display: grid;
  gap: .55rem;
  border-inline-start: 3px solid var(--rule);
  transition: box-shadow var(--t-quick);
}
.res-card:hover { box-shadow: var(--shadow); }
.res-card--enquiry   { border-inline-start-color: var(--accent); }
.res-card--hold      { border-inline-start-color: #888; }
.res-card--deposited { border-inline-start-color: #e0a106; }
.res-card--confirmed { border-inline-start-color: #2e7d32; }
.res-card--completed { border-inline-start-color: var(--ink-soft); opacity: .8; }
.res-card--cancelled { border-inline-start-color: #b3261e; opacity: .7; text-decoration: line-through; text-decoration-color: rgba(0,0,0,.2); }

.res-card__head { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; gap: .5rem; flex-wrap: wrap; }
.res-card__status {
  font: 500 .68rem/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: var(--bg-deep);
  color: var(--ink-soft);
}
.res-card--enquiry .res-card__status { background: color-mix(in oklab, var(--accent) 20%, var(--bg-deep)); color: var(--accent-deep); }
.res-card--deposited .res-card__status { background: rgba(224, 161, 6, .18); color: #966500; }
.res-card--confirmed .res-card__status { background: rgba(46, 125, 50, .15); color: #2e7d32; }
.res-card--cancelled .res-card__status { background: rgba(179, 38, 30, .12); color: #b3261e; }
.res-card__date { color: var(--ink); }
.res-card__date strong { color: var(--ink); margin-inline-end: .25rem; }
.res-card__tag {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: .1rem .4rem;
  margin-inline-start: .35rem;
  background: var(--bg-deep);
  border-radius: 3px;
  color: var(--ink-soft);
}
.res-card__name { margin: 0; font: 500 var(--step-2)/1.2 var(--font-display); color: var(--ink); }
.res-card__type { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.res-card__money {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .25rem .5rem;
  margin: 0;
  padding: .5rem 0;
  border-block: 1px solid var(--rule);
}
.res-card__money > div { display: grid; gap: .15rem; }
.res-card__money dt { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.res-card__money dd { margin: 0; font: 500 .95rem/1 var(--font-body); color: var(--ink); }
.res-card__progress {
  height: 4px;
  background: var(--bg-deep);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.res-card__progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent), #2e7d32); transition: width var(--t-med); }
.res-card__progress span {
  position: absolute;
  top: -1.4rem;
  right: 0;
  font-size: .72rem;
  color: var(--ink-soft);
}
.res-card__svc {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin: 0;
  padding-block-start: .3rem;
}
.res-card__svc span {
  font: 500 .72rem/1 var(--font-body);
  padding: .25rem .5rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-soft);
}
.res-card__svc-more { color: var(--accent-deep) !important; }
.res-card__notes {
  background: var(--bg-deep);
  padding: .55rem .75rem;
  border-radius: var(--radius);
  font-size: .85rem;
  color: var(--ink);
  font-style: italic;
  margin: 0;
}
.res-card__actions { display: flex; gap: .35rem; flex-wrap: wrap; }
.res-card__actions .btn { font-size: .75rem; padding: .5rem .8rem; letter-spacing: .04em; text-transform: none; }

/* "Promote to reservation" button on inbox cards */
.admin-card__promote {
  margin-inline-start: auto;
  background: var(--accent-deep);
  color: var(--bg);
  border-color: var(--accent-deep);
}
.admin-card__promote:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* ---- Reservation modal (HTML <dialog>) ---- */
.res-dialog {
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  max-width: min(64rem, 96vw);
  width: 100%;
  max-height: 92vh;
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(0,0,0,.25);
}
.res-dialog::backdrop {
  background: rgba(20, 22, 20, .55);
  backdrop-filter: blur(4px);
}
.res-form { display: flex; flex-direction: column; max-height: 92vh; }
.res-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.5rem;
  border-block-end: 1px solid var(--rule);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 2;
}
.res-dialog__head h2 { margin: 0; font-size: var(--step-2); }
.res-dialog__close {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all var(--t-quick);
}
.res-dialog__close:hover { color: var(--ink); border-color: var(--ink); }
.res-section {
  border: 0;
  padding: 1.25rem 1.5rem;
  border-block-end: 1px solid var(--rule);
  margin: 0;
}
.res-section:last-of-type { border-block-end: 0; }
.res-section legend {
  font: 500 .78rem/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  padding: 0 .25rem;
  margin-block-end: .9rem;
}
.res-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .9rem 1.1rem;
}
.res-section .field { display: grid; gap: .35rem; }
.res-section .field > span:first-child {
  font: 500 .75rem/1.2 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.res-section .field > span em { text-transform: none; letter-spacing: 0; opacity: .7; font-style: normal; font-size: .85em; }
.res-section input,
.res-section select,
.res-section textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .65rem .85rem;
  font: 400 .95rem/1.4 var(--font-body);
  color: var(--ink);
  transition: border-color var(--t-quick);
}
.res-section input:focus,
.res-section select:focus,
.res-section textarea:focus { outline: none; border-color: var(--accent); }
.res-section input[readonly] { background: var(--bg-deep); color: var(--ink-soft); cursor: not-allowed; }
.res-section .field--wide { grid-column: 1 / -1; }

.res-checkgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .4rem;
}
.chip-check {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .8rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  background: var(--bg);
  font-size: .88rem;
  color: var(--ink);
  transition: border-color var(--t-quick), background var(--t-quick);
}
.chip-check input { accent-color: var(--accent); }
.chip-check:hover { border-color: var(--accent); }
.chip-check:has(input:checked) { border-color: var(--ink); background: var(--bg-deep); font-weight: 500; }

.res-dialog__foot {
  display: flex;
  gap: .5rem;
  padding: 1rem 1.5rem;
  border-block-start: 1px solid var(--rule);
  background: var(--bg);
  position: sticky;
  bottom: 0;
  z-index: 2;
}

.admin-search__input {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .55rem .85rem;
  font: 400 .9rem/1.4 var(--font-body);
  color: var(--ink);
  min-width: 14rem;
}

/* Calendar dot variant for reservations (outlined, larger) */
.admin-cal .dot--reservation {
  width: .8rem;
  height: .8rem;
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px currentColor;
}
.admin-cal .dot--reservation.dot--confirmed { background: #2e7d32; color: #2e7d32; }
.admin-cal .dot--reservation.dot--deposited { background: #e0a106; color: #e0a106; }
.admin-cal .dot--reservation.dot--enquiry   { background: var(--accent); color: var(--accent); }
.admin-cal .dot--reservation.dot--cancelled { background: #b3261e; color: #b3261e; }
.admin-cal .dot--reservation.dot--completed { background: var(--ink-soft); color: var(--ink-soft); }

/* ---- Calendar view ---- */
.admin-cal__title {
  margin: 0;
  font: 500 var(--step-2)/1 var(--font-display);
  color: var(--ink);
}
.admin-cal__nav {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--bg);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--t-quick);
}
.admin-cal__nav:hover { border-color: var(--ink); }
.admin-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.admin-cal__weekday {
  background: var(--bg-deep);
  padding: .65rem;
  text-align: center;
  font: 500 .72rem/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.admin-cal__day {
  background: var(--bg);
  min-height: 5rem;
  padding: .5rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  position: relative;
  cursor: default;
}
.admin-cal__day--blank { background: var(--bg-deep); }
.admin-cal__day--has { cursor: pointer; transition: background var(--t-quick); }
.admin-cal__day--has:hover { background: var(--bg-deep); }
.admin-cal__num {
  font: 500 .9rem/1 var(--font-body);
  color: var(--ink);
}
.admin-cal .dot {
  display: inline-block;
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: var(--accent);
  margin-inline-end: .15rem;
}
.dot--new { background: var(--accent); }
.dot--approved { background: #2e7d32; }
.dot--suggested { background: #e0a106; }
.dot--declined { background: #b3261e; }
.dot--handled { background: var(--ink-soft); }
.admin-cal__legend {
  margin-block-start: 1rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .82rem;
  color: var(--ink-soft);
}
.admin-cal__legend .dot {
  display: inline-block;
  width: .65rem;
  height: .65rem;
  border-radius: 999px;
  margin-inline-end: .35rem;
  vertical-align: middle;
}

/* ---- Settings ---- */
.admin-settings { display: grid; gap: 1.5rem; max-width: 44rem; margin-inline: auto; }
.admin-settings h2 { margin: 0; font-size: var(--step-3); }
.admin-settings__card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.admin-settings__card h3 {
  margin: 0 0 .75rem;
  font: 500 var(--step-1)/1.2 var(--font-display);
  color: var(--ink);
}
.admin-settings__card p { color: var(--ink-soft); font-size: .9rem; }
.admin-kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .4rem 1rem;
  margin: 0 0 1rem;
  font-size: .9rem;
}
.admin-kv dt { color: var(--ink-soft); }
.admin-kv dd {
  margin: 0;
  color: var(--ink);
  font: 500 .9rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.admin-settings__result {
  margin-block-start: .75rem;
  font-size: .9rem;
  color: var(--ink);
}
.admin-settings__result[data-ok="1"] { color: #2e7d32; }
.admin-settings__result[data-ok="0"] { color: #b3261e; }

/* ---- Mobile: sidebar -> bottom nav (iOS-style), header stays compact ---- */
@media (max-width: 720px) {
  .admin-app {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header"
      "main"
      "sidebar";
  }
  .admin-bar__brand { min-width: 0; }
  .admin-sidebar {
    flex-direction: row;
    gap: 0;
    padding: 0;
    border-inline-end: none;
    border-block-start: 1px solid var(--rule);
    padding-block-end: env(safe-area-inset-bottom);
  }
  .admin-tab {
    flex: 1;
    flex-direction: column;
    gap: .25rem;
    padding: .65rem .25rem;
    font-size: .72rem;
    letter-spacing: 0;
    text-align: center;
    border-radius: 0;
    border: none;
  }
  .admin-tab.is-active {
    border-color: transparent;
    background: transparent;
    color: var(--accent-deep);
  }
  .admin-tab svg { width: 22px; height: 22px; }
  .admin-tab__count {
    position: absolute;
    top: .35rem;
    right: 50%;
    transform: translateX(180%);
    min-width: 1.1rem;
    height: 1.1rem;
    font-size: .64rem;
  }
  .admin-cards { grid-template-columns: 1fr; }
  .admin-cal__day { min-height: 3.5rem; padding: .35rem; font-size: .85rem; }
}

/* ---------- /book/ — visit + call-back booking flow ---------- */
.booking-section { padding-block-start: clamp(2rem, 1.5rem + 1vw, 3rem); }

.booking-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-block-end: clamp(2rem, 1.5rem + 1vw, 3rem);
}
@media (max-width: 640px) { .booking-tabs { grid-template-columns: 1fr; } }
.booking-tab {
  text-align: start;
  display: grid;
  gap: .35rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--ink);
  transition: border-color var(--t-quick), background var(--t-quick), transform var(--t-quick);
}
.booking-tab:hover { border-color: var(--accent); transform: translateY(-1px); }
.booking-tab.is-active {
  border-color: var(--ink);
  background: var(--bg);
  box-shadow: var(--shadow);
}
.booking-tab__eyebrow {
  font: 500 .72rem/1 var(--font-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.booking-tab__title { font: 500 var(--step-2)/1.2 var(--font-display); color: var(--ink); }
.booking-tab__hint  { font-size: .9rem; color: var(--ink-soft); }
[lang="ar"] .booking-tab__eyebrow { letter-spacing: .04em; text-transform: none; font-size: .82rem; }

.booking-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
@media (max-width: 720px) { .booking-form { grid-template-columns: 1fr; } }
.booking-form[hidden] { display: none; }

/* Chip-style radio for time slots */
.booking-slots {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.booking-slots legend {
  font: 500 .78rem/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0;
  margin-block-end: .25rem;
}
[lang="ar"] .booking-slots legend { letter-spacing: 0; text-transform: none; font-size: .92rem; }
.booking-slots__hint {
  font-size: .85rem;
  color: var(--ink-soft);
  margin: 0 0 .25rem;
}
.chip-radio {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .7rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: .95rem;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--t-quick), background var(--t-quick);
  width: fit-content;
}
.chip-radio:hover { border-color: var(--accent); }
.chip-radio input { accent-color: var(--accent); margin: 0; }
.chip-radio:has(input:checked) {
  border-color: var(--ink);
  background: var(--bg-deep);
}
/* Fallback for browsers without :has() */
.chip-radio input:checked + span { font-weight: 500; }

.booking-submit {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: #25D366;          /* WhatsApp green */
  border-color: #25D366;
  color: white;
}
.booking-submit:hover {
  background: #1ebe57;
  border-color: #1ebe57;
  color: white;
}
.booking-submit svg { flex-shrink: 0; }
.booking-submit:disabled {
  background: var(--ink-soft);
  border-color: var(--ink-soft);
  cursor: wait;
}

/* Success state shown after a successful Telegram submission */
.booking-success {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(2rem, 1.5rem + 3vw, 4rem) 1rem;
  gap: 1rem;
  color: var(--ink);
}
.booking-success svg {
  color: #25D366;
  background: color-mix(in oklab, #25D366 15%, transparent);
  border-radius: 999px;
  padding: 12px;
  width: 64px;
  height: 64px;
}
.booking-success h3 {
  font: 500 var(--step-3)/1.2 var(--font-display);
  color: var(--ink);
  margin: 0;
}
.booking-success p {
  max-width: 36ch;
  color: var(--ink-soft);
  margin: 0;
}

.booking-reassurance {
  margin-block-start: clamp(2rem, 1.5rem + 1vw, 3rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--rule);
}
@media (max-width: 720px) { .booking-reassurance { grid-template-columns: 1fr; } }
.booking-reassurance li {
  color: var(--ink-soft);
  font-size: .95rem;
}
.booking-reassurance strong {
  display: block;
  color: var(--ink);
  margin-block-end: .15rem;
}

/* ---------- The Space: hero strip + photo grid ---------- */
.space-hero {
  margin: 0;
  width: 100%;
  height: clamp(280px, 40vh, 480px);
  overflow: hidden;
  border-block-end: 1px solid var(--rule);
}
.space-hero picture,
.space-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.space-set-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 820px) { .space-set-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .space-set-grid { grid-template-columns: 1fr; } }

.space-set-item {
  margin: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
  display: grid;
  grid-template-rows: auto auto;
}
.space-set-item picture,
.space-set-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.space-set-item:hover img { transform: scale(1.03); }
.space-set-item figcaption {
  padding: .85rem 1rem;
  font: 500 .82rem/1.3 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-block-start: 1px solid var(--rule);
}
[lang="ar"] .space-set-item figcaption {
  letter-spacing: 0;
  text-transform: none;
  font-size: .95rem;
}

/* ---------- Page header (sub-pages) ---------- */
.page-head {
  padding-block: clamp(5rem, 4rem + 4vw, 8rem) clamp(2rem, 1.5rem + 2vw, 4rem);
  border-block-end: 1px solid var(--rule);
}
.page-head h1 { max-width: 18ch; }

/* ---------- Gallery page: filters ---------- */
.gallery-page { padding-block-start: clamp(2.5rem, 2rem + 2vw, 4rem); }

.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-block-end: clamp(2rem, 1.5rem + 1vw, 3rem);
  padding-block-end: 1.25rem;
  border-block-end: 1px solid var(--rule);
}
.filter {
  font: 500 .82rem/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: .65rem 1.1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: color var(--t-quick), border-color var(--t-quick), background var(--t-quick);
}
.filter:hover { color: var(--ink); border-color: var(--rule); }
.filter.is-active {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--bg);
}
[lang="ar"] .filter { letter-spacing: 0; text-transform: none; font-size: .92rem; }

/* ---------- Gallery page: grid ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
}
@media (max-width: 820px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .gallery-grid { grid-template-columns: 1fr; } }

.gallery-item {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
  background: var(--bg-deep);
  cursor: zoom-in;
  transition: transform var(--t-quick), opacity var(--t-med);
}
.gallery-item:hover { transform: translateY(-2px); }
.gallery-item.is-hidden { display: none; }
.gallery-item img,
.gallery-item > .ph,
.gallery-item picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
  display: block;
}
.gallery-item:hover img { transform: scale(1.03); }

/* Placeholder palettes — same brand-warm gradients used in the home preview tiles. */
.ph { display: block; }
.ph--1 { background: linear-gradient(135deg, #4a3f33, #2a2520); }
.ph--2 { background: linear-gradient(135deg, #c9b48d, #8a7556); }
.ph--3 { background: linear-gradient(135deg, #8d7a5a, #4a3f33); }
.ph--4 { background: linear-gradient(135deg, #d4c4a4, #a59175); }
.ph--5 { background: linear-gradient(135deg, #6a5a48, #3a3025); }
.ph::after {
  content: "Photo placeholder";
  display: grid;
  place-items: center;
  height: 100%;
  font: 500 .68rem/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(247,242,235,.55);
}
[lang="ar"] .ph::after { content: "صورة لاحقًا"; letter-spacing: .04em; text-transform: none; }

.gallery-note {
  margin-block-start: clamp(2rem, 1.5rem + 1vw, 3rem);
  font-size: .9rem;
  color: var(--ink-soft);
  text-align: center;
}
.gallery-note code {
  font: 500 .82rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--bg-deep);
  padding: .2rem .45rem;
  border-radius: 3px;
}

/* ---------- The Space: specs strip ---------- */
.specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
@media (max-width: 720px) { .specs { grid-template-columns: repeat(2, 1fr); } }
.spec {
  background: var(--bg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) 1rem;
  text-align: center;
  display: grid;
  gap: .5rem;
  align-content: center;
}
.spec__num {
  font-size: var(--step-4);
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1;
}
.spec__label {
  font: 500 .82rem/1.4 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.spec__label em { font-style: normal; opacity: .6; letter-spacing: 0; text-transform: none; }
[lang="ar"] .spec__label { letter-spacing: 0; text-transform: none; font-size: .92rem; }
.specs-note {
  margin-block-start: 1.25rem;
  font-size: .85rem;
  color: var(--ink-soft);
  text-align: center;
}
.specs-note code {
  font: 500 .8rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--bg-deep);
  padding: .2rem .45rem;
  border-radius: 3px;
}

/* ---------- The Space: layouts ---------- */
.layouts { gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.layout { display: grid; gap: 1rem; }
.layout__diagram {
  aspect-ratio: 4 / 3;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: grid;
  place-items: center;
}
.layout__sketch {
  width: 100%;
  height: 100%;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .55;
}
/* Banquet: round tables in a grid */
.layout__sketch--banquet {
  background-image:
    radial-gradient(circle, var(--accent-deep) 8px, transparent 9px),
    radial-gradient(circle, var(--accent-deep) 8px, transparent 9px),
    radial-gradient(circle, var(--accent-deep) 8px, transparent 9px),
    radial-gradient(circle, var(--accent-deep) 8px, transparent 9px),
    radial-gradient(circle, var(--accent-deep) 8px, transparent 9px),
    radial-gradient(circle, var(--accent-deep) 8px, transparent 9px);
  background-position: 25% 30%, 50% 30%, 75% 30%, 25% 70%, 50% 70%, 75% 70%;
  background-size: 24px 24px;
}
/* Theatre: rows of seats */
.layout__sketch--theatre {
  background-image: repeating-linear-gradient(
    180deg,
    var(--accent-deep) 0 2px,
    transparent 2px 14px
  );
  background-size: 70% 70%;
}
/* Cocktail: scattered dots */
.layout__sketch--cocktail {
  background-image:
    radial-gradient(circle, var(--accent-deep) 6px, transparent 7px),
    radial-gradient(circle, var(--accent-deep) 6px, transparent 7px),
    radial-gradient(circle, var(--accent-deep) 6px, transparent 7px),
    radial-gradient(circle, var(--accent-deep) 6px, transparent 7px),
    radial-gradient(circle, var(--accent-deep) 6px, transparent 7px);
  background-position: 20% 25%, 65% 30%, 35% 60%, 80% 65%, 50% 85%;
  background-size: 16px 16px;
}
.layout h3 { color: var(--ink); margin: 0; }

/* ---------- The Space: amenities list ---------- */
.amenities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 2.5rem;
  border-block-start: 1px solid var(--rule);
  padding-block-start: 1.5rem;
}
@media (max-width: 720px) { .amenities { grid-template-columns: 1fr; } }
.amenities li {
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--accent);
  color: var(--ink-soft);
}
.amenities li strong { color: var(--ink); display: block; margin-block-end: .15rem; }

/* ---------- Contact: method cards ---------- */
.contact-methods {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 980px) { .contact-methods { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .contact-methods { grid-template-columns: 1fr; } }
.contact-card {
  display: grid;
  gap: .35rem;
  padding: 1.5rem 1.25rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink);
  transition: border-color var(--t-quick), transform var(--t-quick), background var(--t-quick);
}
.contact-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  background: var(--bg-deep);
}
.contact-card__label {
  font: 500 .78rem/1 var(--font-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.contact-card__value { font: 500 var(--step-2)/1.2 var(--font-display); color: var(--ink); }
.contact-card__hint { font-size: .85rem; color: var(--ink-soft); }
[lang="ar"] .contact-card__label { letter-spacing: .04em; text-transform: none; }

/* ---------- Contact: address list ---------- */
.address-list {
  margin: 0;
  padding: 0;
}
.address-list li + li { margin-block-start: .5rem; }
.address-list li { color: var(--ink-soft); }
.address-list strong { color: var(--ink); margin-inline-end: .35rem; }
.address-list em { color: var(--accent-deep); font-style: normal; }

/* ---------- Contact: form ---------- */
.contact-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
@media (max-width: 720px) { .contact-form { grid-template-columns: 1fr; } }
.field { display: grid; gap: .4rem; }
.field--wide { grid-column: 1 / -1; }
.field label {
  font: 500 .78rem/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
[lang="ar"] .field label { letter-spacing: 0; text-transform: none; font-size: .92rem; }
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  /* 16px floor prevents iOS Safari from auto-zooming on focus. */
  font: 400 max(16px, var(--step-0))/1.4 var(--font-body);
  color: var(--ink);
  transition: border-color var(--t-quick), background var(--t-quick);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
}
.field textarea { resize: vertical; min-height: 7rem; }
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  justify-content: space-between;
}
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.form-note {
  font-size: .85rem;
  color: var(--ink-soft);
  margin: 0;
  max-width: 40ch;
}

/* ---------- Long-form prose (privacy, future legal pages) ---------- */
.prose {
  max-width: 62ch;
  margin-inline: auto;
}
.prose h2 {
  font: 500 var(--step-2)/1.25 var(--font-display);
  color: var(--ink);
  letter-spacing: -.005em;
  margin-block: 2.25rem .5rem;
}
.prose h2:first-child { margin-block-start: 0; }
.prose p { color: var(--ink-soft); line-height: 1.75; }
.prose p + p { margin-block-start: 1rem; }
.prose a { color: var(--accent-deep); border-block-end: 1px solid var(--rule); transition: border-color var(--t-quick), color var(--t-quick); }
.prose a:hover { color: var(--ink); border-block-end-color: var(--accent); }
.prose code {
  font: 500 .85rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--bg-deep);
  padding: .15rem .4rem;
  border-radius: 3px;
}
.prose hr {
  border: 0;
  border-block-start: 1px solid var(--rule);
  margin-block: 2.5rem;
}
.prose__note {
  color: var(--ink-soft) !important;
  font-size: .9rem;
  background: var(--bg-deep);
  border-inline-start: 3px solid var(--accent);
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: rgba(20, 22, 20, .92);
  padding: clamp(1rem, 1rem + 2vw, 3rem);
  opacity: 0;
  transition: opacity var(--t-med);
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox__stage {
  margin: 0;
  max-width: min(90vw, 1400px);
  max-height: 86vh;
  display: grid;
  gap: .75rem;
}
.lightbox__stage img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 2px;
}
.lightbox__stage figcaption {
  color: rgba(247,242,235,.7);
  font: 400 .85rem/1.4 var(--font-body);
  text-align: center;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: rgba(247,242,235,.08);
  color: var(--bg);
  border: 1px solid rgba(247,242,235,.18);
  border-radius: 999px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  transition: background var(--t-quick), border-color var(--t-quick);
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(247,242,235,.18); border-color: rgba(247,242,235,.4); }
.lightbox__close { inset-block-start: 1.25rem; inset-inline-end: 1.25rem; }
.lightbox__nav--prev { inset-inline-start: 1.25rem; inset-block-start: 50%; transform: translateY(-50%); }
.lightbox__nav--next { inset-inline-end: 1.25rem; inset-block-start: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
  .lightbox__nav--prev { inset-block-start: auto; inset-block-end: 1.25rem; transform: none; }
  .lightbox__nav--next { inset-block-start: auto; inset-block-end: 1.25rem; transform: none; }
}

/* ---------- Motion / scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--t-slow), transform var(--t-slow);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* When GSAP is loaded and driving animations, suppress the CSS-based reveal
   transition so the swap is clean and GSAP owns the timing. Elements will be
   shown via GSAP's inline styles (or by the safety timeout if scroll never
   reaches them). */
html.gsap-active .reveal {
  transition: none;
}

/* ---------- Lenis smooth scroll integration ---------- */
html.lenis-active { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__media { animation: none; }
  /* When motion is reduced, the video poster shows instead of playback */
  video.hero__media { display: none; }
  .hero::before { background-image: var(--reduced-motion-hero, none); }
}

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