/* ==========================================================================
   page-services-repairs.css
   Services & Repairs directory page.
   Structure: symptom hero, service cards with area tabs, job search, CTA.
   ========================================================================== */

body.page-services-repairs .s-services-directory {
  --services-dir-max: var(--container-max);
  --services-dir-copy-max: 560px;
  --services-dir-title-max: 12ch;
  --services-dir-white: var(--color-page);
  --services-dir-white-muted: rgba(255, 255, 255, .75);
  --services-dir-white-line: rgba(255, 255, 255, .16);
  --services-dir-white-fill: rgba(255, 255, 255, .06);
  --services-dir-emblem-glow: rgba(232, 0, 14, .22);
  --services-dir-hero-photo-opacity: .18;
  --services-dir-card-shadow: 0 8px 24px rgba(17, 18, 20, .08);
  --services-dir-card-radius: 12px;
  --services-dir-panel-radius: 18px;
  --services-dir-pill-radius: 999px;
  --services-dir-lift: -2px;
  --services-dir-border-width: 1px;
  --services-dir-search-border: 2px;
  --services-dir-icon-size: 22px;
  --services-dir-emblem-size: 64px;
  --services-dir-feature-title-size: 26px;
  --services-dir-feature-kicker-size: 11px;
  --services-dir-feature-band: 4px;
  --services-dir-symptom-min-height: 60px;
  --services-dir-symptom-title-size: 18px;
  --services-dir-symptom-sub-size: 12px;
  --services-dir-tab-size: 16px;
  --services-dir-count-size: 12px;
  --services-dir-card-title-size: 22px;
  --services-dir-tag-size: 12px;
  --services-dir-job-size: 14px;
  --services-dir-job-system-size: 12px;
  --services-dir-job-button-min-height: 32px;
  --services-dir-search-height: 52px;
  --services-dir-touch-target: 44px;
  --services-dir-heading-line: 1.05;
  --services-dir-joblist-max: 2400px;
  --services-dir-scroll-offset: 110px;
  --services-dir-arrow-color: var(--color-red);
  --services-dir-arrow-shift: 0;
  --services-dir-target-ring: 0 0 0 4px rgba(232, 0, 14, .3);
  --services-dir-finder-max: 440px;
  --services-dir-finder-results-max: 420px;
  --services-dir-finder-z: 5;
  --services-dir-finder-title-size: 18px;
  --services-dir-finder-row-min: 56px;

  background: var(--color-alt);
}

/* --------------------------------------------------------------------------
   Shared bits
   -------------------------------------------------------------------------- */

body.page-services-repairs .s-services-directory__eyebrow,
body.page-services-repairs .s-services-directory-cta__eyebrow {
  margin: 0 0 var(--space-3);
  color: var(--color-red);
  font-family: var(--font-heading);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-bold);
  letter-spacing: var(--letter-eyebrow);
  line-height: var(--line-tight);
  text-transform: uppercase;
}

body.page-services-repairs .s-services-directory__heading {
  color: var(--color-ink);
  font-size: var(--text-h2-mobile);
  line-height: var(--services-dir-heading-line);
  text-transform: uppercase;
}

body.page-services-repairs .s-services-directory__outline-btn {
  border: var(--services-dir-search-border) solid var(--color-ink);
  background: transparent;
  color: var(--color-ink);
}

body.page-services-repairs .s-services-directory__outline-btn:hover,
body.page-services-repairs .s-services-directory__outline-btn:focus-visible {
  --services-dir-arrow-color: var(--services-dir-white);

  background: var(--color-ink);
  color: var(--services-dir-white);
}

/* --------------------------------------------------------------------------
   Hero: symptom tiles
   -------------------------------------------------------------------------- */

body.page-services-repairs .s-services-directory__hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-8) var(--container-pad-mobile) var(--space-7);
  background: var(--color-ink);
  color: var(--services-dir-white);
}

body.page-services-repairs .s-services-directory__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../img/hero-3.webp") center / cover no-repeat;
  opacity: var(--services-dir-hero-photo-opacity);
  pointer-events: none;
}

body.page-services-repairs .s-services-directory__hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-5);
  max-width: var(--services-dir-max);
  margin: 0 auto;
}

body.page-services-repairs .s-services-directory__hero .s-services-directory__eyebrow {
  margin-bottom: var(--space-2);
}

body.page-services-repairs .s-services-directory__title {
  max-width: var(--services-dir-title-max);
  color: var(--services-dir-white);
  font-size: var(--text-h1-mobile);
  text-transform: uppercase;
}

