/* ============================================================
   DadBod Contractors - Main Stylesheet
   ============================================================ */

/* 1. Variables
   2. Reset & Base
   3. Typography
   4. Layout Utilities
   5. Buttons
   6. Navigation
   7. Hero
   8. How It Works
   9. Chat Demo
  10. Contractor Section
  11. Pricing
  12. Trust
  13. Platforms
  14. AI Assistance
  15. About / Brand Story
  16. Video Placeholder
  17. CTA Section
  18. Footer
  19. WhatsApp Float
  20. Forms
  21. Page Heroes (apply, pricing)
  22. Apply Page
  23. Pricing Table Page
  24. Scroll Animations
  25. Back-to-top
  26. Responsive
   ============================================================ */

/* ─────────────────────────────────────────
   1. CSS VARIABLES
───────────────────────────────────────── */
:root {
  /* Brand */
  --c-navy:         #0F2557;
  --c-navy-light:   #1A3A7A;
  --c-dark:         #0A1628;
  --c-blue:         #2E86C1;
  --c-blue-light:   #3498DB;
  --c-gold:         #F59E0B;
  --c-gold-dark:    #D97706;
  --c-whatsapp:     #25D366;
  --c-whatsapp-dk:  #1DAE54;

  /* Neutrals */
  --c-text:         #1E293B;
  --c-muted:        #64748B;
  --c-white:        #FFFFFF;
  --c-gray-50:      #F8FAFC;
  --c-gray-100:     #F1F5F9;
  --c-gray-200:     #E2E8F0;
  --c-gray-300:     #CBD5E1;

  /* Typography */
  --ff-heading:     'Poppins', -apple-system, sans-serif;
  --ff-body:        'Inter',   -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing scale */
  --sp-1:  .25rem;  --sp-2:  .5rem;   --sp-3:  .75rem;
  --sp-4:  1rem;    --sp-5:  1.25rem; --sp-6:  1.5rem;
  --sp-7:  1.75rem; --sp-8:  2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;    --sp-20: 5rem;    --sp-24: 6rem;

  /* Radii */
  --r-sm:   .375rem; --r-md:   .75rem;
  --r-lg:   1rem;    --r-xl:   1.5rem;
  --r-full: 9999px;

  /* Shadows */
  --sh-sm:  0 1px 2px rgba(0,0,0,.05);
  --sh-md:  0 4px 12px rgba(0,0,0,.08);
  --sh-lg:  0 12px 30px rgba(0,0,0,.12);
  --sh-xl:  0 24px 50px rgba(0,0,0,.18);

  /* Transitions */
  --t-fast: 150ms ease;
  --t:      250ms ease;
  --t-slow: 400ms ease;

  --max-w:  1200px;
  --pad-x:  1.5rem;
  --nav-h:  72px;
}

/* ─────────────────────────────────────────
   2. RESET & BASE
───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden; /* prevent html-level horizontal scroll */
  max-width: 100%;
}
body {
  font-family: var(--ff-body);
  color: var(--c-text);
  background: var(--c-white);
  line-height: 1.6;
  overflow-x: hidden;
  max-width: 100%;
}
img      { max-width: 100%; height: auto; display: block; }
a        { color: inherit; text-decoration: none; }
ul, ol   { list-style: none; }
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  max-width: 100%; /* prevent inputs overflowing their container */
}
body.menu-open { overflow: hidden; }

/* ─────────────────────────────────────────
   3. TYPOGRAPHY
───────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--ff-heading);
  line-height: 1.15;
  font-weight: 800;
  color: var(--c-dark);
}
h1 { font-size: clamp(2.2rem, 5.5vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.5rem); }
h4 { font-size: 1.125rem; }
p  { color: var(--c-muted); line-height: 1.8; margin-bottom: var(--sp-4); }
p:last-child { margin-bottom: 0; }

/* ─────────────────────────────────────────
   4. LAYOUT UTILITIES
───────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.section          { padding: var(--sp-20) 0; }
.section--dark    { background: var(--c-navy);  color: var(--c-white); }
.section--navy    { background: var(--c-dark);  color: var(--c-white); }
.section--light   { background: var(--c-gray-50); }
.section--gray    { background: var(--c-gray-100); }

/* Section headers */
.section-header   { text-align: center; margin-bottom: var(--sp-16); }
.section-label {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--c-gold);
  margin-bottom: var(--sp-3);
}
.section-header h2   { margin-bottom: var(--sp-4); }
.section-header p    { max-width: 600px; margin: 0 auto; font-size: 1.1rem; }

.section--dark  .section-header h2,
.section--navy  .section-header h2,
.section--dark  .section-header p,
.section--navy  .section-header p { color: rgba(255,255,255,.8); }

/* Text helpers */
.text-center   { text-align: center; }
.text-white    { color: var(--c-white) !important; }
.text-gold     { color: var(--c-gold); }
.text-muted    { color: var(--c-muted); }
.fw-bold       { font-weight: 700; }

/* ─────────────────────────────────────────
   5. BUTTONS
───────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: .75rem 2rem;
  border-radius: var(--r-full);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--t);
  white-space: nowrap;
  line-height: 1.4;
  letter-spacing: .01em;
}
.btn:hover  { transform: translateY(-2px); box-shadow: var(--sh-lg); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; }

.btn-primary    { background: var(--c-gold);     color: var(--c-dark);  border-color: var(--c-gold); }
.btn-primary:hover { background: var(--c-gold-dark); border-color: var(--c-gold-dark); }

.btn-whatsapp   { background: var(--c-whatsapp); color: var(--c-white); border-color: var(--c-whatsapp); }
.btn-whatsapp:hover { background: var(--c-whatsapp-dk); border-color: var(--c-whatsapp-dk); }

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

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

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

.btn-lg   { padding: 1rem 2.5rem; font-size: 1.125rem; }
.btn-sm   { padding: .5rem 1.5rem; font-size: .875rem; }
.btn-icon { width: 20px; height: 20px; flex-shrink: 0; }
.btn-block { width: 100%; }

/* ─────────────────────────────────────────
   6. NAVIGATION
───────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: var(--sp-3) 0;
  background: rgba(10, 22, 40, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 16px rgba(0,0,0,.2);
  transition: background var(--t), box-shadow var(--t), padding var(--t);
}
.nav.scrolled {
  background: rgba(15, 37, 87, 0.95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 4px 24px rgba(0,0,0,.3);
  padding: var(--sp-2) 0;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); }

.nav-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.nav-logo img { height: 48px; width: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex: 1;
  justify-content: center;
}
.nav-links a {
  font-size: .9rem;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  transition: color var(--t-fast);
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 2px;
  background: var(--c-gold);
  transform: scaleX(0);
  transition: transform var(--t);
}
.nav-links a:hover,
.nav-links a.active { color: var(--c-gold); }
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }

/* links stay white - scrolled bg is still dark/translucent */

/* ── Nav dropdown ── */
.nav-has-dropdown {
  position: relative;
  /* Extend hover zone downward to bridge the gap to the dropdown */
  padding-bottom: 14px;
  margin-bottom: -14px;
}

/* Arrow: on the <li> so it stays outside the overflowed <ul> */
.nav-has-dropdown::after {
  content: '';
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-bottom-color: var(--c-white);
  border-top: none;
  z-index: 301;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
  pointer-events: none;
}
.nav-has-dropdown:hover::after,
.nav-has-dropdown:focus-within::after {
  opacity: 1;
  visibility: visible;
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.nav-chevron {
  font-size: .65rem;
  transition: transform var(--t-fast);
  margin-top: 1px;
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--c-white);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 40px rgba(10,22,40,.18), 0 2px 8px rgba(10,22,40,.08);
  min-width: 220px;
  padding: var(--sp-2) 0;
  list-style: none;
  margin: 0;
  overflow: hidden; /* clips hover backgrounds to rounded corners */
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
  z-index: 300;
  pointer-events: none;
}
.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.nav-has-dropdown:hover .nav-chevron,
.nav-has-dropdown:focus-within .nav-chevron { transform: rotate(180deg); }

.nav-dropdown a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  color: var(--c-text);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.nav-dropdown a::after { display: none !important; }
.nav-dropdown a:hover  { background: var(--c-gray-50); color: var(--c-navy); }
.nav-dropdown a.active { color: var(--c-navy); }
.nav-dropdown a i      { color: var(--c-gold); width: 16px; text-align: center; flex-shrink: 0; }

/* ── Mobile nav group ── */
.nav-mobile-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.nav-mobile-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.45);
  padding: var(--sp-3) var(--sp-5) var(--sp-1);
}
.nav-mobile-sub {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-6) var(--sp-3) var(--sp-8);
  color: rgba(255,255,255,.8);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  border-left: 3px solid rgba(245,158,11,.4);
  margin-left: var(--sp-4);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.nav-mobile-sub i { color: var(--c-gold); font-size: .9rem; }
.nav-mobile-sub:hover { color: var(--c-gold); border-left-color: var(--c-gold); }

.nav-cta { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: var(--sp-2);
}
.nav-hamburger span {
  display: block; width: 26px; height: 2px;
  background: var(--c-white);
  border-radius: var(--r-full);
  transition: all var(--t);
}
/* hamburger stays white on the dark translucent bg */
.nav-hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-hamburger.active span:nth-child(2) { opacity: 0; }
.nav-hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile menu */
.nav-mobile {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--c-dark);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* always starts from top - no vertical overflow */
  gap: 0;
  padding: 5rem var(--sp-6) var(--sp-8);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-mobile.open { display: flex; }

/* Nav links */
.nav-mobile a:not(.btn) {
  font-family: var(--ff-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--c-white);
  transition: color var(--t-fast);
  padding: var(--sp-4) var(--sp-2);
  width: 100%;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-mobile a:not(.btn):last-of-type { border-bottom: none; }
.nav-mobile a:not(.btn):hover        { color: var(--c-gold); }

/* CTA buttons */
.nav-mobile .btn {
  width: 100%;
  max-width: 100%;
  justify-content: center;
  margin-top: var(--sp-4);
  white-space: normal;   /* allow text to wrap if needed */
  text-align: center;
  font-size: .95rem;
  padding: .875rem var(--sp-5);
}
.nav-mobile .btn + .btn { margin-top: var(--sp-3); }

/* Close button */
.nav-mobile-close {
  position: fixed;
  top: var(--sp-3); right: var(--sp-4);
  background: none; border: none; cursor: pointer;
  color: var(--c-white); font-size: 1.75rem; line-height: 1;
  z-index: 1001;
  padding: var(--sp-2);
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

/* ─────────────────────────────────────────
   7. HERO
───────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--c-dark);
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background-image: url('../../images/9.png');
  background-size: cover;
  background-position: center top;
  opacity: .3;
  transform: scale(1.06);
  transition: transform 12s ease, opacity .8s ease;
  will-change: transform;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(10,22,40,.97) 0%,
    rgba(15,37,87,.88) 55%,
    rgba(15,37,87,.65) 100%);
}
.hero-content {
  position: relative; z-index: 2;
  padding: var(--sp-20) 0;
  max-width: 680px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.35);
  color: var(--c-gold);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-full);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-6);
}
.hero h1 {
  color: var(--c-white);
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  font-weight: 900;
  line-height: 1.08;
  margin-bottom: var(--sp-6);
}
.hero h1 em {
  font-style: normal;
  color: var(--c-gold);
  display: block;
}
.hero-sub {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: rgba(255,255,255,.8);
  margin-bottom: var(--sp-3);
  font-weight: 600;
}
.hero-desc {
  font-size: 1rem;
  color: rgba(255,255,255,.6);
  margin-bottom: var(--sp-10);
  max-width: 520px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-12);
}
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  padding-top: var(--sp-8);
  border-top: 1px solid rgba(255,255,255,.12);
}
.hero-stat strong {
  display: block;
  font-family: var(--ff-heading);
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--c-gold);
  line-height: 1;
}
/* DIRECT child. The markup is <strong><span data-count>50+</span></strong>,
   so a plain `.hero-stat span` also matched the counter INSIDE <strong> and
   overrode it - the headline numbers rendered at 13.6px grey instead of 24px
   gold, on every viewport. */
.hero-stat > span { font-size: .85rem; color: rgba(255,255,255,.55); }

/* Scroll cue */
.hero-scroll {
  position: absolute; bottom: var(--sp-8); left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-2); color: rgba(255,255,255,.4); font-size: .7rem; z-index: 2;
}
.hero-scroll-bar {
  width: 2px; height: 44px;
  background: rgba(255,255,255,.15);
  border-radius: var(--r-full);
  overflow: hidden;
}
.hero-scroll-bar::after {
  content: '';
  display: block; width: 100%; height: 100%;
  background: var(--c-gold);
  animation: scrollbar 2s ease-in-out infinite;
}
@keyframes scrollbar {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* ─────────────────────────────────────────
   8. HOW IT WORKS
───────────────────────────────────────── */
.how-it-works {
  background: linear-gradient(180deg, var(--c-dark) 0%, var(--c-navy) 100%);
  padding: var(--sp-24) 0;
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
  position: relative;
}
.steps-connector { display: none; }
.step-card {
  position: relative; z-index: 1;
  text-align: center;
  padding: var(--sp-10) var(--sp-6) var(--sp-8);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-xl);
  transition: all var(--t);
}
.step-card:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(245,158,11,.3);
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,.3);
}
.step-num {
  width: 56px; height: 56px;
  background: var(--c-gold);
  color: var(--c-dark);
  font-family: var(--ff-heading);
  font-size: 1.25rem;
  font-weight: 900;
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--sp-5);
  box-shadow: 0 0 0 6px rgba(245,158,11,.15);
  position: relative; z-index: 1;
}
.step-emoji { font-size: 2rem; margin-bottom: var(--sp-3); display: block; }
.step-card h3 { color: var(--c-white); font-size: 1.05rem; margin-bottom: var(--sp-3); }
.step-card p  { color: rgba(255,255,255,.6); font-size: .875rem; line-height: 1.65; margin: 0; }
.steps-cta    { text-align: center; margin-top: var(--sp-10); }

/* ─────────────────────────────────────────
   9. CHAT DEMO
───────────────────────────────────────── */
.chat-section { padding: var(--sp-24) 0; background: var(--c-white); }
.chat-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Named areas, not source order: desktop keeps text-left / video-right, but
     mobile needs heading -> VIDEO -> detail, which a single text column could
     not express. See the reorder note in index.php. */
  grid-template-areas: "head  video"
                       "body  video";
  gap: var(--sp-6) var(--sp-16);
  align-items: start;
}
.chat-head       { grid-area: head; align-self: end; }
.chat-body       { grid-area: body; align-self: start; }
.chat-video-wrap { grid-area: video; align-self: center; }
.chat-head h2       { margin-bottom: var(--sp-5); }
.chat-head p        { margin-bottom: 0; }
.chat-features      { display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-8); }
.chat-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--c-gray-50);
  border-radius: var(--r-md);
  border-left: 3px solid var(--c-gold);
}
.chat-feature-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  background: var(--c-gold);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.chat-feature h4    { font-size: .95rem; margin-bottom: var(--sp-1); color: var(--c-dark); }
.chat-feature p     { font-size: .85rem; margin: 0; }

/* Video - frameless, fills the column */
.chat-video-wrap {
  width: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-xl);
}
.chat-video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-xl);
}

/* ─────────────────────────────────────────
   10. CONTRACTOR SECTION
───────────────────────────────────────── */
.contractor-section { padding: var(--sp-24) 0; background: var(--c-gray-100); }
.contractor-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}
.contractor-img {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-xl);
}
.contractor-img img,
.contractor-video {
  width: 100%; height: 500px;
  object-fit: cover;
  display: block;
}
.contractor-badge {
  position: absolute; bottom: var(--sp-6); left: var(--sp-6);
  background: var(--c-white);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-6);
  box-shadow: var(--sh-lg);
}
.contractor-badge strong {
  display: block;
  font-family: var(--ff-heading);
  font-size: 2rem; font-weight: 900;
  color: var(--c-gold); line-height: 1;
}
/* DIRECT child - same counter-span problem as .hero-stat above. This one
   rendered the "50+" at 12.8px slate instead of 32px gold. */
.contractor-badge > span { font-size: .8rem; color: var(--c-muted); }

.contractor-text h2   { margin-bottom: var(--sp-5); }
.contractor-text .lead {
  font-size: 1.1rem; color: var(--c-text);
  margin-bottom: var(--sp-8);
}
.benefits { display: flex; flex-direction: column; gap: var(--sp-5); margin-bottom: var(--sp-8); }
.benefit  {
  display: flex; align-items: flex-start; gap: var(--sp-4);
}
.benefit-icon {
  flex-shrink: 0; width: 42px; height: 42px;
  background: linear-gradient(135deg, var(--c-navy), var(--c-blue));
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 1.1rem;
}
.benefit h4 { font-size: .95rem; margin-bottom: var(--sp-1); }
.benefit p  { font-size: .85rem; margin: 0; }

/* ─────────────────────────────────────────
   11. PRICING
───────────────────────────────────────── */
.pricing-section { padding: var(--sp-24) 0; background: var(--c-white); }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  align-items: end;
}
.pricing-card {
  border-radius: var(--r-xl);
  border: 2px solid var(--c-gray-200);
  padding: var(--sp-10) var(--sp-8);
  background: var(--c-white);
  display: flex; flex-direction: column;
  transition: all var(--t);
  position: relative;
}
.pricing-card:hover { transform: translateY(-6px); box-shadow: var(--sh-xl); border-color: var(--c-blue); }
.pricing-card--featured {
  background: linear-gradient(160deg, var(--c-navy) 0%, #162d5f 100%);
  border-color: var(--c-gold);
  box-shadow: var(--sh-xl);
  transform: scale(1.04);
}
.pricing-card--featured:hover { transform: scale(1.04) translateY(-6px); }
.pricing-pill {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--c-gold); color: var(--c-dark);
  font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 16px; border-radius: var(--r-full);
  white-space: nowrap;
}
.pricing-tier  { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--c-muted); margin-bottom: var(--sp-3); }
.pricing-name  { font-family: var(--ff-heading); font-size: 1.5rem; font-weight: 900; margin-bottom: var(--sp-4); }
.pricing-price {
  display: flex; align-items: baseline; gap: 4px;
  margin-bottom: var(--sp-5);
}
.pricing-currency { font-size: 1.25rem; font-weight: 800; color: var(--c-gold); }
.pricing-amount   { font-family: var(--ff-heading); font-size: 3rem; font-weight: 900; line-height: 1; color: var(--c-dark); }
.pricing-period   { font-size: .85rem; color: var(--c-muted); }

