@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* --- Design System & CSS Variables --- */
:root {
  --primary: #173452;
  --primary-rgb: 23, 52, 82;
  --secondary: #1e4b77;
  --accent: #d4a373;
  --accent-rgb: 212, 163, 115;
  --success: #2ec4b6;

  --bg-app: #f3f5f8;
  --bg-card: rgba(255, 255, 255, 0.96);
  --border-card: rgba(23, 52, 82, 0.08);
  --text-main: #1e293b;
  --text-muted: #4a5568;
  --bg-nav: rgba(243, 245, 248, 0.95);
  --shadow-sm: 0 4px 6px -1px rgba(15, 32, 66, 0.03);
  --shadow-md: 0 10px 15px -3px rgba(15, 32, 66, 0.06), 0 4px 6px -2px rgba(15, 32, 66, 0.02);
  --shadow-lg: 0 20px 25px -5px rgba(15, 32, 66, 0.08), 0 10px 10px -5px rgba(15, 32, 66, 0.03);
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--bg-app);
  background-image: 
    radial-gradient(at 0% 0%, rgba(var(--accent-rgb), 0.06) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(var(--primary-rgb), 0.08) 0px, transparent 50%),
    linear-gradient(rgba(var(--primary-rgb), 0.03) 1.2px, transparent 1.2px),
    linear-gradient(90deg, rgba(var(--primary-rgb), 0.03) 1.2px, transparent 1.2px);
  background-size: 100% 100%, 100% 100%, 54px 54px, 54px 54px;
  color: var(--text-main);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

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

button, input, textarea, select {
  font-family: inherit;
}

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

/* --- Custom Scrollbar --- */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-app);
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 5px;
  border: 2px solid var(--bg-app);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* --- Container Layout --- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Navigation Header --- */
.header-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: var(--bg-nav);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-card);
  transition: box-shadow 0.3s ease, padding 0.3s ease;
}

.header-nav.scrolled {
  padding: 10px 0;
  box-shadow: var(--shadow-md);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}

.nav-logo img {
  height: 50px;
  width: auto;
  object-fit: contain;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-link {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-main);
  position: relative;
  padding: 6px 0;
  transition: color 0.2s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--accent);
  transition: width 0.3s ease;
}

.nav-link:hover {
  color: var(--primary);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background-color: var(--primary);
  color: white;
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.3);
}

.btn-primary:hover {
  background-color: var(--secondary);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.4);
}

.btn-outline {
  background-color: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
}

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

/* --- Mobile Menu Trigger --- */
.mobile-nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-main);
  cursor: pointer;
  font-size: 24px;
}

