/*
Theme Name: FairProcess HR
Theme URI: https://www.fairprocesshr.co.uk/
Author: FairProcess HR
Description: Custom theme for FairProcess HR — UK HR consultancy for SMEs. Navy/teal brand, WooCommerce-ready.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: fairprocesshr
*/

/* ============================================================
   FairProcess HR — Main Stylesheet
   Brand: Navy #1F3A5F | Teal #2A9D8F | Grey #E9ECEF | White #FFFFFF
   Fonts: Montserrat (headings) | Open Sans (body)
   ============================================================ */

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

:root {
  --navy:       #1F3A5F;
  --navy-dark:  #162b47;
  --teal:       #2A9D8F;
  --teal-dark:  #21887b;
  --grey:       #E9ECEF;
  --grey-mid:   #ced4da;
  --grey-dark:  #6c757d;
  --white:      #FFFFFF;
  --text:       #2d3748;
  --text-light: #4a5568;
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);
  --radius:     8px;
  --radius-lg:  16px;
  --transition: 0.25s ease;
}

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

body {
  font-family: 'Open Sans', sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--teal); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--teal-dark); }
ul { list-style: none; }

/* ── Typography ───────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.25;
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.1rem; }

p { margin-bottom: 1rem; color: var(--text-light); }
p:last-child { margin-bottom: 0; }

/* ── Generic page content (page.php — legal pages etc.) ─────
   The default template has no dedicated markup of its own, so
   content typed into the block editor needs its own spacing:
   the global reset leaves list items and headings with no gap. */
.page-content p { margin-bottom: 1.25rem; }
.page-content h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.page-content h3:first-child { margin-top: 0; }
.page-content ul {
  list-style: disc;
  margin: 0 0 1.25rem 1.25rem;
}
.page-content li {
  margin-bottom: 0.6rem;
  padding-left: 0.25rem;
}
.page-content li:last-child { margin-bottom: 0; }

.lead {
  font-size: 1.15rem;
  color: var(--text-light);
  line-height: 1.8;
}

/* ── Layout ───────────────────────────────────────────────── */
.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section {
  padding: 5rem 0;
}

.section--grey {
  background: var(--grey);
}

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

.section--navy h2,
.section--navy h3,
.section--navy h4 { color: var(--white); }
.section--navy p   { color: rgba(255,255,255,0.8); }

.section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 3.5rem;
}

.section-header p {
  font-size: 1.05rem;
  margin-top: 0.75rem;
}

.section-label {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 0.6rem;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  padding: 0.8rem 1.75rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--teal);
  color: var(--white);
  border-color: var(--teal);
}
.btn-primary:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(42,157,143,0.35);
}

.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.6);
}
.btn-outline:hover {
  background: rgba(255,255,255,0.12);
  border-color: var(--white);
  color: var(--white);
}

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

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

.btn-lg {
  padding: 1rem 2.25rem;
  font-size: 1rem;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* ── Header / Navigation ──────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--white);
  border-bottom: 1px solid var(--grey);
  box-shadow: var(--shadow-sm);
  /* iOS Safari can mis-time position:sticky against its own address-bar
     collapse/expand animation, briefly leaving a gap/overlap above the
     header as it scrolls (page content peeking through above it). Forcing
     the header onto its own compositing layer stops WebKit re-measuring
     the sticky offset mid-animation and fixes that. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
}

.site-header--scrolled {
  box-shadow: 0 2px 16px rgba(0,0,0,0.1);
}

/* When logged into wp-admin, the admin toolbar is fixed at the true
   top of the viewport (higher z-index than anything on the page), so
   a sticky header pinned to top:0 scrolls up underneath it and gets
   its top edge cropped. Offset by the toolbar's height instead. */
body.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

/* Header cart icon */
.header-cart-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  margin-left: 0.5rem;
  color: var(--navy);
  border-radius: var(--radius);
  transition: all var(--transition);
}

.header-cart-link:hover {
  background: var(--grey);
  color: var(--teal);
}

.header-cart-link .cart-icon {
  width: 22px;
  height: 22px;
}

.header-cart-link .cart-count {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  border-radius: 999px;
  border: 2px solid var(--white);
}

