/* ================================================================
   CFG Industries — Main Stylesheet
   style.css — shared across all pages
   ================================================================

   TABLE OF CONTENTS
   1.  CSS Custom Properties  (design tokens — change colors/fonts here)
   2.  Base Reset
   3.  Typography
   4.  Container / Layout Utilities
   5.  Header & Navigation
   6.  Mobile Nav
   7.  Buttons
   8.  Hero Sections
   9.  Pillar Cards  (home page)
   10. CTA Band
   11. Content Sections
   12. Brand Grid  (parts page)
   13. Service Cards  (services page)
   14. About Page
   15. Contact Page & Form
   16. Footer
   17. Responsive — tablet (≤900px)
   18. Responsive — mobile (≤600px)

   ================================================================ */


/* ----------------------------------------------------------------
   0. Fonts — self-hosted Inter (replaces the Google Fonts CDN request)
   woff2 files live in /fonts. Latin subset, weights 400/600/700/800.
   ---------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/inter-latin-800-normal.woff2') format('woff2');
}


/* ----------------------------------------------------------------
   1. CSS Custom Properties
   Change the values here to retheme the entire site in one place.
   ---------------------------------------------------------------- */
:root {
  /* Brand colors */
  --color-navy:        #1c2b3a;   /* main dark — header, footer, dark sections */
  --color-navy-light:  #243447;   /* slightly lighter dark for hover states */
  --color-navy-mid:    #2e4260;   /* mid-navy for accents on dark bg */
  --color-yellow:      #f5c518;   /* safety yellow — CTAs, highlights, borders */
  --color-yellow-dark: #d4a80e;   /* yellow hover state */

  /* Neutral / text */
  --color-bg:          #f4f5f6;   /* page background */
  --color-white:       #ffffff;
  --color-text:        #1e1e1e;   /* body text */
  --color-text-mid:    #444444;   /* secondary text */
  --color-text-light:  #666666;   /* tertiary / captions */
  --color-border:      #d8d8d8;

  /* Status */
  --color-success:     #2e7d32;
  --color-error:       #c62828;

  /* Typography */
  --font-main: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* Spacing */
  --space-xs:   0.5rem;   /*  8px */
  --space-sm:   1rem;     /* 16px */
  --space-md:   1.5rem;   /* 24px */
  --space-lg:   2.5rem;   /* 40px */
  --space-xl:   4rem;     /* 64px */
  --space-xxl:  6rem;     /* 96px */

  /* Border radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;

  /* Shadows */
  --shadow-sm:  0 2px 6px rgba(0,0,0,0.10);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.14);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.18);

  /* Transitions */
  --transition: 0.2s ease;

  /* Max content width */
  --max-width:  1140px;
}


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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-main);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--color-navy);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-yellow-dark);
}

/* Links on dark backgrounds use safety yellow so they stay legible.
   (Header, footer, and .nap-block set their own link colors already.) */
.section.dark a,
.parts-intro a,
.page-hero a {
  color: var(--color-yellow);
}

.section.dark a:hover,
.parts-intro a:hover,
.page-hero a:hover {
  color: var(--color-yellow-dark);
}

/* CTA specificity fix: .section.dark a (above) outranks .btn-primary's own
   color rule, so primary buttons on yellow fill were rendering yellow text
   on yellow inside dark sections. Re-assert navy text at higher specificity
   for .btn-primary only — ordinary dark-section links stay yellow, and
   .btn-secondary / .btn-ghost are untouched. */
.section.dark .btn-primary,
.section.dark .btn-primary:hover {
  color: var(--color-navy);
}

ul, ol {
  list-style: none;
}

address {
  font-style: normal;
}


/* ----------------------------------------------------------------
   3. Typography
   ---------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-navy);
}

/* Override heading color when inside dark sections */
.dark h1,
.dark h2,
.dark h3,
.dark h4 {
  color: var(--color-white);
}

h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
h4 { font-size: 1.1rem; }

