/* ============================================================================
   PHONE LAYER  ·  600px and below
   ----------------------------------------------------------------------------
   The site was built with one breakpoint at 720px, which had to serve both a
   tablet and a 360px Android. This layer is the phone's own layout: rows become
   stacks, four-across decks become swipeable, and desktop section padding is
   cut back so the page stops reading as gaps with text in between.

   Built to qa-pipeline/MOBILE-RULEBOOK.md. Enforced by the gate.
   ========================================================================== */

@media (max-width: 600px) {

  /* Text links still need a comfortable finger-sized target. */
  .link-arrow { min-height: 44px; }
  .close-actions a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Use the visible phone viewport, including in mobile browsers whose layout
     viewport is temporarily wider while the address bar changes size. */
  .site-header { right: auto; width: 100vw; }
  .menu-panel,
  .site-loader { right: auto; width: 100vw; overflow-x: clip; }
  .project-review-panel { width: 100vw; }

  /* ---------------------------------------------------------------- reading */
  body { font-size: 16px; }
  p, li, blockquote, dd { line-height: 1.55; }
  .review-quote blockquote,
  .review-layout blockquote,
  blockquote { line-height: 1.5; }

  /* nothing below 15px, and the smallest labels get lifted off the floor */
  .exact-stage-ledger p,
  .exact-stage-ledger article > div > p,
  .exact-proof-copy span,
  .exact-proof-copy > span,
  .field label,
  .contact-form label,
  form label,
  .project-label span,
  .stage-ledger p,
  small, figcaption { font-size: 15px !important; }

  /* Film-edge captions are measurement labels, not body copy. Keep the full
     job title visible inside the narrow mobile frames. */
  .exact-film-card figcaption,
  .exact-film-card figcaption span {
    font-size: clamp(5.5px, 1.5vw, 7px) !important;
    letter-spacing: 0.01em;
  }
  .exact-film-card figcaption {
    gap: 5px;
    padding-inline: 6px;
  }
  .exact-film-card figcaption span {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
  }
  .exact-film-card figcaption b { flex: 0 0 auto; }

  /* running text stays inside a comfortable measure */
  .container p, .content-grid p, .service-row p { max-width: 45ch; }

  /* ------------------------------------------------------- rows become stacks */
  .scope-grid,
  .planner-grid,
  .review-layout,
  .faq-layout,
  .content-grid,
  .review-stack,
  .contact-layout,
  .service-contact-layout,
  .project-story,
  .project-gallery,
  .project-grid,
  .before-after,
  .portrait-band,
  .principles,
  .service-row,
  .footer-grid,
  .menu-panel,
  .hero-content {
    grid-template-columns: 1fr !important;
    gap: 26px;
  }

  /* facts stay two-across - they are short and read better paired than stacked */
  .project-facts { grid-template-columns: repeat(2, 1fr) !important; gap: 18px 14px; }

  /* a number rail beside content is fine, it just needs to be narrower */
  .process-step { grid-template-columns: 44px 1fr !important; gap: 14px; }
  .timeline-row { grid-template-columns: 64px 1fr !important; gap: 14px; }

  /* the 12-column film index cannot survive; it becomes a simple 4-up */
  .film-index { grid-template-columns: repeat(4, 1fr) !important; gap: 8px; }

  /* ------------------------------------------- wide decks become swipe decks */
  /* A four-across row on a 390px screen gives 90px columns. Rather than stack
     four identical cards (the most boring pattern on mobile) these scroll
     sideways with the next card peeking, so it is obvious there is more. */
  .hero-stage-strip,
  .trust-strip {
    grid-template-columns: none !important;
    display: flex !important;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-inline: 0;
  }
  .hero-stage-strip::-webkit-scrollbar,
  .trust-strip::-webkit-scrollbar { display: none; }

  .hero-stage-strip > *,
  .trust-strip > * {
    flex: 0 0 72%;            /* the next card peeks by ~28% */
    scroll-snap-align: start;
    min-width: 0;
  }

  /* filter buttons scroll rather than squeeze */
  .filter-row {
    grid-template-columns: none !important;
    display: flex !important;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-inline: 0;
  }
  .filter-row::-webkit-scrollbar { display: none; }
  .filter-button { flex: 0 0 auto; }

  /* --------------------------------------------------------------- rhythm */
  /* Desktop section padding is roughly 40% too much on a phone - it stops
     reading as luxury and starts reading as a loading error. */
  section { padding-block: 54px; }
  section.exact-front,
  section.trust-strip,
  section.journey { padding-block: 0; }
  .container { padding-inline: 20px; }

  /* The proof frames should occupy the whole reel, with their outline visible
     at both edges instead of floating inside black padding. */
  .exact-proof-reel {
    padding: 0;
    gap: 0;
  }
  .exact-proof-track {
    height: 100%;
    padding: 0;
    gap: 5px;
  }
  .exact-proof-track figure { height: 100%; }

  /* Keep the yellow proof band compact and connect it directly to the journey. */
  .trust-strip { min-height: 108px; }
  .trust-strip .trust-item {
    min-height: 108px;
    padding: 14px 18px;
  }
  .trust-strip .trust-item strong { font-size: 24px; }
  .trust-strip .trust-item span {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.35;
  }

  /* A sideways stage swipe must not drag the whole page vertically. */
  .exact-stage-ledger {
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: none;
  }
  .exact-stage-ledger::-webkit-scrollbar { display: none; }
  .exact-stage-ledger article { scroll-snap-stop: always; }

  .hero { padding-top: 60px; }
  .scope-down { margin-top: 26px; }
  .work-heading h2 { margin-bottom: 18px; }

  /* --------------------------------------------------------------- touch */
  a[class],
  button,
  summary,
  .filter-button,
  .wordmark,
  .header-phone,
  .contact-trigger,
  .menu-toggle,
  .exact-menu-trigger {
    min-height: 44px;
    min-width: 44px;
  }

  /* min-height is ignored on a non-replaced inline box, so every one of these
     has to become a block or a flex box before the 44px means anything */
  nav a,
  footer a,
  .menu-nav a,
  .footer-grid a,
  summary,
  a[href^="mailto:"],
  a[href^="tel:"] {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  summary { justify-content: space-between; gap: 12px; }

  .menu-nav a { min-height: 56px; display: flex; align-items: center; }

  /* the phone number is the main action on a trade site - make it thumb-sized */
  a[href^="tel:"] {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    padding-inline: 4px;
  }

  /* ---------------------------------------------------------------- forms */
  .contact-form { grid-template-columns: 1fr !important; gap: 16px; }

  /* 16px exactly, or iOS Safari zooms the page on focus and never zooms back */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
    min-height: 48px;
    width: 100%;
  }
  textarea { min-height: 120px; }
  label { display: block; margin-bottom: 6px; font-size: 15px; }

  /* --------------------------------------------------------- display type */
  /* Premium display type is big and light. The gate wants 3x body size. */
  .hero h1 { font-size: clamp(46px, 13vw, 62px); font-weight: 300; letter-spacing: -0.03em; line-height: 0.98; }
  .work-heading h2,
  section h2 { font-size: clamp(38px, 10vw, 50px); font-weight: 300; letter-spacing: -0.025em; line-height: 1.02; }

  /* ----------------------------------------------------- full-height blocks */
  /* 100vh is measured without the address bar on mobile Safari, so the bottom
     of every full-screen section hides underneath it. */
  .hero-content { min-height: calc(100svh - 60px); }

  /* --------------------------------------------------------- safe area */
  .site-header { padding-top: env(safe-area-inset-top); }
  footer { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }

  /* The project link attracts attention without borrowing the permanent
     yellow current-page treatment used by navigation. */
  .footer .footer-project-link {
    position: relative;
    isolation: isolate;
    color: var(--paper);
  }
  .footer .footer-project-link::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -5px -10px;
    border: 1px solid color-mix(in srgb, var(--chalk) 0%, transparent);
    pointer-events: none;
    animation: project-signal 5.2s cubic-bezier(.22, 1, .36, 1) infinite;
  }
  @keyframes project-signal {
    0%, 62%, 100% {
      transform: scale(.985);
      border-color: color-mix(in srgb, var(--chalk) 0%, transparent);
      box-shadow: 0 4px 18px color-mix(in srgb, var(--chalk) 0%, transparent);
    }
    76% {
      transform: scale(1);
      border-color: color-mix(in srgb, var(--chalk) 72%, transparent);
      box-shadow: 0 6px 24px color-mix(in srgb, var(--chalk) 22%, transparent);
    }
    90% {
      transform: scale(1.045);
      border-color: color-mix(in srgb, var(--chalk) 0%, transparent);
      box-shadow: 0 8px 30px color-mix(in srgb, var(--chalk) 0%, transparent);
    }
  }

  /* ----------------------------------------------------------- contrast */
  /* #c44c23 on the cream panel measures 3.93:1 - under the 4.5:1 floor for
     small text. #b0441f measures 4.69:1 on cream and 5.69:1 on white, and is
     close enough to the brand rust to be indistinguishable at this size. */
  .process-step > b,
  .stage-index,
  .project-label,
  small.rust,
  .rust-text { color: #b0441f; }

  /* ------------------------------------------------------------- motion */
  /* entrance animations fire faster - a phone scrolls past before a slow
     fade-up has finished arriving */
  .reveal { transition-duration: 360ms !important; }
}

