/* Ceci Acuña Estudio — mobile layout authority */
@media (max-width: 900px) {
  :root { --m-gutter: clamp(18px, 5.5vw, 28px); }

  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
  body { min-width: 0; }
  body.menu-open { overflow: hidden; }
  img, picture, video, iframe { max-width: 100%; }

  .container,
  .header .container,
  .hero-typographic .container.hero-typographic-inner {
    width: calc(100% - (var(--m-gutter) * 2)) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  /* Header and unmistakable three-line hamburger */
  .header { position: sticky !important; top: 0 !important; z-index: 3000 !important; background: #fff !important; }
  .header .nav { height: 88px !important; min-height: 88px !important; padding: 0 !important; }
  .brand {
    display: block !important;
    min-width: 138px !important;
    font-size: 31px !important;
    line-height: .78 !important;
    letter-spacing: -1.2px !important;
  }
  .mobile-toggle {
    position: relative !important;
    display: block !important;
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #1d2254 !important;
    cursor: pointer !important;
  }
  .mobile-toggle::before,
  .mobile-toggle::after,
  .mobile-toggle span {
    content: "" !important;
    position: absolute !important;
    left: 10px !important;
    width: 32px !important;
    height: 3px !important;
    border-radius: 3px !important;
    background: currentColor !important;
    opacity: 1 !important;
    transform: none !important;
    transition: top .22s ease, transform .22s ease, opacity .18s ease !important;
  }
  .mobile-toggle::before { top: 15px !important; }
  .mobile-toggle span { top: 24px !important; }
  .mobile-toggle::after { top: 33px !important; }
  .mobile-toggle[aria-expanded="true"]::before { top: 24px !important; transform: rotate(45deg) !important; }
  .mobile-toggle[aria-expanded="true"] span { opacity: 0 !important; }
  .mobile-toggle[aria-expanded="true"]::after { top: 24px !important; transform: rotate(-45deg) !important; }

  #mainMenu.menu {
    position: fixed !important;
    inset: 88px 0 auto !important;
    z-index: 2999 !important;
    display: flex !important;
    width: 100% !important;
    max-height: calc(100dvh - 88px) !important;
    overflow-y: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 14px var(--m-gutter) max(28px, env(safe-area-inset-bottom)) !important;
    background: #fff !important;
    box-shadow: 0 22px 44px rgba(29, 34, 84, .16) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-120%) !important;
    transition: transform .24s ease, opacity .2s ease, visibility .2s ease !important;
  }
  #mainMenu.menu.open { opacity: 1 !important; visibility: visible !important; transform: none !important; }
  #mainMenu.menu > a:not(.btn) {
    display: flex !important;
    min-height: 56px !important;
    align-items: center !important;
    border-bottom: 1px solid #e5eaf0 !important;
    font-size: 15px !important;
  }
  #mainMenu.menu .nav-whatsapp { width: 100% !important; min-height: 56px !important; margin-top: 18px !important; }

  /* Home hero: bigger, readable and balanced on phones */
  .hero-typographic { min-height: 0 !important; }
  .hero-typographic .container.hero-typographic-inner { min-height: 0 !important; padding-block: clamp(48px, 12vw, 72px) !important; }
  .hero-copy-full { width: 100% !important; max-width: none !important; padding: 0 !important; }
  .hero-title-desktop { display: none !important; }
  .hero-title-mobile { display: block !important; }
  .hero-copy-full h1 {
    max-width: none !important;
    margin: 0 !important;
    font-size: clamp(42px, 11.8vw, 64px) !important;
    line-height: 1.01 !important;
    letter-spacing: -2px !important;
    text-wrap: balance !important;
  }
  .hero-title-mobile .hero-line { display: block !important; white-space: normal !important; }
  .hero-rule { width: 82px !important; height: 5px !important; margin: 28px 0 24px !important; }
  .hero-subcopy {
    max-width: 34ch !important;
    margin: 0 0 30px !important;
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1.42 !important;
    letter-spacing: -.2px !important;
  }
  .hero-subcopy .sub-line { display: inline !important; }
  .hero-main-cta { width: 100% !important; min-height: 58px !important; padding-inline: 16px !important; font-size: 13px !important; text-align: center !important; }
  .hero-scroll { display: none !important; }

  /* Home content */
  .intro { padding: 42px 0 30px !important; text-align: left !important; }
  .intro-single-line { display: block !important; white-space: normal !important; font-size: clamp(31px, 9vw, 45px) !important; line-height: 1.05 !important; }
  .intro-single-line > span { display: block !important; }
  .services { padding: 0 0 66px !important; }
  .services-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 34px !important; width: 100% !important; }
  .service-card { width: 100% !important; max-width: none !important; min-width: 0 !important; justify-self: stretch !important; transform: none !important; }
  .service-card-head { justify-content: flex-start !important; gap: 15px !important; padding: 24px 20px 18px !important; text-align: left !important; }
  .service-card-head h3 { margin: 0 !important; font-size: clamp(26px, 7.5vw, 34px) !important; text-align: left !important; }
  .service-card .card-media { width: calc(100% - 32px) !important; height: auto !important; min-height: 0 !important; aspect-ratio: 3 / 2 !important; margin: 0 auto !important; padding: 0 !important; overflow: hidden !important; }
  .service-card .card-media img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; }
  .service-card-body { padding: 24px 20px 30px !important; }
  .service-card-body > p { font-size: 18px !important; line-height: 1.5 !important; }
  .service-card-body .service-list { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; font-size: 15px !important; }
  .service-card-body .more { width: 100% !important; min-height: 52px !important; }

  .about { padding: 58px 0 !important; }
  .about-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 30px !important; }
  .about-photo, .about-copy, .attributes { width: 100% !important; grid-column: 1 !important; }
  .about-photo { max-width: 560px !important; margin-inline: auto !important; }
  .about-photo img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 5 !important; object-fit: cover !important; object-position: center !important; }
  .about-copy h2 { font-size: clamp(38px, 10.5vw, 52px) !important; }
  .about-copy p, .about-copy .lead { font-size: 17px !important; line-height: 1.6 !important; }
  .attributes { grid-template-columns: 1fr !important; gap: 24px !important; padding: 28px 0 0 !important; border-left: 0 !important; border-top: 1px solid rgba(29, 34, 84, .17) !important; }

  .cta-band { padding: 52px 0 !important; }
  .cta-layout, .cta-steps { display: grid !important; grid-template-columns: 1fr !important; gap: 28px !important; }
  .cta-title-line { display: inline !important; white-space: normal !important; }
  .process-arrow { display: none !important; }
  .cta-button { width: 100% !important; min-height: 58px !important; }

  .footer { padding-top: 40px !important; }
  .footer-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 28px !important; text-align: center !important; }
  .contact-line, .social-icons { justify-content: center !important; }
  footer .footer-bottom-centered { padding: 13px var(--m-gutter) !important; }
  footer .footer-bottom-centered p { font-size: 12px !important; line-height: 1.5 !important; }

  /* Inner pages and case study */
  .inner-hero, .contact-hero { min-height: 0 !important; }
  .inner-hero-grid, .contact-hero-grid, .split-intro, .profile-grid, .section-head, .outcomes-grid, .contact-guide-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .inner-hero-grid, .contact-hero-grid { padding-block: 62px !important; }
  .inner-hero h1, .contact-hero h1 { font-size: clamp(46px, 13vw, 70px) !important; line-height: .98 !important; overflow-wrap: anywhere !important; }
  .capability-grid, .principles-grid, .experience-grid, .contact-type-grid { grid-template-columns: 1fr !important; }
  .studio-hero .portrait { min-height: 0 !important; aspect-ratio: 4 / 5 !important; }
  .works-viewport { overflow-x: auto !important; padding-inline: var(--m-gutter) !important; }
  .work-card, .work-card-wide, .work-card-tall { width: 86vw !important; }

  .case-hero { min-height: 0 !important; padding: 112px 0 74px !important; }
  .case-hero-grid, .case-intro-grid, .families-head, .map-grid, .result-copy, .system-layout { grid-template-columns: 1fr !important; }
  .case-hero h1 { font-size: clamp(48px, 14vw, 72px) !important; line-height: .9 !important; overflow-wrap: anywhere !important; }
  .case-hero h1 span { margin-left: 0 !important; }
  .case-meta { grid-template-columns: 1fr !important; }
  .case-hero-image { width: 100% !important; aspect-ratio: 4 / 3 !important; }
  .system-stage, .system-sticky { height: auto !important; min-height: 0 !important; }
  .system-sticky { position: static !important; }
  .system-visual { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .system-card { position: relative !important; inset: auto !important; width: 100% !important; opacity: 1 !important; transform: none !important; }
}

@media (max-width: 390px) {
  :root { --m-gutter: 16px; }
  .brand { min-width: 125px !important; font-size: 28px !important; }
  .hero-copy-full h1 { font-size: clamp(38px, 11.5vw, 47px) !important; }
  .hero-main-cta { font-size: 12px !important; }
}

@media (hover: none) {
  .btn:hover, .service-card:hover, .attribute:hover { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-toggle::before, .mobile-toggle::after, .mobile-toggle span, #mainMenu.menu { transition: none !important; }
}