/* ================================================================ */
  /* HIIFOREST DESIGN SYSTEM v15 — Mist Palette                       */
  /* All tokens are defined in /shared/design-tokens.css              */
  /* This file only adds landing-specific supplementary variables     */
  /* ================================================================ */
  :root {
    /* Landing-only supplementary colors (not in design-tokens) */
    --moss:        var(--moss);   /* moss accent — used in gradient-text */
    --warm-soft:   #E8B894;   /* lighter warm highlight */

    /* Legacy aliases (from style.css) — keep pricing.css / partners.css working */
    --text-on-accent: #FFFFFF;
    --parchment: var(--text-primary);
    --ink:       var(--bg-base);
    --earth:     var(--forest);
    --earth-soft:var(--forest-deep);
    --primary-color:    var(--forest);
    --secondary-color:  var(--moss);
    --dark-bg:          var(--bg-elevated);
    --darker-bg:        var(--bg-base);
    --light-text:       var(--text-primary);
    --gray-text:        var(--text-tertiary);
    --accent-orange:    var(--warm);
    --accent-red:       #B8543D;
    --gradient-primary: linear-gradient(135deg, var(--forest) 0%, var(--forest-deep) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--moss) 0%, var(--forest) 100%);
  }
  body { font-family: var(--hii-font-sans); background: var(--bg-base); color: var(--text-primary); }

  /* ================================================================ */
  /* B-THEME OVERRIDES: light all the dark Tailwind utility classes    */
  /* ================================================================ */
  /* Section backgrounds */
  .bg-\[\#07101C\], .bg-\[\#0B2545\], .bg-\[\#0A1A2E\] { background-color: var(--bg-base) !important; }
  section.bg-gradient-to-b { background: var(--bg-base) !important; }
  /* Alternate section subtle muted bg for visual rhythm */
  #features { background: var(--bg-muted) !important; }
  /* Trust bar pill bg */
  section.bg-\[\#0A1A2E\].border-y { background: var(--bg-elevated) !important; border-top-color: var(--border-soft) !important; border-bottom-color: var(--border-soft) !important; }

  /* Text colors */
  .text-\[\#F1F5F9\] { color: var(--text-primary) !important; }
  .text-\[\#F1F5F9\]\/80, .text-\[\#F1F5F9\]\/70, .text-\[\#F1F5F9\]\/60 { color: var(--text-secondary) !important; }
  .text-\[\#F1F5F9\]\/40, .text-\[\#F1F5F9\]\/50 { color: var(--text-tertiary) !important; }

  /* Borders — white-tinted lines turn into ink-tinted lines */
  .border-white\/5, .border-white\/10, .border-white\/20 { border-color: var(--border-soft) !important; }
  .border-\[\#F1F5F9\]\/20 { border-color: var(--border-med) !important; }

  /* Buttons: gold/earth → forest green */
  .bg-\[\#E8A857\] { background-color: var(--forest) !important; color: var(--text-on-accent) !important; }
  .bg-\[\#E8A857\]:hover, .hover\:bg-\[\#F4B860\]:hover { background-color: var(--forest-deep) !important; }
  .text-\[\#E8A857\], .text-\[\#F4B860\] { color: var(--forest) !important; }
  .hover\:border-\[\#E8A857\]:hover, .hover\:text-\[\#E8A857\]:hover { border-color: var(--forest) !important; color: var(--forest) !important; }
  .border-\[\#E8A857\]\/30 { border-color: rgba(123,155,168,0.3) !important; }
  .bg-\[\#E8A857\]\/10, .bg-\[\#E8A857\]\/20 { background-color: rgba(123,155,168,0.08) !important; }
  .bg-\[\#E8A857\] { background-color: var(--forest) !important; }
  .bg-\[\#22d3ee\], .bg-\[\#1E5F8A\] { background-color: var(--warm) !important; }

  /* Gradient brand text — retune to green-on-warm */
  .gradient-text {
    background: linear-gradient(135deg, var(--forest) 0%, var(--moss) 50%, var(--warm) 100%) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }

  /* Cards */
  .card-warm { background: var(--bg-elevated) !important; border-color: var(--border-soft) !important; }
  .card-warm:hover { background: rgba(123,155,168,0.04) !important; border-color: var(--forest) !important; }

  /* Pattern grid — ink-tinted dots instead of white */
  .pattern-grid { background-image: linear-gradient(rgba(31,41,55,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(31,41,55,0.05) 1px, transparent 1px) !important; }

  /* Map-preview area */
  .map-preview { background-image: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-muted) 100%) !important; }
  .map-preview::before { background-image: radial-gradient(circle at 30% 40%, rgba(123,155,168,0.18) 2px, transparent 2px), radial-gradient(circle at 70% 60%, rgba(212,149,106,0.4) 3px, transparent 3px), radial-gradient(circle at 50% 80%, rgba(123,155,168,0.10) 1px, transparent 1px) !important; }
  .font-serif { font-family: 'Noto Serif TC', 'Source Serif Pro', Georgia, serif; }
  .gradient-text { background: linear-gradient(135deg, var(--forest) 0%, var(--moss) 50%, var(--warm) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
  .hero-bg {
    background:
      radial-gradient(ellipse at top right,    rgba(212,149,106,0.06) 0%, transparent 55%),
      radial-gradient(ellipse at bottom left,  rgba(123,155,168,0.05)  0%, transparent 55%),
      var(--bg-base);
  }
  /* Hero content sits above background */
  .hero-bg > .max-w-7xl, .hero-bg > .grid { position: relative; z-index: 2; }
  /* v14 — Hero is now PURE forest video + single-column centered text.
   * The interactive globe has moved DOWN to the REGIONS section as the "global presence" element.
   * Globe is sized smaller (420px) there to act as a complement to the project cards. */
  #globe-wrap {
    height: 420px !important;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 16px;
    border: 1px solid var(--border-soft) !important;
    box-shadow: var(--hii-shadow, 0 12px 40px rgba(31,41,55,0.10));
  }
  /* Elegant Chinese display class — use this for hero / brand / section titles */
  .font-display-cn { font-family: 'Noto Serif TC', Georgia, serif; font-weight: 700; letter-spacing: 0.02em; }
  .badge-pulse { animation: pulse 2s infinite; }
  @keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.5 } }
  /* === GLOBE & STARFIELD === */
  #globe-wrap { position: relative; width: 100%; height: 640px; border-radius: 1rem; overflow: hidden; background: radial-gradient(ellipse at center, #F1EFE8 0%, var(--bg-base) 70%, #fff 100%); border: 1px solid rgba(31,41,55,0.08); }
  #globe-wrap canvas { display: block; }
  .starfield { position: absolute; inset: 0; pointer-events: none; }
  .starfield::before, .starfield::after { content:''; position: absolute; inset: 0; background-repeat: repeat; }
  .starfield::before { background-image: radial-gradient(1px 1px at 13% 22%, rgba(123,155,168,0.3), transparent), radial-gradient(1px 1px at 27% 67%, rgba(123,155,168,0.2), transparent), radial-gradient(1px 1px at 51% 18%, rgba(31,41,55,0.15), transparent), radial-gradient(1.5px 1.5px at 71% 81%, rgba(123,155,168,0.25), transparent), radial-gradient(1px 1px at 83% 12%, rgba(31,41,55,0.12), transparent); opacity: 0.4; }
  .starfield::after { display: none; }
  @keyframes twinkle { 0% { opacity: 0.3 } 100% { opacity: 1 } }
  .globe-overlay { position: absolute; pointer-events: none; z-index: 5; }
  .globe-legend { position: absolute; bottom: 12px; left: 12px; right: 12px; display: flex; gap: 8px; flex-wrap: wrap; z-index: 6; pointer-events: auto; }
  .legend-chip { background: rgba(255,255,255,0.9); backdrop-filter: blur(8px); border: 1px solid rgba(31,41,55,0.12); border-radius: 999px; padding: 4px 10px; font-size: 11px; display: inline-flex; align-items: center; gap: 6px; color: rgba(31,41,55,0.8); }
  .legend-dot { width: 8px; height: 8px; border-radius: 50%; }
  .project-panel { position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,0.92); backdrop-filter: blur(12px); border: 1px solid rgba(31,41,55,0.12); border-radius: 12px; padding: 14px 16px; max-width: 240px; z-index: 7; pointer-events: auto; transition: opacity 0.3s; }
  .project-panel.hidden { opacity: 0; pointer-events: none; }
  .controls-hint { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,0.85); backdrop-filter: blur(6px); border: 1px solid rgba(31,41,55,0.1); border-radius: 8px; padding: 6px 10px; font-size: 10px; color: rgba(31,41,55,0.6); z-index: 6; pointer-events: none; }
  /* Search bar */
  .globe-search { position: absolute; top: 12px; right: 12px; z-index: 8; pointer-events: auto; }
  .globe-search input { width: 180px; padding: 7px 12px 7px 32px; font-size: 12px; background: rgba(255,255,255,0.9); backdrop-filter: blur(8px); border: 1px solid rgba(31,41,55,0.15); border-radius: 999px; color: var(--text-primary); outline: none; transition: all 0.2s; }
  .globe-search input:focus { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(123,155,168,0.15); width: 220px; }
  .globe-search input::placeholder { color: rgba(31,41,55,0.4); }
  .globe-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: rgba(31,41,55,0.5); pointer-events: none; }
  .search-results { position: absolute; top: calc(100% + 6px); right: 0; width: 240px; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); border: 1px solid rgba(31,41,55,0.12); border-radius: 12px; padding: 6px; max-height: 280px; overflow-y: auto; }
  .search-results.hidden { display: none; }
  .search-result-item { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; transition: background 0.15s; display: flex; justify-content: space-between; align-items: center; color: var(--text-primary); }
  .search-result-item:hover { background: rgba(123,155,168,0.1); }
  .search-result-item .region { font-size: 10px; color: rgba(31,41,55,0.5); }
  /* Music toggle */
  .music-toggle { position: absolute; bottom: 56px; right: 12px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); border: 1px solid rgba(31,41,55,0.15); color: var(--text-primary); cursor: pointer; z-index: 8; pointer-events: auto; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
  .bgm-pick { position: absolute; bottom: 56px; right: 56px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); border: 1px solid rgba(31,41,55,0.15); color: rgba(31,41,55,0.7); cursor: pointer; z-index: 8; pointer-events: auto; display: flex; align-items: center; justify-content: center; transition: all 0.2s; font-size: 12px; }
  .bgm-pick:hover { border-color: var(--forest); color: var(--forest); }
  .bgm-pick.loaded { color: var(--forest); border-color: rgba(123,155,168,0.4); }
  .bgm-label { position: absolute; bottom: 100px; right: 12px; font-size: 9px; color: rgba(31,41,55,0.55); background: rgba(255,255,255,0.7); backdrop-filter: blur(6px); padding: 3px 8px; border-radius: 6px; z-index: 8; pointer-events: none; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0; transition: opacity 0.2s; }
  .bgm-label.visible { opacity: 1; }
  .music-toggle:hover { border-color: var(--forest); color: var(--forest); }
  .music-toggle.playing { background: rgba(123,155,168,0.18); border-color: var(--forest); color: var(--forest); }
  /* Attribution */
  .attribution { position: absolute; bottom: 0; left: 0; right: 0; padding: 4px 14px; background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.5) 100%); font-size: 9px; color: rgba(31,41,55,0.4); z-index: 4; pointer-events: none; text-align: center; }
  /* Detail modal (project / satellite) */
  .detail-modal { position: fixed; inset: 0; z-index: 100; background: rgba(31,41,55,0.4); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; padding: 20px; }
  .detail-modal.open { display: flex; }
  .detail-card { background: #fff; border: 1px solid rgba(31,41,55,0.12); border-radius: 16px; padding: 32px; max-width: 560px; width: 100%; box-shadow: 0 20px 60px rgba(31,41,55,0.15); position: relative; }
  .detail-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; background: rgba(31,41,55,0.06); color: var(--text-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; border: none; font-size: 18px; transition: all 0.2s; }
  .detail-close:hover { background: rgba(123,155,168,0.15); color: var(--forest); }
  /* === HIMAWARI LIVE SATELLITE === */
  .himawari-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 30px; }
  .himawari-disk { position: relative; width: min(580px, 100%); aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 80px rgba(30,95,138,0.45), 0 0 140px rgba(30,95,138,0.25), inset 0 0 60px rgba(0,0,0,0.6); transition: transform 0.3s ease; }
  .himawari-disk:hover { transform: scale(1.02); }
  .himawari-img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .himawari-marker { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer; z-index: 5; }
  .himawari-marker::before { content:''; display:block; width: 10px; height: 10px; border-radius: 50%; background: var(--marker-color, #E8A857); box-shadow: 0 0 0 2px rgba(7,16,28,0.8), 0 0 16px var(--marker-color, #E8A857); animation: marker-pulse 2.2s ease-in-out infinite; }
  .himawari-marker .label { position: absolute; top: 14px; left: 14px; white-space: nowrap; font-size: 11px; font-weight: 600; color: var(--marker-color, #E8A857); background: rgba(7,16,28,0.88); padding: 3px 8px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--marker-color, #E8A857) 40%, transparent); }
  @keyframes marker-pulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(7,16,28,0.8), 0 0 6px var(--marker-color, #E8A857); } 50% { box-shadow: 0 0 0 2px rgba(7,16,28,0.8), 0 0 22px var(--marker-color, #E8A857); } }
  .live-badge { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; background: rgba(7,16,28,0.85); backdrop-filter: blur(8px); border: 1px solid rgba(34,197,94,0.4); color: #4ade80; padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; z-index: 6; pointer-events: none; }
  .live-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; animation: pulse 1.6s infinite; }
  .live-meta { position: absolute; bottom: 60px; left: 12px; font-size: 10px; color: rgba(241,245,249,0.55); background: rgba(7,16,28,0.7); backdrop-filter: blur(6px); padding: 4px 8px; border-radius: 6px; z-index: 6; pointer-events: none; }
  /* Mode toggle */
  .mode-toggle { position: absolute; top: 12px; right: 230px; z-index: 8; pointer-events: auto; display: flex; background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); border: 1px solid rgba(31,41,55,0.15); border-radius: 999px; padding: 2px; gap: 2px; }
  .mode-toggle button { font-size: 10px; padding: 5px 10px; border-radius: 999px; background: transparent; border: none; color: rgba(31,41,55,0.6); cursor: pointer; transition: all 0.15s; font-weight: 600; letter-spacing: 0.02em; }
  .mode-toggle button.active { background: rgba(123,155,168,0.2); color: var(--forest); }
  .mode-toggle button:hover:not(.active) { color: var(--text-primary); }
  /* Container visibility based on mode */
  #globe-wrap.mode-epic .himawari-stage { display: flex; }
  #globe-wrap.mode-epic .live-badge { display: inline-flex; }
  #globe-wrap.mode-epic #globe-canvas { display: none; }
  #globe-wrap.mode-3d  .himawari-stage { display: none; }
  #globe-wrap.mode-3d  .live-badge { display: none; }
  #globe-wrap.mode-3d  #globe-canvas { display: block; }
  /* === FLOATING INFO PANEL === */
  .info-panel { position: absolute; top: 56px; right: 12px; width: 260px; max-height: calc(100% - 130px); background: rgba(255,255,255,0.92); backdrop-filter: blur(12px); border: 1px solid rgba(31,41,55,0.12); border-radius: 12px; z-index: 7; pointer-events: auto; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.25s ease, opacity 0.2s; }
  .info-panel.collapsed { transform: translateX(calc(100% + 24px)); opacity: 0; pointer-events: none; }
  .info-tabs { display: flex; border-bottom: 1px solid rgba(31,41,55,0.08); padding: 4px; gap: 2px; }
  .info-tab { flex: 1; padding: 6px 8px; font-size: 11px; font-weight: 600; background: transparent; border: none; color: rgba(31,41,55,0.55); cursor: pointer; border-radius: 6px; transition: all 0.15s; }
  .info-tab.active { background: rgba(123,155,168,0.15); color: var(--forest); }
  .info-tab:hover:not(.active) { color: var(--text-primary); }
  .info-list { overflow-y: auto; padding: 6px; max-height: 360px; }
  .info-item { padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background 0.15s; margin-bottom: 2px; }
  .info-item:hover { background: rgba(31,41,55,0.05); }
  .info-item .name { font-size: 12px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; display: flex; align-items: center; gap: 5px; }
  .info-item .name-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
  .info-item .meta { font-size: 10px; color: rgba(31,41,55,0.5); font-family: ui-monospace, 'SF Mono', monospace; }
  .info-item .meta .agency { color: var(--forest); }
  .info-toggle { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); border: 1px solid rgba(31,41,55,0.15); color: var(--text-primary); cursor: pointer; z-index: 8; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
  .info-toggle:hover { border-color: var(--forest); color: var(--forest); }
  .info-toggle.active { background: rgba(123,155,168,0.15); border-color: var(--forest); color: var(--forest); }
  /* Mode toggle centered top */
  .mode-toggle { top: 12px; right: auto; left: 50%; transform: translateX(-50%); }
  /* ===== Z-INDEX LAYERS (bottom -> top) ===== */
  /* Stars (background) -> globe-canvas container -> UI overlays */
  #stars-canvas  { position: absolute; inset: 0; pointer-events: none; z-index: 0 !important; }
  #globe-canvas  { position: absolute; inset: 0; z-index: 1; }  /* globe.gl mounts inside here */
  #globe-canvas > * { z-index: 1 !important; }  /* keep anything globe.gl adds inside this layer */
  .info-panel    { z-index: 50 !important; }
  .info-toggle   { z-index: 51 !important; }
  .mode-toggle   { z-index: 50 !important; }
  .music-toggle  { z-index: 50 !important; }
  .controls-hint { z-index: 50 !important; }
  .attribution   { z-index: 50 !important; }
  .live-badge    { z-index: 50 !important; }
  .live-meta     { z-index: 50 !important; }
  .globe-legend  { display: none; }  /* removed - colors now only in info panel */
  /* Music UI removed for B2B clean look (Stripe / Vercel / Felt pattern: no autoplay BGM) */
  .music-toggle, .bgm-pick, .bgm-label, #bgm-audio, #bgm-file { display: none !important; }
  .detail-modal  { z-index: 100 !important; }
  /* L1 mode removed - hide all related residual UI */
  .live-badge, .live-meta, .himawari-stage { display: none !important; }
  /* Footer attribution sits BELOW the globe (no overlap) */
  .globe-footer-attrib { margin-top: 8px; padding: 0 12px; font-size: 10px; color: rgba(31,41,55,0.4); text-align: center; letter-spacing: 0.02em; }
  /* Inline search inside info panel */
  .info-search { display: none; position: relative; padding: 8px; border-bottom: 1px solid rgba(31,41,55,0.08); }
  .info-search svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; color: rgba(31,41,55,0.5); pointer-events: none; }
  .info-search input { width: 100%; padding: 6px 10px 6px 30px; font-size: 11px; background: rgba(31,41,55,0.04); border: 1px solid rgba(31,41,55,0.1); border-radius: 6px; color: var(--text-primary); outline: none; transition: all 0.15s; }
  .info-search input:focus { border-color: var(--forest); background: rgba(123,155,168,0.06); box-shadow: 0 0 0 2px rgba(123,155,168,0.1); }
  .info-search input::placeholder { color: rgba(31,41,55,0.35); }
  /* Override the old absolute search positioning since search is now inside info panel */
  .globe-search { position: relative; top: auto; right: auto; }
  .globe-search > svg:first-child { display: none; } /* hide outer icon, we'll use new inline icon */
  .search-results { top: calc(100% + 4px); left: 8px; right: 8px; width: auto; }
  /* Floating satellite labels (HTML elements positioned in 3D) */
  .sat-label-3d { font-size: 9px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-weight: 600; background: rgba(255,255,255,0.85); backdrop-filter: blur(4px); padding: 2px 6px; border-radius: 3px; pointer-events: none; white-space: nowrap; transform: translate(10px, -8px); letter-spacing: 0.03em; color: var(--text-primary); }
  .sat-label-3d .sat-agency { opacity: 0.55; margin-left: 4px; font-weight: 500; }
  .home-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; text-align: left; }
  .home-service-card { min-height: 150px; padding: 18px; border-radius: 18px; background: rgba(255,255,255,0.68); border: 1px solid rgba(31,41,55,0.10); box-shadow: 0 18px 50px rgba(31,41,55,0.08); backdrop-filter: blur(12px); }
  .home-service-card strong { display: block; color: var(--text-primary); font-size: 1.02rem; margin-bottom: 8px; }
  .home-service-card span { display: block; color: var(--text-secondary); font-size: 0.88rem; line-height: 1.65; }
  .home-service-label { display: inline-flex; align-items: center; gap: 6px; color: var(--forest); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; margin-bottom: 10px; }
  .home-service-label::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--forest); }
  @media (max-width: 900px) { .home-service-grid { grid-template-columns: 1fr; } }

  /* === MOBILE RESPONSIVE === */
  @media (max-width: 768px) {
    /* Sidebar: hidden by default, toggle to show */
    .sidebar-nav {
      transform: translateX(-100%);
      transition: transform 0.3s ease;
      width: 240px;
    }
    .sidebar-nav.active { transform: translateX(0); }
    .sidebar-toggle-btn { display: inline-flex; align-items: center; justify-content: center; }
    body { margin-left: 0 !important; }

    /* Hero */
    .hero-bg { padding-top: 5.5rem !important; padding-bottom: 3rem !important; }
    .hero-bg h1 { font-size: 2rem !important; line-height: 1.3 !important; }
    .hero-bg p { font-size: 0.95rem !important; }
    .hero-stats { gap: 0.75rem !important; flex-wrap: wrap !important; }
    .hero-stats .w-px { display: none !important; }

    /* Section spacing */
    section.py-24 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
    section.py-20 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
    section.py-12 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }

    /* Headings */
    h2.font-serif, h2.font-display-cn { font-size: 1.5rem !important; }
    h3.font-serif { font-size: 1.1rem !important; }

    /* Globe — much smaller on mobile */
    #globe-wrap { height: 320px !important; }
    .globe-search input { width: 120px !important; }
    .project-panel { max-width: 180px !important; padding: 10px 12px !important; font-size: 0.75rem !important; }

    /* Grids collapse to single column */
    .grid.md\:grid-cols-3, .grid.md\:grid-cols-4, .grid.lg\:grid-cols-2 { grid-template-columns: 1fr !important; }

    /* Inline-style grids (initiatives section) */
    div[style*="grid-template-columns:repeat(auto-fit,minmax(300px,1fr))"] { grid-template-columns: 1fr !important; }

    /* Trust bar */
    .flex.flex-wrap.items-center.justify-center.gap-10 { gap: 1rem !important; flex-wrap: wrap !important; justify-content: center !important; }

    /* Cards padding */
    .card-warm { padding: 1rem !important; }
    .home-service-card { padding: 14px !important; min-height: auto !important; }

    /* FAQ */
    .faq-list { padding: 0 4px !important; }
    .faq-list details { padding: 14px 16px !important; }
    .faq-list summary { font-size: 15px !important; }

    /* CTA buttons */
    .flex.flex-wrap.gap-4.justify-center a { padding: 0.6rem 1.2rem !important; font-size: 0.95rem !important; }

    /* Footer */
    footer .grid { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; }
    footer .max-w-7xl:last-child { flex-direction: column !important; gap: 0.5rem !important; text-align: center !important; }

    /* Containers */
    .max-w-7xl, .max-w-5xl, .max-w-4xl, .max-w-3xl { padding-left: 16px !important; padding-right: 16px !important; }
    div[style*="max-width:1200px"], div[style*="max-width:880px"], div[style*="max-width:860px"], div[style*="max-width:760px"] { max-width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; }
  }