@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .reveal { transition: none !important; }
  .hero-stage-strip, .trust-strip, .filter-row { scroll-behavior: auto; }
  .footer .footer-project-link::before { animation: none; }
}

/* ----------------------------------------------------------------------------
   Very small phones (Galaxy Fold closed, 344px)
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
  .container { padding-inline: 16px; }
  section { padding-block: 44px; }
  .scope-copy h2 { font-size: clamp(22px, 7vw, 28px); }
  .project-facts { grid-template-columns: 1fr !important; }
  .film-index { grid-template-columns: repeat(3, 1fr) !important; }
  .hero-stage-strip > *, .trust-strip > * { flex-basis: 80%; }
  .hero h1 { font-size: clamp(40px, 12vw, 50px); }
}

/* ----------------------------------------------------------------------------
   Contrast corrections that apply at every width, not just on phones.
   The rust brand colour is fine for large display type (needs only 3:1) but
   fails the 4.5:1 floor at small sizes on the cream panels.
   -------------------------------------------------------------------------- */
.process-step > b,
.exact-stage-ledger b,
.stage-index { color: #b0441f; }

/* ----------------------------------------------------------------------------
   Photo band
   ----------------------------------------------------------------------------
   The inner pages ran three to five screens of unbroken text on a phone, which
   the gate reports as boring-stretch and too-few-visuals. This is the break:
   a full-bleed photo with a caption, using the site's own photography.
   -------------------------------------------------------------------------- */
.photo-band {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--green, #1d2a22);
}
.photo-band img {
  display: block;
  width: 100%;
  height: clamp(280px, 46vw, 560px);
  object-fit: cover;
  object-position: center;
}
.photo-band figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 46px 24px 20px;
  font: 500 13px/1.45 Archivo, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .74));
}
.photo-band + .photo-band { margin-top: 2px; }

