/* ============================================ */
/* Global Styles - Cathedral Home Inspections  */
/* ============================================ */

/* ============================================ */
/* GOOGLE FONTS                                 */
/* ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&family=Work+Sans:wght@400;500;600;700&display=swap');

/* ============================================ */
/* DESIGN TOKENS                                */
/* Edit this section to customize for new projects */
/* ============================================ */

:root {
  /* -------------------- */
  /* Colors               */
  /* -------------------- */
  --black: #030305;
  --white: #ffffff;
  --accent: #3F5F7F;
  --accent-dark: #2d4a66;
  --gray-light: #f5f5f5;
  --gray-medium: #4C5660;
  --text-dark: #030305;
  --text-muted: #4C5660;

  /* -------------------- */
  /* Typography - Fonts   */
  /* -------------------- */
  --font-primary: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Roboto Condensed', 'Arial Narrow', sans-serif;

  /* -------------------- */
  /* Typography - Headings */
  /* -------------------- */
  /* Display (6rem/96px) - Roboto Condensed Bold, Uppercase */
  --display-size: 6rem;
  --display-weight: 700;
  --display-line-height: 1.14;
  --display-text-transform: uppercase;

  /* H1 (3rem/48px) - Roboto Condensed Bold, Uppercase */
  --h1-size-min: 2rem;
  --h1-size-fluid: 5vw;
  --h1-size-max: 3rem;
  --h1-weight: 700;
  --h1-line-height: 1.14;
  --h1-letter-spacing: 0;
  --h1-text-transform: uppercase;

  /* H2 (3rem/48px) - Roboto Condensed Bold, Title Case */
  --h2-size-min: 1.75rem;
  --h2-size-fluid: 4vw;
  --h2-size-max: 3rem;
  --h2-weight: 700;
  --h2-line-height: 1.14;
  --h2-letter-spacing: 0;
  --h2-text-transform: uppercase;

  /* H3 (2.25rem/36px) - Roboto Condensed Bold, Title Case */
  --h3-size-min: 1.5rem;
  --h3-size-fluid: 3vw;
  --h3-size-max: 2.25rem;
  --h3-weight: 700;
  --h3-line-height: 1.14;
  --h3-letter-spacing: 0;
  --h3-text-transform: none;

  /* H4 (1.75rem/28px) - Roboto Condensed Bold, Title Case */
  --h4-size-min: 1.25rem;
  --h4-size-fluid: 2.5vw;
  --h4-size-max: 1.75rem;
  --h4-weight: 700;
  --h4-line-height: 1.14;
  --h4-letter-spacing: 0;
  --h4-text-transform: none;

  /* H5 (1.5rem/24px) - Work Sans Bold, Title Case */
  --h5-size-min: 1.125rem;
  --h5-size-fluid: 2vw;
  --h5-size-max: 1.5rem;
  --h5-weight: 700;
  --h5-line-height: 1.4;
  --h5-letter-spacing: 0;
  --h5-text-transform: none;

  /* H6 (1.25rem/20px) - Work Sans Bold, Title Case */
  --h6-size-min: 1rem;
  --h6-size-fluid: 1.5vw;
  --h6-size-max: 1.25rem;
  --h6-weight: 700;
  --h6-line-height: 1.4;
  --h6-letter-spacing: 0.02em;
  --h6-text-transform: capitalize;

  /* -------------------- */
  /* Typography - Body    */
  /* -------------------- */
  /* Body Large (1.125rem/18px) - Work Sans Medium */
  --body-lg-size: 1.125rem;
  --body-lg-weight: 500;
  --body-lg-line-height: 1.5;
  --body-lg-letter-spacing: 0;
  --body-lg-text-transform: none;

  /* Body Normal (1rem/16px) - Work Sans Medium */
  --body-size: 1rem;
  --body-weight: 500;
  --body-line-height: 1.5;
  --body-letter-spacing: 0;
  --body-text-transform: none;

  /* Body Small (0.875rem/14px) - Work Sans Medium */
  --body-sm-size: 0.875rem;
  --body-sm-weight: 500;
  --body-sm-line-height: 1.3;
  --body-sm-letter-spacing: 0;
  --body-sm-text-transform: none;

  /* -------------------- */
  /* Layout - Grid System */
  /* -------------------- */
  /* Base values - edit these to change the entire grid */
  --site-width: 1200px;
  --site-margin: 2rem;
  --site-gutter: 1.5rem;
  --site-columns: 12;

  /* Calculated values - derived from base values */
  --site-max-width: min(var(--site-width), 100%);
  --container-main: calc(var(--site-max-width) - var(--site-margin) * 2);
  --container-full: calc(100% - var(--site-margin) * 2);
  --gutter-total: calc(var(--site-gutter) * (var(--site-columns) - 1));

  /* Column width calculations */
  --col-width: calc((var(--container-main) - var(--gutter-total)) / var(--site-columns));
  --col-plus-gutter: calc(var(--col-width) + var(--site-gutter));

  /* Column span widths (use inside container-main) */
  --col-1: var(--col-width);
  --col-2: calc(var(--col-plus-gutter) * 2 - var(--site-gutter));
  --col-3: calc(var(--col-plus-gutter) * 3 - var(--site-gutter));
  --col-4: calc(var(--col-plus-gutter) * 4 - var(--site-gutter));
  --col-5: calc(var(--col-plus-gutter) * 5 - var(--site-gutter));
  --col-6: calc(var(--col-plus-gutter) * 6 - var(--site-gutter));
  --col-7: calc(var(--col-plus-gutter) * 7 - var(--site-gutter));
  --col-8: calc(var(--col-plus-gutter) * 8 - var(--site-gutter));
  --col-9: calc(var(--col-plus-gutter) * 9 - var(--site-gutter));
  --col-10: calc(var(--col-plus-gutter) * 10 - var(--site-gutter));
  --col-11: calc(var(--col-plus-gutter) * 11 - var(--site-gutter));
  --col-12: var(--container-main);

  /* Narrower containers derived from columns */
  --container-narrow: var(--col-8);
  --container-text: var(--col-6);

  /* -------------------- */
  /* Line Height Trim     */
  /* -------------------- */
  /* Optical trim values for cleaner vertical spacing */
  --text-trim-top: 0.35em;
  --text-trim-bottom: 0.35em;

  /* -------------------- */
  /* Buttons              */
  /* -------------------- */
  --btn-radius: 4px;
  --btn-radius-pill: 100px;
  --btn-transition: all 0.2s ease;
  --btn-font-size: 1.125rem;
  --btn-font-weight: 700;
  --btn-line-height: 1.1;

  /* Primary (dark navy fill on light bg) */
  --btn-primary-bg: var(--black);
  --btn-primary-border: var(--black);
  --btn-primary-text: var(--white);
  --btn-primary-hover-bg: transparent;
  --btn-primary-hover-border: var(--black);
  --btn-primary-hover-text: var(--black);

  /* Secondary (dark navy outline on light bg) */
  --btn-secondary-bg: transparent;
  --btn-secondary-border: var(--black);
  --btn-secondary-text: var(--black);
  --btn-secondary-hover-bg: var(--black);
  --btn-secondary-hover-border: var(--black);
  --btn-secondary-hover-text: var(--white);

  /* Accent (steel blue fill - for dark backgrounds) */
  --btn-accent-bg: var(--accent);
  --btn-accent-border: var(--accent);
  --btn-accent-text: var(--white);
  --btn-accent-hover-bg: transparent;
  --btn-accent-hover-border: var(--accent);
  --btn-accent-hover-text: var(--accent);

  /* White outline (for dark backgrounds) */
  --btn-white-bg: transparent;
  --btn-white-border: var(--white);
  --btn-white-text: var(--white);
  --btn-white-hover-bg: var(--white);
  --btn-white-hover-border: var(--white);
  --btn-white-hover-text: var(--black);

  /* -------------------- */
  /* Hero                 */
  /* -------------------- */
  /* 80svh total minus super-nav + logo header + nav bar (~260px) */
  --hero-height: calc(80svh - 260px);
}

