:root {
  --primary: #323c8c;   /* navy from logo */
  --accent:  #007e49;   /* green from logo */
  --primary-dark: #232a64;
  --bg-light: #f3f5fb;
  --text-main: #222222;
  --text-muted: #666666;
  --border-soft: #dde2f0;
  --max-width: 1200px;
  --radius-lg: 14px;
  --shadow-soft: 0 14px 35px rgba(0,0,0,0.08);

  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Manrope", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing scale (4px base) — use opportunistically; not a wholesale rewrite */
  --space-1: 0.25rem;   /* 4px  */
  --space-2: 0.5rem;    /* 8px  */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-14: 3.5rem;   /* 56px */
  --space-16: 4rem;     /* 64px */

  /* Fluid display type — scales between 375px and 1440px viewports */
  --fs-hero: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  --fs-section: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --fs-card: clamp(1rem, 0.95rem + 0.25vw, 1.18rem);
  --fs-cta: clamp(1.35rem, 1.05rem + 1.2vw, 2rem);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  color: var(--text-main);
  line-height: 1.7;
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}

h1, h2, h3, h4, h5, h6,
.section-title, .card-title, .cta-title,
.hero-title, .hero-content h1,
.footer-heading {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

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

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

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Top bar */

.top-bar {
  background-color: var(--primary-dark);
  color: #ffffff;
  font-size: 0.85rem;
}

.top-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
}

.top-bar-left,
.top-bar-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.top-bar-separator {
  opacity: 0.5;
}

.top-bar a {
  color: #ffffff;
  opacity: 0.9;
}

.top-bar a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Header / Navigation */

/* ── Header ──────────────────────────────────────────────────────────────────
   The header is tall on purpose -- the logo is meant to land with some weight
   on arrival -- but 181px of permanent furniture is a quarter of a laptop
   viewport. So it condenses once the reader starts scrolling.

   The thing that makes this safe: the sticky box keeps a CONSTANT height, and
   only .header-bar inside it changes size. A sticky element occupies space in
   normal flow, so shrinking the header itself would make the document ~110px
   shorter and slide every bit of content below it upward, mid-read. Holding the
   outer height fixed means the document never reflows at all.

   Below the condensed bar the header is transparent and pointer-events: none,
   so content scrolls under it visibly and stays clickable.

   --header-height is derived, not typed, so the sticky box and the bar cannot
   drift apart when the logo or the padding changes. */
:root {
  --nav-logo-height: 100px;
  --nav-logo-height-condensed: 52px;
  --nav-padding: 2.5rem;
  --nav-padding-condensed: 0.85rem;
  --header-height: calc(var(--nav-logo-height) + (2 * var(--nav-padding)) + 1px);
}

header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header-height);
  pointer-events: none;
}

.header-bar {
  /* Positioning context for the mobile menu, which is absolute at top: 100%.
     Anchored to the header instead it would hang below the full expanded
     height, leaving a gap under the condensed bar. */
  position: relative;
  background-color: #ffffff;
  border-bottom: 1px solid var(--border-soft);
  pointer-events: auto;
}

.header-sentinel {
  height: 1px;
  margin-bottom: -1px;
  pointer-events: none;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--nav-padding) 0;
  gap: 1.5rem;
  transition: padding 0.25s ease;
}

header.is-condensed .nav {
  padding: var(--nav-padding-condensed) 0;
}

header.is-condensed .nav-logo img {
  height: var(--nav-logo-height-condensed);
}

/* An open mobile menu keeps the full header. Condensing under an open dropdown
   pulls the menu up the screen while a finger is already moving toward it. */
header.is-condensed:has(.nav-menu-open) .nav {
  padding: var(--nav-padding) 0;
}

header.is-condensed:has(.nav-menu-open) .nav-logo img {
  height: var(--nav-logo-height);
}

@media (prefers-reduced-motion: reduce) {
  .nav,
  .nav-logo img {
    transition: none;
  }
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-logo img {
  height: var(--nav-logo-height);
  width: auto;
  transition: height 0.25s ease;
  vertical-align: middle;
  object-fit: contain;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.95rem;
}

.nav-links a {
  position: relative;
  padding-bottom: 0.25rem;
  color: var(--text-main);
  font-weight: 500;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--primary));
  transition: width 0.2s ease-out;
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-cta-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-cta-group .btn {
  padding: 0.38rem 0.85rem;
  font-size: 0.8rem;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Hamburger menu button */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 30;
}

