:root {
  --forest: #07352b;
  --forest-deep: #041f1a;
  --forest-light: #10503f;

  --gold: #d6c18b;
  --gold-soft: #eadcb7;

  --ivory: #f4eddd;
  --muted: #b8b6aa;

  --burgundy: #6b2638;

  --line: rgba(214, 193, 139, 0.22);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--forest-deep);
  color: var(--ivory);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
}

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

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 22px 5%;

  background:
    rgba(4, 31, 26, 0.82);

  backdrop-filter: blur(12px);

  border-bottom:
    1px solid rgba(214,193,139,.12);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;

  color: var(--gold-soft);

  font-size: 20px;
}

.brand-mark {
  color: var(--gold);
}

.desktop-nav {
  display: flex;
  gap: 32px;

  font-family: Arial, sans-serif;
  font-size: 12px;

  letter-spacing: .08em;
}

.desktop-nav a {
  opacity: .72;
}

.desktop-nav a:hover {
  opacity: 1;
}

.header-button {
  padding: 10px 18px;

  border:
    1px solid var(--gold);

  border-radius: 999px;

  color: var(--gold);

  font-family: Arial, sans-serif;
  font-size: 12px;
}

.hero {
  position: relative;

  min-height: 100vh;

  display: flex;
  align-items: center;

  overflow: hidden;

  padding:
    150px 8%
    80px;

  background:
    radial-gradient(
      circle at 72% 40%,
      rgba(28,100,76,.50),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #06261f,
      #0a3d30 55%,
      #051e19
    );
}

.hero-glow {
  position: absolute;

  width: 500px;
  height: 500px;

  right: -120px;
  top: 20%;

  border-radius: 50%;

  background:
    rgba(214,193,139,.08);

  filter: blur(70px);
}

.hero-content {
  position: relative;

  max-width: 880px;

  z-index: 2;
}

.eyebrow,
.section-label {
  color: var(--gold);

  font-family:
    Arial,
    sans-serif;

  font-size: 11px;

  letter-spacing: .28em;

  margin-bottom: 26px;
}

.hero h1 {
  margin: 0;

  font-weight: 400;

  font-size:
    clamp(46px,7vw,94px);

  line-height: 1.02;
}

.hero h1 em {
  display: block;

  color: var(--gold-soft);

  font-weight: 400;
}

.hero-copy {
  max-width: 620px;

  margin:
    35px 0 0;

  color:
    rgba(244,237,221,.72);

  font-family:
    Arial,
    sans-serif;

  font-size: 17px;

  line-height: 1.8;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 14px;

  margin-top: 38px;
}

.button-primary,
.button-secondary {
  padding:
    15px 24px;

  border-radius:
    999px;

  font-family:
    Arial,
    sans-serif;

  font-size:
    13px;
}

.button-primary {
  color:
    var(--forest-deep);

  background:
    var(--gold-soft);
}

.button-secondary {
  color:
    var(--gold-soft);

  border:
    1px solid var(--line);
}

.scroll-note {
  position: absolute;

  bottom: 30px;
  right: 5%;

  color:
    rgba(234,220,183,.6);

  font-style:
    italic;
}

.section {
  padding:
    120px 8%;
}

.story {
  background:
    #f0e8d8;

  color:
    #173128;
}

.story-grid {
  display: grid;

  grid-template-columns:
    1.1fr .9fr;

  gap:
    80px;
}

.story h2,
.section-heading h2,
.how h2,
.author-box h2,
.closing h2 {
  margin:
    0;

  font-size:
    clamp(40px,5vw,70px);

  line-height:
    1.08;

  font-weight:
    400;
}

.story p {
  font-family:
    Arial,
    sans-serif;

  line-height:
    1.8;

  font-size:
    17px;
}

.editions {
  background:
    #082a23;
}

.section-heading {
  display:
    flex;

  align-items:
    end;

  justify-content:
    space-between;

  gap:
    50px;

  margin-bottom:
    55px;
}

.section-heading > p {
  max-width:
    460px;

  color:
    rgba(244,237,221,.64);

  font-family:
    Arial,
    sans-serif;

  line-height:
    1.7;
}

.edition-grid {
  display:
    grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:
    20px;
}

.edition-card {
  min-height:
    390px;

  display:
    flex;

  flex-direction:
    column;

  padding:
    34px;

  border:
    1px solid
    var(--line);

  background:
    rgba(255,255,255,.025);
}

.edition-card.featured {
  background:
    linear-gradient(
      145deg,
      rgba(214,193,139,.14),
      rgba(255,255,255,.02)
    );
}

.edition-number {
  color:
    var(--gold);

  font-family:
    Arial,
    sans-serif;

  font-size:
    12px;
}

.edition-card h3 {
  margin:
    auto 0 18px;

  color:
    var(--gold-soft);

  font-size:
    34px;

  font-weight:
    400;
}

.edition-card p {
  color:
    rgba(244,237,221,.65);

  font-family:
    Arial,
    sans-serif;

  line-height:
    1.7;
}

.edition-card span {
  margin-top:
    20px;

  color:
    var(--gold);

  font-family:
    Arial,
    sans-serif;

  font-size:
    11px;

  text-transform:
    uppercase;

  letter-spacing:
    .15em;
}

.how {
  background:
    var(--forest-deep);
}

.steps {
  display:
    grid;

  grid-template-columns:
    repeat(4,1fr);

  margin-top:
    65px;

  border-top:
    1px solid var(--line);
}

.step {
  padding:
    30px 25px;

  border-right:
    1px solid var(--line);
}

.step:last-child {
  border-right:
    none;
}

.step strong {
  color:
    var(--gold);

  font-family:
    Arial,
    sans-serif;

  font-size:
    11px;
}

.step h3 {
  color:
    var(--gold-soft);

  font-size:
    28px;

  font-weight:
    400;
}

.step p {
  color:
    rgba(244,237,221,.6);

  font-family:
    Arial,
    sans-serif;

  line-height:
    1.7;
}

.authors {
  background:
    #eee4d0;

  color:
    #153228;
}

.author-box {
  display:
    grid;

  grid-template-columns:
    1.2fr .8fr;

  gap:
    80px;

  padding:
    70px;

  border:
    1px solid
    rgba(7,53,43,.17);
}

.author-box p {
  font-family:
    Arial,
    sans-serif;

  line-height:
    1.8;
}

.author-box a {
  display:
    inline-block;

  margin-top:
    20px;

  color:
    var(--burgundy);

  font-family:
    Arial,
    sans-serif;

  font-weight:
    700;
}

.closing {
  min-height:
    75vh;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;

  padding:
    100px 20px;

  background:
    radial-gradient(
      circle,
      #10503f,
      #041f1a 70%
    );
}