/* ============================================ */
/* BASE STYLES                                  */
/* ============================================ */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  text-transform: var(--body-text-transform);
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================ */
/* TYPOGRAPHY SCALE                             */
/* ============================================ */
/*
 * Semantic tags separate from visual styles.
 * Use the right tag for meaning (h1 for main heading, h2 for sections, etc.)
 * Apply a class to override the visual size if needed.
 *
 * Example: <h1 class="h3">Semantic h1, styled like h3</h1>
 */

/* Headings */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--black);
  margin-top: 0;
}

/* H5 and H6 use body font (Work Sans) per brand guide */
h5, h6 {
  font-family: var(--font-primary);
  color: var(--black);
  margin-top: 0;
}

/* Display Heading - for hero sections */
.display {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 8vw, var(--display-size));
  font-weight: var(--display-weight);
  line-height: var(--display-line-height);
  text-transform: var(--display-text-transform);
}

h1, .h1 {
  font-size: clamp(var(--h1-size-min), var(--h1-size-fluid), var(--h1-size-max));
  font-weight: var(--h1-weight);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
  text-transform: var(--h1-text-transform);
}

h2, .h2 {
  font-size: clamp(var(--h2-size-min), var(--h2-size-fluid), var(--h2-size-max));
  font-weight: var(--h2-weight);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
  text-transform: var(--h2-text-transform);
}

h3, .h3 {
  font-size: clamp(var(--h3-size-min), var(--h3-size-fluid), var(--h3-size-max));
  font-weight: var(--h3-weight);
  line-height: var(--h3-line-height);
  letter-spacing: var(--h3-letter-spacing);
  text-transform: var(--h3-text-transform);
}

h4, .h4 {
  font-size: clamp(var(--h4-size-min), var(--h4-size-fluid), var(--h4-size-max));
  font-weight: var(--h4-weight);
  line-height: var(--h4-line-height);
  letter-spacing: var(--h4-letter-spacing);
  text-transform: var(--h4-text-transform);
}

h5, .h5 {
  font-size: clamp(var(--h5-size-min), var(--h5-size-fluid), var(--h5-size-max));
  font-weight: var(--h5-weight);
  line-height: var(--h5-line-height);
  letter-spacing: var(--h5-letter-spacing);
  text-transform: var(--h5-text-transform);
}

h6, .h6 {
  font-size: clamp(var(--h6-size-min), var(--h6-size-fluid), var(--h6-size-max));
  font-weight: var(--h6-weight);
  line-height: var(--h6-line-height);
  letter-spacing: var(--h6-letter-spacing);
  text-transform: var(--h6-text-transform);
}

/* Body Text */
.body-lg {
  font-size: var(--body-lg-size);
  font-weight: var(--body-lg-weight);
  line-height: var(--body-lg-line-height);
  letter-spacing: var(--body-lg-letter-spacing);
  text-transform: var(--body-lg-text-transform);
}

.body, .body-md {
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  text-transform: var(--body-text-transform);
}

.body-sm {
  font-size: var(--body-sm-size);
  font-weight: var(--body-sm-weight);
  line-height: var(--body-sm-line-height);
  letter-spacing: var(--body-sm-letter-spacing);
  text-transform: var(--body-sm-text-transform);
}

/* Eyebrow / Small Title */
.eyebrow {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

/* ============================================ */
/* LINE HEIGHT TRIMMING                         */
/* ============================================ */
/*
 * Removes extra space above/below text caused by line-height.
 * Creates more predictable vertical spacing.
 * Add .text-trim-off to disable on specific elements.
 */

:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.text-trim-off)::before {
  content: "";
  display: table;
  margin-bottom: var(--text-trim-top, 0);
}

:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.text-trim-off)::after {
  content: "";
  display: table;
  margin-top: var(--text-trim-bottom, 0);
}

/* ============================================ */
/* LAYOUT CONTAINERS                            */
/* ============================================ */

.container {
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
  padding-inline: var(--site-margin);
}

.container-narrow {
  width: 100%;
  max-width: calc(var(--container-narrow) + var(--site-margin) * 2);
  margin-inline: auto;
  padding-inline: var(--site-margin);
}

.container-text {
  width: 100%;
  max-width: calc(var(--container-text) + var(--site-margin) * 2);
  margin-inline: auto;
  padding-inline: var(--site-margin);
}

.container-full {
  width: var(--container-full);
  margin-inline: auto;
}

/* ============================================ */
/* UTILITY CLASSES                              */
/* ============================================ */

/* Margin Trim - removes top margin from first child, bottom from last */
.u-margin-trim > :first-child { margin-top: 0; }
.u-margin-trim > :last-child { margin-bottom: 0; }

/* Line Clamp - truncate text with ellipsis */
.u-line-clamp-1,
.u-line-clamp-2,
.u-line-clamp-3,
.u-line-clamp-4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.u-line-clamp-1 { -webkit-line-clamp: 1; }
.u-line-clamp-2 { -webkit-line-clamp: 2; }
.u-line-clamp-3 { -webkit-line-clamp: 3; }
.u-line-clamp-4 { -webkit-line-clamp: 4; }

