/* ============================================================
   RV TOURS — CONTACT US  ·  Sky Blue + White Premium Theme
   ============================================================ */

/* ── Design tokens for this page ── */
:root {
  --sky-50:    #F0F9FF;
  --sky-100:   #E0F2FE;
  --sky-200:   #BAE6FD;
  --sky-300:   #7DD3FC;
  --sky-400:   #38BDF8;
  --sky-500:   #0EA5E9;
  --sky-600:   #0284C7;
  --sky-700:   #0369A1;
  --sky-800:   #075985;
  --ink:       #0C1A2E;
  --ink-mid:   #1E3A5F;
  --muted:     #64748B;
  --border:    #E2EAF4;
}

/* ============================================================
   1. HERO
   ============================================================ */
.cu-hero {
  background: #06070f;
  min-height: 100vh;
  display: flex; align-items: center;
  overflow: hidden;
  position: relative;
  padding-top: 90px;
}

.cu-hero::before,
.cu-hero::after { content: none; }

/* Inner layout */
.cu-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative; z-index: 2;
  width: 100%;
}

/* ── Left copy ── */
.cu-hero-copy {}

.cu-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 18px;
  background: rgba(14,165,233,0.12);
  border: 1px solid rgba(14,165,233,0.28);
  border-radius: 100px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--sky-300);
  margin-bottom: 28px;
}
.cu-hero-badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sky-500);
  animation: badgePulse 2.2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.6); opacity: 0.5; }
}

.cu-hero-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: 78px; font-weight: 700;
  line-height: 0.98; letter-spacing: -2px;
  color: #ffffff;
  margin-bottom: 28px;
}
.cu-hero-heading .cu-line-sky {
  display: block;
  color: var(--sky-400);
  font-style: italic;
}
.cu-hero-heading .cu-line-white {
  display: block;
  -webkit-text-stroke: 1.5px rgba(255,255,255,0.55);
  color: transparent;
}

.cu-hero-desc {
  font-family: 'Poppins', sans-serif;
  font-size: 15.5px; font-weight: 300;
  color: rgba(255,255,255,0.55); line-height: 1.80;
  max-width: 420px;
  margin-bottom: 44px;
}

.cu-hero-actions {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}

.cu-btn-sky {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 38px;
  background: var(--sky-500); color: #fff;
  border-radius: 100px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  box-shadow: 0 12px 36px rgba(14,165,233,0.35);
  transition: all 0.38s cubic-bezier(0.34,1.56,0.64,1);
  position: relative; overflow: hidden;
}
.cu-btn-sky::after {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: rgba(255,255,255,0.15);
  opacity: 0; transition: opacity 0.3s;
}
.cu-btn-sky:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 20px 52px rgba(14,165,233,0.45); }
.cu-btn-sky:hover::after { opacity: 1; }

.cu-btn-outline {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 38px;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: 100px; color: rgba(255,255,255,0.85);
  font-family: 'Montserrat', sans-serif;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase;
  transition: all 0.32s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cu-btn-outline:hover {
  border-color: var(--sky-400);
  color: #ffffff;
  background: rgba(14,165,233,0.14);
  transform: translateY(-3px);
}

/* ── Right visual — globe illustration ── */
.cu-hero-visual {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}

.cu-globe-wrap {
  position: relative;
  width: 500px; height: 500px;
}

/* Outer glow halo */
.cu-globe-halo {
  position: absolute; inset: -30px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(14,165,233,0.10) 0%,
    rgba(14,165,233,0.03) 55%,
    transparent 75%);
  animation: haloBreath 5s ease-in-out infinite;
}
@keyframes haloBreath {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.06); opacity: 0.6; }
}

/* Main SVG globe */
.cu-globe-svg {
  width: 100%; height: 100%;
  animation: globeSpin 40s linear infinite;
}
@keyframes globeSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Center dot doesn't spin */
.cu-globe-center { animation: none; }

/* Floating destination chips */
.cu-dest-chip {
  position: absolute;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.90);
  backdrop-filter: blur(16px);
  border: 1px solid var(--sky-200);
  border-radius: 100px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--ink-mid);
  box-shadow: 0 8px 28px rgba(14,165,233,0.14);
  white-space: nowrap;
  animation: chipFloat 5s ease-in-out infinite;
}
.cu-dest-chip-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sky-500); flex-shrink: 0;
}
.cu-dest-chip:nth-child(1) { top: 6%;  right: -30px; animation-delay: 0s; }
.cu-dest-chip:nth-child(2) { top: 42%; right: -48px; animation-delay: 1.2s; }
.cu-dest-chip:nth-child(3) { bottom: 18%; left: -40px; animation-delay: 0.7s; }
.cu-dest-chip:nth-child(4) { top: 22%;  left: -38px; animation-delay: 2s; }
@keyframes chipFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* Stat pill — bottom center of globe */
.cu-globe-stat {
  position: absolute; bottom: -20px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  padding: 14px 28px;
  background: #ffffff;
  border: 1px solid var(--sky-100);
  border-radius: 100px;
  box-shadow: 0 12px 40px rgba(14,165,233,0.16);
  white-space: nowrap;
}
.cu-globe-stat-item { display: flex; flex-direction: column; align-items: center; }
.cu-globe-stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px; font-weight: 700; color: var(--ink);
  line-height: 1;
}
.cu-globe-stat-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 7.5px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}
.cu-globe-stat-sep {
  width: 1px; height: 32px;
  background: var(--border);
}

