/* ==========================================================================
   Saudi Face 2026 — main.css
   --------------------------------------------------------------------------
   Brand tokens + sf-* components, lifted from the approved design reference
   (design-reference/saudi-face-2026-standalone.html). Repeated hexes are
   converted to the CSS custom properties named in DESIGN_SYSTEM.md.

   Load AFTER bootstrap.min.css — several rules rely on source order to beat
   Bootstrap's equal-specificity defaults.

   Arabic (RTL) overrides live next to each component in a [dir="rtl"] block,
   so index.html and ar/index.html share this one stylesheet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colour */
  --sf-ivory: #F7F4EE;
  --sf-gold: #B98A2F;
  --sf-gold-light: #D9AE4E;
  --sf-gold-deep: #A8791F;
  --sf-gold-mid: #C99C3D;
  --sf-charcoal: #2B3537;
  --sf-ink-muted: #5C6B6E;
  --sf-stone: #8A8371;
  --sf-white: #FFFFFF;

  /* Hairlines — DESIGN_SYSTEM groups these as "--sf-hairline-warm"; split
     here because the three values are used on different components. */
  --sf-hairline: #E3DDCE;        /* borders, dividers, card outlines */
  --sf-hairline-warm: #DDD6C4;   /* about section rows */
  --sf-hairline-menu: #E9E3D3;   /* mobile menu-footer divider */
  --sf-hairline-soft: #EDE8DB;   /* countdown column separators */

  --sf-gold-frame: #D9C89B;      /* hero arch outline */
  --sf-dark-muted: #A9B4B2;      /* body text on the dark band */
  --sf-sand: #D8CFBB;            /* announcement bar text */
  --sf-outline: #C8C0AC;         /* outline / language pill border */

  /* Brand marks (payment badges only) */
  --sf-visa: #1A1F71;
  --sf-mc-red: #EB001B;
  --sf-mc-orange: #F79E1B;

  /* Gradients */
  --sf-grad-gold: linear-gradient(135deg, var(--sf-gold), var(--sf-gold-light));
  --sf-grad-cta: linear-gradient(118deg, var(--sf-gold-deep) 0%, var(--sf-gold) 34%, var(--sf-gold-light) 78%, var(--sf-gold-mid) 100%);

  /* Shadows */
  --sf-shadow-gold: 0 6px 18px rgba(185, 138, 47, 0.28);
  --sf-shadow-gold-hover: 0 12px 26px rgba(185, 138, 47, 0.42);
  --sf-shadow-cta-card: 0 30px 70px rgba(140, 102, 32, 0.28);
  --sf-shadow-cta-btn: 0 10px 26px rgba(30, 37, 39, 0.35);
  --sf-shadow-cta-btn-hover: 0 16px 38px rgba(30, 37, 39, 0.4), 0 0 0 6px rgba(255, 255, 255, 0.16);
  --sf-shadow-badge: 0 1px 4px rgba(43, 53, 55, 0.05);
  --sf-shadow-burger: 0 2px 10px rgba(43, 53, 55, 0.06);

  /* Motion */
  --sf-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --sf-transition: all 0.25s ease;

  /* Type */
  --sf-font-en: 'Poppins', sans-serif;
  --sf-font-ar: 'Cairo', sans-serif;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