p {
  margin-bottom: 1rem;
}

p:last-child {
  margin-bottom: 0;
}

.lead {
  font-size: 1.2rem;
  color: var(--color-text-mid);
  max-width: 64ch;
}

.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-yellow);
  margin-bottom: var(--space-xs);
}

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

.yellow { color: var(--color-yellow); }


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

.section {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

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

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

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

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}

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

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


/* ----------------------------------------------------------------
   5. Header & Navigation
   ---------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-navy);
  border-bottom: 3px solid var(--color-yellow);
  box-shadow: var(--shadow-md);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

/* Logo — text-based (no image file required) */
.site-logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
}

.logo-cfg {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--color-yellow);
}

.logo-industries {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #a0b0c0;
}

/* Navigation links */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.site-nav a {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #c8d8e8;
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--color-yellow);
  border-bottom-color: var(--color-yellow);
}

/* "Get a Quote" nav button */
.site-nav a.nav-cta {
  background-color: var(--color-yellow);
  color: var(--color-navy);
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  border-bottom: none;
  font-weight: 700;
}

.site-nav a.nav-cta:hover {
  background-color: var(--color-yellow-dark);
  color: var(--color-navy);
}


/* ----------------------------------------------------------------
   6. Mobile Nav Toggle (hamburger)
   ---------------------------------------------------------------- */
.nav-toggle {
  display: none;  /* shown only on mobile via media query */
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: var(--color-yellow);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}


/* ----------------------------------------------------------------
   7. Buttons
   ---------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 14px 32px;
  font-family: var(--font-main);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
  white-space: nowrap;
}

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

/* Primary — yellow fill */
.btn-primary {
  background-color: var(--color-yellow);
  color: var(--color-navy);
  border-color: var(--color-yellow);
}

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

/* Secondary — outlined yellow */
.btn-secondary {
  background-color: transparent;
  color: var(--color-yellow);
  border-color: var(--color-yellow);
}

.btn-secondary:hover {
  background-color: var(--color-yellow);
  color: var(--color-navy);
}

/* Ghost — outlined white (for dark backgrounds) */
.btn-ghost {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.btn-ghost:hover {
  background-color: var(--color-white);
  color: var(--color-navy);
}

/* Full-width variant */
.btn-block {
  display: block;
  width: 100%;
  text-align: center;
}


/* ----------------------------------------------------------------
   8. Hero Sections
   ---------------------------------------------------------------- */

/* Home hero — full-viewport height with dark overlay */
.hero {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: center;
  background-color: var(--color-navy);
  overflow: hidden;
}

/* 
  REPLACE: real facility/equipment photo here.
  Set as CSS background-image in a <style> block on the page,
  or replace the placeholder SVG in /images/hero-home.svg with a real JPG.
  Recommended: 1920×900px JPG, compressed to <200KB.
*/
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.28;  /* overlay opacity — adjust if real photo is used */
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: var(--space-xxl) 0;
}

.hero h1 {
  color: var(--color-white);
  margin-bottom: var(--space-sm);
  max-width: 16ch;
}

.hero .hero-sub {
  font-size: 1.2rem;
  color: #c8d8e8;
  max-width: 54ch;
  margin-bottom: var(--space-lg);
}

.hero-badge {
  display: inline-block;
  background-color: var(--color-yellow);
  color: var(--color-navy);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 2px;
  margin-bottom: var(--space-md);
}

/* Page-level hero (internal pages — shorter) */
.page-hero {
  background-color: var(--color-navy);
  padding: var(--space-xl) 0;
  border-bottom: 4px solid var(--color-yellow);
}

.page-hero h1 {
  color: var(--color-white);
  margin-bottom: var(--space-xs);
}

.page-hero p {
  color: #a0b8cc;
  font-size: 1.1rem;
  max-width: 60ch;
}


/* ----------------------------------------------------------------
   9. Pillar Cards (home page — three business pillars)
   ---------------------------------------------------------------- */
