/* =========================================================================
   Maison Safqa × Destination KSA — Giveaway
   Design system: Destination KSA Brandbook 2023 — PURE MONOCHROME
   Black / White / Grey · no accent colour (sanctioned for collaborations)
   Type: Source Sans 3 (Myriad Pro analog) · Source Serif 4 (Minion analog)
         Noto Sans Arabic (brand Arabic font)
   ========================================================================= */

/* ── Thmanya Arabic font family (self-hosted) ─────────────────────────── */
@font-face { font-family: 'Thmanyah Sans'; src: url('assets/fonts/thmanyahsans-Light.woff2') format('woff2');   font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Thmanyah Sans'; src: url('assets/fonts/thmanyahsans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Thmanyah Sans'; src: url('assets/fonts/thmanyahsans-Medium.woff2') format('woff2');  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Thmanyah Sans'; src: url('assets/fonts/thmanyahsans-Bold.woff2') format('woff2');    font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Thmanyah Serif Display'; src: url('assets/fonts/thmanyahserifdisplay-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Thmanyah Serif Display'; src: url('assets/fonts/thmanyahserifdisplay-Bold.woff2') format('woff2');    font-weight: 700; font-style: normal; font-display: swap; }

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

/* text selection — brand rose, not browser blue */
::selection { background: #a82e66; color: rgb(252, 244, 236); }
::-moz-selection { background: #a82e66; color: rgb(252, 244, 236); }

:root {
  /* Monochrome scale */
  --black:      #000000;
  --ink:        #111111;   /* body text on light */
  --ink-2:      #3a3a3a;
  --grey:       #6b6b6b;   /* muted text */
  --silver:     #BFBFC2;   /* brand grey (Brandbook p.20) */
  --mist:       #e3e3e3;
  --paper:      #ffffff;
  --paper-2:    #f5f4f2;   /* alt section bg */
  --paper-3:    #fafafa;
  --line:       rgba(0,0,0,0.12);
  --line-soft:  rgba(0,0,0,0.07);
  --line-dark:  rgba(255,255,255,0.18); /* hairlines on black */

  /* Type */
  --sans:  'Source Sans 3', system-ui, sans-serif;
  --serif: 'Source Serif 4', Georgia, serif;
  /* Thmanyah (both Sans + Serif Display) mis-shapes Arabic on iOS Safari, so
     Arabic uses Noto Sans Arabic, which renders correctly on every device. */
  --ar:    'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --ar-d:  'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
}

html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Arabic / RTL — Thmanya everywhere ─────────────────────────────────── */
/* Comprehensive Thmanya font rules live at the END of this file so they win
   the cascade over every per-element font-family declaration. */
[dir="rtl"] body { font-family: var(--ar); }

/* ── HEADER (transparent → sticky black on scroll) ────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  padding: 1rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  transition: transform 0.4s ease, background 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease;
}
.site-header.scrolled {
  background: rgba(252, 244, 236, 0.8);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
.site-header.hidden { transform: translateY(-100%); }
/* logos appear only when the header is sticky (scrolled) */
.header-logos {
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.site-header.scrolled .header-logos { opacity: 1; visibility: visible; }
.header-logos { display: flex; align-items: center; gap: 1.1rem; }
/* both logos: identical height + vertical alignment, white-on-transparent */
.header-logo-link { display: inline-flex; align-items: center; text-decoration: none; }
.header-logos img { height: 24px; width: auto; display: block; opacity: 0.95; transition: opacity 0.2s ease; }
.header-logo-link:hover img { opacity: 0.65; }
.header-divider { width: 1px; height: 20px; background: rgba(0,0,0,0.18); }
.header-right { display: flex; align-items: center; gap: 1.75rem; }
.header-collab {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver);
  white-space: nowrap;
}

/* Language switcher */
/* single opposite-language link */
.lang-switch {
  display: inline-flex;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: none;
}
/* transparent header (top): match the hero button — cream fill, rose text */
.lang-switch a {
  display: inline-block;
  padding: 6px 14px;
  background: #fcf4ec;
  color: #9c2c5d;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.lang-switch a:hover { background: #ffffff; color: #82204b; }
/* solid header (scrolled): rose fill, cream text */
.site-header.scrolled .lang-switch a { background: #a82e66; color: rgb(252, 244, 236); }
.site-header.scrolled .lang-switch a:hover { background: #8f2656; color: rgb(252, 244, 236); }

/* ── HERO (full-viewport · CSS pink + bag cutout) ─────────────────────── */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;            /* fallback */
  min-height: 100svh;           /* small viewport — keeps content clear of iOS chrome */
  overflow: hidden;
  /* G4 — diagonal editorial: light blush top-left to deep rose bottom-right. */
  background: linear-gradient(135deg,
    #f7d7e6 0%, #ef9ac4 42%, #ec85b8 64%, #c84d8f 100%);
}
.hero-overlay {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; flex-direction: column;
  padding: clamp(4.25rem, 9vh, 5.75rem) clamp(1.5rem, 5vw, 4rem) clamp(1.75rem, 4vh, 2.75rem);
  gap: clamp(0.6rem, 1.6vh, 1.25rem);
  color: #fff;
}
/* centred stack: collab eyebrow · title · date */
.hero-head {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(0.5rem, 1.6vh, 1rem);
  text-align: center;
  max-width: 100%;
  margin-inline: auto;
}
.hero-eyebrow, .hero-date { white-space: normal; }
.corner {
  font-family: var(--sans);
  font-size: clamp(13px, 1.7vw, 21px);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9c2c5d;
  white-space: nowrap;
}
.hero-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3rem, 10.5vw, 8rem);
  line-height: 0.94;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  text-align: center;
  color: #a82e66;
}
/* bag — scalable, centred, never cropped; shrinks on short screens */
.hero-figure {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(0.25rem, 1.2vh, 1rem) 0;
}
.hero-figure img {
  max-width: min(880px, 92vw);
  max-height: 50vh;
  max-height: 50svh;          /* viewport-bounded so the CTA always stays visible */
  width: auto; height: auto;
  object-fit: contain;
}
.hero-foot {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(1.25rem, 3.5vh, 2.25rem);
}
.hero-cta {
  display: inline-block;
  background: #fcf4ec;          /* cream solid */
  color: #9c2c5d;              /* rose text */
  border: none;
  font-family: var(--sans);
  text-decoration: none;
  font-size: clamp(12px, 1.05vw, 14px);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 17px 46px;
  border-radius: 0;
  transition: background 0.3s ease, color 0.3s ease, transform 0.25s ease;
}
.hero-cta:hover {
  background: #ffffff;
  color: #82204b;
  transform: translateY(-2px);
}
.hero-cta:active { transform: translateY(0); }

/* ── PRIZES ───────────────────────────────────────────────────────────── */
.prizes-section {
  background: rgb(252, 244, 236);
  padding: 4.5rem 2rem;
}
.prizes-inner { max-width: 1080px; margin: 0 auto; }
.prizes-section .section-h2 { text-align: center; color: #82204b; margin-bottom: 0.6rem; }
.prizes-desc {
  text-align: center; max-width: 440px; margin: 0 auto 2.6rem;
  font-family: var(--serif); font-size: 15px; color: #6b4a57; line-height: 1.6;
}
.prizes-desc strong { font-weight: 600; color: #82204b; }

/* brand pull-quote between About and Prizes */
.quote-section { background: rgb(252, 244, 236); padding: 4.5rem 2rem; border-bottom: 1px solid rgba(130, 32, 75, 0.18); }
.brand-quote {
  max-width: 780px; margin: 0 auto; text-align: center;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.7rem; line-height: 1.4; color: #82204b;
  quotes: "\201C" "\201D";
}
.brand-quote::before { content: open-quote; }
.brand-quote::after { content: close-quote; }
html[dir="rtl"] .brand-quote { font-family: var(--ar-d); font-style: normal; }

/* prize image carousel — native horizontal scroll-snap (reliable finger swipe
   on iOS/Android; direction follows the page so RTL swipes the natural way) */
.prize-media {
  position: relative; width: 100%; aspect-ratio: 1 / 1; background: #ffffff;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;                 /* Firefox */
  overscroll-behavior-x: contain;
}
.prize-media::-webkit-scrollbar { display: none; }   /* Chrome/Safari/Edge */
@media (hover: hover) { .prize-media { cursor: grab; } }   /* desktop drag hint */
.prize-media.grabbing { cursor: grabbing; }
.prize-media.grabbing .prize-slide { pointer-events: none; }   /* don't drop the drag on an image */
.prize-track { display: flex; height: 100%; }
.prize-slide {
  flex: 0 0 100%; width: 100%; height: 100%;
  object-fit: contain; display: block;
  padding: 0.5rem;
  scroll-snap-align: center; scroll-snap-stop: always;
  user-select: none; -webkit-user-drag: none;
}
.prize-dots { display: flex; justify-content: flex-start; align-items: center; gap: 5px; padding: 12px 1.1rem 4px; }
.prize-dots .dot {
  position: relative; overflow: hidden;
  width: 14px; height: 3px; border-radius: 0;
  background: rgba(130,32,75,0.2); border: none; padding: 0; cursor: pointer;
  transition: background 0.25s ease, width 0.25s ease;
}
.prize-dots .dot.active { background: #82204b; width: 24px; }
.section-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #a82e66;
  text-align: center;
  margin-bottom: 2.25rem;
}

.prizes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.prize-card {
  background: #ffffff;
  border: 1px solid rgba(130,32,75,0.10);
  border-radius: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.prize-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f7e7ee;
  border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.prize-img-wrap img {
  width: 100%; height: 100%;
  object-fit: contain;
}

.prize-img-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f7e7ee;
  border-radius: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
}
.prize-img-placeholder span:not(.placeholder-icon) {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 1rem;
  color: #a82e66;
}
.prize-img-placeholder .placeholder-icon { font-size: 2rem; opacity: 0.6; }

.prize-body {
  padding: 1rem 1.1rem 1.2rem;
  display: flex; flex-direction: column;
  gap: 5px; flex: 1;
}
.prize-week {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a98794;
}
.prize-name {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.15;
  color: #82204b;
}
.prize-voucher {
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: #a82e66;
}

.voucher-highlight {
  margin-top: 2rem;
  background: #82204b;
  color: rgb(252, 244, 236);
  padding: 1.3rem 2rem;
  text-align: center;
}
.voucher-highlight p {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 400;
}
.voucher-highlight strong { font-weight: 700; }

/* ── SHARED SECTION HEADINGS ──────────────────────────────────────────── */
.section-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 1rem;
}
.section-h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.section-h2 em { font-style: italic; }

/* ── HOW IT WORKS ─────────────────────────────────────────────────────── */
.how-section { max-width: 820px; margin: 0 auto; padding: 5rem 2rem; }
.how-section .section-h2 { color: #82204b; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin-top: 2.5rem; }
.step-num {
  font-family: var(--serif);
  font-size: 3.25rem;
  font-weight: 300;
  color: #d9c2cb;                 /* inactive */
  line-height: 1;
  padding-bottom: 0.75rem;
  transition: color 0.4s ease;
}
.step.active .step-num { color: #82204b; }   /* active number fills dark rose */
.step-line { height: 2px; width: 100%; background: rgba(130,32,75,0.14); overflow: hidden; margin-bottom: 1rem; }
.step-line-fill { display: block; height: 100%; width: 0; background: #82204b; }
.step.active .step-line-fill { animation: stepFill 5s linear forwards; }
@keyframes stepFill { from { width: 0; } to { width: 100%; } }
.step-title {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #82204b;
  margin-bottom: 5px;
}
.step-desc { font-family: var(--serif); font-size: 14px; color: #6b4a57; line-height: 1.65; }
.how-cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2.6rem; }
.how-btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #82204b; text-decoration: none;
  background: rgba(130, 32, 75, 0.055);
  border: 1px solid rgba(130, 32, 75, 0.16);
  border-radius: 100px;
  padding: 9px 17px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.how-btn::before, .success-chip::before {
  content: ""; width: 15px; height: 15px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.15' fill='%23000' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.15' fill='%23000' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
}
.how-btn:hover { background: #82204b; color: rgb(252, 244, 236); border-color: #82204b; }

/* ── ABOUT ────────────────────────────────────────────────────────────── */
.about-section {
  background: rgb(252, 244, 236);
  border-top: 1px solid rgba(130,32,75,0.1);
  border-bottom: 1px solid rgba(130,32,75,0.18);
}
.about-section .section-eyebrow { color: #a82e66; }
.about-section .section-eyebrow::before { background: #a82e66; }
.about-section .section-h2 { color: #82204b; }
.about-inner {
  max-width: 960px; margin: 0 auto;
  padding: 5rem 2rem;
  display: flex; flex-direction: column; gap: 2.5rem;
  align-items: stretch;
}
.about-img { overflow: hidden; aspect-ratio: 3/2; background: var(--mist); width: 100%; }
.about-img picture { display: block; width: 100%; height: 100%; }
.about-img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.about-text { max-width: 680px; }
.about-body { font-family: var(--serif); font-size: 16px; color: #6b4a57; line-height: 1.8; }
.about-body p + p { margin-top: 0.9rem; }
.about-links { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.5rem; }
.about-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #82204b; text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: border-color 0.2s;
}
.about-link:hover { border-bottom-color: #82204b; }

/* ── FORM ─────────────────────────────────────────────────────────────── */
.form-section { background: #82204b; padding: 3rem 2rem 5.5rem; }
.form-inner { max-width: 540px; margin: 0 auto; }
/* anti-spam honeypot — visually hidden via clip (NOT display:none, so bots fill it;
   NOT left:-9999px, which expands the page width and breaks RTL scrolling) */
.hp-field { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; opacity: 0; }
.field-error { display: none; font-family: var(--sans); font-size: 12px; font-weight: 500; color: #ffb0a8; margin: 7px 0 0; }
.field.invalid input[type="text"], .field.invalid input[type="email"] { border-color: #ff9a8f; background: rgba(255, 120, 105, 0.10); }
.field.invalid label { color: #ffb0a8; }
.form-inner .section-eyebrow { color: #f0c9d8; }
.form-inner .section-eyebrow::before { background: #f0c9d8; }
.form-inner .section-h2 { color: rgb(252, 244, 236); margin-bottom: 2.75rem; }
.form-sub {
  font-family: var(--serif);
  font-size: 15px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 2.75rem;
}
.field { margin-bottom: 1.3rem; }
.field label {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 9px;
}
.field input[type="text"], .field input[type="email"] {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 14px 16px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--paper);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.field input::placeholder { color: rgba(255,255,255,0.28); }
.field input:focus { border-color: var(--paper); background: rgba(255,255,255,0.09); }
.phone-row { display: flex; gap: 8px; }
.phone-row input { flex: 1; min-width: 0; }
.phone-prefix {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; padding: 14px 15px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.2);
  font-family: var(--sans); font-size: 15px; color: var(--paper);
  white-space: nowrap; letter-spacing: 0.02em;
}
.checkbox-group { margin: 2rem 0; display: flex; flex-direction: column; gap: 1.1rem; }
.check-row { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.check-row input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 19px; height: 19px; margin-top: 2px; flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.45);
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  cursor: pointer; position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.check-row input[type="checkbox"]:hover { border-color: rgba(255,255,255,0.8); }
.check-row input[type="checkbox"]:checked { background: #f0c9d8; border-color: #f0c9d8; }
.check-row input[type="checkbox"]:checked::after {
  content: ""; position: absolute;
  left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid #82204b; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.check-row input[type="checkbox"]:focus-visible { outline: 2px solid #f0c9d8; outline-offset: 2px; }
.check-row span { font-family: var(--serif); font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.55; }
.check-row a { color: var(--paper); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.5); }
.submit-btn {
  width: 100%;
  background: rgb(252, 244, 236);
  color: #9c2c5d;
  border: none;
  padding: 17px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  margin-top: 0.5rem;
}
.submit-btn:hover { background: #ffffff; transform: translateY(-1px); }
.submit-btn:disabled { opacity: 0.5; cursor: wait; transform: none; }
.error-msg {
  display: none;
  font-family: var(--sans);
  font-size: 13px; font-weight: 500;
  color: #ffb0a8;
  margin-top: 1rem; text-align: center;
}
.success-box { display: none; text-align: center; padding: 3.5rem 2rem; border: 1px solid rgba(255,255,255,0.25); }
.success-icon { font-family: var(--serif); font-size: 3rem; color: var(--paper); margin-bottom: 1rem; }
.success-box h3 { font-family: var(--serif); font-weight: 300; font-size: 2.4rem; color: var(--paper); margin-bottom: 0.85rem; }
.success-box p { font-family: var(--serif); font-size: 15px; color: rgba(255,255,255,0.6); line-height: 1.7; max-width: 400px; margin: 0 auto; }
/* thank-you: follow / visit both brands */
.success-follow { margin-top: 2.4rem; padding-top: 2.1rem; border-top: 1px solid rgba(255,255,255,0.18); }
.success-label {
  display: block; font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 1.1rem;
}
.success-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.success-chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: rgb(252, 244, 236); text-decoration: none;
  border: 1px solid rgba(255,255,255,0.35); border-radius: 100px; padding: 8px 16px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.success-chip::before { width: 14px; height: 14px; }
.success-chip:hover { background: rgb(252, 244, 236); color: #82204b; border-color: rgb(252, 244, 236); }
.success-sites { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem; margin-top: 1.5rem; }
.success-sites a {
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: #f0c9d8; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: border-color 0.2s ease;
}
.success-sites a:hover { border-bottom-color: #f0c9d8; }

/* ── TERMS ────────────────────────────────────────────────────────────── */
.terms-section { background: rgb(252, 244, 236); padding: 5.5rem 2rem 1.25rem; }
.terms-inner { max-width: 720px; margin: 0 auto; }
.terms-inner .section-h2 { margin-bottom: 0.5rem; color: #82204b; }
.terms-list { margin-top: 2.5rem; }
.tc-item {
  border: 1px solid rgba(130,32,75,0.14);
  border-radius: 0;
  margin-bottom: 10px;
  overflow: hidden;
  background: #ffffff;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.tc-item.open { border-color: #a82e66; box-shadow: 0 8px 24px rgba(130,32,75,0.08); }
.tc-head {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.15rem 1.3rem;
  cursor: pointer; user-select: none;
}
.tc-num {
  font-family: var(--sans);
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.08em;
  color: #a98794; flex-shrink: 0; min-width: 26px;
}
.tc-title { font-family: var(--sans); font-size: 14px; font-weight: 500; color: #82204b; flex: 1; }
.tc-chevron { position: relative; width: 13px; height: 13px; flex-shrink: 0; transition: transform 0.35s ease; }
.tc-chevron::before, .tc-chevron::after {
  content: ''; position: absolute; top: 50%; width: 8px; height: 1.5px;
  background: #82204b; border-radius: 2px;
}
.tc-chevron::before { left: 0; transform: translateY(-50%) rotate(45deg); }
.tc-chevron::after  { right: 0; transform: translateY(-50%) rotate(-45deg); }
.tc-item.open .tc-chevron { transform: rotate(180deg); }
.tc-body-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.38s ease; }
.tc-item.open .tc-body-wrap { grid-template-rows: 1fr; }
.tc-body-inner { overflow: hidden; }
.tc-body { font-family: var(--serif); font-size: 14px; color: #6b4a57; line-height: 1.7; padding: 0 1.3rem 1.25rem; }

/* ── FOOTER (transparent · simple · centred) ──────────────────────────── */
footer {
  background: rgb(252, 244, 236);
  padding: 2.25rem 2rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
  text-align: center;
}
.footer-meta {
  display: flex; flex-direction: row; align-items: center;
  justify-content: center; flex-wrap: wrap; gap: 0.4rem 0.8rem;
  direction: ltr;
}
.footer-logos { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.footer-logo-link { display: inline-flex; align-items: center; text-decoration: none; }
.footer-logos img { height: 22px; width: auto; display: block; opacity: 0.8; transition: opacity 0.2s ease; }
.footer-logo-link:hover img { opacity: 1; }
.footer-divider { width: 1px; height: 20px; background: rgba(0,0,0,0.15); }
.footer-note {
  font-family: var(--sans);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--grey);
  margin: 0;
}
.footer-credit {
  font-family: var(--sans);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--grey);
  margin: 0;
}
.footer-credit a {
  color: #82204b; text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.footer-credit a:hover { border-bottom-color: #82204b; }

.divider { border: none; border-top: 1px solid var(--line); }

/* ── RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width: 780px) {
  .site-header { padding: 0.7rem 1rem; }
  .header-collab { display: none; }
  .header-logos { gap: 0.7rem; }
  .header-logos img { height: 18px; }       /* smaller logos — keeps header within the screen */
  .header-divider { height: 15px; }
  .prizes-grid { grid-template-columns: repeat(2, 1fr); }
  /* steps as a VERTICAL timeline: numbers run top→bottom, the accent line is
     vertical (rail) beside them, content to the right */
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step {
    display: grid;
    grid-template-columns: 2.6rem 1fr;
    column-gap: 1.4rem;
    padding-bottom: 2.2rem;
    border-bottom: none;
  }
  .steps .step:last-child { padding-bottom: 0; }
  .step-num {
    grid-column: 1; grid-row: 1;
    font-size: 2.1rem; line-height: 1; padding: 0; text-align: center;
  }
  .step-line {
    grid-column: 1; grid-row: 2;
    width: 2px; height: auto; min-height: 34px;
    margin: 0.55rem auto 0; align-self: stretch;
    background: rgba(130, 32, 75, 0.14); overflow: hidden;
  }
  .step-line-fill { width: 100%; height: 0; }
  .step.active .step-line-fill { animation: stepFillVert 5s linear forwards; }
  @keyframes stepFillVert { from { height: 0; } to { height: 100%; } }
  .step-title { grid-column: 2; grid-row: 1; align-self: center; margin: 0 0 6px; }
  .step-desc  { grid-column: 2; grid-row: 2; }
  .about-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-img { aspect-ratio: 3/4; width: 100%; }
  .how-cta { flex-wrap: wrap; gap: 0.6rem; margin-top: 2.25rem; }
  .brand-quote { font-size: 1.35rem; }
}
@media (max-width: 600px) {
  .corner { letter-spacing: 0.12em; }
  /* much bigger bag on phones (tight crop fills the width) */
  .hero-figure img { max-width: 100%; }
}
@media (max-width: 480px) {
  .prizes-grid { grid-template-columns: 1fr; }
}
/* large screens: bigger bag, nudged up toward the title (transform adds no height) */
@media (min-width: 1024px) {
  .hero-figure img { max-width: min(1040px, 76vw); max-height: 50svh; transform: translateY(-1.5vh); }
}

/* ════════════════════════════════════════════════════════════════════════
   Thmanya across the ENTIRE Arabic page — placed last + higher specificity
   (html[dir=rtl] *) so it overrides every per-element font-family above.
   Display headings use the serif-display variant.
   ════════════════════════════════════════════════════════════════════════ */
html[dir="rtl"] * { font-family: var(--ar); }
html[dir="rtl"] .hero-title,
html[dir="rtl"] .section-h2,
html[dir="rtl"] .prize-name,
html[dir="rtl"] .success-box h3,
html[dir="rtl"] .success-icon { font-family: var(--ar-d); }
html[dir="rtl"] em { font-style: normal; }
html[dir="rtl"] .field input,
html[dir="rtl"] .field select { font-family: var(--ar); }