/* ==========================================================================
   Scott's Carpet Care — Homepage Styles
   Design system: Deep navy + clean white + bright blue CTA
   Typography: Fraunces (display) + Manrope (body)
   ========================================================================== */

:root {
  /* Color */
  --navy: #0D2D5C;
  --navy-dark: #07213F;
  --navy-deep: #051833;
  --blue: #1FA8E0;
  --blue-dark: #0C89BD;
  --blue-light: #D6EEF9;
  --paper: #FFFFFF;
  --paper-2: #F5F9FC;
  --paper-3: #E9F1F8;
  --ink: #0A1A2F;
  --ink-2: #2E3E54;
  --ink-3: #5A6A7E;
  --ink-4: #8697AA;
  --line: #D8E4EE;
  --line-soft: #ECF2F7;
  --star: #FBBF24;
  --white: #FFFFFF;

  /* Type */
  --f-display: 'Fraunces', Georgia, serif;
  --f-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Space */
  --container: 1240px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(10, 26, 47, 0.04), 0 2px 4px rgba(10, 26, 47, 0.04);
  --shadow: 0 2px 4px rgba(10, 26, 47, 0.04), 0 8px 24px rgba(10, 26, 47, 0.08);
  --shadow-lg: 0 4px 8px rgba(10, 26, 47, 0.06), 0 24px 48px rgba(10, 26, 47, 0.12);
  --shadow-xl: 0 8px 16px rgba(10, 26, 47, 0.06), 0 40px 80px rgba(10, 26, 47, 0.16);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ul { list-style: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ==========================================================================
   Type
   ========================================================================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-dark);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1.5px;
  background: var(--blue);
}
.eyebrow-light { color: var(--blue-light); }
.eyebrow-light::before { background: var(--blue); }

.section-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variation-settings: 'opsz' 144;
}
.section-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--navy);
  font-variation-settings: 'opsz' 144;
}

.section-lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-top: 20px;
  max-width: 620px;
}

.section-head { margin-bottom: 56px; max-width: 880px; }
.section-head-center { text-align: center; margin-left: auto; margin-right: auto; }
.section-head-center .eyebrow { justify-content: center; }
.section-head-center .section-lead { margin-left: auto; margin-right: auto; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--navy);
  font-size: 15px;
  padding-bottom: 3px;
  border-bottom: 1.5px solid transparent;
  transition: all 0.3s var(--ease);
}
.link-arrow:hover { border-bottom-color: var(--blue); color: var(--blue-dark); }
.link-arrow svg { transition: transform 0.3s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn-primary, .btn-secondary, .btn-outline-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 100px;
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  transition: all 0.3s var(--ease-out);
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid transparent;
}

.btn-primary {
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 2px 0 var(--blue-dark), 0 4px 12px rgba(31, 168, 224, 0.35);
}
.btn-primary:hover {
  background: var(--blue-dark);
  transform: translateY(-1px);
  box-shadow: 0 3px 0 var(--blue-dark), 0 8px 20px rgba(31, 168, 224, 0.45);
}
.btn-primary:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--blue-dark); }

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

.btn-outline-light {
  background: transparent;
  color: var(--paper);
  border-color: rgba(255, 255, 255, 0.3);
}
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--paper); }

.btn-lg { padding: 17px 30px; font-size: 16px; }
.btn-block { width: 100%; justify-content: center; }

/* ==========================================================================
   Utility bar
   ========================================================================== */
.utility-bar {
  background: var(--navy-deep);
  color: var(--paper);
  font-size: 13px;
  position: relative;
  z-index: 101;
}
.utility-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  gap: 24px;
}
.utility-left {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.util-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}
.util-item strong { color: var(--paper); font-weight: 700; }

@media (max-width: 720px) {
  .util-desktop { display: none; }
  .utility-inner { gap: 12px; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), padding 0.3s var(--ease);
}
.header.scrolled {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  gap: 24px;
  transition: padding 0.3s var(--ease);
}
.header.scrolled .header-inner { padding: 14px 24px; }

.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.logo-img {
  height: 110px;
  width: auto;
  display: block;
  flex-shrink: 0;
  transition: height 0.3s var(--ease);
}
.header.scrolled .logo-img { height: 52px; }

.logo-text { display: flex; flex-direction: column; line-height: 1.2; gap: 2px; }
.logo-tag-top {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.005em;
  font-style: italic;
  font-variation-settings: 'opsz' 36;
}
.logo-sub {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.nav ul { display: flex; align-items: center; gap: 4px; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
  border-radius: 10px;
  transition: all 0.2s var(--ease);
  cursor: pointer;
}
.nav-link:hover { background: var(--paper-2); color: var(--navy); }

.nav-dropdown { position: relative; }
.nav-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: -12px;
  width: 320px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.3s var(--ease-out);
}
.nav-dropdown:hover .nav-panel,
.nav-dropdown:focus-within .nav-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-panel-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 10px;
  transition: background 0.15s var(--ease);
}
.nav-panel-item:hover { background: var(--paper-2); }
.nav-panel-item strong {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.nav-panel-item span {
  font-size: 13px;
  color: var(--ink-3);
}

.header-cta { display: flex; align-items: center; gap: 10px; }
.btn-header { padding: 12px 20px; font-size: 14.5px; }

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: background 0.2s var(--ease);
}
.menu-toggle:hover { background: var(--paper-2); }
.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: all 0.3s var(--ease);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav { display: none; }
  .btn-header { display: none; }
  .menu-toggle { display: flex; }

  .nav.open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 16px;
    box-shadow: var(--shadow);
  }
  .nav.open ul {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .nav.open .nav-link {
    padding: 14px 16px;
    font-size: 16px;
    width: 100%;
    justify-content: space-between;
  }
  .nav.open .nav-panel {
    position: static;
    width: 100%;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: var(--paper-2);
    border: none;
    box-shadow: none;
    margin-top: 4px;
    padding: 4px;
  }
}

@media (max-width: 520px) {
  .logo-text { display: none; }
  .logo-img { height: 48px; }
  .header.scrolled .logo-img { height: 42px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  padding: 56px 0 80px;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 85% 20%, rgba(31, 168, 224, 0.08), transparent 60%),
    radial-gradient(ellipse 80% 60% at 10% 80%, rgba(13, 45, 92, 0.06), transparent 60%),
    var(--paper);
  z-index: -1;
}
.hero-grain {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/><feColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.12 0 0 0 0 0.11 0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 72px;
  align-items: center;
  position: relative;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 10px;
  background: rgba(13, 45, 92, 0.08);
  border: 1px solid rgba(13, 45, 92, 0.15);
  color: var(--navy-dark);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 24px;
}
.pulse-dot {
  width: 8px;
  height: 8px;
  background: #10B981;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.hero-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(40px, 5.8vw, 76px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 24px;
  font-variation-settings: 'opsz' 144;
}
.hero-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--navy);
  font-variation-settings: 'opsz' 144;
}

.hero-sub {
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-2);
  margin-bottom: 36px;
  max-width: 560px;
}

/* Hero special-offer pricing callout */
.hero-offer {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  margin: -4px 0 32px;
  border-radius: 100px;
  background: var(--white);
  border: 2px solid var(--navy);
  box-shadow: 0 8px 22px rgba(13, 45, 92, 0.14);
  overflow: hidden;
  width: 100%;
  max-width: 560px;
}
.hero-offer-info {
  display: inline-flex;
  align-items: stretch;
}
.hero-offer-flag {
  display: inline-flex;
  align-items: center;
  padding: 14px 22px;
  background: var(--navy);
  color: var(--white);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero-offer-title {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  font-size: 21px;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}
.hero-offer-price {
  display: inline-flex;
  align-items: center;
  padding: 0 28px 0 10px;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  color: var(--blue-dark);
  letter-spacing: -0.015em;
  font-variation-settings: 'opsz' 144;
  white-space: nowrap;
}

.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.hero-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.hero-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-2);
}

/* Inline quote card */
.hero-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: var(--shadow-xl);
}
.hero-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-xl);
  padding: 1px;
  background: linear-gradient(135deg, var(--blue) 0%, transparent 40%, transparent 60%, var(--navy) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.3;
  pointer-events: none;
}
.hero-card-header { margin-bottom: 24px; }
.hero-card-tag {
  display: inline-block;
  padding: 4px 10px;
  background: var(--blue-light);
  color: var(--blue-dark);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.hero-card-title {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.15;
  font-variation-settings: 'opsz' 144;
}

/* Form */
.quote-form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
.field input {
  padding: 13px 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--paper-2);
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--ink);
  transition: all 0.2s var(--ease);
  width: 100%;
}
.field input:focus {
  outline: none;
  border-color: var(--navy);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(13, 45, 92, 0.08);
}
.field input::placeholder { color: var(--ink-4); }
.field input.error {
  border-color: #DC2626;
  background: #FEF2F2;
}

.form-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 4px;
}

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .hero { padding: 40px 0 56px; }
  .hero-offer {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    border-radius: 22px;
    padding: 16px 22px;
    align-items: center;
    gap: 20px;
    overflow: visible;
  }
  .hero-offer-info {
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .hero-offer-flag {
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 11px;
    justify-content: center;
    text-align: center;
  }
  .hero-offer-title {
    padding: 0;
    font-size: 17px;
    line-height: 1.2;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }
  .hero-offer-price {
    padding: 0;
    font-size: 42px;
    align-self: center;
    flex: 0 0 auto;
  }
}

/* ==========================================================================
   Trust bar
   ========================================================================== */
.trust-bar {
  background: var(--navy);
  color: var(--paper);
  padding: 36px 0;
  position: relative;
}
.trust-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><path d='M0 0h60v60H0z' fill='none'/><path d='M30 1v58M1 30h58' stroke='rgba(255, 255, 255,0.04)' stroke-width='1'/></svg>");
  opacity: 0.5;
  pointer-events: none;
}
.trust-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  position: relative;
}
.trust-item { text-align: center; }
.trust-num {
  font-family: var(--f-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variation-settings: 'opsz' 144;
}
.trust-num span {
  color: var(--blue);
  font-style: italic;
  margin-left: 2px;
}
.trust-label {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.02em;
}
.trust-divider {
  width: 1px;
  height: 48px;
  background: rgba(255, 255, 255, 0.15);
}

@media (max-width: 780px) {
  .trust-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .trust-divider { display: none; }
}

/* ==========================================================================
   Services
   ========================================================================== */
.services { padding: 96px 0; }

.services-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.service-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.35s var(--ease-out);
  /* 3 per row on desktop — accounts for two 20px gaps */
  flex: 0 0 calc((100% - 40px) / 3);
  max-width: calc((100% - 40px) / 3);
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

/* Uniform image treatment across all cards */
.service-image {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--paper-3) 0%, var(--paper-2) 100%);
  overflow: hidden;
}
.service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out);
}
.service-card:hover .service-image img { transform: scale(1.06); }
.service-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 26, 47, 0.15) 0%, transparent 30%);
  pointer-events: none;
}