.pricing-card--featured .pricing-name,
.pricing-card--featured .pricing-amount { color: var(--c-white); }
.pricing-card--featured .pricing-tier,
.pricing-card--featured .pricing-period { color: rgba(255,255,255,.6); }

.pricing-desc {
  font-size: .875rem; color: var(--c-muted);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--c-gray-200);
}
.pricing-card--featured .pricing-desc {
  color: rgba(255,255,255,.65);
  border-bottom-color: rgba(255,255,255,.12);
}
.pricing-feats { flex: 1; display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-8); }
.pricing-feat  { display: flex; align-items: center; gap: var(--sp-3); font-size: .875rem; color: var(--c-text); }
.pricing-card--featured .pricing-feat  { color: rgba(255,255,255,.85); }
.pricing-check {
  flex-shrink: 0; width: 20px; height: 20px;
  border-radius: var(--r-full);
  background: rgba(37,211,102,.12);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-whatsapp); font-size: .7rem;
}
.pricing-card--featured .pricing-check { background: rgba(245,158,11,.2); color: var(--c-gold); }
.pricing-cta { text-align: center; margin-top: var(--sp-10); }

/* ─────────────────────────────────────────
   12. TRUST
───────────────────────────────────────── */
.trust-section { padding: var(--sp-24) 0; background: var(--c-dark); }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
}
.trust-card {
  text-align: center;
  padding: var(--sp-10) var(--sp-8);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-xl);
  transition: all var(--t);
}
.trust-card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(245,158,11,.25);
  transform: translateY(-5px);
}
.trust-icon {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(46,134,193,.12));
  border: 1px solid rgba(245,158,11,.25);
  border-radius: var(--r-xl);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--sp-6);
  font-size: 1.8rem;
}
.trust-card h3 { color: var(--c-white); font-size: 1.15rem; margin-bottom: var(--sp-4); }
.trust-card p  { color: rgba(255,255,255,.55); font-size: .875rem; line-height: 1.75; margin: 0; }

/* ─────────────────────────────────────────
   13. PLATFORMS
───────────────────────────────────────── */
.platforms-section { padding: var(--sp-24) 0; background: var(--c-white); }
.platforms-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}
.platform-icons { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: var(--sp-8) 0; }
.platform-icon {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--c-gray-50);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  min-width: 82px;
  transition: all var(--t);
  cursor: default;
}
.platform-icon:hover {
  border-color: var(--c-blue);
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}
.platform-icon img   { width: 40px; height: 40px; }
.platform-icon span  { font-size: .75rem; font-weight: 600; color: var(--c-muted); }
.platform-img {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-xl);
}
.platform-img img { width: 100%; height: 460px; object-fit: cover; }

/* ─────────────────────────────────────────
   14. AI ASSISTANCE
───────────────────────────────────────── */
.ai-section { padding: var(--sp-24) 0; background: var(--c-gray-50); }
.ai-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}
.ai-visual {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-xl);
}
.ai-visual img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  display: block;
}
.ai-text h2     { margin-bottom: var(--sp-5); }
.ai-text > p    { margin-bottom: var(--sp-8); }
.ai-cards       { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.ai-card {
  padding: var(--sp-5);
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--r-lg);
  transition: all var(--t);
}
.ai-card:hover { box-shadow: var(--sh-md); border-color: var(--c-blue); }
.ai-card-icon  { font-size: 1.5rem; margin-bottom: var(--sp-3); }
.ai-card h4    { font-size: .95rem; margin-bottom: var(--sp-2); }
.ai-card p     { font-size: .82rem; margin: 0; }

/* ─────────────────────────────────────────
   15. ABOUT / BRAND STORY
───────────────────────────────────────── */
.about-section { padding: var(--sp-24) 0; background: var(--c-white); }
.about-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}
.about-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
.about-imgs img {
  border-radius: var(--r-lg);
  width: 100%; height: 190px;
  object-fit: cover;
  box-shadow: var(--sh-md);
  transition: transform var(--t);
}
.about-imgs img:first-child { grid-column: 1 / -1; height: 260px; }
.about-imgs img:hover { transform: scale(1.02); }
.about-text h2   { margin-bottom: var(--sp-6); }
.about-contact   {
  display: flex; flex-direction: column; gap: var(--sp-3);
  margin-top: var(--sp-8);
  padding: var(--sp-6);
  background: var(--c-gray-50);
  border-radius: var(--r-lg);
  border-left: 4px solid var(--c-gold);
}
.about-contact-row { display: flex; align-items: center; gap: var(--sp-3); font-size: .9rem; }
.about-contact-row span:first-child,
.about-contact-icon { font-size: 1.1rem; color: var(--c-gold); flex-shrink: 0; }
.about-contact-row a { color: var(--c-blue); font-weight: 600; }
.about-contact-row a:hover { text-decoration: underline; }

/* ─────────────────────────────────────────
   16. VIDEO PLACEHOLDER
───────────────────────────────────────── */
.video-section { padding: var(--sp-24) 0; background: var(--c-gray-100); }
.video-wrap {
  position: relative;
  max-width: 860px; margin: 0 auto;
  border-radius: var(--r-xl); overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--c-dark);
  cursor: pointer;
  box-shadow: var(--sh-xl);
}
.video-thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; opacity: .4;
}
.video-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--sp-4);
  background: linear-gradient(135deg, rgba(10,22,40,.5), rgba(15,37,87,.4));
  transition: background var(--t);
}
.video-wrap:hover .video-overlay { background: linear-gradient(135deg, rgba(10,22,40,.6), rgba(15,37,87,.5)); }
.video-play {
  width: 80px; height: 80px;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  border: 2px solid rgba(255,255,255,.5);
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 1.8rem;
  transition: all var(--t);
}
.video-wrap:hover .video-play {
  background: var(--c-gold);
  border-color: var(--c-gold);
  transform: scale(1.1);
  color: var(--c-dark);
}
.video-label { color: rgba(255,255,255,.75); font-size: .9rem; font-weight: 600; }

/* ─────────────────────────────────────────
   17. CTA SECTION  (footer.php)
───────────────────────────────────────── */
.cta-section {
  padding: var(--sp-24) 0;
  background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-dark) 100%);
  position: relative; overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute; top: -40%; right: -8%;
  width: 560px; height: 560px;
  border-radius: 50%;
  background: rgba(245,158,11,.05);
  pointer-events: none;
}
.cta-content { text-align: center; position: relative; z-index: 1; }
.cta-content h2   { color: var(--c-white); margin-bottom: var(--sp-5); }
.cta-content > p  {
  color: rgba(255,255,255,.7);
  font-size: 1.15rem;
  max-width: 560px;
  margin: 0 auto var(--sp-10);
}
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; }

/* ─────────────────────────────────────────
   17b. TRUST STRIP
───────────────────────────────────────── */
.trust-strip {
  background: var(--c-white);
  border-top: 1px solid var(--c-gray-200);
  border-bottom: 1px solid var(--c-gray-200);
  padding: var(--sp-6) 0;
}
.trust-strip .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
}
.trust-strip-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--c-muted);
  white-space: nowrap;
}
.trust-strip-logos {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
  justify-content: center;
}
.trust-strip-logo {
  display: flex;
  align-items: center;
  opacity: .8;
  transition: opacity var(--t-fast);
}
.trust-strip-logo:hover { opacity: 1; }
.trust-strip-logo img {
  height: 36px;
  width: auto;
  object-fit: contain;
}
/* CIPC logo includes subsidiary text so needs more height */
.trust-strip-logo--cipc img { height: 52px; }
/* Paystack is a wide horizontal lockup - shorter height keeps it balanced */
.trust-strip-logo--paystack img { height: 28px; }
.trust-strip-divider {
  width: 1px;
  height: 32px;
  background: var(--c-gray-200);
}

@media (max-width: 600px) {
  .trust-strip .container      { gap: var(--sp-5); }
  .trust-strip-logos           { gap: var(--sp-5); }
  .trust-strip-logo img          { height: 28px; }
  .trust-strip-logo--cipc img    { height: 40px; }
  .trust-strip-logo--paystack img { height: 22px; }
  .trust-strip-divider           { display: none; }
}

/* ─────────────────────────────────────────
   18. FOOTER
───────────────────────────────────────── */
.footer { background: var(--c-dark); padding: var(--sp-16) 0 var(--sp-8); }
.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr;
  gap: var(--sp-10);
  padding-bottom: var(--sp-10);
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: var(--sp-8);
}
/* Footer brand section */
.footer-brand-logo  { margin-bottom: var(--sp-4); }
.footer-logo-img    { height: 52px; width: auto; }
.footer-brand p     { color: rgba(255,255,255,.45); font-size: .85rem; max-width: 260px; }

/* Footer social icons (SVG-based) */
.footer-social    { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.footer-soc {
  /* 44px, not 38: WCAG 2.5.5 / Apple HIG minimum tap target. */
  width: 44px; height: 44px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.7);
  transition: all var(--t);
}
.footer-soc:hover { color: var(--c-white); transform: translateY(-2px); }
.footer-soc--wa:hover  { background: #25D366; border-color: #25D366; }
.footer-soc--fb:hover  { background: #1877F2; border-color: #1877F2; }
.footer-soc--ig:hover  { background: #E1306C; border-color: #E1306C; }

/* Footer contact icons */
.footer-contact-icon {
  flex-shrink: 0; color: var(--c-gold);
  display: flex; align-items: center; justify-content: center;
  width: 18px; margin-top: 2px;
}
.footer-col h4    { color: var(--c-white); font-size: .95rem; font-weight: 700; margin-bottom: var(--sp-6); }
.footer-links     { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-links a   { font-size: .85rem; color: rgba(255,255,255,.45); transition: color var(--t-fast); }
.footer-links a:hover { color: var(--c-gold); }
.footer-contact-item,
.footer-contact-row {
  display: flex; align-items: flex-start;
  gap: var(--sp-3); margin-bottom: var(--sp-4);
}
.footer-contact-item span,
.footer-contact-row span,
.footer-contact-item a,
.footer-contact-row a    { font-size: .85rem; color: rgba(255,255,255,.45); line-height: 1.6; }
.footer-contact-item a:hover,
.footer-contact-row a:hover { color: var(--c-gold); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-4);
}
.footer-bottom p { font-size: .75rem; color: rgba(255,255,255,.25); margin: 0; }
.footer-legal    { display: flex; gap: var(--sp-6); }
.footer-legal a  { font-size: .75rem; color: rgba(255,255,255,.25); transition: color var(--t-fast); }
.footer-legal a:hover { color: var(--c-gold); }

/* ─────────────────────────────────────────
   19. WHATSAPP FLOAT + BACK-TO-TOP
───────────────────────────────────────── */
.whatsapp-float {
  position: fixed;
  bottom: var(--sp-8); right: var(--sp-8);
  z-index: 900;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: var(--sp-3);
}
.whatsapp-float-btn {
  width: 60px; height: 60px;
  background: var(--c-whatsapp);
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,.45);
  transition: all var(--t);
  text-decoration: none;
  position: relative;
}
.whatsapp-float-btn:hover { transform: scale(1.12); box-shadow: 0 6px 28px rgba(37,211,102,.65); }
.whatsapp-float-btn svg   { width: 30px; height: 30px; }
.whatsapp-float-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--c-whatsapp);
  border-radius: var(--r-full);
  opacity: .65;
  animation: wa-pulse 2.5s ease-out infinite;
}
@keyframes wa-pulse {
  0%   { transform: scale(1); opacity: .65; }
  100% { transform: scale(2); opacity: 0; }
}
/* Tooltip - hidden on all devices, both class names covered */
.wa-tooltip,
.whatsapp-float-tooltip { display: none !important; }

.back-to-top {
  position: fixed;
  bottom: var(--sp-8); left: var(--sp-8);
  z-index: 900;
  width: 46px; height: 46px;
  background: var(--c-navy);
  color: var(--c-white);
  border: none; border-radius: var(--r-full);
  font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-md);
  opacity: 0; pointer-events: none;
  transform: translateY(10px);
  /* Only transition specific properties - avoids mobile repaint glitch */
  transition: opacity var(--t), transform var(--t), background-color var(--t);
  will-change: opacity, transform;
  -webkit-tap-highlight-color: transparent;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover   { background: var(--c-blue); }
.back-to-top:active  { transform: scale(.93); }

/* ─────────────────────────────────────────
   20. FORMS
───────────────────────────────────────── */
.form-group  { margin-bottom: var(--sp-6); }
.form-label  { display: block; font-weight: 600; font-size: .875rem; color: var(--c-text); margin-bottom: var(--sp-2); }
.form-label .req { color: #EF4444; margin-left: 2px; }
.form-control {
  width: 100%;
  padding: .75rem 1rem;
  border: 2px solid var(--c-gray-200);
  border-radius: var(--r-md);
  color: var(--c-text);
  background: var(--c-white);
  transition: border-color var(--t), box-shadow var(--t);
  outline: none;
  font-size: 1rem;
}
.form-control:focus { border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(46,134,193,.12); }
.form-control.error { border-color: #EF4444; }
.form-control.ok    { border-color: #10B981; }
.form-hint  { font-size: .75rem; color: var(--c-muted); margin-top: 4px; }
.form-error { font-size: .75rem; color: #EF4444; margin-top: 4px; display: none; }
.form-error.show { display: block; }
textarea.form-control { min-height: 120px; resize: vertical; }
select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748B' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.form-check { display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; margin-bottom: var(--sp-2); }
.form-check input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; accent-color: var(--c-blue); cursor: pointer; }
.form-check-label  { font-size: .875rem; color: var(--c-muted); cursor: pointer; }

.alert { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); font-size: .875rem; margin-bottom: var(--sp-6); display: none; }
.alert.show      { display: block; }
.alert-error     { background: #FEE2E2; border: 1px solid #FCA5A5; color: #991B1B; }

.alert-success   { background: #D1FAE5; border: 1px solid #6EE7B7; color: #065F46; }

/* ─────────────────────────────────────────
   21. PAGE HEROES
───────────────────────────────────────── */
.page-hero {
  background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-dark) 100%);
  padding: calc(var(--nav-h) + var(--sp-16)) 0 var(--sp-20);
  text-align: center;
}
.page-hero h1 { color: var(--c-white); margin-bottom: var(--sp-5); }
.page-hero p  { color: rgba(255,255,255,.7); font-size: 1.15rem; max-width: 580px; margin: 0 auto; }

/* ─────────────────────────────────────────
   22. APPLY PAGE
───────────────────────────────────────── */
.apply-section { padding: var(--sp-20) 0; background: var(--c-gray-100); }
.apply-grid    {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--sp-12);
  align-items: start;
}
.apply-grid > * { min-width: 0; } /* prevent grid blowout */
.apply-sidebar {
  background: var(--c-navy);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  color: var(--c-white);
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-4));
}
.apply-sidebar h3   { color: var(--c-white); margin-bottom: var(--sp-6); font-size: 1.25rem; }
.apply-perks        { display: flex; flex-direction: column; gap: var(--sp-5); }
.apply-perk         { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: .875rem; color: rgba(255,255,255,.75); }
.apply-perk-icon    { flex-shrink: 0; color: var(--c-gold); font-size: 1.1rem; margin-top: 1px; }
.apply-pricing-note {
  margin-top: var(--sp-8);
  padding: var(--sp-5);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg);
}
.apply-pricing-note h4 { color: var(--c-gold); margin-bottom: var(--sp-3); font-size: 1rem; }
.apply-pricing-note p  { color: rgba(255,255,255,.6); font-size: .8rem; margin: 0; }
.apply-form-card {
  background: var(--c-white);
  border-radius: var(--r-xl);
  padding: var(--sp-10);
  box-shadow: var(--sh-lg);
  overflow: hidden; /* contain any child overflow */
  min-width: 0;     /* allow grid cell to shrink below content size */
}
.apply-form-card h3   { margin-bottom: var(--sp-8); font-size: 1.35rem; }
.form-section-title   { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--c-muted); margin: var(--sp-8) 0 var(--sp-5); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-gray-200); }
.form-section-title:first-of-type { margin-top: 0; }

/* Checkbox groups */
.form-checkbox-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  max-width: 100%;
}
.form-checkbox-group--sm { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: var(--sp-2); }
.form-checkbox-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--c-gray-200);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
  font-size: .875rem;
  user-select: none;
}
.form-checkbox-item:hover { border-color: var(--c-blue); background: var(--c-gray-50); }
.form-checkbox-item input[type="checkbox"] { accent-color: var(--c-blue); width: 16px; height: 16px; flex-shrink: 0; }
.form-checkbox-item input[type="checkbox"]:checked + .form-checkbox-label { color: var(--c-blue); font-weight: 600; }
.form-checkbox-item:has(input:checked) { border-color: var(--c-blue); background: rgba(37,99,235,.05); }
.form-checkbox-label { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-text); }
.form-checkbox-label i { color: var(--c-blue); font-size: .8rem; }

/* Areas covered */
.form-areas-container {
  border: 1.5px solid var(--c-gray-200);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: var(--sp-3);
}
.form-areas-province { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--c-gray-100); }
.form-areas-province:last-child { border-bottom: none; }
.form-areas-province-label {
  display: block;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-muted);
  margin-bottom: var(--sp-3);
}

/* File upload */
.form-uploads-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}
.form-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.form-file-wrap { position: relative; }
.form-file-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border: 2px dashed var(--c-gray-200);
  border-radius: var(--r-lg);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--t-fast), background var(--t-fast);
  min-height: 90px;
}
.form-file-label:hover { border-color: var(--c-blue); background: var(--c-gray-50); }
.form-file-label i { font-size: 1.4rem; color: var(--c-blue); }
.form-file-text { font-size: .85rem; font-weight: 600; color: var(--c-dark); }
.form-file-hint { font-size: .75rem; color: var(--c-muted); }
.form-file:focus + .form-file-label { border-color: var(--c-blue); outline: 2px solid var(--c-blue); outline-offset: 2px; }