/* --- Hero Section --- */
.hero {
  padding: 160px 0 100px;
  background: radial-gradient(circle at 80% 20%, rgba(var(--accent-rgb), 0.08), transparent 45%),
              radial-gradient(circle at 10% 80%, rgba(var(--primary-rgb), 0.05), transparent 40%);
  position: relative;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero-content h1 {
  font-size: 54px;
  line-height: 1.15;
  margin-bottom: 24px;
  color: var(--primary);
}

.hero-content h1 span {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-content p {
  font-size: 18px;
  color: var(--text-muted);
  margin-bottom: 36px;
  max-width: 580px;
}

.hero-buttons {
  display: flex;
  gap: 16px;
}

.hero-badge-container {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 48px;
  flex-wrap: wrap;
}

.hero-badge-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  padding: 12px 20px;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.hero-badge-card svg {
  color: var(--accent);
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.hero-badge-text h4 {
  font-size: 14px;
  color: var(--text-main);
}

.hero-badge-text p {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

.hero-bg-watermark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.06; /* Very subtle background watermark */
  z-index: 1;
  pointer-events: none;
}

.hero-image-wrapper {
  position: relative;
  z-index: 2;
}

.hero-image-container {
  background: linear-gradient(145deg, var(--primary), var(--secondary));
  border-radius: 24px;
  padding: 32px 24px;
  position: relative;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
}

.hero-image-container::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 60%);
  animation: rotateGlow 25s linear infinite;
  z-index: 2;
  pointer-events: none;
}

@keyframes rotateGlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.hero-stats-card {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 28px 24px;
  border-radius: 16px;
  position: relative;
  z-index: 3;
  color: var(--text-main);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 360px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-stats-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.hero-stat-row {
  display: flex;
  justify-content: space-around;
  text-align: center;
}

.hero-stat-item h3 {
  font-size: 36px;
  color: var(--primary);
  margin-bottom: 4px;
}

.hero-stat-item p {
  font-size: 13px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- Section Formatting --- */
.section {
  padding: 100px 0;
}

.section-alt {
  background-color: white;
  background-image: radial-gradient(rgba(23, 52, 82, 0.05) 1.2px, transparent 1.2px);
  background-size: 20px 20px;
  border-top: 1px solid var(--border-card);
  border-bottom: 1px solid var(--border-card);
}

.section-header {
  text-align: center;
  max-width: 650px;
  margin: 0 auto 60px;
}

.section-badge {
  display: inline-block;
  background-color: rgba(var(--primary-rgb), 0.08);
  color: var(--primary);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 16px;
  border-radius: 30px;
  margin-bottom: 16px;
}

.section-header h2 {
  font-size: 38px;
  color: var(--primary);
  margin-bottom: 16px;
}

.section-header p {
  font-size: 16px;
  color: var(--text-muted);
}

/* --- Cards / Grids --- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.card {
  background: white;
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 36px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(var(--accent-rgb), 0.4);
}

.card-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background-color: rgba(var(--accent-rgb), 0.08);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  font-size: 24px;
}

.svg-icon {
  width: 30px;
  height: 30px;
  display: block;
  flex-shrink: 0;
}

.card h3 {
  font-size: 20px;
  margin-bottom: 14px;
  color: var(--primary);
}

.card p {
  color: var(--text-muted);
  font-size: 15px;
  margin-bottom: 20px;
  flex-grow: 1;
  line-height: 1.65;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--primary);
  transition: gap 0.2s ease;
}

.card-link:hover {
  gap: 12px;
}

/* --- About/Profile Page Layout --- */
.profile-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 60px;
  align-items: start;
}

.profile-card {
  background: white;
  border: 1px solid var(--border-card);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.profile-img-wrapper {
  position: relative;
  width: 100%;
  height: 340px;
  overflow: hidden;
}

.profile-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.5s ease;
}

.profile-card:hover .profile-img-wrapper img {
  transform: scale(1.04);
}

.profile-card-content {
  padding: 28px 24px;
}

.profile-role {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.profile-name {
  font-size: 24px;
  color: var(--primary);
  margin-bottom: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
}

.profile-location {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.profile-location svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
}

.profile-badges {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-badge-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.profile-badge-item svg.badge-icon {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
}

.profile-badge-item--rating {
  font-weight: 600;
  color: var(--primary);
}

.profile-badge-item .star-icon {
  color: #ffb100;
  font-size: 16px;
}

.quick-facts {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed var(--border-card);
}

.quick-facts h4 {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 12px;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.quick-facts-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

.quick-facts-list li strong {
  color: var(--primary);
  font-weight: 600;
}

.profile-narrative {
  display: flex;
  flex-direction: column;
}

.narrative-subtitle {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--accent);
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: 8px;
}

.narrative-title {
  font-size: 36px;
  color: var(--primary);
  margin-bottom: 24px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
}

.profile-narrative p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.75;
  margin: 0 0 20px 0;
}

.profile-narrative h3 {
  font-size: 20px;
  color: var(--primary);
  margin: 16px 0 12px 0;
  font-weight: 700;
}

.narrative-highlight {
  border-left: 4px solid var(--accent);
  padding-left: 20px;
  margin: 28px 0;
}

.narrative-highlight blockquote {
  font-style: italic;
  font-size: 17px;
  color: var(--primary);
  line-height: 1.6;
  font-weight: 500;
  margin: 0;
  padding: 0;
  border: none;
}

/* --- Credentials Highlights Grid --- */
.credentials-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.credential-card {
  background: white;
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}

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

.credential-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.credential-icon svg {
  width: 24px;
  height: 24px;
}

.credential-card h3 {
  font-size: 15px;
  color: var(--primary);
  margin-bottom: 8px;
  font-weight: 700;
}

.credential-card p {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}


/* --- Contact Section / Form --- */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: start;
}

.contact-info-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.contact-item-card {
  background: white;
  border: 1px solid var(--border-card);
  padding: 24px;
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: flex-start;
  gap: 20px;
  transition: box-shadow 0.3s ease;
}

.contact-item-card:hover {
  box-shadow: var(--shadow-md);
}

.contact-item-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: rgba(var(--primary-rgb), 0.08);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.contact-item-details h4 {
  font-size: 16px;
  margin-bottom: 6px;
  color: var(--text-main);
}

.contact-item-details p,
.contact-item-details a {
  font-size: 14px;
  color: var(--text-muted);
}

.contact-item-details a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.contact-form-container {
  background: white;
  border: 1px solid var(--border-card);
  border-radius: 24px;
  padding: 48px;
  box-shadow: var(--shadow-md);
}

.form-group-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

.form-group {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-main);
}

.form-control {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background-color: #f8fafc;
  color: var(--text-main);
  outline: none;
  font-size: 14px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus {
  border-color: var(--primary);
  background-color: white;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

textarea.form-control {
  resize: vertical;
  min-height: 120px;
}

/* --- Google Review Card --- */
.google-review-card {
  background: white;
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow 0.3s ease;
}

.google-review-card:hover {
  box-shadow: var(--shadow-md);
}

.google-review-card__top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.google-review-card__logo {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.google-review-card__rating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.google-review-card__stars {
  color: #f59e0b;
  font-size: 20px;
  letter-spacing: 2px;
  line-height: 1;
}

.google-review-card__score {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.google-review-card__text {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

.google-review-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  background-color: #4285F4;
  color: white;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  align-self: flex-start;
}

.google-review-card__btn:hover {
  background-color: #3367d6;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(66, 133, 244, 0.35);
}

/* --- Map / Footer --- */
.map-wrapper {
  margin-top: 36px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-card);
  height: 280px;
  box-shadow: var(--shadow-sm);
}

.map-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.footer {
  background-color: var(--primary);
  color: #e2e8f0;
  padding: 80px 0 30px;
  border-top: 4px solid var(--accent);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.5fr;
  gap: 60px;
  margin-bottom: 60px;
}

.footer-brand img {
  height: 45px;
  width: auto;
  margin-bottom: 24px;
  filter: brightness(0) invert(1);
}

.footer-brand p {
  font-size: 14px;
  color: #94a3b8;
  max-width: 320px;
  line-height: 1.7;
}

.footer-links h4,
.footer-contact h4 {
  color: white;
  font-size: 16px;
  margin-bottom: 24px;
  letter-spacing: 0.02em;
}

.footer-menu {
  list-style: none;
}

.footer-menu li {
  margin-bottom: 12px;
}

.footer-menu a {
  font-size: 14px;
  color: #94a3b8;
  transition: color 0.2s ease;
}

.footer-menu a:hover {
  color: var(--accent);
}

.footer-contact-list {
  list-style: none;
}

.footer-contact-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  margin-bottom: 16px;
  color: #cbd5e1;
}

.footer-contact-list svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
  flex-shrink: 0;
}

.footer-contact-list a {
  color: #cbd5e1;
  transition: color 0.2s ease;
}

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

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #94a3b8;
}

/* --- Entrance Animations --- */
.fade-in-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  visibility: hidden;
}

.fade-in-section.is-visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

/* --- Skip to Content (Accessibility) --- */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 16px;
  background: var(--primary);
  color: white;
  padding: 8px 16px;
  border-radius: 0 0 8px 8px;
  font-weight: 600;
  z-index: 9999;
  transition: top 0.3s ease;
}

.skip-to-content:focus {
  top: 0;
}

/* --- Skip to Content (Accessibility) --- */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 16px;
  background: var(--primary);
  color: white;
  padding: 8px 16px;
  border-radius: 0 0 8px 8px;
  font-weight: 600;
  z-index: 9999;
  transition: top 0.3s ease;
}

.skip-to-content:focus {
  top: 0;
}

