/* ============================================
   HomeAccess4U — Design System & Stylesheet
   ============================================ */

/* --- CSS Custom Properties (Design Tokens) --- */
:root {
  /* Colors — Patriotic but modern */
  --color-navy: #1B365D;
  --color-navy-dark: #0F2440;
  --color-navy-light: #2A4A7F;
  --color-red: #C41E3A;
  --color-red-dark: #9E1830;
  --color-red-light: #E8344F;
  --color-gold: #D4A843;
  --color-gold-light: #F0CC6B;
  --color-white: #FFFFFF;
  --color-off-white: #F8F9FA;
  --color-light-gray: #E9ECEF;
  --color-mid-gray: #6C757D;
  --color-dark-gray: #495057;
  --color-text: #2D3748;
  --color-text-light: #718096;
  --color-text-on-dark: #E2E8F0;
  --color-success: #28A745;
  --color-info: #17A2B8;

  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;

  /* Font Sizes — larger for elderly accessibility */
  --text-xs: 0.875rem;
  --text-sm: 1rem;
  --text-base: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 3.75rem;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  /* Layout */
  --max-width: 1280px;
  --max-width-narrow: 960px;
  --border-radius: 8px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.15);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* --- CSS Reset & Base --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: var(--color-navy);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-red);
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-navy);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p {
  margin-bottom: var(--space-sm);
  font-size: var(--text-base);
}

/* --- Utility Classes --- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

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

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

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

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

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

.section--red {
  background: linear-gradient(135deg, var(--color-red), var(--color-red-dark));
  color: var(--color-white);
}

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

.section-label {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-red);
  margin-bottom: var(--space-sm);
}

.section--dark .section-label,
.section--red .section-label {
  color: var(--color-gold);
}

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

.section-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-light);
  max-width: 680px;
  line-height: 1.6;
}

.section--dark .section-subtitle {
  color: var(--color-text-on-dark);
}

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

.text-center .section-subtitle {
  margin-left: auto;
  margin-right: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: 600;
  border: 2px solid transparent;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
}

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

.btn--primary:hover {
  background-color: var(--color-red-dark);
  border-color: var(--color-red-dark);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

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

.btn--secondary:hover {
  background-color: var(--color-navy);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

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

.btn--outline-white:hover {
  background-color: var(--color-white);
  color: var(--color-navy);
  transform: translateY(-2px);
}

.btn--lg {
  padding: 1.25rem 2.5rem;
  font-size: var(--text-lg);
}

.btn--sm {
  padding: 0.625rem 1.25rem;
  font-size: var(--text-sm);
}

.btn-group {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* --- Top Bar --- */
.top-bar {
  background-color: var(--color-navy-dark);
  padding: 0.5rem 0;
  font-size: var(--text-xs);
  color: var(--color-text-on-dark);
}

.top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-bar__info {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
}

.top-bar__info span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.top-bar__info a {
  color: var(--color-text-on-dark);
}

.top-bar__info a:hover {
  color: var(--color-gold);
}

.top-bar__cta {
  font-weight: 600;
  color: var(--color-gold);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* --- Header/Nav --- */
.header {
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: box-shadow var(--transition-base);
}

.header.scrolled {
  box-shadow: var(--shadow-md);
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  max-width: 1440px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: var(--space-lg);
}

.logo__icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--color-navy), var(--color-navy-light));
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 1.5rem;
}

.logo__text {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-navy);
  line-height: 1.1;
}

.logo__text span {
  color: var(--color-red);
}

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

.nav__links {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.nav__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  padding: 0.5rem 0;
  position: relative;
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-red);
  transition: width var(--transition-base);
}

.nav__link:hover,
.nav__link.active {
  color: var(--color-red);
}

.nav__link:hover::after,
.nav__link.active::after {
  width: 100%;
}

.nav__phone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-navy);
  text-decoration: none;
  margin-left: var(--space-sm);
  white-space: nowrap;
}

.nav__phone:hover {
  color: var(--color-red);
}