/* Plan radio cards */
.plan-radio-cards { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-3); }
.plan-radio-card {
  position: relative;
  border: 2px solid var(--c-gray-200);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.plan-radio-card:hover { border-color: var(--c-blue); }
.plan-radio-card.selected,
.plan-radio-card:has(input:checked) { border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.plan-radio-card--featured { border-color: var(--c-gold); }
.plan-radio-card--featured.selected,
.plan-radio-card--featured:has(input:checked) { border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
.plan-radio-card input[type="radio"] { position: absolute; top: var(--sp-5); right: var(--sp-5); accent-color: var(--c-blue); width: 18px; height: 18px; }
.plan-radio-badge {
  position: absolute;
  top: -12px; left: var(--sp-6);
  background: var(--c-gold);
  color: #1a1a1a;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 10px;
  border-radius: 20px;
}
.plan-radio-inner { padding-right: var(--sp-8); min-width: 0; word-break: break-word; }
.plan-radio-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-2); }
.plan-radio-name { font-family: var(--ff-heading); font-size: 1.05rem; font-weight: 800; color: var(--c-dark); }
.plan-radio-price { font-family: var(--ff-heading); font-size: 1.35rem; font-weight: 900; color: var(--c-blue); }
.plan-radio-price small { font-size: .75rem; font-weight: 500; color: var(--c-muted); }
.plan-radio-tagline { font-size: .85rem; color: var(--c-muted); font-style: italic; margin: 0 0 var(--sp-4); }
.plan-radio-features { list-style: none; padding: 0; margin: 0 0 var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.plan-radio-features li { font-size: .85rem; color: var(--c-text); display: flex; align-items: flex-start; gap: var(--sp-2); }
.plan-radio-features i { color: var(--c-whatsapp); margin-top: 3px; flex-shrink: 0; }
.plan-radio-bestfor { font-size: .78rem; color: var(--c-muted); font-style: italic; }
.plan-radio-card--featured .plan-radio-name { color: var(--c-navy); }
.plan-radio-card--featured .plan-radio-price { color: var(--c-gold); }

/* ─────────────────────────────────────────
   23. PRICING PAGE  (table)
───────────────────────────────────────── */
.pricing-table-section { padding: var(--sp-20) 0; background: var(--c-gray-100); }
.pricing-table-wrap {
  background: var(--c-white);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
.pt-head, .pt-row {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr;
}
.pt-head        { background: var(--c-navy); }
.pt-col         { padding: var(--sp-6) var(--sp-6); }
.pt-col.feat    { text-align: left; }
.pt-col.center  { text-align: center; }
.pt-col.gold-col { background: rgba(245,158,11,.1); border-top: 3px solid var(--c-gold); }
.pt-head .pt-col h4   { color: var(--c-white); font-size: 1rem; font-weight: 700; margin-bottom: var(--sp-1); }
.pt-head .pt-col .amt { color: var(--c-gold); font-family: var(--ff-heading); font-size: 1.5rem; font-weight: 900; }
.pt-head .pt-col span { color: rgba(255,255,255,.5); font-size: .8rem; }
.pt-row { border-bottom: 1px solid var(--c-gray-200); transition: background var(--t-fast); }
.pt-row:last-child    { border-bottom: none; }
.pt-row:hover         { background: var(--c-gray-50); }
.pt-row .pt-col       { color: var(--c-text); font-size: .875rem; display: flex; align-items: center; }
.pt-row .pt-col.feat  { font-weight: 500; color: var(--c-dark); }
.pt-row .pt-col.center { justify-content: center; }
.pt-row .pt-col.gold-col { background: rgba(245,158,11,.04); }
.chk-yes  { color: var(--c-whatsapp); font-size: 1.1rem; }
.chk-no   { color: var(--c-gray-300); font-size: 1.1rem; }
.pt-group-label {
  grid-column: 1 / -1;
  background: var(--c-gray-100);
  padding: var(--sp-4) var(--sp-6);
  font-size: .75rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--c-muted);
  border-bottom: 1px solid var(--c-gray-200);
}

/* ─────────────────────────────────────────
   24. SCROLL ANIMATIONS
───────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-in         { opacity: 0; transition: opacity .65s ease; }
.fade-in.visible { opacity: 1; }

/* Stagger delays */
.stagger > .fade-up:nth-child(1) { transition-delay: 0s; }
.stagger > .fade-up:nth-child(2) { transition-delay: .1s; }
.stagger > .fade-up:nth-child(3) { transition-delay: .2s; }
.stagger > .fade-up:nth-child(4) { transition-delay: .3s; }
.stagger > .fade-up:nth-child(5) { transition-delay: .4s; }
.stagger > .fade-up:nth-child(6) { transition-delay: .5s; }

/* ─────────────────────────────────────────
   25. BACK-TO-TOP (handled in §19)
───────────────────────────────────────── */

/* ─────────────────────────────────────────
   26. RESPONSIVE
───────────────────────────────────────── */

/* ── Global mobile UX improvements ── */
.btn, .form-control, .form-checkbox-item,
.plan-radio-card, .nav-hamburger, .whatsapp-float-btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ── 1100px - Tablet landscape ── */
@media (max-width: 1100px) {
  .steps-grid               { grid-template-columns: repeat(2, 1fr); }
  .steps-connector          { display: none; }
  .pricing-card--featured   { transform: scale(1.02); }
  .footer-top               { grid-template-columns: repeat(3, 1fr); }

  /* Reduce fixed image/video heights at tablet landscape */
  .contractor-img img,
  .contractor-video         { height: 420px; }
  .ai-visual img            { height: 420px; }
}

/* ── 900px - Tablet portrait ── */
@media (max-width: 900px) {
  :root { --pad-x: 1.25rem; }

  /* Section padding reduction */
  .chat-section,
  .contractor-section,
  .trust-section,
  .platforms-section,
  .ai-section,
  .about-section,
  .video-section,
  .apply-section,
  .pricing-section,
  .cta-section              { padding: var(--sp-16) 0; }

  /* Nav: show hamburger, hide desktop links */
  .nav-links, .nav-cta      { display: none; }
  .nav-hamburger            { display: flex; }

  /* All 2-col layouts collapse to 1 col */
  .chat-layout,
  .contractor-layout,
  .platforms-layout,
  .ai-layout,
  .about-layout             { grid-template-columns: 1fr; }

  /* Single column: heading, then the video, then the supporting detail.
     This is the whole point of the named areas. */
  .chat-layout              { grid-template-areas: "head" "video" "body"; }
  .chat-head                { align-self: start; }

  /* Contractor: show text above image */
  .contractor-layout .contractor-text { order: -1; }

  /* Image/video heights */
  .contractor-img img,
  .contractor-video         { height: 300px; }
  .ai-visual img            { height: 300px; }

  /* Same badge-too-big problem as the 600px rule below, milder here since the
     video is taller (300px vs 220px), but still worth a step down from the
     2rem/1.5rem desktop size. */
  .contractor-badge         { padding: var(--sp-3) var(--sp-4); max-width: 70%; }
  .contractor-badge strong  { font-size: 1.6rem; }

  /* AI cards: 2 columns when layout is full-width */
  .ai-cards                 { grid-template-columns: repeat(2, 1fr); }

  /* Trust */
  .trust-grid               { grid-template-columns: repeat(2, 1fr); }

  /* Pricing */
  .pricing-grid             { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
  .pricing-card--featured   { transform: none; }

  /* Forms */
  .form-row                 { grid-template-columns: 1fr; }
  .form-uploads-grid        { grid-template-columns: 1fr; }
  .apply-grid               { grid-template-columns: 1fr; }
  .apply-sidebar            { position: static; }
  .form-checkbox-group      { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

  /* Hero */
  .hero-content             { padding: var(--sp-16) 0; }
  .hero-stats               { gap: var(--sp-5); }
  .hero-actions             { flex-wrap: wrap; }
  .hero-scroll              { display: none; }

  /* CTA */
  .cta-actions              { flex-direction: column; align-items: center; }
  .cta-actions .btn         { width: 100%; max-width: 380px; }

  /* Hide platform image (text-only layout) */
  .platform-img             { display: none; }

  /* About images */
  .about-imgs img:first-child { height: 200px; }
}

/* ── 600px - Mobile ── */
@media (max-width: 600px) {
  :root { --pad-x: 1rem; }

  /* Typography scale-down */
  h1       { font-size: 1.9rem; }
  h2       { font-size: 1.5rem; }
  .hero h1 { font-size: clamp(1.85rem, 8vw, 2.4rem); }

  /* Tighter section padding on phones */
  .chat-section,
  .contractor-section,
  .trust-section,
  .platforms-section,
  .ai-section,
  .about-section,
  .apply-section,
  .pricing-section,
  .cta-section              { padding: var(--sp-12) 0; }

  /* Hero */
  .hero-content             { padding: var(--sp-10) 0; }
  .hero-badge               { font-size: .72rem; padding: var(--sp-2) var(--sp-4); }
  .hero-sub                 { font-size: .95rem; }
  .hero-desc                { font-size: .875rem; margin-bottom: var(--sp-8); }
  .hero-actions             { gap: var(--sp-3); }
  .hero-actions .btn        { width: 100%; justify-content: center; }
  .hero-stats               { flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); }
  .hero-stat                { min-width: calc(50% - var(--sp-6)); }
  .hero-stat strong         { font-size: 1.8rem; }

  /* Steps */
  .steps-grid               { grid-template-columns: 1fr; }
  .step-card                { padding: var(--sp-6) var(--sp-5) var(--sp-5); }

  /* Trust */
  .trust-grid               { grid-template-columns: 1fr; }

  /* Image/video heights on phones */
  .contractor-img img,
  .contractor-video         { height: 220px; }
  .ai-visual img            { height: 220px; }

  /* The "50+ Active Contractors" badge over the contractor video.
     It was never given a mobile size, so at full desktop size (2rem number,
     1.5rem padding) it covered more than half of the now-220px-tall video -
     reported by the team as "not responsive" on Android. It wasn't
     overflowing (no horizontal scroll), just wildly out of proportion for a
     much shorter box than the 500px desktop one it was designed for. */
  .contractor-badge         { padding: var(--sp-2) var(--sp-3); left: var(--sp-3); bottom: var(--sp-3); max-width: 62%; }
  .contractor-badge strong  { font-size: 1.3rem; }
  .contractor-badge > span  { font-size: .65rem; }
  .about-imgs img:first-child { height: 160px; }
  .about-imgs img           { height: 120px; }

  /* AI cards: single column on phones */
  .ai-cards                 { grid-template-columns: 1fr; }

  /* Platform icons: slightly smaller */
  .platform-icon            { min-width: 68px; padding: var(--sp-3); }
  .platform-icon img        { width: 34px; height: 34px; }

  /* Pricing */
  .pricing-grid             { max-width: 100%; }
  .pricing-card             { padding: var(--sp-7) var(--sp-5); }
  .pricing-table-wrap       { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pt-head, .pt-row         { grid-template-columns: 1.8fr 1fr 1fr 1fr; }
  .pt-col                   { padding: var(--sp-4) var(--sp-3); font-size: .78rem; }

  /* CTA */
  .cta-content h2           { font-size: 1.5rem; }
  .cta-actions .btn         { max-width: 100%; }

  /* Footer */
  .footer-top               { grid-template-columns: 1fr; }
  .footer-bottom            { flex-direction: column; text-align: center; }
  .footer-legal             { justify-content: center; flex-wrap: wrap; gap: var(--sp-3); }
  .footer-brand p           { max-width: 100%; }

  /* Apply form */
  .apply-form-card          { padding: var(--sp-6) var(--sp-5); }
  .plan-radio-card          { padding: var(--sp-5) var(--sp-4); }
  .plan-radio-header        { flex-direction: column; gap: var(--sp-1); }
  .form-checkbox-group      { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .form-areas-container     { max-height: 300px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

  /* Chat video */
  .chat-video-wrap          { border-radius: var(--r-lg); }

  /* Floating buttons - move up slightly from browser chrome */
  .whatsapp-float           { bottom: var(--sp-6); right: var(--sp-4); }
  .back-to-top              { bottom: var(--sp-6); left: var(--sp-4); }

  /* Buttons */
  .btn-lg                   { padding: .875rem 1.75rem; font-size: .95rem; }
}

/* ─────────────────────────────────────────
   27. FOUNDING CONTRACTOR PAGE
───────────────────────────────────────── */

/* ── Founding hero (gold accent) ── */
.founding-hero {
  background: var(--c-dark);
  padding: calc(var(--nav-h) + var(--sp-16)) 0 var(--sp-16);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.founding-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(245,158,11,.12) 0%, transparent 70%);
  pointer-events: none;
}
.founding-hero .section-label { color: var(--c-gold); }
.founding-hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-family: var(--ff-heading);
  font-weight: 900;
  color: var(--c-white);
  margin-bottom: var(--sp-5);
  line-height: 1.1;
}
.founding-hero h1 em {
  color: var(--c-gold);
  font-style: normal;
}
.founding-hero p {
  font-size: 1.125rem;
  color: rgba(255,255,255,.78);
  max-width: 600px;
  margin: 0 auto var(--sp-10);
  line-height: 1.7;
}
.founding-hero-stats {
  display: flex;
  justify-content: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
  margin-top: var(--sp-8);
}
.founding-hero-stat {
  text-align: center;
}
.founding-hero-stat-num {
  font-family: var(--ff-heading);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--c-gold);
  line-height: 1;
  display: block;
}
.founding-hero-stat-label {
  font-size: .8rem;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: var(--sp-1);
  display: block;
}
.founding-hero-divider {
  width: 1px;
  background: rgba(255,255,255,.15);
  height: 50px;
  align-self: center;
}

/* ── Founding perks strip ── */
.founding-perks-strip {
  background: var(--c-navy);
  padding: var(--sp-10) 0;
}
.founding-perks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
.founding-perk-card {
  text-align: center;
  padding: var(--sp-6);
  border: 1px solid rgba(245,158,11,.2);
  border-radius: var(--r-lg);
  background: rgba(245,158,11,.06);
  transition: background var(--t);
}
.founding-perk-card:hover { background: rgba(245,158,11,.1); }
.founding-perk-icon {
  width: 56px; height: 56px;
  border-radius: var(--r-full);
  background: rgba(245,158,11,.2);
  color: var(--c-gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin: 0 auto var(--sp-4);
}
.founding-perk-card h4 {
  font-size: 1rem; font-weight: 700;
  color: var(--c-white);
  margin-bottom: var(--sp-2);
}
.founding-perk-card p {
  font-size: .875rem;
  color: rgba(255,255,255,.68);
  line-height: 1.6;
}

/* ── Category radio cards ── */
.founding-categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.founding-cat-card {
  position: relative;
  border: 2px solid var(--c-gray-200);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-4);
  cursor: pointer;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
  background: var(--c-white);
  display: block;
  -webkit-tap-highlight-color: transparent;
  min-width: 0;
}
.founding-cat-card:hover:not(.founding-cat-card--full) {
  border-color: var(--c-gold);
  background: rgba(245,158,11,.04);
}
.founding-cat-card.selected {
  border-color: var(--c-gold);
  background: rgba(245,158,11,.06);
  box-shadow: 0 0 0 3px rgba(245,158,11,.2);
}
.founding-cat-card--full {
  cursor: not-allowed;
  opacity: .55;
  background: var(--c-gray-50);
  border-color: var(--c-gray-200);
}
.founding-cat-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.founding-cat-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-2);
}
.founding-cat-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-full);
  background: var(--c-gray-100);
  color: var(--c-navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  transition: background var(--t), color var(--t);
}
.founding-cat-card.selected .founding-cat-icon {
  background: rgba(245,158,11,.2);
  color: var(--c-gold-dark);
}
.founding-cat-name {
  font-size: .85rem;
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.3;
}
.founding-cat-spots {
  font-size: .75rem;
  font-weight: 600;
  border-radius: var(--r-full);
  padding: .2rem .65rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.founding-cat-spots--available {
  background: rgba(34,197,94,.12);
  color: #15803d;
}
.founding-cat-spots--urgent {
  background: rgba(245,158,11,.15);
  color: #b45309;
}
.founding-cat-spots--full {
  background: var(--c-gray-100);
  color: var(--c-muted);
}

/* ── Founding sidebar ── */
.founding-sidebar-badge {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.3);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.founding-sidebar-badge i { color: var(--c-gold); font-size: 1.5rem; }
.founding-sidebar-badge span { font-size: .875rem; color: rgba(255,255,255,.85); line-height: 1.5; }
.founding-sidebar-badge strong { color: var(--c-gold); display: block; }

/* ── Campaign closed state ── */
.founding-closed {
  text-align: center;
  padding: var(--sp-20) 0;
}
.founding-closed-icon {
  width: 80px; height: 80px;
  border-radius: var(--r-full);
  background: rgba(245,158,11,.12);
  color: var(--c-gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  margin: 0 auto var(--sp-6);
}
.founding-closed h2 { font-size: 2rem; margin-bottom: var(--sp-4); }
.founding-closed p { color: var(--c-muted); max-width: 480px; margin: 0 auto; }

/* ── Total spots progress ── */
.founding-progress-wrap {
  background: var(--c-gray-100);
  border-radius: var(--r-full);
  height: 8px;
  overflow: hidden;
  margin-top: var(--sp-3);
}
.founding-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--c-gold-dark), var(--c-gold));
  border-radius: var(--r-full);
  transition: width .6s ease;
}

/* ── Responsive: Founding ── */
@media (max-width: 900px) {
  .founding-perks-grid       { grid-template-columns: 1fr 1fr; }
  .founding-categories-grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .founding-hero h1          { font-size: 1.9rem; }
  .founding-perks-grid       { grid-template-columns: 1fr; }
  .founding-categories-grid  { grid-template-columns: repeat(2, 1fr); }
  .founding-hero-stats       { gap: var(--sp-5); }
  .founding-hero-divider     { display: none; }
}
@media (max-width: 380px) {
  .founding-categories-grid  { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────
   28. PARTNERS PAGE
───────────────────────────────────────── */

/* ── Why Partner (2-col) ── */
.partner-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: center;
}
.partner-why-copy h2 { margin-bottom: var(--sp-5); }
.partner-why-copy .lead { margin-bottom: var(--sp-6); }
.partner-why-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.partner-why-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}
.partner-why-icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  background: rgba(245,158,11,.15);
  color: var(--c-gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.partner-why-item h4 { font-size: .95rem; font-weight: 700; margin-bottom: .2rem; }
.partner-why-item p  { font-size: .875rem; color: var(--c-muted); }

.partner-badge-wrap {
  text-align: center;
  padding: var(--sp-6);
}
.partner-badge-wrap img {
  max-width: 300px;
  width: 100%;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.15));
}

