/* ============================================
   Camellos Group — style.css
   Monochrome editorial. Restraint is the design.
   ============================================ */

:root {
  --black: #0A0A0A;
  --white: #FFFFFF;
  --off-white: #F7F7F5;
  --gray-100: #EBEBEB;
  --gray-200: #D4D4D4;
  --gray-400: #9A9A9A;
  --gray-600: #6B6B6B;
  --gray-800: #2A2A2A;
  --gold: #C9A84C;
  --gold-dark: #A8893D;
  --font-heading: 'DM Serif Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --max-width: 1200px;
  --header-h: 64px;
}

/* ----- Reset ----- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul { list-style: none; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ----- Skip Link ----- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--gold);
  color: var(--black);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  z-index: 1000;
}

.skip-link:focus { top: 0; }

/* ----- Container ----- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.narrow {
  max-width: 720px;
  margin: 0 auto;
}

/* ============================================
   Header
   ============================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  background: #FFFFFF;
  z-index: 900;
  transition: border-color 0.3s ease, background 0.3s ease;
  border-bottom: 1px solid transparent;
}

.site-header.scrolled {
  border-bottom-color: var(--gray-100);
}

.header-inner {
  display: flex;
  align-items: center;
  height: 100%;
}

.logo-link {
  margin-right: auto;
}

.logo {
  height: 32px;
  width: auto;
}

.logo-wordmark {
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--black);
  transition: color 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.logo-wordmark::after {
  content: '';
  display: inline-block;
  width: 1.4em;
  height: 1.1em;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cpath d='M38 24L34 20L28 18L24 20L20 24L18 28L16 30L14 30L12 28L14 32L18 34L22 36L26 42L30 50L34 58L38 66L42 74L44 82L44 88L42 96L40 108L38 120L36 132L34 142L32 150L34 152L38 152L40 150L40 142L42 132L44 120L46 108L48 96L50 92L52 96L54 108L56 120L56 132L56 142L56 150L58 152L62 152L64 150L62 142L62 130L62 118L62 106L64 98L72 96L84 96L96 96L108 96L112 98L112 108L110 120L110 132L110 142L110 150L112 152L116 152L118 150L118 142L118 130L118 118L120 106L122 98L124 96L126 98L128 108L130 120L132 132L134 142L134 150L136 152L140 152L142 150L140 142L140 130L138 118L136 106L136 96L138 88L140 80L140 74L142 70L146 74L148 80L146 78L142 74L138 68L132 60L124 52L114 44L104 38L94 34L84 32L74 34L64 40L58 48L52 56L48 62L44 66L42 58L40 50L38 42L36 36L38 30L40 26L38 24Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cpath d='M38 24L34 20L28 18L24 20L20 24L18 28L16 30L14 30L12 28L14 32L18 34L22 36L26 42L30 50L34 58L38 66L42 74L44 82L44 88L42 96L40 108L38 120L36 132L34 142L32 150L34 152L38 152L40 150L40 142L42 132L44 120L46 108L48 96L50 92L52 96L54 108L56 120L56 132L56 142L56 150L58 152L62 152L64 150L62 142L62 130L62 118L62 106L64 98L72 96L84 96L96 96L108 96L112 98L112 108L110 120L110 132L110 142L110 150L112 152L116 152L118 150L118 142L118 130L118 118L120 106L122 98L124 96L126 98L128 108L130 120L132 132L134 142L134 150L136 152L140 152L142 150L140 142L140 130L138 118L136 106L136 96L138 88L140 80L140 74L142 70L146 74L148 80L146 78L142 74L138 68L132 60L124 52L114 44L104 38L94 34L84 32L74 34L64 40L58 48L52 56L48 62L44 66L42 58L40 50L38 42L36 36L38 30L40 26L38 24Z'/%3E%3C/svg%3E");
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}

/* Transparent header over hero */
.site-header.header--transparent {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

.site-header.header--transparent .logo-wordmark {
  color: var(--white);
}

.site-header.header--transparent .nav-list a {
  color: rgba(255, 255, 255, 0.7);
}

.site-header.header--transparent .nav-list a:hover,
.site-header.header--transparent .nav-list a.active {
  color: var(--white);
}

.site-header.header--transparent .hamburger span {
  background: var(--white);
}

/* Nav */
.main-nav { display: none; }

.nav-list {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-list a {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-600);
  transition: color 0.2s ease;
}

.nav-list a:hover,
.nav-list a.active {
  color: var(--black);
}

/* Body scroll lock for mobile nav (iOS Safari fix) */
html.nav-open,
html.nav-open body {
  overflow: hidden;
  height: 100%;
  touch-action: none;
  -webkit-overflow-scrolling: none;
}

/* Hamburger */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 24px;
  height: 24px;
  z-index: 910;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--black);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger[aria-expanded="true"] span:first-child {
  transform: translateY(3.75px) rotate(45deg);
}

.hamburger[aria-expanded="true"] span:last-child {
  transform: translateY(-3.75px) rotate(-45deg);
}

/* Ensure X is always dark when nav is open (even on transparent header pages) */
.hamburger[aria-expanded="true"] span {
  background: var(--black);
}

/* Mobile Nav */
.main-nav.open {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 905;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.main-nav.open .nav-list {
  flex-direction: column;
  gap: 2rem;
  text-align: center;
}

.main-nav.open .nav-list a {
  font-size: 1.1rem;
  color: var(--black);
}

/* ============================================
   Typography
   ============================================ */
h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.15;
}

h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 1.5rem;
}

h3 {
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  margin-bottom: 1rem;
}

h4 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.lead {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  line-height: 1.8;
  color: var(--gray-600);
}

.section-intro {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 3.5rem;
}

/* ============================================
   Link Arrow
   ============================================ */
.link-arrow {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--gold-dark);
  transition: color 0.2s ease;
}

.link-arrow:hover {
  color: var(--gold);
}

.link-arrow--light {
  color: var(--gold);
}

.link-arrow--light:hover {
  color: var(--white);
}

/* ============================================
   Button
   ============================================ */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.9rem 2.5rem;
  background: var(--gold);
  color: var(--black);
  border: none;
  transition: background 0.25s ease;
}

.btn:hover {
  background: var(--gold-dark);
}

.btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ============================================
   Sections
   ============================================ */
.section {
  padding: 6rem 0;
}

.section--dark {
  background: var(--black);
  color: var(--white);
}

.section--dark .lead {
  color: var(--gray-400);
}

.section--dark h4 {
  color: var(--gold);
}

.section--light {
  background: var(--off-white);
}

/* ============================================
   Hero (Homepage)
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Background image with slow zoom */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.7) contrast(1.05);
  animation: heroZoom 25s ease-in-out infinite alternate;
}