.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--text-main);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-hamburger-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-hamburger-active span:nth-child(2) {
  opacity: 0;
}

.nav-hamburger-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.18s ease-out, color 0.18s ease-out, border-color 0.18s ease-out;
}

/* Primary = solid green from logo */
.btn-primary {
  background-color: var(--accent);   /* #007e49 */
  color: #ffffff;
  border-color: var(--accent);
}

.btn-primary:hover {
  background-color: #009857; /* slightly brighter green */
  border-color: #009857;
}

/* Outline stays white background */
.btn-outline {
  background-color: #ffffff;
  color: var(--accent);
  border: 2px solid var(--accent);
}

.btn-outline:hover {
  background-color: #e8f7f0; /* light green tint */
  border-color: var(--accent);
  color: var(--primary-dark);
}


/* Hero */

.hero {
  position: relative;
  overflow: hidden;
  /* image + dark blue overlay so text stays readable */
  background:
    linear-gradient(rgba(20, 30, 80, 0.78), rgba(20, 30, 80, 0.78)),
    url("/assets/slide2-27456da1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  color: #ffffff;
  padding: 3rem 0 3.2rem; /* taller hero with more top/bottom space */
}

/* Hero variant for content pages (warehousing, distribution, etc.) - reduced vertical padding */
/* Fixed min-height + flex layout pins CTA buttons to the bottom of the hero */
.hero-content {
  padding: 2rem 0 2rem;
  min-height: 280px;
  display: flex;
}

.hero-content .hero-inner {
  flex: 1;
}

.hero-content .hero-inner > div {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.hero-content .hero-cta-row {
  margin-top: auto;
}

.hero-warehousing {
  background: linear-gradient(rgba(20, 30, 80, 0.78), rgba(20, 30, 80, 0.78)), url("/assets/hero-warehousing-55efa23c.webp");
  background-size: cover;
  background-position: center;
}
.hero-transportation {
  background: linear-gradient(rgba(20, 30, 80, 0.78), rgba(20, 30, 80, 0.78)), url("/assets/hero-transportation-dbb9c4a7.webp");
  background-size: cover;
  background-position: center;
}
.hero-supply-chain {
  background: linear-gradient(rgba(20, 30, 80, 0.78), rgba(20, 30, 80, 0.78)), url("/assets/hero-supply-chain-60d32a3b.webp");
  background-size: cover;
  background-position: center;
}
.hero-security {
  background: linear-gradient(rgba(20, 30, 80, 0.78), rgba(20, 30, 80, 0.78)), url("/assets/hero-security-bf12ce2b.webp");
  background-size: cover;
  background-position: center;
}
.hero-distribution {
  background: linear-gradient(rgba(20, 30, 80, 0.78), rgba(20, 30, 80, 0.78)), url("/assets/hero-distribution-a2c8cfd0.webp");
  background-size: cover;
  background-position: center;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Matches .split (1100px) so the hero text shares a left edge with the section
     under it. This used to be faked: max-width was 1050px with padding-left: 0,
     and the 25px of extra auto margin that bought stood in for .container's
     24px gutter -- alignment to within a pixel, but only while both boxes were
     at full width. Below 1100px the margins ran out, and below 1050px the hero
     had no gutter at all and its text sat flush against the viewport edge while
     everything under it kept its own. Same box as .split now, so they track
     each other at every width and .container's padding is left alone. */
  max-width: 1100px;
  margin: 0 auto;         /* center within hero container */
  gap: 1.6rem;            /* more space between text sections */
}

.hero-eyebrow {
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  font-weight: 600;
  opacity: 0.85;
  margin-bottom: 0.5rem;
}

.hero-title {
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 0.6rem;
}

.hero-title span {
  color: #9fe6c0; /* keeps a little contrast from the green palette */
}

.hero-subtitle {
 margin-bottom: 1.1rem;
}

.hero-highlight {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 1.6rem;
  font-size: 0.9rem;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background-color: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.2);
  font-weight: 500;
}

.hero-pill-badge {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9fe6c0;
}

.hero-cta-row {
 margin-top: 0.4rem;
}

.hero-note {
  font-size: 0.8rem;
  opacity: 0.9;
}

.hero-media {
  position: relative;
}

.hero-card {
  background-color: rgba(6, 12, 40, 0.9);
  border-radius: 18px;
  padding: 1.25rem 1.35rem;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
}

.hero-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.hero-card-title {
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  opacity: 0.9;
}

.status-badge {
  font-size: 0.72rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background-color: rgba(0,126,73,0.25);
  color: #aef2c8;
  border: 1px solid rgba(174,242,200,0.8);
}

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0.6rem;
  margin-bottom: 0.9rem;
  font-size: 0.82rem;
}

