/* Breakpoints: 600 (large phone / small tablet), 900 (tablet landscape), 1100 (laptop), 1280 (desktop menu). */

@media (min-width: 600px) {
  .orbit__product {
    width: 54%;
  }

  .trust__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5) var(--sp-6);
  }

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

  .product-card__body {
    padding: var(--sp-5);
  }

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

  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-7) var(--sp-6);
  }

  .form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--sp-7);
  }

  .form__field--full {
    grid-column: 1 / -1;
  }

  .form .btn {
    width: auto;
    justify-self: start;
  }


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

@media (min-width: 900px) {
  .section-head--split {
    grid-template-columns: 1fr auto;
    gap: var(--sp-7);
  }

  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
  }

  .concern-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
  }

  .concern__body {
    padding: var(--sp-6) calc(var(--sp-6) + 1.5rem) var(--sp-6) var(--sp-6);
  }

  .concern__body::after {
    top: var(--sp-6);
    right: var(--sp-6);
  }

  .orbit__product {
    width: 60%;
  }

  .why__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }

  .why__list {
    gap: var(--sp-7);
    margin-top: var(--sp-7);
  }

  .why__item {
    gap: var(--sp-6);
  }

  .orbit__label {
    max-width: 150px;
  }

  .orbit__btn {
    padding: var(--sp-3);
    font-size: 0.6875rem;
  }

  .orbit__tip {
    width: 240px;
  }

  .evidence {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }

  .quote {
    padding: var(--sp-8);
  }

  .faq {
    grid-template-columns: 1fr 2fr;
    gap: clamp(3rem, 6vw, 6rem);
  }

  .contact {
    grid-template-columns: 5fr 7fr;
    gap: clamp(3rem, 6vw, 6rem);
  }
}

@media (min-width: 1100px) {
  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-5);
  }

  .product-card__body h3 {
    font-size: 1.5rem;
  }

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

  .trust__list {
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
  }

  .site-footer__grid {
    grid-template-columns: 1.6fr repeat(5, minmax(0, 1fr));
    gap: var(--sp-6);
  }

  .site-footer__brand {
    grid-column: auto;
  }
}

/* Hero: full-bleed banner from 1200px. Narrower screens (tablets in landscape) stack the copy above the banner,
   so the longer headline never runs over the model. */
