/* ==========================================================================
   Sensible — Complete Design System (Polished)
   Air Conditioning, Heating, Refrigeration
   ========================================================================== */

/* --------------------------------------------------------------------------
   Google Fonts
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@500;600;700;800&family=Source+Sans+3:wght@400;600;700&display=swap');

/* Remix Icon is loaded via CDN in HTML — these are icon-specific styles */

/* --------------------------------------------------------------------------
   1. Custom Properties
   -------------------------------------------------------------------------- */
:root {
  /* Brand Colors — matched to real Sensible palette */
  --primary: #14395F;
  --primary-dark: #0E2A47;
  --primary-light: #1B4A7A;
  --accent: #D2291D;
  --accent-hover: #E13327;
  --accent-dark: #A81E14;

  /* Text */
  --text: #24343F;
  --text-light: #5C6E7C;
  --text-on-dark: #F5F7F9;

  /* Backgrounds */
  --bg-white: #FFFFFF;
  --bg-light: #F5F7F9;
  --bg-gray: #E8EFF4;

  /* Utility */
  --border: #D8E2E9;
  --shadow: rgba(12, 34, 58, 0.07);
  --shadow-md: rgba(12, 34, 58, 0.11);
  --shadow-lg: rgba(12, 34, 58, 0.15);
  --overlay: rgba(11, 32, 54, 0.90);

  /* Spacing */
  --section-padding: 6.5rem;   /* white shift: the site breathes */
  --section-padding-mobile: 3.75rem;
  --container-max: 1200px;
  --container-padding: 1.5rem;

  /* Typography scale */
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;

  /* Transitions */
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 0.3s var(--ease-smooth);
  --transition-med: 0.6s var(--ease-smooth);

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-full: 50%;

  /* Header */
  --header-height: 80px;
  --header-height-scrolled: 64px;
}

/* --------------------------------------------------------------------------
   Remix Icon integration
   -------------------------------------------------------------------------- */
[class^="ri-"],
[class*=" ri-"] {
  font-size: inherit;
  line-height: 1;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--text);
  background-color: var(--bg-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--primary);
}

h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  letter-spacing: -0.01em;
}

h3 {
  font-size: clamp(1.2rem, 3vw, 1.75rem);
}

h4 {
  font-size: var(--fs-lg);
}

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

/* --------------------------------------------------------------------------
   3. Layout Utilities
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.section {
  padding: var(--section-padding-mobile) 0;
}

.section--dark {
  background: linear-gradient(
    170deg,
    var(--primary-dark) 0%,
    var(--primary) 50%,
    var(--primary-dark) 100%
  );
  color: var(--text-on-dark);
}

.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--bg-white);
}

.section--dark .section__subtitle {
  color: var(--text-on-dark);
  opacity: 0.85;
}

.section--light {
  background-color: var(--bg-light);
}

.section--gray {
  background-color: var(--bg-gray);
}

/* Alternating section backgrounds */
.section--alt:nth-child(even) {
  background-color: var(--bg-light);
}

.grid {
  display: grid;
  gap: 2rem;
}

.grid--2 {
  grid-template-columns: 1fr;
}

.grid--3 {
  grid-template-columns: 1fr;
}

.grid--4 {
  grid-template-columns: 1fr;
}

/* Ensure grid children stretch to fill row height */
.grid > * {
  min-width: 0;
}

.text-center {
  text-align: center;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   4. Header & Navigation
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: var(--primary);
  transition:
    padding var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

.header.scrolled {
  background-color: var(--primary-dark);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  transition: height var(--transition-fast);
}

.header.scrolled .nav {
  height: var(--header-height-scrolled);
}

/* Logo */
.nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  z-index: 1001;
}

.nav__logo img {
  height: 48px;
  width: auto;
  transition: height var(--transition-fast);
}

.header.scrolled .nav__logo img {
  height: 40px;
}

.nav__logo-text {
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--fs-xl);
  color: var(--bg-white);
  letter-spacing: 0.5px;
}

.nav__logo-text span {
  color: var(--accent);
}

/* Mobile menu */
.nav__menu {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  width: 85%;
  max-width: 360px;
  height: 100vh;
  height: 100dvh;
  background: linear-gradient(180deg, var(--primary-dark) 0%, var(--primary) 100%);
  padding: calc(var(--header-height) + 2rem) 2rem 2rem;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease-smooth);
  z-index: 999;
  overflow-y: auto;
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.4);
}

.nav__menu.active {
  display: flex;
  transform: translateX(0);
}

.nav__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav__item:last-child {
  border-bottom: none;
}

.nav__link {
  display: flex;
  align-items: center;
  padding: 1rem 0;
  color: var(--text-on-dark);
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--fs-base);
  transition: color var(--transition-fast);
  gap: 0.5rem;
}

.nav__link i {
  font-size: 1.1em;
  opacity: 0.7;
  width: 1.5em;
  text-align: center;
}

.nav__link:hover,
.nav__link:focus {
  color: var(--accent);
}

.nav__link.active {
  color: var(--accent);
  position: relative;
}

/* Active nav link indicator on mobile */
.nav__link.active::before {
  content: '';
  position: absolute;
  left: -2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background-color: var(--accent);
  border-radius: 0 2px 2px 0;
}

/* Dropdown */
.nav__dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.nav__dropdown-toggle .nav__chevron {
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--text-on-dark);
  border-bottom: 2px solid var(--text-on-dark);
  transform: rotate(45deg);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
  margin-left: 0.5rem;
}

.nav__item.dropdown-open .nav__chevron {
  transform: rotate(-135deg);
}

.nav__dropdown {
  display: none;
  padding-left: 1rem;
  padding-bottom: 0.5rem;
}

.nav__item.dropdown-open .nav__dropdown {
  display: block;
}

.nav__dropdown-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  color: var(--text-on-dark);
  opacity: 0.8;
  font-size: 0.9rem;
  transition: opacity var(--transition-fast), color var(--transition-fast), padding-left var(--transition-fast);
}

.nav__dropdown-link i {
  font-size: 1em;
  opacity: 0.6;
  width: 1.25em;
  text-align: center;
}

.nav__dropdown-link:hover {
  opacity: 1;
  color: var(--accent);
  padding-left: 0.5rem;
}

/* Hamburger */
.nav__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  z-index: 1001;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.nav__toggle-bar {
  display: block;
  width: 26px;
  height: 2px;
  background-color: var(--bg-white);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav__toggle-bar + .nav__toggle-bar {
  margin-top: 6px;
}

.nav__toggle.active .nav__toggle-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav__toggle.active .nav__toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav__toggle.active .nav__toggle-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.nav__cta {
  display: none;
}

/* Mobile nav overlay/backdrop */
.nav__overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.nav__overlay.active {
  display: block;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   5. Hero Section
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: calc(var(--header-height) + 2rem) 0 3rem;
  overflow: hidden;
}

/* Overlay gradient — ensures text readability over any background image */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(20, 57, 95, 0.88) 0%,
    rgba(46, 17, 24, 0.78) 50%,
    rgba(20, 57, 95, 0.85) 100%
  );
  z-index: 1;
}

/* All direct children sit above the overlay */
.hero > * {
  position: relative;
  z-index: 2;
}

/* Hero variant for pages with a real background image */
.hero--image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero--image::before {
  background: linear-gradient(
    135deg,
    rgba(20, 57, 95, 0.85) 0%,
    rgba(46, 17, 24, 0.75) 50%,
    rgba(20, 57, 95, 0.80) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.hero__title {
  color: var(--bg-white);
  margin-bottom: 1rem;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.hero__trust-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, 0.72);
  color: #ffffff;
  padding: .45rem .95rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 1.1rem;
}

.hero__subtitle {
  color: var(--text-on-dark);
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  margin-bottom: 2rem;
  opacity: 0.92;
  line-height: 1.6;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  margin-bottom: 2.5rem;
}

/* Trust Badges — semi-transparent cards in a row */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  position: relative;
  z-index: 2;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-md);
  color: var(--bg-white);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.trust-badge:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

.trust-badge__icon {
  width: 32px;
  height: 32px;
  color: var(--accent);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trust-badge__icon svg,
.trust-badge__icon i {
  width: 100%;
  height: 100%;
}

.trust-badge__icon i {
  font-size: 1.5rem;
}

.trust-badge__number {
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--accent);
}

.trust-badge__text {
  font-size: 0.8rem;
  line-height: 1.2;
  opacity: 0.9;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

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

.btn:active {
  transform: translateY(0);
}

.btn i {
  font-size: 1.1em;
}

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

.btn--primary:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: 0 4px 20px rgba(210, 41, 29, 0.4);
}

.btn--secondary {
  background-color: transparent;
  color: var(--bg-white);
  border-color: var(--bg-white);
}

.btn--secondary:hover {
  background-color: var(--bg-white);
  color: var(--primary-dark);
}

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

.btn--secondary-dark:hover {
  background-color: var(--primary);
  color: var(--bg-white);
}

.btn--cta {
  background-color: var(--accent);
  color: var(--primary-dark);
  border-color: var(--accent);
  padding: 1rem 2.5rem;
  font-size: var(--fs-base);
  font-weight: 700;
}

.btn--cta:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: 0 6px 24px rgba(210, 41, 29, 0.45);
}

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

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

.btn--sm {
  padding: 0.625rem 1.25rem;
  font-size: var(--fs-sm);
}

.btn--lg {
  padding: 1.125rem 3rem;
  font-size: var(--fs-md);
}

.btn__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   7. Section Headers
   -------------------------------------------------------------------------- */
.section__header {
  text-align: center;
  margin-bottom: 3rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.section__label {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.75rem;
  font-family: 'Figtree', system-ui, sans-serif;
}

.section__title {
  color: var(--primary);
  margin-bottom: 0.75rem;
}

.section--dark .section__title {
  color: var(--bg-white);
}

.section__subtitle {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-light);
  font-size: 1.05rem;
  line-height: 1.65;
}

.section__cta-wrap {
  text-align: center;
  margin-top: 2.5rem;
}

.equipment-in-services,
.equipment-in-services > h2,
.equipment-in-services > h3,
.equipment-in-services .card__content,
.equipment-in-services .card__title,
.equipment-in-services .card__text {
  text-align: center;
}

.equipment-in-services > p,
.page-content .section > .container > .equipment-in-services > h2,
.page-content .section > .container > .equipment-in-services > h3,
.page-content .section > .container > .equipment-in-services > p,
.page-content .section > .container > .equipment-in-services .card__text {
  text-align: center !important;
}

.page-content .section > .container > .equipment-in-services > p,
.equipment-in-services > p {
  margin-left: auto !important;
  margin-right: auto !important;
}

.section--dark .section__subtitle {
  color: var(--text-on-dark);
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.card {
  background-color: var(--bg-white);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 12px var(--shadow), 0 1px 3px rgba(12, 34, 58, 0.04);
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 36px var(--shadow-md), 0 4px 12px rgba(12, 34, 58, 0.06);
}

/* Card images — handles real <img> tags properly */
.card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  flex-shrink: 0;
}

.card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-smooth);
}

.card:hover .card__image img {
  transform: scale(1.05);
}

/* When card__image itself IS the img tag (no wrapper) */
img.card__image {
  object-fit: cover;
}

/* Placeholder for cards without photos */
.card__image-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}

.card__image-placeholder i {
  font-size: 2.5rem;
  opacity: 0.6;
}

.card__content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card__title {
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--fs-lg);
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.card__text {
  color: var(--text-light);
  font-size: 0.9375rem;
  line-height: 1.65;
  flex: 1;
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9375rem;
  margin-top: 1rem;
  transition: gap var(--transition-fast), color var(--transition-fast);
}

.card__link:hover {
  color: var(--accent-dark);
  gap: 0.625rem;
}

.card__link i {
  font-size: 1.1em;
  transition: transform var(--transition-fast);
}

.card__link:hover i {
  transform: translateX(3px);
}

.card__link::after {
  content: '';
}

/* If no icon is used, show arrow via pseudo-element */
.card__link:not(:has(i))::after {
  content: '\2192';
  font-size: 1.1em;
  transition: transform var(--transition-fast);
}

.card__link:not(:has(i)):hover::after {
  transform: translateX(3px);
}

/* Card variant: with accent top border */
.card--accent-top {
  border-top: 3px solid var(--accent);
}

/* Card variant: horizontal */
.card--horizontal {
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   9. Process Steps
   -------------------------------------------------------------------------- */
.process {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  counter-reset: process-step;
}

.process__step {
  text-align: center;
  padding: 2rem 1.5rem;
  position: relative;
  background: var(--bg-white);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 12px var(--shadow);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.section--dark .process__step {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.process__step:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px var(--shadow-md);
}

.section--dark .process__step:hover {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
}

.process__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background-color: var(--accent);
  color: var(--primary-dark);
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--fs-xl);
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 16px rgba(210, 41, 29, 0.35);
}

.process__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.process__icon svg {
  width: 100%;
  height: 100%;
}

.process__icon i {
  font-size: 2rem;
}

.process__title {
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--fs-lg);
  margin-bottom: 0.75rem;
  color: var(--primary);
}

.section--dark .process__title {
  color: var(--bg-white);
}

.process__text {
  color: var(--text-light);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.section--dark .process__text {
  color: var(--text-on-dark);
  opacity: 0.8;
}

/* Connector line between steps (desktop only, added via media query) */
.process__connector {
  display: none;
}

/* --------------------------------------------------------------------------
   10. Carousel / Slider
   -------------------------------------------------------------------------- */
.carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.carousel__viewport {
  overflow: hidden;
}

.carousel__track {
  display: flex;
  transition: transform 0.5s var(--ease-smooth);
  will-change: transform;
}

.carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 0 0.75rem;
}

.carousel__slide > * {
  height: 100%;
}

.carousel__prev,
.carousel__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background-color: var(--bg-white);
  color: var(--primary);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  box-shadow: 0 4px 16px var(--shadow-md);
}

.carousel__prev:hover,
.carousel__next:hover {
  background-color: var(--accent);
  color: var(--primary-dark);
  border-color: var(--accent);
  box-shadow: 0 6px 20px rgba(210, 41, 29, 0.35);
}

.carousel__prev {
  left: 0.75rem;
}

.carousel__next {
  right: 0.75rem;
}

.carousel__prev svg,
.carousel__next svg {
  width: 20px;
  height: 20px;
}

.carousel__prev i,
.carousel__next i {
  font-size: 1.25rem;
}

.carousel__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

.carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background-color: var(--border);
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast), width var(--transition-fast);
  padding: 0;
}

.carousel__dot:hover {
  background-color: var(--primary-light);
  transform: scale(1.15);
}

.carousel__dot.active {
  background-color: var(--accent);
  width: 24px;
  border-radius: 5px;
}

/* --------------------------------------------------------------------------
   11. FAQ Accordion
   -------------------------------------------------------------------------- */
.faq {
  max-width: 800px;
  margin: 0 auto;
}

.faq__item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 0.75rem;
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.faq__item:hover {
  border-color: rgba(210, 41, 29, 0.3);
}

.faq__item.active {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(210, 41, 29, 0.1);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--text);
  text-align: left;
  background: var(--bg-white);
  border: none;
  transition: color var(--transition-fast), background-color var(--transition-fast);
  gap: 1rem;
}

.faq__question:hover {
  color: var(--accent-dark);
  background-color: var(--bg-light);
}

.faq__item.active .faq__question {
  color: var(--primary);
  background-color: var(--bg-light);
}

.faq__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  position: relative;
  transition: transform var(--transition-fast);
  border-radius: var(--radius-full);
  background: rgba(210, 41, 29, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  background-color: var(--accent-dark);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.faq__icon::before {
  width: 12px;
  height: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.faq__icon::after {
  width: 2px;
  height: 12px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.faq__item.active .faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.faq__item.active .faq__icon {
  background: rgba(210, 41, 29, 0.2);
}

.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-smooth);
}

.faq__item.active .faq__answer {
  max-height: 600px;
}

.faq__answer-inner {
  padding: 0 1.5rem 1.5rem;
  color: var(--text-light);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   12. Forms
   -------------------------------------------------------------------------- */
.form {
  max-width: 600px;
}

.form--centered {
  margin-left: auto;
  margin-right: auto;
}

.form__group {
  margin-bottom: 1.25rem;
}

.form__label {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 0.5rem;
  color: var(--text);
  font-family: 'Figtree', system-ui, sans-serif;
}

.form__label--required::after {
  content: ' *';
  color: #c0392b;
}

.form__input,
.form__textarea,
.form__select {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--bg-white);
  font-size: var(--fs-base);
  color: var(--text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  min-height: 48px;
}

.form__input::placeholder,
.form__textarea::placeholder {
  color: var(--text-light);
  opacity: 0.6;
}

.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(210, 41, 29, 0.15);
}

.form__textarea {
  min-height: 120px;
  resize: vertical;
}

.form__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237A7068' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.form__submit {
  margin-top: 0.5rem;
}

.form__error {
  font-size: var(--fs-sm);
  color: #c0392b;
  margin-top: 0.375rem;
}

.form__success {
  padding: 1rem 1.25rem;
  background-color: #d4edda;
  color: #155724;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-align: center;
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: linear-gradient(
    175deg,
    var(--primary-dark) 0%,
    #0A1F35 100%
  );
  color: var(--text-on-dark);
  padding: 4rem 0 2rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}

.footer__col {
  min-width: 0;
}

.footer__title {
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--bg-white);
  margin-bottom: 1.25rem;
  position: relative;
  padding-bottom: 0.75rem;
}

.footer__title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background-color: var(--accent);
  border-radius: 1px;
}

.footer__text {
  color: var(--text-on-dark);
  opacity: 0.8;
  font-size: 0.9375rem;
  line-height: 1.7;
}

.footer__links {
  list-style: none;
}

.footer__links li + li {
  margin-top: 0.625rem;
}

