/**
 * HealthN.E.S.S. — Phase 4 Mobile Craftsmanship
 * Intentionally composed mobile/tablet execution.
 * Does not redesign layout, navigation, or content.
 */

/* --------------------------------------------------------------------------
 * Shared mobile tokens (compose, don’t shrink)
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  :root {
    --space-gutter: var(--space-gutter-mobile, 1.25rem);
    --space-section-gap: var(--space-section-gap-mobile, 5rem);
    --mobile-type-display: clamp(2.05rem, 8.4vw, 2.65rem);
    --mobile-type-headline: clamp(1.55rem, 6.2vw, 2rem);
    --mobile-type-body: 1rem;
    --mobile-type-body-lh: 1.65;
    --touch-min: 44px;
  }
}

@media (max-width: 359px) {
  :root {
    --space-gutter: 1rem;
    --mobile-type-display: clamp(1.9rem, 9vw, 2.25rem);
    --mobile-type-headline: clamp(1.4rem, 7vw, 1.75rem);
  }
}

/* --------------------------------------------------------------------------
 * Global containment + sticky CTA clearance
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  html,
  body {
    overflow-x: clip;
  }

  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .services-page,
  .about-page,
  .faq-page,
  .insights-page,
  .work-page,
  .case-page,
  .insight-article-page,
  .svc-detail-page,
  .products-page {
    padding-bottom: var(--mobile-sticky-clearance);
  }

  /* Main content clears fixed mobile nav unless explicitly flush (hero) */
  .story-stage > main,
  main.products-main,
  main.work-index-main,
  .insight-article,
  .faq-page main,
  .about-page main,
  .contact-page main {
    padding-top: calc(var(--site-header-offset-mobile) + 0.5rem);
  }

  footer {
    padding-bottom: calc(1.5rem + var(--mobile-sticky-clearance));
  }

  /* Header breathing room on phones */
  #mainNav,
  .site-header,
  header.fixed,
  nav.fixed {
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
  }

  .brand-lockup__img {
    max-height: 2.35rem;
    width: auto;
  }
}

/* --------------------------------------------------------------------------
 * Tablet bridge (768) — avoid half-desktop squeeze
 * ------------------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 899px) {
  html,
  body {
    overflow-x: clip;
  }

  .proof-support-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .proof-support-item:nth-child(2) .proof-media--support {
    aspect-ratio: 16 / 10;
  }

  .hero-media__light,
  .ascend-reveal__glow {
    max-width: 100%;
  }

  /* Tablet nav: readable touch padding without redesign */
  #mainNav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-block: 0.55rem;
  }

  #mainNav > a.bg-primary {
    padding-inline: 1.15rem;
  }
}

@media (min-width: 900px) and (max-width: 1023px) {
  #mainNav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-block: 0.45rem;
  }
}

