/**
 * Top SEO Agency — layout & components.
 * Brand colors come from an inline <style> block printed by
 * inc/color-tools.php — never hard-code a brand hex here.
 */

.container { width: 100%; max-width: var(--tsa-container); margin-left: auto; margin-right: auto; padding-left: clamp(1.25rem, 4vw, 3rem); padding-right: clamp(1.25rem, 4vw, 3rem); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--tsa-primary); color: var(--tsa-primary-on); padding: var(--tsa-space-3) var(--tsa-space-4); z-index: 1000; }
.skip-link:focus { left: var(--tsa-space-4); top: var(--tsa-space-4); }

.eyebrow { display: inline-block; color: var(--tsa-secondary-darker); font-weight: 700; font-size: var(--tsa-fs-eyebrow); letter-spacing: var(--tsa-ls-eyebrow); text-transform: uppercase; margin: 0 0 var(--tsa-space-2); }

.section-heading { font-family: var(--tsa-font-heading); font-weight: 700; line-height: 1.25; margin: 0 0 var(--tsa-space-4); color: var(--tsa-text); }
h1.section-heading { font-size: var(--tsa-fs-h1); line-height: 1.2; }
h2.section-heading { font-size: var(--tsa-fs-h2); }
.accent { color: var(--tsa-secondary); }

.section-body { color: var(--tsa-text-muted); max-width: 42rem; }
.section-body-wide { max-width: 56rem; }

.btn {
  display: inline-flex; align-items: center; gap: var(--tsa-space-2);
  border-radius: var(--tsa-radius-pill); padding: 0.85rem 1.6rem;
  font-weight: 600; font-size: 0.9375rem; border: 2px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform var(--tsa-transition), background-color var(--tsa-transition), filter var(--tsa-transition);
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.btn-primary { background: var(--tsa-primary); color: var(--tsa-primary-on); }
.btn-primary:hover { background: var(--tsa-primary-dark); }
.btn-secondary { background: var(--tsa-secondary); color: var(--tsa-secondary-on); }
.btn-secondary:hover { background: var(--tsa-secondary-dark); }
.btn-outline-light { background: transparent; border-color: rgba(255,255,255,0.6); color: #fff; }
.btn-outline-light:hover { background: rgba(255,255,255,0.12); }
.btn-block { width: 100%; justify-content: center; }

/* -------------------- Header -------------------- */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--tsa-primary); color: var(--tsa-primary-on); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--tsa-space-5); padding-block: var(--tsa-space-3); flex-wrap: nowrap; }

.site-branding { display: flex; align-items: center; gap: var(--tsa-space-2); text-decoration: none; color: inherit; flex-shrink: 0; min-width: 0; }
.site-branding img.custom-logo { height: 36px; width: auto; flex-shrink: 0; }
.site-branding .brand-mark {
  width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid currentColor;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.site-branding .brand-mark svg { width: 16px; height: 16px; }
.site-branding .brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.site-branding .brand-name { font-family: var(--tsa-font-heading); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; }
.site-branding .brand-tagline { font-size: 0.7rem; opacity: 0.7; }

.primary-navigation { flex: 1; }
.primary-menu { list-style: none; display: flex; align-items: center; gap: var(--tsa-space-5); margin: 0; padding: 0; justify-content: center; }
.primary-menu a { text-decoration: none; font-weight: 500; font-size: 0.9375rem; color: inherit; opacity: 0.85; }
.primary-menu a:hover, .primary-menu .current-menu-item > a { opacity: 1; }

.header-actions { display: flex; align-items: center; gap: var(--tsa-space-4); flex-shrink: 0; }
.theme-toggle { background: transparent; border: 1px solid rgba(255,255,255,0.3); border-radius: var(--tsa-radius-pill); width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: inherit; flex-shrink: 0; }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: inline-flex; }

.header-phone { display: flex; flex-direction: column; text-decoration: none; color: inherit; line-height: 1.2; }
.header-phone-label { display: flex; align-items: center; gap: 4px; font-size: 0.6875rem; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.04em; }
.header-phone-label svg { width: 11px; height: 11px; }
.header-phone-number { font-weight: 700; font-size: 1rem; }