/* Hide if Empty */
.u-hide-empty:empty { display: none !important; }

/* Visually Hidden - accessible but invisible */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip Link - visible on focus for keyboard users */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--black);
  color: var(--white);
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 4px 4px;
  z-index: 1000;
  text-decoration: none;
  font-weight: 600;
  transition: top 0.2s ease;
}

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

/* ============================================ */
/* BASE ELEMENTS                                */
/* ============================================ */

a {
  color: inherit;
}

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

/* ============================================ */
/* BUTTONS                                      */
/* ============================================ */
/*
 * Modular button system with variants and modifiers.
 *
 * Structure: .btn .btn-[variant] .btn-[modifier]
 *
 * Variants: btn-primary, btn-secondary, btn-outline, btn-white
 * Modifiers: btn-sm, btn-lg, btn-pill, btn-icon-only
 *
 * Example: <a href="#" class="btn btn-primary btn-lg btn-pill">
 */

/* Button Base */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.5em;
  font-family: var(--font-primary);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: var(--btn-line-height);
  text-decoration: none;
  text-transform: capitalize; /* Title Case */
  letter-spacing: 0;
  border: 2px solid transparent;
  border-radius: var(--btn-radius);
  cursor: pointer;
  transition: var(--btn-transition);
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Button Icon */
.btn-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* Button Sizes */
.btn-sm {
  padding: 0.5em 1em;
  font-size: var(--body-sm-size);
}

.btn-lg {
  padding: 1em 2em;
  font-size: var(--body-lg-size);
}

/* Button Shapes */
.btn-pill {
  border-radius: var(--btn-radius-pill);
}

/* Icon Only Button */
.btn-icon-only {
  padding: 0.75em;
  border-radius: 50%;
}

.btn-icon-only svg {
  width: 1.25em;
  height: 1.25em;
}

.btn-icon-only.btn-lg {
  padding: 1em;
}

.btn-icon-only.btn-lg svg {
  width: 1.5em;
  height: 1.5em;
}

/* Primary Button */
.btn-primary {
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  color: var(--btn-primary-text);
}

.btn-primary:hover {
  background-color: var(--btn-primary-hover-bg);
  border-color: var(--btn-primary-hover-border);
  color: var(--btn-primary-hover-text);
}

/* Secondary Button */
.btn-secondary {
  background-color: var(--btn-secondary-bg);
  border-color: var(--btn-secondary-border);
  color: var(--btn-secondary-text);
}

.btn-secondary:hover {
  background-color: var(--btn-secondary-hover-bg);
  border-color: var(--btn-secondary-hover-border);
  color: var(--btn-secondary-hover-text);
}

/* Accent Button (for dark backgrounds) */
.btn-accent {
  background-color: var(--btn-accent-bg);
  border-color: var(--btn-accent-border);
  color: var(--btn-accent-text);
}

.btn-accent:hover {
  background-color: var(--btn-accent-hover-bg);
  border-color: var(--btn-accent-hover-border);
  color: var(--btn-accent-hover-text);
}

/* White Outline Button (for dark backgrounds) */
.btn-white {
  background-color: var(--btn-white-bg);
  border-color: var(--btn-white-border);
  color: var(--btn-white-text);
}

.btn-white:hover {
  background-color: var(--btn-white-hover-bg);
  border-color: var(--btn-white-hover-border);
  color: var(--btn-white-hover-text);
}

/* ============================================ */
/* STYLEGUIDE PAGE                              */
/* ============================================ */

.styleguide {
  padding: 4rem 0;
}

.sg-header {
  margin-bottom: 4rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--gray-medium);
}

.sg-section {
  margin-bottom: 4rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--gray-light);
}

