/* Luxor Orient — site stylesheet. Calm, typographic, no template chrome. */

:root {
  --green-ink: #1a2e22;
  --green: #243d2e;
  --green-mid: #3c5746;
  --sand-0: #f7f3eb;
  --sand-1: #efe6d8;
  --sand-2: #e0d2be;
  --paper: #fbf8f2;
  --white: #fffcf7;
  --date: #6a3a22;
  --date-deep: #4a2716;
  --bronze: #8a6a3e;
  --bronze-soft: #a4895c;
  --text: #2a2118;
  --muted: #5c564d;
  --line: #d8cebf;
  --focus: #8a6a3e;
  --serif: "Cormorant Garamond", "EB Garamond", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --sans: "Source Sans 3", "Source Sans Pro", "Segoe UI", Calibri, "Helvetica Neue", Arial, sans-serif;
  --measure: 38rem;
  --measure-wide: 44rem;
  --page: 72rem;
  --gutter: clamp(1.25rem, 4vw, 2.75rem);
  --radius: 2px;
  --header-h: 4.35rem;
}

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

html {
  scroll-behavior: smooth;
  hanging-punctuation: first last;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  background: var(--paper);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
svg { display: block; }
a { color: var(--green); text-underline-offset: 0.18em; }
a:hover { color: var(--date); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.18;
  color: var(--green-ink);
  text-wrap: balance;
  margin: 0 0 0.7em;
}

h1 { font-size: clamp(2.35rem, 4.8vw, 3.65rem); letter-spacing: -0.015em; margin-bottom: 0.45em; }
h2 { font-size: clamp(1.7rem, 2.8vw, 2.35rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.55rem); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  background: var(--green-ink);
  color: var(--sand-0);
  padding: 0.4rem 0.8rem;
  z-index: 100;
}
.skip:focus { top: 0.5rem; }

.kicker {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze);
  margin: 0 0 0.85rem;
}

.lead {
  font-size: 1.2rem;
  line-height: 1.55;
  max-width: var(--measure-wide);
  color: var(--text);
}

.muted, .caption {
  color: var(--muted);
}
.caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.45;
  margin-top: 0.65rem;
  max-width: 50rem;
}

.placeholder {
  border-bottom: 1px dashed var(--bronze);
  background: var(--sand-1);
  padding: 0 0.2em;
  color: var(--date-deep);
}

/* Layout */
.wrap {
  width: min(var(--page), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.narrow { width: min(var(--measure-wide), 100%); }

.section {
  padding: clamp(3rem, 7vw, 5.5rem) 0;
}

.section-tight { padding: clamp(2rem, 5vw, 3.5rem) 0; }

.band-sand { background: var(--sand-0); }
.band-green {
  background: var(--green-ink);
  color: var(--sand-0);
}
.band-green h2, .band-green h3 { color: var(--sand-0); }
.band-green .kicker { color: var(--bronze-soft); }
.band-green .lead,
.band-green p { color: #e4dccf; }
.band-green a { color: var(--sand-1); }
.band-green a:hover { color: #fff; }

hr.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.5rem 0;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 248, 242, 0.94);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: var(--header-h);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--green-ink);
  min-width: 0;
}
.logo:hover { color: var(--green-ink); }
.logo-mark {
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 auto;
  color: var(--green-ink);
}
.logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.logo-name {
  font-family: "Cinzel", "Cormorant Garamond", "Palatino Linotype", Palatino, "Times New Roman", serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
}
.logo-tag {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.18rem;
}

.nav-toggle {
  display: none;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
  font-size: 0.98rem;
  padding: 0.2rem 0;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover { color: var(--green); }
.site-nav a[aria-current="page"] {
  color: var(--green-ink);
  border-bottom-color: var(--bronze);
}

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 0.7rem 1.15rem;
  border-radius: var(--radius);
  border: 1px solid var(--green-ink);
  background: var(--green-ink);
  color: var(--sand-0);
  cursor: pointer;
  line-height: 1.2;
}
.btn:hover {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}
.btn-ghost {
  background: transparent;
  color: var(--green-ink);
}
.btn-ghost:hover {
  background: var(--sand-1);
  color: var(--green-ink);
  border-color: var(--green-ink);
}
.btn-light,
.band-green .btn-light {
  background: var(--sand-0);
  color: var(--green-ink);
  border-color: var(--sand-0);
}
.btn-light:hover,
.band-green .btn-light:hover {
  background: var(--white);
  color: var(--green-ink);
  border-color: var(--white);
}
.band-green .btn-ghost {
  color: var(--sand-0);
  border-color: #cbbfaa;
  background: transparent;
}
.band-green .btn-ghost:hover {
  background: rgba(247, 243, 235, 0.12);
  color: #fff;
  border-color: var(--sand-0);
}
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; margin-top: 1.5rem; }

/* Figures */
figure { margin: 0; }
figure img {
  width: 100%;
  object-fit: cover;
  background: var(--sand-1);
}
.hero-photo img {
  aspect-ratio: 16 / 9;
  max-height: 72vh;
  object-fit: cover;
  object-position: center 55%;
}
.frame {
  border: 1px solid var(--line);
  background: var(--sand-1);
}

/* Intro / hero typographic */
.intro {
  padding: clamp(2.75rem, 8vw, 5.75rem) 0 clamp(2rem, 4vw, 3rem);
}
.intro .lead { font-size: clamp(1.15rem, 2vw, 1.28rem); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.split.top { align-items: start; }
.split-text { max-width: 36rem; }
.split img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 2rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.fact h3 {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  color: var(--green-ink);
}
.fact p { color: var(--muted); font-size: 1rem; }

/* Product teaser grid */
.products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
}
.products-3 {
  grid-template-columns: repeat(3, 1fr);
}
.product-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.product-card img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}
.product-card h3 {
  margin: 0.9rem 0 0.35rem;
  font-size: 1.45rem;
}
.product-card p { color: var(--muted); font-size: 1rem; }
.product-card:hover h3 { color: var(--date); }

/* Product page blocks */
.product-block {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 3.25rem) 0;
  border-top: 1px solid var(--line);
}
.product-block:first-of-type { border-top: 0; padding-top: 0; }
.product-block.reverse { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
.product-block.reverse .product-copy { order: -1; }
.product-block img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}
.product-block .kicker { margin-bottom: 0.5rem; }

/* Page header */
.page-head {
  padding: clamp(2.4rem, 6vw, 4.2rem) 0 0.5rem;
}
.page-head .lead { margin-top: 0.4rem; }

/* Contact / forms */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
dl.contact-list { margin: 0 0 1.5rem; }
.contact-list dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze);
  margin: 1.1rem 0 0.2rem;
}
.contact-list dt:first-child { margin-top: 0; }
.contact-list dd { margin: 0; }

form.inquiry {
  display: grid;
  gap: 0.9rem;
}
.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field label { font-weight: 600; font-size: 0.92rem; }
.field .hint { font-weight: 400; color: var(--muted); font-size: 0.85rem; }
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  font: inherit;
  color: inherit;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.6rem 0.7rem;
  width: 100%;
}
textarea { min-height: 9rem; resize: vertical; }
.form-note { font-size: 0.9rem; color: var(--muted); margin-top: 0.4rem; }