.header-cart-link .cart-count.is-empty {
  display: none;
}

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

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-svg { width: 42px; height: 42px; flex-shrink: 0; }

.logo-text { display: flex; flex-direction: column; line-height: 1.1; }

.logo-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--navy);
  letter-spacing: -0.01em;
}

.logo-tag {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--teal);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-links a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius);
  transition: all var(--transition);
  letter-spacing: 0.01em;
}

.nav-links a:hover,
.nav-links a.active,
.nav-links li.current-menu-item a {
  color: var(--navy);
  background: var(--grey);
}

.nav-cta {
  margin-left: 0.75rem;
}

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

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: all var(--transition);
}

.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, var(--navy) 0%, #2a4a7a 100%);
  padding: 6rem 0 5rem;
  position: relative;
  overflow: hidden;
  /* Give this its own compositor layer too, matching .site-header. When
     only the sticky header was promoted, it updated via the compositor
     every frame while this section's gradient repainted on the slower
     main thread — the mismatch is what let hero text visibly race ahead
     of/through the header during scroll. Promoting both sides removes
     the race. */
  transform: translateZ(0);
  backface-visibility: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(42,157,143,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -40px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(42,157,143,0.10) 0%, transparent 70%);
  pointer-events: none;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.hero-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(42,157,143,0.2);
  color: #6ee7df;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  border-radius: 100px;
  margin-bottom: 1.5rem;
}

.hero h1 {
  color: var(--white);
  margin-bottom: 1.25rem;
}

.hero h1 span { color: #6ee7df; }

.hero .lead {
  color: rgba(255,255,255,0.82);
  margin-bottom: 2.25rem;
  font-size: 1.1rem;
}

.hero-stats {
  display: flex;
  gap: 2rem;
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.hero-stat-value {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}

.hero-stat-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.65);
  margin-top: 0.25rem;
}

.hero-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero-photo {
  width: 100%;
  max-width: 400px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.45);
  position: relative;
  z-index: 1;
}

.hero-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: 2rem;
  backdrop-filter: blur(10px);
  width: 100%;
  max-width: 360px;
  position: relative;
  z-index: 2;
  margin-top: -2.5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.hero-card-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--white);
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero-check-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.9);
  font-size: 0.9rem;
}
.hero-check-item:last-child { border-bottom: none; }

.hero-check-item svg {
  flex-shrink: 0;
  color: #6ee7df;
}

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--grey);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: all var(--transition);
}

.card:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.card-icon {
  width: 52px;
  height: 52px;
  background: rgba(42,157,143,0.1);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  color: var(--teal);
}

.card h3 { margin-bottom: 0.6rem; font-size: 1.1rem; }
.card p  { font-size: 0.92rem; margin-bottom: 0; }

/* ── Grid Layouts ─────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

/* ── Why Choose Section ───────────────────────────────────── */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.why-item {
  text-align: center;
  padding: 2rem 1.25rem;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--grey);
  transition: all var(--transition);
}

.why-item:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-md);
}

.why-icon {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--teal), #3dbfb2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.1rem;
  color: var(--white);
}

.why-item h4 {
  font-size: 0.95rem;
  color: var(--navy);
  margin-bottom: 0.4rem;
}

.why-item p {
  font-size: 0.85rem;
  margin: 0;
}

/* ── Testimonials ─────────────────────────────────────────── */
.testimonial-card {
  background: var(--white);
  border: 1px solid var(--grey);
  border-radius: var(--radius-lg);
  padding: 2rem;
  position: relative;
}

.testimonial-card::before {
  content: '\201C';
  font-size: 4rem;
  color: var(--teal);
  opacity: 0.25;
  position: absolute;
  top: 0.5rem;
  left: 1.5rem;
  font-family: Georgia, serif;
  line-height: 1;
}

.testimonial-text {
  font-size: 0.95rem;
  color: var(--text-light);
  font-style: italic;
  margin-bottom: 1.25rem;
  padding-top: 1rem;
}

.testimonial-author {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--navy);
}

.testimonial-role {
  font-size: 0.82rem;
  color: var(--grey-dark);
  margin: 0;
}