/* Hero bottom decor — thin sky line */
.cu-hero-rule {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%, var(--sky-200) 30%, var(--sky-400) 50%, var(--sky-200) 70%, transparent 100%);
}


/* ============================================================
   2. CONTACT INFO CARDS
   ============================================================ */
.cu-info {
  background: var(--sky-50);
  padding: 100px 0;
  position: relative;
}

/* Subtle pattern overlay */
.cu-info::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(14,165,233,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.cu-info-header {
  text-align: center;
  margin-bottom: 60px;
  position: relative; z-index: 1;
}
.cu-info-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--sky-600);
  margin-bottom: 14px;
}
.cu-info-eyebrow::before, .cu-info-eyebrow::after {
  content: '';
  display: inline-block; width: 24px; height: 1px;
  background: var(--sky-400);
}
.cu-info-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 48px; font-weight: 700;
  color: var(--ink); line-height: 1.1;
}
.cu-info-title em { font-style: italic; color: var(--sky-600); }

.cu-info-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative; z-index: 1;
}

.cu-info-card {
  background: #ffffff;
  border: 1px solid transparent;
  border-radius: 24px;
  padding: 44px 36px 40px;
  text-align: center;
  box-shadow: 0 4px 24px rgba(14,165,233,0.06), 0 1px 4px rgba(0,0,0,0.04);
  transition: all 0.38s cubic-bezier(0.25,0.46,0.45,0.94);
  position: relative; overflow: hidden;
  cursor: default;
}
.cu-info-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--sky-400), var(--sky-600));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s ease;
}
.cu-info-card:hover {
  transform: translateY(-10px);
  border-color: var(--sky-200);
  box-shadow: 0 24px 60px rgba(14,165,233,0.14), 0 2px 8px rgba(0,0,0,0.04);
}
.cu-info-card:hover::before { transform: scaleX(1); }

.cu-info-icon {
  width: 72px; height: 72px; border-radius: 20px;
  background: var(--sky-50);
  border: 1.5px solid var(--sky-100);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
  color: var(--sky-600);
  transition: all 0.35s ease;
}
.cu-info-card:hover .cu-info-icon {
  background: var(--sky-500);
  border-color: var(--sky-500);
  color: #ffffff;
  transform: rotate(-6deg) scale(1.08);
}

.cu-info-card-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--sky-500);
  display: block; margin-bottom: 10px;
}
.cu-info-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight: 700;
  color: var(--ink); margin-bottom: 14px;
  line-height: 1.2;
}
.cu-info-card-text {
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px; font-weight: 300;
  color: var(--muted); line-height: 1.75;
}
.cu-info-card-text a {
  color: var(--muted); transition: color 0.25s;
}
.cu-info-card-text a:hover { color: var(--sky-600); }

.cu-info-card-action {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--sky-600);
  transition: gap 0.25s;
}
.cu-info-card-action:hover { gap: 10px; }


/* ============================================================
   3. CONTACT FORM
   ============================================================ */
.cu-form-section {
  background: #ffffff;
  padding: 110px 0;
  position: relative; overflow: hidden;
}
/* Faint sky streaks */
.cu-form-section::before {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 50%; height: 100%;
  background: var(--sky-50);
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0% 100%);
  pointer-events: none;
}

.cu-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: start;
  position: relative; z-index: 1;
}

/* ── Left form copy ── */
.cu-form-copy {}
.cu-form-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--sky-600);
  margin-bottom: 20px;
}
.cu-form-tag::before {
  content: '';
  display: inline-block; width: 20px; height: 2px;
  background: var(--sky-400);
  border-radius: 2px;
}
.cu-form-copy-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 52px; font-weight: 700;
  color: var(--ink); line-height: 1.08;
  margin-bottom: 22px;
  letter-spacing: -1px;
}
.cu-form-copy-title em { font-style: italic; color: var(--sky-600); }

.cu-form-copy-desc {
  font-family: 'Poppins', sans-serif;
  font-size: 14px; font-weight: 300;
  color: var(--muted); line-height: 1.85;
  margin-bottom: 44px;
}

/* Promise items */
.cu-promises {
  display: flex; flex-direction: column; gap: 16px;
}
.cu-promise-item {
  display: flex; align-items: center; gap: 14px;
}
.cu-promise-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: var(--sky-100);
  display: flex; align-items: center; justify-content: center;
  color: var(--sky-600);
}
.cu-promise-text {
  font-family: 'Poppins', sans-serif;
  font-size: 13px; font-weight: 400;
  color: var(--ink-mid);
}