/* ── Benefits grid (on navy bg) ── */
.partner-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-10);
}
.partner-benefit-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg);
  padding: var(--sp-7);
  transition: background var(--t), transform var(--t);
}
.partner-benefit-card:hover {
  background: rgba(255,255,255,.11);
  transform: translateY(-2px);
}
.partner-benefit-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-full);
  background: rgba(245,158,11,.18);
  color: var(--c-gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  margin-bottom: var(--sp-4);
}
.partner-benefit-card h4 {
  font-size: 1rem; font-weight: 700;
  color: var(--c-white);
  margin-bottom: var(--sp-2);
}
.partner-benefit-card p {
  font-size: .875rem;
  color: rgba(255,255,255,.72);
  line-height: 1.65;
}

/* ── Who should apply chips ── */
.partner-who-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-10);
}
.partner-who-chip {
  background: var(--c-gray-100);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-5);
  font-size: .875rem;
  font-weight: 500;
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.partner-who-chip i { color: var(--c-blue); font-size: .8rem; }

.partner-look-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.partner-look-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: .9rem;
  color: var(--c-text);
}
.partner-look-item i { color: var(--c-blue); margin-top: .15rem; flex-shrink: 0; }

/* ── What partners receive (sidebar) ── */
.partner-receive-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.partner-receive-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: .9rem;
  color: rgba(255,255,255,.85);
}
.partner-receive-item i { color: var(--c-gold); margin-top: .1rem; flex-shrink: 0; }
.partner-receive-item strong { display: block; color: var(--c-white); }

.partner-review-note {
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  background: rgba(255,255,255,.06);
  border-radius: var(--r-md);
  border-left: 3px solid var(--c-gold);
  font-size: .85rem;
  color: rgba(255,255,255,.8);
  line-height: 1.6;
}

/* ── Inline radio group ── */
.form-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.form-radio-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  border: 1.5px solid var(--c-gray-200);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
  font-size: .875rem;
  font-weight: 500;
  transition: border-color var(--t), background var(--t);
  -webkit-tap-highlight-color: transparent;
}
.form-radio-item:hover { border-color: var(--c-blue); }
.form-radio-item input[type="radio"] { accent-color: var(--c-blue); }
.form-radio-item:has(input:checked) {
  border-color: var(--c-blue);
  background: rgba(46,134,193,.07);
}

/* ── Responsive: Partners ── */
@media (max-width: 900px) {
  .partner-benefits-grid { grid-template-columns: 1fr 1fr; }
  .partner-look-grid      { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .partner-why-grid       { grid-template-columns: 1fr; }
  .partner-badge-wrap     { order: -1; padding: var(--sp-4) 0; }
  .partner-badge-wrap img { max-width: 200px; }
}
@media (max-width: 600px) {
  .partner-benefits-grid  { grid-template-columns: 1fr; }
  .partner-look-grid      { grid-template-columns: 1fr; }
  .form-radio-group       { flex-direction: column; }
}


/* ============================================================
   19. Homeowner CTA Band
   ============================================================ */
.homeowner-cta-band {
  background: linear-gradient(135deg, var(--c-navy) 0%, #1a3a7a 100%);
  padding: var(--sp-16) 0;
}
.homeowner-cta-content {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-10);
  align-items: center;
}
.homeowner-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: var(--sp-3);
}
.homeowner-cta-text h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--c-white);
  margin-bottom: var(--sp-3);
  line-height: 1.2;
}
.homeowner-cta-inline-link {
  font-style: normal;
  color: var(--c-gold);
  text-decoration: underline;
  text-decoration-color: rgba(245,158,11,.4);
  text-underline-offset: 4px;
  transition: text-decoration-color .2s;
}
.homeowner-cta-inline-link:hover {
  text-decoration-color: var(--c-gold);
}
.homeowner-cta-text p {
  color: rgba(255,255,255,.8);
  font-size: 1.05rem;
  max-width: 520px;
  line-height: 1.65;
}
.homeowner-cta-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}
.btn-xl {
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: 800;
}
.homeowner-cta-btn {
  white-space: nowrap;
  box-shadow: 0 8px 32px rgba(37,211,102,.35);
}
.homeowner-cta-btn:hover {
  box-shadow: 0 12px 40px rgba(37,211,102,.5);
  transform: translateY(-2px);
}
.homeowner-cta-note {
  font-size: .8rem;
  color: rgba(255,255,255,.6);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
}
@media (max-width: 768px) {
  .homeowner-cta-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .homeowner-cta-text p { max-width: 100%; }
  .homeowner-cta-text h2 { font-size: 1.75rem; }
}


/* ============================================================
   20. Partner Perks for Contractors (homepage)
   ============================================================ */
/* ── Contractor section button pair ── */
.contractor-btn-group {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  max-width: 520px;
}
.contractor-btn-group .btn { justify-content: center; }
@media (max-width: 480px) {
  .contractor-btn-group { grid-template-columns: 1fr; max-width: 100%; }
}

.partner-perks-section { padding: var(--sp-24) 0; }

.partner-perks-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-12);
}
.partner-perk-card {
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.partner-perk-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.08);
  border-color: var(--c-gold);
}
.partner-perk-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  background: rgba(245,158,11,.12);
  color: var(--c-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: var(--sp-4);
}
.partner-perk-card h4 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--c-navy);
  margin-bottom: var(--sp-2);
}
.partner-perk-card p {
  font-size: .85rem;
  color: var(--c-muted);
  line-height: 1.6;
}
.partner-perks-cta {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--sp-12);
}
@media (max-width: 1024px) {
  .partner-perks-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .partner-perks-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .partner-perks-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   21. Trust strip - WhatsApp Business Verified badge
   ============================================================ */
.trust-strip-logo--wa-verified {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
}
.trust-strip-logo--wa-verified .fa-whatsapp {
  font-size: 2.4rem;
  color: #25D366;
  line-height: 1;
}
.trust-strip-logo--wa-verified span {
  font-size: .7rem;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .04em;
}
@media (max-width: 600px) {
  .trust-strip-logo--wa-verified .fa-whatsapp { font-size: 1.8rem; }
  .trust-strip-logo--wa-verified span         { font-size: .65rem; }
}

/* ============================================================
   21b. Upload progress (contractor / founding / partner forms)
   ============================================================ */
.upload-progress {
  display: none;
  margin: var(--sp-5) 0 var(--sp-4);
}
.upload-progress.show { display: block; }
.upload-progress-track {
  height: 8px;
  border-radius: 999px;
  background: var(--c-gray-200);
  overflow: hidden;
}
.upload-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-blue, #2563EB), var(--c-gold, #F59E0B));
  transition: width .25s ease;
}
.upload-progress-text {
  margin-top: var(--sp-2);
  font-size: .82rem;
  font-weight: 600;
  color: var(--c-muted);
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .upload-progress-fill { transition: none; }
}

/* ============================================================
   22. Legal Pages (Privacy Policy, Terms of Service, POPIA)
   ============================================================ */

.page-hero--legal {
  padding: var(--sp-16) 0 var(--sp-12);
  background: linear-gradient(135deg, var(--c-navy) 0%, #1a3a7a 100%);
}
.page-hero--legal .page-hero-content { max-width: 700px; margin: 0 auto; text-align: center; }
.page-hero--legal h1 { color: var(--c-white); margin-bottom: var(--sp-3); }
.legal-updated {
  color: rgba(255,255,255,.65);
  font-size: .9rem;
  margin: 0;
}

.legal-section { padding: var(--sp-16) 0 var(--sp-20); }

.legal-content {
  max-width: 760px;
  margin: 0 auto;
}

.legal-intro {
  font-size: 1.0625rem;
  color: var(--c-text);
  line-height: 1.75;
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-8);
  border-bottom: 2px solid var(--c-gray-200);
}

.legal-content h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--c-navy);
  margin-top: var(--sp-10);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-gray-200);
}

.legal-content h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text);
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-2);
}

.legal-content p {
  color: var(--c-text);
  line-height: 1.75;
  margin-bottom: var(--sp-4);
}

.legal-content ul {
  margin: 0 0 var(--sp-4) var(--sp-6);
  padding: 0;
}

.legal-content ul li {
  color: var(--c-text);
  line-height: 1.7;
  margin-bottom: var(--sp-2);
  list-style-type: disc;
}

.legal-content a {
  color: var(--c-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-content a:hover { color: var(--c-gold); }

.legal-highlight {
  background: var(--c-gray-100);
  border-left: 4px solid var(--c-navy);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-5) var(--sp-6);
  margin: var(--sp-6) 0;
}
.legal-highlight h3 {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-navy);
  font-weight: 700;
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-2);
}
.legal-highlight h3:first-child { margin-top: 0; }
.legal-highlight p {
  font-size: .9375rem;
  line-height: 1.7;
  margin-bottom: 0;
}

.legal-nav {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--c-gray-200);
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .legal-content { padding: 0 var(--sp-1); }
  .legal-nav { flex-direction: column; }
  .legal-nav .btn { text-align: center; justify-content: center; }
}

/* ============================================================
   23. Success Modal (form submission confirmation)
   ============================================================ */
.success-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 40, 0.72);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.success-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}
.success-modal-card {
  background: #fff;
  border-radius: var(--r-xl);
  padding: var(--sp-12) var(--sp-10);
  max-width: 460px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 30px 70px rgba(10, 22, 40, 0.35);
  transform: translateY(24px) scale(.96);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.success-modal-overlay.active .success-modal-card {
  transform: translateY(0) scale(1);
}
.success-modal-close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--c-muted);
  cursor: pointer;
  line-height: 1;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  transition: background .15s, color .15s;
}
.success-modal-close:hover { background: var(--c-gray-100); color: var(--c-text); }
.success-modal-icon {
  font-size: 4rem;
  color: #059669;
  display: block;
  margin-bottom: var(--sp-4);
  line-height: 1;
}
.success-modal-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--c-navy);
  margin-bottom: var(--sp-3);
  line-height: 1.2;
}
.success-modal-msg {
  color: var(--c-muted);
  font-size: .9375rem;
  line-height: 1.75;
  margin-bottom: var(--sp-8);
}
.success-modal-done {
  min-width: 160px;
}
/* Prevent body scroll while modal is open */
body.modal-open { overflow: hidden; }

@media (max-width: 480px) {
  .success-modal-card {
    padding: var(--sp-10) var(--sp-6);
  }
  .success-modal-title { font-size: 1.35rem; }
}

/* ── FAQ Section ─────────────────────────────── */
.faq-section { background: var(--c-white); }
.faq-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  margin-top: var(--sp-10);
}
.faq-group-label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-blue);
  margin-bottom: var(--sp-6);
}
.faq-group-label i { font-size: 1rem; }
.faq-group-label--contractor { color: var(--c-gold-dark, #b07d10); }
.accordion-item {
  border-bottom: 1px solid var(--c-gray-200);
}
.accordion-item:first-of-type { border-top: 1px solid var(--c-gray-200); }
.accordion-header {
  width: 100%;
  background: none;
  border: none;
  padding: var(--sp-5) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  text-align: left;
  cursor: pointer;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.4;
  transition: color .2s;
}
.accordion-header:hover { color: var(--c-blue); }
.accordion-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: var(--r-full);
  background: var(--c-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  color: var(--c-text-muted, #6b7280);
  transition: background .2s, transform .3s;
}
.accordion-item.open .accordion-icon {
  background: var(--c-blue);
  color: var(--c-white);
  transform: rotate(45deg);
}
.accordion-body {
  display: none;
  padding-bottom: var(--sp-5);
}
.accordion-body p {
  font-size: .9rem;
  color: var(--c-muted);
  line-height: 1.75;
  margin: 0;
}
@media (max-width: 900px) {
  .faq-columns { grid-template-columns: 1fr; gap: var(--sp-10); }
}
@media (max-width: 480px) {
  .accordion-header { font-size: .875rem; }
}

/* ─────────────────────────────────────────
   Cookie Consent Banner
───────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  background: var(--c-navy);
  border-top: 2px solid rgba(245,158,11,.4);
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  padding: var(--sp-4) 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,.25);
}
.cookie-banner--visible {
  transform: translateY(0);
}
.cookie-banner-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.cookie-banner-text {
  flex: 1;
  min-width: 220px;
}
.cookie-banner-text strong {
  color: var(--c-white);
  font-size: .875rem;
  font-weight: 700;
  display: block;
  margin-bottom: var(--sp-1);
}
.cookie-banner-text p {
  color: rgba(255,255,255,.72);
  font-size: .8rem;
  margin: 0;
  line-height: 1.5;
}
.cookie-banner-text a {
  color: var(--c-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner-text a:hover {
  color: #fff;
}
.cookie-banner-actions {
  display: flex;
  gap: var(--sp-3);
  flex-shrink: 0;
}
.cookie-btn {
  font-family: var(--ff-body);
  font-size: .8rem;
  font-weight: 600;
  padding: .5rem 1.1rem;
  border-radius: var(--r-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  line-height: 1;
}
.cookie-btn--essential {
  background: transparent;
  color: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.3);
}
.cookie-btn--essential:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.6);
  color: var(--c-white);
}
.cookie-btn--accept {
  background: var(--c-gold);
  color: #000;
  border: 1px solid var(--c-gold);
}
.cookie-btn--accept:hover {
  background: var(--c-gold-dark);
  border-color: var(--c-gold-dark);
}
#cookie-settings-link {
  color: inherit;
  opacity: .75;
}
#cookie-settings-link:hover {
  opacity: 1;
}
@media (max-width: 600px) {
  .cookie-banner-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }
  .cookie-banner-actions {
    width: 100%;
  }
  .cookie-btn {
    flex: 1;
    text-align: center;
  }
}

/* ─────────────────────────────────────────
   WhatsApp Engagement Modal
───────────────────────────────────────── */
.wa-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1500;
  padding: var(--sp-4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.wa-modal-overlay.wa-modal--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.wa-modal {
  background: #fff;
  border-radius: var(--r-xl);
  max-width: 580px;
  width: 100%;
  position: relative;
  overflow: hidden;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.35s ease;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}
.wa-modal-overlay.wa-modal--visible .wa-modal {
  transform: translateY(0) scale(1);
}
.wa-modal-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  background: rgba(15, 37, 87, 0.1);
  border: 1px solid rgba(15, 37, 87, 0.15);
  color: var(--c-navy);
  font-size: 1.25rem;
  line-height: 1;
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background var(--t-fast);
}
.wa-modal-close:hover {
  background: rgba(15, 37, 87, 0.18);
}
.wa-modal-body {
  display: flex;
}
.wa-modal-left {
  flex: 1;
  background: var(--c-navy);
  padding: 2.5rem 2rem 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.wa-modal-badge {
  display: inline-block;
  background: rgba(245, 158, 11, 0.15);
  color: var(--c-gold);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .75rem;
  border-radius: var(--r-full);
  border: 1px solid rgba(245, 158, 11, 0.35);
  align-self: flex-start;
}
.wa-modal-title {
  font-family: var(--ff-head);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--c-white);
  line-height: 1.2;
  margin: 0;
}
.wa-modal-text {
  font-size: .9rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.65;
  margin: 0;
}
.wa-modal-cta {
  width: 100%;
  justify-content: center;
  font-size: 1rem;
}
.wa-modal-sub {
  font-size: .8rem;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  margin: 0;
}
.wa-modal-right {
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.75rem;
  gap: .875rem;
  min-width: 176px;
  border-left: 1px solid var(--c-gray-200);
}
.wa-modal-qr {
  width: 148px;
  height: 148px;
  object-fit: contain;
  display: block;
}
.wa-modal-qr-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--c-navy);
  text-align: center;
  line-height: 1.4;
}

@media (max-width: 540px) {
  .wa-modal-body { flex-direction: column; }
  .wa-modal-right {
    flex-direction: row;
    padding: 1rem 1.5rem;
    min-width: unset;
    gap: 1rem;
    border-left: none;
    border-top: 1px solid var(--c-gray-200);
  }
  .wa-modal-qr { width: 72px; height: 72px; }
  .wa-modal-left { padding: 2.5rem 1.5rem 1.5rem; }
  .wa-modal-title { font-size: 1.25rem; }
}
@media (max-width: 380px) {
  .wa-modal-right { display: none; }
}

/* ─────────────────────────────────────────
   Our Partners Showcase
───────────────────────────────────────── */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-4);
}

.partner-card {
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .25s ease, transform .25s ease;
}
.partner-card:hover {
  box-shadow: 0 8px 32px rgba(15,37,87,.12);
  transform: translateY(-3px);
}

.partner-card-header {
  background: var(--c-navy);
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.partner-logo {
  width: 72px;
  height: 72px;
  border-radius: var(--r-lg);
  object-fit: contain;
  background: var(--c-white);
  padding: 6px;
  flex-shrink: 0;
}
.partner-logo-placeholder {
  width: 72px;
  height: 72px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--c-gold);
  flex-shrink: 0;
  font-family: var(--ff-heading);
  letter-spacing: -.02em;
}
.partner-card-name {
  color: var(--c-white);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 .25rem;
  font-family: var(--ff-heading);
  line-height: 1.3;
}
.partner-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .7rem;
  font-weight: 700;
  color: var(--c-gold);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.partner-card-body {
  padding: var(--sp-5) var(--sp-6);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.partner-cat-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.partner-cat-chip {
  background: #f0f4ff;
  color: var(--c-navy);
  font-size: .7rem;
  font-weight: 600;
  padding: .2rem .6rem;
  border-radius: var(--r-full);
  border: 1px solid #dce3f5;
}

.partner-overview {
  font-size: .875rem;
  color: var(--c-muted);
  line-height: 1.65;
  margin: 0;
}

.partner-location {
  font-size: .8rem;
  color: var(--c-muted);
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  line-height: 1.5;
}
.partner-location i {
  color: var(--c-gold);
  margin-top: 2px;
  flex-shrink: 0;
  font-size: .85rem;
}

.partner-discount-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  font-size: .78rem;
  font-weight: 700;
  padding: .3rem .75rem;
  border-radius: var(--r-full);
  align-self: flex-start;
}
.partner-discount-badge i { font-size: .8rem; }

