/* ============================================
   YAKEEN LIGHTING — V19.1 Clean Homepage
   Mapped 1:1 to actual HTML class names
   ============================================ */

/* ============================================
   DESIGN TOKENS — Design System Foundation
   ============================================ */
:root {
  /* Colors — Warm Luxury Palette */
  --color-gold-primary: #D4BC8A;
  --color-gold-light: #E8D5A8;
  --color-gold-dark: #B89648;
  --color-gold-muted: #9A7E57;

  --color-bg-primary: #0A0A0A;
  --color-bg-secondary: #141414;
  --color-bg-tertiary: #1A1A1A;
  --color-bg-card: #181818;
  --color-bg-elevated: #1F1F1F;

  --color-text-primary: #FFFFFF;
  --color-text-secondary: rgba(255, 255, 255, 0.7);
  --color-text-tertiary: rgba(255, 255, 255, 0.5);
  --color-text-muted: rgba(255, 255, 255, 0.35);

  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-light: rgba(255, 255, 255, 0.06);
  --color-border-gold: rgba(212, 188, 138, 0.3);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: clamp(1.5rem, 3vw, 2rem);
  --font-size-4xl: clamp(2rem, 4.5vw, 3rem);
  --font-size-hero: clamp(2.5rem, 6vw, 4.5rem);

  --line-height-tight: 1.2;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.75;

  /* Spacing — 4px base scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;

  /* Section spacing */
  --section-padding-y: var(--space-30);
  --section-header-margin: var(--space-16);

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.2);
  --shadow-gold: 0 4px 20px rgba(212, 188, 138, 0.2);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --container-max: 1200px;
  --container-padding: 24px;
  --nav-height: 80px;
}

/* Dark mode / light mode tokens can extend here */

/* ============================================================
   BASE
   Reset, typography, utility classes, base elements
   ============================================================ */

/* --- Reset & Base --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}

body#yakeen-page {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body#yakeen-page p,
body#yakeen-page span,
body#yakeen-page li,
body#yakeen-page a,
body#yakeen-page div {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body#yakeen-page h1,
body#yakeen-page h2,
body#yakeen-page h3,
body#yakeen-page h4,
body#yakeen-page h5 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  line-height: 1.2;
  color: #1A1A1A;
  margin: 0;
}

body#yakeen-page em {
  font-style: italic;
  color: #9A7E57;
}

body#yakeen-page a {
  text-decoration: none;
  color: inherit;
}

body#yakeen-page img {
  max-width: 100%;
  display: block;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* --- Navigation --- */

/* ============================================================
   LAYOUT
   Nav, footer, mobile menu, skip link — page chrome
   ============================================================ */

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

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(20, 20, 20, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(212, 188, 138, 0.15);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 24px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-light, #fff);
  flex-shrink: 0;
}