body {
  font-family: 'Poppins', 'Cairo', sans-serif;
  background: var(--sf-ivory);
  color: var(--sf-charcoal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html[dir="rtl"] body { font-family: var(--sf-font-ar); }

a { color: var(--sf-gold); text-decoration: none; }
a:hover { color: var(--sf-charcoal); }

::selection { background: var(--sf-charcoal); color: var(--sf-ivory); }

/* Header stacking (KEEP — FRONTEND_HANDOFF "Known technical decisions" #1):
   the navbar owns the top layer; all content stacks below it. */
.navbar.sticky-top { z-index: 1050; background: var(--sf-ivory); isolation: isolate; }
header, main, section, footer { position: relative; z-index: 1; }
.offcanvas, .offcanvas-lg { z-index: 1055; }
.offcanvas-backdrop { z-index: 1052; }

/* Skip link — visible only while focused. Clipped rather than pushed
   off-screen: a negative offset would extend the scroll width on the RTL
   page, and it is absolutely positioned so revealing it shifts nothing. */
.sf-skip {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  z-index: 1100;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  padding: 10px 18px;
  background: var(--sf-charcoal);
  color: var(--sf-ivory);
  font-size: 13px;
  border-end-end-radius: 10px;
}
.sf-skip:focus {
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  color: var(--sf-ivory);
}

/* --------------------------------------------------------------------------
   3. Keyframes
   -------------------------------------------------------------------------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tickPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
@keyframes revealUp {
  from { opacity: 0; transform: translateY(44px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* Scroll reveals. Where `animation-timeline: view()` is unsupported
   (Safari, Firefox) these degrade to a one-shot entrance animation and the
   element simply ends up visible. */
.sf-reveal,
.sf-reveal-45,
.sf-reveal-cta {
  animation: revealUp 0.9s var(--sf-ease-out) both;
  animation-timeline: view();
}
.sf-reveal     { animation-range: entry 0% entry 40%; }
.sf-reveal-45  { animation-range: entry 0% entry 45%; }
.sf-reveal-cta { animation-duration: 1s; animation-range: entry 0% entry 45%; }

.sf-fade-up       { animation: fadeUp 0.8s ease both; }
.sf-fade-up-delay { animation: fadeUp 1s 0.15s ease both; }

/* --------------------------------------------------------------------------
   4. AnnouncementBar
   -------------------------------------------------------------------------- */
.sf-announce {
  background: var(--sf-charcoal);
  color: var(--sf-sand);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
/* :hover locked — in the reference the inline colour beat the global
   a:hover, so the link never darkens against the charcoal strip. */
.sf-announce a,
.sf-announce a:hover,
.sf-announce a:focus { color: var(--sf-gold-light); }

[dir="rtl"] .sf-announce {
  font-size: 13px;
  letter-spacing: normal;
  text-transform: none;
}

/* --------------------------------------------------------------------------
   5. SiteNavbar
   -------------------------------------------------------------------------- */
.sf-navbar { background: var(--sf-ivory); border-bottom: 1px solid var(--sf-hairline); }

/* width:auto so the intrinsic ratio — not the width attribute, which is
   there only to reserve space and avoid layout shift — sets the box. */
.sf-logo-nav { height: 76px; width: auto; }
.sf-logo-menu { height: 54px; width: auto; }
.sf-logo-footer { height: 80px; width: auto; }

.sf-navbar .navbar-toggler,
.sf-navbar .navbar-toggler:focus { box-shadow: none; }

/* Hamburger — rounded square, 3 bars. */
.sf-burger {
  width: 50px;
  height: 50px;
  background: var(--sf-white);
  border: 1.5px solid var(--sf-hairline);
  border-radius: 14px;
  box-shadow: var(--sf-shadow-burger);
}
.sf-burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--sf-charcoal);
  border-radius: 2px;
}

/* Nav links. Scoped through .sf-nav-list so these match Bootstrap's
   `.navbar-nav .nav-link` specificity and win on source order; :hover and
   :focus are locked because the reference's inline colour did the same. */
.sf-nav-list {
  font-size: 13.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}
.sf-nav-list .sf-nav-link,
.sf-nav-list .sf-nav-link:hover,
.sf-nav-list .sf-nav-link:focus { color: var(--sf-ink-muted); }

.sf-nav-list .sf-nav-link.active,
.sf-nav-list .sf-nav-link.active:hover,
.sf-nav-list .sf-nav-link.active:focus { color: var(--sf-gold); font-weight: 600; }

[dir="rtl"] .sf-nav-list {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}
[dir="rtl"] .sf-nav-list .sf-nav-link.active { font-weight: 700; }

/* MobileMenu — max-width scoped to <992px ONLY (KEEP — "Known technical
   decisions" #2: an inline max-width broke desktop centering). */
@media (max-width: 991.98px) {
  #menuEn, #menuAr { max-width: 360px; }
}

/* MobileMenuFooter — pinned to the bottom of the offcanvas. */
@media (max-width: 991.98px) {
  .sf-menu-footer {
    margin-top: auto !important;
    width: 100%;
    border-top: 1px solid var(--sf-hairline-menu);
    padding: 30px 0 22px;
    gap: 18px !important;
  }
  .sf-menu-footer .sf-reg-cta { width: 100%; height: 52px; font-size: 14px; }
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
/* Primary gold pill (navbar + mobile menu) */
.sf-reg-cta {
  background: var(--sf-grad-gold);
  border: 0;
  height: 46px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: var(--sf-shadow-gold);
  transition: var(--sf-transition);
}
/* :hover / :focus are restated throughout this file wherever Bootstrap's
   .btn:hover would otherwise repaint a colour the reference held constant
   through an inline style. */
.sf-reg-cta,
.sf-reg-cta:hover,
.sf-reg-cta:focus { color: var(--sf-white); background: var(--sf-grad-gold); }
.sf-reg-cta:hover { transform: translateY(-2px); box-shadow: var(--sf-shadow-gold-hover); }
.sf-reg-cta:active { transform: translateY(0) scale(0.98); }

[dir="rtl"] .sf-reg-cta {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

/* Hero buttons */
.sf-btn-gold {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sf-btn-gold,
.sf-btn-gold:hover,
.sf-btn-gold:focus { background: var(--sf-gold); color: var(--sf-white); }

.sf-btn-outline {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sf-btn-outline,
.sf-btn-outline:hover,
.sf-btn-outline:focus {
  color: var(--sf-charcoal);
  border: 1px solid var(--sf-outline);
}

[dir="rtl"] .sf-btn-gold,
[dir="rtl"] .sf-btn-outline {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

/* Language pill — carries the opposite language's font. */
.sf-lang-pill {
  border: 1px solid var(--sf-outline);
  background: var(--sf-white);
  color: var(--sf-ink-muted);
  font-family: var(--sf-font-ar);
  font-size: 14px;
  padding: 7px 24px;
  transition: var(--sf-transition);
}
.sf-lang-pill:hover,
.sf-lang-pill:focus { border-color: var(--sf-gold); color: var(--sf-gold); }

[dir="rtl"] .sf-lang-pill { font-family: var(--sf-font-en); font-size: 13px; }

/* Social circles */
.sf-soc {
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--sf-hairline);
  background: var(--sf-white);
  color: var(--sf-charcoal);
  transition: var(--sf-transition);
}
.sf-soc:hover,
.sf-soc:focus { background: var(--sf-gold); border-color: var(--sf-gold); color: var(--sf-white); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.sf-hero { padding-top: 80px; }

.sf-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sf-gold);
}
[dir="rtl"] .sf-eyebrow {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

.sf-hero-title {
  font-size: clamp(44px, 5.4vw, 88px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.sf-hero-title span { color: var(--sf-gold); }
[dir="rtl"] .sf-hero-title {
  font-size: clamp(40px, 5vw, 80px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: normal;
}

.sf-hero-lead {
  max-width: 520px;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--sf-ink-muted);
  text-wrap: pretty;
}
[dir="rtl"] .sf-hero-lead { line-height: 2; }

/* Arch image + offset gold frame */
.sf-hero-frame {
  max-width: 500px;
  height: 480px;
  animation: floatY 7s ease-in-out infinite;
}
.sf-hero-arch {
  position: absolute;
  top: -16px;
  bottom: 16px;
  inset-inline-start: -16px;
  inset-inline-end: 16px;
  border: 1px solid var(--sf-gold-frame);
  border-radius: 320px 320px 0 0;
  pointer-events: none;
}
.sf-hero-img {
  /* positioned so it paints ABOVE .sf-hero-arch: the frame is offset up/out
     on the leading side and tucked 16px INSIDE on the trailing side, where
     the photo must cover it. That overlap is the offset-frame effect. */
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 320px 320px 0 0;
}

/* --------------------------------------------------------------------------
   8. CountdownCard
   -------------------------------------------------------------------------- */
.sf-countdown { max-width: 520px; margin-top: -46px; }

.sf-count-col + .sf-count-col { border-inline-start: 1px solid var(--sf-hairline-soft); }

.sf-count-num {
  font-family: var(--sf-font-en); /* digits stay Poppins, incl. on the AR page */
  font-size: 36px;
  font-weight: 600;
  line-height: 1.1;
}
.sf-count-num-sec {
  color: var(--sf-gold);
  animation: tickPulse 1s ease-in-out infinite;
}
.sf-count-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sf-stone);
}
[dir="rtl"] .sf-count-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

/* --------------------------------------------------------------------------
   9. StatsStrip
   -------------------------------------------------------------------------- */
.sf-stats { margin-top: 90px; }

.sf-stat-num {
  font-family: var(--sf-font-en);
  font-size: 46px;
  font-weight: 600;
  line-height: 1;
}
.sf-stat-num span { color: var(--sf-gold); }

.sf-stat-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sf-stone);
}
[dir="rtl"] .sf-stat-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

/* --------------------------------------------------------------------------
   10. AboutSection
   -------------------------------------------------------------------------- */
.sf-about { margin-top: 110px; }
.sf-about-sticky { top: 130px; }

.sf-about-title {
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
[dir="rtl"] .sf-about-title {
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: normal;
}

.sf-about-row { border-top: 1px solid var(--sf-hairline-warm); }
.sf-about-row:last-child { border-bottom: 1px solid var(--sf-hairline-warm); }

.sf-about-num {
  font-family: var(--sf-font-en);
  font-size: 20px;
  font-weight: 600;
  color: var(--sf-gold);
  min-width: 52px;
}
.sf-about-h { font-size: 20px; font-weight: 600; }
[dir="rtl"] .sf-about-h { font-weight: 700; }

.sf-body-sm {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--sf-ink-muted);
  text-wrap: pretty;
}
[dir="rtl"] .sf-body-sm { line-height: 2; }

/* --------------------------------------------------------------------------
   11. MissionVisionBand
   -------------------------------------------------------------------------- */
.sf-band { background: var(--sf-charcoal); color: var(--sf-ivory); }

.sf-band-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--sf-gold-light);
}
[dir="rtl"] .sf-band-eyebrow {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

.sf-band-lead { font-size: 22px; font-weight: 500; line-height: 1.55; }
[dir="rtl"] .sf-band-lead { font-size: 21px; font-weight: 600; line-height: 1.8; }

.sf-band-body {
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--sf-dark-muted);
  text-wrap: pretty;
}
[dir="rtl"] .sf-band-body { line-height: 2.1; }

/* --------------------------------------------------------------------------
   12. FounderCards
   -------------------------------------------------------------------------- */
.sf-founders { margin-top: 110px; }

.sf-founders-title {
  font-size: clamp(30px, 3.4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.01em;
}
[dir="rtl"] .sf-founders-title {
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 700;
  letter-spacing: normal;
}

.sf-founder-card { border: 1px solid var(--sf-hairline); }

.sf-founder-photo {
  display: block;
  width: 172px;
  height: 196px;
  border-radius: 16px;
  object-fit: cover;
}

.sf-founder-quote {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--sf-ink-muted);
  text-wrap: pretty;
}
[dir="rtl"] .sf-founder-quote { line-height: 2; }

.sf-founder-name { font-size: 20px; font-weight: 600; }
[dir="rtl"] .sf-founder-name { font-weight: 700; }

.sf-founder-role {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sf-gold);
}
[dir="rtl"] .sf-founder-role {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

/* --------------------------------------------------------------------------
   13. CtaSecureSeat — the highlight section (CSS kept verbatim)
   -------------------------------------------------------------------------- */
.sf-cta {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: var(--sf-grad-cta);
  box-shadow: var(--sf-shadow-cta-card);
}
/* soft vignette */
.sf-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, transparent 62%, rgba(60, 42, 8, 0.18) 100%);
}