/* ── Right form card ── */
.cu-form-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 52px 48px;
  box-shadow: 0 20px 80px rgba(14,165,233,0.10), 0 4px 16px rgba(0,0,0,0.04);
  position: relative; overflow: hidden;
}
.cu-form-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--sky-300), var(--sky-500), var(--sky-300));
}

.cu-form-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px; font-weight: 700;
  color: var(--ink); margin-bottom: 32px;
}

/* The form itself */
.cu-form {
  display: flex; flex-direction: column; gap: 20px;
}
.cu-form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}

/* Floating label field */
.cu-field { position: relative; }

.cu-field input,
.cu-field select,
.cu-field textarea {
  width: 100%;
  padding: 22px 16px 8px;
  background: var(--sky-50);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  color: var(--ink);
  font-family: 'Poppins', sans-serif;
  font-size: 14px; font-weight: 300;
  outline: none;
  -webkit-appearance: none; appearance: none;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.cu-field input::placeholder,
.cu-field textarea::placeholder { color: transparent; }

.cu-field input:focus,
.cu-field select:focus,
.cu-field textarea:focus {
  background: #ffffff;
  border-color: var(--sky-400);
  box-shadow: 0 0 0 4px rgba(14,165,233,0.10);
}

.cu-field label {
  position: absolute; top: 15px; left: 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px; font-weight: 300;
  color: var(--muted);
  pointer-events: none;
  transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
  transform-origin: left top;
}
.cu-field input:focus ~ label,
.cu-field input:not(:placeholder-shown) ~ label,
.cu-field select:focus ~ label,
.cu-field textarea:focus ~ label,
.cu-field textarea:not(:placeholder-shown) ~ label {
  top: 6px; font-size: 9.5px;
  font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--sky-600);
}

/* Select arrow */
.cu-field--select::after {
  content: '';
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--sky-500);
  pointer-events: none;
}
.cu-field--select select { cursor: pointer; }
.cu-field--select select option { background: #ffffff; color: var(--ink); }

.cu-field textarea { height: 120px; resize: none; padding-top: 26px; }

/* Date label always floated */
.cu-field--date label {
  top: 6px; font-size: 9.5px;
  font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--sky-600);
}
.cu-field--date input { color-scheme: light; }

/* Submit row */
.cu-form-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-top: 6px;
}
.cu-form-note {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Poppins', sans-serif;
  font-size: 11px; font-weight: 300;
  color: var(--muted);
}
.cu-form-note svg { color: var(--sky-500); flex-shrink: 0; }

.cu-form-submit {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 44px;
  background: var(--sky-500); color: #ffffff;
  border: none; border-radius: 100px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px; font-weight: 800;
  letter-spacing: 1.6px; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 36px rgba(14,165,233,0.32);
  transition: all 0.40s cubic-bezier(0.34,1.56,0.64,1);
}
.cu-form-submit::before {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.20), transparent);
  transition: left 0.55s ease;
}
.cu-form-submit:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 20px 52px rgba(14,165,233,0.42); }
.cu-form-submit:hover::before { left: 100%; }
.cu-form-submit-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.20);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s ease;
}
.cu-form-submit:hover .cu-form-submit-icon { transform: translateX(4px); }

/* Success message */
.cu-form-success {
  display: none;
  flex-direction: column; align-items: center;
  text-align: center; padding: 48px 20px; gap: 16px;
}
.cu-form-success.is-visible { display: flex; }
.cu-form.is-sent { display: none; }

.cu-success-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--sky-100);
  border: 2px solid var(--sky-300);
  display: flex; align-items: center; justify-content: center;
  color: var(--sky-600);
}
.cu-success-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px; font-weight: 700; color: var(--ink);
}
.cu-success-msg {
  font-family: 'Poppins', sans-serif;
  font-size: 13px; font-weight: 300;
  color: var(--muted); max-width: 280px; line-height: 1.7;
}


/* ============================================================
   4. WHY CHOOSE US
   ============================================================ */
.cu-why {
  background: var(--ink);
  padding: 110px 0;
  position: relative; overflow: hidden;
}

/* Sky-blue top edge accent */
.cu-why::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--sky-400), var(--sky-500), var(--sky-400), transparent);
}

/* Background grid pattern */
.cu-why::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(14,165,233,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,165,233,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.cu-why-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: end;
  margin-bottom: 72px;
  position: relative; z-index: 1;
}
.cu-why-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--sky-400);
  margin-bottom: 18px;
}
.cu-why-eyebrow::before {
  content: '';
  display: inline-block; width: 20px; height: 1px;
  background: var(--sky-400);
}
.cu-why-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 52px; font-weight: 700;
  color: #ffffff; line-height: 1.08;
  letter-spacing: -1px;
}
.cu-why-title em { font-style: italic; color: var(--sky-400); }

.cu-why-desc {
  font-family: 'Poppins', sans-serif;
  font-size: 14px; font-weight: 300;
  color: rgba(255,255,255,0.45); line-height: 1.85;
}
.cu-why-big-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 110px; font-weight: 700;
  color: rgba(14,165,233,0.08);
  line-height: 1; letter-spacing: -4px;
  pointer-events: none; user-select: none;
  text-align: right;
}