.hero-metric {
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  background-color: rgba(17,26,75,0.9);
  border: 1px solid rgba(255,255,255,0.04);
}

.hero-metric-label {
  opacity: 0.7;
  font-size: 0.74rem;
}

.hero-metric-value {
  font-weight: 650;
  margin-top: 0.15rem;
}

.hero-footnote {
  font-size: 0.72rem;
  opacity: 0.7;
}

.hero-tag {
  position: absolute;
  bottom: -0.6rem;
  right: 0.4rem;
  font-size: 0.7rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background-color: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(4px);
}

/* Contact hero two-column layout */

.contact-hero-inner {
  display: flex;
  gap: 4rem;
  align-items: flex-start;
}

.contact-hero-inner .section-header {
  text-align: left;
  margin-bottom: 0;
  flex: 1;
}

.contact-hero-inner .section-subtitle {
  margin-left: 0;
  color: rgba(255, 255, 255, 0.8);
}

.contact-hero-inner .section-eyebrow {
  color: #9fe6c0;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 260px;
  font-size: 0.95rem;
  padding-top: 0.5rem;
}

.contact-details a {
  color: #9fe6c0;
}

.contact-details a:hover {
  text-decoration: underline;
}

/* Generic sections */

.section {
  padding: 3.5rem 0;
}

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

.map-section {
  width: 100%;
  line-height: 0;
}

.map-section iframe {
  width: 100%;
  height: 400px;
  border: 0;
  display: block;
}

.section-header {
  text-align: center;
  margin-bottom: 2.25rem;
}

.section-eyebrow {
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.section-title {
  font-size: var(--fs-section);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.3rem;
}

.section-subtitle {
  max-width: 36rem;
  margin: 0.4rem auto 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Cards & grids */

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

.card {
  background-color: #ffffff;
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--border-soft);
  box-shadow: 0 4px 18px rgba(6,22,41,0.03);
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.25s ease-out;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(6, 22, 41, 0.08);
  border-color: rgba(0, 126, 73, 0.25);
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 0.85rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 126, 73, 0.08), rgba(50, 60, 140, 0.06));
  color: var(--accent);
}

.card-icon .icon {
  width: 22px;
  height: 22px;
}

.card:hover .card-icon {
  background: linear-gradient(135deg, rgba(0, 126, 73, 0.14), rgba(50, 60, 140, 0.10));
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
}

.card-title {
  font-size: var(--fs-card);
  font-weight: 650;
  color: var(--primary-dark);
  line-height: 1.25;
}

.card-tag {
  font-size: 0.72rem;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background-color: #f0f7f3;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.card-body {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.card-list {
  list-style: none;
  font-size: 0.88rem;
  color: var(--text-main);
}

.card-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}

.card-list-bullet {
  margin-top: 0.25rem;
  font-size: 0.7rem;
  color: var(--accent);
}

.card-link {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.card-link::after {
  content: "›";
  font-size: 0.85em;
  transform: translateY(1px);
}

/* Split layout / About */

.split {
  max-width: 1100px;
  margin: 0 auto;
}

.split-text h3 {
  font-size: 1.4rem;
  margin-bottom: 0.6rem;
}

.split-text p {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-top: 0.6rem;
  margin-bottom: 1.2rem; /* add breathing room below intro text */
}

.keyline-list {
  margin-top: 1.4rem; /* more space above the table */
  border-top: 1px solid var(--border-soft);
}

.keyline-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.9rem;
}

