/* ==========================================================================
   PLAIN SIGHT — MOBILE STYLES
   Breakpoint: 768px and below. No desktop styles are modified here.
   ========================================================================== */

/* Hamburger hidden on desktop — outside media query so it applies globally */
.nav-hamburger {
  display: none;
}

@media (max-width: 768px) {

  /* ========================================================================
     GLOBAL
     ======================================================================== */

  body {
    overflow-x: hidden;
  }

  .container {
    padding: 0 24px;
    max-width: 100%;
  }

  /* ========================================================================
     NAV — hide links and CTA, show hamburger
     ======================================================================== */

  .nav-links,
  .nav-right > .btn-primary {
    display: none;
  }

  .nav-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin-right: -10px;
    min-width: 44px;
    min-height: 44px;
  }

  .nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text-primary);
  }

  /* Mobile dropdown menu */
  .mobile-menu {
    background: var(--bg-primary);
    border-top: var(--border-width) solid var(--border);
    border-bottom: var(--border-width) solid var(--border);
  }

  .mobile-menu[hidden] {
    display: none;
  }

  .mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mobile-menu li {
    border-bottom: var(--border-width) solid var(--border);
  }

  .mobile-menu li:last-child {
    border-bottom: none;
  }

  .mobile-menu li a {
    display: block;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: var(--ls-nav);
    text-transform: uppercase;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 20px 24px;
  }

  .mobile-menu li a:hover,
  .mobile-menu li a:focus {
    color: var(--text-primary);
  }

  /* ========================================================================
     HERO
     ======================================================================== */

  .hero,
  .path-hero {
    min-height: 0;
  }

  .hero-content,
  .path-hero-content {
    padding: 60px 0;
    max-width: 100%;
    /* Reset about.html's right-aligned hero-content */
    margin-left: 0;
  }

  .hero-headline,
  .path-headline {
    font-size: clamp(28px, 7vw, 48px);
    line-height: 1.2;
  }

  /* ========================================================================
     SECTION PADDING — 120px → 60px
     ======================================================================== */

  .why-matters,
  .take-control,
  .our-approach,
  .who-we-work-with,
  .faq-section,
  .s01,
  .s02,
  .s03,
  .s04,
  .s05,
  .s01-audit,
  .s02-retainers,
  .s03-production,
  .s-closing,
  .s-learned,
  .s02-observation,
  .s03-moment,
  .s04-bio,
  .audit-section,
  .s01-contact {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .faq-group {
    padding: 40px 0 60px;
  }

  .faq-cta {
    padding: 60px 0;
  }

  /* ========================================================================
     SECTION HEADLINES — clamp down
     ======================================================================== */

  .wm-headline,
  .tc-headline,
  .oa-headline,
  .ww-headline,
  .faq-headline,
  .s01-headline,
  .s02-headline,
  .s03-headline,
  .s04-headline,
  .s05-headline,
  .closing-tagline,
  .s-learned-headline {
    font-size: clamp(22px, 5vw, 36px);
  }

  /* about.html large text blocks */
  .s-learned-body {
    font-size: 17px;
  }

  .s-learned-shift {
    font-size: 22px;
    line-height: 1.4;
  }

  .s-learned-statement {
    font-size: 18px;
  }

  /* ========================================================================
     GRIDS — COLLAPSE TO SINGLE COLUMN
     ======================================================================== */

  /* Flush-gap panel grids */
  .steps-grid,
  .roadmap-panels,
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  /* Content grids with wider spacing */
  .compare-grid,
  .three-col,
  .s01-grid,
  .s01-cols,
  .audit-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* index.html — before/after column borders */
  .compare-col--before {
    padding-right: 0;
    border-right: none;
    padding-bottom: 24px;
    border-bottom: var(--border-width) solid var(--border);
  }

  .compare-col--now {
    padding-left: 0;
    padding-top: 24px;
  }

  /* services.html — s01-cols (dark bg two-col audit breakdown) */
  .s01-col:first-child {
    padding-right: 0;
    border-right: none;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--ps-charcoal);
  }

  .s01-col:last-child {
    padding-left: 0;
  }

  /* services.html — production row name/price row */
  .s03-row-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* path.html — s03 off-center content block */
  .s03-content {
    width: 100%;
    margin-left: 0;
  }

  /* path.html — roadmap panel padding */
  .roadmap-panel {
    padding: 24px;
    min-height: 0;
  }

  /* ========================================================================
     TAKE CONTROL ITEMS (index.html — horizontal pill list)
     ======================================================================== */

  .tc-items {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 32px;
  }

  .tc-item {
    padding: 12px 0;
    border-right: none;
    border-bottom: var(--border-width) solid var(--border);
    padding-right: 0;
    margin-right: 0;
    width: 100%;
  }

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

  /* ========================================================================
     STEP PANELS (index.html Our Approach — 3-up panels)
     ======================================================================== */

  .step {
    padding: 32px 24px;
  }

  /* ========================================================================
     CTA BLOCK (index.html)
     ======================================================================== */

  .cta-block {
    padding: 40px 24px;
  }

  .btn-primary-lg {
    white-space: normal;
    text-align: center;
  }

  /* ========================================================================
     DECORATIVE CIRCLES — hide side-positioned SVGs on mobile
     The hero SVGs are contained by overflow:hidden on the parent sections.
     The floating side circles are absolutely positioned and can bleed.
     ======================================================================== */

  .s01-ghost,
  .s03-circles {
    display: none;
  }

  /* ========================================================================
     FORMS (audit.html)
     ======================================================================== */

  /* Prevent iOS Safari from zooming on input focus */
  .field input,
  .field textarea {
    font-size: 16px;
  }

  .audit-form-wrap {
    padding: 32px 24px;
  }

  .btn-submit {
    width: 100%;
  }

  /* ========================================================================
     CONTACT CARD
     ======================================================================== */

  .contact-card {
    padding: 32px 24px;
  }

  /* ========================================================================
     FOOTER — stack vertically
     ======================================================================== */

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 32px 24px;
  }

  .footer-nav {
    flex-wrap: wrap;
    gap: 16px;
  }

} /* end @media (max-width: 768px) */