.nav-logo-mark {
  font-size: 22px;
  color: var(--accent-gold, #D4BC8A);
  font-weight: 600;
}

.nav-logo-text {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.nav-logo-text span {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}

.nav-link {
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  border-radius: 4px;
  transition: color 0.2s ease;
  position: relative;
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--accent-gold, #D4BC8A);
}

/* Dropdown */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  padding: 8px;
  background: rgba(20, 20, 20, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 1001;
}

.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-item {
  display: block;
  padding: 10px 14px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s ease, color 0.2s ease;
}

.nav-dropdown-item:hover {
  background: rgba(212, 188, 138, 0.1);
  color: var(--accent-gold, #D4BC8A);
}

.nav-dropdown-item--featured {
  color: var(--accent-gold, #D4BC8A);
  font-weight: 500;
}

/* CTA button in nav */
.nav-cta {
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1A1A1A;
  background: var(--accent-gold, #D4BC8A);
  border: none;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
  cursor: pointer;
}

.nav-cta:hover {
  background: #E5D4A8;
  transform: translateY(-1px);
}

/* Language switcher */
.nav-link--ar {
  font-weight: 500;
}

/* Transparent variant (hero section) */
.nav--transparent {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
}

.nav--transparent.nav--scrolled {
  background: rgba(20, 20, 20, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: rgba(212, 188, 138, 0.15);
}

/* ============================================================
   HAMBURGER TOGGLE (hidden on desktop)
   ============================================================ */

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 1002;
}

.nav-toggle span {
  display: block;
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background: var(--text-light, #fff);
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 28px; }

.nav-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   MOBILE MENU (off-canvas)
   ============================================================ */

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 85%;
  max-width: 320px;
  height: 100vh;
  background: rgba(15, 15, 15, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 2000;
  padding: 80px 24px 32px;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-menu.is-open {
  transform: translateX(0);
}

.mobile-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-link {
  display: block;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.2s ease, color 0.2s ease;
  min-height: 48px;
  display: flex;
  align-items: center;
}

.mobile-link:hover,
.mobile-link:active {
  background: rgba(212, 188, 138, 0.1);
  color: var(--accent-gold, #D4BC8A);
}

.mobile-cta {
  margin-top: 24px;
  padding: 16px 24px;
  text-align: center;
  background: var(--accent-gold, #D4BC8A);
  color: #1A1A1A !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 14px;
  justify-content: center;
}

.mobile-cta:hover {
  background: #E5D4A8;
  color: #1A1A1A !important;
}

/* Backdrop when menu is open */
body.menu-open::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1500;
  pointer-events: auto;
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  background: #0a0a0a;
  padding: 80px 0 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-brand p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  line-height: 1.7;
  margin-top: 16px;
  max-width: 320px;
}

.footer-col h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light, #fff);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col li {
  margin-bottom: 10px;
}

.footer-col a {
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-col a:hover {
  color: var(--accent-gold, #D4BC8A);
}

.footer-bottom {
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-bottom p {
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  margin: 0;
}

.footer-bottom-links {
  display: flex;
  gap: 24px;
}

.footer-bottom-links a {
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-bottom-links a:hover {
  color: var(--accent-gold, #D4BC8A);
}

/* ============================================================
   SKIP TO CONTENT (Accessibility)
   ============================================================ */

.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100000;
  background: #B8904A;
  color: #fff;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid #fff;
  outline-offset: -2px;
}

/* ============================================================
   GRAIN OVERLAY
   ============================================================ */

.grain-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* ============================================================
   TABLET (≤ 768px)
   ============================================================ */

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }

  .nav-cta {
    display: none;
  }

  .nav-toggle {
    display: block;
  }

  .nav-inner {
    height: 64px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .nav-dropdown-item {
    min-height: 48px;
    display: flex;
    align-items: center;
  }
}

/* ============================================================
   MOBILE (≤ 480px)
   ============================================================ */

@media (max-width: 480px) {
  .nav-inner {
    height: 56px;
    gap: 12px;
  }

  .nav-logo-text {
    font-size: 14px;
  }

  .nav-logo-text span {
    font-size: 9px;
  }

  .footer {
    padding: 56px 0 32px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .mobile-menu {
    width: 90%;
    max-width: none;
    padding-top: 72px;
  }
}

/* ============================================================
   DESKTOP ONLY (≥ 769px)
   ============================================================ */

@media (min-width: 769px) {
  .mobile-menu {
    display: none !important;
  }

  .nav-toggle {
    display: none !important;
  }
}

/* ============================================================
   UTILITIES
   Accessibility, focus states, selection, scrollbar, utility classes
   ============================================================ *//* Focus-visible — gold outline for keyboard navigation *//* ============================================================
   UTILITIES
   Accessibility, focus states, selection, scrollbar, utility classes
   ============================================================ */

/* Focus-visible — gold outline for keyboard navigation */
:focus-visible {
  outline: 2px solid #D4BC8A;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Remove default focus ring for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Button focus styles */
button:focus-visible,
.btn:focus-visible,
.nav-cta:focus-visible {
  outline: 2px solid #D4BC8A;
  outline-offset: 3px;
}

/* Card/link focus styles */
.product-card:focus-visible,
.project-card:focus-visible,
.resource-card:focus-visible {
  outline: 2px solid #D4BC8A;
  outline-offset: 4px;
}

/* Reduced motion — respect user preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* High contrast mode support */@media (prefers-contrast: more) {
  body {
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --accent-gold: #e8c97a;
  }
  .btn,
  .nav-cta {
    border-width: 2px;
  }
}
/* Skip link — enhanced visibility */

/* Reduced motion — respect user preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: more) {
  body {
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --accent-gold: #e8c97a;
  }
  .btn,
  .nav-cta {
    border-width: 2px;
  }
}

/* Skip link — enhanced visibility */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100000;
  background: #D4BC8A;
  color: #0a0a0a;
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  transition: top 0.2s ease;
  font-family: 'Inter', sans-serif;
}
.skip-link:focus {
  top: 0;
  outline: 2px solid #fff;
  outline-offset: -2px;
}

/* Lab badge — moved from inline style *//* Form card title (accessibility) */
.form-card-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: #fff;
  margin: 0 0 24px 0;
  line-height: 1.3;
}

/* ============================================================
   ACCESSIBILITY — WCAG 2.1 AA Compliance
   ============================================================ *//* Skip link — visible only on focus */
/* ============================================================
   ACCESSIBILITY — WCAG 2.1 AA Compliance
   ============================================================ */

/* Skip link — visible only on focus */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: #D4BC8A;
  color: #0A0A0A;
  padding: 12px 24px;
  z-index: 10000;
  font-weight: 600;
  font-size: 14px;
  border-radius: 0 0 8px 8px;
  transition: top 0.2s ease;
  text-decoration: none;
}
.skip-link:focus {
  top: 0;
  outline: none;
}

/* Focus visible — keyboard only, gold outline */
:focus-visible {
  outline: 2px solid #D4BC8A;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Remove default focus ring for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Button focus */
.btn:focus-visible,
.nav-cta:focus-visible,
.submit-btn:focus-visible {
  outline: 2px solid #D4BC8A;
  outline-offset: 3px;
}

/* Card focus */
.product-card:focus-visible,
.project-card:focus-visible,
.resource-card:focus-visible {
  outline: 2px solid #D4BC8A;
  outline-offset: 4px;
}

/* Form input focus */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #D4BC8A;
  outline-offset: 2px;
}

/* Nav link focus *//* Text selection — gold on dark */
::selection {
  background: rgba(212, 188, 138, 0.3);
  color: #fff;
}
::-moz-selection {
  background: rgba(212, 188, 138, 0.3);
  color: #fff;
}

/* Custom scrollbar — subtle gold */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #0A0A0A;
}
::-webkit-scrollbar-thumb {
  background: rgba(212, 188, 138, 0.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 188, 138, 0.5);
}

/* Smooth number counter font tabular-nums */
[data-count] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* Card hover lift — premium feel */
.product-card, .project-card, .resource-card, .value-card {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.product-card:hover,
.project-card:hover,
.resource-card:hover {
  transform: translateY(-4px);
}

/* Link underline animation for text links *//* Button press effect */
.btn:active,
.nav-cta:active,
.submit-btn:active {
  transform: scale(0.98);
}

/* Image hover zoom container */
/* ============================================================
   SCROLL REVEAL — Intersection Observer Animations

/* ============================================================
   SCROLL REVEAL — Intersection Observer Animations

/* ============================================================
   ANIMATIONS
   Scroll reveal, stagger children, transition effects
   ============================================================ */

/* ─── Scroll reveal (added by JS via scroll-reveal.js) ─── */
.reveal-element {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-element.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Stagger delays for grid children ─── */
.product-grid .reveal-element:nth-child(1) { transition-delay: 0.05s; }
.product-grid .reveal-element:nth-child(2) { transition-delay: 0.15s; }
.product-grid .reveal-element:nth-child(3) { transition-delay: 0.25s; }
.product-grid .reveal-element:nth-child(4) { transition-delay: 0.35s; }

.projects-grid .reveal-element:nth-child(1) { transition-delay: 0.05s; }
.projects-grid .reveal-element:nth-child(2) { transition-delay: 0.15s; }
.projects-grid .reveal-element:nth-child(3) { transition-delay: 0.25s; }

.home-value-grid .reveal-element:nth-child(1) { transition-delay: 0.05s; }
.home-value-grid .reveal-element:nth-child(2) { transition-delay: 0.15s; }
.home-value-grid .reveal-element:nth-child(3) { transition-delay: 0.25s; }
.home-value-grid .reveal-element:nth-child(4) { transition-delay: 0.35s; }

.gcc-market-grid .reveal-element:nth-child(1) { transition-delay: 0.05s; }
.gcc-market-grid .reveal-element:nth-child(2) { transition-delay: 0.1s; }
.gcc-market-grid .reveal-element:nth-child(3) { transition-delay: 0.15s; }
.gcc-market-grid .reveal-element:nth-child(4) { transition-delay: 0.2s; }
.gcc-market-grid .reveal-element:nth-child(5) { transition-delay: 0.25s; }
.gcc-market-grid .reveal-element:nth-child(6) { transition-delay: 0.3s; }

/* ============================================================
   COMPONENTS
   Reusable UI components (tables, timelines, badges, cards)
   ============================================================ *//* ─── Arabic language switcher states ─── *//* ============================================================
   COMPONENTS
   Reusable UI components (tables, timelines, badges, cards)
   ============================================================ */

/* ─── Arabic language switcher states ─── */
.nav-link--ar {
  font-family: 'Noto Naskh Arabic', 'Scheherazade New', 'Traditional Arabic', serif;
  font-size: 15px;
}

.nav-link--ar.nav-link--ar-partial {
  opacity: 0.65;
  position: relative;
}

.nav-link--ar.nav-link--ar-partial:hover {
  opacity: 1;
}

/* ─── Vision 2030 Mega-Projects Section ─── */
.vision-2030-section {
  padding: 100px 0;
  background: linear-gradient(180deg, #111111 0%, #0a0a0a 100%);
  position: relative;
  overflow: hidden;
}

.vision-2030-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(ellipse at top, rgba(212, 188, 138, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.mega-projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.mega-project-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 32px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mega-project-card:hover {
  border-color: rgba(212, 188, 138, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.mega-project-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #D4BC8A;
  padding: 4px 10px;
  border: 1px solid rgba(212, 188, 138, 0.3);
  border-radius: 4px;
  margin-bottom: 14px;
}

.mega-project-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 12px;
}

.mega-project-card p {
  font-size: 14.5px;
  line-height: 1.7;
  color: #aaa;
  margin-bottom: 18px;
}

.mp-spec-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mp-spec-list li {
  font-size: 13px;
  color: #999;
  padding: 5px 0 5px 18px;
  position: relative;
}

.mp-spec-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #D4BC8A;
  font-weight: 600;
  font-size: 12px;
}

.vision-cta {
  text-align: center;
  margin-top: 56px;
  padding: 36px;
  background: rgba(212, 188, 138, 0.05);
  border: 1px solid rgba(212, 188, 138, 0.15);
  border-radius: 12px;
}

.vision-cta p {
  font-size: 16px;
  color: #ccc;
  margin-bottom: 18px;
}

.vision-cta strong {
  color: #D4BC8A;
  font-weight: 600;
}@media (max-width: 768px) {
  .vision-2030-section { padding: 64px 0; }
  .mega-projects-grid { grid-template-columns: 1fr; gap: 16px; }
  .mega-project-card { padding: 24px; }
  .mega-project-card h3 { font-size: 19px; }
}
/* ─── UAE Luxury Section ─── */

@media (max-width: 768px) {
  .vision-2030-section { padding: 64px 0; }
  .mega-projects-grid { grid-template-columns: 1fr; gap: 16px; }
  .mega-project-card { padding: 24px; }
  .mega-project-card h3 { font-size: 19px; }
}

/* ─── UAE Luxury Section ─── */

.beam-compare {
  margin-top: 40px;
  overflow-x: auto;
}

.beam-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.beam-table th {
  text-align: left;
  padding: 14px 16px;
  background: #f5f5f5;
  font-weight: 600;
  color: #1a1a1a;
  border-bottom: 2px solid #ddd;
}

.beam-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #eee;
  color: #555;
}

.beam-table tr:hover td {
  background: #faf8f4;
}

.beam-table .recommend {
  display: inline-block;
  background: rgba(212, 188, 138, 0.15);
  color: #a08040;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

/* ─── Cross-section / profile comparison (for linear page) ─── */
.profile-compare {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}

.profile-card {
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 24px 20px;
  text-align: center;
}

.profile-card--highlight {
  background: linear-gradient(180deg, #faf6ef 0%, #fafafa 100%);
  border-color: rgba(212, 188, 138, 0.2);
}

.profile-size {
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 22px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.profile-name {
  font-size: 13px;
  color: #888;
  margin-bottom: 12px;
}

.profile-specs {
  font-size: 12px;
  color: #666;
  line-height: 1.7;
}

.profile-specs span {
  display: block;
}@media (max-width: 768px) {
  .profile-compare { grid-template-columns: repeat(2, 1fr); }
}
/* ─── De-AI-fied: break perfect symmetry on about page values ─── */

@media (max-width: 768px) {
  .profile-compare { grid-template-columns: repeat(2, 1fr); }
}

/* ─── De-AI-fied: break perfect symmetry on about page values ─── */

.value-card--wide {
  grid-column: span 2;
}@media (max-width: 768px) {
  .value-card--wide { grid-column: span 1; }
}
/* ─── De-AI-fied: guest journey timeline (hospitality page only) ─── */

@media (max-width: 768px) {
  .value-card--wide { grid-column: span 1; }
}

/* ─── De-AI-fied: guest journey timeline (hospitality page only) ─── */
.journey-timeline {
  position: relative;
  max-width: 720px;
  margin: 40px auto 0;
  padding-left: 80px;
}

.journey-timeline::before {
  content: '';
  position: absolute;
  left: 28px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, #D4BC8A 0%, #e8dcc4 50%, #f0ebe0 100%);
}

.journey-item {
  position: relative;
  margin-bottom: 32px;
  padding-bottom: 8px;
}

.journey-item:last-child { margin-bottom: 0; }

.journey-item::before {
  content: '';
  position: absolute;
  left: -58px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #D4BC8A;
  z-index: 1;
}

.journey-time {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: #D4BC8A;
  font-weight: 500;
  margin-bottom: 4px;
}

.journey-content h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 6px;
}

.journey-content p {
  font-size: 14px;
  line-height: 1.65;
  color: #666;
  margin: 0;
}@media (max-width: 600px) {
  .journey-timeline { padding-left: 56px; }
  .journey-timeline::before { left: 18px; }
  .journey-item::before { left: -42px; }
}
/* ─── De-AI-fied: ROI grid (retail page) ─── */

@media (max-width: 600px) {
  .journey-timeline { padding-left: 56px; }
  .journey-timeline::before { left: 18px; }
  .journey-item::before { left: -42px; }
}

/* ─── De-AI-fied: ROI grid (retail page) ─── */
.roi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.roi-item {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 32px 24px;
  text-align: center;
  transition: all 0.3s ease;
}

.roi-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.06);
}

.roi-item--highlight {
  background: linear-gradient(180deg, #faf6ef 0%, #fff 100%);
  border-color: rgba(212, 188, 138, 0.25);
}

.roi-stat {
  font-family: 'Playfair Display', serif;
  font-size: 42px;
  font-weight: 600;
  color: #D4BC8A;
  line-height: 1;
  margin-bottom: 12px;
}

.roi-item h3 {
  font-size: 17px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.roi-item p {
  font-size: 13px;
  line-height: 1.6;
  color: #777;
  margin: 0;
}@media (max-width: 768px) {
  .roi-grid { grid-template-columns: 1fr; gap: 16px; }
  .roi-item { padding: 24px; }
}
/* ─── De-AI-fied: mistake list (luxury residential page) ─── */

@media (max-width: 768px) {
  .roi-grid { grid-template-columns: 1fr; gap: 16px; }
  .roi-item { padding: 24px; }
}

/* ─── De-AI-fied: mistake list (luxury residential page) ─── */
.mistake-list {
  max-width: 720px;
  margin: 40px auto 0;
}

.mistake-item {
  background: #fff;
  border-left: 4px solid #e8dcc4;
  padding: 24px 28px;
  margin-bottom: 16px;
  border-radius: 0 8px 8px 0;
  transition: all 0.3s ease;
}

.mistake-item:hover {
  border-left-color: #D4BC8A;
  background: #fefdfb;
}

.mistake-item:nth-child(2) {
  border-left-color: #D4BC8A;
}

.mistake-num {
  font-size: 12px;
  font-weight: 600;
  color: #D4BC8A;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.mistake-item h3 {
  font-size: 17px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.mistake-item p {
  font-size: 14px;
  line-height: 1.65;
  color: #666;
  margin: 0;
}

/* ─── De-AI-fied: checklist priority labels (blog articles) ─── */
.checklist-ul {
  list-style: none;
  padding: 0;
}

.checklist-ul li {
  position: relative;
  padding: 8px 0 8px 0;
  border-bottom: 1px solid #f0f0f0;
  padding-left: 68px;
  line-height: 1.5;
}

.checklist-ul li:last-child {
  border-bottom: none;
}

.priority-must,
.priority-should,
.priority-nice {
  position: absolute;
  left: 0;
  top: 8px;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.priority-must {
  background: #fde8e8;
  color: #c53030;
}

.priority-should {
  background: #fef3c7;
  color: #92400e;
}

.priority-nice {
  background: #e0e7ff;
  color: #3730a3;
}

/* ─── De-AI-fied: quick reference card (blog articles) ─── */
.quick-ref-card {
  background: linear-gradient(135deg, #faf6ef 0%, #fff 100%);
  border: 1px solid rgba(212, 188, 138, 0.2);
  border-radius: 12px;
  padding: 24px 28px;
  margin: 0 0 32px 0;
}

.quick-ref-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.quick-ref-table th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  color: #1a1a1a;
  border-bottom: 2px solid #e8dcc4;
  font-size: 13px;
}

.quick-ref-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f0ebe0;
  color: #555;
  vertical-align: top;
}

.quick-ref-table tr:last-child td {
  border-bottom: none;
}

.quick-ref-table td:first-child {
  font-weight: 600;
  color: #a08040;
  width: 60px;
}

.quick-ref-table th:first-child {
  width: 60px;
}@media (max-width: 600px) {
  .quick-ref-card { padding: 16px; overflow-x: auto; }
  .quick-ref-table { font-size: 13px; min-width: 420px; }
}

@media (max-width: 600px) {
  .quick-ref-card { padding: 16px; overflow-x: auto; }
  .quick-ref-table { font-size: 13px; min-width: 420px; }
}

/* ============================================================
   GRIDS
   Reusable grid layouts (pillars, process, resources, GCC, projects, etc.)
   ============================================================ *//* ============================================================
   HOMEPAGE REDESIGN — Light Luxury Editorial
   ============================================================ *//* ============================================================
   GRIDS
   Reusable grid layouts (pillars, process, resources, GCC, projects, etc.)
   ============================================================ */

/* ============================================================
   HOMEPAGE REDESIGN — Light Luxury Editorial
   ============================================================ */

   SPECIFICATION PAGE — Strategic Hub
   ============================================================ */

.spec-hero {
  background: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 100%);
  text-align: center;
}
.spec-hero .hero-content {
  max-width: 760px;
  margin: 0 auto;
}
.spec-hero h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 24px;
  color: #fff;
}
.spec-hero h1 em {
  color: #D4BC8A;
  font-style: italic;
}
.spec-hero .hero-sub {
  font-size: 1.125rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 40px;
}
.hero-cta-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Pillars *//* Process *//* Resources grid *//* GCC grid *//* Projects grid */
.center-cta {
  text-align: center;
  margin-top: 48px;
}

/* Section title center variant */
.section-title.center {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}

.btn-outline {
  display: inline-block;
  padding: 12px 28px;
  border: 1px solid #B89648;
  color: #B89648;
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.2s;
}
.btn-outline:hover {
  background: #B89648;
  color: #fff;
}@media (max-width: 640px) {
  .spec-hero .hero-sub br {
    display: none;
  }
}
/* ============================================
   MOBILE OPTIMIZATIONS (≤480px)
   Touch targets, spacing, typography
   ============================================ */@media (max-width: 480px) {
  .section {
    padding: 60px 0;
  }

  .section-header {
    margin-bottom: 40px;
  }

  .section-title {
    font-size: 1.6rem;
  }

  .section-desc {
    font-size: 14px;
    line-height: 1.7;
  }

/* Value cards — tighter */
.value-grid {
    gap: 24px;
  }

  .value-card {
    padding: 24px 20px;
  }

  .value-card h3 {
    font-size: 18px;
  }

  .value-card p {
    font-size: 13px;
    line-height: 1.6;
  }

/* Buttons — minimum 44px touch target */
.pca-btn,
  .btn-primary,
  .btn-secondary {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
  }

/* CTA final — smaller on mobile */
.cta-final {
    padding: 60px 0;
  }

  .cta-final h2 {
    font-size: 1.8rem;
  }

/* Form inputs — taller for touch */
input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    min-height: 44px;
    font-size: 16px; /* prevents iOS zoom */
  }

  textarea {
    min-height: 100px;
  }

/* Hero — tighter */
.hero-global {
    padding: 80px 0 60px;
    min-height: auto;
  }

/* Nav mobile — taller touch targets *//* Footer — tighter */
}
@media (max-width: 600px) {
  .spec-hero .hero-sub br {
    display: none;
  }
}

/* ============================================
   MOBILE OPTIMIZATIONS (≤480px)
   Touch targets, spacing, typography
   ============================================ */
@media (max-width: 480px) {
  .section {
    padding: 60px 0;
  }

  .section-header {
    margin-bottom: 40px;
  }

  .section-title {
    font-size: 1.6rem;
  }

  .section-desc {
    font-size: 14px;
    line-height: 1.7;
  }

  /* Value cards — tighter */
  .value-grid {
    gap: 24px;
  }

  .value-card {
    padding: 24px 20px;
  }

  .value-card h3 {
    font-size: 18px;
  }

  .value-card p {
    font-size: 13px;
    line-height: 1.6;
  }

  /* Buttons — minimum 44px touch target */
  .pca-btn, .btn-primary, .btn-secondary {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
  }

  /* CTA final — smaller on mobile */
  .cta-final {
    padding: 60px 0;
  }

  .cta-final h2 {
    font-size: 1.8rem;
  }

  /* Form inputs — taller for touch */
  input[type="text"], input[type="email"], input[type="tel"], textarea, select {
    min-height: 44px;
    font-size: 16px; /* prevents iOS zoom */
  }

  textarea {
    min-height: 100px;
  }

  /* Hero — tighter */
  .hero-global {
    padding: 80px 0 60px;
    min-height: auto;
  }

  /* Nav mobile — taller touch targets */
  .nav-dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Footer — tighter */
  .footer-grid {
    gap: 32px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* ============================================
   BLOG INDEX / JOURNAL GRID
   ============================================ */

.page-hero-sub {
  max-width: 640px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
  margin: 20px auto 0 auto;
}

.blog-stats {
  display: flex;
  gap: 48px;
  justify-content: center;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(212, 188, 138, 0.1);
}

.blog-stat {
  text-align: center;
}

.blog-stat-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.4rem;
  font-weight: 400;
  color: #D4BC8A;
  line-height: 1;
  margin-bottom: 6px;
}

.blog-stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ============================================================
   SECTIONS / MISC
   Misc section styles — dividers, pull quotes, nav feature, dark palette
   ============================================================ *//* --- Sections General --- *//* ============================================================
   SECTIONS / MISC
   Misc section styles — dividers, pull quotes, nav feature, dark palette
   ============================================================ */

/* --- Sections General --- */
.section {
  padding: var(--section-padding-y) 0;
}

.section-header {
  text-align: center;
  margin-bottom: var(--section-header-margin);
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold-muted);
  margin-bottom: var(--space-5, 20px);
  font-family: var(--font-sans);
}

.section-title {
  font-size: clamp(1.6rem, 3.5vw, 2.5rem);
  font-weight: 500;
  font-family: var(--font-serif);
  line-height: 1.2;
  color: #1A1A1A;
  margin-bottom: var(--space-5, 20px);
}

.section-title em {
  font-weight: 400;
  font-style: italic;
  color: #9A7E57;
}

.section-desc {
  font-size: 16px;
  line-height: 1.8;
  font-weight: 400;
  color: #444;
  max-width: 600px;
  margin: 0 auto;
}

/* --- Dark Sections --- */
.section-dark {
  background: #111;
  color: rgba(255, 255, 255, 0.8);
}

.section-dark .section-title {
  color: #fff;
}

.section-dark .section-desc {
  color: rgba(255, 255, 255, 0.8);
}

.section-dark .section-label {
  color: #D4BC8A;
}

/* --- Dark Sections Override --- */
body#yakeen-page .section-dark h1,
body#yakeen-page .section-dark h2,
body#yakeen-page .section-dark h3,
body#yakeen-page .section-dark h4,
body#yakeen-page .section-dark h5 {
  color: #fff !important;
}

body#yakeen-page .section-dark .section-title {
  color: #fff !important;
}

body#yakeen-page .section-dark .section-desc {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* --- Footer --- *//* ============================================
   VISUAL QUALITY OVERHAUL
   Unified backgrounds, improved contrast,
   cleaner typography.
   All overrides appended here — no existing
   styles modified above.
   ============================================ *//* --- Unified Dark Background Palette --- *//* Page base: #0F0F0F (deepest) *//* Content sections: #141414 (content bg) *//* Cards & elevated surfaces: #181818 *//* Borders & dividers: rgba(212, 188, 138, 0.1) */
/* --- Footer --- */

/* ============================================
   VISUAL QUALITY OVERHAUL
   Unified backgrounds, improved contrast,
   cleaner typography.
   All overrides appended here — no existing
   styles modified above.
   ============================================ */

/* --- Unified Dark Background Palette --- */
/* Page base: #0F0F0F (deepest) */
/* Content sections: #141414 (content bg) */
/* Cards & elevated surfaces: #181818 */
/* Borders & dividers: rgba(212, 188, 138, 0.1) */

body {
  background: #0F0F0F !important;
}

/* Unify all dark section backgrounds */
.hero-global, .section-dark, .cta-section, .article-hero {
  background: #0F0F0F;
}

/* Card/elevated surfaces */
.feature-card, .market-card, .project-card, .journal-card {
  background: #141414 !important;
}

/* --- Text Contrast Improvements --- *//* Minimum: 0.65 for secondary text, 0.85 for body, 1.0 for headings *//* Was 0.5 — raise to 0.7 (still secondary, but readable) *//* --- Text Contrast Improvements --- */
/* Minimum: 0.65 for secondary text, 0.85 for body, 1.0 for headings */

/* Was 0.5 — raise to 0.7 (still secondary, .section-dark .testimonial-name p, .article-meta, .article-content .spec-metric-label {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Was 0.4 — raise to 0.65 (labels and minor headings) */
.article-toc h4, .blog-stat-label {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* Was 0.35 — raise to 0.55 (meta info / decorative text) */
.journal-meta {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Was 0.3 — placeholder text, raise to 0.5 *//* Was 0.3 — placeholder text {
  color: rgba(255, 255, 255, 0.5) !important;
}/* Dark section text contrast — only applies within dark backgrounds */
.section-dark p, .section-dark li, .section-dark td, .section-dark th, .hero-global p, .hero-global li, .cta-section p, .cta-section li, .article-hero p, .article-hero li {
  color: rgba(255, 255, 255, 0.85);
}

/* --- Hero Overlay Optimization --- *//* Reduce darkness of hero overlay so image shows through better */
/* --- Hero Overlay Optimization --- */
/* Reduce darkness of hero overlay so image shows through better */
.hero-global-bg::after {
  background: linear-gradient(
    135deg,
    rgba(10, 10, 10, 0.75) 0%,
    rgba(10, 10, 10, 0.5) 50%,
    rgba(10, 10, 10, 0.3) 100%
  ) !important;
}

/* Hero title gets a subtle text shadow for readability *//* --- Nav / Backdrop Filter Cleanup --- *//* Reduce blur intensity for cleaner look */
/* --- Nav / Backdrop Filter Cleanup --- */
/* Reduce blur intensity for cleaner look */
.nav--transparent.nav--scrolled {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  background: rgba(15, 15, 15, 0.85) !important;
}

/* Improve border visibility on cards */
.journal-card, .feature-card, .market-card, .project-card {
  border-color: rgba(212, 188, 138, 0.1) !important;
}

/* --- Image Quality --- *//* Use high-quality image scaling (default is auto, which browsers optimize well) */
/* --- Image Quality --- */
/* Use high-quality image scaling (default is auto, which browsers optimize well) */
img {
  image-rendering: auto;
}

/* --- Grain / noise texture overlay --- *//* --- Ambient glow orbs for depth --- *//* --- Section de-PPT: overlapping headers, side anchors --- */
.home-section {
  position: relative;
  overflow: hidden;
}

.home-section .section-header {
  position: relative;
  margin-bottom: 60px;
}

/* Decorative line above section title */
.home-section .section-header::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #B8904A, #D4BC8A);
  margin: 0 auto 24px auto;
  border-radius: 2px;
}

/* Large decorative numbers for editorial feel */
.section-deco-number {
  position: absolute;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(8rem, 15vw, 16rem);
  font-weight: 400;
  color: rgba(184, 144, 74, 0.04);
  line-height: 0.8;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

.section-deco-number.left {
  left: -20px;
  top: -40px;
}

.section-deco-number.right {
  right: -20px;
  bottom: -80px;
}

/* --- Section divider: subtle organic line --- *//* --- Pull quotes / emphasis blocks --- *//* ─── Arabic language switcher states ─── *//* ─── Nav: featured dropdown item (Lighting Lab) ─── *//* ============================================================
   Remaining legacy styles (final rump)
   ============================================================ *//* ============================================================
   LEGACY CORE (remaining)
   Styles that haven't been categorized yet.
   This file should shrink over time as styles are migrated.
   ============================================================ *//* ============================================================
   LEGACY CORE
   Styles that haven't been modularized yet.
   Gradually migrate to specific module files.
   ============================================================ *//* Filter Bar */
/* ============================================================
   Remaining legacy styles (final rump)
   ============================================================ */

/* ============================================================
   LEGACY CORE (remaining)
   Styles that haven't been categorized yet.
   This file should shrink over time as styles are migrated.
   ============================================================ */

/* ============================================================
   LEGACY CORE
   Styles that haven't been modularized yet.
   Gradually migrate to specific module files.
   ============================================================ */
/* Filter Bar */
.blog-filter-bar {
  margin-bottom: 48px;
}

.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.blog-filter-btn {
  background: transparent;
  border: 1px solid rgba(212, 188, 138, 0.2);
  color: rgba(255, 255, 255, 0.6);
  padding: 10px 20px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.02em;
}

.blog-filter-btn:hover {
  border-color: rgba(212, 188, 138, 0.5);
  color: #fff;
}

.blog-filter-btn.is-active {
  background: #D4BC8A;
  border-color: #D4BC8A;
  color: #0F0F0F;
  font-weight: 500;
}

.blog-filter-count {
  opacity: 0.6;
  font-size: 12px;
  margin-left: 4px;
}

.blog-filter-btn.is-active .blog-filter-count {
  opacity: 0.7;
}

/* Journal Grid */
.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.journal-card {
  display: flex;
  flex-direction: column;
  background: #141414;
  border: 1px solid rgba(212, 188, 138, 0.08);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}

.journal-card:hover {
  transform: translateY(-6px);
  border-color: rgba(212, 188, 138, 0.25);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.journal-visual {
  height: 180px;
  background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  position: relative;
  overflow: hidden;
}

.journal-visual::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 188, 138, 0.2), transparent);
}

/* Category-specific visual accents */
.journal-visual--architectural-lighting {
  background: linear-gradient(135deg, #1a1510 0%, #0f0f0f 100%);
}

.journal-visual--specification {
  background: linear-gradient(135deg, #10151a 0%, #0f0f0f 100%);
}

.journal-visual--saudi-gcc {
  background: linear-gradient(135deg, #1a1010 0%, #0f0f0f 100%);
}

.journal-visual--projects {
  background: linear-gradient(135deg, #101a15 0%, #0f0f0f 100%);
}

.journal-visual--engineering {
  background: linear-gradient(135deg, #15101a 0%, #0f0f0f 100%);
}

.journal-icon {
  opacity: 0.9;
  transition: transform 0.4s ease;
}

.journal-card:hover .journal-icon {
  transform: scale(1.1);
}

.journal-category {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #D4BC8A;
  margin-bottom: 12px;
  font-weight: 500;
  padding: 24px 24px 0 24px;
}

.journal-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
  margin: 0 0 12px 0;
  padding: 0 24px;
  transition: color 0.3s ease;
}

/* ============================================================
   ACCESSIBILITY — Focus, Reduced Motion, Screen Reader
   ============================================================ *//* ============================================================
   POLISH — Premium Micro-Interactions & Details
   ============================================================ */
@media (max-width: 500px) {
  .standards-org-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SECTIONS / HERO
   Hero sections — all variants, cinematic depth, floating spec badge
   ============================================================ *//* --- Hero --- *//* ============================================================
   SECTIONS / HERO
   Hero sections — all variants, cinematic depth, floating spec badge
   ============================================================ */

/* --- Hero --- */
.hero-global {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 140px 0 100px 0;
  background: #111;
  overflow: hidden;
}

.hero-global-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../images/hero/hero-golden-lobby-1920.webp');
  background-image: image-set(
    url('../images/hero/hero-golden-lobby-768.webp') type('image/webp') 1x,
    url('../images/hero/hero-golden-lobby-1280.webp') type('image/webp') 1.5x,
    url('../images/hero/hero-golden-lobby-1920.webp') type('image/webp') 2x,
    url('../images/hero-golden-lobby.jpg') type('image/jpeg') 1x
  );
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.hero-global-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(10, 10, 10, 0.85) 0%,
    rgba(10, 10, 10, 0.6) 50%,
    rgba(10, 10, 10, 0.4) 100%
  );
}

.hero-cert-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #D4BC8A;
  display: inline-block;
}

/* --- Hero Overlay Optimization --- */
/* Reduce darkness of hero overlay so image shows through better */
.hero-global-bg::after {
  background: linear-gradient(
    135deg,
    rgba(10, 10, 10, 0.75) 0%,
    rgba(10, 10, 10, 0.5) 50%,
    rgba(10, 10, 10, 0.3) 100%
  ) !important;
}

/* Hero title gets a subtle text shadow for readability *//* --- Home Hero: cinematic depth --- */
.home-hero {
  position: relative;
  overflow: hidden;
}

.home-hero::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse at center, rgba(184, 144, 74, 0.12) 0%, transparent 65%);
  filter: blur(40px);
  z-index: 1;
  pointer-events: none;
}

.home-hero::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -15%;
  width: 50%;
  height: 70%;
  background: radial-gradient(ellipse at center, rgba(100, 80, 60, 0.2) 0%, transparent 60%);
  filter: blur(60px);
  z-index: 1;
  pointer-events: none;
}

.home-hero-inner {
  position: relative;
  z-index: 2;
  padding-top: 120px;
  padding-bottom: 80px;
}

/* Hero stats: break out of grid, float */
.home-hero-stats {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  position: relative;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(212, 188, 138, 0.15);
}

.home-hero-stats::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, #B8904A, transparent);
}

/* --- Floating spec badge (hero accent) --- */
.spec-badge-float {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: rgba(184, 144, 74, 0.1);
  border: 1px solid rgba(184, 144, 74, 0.25);
  border-radius: 100px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #D4BC8A;
  backdrop-filter: blur(10px);
}

.spec-badge-float .dot {
  width: 6px;
  height: 6px;
  background: #D4BC8A;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(212, 188, 138, 0.6);
  animation: pulse-dot 2s ease-in-out infinite;
}@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.3); }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.3); }
}

/* ============================================================
   SECTIONS / FEATURES
   Feature sections — value cards, capabilities, at a glance, quick answers, resources
   ============================================================ *//* --- Value Cards (Editorial Style — No Cards) --- *//* ============================================================
   SECTIONS / FEATURES
   Feature sections — value cards, capabilities, at a glance, quick answers, resources
   ============================================================ */

/* --- Value Cards (Editorial Style — No Cards) --- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}

.value-card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  transition: none;
}

.value-card::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: #D4BC8A;
  margin-bottom: 24px;
}

.section-dark .value-card::before {
  background: #9A7E57;
}

.value-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: #1A1A1A;
  margin-bottom: 14px;
  line-height: 1.3;
}

.section-dark .value-card h3 {
  color: #fff;
}

.value-card p {
  color: #666;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 300;
}

.section-dark .value-card p {
  color: rgba(255, 255, 255, 0.6);
}

.value-card:hover {
  transform: none;
  box-shadow: none;
}

/* ─── De-AI-fied: break perfect symmetry on home value grid ─── */
.hv-item--wide {
  grid-column: span 2;
  background: linear-gradient(135deg, rgba(212, 188, 138, 0.06) 0%, rgba(212, 188, 138, 0.02) 100%);
  border-color: rgba(212, 188, 138, 0.15);
}

.hv-item--wide h3 {
  font-size: 20px;
}

.hv-item--wide p {
  font-size: 15px;
  max-width: 520px;
}@media (max-width: 768px) {
  .hv-item--wide { grid-column: span 1; }
}
/* ─── De-AI-fied: featured market card breaks symmetry ─── */

@media (max-width: 768px) {
  .hv-item--wide { grid-column: span 1; }
}

/* ─── De-AI-fied: featured market card breaks symmetry ─── */
.hm-card--featured {
  grid-row: span 2;
  background: linear-gradient(145deg, rgba(212, 188, 138, 0.1) 0%, rgba(212, 188, 138, 0.03) 100%);
  border-color: rgba(212, 188, 138, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hm-card--featured h3 {
  font-size: 26px;
  font-family: 'Playfair Display', serif;
  color: #D4BC8A;
}

.hm-card--featured p {
  font-size: 15px;
  margin-top: 8px;
}@media (max-width: 768px) {
  .hm-card--featured { grid-row: span 1; }
  .hm-card--featured h3 { font-size: 20px; }
}
/* ─── Strategic upgrade: capabilities grid (spec + engineering) ─── */

@media (max-width: 768px) {
  .hm-card--featured { grid-row: span 1; }
  .hm-card--featured h3 { font-size: 20px; }
}

/* ─── Strategic upgrade: capabilities grid (spec + engineering) ─── */
.capabilities-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 960px;
  margin: 40px auto 0;
}

.cap-card {
  display: flex;
  gap: 24px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 32px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.cap-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #D4BC8A, #c9a96e);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.cap-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.06);
  border-color: #ddd;
}

.cap-card:hover::before {
  transform: scaleX(1);
}

.cap-card--spec:hover { box-shadow: 0 16px 40px rgba(212, 188, 138, 0.12); }
.cap-card--eng:hover { box-shadow: 0 16px 40px rgba(100, 100, 100, 0.1); }

.cap-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #faf6ef 0%, #f5ede0 100%);
  border-radius: 10px;
  color: #a08040;
}

.cap-icon svg {
  width: 24px;
  height: 24px;
}

.cap-content {
  flex: 1;
}

.cap-content h3 {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 8px 0;
}

.cap-content p {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  margin: 0 0 12px 0;
}

.cap-link {
  font-size: 13px;
  font-weight: 500;
  color: #a08040;
  display: inline-block;
  transition: transform 0.2s ease;
}

.cap-card:hover .cap-link {
  transform: translateX(4px);
}@media (max-width: 768px) {
  .capabilities-grid { grid-template-columns: 1fr; gap: 16px; }
  .cap-card { padding: 24px; flex-direction: column; gap: 16px; }
  .cap-icon { width: 40px; height: 40px; }
  .cap-icon svg { width: 20px; height: 20px; }
}
/* ─── At a Glance (homepage entity summary for AI search) ─── */

@media (max-width: 768px) {
  .capabilities-grid { grid-template-columns: 1fr; gap: 16px; }
  .cap-card { padding: 24px; flex-direction: column; gap: 16px; }
  .cap-icon { width: 40px; height: 40px; }
  .cap-icon svg { width: 20px; height: 20px; }
}

/* ─── At a Glance (homepage entity summary for AI search) ─── */
.glance-section {
  padding: 80px 0;
  background: #faf8f3;
  border-bottom: 1px solid #ece6d8;
}

.glance-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.glance-header {
  text-align: center;
  margin-bottom: 40px;
}

.glance-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #a08040;
  border: 1px solid rgba(160, 128, 64, 0.3);
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 16px;
}

