/* ==========================================================================
   responsive.css - breakpoints driven by layout behaviour, not device names.
   <600px   single-column phone layout
   600px+   wide phone / small tablet: multi-column grids
   768px+   single-row accreditation + feature strips
   1024px+  locked desktop reference layout (1089x1444)
   1280px+  large desktop / ultrawide: capped content, extra breathing room
   ========================================================================== */

/* ------------------------------------------------- small phones (<400px) -- */

@media (max-width: 399px) {
  :root {
    --gutter: 14px;
    --fs-hero: 1.75rem;
  }

  .hero__cta .btn--primary { inline-size: 100%; }
}

@media (max-width: 479px) {
  :root { --gutter: 14px; }

  .brand__logo { width: clamp(96px, 26vw, 124px); }

  .header-cta { min-width: 0; }

  /* .header-cta IS the .btn element (no descendant selector) */
  .header-cta {
    gap: 6px;
    padding: 10px 12px;
    font-size: 0.6875rem;
  }

  .icon-wa { width: 16px; height: 16px; }

  .burger { margin-right: -2px; }
}

/* --------------------------------------------- very small phones (<360px) -- */

@media (max-width: 359px) {
  :root { --gutter: 12px; }

  .site-header__inner { gap: 8px; }

  .brand { min-width: 0; }

  .brand__logo { width: clamp(64px, 24vw, 96px); }

  .header-cta { gap: 5px; padding: 9px 10px; font-size: 0.625rem; }

  .icon-wa { width: 14px; height: 14px; }

  .hero__lead { max-width: none; }
}

/* ------------------------------------------- landscape phones / low height -- */

@media (max-height: 560px) and (orientation: landscape) {
  .hero__inner { padding-block: 22px 26px; }
  .hero__media { width: 54%; }
  .drawer { padding-top: calc(var(--safe-t) + 68px); }
}

/* --------------------------------------------------- 600px : two-up grids -- */

@media (min-width: 600px) {
  .features__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .industries__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* the price card's two-column form lives in the 600-1023px block below */
}

/* --------------------------------- 600-1023px : tablet price card (one row) -- */

/* v2.6 (owner brief 2026-09-25, item 3): the two-column card keeps the areas the
   design declares ("head" + "visual" in the left column, "details" beside them),
   and those areas only work once the .price-card__details wrapper is lifted out
   of the way with `display: contents` - exactly what the desktop block does.
   Without it the bin visual fell into an implicit column of its own: measured at
   870px it was a 121x56px photo in the card's corner, and once the dimension
   call-outs arrived their labels rendered at 4.6px, i.e. unreadable. With the
   photo under the card title in column 1 (the reference's own photo-left /
   copy-right card) it is 270-500px wide and the call-outs read at 10-19px. */
@media (min-width: 600px) and (max-width: 1023.9px) {
  .price-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "head   desc"
      "visual price"
      "visual checks"
      "cta    cta";
    align-items: start;
    column-gap: clamp(12px, 2vw, 22px);
  }

  .price-card__details { display: contents; }
  .price-card__head { grid-area: head; }
  .price-card__desc { grid-area: desc; }
  .price-card__visual { grid-area: visual; width: 100%; }
  .price-card__price { grid-area: price; }
  .price-card__checks { grid-area: checks; grid-template-columns: minmax(0, 1fr); }
  .price-card__cta { grid-area: cta; justify-self: start; }
}

/* ------------------------------------------ 768px : unlocked single rows -- */

@media (min-width: 768px) {
  .accred__list { grid-template-columns: repeat(7, minmax(0, 1fr)); }

  .accred__item + .accred__item { border-left: 1px solid var(--line-soft); }

  /* v2.5 (item 6): the feature strip is card-based now, so the v2.2 hairlines
     between its items are gone - the four cards separate it themselves. */

  /* v2.6 (item 4): the footer is a two-column row from tablet width up
     (brand sticker | contact triad) instead of the phone stack */
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}


/* ------------------------------------------- 1024px : locked desktop view -- */