body.page-services-repairs .s-services-directory__title-accent {
  color: var(--color-red);
  font-style: normal;
}

body.page-services-repairs .s-services-directory__copy {
  max-width: var(--services-dir-copy-max);
  color: var(--services-dir-white-muted);
  font-size: var(--text-body);
  line-height: var(--line-lead);
}

body.page-services-repairs .s-services-directory__symptoms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

body.page-services-repairs .s-services-directory__symptom {
  --services-dir-sub-color: var(--services-dir-white-muted);

  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--services-dir-symptom-min-height);
  padding: var(--space-4);
  border: var(--services-dir-border-width) solid var(--services-dir-white-line);
  border-radius: var(--services-dir-card-radius);
  background: var(--services-dir-white-fill);
  color: var(--services-dir-white);
  font-family: var(--font-heading);
  font-size: var(--services-dir-symptom-title-size);
  font-weight: var(--font-bold);
  line-height: var(--services-dir-heading-line);
  text-decoration: none;
  text-transform: uppercase;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

body.page-services-repairs .s-services-directory__symptom:hover,
body.page-services-repairs .s-services-directory__symptom:focus-visible {
  border-color: var(--color-red);
  background: var(--color-red);
  color: var(--services-dir-white);
}

body.page-services-repairs .s-services-directory__symptom-icon {
  flex: 0 0 var(--services-dir-icon-size);
  width: var(--services-dir-icon-size);
  height: var(--services-dir-icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.page-services-repairs .s-services-directory__symptom-text {
  min-width: 0;
}

body.page-services-repairs .s-services-directory__symptom-sub {
  display: block;
  margin-top: var(--space-1);
  color: var(--services-dir-sub-color);
  font-family: var(--font-body);
  font-size: var(--services-dir-symptom-sub-size);
  font-weight: var(--font-medium);
  letter-spacing: var(--letter-normal);
  text-transform: none;
}

body.page-services-repairs .s-services-directory__symptom:hover,
body.page-services-repairs .s-services-directory__symptom:focus-visible {
  --services-dir-sub-color: var(--services-dir-white);
}

/* --------------------------------------------------------------------------
   Hero: the three most-booked services
   -------------------------------------------------------------------------- */

body.page-services-repairs .s-services-directory__featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

body.page-services-repairs .s-services-directory__feature {
  --services-dir-arrow-shift: 0;

  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  min-width: 0;
  overflow: hidden;
  border-top: var(--services-dir-feature-band) solid var(--color-red);
  border-radius: var(--services-dir-card-radius);
  background: var(--color-page);
  color: var(--color-ink);
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

body.page-services-repairs .s-services-directory__feature:hover,
body.page-services-repairs .s-services-directory__feature:focus-visible {
  --services-dir-arrow-shift: var(--space-1);

  box-shadow: var(--services-dir-card-shadow);
  color: var(--color-ink);
  transform: translateY(var(--services-dir-lift));
}

body.page-services-repairs .s-services-directory__feature-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
}

body.page-services-repairs .s-services-directory__feature-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-4) var(--space-5);
}

body.page-services-repairs .s-services-directory__feature-kicker {
  color: var(--color-red);
  font-family: var(--font-heading);
  font-size: var(--services-dir-feature-kicker-size);
  font-weight: var(--font-bold);
  letter-spacing: var(--letter-eyebrow);
  line-height: var(--line-tight);
  text-transform: uppercase;
}

body.page-services-repairs .s-services-directory__feature-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--services-dir-feature-title-size);
  font-weight: var(--font-heavy);
  line-height: var(--services-dir-heading-line);
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

body.page-services-repairs .s-services-directory__feature-copy {
  color: var(--color-muted);
  font-size: var(--text-small);
  line-height: var(--line-lead);
}

body.page-services-repairs .s-services-directory__symptoms-label {
  margin: var(--space-2) 0 calc(-1 * var(--space-3));
  color: var(--services-dir-white-muted);
  font-family: var(--font-heading);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-bold);
  letter-spacing: var(--letter-eyebrow);
  line-height: var(--line-tight);
  text-transform: uppercase;
}

body.page-services-repairs .s-services-directory__symptoms-note {
  margin: var(--space-4) 0 0;
  color: var(--services-dir-white-muted);
  font-size: var(--text-small);
  line-height: var(--line-lead);
}

