/* ==========================================================================
   AJ Roofing & Guttering Services
   ========================================================================== */

/* Design tokens
   ========================================================================== */
:root {
  --font-sans: "Inter", Arial, sans-serif;

  --color-text: #292929;
  --color-bg: #ffffff;
  --color-brand: #f56600;        /* brand orange: buttons, links, accents */
  --color-brand-hover: #e05c00;  /* subtle hover shade for orange surfaces */
  --color-white: #ffffff;
  --color-charcoal: #292929;     /* dark section background */
  --color-charcoal-hover: #171717; /* dark button hover */
  --color-text-on-dark: #f2f2f2; /* body copy on charcoal */
  --color-separator: #c4c4c4;    /* thin vertical dividers */
  --color-rule: #e3e3e3;         /* subtle horizontal rules */
  --color-surface-pale: #edf3f7; /* pale blue-grey section background */
  --color-text-muted-dark: #e0e0e0; /* secondary text on charcoal */
  --color-divider-dark: #737373; /* divider on charcoal */

  --radius-sm: 2px;
  --focus-ring: 2px solid var(--color-text);
  --focus-offset: 4px;

  /* Side gutters: 20px < 600px, 24px 600–1099px, 48px desktop.
     Kept in px (like the logo) so enlarged text can't push the layout
     wider than a 320px screen. */
  --gutter: 20px;
  --container-max: 90rem;        /* 1440px */
}

@media (min-width: 37.5em) {     /* 600px */
  :root { --gutter: 24px; }
}

@media (min-width: 68.75em) {    /* 1100px */
  :root { --gutter: 48px; }
}

/* Base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Always reserve the scrollbar's space, so short pages (no scrollbar) and
   long pages (scrollbar) have the same width and the header doesn't shift */
html {
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.container {
  width: min(var(--container-max), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5rem;
  text-align: center;
  text-decoration: none;
  transition: background-color 150ms ease;
}

.btn--primary {
  background: var(--color-brand);
  color: var(--color-white);
}

.btn--primary:hover {
  background: var(--color-brand-hover);
}

/* Header — mobile/tablet first (below 1100px)
   ========================================================================== */
.site-header {
  background: var(--color-bg);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 6rem;              /* 96px */
}

.site-header__logo {
  flex-shrink: 0;
  display: block;
  line-height: 0;
}

.site-header__logo img {
  display: block;
  width: 144px;                  /* → 96px tall */
  height: auto;
  object-fit: contain;
}

.site-header__desktop {
  display: none;
}

/* Menu toggle */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  margin-right: -10px;           /* optically align the icon with the gutter */
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

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

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

/* Without JavaScript the toggle can't work, so hide it and show the links. */
html:not(.js) .menu-toggle {
  display: none;
}

html:not(.js) .mobile-nav[hidden] {
  display: block;
}

/* Mobile navigation panel (in flow, below the header row) */
.mobile-nav {
  padding-bottom: 1.5rem;
  background: var(--color-bg);
}

.mobile-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-nav__link {
  display: flex;
  align-items: center;
  min-height: 3rem;              /* 48px rows */
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.625rem;         /* 26px */
  text-decoration: none;
  transition: color 150ms ease;
}

.mobile-nav__link:hover,
.mobile-nav__link[aria-current="page"] {
  color: var(--color-brand);
}

.mobile-nav__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--color-brand);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.5rem;
}

.mobile-nav__cta {
  display: flex;
  width: 100%;
  min-height: 3.25rem;           /* 52px */
  margin-top: 1.25rem;           /* 20px */
}

/* Header — desktop (1100px and above)
   ========================================================================== */
@media (min-width: 68.75em) {
  .site-header__bar {
    flex-wrap: wrap;             /* wrap rather than overlap if text is enlarged */
    column-gap: 2rem;
    min-height: 9rem;            /* 144px */
  }

  .site-header__logo img {
    width: 216px;                /* → 144px tall */
  }

  .menu-toggle,
  html:not(.js) .mobile-nav[hidden],
  .mobile-nav {
    display: none;
  }

  .site-header__desktop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    column-gap: 4rem;            /* nav ↔ CTA: 64px */
    row-gap: 1rem;
  }

  .primary-nav__list {
    display: flex;
    flex-wrap: wrap;
    column-gap: 3rem;            /* between links: 48px */
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .primary-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;         /* 44px hit area */
    font-size: 1.125rem;         /* 18px */
    font-weight: 600;
    line-height: 1.5rem;         /* 24px */
    text-decoration: none;
    transition: color 150ms ease;
  }

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

  /* 2px underline ~10px below the label; absolutely positioned so it never shifts layout */
  .primary-nav__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% + 0.75rem + 0.625rem);
    height: 2px;
    background: var(--color-brand);
  }

  .site-header__cta {
    min-width: 16.25rem;         /* 260px */
    min-height: 4rem;            /* 64px */
  }
}