.glance-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 12px 0;
  line-height: 1.2;
}

.glance-header p {
  font-size: 15px;
  color: #777;
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
}

.glance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.glance-card {
  background: #fff;
  border-radius: 10px;
  padding: 24px;
  border: 1px solid #e8e2d5;
  transition: all 0.3s ease;
}

.glance-card:hover {
  border-color: #D4BC8A;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}

.glance-icon {
  font-size: 24px;
  margin-bottom: 12px;
}

.glance-card h3 {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 8px 0;
}

.glance-card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: #666;
  margin: 0;
}@media (max-width: 900px) {
  .glance-grid { grid-template-columns: repeat(2, 1fr); }
  .glance-section { padding: 60px 0; }
  .glance-header h2 { font-size: 26px; }
}
@media (max-width: 560px) {
  .glance-grid { grid-template-columns: 1fr; }
}
/* ─── Quick Answers / QA Grid (market pages, AI-optimized) ─── */

@media (max-width: 900px) {
  .glance-grid { grid-template-columns: repeat(2, 1fr); }
  .glance-section { padding: 60px 0; }
  .glance-header h2 { font-size: 26px; }
}

@media (max-width: 560px) {
  .glance-grid { grid-template-columns: 1fr; }
}

/* ─── Quick Answers / QA Grid (market pages, AI-optimized) ─── */
.ksa-quick-answers {
  padding: 80px 0;
  background: #fff;
}