/* Visually hidden (screen reader only) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* --- Certification Badges --- */
.cert-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.cert-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: rgba(23, 52, 82, 0.06);
  border: 1px solid rgba(23, 52, 82, 0.12);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  white-space: nowrap;
}

.cert-badge--rating {
  background-color: rgba(212, 163, 115, 0.12);
  border-color: rgba(212, 163, 115, 0.3);
  color: #9a6c30;
}

.cert-badge-icon {
  color: var(--primary);
  display: flex;
  align-items: center;
  font-size: 14px;
}

.cert-badge--rating .cert-badge-icon {
  color: #d4a373;
}

/* --- ProAdvisor Profile Link --- */
.proadvisor-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 10px 18px;
  border-radius: 8px;
  border: 2px solid rgba(23, 52, 82, 0.2);
  background-color: white;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-decoration: none;
}

.proadvisor-link:hover {
  background-color: var(--primary);
  color: white;
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* --- Reviews Grid --- */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-bottom: 40px;
}

.reviews-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.review-card {
  background: white;
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  border-left: 4px solid var(--accent);
  position: relative;
  overflow: hidden;
}

.review-card::before {
  content: "“";
  position: absolute;
  top: -15px;
  right: 15px;
  font-size: 130px;
  color: rgba(212, 163, 115, 0.08);
  font-family: 'Plus Jakarta Sans', serif;
  line-height: 1;
  font-weight: 800;
  pointer-events: none;
}

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

.review-stars-sm {
  color: #f59e0b;
  font-size: 18px;
  letter-spacing: 2px;
  line-height: 1;
}

.review-text {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.7;
  flex-grow: 1;
  font-style: italic;
}

.review-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

.review-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
}

.review-source {
  font-size: 12px;
  color: var(--text-muted);
}

/* --- Review Overall Rating Display --- */
.review-overall {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.review-stars {
  color: #f59e0b;
  font-size: 24px;
  letter-spacing: 3px;
  line-height: 1;
}

.review-score {
  font-size: 24px;
  font-weight: 800;
  color: var(--primary);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.review-count {
  font-size: 14px;
  color: var(--text-muted);
}

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

/* --- Trust Ribbon --- */
.trust-ribbon {
  background: white;
  border-top: 1px solid var(--border-card);
  border-bottom: 1px solid var(--border-card);
  padding: 24px 0;
  box-shadow: var(--shadow-sm);
}

.trust-ribbon-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.trust-ribbon-item {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.trust-ribbon-item:not(:last-child) {
  border-right: 1px solid var(--border-card);
  padding-right: 24px;
}

.trust-badge-icon {
  font-size: 28px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212, 163, 115, 0.08);
  width: 50px;
  height: 50px;
  border-radius: 12px;
  color: var(--accent);
}

.trust-badge-text {
  display: flex;
  flex-direction: column;
}

.trust-badge-text strong {
  font-size: 15px;
  color: var(--primary);
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.trust-badge-text span {
  font-size: 13px;
  color: var(--text-muted);
}

/* --- Pain-Points Grid --- */
.pain-points-section {
  background: var(--bg-app);
}

.pain-point-card {
  background: white;
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 36px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}

.pain-point-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #e2e8f0;
  transition: background 0.3s ease;
}

.pain-point-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(212, 163, 115, 0.3);
}

.pain-point-card:hover::before {
  background: var(--accent);
}

.pain-point-icon {
  font-size: 32px;
  margin-bottom: 20px;
  background: #f1f5f9;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pain-point-card h3 {
  font-size: 18px;
  color: var(--primary);
  margin-bottom: 12px;
  font-weight: 700;
}

.pain-point-card p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* --- Interactive Time-Savings Calculator --- */
.calculator-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.calculator-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.calculator-info p {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 32px;
}

.calculator-cta {
  display: flex;
  gap: 16px;
}

.calculator-widget {
  background: white;
  border: 1px solid var(--border-card);
  padding: 40px;
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
}

.slider-group {
  margin-bottom: 36px;
}

.slider-group label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.slider-display {
  font-size: 16px;
  color: var(--text-muted);
  margin-bottom: 16px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.slider-display span {
  font-size: 36px;
  font-weight: 800;
  color: var(--primary);
}

.custom-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #e2e8f0;
  outline: none;
  margin-bottom: 12px;
}

.custom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: transform 0.15s ease;
}

.custom-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.custom-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: transform 0.15s ease;
}

.custom-slider::-moz-range-thumb:hover {
  transform: scale(1.15);
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
}

.calculator-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.calc-result-card {
  background: var(--bg-app);
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
}

.calc-card-icon {
  font-size: 28px;
  display: block;
  margin-bottom: 8px;
}

.calc-result-card h3 {
  font-size: 32px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 4px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.calc-result-card p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.calculator-note {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
  text-align: center;
}

/* --- QuickBooks Mistakes --- */
.mistakes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.mistake-card {
  background: white;
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.mistake-icon-wrap {
  background: rgba(var(--accent-rgb), 0.08);
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.mistake-card h3 {
  font-size: 16px;
  color: var(--primary);
  margin-bottom: 12px;
  font-weight: 700;
}

.mistake-card p {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* --- Pricing Section --- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.pricing-card {
  background: white;
  border: 1px solid var(--border-card);
  border-radius: 20px;
  padding: 36px 28px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(var(--accent-rgb), 0.3);
}

.pricing-card.featured {
  border: 2px solid var(--accent);
  box-shadow: var(--shadow-md);
}

.featured-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 4px 16px;
  border-radius: 12px;
  letter-spacing: 0.05em;
}

.pricing-card h3 {
  font-size: 20px;
  color: var(--primary);
  margin-bottom: 8px;
  font-weight: 700;
}

.price-amount {
  font-size: 36px;
  font-weight: 800;
  color: var(--primary);
  font-family: 'Plus Jakarta Sans', sans-serif;
  margin-bottom: 4px;
  line-height: 1.2;
}

.price-amount span {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
}

.price-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 28px;
  line-height: 1.4;
  min-height: 36px;
}

.pricing-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13.5px;
  color: var(--text-muted);
}

.pricing-features-list li {
  position: relative;
  padding-left: 20px;
}

.pricing-features-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 800;
}

