/* ==========================================================================
   Evana — إيفانا · brand stylesheet
   Palette: burgundy #5F1E2D / #4A1622 · champagne #E9D3AE · beige #EBDFC7
   Mood: evening luxury, ceremony, heavier whitespace, slower feel
   ========================================================================== */

:root {
  --burgundy: #5F1E2D;
  --burgundy-deep: #4A1622;
  --burgundy-black: #3B1019;
  --champagne: #E9D3AE;
  --champagne-bright: #F2E2C4;
  --beige: #EBDFC7;
  --beige-light: #F3EBDA;
  --ink: #3E2A20;
  --line-light: rgba(233, 211, 174, 0.28);
  --line-dark: rgba(95, 30, 45, 0.25);

  --font-ar-display: 'Amiri', serif;
  --font-ar-logo: 'Reem Kufi', 'Amiri', sans-serif;
  --font-ar-body: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --font-en-display: 'Marcellus', Georgia, serif;
  --font-en-body: 'Lora', Georgia, serif;

  --font-display: var(--font-ar-display);
  --font-body: var(--font-ar-body);

  --container: 1120px;
  --ease: cubic-bezier(0.22, 0.6, 0.25, 1);
}

html[lang="en"] {
  --font-display: var(--font-en-display);
  --font-body: var(--font-en-body);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--burgundy);
  color: var(--champagne);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 2;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 3px;
  border-radius: 2px;
}
.section-beige a:focus-visible,
.section-beige-light a:focus-visible,
.section-beige button:focus-visible {
  outline-color: var(--burgundy);
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   Damask texture — tone-on-tone, as printed on the linen packaging
   -------------------------------------------------------------------------- */
.damask-bg {
  position: relative;
  isolation: isolate;
}
.damask-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background-size: 130px 130px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130' viewBox='0 0 130 130'%3E%3Cg fill='none' stroke='rgba(233,211,174,0.10)' stroke-width='1'%3E%3Cpath d='M65 18 C55 34 55 44 65 54 C75 44 75 34 65 18 Z'/%3E%3Cpath d='M65 112 C55 96 55 86 65 76 C75 86 75 96 65 112 Z'/%3E%3Cpath d='M18 65 C34 55 44 55 54 65 C44 75 34 75 18 65 Z'/%3E%3Cpath d='M112 65 C96 55 86 55 76 65 C86 75 96 75 112 65 Z'/%3E%3Ccircle cx='65' cy='65' r='6'/%3E%3Cpath d='M65 26 C61 36 61 44 65 50 C69 44 69 36 65 26 Z'/%3E%3Cpath d='M65 104 C61 94 61 86 65 80 C69 86 69 94 65 104 Z'/%3E%3Cpath d='M0 0 C8 4 12 8 14 14 C8 12 4 8 0 0 Z'/%3E%3Cpath d='M130 0 C122 4 118 8 116 14 C122 12 126 8 130 0 Z'/%3E%3Cpath d='M0 130 C8 126 12 122 14 116 C8 118 4 122 0 130 Z'/%3E%3Cpath d='M130 130 C122 126 118 122 116 116 C122 118 126 122 130 130 Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Typography helpers
   -------------------------------------------------------------------------- */
.brand-ar {
  font-family: var(--font-ar-logo);
  font-weight: 500;
  font-size: 1.65rem;
  color: var(--champagne);
  line-height: 1.4;
}

.brand-caps {
  font-family: var(--font-en-display);
  letter-spacing: 0.55em;
  font-size: 0.78rem;
  color: var(--champagne);
  text-transform: uppercase;
  direction: ltr;
}

.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.26em;
  font-weight: 500;
  color: var(--champagne);
  opacity: 0.85;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
html[lang="ar"] .eyebrow { letter-spacing: 0.12em; }
.eyebrow-dark { color: var(--burgundy); opacity: 1; }

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.7rem);
  line-height: 1.6;
  color: var(--burgundy);
}
html[lang="en"] .section-title { font-weight: 400; line-height: 1.25; }
.title-champagne { color: var(--champagne-bright); }

