/* ==========================================================================
   Design Touch — Shared Stylesheet
   Governed by: 06-design-system.md (LOCKED, v1.1), 04-development-rules.md (LOCKED, v1.4)
   One shared stylesheet for the entire site — see Document 04 §5.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens (CSS Custom Properties)
   Values marked "IMPLEMENTATION DEFAULT" are concrete values chosen during
   this batch to satisfy Document 06 sections that intentionally defer exact
   pixel values to implementation (see Document 06 §9, §12, §28). They are
   flagged for formal recording as a Document 06 amendment — see Batch 01
   Implementation Blockers.
   -------------------------------------------------------------------------- */
:root {
  /* Color System — Document 06 §5. Reference hex values; must match the
     locked logo asset once supplied (see Implementation Blockers). */
  --color-navy: #0B2545;
  --color-orange: #E4772E;
  --color-white: #FFFFFF;
  --color-gray: #F4F6F8;
  --color-charcoal: #1C1F24;

  /* Semantic color roles */
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-gray);
  --color-bg-dark: var(--color-navy);
  --color-text: var(--color-charcoal);
  --color-text-inverse: var(--color-white);
  --color-accent: var(--color-orange);
  --color-border: #E2E6EA;
  --color-focus: var(--color-orange);

  /* Typography — Document 06 §6. Primary typeface is TBD (locked pending
     amendment); fallback stack only, per Document 06 §6.1. */
  --font-primary: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Type scale — IMPLEMENTATION DEFAULT, mobile-first base sizes */
  --text-base: 1rem;        /* 16px body */
  --text-sm: 0.875rem;      /* 14px caption/small */
  --text-lg: 1.125rem;      /* 18px lead/intro */
  --text-h1: 2rem;          /* 32px mobile, scales up at desktop */
  --text-h2: 1.625rem;      /* 26px */
  --text-h3: 1.3125rem;     /* 21px */
  --text-h4: 1.125rem;      /* 18px */
  --line-height-body: 1.6;
  --line-height-heading: 1.25;

  /* Spacing Scale — Document 06 §9. Base unit = 8px (IMPLEMENTATION DEFAULT). */
  --space-unit: 8px;
  --space-xs: calc(var(--space-unit) * 1);   /* 8px */
  --space-sm: calc(var(--space-unit) * 2);   /* 16px */
  --space-md: calc(var(--space-unit) * 4);   /* 32px */
  --space-lg: calc(var(--space-unit) * 6);   /* 48px */
  --space-xl: calc(var(--space-unit) * 8);   /* 64px */
  --space-2xl: calc(var(--space-unit) * 12); /* 96px */
  --space-3xl: calc(var(--space-unit) * 16); /* 128px */

  /* Container Widths — Document 06 §11. IMPLEMENTATION DEFAULT. */
  --container-max: 1200px;
  --container-narrow: 720px;
  --container-padding: var(--space-sm);

  /* Breakpoints (referenced in comments; media queries below) —
     Document 06 §12. IMPLEMENTATION DEFAULT.
     Tablet: 768px, Desktop: 1024px, Large Desktop: 1280px */

  /* Border Radius — Document 06 §21. Single modest value per component
     category. IMPLEMENTATION DEFAULT. */
  --radius-button: 6px;
  --radius-card: 10px;
  --radius-input: 6px;

  /* Shadow — Document 06 §21. Single low-elevation style only. */
  --shadow-card: 0 1px 3px rgba(11, 37, 69, 0.08), 0 1px 2px rgba(11, 37, 69, 0.06);

  /* Motion — Document 06 §22. Short, consistent durations only. */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* Header */
  --header-height: 72px;
  --header-height-scrolled: 60px;
}

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

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

body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

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

img {
  /* Document 06 §18 — no distortion; explicit width/height set per-image
     to prevent layout shift and unintended stretching. */
  object-fit: cover;
}

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

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-sm) 0;
  line-height: var(--line-height-heading);
  font-weight: 700;
  color: var(--color-navy);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); font-weight: 600; }