body.page-services-repairs .s-services-directory__symptoms-link {
  color: var(--services-dir-white);
  font-weight: var(--font-semibold);
  text-decoration: underline;
  text-decoration-color: var(--services-dir-white-muted);
  text-underline-offset: var(--space-1);
  transition: text-decoration-color var(--duration-fast) var(--ease-standard);
}

body.page-services-repairs .s-services-directory__symptoms-link:hover,
body.page-services-repairs .s-services-directory__symptoms-link:focus-visible {
  text-decoration-color: var(--color-red);
}

/* Symptom finder in the "Browse by area" header, where the jobs button sits on a phone.
   Hidden until 900px: on a phone the tiles do this job and the button keeps the way to the
   job list. (Moved out of the hero on Gaby's instruction, 6 Sep 2026.) */
body.page-services-repairs .s-services-directory__finder {
  position: relative;
  display: none;
  flex: 0 1 var(--services-dir-finder-max);
  gap: var(--space-3);
  min-width: 0;
  max-width: var(--services-dir-finder-max);
}

body.page-services-repairs .s-services-directory__finder-box {
  margin: 0;
}

/* Drops down over the tabs and cards rather than pushing them. */
body.page-services-repairs .s-services-directory__finder-results {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: var(--services-dir-finder-z);
  display: grid;
  gap: var(--space-2);
  overflow-y: auto;
  max-height: var(--services-dir-finder-results-max);
  margin-top: var(--space-2);
  padding: var(--space-4);
  border: var(--services-dir-border-width) solid var(--color-light);
  border-radius: var(--services-dir-card-radius);
  background: var(--color-page);
  box-shadow: var(--shadow-card);
  color: var(--color-ink);
}

/* The panel is a grid, so the hidden attribute needs saying again at this specificity. */
body.page-services-repairs .s-services-directory__finder-results[hidden] {
  display: none;
}

body.page-services-repairs .s-services-directory__finder-count,
body.page-services-repairs .s-services-directory__finder-more,
body.page-services-repairs .s-services-directory__finder-empty {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-small);
  line-height: var(--line-lead);
}

body.page-services-repairs .s-services-directory__finder-row {
  display: grid;
  gap: var(--space-1);
  min-height: var(--services-dir-finder-row-min);
  padding: var(--space-3) var(--space-4);
  border: var(--services-dir-border-width) solid var(--color-light);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-standard);
}

body.page-services-repairs .s-services-directory__finder-row:hover,
body.page-services-repairs .s-services-directory__finder-row:focus-visible {
  border-color: var(--color-red);
}

body.page-services-repairs .s-services-directory__finder-title {
  font-family: var(--font-heading);
  font-size: var(--services-dir-finder-title-size);
  font-weight: var(--font-bold);
  line-height: var(--services-dir-heading-line);
  text-transform: uppercase;
}

body.page-services-repairs .s-services-directory__finder-copy {
  color: var(--color-muted);
  font-size: var(--text-small);
  line-height: var(--line-lead);
}

body.page-services-repairs .s-services-directory__finder-more,
body.page-services-repairs .s-services-directory__finder-link {
  color: var(--color-red);
  font-weight: var(--font-semibold);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

/* --------------------------------------------------------------------------
   Browse: tabs + cards
   -------------------------------------------------------------------------- */

body.page-services-repairs .s-services-directory__reviews {
  max-width: var(--services-dir-max);
  margin: 0 auto;
  padding: var(--space-7) var(--container-pad-mobile) 0;
}

body.page-services-repairs .s-services-directory__browse {
  max-width: var(--services-dir-max);
  margin: 0 auto;
  padding: var(--space-8) var(--container-pad-mobile) var(--space-5);
}

body.page-services-repairs .s-services-directory__browse-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

body.page-services-repairs .s-services-directory__tabs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  scrollbar-width: none;
}

body.page-services-repairs .s-services-directory__tabs::-webkit-scrollbar {
  display: none;
}

body.page-services-repairs .s-services-directory__tab {
  --services-dir-count-bg: var(--color-alt);
  --services-dir-count-color: var(--color-muted);

  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--services-dir-touch-target);
  padding: var(--space-2) var(--space-4);
  border: var(--services-dir-border-width) solid var(--color-light);
  border-radius: var(--services-dir-pill-radius);
  background: var(--color-page);
  color: var(--color-ink);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: var(--services-dir-tab-size);
  font-weight: var(--font-bold);
  line-height: var(--services-dir-heading-line);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

