/*
 * ============================================================
 * Danny's Heating and Air — Main Stylesheet
 * ============================================================
 *
 * WHY ONE FILE: The site plan calls for simplicity and fast load
 * times. A single stylesheet means one HTTP request instead of
 * two (reset.css + style.css). For a 3-page static site, the
 * marginal organization benefit of separate files isn't worth
 * the extra request.
 *
 * ORGANIZATION:
 *   1. CSS Custom Properties (design tokens)
 *   2. Reset / Base
 *   3. Typography
 *   4. Layout Utilities
 *   5. Components (header, buttons, cards, forms, footer)
 *   6. Page Sections (hero, services, trust, booking)
 *   7. Page-specific overrides (contact, emergency)
 *   8. Responsive breakpoints (mobile-first)
 * ============================================================
 */


/* ============================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================
   WHY CUSTOM PROPERTIES: Centralizing the brand colors here
   means if Danny ever changes a color, we update one line —
   not 40 scattered declarations. Also makes it trivial to hand
   these tokens to WordPress later when we migrate.
   ============================================================ */

:root {
  /* Brand Colors — from site plan */
  --red:        #CC0000;   /* Urgency, heat, emergency CTAs */
  --blue:       #0057A8;   /* Trust, cooling, secondary CTAs */
  --white:      #FFFFFF;
  --black:      #000000;
  --gray-light: #F5F5F5;   /* Alternating section backgrounds */
  --gray-dark:  #333333;   /* Body text — softer than pure black */
  --gray-mid:   #666666;   /* Secondary/meta text */
  --gray-border:#E0E0E0;   /* Card borders, form inputs */

  /* Derived / state colors */
  --red-dark:   #AA0000;   /* Hover state for red buttons */
  --blue-dark:  #004490;   /* Hover state for blue buttons */

  /* Typography */
  --font-family: 'Inter', Arial, Helvetica, sans-serif;
  /*
   * WHY INTER: Clean, modern sans-serif. Excellent legibility at
   * all sizes including small mobile text. We load only 2 weights
   * (400 + 700) to keep the Google Fonts request lightweight.
   * Arial/Helvetica as fallback means the page renders instantly
   * even before the web font loads.
   */

  --font-size-base:  1rem;       /* 16px — browser default, don't override */
  --line-height:     1.6;        /* Comfortable reading rhythm */

  /* Spacing scale — powers of 0.5rem for consistency */
  --space-xs:  0.5rem;   /*  8px */
  --space-sm:  1rem;     /* 16px */
  --space-md:  1.5rem;   /* 24px */
  --space-lg:  2rem;     /* 32px */
  --space-xl:  3rem;     /* 48px */
  --space-xxl: 5rem;     /* 80px */

  /* Layout */
  --container-max: 1200px;
  --border-radius: 4px;
  /*
   * WHY 4px RADIUS: Enough to soften hard edges (professional look)
   * without the excessive rounding that feels too casual for a
   * service business. HVAC is a trust-based trade — the design
   * should feel solid and reliable, not playful.
   */

  /* Shadows */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.14);

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


/* ============================================================
   2. RESET / BASE
   ============================================================
   WHY A MINIMAL RESET (not full normalize.css): We only need
   to zero out the browser inconsistencies that actually affect
   this design. Pulling in a 7KB normalize file for a 3-page
   static site is overkill.
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  /*
   * WHY BORDER-BOX: width: 200px means the element is 200px wide
   * including padding and border. Without this, padding is ADDED
   * on top of the width, which makes layout math confusing and
   * breaks responsive grids constantly.
   */
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  /*
   * WHY SMOOTH SCROLL: When the nav "Call Now" button jumps to
   * the booking section, a smooth scroll is noticeably more
   * polished and helps the user understand they haven't left
   * the page. No JavaScript needed.
   */
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--gray-dark);
  background-color: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /*
   * WHY ANTIALIASED: Makes text render thinner and crisper on
   * macOS/iOS Retina displays. The default subpixel rendering
   * can look slightly chunky on high-DPI screens.
   */
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  /*
   * WHY DISPLAY BLOCK: Images are inline by default, which adds
   * a phantom gap below them (the descender space for text).
   * Making them block removes that gap without needing hacks.
   */
}

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

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

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