.qa-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.qa-item {
  background: #faf7f0;
  border-radius: 10px;
  padding: 24px 28px;
  border-left: 3px solid #D4BC8A;
}

.qa-item h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 10px 0;
  line-height: 1.4;
}

.qa-item p {
  font-size: 14px;
  line-height: 1.65;
  color: #555;
  margin: 0;
}@media (max-width: 768px) {
  .qa-grid { grid-template-columns: 1fr; gap: 12px; }
  .ksa-quick-answers { padding: 60px 0; }
}
/* ─── Resource Library (specification page) ─── */

@media (max-width: 768px) {
  .qa-grid { grid-template-columns: 1fr; gap: 12px; }
  .ksa-quick-answers { padding: 60px 0; }
}

/* ─── Resource Library (specification page) ─── */
.resource-library-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}

.res-lib-card {
  background: #fff;
  border-radius: 10px;
  padding: 24px;
  border: 1px solid #e8e2d5;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.res-lib-card:hover {
  border-color: #D4BC8A;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}

.res-lib-icon {
  font-size: 28px;
  margin-bottom: 12px;
}

.res-lib-card h3 {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 8px 0;
}

.res-lib-card p {
  font-size: 13px;
  line-height: 1.6;
  color: #666;
  margin: 0 0 16px 0;
  flex: 1;
}

.res-lib-cta a {
  font-size: 13px;
  font-weight: 500;
  color: #a08040;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.res-lib-cta a:hover {
  border-bottom-color: #D4BC8A;
}@media (max-width: 800px) {
  .resource-library-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .resource-library-grid { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  .resource-library-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 500px) {
  .resource-library-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SECTIONS / PRODUCTS
   Product sections — cards, bento, deep dive, beam tables, engineering
   ============================================================ *//* --- Product Cards --- *//* ============================================================
   SECTIONS / PRODUCTS
   Product sections — cards, bento, deep dive, beam tables, engineering
   ============================================================ */

/* --- Product Cards --- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.product-card {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 3/4;
  transition: transform 0.4s ease;
}

.product-card:hover {
  transform: translateY(-4px);
}

.product-card-img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}

.product-card:hover .product-card-img {
  transform: scale(1.05);
}

.product-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.9) 0%,
    rgba(10, 10, 10, 0.4) 50%,
    rgba(10, 10, 10, 0.1) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px 24px;
}

body#yakeen-page .product-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: #fff !important;
  margin-bottom: 8px;
  line-height: 1.2;
}

.product-card p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  font-weight: 300;
  margin-bottom: 16px;
}

.product-card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.product-card:hover .product-card-actions {
  opacity: 1;
  transform: translateY(0);
}

.pca-btn {
  display: inline-block;
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: all 0.2s ease;
  font-family: 'Inter', sans-serif;
}

.pca-view {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.pca-view:hover {
  background: rgba(255, 255, 255, 0.25);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1A1A1A;
  border-bottom: 1px solid #1A1A1A;
  padding-bottom: 4px;
  text-decoration: none;
  transition: all 0.25s ease;
  font-family: 'Inter', sans-serif;
}

.btn-outline:hover {
  color: #9A7E57;
  border-color: #9A7E57;
}

/* --- Products section: asymmetric bento instead of 3-col grid --- */
.products-bento {
  display: grid !important;
  grid-template-columns: 1.2fr 0.8fr 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 16px !important;
}

.products-bento .hp-card:first-child {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  min-height: 420px;
  flex-direction: column;
  justify-content: flex-end;
  padding: 36px 32px;
  background: linear-gradient(145deg, #1a1714 0%, #0d0b09 100%);
  border: 1px solid rgba(184, 144, 74, 0.15);
  position: relative;
  overflow: hidden;
}

.products-bento .hp-card:first-child::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at top right, rgba(184, 144, 74, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

.products-bento .hp-card:first-child .hp-card-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 24px;
  color: #B8904A;
}

.products-bento .hp-card:first-child h3 {
  font-size: 1.6rem;
  margin-bottom: 12px;
}

.products-bento .hp-card:first-child p {
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.products-bento .hp-card:nth-child(2) {
  grid-column: 2 / 4;
  grid-row: 1 / 2;
  aspect-ratio: 2.5 / 1;
  min-height: auto;
  padding: 28px 28px;
  background: linear-gradient(135deg, #141110 0%, #0f0d0b 100%);
  border: 1px solid rgba(184, 144, 74, 0.1);
}

.products-bento .hp-card:nth-child(2) .hp-card-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
}

.products-bento .hp-card:nth-child(2) h3 {
  font-size: 1.2rem;
  margin-bottom: 6px;
}

.products-bento .hp-card:nth-child(2) p {
  font-size: 0.85rem;
  margin-bottom: 0;
  max-width: 80%;
}

.products-bento .hp-card:nth-child(3),
.products-bento .hp-card:nth-child(4) {
  grid-row: 2 / 3;
  aspect-ratio: 1 / 1;
  min-height: auto;
  padding: 24px 20px;
}

.products-bento .hp-card:nth-child(3) {
  grid-column: 2 / 3;
}

.products-bento .hp-card:nth-child(4) {
  grid-column: 3 / 4;
  background: linear-gradient(145deg, rgba(184, 144, 74, 0.08) 0%, transparent 60%);
  border: 1px solid rgba(184, 144, 74, 0.2);
}

/* Light text on dark bento cards */
.products-bento .hp-card:first-child h3,
.products-bento .hp-card:nth-child(2) h3 {
  color: #F5EFE0;
}

.products-bento .hp-card:first-child p,
.products-bento .hp-card:nth-child(2) p {
  color: rgba(245, 239, 224, 0.7);
}

.products-bento .hp-card:first-child .hp-card-link,
.products-bento .hp-card:nth-child(2) .hp-card-link {
  color: #D4BC8A;
}

/* Cards 3 & 4: keep light bg, dark text (inherit from base .hp-card) */
.products-bento .hp-card:nth-child(3) {
  background: #FAF9F6;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.products-bento .hp-card:nth-child(3):hover,
.products-bento .hp-card:nth-child(4):hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.products-bento .hp-card:first-child:hover,
.products-bento .hp-card:nth-child(2):hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 50px rgba(184, 144, 74, 0.15);
  border-color: rgba(184, 144, 74, 0.4);
}@media (max-width: 768px) {
  .products-bento {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 12px !important;
  }

  .products-bento .hp-card:first-child {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    min-height: 200px;
    aspect-ratio: 2 / 1;
    padding: 24px 20px;
  }

  .products-bento .hp-card:first-child .hp-card-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
  }

  .products-bento .hp-card:first-child h3 {
    font-size: 1.2rem;
  }

  .products-bento .hp-card:nth-child(2) {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    aspect-ratio: auto;
    min-height: 120px;
  }

  .products-bento .hp-card:nth-child(3),
  .products-bento .hp-card:nth-child(4) {
    grid-row: 3 / 4;
    aspect-ratio: auto;
    min-height: 140px;
  }

  .products-bento .hp-card:nth-child(3) {
    grid-column: 1 / 2;
  }

  .products-bento .hp-card:nth-child(4) {
    grid-column: 2 / 3;
  }
}
/* ─── De-AI-fied: selector steps (unique per product page) ─── */

@media (max-width: 768px) {
  .products-bento {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 12px !important;
  }

  .products-bento .hp-card:first-child {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    min-height: 200px;
    aspect-ratio: 2 / 1;
    padding: 24px 20px;
  }

  .products-bento .hp-card:first-child .hp-card-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
  }

  .products-bento .hp-card:first-child h3 {
    font-size: 1.2rem;
  }

  .products-bento .hp-card:nth-child(2) {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    aspect-ratio: auto;
    min-height: 120px;
  }

  .products-bento .hp-card:nth-child(3),
  .products-bento .hp-card:nth-child(4) {
    grid-row: 3 / 4;
    aspect-ratio: auto;
    min-height: 140px;
  }

  .products-bento .hp-card:nth-child(3) {
    grid-column: 1 / 2;
  }

  .products-bento .hp-card:nth-child(4) {
    grid-column: 2 / 3;
  }
}

/* ─── De-AI-fied: selector steps (unique per product page) ─── */
.selector-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.selector-step {
  background: #fafafa;
  border: 1px solid #eee;
  padding: 32px 28px;
  border-radius: 8px;
  position: relative;
}

.selector-step:nth-child(2) {
  background: linear-gradient(180deg, #faf6ef 0%, #fafafa 100%);
  border-color: rgba(212, 188, 138, 0.2);
}

.selector-num {
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  color: #D4BC8A;
  opacity: 0.4;
  line-height: 1;
  margin-bottom: 12px;
}

.selector-step h3 {
  font-size: 17px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 10px;
}

.selector-step p {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  margin: 0;
}

.selector-step strong {
  color: #1a1a1a;
  font-weight: 600;
}@media (max-width: 768px) {
  .selector-steps { grid-template-columns: 1fr; gap: 16px; }
  .selector-step { padding: 24px; }
}
/* ─── Beam comparison table (for track page) ─── *//* ─── Engineering Deep Dive sections (product pages) ─── */

@media (max-width: 768px) {
  .selector-steps { grid-template-columns: 1fr; gap: 16px; }
  .selector-step { padding: 24px; }
}

/* ─── Beam comparison table (for track page) ─── */

/* ─── Engineering Deep Dive sections (product pages) ─── */

.deep-dive-section {
  background: linear-gradient(180deg, #1a1a1a 0%, #222 100%);
  color: #fff;
  padding: 80px 0;
}

.deep-dive-section .section-title {
  color: #fff;
  text-align: center;
  max-width: 680px;
  margin: 0 auto 16px;
  font-size: 32px;
}

.deep-dive-section .section-title em {
  color: #D4BC8A;
}

.deep-dive-label {
  text-align: center;
  margin-bottom: 20px;
}

.deep-dive-label span {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #D4BC8A;
  border: 1px solid rgba(212, 188, 138, 0.3);
  padding: 6px 16px;
  border-radius: 20px;
}

.deep-dive-lead {
  text-align: center;
  font-size: 16px;
  line-height: 1.7;
  color: #aaa;
  max-width: 600px;
  margin: 0 auto 40px;
}

.deep-dive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}

.deep-dive-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 28px 24px;
  position: relative;
}

.deep-dive-item:nth-child(2) {
  background: rgba(212, 188, 138, 0.08);
  border-color: rgba(212, 188, 138, 0.2);
}

.deep-dive-num {
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  color: #D4BC8A;
  opacity: 0.5;
  line-height: 1;
  margin-bottom: 12px;
}

.deep-dive-item h3 {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 10px;
}

.deep-dive-item p {
  font-size: 14px;
  line-height: 1.65;
  color: #bbb;
  margin: 0;
}

.deep-dive-bottom {
  text-align: center;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.deep-dive-bottom p {
  font-size: 15px;
  line-height: 1.7;
  color: #ccc;
  max-width: 680px;
  margin: 0 auto;
}

.deep-dive-bottom strong {
  color: #D4BC8A;
  font-weight: 600;
}@media (max-width: 900px) {
  .deep-dive-grid { grid-template-columns: 1fr; gap: 16px; }
  .deep-dive-section { padding: 60px 0; }
  .deep-dive-section .section-title { font-size: 26px; }
}
/* ─── Engineering Notes (project pages) ─── */

@media (max-width: 900px) {
  .deep-dive-grid { grid-template-columns: 1fr; gap: 16px; }
  .deep-dive-section { padding: 60px 0; }
  .deep-dive-section .section-title { font-size: 26px; }
}

@media (max-width: 768px) {
  .profile-compare { grid-template-columns: repeat(2, 1fr); }
}

/* ─── De-AI-fied: break perfect symmetry on about page values ─── */

.value-card--wide {
  grid-column: span 2;
}

@media (max-width: 768px) {
  .value-card--wide { grid-column: span 1; }
}
/* ─── De-AI-fied: guest journey timeline (hospitality page only) ─── */

@media (max-width: 768px) {
  .value-card--wide { grid-column: span 1; }
}

/* ─── De-AI-fied: guest journey timeline (hospitality page only) ─── */
.journey-timeline {
  position: relative;
  max-width: 720px;
  margin: 40px auto 0;
  padding-left: 80px;
}

.journey-timeline::before {
  content: '';
  position: absolute;
  left: 28px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, #D4BC8A 0%, #e8dcc4 50%, #f0ebe0 100%);
}

.journey-item {
  position: relative;
  margin-bottom: 32px;
  padding-bottom: 8px;
}

.journey-item:last-child { margin-bottom: 0; }

.journey-item::before {
  content: '';
  position: absolute;
  left: -58px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #D4BC8A;
  z-index: 1;
}

.journey-time {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: #D4BC8A;
  font-weight: 500;
  margin-bottom: 4px;
}

.journey-content h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 6px;

}

/* ============================================================
   SECTIONS / PROJECTS
   Project sections — expertise grid, editorial layout, preview
   ============================================================ *//* --- Project Expertise --- *//* ============================================================
   SECTIONS / PROJECTS
   Project sections — expertise grid, editorial layout, preview
   ============================================================ */

/* --- Project Expertise --- */
.section-light {
  background: #fff;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
}

.project-card {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  transition: none;
}

.project-card:hover {
  transform: none;
  box-shadow: none;
}

.project-card:hover .project-img {
  transform: scale(1.02);
}

.project-card:hover .project-overlay {
  opacity: 1;
  transform: translateY(0);
}

.project-info {
  padding: 0;
}

.project-location {
  color: #9A7E57;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
  font-family: 'Inter', sans-serif;
}

.project-info h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  color: #1A1A1A;
  margin-bottom: 10px;
  line-height: 1.3;
}

/* --- Projects preview: editorial large + small layout --- */
.projects-editorial {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
  align-items: stretch;
}

.projects-editorial .hproj-card.featured-project {
  grid-column: 1 / 2;
  min-height: 480px;
}

.projects-editorial .hproj-card.featured-project .hproj-image {
  height: 100%;
  min-height: 480px;
  aspect-ratio: auto;
}

.projects-editorial .hproj-card.featured-project .hproj-info {
  padding: 28px 32px;
}

.projects-editorial .hproj-card.featured-project h3 {
  font-size: 1.6rem;
}

.projects-editorial .side-projects {
  grid-column: 2 / 3;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.projects-editorial .side-projects .hproj-card {
  flex: 1;
  min-height: 230px;
}

.projects-editorial .side-projects .hproj-image {
  min-height: 150px;
  aspect-ratio: auto;
}@media (max-width: 900px) {
  .projects-editorial {
    grid-template-columns: 1fr;
  }

  .projects-editorial .hproj-card.featured-project {
    grid-column: 1;
    min-height: 320px;
  }

  .projects-editorial .hproj-card.featured-project .hproj-image {
    min-height: 320px;
    aspect-ratio: auto;
  }

  .projects-editorial .side-projects {
    grid-column: 1;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .projects-editorial .side-projects .hproj-card {
    flex: 1 1 calc(50% - 10px);
    min-height: 200px;
  }

  .projects-editorial .side-projects .hproj-image {
    min-height: 130px;
    aspect-ratio: auto;
  }
}
@media (max-width: 480px) {
  .projects-editorial .side-projects .hproj-card {
    flex: 1 1 100%;
  }
}

@media (max-width: 900px) {
  .projects-editorial {
    grid-template-columns: 1fr;
  }

  .projects-editorial .hproj-card.featured-project {
    grid-column: 1;
    min-height: 320px;
  }

  .projects-editorial .hproj-card.featured-project .hproj-image {
    min-height: 320px;
    aspect-ratio: auto;
  }

  .projects-editorial .side-projects {
    grid-column: 1;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .projects-editorial .side-projects .hproj-card {
    flex: 1 1 calc(50% - 10px);
    min-height: 200px;
  }

  .projects-editorial .side-projects .hproj-image {
    min-height: 130px;
    aspect-ratio: auto;
  }
}

@media (max-width: 480px) {
  .projects-editorial .side-projects .hproj-card {
    flex: 1 1 100%;
  }
}

/* ============================================================
   SECTIONS / MARKETS
   Market sections — grids, Vision 2030, UAE, Qatar, KSA hub, small GCC
   ============================================================ *//* --- Markets Grid --- *//* ============================================================
   SECTIONS / MARKETS
   Market sections — grids, Vision 2030, UAE, Qatar, KSA hub {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

/* --- Markets: staggered row instead of uniform grid --- */
.home-markets-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: flex-start;
}

.hm-card {
  flex: 1 1 calc(33.333% - 16px);
  min-width: 200px;
  transition: all 0.3s ease;
}

.hm-card:nth-child(2) {
  transform: translateY(24px);
}

.hm-card:nth-child(4) {
  transform: translateY(16px);
}

.hm-card:nth-child(6) {
  transform: translateY(28px);
}

.hm-card:hover {
  transform: translateY(-4px) scale(1.02) !important;
}@media (max-width: 768px) {
  .hm-card:nth-child(n) {
    transform: none;
    flex: 1 1 calc(50% - 8px);
    min-width: 140px;
  }
}
@media (max-width: 480px) {
  .hm-card:nth-child(n) {
    flex: 1 1 100%;
  }
}
/* ─── Arabic language switcher states ─── *//* ─── UAE Luxury Section ─── */

@media (max-width: 768px) {
  .hm-card:nth-child(n) {
    transform: none;
    flex: 1 1 calc(50% - 8px);
    min-width: 140px;
  }
}

@media (max-width: 480px) {
  .hm-card:nth-child(n) {
    flex: 1 1 100%;
  }
}

/* ─── Arabic language switcher states ─── */

/* ─── UAE Luxury Section ─── */
.uae-luxury-section {
  padding: 100px 0;
  background: linear-gradient(180deg, #faf8f5 0%, #f5f1ea 100%);
  position: relative;
}

.luxury-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.luxury-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  padding: 32px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.luxury-card:hover {
  border-color: rgba(212, 188, 138, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}

.luxury-icon {
  font-size: 32px;
  margin-bottom: 14px;
}

.luxury-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 500;
  color: #1a1a1a;
  margin-bottom: 12px;
}

.luxury-card p {
  font-size: 14.5px;
  line-height: 1.7;
  color: #555;
  margin-bottom: 16px;
}

.luxury-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.luxury-features li {
  font-size: 13px;
  color: #666;
  padding: 4px 0 4px 18px;
  position: relative;
}

.luxury-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #D4BC8A;
  font-weight: 600;
  font-size: 12px;
}

/* ─── Qatar Boom Section ─── */
.qatar-boom-section {
  padding: 100px 0;
  background: linear-gradient(180deg, #0e1117 0%, #0a0c10 100%);
  position: relative;
  overflow: hidden;
}

.qatar-boom-section::before {
  content: '';
  position: absolute;
  top: 20%;
  right: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(155, 116, 63, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.boom-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.boom-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 32px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.boom-card:hover {
  border-color: rgba(155, 116, 63, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.boom-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #b5894f;
  padding: 4px 10px;
  border: 1px solid rgba(155, 116, 63, 0.3);
  border-radius: 4px;
  margin-bottom: 14px;
}

.boom-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 12px;
}

.boom-card p {
  font-size: 14.5px;
  line-height: 1.7;
  color: #aaa;
  margin-bottom: 18px;
}

.boom-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.boom-features li {
  font-size: 13px;
  color: #999;
  padding: 5px 0 5px 18px;
  position: relative;
}

.boom-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #b5894f;
  font-weight: 600;
  font-size: 12px;
}

.boom-cta {
  text-align: center;
  margin-top: 56px;
  padding: 36px;
  background: rgba(155, 116, 63, 0.05);
  border: 1px solid rgba(155, 116, 63, 0.15);
  border-radius: 12px;
}

.boom-cta p {
  font-size: 16px;
  color: #ccc;
  margin-bottom: 18px;
}

.boom-cta strong {
  color: #b5894f;
  font-weight: 600;
}@media (max-width: 768px) {
  .uae-luxury-section,
  .qatar-boom-section { padding: 64px 0; }

  .luxury-grid,
  .boom-grid { grid-template-columns: 1fr; gap: 16px; }

  .luxury-card,
  .boom-card { padding: 24px; }

  .luxury-card h3,
  .boom-card h3 { font-size: 19px; }
}
/* ─── Smaller GCC market unique sections (Kuwait / Bahrain / Oman) ─── */

@media (max-width: 768px) {
  .uae-luxury-section,
  .qatar-boom-section { padding: 64px 0; }

  .luxury-grid,
  .boom-grid { grid-template-columns: 1fr; gap: 16px; }

  .luxury-card,
  .boom-card { padding: 24px; }

  .luxury-card h3,
  .boom-card h3 { font-size: 19px; }
}

/* ─── Smaller GCC market unique sections (Kuwait / Bahrain / Oman) ─── */
.kuwait-residence-grid,
.bahrain-finance-grid,
.oman-heritage-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.residence-card,
.finance-card,
.heritage-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  padding: 26px;
  transition: all 0.3s ease;
}

.residence-card:hover,
.finance-card:hover,
.heritage-card:hover {
  border-color: rgba(212, 188, 138, 0.3);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.residence-card h3,
.finance-card h3,
.heritage-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  font-weight: 500;
  color: #1a1a1a;
  margin-bottom: 10px;
}

.residence-card p,
.finance-card p,
.heritage-card p {
  font-size: 14px;
  line-height: 1.7;
  color: #666;
}@media (max-width: 768px) {
  .kuwait-residence-grid,
  .bahrain-finance-grid,
  .oman-heritage-grid { grid-template-columns: 1fr; gap: 14px; }
  .residence-card,
  .finance-card,
  .heritage-card { padding: 20px; }
}
/* ─── KSA Knowledge Hub (Saudi market page) ─── */

@media (max-width: 768px) {
  .kuwait-residence-grid,
  .bahrain-finance-grid,
  .oman-heritage-grid { grid-template-columns: 1fr; gap: 14px; }
  .residence-card,
  .finance-card,
  .heritage-card { padding: 20px; }
}

/* ─── KSA Knowledge Hub (Saudi market page) ─── */
.ksa-knowledge-hub {
  padding: 80px 0;
  background: #fff;
}

.knowledge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.knowledge-card {
  display: block;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

.knowledge-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.06);
  border-color: #ddd;
  background: #fff;
}

.knowledge-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #a08040;
  background: rgba(212, 188, 138, 0.1);
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.knowledge-card h4 {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.knowledge-card p {
  font-size: 13px;
  line-height: 1.6;
  color: #777;
  margin: 0 0 12px 0;
}

.knowledge-link {
  font-size: 13px;
  font-weight: 500;
  color: #a08040;
  display: inline-block;
  transition: transform 0.2s ease;
}

.knowledge-card:hover .knowledge-link {
  transform: translateX(4px);
}@media (max-width: 900px) {
  .knowledge-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .knowledge-grid { grid-template-columns: 1fr; }
  .ksa-knowledge-hub { padding: 60px 0; }
}

@media (max-width: 900px) {
  .knowledge-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .knowledge-grid { grid-template-columns: 1fr; }
  .ksa-knowledge-hub { padding: 60px 0; }
}

/* ============================================================
   SECTIONS / ABOUT
   About page — team, stats, why GCC, testimonials, standards
   ============================================================ *//* --- About Section --- *//* ============================================================
   SECTIONS / ABOUT
   About page — team, stats, why GCC, testimonials {
  background: #FAF9F7;
}

.about-right .section-label {
  margin-bottom: 20px;
  text-align: left;
  display: inline-flex;
}

.about-right .section-title {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin-bottom: 28px;
  text-align: left;
}

/* ─── Team Grid (about page) ─── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.team-card {
  background: #fff;
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
  border: 1px solid #e8e4dc;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}

.team-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2A2520, #3d3630);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.team-initials {
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1px;
}

.team-card h3 {
  font-size: 17px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 4px 0;
}

.team-role {
  font-size: 13px;
  color: #a08040;
  font-weight: 500;
  margin-bottom: 12px;
}

.team-card p {
  font-size: 13px;
  line-height: 1.6;
  color: #666;
  margin: 0 0 12px 0;
  text-align: left;
}

.team-contact a {
  font-size: 12px;
  color: #2A2520;
  text-decoration: none;
  border-bottom: 1px solid #D4BC8A;
  padding-bottom: 1px;
}

.team-contact a:hover {
  color: #a08040;
}

/* ─── Team Roles (capability cards) ─── */
.team-roles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}

.team-role-card {
  background: #fff;
  border: 1px solid #e8e2d5;
  border-radius: 10px;
  padding: 24px 20px;
  text-align: center;
  transition: all 0.3s ease;
}

.team-role-card:hover {
  border-color: #D4BC8A;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.tr-icon {
  font-size: 28px;
  margin-bottom: 12px;
}

.team-role-card h4 {
  font-size: 15px;
  font-weight: 600;
  color: #2A2520;
  margin: 0 0 8px;
}

.team-role-card p {
  font-size: 12.5px;
  line-height: 1.6;
  color: #777;
  margin: 0;
}@media (max-width: 900px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .team-roles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .team-grid { grid-template-columns: 1fr; }
}
/* ─── Stats Grid (about page numbers) ─── */

@media (max-width: 900px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .team-roles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 500px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* ─── Stats Grid (about page numbers) ─── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.stat-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
}

.stat-big {
  font-family: 'Playfair Display', serif;
  font-size: 42px;
  font-weight: 700;
  color: #D4BC8A;
  line-height: 1;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
}

.stat-note {
  font-size: 13px;
  line-height: 1.5;
  color: #999;
}@media (max-width: 700px) {
  .stats-grid { grid-template-columns: 1fr; gap: 12px; }
  .stat-big { font-size: 36px; }
}
/* ─── Testimonials (social proof) ─── */

@media (max-width: 700px) {
  .stats-grid { grid-template-columns: 1fr; gap: 12px; }
  .stat-big { font-size: 36px; }
}

/* ─── Testimonials (social proof) ─── */

.testimonial-section {
  padding: 80px 0;
  background: #141210;
  color: #fff;
}

.testimonial-section .eyebrow { color: #D4BC8A; }

.testimonial-section h2 { color: #fff; }

.testimonial-section .section-lead { color: #aaa; }

/* Client Logos *//* ─── Why GCC (trust reasons grid) ─── */
.why-gcc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1100px;
  margin: 40px auto 0;
}

.wgcc-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 28px 24px;
  transition: all 0.3s ease;
}

.wgcc-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(212,188,138,0.3);
  transform: translateY(-2px);
}

.wgcc-icon {
  font-size: 32px;
  margin-bottom: 16px;
}

.wgcc-card h3 {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.wgcc-card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.65);
  margin: 0;
}

.wgcc-card--wide {
  grid-column: span 4;
  text-align: center;
  background: linear-gradient(135deg, rgba(212,188,138,0.1), rgba(255,255,255,0.02));
  border-color: rgba(212,188,138,0.25);
}

.wgcc-card--wide p {
  max-width: 600px;
  margin: 0 auto;
}
/* ─── Standards & Affiliations (Lighting Lab page) ─── */

@media (max-width: 900px) {
  .testimonial-section { padding: 60px 0; }
  .why-gcc-grid { grid-template-columns: 1fr; }
  .wgcc-card--wide { grid-column: span 1; }
}

/* ─── Standards & Affiliations (Lighting Lab page) ─── */

/* ============================================================
   SECTIONS / CTA
   CTA sections — final CTA, forms, newsletter
   ============================================================ */

/* --- CTA Section --- */
.cta-final {
  background: #111;
  padding: 120px 0;
}

.cta-final-content {
  text-align: center;
}

.cta-desc {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 300;
  margin-bottom: 28px;
}

/* --- Full-width button --- */
.btn-full {
  width: 100%;
  display: block;
  padding: 16px;
  background: #D4BC8A;
  color: #1A1A1A;
  border: none;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Inter', sans-serif;
  margin-top: 8px;
}

.btn-full:hover {
  background: #E5D4A8;
  transform: translateY(-2px);
}

/* ============================================================
   QUOTE / INQUIRY FORM
   ============================================================ */

.quote-section {
  padding: 100px 0;
  background: var(--bg-dark, #111);
}

.quote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.quote-info h2 {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 20px;
  color: var(--text-light, #fff);
}

.quote-info p {
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.7;
  margin-bottom: 32px;
}

.quote-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}

.quote-benefits li {
  padding: 10px 0;
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.quote-benefits li::before {
  content: '✓';
  color: var(--accent-gold, #D4BC8A);
  font-weight: 700;
  flex-shrink: 0;
}

.quote-form-card {
  background: var(--bg-darker, #0a0a0a);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 40px;
}

.form-card-title {
  font-size: 1.5rem;
  margin: 0 0 24px;
  color: var(--text-light, #fff);
}

/* Form groups — stacked label+input */
.form-group {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.form-label .req {
  color: #e74c3c;
  margin-left: 2px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  color: var(--text-light, #fff);
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s ease, background 0.2s ease;
  box-sizing: border-box;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--accent-gold, #D4BC8A);
  background: rgba(255, 255, 255, 0.08);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23999' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}

/* Form row for side-by-side fields on desktop */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Form submit note */
.form-note {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  margin-top: 16px;
}

/* ============================================================
   TABLET RESPONSIVE (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
  .quote-section {
    padding: 70px 0;
  }

  .quote-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .quote-info h2 {
    font-size: 2rem;
  }

  .quote-form-card {
    padding: 32px 24px;
  }

  .form-card-title {
    font-size: 1.3rem;
  }
}

/* ============================================================
   MOBILE RESPONSIVE (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
  .quote-section {
    padding: 50px 0;
  }

  .quote-grid {
    gap: 32px;
  }

  .quote-info h2 {
    font-size: 1.6rem;
  }

  .quote-form-card {
    padding: 24px 20px;
    border-radius: 6px;
  }

  .form-card-title {
    font-size: 1.2rem;
    margin-bottom: 20px;
  }

  .form-group {
    margin-bottom: 16px;
    gap: 6px;
  }

  .form-label {
    font-size: 12px;
  }

  .form-input,
  .form-select,
  .form-textarea {
    padding: 14px 16px;
    font-size: 16px; /* prevents iOS zoom */
    min-height: 48px; /* larger touch target */
  }

  .form-textarea {
    min-height: 140px;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .btn-full {
    padding: 16px;
    font-size: 14px;
    min-height: 52px;
  }

  .form-note {
    font-size: 12px;
    line-height: 1.6;
  }
}

/* ============================================================
   VERY SMALL SCREENS (≤ 360px)
   ============================================================ */
@media (max-width: 360px) {
  .quote-form-card {
    padding: 20px 16px;
  }

  .quote-info h2 {
    font-size: 1.4rem;
  }
}

/* ============================================================
   PAGES/BLOG
   Blog / article page layout (content grid, info boxes, TOC, etc.)
   ============================================================ */

/* ============================================================
   SAUDI CONTENT CLUSTER — Supporting Pages
   ============================================================ */

/* Content grid (2-col: main + side) */
.content-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 60px;
  align-items: start;
}

.content-main h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: #1A1A1A;
  margin: 32px 0 16px 0;
}
.content-main h3:first-child {
  margin-top: 0;
}

.content-main p {
  font-size: 1rem;
  line-height: 1.75;
  color: #444;
  margin-bottom: 16px;
}

.content-main ul,
.content-main ol {
  margin: 0 0 20px 0;
  padding-left: 24px;
}
.content-main li {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #444;
  margin-bottom: 8px;
}

/* Info boxes (sidebar) */
.info-box {
  background: #fff;
  padding: 28px 24px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 100px;
}
.info-box h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.0625rem;
  font-weight: 500;
  color: #1A1A1A;
  margin: 0 0 16px 0;
}
.info-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.info-box li {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #555;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.info-box li:last-child {
  border-bottom: none;
}

.info-box-warn {
  border-color: rgba(184, 150, 72, 0.3);
  background: #FDFBF5;
}
.info-box-warn h4 {
  color: #B89648;
}

.highlight-box {
  background: #FDFBF5;
  border-left: 3px solid #B89648;
  padding: 20px 24px;
  margin: 24px 0;
  border-radius: 0 8px 8px 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #444;
}

.side-cta-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #B89648;
  text-decoration: none;
}

/* SASO TOC */
.saso-toc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.saso-toc-item {
  display: block;
  background: #fff;
  padding: 28px 24px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}
.saso-toc-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: rgba(184, 150, 72, 0.3);
}

.stoc-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  color: #B89648;
  margin-bottom: 12px;
}

.saso-toc-item h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.0625rem;
  font-weight: 500;
  color: #1A1A1A;
  margin: 0 0 8px 0;
}

.saso-toc-item p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #777;
  margin: 0;
}

/* Requirements grid */
.req-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.req-card {
  background: #fff;
  padding: 32px 28px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}
.req-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.req-icon {
  font-size: 2rem;
  margin-bottom: 20px;
}

.req-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.125rem;
  font-weight: 500;
  color: #1A1A1A;
  margin: 0 0 12px 0;
}

.req-card p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #555;
  margin: 0;
}