.keyline-label {
  font-weight: 600;
  color: var(--primary-dark);
}

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

/* Two-column content + sidebar layout */
.content-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: flex-start;
}

.content-main {
  /* Main content area */
}

.content-main p {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-top: 0.6rem;
  margin-bottom: 1.2rem;
}

.content-aside {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Arrow bullet list styling */
.arrow-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.arrow-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.4rem 0;
  font-size: 0.9rem;
  color: var(--text-main);
  border-bottom: 1px solid var(--border-soft);
}

.arrow-list li:last-child {
  border-bottom: none;
}

.arrow-list li::before {
  content: "→";
  color: var(--accent);
  font-weight: 600;
  flex-shrink: 0;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.3rem; /* slightly more space after the keyline table */
}

.badge {
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  font-size: 0.78rem;
  background-color: #ffffff;
  color: var(--text-muted);
}

.pill-accent {
  background-color: #e1f4ea;
  border-color: rgba(0,126,73,0.25);
  color: var(--accent);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.5rem;        /* a bit more space between cards */
  margin-top: 1.5rem; /* push cards down under the badges */
}

.stat {
  padding: 1.1rem 1.2rem;
  border-radius: var(--radius-lg);
  background-color: #ffffff;
  border: 1px solid var(--border-soft);
  text-align: left;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 0.15rem;
}

.stat-label {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Industries pill row */

.pill-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1.5rem;
}

.pill {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  font-size: 0.85rem;
  background-color: #ffffff;
  color: var(--text-muted);
}

/* Services list (centered flex-wrap with styled tags) */
.services-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1000px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
}

.services-list li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.1rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-main);
  background: #ffffff;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  transition: border-color 0.18s ease-out, box-shadow 0.18s ease-out, color 0.18s ease-out;
  white-space: nowrap;
}

.services-list li:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0, 126, 73, 0.1);
  color: var(--accent);
}

.services-list li::before {
  display: none;
}

.service-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.18s ease-out;
}

.service-link:hover {
  color: var(--accent);
}

/* Testimonials */

.testimonials {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);
  gap: 1.75rem;
  align-items: flex-start;
}

.quote-card {
  position: relative;
  padding: 1.5rem 1.6rem;
  border-radius: var(--radius-lg);
  background-color: #ffffff;
  border: 1px solid var(--border-soft);
  box-shadow: 0 10px 25px rgba(0,0,0,0.03);
  font-size: 0.92rem;
  color: var(--text-main);
}

.quote-mark {
  position: absolute;
  top: 0.9rem;
  left: 1.3rem;
  font-size: 1.6rem;
  color: var(--accent);
  opacity: 0.2;
}

.quote-text {
  margin-top: 0.9rem;
}