p {
  margin: 0 0 var(--space-sm);
}

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


/* ============================================================
   3. TYPOGRAPHY SCALE
   ============================================================
   WHY MOBILE SIZES FIRST: Most HVAC searches happen on phones
   (people searching with a broken AC in summer heat). We define
   mobile sizes here and increase them at the 768px breakpoint.
   ============================================================ */

h1 { font-size: 2.5rem; }  /* 40px on mobile */
h2 { font-size: 2rem;   }  /* 32px on mobile */
h3 { font-size: 1.5rem; }  /* 24px on mobile */
h4 { font-size: 1.25rem; } /* 20px on mobile */


/* ============================================================
   4. LAYOUT UTILITIES
   ============================================================ */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-sm);
  /*
   * WHY 1rem (16px) SIDE PADDING: On a 375px iPhone, this gives
   * 343px of usable content width. Enough breathing room without
   * wasting precious mobile real estate. At wider viewports, the
   * container is constrained by max-width and auto margins center it.
   */
}

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

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

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

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

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

.section--red h2,
.section--red h3 {
  color: var(--white);
}

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

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

.section-title p {
  color: var(--gray-mid);
  font-size: 1.1rem;
}

.text-center { text-align: center; }
.text-white  { color: var(--white); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }


/* ============================================================
   5. COMPONENTS
   ============================================================ */

/* --- 5a. HEADER ------------------------------------------- */

.site-header {
  background-color: var(--white);
  border-bottom: 3px solid var(--blue);
  /*
   * WHY BLUE BOTTOM BORDER: Creates a strong visual brand anchor
   * without making the header feel heavy. The 3px line is enough
   * to be noticeable but not dominating. The blue references
   * "trust and cooling" — the header is where users first assess
   * whether they trust the company.
   */
  position: sticky;
  top: 0;
  z-index: 100;
  /*
   * WHY STICKY: As the user scrolls, the header stays visible.
   * This is critical for the phone number CTA — on mobile, the
   * user should never have to scroll back up to call. Sticky
   * header = phone always one tap away.
   */
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) 0;
  /*
   * WHY FLEXBOX: Three-item row (logo, nav, phone) that naturally
   * distributes space. No float hacks or positioning needed.
   */
}

.site-logo {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--blue);
  line-height: 1.1;
  flex-shrink: 1;
  min-width: 0;
  /*
   * WHY FLEX-SHRINK 0: The logo should never compress. If space
   * is tight, the navigation compresses or wraps, not the brand name.
   */
}

.site-logo span {
  display: none;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--gray-mid);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.site-nav {
  display: none;
  /*
   * WHY HIDDEN BY DEFAULT: We're mobile-first. On small screens,
   * the nav is hidden and toggled open by the hamburger button.
   * At the 768px breakpoint, we'll set display:flex to show it.
   */
}

.site-nav ul {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
}

.site-nav a {
  font-weight: 600;
  color: var(--gray-dark);
  padding: var(--space-xs) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

.site-nav a.nav-emergency {
  color: var(--red);
  font-weight: 700;
}

.site-nav a.nav-emergency:hover {
  color: var(--red-dark);
  border-bottom-color: var(--red-dark);
}

/* Header phone CTA — always visible */
.header-phone {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.header-phone a,
.header-phone .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background-color: var(--red);
  color: var(--white);
  font-weight: 700;
  padding: 0.5rem 0.75rem;
  border-radius: var(--border-radius);
  font-size: 0.85rem;
  transition: background-color var(--transition);
  white-space: nowrap;
  /*
   * WHY WHITE-SPACE NOWRAP: Phone numbers like "(910) 000-0000"
   * should never line-wrap mid-number. That looks broken and
   * makes the button harder to read/tap on small screens.
   */
  min-height: 44px;
  /*
   * WHY 44px MIN-HEIGHT: Apple's Human Interface Guidelines and
   * WCAG both specify 44x44px as the minimum tap target size.
   * Below this, users frequently mis-tap — especially outdoors
   * in a stressed emergency situation (common for HVAC calls).
   */
}

.header-phone a:hover,
.header-phone .btn:hover {
  background-color: var(--red-dark);
}

/* Hamburger button — mobile only */
.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
  /*
   * WHY FLEX COLUMN: Each hamburger bar is a child div. Flexbox
   * column stacks them with equal gap — cleaner than positioning.
   */
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  align-items: center;
  margin-right: var(--space-xs);
  /*
   * WHY 44px: Same tap target reasoning as the phone button above.
   */
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--gray-dark);
  transition: transform var(--transition), opacity var(--transition);
  transform-origin: center;
}