.testimonial-footer {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--teal));
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.stars {
  color: #f59e0b;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

/* ── Pricing ──────────────────────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  align-items: start;
}

.pricing-card {
  background: var(--white);
  border: 2px solid var(--grey);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  position: relative;
  transition: all var(--transition);
}

.pricing-card:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-md);
}

.pricing-card.featured {
  border-color: var(--teal);
  box-shadow: var(--shadow-lg);
}

.pricing-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--teal);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 1rem;
  border-radius: 100px;
  white-space: nowrap;
}

.pricing-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--navy);
  margin-bottom: 0.25rem;
}

.pricing-price {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 2.25rem;
  color: var(--navy);
  line-height: 1;
  margin: 0.75rem 0 0.25rem;
}

.pricing-price span {
  font-size: 1rem;
  font-weight: 600;
  color: var(--grey-dark);
}

.pricing-desc {
  font-size: 0.88rem;
  color: var(--grey-dark);
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--grey);
}

.pricing-features {
  margin-bottom: 1.75rem;
}

.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--text-light);
  padding: 0.35rem 0;
}

.pricing-features li svg {
  flex-shrink: 0;
  color: var(--teal);
  margin-top: 2px;
}

/* ── Services Page ────────────────────────────────────────── */
.service-detail {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 2.25rem;
  align-items: start;
  padding: 3rem 0;
  border-bottom: 1px solid var(--grey);
}

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

.service-detail-icon {
  width: 80px; height: 80px;
  background: linear-gradient(135deg, rgba(42,157,143,0.12), rgba(42,157,143,0.06));
  border: 2px solid rgba(42,157,143,0.2);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
}

.service-includes {
  margin: 1rem 0;
}

.service-includes li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--text-light);
  padding: 0.3rem 0;
}

.service-includes li svg { flex-shrink: 0; color: var(--teal); margin-top: 3px; }

/* ── Shop / Templates ─────────────────────────────────────── */
.shop-card {
  background: var(--white);
  border: 1px solid var(--grey);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
}

.shop-card:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.shop-card-header {
  background: linear-gradient(135deg, var(--navy), #2a4a7a);
  padding: 1.75rem;
  color: var(--white);
  position: relative;
}

.shop-card-tag {
  display: inline-block;
  background: rgba(42,157,143,0.3);
  color: #6ee7df;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 100px;
  margin-bottom: 0.75rem;
}

.shop-card-header h3 {
  color: var(--white);
  font-size: 1.15rem;
}

.shop-card-body {
  padding: 1.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.shop-card-includes {
  margin-bottom: 1.25rem;
  flex: 1;
}

.shop-card-includes li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--text-light);
  padding: 0.25rem 0;
}

.shop-card-includes li svg { flex-shrink: 0; color: var(--teal); margin-top: 2px; }

.shop-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.25rem;
  border-top: 1px solid var(--grey);
}

.shop-price {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--navy);
}

/* ── About ────────────────────────────────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 4rem;
  align-items: start;
}

.about-grid > div { min-width: 0; }

.about-sidebar {
  position: sticky;
  top: 100px;
}

.credential-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--grey);
  font-size: 0.92rem;
  color: var(--text-light);
}
.credential-list li:last-child { border-bottom: none; }
.credential-list li svg { flex-shrink: 0; color: var(--teal); margin-top: 2px; }

.values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
}

.value-item {
  background: var(--grey);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.value-item h4 {
  font-size: 0.9rem;
  color: var(--navy);
  margin-bottom: 0.25rem;
}

.value-item p {
  font-size: 0.83rem;
  margin: 0;
}

/* ── Contact ──────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 4rem;
  align-items: start;
}

/* Grid items get an automatic min-width based on their content's
   min-content size by default. Contact Form 7 renders text inputs with
   a native size="40" attribute, which gives them a large intrinsic
   width — without this reset that blows out the whole shared grid
   column (both the sidebar and the form) wider than the viewport on
   mobile, even though the inputs themselves are set to width:100%. */
.contact-grid > div { min-width: 0; }

.contact-info-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.contact-info-icon {
  width: 44px; height: 44px;
  background: rgba(42,157,143,0.1);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  flex-shrink: 0;
}

.contact-info-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.2rem;
}

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

