/* ==========================================================================
   THE QUICK TOWING COMPANY LTD. · MAIN STYLESHEET (css/style.css)
   --------------------------------------------------------------------------
   One stylesheet for every page. It's built "mobile first": the plain rules
   are for phones, and the @media blocks near the bottom (section 19) add the
   tablet and desktop layout.

   Sections in this file:
     1. Brand settings (colours, fonts, sizes)   <- change the look here
     2. Base (page defaults)
     3. Layout helpers
     4. Buttons and links
     5. Header and menu
     6. Sticky call bar (phones and tablets)
     7. Hero (top of each page)
     8. Page sections and section headings
     9. Service tiles and service cards
    10. Service area map, town list and neighbourhood chips
    11. "Why choose us" items
    12. Reviews
    13. How it works (steps)
    14. FAQ (questions that open and close)
    15. Call-to-action band
    16. Photo grid and photo viewer
    17. Text pages (policy, site map, 404)
    18. Footer
    19. Tablet and desktop layout
    20. Accessibility helpers
   ========================================================================== */


/* ==========================================================================
   1. BRAND SETTINGS
   Change a colour or font here and it changes on every page.
   ========================================================================== */
:root {
  /* --- Brand colours, taken from the logo --- */
  --black: #000000;            /* Logo background. Header, footer and dark sections */
  --charcoal: #141416;         /* Slightly lighter black for boxes on dark sections */
  --red: #F32222;              /* Logo red. Accents, icons and red text on black */
  --red-button: #D61A1A;       /* A touch darker than the logo red so white button text is easy to read */
  --red-button-hover: #B01212; /* Button colour when hovered or pressed */
  --red-on-light: #D61A1A;     /* Red text and icons on white or light grey */
  --red-tint: #FBE6E6;         /* Very light red behind icons on light sections */
  --white: #FFFFFF;
  --silver: #CECECE;           /* Logo silver. Secondary text on black */

  /* --- Light parts of the page --- */
  --paper: #F4F4F5;            /* Light grey section background */
  --card: #FFFFFF;             /* Boxes on light sections */
  --text: #141416;             /* Main text on light backgrounds */
  --text-muted: #4F4F57;       /* Secondary text on light backgrounds */
  --line: #DEDEE3;             /* Thin borders on light backgrounds */
  --line-dark: #2C2C31;        /* Thin borders on dark backgrounds */
  --photo-bg: #E6E6EA;         /* Shows behind a photo while it loads */

  /* --- Fonts (loaded from Google Fonts in each page's <head>) --- */
  --font-heading: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif; /* bold, slanted, like the logo */
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* --- Sizes --- */
  --container: 1160px;         /* Widest the content gets on big screens */
  --radius: 10px;              /* Rounded corners on boxes */
  --header-height: 68px;       /* Height of the black bar at the top (phones) */
  --callbar-height: 60px;      /* Height of the red call bar at the bottom (phones) */
}


/* ==========================================================================
   2. BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;        /* 17px: comfortable on a phone */
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  /* Room at the bottom so the red call bar never covers the footer (removed on desktop) */
  padding-bottom: calc(var(--callbar-height) + env(safe-area-inset-bottom, 0px));
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-style: italic;
  line-height: 1.02;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.4rem, 8vw, 4.4rem);
  font-weight: 800;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