@media (min-width: 1200px) {
  /* Hero: full-bleed banner, copy middle-left over the banner's light side, aligned with the logo. */
  .hero {
    flex-direction: row;
    align-items: center;
    min-height: clamp(540px, 56.25vw, 780px); /* banners are 16:9 */
    text-align: left;
  }

  .hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    aspect-ratio: auto;
  }

  .hero__slide img {
    object-position: 75% center;
    transform: translateX(10px); /* banners sit 10px further right (Sainera, 12 Oct 2026) */
  }

  /* Fill the 10px strip uncovered on the left with each banner's own edge colour (top to bottom). */
  .hero__slide:nth-child(1) { background: linear-gradient(180deg, #fcfcfc, #cbc8e3 50%, #9e9cce); }
  .hero__slide:nth-child(2) { background: linear-gradient(180deg, #fefefe, #e2e2e2 50%, #cbccce); }
  .hero__slide:nth-child(3) { background: linear-gradient(180deg, #ffffff, #f7f9c8 50%, #edf257); }

  /* Soft white wash on the left keeps the copy readable over the coloured gradients. */
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.35) 32%, rgba(255, 255, 255, 0) 52%);
    pointer-events: none;
  }

  .hero__inner {
    padding-block: var(--sp-9);
  }

  .hero__content {
    justify-items: start;
    gap: var(--sp-5);
    max-width: min(38rem, 44%);
    margin-inline: 0;
  }

  .hero__lead {
    font-size: var(--fs-base);
  }

  .hero .btn-group {
    flex-direction: row;
    align-self: auto;
  }

  .hero .btn {
    padding-inline: 1.75rem;
  }
}

/* Desktop menu: five sections need about 1010px, so the full bar starts at 1100px
   (laptops at 150% scaling are about 1265px wide). */
@media (min-width: 1100px) {
  .site-header__logo img {
    height: 62px;
  }

  .nav-toggle {
    display: none;
  }

  .nav {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-6);
    overflow: visible;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .nav .nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-5);
    padding: 0;
  }

  .nav__item {
    position: relative;
    flex-wrap: nowrap;
    border-bottom: 0;
  }

  .nav__link {
    padding: var(--sp-2) 0;
    font-size: var(--fs-sm);
    white-space: nowrap;
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease);
  }

  .nav__link:hover,
  .nav__item.is-current > .nav__link {
    color: var(--c-ink);
    border-bottom-color: var(--c-accent);
  }

  .nav__sub-toggle {
    width: 22px;
    height: 32px;
  }

  /* Panels: open on hover, keyboard focus, or the toggle button (Enter/Space). */
  .nav__panel {
    position: absolute;
    top: calc(100% + 0.9rem);
    left: -1.5rem;
    z-index: 60;
    display: block;
    min-width: 15rem;
    padding: var(--sp-5) var(--sp-6);
    background: var(--c-white);
    border: var(--border);
    border-top: 3px solid var(--c-tint);
    box-shadow: 0 20px 40px -24px rgba(40, 29, 36, 0.35);
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  }

  .nav__panel--wide {
    width: 32rem;
  }

  /* For Professionals: one column, but wide enough for its button on one line. */
  #menu-professionals {
    min-width: 19rem;
  }

  #menu-professionals .btn {
    white-space: nowrap;
  }

  .nav__panel--mega {
    width: 52rem;
  }

  /* The Products mega panel is wider than the space to the right of its link, so it is anchored to the
     right edge of the header content instead of the link: it never runs past the page edge. */
  .site-header__inner {
    position: relative;
  }

  .nav__item--mega {
    position: static;
  }

  .nav__item--mega > .nav__panel--mega {
    top: 100%;
    left: auto;
    right: var(--gutter); /* line up with the header content edge (the Find a provider button) */
    max-width: calc(100% - var(--gutter) * 2);
  }

  .nav__item--mega > .nav__panel--mega::before {
    top: -1.75rem;
  }

  /* Panels near the right edge open leftwards so they stay on screen. */
  .nav__panel--end {
    left: auto;
    right: -1.5rem;
  }

  .nav__panel::before {
    content: "";
    position: absolute;
    inset: -1rem 0 100%;
  }

  .nav__item--has-sub:hover > .nav__panel,
  .nav__item--has-sub:focus-within > .nav__panel,
  .nav__sub-toggle[aria-expanded="true"] + .nav__panel {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }

  .nav__cols--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6);
  }

  .nav__cols--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6);
  }

  .nav__group-head {
    margin-bottom: var(--sp-2);
    border-top: 0;
    border-bottom: var(--border);
  }

  .nav__group-toggle {
    display: none;
  }

  .nav__panel .nav__group-title {
    padding: 0 0 var(--sp-2);
    font-size: var(--fs-sm);
  }

  .nav__group-label {
    margin-bottom: var(--sp-2);
    padding: 0 0 var(--sp-2);
    border-bottom: var(--border);
  }

  /* Every list is visible inside an open desktop panel. */
  .nav .nav__group-list,
  .nav .nav__group-list--open {
    display: block;
    padding: 0;
  }

  .nav__panel a:not(.btn):not(.link-arrow):not(.nav__group-title) {
    padding: 0.4rem 0;
    font-size: var(--fs-sm);
    white-space: nowrap;
  }

  .nav__panel-foot {
    justify-content: space-between;
    margin-top: var(--sp-5);
    padding: var(--sp-4) 0 0;
    border-top: var(--border);
  }

  .nav__actions {
    position: static;
    display: block;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .nav__shortcuts {
    display: none;
  }

  .nav__cta {
    width: auto;
    min-height: 2.75rem;
    padding-inline: 1.25rem;
    white-space: nowrap;
  }

  .no-js .site-header__inner {
    flex-wrap: nowrap;
    padding-block: 0;
  }
}

@media (min-width: 1440px) {
  .nav .nav__list {
    gap: var(--sp-6);
  }
}