/* two thin white rings, bottom-leading corner */
.sf-cta-curve {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
}
.sf-cta-curve-1 { width: 520px; height: 520px; inset-inline-start: -180px; bottom: -260px; }
.sf-cta-curve-2 {
  width: 340px; height: 340px; inset-inline-start: -60px; bottom: -200px;
  border-color: rgba(255, 255, 255, 0.10);
}

.sf-cta-img { position: absolute; top: 0; right: 0; bottom: 0; width: 100%; overflow: hidden; }
.sf-cta-img-inner { width: 100%; height: 100%; }
.sf-cta-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--sf-ease-out);
}
.sf-cta:hover .sf-cta-img img { transform: scale(1.03); }

/* horizontal gold fade + vertical cinematic dark */
.sf-cta-img::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, var(--sf-gold) 0%, rgba(185, 138, 47, 0.82) 14%, rgba(185, 138, 47, 0.28) 42%, rgba(120, 84, 20, 0.18) 100%);
}
.sf-cta-img::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(60, 42, 8, 0.22) 0%, transparent 30%, transparent 65%, rgba(60, 42, 8, 0.3) 100%);
}

/* AR mirrors the panel: flip the fade container, un-flip the photo inside. */
[dir="rtl"] .sf-cta-img { right: auto; left: 0; transform: scaleX(-1); }
[dir="rtl"] .sf-cta-img-inner { transform: scaleX(-1); }