.footer__links a {
  color: var(--text-on-dark);
  opacity: 0.8;
  font-size: 0.9375rem;
  transition: opacity var(--transition-fast), color var(--transition-fast), padding-left var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.footer__links a i {
  font-size: 0.75em;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.footer__links a:hover {
  opacity: 1;
  color: var(--accent);
  padding-left: 0.25rem;
}

.footer__links a:hover i {
  opacity: 1;
}

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
  color: var(--text-on-dark);
  opacity: 0.85;
  font-size: 0.9375rem;
}

.footer__contact-icon {
  width: 20px;
  height: 20px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 0.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer__contact-icon svg {
  width: 100%;
  height: 100%;
}

.footer__contact-icon i {
  font-size: 1rem;
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 2rem;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.footer__copyright {
  font-size: var(--fs-sm);
  opacity: 0.6;
}

.footer__social {
  display: flex;
  gap: 0.75rem;
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-on-dark);
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.footer__social-link:hover {
  background-color: var(--accent);
  color: var(--primary-dark);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.footer__social-link svg {
  width: 18px;
  height: 18px;
}

.footer__social-link i {
  font-size: 1.1rem;
}

/* --------------------------------------------------------------------------
   14. Breadcrumbs
   -------------------------------------------------------------------------- */
.breadcrumbs {
  font-size: 0.875rem;
  color: var(--text-light);
  padding: 1rem 0;
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
}

.breadcrumbs__item:not(:last-child)::after {
  content: '/';
  margin: 0 0.5rem;
  color: var(--text-light);
  opacity: 0.5;
}

.breadcrumbs a {
  color: var(--accent);
  transition: color var(--transition-fast);
}

.breadcrumbs a:hover {
  color: var(--accent-dark);
}

.breadcrumbs__current {
  color: var(--text-light);
}

/* --------------------------------------------------------------------------
   15. Google Maps
   -------------------------------------------------------------------------- */
.map-container {
  width: 100%;
  height: 400px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 20px var(--shadow-md);
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* --------------------------------------------------------------------------
   16. Testimonial / Review Cards
   -------------------------------------------------------------------------- */
.testimonial {
  padding: 2rem;
  position: relative;
  background-color: var(--bg-white);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 16px var(--shadow);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.testimonial:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px var(--shadow-md);
}

/* Large decorative quote mark */
.testimonial::before {
  content: '\201C';
  position: absolute;
  top: 0.5rem;
  left: 1.25rem;
  font-size: 6rem;
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--accent);
  opacity: 0.12;
  line-height: 1;
  pointer-events: none;
}

/* Star rating in gold */
.testimonial__stars {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
  color: var(--accent);
}

.testimonial__star {
  width: 18px;
  height: 18px;
}

.testimonial__star i {
  font-size: 1.125rem;
  color: var(--accent);
}

.testimonial__text {
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 1;
  flex: 1;
}

/* Author info properly aligned */
.testimonial__footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.testimonial__avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--accent);
  flex-shrink: 0;
}

/* Avatar placeholder when no image */
.testimonial__avatar-placeholder {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.testimonial__info {
  display: flex;
  flex-direction: column;
}

.testimonial__author {
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--primary);
}

.testimonial__role {
  color: var(--text-light);
  font-size: var(--fs-sm);
}

/* Testimonial on dark background variant */
.section--dark .testimonial {
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.section--dark .testimonial:hover {
  background-color: rgba(255, 255, 255, 0.09);
}

.section--dark .testimonial__text {
  color: var(--text-on-dark);
}

.section--dark .testimonial__author {
  color: var(--bg-white);
}

.section--dark .testimonial__role {
  color: var(--text-on-dark);
  opacity: 0.7;
}

.section--dark .testimonial__footer {
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* --------------------------------------------------------------------------
   17. Stats / Badges Row
   -------------------------------------------------------------------------- */
.stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.stat {
  text-align: center;
  padding: 1.5rem;
  min-width: 140px;
}

.stat__number {
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1.1;
  margin-bottom: 0.375rem;
}

.stat__label {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-light);
  font-weight: 600;
}

.section--dark .stat__label {
  color: var(--text-on-dark);
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   18. Affiliations / Logos Row
   -------------------------------------------------------------------------- */
.logos-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
}

.logos-row img {
  max-height: 60px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.5;
  transition: filter var(--transition-fast), opacity var(--transition-fast);
}

.logos-row img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   19. Page Hero (Subpages)
   -------------------------------------------------------------------------- */
.page-hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--bg-white);
  padding: calc(var(--header-height) + 3rem) 0 4rem;
  position: relative;
  overflow: hidden;
}

/* Default overlay when no background image */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(20, 57, 95, 0.95) 0%,
    rgba(46, 17, 24, 0.9) 100%
  );
  z-index: 1;
}

/* Decorative radial glow */
.page-hero::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(210, 41, 29, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.page-hero > * {
  position: relative;
  z-index: 2;
}

.page-hero__content {
  position: relative;
  z-index: 2;
}

.page-hero__title {
  color: var(--bg-white);
  margin-bottom: 0.75rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.page-hero__subtitle {
  color: var(--text-on-dark);
  opacity: 0.9;
  font-size: 1.1rem;
  max-width: 600px;
  line-height: 1.65;
}

/* With background image variant */
.page-hero--image {
  background-size: cover;
  background-position: center;
}

.page-hero--image::before {
  background: linear-gradient(
    135deg,
    rgba(20, 57, 95, 0.9) 0%,
    rgba(46, 17, 24, 0.8) 100%
  );
}

/* --------------------------------------------------------------------------
   20. Icon Boxes
   -------------------------------------------------------------------------- */
.icon-box {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.icon-box--centered {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.icon-box__icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-box__icon svg {
  width: 100%;
  height: 100%;
}

.icon-box__icon i {
  font-size: 1.75rem;
}

/* Circle variant — gold background with icon inside */
.icon-box__icon--circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, rgba(210, 41, 29, 0.15) 0%, rgba(210, 41, 29, 0.08) 100%);
  flex-shrink: 0;
}

.icon-box__icon--circle svg {
  width: 28px;
  height: 28px;
}

.icon-box__icon--circle i {
  font-size: 1.5rem;
}

/* Rounded square variant */
.icon-box__icon--square {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: var(--primary-dark);
  flex-shrink: 0;
}

.icon-box__icon--square svg {
  width: 24px;
  height: 24px;
}

.icon-box__icon--square i {
  font-size: 1.375rem;
  color: var(--primary-dark);
}

.icon-box__body {
  flex: 1;
  min-width: 0;
}

.icon-box__title {
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--fs-md);
  margin-bottom: 0.375rem;
  color: var(--primary);
}

.section--dark .icon-box__title {
  color: var(--bg-white);
}

.icon-box__text {
  color: var(--text-light);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.section--dark .icon-box__text {
  color: var(--text-on-dark);
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   21. Animations
   -------------------------------------------------------------------------- */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--transition-med), transform var(--transition-med);
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.slide-in-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--transition-med), transform var(--transition-med);
}

.slide-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.slide-in-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--transition-med), transform var(--transition-med);
}

.slide-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.scale-in {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity var(--transition-med), transform var(--transition-med);
}

.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

/* Staggered children animation */
.stagger-children .fade-in:nth-child(1) { transition-delay: 0s; }
.stagger-children .fade-in:nth-child(2) { transition-delay: 0.1s; }
.stagger-children .fade-in:nth-child(3) { transition-delay: 0.15s; }
.stagger-children .fade-in:nth-child(4) { transition-delay: 0.2s; }
.stagger-children .fade-in:nth-child(5) { transition-delay: 0.25s; }
.stagger-children .fade-in:nth-child(6) { transition-delay: 0.3s; }
.stagger-children .fade-in:nth-child(7) { transition-delay: 0.35s; }
.stagger-children .fade-in:nth-child(8) { transition-delay: 0.4s; }

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .slide-in-left,
  .slide-in-right,
  .scale-in {
    transition: none;
    opacity: 1;
    transform: none;
  }

  html {
    scroll-behavior: auto;
  }

  .btn:hover {
    transform: none;
  }

  .card:hover {
    transform: none;
  }

  .carousel__track {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   22. CTA Banner
   -------------------------------------------------------------------------- */
.cta-banner {
  background: linear-gradient(
    135deg,
    var(--primary-dark) 0%,
    var(--primary) 50%,
    var(--primary-dark) 100%
  );
  padding: 4rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(210, 41, 29, 0.06) 0%, transparent 60%);
  pointer-events: none;
}

.cta-banner__title {
  color: var(--bg-white);
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 1;
}

.cta-banner__text {
  color: var(--text-on-dark);
  opacity: 0.9;
  max-width: 500px;
  margin: 0 auto 2rem;
  font-size: 1.05rem;
  position: relative;
  z-index: 1;
  line-height: 1.65;
}

.cta-banner__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   23. Service Area / Industry Page Specific
   -------------------------------------------------------------------------- */
.content-section {
  max-width: 800px;
}

.content-section h2 {
  margin-bottom: 1rem;
}

.content-section h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.content-section p {
  margin-bottom: 1rem;
  color: var(--text);
  line-height: 1.7;
}

.content-section ul,
.content-section ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.content-section ul {
  list-style: disc;
}

.content-section ol {
  list-style: decimal;
}

.content-section li {
  margin-bottom: 0.5rem;
  color: var(--text);
  line-height: 1.65;
}

/* Sidebar layout */
.layout-sidebar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

.sidebar {
  order: -1;
}

.sidebar__widget {
  background-color: var(--bg-light);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
}

.sidebar__widget-title {
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--fs-md);
  margin-bottom: 1rem;
  color: var(--primary);
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--accent);
}

.sidebar__nav-link {
  display: block;
  padding: 0.625rem 0;
  color: var(--text);
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--border);
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}

.sidebar__nav-link:last-child {
  border-bottom: none;
}

.sidebar__nav-link:hover,
.sidebar__nav-link.active {
  color: var(--accent);
  padding-left: 0.5rem;
}

/* --------------------------------------------------------------------------
   24. Careers Page
   -------------------------------------------------------------------------- */
.job-listing {
  background-color: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin-bottom: 1rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.job-listing:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 20px var(--shadow-md);
}

.job-listing__title {
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.job-listing__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: var(--text-light);
}

.job-listing__meta-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.job-listing__meta-item i {
  color: var(--accent);
}

.job-listing__description {
  color: var(--text);
  font-size: 0.9375rem;
  margin-bottom: 1rem;
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   25. About Page
   -------------------------------------------------------------------------- */
.team-member {
  text-align: center;
}

.team-member__image {
  width: 180px;
  height: 180px;
  border-radius: var(--radius-full);
  object-fit: cover;
  margin: 0 auto 1.25rem;
  border: 3px solid var(--accent);
  box-shadow: 0 4px 20px var(--shadow-md);
}

.team-member__name {
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--primary);
  margin-bottom: 0.25rem;
}

.team-member__role {
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.team-member__bio {
  color: var(--text-light);
  font-size: 0.9375rem;
}

/* Timeline (About page history) */
.timeline {
  position: relative;
  padding-left: 2rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-hover) 100%);
}

.timeline__item {
  position: relative;
  padding-bottom: 2rem;
  padding-left: 1.5rem;
}

.timeline__item::before {
  content: '';
  position: absolute;
  left: -2rem;
  top: 0.375rem;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background-color: var(--accent);
  border: 3px solid var(--bg-white);
  box-shadow: 0 0 0 2px var(--accent);
  transform: translateX(calc(50% - 1px));
}

.timeline__year {
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--fs-xl);
  color: var(--accent);
  margin-bottom: 0.25rem;
}

.timeline__title {
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--primary);
  margin-bottom: 0.375rem;
}

.timeline__text {
  color: var(--text-light);
  font-size: 0.9375rem;
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   26. Utility Classes
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

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

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

.text-white {
  color: var(--bg-white);
}

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

.bg-light {
  background-color: var(--bg-light);
}

.bg-gray {
  background-color: var(--bg-gray);
}

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }

.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2rem; }

.w-100 { width: 100%; }

.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.shadow { box-shadow: 0 2px 12px var(--shadow); }
.shadow-lg { box-shadow: 0 8px 32px var(--shadow-md); }

.overflow-hidden { overflow: hidden; }

.list-check {
  list-style: none;
  padding-left: 0;
}

.list-check li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.625rem;
}

.list-check li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.list-check--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.5rem;
  row-gap: 0;
}

@media (max-width: 560px) {
  .list-check--2col { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   27. Responsive — Extra Small (320px+)
   -------------------------------------------------------------------------- */
@media (min-width: 320px) {
  .trust-badges {
    gap: 0.5rem;
  }

  .trust-badge {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
  }
}

/* --------------------------------------------------------------------------
   28. Responsive — Mobile Large (480px+)
   -------------------------------------------------------------------------- */
@media (min-width: 480px) {
  .trust-badges {
    gap: 0.75rem;
  }

  .trust-badge {
    padding: 0.75rem 1.25rem;
  }

  .hero__actions {
    flex-direction: row;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   29. Responsive — Small Tablet (640px+)
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

  /* Grid children stretch to equal height */
  .grid--2 > .card,
  .grid--3 > .card,
  .grid--4 > .card {
    height: 100%;
  }

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

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

  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
  }

  .cta-banner__actions {
    flex-direction: row;
    justify-content: center;
  }

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

  .carousel__slide {
    flex: 0 0 50%;
  }

  .card--horizontal {
    flex-direction: row;
  }

  .card--horizontal .card__image {
    width: 40%;
    aspect-ratio: auto;
    min-height: 200px;
  }

  .card--horizontal .card__image img {
    height: 100%;
  }

  .card--horizontal .card__content {
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   30. Responsive — Tablet (768px+)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .section {
    padding: var(--section-padding) 0;
  }

  .hero {
    min-height: 80vh;
    padding: calc(var(--header-height) + 4rem) 0 4rem;
  }

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

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

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

  .carousel__slide {
    flex: 0 0 50%;
  }

  .layout-sidebar {
    grid-template-columns: 1fr 280px;
  }

  .sidebar {
    order: 0;
  }

  .page-hero {
    padding: calc(var(--header-height) + 4rem) 0 5rem;
  }
}

/* --------------------------------------------------------------------------
   31. Responsive — Desktop (1024px+)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .hero {
    min-height: 90vh;
  }

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

  .footer__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  /* Desktop navigation */
  .nav__toggle {
    display: none;
  }

  .nav__overlay {
    display: none !important;
  }

  .nav__menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: static;
    width: auto;
    max-width: none;
    height: auto;
    background: none;
    padding: 0;
    transform: none;
    box-shadow: none;
    overflow: visible;
    gap: 0;
  }

  .nav__item {
    border-bottom: none;
    position: relative;
  }

  .nav__link {
    padding: 0.5rem 0.875rem;
    font-size: 0.9375rem;
    position: relative;
  }

  .nav__link i {
    display: none;
  }

  /* Active nav underline on desktop */
  .nav__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0.875rem;
    right: 0.875rem;
    height: 2px;
    background-color: var(--accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--transition-fast);
  }

  .nav__link:hover::after,
  .nav__link.active::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .nav__link.active::before {
    display: none;
  }

  /* Desktop dropdown */
  .nav__dropdown-toggle .nav__chevron {
    width: 8px;
    height: 8px;
    border-width: 1.5px;
    transform: rotate(45deg);
    transition: transform var(--transition-fast);
  }

  .nav__dropdown {
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 220px;
    background-color: var(--bg-white);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--transition-fast),
      visibility var(--transition-fast),
      transform var(--transition-fast);
    z-index: 100;
  }

  .nav__item:hover .nav__dropdown,
  .nav__item.dropdown-open .nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  .nav__item:hover .nav__chevron {
    transform: rotate(-135deg);
  }

  .nav__dropdown-link {
    padding: 0.625rem 1.25rem;
    color: var(--text);
    opacity: 1;
    font-size: 0.875rem;
    white-space: nowrap;
    border-radius: 0;
    transition: background-color var(--transition-fast), color var(--transition-fast);
  }

  .nav__dropdown-link i {
    opacity: 0.4;
    color: var(--accent);
  }

  .nav__dropdown-link:hover {
    background-color: var(--bg-light);
    color: var(--accent-dark);
    padding-left: 1.25rem;
  }

  .nav__dropdown-link:hover i {
    opacity: 1;
  }

  /* Desktop CTA button in nav */
  .nav__cta {
    display: inline-flex;
    margin-left: 1rem;
  }

  .layout-sidebar {
    grid-template-columns: 1fr 300px;
    gap: 4rem;
  }

  /* Process connector lines */
  .process__connector {
    display: block;
    position: absolute;
    top: 28px;
    right: -1rem;
    width: 2rem;
    height: 2px;
    background-color: var(--accent);
    opacity: 0.3;
  }

  .process__step:last-child .process__connector {
    display: none;
  }

  .carousel__slide {
    flex: 0 0 33.333%;
  }
}

/* --------------------------------------------------------------------------
   32. Responsive — Large Desktop (1280px+)
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  :root {
    --container-max: 1280px;
  }

  .nav__link {
    padding: 0.5rem 1.25rem;
  }

  .nav__link::after {
    left: 1.25rem;
    right: 1.25rem;
  }

  .hero__content {
    max-width: 800px;
  }

  .carousel__slide {
    flex: 0 0 33.333%;
  }

  .footer__grid {
    gap: 3rem;
  }
}

/* --------------------------------------------------------------------------
   33. Print Styles
   -------------------------------------------------------------------------- */
