/* ============================================================
   responsive.css — Splendor Advisory
   ============================================================ */

html, body { overflow-x: hidden; max-width: 100vw; }
img { max-width: 100%; height: auto; }

/* Branded focus ring for keyboard accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #C8A657 !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}

/* Print stylesheet */
@media print {
  header, footer, nav, button { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  section { page-break-inside: avoid; padding: 24px 0 !important; }
  [style*="background:"] { background: transparent !important; }
  h1, h2, h3 { color: #000 !important; }
}

/* ============================================================
   TABLET   ≤ 1024 px
   ============================================================ */
@media (max-width: 1024px) {
  [style*="padding: 120px 48px"],
  [style*="padding: 110px 48px"],
  [style*="padding: 100px 48px"],
  [style*="padding: 90px 48px"],
  [style*="padding: 80px 48px"]    { padding: 70px 32px !important; }
  [style*="padding: 60px 48px"],
  [style*="padding: 64px 48px"]    { padding: 48px 32px !important; }
  [style*="padding: 60px 0"]       { padding: 40px 24px !important; }
  [style*="padding: 70px 36px"],
  [style*="padding: 60px 40px"],
  [style*="padding: 50px 40px"]    { padding: 40px 28px !important; }
  header > div[style*="padding: 20px 48px"] { padding: 14px 24px !important; gap: 18px !important; }
  [style*="grid-template-columns: repeat(4, 1fr)"]   { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(5, 1fr)"]   { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
  [style*="grid-template-columns: repeat(6, 1fr)"]   { grid-template-columns: repeat(3, 1fr) !important; }
  [style*="grid-template-columns: repeat(3, 1fr)"]   { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1fr 1.6fr"],
  [style*="grid-template-columns: 1.6fr 1fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 1fr 1.3fr"],
  [style*="grid-template-columns: 1.15fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 1.1fr 2.6fr"],
  [style*="grid-template-columns: 0.8fr 1.2fr"],
  [style*="grid-template-columns: 1fr 2.8fr"],
  [style*="grid-template-columns: 1fr 2.4fr"],
  [style*="grid-template-columns: 2.4fr 1fr"],
  [style*="grid-template-columns: 1fr 3fr"],
  [style*="grid-template-columns: 3fr 1fr"],
  [style*="grid-template-columns: 1.15fr 1fr"],
  [style*="grid-template-columns: 300px 1fr"],
  [style*="grid-template-columns: 0.85fr 1.15fr"],
  [style*="grid-template-columns: minmax(280px, 0.9fr) 1.4fr"],
  [style*="grid-template-columns: 1.4fr minmax(280px, 0.9fr)"],
  [style*="grid-template-columns: minmax(280px, 1fr) 1.3fr"],
  [style*="grid-template-columns: 120px 1.5fr 1fr"],
  [style*="grid-template-columns: 1fr 1.5fr 120px"],
  [style*="grid-template-columns: 220px 1fr"]        { grid-template-columns: 1fr !important; gap: 40px !important; }
  footer [style*="grid-template-columns: 1.6fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  [style*="font-size: 67px"]   { font-size: 48px !important; line-height: 1.08 !important; }
  [style*="font-size: 56px"]   { font-size: 40px !important; }
  [style*="font-size: 52px"]   { font-size: 38px !important; }
  [style*="font-size: 48px"]   { font-size: 36px !important; }
  [style*="font-size: 44px"]   { font-size: 34px !important; }
  [style*="font-size: 42px"]   { font-size: 32px !important; }
  [style*="font-size: 40px"]   { font-size: 30px !important; }

  /* Nav: nowrap on 7 links + 44px min touch target */
  header nav { gap: 14px !important; flex-wrap: nowrap !important; overflow: hidden; }
  header nav a { font-size: 11px !important; letter-spacing: .04em !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; }
  header a[href="consultation.html"] { padding: 12px 16px !important; min-height: 44px !important; }
}

/* ============================================================
   LARGE PHONE   ≤ 480 px
   ============================================================ */
@media (max-width: 480px) {
  [style*="padding: 56px 20px"] { padding: 48px 18px !important; }
  header img { height: 72px !important; margin-left: -40px !important; }
}

/* ============================================================
   MOBILE   ≤ 720 px
   ============================================================ */
@media (max-width: 720px) {
  [style*="padding: 120px 48px"],
  [style*="padding: 110px 48px"],
  [style*="padding: 100px 48px"],
  [style*="padding: 90px 48px"],
  [style*="padding: 80px 48px"]    { padding: 56px 20px !important; }
  [style*="padding: 60px 48px"],
  [style*="padding: 64px 48px"]    { padding: 40px 20px !important; }
  [style*="padding: 70px 36px"],
  [style*="padding: 60px 40px"],
  [style*="padding: 50px 40px"]    { padding: 32px 20px !important; }
  [style*="padding: 60px 0"]       { padding: 32px 16px !important; }
  [style*="padding: 64px 56px"],
  [style*="padding: 50px 56px"]    { padding: 36px 22px !important; }
  header > div[style*="padding: 20px 48px"] { padding: 12px 16px !important; gap: 8px !important; }
  header img                                { height: 72px !important; }

  /* Touch targets */
  button[aria-label="Previous"], button[aria-label="Next"] { width: 48px !important; height: 48px !important; }
  button[aria-label^="Slide "] { height: 14px !important; padding: 6px 0 !important; background-clip: content-box !important; }

  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1fr 1.6fr"],
  [style*="grid-template-columns: 1.6fr 1fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 1fr 1.3fr"],
  [style*="grid-template-columns: 1.15fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 1.1fr 2.6fr"],
  [style*="grid-template-columns: 0.8fr 1.2fr"],
  [style*="grid-template-columns: 1fr 2.8fr"],
  [style*="grid-template-columns: 1fr 2.4fr"],
  [style*="grid-template-columns: 2.4fr 1fr"],
  [style*="grid-template-columns: 1fr 3fr"],
  [style*="grid-template-columns: 3fr 1fr"],
  [style*="grid-template-columns: 1.15fr 1fr"],
  [style*="grid-template-columns: 300px 1fr"],
  [style*="grid-template-columns: 0.85fr 1.15fr"],
  [style*="grid-template-columns: minmax(280px, 0.9fr) 1.4fr"],
  [style*="grid-template-columns: 1.4fr minmax(280px, 0.9fr)"],
  [style*="grid-template-columns: minmax(280px, 1fr) 1.3fr"],
  [style*="grid-template-columns: 1.6fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 120px 1.5fr 1fr"],
  [style*="grid-template-columns: 1fr 1.5fr 120px"],
  [style*="grid-template-columns: 220px 1fr"]   { grid-template-columns: 1fr !important; gap: 24px !important; }
  [style*="grid-template-columns: repeat(6, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; gap: 4px !important; }

  /* Hide timeline connector dots/line on mobile (single-column stack) */
  [style*="top: calc(100% - 72px)"],
  [style*="top: calc(100% - 76px)"] { display: none !important; }

  [style*="font-size: 67px"]   { font-size: 36px !important; line-height: 1.1 !important; }
  [style*="font-size: 56px"]   { font-size: 32px !important; }
  [style*="font-size: 52px"]   { font-size: 30px !important; }
  [style*="font-size: 48px"]   { font-size: 28px !important; }
  [style*="font-size: 44px"]   { font-size: 26px !important; }
  [style*="font-size: 42px"]   { font-size: 26px !important; }
  [style*="font-size: 40px"]   { font-size: 24px !important; }
  [style*="font-size: 19px"]   { font-size: 16px !important; }
  [style*="font-size: 17px"]   { font-size: 15px !important; }

  /* "Where to begin" cards — title sits over the image, shrink it on mobile */
  .home-door-title { font-size: 19px !important; }

  /* Testimonial decorative quote mark — drop the bottom gap on mobile */
  .testimonial-quote-mark { margin-bottom: 0 !important; }

  /* Principal bio — align copy with the stacked portrait's left edge on mobile */
  .principal-copy { padding-left: 0 !important; }

  /* Expertise list — single column on mobile: drop alternating indent + side border */
  .expertise-item { padding-left: 0 !important; border-right: none !important; }

  /* Principal advisors section — tighter side padding on mobile */
  .principal-section { padding: 70px 20px !important; }

  /* Footer — reduce side padding on mobile */
  footer[style*="padding: 72px 48px 40px"] { padding: 50px 20px 40px !important; }

  /* Consultation contact strip — turn vertical dividers into row dividers when stacked */
  .contact-item { border-right: none !important; border-bottom: 1px solid #ffffff22 !important; }

  /* Why Dubai quality-of-life stats — vertical dividers become row dividers when stacked */
  .qol-stats { border-left: none !important; border-top: 1px solid #ffffff22 !important; }
  .qol-stat  { border-right: none !important; border-bottom: 1px solid #ffffff22 !important; padding: 26px 0 !important; }

  /* Investment thesis columns — drop left rule + side padding when stacked on mobile */
  .thesis-col { border-left: none !important; padding-left: 0 !important; padding-right: 0 !important; padding-top: 8px !important; padding-bottom: 16px !important; }

  /* Form inputs — 48px touch target */
  input[type="text"], input[type="email"], input[type="tel"], select, textarea {
    min-height: 48px !important; padding: 12px 12px !important;
  }
  textarea { min-height: 96px !important; }

  [style*="border-right: 1px solid #0A1F0A22"] { border-right: none !important; border-bottom: 1px solid #0A1F0A22 !important; }
  [style*="border-right: 1px solid #ffffff22"] { border-right: none !important; border-bottom: 1px solid #ffffff22 !important; }
  footer [style*="grid-template-columns: 1.6fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 28px !important; }

  [style*="min-height: 100vh"]  { min-height: auto !important; }
  [style*="min-height: 92vh"]   { min-height: auto !important; }
  [style*="min-height: 88vh"]   { min-height: auto !important; }
  [style*="min-height: 82vh"]   { min-height: 70vh !important; }  /* page heroes — taller banner on mobile */
  [style*="min-height: 80vh"]   { min-height: auto !important; }
  [style*="min-height: 78vh"]   { min-height: auto !important; }
  [style*="min-height: 70vh"]   { min-height: auto !important; }
  [style*="min-height: 64vh"]   { min-height: auto !important; }

  /* Restore minimum hero height on mobile so carousel UI doesn't overlap content */
  section[style*="min-height: 100vh"][style*="background: #0A1F0A"],
  section[style*="min-height: 78vh"][style*="background: #0A1F0A"],
  section[style*="min-height: 80vh"][style*="background: #0A1F0A"] { min-height: 72vh !important; padding-top: 96px !important; }

  /* Home hero — shorter banner on mobile with image anchored right-center */
  section.home-hero[style*="min-height"] { min-height: 70vh !important; padding-top: 96px !important; }
  .home-hero .home-hero-slide { background-position: right center !important; }
  /* Camel slide subject sits center — keep it from being cropped on the right */
  .home-hero .home-hero-slide-center { background-position: center !important; }

  /* Approach hero — text spans full width on mobile, so darken the whole overlay for readability */
  .approach-hero-overlay,
  .page-hero-overlay {
    background: linear-gradient(180deg, rgba(10,31,10,.6) 0%, rgba(10,31,10,.5) 45%, rgba(10,31,10,.72) 100%) !important;
  }

  /* Hero headline — tighter on mobile and inside narrow phone widths */
  h1[style*="font-size: clamp(34px"] { font-size: 28px !important; line-height: 1.1 !important; margin-bottom: 24px !important; }
  h1[style*="font-size: clamp(38px"] { font-size: 28px !important; line-height: 1.1 !important; }
  h1[style*="font-size: clamp(40px"] { font-size: 28px !important; line-height: 1.1 !important; }
  h1[style*="font-size: clamp(42px"] { font-size: 28px !important; line-height: 1.1 !important; }
  h1 em[style*="font-size: .82em"]   { font-size: 1em !important; display: inline-block; }

  /* Hero eyebrow — give it more breathing room from the fixed header */
  section [style*="font-size: 12"][style*="letter-spacing: .28em"][style*="color: #C8A657"] { font-size: 10px !important; margin-bottom: 14px !important; }

  /* Hide carousel arrows on mobile (dots are enough) */
  section button[aria-label="Previous"], section button[aria-label="Next"] { display: none !important; }
  /* Slide-counter + caption text — hide caption on mobile, keep counter */
  section [class~="home-hero-caption-rule"], section [class~="home-hero-caption-text"] { display: none !important; }

  [style*="linear-gradient(90deg, rgba(10,31,10,.6)"],
  [style*="linear-gradient(90deg, rgba(10,31,10,.62)"],
  [style*="linear-gradient(90deg, rgba(10,31,10,.65)"],
  [style*="linear-gradient(90deg, rgba(10,31,10,.68)"] {
    background: linear-gradient(180deg, rgba(10,31,10,.18) 0%, rgba(10,31,10,.38) 45%, rgba(10,31,10,.85) 100%) !important;
  }

  /* Home hero headline: undo nowrap/overflow-hidden so it can wrap on mobile */
  h1[style*="white-space: nowrap"] {
    white-space: normal !important;
    overflow: visible !important;
    margin-bottom: 28px !important;
  }

  [style*="padding: 0px 48px"][style*="max-width: 1360"] { padding: 0 20px !important; }
  [style*="padding: 160px 48px 80px"],
  [style*="padding: 160px 48px 90px"] { padding: 150px 20px 44px !important; }
  [style*="padding: 190px 48px 90px"],
  [style*="padding: 180px 48px 90px"],
  [style*="padding: 180px 64px 90px"] { padding: 150px 20px 44px !important; }
  section [style*="bottom: 36"][style*="left: 48"][style*="right: 48"] { left: 20px !important; right: 20px !important; bottom: 22px !important; gap: 12px !important; }
  .home-hero-caption-text, .home-hero-caption-rule { display: none !important; }

  a[style*="padding: 16px 36px"],
  a[style*="padding: 14px 32px"] { padding: 14px 24px !important; font-size: 11px !important; }
  a[style*="padding: 13px 28px"] { padding: 13px 20px !important; }
}

/* ============================================================
   LANDSCAPE PHONE
   ============================================================ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  [style*="min-height: 100vh"], [style*="min-height: 88vh"], [style*="min-height: 78vh"] { min-height: 92vh !important; }
  header img { height: 52px !important; }
  [style*="padding: 160px 48px 80px"] { padding: 80px 20px 40px !important; }
}

/* ============================================================
   VERY SMALL  ≤ 380 px
   ============================================================ */
@media (max-width: 380px) {
  header > div[style*="padding: 20px 48px"] { padding: 10px 12px !important; }
  header img { height: 64px !important; margin-left: -32px !important; }
  header a[href="consultation.html"] { padding: 8px 10px !important; font-size: 9px !important; }
  [style*="font-size: 36px"] { font-size: 28px !important; }
  [style*="font-size: 32px"] { font-size: 24px !important; }
}