/* =========================================================
   FOLIO & KEY
   COMBINED STAGE A — FINAL HERO SYSTEM
   ========================================================= */

:root {
  --fk-forest: #032820;
  --fk-forest-deep: #021914;

  --fk-ivory: #F7EBD5;
  --fk-ivory-soft: #EADCC2;

  --fk-gold: #D4B373;
  --fk-gold-soft: #C8AE78;
}


/* =========================================================
   HEADER — FINAL PROPORTIONS
   ========================================================= */

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

  padding:
    12px 4.5%;

  background:
    rgba(2, 35, 28, .92);

  border-bottom:
    1px solid rgba(212, 179, 115, .14);
}


/* Keep logo generous but readable */
.brand-logo {
  width: auto;
  height: 88px;
  max-width: 390px;

  object-fit: contain;
}


/* Navigation */
html[lang="ar"] .desktop-nav {
  font-family:
    "Noto Naskh Arabic",
    serif;

  font-size: 15px;
}

html[lang="ar"] .desktop-nav a {
  color:
    rgba(247, 235, 213, .82) !important;

  opacity: 1;
}

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


/* =========================================================
   HERO — MASTER DESKTOP SYSTEM
   ========================================================= */

.hero-luxury {
  position: relative;

  min-height: 900px;

  display: flex;
  align-items: center;

  overflow: hidden;

  padding:
    160px 6%
    90px;

  background:
    radial-gradient(
      circle at 23% 43%,
      rgba(212,179,115,.045),
      transparent 24%
    ),
    radial-gradient(
      circle at 73% 43%,
      rgba(28,89,69,.25),
      transparent 31%
    ),
    radial-gradient(
      circle at 68% 84%,
      rgba(110,31,48,.06),
      transparent 25%
    ),
    linear-gradient(
      135deg,
      #021A15 0%,
      #06342A 50%,
      #021813 100%
    );
}


/* Very subtle editorial structure */
.hero-atmosphere {
  opacity: .12;
}

.hero-book-lines {
  opacity: .035;
}


/* Main desktop composition */
.hero-shell {
  position: relative;
  z-index: 3;

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

  margin-inline: auto;

  display: grid;

  grid-template-columns:
    minmax(420px, .86fr)
    minmax(560px, 1.14fr);

  align-items: center;

  gap:
    clamp(10px, 2.2vw, 40px);
}


/* =========================================================
   DESKTOP ARTWORK — DISSOLVED INTO BACKGROUND
   ========================================================= */

.hero-rendered-visual {
  position: relative;

  min-height: 690px;

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

  isolation: isolate;
}


.hero-rendered-visual::before {
  content: "";

  position: absolute;

  inset: 8% -10%;

  z-index: 0;

  background:
    radial-gradient(
      circle at 42% 50%,
      rgba(212,179,115,.11),
      transparent 38%
    );

  filter: blur(36px);

  pointer-events: none;
}


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

  width:
    min(112%, 670px);

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

  overflow: hidden;

  background: transparent !important;

  box-shadow: none !important;

  transform: none !important;

  -webkit-mask-image:
    linear-gradient(
      to right,
      rgba(0,0,0,1) 45%,
      rgba(0,0,0,.94) 60%,
      rgba(0,0,0,.63) 76%,
      rgba(0,0,0,.16) 91%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.85) 6%,
      #000 14%,
      #000 86%,
      rgba(0,0,0,.72) 94%,
      transparent 100%
    );

  -webkit-mask-composite: source-in;

  mask-image:
    linear-gradient(
      to right,
      #000 45%,
      rgba(0,0,0,.94) 60%,
      rgba(0,0,0,.63) 76%,
      rgba(0,0,0,.16) 91%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.85) 6%,
      #000 14%,
      #000 86%,
      rgba(0,0,0,.72) 94%,
      transparent 100%
    );

  mask-composite: intersect;
}


/* Arabic image is on left, fade toward right */
html[dir="rtl"] .hero-render-frame {
  -webkit-mask-image:
    linear-gradient(
      to right,
      #000 46%,
      rgba(0,0,0,.94) 60%,
      rgba(0,0,0,.62) 76%,
      rgba(0,0,0,.15) 91%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.85) 6%,
      #000 14%,
      #000 86%,
      rgba(0,0,0,.72) 94%,
      transparent 100%
    );
}