.section-sub {
  max-width: 34em;
  margin: 1rem auto 0;
  font-size: 1.02rem;
}
.section-beige .section-sub,
.section-beige-light .section-sub { color: var(--ink); }
.section-dark .section-sub { color: var(--champagne); }

/* --------------------------------------------------------------------------
   Header & nav
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 50;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.site-header.scrolled {
  background: rgba(74, 22, 34, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line-light);
}

.nav {
  max-width: var(--container);
  margin-inline: auto;
  padding: 0.95rem clamp(1.25rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.nav-links {
  display: flex;
  gap: clamp(1.1rem, 2.5vw, 2.2rem);
}
.nav-links a {
  font-size: 0.92rem;
  color: var(--champagne);
  padding-block: 0.3rem;
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  width: 0;
  height: 1px;
  background: var(--champagne);
  transition: width 0.35s var(--ease);
}
.nav-links a:hover::after { width: 100%; }

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

.lang-toggle,
.menu-toggle,
.mobile-close {
  background: none;
  border: 1px solid var(--line-light);
  color: var(--champagne);
  font-family: var(--font-en-display);
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.lang-toggle:hover,
.menu-toggle:hover,
.mobile-close:hover {
  background: var(--champagne);
  color: var(--burgundy-deep);
}
.menu-toggle { display: none; font-family: var(--font-body); letter-spacing: 0.05em; }

/* Mobile menu — the dark veil */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--burgundy-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-close {
  position: absolute;
  top: 1.2rem;
  inset-inline-end: 1.4rem;
  font-family: var(--font-body);
  letter-spacing: 0.05em;
}
.mobile-links { text-align: center; display: grid; gap: 1.5rem; }
.mobile-links a {
  font-family: var(--font-display);
  font-size: 1.55rem;
  color: var(--champagne-bright);
}
.mobile-note { position: absolute; bottom: 2rem; opacity: 0.7; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 0.9rem 2.4rem;
  border-radius: 2px;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
              box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.btn-champagne {
  background: var(--champagne);
  color: var(--burgundy-deep);
  font-weight: 500;
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.5);
}
.btn-champagne:hover {
  background: var(--champagne-bright);
  transform: translateY(-2px);
}
.btn-outline {
  border: 1px solid var(--line-light);
  color: var(--champagne);
}
.btn-outline:hover { background: rgba(233, 211, 174, 0.1); }
.btn-burgundy {
  background: var(--burgundy);
  color: var(--champagne-bright);
  font-weight: 500;
  box-shadow: 0 12px 28px -14px rgba(95, 30, 45, 0.55);
}
.btn-burgundy:hover {
  background: var(--burgundy-deep);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7.5rem 1.5rem 5rem;
  background: linear-gradient(180deg, var(--burgundy) 0%, var(--burgundy) 70%, var(--burgundy-deep) 100%);
}
.hero-inner { max-width: 44rem; }

.hero-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.4rem;
}
.hero-ar {
  font-family: var(--font-ar-logo);
  font-weight: 500;
  font-size: clamp(3.6rem, 10vw, 5.8rem);
  line-height: 1.35;
  color: var(--champagne-bright);
}
.hero-caps { font-size: 1rem; opacity: 0.9; }
.hero-descriptor {
  font-family: var(--font-ar-display);
  font-size: 1rem;
  color: var(--champagne);
  opacity: 0.85;
  margin-top: 0.4rem;
}
html[lang="en"] .hero-descriptor { font-family: var(--font-en-body); font-style: italic; }

.ribbon-rule {
  color: var(--champagne);
  opacity: 0.8;
  margin: 2.2rem auto 0;
  width: min(220px, 60vw);
}
.ribbon-svg { display: block; width: 100%; }

.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.55rem, 4.2vw, 2.4rem);
  line-height: 1.7;
  margin-top: 2rem;
  color: var(--champagne-bright);
}
html[lang="en"] .hero-title { font-weight: 400; line-height: 1.3; }

.hero-sub {
  margin: 1.1rem auto 0;
  max-width: 30em;
  color: var(--champagne);
  font-size: 1.04rem;
}