/* Hamburger → X animation when nav is open */
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  /*
   * WHY OPACITY NOT DISPLAY NONE: Fading out the middle bar lets
   * the CSS transition animate smoothly. display:none cuts the
   * animation immediately.
   */
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav — revealed when open */
.mobile-nav {
  display: none;
  flex-direction: column;
  background-color: var(--white);
  border-top: 1px solid var(--gray-border);
  padding: var(--space-sm);
  gap: var(--space-xs);
}

.mobile-nav.is-open {
  display: flex;
}

.mobile-nav a {
  padding: 0.75rem var(--space-sm);
  font-weight: 600;
  color: var(--gray-dark);
  border-radius: var(--border-radius);
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: background-color var(--transition);
}

.mobile-nav a:hover {
  background-color: var(--gray-light);
  color: var(--blue);
}

.mobile-nav a.nav-emergency {
  color: var(--red);
  font-weight: 700;
}


/* --- 5b. BUTTONS ------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--border-radius);
  font-weight: 700;
  font-size: 1rem;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
  min-height: 52px;
  /*
   * WHY 52px MIN-HEIGHT FOR MAIN BUTTONS: Larger than the 44px
   * minimum because these are primary CTAs — the most important
   * taps on the page. Bigger targets = more conversions and fewer
   * mis-taps. The header phone button is 44px (compact context);
   * hero CTAs get 52px (prominent context).
   */
  white-space: nowrap;
  font-family: var(--font-family);
}

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

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

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

.btn-secondary:hover {
  background-color: var(--blue-dark);
  border-color: var(--blue-dark);
}

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

.btn-outline:hover {
  background-color: var(--white);
  color: var(--gray-dark);
}

.btn-large {
  font-size: 1.2rem;
  padding: 1.1rem var(--space-xl);
  min-height: 60px;
  /*
   * WHY A "LARGE" VARIANT: The emergency page's primary CTA should
   * be impossible to miss. Someone in a panic with no AC at 2am
   * needs that button to be enormous. We reserve btn-large for
   * the highest-urgency single action on a page.
   */
}

.btn-group {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  /*
   * WHY FLEX-WRAP: On very small screens (< 320px), two side-by-side
   * buttons might be too narrow to read. Wrapping stacks them
   * vertically rather than shrinking them below tap-safe sizes.
   */
}


/* --- 5c. SERVICE CARDS ------------------------------------ */

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  /*
   * WHY 1-COLUMN DEFAULT: Mobile-first. We start single column
   * and add columns at tablet/desktop breakpoints below.
   */
}

.service-card {
  background-color: var(--white);
  border: 1px solid var(--gray-border);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition), transform var(--transition);
  border-top: 4px solid var(--blue);
  /*
   * WHY BLUE TOP BORDER: Visual hierarchy cue. The thick top border
   * signals "this is a distinct service item" at a glance — more
   * readable than an icon alone. Blue = reliability/trust for HVAC.
   */
}

.service-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
  /*
   * WHY SUBTLE LIFT: 2px translateY on hover gives life to the
   * grid without being distracting. We're NOT animating cards as
   * clickable because the site plan explicitly says service cards
   * are informational only (no links yet). The hover is visual
   * polish, not a click invitation.
   */
}

.service-card__icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-sm);
  display: block;
  /*
   * WHY EMOJI ICONS: No icon library needed. Emoji render
   * consistently across all browsers and OS versions, load
   * instantly, and don't require an HTTP request. For a placeholder
   * site on a 2-week timeline, this is the right pragmatic call.
   * We can replace with SVG icons in the full WordPress build.
   */
}

.service-card h3 {
  margin-bottom: var(--space-xs);
  font-size: 1.2rem;
}

.service-card p {
  color: var(--gray-mid);
  font-size: 0.95rem;
  margin: 0;
}


/* --- 5d. TRUST / FEATURE STRIP --------------------------- */

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