.quote-author {
  margin-top: 0.9rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.quote-role {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.quote-badge {
  margin-top: 0.8rem;
  font-size: 0.8rem;
  color: var(--accent);
}

.quote-sidebar {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.quote-sidebar ul {
  margin-top: 0.6rem;
  padding-left: 1.1rem;
}

.quote-sidebar li {
  margin-bottom: 0.3rem;
}

/* CTA Band */

/* ── Associations & Certifications banner ── */
.associations-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 1rem 0;
}

.associations-compact {
  padding: 1.2rem 0 0;
  margin-top: 1.8rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.association-logo {
  max-height: 80px;
  width: auto;
  object-fit: contain;
  filter: grayscale(0%);
  opacity: 0.9;
  transition: opacity 0.2s;
}

.association-logo:hover {
  opacity: 1;
}

@media (max-width: 640px) {
  .associations-logos {
    gap: 2rem;
  }
  .association-logo {
    max-height: 60px;
  }
}

/* ── CTA band ── */
.cta-band {
  background-color: var(--primary); /* solid blue from logo */
  color: #ffffff;
}

.cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 2.25rem 0;
}

.cta-title {
  font-size: var(--fs-cta);
  font-weight: 650;
  line-height: 1.2;
  margin-bottom: 0.1rem;
}

.cta-subtitle {
  font-size: 0.95rem;
  opacity: 0.9;
}

/* Footer */

/* Scoped to the page footer rather than every <footer>.
   As a bare element selector this also styled semantic footers nested inside
   content -- a <blockquote><footer> attribution on /comments rendered as a dark
   navy block with unreadable text. The page footer is a direct child of body,
   so `body >` is exact. */
body > footer {
  background-color: #050820;
  color: #d1d4ea;
  padding-top: 2.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0,1.4fr) repeat(2, minmax(0,1fr));
  gap: 1.75rem;
  padding-bottom: 2rem;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.75rem;
}

.footer-logo img {
  height: 40px;
  width: auto;
}

.footer-logo-text {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
}

.footer-address {
  font-size: 0.9rem;
  margin-top: 0.4rem;
}

.footer-address span {
  display: block;
}

.footer-phone a,
.footer-email a {
  color: #ffffff;
  font-weight: 500;
}

.footer-heading {
  font-size: 0.95rem;
  font-weight: 650;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #ffffff;
}

.footer-links {
  list-style: none;
  font-size: 0.88rem;
}

.footer-links li {
  margin-bottom: 0.35rem;
}

.footer-links a {
  color: #d1d4ea;
  opacity: 0.9;
}

.footer-links a:hover {
  opacity: 1;
}

.footer-badges {
  margin-top: 0.8rem;
  font-size: 0.82rem;
  color: #a6aae0;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 0.9rem 0 1.2rem;
  font-size: 0.78rem;
  color: #a6aae0;
}

.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.footer-bottom a {
  color: #ffffff;
}

/* Quote form layout */

.form-card {
  max-width: 820px;
  margin: 0 auto;
  padding: 1.75rem 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
  background-color: #ffffff;
}

.form-intro {
  max-width: 820px;
  margin: 0 auto 1.5rem auto;
  text-align: left;              /* align content with the form card */
}

.form-intro .section-title {
  text-align: left;              /* left-align heading */
  margin-bottom: 0.3rem;
}

.form-intro .section-subtitle {
  text-align: left;              /* left-align subtitle */
  margin-top: 0.25rem;
  max-width: none;               /* remove global 36rem width limit */
}
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.4rem;
}

.form-group {
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
}

.form-group-full {
  flex-basis: 100%;
}

.form-group label {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  font-size: 0.95rem;
  font-family: inherit;
  background-color: #f8fafc;
  transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out, background-color 0.15s ease-out;
}

.form-group select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23323c8c' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1rem;
  padding-right: 2.4rem;
  cursor: pointer;
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 126, 73, 0.16);
  background-color: #ffffff;
}

.required {
  color: #c02b2b;
  margin-left: 0.1rem;
}

.helper-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.error-message {
  font-size: 0.8rem;
  color: #c02b2b;
  margin-top: 0.25rem;
  font-weight: 600;
}

/* Invalid fields key off aria-invalid rather than a class of their own, so the
   way a field looks and the way a screen reader announces it are driven by the
   same attribute and cannot drift apart. Set by FormErrorsHelper#field_options. */
.form-group [aria-invalid="true"] {
  border-color: #c02b2b;
  background-color: #fef6f6;
}

.form-group [aria-invalid="true"]:focus {
  border-color: #c02b2b;
  box-shadow: 0 0 0 2px rgba(192, 43, 43, 0.16);
}

/* The header is position: sticky with a tall logo, so anything scrolled to from
   the top of the viewport lands underneath it. That is what hid the browser's
   own validation bubbles. Generous enough to clear the header and its label. */
.form-group input,
.form-group select,
.form-group textarea,
#main {
  /* Clears the condensed bar (~85px). Was 10rem for the full-height header. */
  scroll-margin-top: 6rem;
}

/* Outstanding-requirements list, directly beneath the submit button. A disabled
   button with nothing explaining it is the same complaint as a message hidden
   behind the header, so the two always appear together. */
.validation-checklist {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 0.9rem 1.25rem;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-lg);
}

.validation-checklist[hidden] {
  display: none;
}

.validation-checklist-heading {
  color: #991b1b;
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
}

.validation-checklist ul {
  color: #c02b2b;
  font-size: 0.875rem;
  margin: 0;
  padding-left: 1.25rem;
}

.validation-checklist li {
  margin-bottom: 0.15rem;
}

/* Disabled submit. Kept clearly a button rather than greyed into the background,
   so it reads as "not yet" instead of "broken". */
