/*
  Real Air HVAC: shared styles for every page.

  CSS controls how the site LOOKS: colors, fonts, spacing and layout.
  Every page links to this one file, so a change here updates the whole site.

  How to read CSS:
    selector {            <- WHICH things to style (e.g. every "h1" heading)
      property: value;    <- WHAT to change and HOW (e.g. "color: white;")
    }

  Sections:
    1. Design tokens   (the brand's colors, fonts and spacing, defined once)
    2. Reset           (removes inconsistent browser defaults)
    3. Base styles     (plain text, headings, links)
    4. Layout helpers  (page width and section spacing)
    5. Buttons
    6. Accessibility   (keyboard focus, skip link, reduced motion)
    7. Site header & navigation
    8. Phone action bar (Call / Text buttons fixed to the bottom on phones)
    9. Site footer
   10. Page sections   (hero, cards, photo layouts, lists and other building blocks)
*/


/* ==========================================================
   1. DESIGN TOKENS
   ":root" means "the whole page". Names starting with "--" are
   CSS variables: values defined once and reused everywhere with
   "var(--name)". EVERY color on the site is listed here, so a
   re-brand only ever needs this one section changed.
   The colors come from the Real Air HVAC logo: blue for cooling,
   orange for heating, and navy for text.
   ========================================================== */
:root {
  /* Page colors */
  --color-bg: #FFFFFF;            /* white page background */
  --color-surface: #F2F6FA;       /* very light blue-gray, for alternating sections and cards */
  --color-border: #D3DCE5;        /* thin dividing lines */
  --color-field-border: #6B7A89;  /* form field outlines (strong enough to see: 4.4 to 1) */

  /* Text colors */
  --color-text: #0B2239;          /* dark navy, for main text */
  --color-text-muted: #4A5B6C;    /* softer gray-blue, for supporting text */

  /* Brand blue: links, secondary buttons, highlights */
  --color-primary: #0B5CAD;
  --color-primary-hover: #094A8C;
  --color-primary-soft: #E7F1FB;  /* a pale blue tint for badges and notes */

  /* Brand orange: the main "call to action" buttons (Call, Request Service).
     Orange is used sparingly so the most important button always stands out. */
  --color-cta: #FF8A00;
  --color-cta-hover: #FFA02E;
  --color-cta-edge: #C25E00;      /* a darker outline so the button's shape is clear on white */
  --color-cta-text: #0B2239;      /* navy text on orange (white text on orange is too hard to read) */

  /* Dark areas (footer, dark bands) */
  --color-dark: #0B2239;
  --color-on-dark: #FFFFFF;       /* text on dark areas */
  --color-on-dark-muted: #B8C6D4; /* supporting text on dark areas */
  --color-on-dark-link: #7CC4FF;  /* links on dark areas */

  /* Messages */
  --color-error: #B42318;

  /* Fonts. These are "system fonts": the fonts already built into each visitor's
     phone or computer (San Francisco on Apple devices, Segoe on Windows, Roboto on Android).
     Nothing has to be downloaded, so text appears instantly. That speed matters for a
     site whose visitors may have a broken AC and a weak phone signal. */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-body);

  /* Spacing scale. "rem" is a unit equal to the base text size (usually 16 pixels),
     so 1rem = 16px, 2rem = 32px and so on. */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 4.5rem;

  /* Other shared values */
  --radius: 8px;                  /* how rounded corners are */
  --max-width: 1160px;            /* widest the content gets on big screens */
  --shadow: 0 2px 10px rgba(11, 34, 57, 0.08);  /* a soft shadow under cards */
  --transition: 0.2s ease;        /* speed of hover effects */
  --action-bar-height: 76px;      /* height of the Call / Text bar on phones */
}


/* ==========================================================
   2. RESET
   Every browser adds its own default spacing and sizing, and they
   don't all agree. These rules give us a clean, predictable start.
   ========================================================== */

/* "*" means "every element". "border-box" makes widths include padding. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1, h2, h3, h4,
p, ul, ol, figure, blockquote {
  margin: 0;
}

/* Images shrink to fit small screens and never overflow. */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Form fields use the site's font instead of the browser's default. */
input, button, textarea, select {
  font: inherit;
}

/* Elements with the "hidden" attribute must stay hidden. */
[hidden] {
  display: none !important;
}