.menu-toggle { display: none; background: transparent; border: 1px solid rgba(255,255,255,0.3); border-radius: var(--tsa-radius-sm); width: 36px; height: 36px; align-items: center; justify-content: center; color: inherit; }
.menu-toggle svg { width: 17px; height: 17px; }
.menu-toggle .icon-close { display: none; }
.site-header.is-menu-open .menu-toggle .icon-open { display: none; }
.site-header.is-menu-open .menu-toggle .icon-close { display: inline-flex; }

/* -------------------- Hero -------------------- */
.hero { position: relative; background: var(--tsa-primary); color: var(--tsa-primary-on); overflow: hidden; padding-block: var(--tsa-space-10) var(--tsa-space-8); }
.hero-bg-image { position: absolute; inset: 0; z-index: 0; opacity: 0.22; }
.hero-bg-image img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--tsa-primary) 0%, transparent 40%, var(--tsa-primary) 100%); }

.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--tsa-space-8); align-items: start; }
.hero-copy .eyebrow { color: var(--tsa-secondary); }
.hero-copy .section-heading { color: var(--tsa-primary-on); }
.hero-copy .section-body { color: color-mix(in srgb, var(--tsa-primary-on) 78%, transparent); }

.trust-badge-row { display: flex; align-items: center; gap: var(--tsa-space-3); margin: var(--tsa-space-5) 0; flex-wrap: wrap; font-size: 0.875rem; }
.trust-badge-image img { height: 28px; width: auto; }
.trust-badge-text { font-weight: 600; }
.trust-badge-link { color: var(--tsa-secondary); text-decoration: underline; }

.hero-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--tsa-space-3); max-width: 420px; margin-bottom: var(--tsa-space-5); }
.hero-stat-badge { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--tsa-radius-md); padding: var(--tsa-space-3) var(--tsa-space-4); text-align: center; }
.hero-stat-number { display: block; color: var(--tsa-secondary); font-weight: 700; font-size: 1.1rem; }
.hero-stat-label { display: block; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.75; margin-top: 2px; }

.hero-disclaimer { font-size: 0.75rem; opacity: 0.55; max-width: 36rem; }