/* Features list */
.cu-why-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 24px;
  overflow: hidden;
  position: relative; z-index: 1;
}

.cu-feature {
  background: rgba(255,255,255,0.02);
  padding: 44px 40px;
  display: flex; align-items: flex-start; gap: 24px;
  transition: background 0.32s;
  position: relative;
}
.cu-feature:hover { background: rgba(14,165,233,0.06); }

.cu-feature-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 48px; font-weight: 700;
  color: rgba(14,165,233,0.18);
  line-height: 1; flex-shrink: 0;
  transition: color 0.32s;
}
.cu-feature:hover .cu-feature-num { color: rgba(14,165,233,0.45); }

.cu-feature-body {}
.cu-feature-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(14,165,233,0.10);
  border: 1px solid rgba(14,165,233,0.20);
  display: flex; align-items: center; justify-content: center;
  color: var(--sky-400);
  margin-bottom: 14px;
  transition: all 0.32s;
}
.cu-feature:hover .cu-feature-icon {
  background: var(--sky-500);
  border-color: var(--sky-500);
  color: #fff;
}
.cu-feature-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-weight: 700;
  color: #ffffff; line-height: 1.2;
  margin-bottom: 10px;
}
.cu-feature-desc {
  font-family: 'Poppins', sans-serif;
  font-size: 13px; font-weight: 300;
  color: rgba(255,255,255,0.40);
  line-height: 1.75;
}


/* ============================================================
   5. OFFICE / MAP
   ============================================================ */
.cu-map-section {
  background: #ffffff;
  padding: 110px 0;
  position: relative;
}

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

/* Office detail card */
.cu-office-card {
  background: var(--sky-50);
  border: 1px solid var(--sky-100);
  border-radius: 28px;
  padding: 48px 40px;
  position: sticky; top: 110px;
}
.cu-office-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--sky-600);
  margin-bottom: 16px;
}
.cu-office-tag::before {
  content: '';
  display: inline-block; width: 16px; height: 2px;
  background: var(--sky-400); border-radius: 2px;
}
.cu-office-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px; font-weight: 700;
  color: var(--ink); line-height: 1.15;
  margin-bottom: 30px;
}
.cu-office-details {
  display: flex; flex-direction: column; gap: 18px;
  margin-bottom: 36px;
}
.cu-office-detail {
  display: flex; align-items: flex-start; gap: 14px;
}
.cu-office-detail-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: rgba(14,165,233,0.10);
  display: flex; align-items: center; justify-content: center;
  color: var(--sky-600);
}
.cu-office-detail-body {}
.cu-office-detail-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 8.5px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--sky-500); margin-bottom: 3px;
}
.cu-office-detail-value {
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px; font-weight: 300;
  color: var(--muted); line-height: 1.55;
}

.cu-directions-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 28px;
  background: var(--sky-500); color: #ffffff;
  border-radius: 100px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  box-shadow: 0 8px 28px rgba(14,165,233,0.28);
  transition: all 0.35s ease;
}
.cu-directions-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 16px 44px rgba(14,165,233,0.38);
}

/* Map container */
.cu-map-frame {
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--sky-100);
  box-shadow: 0 20px 60px rgba(14,165,233,0.10);
  position: relative;
}
.cu-map-frame iframe {
  width: 100%; height: 480px;
  display: block; border: none;
  filter: saturate(0.85) brightness(1.02);
}


/* ============================================================
   6. CTA SECTION
   ============================================================ */
.cu-cta {
  background: linear-gradient(135deg, var(--sky-600) 0%, var(--sky-800) 100%);
  padding: 100px 0;
  position: relative; overflow: hidden;
}

/* Abstract plane path decoration */
.cu-cta::before {
  content: '';
  position: absolute;
  top: -100px; right: -200px;
  width: 600px; height: 600px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.08);
  pointer-events: none;
}
.cu-cta::after {
  content: '';
  position: absolute;
  top: -60px; right: -140px;
  width: 400px; height: 400px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
}

.cu-cta-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px; align-items: center;
  position: relative; z-index: 1;
}

.cu-cta-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 100px;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(255,255,255,0.80);
  margin-bottom: 20px;
}

.cu-cta-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 58px; font-weight: 700;
  color: #ffffff; line-height: 1.06;
  letter-spacing: -1.5px;
  margin-bottom: 18px;
}
.cu-cta-title em { font-style: italic; color: var(--sky-200); }

.cu-cta-sub {
  font-family: 'Poppins', sans-serif;
  font-size: 15px; font-weight: 300;
  color: rgba(255,255,255,0.60); line-height: 1.75;
  max-width: 460px;
}

.cu-cta-actions {
  display: flex; flex-direction: column;
  gap: 14px; align-items: flex-end;
}