/* ==========================================================
   3. BASE STYLES
   ========================================================== */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;        /* 17px: slightly larger than usual, easier to read on a phone outdoors */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 800;            /* extra bold, echoing the chunky lettering in the logo */
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* "clamp(smallest, preferred, largest)" lets text grow with the screen width within limits. */
h1 { font-size: clamp(2rem, 6vw, 3.25rem); }
h2 { font-size: clamp(1.625rem, 4vw, 2.375rem); }
h3, .h3 { font-size: clamp(1.1875rem, 2.5vw, 1.375rem); }

p:not(:last-child),
h1:not(:last-child),
h2:not(:last-child),
h3:not(:last-child) {
  margin-bottom: var(--space-sm);
}

a {
  color: var(--color-primary);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--color-primary-hover);
}

/* A small uppercase label above a heading, e.g. "OUR SERVICES". */
.eyebrow {
  display: block;
  color: var(--color-primary);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

/* Larger intro text under main headings. */
.lead {
  font-size: 1.1875rem;
  color: var(--color-text-muted);
  max-width: 60ch;             /* about 60 characters per line is comfortable to read */
}

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


/* ==========================================================
   4. LAYOUT HELPERS
   A "class" (names starting with ".") is a label put on HTML
   elements, like <div class="container">, to apply these styles.
   ========================================================== */

/* Keeps content centered and away from the screen edges. */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-sm);
}

/* A "media query": rules that only apply at certain screen sizes.
   On tablets and larger, give the edges more room. */
@media (min-width: 768px) {
  .container {
    padding-inline: var(--space-lg);
  }
}

/* Vertical breathing room above and below each page section. */
.section {
  padding-block: var(--space-xl);
}

/* A light gray-blue background, to separate alternating sections. */
.section--surface {
  background-color: var(--color-surface);
}

/* A dark navy band with light text. */
.section--dark {
  background-color: var(--color-dark);
  color: var(--color-on-dark);
}

.section--dark .lead,
.section--dark .muted {
  color: var(--color-on-dark-muted);
}

.section--dark a:not(.btn) {
  color: var(--color-on-dark-link);
}

/* Puts buttons side by side, wrapping onto new lines on narrow screens. */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}


/* ==========================================================
   5. BUTTONS
   Three kinds, in order of importance:
     .btn            orange: the ONE main action (Call, Request Service)
     .btn--primary   blue: a secondary action
     .btn--outline   outlined: the quietest option
   ========================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;            /* tall enough to tap comfortably */
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--color-cta-edge);
  border-radius: var(--radius);
  background-color: var(--color-cta);
  color: var(--color-cta-text);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.btn:hover {
  background-color: var(--color-cta-hover);
  color: var(--color-cta-text);
}

.btn--primary {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-on-dark);
}

.btn--primary:hover {
  border-color: var(--color-primary-hover);
  background-color: var(--color-primary-hover);
  color: var(--color-on-dark);
}

.btn--outline {
  border-color: var(--color-primary);
  background-color: transparent;
  color: var(--color-primary);
}

.btn--outline:hover {
  background-color: var(--color-primary);
  color: var(--color-on-dark);
}

/* On dark bands, the outline button turns white so it stays visible. */
.section--dark .btn--outline {
  border-color: var(--color-on-dark);
  color: var(--color-on-dark);
}

.section--dark .btn--outline:hover {
  background-color: var(--color-on-dark);
  color: var(--color-dark);
}

/* Small icons inside buttons (phone, message). */
.btn svg {
  width: 1.125em;
  height: 1.125em;
  flex-shrink: 0;
}


/* ==========================================================
   6. ACCESSIBILITY
   ========================================================== */

/* People who navigate with the Tab key need to see where they are. */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

/* On dark areas, the focus outline switches to a light color. */
.section--dark :focus-visible {
  outline-color: var(--color-on-dark);
}

/* Hides text visually but keeps it readable by screen readers. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The skip link sits off-screen until it receives keyboard focus. */
.skip-link {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: 200;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-primary);
  color: var(--color-on-dark);
  font-weight: 700;
  border-radius: var(--radius);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--color-on-dark);
}

/* Respect the "Reduce motion" setting on a visitor's device. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================
   7. SITE HEADER & NAVIGATION
   Mobile-first: the rules at the top are for phones. The
   "@media (min-width: 960px)" block changes the layout for
   wider screens.
   ========================================================== */

/* "sticky" keeps the header pinned to the top of the screen while scrolling. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;                /* keeps the header above the page content */
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow);
}

/* "flex" lines children up in a row. "space-between" pushes the
   logo to the left and the menu button to the right. */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 68px;
}

/* --- Logo --- */
.logo {
  display: block;
  flex-shrink: 0;
  padding-block: 6px;
}