@keyframes heroZoom {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

/* ---- Animated city-life layer ---- */
.hero-alive {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ======================
   BUILDING LIGHTS
   Scattered glowing dots that flicker on/off independently
   ====================== */
.twinkle {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* Group A — steady warm glow, slow breathe */
.twinkle--a {
  box-shadow:
    78vw 58vh 3px 1px rgba(255, 220, 120, 0.9),
    82vw 54vh 2px 1px rgba(255, 240, 180, 0.8),
    85vw 60vh 2px 1px rgba(255, 200, 80, 0.7),
    74vw 62vh 3px 1px rgba(255, 255, 200, 0.6),
    90vw 56vh 2px 1px rgba(255, 210, 100, 0.8),
    70vw 64vh 3px 1px rgba(255, 230, 140, 0.7),
    88vw 51vh 2px 1px rgba(255, 255, 220, 0.6),
    76vw 66vh 3px 1px rgba(255, 200, 80, 0.8),
    92vw 59vh 2px 1px rgba(255, 240, 160, 0.7),
    65vw 68vh 3px 1px rgba(255, 220, 100, 0.6),
    60vw 61vh 2px 1px rgba(255, 230, 150, 0.7),
    55vw 66vh 3px 1px rgba(255, 200, 90, 0.6),
    95vw 54vh 2px 1px rgba(255, 255, 200, 0.5),
    68vw 70vh 3px 1px rgba(255, 210, 110, 0.7),
    84vw 64vh 2px 1px rgba(255, 240, 170, 0.6),
    50vw 72vh 2px 1px rgba(255, 220, 120, 0.5),
    42vw 74vh 2px 0px rgba(255, 200, 80, 0.4),
    97vw 52vh 2px 1px rgba(255, 240, 160, 0.5);
  animation: twinkleA 4s ease-in-out infinite alternate;
}

/* Group B — offset timing, some brighter */
.twinkle--b {
  box-shadow:
    80vw 56vh 3px 1px rgba(255, 255, 200, 0.8),
    72vw 60vh 2px 1px rgba(255, 210, 100, 0.7),
    87vw 52vh 3px 1px rgba(255, 230, 140, 0.9),
    67vw 65vh 2px 1px rgba(255, 200, 80, 0.6),
    93vw 57vh 3px 1px rgba(255, 240, 160, 0.7),
    77vw 69vh 2px 1px rgba(255, 220, 120, 0.8),
    83vw 62vh 3px 1px rgba(255, 255, 180, 0.6),
    62vw 67vh 2px 1px rgba(255, 200, 90, 0.7),
    91vw 53vh 3px 1px rgba(255, 230, 150, 0.5),
    69vw 63vh 2px 1px rgba(255, 210, 110, 0.8),
    58vw 70vh 3px 1px rgba(255, 240, 140, 0.6),
    96vw 58vh 2px 1px rgba(255, 220, 100, 0.7),
    47vw 73vh 2px 0px rgba(255, 230, 120, 0.4),
    53vw 68vh 2px 1px rgba(255, 210, 90, 0.5),
    37vw 76vh 2px 0px rgba(255, 200, 80, 0.3);
  animation: twinkleB 5s ease-in-out infinite alternate;
}

/* Group C — fast flicker, sparser */
.twinkle--c {
  box-shadow:
    75vw 57vh 2px 1px rgba(255, 200, 80, 0.7),
    86vw 61vh 3px 1px rgba(255, 240, 160, 0.8),
    64vw 69vh 2px 1px rgba(255, 220, 120, 0.6),
    81vw 55vh 3px 1px rgba(255, 255, 200, 0.7),
    94vw 60vh 2px 1px rgba(255, 210, 100, 0.9),
    71vw 71vh 3px 1px rgba(255, 230, 140, 0.6),
    89vw 58vh 2px 1px rgba(255, 200, 90, 0.7),
    66vw 64vh 3px 1px rgba(255, 240, 170, 0.5),
    79vw 67vh 2px 1px rgba(255, 220, 110, 0.8),
    57vw 72vh 3px 1px rgba(255, 255, 180, 0.6),
    45vw 75vh 2px 0px rgba(255, 210, 100, 0.4),
    39vw 77vh 2px 1px rgba(255, 230, 140, 0.3);
  animation: twinkleC 3s ease-in-out infinite alternate;
}

/* Group D — sharp on/off flicker like windows turning on */
.twinkle--d {
  box-shadow:
    73vw 59vh 2px 2px rgba(255, 255, 220, 0.9),
    88vw 53vh 2px 2px rgba(255, 240, 180, 0.8),
    61vw 66vh 2px 2px rgba(255, 220, 100, 0.7),
    82vw 63vh 2px 2px rgba(255, 255, 200, 0.9),
    52vw 71vh 2px 1px rgba(255, 210, 80, 0.6),
    91vw 55vh 2px 2px rgba(255, 230, 140, 0.8),
    68vw 72vh 2px 1px rgba(255, 200, 90, 0.5),
    85vw 50vh 2px 2px rgba(255, 255, 220, 0.7),
    77vw 65vh 2px 2px rgba(255, 240, 160, 0.8);
  animation: twinkleD 2.5s steps(3, end) infinite;
}

/* Group E — cool white (office towers, modern buildings) */
.twinkle--e {
  box-shadow:
    86vw 48vh 2px 2px rgba(200, 220, 255, 0.6),
    79vw 50vh 2px 1px rgba(180, 200, 255, 0.5),
    92vw 46vh 2px 2px rgba(200, 220, 255, 0.7),
    83vw 52vh 2px 1px rgba(180, 210, 255, 0.4),
    74vw 53vh 2px 2px rgba(200, 220, 255, 0.5),
    89vw 49vh 2px 1px rgba(190, 210, 255, 0.6),
    96vw 47vh 2px 1px rgba(200, 225, 255, 0.4);
  animation: twinkleE 7s ease-in-out infinite alternate;
}

@keyframes twinkleA {
  0%   { opacity: 0.4; }
  50%  { opacity: 1; }
  100% { opacity: 0.3; }
}

@keyframes twinkleB {
  0%   { opacity: 0.8; }
  30%  { opacity: 0.15; }
  70%  { opacity: 0.9; }
  100% { opacity: 0.4; }
}

@keyframes twinkleC {
  0%   { opacity: 0.2; }
  40%  { opacity: 0.9; }
  60%  { opacity: 0.3; }
  100% { opacity: 0.7; }
}

@keyframes twinkleD {
  0%   { opacity: 0; }
  33%  { opacity: 1; }
  66%  { opacity: 0.2; }
  100% { opacity: 0.8; }
}

@keyframes twinkleE {
  0%   { opacity: 0.3; }
  100% { opacity: 0.7; }
}

/* ======================
   CAR LIGHT TRAILS
   Diagonal paths following highway perspective lines
   ====================== */
.car-stream {
  position: absolute;
  height: 2px;
  border-radius: 2px;
  opacity: 0;
  filter: blur(0.5px);
}

/* Highway 1 — sweeping left-to-right, slight downward angle (foreground road) */
.car-stream--1 {
  width: 70px;
  top: 80%;
  background: linear-gradient(to right, transparent, rgba(255, 240, 200, 0.9) 30%, rgba(255, 240, 200, 0.5));
  animation: carDiagLR1 7s linear infinite;
}

.car-stream--2 {
  width: 55px;
  top: 81%;
  background: linear-gradient(to left, transparent, rgba(255, 60, 40, 0.8) 30%, rgba(255, 60, 40, 0.3));
  animation: carDiagRL1 9s linear infinite;
  animation-delay: 2s;
}

.car-stream--3 {
  width: 50px;
  top: 79%;
  background: linear-gradient(to right, transparent, rgba(255, 245, 210, 0.7) 30%, rgba(255, 245, 210, 0.3));
  animation: carDiagLR1 11s linear infinite;
  animation-delay: 4.5s;
}

/* Highway 2 — mid-distance, more diagonal (perspective road going into city) */
.car-stream--4 {
  width: 40px;
  height: 1.5px;
  top: 74%;
  background: linear-gradient(to right, transparent, rgba(255, 230, 180, 0.8) 30%, rgba(255, 230, 180, 0.4));
  animation: carDiagLR2 10s linear infinite;
  animation-delay: 1s;
}

.car-stream--5 {
  width: 35px;
  height: 1.5px;
  top: 73%;
  background: linear-gradient(to left, transparent, rgba(255, 80, 50, 0.7) 30%, rgba(255, 80, 50, 0.3));
  animation: carDiagRL2 12s linear infinite;
  animation-delay: 6s;
}

/* Highway 3 — distant road, thinner, slower */
.car-stream--6 {
  width: 30px;
  height: 1px;
  top: 68%;
  background: linear-gradient(to right, transparent, rgba(255, 240, 200, 0.6) 30%, rgba(255, 240, 200, 0.2));
  animation: carDiagLR3 14s linear infinite;
  animation-delay: 3s;
}

.car-stream--7 {
  width: 25px;
  height: 1px;
  top: 67%;
  background: linear-gradient(to left, transparent, rgba(255, 90, 60, 0.5) 30%, rgba(255, 90, 60, 0.2));
  animation: carDiagRL3 16s linear infinite;
  animation-delay: 8s;
}

/* Extra cars for density */
.car-stream--8 {
  width: 60px;
  top: 82%;
  background: linear-gradient(to right, transparent, rgba(255, 235, 190, 0.8) 30%, rgba(255, 235, 190, 0.4));
  animation: carDiagLR1 8s linear infinite;
  animation-delay: 6s;
}

/* Foreground road — headlights sweep with slight vertical drift */
@keyframes carDiagLR1 {
  0%   { left: -100px; transform: translateY(0); opacity: 0; }
  3%   { opacity: 0.9; }
  50%  { transform: translateY(8px); }
  92%  { opacity: 0.9; }
  100% { left: 110%; transform: translateY(15px); opacity: 0; }
}

@keyframes carDiagRL1 {
  0%   { left: 110%; transform: translateY(0); opacity: 0; }
  3%   { opacity: 0.8; }
  50%  { transform: translateY(6px); }
  92%  { opacity: 0.8; }
  100% { left: -100px; transform: translateY(12px); opacity: 0; }
}

/* Mid-distance road — steeper diagonal */
@keyframes carDiagLR2 {
  0%   { left: 30%; transform: translateY(0); opacity: 0; }
  5%   { opacity: 0.7; }
  50%  { transform: translateY(20px); }
  90%  { opacity: 0.7; }
  100% { left: 105%; transform: translateY(40px); opacity: 0; }
}

@keyframes carDiagRL2 {
  0%   { left: 95%; transform: translateY(0); opacity: 0; }
  5%   { opacity: 0.6; }
  50%  { transform: translateY(15px); }
  90%  { opacity: 0.6; }
  100% { left: 20%; transform: translateY(30px); opacity: 0; }
}

/* Distant road — subtle, slower */
@keyframes carDiagLR3 {
  0%   { left: 40%; transform: translateY(0); opacity: 0; }
  5%   { opacity: 0.5; }
  50%  { transform: translateY(10px); }
  90%  { opacity: 0.5; }
  100% { left: 100%; transform: translateY(20px); opacity: 0; }
}

@keyframes carDiagRL3 {
  0%   { left: 90%; transform: translateY(0); opacity: 0; }
  5%   { opacity: 0.4; }
  50%  { transform: translateY(8px); }
  90%  { opacity: 0.4; }
  100% { left: 35%; transform: translateY(15px); opacity: 0; }
}

/* ======================
   AIRCRAFT
   Slow-moving lights crossing the sky with blinking nav lights
   ====================== */
.plane {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  opacity: 0;
}

/* Plane body light (steady white) */
.plane::before {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.4);
}

/* Blinking nav light (red/green strobe) */
.plane::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  top: -1px;
  left: 6px;
  animation: navBlink 1.2s steps(2, start) infinite;
}

.plane--1 {
  top: 18%;
  animation: planeAcross1 25s linear infinite;
  animation-delay: 2s;
}
.plane--1::after {
  background: rgba(255, 50, 50, 0.9);
  box-shadow: 0 0 4px 1px rgba(255, 50, 50, 0.5);
}

.plane--2 {
  top: 12%;
  animation: planeAcross2 35s linear infinite;
  animation-delay: 12s;
}
.plane--2::after {
  background: rgba(50, 255, 50, 0.8);
  box-shadow: 0 0 4px 1px rgba(50, 255, 50, 0.4);
  left: -6px;
}

.plane--3 {
  top: 25%;
  animation: planeAcross3 30s linear infinite;
  animation-delay: 20s;
}
.plane--3::after {
  background: rgba(255, 50, 50, 0.8);
  box-shadow: 0 0 4px 1px rgba(255, 50, 50, 0.4);
}

/* Plane 1 — left to right, slight climb */
@keyframes planeAcross1 {
  0%   { left: -2%; transform: translateY(0); opacity: 0; }
  3%   { opacity: 0.8; }
  50%  { transform: translateY(-20px); }
  92%  { opacity: 0.8; }
  100% { left: 105%; transform: translateY(-35px); opacity: 0; }
}

/* Plane 2 — right to left, descending (approaching airport) */
@keyframes planeAcross2 {
  0%   { left: 105%; transform: translateY(0) scale(0.8); opacity: 0; }
  3%   { opacity: 0.7; }
  50%  { transform: translateY(30px) scale(0.9); }
  92%  { opacity: 0.7; }
  100% { left: -2%; transform: translateY(50px) scale(1); opacity: 0; }
}

/* Plane 3 — left to right, higher and slower */
@keyframes planeAcross3 {
  0%   { left: 10%; transform: translateY(0); opacity: 0; }
  5%   { opacity: 0.6; }
  50%  { transform: translateY(-15px); }
  90%  { opacity: 0.6; }
  100% { left: 102%; transform: translateY(-25px); opacity: 0; }
}

/* Navigation light strobe */
@keyframes navBlink {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

/* ======================
   ATMOSPHERIC CITY GLOW
   Warm pulsing light pollution at horizon
   ====================== */
.city-glow {
  position: absolute;
  bottom: 0;
  left: 30%;
  width: 70%;
  height: 50%;
  background: radial-gradient(
    ellipse at 65% 100%,
    rgba(201, 168, 76, 0.1) 0%,
    rgba(255, 200, 80, 0.05) 30%,
    rgba(255, 180, 60, 0.02) 50%,
    transparent 70%
  );
  animation: cityGlow 8s ease-in-out infinite alternate;
}

/* Secondary glow — cooler, from modern tower district */
.city-glow-cool {
  position: absolute;
  bottom: 5%;
  left: 60%;
  width: 40%;
  height: 35%;
  background: radial-gradient(
    ellipse at 50% 100%,
    rgba(150, 180, 255, 0.06) 0%,
    rgba(120, 160, 255, 0.03) 40%,
    transparent 70%
  );
  animation: cityGlow 10s ease-in-out infinite alternate-reverse;
}

@keyframes cityGlow {
  0%   { opacity: 0.5; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.05); }
}

/* Disable animated city layer for reduced-motion and print */
@media (prefers-reduced-motion: reduce) {
  .hero-alive { display: none; }
}

/* European architecture ghost overlay — subtle two-layer parallax */
.hero-ghost {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  mix-blend-mode: screen;
  opacity: 0.1;
  display: none;
}

@media (min-width: 768px) {
  .hero-ghost { display: block; }
}

.hero-ghost img {
  width: 110%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.2);
  animation: heroDrift 30s ease-in-out infinite alternate;
}