/* Process steps */
.process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.process-step {
  background: #FAF9F6;
  padding: 32px 28px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  position: relative;
}

.ps-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #D4BC8A;
  color: #1A1A1A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.process-step h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.125rem;
  font-weight: 500;
  color: #1A1A1A;
  margin: 0 0 12px 0;
}

.process-step p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #555;
  margin: 0 0 12px 0;
}

.ps-note {
  font-size: 0.8125rem !important;
  color: #B89648 !important;
  font-weight: 500;
  margin-bottom: 0 !important;
}

/* Timeline & cost cards */
.timeline-cost-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.tc-card {
  background: #fff;
  padding: 36px 32px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.tc-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.125rem;
  font-weight: 500;
  color: #1A1A1A;
  margin: 0 0 16px 0;
}

.tc-big {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.25rem;
  font-weight: 400;
  color: #B89648;
  margin-bottom: 16px;
  line-height: 1;
}

.tc-card p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #555;
  margin: 0 0 20px 0;
}

.tc-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tc-card li {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #555;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.tc-card li:last-child {
  border-bottom: none;
}

.tc-featured {
  border-color: #B89648;
  background: #FDFBF5;
  transform: scale(1.02);
  box-shadow: 0 12px 40px rgba(184, 150, 72, 0.15);
}