.closing > p {
  color:
    var(--gold);

  font-family:
    Arial,
    sans-serif;

  font-size:
    11px;

  letter-spacing:
    .3em;
}

.closing h2 {
  color:
    var(--gold-soft);

  margin:
    20px 0;
}

.closing span {
  color:
    rgba(244,237,221,.55);

  font-style:
    italic;
}

footer {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    30px 5%;

  background:
    #031713;

  color:
    rgba(244,237,221,.45);

  border-top:
    1px solid var(--line);

  font-family:
    Arial,
    sans-serif;

  font-size:
    11px;
}

.footer-brand {
  color:
    var(--gold);
}

@media (max-width: 850px) {

  .desktop-nav {
    display:
      none;
  }

  .story-grid,
  .author-box {
    grid-template-columns:
      1fr;
  }

  .edition-grid {
    grid-template-columns:
      1fr;
  }

  .steps {
    grid-template-columns:
      1fr 1fr;
  }

  .step:nth-child(2) {
    border-right:
      none;
  }

  .section-heading {
    align-items:
      start;

    flex-direction:
      column;
  }

}

@media (max-width: 550px) {

  .site-header {
    padding:
      18px 20px;
  }

  .header-button {
    display:
      none;
  }

  .hero {
    padding:
      130px 24px
      70px;
  }

  .section {
    padding:
      85px 24px;
  }

  .story-grid,
  .author-box {
    gap:
      35px;
  }

  .steps {
    grid-template-columns:
      1fr;
  }

  .step {
    border-right:
      none;

    border-bottom:
      1px solid var(--line);
  }

  .author-box {
    padding:
      35px 24px;
  }

  footer {
    flex-direction:
      column;
  }

}


/* =========================================
   LANGUAGE SWITCHER
   ========================================= */

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.language-toggle {
  min-width: 46px;

  padding: 10px 13px;

  border:
    1px solid rgba(214, 193, 139, .28);

  border-radius: 999px;

  background:
    rgba(255, 255, 255, .035);

  color: var(--gold-soft);

  cursor: pointer;

  font-family:
    Arial,
    sans-serif;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: .08em;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.language-toggle:hover {
  background:
    rgba(214, 193, 139, .10);

  border-color:
    var(--gold);

  transform:
    translateY(-1px);
}


/* Arabic */
html[dir="rtl"] body {
  text-align: right;
}

html[dir="rtl"] .hero-copy {
  margin-left: auto;
  margin-right: 0;
}


/* English */
html[dir="ltr"] body {
  text-align: left;
}

html[dir="ltr"] .hero-copy {
  margin-left: 0;
  margin-right: auto;
}


@media (max-width: 550px) {

  .header-actions {
    margin-inline-start: auto;
  }

  .language-toggle {
    min-width: 48px;
  }

}


/* =========================================
   MOBILE NAVIGATION
   ========================================= */

.menu-toggle {
  display: none;

  width: 44px;
  height: 42px;

  padding: 10px;

  border:
    1px solid rgba(214, 193, 139, .25);

  border-radius: 50%;

  background:
    rgba(255, 255, 255, .025);

  cursor: pointer;

  align-items: center;
  justify-content: center;
  flex-direction: column;

  gap: 4px;
}

.menu-toggle span {
  display: block;

  width: 17px;
  height: 1px;

  background:
    var(--gold-soft);

  transition:
    transform .25s ease,
    opacity .25s ease;
}


/* Open hamburger animation */

.menu-toggle.is-open span:nth-child(1) {
  transform:
    translateY(5px)
    rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
  transform:
    translateY(-5px)
    rotate(-45deg);
}


/* Mobile menu panel */

.mobile-menu {
  position: fixed;

  z-index: 90;

  top: 82px;

  inset-inline:
    20px;

  display: none;

  padding:
    22px;

  border:
    1px solid rgba(214, 193, 139, .18);

  border-radius:
    18px;

  background:
    rgba(4, 31, 26, .96);

  backdrop-filter:
    blur(18px);

  box-shadow:
    0 20px 60px
    rgba(0, 0, 0, .35);
}

.mobile-menu.is-open {
  display: grid;
}

.mobile-menu a {
  display: block;

  padding:
    17px 8px;

  border-bottom:
    1px solid rgba(214, 193, 139, .10);

  color:
    var(--ivory);

  font-family:
    Arial,
    sans-serif;

  font-size:
    15px;
}

.mobile-menu a:last-child {
  border-bottom: none;

  color:
    var(--gold-soft);
}


/* Prevent page scrolling while menu is open */

body.mobile-menu-open {
  overflow: hidden;
}


@media (max-width: 850px) {

  .menu-toggle {
    display: flex;
  }

}


@media (min-width: 851px) {

  .mobile-menu {
    display: none !important;
  }

}


/* =========================================
   FOLIO & KEY BRAND LOGOS
   ========================================= */

.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.brand-logo {
  display: block;

  width: auto;
  height: 50px;

  max-width: 230px;

  object-fit: contain;
}


/* Arabic is default */
.brand-logo-en {
  display: none;
}

html[lang="en"] .brand-logo-ar {
  display: none;
}

html[lang="en"] .brand-logo-en {
  display: block;
}


/* Header refinement */

.site-header {
  min-height: 82px;
}


/* Mobile */

@media (max-width: 850px) {

  .brand-logo {
    height: 44px;
    max-width: 185px;
  }

}


@media (max-width: 550px) {

  .brand-logo {
    height: 40px;
    max-width: 160px;
  }

}

/* =========================================
   BRAND LOGO SIZE REFINEMENT
   ========================================= */

.brand-logo {
  height: 72px;
  max-width: 320px;
}

.site-header {
  min-height: 96px;
}

/* Tablet */
@media (max-width: 850px) {

  .brand-logo {
    height: 62px;
    max-width: 260px;
  }

  .site-header {
    min-height: 88px;
  }

}

/* Phone */
@media (max-width: 550px) {

  .brand-logo {
    height: 56px;
    max-width: 220px;
  }

  .site-header {
    min-height: 80px;
  }

}

/* Final logo size refinement */

.brand-logo {
  height: 84px;
  max-width: 360px;
}

.site-header {
  min-height: 104px;
}

@media (max-width: 850px) {
  .brand-logo {
    height: 72px;
    max-width: 300px;
  }

  .site-header {
    min-height: 94px;
  }
}

@media (max-width: 550px) {
  .brand-logo {
    height: 64px;
    max-width: 250px;
  }

  .site-header {
    min-height: 86px;
  }
}


/* =========================================================
   STAGE 5C1 — FOLIO & KEY LUXURY LITERARY HERO
   ========================================================= */

.hero-luxury {
  position: relative;
  min-height: 100vh;

  display: flex;
  align-items: center;

  overflow: hidden;

  padding:
    150px 7%
    80px;

  background:
    radial-gradient(
      circle at 72% 42%,
      rgba(66, 113, 87, .20),
      transparent 28%
    ),
    radial-gradient(
      circle at 30% 110%,
      rgba(117, 35, 54, .13),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #031d18 0%,
      #07342a 48%,
      #021713 100%
    );
}


/* Soft book-like atmosphere */

.hero-atmosphere {
  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.012) 1px,
      transparent 1px
    );

  background-size: 86px 100%;

  opacity: .35;
}