.sg-section > h2 {
  margin-bottom: 2rem;
  color: var(--text-muted);
  font-size: var(--body-size);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Colors */
.sg-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.sg-color-card {
  width: 140px;
}

.sg-color-swatch {
  width: 100%;
  height: 80px;
  border-radius: 8px;
  margin-bottom: 0.75rem;
}

.sg-color-name {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.sg-color-var {
  display: block;
  font-size: var(--body-sm-size);
  color: var(--text-muted);
  margin-bottom: 0.125rem;
}

.sg-color-hex {
  display: block;
  font-size: var(--body-sm-size);
  color: var(--text-dark);
  font-weight: 600;
}

/* Typography */
.sg-type-block {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--gray-light);
}

.sg-type-block:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.sg-type-specs {
  background: var(--gray-light);
  padding: 1rem;
  border-radius: 6px;
}

.sg-type-tag {
  display: inline-block;
  background: var(--black);
  color: var(--white);
  font-size: var(--body-sm-size);
  font-weight: 600;
  font-family: monospace;
  padding: 0.25em 0.5em;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.sg-spec-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  font-size: var(--body-sm-size);
}

.sg-spec-label {
  color: var(--text-muted);
}

.sg-spec-value {
  color: var(--text-dark);
  font-family: monospace;
}

.sg-type-preview {
  display: flex;
  align-items: center;
}

.sg-type-preview h1,
.sg-type-preview h2,
.sg-type-preview h3,
.sg-type-preview h4,
.sg-type-preview h5,
.sg-type-preview h6,
.sg-type-preview p {
  margin: 0;
}

/* Buttons */
.sg-button-demo {
  padding: 2rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  border: 1px solid var(--gray-light);
}

.sg-button-demo .sg-button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.sg-button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.sg-dark-bg {
  background: var(--black);
  padding: 2rem;
  border-radius: 8px;
  border: none;
}

/* Containers Demo */
.sg-container-demo {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sg-container-box {
  background: var(--gray-light);
  padding: 1.5rem;
  border-radius: 4px;
  border-left: 4px solid var(--accent);
}

.sg-container-box code {
  font-weight: 600;
}

/* Utilities */
.sg-utilities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

.sg-utility-card {
  background: var(--gray-light);
  padding: 1rem;
  border-radius: 4px;
}

.sg-utility-card code {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--black);
}

.sg-utility-card p {
  margin: 0;
  color: var(--text-muted);
}

/* ==================== */
/* Super Nav (top bar)   */
/* ==================== */
.super-nav {
  background: var(--black);
  color: var(--white);
  font-size: var(--body-sm-size);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.super-nav-inner {
  max-width: var(--site-width);
  margin: 0 auto;
  padding: 0.4rem 2rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
}

.super-nav-promo {
  opacity: 0.9;
}

.super-nav-divider {
  opacity: 0.5;
}

.super-nav-phone {
  color: var(--white);
  text-decoration: none;
  transition: opacity 0.2s;
}

.super-nav-phone:hover {
  opacity: 0.8;
}

@media (max-width: 480px) {
  .super-nav-inner {
    flex-direction: column;
    text-align: center;
    gap: 0.15rem;
  }
}

/* ==================== */
/* Header (Logo)        */
/* ==================== */
.site-header {
  background: var(--white);
  text-align: center;
  padding: 0.75rem 2rem;
}

.logo {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

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

/* ==================== */
/* Sticky Navigation    */
/* ==================== */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  max-width: var(--site-width);
  margin: 0 auto;
}

.nav-container {
  position: relative;
  background: var(--white);
  box-shadow: none;
  padding: 0.75rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: box-shadow 0.3s ease;
}

/* Mini logo in nav — hidden by default */
.nav-logo {
  position: absolute;
  left: 2rem;
  width: 52px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  display: flex;
  align-items: center;
}

.nav-logo-img {
  width: 100%;
  height: auto;
}

/* Scrolled state */
.site-nav.nav-scrolled .nav-container {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.site-nav.nav-scrolled .nav-logo {
  opacity: 1;
  pointer-events: auto;
}

.nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2rem;
  align-items: center;
}

.nav-links a:not(.btn) {
  text-decoration: none;
  color: var(--text-dark);
  font-weight: 500;
  transition: color 0.2s;
}

.nav-links a:not(.btn):hover {
  color: var(--accent);
}

/* Hamburger Toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 200;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--black);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.hamburger {
  position: relative;
}

.hamburger::before,
.hamburger::after {
  content: "";
  position: absolute;
  left: 0;
}

.hamburger::before {
  top: -7px;
}

.hamburger::after {
  top: 7px;
}

/* Animate to X */
.nav-toggle.active .hamburger {
  background: transparent;
}

.nav-toggle.active .hamburger::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle.active .hamburger::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ==================== */
/* Page Hero (inner pages) */
/* ==================== */
/* Image-backed hero for inner pages — mirrors homepage hero */
.page-hero {
  position: relative;
  background: #030305;
  color: var(--white);
  min-height: var(--hero-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('https://static.wixstatic.com/media/3ccc27_25166f64fe76411e9324c3afe6a32664~mv2.jpg/v1/fill/w_1920,h_1080,al_c,q_90,enc_auto/3ccc27_25166f64fe76411e9324c3afe6a32664~mv2.jpg') center/cover no-repeat;
  opacity: 0.45;
  z-index: 0;
}

.page-hero > * {
  position: relative;
  z-index: 1;
}

.page-hero h1 {
  color: var(--white);
  font-family: var(--font-heading);
  font-size: clamp(3rem, 8vw, var(--display-size));
  font-weight: var(--display-weight);
  line-height: var(--display-line-height);
  text-transform: var(--display-text-transform);
  margin-bottom: 0.75rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.page-hero p {
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.1rem;
}

/* Page-specific hero images */
.page-hero--about::before {
  background-image: url('/images/Hero Images per Page/About Us/AdobeStock_228971715_Preview.jpg');
}

.page-hero--services::before {
  background-image: url('/images/Hero Images per Page/Our Services/AdobeStock_746847281_Preview.jpg');
}

.page-hero--guarantee::before {
  background-image: url('/images/Hero Images per Page/Our Guarantee/AdobeStock_209798677_Preview.jpg');
}

.page-hero--areas::before {
  background-image: url('/images/Hero Images per Page/Areas We Serve/AdobeStock_86825527_Preview.jpg');
}

.page-hero--schedule::before {
  background-image: url('/images/Hero Images per Page/Schedule Your Inspection/AdobeStock_127971052_Preview.jpg');
}

/* ==================== */
/* Contact Hero (form overlay) */
/* ==================== */
.page-hero-contact {
  position: relative;
  background: #030305;
  color: var(--white);
  min-height: var(--hero-height);
  padding: 4rem 2rem;
}

.page-hero-contact::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('https://static.wixstatic.com/media/3ccc27_25166f64fe76411e9324c3afe6a32664~mv2.jpg/v1/fill/w_1920,h_1080,al_c,q_90,enc_auto/3ccc27_25166f64fe76411e9324c3afe6a32664~mv2.jpg') center/cover no-repeat;
  opacity: 0.45;
  z-index: 0;
}

.page-hero-contact > * {
  position: relative;
  z-index: 1;
}

.page-hero-contact h1 {
  color: var(--white);
  font-family: var(--font-heading);
  font-size: clamp(3rem, 8vw, var(--display-size));
  font-weight: var(--display-weight);
  line-height: var(--display-line-height);
  text-transform: var(--display-text-transform);
  text-align: center;
  margin-bottom: 0.5rem;
}

.page-hero-contact > p {
  text-align: center;
  opacity: 0.9;
  margin-bottom: 2.5rem;
}

.contact-hero-grid {
  max-width: var(--site-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.contact-hero-info h2 {
  color: var(--white);
  margin-bottom: 0.75rem;
}

.contact-hero-info p {
  opacity: 0.9;
  line-height: 1.7;
}

.contact-hero-info .contact-methods {
  margin: 1.5rem 0;
}

.contact-hero-info .contact-method {
  margin-bottom: 1.25rem;
  padding: 1rem;
  border-left: 3px solid var(--accent);
  background: #fff;
  border-radius: 8px;
}

.contact-hero-info .contact-method h4 {
  color: var(--black);
  margin-bottom: 0.25rem;
}

.contact-hero-info .contact-method p {
  margin: 0;
}

.contact-hero-info .contact-method a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  font-size: 1.1rem;
}

.contact-hero-info .contact-method a:hover {
  text-decoration: underline;
}

.contact-hero-info .note {
  font-size: 0.9rem;
  opacity: 0.7;
}

.contact-service-area ul {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 1rem;
  color: var(--text-dark);
}

.contact-service-area li {
  padding: 0.25rem 0;
  font-size: 0.95rem;
}

.contact-service-area .note {
  margin-top: 0.5rem;
}

.contact-service-area .note a {
  font-size: 0.9rem;
}

.contact-hero-info .service-area {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.contact-hero-info .service-area h3 {
  color: var(--white);
  margin-bottom: 0.5rem;
}

.contact-hero-info .service-area ul {
  margin: 0.75rem 0 0.75rem 1.5rem;
  color: rgba(255, 255, 255, 0.85);
}

.contact-hero-info .service-area li {
  margin-bottom: 0.25rem;
}

.contact-hero-info .service-area .note {
  margin-top: 0.5rem;
}

.contact-hero-form .contact-form {
  background: var(--white);
  padding: 2rem;
  border-radius: 8px;
  color: var(--text-dark);
}

.contact-hero-form .contact-form h2 {
  color: var(--black);
  margin-bottom: 1.25rem;
}

.contact-hero-form .form-note {
  text-align: center;
  margin-top: 1rem;
  color: rgba(255, 255, 255, 0.8);
}

.contact-hero-form .form-note a {
  color: var(--accent);
  font-weight: 600;
}

@media (max-width: 768px) {
  .contact-hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ==================== */
/* Footer               */
/* ==================== */
.site-footer {
  background: #030305;
  color: #ccc;
  padding: 4rem 2rem 0;
}

.footer-container {
  max-width: var(--site-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding-bottom: 2rem;
}

.footer-left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.footer-contact p,
.footer-legal p {
  margin: 0.25rem 0;
  font-size: 1rem;
}

.footer-contact strong {
  color: var(--white);
  font-weight: 700;
}

.footer-contact a {
  color: #ccc;
  text-decoration: underline;
}

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

.footer-logo {
  text-align: center;
  position: relative;
  top: -2rem;
}

.footer-logo-img {
  height: 150px;
  width: auto;
  margin-bottom: 0.75rem;
}

.footer-tagline {
  margin: 0.25rem 0;
  font-size: 0.875rem;
  color: #999;
}

.footer-cert-img {
  height: 80px;
  width: auto;
}

.footer-legal {
  font-size: 0.875rem;
}

/* Textile Credit Footer */
.textile-credit {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.25rem 2rem;
  text-align: center;
  max-width: var(--site-width);
  margin: 0 auto;
}

.textile-credit p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--white);
}

.textile-credit a {
  color: var(--white);
  text-decoration: none;
}

.textile-credit a:hover {
  text-decoration: underline;
}

/* ==================== */
/* Shared Page Styles   */
/* ==================== */

/* Page Header - used on most inner pages */
.page-header {
  background: var(--black);
  color: var(--white);
  padding: 4rem 2rem;
  text-align: center;
}

.page-header h1 {
  color: var(--white);
  font-family: var(--font-heading);
  font-size: clamp(3rem, 8vw, var(--display-size));
  font-weight: var(--display-weight);
  line-height: var(--display-line-height);
  text-transform: var(--display-text-transform);
  margin-bottom: 0.5rem;
}

.page-header p {
  opacity: 0.9;
}

/* CTA Section - dark background call to action */
.cta-section {
  background: #4C5660;
  color: var(--white);
  text-align: center;
  padding: 4rem 2rem;
}

.cta-section h2 {
  color: var(--white);
  margin-bottom: 0.5rem;
}

.cta-section p {
  margin-bottom: 2rem;
  opacity: 0.9;
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-section .btn-accent {
  background-color: #000;
  border-color: #000;
}

.cta-section .btn-accent:hover {
  background-color: var(--black);
  border-color: var(--black);
}

/* ==================== */
/* Home Page            */
/* ==================== */

/* Hero Section */
.hero {
  position: relative;
  background: #030305;
  color: var(--white);
  min-height: var(--hero-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('https://static.wixstatic.com/media/3ccc27_25166f64fe76411e9324c3afe6a32664~mv2.jpg/v1/fill/w_1920,h_1080,al_c,q_90,enc_auto/3ccc27_25166f64fe76411e9324c3afe6a32664~mv2.jpg') center/cover no-repeat;
  opacity: 0.45;
  z-index: 0;
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero-content {
  width: 100%;
  max-width: var(--site-width);
}

.hero h1 {
  color: var(--white);
  font-family: var(--font-heading);
  font-size: clamp(3rem, 8vw, var(--display-size));
  font-weight: var(--display-weight);
  line-height: var(--display-line-height);
  text-transform: var(--display-text-transform);
  margin-bottom: 2rem;
}

.hero-quote {
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.8;
  max-width: 900px;
  margin: 0 auto 2rem;
  opacity: 0.95;
}

.hero-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* About Section (Home) */
.about-section {
  padding: 4rem 2rem;
  background: var(--white);
}

.about-content {
  max-width: var(--site-width);
  margin: 0 auto;
}

.about-content h2 {
  color: var(--black);
  margin-bottom: 1.5rem;
}

.about-content p {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  color: var(--text-dark);
}

/* Inspector Section */
.inspector-section {
  padding: 4rem 2rem;
  background: var(--black);
  color: var(--white);
}

.inspector-content {
  max-width: var(--site-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.inspector-info h2 {
  margin-bottom: 0.5rem;
}

.inspector-name {
  font-size: 1.1rem;
  opacity: 0.9;
  margin-bottom: 1.5rem;
}

.contact-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.certifications h3 {
  margin-bottom: 1rem;
  color: var(--accent);
}

.certifications ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}

.certifications li {
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
}

.certifications li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
}

.cert-badges {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.cert-badges img {
  height: 80px;
  width: auto;
}

/* Advantages Section */
.advantages-section {
  padding: 4rem 2rem;
  background: var(--gray-light);
}

.advantages-section h2 {
  text-align: center;
  color: var(--black);
  margin-bottom: 3rem;
}

.advantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: var(--site-width);
  margin: 0 auto;
}

.advantage-card {
  background: var(--white);
  padding: 2rem;
  border-radius: 8px;
  border-left: 4px solid var(--accent);
}

.advantage-card h3 {
  color: var(--black);
  margin-bottom: 0.75rem;
}

.advantage-card p {
  color: var(--text-muted);
  line-height: 1.6;
}

/* Inspections Section */
.inspections-section {
  padding: 4rem 2rem;
  background: var(--white);
}

.inspections-section h2 {
  text-align: center;
  color: var(--black);
  margin-bottom: 3rem;
}

.inspections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  max-width: var(--site-width);
  margin: 0 auto;
}

.inspection-card {
  background: #f5f5f5;
  padding: 1.5rem;
  border-radius: 0;
  border-bottom: 0.75rem solid var(--accent);
}

.inspection-card h3 {
  color: var(--black);
  margin-bottom: 0.5rem;
}

.inspection-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0;
}

/* Included Section */
.included-section {
  padding: 5rem 2rem;
  background: var(--accent);
  color: var(--white);
}

.included-section h2 {
  text-align: center;
  color: var(--white);
  margin-bottom: 3rem;
}

.included-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  max-width: var(--site-width);
  margin: 0 auto;
}

.included-column {
  display: flex;
  flex-direction: column;
}

.included-photo {
  margin-top: auto;
}

.included-column h3 {
  color: var(--white);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 3px solid var(--white);
}

.included-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.included-column li {
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
  color: rgba(255, 255, 255, 0.85);
}

.included-column li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--white);
  font-weight: bold;
}

.included-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0.5rem;
  padding-top: 2rem;
}

@media (max-width: 768px) {
  .included-grid {
    grid-template-columns: 1fr;
  }
}

/* Guarantee Section (Home) */
.guarantee-section {
  padding: 4rem 2rem;
  background: var(--white);
  border-top: 1px solid var(--gray-medium);
  border-bottom: 1px solid var(--gray-medium);
}

.guarantee-content {
  max-width: var(--site-width);
  margin: 0 auto;
  display: flex;
  gap: 3rem;
  align-items: center;
}

.guarantee-badge {
  width: 200px;
  height: auto;
  flex-shrink: 0;
}

.guarantee-text h2 {
  color: var(--black);
  margin-bottom: 1rem;
}

.guarantee-text p {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  color: var(--text-dark);
}

/* ==================== */
/* Pricing Page         */
/* ==================== */
.pricing-intro {
  padding: 3rem 2rem;
  background: var(--white);
}

.intro-content {
  max-width: var(--site-width);
  margin: 0 auto;
  text-align: center;
}

.intro-content p {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--text-dark);
}

.pricing-section {
  padding: 4rem 2rem;
  background: var(--white);
}

/* First pricing section — background image with white overlay */
.pricing-hero-bg {
  position: relative;
}

.pricing-hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('https://static.wixstatic.com/media/3ccc27_25166f64fe76411e9324c3afe6a32664~mv2.jpg/v1/fill/w_1920,h_1080,al_c,q_90,enc_auto/3ccc27_25166f64fe76411e9324c3afe6a32664~mv2.jpg') center/cover no-repeat;
  opacity: 0.08;
  z-index: 0;
}