/* English image sits right visually */
html[dir="ltr"] .hero-render-frame {
  -webkit-mask-image:
    linear-gradient(
      to left,
      #000 46%,
      rgba(0,0,0,.94) 60%,
      rgba(0,0,0,.62) 76%,
      rgba(0,0,0,.15) 91%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.85) 6%,
      #000 14%,
      #000 86%,
      rgba(0,0,0,.72) 94%,
      transparent 100%
    );
}


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


.hero-render-frame::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 2;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(2,25,20,.17),
      rgba(3,35,27,.04) 45%,
      rgba(2,21,17,.25)
    );
}


.hero-render-image {
  display: block;

  width: 100%;
  height: auto;

  object-fit: cover;

  transform: scale(1.025);

  filter:
    saturate(.92)
    contrast(1.02)
    brightness(.91);
}


/* =========================================================
   COPY COLUMN — DESKTOP
   ========================================================= */

.hero-copy-column {
  position: relative;
  z-index: 5;

  max-width: 850px;
}


/* localized shadow behind copy, not entire artwork */
.hero-copy-column::before {
  content: "";

  position: absolute;

  inset:
    -12% -7%
    -10% -5%;

  z-index: -1;

  background:
    radial-gradient(
      ellipse at center,
      rgba(2,28,22,.50) 0%,
      rgba(2,28,22,.28) 43%,
      transparent 72%
    );

  filter: blur(12px);

  pointer-events: none;
}


/* =========================================================
   ARABIC DISPLAY TYPOGRAPHY
   ========================================================= */

html[lang="ar"] .hero-luxury h1 {
  max-width: 800px;

  margin: 0;

  font-family:
    "Amiri",
    "Noto Naskh Arabic",
    serif;

  font-size:
    clamp(62px, 5.6vw, 98px);

  line-height: 1.26;

  font-weight: 400;

  letter-spacing: 0;

  text-align: right;

  color:
    var(--fk-ivory) !important;

  -webkit-text-fill-color:
    var(--fk-ivory) !important;

  background: none !important;

  text-shadow:
    0 3px 24px rgba(0,0,0,.32),
    0 1px 3px rgba(0,0,0,.22);
}


html[lang="ar"] .hero-luxury h1 span,
html[lang="ar"] .hero-luxury h1 em {
  display: block;

  color:
    var(--fk-ivory) !important;

  -webkit-text-fill-color:
    var(--fk-ivory) !important;

  background: none !important;
}


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

  font-family:
    "Amiri",
    serif;

  font-style: normal;

  line-height: 1.30;
}


/* English headline stays classic editorial */
html[lang="en"] .hero-luxury h1 {
  color:
    var(--fk-ivory);

  text-shadow:
    0 3px 22px rgba(0,0,0,.30);
}


/* Manual Arabic breaks mobile-only */
.ar-mobile-break {
  display: none;
}


/* =========================================================
   EYEBROW
   ========================================================= */

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

  -webkit-text-fill-color:
    var(--fk-gold) !important;

  font-family:
    "Noto Naskh Arabic",
    serif;

  font-size: 15px;

  font-weight: 600;

  letter-spacing: 0;
}


/* =========================================================
   BODY COPY
   ========================================================= */

html[lang="ar"] .hero-luxury .hero-copy {
  max-width: 690px;

  margin-top: 28px;

  color:
    rgba(247,235,213,.91) !important;

  -webkit-text-fill-color:
    rgba(247,235,213,.91) !important;

  font-family:
    "Noto Naskh Arabic",
    serif;

  font-size: 18px;

  line-height: 2;

  font-weight: 400;

  text-shadow:
    0 2px 13px rgba(0,0,0,.34);
}


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

.hero-luxury .hero-actions {
  margin-top: 32px;

  gap: 12px;
}


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

  padding:
    12px 24px;

  border-radius:
    999px;
}


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

  font-size: 16px;

  font-weight: 600;
}


.hero-luxury .button-primary {
  background:
    var(--fk-ivory) !important;

  color:
    #123128 !important;

  -webkit-text-fill-color:
    #123128 !important;
}


.hero-luxury .button-secondary {
  color:
    var(--fk-ivory) !important;

  -webkit-text-fill-color:
    var(--fk-ivory) !important;

  border:
    1px solid rgba(212,179,115,.48);

  background:
    rgba(3,35,28,.19);
}


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

html[lang="ar"] .hero-signature {
  margin-top: 30px;

  color:
    var(--fk-gold-soft) !important;

  -webkit-text-fill-color:
    var(--fk-gold-soft) !important;

  font-family:
    "Amiri",
    serif;

  font-size: 19px;

  font-style: normal;
}


/* =========================================================
   TABLET / PHONE
   IMAGE BECOMES THE ACTUAL HERO BACKGROUND
   ========================================================= */

