/* ===== Premium mobile experience (≤768px) ===== */
@media (max-width: 768px) {

  /* —— Base & typography —— */
  html {
    -webkit-tap-highlight-color: transparent;
  }

  body {
    font-size: 16px;
  }

  .container {
    width: min(100% - 1.5rem, var(--max));
  }

  .section {
    padding: 5.5rem 0;
  }

  .section + .section {
    margin-top: 0;
  }

  .section__label {
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    margin-bottom: 1.25rem;
  }

  .section__title {
    font-size: clamp(1.85rem, 7vw, 2.35rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
    margin-bottom: 1.15rem;
  }

  .section__subtitle {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 2.75rem;
    max-width: none;
  }

  /* Section rhythm — alternating backgrounds */
  #services { background: linear-gradient(180deg, var(--bg) 0%, rgba(14,14,18,0.5) 100%); }
  #examples { background: var(--bg); }
  #pricing { background: linear-gradient(180deg, rgba(14,14,18,0.4) 0%, var(--bg) 100%); }
  #about { padding-top: 6rem; padding-bottom: 6rem; }
  #gallery { background: var(--bg); }
  #location { background: linear-gradient(180deg, var(--bg) 0%, rgba(14,14,18,0.6) 100%); }

  /* —— Header: transparent over hero —— */
  .header {
    background: transparent;
    border-color: transparent;
    backdrop-filter: none;
    box-shadow: none;
    transition: background 0.45s var(--ease), backdrop-filter 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
  }

  .header.scrolled,
  .header.header--solid {
    background: rgba(5, 5, 6, 0.78);
    backdrop-filter: blur(20px) saturate(1.2);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  }

  .logo__text {
    display: inline;
    font-size: 0.8rem;
  }

  .burger span {
    background: #fff;
  }

  /* —— Buttons —— */
  .btn {
    min-height: 52px;
    padding: 0.95rem 1.5rem;
    font-size: 0.95rem;
    width: 100%;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), opacity 0.2s;
  }

  .btn:active {
    transform: scale(0.97);
    opacity: 0.92;
  }

  /* —— HERO: fullscreen —— */
  .hero {
    min-height: 100dvh;
    height: 100dvh;
    max-height: 100dvh;
    padding-top: 0;
    margin-top: 0;
    align-items: flex-end;
    justify-content: flex-end;
  }

  .hero__bg {
    inset: 0;
  }

  .hero__bg-image {
    inset: 0;
    height: 100%;
    top: 0;
    max-height: none;
    background-size: cover;
    background-position: center 30%;
    transform: scale(1.05);
    animation: heroKenMobile 22s ease-in-out infinite alternate;
  }

  @keyframes heroKenMobile {
    from { transform: scale(1.05); }
    to { transform: scale(1.1); }
  }

  .hero__bg-overlay {
    background:
      linear-gradient(0deg,
        rgba(5, 5, 6, 1) 0%,
        rgba(5, 5, 6, 0.92) 22%,
        rgba(5, 5, 6, 0.55) 50%,
        rgba(5, 5, 6, 0.25) 72%,
        rgba(5, 5, 6, 0.15) 100%
      ),
      radial-gradient(ellipse 80% 60% at 50% 20%, rgba(196, 45, 72, 0.12), transparent);
  }

  .hero__lines {
    opacity: 0.35;
    mask-image: none;
  }

  .hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: none;
    padding: 0 0 calc(2.25rem + env(safe-area-inset-bottom, 0px));
    margin-top: auto;
  }

  .hero__content.container {
    width: min(100% - 1.5rem, var(--max));
  }

  .hero__badge {
    margin-bottom: 1.25rem;
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.06);
  }

  .hero__title {
    font-size: clamp(2rem, 9vw, 2.65rem);
    line-height: 1.08;
    margin-bottom: 0.85rem;
  }

  .hero__title span {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.55em;
    font-weight: 600;
    color: rgba(244, 242, 240, 0.65);
    letter-spacing: 0.01em;
  }

  .hero__subtitle {
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 1.75rem;
    max-width: none;
    color: rgba(244, 242, 240, 0.55);
  }

  .hero__actions {
    flex-direction: column;
    gap: 0.75rem;
  }

  .hero__scroll {
    display: none;
  }

  /* —— Services: horizontal snap carousel —— */
  #services .container {
    overflow: visible;
  }

  .services-grid {
    display: flex;
    flex-direction: row;
    gap: 0.875rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.25rem 0 1rem;
    margin: 0 -0.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .services-grid::-webkit-scrollbar {
    display: none;
  }

  .service-card {
    flex: 0 0 min(82vw, 300px);
    scroll-snap-align: center;
    padding: 1.75rem 1.5rem;
    border-radius: 24px;
    min-height: 200px;
  }

  .service-card--featured {
    flex: 0 0 min(88vw, 320px);
    background: linear-gradient(145deg, rgba(196, 45, 72, 0.12), rgba(14, 14, 18, 0.85));
    border-color: rgba(196, 45, 72, 0.25);
  }

  .service-card--wide {
    flex: 0 0 min(78vw, 280px);
  }

  .service-card--compact {
    flex: 0 0 min(72vw, 260px);
    padding: 1.5rem 1.35rem;
  }

  .service-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .service-card__title {
    font-size: 1.1rem;
  }

  /* —— Audio: stacked cards, alternating style —— */
  .audio-grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .audio-card {
    border-radius: 24px;
    padding: 1.5rem;
  }

  .audio-card--dark {
    background: rgba(8, 8, 12, 0.9);
    border-color: rgba(255, 255, 255, 0.05);
  }

  .audio-card--glass {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px);
    border-color: rgba(196, 45, 72, 0.15);
  }

  .audio-card__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .audio-card__status {
    align-self: flex-start;
  }

  .audio-card__mode {
    min-height: 44px;
  }

  .audio-card__play {
    width: 48px;
    height: 48px;
  }

  /* —— Pricing: vertical cards with variety —— */
  .pricing-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .pricing-card {
    border-radius: 24px;
    padding: 1.75rem 1.5rem;
  }

  .pricing-card--featured {
    background: linear-gradient(160deg, rgba(196, 45, 72, 0.1), rgba(14, 14, 18, 0.9));
    border-color: rgba(196, 45, 72, 0.2);
    padding: 2rem 1.75rem;
  }

  .pricing-card--featured .pricing-card__price {
    font-size: 2.5rem;
  }

  .pricing-card--accent {
    border-left: 3px solid var(--accent-soft);
  }

  .pricing-card--minimal {
    background: rgba(255, 255, 255, 0.02);
  }

  .pricing-card__price {
    font-size: 2rem;
  }

  .pricing-cta {
    margin-top: 2.5rem;
    border-radius: 24px;
    padding: 2rem 1.5rem;
  }

  /* —— About —— */
  .about__grid {
    gap: 2.5rem;
  }

  .about__headline {
    font-size: clamp(1.65rem, 6.5vw, 2rem);
  }

  .about__lead {
    font-size: 1rem;
    margin-bottom: 2rem;
  }

  .about__visual {
    aspect-ratio: 16/11;
    max-height: none;
    border-radius: 24px;
  }

  .about__fact {
    padding: 1.5rem 0;
  }

  .about__fact-num {
    font-size: 1.25rem;
    min-width: 2.5rem;
  }

  /* —— Gallery: Pinterest-style feed —— */
  .gallery-grid {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }

  .gallery-item {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: auto;
    min-height: 0;
  }

  .gallery-item--hero {
    aspect-ratio: 4/5;
    min-height: 420px;
  }

  .gallery-item--tall {
    aspect-ratio: 3/4;
    min-height: 360px;
  }

  .gallery-item--wide {
    aspect-ratio: 16/10;
    min-height: 240px;
  }

  .gallery-item--square {
    aspect-ratio: 1/1;
    min-height: 280px;
  }

  .gallery-item img {
    transition: transform 0.6s var(--ease), opacity 0.6s var(--ease);
  }

  /* —— Location —— */
  .location-grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .location-info {
    border-radius: 24px;
    padding: 1.75rem;
    order: 2;
  }

  .location-map {
    order: 1;
    border-radius: 24px;
    min-height: 280px;
    margin-bottom: 1rem;
  }

  .location-info__actions {
    flex-direction: column;
  }

  .location-info__actions .btn {
    width: 100%;
  }

  /* —— Final CTA —— */
  .final-cta {
    padding: 6rem 0;
  }

  .final-cta__title {
    font-size: clamp(1.85rem, 7vw, 2.25rem);
  }

  .final-cta__actions {
    flex-direction: column;
    width: 100%;
  }

  /* —— Footer —— */
  .footer {
    padding: 2rem 0 calc(2rem + env(safe-area-inset-bottom, 0px));
  }

  .footer__inner {
    flex-direction: column;
    text-align: center;
  }

  .footer__links {
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
  }

  /* —— Lightbox: fullscreen + swipe —— */
  .lightbox {
    padding: 0;
  }

  .lightbox.open {
    animation: lightboxIn 0.35s var(--ease);
  }

  @keyframes lightboxIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .lightbox__counter {
    position: absolute;
    top: calc(1rem + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    z-index: 2;
  }

  .lightbox__frame {
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lightbox__frame img {
    width: 100%;
    height: 100%;
    max-height: 100dvh;
    object-fit: contain;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  }

  .lightbox__close {
    top: calc(1rem + env(safe-area-inset-top, 0px));
    right: 1rem;
    width: 44px;
    height: 44px;
  }

  .lightbox__nav {
    width: 44px;
    height: 44px;
    opacity: 0.85;
  }

  .lightbox__nav--prev { left: 0.75rem; }
  .lightbox__nav--next { right: 0.75rem; }

  /* —— Mobile nav —— */
  .mobile-nav {
    gap: 1.5rem;
  }

  .mobile-nav .btn {
    width: min(100%, 280px);
  }

  /* —— Reveal animations (mobile) —— */
  .reveal {
    transform: translateY(20px);
    transition-duration: 0.7s;
  }
}

/* Fine-tune common phone widths */
@media (max-width: 430px) {
  .hero__title {
    font-size: clamp(1.85rem, 8.5vw, 2.35rem);
  }

  .gallery-item--hero {
    min-height: 380px;
  }

  .gallery-item--tall {
    min-height: 320px;
  }
}

@media (max-width: 375px) {
  .container {
    width: min(100% - 1.25rem, var(--max));
  }

  .section {
    padding: 4.75rem 0;
  }

  .service-card {
    flex: 0 0 85vw;
  }
}