.pillars {
  background-color: var(--color-white);
  padding: var(--space-xl) 0;
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.pillar-card {
  background-color: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  border-top: 4px solid var(--color-navy-mid);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}

.pillar-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* The advisory pillar gets a yellow top border to signal "differentiator" */
.pillar-card.differentiator {
  border-top-color: var(--color-yellow);
  background-color: var(--color-navy);
}

.pillar-card.differentiator h3,
.pillar-card.differentiator p {
  color: var(--color-white);
}

.pillar-card.differentiator .pillar-link {
  color: var(--color-yellow);
}

.pillar-icon {
  font-size: 2.4rem;
  margin-bottom: var(--space-sm);
}

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

.pillar-card p {
  color: var(--color-text-mid);
  font-size: 0.95rem;
  margin-bottom: var(--space-md);
}

.pillar-link {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: 0.04em;
}

.pillar-link:hover {
  color: var(--color-yellow-dark);
}


/* ----------------------------------------------------------------
   10. CTA Band
   ---------------------------------------------------------------- */
.cta-band {
  background-color: var(--color-yellow);
  padding: var(--space-xl) 0;
}

.cta-band h2 {
  color: var(--color-navy);
  margin-bottom: var(--space-xs);
}

.cta-band p {
  color: var(--color-navy-light);
  margin-bottom: var(--space-lg);
  font-size: 1.1rem;
}

.cta-band .flex-between {
  align-items: flex-start;
  gap: var(--space-lg);
}


/* ----------------------------------------------------------------
   11. Content Sections (generic)
   ---------------------------------------------------------------- */
.content-section {
  padding: var(--space-xl) 0;
}

.section-heading {
  margin-bottom: var(--space-lg);
}

.section-heading h2 {
  margin-bottom: var(--space-xs);
}

.section-heading p {
  font-size: 1.05rem;
  color: var(--color-text-mid);
  max-width: 70ch;
}

.divider {
  width: 56px;
  height: 4px;
  background-color: var(--color-yellow);
  border: none;
  margin: var(--space-sm) 0 var(--space-md);
}

/* Stat strip (used on home and about) */
.stat-strip {
  background-color: var(--color-navy-light);
  padding: var(--space-lg) 0;
}

.stat-strip .grid-4 {
  text-align: center;
}

.stat-number {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-yellow);
  line-height: 1;
  margin-bottom: 4px;
}

/* Modifier for stat values that are words/phrases rather than short numerals
   (e.g. "Below OEM List Price") — the default 2.4rem is sized for tokens like
   "1978" or "50+" and wraps badly for longer text, especially at the 2-column
   mobile breakpoint. Apply this class alongside .stat-number on text-based stats. */
.stat-number--text {
  font-size: 1.35rem;
  line-height: 1.15;
}

.stat-label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a0b8cc;
}


/* ----------------------------------------------------------------
   12. Brand Grid (parts page)
   ---------------------------------------------------------------- */
.brand-category {
  margin-bottom: var(--space-xl);
}

.brand-category h3 {
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-navy);
  border-bottom: 3px solid var(--color-yellow);
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-md);
}

.brand-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Home-page brand preview strip — fixed 8-column grid so the 16 chips
   always break into two clean, even rows regardless of text width. */
.brand-preview-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
}

.brand-preview-grid .brand-tag {
  text-align: center;
}