@media (min-width: 1024px) {
  :root {
    --gutter: clamp(40px, 5.05vw, 55px);   /* 55px at the 1089 reference */
    /* v2.5 (item 7): the locked desktop band height, and the value the hero
       photo box is sized from - see .hero__media below.
       v2.6 (item 6): 392 -> 416px, the measured height of the redesigned benefit
       row (48px discs + a 2-3 line label underneath) plus the copy above it. The
       band is the only thing that could give the row room: shrinking the discs
       again or clipping the strip were the alternatives. The band is a true
       minimum again (measured, not guessed) at 1024-1279px, 1280-1535px and
       1536px+. */
    --hero-band: 416px;
    /* measured from references/web_locked_reference.png (cap heights in
       docs/BUILD_REPORT.md). Body/lead sizes carry a readability floor on top
       of the measured values. */
    --fs-hero: 2.6875rem;      /* 43px  - measured cap 31px */
    --fs-h2: 1.5rem;           /* 24px  - measured cap 16-18px */
    --fs-h3: 1.125rem;
    --fs-lead: 0.875rem;       /* 14px  (measured 12px + floor) */
    --fs-body: 0.8125rem;      /* 13px */
    --fs-small: 0.75rem;       /* 12px */
    --fs-eyebrow: 0.75rem;
    --fs-price: 1.875rem;      /* 30px */
    --section-y: 14px;
    --gap-block: 11px;
  }

  html { scroll-padding-top: calc(var(--header-h) + 12px); }

  /* ---- header ---- */
  .site-header {
    background: linear-gradient(90deg, var(--surface) 0 46%, rgba(255, 255, 255, 0.94) 62%,
                rgba(255, 255, 255, 0.86) 100%);
    border-bottom: 0;
    backdrop-filter: blur(6px);
  }

  .site-header[data-scrolled="true"] {
    background: var(--surface);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  }

  .site-header__inner {
    min-height: var(--header-h);
    gap: clamp(18px, 3vw, 44px);
  }

  /* manifest locks the desktop lockup at x=45, i.e. 10px left of the 55px text gutter */
  .brand { margin-left: -10px; }
  .brand__logo { width: clamp(196px, 24.3vw, 265px); }
  .brand__logo--mobile { display: none; }
  .brand__logo--desktop { display: block; }

  .nav {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.1vw, 28px);
    margin-inline: auto;
  }

  .nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--touch);
    color: var(--ink-text);
    font-size: clamp(0.8125rem, 1.35vw, 0.9375rem);
    font-weight: var(--fw-bold);
    white-space: nowrap;
  }

  .nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    height: 3px;
    border-radius: 2px;
    background: var(--ie-yellow);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease);
  }

  .nav__link:hover::after,
  .nav__link[aria-current="true"]::after { transform: none; }

  .header-cta { margin-left: 0; }
  .header-cta { min-width: var(--wa-pill-w); min-height: 48px; font-size: 0.9375rem; }

  .burger { display: none; }
  .drawer { display: none; }

  /* ---- hero: locked desktop composition (photo right, copy left) ---- */
  /* v2.6 (owner brief 2026-09-25, item 2): the owner read the desktop hero as a
     full-bleed photo with ink copy floating on a white page ("the two lorries
     look cut off"), so the desktop band now uses the phone hero's treatment: a
     navy band, the copy on the left over a real dark scrim, and the photo
     blending into the band instead of ending on a hard edge. The photo keeps its
     locked 649x340 box, its top edge (flush with the header) and its right edge
     (the viewport), so the design's framing is untouched - what changes is that
     the left and bottom edges dissolve into the band and the copy is white on
     navy + scrim, exactly the contrast the phone hero already has. */
  .hero {
    overflow: visible;
    background: linear-gradient(180deg, var(--hero-navy) 0%, var(--hero-navy-2) 100%);
    color: var(--white);
  }

  /* v2.3 (sec.8-9): display setting tightened (tracking, line-height, a whisper
     of depth) so the lock-up reads as designed typography, not as default HTML.
     v2.6: white ink on the navy band, and the second line is the phone hero's
     yellow accent instead of the v2.5 ink-on-yellow marker (the marker was drawn
     for the light desktop band and read as a sticker on navy). */
  .hero__title {
    color: var(--white);
    line-height: 1.02;
    letter-spacing: -0.036em;
    text-shadow: 0 2px 6px rgba(2, 15, 31, 0.5);
  }

  .hero__title .accent {
    display: block;
    width: fit-content;
    color: var(--ie-yellow);
    background: none;
    margin-top: 0.04em;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    letter-spacing: -0.026em;
  }

  /* the design's photo starts at the very top of the hero band.
     v2.3 (sec.6): the owner's photograph is a hard-edged rectangle where the
     mockup crop carried its own baked fade, so the same soft blend into the
     white copy area is drawn in CSS - narrow and fully transparent by 84px, so
     no part of the scene is washed out.
     v2.5 (item 7): the width is now capped by the band height as well as by the
     design's share. From 1366px up the plain 59.6% share made the box taller than
     the hero band (523px of photo in a 470px band at 1920px), so the section
     below it clipped the bottom of the bitmap - the lorries' bins, wheels and the
     yard ground. The cap is derived from --hero-band through the box ratio
     (1298/680 = 1.90882, rounded down so the box can never exceed the band by a
     sub-pixel), which leaves the locked 649x340 box at the 1089px reference
     untouched and only shrinks the photo where it used to be cut. */
  .hero__media {
    inset: 0 0 auto auto;
    width: min(59.6%, calc(var(--hero-band) * 1.9));
    max-width: none;
    aspect-ratio: 1298 / 680;
  }

  .hero__media::after {
    /* v2.6 (item 2): the phone hero's navy scrim, tuned for the desktop box -
       heavy navy on the left where the copy and the benefit row reach into the
       photo, and a bottom fade that dissolves the photo's lower edge into the
       band (the desktop box is top-anchored, so without it the bitmap would end
       on the hard horizontal cut the owner read as a bad crop). */
    display: block;
    background:
      linear-gradient(180deg, rgba(2, 15, 31, 0) 56%, rgba(2, 15, 31, 0.42) 78%,
                      rgba(2, 15, 31, 0.82) 92%, var(--hero-navy) 100%),
      linear-gradient(90deg, var(--hero-navy) 0, rgba(2, 15, 31, 0.93) 8%,
                      rgba(2, 15, 31, 0.7) 18%, rgba(2, 15, 31, 0.34) 36%,
                      rgba(2, 15, 31, 0.1) 56%, rgba(2, 15, 31, 0) 76%);
  }

  .hero__inner {
    /* v2.5 (item 7): the band height comes from the token, the same value the
       photo box is sized from - 416px here, 444px from 1280px and 494px from
       1536px (v2.6, item 6) */
    min-height: var(--hero-band);
    align-content: start;
    gap: 9px;
    padding-block: 12px 6px;
  }

  .hero__title { max-width: 15ch; }

  /* v2.6 (item 2): the eyebrow badge on the navy band - the phone hero's
     translucent pill, so the copy block sits on its own dark ground */
  .hero .eyebrow {
    padding: 5px 14px 5px 10px;
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.11);
    color: rgba(255, 255, 255, 0.96);
    box-shadow: none;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }

  .hero__lead {
    margin-top: clamp(8px, 1.3vw, 15px);
    max-width: 46ch;
    color: rgba(255, 255, 255, 0.94);
    line-height: 1.5;
    /* white on navy + scrim: the legibility shadow earns its keep again */
    text-shadow: 0 1px 3px rgba(2, 15, 31, 0.45);
  }

  .hero__cta { margin-top: 5px; }
  .hero__cta .btn { min-height: 48px; padding: 12px 26px; font-size: 0.9375rem; }
  .hero__cta .btn--primary { inline-size: auto; }

  /* the ghost CTA is the band's own secondary action: a quiet translucent pill
     instead of the v2.5 white card, which would punch a hole in the navy */
  .hero__cta .btn--ghost {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--white);
    box-shadow: none;
  }

  .hero__cta .btn--ghost:hover {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.15);
  }

  /* v2.6 (item 6): the redesigned benefit row - four 48px IE-yellow discs, label
     centred underneath, wide column gaps, no card: the icons carry the strip and
     the row keeps the whole 416px band's width budget. */
  .benefits {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(100%, 500px);
    margin-top: 14px;
    gap: 16px;
  }

  .benefits__label { color: rgba(255, 255, 255, 0.94); }

  /* ---- benefits live in the hero on desktop ---- */
  .features { display: none; }

  /* ---- accreditation ---- */
  .accred { padding-block: 10px; }
  .accred__item img { height: 46px; }
  .accred__list { gap: 18px; margin-top: 6px; }
  .accred__title { font-size: 0.75rem; }

  /* ---- pricing ---- */
  .pricing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .price-card {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr);
    grid-template-areas:
      "head   visual"
      "desc   visual"
      "price  visual"
      "checks checks"
      "cta    cta";
    align-items: start;
    padding: 12px;
    column-gap: 12px;
  }

  .price-card__details { display: contents; }
  .price-card__visual { grid-area: visual; }
  .price-card__desc { grid-area: desc; }
  .price-card__price { grid-area: price; }
  .price-card__checks { grid-area: checks; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .price-card__cta { grid-area: cta; justify-self: start; min-width: 192px; min-height: 40px; padding: 10px 22px; }

  .check { font-size: 0.6875rem; }
  .check__mark { width: 16px; height: 16px; font-size: 9px; }

  /* ---- industries ---- */
  /* the disc is the design's sticker: its centre sits on the photo's bottom edge
     and it hangs over the white body, so it is taken out of flow and anchored to
     the body's top edge (`-26.5px` = half of the 53px disc, i.e. the seam). Its
     left edge is 9px from the card's border box - the design's inset (12px body
     padding squeezed the disc inboard of the reference, and keeping it in flow
     could not overlap the photo at all, which is the "icon on top of the title"
     the card used to read as). */
  .industry-card__body { position: relative; padding: 3px 12px 6px; }

  .industry-card__icon {
    display: block;
    position: absolute;
    left: 8px;
    top: -26.5px;
    width: 53px;
  }

  /* title + copy are indented to clear the disc (53px disc + 8px inset + 12px
     gap = 55px from the body's content box), and the body's top padding is the
     design's ~3px so the title's first line lands beside the disc. */
  .industry-card__head { padding-left: 55px; }
  .industry-card__desc { margin-top: 3px; margin-left: 55px; font-size: 0.65625rem; }

  /* the desktop crop is the flatter one - the locked reference's own photo box
     (every card in a row shares one ratio, so the three photos and their titles
     line up exactly as in the reference) */
  .industry-card:nth-child(1) .industry-card__media img { aspect-ratio: 634 / 186; }
  .industry-card:nth-child(2) .industry-card__media img { aspect-ratio: 584 / 171; }
  .industry-card:nth-child(3) .industry-card__media img { aspect-ratio: 638 / 187; }
  .industry-card:nth-child(4) .industry-card__media img { aspect-ratio: 634 / 173; }
  .industry-card:nth-child(5) .industry-card__media img { aspect-ratio: 584 / 159; }
  .industry-card:nth-child(6) .industry-card__media img { aspect-ratio: 638 / 174; }

  /* anchored sections must clear the 74px sticky header */
  main > section[id] { scroll-margin-top: calc(var(--header-h) + 8px); }

  /* v2.6 (item 4): the footer is part of the phone page now, so the desktop
     block restores the wide one-row layout (brand sticker | contact triad) */
  .site-footer__inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: clamp(16px, 3vw, 30px);
  }

  .site-footer__brand img { width: clamp(200px, 22vw, 240px); }

  .site-footer__contact {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(14px, 2.4vw, 28px);
    margin-left: auto;
  }

  /* v2.6 (item 3): the desktop visual is the annotated card bitmap, so the vector
     call-out layer and the phone frame's extra band switch off here */
  .bin-dims { display: none; }

  .price-card__visual--2ft,
  .price-card__visual--4ft { aspect-ratio: auto; }

  .price-card__visual > picture { position: static; }

  /* copy | map | service-area card: the card sits in its own column so it can
     never overlap the footer on shorter desktops (see docs/BUILD_REPORT.md) */
  .coverage__inner {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.45fr) minmax(0, 0.36fr);
    align-items: center;
    gap: 18px;
  }

  .coverage__map { display: contents; }
  .coverage__card { margin-left: -12px; }
  .coverage .check { font-size: 0.6875rem; }
  .coverage__cta { margin-top: 10px; }
  .site-footer { padding-block: 10px; }
  .site-footer .contact-item { min-height: 34px; }
  .site-footer__legal { margin-top: 6px; }
}

/* ------------------------------------------------- 1280px : large desktop -- */

@media (min-width: 1280px) {
  /* v2.5 (item 7): the band height lives in the token, so .hero__inner and the
     photo box always agree on it. v2.6 (item 6): +28px, as at 1024px. */
  :root { --gutter: 64px; --hero-band: 444px; }
}

/* -------------------------------------------------- 1536px+ : ultrawide -- */

@media (min-width: 1536px) {
  :root {
    --page-max: 1240px;
    --content-max: 1120px;
    --hero-band: 494px;      /* v2.6 (item 6): +28px, see the 1024px block */
  }

  .hero__inner { padding-block: 26px 10px; }
  .hero__media { width: min(52%, calc(var(--hero-band) * 1.9)); }
  .price-card__title { font-size: 1.25rem; }
  .industry-card__title { font-size: 0.875rem; }
  .industry-card__desc { font-size: 0.6875rem; }
}

/* ------------------------------------------------------------------ print -- */

@media print {
  .site-header,
  .drawer,
  .hero__media,
  .site-footer__contact { display: none !important; }

  .hero { background: none; color: #000; }
  a { text-decoration: underline; }
}