/* =============================================================================
   OMAHA CONCRETE LIFT — DESIGN SYSTEM
   Mobile-first CSS. Organized by section. Custom properties define the
   design tokens; components build on top of them.
============================================================================= */

/* -----------------------------------------------------------------------
   1. TOKENS (colors, type, spacing, radii, shadows, breakpoints as vars)
----------------------------------------------------------------------- */
:root {
  /* Color: primary concrete-blue-gray family */
  --color-primary-900: #1B2733;
  --color-primary-700: #2C3E50;
  --color-primary-500: #445B71;
  --color-primary-100: #E7ECF0;

  /* Accent / CTA: safety orange (AA contrast with white text) */
  --color-accent: #C2410C;
  --color-accent-hover: #9A3412;
  --color-accent-contrast: #FFFFFF;

  /* Safety yellow — badges only, pair with dark text */
  --color-yellow: #FFC107;
  --color-yellow-text: #1A1F24;

  /* Neutrals */
  --color-bg: #F7F8F9;
  --color-bg-alt: #FFFFFF;
  --color-text: #1A1F24;
  --color-text-muted: #4B5560;
  --color-border: #D9DEE3;

  /* Feedback */
  --color-error: #B91C1C;
  --color-success: #15803D;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fs-base: clamp(1rem, 0.95rem + 0.15vw, 1.0625rem);
  --fs-sm: clamp(0.85rem, 0.82rem + 0.1vw, 0.9375rem);
  --fs-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem);
  --fs-xl: clamp(1.375rem, 1.2rem + 0.7vw, 1.875rem);
  --fs-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --fs-3xl: clamp(2.1rem, 1.6rem + 2.4vw, 3.5rem);
  --lh-tight: 1.15;
  --lh-normal: 1.55;

  /* Spacing scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Layout */
  --container-max: 1200px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(27, 39, 51, 0.08);
  --shadow-md: 0 4px 12px rgba(27, 39, 51, 0.12);
  --shadow-lg: 0 12px 32px rgba(27, 39, 51, 0.18);

  --header-height: 68px;
  --mobile-cta-height: 60px;

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

