/* InFlow Mechanical — main stylesheet
   One light theme: warm white page, charcoal header/footer, green reserved for actions.
   Every colour, type size and spacing value is a token in :root. No hex values below it.
   Structure follows the design assessment: static hero, problem-led service rows,
   real work, human introduction, reviews, process, commercial, area + FAQ, final call. */

/* ---------- Fonts: self-hosted, SIL Open Font License (licences in /fonts) ---------- */

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/barlow-600.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/barlow-700.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/barlow-800.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/inter-variable.woff2") format("woff2");
}

/* ---------- Tokens ---------- */

:root {
  /* Brand: charcoal, warm white, green as a controlled accent */
  --color-charcoal: #24262a;
  --color-charcoal-deep: #191b1e;
  --color-warm-white: #f7f5f1;
  --color-white: #ffffff;
  --color-brand: #2e8f05;        /* logo green: rules and marks only */
  --color-brand-strong: #2a8404; /* actions and green text: 4.8:1 on white */
  --color-brand-deep: #1f6303;   /* hover */

  /* Neutrals */
  --color-ink: #1d1f22;
  --color-ink-muted: #56585c;
  --color-line: #ddd9d1;
  --color-line-dark: #3a3d42;
  --color-on-dark: #ffffff;
  --color-on-dark-muted: #bcbec2;
  --color-focus: #2e8f05;

  /* Overlays */
  --shade-soft: rgb(20 22 25 / 0.35);
  --shade-mid: rgb(20 22 25 / 0.62);
  --shade-strong: rgb(20 22 25 / 0.84);
  --mark-on-dark: rgb(46 143 5 / 0.85); /* brand green, softened for marks over photography */
  --line-on-dark: rgb(255 255 255 / 0.45);

  /* Type */
  --font-display: "Barlow", "Arial Narrow", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --text-sm: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --text-xl: clamp(1.3125rem, 1.15rem + 0.7vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);
  --text-3xl: clamp(2rem, 1.5rem + 2.6vw, 3.5rem);

  /* Space, shape, layout */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: clamp(3.25rem, 2.2rem + 4.2vw, 5.5rem);
  --radius: 2px;
  --container: 120rem;  /* one width for the whole page, chrome and sections alike */
  --container-wide: 120rem;
  --measure: 46rem;     /* readable line length for any full-width paragraph */
  --gutter: clamp(1rem, 0.6rem + 1.8vw, 2rem);
  --header-height: 4rem;
  --call-bar-height: 3.75rem;

  /* Motion. One easing curve and three durations for the whole site, so every
     hover, press and reveal moves with the same hand. See the motion layer at
     the end of this file. */
  --ease-out: cubic-bezier(0.2, 0.75, 0.3, 1);
  --motion-fast: 110ms;
  --motion: 200ms;
  --motion-slow: 340ms;

  /* Brand green as raw channels, so alpha can be varied without a second hex. */
  --brand-rgb: 46 143 5;
  --ink-rgb: 20 22 25;
  --lift-shadow: 0 8px 20px -8px rgb(var(--ink-rgb) / 0.2);
  --lift-shadow-strong: 0 14px 32px -10px rgb(var(--ink-rgb) / 0.28);
  --ring-brand: 0 0 0 3px rgb(var(--brand-rgb) / 0.16);

  /* Select caret, drawn so it can be recoloured and slid on hover. */
  --caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2356585c' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --caret-brand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%232a8404' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + var(--space-md));
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-ink);
  background: var(--color-white);
}

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

img {
  height: auto;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  text-wrap: balance;
}

p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  padding: 0;
}

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

a:hover {
  color: var(--color-brand-deep);
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip-link {
  position: absolute;
  top: -10rem;
  left: var(--space-md);
  z-index: 100;
  padding: var(--space-xs) var(--space-md);
  font-weight: 600;
  color: var(--color-ink);
  background: var(--color-white);
}

.skip-link:focus {
  top: var(--space-md);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Layout width, settled 2026-10-30.

   It used to be 72rem everywhere. On a 1536px viewport that left a 184px gap down
   both sides while the header bar ran full width behind it, so the page looked
   half-finished. Widening only the header made it worse: the chrome reached the
   edge and nothing else did.

   So: one width for the whole page. Sections, header and footer all share
   --container, capped at 120rem so an ultrawide monitor does not spread a 6-column
   footer across two feet of glass.

   The readability problem that 72rem was solving is real, but it is a *text*
   problem, not a layout problem, so it is solved on the text instead — any
   paragraph that would otherwise run the full width is capped at --measure. */
.site-header__inner,
.site-footer .container {
  max-width: var(--container-wide);
}

/* Full-width paragraphs that would otherwise run to 1400px+ */
.alarm__text,
.logo-note,
.track-note,
.urgent-note p,
.faq__answer,
.section-intro,
.plan-section__note,
.calc-table__intro,
.calc-promo__note,
.method-list li,
.section > .container > p {
  max-width: var(--measure);
}

/* With the wider page the FAQ has room for two columns, which uses the space
   instead of leaving a long ragged column of text beside empty white. */
@media (min-width: 62rem) {
  .faq {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-2xl);
  }
}

.section {
  padding-block: var(--space-3xl);
}

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

.section-title {
  font-size: var(--text-2xl);
  max-width: 24ch;
}

.section-intro {
  margin-top: var(--space-sm);
  font-size: var(--text-lg);
  max-width: 52ch;
  color: var(--color-ink-muted);
}

/* ---------- Actions ---------- */

.call-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 3.25rem;
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-white);
  background: var(--color-brand-strong);
  border: 2px solid var(--color-brand-strong);
  border-radius: var(--radius);
}