/* Most Requested tag (only renders where HTML includes it) */
.service-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 12px;
  background: var(--blue);
  color: var(--white);
  border-radius: 100px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(31, 168, 224, 0.4);
  z-index: 2;
}

/* Card body */
.service-body {
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.service-card h3 {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 10px;
  font-variation-settings: 'opsz' 36;
}
.service-card p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 20px;
  flex-grow: 1;
}
.service-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  transition: all 0.2s var(--ease);
  margin-top: auto;
}
.service-link svg { transition: transform 0.25s var(--ease); color: var(--blue); }
.service-card:hover .service-link { color: var(--blue-dark); }
.service-card:hover .service-link svg { transform: translateX(4px); }

@media (max-width: 960px) {
  /* 2 per row on tablet */
  .service-card {
    flex-basis: calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
  }
  .services { padding: 72px 0; }
}
@media (max-width: 560px) {
  /* 1 per row on mobile */
  .service-card {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* ==========================================================================
   Why us
   ========================================================================== */
.why {
  padding: 96px 0;
  background: var(--paper-2);
  position: relative;
}
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 80px;
  align-items: start;
}
.why-copy { position: sticky; top: 120px; }
.why-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 24px 0 28px;
}

.why-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 24px;
}
.why-item { position: relative; }
.why-num {
  font-family: var(--f-display);
  font-size: 40px;
  font-weight: 500;
  font-style: italic;
  color: var(--blue);
  line-height: 1;
  margin-bottom: 16px;
  font-variation-settings: 'opsz' 144;
}
.why-item h4 {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 10px;
  font-variation-settings: 'opsz' 36;
}
.why-item p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}

@media (max-width: 960px) {
  .why-grid { grid-template-columns: 1fr; gap: 48px; }
  .why-copy { position: static; }
  .why { padding: 72px 0; }
}
@media (max-width: 560px) {
  .why-items { grid-template-columns: 1fr; gap: 28px; }
}

/* ==========================================================================
   Process
   ========================================================================== */
.process { padding: 96px 0; }
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  position: relative;
}
.step {
  position: relative;
  text-align: left;
  padding: 32px 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.step-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--paper);
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 500;
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-variation-settings: 'opsz' 144;
}
.step h4 {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 10px;
  font-variation-settings: 'opsz' 36;
}
.step p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}
.step-line {
  position: absolute;
  top: 60px;
  left: calc(100% - 4px);
  width: 32px;
  height: 1.5px;
  background: linear-gradient(to right, var(--line) 50%, transparent 50%);
  background-size: 8px 100%;
  z-index: 1;
}

@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; gap: 16px; }
  .step-line { display: none; }
  .process { padding: 72px 0; }
}

/* ==========================================================================
   Before/After
   ========================================================================== */
.ba-section { padding: 96px 0; background: var(--paper-2); }
.ba-wrapper {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  margin-bottom: 32px;
}
.ba-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--ink);
  overflow: hidden;
  user-select: none;
  touch-action: none;
  cursor: ew-resize;
}
.ba-after, .ba-before {
  position: absolute;
  inset: 0;
}
.ba-before {
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
  will-change: clip-path;
}
.ba-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.ba-label {
  position: absolute;
  top: 24px;
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 3;
  pointer-events: none;
}
.ba-label-before {
  left: 24px;
  background: rgba(10, 26, 47, 0.7);
  color: var(--paper);
}
.ba-label-after {
  right: 24px;
  background: rgba(31, 168, 224, 0.9);
  color: var(--white);
}

.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--paper);
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}
.ba-handle-line {
  position: absolute;
  inset: 0;
  background: var(--paper);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
.ba-handle-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  background: var(--paper);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  cursor: grab;
  pointer-events: auto;
  transition: transform 0.2s var(--ease);
}
.ba-handle-button:active { cursor: grabbing; transform: translate(-50%, -50%) scale(0.95); }
.ba-handle-button svg { margin: 0 -4px; }

.ba-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.ba-cta p { color: var(--ink-2); font-size: 15px; }

@media (max-width: 700px) {
  .ba-section { padding: 72px 0; }
  .ba-slider { aspect-ratio: 4 / 3; }
  .ba-label { font-size: 10px; padding: 6px 12px; top: 16px; }
  .ba-label-before { left: 16px; }
  .ba-label-after { right: 16px; }
  .ba-handle-button { width: 48px; height: 48px; }
}

/* ==========================================================================
   Reviews
   ========================================================================== */
.reviews { padding: 96px 0; overflow: hidden; }
.reviews-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.reviews-summary { flex-shrink: 0; }
.reviews-rating {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.stars { display: flex; gap: 2px; }
.reviews-score { display: flex; flex-direction: column; line-height: 1.1; }
.reviews-score strong {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--ink);
  font-variation-settings: 'opsz' 36;
}
.reviews-score span { font-size: 12px; color: var(--ink-3); font-weight: 500; }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}

.review-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.3s var(--ease);
}
.review-card:hover {
  border-color: var(--blue);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.review-stars { display: flex; gap: 2px; }
/* Override GeneratePress (and browser default) blockquote chrome so the
   review cards look the same in the WP build as on the static site.
   Targets the two blockquote variants used by the reviews plugin:
   .review-card blockquote (compact grid) and .review-feature-body (masonry). */
.review-card blockquote,
.review-feature-body {
  border: 0;
  padding: 0;
  margin: 0;
  font-style: normal;
  background: transparent;
  quotes: none;
}
.review-card blockquote {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: -0.005em;
  font-variation-settings: 'opsz' 36;
  flex-grow: 1;
}
.review-card blockquote::before {
  content: '"';
  font-size: 36px;
  line-height: 0.5;
  color: var(--blue);
  vertical-align: top;
  margin-right: 4px;
}
.review-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--white);
  flex-shrink: 0;
}
.review-meta strong {
  font-size: 14px;
  color: var(--ink);
  font-weight: 700;
}

.reviews-footer {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

@media (max-width: 960px) {
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews { padding: 72px 0; }
}
@media (max-width: 640px) {
  .reviews-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Service areas
   ========================================================================== */
.areas { padding: 96px 0; background: var(--paper-2); }
.areas-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 64px;
  align-items: center;
}
.areas-copy .btn-primary { margin-top: 28px; }

.areas-map { position: relative; }
.areas-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.areas-list li {
  position: relative;
  background: var(--white);
  overflow: hidden;
  transition: background 0.3s var(--ease-out);
}
.areas-list li:hover {
  background: var(--navy);
}
.areas-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  transition: color 0.3s var(--ease-out), padding 0.3s var(--ease-out);
}
.areas-list li:hover a {
  color: var(--white);
  padding-left: 22px;
}
/* Slide-in arrow on hover, masked SVG so it inherits currentColor */
.areas-list a::after {
  content: '';
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-left: 8px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.areas-list li:hover a::after {
  opacity: 1;
  transform: translateX(0);
}
.badge-hq {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 2px 8px;
  background: var(--blue);
  color: var(--white);
  border-radius: 100px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  pointer-events: none;
  z-index: 2;
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.areas-list li:hover .badge-hq {
  background: var(--white);
  color: var(--navy);
}

/* Current city (on city × service pages) — hover state frozen as "selected".
   No badge pill, so grid cells stay perfectly aligned. */
.areas-list li.current {
  background: var(--navy);
}
.areas-list li.current > span {
  display: flex;
  align-items: center;
  padding: 20px 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
}

@media (max-width: 960px) {
  .areas-grid { grid-template-columns: 1fr; gap: 40px; }
  .areas { padding: 72px 0; }
}
@media (max-width: 560px) {
  .areas-list { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Local Card — "Local Tip" + "We're Local to You" on city × service pages
   ========================================================================== */
.local-card-section {
  padding: 56px 0;
  background: var(--paper);
}
.local-card-tip      { padding: 48px 0 24px; }
.local-card-context  { padding: 56px 0 80px; }

.local-card {
  position: relative;
  background: linear-gradient(135deg, #FFFFFF 0%, #F3F9FD 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 44px 52px;
  box-shadow: 0 12px 40px -18px rgba(13, 45, 92, 0.18);
  overflow: hidden;
}
/* Blue accent bar on the left edge — same pattern as hero-card */
.local-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--blue);
}

.local-card-header { margin-bottom: 20px; }

.local-card-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
  color: var(--ink);
  margin: 10px 0 0;
}
.local-card-title-lg {
  font-size: clamp(30px, 4vw, 44px);
}

.local-card-body {
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
}
.local-card-body p { margin: 0 0 16px; }
.local-card-body p:last-child { margin-bottom: 0; }
.local-card-body strong { color: var(--navy); }
/* Inline neighborhood Google Maps links */
.local-card-body a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.2s var(--ease-out);
}
.local-card-body a:hover { color: var(--navy); }

/* Directions CTA inside the "We're Local to You" card */
.local-card-directions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.local-card-directions-copy h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--ink);
}
.local-card-directions-copy p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2, var(--ink));
  margin: 0;
}
.local-card-directions-copy a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 768px) {
  .local-card { padding: 32px 26px; }
  .local-card::before { width: 3px; }
  .local-card-body { font-size: 16px; line-height: 1.65; }
  .local-card-directions {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 24px;
    padding-top: 24px;
  }
  .local-card-directions .btn-primary { justify-self: start; }
  .local-card-tip      { padding: 32px 0 16px; }
  .local-card-context  { padding: 40px 0 56px; }
}

/* ==========================================================================
   Guarantee
   ========================================================================== */
.guarantee {
  padding: 80px 0;
  background: var(--paper);
}
.guarantee-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 48px;
  align-items: center;
  background: var(--white);
  border: 1.5px dashed var(--blue);
  border-radius: var(--radius-xl);
  padding: 48px 56px;
  max-width: 1100px;
  margin: 0 auto;
}
.guarantee-badge { flex-shrink: 0; }
.guarantee-badge svg { animation: slow-spin 40s linear infinite; }
@keyframes slow-spin { to { transform: rotate(360deg); } }
.guarantee-copy h2 {
  font-family: var(--f-display);
  font-size: clamp(28px, 3.5vw, 38px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 14px;
  font-variation-settings: 'opsz' 144;
}
.guarantee-copy p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}