.sf-cta-body { position: relative; z-index: 3; }
.sf-cta-media { min-height: 230px; }

.sf-cta-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}
[dir="rtl"] .sf-cta-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: none;
}

.sf-cta-title {
  font-size: clamp(34px, 3.8vw, 58px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
[dir="rtl"] .sf-cta-title {
  font-size: clamp(30px, 3.4vw, 52px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: normal;
}

.sf-cta-lead {
  max-width: 520px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.92);
  text-wrap: pretty;
}
[dir="rtl"] .sf-cta-lead { line-height: 2; }

.sf-cta-date {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
[dir="rtl"] .sf-cta-date {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

/* LocationStrip — glass pill */
.sf-loc {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 10px;
  padding-inline-start: 14px;
  padding-inline-end: 22px;
  line-height: 1.25;
}
/* :hover locked so the global a:hover can't darken the pill on gold. */
.sf-loc, .sf-loc:hover, .sf-loc:focus { color: var(--sf-white); }
[dir="rtl"] .sf-loc { line-height: 1.4; }

.sf-loc-icon { width: 34px; height: 34px; background: rgba(255, 255, 255, 0.2); }
.sf-loc-name { font-size: 14px; font-weight: 600; }
[dir="rtl"] .sf-loc-name { font-weight: 700; }
.sf-loc-city { font-size: 12px; color: rgba(255, 255, 255, 0.78); }

/* Charcoal CTA button */
.sf-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 44px;
  background: var(--sf-charcoal);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: var(--sf-shadow-cta-btn);
  transition: all 0.3s ease;
}
.sf-cta-btn, .sf-cta-btn:hover, .sf-cta-btn:focus { color: var(--sf-white); }
.sf-cta-btn:hover { transform: translateY(-3px); box-shadow: var(--sf-shadow-cta-btn-hover); }
.sf-cta-btn:active { transform: translateY(-1px) scale(0.98); }

[dir="rtl"] .sf-cta-btn { font-size: 15px; letter-spacing: 0; text-transform: none; }

/* CTA mobile: image block on top, text centred */
@media (max-width: 991.98px) {
  .sf-cta-img { position: relative; width: 100%; height: 230px; }
  .sf-cta-img::before {
    background: linear-gradient(0deg, var(--sf-gold) 2%, rgba(185, 138, 47, 0.35) 30%, rgba(60, 42, 8, 0.25) 100%);
  }
  .sf-cta-body { text-align: center; }
  .sf-cta-body .sf-loc { margin-left: auto; margin-right: auto; }
}

/* --------------------------------------------------------------------------
   14. SiteFooter + PaymentBadges
   -------------------------------------------------------------------------- */
.sf-footer { border-top: 1px solid var(--sf-hairline); }

.sf-footer-mail,
.sf-footer-mail:hover,
.sf-footer-mail:focus { font-size: 13px; color: var(--sf-ink-muted); }

.sf-copyright { font-size: 13px; color: var(--sf-stone); }
.sf-copyright a,
.sf-copyright a:hover,
.sf-copyright a:focus { color: var(--sf-gold); }

.sf-pay-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sf-stone);
}
[dir="rtl"] .sf-pay-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

/* Fixed-size boxes — logos never set the box size ("Known technical
   decisions" #4). */
.sf-pay-group { display: flex; gap: 12px; }

.sf-pay-badge {
  width: 84px;
  height: 48px;
  flex-shrink: 0;
  background: var(--sf-white);
  border: 1px solid var(--sf-hairline);
  border-radius: 10px;
  box-shadow: var(--sf-shadow-badge);
}
.sf-pay-mada { height: 26px; width: auto; }
.sf-pay-applepay { height: 20px; width: auto; }

.sf-pay-visa {
  font-family: var(--sf-font-en);
  font-size: 19px;
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--sf-visa);
}

.sf-pay-mc { position: relative; display: inline-block; width: 34px; height: 22px; }
.sf-pay-mc span { position: absolute; top: 1px; width: 19px; height: 19px; border-radius: 50%; }
.sf-pay-mc span:first-child { left: 0; background: var(--sf-mc-red); }
.sf-pay-mc span:last-child { right: 0; background: var(--sf-mc-orange); opacity: 0.9; }

@media (max-width: 420px) {
  .sf-pay-badge { width: 70px; height: 44px; }
  .sf-pay-group { gap: 8px; }
}