/* Mobile foundation — desktop styles intentionally untouched */
@media (max-width: 767px) {
  :root { --mobile-gutter: 20px; }
  html { overflow-x: clip; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
  body { min-width: 0; overflow-x: clip; }
  body.menu-open { overflow: hidden; }
  main { overflow: clip; }
  img, video, iframe { max-width: 100%; }
  .section-padding { padding-left: var(--mobile-gutter); padding-right: var(--mobile-gutter); }

  .site-header {
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    background: rgba(248, 245, 238, .96); border-bottom: 1px solid rgba(23, 56, 44, .09);
    gap: 10px; height: 74px;
    padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
    position: sticky; top: 0; z-index: 500;
  }
  .brand { gap: 5px; min-width: 0; }
  .brand img { height: 54px; width: 54px; }
  .brand-name { font-size: 1.48rem; letter-spacing: .045em; line-height: .95; padding-top: 2px; }
  .brand-name > span { font-size: .52rem; letter-spacing: .14em; margin-top: 6px; }
  .desktop-nav, .header-link { display: none; }
  .menu-button {
    align-items: center; display: flex; flex: 0 0 48px; flex-direction: column;
    height: 48px; justify-content: center; margin-right: -8px; padding: 12px; width: 48px;
  }
  .menu-button span { margin: 4px 0; width: 25px; }
  .menu-button[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
  .mobile-menu {
    background: rgba(248, 245, 238, .99); border-top: 0; box-shadow: none;
    display: flex; flex-direction: column; height: calc(100dvh - 74px);
    left: 0; max-height: calc(100dvh - 74px); overflow-y: auto; overscroll-behavior: contain;
    padding: 24px max(22px, env(safe-area-inset-right)) calc(34px + env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
    position: absolute; right: 0; top: 100%; z-index: 490;
  }
  .mobile-menu:not([hidden]) { animation: elcin-mobile-menu-in .26s cubic-bezier(.22, .61, .36, 1) both; }
  .mobile-menu a {
    align-items: center; border-bottom: 1px solid var(--rule); display: flex;
    font-size: clamp(2rem, 10vw, 2.8rem); justify-content: space-between;
    letter-spacing: -.035em; min-height: 72px; padding: 12px 2px;
  }
  .mobile-menu a::after { content: "↗"; font-family: var(--sans); font-size: 1rem; font-weight: 400; }

  .hero { height: calc(100dvh - 82px); margin: 0 8px; max-height: 740px; min-height: 620px; }
  .hero-photo { object-position: 62% center; }
  .hero-shade {
    background: linear-gradient(180deg, rgba(9,28,19,.08) 0%, rgba(9,28,19,.16) 38%, rgba(8,24,16,.78) 100%),
      linear-gradient(90deg, rgba(9,28,19,.42), rgba(9,28,19,.06) 76%);
  }
  .hero-topline { font-size: .625rem; left: 20px; letter-spacing: .15em; right: 20px; top: 20px; }
  .hero-copy {
    bottom: 25px; left: 20px; margin: 0; max-width: 360px; padding: 0;
    position: absolute; right: 20px;
  }
  .hero-copy .eyebrow { font-size: .625rem; letter-spacing: .13em; margin-bottom: 15px; }
  .hero-copy h1 {
    font-size: clamp(3rem, 13vw, 3.65rem); letter-spacing: -.048em;
    line-height: .96; margin-bottom: 18px;
  }
  .hero-description {
    color: rgba(248,245,238,.9); font-size: .9rem; line-height: 1.62;
    margin-bottom: 20px; max-width: 325px;
  }
  .hero-actions { display: grid; gap: 9px; max-width: 315px; width: 100%; }
  .hero-cta, .hero-cta-secondary {
    font-size: .8rem; justify-content: space-between; min-height: 50px; padding: 0 17px; width: 100%;
  }
  .hero-cta-secondary {
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    background: rgba(9,28,19,.26);
  }
  .hero-bottom { display: none; }

  .section-kicker, .eyebrow { font-size: .65rem; letter-spacing: .13em; line-height: 1.55; }
  .section-number { margin-right: 12px; }
  a, button, input, textarea { touch-action: manipulation; }
}

@media (max-width: 359px) {
  :root { --mobile-gutter: 17px; }
  .brand-name { font-size: 1.32rem; }
  .brand-name > span { font-size: .48rem; }
  .hero { margin-left: 6px; margin-right: 6px; min-height: 600px; }
  .hero-copy { bottom: 20px; left: 17px; right: 17px; }
  .hero-copy h1 { font-size: 2.82rem; }
  .hero-description { font-size: .84rem; }
  .hero-cta, .hero-cta-secondary { min-height: 47px; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .mobile-menu:not([hidden]) { animation: none; }
}

@keyframes elcin-mobile-menu-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}