.cu-cta-btn-white {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 18px 44px;
  background: #ffffff; color: var(--sky-700);
  border-radius: 100px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px; font-weight: 800;
  letter-spacing: 1.2px; text-transform: uppercase;
  box-shadow: 0 12px 40px rgba(0,0,0,0.20);
  white-space: nowrap;
  transition: all 0.38s cubic-bezier(0.34,1.56,0.64,1);
}
.cu-cta-btn-white:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 22px 56px rgba(0,0,0,0.28); }

.cu-cta-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 32px;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.30);
  border-radius: 100px; color: rgba(255,255,255,0.80);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.32s ease;
}
.cu-cta-btn-ghost:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.55);
  color: #ffffff;
  transform: translateY(-2px);
}

/* Decorative float dots in CTA */
.cu-cta-dots {
  position: absolute; left: 5%; bottom: 30px;
  display: flex; gap: 8px; align-items: center;
  z-index: 1; pointer-events: none;
}
.cu-cta-dot {
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
}
.cu-cta-dot:nth-child(1) { width:8px; height:8px; }
.cu-cta-dot:nth-child(2) { width:5px; height:5px; opacity:.6; }
.cu-cta-dot:nth-child(3) { width:10px; height:10px; opacity:.4; }
.cu-cta-dot:nth-child(4) { width:4px; height:4px; opacity:.8; }
.cu-cta-dot:nth-child(5) { width:7px; height:7px; opacity:.5; }


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  .cu-hero-heading { font-size: 60px; }
  .cu-globe-wrap { width: 400px; height: 400px; }
  .cu-cta-title { font-size: 46px; }
}

@media (max-width: 1024px) {
  .cu-hero-grid { grid-template-columns: 1fr; gap: 60px; text-align: center; }
  .cu-hero-copy { order: 1; }
  .cu-hero-visual { order: 2; }
  .cu-hero-desc { max-width: 100%; margin-left: auto; margin-right: auto; }
  .cu-hero-actions { justify-content: center; }
  .cu-globe-wrap { width: 360px; height: 360px; }
  .cu-dest-chip:nth-child(1) { right: 0; }
  .cu-dest-chip:nth-child(2) { right: -10px; }
  .cu-dest-chip:nth-child(3) { left: 0; }
  .cu-dest-chip:nth-child(4) { left: 0; }
  .cu-info-cards { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .cu-form-grid { grid-template-columns: 1fr; gap: 48px; }
  .cu-form-section::before { display: none; }
  .cu-why-header { grid-template-columns: 1fr; }
  .cu-why-big-num { display: none; }
  .cu-map-grid { grid-template-columns: 1fr; }
  .cu-office-card { position: static; }
  .cu-cta-inner { grid-template-columns: 1fr; }
  .cu-cta-actions { flex-direction: row; align-items: flex-start; }
  .cu-why-features { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .cu-hero-heading { font-size: 44px; letter-spacing: -1px; }
  .cu-globe-wrap { width: 280px; height: 280px; }
  .cu-form-row { grid-template-columns: 1fr; }
  .cu-form-card { padding: 36px 28px; }
  .cu-form-footer { flex-direction: column; align-items: flex-start; }
  .cu-form-submit { width: 100%; justify-content: center; }
  .cu-why-features { gap: 0; }
  .cu-cta-title { font-size: 36px; }
  .cu-cta-actions { flex-direction: column; }
  .cu-cta-btn-white, .cu-cta-btn-ghost { width: 100%; justify-content: center; }
  .cu-map-frame iframe { height: 340px; }
}

@media (max-width: 480px) {
  .cu-hero { padding-top: 80px; }
  .cu-hero-heading { font-size: 34px; }
  .cu-hero-badge { font-size: 8.5px; }
  .cu-btn-sky, .cu-btn-outline { width: 100%; justify-content: center; }
  .cu-hero-actions { flex-direction: column; }
  .cu-info-title { font-size: 34px; }
  .cu-form-copy-title { font-size: 36px; }
  .cu-why-title { font-size: 36px; }
  .cu-feature { padding: 32px 24px; }
  .cu-office-card { padding: 32px 24px; }
  .cu-cta-title { font-size: 30px; }
}


/* ============================================================
   NAVBAR — contact-us.php has a white hero (background: #ffffff).
   A transparent navbar with white text would be invisible on white.
   We apply the same dark-glass state that style.css uses for .scrolled,
   so the navbar is always readable from page load on this page.
   Scoped to .cu-body (contact-us.php) so this rule cannot leak to
   other pages if the stylesheet is ever bundled or cached globally.
   ============================================================ */
/*
 * contact-us hero is white (#ffffff) so the clear glass navbar needs a
 * slightly stronger tint to stay readable over a light background.
 * Still matches the frosted-glass look from the screenshot.
 */
.cu-body .navbar .navbar-inner,
.cu-body .navbar.scrolled .navbar-inner {
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  border-color: rgba(255, 255, 255, 0.20);
  border-top-color: rgba(255, 255, 255, 0.32);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.10) inset;
}


/* ============================================================
   HERO — Earth Video Globe
   ============================================================ */
.cu-earth-wrap {
  position: relative;
  width: 540px; height: 540px;
  display: flex; align-items: center; justify-content: center;
}

.cu-earth-halo {
  position: absolute; border-radius: 50%; pointer-events: none;
}
.cu-earth-halo--1 {
  inset: -48px;
  background: radial-gradient(circle,
    rgba(14,165,233,0.13) 0%,
    rgba(56,189,248,0.05) 50%,
    transparent 72%);
  animation: haloBreath 6s ease-in-out infinite;
}
.cu-earth-halo--2 {
  inset: -20px;
  background: radial-gradient(circle,
    rgba(14,165,233,0.07) 0%,
    transparent 65%);
  animation: haloBreath 6s ease-in-out infinite;
  animation-delay: 2s;
}

.cu-earth-orbit {
  position: absolute; inset: -24px;
  border-radius: 50%;
  border: 1.5px dashed rgba(14,165,233,0.22);
  animation: orbitSpin 32s linear infinite;
  pointer-events: none;
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }

/* The circular video container */
.cu-earth-circle {
  width: 460px; height: 460px;
  border-radius: 50%;
  overflow: hidden;
  position: relative; z-index: 2;
  border: 3px solid rgba(255, 255, 255, 0.88);
  box-shadow:
    0 0 0 1px rgba(14,165,233,0.30),
    0 0 0 14px rgba(14,165,233,0.08),
    0 36px 90px rgba(14,165,233,0.24),
    0 10px 36px rgba(0,0,0,0.14);
  animation: earthFloat 7s ease-in-out infinite;
}
@keyframes earthFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-16px) scale(1.012); }
}