.form-group label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--navy);
  margin-bottom: 0.4rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--grey-mid);
  border-radius: var(--radius);
  font-family: 'Open Sans', sans-serif;
  font-size: 0.92rem;
  color: var(--text);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(42,157,143,0.12);
}

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

/* Scoped to .form-group specifically — this is leftover CSS from the
   original static prototype, unused by any current theme template.
   Left unscoped, it was a bare ".form-row" selector that also matches
   WooCommerce's own "form-row" class on individual checkout fields
   (form-row-first/form-row-last etc.) — after a WooCommerce update
   changed the checkout markup, that collision started forcing each
   single field's label/input/error-message into a 2-column grid,
   scattering them (the "all over the place" checkout layout). */
.form-group .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* ── CTA Banner ───────────────────────────────────────────── */
.cta-banner {
  background: linear-gradient(135deg, var(--navy), #2a4a7a);
  padding: 5rem 0;
  text-align: center;
}

.cta-banner h2 { color: var(--white); margin-bottom: 1rem; }
.cta-banner p  { color: rgba(255,255,255,0.8); font-size: 1.05rem; margin-bottom: 2rem; }

/* ── Resources ────────────────────────────────────────────── */
.resource-card {
  background: var(--white);
  border: 1px solid var(--grey);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  transition: all var(--transition);
}

.resource-card:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-sm);
}

.resource-icon {
  width: 48px; height: 48px;
  background: rgba(42,157,143,0.1);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  flex-shrink: 0;
}

.resource-card h4 { font-size: 0.95rem; margin-bottom: 0.3rem; }
.resource-card p  { font-size: 0.85rem; margin-bottom: 0.75rem; }

/* Lead Magnet Banner */
.lead-magnet {
  background: linear-gradient(135deg, var(--teal), #3dbfb2);
  border-radius: var(--radius-lg);
  padding: 3rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
}

.lead-magnet h3 { color: var(--white); margin-bottom: 0.5rem; }
.lead-magnet p  { color: rgba(255,255,255,0.88); margin: 0; }

/* ── Page Hero (inner pages) ──────────────────────────────── */
.page-hero {
  background: linear-gradient(135deg, var(--navy), #2a4a7a);
  padding: 4rem 0 3.5rem;
  text-align: center;
  /* See .hero above — same compositor-layer fix, same reason (this is
     the section that was showing text bleeding above the sticky header
     on Services/Templates/Pricing etc.). */
  transform: translateZ(0);
  backface-visibility: hidden;
}

.page-hero h1 { color: var(--white); margin-bottom: 0.75rem; }
.page-hero p  { color: rgba(255,255,255,0.78); font-size: 1.05rem; max-width: 560px; margin: 0 auto; }

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.25rem;
  font-size: 0.82rem;
}

.breadcrumb a { color: rgba(255,255,255,0.6); }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb span { color: rgba(255,255,255,0.4); }
.breadcrumb .current { color: rgba(255,255,255,0.9); }

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
  background: var(--navy-dark);
  color: rgba(255,255,255,0.7);
  padding: 4rem 0 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-brand p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.6);
  margin: 1rem 0 1.5rem;
  max-width: 280px;
}

.footer-logo-text .logo-name { color: var(--white); }
.footer-logo-text .logo-tag  { color: rgba(42,157,143,0.9); }

.footer-heading {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--white);
  margin-bottom: 1.1rem;
}

.footer-links li { padding: 0.3rem 0; }
.footer-links a {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.6);
  transition: color var(--transition);
}
.footer-links a:hover { color: var(--teal); }

.footer-contact li {
  display: flex;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 0.6rem;
  align-items: flex-start;
}
.footer-contact svg { flex-shrink: 0; color: var(--teal); margin-top: 2px; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-bottom-links {
  display: flex;
  gap: 1.5rem;
}

.footer-bottom-links a {
  color: rgba(255,255,255,0.5);
  font-size: 0.82rem;
}

.footer-bottom-links a:hover { color: var(--teal); }

/* ── Utilities ────────────────────────────────────────────── */
.text-teal  { color: var(--teal); }
.text-navy  { color: var(--navy); }
.text-white { color: var(--white); }
.text-center { text-align: center; }
.text-small { font-size: 0.85rem; }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 2rem; }