/* -----------------------------------------------------------------------
   2. RESET / BASE
----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
  font-display: swap;
  padding-top: var(--header-height);
  padding-bottom: var(--mobile-cta-height);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary-700); text-decoration-color: currentColor; }
a:hover { color: var(--color-accent); }
ul, ol { padding-left: 1.25em; }
h1, h2, h3, h4 { line-height: var(--lh-tight); color: var(--color-primary-900); margin: 0 0 var(--space-4); }
h1 { font-size: var(--fs-3xl); font-weight: 800; }
h2 { font-size: var(--fs-2xl); font-weight: 700; }
h3 { font-size: var(--fs-xl); font-weight: 700; }
p { margin: 0 0 var(--space-4); }

/* -----------------------------------------------------------------------
   3. LAYOUT / CONTAINERS
----------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}
.site-main { display: block; }

/* -----------------------------------------------------------------------
   4. ACCESSIBILITY: skip link, focus-visible, reduced motion
----------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primary-900);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  z-index: 1000;
  border-radius: var(--radius-sm);
}
.skip-link:focus {
  left: var(--space-3);
  top: var(--space-3);
}

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
button, a, input, select, textarea { font-family: inherit; }

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

/* -----------------------------------------------------------------------
   5. HEADER / STICKY NAV
----------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-height);
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  z-index: 500;
  box-shadow: var(--shadow-sm);
}
.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 800;
  color: var(--color-primary-900);
  text-decoration: none;
  font-size: var(--fs-lg);
  flex-shrink: 0;
}
.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: var(--color-primary-700);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 800;
}
.logo-text { display: none; }
@media (min-width: 480px) { .logo-text { display: inline; } }

.main-nav { display: none; }
.nav-list { display: flex; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.nav-link { color: var(--color-primary-900); text-decoration: none; font-weight: 500; font-size: var(--fs-sm); }
.nav-link:hover { color: var(--color-accent); }

.header-actions { display: flex; align-items: center; gap: var(--space-3); }
.phone-link {
  display: none;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary-900);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-sm);
}
.phone-link .icon { color: var(--color-accent); }

.hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.hamburger-box { display: flex; flex-direction: column; gap: 5px; width: 20px; }
.hamburger-line { display: block; height: 2px; width: 100%; background: var(--color-primary-900); border-radius: 1px; transition: transform var(--transition-fast), opacity var(--transition-fast); }
.hamburger[aria-expanded="true"] .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger-line:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1023.98px) {
  .main-nav {
    position: fixed;
    top: var(--header-height);
    left: 0; right: 0;
    bottom: 0;
    background: var(--color-bg-alt);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    overflow-y: auto;
    padding: var(--space-6) var(--space-5);
    z-index: 490;
  }
  .main-nav.is-open { display: block; transform: translateX(0); }
  .nav-list { flex-direction: column; gap: var(--space-5); }
  .nav-link { font-size: var(--fs-lg); display: block; padding: var(--space-2) 0; }
}

@media (min-width: 1024px) {
  .main-nav { display: block; }
  .hamburger { display: none; }
  .phone-link { display: inline-flex; }
}

/* -----------------------------------------------------------------------
   6. BUTTONS
----------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}
.btn-cta {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}
.btn-cta:hover, .btn-cta:focus-visible { background: var(--color-accent-hover); color: var(--color-accent-contrast); }
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--fs-base); }

.btn-outline {
  background: transparent;
  color: var(--color-primary-900);
  border: 2px solid var(--color-primary-900);
}
.btn-outline:hover, .btn-outline:focus-visible { background: var(--color-primary-900); color: #fff; }

.btn-outline-light {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
}
.btn-outline-light:hover, .btn-outline-light:focus-visible { background: #fff; color: var(--color-primary-900); }

/* -----------------------------------------------------------------------
   7. HERO
----------------------------------------------------------------------- */
.hero {
  background: linear-gradient(180deg, var(--color-primary-100) 0%, var(--color-bg) 100%);
  padding: var(--space-12) 0 var(--space-10);
}
.hero-inner {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
.hero-content { max-width: 640px; }
.hero-title { margin-bottom: var(--space-4); }
.hero-subhead { font-size: var(--fs-lg); color: var(--color-text-muted); margin-bottom: var(--space-6); }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-2); }
.hero-media { display: none; }
.hero-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
}
.trust-badge {
  background: var(--color-yellow);
  color: var(--color-yellow-text);
  font-weight: 600;
  font-size: var(--fs-sm);
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
}
.trust-badge a { color: var(--color-yellow-text); text-decoration: underline; }

@media (min-width: 768px) {
  .hero-media { display: block; }
  .hero-inner { grid-template-columns: 1.1fr 0.9fr; }
}

.hero-404 { padding: var(--space-10) 0; text-align: center; }
.hero-404 .hero-content { max-width: 100%; margin: 0 auto; }

/* -----------------------------------------------------------------------
   8. CONTENT SECTIONS
----------------------------------------------------------------------- */
.content-sections-wrap { padding: var(--space-10) 0; }
.content-section { margin-bottom: var(--space-10); }
.content-section-heading { border-left: 4px solid var(--color-accent); padding-left: var(--space-3); }
.content-section-body p { color: var(--color-text); }
.content-section-body em { color: var(--color-text-muted); }

.section-title { text-align: center; margin-bottom: var(--space-8); }

/* -----------------------------------------------------------------------
   9. SERVICE CARD GRID
----------------------------------------------------------------------- */
.service-grid-section { padding: var(--space-10) 0; background: var(--color-bg-alt); }
.service-grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.service-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.service-card-title { margin-bottom: var(--space-2); font-size: var(--fs-lg); }
.service-card-title a { text-decoration: none; color: var(--color-primary-900); }
.service-card-desc { color: var(--color-text-muted); margin-bottom: var(--space-3); }
.service-card-link { font-weight: 600; text-decoration: none; color: var(--color-accent); }

@media (min-width: 768px) { .service-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .service-grid { grid-template-columns: 1fr 1fr 1fr; } }