.call-button:hover {
  color: var(--color-white);
  background: var(--color-brand-deep);
  border-color: var(--color-brand-deep);
}

.call-button__icon {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;
}

.call-button--header {
  min-height: 2.5rem;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-base);
}

.call-button__number {
  display: none;
}

/* Secondary action: the online request, deliberately quieter than the phone */
.request-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  color: var(--color-ink);
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.request-button:hover {
  color: var(--color-ink);
  border-color: var(--color-ink-muted);
}

.request-button--on-dark {
  color: var(--color-on-dark);
  border-color: var(--line-on-dark);
}

.request-button--on-dark:hover {
  color: var(--color-on-dark);
  border-color: var(--color-on-dark);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  align-items: center;
}

/* A short, specific prompt next to each service */
.call-prompt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-weight: 600;
  color: var(--color-brand-strong);
  text-decoration: none;
}

.call-prompt:hover {
  color: var(--color-brand-deep);
  text-decoration: underline;
}

/* Button transitions are set once in the motion layer at the end of this file. */

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  color: var(--color-on-dark);
  background: var(--color-charcoal);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--header-height);
}

.site-header__logo {
  flex: none;
  margin-right: auto;
}

.site-header__logo img {
  width: auto;
  height: 2.25rem;
}

.site-nav {
  display: none;
}

.site-header[data-menu-open] .site-nav {
  position: absolute;
  inset: 100% 0 auto;
  display: block;
  background: var(--color-charcoal);
  border-bottom: 1px solid var(--color-line-dark);
}

.site-nav__list {
  display: grid;
  list-style: none;
  padding: var(--space-xs) var(--gutter) var(--space-lg);
}

.site-nav__list a {
  display: block;
  padding-block: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-on-dark);
  border-bottom: 1px solid var(--color-line-dark);
}

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

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 var(--space-sm);
  font: 600 var(--text-base) / 1 var(--font-display);
  text-decoration: none;
  color: var(--color-on-dark);
  background: transparent;
  border: 1px solid var(--color-line-dark);
  border-radius: var(--radius);
  cursor: pointer;
}

.menu-toggle:hover {
  color: var(--color-on-dark);
  border-color: var(--color-on-dark-muted);
}

.menu-toggle[aria-expanded="true"] {
  border-color: var(--color-brand);
}

@media (min-width: 30rem) {
  .call-button__short {
    display: none;
  }

  .call-button__number {
    display: inline;
  }
}

@media (min-width: 62rem) {
  .site-header__inner {
    gap: var(--space-lg);
  }

  .site-header__logo {
    margin-right: 0;
  }

  .site-nav,
  .site-header[data-menu-open] .site-nav {
    position: static;
    display: block;
    margin-inline: auto;
    background: none;
    border: 0;
  }

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

  .site-nav__list a {
    padding-block: var(--space-xs);
    font-size: var(--text-base);
    border: 0;
  }

  .menu-toggle {
    display: none;
  }
}

/* ---------- Hero: one static photograph of real work ---------- */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: 24rem;
  padding-block: var(--space-2xl) var(--space-xl);
  overflow: hidden;
  color: var(--color-on-dark);
  background: var(--color-charcoal-deep);
}

.hero__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--shade-soft) 0%, var(--shade-strong) 72%);
}

.hero__content {
  display: grid;
  justify-items: start;
  gap: var(--space-md);
}

.hero__title {
  max-width: 20ch;
  font-size: var(--text-3xl);
  font-weight: 800;
}

.hero__lede {
  max-width: 44ch;
  font-size: var(--text-lg);
}

.hero .actions {
  margin-top: var(--space-2xs);
}

@media (min-width: 48rem) {
  .hero {
    align-items: center;
    min-height: min(34rem, 72svh);
    padding-block: var(--space-3xl);
  }

  .hero__shade {
    background: linear-gradient(90deg, var(--shade-strong) 0%, var(--shade-mid) 58%, var(--shade-soft) 100%);
  }
}

/* ---------- Trust strip: verified credentials only ---------- */