@media (max-width: 760px) {
  .guarantee-inner { grid-template-columns: 1fr; text-align: center; gap: 24px; padding: 36px 28px; }
  .guarantee-badge { margin: 0 auto; }
  .guarantee { padding: 56px 0; }
}

/* ==========================================================================
   Final CTA
   ========================================================================== */
.final-cta {
  padding: 96px 0;
  background: var(--navy-deep);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(31, 168, 224, 0.15), transparent 60%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(13, 45, 92, 0.3), transparent 60%);
  pointer-events: none;
}
.final-cta-inner { position: relative; text-align: center; max-width: 720px; margin: 0 auto; }
.final-cta-inner h2 {
  font-family: var(--f-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--paper);
  margin-bottom: 16px;
  font-variation-settings: 'opsz' 144;
}
.final-cta-inner p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 36px;
}
.final-cta-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.final-cta-meta {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.7);
}
.final-cta-meta strong {
  color: var(--paper);
  margin-right: 6px;
  font-weight: 700;
}

@media (max-width: 600px) {
  .final-cta { padding: 72px 0; }
  .final-cta-meta { flex-direction: column; gap: 10px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.7);
  padding: 72px 0 32px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-brand { max-width: 340px; }
.logo-footer .logo-tag-top { color: var(--white); font-style: italic; }
.logo-footer .logo-sub { color: rgba(255, 255, 255, 0.5); }
.logo-img-footer {
  height: 48px;
  width: auto;
  background: var(--white);
  padding: 12px 20px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  box-sizing: content-box;
}
.footer-desc {
  font-size: 14.5px;
  line-height: 1.55;
  margin: 20px 0;
}
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  transition: all 0.2s var(--ease);
}
.footer-social a:hover { background: var(--blue); }

.footer-col h5 {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 20px;
}
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul a {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s var(--ease);
}
.footer-col ul a:hover { color: var(--blue); }

.footer-areas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}
.footer-areas li { margin-bottom: 0; }

.footer-contact li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 14px;
}
.footer-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
}
.footer-contact strong { font-size: 17px; color: var(--paper); font-weight: 700; }

.footer-apply {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 14px;
  background: rgba(31, 168, 224, 0.12);
  border: 1px solid rgba(31, 168, 224, 0.3);
  color: var(--blue);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s var(--ease);
}
.footer-apply:hover { background: var(--blue); color: var(--white); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
}
.footer-bottom ul { display: flex; gap: 24px; }
.footer-bottom a { color: rgba(255, 255, 255, 0.5); }
.footer-bottom a:hover { color: var(--blue); }

@media (max-width: 960px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Mobile sticky CTA
   ========================================================================== */
.mobile-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  z-index: 99;
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: 10px 12px;
  gap: 8px;
  box-shadow: 0 -4px 20px rgba(10, 26, 47, 0.08);
  transform: translateY(100%);
  transition: transform 0.35s var(--ease-out);
  pointer-events: none;
}
.mobile-cta.visible {
  transform: translateY(0);
  pointer-events: auto;
}
.mobile-cta-call,
.mobile-cta-quote {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 14.5px;
  transition: all 0.2s var(--ease);
}
.mobile-cta-call {
  background: var(--white);
  color: var(--navy);
  border: 1.5px solid var(--navy);
}
.mobile-cta-quote {
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 2px 0 var(--blue-dark);
}

@media (max-width: 720px) {
  .mobile-cta { display: flex; }
  body { padding-bottom: 80px; }
}

/* ==========================================================================
   Entrance animations
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .hero-content > *,
  .hero-card {
    animation: fadeUp 0.8s var(--ease-out) both;
  }
  .hero-content > *:nth-child(1) { animation-delay: 0.05s; }
  .hero-content > *:nth-child(2) { animation-delay: 0.15s; }
  .hero-content > *:nth-child(3) { animation-delay: 0.25s; }
  .hero-content > *:nth-child(4) { animation-delay: 0.35s; }
  .hero-content > *:nth-child(5) { animation-delay: 0.45s; }
  .hero-card { animation-delay: 0.35s; }

  .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
  .reveal.in { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Selection */
::selection { background: var(--blue); color: var(--white); }

/* ==========================================================================
   Responsive Polish — tablet, mobile, small-phone fine-tuning
   Layered on top of per-component media queries for consistent rhythm,
   tappable CTAs, and legible typography at every size.
   ========================================================================== */

/* ---- Tablet tightening (≤960px) ---- */
@media (max-width: 960px) {
  .container { padding: 0 20px; }
  .section-head { margin-bottom: 44px; }

  /* Hero buttons comfortably full-width at this size */
  .hero-card { padding: 28px; }

  /* Trust bar cleaner */
  .trust-bar { padding: 32px 0; }

  /* Final CTA tighter */
  .final-cta { padding: 80px 0; }
}

/* ---- Mobile (≤640px) ---- */
@media (max-width: 640px) {
  /* Container + global rhythm */
  .container { padding: 0 16px; }

  /* Unified section padding — tighter vertical flow */
  .services,
  .why,
  .process,
  .ba-section,
  .reviews,
  .areas,
  .final-cta { padding: 56px 0; }
  .hero { padding: 24px 0 48px; }
  .trust-bar { padding: 28px 0; }
  .guarantee { padding: 48px 0; }
  .footer { padding: 48px 0 24px; }

  /* Typography — slightly smaller so headings don't feel oversized */
  .section-title { font-size: clamp(26px, 7.5vw, 36px); }
  .section-head { margin-bottom: 32px; }
  .section-lead { font-size: 16px; margin-top: 16px; }
  .eyebrow { font-size: 11px; margin-bottom: 12px; }

  /* Hero */
  .hero-title { font-size: clamp(34px, 10vw, 46px); }
  .hero-sub { font-size: 16.5px; margin-bottom: 28px; }
  .hero-badge { font-size: 12px; padding: 7px 12px 7px 8px; margin-bottom: 20px; }

  /* Hero CTAs — full-width stacked for easy thumb tap */
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary {
    width: 100%;
    justify-content: center;
  }
  .hero-features { padding-top: 20px; }
  .hero-features li { font-size: 14px; }

  /* Hero quote card */
  .hero-card { padding: 24px; border-radius: var(--radius-lg); }
  .hero-card-title { font-size: 22px; line-height: 1.2; }
  .hero-card-tag { font-size: 10px; padding: 3px 9px; }
  .field input { font-size: 16px; /* 16px prevents iOS zoom on focus */ padding: 14px; }
  .field label { font-size: 11.5px; }

  /* Trust bar — tighter numbers */
  .trust-grid { gap: 24px 16px; }
  .trust-num { font-size: clamp(32px, 11vw, 44px); }
  .trust-label { font-size: 11.5px; }

  /* Services */
  .service-body { padding: 22px 22px 24px; }
  .service-card h3 { font-size: 22px; }
  .service-card p { font-size: 14.5px; }

  /* Why us */
  .why-grid { gap: 36px; }
  .why-lead { font-size: 16px; margin: 20px 0 24px; }
  .why-num { font-size: 32px; margin-bottom: 12px; }
  .why-item h4 { font-size: 20px; }
  .why-item p { font-size: 14.5px; }

  /* Process */
  .step { padding: 28px 24px; }
  .step-num { width: 48px; height: 48px; font-size: 22px; margin-bottom: 16px; }
  .step h4 { font-size: 20px; }

  /* Before/After */
  .ba-slider { aspect-ratio: 4 / 3; }
  .ba-cta p { font-size: 14px; }

  /* Reviews */
  .review-card { padding: 22px; gap: 14px; }
  .review-card blockquote { font-size: 16px; }
  .review-card blockquote::before { font-size: 30px; }
  .reviews-header { gap: 20px; margin-bottom: 32px; }
  .reviews-rating { padding: 12px 16px; gap: 12px; }
  .reviews-score strong { font-size: 24px; }

  /* Areas */
  .areas-copy .btn-primary { width: 100%; justify-content: center; }
  .areas-list a { padding: 16px 14px; font-size: 14.5px; }
  .areas-list li:hover a { padding-left: 18px; }
  .badge-hq { top: 10px; right: 10px; font-size: 8.5px; padding: 2px 7px; }

  /* Guarantee */
  .guarantee-inner { padding: 32px 22px; gap: 20px; }
  .guarantee-badge svg { width: 110px; height: 110px; }
  .guarantee-copy h2 { font-size: 24px; }
  .guarantee-copy p { font-size: 15px; }

  /* Final CTA — full-width stacked buttons */
  .final-cta-inner h2 { font-size: clamp(28px, 8vw, 40px); }
  .final-cta-inner p { font-size: 16px; margin-bottom: 28px; }
  .final-cta-buttons {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
  }
  .final-cta-buttons .btn-primary,
  .final-cta-buttons .btn-outline-light {
    width: 100%;
  }
  .final-cta-meta { font-size: 13px; text-align: left; }

  /* Footer */
  .footer-top { gap: 32px; padding-bottom: 28px; }
  .footer-desc { font-size: 14px; margin: 16px 0; }
  .footer-col h5 { margin-bottom: 14px; }
  .footer-col ul li { margin-bottom: 8px; }
  .footer-col ul a { font-size: 14px; }
  .footer-contact strong { font-size: 16px; }
  .footer-bottom { font-size: 12.5px; gap: 14px; }

  /* Utility bar slightly tighter */
  .utility-inner { min-height: 36px; font-size: 12.5px; }

  /* Mobile sticky CTA accounting */
  body { padding-bottom: 76px; }
}

/* ---- Small phones (≤400px) ---- */
@media (max-width: 400px) {
  .container { padding: 0 14px; }
  .hero-title { font-size: 30px; }
  .section-title { font-size: 26px; }
  .hero-card-title { font-size: 20px; }
  .btn-lg { padding: 15px 22px; font-size: 15px; }
  .logo-img { height: 44px; }
  .header.scrolled .logo-img { height: 40px; }
  .trust-grid { gap: 20px 12px; }
  .trust-num { font-size: 30px; }
  .areas-list a { padding: 14px 12px; font-size: 13.5px; }
  .areas-list li:hover a { padding-left: 14px; }
  .areas-list a::after { width: 12px; height: 12px; margin-left: 4px; }
  .mobile-cta-call,
  .mobile-cta-quote { padding: 13px 12px; font-size: 14px; }
}

/* ---- Landscape-aware tweaks (short viewports) ---- */
@media (max-width: 900px) and (orientation: landscape) {
  .hero { padding: 32px 0 40px; }
  .hero-title { font-size: clamp(32px, 6vw, 48px); }
}

/* ==========================================================================
   SERVICE PAGE ADDITIONS
   Sections added for /carpet-cleaning-humble-tx/ and future city pages.
   Reuses the existing design system (tokens, fonts, spacing, shadows).
   ========================================================================== */