.nav__phone svg {
  color: var(--color-red);
}

/* Mobile menu toggle */
.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.mobile-toggle span {
  display: block;
  width: 28px;
  height: 3px;
  background-color: var(--color-navy);
  border-radius: 2px;
  transition: all var(--transition-base);
}

.mobile-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.mobile-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* --- Hero Section --- */
.hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(15, 36, 64, 0.92) 0%,
    rgba(27, 54, 93, 0.75) 50%,
    rgba(27, 54, 93, 0.5) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  color: var(--color-white);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 0.5rem 1.25rem;
  border-radius: 50px;
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: var(--space-lg);
  color: var(--color-white);
}

.hero__badge svg {
  color: var(--color-gold);
}

.hero__title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  color: var(--color-white);
  margin-bottom: var(--space-md);
  line-height: 1.1;
}

.hero__title em {
  font-style: normal;
  color: var(--color-gold);
}

.hero__description {
  font-size: var(--text-lg);
  line-height: 1.7;
  color: rgba(255,255,255,0.9);
  margin-bottom: var(--space-xl);
  max-width: 560px;
}

.hero__stats {
  display: flex;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(255,255,255,0.2);
}

.hero__stat-value {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--color-gold);
  display: block;
}

.hero__stat-label {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.75);
  margin-top: 0.25rem;
}

/* --- Floating Phone CTA (mobile) --- */
.floating-cta {
  display: none;
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 999;
  background: var(--color-red);
  color: var(--color-white);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-xl);
  text-decoration: none;
  animation: pulse-ring 2s ease infinite;
}

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(196, 30, 58, 0.5); }
  70% { box-shadow: 0 0 0 15px rgba(196, 30, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(196, 30, 58, 0); }
}

.floating-cta svg {
  width: 28px;
  height: 28px;
}

/* --- Trust Ticker Bar --- */
.trust-ticker {
  background: var(--color-off-white);
  border-bottom: 1px solid var(--color-light-gray);
  overflow: hidden;
  padding: var(--space-md) 0;
  position: relative;
}

/* Fade edges for sleek look */
.trust-ticker::before,
.trust-ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.trust-ticker::before {
  left: 0;
  background: linear-gradient(to right, var(--color-off-white), transparent);
}

.trust-ticker::after {
  right: 0;
  background: linear-gradient(to left, var(--color-off-white), transparent);
}

@keyframes tickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-25%); }
}

.trust-ticker__track {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  width: max-content;
  animation: tickerScroll 30s linear infinite;
}

.trust-ticker:hover .trust-ticker__track {
  animation-play-state: paused;
}

.trust-ticker__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-navy);
  white-space: nowrap;
  flex-shrink: 0;
}

.trust-ticker__item svg {
  color: var(--color-red);
  flex-shrink: 0;
}

.trust-ticker__divider {
  color: var(--color-gold);
  font-size: var(--text-sm);
  flex-shrink: 0;
  opacity: 0.6;
}

/* --- Products Grid --- */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.product-card {
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  border: 1px solid var(--color-light-gray);
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: var(--color-navy-light);
}

.product-card__image {
  height: 240px;
  overflow: hidden;
  position: relative;
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.product-card:hover .product-card__image img {
  transform: scale(1.05);
}

.product-card__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--color-red);
  color: var(--color-white);
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
  font-size: var(--text-xs);
  font-weight: 600;
}

.product-card__body {
  padding: var(--space-md);
}

.product-card__title {
  font-size: var(--text-xl);
  margin-bottom: 0.5rem;
}

.product-card__description {
  color: var(--color-text-light);
  font-size: var(--text-sm);
  margin-bottom: var(--space-md);
}

.product-card__features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--space-md);
}

.product-card__feature {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--text-xs);
  color: var(--color-navy);
  background: rgba(27, 54, 93, 0.06);
  padding: 0.3rem 0.75rem;
  border-radius: 50px;
}

.product-card__feature svg {
  width: 14px;
  height: 14px;
  color: var(--color-success);
}

