/* ============================================================
   CLEANED PREMIUM — Responsive
============================================================ */

/* Tablet landscape / small desktop */
@media (max-width: 1200px) {
  .header-inner { padding: 0 32px; }

  .intro-text { padding: 72px 48px; }
  .studio-text { padding: 72px 48px; }
  .projects-quote { padding: 72px 48px; }
  .journal-section { padding: 80px 48px 88px; }
  .pillars-section { padding: 80px 48px; }
  footer { padding: 64px 48px 48px; }

  .journal-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }

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

/* Tablet portrait */
@media (max-width: 991px) {
  .main-header {
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    height: 68px;
  }

  .header-inner { padding: 0 20px; }

  .site-logo img { height: 38px; }

  .nav-toggle { display: flex; }

  .main-nav {
    position: fixed;
    inset: 0;
    z-index: 205;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 28px;
    background: rgba(255, 255, 255, 0.98);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
  }

  .main-nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
  }

  .main-nav a {
    font-size: 14px;
    letter-spacing: 0.16em;
  }

  .nav-cta {
    margin-top: 8px;
    padding: 12px 28px;
  }

  .hero-banner {
    padding-top: 68px;
    min-height: calc(100vh - 0px);
    min-height: calc(100dvh - 0px);
  }

  .hero-brand .brand-eyebrow {
    letter-spacing: 0.18em;
    margin-bottom: 16px;
  }

  .hero-brand .hero-logo {
    width: min(62vw, 220px);
  }

  .hero-brand .brand-tagline {
    letter-spacing: 0.14em;
    margin-top: 14px;
  }

  .hero-arrow {
    font-size: 22px;
    padding: 16px 12px;
  }

  .hero-scroll-down { bottom: 24px; }

  .intro-split,
  .studio-section,
  .projects-split {
    grid-template-columns: 1fr;
  }

  .intro-split { min-height: auto; }

  .intro-text {
    order: 2;
    padding: 56px 24px 64px;
  }

  .intro-text h1 { margin-bottom: 28px; }
  .intro-text p { max-width: none; }

  .intro-image {
    order: 1;
    min-height: 48vw;
    max-height: 420px;
  }

  .studio-section {
    min-height: auto;
  }

  .studio-media {
    order: 1;
    min-height: 48vw;
    max-height: 420px;
  }

  .studio-text {
    padding: 56px 24px 64px;
    order: 2;
  }

  .studio-text p { max-width: none; }

  .projects-image {
    order: 1;
    min-height: 48vw;
    max-height: 420px;
  }

  .projects-quote {
    order: 2;
    padding: 56px 24px 64px;
  }

  .projects-quote cite { margin-bottom: 36px; }

  .journal-section {
    padding: 64px 24px 72px;
  }

  .journal-eyebrow { margin-bottom: 40px; }

  .pillars-section { padding: 64px 24px; }

  .pillars-section .section-intro {
    margin-bottom: 48px;
  }

  footer {
    grid-template-columns: 1fr 1fr;
    padding: 56px 24px 40px;
    gap: 36px;
  }

  .footer-brand-col { grid-column: 1 / -1; }

  .popup {
    grid-template-columns: 1fr;
    max-height: calc(100dvh - 32px);
  }

  .popup-body { padding: 48px 28px 36px; }

  .popup-image {
    min-height: 200px;
    max-height: 240px;
    order: -1;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .main-header { height: 60px; }
  .site-logo img { height: 34px; }

  .hero-banner { padding-top: 60px; }

  .hero-brand .brand-eyebrow {
    font-size: 9px;
    letter-spacing: 0.14em;
  }

  .hero-brand .hero-logo {
    width: min(72vw, 200px);
  }

  .hero-brand .brand-tagline {
    font-size: 9px;
    letter-spacing: 0.12em;
  }

  .hero-arrow { display: none; }

  .intro-text { padding: 48px 20px 56px; }
  .intro-text h1 { font-size: clamp(24px, 7vw, 32px); }

  .studio-text { padding: 48px 20px 56px; }

  .projects-quote { padding: 48px 20px 56px; }

  .projects-quote blockquote {
    padding-left: 16px;
    font-size: 18px;
  }

  .journal-section { padding: 56px 20px 64px; }

  .journal-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .journal-card h3 { font-size: 18px; }

  .pillars-section { padding: 56px 20px; }

  .pillars-grid {
    grid-template-columns: 1fr;
    gap: 0;
    background: none;
  }

  .pillar-item {
    padding: 36px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .pillar-item:last-child { border-bottom: none; }

  .pillar-number { font-size: 42px; }

  footer {
    grid-template-columns: 1fr;
    padding: 48px 20px 36px;
    gap: 32px;
  }

  .footer-brand { margin-bottom: 24px; }
  .footer-brand img { height: 44px; }

  .footer-social { margin-top: 24px; }

  .footer-tagline {
    font-size: 15px;
    padding-top: 24px;
    text-align: left;
  }

  .popup-body { padding: 40px 20px 32px; }
  .popup-body p { margin-bottom: 28px; }

  .popup-form-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .popup-form-row button {
    align-self: flex-start;
    padding: 10px 0;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .header-inner { padding: 0 16px; }

  .hero-scroll-down { bottom: 16px; font-size: 20px; }

  .eco-pills { gap: 8px; }

  .eco-pill {
    font-size: 10.5px;
    padding: 5px 11px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .hero-slide,
  .fade-up,
  .fade-up-stagger > *,
  .main-header,
  .main-nav,
  .popup,
  .popup-overlay {
    transition: none;
  }

  .hero-scroll-down { animation: none; }
}