.trust-item {
  padding: var(--space-md);
}

.trust-item__number {
  font-size: 3rem;
  font-weight: 700;
  color: var(--red);
  display: block;
  line-height: 1;
  margin-bottom: var(--space-xs);
  /*
   * WHY RED FOR THE NUMBER: The "35 Years" and "24/7" numbers are
   * the most impactful trust signals on the page. Red draws the
   * eye immediately. Once the user sees "35 YEARS", they read the
   * label below — the visual hierarchy works top-down.
   */
}

.trust-item__label {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  display: block;
  margin-bottom: var(--space-xs);
}

.trust-item__sub {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}


/* --- 5e. CONTACT FORM ------------------------------------ */

.contact-form {
  max-width: 640px;
  margin: 0 auto;
  /*
   * WHY MAX 640px: Forms wider than this become uncomfortable to
   * fill out on desktop — the eye has to travel too far between
   * label and input. 640px is the "sweet spot" for form UX.
   */
}

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

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-xs);
  color: var(--gray-dark);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem var(--space-sm);
  border: 2px solid var(--gray-border);
  border-radius: var(--border-radius);
  font-size: 1rem;
  font-family: var(--font-family);
  color: var(--gray-dark);
  background-color: var(--white);
  transition: border-color var(--transition);
  /*
   * WHY 2px BORDER: Thicker than the default 1px. On mobile,
   * a 1px border is barely visible. 2px provides a clear visual
   * affordance — "this is a fillable field."
   */
  min-height: 48px;
  /*
   * WHY 48px: Touch-friendly input height. Meets the 44px minimum
   * with a little extra comfort room. Also makes the form feel
   * substantial and not cramped.
   */
  -webkit-appearance: none;
  appearance: none;
  /*
   * WHY APPEARANCE NONE: Removes iOS Safari's default styling on
   * select/input elements (the gradient "glossy" look). Gives us
   * full CSS control for consistent cross-browser appearance.
   */
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 87, 168, 0.15);
  /*
   * WHY CUSTOM FOCUS RING: The default browser outline is
   * inconsistent and sometimes invisible against the page
   * background. Our custom focus ring (3px blue glow) is both
   * visible and branded. This is critical for keyboard navigation
   * accessibility.
   */
}

.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 2.5rem;
  cursor: pointer;
  /*
   * WHY INLINE SVG ARROW: After appearance:none removes the
   * native dropdown arrow, we re-add a consistent one via
   * background-image. Inline SVG (data URI) means no extra
   * HTTP request and no dependency on an icon file.
   */
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
  /*
   * WHY VERTICAL-ONLY RESIZE: Allowing horizontal resize on
   * mobile can break the layout. Vertical-only lets the user
   * expand the field to type more comfortably without causing
   * overflow issues.
   */
}

.form-status {
  padding: var(--space-sm);
  border-radius: var(--border-radius);
  text-align: center;
  margin-top: var(--space-md);
  display: none;
}

.form-status.success {
  display: block;
  background-color: #E8F5E9;
  color: #2E7D32;
  border: 1px solid #A5D6A7;
}

.form-status.error {
  display: block;
  background-color: #FFEBEE;
  color: #C62828;
  border: 1px solid #EF9A9A;
}


/* --- 5f. FOOTER ------------------------------------------ */