.product-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--color-red);
  font-size: var(--text-sm);
  transition: gap var(--transition-fast);
}

.product-card__link:hover {
  gap: 0.75rem;
  color: var(--color-red-dark);
}

/* --- Comparison Section (Aluminum vs Wood) --- */
.comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
  align-items: start;
}

.comparison__column {
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.comparison__column--aluminum {
  border: 2px solid var(--color-navy);
}

.comparison__column--wood {
  border: 2px solid var(--color-light-gray);
  opacity: 0.85;
}

.comparison__winner {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--color-red);
  color: var(--color-white);
  padding: 0.35rem 1rem;
  border-radius: 50px;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.comparison__title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.comparison__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.comparison__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--text-base);
  line-height: 1.5;
}

.comparison__item svg {
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.comparison__item--pro svg {
  color: var(--color-success);
}

.comparison__item--con svg {
  color: var(--color-red);
}

/* --- Stats Section --- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

.stat-card {
  text-align: center;
  padding: var(--space-xl);
}

.stat-card__value {
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--color-gold);
  display: block;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-card__label {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.85);
}

/* --- Why Choose Us --- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.feature-card {
  padding: var(--space-xl);
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-light-gray);
  transition: all var(--transition-base);
  text-align: center;
}

.feature-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--color-navy-light);
}

.feature-card__icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--color-navy), var(--color-navy-light));
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md) auto;
  color: var(--color-white);
}

.feature-card__title {
  font-size: var(--text-xl);
  margin-bottom: 0.5rem;
}

.feature-card__description {
  color: var(--color-text-light);
  font-size: var(--text-sm);
}

/* --- FAQ Section --- */
.faq-list {
  max-width: 800px;
  margin: var(--space-2xl) auto 0;
}

.faq-item {
  border: 1px solid var(--color-light-gray);
  border-radius: var(--border-radius);
  margin-bottom: var(--space-sm);
  overflow: hidden;
  transition: all var(--transition-base);
}

.faq-item:hover {
  border-color: var(--color-navy-light);
}

.faq-item.active {
  box-shadow: var(--shadow-md);
  border-color: var(--color-navy);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-navy);
  background: var(--color-white);
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-primary);
  transition: background var(--transition-fast);
}

.faq-question:hover {
  background: var(--color-off-white);
}

.faq-question svg {
  flex-shrink: 0;
  transition: transform var(--transition-base);
  color: var(--color-red);
}

.faq-item.active .faq-question svg {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base), padding var(--transition-base);
}

.faq-answer__inner {
  padding: 0 var(--space-lg) var(--space-lg);
  color: var(--color-text-light);
  font-size: var(--text-base);
  line-height: 1.7;
}

/* --- CTA Banner --- */
.cta-banner {
  text-align: center;
  padding: var(--space-3xl) 0;
}

.cta-banner h2 {
  margin-bottom: var(--space-md);
}

.cta-banner p {
  font-size: var(--text-lg);
  margin-bottom: var(--space-xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Service Area / Map Section --- */
.service-area-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
  align-items: start;
}

.service-area-card {
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-light-gray);
}