/* Review card (white, always — contrasts against the dark hero) */
.review-card { background: #fff; color: #1b1d22; border-radius: var(--tsa-radius-lg); box-shadow: var(--tsa-shadow-card); padding: var(--tsa-space-6); }
.review-card h2 { font-family: var(--tsa-font-heading); font-size: 1.4rem; margin: 0 0 var(--tsa-space-1); }
.review-card-subtext { color: #5c6068; font-size: 0.875rem; margin: 0 0 var(--tsa-space-5); }
.form-row { margin-bottom: var(--tsa-space-4); }
.form-row label { display: block; font-size: 0.8125rem; font-weight: 700; margin-bottom: var(--tsa-space-2); }
.form-row .required { color: #c0392b; }
.form-row .optional { font-weight: 400; color: #8a8e96; text-transform: uppercase; font-size: 0.6875rem; }
.form-row input {
  width: 100%; border: 1px solid #dcd7cb; background: #fff; color: #1b1d22;
  border-radius: var(--tsa-radius-sm); padding: 0.75rem 0.9rem; font-size: 0.9375rem; font-family: inherit;
}
.review-card-note { display: flex; align-items: center; gap: var(--tsa-space-2); font-size: 0.8125rem; color: #5c6068; margin: var(--tsa-space-4) 0 0; }
.review-card-note svg { width: 16px; height: 16px; color: var(--tsa-secondary-darker); flex-shrink: 0; }
.review-card-phone-cta { text-align: center; font-size: 0.875rem; margin: var(--tsa-space-5) 0 0; padding-top: var(--tsa-space-4); border-top: 1px solid #ece8de; }
.review-card-phone-cta a { color: var(--tsa-primary); font-weight: 700; text-decoration: none; }

.form-notice-wrap { display: none; margin-bottom: var(--tsa-space-4); padding: var(--tsa-space-3) var(--tsa-space-4); border-radius: var(--tsa-radius-sm); font-size: 0.875rem; }
.form-notice-wrap.is-visible { display: block; }
.form-notice-wrap.is-success { background: #e6f6ec; color: #1e7d3c; }
.form-notice-wrap.is-error { background: #fdeceb; color: #b81a16; }

/* -------------------- Stats strip -------------------- */
.stats-strip { background: var(--tsa-bg-alt); border-top: 1px solid var(--tsa-border); border-bottom: 1px solid var(--tsa-border); }
.stats-strip-row { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: var(--tsa-space-6); text-align: center; }
.stats-strip-item { border-right: 1px solid var(--tsa-border); }
.stats-strip-item:last-child { border-right: none; }
.stats-strip-number { display: block; font-family: var(--tsa-font-heading); font-weight: 700; font-size: 1.6rem; }
.stats-strip-label { display: block; color: var(--tsa-text-muted); font-size: 0.8125rem; margin-top: 2px; }

/* -------------------- Generic section -------------------- */
.section { padding-block: var(--tsa-space-10); }
.section-alt { background: var(--tsa-bg-alt); }
.section-head-centered { text-align: center; max-width: 42rem; margin: 0 auto var(--tsa-space-8); }
.section-head-centered .section-body { margin-left: auto; margin-right: auto; }

/* -------------------- CTA bar (recurring component) -------------------- */
.cta-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--tsa-space-4); flex-wrap: wrap; margin-top: var(--tsa-space-8); padding-top: var(--tsa-space-6); border-top: 1px solid var(--tsa-border); }
.cta-bar-text { margin: 0; font-weight: 600; max-width: 32rem; }
.cta-bar-actions { display: flex; align-items: center; gap: var(--tsa-space-3); flex-wrap: wrap; }
.cta-bar-phone { display: flex; align-items: center; gap: var(--tsa-space-2); text-decoration: none; color: var(--tsa-primary); font-weight: 700; }
.cta-bar-phone svg { width: 16px; height: 16px; }
.cta-bar-or { color: var(--tsa-text-muted); font-size: 0.875rem; }
.cta-bar-dark { border-top-color: rgba(255,255,255,0.18); }
.cta-bar-dark .cta-bar-text { color: var(--tsa-primary-on); }
.cta-bar-dark .cta-bar-phone { color: var(--tsa-secondary); }
.cta-bar-dark .cta-bar-or { color: color-mix(in srgb, var(--tsa-primary-on) 60%, transparent); }

/* -------------------- Testimonials -------------------- */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tsa-space-5); }
.testimonial-card { background: var(--tsa-surface); border: 1px solid var(--tsa-border); border-radius: var(--tsa-radius-lg); padding: var(--tsa-space-5); }
.testimonial-card .quote-icon { color: var(--tsa-secondary); width: 22px; height: 22px; margin-bottom: var(--tsa-space-3); }
.quote-text { font-size: 0.9375rem; margin: 0 0 var(--tsa-space-4); }
.testimonial-stars { display: flex; gap: 2px; color: var(--tsa-secondary); margin-bottom: var(--tsa-space-3); }
.testimonial-stars svg { width: 14px; height: 14px; }
.testimonial-person { display: flex; align-items: center; gap: var(--tsa-space-2); font-weight: 600; font-size: 0.875rem; }
.testimonial-person img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.avatar-fallback { width: 32px; height: 32px; border-radius: 50%; background: var(--tsa-primary-tint); color: var(--tsa-primary); display: flex; align-items: center; justify-content: center; }
.avatar-fallback svg { width: 16px; height: 16px; }

/* -------------------- Results -------------------- */
.results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tsa-space-5); }
.result-card { background: var(--tsa-surface); border: 1px solid var(--tsa-border); border-radius: var(--tsa-radius-lg); padding: var(--tsa-space-6); text-align: center; display: flex; flex-direction: column; align-items: center; }
.result-icon { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--tsa-secondary); color: var(--tsa-secondary); display: flex; align-items: center; justify-content: center; margin-bottom: var(--tsa-space-3); }
.result-icon svg { width: 20px; height: 20px; }
.result-number { font-family: var(--tsa-font-heading); font-weight: 700; font-size: 1.8rem; }
.result-label { color: var(--tsa-text-muted); font-size: 0.875rem; margin-top: 2px; }
.result-sublink { margin-top: var(--tsa-space-3); font-size: 0.8125rem; font-weight: 600; text-decoration: underline; text-decoration-color: var(--tsa-secondary); text-underline-offset: 4px; }

.callout-disclaimer { margin-top: var(--tsa-space-6); padding-left: var(--tsa-space-4); border-left: 3px solid var(--tsa-secondary); color: var(--tsa-text-muted); font-size: 0.875rem; }

/* -------------------- Why Choose Us -------------------- */
.checklist { list-style: none; margin: var(--tsa-space-5) 0; padding: 0; display: grid; gap: var(--tsa-space-3); }
.checklist li { display: flex; align-items: flex-start; gap: var(--tsa-space-3); }
.checklist svg { width: 18px; height: 18px; color: var(--tsa-secondary-darker); flex-shrink: 0; margin-top: 2px; }

.callout-box { display: flex; gap: var(--tsa-space-4); background: var(--tsa-bg-alt); border-radius: var(--tsa-radius-md); padding: var(--tsa-space-5); margin: var(--tsa-space-6) 0; }
.callout-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--tsa-secondary-tint); color: var(--tsa-secondary-darker); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.callout-icon svg { width: 18px; height: 18px; }
.callout-title { margin: 0 0 2px; font-weight: 700; }
.callout-text { margin: 0; color: var(--tsa-text-muted); font-size: 0.9375rem; }