.cu-earth-video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Chip positions unchanged — they now surround the earth circle */
.cu-dest-chip:nth-child(4) { top: 6%;  right: -36px; }
.cu-dest-chip:nth-child(5) { top: 42%; right: -54px; }
.cu-dest-chip:nth-child(6) { bottom: 18%; left: -46px; }
.cu-dest-chip:nth-child(7) { top: 22%;  left: -44px; }

/* Stat pill sits below earth circle */
.cu-globe-stat { bottom: -24px; }


/* ============================================================
   2-NEW. CONTACT TOUCH POINTS
   ============================================================ */
.cu-touch {
  background: #ffffff;
  position: relative; overflow: hidden;
}

.cu-touch-header {
  padding-top: 100px; padding-bottom: 64px;
  text-align: center;
}
.cu-touch-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--sky-600); margin-bottom: 18px;
}
.cu-touch-eyebrow::before, .cu-touch-eyebrow::after {
  content: '';
  display: inline-block; width: 28px; height: 1.5px;
  background: var(--sky-400);
}
.cu-touch-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 54px; font-weight: 700;
  color: var(--ink); line-height: 1.06;
  letter-spacing: -1.2px; margin-bottom: 18px;
}
.cu-touch-title em { font-style: italic; color: var(--sky-600); }
.cu-touch-subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 15px; font-weight: 300;
  color: var(--muted); max-width: 520px; margin: 0 auto;
  line-height: 1.80;
}

/* Full-width stacked row cards */
.cu-touch-cards { display: flex; flex-direction: column; }

.cu-tc-card {
  display: grid;
  grid-template-columns: 130px 72px 1fr auto;
  gap: 48px; align-items: center;
  padding: 52px 80px;
  background: #ffffff;
  border-top: 1px solid var(--border);
  position: relative; overflow: hidden;
  transition: background 0.35s ease;
  cursor: default;
}
.cu-tc-card:last-child { border-bottom: 1px solid var(--border); }
.cu-tc-card:hover { background: var(--sky-50); }

/* Ghost step number */
.cu-tc-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 100px; font-weight: 700; line-height: 1;
  color: rgba(14,165,233,0.07);
  letter-spacing: -4px;
  pointer-events: none; user-select: none;
  transition: color 0.40s;
}
.cu-tc-card:hover .cu-tc-num { color: rgba(14,165,233,0.15); }

/* Icon box */
.cu-tc-icon {
  width: 64px; height: 64px; border-radius: 18px; flex-shrink: 0;
  background: var(--sky-50);
  border: 1.5px solid var(--sky-100);
  display: flex; align-items: center; justify-content: center;
  color: var(--sky-600);
  transition: all 0.38s cubic-bezier(0.34,1.56,0.64,1);
}
.cu-tc-card:hover .cu-tc-icon {
  background: var(--sky-500);
  border-color: var(--sky-500);
  color: #ffffff;
  transform: rotate(-6deg) scale(1.10);
}

/* Card content */
.cu-tc-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--sky-500); margin-bottom: 8px;
}
.cu-tc-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px; font-weight: 700;
  color: var(--ink); line-height: 1.1; margin-bottom: 10px;
}
.cu-tc-text {
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px; font-weight: 300;
  color: var(--muted); line-height: 1.80;
}
.cu-tc-text a { color: var(--muted); transition: color 0.25s; }
.cu-tc-text a:hover { color: var(--sky-600); }
.cu-tc-hours {
  display: block; margin-top: 5px;
  font-size: 11px; color: rgba(100,116,139,0.55);
}