@media (max-width: 850px) {

  .site-header {
    min-height: 92px;

    padding:
      9px 18px;
  }


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


  .hero-luxury {
    position: relative;

    min-height: 790px;

    display: flex;
    align-items: center;

    padding:
      116px 23px
      62px;

    overflow: hidden;

    background:
      var(--fk-forest-deep);
  }


  .hero-atmosphere,
  .hero-book-lines {
    display: none !important;
  }


  .hero-shell {
    position: static;

    display: block;

    width: 100%;

    padding: 0;
    margin: 0;
  }


  /* image fills complete hero */
  .hero-rendered-visual {
    position: absolute;

    inset: 0;

    z-index: 0;

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

    margin: 0;

    display: block;

    pointer-events: none;
  }


  .hero-render-frame {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;

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

    overflow: hidden;

    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;

    object-position:
      47% center;

    transform:
      scale(1.055);

    filter:
      saturate(.87)
      contrast(1.01)
      brightness(.68);

    -webkit-mask-image:
      none !important;

    mask-image:
      none !important;
  }


  /* Deep readable emerald veil */
  .hero-render-frame::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
      linear-gradient(
        180deg,
        rgba(1,19,15,.72) 0%,
        rgba(2,27,22,.50) 21%,
        rgba(2,34,27,.43) 48%,
        rgba(2,26,21,.59) 72%,
        rgba(1,15,12,.87) 100%
      );
  }


  /* actual content floats above artwork */
  .hero-copy-column {
    position: relative;

    z-index: 5;

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

    min-height: 620px;

    margin-inline: auto;

    display: flex;

    flex-direction: column;

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

    text-align: center;
  }


  /* focused vignette behind words */
  .hero-copy-column::before {
    inset:
      5% -10%;

    background:
      radial-gradient(
        ellipse at center,
        rgba(1,24,19,.58) 0%,
        rgba(1,24,19,.33) 44%,
        transparent 75%
      );

    filter:
      blur(16px);
  }


  /* Arabic controlled line composition */
  html[lang="ar"]
  .ar-mobile-break {
    display: block;
  }


  html[lang="ar"]
  .hero-luxury h1 {
    width: 100%;
    max-width: 560px;

    margin-inline: auto;

    font-size:
      clamp(47px, 9vw, 66px);

    line-height:
      1.34;

    text-align: center;
  }


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


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

    line-height:
      1.44;

    font-size:
      .96em;
  }


  html[lang="ar"]
  .hero-luxury .hero-copy {
    width: 100%;
    max-width: 510px;

    margin:
      25px auto
      0;

    text-align:
      center;

    font-size:
      17px;

    line-height:
      2;
  }


  html[lang="ar"]
  .hero-luxury .eyebrow {
    margin:
      0 auto
      24px;
  }


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

    margin:
      30px auto
      0;

    display: flex;

    flex-direction: column;

    gap: 11px;
  }


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

    min-height: 49px;

    margin: 0;

    justify-content: center;
  }


  html[lang="ar"]
  .hero-signature {
    justify-content: center;

    margin:
      28px auto
      0;

    font-size:
      18px;
  }

}


/* =========================================================
   SMALL PHONE FINAL TUNING
   ========================================================= */

@media (max-width: 550px) {

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

    padding:
      8px 16px;
  }


  .brand-logo {
    height: 68px;
    max-width: 235px;
  }


  .language-toggle {
    min-width: 58px;
    min-height: 52px;
  }


  .menu-toggle {
    width: 58px;
    height: 58px;
  }


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

    padding:
      105px 20px
      54px;
  }


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

    transform:
      scale(1.075);
  }


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


  html[lang="ar"]
  .hero-luxury h1 {
    max-width: 100%;

    font-size:
      clamp(43px, 11vw, 55px);

    line-height:
      1.36;
  }


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


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

    line-height:
      1.48;

    font-size:
      .94em;
  }


  html[lang="ar"]
  .hero-luxury .hero-copy {
    max-width:
      95%;

    font-size:
      16px;

    line-height:
      2;
  }


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

}


/* =========================================================
   ENGLISH MOBILE
   ========================================================= */

@media (max-width: 550px) {

  html[lang="en"]
  .hero-luxury h1 {
    max-width:
      100%;

    margin-inline:
      auto;

    text-align:
      center;

    font-size:
      clamp(42px, 10.5vw, 56px);

    line-height:
      1.10;
  }


  html[lang="en"]
  .hero-luxury .hero-copy {
    text-align:
      center;
  }

}