.hero-ctas {
  margin-top: 2.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Sections — the ceremonial rhythm: burgundy · beige · beige · burgundy …
   -------------------------------------------------------------------------- */
.section { padding: clamp(5rem, 10vw, 8.5rem) 0; }
.section-beige { background: var(--beige); color: var(--ink); }
.section-beige-light { background: var(--beige-light); color: var(--ink); }
.section-dark {
  background: linear-gradient(180deg, var(--burgundy-deep), var(--burgundy-black));
  color: var(--champagne);
}
.section-head { text-align: center; margin-bottom: clamp(2.8rem, 6vw, 4.5rem); }
.section-cta {
  text-align: center;
  margin-top: 3.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* The House */
.house-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.8rem, 4vw, 3.5rem);
  text-align: center;
}
.house-num {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  font-family: var(--font-ar-display);
  font-size: 1.4rem;
  color: var(--burgundy);
  margin-bottom: 1.2rem;
}
.house-item h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--burgundy);
  margin-bottom: 0.6rem;
}
html[lang="en"] .house-item h3 { font-weight: 400; }
.house-item p { font-size: 0.97rem; color: var(--ink); }

/* --------------------------------------------------------------------------
   Collections
   -------------------------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
}

.card {
  background: #FAF5E9;
  border: 1px solid rgba(95, 30, 45, 0.14);
  overflow: hidden;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 48px -26px rgba(95, 30, 45, 0.5);
}

.card-media {
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
/* Placeholder tints — replaced by real photos */
.pm-1 { background: linear-gradient(165deg, #5F1E2D, #7A2A3C); }
.pm-2 { background: linear-gradient(165deg, #4A1622, #642033); }
.pm-3 { background: linear-gradient(165deg, #6B2434, #8A3346); }
.pm-4 { background: linear-gradient(165deg, #56202B, #6F2A3A); }
.pm-5 { background: linear-gradient(165deg, #421320, #5F1E2D); }
.pm-6 { background: linear-gradient(165deg, #5F2531, #7C3242); }
.pm-7 { background: linear-gradient(165deg, #501A28, #6A2536); }
.pm-8 { background: linear-gradient(165deg, #5C1F2E, #763041); }

.card-media::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(233, 211, 174, 0.35);
  pointer-events: none;
  transition: inset 0.5s var(--ease);
}
.card:hover .card-media::after { inset: 16px; }

.ph-label {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: rgba(233, 211, 174, 0.75);
}

.card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.card:hover .card-media img { transform: scale(1.04); }

/* Identity strip — the house's real brand artefacts */
.id-strip {
  margin-top: clamp(2.2rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.9rem;
}
.id-strip figure {
  overflow: hidden;
  border: 1px solid var(--line-dark);
  aspect-ratio: 1;
}
.id-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.id-strip figure:hover img { transform: scale(1.06); }
.id-note {
  text-align: center;
  margin-top: 2.6rem;
}

/* The Evana Box — real packaging photography */
.box-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}
.box-collage figure {
  overflow: hidden;
  border: 1px solid rgba(233, 211, 174, 0.35);
}
.box-collage .big { grid-column: 1 / -1 }
.box-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.box-collage .big img { aspect-ratio: 4 / 3; }
.box-collage figure:not(.big) img { aspect-ratio: 1; }

@media (max-width: 820px) {
  .id-strip { grid-template-columns: repeat(2, 1fr); }
}

.card-body { padding: 1.2rem 1.2rem 1.4rem; text-align: center; }
.card-cat {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--burgundy);
  opacity: 0.7;
  margin-bottom: 0.35rem;
}
.card-name {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--burgundy-deep);
  line-height: 1.6;
}
html[lang="en"] .card-name { font-weight: 400; }
.card-price {
  font-family: var(--font-en-display);
  font-size: 1.05rem;
  color: var(--burgundy);
  margin-top: 0.45rem;
}
.card-price .old {
  font-size: 0.85rem;
  opacity: 0.6;
  text-decoration: line-through;
  margin-inline-start: 0.4rem;
}

.fineprint {
  text-align: center;
  margin-top: 2.4rem;
  font-size: 0.8rem;
  color: rgba(62, 42, 32, 0.65);
}

/* --------------------------------------------------------------------------
   The Evana Box
   -------------------------------------------------------------------------- */
.box-wrap {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.box-visual { text-align: center; }
.box-svg {
  width: min(340px, 80vw);
  margin-inline: auto;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.35));
}
.box-copy { text-align: start; }
.box-copy .eyebrow { margin-bottom: 0.9rem; }
.box-copy .section-title { margin-bottom: 1.2rem; }
.box-text {
  color: var(--champagne);
  font-size: 1.02rem;
  margin-bottom: 1.1rem;
  max-width: 36em;
}
.box-copy .btn { margin-top: 1rem; }
.box-quote {
  font-family: var(--font-display);
  color: var(--champagne-bright);
  font-size: 1.12rem;
}
html[lang="en"] .box-quote { font-style: italic; }

/* --------------------------------------------------------------------------
   Bespoke steps
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  counter-reset: step;
  text-align: center;
}
.step {
  background: var(--beige-light);
  border: 1px solid var(--line-dark);
  padding: 2.2rem 1.4rem;
}
.step-num {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--burgundy);
  color: var(--champagne-bright);
  font-family: var(--font-ar-display);
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
.step h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--burgundy);
  margin-bottom: 0.5rem;
}
html[lang="en"] .step h3 { font-weight: 400; }
.step p { font-size: 0.93rem; color: var(--ink); }

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.quote {
  border: 1px solid var(--line-light);
  padding: 2.4rem 2rem;
  position: relative;
  background: rgba(233, 211, 174, 0.04);
}
.quote::before {
  content: "❝";
  position: absolute;
  top: 1rem;
  inset-inline-start: 1.3rem;
  font-size: 1.6rem;
  color: rgba(233, 211, 174, 0.4);
}
.quote blockquote {
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 2;
  color: var(--champagne-bright);
}
html[lang="en"] .quote blockquote { line-height: 1.65; font-style: italic; }
.quote figcaption {
  margin-top: 1.2rem;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--champagne);
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--burgundy-black);
  padding: 0 0 3rem;
  text-align: center;
  color: var(--champagne);
}
.ribbon-footer {
  padding-top: 3.5rem;
  margin-bottom: 2.5rem;
  opacity: 0.65;
}
.footer-ar {
  font-family: var(--font-ar-logo);
  font-weight: 500;
  font-size: 2.6rem;
  color: var(--champagne-bright);
  line-height: 1.4;
}
.footer-brand .brand-caps { margin-top: 0.3rem; }
.footer-line {
  font-family: var(--font-display);
  margin-top: 1.5rem;
  font-size: 1.05rem;
  color: var(--champagne);
}
.footer-meta {
  margin-top: 1rem;
  font-size: 0.88rem;
  opacity: 0.8;
}
.footer-credit {
  margin-top: 2.4rem;
  font-size: 0.8rem;
  opacity: 0.85;
}
.footer-credit a {
  border-bottom: 1px solid var(--line-light);
  padding-bottom: 1px;
  transition: color 0.3s var(--ease);
}
.footer-credit a:hover { color: var(--champagne-bright); }
.dot { margin-inline: 0.6rem; }

/* --------------------------------------------------------------------------
   Reveal on scroll — slower than Amanda: this house does not hurry
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .card { transition: none; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .nav-links { display: none; }
  .menu-toggle { display: inline-block; }
  .house-grid { grid-template-columns: 1fr; max-width: 28rem; margin-inline: auto; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .quotes { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
  .box-wrap { grid-template-columns: 1fr; text-align: center; }
  .box-copy { text-align: center; }
  .box-text { margin-inline: auto; }
}

@media (max-width: 480px) {
  .product-grid { grid-template-columns: 1fr 1fr; gap: 0.9rem; }
  .card-body { padding: 0.9rem 0.7rem 1rem; }
  .card-name { font-size: 0.98rem; }
  .steps { grid-template-columns: 1fr; max-width: 22rem; margin-inline: auto; }
  .hero { padding-top: 6.5rem; }
  .btn { padding: 0.85rem 1.8rem; font-size: 0.9rem; }
}