.logo img {
  width: auto;
  height: 54px;                /* the logo is detailed, so it's kept as large as the header allows */
}

/* --- Hamburger button (phones and tablets) --- */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 11px;
  background: transparent;
  border: 2px solid var(--color-field-border);
  border-radius: var(--radius);
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

/* When the menu is open, turn the three bars into an "X". */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- The menu, phone layout: a full-width panel that drops down below the header --- */
.site-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: var(--space-xs) var(--space-sm) var(--space-md);
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow);
}

/* Hide the phone menu until it's opened, but ONLY if JavaScript is working
   (the "js" mark added in each page's <head>). Without JavaScript the menu
   simply stays visible, so no one gets locked out. */
.js .site-nav {
  display: none;
}

.js .site-nav.is-open {
  display: block;
}

html:not(.js) .nav-toggle {
  display: none;
}

.site-nav__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-sm);
}

.site-nav__list a {
  display: block;
  padding: 0.875rem 0;
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}

.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] {
  color: var(--color-primary);
}

.site-nav__cta {
  display: flex;
  width: 100%;
}

/* --- Services dropdown, phone layout: a short indented list inside the menu panel --- */
.submenu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: 0.875rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.submenu-toggle svg {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform var(--transition);
}

.submenu-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.submenu-toggle:hover,
.has-submenu.is-current > .submenu-toggle {
  color: var(--color-primary);
}

.submenu {
  list-style: none;
  padding: 0 0 0 var(--space-sm);
  margin: 0;
}

/* With JavaScript working, the list stays closed until the button opens it. */
.js .submenu {
  display: none;
}

.js .submenu-toggle[aria-expanded="true"] + .submenu {
  display: block;
}

.site-nav__list .submenu a {
  font-weight: 500;
}

/* --- Wider screens (960px and up): the menu sits in a row inside the header --- */
@media (min-width: 960px) {
  .nav-toggle,
  html:not(.js) .nav-toggle {
    display: none;
  }

  .site-header__inner {
    min-height: 80px;
  }

  .logo img {
    height: 64px;
  }

  .site-nav,
  .js .site-nav {
    position: static;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .site-nav__list {
    display: flex;
    gap: var(--space-md);
    margin: 0;
  }

  .site-nav__list a {
    position: relative;
    padding: 0.5rem 0;
    border-bottom: 0;
    white-space: nowrap;
  }

  /* A blue line under the current page's link. */
  .site-nav__list a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 2px;
    background-color: var(--color-primary);
  }

  .site-nav__cta {
    width: auto;
    white-space: nowrap;
  }

  /* Services dropdown on computers: a panel that drops down below the button. */
  .has-submenu {
    position: relative;
  }

  .submenu-toggle {
    width: auto;
    gap: 0.25rem;
    min-height: 0;
    padding: 0.5rem 0;
    border-bottom: 0;
    white-space: nowrap;
  }

  /* The blue line under "Services" while you're on one of the service pages. */
  .has-submenu.is-current > .submenu-toggle {
    position: relative;
  }

  .has-submenu.is-current > .submenu-toggle::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 2px;
    background-color: var(--color-primary);
  }

  .submenu,
  .js .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: -1rem;
    z-index: 110;
    min-width: 270px;
    padding: var(--space-xs) 0;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  /* Opens on mouse-over, or when the button is clicked or used with the keyboard. */
  .has-submenu:hover > .submenu,
  .js .submenu-toggle[aria-expanded="true"] + .submenu {
    display: block;
  }

  .site-nav__list .submenu a {
    padding: 0.625rem 1rem;
  }

  .site-nav__list .submenu a[aria-current="page"]::after {
    display: none;            /* inside the dropdown, the current page is shown in blue only */
  }

  .site-nav__list .submenu a:hover {
    background-color: var(--color-surface);
  }
}

/* Between 960px and 1100px, hide the number on the Call Now button so the menu fits on one line. */
@media (min-width: 960px) and (max-width: 1099px) {
  .site-nav__cta-number {
    display: none;
  }
}


/* ==========================================================
   8. PHONE ACTION BAR
   Call and Text buttons fixed to the bottom of the screen on
   phones and tablets. Someone with a broken AC shouldn't have
   to scroll to find the phone number.
   ========================================================== */
.action-bar {
  position: fixed;             /* stays in place while the page scrolls */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr 1fr;   /* two equal buttons */
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  /* On iPhones without a home button, leave room for the swipe bar at the bottom of the screen. */
  padding-bottom: calc(var(--space-xs) + env(safe-area-inset-bottom, 0px));
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow);
}