/* Pitfalls grid */
.pitfall-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.pitfall-item {
  background: #fff;
  padding: 32px 28px;
  border-radius: 12px;
  border-left: 3px solid #B89648;
}

.pitfall-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  color: #B89648;
  margin-bottom: 16px;
}

.pitfall-item h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.0625rem;
  font-weight: 500;
  color: #1A1A1A;
  margin: 0 0 12px 0;
}

.pitfall-item p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #555;
  margin: 0;
}

/* Advantage grid */
.advantage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.adv-item {
  text-align: center;
  padding: 0 16px;
}

.adv-item h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.0625rem;
  font-weight: 500;
  color: #1A1A1A;
  margin: 0 0 12px 0;
}

.adv-item p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #555;
  margin: 0;
}

/* Related cards */
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.related-card {
  display: block;
  background: #fff;
  padding: 32px 28px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}
.related-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: rgba(184, 150, 72, 0.3);
}

.related-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.0625rem;
  font-weight: 500;
  color: #1A1A1A;
  margin: 0 0 12px 0;
}

.related-card p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #666;
  margin: 0 0 20px 0;
}

.related-card span {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #B89648;
}

/* City projects */
.city-projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}

.city-proj-card {
  display: block;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}
.city-proj-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
}

.cp-img {
  height: 220px;
  background-size: cover;
  background-position: center;
  background-color: #E8E4DC;
}

