/* ==========================================================================
   DJD Chimney Sweep — phone layout.
   Sizes come from the tokens in style.css, so phones only retune those tokens
   and stack the grids; every page still shares the same system.
   ========================================================================== */
@media (max-width: 700px) {
  :root {
    --container: calc(100vw - 3.2rem);
    --fs-h1: 3.6rem;
    --fs-h2: 3rem;
    --fs-cta: 2.7rem;
    --fs-h3: 2rem;
    --fs-num: 3.4rem;
    --fs-lede: 1.6rem;
    --fs-body: 1.55rem;
    --fs-small: 1.45rem;
    --fs-eyebrow: 1.15rem;
    --fs-btn: 1.7rem;
    --section-y: 3.4rem;
    --heading-gap: 2rem;
    --card-gap: 1.2rem;
    --card-pad: 1.8rem;
    --split-pad: 1.6rem;
  }

  html { font-size: 65%; }

  /* Hand-set line breaks only suit the wider layout */
  .intro h2 br { display: none; }

  /* Chrome */
  .topbar { font-size: 1.15rem; }
  .topbar .wrap { height: 3rem; gap: 1rem; }
  .topbar span { white-space: nowrap; }
  .site-header .wrap { height: 7rem; }
  .logo { width: 5.6rem; }
  .header-phone { margin-left: auto; font-size: 1.9rem; gap: .4rem; }
  .header-phone img { width: 2rem; }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .5rem;
    order: 3;
    width: 4.4rem;
    height: 4.4rem;
    margin-left: .8rem;
    padding: 0 .9rem;
    background: none;
    border: 1px solid #c9a24a;
    border-radius: .4rem;
    cursor: pointer;
  }
  .nav-toggle span { display: block; height: 2px; background: #191a18; }

  .primary-nav {
    display: none;
    position: absolute;
    z-index: 20;
    top: 100%;
    left: calc(var(--edge) * -1);
    right: calc(var(--edge) * -1);
    margin: 0;
    background: var(--nav-bg);
    border-top: 1px solid #e0d6bf;
    border-bottom: 2px solid #c9a24a;
  }
  .primary-nav.is-open { display: block; }
  .primary-nav ul { display: block; padding: .6rem 1.6rem 1rem; }
  .primary-nav li + li { border-top: 1px solid #eae2cf; }
  .primary-nav a { padding: 1.2rem 0; font-size: 1.7rem; }

  /* Heroes: photo first, then the copy on charcoal */
  .hero { display: block; min-height: 0; }
  .hero__media { position: relative; inset: auto; height: 62.5vw; }
  .hero__media img { width: 100%; -webkit-mask-image: none; mask-image: none; }
  .hero__media::after { background: linear-gradient(0deg, #191a18 0, rgba(25, 26, 24, 0) 22%); }
  .hero__inner { padding-block: 1.6rem 3.2rem; }
  .hero .btn, .gallery-hero .btn { margin-top: 2rem; }
  .lede { max-width: none; }
  .price-badge { right: 4vw; bottom: 3.5vw; width: 26vw; min-height: 0; padding: 1.6vw 1vw; }
  .price-badge--top { top: 3vw; bottom: auto; }
  .price-badge__label { font-size: 1.5vw; }
  .price-badge__amount { font-size: 10vw; }
  .price-badge__note { font-size: 2.2vw; }

  /* Everything stacks */
  .split, .cards--2, .cards--3, .numbered, .intro, .values, .contact-main, .clearer, .gallery-grid { grid-template-columns: 1fr; }
  .cards--4 { grid-template-columns: 1fr 1fr; }
  .split { min-height: 0; }
  .split__media { aspect-ratio: 16 / 10; }
  .split__media--fade img { -webkit-mask-image: none; mask-image: none; }
  .split__body { padding: 2.4rem 1.6rem 3rem; }
  .split__body > p { max-width: none; }
  .intro { gap: 1.4rem; }

  .numbered { gap: 2rem; text-align: center; }
  .numbered li, .numbered li:first-child, .numbered li + li { padding: 0; border-left: 0; }
  .first-call .numbered { text-align: left; }

  .values { gap: 2rem; padding-top: 2.2rem; }
  .values li, .values li:first-child, .values li + li { padding: 0; border-left: 0; }

  .trust ul { grid-template-columns: 1fr 1fr; height: auto; gap: 1.2rem; padding-block: 1.4rem; }
  .trust li, .trust li + li { justify-content: flex-start; height: auto; border-left: 0; }
  .trust img { width: 3.4rem; height: 3.4rem; margin-right: 1rem; }

  .included-card, .care-card { padding: 1.4rem 1.2rem; }

  .step summary { grid-template-columns: 6rem 1fr 2.4rem; grid-template-rows: auto auto; min-height: 0; padding: 1.2rem 1.2rem 1.2rem 0; row-gap: .3rem; }
  .step__num { grid-row: 1 / 3; height: 3.6rem; margin-right: 0; padding-left: 1.2rem; border-right: 0; }
  .step__title { grid-column: 2; white-space: normal; }
  .step__summary { grid-column: 2; grid-row: 2; }
  .step .chevron { grid-column: 3; grid-row: 1 / 3; }
  .step__detail { padding: 0 1.4rem 1.4rem 6rem; }

  .right-time { display: block; padding-bottom: 42vw; background-size: auto, 180% auto, auto; background-position: 0 0, right bottom, 0 0; background-image: none, url("../assets/images/sweep-roof.webp"); }
  .right-time .wrap { padding-block: 2.8rem 1.8rem; }
  .right-time p { max-width: none; }

  .regions { font-size: 2.3rem; margin-top: 1.4rem; }
  .regions li { padding: 0 1.4rem; }

  .cta .wrap { flex-direction: column; align-items: flex-start; gap: 1.8rem; padding-block: 2.8rem; }
  .cta .btn { width: 100%; }

  .contact-main { gap: 1.6rem; }
  .contact-card { padding: 2.4rem 1.8rem 12rem; }
  .form-card { padding: 2.2rem 1.8rem; }
  .field input, .field textarea { font-size: 1.6rem; }

  .clearer { gap: 2rem; }
  .feature-boxes li { height: 5.8rem; }

  .first-call .wrap { display: block; min-height: 0; }
  .first-call__photo { position: static; height: auto; aspect-ratio: 4 / 3; margin-top: 2rem; }

  .faq p { padding-right: 2rem; }

  .gallery-hero .wrap { display: block; padding-block: 2.8rem; }
  .gallery-hero__photo { margin-top: 2.4rem; }
  .gallery-grid { row-gap: 2.6rem; }

  /* Footer */
  .footer-main { flex-direction: column; gap: 2.4rem; padding-top: 3rem; }
  .footer-brand { width: auto; gap: 1.8rem; }
  .footer-brand img { width: 8.4rem; }
  .footer-brand p { font-size: 2.1rem; }
  .footer-col { width: auto; padding: 0; border-left: 0; }
  .footer-bottom { margin-top: 2.4rem; padding-block: 1.4rem 2.2rem; font-size: 1.3rem; }
}

/* Tablets and small laptops: same system, with room kept for long lines */
@media (min-width: 701px) and (max-width: 1100px) {
  .contact-main { grid-template-columns: 44% 1fr; gap: 2.4rem; }
  .contact-card { padding: 3rem 2.4rem 2.6rem; }
  .form-card { padding: 3rem 2.6rem 2.6rem; }
  .split__body h2 br { display: none; }
  .hero__media::after { background: linear-gradient(90deg, #191a18 0, #191a18 50%, rgba(25, 26, 24, 0) 68%); }
}

/* Narrow phones: nothing may push the page wider than the screen */
@media (max-width: 400px) {
  .topbar .wrap { flex-wrap: wrap; justify-content: center; gap: 0 1.2rem; height: auto; padding-block: .5rem; }
  .logo { width: 5.2rem; }
  .header-phone { font-size: 1.7rem; }
  .header-phone img { width: 1.7rem; }
  .nav-toggle { width: 4rem; height: 4rem; margin-left: .5rem; padding: 0 .8rem; }
  .footer-brand { gap: 1.2rem; }
  .footer-brand img { width: 6.6rem; }
  .footer-brand p { font-size: 1.9rem; }
  .regions { font-size: 2rem; }
  .regions li { padding: 0 .9rem; }
}