body.page-services-repairs .s-services-directory__tab:hover,
body.page-services-repairs .s-services-directory__tab:focus-visible {
  border-color: var(--color-ink);
}

body.page-services-repairs .s-services-directory__tab[aria-selected="true"] {
  --services-dir-count-bg: var(--color-red);
  --services-dir-count-color: var(--services-dir-white);

  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--services-dir-white);
}

body.page-services-repairs .s-services-directory__tab-count {
  padding: 0 var(--space-2);
  border-radius: var(--services-dir-pill-radius);
  background: var(--services-dir-count-bg);
  color: var(--services-dir-count-color);
  font-family: var(--font-body);
  font-size: var(--services-dir-count-size);
  font-weight: var(--font-bold);
  line-height: var(--line-lead);
}

body.page-services-repairs .s-services-directory__group-desc {
  margin: var(--space-4) 0 0;
  color: var(--color-muted);
  font-size: var(--text-small);
  line-height: var(--line-lead);
}

body.page-services-repairs .s-services-directory__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
}

body.page-services-repairs .s-services-directory__card {
  --services-dir-arrow-shift: 0;

  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: var(--services-dir-border-width) solid var(--color-light);
  border-radius: var(--services-dir-card-radius);
  background: var(--color-page);
  color: var(--color-ink);
  text-decoration: none;
  scroll-margin-top: var(--services-dir-scroll-offset);
  transition: transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

body.page-services-repairs .s-services-directory__card:hover,
body.page-services-repairs .s-services-directory__card:focus-visible {
  --services-dir-arrow-shift: var(--space-1);

  border-color: var(--color-red);
  box-shadow: var(--services-dir-card-shadow);
  color: var(--color-ink);
  transform: translateY(var(--services-dir-lift));
}

/* The card sets display: flex, which beats the browser's own [hidden] rule.
   Without this, a filtered-out card keeps rendering. */
body.page-services-repairs .s-services-directory__card[hidden] {
  display: none;
}

/* The card a symptom tile pointed at (services-directory.js sets is-target and
   aria-current). The tile's job is to land the visitor on one repair, so that card
   keeps the red frame and ring until they pick an area tab. */
body.page-services-repairs .s-services-directory__card.is-target {
  border-color: var(--color-red);
  box-shadow: var(--services-dir-target-ring), var(--services-dir-card-shadow);
}

body.page-services-repairs .s-services-directory__card-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

body.page-services-repairs .s-services-directory__card-emblem {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border-bottom: var(--services-dir-border-width) solid var(--color-light);
  background:
    radial-gradient(circle at 30% 25%, var(--services-dir-emblem-glow), transparent 60%),
    var(--color-ink);
}

body.page-services-repairs .s-services-directory__card-icon {
  width: var(--services-dir-emblem-size);
  height: var(--services-dir-emblem-size);
  fill: none;
  stroke: var(--services-dir-white);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.page-services-repairs .s-services-directory__card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5) var(--space-5);
}

body.page-services-repairs .s-services-directory__tag {
  width: max-content;
  padding: var(--space-1) var(--space-3);
  border: var(--services-dir-border-width) solid var(--color-red);
  border-radius: var(--services-dir-pill-radius);
  background: var(--color-page);
  color: var(--color-red);
  font-family: var(--font-heading);
  font-size: var(--services-dir-tag-size);
  font-weight: var(--font-bold);
  letter-spacing: var(--letter-nav);
  line-height: var(--line-lead);
  text-transform: uppercase;
}

body.page-services-repairs .s-services-directory__card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--services-dir-card-title-size);
  font-weight: var(--font-heavy);
  line-height: var(--services-dir-heading-line);
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

body.page-services-repairs .s-services-directory__arrow {
  color: var(--services-dir-arrow-color);
  font-family: var(--font-body);
  transform: translateX(var(--services-dir-arrow-shift));
  transition: transform var(--duration-fast) var(--ease-standard);
}

body.page-services-repairs .s-services-directory__card-copy {
  color: var(--color-muted);
  font-size: var(--text-small);
  line-height: var(--line-lead);
}

/* --------------------------------------------------------------------------
   Job search
   -------------------------------------------------------------------------- */

body.page-services-repairs .s-services-directory__jobs {
  max-width: var(--services-dir-max);
  margin: 0 auto;
  padding: var(--space-6) var(--container-pad-mobile) var(--space-2);
  scroll-margin-top: var(--services-dir-scroll-offset);
}