@media (max-width: 600px) {
  /* taller crop on a phone - a wide letterbox reads as a divider, not a photo */
  .photo-band img { height: clamp(320px, 62vw, 420px); }
  .photo-band figcaption { padding: 40px 20px 18px; font-size: 12px; }
}

/* On the dark green panels the rust runs the other way: #b0441f measures
   2.95:1 there and even the original #c44c23 only reaches 3.52:1. A warmer,
   lighter tone clears 5.38:1 and reads as the same brand accent. */
.section-dark .exact-stage-ledger b,
.exact-front .exact-stage-ledger b,
.exact-stage-ledger b,
.section-dark .stage-index,
.section-dark .project-label { color: #e0743f; }

@media (max-width: 600px) {
  .mobile-balanced > span { display: block; white-space: nowrap; }
  .journey-beat .mobile-balanced { max-width: none; font-size: clamp(42px, 12.2vw, 52px); }

  .trust-strip {
    gap: 0 !important;
    scroll-snap-type: none !important;
    overscroll-behavior-x: contain;
  }
  .trust-strip > * { flex-basis: 76%; scroll-snap-align: none; }
  .trust-strip .trust-clone { display: flex; }
  .trust-strip .trust-item strong { font-size: 22px; line-height: 1.05; }

  .scope-down {
    max-width: none;
    font-size: clamp(22px, 7vw, 29px);
    line-height: 1.08;
    letter-spacing: -.025em;
  }

  .work-hero { min-height: 58svh; padding-bottom: 42px; }
  .work-intro { padding-block: 46px; }
  .work-intro .content-grid { gap: 18px; }
  .work-intro .content-grid h2 { font-size: clamp(38px, 10.5vw, 48px); }
  .before-after-feature { padding-block: 58px; }
  .before-after-copy { grid-template-columns: 1fr; gap: 18px; margin-bottom: 28px; }
  .before-after-copy h2 { font-size: clamp(38px, 10.5vw, 48px); }
  .source-crops { gap: 8px; }
  .source-crops figure { aspect-ratio: 1.25; }
  .source-crops img { top: -74%; }

  .ledger-intro { padding: 48px 0 8px; }
  .ledger-intro h2 { font-size: clamp(40px, 11vw, 50px); }
  .ledger-intro + .content-section { padding-top: 24px; }
  .process-intro { padding-block: 48px; }
  .process-timeline-section { padding-top: 0; padding-bottom: 0; }
  .timeline-row { padding: 34px 0; }
  .timeline-row h2 { font-size: clamp(34px, 10vw, 46px); }
  .process-statement { padding-block: 58px; }

  .reviews-hero .mobile-balanced { font-size: clamp(43px, 12vw, 54px); max-width: none; }
  .review-themes .container { grid-template-columns: 1fr; padding-block: 12px; }
  .review-themes strong { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.24); padding: 14px 0; }
  .review-themes strong:last-child { border-bottom: 0; }
  .review-feature,
  .review-feature.reverse { grid-template-columns: 1fr; min-height: 0; }
  .review-feature.reverse figure { order: 0; }
  .review-feature figure img { min-height: 0; height: clamp(340px, 105vw, 470px); }
  .review-feature article { padding: 42px 20px 52px; }
  .review-feature blockquote { font-size: clamp(30px, 8.5vw, 40px); max-width: 18ch; margin-bottom: 24px; }
  .review-contact { padding-block: 58px; }
  .review-contact h2 { font-size: clamp(40px, 11vw, 50px); }

  .scope-section .scope-grid { width: 100%; }
  .scope-copy .scope-down { margin-top: 0; }
  .scope-choice { width: 48px; height: 48px; margin-block: 24px; }

  .work-hero { min-height: 68svh; }
  .work-hero h1 { font-size: clamp(48px, 13vw, 58px); }
  .comparison-slider { aspect-ratio: 1.25; }
  .comparison-media img { top: 50%; }
  .comparison-label { top: 12px; }
  .comparison-label-before { left: 12px; }
  .comparison-label-after { right: 12px; }
  .comparison-help { font-size: 15px; }

  .photo-request { padding-block: 56px; }
  .photo-request .container { min-height: 180px; margin-inline: 16px; width: calc(100% - 32px); padding: 28px 22px; }
  .photo-request strong { font-size: clamp(30px, 8.5vw, 40px); }

  .process-statement p { font-size: 18px; }
  .photo-band-caption { padding: 40px 20px 18px; font-size: 12px; }

  .solo-review article { min-height: 0; padding: 48px 20px; }
  .review-case-studies { padding: 52px 0; }
  .review-case-studies .container,
  .case-navigation .container { grid-template-columns: 1fr; gap: 36px; }
  .review-case-studies h2,
  .case-navigation h2 { font-size: clamp(42px, 11.5vw, 52px); }
  .review-case-studies nav strong { font-size: 27px; }
  .case-review blockquote { font-size: clamp(34px, 9.5vw, 44px); }
  .case-navigation a { font-size: 23px; }
  .case-before-after { margin-top: 44px; }
  .case-before-after img { height: 380px; }

  .field input[type="file"] { font-size: 14px; }
}