.cp-info {
  padding: 28px;
}

.cp-tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #B89648;
  margin-bottom: 12px;
}

.cp-info h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.125rem;
  font-weight: 500;
  color: #1A1A1A;
  margin: 0 0 10px 0;
}

.cp-info p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #666;
  margin: 0 0 16px 0;
}

.cp-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cp-specs span {
  font-size: 0.6875rem;
  padding: 4px 10px;
  background: #F5F1E8;
  color: #9A7E57;
  border-radius: 20px;
  font-weight: 500;
}

/* Service grid */
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.svc-item {
  background: #fff;
  padding: 32px 28px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.svc-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  color: #B89648;
  margin-bottom: 20px;
}

.svc-item h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.0625rem;
  font-weight: 500;
  color: #1A1A1A;
  margin: 0 0 12px 0;
}

.svc-item p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #555;
  margin: 0 0 20px 0;
}

.svc-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: #B89648;
  text-decoration: none;
}

/* Sector grid */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.sector-card {
  background: #FAF9F6;
  padding: 32px 28px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.sector-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.125rem;
  font-weight: 500;
  color: #1A1A1A;
  margin: 0 0 16px 0;
}

.sector-card p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #555;
  margin: 0 0 16px 0;
}

.sector-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sector-card li {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #666;
  padding: 6px 0;
  padding-left: 16px;
  position: relative;
}
.sector-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #B89648;
}

/* Metrics grid */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.metric-card {
  background: #fff;
  padding: 36px 32px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  text-align: center;
}

.metric-value {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.75rem;
  font-weight: 400;
  color: #B89648;
  margin-bottom: 16px;
}

.metric-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.0625rem;
  font-weight: 500;
  color: #1A1A1A;
  margin: 0 0 12px 0;
}

.metric-card p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #555;
  margin: 0;
}

/* Product types grid */
.product-types-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 48px;
}

.pt-item {
  background: #fff;
  padding: 36px 32px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.pt-item h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: #1A1A1A;
  margin: 0 0 12px 0;
}

.pt-item p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #555;
  margin: 0 0 16px 0;
}

.pt-item ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}
.pt-item li {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #555;
  padding: 6px 0;
  padding-left: 16px;
  position: relative;
}
.pt-item li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #B89648;
}

.pt-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: #B89648;
  text-decoration: none;
}

/* Compare grid */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.compare-card {
  background: #fff;
  padding: 32px 28px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.compare-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.125rem;
  font-weight: 500;
  color: #1A1A1A;
  margin: 0 0 8px 0;
}

.compare-sub {
  font-size: 0.875rem;
  color: #888;
  margin: 0 0 20px 0 !important;
}

.compare-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.compare-card li {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #555;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.compare-card li:last-child {
  border-bottom: none;
}

.compare-featured {
  border-color: #B89648;
  background: #FDFBF5;
  transform: scale(1.03);
  box-shadow: 0 12px 40px rgba(184, 150, 72, 0.12);
}

/* Mistakes grid */
.mistakes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.mistake-item {
  background: #fff;
  padding: 32px 28px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.mistake-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  color: #B89648;
  margin-bottom: 16px;
}

.mistake-item h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.0625rem;
  font-weight: 500;
  color: #1A1A1A;
  margin: 0 0 12px 0;
}

.mistake-item p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #555;
  margin: 0;
}

/* Help grid */
.help-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.help-item {
  text-align: center;
  padding: 0 16px;
}

.help-item h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.0625rem;
  font-weight: 500;
  color: #1A1A1A;
  margin: 0 0 12px 0;
}

.help-item p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #555;
  margin: 0;
}

/* Resources grid (Saudi hub) */
.resources-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.resource-card {
  display: block;
  background: #fff;
  padding: 32px 28px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}
.resource-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  border-color: rgba(184, 150, 72, 0.2);
}

.resource-type {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #B89648;
  margin-bottom: 16px;
}

.resource-card h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.125rem;
  font-weight: 500;
  color: #1A1A1A;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.resource-card p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #666;
  margin: 0 0 20px 0;
}

.resource-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: #B89648;
}

/* Advantage card link (Saudi page) */
.adv-card-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #B89648;
  text-decoration: none;
}

/* Responsive for cluster pages */
@media (max-width: 1024px) {
  .content-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .info-box {
    position: static;
  }
  .saso-toc,
  .req-grid,
  .process-steps,
  .timeline-cost-grid,
  .pitfall-grid,
  .metrics-grid,
  .compare-grid,
  .mistakes-grid,
  .city-projects-grid,
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .advantage-grid,
  .service-grid,
  .sector-grid,
  .help-grid,
  .resources-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .product-types-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .saso-toc,
  .req-grid,
  .process-steps,
  .timeline-cost-grid,
  .pitfall-grid,
  .metrics-grid,
  .compare-grid,
  .mistakes-grid,
  .city-projects-grid,
  .related-grid {
    grid-template-columns: 1fr;
  }
  .advantage-grid,
  .service-grid,
  .sector-grid,
  .help-grid,
  .resources-grid {
    grid-template-columns: 1fr;
  }
  .tc-featured {
    transform: none;
  }
}

/* ============================================================
   THEMES/LIGHT
   Light theme page overrides (for light-nav pages)
   ============================================================ *//* --- Base light page --- *//* ============================================================
   THEMES/LIGHT
   Light theme page overrides (for light-nav pages)
   ============================================================ */

/* --- Base light page --- */
body {
  background: #FAF9F6;
  color: #1A1A1A;
}

/* --- Light nav override --- */
.nav.nav--light {
  background: #FAF9F6;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.nav.nav--light .nav-logo {
  color: #1A1A1A;
}
.nav.nav--light .nav-links a {
  color: #333;
}
.nav.nav--light .nav-links a:hover {
  color: #B89648;
}

/* --- Hero --- */
.home-hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #0A0A0A;
}

.home-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../images/hero/hero-golden-lobby-1920.webp');
  background-image: image-set(
    url('../images/hero/hero-golden-lobby-768.webp') type('image/webp') 1x,
    url('../images/hero/hero-golden-lobby-1280.webp') type('image/webp') 1.5x,
    url('../images/hero/hero-golden-lobby-1920.webp') type('image/webp') 2x,
    url('../images/hero-golden-lobby.jpg') type('image/jpeg') 1x
  );
  background-size: cover;
  background-position: center;
}

.home-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(10, 10, 10, 0.75) 0%,
    rgba(10, 10, 10, 0.45) 50%,
    rgba(10, 10, 10, 0.2) 100%
  );
}

.home-hero-inner {
  position: relative;
  z-index: 2;
  padding-top: 120px;
  padding-bottom: 80px;
}

.home-hero-copy {
  max-width: 680px;
  color: #fff;
}

.home-hero-eyebrow {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #D4BC8A;
  margin-bottom: 24px;
  font-family: 'Inter', sans-serif;
}

.home-hero-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.5rem, 5.5vw, 4.25rem);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 28px;
  color: #fff;
}
.home-hero-title em {
  font-style: italic;
  color: #D4BC8A;
  font-weight: 400;
}

.home-hero-desc {
  font-size: 1.125rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 40px;
  max-width: 560px;
  font-weight: 400;
}

.home-hero-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

.home-hero-stats {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}

.hhs-item .hhs-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2rem;
  font-weight: 400;
  color: #D4BC8A;
  line-height: 1;
  margin-bottom: 8px;
}

.hhs-item .hhs-label {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.04em;
}

.home-hero-scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.hhs-line {
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.3);
  margin: 12px auto 0;
  position: relative;
  overflow: hidden;
}
.hhs-line::after {
  content: '';
  position: absolute;
  top: -40px;
  left: 0;
  width: 100%;
  height: 40px;
  background: #D4BC8A;
  animation: scrollLine 2s ease-in-out infinite;
}@keyframes scrollLine {
  0% { top: -40px; }
  100% { top: 40px; }
}
/* --- Home Sections (light) --- */
@keyframes scrollLine {
  0% { top: -40px; }
  100% { top: 40px; }
}

/* --- Home Sections (light) --- */
.home-section {
  padding: 100px 0;
  background: #FAF9F6;
}
.home-section--alt {
  background: #F2EFE9;
}

.home-section-head {
  text-align: center;
  margin-bottom: 64px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.home-section-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #9A7E57;
  margin-bottom: 20px;
}
.home-section-label span {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  color: #B89648;
  font-weight: 400;
}

.home-section-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 400;
  line-height: 1.2;
  color: #1A1A1A;
  margin: 0;
}
.home-section-title em {
  font-style: italic;
  color: #B89648;
}

.home-section-more {
  text-align: center;
  margin-top: 48px;
}

/* --- Product Cards --- */
.home-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.hp-card {
  display: block;
  background: #fff;
  padding: 40px 32px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}
.hp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  border-color: rgba(184, 150, 72, 0.3);
}

.hp-card-icon {
  width: 48px;
  height: 48px;
  color: #B89648;
  margin-bottom: 24px;
}
.hp-card-icon svg {
  width: 100%;
  height: 100%;
}

.hp-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: #1A1A1A;
  margin: 0 0 12px 0;
}

.hp-card p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: #555;
  margin: 0 0 20px 0;
}

.hp-card-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: #B89648;
  letter-spacing: 0.02em;
}

/* --- Project Cards --- */
.home-projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.hproj-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}
.hproj-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
}

.hproj-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #E8E4DC;
}
.hproj-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.hproj-card:hover .hproj-image img {
  transform: scale(1.05);
}

.hproj-info {
  padding: 28px;
}

.hproj-tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #B89648;
  margin-bottom: 12px;
}

.hproj-info h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: #1A1A1A;
  margin: 0 0 8px 0;
}

.hproj-location {
  font-size: 0.875rem;
  color: #888;
  margin: 0;
}

/* --- Value Props --- */
.home-value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.hv-item {
  padding: 0;
}

.hv-item h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: #1A1A1A;
  margin: 0 0 12px 0;
}

.hv-item p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #555;
  margin: 0 0 16px 0;
}

.hv-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: #B89648;
  text-decoration: none;
}

/* --- Markets --- */
.home-markets-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.hm-card {
  display: block;
  padding: 32px 28px;
  background: #fff;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}
.hm-card:hover {
  border-color: rgba(184, 150, 72, 0.4);
  background: #FDFCF9;
  transform: translateY(-2px);
}

.hm-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.125rem;
  font-weight: 500;
  color: #1A1A1A;
  margin: 0 0 8px 0;
}

.hm-card p {
  font-size: 0.8125rem;
  color: #777;
  margin: 0;
  line-height: 1.6;
}

/* --- CTA Section --- */
.home-cta {
  padding: 100px 0;
  background: #1A1A1A;
  color: #fff;
}

.home-cta-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.home-cta-left .home-section-label {
  color: rgba(212, 188, 138, 0.7);
}
.home-cta-left .home-section-label span {
  color: #D4BC8A;
}

