*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--text); background: var(--surface); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button, input, select { font-family: inherit; }

:root {
  /* Bold Premium Brand — see DESIGN.md */
  --primary: #f37021;          /* Hermès orange — action / CTA, vibrant, for dark backgrounds only (2.9:1 on white, fails AA) */
  --orange-deep: #c4530a;      /* AA-safe orange for fills with white text (buttons, submit, CTA band) — 4.6:1. See DESIGN.md. */
  --orange-press: #f46f22;     /* Brand orange for kickers/labels + hover state. NOTE: 2.9:1 on white — below WCAG AA (4.5:1) for the small text that uses it. Chosen for brand over contrast 2026-08-20. */
  --orange-tint: #fdeee2;
  --amber-deep: #b06800;       /* AA-safe amber for amber text on LIGHT (e.g. "1987") */
  --teal: #166d87;             /* service & trust markers (AA on light) */
  --teal-tint: #e7f3f6;
  --amber: #e9962b;            /* heritage / proof (1987, stars) */
  --star: #f5b301;
  --blue: #7cd1e4;             /* info tint only */
  --blue-tint: #eef8fb;
  --ink-900: #13262d;          /* headings */
  --text: #3e555f;            /* body */
  --muted: #63737a;             /* 4.9:1 on white, 4.6:1 on --soft — AA for body copy */
  --border: #e4e9ea;
  --border-strong: #cfd8da;
  --soft: #f5f7f7;             /* alternating section bg */
  --surface: #ffffff;
  --deep: #0e1a1f;             /* dark bands */
  /* Dark-band surface: --deep lifted by a soft teal wash from the lower-left
     and a fainter one from the upper-right. Tonal only — a single hue at low
     alpha over the solid, so it reads as depth rather than decoration. */
  --deep-gradient:
    radial-gradient(120% 110% at 0% 100%, rgba(22, 109, 135, 0.32), transparent 62%),
    radial-gradient(90% 80% at 100% 0%, rgba(22, 109, 135, 0.16), transparent 58%),
    #0e1a1f;
  --ease: cubic-bezier(0.4,0,0.2,1);
  --section-compact: clamp(50px, 5vw, 70px);
  --section-standard: clamp(68px, 7vw, 92px);
  --section-roomy: clamp(82px, 8vw, 110px);
  --section-gap: clamp(34px, 5vw, 62px);
  --grid-gap: clamp(20px, 3vw, 36px);
  --font-heading: "Archivo", "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", sans-serif;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
h1 { font-family: var(--font-heading); font-size: clamp(40px, 6vw, 68px); font-weight: 800; line-height: 1.1; color: var(--ink-900); letter-spacing: -0.025em; }
h2 { font-family: var(--font-heading); font-size: clamp(34px, 4vw, 48px); font-weight: 800; line-height: 1.15; color: var(--ink-900); letter-spacing: -0.02em; }
h3 { font-family: var(--font-heading); font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--ink-900); letter-spacing: -0.01em; }
/* Let the browser distribute heading lines evenly instead of breaking wherever
   the measure happens to run out — stops phrases splitting mid-thought
   ("Build Your UAE / Operations Around / Your Business"). Ignored gracefully
   by older browsers, which still benefit from the removed character caps. */
h1, h2, h3, h4 { text-wrap: balance; }
/* Avoid a lone trailing word on paragraphs. */
p { text-wrap: pretty; }
.label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--orange-press); margin-bottom: 12px; }