@media (max-width: 720px) {
  .service-detail-intro { padding: 112px 0 64px; }
  .service-detail-intro h1 { font-size: clamp(46px, 12.5vw, 58px); }
  .service-lead { margin: 26px 0 48px; font-size: 21px; }
  .service-offer-list > div { grid-template-columns: 1fr; gap: 12px; padding: 30px 0; }
  .service-offer-media { grid-row: auto; margin-bottom: 8px; width: 100%; }
  .service-offer-list > div:hover .service-offer-media img { transform: none; }
  .service-offer-list .data { padding-top: 0; }
  .service-offer-list strong { font-size: 25px; }
  .service-switcher { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-top: 34px; }
  .service-switcher a { min-height: 42px; display: flex; align-items: center; }
  .service-proof-link { padding: 64px 0; }
  .service-proof-link .container { grid-template-columns: 1fr; gap: 30px; }
  .service-proof-link h2 { font-size: clamp(42px, 11.5vw, 52px); }
  .service-before-after { padding-block: 64px; }
  .case-story-placeholder { padding-top: 18px; font-size: 18px; }
  .about-view-section { padding: 58px 0 28px; }
  .about-principles-section { padding: 0; }
  .case-navigation .next-case strong { font-size: 30px; }
  .case-navigation .case-navigation-all { font-size: 12px; }
  .site-circuit { padding: 58px 0; }
  .site-circuit .container { grid-template-columns: 1fr; gap: 30px; }
  .site-circuit h2 { font-size: clamp(42px, 11.5vw, 52px); }
  .site-circuit a { min-height: 62px; padding: 18px 0; }
  .site-circuit a strong { font-size: 24px; }
  .work-hero { min-height: 0; padding: 112px 0 44px; }
  .work-hero h1 { font-size: clamp(48px, 13vw, 58px); }
}