.site-footer {
  background-color: #1A1A1A;
  /*
   * WHY #1A1A1A INSTEAD OF BLACK: Pure #000000 is harsh. #1A1A1A
   * is dark enough to feel authoritative but less stark. It also
   * makes white text slightly easier to read (less contrast glare
   * on OLED screens where pure black LEDs are off).
   */
  color: var(--white);
  padding: var(--space-xl) 0 var(--space-lg);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.footer-brand h3 {
  color: var(--white);
  margin-bottom: var(--space-xs);
  font-size: 1.4rem;
}

.footer-brand p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.footer-col h4 {
  color: var(--white);
  margin-bottom: var(--space-sm);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.footer-col ul li {
  margin-bottom: var(--space-xs);
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
}

.footer-col ul li a {
  color: rgba(255,255,255,0.7);
  transition: color var(--transition);
}

.footer-col ul li a:hover {
  color: var(--white);
}

.footer-phone-link {
  color: var(--red) !important;
  font-weight: 700;
  font-size: 1.1rem;
}

.footer-phone-link:hover {
  color: #ff4444 !important;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: center;
  text-align: center;
}

.footer-bottom p {
  color: rgba(255,255,255,0.5);
  font-size: 0.8rem;
  margin: 0;
}


/* --- 5g. EMERGENCY BANNER -------------------------------- */

.emergency-banner {
  background-color: var(--red);
  color: var(--white);
  text-align: center;
  padding: 0.6rem var(--space-sm);
  font-size: 0.9rem;
  font-weight: 600;
}

.emergency-banner a {
  color: var(--white);
  text-decoration: underline;
  font-weight: 700;
}


/* ============================================================
   6. PAGE SECTIONS
   ============================================================ */

/* --- 6a. HERO -------------------------------------------- */

.hero {
  background: linear-gradient(135deg, var(--blue) 0%, #003d7a 100%);
  /*
   * WHY A BLUE GRADIENT: For a placeholder site without
   * professional photography yet, a gradient is better than
   * a flat color — it has depth and visual interest. The dark
   * blue end (#003d7a) creates contrast for white text, while
   * the brighter blue anchors the brand. This gradient is
   * a placeholder itself — in the full WordPress build, we'll
   * overlay a real photo.
   */
  color: var(--white);
  padding: var(--space-xxl) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: rgba(255,255,255,0.03);
  border-radius: 50%;
  /*
   * WHY PSEUDO-ELEMENT CIRCLE: Adds a subtle visual texture to
   * the hero without an image request. The faint circle creates
   * depth and breaks up the flat gradient — purely decorative.
   */
}

.hero h1 {
  color: var(--white);
  font-size: 2.5rem;
  margin-bottom: var(--space-sm);
  position: relative;
  z-index: 1;
}

.hero-sub {
  font-size: 1.2rem;
  color: rgba(255,255,255,0.9);
  margin-bottom: var(--space-md);
  position: relative;
  z-index: 1;
}

.hero-area {
  font-size: 1rem;
  color: rgba(255,255,255,0.75);
  margin-bottom: var(--space-xl);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.hero .btn-group {
  justify-content: center;
  position: relative;
  z-index: 1;
}


/* --- 6b. BOOKING SECTION --------------------------------- */

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

.calendly-container {
  max-width: 900px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  min-height: 700px;
  /*
   * WHY MIN-HEIGHT 700px: Calendly's inline widget needs room to
   * render all its UI (calendar, time slots, form). Without a
   * minimum height, the container collapses before the widget
   * loads and causes layout shift — bad for both UX and Core
   * Web Vitals. 700px is the standard recommended height.
   */
}

.calendly-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 700px;
  color: var(--gray-mid);
  flex-direction: column;
  gap: var(--space-sm);
}


/* --- 6c. CONTACT INFO ------------------------------------ */

.contact-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.contact-info-item {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}

.contact-info-item__icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-info-item h4 {
  margin-bottom: 0.25rem;
  font-size: 1rem;
}

.contact-info-item p,
.contact-info-item a {
  color: var(--gray-mid);
  font-size: 0.95rem;
}

.contact-info-item a:hover {
  color: var(--blue);
}

.phone-link-large {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--red) !important;
  display: block;
}

.phone-link-large:hover {
  color: var(--red-dark) !important;
}


/* --- 6d. SERVICE AREA ------------------------------------ */

.service-area-cities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs) var(--space-md);
}

.service-area-cities li {
  color: rgba(255,255,255,0.85);
  font-size: 0.95rem;
  padding: 0.2rem 0;
}

.service-area-cities li::before {
  content: '✓ ';
  color: var(--red);
  font-weight: 700;
}


/* --- 6e. EMERGENCY PAGE SPECIFIC ------------------------ */