body.page-services-repairs .s-services-directory__jobs-panel {
  padding: var(--space-6) var(--space-5);
  border: var(--services-dir-border-width) solid var(--color-light);
  border-radius: var(--services-dir-panel-radius);
  background: var(--color-page);
}

body.page-services-repairs .s-services-directory__search {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--services-dir-search-height);
  margin: var(--space-4) 0;
  padding: 0 var(--space-4);
  border: var(--services-dir-search-border) solid var(--color-ink);
  border-radius: var(--radius-sm);
  background: var(--color-page);
}

body.page-services-repairs .s-services-directory__search:focus-within {
  border-color: var(--color-red);
}

body.page-services-repairs .s-services-directory__search-icon {
  flex: 0 0 var(--services-dir-icon-size);
  width: var(--services-dir-icon-size);
  height: var(--services-dir-icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.page-services-repairs .s-services-directory__search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-body);
}

body.page-services-repairs .s-services-directory__joblist {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  max-height: var(--services-dir-joblist-max);
  transition: max-height var(--duration-fast) var(--ease-standard);
}

body.page-services-repairs .s-services-directory__joblist.is-collapsed {
  max-height: 0;
}

body.page-services-repairs .s-services-directory__job {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--services-dir-touch-target);
  padding: var(--space-2) 0;
  border-top: var(--services-dir-border-width) solid var(--color-light);
  font-size: var(--services-dir-job-size);
}

body.page-services-repairs .s-services-directory__job[hidden] {
  display: none;
}

body.page-services-repairs .s-services-directory__job-label {
  flex: 1;
  min-width: 0;
  color: var(--color-ink);
  line-height: var(--line-lead);
}

body.page-services-repairs .s-services-directory__job-system {
  flex-shrink: 0;
  color: var(--color-muted);
  font-family: var(--font-heading);
  font-size: var(--services-dir-job-system-size);
  font-weight: var(--font-bold);
  letter-spacing: var(--letter-nav);
  text-transform: uppercase;
  white-space: nowrap;
}

body.page-services-repairs .s-services-directory__job-enquire {
  flex-shrink: 0;
  min-height: var(--services-dir-job-button-min-height);
  padding: var(--space-1) var(--space-3);
  border: var(--services-dir-border-width) solid var(--color-field-border);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: var(--services-dir-job-system-size);
  font-weight: var(--font-bold);
  letter-spacing: var(--letter-nav);
  line-height: var(--line-lead);
  text-decoration: none;
  text-transform: uppercase;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

/* 15.0.153: the whole job row is the tap target (one link per row, stretched). */
body.page-services-repairs .s-services-directory__job-enquire::after {
  content: "";
  position: absolute;
  inset: 0;
}

body.page-services-repairs .s-services-directory__job:hover .s-services-directory__job-enquire {
  border-color: var(--color-red);
  background: var(--color-red);
  color: var(--services-dir-white);
}

body.page-services-repairs .s-services-directory__job-enquire:hover,
body.page-services-repairs .s-services-directory__job-enquire:focus-visible {
  border-color: var(--color-red);
  background: var(--color-red);
  color: var(--services-dir-white);
}

body.page-services-repairs .s-services-directory__joblist-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  color: var(--color-muted);
  font-size: var(--text-small);
}

body.page-services-repairs .s-services-directory__joblist-foot [hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   Final CTA + branch cards
   -------------------------------------------------------------------------- */

body.page-services-repairs .s-services-directory-cta {
  --services-dir-cta-white: var(--color-page);
  --services-dir-cta-white-muted: rgba(255, 255, 255, .72);
  --services-dir-cta-copy-max: 560px;
  --services-dir-cta-radius: 18px;
  --services-dir-cta-card-radius: 12px;

  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-6) var(--container-pad-mobile) var(--space-10);
  background: var(--color-alt);
}

body.page-services-repairs .s-services-directory-cta__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-7);
  border-top: var(--space-1) solid var(--color-red);
  border-radius: var(--services-dir-cta-radius);
  background: var(--color-ink);
  color: var(--services-dir-cta-white);
}

body.page-services-repairs .s-services-directory-cta__title {
  margin-bottom: var(--space-3);
  color: var(--services-dir-cta-white);
  font-size: var(--text-h2-mobile);
}

body.page-services-repairs .s-services-directory-cta__copy {
  max-width: var(--services-dir-cta-copy-max);
  color: var(--services-dir-cta-white-muted);
  line-height: var(--line-body);
}

body.page-services-repairs .s-services-directory-cta .c-btn {
  width: 100%;
}