.action-bar .btn {
  min-height: 52px;
  padding-inline: 0.5rem;
}

/* Leave empty space at the very bottom of the page, so the bar never covers the end of the footer. */
body {
  padding-bottom: calc(var(--action-bar-height) + env(safe-area-inset-bottom, 0px));
}

/* On computers the header already shows the phone number, so the bar is hidden. */
@media (min-width: 960px) {
  .action-bar {
    display: none;
  }

  body {
    padding-bottom: 0;
  }
}

/* The bar is for the screen only, not for printed pages. */
@media print {
  .action-bar {
    display: none;
  }
}


/* ==========================================================
   9. SITE FOOTER
   ========================================================== */
.site-footer {
  border-top: 1px solid var(--color-on-dark-muted);   /* a thin line, so the footer stays distinct below a dark band */
  padding-block: var(--space-lg) var(--space-md);
  font-size: 1rem;
}

/* "grid" arranges items in rows and columns. Phones: one column. */
.site-footer__grid {
  display: grid;
  gap: var(--space-lg);
}

/* Tablets: two columns. */
@media (min-width: 600px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktops: four columns. The first is wider for the business description. */
@media (min-width: 960px) {
  .site-footer__grid {
    grid-template-columns: 1.6fr 1.2fr 1fr 1.3fr;
  }
}

.site-footer__name {
  font-size: 1.25rem;
  font-weight: 800;
}

/* Small uppercase column headings. */
.site-footer__heading {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-on-dark);
  margin-bottom: var(--space-xs);
}

.site-footer__list {
  list-style: none;
  padding: 0;
  font-style: normal;          /* <address> is italic by default; undo that */
}

/* Each link gets a tall tap area, so neighbouring links aren't hit by mistake. */
.site-footer__list a {
  display: inline-block;
  padding-block: 0.375rem;
  text-decoration: none;
}

.site-footer__list a:hover {
  text-decoration: underline;
}

.site-footer__bottom {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-on-dark-muted);
  font-size: 0.875rem;
}


/* ==========================================================
   10. PAGE SECTIONS
   Reusable building blocks for page content. They start on the
   Home page, and the other pages reuse them in Stage 5.
   ========================================================== */

/* The eyebrow + heading + intro text at the top of a section. */
.section-heading {
  max-width: 720px;
  margin-bottom: var(--space-lg);
}

/* A "Learn more" style link under a section, with a tall tap area. */
.section-link {
  margin-top: var(--space-md);
  font-weight: 700;
}

.section-link a {
  display: inline-block;
  padding-block: 0.625rem;
  text-decoration: none;
}

.section-link a:hover {
  text-decoration: underline;
}

/* Photo captions. */
figcaption {
  margin-top: var(--space-xs);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}


/* --- Hero --- */
.hero {
  padding-block: var(--space-lg) var(--space-xl);
}

/* Phones: text first, photo below. Desktops: text and photo side by side. */
.hero__inner {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

@media (min-width: 960px) {
  .hero__inner {
    grid-template-columns: 1.3fr 1fr;   /* the text column is a little wider than the photo */
  }
}

/* "object-fit: cover" crops the photo to fill its frame without stretching it. */
.hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;          /* a wide frame on phones, so the photo doesn't fill the whole screen */
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

@media (min-width: 960px) {
  .hero__media img {
    aspect-ratio: 4 / 5;        /* a taller frame beside the text on desktops */
  }
}

/* --- Trust badges: short confirmed facts under the hero buttons --- */
.badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  padding: 0;
  list-style: none;
}

.badge-list li {
  position: relative;
  padding: 0.375rem 0.75rem 0.375rem 1.875rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;         /* a very large radius makes a pill shape */
  background-color: var(--color-bg);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* A small blue check mark, drawn with two borders of a rotated box. */
.badge-list li::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 50%;
  width: 0.375rem;
  height: 0.6875rem;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: translateY(-60%) rotate(45deg);
}


/* --- Cards --- */

/* Phones: 1 column. Tablets: 2 columns. Desktops: 3 columns. */
.card-grid {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 600px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  position: relative;           /* lets the whole card act as one big link (see below) */
  padding: var(--space-md);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform var(--transition);
}

.card--cool { border-top-color: var(--color-primary); }   /* blue edge: cooling */
.card--heat { border-top-color: var(--color-cta); }       /* orange edge: heating */

.card h3 a {
  color: var(--color-text);
  text-decoration: none;
}

/* Stretches the heading's link over the whole card, so tapping anywhere on the card opens the page.
   Screen readers still hear one clearly named link. */