.trust-strip {
  padding-block: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  background: var(--color-warm-white);
  border-bottom: 1px solid var(--color-line);
}

.trust-strip__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  list-style: none;
}

.trust-strip__list li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.trust-strip__list li::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-brand);
}

/* ---------- Services: problem-led rows, not a card grid ---------- */

.service-list {
  display: grid;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
  list-style: none;
}

.service-row {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: var(--space-md);
  align-items: start;
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-line);
}

.service-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.service-row__image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
}

.service-row__body {
  display: grid;
  gap: var(--space-xs);
}

.service-row__problem {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
}

.service-row__title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-brand-strong);
  order: -1;
}

.service-row__text {
  color: var(--color-ink-muted);
}

.service-row__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  margin-top: var(--space-2xs);
}

@media (min-width: 48rem) {
  .service-row {
    grid-template-columns: 12rem 1fr;
    gap: var(--space-xl);
  }

  .service-row__image {
    aspect-ratio: 4 / 3;
  }
}

/* ---------- Recent work ---------- */

.work-grid {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  list-style: none;
}

.work-item {
  display: grid;
  gap: var(--space-sm);
}

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

.work-item__title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
}

.work-item__text {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

@media (min-width: 48rem) {
  .work-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Human introduction ---------- */

.team {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.team__figure {
  margin: 0;
}

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

.team__figure figcaption {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.team__body {
  display: grid;
  gap: var(--space-md);
}

.team__body p {
  max-width: 56ch;
  color: var(--color-ink-muted);
}

.team__body p:first-of-type {
  font-size: var(--text-lg);
  color: var(--color-ink);
}

@media (min-width: 48rem) {
  .team {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-2xl);
  }
}

/* ---------- Reviews ---------- */

.reviews {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  list-style: none;
}

.review {
  display: grid;
  gap: var(--space-sm);
  padding-left: var(--space-lg);
  border-left: 3px solid var(--color-brand);
}

.review__quote {
  font-size: var(--text-lg);
}

.review__author {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.review__author strong {
  color: var(--color-ink);
}

.reviews-source {
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

@media (min-width: 48rem) {
  .reviews {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl);
  }
}

/* ---------- What happens next ---------- */

.steps {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  list-style: none;
  counter-reset: step;
}

.step {
  display: grid;
  gap: var(--space-2xs);
  padding-top: var(--space-md);
  border-top: 2px solid var(--color-brand);
  counter-increment: step;
}

.step__title {
  font-size: var(--text-lg);
}

.step__title::before {
  content: counter(step) ". ";
  color: var(--color-brand-strong);
}

.step p {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.urgent-note {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background: var(--color-warm-white);
  border-left: 3px solid var(--color-brand);
}

.urgent-note h2,
.urgent-note h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2xs);
}

.urgent-note p {
  color: var(--color-ink-muted);
}

/* ---------- Contact page ---------- */

.contact-lead {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}

.contact-lead .actions {
  margin-top: var(--space-lg);
}

.contact-lead .urgent-note {
  margin-top: 0;
}

.contact-hours {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.contact-grid {
  display: grid;
  gap: var(--space-xl);
}

.contact-grid .actions {
  margin-top: var(--space-lg);
}

.contact-subhead {
  margin-bottom: var(--space-sm);
  font-size: var(--text-lg);
}

.contact-list {
  display: grid;
  gap: var(--space-xs);
  list-style: none;
}

.contact-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  color: var(--color-ink-muted);
}

.contact-list li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.6em;
  background: var(--color-brand);
}

.contact-details {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.contact-details dt {
  margin-bottom: var(--space-2xs);
  font-family: var(--font-display);
  font-weight: 700;
}

.contact-details dd {
  color: var(--color-ink-muted);
}

.contact-details .contact-details__phone {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  text-decoration: none;
  color: var(--color-brand-strong);
}

@media (min-width: 40rem) {
  .contact-details {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }
}

@media (min-width: 48rem) {
  .contact-lead,
  .contact-grid {
    grid-template-columns: 3fr 2fr;
    gap: var(--space-2xl);
  }
}

@media (min-width: 62rem) {
  .contact-details {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 48rem) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- Commercial and strata ---------- */

.commercial {
  color: var(--color-on-dark);
  background: var(--color-charcoal);
}

.commercial__inner {
  display: grid;
  gap: var(--space-xl);
}

.commercial .section-intro {
  color: var(--color-on-dark-muted);
}

.commercial__list {
  display: grid;
  gap: var(--space-sm);
  list-style: none;
}

.commercial__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  color: var(--color-on-dark-muted);
}

.commercial__list li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.6em;
  background: var(--color-brand);
}

.plan-note {
  padding-top: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-on-dark-muted);
  border-top: 1px solid var(--color-line-dark);
}

@media (min-width: 48rem) {
  .commercial__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }
}

/* ---------- Service area and FAQ ---------- */