.hero-book-lines {
  position: absolute;

  top: 15%;
  bottom: 10%;

  inset-inline-end: -40px;

  width: min(43vw, 650px);

  opacity: .10;

  border-inline-start:
    1px solid var(--gold);

  border-inline-end:
    1px solid var(--gold);

  transform:
    perspective(800px)
    rotateY(-8deg);
}


.hero-book-lines::before,
.hero-book-lines::after {
  content: "";

  position: absolute;
  top: 0;
  bottom: 0;

  width: 1px;

  background:
    var(--gold);
}


.hero-book-lines::before {
  inset-inline-start: 32%;
}


.hero-book-lines::after {
  inset-inline-start: 67%;
}


/* Main layout */

.hero-shell {
  position: relative;
  z-index: 3;

  width: 100%;
  max-width: 1500px;

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(380px, .72fr);

  align-items: center;

  gap:
    clamp(55px, 7vw, 130px);
}


/* Copy */

.hero-copy-column {
  max-width: 820px;
}


.hero-luxury .eyebrow {
  position: relative;

  display: inline-flex;
  align-items: center;

  gap: 14px;

  margin-bottom: 30px;

  color: var(--gold);

  font-size: 11px;
  font-weight: 600;

  letter-spacing: .33em;
}


.hero-luxury .eyebrow::before {
  content: "";

  width: 46px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--gold)
    );
}


html[dir="rtl"]
.hero-luxury .eyebrow::before {
  background:
    linear-gradient(
      90deg,
      var(--gold),
      transparent
    );
}


.hero-luxury h1 {
  max-width: 900px;

  margin: 0;

  font-size:
    clamp(49px, 5.7vw, 93px);

  line-height: 1.05;

  font-weight: 400;

  letter-spacing: -.025em;
}


.hero-luxury h1 span {
  display: block;

  color: var(--ivory);
}


.hero-luxury h1 em {
  display: block;

  margin-top: 10px;

  color: var(--gold-soft);

  font-weight: 400;
  font-style: normal;
}


.hero-luxury .hero-copy {
  max-width: 650px;

  margin-top: 32px;

  color:
    rgba(244,237,221,.68);

  font-size: 17px;

  line-height: 1.95;
}


html[dir="rtl"]
.hero-luxury .hero-copy {
  font-size: 18px;
  line-height: 2;
}


.hero-luxury .hero-actions {
  margin-top: 38px;
}


.hero-luxury .button-primary,
.hero-luxury .button-secondary {
  min-height: 50px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding:
    14px 25px;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    border-color .25s ease;
}


.hero-luxury .button-primary {
  box-shadow:
    0 8px 30px
    rgba(0,0,0,.16);
}


.hero-luxury .button-primary:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 12px 34px
    rgba(0,0,0,.26);
}


.hero-luxury .button-secondary:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(214,193,139,.55);

  background:
    rgba(214,193,139,.06);
}


/* Small literary signature */

.hero-signature {
  display: flex;
  align-items: center;

  gap: 16px;

  margin-top: 42px;

  color:
    rgba(234,220,183,.56);

  font-size: 14px;

  font-style: italic;
}


.hero-signature-line {
  display: block;

  width: 54px;
  height: 1px;

  background:
    rgba(214,193,139,.48);
}


/* =========================================================
   BOOK COVER / WORLD CARD
   ========================================================= */

.hero-visual {
  position: relative;

  min-height: 610px;

  display: flex;
  align-items: center;
  justify-content: center;
}


.hero-visual-glow {
  position: absolute;

  width: 470px;
  height: 470px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(214,193,139,.18),
      rgba(214,193,139,.04) 45%,
      transparent 70%
    );

  filter: blur(12px);
}


.hero-book-cover {
  position: relative;
  z-index: 2;

  width:
    min(100%, 455px);

  aspect-ratio:
    0.73;

  display: flex;

  padding: 16px;

  border:
    1px solid
    rgba(214,193,139,.60);

  border-radius:
    3px 10px 10px 3px;

  background:
    linear-gradient(
      145deg,
      #124538,
      #062b23 48%,
      #031f1a
    );

  box-shadow:
    -18px 28px 70px
      rgba(0,0,0,.42),
    inset 0 0 0 5px
      rgba(255,255,255,.018),
    inset 0 0 55px
      rgba(0,0,0,.22);

  transform:
    perspective(1200px)
    rotateY(-5deg)
    rotateX(1deg);
}


html[dir="rtl"]
.hero-book-cover {
  transform:
    perspective(1200px)
    rotateY(5deg)
    rotateX(1deg);
}


.hero-book-cover::before {
  content: "";

  position: absolute;

  top: 12px;
  bottom: 12px;

  inset-inline-start: 13px;

  width: 4px;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(214,193,139,.35),
      transparent
    );

  box-shadow:
    8px 0 18px
    rgba(0,0,0,.28);
}


.hero-cover-inner {
  position: relative;

  width: 100%;
  min-height: 100%;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  padding:
    44px 34px;

  border:
    1px solid
    rgba(214,193,139,.38);

  text-align: center;
}


/* Decorative book corners */

.hero-cover-corner {
  position: absolute;

  width: 38px;
  height: 38px;

  z-index: 4;

  pointer-events: none;
}


.hero-cover-corner::before,
.hero-cover-corner::after {
  content: "";

  position: absolute;

  background:
    rgba(214,193,139,.75);
}


.hero-cover-corner::before {
  width: 38px;
  height: 1px;
}


.hero-cover-corner::after {
  width: 1px;
  height: 38px;
}


.hero-cover-corner-1 {
  top: 27px;
  left: 27px;
}


.hero-cover-corner-2 {
  top: 27px;
  right: 27px;

  transform: rotate(90deg);
}


.hero-cover-corner-3 {
  bottom: 27px;
  right: 27px;

  transform: rotate(180deg);
}


.hero-cover-corner-4 {
  bottom: 27px;
  left: 27px;

  transform: rotate(270deg);
}