body.page-services-repairs .s-services-directory-cta__branches {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

body.page-services-repairs .s-services-directory-cta__branch {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  border: var(--services-dir-border-width, 1px) solid var(--color-light);
  border-radius: var(--services-dir-cta-card-radius);
  background: var(--color-page);
}

body.page-services-repairs .s-services-directory-cta__branch .s-services-directory-cta__eyebrow {
  margin-bottom: 0;
}

body.page-services-repairs .s-services-directory-cta__branch-title {
  color: var(--color-ink);
  font-size: var(--text-h3);
  text-transform: uppercase;
}

body.page-services-repairs .s-services-directory-cta__branch-meta {
  color: var(--color-muted);
  font-size: var(--text-small);
}

body.page-services-repairs .s-services-directory-cta__branch-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

body.page-services-repairs .s-services-directory-cta__branch-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-light);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: var(--font-bold);
  letter-spacing: var(--letter-nav);
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

body.page-services-repairs .s-services-directory-cta__branch-link:hover,
body.page-services-repairs .s-services-directory-cta__branch-link:focus-visible {
  border-color: var(--color-red);
  color: var(--color-red);
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {
  body.page-services-repairs .s-services-directory__hero {
    padding-right: var(--container-pad-tablet);
    padding-left: var(--container-pad-tablet);
  }

  body.page-services-repairs .s-services-directory__title {
    font-size: var(--text-h1-tablet);
  }

  body.page-services-repairs .s-services-directory__reviews,
  body.page-services-repairs .s-services-directory__browse,
  body.page-services-repairs .s-services-directory__jobs,
  body.page-services-repairs .s-services-directory-cta {
    padding-right: var(--container-pad-tablet);
    padding-left: var(--container-pad-tablet);
  }

  body.page-services-repairs .s-services-directory__symptoms {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.page-services-repairs .s-services-directory__featured {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.page-services-repairs .s-services-directory__feature {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-services-repairs .s-services-directory__feature-img {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
  }

  body.page-services-repairs .s-services-directory__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-services-repairs .s-services-directory-cta .c-btn {
    width: auto;
  }

  body.page-services-repairs .s-services-directory-cta__branches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  body.page-services-repairs .s-services-directory__hero {
    padding: var(--space-9) var(--container-pad) var(--space-8);
  }

  body.page-services-repairs .s-services-directory__finder {
    display: grid;
  }

  body.page-services-repairs .s-services-directory__browse-jobs-link {
    display: none;
  }

  body.page-services-repairs .s-services-directory__title {
    font-size: var(--text-h1-desktop);
  }

  body.page-services-repairs .s-services-directory__heading {
    font-size: var(--text-h2-desktop);
  }

  body.page-services-repairs .s-services-directory__browse {
    padding: var(--space-9) var(--container-pad) var(--space-6);
  }

  body.page-services-repairs .s-services-directory__reviews {
    padding-right: var(--container-pad);
    padding-left: var(--container-pad);
  }

  body.page-services-repairs .s-services-directory__jobs {
    padding-right: var(--container-pad);
    padding-left: var(--container-pad);
  }

  body.page-services-repairs .s-services-directory__jobs-panel {
    padding: var(--space-7);
  }

  body.page-services-repairs .s-services-directory__joblist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-7);
  }

  body.page-services-repairs .s-services-directory-cta {
    padding: var(--space-7) var(--container-pad) var(--space-11);
  }

  body.page-services-repairs .s-services-directory-cta__inner {
    align-items: center;
    flex-direction: row;
    padding: var(--space-8);
  }

  body.page-services-repairs .s-services-directory-cta__title {
    font-size: var(--text-h2-desktop);
  }
}

@media (min-width: 1200px) {
  body.page-services-repairs .s-services-directory__symptoms {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  body.page-services-repairs .s-services-directory__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-services-repairs .s-services-directory__symptom,
  body.page-services-repairs .s-services-directory__tab,
  body.page-services-repairs .s-services-directory__card,
  body.page-services-repairs .s-services-directory__feature,
  body.page-services-repairs .s-services-directory__arrow,
  body.page-services-repairs .s-services-directory__joblist,
  body.page-services-repairs .s-services-directory__job-enquire,
  body.page-services-repairs .s-services-directory__symptoms-link,
  body.page-services-repairs .s-services-directory__finder-row,
  body.page-services-repairs .s-services-directory-cta__branch-link {
    transition: none;
  }
}