/* ---- Active nav state ---- */
.nav-link-active {
  color: var(--navy);
  background: var(--paper-2);
}
.nav-panel-item-active {
  background: var(--paper-2);
}
.nav-panel-item-active strong { color: var(--navy); }

/* ---- Breadcrumbs ---- */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.breadcrumbs a {
  color: var(--ink-3);
  font-weight: 500;
  transition: color 0.2s var(--ease);
}
.breadcrumbs a:hover { color: var(--navy); }
.breadcrumbs span[aria-hidden] { color: var(--ink-4); }
.breadcrumbs-current {
  color: var(--navy);
  font-weight: 600;
}

/* ==========================================================================
   Page Intro Section (two-column copy + photo)
   ========================================================================== */
.page-intro {
  padding: 96px 0;
  background: var(--paper);
}
.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.intro-copy .section-title { margin-bottom: 24px; }
.intro-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 20px;
}
.intro-body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  margin-bottom: 32px;
}

.intro-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.intro-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.intro-stat strong {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--navy);
  font-variation-settings: 'opsz' 36;
}
.intro-stat span {
  font-size: 12.5px;
  color: var(--ink-3);
  font-weight: 500;
}

.intro-figure {
  position: relative;
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.intro-figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.intro-figure figcaption {
  position: static;
  background: var(--navy);
  color: var(--paper);
  padding: 18px 24px 20px;
  font-size: 14px;
  line-height: 1.45;
}
.figcap-label {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 4px;
}

@media (max-width: 960px) {
  .intro-grid { grid-template-columns: 1fr; gap: 40px; }
  .intro-figure img { aspect-ratio: 4 / 3; }
  .page-intro { padding: 72px 0; }
}
@media (max-width: 560px) {
  .intro-stats { grid-template-columns: 1fr; gap: 16px; }
  .intro-lead { font-size: 16.5px; }
}

/* ==========================================================================
   Pro Equipment & Care Section
   ========================================================================== */
.care-section {
  padding: 96px 0;
  background: var(--paper-2);
}
.care-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: center;
}

/* Visuals mosaic */
.care-visuals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 14px;
}
.care-visual {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--white);
}
.care-visual-large {
  grid-column: 1 / -1;
}
.care-visual-large img { aspect-ratio: 16 / 10; }
.care-visual:not(.care-visual-large):not(.care-visual-stat) img { aspect-ratio: 3 / 4; }
.care-visual img {
  width: 100%;
  object-fit: cover;
  display: block;
}
.care-visual figcaption {
  position: static;
  background: var(--navy);
  color: var(--paper);
  padding: 12px 18px 14px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
}

/* Stat tile (replaces third image slot) */
.care-visual-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 24px;
  background: var(--navy);
  color: var(--paper);
  aspect-ratio: 3 / 4;
  box-shadow: var(--shadow);
}
.care-stat-num {
  font-family: var(--f-display);
  font-size: 52px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--paper);
  font-variation-settings: 'opsz' 144;
}
.care-stat-num span {
  color: var(--blue);
  font-style: italic;
  margin-left: 2px;
}
.care-stat-label {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin: 12px 0 16px;
}
.care-visual-stat p {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

/* Copy column */
.care-copy .section-title { margin-bottom: 20px; }
.care-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 28px;
}
.care-lead strong { color: var(--ink); }

.care-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.care-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.care-list li > svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--blue);
  background: var(--blue-light);
  padding: 4px;
  border-radius: 50%;
  box-sizing: content-box;
}
.care-list li > div strong {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.care-list li > div span {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

@media (max-width: 1000px) {
  .care-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 640px) {
  .care-section { padding: 72px 0; }
  .care-visuals {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .care-visual-large img { aspect-ratio: 16 / 10; }
  .care-visual:not(.care-visual-large):not(.care-visual-stat) img { aspect-ratio: 4 / 3; }
  .care-visual-stat {
    aspect-ratio: auto;
    padding: 28px 24px;
  }
  .care-stat-num { font-size: 42px; }
  .care-lead { font-size: 16px; }
}

/* ==========================================================================
   Detailed 6-Step Process
   ========================================================================== */
.process-detail {
  padding: 96px 0;
  background: var(--paper);
}
.process-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.step-detail {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  transition: all 0.3s var(--ease);
}
.step-detail:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.step-detail-num {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: 44px;
  line-height: 0.9;
  color: var(--blue);
  flex-shrink: 0;
  min-width: 56px;
  font-variation-settings: 'opsz' 144;
}
.step-detail-body h4 {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 10px;
  font-variation-settings: 'opsz' 36;
}
.step-detail-body p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}

@media (max-width: 900px) {
  .process-detail-grid { grid-template-columns: 1fr; }
  .process-detail { padding: 72px 0; }
}
@media (max-width: 560px) {
  .step-detail { padding: 24px; gap: 16px; }
  .step-detail-num { font-size: 36px; min-width: 44px; }
  .step-detail-body h4 { font-size: 20px; }
}

/* ==========================================================================
   UV Black Light + Moisture Meter Feature Section
   Standout dark section with a cool "UV glow" treatment.
   ========================================================================== */
.uv-feature {
  position: relative;
  padding: 104px 0;
  background: var(--navy-deep);
  color: var(--paper);
  overflow: hidden;
}
.uv-feature .container { position: relative; z-index: 2; }
.uv-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 50% 60% at 85% 30%, rgba(31, 168, 224, 0.22), transparent 60%),
    radial-gradient(ellipse 40% 50% at 15% 80%, rgba(139, 92, 246, 0.18), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(31, 168, 224, 0.08), transparent 60%);
  pointer-events: none;
}
/* Subtle dot pattern overlay */
.uv-feature::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

.uv-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}

.uv-title {
  color: var(--paper) !important;
  margin-bottom: 28px;
}
.uv-title em {
  color: var(--blue) !important;
  font-variation-settings: 'opsz' 144;
}

.uv-quote {
  position: relative;
  font-family: var(--f-display);
  font-size: 21px;
  line-height: 1.45;
  color: var(--paper);
  padding: 20px 0 20px 24px;
  border-left: 3px solid var(--blue);
  margin-bottom: 28px;
  font-variation-settings: 'opsz' 36;
}
.uv-quote cite {
  display: block;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.04em;
  color: var(--blue);
  margin-top: 12px;
  text-transform: uppercase;
}

.uv-body {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 36px;
  max-width: 540px;
}

/* Tool cards */
.uv-tools {
  display: grid;
  gap: 18px;
}
.uv-tool-card {
  position: relative;
  padding: 32px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all 0.3s var(--ease);
}
.uv-tool-card:hover {
  background: rgba(31, 168, 224, 0.08);
  border-color: rgba(31, 168, 224, 0.4);
  transform: translateY(-2px);
}
.uv-tool-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
  border-radius: 16px;
  color: var(--white);
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(31, 168, 224, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.uv-tool-card h4 {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin-bottom: 10px;
  font-variation-settings: 'opsz' 36;
}
.uv-tool-card p {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 960px) {
  .uv-grid { grid-template-columns: 1fr; gap: 40px; }
  .uv-feature { padding: 80px 0; }
  .uv-quote { font-size: 19px; }
}
@media (max-width: 560px) {
  .uv-feature { padding: 64px 0; }
  .uv-tool-card { padding: 24px; }
  .uv-tool-card h4 { font-size: 20px; }
  .uv-quote { font-size: 17.5px; padding: 16px 0 16px 18px; }
}

/* ==========================================================================
   Results / Full-Width Proof Image
   ========================================================================== */
.results-proof {
  padding: 96px 0;
  background: var(--paper-2);
}
.results-head {
  max-width: 780px;
  margin: 0 auto 48px;
  text-align: center;
}
.results-head .eyebrow { justify-content: center; }
.results-head .section-lead { margin: 20px auto 0; }

.results-figure {
  position: relative;
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.results-figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.results-figure figcaption {
  position: static;
  background: var(--navy);
  color: var(--paper);
  padding: 16px 24px 18px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
}

@media (max-width: 700px) {
  .results-proof { padding: 72px 0; }
  .results-figure { border-radius: var(--radius-lg); }
  .results-figure img { aspect-ratio: 4 / 3; }
  .results-figure figcaption { font-size: 13px; padding: 14px 20px 16px; }
}

/* ==========================================================================
   Commercial Carpet Cleaning Section
   ========================================================================== */
.commercial-section {
  padding: 96px 0;
  background: var(--paper);
}
.commercial-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 72px;
  align-items: center;
}
.commercial-copy .section-title { margin-bottom: 20px; }
.commercial-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 24px;
}
.commercial-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}
.commercial-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
}
.commercial-features li svg {
  flex-shrink: 0;
  color: var(--blue);
}

.commercial-visuals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 14px;
}
.commercial-visual {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--paper-3);
}
.commercial-visual-main { grid-column: 1 / -1; }
.commercial-visual-main img { aspect-ratio: 16 / 10; }
.commercial-visual:not(.commercial-visual-main) img { aspect-ratio: 3 / 4; }
.commercial-visual img {
  width: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out);
}
.commercial-visual:hover img { transform: scale(1.04); }
.commercial-visual figcaption {
  position: static;
  background: var(--navy);
  color: var(--paper);
  padding: 14px 18px 16px;
  font-size: 13px;
  line-height: 1.4;
}
.cv-label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 3px;
}

@media (max-width: 1000px) {
  .commercial-grid { grid-template-columns: 1fr; gap: 40px; }
  .commercial-section { padding: 72px 0; }
}
@media (max-width: 560px) {
  .commercial-features li { font-size: 14.5px; }
}

/* ==========================================================================
   Reveal-on-scroll additions for new sections
   Picked up by existing IntersectionObserver in script.js since we reuse
   the .reveal class pattern. These are added to the query selector list below.
   ========================================================================== */
/* (No CSS needed here — existing .reveal and .reveal.in classes cover it.
   script.js selectors are extended in the page-level reveal setup.) */

/* ==========================================================================
   UPHOLSTERY PAGE ADDITIONS
   New section styles for the upholstery page. All reuse existing tokens,
   fonts, and rhythm. Added after service-page additions.
   ========================================================================== */