.map-block { margin-top: 2.5rem; }
.map-block img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* Legal pages */
.legal {
  padding-bottom: clamp(3rem, 7vw, 5rem);
}
.legal h2 { margin-top: 2rem; font-size: 1.55rem; }
.legal ul, .legal ol { padding-left: 1.2rem; }
.legal li { margin-bottom: 0.4rem; }

/* Footer */
.site-footer {
  background: var(--green-ink);
  color: #d9d3c7;
  padding: 3rem 0 1.75rem;
  font-size: 0.95rem;
  line-height: 1.55;
}
.site-footer a { color: #efe6d8; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem 2.5rem;
}
.footer-brand .logo-name { color: var(--sand-0); font-size: 1.45rem; }
.footer-brand .logo { color: var(--sand-0); margin-bottom: 0.85rem; }
.footer-brand .logo-tag { color: #b8b0a2; }
.site-footer h2 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze-soft);
  margin: 0 0 0.7rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0.25rem 0; }
.footer-bottom {
  margin-top: 2.25rem;
  padding-top: 1.15rem;
  border-top: 1px solid #365043;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  font-size: 0.85rem;
  color: #b8b0a2;
}

/* Credits list */
.credits dt { font-weight: 650; margin-top: 1rem; color: var(--green-ink); }
.credits dd { margin: 0 0 0.35rem; color: var(--muted); }

/* Mobile */
@media (max-width: 860px) {
  .split,
  .split.reverse,
  .product-block,
  .product-block.reverse,
  .contact-grid,
  .footer-grid,
  .facts {
    grid-template-columns: 1fr;
  }
  .product-block.reverse .product-copy { order: 0; }
  .facts { gap: 1.25rem; }
  .products,
  .products-3 { grid-template-columns: 1fr; }
  .hero-photo img { aspect-ratio: 4 / 3; max-height: none; }

  .nav-toggle {
    display: block;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--green-ink);
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius);
    cursor: pointer;
  }
  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gutter) 1rem;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { display: block; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
  .header-inner { position: relative; }
}

@media (min-width: 861px) {
  body { font-size: 18px; }
  .site-nav { display: block !important; }
}

/* Print */
@media print {
  .site-header, .site-footer, .btn, .skip, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: inherit; text-decoration: underline; }
  .hero-photo img { max-height: 8cm; }
}

/* Small typographic helpers */
.small { font-size: 0.92rem; color: var(--muted); }
.stack-sm > * + * { margin-top: 0.75rem; }
address { font-style: normal; }

/* Status badges and product specs */
.badge {
  display: inline-block;
  width: fit-content;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.22rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 0 0 0.7rem;
  color: var(--green-ink);
  background: var(--sand-1);
}
.badge-now {
  background: var(--green-ink);
  color: var(--sand-0);
  border-color: var(--green-ink);
}
.badge-soon {
  background: transparent;
  color: var(--bronze);
  border-color: var(--sand-2);
}
.product-card .badge { margin-bottom: 0.15rem; margin-top: 0.85rem; }
.product-card .badge + h3 { margin-top: 0.35rem; }

.specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 2rem;
  margin: 2rem 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.specs h3 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 0.45rem;
  color: var(--bronze);
}
.specs p { font-size: 1rem; color: var(--text); }

.lead-space { margin-bottom: 2rem; }

@media (max-width: 860px) {
  .specs { grid-template-columns: 1fr; gap: 1.2rem; }
}

@media (max-width: 1040px) and (min-width: 861px) {
  .products-3 { grid-template-columns: 1fr 1fr; }
}

/* —— Hero video stage —— */
/* Bridge between the Luxor temple hero and the Medjool carton section */
.hero-bridge {
  background: var(--sand-0);
  text-align: center;
  padding: clamp(4.25rem, 11vw, 7.5rem) 0 clamp(3.25rem, 8vw, 5.75rem);
  border-bottom: 1px solid var(--line);
}
.hero-bridge-ornament {
  display: block;
  width: min(8.5rem, 42%);
  height: 1px;
  margin: 0 auto 1.55rem;
  background: linear-gradient(90deg, transparent, #c4a36a 14%, #e8c56a 50%, #c4a36a 86%, transparent);
}
.hero-bridge .kicker { margin-bottom: 0.7rem; }
.hero-bridge h2 {
  margin: 0 auto 0.4em;
  max-width: 22em;
}
.hero-bridge .lead {
  margin: 0 auto;
  max-width: 34rem;
  font-size: clamp(1.08rem, 1.8vw, 1.22rem);
  color: var(--muted);
}

.hero-stage { margin: 0; }

.hero-media {
  position: relative;
  overflow: hidden;
  background: var(--green-ink);
  aspect-ratio: 16 / 9;
  max-height: 78vh;
}
.hero-media video,
.hero-media .hero-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hero-media .hero-fallback {
  z-index: 1;
  transition: opacity 0.5s ease;
}
.hero-media.is-playing .hero-fallback { opacity: 0; pointer-events: none; }
.hero-stage .caption { padding: 0.7rem 0 0; }

/* Contained still of the Medjool carton (source is a small owner photo;
   do not use as a full-bleed / cover background — it looks washed-out). */
.hero-bridge:has(+ .hero-stage-photo) {
  border-bottom: 0;
  padding-bottom: clamp(1.6rem, 4vw, 2.6rem);
}
.hero-stage-photo {
  background: var(--sand-0);
  padding: 0 0 clamp(2.25rem, 5vw, 3.75rem);
}
.hero-stage-photo .photo-feature {
  max-width: 22.5rem;
  margin: 0 auto;
  background: var(--sand-1);
}
@media (min-width: 860px) {
  .hero-stage-photo .photo-feature { max-width: 24rem; }
}
.hero-stage-photo .photo-feature img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  display: block;
  background: var(--sand-1);
}
.hero-stage-photo .caption {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 22rem;
  padding-top: 0.7rem;
}
.hero-media.hero-tall { aspect-ratio: 4 / 5; max-height: 86vh; }

/* Ken Burns on still photographs */
.kb-frame {
  overflow: hidden;
  background: var(--sand-1);
}
.kb-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: kenburns 32s ease-in-out alternate infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}
@keyframes kenburns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.07) translate3d(-1.2%, -0.8%, 0); }
}

