/* ==========================================================================
   responsive.css — Media queries ONLY
   Breakpoints: 1024px (tablet) | 768px (mobile) | 480px (small phone)
   ========================================================================== */

/* ── Tablet (≤ 1024px) ───────────────────────────────────────────────────── */

@media (max-width: 1024px) {

  /* Stack hero vertically */
  .hero-content {
    grid-template-columns: 1fr;
    padding: 52px 32px 64px;
    gap: 52px;
    min-height: unset;
  }

  /*
     FIX: green deco now covers full background on mobile/tablet,
     so all hero left-column text must switch to light colours.
  */
  .hero-deco {
    width: 100%;
    height: 100%;
    top: 0;
    bottom: unset;
  }

  .hero-deco-inner {
    clip-path: none; /* full-bleed green background */
  }

  /* Force white text on green background */
  .hero-left             { max-width: 100%; position: relative; z-index: 2; }
  .hero-eyebrow          { color: rgba(255, 255, 255, .85); }
  .hero-eyebrow::before  { background: var(--yellow); }
  .hero-title            { color: var(--white); }
  .hero-title em         { color: var(--yellow); }
  .hero-title em::after  { background: rgba(255, 208, 90, .6); }
  .hero-subtitle         { color: rgba(255, 255, 255, .80); }

  /* Level chips on green — override to white-transparent style */
  .lchip.lc-mat,
  .lchip.lc-pri,
  .lchip.lc-col,
  .lchip.lc-lyc {
    background: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .40);
    color: var(--white);
  }

  /* Form card sits above the green deco */
  .form-card { position: relative; z-index: 2; max-width: 580px; }

  /* Pillars: 2 columns */
  .pillars { grid-template-columns: 1fr 1fr; }

  /* Contact: single column */
  .contact-inner { grid-template-columns: 1fr; gap: 48px; }

  .contact-left .sec-label,
  .contact-left .sec-title { text-align: center; justify-content: center; }
}

/* ── Mobile (≤ 768px) ────────────────────────────────────────────────────── */

@media (max-width: 768px) {

  /* Topbar */
  .topbar { padding: 8px 20px; }
  .topbar-item:last-child { display: none; } /* hide address on very small screens */

  /* Nav */
  .nav { padding: 0 20px; height: 66px; }
  .nav-badge { display: none; }

  /* Section padding */
  .why,
  .tl-section,
  .contact { padding: 72px 20px; }

  /* Hero */
  .hero-content { padding: 40px 20px 56px; }

  /* Form */
  .form-card { padding: 32px 22px; }
  .fg-grid   { grid-template-columns: 1fr; }
  .fg.full   { grid-column: 1; }

  /* Pillars: single column */
  .pillars { grid-template-columns: 1fr; }

  /* Timeline: vertical stack */
  .steps      { flex-direction: column; align-items: flex-start; }
  .steps-line { display: none; }

  .step {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    padding: 0 0 28px;
    gap: 16px;
    position: relative;
  }

  /* Vertical connector line between steps */
  .step::before {
    content: '';
    position: absolute;
    left: 33px;
    top: 68px;
    bottom: 0;
    width: 2px;
    background: rgba(255, 208, 90, .25);
  }

  .step:last-child::before { display: none; }

  .step-name,
  .step-desc { text-align: left; }

  /* Footer */
  footer { padding: 28px 20px; }

  .ft-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .ft-mid   { text-align: left; }

  /* Show FAB on mobile */
  .fab { display: flex; }
}

/* ── Small phones (≤ 480px) ──────────────────────────────────────────────── */

@media (max-width: 480px) {
  .hero-title { font-size: 30px; }
}