.pricing-card .btn {
  margin-top: auto;
  width: 100%;
  text-align: center;
  justify-content: center;
}

/* --- Real-World Success Stories --- */
.success-stories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.success-story-card {
  background: white;
  border: 1px solid var(--border-card);
  border-radius: 16px;
  padding: 32px 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.success-story-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.success-story-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-card);
}

.success-story-icon {
  font-size: 24px;
}

.success-story-header h3 {
  font-size: 15px;
  color: var(--primary);
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}

.success-story-body p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 12px;
}

.success-story-body p strong {
  color: var(--primary);
}

/* --- FAQ Accordion --- */
.faq-grid {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background: white;
  border: 1px solid var(--border-card);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.3s ease;
}

.faq-item.open {
  border-color: rgba(var(--accent-rgb), 0.3);
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  padding: 24px 28px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s ease;
}

.faq-question:hover {
  background: rgba(var(--primary-rgb), 0.01);
}

.faq-question h3 {
  font-size: 16px;
  color: var(--primary);
  margin: 0;
  font-weight: 700;
  padding-right: 20px;
  line-height: 1.4;
}

.faq-icon {
  font-size: 20px;
  font-weight: 500;
  color: var(--accent);
  line-height: 1;
  transition: transform 0.3s ease;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), padding 0.35s ease;
  background: var(--bg-card);
  padding: 0 28px;
}

.faq-item.open .faq-answer {
  max-height: 250px;
  padding-bottom: 24px;
}

