/* =========================================================
   Widescreen refinements. The base stylesheet is the small
   screen layout; everything here is additive.
   ========================================================= */

@media (min-width: 40em) {
  :root {
    --gutter: 2rem;
  }

  /* The standfirst takes its size bump here rather than on a phone, where the
     extra step costs more lines than the emphasis is worth. */
  .section__lead,
  .prose > p:first-child {
    font-size: var(--step-2);
    line-height: 1.4;
    letter-spacing: -0.015em;
  }

  .brand__word {
    font-size: 1.0625rem;
  }

  .hero__actions .btn {
    flex: 0 0 auto;
  }

  /* Back to its own width once there is room beside it. */
  .enquiry__action .btn {
    display: inline-flex;
  }

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

  /* Two columns, odd number of cards: the last one takes the empty cell with
     it, so the grid's rule-coloured background is never left showing. */
  .card-grid--flush > .card:last-child:nth-child(odd) {
    grid-column: span 2;
  }

  .cta__actions {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }

  /* Back to its own width: stretch on a row would pull the button to the height
     of the line beside it. */
  .cta__actions .btn {
    align-self: center;
  }

  /* The hero's copy column stops at 48ch from here, so the right of the band is
     clear below the display line and the mark can fill it properly. Anchored to
     the bottom rather than the top: the title runs the full width above it, and
     the space that actually opens up is beside the statement and the buttons. */
  .hero__mark {
    -webkit-mask-position: right -3rem bottom -8%;
    mask-position: right -3rem bottom -8%;
    -webkit-mask-size: auto 78%;
    mask-size: auto 78%;
  }

  /* The copy takes the left half from here, so the mark can come up to nearly
     the slab's height and still clear it. Not past it: at 100% the cranium
     starts clipping on the top edge, and a watermark that is recognisably the
     logo is worth more than one scaled until it is just texture. */
  .cta::after {
    -webkit-mask-position: right -1rem top 50%;
    mask-position: right -1rem top 50%;
    -webkit-mask-size: auto 90%;
    mask-size: auto 90%;
  }

  /* The days and the quote pair up on one line here. The button stays below
     them at every width: the detail column is only 424px at 48em, so a row of
     all three wrapped or did not depending on how many words a given tier's
     day count ran to, which is what made the ladder look uneven. */
  .tier__meta {
    flex-direction: row;
    align-items: baseline;
    gap: 1rem;
  }
}

@media (min-width: 48em) {
  /* The three claims under the hero become one row once there is width for it,
     which is where they stop being a list and start being a masthead. */
  .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .facts li {
    padding-inline: 1.75rem 1.25rem;
  }

  .facts li::before {
    left: 0.75rem;
  }

  /* Detail lists read as a specification sheet: term on the left,
     description on the right. */
  .detail {
    display: grid;
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: 0.5rem 2.5rem;
    padding-block: 1.75rem;
  }

  .detail__body {
    margin-top: 0;
  }

  .detail-list--numbered .detail {
    grid-template-columns: 3rem minmax(0, 15rem) minmax(0, 1fr);
  }

  /* The tier ladder takes the same specification grid as the detail rows, on a
     narrower first column: a tier name is two words where a service name is a
     sentence. */
  .tier {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: 0.5rem 2.5rem;
  }

  .tier__detail {
    margin-top: 0;
  }

  .detail__index {
    margin-bottom: 0;
  }

  .cta__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3rem;
  }

  /* The two link columns size to their content, but the contact column gets a
     floor first, so the email address always has room to sit on one line. */
  .site-footer__nav {
    grid-template-columns: auto auto minmax(13rem, 1fr);
    gap: 2rem 2.5rem;
  }

  .site-footer__group--contact {
    grid-column: auto;
  }
}

@media (min-width: 52em) {
  /* The links come out from behind the menu button once the brand and all five
     of them fit on one line. The button goes away, and the panel is unfolded
     permanently — it is the same <details> either way, so the markup does not
     have to carry two copies of the navigation. */
  .site-header__inner {
    gap: 2rem;
  }

  /* The links are the wide part of the bar; the brand keeps its own width. */
  .menu {
    flex: 0 1 auto;
  }

  .menu__button {
    display: none;
  }

  /* Two ways of saying the same thing, for two generations of engine: older
     ones hide the closed panel by display, newer ones by content-visibility on
     ::details-content. Without both, the links vanish on whichever half of the
     browsers is not covered. */
  .menu__panel {
    display: block;
    position: static;
    max-height: none;
    overflow: visible;
    padding-inline: 0;
    background: none;
    border-bottom: 0;
    box-shadow: none;
    animation: none;
  }

  .menu::details-content {
    content-visibility: visible;
    block-size: auto;
  }

  /* One row from here up, so anchors need less clearance. */
  html {
    scroll-padding-top: calc(5rem + env(safe-area-inset-top));
  }

  .site-header .brand {
    padding-block: 1.125rem;
  }

  .nav__list {
    flex-direction: row;
    gap: 0 2rem;
  }

  .nav__list > li + li {
    border-top: 0;
  }

  .nav__link {
    padding-block: 1.125rem;
  }

  /* The underline grows in from the left and retracts to the right, so leaving
     a link is not the same gesture as arriving at it. Only where there is a
     pointer to leave with: on a phone the links are stacked rows, and a bar
     that wide would read as another divider. */
  .nav__link:not(.is-current)::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.35s var(--ease);
  }

  .nav__link:not(.is-current):hover::after,
  .nav__link:not(.is-current):focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  /* The current page keeps a static rule instead, and is excluded above so the
     two never stack. */
  .nav__link.is-current {
    box-shadow: inset 0 -2px 0 currentColor;
  }

  .nav__link.is-current::before {
    content: none;
  }
}

@media (min-width: 64em) {
  /* The four engagement stages stay two by two; only the card grid goes to
     three, where the --flush rules below keep the last row full. */
  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Three columns: reset the two-column rule above, then fill whatever the
     last row is short by. */
  .card-grid--flush > .card:last-child:nth-child(3n) {
    grid-column: auto;
  }

  .card-grid--flush > .card:last-child:nth-child(3n + 1) {
    grid-column: span 3;
  }

  .card-grid--flush > .card:last-child:nth-child(3n + 2) {
    grid-column: span 2;
  }

  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 3rem;
  }

  .hero__body {
    font-size: var(--step-1);
  }

  /* The section heading pins while you are inside its section, so the context of
     what you are reading stays on screen through a long list. Only at this width:
     on a narrower screen a second pinned band would take too much of what is
     left. The offset is the settled header's own height — brand mark plus its
     tightened padding and the rule under it — so the two never overlap.
     The head takes the section's own surface so content passes cleanly beneath
     rather than showing through beside the heading. */
  .section__head {
    position: sticky;
    top: 3.1875rem;
    z-index: 1;
    padding-block: 0.75rem;
    margin-top: -0.75rem;
    background: var(--bg);
  }

  .section--inset .section__head {
    background: var(--bg-inset);
  }
}

/* On very wide screens the hairline grid keeps its edges aligned with the
   container rather than stretching the cards further. */
@media (min-width: 90em) {
  :root {
    --container: 72rem;
  }
}