/* -------------------- About -------------------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tsa-space-8); align-items: start; margin-top: var(--tsa-space-5); }
.about-grid .checklist { margin-top: 0; }

/* -------------------- Team -------------------- */
.team-section { background: var(--tsa-primary); color: var(--tsa-primary-on); }
.team-section .section-body { color: color-mix(in srgb, var(--tsa-primary-on) 75%, transparent); }
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--tsa-space-6); max-width: 560px; margin: 0 auto; }
.team-photo { aspect-ratio: 3/3.4; border-radius: var(--tsa-radius-md); overflow: hidden; background: rgba(255,255,255,0.08); margin-bottom: var(--tsa-space-3); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-name { margin: 0; font-size: 1rem; text-align: center; }
.team-role { margin: 0; text-align: center; font-size: 0.8125rem; opacity: 0.7; }

/* -------------------- FAQ -------------------- */
.faq-list { display: grid; gap: var(--tsa-space-3); max-width: 50rem; margin: 0 auto; }
.faq-item { background: var(--tsa-surface); border: 1px solid var(--tsa-border); border-radius: var(--tsa-radius-md); padding: 0 var(--tsa-space-5); }
.faq-question { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--tsa-space-4); padding: var(--tsa-space-4) 0; font-weight: 700; }
.faq-question::-webkit-details-marker { display: none; }
.faq-toggle-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--tsa-text-muted); flex-shrink: 0; }
.faq-toggle-icon svg { width: 14px; height: 14px; }
.icon-expanded { display: none; }
.faq-item[open] .icon-collapsed { display: none; }
.faq-item[open] .icon-expanded { display: inline-flex; }
.faq-answer { color: var(--tsa-text-muted); font-size: 0.9375rem; padding-bottom: var(--tsa-space-4); }
.faq-answer p { margin: 0; }

