/* Tablet and up */
@media (min-width: 720px) {
  :root { --gutter: 28px; --header-h: 68px; }
  .areas { grid-template-columns: repeat(3, 1fr); }
  .svc-list { grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .tips { grid-template-columns: 1fr 1fr; }
  .reviews { grid-template-columns: 1fr 1fr; }
  .people { grid-template-columns: 1fr 1fr; }
  .numbers ul { grid-template-columns: repeat(3, 1fr); }
  .two-lists { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
  .tip-body { grid-template-columns: 1fr 1fr; }
  .tip-first { grid-column: 1 / -1; }
  .jobs { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
  .book-band { grid-template-columns: 1fr auto; align-items: center; }
}

/* Desktop: the header gets its links; the action bar goes; the hero becomes one picture */
@media (min-width: 960px) {
  body { padding-bottom: 0; }
  .action-bar { display: none; }
  .nav-small { display: none; }
  .nav-wide { display: block; }
  .nav-wide ul { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; }
  .nav-wide a { display: block; padding: .5em .7em; text-decoration: none; font-weight: 600; border-radius: 6px; font-size: .97rem; }
  .nav-wide a:hover { background: var(--surface); }
  .nav-wide a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--call); border-radius: 0; }
  .header-book { display: inline-flex; min-height: 44px; padding: .4em 1em; }
  .header-row { gap: 16px; }

  .hero { padding: 28px 0 36px; }
  .hero .wrap { max-width: 1600px; }
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    align-items: center; gap: 0 40px;
    min-height: min(calc(100vh - var(--header-h) - 64px), 760px);
  }
  .hero h1 { font-size: clamp(2.9rem, 4.3vw, 4.6rem); }
  .call-giant { justify-self: start; min-width: min(100%, 560px); padding: 20px 28px 22px; }
  .cg-num { font-size: clamp(3.4rem, 5vw, 5.2rem); }
  .hero-dial { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
  .hero-dial .dial { max-width: min(100%, 720px, calc(100vh - var(--header-h) - 150px)); }
  .hero-dial figcaption { justify-items: center; text-align: center; }

  .rates-home { grid-template-columns: minmax(300px, 0.8fr) 2fr; align-items: start; }
  .rates-home .charges { position: sticky; top: calc(var(--header-h) + 16px); }
  .rates-page { display: grid; grid-template-columns: minmax(300px, 0.8fr) 2fr; gap: 40px; align-items: start; }
  .rates-page .charges { position: sticky; top: calc(var(--header-h) + 16px); }
  .licence-home { grid-template-columns: 1fr 1.2fr; align-items: start; }
  .licences { grid-template-columns: 1fr 1fr; }
  .people { grid-template-columns: repeat(3, 1fr); }
  .people-compact { grid-template-columns: 1fr 1fr; }
  .reviews { grid-template-columns: repeat(3, 1fr); }
  .areas { grid-template-columns: repeat(4, 1fr); }
  .emergency-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
  .book-grid { grid-template-columns: minmax(280px, 0.8fr) 1.4fr; gap: 48px; align-items: start; }
  .book-aside { position: sticky; top: calc(var(--header-h) + 16px); }
  .tip-body { grid-template-columns: 0.9fr 1fr 1fr; }
  .tip-first { grid-column: auto; flex-direction: column; align-items: flex-start; }
  .section { padding-top: 64px; }
}

@media (min-width: 1200px) {
  .header-call-num { display: inline; }
  .header-call-word::after { content: " ·"; }
  .areas { grid-template-columns: repeat(6, 1fr); }
}

@media (prefers-reduced-motion: no-preference) {
  .dial-now { animation: pulse 2.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
  @keyframes pulse { 50% { opacity: .55; } }
}