.service-area-card__title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.service-area-card__states {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.state-tag {
  display: inline-block;
  padding: 0.4rem 1rem;
  background: rgba(27, 54, 93, 0.06);
  color: var(--color-navy);
  border-radius: 50px;
  font-size: var(--text-sm);
  font-weight: 500;
}

.state-tag--highlight {
  background: var(--color-navy);
  color: var(--color-white);
}

/* --- Incline Calculator --- */
.calculator-card {
  background: var(--color-white);
  border-radius: var(--border-radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-xl);
  max-width: 700px;
  margin: var(--space-2xl) auto 0;
  border: 1px solid var(--color-light-gray);
}

.calculator-card h3 {
  margin-bottom: var(--space-md);
  text-align: center;
}

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

.calc-form-group label {
  display: block;
  font-weight: 600;
  font-size: var(--text-base);
  margin-bottom: 0.5rem;
  color: var(--color-navy);
}

.calc-form-group input,
.calc-form-group select {
  width: 100%;
  padding: 1rem 1.25rem;
  font-size: var(--text-lg);
  font-family: var(--font-primary);
  border: 2px solid var(--color-light-gray);
  border-radius: var(--border-radius);
  transition: border-color var(--transition-fast);
  color: var(--color-text);
}

.calc-form-group input:focus,
.calc-form-group select:focus {
  outline: none;
  border-color: var(--color-navy);
  box-shadow: 0 0 0 3px rgba(27, 54, 93, 0.1);
}

.calc-form-group small {
  display: block;
  margin-top: 0.4rem;
  color: var(--color-text-light);
  font-size: var(--text-xs);
}

.calc-results {
  background: var(--color-off-white);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  margin-top: var(--space-lg);
  display: none;
}

.calc-results.visible {
  display: block;
  animation: fadeInUp 0.4s ease;
}

.calc-results__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-light-gray);
}

.calc-results__item:last-child {
  border-bottom: none;
}

.calc-results__label {
  font-weight: 500;
  color: var(--color-text);
}

.calc-results__value {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-navy);
}

.calc-results__recommended {
  background: var(--color-navy);
  color: var(--color-white);
  border-radius: var(--border-radius);
  padding: var(--space-sm);
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  text-align: center;
}

.calc-results__recommended strong {
  color: var(--color-gold);
}

/* --- Contact Form --- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
}

.contact-form {
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-light-gray);
}

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

.form-group label {
  display: block;
  font-weight: 600;
  font-size: var(--text-base);
  margin-bottom: 0.4rem;
  color: var(--color-navy);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.875rem 1.25rem;
  font-size: var(--text-base);
  font-family: var(--font-primary);
  border: 2px solid var(--color-light-gray);
  border-radius: var(--border-radius);
  transition: border-color var(--transition-fast);
  color: var(--color-text);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-navy);
  box-shadow: 0 0 0 3px rgba(27, 54, 93, 0.1);
}

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

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.contact-info-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.contact-method {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-off-white);
  border-radius: var(--border-radius);
}

.contact-method__icon {
  width: 48px;
  height: 48px;
  background: var(--color-navy);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  flex-shrink: 0;
}

.contact-method__label {
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

.contact-method__value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-navy);
}

.contact-method__value a {
  color: var(--color-navy);
}

.contact-method__value a:hover {
  color: var(--color-red);
}

/* --- About Page --- */
.about-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.about-hero__image {
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.about-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-values {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.about-value {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.about-value svg {
  color: var(--color-red);
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.about-value strong {
  display: block;
  color: var(--color-navy);
  margin-bottom: 0.25rem;
}

/* --- Products Page Detail --- */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
  padding: var(--space-2xl) 0;
  border-bottom: 1px solid var(--color-light-gray);
}

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

.product-detail:nth-child(even) {
  direction: rtl;
}

.product-detail:nth-child(even) > * {
  direction: ltr;
}

.product-detail__image {
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.product-detail__image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.product-detail__content h3 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-md);
}

.product-detail__features {
  margin: var(--space-md) 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.product-detail__feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--text-base);
}

.product-detail__feature svg {
  color: var(--color-success);
  flex-shrink: 0;
}

/* --- Page Header Banner --- */
.page-header {
  background: linear-gradient(135deg, var(--color-navy-dark), var(--color-navy));
  padding: var(--space-3xl) 0;
  text-align: center;
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: rgba(196, 30, 58, 0.1);
  border-radius: 50%;
}

.page-header::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -5%;
  width: 300px;
  height: 300px;
  background: rgba(212, 168, 67, 0.08);
  border-radius: 50%;
}

.page-header h1 {
  color: var(--color-white);
  font-size: var(--text-4xl);
  margin-bottom: var(--space-sm);
  position: relative;
  z-index: 1;
}