.partner-benefits { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.partner-benefit-pill {
  background: #fffbeb;
  color: #92400e;
  font-size: .7rem;
  font-weight: 600;
  padding: .2rem .6rem;
  border-radius: var(--r-full);
  border: 1px solid #fde68a;
}

.partner-photos {
  display: flex;
  gap: var(--sp-2);
  padding: 0 var(--sp-6) var(--sp-4);
}
.partner-photo-thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--r-md);
  object-fit: cover;
  cursor: pointer;
  transition: opacity .15s ease, transform .15s ease;
  border: 1px solid var(--c-gray-200);
}
.partner-photo-thumb:hover { opacity: .85; transform: scale(1.04); }

.partner-card-footer {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--c-gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.partner-social { display: flex; gap: var(--sp-2); }
.partner-soc-link {
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--c-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-navy);
  font-size: .85rem;
  transition: background .15s ease, color .15s ease;
  text-decoration: none;
}
.partner-soc-link:hover { background: var(--c-navy); color: var(--c-white); }

/* Empty state */
.partners-empty {
  text-align: center;
  padding: var(--sp-20) 0;
}
.partners-empty-icon {
  width: 80px;
  height: 80px;
  background: var(--c-gray-100);
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--c-muted);
  margin: 0 auto var(--sp-6);
}
.partners-empty h3 { color: var(--c-navy); margin-bottom: var(--sp-3); }
.partners-empty p  { color: var(--c-muted); max-width: 480px; margin: 0 auto var(--sp-8); }

/* Lightbox */
.partner-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
}
.partner-lightbox img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--r-lg);
}
.partner-lightbox-close {
  position: fixed;
  top: 1rem;
  right: 1.25rem;
  background: rgba(255,255,255,.15);
  border: none;
  color: var(--c-white);
  font-size: 2rem;
  line-height: 1;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}
.partner-lightbox-close:hover { background: rgba(255,255,255,.28); }

@media (max-width: 700px) {
  .partner-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────
   Partner Profile Modal
───────────────────────────────────────── */
.pmod-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,22,40,.7);
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--sp-6) var(--sp-4);
  overflow-y: auto;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.pmod-wrap {
  background: var(--c-white);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 780px;
  position: relative;
  box-shadow: 0 24px 60px rgba(10,22,40,.3);
  margin: auto;
  overflow: hidden;
}

.pmod-close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.2);
  border: none;
  color: var(--c-white);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background var(--t-fast);
}
.pmod-close:hover { background: rgba(255,255,255,.35); }

.pmod-header {
  background: var(--c-navy);
  padding: var(--sp-7) var(--sp-8);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}
.pmod-logo {
  width: 88px;
  height: 88px;
  border-radius: var(--r-lg);
  object-fit: contain;
  background: var(--c-white);
  padding: 8px;
  flex-shrink: 0;
}
.pmod-logo-placeholder {
  width: 88px;
  height: 88px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 800;
  color: var(--c-gold);
  flex-shrink: 0;
  font-family: var(--ff-heading);
}
.pmod-name {
  color: var(--c-white);
  font-size: 1.35rem;
  font-weight: 800;
  font-family: var(--ff-heading);
  margin: 0 0 .3rem;
  line-height: 1.2;
}

.pmod-body {
  padding: var(--sp-7) var(--sp-8);
}

.pmod-section-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--c-navy);
  border-bottom: 2px solid var(--c-gray-200);
  padding-bottom: .35rem;
  margin-bottom: var(--sp-3);
}

.pmod-two-col {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--sp-8);
  margin-top: var(--sp-5);
}

.pmod-desc {
  font-size: .9rem;
  color: var(--c-text);
  line-height: 1.75;
  margin: 0;
}

.pmod-benefit-details {
  font-size: .85rem;
  color: var(--c-muted);
  line-height: 1.65;
  margin: var(--sp-3) 0 0;
}

.pmod-discount-block { margin-bottom: var(--sp-2); }

.pmod-provs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.pmod-prov-chip {
  background: var(--c-gray-100);
  color: var(--c-navy);
  font-size: .75rem;
  font-weight: 600;
  padding: .25rem .65rem;
  border-radius: var(--r-full);
  border: 1px solid var(--c-gray-200);
}

.pmod-address {
  font-size: .82rem;
  color: var(--c-muted);
  line-height: 1.5;
  margin-top: var(--sp-2);
}

.pmod-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.pmod-links .btn { justify-content: flex-start; }

/* Gallery */
.pmod-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.pmod-gallery-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--r-md);
  cursor: pointer;
  border: 1px solid var(--c-gray-200);
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.pmod-gallery-img:hover { opacity: .88; transform: scale(1.02); }

/* Modal responsive */
@media (max-width: 640px) {
  .pmod-overlay  { padding: 0; align-items: flex-end; }
  .pmod-wrap     { border-radius: var(--r-xl) var(--r-xl) 0 0; max-height: 92dvh; overflow-y: auto; }
  .pmod-header   { padding: var(--sp-6) var(--sp-5); }
  .pmod-body     { padding: var(--sp-5) var(--sp-5); }
  .pmod-two-col  { grid-template-columns: 1fr; gap: var(--sp-4); }
  .pmod-gallery  { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .pmod-logo, .pmod-logo-placeholder { width: 64px; height: 64px; }
  .pmod-name     { font-size: 1.1rem; }
}



/* ─────────────────────────────────────────
   29. ADVICE / BLOG
───────────────────────────────────────── */

/* ── Article body typography ──
   Written fresh rather than extending .legal-content: that block is tuned for
   dense legal text (h2 at 1.25rem with a border-bottom rule, 1.75 line-height),
   which reads like a contract clause. Editorial prose wants a longer measure,
   a looser return sweep and no rules under the headings. */
.article-body {
  max-width: 68ch;              /* ~700-720px => 60-75 chars per line */
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--c-text);
}
.article-body > *:first-child { margin-top: 0; }
.article-body > *:last-child  { margin-bottom: 0; }

.article-body p {
  color: var(--c-text);
  line-height: 1.85;
  margin-bottom: var(--sp-6);
}

/* Lead paragraph gets weight without needing a class inside body_html */
.article-body > p:first-of-type {
  font-size: 1.1875rem;
  line-height: 1.75;
  color: var(--c-navy);
  font-weight: 500;
}

/* Asymmetric margins bind a heading to the text it introduces */
.article-body h2 {
  font-family: var(--ff-heading);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 800;
  color: var(--c-dark);
  line-height: 1.25;
  margin: var(--sp-12) 0 var(--sp-4);
}
.article-body h3 {
  font-family: var(--ff-heading);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--c-navy);
  margin: var(--sp-8) 0 var(--sp-3);
}
.article-body h4 {
  font-family: var(--ff-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--c-navy);
  margin: var(--sp-6) 0 var(--sp-2);
}

.article-body ul,
.article-body ol { margin: 0 0 var(--sp-6) var(--sp-6); padding: 0; }
.article-body ul li { list-style-type: disc; }
.article-body ol li { list-style-type: decimal; }
.article-body li {
  color: var(--c-text);
  line-height: 1.8;
  margin-bottom: var(--sp-3);
  padding-left: var(--sp-1);
}
.article-body li::marker { color: var(--c-gold); }

.article-body a {
  color: var(--c-navy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(245, 158, 11, .55);
  transition: color var(--t-fast), text-decoration-color var(--t-fast);
}
.article-body a:hover { color: var(--c-gold-dark); text-decoration-color: var(--c-gold); }
.article-body strong  { color: var(--c-dark); font-weight: 700; }

/* Pull-quote - the guillemet lines in the source drafts become <blockquote> */
.article-body blockquote {
  position: relative;
  margin: var(--sp-10) 0;
  padding: var(--sp-6) var(--sp-7);
  border-left: 4px solid var(--c-gold);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--c-gray-50);
}
.article-body blockquote::before {
  content: "\201C";
  position: absolute;
  top: -.1em;
  left: .35rem;
  font-family: var(--ff-heading);
  font-size: 4rem;
  line-height: 1;
  color: rgba(245, 158, 11, .22);
  pointer-events: none;
}
.article-body blockquote p {
  position: relative;
  font-family: var(--ff-heading);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-navy);
  margin: 0;
}
.article-body blockquote p + p { margin-top: var(--sp-3); }

/* ── Listing section ── */
.advice-section { padding-top: var(--sp-12); }

/* ── Filter tabs ── */
.advice-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-bottom: var(--sp-12);
}
.advice-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: .6rem 1.35rem;
  border: 2px solid var(--c-gray-200);
  border-radius: var(--r-full);
  background: var(--c-white);
  font-size: .9rem;
  font-weight: 700;
  color: var(--c-navy);
  transition: all var(--t-fast);
}
.advice-tab:hover { border-color: var(--c-navy); transform: translateY(-2px); }
.advice-tab.is-active {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: var(--c-white);
}
.advice-tab:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; }
.advice-tab-count {
  font-size: .7rem;
  font-weight: 700;
  padding: .1rem .45rem;
  border-radius: var(--r-full);
  background: var(--c-gray-100);
  color: var(--c-muted);
}
.advice-tab.is-active .advice-tab-count {
  background: rgba(255, 255, 255, .18);
  color: var(--c-white);
}

/* ── Card grid ── */
.advice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
.advice-grid > * { min-width: 0; }

/* ── Card - the whole card is one anchor, so children are spans ── */
.advice-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--c-white);
  border: 1px solid var(--c-gray-200);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.advice-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(15, 37, 87, .12);
  border-color: var(--c-gold);
}
.advice-card:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; }

.advice-card-media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-gray-100);
}
.advice-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.advice-card:hover .advice-card-media img { transform: scale(1.04); }
.advice-card-media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-dark) 100%);
  color: rgba(245, 158, 11, .55);
  font-size: 2.25rem;
}

.advice-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--sp-3);
  padding: var(--sp-6);
}

.advice-badge {
  align-self: flex-start;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .25rem .7rem;
  border-radius: var(--r-full);
}
.advice-badge--homeowners  { background: rgba(37, 99, 235, .12);  color: #1D4ED8; }
.advice-badge--contractors { background: rgba(245, 158, 11, .16); color: var(--c-gold-dark); }

.advice-card-title {
  display: block;
  font-family: var(--ff-heading);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--c-dark);
}
.advice-card:hover .advice-card-title { color: var(--c-navy); }

.advice-card-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--c-muted);
}
.advice-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: auto;
  font-size: .78rem;
  font-weight: 600;
  color: var(--c-muted);
}
.advice-card-dot { color: var(--c-gray-300); }
.advice-card-more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-gray-100);
  font-size: .85rem;
  font-weight: 700;
  color: var(--c-navy);
}
.advice-card-more i { transition: transform var(--t-fast); }
.advice-card:hover .advice-card-more   { color: var(--c-gold-dark); }
.advice-card:hover .advice-card-more i { transform: translateX(4px); }

/* Homepage teaser variant */
.advice-card--compact .advice-card-media   { aspect-ratio: 2 / 1; }
.advice-card--compact .advice-card-body    { padding: var(--sp-5); }
.advice-card--compact .advice-card-excerpt { -webkit-line-clamp: 2; }

/* ── Article hero - featured image sits behind the navy gradient, so it reads
      as branded rather than as a stock banner, and degrades cleanly to plain
      navy when an article has no image. ── */
.advice-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-dark) 100%);
  padding: calc(var(--nav-h) + var(--sp-12)) 0 var(--sp-12);
}
.advice-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .3;
}
.advice-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 22, 40, .5) 0%, rgba(10, 22, 40, .92) 100%);
}
.advice-hero-bg img { width: 100%; height: 100%; object-fit: cover; }

.advice-hero-inner { max-width: 760px; }
.advice-hero h1 { color: var(--c-white); margin: var(--sp-4) 0 var(--sp-5); }
.advice-hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  font-size: .875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .72);
}
.advice-crumbs {
  font-size: .8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .5);
}
.advice-crumbs a       { color: rgba(255, 255, 255, .72); }
.advice-crumbs a:hover { color: var(--c-gold); }
.advice-crumbs span    { margin: 0 .45rem; }

.advice-body-section { padding: var(--sp-16) 0; }

/* ── Article CTA ── */
.advice-cta-inner {
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: var(--sp-8);
  align-items: center;
}
.advice-cta-text h2 { color: var(--c-white); margin-bottom: var(--sp-3); }
.advice-cta-text p  { color: rgba(255, 255, 255, .72); margin: 0; }
.advice-cta-actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

.advice-backlinks {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--sp-12);
}

/* ── Empty state ── */
.advice-empty { text-align: center; padding: var(--sp-16) 0; }
.advice-empty-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--sp-6);
  border-radius: var(--r-full);
  background: var(--c-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--c-muted);
}
.advice-empty h3 { color: var(--c-navy); margin-bottom: var(--sp-3); }
.advice-empty p  { color: var(--c-muted); max-width: 460px; margin: 0 auto var(--sp-8); }

/* ── Pager ── */
.advice-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--c-gray-200);
}
.advice-pager-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: .55rem 1.25rem;
  border: 2px solid var(--c-gray-200);
  border-radius: var(--r-full);
  font-size: .875rem;
  font-weight: 700;
  color: var(--c-navy);
  transition: all var(--t-fast);
}
.advice-pager-link:hover {
  border-color: var(--c-navy);
  background: var(--c-navy);
  color: var(--c-white);
}
.advice-pager-status { font-size: .82rem; font-weight: 600; color: var(--c-muted); }

/* ── Nav sizing for the 7th top-level item ──
   "Advice" pushes the desktop nav to 7 items, which no longer fits the shared
   1200px .container: labels like "How It Works" and "For Contractors" were
   breaking onto two lines inside their own <li>.

   1. white-space: nowrap stops a label ever splitting mid-item. This is the
      actual fix for the stacking - without it the nav silently absorbs any
      shortfall by wrapping text instead of overflowing, which also makes width
      measurement misleading.
   2. The nav gets its own wider max-width so it has room on large screens.
      Page content stays at 1200px; only the nav bar widens.
   3. Below the point where seven items genuinely cannot fit, collapse to the
      hamburger rather than shrink the text into illegibility. */
.nav-links a { white-space: nowrap; }

.nav-inner {
  max-width: 1520px;   /* page content stays at var(--max-w) = 1200px */
}

@media (max-width: 1400px) {
  .nav-inner { gap: var(--sp-6); }
  .nav-links { gap: var(--sp-6); }
}
@media (max-width: 1280px) {
  .nav-inner   { gap: var(--sp-5); }
  .nav-links   { gap: var(--sp-5); }
  .nav-links a { font-size: .875rem; }
}
@media (max-width: 1160px) {
  .nav-inner   { gap: var(--sp-4); }
  .nav-links   { gap: var(--sp-4); }
  .nav-links a { font-size: .82rem; }
}
@media (max-width: 1080px) {
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger       { display: flex; }
}

/* ── Advice responsive (matching the existing 1024/768/600/480 steps) ── */
@media (max-width: 1024px) {
  .advice-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .advice-cta-inner    { grid-template-columns: 1fr; text-align: center; }
  .advice-cta-actions  { justify-content: center; }
  .advice-body-section { padding: var(--sp-12) 0; }
  .advice-hero         { padding: calc(var(--nav-h) + var(--sp-8)) 0 var(--sp-10); }
}
@media (max-width: 600px) {
  .advice-grid  { grid-template-columns: 1fr; gap: var(--sp-5); }
  .article-body { font-size: 1rem; line-height: 1.8; }
  .article-body > p:first-of-type { font-size: 1.0625rem; }
  .article-body blockquote   { padding: var(--sp-5); margin: var(--sp-8) 0; }
  .article-body blockquote p { font-size: 1.0625rem; }
  .advice-tabs  { gap: var(--sp-2); }
  .advice-tab   { padding: .5rem 1rem; font-size: .82rem; }
  .advice-pager { flex-direction: column; }
  .advice-backlinks .btn { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
  .advice-card-body { padding: var(--sp-5); }
}


/* ── Article share row ── */
.advice-share {
  /* font-size is declared so the ch unit resolves against the same basis as
     .article-body, otherwise the row is ~40px narrower than the text above it.
     Children set their own rem sizes, so this does not change how anything looks. */
  font-size: 1.0625rem;
  max-width: 68ch;
  margin: var(--sp-12) auto 0;
  padding-top: var(--sp-8);
  border-top: 1px solid var(--c-gray-200);
}
.advice-share-label {
  display: block;
  margin-bottom: var(--sp-4);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--c-muted);
}
.advice-share-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.advice-share-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: .55rem 1.05rem;
  border: 1px solid var(--c-gray-200);
  border-radius: var(--r-full);
  background: var(--c-white);
  font-family: var(--ff-body);
  font-size: .85rem;
  font-weight: 700;
  color: var(--c-navy);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast);
}
.advice-share-btn i { font-size: .95rem; }
.advice-share-btn:hover { transform: translateY(-2px); color: var(--c-white); }
.advice-share-btn:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; }