/* Scroll reveal */
.reveal {
  /* Visible without JS. When JS is running, hide until scrolled into view. */
  transition: opacity 0.75s ease, transform 0.75s ease;
}
html.js .reveal:not(.is-in) {
  opacity: 0;
  transform: translateY(1.1rem);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .kb-frame img { animation: none !important; transform: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Named product chapters */
.product-section {
  padding: clamp(3.25rem, 8vw, 5.75rem) 0;
  border-top: 1px solid var(--line);
}
.product-section.band-sand { border-top-color: transparent; }
.section-name {
  font-size: clamp(2.05rem, 4.4vw, 3.2rem);
  letter-spacing: -0.02em;
  margin: 0 0 0.35em;
}
.section-intro { max-width: var(--measure-wide); margin-bottom: 1.85rem; }
.product-section .split { margin-top: 0.5rem; }

/* Photo gallery (product pages) */
.gallery {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 0.8rem;
  align-items: stretch;
}
.gallery figure { margin: 0; }
.gallery .gallery-lead {
  grid-row: span 2;
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  background: var(--sand-1);
}
.gallery .gallery-lead img { aspect-ratio: 3 / 4; }
.gallery .caption { padding-top: 0.45rem; }
.gallery-4 {
  grid-template-columns: 1fr 1fr;
}
.gallery-4 .gallery-lead {
  grid-column: 1 / -1;
  grid-row: auto;
}
.gallery-4 .gallery-lead img { aspect-ratio: 16 / 10; }

@media (max-width: 860px) {
  .hero-media { aspect-ratio: 4 / 5; max-height: none; }
  .gallery,
  .gallery-4 { grid-template-columns: 1fr; }
  .gallery .gallery-lead { grid-row: auto; }
  .gallery .gallery-lead img,
  .gallery-4 .gallery-lead img { aspect-ratio: 4 / 5; }
}


.gallery-2 {
  grid-template-columns: 1.08fr 0.92fr;
}
.gallery-2 .gallery-lead { grid-row: auto; }
.gallery-2 .gallery-lead img { aspect-ratio: 4 / 5; }
@media (max-width: 860px) {
  .gallery-2 { grid-template-columns: 1fr; }
}


/* —— Logo in header —— */
.logo-mark {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  display: block;
  border-radius: 50%;
}
.logo-mark-img { /* alias */
  width: 2.5rem;
  height: 2.5rem;
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  min-width: 0;
}

/* Language switcher */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}
.lang-switch a {
  text-decoration: none;
  color: var(--muted);
  padding: 0.15rem 0.1rem;
  border-bottom: 1px solid transparent;
}
.lang-switch a:hover { color: var(--green); }
.lang-switch a[aria-current="true"] {
  color: var(--green-ink);
  border-bottom-color: var(--bronze);
}
.lang-switch .sep { color: var(--line); font-weight: 400; }

/* Brand hero — typographic, no stock photography */
.brand-hero {
  position: relative;
  isolation: isolate;
  min-height: min(86vh, 46rem);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--sand-0);
  background: radial-gradient(120% 85% at 50% 18%, #2d4a38 0%, #1a2e22 48%, #101814 100%);
  overflow: hidden;
}
.brand-hero-pattern {
  position: absolute;
  inset: -10%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='280' viewBox='0 0 160 280'><g fill='none' stroke='%23C4A35A' stroke-width='1.1' opacity='0.22'><path d='M80 28 V8'/><circle cx='80' cy='36' r='8'/><circle cx='80' cy='36' r='4.2'/><path d='M80 46 C70 58 68 72 68 88 V200 H92 V88 C92 72 90 58 80 46Z'/><path d='M68 200 H92 L98 214 H62 Z'/><path d='M58 214 H102 V220 H58 Z'/><path d='M54 24 C62 18 80 16 80 16 C80 16 98 18 106 24' stroke-width='0.9'/></g></svg>");
  background-size: 160px 280px;
  opacity: 0.55;
  animation: brandDrift 36s ease-in-out alternate infinite;
  pointer-events: none;
}
@keyframes brandDrift {
  from { transform: scale(1) translate3d(0,0,0); }
  to   { transform: scale(1.07) translate3d(-1.4%, -1%, 0); }
}
.brand-hero-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,16,12,0.62) 0%, rgba(10,16,12,0.28) 45%, rgba(10,16,12,0.38) 100%);
  pointer-events: none;
}
.brand-hero-inner {
  position: relative;
  z-index: 1;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter);
  max-width: 48rem;
}
.brand-hero-logo {
  width: clamp(4.75rem, 12vw, 7rem);
  height: auto;
  margin: 0 auto 1.15rem;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.28));
}
.brand-hero-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.8rem, 7vw, 4.6rem);
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: #f7f3eb;
  margin: 0 0 0.45em;
  text-wrap: balance;
}
.brand-hero-tag {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #d7c49a;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .brand-hero-pattern { animation: none; }
}

/* Intro after a full-bleed hero */
.hero-stage + .intro {
  padding-top: clamp(2.25rem, 5vw, 3.5rem);
}

/* Elegant text card when no owner photo is available */
.text-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 14rem;
  padding: 1.6rem 1.4rem;
  background:
    linear-gradient(180deg, rgba(26,46,34,0.04), rgba(26,46,34,0.02)),
    var(--sand-0);
  border: 1px solid var(--line);
}
.text-card-icon {
  width: 2.4rem;
  height: 2.4rem;
  color: var(--bronze);
  margin-bottom: 0.85rem;
}
.text-card p { color: var(--muted); margin: 0; }

.product-card.no-photo {
  background: var(--sand-0);
  border: 1px solid var(--line);
  padding: 1.35rem 1.25rem 1.5rem;
}
.product-card.no-photo .badge { margin-top: 0; }

.split.text-only {
  grid-template-columns: 1fr;
}
.split.text-only .split-text { max-width: 44rem; }

/* Arabic / RTL */
html[lang="ar"] {
  --serif: "Aref Ruqaa", "Amiri", "Noto Naskh Arabic", serif;
  --sans: "Noto Naskh Arabic", "Amiri", "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  hanging-punctuation: none;
}
html[lang="ar"] body {
  font-family: "Noto Naskh Arabic", "Amiri", sans-serif;
  font-size: 18px;
  line-height: 1.9;
  color: #2a2118;
}
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] .section-name,
html[lang="ar"] .about-tagline,
html[lang="ar"] .kicker,
html[lang="ar"] .logo-tag,
html[lang="ar"] .pack-facts p,
html[lang="ar"] .fact h3 {
  font-family: "Aref Ruqaa", "Amiri", serif;
  letter-spacing: 0;
  text-transform: none;
}
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] .section-name {
  font-weight: 700;
  line-height: 1.45;
}
html[lang="ar"] .kicker,
html[lang="ar"] .logo-tag,
html[lang="ar"] .brand-hero-tag,
html[lang="ar"] .lang-switch {
  letter-spacing: 0;
  text-transform: none;
}
html[lang="ar"] .kicker {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.5;
}
html[lang="ar"] .logo-tag {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
  max-width: 100%;
}
html[lang="ar"] .about-tagline {
  font-weight: 700;
  font-style: normal;
  line-height: 1.6;
}
html[lang="ar"] .logo-name {
  font-family: "Cinzel", "Cormorant Garamond", "Palatino Linotype", Palatino, "Times New Roman", serif;
  font-weight: 700;
}
html[dir="rtl"] .skip {
  left: auto;
  right: var(--gutter);
}
html[dir="rtl"] .site-nav a[aria-current="page"] {
  border-bottom-color: var(--bronze);
}