/* CTA button */
.cu-tc-action {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 30px;
  border: 1.5px solid var(--sky-200);
  border-radius: 100px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--sky-600); white-space: nowrap;
  background: transparent;
  transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.cu-tc-action:hover {
  background: var(--sky-500);
  border-color: var(--sky-500);
  color: #ffffff;
  transform: translateX(6px);
  box-shadow: 0 8px 28px rgba(14,165,233,0.30);
}

/* Animated left-edge stripe */
.cu-tc-stripe {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(to bottom, var(--sky-300), var(--sky-600));
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.48s cubic-bezier(0.34,1.56,0.64,1);
}
.cu-tc-card:hover .cu-tc-stripe { transform: scaleY(1); }


/* ============================================================
   4-NEW. WHY CHOOSE US — Visual Split Layout
   ============================================================ */

/* Override old header layout */
.cu-why-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px; align-items: center;
  position: relative; z-index: 1;
}

/* Left: image stack */
.cu-why-images {
  position: relative;
  height: 580px;
}

.cu-why-img-card {
  position: absolute; border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.45);
  transition: box-shadow 0.45s;
}
.cu-why-img-card:hover {
  box-shadow: 0 32px 80px rgba(0,0,0,0.55);
}
.cu-why-img-card img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.70s ease;
}
.cu-why-img-card:hover img { transform: scale(1.07); }

.cu-why-img-card--a {
  top: 0; left: 0;
  width: 72%; height: 65%;
}
.cu-why-img-card--b {
  bottom: 0; right: 0;
  width: 65%; height: 52%;
}

.cu-why-img-label {
  position: absolute; bottom: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  background: rgba(0,0,0,0.58);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 100px;
  font-family: 'Montserrat', sans-serif;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255,255,255,0.88);
}
.cu-why-img-label svg { color: var(--sky-300); flex-shrink: 0; }

/* Floating badge */
.cu-why-badge {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  background: linear-gradient(135deg, var(--sky-500) 0%, var(--sky-700) 100%);
  border-radius: 20px; padding: 18px 22px;
  text-align: center; min-width: 124px;
  box-shadow:
    0 12px 44px rgba(14,165,233,0.55),
    0 4px 16px rgba(0,0,0,0.30);
  border: 2px solid rgba(255,255,255,0.22);
}
.cu-why-badge-num {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 44px; font-weight: 700;
  color: #ffffff; line-height: 1;
}
.cu-why-badge-text {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 8px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(255,255,255,0.72); margin-top: 5px;
  white-space: nowrap;
}

/* Right content */
.cu-why-content {}

/* Override old why-header (no longer in HTML) */
.cu-why-header { display: none; }
.cu-why-big-num { display: none; }

/* Eyebrow, title, desc stay same but live in cu-why-content */

/* Override features — now vertical list */
.cu-why-features {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  margin-top: 36px;
}

.cu-feature {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 16px !important;
  padding: 22px 26px !important;
  display: flex !important; align-items: center !important; gap: 18px !important;
  transition: background 0.32s, border-color 0.32s !important;
}
.cu-feature:hover {
  background: rgba(14,165,233,0.09) !important;
  border-color: rgba(14,165,233,0.28) !important;
}

.cu-feature-icon {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  background: rgba(14,165,233,0.12);
  border: 1px solid rgba(14,165,233,0.22);
  display: flex; align-items: center; justify-content: center;
  color: var(--sky-400);
  transition: all 0.32s;
}
.cu-feature:hover .cu-feature-icon {
  background: var(--sky-500); border-color: var(--sky-500); color: #fff;
}

.cu-feature-body {}

.cu-feature-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 700;
  color: #ffffff; line-height: 1.2; margin-bottom: 3px;
}
.cu-feature-desc {
  font-family: 'Poppins', sans-serif;
  font-size: 12px; font-weight: 300;
  color: rgba(255,255,255,0.42); line-height: 1.65;
}


/* ============================================================
   6-NEW. DESTINATION GALLERY
   ============================================================ */
.cu-gallery {
  background: var(--sky-50);
  padding: 110px 0 120px;
  position: relative; overflow: hidden;
}
.cu-gallery::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(14,165,233,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.cu-gallery-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: end;
  margin-bottom: 52px;
  position: relative; z-index: 1;
}
.cu-gallery-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--sky-600); margin-bottom: 14px;
}
.cu-gallery-eyebrow::before {
  content: '';
  display: inline-block; width: 20px; height: 2px;
  background: var(--sky-400); border-radius: 2px;
}
.cu-gallery-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 54px; font-weight: 700;
  color: var(--ink); line-height: 1.06; letter-spacing: -1px;
}
.cu-gallery-title em { font-style: italic; color: var(--sky-600); }

.cu-gallery-header-right {
  display: flex; flex-direction: column; gap: 22px; justify-content: flex-end;
}
.cu-gallery-desc {
  font-family: 'Poppins', sans-serif;
  font-size: 14.5px; font-weight: 300;
  color: var(--muted); line-height: 1.82;
}
.cu-gallery-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--sky-600);
  transition: gap 0.28s ease;
}
.cu-gallery-link:hover { gap: 14px; }