/* Brand colours applied on hover only, so the row stays calm at rest */
.advice-share-btn--facebook:hover { background: #1877F2; border-color: #1877F2; }
.advice-share-btn--whatsapp:hover { background: #25D366; border-color: #25D366; }
.advice-share-btn--linkedin:hover { background: #0A66C2; border-color: #0A66C2; }
.advice-share-btn--x:hover        { background: #000;    border-color: #000; }
.advice-share-btn--native:hover,
.advice-share-btn--copy:hover     { background: var(--c-navy); border-color: var(--c-navy); }

/* Confirmation state after copying */
.advice-share-btn.is-done {
  background: var(--c-whatsapp, #25D366);
  border-color: var(--c-whatsapp, #25D366);
  color: var(--c-white);
}

@media (max-width: 600px) {
  .advice-share { margin-top: var(--sp-8); padding-top: var(--sp-6); }
  .advice-share-btns { gap: var(--sp-2); }
  .advice-share-btn { padding: .5rem .85rem; font-size: .8rem; }
  /* Labels are redundant next to recognisable brand glyphs on a narrow screen */
  .advice-share-btn--facebook span,
  .advice-share-btn--linkedin span,
  .advice-share-btn--x span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}


/* ============================================================
   30. REQUEST FLOW  (request.php)

   Mobile-first, existing tokens only, existing breakpoints
   (1024 / 900 / 600 / 480).

   DELIBERATELY NO .fade-up ANYWHERE IN THIS SECTION. That class is
   opacity:0 until the scroll observer adds .visible, and every element
   here is critical content - a step panel that never fades in is a
   blank form.
   ============================================================ */
/* padding-top moved to section 34 (fixed-nav clearance) */

.request-intro { max-width: 640px; margin: 0 auto var(--sp-8); text-align: center; }
.request-title {
  font-family: var(--ff-heading); font-size: clamp(1.5rem, 4.5vw, 2.25rem);
  line-height: 1.2; color: var(--c-navy); margin: 0 0 var(--sp-3);
}
.request-sub { color: var(--c-muted); font-size: 1rem; line-height: 1.65; margin: 0 0 var(--sp-4); }
.request-trust {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); justify-content: center;
}
.request-trust li { font-size: .85rem; color: var(--c-navy); font-weight: 600; }
.request-trust i { color: var(--c-gold); margin-right: var(--sp-1); }

.request-shell {
  max-width: 720px; margin: 0 auto;
  background: var(--c-white); border: 1px solid var(--c-gray-200);
  border-radius: var(--r-lg); box-shadow: var(--sh-md);
  padding: var(--sp-5);
}
.request-footnote { text-align: center; margin: var(--sp-6) 0 0; font-size: .875rem; color: var(--c-muted); }

/* ── progress bar ──
   Mirrors .upload-progress deliberately, so the two bars on this page
   read as the same component. */
.req-progress { margin-bottom: var(--sp-5); }
.req-progress-track {
  height: 6px; background: var(--c-gray-200); border-radius: var(--r-full); overflow: hidden;
}
.req-progress-fill {
  display: block; height: 100%; width: 20%;
  background: linear-gradient(90deg, var(--c-gold), var(--c-gold-dark));
  border-radius: var(--r-full); transition: width var(--t);
}
.req-progress-label {
  margin-top: var(--sp-2); font-size: .78rem; color: var(--c-muted);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
.req-progress-label b { color: var(--c-navy); }

/* ── step panels ──
   .js-stepped is added BY JAVASCRIPT. Without JS every fieldset stays
   visible and the form degrades to one long page that still submits. */
.req-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.js-stepped .req-step { display: none; }
.js-stepped .req-step.is-active { display: block; }

.req-step-head { margin-bottom: var(--sp-4); }
.req-step-eyebrow {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-gold-dark); margin-bottom: var(--sp-1);
}
.req-step-title {
  font-family: var(--ff-heading); font-size: 1.35rem; line-height: 1.25;
  color: var(--c-navy); margin: 0;
}
.req-step-hint { margin: var(--sp-2) 0 0; font-size: .9rem; color: var(--c-muted); line-height: 1.55; }

.req-nav { display: flex; flex-direction: column-reverse; gap: var(--sp-2); margin-top: var(--sp-6); }
.req-nav .btn { width: 100%; min-height: 48px; }

.form-hint-inline { font-weight: 400; color: var(--c-muted); font-size: .85em; }

/* ── trade cards (extends the .founding-cat-card idiom) ── */
.req-trade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.req-trade-card { position: relative; margin: 0; cursor: pointer; }
.req-trade-card input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
}
.req-trade-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); text-align: center;
  min-height: 96px; padding: var(--sp-3);
  border: 2px solid var(--c-gray-200); border-radius: var(--r-md);
  background: var(--c-gray-50); transition: all var(--t-fast);
}
.req-trade-inner i { font-size: 1.5rem; color: var(--c-blue); transition: color var(--t-fast); }
.req-trade-name { font-size: .82rem; font-weight: 600; color: var(--c-text); line-height: 1.3; }
.req-trade-card:hover .req-trade-inner { border-color: var(--c-blue-light); background: var(--c-white); }
.req-trade-card input:focus-visible + .req-trade-inner { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.req-trade-card.selected .req-trade-inner,
.req-trade-card input:checked + .req-trade-inner {
  border-color: var(--c-gold); background: #FFFBEB;
}
.req-trade-card.selected .req-trade-inner i,
.req-trade-card input:checked + .req-trade-inner i { color: var(--c-gold-dark); }

/* ── sub-service list ── */
.req-sub-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.req-sub-item {
  display: flex; align-items: center; gap: var(--sp-3); margin: 0; cursor: pointer;
  min-height: 46px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-gray-200); border-radius: var(--r-sm);
  background: var(--c-white); transition: all var(--t-fast);
}
.req-sub-item:hover { border-color: var(--c-blue-light); background: var(--c-gray-50); }
.req-sub-item input { width: 18px; height: 18px; accent-color: var(--c-gold); flex: 0 0 auto; }
.req-sub-item span { font-size: .92rem; color: var(--c-text); }
.req-sub-item.selected { border-color: var(--c-gold); background: #FFFBEB; }

/* ── urgency cards ── */
.req-urgency-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }
.req-urgency-card { position: relative; margin: 0; cursor: pointer; }
.req-urgency-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.req-urgency-inner {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  gap: 0 var(--sp-3); align-items: center;
  min-height: 60px; padding: var(--sp-3);
  border: 2px solid var(--c-gray-200); border-radius: var(--r-md);
  background: var(--c-gray-50); transition: all var(--t-fast);
}
.req-urgency-inner i { grid-row: 1 / 3; font-size: 1.25rem; color: var(--c-blue); }
.req-urgency-inner b { font-size: .95rem; color: var(--c-navy); }
.req-urgency-inner small { font-size: .78rem; color: var(--c-muted); }
.req-urgency-card:hover .req-urgency-inner { border-color: var(--c-blue-light); background: var(--c-white); }
.req-urgency-card input:focus-visible + .req-urgency-inner { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.req-urgency-card.selected .req-urgency-inner,
.req-urgency-card input:checked + .req-urgency-inner { border-color: var(--c-gold); background: #FFFBEB; }
.req-urgency-card--emergency .req-urgency-inner i { color: #DC2626; }

.req-urgent-note {
  display: block; margin-top: var(--sp-3); padding: var(--sp-3);
  background: #FEF2F2; border: 1px solid #FCA5A5; border-radius: var(--r-md);
  font-size: .88rem; line-height: 1.55; color: #7F1D1D;
}
.req-urgent-note .btn { margin-top: var(--sp-2); }

/* ── location ── */
.req-location-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}
.req-geo-btn { min-height: 44px; }
.req-geo-state { font-size: .82rem; color: var(--c-muted); }
.req-geo-state.is-ok { color: #047857; font-weight: 600; }
.req-geo-state.is-error { color: #B45309; }

/* ── description helpers ── */
.req-chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: var(--sp-2) 0; }
.req-chip {
  border: 1px solid var(--c-gray-300); background: var(--c-white);
  border-radius: var(--r-full); padding: .3rem .7rem;
  font-size: .78rem; color: var(--c-navy); cursor: pointer;
  min-height: 32px; transition: all var(--t-fast);
}
.req-chip:hover { border-color: var(--c-gold); background: #FFFBEB; }
.req-chip.is-used { opacity: .45; pointer-events: none; }
.req-count { color: var(--c-navy); font-weight: 700; }

.req-media-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.req-thumb {
  width: 72px; height: 72px; border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--c-gray-200); background: var(--c-gray-100);
}
.req-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── consents + review ── */
.req-consents { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.req-consents .form-check { align-items: flex-start; }
.req-consents .form-check-label { font-size: .86rem; line-height: 1.5; }

.req-review {
  margin: var(--sp-4) 0; border: 1px solid var(--c-gray-200);
  border-radius: var(--r-md); overflow: hidden;
}
.req-review:empty { display: none; }
.req-review-row {
  display: grid; grid-template-columns: 74px 1fr auto; gap: var(--sp-2);
  align-items: center; padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-gray-100); background: var(--c-gray-50);
}
.req-review-row:last-child { border-bottom: 0; }
.req-review-label {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-muted); font-weight: 700;
}
.req-review-value { font-size: .87rem; color: var(--c-text); word-break: break-word; }
.req-review-edit {
  border: 0; background: none; color: var(--c-blue); font-size: .78rem;
  font-weight: 700; cursor: pointer; text-decoration: underline; padding: var(--sp-1);
  min-height: 32px;
}
.req-restored { margin-bottom: var(--sp-4); }

/* ── receipt ──
   Persistent and copyable, NOT a dismissible modal: the PIN is the only
   way back into the job, and email delivery is a backup rather than a
   guarantee. */
.request-receipt { text-align: center; padding: var(--sp-4) var(--sp-2); }
.request-receipt > i { font-size: 2.75rem; color: var(--c-whatsapp); margin-bottom: var(--sp-3); }
.request-receipt h2 {
  font-family: var(--ff-heading); font-size: 1.5rem; color: var(--c-navy); margin: 0 0 var(--sp-4);
}
.receipt-ref, .receipt-pin {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--sp-2); margin: var(--sp-2) auto; padding: var(--sp-3);
  max-width: 380px; background: var(--c-gray-50);
  border: 1px solid var(--c-gray-200); border-radius: var(--r-md);
}
.receipt-ref span, .receipt-pin span {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-muted); font-weight: 700; flex: 1 0 100%;
}
.receipt-ref b, .receipt-pin b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.4rem; letter-spacing: 2px; color: var(--c-navy);
}
.receipt-note { margin: var(--sp-4) auto var(--sp-3); max-width: 420px; font-size: .9rem; line-height: 1.6; }
.receipt-warnings {
  list-style: none; margin: 0 auto var(--sp-3); padding: var(--sp-2) var(--sp-3);
  max-width: 420px; text-align: left; background: #FFFBEB;
  border: 1px solid #FCD34D; border-radius: var(--r-sm); font-size: .82rem; color: #92400E;
}

.copy-btn {
  border: 1px solid var(--c-gray-300); background: var(--c-white);
  border-radius: var(--r-sm); padding: .25rem .6rem;
  font-size: .75rem; font-weight: 700; color: var(--c-navy);
  cursor: pointer; min-height: 32px; transition: all var(--t-fast);
}
.copy-btn:hover { border-color: var(--c-gold); background: #FFFBEB; }
.copy-btn.is-copied { background: #D1FAE5; border-color: #6EE7B7; color: #065F46; }

@media (min-width: 600px) {
  .request-shell { padding: var(--sp-8); }
  .req-trade-grid { grid-template-columns: repeat(3, 1fr); }
  .req-urgency-grid { grid-template-columns: 1fr 1fr; }
  .req-nav { flex-direction: row; justify-content: space-between; }
  .req-nav .btn { width: auto; min-width: 150px; }
  .req-nav .req-next, .req-nav .req-submit { margin-left: auto; }
}
@media (min-width: 900px) {
  .req-trade-grid { grid-template-columns: repeat(4, 1fr); }
}


/* ============================================================
   31. JOB TRACKER  (track.php)
   ============================================================ */
/* padding-top moved to section 34 (fixed-nav clearance) */
.track-gate-card {
  max-width: 460px; margin: 0 auto; padding: var(--sp-6);
  background: var(--c-white); border: 1px solid var(--c-gray-200);
  border-radius: var(--r-lg); box-shadow: var(--sh-md);
}
.track-gate-card h1 {
  font-family: var(--ff-heading); font-size: 1.5rem; color: var(--c-navy); margin: 0 0 var(--sp-2);
}
.track-gate-card > p { color: var(--c-muted); font-size: .92rem; margin: 0 0 var(--sp-5); }
.track-help { margin-top: var(--sp-5); border-top: 1px solid var(--c-gray-200); padding-top: var(--sp-3); }
.track-help summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--c-blue); }
.track-help form { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }

/* 1rem = 16px. NEVER shrink these: below 16px iOS zooms the page on
   focus and the whole layout jumps mid-form. */
.pin-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1rem; letter-spacing: .5em; text-align: center;
}

/* padding-top moved to section 34 (fixed-nav clearance) */
.job-shell { padding-bottom: var(--sp-12); }
.job-header {
  background: var(--c-white); border: 1px solid var(--c-gray-200);
  border-radius: var(--r-md); padding: var(--sp-4); margin-bottom: var(--sp-4);
}
.job-ref { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.job-ref-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-muted); font-weight: 700; flex: 1 0 100%;
}
.job-ref-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.15rem; color: var(--c-navy); letter-spacing: 1px;
}
.job-header-meta { margin: var(--sp-2) 0 0; font-size: .85rem; color: var(--c-muted); }
.job-signout { font-size: .78rem; color: var(--c-blue); }