/* Hero — mobile first (text, then photo, stacked)
   ========================================================================== */
.hero {
  background: var(--color-charcoal);
  color: var(--color-white);
}

.hero :focus-visible {
  outline-color: var(--color-white);
}

.hero__content {
  padding: 3rem var(--gutter);
}

.hero__inner {
  min-width: 0;
}

.hero__eyebrow {
  margin: 0 0 1rem;
  color: var(--color-brand);
  font-size: 0.875rem;           /* 14px */
  font-weight: 700;
  line-height: 1.375rem;         /* 22px */
  text-transform: uppercase;
}

.hero__title {
  margin: 0 0 1.25rem;
  font-size: 2.25rem;            /* 36px */
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.hero__text {
  max-width: 36.25rem;           /* 580px */
  margin: 0 0 2rem;
  color: var(--color-text-on-dark);
  font-size: 1.125rem;           /* 18px */
  line-height: 1.6875rem;        /* 27px */
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.hero__cta {
  width: 100%;
  min-height: 3.5rem;            /* 56px */
  padding: 0 2rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

.hero__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;           /* 44px hit area */
  color: var(--color-white);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.625rem;
  text-decoration: none;
}

.hero__link-label {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;                  /* text ↔ arrow: 12px */
  padding-bottom: 0.25rem;
  border-bottom: 1px solid currentColor;
  transition: border-color 150ms ease;
}

.hero__link:hover .hero__link-label {
  border-bottom-color: var(--color-brand);
}

.hero__link-icon {
  flex-shrink: 0;
  width: 1.375rem;               /* ~22px */
  height: 1.375rem;
}

.hero__media img {
  display: block;
  width: 100%;
  height: auto;                  /* native 605:325 */
}

@media (min-width: 37.5em) {     /* 600–1099px */
  .hero__title {
    font-size: clamp(2.5rem, 1.598rem + 2.405vw, 3.25rem); /* 40–52px */
    line-height: 1.1;
  }

  .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .hero__cta {
    width: auto;
    font-size: 1.125rem;
    line-height: 1.625rem;
  }
}

@media (min-width: 68.75em) {    /* 1100px and up: 44% text / 56% photo */
  .hero {
    display: grid;
    grid-template-columns: 44% 56%;
    min-height: 36.25rem;        /* 580px, grows with content */
  }

  .hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 4rem 3rem 4rem max(48px, (100vw - 1600px) / 2);
  }

  .hero__inner {
    max-width: 40rem;            /* 640px */
  }

  .hero__eyebrow {
    font-size: 1.125rem;
    line-height: 1.625rem;
  }

  .hero__title {
    font-size: clamp(2.75rem, 3.125vw, 3.75rem);            /* 44–60px */
    letter-spacing: -0.025em;
  }

  /* Preferred three-line composition; lines still wrap if they don't fit */
  .hero__title-line {
    display: block;
  }

  .hero__text {
    font-size: clamp(1.25rem, 0.747rem + 0.732vw, 1.625rem); /* 20–26px */
    line-height: 1.45;
  }

  .hero__text-end {
    white-space: nowrap;         /* keeps "for your property." together */
  }

  .hero__actions {
    column-gap: 2.5rem;
    row-gap: 1.25rem;
  }

  .hero__cta {
    min-width: min(18rem, 100%); /* 288px, shrinks to fit the panel */
    min-height: 4rem;
  }

  .hero__media {
    position: relative;
    min-width: 0;
  }

  .hero__media img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}

/* Service strip — static category labels under the hero
   ========================================================================== */
.service-strip {
  background: var(--color-bg);
}

.service-strip__list {
  width: min(1600px, 100% - 2 * var(--gutter));
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.service-strip__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.625rem;
  text-align: center;
}

.service-strip__item + .service-strip__item {
  border-top: 1px solid var(--color-rule);
}

@media (min-width: 37.5em) {     /* three columns from 600px */
  .service-strip__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 4rem;
  }

  .service-strip__item {
    padding: 1rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .service-strip__item + .service-strip__item {
    border-top: 0;
  }

  /* Decorative divider (CSS-only, so assistive tech ignores it) */
  .service-strip__item + .service-strip__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 1.75rem;             /* ~28px */
    background: var(--color-separator);
    transform: translateY(-50%);
  }
}