.pricing-hero-bg > * {
  position: relative;
  z-index: 1;
}

.pricing-section.alt-bg {
  background: #CCCCCC;
}

.pricing-section.pricing-addons {
  background: var(--accent);
}

.pricing-section.pricing-addons h2 {
  color: var(--white);
}

.pricing-section h2 {
  text-align: center;
  color: var(--black);
  margin-bottom: 3rem;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: var(--site-width);
  margin: 0 auto;
}

.pricing-card {
  background: var(--white);
  border: 1px solid var(--gray-medium);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.pricing-section.alt-bg .pricing-card {
  border-color: var(--gray-medium);
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border-color: var(--accent);
}

.pricing-card:hover .card-header {
  background: var(--black);
  color: var(--white);
}

.pricing-card:hover .card-header h3 {
  color: var(--white);
}

.pricing-card:hover .card-header .price {
  color: var(--accent);
}

.card-header {
  padding: 1.5rem;
  background: var(--gray-light);
  text-align: center;
  border-bottom: 1px solid var(--gray-medium);
  transition: background 0.2s, color 0.2s;
}

.card-header h3 {
  margin: 0 0 0.5rem 0;
  color: var(--black);
  transition: color 0.2s;
}

.card-header .price {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--black);
  margin: 0;
  transition: color 0.2s;
}