h2 {
  font-size: clamp(2rem, 5.4vw, 3rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

h3 {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.1;
}

p {
  margin: 0;
}

p + p {
  margin-top: 1em;
}

a {
  color: var(--red-on-light);
  text-underline-offset: 3px;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

/* Sections jumped to from a link stop below the sticky header */
[id] {
  scroll-margin-top: calc(var(--header-height) + 12px);
}


/* ==========================================================================
   3. LAYOUT HELPERS
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* Hidden icon set at the top of each page (the icons are reused with <use>) */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Every small icon on the site */
.icon {
  width: 24px;
  height: 24px;
  flex: none;
}


/* ==========================================================================
   4. BUTTONS AND LINKS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 24px;
  border: 2px solid transparent;
  border-radius: 8px;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn .icon {
  width: 22px;
  height: 22px;
}

/* Red "Call" button */
.btn-call {
  background: var(--red-button);
  color: var(--white);
}

.btn-call:hover {
  background: var(--red-button-hover);
}

/* Outline button (takes the text colour of the section it sits in) */
.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}

.btn-outline:hover {
  background: rgba(127, 127, 127, 0.12);
}

/* Bigger version for the top of the page */
.btn-big {
  min-height: 62px;
  padding: 0 28px;
  font-size: 1.45rem;
}

/* Visible keyboard focus that works on light and dark backgrounds */
.btn:focus-visible,
.header-call:focus-visible,
.callbar:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--text);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* On phones, buttons stretch across the screen so they're easy to tap */
@media (max-width: 639px) {
  .btn-row > .btn {
    flex: 1 1 100%;
  }
}

/* Text link with an arrow, e.g. "See every service" */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.text-link .icon {
  width: 18px;
  height: 18px;
}


/* ==========================================================================
   5. HEADER AND MENU
   The black bar stays at the top while you scroll. On phones the menu
   opens from the ☰ button; on desktop the links sit in the bar.
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--black);
  color: var(--white);
  border-bottom: 1px solid var(--line-dark);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--header-height);
}

/* Logo */
.brand {
  display: block;
  flex: none;
  margin-right: auto;
}

.brand img {
  width: auto;
  height: 50px;
}

/* Phone number in the header (always visible) */
.header-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--red-button);
  color: var(--white);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
}

.header-call:hover {
  background: var(--red-button-hover);
}

.header-call .icon {
  width: 18px;
  height: 18px;
}

/* ☰ menu button (phones and tablets) */
.menu-toggle {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  padding: 0;
  background: transparent;
  color: var(--white);
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  cursor: pointer;
}

.menu-toggle .icon-close {
  display: none;
}

.menu-toggle[aria-expanded="true"] .icon-open {
  display: none;
}

.menu-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

/* Drop-down menu (phones and tablets) */
.site-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
  background: var(--black);
  border-top: 1px solid var(--line-dark);
  border-bottom: 3px solid var(--red);
}

.site-menu.is-open {
  display: block;
}

.site-menu ul {
  list-style: none;
  padding: 6px max(16px, env(safe-area-inset-right, 0px)) 14px max(16px, env(safe-area-inset-left, 0px));
}

.site-menu a {
  display: flex;
  align-items: center;
  min-height: 54px;
  border-bottom: 1px solid var(--line-dark);
  color: var(--white);
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-menu a[aria-current="page"] {
  color: var(--red);
}

/* Small phones: shrink the header a little so everything fits */
@media (max-width: 380px) {
  .header-inner {
    gap: 8px;
  }

  .brand img {
    height: 38px;
  }

  .header-call {
    padding: 0 10px;
    font-size: 0.92rem;
  }

  .menu-toggle {
    width: 42px;
    height: 42px;
  }
}

/* Very small phones (older iPhone SE size): drop the phone icon, keep the number */
@media (max-width: 359px) {
  .header-call {
    padding: 0 9px;
  }

  .header-call .icon {
    display: none;
  }
}


/* ==========================================================================
   6. STICKY CALL BAR (phones and tablets)
   Fixed to the bottom of the screen at all times. Hidden on desktop,
   where the phone number stays in the header instead.
   ========================================================================== */
.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--callbar-height);
  padding: 0 16px env(safe-area-inset-bottom, 0px);
  background: var(--red-button);
  color: var(--white);
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.25);
}

.callbar:hover {
  background: var(--red-button-hover);
}


/* ==========================================================================
   7. HERO (top of each page)
   A photo sits behind a dark shade so the white text is always readable.
   The red "speed streaks" echo the logo.
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--charcoal);
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark shade over the photo */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.84) 55%, rgba(0, 0, 0, 0.95) 100%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-block: clamp(44px, 9vw, 104px) clamp(40px, 7vw, 88px);
}

.hero-inner > * {
  max-width: 760px;
}