@keyframes heroDrift {
  from { transform: translateX(0); }
  to { transform: translateX(-30px); }
}

/* Dark overlay — darker left for text legibility */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.65) 40%,
    rgba(0, 0, 0, 0.5) 100%
  );
}

/* Hero content */
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  padding-left: 6%;
}

h1 {
  font-size: clamp(2.5rem, 7vw, 5rem);
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin-bottom: 1.5rem;
  color: var(--white);
}

/* Line-by-line entrance */
.hero-line {
  display: block;
  opacity: 0;
  transform: translateY(24px);
  animation: heroLineIn 0.8s ease-out forwards;
}

.hero-line:nth-child(1) {
  animation-delay: 0.2s;
}

.hero-line:nth-child(2) {
  animation-delay: 0.4s;
}

@keyframes heroLineIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-sub {
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.6);
  max-width: 520px;
  margin-bottom: 2.5rem;
  opacity: 0;
  transform: translateY(16px);
  animation: heroLineIn 0.8s ease-out forwards;
  animation-delay: 0.8s;
}

/* Outline CTA button */
.btn--outline {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  transition: background 0.3s ease, color 0.3s ease;
  opacity: 0;
  transform: translateY(16px);
  animation: heroLineIn 0.8s ease-out forwards;
  animation-delay: 1s;
}

.btn--outline:hover {
  background: var(--gold);
  color: var(--black);
}

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.hero-scroll.hidden {
  opacity: 0;
  pointer-events: none;
}

.hero-scroll span {
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% {
    opacity: 0.4;
    transform: scaleY(1);
  }
  50% {
    opacity: 1;
    transform: scaleY(1.3);
  }
}

/* ============================================
   Page Hero (Inner pages)
   ============================================ */
.page-hero {
  padding: 10rem 0 4rem;
  background: var(--black);
  color: var(--white);
}

.page-hero h1 {
  margin-bottom: 1rem;
}

.page-hero .hero-sub {
  color: var(--gray-400);
}

/* ============================================
   Information Hub
   ============================================ */
.hub-hero {
  padding: calc(var(--header-h) + 3.5rem) 0 3rem;
  background:
    radial-gradient(circle at top right, rgba(201, 168, 76, 0.18), transparent 24rem),
    linear-gradient(180deg, #111111 0%, #181818 55%, #0A0A0A 100%);
  color: var(--white);
}

.hub-hero-grid {
  display: grid;
  gap: 2rem;
}

.hub-kicker,
.hub-status,
.hub-card-tag,
.hub-meta-label,
.hub-list-label,
.hub-pill,
.hub-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hub-kicker {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1rem;
}

.hub-hero h1 {
  max-width: 12ch;
  font-size: clamp(2.7rem, 5vw, 4.9rem);
  line-height: 0.96;
  margin-bottom: 1rem;
}

.hub-hero-sub {
  max-width: 48rem;
  font-size: 1.12rem;
  color: rgba(255, 255, 255, 0.78);
}

.hub-hero-aside {
  display: grid;
  gap: 1rem;
}

.hub-panel {
  padding: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
}

.hub-panel p {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.95rem;
}

.hub-panel h3 {
  font-size: 1rem;
  margin-bottom: 0.45rem;
}

.hub-status {
  color: var(--gold);
}

.hub-metrics {
  display: grid;
  gap: 0.75rem;
}

.hub-metric {
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hub-metric:first-child {
  padding-top: 0;
  border-top: 0;
}

.hub-metric-value {
  display: block;
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--white);
  line-height: 1;
  margin-bottom: 0.2rem;
}

.hub-metric-label {
  display: block;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.82rem;
}

.hub-shell {
  background:
    linear-gradient(180deg, var(--off-white) 0%, var(--white) 30rem),
    var(--white);
}

.hub-search {
  margin-top: -2.2rem;
}

.editorial-band + .hub-search {
  margin-top: 0.9rem;
}

.hub-search-bar {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--gray-100);
  background: var(--white);
  box-shadow: 0 18px 50px rgba(10, 10, 10, 0.08);
}

.hub-search-copy h2 {
  font-size: 1.25rem;
  margin-bottom: 0.35rem;
}