.hero-cover-kicker {
  color:
    rgba(234,220,183,.66);

  font-family:
    Arial,
    sans-serif;

  font-size: 9px;

  font-weight: 600;

  letter-spacing: .30em;

  text-transform: uppercase;
}


.hero-emblem {
  display: block;

  width: min(82%, 290px);
  height: auto;

  margin:
    30px auto 26px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 10px 24px
      rgba(0,0,0,.28)
    );
}


.hero-cover-rule {
  width: 74%;

  display: grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items: center;

  gap: 10px;

  margin-bottom: 24px;

  color: var(--gold);
}


.hero-cover-rule span {
  height: 1px;

  background:
    rgba(214,193,139,.43);
}


.hero-cover-rule i {
  font-size: 10px;
  font-style: normal;
}


.hero-cover-quote {
  max-width: 270px;

  color:
    rgba(244,237,221,.72);

  font-size: 16px;

  line-height: 1.75;

  font-style: italic;
}


/* Burgundy bookmark ribbon */

.hero-ribbon {
  position: absolute;

  z-index: 1;

  bottom: 21px;

  width: 75px;
  height: 330px;

  background:
    linear-gradient(
      90deg,
      #501727,
      #842c40 50%,
      #511524
    );

  box-shadow:
    0 15px 30px
    rgba(0,0,0,.30);

  transform:
    rotate(8deg)
    translateX(125px);
}


html[dir="rtl"]
.hero-ribbon {
  transform:
    rotate(-8deg)
    translateX(-125px);
}


/* bottom gold hairline */

.hero-bottom-line {
  position: absolute;

  left: 7%;
  right: 7%;

  bottom: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(214,193,139,.35),
      transparent
    );
}


/* =========================================================
   HERO RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

  .hero-shell {
    grid-template-columns:
      1fr .75fr;

    gap: 45px;
  }

  .hero-visual {
    min-height: 520px;
  }

  .hero-book-cover {
    max-width: 380px;
  }

}


@media (max-width: 850px) {

  .hero-luxury {
    min-height: auto;

    padding:
      140px 7%
      90px;
  }

  .hero-shell {
    grid-template-columns:
      1fr;

    gap: 65px;
  }

  .hero-copy-column {
    max-width: 720px;
  }

  .hero-visual {
    min-height: 570px;
  }

  .hero-book-cover {
    width: min(90%, 410px);
  }

}


@media (max-width: 550px) {

  .hero-luxury {
    padding:
      125px 23px
      75px;
  }

  .hero-luxury h1 {
    font-size:
      clamp(42px, 12.5vw, 61px);

    line-height: 1.08;
  }

  html[dir="rtl"]
  .hero-luxury h1 {
    font-size:
      clamp(39px, 11.8vw, 57px);

    line-height: 1.18;
  }

  .hero-luxury .hero-copy {
    font-size: 15px;

    line-height: 1.9;
  }

  html[dir="rtl"]
  .hero-luxury .hero-copy {
    font-size: 16px;

    line-height: 1.95;
  }

  .hero-actions {
    flex-direction: column;

    align-items: stretch;
  }

  .hero-luxury .button-primary,
  .hero-luxury .button-secondary {
    width: 100%;
  }

  .hero-signature {
    margin-top: 32px;
  }

  .hero-visual {
    min-height: 470px;
  }

  .hero-book-cover {
    width: min(92%, 335px);

    padding: 12px;
  }

  .hero-cover-inner {
    padding:
      35px 24px;
  }

  .hero-emblem {
    width: 75%;

    margin:
      24px auto 20px;
  }

  .hero-cover-quote {
    font-size: 13px;
  }

  .hero-ribbon {
    height: 260px;
    width: 58px;
  }

}


/* =========================================================
   STAGE 5C1B — RENDERED HERO ARTWORK
   ========================================================= */

.hero-rendered-visual {
  position: relative;

  min-height: 650px;

  display: flex;
  align-items: center;
  justify-content: center;
}


/* soft atmospheric glow behind artwork */
.hero-rendered-visual::before {
  content: "";

  position: absolute;

  width: 78%;
  height: 78%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(214, 193, 139, .17),
      rgba(117, 35, 54, .07) 48%,
      transparent 72%
    );

  filter: blur(32px);

  pointer-events: none;
}


.hero-render-frame {
  position: relative;
  z-index: 2;

  width: min(100%, 520px);

  overflow: hidden;

  border-radius: 8px;

  border:
    1px solid rgba(214, 193, 139, .28);

  background: #06251f;

  box-shadow:
    0 32px 85px rgba(0, 0, 0, .46),
    0 0 0 1px rgba(255, 255, 255, .018),
    0 0 60px rgba(214, 193, 139, .055);

  transform:
    perspective(1400px)
    rotateY(-2.5deg)
    rotateX(1deg);

  transition:
    transform .55s ease,
    box-shadow .55s ease;
}


html[dir="rtl"] .hero-render-frame {
  transform:
    perspective(1400px)
    rotateY(2.5deg)
    rotateX(1deg);
}


.hero-render-frame:hover {
  transform:
    perspective(1400px)
    rotateY(0deg)
    rotateX(0deg)
    translateY(-4px);

  box-shadow:
    0 40px 100px rgba(0, 0, 0, .52),
    0 0 65px rgba(214, 193, 139, .08);
}


.hero-render-image {
  display: block;

  width: 100%;
  height: auto;

  object-fit: cover;
}


/* subtle internal gold edge */
.hero-render-frame::after {
  content: "";

  position: absolute;

  inset: 10px;

  pointer-events: none;

  border:
    1px solid rgba(214, 193, 139, .10);

  border-radius: 4px;
}


/* Hide old CSS artwork objects if any remain */
.hero-book-cover,
.hero-ribbon,
.hero-visual-glow {
  display: none !important;
}


/* TABLET */
@media (max-width: 1050px) {

  .hero-rendered-visual {
    min-height: 570px;
  }

  .hero-render-frame {
    width: min(100%, 440px);
  }

}


/* TABLET / MOBILE STACK */
@media (max-width: 850px) {

  .hero-rendered-visual {
    min-height: auto;
  }

  .hero-render-frame {
    width: min(88vw, 500px);

    transform: none;
  }

  html[dir="rtl"] .hero-render-frame {
    transform: none;
  }

}


/* PHONE */
@media (max-width: 550px) {

  .hero-rendered-visual {
    margin-top: 8px;
  }

  .hero-render-frame {
    width: 100%;

    border-radius: 7px;
  }

  .hero-render-frame:hover {
    transform: none;
  }

}