.faq-answer p {
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* --- Responsive Breakpoints --- */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }
  .hero-content p {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-buttons {
    justify-content: center;
  }
  .hero-badge-container {
    justify-content: center;
  }
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .reviews-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .trust-ribbon-container {
    flex-wrap: wrap;
    justify-content: center;
  }
  .trust-ribbon-item {
    flex: 0 0 calc(50% - 16px);
    border-right: none !important;
    padding-right: 0 !important;
    justify-content: flex-start;
  }
  .calculator-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .calculator-info {
    align-items: center;
  }
  .calculator-cta {
    justify-content: center;
  }
  .mistakes-grid,
  .pricing-grid,
  .success-stories-grid,
  .credentials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .profile-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .mobile-nav-toggle {
    display: block;
  }
  .nav-menu {
    position: fixed;
    top: 80px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 80px);
    background-color: white;
    flex-direction: column;
    padding: 40px 24px;
    gap: 24px;
    transition: left 0.3s ease;
    border-top: 1px solid var(--border-card);
    overflow-y: auto;
  }
  .nav-menu.open {
    left: 0;
  }
  .hero-content h1 {
    font-size: 36px;
  }
  .grid-3 {
    grid-template-columns: 1fr;
  }
  .profile-img-wrapper {
    height: 280px;
  }
  .reviews-grid,
  .reviews-grid--3 {
    grid-template-columns: 1fr;
  }
  .cert-badges {
    gap: 6px;
  }
  .cert-badge {
    font-size: 11px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  .form-group-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .contact-form-container {
    padding: 28px;
  }
  .section {
    padding: 64px 0;
  }
  .hero {
    padding: 120px 0 64px;
  }
  .trust-ribbon-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .trust-ribbon-item {
    flex: 1 1 auto;
    width: 100%;
  }
  .calculator-widget {
    padding: 24px 20px;
  }
  .calculator-results {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .mistakes-grid,
  .pricing-grid,
  .success-stories-grid,
  .credentials-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .faq-question {
    padding: 20px;
  }
  .faq-question h3 {
    font-size: 15px;
  }
  .faq-answer {
    padding: 0 20px;
  }
  .faq-item.open .faq-answer {
    padding-bottom: 20px;
  }
}

/* ============================================================================
   2026-08-18 — Ryan's review call. These rules live HERE, not in a <style> block:
   the pages carry no inline <style> at all, so earlier injections were silent no-ops.
   --gold is not a token on this build; the approved accent is #d4a373 (used by the
   existing CTA button), so the new marks reuse that rather than inventing a colour.
   ============================================================================ */

/* Emoji replacements — "these emojis look like crap… make them look a lot more professional" */
.bv-ico { width: 26px; height: 26px; display: block; margin: 0 auto 2px; color: #d4a373; }
.success-story-icon .bv-ico { width: 30px; height: 30px; }
.trust-badge-icon { display: inline-flex; align-items: center; justify-content: center; }

/* Her face as a circle inside the Real Results card */
.rr-face { display: flex; flex-direction: column; align-items: center; margin-bottom: 16px; }
.rr-face img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  object-position: 50% 18%; border: 3px solid #fff; box-shadow: 0 4px 16px rgba(23,52,82,.18); }
.rr-face-name { display: block; margin-top: 10px; font-weight: 700; font-size: 15px; color: var(--primary); }
.rr-face-role { display: block; font-size: 12.5px; color: #6b7a8c; margin-top: 1px; }

/* Slim offer bar above the header. .header-nav is position:fixed;top:0, so the bar is
   fixed above it and the header is pushed down by exactly the bar's height. */
.promo-bar { position: fixed; top: 0; left: 0; width: 100%; z-index: 1100;
  background: #173452; color: #e8eef5; font-size: 13.5px; }
.promo-bar-inner { display: flex; align-items: center; justify-content: center;
  gap: 14px; padding: 7px 20px; flex-wrap: nowrap; max-width: 1200px; margin: 0 auto;
  line-height: 1.3; white-space: nowrap; overflow: hidden; }
.promo-bar-text { opacity: .92; }
.promo-bar-link { color: #d4a373; font-weight: 600; text-decoration: none; white-space: nowrap; }
.promo-bar-link:hover { text-decoration: underline; }
.header-nav { top: 34px !important; }
.hero { padding-top: 154px !important; }
@media (max-width: 620px) {
  /* nowrap + overflow:hidden was clipping "Claim it" off the end at 383px. On small screens
     the bar shows a shortened line and lets it breathe instead of truncating. */
  .promo-bar { font-size: 12px; }
  .promo-bar-inner { gap: 8px; padding: 6px 12px; white-space: normal; overflow: visible;
    flex-wrap: wrap; text-align: center; }
  .promo-bar-text { font-size: 0; }
  .promo-bar-text::after { content: "20% off your first month."; font-size: 12px; }
  .header-nav { top: 30px !important; }
}

/* Closing tagline band */
.tagline-band { background: #0f2740; color: #e8eef5; text-align: center; padding: 26px 20px; }
.tagline-band-text { font-size: clamp(18px, 2.4vw, 24px); font-weight: 700; margin: 0; color: #fff; }
.tagline-band-sub { font-size: 13.5px; color: #9fb2c6; margin: 6px 0 0; }

/* 2026-08-18 — Ryan: "get rid of how this is like this gold… this looks [bad]" on the
   plain-English headline. The gradient text-fill on `h1 span` is that treatment. Replaced
   with the site's own navy so the headline reads as one solid, confident line. The gold he
   DID approve (the lower icons and accents) is untouched. */
.hero h1 span,
h1#hero-heading span {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--primary) !important;
}

/* Mobile hero fix, 2026-08-18. VERIFIED PRE-EXISTING on the source Vercel build (identical
   measurements there): .hero-content renders to x=383 on a 383px viewport, so the container's
   right padding is lost and the second CTA ("Free 15-Min Consultation") is clipped at the
   screen edge. That is the page's secondary conversion path, so it is worth correcting.
   Fix: give the hero copy real right padding and stack the CTAs full-width below 620px. */
@media (max-width: 620px) {
  .hero-content { padding-right: 24px; box-sizing: border-box; }
  .hero-buttons { flex-wrap: wrap; gap: 12px; }
  .hero-buttons .btn { width: 100%; justify-content: center; text-align: center; }
}

/* ── HERO CONTACT FORM (2026-08-19) ────────────────────────────────────────────
   Dylan: "We need a contact form somewhere on the hero of all pages."
   Posts to the REAL handler at /submit.php — the same one the main staging site uses.
   ⚠️ It replaces a SIMULATION: app.js had the contact form on a setTimeout that printed
   "Thank you! We received your message" and sent nothing anywhere. Field names here match
   submit.php exactly (name/business/phone/email/message/source_page + website_url honeypot).
   ──────────────────────────────────────────────────────────────────────────── */
.hero-form-wrap { max-width: 1200px; margin: 34px auto 0; padding: 0 24px; }
.hero-form { background: #fff; border: 1px solid rgba(23,52,82,.10); border-radius: 14px;
  box-shadow: 0 10px 34px rgba(23,52,82,.10); padding: 22px 24px 20px; }
.hero-form-title { font-weight: 700; color: var(--primary); font-size: 17px; margin: 0 0 14px; }
.hero-form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 14px; }
.hf { display: flex; flex-direction: column; gap: 5px; }
.hf > span { font-size: 12.5px; font-weight: 600; color: #4a5b6e; letter-spacing: .01em; }
.hf input, .hf textarea { font: inherit; font-size: 15px; padding: 10px 12px;
  border: 1.5px solid #d8e1ea; border-radius: 9px; background: #fbfdff; width: 100%; }
.hf input:focus, .hf textarea:focus { outline: 2px solid #9dc0e0; border-color: #9dc0e0; }
.hf-wide { grid-column: 1 / -1; }
.hf textarea { resize: vertical; min-height: 46px; }
.hf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.hero-form-btn { margin-top: 14px; }
.hero-form-note { font-size: 12.5px; color: #6b7a8c; margin: 10px 0 0; }
@media (max-width: 860px) { .hero-form-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .hero-form-grid { grid-template-columns: 1fr; }
  .hero-form { padding: 18px 16px 16px; }
  .hero-form-btn { width: 100%; justify-content: center; }
}

/* ── PINCHED HERO FORM (2026-08-19) ───────────────────────────────────────────
   Dylan: "pinch it, we need to see it when they land on the site."
   Measured at 1440x900 the 4-field version started at y=740 against a 900px fold, so most
   of it — including the submit button — sat below the fold, and on a 768px laptop all of it
   did. One row of three fields + the button brings the whole form above the fold.
   Labels are visually hidden rather than deleted, so screen readers still announce each
   field; placeholders alone are not an accessible label.
   ─────────────────────────────────────────────────────────────────────────── */
.hero-form-compact { padding: 14px 18px 16px; }
.hero-form-compact .hero-form-title { font-size: 14.5px; margin: 0 0 10px; color: #4a5b6e; font-weight: 600; }
.hero-form-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; align-items: center; }
.hf-c { display: block; }
.hf-c input { font: inherit; font-size: 15px; padding: 11px 13px; width: 100%;
  border: 1.5px solid #d8e1ea; border-radius: 9px; background: #fbfdff; }
.hf-c input:focus { outline: 2px solid #9dc0e0; border-color: #9dc0e0; }
.hf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero-form-compact .hero-form-btn { margin: 0; white-space: nowrap; }
@media (max-width: 900px) {
  .hero-form-row { grid-template-columns: 1fr 1fr; }
  .hero-form-compact .hero-form-btn { grid-column: 1 / -1; width: 100%; justify-content: center; }
}
@media (max-width: 560px) { .hero-form-row { grid-template-columns: 1fr; } }

/* Short-viewport hero tightening (2026-08-19). At 1366x768 the pinched form still ended 86px
   below the fold. The 154px hero padding-top was ~50px more than needed to clear the 28px
   offer bar + 76px header. This reclaims that only where vertical space is scarce, so tall
   screens keep their original breathing room. Goal: the form and its button land on screen
   without scrolling on a standard 768px laptop. */
@media (min-width: 861px) and (max-height: 860px) {
  .hero { padding-top: 116px !important; padding-bottom: 30px !important; }
  .hero h1 { font-size: clamp(34px, 3.4vw, 44px); }
  .hero-content > p { margin-bottom: 16px; }
  .hero-buttons { margin-bottom: 4px; }
  .hero-form-wrap { margin-top: 14px; }
  .hero-form-compact { padding: 12px 16px 14px; }
  .hero-form-compact .hero-form-title { margin-bottom: 8px; font-size: 14px; }
}

/* Final 21px. On short viewports the form's caption line is the least load-bearing element
   in the hero — the button text already says what the form does — so it goes, which lands
   the whole form (button included) above a 768px fold. */
@media (min-width: 861px) and (max-height: 800px) {
  .hero-form-compact .hero-form-title { display: none; }
  .hero-form-compact { padding: 12px 16px; }
  .hero-form-wrap { margin-top: 10px; }
}

/* ── SERVICE-AREA PAGES (2026-08-19) ──────────────────────────────────────────
   Hub + one page per town, generated from her own data.js: real local intros,
   real challenges, real FAQs, real city-resource links. Nothing invented.
   ─────────────────────────────────────────────────────────────────────────── */
.area-intro { font-size: 17px; line-height: 1.75; color: #4a5b6e; max-width: 760px; }
.container.narrow { max-width: 820px; }
.area-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 20px; }
.area-card { background: #fff; border: 1px solid rgba(23,52,82,.10); border-left: 3px solid #d4a373;
  border-radius: 10px; padding: 16px 18px; box-shadow: 0 4px 14px rgba(23,52,82,.05); }
.area-card p { margin: 0; font-size: 15px; line-height: 1.6; color: #3d4d5e; }
.area-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 22px; }
.area-tile { display: block; text-decoration: none; background: #fff; border: 1px solid rgba(23,52,82,.10);
  border-radius: 14px; padding: 22px 22px 20px; box-shadow: 0 6px 20px rgba(23,52,82,.07);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.area-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(23,52,82,.12); border-color: #d4a373; }
.area-tile h3 { margin: 0 0 2px; color: var(--primary); font-size: 19px; }
.area-tile-county { margin: 0 0 10px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: #8fa0b2; }
.area-tile p { font-size: 14.5px; line-height: 1.6; color: #556676; margin: 0 0 12px; }
.area-tile-cta { font-weight: 700; font-size: 14px; color: #d4a373; }
.area-links { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 0; margin: 14px 0 0; }
.area-links a { color: var(--primary); font-weight: 600; font-size: 15px; text-decoration: none; }
.area-links a:hover { text-decoration: underline; }
.area-nearby { margin-top: 26px; font-size: 16px; color: #4a5b6e; }
.area-resource { margin-top: 14px; font-size: 14.5px; color: #556676; }
.area-resource a { color: var(--primary); font-weight: 600; }

/* ── LONGFORM BLOCKS on city + service pages (2026-08-19) ─────────────────── */
.town-note { font-style: italic; color: #6b7a8c; border-left: 3px solid #d4a373; padding-left: 14px; margin-top: 16px; }
.ind-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 20px; }
.ind-card { background: #fff; border: 1px solid rgba(23,52,82,.10); border-radius: 12px; padding: 18px 20px;
  box-shadow: 0 4px 14px rgba(23,52,82,.05); }
.ind-card h3 { margin: 0 0 6px; font-size: 16px; color: var(--primary); }
.ind-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #556676; }
.area-card h3 { margin: 0 0 6px; font-size: 16px; color: var(--primary); }
.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.who-col ul { margin: 10px 0 0; padding-left: 20px; }
.who-col li { font-size: 15px; line-height: 1.7; color: #3d4d5e; margin-bottom: 6px; }
.cmp-wrap { overflow-x: auto; margin-top: 18px; -webkit-overflow-scrolling: touch; }
.cmp { width: 100%; border-collapse: collapse; min-width: 640px; background: #fff;
  border: 1px solid rgba(23,52,82,.12); border-radius: 12px; overflow: hidden; }
.cmp th, .cmp td { padding: 12px 14px; text-align: left; font-size: 14.5px;
  border-bottom: 1px solid rgba(23,52,82,.08); }
.cmp thead th { background: #f4f7fa; color: var(--primary); font-size: 13.5px;
  text-transform: uppercase; letter-spacing: .04em; }
.cmp tbody th { color: var(--primary); font-weight: 700; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 780px) { .who-grid { grid-template-columns: 1fr; gap: 18px; } }

/* ── BREADCRUMBS (2026-08-19) — visible trail + BreadcrumbList schema on every page
   below the homepage. Helps orientation on a 17-page site and gives Google the
   hierarchy explicitly rather than making it infer one from URLs. */
.breadcrumb { background: #f6f9fc; border-bottom: 1px solid rgba(23,52,82,.07); font-size: 13.5px; }
.breadcrumb .container { padding-top: 10px; padding-bottom: 10px; }
.breadcrumb a { color: #4a5b6e; text-decoration: none; }
.breadcrumb a:hover { color: var(--primary); text-decoration: underline; }
.breadcrumb span[aria-current] { color: var(--primary); font-weight: 600; }
.breadcrumb span[aria-hidden] { color: #b6c2ce; margin: 0 2px; }
/* h4s promoted to h3 for a sequential outline — keep their original visual weight. */
h3.was-h4 { font-size: 1.05rem; }

/* ── SOCIAL PROOF + CRO (2026-08-19) ──────────────────────────────────────────
   Every figure here is verified: 5.0 from 22 on Intuit's Find-a-ProAdvisor, 30 years,
   Elite Advanced Certified, free 15-minute call. Reviews are reproduced VERBATIM from her
   own directory profile and link back to the source so any claim can be checked.
   🛑 HER GOOGLE RATING IS DELIBERATELY ABSENT. It reads 5.0 from THREE reviews (live 08-18)
   and her own review gate requires five. Three is not a rating worth staking a page on.
   ─────────────────────────────────────────────────────────────────────────── */
.trust-row { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 14px 0 0; padding: 0; }
.trust-row li { font-size: 13.5px; color: #4a5b6e; display: flex; align-items: baseline; gap: 6px; }
.trust-row strong { color: var(--primary); font-size: 14.5px; }
.trust-row span { color: #7b8a99; }
.sp-stars { color: #e0a53c; letter-spacing: 1px; font-size: 13px; }

.sp-section { background: #f6f9fc; }
.sp-sub { color: #5b6b7c; max-width: 720px; margin-top: -4px; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 22px; }
.sp-card { margin: 0; background: #fff; border: 1px solid rgba(23,52,82,.10); border-radius: 14px;
  padding: 20px 22px; box-shadow: 0 6px 20px rgba(23,52,82,.06); display: flex; flex-direction: column; }
.sp-card .sp-stars { font-size: 15px; margin-bottom: 10px; }
.sp-card blockquote { margin: 0 0 14px; }
.sp-card blockquote p { margin: 0; font-size: 15px; line-height: 1.65; color: #3d4d5e; font-style: italic; }
.sp-card figcaption { margin-top: auto; border-top: 1px solid rgba(23,52,82,.08); padding-top: 12px; }
.sp-card figcaption strong { display: block; color: var(--primary); font-size: 14.5px; }
.sp-card figcaption span { display: block; font-size: 12.5px; color: #8595a5; }
.sp-verify { margin-top: 18px; font-size: 14px; }
.sp-verify a { color: var(--primary); font-weight: 600; }

.cta-band { background: linear-gradient(135deg, #173452 0%, #1e4b77 100%); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #dbe6f0; max-width: 640px; margin: 10px auto 22px; line-height: 1.7; }
.cta-band-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-band .btn-outline { border: 2px solid rgba(255,255,255,.6); color: #fff; background: transparent; }
.cta-band .btn-outline:hover { background: rgba(255,255,255,.1); }

/* Sticky click-to-call on phones — the highest-intent action on a mobile local site,
   and it was previously only reachable by scrolling back to the header. */
.mobile-call-bar { display: none; }
@media (max-width: 700px) {
  .mobile-call-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
    align-items: center; justify-content: center; gap: 8px; padding: 13px 16px;
    background: #173452; color: #fff; font-weight: 700; font-size: 16px; text-decoration: none;
    box-shadow: 0 -4px 18px rgba(0,0,0,.18); }
  body { padding-bottom: 56px; }
  .cta-band-actions .btn { width: 100%; justify-content: center; }
}
.grc-ask { margin: 0; font-size: 14.5px; color: #4a5b6e; line-height: 1.5; }

/* ── FOOTER v2 (2026-08-19) ───────────────────────────────────────────────────
   The previous footer carried FOUR links, so the 12 service and city pages were
   orphaned from every page's sitewide navigation — no crawl path, no link equity,
   and a visitor who scrolled to the bottom had no way to reach them.
   It also read "Serving Small Businesses Nationwide", which contradicted the local
   strategy the entire site is built on. Replaced with Robin's own stated footprint.
   ─────────────────────────────────────────────────────────────────────────── */
.site-footer-v2 { background: #12283f; color: #cdd9e5; padding: 52px 0 0; }
.footer-grid-v2 { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 34px; }
.site-footer-v2 h3 { color: #fff; font-size: 14px; text-transform: uppercase;
  letter-spacing: .09em; margin: 0 0 14px; }
.site-footer-v2 ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer-v2 a { color: #cdd9e5; text-decoration: none; font-size: 14.5px; }
.site-footer-v2 a:hover { color: #fff; text-decoration: underline; }
.f-brand img { margin-bottom: 14px; height: auto; }
.f-tag { color: #fff; font-weight: 700; font-size: 15.5px; margin: 0 0 8px; }
.f-blurb { font-size: 14px; line-height: 1.65; color: #9fb3c6; margin: 0; max-width: 340px; }
.f-contact li { font-size: 14.5px; color: #cdd9e5; }
.f-cta { margin-top: 16px; display: inline-flex; }
.f-more { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); }
.footer-bottom-v2 { margin-top: 42px; border-top: 1px solid rgba(255,255,255,.12);
  padding: 18px 0 22px; }
.footer-bottom-v2 p { margin: 0; font-size: 13px; color: #8fa5ba; }
.f-scope { margin-top: 5px !important; }
@media (max-width: 980px) { .footer-grid-v2 { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 600px) { .footer-grid-v2 { grid-template-columns: 1fr; } .f-blurb { max-width: none; } }

/* ── TEAM (2026-08-19) ────────────────────────────────────────────────────────
   Robin, Gabrielle and Lisa, straight from the `team` array in data.js.
   ⚠️ LISA HAS NO PHOTO ON RECORD. She renders as initials, NOT a stock portrait or a grey
   silhouette — the data.js rail is explicit that no image ships until Robin supplies a real
   one, and a fake face on a real employee is worse than no face.
   ⚠️ Brooke Martin is DEPARTED and is correctly absent from the array — do not restore her.
   ─────────────────────────────────────────────────────────────────────────── */
.tm-section { background: #fff; }
.tm-intro { color: #5b6b7c; max-width: 620px; }
.tm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 26px; }
.tm-card { background: #fff; border: 1px solid rgba(23,52,82,.10); border-radius: 16px;
  padding: 22px; box-shadow: 0 6px 22px rgba(23,52,82,.07); }
.tm-photo { width: 132px; height: 132px; margin: 0 auto 16px; border-radius: 50%; overflow: hidden;
  border: 3px solid #fff; box-shadow: 0 6px 18px rgba(23,52,82,.16); }
.tm-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.tm-photo-empty { display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1e4b77, #173452); }
.tm-initials { color: #fff; font-size: 40px; font-weight: 700; letter-spacing: .04em; }
.tm-card h3 { text-align: center; margin: 0 0 4px; font-size: 19px; color: var(--primary); }
.tm-role { text-align: center; margin: 0; font-size: 13.5px; color: #d4a373; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; }
.tm-base { display: block; text-align: center; font-size: 13px; color: #8fa0b2; margin-top: 3px; }
.tm-bio { margin-top: 14px; font-size: 14.5px; line-height: 1.65; color: #4a5b6e; }

/* ── NAV DROPDOWNS (2026-08-19) ───────────────────────────────────────────────
   Services (7 sub-services) and Service Areas (5 cities). Built on <button> +
   aria-expanded rather than hover-only, so the menus work by keyboard and on touch —
   a hover-only dropdown is unreachable on a phone, which is where most local traffic is.
   ─────────────────────────────────────────────────────────────────────────── */
.has-dd { position: relative; }
.dd-toggle { background: none; border: 0; cursor: pointer; font: inherit; display: inline-flex;
  align-items: center; gap: 6px; padding: 0; color: inherit; }
.dd-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .65; transition: transform .18s ease; }
.has-dd.open .dd-caret, .dd-toggle[aria-expanded="true"] .dd-caret { transform: rotate(180deg); }

/* 2026-08-19 — switched from an opacity/visibility fade to display:none.
   The fade left the panel computing opacity:0 permanently while visibility read "visible"
   and the links were still hit-testable: an invisible but clickable menu, which is worse
   than no animation. A navigation menu must not depend on a transition to be visible. */
.dd-panel { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  min-width: 264px; background: #fff; border: 1px solid rgba(23,52,82,.10); border-radius: 12px;
  box-shadow: 0 14px 38px rgba(23,52,82,.16); padding: 8px; margin: 0; list-style: none;
  display: none; z-index: 1300; }
.has-dd:hover .dd-panel, .has-dd:focus-within .dd-panel, .has-dd.open .dd-panel { display: block; }
/* hover bridge so the pointer can travel from the trigger to the panel */
.has-dd::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; }
.dd-panel li { margin: 0; }
.dd-link { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14.5px;
  color: #33465a; text-decoration: none; white-space: nowrap; }
.dd-link:hover, .dd-link:focus-visible { background: #f2f7fb; color: var(--primary); }
.dd-link.active { color: var(--primary); font-weight: 700; }
.dd-all { border-top: 1px solid rgba(23,52,82,.08); margin-top: 6px; padding-top: 6px; }
.dd-all .dd-link { color: #d4a373; font-weight: 700; }

/* On mobile the nav is a stacked panel — dropdowns become inline accordions rather than
   floating menus, so nothing is positioned off-screen. */
@media (max-width: 900px) {
  .dd-panel { position: static; transform: none; min-width: 0; box-shadow: none; border: 0;
    border-left: 2px solid rgba(23,52,82,.12); border-radius: 0; margin: 4px 0 6px 10px;
    padding: 0 0 0 8px; display: none; }
  .has-dd.open .dd-panel { display: block; }
  .has-dd:hover .dd-panel:not(.open) { display: none; }
  .has-dd::after { content: none; }
  .dd-link { white-space: normal; }
}

/* Hero tagline demoted above the H1 (Ryan, 2026-08-19): the headline should say what she does
   and where; "We Teach Accounting In Plain English" reads as the strapline it is. */
.hero-tagline { font-size: 15px; font-weight: 600; letter-spacing: .02em; color: #6b7a8c;
  margin: 0 0 6px; }
/* "How you have her face, I would make that a little bit bigger." */
.rr-face img { width: 128px; height: 128px; }
@media (max-width: 600px) { .rr-face img { width: 112px; height: 112px; } }

/* ── HOW WE WORK (2026-08-19) ─────────────────────────────────────────────────
   Dylan: "we need how we work, like steps, from website to on site."
   Six steps, each traceable to copy already written for this client — the free-hour offer
   in data.js, the "written scope and a monthly figure" line, and the switching steps in
   services-longform.js. Nothing here is a generic agency process template.
   Numbered <ol> so the order is semantic, not just visual.
   ─────────────────────────────────────────────────────────────────────────── */
/* alt tone so the timeline separates from the white services block above it —
   the page had run white/white/white through this stretch. */
.hw-section { background: #f3f5f8; }
.hw-intro { color: #5b6b7c; margin-top: -4px; }

/* 2026-08-19 — was a card grid, which made it the THIRD consecutive card section on the
   homepage and read as more of the same. It is a SEQUENCE, not a set of peers, so it is now
   a numbered timeline: connected steps, no boxes, white ground so it alternates with the
   section-alt blocks either side instead of fighting them. */
.hw-list { list-style: none; counter-reset: hw; margin: 30px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 26px; position: relative; }
.hw-step { position: relative; display: block; background: none; border: 0;
  border-radius: 0; padding: 0 8px 0 0; box-shadow: none; }
/* connector between steps in a row */
.hw-step::after { content: ""; position: absolute; top: 19px; left: 46px; right: -26px;
  height: 2px; background: linear-gradient(90deg, rgba(212,163,115,.55), rgba(212,163,115,.12)); }
.hw-step:nth-child(3n)::after, .hw-step:last-child::after { display: none; }
.hw-num { width: 38px; height: 38px; border-radius: 50%; background: #173452; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px;
  position: relative; z-index: 1; }
.hw-body { padding-top: 14px; }
.hw-body h3 { margin: 0 0 6px; font-size: 16.5px; color: var(--primary); line-height: 1.3; }
.hw-body p { margin: 0; font-size: 14.5px; line-height: 1.65; color: #4a5b6e; }
.hw-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
@media (max-width: 900px) {
  .hw-list { grid-template-columns: 1fr; gap: 0; }
  .hw-step { display: grid; grid-template-columns: 38px 1fr; gap: 0 16px; padding-bottom: 24px; }
  .hw-step::after { top: 44px; bottom: -4px; left: 18px; right: auto; width: 2px; height: auto;
    background: linear-gradient(180deg, rgba(212,163,115,.55), rgba(212,163,115,.12)); }
  .hw-step:nth-child(3n)::after { display: block; }
  .hw-step:last-child::after { display: none; }
  .hw-body { padding-top: 6px; }
}
@media (max-width: 600px) { .hw-cta .btn { width: 100%; justify-content: center; } }

/* County grouping on the service-areas hub (2026-08-19). Towns now sit under their real
   county rather than in one flat list — matches how people describe where they are locally,
   and the counties are the ones already in data.js, not invented groupings. */
.county-block { margin-top: 30px; }
.county-block:first-of-type { margin-top: 18px; }
.county-h { font-size: 20px; color: var(--primary); margin: 0 0 2px; }
.county-sub { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  color: #8fa0b2; margin: 0 0 14px; }
.area-tile h4 { margin: 0 0 8px; color: var(--primary); font-size: 18px; }

/* Contact page (2026-08-19): .contact-grid declared two columns but held ONE child, so the
   map, details and form were all stacked in the 491px column with 600px sitting empty beside
   them. The form is now the grid's second child, which is what the column widths were for. */
.contact-form-container { align-self: start; background: #fff; border: 1px solid rgba(23,52,82,.10);
  border-radius: 14px; padding: 26px 28px; box-shadow: 0 8px 26px rgba(23,52,82,.07); }
@media (max-width: 900px) { .contact-form-container { margin-top: 26px; } }