.hub-search-copy p {
  color: var(--gray-600);
}

.hub-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.hub-chip {
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--gray-200);
  color: var(--gray-600);
}

.hub-chip--active {
  border-color: var(--black);
  color: var(--black);
}

.hub-section {
  padding: 4rem 0;
}

.hub-section--tight {
  padding-top: 2rem;
}

.hub-section--dark {
  background: var(--black);
  color: var(--white);
}

.hub-section-head {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
}

.hub-section-head p {
  color: var(--gray-600);
  max-width: 46rem;
}

.hub-section--dark .hub-section-head p {
  color: rgba(255, 255, 255, 0.68);
}

.hub-grid {
  display: grid;
  gap: 1.25rem;
}

.hub-grid--categories,
.hub-grid--cards,
.hub-grid--roadmap,
.hub-grid--scaffolds {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.hub-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.4rem;
  border: 1px solid var(--gray-100);
  background: var(--white);
  box-shadow: 0 16px 40px rgba(10, 10, 10, 0.04);
}

.hub-card--interactive,
.hub-roadmap-card--interactive {
  position: relative;
  cursor: default;
  text-decoration: none;
  transition: transform 0.24s ease, border-color 0.24s ease, background 0.24s ease, box-shadow 0.24s ease;
}

.hub-card--interactive:hover,
.hub-card--interactive:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(201, 168, 76, 0.42);
  background: linear-gradient(180deg, #FCFBF7 0%, var(--white) 100%);
  box-shadow: 0 22px 48px rgba(10, 10, 10, 0.08);
}

.hub-card--interactive:hover .hub-link,
.hub-card--interactive:focus-visible .hub-link {
  color: var(--gold-dark);
  transform: translateX(4px);
}

.hub-card--interactive:hover .hub-pill--gold,
.hub-card--interactive:focus-visible .hub-pill--gold {
  border-color: rgba(201, 168, 76, 0.8);
  background: rgba(201, 168, 76, 0.08);
}

.hub-card--dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}

.hub-card--draft {
  border-style: dashed;
}

.hub-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.hub-card h3 {
  font-size: 1.18rem;
  line-height: 1.2;
}

.hub-card p,
.hub-card li {
  color: var(--gray-600);
  font-size: 0.96rem;
}

.hub-card--dark p,
.hub-card--dark li {
  color: rgba(255, 255, 255, 0.72);
}

.hub-card-tag {
  color: var(--gold-dark);
}

.hub-card--dark .hub-card-tag {
  color: var(--gold);
}

.hub-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.hub-pill {
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--gray-200);
  color: var(--gray-600);
}

.hub-card--dark .hub-pill {
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.68);
}

.hub-pill--gold {
  border-color: rgba(201, 168, 76, 0.45);
  color: var(--gold-dark);
}

.hub-pill--draft {
  border-style: dashed;
}

.hub-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: var(--black);
  letter-spacing: 0.02em;
  transition: color 0.2s ease, transform 0.2s ease;
}

.hub-card--dark .hub-link {
  color: var(--white);
}

.hub-link:hover {
  color: var(--gold-dark);
}

.hub-meta-strip {
  display: grid;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--gray-100);
  background: var(--off-white);
  margin: 1.75rem 0 2rem;
}

.hub-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.hub-meta-label {
  color: var(--gray-400);
}

.hub-meta-value {
  color: var(--black);
  font-size: 0.95rem;
}

.hub-meta-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 7.8rem;
  padding: 0.32rem 0.72rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hub-meta-status--current {
  background: rgba(18, 102, 79, 0.12);
  color: #0f5a45;
}

.hub-meta-status--high-change {
  background: rgba(201, 168, 76, 0.18);
  color: #7b5f13;
}

.hub-meta-status--scheduled-review {
  background: rgba(10, 10, 10, 0.08);
  color: var(--gray-600);
}

.editorial-band {
  padding-top: 0.9rem;
}

.editorial-band--tight {
  padding-top: 0.3rem;
}

.editorial-bar {
  display: grid;
  gap: 0;
  border: 1px solid var(--gray-100);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 246, 241, 0.98) 100%);
}

.editorial-bar--compact {
  margin-top: 0.85rem;
}

.editorial-bar__item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.72rem 0.82rem !important;
  border-bottom: 1px solid var(--gray-100);
}

.editorial-bar__item:last-child {
  border-bottom: 0;
}

.editorial-bar__label {
  color: var(--gray-400);
  font-size: 0.64rem !important;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.editorial-bar__value {
  color: var(--black);
  font-size: 0.84rem !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere;
}

.editorial-bar__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 7rem !important;
  padding: 0.28rem 0.68rem !important;
  border-radius: 999px;
  font-size: 0.64rem !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

main[data-page-type="home"] > .editorial-band,
main[data-page-type="about"] > .editorial-band,
main[data-page-type="contact"] > .editorial-band,
main[data-page-type="service"][data-page-template="standard"] > .editorial-band,
main[data-page-type="hub-index"] > .editorial-band,
main[data-page-type="hub-category"] .editorial-bar.editorial-bar--compact {
  display: none;
}

.editorial-bar__status--current {
  background: rgba(18, 102, 79, 0.12);
  color: #0f5a45;
}

.editorial-bar__status--high-change {
  background: rgba(201, 168, 76, 0.18);
  color: #7b5f13;
}

.editorial-bar__status--scheduled-review {
  background: rgba(10, 10, 10, 0.08);
  color: var(--gray-600);
}

.hub-callout {
  padding: 1.2rem 1.25rem;
  border-left: 3px solid var(--gold);
  background: var(--off-white);
  margin: 1.5rem 0;
}

.hub-callout p {
  color: var(--gray-600);
}

.hub-list {
  display: grid;
  gap: 0.8rem;
}

.hub-list li {
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--gray-100);
}

.hub-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.hub-list-label {
  color: var(--gray-400);
  margin-bottom: 0.15rem;
}

.hub-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  color: var(--gray-400);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hub-breadcrumbs a:hover {
  color: var(--black);
}

.hub-template-grid {
  display: grid;
  gap: 1.25rem;
}

.hub-template-card {
  padding: 1.25rem;
  border: 1px solid var(--gray-100);
  background: var(--white);
}

.hub-template-card h3 {
  margin-bottom: 0.6rem;
  font-size: 1rem;
}

.hub-template-card p {
  color: var(--gray-600);
}

.hub-template-card ul {
  margin-top: 0.75rem;
}

.hub-template-card li {
  padding-left: 1rem;
  position: relative;
}

.hub-template-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.8rem;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--gold-dark);
}

.hub-scaffold {
  padding: calc(var(--header-h) + 2.6rem) 0 4rem;
}

.hub-scaffold-grid {
  display: grid;
  gap: 1.5rem;
}

.hub-scaffold article {
  color: var(--black);
}

.hub-scaffold article > h1 {
  color: var(--black);
  max-width: 14ch;
}

.hub-scaffold article > p,
.hub-scaffold article li,
.hub-scaffold article ol,
.hub-scaffold article ul {
  color: var(--gray-600);
}

.hub-scaffold article a {
  color: var(--black);
}

.hub-scaffold article a:hover {
  color: var(--gold-dark);
}

.hub-scaffold-body {
  display: grid;
  gap: 1.25rem;
}

.hub-scaffold-body h2,
.hub-scaffold-body h3,
.hub-scaffold-body h4 {
  color: var(--black);
}

.hub-scaffold-body p,
.hub-scaffold-body li,
.hub-scaffold-body ol {
  color: var(--gray-600);
}

.hub-scaffold-body strong {
  color: var(--black);
}

.hub-scaffold-body > section {
  background: var(--white);
  border: 1px solid var(--gray-100);
  box-shadow: 0 16px 40px rgba(10, 10, 10, 0.04);
  padding: 1.4rem;
  overflow: hidden;
}

.hub-scaffold-body > section > :first-child {
  margin-top: 0;
}

.hub-scaffold-body > section > :last-child {
  margin-bottom: 0;
}

.hub-scaffold-body table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  background: var(--white);
}

.hub-scaffold-body thead {
  background: var(--gray-800);
  color: var(--white);
}

.hub-scaffold-body th,
.hub-scaffold-body td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--gray-200);
  vertical-align: top;
}