.card-body {
  padding: 1.5rem;
}

.price-note {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0 0 1rem 0;
  font-style: italic;
}

.card-body ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}

.card-body li {
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
  color: var(--text-dark);
}

.card-body li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: bold;
}

.card-body .btn-primary {
  display: block;
  text-align: center;
}

/* Addon Cards */
.addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: var(--site-width);
  margin: 0 auto;
}

.addon-card {
  background: #f5f5f5;
  padding: 2rem;
  border-radius: 0;
  border-bottom: 0.75rem solid var(--accent);
}

.addon-card h3 {
  color: var(--black);
  margin: 0 0 0.5rem 0;
}

.addon-card .price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--black);
  margin: 0 0 1rem 0;
}

.addon-card .price-sub {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-muted);
}

.addon-card p:last-child {
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Commercial Section */
.commercial-section {
  padding: 4rem 2rem;
  background: var(--black);
  color: var(--white);
  text-align: center;
}

.commercial-content {
  max-width: var(--site-width);
  margin: 0 auto;
}

.commercial-content h2 {
  color: var(--white);
  margin-bottom: 1rem;
}

.commercial-content p {
  font-size: 1.1rem;
  line-height: 1.7;
  opacity: 0.9;
  margin-bottom: 2rem;
}

/* Guarantee Banner (Pricing page) */
.guarantee-banner {
  padding: 4rem 2rem;
  background: var(--white);
  border-top: 1px solid var(--gray-medium);
}

.guarantee-banner .guarantee-content {
  max-width: var(--site-width);
  margin: 0 auto;
  display: flex;
  gap: 3rem;
  align-items: center;
}

.guarantee-banner .guarantee-badge {
  width: 180px;
  height: auto;
  flex-shrink: 0;
}

.guarantee-banner .guarantee-text h2 {
  color: var(--black);
  margin-bottom: 1rem;
}

.guarantee-banner .guarantee-text p {
  color: var(--text-dark);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

/* ==================== */
/* Services Page        */
/* ==================== */
.services-detail {
  background: var(--accent);
  padding: 4rem 2rem;
}

.service-detail-card {
  max-width: var(--site-width);
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--gray-medium);
  border-radius: 8px;
  padding: 2.5rem;
}

.service-detail-card h2 {
  color: var(--black);
  margin-bottom: 0.5rem;
}

.service-detail-card .price {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--accent-dark);
  margin-bottom: 1rem;
}

.service-detail-card h4 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--black);
}

.service-detail-card ul {
  margin-left: 1.5rem;
}

.service-detail-card li {
  margin-bottom: 0.5rem;
  color: var(--text-dark);
}

.turnaround {
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--gray-light);
  border-left: 4px solid var(--accent);
  border-radius: 4px;
  font-weight: 500;
}

/* Addon (Services page) */
.services-detail .addon-grid {
  margin-top: 1rem;
}

.addon {
  padding: 1.5rem;
  background: #f5f5f5;
  border-radius: 0;
  border-bottom: 0.75rem solid var(--accent);
}

.addon h4 {
  margin: 0 0 0.25rem 0;
  color: var(--black);
}