.badge {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 100px;
}

.badge-teal { background: rgba(42,157,143,0.12); color: var(--teal); }
.badge-navy { background: rgba(31,58,95,0.1); color: var(--navy); }

.divider {
  height: 1px;
  background: var(--grey);
  margin: 2rem 0;
}

/* ── Notice bar ───────────────────────────────────────────── */
.notice-bar {
  background: var(--teal);
  color: var(--white);
  font-size: 0.85rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  padding: 0.6rem 1rem;
}

.notice-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.6rem;
  max-width: 100%;
}

.notice-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.notice-bar-item svg { flex-shrink: 0; }

.notice-bar-divider { opacity: 0.6; }

.notice-bar a {
  color: var(--white);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .notice-bar { font-size: 0.78rem; padding: 0.55rem 1rem; }
  .notice-bar-divider { display: none; }
  .notice-bar-inner { display: block; }
  /* On mobile each item becomes a plain block so its own icon+text+link
     content wraps like normal text — as inline-flex rows they were each
     forced onto a single unbreakable line (flex items don't wrap
     internally by default), which is what was overflowing/looking odd. */
  .notice-bar-item {
    display: block;
    text-align: center;
  }
  .notice-bar-item + .notice-bar-item { margin-top: 0.3rem; }
  .notice-bar-item svg { vertical-align: -2px; margin-right: 0.2rem; }
}

/* ── Pricing table — stack into cards on small phones instead of ────
   forcing a horizontal scroll (3 columns of padded text don't fit a
   narrow viewport) ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  .pricing-table-wrap { overflow-x: visible; }

  .pricing-table, .pricing-table tbody, .pricing-table tr, .pricing-table td {
    display: block;
    width: 100%;
  }

  .pricing-table thead { display: none; }

  .pricing-table tr {
    margin-bottom: 1rem;
    border: 1px solid var(--grey-mid);
    border-radius: var(--radius);
    overflow: hidden;
  }

  .pricing-table td {
    border-bottom: 1px solid var(--grey) !important;
  }

  .pricing-table td:last-child { border-bottom: none !important; }

  .pricing-table td::before {
    content: attr(data-label);
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--teal);
    margin-bottom: 0.25rem;
  }

  .pricing-table td:nth-child(1)::before { content: "Service"; }
  .pricing-table td:nth-child(2)::before { content: "Description"; }
  .pricing-table td:nth-child(3)::before { content: "Fee"; }
}

/* ── WooCommerce brand alignment ──────────────────────────── */
.woocommerce ul.products li.product .price,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  font-family: 'Montserrat', sans-serif;
}

.woocommerce a.button,
.woocommerce button.button.alt,
.woocommerce #respond input#submit,
.woocommerce input.button.alt,
.woocommerce #place_order {
  background: var(--teal) !important;
  color: var(--white) !important;
  border-radius: var(--radius) !important;
  font-weight: 600 !important;
  border: none !important;
  padding: 0.8rem 1.75rem !important;
  transition: all var(--transition);
}

.woocommerce a.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover {
  background: var(--teal-dark) !important;
  transform: translateY(-1px);
}

.woocommerce ul.products li.product .price ins,
.woocommerce span.price {
  color: var(--navy);
  font-weight: 700;
}

/* Single product page — summary column (title, price, buy area) */
.woocommerce div.product .summary {
  padding-top: 0.25rem;
}

.woocommerce div.product .summary .price {
  font-size: 1.7rem;
  display: block;
  margin: 0.75rem 0 1.5rem;
}

.woocommerce div.product form.cart {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--grey);
}

.woocommerce div.product form.cart .quantity {
  margin: 0;
}

.woocommerce div.product form.cart .quantity .qty {
  width: 64px;
  height: 48px;
  border: 1px solid var(--grey);
  border-radius: var(--radius);
  text-align: center;
  font-size: 1rem;
  padding: 0 0.5rem;
}

.woocommerce div.product form.cart .button {
  height: 48px;
  font-size: 0.95rem;
}

/* Category/tag meta line under the buy button — not needed on this site */
.woocommerce div.product .product_meta {
  display: none;
}

.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--teal) !important;
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--teal) !important;
}