/* ---- BA Split (pre-composed before/after image with overlay labels) ---- */
.ba-split {
  aspect-ratio: 1 / 1;
  max-width: 720px;
  margin: 0 auto;
}
.ba-split img { aspect-ratio: auto; height: 100%; }
.ba-overlay-label {
  position: absolute;
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 2;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.ba-overlay-before {
  top: 24px;
  left: 24px;
  background: rgba(10, 26, 47, 0.78);
  color: var(--paper);
}
.ba-overlay-after {
  bottom: 24px;
  right: 24px;
  background: rgba(31, 168, 224, 0.92);
  color: var(--white);
}

@media (max-width: 640px) {
  .ba-split { aspect-ratio: 1 / 1; }
  .ba-overlay-label { padding: 7px 14px; font-size: 10.5px; }
  .ba-overlay-before { top: 14px; left: 14px; }
  .ba-overlay-after { bottom: 14px; right: 14px; }
}

/* ==========================================================================
   Terry Towel Test (educational callout)
   ========================================================================== */
.terry-test {
  padding: 96px 0;
  background: var(--paper-2);
  position: relative;
}
.terry-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 56px 48px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
/* Decorative corner accent */
.terry-card::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(31, 168, 224, 0.1) 0%, transparent 70%);
  pointer-events: none;
}
.terry-copy {
  max-width: 700px;
  margin: 0 auto 48px;
  text-align: center;
  position: relative;
}
.terry-copy .eyebrow { justify-content: center; }
.terry-copy .section-title { margin-bottom: 20px; }
.terry-lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
}

.terry-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
}
.terry-step {
  padding: 28px 24px;
  background: var(--paper-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-soft);
  position: relative;
  transition: all 0.3s var(--ease);
}
.terry-step:hover {
  background: var(--white);
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.terry-step-num {
  display: inline-block;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: 1;
  color: var(--blue);
  margin-bottom: 14px;
  font-variation-settings: 'opsz' 144;
}
.terry-step h4 {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.2;
  font-variation-settings: 'opsz' 36;
}
.terry-step p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

.terry-footer {
  margin-top: 40px;
  text-align: center;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  position: relative;
}
.terry-footer p {
  font-size: 16px;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 960px) {
  .terry-steps { grid-template-columns: 1fr 1fr; }
  .terry-card { padding: 44px 32px; }
  .terry-test { padding: 72px 0; }
}
@media (max-width: 560px) {
  .terry-steps { grid-template-columns: 1fr; gap: 12px; }
  .terry-card { padding: 36px 24px; }
  .terry-step { padding: 22px 20px; }
}

/* ==========================================================================
   Fabrics Grid
   ========================================================================== */
.fabrics-section {
  padding: 96px 0;
  background: var(--paper);
}
.fabrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.fabric-card {
  padding: 28px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: all 0.3s var(--ease);
}
.fabric-card:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.fabric-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-light);
  color: var(--blue-dark);
  border-radius: 12px;
  margin-bottom: 18px;
  transition: all 0.3s var(--ease);
}
.fabric-card:hover .fabric-icon {
  background: var(--blue);
  color: var(--white);
}
.fabric-card h4 {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 8px;
  font-variation-settings: 'opsz' 36;
}
.fabric-card p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.fabrics-footer {
  margin-top: 40px;
  text-align: center;
  font-size: 15px;
  color: var(--ink-2);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px 24px;
  background: var(--paper-2);
  border-radius: var(--radius);
  border: 1px dashed var(--line);
}
.fabrics-footer strong { color: var(--ink); }

@media (max-width: 980px) {
  .fabrics-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .fabrics-section { padding: 72px 0; }
}
@media (max-width: 440px) {
  .fabrics-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Bonus step variant (optional step, distinct styling)
   ========================================================================== */
.step-detail-bonus {
  background: var(--paper-2);
  border-style: dashed;
}
.step-detail-bonus .step-detail-num {
  color: var(--navy);
  font-style: normal;
  font-size: 48px;
  font-weight: 400;
}
.link-arrow-sm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--blue-dark);
  margin-top: 4px;
  transition: color 0.2s var(--ease);
}
.link-arrow-sm:hover { color: var(--navy); }

/* ==========================================================================
   Fabric Protector Section
   ========================================================================== */
.protector-section {
  padding: 96px 0;
  background: var(--paper-2);
}
.protector-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 72px;
  align-items: center;
}
.protector-copy .section-title { margin-bottom: 20px; }
.protector-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 28px;
}
.protector-benefits {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}
.protector-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}
.protector-benefits li svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--blue);
  background: var(--blue-light);
  padding: 3px;
  border-radius: 50%;
  box-sizing: content-box;
}
.protector-note {
  font-size: 13.5px;
  color: var(--ink-3);
  font-style: italic;
  padding: 14px 16px;
  background: var(--white);
  border-radius: var(--radius);
  border-left: 3px solid var(--blue);
}

/* Feature card (right column) */
.protector-visual { display: flex; justify-content: center; }
.protector-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: 44px 32px 36px;
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--paper);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  text-align: center;
  overflow: hidden;
}
/* Subtle glow behind shield */
.protector-card::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(31, 168, 224, 0.25) 0%, transparent 65%);
  pointer-events: none;
}
.protector-shield {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
  border-radius: 24px;
  color: var(--white);
  box-shadow: 0 12px 32px rgba(31, 168, 224, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.protector-card h4 {
  position: relative;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 16px;
}
.protector-stat {
  position: relative;
  margin-bottom: 24px;
}
.protector-stat strong {
  display: block;
  font-family: var(--f-display);
  font-size: 56px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--paper);
  font-variation-settings: 'opsz' 144;
}
.protector-stat strong span {
  font-size: 22px;
  color: var(--blue);
  font-style: italic;
  margin-left: 4px;
}
.protector-stat > span {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
  margin-top: 8px;
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
}
.protector-droplets {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
  position: relative;
}
.droplet {
  width: 10px;
  height: 14px;
  background: var(--blue);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  opacity: 0.6;
  animation: droplet-pulse 3s ease-in-out infinite;
}
.droplet:nth-child(2) { animation-delay: 0.4s; }
.droplet:nth-child(3) { animation-delay: 0.8s; }
@keyframes droplet-pulse {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(-6px); opacity: 1; }
}
.protector-card-note {
  position: relative;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 1000px) {
  .protector-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 560px) {
  .protector-section { padding: 72px 0; }
  .protector-card { padding: 36px 24px 28px; }
  .protector-stat strong { font-size: 46px; }
}

/* ==========================================================================
   Related Services Cross-Link
   ========================================================================== */
.related-services {
  padding: 96px 0;
  background: var(--paper);
}
.related-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 20px;
  align-items: stretch;
}
.related-card {
  position: relative;
  padding: 40px 36px 36px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  transition: all 0.4s var(--ease-out);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.related-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

/* Featured card — richer treatment */
.related-card-feature {
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(31, 168, 224, 0.08), transparent 60%),
    linear-gradient(180deg, var(--white) 0%, var(--paper-2) 100%);
  border-color: var(--line);
}
.related-card-feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--navy) 100%);
}

/* Badge */
.related-badge {
  display: inline-block;
  padding: 5px 12px;
  background: var(--blue);
  color: var(--white);
  border-radius: 100px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 20px;
  align-self: flex-start;
}
.related-badge-simple {
  background: var(--paper-3);
  color: var(--ink-2);
}

.related-card h3 {
  font-family: var(--f-display);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 14px;
  font-variation-settings: 'opsz' 144;
}
.related-card-feature h3 { font-size: clamp(26px, 2.6vw, 32px); }
.related-card h3 em {
  font-style: italic;
  font-weight: 500;
  color: var(--navy);
  font-variation-settings: 'opsz' 144;
}
.related-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 20px;
  flex-grow: 1;
}

.related-features {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 24px;
}
.related-features li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 500;
}
.related-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 2px;
  background: var(--blue);
}

.related-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--navy);
  color: var(--paper);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 700;
  align-self: flex-start;
  transition: all 0.3s var(--ease);
  margin-top: auto;
}
.related-card:hover .related-cta {
  background: var(--blue);
  padding-right: 24px;
}
.related-card:hover .related-cta svg { transform: translateX(2px); }
.related-cta svg { transition: transform 0.3s var(--ease); }

.related-card-feature .related-cta {
  background: var(--blue);
  box-shadow: 0 4px 12px rgba(31, 168, 224, 0.35);
}
.related-card-feature:hover .related-cta {
  background: var(--blue-dark);
  box-shadow: 0 8px 20px rgba(31, 168, 224, 0.45);
}

@media (max-width: 900px) {
  .related-grid { grid-template-columns: 1fr; }
  .related-services { padding: 72px 0; }
}
@media (max-width: 560px) {
  .related-card { padding: 32px 26px 28px; }
}

/* ========== 3-COL RELATED GRID VARIANT ========== */
.related-grid-three {
  grid-template-columns: 1.3fr 1fr 1fr;
}
@media (max-width: 1100px) {
  .related-grid-three { grid-template-columns: 1fr 1fr; }
  .related-grid-three .related-card-feature { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .related-grid-three,
  .related-grid-three .related-card-feature { grid-template-columns: 1fr; grid-column: auto; }
  .related-grid-three { grid-template-columns: 1fr; }
}

/* ========== PET ODOR PAGE — TWO TREATMENTS ========== */
.treatments-section {
  padding: 96px 0;
  background: var(--paper-2);
}
.treatments-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 48px;
}
.treatment-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 36px 36px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.treatment-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.treatment-card-feature {
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: var(--paper);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}
.treatment-card-feature:hover {
  box-shadow: var(--shadow-xl);
}

.treatment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.treatment-tag {
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-3);
}
.treatment-card-feature .treatment-tag { color: rgba(255,255,255,0.6); }

.treatment-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.treatment-badge-topical {
  background: var(--blue-light);
  color: var(--blue-dark);
}
.treatment-badge-restoration {
  background: var(--blue);
  color: var(--paper);
}

.treatment-card h3 {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 36;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 14px;
}
.treatment-card-feature h3 { color: var(--paper); }

.treatment-lead {
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 24px;
}
.treatment-card-feature .treatment-lead { color: rgba(255,255,255,0.85); }

.treatment-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.treatment-card-feature .treatment-steps { border-top-color: rgba(255,255,255,0.15); }

.treatment-steps li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}
.treatment-card-feature .treatment-steps li { color: rgba(255,255,255,0.9); }

.treatment-step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-light);
  color: var(--blue-dark);
  font-weight: 700;
  font-size: 13px;
  margin-top: 1px;
}
.treatment-card-feature .treatment-step-num {
  background: rgba(31, 168, 224, 0.2);
  color: var(--blue);
}

.treatments-footer {
  text-align: center;
  margin-top: 44px;
  font-size: 16px;
  color: var(--ink-2);
}

@media (max-width: 900px) {
  .treatments-grid { grid-template-columns: 1fr; gap: 22px; }
  .treatments-section { padding: 72px 0; }
  .treatment-card { padding: 32px 28px 28px; }
  .treatment-card h3 { font-size: 26px; }
}
@media (max-width: 560px) {
  .treatment-header { flex-wrap: wrap; }
}