h4 { font-size: var(--text-h4); font-weight: 600; }

p {
  margin: 0 0 var(--space-sm) 0;
  max-width: 68ch; /* Document 06 §8 — readable line length */
}

/* Document 06 §8 — no justified text anywhere on the site */
p, li {
  text-align: left;
}

/* Document 06 §23 — visible, consistent focus state on every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Document 06 §22 / §23 — respect reduced-motion preference site-wide */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Skip link — Document 04 §9 keyboard accessibility */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--color-navy);
  color: var(--color-white);
  padding: var(--space-xs) var(--space-sm);
  z-index: 1000;
  border-radius: var(--radius-button);
}

.skip-link:focus {
  left: var(--space-sm);
  top: var(--space-xs);
}

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

.container--narrow {
  max-width: var(--container-narrow);
}

/* Document 06 §19 — full-width sections stacked vertically, alternating backgrounds */
.section {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

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

.section--dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--color-text-inverse);
}

/* Document 06 §10 — 12-column grid at desktop, collapsing responsively */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(12, 1fr);
  }
}

/* --------------------------------------------------------------------------
   4. Buttons — Document 06 §13
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-button);
  font-size: var(--text-base);
  font-weight: 600;
  border: 2px solid transparent;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  min-height: 44px; /* Document 06 §24 — mobile touch target minimum */
}

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

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: #cf6a26; /* consistent single darker state, no gradient */
}

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

.btn--secondary:hover,
.btn--secondary:focus-visible {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.btn--text {
  padding: 0;
  min-height: auto;
  color: var(--color-navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn--text:hover,
.btn--text:focus-visible {
  color: var(--color-orange);
}

/* --------------------------------------------------------------------------
   5. Header & Navigation — Document 03 §2, Document 06 §15
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  height: var(--header-height);
  transition: height var(--transition-base);
}

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

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.site-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-header__logo img {
  height: 36px;
  width: auto;
}

/* Desktop nav */
.site-nav {
  display: none;
}

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

.site-nav__link {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-charcoal);
  padding: var(--space-xs) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--color-navy);
}

/* Document 03 §2 — active page indication */
.site-nav__link[aria-current="page"] {
  color: var(--color-navy);
  border-bottom-color: var(--color-orange);
  font-weight: 600;
}

.site-nav__cta {
  flex-shrink: 0;
}

/* Mobile menu toggle */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  color: var(--color-navy);
}

.menu-toggle__icon,
.menu-toggle__icon::before,
.menu-toggle__icon::after {
  display: block;
  width: 24px;
  height: 2px;
  background-color: currentColor;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.menu-toggle__icon {
  position: relative;
}

.menu-toggle__icon::before,
.menu-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-toggle__icon::before { top: -7px; }
.menu-toggle__icon::after { top: 7px; }

.menu-toggle[aria-expanded="true"] .menu-toggle__icon {
  background-color: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav panel — Document 03 §2, full-screen slide-in pattern */
.mobile-nav {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  background-color: var(--color-white);
  transform: translateX(100%);
  transition: transform var(--transition-base);
  overflow-y: auto;
  z-index: 400;
}

.mobile-nav.is-open {
  transform: translateX(0);
}

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  padding: var(--space-md) var(--container-padding);
}

.mobile-nav__link {
  padding: var(--space-sm) 0;
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-charcoal);
  border-bottom: 1px solid var(--color-border);
}

.mobile-nav__link[aria-current="page"] {
  color: var(--color-navy);
  font-weight: 700;
}

.mobile-nav__cta {
  margin-top: var(--space-md);
  width: 100%;
}

@media (min-width: 1024px) {
  .site-nav {
    display: block;
  }

  .menu-toggle,
  .mobile-nav {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   6. Footer — Document 03 §5, Document 06 §15/§19
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--color-charcoal);
  color: var(--color-text-inverse);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-md);
}