/* =========================================================
   STAGE 5C1C — HERO IMAGE BLEND / DISSOLVE INTEGRATION
   ========================================================= */

/* Give the whole hero a more continuous atmosphere */
.hero-luxury {
  background:
    radial-gradient(circle at 18% 42%, rgba(214, 193, 139, 0.05), transparent 22%),
    radial-gradient(circle at 76% 38%, rgba(56, 108, 84, 0.18), transparent 28%),
    radial-gradient(circle at 72% 78%, rgba(117, 35, 54, 0.08), transparent 24%),
    linear-gradient(135deg, #031b17 0%, #063329 48%, #021713 100%);
}


/* Slightly relax the split so image/text feel part of one scene */
.hero-shell {
  gap: clamp(30px, 4vw, 70px);
}


/* Main visual area */
.hero-rendered-visual {
  position: relative;
  min-height: 670px;
  overflow: visible;
  isolation: isolate;
}


/* Soft glow behind image */
.hero-rendered-visual::before {
  content: "";
  position: absolute;
  inset: 8% -4% 10% -4%;
  border-radius: 24px;
  background:
    radial-gradient(circle at 38% 48%, rgba(214, 193, 139, 0.11), transparent 34%),
    radial-gradient(circle at 50% 50%, rgba(6, 31, 26, 0.25), transparent 68%);
  filter: blur(26px);
  pointer-events: none;
  z-index: 0;
}


/* REMOVE the "card/frame" feeling */
.hero-render-frame {
  position: relative;
  z-index: 2;
  width: min(100%, 620px);

  overflow: hidden;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}


/* Cancel old hover/card behavior */
.hero-render-frame:hover {
  transform: none !important;
  box-shadow: none !important;
}


/* Remove inner frame line */
.hero-render-frame::after {
  display: none !important;
}


/* Add a cinematic emerald overlay above image */
.hero-render-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(2, 22, 18, 0.20) 0%,
      rgba(4, 28, 23, 0.06) 28%,
      rgba(4, 32, 26, 0.08) 62%,
      rgba(2, 17, 14, 0.30) 100%
    );
}


/* Image itself */
.hero-render-image {
  display: block;
  position: relative;
  z-index: 1;

  width: 100%;
  height: auto;
  object-fit: cover;

  filter:
    saturate(0.96)
    contrast(1.02)
    brightness(0.98);

  transform: scale(1.035);
}


/* LTR default:
   image usually sits to the right, so fade toward the left (toward text)
   and softly at top/bottom */
.hero-render-frame,
.hero-render-image {
  -webkit-mask-image:
    linear-gradient(
      to left,
      rgba(0,0,0,1) 48%,
      rgba(0,0,0,.94) 62%,
      rgba(0,0,0,.65) 78%,
      rgba(0,0,0,.18) 92%,
      rgba(0,0,0,0) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.85) 8%,
      rgba(0,0,0,1) 16%,
      rgba(0,0,0,1) 84%,
      rgba(0,0,0,.72) 93%,
      rgba(0,0,0,0) 100%
    );

  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(
      to left,
      rgba(0,0,0,1) 48%,
      rgba(0,0,0,.94) 62%,
      rgba(0,0,0,.65) 78%,
      rgba(0,0,0,.18) 92%,
      rgba(0,0,0,0) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.85) 8%,
      rgba(0,0,0,1) 16%,
      rgba(0,0,0,1) 84%,
      rgba(0,0,0,.72) 93%,
      rgba(0,0,0,0) 100%
    );
  mask-composite: intersect;
}


/* RTL:
   in your Arabic layout the image sits on the LEFT,
   so fade toward the RIGHT (toward the text) */
html[dir="rtl"] .hero-render-frame,
html[dir="rtl"] .hero-render-image {
  -webkit-mask-image:
    linear-gradient(
      to right,
      rgba(0,0,0,1) 48%,
      rgba(0,0,0,.94) 62%,
      rgba(0,0,0,.65) 78%,
      rgba(0,0,0,.18) 92%,
      rgba(0,0,0,0) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.85) 8%,
      rgba(0,0,0,1) 16%,
      rgba(0,0,0,1) 84%,
      rgba(0,0,0,.72) 93%,
      rgba(0,0,0,0) 100%
    );

  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(
      to right,
      rgba(0,0,0,1) 48%,
      rgba(0,0,0,.94) 62%,
      rgba(0,0,0,.65) 78%,
      rgba(0,0,0,.18) 92%,
      rgba(0,0,0,0) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.85) 8%,
      rgba(0,0,0,1) 16%,
      rgba(0,0,0,1) 84%,
      rgba(0,0,0,.72) 93%,
      rgba(0,0,0,0) 100%
    );
  mask-composite: intersect;
}


/* Allow text to breathe more and feel layered over the same scene */
.hero-copy-column {
  position: relative;
  z-index: 3;
}

.hero-luxury .hero-copy {
  max-width: 720px;
}

.hero-luxury h1 {
  text-wrap: balance;
}


/* More elegant anchor line */
.hero-signature {
  color: rgba(234, 220, 183, 0.70);
}


/* Tablet */
@media (max-width: 1050px) {

  .hero-rendered-visual {
    min-height: 580px;
  }

  .hero-render-frame {
    width: min(100%, 520px);
  }

}


/* Mobile stacked layout */
@media (max-width: 850px) {

  .hero-shell {
    gap: 42px;
  }

  .hero-rendered-visual {
    min-height: auto;
  }

  .hero-render-frame {
    width: min(100%, 560px);
    margin-inline: auto;
  }

  .hero-render-frame,
  .hero-render-image,
  html[dir="rtl"] .hero-render-frame,
  html[dir="rtl"] .hero-render-image {
    -webkit-mask-image:
      linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,.88) 8%,
        rgba(0,0,0,1) 16%,
        rgba(0,0,0,1) 78%,
        rgba(0,0,0,.78) 90%,
        rgba(0,0,0,0) 100%
      );
            mask-image:
      linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,.88) 8%,
        rgba(0,0,0,1) 16%,
        rgba(0,0,0,1) 78%,
        rgba(0,0,0,.78) 90%,
        rgba(0,0,0,0) 100%
      );
  }

}


/* Phone */
@media (max-width: 550px) {

  .hero-render-frame {
    width: 100%;
  }

  .hero-render-image {
    transform: scale(1.025);
  }

  .hero-luxury .hero-copy {
    max-width: 100%;
  }

}


/* =========================================================
   STAGE 5C1D — MOBILE HERO AS INTEGRATED BACKGROUND
   ========================================================= */

