/* ============================================================
Meezab for Management Consultancies — Global Stylesheet
Luxury corporate UAE aesthetic. Mobile-first, responsive.
============================================================ */
@import url('tokens.css');
/* Arabic typography — Tajawal (Google Fonts) for the original premium look */
:root {
--navy-900: #0a1f44;
--navy-800: #0d2654;
--navy-700: #14336e;
--navy-50: #f3f5fa;
--gold-600: #b8923f;
--gold-500: #c9a961;
--gold-400: #d9bd80;
--gold-100: #f5ecd6;
--ink-900: #0c1424;
--ink-700: #2a3349;
--ink-500: #56607a;
--ink-400: #7d869f;
--line: #e6e9f0;
--bg: #ffffff;
--bg-soft: #fafbfd;
--bg-cream: #fdfaf3;
--shadow-sm: 0 2px 10px rgba(10, 31, 68, 0.06);
--shadow-md: 0 10px 30px rgba(10, 31, 68, 0.10);
--shadow-lg: 0 24px 60px rgba(10, 31, 68, 0.16);
--radius: 4px;
--radius-lg: 10px;
--maxw: 1200px;
--serif: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--arabic: 'Tajawal', 'Noto Naskh Arabic', 'Segoe UI', 'Tahoma', sans-serif;
}
html[lang="ar"] body,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] .btn,
html[lang="ar"] .brand-name,
html[lang="ar"] .price-amt,
html[lang="ar"] .step-num,
html[lang="ar"] .v-num,
html[lang="ar"] .num,
html[lang="ar"] .stat-num,
html[lang="ar"] .hero-visual .quote {
font-family: var(--arabic);
}
html[lang="ar"] h1 { font-weight: 700; letter-spacing: 0 !important; line-height: 1.3; }
html[lang="ar"] h2 { font-weight: 700; letter-spacing: 0 !important; }
html[lang="ar"] .eyebrow { letter-spacing: 0 !important; }
html[lang="ar"] .brand-tag,
html[lang="ar"] .brand-pillars,
html[lang="ar"] .brand-pillars span,
html[lang="ar"] .footer-col h5,
html[lang="ar"] .pkg-name,
html[lang="ar"] .pkg-tag,
html[lang="ar"] .info-label,
html[lang="ar"] .auth-num,
html[lang="ar"] .what-we-do,
html[lang="ar"] .form-group label,
html[lang="ar"] .partner-tag,
html[lang="ar"] .stat-label,
html[lang="ar"] .nav-links a { letter-spacing: 0 !important; }
html[lang="ar"] .stat-num,
html[lang="ar"] .price-amt,
html[lang="ar"] .num,
html[lang="ar"] .hero-visual .quote { font-style: normal; font-weight: 700; }
/* Arabic — Sakkal Majalla primary, generous line-height for proper glyph clearance */
html[lang="ar"],
html[lang="ar"] *,
html[dir="rtl"],
html[dir="rtl"] * {
font-family: 'Tajawal', 'Noto Naskh Arabic', 'Segoe UI', 'Tahoma', sans-serif !important;
letter-spacing: 0 !important;
word-spacing: normal !important;
text-transform: none !important;
font-feature-settings: normal !important;
font-variant: normal !important;
}
html[lang="ar"] {
direction: rtl;
text-align: right;
}
/* Allow Latin/digit isolation inside Arabic context */
html[lang="ar"] [dir="ltr"],
html[dir="rtl"] [dir="ltr"] {
font-family: 'Inter', sans-serif !important;
unicode-bidi: isolate;
}
html[lang="ar"] .eyebrow,
html[dir="rtl"] .eyebrow,
html[lang="ar"] .brand-tag,
html[dir="rtl"] .brand-tag,
html[lang="ar"] .footer-col h5,
html[dir="rtl"] .footer-col h5,
html[lang="ar"] .pkg-name,
html[dir="rtl"] .pkg-name,
html[lang="ar"] .stat-label,
html[dir="rtl"] .stat-label,
html[lang="ar"] .info-label,
html[dir="rtl"] .info-label,
html[lang="ar"] .pkg-tag,
html[dir="rtl"] .pkg-tag,
html[lang="ar"] .form-group label,
html[dir="rtl"] .form-group label,
html[lang="ar"] .auth-num,
html[dir="rtl"] .auth-num,
html[lang="ar"] .partner-tag,
html[dir="rtl"] .partner-tag {
letter-spacing: 0 !important;
text-transform: none !important;
}
/* Bidi isolation for inline digits/Latin inside Arabic context */
html[lang="ar"] [dir="ltr"],
html[dir="rtl"] [dir="ltr"] {
unicode-bidi: isolate;
}
/* Prevent orphan paragraph splits on key blocks */
.disclaimer-block,
.callout-box,
.compliance-section {
page-break-inside: avoid;
break-inside: avoid;
}
/* RTL flips */
html[dir="rtl"] .eyebrow { padding-left: 0; padding-right: 36px; }
html[dir="rtl"] .eyebrow::before { left: auto; right: 0; }
html[dir="rtl"] .hero-eyebrow,
html[dir="rtl"] .page-header .eyebrow { padding-left: 0; padding-right: 36px; }
html[dir="rtl"] .footer-disclaimer p { padding-left: 0; padding-right: 18px; border-left: none; border-right: 2px solid var(--gold-500); }
html[dir="rtl"] .disclaimer-block { border-left: none; border-right: 3px solid var(--gold-500); }
html[dir="rtl"] .callout-box { border-left: none; border-right: 3px solid var(--navy-900); }
html[dir="rtl"] .footer-col a:hover { padding-left: 0; padding-right: 4px; }
html[dir="rtl"] .service-detail ul li { padding-left: 0; padding-right: 22px; }
html[dir="rtl"] .service-detail ul li::before { left: auto; right: 0; }
html[dir="rtl"] .pkg-features li { padding-left: 0; padding-right: 28px; }
html[dir="rtl"] .pkg-features li::before { left: auto; right: 0; }
html[dir="rtl"] .arrow { display: inline-block; transform: scaleX(-1); }
html[dir="rtl"] .btn:hover .arrow { transform: scaleX(-1) translateX(4px); }
html[dir="rtl"] .breadcrumb { direction: rtl; }
html[dir="rtl"] .nav-links a::after { left: auto; right: 0; }
html[dir="rtl"] .info-row .info-icon { margin-left: 0; }
html[dir="rtl"] .package-card.featured .pkg-tag,
html[dir="rtl"] .pkg-tag { left: 50%; transform: translateX(50%); }
html[dir="rtl"] .step-num::after { /* no flip needed */ }
html[dir="rtl"] .hero-visual::before { left: 14px; right: 14px; }
html[dir="rtl"] body { letter-spacing: 0; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--sans);
font-size: 16px;
line-height: 1.65;
color: var(--ink-700);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--navy-700); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--gold-600); }
h1, h2, h3, h4, h5 {
font-family: var(--serif);
color: var(--navy-900);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: .8rem; }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); margin-bottom: .6rem; }
h4 { font-size: 1.1rem; margin-bottom: .4rem; }
p { margin-bottom: 1rem; }
.container {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 24px;
}
/* ---------------- Eyebrow / Section labels ---------------- */
.eyebrow {
display: inline-block;
font-family: var(--sans);
font-size: .75rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-600);
margin-bottom: 14px;
position: relative;
padding-left: 36px;
}
.eyebrow::before {
content: '';
position: absolute;
left: 0; top: 50%;
width: 24px; height: 1px;
background: var(--gold-500);
}
.section-title {
margin-bottom: 14px;
}
.section-lede {
color: var(--ink-500);
max-width: 680px;
font-size: 1.05rem;
}
.section-head {
text-align: center;
margin: 0 auto 56px;
max-width: 760px;
}
.section-head .eyebrow { padding-left: 0; }
.section-head .eyebrow::before { display: none; }
.section-head .section-lede { margin: 0 auto; }
/* ---------------- Buttons ---------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 15px 32px;
font-family: var(--sans);
font-weight: 600;
font-size: .92rem;
letter-spacing: 0.04em;
border: 1px solid transparent;
border-radius: var(--radius);
cursor: pointer;
transition: all .3s ease;
white-space: nowrap;
}
.btn-primary {
background: var(--gold-500);
color: var(--navy-900);
border-color: var(--gold-500);
}
.btn-primary:hover {
background: var(--gold-600);
border-color: var(--gold-600);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(184, 146, 63, 0.35);
}
.btn-outline {
background: transparent;
color: #fff;
border-color: rgba(255,255,255,0.4);
}
.btn-outline:hover {
background: #fff;
color: var(--navy-900);
border-color: #fff;
}
.btn-dark {
background: var(--navy-900);
color: #fff;
border-color: var(--navy-900);
}
.btn-dark:hover {
background: var(--navy-700);
border-color: var(--navy-700);
color: #fff;
}
.btn-ghost {
background: transparent;
color: var(--navy-900);
border-color: var(--navy-900);
}
.btn-ghost:hover {
background: var(--navy-900);
color: #fff;
}
.btn .arrow { transition: transform .25s ease; }
.btn:hover .arrow { transform: translateX(4px); }
/* ---------------- Header / Nav ---------------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255,255,255,0.96);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
transition: box-shadow .3s ease;
}
.site-header.scrolled { box-shadow: var(--shadow-sm); }
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 24px;
max-width: var(--maxw);
margin: 0 auto;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.brand-mark {
width: 80px;
height: auto;
display: block;
flex-shrink: 0;
}
.site-footer .brand-mark { width: 72px; }
.brand-text {
display: flex; flex-direction: column;
line-height: 1.1;
}
.brand-name {
font-family: var(--serif);
color: var(--navy-900);
font-size: 1.55rem;
font-weight: 700;
letter-spacing: 0.01em;
}
.brand-tag {
font-size: .72rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-600);
margin-top: 3px;
}
.nav-links {
display: flex;
align-items: center;
gap: 36px;
list-style: none;
}
.nav-links a {
color: var(--ink-700);
font-size: .92rem;
font-weight: 500;
position: relative;
padding: 6px 0;
}
.nav-links a::after {
content: '';
position: absolute;
left: 0; bottom: -2px;
width: 0; height: 1.5px;
background: var(--gold-500);
transition: width .3s ease;
}
.nav-links a:hover, .nav-links a.active {
color: var(--navy-900);
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-cta { margin-left: 8px; }
.nav-cta .btn {
padding: 11px 22px;
font-size: .85rem;
}
.nav-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 8px;
color: var(--navy-900);
}
.nav-toggle span {
display: block;
width: 24px;
height: 2px;
background: currentColor;
margin: 5px 0;
transition: .3s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 980px) {
.nav-toggle { display: block; }
.nav-links {
position: fixed;
top: 78px; left: 0; right: 0;
flex-direction: column;
gap: 0;
background: #fff;
padding: 16px 24px 32px;
border-bottom: 1px solid var(--line);
box-shadow: var(--shadow-md);
max-height: 0;
overflow: hidden;
transition: max-height .35s ease, padding .35s ease;
align-items: stretch;
}
.nav-links.open {
max-height: 600px;
padding: 16px 24px 32px;
}
.nav-links li { width: 100%; border-bottom: 1px solid var(--line); }
.nav-links li:last-child { border-bottom: none; }
.nav-links a { display: block; padding: 14px 0; }
.nav-cta { width: 100%; margin: 16px 0 0; }
.nav-cta .btn { width: 100%; }
}
/* ---------------- Hero ---------------- */
.hero {
position: relative;
background:
linear-gradient(180deg, rgba(10,31,68,0.95) 0%, rgba(13,38,84,0.92) 100%),
radial-gradient(ellipse at top right, rgba(201,169,97,0.18), transparent 55%);
color: #fff;
padding: clamp(80px, 12vw, 140px) 0 clamp(90px, 14vw, 160px);
overflow: hidden;
}
.hero::before {
content: '';
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 60px 60px;
opacity: 0.18;
pointer-events: none;
}
.hero::after {
content: '';
position: absolute;
right: -120px; bottom: -120px;
width: 420px; height: 420px;
border: 1px solid rgba(201,169,97,0.18);
border-radius: 50%;
pointer-events: none;
}
.hero .container {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 60px;
align-items: center;
}
.hero-content { max-width: 640px; }
.hero h1 {
color: #fff;
margin-bottom: 24px;
font-weight: 500;
}
.hero h1 .accent { color: var(--gold-500); font-style: italic; }
.hero .lede {
font-size: 1.15rem;
color: rgba(255,255,255,0.78);
margin-bottom: 36px;
max-width: 560px;
}
.hero-eyebrow {
color: var(--gold-500);
padding-left: 36px;
}
.hero-eyebrow::before { background: var(--gold-500); }
.hero-cta {
display: flex; gap: 14px; flex-wrap: wrap;
margin-bottom: 48px;
}
.hero-meta {
display: flex; gap: 40px; flex-wrap: wrap;
padding-top: 28px;
border-top: 1px solid rgba(255,255,255,0.12);
}
.hero-meta .stat-num {
font-family: var(--serif);
font-size: 2rem;
color: var(--gold-500);
line-height: 1;
margin-bottom: 6px;
}
.hero-meta .stat-label {
font-size: .78rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: rgba(255,255,255,0.65);
}
.hero-visual {
position: relative;
aspect-ratio: 4/5;
border: 1px solid rgba(201,169,97,0.3);
background:
linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
radial-gradient(circle at 30% 30%, rgba(201,169,97,0.12), transparent 60%);
backdrop-filter: blur(4px);
padding: 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.hero-visual::before {
content: '';
position: absolute;
top: 14px; left: 14px; right: 14px; bottom: 14px;
border: 1px solid rgba(201,169,97,0.2);
pointer-events: none;
}
.hero-visual .seal {
align-self: flex-start;
width: 96px;
height: auto;
display: block;
}
.hero-visual .quote {
font-family: var(--serif);
font-size: 1.4rem;
color: #fff;
font-style: italic;
line-height: 1.4;
font-weight: 400;
}
.hero-visual .signature {
font-size: .8rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--gold-500);
border-top: 1px solid rgba(201,169,97,0.3);
padding-top: 16px;
}
@media (max-width: 900px) {
.hero .container { grid-template-columns: 1fr; gap: 40px; }
.hero-visual { max-width: 380px; }
}
@media (max-width: 540px) {
.hero-meta { gap: 24px; }
.hero-meta > div { min-width: 110px; }
}
/* ---------------- Page header (non-home) ---------------- */
.page-header {
background: linear-gradient(180deg, var(--navy-900), var(--navy-800));
color: #fff;
padding: clamp(80px, 11vw, 130px) 0 clamp(70px, 9vw, 110px);
position: relative;
overflow: hidden;
}
.page-header::before {
content: '';
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 160px 160px;
background-position: right -40px top -40px;
background-repeat: no-repeat;
opacity: 0.5;
}
.page-header .container { position: relative; z-index: 1; }
.page-header h1 { color: #fff; margin-bottom: 16px; max-width: 800px; }
.page-header .eyebrow { color: var(--gold-500); }
.page-header .lede {
font-size: 1.1rem;
color: rgba(255,255,255,0.75);
max-width: 680px;
}
.breadcrumb {
display: flex; gap: 8px; align-items: center;
font-size: .82rem;
color: rgba(255,255,255,0.55);
margin-bottom: 28px;
}
.breadcrumb a { color: rgba(255,255,255,0.7); }
.breadcrumb a:hover { color: var(--gold-500); }
.breadcrumb .sep { color: rgba(255,255,255,0.35); }
/* ---------------- Sections / general ---------------- */
section { padding: clamp(70px, 9vw, 110px) 0; }
.section-soft { background: var(--bg-soft); }
.section-cream { background: var(--bg-cream); }
.section-dark { background: var(--navy-900); color: rgba(255,255,255,0.78); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }
.section-dark .eyebrow { color: var(--gold-500); }
/* ---------------- Trust badges ---------------- */
.trust-strip {
background: var(--bg-soft);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 36px 0;
}
.trust-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
align-items: center;
}
.trust-item {
display: flex;
align-items: center;
gap: 14px;
color: var(--ink-500);
font-size: .9rem;
}
.trust-item .icon {
flex-shrink: 0;
width: 40px; height: 40px;
border: 1px solid var(--gold-500);
border-radius: 50%;
display: grid; place-items: center;
color: var(--gold-600);
background: #fff;
}
.trust-item strong { color: var(--navy-900); display: block; font-size: .95rem; margin-bottom: 2px; }
.trust-item span { font-size: .8rem; color: var(--ink-400); }
@media (max-width: 800px) {
.trust-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 460px) {
.trust-grid { grid-template-columns: 1fr; }
}
/* ---------------- Service cards ---------------- */
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.service-card {
background: #fff;
border: 1px solid var(--line);
padding: 36px 32px;
transition: all .35s ease;
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--gold-500);
transform: scaleX(0);
transform-origin: left;
transition: transform .4s ease;
}
.service-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: transparent;
}
.service-card:hover::before { transform: scaleX(1); }
.service-card .icon-wrap {
width: 52px; height: 52px;
background: var(--navy-50);
border-radius: 4px;
display: grid; place-items: center;
color: var(--navy-900);
margin-bottom: 22px;
transition: all .3s;
}
.service-card:hover .icon-wrap {
background: var(--navy-900);
color: var(--gold-500);
}
.service-card h3 {
margin-bottom: 12px;
font-size: 1.25rem;
}
.service-card p {
color: var(--ink-500);
font-size: .95rem;
margin-bottom: 18px;
line-height: 1.65;
}
.service-card .learn-more {
font-size: .82rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--gold-600);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
}
.service-card .learn-more:hover { color: var(--navy-900); }
@media (max-width: 920px) {
.services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.services-grid { grid-template-columns: 1fr; }
}
/* ---------------- Detailed service blocks (Services page) ---------------- */
.service-detail {
display: grid;
grid-template-columns: 80px 1fr;
gap: 32px;
align-items: start;
padding: 48px 0;
border-bottom: 1px solid var(--line);
}
.service-detail:last-child { border-bottom: none; }
.service-detail .num {
font-family: var(--serif);
font-size: 2.6rem;
color: var(--gold-500);
line-height: 1;
border-top: 1px solid var(--gold-500);
padding-top: 14px;
}
.service-detail h3 { margin-bottom: 14px; }
.service-detail .what-we-do {
font-size: .8rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--gold-600);
font-weight: 600;
margin-bottom: 14px;
margin-top: 22px;
display: block;
}
.service-detail ul {
list-style: none;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px 24px;
margin-top: 4px;
}
.service-detail ul li {
position: relative;
padding-left: 22px;
font-size: .94rem;
color: var(--ink-700);
}
.service-detail ul li::before {
content: '';
position: absolute;
left: 0; top: 11px;
width: 10px; height: 1px;
background: var(--gold-500);
}
@media (max-width: 700px) {
.service-detail { grid-template-columns: 1fr; gap: 18px; }
.service-detail ul { grid-template-columns: 1fr; }
}
/* ---------------- Packages ---------------- */
.packages-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
align-items: stretch;
max-width: 980px;
margin: 0 auto;
}
.package-card {
background: #fff;
border: 1px solid var(--line);
padding: 44px 36px;
display: flex;
flex-direction: column;
position: relative;
transition: all .35s ease;
}
.package-card.featured {
background: var(--navy-900);
color: rgba(255,255,255,0.8);
border-color: var(--navy-900);
transform: translateY(-12px);
box-shadow: var(--shadow-lg);
}
.package-card.featured h3 { color: #fff; }
.package-card.featured .price-amt { color: var(--gold-500); }
.package-card.featured .price-currency { color: var(--gold-500); }
.package-card.featured .price-note { color: rgba(255,255,255,0.55); }
.package-card.featured .pkg-features li { color: rgba(255,255,255,0.78); border-color: rgba(255,255,255,0.08); }
.package-card.featured .pkg-features li::before { color: var(--gold-500); }
.package-card.featured .pkg-tag { background: var(--gold-500); color: var(--navy-900); }
.package-card:hover { box-shadow: var(--shadow-md); }
.package-card.featured:hover { transform: translateY(-16px); }
.pkg-tag {
position: absolute;
top: -12px; left: 50%;
transform: translateX(-50%);
background: var(--gold-500);
color: var(--navy-900);
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 6px 16px;
border-radius: 2px;
white-space: nowrap;
}
.pkg-name {
font-size: .82rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--gold-600);
margin-bottom: 10px;
font-weight: 600;
}
.package-card.featured .pkg-name { color: var(--gold-500); }
.package-card h3 {
font-size: 1.7rem;
margin-bottom: 14px;
}
.pkg-desc {
font-size: .92rem;
color: var(--ink-500);
margin-bottom: 24px;
min-height: 48px;
}
.package-card.featured .pkg-desc { color: rgba(255,255,255,0.65); }
.pkg-price {
display: flex;
align-items: baseline;
gap: 6px;
padding-bottom: 24px;
border-bottom: 1px solid var(--line);
margin-bottom: 24px;
}
.package-card.featured .pkg-price { border-color: rgba(255,255,255,0.1); }
.price-currency {
font-size: 1rem;
color: var(--ink-500);
font-weight: 500;
}
.price-amt {
font-family: var(--serif);
font-size: 2.6rem;
font-weight: 600;
color: var(--navy-900);
line-height: 1;
}
.price-note {
font-size: .82rem;
color: var(--ink-400);
margin-left: 4px;
}
.pkg-features {
list-style: none;
margin-bottom: 32px;
flex-grow: 1;
}
.pkg-features li {
padding: 10px 0 10px 28px;
font-size: .92rem;
border-bottom: 1px solid var(--line);
position: relative;
}
.pkg-features li:last-child { border-bottom: none; }
.pkg-features li::before {
content: '✓';
position: absolute;
left: 0; top: 10px;
color: var(--gold-600);
font-weight: 700;
}
.pkg-cta { margin-top: auto; }
.pkg-cta .btn { width: 100%; }
@media (max-width: 920px) {
.packages-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
.package-card.featured { transform: none; }
.package-card.featured:hover { transform: translateY(-4px); }
}
/* ---------------- How it works ---------------- */
.steps-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
position: relative;
}
.steps-grid::before {
content: '';
position: absolute;
top: 30px; left: 12.5%; right: 12.5%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-500) 20%, var(--gold-500) 80%, transparent);
z-index: 0;
}
.step {
text-align: center;
padding: 0 20px;
position: relative;
z-index: 1;
}
.step-num {
width: 60px; height: 60px;
border-radius: 50%;
background: #fff;
border: 1.5px solid var(--gold-500);
display: grid; place-items: center;
margin: 0 auto 24px;
font-family: var(--serif);
font-size: 1.3rem;
font-weight: 700;
color: var(--navy-900);
position: relative;
}
.step-num::after {
content: '';
position: absolute;
inset: -5px;
border: 1px solid var(--gold-100);
border-radius: 50%;
}
.step h4 {
font-size: 1.05rem;
margin-bottom: 10px;
}
.step p {
font-size: .9rem;
color: var(--ink-500);
margin: 0;
}
@media (max-width: 800px) {
.steps-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 0; }
.steps-grid::before { display: none; }
}
@media (max-width: 460px) {
.steps-grid { grid-template-columns: 1fr; }
}
/* ---------------- Disclaimer block ---------------- */
.disclaimer-block {
background: var(--bg-cream);
border-left: 3px solid var(--gold-500);
padding: 32px 36px;
border-radius: 2px;
}
.disclaimer-block h4 {
font-family: var(--sans);
font-size: .82rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--gold-600);
margin-bottom: 12px;
}
.disclaimer-block p {
color: var(--ink-700);
font-size: .98rem;
margin: 0;
line-height: 1.7;
}
/* ---------------- CTA strip ---------------- */
.cta-strip {
background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
color: #fff;
text-align: center;
padding: clamp(70px, 9vw, 100px) 0;
position: relative;
overflow: hidden;
}
.cta-strip::before {
content: '';
position: absolute;
top: -100px; left: 50%;
transform: translateX(-50%);
width: 600px; height: 600px;
border: 1px solid rgba(201,169,97,0.12);
border-radius: 50%;
pointer-events: none;
}
.cta-strip::after {
content: '';
position: absolute;
bottom: -150px; left: 50%;
transform: translateX(-50%);
width: 800px; height: 800px;
border: 1px solid rgba(201,169,97,0.08);
border-radius: 50%;
pointer-events: none;
}
.cta-strip .container { position: relative; z-index: 1; }
.cta-strip h2 { color: #fff; margin-bottom: 18px; }
.cta-strip p {
color: rgba(255,255,255,0.72);
max-width: 580px;
margin: 0 auto 32px;
font-size: 1.05rem;
}
.cta-strip .btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* ---------------- About page ---------------- */
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.about-grid .visual {
position: relative;
aspect-ratio: 4/5;
background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
overflow: hidden;
}
.about-grid .visual::before {
content: '';
position: absolute;
top: 20px; left: 20px; right: 20px; bottom: 20px;
border: 1px solid rgba(201,169,97,0.4);
}
.about-grid .visual::after {
content: 'M';
position: absolute;
inset: 0;
display: grid; place-items: center;
font-family: var(--serif);
font-size: 14rem;
color: rgba(201,169,97,0.15);
line-height: 1;
}
.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-top: 40px;
}
.value-card {
padding: 32px 28px;
background: #fff;
border: 1px solid var(--line);
text-align: left;
}
.value-card .v-num {
font-family: var(--serif);
font-size: 1.4rem;
color: var(--gold-500);
margin-bottom: 16px;
display: inline-block;
border-bottom: 1px solid var(--gold-500);
padding-bottom: 4px;
}
.value-card h4 { margin-bottom: 10px; font-size: 1.15rem; }
.value-card p { color: var(--ink-500); margin: 0; font-size: .94rem; }
@media (max-width: 880px) {
.about-grid { grid-template-columns: 1fr; gap: 50px; }
.values-grid { grid-template-columns: 1fr; }
}
/* ---------------- Partners ---------------- */
.partners-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.partner-card {
background: #fff;
border: 1px solid var(--line);
padding: 36px 30px;
transition: all .3s;
text-align: center;
}
.partner-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.partner-icon {
width: 64px; height: 64px;
margin: 0 auto 22px;
background: var(--navy-50);
border-radius: 50%;
display: grid; place-items: center;
color: var(--navy-900);
}
.partner-card h4 { margin-bottom: 10px; font-size: 1.15rem; }
.partner-card p { color: var(--ink-500); font-size: .92rem; margin-bottom: 14px; }
.partner-tag {
display: inline-block;
font-size: .7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold-600);
background: var(--gold-100);
padding: 5px 12px;
border-radius: 2px;
font-weight: 600;
}
@media (max-width: 880px) { .partners-grid { grid-template-columns: 1fr; } }
/* ---------------- Contact ---------------- */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
.contact-info .info-row {
display: flex;
gap: 18px;
padding: 22px 0;
border-bottom: 1px solid var(--line);
}
.contact-info .info-row:last-child { border-bottom: none; }
.contact-info .info-icon {
width: 44px; height: 44px;
border: 1px solid var(--gold-500);
border-radius: 50%;
display: grid; place-items: center;
color: var(--gold-600);
flex-shrink: 0;
}
.contact-info .info-label {
font-size: .78rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--gold-600);
font-weight: 600;
margin-bottom: 4px;
}
.contact-info .info-value {
color: var(--navy-900);
font-size: 1.05rem;
font-weight: 500;
}
.contact-info .info-value a { color: var(--navy-900); }
.contact-info .info-value a:hover { color: var(--gold-600); }
.contact-form {
background: #fff;
padding: 44px 40px;
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.form-group { margin-bottom: 18px; }
.form-group label {
display: block;
font-size: .82rem;
font-weight: 600;
color: var(--navy-900);
margin-bottom: 8px;
letter-spacing: 0.04em;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 13px 16px;
border: 1px solid var(--line);
border-radius: 2px;
background: #fff;
font-family: var(--sans);
font-size: .95rem;
color: var(--ink-900);
transition: border-color .25s, box-shadow .25s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--gold-500);
box-shadow: 0 0 0 3px rgba(201,169,97,0.15);
}
.form-group textarea { min-height: 130px; resize: vertical; }
.form-submit { width: 100%; margin-top: 6px; }
.form-note {
font-size: .82rem;
color: var(--ink-400);
margin-top: 14px;
text-align: center;
}
@media (max-width: 880px) {
.contact-grid { grid-template-columns: 1fr; gap: 40px; }
.form-row { grid-template-columns: 1fr; }
.contact-form { padding: 32px 24px; }
}
/* ---------------- Footer ---------------- */
.site-footer {
background: var(--ink-900);
color: rgba(255,255,255,0.65);
padding: 80px 0 0;
font-size: .92rem;
}
.footer-top {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 48px;
padding-bottom: 50px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand .brand { margin-bottom: 18px; }
.footer-brand .brand-name { color: #fff; }
.footer-brand p {
font-size: .92rem;
line-height: 1.7;
color: rgba(255,255,255,0.55);
max-width: 320px;
}
.footer-col h5 {
font-family: var(--sans);
font-size: .8rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--gold-500);
margin-bottom: 22px;
font-weight: 600;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 12px; }
.footer-col a {
color: rgba(255,255,255,0.65);
font-size: .92rem;
transition: color .25s, padding-left .25s;
}
.footer-col a:hover {
color: var(--gold-500);
padding-left: 4px;
}
.footer-disclaimer {
padding: 32px 0;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-disclaimer p {
font-size: .85rem;
color: rgba(255,255,255,0.55);
line-height: 1.7;
max-width: 100%;
margin: 0;
padding-left: 18px;
border-left: 2px solid var(--gold-500);
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding: 26px 0 32px;
flex-wrap: wrap;
gap: 16px;
font-size: .82rem;
color: rgba(255,255,255,0.45);
}
.footer-bottom .legal-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-bottom a { color: rgba(255,255,255,0.55); }
.footer-bottom a:hover { color: var(--gold-500); }
@media (max-width: 880px) {
.footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 540px) {
.footer-top { grid-template-columns: 1fr; gap: 32px; }
.footer-bottom { flex-direction: column; text-align: center; }
}
/* ---------------- Misc / utilities ---------------- */
.lede { font-size: 1.1rem; line-height: 1.7; color: var(--ink-500); }
.text-center { text-align: center; }
.divider {
width: 60px; height: 2px;
background: var(--gold-500);
margin: 24px auto;
}
.callout-box {
background: var(--navy-50);
border-left: 3px solid var(--navy-900);
padding: 26px 30px;
margin: 32px 0;
}
.callout-box h4 { margin-bottom: 8px; }
.callout-box p { margin: 0; color: var(--ink-700); }
/* Language switcher */
.lang-switch {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 12px;
padding: 6px 10px;
border: 1px solid var(--line);
border-radius: 999px;
font-size: .78rem;
font-weight: 600;
letter-spacing: 0.06em;
background: #fff;
}
.lang-switch a {
color: var(--ink-400);
padding: 2px 8px;
border-radius: 999px;
text-decoration: none;
transition: all .25s;
}
.lang-switch a.active {
color: #fff;
background: var(--navy-900);
}
.lang-switch a:not(.active):hover { color: var(--navy-900); }
@media (max-width: 980px) {
.lang-switch { margin-left: 0; margin-bottom: 8px; align-self: flex-start; }
html[lang="ar"] .lang-switch { margin-right: 0; align-self: flex-end; }
}
html[dir="rtl"] .lang-switch { margin-left: 0; margin-right: 12px; }
/* Hero logo lockup (full PNG) */
.hero-lockup {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
border: 1px solid rgba(201,169,97,0.3);
background:
linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
radial-gradient(circle at 50% 35%, rgba(201,169,97,0.10), transparent 65%);
backdrop-filter: blur(4px);
padding: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.hero-lockup::before {
content: '';
position: absolute;
top: 14px; left: 14px; right: 14px; bottom: 14px;
border: 1px solid rgba(201,169,97,0.2);
pointer-events: none;
}
.hero-lockup img {
width: 90%;
max-width: 360px;
height: auto;
filter: drop-shadow(0 8px 24px rgba(0,0,0,0.25)) brightness(0) invert(1);
opacity: 0.95;
/* The logo source is dark-on-light; on dark hero we invert + tint via overlay */
mix-blend-mode: screen;
}
/* Cleaner approach: don't invert, use the original logo on a cream background card */
.hero-lockup-light {
position: relative;
width: 100%;
aspect-ratio: 16 / 11;
background: var(--bg-cream);
padding: 40px 50px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--gold-500);
box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.hero-lockup-light::before {
content: '';
position: absolute;
top: 12px; left: 12px; right: 12px; bottom: 12px;
border: 1px solid rgba(201,169,97,0.5);
pointer-events: none;
}
.hero-lockup-light img {
width: 88%;
max-width: 380px;
height: auto;
}
@media (max-width: 900px) {
.hero-lockup-light { max-width: 420px; margin: 0 auto; }
}
/* About-page lockup (light bg) */
.about-lockup {
position: relative;
aspect-ratio: 4/5;
background: linear-gradient(180deg, var(--bg-cream), #f8efd9);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
border: 1px solid var(--gold-500);
}
.about-lockup::before {
content: '';
position: absolute;
top: 18px; left: 18px; right: 18px; bottom: 18px;
border: 1px solid rgba(201,169,97,0.4);
}
.about-lockup img {
width: 78%;
max-width: 360px;
position: relative;
z-index: 1;
}
/* ============= TRUST & AUTHORITY (revised) ============= */
.authority-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
}
.authority-card {
text-align: left;
padding: 36px 32px;
background: #fff;
border: 1px solid var(--line);
position: relative;
transition: all .3s;
}
.authority-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.authority-card .auth-num {
font-family: var(--serif);
font-size: .9rem;
font-weight: 600;
color: var(--gold-600);
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 22px;
display: inline-block;
padding-bottom: 4px;
border-bottom: 1px solid var(--gold-500);
}
.authority-card h4 { margin-bottom: 12px; font-size: 1.15rem; }
.authority-card p { color: var(--ink-500); font-size: .94rem; margin: 0; line-height: 1.7; }
@media (max-width: 980px) {
.authority-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.authority-grid { grid-template-columns: 1fr; }
}
/* ============= SERVICE CATEGORIES (4 grouped) ============= */
.service-category-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
}
/* Featured 5th tier — institutional readiness — spans full width */
.service-category.service-category-featured {
grid-column: 1 / -1;
background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
color: rgba(255,255,255,0.82);
border-color: var(--navy-900);
position: relative;
}
.service-category.service-category-featured::before { background: var(--gold-500); }
.service-category.service-category-featured h3 { color: #fff; }
.service-category.service-category-featured .cat-desc { color: rgba(255,255,255,0.68); }
.service-category.service-category-featured .cat-icon { background: rgba(201,169,97,0.18); color: var(--gold-500); }
.service-category.service-category-featured:hover .cat-icon { background: var(--gold-500); color: var(--navy-900); }
.service-category.service-category-featured ul { border-top-color: rgba(255,255,255,0.12); }
.service-category.service-category-featured ul li { color: rgba(255,255,255,0.85); }
.service-category.service-category-featured ul li a { color: rgba(255,255,255,0.85); }
.service-category.service-category-featured ul li:hover a { color: var(--gold-500); }
.service-category.service-category-featured ul li::before { color: var(--gold-500); }
@media (min-width: 881px) {
.service-category.service-category-featured ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0 40px;
}
.service-category.service-category-featured ul li { border-bottom-color: rgba(255,255,255,0.06); }
}
.service-category {
background: #fff;
border: 1px solid var(--line);
padding: 40px 38px;
position: relative;
overflow: hidden;
transition: all .35s;
}
.service-category::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--gold-500);
transform: scaleX(0);
transform-origin: left;
transition: transform .4s ease;
}
.service-category:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: transparent; }
.service-category:hover::before { transform: scaleX(1); }
html[dir="rtl"] .service-category::before { transform-origin: right; }
.service-category .cat-icon {
width: 56px; height: 56px;
background: var(--navy-50);
color: var(--navy-900);
display: grid; place-items: center;
margin-bottom: 22px;
transition: all .3s;
}
.service-category:hover .cat-icon { background: var(--navy-900); color: var(--gold-500); }
.service-category h3 {
font-size: 1.45rem;
margin-bottom: 10px;
}
.service-category .cat-desc {
font-size: .95rem;
color: var(--ink-500);
margin-bottom: 22px;
line-height: 1.65;
}
.service-category ul {
list-style: none;
border-top: 1px solid var(--line);
padding-top: 18px;
}
.service-category ul li {
padding: 10px 0;
font-size: .96rem;
color: var(--ink-700);
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px dashed transparent;
transition: all .25s;
}
.service-category ul li::before {
content: '→';
color: var(--gold-500);
font-weight: 700;
transition: transform .25s;
flex-shrink: 0;
}
html[dir="rtl"] .service-category ul li::before { content: '←'; }
.service-category ul li:hover { color: var(--navy-900); }
.service-category ul li:hover::before { transform: translateX(3px); }
html[dir="rtl"] .service-category ul li:hover::before { transform: translateX(-3px); }
.service-category ul li a {
color: inherit;
text-decoration: none;
flex-grow: 1;
}
@media (max-width: 880px) {
.service-category-grid { grid-template-columns: 1fr; }
.service-category { padding: 32px 28px; }
}
/* ============= DIFFERENTIATION ============= */
.diff-section {
background: var(--navy-900);
color: rgba(255,255,255,0.78);
position: relative;
overflow: hidden;
}
.diff-section::before {
content: '';
position: absolute;
top: -200px; right: -200px;
width: 600px; height: 600px;
border: 1px solid rgba(201,169,97,0.10);
border-radius: 50%;
pointer-events: none;
}
.diff-section .container { position: relative; z-index: 1; }
.diff-section h2 { color: #fff; }
.diff-section .eyebrow { color: var(--gold-500); }
.diff-section .section-lede { color: rgba(255,255,255,0.65); }
.diff-pillars {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
margin-top: 30px;
margin-bottom: 70px;
}
.diff-pillar {
padding: 32px 36px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(201,169,97,0.15);
transition: all .3s;
}
.diff-pillar:hover { background: rgba(255,255,255,0.05); border-color: rgba(201,169,97,0.4); }
.diff-pillar .p-num {
display: inline-block;
font-family: var(--serif);
font-size: 1rem;
color: var(--gold-500);
letter-spacing: 0.16em;
margin-bottom: 14px;
padding-bottom: 4px;
border-bottom: 1px solid var(--gold-500);
}
.diff-pillar h4 { color: #fff; font-size: 1.2rem; margin-bottom: 10px; }
.diff-pillar p { color: rgba(255,255,255,0.65); font-size: .95rem; margin: 0; line-height: 1.7; }
/* vs. table */
.vs-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border: 1px solid rgba(201,169,97,0.2);
overflow: hidden;
}
.vs-col {
padding: 36px 36px;
}
.vs-col.vs-them {
background: rgba(255,255,255,0.02);
color: rgba(255,255,255,0.5);
border-right: 1px solid rgba(201,169,97,0.15);
}
html[dir="rtl"] .vs-col.vs-them { border-right: none; border-left: 1px solid rgba(201,169,97,0.15); }
.vs-col.vs-us {
background: linear-gradient(135deg, rgba(201,169,97,0.10), rgba(201,169,97,0.02));
color: rgba(255,255,255,0.92);
}
.vs-col h5 {
font-family: var(--sans);
font-size: .76rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
margin-bottom: 24px;
}
.vs-col.vs-them h5 { color: rgba(255,255,255,0.4); }
.vs-col.vs-us h5 { color: var(--gold-500); }
.vs-col ul { list-style: none; }
.vs-col ul li {
padding: 14px 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
font-size: .98rem;
line-height: 1.5;
display: flex;
align-items: flex-start;
gap: 12px;
}
.vs-col ul li:last-child { border-bottom: none; }
.vs-col.vs-them li::before {
content: '✕';
color: rgba(255,255,255,0.3);
font-weight: 700;
flex-shrink: 0;
}
.vs-col.vs-us li::before {
content: '✓';
color: var(--gold-500);
font-weight: 700;
flex-shrink: 0;
}
@media (max-width: 880px) {
.diff-pillars { grid-template-columns: 1fr; gap: 18px; }
.vs-grid { grid-template-columns: 1fr; }
.vs-col { padding: 28px 24px; }
.vs-col.vs-them { border-right: none; border-bottom: 1px solid rgba(201,169,97,0.15); }
html[dir="rtl"] .vs-col.vs-them { border-left: none; }
}
/* Brand pillars tagline */
.brand-pillars {
display: inline-flex;
align-items: center;
gap: 14px;
font-size: .76rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-500);
margin-top: 18px;
flex-wrap: wrap;
}
.brand-pillars span:not(:last-child)::after {
content: '|';
color: rgba(201,169,97,0.45);
margin-left: 14px;
font-weight: 400;
}
.section-dark .brand-pillars,
.hero .brand-pillars,
.cta-strip .brand-pillars,
.page-header .brand-pillars { color: var(--gold-500); }
/* Scroll-reveal animations */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }
/* Print fallback */
@media print {
.site-header, .site-footer, .nav-toggle, .cta-strip { display: none; }
}
/* =========================================================
===== BEGIN: MEGA-MENU (Phase 1, services.html only) =====
Safe to keep globally — rules only activate on .has-mega
========================================================= */
/* LEGACY MEGA CSS REMOVED — consolidated into V4 block at bottom of file. */
/* =========================================================
===== END: MEGA-MENU (Phase 1, services.html only) =======
========================================================= */
/* =========================================================
===== BEGIN: ENGAGEMENT-SCENARIO BLOCKS =====
========================================================= */
.scenario-block {
background: #fdfaf3;
border-inline-start: 3px solid var(--gold-500);
padding: 22px 26px;
margin-top: 22px;
border-radius: 4px;
}
.scenario-eyebrow {
font-size: .68rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold-600);
font-weight: 700;
margin-bottom: 8px;
}
.scenario-block h4 {
font-family: 'Cormorant Garamond', serif;
font-size: 1.5rem;
font-weight: 600;
color: var(--navy-900);
margin: 0 0 16px;
line-height: 1.3;
}
.scenario-outcome {
border-top: 1px solid rgba(184, 146, 63, 0.3);
border-bottom: 1px solid rgba(184, 146, 63, 0.3);
padding: 14px 0;
margin: 0 0 18px;
}
.scenario-outcome-label {
display: block;
font-family: var(--sans);
font-size: .66rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-600);
font-weight: 700;
margin-bottom: 5px;
}
.scenario-outcome p {
font-family: 'Cormorant Garamond', serif;
font-size: 1.18rem;
font-weight: 600;
color: var(--navy-900);
margin: 0;
line-height: 1.4;
}
html[lang="ar"] .scenario-outcome p,
html[dir="rtl"] .scenario-outcome p {
font-family: 'Tajawal', 'Noto Naskh Arabic', 'Segoe UI', 'Tahoma', sans-serif;
font-weight: 700;
font-size: 1.15rem;
}
.scenario-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 28px;
margin: 0;
}
.scenario-grid > div { margin: 0; }
.scenario-grid dt {
font-size: .68rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-500);
font-weight: 700;
margin: 0 0 4px;
}
.scenario-grid dd {
font-size: .92rem;
color: var(--ink-700);
margin: 0;
line-height: 1.55;
}
@media (max-width: 780px) {
.scenario-grid { grid-template-columns: 1fr; gap: 12px; }
}
html[lang="ar"] .scenario-block h4,
html[dir="rtl"] .scenario-block h4 {
font-family: 'Tajawal', 'Noto Naskh Arabic', 'Segoe UI', 'Tahoma', sans-serif;
font-weight: 700;
}
/* =========================================================
===== END: ENGAGEMENT-SCENARIO BLOCKS =====
========================================================= */
/* =========================================================
===== BEGIN: SENIOR-ADVISOR CARDS =====
========================================================= */
.advisors-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
max-width: 920px;
margin: 0 auto;
}
/* Center a single card if only one advisor is present */
.advisors-grid:has(.advisor-card:only-child) {
grid-template-columns: 1fr;
max-width: 460px;
}
.advisor-card {
background: #fff;
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.advisor-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--gold-400);
}
.advisor-photo {
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--bg-cream);
}
.advisor-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
.advisor-body {
padding: 24px 26px 26px;
}
.advisor-name {
font-family: 'Cormorant Garamond', serif;
font-size: 1.55rem;
color: var(--navy-900);
margin: 0 0 4px;
line-height: 1.2;
}
.advisor-title {
display: inline-block;
font-family: var(--sans);
font-size: .7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-600);
font-weight: 600;
margin-bottom: 14px;
}
.advisor-bio {
font-size: .94rem;
color: var(--ink-700);
line-height: 1.6;
margin: 0;
}
.advisors-cta {
text-align: center;
margin-top: 36px;
}
html[lang="ar"] .advisor-name,
html[dir="rtl"] .advisor-name {
font-family: 'Tajawal', 'Noto Naskh Arabic', 'Segoe UI', 'Tahoma', sans-serif;
font-weight: 700;
letter-spacing: 0 !important;
}
@media (max-width: 780px) {
.advisors-grid { grid-template-columns: 1fr; gap: 24px; max-width: 460px; }
.advisor-body { padding: 22px 22px 24px; }
}
/* =========================================================
===== END: SENIOR-ADVISOR CARDS =====
========================================================= */
/* =========================================================
===== BEGIN: POLISH PASS — A11Y · MOTION · MOBILE · TOKENS =====
========================================================= */
/* --- Skip-link (accessibility) --- */
.skip-link {
position: absolute;
top: -100px;
left: 16px;
background: var(--navy-900);
color: #fff;
padding: 12px 18px;
border-radius: 4px;
font-family: var(--sans);
font-size: .92rem;
font-weight: 600;
text-decoration: none;
z-index: 9999;
transition: top .2s ease;
}
.skip-link:focus {
top: 16px;
outline: 2px solid var(--gold-500);
outline-offset: 2px;
color: #fff;
}
/* --- Universal focus rings (a11y) --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--gold-500);
outline-offset: 3px;
border-radius: 2px;
}
.btn:focus-visible {
outline: 2px solid var(--gold-500);
outline-offset: 4px;
}
/* --- Motion refinements --- */
@media (prefers-reduced-motion: no-preference) {
.reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.in {
opacity: 1;
transform: translateY(0);
}
.package-card,
.value-card,
.advisor-card,
.partner-card,
.scenario-block,
.service-category {
transition: transform .35s cubic-bezier(.2,.7,.2,1),
box-shadow .35s cubic-bezier(.2,.7,.2,1),
border-color .35s ease;
}
.package-card:hover,
.value-card:hover,
.advisor-card:hover {
transform: translateY(-3px);
}
.btn .arrow {
transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.btn:hover .arrow { transform: translateX(3px); }
html[dir="rtl"] .btn:hover .arrow { transform: scaleX(-1) translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; }
* { animation: none !important; transition: none !important; }
}
/* --- Mobile persistent CTA bar --- */
.mobile-cta-bar {
display: none;
position: fixed;
bottom: 0; left: 0; right: 0;
background: var(--navy-900);
padding: 12px 16px;
z-index: 90;
box-shadow: 0 -4px 20px rgba(10, 31, 68, 0.18);
transform: translateY(100%);
transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.mobile-cta-bar.visible { transform: translateY(0); }
.mobile-cta-bar a {
display: block;
text-align: center;
color: #fff;
background: var(--gold-500);
padding: 13px 20px;
border-radius: 4px;
font-weight: 600;
font-size: .95rem;
text-decoration: none;
letter-spacing: 0.02em;
}
.mobile-cta-bar a:hover { background: var(--gold-600); color: #fff; }
@media (max-width: 720px) {
.mobile-cta-bar { display: block; }
body { padding-bottom: 72px; }
}
/* --- Mobile drawer polish --- */
@media (max-width: 980px) {
.nav-links {
transition: max-height .4s cubic-bezier(.2,.7,.2,1), padding .4s cubic-bezier(.2,.7,.2,1);
}
.nav-links a {
transition: color .2s ease, padding-left .2s ease;
}
.nav-links a:active { color: var(--gold-500); }
}
/* --- Mobile typography scale --- */
@media (max-width: 480px) {
h1 { font-size: clamp(1.85rem, 8vw, 2.5rem); line-height: 1.18; }
h2 { font-size: clamp(1.55rem, 6vw, 2rem); line-height: 1.25; }
.page-header { padding-top: 60px; padding-bottom: 60px; }
.container { padding: 0 20px; }
}
/* --- Image lazy-loading visual polish --- */
img[loading="lazy"] {
background: linear-gradient(135deg, var(--bg-cream) 0%, var(--bg-soft) 100%);
}
/* --- Form polish --- */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: var(--gold-500);
box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.15);
}
.form-group input[aria-invalid="true"],
.form-group select[aria-invalid="true"],
.form-group textarea[aria-invalid="true"] {
border-color: #b94a48;
}
/* --- Print --- */
@media print {
.site-header, .mobile-cta-bar, .cta-strip, .nav-toggle { display: none !important; }
a { color: inherit; text-decoration: none; }
.reveal { opacity: 1 !important; transform: none !important; }
body { padding-bottom: 0 !important; }
}
/* =========================================================
===== END: POLISH PASS =====
========================================================= */
/* ===== BEGIN: INSIGHTS HUB + NOTES ===== */
.insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
@media (max-width: 980px) { .insights-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .insights-grid { grid-template-columns: 1fr; gap: 24px; } }
.insight-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px 30px; display: flex; flex-direction: column; transition: box-shadow .3s ease, transform .3s ease; }
.insight-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.insight-eyebrow { font-family: var(--sans); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-600); margin-bottom: 14px; }
.insight-title { font-family: var(--serif); font-size: 1.55rem; line-height: 1.25; margin-bottom: 14px; color: var(--navy-900); }
.insight-title a { color: inherit; text-decoration: none; }
.insight-title a:hover { color: var(--gold-600); }
.insight-dek { font-size: .98rem; line-height: 1.7; color: var(--ink-500); margin-bottom: 22px; flex: 1; }
.insight-byline { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; color: var(--ink-400); border-top: 1px solid var(--line); padding-top: 16px; margin-bottom: 16px; }
.insight-author { color: var(--ink-700); font-weight: 500; }
.insight-more { font-family: var(--sans); font-size: .9rem; color: var(--gold-600); text-decoration: none; font-weight: 600; letter-spacing: .02em; }
.insight-more:hover { color: var(--navy-900); }
.note-header { padding: 60px 0 40px; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.note-header .eyebrow { padding-left: 0; }
.note-title { font-family: var(--serif); font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.15; color: var(--navy-900); margin: 14px 0 18px; max-width: 920px; }
.note-dek { font-size: 1.18rem; line-height: 1.6; color: var(--ink-500); max-width: 820px; margin-bottom: 26px; }
.note-byline { display: flex; gap: 24px; flex-wrap: wrap; font-size: .92rem; color: var(--ink-700); border-top: 1px solid var(--line); padding-top: 18px; }
.note-author { font-weight: 600; }
.note-date { color: var(--ink-400); }
.note-body { max-width: 760px; margin: 0 auto; padding-top: 50px; padding-bottom: 60px; }
.note-section { margin-bottom: 38px; }
.note-section h2 { font-family: var(--serif); font-size: 1.6rem; color: var(--navy-900); margin-bottom: 14px; line-height: 1.3; }
.note-section p { font-size: 1.05rem; line-height: 1.85; color: var(--ink-700); }
.note-author-card { display: grid; grid-template-columns: 160px 1fr; gap: 28px; align-items: center; background: var(--bg-cream); border-left: 3px solid var(--gold-500); border-radius: var(--radius-lg); padding: 28px 30px; margin: 50px 0 40px; }
[dir=rtl] .note-author-card { border-left: none; border-right: 3px solid var(--gold-500); }
.note-author-photo img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; display: block; }
.note-author-card h4 { font-family: var(--serif); font-size: 1.3rem; color: var(--navy-900); margin-bottom: 2px; }
.note-author-title { display: block; font-family: var(--sans); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-600); margin-bottom: 10px; }
.note-author-card p { font-size: .96rem; line-height: 1.7; color: var(--ink-500); margin: 0; }
@media (max-width: 720px) { .note-author-card { grid-template-columns: 1fr; text-align: center; } .note-author-photo img { margin: 0 auto; } }
.note-related { border-top: 1px solid var(--line); padding-top: 30px; }
.note-related h3 { font-family: var(--sans); font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-600); margin-bottom: 16px; }
.note-related ul { list-style: none; padding: 0; margin: 0; }
.note-related li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.note-related li:last-child { border-bottom: none; }
.note-related a { font-family: var(--serif); font-size: 1.15rem; color: var(--navy-900); text-decoration: none; }
.note-related a:hover { color: var(--gold-600); }
/* ===== END: INSIGHTS HUB + NOTES ===== */
/* ===== BEGIN: V4 — UNIFIED NAV / MEGA MENU (single source of truth) ===== */
/* Header shell */
.site-header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; max-width: var(--maxw); margin: 0 auto; padding: 18px 24px; gap: 24px; }
.nav-links { list-style: none; display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; }
.nav-links > li { position: relative; }
.nav-link {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--sans); font-size: .92rem; font-weight: 500;
color: var(--ink-700); text-decoration: none;
padding: 10px 14px; border-radius: var(--radius);
transition: color .2s ease, background-color .2s ease;
position: relative;
}
.nav-link:hover { color: var(--navy-900); background: var(--bg-soft); }
.nav-link.active { color: var(--navy-900); font-weight: 600; }
.nav-link.active::after {
content: ''; position: absolute;
left: 14px; right: 14px; bottom: 2px;
height: 2px; background: var(--gold-500); border-radius: 2px;
}
.mega-chev { font-size: .7rem; opacity: .7; transition: transform .2s ease; display: inline-block; }
.has-mega .mega-anchor[aria-expanded="true"] .mega-chev { transform: rotate(180deg); }
.lang-switch { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; font-family: var(--sans); font-size: .8rem; font-weight: 600; letter-spacing: .06em; }
.lang-switch a { padding: 6px 8px; color: var(--ink-400); border-radius: 3px; }
.lang-switch a:hover { color: var(--navy-900); }
.lang-switch a.active { color: var(--navy-900); background: var(--navy-50); }
.nav-cta .btn { padding: 10px 18px; font-size: .88rem; }
/* === MEGA MENU — bulletproof default-hidden state === */
.has-mega { position: relative; }
.has-mega > .mega {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(-6px);
min-width: 720px;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: 0 24px 60px rgba(10,31,68,0.14), 0 4px 12px rgba(10,31,68,0.06);
z-index: 200;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .22s ease, transform .22s cubic-bezier(.2,.7,.2,1), visibility .22s;
}
.has-mega > .mega--narrow { min-width: 340px; }
.has-mega > .mega[hidden] { display: none; } /* honor HTML hidden attribute fully */
/* Open via hover (desktop pointers only), focus-within, or .is-open class */
@media (hover: hover) and (min-width: 1081px) {
.has-mega:hover > .mega,
.has-mega:focus-within > .mega {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
}
.has-mega.is-open > .mega {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.mega-inner { padding: 28px 30px; }
.mega-head { margin-bottom: 18px; }
.mega-eyebrow {
font-family: var(--sans); font-size: .72rem; letter-spacing: .2em;
text-transform: uppercase; color: var(--gold-600); font-weight: 600;
display: block; margin-bottom: 6px;
}
.mega-h {
font-family: var(--serif); font-size: 1.05rem; color: var(--navy-900);
font-weight: 500; line-height: 1.4; margin: 0; max-width: 640px;
}
.mega-tiles {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px;
}
.mega-tile {
display: block; padding: 14px 16px; border-radius: 8px;
text-decoration: none; transition: background-color .18s ease;
border: 1px solid transparent;
}
.mega-tile:hover { background: var(--bg-soft); border-color: var(--line); }
.mega-tile:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.mega-tile-title {
display: block; font-family: var(--sans); font-weight: 600;
color: var(--navy-900); font-size: .95rem; line-height: 1.35;
margin-bottom: 4px;
}
.mega-tile-sub {
display: block; font-family: var(--sans); font-size: .82rem;
color: var(--ink-500); line-height: 1.4;
}
html[lang="ar"] .mega-tile-title,
html[lang="ar"] .mega-tile-sub { font-family: var(--arabic) !important; }
.mega-list { list-style: none; padding: 0; margin: 0; }
.mega-list-item {
display: block; padding: 12px 14px; border-radius: 6px;
font-family: var(--sans); font-size: .92rem; font-weight: 500;
color: var(--ink-700); text-decoration: none;
transition: background-color .18s ease, color .18s ease;
}
.mega-list-item:hover { background: var(--bg-soft); color: var(--navy-900); }
html[lang="ar"] .mega-list-item { font-family: var(--arabic) !important; }
.mega-foot {
margin-top: 18px; padding-top: 18px;
border-top: 1px solid var(--line);
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
}
.mega-foot-link {
font-family: var(--sans); font-size: .88rem; font-weight: 600;
color: var(--gold-600); text-decoration: none;
}
.mega-foot-link:hover { color: var(--navy-900); }
.mega-foot-cta {
font-family: var(--sans); font-size: .88rem; font-weight: 600;
color: var(--navy-900); text-decoration: none;
padding: 8px 16px; border-radius: var(--radius);
background: var(--gold-100); transition: background-color .18s ease;
}
.mega-foot-cta:hover { background: var(--gold-400); color: #fff; }
/* === Hamburger toggle === */
.nav-toggle {
display: none;
width: 40px; height: 40px;
background: transparent; border: none;
cursor: pointer; padding: 8px;
flex-direction: column; justify-content: space-between;
}
.nav-toggle span {
display: block; height: 2px; background: var(--navy-900);
transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
/* === Mobile drawer (≤1080) === */
@media (max-width: 1080px) {
.nav-toggle { display: flex; }
.nav-links {
position: fixed; top: 78px; left: 0; right: 0;
flex-direction: column; align-items: stretch;
background: #fff; padding: 16px 24px 24px;
gap: 0; max-height: calc(100vh - 78px); overflow-y: auto;
border-top: 1px solid var(--line);
transform: translateY(-12px); opacity: 0; pointer-events: none;
transition: transform .25s ease, opacity .2s ease;
box-shadow: 0 20px 40px rgba(10,31,68,0.10);
}
.nav-links.is-open {
transform: translateY(0); opacity: 1; pointer-events: auto;
}
.nav-links > li { width: 100%; }
.nav-link { padding: 14px 8px; width: 100%; border-radius: 0; border-bottom: 1px solid var(--line); }
.nav-link.active::after { display: none; }
.nav-link.active { color: var(--gold-600); }
/* Mobile mega behaves as accordion: not absolute, collapse via max-height */
.has-mega > .mega {
position: static;
transform: none;
opacity: 1; visibility: visible; pointer-events: none;
min-width: 0; box-shadow: none; border: none;
border-radius: 0; background: var(--bg-soft);
max-height: 0; overflow: hidden;
transition: max-height .35s cubic-bezier(.2,.7,.2,1);
}
.has-mega > .mega[hidden] { display: block; }
.has-mega.is-open > .mega { max-height: 1400px; pointer-events: auto; }
.mega-inner { padding: 14px 8px 20px; }
.mega-tiles { grid-template-columns: 1fr; gap: 4px; }
.mega-foot { flex-direction: column; align-items: stretch; }
.mega-foot-link, .mega-foot-cta { text-align: center; }
.lang-switch { justify-content: center; padding: 16px 0 8px; border-bottom: 1px solid var(--line); }
.nav-cta { padding-top: 16px; }
.nav-cta .btn { width: 100%; text-align: center; }
}
/* ===== END: V4 ===== */
/* ===== BEGIN: HOMEPAGE PRACTICE-CARD GRID ===== */
.practice-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 8px;
}
@media (max-width: 980px) { .practice-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .practice-grid { grid-template-columns: 1fr; gap: 16px; } }
.practice-card {
position: relative;
display: flex; flex-direction: column;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 32px 28px 28px;
text-decoration: none;
color: inherit;
overflow: hidden;
transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
min-height: 280px;
}
.practice-card::before {
content: '';
position: absolute; left: 0; right: 0; top: 0;
height: 3px;
background: linear-gradient(90deg, var(--gold-500) 0%, var(--gold-400) 100%);
transform: scaleX(0); transform-origin: left;
transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
html[dir="rtl"] .practice-card::before { transform-origin: right; }
.practice-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--gold-400);
}
.practice-card:hover::before { transform: scaleX(1); }
.practice-num {
font-family: var(--serif);
font-size: 1.05rem;
color: var(--gold-600);
font-weight: 600;
letter-spacing: .04em;
margin-bottom: 18px;
opacity: .85;
}
.practice-card h3 {
font-family: var(--serif);
font-size: 1.35rem;
line-height: 1.3;
color: var(--navy-900);
margin-bottom: 12px;
font-weight: 600;
}
.practice-desc {
font-size: .96rem;
line-height: 1.65;
color: var(--ink-500);
margin-bottom: 22px;
flex: 1;
}
.practice-tags {
display: block;
font-family: var(--sans);
font-size: .78rem;
letter-spacing: .04em;
color: var(--ink-400);
border-top: 1px solid var(--line);
padding-top: 16px;
}
.practice-arrow {
position: absolute;
right: 24px;
bottom: 22px;
color: var(--gold-500);
font-size: 1.2rem;
opacity: 0;
transform: translateX(-6px);
transition: opacity .3s ease, transform .3s ease;
}
html[dir="rtl"] .practice-arrow { right: auto; left: 24px; transform: translateX(6px); }
.practice-card:hover .practice-arrow { opacity: 1; transform: translateX(0); }
html[lang="ar"] .practice-card h3 { font-family: var(--arabic) !important; line-height: 1.45; }
/* ===== END: HOMEPAGE PRACTICE-CARD GRID ===== */
/* ===== BEGIN: LEGAL PAGES ===== */
.legal-body {
max-width: 780px;
margin: 0 auto;
padding: 20px 0 40px;
}
.legal-body h2 {
font-family: var(--serif);
font-size: 1.45rem;
color: var(--navy-900);
margin-top: 38px;
margin-bottom: 12px;
line-height: 1.3;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p {
font-size: 1.02rem;
line-height: 1.8;
color: var(--ink-700);
margin-bottom: 14px;
}
.legal-body a { color: var(--gold-600); text-decoration: underline; text-underline-offset: 3px; }
.legal-body a:hover { color: var(--navy-900); }
.legal-updated {
margin-top: 50px;
padding-top: 22px;
border-top: 1px solid var(--line);
font-size: .88rem !important;
color: var(--ink-400) !important;
font-style: italic;
}
html[lang="ar"] .legal-body h2 { font-family: var(--arabic) !important; line-height: 1.5; }
/* ===== END: LEGAL PAGES ===== */
/* V3 defensive removed — superseded by V4 */
/* Homepage 6-card package grid (compact, premium) */
.pkg-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin-top: 8px;
}
@media (max-width: 1080px) { .pkg-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .pkg-grid { grid-template-columns: 1fr; gap: 16px; } }
.pkg-card {
position: relative;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 26px 24px 22px;
display: flex;
flex-direction: column;
min-height: 320px;
transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.pkg-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--gold-400);
}
.pkg-featured {
border-color: var(--gold-500);
background: linear-gradient(180deg, #fff 0%, var(--bg-cream) 100%);
}
.pkg-tag-pill {
position: absolute;
top: -10px;
left: 24px;
background: var(--navy-900);
color: var(--gold-400);
font-family: var(--sans);
font-size: .68rem;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 600;
padding: 6px 12px;
border-radius: 12px;
}
html[dir="rtl"] .pkg-tag-pill { left: auto; right: 24px; }
.pkg-audience {
display: block;
font-family: var(--sans);
font-size: .72rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--gold-600);
font-weight: 600;
margin-bottom: 10px;
}
html[lang="ar"] .pkg-audience { letter-spacing: 0; font-family: var(--arabic) !important; text-transform: none; }
.pkg-card h3 {
font-family: var(--serif);
font-size: 1.3rem;
color: var(--navy-900);
line-height: 1.3;
margin-bottom: 10px;
}
html[lang="ar"] .pkg-card h3 { font-family: var(--arabic) !important; line-height: 1.45; }
.pkg-line {
font-size: .96rem;
line-height: 1.6;
color: var(--ink-500);
margin-bottom: 16px;
}
.pkg-bullets {
list-style: none;
padding: 0;
margin: 0 0 20px;
flex: 1;
}
.pkg-bullets li {
position: relative;
padding: 6px 0 6px 18px;
font-size: .92rem;
line-height: 1.55;
color: var(--ink-700);
}
.pkg-bullets li::before {
content: '';
position: absolute;
left: 0; top: 14px;
width: 8px; height: 1px;
background: var(--gold-500);
}
html[dir="rtl"] .pkg-bullets li { padding: 6px 18px 6px 0; }
html[dir="rtl"] .pkg-bullets li::before { left: auto; right: 0; }
.pkg-link {
font-family: var(--sans);
font-size: .9rem;
font-weight: 600;
color: var(--gold-600);
text-decoration: none;
align-self: flex-start;
padding-top: 14px;
border-top: 1px solid var(--line);
width: 100%;
transition: color .2s ease;
}
.pkg-link:hover { color: var(--navy-900); }
.pkg-link .arrow { display: inline-block; transition: transform .2s ease; }
.pkg-link:hover .arrow { transform: translateX(4px); }
html[dir="rtl"] .pkg-link:hover .arrow { transform: translateX(-4px); }
/* Footer legal-links: premium · separator + better wrap */
.legal-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0;
}
.legal-links a {
color: var(--ink-400) !important;
font-size: .85rem;
padding: 0 14px;
border-right: 1px solid rgba(255,255,255,0.18);
transition: color .2s ease;
}
.legal-links a:last-child { border-right: none; }
.legal-links a:first-child { padding-left: 0; }
.legal-links a:hover { color: var(--gold-400) !important; }
html[dir="rtl"] .legal-links a { border-right: none; border-left: 1px solid rgba(255,255,255,0.18); }
html[dir="rtl"] .legal-links a:last-child { border-left: none; }
html[dir="rtl"] .legal-links a:first-child { padding-left: 14px; padding-right: 0; }
/* Hero CTA: cap to 2 buttons cleanly, stack on mobile */
.hero-cta {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 32px;
}
@media (max-width: 560px) {
.hero-cta { flex-direction: column; align-items: stretch; }
.hero-cta .btn { width: 100%; text-align: center; justify-content: center; }
}
/* ===== END: V3 ===== */
/* ===========================================================
===== FINAL FIX — DROPDOWN VISIBILITY + FOOTER SPACING ====
This block is the LAST word on dropdown behavior.
Uses your exact contract. Overrides all prior rules with !important.
=========================================================== */
/* Parent positioning */
.site-header,
.site-header .nav,
.nav-links > li.has-mega { position: relative !important; }
/* Default: dropdown HIDDEN */
.has-mega > .mega {
position: absolute !important;
top: 100% !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateX(-50%) translateY(8px) !important;
z-index: 9999 !important;
display: block !important; /* always block — never display:none, so transitions work */
max-height: none !important; /* kill any leftover accordion collapse on desktop */
overflow: visible !important;
}
/* OPEN: only via .is-open class (JS), :hover, or :focus-within */
@media (hover: hover) and (min-width: 1081px) {
.has-mega:hover > .mega,
.has-mega:focus-within > .mega,
.has-mega.is-open > .mega {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateX(-50%) translateY(0) !important;
}
}
/* MOBILE (<=1080): drawer + accordion. Mega stays absolute-OFFSCREEN-equivalent
(opacity 0 + visibility hidden) when drawer is closed.
When drawer is open AND the LI is .is-open, the mega becomes a static accordion. */
@media (max-width: 1080px) {
/* While drawer closed, force panels invisible AND out of flow */
.nav-links:not(.is-open) .has-mega > .mega {
position: absolute !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
max-height: 0 !important;
overflow: hidden !important;
transform: none !important;
}
/* Drawer open: mega becomes a flowing accordion item */
.nav-links.is-open .has-mega > .mega {
position: static !important;
transform: none !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: none !important;
max-height: 0 !important;
overflow: hidden !important;
background: var(--bg-soft);
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
z-index: auto !important;
transition: max-height .35s cubic-bezier(.2,.7,.2,1) !important;
}
/* Tapped to open */
.nav-links.is-open .has-mega.is-open > .mega {
max-height: 1600px !important;
pointer-events: auto !important;
}
}
/* Footer legal links — use plain text · separator (not borders) */
.legal-links {
display: inline-flex !important;
flex-wrap: wrap;
align-items: center;
gap: 0;
}
.legal-links a {
color: var(--ink-400) !important;
font-size: .85rem;
padding: 0 !important;
border: none !important;
transition: color .2s ease;
}
.legal-links a:hover { color: var(--gold-400) !important; }
.legal-links a + a::before {
content: '·';
color: var(--ink-400);
margin: 0 12px;
opacity: .6;
}
/* ===== END: FINAL FIX ===== */
/* Final separator styling — bulletproof literal text */
.legal-sep {
display: inline-block !important;
padding: 0 8px !important;
color: var(--ink-400) !important;
opacity: .6 !important;
user-select: none;
}
/* Remove the redundant ::before fallback so we don't get DOUBLE separators */
.legal-links a + a::before { content: none !important; }
/* ===== ABSOLUTE FINAL: footer legal-links visible spacing ===== */
.site-footer .legal-links {
display: inline-flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 16px !important; /* explicit gap between every flex child */
}
.site-footer .legal-links a {
color: rgba(255, 255, 255, 0.55) !important;
font-size: .85rem !important;
padding: 0 !important;
border: none !important;
text-decoration: none;
}
.site-footer .legal-links a:hover { color: var(--gold-400) !important; }
.site-footer .legal-links .legal-sep {
color: rgba(201, 169, 97, 0.55) !important; /* gold, visible on navy */
opacity: 1 !important;
padding: 0 !important;
font-size: .95rem !important;
line-height: 1 !important;
user-select: none;
}
.site-footer .legal-links a + a::before { content: none !important; }
/* ===== END absolute final ===== */
/* ===== BEGIN: OFFICIAL LOGO IMAGE — header + footer ===== */
.brand { display: inline-flex !important; align-items: center; text-decoration: none; line-height: 0; }
.brand:hover { opacity: .9; transition: opacity .2s ease; }
.brand-logo {
display: block;
height: auto;
width: 180px; /* desktop */
max-width: 100%;
object-fit: contain;
}
@media (max-width: 1080px) { .brand-logo { width: 150px; } }
@media (max-width: 480px) { .brand-logo { width: 130px; } }
/* Footer: the official logo is light-background artwork; give it a soft cream
pill so the navy wordmark + gold wing remain crisp on the navy footer */
.brand--footer .brand-logo {
width: 170px;
background: #ffffff;
padding: 10px 16px;
border-radius: 8px;
box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}
@media (max-width: 720px) { .brand--footer .brand-logo { width: 150px; } }
/* ===== END: OFFICIAL LOGO IMAGE ===== */
/* ===== HEADER NAV SPACING POLISH (desktop/tablet only) ===== */
@media (min-width: 1281px) {
.nav { padding-left: 56px !important; padding-right: 56px !important; }
.nav-links { gap: 32px !important; }
}
@media (min-width: 1081px) and (max-width: 1280px) {
.nav { padding-left: 40px !important; padding-right: 40px !important; }
.nav-links { gap: 24px !important; } /* tighter on laptop widths */
}
@media (min-width: 1081px) {
.nav { min-height: 82px; }
/* Larger clickable area + breathing room on nav links */
.nav-link {
padding: 10px 4px !important;
font-size: .94rem !important;
letter-spacing: .005em;
position: relative;
}
.nav-link:hover { background: transparent !important; color: var(--gold-600) !important; }
/* Mega-menu triggers get a touch more clickable area + consistent chevron spacing */
.mega-anchor { padding: 10px 4px !important; gap: 6px !important; }
.mega-chev { margin-left: 2px; }
/* Subtle warm-gold underline for hover + active state */
.nav-link:hover::after {
content: '';
position: absolute;
left: 4px; right: 4px; bottom: -2px;
height: 1px;
background: var(--gold-500);
opacity: .65;
}
.nav-link.active::after {
left: 4px !important;
right: 4px !important;
bottom: -2px !important;
height: 1px !important;
opacity: 1 !important;
}
/* Language switcher: small visual break from main nav */
.lang-switch { margin-left: 8px; }
.nav-cta { margin-left: 4px; }
.nav-cta .btn {
padding: 11px 22px !important;
font-size: .9rem !important;
letter-spacing: .01em;
}
/* RTL mirror */
html[dir="rtl"] .lang-switch { margin-left: 0; margin-right: 8px; }
html[dir="rtl"] .nav-cta { margin-left: 0; margin-right: 4px; }
}
/* ===== END HEADER NAV SPACING POLISH ===== */
/* Narrow laptop range (1081-1199px) — tighten nav to prevent overflow before hamburger triggers */
@media (min-width: 1081px) and (max-width: 1199px) {
.nav { padding-left: 24px !important; padding-right: 24px !important; gap: 12px !important; }
.nav-links { gap: 18px !important; }
.nav-link { padding: 10px 2px !important; font-size: .88rem !important; }
.mega-anchor { padding: 10px 2px !important; }
.nav-cta .btn { padding: 10px 14px !important; font-size: .82rem !important; }
.brand-logo { width: 150px !important; }
}
/* =========================================================
===== ABSOLUTE FINAL: HEADER NAV SPACING (per spec) =====
This block is the last word on header spacing.
Uses user's exact breakpoints + values + !important.
========================================================= */
/* Base desktop — large screens */
@media (min-width: 1081px) {
.site-header { min-height: 86px; }
.nav {
min-height: 86px !important;
padding-left: 56px !important;
padding-right: 56px !important;
gap: 24px !important;
}
.nav-links {
display: flex !important;
align-items: center !important;
gap: 32px !important;
}
.nav-link,
.mega-anchor {
padding: 10px 4px !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
font-size: .95rem !important;
font-weight: 500 !important;
}
/* Chevron — smaller and clearly spaced from word */
.mega-chev {
font-size: .65rem !important;
margin-left: 6px !important;
opacity: .7 !important;
transition: transform .2s ease, opacity .2s ease;
}
.nav-link:hover .mega-chev,
.mega-anchor[aria-expanded="true"] .mega-chev {
opacity: 1 !important;
}
/* Right cluster: language switcher + CTA with breathing room */
.lang-switch { margin-left: 16px !important; }
.nav-cta { margin-left: 24px !important; }
.nav-cta .btn {
padding: 11px 20px !important;
font-size: .9rem !important;
letter-spacing: .01em;
}
/* RTL mirror */
html[dir="rtl"] .lang-switch { margin-left: 0 !important; margin-right: 16px !important; }
html[dir="rtl"] .nav-cta { margin-left: 0 !important; margin-right: 24px !important; }
/* Premium hover: warm-gold color + 1px gold underline */
.nav-link:hover { color: var(--gold-600) !important; background: transparent !important; }
.nav-link:hover::after {
content: '' !important;
position: absolute !important;
left: 4px !important; right: 4px !important;
bottom: -2px !important;
height: 1px !important;
background: var(--gold-500) !important;
opacity: .7 !important;
}
.nav-link.active::after {
opacity: 1 !important;
height: 1px !important;
}
}
/* Laptop — reduce gap so menu doesn't feel cramped but stays single-line */
@media (max-width: 1280px) and (min-width: 1181px) {
.nav-links { gap: 24px !important; }
.nav { padding-left: 40px !important; padding-right: 40px !important; }
}
/* Narrow laptop — tighter still */
@media (max-width: 1180px) and (min-width: 1081px) {
.nav-links { gap: 18px !important; }
.nav { padding-left: 24px !important; padding-right: 24px !important; }
.nav-link, .mega-anchor { padding: 10px 2px !important; font-size: .88rem !important; }
.nav-cta .btn { padding: 10px 14px !important; font-size: .82rem !important; }
.lang-switch { margin-left: 8px !important; }
.nav-cta { margin-left: 12px !important; }
.brand-logo { width: 150px !important; }
}
/* ===== END ABSOLUTE FINAL ===== */
/* ===== RTL HEADER SPACING POLISH (Arabic only) ===== */
@media (min-width: 1281px) {
html[dir="rtl"] .nav-links { gap: 34px !important; }
}
@media (max-width: 1280px) and (min-width: 1181px) {
html[dir="rtl"] .nav-links { gap: 26px !important; }
}
@media (max-width: 1180px) and (min-width: 1081px) {
/* Arabic text needs more space — switch to hamburger earlier for AR only */
html[dir="rtl"] .nav-toggle { display: flex !important; }
html[dir="rtl"] .nav-links {
position: fixed !important;
top: 78px !important;
left: 0 !important; right: 0 !important;
flex-direction: column !important;
align-items: stretch !important;
background: #fff !important;
padding: 16px 24px 24px !important;
gap: 0 !important;
max-height: calc(100vh - 78px) !important;
overflow-y: auto !important;
border-top: 1px solid var(--line) !important;
transform: translateY(-12px) !important;
opacity: 0 !important;
pointer-events: none !important;
transition: transform .25s ease, opacity .2s ease !important;
box-shadow: 0 20px 40px rgba(10,31,68,0.10) !important;
}
html[dir="rtl"] .nav-links.is-open {
transform: translateY(0) !important;
opacity: 1 !important;
pointer-events: auto !important;
}
}
/* Arabic dropdown trigger spacing — more room between word and chevron */
@media (min-width: 1081px) {
html[dir="rtl"] .mega-anchor {
gap: 8px !important;
padding: 10px 5px !important;
}
html[dir="rtl"] .nav-link {
font-family: var(--arabic) !important;
font-weight: 500 !important;
}
html[dir="rtl"] .nav-link:hover { color: var(--gold-600) !important; }
}
/* ===== END RTL HEADER SPACING POLISH ===== */
/* Fixes for Arabic header issues found in QA */
.nav-link { white-space: nowrap !important; }
html[dir="rtl"] .nav-link { white-space: nowrap !important; }
/* Hamburger visibility at AR 1180 range — ensure toggle is rendered & flex/visible */
@media (max-width: 1180px) and (min-width: 1081px) {
html[dir="rtl"] .nav-toggle {
display: flex !important;
width: 40px !important; height: 40px !important;
order: 0; /* keep it on the natural-left in RTL flex (visually left) */
}
html[dir="rtl"] .nav { justify-content: space-between !important; }
}
/* Hamburger bars need explicit width to be visible */
.nav-toggle span { width: 100% !important; min-width: 22px; }
/* Make hamburger button unambiguously visible at any size where it's active */
.nav-toggle {
box-sizing: border-box !important;
width: 44px !important;
height: 44px !important;
padding: 12px 11px !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: stretch !important;
}
.nav-toggle span {
display: block !important;
width: 22px !important;
height: 2px !important;
background: var(--navy-900) !important;
flex: 0 0 auto !important;
}
/* ===========================================================
===== MEGA-MENU v5 — WIDE GROUPED PANELS (24 services) =====
=========================================================== */
/* Wide panel (Services) and medium panel (Packages) */
.has-mega .mega--wide,
.has-mega .mega--medium {
position: absolute !important;
top: 100% !important;
left: 50% !important;
transform: translateX(-50%) translateY(8px);
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: 0 24px 60px rgba(10,31,68,0.16), 0 4px 12px rgba(10,31,68,0.06);
z-index: 9999;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .22s ease, transform .22s cubic-bezier(.2,.7,.2,1), visibility .22s;
}
.has-mega .mega--wide { width: min(1160px, calc(100vw - 80px)); min-width: 920px; }
.has-mega .mega--medium { width: min(900px, calc(100vw - 80px)); min-width: 680px; }
@media (hover: hover) and (min-width: 1081px) {
.has-mega:hover > .mega--wide,
.has-mega:focus-within > .mega--wide,
.has-mega:hover > .mega--medium,
.has-mega:focus-within > .mega--medium { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0); }
}
.has-mega.is-open > .mega--wide,
.has-mega.is-open > .mega--medium { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0); }
/* Inner padding for wider panels */
.mega--wide .mega-inner,
.mega--medium .mega-inner { padding: 36px 40px; }
/* Grouped grid layout */
.mega-services-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px 40px;
}
.mega-packages-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px 36px;
}
@media (max-width: 1280px) {
.mega-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega-packages-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mega-group { min-width: 0; }
.mega-group-h {
font-family: var(--serif);
font-size: 1.02rem;
font-weight: 600;
color: var(--navy-900);
margin: 0 0 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--line);
line-height: 1.3;
}
html[lang="ar"] .mega-group-h { font-family: var(--arabic) !important; line-height: 1.5; }
.mega-group-list {
list-style: none; padding: 0; margin: 0;
}
.mega-group-list li { padding: 0; }
.mega-group-list a {
display: block;
padding: 7px 0;
font-family: var(--sans);
font-size: .92rem;
color: var(--ink-700);
text-decoration: none;
transition: color .15s ease, padding-left .15s ease;
line-height: 1.4;
}
html[lang="ar"] .mega-group-list a { font-family: var(--arabic) !important; }
.mega-group-list a:hover {
color: var(--gold-600);
padding-left: 4px;
}
html[dir="rtl"] .mega-group-list a:hover { padding-left: 0; padding-right: 4px; }
/* Mobile: groups become accordion sections inside the drawer */
@media (max-width: 1080px) {
.mega--wide,
.mega--medium {
position: static !important;
transform: none !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
box-shadow: none !important;
border: none !important;
border-radius: 0 !important;
background: var(--bg-soft) !important;
}
.mega--wide .mega-inner,
.mega--medium .mega-inner { padding: 14px 8px 20px !important; }
.mega-services-grid,
.mega-packages-grid {
grid-template-columns: 1fr !important;
gap: 18px !important;
}
.mega-group-h { font-size: 1rem; }
.mega-group-list a { padding: 10px 0; font-size: .95rem; }
}
/* ===== MEMBERSHIP CARD CONTRAST FIX (dark variant) ===== */
/* The center / featured membership tier was dark with low-contrast gold labels.
Brighten the "Best for" label and audience copy on dark cards. */
.pkg-card-dark, .member-tier--featured, .member-tier.dark {
color: rgba(255,255,255,0.92);
}
.pkg-card-dark .pkg-audience,
.member-tier--featured .pkg-audience,
.member-tier.dark .pkg-audience,
.pkg-card-dark .audience-label,
.member-tier--featured .audience-label {
color: var(--gold-400) !important;
opacity: 1 !important;
}
/* Fallback: any pkg-audience inside a navy/dark background gets high-contrast gold */
.section-soft.dark .pkg-audience,
[style*="background: var(--navy"] .pkg-audience,
[style*="background:var(--navy"] .pkg-audience { color: var(--gold-400) !important; }
/* ===== END v5 ===== */
/* Wide mega panel: center on viewport, not on trigger (prevents off-screen clipping) */
@media (min-width: 1081px) {
.has-mega .mega--wide {
position: fixed !important;
top: 86px !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) translateY(8px);
}
.has-mega:hover > .mega--wide,
.has-mega:focus-within > .mega--wide,
.has-mega.is-open > .mega--wide {
transform: translateX(-50%) translateY(0) !important;
}
/* Medium panel can stay anchored under the trigger */
.has-mega .mega--medium {
position: absolute !important;
top: 100% !important;
left: 50% !important;
transform: translateX(-50%) translateY(8px);
}
.has-mega:hover > .mega--medium,
.has-mega:focus-within > .mega--medium,
.has-mega.is-open > .mega--medium {
transform: translateX(-50%) translateY(0) !important;
}
}
/* User-requested RTL gap base rule */
@media (min-width: 1081px) {
html[dir="rtl"] .nav-links { gap: 34px !important; }
}
@media (max-width: 1280px) and (min-width: 1181px) {
html[dir="rtl"] .nav-links { gap: 26px !important; }
}
/* ===== AR typography polish (line-heights for readability) ===== */
html[lang="ar"] body { line-height: 1.8 !important; }
html[lang="ar"] .mega-group-list a { line-height: 1.65 !important; padding: 8px 0 !important; }
html[lang="ar"] .pkg-card, html[lang="ar"] .practice-card { line-height: 1.75 !important; }
html[lang="ar"] h1 { font-weight: 700 !important; }
html[lang="ar"] h2 { font-weight: 600 !important; }
html[lang="ar"] .mega-group-h { font-weight: 600 !important; }
/* ========== URGENT: FORCE BRAND LOGO VISIBLE ========== */
.site-header .brand .brand-logo,
header .brand .brand-logo,
.brand--header .brand-logo,
.brand--footer .brand-logo {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 180px !important;
height: auto !important;
min-width: 180px !important;
min-height: 50px !important;
max-width: 100% !important;
object-fit: contain !important;
}
.site-header .brand,
header .brand,
.brand--header {
display: inline-flex !important;
align-items: center !important;
line-height: 1 !important;
min-width: 180px !important;
width: auto !important;
height: auto !important;
visibility: visible !important;
opacity: 1 !important;
}
@media (max-width: 1080px) {
.site-header .brand-logo, .brand--header .brand-logo { width: 150px !important; min-width: 150px !important; }
.site-header .brand, .brand--header { min-width: 150px !important; }
}
@media (max-width: 480px) {
.site-header .brand-logo, .brand--header .brand-logo { width: 130px !important; min-width: 130px !important; }
.site-header .brand, .brand--header { min-width: 130px !important; }
}
.brand--footer { display: inline-flex !important; min-width: 170px !important; }
.brand--footer .brand-logo { width: 170px !important; min-width: 170px !important; }
/* ========== END FORCE BRAND LOGO ========== */
/* ===== FINAL POLISH: header logo + mega panel + CTAs ===== */
/* 1. Logo — ensure full visibility, no crop */
@media (min-width: 1081px) {
.site-header { overflow: visible !important; }
.nav { overflow: visible !important; min-height: 92px !important; }
.brand--header { overflow: visible !important; }
.brand--header .brand-logo {
width: 170px !important;
max-width: 180px !important;
height: auto !important;
max-height: 76px !important;
object-fit: contain !important;
align-self: center !important;
}
}
/* 2. Mega panel — slightly deeper shadow + breathing room from hero */
@media (min-width: 1081px) {
.has-mega .mega--wide,
.has-mega .mega--medium {
top: calc(100% + 4px) !important;
box-shadow:
0 32px 80px rgba(10, 31, 68, 0.18),
0 8px 24px rgba(10, 31, 68, 0.08) !important;
border: 1px solid rgba(10, 31, 68, 0.08) !important;
border-radius: 14px !important;
}
.has-mega .mega--wide.mega--wide { /* desktop wide panel — fixed positioning */
top: 96px !important;
}
}
/* 3. Bottom CTA row — aligned, premium */
.mega-foot {
margin-top: 22px !important;
padding-top: 22px !important;
border-top: 1px solid var(--line) !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 24px !important;
}
.mega-foot-link {
font-family: var(--sans) !important;
font-size: .9rem !important;
font-weight: 600 !important;
color: var(--gold-600) !important;
text-decoration: none !important;
letter-spacing: .01em;
padding: 6px 0 !important;
border-bottom: 1px solid transparent;
transition: border-color .2s ease, color .2s ease;
}
.mega-foot-link:hover { color: var(--navy-900) !important; border-bottom-color: var(--gold-500); }
.mega-foot-cta {
font-family: var(--sans) !important;
font-size: .9rem !important;
font-weight: 600 !important;
color: var(--navy-900) !important;
text-decoration: none !important;
padding: 10px 20px !important;
border-radius: 4px !important;
background: var(--gold-100) !important;
transition: background-color .2s ease, color .2s ease;
}
.mega-foot-cta:hover { background: var(--gold-500) !important; color: #fff !important; }
/* ===== END FINAL POLISH ===== */
/* ===== SERVICES MEGA — Premium Practice-Card Directory ===== */
.has-mega .mega--wide { min-width: 880px !important; width: min(1080px, calc(100vw - 80px)) !important; }
.practice-cards-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 18px !important;
margin: 4px 0 0 !important;
}
@media (max-width: 1280px) { .practice-cards-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 1080px) { .practice-cards-grid { grid-template-columns: 1fr !important; gap: 12px !important; } }
.practice-mega-card {
position: relative;
display: flex !important;
flex-direction: column !important;
padding: 22px 22px 60px !important;
border: 1px solid var(--line) !important;
border-radius: 10px !important;
background: #fff !important;
text-decoration: none !important;
transition: border-color .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.2,.7,.2,1) !important;
overflow: hidden;
min-height: 200px;
}
.practice-mega-card::before {
content: '';
position: absolute;
left: 0; right: 0; top: 0;
height: 2px;
background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
transform: scaleX(0); transform-origin: left;
transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
html[dir="rtl"] .practice-mega-card::before { transform-origin: right; }
.practice-mega-card:hover {
border-color: var(--gold-400) !important;
box-shadow: 0 12px 32px rgba(10,31,68,0.10);
transform: translateY(-2px);
}
.practice-mega-card:hover::before { transform: scaleX(1); }
.practice-mega-title {
font-family: var(--serif) !important;
font-size: 1.02rem !important;
color: var(--navy-900) !important;
font-weight: 600 !important;
line-height: 1.3 !important;
margin: 0 0 8px !important;
padding: 0 !important;
border: none !important;
}
html[lang="ar"] .practice-mega-title { font-family: var(--arabic) !important; line-height: 1.5 !important; }
.practice-mega-desc {
font-family: var(--sans) !important;
font-size: .88rem !important;
line-height: 1.55 !important;
color: var(--ink-500) !important;
margin: 0 0 14px !important;
}
html[lang="ar"] .practice-mega-desc { font-family: var(--arabic) !important; line-height: 1.7 !important; }
.practice-mega-eg {
display: block !important;
font-family: var(--sans) !important;
font-size: .76rem !important;
letter-spacing: .04em !important;
color: var(--ink-400) !important;
padding-top: 12px !important;
border-top: 1px solid var(--line) !important;
}
html[lang="ar"] .practice-mega-eg { font-family: var(--arabic) !important; letter-spacing: 0 !important; }
.practice-mega-cta {
position: absolute;
bottom: 18px;
left: 22px;
font-family: var(--sans) !important;
font-size: .82rem !important;
font-weight: 600 !important;
color: var(--gold-600) !important;
letter-spacing: .02em;
transition: color .2s ease, transform .2s ease;
}
html[dir="rtl"] .practice-mega-cta { left: auto; right: 22px; }
.practice-mega-card:hover .practice-mega-cta { color: var(--navy-900) !important; }
/* Mobile: cards stack with light background */
@media (max-width: 1080px) {
.practice-mega-card { padding: 16px 14px 50px !important; min-height: 0 !important; background: #fff !important; }
.practice-mega-title { font-size: .98rem !important; }
}
/* ===== END services mega cards ===== */
/* Footer section labels */
.footer-col .foot-label { color: var(--gold, #c9a961); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; list-style: none; margin-bottom: 2px; }
.footer-col .foot-label:first-child { margin-top: 0 !important; }
/* Contact form success + error panels */
.form-success-panel { background: var(--bg-cream, #faf6ef); border: 1px solid var(--gold-500, #c9a961); border-radius: 8px; padding: 48px 40px; text-align: center; margin: 32px 0; }
.form-success-icon { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50
/* Contact form success + error panels */
.form-success-panel { background: var(--bg-cream, #faf6ef); border: 1px solid var(--gold-500, #c9a961); border-radius: 8px; padding: 48px 40px; text-align: center; margin: 32px 0; }
.form-success-icon { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: var(--gold-500, #c9a961); color: #fff; font-size: 32px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.form-success-title { font-family: var(--serif, "Cormorant Garamond", serif); font-size: 1.75rem; color: var(--navy-900, #0a1f44); margin: 0 0 12px; }
.form-success-body { color: var(--ink-700, #4a4a4a); font-size: 1rem; line-height: 1.7; margin: 0 auto; max-width: 480px; }
.form-error-banner { background: #fdf2f2; border-left: 3px solid #c0392b; padding: 14px 18px; margin-bottom: 20px; border-radius: 4px; display: flex; flex-direction: column; gap: 4px; }
.form-error-banner strong { color: #c0392b; font-size: .95rem; }
.form-error-banner span { color: var(--ink-700, #4a4a4a); font-size: .88rem; line-height: 1.6; }
html[dir="rtl"] .form-error-banner { border-left: none; border-right: 3px solid #c0392b; }