@media (min-width: 68.75em) {
  .service-strip__item {
    padding: 0.75rem 1rem;
    font-size: 1.125rem;
    line-height: 1.625rem;
  }
}

/* Wide body container (hero/body grid: 1600px max, same side gutters)
   ========================================================================== */
.container-wide {
  width: min(1600px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* Services — mobile first (one column)
   ========================================================================== */
.services {
  padding-block: 2rem 1.5rem;
  background: var(--color-surface-pale);
}

.services__eyebrow {
  margin: 0 0 0.25rem;
  color: var(--color-brand);
  font-size: 0.875rem;           /* 14px */
  font-weight: 700;
  line-height: 1.375rem;
  text-transform: uppercase;
}

.services__title {
  margin: 0 0 0.25rem;
  overflow-wrap: break-word;
  font-size: 2rem;               /* 32px */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.services__intro {
  margin: 0 0 1.25rem;
  font-size: 1.125rem;           /* 18px */
  line-height: 1.6875rem;        /* 27px */
}

.services__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 1.75rem;              /* 28px */
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-card {
  min-width: 0;
}

.service-card__media {
  aspect-ratio: 2.45 / 1;
  overflow: hidden;
}

.service-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.service-card__title {
  margin: 0.625rem 0 0.125rem;   /* 10px / 2px */
  overflow-wrap: break-word;     /* long words at large text sizes */
  hyphens: auto;
  font-size: 1.375rem;           /* 22px */
  font-weight: 700;
  line-height: 1.75rem;          /* 28px */
}

.service-card__text {
  margin: 0;
  font-size: 1.125rem;           /* 18px */
  line-height: 1.6875rem;        /* 27px */
}

/* Clickable service cards (for cards that link to a service page)
   The title link stretches over the whole card, so the accessible name
   stays the service title while the photo and text are clickable too. */
.service-card--link {
  position: relative;
}

.service-card--link .service-card__media {
  position: relative;
}

/* Orange bar that sweeps in along the bottom of the photo */
.service-card--link .service-card__media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--color-brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms ease;
}

.service-card--link .service-card__media img {
  transition: transform 500ms ease;
}

.service-card__link {
  color: inherit;
  text-decoration: none;
  transition: color 200ms ease;
}

.service-card__link::after {
  content: "";
  position: absolute;
  inset: 0;                      /* whole card is the hit area */
}

.service-card__arrow {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-block: -0.25em;         /* don't make the title line taller */
  margin-left: 0.4em;
  vertical-align: -0.1em;
  color: var(--color-brand);
  transition: transform 200ms ease;
}

/* Keep the arrow with the title's last word so it never sits alone on a
   line. Skipped on very narrow/very enlarged text (under 20em) where
   "word + arrow" might not fit, so long words can still wrap. */
@media (min-width: 20em) {
  .service-card__nowrap {
    white-space: nowrap;
  }
}

/* Keyboard focus: ring around the whole card, not just the title */
.service-card__link:focus-visible {
  outline: none;
}

.service-card__link:focus-visible::after {
  outline: 2px solid var(--color-text);
  outline-offset: 4px;
}

.service-card--link:hover .service-card__media img,
.service-card--link:focus-within .service-card__media img {
  transform: scale(1.06);
}

.service-card--link:hover .service-card__media::after,
.service-card--link:focus-within .service-card__media::after {
  transform: scaleX(1);
}

.service-card--link:hover .service-card__link,
.service-card--link:focus-within .service-card__link {
  color: var(--color-brand);
}

.service-card--link:hover .service-card__arrow,
.service-card--link:focus-within .service-card__arrow {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .service-card--link:hover .service-card__media img,
  .service-card--link:focus-within .service-card__media img,
  .service-card--link:hover .service-card__arrow,
  .service-card--link:focus-within .service-card__arrow {
    transform: none;             /* colour + bar only, no movement */
  }
}

/* Enquiry strip: one link to #contact */
.enquiry {
  display: flex;
  align-items: center;
  margin-top: 1.75rem;           /* 28px */
  padding: 24px;                 /* px so enlarged text keeps its room */
  background: var(--color-brand);
  color: var(--color-white);
  text-decoration: none;
  transition: background-color 150ms ease;
}

.enquiry:hover {
  background: var(--color-brand-hover);
}

.enquiry__icon,
.enquiry__divider {
  display: none;
  flex-shrink: 0;
}

.enquiry__copy {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}

.enquiry__title {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 1.5rem;             /* 24px */
  font-weight: 700;
  line-height: 1.875rem;         /* 30px */
}

.enquiry__text {
  display: block;
  font-size: 1.125rem;           /* 18px */
  line-height: 1.6875rem;        /* 27px */
}

.enquiry__arrow {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-left: 16px;
}

@media (min-width: 37.5em) {     /* 600–1099px: two columns */
  .services__eyebrow {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .services__title {
    font-size: 2.25rem;          /* 36px */
  }

  .services__intro {
    font-size: 1.25rem;          /* 20px */
    line-height: 1.75rem;        /* 28px */
  }

  .services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
  }

  .enquiry {
    margin-top: 1.5rem;
  }

  .enquiry__icon {
    display: block;
    width: 3rem;                 /* 48px */
    height: 3rem;
    margin-right: 1.5rem;
  }

  .enquiry__divider {
    display: block;
    align-self: center;
    width: 1px;
    height: 3rem;
    margin-right: 1.5rem;
    background: var(--color-white);
  }

  .enquiry__title {
    font-size: 1.625rem;         /* 26px */
    line-height: 2rem;           /* 32px */
  }

  .enquiry__text {
    font-size: 1.25rem;          /* 20px */
    line-height: 1.75rem;        /* 28px */
  }

  .enquiry__arrow {
    width: 32px;
    height: 32px;
    margin-left: 24px;
  }
}

@media (min-width: 68.75em) {    /* 1100px and up: three columns */
  .services {
    padding-block: 2.5rem 1.5rem;
  }

  .services__eyebrow {
    font-size: 1.125rem;
    line-height: 1.625rem;
  }

  .services__title {
    font-size: clamp(2.25rem, 2.71vw, 3.25rem);   /* 36–52px */
    line-height: 1.12;
    letter-spacing: -0.025em;
  }

  .services__intro {
    margin-bottom: 1rem;
    font-size: 1.5rem;           /* 24px */
    line-height: 2.125rem;       /* 34px */
  }

  .services__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: 1.5rem;
  }

  .service-card__title {
    font-size: 1.5rem;           /* 24px */
    line-height: 1.875rem;       /* 30px */
  }

  .service-card__text {
    font-size: 1.375rem;         /* 22px */
    line-height: 1.75rem;        /* 28px */
  }

  .enquiry {
    min-height: 7rem;            /* 112px */
    padding: 20px 48px;
  }

  .enquiry__icon {
    width: 4rem;                 /* 64px */
    height: 4rem;
    margin-right: 2.5rem;        /* 40px */
  }

  .enquiry__divider {
    height: 4rem;
    margin-right: 4rem;          /* 64px */
  }

  .enquiry__title {
    font-size: 2rem;             /* 32px */
    line-height: 2.375rem;       /* 38px */
  }

  .enquiry__text {
    font-size: 1.5rem;           /* 24px */
    line-height: 2rem;           /* 32px */
  }
}

/* Dark button variant
   ========================================================================== */
.btn--dark {
  background: var(--color-charcoal);
  color: var(--color-white);
}

.btn--dark:hover {
  background: var(--color-charcoal-hover);
}

/* About AJ — mobile first (photo, then text)
   ========================================================================== */
.about {
  padding-block: 1.75rem 2rem;   /* 28px / 32px */
  background: var(--color-bg);
}

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 1.5rem;               /* 24px */
}