@media (max-width: 900px) {
  .brand-preview-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 520px) {
  .brand-preview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.brand-tag {
  display: inline-block;
  background-color: var(--color-white);
  color: var(--color-navy);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

/* Parts coverage intro */
.parts-intro {
  background-color: var(--color-navy);
  padding: var(--space-xl) 0;
  color: var(--color-white);
}

.parts-intro h2 { color: var(--color-white); }
.parts-intro p  { color: #a8bfcf; max-width: 70ch; }


/* ----------------------------------------------------------------
   13. Service Cards (services page)
   ---------------------------------------------------------------- */
.service-card {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  border-left: 5px solid var(--color-yellow);
  margin-bottom: var(--space-md);
  transition: box-shadow var(--transition);
}

.service-card:hover {
  box-shadow: var(--shadow-md);
}

.service-card h3 {
  color: var(--color-navy);
  margin-bottom: var(--space-xs);
}

.service-card p {
  color: var(--color-text-mid);
  margin-bottom: 0;
}

.service-card .service-icon {
  font-size: 1.8rem;
  margin-bottom: var(--space-sm);
}

/* Highlight badge for the advisory section */
.advisory-badge {
  display: inline-block;
  background-color: var(--color-yellow);
  color: var(--color-navy);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 2px;
  margin-bottom: var(--space-sm);
}

/* Service feature list */
.feature-list {
  list-style: none;
  margin-top: var(--space-sm);
}

.feature-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.6rem;
  color: var(--color-text-mid);
  font-size: 0.95rem;
}

.feature-list li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--color-yellow);
  font-weight: 700;
}

/* Ensure feature-list text is legible on dark navy backgrounds */
.section.dark .feature-list li {
  color: #d8e3ec;
}


/* ----------------------------------------------------------------
   14. About Page
   ---------------------------------------------------------------- */
.about-story {
  background-color: var(--color-white);
  padding: var(--space-xl) 0;
}

.about-story p {
  font-size: 1.05rem;
  color: var(--color-text-mid);
  max-width: 70ch;
  margin-bottom: var(--space-md);
}

/* Image placeholder block */
.img-placeholder {
  background-color: var(--color-navy-light);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-lg);
  min-height: 280px;
  color: #6080a0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 2px dashed #304a66;
}

.img-placeholder .ph-icon {
  font-size: 3rem;
  margin-bottom: var(--space-sm);
  color: var(--color-yellow);
  opacity: 0.6;
}

.img-placeholder p {
  color: #6080a0;
  font-size: 0.8rem;
  margin-top: var(--space-xs);
}

/* Values list on about page */
.values-list {
  margin-top: var(--space-md);
}

.values-list li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

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

.value-mark {
  color: var(--color-yellow);
  font-weight: 700;
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.value-text strong {
  display: block;
  color: var(--color-navy);
  font-size: 1rem;
  margin-bottom: 2px;
}

.value-text span {
  font-size: 0.92rem;
  color: var(--color-text-mid);
}


/* ----------------------------------------------------------------
   15. Contact Page & Form
   ---------------------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: var(--space-xl);
  align-items: start;
}

.contact-info h2 {
  margin-bottom: var(--space-md);
}

.nap-block {
  background-color: var(--color-navy);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  color: var(--color-white);
  margin-bottom: var(--space-md);
}

.nap-block h3 {
  color: var(--color-yellow);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.nap-block address {
  font-size: 1rem;
  color: #c0d4e8;
  line-height: 1.8;
}

.nap-block a {
  color: var(--color-yellow);
  font-weight: 600;
}

.nap-block a:hover {
  color: var(--color-yellow-dark);
}

/* Inquiry form */
.inquiry-form-wrap {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
  border-top: 4px solid var(--color-yellow);
}

.inquiry-form-wrap h2 {
  margin-bottom: var(--space-xs);
}

.inquiry-form-wrap .lead {
  margin-bottom: var(--space-lg);
  font-size: 1rem;
}

/* Form layout */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.form-group {
  margin-bottom: var(--space-md);
}

.form-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.form-group label .required-mark {
  color: var(--color-error);
  margin-left: 2px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 11px 14px;
  font-family: var(--font-main);
  font-size: 0.95rem;
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
  -webkit-appearance: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-navy);
  box-shadow: 0 0 0 3px rgba(28, 43, 58, 0.12);
  background-color: var(--color-white);
}

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

/* Custom select arrow */
.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%231c2b3a' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
  cursor: pointer;
}