/* ========== UV BULLETS (pet odor page extension to .uv-feature) ========== */
.uv-bullets {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.uv-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: rgba(255,255,255,0.9);
  font-size: 15px;
  line-height: 1.5;
}
.uv-bullets li svg {
  flex-shrink: 0;
  stroke: var(--blue);
  margin-top: 3px;
}

/* ========== TILE PAGE — BEFORE/AFTER 2-UP GRID ========== */
.tile-ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 44px;
}
.tile-ba-figure {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
  background: var(--paper-3);
}
.tile-ba-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tile-ba-tag {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 8px 16px;
  border-radius: 100px;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tile-ba-tag-before {
  background: rgba(10, 26, 47, 0.82);
  color: var(--paper);
}
.tile-ba-tag-after {
  background: var(--blue);
  color: var(--paper);
  box-shadow: 0 4px 12px rgba(31, 168, 224, 0.35);
}
@media (max-width: 720px) {
  .tile-ba-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ========== TILE PAGE — SCOPE (What we clean / what we don't) ========== */
.scope-section {
  padding: 96px 0;
  background: var(--paper-2);
}
.scope-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 48px;
}
.scope-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 34px 32px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.scope-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.scope-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.scope-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-light);
  color: var(--blue-dark);
}
.scope-icon-no {
  background: #FEE7E1;
  color: #C2410C;
}
.scope-header h3 {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 36;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}
.scope-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.scope-list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
.scope-list li strong {
  color: var(--ink);
  font-weight: 700;
}
.scope-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 10px;
  height: 2px;
  background: var(--blue);
}
.scope-card-no .scope-list li::before {
  background: #F97316;
}
.scope-note {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-3);
}
@media (max-width: 900px) {
  .scope-grid { grid-template-columns: 1fr; gap: 22px; }
  .scope-section { padding: 72px 0; }
}

/* ========== TILE PAGE — SEALING VISUAL (below treatments-grid) ========== */
.sealing-visual {
  margin-top: 56px;
  display: flex;
  justify-content: center;
}
.sealing-figure {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 920px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--paper-3);
}
.sealing-figure img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.sealing-figure figcaption {
  position: static;
  background: var(--navy);
  color: var(--paper);
  padding: 16px 22px 18px;
  font-size: 14px;
  line-height: 1.45;
}
.sealing-figure .figcap-label {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 4px;
}
@media (max-width: 720px) {
  .sealing-visual { margin-top: 40px; }
  .sealing-figure figcaption { padding: 14px 18px 16px; font-size: 13px; }
}

/* ========== FAQ ACCORDION (tile page, reusable) ========== */
.faq-section {
  padding: 96px 0;
  background: var(--paper);
}
.faq-list {
  list-style: none;
  padding: 0;
  margin: 48px auto 0;
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.faq-item.open {
  border-color: var(--blue);
  box-shadow: 0 8px 24px rgba(13, 45, 92, 0.08);
}
.faq-question {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: 'Manrope', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: color 0.2s var(--ease);
}
.faq-question:hover { color: var(--blue); }
.faq-question:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}
.faq-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
  color: var(--ink-2);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.faq-item.open .faq-icon {
  transform: rotate(180deg);
  background: var(--blue);
  color: var(--paper);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease);
}
.faq-item.open .faq-answer {
  max-height: 600px;
}
.faq-answer p {
  padding: 0 24px 24px;
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.65;
}
@media (max-width: 640px) {
  .faq-section { padding: 72px 0; }
  .faq-question { padding: 18px 20px; font-size: 16px; }
  .faq-answer p { padding: 0 20px 20px; font-size: 14.5px; }
}

/* ========== BOOK-QUOTE PAGE ========== */
.quote-page-hero {
  padding: 72px 0 48px;
  background: linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%);
}
.quote-page-inner { max-width: 880px; }
.quote-page-head { margin-top: 12px; }
.quote-page-title {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 144;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 14px 0 18px;
}
.quote-page-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--blue);
}
.quote-page-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 24px;
  max-width: 720px;
}
.quote-page-assurances {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
}
.quote-page-assurances li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.quote-page-assurances li svg { flex-shrink: 0; }

.quote-form-section {
  padding: 32px 0 96px;
  background: var(--paper);
}
.quote-form-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px;
  align-items: start;
}
.quote-form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-lg);
  min-height: 480px;
}
.quote-form-placeholder {
  text-align: center;
  padding: 48px 24px;
  color: var(--ink-3);
}
.quote-form-placeholder-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: var(--blue-light);
  color: var(--blue-dark);
  margin-bottom: 18px;
}
.quote-form-placeholder h3 {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 36;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 10px;
}
.quote-form-placeholder p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

.quote-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 120px;
}
.quote-sidebar-card {
  background: var(--navy);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  box-shadow: var(--shadow-lg);
}
.quote-sidebar-card h4 {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 36;
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 8px;
}
.quote-sidebar-card p {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  margin: 0 0 16px;
}
.quote-sidebar-card .btn-primary.btn-block { margin-bottom: 20px; }
.quote-sidebar-meta {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.quote-sidebar-meta li {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.88);
}
.quote-sidebar-label {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 3px;
}
.quote-sidebar-trust {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px 24px 22px;
  text-align: center;
}
.quote-sidebar-stars {
  display: inline-flex;
  gap: 2px;
  margin-bottom: 10px;
}
.quote-sidebar-trust strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.quote-sidebar-trust p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0;
}

@media (max-width: 960px) {
  .quote-form-container { grid-template-columns: 1fr; }
  .quote-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .quote-sidebar > * { flex: 1 1 280px; }
  .quote-form-card { padding: 32px 26px; }
  .quote-page-hero { padding: 56px 0 36px; }
}
@media (max-width: 560px) {
  .quote-form-card { padding: 28px 22px; min-height: 0; }
  .quote-form-placeholder { padding: 36px 12px; }
}

/* --- Visually-hidden helper for Formidable's sr-only elements ---
   Formidable ships this class on form titles, legends, and other elements
   that should be announced by screen readers but not rendered as visible
   text. Formidable's own stylesheet provides the hiding rule; when Formidable
   styling is disabled globally (Formidable → Global Settings → Styling),
   that rule disappears and sr-only text starts showing. Re-add it here. */