.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 0.4rem;
}

/* The group is what is invalid, not any one box, so aria-invalid sits on the
   container. The generic field rule only sets a border colour, which does
   nothing on a div that has no border -- hence a treatment of its own. */
.checkbox-group[aria-invalid="true"] {
  border: 1px solid #c02b2b;
  background-color: #fef6f6;
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
}

.checkbox-group label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
}

.checkbox-group input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  border: 1.5px solid var(--border-soft);
  border-radius: 5px;
  background-color: #ffffff;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: border-color 0.15s ease-out, background-color 0.15s ease-out, box-shadow 0.15s ease-out;
  flex-shrink: 0;
}

.checkbox-group input[type="checkbox"]::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  background: var(--accent);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
  transform: scale(0);
  transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}

.checkbox-group input[type="checkbox"]:checked {
  border-color: var(--accent);
  background-color: rgba(0, 126, 73, 0.06);
}

.checkbox-group input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.checkbox-group label:hover input[type="checkbox"] {
  border-color: var(--accent);
}

.form-actions {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.75rem;
}

@media (max-width: 640px) {
  .form-card {
    padding: 1.25rem 1.2rem;
  }

  .form-row {
    flex-direction: column;
  }

  .map-section iframe {
    height: 300px;
  }
}

/* Responsive */

@media (max-width: 1000px) {
  .nav-hamburger {
    display: flex;
  }

  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border-bottom: 1px solid var(--border-soft);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    padding: 1.5rem;
    flex-direction: column;
    gap: 1rem;
    z-index: 25;
  }

  .nav-menu-open {
    display: flex;
  }

  .nav-menu .nav-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .nav-menu .nav-links a {
    font-size: 1rem;
    padding: 0.5rem 0;
  }

  .nav-menu .nav-cta-group {
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
  }

  .nav-menu .nav-cta-group .btn {
    text-align: center;
    width: 100%;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
  }

  /* Overriding the variables rather than the height keeps --header-height and
     the condensed state in step without restating either. */
  :root {
    --nav-logo-height: 75px;
    --nav-logo-height-condensed: 44px;
  }
}

/* Responsive: contact hero stacks on mobile */
@media (max-width: 768px) {
  .contact-hero-inner {
    flex-direction: column;
    gap: 2rem;
  }

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

/* Responsive: stack columns on smaller screens */
@media (max-width: 900px) {
  .content-sidebar {
    grid-template-columns: minmax(0, 1fr);
  }

  .testimonials,
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-inner {
    padding-top: 2.7rem;
  }

  .hero-media {
    margin-top: 0.8rem;
  }

  .hero-card {
    max-width: 22rem;
    margin: 0 auto;
  }

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

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

}

@media (max-width: 640px) {
  .top-bar-inner {
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
  }

  .top-bar-separator {
    display: none;
  }

  /* Variables, not direct heights: --header-height is derived from these, and a
     rule that sets the logo or the padding directly desynchronises the sticky
     box from the bar it is supposed to match. That leaves invisible dead space
     pinned to the top of the screen -- no error, just a gap. */
  :root {
    --nav-logo-height: 60px;
    --nav-padding: 0.6rem;

    /* At this size the header is already ~80px, so it does not condense: the
       remaining saving is not worth animating on the smallest screens. Equal
       values mean is-condensed changes nothing here. */
    --nav-logo-height-condensed: 60px;
    --nav-padding-condensed: 0.6rem;
  }

  .hero-inner {
    gap: 1.8rem;
  }

  .grid {
    grid-template-columns: minmax(0,1fr);
  }

  .stat-grid {
    grid-template-columns: minmax(0,1fr);
  }


  .cta-inner {
    align-items: flex-start;
  }
}

/* Flash messages */

.flash {
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
}

.flash-notice {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.flash-alert {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.flash-warning {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
}

/* Error summary */

.error-summary {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-lg);
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}

.error-summary h3 {
  color: #991b1b;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.error-summary ul {
  color: #dc2626;
  font-size: 0.9rem;
  margin: 0;
  padding-left: 1.25rem;
}

.error-summary li {
  margin-bottom: 0.25rem;
}

/* Confirmation card */

.confirmation-card {
  background-color: #ffffff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-soft);
}

/* Surcharge table */

.surcharge-section {
  max-width: 500px;
  margin: 0 auto;
}

.surcharge-display {
  margin: 1.5rem 0;
}

.surcharge-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.75rem;
}

.surcharge-table th,
.surcharge-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
}