.hero .eyebrow {
  color: var(--silver);
}

.hero-lede {
  max-width: 40ch;
  color: #EDEDED;
  font-size: clamp(1.12rem, 2.6vw, 1.32rem);
}

/* Short facts under the buttons */
.hero-trust {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
  margin-top: 6px;
}

.hero-trust li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.98rem;
  line-height: 1.35;
}

.hero-trust .icon {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--red);
}

/* Shorter hero for inner pages */
.hero--page .hero-inner {
  padding-block: clamp(36px, 7vw, 76px) clamp(36px, 6vw, 64px);
}

.hero--page h1 {
  font-size: clamp(2.2rem, 6.6vw, 3.8rem);
}

/* Breadcrumb trail ("Home › Services") */
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 0.92rem;
  color: var(--silver);
}

.breadcrumb li + li::before {
  content: "›";
  margin-right: 8px;
  color: var(--red);
}

.breadcrumb a {
  color: var(--white);
}

/* Red speed streaks (decoration only). On phones they're thinner and sit
   in the top corner so they never run behind text; section 19 makes them
   bigger on wider screens. */
.streaks {
  position: absolute;
  top: 10px;
  right: -40px;
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: min(46vw, 420px);
  pointer-events: none;
}

.streaks span {
  display: block;
  height: 5px;
  border-radius: 2px;
  background: var(--red);
  transform: skewX(-30deg);
}

.streaks span:nth-child(2) {
  width: 70%;
  margin-left: 30%;
}

.streaks span:nth-child(3) {
  width: 45%;
  margin-left: 12%;
}


/* ==========================================================================
   8. PAGE SECTIONS AND SECTION HEADINGS
   ========================================================================== */
.section {
  padding-block: clamp(56px, 9vw, 96px);
}

.section--paper {
  background: var(--paper);
}

.section--dark {
  background: var(--black);
  color: var(--white);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
  margin-bottom: clamp(28px, 4vw, 40px);
}

.eyebrow {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red-on-light);
}

.section-lede {
  max-width: 62ch;
  color: var(--text-muted);
  font-size: 1.15rem;
}

.section--dark .section-lede {
  color: var(--silver);
}

.section-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 28px;
}

/* Two columns on desktop: text on one side, photo or map on the other */
.split {
  display: grid;
  gap: 28px;
}

.split-media {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--photo-bg);
  aspect-ratio: 3 / 2;
}

.split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prose-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 65ch;
}

/* When the text block is also the page container, keep it lined up with the
   other sections and only limit the line length of what's inside */
.container.prose-block {
  max-width: var(--container);
}

.container.prose-block > * {
  max-width: 65ch;
}


/* ==========================================================================
   9. SERVICE TILES (icon boxes) AND SERVICE CARDS (photo boxes)
   ========================================================================== */
.tile-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.tile {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: start;
  align-content: start;
  gap: 4px 14px;
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.tile-icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--red-tint);
  color: var(--red-on-light);
}

.tile h3 {
  font-size: 1.32rem;
}

.tile p {
  color: var(--text-muted);
  font-size: 1rem;
}

/* Photo cards on the Services and About pages */
.card-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.card-media {
  aspect-ratio: 16 / 9;
  background: var(--photo-bg);
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card without a photo: a big icon instead */
.card-media--icon {
  display: grid;
  place-items: center;
  background: var(--red-tint);
  color: var(--red-on-light);
}

.card-media--icon .icon {
  width: 64px;
  height: 64px;
}

.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  padding: 20px;
}

.card-body p {
  color: var(--text-muted);
}

.card-body .text-link {
  margin-top: auto;
  padding-top: 4px;
}

/* Small info boxes (contact page, pricing) */
.info-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.info > .icon {
  width: 30px;
  height: 30px;
  color: var(--red-on-light);
}

.info p {
  color: var(--text-muted);
}

.info .big-link {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.7rem, 6vw, 2.2rem);
  line-height: 1.1;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.info .big-link--small {
  font-size: 1.3rem;
}