@media (max-width: 860px) {
  .header-tools { gap: 0.6rem; }
  .lang-switch { font-size: 0.72rem; gap: 0.22rem; }
  .brand-hero { min-height: min(78vh, 36rem); }
  .brand-hero-name { font-size: clamp(2.25rem, 11vw, 3.1rem); }
}
@media print {
  .lang-switch, .brand-hero-pattern { display: none !important; }
}

/* —— Logo mark is a wide emblem, not a circular seal —— */
.logo-mark {
  width: 2.85rem;
  height: 2.45rem;
  border-radius: 0;
  object-fit: contain;
}
.footer-brand .logo-mark {
  width: 2.7rem;
  height: 2.35rem;
  padding: 0.22rem 0.2rem 0.12rem;
  background: #f7f1e3;
  border-radius: 0.4rem;
  box-sizing: content-box;
}

/* Brand hero: cream/sand field so the owner’s dark-green mark stays legible */
.brand-hero {
  color: #14351f;
  background: radial-gradient(120% 90% at 50% 0%, #f7f1e3 0%, #ead9b8 48%, #d7c49a 100%);
}
.brand-hero-pattern {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='200' viewBox='0 0 180 200'><g fill='none' stroke='%2314351F' stroke-width='1' opacity='0.18'><path d='M40 70 L90 18 L140 70 Z'/><path d='M110 78 L148 38 L186 78'/><path d='M20 92 C60 84 100 96 140 88 C160 84 170 86 190 92'/><path d='M20 102 C70 94 110 108 160 100'/><circle cx='100' cy='22' r='14'/></g></svg>");
  background-size: 180px 200px;
  opacity: 0.45;
}
.brand-hero-vignette {
  background: linear-gradient(to top, rgba(20,53,31,0.10) 0%, rgba(20,53,31,0.00) 42%, rgba(255,255,255,0.18) 100%);
}
.brand-hero-name { color: #14351f; }
.brand-hero-tag { color: #8a6a28; }
.brand-hero-logo {
  width: clamp(7.5rem, 18vw, 11.5rem);
  filter: drop-shadow(0 10px 24px rgba(20,53,31,0.12));
}

/* On-screen labels for the two green-onion types in the montage */
.hero-shot-label {
  position: absolute;
  z-index: 2;
  left: 1.1rem;
  bottom: 1.1rem;
  background: rgba(20, 53, 31, 0.82);
  color: #f7f1e3;
  font-family: var(--sans);
  font-weight: 650;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 0.78rem;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(196, 163, 90, 0.5);
  pointer-events: none;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
html[lang="ar"] .hero-shot-label {
  left: auto;
  right: 1.1rem;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--arabic, inherit);
  font-size: 0.95rem;
}
@media (max-width: 860px) {
  .hero-shot-label { left: 0.75rem; bottom: 0.75rem; font-size: 0.72rem; }
  html[lang="ar"] .hero-shot-label { left: auto; right: 0.75rem; }
}

/* Two-type stills + packing facts */
.type-stills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-items: stretch;
}
.type-stills figure { margin: 0; }
.type-stills img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 3 / 4;
}
.type-stills .caption { padding-top: 0.45rem; }
.pack-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.6rem 0 0.8rem;
}
.pack-facts > div {
  background: var(--sand-0, #f7f1e3);
  border: 1px solid var(--line);
  padding: 1.15rem 1.25rem;
  text-align: center;
}
.pack-facts h3 {
  margin: 0 0 0.2rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.pack-facts p {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.45rem;
  color: var(--green-ink);
  line-height: 1.2;
}
@media (max-width: 640px) {
  .type-stills, .pack-facts { grid-template-columns: 1fr; }
}

/* Full, uncropped product photographs — cream field, no cover-cropping */
.still-full img,
.type-stills.still-full img,
.gallery.still-full img,
.gallery.still-full .gallery-lead img {
  object-fit: contain;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  background: var(--sand-0);
  animation: none !important;
  transform: none !important;
}
.type-stills.still-full { align-items: start; }
.still-full .kb-frame,
.gallery.still-full .kb-frame,
.type-stills.still-full .kb-frame {
  overflow: visible;
  background: var(--sand-0);
}
.hero-media.hero-contain {
  background: var(--sand-0);
}
.hero-media.hero-contain .hero-video,
.hero-media.hero-contain .hero-fallback {
  object-fit: contain;
  background: var(--sand-0);
}


/* Honeypot — visually hidden without off-canvas offsets (those expand RTL scroll width) */
.honey {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
  opacity: 0;
}

.form-status {
  margin: 0 0 1rem;
  padding: 0.9rem 1.05rem;
  border-radius: 2px;
  font-size: 0.95rem;
  line-height: 1.45;
}
.form-status.is-ok {
  background: #e7f0e4;
  color: #14351f;
  border: 1px solid #9bb89a;
}
.form-status.is-err {
  background: #f8e8e4;
  color: #6b1d12;
  border: 1px solid #d9a89e;
}
.form-status[hidden] { display: none; }
.inquiry button[disabled] { opacity: 0.65; cursor: wait; }

/* Floating WhatsApp */
.wa-float {
  position: fixed;
  z-index: 40;
  right: 1.15rem;
  bottom: 1.15rem;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(16, 40, 24, 0.28);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wa-float:hover,
.wa-float:focus-visible {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 10px 26px rgba(16, 40, 24, 0.34);
  color: #fff;
}
.wa-float svg { width: 1.7rem; height: 1.7rem; display: block; }
html[lang="ar"] .wa-float {
  right: auto;
  left: 1.15rem;
}
@media (max-width: 640px) {
  .wa-float { right: 0.9rem; bottom: 0.9rem; width: 3.15rem; height: 3.15rem; }
  html[lang="ar"] .wa-float { right: auto; left: 0.9rem; }
}
@media print { .wa-float { display: none !important; } }


/* Contact dock: WhatsApp above, chat launcher below (mirrored in RTL) */
.wa-float {
  right: 1.15rem;
  bottom: 5.45rem;
}
html[lang="ar"] .wa-float {
  right: auto;
  left: 1.15rem;
  bottom: 5.45rem;
}
@media (max-width: 640px) {
  .wa-float { right: 0.9rem; bottom: 5.15rem; }
  html[lang="ar"] .wa-float { right: auto; left: 0.9rem; bottom: 5.15rem; }
}
body.chat-open .wa-float { display: none; }
body.chat-open .chat-launch { z-index: 71; }

.chat-launch {
  position: fixed;
  z-index: 41;
  right: 1.15rem;
  bottom: 1.15rem;
  width: 3.4rem;
  height: 3.4rem;
  border: 0;
  border-radius: 50%;
  background: #14351f;
  color: #f7f1e3;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(16, 40, 24, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.chat-launch:hover,
.chat-launch:focus-visible {
  transform: translateY(-2px) scale(1.04);
  background: #1c4a2c;
}
.chat-launch svg { width: 1.55rem; height: 1.55rem; display: block; }
.chat-launch[aria-expanded="true"] { background: #8a6a28; }
html[lang="ar"] .chat-launch { right: auto; left: 1.15rem; }
@media (max-width: 640px) {
  .chat-launch { right: 0.9rem; bottom: 0.9rem; width: 3.15rem; height: 3.15rem; }
  html[lang="ar"] .chat-launch { right: auto; left: 0.9rem; }
}

.chat-backdrop { display: none; }
.chat-backdrop[hidden] { display: none !important; }

/* Contact popup: sits above the sticky site header (z-index 50), sized to
   its content; only the message area scrolls. JS fine-tunes bottom and
   max-height from the header position and the visual viewport (keyboard). */
.chat-panel {
  position: fixed;
  z-index: 70;
  right: 1.15rem;
  bottom: calc(5.45rem + env(safe-area-inset-bottom, 0px));
  width: min(24rem, calc(100vw - 1.6rem));
  height: auto;
  max-height: calc(100vh - 5.45rem - 6.5rem);
  max-height: calc(100dvh - 5.45rem - 6.5rem - env(safe-area-inset-bottom, 0px));
  background: #f7f1e3;
  color: #14351f;
  border: 1px solid #d7c49a;
  border-radius: 1rem;
  box-shadow: 0 16px 40px rgba(16, 40, 24, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--sans);
  outline: none;
}
html[lang="ar"] .chat-panel { right: auto; left: 1.15rem; }
.chat-panel[hidden] { display: none !important; }
.chat-head {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.35rem 0.35rem 0.35rem 1rem;
  background: #14351f;
  color: #f7f1e3;
  border-bottom: 2px solid #c4a35a;
}
html[lang="ar"] .chat-head { padding: 0.35rem 1rem 0.35rem 0.35rem; }
.chat-head-title {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0;
  line-height: 1.2;
  color: #f7f1e3;
}
html[lang="ar"] .chat-head-title { font-size: 1.25rem; }
.chat-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(215, 196, 154, 0.55);
  background: transparent;
  color: #f7f1e3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}
.chat-close svg { width: 20px; height: 20px; display: block; }
.chat-close:hover,
.chat-close:focus-visible { background: rgba(196, 163, 90, 0.22); border-color: #c4a35a; }
.chat-close:focus-visible { outline: 2px solid #c4a35a; outline-offset: 2px; }
.chat-log {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0.9rem 0.9rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: linear-gradient(180deg, #f3ead6 0%, #f7f1e3 40%);
}
.chat-intro { font-size: 0.92rem; line-height: 1.5; color: #2a2118; }
.chat-intro p { margin: 0 0 0.5rem; }
.chat-intro p:last-child { margin-bottom: 0.2rem; }
.chat-intro .chat-intro-accent { color: #14351f; font-weight: 650; }
.chat-intro .chat-intro-sign {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: #8a6a3e;
  padding-top: 0.45rem;
  border-top: 1px solid #e4d8c0;
}
html[lang="ar"] .chat-intro .chat-intro-sign { font-style: normal; }
.chat-bubble {
  max-width: 92%;
  padding: 0.65rem 0.8rem;
  border-radius: 0.85rem;
  font-size: 0.9rem;
  line-height: 1.45;
  white-space: pre-wrap;
}
.chat-bubble.is-bot {
  align-self: flex-start;
  background: #fff;
  border: 1px solid #e4d8c0;
  border-bottom-left-radius: 0.25rem;
}
html[lang="ar"] .chat-bubble.is-bot { border-bottom-left-radius: 0.85rem; border-bottom-right-radius: 0.25rem; }
.chat-bubble.is-user {
  align-self: flex-end;
  background: #14351f;
  color: #f7f1e3;
  border-bottom-right-radius: 0.25rem;
}
html[lang="ar"] .chat-bubble.is-user { border-bottom-right-radius: 0.85rem; border-bottom-left-radius: 0.25rem; }
.chat-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.15rem 0 0.35rem;
}
.chat-choice {
  min-height: 40px;
  border: 1px solid #c4a35a;
  background: #fff;
  color: #14351f;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
}
.chat-choice:hover,
.chat-choice:focus-visible { background: #14351f; color: #f7f1e3; border-color: #14351f; }
.chat-composer {
  flex: 0 0 auto;
  display: flex;
  gap: 0.4rem;
  align-items: center;
  padding: 0.6rem 0.7rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #e4d8c0;
  background: #fff;
}
.chat-composer[hidden] { display: none !important; }
.chat-composer input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid #d7c49a;
  border-radius: 999px;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  font: inherit;
  font-size: 16px;
  background: #f7f1e3;
  color: #14351f;
}
.chat-composer input:focus { outline: 2px solid #c4a35a; outline-offset: 1px; }
.chat-send, .chat-skip {
  border: 0;
  border-radius: 999px;
  background: #14351f;
  color: #f7f1e3;
  font: inherit;
  min-height: 44px;
  font-size: 0.85rem;
  font-weight: 650;
  padding: 0.5rem 0.95rem;
  cursor: pointer;
  white-space: nowrap;
}
.chat-send:disabled { opacity: 0.55; cursor: wait; }
.chat-skip {
  background: transparent;
  color: #14351f;
  border: 1px solid #d7c49a;
}
.chat-error {
  margin: 0 0.85rem 0.55rem;
  font-size: 0.8rem;
  color: #6b1d12;
}
.chat-error[hidden] { display: none !important; }
@media (max-width: 640px) {
  .chat-panel {
    right: calc(0.5rem + env(safe-area-inset-right, 0px));
    left: calc(0.5rem + env(safe-area-inset-left, 0px));
    width: auto;
    bottom: calc(4.85rem + env(safe-area-inset-bottom, 0px));
    max-height: calc(100vh - 4.85rem - 6.2rem);
    max-height: calc(100svh - 4.85rem - 6.2rem - env(safe-area-inset-bottom, 0px));
  }
  html[lang="ar"] .chat-panel { left: calc(0.5rem + env(safe-area-inset-left, 0px)); right: calc(0.5rem + env(safe-area-inset-right, 0px)); }
  .chat-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 65;
    background: rgba(20, 33, 24, 0.38);
  }
  body.chat-open { overflow: hidden; }
  .chat-panel.is-keyboard .chat-intro { font-size: 0.88rem; }
}
@media print {
  .chat-launch, .chat-panel { display: none !important; }
}


/* —— Homepage Luxor Temple hero —— */
.luxor-hero {
  position: relative;
  isolation: isolate;
  min-height: min(92vh, 58rem);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  background: #1a140c;
  color: #f8f1de;
}
.luxor-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #1a140c;
}
.luxor-hero-media video,
.luxor-hero-media .hero-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 36%;
  display: block;
}
.luxor-hero-media .hero-fallback {
  z-index: 1;
  transition: opacity 0.6s ease;
}
.luxor-hero-media.is-playing .hero-fallback {
  opacity: 0;
  pointer-events: none;
}
.luxor-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 72% at 50% 10%, rgba(6, 4, 2, 0.74) 0%, rgba(6, 4, 2, 0.50) 34%, rgba(6, 4, 2, 0.22) 60%, transparent 80%),
    linear-gradient(
      to bottom,
      rgba(8, 5, 3, 0.74) 0%,
      rgba(8, 5, 3, 0.50) 24%,
      rgba(8, 5, 3, 0.22) 44%,
      rgba(8, 5, 3, 0.06) 62%,
      rgba(8, 5, 3, 0.00) 74%,
      rgba(8, 5, 3, 0.28) 100%
    );
}
.luxor-hero-inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  text-align: center;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(5rem, 14vh, 9rem) var(--gutter) 2rem;
  direction: ltr;
}
.luxor-hero-name {
  font-family: "Cinzel", "Cormorant Garamond", "Palatino Linotype", Palatino, "Times New Roman", serif;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(2.75rem, 8.6vw, 6.875rem); /* 44px → 110px */
  letter-spacing: 0.12em;
  line-height: 0.95;
  text-transform: uppercase;
  color: #fbf6e8;
  margin: 0;
  text-wrap: balance;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.7),
    0 2px 8px rgba(0, 0, 0, 0.62),
    0 8px 28px rgba(0, 0, 0, 0.55),
    0 0 42px rgba(0, 0, 0, 0.4);
}
.luxor-hero-name .luxor-hero-line {
  display: block;
}
.luxor-hero-rule {
  display: block;
  width: min(11.5rem, 52%);
  height: 2px;
  margin: 0.85em auto 0.95em;
  background: linear-gradient(90deg, transparent, #e8c56a 12%, #f6e7b0 50%, #e8c56a 88%, transparent);
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}
.luxor-hero-tag {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.4vw, 1.65rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #f3e2b3;
  margin: 0 auto;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  line-height: 1.3;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.95em;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.95),
    0 2px 4px rgba(0, 0, 0, 0.85),
    0 4px 14px rgba(0, 0, 0, 0.7),
    0 0 18px rgba(0, 0, 0, 0.6),
    0 0 32px rgba(0, 0, 0, 0.45);
}
.luxor-hero-tag::before,
.luxor-hero-tag::after {
  content: "";
  display: block;
  width: clamp(1.75rem, 5.5vw, 3.4rem);
  height: 1px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, transparent, #e8c56a 18%, #f6e7b0 50%, #e8c56a 82%, transparent);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

/* One line on wider screens, two stacked lines on small phones */
@media (min-width: 720px) {
  .luxor-hero-name {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.38em;
    letter-spacing: 0.14em;
    white-space: nowrap;
  }
  .luxor-hero-name .luxor-hero-line { display: inline; }
}

@media (max-width: 860px) {
  .luxor-hero {
    min-height: 0;
    aspect-ratio: 4 / 5;
    max-height: 82vh;
  }
  .luxor-hero-media video,
  .luxor-hero-media .hero-fallback {
    object-position: 50% 28%;
  }
  .luxor-hero-inner {
    padding-top: clamp(2.5rem, 6.5vh, 4.5rem);
  }
  .luxor-hero-name {
    letter-spacing: 0.10em;
  }
  .luxor-hero-rule {
    margin: 0.5em auto 0.55em;
  }
  .luxor-hero-tag {
    letter-spacing: 0.10em;
    gap: 0;
    font-size: clamp(1.1rem, 4.2vw, 1.3rem);
  }
  /* Hairlines would force a wrap on small phones; the gold rule above already frames the line. */
  .luxor-hero-tag::before,
  .luxor-hero-tag::after {
    display: none;
  }
}

/* Keep the English display face even on the Arabic site */
html[lang="ar"] .luxor-hero-name {
  font-family: "Cinzel", "Cormorant Garamond", "Palatino Linotype", Palatino, "Times New Roman", serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
html[lang="ar"] .luxor-hero-tag {
  font-family: "Source Sans 3", "Source Sans Pro", "Segoe UI", Calibri, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
@media (min-width: 720px) {
  html[lang="ar"] .luxor-hero-name { letter-spacing: 0.14em; }
}
@media (max-width: 860px) {
  html[lang="ar"] .luxor-hero-name { letter-spacing: 0.10em; }
  html[lang="ar"] .luxor-hero-tag { letter-spacing: 0.10em; }
}

@media (prefers-reduced-motion: reduce) {
  .luxor-hero-media video { /* JS also pauses */ }
}

/* Header is a clean typographic wordmark (no emblem) */
.logo-name {
  font-family: "Cinzel", "Cormorant Garamond", "Palatino Linotype", Palatino, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: 0.06em;
}

@media print {
  .luxor-hero { min-height: 0; page-break-after: always; }
  .luxor-hero-media video { display: none !important; }
  .luxor-hero-media .hero-fallback { opacity: 1 !important; position: relative; height: auto; }
}

.luxor-hero-media .hero-fallback-mobile { display: none; }
@media (max-width: 860px) {
  .luxor-hero-media .hero-fallback-desktop { display: none; }
  .luxor-hero-media .hero-fallback-mobile { display: block; }
}

/* Closing tagline on the About page */
.about-tagline {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.35rem, 2.5vw, 1.9rem);
  line-height: 1.35;
  color: var(--green-ink);
  text-align: center;
  text-wrap: balance;
  margin: 2.75rem auto 0;
  max-width: 36rem;
}
.about-tagline::before {
  content: "";
  display: block;
  width: min(8.5rem, 42%);
  height: 1px;
  margin: 0 auto 1.35rem;
  background: linear-gradient(90deg, transparent, #c4a36a 14%, #e8c56a 50%, #c4a36a 86%, transparent);
}

/* About page: readable centered column */
.about-page .wrap.narrow {
  width: min(45rem, 100%);
  max-width: 720px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.75rem);
}

.about-page p,
.about-page .lead {
  font-size: 17px;
  line-height: 1.75;
  color: #2a2118;
  font-weight: 500;
}

.about-page .lead {
  max-width: none;
}

.about-page h1 {
  margin-bottom: 0.5em;
  line-height: 1.22;
}

.about-page h2 {
  margin: 0 0 1.2em;
  padding-block: 0.2em 0.15em;
  line-height: 1.28;
  color: var(--green-ink);
}

@media (min-width: 861px) {
  .about-page p {
    font-size: 18px;
  }
  .about-page .lead {
    font-size: 1.2rem;
    line-height: 1.75;
  }
}

html[lang="ar"] .about-page,
html[dir="rtl"] .about-page {
  direction: rtl;
  text-align: right;
}

html[lang="ar"] .about-page .about-tagline,
html[dir="rtl"] .about-page .about-tagline {
  text-align: center;
}

html[lang="ar"] .about-page p,
html[lang="ar"] .about-page .lead {
  font-size: 18px;
  line-height: 1.9;
  font-weight: 400;
}

/* Header / footer gold wordmark */
.logo {
  direction: ltr;
  gap: 0.55rem;
  color: #b8862b;
  min-width: 0;
  flex: 0 1 auto;
}
.logo:hover { color: #9a6b1f; }
.logo::before {
  content: "";
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  background: url("../images/lo-monogram.svg") center / contain no-repeat;
  border-radius: 0.32rem;
}
.logo-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  line-height: 1;
}
.logo-name {
  font-family: "Cinzel", "Cormorant Garamond", "Palatino Linotype", Palatino, "Times New Roman", serif;
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
  color: #b8862b; /* solid gold fallback */
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .logo-name {
    background-image: linear-gradient(90deg, #b8862b 0%, #e6c56a 48%, #9a6b1f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
/* Thin gold hairline between the name and the tag (on the tag, so it is not
   clipped by the name's background-clip:text). */
.logo-tag {
  font-family: var(--sans);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a5f1c;
  margin-top: 0;
  white-space: nowrap;
  line-height: 1.2;
  max-width: none;
}
.logo-tag::before {
  content: "";
  display: block;
  width: 2.7rem;
  height: 1px;
  margin: 0.32em 0 0.3em;
  background: linear-gradient(90deg, #b8862b, #e6c56a, #9a6b1f);
}
html[lang="ar"] .logo-tag {
  font-family: "Aref Ruqaa", "Amiri", serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #8a5f1c;
  white-space: nowrap;
  line-height: 1.35;
}

/* Footer: same gold wordmark on the dark green ground */
.footer-brand .logo { color: #e6c56a; }
.footer-brand .logo::before {
  background-image: url("../images/lo-monogram-footer.svg");
  width: 2.1rem;
  height: 2.1rem;
}
.footer-brand .logo-name {
  font-size: 1.2rem;
  letter-spacing: 0.14em;
  color: #e6c56a;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .footer-brand .logo-name {
    background-image: linear-gradient(90deg, #c9a44a 0%, #f0d78a 48%, #b8862b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
.footer-brand .logo-tag { color: #d4b56a; }

@media (min-width: 861px) {
  .logo::before { width: 2.15rem; height: 2.15rem; }
  .logo-name { font-size: 1.28rem; letter-spacing: 0.14em; }
  .logo-tag { font-size: 0.6rem; letter-spacing: 0.12em; }
  html[lang="ar"] .logo-tag { font-size: 0.72rem; }
}

/* Keep the tag and tools on one line at 390px */
@media (max-width: 860px) {
  .logo { gap: 0.4rem; }
  .logo::before { width: 1.65rem; height: 1.65rem; }
  .logo-name { font-size: 0.98rem; letter-spacing: 0.08em; }
  .logo-tag { font-size: 0.5rem; letter-spacing: 0.065em; }
  html[lang="ar"] .logo-tag { font-size: 0.62rem; letter-spacing: 0; }
  .header-inner { gap: 0.55rem; }
}

/* ========================================================================
   Reference header (cream bar, lotus + hairlines, gold Cinzel name,
   calligraphic swash, dark letter-spaced tag, rounded gold Menü) and
   hero arabesque divider. Footer monogram is left unchanged.
   ======================================================================== */
.site-header {
  background: #fef7ef;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 2px solid #d4a84a;
}

.site-header .header-inner {
  min-height: 0;
  align-items: center;
  padding-top: 0.4rem;
  padding-bottom: 0.45rem;
}

/* Hide the square LO monogram in the header only */
.site-header .logo::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  margin: 0 !important;
}

.site-header .logo {
  direction: ltr;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
  flex: 0 1 auto;
  color: #b8862b;
}

.site-header .logo-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  line-height: 1;
}

/* Lotus palmette with gold hairlines, centered over the name */
.site-header .logo-text::before {
  content: "";
  display: block;
  width: 100%;
  height: 1.5rem;
  margin: 0 0 0.3rem;
  background: url("../images/header-lotus.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

.site-header .logo-name {
  font-family: "Cinzel", "Cormorant Garamond", "Palatino Linotype", Palatino, "Times New Roman", serif;
  font-weight: 700;
  font-size: 1.3125rem; /* 21px — fills the brand area at 390 */
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.05;
  white-space: nowrap;
  color: #b0741c;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .site-header .logo-name {
    background-image: linear-gradient(180deg, #e6c56a 0%, #d4a43a 42%, #9a6b1f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* Dark one-line tag; the swash sits in ::before so it is not clipped by the name */
.site-header .logo-tag {
  font-family: var(--sans);
  font-size: 0.59375rem; /* 9.5px */
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a2e22;
  margin-top: 0;
  white-space: nowrap;
  line-height: 1.2;
  max-width: none;
}

.site-header .logo-tag::before {
  content: "";
  display: block;
  width: 100%;
  height: 0.55rem;
  margin: 0.08em 0 0.28em;
  background: url("../images/header-swash.svg") center / contain no-repeat;
  pointer-events: none;
}

html[lang="ar"] .site-header .logo-tag {
  font-family: "Aref Ruqaa", "Amiri", serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #1a2e22;
  white-space: nowrap;
  line-height: 1.35;
}

/* Language switcher: dark green, no gold underline */
.site-header .lang-switch {
  color: #1a2e22;
  font-weight: 650;
  letter-spacing: 0.02em;
}
.site-header .lang-switch a,
.site-header .lang-switch a:hover,
.site-header .lang-switch a[aria-current="true"] {
  color: #1a2e22;
  border-bottom-color: transparent;
}
.site-header .lang-switch a[aria-current="true"] {
  font-weight: 700;
}
.site-header .lang-switch .sep {
  color: #1a2e22;
}

/* Desktop: larger brand, tools stay on the right with the full nav */
@media (min-width: 861px) {
  .site-header .header-inner {
    padding-top: 0.55rem;
    padding-bottom: 0.6rem;
  }
  .site-header .logo-text::before {
    height: 2.05rem;
    margin-bottom: 0.4rem;
  }
  .site-header .logo-name {
    font-size: 2rem;
    letter-spacing: 0.08em;
  }
  .site-header .logo-tag {
    font-size: 0.72rem;
    letter-spacing: 0.2em;
  }
  .site-header .logo-tag::before {
    height: 0.7rem;
    margin: 0.12em 0 0.38em;
  }
  html[lang="ar"] .site-header .logo-tag {
    font-size: 0.85rem;
  }
  .site-header .header-tools {
    gap: 1.35rem;
  }
  .site-header .lang-switch {
    font-size: 0.82rem;
  }
  .site-header .site-nav a {
    color: #1a2e22;
  }
}

/* Mobile (must fit at 390): compact tools, hamburger + label, rounded gold outline */
@media (max-width: 860px) {
  .site-header .header-inner {
    gap: 0.45rem;
    padding-top: 0.35rem;
    padding-bottom: 0.4rem;
  }
  .site-header .header-tools {
    gap: 0.5rem;
    flex: 0 0 auto;
  }
  .site-header .lang-switch {
    font-size: 0.66rem;
    gap: 0.16rem;
  }
  .site-header .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    direction: ltr;
    gap: 0.35rem;
    border: 1.5px solid #c49a3c;
    background: #fef7ef;
    color: #1a2e22;
    font: inherit;
    font-weight: 650;
    font-size: 0.82rem;
    line-height: 1;
    padding: 0.45rem 0.68rem;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
  }
  .site-header .nav-toggle::before {
    content: "";
    display: block;
    width: 0.95em;
    height: 0.72em;
    flex: 0 0 auto;
    background:
      linear-gradient(currentColor, currentColor) 0 0 / 100% 1.5px no-repeat,
      linear-gradient(currentColor, currentColor) 0 50% / 100% 1.5px no-repeat,
      linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat;
  }
  html[lang="ar"] .site-header .nav-toggle {
    font-family: "Noto Naskh Arabic", "Noto Naskh Arabic VF", "Amiri", serif;
    font-size: 0.78rem;
    padding: 0.4rem 0.55rem;
    gap: 0.28rem;
  }
}

/* Hero: replace the straight gold rule with a small arabesque divider.
   Hero image, name and tag stay as they are. */
.luxor-hero-rule {
  display: block;
  width: min(24rem, 52%);
  height: 2rem;
  margin: 0.5em auto 0.55em;
  background: url("../images/hero-arabesque.svg") center / contain no-repeat;
  box-shadow: none;
}
.luxor-hero-tag::before,
.luxor-hero-tag::after {
  display: none !important;
  content: none !important;
}
@media (max-width: 860px) {
  .luxor-hero-rule {
    width: min(18rem, 92%);
    height: 1.55rem;
    margin: 0.38em auto 0.45em;
  }
}

/* ------------------------------------------------------------------
   Progressive disclosure: "Mehr erfahren" / "Weniger anzeigen"
   Markup: extra text is wrapped in [data-rm] (block .rm-more or inline
   .rm-more.rm-inline). Without JS everything stays visible; the inline
   head snippet adds html.rm-on and js/main.js creates the toggle buttons.
   ------------------------------------------------------------------ */
html.rm-on [data-rm]:not(.rm-open) { display: none; }
.rm-more > p:last-child { margin-bottom: 1em; }
.rm-more.rm-animating { overflow: hidden; transition: height 0.28s ease, opacity 0.28s ease; }
.rm-inline.rm-open { animation: rm-fade 0.28s ease; }
@keyframes rm-fade { from { opacity: 0; } to { opacity: 1; } }

.rm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  margin: -0.35rem 0 0.25rem;
  padding: 0.35rem 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--bronze);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rm-toggle-label {
  padding-bottom: 0.18rem;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  background-image: linear-gradient(90deg, var(--bronze-soft), rgba(164, 137, 92, 0.25));
  transition: color 0.2s ease;
}
.rm-toggle-icon {
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.2rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s ease, margin 0.25s ease;
  flex: none;
}
.rm-toggle[aria-expanded="true"] .rm-toggle-icon { transform: rotate(-135deg); margin-top: 0.25rem; }
.rm-toggle:hover { color: var(--date); }
.rm-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius); }
.band-green .rm-toggle { color: #d9c49b; }
.band-green .rm-toggle:hover { color: var(--sand-0); }
.lead + .rm-toggle { margin-top: -0.5rem; }

@media (prefers-reduced-motion: reduce) {
  .rm-more.rm-animating, .rm-toggle-icon, .rm-toggle-label { transition: none; }
  .rm-inline.rm-open { animation: none; }
}

/* Chat composer: when an alternative ("Lieber per E-Mail", "Ohne E-Mail senden",
   "Überspringen") is offered, the field gets its own row and the two buttons
   sit side by side underneath. */
.chat-composer { flex-wrap: wrap; }
.chat-composer.has-skip .chat-input { flex: 1 1 100%; }
.chat-composer.has-skip .chat-skip { flex: 1 1 auto; }
.chat-composer.has-skip .chat-send { flex: 0 0 auto; }

/* Impressum only (body.page-impressum): compact, wrapping, mobile-friendly */
.page-impressum .impressum h2:first-child { margin-top: 0; }
.page-impressum .impressum h2 {
  margin: 2rem 0 0.6rem;
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.55rem);
  line-height: 1.25;
  overflow-wrap: break-word;
  hyphens: auto;
}
.page-impressum .impressum p { margin: 0 0 0.9rem; line-height: 1.65; }
.page-impressum .impressum p:last-child { margin-bottom: 0; }
.page-impressum .impressum a { overflow-wrap: anywhere; word-break: break-word; }
.page-impressum .impressum-address strong { font-weight: 650; color: var(--green-ink); }
.page-impressum .wrap.narrow { width: min(var(--measure-wide), 100% - var(--gutter) * 2); }
@media (max-width: 640px) {
  .page-impressum .page-head { padding-bottom: 0.25rem; }
  .page-impressum .page-head h1 { margin-bottom: 0; }
  .page-impressum .impressum { padding-top: 1.5rem; padding-bottom: 2.5rem; }
  .page-impressum .impressum h2 { margin-top: 1.6rem; }
  .page-impressum .impressum p { font-size: 1rem; }
  .page-impressum .legal-note { padding-inline: var(--gutter); overflow-wrap: anywhere; }
}
.page-impressum .nowrap { white-space: nowrap; }
@media (max-width: 640px) {
  .page-impressum .page-head { padding-top: 1.75rem; }
  .page-impressum .page-head h1 { font-size: clamp(2rem, 1.4rem + 3vw, 2.5rem); line-height: 1.1; }
  .page-impressum .impressum { padding-top: 1.1rem; padding-bottom: 2rem; }
  .page-impressum .impressum h2 { margin: 1.35rem 0 0.4rem; }
  .page-impressum .impressum p { margin-bottom: 0.65rem; line-height: 1.55; }
}
@media (max-width: 400px) {
  .page-impressum .impressum h2 { font-size: 1.3rem; }
  .page-impressum .impressum p { font-size: 0.97rem; }
}

/* Small screens: keep narrow text columns and the legal note off the screen
   edge (logical properties, so RTL works). No effect on desktop widths. */
@media (max-width: 900px) {
  .wrap.narrow { width: min(var(--measure-wide), 100% - var(--gutter) * 2); }
  .legal-note,
  .page-impressum .legal-note {
    margin-inline: max(var(--gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    padding-inline: 0;
    overflow-wrap: anywhere;
  }
  .site-footer .wrap {
    width: auto;
    margin-inline: 0;
    padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  }
}

/* Phones: Menü button on top, language switch in a small row underneath,
   so the logo keeps the full remaining width and nothing can overlap. */
@media (max-width: 560px) {
  .site-header .header-inner { gap: 0.75rem; }
  .site-header .logo { flex: 1 1 auto; min-width: 0; }
  .site-header .header-tools {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.3rem;
  }
  .site-header .nav-toggle { order: 1; }
  .site-header .lang-switch {
    order: 2;
    font-size: 0.7rem;
    gap: 0.15rem;
    line-height: 1;
  }
  .site-header .lang-switch a { padding: 0.2rem 0.15rem; }
}
@media (max-width: 359px) {
  .site-header .logo-name { font-size: 1.1rem; letter-spacing: 0.04em; }
  .site-header .logo-tag { font-size: 0.5rem; letter-spacing: 0.1em; }
  html[lang="ar"] .site-header .logo-tag { font-size: 0.68rem; letter-spacing: 0; }
  .site-header .logo-text::before { height: 1.25rem; }
}