@media (max-width: 850px) {

  .hero-luxury {
    position: relative;
    overflow: hidden;
  }

  .hero-shell {
    position: relative;
    display: block;
    min-height: 820px;
    padding-top: 36px;
    padding-bottom: 44px;
  }

  /* Make the image layer fill the hero */
  .hero-rendered-visual {
    position: absolute;
    inset: 0;
    min-height: 100%;
    z-index: 0;
    display: block;
    pointer-events: none;
  }

  .hero-render-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .hero-render-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    /* dark emerald cinematic overlay for readability */
    background:
      linear-gradient(
        180deg,
        rgba(2, 18, 15, 0.70) 0%,
        rgba(2, 28, 22, 0.50) 24%,
        rgba(4, 38, 31, 0.26) 46%,
        rgba(2, 22, 18, 0.58) 74%,
        rgba(1, 13, 11, 0.86) 100%
      ),
      radial-gradient(
        circle at 50% 38%,
        rgba(214, 193, 139, 0.08),
        transparent 34%
      );
  }

  .hero-render-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform: scale(1.06);
    filter:
      saturate(0.92)
      contrast(1.03)
      brightness(0.76);
  }

  /* Remove mask behavior on mobile so it behaves like a full background */
  .hero-render-frame,
  .hero-render-image,
  html[dir="rtl"] .hero-render-frame,
  html[dir="rtl"] .hero-render-image {
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }

  /* Text/content sits above the image */
  .hero-copy-column {
    position: relative;
    z-index: 3;
    min-height: 820px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 20px;
  }

  .hero-copy {
    width: 100%;
    max-width: 100%;
    text-align: center;
    margin: 0 auto;
  }

  .hero-copy > * {
    position: relative;
    z-index: 3;
  }

  .hero-luxury .hero-kicker,
  .hero-luxury .hero-signature,
  .hero-luxury p,
  .hero-luxury h1 {
    text-shadow:
      0 2px 18px rgba(0, 0, 0, 0.36),
      0 1px 2px rgba(0, 0, 0, 0.24);
  }

  .hero-luxury h1 {
    max-width: 95%;
    margin-inline: auto;
  }

  .hero-luxury p {
    max-width: 92%;
    margin-inline: auto;
  }

  .hero-cta {
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero-bottom-line {
    position: relative;
    z-index: 3;
  }
}


/* Slightly more compact phones */
@media (max-width: 550px) {

  .hero-shell {
    min-height: 760px;
    padding-top: 24px;
    padding-bottom: 34px;
  }

  .hero-copy-column {
    min-height: 760px;
    padding-inline: 16px;
  }

  .hero-render-image {
    transform: scale(1.08);
    object-position: center top;
  }

  .hero-luxury h1 {
    max-width: 100%;
  }

  .hero-luxury p {
    max-width: 100%;
  }
}


/* =========================================================
   STAGE 5C1E — FINAL MOBILE HERO ORGANIZATION
   ========================================================= */

@media (max-width: 850px) {

  /* One unified hero scene */
  .hero-luxury {
    position: relative;

    min-height: 780px;

    display: flex;
    align-items: center;

    padding:
      120px 24px
      72px;

    overflow: hidden;

    background: #03251f;
  }


  /* Remove decorative desktop grid on small screens */
  .hero-atmosphere,
  .hero-book-lines {
    display: none;
  }


  /*
     Important:
     make hero-shell non-positioned so the artwork
     can use .hero-luxury as its positioning parent.
  */
  .hero-shell {
    position: static;

    display: block;

    width: 100%;
    min-height: 0;

    padding: 0;
    margin: 0;
  }


  /* =====================================================
     IMAGE = FULL HERO BACKGROUND
     ===================================================== */

  .hero-rendered-visual {
    position: absolute;

    inset: 0;

    z-index: 0;

    width: 100%;
    height: 100%;
    min-height: 100%;

    display: block;

    margin: 0;

    pointer-events: none;
  }


  .hero-render-frame {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;

    overflow: hidden;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    transform: none !important;

    -webkit-mask-image: none !important;
    mask-image: none !important;
  }


  .hero-render-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /* Keeps the box/logo area visible */
    object-position: 48% center;

    transform: scale(1.04);

    filter:
      saturate(.90)
      contrast(1.02)
      brightness(.72);

    -webkit-mask-image: none !important;
    mask-image: none !important;
  }


  /* Dark luxury overlay above artwork */
  .hero-render-frame::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
      linear-gradient(
        180deg,
        rgba(1, 20, 16, .74) 0%,
        rgba(2, 28, 23, .56) 24%,
        rgba(3, 38, 30, .43) 48%,
        rgba(2, 27, 22, .60) 72%,
        rgba(1, 17, 14, .88) 100%
      ),
      radial-gradient(
        circle at 50% 42%,
        rgba(214, 193, 139, .07),
        transparent 42%
      );
  }


  .hero-render-frame::after {
    display: none !important;
  }


  /* =====================================================
     CONTENT OVER BACKGROUND
     ===================================================== */

  .hero-copy-column {
    position: relative;

    z-index: 5;

    width: 100%;
    max-width: 620px;

    min-height: 620px;

    margin: 0 auto;

    display: flex;

    /* THIS fixes the broken horizontal layout */
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;
  }


  .hero-luxury .eyebrow {
    display: flex;

    width: auto;

    margin:
      0 auto
      26px;

    justify-content: center;

    font-size: 10px;

    letter-spacing: .20em;
  }


  .hero-luxury .eyebrow::before {
    width: 30px;
  }


  .hero-luxury h1 {
    width: 100%;
    max-width: 560px;

    margin: 0 auto;

    text-align: center;

    font-size:
      clamp(41px, 9vw, 61px);

    line-height: 1.18;

    letter-spacing: 0;
  }


  html[dir="rtl"] .hero-luxury h1 {
    font-size:
      clamp(39px, 9vw, 58px);

    line-height: 1.28;
  }


  .hero-luxury h1 span,
  .hero-luxury h1 em {
    display: block;

    width: 100%;
  }


  .hero-luxury h1 em {
    margin-top: 8px;
  }


  /* Normal paragraph width — no more one-word columns */
  .hero-luxury .hero-copy {
    display: block;

    width: 100%;
    max-width: 520px;

    margin:
      28px auto
      0;

    text-align: center;

    font-size: 16px;

    line-height: 1.9;

    color:
      rgba(244, 237, 221, .82);
  }


  html[dir="rtl"] .hero-luxury .hero-copy {
    font-size: 17px;

    line-height: 2;
  }


  /* =====================================================
     BUTTONS
     ===================================================== */

  .hero-luxury .hero-actions {
    width: 100%;
    max-width: 360px;

    margin:
      32px auto
      0;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 12px;
  }


  .hero-luxury .button-primary,
  .hero-luxury .button-secondary {
    width: 100%;
    min-height: 52px;

    margin: 0;

    justify-content: center;

    text-align: center;
  }


  /* =====================================================
     TAGLINE
     ===================================================== */

  .hero-signature {
    width: 100%;

    margin:
      30px auto
      0;

    display: flex;

    justify-content: center;
    align-items: center;

    gap: 12px;

    text-align: center;

    color:
      rgba(234, 220, 183, .80);
  }


  .hero-signature-line {
    width: 34px;
  }


  /* Improve text readability over photograph */
  .hero-copy-column h1,
  .hero-copy-column p,
  .hero-copy-column .eyebrow,
  .hero-copy-column .hero-signature {
    text-shadow:
      0 2px 16px rgba(0, 0, 0, .50),
      0 1px 2px rgba(0, 0, 0, .35);
  }


  .hero-bottom-line {
    z-index: 6;
  }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 550px) {

  .hero-luxury {
    min-height: 760px;

    padding:
      108px 22px
      60px;
  }


  .hero-copy-column {
    min-height: 590px;
  }


  .hero-render-image {
    object-position: 46% center;

    transform: scale(1.07);
  }


  html[dir="rtl"] .hero-luxury h1 {
    font-size:
      clamp(37px, 10.4vw, 51px);

    line-height: 1.30;
  }


  html[dir="ltr"] .hero-luxury h1 {
    font-size:
      clamp(39px, 10.5vw, 54px);
  }


  .hero-luxury .hero-copy {
    max-width: 94%;

    font-size: 15px;
  }


  html[dir="rtl"] .hero-luxury .hero-copy {
    font-size: 16px;
  }


  .hero-luxury .hero-actions {
    max-width: 300px;
  }


  .hero-signature {
    font-size: 13px;
  }

}