.page-header p {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.8);
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.page-header .breadcrumb {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  position: relative;
  z-index: 1;
}

.page-header .breadcrumb a {
  color: rgba(255,255,255,0.6);
}

.page-header .breadcrumb a:hover {
  color: var(--color-gold);
}

/* --- Footer --- */
.footer {
  background: var(--color-navy-dark);
  color: var(--color-text-on-dark);
  padding: var(--space-3xl) 0 var(--space-lg);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer__brand p {
  color: rgba(255,255,255,0.7);
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
  max-width: 300px;
}

.footer__heading {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-md);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer__links a {
  color: rgba(255,255,255,0.7);
  font-size: var(--text-sm);
  transition: color var(--transition-fast);
}

.footer__links a:hover {
  color: var(--color-gold);
}

.footer__phone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-white) !important;
  margin-bottom: var(--space-sm);
}

.footer__phone:hover {
  color: var(--color-gold) !important;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-lg);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.5);
}

/* --- Animations --- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes slideFromLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideFromRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes gentleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes drawUnderline {
  from { width: 0; }
  to { width: 60px; }
}

/* --- Base scroll animation --- */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Slide from left variant --- */
.animate-slide-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-slide-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* --- Slide from right variant --- */
.animate-slide-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-slide-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* --- Scale in variant --- */
.animate-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* --- Staggered delays (up to 6 children) --- */
.animate-on-scroll:nth-child(1) { transition-delay: 0s; }
.animate-on-scroll:nth-child(2) { transition-delay: 0.1s; }
.animate-on-scroll:nth-child(3) { transition-delay: 0.2s; }
.animate-on-scroll:nth-child(4) { transition-delay: 0.3s; }
.animate-on-scroll:nth-child(5) { transition-delay: 0.35s; }
.animate-on-scroll:nth-child(6) { transition-delay: 0.4s; }

.animate-slide-left:nth-child(2) { transition-delay: 0.1s; }
.animate-slide-left:nth-child(3) { transition-delay: 0.2s; }
.animate-slide-right:nth-child(2) { transition-delay: 0.1s; }
.animate-slide-right:nth-child(3) { transition-delay: 0.2s; }

/* --- Section title animated underline --- */
.section-title-animated {
  position: relative;
  display: block;
  padding-bottom: 12px;
}

.section-title-animated::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 3px;
  width: 0;
  background: var(--color-gold);
  border-radius: 2px;
  transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}

.section-title-animated.visible::after {
  width: 60px;
}

/* --- Stat counter glow pulse --- */
.stat-card.visible .stat-card__value {
  animation: scaleIn 0.5s ease forwards;
}

/* --- Trust ticker uses CSS keyframe animation (see above) --- */

/* --- Feature card gentle float on visible --- */
.feature-card.visible .feature-card__icon {
  animation: gentleFloat 3s ease-in-out infinite;
  animation-delay: 0.5s;
}

/* --- Product card subtle image zoom --- */
.product-card__image img {
  transition: transform 0.5s ease;
}

.product-card:hover .product-card__image img {
  transform: scale(1.05);
}

/* --- Product detail image parallax-like hover --- */
.product-detail__image {
  transition: transform 0.4s ease;
}

.product-detail__image:hover {
  transform: scale(1.02);
}

/* --- CTA banner gentle pulse on button --- */
.cta-banner .btn {
  position: relative;
  overflow: hidden;
}

.cta-banner .btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease;
}

.cta-banner .btn:hover::after {
  width: 300px;
  height: 300px;
}

/* --- Respect reduced motion preferences --- */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .animate-slide-left,
  .animate-slide-right,
  .animate-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .trust-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .feature-card.visible .feature-card__icon {
    animation: none;
  }

  .product-card__image img,
  .product-detail__image {
    transition: none;
  }
}

/* --- Responsive Design --- */
@media (max-width: 1024px) {
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }

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

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

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .comparison {
    grid-template-columns: 1fr;
  }

  .product-detail {
    grid-template-columns: 1fr;
  }

  .product-detail:nth-child(even) {
    direction: ltr;
  }
}