/* --------------------------------------------------------------------------
 * Typography rhythm (phones)
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .hero__title,
  .svc-hero__title,
  .svc-open__title,
  .about-hero__title,
  .faq-hero__title,
  .insight-open__title,
  .work-open__title,
  .case-hero__title {
    font-size: var(--mobile-type-display);
    line-height: 1.12;
    letter-spacing: -0.02em;
    max-width: none;
  }

  .chapter .font-headline-md,
  .home-scan-intro .font-headline-md,
  .font-headline-md.text-headline-md {
    font-size: var(--mobile-type-headline) !important;
    line-height: 1.18 !important;
    max-width: 20ch;
  }

  .font-headline-sm.text-headline-sm {
    font-size: clamp(1.35rem, 5.5vw, 1.65rem) !important;
    line-height: 1.22 !important;
  }

  .hero__lede,
  .svc-hero__lede,
  .svc-open__lede,
  .about-hero__lede,
  .faq-hero__lede,
  .insight-open__lede,
  .work-open__lede,
  .home-scan-support,
  .case-hero__lede {
    font-size: var(--mobile-type-body);
    line-height: var(--mobile-type-body-lh);
    max-width: 36rem;
  }

  .px-gutter {
    padding-left: var(--space-gutter);
    padding-right: var(--space-gutter);
  }
}

/* --------------------------------------------------------------------------
 * Touch targets + CTA composition
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .proof-action,
  .hero__cta,
  .ascend-reveal__cta,
  .ascend-reveal__secondary,
  .work-open__actions .proof-action,
  .svc-hero__actions .proof-action,
  .svc-open__actions .proof-action,
  .about-hero__actions .proof-action,
  .insight-cta__actions .proof-action,
  .faq-cta__actions .proof-action,
  .case-cta .proof-action,
  .mobile-nav-panel__cta {
    min-height: 48px;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
  }

  .hero__actions,
  .svc-hero__actions,
  .about-hero__actions,
  .work-open__actions,
  .insight-cta__actions,
  .faq-cta__actions,
  .contact-premium__actions,
  .case-cta__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    width: 100%;
  }

  .hero__actions > *,
  .svc-hero__actions > *,
  .about-hero__actions > *,
  .work-open__actions > *,
  .insight-cta__actions > *,
  .faq-cta__actions > *,
  .contact-premium__actions > *,
  .case-cta__actions > * {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .cta-audit,
  [data-cta="business-review"] {
    box-sizing: border-box;
    max-width: 100%;
  }

  .hero__cta .material-symbols-outlined,
  .ascend-reveal__cta .material-symbols-outlined,
  .ascend-reveal__secondary .material-symbols-outlined {
    display: inline-grid;
    place-items: center;
    width: 1em;
    overflow: hidden;
    font-size: 0;
  }

  .hero__cta .material-symbols-outlined::before,
  .ascend-reveal__cta .material-symbols-outlined::before,
  .ascend-reveal__secondary .material-symbols-outlined::before {
    content: ">";
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1;
  }

  .work-open__types {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
  }

  .work-open__types li {
    min-height: var(--touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.55rem 0.55rem;
    font-size: 0.6rem;
    width: 100%;
    box-sizing: border-box;
  }

  .work-open__types li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .work-filter,
  .insight-filter {
    min-height: var(--touch-min);
  }
}

/* --------------------------------------------------------------------------
 * Homepage sections: process + contact
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .chapter[data-rhythm="focused"],
  .chapter[data-rhythm="proof"],
  .chapter[data-rhythm="calm"],
  .chapter[data-rhythm="action"] {
    --chapter-pad-y: clamp(3rem, 10vw, 4.5rem);
  }

  .home-scan-intro {
    margin-bottom: 1.35rem;
  }

  .home-scan-card,
  .home-pillar,
  .needs-grid li {
    padding: 1.1rem 1.1rem 1.15rem;
  }

  .home-process-step {
    padding: 1.15rem 1.1rem 1.2rem;
  }

  .home-process-step__title {
    font-size: 1.05rem;
  }

  .home-process-step__text {
    font-size: 0.94rem;
    line-height: 1.55;
  }

  #contact .contact-finale__disclose {
    margin-bottom: 1.25rem;
    padding: 1.1rem 1.05rem;
  }

  #contact .contact-finale__panel,
  #contact .contact-premium {
    padding: 1.45rem 1.2rem 1.55rem;
  }

  #contact.chapter {
    padding-bottom: calc(var(--chapter-pad-y, 3.5rem) + var(--mobile-sticky-clearance));
  }

  #process,
  #contact,
  #faq-preview,
  #work,
  .faq-section,
  .svc-worlds {
    scroll-margin-top: var(--site-header-offset-mobile);
  }

  .faq-preview .faq-item summary {
    min-height: 52px;
    padding: 1.1rem 1.1rem 1.1rem 1.2rem;
  }
}

/* --------------------------------------------------------------------------
 * Services bubbles — readable constellation on narrow viewports
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .svc-orbit {
    gap: 1.25rem 0.75rem;
    max-width: min(100%, 26rem);
  }

  .svc-bubble {
    width: min(100%, 10.75rem);
    gap: 0.7rem;
    padding: 0.25rem;
  }

  .svc-bubble--dominant {
    width: min(100%, 12.25rem);
  }

  .svc-bubble__title {
    font-size: clamp(0.9rem, 3.6vw, 1.02rem);
  }

  .svc-bubble__line {
    font-size: 0.78rem;
    line-height: 1.35;
  }

  .svc-hero {
    padding-top: calc(var(--site-header-offset-mobile, 5.5rem) + 0.75rem);
    padding-bottom: 1.15rem;
  }

  .svc-detail {
    padding-left: var(--space-gutter);
    padding-right: var(--space-gutter);
  }
}

/* Narrow phones: keep centred 2-up grid so orbs stay present in first viewport */
@media (max-width: 389px) {
  .svc-orbit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    gap: 1.15rem 0.55rem;
    max-width: 21rem;
    --bubble-size: 6.35rem;
    --bubble-size-major: 6.75rem;
    --bubble-size-dominant: 7.75rem;
  }

  .svc-orbit__item--film {
    grid-column: 1 / -1;
  }

  .svc-bubble,
  .svc-bubble--dominant,
  .svc-bubble--major {
    width: min(100%, 10.5rem);
  }

  .svc-bubble__title {
    font-size: 0.92rem;
  }

  .svc-bubble__line {
    font-size: 0.76rem;
    line-height: 1.35;
  }

  .svc-open {
    padding-top: clamp(5.75rem, 16vw, 7.25rem);
    padding-bottom: 1.25rem;
  }

  .svc-open__title {
    max-width: 16ch;
  }

  .svc-open__lede {
    font-size: 0.95rem;
  }
}

@media (min-width: 390px) and (max-width: 767px) {
  .svc-orbit {
    max-width: 23.5rem;
    gap: 1.45rem 0.95rem;
  }

  .svc-bubble:not(.svc-bubble--dominant) .svc-bubble__title {
    font-size: 0.92rem;
    line-height: 1.2;
  }

  .svc-bubble:not(.svc-bubble--dominant) .svc-bubble__line {
    font-size: 0.76rem;
  }
}