.frm_screen_reader {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ========== FORMIDABLE FORMS OVERRIDES ==========
   These styles target Formidable's default class names to make embedded
   forms match the site's visual language. Two contexts:

     1. .hero-card (short hero form) — uses the existing .quote-form
        patterns; keeps the big .btn-primary pill submit button.

     2. Long forms — shared by book-quote (form id=3) and job-application
        (form id=2). Both render in a card with lots of inputs, radios,
        and checkboxes, and both want the compact multi-step button
        treatment. Implemented via the selector list
        :is(#book-quote-form, #job-application-form) so future long-form
        IDs can be added with one edit.
   Verify and refine against rendered DOM once the Formidable shortcodes
   are actually placed. */

/* --- Shared Formidable field styling (both contexts) --- */
.hero-card .frm_form_fields,
:is(#book-quote-form, #job-application-form) .frm_form_fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hero-card .frm_form_fields .frm_section_heading,
:is(#book-quote-form, #job-application-form) .frm_form_fields .frm_section_heading {
  margin: 0;
}
.hero-card .frm_primary_label,
:is(#book-quote-form, #job-application-form) .frm_primary_label {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.hero-card .frm_required,
:is(#book-quote-form, #job-application-form) .frm_required {
  color: var(--blue);
  margin-left: 2px;
}
.hero-card input[type="text"],
.hero-card input[type="email"],
.hero-card input[type="tel"],
.hero-card input[type="number"],
.hero-card input[type="url"],
.hero-card select,
.hero-card textarea,
:is(#book-quote-form, #job-application-form) input[type="text"],
:is(#book-quote-form, #job-application-form) input[type="email"],
:is(#book-quote-form, #job-application-form) input[type="tel"],
:is(#book-quote-form, #job-application-form) input[type="number"],
:is(#book-quote-form, #job-application-form) input[type="url"],
:is(#book-quote-form, #job-application-form) select,
:is(#book-quote-form, #job-application-form) textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.hero-card input:focus,
.hero-card select:focus,
.hero-card textarea:focus,
:is(#book-quote-form, #job-application-form) input:focus,
:is(#book-quote-form, #job-application-form) select:focus,
:is(#book-quote-form, #job-application-form) textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(31, 168, 224, 0.18);
}
.hero-card textarea,
:is(#book-quote-form, #job-application-form) textarea {
  min-height: 110px;
  resize: vertical;
}

/* --- Radio / checkbox styling (book-quote long form primarily) ---

   Formidable renders each option as:
     <div class="frm_radio">
       <input type="radio" id="field_x-0" ...>
       <label for="field_x-0">Option</label>
     </div>

   The <label for> makes the label text click-toggle the input natively, but
   the card's padding area outside the label isn't clickable. To make the
   ENTIRE card clickable, we give .frm_radio position: relative and add a
   transparent ::before overlay on the label that covers the whole card.
   Clicks anywhere inside the card hit the label's pseudo → browser's native
   label→input behavior toggles the input. No JS needed.  */
:is(#book-quote-form, #job-application-form) .frm_radio,
:is(#book-quote-form, #job-application-form) .frm_checkbox {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  font-size: 15px;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
  margin-bottom: 8px;
}
:is(#book-quote-form, #job-application-form) .frm_radio:hover,
:is(#book-quote-form, #job-application-form) .frm_checkbox:hover {
  border-color: var(--blue);
  background: var(--paper-2);
}
:is(#book-quote-form, #job-application-form) .frm_radio input[type="radio"],
:is(#book-quote-form, #job-application-form) .frm_checkbox input[type="checkbox"] {
  accent-color: var(--blue);
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
}
:is(#book-quote-form, #job-application-form) .frm_radio label,
:is(#book-quote-form, #job-application-form) .frm_checkbox label {
  flex: 1;
  cursor: pointer;
  margin: 0;
}
:is(#book-quote-form, #job-application-form) .frm_radio label::before,
:is(#book-quote-form, #job-application-form) .frm_checkbox label::before {
  content: '';
  position: absolute;
  inset: 0;
  cursor: pointer;
}
:is(#book-quote-form, #job-application-form) .frm_radio input[type="radio"]:focus-visible,
:is(#book-quote-form, #job-application-form) .frm_checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* --- Progress indicator (multi-step book-quote form) --- */
:is(#book-quote-form, #job-application-form) .frm_pagination_cont,
:is(#book-quote-form, #job-application-form) .frm_progress_bar_container {
  margin-bottom: 28px;
}
:is(#book-quote-form, #job-application-form) .frm_progress_line {
  height: 6px;
  background: var(--paper-3);
  border-radius: 100px;
  overflow: hidden;
}
:is(#book-quote-form, #job-application-form) .frm_progress_bar {
  height: 100%;
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue-dark) 100%);
  border-radius: 100px;
  transition: width 0.4s var(--ease);
}
:is(#book-quote-form, #job-application-form) .frm_rootline,
:is(#book-quote-form, #job-application-form) .frm_rootline_single {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* --- Hero form submit: mirror .btn-primary.btn-block exactly so the
       rendered Formidable button matches the mockup (pill shape, two-layer
       shadow with solid bottom shelf, hover lift). --- */
.hero-card .frm_button_submit,
.hero-card .frm_submit button,
.hero-card .frm_submit input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 24px;
  border: 2px solid transparent;
  border-radius: 100px;
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--white);
  background: var(--blue);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 0 var(--blue-dark), 0 4px 12px rgba(31, 168, 224, 0.35);
  transition: all 0.3s var(--ease-out);
}
.hero-card .frm_button_submit:hover,
.hero-card .frm_submit button:hover,
.hero-card .frm_submit input[type="submit"]:hover {
  background: var(--blue-dark);
  transform: translateY(-1px);
  box-shadow: 0 3px 0 var(--blue-dark), 0 8px 20px rgba(31, 168, 224, 0.45);
}
.hero-card .frm_button_submit:active,
.hero-card .frm_submit button:active,
.hero-card .frm_submit input[type="submit"]:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--blue-dark);
}

/* --- Book-quote form prev/next/submit: SMALLER buttons --- */
:is(#book-quote-form, #job-application-form) .frm_submit {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
:is(#book-quote-form, #job-application-form) .frm_prev_page,
:is(#book-quote-form, #job-application-form) .frm_next_page,
:is(#book-quote-form, #job-application-form) .frm_button_submit,
:is(#book-quote-form, #job-application-form) .frm_submit button,
:is(#book-quote-form, #job-application-form) .frm_submit input[type="submit"] {
  width: auto;                       /* override any Formidable default that stretches to 100% */
  padding: 10px 18px;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}

/* Multi-step form — smaller buttons on phones so Prev / Next / Submit
   fit comfortably in a row and don't balloon on narrow screens.  */
@media (max-width: 640px) {
  :is(#book-quote-form, #job-application-form) .frm_submit {
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
  }
  :is(#book-quote-form, #job-application-form) .frm_prev_page,
  :is(#book-quote-form, #job-application-form) .frm_next_page,
  :is(#book-quote-form, #job-application-form) .frm_button_submit,
  :is(#book-quote-form, #job-application-form) .frm_submit button,
  :is(#book-quote-form, #job-application-form) .frm_submit input[type="submit"] {
    padding: 9px 14px;
    font-size: 13px;
    border-radius: 8px;
  }
}
:is(#book-quote-form, #job-application-form) .frm_prev_page {
  background: transparent;
  color: var(--ink-3);
  border: 1px solid var(--line);
}
:is(#book-quote-form, #job-application-form) .frm_prev_page:hover {
  background: var(--paper-2);
  color: var(--ink);
}
:is(#book-quote-form, #job-application-form) .frm_next_page,
:is(#book-quote-form, #job-application-form) .frm_button_submit,
:is(#book-quote-form, #job-application-form) .frm_submit button,
:is(#book-quote-form, #job-application-form) .frm_submit input[type="submit"] {
  background: var(--blue);
  color: var(--paper);
  box-shadow: 0 4px 10px rgba(31, 168, 224, 0.24);
}
:is(#book-quote-form, #job-application-form) .frm_next_page:hover,
:is(#book-quote-form, #job-application-form) .frm_button_submit:hover,
:is(#book-quote-form, #job-application-form) .frm_submit button:hover,
:is(#book-quote-form, #job-application-form) .frm_submit input[type="submit"]:hover {
  background: var(--blue-dark);
  transform: translateY(-1px);
}

/* --- Error / success messages --- */
.hero-card .frm_error,
:is(#book-quote-form, #job-application-form) .frm_error,
.hero-card .frm_error_style,
:is(#book-quote-form, #job-application-form) .frm_error_style {
  color: #C2410C;
  font-size: 13px;
  margin-top: 4px;
}
.hero-card .frm_message,
:is(#book-quote-form, #job-application-form) .frm_message,
.hero-card .frm_success_style,
:is(#book-quote-form, #job-application-form) .frm_success_style {
  padding: 14px 18px;
  background: var(--blue-light);
  color: var(--navy);
  border-radius: 10px;
  font-size: 14.5px;
  line-height: 1.5;
}

/* --- Active-state pill on header CTA when on book-quote page --- */
.btn-header-active {
  background: var(--blue-dark);
  box-shadow: 0 4px 12px rgba(31, 168, 224, 0.28);
}

/* ========== REVIEWS PAGE ==========
   Dedicated reviews page chrome + masonry card grid.
   The .review-feature-card structure is shortcode-ready — the BrightLocal
   plugin renders the same HTML so cards stay visually consistent.
*/
.reviews-page-hero {
  padding: 72px 0 56px;
  background: linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%);
}
.reviews-page-hero-inner { max-width: 960px; }
.reviews-page-head { margin-top: 12px; }
.reviews-page-title {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 144;
  font-size: clamp(38px, 5.4vw, 62px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 14px 0 18px;
}
.reviews-page-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--blue);
}
.reviews-page-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 28px;
  max-width: 720px;
}
.reviews-page-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px 36px;
  padding: 24px 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 28px;
}
.reviews-page-rating {
  display: flex;
  align-items: center;
  gap: 18px;
}
.reviews-page-stars {
  display: inline-flex;
  gap: 2px;
}
.reviews-page-score strong {
  display: block;
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 144;
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
}
.reviews-page-score span {
  display: block;
  font-size: 13px;
  color: var(--ink-3);
  font-weight: 500;
  letter-spacing: 0.3px;
  margin-top: 2px;
}
.reviews-page-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-left: 28px;
  border-left: 1px solid var(--line);
}
.reviews-page-source-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--paper-2);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}
.reviews-page-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

@media (max-width: 760px) {
  .reviews-page-hero { padding: 56px 0 40px; }
  .reviews-page-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 22px;
  }
  .reviews-page-sources {
    padding-left: 0;
    border-left: 0;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    width: 100%;
  }
}
@media (max-width: 560px) {
  .reviews-page-cta { flex-direction: column; gap: 10px; }
  .reviews-page-cta .btn-lg {
    width: 100%;
    justify-content: center;
  }
}

/* --- Reviews grid section --- */
.reviews-page-section {
  padding: 72px 0 96px;
  background: var(--paper);
}
.reviews-page-grid {
  column-count: 3;
  column-gap: 22px;
  margin-top: 48px;
}
@media (max-width: 1000px) {
  .reviews-page-grid { column-count: 2; }
}
@media (max-width: 640px) {
  .reviews-page-grid { column-count: 1; }
}

/* --- Individual review feature card (masonry item) --- */
.review-feature-card {
  display: inline-block;
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px 24px 22px;
  margin: 0 0 22px;
  box-shadow: var(--shadow-sm);
  break-inside: avoid;
  page-break-inside: avoid;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.review-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--blue-light);
}

.review-feature-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.review-feature-source {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: var(--paper-2);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--ink-2);
}
.review-feature-source svg { flex-shrink: 0; }
.review-feature-source-google { background: #EAF2FE; color: #1967D2; }
.review-feature-source-facebook { background: #E7F0FE; color: #1877F2; }
.review-feature-source-yahoo { background: #EFE4F7; color: #5F01D1; }
.review-feature-stars {
  display: inline-flex;
  gap: 1px;
  flex-shrink: 0;
}

.review-feature-body {
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 20px;
  padding: 0;
  quotes: '"' '"' "'" "'";
}
.review-feature-body::before { content: none; }

.review-feature-foot {
  display: flex;
  align-items: center;
  gap: 12px;
}
.review-feature-avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
}
.review-feature-person {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.review-feature-person strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.review-feature-person time {
  font-size: 12.5px;
  color: var(--ink-3);
  font-weight: 500;
}

.reviews-page-footer {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.6;
}
.reviews-page-footer p { margin: 0 0 14px; }
.reviews-page-footer strong { color: var(--ink); }

/* ========== INTRO FIGURE — TOP-ANCHORED CROP ==========
   For portrait-oriented photos (like the Scott family shot on the About page)
   where the subject's heads sit at the top of the frame. Default .intro-figure
   crops center-center, which can lop off heads when the aspect ratio shifts
   on mobile. Add .intro-figure-top to preserve the top of the image.
*/
.intro-figure-top img {
  object-position: center top;
}

/* (Former .intro-figure-caption-below and .results-figure-caption-below
   modifier classes were removed — their behavior is now the default for
   .intro-figure and .results-figure. Decorative figure captions render
   as a navy strip below the image site-wide.) */

/* ========== ABOUT PAGE — LOREM PLACEHOLDER HINT ==========
   Tiny visual cue on the About page's draft paragraphs so Phillip can see
   at a glance where to fill in his own story.
*/
.intro-body-placeholder {
  color: var(--ink-4);
  border-left: 2px dashed var(--line);
  padding-left: 14px;
}
.intro-body-placeholder em {
  font-style: italic;
}

/* ========== INLINE PROSE LINK UTILITY ==========
   Apply to <a> elements inside body copy that cross-reference other pages.
   Gives the anchor a visible affordance since the global `a` rule strips
   color/underline. Example:
     <a href="oriental-rug-cleaning.html" class="text-link">oriental rugs</a>
*/
.text-link {
  color: var(--blue-dark);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  transition: color 0.2s var(--ease);
}
.text-link:hover { color: var(--navy); }

/* ========== ORIENTAL RUG PAGE — VIDEO EMBEDS ========== */
.rug-video-section {
  padding: 96px 0;
  background: var(--paper);
}
.rug-video-wrap {
  max-width: 960px;
  margin: 48px auto 0;
}
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  background: var(--navy-deep);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ========== ORIENTAL RUG PAGE — FACILITY BANNER ========== */
.facility-banner {
  position: relative;
  padding: 112px 0;
  overflow: hidden;
  color: var(--paper);
  isolation: isolate;
}
.facility-banner-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.facility-banner-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(5, 24, 51, 0.92) 0%, rgba(5, 24, 51, 0.78) 45%, rgba(5, 24, 51, 0.55) 100%);
}
.facility-banner-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.facility-banner-inner {
  max-width: 760px;
}
.facility-banner-title {
  color: var(--paper);
  margin: 14px 0 22px;
}
.facility-banner-title em { color: var(--blue); }
.facility-banner-lead {
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 28px;
}
.facility-banner-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.facility-banner-points li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
}
.facility-banner-points li svg {
  flex-shrink: 0;
  stroke: var(--blue);
  background: rgba(31, 168, 224, 0.15);
  padding: 4px;
  border-radius: 50%;
  box-sizing: content-box;
}
@media (max-width: 720px) {
  .facility-banner { padding: 80px 0; }
  .facility-banner-lead { font-size: 16px; }
}

/* ========== ORIENTAL RUG PAGE — PET URINE + VIDEO 2 ========== */
.rug-pet-section {
  padding: 96px 0;
  background: var(--paper-2);
}
.rug-pet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.rug-pet-copy .section-title { margin-bottom: 18px; }
.rug-pet-lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 24px;
}
.rug-pet-lead a { color: var(--blue-dark); font-weight: 600; }
.rug-pet-lead a:hover { color: var(--navy); text-decoration: underline; }
.rug-pet-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rug-pet-points li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.rug-pet-points li svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--blue);
  background: var(--blue-light);
  padding: 4px;
  border-radius: 50%;
  box-sizing: content-box;
}
.rug-pet-points li strong {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.rug-pet-points li span {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.rug-pet-video .video-embed {
  box-shadow: var(--shadow-lg);
}
.rug-pet-video-caption {
  margin-top: 14px;
  padding: 10px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--ink-2);
  font-weight: 500;
}
.rug-pet-video-caption .figcap-label {
  display: inline-block;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blue);
  margin-right: 8px;
}
@media (max-width: 960px) {
  .rug-pet-grid { grid-template-columns: 1fr; gap: 40px; }
  .rug-pet-section { padding: 72px 0; }
}

/* ========== ORIENTAL RUG PAGE — PICKUP & DELIVERY ========== */
.pickup-section {
  padding: 96px 0;
  background: var(--paper);
}
.pickup-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 28px;
}
.pickup-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 36px 36px;
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 24px;
  align-items: flex-start;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.pickup-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.pickup-card-feature {
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: var(--paper);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}
.pickup-card-feature:hover {
  box-shadow: var(--shadow-xl);
}
.pickup-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-light);
  color: var(--blue-dark);
}
.pickup-card-feature .pickup-icon {
  background: rgba(31, 168, 224, 0.2);
  color: var(--blue);
}
.pickup-body { flex: 1; min-width: 0; }
.pickup-tag {
  display: inline-block;
  padding: 4px 12px;
  background: var(--blue);
  color: var(--paper);
  border-radius: 100px;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 12px;
  box-shadow: 0 4px 10px rgba(31, 168, 224, 0.35);
}
.pickup-body h3 {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 36;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 12px;
}
.pickup-body h3 em { font-style: italic; color: var(--blue); }
.pickup-card-feature .pickup-body h3 { color: var(--paper); }
.pickup-card-feature .pickup-body h3 em { color: var(--blue); }
.pickup-body p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 18px;
}
.pickup-card-feature .pickup-body p { color: rgba(255, 255, 255, 0.85); }
.pickup-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pickup-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.pickup-card-feature .pickup-points li { color: rgba(255, 255, 255, 0.9); }
.pickup-points li svg {
  flex-shrink: 0;
  stroke: var(--blue);
  margin-top: 3px;
}
@media (max-width: 960px) {
  .pickup-grid { grid-template-columns: 1fr; }
  .pickup-section { padding: 72px 0; }
}
@media (max-width: 560px) {
  .pickup-card { flex-direction: column; gap: 16px; padding: 32px 26px 28px; }
  .pickup-body h3 { font-size: 24px; }
}

/* ==========================================================================
   ≤560px — Sitewide center alignment
   Text, pills, buttons, card contents, and inline links all center on phones.
   ========================================================================== */
@media (max-width: 560px) {
  /* Section heads */
  .section-head,
  .section-title,
  .section-lead {
    text-align: center;
  }
  .section-head { margin-left: auto; margin-right: auto; }
  .eyebrow,
  .eyebrow-light {
    justify-content: center;
  }

  /* Hero */
  .hero-content { text-align: center; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-badge { margin-left: auto; margin-right: auto; }
  .hero-features { align-items: center; }
  .hero-features li { justify-content: center; }

  /* Card bodies / content containers — center text + children */
  .service-body,
  .review-card,
  .why-item,
  .step,
  .step-detail,
  .treatment-card,
  .treatment-header,
  .fabric-card,
  .related-card,
  .pickup-card,
  .pickup-body,
  .uv-tool-card,
  .scope-card,
  .scope-header,
  .terry-card,
  .terry-copy {
    text-align: center;
  }

  /* Copy containers for full-width sections */
  .intro-copy,
  .care-copy,
  .uv-copy,
  .rug-pet-copy,
  .protector-copy,
  .commercial-copy,
  .why-copy,
  .guarantee-copy,
  .final-cta-copy,
  .areas-copy,
  .quote-page-head,
  .quote-sidebar-card,
  .facility-banner-inner {
    text-align: center;
  }

  /* Inline links (read more / arrow links) — center */
  .link-arrow,
  .link-arrow-sm,
  .service-link,
  .related-cta,
  .text-link {
    justify-content: center;
  }

  /* Inline-flex / inline-block pills & badges — horizontally centered */
  .hero-card-tag,
  .service-tag,
  .treatment-badge,
  .treatment-badge-topical,
  .treatment-badge-restoration,
  .treatment-tag,
  .related-badge,
  .related-badge-simple,
  .related-badge-feature,
  .pickup-tag,
  .figcap-label,
  .cv-label,
  .ba-tag-before,
  .ba-tag-after,
  .tile-ba-tag-before,
  .tile-ba-tag-after {
    margin-left: auto;
    margin-right: auto;
  }

  /* Star rows & review meta */
  .stars,
  .review-stars,
  .reviews-rating { justify-content: center; }
  .review-meta {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }

  /* Buttons inside centered copy containers — center the button itself */
  .intro-copy .btn-primary,
  .intro-copy .btn-secondary,
  .care-copy .btn-primary,
  .care-copy .btn-secondary,
  .commercial-copy .btn-primary,
  .commercial-copy .btn-secondary,
  .areas-copy .btn-primary,
  .why-copy .btn-primary,
  .guarantee-copy .btn-primary,
  .quote-sidebar-card .btn-primary {
    margin-left: auto;
    margin-right: auto;
  }

  /* Features / checklists inside centered sections */
  .care-list,
  .protector-benefits,
  .commercial-features,
  .quote-page-assurances,
  .uv-bullets,
  .rug-pet-points,
  .facility-banner-points,
  .scope-list,
  .pickup-points,
  .protector-note,
  .terry-footer {
    text-align: center;
  }
  .care-list li,
  .protector-benefits li,
  .commercial-features li,
  .quote-page-assurances li,
  .uv-bullets li,
  .rug-pet-points li,
  .facility-banner-points li,
  .scope-list li,
  .pickup-points li {
    justify-content: center;
  }

  /* Breadcrumbs centered on service pages */
  .breadcrumbs { justify-content: center; }

  /* Step/process numbers — center the block + its content */
  .step,
  .step-detail {
    align-items: center;
  }
  .step-num,
  .step-detail-num,
  .why-num,
  .treatment-step-num,
  .terry-step-num {
    margin-left: auto;
    margin-right: auto;
  }

  /* Stats */
  .intro-stats,
  .intro-stat { text-align: center; }
}

/* ==========================================================================
   Global list reset — kills the default padding-inline-start that
   GeneratePress/WP reintroduce (the * { padding:0 } universal reset
   loses to the parent theme's more specific .entry-content ul rules,
   which was producing indented footer columns, mobile nav, etc.).
   ========================================================================== */
ul, ol { list-style: none; padding: 0; margin: 0; }
.nav.open ul,
.nav.open ul ul,
.footer-col ul,
.footer-areas,
.footer-contact { padding-inline-start: 0; margin-inline-start: 0; }

/* ==========================================================================
   Mobile/tablet alignment cleanups — targeted overrides for symptoms
   reported during QA of the city × service pages:
     - process step cards on mobile showing number on left / body on right
     - UV tool card icons left-aligned under centered text
     - "5.0 on Google" review pill left-aligned
     - areas-list cards visually biased right (invisible hover arrow
       was reserving flex space via justify-content: space-between)
     - rug-type / fabric card icons left-aligned
     - commercial-visuals not-main photo taking half width on mobile
   ========================================================================== */
@media (max-width: 768px) {
	/* Process step cards — stack the number above the body copy. The desktop
	   layout is horizontal (number beside text); on mobile it reads better
	   as number-on-top. */
	.step-detail {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 12px;
	}
	.step-detail-num {
		margin: 0 auto;
		min-width: 0;
	}

	/* UV tool cards — icon is a 60x60 block; center it under the centered text. */
	.uv-tool-icon {
		margin-left: auto;
		margin-right: auto;
	}

	/* Fabric / rug-type cards — 44x44 icon block, same treatment. */
	.fabric-icon {
		margin-left: auto;
		margin-right: auto;
	}

	/* Reviews header pill ("5.0 on Google") — center the inline-flex
	   rating block inside its summary container. The existing rule
	   justifies content INSIDE the pill, not the pill itself. */
	.reviews-summary {
		display: flex;
		justify-content: center;
		width: 100%;
	}

	/* Areas list cards — center the city name in each cell. The desktop
	   `justify-content: space-between` reserves room for a slide-in arrow
	   that doesn't appear on touch devices, producing a right-biased feel. */
	.areas-list a {
		justify-content: center;
	}
	.areas-list a::after {
		display: none;
	}
	.areas-list li:hover a {
		padding-left: 18px;  /* cancel the desktop-hover shift on touch */
	}
	.areas-list li.current > span {
		justify-content: center;
	}

	/* Commercial visuals — on mobile, the grid stacks; the secondary photo
	   (no .commercial-visual-main class) was keeping its 1fr column width
	   of the 2-col grid and rendering at half container width. Force full
	   width once we stack. */
	.commercial-visuals {
		grid-template-columns: 1fr;
	}
	.commercial-visual:not(.commercial-visual-main) img {
		aspect-ratio: 16 / 10;
	}

	/* Treatment steps (numbered bubble + text) — center the flex row as a
	   unit so the bubble visually anchors under the centered copy above. */
	.treatment-steps li {
		justify-content: center;
		text-align: left;  /* keep the step text readable, don't force center per word */
	}
}