/* Woo page wrapper (added via functions.php hooks) */
.woocommerce-main {
  padding: 3rem 0 5rem;
}

.woocommerce-main h1.entry-title,
.woocommerce-main h1.page-title {
  font-family: 'Montserrat', sans-serif;
  color: var(--navy);
  margin-bottom: 2rem;
}

/* Shop / archive product grid — matches .card visual language */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 1.5rem;
  list-style: none;
}

/* WooCommerce core CSS sets fixed % widths + float on li.product depending
   on the columns-N class (e.g. related products defaults to columns-4) —
   override so our grid layout above always wins regardless of load order. */
.woocommerce ul.products.columns-1 li.product,
.woocommerce ul.products.columns-2 li.product,
.woocommerce ul.products.columns-3 li.product,
.woocommerce ul.products.columns-4 li.product,
.woocommerce ul.products.columns-5 li.product,
.woocommerce ul.products.columns-6 li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}

.woocommerce ul.products li.product {
  background: var(--white);
  border: 1px solid var(--grey);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: all var(--transition);
  text-align: left;
}

.woocommerce ul.products li.product:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.woocommerce ul.products li.product img {
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.05rem;
  color: var(--navy);
  margin-bottom: 0.4rem;
}

.woocommerce ul.products li.product .button {
  margin-top: 1rem;
  width: 100%;
  text-align: center;
  justify-content: center;
}

/* This theme's design has no sidebar anywhere — hide the "#sidebar"
   widget area that WooCommerce/WordPress outputs by default on some
   pages (shows default Search/Pages/Archives/Categories widgets that
   were never intended to appear here). */
#sidebar[role="complementary"] {
  display: none !important;
}

/* Single product page */
.woocommerce div.product .product_title {
  font-family: 'Montserrat', sans-serif;
  color: var(--navy);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--navy);
  font-size: 1.5rem;
  font-weight: 700;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--text-light);
  margin: 1rem 0;
}

.woocommerce div.product form.cart {
  margin-top: 1.5rem;
}

.woocommerce-tabs ul.tabs li a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: var(--text);
}

.woocommerce-tabs ul.tabs li.active a {
  color: var(--navy);
}

/* Cart & Checkout tables/forms */
.woocommerce table.shop_table {
  border: 1px solid var(--grey);
  border-radius: var(--radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.woocommerce table.shop_table th {
  background: var(--navy);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1rem 1.25rem;
}

.woocommerce table.shop_table td {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--grey);
}

.woocommerce #content table.cart td.actions .button,
.woocommerce-page #content table.cart td.actions .button {
  background: var(--teal) !important;
}

.woocommerce table.cart td.actions .coupon {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.woocommerce table.cart td.actions .coupon .input-text {
  width: 220px;
  height: 48px;
  padding: 0 1rem;
  border: 1px solid var(--grey);
  border-radius: var(--radius);
  font-size: 1rem;
  box-sizing: border-box;
}

.woocommerce table.cart td.actions .coupon button.button,
.woocommerce table.cart td.actions > button.button {
  height: 48px;
  white-space: nowrap;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout #payment .form-row input,
.woocommerce-checkout .woocommerce-additional-fields select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--grey-mid);
  border-radius: var(--radius);
  font-family: 'Open Sans', sans-serif;
  font-size: 0.92rem;
  color: var(--text);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(42,157,143,0.12);
  outline: none;
}

.woocommerce form .form-row label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--navy);
}

#order_review,
.woocommerce-checkout-review-order {
  background: var(--grey);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}

.woocommerce-checkout #payment {
  background: var(--white);
  border: 1px solid var(--grey);
  border-radius: var(--radius-lg);
}

/* My Account */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
}

.woocommerce-MyAccount-navigation li a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text);
  display: block;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius);
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
  background: var(--grey);
  color: var(--navy);
}

/* Woo shop page mobile */
@media (max-width: 768px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr;
  }
}

/* ── Contact Form 7 brand alignment ───────────────────────── */
.wpcf7-form p { margin-bottom: 1.25rem; }

/* Cloudflare Turnstile is injected by CF7 itself at the very top of every
   protected form (there is no editable [turnstile] tag in the form template
   to move) so it is repositioned visually with flex order instead, to sit
   just above the submit button rather than above the first field. */