@media (max-width: 768px) {
  :root {
    --text-5xl: 2.5rem;
    --text-4xl: 2rem;
    --text-3xl: 1.75rem;
  }

  .top-bar__info {
    gap: var(--space-sm);
  }

  .top-bar__cta {
    display: none;
  }

  .nav__links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 380px;
    height: 100vh;
    background: var(--color-white);
    flex-direction: column;
    padding: 5rem var(--space-xl) var(--space-xl);
    box-shadow: var(--shadow-xl);
    transition: right var(--transition-base);
    z-index: 999;
    align-items: flex-start;
  }

  .nav__links.open {
    right: 0;
  }

  .nav__phone {
    display: none;
  }

  .mobile-toggle {
    display: flex;
    z-index: 1001;
  }

  .floating-cta {
    display: flex;
  }

  .hero {
    min-height: 70vh;
  }

  .hero__stats {
    gap: var(--space-md);
  }

  .hero__stat-value {
    font-size: var(--text-xl);
  }

  .trust-bar .container {
    gap: var(--space-md);
  }

  .products-grid {
    grid-template-columns: 1fr;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

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

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

  .service-area-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }

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

  .btn-group {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-group .btn {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-sm);
  }

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

  .hero__stats {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .stat-card {
    padding: var(--space-md);
  }

  .stat-card__value {
    font-size: var(--text-3xl);
  }
}

/* --- Overlay for mobile menu --- */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.nav-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* --- Success message for form --- */
.form-success {
  display: none;
  text-align: center;
  padding: var(--space-xl);
}

.form-success.visible {
  display: block;
  animation: fadeInUp 0.4s ease;
}

.form-success svg {
  color: var(--color-success);
  margin-bottom: var(--space-sm);
}

.form-success h3 {
  color: var(--color-navy);
  margin-bottom: var(--space-xs);
}

.form-success p {
  color: var(--color-text-light);
}

/* ============================================================
   WordPress conversion layer
   ------------------------------------------------------------
   Every rule below replaces an inline style="" attribute that
   existed in the original static HTML. Moving them here lets the
   same markup be produced from Customizer fields, custom post
   types and the block editor while rendering identically.
   ============================================================ */

/* --- Shared modifiers --- */
.btn-group--center { justify-content: center; }
.section-label--gold { color: var(--color-gold); }
.section-title--white { color: var(--color-white); }
.text-center--spaced { margin-bottom: var(--space-xl); }
.features-grid--spaced { margin-top: var(--space-2xl); }

/* Links inside editor-managed rich text (FAQ answers, page copy) */
.faq-answer__inner a,
.calc-seo a {
  color: var(--color-red);
  font-weight: 600;
}

/* --- Home: service area cards --- */
.service-area-card__text {
  color: var(--color-text-light);
  margin-bottom: 1rem;
  font-size: var(--text-sm);
}

/* --- Footer brand block --- */
.footer__brand .logo { margin-bottom: 1rem; }
.footer__brand .logo__text { color: var(--color-white); }

/* --- About: story column --- */
.about-hero__story > p:first-of-type {
  font-size: var(--text-lg);
  margin-bottom: var(--space-md);
}

/* --- Calculator: results panel --- */
.calc-results__heading {
  margin-bottom: 1rem;
  color: var(--color-navy);
  font-size: var(--text-lg);
}
.calc-results__rise { color: var(--color-red); }
.calc-results__label small { color: var(--color-text-light); }
.calc-results__cta { text-align: center; margin-top: 1.5rem; }
.calc-results__cta-note {
  margin-bottom: 1rem;
  font-weight: 600;
  color: var(--color-navy);
}
.calc-results__cta-note span { color: var(--color-red); }
.calc-card__icon { vertical-align: middle; margin-right: 0.5rem; }
.calc-btn { width: 100%; margin-top: 0.5rem; }