.hub-scaffold-body th {
  text-align: left;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hub-scaffold-body tbody tr:nth-child(even) {
  background: var(--off-white);
}

.hub-scaffold-body tbody tr:last-child td {
  border-bottom: 0;
}

.hub-scaffold-body td {
  color: var(--gray-600);
}

.hub-scaffold-body td strong,
.hub-scaffold-body td a {
  color: var(--black);
}

.hub-scaffold-body section > div[style*="overflow-x:auto"] {
  margin: 1rem 0;
  overflow-x: auto !important;
  border: 1px solid var(--gray-200);
  background: linear-gradient(180deg, var(--off-white) 0%, var(--white) 100%);
}

.hub-scaffold-body section > table {
  display: block;
  overflow-x: auto;
  margin: 1rem 0;
  border: 1px solid var(--gray-200);
  background: linear-gradient(180deg, var(--off-white) 0%, var(--white) 100%);
}

.hub-draft-banner {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.7rem;
  border: 1px dashed var(--gray-200);
  color: var(--gray-600);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}

.hub-placeholder-note {
  color: var(--gray-600);
}

.hub-roadmap-card {
  padding: 1.2rem;
  border: 1px dashed var(--gray-200);
  background: linear-gradient(180deg, var(--off-white) 0%, var(--white) 100%);
}

.hub-roadmap-card h3 {
  font-size: 1rem;
  margin-bottom: 0.35rem;
}

.hub-roadmap-card p {
  color: var(--gray-600);
  font-size: 0.92rem;
}

.hub-roadmap-card--interactive:hover,
.hub-roadmap-card--interactive:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(201, 168, 76, 0.5);
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.12) 0%, rgba(255, 255, 255, 0.08) 100%);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.24);
}

.hub-roadmap-card--interactive:hover h3,
.hub-roadmap-card--interactive:focus-visible h3 {
  color: var(--white);
}

.hub-roadmap-card--interactive:hover p,
.hub-roadmap-card--interactive:focus-visible p {
  color: rgba(255, 255, 255, 0.8);
}

/* ============================================
   Pillars (Homepage)
   ============================================ */
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

.pillar-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

.pillar h3 { color: var(--white); }

.pillar p {
  color: var(--gray-400);
  line-height: 1.8;
}

.pillar-divider {
  width: 100%;
  height: 1px;
  background: var(--gray-800);
}

/* ============================================
   Services Section (Homepage)
   ============================================ */
.section--services {
  background: var(--black);
  color: var(--white);
}

.services-header {
  margin-bottom: 3rem;
}

.services-rule {
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 1.5rem;
}

.services-header h2 {
  color: var(--white);
  text-align: left;
}

.services-sub {
  font-size: 1.05rem;
  color: #888;
  text-align: left;
}

/* Services Grid */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* Service Card — image cards with overlay */
.service-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  min-height: 300px;
  padding: 2rem;
  background-size: cover;
  background-position: center;
  background-color: var(--gray-800);
  overflow: hidden;
  color: var(--white);
  text-decoration: none;
  transition: background-size 0.4s ease;
}

.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  transition: background 0.4s ease;
  z-index: 1;
}

.service-card:hover::before {
  background: rgba(0, 0, 0, 0.5);
}

/* Card content sits above overlays */
.service-num {
  position: relative;
  z-index: 2;
  font-family: var(--font-heading);
  font-size: 3rem;
  color: var(--white);
  opacity: 0.2;
  line-height: 1;
}

.service-card-body {
  position: relative;
  z-index: 2;
}

.service-card-body h3 {
  font-size: clamp(1.375rem, 2.5vw, 1.625rem);
  color: var(--white);
  margin-bottom: 0.75rem;
}

.service-card-body p {
  color: #B0B0B0;
  font-size: 0.92rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.service-link {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--gold);
  transition: transform 0.4s ease;
}

.service-card:hover .service-link {
  transform: translateX(8px);
}

/* ============================================
   Corridor (Homepage)
   ============================================ */
.corridor {
  text-align: center;
}

.corridor-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.corridor-side {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.corridor-side span {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  color: var(--white);
}

.corridor-line {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  position: relative;
}

.corridor-line::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gold);
}

.corridor-line span {
  position: relative;
  color: var(--gold);
  font-size: 0.6rem;
}

.corridor-caption {
  font-size: 1rem;
  color: var(--gray-400);
  letter-spacing: 0.02em;
}

/* ============================================
   Why Camellos (Homepage)
   ============================================ */
.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

.why-points {
  display: grid;
  gap: 2.5rem;
}

.why-point p {
  color: var(--gray-600);
  line-height: 1.75;
}

/* ============================================
   Insights (Homepage)
   ============================================ */
.insights-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.insight-card {
  padding: 2rem 0;
  border-bottom: 1px solid var(--gray-200);
}

.insight-card:last-child {
  border-bottom: none;
}

.insight-card time {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-400);
}

.insight-card h3 {
  font-size: clamp(1.15rem, 2.5vw, 1.35rem);
  margin: 0.5rem 0 0.75rem;
}

.insight-card h3 a {
  transition: color 0.2s ease;
}

.insight-card h3 a:hover {
  color: var(--gold-dark);
}

.insight-card > p {
  color: var(--gray-600);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

/* ============================================
   Contact CTA (Homepage + Inner pages)
   ============================================ */
.contact-cta {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.contact-cta h2 {
  color: var(--white);
}

.contact-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}

.contact-cta .contact-locations {
  font-size: 0.85rem;
  color: var(--gray-600);
}

/* ============================================
   Service Detail (services.html)
   ============================================ */
.service-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 3rem 0;
}

.service-number {
  font-family: var(--font-heading);
  font-size: 3rem;
  color: var(--gray-200);
  line-height: 1;
  display: block;
  margin-bottom: 1rem;
}

.service-detail-body p {
  color: var(--gray-600);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

.service-detail-body ul {
  list-style: none;
  padding: 0;
  margin-top: 1.5rem;
}

.service-detail-body li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.75rem;
  color: var(--gray-600);
  font-size: 0.95rem;
  line-height: 1.6;
}

.service-detail-body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--gold);
}

.divider {
  border: none;
  height: 1px;
  background: var(--gray-100);
  margin: 0;
}

/* ============================================
   About Story (about.html)
   ============================================ */
.about-story {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

.about-story-text h2 {
  margin-bottom: 1.5rem;
}

.about-story-text p {
  color: var(--gray-600);
  line-height: 1.85;
  margin-bottom: 1.25rem;
}

.about-story-text p:last-child {
  margin-bottom: 0;
}

.about-story-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.05);
}

/* Approach */
.approach-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-top: 1rem;
}

.approach-item h3 {
  color: var(--white);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  margin-bottom: 1rem;
}

.approach-item p {
  color: var(--gray-400);
  line-height: 1.8;
}

/* About page refresh */
.about-page .btn--outline {
  opacity: 1;
  transform: none;
  animation: none;
}

.about-kicker,
.about-section-label {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

.about-hero {
  padding: calc(var(--header-h) + 4rem) 0 4rem;
  background:
    radial-gradient(circle at top right, rgba(201, 168, 76, 0.12), transparent 28rem),
    linear-gradient(180deg, #0A0A0A 0%, #111111 58%, #171717 100%);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.about-hero::after {
  content: '';
  position: absolute;
  inset: auto -10% 4.5rem 48%;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 168, 76, 0), rgba(201, 168, 76, 0.9), rgba(201, 168, 76, 0));
  opacity: 0.45;
}

.about-hero-grid {
  display: grid;
  gap: 2rem;
}

.about-hero-copy h1 {
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  line-height: 1.02;
  max-width: 12ch;
  margin-bottom: 1.2rem;
}

.about-hero-sub {
  max-width: 42rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.04rem;
  line-height: 1.85;
}

.about-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 2rem;
}

.about-hero-panel {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  padding: 1.5rem;
  backdrop-filter: blur(8px);
}

.about-panel-label {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.85rem;
}

.about-panel-head p {
  color: rgba(255, 255, 255, 0.74);
}

.about-panel-list {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.4rem;
}

.about-panel-list li {
  padding-top: 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.82);
}

.about-proof-strip {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1px;
  margin-top: 2.5rem;
  background: rgba(255, 255, 255, 0.08);
}

.about-proof-item {
  padding: 1rem 1.15rem;
  background: rgba(255, 255, 255, 0.03);
}

.about-proof-label {
  display: block;
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.78rem;
  margin-bottom: 0.25rem;
}

.about-proof-item strong {
  font-size: 1rem;
}

.about-manifesto {
  background:
    linear-gradient(180deg, rgba(247, 247, 245, 0) 0%, rgba(247, 247, 245, 1) 32%, rgba(255, 255, 255, 1) 100%);
}

.about-signal {
  padding: 0 0 2rem;
}

.about-signal-band {
  display: grid;
  gap: 1rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}

.about-signal-line {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.05;
}

.about-signal-copy {
  max-width: 42rem;
  color: var(--gray-600);
  font-size: 1rem;
}

.about-split {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

.about-block p {
  color: var(--gray-600);
  line-height: 1.85;
}

.about-card-stack {
  display: grid;
  gap: 1rem;
}

.about-note-card,
.about-counterparty-card,
.about-process-step {
  border: 1px solid var(--gray-100);
  background: var(--white);
  padding: 1.35rem;
  box-shadow: 0 16px 36px rgba(10, 10, 10, 0.04);
}

.about-note-card h3,
.about-counterparty-card h3,
.about-process-step h3,
.about-reason-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.65rem;
}