.btn { display: inline-flex; align-items: center; gap: 7px; padding: 13px 24px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: background 150ms var(--ease), transform 150ms; white-space: nowrap; font-family: var(--font-body); }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--orange-deep); color: #fff; }
.btn-primary:hover { background: var(--orange-press); }
.btn-outline { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); }
.btn-outline:hover { background: rgba(243,112,33,0.08); }
.btn-full { width: 100%; justify-content: center; }
.btn-ghost { background: rgba(255,255,255,0.12); color: #fff; border: 1.5px solid rgba(255,255,255,0.4); }
.btn-ghost:hover { background: rgba(255,255,255,0.22); }
.btn-soft { background: rgba(243,112,33,0.08); color: var(--primary); border: 1px solid rgba(243,112,33,0.2); }
.btn-soft:hover { background: rgba(243,112,33,0.13); }

@keyframes pulse-dot { 0%,100% { box-shadow: 0 0 0 0 rgba(243,112,33,0.5); } 60% { box-shadow: 0 0 0 7px rgba(243,112,33,0); } }
@keyframes pulse-cta { 0% { box-shadow: 0 0 0 0 rgba(243,112,33,0.45); } 70% { box-shadow: 0 0 0 16px rgba(243,112,33,0); } 100% { box-shadow: 0 0 0 0 rgba(243,112,33,0); } }

/* -- NAV -------------------------------------------- */
#nav { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid #f0f0f0; transition: box-shadow 200ms var(--ease); }
#nav.scrolled { box-shadow: 0 2px 10px rgba(62,85,95,0.06); border-color: transparent; }
.nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.nav-links { display: flex; gap: 28px; list-style: none; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--text); transition: color 150ms; }
.nav-links a:hover, .nav-links a.active { color: var(--orange-press); }
.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-call { font-size: 13px; font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 7px; padding: 11px 6px; min-height: 44px; transition: color 150ms; white-space: nowrap; }
.nav-call i { color: #f37021; transition: color 150ms; }
.nav-call:hover { color: var(--primary); }
.nav-call:hover i { color: var(--primary); }
.hamburger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; min-width: 44px; min-height: 44px; padding: 0; background: none; border: none; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; }
.nav-mobile { display: none; padding: 12px 24px 20px; border-top: 1px solid #f0f0f0; flex-direction: column; gap: 2px; }
.nav-mobile.open { display: flex; }
.nav-mobile a { padding: 10px 8px; font-size: 15px; font-weight: 500; color: var(--text); border-radius: 6px; transition: background 150ms; }
.nav-mobile a:hover, .nav-mobile a.active { background: var(--soft); color: var(--primary); }
.nav-mobile .btn { margin-top: 8px; width: 100%; justify-content: center; }
.nav-mobile .nav-call { margin-top: 8px; padding: 12px 8px; color: var(--text); }

/* -- URGENCY BANNER --------------------------------- */
#urgency { background: #1e1e1f; padding: 10px 24px; text-align: center; }
#urgency span { font-size: 13px; color: rgba(255,255,255,0.85); }
#urgency .live { display: inline-flex; align-items: center; gap: 5px; background: rgba(243,112,33,0.2); border: 1px solid rgba(243,112,33,0.4); border-radius: 12px; padding: 2px 10px; margin-right: 10px; font-size: 11px; font-weight: 700; color: #f37021; letter-spacing: 0.06em; text-transform: uppercase; }
#urgency .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); animation: pulse-dot 1.8s infinite; }
#urgency a { color: #f37021; font-weight: 600; margin-left: 10px; }
#urgency a:hover { text-decoration: underline; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.hero-social { margin-top: 10px; padding: 9px 0 0; background: transparent; border-radius: 0; border: 0; border-top: 1px solid rgba(207,216,218,0.28); }
.hero-social-top { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; color: #3e555f; }
.hero-social-google {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hero-social-google img { width: 18px; height: 18px; display: block; }
.hero-social-label { font-size: 12px; font-weight: 650; color: #3e555f; }
.hero-social-stars { display: inline-flex; gap: 2px; align-items: center; }
.hero-social-stars svg { width: 12px; height: 12px; }
.hero-social-star-partial {
  position: relative;
  width: 12px;
  height: 12px;
  display: inline-flex;
  flex-shrink: 0;
}
.hero-social-star-partial .star-base { opacity: 0.35; }
.hero-social-star-partial .star-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 60%;
  overflow: hidden;
}
.hero-social-rating { font-size: 12px; font-weight: 650; color: #3e555f; }
.hero-social-divider { display: none; }
.hero-social-text { margin-top: 0; font-family: var(--font-body); font-size: 12px; color: #3e555f; line-height: 1.3; }
.hero-social-text strong { color: #3e555f; font-weight: 600; }
.hero-social-separator { color: rgba(62,85,95,0.34); margin-right: 2px; }

/* -- HERO FORM CARD --------------------------------- */
.hero-form-stack { width: 100%; max-width: 410px; margin-left: auto; margin-right: 22px; transform: translateY(0); }
.form-card { position: relative; width: 100%; max-width: 410px; margin-left: auto; background: #ffffff; border: 1px solid rgba(207,216,218,0.5); border-radius: 20px; box-shadow: 0 16px 40px rgba(62,85,95,0.18); }
.form-card *,
.form-card *::before,
.form-card *::after,
.hero-trust-line { box-sizing: border-box; }
/* Orange top bar removed 2026-08-19 — the card reads cleaner flat, and the
   accent is already carried by the kicker and the submit button. */
.form-card-header { background: var(--text); padding: 20px 24px; border-radius: 20px 20px 0 0; }
.form-card-price { font-family: var(--font-heading); font-size: 28px; font-weight: 700; color: #fff; line-height: 1.3; letter-spacing: 0; }
.form-card-price-sub { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 3px; }
.form-card-inclusions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.form-card-pill { font-size: 11px; font-weight: 500; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); padding: 3px 9px; border-radius: 10px; }
.form-card-body { padding: 22px 22px 20px; }
.form-heading { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(207,216,218,0.18); }
.form-heading-label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-press); }
.form-heading h2 { font-family: var(--font-heading); font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: #3e555f; margin-bottom: 6px; }
.form-heading p { font-size: 12px; line-height: 1.5; color: #6c7e85; }
.form-reassurance { display: flex; align-items: flex-start; justify-content: flex-start; gap: 8px; margin: 0 0 12px; color: rgba(62,85,95,0.82); font-size: 12px; line-height: 1.4; text-align: left; white-space: normal; }
.form-reassurance i { width: 13px; height: 13px; color: var(--teal); flex-shrink: 0; }
.lead-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }

.hero-form-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.form-field { min-width: 0; }
.hero-form-grid > .hero-social { display: none; }
.field-label { display: block; font-size: 11px; font-weight: 600; color: var(--text); letter-spacing: 0.01em; line-height: 1.15; margin-bottom: 4px; }
.field-input { width: 100%; min-height: 44px; padding: 11px 12px; border: 1px solid rgba(207,216,218,0.55); border-radius: 8px; font-size: 14px; color: var(--text); outline: none; background: #fff; transition: border-color 150ms, box-shadow 150ms, min-height 180ms ease; }
.field-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(243,112,33,0.10); }
.field-input.error { border-color: #f37021; }
.field-textarea { min-height: 40px; max-height: 72px; line-height: 1.3; resize: none; }
.field-textarea:focus { min-height: 72px; }
.field-error { font-size: 11px; color: #f37021; margin-top: 3px; display: none; }
.field-error.show { display: block; }
.form-message { display: none; align-items: flex-start; gap: 10px; margin-bottom: 14px; padding: 12px 13px; border-radius: 12px; border: 1px solid rgba(207,216,218,0.45); font-size: 13px; line-height: 1.45; }
.form-message.show { display: flex; }
.form-message-icon { width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.form-message-title { font-family: var(--font-heading); font-size: 14px; font-weight: 700; color: #3e555f; margin-bottom: 2px; }
.form-message-text { color: #6c7e85; }
.form-message--success { background: #f8f8f8; border-color: rgba(62,85,95,0.16); }
.form-message--success .form-message-icon { background: #3e555f; color: #ffffff; }
.form-message--error { background: rgba(243,112,33,0.08); border-color: rgba(243,112,33,0.24); }
.form-message--error .form-message-icon { background: #f37021; color: #ffffff; }
.form-step-indicator { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 12px; }
.form-step-dot { display: block; height: 3px; border-radius: 999px; background: rgba(207,216,218,0.38); transition: background 180ms ease, opacity 180ms ease; }
.form-step-dot.active { background: #f37021; }
.form-step { display: none; grid-template-columns: 1fr; gap: 10px; }
.form-step.active { display: grid; }
.form-step-copy { margin-bottom: 2px; }
.form-step-copy h3 { font-family: var(--font-heading); color: #3e555f; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; margin: 2px 0 0; }
.form-step-kicker { color: var(--orange-press); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.intent-options { display: grid; grid-template-columns: 1fr; gap: 10px; }
.intent-option { position: relative; width: 100%; border: 1px solid rgba(207,216,218,0.55); border-radius: 9px; background: #fff; color: #3e555f; cursor: pointer; display: grid; gap: 3px; padding: 11px 38px 11px 12px; text-align: left; transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease; }
.intent-option::after { content: "→"; position: absolute; top: 50%; right: 14px; transform: translateY(-50%); color: rgba(243,112,33,0.86); font-family: var(--font-heading); font-size: 18px; font-weight: 700; opacity: 0.82; transition: transform 180ms ease, opacity 180ms ease; }
.intent-option strong { font-family: var(--font-heading); font-size: 14px; line-height: 1.3; font-weight: 500; letter-spacing: 0; }
.intent-option span { color: #6c7e85; font-size: 12px; line-height: 1.4; }
.intent-option:hover { border-color: rgba(243,112,33,0.58); box-shadow: 0 8px 18px rgba(62,85,95,0.07); transform: translateY(-1px); }
.intent-option:hover::after { opacity: 1; transform: translate(2px, -50%); }
.intent-option.active { border-color: #f37021; background: #fff8f3; box-shadow: 0 0 0 2.5px rgba(243,112,33,0.24); }
.intent-option--primary { min-height: 50px; padding: 13px 42px 13px 14px; border-color: rgba(243,112,33,0.42); background: #fff8f3; }
.intent-option--primary strong { color: var(--orange-press); font-size: 16px; font-weight: 600; }
.intent-option--primary span { color: rgba(62,85,95,0.76); }
.intent-option--secondary { min-height: 44px; padding: 11px 12px; border-color: rgba(207,216,218,0.42); background: #fbfbfb; }
.intent-option--secondary { padding-right: 38px; }
.intent-option--secondary strong { color: #5c5b5e; font-size: 14px; font-weight: 500; }
.intent-option--secondary:hover { background: #ffffff; box-shadow: none; }
.intent-option--secondary.active { background: #fff8f3; border-color: rgba(243,112,33,0.76); }
.form-actions { display: grid; grid-template-columns: 0.62fr 1fr; gap: 8px; align-items: center; margin: 4px 0 2px; }
.form-actions[hidden] { display: none; }
.form-back,
.form-next { min-height: 42px; padding: 10px 14px; border-radius: 8px; font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer; transition: background 150ms, border-color 150ms, color 150ms, transform 150ms; }
.form-back { border: 1px solid rgba(207,216,218,0.68); background: #fff; color: #3e555f; }
.form-next { border: none; background: #3e555f; color: #fff; }
.form-back:hover { border-color: rgba(62,85,95,0.55); background: #f7f7f7; }
.form-next:hover { background: #2f2e30; transform: scale(1.01); }
.form-back:active,
.form-next:active { transform: scale(0.98); }
.form-back[hidden],
.form-next[hidden],
.form-submit[hidden] { display: none; }
.form-review { display: grid; gap: 7px; border: 1px solid rgba(207,216,218,0.38); border-radius: 10px; background: #fbfbfb; padding: 10px; }
.form-review-row { display: grid; gap: 2px; padding: 0 0 7px; border-bottom: 1px solid rgba(207,216,218,0.24); }
.form-review-row:last-child { padding-bottom: 0; border-bottom: 0; }
.form-review-row dt { color: #8a8a8d; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.form-review-row dd { color: #3e555f; font-size: 13px; line-height: 1.35; font-weight: 650; margin: 0; word-break: break-word; }
.phone-row { display: grid; grid-template-columns: 104px 1fr; gap: 8px; }
.phone-code-select { position: relative; }
.phone-code-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-right: 12px;
  background: #fff;
  text-align: left;
}
.phone-code-trigger.open,
.phone-code-trigger:focus { border-color: #f37021; outline: none; }
.phone-code-trigger-text {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #3e555f;
  line-height: 1;
}
.phone-code-selected-flag,
.phone-code-option-flag {
  width: 22px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
  flex-shrink: 0;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(207,216,218,0.32);
}
.phone-code-selected-code { color: #3e555f; font-weight: 600; line-height: 1; }
.phone-code-chevron {
  width: 14px;
  height: 14px;
  color: #6c7e85;
  flex-shrink: 0;
}
.phone-code-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: min(320px, calc(100vw - 48px));
  max-height: 280px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #cfd8da;
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(62,85,95,0.08);
  z-index: 30;
}
.phone-code-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  background: #fff;
  color: #3e555f;
  text-align: left;
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  transition: background 150ms ease;
}
.phone-code-option:hover,
.phone-code-option:focus { background: #f8f8f8; outline: none; }
.phone-code-option-flag { flex-shrink: 0; }
.phone-code-option-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.phone-code-option-code { flex-shrink: 0; color: #3e555f; font-weight: 600; }

.form-submit { width: 100%; min-height: 42px; padding: 10px 14px; background: var(--orange-deep); color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: var(--font-heading); display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 150ms, transform 150ms; margin: 4px 0 2px; box-shadow: none; animation: none; }
.form-submit:hover { background: #b04a0c; transform: scale(1.01); }
.form-submit:active { transform: scale(0.98); }

.form-not-ready { text-align: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid #f0f0f0; }
.form-not-ready span { font-size: 12px; color: var(--muted); }
.form-not-ready a { color: var(--teal); font-weight: 600; font-size: 12px; }
.form-not-ready a:hover { text-decoration: underline; }

.hero-trust-line { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 12px auto 0; padding: 8px 10px; width: calc(100% - 28px); color: rgba(255,255,255,0.82); font-family: var(--font-body); font-size: 12px; line-height: 1.3; text-align: center; background: rgba(14,26,31,0.72); border: 1px solid rgba(255,255,255,0.16); border-radius: 6px; }
.hero-trust-line strong { color: #ffffff; font-weight: 700; }
.hero-trust-stars { color: #f37021; font-size: 12px; letter-spacing: 0.02em; }
.hero-trust-separator { color: rgba(255,255,255,0.34); }

.form-success { text-align: center; padding: 28px 24px; }
.form-success-icon { width: 56px; height: 56px; background: #eaf7ef; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }

/* -- QUICK CTA STRIP -------------------------------- */
#quick-cta { background: rgba(243,112,33,0.07); border-top: 1px solid rgba(243,112,33,0.15); border-bottom: 1px solid rgba(243,112,33,0.15); padding: 20px 0; }
.quick-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.quick-cta-text { font-family: var(--font-heading); font-size: 18px; font-weight: 700; color: var(--text); }
.quick-cta-text span { color: var(--primary); }
.quick-cta-btns { display: flex; gap: 10px; align-items: center; }

/* -- TRUST STRIP ------------------------------------ */
#trust { position: relative; z-index: 3; margin-top: -42px; background: transparent; border: 0; padding: 0 0 28px; }
.trust-inner { min-height: 84px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; background: #ffffff; border: 1px solid rgba(207,216,218,0.34); border-top: 4px solid #f37021; border-radius: 6px; box-shadow: 0 18px 44px rgba(62,85,95,0.15); overflow: hidden; }
.trust-item { position: relative; display: flex; align-items: center; justify-content: center; min-height: 80px; padding: 0 22px; font-size: 14px; font-weight: 400; color: #3e555f; text-align: center; line-height: 1.6; letter-spacing: 0; white-space: nowrap; }
.trust-item::before { content: none; }
.trust-item + .trust-item { border-left: 0; }
.trust-item + .trust-item::after { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; background: rgba(207,216,218,0.42); }
.trust-item strong { font-weight: 700; color: #3e555f; }

/* -- TESTIMONIALS ----------------------------------- */
#testimonials { background: #fff; padding: 72px 0; }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.testi-card { background: var(--soft); border: 1px solid #e5e5e6; border-radius: 20px; padding: 24px 22px; }
.testi-stars { display: flex; gap: 2px; margin-bottom: 12px; }
.testi-quote { font-size: 14px; color: var(--text); line-height: 1.7; margin-bottom: 16px; font-style: italic; }
.testi-author { display: flex; align-items: center; gap: 10px; }
.testi-avatar { width: 36px; height: 36px; border-radius: 50%; background: #f8f8f8; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 14px; font-weight: 700; color: #3e555f; flex-shrink: 0; }
.testi-name { font-size: 13px; font-weight: 600; color: var(--text); }
.testi-role { font-size: 12px; color: var(--muted); }

/* -- WHAT'S INCLUDED -------------------------------- */
#included { padding: var(--section-roomy) 0; background: radial-gradient(circle at 18% 4%, rgba(243,112,33,0.05), transparent 28%), #ffffff; }
.section-header { margin-bottom: var(--section-gap); }
.section-header p { max-width: 620px; margin-top: 18px; font-size: 16px; font-weight: 400; color: #5f6574; line-height: 1.6; }
.package-section-header { text-align: left; margin-bottom: clamp(36px, 5vw, 58px); }
.package-section-header .label { position: relative; display: inline-flex; align-items: center; gap: 10px; }
.package-section-header .label::after { content: ""; width: 44px; height: 2px; background: #f37021; border-radius: 999px; }
.package-section-header h2 span { color: #f37021; }
.package-breakdown { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 34px); background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.package-group { --card-accent: #c4831b; --card-tint: rgba(196,131,27,0.07); --card-border: rgba(196,131,27,0.22); position: relative; padding: 30px 30px 26px; z-index: 1; overflow: hidden; border: 1px solid var(--card-border); border-radius: 20px; background: linear-gradient(160deg, var(--card-tint), #ffffff 62%); box-shadow: 0 10px 30px rgba(62,85,95,0.07); }
.package-group--residency { --card-accent: #1a8299; --card-tint: rgba(26,130,153,0.06); --card-border: rgba(26,130,153,0.20); }
.package-group--support { --card-accent: #2a93ba; --card-tint: rgba(42,147,186,0.07); --card-border: rgba(42,147,186,0.20); }
.package-group::after { content: ""; position: absolute; right: 26px; bottom: 0; width: 180px; height: 112px; opacity: 0.13; background: linear-gradient(90deg, transparent 0 14px, var(--card-accent) 14px 17px, transparent 17px 31px) 0 42px / 34px 70px repeat-x; border-bottom: 3px solid var(--card-accent); pointer-events: none; }
.package-group--residency::after { width: 140px; border: 3px solid var(--card-accent); border-radius: 24px; background: radial-gradient(circle at 50% 44%, transparent 0 24px, var(--card-accent) 25px 28px, transparent 29px), repeating-radial-gradient(circle at 50% 44%, transparent 0 13px, var(--card-accent) 14px 16px, transparent 17px 24px); }
.package-group--support::after { width: 220px; height: 106px; background: linear-gradient(var(--card-accent), var(--card-accent)) 92px 22px / 74px 3px no-repeat, linear-gradient(var(--card-accent), var(--card-accent)) 128px 25px / 3px 42px no-repeat, linear-gradient(var(--card-accent), var(--card-accent)) 66px 62px / 124px 3px no-repeat; border-bottom: 3px solid var(--card-accent); }
.package-group-head { display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 26px; margin-bottom: 24px; padding-bottom: 0; border-bottom: 0; }
.package-group-head span { width: 56px; height: 56px; border-radius: 14px; background: var(--card-tint); border: 1px solid var(--card-border); color: var(--card-accent); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.package-group-head i { color: currentColor; font-size: 31px; line-height: 1; }
.package-group-head svg { width: 28px; height: 28px; stroke: currentColor; }
.package-group h3 { position: relative; font-family: var(--font-heading); font-size: 20px; font-weight: 500; color: #2f3748; margin-bottom: 0; line-height: 1.3; letter-spacing: 0; }
.package-group h3::after { content: ""; display: block; width: 42px; height: 3px; margin-top: 16px; background: var(--card-accent); border-radius: 999px; }
.package-group ul { list-style: none; display: grid; gap: 0; }
.package-group li { position: relative; min-height: 48px; padding: 14px 0 14px 34px; border-bottom: 1px solid rgba(207,216,218,0.26); font-family: var(--font-body); font-size: 16px; font-weight: 400; color: #384256; line-height: 1.6; }
.package-group li:last-child { border-bottom: 0; }
.package-group li::before { content: ""; position: absolute; left: 0; top: 13px; width: 22px; height: 22px; border-radius: 7px; background-color: var(--card-accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size: 13px 13px; background-position: center; background-repeat: no-repeat; }
.package-note { position: relative; z-index: 1; grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; margin-top: 4px; padding: 18px 24px; background: #ffffff; border: 1px solid rgba(207,216,218,0.44); border-radius: 12px; color: #384256; box-shadow: 0 12px 30px rgba(62,85,95,0.06); font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.6; }
.package-note i, .package-note svg { width: 22px; height: 22px; color: #141827; stroke: currentColor; flex-shrink: 0; }
.compare-section { padding: 76px 0 82px; background: #ffffff; border-bottom: 1px solid rgba(207,216,218,0.24); }
.compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 880px; margin: 0 auto; }
.compare-card { background: #ffffff; border: 1px solid rgba(207,216,218,0.45); border-radius: 20px; padding: 28px 28px 30px; box-shadow: 0 2px 8px rgba(62,85,95,0.05); }
.compare-card--included { border-top: 3px solid #f37021; }
.compare-card h3 { margin-bottom: 18px; font-family: var(--font-heading); font-size: 20px; font-weight: 500; line-height: 1.3; color: #3e555f; }
.compare-card ul { list-style: none; display: grid; gap: 10px; }
.compare-card li { position: relative; padding-left: 22px; color: rgba(62,85,95,0.86); font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.6; }
.compare-card li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: #f37021; transform: translateY(-50%); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.feature-card { position: relative; overflow: hidden; background: rgba(255,255,255,0.94); border: 1px solid rgba(207,216,218,0.45); border-radius: 20px; padding: 28px 24px; box-shadow: 0 8px 22px rgba(62,85,95,0.06); transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease); }
.feature-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: #f37021; opacity: 0.9; }
.feature-card:hover { transform: translateY(-3px); border-color: rgba(243,112,33,0.35); box-shadow: 0 14px 30px rgba(62,85,95,0.08); }
.feature-icon { width: 46px; height: 46px; background: #ffffff; border: 1px solid rgba(62,85,95,0.16); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; box-shadow: 0 6px 16px rgba(62,85,95,0.06); }

/* -- PRICING OPTIONS --------------------------------- */
#packages { background: linear-gradient(180deg, rgba(243,112,33,0.13) 0%, rgba(243,112,33,0.07) 58%, #ffffff 100%); padding: var(--section-roomy) 0; }
.pricing-header { text-align: center; max-width: 760px; margin: 0 auto var(--section-gap); }
.pricing-header .label { margin-bottom: 14px; }
.pricing-header h2 { max-width: 760px; margin: 0 auto 10px; }
.pricing-header p { max-width: 620px; margin: 0 auto; color: #6c7e85; line-height: 1.6; }
.pricing-selector { overflow: hidden; background: #ffffff; border: 1px solid rgba(207,216,218,0.45); border-radius: 20px; box-shadow: 0 2px 8px rgba(62,85,95,0.05); }
.pricing-row { display: grid; grid-template-columns: 1.05fr 1fr 1fr 0.95fr auto; gap: 24px; align-items: center; min-height: 108px; padding: 26px 28px; border-top: 1px solid rgba(207,216,218,0.34); background: #ffffff; }
.pricing-row:first-child { border-top: 0; }
.pricing-row--featured { position: relative; background: rgba(243,112,33,0.12); outline: 2px solid rgba(243,112,33,0.36); outline-offset: -2px; box-shadow: inset 0 1px 0 rgba(243,112,33,0.10), inset 0 -1px 0 rgba(243,112,33,0.10); }
.pricing-type { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(62,85,95,0.68); }
.pricing-name-cell { min-width: 0; }
.pricing-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-heading); font-size: 26px; font-weight: 500; color: #3e555f; line-height: 1.4; }
.pricing-fit { margin-top: 8px; color: #6c7e85; font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.6; }
.pricing-price { font-family: var(--font-heading); font-size: 34px; font-weight: 700; color: #3e555f; line-height: 1.3; letter-spacing: 0; white-space: nowrap; }
.pricing-price .dirham-symbol-text { width: 0.82em; height: 0.82em; margin-right: 0.015em; vertical-align: -0.065em; }
.pricing-visa { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: #f37021; white-space: nowrap; }
.pricing-badge { display: inline-flex; align-items: center; width: fit-content; padding: 5px 9px; border-radius: 999px; background: rgba(243,112,33,0.10); border: 1px solid rgba(243,112,33,0.24); color: #3e555f; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.pricing-note { max-width: 680px; margin: 22px auto 0; text-align: center; color: #6c7e85; font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 1.6; }
.pricing-action { display: flex; justify-content: flex-end; }
.pricing-row .btn { justify-content: center; min-width: 160px; font-size: 14px; font-weight: 600; padding: 13px 18px; }
.feature-icon [data-lucide] { color: #3e555f; }
.feature-card h3 { font-size: 17px; margin-bottom: 7px; }
.feature-tag { display: inline-flex; width: fit-content; margin-bottom: 10px; padding: 5px 9px; border-radius: 8px; background: rgba(243,112,33,0.08); border: 1px solid rgba(243,112,33,0.18); color: var(--orange-press); font-family: var(--font-body); font-size: 12px; font-weight: 700; line-height: 1.35; }
.feature-card p { font-size: 13px; line-height: 1.7; color: var(--muted); }

/* -- BEST-FIT ACTIVITIES ----------------------------- */
#activities,
#why {
  position: relative;
  overflow: hidden;
}
#activities { padding: var(--section-standard) 0; background: #ffffff; }
.activities-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr); gap: clamp(34px, 5vw, 66px); align-items: start; }
.activities-copy { max-width: 520px; margin-bottom: 0; }
.activities-copy .label { margin-bottom: 11px; }
.activities-copy h2 { margin-bottom: 19px; }
.activities-copy p { max-width: 500px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.68; }
.activities-note { margin: 18px 0 22px; color: var(--muted); font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 1.6; }
.activities-cta { margin-top: 21px; padding: 12px 20px; border-radius: 10px; }
.activity-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid rgba(207,216,218,0.45); border-top: 3px solid #f37021; border-radius: 20px; background: #ffffff; box-shadow: 0 4px 14px rgba(62,85,95,0.05); overflow: hidden; }
.activity-list h3 { grid-column: 1 / -1; margin: 0; padding: 18px 22px 14px; border-bottom: 1px solid rgba(207,216,218,0.35); color: #3e555f; font-family: var(--font-heading); font-size: 20px; line-height: 1.3; font-weight: 500; }
.activity-row { min-height: 68px; display: flex; align-items: center; gap: 12px; padding: 18px 20px; color: #3e555f; font-family: var(--font-body); font-size: 15px; font-weight: 500; line-height: 1.5; border-top: 1px solid rgba(207,216,218,0.35); }
.activity-list h3 + .activity-row,
.activity-list h3 + .activity-row + .activity-row { border-top: 0; }
.activity-row:nth-of-type(even) { border-left: 1px solid rgba(207,216,218,0.35); }
.activity-row span { width: 24px; height: 24px; border-radius: 50%; background: rgba(243,112,33,0.10); color: #f37021; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.activity-row svg { width: 14px; height: 14px; stroke: currentColor; }
.activities-note { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 20px; background: #f8f8f8; border-top: 1px solid rgba(207,216,218,0.35); color: rgba(62,85,95,0.78); font-family: var(--font-body); font-size: 13px; font-weight: 550; line-height: 1.5; }
.activities-note svg { width: 15px; height: 15px; color: #3e555f; flex-shrink: 0; }
.activity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.activity-card { display: flex; gap: 12px; align-items: center; min-height: 88px; padding: 20px 20px; background: #ffffff; border: 1px solid rgba(207,216,218,0.45); border-radius: 20px; box-shadow: 0 8px 20px rgba(62,85,95,0.06); }
.activity-icon { width: 34px; height: 34px; border-radius: 50%; background: rgba(243,112,33,0.10); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.activity-icon svg { width: 17px; height: 17px; stroke: currentColor; }
.activity-title { font-family: var(--font-heading); font-size: 20px; font-weight: 500; color: var(--text); line-height: 1.3; margin-bottom: 0; }
.activity-desc { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--muted); line-height: 1.6; }

/* -- WHY UAQFTZ ------------------------------------- */
#why { padding: var(--section-roomy) 0; background:
  linear-gradient(90deg, rgba(14,26,31,0.98) 0%, rgba(14,26,31,0.94) 58%, rgba(14,26,31,0.78) 100%),
  radial-gradient(circle at 88% 18%, rgba(243,112,33,0.18), transparent 28%),
  var(--deep); }
#why h2 { color: #ffffff; }
.official-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.official-benefit { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border: 1px solid rgba(255,255,255,0.14); border-radius: 6px; background: rgba(255,255,255,0.08); box-shadow: none; color: rgba(255,255,255,0.88); font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1.45; }
.official-benefit span { width: 30px; height: 30px; border-radius: 50%; background: rgba(243,112,33,0.10); color: #f37021; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.official-benefit svg { width: 16px; height: 16px; stroke: currentColor; }
.why-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); gap: clamp(42px, 6vw, 82px); align-items: start; }
.why-intro { max-width: 760px; margin-top: 18px; color: rgba(255,255,255,0.74); font-family: var(--font-body); font-size: 16px; line-height: 1.7; }
.reason-list { list-style: none; display: flex; flex-direction: column; gap: 0; margin-top: 32px; border-top: 1px solid rgba(255,255,255,0.18); }
.reason-item { display: flex; gap: 18px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,0.18); }
.reason-num { width: 28px; padding-top: 2px; color: var(--primary); font-family: var(--font-heading); font-size: 14px; font-weight: 700; line-height: 1.3; flex-shrink: 0; }
.reason-item h3 { font-family: var(--font-heading); font-size: 20px; font-weight: 700; line-height: 1.3; color: #ffffff; margin-bottom: 4px; letter-spacing: -0.01em; }
.reason-item p { font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.68); line-height: 1.6; }
.authority-card { position: relative; overflow: hidden; background: #ffffff; border: 1px solid rgba(207,216,218,0.45); border-top: 3px solid #f37021; border-radius: 20px; padding: 40px 36px 34px; box-shadow: 0 2px 8px rgba(62,85,95,0.05); }
.authority-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(62,85,95,0.028) 1px, transparent 1px) 0 0 / 100% 36px,
    linear-gradient(90deg, rgba(62,85,95,0.02) 1px, transparent 1px) 0 0 / 58px 100%;
  opacity: 0.55;
  pointer-events: none;
}
.authority-card > * { position: relative; z-index: 1; }
.authority-card-label { margin-bottom: 18px; color: #f37021; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.authority-year { font-family: var(--font-heading); font-size: 52px; font-weight: 800; color: var(--amber-deep); line-height: 1.1; letter-spacing: -0.02em; }
.authority-title { margin-top: 12px; font-family: var(--font-heading); font-size: 20px; font-weight: 500; line-height: 1.3; color: #3e555f; letter-spacing: 0; }
.authority-card p { margin-top: 10px; color: #6c7e85; font-family: var(--font-body); font-size: 14px; line-height: 1.65; }
.authority-proof-list { display: grid; gap: 0; margin-top: 28px; border-top: 1px solid rgba(207,216,218,0.35); }
.authority-proof { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid rgba(207,216,218,0.28); color: #3e555f; font-family: var(--font-body); font-size: 15px; font-weight: 650; line-height: 1.35; }
.authority-proof span { color: #3e555f; font-weight: 700; }

/* -- PROCESS ---------------------------------------- */
#process { padding: var(--section-roomy) 0; background: #f8f8f8; }
.process-header { text-align: center; margin-bottom: clamp(42px, 6vw, 68px); }
.process-header p { margin: 12px auto 0; max-width: 480px; color: var(--muted); }
.process-track { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: #ffffff; border: 1px solid rgba(207,216,218,0.45); border-top: 3px solid #f37021; border-radius: 20px; box-shadow: 0 2px 8px rgba(62,85,95,0.05); overflow: hidden; padding: clamp(34px, 4vw, 46px) clamp(24px, 3vw, 38px) clamp(30px, 4vw, 42px); }
.process-line { position: absolute; top: 70px; left: 12%; right: 12%; height: 2px; background: rgba(243,112,33,0.34); z-index: 0; }
.process-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 0 24px; background: transparent; border: 0; box-shadow: none; }
.process-step + .process-step { border-left: 1px solid rgba(207,216,218,0.28); }
.process-node { width: 58px; height: 58px; border-radius: 50%; background: var(--primary); color: #fff; font-family: var(--font-heading); font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; box-shadow: 0 0 0 9px rgba(243,112,33,0.10); }
.process-icon { width: 34px; height: 34px; border-radius: 9px; background: rgba(62,85,95,0.06); border: 1px solid rgba(62,85,95,0.14); color: #3e555f; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.process-icon svg { width: 17px; height: 17px; stroke: currentColor; }
.process-step-label { margin-bottom: 8px; color: #f37021; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.process-step h4 { font-family: var(--font-heading); font-size: 20px; font-weight: 500; line-height: 1.3; color: var(--text); margin-bottom: 8px; }
.process-step p { font-size: 14px; color: #6c7e85; line-height: 1.65; }

.clarity-section { padding: 0; background: var(--orange-deep); }
.clarity-panel { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(28px, 4vw, 48px); align-items: center; background: transparent; border: 0; border-radius: 0; padding: clamp(36px, 5vw, 56px) 0; }
.clarity-copy h2 { margin: 8px 0 12px; }
.clarity-copy h2,
.clarity-copy .label { color: #ffffff; }
.clarity-copy p { max-width: 700px; color: rgba(255,255,255,0.86); font-size: 16px; font-weight: 550; line-height: 1.68; }
.clarity-note { display: flex; gap: 12px; align-items: flex-start; background: #ffffff; border: 1px solid rgba(207,216,218,0.45); border-radius: 12px; padding: 18px 18px; color: rgba(62,85,95,0.84); font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1.55; }
.clarity-note svg { width: 18px; height: 18px; color: #3e555f; flex-shrink: 0; margin-top: 2px; }

/* -- MID CTA BAND ----------------------------------- */
#cta-band { background: var(--primary); padding: 76px 0; }
.cta-band-inner { text-align: center; max-width: 740px; margin: 0 auto; }
.cta-band-inner h2 { color: #fff; font-size: 38px; margin-bottom: 14px; }
.cta-band-inner .sub { color: rgba(255,255,255,0.8); font-size: 17px; line-height: 1.65; max-width: 560px; margin: 0 auto 14px; }
.cta-band-inner .urgency { display: inline-block; background: rgba(62,85,95,0.15); border-radius: 6px; padding: 6px 14px; font-size: 13px; color: rgba(255,255,255,0.9); font-weight: 500; margin-bottom: 28px; }
.cta-band-btns { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* -- FAQ -------------------------------------------- */
#faq { padding: var(--section-roomy) 0; background: linear-gradient(180deg, #ffffff 0%, #f8f8f8 100%); }
.faq-wrap { display: grid; grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr); gap: clamp(34px, 5vw, 66px); align-items: start; }
.faq-header { margin-bottom: 0; }
.faq-header .label { position: relative; display: inline-flex; align-items: center; gap: 10px; }
.faq-header .label::after { content: ""; width: 42px; height: 2px; background: #f37021; border-radius: 999px; }
.faq-header h2 { margin-top: 4px; }
.faq-header p { margin-top: 12px; color: var(--muted); line-height: 1.65; max-width: 390px; }
.faq-help-note { margin-top: 22px; padding: 14px 16px; background: #f8f8f8; border: 1px solid rgba(207,216,218,0.42); border-radius: 10px; color: rgba(62,85,95,0.82); font-family: var(--font-body); font-size: 13px; line-height: 1.6; }
.faq-cta { margin-top: 18px; padding: 12px 20px; border-radius: 9px; }
.faq-list { overflow: hidden; background: #ffffff; border: 1px solid rgba(207,216,218,0.45); border-radius: 20px; box-shadow: 0 2px 8px rgba(62,85,95,0.05); }
.faq-item { border-bottom: 1px solid rgba(207,216,218,0.32); transition: background 180ms var(--ease), border-color 180ms var(--ease); }
.faq-item:last-child { border-bottom: 0; }
.faq-item:hover { background: rgba(243,112,33,0.025); }
.faq-item.open { background: rgba(243,112,33,0.04); box-shadow: inset 3px 0 0 #f37021; }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; background: none; border: none; cursor: pointer; text-align: left; }
.faq-q-text { font-size: 16px; font-weight: 500; line-height: 1.6; color: var(--text); }
.faq-chevron { color: var(--primary); flex-shrink: 0; transition: transform 250ms var(--ease); }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-a { overflow: hidden; max-height: 0; transition: max-height 280ms var(--ease); }
.faq-a-inner { padding: 0 22px 22px; font-size: 14px; color: rgba(62,85,95,0.78); line-height: 1.7; }

/* -- NOT READY SECTION ------------------------------ */
#not-ready { background: var(--soft); border-top: 1px solid #eaeaea; padding: 56px 0; }
.not-ready-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.not-ready-card { background: #fff; border: 1px solid #e5e5e6; border-radius: 20px; padding: 28px 24px; text-align: center; }
.not-ready-card h3 { font-size: 20px; margin-bottom: 8px; }
.not-ready-card p { font-size: 14px; color: var(--muted); line-height: 1.65; margin-bottom: 20px; }
.not-ready-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; justify-content: center; margin-top: 8px; }
.not-ready-divider::before, .not-ready-divider::after { content: ""; flex: 1; height: 1px; background: #eaeaea; }

/* -- FINAL CTA + FOOTER ----------------------------- */
#final-cta { background:
  linear-gradient(90deg, rgba(14,26,31,0.98), rgba(14,26,31,0.92)),
  var(--deep);
  padding: var(--section-standard) 0; text-align: left; border-top: 4px solid #f37021; }
#final-cta .container.final-cta-inner { max-width: 1160px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; align-items: center; gap: clamp(38px, 6vw, 74px); background: transparent; border: 0; border-radius: 0; padding: 0 24px; box-shadow: none; }
.final-cta-copy { position: relative; padding-top: 18px; border-top: 2px solid rgba(243,112,33,0.88); }
#final-cta .tagline { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #f37021; margin-bottom: 14px; }
#final-cta h2 { color: #ffffff; font-size: 34px; line-height: 1.3; margin-bottom: 14px; max-width: 640px; }
#final-cta p { color: rgba(255,255,255,0.76); max-width: 620px; margin: 0; font-size: 16px; line-height: 1.6; font-weight: 400; }
.final-eligibility { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 9px 12px; background: #ffffff; border: 1px solid rgba(207,216,218,0.45); border-radius: 10px; color: #3e555f; font-family: var(--font-body); font-size: 13px; font-weight: 600; }
.final-eligibility svg { width: 16px; height: 16px; color: #3e555f; stroke-width: 2; }
.final-action-panel { background: #ffffff; border: 1px solid rgba(207,216,218,0.45); border-radius: 20px; padding: 24px; box-shadow: 0 2px 8px rgba(62,85,95,0.05); }
.final-action-panel .btn { width: 100%; justify-content: center; font-size: 16px; font-weight: 700; }
#final-cta .btn-primary { background: var(--orange-deep); color: #ffffff; border: 1px solid var(--orange-deep); box-shadow: 0 8px 18px rgba(243,112,33,0.18); }
#final-cta .btn-primary:hover { background: var(--orange-press); color: #ffffff; transform: translateY(-1px); }
.final-phone { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; margin-top: 12px; padding: 0 18px; color: #3e555f; border: 1px solid rgba(62,85,95,0.24); border-radius: 9px; font-family: var(--font-body); font-size: 15px; font-weight: 700; text-decoration: none; background: #ffffff; }
.final-phone:hover { color: #f37021; border-color: rgba(243,112,33,0.42); }
.final-trust { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(207,216,218,0.35); color: #5f6063; font-family: var(--font-body); font-size: 13px; line-height: 1.5; font-weight: 500; }
.final-trust strong { color: #f37021; letter-spacing: 0.06em; margin: 0 6px; }
.final-trust-separator { color: rgba(62,85,95,0.28); margin-right: 6px; }
.review-link { color: inherit; font-weight: 600; text-decoration: none; text-underline-offset: 3px; }
.review-link:hover { color: #f37021; text-decoration: underline; }
.final-soft-link { display: inline-flex; width: 100%; justify-content: center; margin-top: 12px; color: #3e555f; font-family: var(--font-body); font-size: 14px; font-weight: 600; text-decoration: none; }
.final-soft-link:hover { color: #f37021; text-decoration: underline; }

footer { background: #3e555f; padding: 28px 0; border-top: 3px solid #f37021; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-logo-name { font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: #ffffff; }
.footer-logo-sub { font-size: 11px; color: rgba(255,255,255,0.78); margin-top: 2px; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { font-size: 13px; color: #ffffff; display: flex; align-items: center; gap: 5px; transition: color 150ms; }
.footer-links a:hover { color: rgba(255,255,255,0.78); }
.footer-links [data-lucide] { width: 13px; height: 13px; }

/* -- STICKY BAR ------------------------------------- */
#sticky-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: #fff; border-top: 1.5px solid #e5e5e6; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; transform: translateY(110%); transition: transform 300ms var(--ease); box-shadow: 0 -8px 28px rgba(62,85,95,0.1); }
#sticky-bar.show { transform: translateY(0); }
.sticky-info { min-width: 0; }
.sticky-info-price { font-family: var(--font-heading); font-size: 17px; font-weight: 700; color: var(--text); white-space: nowrap; }
.sticky-info-price span { color: var(--primary); }
.sticky-info-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.sticky-btns { display: flex; gap: 8px; flex-shrink: 0; }
.sticky-btn { padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; border: none; white-space: nowrap; transition: background 150ms; font-family: var(--font-body); display: flex; align-items: center; gap: 6px; }
.sticky-btn-cta { background: var(--primary); color: #fff; animation: pulse-cta 2.8s var(--ease) infinite; }
.sticky-btn-cta:hover { background: #b04a0c; }

/* -- RESPONSIVE ------------------------------------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-form-stack,
  .form-card { max-width: 430px; }
  .why-grid { grid-template-columns: 1fr; gap: 40px; }
  .not-ready-inner { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .hero-copy::before { display: none; }
  h1 { font-size: 36px; line-height: 1.2; }
  .hero-copy h1 { margin-bottom: 20px; line-height: 1.2; }
  .hero-h1-line-main { font-size: 36px; }
  .hero-h1-accent { font-size: 28px; line-height: 1.3; margin-top: 8px; padding-bottom: 5px; }
  .hero-h1-line-sub { font-size: 28px; line-height: 1.3; }
  .hero-eyebrow { margin-bottom: 16px; }
  .hero-inline-benefits { gap: 10px 16px; margin-top: 18px; max-width: 100%; }
  .hero-inline-item { font-size: 14px; }
  .hero-price-main { font-size: 36px; }
  .dirham-symbol { width: 30px; height: 26px; }
  .hero-package-summary { max-width: 100%; margin-top: 20px; padding-top: 20px; }
  .hero-price-note { font-size: 14px; }
  .hero-price-summary { font-size: 14px; line-height: 1.45; }
  h2 { font-size: 28px; line-height: 1.3; }
  #hero { padding: 44px 0 84px; }
  section { padding: 58px 0; }
  #included, #why, #process, #faq, #testimonials { padding: 62px 0; }
  #activities, .clarity-section, #final-cta { padding: 54px 0; }
  #packages { padding: 62px 0; }
  .section-header,
  .pricing-header { margin-bottom: 34px; }
  .faq-wrap { grid-template-columns: 1fr; gap: 28px; }
  .compare-grid,
  .clarity-panel { grid-template-columns: 1fr; }
  .clarity-panel { padding: 32px 0; }
  .faq-header p { max-width: 100%; }
  .activities-layout { grid-template-columns: 1fr; gap: 28px; }
  .activities-copy { position: static; }
  .activity-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
  .nav-call { font-size: 12px; }
  .hamburger { display: flex; }
  #trust { margin-top: -34px; padding-bottom: 20px; }
  .trust-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-item { justify-content: flex-start; text-align: left; border-left: none !important; border-top: 1px solid rgba(207,216,218,0.34); min-height: 58px; padding: 0 18px; white-space: normal; }
  .trust-item + .trust-item::after { content: none; }
  .trust-item:nth-child(-n+2) { border-top: none; }
  .package-section-header h2 { max-width: 320px; }
  .package-breakdown { grid-template-columns: 1fr; gap: 18px; }
  .package-group { min-height: auto; padding: 22px 20px 22px; }
  .package-group-head { grid-template-columns: 54px 1fr; gap: 16px; margin-bottom: 18px; }
  .package-group-head span { width: 52px; height: 52px; border-radius: 14px; }
  .package-group-head svg { width: 24px; height: 24px; }
  .package-group h3 { font-size: 20px; line-height: 1.3; }
  .package-group li { min-height: 42px; padding: 12px 0 12px 32px; font-size: 14px; line-height: 1.6; }
  .package-note { padding: 16px 18px; align-items: flex-start; font-size: 14px; }
  .official-benefits { grid-template-columns: 1fr; }
  .authority-card { padding: 28px 24px 26px; }
  .authority-year { font-size: 58px; }
  .authority-proof { align-items: flex-start; flex-direction: column; gap: 4px; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .pricing-row { grid-template-columns: 1fr 1fr; gap: 12px 18px; padding: 22px; }
  .pricing-action { justify-content: flex-start; grid-column: 1 / -1; }
  .testi-grid { grid-template-columns: 1fr; }
  .process-track { grid-template-columns: 1fr; gap: 0; padding: 28px 24px; }
  .process-line { display: block; top: 48px; bottom: 48px; left: 51px; right: auto; width: 2px; height: auto; }
  .process-step { margin: 0; padding: 0 0 26px 68px; min-height: 0; }
  .process-step + .process-step { border-left: 0; border-top: 1px solid rgba(207,216,218,0.28); padding-top: 26px; }
  .process-node { position: absolute; left: 0; top: 0; width: 50px; height: 50px; margin-bottom: 0; }
  .process-step + .process-step .process-node { top: 26px; }
  .quick-cta-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .quick-cta-btns { width: 100%; flex-direction: column; }
  .quick-cta-btns .btn { width: 100%; justify-content: center; }
  .cta-band-inner h2 { font-size: 26px; }
  .cta-band-btns { flex-direction: column; align-items: stretch; }
  .cta-band-btns .btn { justify-content: center; }
  #final-cta .container.final-cta-inner { grid-template-columns: 1fr; gap: 24px; }
  #final-cta h2 { font-size: 28px; line-height: 1.3; }
  .final-action-panel { padding: 18px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .phone-row { grid-template-columns: 104px 1fr; }
  .phone-code-menu { width: min(300px, calc(100vw - 48px)); }
  .hero-form-stack,
  .form-card { max-width: 100%; margin-left: 0; margin-right: 0; }
  .hero-form-stack { transform: none; }
  .form-card-body { padding: 18px; }
}
@media (max-width: 520px) {
  .grid-3 { grid-template-columns: 1fr; }
  .pricing-row { grid-template-columns: 1fr; gap: 10px; align-items: flex-start; }
  .pricing-price { font-size: 32px; }
  .pricing-row .btn { width: 100%; }
  .activity-list { grid-template-columns: 1fr; }
  .activity-list h3 { padding: 17px 18px 13px; font-size: 18px; }
  .activity-row { min-height: auto; padding: 16px 18px; }
  .activity-list h3 + .activity-row { border-top: 0; }
  .activity-list h3 + .activity-row + .activity-row { border-top: 1px solid rgba(207,216,218,0.35); }
  .activity-row:nth-of-type(even) { border-left: none; }
  .activities-note { align-items: flex-start; padding: 14px 18px; }
  .activity-grid { grid-template-columns: 1fr; }
  .activity-card { min-height: auto; padding: 20px 18px; }
  .process-step { align-items: flex-start; text-align: left; }
  .trust-inner { grid-template-columns: 1fr; }
  .trust-item { min-height: 54px; }
  .trust-item:nth-child(2) { border-top: 1px solid rgba(255,255,255,0.22); }
}

/* ===== STRUCTURAL LAYOUT PATTERNS (see DESIGN.md Layout System) ===== */

/* Hero — full-width overline meta bar */
.hero-overline { display: flex; flex-wrap: wrap; gap: 13px 26px; align-items: center; padding: 0 0 26px; margin-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.16); position: relative; z-index: 1; }
.hero-ol-item { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.64); }
.hero-ol-item b { color: #fff; font-weight: 700; }
.hero-ol-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }

/* What's Included — split / asymmetric header */
.included-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: end; margin-bottom: 46px; padding-bottom: 30px; border-bottom: 1px solid var(--border); }
.included-split-l h2 { margin-top: 14px; }
.included-split-l h2 span { color: var(--orange-deep); display: block; white-space: nowrap; }
.included-split-r { padding-bottom: 5px; }
.included-split-r p { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 48ch; }

/* Process — indexed structure */
.process-header--mini { text-align: left; max-width: none; margin-bottom: 40px; }
.process-index { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 34px; row-gap: 30px; border-top: 2px solid var(--ink-900); }
.pindex-step { padding: 22px 0 0 0; }
.pindex-num { font-family: var(--font-heading); font-size: 40px; font-weight: 800; color: var(--orange-deep); line-height: 1; letter-spacing: -0.03em; }
.pindex-label { margin-top: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pindex-step h3 { font-family: var(--font-heading); font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ink-900); margin: 6px 0 8px; letter-spacing: -0.01em; }
.pindex-step p { font-size: 14px; color: var(--muted); line-height: 1.6; max-width: 26ch; }

/* Why — flipped (authority card left, copy right) */
.why-grid--flipped { grid-template-columns: 0.82fr 1.18fr; align-items: center; }

@media (max-width: 860px) {
  .included-split { grid-template-columns: 1fr; gap: 16px; align-items: start; padding-bottom: 24px; margin-bottom: 32px; }
  .included-split-l h2 { margin-top: 10px; }
  .process-index { grid-template-columns: 1fr 1fr; }
  .pindex-step:nth-child(2n) { border-right: none; }
  .pindex-step:nth-child(1), .pindex-step:nth-child(2) { border-bottom: 1px solid var(--border); }
  .why-grid--flipped { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .process-index { grid-template-columns: 1fr; }
  .pindex-step { border-right: none; border-bottom: 1px solid var(--border); padding: 20px 0; }
  .pindex-step:last-child { border-bottom: none; }
  .hero-overline { gap: 10px 18px; }
}

/* Visible keyboard focus (WCAG 2.4.11) */
.faq-q:focus-visible,
.intent-option:focus-visible,
.btn:focus-visible,
.nav-call:focus-visible,
.review-link:focus-visible { outline: 2.5px solid var(--primary); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(243,112,33,0.18); border-radius: 6px; }

/* Custom brand dropdown (replaces native select popup) */
.brand-select { position: relative; }
.brand-select-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; pointer-events: none; }
.brand-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; cursor: pointer; background: #fff; }
.brand-select-value { font-size: 14px; line-height: 1.3; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-select-value.is-placeholder { color: var(--muted); }
.brand-select-chevron { width: 17px; height: 17px; color: var(--orange-deep); flex-shrink: 0; transition: transform 180ms ease; }
.brand-select-trigger[aria-expanded="true"] .brand-select-chevron { transform: rotate(180deg); }
.brand-select-trigger[aria-expanded="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(243,112,33,0.10); }
.brand-select-native.error ~ .brand-select-trigger { border-color: #f37021; }
.brand-select-menu { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid rgba(207,216,218,0.55); border-radius: 10px; box-shadow: 0 16px 40px rgba(62,85,95,0.16); padding: 6px; max-height: 300px; overflow-y: auto; }
.brand-select-option { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border: none; background: transparent; border-radius: 8px; font-family: var(--font-body); font-size: 14px; color: var(--text); cursor: pointer; transition: background 120ms ease, color 120ms ease; }
.brand-select-option:hover { background: var(--orange-tint); color: var(--orange-press); }
.brand-select-option[aria-selected="true"] { background: var(--orange-tint); color: var(--orange-press); font-weight: 600; }
.brand-select-option .bs-check { margin-left: auto; width: 16px; height: 16px; color: var(--orange-deep); opacity: 0; flex-shrink: 0; }
.brand-select-option[aria-selected="true"] .bs-check { opacity: 1; }

/* Native select fallback styling (kept; selects now hidden) */
select.field-input {
  -webkit-appearance: none; appearance: none; cursor: pointer; color-scheme: light;
  accent-color: var(--primary);
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d95e00' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 17px;
}
select.field-input:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d95e00' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
select.field-input option { background: #ffffff; color: var(--text); padding: 10px; }
select.field-input option:checked { background: var(--orange-tint); color: var(--orange-press); font-weight: 600; }

/* Remove unrelated decorative patterns from Included cards (flat, modern) */
.package-group::after,
.package-group--residency::after,
.package-group--support::after { content: none; display: none; }
.package-group h3::after { height: 2px; margin-top: 14px; }

/* Compare — centered statement header */
.compare-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.compare-head h2 { margin-top: 6px; }
.compare-head p { color: var(--muted); font-size: 16px; line-height: 1.6; margin-top: 14px; }

/* -- MISC ---------------------------------------------- */
.btn-lg { padding: 15px 28px; font-size: 15px; border-radius: 9px; }

/* ===================================================================
   BUSINESS FACILITIES PAGE — /business-facilities-uae/
   =================================================================== */


/* Layout system rebuilt 2026-08-19 against the approved Calendly + Atlassian
   references: flat surfaces, hairline borders instead of shadows, one idea per
   screen, consistent centred section headers, generous vertical rhythm.
   Colours are the locked UAQ palette — unchanged. */

/* -- Shared section rhythm + header ------------------------------- */
.bf-section-head { max-width: 760px; margin: 0 auto clamp(48px, 6vw, 80px); text-align: center; }
.bf-section-head .label { display: block; margin-bottom: 14px; color: var(--orange-press); }
.bf-section-head h2 { margin: 0 auto; }
.bf-section-head p { margin: 18px auto 0; max-width: 62ch; color: var(--muted); font-size: 18px; line-height: 1.6; }
.bf-section-head--invert .label { color: rgba(255,255,255,0.62); }
.bf-section-head--invert h2 { color: #ffffff; }
.bf-section-head--invert p { color: rgba(255,255,255,0.7); }

/* -- HERO: split, media bleeds to the viewport edge ---------------- */
.bf-hero { padding: clamp(32px, 5vw, 72px) 0 0; background: #ffffff; }
.bf-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
  min-height: min(80svh, 700px);
  padding-bottom: clamp(40px, 5vw, 72px);
  max-width: 1760px;
  margin: 0 auto;
  padding-left: clamp(24px, 5vw, 64px);
}
.bf-hero-kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--orange-press); margin-bottom: 20px; }
.bf-hero-kicker::before { content: ""; width: 24px; height: 2px; background: var(--primary); border-radius: 999px; }
.bf-hero-copy h1 { font-size: clamp(40px, 6vw, 68px); line-height: 1.05; }
.bf-hero-h1-line { display: block; }
.bf-hero-desc { margin-top: 24px; max-width: 44ch; color: var(--muted); font-family: var(--font-body); font-size: 19px; line-height: 1.6; }
.bf-hero-cta { margin-top: 34px; }
.bf-hero-media { position: relative; border-radius: 20px 0 0 20px; overflow: hidden; aspect-ratio: 4 / 5; align-self: stretch; }
.bf-hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* -- INTRO lead-in -------------------------------------------------- */
.bf-facility-nav { padding: clamp(64px, 7vw, 104px) 0 0; }
.bf-intro { max-width: 720px; margin: 0 auto; text-align: center; }
.bf-intro p { color: var(--muted); font-size: 18px; line-height: 1.7; }
.bf-intro p + p { margin-top: 16px; }

/* -- FACILITIES: alternating full-width feature rows --------------- */
.bf-showcase { padding: clamp(88px, 10vw, 152px) 0; background: #ffffff; }
/* --- BASE (no JS / mobile / reduced motion): plain stacked slides --------
   Every slide is visible and in flow. The pinned behaviour below is scoped
   entirely behind .bf-pin--on, which main.js only adds when it is safe. */
.bf-pin-tabs { display: none; }
.bf-pin-slides { display: flex; flex-direction: column; gap: clamp(72px, 9vw, 128px); }
.bf-slide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.bf-slide:nth-child(even) .bf-slide-media { order: 2; }
.bf-slide-media { border-radius: 20px; overflow: hidden; background: var(--soft); aspect-ratio: 4 / 3; position: relative; }
.bf-slide-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bf-feature-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--orange-press); }
.bf-feature-body h3 { margin-top: 12px; font-size: clamp(28px, 3vw, 38px); line-height: 1.15; letter-spacing: -0.02em; }
.bf-feature-desc { margin-top: 16px; color: var(--muted); font-size: 17px; line-height: 1.65; max-width: 46ch; }
.bf-feature-benefits { list-style: none; margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.bf-feature-benefits li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.55; color: var(--text); }
.bf-feature-benefits li i { color: var(--teal); font-size: 19px; flex-shrink: 0; margin-top: 1px; }
.bf-feature-more { margin-top: 4px; }
.bf-feature-more summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; color: var(--orange-press); padding: 8px 0; user-select: none; }
.bf-feature-more summary::-webkit-details-marker { display: none; }
.bf-feature-more summary::before { content: "+ "; }
.bf-feature-more[open] summary::before { content: "\2212 "; }
.bf-feature-cta { margin-top: 28px; align-self: flex-start; }

/* --- PINNED MODE (JS-gated: >=1024px, motion allowed) -------------------
   .bf-pin is a tall scroll track; .bf-pin-stage sticks inside it, so scrolling
   the track advances slides instead of moving the page. Track height is set
   inline by main.js from the slide count. */
.bf-pin--on { position: relative; }
/* The sticky stage paints the section's colour to the very end of the scroll
   track, so the section's own bottom padding would show as a band of bare
   white between the last slide's tint and the next section. Only drop it in
   pinned mode -- the stacked fallback still needs the breathing room. */
.bf-showcase:has(.bf-pin--on) { padding-bottom: 0; }
.bf-pin--on .bf-pin-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--slide-tint, var(--surface));
  transition: background 520ms var(--ease);
}
.bf-pin--on .bf-pin-inner { width: 100%; }

.bf-pin--on .bf-pin-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: clamp(28px, 3.5vw, 48px);
}
.bf-pin--on .bf-pin-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.7);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.bf-pin--on .bf-pin-tab i { font-size: 19px; }
.bf-pin--on .bf-pin-tab:hover { color: var(--ink-900); border-color: var(--border-strong); }
.bf-pin--on .bf-pin-tab[aria-selected="true"] { background: var(--ink-900); border-color: var(--ink-900); color: #ffffff; }

/* Slides stack on top of one another; only the active one is shown */
.bf-pin--on .bf-pin-slides { display: grid; gap: 0; }
.bf-pin--on .bf-slide {
  grid-area: 1 / 1;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease), visibility 0s linear 420ms;
}
.bf-pin--on .bf-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 420ms var(--ease), transform 420ms var(--ease), visibility 0s;
}
.bf-pin--on .bf-slide:nth-child(even) .bf-slide-media { order: 0; }
.bf-pin--on .bf-slide-media { aspect-ratio: 4 / 3; max-height: 56svh; }
/* The stage is one viewport tall, so trim the densest bits to prevent clipping */
.bf-pin--on .bf-feature-desc { margin-top: 12px; }
.bf-pin--on .bf-feature-benefits { margin-top: 18px; gap: 9px; }
.bf-pin--on .bf-feature-cta { margin-top: 22px; }

/* Placeholder fallback for facility rows still awaiting photography */
.bf-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--soft); border: 1px dashed var(--border-strong); color: var(--muted); text-align: center; padding: 20px; }
.bf-placeholder i { font-size: 30px; opacity: 0.6; }
.bf-placeholder span { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; letter-spacing: 0.03em; }
.bf-placeholder-dims { font-weight: 400; font-size: 11.5px; opacity: 0.75; }

/* -- GROWTH PATHWAY: quiet four-up, no boxes ---------------------- */
.bf-growth { padding: clamp(88px, 10vw, 152px) 0; background: var(--soft); }
.bf-growth-closing { margin-top: 14px !important; color: var(--ink-900) !important; font-weight: 600; }
.bf-pathway { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); counter-reset: stage; }
.bf-pathway-stage { counter-increment: stage; padding-top: 22px; border-top: 2px solid var(--border-strong); }
.bf-pathway-stage::before { content: "0" counter(stage); display: block; margin-bottom: 14px; font-family: var(--font-heading); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; color: var(--orange-press); }
.bf-pathway-stage h3 { font-size: 18px; line-height: 1.3; }
.bf-pathway-stage p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.bf-growth-note { max-width: 720px; margin: clamp(40px, 5vw, 60px) auto 0; text-align: center; color: var(--muted); font-size: 14.5px; line-height: 1.65; }

/* -- WHY UAQFTZ: dark band, borderless clusters ------------------- */
/* ID-qualified: the legacy #why rule carries its own linear + orange-radial
   background and would otherwise win on specificity. */
#why.bf-why { padding: clamp(88px, 10vw, 152px) 0; background: var(--deep-gradient); }
.bf-why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px); max-width: 1040px; margin: 0 auto; }
/* Three distinct tiers. Previously the cluster title (19px) was only 1.19x the
   item title (16px) and both were bold white, so the section read as eight
   headings of equal weight with no entry point. The index numeral reuses the
   growth section's 01-04 device and the stat band's sky-blue accent. */
.bf-why-cluster-index {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--blue);
  margin-bottom: 14px;
}
.bf-why-cluster-title {
  color: #ffffff;
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.bf-why-cluster-items { display: flex; flex-direction: column; gap: 24px; margin-top: 24px; }
/* Subordinate tier: lighter weight and a touch smaller, so it reads as a label
   under the cluster rather than competing with it. */
.bf-why-item-title { font-family: var(--font-heading); font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.92); letter-spacing: 0; }
.bf-why-item p { margin-top: 7px; color: rgba(255, 255, 255, 0.62); font-size: 15px; line-height: 1.65; max-width: 46ch; }

/* -- CONNECTIVITY -------------------------------------------------- */
.bf-connectivity { padding: clamp(88px, 10vw, 152px) 0; background: #ffffff; }
.bf-connectivity-map { position: relative; height: clamp(280px, 36vw, 460px); border-radius: 20px; overflow: hidden; }
.bf-connectivity-map img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bf-connectivity-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); margin: clamp(48px, 5vw, 72px) auto 0; max-width: 980px; }
.bf-connectivity-point { text-align: center; }
.bf-connectivity-point h3 { font-size: 19px; }
.bf-connectivity-point p { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* -- WHO IS IT FOR: editorial rows -------------------------------- */
.bf-who { padding: clamp(88px, 10vw, 152px) 0; background: var(--soft); }
.bf-who-list { border-top: 1px solid var(--border-strong); max-width: 940px; margin: 0 auto; }
/* Fixed left column (not fr/auto): every row is its own grid container, so
   content-sized tracks resolved to different widths per row and left the
   description column ragged. Fixed widths keep all rows optically aligned. */
.bf-who-row { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: baseline; gap: clamp(24px, 4vw, 56px); padding: 30px 4px; border-bottom: 1px solid var(--border); }
.bf-who-title { font-family: var(--font-heading); font-size: 19px; font-weight: 700; color: var(--ink-900); letter-spacing: -0.01em; line-height: 1.35; }
.bf-who-text { color: var(--muted); font-size: 16px; line-height: 1.6; }
.bf-who-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bf-who-tag { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--teal-tint); color: var(--teal); white-space: nowrap; }

/* -- FINAL CTA + embedded enquiry form ---------------------------- */
/* ID-qualified for the same reason as #why.bf-why above. */
#final-cta.bf-final-cta { background: var(--deep-gradient); padding: clamp(80px, 9vw, 128px) 0; }
.bf-final-cta-inner { max-width: 1160px; display: grid; grid-template-columns: minmax(0, 1fr) 410px; align-items: center; gap: clamp(48px, 6vw, 88px); }
.bf-final-cta-kicker { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--primary); margin-bottom: 18px; }
.bf-final-cta h2 { color: #ffffff; font-size: clamp(32px, 3.6vw, 46px); line-height: 1.12; margin-bottom: 20px; }
.bf-final-cta-copy p { color: rgba(255,255,255,0.72); max-width: 54ch; margin: 0; font-size: 17px; line-height: 1.65; }
.bf-final-cta-closing { margin-top: 14px !important; color: #ffffff !important; font-weight: 600; }
.bf-final-cta-anchor { margin-top: 30px; }
.bf-final-cta-fine { margin-top: 20px !important; color: rgba(255,255,255,0.5) !important; font-size: 13.5px !important; }
.bf-final-cta-inner .form-card,
.bf-final-cta-inner .hero-form-stack { margin-left: 0; margin-right: 0; }
/* The legacy #final-cta ID rules (white text for the dark band) were bleeding
   into the white enquiry card and rendering its heading invisible. Re-scope
   with ID-beating specificity so the card keeps ink-on-white. */
#final-cta .form-card .form-heading-title { color: var(--ink-900); font-size: 22px; line-height: 1.3; }
#final-cta .form-card .form-heading p { color: var(--muted); font-size: 14px; line-height: 1.55; }

/* -- Keeping #f46f22 at AA ------------------------------------------
   #f46f22 has a relative luminance of 0.307, so as *text* it needs a
   background darker than ~#2b2b2b to reach 4.5:1 -- unreachable on any light
   surface. The orange is kept exactly as-is and used the two ways that do
   pass: as a fill carrying near-black text (5.32:1), and as text on the dark
   bands (6.02:1). Small orange-on-white text is replaced below. */

/* Every kicker/eyebrow is plain teal text — no pills. Orange is reserved for
   actions (buttons and the choice chip), so it stays the single strongest
   signal on the page rather than competing with the hero artwork, which now
   carries the brand orange itself. Teal is the established trust colour and
   clears AA on all our light surfaces. */
.bf-hero-kicker,
.bf-section-head .label,
body:has(.bf-hero) .faq-header .label,
.bf-feature-eyebrow,
#form-card .form-heading-label,
#form-card .form-step-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--teal);
  font-weight: 700;
}
/* The step counter is progress metadata, so it stays quieter still. */
#form-card .form-step-kicker { color: var(--muted); font-weight: 600; }
/* Keep the hero kicker's leading rule, but in teal to match. */
.bf-hero-kicker::before { display: block; background: var(--teal); }
/* In pinned mode the active tab already names the facility, so the slide
   eyebrow would just repeat it. The stacked fallback has no tabs, so it keeps
   the eyebrow as its label. */
.bf-pin--on .bf-feature-eyebrow { display: none; }
/* Invert sections already sit on dark, where the orange passes as plain text. */
.bf-section-head--invert .label { background: none; padding: 0; color: rgba(255, 255, 255, 0.62); font-weight: 600; }

/* Interactive text cannot become a pill, so it takes ink and keeps orange as
   a fill or indicator instead. */
.nav-links a:hover,
.nav-links a.active,
.nav-mobile a:hover,
.nav-mobile a.active { color: var(--ink-900); }
.brand-select-option:hover,
.brand-select-option[aria-selected="true"],
select.field-input option:checked { color: var(--ink-900); background: var(--orange-tint); }
.bf-feature-more summary { color: var(--ink-900); text-decoration: underline; text-decoration-color: var(--orange-press); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.intent-option--primary strong { color: var(--ink-900); }
/* Outline CTA: orange text on white is 2.9:1, so the label takes ink and the
   orange stays as the border. */
body:has(.bf-hero) .btn-outline { color: var(--ink-900); }
.feature-tag { background: var(--orange-press); border-color: var(--orange-press); color: var(--ink-900); }
/* Growth numerals: ink figure, orange kept as the rule above it. */
.bf-pathway-stage { border-top-color: var(--orange-press); }
.bf-pathway-stage::before { color: var(--ink-900); }

/* -- Step-1 choice affordance -------------------------------------- */
/* The bare "→" text glyph rendered as an unstyled character. Replaced with a
   circular chip plus a border-drawn chevron: crisp at any size, no font
   dependency, and it carries the primary/secondary hierarchy through colour
   (orange chip for the leasing path, neutral for the secondary path). */
#form-card .intent-option,
#form-card .intent-option--primary,
#form-card .intent-option--secondary {
  padding-right: 64px;
  /* Single knob for the chip accent so it is easy to tune. */
  --chip-accent: #f46f22;
}

#form-card .intent-option::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  border-radius: 999px;
  background: var(--orange-tint);
  border: 1px solid rgba(243, 112, 33, 0.30);
  transition: background 200ms var(--ease), border-color 200ms var(--ease), right 200ms var(--ease);
}
#form-card .intent-option::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 28px;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border: 0;
  border-top: 2px solid var(--chip-accent);
  border-right: 2px solid var(--chip-accent);
  border-radius: 1px;
  transform: rotate(45deg);
  opacity: 1;
  font-size: 0;
  transition: border-color 200ms var(--ease), right 200ms var(--ease);
}

/* Secondary path stays neutral so it does not compete with the primary */
#form-card .intent-option--secondary::before { background: #ffffff; border-color: var(--border-strong); }
#form-card .intent-option--secondary::after { border-color: var(--muted); }
#form-card .intent-option--secondary:hover::before { background: var(--ink-900); border-color: var(--ink-900); }
#form-card .intent-option--secondary:hover::after { border-color: #ffffff; }

/* Hover / selected: chip fills and the chevron slides a touch to the right */
#form-card .intent-option:hover::before,
#form-card .intent-option.active::before,
#form-card .intent-option--secondary.active::before { background: var(--chip-accent); border-color: var(--chip-accent); right: 12px; }
#form-card .intent-option:hover::after,
#form-card .intent-option.active::after,
#form-card .intent-option--secondary.active::after { border-color: #ffffff; right: 26px; }

@media (prefers-reduced-motion: reduce) {
  #form-card .intent-option::before,
  #form-card .intent-option::after { transition: none; }
}

/* -- FAQ: single centred column, one continuous list -------------- */
/* Was a 0.7fr/1.3fr split with the questions broken across two separately
   bordered cards, which read as an accidental seam mid-list. */
body:has(.bf-hero) #faq { padding: clamp(88px, 10vw, 152px) 0; background: #ffffff; }
body:has(.bf-hero) .faq-wrap { display: block; }
body:has(.bf-hero) .faq-header { max-width: 700px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
body:has(.bf-hero) .faq-header .label { display: inline-flex; margin-bottom: 14px; }
body:has(.bf-hero) .faq-header .label::after { display: none; }
body:has(.bf-hero) .faq-header h2 { margin: 0 auto; }
body:has(.bf-hero) .faq-header p { margin: 18px auto 0; max-width: 62ch; font-size: 18px; }
body:has(.bf-hero) .faq-help-note { max-width: 62ch; margin: 16px auto 0; padding: 0; background: none; border: 0; border-radius: 0; font-size: 15px; color: var(--muted); }
body:has(.bf-hero) .faq-cta { display: inline-flex; margin-top: 26px; }
body:has(.bf-hero) .faq-list { max-width: 880px; margin: 0 auto; border-radius: 20px; box-shadow: none; }

/* -- Page-level overrides for shared components ------------------- */
/* Trust strip floats on the canvas — no card, no border, no shadow */
/* -- TRUST STATS: dark proof band under the hero ------------------- */
/* Stat-counter treatment (icon / figure / label). Flat --deep rather than a
   gradient, per the system's no-gradient rule; icons use the logo's light
   sky-blue, which is the only palette tone bright enough to read on --deep. */
.bf-stats { background: var(--deep-gradient); padding: clamp(38px, 4.5vw, 60px) 0; }
.bf-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.bf-stat { text-align: center; padding: 0 8px; }
.bf-stat-icon { color: var(--blue); line-height: 1; margin-bottom: 14px; }
.bf-stat-icon i { font-size: 34px; }
.bf-stat-figure { font-family: var(--font-heading); font-size: clamp(26px, 3.2vw, 42px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: #ffffff; font-variant-numeric: tabular-nums; }
.bf-stat-label { margin-top: 8px; font-family: var(--font-body); font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.62); }

/* -- Scroll-reveal (JS-driven; skipped entirely under reduced motion) -- */
.bf-reveal { opacity: 0; transform: translateY(18px); transition: opacity 550ms var(--ease), transform 550ms var(--ease); }
.bf-reveal.bf-revealed { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .bf-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

.bf-feature-cta:focus-visible,
.bf-feature-more summary:focus-visible { outline: 2.5px solid var(--primary); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(243,112,33,0.18); border-radius: 6px; }

@media (max-width: 1024px) {
  .bf-hero-inner { grid-template-columns: 1fr; min-height: 0; padding-right: clamp(24px, 5vw, 64px); }
  .bf-hero-media { order: 2; aspect-ratio: 16 / 10; border-radius: 20px; }
  .bf-hero-copy { order: 1; }
  .bf-slide { grid-template-columns: 1fr; gap: 32px; }
  .bf-slide:nth-child(even) .bf-slide-media { order: 0; }
  /* Four figures get too narrow to hold a line before the shared 768px
     breakpoint, so drop to 2-up earlier. */
  .bf-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(28px, 4vw, 40px); }
  .bf-pathway { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-connectivity-points { grid-template-columns: 1fr; gap: 32px; }
  .bf-final-cta-inner { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .bf-hero { padding-top: 24px; }
  .bf-hero-copy h1 { max-width: none; }
  .bf-stat-icon i { font-size: 30px; }
  .bf-intro { text-align: left; }
  .bf-section-head { text-align: left; }
  .bf-section-head h2, .bf-section-head p { margin-left: 0; max-width: none; }
  .bf-why-grid { grid-template-columns: 1fr; }
  .bf-pathway { grid-template-columns: 1fr; gap: 28px; }
  .bf-who-row { grid-template-columns: 1fr; row-gap: 8px; }
  .bf-who-tags { justify-content: flex-start; }
  .bf-growth-note { text-align: left; }
}
@media (max-width: 480px) {
  .bf-hero-cta,
  .bf-feature-cta,
  .bf-final-cta-anchor { width: 100%; justify-content: center; }
  .bf-connectivity-map { height: 240px; }
}