/* List with check marks */
.check-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 70ch;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.check-list .icon {
  margin-top: 2px;
  color: var(--red-on-light);
}


/* ==========================================================================
   10. SERVICE AREA MAP, TOWN LIST AND NEIGHBOURHOOD CHIPS
   ========================================================================== */
.map-box {
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.map-box svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 440px;
  margin-inline: auto;
}

/* Parts of the drawn maps */
.map-road {
  fill: none;
  stroke: #34343A;
  stroke-width: 16;
  stroke-linecap: round;
}

.map-road-line {
  fill: none;
  stroke: var(--white);
  stroke-width: 2;
  stroke-dasharray: 10 10;
}

.map-road-label {
  fill: var(--text-muted);
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.12em;
}

.map-town {
  fill: var(--white);
  stroke: var(--text);
  stroke-width: 3;
}

.map-town--home {
  fill: var(--red-button);
  stroke: var(--text);
}

.map-town--city {
  fill: var(--text);
}

.map-name {
  fill: var(--text);
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 800;
  font-size: 24px;
  text-transform: uppercase;
}

.map-note {
  fill: var(--text-muted);
  font-family: var(--font-body);
  font-size: 15px;
}

.map-time {
  fill: var(--red-on-light);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
}

.map-quad {
  fill: var(--paper);
  stroke: var(--line);
  stroke-width: 2;
}

.map-quad-label {
  fill: var(--text);
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 800;
  font-size: 40px;
}