/* =========================================================
   STAGE 5C2 — LUXURY ARABIC TYPOGRAPHY
   ========================================================= */


/* ---------------------------------------------------------
   Arabic reading font
   --------------------------------------------------------- */

html[lang="ar"] body {
  font-family:
    "Noto Naskh Arabic",
    Georgia,
    serif;
}


/* Body copy */

html[lang="ar"] p,
html[lang="ar"] .story p,
html[lang="ar"] .edition-card p,
html[lang="ar"] .step p,
html[lang="ar"] .author-box p {
  font-family:
    "Noto Naskh Arabic",
    serif;

  font-weight: 400;

  letter-spacing: 0;
}


/* ---------------------------------------------------------
   Arabic luxury / calligraphic display font
   --------------------------------------------------------- */

html[lang="ar"] .hero-luxury h1,
html[lang="ar"] .story h2,
html[lang="ar"] .section-heading h2,
html[lang="ar"] .how h2,
html[lang="ar"] .author-box h2,
html[lang="ar"] .closing h2 {
  font-family:
    "Amiri",
    "Noto Naskh Arabic",
    serif;

  font-weight: 400;

  letter-spacing: 0;
}


/* Hero specifically */

html[lang="ar"] .hero-luxury h1 {
  font-size:
    clamp(58px, 5.8vw, 96px);

  line-height: 1.28;

  text-wrap: balance;
}


/* Gold second statement gets slightly more presence */

html[lang="ar"] .hero-luxury h1 em {
  font-family:
    "Amiri",
    "Noto Naskh Arabic",
    serif;

  font-weight: 400;

  line-height: 1.28;
}


/* ---------------------------------------------------------
   Tagline / poetic phrases
   --------------------------------------------------------- */

html[lang="ar"] .hero-signature,
html[lang="ar"] .closing span {
  font-family:
    "Amiri",
    "Noto Naskh Arabic",
    serif;

  font-size: 18px;

  font-style: normal;

  line-height: 1.7;
}


/* ---------------------------------------------------------
   Navigation + buttons remain readable
   --------------------------------------------------------- */

html[lang="ar"] .desktop-nav,
html[lang="ar"] .desktop-nav a,
html[lang="ar"] .mobile-menu a,
html[lang="ar"] .header-button,
html[lang="ar"] .language-toggle,
html[lang="ar"] .button-primary,
html[lang="ar"] .button-secondary {
  font-family:
    "Noto Naskh Arabic",
    serif;

  font-weight: 600;

  letter-spacing: 0;
}


/* Arabic navigation needs slightly larger optical size */

html[lang="ar"] .desktop-nav {
  font-size: 14px;
}


html[lang="ar"] .header-button,
html[lang="ar"] .button-primary,
html[lang="ar"] .button-secondary {
  font-size: 15px;
}


/* ---------------------------------------------------------
   Small labels
   --------------------------------------------------------- */

html[lang="ar"] .eyebrow,
html[lang="ar"] .section-label {
  font-family:
    "Noto Naskh Arabic",
    serif;

  font-weight: 600;

  letter-spacing: 0;

  font-size: 14px;
}


/* ---------------------------------------------------------
   Cards / step titles
   --------------------------------------------------------- */

html[lang="ar"] .edition-card h3,
html[lang="ar"] .step h3 {
  font-family:
    "Amiri",
    "Noto Naskh Arabic",
    serif;

  font-weight: 400;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 850px) {

  html[lang="ar"] .hero-luxury h1 {
    font-size:
      clamp(48px, 9vw, 68px);

    line-height: 1.30;
  }

}


/* =========================================================
   PHONE
   ========================================================= */

@media (max-width: 550px) {

  html[lang="ar"] .hero-luxury h1 {
    font-size:
      clamp(43px, 11.2vw, 57px);

    line-height: 1.34;
  }


  html[lang="ar"] .hero-luxury .hero-copy {
    font-family:
      "Noto Naskh Arabic",
      serif;

    font-size: 17px;

    line-height: 2;
  }


  html[lang="ar"] .hero-signature {
    font-size: 17px;
  }


  html[lang="ar"] .button-primary,
  html[lang="ar"] .button-secondary {
    font-size: 16px;
  }

}


/* =========================================================
   STAGE 5C2B — LUXURY TYPOGRAPHY COLOR REFINEMENT
   ========================================================= */

:root {
  --fk-ivory-bright: #F6EBD7;
  --fk-ivory-soft: #EEDFC4;
  --fk-gold-rich: #D4B373;
  --fk-gold-soft: #CDB47D;
}


/* =========================================================
   ARABIC HERO
   ========================================================= */

html[lang="ar"] .hero-luxury h1 span {
  color: var(--fk-ivory-bright);
}


html[lang="ar"] .hero-luxury h1 em {
  color: var(--fk-gold-rich);
}


html[lang="ar"] .hero-luxury .hero-copy {
  color: rgba(246, 235, 215, .88);
}