.about__media img {
  display: block;
  width: 100%;
  height: auto;                  /* native 435:207 */
}

.about__content {
  display: flex;
  flex-direction: column;        /* children stretch to the column so long words can wrap */
  min-width: 0;
}

.about__eyebrow {
  margin: 0 0 0.25rem;
  color: var(--color-brand);
  font-size: 0.875rem;           /* 14px */
  font-weight: 700;
  line-height: 1.375rem;
  text-transform: uppercase;
}

.about__title {
  margin: 0 0 0.75rem;           /* 12px */
  font-size: 2rem;               /* 32px */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}

.about__text {
  max-width: 45rem;              /* 720px */
  margin: 0 0 1rem;
  font-size: 1.125rem;           /* 18px */
  line-height: 1.6875rem;        /* 27px */
}

.about__list {
  display: grid;
  row-gap: 0.25rem;              /* 4px */
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.125rem;
  line-height: 1.6875rem;
}

.about__list li {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  overflow-wrap: anywhere;       /* long words can break at large text sizes */
  hyphens: auto;
}

/* Decorative orange rule (CSS-only, ignored by assistive tech) */
.about__list li::before {
  content: "";
  flex-shrink: 0;
  width: 28px;
  height: 2px;
  background: var(--color-brand);
}

.about__cta {
  align-self: stretch;           /* full width on mobile */
  gap: 1rem;                     /* label ↔ arrow: 16px */
  min-height: 3.5rem;            /* 56px */
  margin-top: 1.25rem;           /* 20px */
  padding: 0 20px;
  font-size: 1rem;
  line-height: 1.5rem;
}