/* -------------------- Final CTA -------------------- */
.final-cta-section { background: var(--tsa-primary); color: var(--tsa-primary-on); text-align: center; }
.final-cta-content { display: flex; flex-direction: column; align-items: center; }
.final-cta-section .section-heading { color: var(--tsa-primary-on); }
.final-cta-section .section-body { color: color-mix(in srgb, var(--tsa-primary-on) 78%, transparent); margin-left: auto; margin-right: auto; }
.final-cta-actions { display: flex; align-items: center; gap: var(--tsa-space-4); flex-wrap: wrap; justify-content: center; margin-top: var(--tsa-space-6); }
.serving-indicator { display: flex; align-items: center; gap: var(--tsa-space-2); justify-content: center; margin-top: var(--tsa-space-6); font-size: 0.8125rem; opacity: 0.8; }
.serving-dot { width: 8px; height: 8px; color: #3ddc84; } /* Status-indicator green — a universal "live/active" signal, intentionally independent of the brand palette. */

/* -------------------- Footer -------------------- */
.site-footer { background: var(--tsa-primary); color: var(--tsa-primary-on); padding-block: var(--tsa-space-10) var(--tsa-space-5); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--tsa-space-6); padding-bottom: var(--tsa-space-8); border-bottom: 1px solid rgba(255,255,255,0.15); }
.footer-brand p { color: color-mix(in srgb, var(--tsa-primary-on) 65%, transparent); font-size: 0.875rem; margin: var(--tsa-space-3) 0; max-width: 28rem; }
.footer-social { display: flex; gap: var(--tsa-space-3); }
.footer-social a { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: inherit; }
.footer-social svg { width: 14px; height: 14px; }
.footer-col h4 { text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--tsa-secondary); margin: 0 0 var(--tsa-space-3); }
.footer-col a, .footer-col p { color: color-mix(in srgb, var(--tsa-primary-on) 80%, transparent); font-size: 0.9375rem; text-decoration: none; margin: 0; }
.footer-phone, .footer-email { display: block; margin-bottom: var(--tsa-space-1); }
.footer-bottom { padding-top: var(--tsa-space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--tsa-space-4); flex-wrap: wrap; font-size: 0.8125rem; color: color-mix(in srgb, var(--tsa-primary-on) 60%, transparent); }
.footer-legal-links a { color: inherit; text-decoration: underline; }
.footer-legal-links span { margin: 0 var(--tsa-space-2); }

/* ==================== Dark-mode contrast corrections ====================
 * Primary (default dark navy) is deliberately near-identical to the
 * dark-mode page background, so anything that is "solid Primary on a
 * neutral surface" in Light mode would nearly disappear in Dark mode.
 * Flip those specific pieces to the Secondary (accent) color there. The
 * white review card keeps its navy button — it stays white in both
 * modes, so navy still contrasts. Brand-colored bands (header, hero,
 * team, final CTA, footer) are Primary backgrounds in both modes and
 * need no change.
 * ================================================================== */
:root[data-theme="dark"] .btn-primary { background: var(--tsa-secondary); color: var(--tsa-secondary-on); }
:root[data-theme="dark"] .btn-primary:hover { background: var(--tsa-secondary-dark); }
:root[data-theme="dark"] .review-card .btn-primary { background: var(--tsa-primary); color: var(--tsa-primary-on); }
:root[data-theme="dark"] .review-card .btn-primary:hover { background: var(--tsa-primary-dark); }
:root[data-theme="dark"] .cta-bar-phone { color: var(--tsa-secondary); }
:root[data-theme="dark"] .avatar-fallback { color: var(--tsa-secondary); background: var(--tsa-secondary-tint); }
:root[data-theme="dark"] .skip-link { background: var(--tsa-secondary); color: var(--tsa-secondary-on); }

/* ==================== Responsive ==================== */
@media (max-width: 991px) {
  .primary-navigation { display: none; }
  .menu-toggle { display: inline-flex; }
  .site-header.is-menu-open .primary-navigation {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--tsa-primary); border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .site-header.is-menu-open .primary-menu { flex-direction: column; align-items: flex-start; padding: var(--tsa-space-4) var(--tsa-space-5) var(--tsa-space-5); gap: var(--tsa-space-3); }
  .header-phone-label { display: none; }
  .header-cta span { display: none; }

  .hero-grid { grid-template-columns: 1fr; }
  .stats-strip-row { grid-template-columns: repeat(2, 1fr); gap: var(--tsa-space-4); }
  .stats-strip-item:nth-child(2) { border-right: none; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .results-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); max-width: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-bar { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
  .hero-stats-grid { max-width: none; }
  .final-cta-actions .btn { width: 100%; justify-content: center; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}