.about-note-card p,
.about-counterparty-card p,
.about-process-step p,
.about-reason-card p {
  color: var(--gray-600);
}

.about-section-intro {
  text-align: left;
  max-width: 50rem;
  margin: 0 0 2.5rem;
}

.about-card-grid,
.about-process-grid,
.about-reasons-grid {
  display: grid;
  gap: 1rem;
}

.about-counterparty-card {
  position: relative;
}

.about-counterparty-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), rgba(201, 168, 76, 0));
}

.about-counterparty-card--lead {
  background: linear-gradient(180deg, var(--black) 0%, #171717 100%);
  border-color: rgba(201, 168, 76, 0.2);
  box-shadow: none;
}

.about-counterparty-card--lead h3,
.about-counterparty-card--lead p {
  color: var(--white);
}

.about-counterparty-card--lead p {
  color: rgba(255, 255, 255, 0.74);
}

.about-capabilities .about-section-intro {
  max-width: 52rem;
}

.about-capability-grid {
  display: grid;
  gap: 1rem;
}

.about-capability-card {
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

.about-capability-card--wide {
  background:
    linear-gradient(135deg, rgba(201, 168, 76, 0.12), rgba(255, 255, 255, 0.04) 48%),
    rgba(255, 255, 255, 0.04);
}

.about-capability-num {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 2.6rem;
  color: rgba(201, 168, 76, 0.34);
  line-height: 1;
  margin-bottom: 1rem;
}

.about-capability-card h3 {
  color: var(--white);
  margin-bottom: 0.7rem;
}

.about-capability-card p {
  color: rgba(255, 255, 255, 0.72);
}

.about-corridor-head {
  display: grid;
  gap: 1rem;
  margin-bottom: 2rem;
}

.about-corridor-head > p {
  color: var(--gray-600);
  max-width: 44rem;
}

.about-corridor-map {
  display: grid;
  gap: 1.25rem;
}

.about-corridor-side,
.about-corridor-center {
  position: relative;
  padding: 1.4rem;
  border: 1px solid var(--gray-100);
  background: var(--white);
}

.about-corridor-side ul {
  display: grid;
  gap: 0.85rem;
  margin-top: 1rem;
}

.about-corridor-side li {
  color: var(--gray-600);
  padding-left: 1rem;
  position: relative;
}

.about-corridor-side li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65rem;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--gold);
}

.about-corridor-title {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 1.6rem;
}

.about-corridor-center {
  background: linear-gradient(180deg, var(--black) 0%, #171717 100%);
  color: var(--white);
  border-color: rgba(201, 168, 76, 0.28);
}

.about-corridor-node {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

.about-corridor-center p {
  color: rgba(255, 255, 255, 0.72);
}

.about-process-step {
  position: relative;
  padding-top: 3.4rem;
  z-index: 1;
}

.about-process-num {
  position: absolute;
  top: 1.1rem;
  left: 1.35rem;
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--gold-dark);
  line-height: 1;
}

.about-reasons-grid {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.about-reason-card {
  padding: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.about-reason-card p {
  color: rgba(255, 255, 255, 0.68);
}

.about-not {
  text-align: center;
}

.about-closing .about-section-label,
.about-not .about-section-label,
.about-manifesto .about-section-label,
.about-corridor .about-section-label {
  color: var(--gold-dark);
}

/* ============================================
   Contact Page (contact.html)
   ============================================ */
.contact-page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}

/* Form (shared) */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75rem 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--gray-200);
  color: var(--black);
  transition: border-color 0.2s ease;
  border-radius: 0;
  -webkit-appearance: none;
}

.form-group select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239A9A9A' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  padding-right: 1.5rem;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--gray-400);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-bottom-color: var(--gold);
}

.form-group input.error,
.form-group textarea.error {
  border-bottom-color: #C0392B;
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.contact-form .btn {
  align-self: flex-start;
  margin-top: 0.5rem;
}

.form-status {
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

.form-status.success { color: var(--gold); }
.form-status.error { color: #C0392B; }

/* Dark section form overrides */
.section--dark .form-group input,
.section--dark .form-group textarea {
  border-bottom-color: var(--gray-800);
  color: var(--white);
}

.section--dark .form-group input::placeholder,
.section--dark .form-group textarea::placeholder {
  color: var(--gray-800);
}

/* Contact Info (contact.html) */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-top: 0.5rem;
}

.contact-info-block a {
  color: var(--gold-dark);
  font-size: 1.05rem;
  transition: color 0.2s ease;
}

.contact-info-block a:hover {
  color: var(--gold);
}

.contact-info-block p {
  color: var(--gray-600);
  line-height: 1.7;
}

.contact-response {
  font-size: 0.9rem;
  color: var(--gray-400);
  font-style: italic;
}

/* Location visual (contact.html) */
.location-visual {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  text-align: center;
}

.location-city h3 {
  color: var(--white);
  margin-bottom: 0.5rem;
}

.location-city p {
  color: var(--gray-400);
  font-size: 0.95rem;
}

.location-divider {
  width: 60px;
  height: 1px;
  background: var(--gold);
  margin: 0 auto;
}

/* ============================================
   Filter Bar (insights.html)
   ============================================ */
.filter-bar {
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
  position: sticky;
  top: var(--header-h);
  z-index: 800;
}

.filter-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.filter-list {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 0;
}

/* ─── Grid Size Toggle ─── */
.grid-size-toggle {
  display: none;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  margin-left: 1rem;
}

@media (min-width: 1024px) {
  .grid-size-toggle { display: flex; }
}

.grid-size-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  color: var(--gray-400);
  transition: color 0.2s ease, background 0.2s ease;
}

.grid-size-btn:hover {
  color: var(--gray-600);
  background: var(--gray-100);
}

.grid-size-btn.active {
  color: var(--black);
  background: var(--gray-100);
}

.filter-list::-webkit-scrollbar {
  display: none;
}

.filter-btn {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-400);
  padding: 0.5rem 1rem;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.filter-btn:hover {
  color: var(--black);
}

.filter-btn.active {
  color: var(--black);
  border-bottom-color: var(--gold);
}

/* ============================================
   Articles Grid (insights.html)
   ============================================ */
.articles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.article-card {
  background: var(--white);
  border: 1px solid var(--gray-100);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.article-card.hidden {
  display: none;
}

.article-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.05);
  transition: filter 0.3s ease;
}

.article-card:hover .article-image {
  filter: grayscale(50%) contrast(1.05);
}

.article-body {
  padding: 1.75rem 2rem 2rem;
}

.article-category {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 0.75rem;
}

.article-body h3 {
  font-size: clamp(1.15rem, 2.5vw, 1.3rem);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.article-body h3 a {
  transition: color 0.2s ease;
}

.article-body h3 a:hover {
  color: var(--gold-dark);
}

.article-body > p {
  color: var(--gray-600);
  font-size: 0.92rem;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.article-meta time {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-400);
}

/* ============================================
   Article Page (insight-*.html)
   ============================================ */
.article-hero {
  padding: 10rem 0 3rem;
  background: var(--black);
  color: var(--white);
  min-height: 30vh;
  display: flex;
  align-items: flex-end;
}

.article-hero .container {
  width: 100%;
}

.article-hero-cat {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}

.article-hero h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  max-width: 720px;
  margin-bottom: 1.25rem;
}

.article-hero-meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.85rem;
  color: var(--gray-400);
}

.article-hero-meta span {
  font-weight: 500;
}

/* Article content */
.article-content {
  padding: 4rem 0 6rem;
}

.article-content .narrow {
  max-width: 720px;
}

.article-content .link-arrow {
  display: inline-block;
  margin-bottom: 3rem;
}

.article-body-text p {
  font-size: 1.125rem;
  line-height: 1.85;
  color: var(--gray-600);
  margin-bottom: 1.75rem;
}

.article-body-text p:first-child {
  color: var(--black);
  font-size: 1.2rem;
}

/* More Insights */
.more-insights {
  padding: 5rem 0;
  border-top: 1px solid var(--gray-100);
}

.more-insights h2 {
  margin-bottom: 2.5rem;
}

.more-insights-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .article-hero {
    padding: 12rem 0 4rem;
  }

  .article-content {
    padding: 5rem 0 8rem;
  }

  .more-insights-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   Newsletter (insights.html)
   ============================================ */
.newsletter {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.newsletter h2 {
  margin-bottom: 1rem;
}

.newsletter .lead {
  margin-bottom: 2rem;
}

.newsletter-form {
  margin-bottom: 1rem;
}

.newsletter-input-wrap {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--gray-200);
}