.area-faq {
  display: grid;
  gap: var(--space-2xl);
}

.area__core {
  font-size: var(--text-lg);
}

.area__wider {
  margin-top: var(--space-xs);
  color: var(--color-ink-muted);
}

.faq {
  display: grid;
  gap: var(--space-lg);
}

.faq__item {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-line);
}

.faq__question {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2xs);
}

.faq__answer {
  color: var(--color-ink-muted);
}

@media (min-width: 48rem) {
  .area-faq {
    grid-template-columns: 2fr 3fr;
  }
}

/* ---------- Final call ---------- */

.final-call {
  padding-block: var(--space-3xl);
  color: var(--color-on-dark);
  background: var(--color-charcoal-deep);
}

.final-call__title {
  font-size: var(--text-2xl);
  max-width: 20ch;
}

.final-call__text {
  margin-top: var(--space-sm);
  max-width: 48ch;
  color: var(--color-on-dark-muted);
}

.final-call .actions {
  margin-top: var(--space-lg);
}

/* ---------- Footer ---------- */

.site-footer {
  padding-block: var(--space-2xl) calc(var(--space-lg) + var(--call-bar-height) + env(safe-area-inset-bottom, 0px));
  font-size: var(--text-sm);
  color: var(--color-on-dark-muted);
  background: var(--color-charcoal-deep);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-xl);
}

.site-footer__brand img {
  width: auto;
  height: 2.75rem;
  margin-bottom: var(--space-md);
}

.site-footer__brand p {
  max-width: 26rem;
}

.site-footer__heading {
  margin-bottom: var(--space-sm);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-on-dark);
}

.site-footer ul {
  display: grid;
  gap: var(--space-xs);
  list-style: none;
}

.site-footer a {
  text-decoration: none;
  color: var(--color-on-dark-muted);
}

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

.site-footer .site-footer__phone {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-on-dark);
}

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-lg);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-line-dark);
}

@media (min-width: 40rem) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62rem) {
  .site-footer__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Six columns once the container is at full width: brand, then the five link
   groups. Below this they fall to three and then two, which keeps the longer
   labels ("Grocery & food retail") on one line. */
@media (min-width: 75rem) {
  .site-footer__grid {
    gap: var(--space-xl) var(--space-lg);
    grid-template-columns: 1.5fr repeat(5, 1fr);
  }
}

/* ---------- Mobile bar: call first, request second ---------- */

.call-bar {
  position: fixed;
  inset: auto 0 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 1px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--color-line-dark);
}

.call-bar__call,
.call-bar__request {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: var(--call-bar-height);
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
}

.call-bar__call {
  font-size: var(--text-lg);
  color: var(--color-white);
  background: var(--color-brand-strong);
}

.call-bar__call:hover {
  color: var(--color-white);
  background: var(--color-brand-deep);
}

.call-bar__request {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-on-dark);
  background: var(--color-charcoal);
}

.call-bar__request:hover {
  color: var(--color-on-dark);
}

.call-bar__icon {
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;
}

@media (min-width: 48rem) {
  .site-footer {
    padding-bottom: var(--space-lg);
  }

  .call-bar {
    display: none;
  }
}

/* ---------- Interior page hero ---------- */

.page-hero {
  padding-block: var(--space-2xl);
  color: var(--color-on-dark);
  background: var(--color-charcoal);
}

.page-hero__title {
  max-width: 22ch;
  font-size: var(--text-2xl);
}

.page-hero__lede {
  max-width: 58ch;
  margin-top: var(--space-sm);
  font-size: var(--text-lg);
  color: var(--color-on-dark-muted);
}

.page-hero .actions {
  margin-top: var(--space-lg);
}

.breadcrumb {
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-on-dark-muted);
}

/* A breadcrumb is an ordered trail, so it is an ol inside a nav landmark.
   The separator is decorative and lives in CSS, not in the text. */
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb__list li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.breadcrumb__list li + li::before {
  content: "\00b7";
  color: var(--line-on-dark);
}

.breadcrumb a {
  color: var(--color-on-dark-muted);
}

.breadcrumb a:hover {
  color: var(--color-on-dark);
}

.breadcrumb [aria-current="page"] {
  color: var(--color-on-dark);
}

/* ---------- Membership plans ---------- */

.plan-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  margin-top: var(--space-lg);
  font-weight: 600;
  list-style: none;
}

.plan-section {
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--color-line);
}

.plan-section__note {
  margin-top: var(--space-2xs);
  color: var(--color-ink-muted);
}

.plan-grid {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  list-style: none;
}

.plan {
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--color-warm-white);
  border-top: 3px solid var(--color-brand);
}

.plan__name {
  font-size: var(--text-lg);
}

.plan__price {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1;
}

.plan__price span {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink-muted);
}

.plan__annual {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.plan__features {
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  list-style: none;
}

.plan__features li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs);
}