.addon .price {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.addon p:last-child {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ==================== */
/* About Page           */
/* ==================== */

/* Bio section — two-column with photo */
.about-bio {
  padding: 4rem 2rem;
}

.about-bio-inner {
  max-width: var(--site-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.about-bio-text h2 {
  color: var(--black);
  margin-bottom: 1.5rem;
}

.about-bio-text p {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 1rem;
  color: var(--text-dark);
}

.about-bio-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* Credentials box inside bio */
.about-credentials {
  background: var(--gray-light);
  padding: 2rem;
  border-radius: 8px;
  margin-top: 2rem;
  border-left: 4px solid var(--accent);
}

.about-credentials h3 {
  color: var(--black);
  margin-bottom: 1rem;
}

.about-credentials ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.about-credentials li {
  margin-bottom: 0.5rem;
  color: var(--text-dark);
  padding-left: 1.5rem;
  position: relative;
}

.about-credentials li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: bold;
}

/* Commitment section — blue bg */
.about-commitment {
  padding: 4rem 2rem;
  background: #3F5F7F;
}

.about-commitment-inner {
  max-width: var(--site-width);
  margin: 0 auto;
}

.about-commitment h3 {
  color: var(--white);
  margin-bottom: 2rem;
  text-transform: uppercase;
}

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

.about-commitment .commitment-item {
  background: var(--white);
  padding: 1.5rem;
  border: 3px solid #3F5F7F;
  border-radius: 8px;
}

.about-commitment .commitment-item h4 {
  color: var(--black);
  margin-bottom: 0.5rem;
}

.about-commitment .commitment-item p {
  font-size: 0.95rem;
  margin: 0;
  color: #4C5660;
}

/* About page responsive */
@media (max-width: 768px) {
  .about-bio-inner {
    grid-template-columns: 1fr;
  }

  .about-bio-photo {
    order: -1;
  }

  .about-bio-photo img {
    max-height: 400px;
    border-radius: 8px;
  }

  .about-commitment .commitment-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .about-commitment .commitment-grid {
    grid-template-columns: 1fr;
  }
}

/* ==================== */
/* Guarantee Page       */
/* ==================== */
.guarantee-section.page {
  padding: 4rem 2rem;
  max-width: var(--site-width);
  margin: 0 auto;
}

.guarantee-section.page .guarantee-content {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 3rem;
  align-items: start;
}

.guarantee-section.page .guarantee-badge img {
  max-width: 100%;
  height: auto;
}

.guarantee-details h2 {
  color: var(--black);
  margin-bottom: 1.5rem;
}

.guarantee-intro {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 2rem;
  color: var(--text-dark);
}

.guarantee-details h3 {
  color: var(--black);
  margin-bottom: 1rem;
}

.terms-list {
  margin: 0 0 2rem 1.5rem;
  line-height: 1.8;
}

.terms-list li {
  margin-bottom: 0.75rem;
  color: var(--text-dark);
}

.legal-link {
  padding: 1rem;
  background: var(--gray-light);
  border-radius: 6px;
  font-size: 0.95rem;
  border-left: 4px solid var(--accent);
}

.legal-link a {
  color: var(--accent-dark);
  font-weight: 600;
}

.legal-note {
  display: block;
  margin-top: 0.5rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.why-guarantee {
  padding: 4rem 2rem;
  background: var(--accent);
  color: var(--white);
}

.why-guarantee h2 {
  text-align: center;
  color: var(--white);
  margin-bottom: 2rem;
}

.why-content {
  max-width: var(--site-width);
  margin: 0 auto;
  text-align: center;
  color: var(--white);
}

.why-content p {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  color: var(--white);
}

/* Credentials (Guarantee page) */
.credentials.page {
  padding: 4rem 2rem;
  max-width: var(--site-width);
  margin: 0 auto;
  background: transparent;
  border-left: none;
}

.credentials.page h2 {
  text-align: center;
  color: var(--black);
  margin-bottom: 2.5rem;
}

.credential-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.credential-card {
  text-align: center;
  padding: 2rem;
  background: var(--gray-light);
  border-radius: 0 0 8px 8px;
  border-top: 3px solid var(--accent);
}

.credential-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.credential-icon-img {
  height: 48px;
  width: auto;
  margin-bottom: 1rem;
}

.credential-card h3 {
  color: var(--black);
  margin-bottom: 0.75rem;
}

.credential-card p {
  color: var(--text-muted);
  line-height: 1.5;
}

/* ==================== */
/* Service Areas Page   */
/* ==================== */
.service-area-intro {
  padding: 4rem 2rem;
  max-width: var(--site-width);
  margin: 0 auto;
}

.service-area-intro .intro-content p {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  color: var(--text-dark);
  text-align: left;
}

.coverage-map {
  padding: 4rem 2rem;
  background: #3F5F7F;
}

.map-container {
  max-width: var(--site-width);
  margin: 0 auto;
  text-align: center;
}

.map-container h2 {
  color: var(--white);
  margin-bottom: 2rem;
}

.map-placeholder {
  background: var(--white);
  border: none;
  border-radius: 12px;
  padding: 4rem 2rem;
}

.map-image {
  color: var(--text-muted);
}

.map-note {
  font-size: 0.9rem;
  margin-top: 1rem;
}

.communities-section {
  padding: 4rem 2rem;
  position: relative;
  background: #1a1a1a;
}

.communities-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/images/Minneapolis.jpg') center/cover no-repeat;
  opacity: 0.45;
  z-index: 0;
}

.communities-section > * {
  position: relative;
  z-index: 1;
}

.communities-section h2 {
  text-align: center;
  color: var(--white);
  margin-bottom: 0.75rem;
}

.communities-subtitle {
  text-align: center;
  color: rgba(255,255,255,0.8);
  margin-bottom: 2.5rem;
  font-size: 1rem;
}

.communities-subtitle a {
  color: var(--white);
  text-decoration: underline;
}

.communities-inner {
  max-width: var(--site-width);
  margin: 0 auto;
}

.region-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}

.region-card {
  container-type: inline-size;
  background: var(--white);
  padding: 1.5rem;
  border-radius: 8px;
}

.region-card-title {
  color: var(--black);
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
  font-size: 10cqi;
  line-height: 1.2;
  height: 27cqi;
  overflow: hidden;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
}

.region-card-divider {
  border: none;
  border-top: 2px solid var(--accent);
  margin: 0.75rem 0 1rem;
}

.city-list {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 1rem;
}

.city-list li {
  padding: 0.25rem 0;
  font-size: 0.95rem;
  color: var(--text-dark);
}

.coverage-note {
  text-align: center;
  margin-top: 2.5rem;
  color: var(--text-muted);
}

.coverage-note a {
  color: var(--accent-dark);
  font-weight: 600;
}

.local-knowledge {
  padding: 4rem 2rem;
  background: #4C5660;
}

.local-knowledge-inner {
  max-width: var(--site-width);
  margin: 0 auto;
}

.local-knowledge h2 {
  text-align: center;
  color: var(--white);
  margin-bottom: 2.5rem;
}

.knowledge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.knowledge-card {
  background: #030305;
  border: none;
  border-radius: 12px;
  padding: 2rem;
}

.knowledge-card h3 {
  color: var(--white);
  margin-bottom: 1rem;
}

.knowledge-card p {
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
}

.scheduling-info {
  padding: 4rem 2rem;
  background: #3F5F7F;
}

.scheduling-card {
  max-width: var(--site-width);
  margin: 0 auto;
  background: var(--white);
  padding: 2.5rem;
  border-radius: 12px;
  box-shadow: none;
}

.scheduling-card h2 {
  color: var(--black);
  margin-bottom: 1rem;
}

.scheduling-card > p {
  margin-bottom: 2rem;
  line-height: 1.6;
  color: var(--text-dark);
}

.scheduling-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.detail {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--gray-medium);
  color: var(--text-dark);
}

.detail:last-child {
  border-bottom: none;
}

/* ==================== */
/* Contact Page         */
/* ==================== */
.contact-content {
  max-width: var(--site-width);
  margin: 0 auto;
  padding: 4rem 2rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

.contact-info h2,
.contact-form-container h2 {
  color: var(--black);
  margin-bottom: 1rem;
}

.contact-methods {
  margin: 2rem 0;
}

.contact-method {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border-left: 3px solid var(--accent);
  background: #fff;
  border-radius: 8px;
}

.contact-method h4 {
  margin-bottom: 0.25rem;
  color: var(--black);
}

.contact-method p {
  margin: 0;
}

.contact-method a {
  color: var(--accent-dark);
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
}

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

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

.service-area {
  background: var(--gray-light);
  padding: 1.5rem;
  border-radius: 8px;
  margin-top: 2rem;
}

.service-area h3 {
  margin-bottom: 0.5rem;
  color: var(--black);
}

.service-area ul {
  margin: 1rem 0 1rem 1.5rem;
  color: var(--text-dark);
}

.service-area li {
  margin-bottom: 0.25rem;
}

.contact-form {
  background: var(--gray-light);
  padding: 2rem;
  border-radius: 8px;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--text-dark);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--gray-medium);
  border-radius: 4px;
  font-size: 1rem;
  background: var(--white);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.contact-form button {
  width: 100%;
  background: var(--accent);
  color: var(--black);
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.contact-form button:hover {
  background: var(--accent-dark);
}

.form-note {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.form-note a {
  color: var(--accent-dark);
  font-weight: 600;
}

/* ==================== */
/* Schedule Page        */
/* ==================== */
.scheduler-section {
  position: relative;
  padding: 3rem 2rem;
  background: #f0f0f0;
}

.scheduler-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('https://static.wixstatic.com/media/3ccc27_25166f64fe76411e9324c3afe6a32664~mv2.jpg/v1/fill/w_1920,h_1080,al_c,q_90,enc_auto/3ccc27_25166f64fe76411e9324c3afe6a32664~mv2.jpg') center/cover no-repeat;
  opacity: 0.25;
  z-index: 0;
}

.scheduler-section > * {
  position: relative;
  z-index: 1;
}

.scheduler-inner {
  max-width: var(--site-width);
  margin: 0 auto;
}

.scheduler-intro {
  text-align: center;
  margin-bottom: 2rem;
}

.scheduler-intro p {
  font-size: 1.1rem;
  color: #4C5660;
}

.scheduler-embed {
  margin-bottom: 2rem;
}

.embed-placeholder {
  background: var(--white);
  border: 2px dashed #3F5F7F;
  border-radius: 8px;
  padding: 4rem 2rem;
  text-align: center;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.embed-placeholder p:first-child {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.placeholder-note {
  color: #4C5660;
  font-style: italic;
}

.scheduler-help {
  background: #CCC;
  padding: 2rem;
  border-radius: 8px;
  text-align: center;
  border-left: none;
}

.scheduler-help h3 {
  margin-bottom: 0.5rem;
  color: var(--black);
}

.scheduler-help a {
  color: #2D4A66;
  font-weight: 600;
  text-decoration: none;
}

.scheduler-help a:hover {
  text-decoration: underline;
}

/* What to Expect — blue bg */
.what-to-expect {
  background: #3F5F7F;
  padding: 4rem 2rem;
}

.what-to-expect h2 {
  text-align: center;
  margin-bottom: 3rem;
  color: var(--white);
  text-transform: uppercase;
}

.expect-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: var(--site-width);
  margin: 0 auto;
}

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

.step-number {
  width: 50px;
  height: 50px;
  background: var(--white);
  color: #3F5F7F;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 auto 1rem;
}

.expect-step h4 {
  margin-bottom: 0.5rem;
  color: var(--white);
}

.expect-step p {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.85);
}

@media (max-width: 768px) {
  .expect-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .expect-grid {
    grid-template-columns: 1fr;
  }
}

/* ==================== */
/* Responsive Styles    */
/* ==================== */
@media (max-width: 900px) {
  .guarantee-section.page .guarantee-content {
    grid-template-columns: 1fr;
  }

  .guarantee-section.page .guarantee-badge {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .nav-toggle {
    display: block;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 1rem 2rem 1.5rem;
    gap: 0;
  }

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

  .nav-links li {
    width: 100%;
  }

  .nav-links a:not(.btn) {
    display: block;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--gray-light);
  }

  .nav-links li:last-child {
    margin-top: 0.75rem;
  }

  .nav-links li:last-child .btn {
    display: block;
    text-align: center;
    width: 100%;
  }

  .site-header {
    display: none;
  }

  .site-nav {
    position: sticky;
    top: 0;
  }

  .nav-container {
    position: relative;
    justify-content: space-between;
  }

  .nav-logo {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-logo {
    order: -1;
    top: 0;
  }

  .footer-legal {
    text-align: center;
  }

  .inspector-content {
    grid-template-columns: 1fr;
  }

  .guarantee-content {
    flex-direction: column;
    text-align: center;
  }

  .guarantee-banner .guarantee-content {
    flex-direction: column;
    text-align: center;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

@media (max-width: 600px) {
  .city-list {
    columns: 1;
  }

  .detail {
    flex-direction: column;
    gap: 0.25rem;
  }
}