/* --------------------------------------------------------------------------
 * About
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .about-hero,
  .about-section,
  .about-cta {
    padding-left: var(--space-gutter);
    padding-right: var(--space-gutter);
  }

  .about-hero {
    padding-top: clamp(6.25rem, 18vw, 8rem);
    padding-bottom: clamp(2rem, 6vw, 2.75rem);
  }

  .about-section {
    padding-bottom: clamp(2.25rem, 6vw, 3.25rem);
  }

  .about-section__title {
    font-size: clamp(1.4rem, 5.8vw, 1.75rem);
    max-width: none;
  }

  .about-cta__panel {
    padding: 1.55rem 1.25rem;
  }
}

/* --------------------------------------------------------------------------
 * FAQ
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .faq-rail {
    margin-bottom: 0.35rem;
    gap: 0.4rem;
    padding-bottom: 0.75rem;
    padding-right: 0.25rem;
    scroll-padding-inline: var(--space-gutter);
    mask-image: linear-gradient(90deg, #000 0%, #000 78%, transparent 100%);
  }

  .faq-rail::after {
    content: "";
    flex: 0 0 0.75rem;
  }

  .faq-rail__link {
    min-height: var(--touch-min, 44px);
  }

  .faq-section + .faq-section {
    padding-top: 1.75rem;
  }

  .faq-section__title {
    margin-bottom: 1rem;
  }

  .faq-cta__panel {
    padding: 1.55rem 1.25rem;
  }
}

/* --------------------------------------------------------------------------
 * Insights Coming Soon
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .insight-open {
    padding-top: clamp(6.25rem, 18vw, 8rem);
    padding-bottom: 1.75rem;
  }

  .insight-index__list {
    grid-template-columns: 1fr;
  }

  .insight-cover__caption {
    left: 0.95rem;
    right: 0.95rem;
    bottom: 0.9rem;
  }
}

/* --------------------------------------------------------------------------
 * Work archive
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .work-open {
    padding-top: clamp(6.25rem, 18vw, 8rem);
    padding-bottom: 2.25rem;
    padding-left: var(--space-gutter);
    padding-right: var(--space-gutter);
  }

  .work-open__title {
    line-height: 1.12;
    margin-bottom: 1.15rem;
  }

  .work-filters__inner {
    padding-left: var(--space-gutter);
    padding-right: var(--space-gutter);
  }

  .work-filters__list {
    gap: 0.45rem;
    padding-bottom: 0.55rem;
  }

  .work-card__body {
    padding: 1rem 0.15rem 0.35rem;
  }

  .work-featured,
  .work-archive,
  .work-cta {
    padding-left: var(--space-gutter);
    padding-right: var(--space-gutter);
  }

  .work-cta__panel {
    padding: 1.55rem 1.25rem;
  }
}

/* --------------------------------------------------------------------------
 * Case studies
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .case-nav,
  .case-hero,
  .case-section,
  .case-cta,
  .case-adjacent {
    padding-left: var(--space-gutter);
    padding-right: var(--space-gutter);
  }

  .case-nav {
    padding-top: 5.75rem;
  }

  .case-back {
    min-height: var(--touch-min);
  }

  .case-hero {
    padding-bottom: 1.75rem;
  }

  .case-hero__title {
    margin-bottom: 0.85rem;
  }

  .case-meta,
  .case-tags {
    gap: 0.45rem;
  }

  .case-section {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }

  .case-media,
  .case-devices {
    margin-inline: 0;
  }

  .case-cta__panel {
    padding: 1.55rem 1.25rem;
  }
}

/* --------------------------------------------------------------------------
 * Business Audit modal — phone sheet craft
 * ------------------------------------------------------------------------ */
@media (max-width: 639px) {
  .audit-modal {
    --audit-pad-x: 1rem;
  }

  .audit-modal__title {
    font-size: clamp(1.2rem, 5.5vw, 1.4rem);
  }

  .audit-modal__sheet {
    max-height: min(94dvh, 100%);
  }

  .audit-modal__header {
    padding: 0.65rem var(--audit-pad-x) 0.8rem;
  }

  .audit-modal button[type="submit"],
  .audit-modal .audit-modal__submit {
    min-height: 48px;
  }

  .audit-modal input,
  .audit-modal textarea,
  .audit-modal select {
    font-size: 16px; /* prevent iOS zoom */
  }
}

/* --------------------------------------------------------------------------
 * 404
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  body:has(.wrap) {
    padding: 1.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
  }

  .wrap h1 {
    font-size: clamp(1.55rem, 7vw, 2rem);
  }

  .actions {
    flex-direction: column;
    align-items: stretch;
  }

  .actions a {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
 * Reduced motion — keep mobile calm
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .svc-bubble__orb,
  .svc-bubble__spectrum,
  .faq-item,
  .home-process-step,
  .work-card,
  .proof-action {
    transition: none !important;
  }
}