/* Grid: large left + 3 stacked right */
.cu-gallery-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 14px; height: 620px;
  position: relative; z-index: 1;
}
.cu-gallery-col {
  display: flex; flex-direction: column; gap: 14px;
}

.cu-gallery-card {
  position: relative; border-radius: 22px;
  overflow: hidden; cursor: pointer; flex: 1;
}
.cu-gallery-card--large { height: 100%; }

.cu-gallery-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.72s cubic-bezier(0.25,0.46,0.45,0.94);
}
.cu-gallery-card:hover .cu-gallery-img { transform: scale(1.09); }

.cu-gallery-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(0,0,0,0.70) 0%,
    rgba(0,0,0,0.22) 48%,
    rgba(0,0,0,0) 78%);
  display: flex; align-items: flex-end;
  padding: 26px 28px;
  transition: background 0.42s;
}
.cu-gallery-card:hover .cu-gallery-overlay {
  background: linear-gradient(to top,
    rgba(5,48,90,0.82) 0%,
    rgba(14,165,233,0.22) 60%,
    rgba(0,0,0,0) 90%);
}

.cu-gallery-info { position: relative; z-index: 1; }

.cu-gallery-region {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(255,255,255,0.55); margin-bottom: 5px;
}
.cu-gallery-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px; font-weight: 700;
  color: #ffffff; line-height: 1; margin-bottom: 5px;
  transition: transform 0.35s ease;
}
.cu-gallery-card--large .cu-gallery-name { font-size: 52px; }
.cu-gallery-card:hover .cu-gallery-name { transform: translateY(-4px); }

.cu-gallery-tagline {
  font-family: 'Poppins', sans-serif;
  font-size: 12px; font-weight: 300;
  color: rgba(255,255,255,0.52); margin-bottom: 16px;
  opacity: 0; transform: translateY(8px);
  transition: all 0.38s ease 0.06s;
}
.cu-gallery-card:hover .cu-gallery-tagline { opacity: 1; transform: translateY(0); }

.cu-gallery-cta {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 20px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(10px);
  border-radius: 100px;
  font-family: 'Montserrat', sans-serif;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: #ffffff; white-space: nowrap;
  opacity: 0; transform: translateY(10px);
  transition: all 0.35s ease 0.12s;
}
.cu-gallery-card:hover .cu-gallery-cta {
  opacity: 1; transform: translateY(0);
  background: var(--sky-500); border-color: var(--sky-500);
}


/* ============================================================
   RESPONSIVE — NEW SECTIONS
   ============================================================ */
@media (max-width: 1200px) {
  .cu-earth-wrap  { width: 440px; height: 440px; }
  .cu-earth-circle { width: 360px; height: 360px; }
  .cu-tc-card { padding: 44px 56px; gap: 36px; }
  .cu-tc-num { font-size: 80px; }
  .cu-gallery-title { font-size: 44px; }
  .cu-gallery-grid { height: 520px; }
}

@media (max-width: 1024px) {
  .cu-earth-wrap  { width: 360px; height: 360px; }
  .cu-earth-circle { width: 300px; height: 300px; }
  .cu-tc-card { grid-template-columns: 80px 60px 1fr; padding: 36px 40px; }
  .cu-tc-action { display: none; }
  .cu-why-grid { grid-template-columns: 1fr; gap: 60px; }
  .cu-why-images { height: 400px; }
  .cu-why-img-card--a { width: 65%; height: 62%; }
  .cu-why-img-card--b { width: 58%; height: 50%; }
  .cu-gallery-header { grid-template-columns: 1fr; gap: 24px; }
  .cu-gallery-grid { grid-template-columns: 1fr; height: auto; }
  .cu-gallery-card--large { height: 360px; }
  .cu-gallery-col { flex-direction: row; height: 240px; }
  .cu-gallery-col .cu-gallery-card { flex: 1; height: 100%; }
}

@media (max-width: 768px) {
  .cu-earth-wrap  { width: 300px; height: 300px; }
  .cu-earth-circle { width: 260px; height: 260px; }
  .cu-tc-card { grid-template-columns: 60px 1fr; padding: 28px 24px; gap: 16px; }
  .cu-tc-num { font-size: 60px; }
  .cu-touch-title { font-size: 38px; }
  .cu-why-images { height: 340px; }
  .cu-gallery-col { flex-direction: column; height: auto; }
  .cu-gallery-col .cu-gallery-card { height: 200px; }
}

@media (max-width: 480px) {
  .cu-earth-wrap  { width: 240px; height: 240px; }
  .cu-earth-circle { width: 210px; height: 210px; }
  .cu-tc-num { display: none; }
  .cu-tc-card { grid-template-columns: 52px 1fr; padding: 22px 20px; gap: 14px; }
  .cu-touch-title { font-size: 30px; }
  .cu-gallery-title { font-size: 32px; }
  .cu-gallery-grid { gap: 10px; }
  .cu-gallery-card--large { height: 280px; }
  .cu-why-images { height: 280px; }
}