.about__cta-icon {
  flex-shrink: 0;
  width: 1.375rem;               /* ~22px */
  height: 1.375rem;
}

@media (min-width: 37.5em) {     /* 600–1099px */
  .about {
    padding-block: 2rem;
  }

  .about__grid {
    row-gap: 1.75rem;            /* 28px */
  }

  .about__eyebrow {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .about__title {
    font-size: 2.25rem;          /* 36px */
    line-height: 1.12;
  }

  .about__text,
  .about__list {
    font-size: 1.25rem;          /* 20px */
    line-height: 1.75rem;        /* 28px */
  }

  .about__list li {
    gap: 24px;
  }

  .about__list li::before {
    width: 40px;
  }

  .about__cta {
    align-self: flex-start;      /* content width */
    padding: 0 1.5rem;
    font-size: 1.125rem;
    line-height: 1.625rem;
  }
}

@media (min-width: 68.75em) {    /* 1100px and up: photo | text */
  .about {
    padding-block: 1.75rem 2rem;
  }

  .about__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 4rem;            /* 64px */
    align-items: start;
  }

  .about__eyebrow {
    font-size: 1.125rem;
    line-height: 1.625rem;
  }

  .about__title {
    font-size: clamp(2.25rem, 2.1875vw, 2.625rem);   /* 36–42px */
    line-height: 1.1;
    letter-spacing: -0.025em;
  }

  /* Preferred break after "outside."; lines still wrap if they don't fit */
  .about__title-line {
    display: block;
  }

  .about__text,
  .about__list {
    font-size: 1.375rem;         /* 22px */
    line-height: 1.75rem;        /* 28px */
  }
}

/* Contact band — mobile first
   ========================================================================== */
.contact-band {
  padding-block: 1.75rem;        /* 28px */
  background: var(--color-brand);
  color: var(--color-white);
}

.contact-band :focus-visible {
  outline-color: var(--color-white);
}

.contact-band__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.25rem;                  /* 20px */
}

.contact-band__copy {
  min-width: 0;
}

.contact-band__title {
  margin: 0 0 0.25rem;
  font-size: 1.75rem;            /* 28px */
  font-weight: 700;
  line-height: 2.125rem;         /* 34px */
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}

.contact-band__text {
  margin: 0;
  font-size: 1.125rem;           /* 18px */
  line-height: 1.6875rem;        /* 27px */
}

/* Email + phone buttons: stacked on mobile, side by side from 600px */
.contact-band__action {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;                  /* 12px */
  min-width: 0;
}

/* Secondary button on the orange band */
.btn--outline-light {
  border: 2px solid var(--color-white);
  background: transparent;
  color: var(--color-white);
}

.btn--outline-light:hover {
  background: var(--color-white);
  color: var(--color-charcoal);
}

.contact-band__cta {
  width: 100%;
  gap: 1rem;                     /* label ↔ arrow: 16px */
  min-height: 3.5rem;            /* 56px */
  padding: 0 1.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

.contact-band__cta-icon {
  flex-shrink: 0;
  width: 1.375rem;               /* ~22px */
  height: 1.375rem;
}


@media (min-width: 37.5em) {     /* 600–1099px: stacked, left-aligned */
  .contact-band__inner {
    align-items: flex-start;
  }

  .contact-band__title {
    font-size: 2rem;             /* 32px */
    line-height: 2.375rem;       /* 38px */
  }

  .contact-band__text {
    font-size: 1.25rem;          /* 20px */
    line-height: 1.75rem;        /* 28px */
  }

  .contact-band__action {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;                   /* 16px */
  }

  .contact-band__cta {
    width: auto;
    font-size: 1.125rem;
    line-height: 1.625rem;
  }
}

@media (min-width: 68.75em) {    /* 1100px and up: text | button */
  .contact-band {
    padding-block: 1.5rem;       /* 24px */
  }

  .contact-band__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;                   /* 48px */
    min-height: 4.25rem;         /* 116px total with padding */
  }

  .contact-band__title {
    font-size: 2.5rem;           /* 40px */
    line-height: 2.875rem;       /* 46px */
  }

  .contact-band__text {
    font-size: 1.5rem;           /* 24px */
    line-height: 2rem;           /* 32px */
  }

  .contact-band__action {
    flex-shrink: 0;
    justify-content: flex-end;   /* buttons stay flush right */
  }

  .contact-band__cta {
    min-width: 14.25rem;         /* 228px */
    min-height: 4rem;            /* 64px */
  }
}