.job-status-pill {
  display: inline-block; margin-top: var(--sp-2); padding: .25rem .7rem;
  border-radius: var(--r-full); font-size: .75rem; font-weight: 700;
  background: var(--c-gray-100); color: var(--c-text); border: 1px solid var(--c-gray-200);
}
.job-status-pill--new,
.job-status-pill--matching    { background: #DBEAFE; color: #1E40AF; border-color: #93C5FD; }
.job-status-pill--quoting     { background: #FEF3C7; color: #92400E; border-color: #FCD34D; }
.job-status-pill--quoted      { background: #FFEDD5; color: #9A3412; border-color: #FDBA74; }
.job-status-pill--approved    { background: #D1FAE5; color: #065F46; border-color: #6EE7B7; }
.job-status-pill--no_match,
.job-status-pill--cancelled,
.job-status-pill--expired     { background: #FEE2E2; color: #991B1B; border-color: #FCA5A5; }

/* Four steps only. Booking / payment / completion are NOT rendered -
   Phase 1 cannot reach them, and a rail showing steps it never advances
   through is how a tracker loses trust. */
.job-status-rail {
  list-style: none; margin: 0 0 var(--sp-5); padding: 0 0 0 var(--sp-5);
  position: relative; counter-reset: rail;
}
.job-status-rail::before {
  content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 2px; background: var(--c-gray-200);
}
.job-status-step {
  position: relative; padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
  font-size: .88rem; color: var(--c-muted);
}
.job-status-step::before {
  content: ''; position: absolute; left: calc(-1 * var(--sp-5) + 2px); top: 50%;
  transform: translateY(-50%);
  width: 12px; height: 12px; border-radius: var(--r-full);
  background: var(--c-white); border: 2px solid var(--c-gray-300);
}
.job-status-step.is-done { color: var(--c-text); }
.job-status-step.is-done::before { background: var(--c-whatsapp); border-color: var(--c-whatsapp); }
.job-status-step.is-current { color: var(--c-navy); font-weight: 700; }
.job-status-step.is-current::before { background: var(--c-gold); border-color: var(--c-gold); }

.job-summary-card, .job-contractors, .quote-stack, .job-thread {
  margin-bottom: var(--sp-6);
}
.job-summary-card {
  background: var(--c-white); border: 1px solid var(--c-gray-200);
  border-radius: var(--r-md); padding: var(--sp-4);
}
.job-summary-card dl { display: grid; grid-template-columns: 90px 1fr; gap: var(--sp-2); margin: 0; }
.job-summary-card dt {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-muted); font-weight: 700;
}
.job-summary-card dd { margin: 0; font-size: .9rem; color: var(--c-text); }
.job-photo-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.job-photo-grid a { display: block; width: 84px; height: 84px; border-radius: var(--r-sm); overflow: hidden; }
.job-photo-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }

.section-header-sm {
  font-family: var(--ff-heading); font-size: 1.1rem; color: var(--c-navy);
  margin: 0 0 var(--sp-3);
}

/* ── contractor cards ── */
.contractor-card {
  background: var(--c-white); border: 1px solid var(--c-gray-200);
  border-radius: var(--r-md); padding: var(--sp-4); margin-bottom: var(--sp-3);
}
.contractor-card--awarded { border-color: var(--c-whatsapp); background: #F0FDF4; }
.contractor-card-head { display: flex; gap: var(--sp-3); align-items: flex-start; }
.contractor-avatar {
  width: 52px; height: 52px; border-radius: var(--r-full); object-fit: cover;
  background: var(--c-gray-100); flex: 0 0 auto;
}
.contractor-name { font-family: var(--ff-heading); font-size: 1rem; color: var(--c-navy); margin: 0 0 var(--sp-1); }
.contractor-badges { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: 0 0 var(--sp-1); }
.verify-badge {
  font-size: .68rem; font-weight: 700; padding: .12rem .45rem;
  border-radius: var(--r-sm); white-space: nowrap;
}
.verify-badge--dadbod { background: #DBEAFE; color: #1E40AF; border: 1px solid #93C5FD; }
.verify-badge--cipc   { background: #EDE9FE; color: #5B21B6; border: 1px solid #C4B5FD; }

.contractor-rating { margin: 0; font-size: .82rem; color: var(--c-muted); }
.rating-stars { color: var(--c-gold); letter-spacing: 1px; }
/* NULL rating renders as this, never as 0.0 stars. Every contractor has
   a NULL rating at launch, and a fabricated score on a trust
   marketplace is a reputational bomb for a cosmetic gain. */
.rating-new { font-size: .75rem; font-weight: 700; color: #1E40AF; }

.contractor-meta {
  list-style: none; margin: var(--sp-3) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.contractor-meta li { font-size: .82rem; color: var(--c-muted); }
.contractor-meta i { color: var(--c-blue); width: 16px; }
.contractor-reasons { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.contractor-reasons li { font-size: .78rem; color: #047857; }
.contractor-reasons i { margin-right: var(--sp-1); }

.callout-fee {
  margin: var(--sp-3) 0 0; padding: var(--sp-2) var(--sp-3);
  background: var(--c-gray-50); border-left: 3px solid var(--c-gold);
  border-radius: var(--r-sm); font-size: .82rem;
}
.contractor-card-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-gray-100);
}
.contractor-state {
  font-size: .72rem; font-weight: 700; padding: .2rem .55rem;
  border-radius: var(--r-sm); margin-right: auto;
}
.contractor-state--invited    { background: var(--c-gray-100); color: var(--c-muted); }
.contractor-state--quoted     { background: #D1FAE5; color: #065F46; }
.contractor-state--declined   { background: #FEE2E2; color: #991B1B; }
.contractor-state--expired    { background: #FEF3C7; color: #92400E; }
.contractor-state--awarded    { background: var(--c-gold); color: var(--c-navy); }

/* ── quote cards ── */
.quote-card {
  background: var(--c-white); border: 2px solid var(--c-gray-200);
  border-radius: var(--r-md); padding: var(--sp-4); margin-bottom: var(--sp-4);
}
.quote-card--approved   { border-color: var(--c-whatsapp); }
.quote-card--superseded { opacity: .55; }
.quote-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.quote-brand { height: 24px; width: auto; }
.quote-card-head h3 { font-family: var(--ff-heading); font-size: 1rem; color: var(--c-navy); margin: 0; }
.quote-meta { margin: 0; font-size: .74rem; color: var(--c-muted); font-family: ui-monospace, monospace; }
.quote-validity { margin-left: auto; font-size: .78rem; color: var(--c-muted); }
.quote-expiry-warn { color: #B45309; font-weight: 700; }

/* A real table with <th> row headers: these are tabular figures and a
   screen reader should read them as such. */
.quote-lines { width: 100%; border-collapse: collapse; margin: var(--sp-3) 0; }
.quote-lines th, .quote-lines td {
  padding: var(--sp-2) 0; font-size: .9rem; text-align: left;
  border-bottom: 1px solid var(--c-gray-100);
}
.quote-lines th { font-weight: 500; color: var(--c-text); }
.quote-lines th small { display: block; font-size: .7rem; color: var(--c-muted); font-weight: 400; }
.quote-lines td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.quote-line--sub th, .quote-line--sub td { font-weight: 700; }
.quote-lines tfoot th, .quote-lines tfoot td {
  border-bottom: 0; border-top: 2px solid var(--c-navy);
  padding-top: var(--sp-3); font-size: 1.1rem; font-weight: 800; color: var(--c-navy);
}
.quote-deposit {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2);
  margin: var(--sp-3) 0; padding: var(--sp-3);
  background: #FFFBEB; border: 1px solid #FCD34D; border-radius: var(--r-sm);
}
.quote-deposit b { font-size: 1.1rem; color: var(--c-navy); }
.quote-deposit small { flex: 1 0 100%; font-size: .75rem; color: #92400E; }
.quote-notes h4, .quote-excludes h4 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-muted); margin: var(--sp-3) 0 var(--sp-1);
}
.quote-notes p, .quote-excludes p { margin: 0; font-size: .88rem; line-height: 1.55; }
.quote-attach {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-3); font-size: .85rem; font-weight: 600;
}

.quote-compare {
  display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4);
  grid-template-columns: 1fr;
}
.quote-compare-item {
  background: var(--c-white); border: 1px solid var(--c-gray-200);
  border-radius: var(--r-sm); padding: var(--sp-3); text-align: center;
}
.quote-compare-item b { display: block; font-size: 1.15rem; color: var(--c-navy); }
.quote-compare-item span { font-size: .78rem; color: var(--c-muted); }
.quote-compare-item.is-cheapest { border-color: var(--c-whatsapp); background: #F0FDF4; }

.quote-actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); }
.quote-actions .btn { min-height: 46px; }

.quote-approved-panel {
  background: #F0FDF4; border: 1px solid #6EE7B7; border-radius: var(--r-md);
  padding: var(--sp-5); text-align: center;
}
.quote-approved-panel > i { font-size: 2.25rem; color: var(--c-whatsapp); }
.quote-approved-panel h3 { font-family: var(--ff-heading); color: var(--c-navy); margin: var(--sp-2) 0; }
.approval-ref { font-size: .78rem; color: var(--c-muted); font-family: ui-monospace, monospace; }
.approved-next {
  margin: var(--sp-4) 0 0; padding: var(--sp-3); text-align: left;
  background: var(--c-white); border-radius: var(--r-sm); font-size: .88rem; line-height: 1.6;
}
.approve-figures { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-3); margin: var(--sp-3) 0; text-align: left; }
.approve-figures dt { font-size: .78rem; color: var(--c-muted); }
.approve-figures dd { margin: 0; font-size: .9rem; font-weight: 600; color: var(--c-text); }
.approve-total { font-size: 1.15rem !important; color: var(--c-navy) !important; }

/* ── approval modal (reuses .success-modal-overlay for the backdrop,
   entry transition and body scroll lock) ── */
.approve-modal-card { max-width: 480px; text-align: left; }
.approve-modal-card h3 { font-family: var(--ff-heading); color: var(--c-navy); margin: 0 0 var(--sp-3); }
.approve-checks { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-3) 0; }
.approve-checks .form-check { align-items: flex-start; }
.approve-checks .form-check-label { font-size: .85rem; line-height: 1.5; }
.approve-type input { text-align: center; letter-spacing: .25em; font-weight: 700; }

/* ── thread ── */
.job-thread { display: flex; flex-direction: column; gap: var(--sp-2); }
.thread-item {
  padding: var(--sp-3); border-radius: var(--r-md); font-size: .88rem; line-height: 1.55;
  background: var(--c-gray-50); border: 1px solid var(--c-gray-200);
}
.thread-item--client { background: #EFF6FF; border-color: #BFDBFE; }
.thread-item--system { background: var(--c-white); font-size: .8rem; color: var(--c-muted); }
.thread-meta {
  display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-muted); font-weight: 700; margin-bottom: var(--sp-1);
}
.job-action-panel {
  margin-top: var(--sp-3); padding: var(--sp-3);
  background: var(--c-gray-50); border: 1px solid var(--c-gray-200); border-radius: var(--r-md);
}

@media (min-width: 600px) {
  .job-status-rail { display: flex; padding: 0; gap: var(--sp-2); }
  .job-status-rail::before { left: 0; right: 0; top: 13px; bottom: auto; height: 2px; width: auto; }
  .job-status-step { flex: 1; padding: var(--sp-6) var(--sp-1) 0; text-align: center; font-size: .8rem; }
  .job-status-step::before { left: 50%; top: 8px; transform: translateX(-50%); }
  .quote-compare { grid-template-columns: repeat(3, 1fr); }
  .quote-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .quote-actions .btn-primary { grid-column: 1 / -1; }
  .brief-actions { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .quote-actions { grid-template-columns: repeat(3, 1fr); }
}


/* ============================================================
   32. CONTRACTOR QUOTE PAGE  (quote.php)
   ============================================================ */
/* Sticky countdown. data-seconds-left is computed SERVER-side from
   invited_at + 30 min - never from the client clock. */
.brief-urgency-bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
  border-radius: var(--r-md); font-size: .9rem;
  background: var(--c-navy); color: var(--c-white);
}
.brief-urgency-bar i { color: var(--c-gold); }
.urgency-countdown {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.15rem; font-weight: 800; color: var(--c-gold); margin-left: auto;
}
.urgency-sub { font-size: .75rem; opacity: .8; }
.brief-urgency-bar.is-soon { background: #92400E; }
.brief-urgency-bar.is-soon .urgency-countdown { color: #FEF3C7; animation: urgencyPulse 1.4s ease-in-out infinite; }
.brief-urgency-bar.is-late { background: var(--c-gray-200); color: var(--c-text); }
.brief-urgency-bar.is-late i, .brief-urgency-bar.is-late .urgency-countdown { color: var(--c-muted); }
@keyframes urgencyPulse { 50% { opacity: .55; } }

.brief-card {
  background: var(--c-white); border: 1px solid var(--c-gray-200);
  border-radius: var(--r-md); padding: var(--sp-5); margin-bottom: var(--sp-4);
}
.brief-eyebrow {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--c-gold-dark); font-weight: 700; margin: 0;
}
.brief-card h1 {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.35rem; color: var(--c-navy); margin: var(--sp-1) 0;
}
.brief-headline { font-family: var(--ff-heading); font-size: 1.1rem; color: var(--c-text); margin: 0 0 var(--sp-3); }
.brief-meta { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.brief-meta-item { font-size: .88rem; color: var(--c-text); }
.brief-meta-item i { color: var(--c-blue); width: 18px; }
.brief-meta-item--urgent { color: #B91C1C; font-weight: 700; }
.brief-meta-item--urgent i { color: #B91C1C; }
.brief-description h2, .brief-photos h2, .brief-audio h2 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-muted); margin: var(--sp-4) 0 var(--sp-2);
}
.brief-description p { margin: 0; font-size: .95rem; line-height: 1.65; }
.brief-photos { display: block; }
.brief-photos a { display: inline-block; width: 96px; height: 96px; margin: 0 var(--sp-2) var(--sp-2) 0;
  border-radius: var(--r-sm); overflow: hidden; }
.brief-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brief-audio audio { width: 100%; max-width: 380px; }
.brief-fee-note {
  margin: var(--sp-4) 0 0; padding: var(--sp-3);
  background: var(--c-gray-50); border-left: 3px solid var(--c-gold);
  border-radius: var(--r-sm); font-size: .85rem; line-height: 1.55;
}
.brief-privacy-note {
  margin: var(--sp-2) 0 0; font-size: .78rem; color: var(--c-muted); font-style: italic;
}

.brief-actions { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.brief-action { min-height: 52px; }
.brief-action--danger { color: #991B1B; border-color: #FCA5A5; }

.quote-form-shell {
  background: var(--c-white); border: 1px solid var(--c-gray-200);
  border-radius: var(--r-md); padding: var(--sp-5);
}
.quote-mode-tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.quote-money-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.quote-vat-line { margin: var(--sp-2) 0; font-size: .85rem; color: var(--c-muted); }
.quote-total-display {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
  margin: var(--sp-4) 0; padding: var(--sp-3) var(--sp-4);
  background: var(--c-navy); color: var(--c-white); border-radius: var(--r-md);
}
.quote-total-display span { font-size: .8rem; opacity: .85; }
.quote-total-value { font-size: 1.4rem; font-weight: 800; color: var(--c-gold); font-variant-numeric: tabular-nums; }
.quote-deposit-hint { color: var(--c-muted); }
.quote-upload-note { font-size: .85rem; color: var(--c-muted); margin: var(--sp-3) 0; }
.quote-submitted-panel {
  text-align: center; padding: var(--sp-6) var(--sp-4);
  background: #F0FDF4; border: 1px solid #6EE7B7; border-radius: var(--r-md);
}
.quote-submitted-panel > i { font-size: 2.25rem; color: var(--c-whatsapp); }
.quote-submitted-panel h3 { font-family: var(--ff-heading); color: var(--c-navy); margin: var(--sp-2) 0; }

@media (min-width: 900px) {
  .brief-actions { grid-template-columns: repeat(4, 1fr); }
  .brief-meta { flex-direction: row; flex-wrap: wrap; gap: var(--sp-4); }
}
@media (max-width: 600px) {
  .quote-money-row { grid-template-columns: 1fr; }
}


/* ============================================================
   33. SHARED STATE CARDS + PRINT
   ============================================================ */
.state-card {
  max-width: 520px; margin: var(--sp-12) auto; text-align: center;
  background: var(--c-white); border: 1px solid var(--c-gray-200);
  border-radius: var(--r-lg); padding: var(--sp-8) var(--sp-5); box-shadow: var(--sh-md);
}
.state-card-icon { font-size: 2.5rem; margin-bottom: var(--sp-3); color: var(--c-muted); }
.state-card-title { font-family: var(--ff-heading); font-size: 1.3rem; color: var(--c-navy); margin: 0 0 var(--sp-3); }
.state-card-body { font-size: .95rem; line-height: 1.65; color: var(--c-muted); margin: 0 0 var(--sp-5); }
.token-state-card--expired .state-card-icon { color: #B45309; }
.token-state-card--invalid .state-card-icon { color: #991B1B; }
.token-state-card--awarded .state-card-icon { color: var(--c-blue); }

/* The pulse must respect the existing reduced-motion opt-out. */
@media (prefers-reduced-motion: reduce) {
  .brief-urgency-bar.is-soon .urgency-countdown { animation: none; }
  .req-progress-fill { transition: none; }
}

/* Every interactive target on these pages clears 44px. */
@media (max-width: 600px) {
  .req-trade-inner, .req-urgency-inner, .req-sub-item,
  .brief-action, .quote-actions .btn, .req-nav .btn { min-height: 48px; }
}

@media print {
  /* The approval summary is the only thing on the site anyone prints. */
  .navbar, .site-footer, .req-nav, .quote-actions, .job-signout,
  .whatsapp-float, .job-thread, .job-action-panel { display: none !important; }
  .job-shell { padding: 0; }
  .quote-card, .quote-approved-panel, .job-header {
    border: 1px solid #999; box-shadow: none; break-inside: avoid;
  }
  a[href]::after { content: ''; }
  body { background: #fff; }
}


/* ── nav: "Check my job" ──
   NOT rendered in the desktop header. Measured with white-space:nowrap forced
   (the only way to get a nav's REAL required width - scrollWidth on an
   already-wrapped nav reports the wrapped size and hides the problem), the
   header needed 1462px against a 1425px container at a 1440px viewport once
   both new links were added. "Get a Contractor" is the conversion path and
   keeps its nav slot; returning clients reach the tracker from the homepage
   tile, the footer and the mobile menu instead.

   The rules below are retained for the mobile menu and any future use. */
.nav-cta-link {
  font-size: .82rem; font-weight: 600; color: var(--c-navy);
  white-space: nowrap; text-decoration: none; padding: .35rem .2rem;
}
.nav-cta-link:hover { color: var(--c-gold-dark); text-decoration: underline; }
.nav-cta-link[aria-current="page"] { color: var(--c-gold-dark); }
@media (max-width: 1180px) {
  /* Below the point where everything genuinely fits, drop this link - it is
     duplicated in the mobile menu and on the homepage tiles. */
  .nav-cta-link { display: none; }
}


/* ── homepage main-menu tiles ──
   Deliberately three tiles. The original WhatsApp menu had four; the fourth
   was "Make a payment", and Paystack is deferred, so shipping that tile would
   promise something the site cannot do.

   No .fade-up: this is the primary navigation for the client journey and must
   be visible on first paint. */
.menu-tiles { padding-top: var(--sp-10); padding-bottom: var(--sp-10); }
.menu-tiles-title {
  font-family: var(--ff-heading); font-size: clamp(1.25rem, 3.5vw, 1.75rem);
  color: var(--c-navy); text-align: center; margin: 0 0 var(--sp-6);
}
.menu-tile-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); max-width: 820px; margin: 0 auto; }
.menu-tile {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); text-decoration: none;
  background: var(--c-white); border: 2px solid var(--c-gray-200);
  border-radius: var(--r-md); box-shadow: var(--sh-sm);
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  min-height: 84px;
}
.menu-tile:hover, .menu-tile:focus-visible {
  border-color: var(--c-gold); transform: translateY(-2px); box-shadow: var(--sh-md);
}
.menu-tile-icon {
  display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 auto;
  border-radius: var(--r-full); background: var(--c-gray-100); color: var(--c-blue); font-size: 1.15rem;
}
.menu-tile--primary { border-color: var(--c-gold); background: #FFFCF5; }
.menu-tile--primary .menu-tile-icon { background: var(--c-gold); color: var(--c-navy); }
.menu-tile-body b { display: block; font-size: 1.02rem; color: var(--c-navy); margin-bottom: .15rem; }
.menu-tile-body small { display: block; font-size: .84rem; color: var(--c-muted); line-height: 1.5; }
.menu-tile-go { color: var(--c-gray-300); transition: color var(--t-fast); }
.menu-tile:hover .menu-tile-go { color: var(--c-gold); }

@media (max-width: 480px) {
  .menu-tile { grid-template-columns: auto 1fr; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
  .menu-tile-go { display: none; }
  .menu-tile-icon { width: 40px; height: 40px; font-size: 1rem; }
}


/* ============================================================
   34. LAYOUT FIXES
   ============================================================ */

/* ── the `hidden` attribute must actually hide ──
   The browser's own stylesheet has [hidden] { display: none }, but that is a
   UA rule and ANY author `display` declaration beats it. This stylesheet sets
   display on .btn (inline-flex), .success-modal-overlay (flex) and
   .req-urgent-note (block), so every element rendered with a `hidden`
   attribute was showing anyway:

     • "Back" and "Send my request" were both visible on step 1 of request.php
     • the emergency WhatsApp note showed for every urgency
     • the quote-approval modal on track.php was PERMANENTLY OPEN

   There was no global [hidden] rule in the file, so this adds one. It needs
   !important precisely because it has to outrank those class-level display
   declarations regardless of source order. */
[hidden] { display: none !important; }


/* ── first-section clearance under the fixed nav ──
   The navbar is fixed and --nav-h tall (72px), so the FIRST section of every
   page has to pad past it. Existing pages do this through their hero classes
   (.hero, .page-hero, .founding-hero, .advice-hero all use
   calc(var(--nav-h) + ...)).

   The marketplace pages have no hero, and .section on its own is only
   var(--sp-20) = 80px - which I then overrode with smaller values (40px, 48px,
   32px, 24px), so the headings slid underneath the navbar and were clipped.

   .section--flow-top is for pages that use a bare .section as their first
   block (quote.php, contractor.php). */
.section--flow-top       { padding-top: calc(var(--nav-h) + var(--sp-8)); }
.request-section         { padding-top: calc(var(--nav-h) + var(--sp-8)); }
.track-gate              { padding-top: calc(var(--nav-h) + var(--sp-10)); }
.job-shell               { padding-top: calc(var(--nav-h) + var(--sp-6)); }

@media (max-width: 600px) {
  /* Tighter, but still clear of the navbar. */
  .section--flow-top     { padding-top: calc(var(--nav-h) + var(--sp-5)); }
  .request-section       { padding-top: calc(var(--nav-h) + var(--sp-5)); }
  .track-gate            { padding-top: calc(var(--nav-h) + var(--sp-6)); }
  .job-shell             { padding-top: calc(var(--nav-h) + var(--sp-4)); }
}
@media print {
  /* No fixed navbar in print, so the reserved space is dead weight. */
  .request-section, .track-gate, .job-shell, .section--flow-top { padding-top: 0; }
}


/* ============================================================
   35. MOBILE-FIRST PASS
   Driven by measurements on a 375x812 and a 375x667 viewport, not by eye.
   Numbers quoted in the comments are the "before" values.
   ============================================================ */

/* ── 35.1  Hero must fit one phone screen ──
   Measured before: at 375x667 the hero was 746px tall - taller than the
   viewport - so the stats row ended at 706px and the visitor had to scroll
   inside the hero before reaching anything else. That is the "hero takes a
   few scrolls" report.

   Two causes:
     1. min-height:100vh. On iOS Safari 100vh is the LARGE viewport (chrome
        retracted), so the hero is always taller than what you can actually
        see on first paint. 100svh is the small viewport - the honest one.
     2. .hero-content carried var(--sp-20) = 80px of padding top AND bottom
        inside that already-full-height box. */
.hero {
  min-height: 100vh;   /* fallback for browsers without svh */
  min-height: 100svh;
}

@media (max-width: 600px) {
  .hero-content            { padding: var(--sp-8) 0; }

  /* One sentence of hero copy, not three. The third paragraph stays in the
     DOM (it carries the "photo / pin / quotes" keywords) but is not what a
     phone visitor needs before seeing the product. */
  .hero-desc--optional     { display: none; }

  .hero h1                 { margin-bottom: var(--sp-4); }
  .hero-badge              { margin-bottom: var(--sp-4); font-size: .7rem; padding: var(--sp-2) var(--sp-4); }
  .hero-sub                { margin-bottom: var(--sp-5); }
  .hero-actions            { margin-bottom: var(--sp-6); gap: var(--sp-2); flex-direction: column; align-items: stretch; }
  .hero-actions .btn       { width: 100%; }

  /* "Apply as Contractor" hidden outright on mobile (2026-09-16, Ryno: "hide
     the Apply as contractor text in the mobile view, the first part of the
     home page"). It was previously demoted to a plain text link rather than
     removed - that wasn't enough; a contractor-recruitment link of any kind
     in the hero still competes with the homeowner CTA on the one page that
     needs to read B2C first. Still reachable on mobile from the nav menu, the
     footer, and the dedicated "For Contractors" section further down this
     same page - this was never the only way in. */
  .hero-action--secondary { display: none; }

  /* 4 stats wrapped onto two rows and cost 158px. Three, in one row. */
  .hero-stat--optional     { display: none; }
  .hero-stats              { gap: var(--sp-4); padding-top: var(--sp-5); justify-content: space-between; }
  .hero-stat               { flex: 1; min-width: 0; }
  .hero-stat strong        { font-size: 1.5rem; }
  /* DIRECT child only. `.hero-stat span` also matches the counter span inside
     <strong> (<strong><span data-count="50">50+</span></strong>), which shrank
     the headline numbers from 24px to 11.2px - they rendered 15px tall. */
  .hero-stat > span        { font-size: .75rem; line-height: 1.3; display: block; }

  /* The scroll cue sat on top of the stats once the hero got shorter. */
  .hero-scroll             { display: none; }
}

/* ── 35.2  Lazy video play affordance ──
   The videos no longer autoplay-and-download 6.8MB. They now show a poster
   and start when scrolled into view. When autoplay is refused (Low Power
   Mode, Data Saver, prefers-reduced-motion) this button is the way in, so it
   must be a real control - not a decorative overlay. */
.chat-video-wrap,
.contractor-img { position: relative; }

.video-play-toggle {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  transition: opacity var(--t);
}
.video-play-toggle i {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-full);
  background: rgba(10,22,40,.72);
  color: var(--c-white);
  font-size: 1.35rem;
  backdrop-filter: blur(4px);
  box-shadow: var(--sh-lg);
  transition: transform var(--t), background var(--t);
}
.video-play-toggle:hover i { transform: scale(1.06); background: rgba(10,22,40,.85); }
.video-play-toggle:focus-visible { outline: 3px solid var(--c-gold); outline-offset: -3px; }

/* Playing: the control is still reachable (tap to pause) but gets out of the
   way visually. Not `display:none` - that would remove the pause affordance. */
.video-play-toggle[data-playing="1"]        { opacity: 0; }
.video-play-toggle[data-playing="1"]:hover,
.video-play-toggle[data-playing="1"]:focus-visible { opacity: 1; }

/* ── 35.3  Tap targets ──
   Measured before: the hamburger - the single most-tapped control on the
   whole site - was 42x32px. Everything below was under the 44px minimum. */
.nav-hamburger {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
.cookie-btn      { min-height: 44px; padding: .5rem 1.1rem; }
.footer-soc      { flex-shrink: 0; }

/* Checkbox / radio inputs measure 16-18px, but every one of them is wrapped
   in a <label> that is 48-179px tall and fully clickable, so the real tap
   target already passes. Measured on apply.php at 375px: 4 consent rows
   67-179px, 31 trade chips 48-93px, none under 44px. No rule needed - noted
   here so the next audit does not "fix" it again. */

/* ── 35.4  iOS zoom-on-focus ──
   Any font-size below 16px on a focusable field makes iOS Safari zoom the
   viewport, which shifts the whole layout mid-form. Measured before: 14px on
   apply.php and partners.php, 15.2px on coming-soon.php. */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  font-size: max(16px, 1rem);
}

/* ── 35.5  Minimum legible type ──
   Measured before: 10.4px ("WhatsApp Business Verified"), 10.88px (advice
   badges), 11.2px (pills, trust-strip label). Under ~12px these are a
   squint on a phone; the uppercase + letter-spacing makes it worse. */
@media (max-width: 600px) {
  /* Measured list, page by page, at 375x667. !important because several of
     these live in per-page inline <style> blocks that come after this sheet
     (coming-soon.php in particular) - an !important in a linked sheet still
     beats a non-important inline rule, whatever the source order. */
  .trust-strip-label,
  .trust-strip-logo--wa-verified span,   /* 10.4px, and it is on every page */
  .advice-badge,                         /* 10.88px */
  .pricing-pill,
  .nav-mobile-label,
  .platform-badge span,
  .section-label,                        /* 11.52px on radiant-competition */
  .form-hint-inline,                     /* 11.7-11.9px on request.php */
  .form-areas-province-label,
  .plan-radio-badge,
  .partner-verified-badge,               /* our-partners.php, 11.2px */
  .partner-cat-chip,
  .partner-benefit-pill,
  .pmod-section-label,
  .cs-badge,                             /* coming-soon.php, 10.4-11.5px */
  .cs-scroll-hint,
  .cs-stat-lbl,
  .cs-ph-name,
  .cs-bubble,
  .cs-privacy,
  .cs-fg label { font-size: .75rem !important; }
}

/* ── 35.6  Reduced motion / reduced data ──
   Sits inside the existing prefers-reduced-motion contract used elsewhere in
   this file. If someone has asked for less motion, a looping video is motion:
   it stays on its poster until they press play. */
@media (prefers-reduced-motion: reduce) {
  .video-play-toggle[data-playing="1"] { opacity: 1; }
}


/* ============================================================
   36. CARD GRID SPACING FIXES
   ============================================================ */

/* ── choice cards must fill their grid row ──
   The grid item is the <label> (.req-trade-card) and the visible box is the
   child (.req-trade-inner). The label stretches to the tallest card in its
   row, which is correct - but the inner box only had `min-height: 96px` and no
   height, so it shrank to its own content and left dead space underneath.

   Measured at 375px, EVERY row was ragged:

     row 1   Plumbers 94px   vs  Electricians    77px   (17px gap)
     row 2   Handymen 111px  vs  Roofers         94px   (17px gap)
     row 4   Builders 111px  vs  Tilers/Flooring 77px   (34px gap)

   One declaration fixes all of them. The urgency cards get it too: their
   labels happen to be one line each today, so they look fine, but the moment
   any of that copy wraps they would go ragged in exactly the same way. */
.req-trade-inner,
.req-urgency-inner { height: 100%; }

/* ── clearance for the floating buttons ──
   The WhatsApp float is 60x60 fixed at right:16 bottom:24, and back-to-top
   sits at bottom:14 - together they own the bottom ~84px of the right edge,
   above the page at z-index 900.

   The step nav button is full width, so at the natural end of the page its
   right-hand side sat underneath the float: tapping "Continue" near the right
   edge could open WhatsApp instead. Reserving the space lets the nav scroll
   clear of both. */
@media (max-width: 600px) {
  .request-section { padding-bottom: calc(84px + var(--sp-8)); }
  .job-shell       { padding-bottom: calc(84px + var(--sp-8)); }
}

/* ── floating buttons must not sit on form controls ──
   Both floats are position:fixed at z-index 900. On desktop that is harmless:
   measured at 1100px the request form column runs 183-903 while the floats sit
   at 993-1053 (WhatsApp, right) and 32-78 (back-to-top, left) - entirely in the
   margins, with zero overlap at any scroll position.

   At 375px there is no margin, so both floats land on top of full-width tap
   targets. Measured on step 1: the WhatsApp bubble covered the right-hand end
   of the "Blocked drain or toilet" radio row and back-to-top covered the left
   end of the row above it. Those labels select the radio when tapped, so the
   float wins the tap and opens WhatsApp instead of choosing the option - on a
   required step of the main conversion flow.

   So they are hidden on the four marketplace flow pages at phone widths only.
   WhatsApp is still reachable on those pages from the nav menu, the footer, and
   the emergency deflection on step 3. Delete this block to bring them back. */
@media (max-width: 600px) {
  body[data-page="request"] .whatsapp-float,
  body[data-page="request"] .back-to-top,
  body[data-page="track"] .whatsapp-float,
  body[data-page="track"] .back-to-top,
  body[data-page="quote"] .whatsapp-float,
  body[data-page="quote"] .back-to-top,
  body[data-page="contractor"] .whatsapp-float,
  body[data-page="contractor"] .back-to-top { display: none; }
}


/* ============================================================
   37. TRADE PLACEMENTS  (trade-placements.php)
   Built on the existing tokens only. Student side = gold, contractor
   side = navy. No .fade-up anywhere on this page: every block is real
   content, not decoration.
   ============================================================ */
body[data-page="trade-placements"] {
  --tp-gold-tint: #FFF8E6;
  --tp-navy-tint: #EAF0F9;
  --tp-line: rgba(15,37,87,.18);
}
.tp-lede { font-size: clamp(1.1rem, 1.6vw, 1.25rem); line-height: 1.6; }
.tp-btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.tp-btn-note { font-size: .9rem; line-height: 1.5; color: var(--c-muted); margin: var(--sp-3) 0 0; max-width: 46ch; }
.tp-hero .btn, .tp-aud .btn, .tp-colleges .btn, .tp-final .btn, .tp-sticky .btn { white-space: normal; text-align: center; }

.tp-photo { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--c-gray-200); box-shadow: var(--sh-lg); }
.tp-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── 1. hero ── */
.tp-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-dark) 100%);
  padding: calc(var(--nav-h) + var(--sp-12)) 0 calc(var(--sp-20) + 26px);
  color: rgba(255,255,255,.82);
}
.tp-hero-grid { display: grid; grid-template-columns: 11fr 9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.tp-hero h1 { color: var(--c-white); margin: 0 0 var(--sp-5); }
.tp-hero p { color: rgba(255,255,255,.82); }
.tp-hero .tp-lede { color: var(--c-white); }
.tp-hero .tp-btn-note { color: rgba(255,255,255,.65); }
.tp-hero-photo img { aspect-ratio: 4 / 5; }
/* tape-measure strip: the one signature detail */
.tp-tape { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: var(--c-gold); }
.tp-tape::before {
  content: ""; position: absolute; inset: 0; opacity: .85;
  background:
    repeating-linear-gradient(90deg, var(--c-dark) 0 2px, transparent 2px 60px) left bottom / 100% 18px no-repeat,
    repeating-linear-gradient(90deg, var(--c-dark) 0 1px, transparent 1px 12px) left bottom / 100% 9px no-repeat;
}

/* ── 2. what this means ── */
.tp-means-intro { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(1.5rem, 5vw, 4.5rem); align-items: start; }
.tp-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; list-style: none; }
.tp-points li { border-top: 3px solid var(--c-navy); padding-top: var(--sp-5); }
.tp-points i { display: block; font-size: 1.8rem; color: var(--c-gold-dark); margin-bottom: var(--sp-3); }
.tp-points h3 { margin-bottom: var(--sp-2); }
.tp-points p { margin: 0; color: var(--c-muted); }

/* ── 3 + 4. audience sections ── */
.tp-aud { scroll-margin-top: calc(var(--nav-h) + 1rem); }
.tp-aud--students    { background: var(--tp-gold-tint); }
.tp-aud--contractors { background: var(--tp-navy-tint); }
.tp-aud-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.tp-aud-grid .tp-photo { position: sticky; top: calc(var(--nav-h) + var(--sp-6)); }
.tp-aud-grid .tp-photo img { aspect-ratio: 1 / 1; }
.tp-photo--kit { background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-dark) 100%); padding: var(--sp-8); }
.tp-photo--kit img { object-fit: contain; }
.tp-tag { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .04em; padding: .4rem .8rem; border-radius: var(--r-sm); margin-bottom: var(--sp-4); }
.tp-aud--students .tp-tag    { background: var(--c-gold); color: var(--c-dark); }
.tp-aud--contractors .tp-tag { background: var(--c-navy); color: var(--c-white); }
.tp-aud h2 { margin-bottom: var(--sp-5); }
.tp-prose { max-width: 62ch; }
.tp-prose p:last-child { margin-bottom: 0; }
.tp-sec { margin: var(--sp-12) 0 var(--sp-5); }

.tp-steps { list-style: none; margin: 0; padding: 0; counter-reset: tps; }
.tp-steps li { counter-increment: tps; position: relative; padding: 0 0 var(--sp-7, 1.75rem) 3.4rem; }
.tp-steps li::before {
  content: counter(tps); position: absolute; left: 0; top: -.1rem;
  width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--ff-heading); font-weight: 800; font-size: 1rem; line-height: 1;
}
.tp-steps li::after { content: ""; position: absolute; left: 1.15rem; top: 2.5rem; bottom: .35rem; width: 2px; background: var(--tp-line); }
.tp-steps li:last-child { padding-bottom: 0; }
.tp-steps li:last-child::after { display: none; }
.tp-aud--students .tp-steps li::before    { background: var(--c-gold); color: var(--c-dark); }
.tp-aud--contractors .tp-steps li::before { background: var(--c-navy); color: var(--c-white); }
.tp-steps h4 { font-size: 1.05rem; margin: 0 0 var(--sp-1); }
.tp-steps p { margin: 0 0 .7em; color: var(--c-text); }
.tp-steps p:last-child { margin-bottom: 0; }

.tp-not-box { background: var(--c-white); border-left: 5px solid var(--c-navy); border-radius: 0 var(--r-md) var(--r-md) 0; padding: var(--sp-6) var(--sp-7, 1.75rem); margin-top: var(--sp-10); box-shadow: var(--sh-sm); }
.tp-aud--students .tp-not-box { border-left-color: var(--c-gold); }
.tp-not-box h3 { margin-bottom: var(--sp-3); }
.tp-not-box p:last-child { margin-bottom: 0; }
.tp-cta-block { margin-top: var(--sp-8); }

/* ── 5. why SA ── */
.tp-why h2 { color: var(--c-white); margin-bottom: var(--sp-5); }
.tp-why p { color: rgba(255,255,255,.8); }
.tp-why strong { color: var(--c-white); }
.tp-why-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.tp-stats { display: grid; gap: var(--sp-5); }
.tp-stat { border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-md); padding: var(--sp-6) var(--sp-7, 1.75rem); background: rgba(255,255,255,.04); }
.tp-stat p { margin: 0; font-size: .95rem; line-height: 1.5; }
.tp-stat .tp-stat-num { font-family: var(--ff-heading); font-weight: 800; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; letter-spacing: -.02em; color: var(--c-gold); margin-bottom: var(--sp-3); }
.tp-stat-src { display: block; margin-top: var(--sp-2); font-size: .85rem; color: rgba(255,255,255,.6); }
.tp-source-note { font-size: .82rem !important; color: rgba(255,255,255,.55) !important; margin: 0; }

/* ── 6. colleges (deliberately smaller) ── */
.tp-colleges { padding: var(--sp-16) 0; scroll-margin-top: calc(var(--nav-h) + 1rem); }
.tp-colleges-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(1.5rem, 5vw, 4.5rem); align-items: start; }
.tp-colleges h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.tp-colleges .btn { margin-top: var(--sp-3); }

/* ── 7. FAQ (reuses the sitewide accordion) ── */
.tp-faq-list { max-width: 820px; margin: 0 auto; }
.tp-faq .accordion-header { font-size: 1.02rem; }
.tp-faq .accordion-body p { font-size: .95rem; }

/* ── 8. final CTA ── */
.tp-final { scroll-margin-top: calc(var(--nav-h) + 1rem); }
.tp-final h2 { margin-bottom: var(--sp-8); }
.tp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2rem); }
.tp-card { background: var(--c-white); border-radius: var(--r-lg); padding: clamp(1.5rem, 4vw, 2.5rem); display: flex; flex-direction: column; border-top: 8px solid; box-shadow: var(--sh-md); }
.tp-card--student    { border-color: var(--c-gold); }
.tp-card--contractor { border-color: var(--c-navy); }
.tp-card h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: var(--sp-3); }
.tp-card p { color: var(--c-muted); flex: 1; }
.tp-card .btn { align-self: flex-start; margin-top: var(--sp-3); }
.tp-tertiary { margin: var(--sp-8) 0 0; }
.tp-tertiary a { font-weight: 700; color: var(--c-navy); text-decoration: underline; text-underline-offset: 3px; }