.surcharge-table th {
  background-color: var(--bg-light);
  font-weight: 600;
  color: var(--primary-dark);
}

.surcharge-table td:last-child {
  text-align: right;
  font-weight: 600;
  color: var(--accent);
}

.surcharge-effective {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

.surcharge-unavailable {
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
}

body.cookie-banner-visible {
  padding-bottom: 80px;
}

/* Cookie consent banner */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--primary-dark);
  color: #ffffff;
  padding: 1rem 1.5rem;
  z-index: 1000;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

.cookie-banner-content {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.cookie-banner-content p {
  margin: 0;
  font-size: 0.9rem;
  flex: 1;
  min-width: 280px;
}

.cookie-banner-actions {
  display: flex;
  gap: 0.5rem;
}

.btn-sm {
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
}

@media (max-width: 640px) {
  .cookie-banner {
    padding: 0.7rem 1rem;
  }

  .cookie-banner-content {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }

  .cookie-banner-content p {
    font-size: 0.8rem;
    min-width: auto;
  }

  .cookie-banner-actions {
    width: 100%;
    justify-content: center;
  }
}

/* Business status indicator */
.business-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
}

.business-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.business-status-open {
  background-color: #22c55e;
  box-shadow: 0 0 4px rgba(34, 197, 94, 0.5);
}

.business-status-closed {
  background-color: #ef4444;
  box-shadow: 0 0 4px rgba(239, 68, 68, 0.4);
}

.business-status-full {
  display: block;
  font-size: 1rem;
}

.business-status-current {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

.business-status-next {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

.business-status-next-minimal {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.business-status-closure {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

/* reCAPTCHA badge — hidden per Google's policy when inline attribution is shown */
.grecaptcha-badge { visibility: hidden; }

/* ──────────────────────────────────────────────────────────
   Accessibility: skip link, focus-visible, reduced motion
   ────────────────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  top: 0;
  left: 1rem;
  padding: 0.6rem 1rem;
  background: var(--primary);
  color: #ffffff;
  font-weight: 600;
  border-radius: 0 0 8px 8px;
  transform: translateY(-110%);
  transition: transform 0.18s ease-out;
  z-index: 1000;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(0, 126, 73, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ──────────────────────────────────────────────────────────
   Scroll reveal (paired with scroll_reveal_controller.js)
   ────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
      transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }

  .reveal.is-revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ──────────────────────────────────────────────────────────
   Client letters (/comments)

   Built on the existing card treatment rather than a new look:
   same surface, radius, border and shadow as .card, so the page
   reads as part of the site instead of an import from the old one.
   ────────────────────────────────────────────────────────── */

.section-intro {
  max-width: 60ch;
  margin-bottom: var(--space-8);
  color: var(--text-muted);
  font-size: 1.05rem;
}

.testimonial-list {
  display: grid;
  gap: var(--space-8);
  max-width: 820px;
}

.testimonial {
  margin: 0;
  padding: var(--space-8);
  background-color: #ffffff;
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 18px rgba(6, 22, 41, 0.03);
}

.testimonial p {
  margin-bottom: var(--space-4);
  color: var(--text-main);
  line-height: 1.75;
}

.testimonial p:last-of-type {
  margin-bottom: 0;
}

.testimonial-salutation {
  font-weight: 600;
  color: var(--primary-dark);
}

.testimonial-attribution {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-soft);
}

.testimonial-signoff {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--text-muted);
}

/* cite is italic by default; these are names, not works. */
.testimonial-attribution cite {
  font-style: normal;
}

.testimonial-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--primary-dark);
}

.testimonial-role,
.testimonial-company {
  display: block;
  font-size: 0.9rem;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .testimonial {
    padding: var(--space-6);
  }
}

/* Branded Turbo Drive progress bar */
.turbo-progress-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--primary));
  box-shadow: 0 0 12px rgba(0, 126, 73, 0.45);
}