.newsletter-input-wrap input {
  flex: 1;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75rem 0;
  background: transparent;
  border: none;
  color: var(--black);
}

.newsletter-input-wrap input::placeholder {
  color: var(--gray-400);
}

.newsletter-input-wrap input:focus {
  outline: none;
}

.newsletter-input-wrap .btn {
  padding: 0.75rem 1.75rem;
  flex-shrink: 0;
}

.newsletter-fine {
  font-size: 0.8rem;
  color: var(--gray-400);
  margin-top: 0.75rem;
}

/* ============================================
   Footer
   ============================================ */
.site-footer {
  border-top: 1px solid var(--gray-100);
  padding: 2rem 0;
}

[dir="rtl"] .editorial-bar__status,
[dir="rtl"] .hub-meta-status {
  letter-spacing: 0;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer-logo {
  height: 24px;
  width: auto;
  opacity: 0.5;
}

.copyright {
  font-size: 0.8rem;
  color: var(--gray-400);
}

.footer-locations {
  font-size: 0.8rem;
  color: var(--gray-400);
}

/* ============================================
   Fade-in on Scroll
   ============================================ */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   Focus States
   ============================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ============================================
   Responsive — Tablet (768px+)
   ============================================ */
@media (min-width: 768px) {
  .section { padding: 8rem 0; }

  /* Homepage hero */
  .hero-inner {
    padding-left: 10%;
  }

  /* Page hero */
  .page-hero {
    padding: 12rem 0 5rem;
  }

  /* Pillars — 3-column with dividers */
  .pillars {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 0;
  }

  .pillar { padding: 2rem; }

  .pillar-divider {
    width: 1px;
    height: auto;
    background: var(--gray-800);
  }

  /* Services grid */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-card {
    min-height: 350px;
    padding: 2.5rem;
  }

  /* Corridor */
  .corridor-visual {
    flex-wrap: nowrap;
    gap: 3rem;
  }

  .corridor-line { width: 120px; }

  /* Why */
  .why-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
  }

  /* Insights */
  .insights-grid {
    grid-template-columns: 1fr;
  }

  /* Contact CTA actions */
  .contact-cta-actions {
    flex-direction: row;
    justify-content: center;
  }

  /* Service detail */
  .service-detail {
    grid-template-columns: 280px 1fr;
    gap: 3rem;
  }

  /* About story */
  .about-story {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  .about-story-image img {
    height: 520px;
  }

  /* Approach */
  .approach-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }

  .about-hero {
    padding: calc(var(--header-h) + 5rem) 0 4.5rem;
  }

  .about-hero-grid,
  .about-split,
  .about-corridor-head {
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
  }

  .about-signal-band {
    grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr);
    align-items: end;
  }

  .about-hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .about-proof-strip,
  .about-card-grid,
  .about-capability-grid,
  .about-process-grid,
  .about-reasons-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-card-grid {
    align-items: start;
  }

  .about-counterparty-card:nth-child(even),
  .about-process-step:nth-child(even) {
    transform: translateY(1.5rem);
  }

  .about-corridor-map {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.85fr) minmax(0, 1fr);
    align-items: stretch;
    position: relative;
  }

  .about-corridor-map::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 14%;
    right: 14%;
    height: 1px;
    background: linear-gradient(90deg, rgba(201, 168, 76, 0), rgba(201, 168, 76, 0.65), rgba(201, 168, 76, 0));
    z-index: 0;
  }

  .about-corridor-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
  }

  .about-process-grid {
    position: relative;
  }

  .about-process-grid::before {
    content: '';
    position: absolute;
    top: 2rem;
    bottom: 0.5rem;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg, rgba(201, 168, 76, 0.1), rgba(201, 168, 76, 0.7), rgba(201, 168, 76, 0.1));
    transform: translateX(-0.5px);
  }

  /* Contact page */
  .contact-page-grid {
    grid-template-columns: 1.2fr 0.8fr;
    gap: 5rem;
  }

  /* Location visual */
  .location-visual {
    grid-template-columns: 1fr auto 1fr;
    text-align: center;
    align-items: center;
  }

  .location-divider {
    width: 1px;
    height: 60px;
    margin: 0;
  }

  /* Articles grid */
  .articles-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .articles-grid.grid-compact .article-image { height: 180px; }
  .articles-grid.grid-compact .article-body { padding: 1.5rem 1.5rem 1.75rem; }
  .articles-grid.grid-compact .article-body h3 { font-size: 1.1rem; }

  /* Footer */
  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ============================================
   Responsive — Desktop (1024px+)
   ============================================ */
@media (min-width: 1024px) {
  .section { padding: 10rem 0; }

  .main-nav { display: flex; }
  .hamburger { display: none; }

  .container { padding: 0 2rem; }

  .pillar { padding: 3rem; }

  .hero-inner {
    padding-left: 12%;
  }

  /* Articles grid size variants */
  .articles-grid.grid-compact {
    grid-template-columns: repeat(3, 1fr);
  }
  .articles-grid.grid-default {
    grid-template-columns: repeat(2, 1fr);
  }
  .articles-grid.grid-large {
    grid-template-columns: 1fr;
    max-width: 820px;
    margin: 0 auto;
  }
  .articles-grid.grid-large .article-card {
    display: grid;
    grid-template-columns: 320px 1fr;
  }
  .articles-grid.grid-large .article-image {
    height: 100%;
    min-height: 220px;
  }
  .articles-grid.grid-large .article-body {
    padding: 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .articles-grid.grid-large .article-body h3 {
    font-size: 1.4rem;
  }

  /* 3-col services on desktop */
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .about-proof-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .about-card-grid,
  .about-process-grid,
  .about-reasons-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .about-capability-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .about-capability-card {
    grid-column: span 4;
  }

  .about-capability-card--wide {
    grid-column: span 8;
  }

  .about-capability-card:last-child {
    grid-column: 5 / span 4;
  }

  .about-counterparty-card--lead {
    grid-column: span 2;
    min-height: 100%;
  }
}

/* ============================================
   Language Switcher
   ============================================ */
.lang-switcher {
  display: none;
  align-items: center;
  gap: 0.75rem;
  margin-right: 1rem;
}

@media (min-width: 1024px) {
  .lang-switcher { display: flex; }
}

.lang-link {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--gray-400);
  transition: color 0.2s ease;
}

.lang-link:hover { color: var(--black); }
.lang-link.active { color: var(--gold); }

.site-header.header--transparent .lang-link { color: rgba(255,255,255,0.5); }
.site-header.header--transparent .lang-link.active { color: var(--gold); }

/* Mobile nav lang switcher */
.lang-switcher--nav { display: none; }

.main-nav.open .lang-switcher--nav {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
}

/* ============================================
   Footer Links (Privacy / Terms)
   ============================================ */
.footer-links {
  display: flex;
  gap: 1.5rem;
}

.footer-links a {
  font-size: 0.8rem;
  color: var(--gray-400);
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--gold-dark);
}

.logo-wordmark--footer {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gray-400);
  opacity: 0.5;
}

/* ============================================
   Cookie Notice
   ============================================ */
.cookie-notice {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--black);
  color: var(--gray-400);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  font-size: 0.85rem;
  z-index: 950;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.cookie-notice.visible {
  transform: translateY(0);
}

.cookie-notice p {
  margin: 0;
}

.cookie-notice-btn {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 0.4rem 1rem;
  border: 1px solid var(--gold);
  background: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.cookie-notice-btn:hover {
  background: var(--gold);
  color: var(--black);
}

/* ============================================
   Rich Article Components
   ============================================ */

/* Callout boxes */
.callout {
  background: var(--off-white);
  border-left: 4px solid var(--gold);
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0;
  border-radius: 0 6px 6px 0;
  font-size: 0.95rem;
}

.callout-title {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-dark);
  margin-bottom: 0.5rem;
}

/* Data tables */
.data-table-wrapper {
  overflow-x: auto;
  margin: 2rem 0;
  border-radius: 8px;
  border: 1px solid var(--gray-200);
  background: var(--white);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.data-table thead {
  background: var(--gray-800);
  color: var(--white);
}

.data-table th {
  text-align: left;
  padding: 0.85rem 1rem;
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.data-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--gray-200);
  vertical-align: top;
}

.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:nth-child(even) { background: var(--off-white); }
.data-table .sar { color: #006C35; font-weight: 600; }
.data-table .note { font-size: 0.8rem; color: var(--gray-600); }

/* Chart containers */
.chart-container {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 1.75rem;
  margin: 2rem 0;
}

.chart-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--black);
}

.chart-subtitle {
  font-size: 0.82rem;
  color: var(--gray-600);
  margin-bottom: 1.25rem;
}

.chart-container svg {
  width: 100%;
  height: auto;
}

/* Scenario cards */
.scenario-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 1.75rem;
  margin: 1.5rem 0;
  position: relative;
}