.card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card:has(h3 a):hover {
  transform: translateY(-3px);  /* the card lifts slightly under the mouse */
}

.card:has(h3 a):hover h3 a {
  color: var(--color-primary);
}

/* Shows the focus outline around the whole card when its link is reached with the Tab key. */
.card h3 a:focus-visible {
  outline: none;
}

.card:has(h3 a:focus-visible) {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

/* The call-to-action card: a pale blue panel with a button. */
.card--cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  background-color: var(--color-primary-soft);
  border-color: var(--color-primary-soft);
  box-shadow: none;
}

.card--cta .btn {
  margin-top: auto;             /* pushes the button to the bottom of the card */
}


/* --- Customer reviews: a quote card with the customer's name underneath --- */
.review {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-sm);
  margin: 0;
  border-top-color: var(--color-cta);
}

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

.review figcaption {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-text);
}

/* --- Split layout: a photo beside text --- */
.split {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

@media (min-width: 960px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }

  /* Flipped version: text on the left, photo on the right. */
  .split--reverse .split__media {
    order: 2;
  }
}

.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Tall photos cropped into the wide frame: choose which part stays in view. */
.split__media img.focus-top {
  object-position: center top;   /* keep the top (e.g. a person's head) */
}

.split__media img.focus-upper {
  object-position: center 30%;
}


/* --- Check-mark list --- */
.check-list {
  list-style: none;
  padding: 0;
  margin-block: var(--space-md);
}

.check-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--space-sm);
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0.375rem;
  top: 0.3125rem;
  width: 0.5rem;
  height: 0.9375rem;
  border-right: 3px solid var(--color-primary);
  border-bottom: 3px solid var(--color-primary);
  transform: rotate(45deg);
}


/* --- Before and after photos --- */

/* Two photos side by side at every screen size, so they can be compared at a glance. */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  max-width: 760px;
}

.compare figure {
  position: relative;
}

.compare img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* The "Before" / "After" label sits on the photo's top-left corner. */
.compare figcaption {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  margin: 0;
}

.compare__tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background-color: var(--color-dark);
  color: var(--color-on-dark);
  font-size: 0.875rem;
  font-weight: 700;
}

.compare__tag--after {
  background-color: var(--color-primary);
}


/* --- City list: each city in a rounded "chip" --- */
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: 0;
  list-style: none;
}

.chip-list li {
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background-color: var(--color-bg);
  font-weight: 600;
}


/* --- Final call-to-action band --- */
.cta-band {
  text-align: center;
}

.cta-band .lead {
  margin-inline: auto;
}

.cta-band .btn-group {
  justify-content: center;
}


/* --- Inner-page header: a shorter hero without a photo --- */
.page-hero {
  padding-block: var(--space-lg);
}

/* --- Breadcrumb: "Home / Services / AC Repair" --- */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  padding: 0;
  margin: 0 0 var(--space-sm);
  list-style: none;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--color-text-muted);
}

.breadcrumb a {
  display: inline-block;
  padding-block: 0.375rem;   /* taller tap area */
}

/* --- Numbered steps ("How it works") --- */
.steps {
  display: grid;
  gap: var(--space-md);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.steps li {
  position: relative;
  counter-increment: step;
  padding: calc(var(--space-md) + 2.75rem) var(--space-md) var(--space-md);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.steps li::before {
  content: counter(step);
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-on-dark);
  font-weight: 800;
}

.steps h3 {
  margin-bottom: var(--space-xs);
}

/* --- Contact details list (label + value) --- */
.detail-list {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
}

.detail-list dt {
  font-weight: 700;
}

.detail-list dd {
  margin: 0;
  color: var(--color-text-muted);
}

.detail-list a {
  display: inline-block;
  padding-block: 0.375rem;   /* taller tap area */
}

/* Sections that other pages link to (index.html#services) stop below the pinned header instead of under it. */
section[id] {
  scroll-margin-top: 96px;
}

/* --- Long text pages (Privacy Policy): a comfortable reading width and spacing --- */
.prose {
  max-width: 760px;
}

.prose h2 {
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  margin-top: var(--space-lg);
}

.prose h3 {
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
}

.prose p,
.prose ul {
  margin-bottom: var(--space-sm);
}

.prose li {
  margin-bottom: var(--space-xs);
}

/* Section headings that the page links to (#rights) stop below the pinned header. */
.prose [id] {
  scroll-margin-top: 96px;
}

/* The Privacy Policy link in the footer, with a taller tap area. */
.site-footer__legal {
  display: inline-block;
  padding-block: 0.375rem;
}