/* -----------------------------------------------------------------------
   10. CTA BAND
----------------------------------------------------------------------- */
.cta-band {
  background: var(--color-primary-900);
  color: #fff;
  padding: var(--space-10) 0;
}
.cta-band-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: center;
  text-align: center;
}
.cta-band-text { font-size: var(--fs-lg); max-width: 640px; margin: 0; }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (min-width: 768px) {
  .cta-band-inner { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* -----------------------------------------------------------------------
   11. QUOTE FORM
----------------------------------------------------------------------- */
.quote-form-section { padding: var(--space-10) 0; background: var(--color-bg-alt); }
.quote-form-wrap { max-width: 640px; margin: 0 auto; }
.quote-form { display: flex; flex-direction: column; gap: var(--space-5); }
.form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.form-field label { font-weight: 600; font-size: var(--fs-sm); color: var(--color-primary-900); }
.form-field input[type="text"],
.form-field input[type="tel"],
.form-field input[type="email"],
.form-field select,
.form-field textarea {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  background: var(--color-bg-alt);
  color: var(--color-text);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--color-accent);
}
.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-color: var(--color-error);
}
.field-error { color: var(--color-error); font-size: var(--fs-sm); margin: 0; }
.field-error[hidden] { display: none; }

.form-fieldset { border: none; padding: 0; margin: 0; }
.form-fieldset legend { font-weight: 600; font-size: var(--fs-sm); color: var(--color-primary-900); padding: 0; margin-bottom: var(--space-2); }
.radio-group { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.radio-label { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 400; font-size: var(--fs-sm); }

/* Honeypot: genuinely hidden, not display:none, so bots that check
   computed visibility still "see" and fill it, while real users/screen
   readers never encounter it. */
.honeypot-field {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-field-consent { flex-direction: row; align-items: flex-start; }
.checkbox-label { display: flex; align-items: flex-start; gap: var(--space-3); font-weight: 400; font-size: var(--fs-sm); color: var(--color-text-muted); cursor: pointer; }
.checkbox-label input[type="checkbox"] { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; }
.consent-text a { color: var(--color-primary-700); }

.form-status { font-weight: 600; font-size: var(--fs-sm); min-height: 1.5em; }
.form-status.is-success { color: var(--color-success); }
.form-status.is-error { color: var(--color-error); }

.btn-submit { align-self: flex-start; }

.quote-form-condensed { max-width: 480px; }

/* -----------------------------------------------------------------------
   12. FAQ ACCORDION
----------------------------------------------------------------------- */
.faq-accordion-section { padding: var(--space-10) 0; }
.accordion { display: flex; flex-direction: column; gap: var(--space-3); max-width: 760px; margin: 0 auto; }
.accordion-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-alt); overflow: hidden; }
.accordion-heading { margin: 0; }
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: none;
  border: none;
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-primary-900);
  cursor: pointer;
}
.accordion-icon { font-size: 1.25rem; color: var(--color-accent); flex-shrink: 0; }
.accordion-trigger[aria-expanded="true"] .accordion-icon { transform: rotate(45deg); }
.accordion-panel-inner { padding: 0 var(--space-5) var(--space-5); color: var(--color-text-muted); }
.accordion-panel[hidden] { display: none; }

/* -----------------------------------------------------------------------
   13. FOOTER
----------------------------------------------------------------------- */
.site-footer { background: var(--color-primary-900); color: #E7ECF0; padding: var(--space-12) 0 var(--space-8); margin-top: var(--space-10); }
.footer-inner { display: grid; gap: var(--space-8); }
.footer-brand { max-width: 420px; }
.footer-tagline { color: #B7C2CC; font-size: var(--fs-sm); }
.footer-contact a { color: #E7ECF0; }
.footer-columns { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--space-6); }
.footer-col-title { color: #fff; font-size: var(--fs-base); margin-bottom: var(--space-3); }
.footer-col-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.footer-col-list a { color: #B7C2CC; text-decoration: none; font-size: var(--fs-sm); }
.footer-col-list a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); margin-top: var(--space-8); padding-top: var(--space-5); font-size: var(--fs-sm); color: #93A0AB; }

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

/* -----------------------------------------------------------------------
   14. MOBILE BOTTOM CTA BAR
----------------------------------------------------------------------- */
.mobile-cta-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--mobile-cta-height);
  display: flex;
  z-index: 480;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.12);
}
.mobile-cta-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-weight: 700;
  text-decoration: none;
  font-size: var(--fs-sm);
}
.mobile-cta-call { background: var(--color-primary-700); color: #fff; }
.mobile-cta-quote { background: var(--color-accent); color: #fff; }

@media (min-width: 1024px) {
  .mobile-cta-bar { display: none; }
  body { padding-bottom: 0; }
}

/* -----------------------------------------------------------------------
   15. 404 PAGE
----------------------------------------------------------------------- */
.hero-404 .hero-title { font-size: var(--fs-2xl); }