/* ================================================================
   responsive.css — additive mobile overrides
   Desktop styles in styles.css are unchanged.
   Load order: styles.css → responsive.css
   ================================================================ */

/* ---- Global safe rule ---- */
img { max-width: 100%; height: auto; }


/* ================================================================
   ≤ 768px — Tablet portrait
   ================================================================ */
@media (max-width: 768px) {

  /* Testimonials: collapse meta + body into single column */
  .testimonial {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-block: 28px;
  }
  .testimonial__meta {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding-top: 0;
  }

  /* CTA band: stack heading above actions */
  .cta-band__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }
  .cta-band__line { max-width: none; }
}


/* ================================================================
   641px – 1240px — Tablet: normal nav, no hamburger
   ================================================================ */
@media (min-width: 641px) and (max-width: 1240px) {

  /* Hide everything in header-right (phone, CTA, hamburger) */
  .header-right { display: none; }

  /* Nav: back in normal flow so space-between pushes it to the right */
  .nav,
  .site-header__inner .nav {
    display: flex;
    position: static;
    transform: none;
    flex-direction: row;
    background: transparent;
    border-top: none;
    padding: 0;
    gap: 2px;
  }

  /* Slightly smaller to fit at 768px */
  .nav a { font-size: 15px; letter-spacing: 0.05em; padding: 8px 9px; }
}


/* ================================================================
   ≤ 640px — Mobile: no hamburger, no nav
   ================================================================ */
@media (max-width: 640px) {

  /* --- Nav: hidden on phone, mobile bar handles CTAs --- */
  .hamburger { display: none; }
  .nav,
  .site-header__inner .nav { display: none; }

  /* Hide the "Get a quote" btn in header (mobile bar handles it) */
  .header-right .btn { display: none; }

  /* --- Hero --- */

  /* Stack content from top with controlled gap — kills the space-between void */
  .hero__inner         { justify-content: center; gap: clamp(32px, 5vh, 48px); }

  /* Overlay label is 9px on mobile — unreadable, remove it */
  .hero__overlay-label { display: none; }

  /* Bigger display text */
  .hero__display       { font-size: clamp(88px, 26vw, 140px); }

  /* Bigger punchier lede */
  .hero__lede          { font-size: clamp(32px, 8vw, 48px); line-height: 1; }

  /* Tighten copy section */
  .hero__copy          { gap: 20px; padding-bottom: 24px; }

  /* Fix the nowrap that causes horizontal scroll */
  .hero__sub           { white-space: normal; font-size: 15px; line-height: 1.55; }

  /* Left-align copy-right, full-width button */
  .hero__copy-right    { align-items: flex-start; text-align: left; gap: 20px; }
  .hero__copy-right .btn { width: 100%; justify-content: center; }

  /* --- Rest of 640px rules --- */

  /* Scale fixed step numbers and headings */
  .step__num { font-size: clamp(32px, 9vw, 48px); }
  .step h3   { font-size: clamp(20px, 5vw, 28px); }

  /* Scale work-card captions */
  .work-card h4          { font-size: clamp(16px, 4.5vw, 22px); }
  .work-card figcaption  { padding: 14px 18px; }

  /* Scale the large footer brand mark */
  .footer__brand { font-size: clamp(36px, 12vw, 56px); }
}


/* ================================================================
   ≤ 480px — Mobile portrait
   ================================================================ */
@media (max-width: 480px) {

  /* Trust strip: single column, icon inline with text */
  .trust-list {
    grid-template-columns: 1fr;
    border-left: none;
  }
  .trust-item {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 12px 20px;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }

  /* Postcode list: single column */
  .postcode-list          { grid-template-columns: 1fr; }
  .postcode-list li:nth-child(odd)  { border-right: 0; padding-right: 4px; }
  .postcode-list li:nth-child(even) { padding-left: 4px; }

  /* CTA actions: stack phone + button, button full-width */
  .cta-band__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: 100%;
  }
  .cta-band__actions .btn {
    justify-content: center;
  }
}


/* ================================================================
   ≤ 380px — Small mobile portrait
   ================================================================ */
@media (max-width: 380px) {

  /* Tighten hero copy spacing at very small sizes */
  .hero__copy       { gap: 20px; }
  .hero__copy-right { gap: 16px; }

  /* Pull back section header bottom margin */
  .section-head         { margin-bottom: 36px; }
  .section-head--row    { margin-bottom: 36px; }

  /* Compact trust items */
  .trust-item { padding: 10px 16px; gap: 10px; }

  /* Accordion head: tighten gap on very small screens */
  .sacc__head { gap: 12px; padding: 18px 0; }
}