.emergency-hero {
  background: linear-gradient(135deg, #8B0000 0%, var(--red) 50%, #CC0000 100%);
  /*
   * WHY DARKER RED GRADIENT: The emergency page has one job:
   * get the user to call NOW. Darker/deeper red feels urgent,
   * serious, and trustworthy (vs. a bright red that reads as
   * "sale" or "marketing"). The gradient maintains depth
   * without an image.
   */
  color: var(--white);
  padding: var(--space-xxl) 0;
  text-align: center;
}

.emergency-hero h1 {
  color: var(--white);
  font-size: 2.8rem;
  margin-bottom: var(--space-sm);
}

.emergency-hero .hero-sub {
  font-size: 1.3rem;
}

.emergency-phone-block {
  background-color: rgba(0,0,0,0.2);
  border-radius: var(--border-radius);
  padding: var(--space-lg) var(--space-xl);
  margin: var(--space-lg) auto;
  max-width: 500px;
  /*
   * WHY DARK INSET BOX: The phone number CTA on the emergency
   * page needs to be impossible to miss. Inlaying it in a
   * semi-transparent dark box creates a frame within a frame —
   * the eye goes there first, even before reading the headline.
   */
}

.emergency-phone-block .phone-cta {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--white);
  display: block;
  margin-bottom: var(--space-xs);
}

.emergency-phone-block .phone-cta:hover {
  opacity: 0.9;
}

.emergency-phone-block small {
  color: rgba(255,255,255,0.8);
  font-size: 0.9rem;
}

.emergency-situations {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

.emergency-situations li {
  background-color: var(--white);
  border: 1px solid var(--gray-border);
  border-left: 5px solid var(--red);
  border-radius: var(--border-radius);
  padding: var(--space-sm) var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 600;
  color: var(--gray-dark);
}

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

.expect-item {
  text-align: center;
  padding: var(--space-lg);
  background: rgba(255,255,255,0.1);
  border-radius: var(--border-radius);
}

.expect-item__icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: var(--space-sm);
}

.expect-item h3 {
  font-size: 1.1rem;
  margin-bottom: var(--space-xs);
}

.expect-item p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.8);
  margin: 0;
}


/* ============================================================
   7. SKIP LINK (Accessibility)
   ============================================================
   WHY SKIP LINK: Screen reader and keyboard users must tab
   through the entire navigation before reaching main content
   on every page. A "skip to content" link lets them jump
   directly to the main content. It's hidden visually until
   focused (keyboard navigation).
   ============================================================ */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  background-color: var(--blue);
  color: var(--white);
  padding: var(--space-xs) var(--space-sm);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  font-weight: 700;
  z-index: 9999;
  transition: top 0.1s;
}

.skip-link:focus {
  top: 0;
}


/* ============================================================
   8. RESPONSIVE BREAKPOINTS
   ============================================================
   WHY MIN-WIDTH (mobile-first): We wrote all styles above for
   mobile. Here we only ADD rules for larger screens. This is
   more efficient than writing desktop styles and then overriding
   them — the mobile styles are the default.
   ============================================================ */

/* Tablet: 768px and up */
@media (min-width: 768px) {
  h1 { font-size: 3.5rem; }
  h2 { font-size: 2.5rem; }

  .header-inner {
    padding: var(--space-sm) var(--space-lg);
  }

  .header-phone a,
  .header-phone .btn {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
  }

  .site-logo {
    font-size: 1.4rem;
  }

  .site-logo span {
    display: block;
  }

  /* Show desktop nav, hide hamburger */
  .site-nav {
    display: flex;
  }

  .nav-toggle {
    display: none;
  }

  .mobile-nav {
    display: none !important;
    /*
     * WHY IMPORTANT: On small screens, our JS adds .is-open
     * which sets display:flex. At 768px+ we want the mobile nav
     * permanently gone regardless of JS state, so we need
     * !important to override the JS-added class.
     */
  }

  /* Hero */
  .hero {
    padding: 6rem 0;
    text-align: left;
  }

  .hero .btn-group {
    justify-content: flex-start;
  }

  .hero-area {
    justify-content: flex-start;
  }

  /* Grids go 2-column at tablet */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

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

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

  /* Footer 2-col */
  .footer-inner {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* Desktop: 1024px and up */
@media (min-width: 1024px) {
  .container {
    padding: 0 var(--space-lg);
  }

  /* Services 3-column at desktop */
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .emergency-situations {
    grid-template-columns: 1fr;
    max-width: 700px;
    margin: 0 auto;
  }

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

/* Large desktop: 1200px and up */
@media (min-width: 1200px) {
  h1 { font-size: 4rem; }

  .hero h1 {
    font-size: 3.5rem;
  }
}