.map-arrow {
  fill: none;
  stroke: var(--red-on-light);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Towns we cover */
.town-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.town-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 2px 12px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.town-list .icon {
  grid-row: span 2;
  margin-top: 2px;
  color: var(--red-on-light);
}

.town-list strong {
  font-size: 1.12rem;
}

.town-list span {
  color: var(--text-muted);
  font-size: 0.98rem;
}

/* Neighbourhood "chips" */
.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chips li {
  padding: 6px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.98rem;
}

/* Calgary quadrant lists */
.quad-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.quad-grid li {
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.quad-grid strong {
  display: block;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.3rem;
  text-transform: uppercase;
}

.quad-grid span {
  color: var(--text-muted);
}


/* ==========================================================================
   11. "WHY CHOOSE US" ITEMS (works on dark and light sections)
   ========================================================================== */
.why-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.why-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-content: start;
  gap: 2px 14px;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.why-item .icon {
  grid-row: span 2;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  color: var(--red-on-light);
}

.why-item h3 {
  font-size: 1.36rem;
}

.why-item p {
  color: var(--text-muted);
  font-size: 1rem;
}

.section--dark .why-item {
  background: var(--charcoal);
  border-color: var(--line-dark);
}

.section--dark .why-item .icon {
  color: var(--red);
}

.section--dark .why-item p {
  color: var(--silver);
}


/* ==========================================================================
   12. REVIEWS
   ========================================================================== */
.rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

.rating-score {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 800;
  font-size: 3.4rem;
  line-height: 1;
}

.rating-text {
  color: var(--text-muted);
}

.hero .rating-text {
  color: var(--silver);
}

.stars {
  display: inline-flex;
  gap: 3px;
  color: var(--red-on-light);
}

.hero .stars {
  color: var(--red);
}

.stars .icon {
  width: 22px;
  height: 22px;
}

.review-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.review {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  margin: 0;
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.review blockquote {
  margin: 0;
  font-size: 1.08rem;
}

.review figcaption {
  margin-top: auto;
  font-weight: 600;
}

.review figcaption span {
  display: block;
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.92rem;
}


/* ==========================================================================
   13. HOW IT WORKS (numbered steps: the order matters)
   ========================================================================== */
.steps {
  list-style: none;
  display: grid;
  gap: 16px;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 22px 22px 22px 80px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  counter-increment: step;
}

.step::before {
  content: counter(step);
  position: absolute;
  top: 16px;
  left: 22px;
  color: var(--red-on-light);
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 800;
  font-size: 3.4rem;
  line-height: 1;
}

.step h3 {
  margin-bottom: 6px;
}

.step p {
  color: var(--text-muted);
}


/* ==========================================================================
   14. FAQ (questions open and close without any script)
   ========================================================================== */
.faq {
  max-width: 820px;
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 14px 0;
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.12rem;
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* The + / − on the right */
.faq summary::after {
  content: "+";
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--red-tint);
  color: var(--red-on-light);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
}

.faq details[open] summary::after {
  content: "−";
}

.faq summary:focus-visible {
  outline: 3px solid var(--red-on-light);
  outline-offset: 2px;
}

.faq-answer {
  max-width: 70ch;
  padding: 0 0 18px;
  color: var(--text-muted);
}


/* ==========================================================================
   15. CALL-TO-ACTION BAND (black band with the big call button)
   ========================================================================== */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(56px, 9vw, 96px);
  background: var(--black);
  color: var(--white);
}

.cta-band .streaks {
  right: -30px;
  opacity: 0.85;
}

.cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.cta-inner p {
  max-width: 52ch;
  color: var(--silver);
  font-size: 1.15rem;
}

.cta-meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  color: var(--silver);
}

.cta-meta li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cta-meta .icon {
  width: 18px;
  height: 18px;
  color: var(--red);
}

.cta-meta a {
  color: var(--white);
  overflow-wrap: anywhere;
}


/* ==========================================================================
   16. PHOTO GRID AND PHOTO VIEWER
   Tapping a photo opens it bigger (js/main.js). Without the script,
   the link simply opens the photo file.
   ========================================================================== */
.photo-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.photo-grid a {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  background: var(--photo-bg);
}

.photo-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.photo-grid a:hover img {
  transform: scale(1.03);
}

.photo-grid a:focus-visible {
  outline: 3px solid var(--red-on-light);
  outline-offset: 3px;
}

.viewer {
  width: 100%;
  max-width: min(1100px, 94vw);
  padding: 0;
  border: 0;
  background: transparent;
}

.viewer::backdrop {
  background: rgba(0, 0, 0, 0.9);
}

.viewer figure {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.viewer img {
  width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  background: var(--black);
}

.viewer figcaption {
  color: var(--white);
  text-align: center;
}

.viewer-close {
  position: fixed;
  top: max(14px, env(safe-area-inset-top, 0px));
  right: max(14px, env(safe-area-inset-right, 0px));
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: var(--black);
  cursor: pointer;
}


/* ==========================================================================
   17. TEXT PAGES (policy, site map, 404)
   ========================================================================== */
.prose {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
}

.prose h2 {
  margin-top: 22px;
  font-size: clamp(1.55rem, 4vw, 2.1rem);
}

.prose ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 1.25rem;
}

.prose ul ul {
  margin-top: 8px;
}

.callout {
  padding: 16px 18px;
  background: var(--paper);
  border-left: 4px solid var(--red-on-light);
  font-style: italic;
}

.sitemap-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.sitemap-grid ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.sitemap-grid h2 {
  font-size: clamp(1.6rem, 4vw, 2.1rem);
}


/* ==========================================================================
   18. FOOTER
   ========================================================================== */
.site-footer {
  padding-top: 56px;
  background: var(--black);
  color: var(--silver);
}

.footer-grid {
  display: grid;
  gap: 32px;
}

.footer-brand img {
  width: auto;
  height: 64px;
}

.footer-name {
  margin-top: 14px;
  color: var(--white);
  font-weight: 600;
}

.footer-brand p + p {
  margin-top: 6px;
}

.footer-title {
  margin-bottom: 12px;
  color: var(--white);
  font-size: 1.35rem;
  text-transform: uppercase;
}

.footer-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.footer-list .icon {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--red);
}

.site-footer a {
  color: var(--white);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.site-footer a:hover {
  color: var(--red);
  text-decoration: underline;
}

.badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.badges li {
  padding: 6px 12px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  color: var(--white);
  font-size: 0.92rem;
}

.social {
  list-style: none;
  display: flex;
  gap: 10px;
}

.social a {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
}

.footer-bottom {
  margin-top: 44px;
  padding-block: 18px;
  border-top: 1px solid var(--line-dark);
  font-size: 0.92rem;
}

.footer-bottom .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 18px;
}