.site-footer a {
  color: var(--color-white);
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--color-orange);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

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

@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.site-footer__heading {
  color: var(--color-white);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-sm);
}

.site-footer__logo img {
  height: 32px;
  width: auto;
  margin-bottom: var(--space-sm);
}

.site-footer__tagline {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.75);
  max-width: 32ch;
}

.site-footer__links li {
  margin-bottom: var(--space-xs);
}

.site-footer__contact li {
  margin-bottom: var(--space-xs);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.85);
}

.site-footer__social {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.08);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.site-footer__bottom {
  padding-top: var(--space-md);
  text-align: center;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
}

/* --------------------------------------------------------------------------
   7. Skeleton / Awaiting-Content Notice (Batch 01 only)
   Visible only during development; each page's own batch replaces this
   block with real content per Document 04 §4 (no placeholder text in
   delivered work). Marked clearly, not styled as real marketing content.
   -------------------------------------------------------------------------- */
.batch-scaffold-notice {
  border: 1px dashed var(--color-border);
  background-color: var(--color-bg-alt);
  color: var(--color-charcoal);
  padding: var(--space-md);
  border-radius: var(--radius-card);
  font-size: var(--text-sm);
}

/* ==========================================================================
   BATCH 02 ADDITIONS — Homepage Components
   Appended only. No rule above this line was modified, reordered, or
   removed. New reusable components below, per Document 04 §5 (one shared
   stylesheet) and Document 06 (Design System).
   ========================================================================== */

/* --------------------------------------------------------------------------
   8. Section Header (heading + intro, centered) — reusable across sections
   -------------------------------------------------------------------------- */
.section__header {
  max-width: 42rem;
  margin: 0 auto var(--space-lg) auto;
  text-align: center;
}

.section__header p {
  margin: 0 auto;
  color: var(--color-charcoal);
}

.section__eyebrow {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: var(--space-xs);
}

/* --------------------------------------------------------------------------
   9. Hero — Document 03 §3.1
   -------------------------------------------------------------------------- */
.hero {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  background-color: var(--color-bg-alt);
}

.hero__content {
  max-width: 44rem;
}

.hero__audience-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.hero__audience-tag {
  display: inline-block;
  padding: calc(var(--space-xs) / 2) var(--space-sm);
  border-radius: 999px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-navy);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* --------------------------------------------------------------------------
   10. Trust Strip — Document 03 §3.2
   -------------------------------------------------------------------------- */
.trust-strip {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.trust-strip__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  text-align: center;
}

@media (min-width: 768px) {
  .trust-strip__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.trust-strip__value {
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 0;
}

.trust-strip__label {
  font-size: var(--text-sm);
  color: var(--color-charcoal);
  margin: 0;
  max-width: none;
}

/* --------------------------------------------------------------------------
   11. Card Component — Document 06 §16 (single style per content type;
   reused here for Service and Industry cards, which share one simple
   icon+title+text structure)
   -------------------------------------------------------------------------- */
.card {
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-md);
  transition: box-shadow var(--transition-fast);
}

.card:hover,
.card:focus-within {
  box-shadow: 0 2px 6px rgba(11, 37, 69, 0.12), 0 2px 4px rgba(11, 37, 69, 0.08);
}

.card__icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-sm);
  color: var(--color-orange);
}

.card__title {
  font-size: var(--text-h4);
  margin-bottom: var(--space-xs);
}

.card__text {
  font-size: var(--text-sm);
  color: var(--color-charcoal);
  margin-bottom: 0;
}

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

@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .card-grid--services,
  .card-grid--industries {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   12. Process Steps — Document 03 §3.8
   -------------------------------------------------------------------------- */
.process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  counter-reset: process-step;
}

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

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

.process-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-navy);
  color: var(--color-white);
  font-weight: 700;
  font-size: var(--text-lg);
  margin-bottom: var(--space-sm);
}

.process-step__title {
  font-size: var(--text-h4);
  margin-bottom: var(--space-xs);
}

