/* ==========================================================================
   PCAE mobile fixes — load AFTER style.css + pcae-identity.css
   Layout breakpoint: 1100px
   ========================================================================== */

@media (max-width: 1100px) {
  /* Staging banner: one line, never wrap over the header */
  .stage-banner {
    height: 26px;
    font-size: 9px;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 8px;
  }
  body { padding-top: 26px; }
  .site-header { top: 26px !important; }
  .rail-toggle {
    top: calc(26px + 14px) !important;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
  }

  /* Kill desktop ink rail + frosted side panel — they darken body text */
  main::after,
  .hero .frost,
  .slider .frost,
  .cta-photo .frost,
  .plan-section .rail-ink,
  .plan-section .band-limit {
    display: none !important;
  }

  /* Brand lockup — identity.css was forcing 40px over mobile 24px */
  .brand-lockup .brand-name {
    font-size: 22px !important;
    line-height: 1;
  }
  .brand-lockup .brand-sub {
    font-size: 9px;
    letter-spacing: 0.22em;
  }

  /* Hero type + slogan clear of header */
  :root {
    --display-xl: 42px;
    --display-lg: 30px;
    --display-md: 24px;
  }
  .pin-scope {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 var(--gutter) 110px;
    box-sizing: border-box;
  }
  .pin-scope .pin-title,
  .pin-scope .display-xl {
    position: static !important;
    margin: 0;
    font-size: clamp(36px, 11vw, 48px) !important;
    line-height: 1.05;
    max-width: 100%;
  }
  .hero-slogan {
    position: static;
    margin: 0 0 12px;
    font-size: 11px;
    letter-spacing: 0.12em;
    max-width: 90%;
  }
  .scroll-cue { bottom: 72px; }

  /* Intro: kill 254px desktop offset that leaves a huge blank gap */
  .intro { padding-top: 48px !important; }
  .intro .split {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding-top: 0 !important;
    padding-bottom: 48px !important;
  }
  .intro .split > div:first-child {
    padding-top: 0 !important;
  }
  .gallery-panel { height: 56vw; min-height: 220px; max-height: 320px; }

  /* Slider captions readable */
  .slider .caption .kicker {
    color: #f0e6d4 !important;
    text-shadow: 0 1px 8px rgba(0,0,0,.55);
    font-size: 13px !important;
  }
  .slider .caption { bottom: 96px; left: var(--gutter); right: var(--gutter); }
  .slider .dashes button,
  .dashes [role="tab"] {
    min-width: 44px;
    min-height: 44px;
  }

  /* Plan art — contain, no clipped overflow */
  .plan-art {
    width: 100% !important;
    max-width: 100%;
    left: 0 !important;
    margin: 0 0 32px !important;
  }
  .plan-copy {
    padding: 64px var(--gutter) 48px !important;
  }

  /* Leaf / service pages */
  .leaf-hero { min-height: 42vh; }
  .leaf-hero-copy {
    padding: 5.5rem var(--gutter) 1.75rem !important;
  }
  .leaf-hero-copy h1 {
    font-size: clamp(1.9rem, 8vw, 2.6rem) !important;
  }
  .leaf-body,
  .work-strip,
  .svc-hero,
  .hub-list,
  .hub-notes {
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
  }
  .work-grid,
  .home-work .work-grid {
    grid-template-columns: 1fr !important;
  }
  .work-card.is-collage img,
  .frow .photo.is-collage img {
    object-fit: cover !important;
    aspect-ratio: 16 / 10;
    height: auto !important;
  }

  /* Footer: stack cleanly */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px 0 !important;
    padding: 36px 0 24px !important;
    width: 100% !important;
  }
  .footer-grid .col-contact { margin-bottom: 8px !important; }
  .footer-grid nav {
    display: grid;
    gap: 0;
  }
  .footer-grid nav a {
    margin-bottom: 10px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .footer-grid nav a:first-child {
    font-size: 15px !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.65;
    margin-bottom: 6px !important;
    min-height: 0;
  }
  .footer-brand {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 8px 0 20px !important;
  }
  .footer-social a {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
  }
  .footer-social svg { width: 22px; height: 22px; }
  .legal-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 16px 0 !important;
  }
  .legal-bar .copyright,
  .legal-bar a {
    width: auto !important;
    display: block;
    min-height: 40px;
    line-height: 1.4;
  }
  .legal-credit { padding: 0 0 20px !important; }

  /* Closing statement spacing */
  .statements .display-lg {
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.15 !important;
    margin-bottom: 1rem;
  }
  .question-strip .arrow-link {
    font-size: 17px !important;
    align-items: flex-start;
    gap: 12px;
  }

  /* Town link wrap */
  .town-links { font-size: 0.95rem; }
}

@media (max-width: 480px) {
  .header-cta { margin-right: 72px !important; }
  .svc-cta-row { flex-direction: column; align-items: flex-start !important; }
}