.home-cta-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 400;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 24px 0;
}
.home-cta-title em {
  font-style: italic;
  color: #D4BC8A;
}

.home-cta-desc {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 32px;
}

.home-cta-contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hct-email,
.hct-wa {
  color: #D4BC8A;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  transition: opacity 0.2s;
}
.hct-email:hover,
.hct-wa:hover {
  opacity: 0.8;
}

/* --- CTA Form --- */
.home-cta-form {
  background: #262626;
  padding: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.hcf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.hcf-field {
  margin-bottom: 16px;
}

.hcf-row .hcf-field {
  margin-bottom: 0;
}

.hcf-field label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.hcf-field input,
.hcf-field select,
.hcf-field textarea {
  width: 100%;
  padding: 12px 16px;
  background: #1A1A1A;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #fff;
  font-size: 0.9375rem;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.hcf-field input:focus,
.hcf-field select:focus,
.hcf-field textarea:focus {
  outline: none;
  border-color: #D4BC8A;
}

.hcf-field textarea {
  resize: vertical;
  min-height: 100px;
}

.hcf-field select {
  cursor: pointer;
}

.hcf-note {
  text-align: center;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 16px 0 0 0;
}

/* --- Button variants for light theme --- */
.btn-light {
  background: #fff;
  color: #1A1A1A;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.btn-light:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: #fff;
  color: #1A1A1A;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .home-value-grid,
  .home-markets-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .home-projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .home-cta-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}
@media (max-width: 768px) {
  .home-hero {
    min-height: 80vh;
  }
  .home-hero-inner {
    padding-top: 100px;
  }
  .home-hero-desc br {
    display: none;
  }
  .home-hero-stats {
    gap: 32px;
  }
  .hhs-item .hhs-num {
    font-size: 1.5rem;
  }
  .home-section {
    padding: 72px 0;
  }
  .home-section-head {
    margin-bottom: 48px;
  }
  .home-value-grid,
  .home-markets-grid,
  .home-projects-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .hp-card {
    padding: 32px 24px;
  }
  .hcf-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .home-cta-form {
    padding: 28px 24px;
  }
  .home-cta {
    padding: 72px 0;
  }
}
/* ============================================================

/* --- Responsive --- */
@media (max-width: 1024px) {
  .home-value-grid,
  .home-markets-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .home-projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .home-cta-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

@media (max-width: 768px) {
  .home-hero {
    min-height: 80vh;
  }
  .home-hero-inner {
    padding-top: 100px;
  }
  .home-hero-desc br {
    display: none;
  }
  .home-hero-stats {
    gap: 32px;
  }
  .hhs-item .hhs-num {
    font-size: 1.5rem;
  }
  .home-section {
    padding: 72px 0;
  }
  .home-section-head {
    margin-bottom: 48px;
  }
  .home-value-grid,
  .home-markets-grid,
  .home-projects-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .hp-card {
    padding: 32px 24px;
  }
  .hcf-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .home-cta-form {
    padding: 28px 24px;
  }
  .home-cta {
    padding: 72px 0;
  }
}

/* ============================================================

/* ============================================================
   RESPONSIVE
   Cross-component responsive overrides + mobile readability boost
   (Component-specific responsive styles live in their own CSS files)
   ============================================================ */

/* ============================================================
   IMAGE OPTIMIZATION
   ============================================================ */

/* Lazy load fade-in */
img {
  transition: opacity 0.4s ease;
}

img.lazy:not(.loaded) {
  opacity: 0.4;
  filter: blur(4px);
}

img.lazy.loaded {
  opacity: 1;
  filter: blur(0);
}

/* ============================================================
   TABLET (≤ 1024px)
   ============================================================ */

@media (max-width: 1024px) {
  .journal-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .blog-stats {
    gap: 32px;
  }
}

/* ============================================================
   TABLET / SMALL (≤ 768px)
   Mobile readability boost + layout adjustments
   ============================================================ */

@media (max-width: 768px) {
  /* --- Base typography --- */
  body {
    font-size: 15px;
    line-height: 1.65;
  }

  p {
    font-size: 15px;
    line-height: 1.65;
  }

  /* --- Dark section text contrast boost --- */
  .section-dark p,
  .section-dark li,
  .dark-section p,
  .dark-section li {
    color: rgba(255, 255, 255, 0.85) !important;
  }

  /* --- Eyebrow / small labels --- */
  .eyebrow {
    font-size: 12px !important;
    letter-spacing: 0.1em !important;
  }

  /* --- Card descriptions --- */
  .card p,
  .feature-card p,
  .value-card p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* --- Product / project cards --- */
  .product-card p,
  .project-card p {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.8) !important;
  }

  .product-card h3,
  .project-card h3 {
    font-size: 18px !important;
  }

  /* --- Hero subtitle shadow for mobile (photo backgrounds) --- */
  .hero-subtitle {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5) !important;
    color: rgba(255, 255, 255, 0.95) !important;
  }

  /* --- Image sharpness --- */
  img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }

  /* --- CTA buttons: bigger tap targets --- */
  .btn-primary,
  .btn-secondary {
    min-height: 48px;
    font-size: 15px !important;
    padding: 14px 28px !important;
  }

  /* --- Spec page --- */
  .spec-hero .hero-sub {
    font-size: 15px !important;
  }

  /* --- Blog / article body --- */
  .article-body p,
  .article-body li {
    font-size: 16px !important;
    line-height: 1.75 !important;
  }

  .article-body h2 {
    font-size: 1.5rem !important;
  }

  .article-body h3 {
    font-size: 1.25rem !important;
  }

  /* --- Section titles --- */
  .section-title {
    font-size: 1.75rem !important;
  }

  /* --- Stack hero buttons vertically --- */
  .hero-cta-row {
    flex-direction: column;
    width: 100%;
  }

  .hero-cta-row a {
    width: 100%;
    text-align: center;
  }
}

/* ============================================================
   SMALL MOBILE (≤ 640px)
   ============================================================ */

@media (max-width: 640px) {
  .journal-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .blog-stats {
    gap: 24px;
    flex-wrap: wrap;
  }

  .blog-stat-num {
    font-size: 1.8rem;
  }

  .blog-filters {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .blog-filter-btn {
    flex-shrink: 0;
    padding: 8px 16px;
    font-size: 12px;
  }
}

/* ============================================================
   EXTRA SMALL MOBILE (≤ 480px)
   ============================================================ */

@media (max-width: 480px) {
  .section-title {
    font-size: 1.5rem !important;
  }
}

/* ============================================================
   STANDARDS / ORGS GRID
   ============================================================ */

.standards-org-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}

.std-org-card {
  background: #fff;
  border-radius: 10px;
  padding: 24px;
  border: 1px solid #e8e2d5;
  transition: all 0.3s ease;
}

.std-org-card:hover {
  border-color: #D4BC8A;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.std-org-name {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 700;
  color: #a08040;
  line-height: 1;
  margin-bottom: 4px;
}

.std-org-full {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #999;
  margin-bottom: 12px;
}

.std-org-card p {
  font-size: 13px;
  line-height: 1.6;
  color: #555;
  margin: 0;
}

@media (max-width: 800px) {
  .standards-org-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .standards-org-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ============================================
   Widget: AI Assistant
   ============================================ *//* --- AI Assistant Floating Button --- *//* ============================================
   Widget: AI Assistant
   ============================================ */

/* --- AI Assistant Floating Button --- */
.ai-float-btn {
  position: fixed;
  bottom: 96px;
  right: 24px;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #B8904A, #D4BC8A);
  color: #1a1714;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 998;
  box-shadow: 0 4px 20px rgba(184, 144, 74, 0.4);
  transition: all 0.3s ease;
  font-size: 24px;
  font-weight: 600;
}

.ai-float-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(184, 144, 74, 0.5);
}

.ai-float-btn:focus-visible {
  outline: 3px solid #B8904A;
  outline-offset: 3px;
}

.ai-float-btn svg {
  width: 26px;
  height: 26px;
}

/* AI Assistant Panel */
.ai-panel {
  position: fixed;
  bottom: 168px;
  right: 24px;
  width: 420px;
  max-height: calc(100vh - 200px);
  background: linear-gradient(135deg, #1a1714 0%, #2a2520 50%, #1a1714 100%);
  border: 1px solid rgba(184, 144, 74, 0.25);
  border-radius: 16px;
  z-index: 997;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.95);
  transform-origin: bottom right;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.ai-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.ai-panel-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(184, 144, 74, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.ai-panel-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #B8904A, #D4BC8A);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ai-panel-avatar svg {
  width: 20px;
  height: 20px;
  color: #1a1714;
}

.ai-panel-title h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 500;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}

.ai-panel-title p {
  font-size: 0.75rem;
  color: #8a7e6d;
  margin: 2px 0 0;
}

.ai-panel-close {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255, 255, 255, 0.05);
  color: #8a7e6d;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.ai-panel-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.ai-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.ai-panel-body::-webkit-scrollbar {
  width: 6px;
}

.ai-panel-body::-webkit-scrollbar-track {
  background: transparent;
}

.ai-panel-body::-webkit-scrollbar-thumb {
  background: rgba(184, 144, 74, 0.3);
  border-radius: 3px;
}

/* AI widget inside panel */
.ai-panel-body .ai-assistant {
  background: transparent;
  border: none;
  border-radius: 0;
}

.ai-panel-body .ai-assistant::before {
  display: none;
}

.ai-panel-body .ai-assistant-header {
  display: none;
}

/* Panel-optimized AI assistant content (420px wide panel) */
.ai-panel-body .ai-assistant-body {
  padding: 0;
  min-height: auto;
}

.ai-panel-body .ai-steps {
  margin-bottom: 16px;
}

.ai-panel-body .ai-step-label {
  font-size: 0.7rem;
}

.ai-panel-body .ai-question-text {
  font-size: 1.25rem;
  margin-bottom: 12px;
}

.ai-panel-body .ai-question-desc {
  font-size: 0.8rem;
  margin-bottom: 16px;
}

.ai-panel-body .ai-options {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ai-panel-body .ai-option {
  padding: 14px 12px;
}

.ai-panel-body .ai-option-icon {
  font-size: 1.5rem;
  margin-bottom: 6px;
}

.ai-panel-body .ai-option-title {
  font-size: 0.8rem;
}

.ai-panel-body .ai-option-desc {
  font-size: 0.7rem;
}

.ai-panel-body .ai-tag {
  padding: 6px 14px;
  font-size: 0.8rem;
}

.ai-panel-body .ai-nav {
  margin-top: 20px;
}

.ai-panel-body .ai-product-card {
  padding: 16px;
  flex-direction: column;
  gap: 12px;
}

.ai-panel-body .ai-product-icon {
  font-size: 2rem;
}

.ai-panel-body .ai-product-name {
  font-size: 1rem;
}

.ai-panel-body .ai-primary-product {
  padding: 20px;
}

.ai-panel-body .ai-primary-name {
  font-size: 1.4rem;
}

.ai-panel-body .ai-spec-text {
  font-size: 0.78rem;
}

/* Mobile: AI panel */
@media (max-width: 768px) {
  .ai-float-btn {
    bottom: 88px;
    right: 16px;
    width: 52px;
    height: 52px;
  }

  .ai-float-btn svg {
    width: 22px;
    height: 22px;
  }

  .ai-panel {
    bottom: 152px;
    right: 16px;
    left: 16px;
    width: auto;
    max-height: calc(100vh - 180px);
    border-radius: 14px;
  }

  .ai-panel-header {
    padding: 16px 20px 12px;
  }

  .ai-panel-body {
    padding: 16px 20px;
  }
}
@media (max-width: 480px) {
  .ai-panel {
    bottom: 140px;
    right: 12px;
    left: 12px;
    max-height: calc(100vh - 170px);
  }

  .ai-panel-header {
    padding: 14px 16px 10px;
  }

  .ai-panel-body {
    padding: 14px 16px;
  }
}
/* Reduced motion preference */@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* High contrast mode support */@media (prefers-contrast: more) {
  :root {
    --color-gold-primary: #E8D5A8;
    --color-gold-muted: #D4BC8A;
    --color-border: rgba(255, 255, 255, 0.3);
  }
}
/* Screen reader only */

/* Mobile: AI panel */
@media (max-width: 768px) {
  .ai-float-btn {
    bottom: 88px;
    right: 16px;
    width: 52px;
    height: 52px;
  }

  .ai-float-btn svg {
    width: 22px;
    height: 22px;
  }

  .ai-panel {
    bottom: 152px;
    right: 16px;
    left: 16px;
    width: auto;
    max-height: calc(100vh - 180px);
    border-radius: 14px;
  }

  .ai-panel-header {
    padding: 16px 20px 12px;
  }

  .ai-panel-body {
    padding: 16px 20px;
  }
}

@media (max-width: 480px) {
  .ai-panel {
    bottom: 140px;
    right: 12px;
    left: 12px;
    max-height: calc(100vh - 170px);
  }

  .ai-panel-header {
    padding: 14px 16px 10px;
  }

  .ai-panel-body {
    padding: 14px 16px;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: more) {
  :root {
    --color-gold-primary: #E8D5A8;
    --color-gold-muted: #D4BC8A;
    --color-border: rgba(255, 255, 255, 0.3);
  }
}

/* Focus visible for nav dropdown */