/* --- Calculator: long-form SEO copy (block editor content) --- */
.calc-seo {
  max-width: 800px;
  margin: var(--space-3xl) auto 0;
}
.calc-seo > h2 { margin-bottom: var(--space-md); }
.calc-seo > h3 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
  font-size: var(--text-xl);
}
.calc-seo ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-bottom: var(--space-md);
}
.calc-seo li { margin-bottom: 0.5rem; }

/* --- Contact: form column --- */
.contact-form__title {
  margin-bottom: var(--space-md);
  font-size: var(--text-2xl);
}
.contact-form__intro {
  color: var(--color-text-light);
  margin-bottom: var(--space-lg);
}
.form-success__note { margin-top: 1rem; }
.form-success .btn { margin-top: 1rem; }

/* --- Contact: info column --- */
.contact-info-card__title {
  margin-bottom: var(--space-sm);
  font-size: var(--text-2xl);
}
.contact-info-card__intro { color: var(--color-text-light); }
.contact-method__label--sub { margin-top: 0.25rem; }

.contact-perks {
  background: linear-gradient(135deg, var(--color-navy), var(--color-navy-light));
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg);
  color: var(--color-white);
}
.contact-perks__title {
  color: var(--color-gold);
  margin-bottom: 0.5rem;
  font-size: var(--text-lg);
}
.contact-perks__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: var(--text-sm);
}
.contact-perks__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.9);
}

/* --- CTA banner copy --- */
.cta-banner__text { color: rgba(255, 255, 255, 0.9); }

/* ============================================================
   WordPress core / admin-bar compatibility
   ============================================================ */
.admin-bar .header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .header { top: 46px; }
}

/* ============================================================
   Blog & archives
   ------------------------------------------------------------
   The original static site had no blog. These styles reuse the
   existing design tokens so posts match the rest of the site.
   ============================================================ */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-lg);
}

.post-card {
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  display: flex;
  flex-direction: column;
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.post-card__image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-off-white);
}

.post-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

.post-card__meta {
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

.post-card__title {
  font-size: var(--text-xl);
  line-height: 1.3;
}

.post-card__title a {
  color: var(--color-navy);
  transition: color var(--transition-base);
}

.post-card__title a:hover { color: var(--color-red); }

.post-card__excerpt {
  color: var(--color-text-light);
  font-size: var(--text-sm);
  flex: 1;
}

/* --- Single post --- */
.entry {
  max-width: 760px;
  margin: 0 auto;
}

.entry__meta {
  color: var(--color-text-light);
  font-size: var(--text-sm);
  margin-bottom: var(--space-lg);
}

.entry__thumbnail {
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-xl);
}

.entry__thumbnail img { width: 100%; height: auto; display: block; }

.entry__content > * { margin-bottom: var(--space-md); }
.entry__content h2 { margin-top: var(--space-xl); margin-bottom: var(--space-sm); }
.entry__content h3 { margin-top: var(--space-lg); margin-bottom: var(--space-sm); font-size: var(--text-xl); }
.entry__content ul,
.entry__content ol { list-style: disc; padding-left: 1.5rem; }
.entry__content ol { list-style: decimal; }
.entry__content li { margin-bottom: 0.5rem; }
.entry__content a { color: var(--color-red); font-weight: 600; }
.entry__content img { max-width: 100%; height: auto; border-radius: var(--border-radius); }
.entry__content blockquote {
  border-left: 4px solid var(--color-red);
  padding-left: var(--space-md);
  color: var(--color-text-light);
  font-style: italic;
}

/* WordPress core alignment / caption classes */
.alignleft { float: left; margin: 0 var(--space-md) var(--space-sm) 0; }
.alignright { float: right; margin: 0 0 var(--space-sm) var(--space-md); }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide, .alignfull { max-width: none; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-element-caption {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  text-align: center;
  margin-top: 0.5rem;
}
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  word-wrap: normal !important;
}
.sticky, .gallery-caption, .bypostauthor { /* required by the WordPress theme check */ }