.wpcf7-form {
  display: flex;
  flex-direction: column;
}

.wpcf7-form > .wpcf7-turnstile {
  order: 10;
  margin-bottom: 1.25rem;
}

.wpcf7-form label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--navy);
  margin-bottom: 0.4rem;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--grey-mid);
  border-radius: var(--radius);
  font-family: 'Open Sans', sans-serif;
  font-size: 0.92rem;
  color: var(--text);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(42,157,143,0.12);
}

.wpcf7-form textarea { resize: vertical; min-height: 110px; }

.wpcf7-form input[type="submit"] {
  width: 100%;
  justify-content: center;
  background: var(--teal);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.8rem 1.75rem;
  cursor: pointer;
  transition: all var(--transition);
}

.wpcf7-form input[type="submit"]:hover {
  background: var(--teal-dark);
}

/* Submit button is full-width, so the default wpcf7-spinner (an inline-block
   span placed right after the button in the DOM) has nowhere to sit beside it
   and drops onto its own line, left-aligned. Anchor it centred over the
   button instead. */
.wpcf7-form p:has(input[type="submit"]) {
  position: relative;
  order: 11;
}

.wpcf7-form .wpcf7-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

.wpcf7-form input[type="checkbox"] { width: auto; margin-right: 0.5rem; }

.wpcf7-form .fphr-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.wpcf7-form .fphr-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.83rem;
  color: var(--grey-dark);
}

.wpcf7-response-output {
  border-radius: var(--radius) !important;
  font-size: 0.88rem !important;
  margin: 1rem 0 0 !important;
  order: 12;
}

.wpcf7-not-valid-tip {
  color: #e53e3e;
  font-size: 0.8rem;
  margin-top: 0.3rem;
}

@media (max-width: 768px) {
  .wpcf7-form .fphr-row { grid-template-columns: 1fr; }
}

/* ── Templates Strip (homepage) ──────────────────────────── */
.templates-strip { background: var(--navy); border-top: 3px solid var(--teal); padding: 2rem 0; }
.templates-strip-inner { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; justify-content: space-between; }
.templates-strip-brand { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.templates-strip-pills { display: flex; gap: 0.75rem; flex-wrap: wrap; flex: 1; justify-content: center; min-width: 0; }
.templates-strip-pill { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 0.6rem 1rem; text-decoration: none; display: flex; align-items: center; gap: 0.6rem; white-space: nowrap; }
.templates-strip-cta { flex-shrink: 0; font-size: 0.85rem; padding: 0.65rem 1.25rem; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .about-grid,
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-sidebar { position: static; }
  .hero-inner { gap: 2.5rem; }
}

@media (max-width: 768px) {
  .section { padding: 3.5rem 0; }

  .templates-strip-inner { flex-direction: column; align-items: stretch; gap: 1rem; }
  .templates-strip-brand { justify-content: center; }
  .templates-strip-pills { justify-content: center; width: 100%; }
  .templates-strip-pill { flex: 1 1 auto; justify-content: center; }
  .templates-strip-cta { width: 100%; text-align: center; }

  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .header-cart-link { margin-left: auto; }

  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 72px;
    left: 0; right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--grey);
    padding: 1rem 1.5rem 1.5rem;
    gap: 0.25rem;
    box-shadow: var(--shadow-md);
    z-index: 999;
  }

  .nav-links.open a {
    padding: 0.65rem 1rem;
    display: block;
  }

  .nav-cta { margin-left: 0; margin-top: 0.5rem; }

  .hero { padding: 4rem 0 3rem; }
  .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-visual { display: none; }
  .hero-stats { gap: 1.5rem; }

  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }

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

  .service-detail {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

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

  .lead-magnet {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; }

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

  .contact-response-row { flex-direction: column; align-items: flex-start !important; gap: 0.2rem; }
  .contact-form-card { padding: 1.5rem !important; }
}

@media (max-width: 480px) {
  .why-grid { grid-template-columns: 1fr; }
  .hero-stats { flex-direction: column; gap: 1rem; }
  .btn-group { flex-direction: column; align-items: flex-start; }
}