.plan__features li::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.55em;
  background: var(--color-brand);
}

@media (min-width: 48rem) {
  .plan-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Service detail ---------- */

.included {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  list-style: none;
}

.included li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-line);
}

.included li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.55em;
  background: var(--color-brand);
}

.included__group {
  margin-top: var(--space-2xl);
}

.included__group h3 {
  font-size: var(--text-lg);
}

.job-example {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

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

.job-example__body h2 {
  margin-bottom: var(--space-sm);
  font-size: var(--text-xl);
}

.job-example__body p {
  color: var(--color-ink-muted);
}

@media (min-width: 40rem) {
  .included {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm) var(--space-2xl);
  }
}

@media (min-width: 48rem) {
  .job-example {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }
}

/* ---------- Symptom-led service cards ---------- */

.symptoms {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  padding: 0;
  list-style: none;
}

.symptom {
  padding: var(--space-lg);
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-brand);
  border-radius: var(--radius);
  background: var(--color-white);
}

.symptom__title {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.25;
}

.symptom p {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

/* ---------- Two column content block ---------- */

.two-col {
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
}

/* ---------- Calculator promo ---------- */

.calc-promo {
  padding: var(--space-xl);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-warm-white);
}

.calc-promo__title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1.15;
}

.calc-promo p {
  color: var(--color-ink-muted);
}

.calc-promo__link {
  display: inline-block;
  margin-top: var(--space-2xs);
  font-weight: 600;
  color: var(--color-brand-strong);
}

.calc-promo__link:hover {
  color: var(--color-brand-deep);
}

.calc-promo__note {
  margin-bottom: 0;
  font-size: var(--text-sm);
}

@media (min-width: 40rem) {
  .symptoms {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62rem) {
  .symptoms {
    grid-template-columns: repeat(4, 1fr);
  }

  .two-col {
    grid-template-columns: 3fr 2fr;
  }
}

/* ---------- Estimator tools ---------- */

.calc {
  display: grid;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
  align-items: start;
}

.calc__form {
  display: grid;
  gap: var(--space-lg);
}

.calc__field {
  display: grid;
  gap: var(--space-2xs);
}

.calc__field label {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
}

.calc__field select {
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-ink);
  font-family: inherit;
  font-size: var(--text-base);
}

.calc__field select:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 1px;
}

.calc__result {
  display: block;
  padding: var(--space-xl);
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-brand);
  border-radius: var(--radius);
  background: var(--color-warm-white);
}

.calc__figure {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-brand-strong);
}

.calc__figure span {
  font-size: var(--text-lg);
  color: var(--color-ink);
}

.calc__caption {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

.calc-table {
  margin-top: var(--space-xl);
}

.calc-table__title {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

.calc-table__intro {
  margin-top: 0;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

.calc-table__scroll {
  overflow-x: auto;
}

.calc-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.calc-table caption {
  margin-bottom: var(--space-sm);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  text-align: left;
}

.calc-table th,
.calc-table td {
  padding: var(--space-sm);
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  white-space: nowrap;
}

.calc-table thead th {
  font-family: var(--font-display);
  border-bottom: 2px solid var(--color-line);
}

.calc-table tbody th {
  font-weight: 600;
}

.calc-table__details {
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-line);
}

.calc-table__details summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-brand-strong);
}

.calc-table__details summary:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.calc-table__details .calc-table {
  margin-top: var(--space-lg);
}

.method-list {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding: 0;
  list-style: none;
}

.method-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-line);
  color: var(--color-ink-muted);
}

.method-list li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.55em;
  background: var(--color-brand);
}

.method-list strong {
  color: var(--color-ink);
}

@media (min-width: 48rem) {
  .calc {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }
}

/* ---------- Tool grid ---------- */

.tool-grid {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

@media (min-width: 48rem) {
  .tool-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Homepage two-track split ---------- */

.track-grid {
  display: grid;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

.track {
  display: grid;
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-brand);
  border-radius: var(--radius);
  background: var(--color-white);
  overflow: hidden;
}

.track__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.track__body {
  padding: var(--space-xl);
}

.track__eyebrow {
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-brand-strong);
}

.track__title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1.15;
}

.track__body > p {
  color: var(--color-ink-muted);
}

.track__list {
  display: grid;
  gap: var(--space-xs);
  margin: var(--space-lg) 0;
  padding: 0;
  list-style: none;
}

.track__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.track__list li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.5em;
  background: var(--color-brand);
}

.track__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  align-items: center;
  margin: 0;
}

.track-note {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-line);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

@media (min-width: 48rem) {
  .track-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .track {
    align-content: start;
  }
}

/* ---------- Long-form reading measure ---------- */

.prose {
  max-width: 44rem;
}

.prose p {
  color: var(--color-ink-muted);
}

.prose p strong {
  color: var(--color-ink);
}