/* --- Pagination --- */
.pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--space-2xl);
  flex-wrap: wrap;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 0.75rem;
  border-radius: var(--border-radius);
  background: var(--color-white);
  color: var(--color-navy);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition-base), color var(--transition-base);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
  background: var(--color-red);
  color: var(--color-white);
}

/* --- Search form --- */
.search-form { display: flex; gap: 0.5rem; max-width: 480px; }
.search-form input[type="search"] {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 2px solid var(--color-light-gray);
  border-radius: var(--border-radius);
  font-family: var(--font-primary);
  font-size: var(--text-base);
}
.search-form input[type="search"]:focus {
  outline: none;
  border-color: var(--color-red);
}

/* --- 404 / empty states --- */
.empty-state {
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
}
.empty-state__code {
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 900;
  line-height: 1;
  color: var(--color-red);
  font-family: var(--font-display);
}
.empty-state p {
  color: var(--color-text-light);
  margin: var(--space-md) 0 var(--space-lg);
}
.empty-state .search-form { margin: 0 auto var(--space-lg); }

/* --- Spam trap: present in the DOM, never visible or focusable --- */
.ha4u-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Custom logo uploaded via Appearance → Customize → Site Identity --- */
.logo__icon--custom {
  background: none;
  box-shadow: none;
  width: auto;
  height: auto;
  padding: 0;
}
.logo__icon--custom img {
  display: block;
  height: 48px;
  width: auto;
  max-width: 100%;
}

/* ============================================================
   Stop the page panning sideways on phones
   ------------------------------------------------------------
   The closed mobile menu drawer sits off-canvas to the right and
   nothing clipped it, so viewports under ~442px could be dragged
   ~52px into empty space.

   It has to be `clip`, and it has to be on both elements:
   `overflow-x: hidden` does not stop the pan here, and it would
   turn the element into a scroll container, which is what breaks
   `position: sticky` on the header. `clip` creates no scroll
   container, so the sticky header keeps working.
   ============================================================ */
html,
body {
  overflow-x: clip;
}

/* ============================================================
   Hero breathing room on short screens
   ------------------------------------------------------------
   .hero centres its content inside min-height: 85vh with no
   vertical padding. On a laptop around 620-720px tall the
   content (611px) is taller than 85vh, so the hero collapses to
   exactly the content height: the badge lands flush against the
   bottom of the sticky header and the buttons land flush against
   the trust bar below. Both read as "cut off", and the smallest
   scroll tucks the badge behind the header.

   The padding is symmetric on purpose. With align-items: center,
   equal padding does not move the content on tall screens — it
   only takes effect once the content would otherwise be flush,
   where the hero grows (min-height, not height) and the
   background image grows with it.
   ============================================================ */
.hero {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

/* Short viewports: pull the type in a little so more of the hero
   fits above the fold without shrinking it on normal screens. */
@media (max-height: 780px) {
  .hero__title {
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    margin-bottom: var(--space-sm);
  }

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

  .hero__badge {
    margin-bottom: var(--space-sm);
  }
}

/* ============================================================
   Let the contact form shrink to the phone screen
   ------------------------------------------------------------
   .contact-grid collapses to a single column below 768px, but its
   children are grid items, and a grid item defaults to
   min-width: auto — it will not shrink below the intrinsic width
   of its contents. The inputs and textarea carry a default
   intrinsic size, so the form stayed 426px wide inside a 358px
   column and the Submit button sat off the right edge of a 390px
   phone, unreachable.

   min-width: 0 lets the items take the column width; the fields
   are already width: 100% and follow.
   ============================================================ */
.contact-grid > *,
.form-row > *,
.form-group {
  min-width: 0;
}

.form-group input,
.form-group select,
.form-group textarea {
  min-width: 0;
  max-width: 100%;
}

/* The card padding is 3rem a side, which leaves little room for the
   fields once the column is only ~358px. Ease it off on phones. */
@media (max-width: 480px) {
  .contact-form {
    padding: var(--space-lg) var(--space-md);
  }
}