/* Footer — mobile first (blocks stacked)
   ========================================================================== */
.site-footer {
  padding-block: 1.75rem;        /* 28px */
  background: var(--color-charcoal);
  color: var(--color-white);
}

.site-footer :focus-visible {
  outline-color: var(--color-white);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;                   /* 24px */
  align-items: start;
}

.site-footer__name {
  margin: 0;
  font-size: 1.375rem;           /* 22px */
  font-weight: 700;
  line-height: 1.875rem;         /* 30px */
  overflow-wrap: break-word;
}

.site-footer__tagline {
  max-width: 27.5rem;            /* 440px */
  margin: 0.375rem 0 0;          /* 6px */
  color: var(--color-text-muted-dark);
  font-size: 1rem;
  line-height: 1.5rem;
}

/* Facebook link under the tagline */
.site-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;                   /* touch target */
  height: 44px;
  margin: 0.75rem 0 0 -8px;      /* icon edge lines up with the text */
  border-radius: var(--radius-sm);
  color: var(--color-white);
  transition: color 150ms ease;
}

.site-footer__social:hover {
  color: var(--color-brand);
}

.site-footer__social svg {
  display: block;
  width: 28px;
  height: 28px;
}

.site-footer__col {
  min-width: 0;
}

.site-footer__title {
  margin: 0 0 0.5rem;            /* 8px */
  font-size: 1.125rem;           /* 18px */
  font-weight: 600;
  line-height: 1.625rem;         /* 26px */
}

.site-footer__links,
.site-footer__services {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1rem;
  line-height: 1.5rem;
  overflow-wrap: break-word;
}

.site-footer__links a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;           /* 44px touch target */
  color: var(--color-white);
  text-decoration: none;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible,
.site-footer__top:hover,
.site-footer__top:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.site-footer__services {
  display: grid;
  row-gap: 2px;
  color: var(--color-text-muted-dark);
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;                  /* 12px */
  margin-top: 1.5rem;            /* 24px above divider */
  padding-top: 1rem;             /* 16px below divider */
  border-top: 1px solid var(--color-divider-dark);
}

.site-footer__copy,
.site-footer__note {
  margin: 0;
  color: var(--color-text-muted-dark);
  font-size: 0.875rem;           /* 14px */
  line-height: 1.375rem;         /* 22px */
}

.site-footer__top {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;                   /* 8px */
  min-height: 2.75rem;           /* 44px */
  color: var(--color-white);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.375rem;
  text-decoration: none;
}

.site-footer__top-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

@media (min-width: 37.5em) {     /* 600–1099px */
  .site-footer {
    padding-block: 2rem;
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: 1.5rem;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }

  .site-footer__name {
    font-size: 1.5rem;           /* 24px */
    line-height: 2rem;
  }

  .site-footer__bottom {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 2rem;
    row-gap: 1rem;
  }

  .site-footer__copy {
    flex-basis: 100%;
  }

  .site-footer__top {
    margin-left: auto;
  }
}

@media (min-width: 68.75em) {    /* 1100px and up */
  .site-footer {
    padding-block: 2rem 1.5rem;  /* 32px / 24px */
  }

  .site-footer__grid {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 0.9fr) minmax(0, 1fr);
    gap: 4rem;                   /* 64px */
  }

  .site-footer__brand {
    grid-column: auto;
  }

  .site-footer__links a {
    min-height: 2rem;            /* 32px on desktop */
  }

  .site-footer__copy {
    flex-basis: auto;
  }

  .site-footer__note {
    margin-left: auto;
  }

  .site-footer__top {
    margin-left: 0;
  }
}

/* Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}