/* ── mobile sticky CTA (shown by main.js) ── */
.tp-sticky { display: none; }

/* ── responsive ── */
@media (max-width: 960px) {
  .tp-aud-grid, .tp-why-grid { grid-template-columns: 1fr; }
  .tp-aud-grid .tp-photo { position: static; order: -1; }
  .tp-aud-grid .tp-photo img { aspect-ratio: 3 / 2; }
  .tp-photo--kit img { aspect-ratio: 16 / 9; }
  .tp-cta-block .btn { width: 100%; }
}
@media (max-width: 860px) {
  .tp-hero { padding-bottom: calc(var(--sp-16) + 26px); }
  .tp-hero-grid, .tp-means-intro, .tp-colleges-grid { grid-template-columns: 1fr; }
  .tp-hero-photo img { aspect-ratio: 4 / 3; }
  .tp-points { grid-template-columns: 1fr; }
  .tp-btn-row .btn, .tp-colleges .btn { width: 100%; }

  /* The sticky bar owns the bottom edge on this page, so the two floating
     buttons step aside (same precedent as the marketplace flow pages). */
  .tp-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.97); border-top: 1px solid var(--c-gray-200);
    box-shadow: 0 -4px 14px rgba(0,0,0,.08);
    transform: translateY(110%); transition: transform .25s;
  }
  .tp-sticky.show { transform: none; }
  .tp-sticky .btn { min-height: 48px; padding: .6rem .5rem; font-size: .95rem; }
  body[data-page="trade-placements"] .whatsapp-float,
  body[data-page="trade-placements"] .back-to-top { display: none; }
  body[data-page="trade-placements"] .footer { padding-bottom: 88px; }
}
@media (max-width: 760px) {
  .tp-cards { grid-template-columns: 1fr; }
  .tp-card .btn { align-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .tp-sticky { transition: none; }
}