@media print {
  .header,
  .nav__toggle,
  .hero,
  .footer,
  .carousel__prev,
  .carousel__next,
  .carousel__dots,
  .btn {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  .section {
    padding: 1rem 0;
  }

  .container {
    max-width: 100%;
  }

  a {
    color: #000;
    text-decoration: underline;
  }
}

/* ====================================================================
   PROFESSIONAL GRADE ALIGNMENT OVERRIDES
   Applied site-wide for consistent, polished appearance
   ==================================================================== */

/* --- Containers --- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* --- Sections --- */
.section {
  padding: 5rem 0;
}
@media (max-width: 767px) {
  .section { padding: 3rem 0; }
}

/* --- Section Headers - ALWAYS centered --- */
.section__header {
  text-align: center;
  max-width: 750px;
  margin: 0 auto 3rem;
}
.section__label {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent, #D2291D);
  margin-bottom: 0.75rem;
  font-family: 'Figtree', system-ui, sans-serif;
}
.section__title {
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  color: var(--primary, #14395F);
  margin-bottom: 1rem;
  line-height: 1.25;
}
.section__subtitle {
  color: var(--text-light, #5C6E7C);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 650px;
  margin: 0 auto;
}

/* --- Dark section overrides --- */
.section--dark .section__title { color: white; }
.section--dark .section__subtitle { color: rgba(240, 235, 229, 0.8); }
.section--dark .section__label { color: var(--accent, #D2291D); }
.section--dark h2 { color: white; }
.section--dark h3 { color: white; }
.section--dark p { color: rgba(240, 235, 229, 0.85); }

/* --- Page Hero (subpages) --- */
.page-hero {
  position: relative;
  padding: calc(var(--header-height, 80px) + 3rem) 0 3rem;
  min-height: 350px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  color: white;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(20, 57, 95, 0.9), rgba(46, 17, 24, 0.85));
  z-index: 1;
}
.page-hero > *,
.page-hero .container {
  position: relative;
  z-index: 2;
}
.page-hero__title {
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  color: white !important;
  margin-bottom: 1rem;
  line-height: 1.2;
}
.page-hero__subtitle {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 600px;
}
.breadcrumbs {
  margin-bottom: 1rem;
  font-size: 0.85rem;
}
.breadcrumbs,
.breadcrumbs a,
.breadcrumbs span {
  color: rgba(255, 255, 255, 0.65) !important;
}
.breadcrumbs a:hover {
  color: var(--accent, #D2291D) !important;
}

/* --- Content sections on subpages - LEFT aligned headings, full-width text --- */
.page-content .section h2,
.page-content .section > .container > h2 {
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--primary, #14395F);
  margin-bottom: 1rem;
  line-height: 1.3;
  text-align: left;
}
.page-content .section p,
.page-content .section > .container > p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text, #24343F);
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  margin-bottom: 1rem;
}

/* --- BUT section headers (label + title + subtitle) stay centered --- */
.page-content .section__header {
  text-align: center;
}
.page-content .section__header h2,
.page-content .section__header .section__title {
  text-align: center;
}
.page-content .section__header p {
  text-align: center;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Grids --- */
.grid {
  display: grid;
  gap: 2rem;
}
.grid--2 {
  grid-template-columns: 1fr;
}
.grid--3 {
  grid-template-columns: 1fr;
}
.grid--4 {
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* --- Icon boxes - horizontal layout --- */
.icon-box {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.icon-box__icon--circle {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  background: rgba(210, 41, 29, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--accent, #D2291D);
}
.icon-box__body {
  flex: 1;
}
.icon-box__title {
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--primary, #14395F);
  margin-bottom: 0.25rem;
}
.icon-box__text {
  color: var(--text-light, #5C6E7C);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* --- Cards --- */
.card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.card__image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.card__content {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.card__title {
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--primary, #14395F);
  margin-bottom: 0.5rem;
}
.card__text {
  color: var(--text-light, #5C6E7C);
  font-size: 0.9rem;
  line-height: 1.6;
  flex: 1;
}
.card__link {
  color: var(--accent, #D2291D);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9rem;
  margin-top: 1rem;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s;
  cursor: pointer;
  border: 2px solid transparent;
}
.btn--primary {
  background: var(--accent, #D2291D);
  color: var(--primary-dark, #0E2A47);
  border-color: var(--accent, #D2291D);
}
.btn--primary:hover {
  background: var(--accent-hover, #E13327);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(210, 41, 29, 0.3);
}
.btn--secondary {
  background: transparent;
  color: white;
  border-color: rgba(255, 255, 255, 0.5);
}
.btn--secondary:hover {
  /* G5 - lights up to solid white on hover, matching the primary button.
     Previously this block set only background and border, so `color` leaked
     from the earlier .btn--secondary:hover as var(--primary-dark) over a 10%
     white veil - 1.50:1, invisible. Solid white ground makes that same navy
     label 11.80:1. */
  background: #ffffff;
  border-color: #ffffff;
  color: var(--primary, #14395F);
}
.btn--lg {
  padding: 1rem 2.5rem;
  font-size: 1.05rem;
}
.btn--sm {
  padding: 0.5rem 1.25rem;
  font-size: 0.85rem;
}

/* ---- Layout fix: narrow-screen button overflow ----
   .btn sets white-space:nowrap, so a long label plus 2.5rem of side padding
   could not fit a 375px viewport (measured 370-448px against a 311px column)
   and was silently clipped by body{overflow-x:hidden}. Below 640px let long
   labels wrap and pull the padding in. */
@media (max-width: 639px) {
  .btn {
    white-space: normal;
    text-wrap: balance;
    max-width: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .btn--lg {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* --- CTA Banner --- */
.cta-banner {
  background: linear-gradient(135deg, var(--primary-dark, #0E2A47), var(--primary, #14395F));
  padding: 3.5rem 0;
  text-align: center;
  color: white;
}
.cta-banner h2 {
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: white;
  margin-bottom: 0.75rem;
}
.cta-banner p {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1.5rem;
  font-size: 1rem;
}

/* --- FAQ --- */
.faq__item {
  background: white;
  border-radius: 10px;
  margin-bottom: 0.75rem;
  border: 1px solid var(--border, #D8E2E9);
  overflow: hidden;
}
.faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--primary, #14395F);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  transition: color 0.3s;
}
.faq__question:hover {
  color: var(--accent, #D2291D);
}
.faq__answer {
  padding: 0 1.5rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  color: var(--text, #24343F);
  font-size: 0.95rem;
  line-height: 1.7;
}
.faq__item.active .faq__answer {
  max-height: 500px;
  padding: 0 1.5rem 1.25rem;
}

/* --- Footer --- */
.footer {
  background: linear-gradient(135deg, var(--primary-dark, #0E2A47), var(--primary, #14395F));
  color: var(--text-on-dark, #F5F7F9);
  padding: 4rem 0 2rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: 1.3fr 1fr 1fr;   /* G3 removed the Service Areas column */ gap: 2.5rem; }
}
.footer__title {
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: white;
  margin-bottom: 1.25rem;
  position: relative;
  padding-bottom: 0.75rem;
}
.footer__title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--accent, #D2291D);
}
.footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer__links li {
  margin-bottom: 0.5rem;
}
.footer__links a {
  color: rgba(240, 235, 229, 0.75);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.footer__links a:hover {
  color: var(--accent, #D2291D);
}
.footer__badges {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.footer__badges-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(240, 235, 229, 0.5);
  margin-right: 0.25rem;
}

.footer__badges img {
  height: 32px;
  width: auto;
  background: #fff;
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
  color: rgba(240, 235, 229, 0.5);
}
.footer__bottom a {
  color: rgba(240, 235, 229, 0.5);
  text-decoration: none;
}
.footer__bottom a:hover {
  color: var(--accent, #D2291D);
}

/* --- Testimonials --- */
.testimonial {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border-left: 4px solid var(--accent, #D2291D);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.testimonial__stars {
  color: var(--accent, #D2291D);
  font-size: 1.1rem;
  margin-bottom: 1rem;
}
.testimonial__text {
  font-style: italic;
  color: var(--text, #24343F);
  line-height: 1.7;
  font-size: 0.95rem;
  flex: 1;
  margin-bottom: 1rem;
}
.testimonial__author {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--primary, #14395F);
}
.testimonial__role {
  color: var(--text-light, #5C6E7C);
  font-size: 0.8rem;
}

/* --- Map container --- */
.map-container {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.map-container iframe {
  width: 100%;
  height: 400px;
  border: 0;
  display: block;
}

/* --- Lists with checkmarks --- */
.list-check {
  list-style: none;
  padding: 0;
}
.list-check li {
  padding: 0.5rem 0 0.5rem 2rem;
  position: relative;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text, #24343F);
}
.list-check li::before {
  content: '\eb7b';
  font-family: 'remixicon';
  position: absolute;
  left: 0;
  color: var(--accent, #D2291D);
  font-size: 1.1rem;
  font-weight: 400;
}

/* --- Logos row --- */
.logos-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2.5rem;
}

/* --- Stats row --- */
.stats {
  display: flex;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}
.stat {
  text-align: center;
}
.stat__number {
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--accent, #D2291D);
  line-height: 1;
}
.stat__label {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-light, #5C6E7C);
  margin-top: 0.25rem;
}

/* --- Form inputs consistent --- */
.form__input,
.form__textarea,
.form__select {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1.5px solid var(--border, #D8E2E9);
  border-radius: 8px;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 0.95rem;
  color: var(--text, #24343F);
  background: white;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  outline: none;
  border-color: var(--accent, #D2291D);
  box-shadow: 0 0 0 3px rgba(210, 41, 29, 0.15);
}
.form__textarea {
  resize: vertical;
  min-height: 100px;
}
.form__group {
  margin-bottom: 1rem;
}
.form__label {
  display: block;
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--primary, #14395F);
  margin-bottom: 0.5rem;
}

/* --- Header/Nav consistent --- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--primary, #14395F);
  transition: all 0.3s;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height, 80px);
}
.nav__logo img {
  height: 40px;
  width: auto;
}
.nav__menu {
  /* display/align-items intentionally omitted: the drawer is display:none
     below 1024px and switched to a horizontal flex row inside the
     min-width:1024px block. Setting them here rendered the drawer
     permanently off-canvas and added 105px of horizontal scroll on mobile. */
  list-style: none;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
}
.nav__link {
  color: var(--text-on-dark, #F5F7F9);
  text-decoration: none;
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  transition: color 0.3s, background 0.3s;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.nav__link:hover,
.nav__link.active {
  color: var(--accent, #D2291D);
}
.nav__cta {
  margin-left: 1rem;
}

/* --- Ensure body has top padding for fixed header --- */
body {
  padding-top: var(--header-height, 80px);
}

/* ====================================================================
   FINAL ALIGNMENT FIXES - Force correct layout on all subpages
   ==================================================================== */

/* Page hero H1 - prevent 2-line wrapping */
.page-hero__title,
.page-hero h1 {
  font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
  line-height: 1.2 !important;
  color: white !important;
}

/* --- Section title: LEFT aligned by default on subpages --- */
.section__title {
  text-align: left;
}

/* --- Section header wrapper: CENTERED (for hub pages, homepage) --- */
.section__header {
  text-align: center !important;
}
.section__header .section__title {
  text-align: center !important;
}
.section__header .section__subtitle,
.section__header p {
  text-align: center !important;
  max-width: 72ch !important;  /* was 650px = 81ch at a 16px base */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- Content text: left aligned, full width, under headings --- */
.section > .container > div > p,
.section > .container > div > h2,
.section > .container > p,
.section > .container > h2 {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

/* --- Reduce excessive section padding on content-heavy pages --- */
.page-content .section {
  padding: 3.5rem 0;
}

/* --- Icon box: vertical card layout, equal height --- */
.icon-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: white;
  border-radius: 12px;
  padding: 2rem 1.5rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.04);
  transition: transform 0.3s, box-shadow 0.3s;
  height: 100%;
}
.icon-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
/* Force grid to stretch items to equal height */
.grid--2, .grid--3 {
  align-items: stretch;
}
.icon-box__icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 50%;
  background: rgba(210, 41, 29, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent, #D2291D);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.icon-box__title {
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--primary, #14395F);
  margin-bottom: 0.5rem;
  line-height: 1.3;
  text-align: center;
}
.icon-box__text {
  color: var(--text-light, #5C6E7C);
  font-size: 0.875rem;
  line-height: 1.6;
  text-align: center;
}
/* Grids */
.grid--2 { gap: 1.25rem; }
.grid--3 { gap: 1.25rem; }
@media (min-width: 768px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* --- Content sections: consistent left-aligned --- */
.page-content .section > .container h2,
.page-content .section > .container > div h2,
.page-content .section > .container > div > h2 {
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--primary, #14395F);
  margin-bottom: 0.75rem;
  line-height: 1.3;
  text-align: left !important;
}
.page-content .section > .container p,
.page-content .section > .container > div p,
.page-content .section > .container > div > p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text, #24343F);
  text-align: left !important;
  max-width: none;
}
.page-content .section > .container ul,
.page-content .section > .container > div ul {
  text-align: left;
  max-width: none;
  margin-left: 0;
}
/* Override any inline centered styles on compliance sections */
.page-content .section > .container > div[style*="text-align: center"] {
  text-align: left !important;
  max-width: none !important;
  margin: 0 !important;
}
.page-content .section > .container > div[style*="text-align: center"] h2 {
  text-align: left !important;
}
.page-content .section > .container > div[style*="text-align: center"] p {
  text-align: left !important;
}
/* Hide the big centered icons (shield etc) that look out of place */
.page-content .section > .container > div[style*="text-align: center"] > div[style*="margin-bottom"] {
  display: none;
}
/* Icon boxes: 4 across on desktop, 2 on tablet, 1 on mobile */
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid--2 { grid-template-columns: repeat(4, 1fr); }
}
/* Make icon boxes compact when 4 across */
@media (min-width: 900px) {
  .grid--2 .icon-box {
    padding: 1.5rem 1rem;
  }
  .grid--2 .icon-box__icon {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
  }
  .grid--2 .icon-box__title {
    font-size: 0.9rem;
  }
  .grid--2 .icon-box__text {
    font-size: 0.8rem;
  }
}

/* Testimonials: 3 across on desktop */
[style*="grid-template-columns: repeat(auto-fit, minmax(300px"] {
  grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 899px) {
  [style*="grid-template-columns: repeat(auto-fit, minmax(300px"] {
    grid-template-columns: 1fr !important;
  }
}
/* Grid containers need full width */
.page-content .grid {
  max-width: 100%;
}

/* --- Services overview heading + subtitle: centered --- */
.section--light > .container > .section__title.text-center,
.section--light > .container > .section__subtitle.text-center,
h2.text-center,
p.text-center {
  text-align: center !important;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Fix grid alignment --- */
.grid--2 {
  align-items: start;
  gap: 1.25rem;
}

/* --- Ensure proper spacing between content sections --- */
.section + .section {
  border-top: none;
}

/* --- Trust bar: force single row, compact --- */
.section[style*="padding: 2rem 0"] > .container > div[style*="display: flex"] {
  flex-wrap: nowrap !important;
  gap: 1.5rem !important;
  justify-content: center !important;
}
.section[style*="padding: 2rem 0"] > .container > div[style*="display: flex"] > div {
  white-space: nowrap;
}
.section[style*="padding: 2rem 0"] > .container > div[style*="display: flex"] span {
  font-size: 0.8rem !important;
}
.section[style*="padding: 2rem 0"] > .container > div[style*="display: flex"] i {
  font-size: 1rem !important;
}


/* Cards on dark sections: the section sets white text, the card sets a white
   background — without this the copy renders white-on-white. */
.section--dark .card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: none;
}
.section--dark .card .card__title { color: #ffffff; }
.section--dark .card .card__text  { color: rgba(255, 255, 255, 0.78); }
.section--dark .card .card__link  { color: #ffffff; }


/* Map embeds carry a visible caption so the coverage area is described in
   text as well as in the frame. */
.map-figure { margin: 0; }
.map-figure__caption {
  margin-top: .75rem;
  font-size: .875rem;
  color: var(--text-light);
  line-height: 1.5;
}


/* ============================================================
   Custom marks. These replace the generic icon-in-a-circle and
   pill widgets with devices borrowed from the trade itself.
   ============================================================ */

/* ---- wordmark: inline SVG, so no baked-in white box ---- */
.wordmark { display: inline-flex; align-items: center; text-decoration: none; }
.wordmark svg { display: block; height: 46px; width: auto; overflow: visible; }
.wordmark__name {
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 800; font-size: 30px; font-style: italic;
  letter-spacing: .055em;
}
.wordmark__sub {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-weight: 700; font-size: 8.6px; letter-spacing: .148em;
}
.wordmark--onlight .wordmark__name { fill: var(--accent); }
.wordmark--onlight .wordmark__sub  { fill: var(--primary); }
.wordmark--onlight .wordmark__rule-a { fill: var(--primary); }
.wordmark--onlight .wordmark__rule-b { fill: var(--accent); }
.wordmark--ondark .wordmark__name { fill: #ffffff; }
.wordmark--ondark .wordmark__sub  { fill: rgba(255,255,255,.82); }
.wordmark--ondark .wordmark__rule-a { fill: rgba(255,255,255,.5); }
.wordmark--ondark .wordmark__rule-b { fill: var(--accent); }
.wordmark:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width: 640px) { .wordmark svg { height: 38px; } }

/* ---- nameplate: the riveted data plate every commercial unit carries ---- */
.nameplate {
  position: relative; margin-top: 2rem; max-width: 620px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 3px;
  padding: .9rem 1.35rem 1.05rem;
  backdrop-filter: blur(2px);
}
.nameplate__rivets { position: absolute; inset: 0; width: 100%; height: 100%; }
.nameplate__rivets circle { fill: rgba(255,255,255,.4); }
.nameplate__head {
  margin: 0 0 .7rem; padding-bottom: .6rem;
  border-bottom: 1px solid rgba(255,255,255,.18);
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: .72rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(255,255,255,.72);
}
.nameplate__grid {
  display: grid; grid-template-columns: repeat(5, auto); gap: 0 1.9rem;
  margin: 0; justify-content: start;
}
.nameplate__grid > div { min-width: 0; }
.nameplate__grid dt {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: .62rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: .22rem;
}
.nameplate__grid dd {
  margin: 0; font-family: 'Figtree', system-ui, sans-serif;
  font-size: 1.32rem; font-weight: 800; color: #fff;
  letter-spacing: -.015em; font-variant-numeric: tabular-nums; line-height: 1;
}
.nameplate__grid dd span { font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.7); letter-spacing: .02em; }
@media (max-width: 780px) {
  .nameplate__grid { grid-template-columns: repeat(3, 1fr); gap: .95rem 1rem; }
}
@media (max-width: 460px) {
  .nameplate__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- schematics: technical line drawings, not glyphs in bubbles ---- */
.schematic { display: block; width: 100%; max-width: 172px; height: auto; margin-bottom: 1.15rem; }
.schematic__line {
  fill: none; stroke: var(--primary); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.schematic__hub { fill: var(--primary); stroke: none; }
.schematic__needle { stroke: var(--accent); stroke-width: 2.4; }
.schematic__band { stroke: var(--accent); stroke-width: 3.2; stroke-linecap: round; opacity: .85; }
.schematic__alert path { fill: var(--accent); stroke: none; }
.schematic__pulse { fill: none; stroke: var(--accent); stroke-width: 1.2; opacity: .32; }
.schematic__ghost { stroke-dasharray: 4 4; opacity: .45; }
.schematic__hook { stroke-width: 1.4; }
.schematic__arrow { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.service-card { text-align: left !important; }
.service-card .schematic { margin-left: 0; }

@media (prefers-reduced-motion: no-preference) {
  .service-card:hover .schematic__needle { transform: rotate(16deg); transform-origin: 75px 50px; transition: transform .45s cubic-bezier(.34,1.4,.64,1); }
  .service-card:hover .schematic__pulse  { opacity: .6; transition: opacity .3s; }
}


/* ---- corrections found by rendering ---- */

/* Wordmark: fall back to currentColor so a wrong context can never
   render it invisible; variants only refine the two-tone treatment. */
.wordmark svg { height: 50px; overflow: visible; }
.wordmark__name { fill: currentColor; }
.wordmark__sub  { fill: currentColor; opacity: .74; }
.wordmark__rule-a { fill: currentColor; opacity: .45; }
.wordmark__rule-b { fill: var(--accent); }
.wordmark--onlight { color: var(--primary); }
.wordmark--onlight .wordmark__name { fill: var(--accent); }
.wordmark--onlight .wordmark__sub  { fill: var(--primary); opacity: 1; }
.wordmark--onlight .wordmark__rule-a { fill: var(--primary); opacity: 1; }
.wordmark--ondark { color: #ffffff; }
.wordmark--ondark .wordmark__name { fill: #ffffff; }
.wordmark--ondark .wordmark__sub  { fill: rgba(255,255,255,.85); opacity: 1; }
.wordmark--ondark .wordmark__rule-a { fill: rgba(255,255,255,.55); opacity: 1; }

/* Nameplate: flex so long labels cannot collide, and a darker plate so
   white type survives the bright hero photograph behind it. */
.nameplate {
  background: rgba(9, 24, 41, .62);
  border-color: rgba(255,255,255,.3);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
.nameplate__head { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nameplate__grid {
  display: flex; flex-wrap: wrap; gap: .9rem 2.1rem; justify-content: flex-start;
}
.nameplate__grid > div { min-width: 74px; }
.nameplate__grid dt { white-space: nowrap; }
.nameplate__grid dd { white-space: nowrap; }
@media (max-width: 780px) { .nameplate__grid { gap: .9rem 1.4rem; } }


/* Rivets as CSS dots - an SVG viewBox stretched to a wide box turns
   circles into ovals, so draw them with radial-gradients instead. */
.nameplate::before, .nameplate::after {
  content: ""; position: absolute; left: 10px; right: 10px; height: 5px;
  background:
    radial-gradient(circle 2.5px at 0 50%,   rgba(255,255,255,.5) 96%, transparent 98%) left  center / 50% 100% no-repeat,
    radial-gradient(circle 2.5px at 100% 50%, rgba(255,255,255,.5) 96%, transparent 98%) right center / 50% 100% no-repeat;
  pointer-events: none;
}
.nameplate::before { top: 9px; }
.nameplate::after  { bottom: 9px; }


/* ---- wordmark: context-proof ----
   Footers differ per template (white on the homepage, navy on city pages), so
   a hardcoded light/dark variant is guaranteed to be wrong somewhere. Everything
   inherits currentColor instead; only the lower rule stays brand red. */
.wordmark { color: inherit; }
.wordmark__name { fill: currentColor !important; }
.wordmark__sub  { fill: currentColor !important; opacity: .78; }
.wordmark__rule-a { fill: currentColor !important; opacity: .42; }
.wordmark__rule-b { fill: var(--accent) !important; opacity: 1; }


/* Light-ground nameplate, for pages whose trust bar sits on a pale section. */
.nameplate--light {
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(24,32,44,.07);
  margin: 0 auto; max-width: 780px;
}
.nameplate--light::before, .nameplate--light::after {
  background:
    radial-gradient(circle 2.5px at 0 50%,   rgba(24,32,44,.28) 96%, transparent 98%) left  center / 50% 100% no-repeat,
    radial-gradient(circle 2.5px at 100% 50%, rgba(24,32,44,.28) 96%, transparent 98%) right center / 50% 100% no-repeat;
}
.nameplate--light .nameplate__head { color: var(--text-light); border-bottom-color: var(--border); }
.nameplate--light .nameplate__grid dt { color: var(--text-light); }
.nameplate--light .nameplate__grid dd { color: var(--primary); }
.nameplate--light .nameplate__grid dd span { color: var(--text-light); }
.nameplate--light .nameplate__grid { justify-content: space-between; }

/* Stamped tile replaces the pale bubble behind icons. Square, ruled,
   consistent with the nameplate rather than a soft circle. */
.stamp {
  width: 52px; height: 52px; border: 2px solid var(--primary); border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.15rem; position: relative; background: transparent;
}
.stamp::after {
  content: ""; position: absolute; left: -2px; right: -2px; bottom: -2px;
  height: 3px; background: var(--accent);
}
.stamp i { font-size: 1.5rem; color: var(--primary); line-height: 1; }
.section--dark .stamp { border-color: rgba(255,255,255,.55); }
.section--dark .stamp i { color: #fff; }


/* ============================================================
   Review corrections
   ============================================================ */

/* --- Wordmark: the header sets dark text on a navy bar, so pure
   inheritance renders it invisible. Set both grounds explicitly.
   Brand red on navy is only 2.3:1, so the on-dark name uses a
   brightened red that clears 3:1 for large text. --- */
.header .wordmark, .hd .wordmark, header .wordmark { color: #ffffff; }
.header .wordmark__name, .hd .wordmark__name, header .wordmark__name { fill: #EF5B48 !important; }
.header .wordmark__sub,  .hd .wordmark__sub,  header .wordmark__sub  { fill: #ffffff !important; opacity: 1; }
.header .wordmark__rule-a, .hd .wordmark__rule-a, header .wordmark__rule-a { fill: rgba(255,255,255,.55) !important; opacity: 1; }
.header .wordmark__rule-b, .hd .wordmark__rule-b, header .wordmark__rule-b { fill: #EF5B48 !important; }
.footer .wordmark { color: #ffffff; }
.footer .wordmark__name { fill: #EF5B48 !important; }
.footer .wordmark__sub  { fill: #ffffff !important; opacity: 1; }

/* --- Proof bar: number on its own line, label beneath, no orphan wrapping --- */
.proofbar {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--border);
}
.proofbar .stat {
  padding: 1.65rem 1.1rem; text-align: center;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
}
.proofbar .stat:last-child { border-right: none; }
.proofbar .stat__number {
  display: block; font-family: 'Figtree', system-ui, sans-serif;
  font-size: 2rem; font-weight: 800; line-height: 1; color: var(--accent);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-bottom: .5rem;
}
.proofbar .stat__label {
  display: block; font-size: .7rem; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--text-light); line-height: 1.45;
  max-width: 18ch; text-wrap: balance; white-space: normal;
}
@media (max-width: 900px) {
  .proofbar { grid-template-columns: repeat(3, 1fr); }
  .proofbar .stat:nth-child(3n) { border-right: none; }
  .proofbar .stat { border-top: 1px solid var(--border); }
}
@media (max-width: 560px) { .proofbar { grid-template-columns: repeat(2, 1fr); } }

/* --- Glass cards: the rightmost sat over a lighter part of the photo and
   washed out. Raise the fill and add a defined edge so every card reads
   the same regardless of what is behind it. --- */
.section--dark [style*="backdrop-filter"],
.section--dark .glass-card,
.glass {
  background: rgba(10, 26, 45, .58) !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.24) !important;
}

/* --- Reviews: drop the trim, give them the glass treatment on the dark
   ground so the effect has something to sit against. --- */
.section--dark .testimonial {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  border-left: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  padding: 1.9rem 1.75rem;
}
.section--dark .testimonial p,
.section--dark .testimonial blockquote { color: rgba(255,255,255,.92); }
.section--dark .testimonial__info strong,
.section--dark .testimonial__author { color: #ffffff; }
.section--dark .testimonial__info span,
.section--dark .testimonial__footer span { color: rgba(255,255,255,.68); }
.section--dark .testimonial__avatar-placeholder {
  background: rgba(255,255,255,.16); color: #fff;
}
.section--dark .testimonial .ri-star-fill { color: #F5A623; }

/* --- Hero quote card: centre the heading so it balances the panel --- */
.hero__form-card { text-align: center; }
.hero__form-card form,
.hero__form-card .form__group { text-align: left; }
.hero__form-card h2, .hero__form-card h3 { margin-left: auto; margin-right: auto; max-width: 22ch; }

/* nameplate now sits in the hero column, so give it room */
.hero__actions + .nameplate { margin-top: 1.9rem; }


/* ============================================================
   Brand red + centred service cards
   ============================================================ */

/* The wordmark uses the actual red sampled from the client's logo file
   (#F60302), not the muted UI accent. Logotypes are exempt from WCAG
   contrast minimums (SC 1.4.11), so the true brand colour is used here
   while buttons and UI keep the softer --accent. */
:root { --brand-red: #F60302; --brand-blue: #0001FE; }
.wordmark__name { fill: var(--brand-red) !important; }
.header .wordmark__name, .hd .wordmark__name, header .wordmark__name,
.footer .wordmark__name { fill: var(--brand-red) !important; }
.wordmark__rule-b,
.header .wordmark__rule-b, .hd .wordmark__rule-b, header .wordmark__rule-b {
  fill: var(--brand-red) !important;
}

/* Service cards: centre everything, matching the section header above them. */
.service-card { text-align: center !important; }
.service-card .schematic { margin-left: auto !important; margin-right: auto !important; }
.service-card h3, .service-card p { text-align: center; }
.service-card a { display: inline-block; }


/* Hero: centre the nameplate and the service ticks under the buttons */
.hero .nameplate { margin-left: auto; margin-right: auto; }
.hero .nameplate__head { text-align: center; }
.hero .nameplate__grid { justify-content: center; }
.hero__services--centre {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem 1.9rem;
  margin-left: auto; margin-right: auto;
  margin-bottom: 1.75rem;
}


/* ============================================================
   Why Sensible: the right-hand photograph is absolutely positioned
   and overlaps the third card column, so bright areas of the image
   were showing through the translucent cards and killing the text.
   Fix is two-part: veil the photo where it meets the grid, and give
   the cards a real frosted fill instead of 8% white.
   ============================================================ */
.standard-image-rhs { position: relative; }
.standard-image-rhs::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    100deg,
    rgba(14, 42, 71, .96) 0%,
    rgba(14, 42, 71, .88) 22%,
    rgba(14, 42, 71, .55) 46%,
    rgba(14, 42, 71, .18) 72%,
    rgba(14, 42, 71, .05) 100%);
  pointer-events: none;
}
.standard-stat {
  background: rgba(11, 31, 53, .72) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
  position: relative; z-index: 3;
}
.standard-stat:hover {
  background: rgba(11, 31, 53, .82) !important;
  border-color: rgba(255, 255, 255, .34) !important;
}
.standard-stat__label { color: rgba(255,255,255,.72) !important; }
.standard-stat__desc  { color: rgba(255,255,255,.88) !important; }
.standard-stat__number { color: #FF6152 !important; }
.standard-stat__icon {
  background: rgba(246, 3, 2, .26) !important;
  border: 1px solid rgba(255,255,255,.18);
}
@supports not (backdrop-filter: blur(2px)) {
  .standard-stat { background: rgba(11, 31, 53, .93) !important; }
}


/* --- Why Sensible: lighter cards + heading on one line ---
   The photograph now carries a scrim, so the cards no longer need to be
   near-opaque to stay legible; drop them back to a light frosted white.
   The section header was capped at 700px while the heading needs 781px
   and the grid beside it is 1000px, so it wrapped and fell out of
   alignment. Widen the header to the grid width. */
#why-sensible .standard-stat {
  background: rgba(255, 255, 255, .13) !important;
  border: 1px solid rgba(255, 255, 255, .26) !important;
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}
#why-sensible .standard-stat:hover {
  background: rgba(255, 255, 255, .19) !important;
  border-color: rgba(255, 255, 255, .38) !important;
}
#why-sensible .standard-stat__label { color: var(--text-light, #5C6E7C) !important; }
#why-sensible .standard-stat__desc  { color: var(--text, #24343F) !important; }
#why-sensible .standard-stat__number { color: var(--accent, #D2291D) !important; }
@supports not (backdrop-filter: blur(2px)) {
  #why-sensible .standard-stat { background: rgba(20, 57, 95, .88) !important; }
}

/* heading: give it the grid's width so it sets on one line and lines up */
#why-sensible .section__header { max-width: 1000px; margin-left: auto; margin-right: auto; }
#why-sensible .section__title  { max-width: none; }
#why-sensible .section__subtitle { max-width: 68ch; margin-left: auto; margin-right: auto; }

/* the scrim can ease off a little now the cards carry themselves */
.standard-image-rhs::after {
  background: linear-gradient(
    100deg,
    rgba(14, 42, 71, .94) 0%,
    rgba(14, 42, 71, .82) 24%,
    rgba(14, 42, 71, .46) 50%,
    rgba(14, 42, 71, .14) 76%,
    rgba(14, 42, 71, .02) 100%) !important;
}


/* --- Why Sensible: cards back to their original weight, photo brighter --- */
#why-sensible .standard-stat {
  background: rgba(255, 255, 255, .58) !important;
  border: 1px solid rgba(255, 255, 255, .78) !important;
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  box-shadow: 0 10px 28px rgba(14, 42, 71, .10);
}
#why-sensible .standard-stat:hover {
  background: rgba(255, 255, 255, .96) !important;
  border-color: rgba(20, 57, 95, .22) !important;
}
@supports not (backdrop-filter: blur(2px)) {
  #why-sensible .standard-stat { background: rgba(255, 255, 255, .97) !important; }
}
.standard-image-rhs::after {
  /* soft edge only -- the people must stay visible */
  background: linear-gradient(
    100deg,
    #ffffff 0%,
    rgba(255, 255, 255, .55) 12%,
    rgba(255, 255, 255, .10) 26%,
    rgba(255, 255, 255, 0) 40%) !important;
}


/* --- Why Sensible: keep the six numbers on a shared baseline ---
   "Rapid, Local, Dependable Support" wraps to two lines while the other
   five labels are one, which pushed that card's figure 19px below the
   rest of the row. Reserve two lines on every label so the numbers and
   descriptions align regardless of how long the copy is. */
#why-sensible .standard-stat__label {
  /* label line-height is 19.04px, so two lines is 38.08px. 2.5em computed to
     28px - between one line and two - which left the wrapping card 10px low.
     1.7 is the label's line-height ratio, so 3.4em is exactly two lines. */
  min-height: 3.4em;
  min-height: 2lh;            /* exact, where the lh unit is supported */
  display: block;
}
#why-sensible .standard-stat__info { justify-content: flex-start; }
@media (max-width: 900px) {
  #why-sensible .standard-stat__label { min-height: 0; }
}


/* ============================================================
   Card glyphs: line schematics in place of the icon font, so the
   cards share the vocabulary used on the What We Do section.
   ============================================================ */
.glyph { width: 30px; height: 30px; display: block; }
.g-l { fill: none; stroke: var(--primary); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.g-a { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.g-f { fill: var(--accent); stroke: none; }
.section--dark .g-l, .sx.nav2 .g-l { stroke: #ffffff; }
.section--dark .g-a, .sx.nav2 .g-a { stroke: #FF6152; }
.section--dark .g-f, .sx.nav2 .g-f { fill: #FF6152; }
.icon-box__icon .glyph, .stamp .glyph { margin: 0 auto; }

/* Cards read centred, matching the What We Do section */
.icon-box {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
}
.icon-box__body { text-align: center; }
.icon-box__title { text-align: center; }
.icon-box__icon, .icon-box__icon--circle { margin: 0 auto .9rem; }
@media (max-width: 640px) { .icon-box { text-align: center; } }


/* Any remaining pale bubble behind a card glyph becomes a stamped tile. */
.icon-box__icon, .icon-box__icon--circle {
  border-radius: 3px !important;
  border: 2px solid var(--primary) !important;
  background: transparent !important;
  box-shadow: 0 3px 0 -1px var(--accent) !important;
}
.section--dark .icon-box__icon, .section--dark .icon-box__icon--circle {
  border-color: rgba(255,255,255,.55) !important;
  box-shadow: 0 3px 0 -1px #FF6152 !important;
}
.why-choose .icon-box__icon {
  background: rgba(210, 41, 29, 0.10) !important;
  border: 1px solid rgba(20, 57, 95, 0.18) !important;
}
.glyph { width: 26px; height: 26px; }


/* ============================================================
   Card scenes: the same treatment as the homepage What We Do
   section - a bare line drawing, no tile or bubble around it.
   ============================================================ */
.icon-box { display: block !important; text-align: center; }
.icon-box .schematic {
  display: block;
  width: 100%;
  max-width: 168px;
  height: auto;
  margin: 0 auto 1.15rem;
}
.icon-box__title { text-align: center; margin-bottom: .5rem; }
.icon-box__text { text-align: center; }
.section--dark .icon-box .schematic__line { stroke: #ffffff; }
.section--dark .icon-box .schematic__arrow { stroke: #FF6152; }
.section--dark .icon-box .schematic__alert path,
.section--dark .icon-box .schematic__alert circle { fill: #FF6152; }


/* ============================================================
   Scene motion, applied to every card type.
   The original rule only matched .service-card, which exists on the
   homepage, so the scenes on city, industry and service pages sat
   static. Same motion now runs wherever a scene appears.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .schematic__needle,
  .schematic__pulse,
  .schematic__arrow,
  .schematic__alert { transition: transform .45s cubic-bezier(.34,1.4,.64,1), opacity .3s ease; }

  /* gauge needle sweeps up into the band */
  .service-card:hover .schematic__needle,
  .icon-box:hover  .schematic__needle,
  .card:hover      .schematic__needle {
    transform: rotate(16deg); transform-origin: 75px 50px;
  }

  /* fault ring pulses */
  .service-card:hover .schematic__pulse,
  .icon-box:hover  .schematic__pulse,
  .card:hover      .schematic__pulse { opacity: .65; }

  /* swap and cost arrows nudge forward */
  .service-card:hover .schematic__arrow,
  .icon-box:hover  .schematic__arrow,
  .card:hover      .schematic__arrow { transform: translateX(4px); }

  /* alert marks lift slightly */
  .service-card:hover .schematic__alert,
  .icon-box:hover  .schematic__alert,
  .card:hover      .schematic__alert { transform: translateY(-2px); }
}


/* ============================================================
   Layout audit fixes
   ============================================================ */

/* Line length: city and industry pages ran 142-152 characters per line
   against a 60-75 readable maximum. Cap running prose in ch so the
   limit tracks font-size rather than a fixed pixel width. */
.section__subtitle,
.page-hero__subtitle {
  max-width: 68ch;
}
.section__subtitle.text-center,
.page-hero__subtitle {
  margin-left: auto;
  margin-right: auto;
}
.faq__answer-inner p,
.container > p,
.container > div > p {
  max-width: 72ch;
}

/* Touch targets: the mobile drawer links measured 39px and the carousel
   dots 10px, both under the 44px minimum. Grow the drawer links outright;
   for the dots keep the 10px visual and extend the hit area with a
   transparent pseudo-element so the dot row does not change size. */
@media (max-width: 1023px) {
  .nav__menu .nav__link {
    min-height: 48px;
    display: flex;
    align-items: center;
  }
}

.carousel__dot {
  position: relative;
}
.carousel__dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}


/* Line length, part 2.
   The "full width content" rules above (.page-content .section p,
   .section > .container > div > p, etc.) set max-width:none to drop an
   inherited centering constraint. They outrank .section__subtitle on
   specificity, so prose was running 142-152 characters per line at 1440px
   against a 60-75 readable maximum. Re-cap at the same selectors -- these
   come later in the file, so they win on order without needing !important.
   Alignment and margins are deliberately left untouched. */
.page-content .section p,
.page-content .section > .container > p,
.page-content .section > .container p,
.page-content .section > .container > div p,
.page-content .section > .container > div > p,
.section > .container > div > p,
.section > .container > p {
  max-width: 72ch;
}
.page-content .section > .container ul,
.page-content .section > .container > div ul {
  max-width: 72ch;
}
.job-card__description {
  max-width: 72ch;
}


/* The centered lead subtitles were capped at 800px, which is 100 characters
   at a 16px base -- past the readable maximum. Express it in ch so it tracks
   the type size. */
.section--light > .container > .section__subtitle.text-center,
.section--gray > .container > .section__subtitle.text-center,
.page-hero__subtitle,
.section__subtitle.text-center {
  max-width: 72ch;
}
.faq__question, .faq__answer-inner, .faq__answer-inner p {
  max-width: 72ch;
}


/* faq.html nests answers directly in .faq__answer (no __inner wrapper). */
.faq__answer p,
.faq__answer li {
  max-width: 72ch;
}


/* ============================================================
   Service-area "Why Choose Sensible": matched to the homepage
   Why Sensible treatment -- navy ground, photograph bleeding in
   from the right behind a diagonal edge, frosted cards over it.
   ============================================================ */
.why-choose {
  background: #ffffff;
  position: relative;
  overflow: hidden;
}
.why-choose__inner { position: relative; z-index: 2; }
.why-choose .section__title { color: var(--primary, #14395F); }

/* the photo panel, same geometry as the homepage */
.why-choose__media {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  /* client: show both people -- photo panel wider, blue edge further left */
  width: 46%;
  z-index: 1;
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
  overflow: hidden;
}
.why-choose__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.why-choose__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    100deg,
    #ffffff 0%,
    rgba(255, 255, 255, .85) 16%,
    rgba(255, 255, 255, .35) 42%,
    rgba(255, 255, 255, .05) 70%,
    rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

/* frosted cards, same recipe as #why-sensible on the homepage */
.why-choose .icon-box {
  background: rgba(255, 255, 255, .58);
  border: 1px solid rgba(20, 57, 95, .12);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  box-shadow: 0 10px 30px rgba(14, 42, 71, .10);
  border-radius: 12px;
  padding: 1.9rem 1.6rem;
  position: relative;
  z-index: 3;
  transition: background .3s ease, border-color .3s ease;
}
.why-choose .icon-box:hover {
  background: rgba(255, 255, 255, .95);
  border-color: rgba(20, 57, 95, .22);
}
@supports not (backdrop-filter: blur(2px)) {
  .why-choose .icon-box { background: rgba(255, 255, 255, .96); }
}
.why-choose .icon-box__title { color: var(--primary, #14395F); }
.why-choose .icon-box__text  { color: var(--text, #24343F); }

/* The third heading is a city name longer than the other two titles, so it
   wraps and used to push its body copy a line below the neighbours. Lock the
   title box to two lines so all three bodies start together. */
.why-choose .icon-box__title {
  min-height: 2.6em;
  min-height: 2lh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
@media (max-width: 767px) {
  .why-choose .icon-box__title { min-height: 0; display: block; }
}

/* Below 1024px the diagonal panel has nowhere to sit, but hiding it outright
   would mean the only photograph of people never reaches mobile -- which is
   where most of this traffic is. Reflow it into a band above the cards. */
@media (max-width: 1023px) {
  #why-sensible.why-choose .why-choose__media {
    position: relative;
    width: 100%;
    inset: auto;
    clip-path: none;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    margin: 0 0 2rem;
    order: -1;
  }
  #why-sensible.why-choose .why-choose__media img { object-position: 68% center; }
  #why-sensible.why-choose .why-choose__media::after {
    background: linear-gradient(0deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,.12) 55%, rgba(255,255,255,0) 100%);
  }
  #why-sensible.why-choose { display: flex; flex-direction: column; }
  #why-sensible.why-choose .why-choose__inner { order: 0; }
}


/* The service-area pages colour headings and prose through four-part
   selectors (.page-content .section > .container p and friends), which
   outrank any class-only rule. Scope by the section id instead -- the id
   wins outright, and .why-choose keeps it off the homepage section that
   shares this id. */
#why-sensible.why-choose .section__title,
#why-sensible.why-choose h2 { color: var(--primary, #14395F); }
#why-sensible.why-choose .icon-box__title { color: var(--primary, #14395F); }
#why-sensible.why-choose .icon-box__text {
  color: var(--text, #24343F);
  opacity: 1;
}
#why-sensible.why-choose .section__subtitle { color: var(--text-light, #5C6E7C); }
#why-sensible.why-choose p { color: var(--text, #24343F); }

/* Lift the scrim: this photograph is far brighter than the homepage one, so
   the right-hand card needs more ground beneath it to stay legible. */
#why-sensible.why-choose .why-choose__media::after {
  background: linear-gradient(
    100deg,
    #ffffff 0%,
    rgba(255, 255, 255, .85) 16%,
    rgba(255, 255, 255, .35) 40%,
    rgba(255, 255, 255, .05) 68%,
    rgba(255, 255, 255, 0) 100%);
}
#why-sensible.why-choose .icon-box {
  background: rgba(255, 255, 255, .58);
  border-color: rgba(255, 255, 255, .78);
}


/* Composition: cap the card grid the way the homepage caps its stats grid,
   so the right-hand strip of photograph stays clear of the cards, and aim
   the crop at the two figures rather than the centre of the frame. */
@media (min-width: 1024px) {
  #why-sensible.why-choose .why-choose__grid {
    /* cards keep to the left so the widened photo stays clear of them --
       the client wants both people visible, not frosted behind a card */
    max-width: 930px;
    margin-left: 0;
    margin-right: auto;
  }
  #why-sensible.why-choose .section__title { max-width: 1000px; margin: 0 auto; }
}
#why-sensible.why-choose .why-choose__media img { object-position: 62% center; }


/* Why Choose widgets: the same minimal badge the homepage stat cards use --
   a 48px tinted disc holding a 26px line glyph -- in place of the larger
   schematics. The generic .icon-box__icon rule stamps a square tile with
   !important, so the id plus !important is what it takes to override it. */
#why-sensible.why-choose .icon-box__icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50% !important;
  background: rgba(246, 3, 2, .26) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.15rem !important;
}
#why-sensible.why-choose .icon-box__icon .glyph { width: 26px; height: 26px; }


/* Why Choose cards: badge and heading share a header row, body copy runs
   full width beneath. Same reading order as the homepage stat cards, but
   the copy here is a paragraph rather than a figure, so it gets the whole
   card width instead of a narrow column beside the badge.
   Takes roughly 110px of height out of every card. */
#why-sensible.why-choose .icon-box {
  text-align: left;
  padding: 1.5rem 1.5rem 1.6rem;
}
#why-sensible.why-choose .icon-box__head {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-height: 48px;          /* the badge; a two-line title still fits */
  margin-bottom: .9rem;
}
#why-sensible.why-choose .icon-box__icon {
  margin: 0 !important;
  flex-shrink: 0;
}
#why-sensible.why-choose .icon-box__title {
  text-align: left;
  margin: 0;
  min-height: 0;
  display: block;
  align-items: initial;
  justify-content: initial;
  line-height: 1.3;
}
#why-sensible.why-choose .icon-box__text {
  text-align: left;
  margin: 0;
}


/* Headings sit on one line beside the badge. 208px is what a 320px card
   leaves once the badge and gap are taken out; at the inherited 18.4px even
   the short titles measured 195-209px, so drop a step for headroom. Below
   1024px the cards narrow past what any sensible size can hold, so let them
   wrap there -- the 48px header row already absorbs a second line. */
#why-sensible.why-choose .icon-box__title {
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
}
@media (min-width: 1024px) {
  #why-sensible.why-choose .icon-box__title { white-space: nowrap; }
}


/* ============================================================
   City and industry pages: adopt the homepage section-header
   convention. The homepage runs a centred eyebrow + title on 9 of
   13 sections; these pages had it on none, and the earlier
   "full width content" rules left-aligned every heading, so the
   two page types read as different sites.

   Only the header block centres. Running copy and lists stay left
   aligned -- centred body text is the thing those rules were
   right to prevent.
   ============================================================ */
.page-content .section__header {
  text-align: center;
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
}
.page-content .section__header .section__title,
.page-content .section__header .section__label {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: none;
}
.page-content .section__header .section__label { display: block; }

/* the dark Why Choose band keeps its own header treatment */
#why-sensible.why-choose .section__header { margin-bottom: 2.25rem; }
#why-sensible.why-choose .section__label { color: #FF6152; }


/* The "Content sections: consistent left-aligned" block above sets
   .page-content .section > .container h2 to left with !important, at a
   higher specificity than a plain .section__header rule. Exempt the header
   block specifically -- running copy below it still goes left, which is
   what that rule is there for. */
.page-content .section > .container .section__header,
.page-content .section > .container > div .section__header {
  text-align: center !important;
}
.page-content .section > .container .section__header h2,
.page-content .section > .container .section__header .section__title,
.page-content .section > .container > div .section__header h2 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.page-content .section > .container .section__header .section__label,
.page-content .section > .container > div .section__header .section__label {
  text-align: center !important;
}


/* With the heading centred, left-aligned copy pinned to the container edge
   left half the row empty. Centre the measure as a column instead -- the
   text stays left-aligned, the block sits under the heading. The width is
   in rem, not ch: paragraphs run 0.95rem and lists 1rem, so a ch measure
   resolved to two different widths and left their left edges 14px apart.
   34rem is ~72 characters at the body size. Grids are untouched, so card
   rows still span the full container. */
.page-content .section > .container > p,
.page-content .section > .container > div > p,
.page-content .section > .container > ul,
.page-content .section > .container > div > ul,
.page-content .section > .container > div > ol {
  max-width: 34rem;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ============================================================
   Service panels: the city-page prose sections, rebuilt as one
   repeating component instead of 8-10 stacked walls of text.
   Schematic scene on a tinted rail, prose and checklist beside
   it, sides alternating section by section. Reuses the homepage
   What We Do vocabulary: line scenes, red checks, card radius.
   ============================================================ */
.svc-panel {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
  align-items: stretch;
  max-width: 1060px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(20, 57, 95, .10);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(14, 42, 71, .07);
  overflow: hidden;
}
.svc-panel__media {
  background:
    linear-gradient(160deg, rgba(20, 57, 95, .055) 0%, rgba(20, 57, 95, .028) 100%);
  border-right: 1px solid rgba(20, 57, 95, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 2rem;
}
.svc-panel__media .schematic {
  width: 100%;
  max-width: 280px;
  margin: 0;
}
.svc-panel--flip {
  /* order alone swaps position but not track widths -- the text would
     inherit the narrow .8fr column. Mirror the template too. */
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr);
}
.svc-panel--flip .svc-panel__media {
  order: 2;
  border-right: none;
  border-left: 1px solid rgba(20, 57, 95, .08);
}
.svc-panel__body {
  padding: 2.25rem 2.5rem;
}
.svc-panel__body p {
  text-align: left !important;
  max-width: none !important;
  margin: 0 0 1rem !important;
}
.svc-panel__body p:last-child { margin-bottom: 0 !important; }
/* checklist: two columns of red checks on desktop */
.svc-panel__body ul {
  list-style: none;
  padding: 0;
  margin: .25rem 0 1.25rem !important;
  max-width: none !important;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.5rem;
}
.svc-panel__body ul li { text-align: left; }
/* scene motion on hover, same as the homepage cards */
@media (prefers-reduced-motion: no-preference) {
  .svc-panel:hover .schematic__needle {
    transform: rotate(16deg);
    transform-origin: 75px 50px;
    transition: transform .45s cubic-bezier(.34, 1.4, .64, 1);
  }
  .svc-panel:hover .schematic__arrow { transform: translateX(4px); }
  .svc-panel:hover .schematic__alert { transform: scale(1.12); transform-origin: center; }
}
@media (max-width: 899px) {
  .svc-panel { grid-template-columns: minmax(0, 1fr); }
  .svc-panel__media,
  .svc-panel--flip .svc-panel__media {
    order: 0;
    border: none;
    border-bottom: 1px solid rgba(20, 57, 95, .08);
    padding: 1.75rem 2rem;
  }
  .svc-panel__media .schematic { max-width: 210px; }
  .svc-panel__body { padding: 1.75rem 1.5rem; }
  .svc-panel__body ul { grid-template-columns: minmax(0, 1fr); }
}


/* checklist items: top-align the check when the line wraps
   (inline style says center, so this needs !important) */
.svc-panel__body ul li {
  align-items: flex-start !important;
}
.svc-panel__body ul li i { margin-top: .15em; }


/* ============================================================
   Night Console: the city-page service discussions in one dark
   console -- V4 prototype's machined rail in V3's palette. All
   sections stay stacked and visible (nothing behind tabs, every
   anchor deep-linkable); the rail is a scroll-spy whose LED
   tracks the section in view. Colour/alignment rules are scoped
   through #service-details because the page-content typography
   rules run at three-class specificity.
   ============================================================ */
.nc-band {
  /* white shift: light ground with a soft red/blue wash -- partly the
     'opportunistic accents', partly so the glass has something to
     refract; frost over flat white computes to nothing */
  background:
    radial-gradient(55% 42% at 12% 18%, rgba(46, 111, 217, 0.10), transparent 62%),
    radial-gradient(48% 40% at 88% 82%, rgba(210, 41, 29, 0.07), transparent 62%),
    #F5F7F9;
}
.nc-console {
  /* No shell: the glass sections are the cards, and boxing them again in a
     parent frame read as cards-on-cards. The rail carries its own panel. */
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  column-gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 1160px;
  margin: 0 auto;
}

/* ---------- rail ---------- */
.nc-rail__stick {
  position: sticky;
  top: calc(var(--header-height-scrolled, 64px) + 12px);
  display: flex;
  flex-direction: column;
  padding-bottom: 1.25rem;
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 12px;
  box-shadow: 0 14px 34px -18px rgba(14, 42, 71, 0.22);
  overflow: hidden;
}
.nc-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px;
  border-bottom: 1px solid rgba(20, 57, 95, 0.10);
  text-decoration: none;
}
.nc-tab__text {
  flex: 1;
  min-width: 0;
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1.7;
  text-transform: uppercase;
  color: rgba(20, 57, 95, 0.78);
}
.nc-tab__num {
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 2px;
  color: rgba(20, 57, 95, 0.55);
}
.nc-tab:hover .nc-tab__text { color: var(--primary, #14395F); }
.nc-led {
  position: relative;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(20, 57, 95, 0.35);
}
.nc-led::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  box-shadow: 0 0 12px 3px rgba(255, 97, 82, 0.55);
  opacity: 0;
  transition: opacity .3s ease;
}
.nc-tab.is-active .nc-led { background: #FF6152; border-color: #FF6152; }
.nc-tab.is-active .nc-led::after { opacity: 1; }
.nc-tab.is-active .nc-tab__text { color: var(--primary, #14395F); }
.nc-ticks {
  margin-top: auto;
  padding: 1.1rem 18px 0;
  display: flex;
  gap: 6px;
}
.nc-ticks span { width: 2px; height: 18px; background: rgba(20, 57, 95, 0.16); }

/* ---------- stream ---------- */
.nc-stream {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}
.nc-sec {
  scroll-margin-top: calc(var(--header-height-scrolled, 64px) + 24px);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 1rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: 0 10px 30px rgba(14, 42, 71, 0.08);
}
@supports not (backdrop-filter: blur(2px)) {
  .nc-sec { background: rgba(255, 255, 255, 0.94); }
}
#service-details .nc-sec__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .8rem;
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent, #D2291D);
  max-width: none;
}
#service-details .nc-sec__eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--accent, #D2291D); }
#service-details .nc-sec__title {
  margin: 0 0 1.1rem;
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.65rem);
  line-height: 1.25;
  color: var(--primary, #14395F);
  max-width: none;
  text-align: left;
}
.nc-sec__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}
.nc-sec__grid > * { min-width: 0; }
#service-details .nc-sec p {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text, #24343F);
  max-width: none;
}
#service-details .nc-sec p:last-child { margin-bottom: 0; }
#service-details .nc-chips {
  list-style: none;
  margin: .25rem 0 1.1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  max-width: none;
}
.nc-chip {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .7rem .9rem;
  border: 1px solid rgba(20, 57, 95, 0.10);
  border-radius: .6rem;
  background: #F5F7F9;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text, #24343F);
}
.nc-chip i { color: #FF6152; font-size: 1.15rem; line-height: 1.2; flex-shrink: 0; }

/* ---------- figure plate ---------- */
#service-details .nc-plate {
  margin: 0;
  position: relative;
  border-radius: .75rem;
  border: 1px solid rgba(14, 42, 71, 0.55);
  background:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    #0B2038;
  background-size: 20px 20px, 20px 20px, auto;
  padding: 2.1rem 1.6rem 1.4rem;
}
.nc-plate__tag,
.nc-plate__sht {
  position: absolute;
  top: .8rem;
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: .18em;
}
.nc-plate__tag { left: 1rem; color: #FF6152; }
.nc-plate__sht { right: 1rem; color: rgba(245, 247, 249, 0.55); }
#service-details .nc-plate .schematic {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
}
#service-details .nc-plate .schematic__line {
  fill: none;
  stroke: #fff;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#service-details .nc-plate .schematic__ghost { stroke: rgba(255, 255, 255, 0.5); stroke-dasharray: 4 3; }
#service-details .nc-plate .schematic__hub { fill: #fff; stroke: none; }
#service-details .nc-plate .schematic__needle { stroke: #FF6152; stroke-width: 2.4; }
#service-details .nc-plate .schematic__band { stroke: #FF6152; stroke-width: 3.2; opacity: .85; }
#service-details .nc-plate .schematic__alert path,
#service-details .nc-plate .schematic__alert circle { fill: #FF6152; stroke: none; }
#service-details .nc-plate .schematic__arrow {
  fill: none;
  stroke: #FF6152;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (prefers-reduced-motion: no-preference) {
  #service-details .nc-plate .schematic__arrow { transition: transform .4s cubic-bezier(.34, 1.4, .64, 1); }
  .nc-sec:hover .schematic__arrow { transform: translateX(4px); }
  .nc-sec:hover .schematic__needle {
    transform: rotate(16deg);
    transform-origin: 75px 50px;
    transition: transform .45s cubic-bezier(.34, 1.4, .64, 1);
  }
}

@media (max-width: 899px) {
  .nc-console { grid-template-columns: minmax(0, 1fr); }
  .nc-rail { margin-bottom: 1.25rem; }
  .nc-rail__stick {
    position: sticky;
    top: var(--header-height-scrolled, 64px);
    z-index: 5;
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 0;
    background: #ffffff;
    border-radius: 12px;
  }
  .nc-tab { flex: 1 1 45%; min-width: 0; padding: 13px 12px; border-bottom: 1px solid rgba(245, 247, 249, 0.12); }
  .nc-tab__text { letter-spacing: 1px; font-size: 0.66rem; line-height: 1.5; overflow-wrap: break-word; }
  .nc-tab__num { display: none; }
  .nc-ticks { display: none; }
  .nc-sec__grid { grid-template-columns: minmax(0, 1fr); }
  #service-details .nc-plate { order: -1; }
  #service-details .nc-chips { grid-template-columns: minmax(0, 1fr); }
  .nc-sec { scroll-margin-top: calc(var(--header-height-scrolled, 64px) + 110px); }
}


/* The city pages' own <style> blocks stamp .page-content ul li with a
   remixicon check ::before, dark text and 1.75rem indent -- which doubled
   the check and greyed the text inside console chips. Id-scope past them. */
#service-details .nc-chip {
  padding: .7rem .9rem;
  position: static;
  color: var(--text, #24343F);
  font-size: 0.95rem;
  line-height: 1.4;
}
#service-details .nc-chip::before { content: none; }


/* The console band opened straight into the component while every other
   band announces itself with a centred eyebrow + title. Same treatment
   here; id-scoped because the page typography rules colour h2s navy. */
#service-details .nc-band__header { margin-bottom: 2.25rem; }
#service-details .nc-band__header .section__label { color: var(--accent, #D2291D); }
#service-details .nc-band__header .section__title { color: var(--primary, #14395F); }


/* Page hero: title, subtitle and buttons centred on one axis; the
   breadcrumb trail stays anchored top-left per the client. */
.page-hero__content { text-align: center; }
.page-hero .breadcrumbs__list { justify-content: flex-start; }
.page-hero .breadcrumbs { text-align: left; }
.page-hero__title,
.page-hero__subtitle { text-align: center; }


/* The 34rem content-column cap also caught the nameplate head (a p inside
   the section container), squeezing 'Serving {City}' into an ellipsis.
   The plate sizes itself; let its head use the full plate width. */
.nameplate__head { max-width: none !important; }


/* On narrow screens the one-line plate head cannot fit any full company
   string (the pre-'Serving' text ellipsized here too). Wrap instead. */
@media (max-width: 639px) {
  .nameplate__head {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.5;
  }
}


/* The 72ch prose cap also caught the announcement bar's p, parking a
   centred text inside a left-sitting block. The bar is a banner, not
   prose -- let it use the full container and centre truly. */
.top-bar p {
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}


/* Nameplate head: centred on the card, every location. The city-page
   typography forces p text left with !important at three-class
   specificity, so the centring must outrank it, not just repeat it. */
.nameplate__head,
.page-content .section > .container p.nameplate__head,
.page-content .section > .container > div p.nameplate__head {
  text-align: center !important;
}


/* Services core cards: the site's current language -- dark band,
   frosted glass card, the photograph inset as a plate with real margins,
   and the link set as a machined micro-label instead of a button-ish
   text row. No red trim. */
#services-overview .section__label { color: var(--accent, #D2291D); }
#services-overview .section__title { color: var(--primary, #14395F); }
#services-overview .card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 1rem;
  border-top: none;
  box-shadow: 0 14px 34px -16px rgba(14, 42, 71, 0.16);
  padding: 1.25rem 1.25rem 1.4rem;
  text-align: left;
}
@supports not (backdrop-filter: blur(2px)) {
  #services-overview .card { background: rgba(255, 255, 255, 0.94); }
}
#services-overview .card:hover {
  border-color: rgba(20, 57, 95, 0.22);
  box-shadow: 0 18px 40px -16px rgba(14, 42, 71, 0.26);
}
#services-overview .card__image {
  position: relative;
  border-radius: .65rem;
  overflow: hidden;
  border: 1px solid rgba(20, 57, 95, 0.10);
  margin: 0 0 1.15rem;
}
#services-overview .card__image img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
}
#services-overview .card__body { padding: 0 .35rem; display: flex; flex-direction: column; flex: 1; }
#services-overview .card__title {
  color: var(--primary, #14395F);
  text-align: left;
  margin-bottom: .5rem;
}
#services-overview .card__text {
  color: var(--text, #24343F);
  text-align: left;
  margin-bottom: 1.25rem;
}
#services-overview .card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(20, 57, 95, 0.12);
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent, #D2291D);
}
#services-overview .card__link i { transition: transform .3s ease; }
@media (prefers-reduced-motion: no-preference) {
  #services-overview .card:hover .card__link i { transform: translateX(4px); }
}


/* CTA banners: the container says text-align:center inline, but on pages
   whose banner carries the .section class the page-content left !important
   h2/p rules outrank it -- the heading hung left while the buttons
   centred. Same weight, later in the file, so centre wins here. */
.page-content .section.cta-banner > .container h2,
.page-content .section.cta-banner > .container p,
.section.cta-banner > .container h2,
.section.cta-banner > .container p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ============================================================
   Wordmark letterforms: hand-rolled to match the van livery --
   squared technical sans, gentle curves, no hard corners. The
   name is stroked paths now, so the fill-based colour rules
   above are neutralized for it; the stroke carries the brand
   red in every context (header and footer both resolve to it).
   ============================================================ */
.wordmark__name-g path {
  fill: none !important;
  stroke: var(--brand-red, #F60302);
  stroke-width: 4.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Client (review 2026-08-21): the logo is the blue-and-red version --
   "the all red one is terrible". The client's own logo file sets a blue
   rule over the red rule; the literal file blue (#0001FE) is too dark to
   read on the navy header, so this is the same blue lifted for screen. */
.wordmark__rule-a,
.header .wordmark__rule-a, .hd .wordmark__rule-a, header .wordmark__rule-a,
.footer .wordmark__rule-a {
  fill: #2E6FD9 !important;
  opacity: 1 !important;
}


/* ============================================================
   WHITE SHIFT (client review 2026-08-21). The header goes white
   -- the client's logo was always meant for a white ground --
   the blue announcement banner sits beneath it, and the page at
   large trades the navy bands for white space, with red and blue
   as opportunistic accents. Reference: lapeyreroofing.com.
   ============================================================ */

/* ---- header: white ---- */
.header, .header.scrolled {
  background: #ffffff;
  border-bottom: 1px solid rgba(20, 57, 95, 0.10);
}
.header.scrolled { box-shadow: 0 4px 18px rgba(14, 42, 71, 0.10); }
.nav__link { color: var(--primary); }
.nav__link:hover, .nav__link.active { color: var(--accent); }
.nav__toggle-bar { background-color: var(--primary); }

/* header wordmark on white: the client's own logo treatment */
.header .wordmark__sub, .hd .wordmark__sub, header .wordmark__sub {
  fill: var(--primary) !important;
  opacity: 1 !important;
}


/* Client: "dark blue on red doesn't work" (07:17) + red as ACCENT, not
   fill -- buttons trade the red slab for glass-like white with a red
   boundary on light grounds, and pure glass (no red at all) on dark
   grounds and photo heroes. Red survives as boundaries: rules, eyebrows,
   checks, the LED, the logo. */
/* On plain light sections a white outline vanishes, so the default
   glass carries a navy hairline that reads on any light ground; the
   dark-ground override below keeps the white-outline glass where it
   actually shows. */
.btn--primary {
  background: rgba(20, 57, 95, 0.05);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1.5px solid rgba(20, 57, 95, 0.35);
  color: var(--primary, #14395F);
  box-shadow: 0 6px 18px rgba(14, 42, 71, 0.08);
}
.btn--primary:hover {
  background: var(--primary, #14395F);
  border-color: var(--primary, #14395F);
  color: #ffffff;
}
/* dark grounds: glass white, no red */
.cta-banner .btn--primary,
#contact .btn--primary,
.section--dark .btn--primary,
.hero .btn--primary,
.page-hero .btn--primary {
  /* G5 - was a faint glass veil that barely read as a button; the client asked
     for a darker, defined CTA. Solid primary-dark keeps the palette, no red. */
  background: var(--primary-dark, #0E2A47);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1.5px solid rgba(255, 255, 255, 0.72);
  color: #ffffff;
}
.cta-banner .btn--primary:hover,
#contact .btn--primary:hover,
.section--dark .btn--primary:hover,
.hero .btn--primary:hover,
.page-hero .btn--primary:hover {
  /* lights up to solid white on hover - the established behaviour */
  background: #ffffff;
  border-color: #ffffff;
  color: var(--primary, #14395F);
}
/* G5 - a distinct pressed state; hover alone left click feeling ambiguous */
.cta-banner .btn--primary:active,
#contact .btn--primary:active,
.section--dark .btn--primary:active,
.hero .btn--primary:active,
.page-hero .btn--primary:active {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(255, 255, 255, 0.86);
  color: var(--primary-dark, #0E2A47);
}

/* the outlined sibling gets the matching press, so the pair behaves as a family */
.cta-banner .btn--secondary:active,
#contact .btn--secondary:active,
.section--dark .btn--secondary:active,
.hero .btn--secondary:active,
.page-hero .btn--secondary:active {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(255, 255, 255, 0.86);
  color: var(--primary-dark, #0E2A47);
}
.footer .wordmark__name,
.footer .wordmark__name-g path {
  fill: none !important;
  stroke: #ffffff;
}


/* exceptions inside the glass system:
   - the hero form card is a white island inside the dark hero: its
     submit takes the light treatment
   - the homepage hero call action uses .btn--phone; fold it in */
/* solid-white islands (header, form card): a white outline is invisible,
   so the glass takes a navy hairline instead -- still no red */
.hero__form-card .btn--primary,
.hero .hero__form-card .btn--primary,
.header .btn--primary,
.nav__cta {
  background: rgba(20, 57, 95, 0.05);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1.5px solid rgba(20, 57, 95, 0.35);
  color: var(--primary, #14395F);
}
.hero__form-card .btn--primary:hover,
.hero .hero__form-card .btn--primary:hover,
.header .btn--primary:hover,
.nav__cta:hover {
  background: var(--primary, #14395F);
  border-color: var(--primary, #14395F);
  color: #ffffff;
}
.btn--cta, .hero .btn--cta {
  /* G5 - same family as .btn--primary on dark grounds: solid, defined, white
     label. Was a faint glass veil that barely read as a button. */
  background: var(--primary-dark, #0E2A47);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1.5px solid rgba(255, 255, 255, 0.72);
  color: #ffffff;
}
.btn--cta:hover, .hero .btn--cta:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--primary, #14395F);
}

.btn--cta:active, .hero .btn--cta:active {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(255, 255, 255, 0.86);
  color: var(--primary-dark, #0E2A47);
}


/* Homepage Why Sensible: with the photo pulled back to 48% so both
   people are visible, a page-centred header ran into the vans. The
   header keeps its centred text but lives in the clear left zone. */
@media (min-width: 1024px) {
  #why-sensible .section__header {
    max-width: 50%;
    margin-left: 0;
    margin-right: auto;
  }
  #why-sensible .section__title { max-width: none; }
  #why-sensible .section__subtitle { max-width: 44ch; }
}


/* Section dividers: with the site light-dominant, same-tone sections
   met with no separation. The house hairline (the one the equipment
   block already used) at container width, applied to every junction
   the audit found bare. */
.sect-divided { position: relative; }
.sect-divided::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1152px, calc(100% - 3rem));
  height: 1px;
  background: var(--border, #D8E2E9);
}


/* Photo duo: a real photograph paired with a generated one on the
   service detail pages -- the authentic anchors the synthetic. */
.photo-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  max-width: 1060px;
  margin: 0 auto;
}
.photo-duo figure {
  margin: 0;
  border-radius: .75rem;
  overflow: hidden;
  border: 1px solid rgba(20, 57, 95, 0.10);
  box-shadow: 0 10px 28px rgba(14, 42, 71, 0.08);
}
.photo-duo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
@media (max-width: 767px) {
  .photo-duo { grid-template-columns: minmax(0, 1fr); }
}


/* What We Do cards: photographs in place of the schematics, per the
   client (08:22 'a picture rather than a graphic'; 12:19 pictures over
   widgets). The schematic vocabulary continues in the console plates. */
.service-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: .6rem;
  border: 1px solid rgba(20, 57, 95, 0.10);
  margin-bottom: 1.15rem;
}

/* Progressive-disclosure pages reuse the site's existing cards and spacing. */
.service-card-grid,
.content-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.service-card--photo {
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(20, 57, 95, 0.10);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
  padding: 2rem;
  height: 100%;
  scroll-margin-top: 7rem;
  display: flex;
  flex-direction: column;
}
.service-card--photo h3 {
  color: var(--primary, #14395F);
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: .75rem;
}
.service-card--photo p {
  color: var(--text-light, #5C6E7C);
  font-size: .9rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.service-card--photo a {
  color: var(--accent, #D2291D);
  font-weight: 600;
  text-decoration: none;
  margin-top: auto;
}
.card--linked { height: 100%; }
.card--linked .card__content {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.card--linked .card__link { margin-top: auto; }

/* Match the industry hub cards to the homepage carousel's 12px slide gutters. */
#industries .content-card-grid {
  margin-inline: 0.75rem;
}

/* Keep the What We Do equipment carousel identical to the homepage card.
   Broad inner-page prose rules otherwise enlarge its body copy and card row. */
.page-content #equipment-preview .card__text {
  color: var(--text-light, #5C6E7C);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

/* Keep the What We Do service cards typographically identical to home. */
#services-overview .service-card--photo p {
  color: var(--text-light, #5C6E7C);
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: none;
  text-align: center !important;
  margin: 0 0 1rem;
}

.location-path-group + .location-path-group,
.location-path-group + .location-context,
.location-context + .location-path-group {
  margin-top: 5rem;
  padding-top: 4rem;
  border-top: 1px solid var(--border, #D8E2E9);
}
.location-context {
  margin: 0 auto 2.5rem;
  max-width: 78ch;
  text-align: center;
}

.emergency-safety-note {
  max-width: 760px;
  margin: 1rem auto 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
  line-height: 1.65;
}
@media (max-width: 1023px) {
  .service-card-grid,
  .content-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .service-card-grid,
  .content-card-grid { grid-template-columns: minmax(0, 1fr); }
  .service-card--photo { padding: 1.35rem; }
}


/* ============================================================
   Restructure compliance fixes
   ============================================================ */

/* .grid--2/.grid--3 existed only inside city-page <style> blocks; the
   new About/hub pages use them and were falling back to the 4-column
   base grid, squeezing a two-child layout into 269px columns. */
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767px) {
  .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* CTA banners on the new pages carry unclassed h2/p that inherit the
   page-content navy -- dark-on-dark. Same-weight selectors, later in
   the cascade, no !important needed. */
.page-content .section.cta-banner > .container h2,
.section.cta-banner > .container h2,
.cta-banner h2 { color: #ffffff; }
.page-content .section.cta-banner > .container p,
.section.cta-banner > .container p,
.cta-banner p { color: rgba(255, 255, 255, 0.85); }


/* ============================================================
   GLASS CARDS -- one treatment across every card surface
   ============================================================
   The site already spoke this language in exactly one place:
   #services-overview .card (around L5134) used rgba(255,255,255,.62)
   with blur(16px) saturate(1.1), a white hairline and a @supports
   fallback at .94, while every other card stayed opaque white.

   This block lifts those SAME values into tokens and applies them to
   the remaining card surfaces, so the page reads as one system. The
   numbers are deliberately identical to that original rule, not new
   ones. Retune the tokens here and every card moves together.

   Where glass actually reads: a translucent surface needs something
   behind it. Over a plain white section the effect is carried by the
   hairline and the inset sheen rather than by the blur, which is
   intended. Over the tinted bands and the equipment band the blur
   does real work.

   These rules are appended deliberately. Two earlier .card rules
   exist (around L859 and L3090) and the later one wins with a
   hardcoded `background: white`, so anything placed before it is
   silently overridden.
   ============================================================ */
:root {
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-fallback: rgba(255, 255, 255, 0.94);
  --glass-border: rgba(255, 255, 255, 0.75);
  --glass-border-hover: rgba(20, 57, 95, 0.22);
  --glass-blur: 16px;
  --glass-saturate: 1.1;
  --glass-shadow: 0 14px 34px -16px rgba(14, 42, 71, 0.16);
  --glass-shadow-hover: 0 18px 40px -16px rgba(14, 42, 71, 0.26);
  --glass-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.card,
.service-card,
.service-card--photo,
.job-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-sheen), var(--glass-shadow);
}

.card:hover,
.service-card:hover,
.service-card--photo:hover,
.job-card:hover {
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-sheen), var(--glass-shadow-hover);
}

/* Browsers without backdrop-filter get an opaque surface rather than a
   washed-out translucent one over an unblurred background. Mirrors the
   fallback the original #services-overview rule already declared. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .card,
  .service-card,
  .service-card--photo,
  .job-card {
    background: var(--glass-bg-fallback);
  }
}

/* Viewers who ask for less transparency get the solid surface. */
@media (prefers-reduced-transparency: reduce) {
  .card,
  .service-card,
  .service-card--photo,
  .job-card {
    background: var(--glass-bg-fallback);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}


/* ============================================================
   Service detail template (Dispatch Board, as approved).
   Top-of-page system for the three service pages; below the
   equipment chips the pages keep their standard house sections.
   ============================================================ */
.sd-hero { position: relative; overflow: hidden; background: #0E2A47; }
.sd-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sd-hero__scrim { position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(14,42,71,.93) 0%, rgba(14,42,71,.80) 45%, rgba(14,42,71,.48) 100%); }
.sd-hero__inner { position: relative; z-index: 1; display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 3rem; align-items: center;
  /* SV1 - was 7.5rem bottom while .sd-stats only pulls up 3.5rem, leaving
     ~4rem of dead space under the hero copy. */
  padding: 5.5rem 0 5.5rem; }
.sd-hero .breadcrumbs { padding: 1.25rem 0 0; position: relative; z-index: 1; }
.sd-hero .breadcrumbs, .sd-hero .breadcrumbs a { color: rgba(255,255,255,.85); }
.sd-hero .breadcrumbs__current { color: rgba(255,255,255,.65); }
.sd-hero__eyebrow { font-family:'Figtree',system-ui,sans-serif; font-size:.75rem; font-weight:700;
  letter-spacing:3px; text-transform:uppercase; color:#FF6152; }
.sd-hero__title { font-family:'Figtree',system-ui,sans-serif; font-weight:700;
  font-size: clamp(2rem, 3.8vw, 3rem); line-height:1.1; color:#fff; margin:.9rem 0 1rem;
  letter-spacing:-.5px; max-width: none; text-align: left; }
.sd-hero__sub { color: rgba(255,255,255,.9); font-size:1.1rem; max-width:34rem; margin:0 0 1.6rem; text-align:left; text-wrap: balance; }
.sd-callcard { justify-self:end; width:100%; max-width:380px;
  background: rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border:1px solid rgba(255,255,255,.35); border-radius:18px; padding:1.6rem 1.7rem; color:#fff; }
.sd-callcard__label { display:block; font-family:'Figtree',system-ui,sans-serif; font-size:.72rem;
  font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:#FF6152; }
.sd-callcard__num { display:inline-block; font-family:'Figtree',system-ui,sans-serif; font-weight:800;
  font-size: clamp(1.6rem, 2.4vw, 2rem); line-height:1.15; color:#fff; text-decoration:none;
  margin:.4rem 0 .3rem; }
.sd-callcard__note { font-size:.95rem; color:rgba(255,255,255,.82); margin:0 0 1.2rem; text-align:left; max-width:none; }

.sd-stats { position:relative; z-index:2; margin-top:-3.5rem; }
.sd-stats__grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1.1rem; }
.sd-chip { display:flex; align-items:center; gap:.9rem;
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border:1px solid rgba(20,57,95,.12); border-radius:16px; padding:1.1rem 1.25rem;
  box-shadow:0 14px 34px rgba(14,42,71,.10); }
.sd-chip > i { font-size:1.4rem; color: var(--accent, #D2291D); flex:none; }
.sd-chip__num { font-family:'Figtree',system-ui,sans-serif; font-weight:800; font-size:1.25rem;
  line-height:1.1; color:var(--primary,#14395F); display:block; }
.sd-chip__label { font-size:.88rem; color:var(--text-light,#5C6E7C); line-height:1.35; }

.sd-split { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:3.5rem; align-items:center; }
.sd-split .section__label { display:inline-block; margin-bottom:.9rem; }
.sd-split h2 { text-align:left; margin:0 0 1.1rem; max-width:none; }
.sd-split > div > p { text-align:left !important; margin:0 0 1rem !important; max-width:none !important; font-size:1.05rem; }
.sd-split .list-check { text-align:left; }
.sd-photo { border-radius:18px; overflow:hidden; border:1px solid rgba(20,57,95,.12);
  box-shadow:0 20px 44px rgba(14,42,71,.12); }
.sd-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.sd-photo--tall { aspect-ratio:5/6; }
.sd-photo--tall img { object-position:50% 25%; }

.sd-steps { list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:2.5rem; position:relative; margin:.5rem 0 0; padding:0; }
.sd-steps::before { content:""; position:absolute; top:26px; left:16.66%; right:16.66%;
  border-top:2px dashed rgba(210,41,29,.4); }
.sd-step { position:relative; text-align:center; padding:0 .25rem; }
.sd-step__num { width:52px; height:52px; border-radius:50%; background:var(--accent,#D2291D);
  color:#fff; font-family:'Figtree',system-ui,sans-serif; font-weight:800; font-size:1.3rem;
  display:flex; align-items:center; justify-content:center; margin:0 auto 1.05rem;
  position:relative; z-index:1; box-shadow:0 0 0 6px #F5F7F9, 0 10px 20px rgba(210,41,29,.24); }
.sd-step h3 { font-family:'Figtree',system-ui,sans-serif; font-weight:700; font-size:1.15rem;
  color:var(--primary,#14395F); margin:0 0 .5rem; }
#sd-steps .sd-step p { font-size:.98rem; text-align:center !important; margin:0 auto !important; max-width:none !important; }

.sd-fig { margin:3rem 0 0; border-radius:18px; overflow:hidden;
  border:1px solid rgba(20,57,95,.12); box-shadow:0 18px 40px rgba(14,42,71,.10); }
.sd-fig img { display:block; width:100%; aspect-ratio:2.2/1; object-fit:cover; }

.sd-syschips { list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1rem; margin:0; padding:0; }
.sd-syschip { display:flex; align-items:center; gap:1rem; background:#fff;
  border:1px solid rgba(20,57,95,.13); border-radius:14px; padding:.65rem .9rem;
  box-shadow:0 6px 16px rgba(14,42,71,.06); text-decoration:none;
  transition: box-shadow .25s ease, border-color .25s ease; }
.sd-syschip:hover { border-color: rgba(20,57,95,.28); box-shadow:0 10px 24px rgba(14,42,71,.12); }
.sd-syschip__thumb { width:64px; height:48px; border-radius:8px; overflow:hidden; flex:none;
  border:1px solid rgba(20,57,95,.10); background:#F5F7F9;
  display:flex; align-items:center; justify-content:center; }
.sd-syschip__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.sd-syschip__thumb .glyph { width:26px; height:26px; }
.sd-syschip__name { font-family:'Figtree',system-ui,sans-serif; font-weight:600; font-size:.98rem;
  color:var(--primary,#14395F); }
.sd-syschip__go { margin-left:auto; color:var(--accent,#D2291D); font-size:1.05rem; }

/* Service-area pages stamp .page-content ul li with a check ::before,
   padding and relative positioning for prose bullet lists -- which
   doubles up on sd-syschip's own check-free flex layout. Out-specificity
   it back to plain list items. */
.page-content .sd-syschips li {
  padding: 0;
  position: static;
  color: inherit;
  font-size: inherit;
}
.page-content .sd-syschips li::before { content: none; }

/* Same prose-cap problem, different rule: .page-content .section >
   .container > div > ul caps direct-child uls to 34rem/72ch for
   readable body-copy line length -- also catches the equipment chips
   ul on service-area pages, squeezing the 3-col grid into one corner. */
.page-content .section > .container .sd-syschips {
  max-width: none;
}

/* Same prose-cap rule also force-lefts .section__subtitle text (it's a
   <p>, a descendant of .container), so it no longer sits centred under
   its own centred H2 on service-area pages. */
.page-content .section > .container .section__header .section__subtitle {
  text-align: center !important;
}

/* Industry ("Who We Serve") detail pages: hero dual-CTA row, and a
   syschip variant for equipment types named in the page copy that have
   no equipment/*.html target yet (unlinked, not styled as clickable). */
.sd-hero__ctas { display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.75rem; }
@media (max-width: 640px) {
  .sd-hero__ctas { flex-direction:column; align-items:stretch; }
  .sd-hero__ctas .btn { text-align:center; }
}
.sd-syschip__icon { font-size:1.6rem; color:var(--primary,#14395F); }
.sd-syschip.sd-syschip--static { cursor:default; opacity:.82; }
.sd-syschip.sd-syschip--static:hover { border-color:rgba(20,57,95,.13); box-shadow:0 6px 16px rgba(14,42,71,.06); }
.sd-syschip__note { display:block; font-size:.74rem; font-weight:500; color:var(--text-light,#5C6E7C); margin-top:.15rem; }

.sd-wash { background:
  radial-gradient(60rem 30rem at 110% -10%, rgba(46,111,217,.10), transparent 60%),
  radial-gradient(50rem 28rem at -10% 115%, rgba(210,41,29,.07), transparent 60%), #F5F7F9; }

@media (max-width: 899px) {
  .sd-hero__inner { grid-template-columns: minmax(0,1fr); padding:3.5rem 0 6rem; }
  .sd-callcard { justify-self:start; }
  .sd-stats__grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .sd-split { grid-template-columns:minmax(0,1fr); gap:2rem; }
  .sd-steps { grid-template-columns:minmax(0,1fr); gap:1.75rem; }
  .sd-steps::before { display:none; }
  .sd-syschips { grid-template-columns:minmax(0,1fr); }
}


/* template fixes found on render: the prose-column cap catches the
   equipment chips ul (a direct container child); and the hero call
   card sits on navy, so its button takes the dark-ground glass. */
#sd-systems .sd-syschips {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.sd-hero .btn--primary {
  background: rgba(255, 255, 255, 0.16);
  border: 1.5px solid rgba(255, 255, 255, 0.72);
  color: #ffffff;
}
.sd-hero .btn--primary:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--primary, #14395F);
}


/* Titled check rows beside a review photo -- e.g. "After the call" on
   emergency-repairs.html, "After each visit" on preventive-maintenance.html */
.sd-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem;
  max-width: none !important; }
.sd-point { display: flex; align-items: flex-start; gap: .85rem; }
.sd-point > i { color: var(--accent, #D2291D); font-size: 1.3rem; line-height: 1.2; flex: none; }
.sd-point strong { display: block; font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 700; font-size: 1.08rem; color: var(--primary, #14395F); margin-bottom: .3rem; }
.sd-point p { margin: 0 !important; max-width: none !important;
  text-align: left !important; font-size: .98rem; }
.sd-split:has(.sd-points) { align-items: center; }
.sd-split:has(.sd-points) .sd-photo img { aspect-ratio: 3/2; }

/* ==========================================================================
   G6 - the blue/red brand rule, drawn across the full header width.

   The mark is a bitmap with the rule baked in at 2.5px, so the rule can only
   be made thicker by drawing over it: .wordmark-img::after covers the logo's
   own bars, .header::after carries the line across the rest of the header.
   Both use the same geometry, so the result is one continuous line - and it
   also closes the white margin the bitmap carries at its left and right edges.

   Geometry is expressed against --logo-h, so a resized mark stays aligned.
   The gap stays where the bitmap's gap is (56.5-58.0 at the default size);
   the bars grow outward from it.
   ========================================================================== */
.header {
  --brand-rule-blue: #0300FF;
  --brand-rule-red: #FE0002;
  --logo-h: 54px;    /* rendered height of the mark */
  /* the nav centres its items, so the offset follows the height */
  --logo-top: calc((81px - var(--logo-h)) / 2);

  --rule-blue: calc(var(--logo-h) * 3.5 / 44);
  --rule-gap:  calc(var(--logo-h) * 1.5 / 44);
  --rule-red:  calc(var(--logo-h) * 3.5 / 44);
  --rule-h:    calc(var(--logo-h) * 10 / 44);   /* bars + transparent padding */
  --rule-from-logo-top: calc(var(--logo-h) * 35 / 44);
}

.header::after,
.header .wordmark-img::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: var(--rule-h);
  background: linear-gradient(
    to bottom,
    var(--brand-rule-blue) 0 var(--rule-blue),
    transparent var(--rule-blue) calc(var(--rule-blue) + var(--rule-gap)),
    var(--brand-rule-red) calc(var(--rule-blue) + var(--rule-gap))
                          calc(var(--rule-blue) + var(--rule-gap) + var(--rule-red)),
    transparent calc(var(--rule-blue) + var(--rule-gap) + var(--rule-red)) 100%
  );
  pointer-events: none;
}

/* across the header, fading out before each edge */
.header::after {
  top: calc(var(--logo-top) + var(--rule-from-logo-top));
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(to right,
    transparent 0%, #000 9%, #000 91%, transparent 100%);
  z-index: 0;
}

/* over the mark itself, at full strength, covering the bitmap's own bars */
.header .wordmark-img {
  position: relative;
  display: inline-block;
}

.header .wordmark-img::after {
  top: var(--rule-from-logo-top);
  /* The bitmap's bars are JPEG-soft, so their anti-aliased fringes show
     through the transparent gap. A white base under the bars hides them -
     the mark sits on white in the artwork, so this is invisible. */
  background:
    linear-gradient(
      to bottom,
      var(--brand-rule-blue) 0 var(--rule-blue),
      transparent var(--rule-blue) calc(var(--rule-blue) + var(--rule-gap)),
      var(--brand-rule-red) calc(var(--rule-blue) + var(--rule-gap))
                            calc(var(--rule-blue) + var(--rule-gap) + var(--rule-red)),
      transparent calc(var(--rule-blue) + var(--rule-gap) + var(--rule-red)) 100%
    ),
    #ffffff;
}

.header > * { position: relative; z-index: 1; }

/* ==========================================================================
   SV4 - the process band takes the Lapeyre reference's treatment: dark ground,
   accent markers, white copy. The reference pairs this with a "Signs you need
   ..." column; that copy does not exist yet, so the band ships as the process
   half and is ready for a second column when the copy lands.

   NOTE: the service pages colour headings and prose through four-part
   selectors (.page-content .section > .container p and friends) that outrank
   any class-only rule - the same trap the CTA banners hit above. These are
   written at matching weight so they actually apply.
   ========================================================================== */
.page-content .section.sd-steps-band > .container .section__title,
.section.sd-steps-band > .container .section__title,
.sd-steps-band .section__title { color: #ffffff; }

.page-content .section.sd-steps-band > .container .section__label,
.sd-steps-band .section__label { color: #FF8A75; }

.page-content .section.sd-steps-band > .container .sd-step h3,
.section.sd-steps-band > .container .sd-step h3,
.sd-steps-band .sd-step h3 { color: #ffffff; }

.page-content .section.sd-steps-band > .container .sd-step p,
.page-content .section.sd-steps-band > .container > ol .sd-step p,
.section.sd-steps-band > .container .sd-step p,
.sd-steps-band .sd-step p { color: rgba(255, 255, 255, 0.85); }

.page-content .section.sd-steps-band > .container .sd-step p a,
.sd-steps-band .sd-step p a { color: #FF8A75 !important; }

.sd-steps-band .sd-step__num {
  background: var(--accent, #D2291D);
  color: #ffffff;
  border-color: transparent;
}
.sd-steps-band .sd-fig img { border-radius: 12px; }

/* ==========================================================================
   EQ2 / EQ4 - equipment page sections, built to the Lapeyre references the
   client pasted: a dark three-column "signs you need ..." block with circular
   check marks, and a dark FAQ of rounded rows beneath it.

   Written at four-part weight throughout: the equipment pages sit inside
   .page-content, whose `.page-content .section > .container p` rules outrank
   any class-only selector and would otherwise paint this copy dark-on-dark.
   ========================================================================== */
.eq-signs {
  background: linear-gradient(170deg,
    var(--primary-dark, #0E2A47) 0%,
    var(--primary, #14395F) 50%,
    var(--primary-dark, #0E2A47) 100%);
}
.page-content .section.eq-signs > .container .section__label,
.eq-signs .section__label { color: #FF8A75; }
.page-content .section.eq-signs > .container .section__title,
.eq-signs .section__title { color: #ffffff; }
.page-content .section.eq-signs > .container .section__subtitle,
.eq-signs .section__subtitle {
  color: rgba(255,255,255,.82);
  max-width: 100%;
  text-wrap: balance;
}
/* the shared section header caps at 572px here, which forced the subtitle to
   three lines and orphaned its last word */
.eq-signs .section__header { max-width: 46rem; }

.eq-signs__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem 0;
  margin-top: 0;
}
/* a hairline between columns rather than relying on gap alone */
.eq-signs__col { padding: 0 2.25rem; }
.eq-signs__col + .eq-signs__col { border-left: 1px solid rgba(255, 255, 255, 0.14); }
.eq-signs__col:first-child { padding-left: 0; }
.eq-signs__col:last-child { padding-right: 0; }
@media (max-width: 900px) {
  .eq-signs__col { padding: 0; }
  .eq-signs__col + .eq-signs__col {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-top: 2rem;
  }
}
@media (max-width: 900px) { .eq-signs__grid { grid-template-columns: 1fr; gap: 2rem; } }

.page-content .section.eq-signs > .container .eq-signs__col h3,
.eq-signs__col h3 {
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.3;
  color: #ffffff;
  /* the columns are now the top of the section - the reference carries no
     section header above them - so the headings take more weight. Two lines
     are reserved so all three lists start level; box-sizing is border-box, so
     the padding and rule below sit inside the reservation. */
  min-height: calc(2 * 1.3em + .9rem + 1px);
  margin: 0 0 1.4rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  text-align: left;
}
.eq-signs__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.page-content .section.eq-signs > .container .eq-signs__col li,
.eq-signs__col li {
  position: relative;
  padding: 0 0 0 2.1rem;
  color: rgba(255, 255, 255, 0.86);
  font-size: .9375rem;
  line-height: 1.6;
  text-align: left;
}
.eq-signs__col li::before {
  content: '\eb7b';
  font-family: 'remixicon';
  position: absolute;
  left: 0;
  top: .1rem;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .8rem;
  /* An accent, not a fill. The reference uses a near-invisible disc with a
     coloured tick; solid red discs down three columns read as noise. The
     glyph takes the lighter tint of the brand red - --accent itself is
     2.29:1 on this ground and would fail, the tint is 5.14:1. */
  color: #FF8A75;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.eq-signs__cta { margin-top: 3.5rem; text-align: center; }
.eq-signs { padding-top: 5rem; padding-bottom: 5rem; }

/* EQ4 - FAQ. The reference shows this dark, but on our pages it lands directly
   under the signs block, and two dark bands together ran to 1,550px - 37% of
   the page in one unbroken stretch. The signs block keeps the dark treatment
   because it is the substantive section; the FAQ takes a light ground so the
   page alternates instead. */
.eq-faq { background: var(--bg-light, #F5F7F9); }
.page-content .section.eq-faq > .container .section__label,
.eq-faq .section__label { color: var(--accent, #D2291D); }
.page-content .section.eq-faq > .container .section__title,
.eq-faq .section__title { color: var(--primary, #14395F); }
.eq-faq__list { max-width: 46rem; margin: 2.25rem auto 0; display: grid; gap: .85rem; }
.eq-faq .faq__item {
  background: var(--bg-white, #FFFFFF);
  border: 1px solid var(--border, #D8E2E9);
  border-radius: 10px;
  overflow: hidden;
}
.page-content .section.eq-faq > .container .faq__question,
.eq-faq .faq__question {
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--primary, #14395F);
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  text-align: left;
  padding: 1.15rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
}
/* keep the site's own +/- icon rather than introducing a second glyph - it is
   built from two bars, so overriding only ::before leaves the other one behind */
.eq-faq .faq__icon::before,
.eq-faq .faq__icon::after { background-color: var(--accent, #D2291D); }
.eq-faq .faq__item.active .faq__icon { background: rgba(210, 41, 29, 0.12); }
/* the shared .faq__answer carries side padding; the eq-faq answers carry it on
   the paragraph instead, so zero it here rather than doubling the inset */
.eq-faq .faq__answer,
.eq-faq .faq__item.active .faq__answer { padding: 0; }
.eq-faq .faq__item.active .faq__answer { max-height: 620px; }

.page-content .section.eq-faq > .container .faq__answer p,
.eq-faq .faq__answer p {
  color: var(--text-light, #5C6E7C);
  font-size: .9375rem;
  line-height: 1.65;
  padding: 0 1.4rem 1.25rem;
  margin: 0;
  text-align: left;
}

/* ==========================================================================
   SV4 - the service pages pair a "signs you need ..." column with their own
   process steps, which is the two-column block in the Lapeyre reference. The
   steps keep their existing markup and move into the right-hand column, so
   they stack vertically and read left-aligned instead of as a 3-across row.
   ========================================================================== */
.sv-signs__split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 3.5rem;
  margin-top: 0;
}
@media (max-width: 900px) { .sv-signs__split { grid-template-columns: 1fr; gap: 2.25rem; } }

.page-content .section.eq-signs > .container .sv-signs__process h3,
.sv-signs__process h3 {
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.3;
  color: #ffffff;
  /* match the signs column opposite: same rule, same baseline */
  min-height: calc(2 * 1.3em + .9rem + 1px);
  margin: 0 0 1.4rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  text-align: left;
}
.sv-signs__split .sd-steps {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin: 0;
}
.sv-signs__split .sd-steps::before { display: none; }
.sv-signs__split .sd-step { text-align: left; padding: 0 0 0 3.6rem; position: relative; min-height: 2.6rem; }
.sv-signs__split .sd-step__num {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1rem;
}
.page-content .section.eq-signs > .container .sv-signs__split .sd-step h3,
.sv-signs__split .sd-step h3 {
  color: #ffffff;
  font-size: 1rem;
  margin: .25rem 0 .3rem;
  text-align: left;
}
.page-content .section.eq-signs > .container .sv-signs__split .sd-step p,
#sd-steps .sv-signs__split .sd-step p {
  color: rgba(255, 255, 255, 0.85);
  font-size: .9375rem;
  line-height: 1.55;
  text-align: left !important;
  margin: 0 !important;
}
.page-content .section.eq-signs > .container .sv-signs__split .sd-step p a,
.sv-signs__split .sd-step p a { color: #FF8A75 !important; }

/* ==========================================================================
   G2 - light footer.

   Client, four separate times: "can we make the background white to blend
   with the logo", "can we make the background white pls", "change this
   section background white", "global change to bottom section".

   The mark in the footer is the same JPEG as the header, and it carries a
   white ground - on the navy footer it read as a pasted-on box, which is the
   complaint. On a light footer it disappears into the page.

   Written as one contained override rather than editing the twenty-odd
   descendant rules that assumed a dark ground, so it can be lifted in one
   piece if the client changes their mind. Every colour below is an existing
   token and clears AA on --bg-light: --text 11.94:1, --primary 10.98:1,
   --text-light 4.92:1, --accent 4.80:1.
   ========================================================================== */
.footer {
  background: var(--bg-light, #F5F7F9);
  color: var(--text, #24343F);
  border-top: 1px solid var(--border, #D8E2E9);
}
.footer__title { color: var(--primary, #14395F); }
.footer__text,
.footer__contact-item { color: var(--text-light, #5C6E7C); opacity: 1; }
.footer__links a { color: var(--text-light, #5C6E7C); opacity: 1; }
.footer__links a:hover { color: var(--accent, #D2291D); }
.footer__bottom { border-top-color: var(--border, #D8E2E9); }
.footer__bottom,
.footer__copyright { color: var(--text-light, #5C6E7C); }
.footer__bottom a { color: var(--text-light, #5C6E7C); }
.footer__bottom a:hover { color: var(--accent, #D2291D); }
.footer__badges { border-top-color: var(--border, #D8E2E9); }
.footer__badges-label { color: var(--text-light, #5C6E7C); }

.footer__social-link {
  background-color: var(--bg-white, #FFFFFF);
  border: 1px solid var(--border, #D8E2E9);
  color: var(--primary, #14395F);
}
.footer__social-link:hover {
  background-color: var(--accent, #D2291D);
  border-color: var(--accent, #D2291D);
  color: var(--bg-white, #FFFFFF);
}

/* the mark sits on white in the artwork, so it needs no knockout treatment here */
.footer .wordmark,
.footer .wordmark__sub { color: var(--primary, #14395F); fill: var(--primary, #14395F) !important; }
.footer .wordmark__name,
.footer .wordmark__name-g path { fill: var(--accent, #D2291D) !important; stroke: none; }

/* ==========================================================================
   #23 - "Can we remove the empty space here and even out the spacing of
   words". Both halves: .page-hero carried the header offset plus 3rem top and
   3rem bottom against a 350px floor, so the copy sat in the middle of a lot of
   nothing; and the subtitle wrapped to three lines with the last word alone.

   .page-hero is the shared sub-page hero, so this also delivers the "uniform
   hero format" half of #4.
   ========================================================================== */
.page-hero {
  padding: calc(var(--header-height, 80px) + 1.75rem) 0 2.5rem;
  min-height: 0;
}
.page-hero__subtitle {
  text-wrap: balance;
}

/* #22 - the "Certified & Affiliated" badges moved out of the footer into the
   affiliations band. Artwork exists for three of the five names in #9; the
   other two render as icon+name marks at the same visual weight so the row
   reads as one set rather than two. */
.logos-row { gap: 1.5rem 2rem; }
.logos-row img {
  /* The client asked for these large enough to read - 46px left the wordmarks
     illegible. Height alone does not work here: the set mixes roundels (ORAC,
     TSSA, ~1:1) with wide wordmarks (WSIB, BBB, HRAI, up to 2.9:1), so equal
     height makes the roundels look half the size. Capping the width as well
     lets the roundels take the full height while the wordmarks scale down to
     match optically.

     Sized in one place: HEIGHT and MAX_WIDTH move together, keeping the
     44:95 ratio the optical balance above depends on. Current values are the
     original pair scaled up 30% (44->57, 95->124) at the client's request. */
  height: 57px;
  max-height: none;
  max-width: 124px;
  width: auto;
  object-fit: contain;
  filter: none;
  opacity: 1;
  background: #fff;
  border-radius: 8px;
  padding: .5rem .9rem;
}
.logos-row img:hover { filter: none; opacity: 1; }
@media (max-width: 700px) {
  /* same 30% increase applied to the small-screen pair (34->44, 76->99) */
  .logos-row img { height: 44px; max-width: 99px; }
}

/* Call Now baseline.

   The mark's blue/red rule occupies the bottom ~10px of the logo image itself
   (native rows 170-200 of 207), so aligning the button's bottom with the
   bottom of the *image* is the same thing as putting it on top of the rule.
   It is aligned with the bottom of the SENSIBLE wordmark instead - which is
   what reads as the logo's baseline - leaving the rule to run clear beneath
   both. Rule top is 56.5px; the button ends at 52.5px. */
.header .nav__cta,
.header .btn--primary.btn--sm {
  transform: translateY(-4px);
}

.header .btn--primary,
.nav__cta {
  background: var(--primary-dark, #0E2A47);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1.5px solid var(--primary-dark, #0E2A47);
  color: #ffffff;
}
.header .btn--primary:hover,
.nav__cta:hover {
  background: var(--primary, #14395F);
  border-color: var(--primary, #14395F);
  color: #ffffff;
}
.header .btn--primary i,
.nav__cta i { color: #ffffff; }

/* a text mark sitting among the badge artwork - matched to the same optical
   weight so the row still reads as one set */

/* ------------------------------------------------------------------
   City photo credits (service-areas index)
   The city card photos come from Wikimedia Commons. Most are CC BY or
   CC BY-SA, which require attribution, so the credit line has to be on
   the page. It is deliberately quiet - small, muted, underlined only on
   hover - so it reads as a footnote rather than as body copy.
   ------------------------------------------------------------------ */
.area-photo-credits {
  margin: 2rem auto 0;
  max-width: 60rem;
  font-size: 0.6875rem;
  line-height: 1.7;
  text-align: center;
  color: var(--text-muted, #6b7280);
  opacity: 0.75;
}

.area-photo-credits a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(107, 114, 128, 0.35);
}

.area-photo-credits a:hover,
.area-photo-credits a:focus-visible {
  color: var(--primary-dark, #0e2a47);
  border-bottom-color: currentColor;
}

/* ------------------------------------------------------------------
   City card photos (service-areas index)
   The generic card rule fixes the image at height:200px, so the box
   ratio changes with the viewport - 1.29:1 on desktop, 2.07:1 at
   480px - and object-fit:cover throws away whatever does not fit. On
   these photos that meant losing ~14% off each side of the building
   on desktop and a third of the height on a phone.
   Locking the box to 27:20 and writing the files at the same ratio
   means the card shows the whole photograph at every width.
   ------------------------------------------------------------------ */
#cities .card__image {
  aspect-ratio: 27 / 20;
  height: auto;
}

#cities .card__image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------------
   sd-hero text inside .page-content
   The 20 city pages carry a page-level <style> block, written when they
   used the old centred page-hero, which sets `.page-content p` to body
   slate. That selector is a class plus an element (0,1,1) and so outranks
   the plain `.sd-hero__sub` class (0,1,0) - once those pages moved to the
   shared hero, its subtitle and the call-card note rendered in dark grey
   on a dark photograph.
   These are 0,2,0 and win on specificity regardless of source order, so
   the hero reads correctly wherever it is nested.
   ------------------------------------------------------------------ */
.page-content .sd-hero__sub { color: rgba(255, 255, 255, 0.9); }
/* the card is solid white now, so its note takes body ink. Kept at this
   specificity because the city pages' inline <style> blocks still set
   .page-content p. */
.page-content .sd-callcard__note { color: var(--text, #24343F); }

/* ==================================================================
   LEGIBILITY PASS - shipped.
   Four changes, each traced to a measurement against lapeyreroofing.com:

   1. Warm the neutral.  REVERTED - the cream measured dE 2.86 against
      the existing grey, below the threshold where anyone sees it.
   2. One typeface.  They use Inter throughout; we mixed Figtree with
      Source Sans 3 - which is exactly the client's "multiple fonts here".
   3. Body copy 15px -> 16px.  48% of their characters are 16px; 63% of
      ours were 14-15px. This is the "feels tight / constricted".
   4. Give content pages their padding back: .page-content .section was
      cut to 3.5rem, so sub-pages breathed less than the homepage (56px
      against 80px). Theirs is 80px throughout.
   ================================================================== */
/* the cream neutral was reverted: dE 2.86 against the old grey is below
   what anyone sees on a real page. It was not the difference. */

/* 2 - single typeface */
body,
.footer__text,
.nameplate,
.nameplate__sub,
.sd-callcard__note {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif;
}

/* 3 - body copy 15px -> 16px on running text.
   The existing rules at lines ~3029/3709 use `.page-content .section >
   .container p` (0,3,1), so a plainer selector loses. These match that
   shape and add :not(.sd-hero__sub), which both wins on specificity and
   keeps the hero subtitle at its intended 1.1rem. */
.page-content .section > .container p:not(.sd-hero__sub),
.page-content .section p:not(.sd-hero__sub),
.section > .container p:not(.sd-hero__sub),
.card__text,
.section__subtitle,
.eq-signs__col li,
.sd-signs li {
  font-size: 1rem;
  line-height: 1.75;
}

/* 4 - restore the breathing room on content-heavy pages */
.page-content .section {
  padding: 5rem 0;
}


/* ------------------------------------------------------------------
   Hero scrim 93% -> 52%
   The scrim is a navy sheet over the hero photograph, there so white
   text stays legible. At .93 the left edge is 93% paint and 7% photo -
   the sky, the van, and the SENSIBLE livery and phone number on its
   side are all thrown away. The source photos measure 0.34-0.44 mean
   luminance, i.e. brighter than Lapeyre's entire first screen, so
   nothing about them required covering up.
   .52 is as far as it goes before the white headline starts landing on
   the white van door - that is a composition limit, not a brightness
   one. Going lighter than this means moving the text off the van.
   ------------------------------------------------------------------ */
.sd-hero__scrim {
  background: linear-gradient(100deg,
    rgba(14, 42, 71, 0.52) 0%,
    rgba(14, 42, 71, 0.42) 45%,
    rgba(14, 42, 71, 0.22) 100%);
}


/* ------------------------------------------------------------------
   Homepage hero overlay, same treatment as .sd-hero__scrim.
   This is a separate mechanism (.hero--image::before) from the one the
   detail pages use, which is why lifting the scrim alone changed
   nothing on the homepage. Its midpoint was rgba(46,17,24,.75) - a dark
   maroon - which is where a lot of the muddiness came from.
   ------------------------------------------------------------------ */
.hero--image::before {
  background: linear-gradient(
    135deg,
    rgba(20, 57, 95, 0.52) 0%,
    rgba(20, 57, 95, 0.42) 50%,
    rgba(20, 57, 95, 0.46) 100%
  );
}


/* ==================================================================
   SOLID CARDS + HERO LEGIBILITY

   1. The cards stop being frosted. The client, 11 Sep: "that frosted
      thing doesn't help either, because it's kind of see-through on the
      side, whereas the other one is like pure white - the Schedule
      Service Today box." Lifting the scrim made this worse, not better:
      against a bright photo a 12% white panel reads as a smear.
        .sd-callcard     was rgba(255,255,255,.12) + blur(14px)
        .hero__form-card was rgba(255,255,255,.62) + blur(24px)
      Both become solid, so their text can go dark and actually read.

   2. The hero copy was landing on the white van door. The old flat 52%
      wash was even across the whole width; this front-loads it so the
      text column gets real cover while the right side - where the card
      now sits - stays open and shows the photograph.
   ================================================================== */

/* --- 1a. the detail-page call card ------------------------------- */
.sd-callcard {
  background: #FFFFFF;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid rgba(14, 42, 71, 0.10);
  box-shadow: 0 18px 40px rgba(12, 34, 58, 0.22);
  color: var(--text, #24343F);
}
.sd-callcard__label { color: var(--accent, #D2291D); }
.sd-callcard__num   { color: var(--primary, #14395F); }
.sd-callcard__note  { color: var(--text, #24343F); }
.sd-callcard .btn--primary {
  background: var(--primary-dark, #0E2A47);
  border-color: var(--primary-dark, #0E2A47);
  color: #fff;
}

/* --- 1b. the homepage quote card --------------------------------- */
.hero__form-card {
  background: #FFFFFF;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid rgba(14, 42, 71, 0.10);
  box-shadow: 0 18px 40px rgba(12, 34, 58, 0.24);
}
/* the submit button was a 5% navy tint on a translucent panel - nearly
   invisible once the panel goes solid */
.hero__form-card .btn--primary,
.hero__form-card button[type="submit"] {
  background: var(--primary-dark, #0E2A47);
  border-color: var(--primary-dark, #0E2A47);
  color: #fff;
}

/* --- 2. the bright wash, restored --------------------------------
   Back to the flat 52% that looked right. A text-shadow does the
   legibility work instead of more navy: it darkens only the pixels
   immediately around each glyph, so the photograph is untouched.
   Honest caveat recorded in chat - shadow improves readability but
   WCAG scores the background colour, not the shadow, so the strict
   worst-case number stays low where copy crosses the white van.
   ----------------------------------------------------------------- */
.sd-hero__scrim {
  background: linear-gradient(100deg,
    rgba(14, 42, 71, 0.52) 0%,
    rgba(14, 42, 71, 0.42) 45%,
    rgba(14, 42, 71, 0.22) 100%);
}
.hero--image::before {
  background: linear-gradient(100deg,
    rgba(14, 42, 71, 0.54) 0%,
    rgba(14, 42, 71, 0.44) 45%,
    rgba(14, 42, 71, 0.24) 100%);
}
.sd-hero__title,
.hero__title {
  text-shadow: 0 2px 10px rgba(6, 20, 36, 0.55), 0 1px 3px rgba(6, 20, 36, 0.45);
}
.sd-hero__sub,
.hero__subtitle,
.sd-hero__eyebrow,
.hero__accreditations span,
.hero__services span {
  text-shadow: 0 1px 8px rgba(6, 20, 36, 0.70), 0 1px 2px rgba(6, 20, 36, 0.55);
}




/* --- the call card was oversized for what it holds ----------------
   380px wide with 1.6rem padding around a label, a number and a
   button. Tightened so it reads as a compact call-out rather than an
   empty panel. */
.sd-callcard {
  max-width: 320px;
  padding: 1.15rem 1.25rem;
  border-radius: 14px;
}
.sd-callcard__label { font-size: .72rem; letter-spacing: .09em; }
.sd-callcard__num   { font-size: 1.5rem; margin: .25rem 0 .35rem; }
.sd-callcard__note  { font-size: .875rem; line-height: 1.55; margin-bottom: .9rem; }
.sd-callcard .btn--primary { padding: .6rem 1.1rem; font-size: .9rem; }


/* ------------------------------------------------------------------
   Primary button on a dark panel
   In the contact section the submit button rendered navy on navy -
   measured 1.00:1 against its own background, so only the 1px border
   said it was a button at all. WCAG wants 3:1 for a UI boundary, and
   this is the page's primary conversion action. White on navy gives
   both the boundary and 14.6:1 for the label.
   ------------------------------------------------------------------ */
.section--dark .btn--primary,
.section--dark button[type="submit"],
.cta-banner .btn--primary {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--primary-dark, #0E2A47);
}
.section--dark .btn--primary:hover,
.section--dark button[type="submit"]:hover,
.cta-banner .btn--primary:hover {
  background: var(--bg-light, #F5F7F9);
  border-color: var(--bg-light, #F5F7F9);
  color: var(--primary-dark, #0E2A47);
}

/* ============================================================
   Contact actions
   ------------------------------------------------------------
   Stands in for the contact forms. The forms posted to a Worker
   that cannot send mail: Cloudflare's send_email binding requires
   the From domain to be a zone on the account, and sensibleheating.net
   is still hosted at GoDaddy, so every submission came back 502 and
   the visitor was told to phone instead. Rather than show a form that
   silently loses leads, the phone and email are the call to action.

   To put the forms back once the domain is on Cloudflare: verify the
   destination address in Email Routing, then revert the commit that
   added this block. worker/README.md has the steps and the Worker
   itself is deployed and working apart from the From domain.
   ============================================================ */
.contact-actions { display: grid; gap: 1rem; text-align: left; }

.contact-actions__btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  border-radius: 12px;
  border: 1.5px solid var(--border, #D9E1E7);
  background: #FFFFFF;
  color: var(--primary-dark, #0E2A47);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.contact-actions__btn:hover,
.contact-actions__btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(14, 42, 71, .14);
  border-color: var(--accent);
}
.contact-actions__btn i {
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #FFFFFF;
  font-size: 1.4rem;
}
.contact-actions__label { display: block; font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.contact-actions__meta  { display: block; font-size: .875rem; color: var(--text-light, #5C6E7C); margin-top: .15rem; }

/* the call is the action that actually gets answered, so it leads */
.contact-actions__btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
}
.contact-actions__btn--primary i { background: rgba(255, 255, 255, .18); }
.contact-actions__btn--primary .contact-actions__meta { color: rgba(255, 255, 255, .88); }
.contact-actions__btn--primary:hover { border-color: #FFFFFF; }

/* the one dark placement: the homepage Get In Touch band */
.section--dark .contact-actions__btn {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .18);
  color: var(--bg-white, #FFFFFF);
}
.section--dark .contact-actions__btn--primary {
  background: var(--accent);
  border-color: var(--accent);
}
.section--dark .contact-actions__meta { color: rgba(255, 255, 255, .8); }

@media (max-width: 480px) {
  .contact-actions__btn { padding: 1rem; gap: .8rem; }
  .contact-actions__label { font-size: .98rem; }
  .contact-actions__btn i { flex-basis: 2.4rem; width: 2.4rem; height: 2.4rem; font-size: 1.2rem; }
}