.footer-bottom ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}


/* ==========================================================================
   19. TABLET AND DESKTOP LAYOUT
   ========================================================================== */

/* Tablets (640px and wider) */
@media (min-width: 640px) {
  .tile-grid,
  .card-grid,
  .review-grid,
  .why-grid,
  .info-grid,
  .quad-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .photo-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .hero-trust {
    grid-template-columns: repeat(2, max-content);
    gap: 12px 32px;
  }

  .footer-grid,
  .sitemap-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Small laptops (900px and wider) */
@media (min-width: 900px) {
  .card-grid,
  .review-grid,
  .why-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Reviews page: reviews stack in 3 columns like a wall, so short and
     long reviews fit together without gaps */
  .review-grid--wall {
    display: block;
    columns: 3;
    column-gap: 16px;
  }

  .review-grid--wall > li {
    break-inside: avoid;
    margin-bottom: 16px;
  }

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

  .split {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 48px;
  }

  .split--center {
    align-items: center;
  }

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

  .hero-trust {
    grid-template-columns: repeat(4, max-content);
  }

  /* Bigger speed streaks; in the call band they move to the bottom corner */
  .streaks {
    top: 26px;
    gap: 10px;
  }

  .streaks span {
    height: 8px;
  }

  .cta-band .streaks {
    top: auto;
    bottom: 28px;
  }

  /* Shade the left side more, where the text sits */
  .hero::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.93) 0%, rgba(0, 0, 0, 0.8) 48%, rgba(0, 0, 0, 0.4) 100%);
  }

  .footer-grid {
    grid-template-columns: 1.3fr 1.4fr 0.8fr 0.8fr;
  }

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

/* Laptops (1024px and wider): no bottom call bar, the number stays in the header */
@media (min-width: 1024px) {
  body {
    padding-bottom: 0;
  }

  .callbar {
    display: none;
  }


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

/* Wide screens (1200px and wider): menu links sit in the header bar.
   If you change 1200px here, change it in js/main.js too (section 1). */
@media (min-width: 1200px) {
  :root {
    --header-height: 78px;
  }

  .brand {
    margin-right: 0;
  }

  .brand img {
    height: 58px;
  }

  .menu-toggle {
    display: none;
  }

  .site-menu {
    display: block;
    position: static;
    order: 2;
    max-height: none;
    margin-left: auto;
    overflow: visible;
    background: none;
    border: 0;
  }

  .site-menu ul {
    display: flex;
    gap: 2px;
    padding: 0;
  }

  .site-menu a {
    min-height: 44px;
    padding: 0 9px;
    border: 0;
    color: var(--silver);
    font-size: 1.12rem;
  }

  .site-menu a:hover {
    color: var(--white);
  }

  .site-menu a[aria-current="page"] {
    color: var(--white);
    box-shadow: inset 0 -3px 0 var(--red);
  }

  .header-call {
    order: 3;
    min-height: 48px;
    margin-left: 10px;
    padding: 0 18px;
    font-size: 1.05rem;
  }

  /* Service tiles: rows of 4, or rows of 5 when there are 10 tiles
     (so no tile sits alone on the last row). Icon on top. */
  .tile-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .tile-grid:has(> li:nth-child(10)) {
    grid-template-columns: repeat(5, 1fr);
  }

  .tile {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 6px;
  }

  .tile-icon {
    grid-row: auto;
    margin-bottom: 8px;
  }
}


/* ==========================================================================
   20. ACCESSIBILITY HELPERS
   ========================================================================== */

/* "Skip to main content" link: hidden until someone presses Tab */
.skip-link {
  position: absolute;
  top: -70px;
  left: 12px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--white);
  color: var(--black);
  font-weight: 600;
}

.skip-link:focus {
  top: 12px;
}

/* Text for screen readers only */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Visible focus for everything else */
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

/* People who turn off animations in their phone settings */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}