html[lang="ar"] .hero-luxury .eyebrow {
  color: var(--fk-gold-rich);
}


html[lang="ar"] .hero-signature {
  color: var(--fk-gold-soft);
}


/* A subtle shadow so text remains readable over artwork */
html[lang="ar"] .hero-luxury h1 {
  text-shadow:
    0 2px 18px rgba(0, 0, 0, .28),
    0 1px 2px rgba(0, 0, 0, .22);
}


html[lang="ar"] .hero-luxury .hero-copy {
  text-shadow:
    0 2px 12px rgba(0, 0, 0, .30);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

html[lang="ar"] .desktop-nav a {
  color: rgba(246, 235, 215, .78);
  opacity: 1;
}


html[lang="ar"] .desktop-nav a:hover {
  color: var(--fk-gold-rich);
}


html[lang="ar"] .mobile-menu a {
  color: var(--fk-ivory-bright);
}


/* =========================================================
   SECTION TITLES
   ========================================================= */

html[lang="ar"] .editions h2,
html[lang="ar"] .how h2,
html[lang="ar"] .closing h2 {
  color: var(--fk-ivory-bright);
}


html[lang="ar"] .story h2,
html[lang="ar"] .authors h2 {
  color: #173128;
}


/* =========================================================
   SMALL LABELS
   ========================================================= */

html[lang="ar"] .section-label,
html[lang="ar"] .eyebrow {
  color: var(--fk-gold-rich);
}


/* =========================================================
   DARK SECTION BODY COPY
   ========================================================= */

html[lang="ar"] .editions p,
html[lang="ar"] .how p,
html[lang="ar"] .closing span {
  color: rgba(246, 235, 215, .76);
}


/* =========================================================
   EDITION / STEP TITLES
   ========================================================= */

html[lang="ar"] .edition-card h3,
html[lang="ar"] .step h3 {
  color: var(--fk-gold-rich);
}


/* =========================================================
   BUTTONS
   ========================================================= */

html[lang="ar"] .button-primary {
  color: #10271F;

  background:
    var(--fk-ivory-bright);
}


html[lang="ar"] .button-secondary {
  color:
    var(--fk-ivory-bright);

  border-color:
    rgba(212, 179, 115, .48);
}


/* =========================================================
   PHONE — slightly brighter for outdoor readability
   ========================================================= */

@media (max-width: 550px) {

  html[lang="ar"] .hero-luxury h1 span {
    color: #FFF1D8;
  }

  html[lang="ar"] .hero-luxury h1 em {
    color: #E0BE78;
  }

  html[lang="ar"] .hero-luxury .hero-copy {
    color: rgba(255, 241, 216, .90);
  }

}


/* =========================================================
   STAGE 5C2C — FINAL HERO TYPOGRAPHY COLOR RESET
   ========================================================= */

html[lang="ar"] .hero-luxury h1,
html[lang="ar"] .hero-luxury h1 span,
html[lang="ar"] .hero-luxury h1 em {
  color: #F6EBD7 !important;

  -webkit-text-fill-color: #F6EBD7 !important;

  background: none !important;
  background-image: none !important;

  text-shadow:
    0 3px 22px rgba(0, 0, 0, .42),
    0 1px 3px rgba(0, 0, 0, .26) !important;
}


/* Remove any accidental gradient/text clipping */
html[lang="ar"] .hero-luxury h1 *,
html[lang="ar"] .hero-luxury h1 em {
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}


/* Brand label above headline */
html[lang="ar"] .hero-luxury .eyebrow {
  color: #D4B373 !important;
  -webkit-text-fill-color: #D4B373 !important;
}


/* Body copy */
html[lang="ar"] .hero-luxury .hero-copy {
  color: rgba(246, 235, 215, .90) !important;
  -webkit-text-fill-color: rgba(246, 235, 215, .90) !important;

  text-shadow:
    0 2px 14px rgba(0, 0, 0, .40) !important;
}


/* Bottom poetic tagline */
html[lang="ar"] .hero-luxury .hero-signature,
html[lang="ar"] .hero-luxury .hero-signature span {
  color: #D4B373 !important;
  -webkit-text-fill-color: #D4B373 !important;
}


/* Buttons */
html[lang="ar"] .hero-luxury .button-primary {
  color: #102A22 !important;
  -webkit-text-fill-color: #102A22 !important;

  background: #F6EBD7 !important;
}


html[lang="ar"] .hero-luxury .button-secondary {
  color: #F6EBD7 !important;
  -webkit-text-fill-color: #F6EBD7 !important;

  background: rgba(3, 31, 25, .24) !important;

  border-color:
    rgba(212, 179, 115, .55) !important;
}


/* Navigation */
html[lang="ar"] .desktop-nav a {
  color: rgba(246, 235, 215, .82) !important;
  -webkit-text-fill-color: rgba(246, 235, 215, .82) !important;
}


html[lang="ar"] .desktop-nav a:hover {
  color: #D4B373 !important;
  -webkit-text-fill-color: #D4B373 !important;
}


/* Mobile menu */
html[lang="ar"] .mobile-menu a {
  color: #F6EBD7 !important;
  -webkit-text-fill-color: #F6EBD7 !important;
}


/* Mobile: keep headline clean and bright */
@media (max-width: 850px) {

  html[lang="ar"] .hero-luxury h1,
  html[lang="ar"] .hero-luxury h1 span,
  html[lang="ar"] .hero-luxury h1 em {
    color: #FFF1DC !important;
    -webkit-text-fill-color: #FFF1DC !important;
  }


  html[lang="ar"] .hero-luxury .hero-copy {
    color: rgba(255, 241, 220, .92) !important;
    -webkit-text-fill-color: rgba(255, 241, 220, .92) !important;
  }

}


/* =========================================================
   STAGE 5C2D — ARABIC HERO OPTICAL LINE SPACING
   ========================================================= */

/* Desktop: ignore manual mobile breaks */
.ar-mobile-break {
  display: none;
}


/* Phone / small tablet */
@media (max-width: 850px) {

  html[lang="ar"] .ar-mobile-break {
    display: block;
  }


  html[lang="ar"] .hero-luxury h1 span {
    line-height: 1.38;
  }


  html[lang="ar"] .hero-luxury h1 em {
    margin-top: 20px;

    line-height: 1.50;

    font-size: .96em;
  }

}


/* Small phones need slightly more breathing */
@media (max-width: 550px) {

  html[lang="ar"] .hero-luxury h1 span {
    line-height: 1.40;
  }


  html[lang="ar"] .hero-luxury h1 em {
    margin-top: 22px;

    line-height: 1.54;

    font-size: .95em;
  }

}