.process-step__text {
  font-size: var(--text-sm);
  color: var(--color-charcoal);
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   13. FAQ Accordion — Document 03 §3.10
   -------------------------------------------------------------------------- */
.faq {
  max-width: 44rem;
  margin: 0 auto;
}

.faq__item {
  border-bottom: 1px solid var(--color-border);
}

.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  background: none;
  border: none;
  text-align: left;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-navy);
  min-height: 44px;
}

.faq__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  transition: transform var(--transition-fast);
}

.faq__question[aria-expanded="true"] .faq__icon {
  transform: rotate(45deg);
}

.faq__answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transition-base);
}

.faq__answer[data-open="true"] {
  max-height: 400px;
}

.faq__answer p {
  padding-bottom: var(--space-sm);
  max-width: none;
  color: var(--color-charcoal);
}

/* --------------------------------------------------------------------------
   14. CTA Banner — Document 03 §3.11 (Final CTA)
   -------------------------------------------------------------------------- */
.cta-banner {
  text-align: center;
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

.cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.cta-banner .btn--secondary {
  border-color: var(--color-white);
  color: var(--color-white);
}

.cta-banner .btn--secondary:hover,
.cta-banner .btn--secondary:focus-visible {
  background-color: var(--color-white);
  color: var(--color-navy);
}

/* ==========================================================================
   BATCH 03 ADDITIONS — About Page
   Appended only. Nothing above this line was modified, reordered, or
   removed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   15. Section Header — left-aligned variant (narrow-column text pages)
   -------------------------------------------------------------------------- */
.section__header--left {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

.section__header--left p {
  margin-left: 0;
}

/* ==========================================================================
   BATCH 08 ADDITIONS — Contact Page
   Appended only. Nothing above this line was modified, reordered, or
   removed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   16. Form Fields — Document 04 §9 (accessible labels), §6 (validation JS)
   -------------------------------------------------------------------------- */
.form {
  max-width: 34rem;
}

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

.form-label {
  display: block;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-navy);
  margin-bottom: var(--space-xs);
}

.form-label .required {
  color: var(--color-orange);
}

.form-input,
.form-textarea {
  width: 100%;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-white);
  min-height: 44px;
}

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

.form-input:focus-visible,
.form-textarea:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.form-input[aria-invalid="true"],
.form-textarea[aria-invalid="true"] {
  border-color: #C0392B;
}

.form-error {
  display: block;
  color: #C0392B;
  font-size: var(--text-sm);
  margin-top: var(--space-xs);
}

.form-status {
  margin-top: var(--space-md);
}

.form-status[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   17. Embedded Map — Document 03 §4 (Contact)
   -------------------------------------------------------------------------- */
.map-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   18. Contact Info List — reuses card visual language for address/hours
   -------------------------------------------------------------------------- */
.contact-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .contact-info {
    grid-template-columns: repeat(2, 1fr);
  }
}

.contact-info__label {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-orange);
  margin-bottom: var(--space-xs);
}

/* ==========================================================================
   BATCH 09 ADDITIONS — Get a Quote Page
   Appended only. Nothing above this line was modified, reordered, or
   removed. Reuses .form, .form-group, .form-label, .form-input,
   .form-textarea, .form-error, .form-status, .process-steps from Batches
   02/08 — only new field types (select, file, checkbox group) below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   19. Select & File Fields — Document 03 §4 (Get a Quote)
   -------------------------------------------------------------------------- */
select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%230B2545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-sm) center;
  padding-right: var(--space-xl);
}

.form-file {
  width: 100%;
  padding: var(--space-xs) 0;
  font-size: var(--text-sm);
}

.form-hint {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-charcoal);
  margin-top: var(--space-xs);
}

/* ==========================================================================
   DEFECT FIX — Missing .text-lg Utility
   Approved by Supervisor before Batch 09
   ========================================================================== */

.text-lg {
  font-size: var(--text-lg);
  line-height: var(--line-height-body);
}