.scenario-card::before {
  content: attr(data-label);
  position: absolute;
  top: -0.7rem;
  left: 1.25rem;
  background: var(--gray-800);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.scenario-card h4 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.65rem;
  margin-top: 0.25rem;
}

.scenario-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1rem;
}

.scenario-item {
  background: var(--off-white);
  padding: 0.65rem 0.85rem;
  border-radius: 5px;
  font-size: 0.85rem;
}

.scenario-item-label {
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold-dark);
  margin-bottom: 0.15rem;
}

/* Pitfall list */
.pitfall {
  display: flex;
  gap: 1rem;
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
}

.pitfall-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: var(--gray-800);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.85rem;
  margin-top: 0.15rem;
}

.pitfall-text { flex: 1; }
.pitfall-text strong { display: block; margin-bottom: 0.2rem; }
.pitfall-text p { margin-bottom: 0; font-size: 0.9rem; color: var(--gray-600); }

/* Timeline */
.timeline {
  position: relative;
  padding-left: 2.5rem;
  margin: 2rem 0;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0.6rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gold);
}

.timeline-item {
  position: relative;
  margin-bottom: 1.5rem;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -2.15rem;
  top: 0.35rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--white);
}

.timeline-year {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--gold-dark);
  margin-bottom: 0.2rem;
}

.timeline-text {
  font-size: 0.9rem;
  color: var(--gray-600);
}

/* Rich article responsive */
@media (max-width: 767px) {
  .scenario-grid { grid-template-columns: 1fr; }
  .data-table { font-size: 0.8rem; }
  .data-table th, .data-table td { padding: 0.6rem 0.75rem; }
}

/* ============================================
   RTL Support (Arabic)
   ============================================ */
[dir="rtl"] body {
  font-family: 'Noto Sans Arabic', 'Inter', -apple-system, sans-serif;
  line-height: 2.0;
}

[dir="rtl"] .logo-link {
  margin-right: 0;
  margin-left: auto;
}

[dir="rtl"] .lang-switcher {
  margin-right: 0;
  margin-left: 1rem;
}

/* Remove letter-spacing on Arabic text — breaks connected script */
[dir="rtl"] h4,
[dir="rtl"] .nav-list a,
[dir="rtl"] .filter-btn,
[dir="rtl"] .article-category,
[dir="rtl"] .article-hero-cat,
[dir="rtl"] .pillar-label,
[dir="rtl"] .btn,
[dir="rtl"] .form-group label,
[dir="rtl"] .lang-link,
[dir="rtl"] .service-link,
[dir="rtl"] .link-arrow,
[dir="rtl"] .footer-locations,
[dir="rtl"] .copyright,
[dir="rtl"] .article-meta time {
  letter-spacing: 0;
}

[dir="rtl"] .logo-wordmark {
  letter-spacing: 0.1em;
}

/* RTL text alignment */
[dir="rtl"] .services-header h2,
[dir="rtl"] .services-sub {
  text-align: right;
}

/* RTL hero */
[dir="rtl"] .hero-inner {
  padding-left: 1.5rem;
  padding-right: 6%;
}

[dir="rtl"] .hero-overlay {
  background: linear-gradient(
    to left,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.65) 40%,
    rgba(0, 0, 0, 0.5) 100%
  );
}

[dir="rtl"] .hero-ghost img {
  animation-name: heroDriftRtl;
}

@keyframes heroDriftRtl {
  from { transform: translateX(0); }
  to { transform: translateX(30px); }
}

/* RTL corridor */
[dir="rtl"] .corridor-visual {
  flex-direction: row-reverse;
}

/* RTL service details */
[dir="rtl"] .service-detail-body li {
  padding-left: 0;
  padding-right: 1.25rem;
}

[dir="rtl"] .service-detail-body li::before {
  left: auto;
  right: 0;
}

[dir="rtl"] .service-card:hover .service-link {
  transform: translateX(-8px);
}

/* RTL form */
[dir="rtl"] .contact-form .btn {
  align-self: flex-end;
}

[dir="rtl"] .form-group select {
  background-position: left 0 center;
  padding-right: 0;
  padding-left: 1.5rem;
}

/* RTL rich article components */
[dir="rtl"] .callout {
  border-left: none;
  border-right: 4px solid var(--gold);
  border-radius: 6px 0 0 6px;
}

[dir="rtl"] .data-table th { text-align: right; }

[dir="rtl"] .scenario-card::before {
  left: auto;
  right: 1.25rem;
}

[dir="rtl"] .timeline {
  padding-left: 0;
  padding-right: 2.5rem;
}

[dir="rtl"] .timeline::before {
  left: auto;
  right: 0.6rem;
}

[dir="rtl"] .timeline-item::before {
  left: auto;
  right: -2.15rem;
}

[dir="rtl"] .pitfall {
  flex-direction: row-reverse;
}

[dir="rtl"] .hub-callout {
  border-left: none;
  border-right: 3px solid var(--gold);
}

[dir="rtl"] .hub-template-card li {
  padding-left: 0;
  padding-right: 1rem;
}

[dir="rtl"] .hub-template-card li::before {
  left: auto;
  right: 0;
}

[dir="rtl"] .about-section-intro,
[dir="rtl"] .about-block,
[dir="rtl"] .about-corridor-head,
[dir="rtl"] .about-not {
  text-align: right;
}

[dir="rtl"] .about-hero-actions {
  align-items: flex-end;
}

[dir="rtl"] .about-hero::after {
  inset: auto 48% 4.5rem -10%;
}

[dir="rtl"] .about-corridor-side li {
  padding-left: 0;
  padding-right: 1rem;
}

[dir="rtl"] .about-corridor-side li::before {
  left: auto;
  right: 0;
}

[dir="rtl"] .about-process-num {
  left: auto;
  right: 1.35rem;
}

[dir="rtl"] .about-counterparty-card::before {
  background: linear-gradient(270deg, var(--gold), rgba(201, 168, 76, 0));
}

/* RTL about story: reverse image/text order */
[dir="rtl"] .skip-link {
  left: auto;
  right: 1rem;
}

/* RTL footer */
[dir="rtl"] .footer-inner {
  direction: rtl;
}

/* RTL responsive */
@media (min-width: 768px) {
  .hub-search-bar {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: end;
  }

  .hub-grid--categories,
  .hub-grid--cards,
  .hub-grid--roadmap,
  .hub-grid--scaffolds,
  .hub-template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hub-meta-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .editorial-bar {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .editorial-bar__item {
    border-bottom: 0;
    border-right: 1px solid var(--gray-100);
  }

  .editorial-bar__item:last-child {
    border-right: 0;
  }

  [dir="rtl"] .hero-inner {
    padding-right: 10%;
    padding-left: 1.5rem;
  }

  [dir="rtl"] .footer-inner {
    text-align: right;
  }

  [dir="rtl"] .contact-page-grid {
    direction: rtl;
  }

  [dir="rtl"] .editorial-bar__item {
    border-right: 0;
    border-left: 1px solid var(--gray-100);
  }

  [dir="rtl"] .editorial-bar__item:last-child {
    border-left: 0;
  }
}

@media (min-width: 1024px) {
  .hub-hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
    align-items: end;
  }

  .hub-grid--categories,
  .hub-grid--cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hub-grid--roadmap,
  .hub-template-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hub-scaffold-grid {
    gap: 2rem;
  }

  .hub-scaffold-body {
    grid-template-columns: minmax(0, 1fr);
    max-width: 72rem;
  }

  .hub-scaffold-body > section {
    padding: 1.6rem 1.7rem;
  }

  [dir="rtl"] .hero-inner {
    padding-right: 12%;
    padding-left: 1.5rem;
  }

  [dir="rtl"] .lang-switcher {
    margin-left: 0;
    margin-right: 1.5rem;
  }

  .lang-switcher {
    order: 3;
    margin-right: 0;
    margin-left: 1.5rem;
  }
}

/* ============================================
   Print
   ============================================ */
@media print {
  .site-header, .hamburger, .contact-form, .hero-bg, .hero-overlay, .hero-scroll, .hero-alive { display: none; }
  .hero, .page-hero { min-height: auto; padding: 2rem 0; background: none; color: var(--black); }
  .hero h1 { color: var(--black); }
  .hero-sub { color: var(--gray-600); }
  .hero-line, .hero-sub, .btn--outline { opacity: 1; transform: none; animation: none; }
  .page-hero .hero-sub { color: var(--gray-600); }
  .fade-in { opacity: 1; transform: none; }
  .section--dark { background: none; color: var(--black); }
  .section--dark .lead, .pillar p, .contact-cta h2, .approach-item p, .location-city p { color: var(--gray-600); }
  .pillar h3, .contact-cta h2, .approach-item h3, .location-city h3 { color: var(--black); }
}