/* Urgency select — visual feedback for emergency */
.form-group select option[value="emergency"] {
  color: var(--color-error);
}

/* Form submit button */
.form-submit {
  margin-top: var(--space-sm);
}

/* Feedback messages */
#form-feedback {
  display: none;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-weight: 600;
  margin-top: var(--space-sm);
  font-size: 0.95rem;
}

#form-feedback.success {
  display: block;
  background-color: #e8f5e9;
  color: var(--color-success);
  border: 1px solid #c8e6c9;
}

#form-feedback.error {
  display: block;
  background-color: #ffebee;
  color: var(--color-error);
  border: 1px solid #ffcdd2;
}

/* Loading state on submit button */
.btn[data-loading="true"] {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}


/* Honeypot anti-spam field — pushed off-screen rather than display:none
   (some bots skip display:none). Real users never see it; a filled value
   means a bot, and the submission is dropped server-side. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ----------------------------------------------------------------
   16. Footer
   ---------------------------------------------------------------- */
.site-footer {
  background-color: var(--color-navy);
  color: #8aa0b8;
  padding-top: var(--space-xl);
  border-top: 3px solid var(--color-yellow);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid #2e4260;
}

.footer-logo {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--color-yellow);
  margin-bottom: var(--space-sm);
}

.footer-nap address {
  line-height: 1.9;
  color: #8aa0b8;
  font-size: 0.95rem;
}

.footer-nap a {
  color: #c0d4e8;
  font-weight: 600;
}

.footer-nap a:hover {
  color: var(--color-yellow);
}

.footer-nap p {
  margin-bottom: 4px;
}

.footer-links h4 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-yellow);
  margin-bottom: var(--space-sm);
}

.footer-links nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-links a {
  font-size: 0.9rem;
  color: #8aa0b8;
  text-decoration: none;
  transition: color var(--transition);
}

.footer-links a:hover {
  color: var(--color-yellow);
}

.footer-bottom {
  padding: var(--space-md) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.footer-bottom p {
  font-size: 0.82rem;
  color: #5a7090;
  margin-bottom: 0;
}

.footer-bottom a {
  color: #5a7090;
}

.footer-bottom a:hover {
  color: var(--color-yellow);
}


/* ----------------------------------------------------------------
   17. Responsive — Tablet (≤900px)
   ---------------------------------------------------------------- */
@media (max-width: 900px) {
  .grid-3,
  .pillars-grid {
    grid-template-columns: 1fr 1fr;
  }

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

  .contact-layout {
    grid-template-columns: 1fr;
  }

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

  /* With only 2 footer columns, no spanning needed at tablet */

  .cta-band .flex-between {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ----------------------------------------------------------------
   18. Responsive — Mobile (≤600px)
   ---------------------------------------------------------------- */
@media (max-width: 600px) {

  /* Show hamburger, hide nav by default */
  .nav-toggle {
    display: flex;
  }

  .site-nav {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background-color: var(--color-navy);
    flex-direction: column;
    gap: 0;
    padding: var(--space-sm) 0;
    border-top: 2px solid var(--color-yellow);
    border-bottom: 2px solid var(--color-yellow);
    box-shadow: var(--shadow-md);
    z-index: 99;
  }

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

  .site-nav a {
    padding: 14px var(--space-md);
    border-bottom: 1px solid #243447;
    width: 100%;
    font-size: 1rem;
  }

  .site-nav a.nav-cta {
    margin: var(--space-sm) var(--space-md);
    text-align: center;
    border-radius: var(--radius-sm);
  }

  /* Grids collapse to single column */
  .grid-2,
  .grid-3,
  .grid-4,
  .pillars-grid,
  .form-row,
  .footer-grid {
    grid-template-columns: 1fr;
  }

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

  .hero {
    min-height: 420px;
  }

  .hero h1 {
    max-width: 100%;
  }

  /* Stack CTA band */
  .cta-band .flex-between {
    flex-direction: column;
  }

  .section {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }
}