.prose .section-title + p {
  margin-top: var(--space-md);
}

/* Secondary figure in a comparison result */
.calc__figure--muted {
  color: var(--color-ink);
  opacity: 0.75;
}

.calc__result .calc__caption + .calc__figure {
  margin-top: 0;
}

.calc__result .calc__figure + .calc__caption {
  margin-top: var(--space-lg);
}

/* Zone list inside the planner result */
.zone-list {
  display: grid;
  gap: var(--space-xs);
  margin: var(--space-lg) 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.zone-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-line);
}

.zone-list li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.5em;
  background: var(--color-brand);
}

.zone-list strong {
  color: var(--color-ink);
}

/* Four-across variant of the tool grid */
@media (min-width: 48rem) {
  .tool-grid--four {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62rem) {
  .tool-grid--four {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* Linked symptom-card headings (audience cards) */
.symptom__title a {
  color: inherit;
  text-decoration-color: var(--color-brand);
  text-underline-offset: 0.18em;
}

.symptom__title a:hover {
  color: var(--color-brand-strong);
}

/* ============================================================
   Energy layer — added 2026-10-26.
   The site read correct but cold. These are the pieces that give
   it urgency and movement without inventing a single claim.
   ============================================================ */

/* ---------- Emergency band: the loudest thing on the page ---------- */

.alarm {
  background: var(--color-brand-deep);
  color: var(--color-on-dark);
  padding-block: var(--space-xl);
}

.alarm__inner {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

.alarm__eyebrow {
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.alarm__title {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1.05;
}

.alarm__text {
  margin: 0;
  font-size: var(--text-base);
}

.alarm__call {
  display: inline-flex;
  gap: var(--space-sm);
  align-items: center;
  justify-self: start;
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-brand-deep);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.alarm__call:hover {
  background: var(--color-warm-white);
}

.alarm__call svg {
  width: 1.1em;
  height: 1.1em;
  fill: currentColor;
}

@media (min-width: 48rem) {
  .alarm__inner {
    grid-template-columns: 1fr auto;
    gap: var(--space-2xl);
  }
}

/* ---------- Facts strip: only claims that are verifiable ---------- */

.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.facts li {
  display: grid;
  gap: var(--space-2xs);
  padding-left: var(--space-md);
  border-left: 3px solid var(--color-brand);
}

.facts strong {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1;
}

.facts span {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

@media (min-width: 48rem) {
  .facts {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- Marked words in headings ---------- */

.mark {
  box-shadow: inset 0 -0.34em 0 var(--color-brand);
}

.hero .mark,
.alarm .mark {
  box-shadow: inset 0 -0.3em 0 var(--mark-on-dark);
}

/* ---------- Cards that respond ---------- */
/* The hover lift and the cursor-tracking tint now live in the motion layer at the
   end of this file, so every interactive surface moves the same way. The border
   colour change stays here because it is not motion: it must still happen for
   someone who has asked the operating system to reduce animation. */

.calc-promo:hover,
.symptom:hover {
  border-color: var(--color-brand);
}

/* ---------- Hero, with more weight ---------- */

.hero__title {
  letter-spacing: -0.015em;
}

.hero__kicker {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-on-dark);
}

.hero__kicker span {
  box-shadow: inset 0 -0.28em 0 var(--color-brand);
}

/* ---------- Project case studies ---------- */

.cases {
  display: grid;
  gap: var(--space-2xl);
  margin-top: var(--space-xl);
}

.case {
  display: grid;
  gap: var(--space-lg);
  align-items: start;
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--color-line);
}

.case:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

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

.case__meta {
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-brand-strong);
}

.case__title {
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1.15;
}

.case__scope {
  margin: 0 0 var(--space-lg);
  font-weight: 600;
  color: var(--color-ink-muted);
}

.case__detail {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
}

.case__detail dt {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.case__detail dd {
  margin: 0 0 var(--space-md);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

.case__detail dd:last-child {
  margin-bottom: 0;
}

@media (min-width: 62rem) {
  .case {
    grid-template-columns: 5fr 6fr;
    gap: var(--space-2xl);
  }
}

/* ---------- Logo walls: brands we install, customers we serve ---------- */

.logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  align-items: center;
  margin: var(--space-xl) 0 0;
  padding: 0;
  list-style: none;
}

.logos li {
  display: grid;
  place-items: center;
  padding: var(--space-md);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  min-height: 5.5rem;
}

.logos img {
  width: auto;
  max-width: 100%;
  max-height: 3.25rem;
  object-fit: contain;
}

.logos--tight li {
  min-height: 4.75rem;
  padding: var(--space-sm);
}

.logos--tight img {
  max-height: 2.75rem;
}

.logo-note {
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

@media (min-width: 40rem) {
  .logos { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 48rem) {
  .logos { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 62rem) {
  .logos { grid-template-columns: repeat(6, 1fr); }
  .logos--wide { grid-template-columns: repeat(8, 1fr); }
}


/* ============================================================
   Motion layer — added 2026-10-29.

   Everything interactive on this site now answers the pointer. Before this the
   whole stylesheet held two transitions, which is why the site read as correct
   but dead.

   Three rules govern this layer:

   1. Motion is an enhancement. Anything that moves sits inside
      @media (prefers-reduced-motion: no-preference). Colour and border feedback
      sits outside it, so someone who has turned animation off in their operating
      system still sees clearly what is hoverable.
   2. Lifts and the cursor-tracking tint are also gated on (hover: hover) and
      (pointer: fine). On a touch screen :hover sticks after a tap, which would
      leave a card raised until you tapped something else.
   3. One curve, three durations, defined as tokens in :root. Nothing in here
      invents its own timing.

   The pointer-tracked tint needs js/main.js to set --px and --py, and the
   selector only matches once that script has added data-glow. With JavaScript
   off, every hover state below still works; only the tint is absent.
   ============================================================ */

/* ---------- 1. What transitions, and on what ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* Buttons and other solid actions */
  .call-button,
  .request-button,
  .alarm__call,
  .menu-toggle,
  .call-bar__call,
  .call-bar__request {
    transition:
      transform var(--motion) var(--ease-out),
      box-shadow var(--motion) var(--ease-out),
      background-color var(--motion-fast) var(--ease-out),
      border-color var(--motion-fast) var(--ease-out),
      color var(--motion-fast) var(--ease-out);
  }

  /* Text-weight actions */
  a,
  .call-prompt,
  .calc-promo__link,
  .symptom__title a,
  .site-nav__list a,
  .site-footer a,
  .breadcrumb a,
  summary {
    transition:
      color var(--motion-fast) var(--ease-out),
      text-decoration-color var(--motion-fast) var(--ease-out),
      text-decoration-thickness var(--motion-fast) var(--ease-out),
      text-underline-offset var(--motion-fast) var(--ease-out),
      transform var(--motion-fast) var(--ease-out);
  }

  /* Card surfaces */
  .track,
  .symptom,
  .calc-promo,
  .plan,
  .case,
  .service-row,
  .work-item,
  .logos li {
    transition:
      transform var(--motion) var(--ease-out),
      box-shadow var(--motion) var(--ease-out),
      border-color var(--motion) var(--ease-out);
  }

  /* Photographs inside cards */
  .track__image,
  .work-item img,
  .service-row__image,
  .case__image,
  .logos img {
    transition:
      transform var(--motion-slow) var(--ease-out),
      filter var(--motion-slow) var(--ease-out);
  }

  /* Form controls */
  .calc__field select {
    transition:
      border-color var(--motion-fast) var(--ease-out),
      box-shadow var(--motion-fast) var(--ease-out),
      background-position var(--motion) var(--ease-out),
      background-color var(--motion-fast) var(--ease-out);
  }

  /* Icons travelling with their button */
  .call-button__icon,
  .call-bar__icon,
  .alarm__call svg {
    transition: transform var(--motion) var(--ease-out);
  }
}

/* ---------- 2. Buttons: lift on hover, press down on click ---------- */

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .call-button:hover,
  .alarm__call:hover,
  .request-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--lift-shadow);
  }

  .call-button:hover .call-button__icon,
  .alarm__call:hover svg {
    transform: rotate(-12deg) scale(1.1);
  }

  .menu-toggle:hover {
    transform: translateY(-1px);
  }
}

/* The press is deliberately not gated on hover: a tap on a phone should feel
   like it landed. It is still inside the reduced-motion guard. */
@media (prefers-reduced-motion: no-preference) {
  .call-button:active,
  .request-button:active,
  .alarm__call:active,
  .menu-toggle:active,
  .call-bar__call:active,
  .call-bar__request:active {
    transform: translateY(0) scale(0.97);
    box-shadow: none;
    transition-duration: var(--motion-fast);
  }
}

/* ---------- 3. The header phone number, which is the point of the site ---------- */

.call-button--header {
  position: relative;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .call-button--header:hover {
    box-shadow: var(--lift-shadow-strong);
  }
}

/* ---------- 4. Navigation: an underline that grows from the left ---------- */

@media (min-width: 62rem) {
  .site-nav__list a {
    position: relative;
  }

  .site-nav__list a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--color-brand);
    transform: scaleX(0);
    transform-origin: left center;
  }

  @media (prefers-reduced-motion: no-preference) {
    .site-nav__list a::after {
      transition: transform var(--motion) var(--ease-out);
    }
  }

  .site-nav__list a:hover::after,
  .site-nav__list a:focus-visible::after,
  .site-nav__list a[aria-current="page"]::after {
    transform: scaleX(1);
  }
}

/* On the mobile panel the rows slide instead, since they are full-width. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  @media (max-width: 61.999rem) {
    .site-nav__list a:hover {
      transform: translateX(4px);
    }
  }
}

/* ---------- 5. Cards: lift, brand edge, and the photograph comes up ---------- */

@media (hover: hover) and (pointer: fine) {
  .track:hover,
  .plan:hover,
  .case:hover,
  .service-row:hover {
    border-color: var(--color-brand);
  }

  /* Every photograph on the site is a bare <img> with no clipping wrapper, so a
     scale would spill over the text below it. Lifting saturation and brightness
     gives the same "it woke up" read with no layout consequence at all. */
  .track:hover .track__image,
  .work-item:hover img,
  .service-row:hover .service-row__image,
  .case:hover .case__image {
    filter: saturate(1.12) brightness(1.04);
  }

  @media (prefers-reduced-motion: no-preference) {
    .track:hover,
    .symptom:hover,
    .calc-promo:hover,
    .plan:hover {
      transform: translateY(-4px);
      box-shadow: var(--lift-shadow);
    }

    .work-item:hover,
    .case:hover {
      transform: translateY(-2px);
    }
  }
}

/* ---------- 6. Links in running text ---------- */

@media (hover: hover) and (pointer: fine) {
  .prose a:hover,
  .faq__answer a:hover,
  p a:hover {
    text-decoration-thickness: 2px;
    text-underline-offset: 0.24em;
  }

  .call-prompt:hover,
  .calc-promo__link:hover {
    text-decoration-thickness: 2px;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .site-footer a:not(.site-footer__phone):hover {
    transform: translateX(3px);
  }

  .site-footer a {
    display: inline-block;
  }

  .site-footer__phone:hover {
    transform: translateY(-2px);
  }
}

/* ---------- 7. Dropdowns in the calculators ---------- */
/* The native caret cannot be animated, so it is replaced with one drawn in a
   token. On hover it turns brand green and slides down a couple of pixels — the
   control says "open me" before it is clicked. */

.calc__field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: calc(var(--space-lg) + var(--space-md));
  background-image: var(--caret);
  background-repeat: no-repeat;
  background-position: calc(100% - var(--space-sm)) 50%;
  background-size: 0.7rem auto;
  cursor: pointer;
}

.calc__field select:hover {
  border-color: var(--color-brand);
  background-image: var(--caret-brand);
  background-position: calc(100% - var(--space-sm)) calc(50% + 2px);
  box-shadow: var(--ring-brand);
}

.calc__field select:focus-visible {
  border-color: var(--color-brand);
  background-image: var(--caret-brand);
}

/* ---------- 8. Disclosure arrows ---------- */

summary {
  cursor: pointer;
}

.calc-table__details summary::marker,
summary::marker {
  color: var(--color-brand);
}

@media (hover: hover) and (pointer: fine) {
  summary:hover {
    color: var(--color-brand-deep);
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  summary:hover {
    transform: translateX(3px);
  }
}

/* ---------- 9. Logo walls ---------- */
/* The marks sit quiet until you look at one. The resting grey is inside the
   hover query on purpose: on a touch screen there is no hover to bring the
   colour back, so the logos stay full strength there. */

@media (hover: hover) and (pointer: fine) {
  .logos img {
    filter: grayscale(1);
    opacity: 0.72;
  }

  .logos li:hover img {
    filter: grayscale(0);
    opacity: 1;
  }

  @media (prefers-reduced-motion: no-preference) {
    .logos li:hover {
      transform: translateY(-3px);
      box-shadow: var(--lift-shadow);
    }
  }
}

/* ---------- 10. The cursor-tracking tint ---------- */
/* js/main.js adds data-glow and writes --px / --py as the pointer moves, so the
   highlight follows the cursor inside the card rather than just switching on.
   It is painted as a background layer, which keeps it underneath the text with
   no stacking or contrast consequences. --glow-a is registered so the fade can
   be animated; in a browser that does not support @property it simply appears. */

@property --glow-a {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

[data-glow] {
  --glow-a: 0;
  background-image: radial-gradient(
    14rem circle at var(--px, 50%) var(--py, 50%),
    rgb(var(--brand-rgb) / var(--glow-a)),
    transparent 72%
  );
  background-repeat: no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
  [data-glow] {
    transition:
      --glow-a var(--motion) var(--ease-out),
      transform var(--motion) var(--ease-out),
      box-shadow var(--motion) var(--ease-out),
      border-color var(--motion) var(--ease-out);
  }
}

[data-glow]:hover {
  --glow-a: 0.1;
}

/* ---------- 11. Keyboard users get the same life ---------- */

@media (prefers-reduced-motion: no-preference) {
  :focus-visible {
    transition: outline-offset var(--motion-fast) var(--ease-out);
  }
}

.call-button:focus-visible,
.request-button:focus-visible,
.alarm__call:focus-visible {
  outline-offset: 4px;
}