/* ============================================================
   SPEEDY TAX & FINANCIAL SERVICES — MAIN STYLESHEET
   
   TABLE OF CONTENTS:
   1.  Variables & Reset
   2.  Base Typography
   3.  Announce Bar
   4.  Navigation
   5.  Buttons (shared)
   6.  Section Layout (shared)
   7.  Homepage Hero
   8.  Trust Bar
   9.  Service Cards (homepage)
   10. Why Us Section
   11. Process Steps
   12. Portal CTA
   13. Testimonials
   14. Home Office Cards
   15. Signup CTA Banner
   16. Footer
   17. Page Hero (inner pages shared style)
   18. Forms (shared)
   19. About Page
   20. Services Page
   21. Offices Page
   22. Contact Page
   23. Careers Page
   24. Animations
   ============================================================ */


/* ============================================================
   1. VARIABLES & RESET
   ============================================================ */

:root {
  /* Brand Colors */
  --navy:       #012367;
  --navy-dark:  #001544;
  --navy-mid:   #0a3080;
  --green:      #0daa6f;
  --green-dark: #0a8a59;
  --green-light:#e6f9f3;
  --gold:       #c9a84c;

  /* Neutral Colors */
  --cream:      #fafaf7;
  --warm-white: #f5f4ef;
  --text:       #1a1f35;
  --muted:      #64748b;
  --border:     #e2e8f0;

  /* Status Colors */
  --success-bg:     #e6f9f3;
  --success-border: #0daa6f;
  --error-bg:       #fef2f2;
  --error-border:   #fca5a5;
  --error-text:     #991b1b;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body {
  font-family: 'Outfit', sans-serif;
  color: var(--text);
  background: #fff;
  overflow-x: hidden;
}


/* ============================================================
   2. BASE TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4 {
  font-family: 'Playfair Display', serif;
}

em {
  font-style: italic;
  color: var(--green);
}


/* ============================================================
   3. ANNOUNCE BAR
   Top banner shown when feature_accepting_clients = true
   ============================================================ */

.announce-bar {
  background: var(--green);
  color: #fff;
  text-align: center;
  padding: 8px 5%;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;   /* sits above nav */
}
.announce-bar a {
  color: #fff;
  text-decoration: underline;
}


/* ============================================================
   4. NAVIGATION
   ============================================================ */

nav {
  position: fixed;
  top: 36px;   /* sits below the announce bar */
  left: 0; right: 0;
  z-index: 100;
  background: rgba(1, 35, 103, 0.97);
  backdrop-filter: blur(12px);
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 150px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Logo image */
.nav-logo { display: flex; align-items: center; line-height: 0; }
.nav-logo a { display: inline-flex; align-items: center; text-decoration: none; }
.nav-logo img {
  height: 150px;
  width: auto;
  mix-blend-mode: lighten;
  filter: brightness(1.1);
}

/* Nav links */
/* Nav links */
.nav-links { display: flex; gap: 36px; align-items: center; }
.nav-links a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: color .2s;
}
.nav-links a:hover { color: #fff; }
.nav-links a.nav-active {
  color: #fff;
  border-bottom: 2px solid var(--green);
  padding-bottom: 2px;
}

/* Portal CTA button in nav */
.nav-cta {
  background: var(--green) !important;
  color: #fff !important;
  padding: 10px 22px;
  border-radius: 6px;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: background .2s !important;
}
.nav-cta:hover { background: var(--green-dark) !important; }


/* ============================================================
   5. BUTTONS (shared across pages)
   ============================================================ */

/* Primary green button */
.btn-primary {
  background: var(--green);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  transition: all .25s;
}
.btn-primary:hover { background: var(--green-dark); transform: translateY(-2px); }

/* Secondary ghost button (dark background) */
.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 14px 32px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  transition: all .25s;
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.14); }

/* Hero-size variants */
.btn-hero-primary {
  background: var(--green);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 16px 34px;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.2px;
  transition: all .25s;
}
.btn-hero-primary:hover {
  background: var(--green-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(13, 170, 111, 0.35);
}

.btn-hero-secondary {
  background: transparent;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 500;
  padding: 16px 34px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .25s;
}
.btn-hero-secondary:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.07);
}

/* CTA section buttons */
.btn-cta-primary {
  background: var(--green);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 16px 36px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  transition: all .25s;
}
.btn-cta-primary:hover { background: var(--green-dark); transform: translateY(-2px); }

.btn-cta-secondary {
  background: transparent;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 500;
  padding: 16px 36px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: inline-block;
  transition: all .25s;
}
.btn-cta-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
}


/* ============================================================
   6. SECTION LAYOUT (shared)
   ============================================================ */

.section         { padding: 100px 5%; }
.section-alt     { background: var(--cream); }
.section-inner   { max-width: 1200px; margin: 0 auto; }

/* Eyebrow label above headings */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 16px;
}
.section-eyebrow::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--green);
}
.section-eyebrow--light { color: rgba(13, 170, 111, 0.9); }
.section-eyebrow--light::before { background: rgba(13, 170, 111, 0.9); }

/* Section heading */
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(32px, 3.5vw, 52px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--navy-dark);
  margin-bottom: 20px;
}
.section-title em    { font-style: italic; color: var(--green); }
.section-title--light { color: #fff; }

/* Section sub-text */
.section-sub {
  font-size: 17px;
  line-height: 1.75;
  color: var(--muted);
  max-width: 560px;
  font-weight: 300;
}
.section-sub--light { color: rgba(255, 255, 255, 0.55); }


/* ============================================================
   7. HOMEPAGE HERO
   ============================================================ */

.hero {
  min-height: 100vh;
  background: var(--navy-dark);
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 200px 5% 80px;  /* 36px bar + 150px nav + 14px buffer */
}

/* Layered gradient + grid background */
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 40%, rgba(13,170,111,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 10% 80%, rgba(10,48,128,0.6) 0%, transparent 50%),
    linear-gradient(135deg, #001544 0%, #012367 50%, #0a3080 100%);
}
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.hero-bg::after {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  border: 1px solid rgba(13, 170, 111, 0.15);
  top: -100px; right: -100px;
  box-shadow:
    0 0 0 80px rgba(13,170,111,0.04),
    0 0 0 160px rgba(13,170,111,0.025);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
  animation: fadeUp .8s ease both;
}

/* "Trusted Since 2010" pill */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(13, 170, 111, 0.15);
  border: 1px solid rgba(13, 170, 111, 0.3);
  color: var(--green);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 40px;
  margin-bottom: 28px;
}
.hero-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
}

.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(42px, 5.5vw, 72px);
  line-height: 1.1;
  color: #fff;
  margin-bottom: 24px;
  font-weight: 700;
}
.hero h1 em { font-style: italic; color: var(--green); }

.hero-sub {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 40px;
  max-width: 520px;
  font-weight: 300;
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 60px; }

/* Stats row at bottom of hero */
.hero-stats {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.hero-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.hero-stat-num span { color: var(--green); }
.hero-stat-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
  font-weight: 400;
}

/* Floating service card (right side of hero) */
.hero-card-wrap {
  position: absolute;
  right: 8%; top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  animation: fadeRight .9s .3s ease both;
}
.hero-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 28px;
  width: 320px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}
.hero-card-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
}
.service-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  margin-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: all .2s;
  cursor: pointer;
}
.service-pill:hover {
  background: rgba(13, 170, 111, 0.1);
  border-color: rgba(13, 170, 111, 0.25);
}
.service-pill-icon  { font-size: 20px; }
.service-pill-text  { font-size: 14px; color: rgba(255,255,255,0.85); font-weight: 500; }
.service-pill-arrow { margin-left: auto; color: rgba(255,255,255,0.3); font-size: 16px; }

.hero-card-cta {
  margin-top: 16px;
  background: var(--green);
  color: #fff;
  border: none;
  width: 100%;
  padding: 13px;
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
.hero-card-cta:hover { background: var(--green-dark); }


/* ============================================================
   8. TRUST BAR
   ============================================================ */

.trust-bar {
  background: var(--warm-white);
  padding: 20px 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
}
.trust-item span { font-size: 20px; }


/* ============================================================
   9. SERVICE CARDS (homepage overview grid)
   ============================================================ */

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 60px;
}

.service-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  transition: all .3s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--navy), var(--green));
  opacity: 0;
  transition: opacity .3s;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(1,35,103,0.12);
  border-color: transparent;
}
.service-card:hover::before { opacity: 1; }

.service-icon {
  width: 54px; height: 54px;
  border-radius: 14px;
  background: var(--green-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 20px;
  transition: background .3s;
}
.service-card:hover .service-icon { background: var(--navy); }

.service-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--navy-dark);
  margin-bottom: 10px;
}
.service-card p { font-size: 14px; line-height: 1.7; color: var(--muted); }

.service-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
  transition: gap .2s;
}
.service-card:hover .service-card-link { gap: 10px; }


/* ============================================================
   10. WHY US SECTION
   ============================================================ */

.why-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-top: 20px;
}

/* Left: visual card */
.why-visual { position: relative; }

.why-main-card {
  background: var(--navy);
  border-radius: 20px;
  padding: 40px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.why-main-card::after {
  content: '';
  position: absolute;
  bottom: -40px; right: -40px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: rgba(13, 170, 111, 0.15);
}
.why-main-card-title {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
}
.why-main-card-sub { font-size: 14px; color: rgba(255,255,255,0.6); margin-bottom: 28px; }

.why-stat-row { display: flex; gap: 24px; flex-wrap: wrap; }
.why-stat-n {
  font-family: 'Playfair Display', serif;
  font-size: 40px;
  font-weight: 700;
  color: var(--green);
  line-height: 1;
}
.why-stat-l { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 4px; }

.why-floating-badge {
  position: absolute;
  bottom: -20px; right: 30px;
  background: #fff;
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 10px 40px rgba(1,35,103,0.15);
  display: flex;
  align-items: center;
  gap: 12px;
}
.why-badge-icon { font-size: 28px; }
.why-badge-text { font-size: 13px; font-weight: 700; color: var(--navy); }
.why-badge-sub  { font-size: 11px; color: var(--muted); }

/* Right: feature list */
.why-features { margin-top: 50px; }
.why-features-intro { margin-bottom: 32px; }

.why-feature {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 28px;
}
.why-feature-dot {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--green-light);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-top: 2px;
}
.why-feature h4 { font-size: 16px; font-weight: 700; color: var(--navy-dark); margin-bottom: 4px; }
.why-feature p  { font-size: 14px; color: var(--muted); line-height: 1.65; }


/* ============================================================
   11. PROCESS STEPS
   ============================================================ */

.process-section {
  background: var(--navy-dark);
  padding: 100px 5%;
  position: relative;
  overflow: hidden;
}
.process-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 60px;
  position: relative;
}
/* Connecting line between steps */
.process-steps::before {
  content: '';
  position: absolute;
  top: 28px; left: 14%; right: 14%;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(13,170,111,0.3),
    rgba(13,170,111,0.6),
    rgba(13,170,111,0.3));
}

.process-step { text-align: center; padding: 0 24px; position: relative; z-index: 2; }

.step-num {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  border: 3px solid rgba(255,255,255,0.1);
  position: relative;
  z-index: 2;
}
.process-step h4 {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  color: #fff;
  margin-bottom: 10px;
  font-weight: 600;
}
.process-step p { font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.65; }


/* ============================================================
   12. PORTAL CTA
   ============================================================ */

.portal-cta-section {
  background: linear-gradient(135deg, var(--green-light) 0%, #f0fdf9 100%);
  padding: 80px 5%;
  border-top: 1px solid rgba(13,170,111,0.15);
  border-bottom: 1px solid rgba(13,170,111,0.15);
}
.portal-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.portal-cta-left h2 {
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  font-weight: 700;
  color: var(--navy-dark);
  margin-bottom: 12px;
}
.portal-cta-left p { font-size: 16px; color: var(--muted); max-width: 500px; line-height: 1.7; }

.portal-cta-cards { display: flex; gap: 16px; flex-shrink: 0; }
.portal-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 28px;
  text-align: center;
  min-width: 160px;
  box-shadow: 0 4px 20px rgba(1,35,103,0.07);
  cursor: pointer;
  transition: all .25s;
  text-decoration: none;
  display: block;
}
.portal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(1,35,103,0.15);
  border-color: var(--navy);
}
.portal-card--highlight { border-color: var(--navy); }
.pc-icon  { font-size: 32px; margin-bottom: 10px; }
.pc-label { font-size: 14px; font-weight: 700; color: var(--navy); }
.pc-sub   { font-size: 12px; color: var(--muted); margin-top: 4px; }


/* ============================================================
   13. TESTIMONIALS
   ============================================================ */

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 60px;
}
.testimonial-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 28px;
  position: relative;
}
.testimonial-card::before {
  content: '"';
  font-family: 'Playfair Display', serif;
  font-size: 80px;
  color: var(--green-light);
  position: absolute;
  top: 10px; right: 20px;
  line-height: 1;
  font-weight: 700;
}
.stars { color: #f59e0b; font-size: 14px; margin-bottom: 14px; }
.testimonial-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 20px;
  font-style: italic;
}
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.author-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
.author-name   { font-size: 14px; font-weight: 700; color: var(--navy); }
.author-detail { font-size: 12px; color: var(--muted); }


/* ============================================================
   14. HOME OFFICE CARDS (mini cards on homepage)
   ============================================================ */

.home-offices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 60px;
}
.home-office-card {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  transition: all .3s;
}
.home-office-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(1,35,103,0.12);
}
.home-office-top {
  background: var(--navy);
  padding: 32px 28px 24px;
  position: relative;
  overflow: hidden;
}
.home-office-top::after {
  content: '';
  position: absolute;
  bottom: -30px; right: -30px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(13,170,111,0.2);
}
.home-office-name {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.home-office-badge {
  display: inline-block;
  background: rgba(13,170,111,0.2);
  border: 1px solid rgba(13,170,111,0.3);
  color: var(--green);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}
.home-office-body { background: #fff; padding: 24px 28px; }
.home-office-detail {
  display: flex;
  gap: 10px;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 10px;
}
.home-office-detail:last-child { margin-bottom: 0; }
.home-office-detail span { font-size: 16px; }


/* ============================================================
   15. SIGNUP CTA BANNER
   Dark full-width CTA at the bottom of pages
   ============================================================ */

.signup-cta {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-mid) 100%);
  padding: 100px 5%;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.signup-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(13,170,111,0.1) 0%, transparent 60%);
}
.signup-cta h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
  position: relative;
}
.signup-cta h2 em { font-style: italic; color: var(--green); }
.signup-cta p {
  font-size: 18px;
  color: rgba(255,255,255,0.6);
  max-width: 500px;
  margin: 0 auto 40px;
  line-height: 1.7;
  position: relative;
}
.signup-cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}


/* ============================================================
   16. FOOTER
   ============================================================ */

footer {
  background: var(--navy-dark);
  padding: 60px 5% 28px;
  color: rgba(255,255,255,0.6);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer-logo-wrap { margin-bottom: 14px; }
.footer-logo img {
  height: 60px;
  width: auto;
  mix-blend-mode: lighten;
  filter: brightness(1.05);
}
.footer-desc { font-size: 14px; line-height: 1.7; max-width: 280px; }

/* Social icon row */
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.social-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  transition: all .2s;
}
.social-btn:hover {
  background: rgba(13,170,111,0.2);
  border-color: rgba(13,170,111,0.4);
  color: var(--green);
}

.footer-col h4 {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}
.footer-col a {
  display: block;
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  margin-bottom: 10px;
  transition: color .2s;
}
.footer-col a:hover { color: var(--green); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom-links { display: flex; gap: 24px; }
.footer-bottom-links a {
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  transition: color .2s;
}
.footer-bottom-links a:hover { color: #fff; }


/* ============================================================
   17. PAGE HERO (shared by About, Services, Contact, Careers,
       Offices — all inner pages use this base style)
   ============================================================ */

.page-hero {
  background: linear-gradient(135deg, #001544 0%, #012367 60%, #0a3080 100%);
  padding: 220px 5% 80px;  /* 36px bar + 150px nav + 34px buffer */
  position: relative;
  overflow: hidden;
}

/* Decorative glow */
.page-hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 70% at 80% 40%, rgba(13,170,111,0.1) 0%, transparent 60%);
  pointer-events: none;
}

/* Grid overlay — applied to ALL page heroes via ::before pseudo-element */
.page-hero::before,
.about-hero::before,
.services-hero::before,
.offices-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

/* .page-hero-grid div is no longer needed but kept for backwards compatibility */
.page-hero-grid { display: none; }

.page-hero-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
}

.page-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 5vw, 60px);
  color: #fff;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 18px;
}
.page-hero h1 em { font-style: italic; color: var(--green); }

.page-hero p {
  font-size: 17px;
  color: rgba(255,255,255,0.6);
  max-width: 500px;
  line-height: 1.75;
  font-weight: 300;
}

.page-hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 36px;
  flex-wrap: wrap;
}

/* Hero stats row (used on careers) */
.page-hero-stats {
  display: flex;
  gap: 32px;
  margin-top: 48px;
  flex-wrap: wrap;
}
.page-hero-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.page-hero-stat-num--green { color: var(--green); }
.page-hero-stat-label {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  margin-top: 4px;
}


/* ============================================================
   18. FORMS (shared between contact and careers)
   ============================================================ */

/* Wrapper card */
.form-card {
  background: #fff;
  border-radius: 20px;
  border: 1px solid var(--border);
  padding: 40px;
  box-shadow: 0 4px 30px rgba(1,35,103,0.06);
}
.form-card-title {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--navy-dark);
  margin-bottom: 6px;
}
.form-card-sub { color: var(--muted); font-size: 14px; margin-bottom: 28px; }

/* Success message */
.form-success-msg {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
}
.form-success-msg .success-icon  { font-size: 40px; margin-bottom: 10px; }
.form-success-msg .success-title { font-size: 18px; font-weight: 700; color: var(--navy-dark); margin-bottom: 8px; }
.form-success-msg .success-note  { font-size: 14px; color: var(--muted); }

/* Error banner */
.form-error-msg {
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 18px;
  font-size: 14px;
  color: var(--error-text);
}

/* Form layout */
.form-body { display: flex; flex-direction: column; gap: 14px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-group { display: flex; flex-direction: column; }

.form-label {
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 6px;
}

/* Shared input/select/textarea styles */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  color: var(--text);
  background: #fff;
  transition: border-color .2s;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--navy);
}
.form-textarea { min-height: 130px; resize: vertical; }

/* Submit button */
.form-submit {
  padding: 14px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
  width: 100%;
}
.form-submit:hover { background: var(--navy-mid); }

/* Privacy note under submit */
.form-note {
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
  line-height: 1.6;
}


/* ============================================================
   19. ABOUT PAGE
   ============================================================ */

/* Hero */
.about-hero {
  background: var(--navy-dark);
  padding: 140px 5% 80px;
  position: relative;
  overflow: hidden;
}
.about-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 80% 50%, rgba(13,170,111,0.1) 0%, transparent 60%);
}
.about-hero .section-eyebrow { position: relative; }
.about-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(38px, 5vw, 64px);
  color: #fff;
  font-weight: 700;
  max-width: 600px;
  position: relative;
}
.about-hero h1 em { font-style: italic; color: var(--green); }
.about-hero p {
  font-size: 18px;
  color: rgba(255,255,255,0.6);
  max-width: 520px;
  margin-top: 20px;
  line-height: 1.7;
  position: relative;
}

/* Mission values grid */
.about-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.value-card {
  text-align: center;
  padding: 32px 24px;
  background: var(--cream);
  border-radius: 16px;
  border: 1px solid var(--border);
}
.value-card-icon  { font-size: 40px; margin-bottom: 12px; }
.value-card-title {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.value-card-desc  { font-size: 14px; color: var(--muted); line-height: 1.65; }

/* Team grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 60px;
}
.team-card {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
  transition: all .3s;
}
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(1,35,103,0.1);
}
.team-card-top {
  height: auto;
  background: linear-gradient(135deg, var(--navy), var(--navy-mid));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  overflow: hidden;
  position: relative;
}
/* When a real photo is used instead of an emoji */
.team-card-top img {
  width: 100%;
  height: auto;        /* maintains original aspect ratio — no cropping */
  object-fit: unset;   /* no cropping at all */
  display: block;
}
.team-card-body  { padding: 20px; }
.team-name  { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 700; color: var(--navy); }
.team-role  { font-size: 13px; color: var(--green); font-weight: 600; margin-top: 2px; }
.team-bio   { font-size: 13px; color: var(--muted); margin-top: 10px; line-height: 1.6; }


/* ============================================================
   20. SERVICES PAGE
   ============================================================ */

.services-hero {
  background: linear-gradient(135deg, #001544, #012367);
  padding: 140px 5% 80px;
}
.services-hero .section-eyebrow { margin-bottom: 16px; }
.services-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(38px, 5vw, 64px);
  color: #fff;
  font-weight: 700;
}
.services-hero h1 em { font-style: italic; color: var(--green); }
.services-hero-sub {
  font-size: 18px;
  color: rgba(255,255,255,0.6);
  max-width: 480px;
  margin-top: 16px;
  line-height: 1.7;
}

/* Full-page service cards (2-column grid) */
.services-full-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 60px;
}
.service-full-card {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
}
.sfc-top {
  padding: 28px 28px 0;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.sfc-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.sfc-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.sfc-desc { font-size: 14px; color: var(--muted); line-height: 1.65; }
.sfc-features { padding: 20px 28px 28px; }
.sfc-feature {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
  padding: 6px 0;
}
.sfc-disclaimer {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: #fffbeb;
  border-left: 4px solid #f59e0b;
  border-radius: 0 8px 8px 0;
  font-size: 0.85rem;
  color: #92400e;
  line-height: 1.6;
} content: '✓'; color: var(--green); font-weight: 700; font-size: 14px; flex-shrink: 0; }


/* ============================================================
   21. OFFICES PAGE
   ============================================================ */

/* Cards section */
.offices-section {
  padding: 80px 5%;
}
.offices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Individual office card */
.office-card {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 30px rgba(1,35,103,0.08);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.office-card-header {
  padding: 30px;
  /* background color is set inline from $office['color'] in config */
}
.office-card-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 6px;
}
.office-card-name {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.office-card-address { font-size: 14px; color: rgba(255,255,255,0.7); }

.office-card-body {
  padding: 28px;
  background: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.office-info-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 10px;
}
.office-phone { font-size: 15px; margin-bottom: 6px; }
.office-phone a { color: var(--navy); text-decoration: none; font-weight: 600; }
.office-email a { font-size: 14px; color: var(--green); text-decoration: none; }
.office-hours  { font-size: 14px; color: #475569; line-height: 1.8; }

/* Map embed */
.office-map { border-radius: 10px; overflow: hidden; height: 180px; }
.office-map iframe { width: 100%; height: 180px; border: 0; }

/* Card buttons */
.office-actions { display: flex; gap: 10px; margin-top: auto; }
.offices-remote-cta-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.offices-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 1.75rem;
  background: var(--green);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.offices-cta-primary:hover {
  background: #0b9660;
  transform: translateY(-2px);
}

.offices-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 1.75rem;
  background: transparent;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid rgba(255,255,255,0.6);
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.offices-cta-secondary:hover {
  background: rgba(255,255,255,0.1);
  border-color: #fff;
  transform: translateY(-2px);
}
  flex: 1; text-align: center; padding: 11px;
  background: var(--navy); color: #fff;
  border-radius: 8px; text-decoration: none;
  font-size: 13px; font-weight: 600;
}
.office-btn-contact {
  flex: 1; text-align: center; padding: 11px;
  background: #f1f5f9; color: var(--navy);
  border-radius: 8px; text-decoration: none;
  font-size: 13px; font-weight: 600;
  border: 1px solid var(--border);
}
.office-btn-call:hover    { background: var(--navy-mid); }
.office-btn-contact:hover { background: var(--border); }

/* "Not near an office?" CTA at page bottom */
.offices-remote-cta { background: linear-gradient(135deg, #001544, #0a3080); padding: 80px 5%; text-align: center; }
.offices-remote-cta h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
}
.offices-remote-cta p {
  font-size: 16px;
  color: rgba(255,255,255,0.6);
  max-width: 440px;
  margin: 0 auto 32px;
  line-height: 1.75;
}
.offices-remote-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }


/* ============================================================
   22. CONTACT PAGE
   ============================================================ */

/* Two-column layout: offices left, form right */
.contact-layout {
  padding: 80px 5%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: start;
}

/* Left column: office list */
.contact-col-title {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--navy-dark);
  margin-bottom: 6px;
}
.contact-col-sub { color: var(--muted); font-size: 15px; margin-bottom: 32px; }

.contact-office-list { display: flex; flex-direction: column; gap: 18px; }

/* Office mini-card */
.contact-office-item {
  border-radius: 14px;
  border: 1px solid var(--border);
  overflow: hidden;
}
.contact-office-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* background set inline from $office['color'] in config */
}
.contact-office-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 4px;
}
.contact-office-name {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}
.contact-office-call-btn {
  background: rgba(255,255,255,0.12);
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.contact-office-call-btn:hover { background: rgba(255,255,255,0.2); }
.contact-office-body {
  padding: 16px 20px;
  background: #fff;
  font-size: 14px;
  color: #475569;
  line-height: 1.8;
}
.contact-office-body a { color: var(--green); text-decoration: none; }
.contact-office-body a:hover { text-decoration: underline; }
.contact-office-hours { margin-top: 8px; font-size: 13px; color: var(--muted); }

/* Quick links box */
.contact-quick-links {
  margin-top: 32px;
  background: #f8fafc;
  border-radius: 14px;
  padding: 22px;
  border: 1px solid var(--border);
}
.contact-quick-links-title { font-weight: 700; color: var(--navy-dark); margin-bottom: 12px; font-size: 15px; }
.contact-quick-links-list  { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.contact-quick-links-list a { text-decoration: none; }
.contact-quick-links-list a.link-navy  { color: var(--navy); font-weight: 600; }
.contact-quick-links-list a.link-green { color: var(--green); font-weight: 600; }
.contact-quick-links-list a:hover { text-decoration: underline; }


/* ============================================================
   23. CAREERS PAGE
   ============================================================ */

/* 1099 banner */
.careers-1099-banner {
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
  border-radius: 16px;
  padding: 28px 36px;
  margin-bottom: 48px;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.careers-1099-icon { font-size: 36px; }
.careers-1099-text { flex: 1; min-width: 240px; }
.careers-1099-text h3 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.careers-1099-text p {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  line-height: 1.65;
}
.careers-1099-text strong { color: var(--green); }
.careers-1099-badges { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.careers-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 10px 16px;
}
.careers-badge--green {
  background: rgba(13,170,111,0.15);
  border: 1px solid rgba(13,170,111,0.25);
}
.careers-badge-icon { font-size: 18px; }
.careers-badge-title { font-size: 13px; font-weight: 700; color: #fff; }
.careers-badge--green .careers-badge-title { color: var(--green); }
.careers-badge-sub   { font-size: 11px; color: rgba(255,255,255,0.45); }

/* Plans intro heading block */
.careers-plans-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 60px;
}
.careers-plans-intro .section-title { font-size: clamp(28px, 3.5vw, 44px); margin-bottom: 14px; }
.careers-plans-intro p { font-size: 16px; color: var(--muted); line-height: 1.75; }

/* Plan cards grid */
.careers-plans-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

/* Individual plan card */
.plan-card {
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .3s, box-shadow .3s;
}
.plan-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(1,35,103,0.15);
}
.plan-card--featured { border: 2px solid var(--navy); }

/* "Most Popular" label at top of featured card */
.plan-featured-label {
  background: var(--navy);
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  padding: 6px;
}

/* Card header (colored) */
.plan-header {
  padding: 28px 22px 22px;
  /* background color set inline from config */
}
.plan-header--featured { padding-top: 22px; }
.plan-icon       { font-size: 30px; margin-bottom: 10px; }
.plan-tier-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 4px;
}
.plan-tier-label--light { color: rgba(255,255,255,0.5); }
.plan-title {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--navy-dark);
  line-height: 1.2;
}
.plan-title--light { color: #fff; }
.plan-commission {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--green);
  margin-top: 12px;
}
.plan-commission--dark { color: var(--navy-dark); }
.plan-commission-label { font-size: 12px; color: #64748b; margin-left: 4px; }
.plan-commission-label--light { color: rgba(255,255,255,0.55); }
.plan-comm-note { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.plan-comm-note--light { color: rgba(255,255,255,0.4); }

/* Card body */
.plan-body {
  padding: 20px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.plan-includes-title { font-weight: 700; color: var(--navy-dark); margin-bottom: 10px; font-size: 13px; }

.plan-include-item,
.plan-exclude-item {
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.6;
}
.plan-include-item { color: var(--text); }
.plan-exclude-item { color: #94a3b8; }

.plan-check { font-weight: 700; margin-right: 6px; }
.plan-check--green  { color: var(--green); }
.plan-check--gold   { color: var(--gold); }
.plan-check--off    { color: #cbd5e1; }

.plan-best-for {
  background: #f8fafc;
  border: 1px solid #e8edf5;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 8px;
}
.plan-apply-btn {
  margin-top: 14px;
  width: 100%;
  padding: 12px;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s;
  /* background color set inline from config */
}
.plan-apply-btn:hover { opacity: 0.88; }

/* "Every position includes" perks grid */
.careers-perks {
  margin-top: 60px;
  background: var(--cream);
  border-radius: 20px;
  border: 1px solid var(--border);
  padding: 40px;
}
.careers-perks-title {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--navy-dark);
  text-align: center;
  margin-bottom: 8px;
}
.careers-perks-sub {
  font-size: 15px;
  color: var(--muted);
  text-align: center;
  margin-bottom: 32px;
}
.careers-perks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.careers-perk-item { text-align: center; padding: 16px; }
.careers-perk-icon  { font-size: 30px; margin-bottom: 8px; }
.careers-perk-title { font-size: 14px; font-weight: 700; color: var(--navy-dark); margin-bottom: 6px; }
.careers-perk-desc  { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* Careers bottom CTA */
.careers-cta {
  background: linear-gradient(135deg, var(--navy-dark), var(--navy-mid));
  padding: 80px 5%;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.careers-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(13,170,111,0.1) 0%, transparent 60%);
  pointer-events: none;
}
.careers-cta h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
  position: relative;
}
.careers-cta h2 em { font-style: italic; color: var(--green); }
.careers-cta p {
  font-size: 17px;
  color: rgba(255,255,255,0.6);
  max-width: 460px;
  margin: 0 auto 36px;
  line-height: 1.7;
  position: relative;
}
.careers-cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}
.careers-cta-btn {
  background: var(--green);
  color: #fff;
  border: none;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 15px 34px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .2s;
}
.careers-cta-btn:hover { background: var(--green-dark); }

/* Application modal overlay */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.65);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.is-open { display: flex; }

.modal-card {
  background: #fff;
  border-radius: 20px;
  padding: 36px;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 30px 80px rgba(0,0,0,0.3);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  background: #f1f5f9;
  border: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  color: var(--muted);
}
.modal-close:hover { background: var(--border); }
.modal-icon  { font-size: 30px; margin-bottom: 10px; }
.modal-title {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--navy-dark);
  margin-bottom: 8px;
}
.modal-plan-badge {
  display: inline-block;
  background: var(--green-light);
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 22px;
}
.modal-success {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
}
.modal-success-icon  { font-size: 32px; margin-bottom: 8px; }
.modal-success-title { font-size: 16px; font-weight: 700; color: var(--navy-dark); }
.modal-success-note  { font-size: 14px; color: var(--muted); margin-top: 6px; }


/* ============================================================
   24. LEGAL PAGES (Privacy, Terms, Accessibility)
   ============================================================ */

/* Narrow centered column for all legal content */
.legal-wrap {
  max-width: 820px;
  margin: 0 auto;
}

/* Opening paragraph — slightly larger */
.legal-intro {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--gray-600);
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--gray-200);
}

/* Each numbered section */
.legal-section {
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--gray-200);
}
.legal-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Section heading with numbered badge */
.legal-heading {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--navy);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.legal-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: var(--navy);
  color: #fff;
  border-radius: 50%;
  font-size: 0.8rem;
  font-family: var(--font-body);
  font-weight: 700;
}

/* Body text in legal sections */
.legal-section p {
  color: var(--gray-600);
  line-height: 1.8;
  margin-bottom: 0.75rem;
}

/* Bullet list */
.legal-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.legal-list li {
  padding-left: 1.5rem;
  position: relative;
  color: var(--gray-600);
  line-height: 1.7;
}
.legal-list li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}

/* Highlighted callout box (e.g. "We do NOT sell your data") */
.legal-callout {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  background: #f0faf5;
  border-left: 4px solid var(--green);
  border-radius: 0 8px 8px 0;
  color: var(--gray-700);
  font-size: 0.95rem;
}

/* Contact card at the bottom */
.legal-contact-card {
  margin-top: 1rem;
  padding: 1.5rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--gray-600);
  font-size: 0.95rem;
}
.legal-contact-name {
  font-weight: 700;
  color: var(--navy);
  font-size: 1rem;
  margin-bottom: 0.25rem;
}
.legal-contact-card a {
  color: var(--green);
  text-decoration: none;
}
.legal-contact-card a:hover {
  text-decoration: underline;
}

/* ============================================================
   25. ANIMATIONS
   ============================================================ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeRight {
  from { opacity: 0; transform: translate(30px, -50%); }
  to   { opacity: 1; transform: translate(0, -50%); }
}


/* ============================================================
   STUB / COMING SOON PAGES
   Used by privacy.php, terms.php, accessibility.php
   ============================================================ */

.stub-page {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 120px 5% 60px;
  text-align: center;
}
.stub-page-icon  { font-size: 48px; margin-bottom: 20px; }
.stub-page-title {
  font-family: 'Playfair Display', serif;
  font-size: 42px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
}
.stub-page-desc {
  font-size: 17px;
  color: var(--muted);
  max-width: 400px;
  line-height: 1.7;
}
.stub-page-desc a { color: var(--green); text-decoration: none; font-weight: 600; }
.stub-page-desc a:hover { text-decoration: underline; }

/* Width modifiers for .section-title */
/* Use these when a heading needs to be narrower than default */
.section-title--narrow  { max-width: 440px; }
.section-title--medium  { max-width: 500px; }
.section-title--wide    { max-width: 580px; }

/* Plan body flex fill (careers page) */
.plan-body-content { flex: 1; }

/* Wide hero content (careers page hero is slightly wider than default) */
.page-hero-content-wide { position: relative; z-index: 2; max-width: 700px; }

/* Short textarea variant (modal) */
.form-textarea--short { min-height: 80px; }

/* section-sub spacing variant */
.section-sub--spaced { margin-bottom: 48px; }


/* ============================================================
   RESPONSIVE / MOBILE
   Two breakpoints:
     768px  — tablet (collapse multi-column grids to 2 or 1 col)
     480px  — phone  (single column everything, smaller text)

   Nothing above this line was changed — all mobile styles
   are additive overrides here at the bottom.
   ============================================================ */


/* ── Hamburger button (hidden on desktop) ───────────────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 200;
  position: relative;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
/* Animate to X when open */
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Nav overlay — visual dim only, pointer-events handled by document click */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 140;
  pointer-events: none;
}
.nav-overlay.is-open {
  display: block;
  pointer-events: auto;
}


/* ============================================================
   TABLET  — max-width: 768px
   ============================================================ */
@media (max-width: 768px) {

  /* ── Nav ── */
  nav {
    height: 80px;
    padding: 0 5%;
    position: fixed;
    backdrop-filter: none;  /* CRITICAL: removes stacking context that traps drawer */
    -webkit-backdrop-filter: none;
    background: rgba(1, 35, 103, 0.97);
  }
  .nav-logo img { height: 80px; }

  .nav-hamburger { display: flex; }

  /* Mobile nav drawer */
  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: fixed !important;  /* !important overrides any inherited positioning */
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: min(280px, 80vw);
    height: 100vh !important;
    background: rgba(1, 35, 103, 0.98);
    padding: 100px 32px 40px;
    z-index: 9999 !important;
    overflow-y: auto;
    box-shadow: -4px 0 24px rgba(0,0,0,0.3);
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.3s ease, visibility 0.3s ease;
  }
  .nav-links.is-open {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .nav-links a {
    font-size: 16px;
    padding: 14px 0;
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
  }
  .nav-links a:hover { color: #fff; }
  .nav-links a.nav-active {
    color: #fff;
    border-bottom-color: var(--green);
  }

  .nav-cta {
    margin-top: 16px;
    width: 100%;
    text-align: center;
    padding: 14px 22px !important;
    border-radius: 8px !important;
  }

  /* ── Page padding / hero offsets ── */
  .hero-bg, .page-hero, .about-hero, .services-hero { padding-top: 130px; }

  /* ── Announce bar ── */
  .announce-bar { font-size: 12px; padding: 6px 5%; }

  /* ── Nav sits below smaller announce bar on mobile ── */
  nav { top: 30px; }

  /* ── Homepage hero ── */
  .hero-bg { padding: 130px 5% 60px; }
  .hero { padding: 130px 5% 60px; }
  .hero-content { max-width: 100%; }
  .hero-bg h1 { font-size: clamp(2rem, 7vw, 3rem); }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero-stats { gap: 16px; }
  .hero-stat-num { font-size: 1.4rem; }

  /* ── Section spacing ── */
  .section { padding: 60px 5%; }
  .section-alt { padding: 60px 5%; }

  /* ── Trust bar ── */
  .trust-bar { flex-wrap: wrap; gap: 12px; padding: 16px 5%; }
  .trust-item { font-size: 13px; }

  /* ── Services grid (homepage) — 2 col ── */
  .services-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── Why us stats ── */
  .why-stat-row { gap: 12px; }
  .why-stat { min-width: 100px; }

  /* ── Process steps — 2 col ── */
  .process-steps { grid-template-columns: repeat(2, 1fr); }

  /* ── Portal CTA ── */
  .portal-cta-inner { flex-direction: column; gap: 24px; }
  .portal-cta-cards { flex-direction: column; width: 100%; }
  .portal-cta-card { width: 100%; }

  /* ── Testimonials — 1 col ── */
  .testimonials-grid { grid-template-columns: 1fr; }

  /* ── Home office cards — 1 col ── */
  .home-offices-grid { grid-template-columns: 1fr; }

  /* ── Signup CTA ── */
  .signup-cta-btns { flex-direction: column; align-items: center; }
  .signup-cta h2 { font-size: clamp(1.8rem, 5vw, 2.5rem); }

  /* ── Footer ── */
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
  .footer-bottom-links { flex-wrap: wrap; justify-content: center; gap: 16px; }

  /* ── Page heroes (inner pages) ── */
  .page-hero-content h1 { font-size: clamp(2rem, 6vw, 3rem); }
  .page-hero-content-wide { max-width: 100%; }

  /* ── About ── */
  .about-values-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── Services full grid — 1 col ── */
  .services-full-grid { grid-template-columns: 1fr; }

  /* ── Contact layout — stack ── */
  .contact-layout { grid-template-columns: 1fr; }

  /* ── Offices ── */
  .offices-grid { grid-template-columns: 1fr; }

  /* ── Careers 1099 banner ── */
  .careers-1099-banner { flex-direction: column; gap: 20px; text-align: center; }
  .careers-1099-badges { flex-direction: row; flex-wrap: wrap; justify-content: center; }

  /* ── Careers plans — 2 col (scrollable) ── */
  .careers-plans-grid {
    grid-template-columns: repeat(2, 1fr);
    overflow-x: auto;
  }

  /* ── Careers perks — 2 col ── */
  .careers-perks-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── Forms ── */
  .form-row { grid-template-columns: 1fr; }

  /* ── Modal ── */
  .modal-card { width: 95vw; max-height: 90vh; overflow-y: auto; }

  /* ── Legal pages ── */
  .legal-wrap { padding: 0 5%; }

}


/* ============================================================
   PHONE  — max-width: 480px
   ============================================================ */
@media (max-width: 480px) {

  /* ── Nav ── */
  nav { height: 70px; }
  .nav-logo img { height: 70px; }

  /* ── Homepage hero ── */
  .hero-bg { padding: 90px 5% 50px; }
  .hero-bg h1 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* ── Section headings ── */
  .section-title { font-size: clamp(1.6rem, 6vw, 2.2rem); }

  /* ── Services grid (homepage) — 1 col ── */
  .services-grid { grid-template-columns: 1fr; }

  /* ── Process steps — 1 col ── */
  .process-steps { grid-template-columns: 1fr; }

  /* ── Why us stats — 2 col grid ── */
  .why-stat-row { display: grid; grid-template-columns: repeat(2, 1fr); }

  /* ── About values — 1 col ── */
  .about-values-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }

  /* ── Footer — full single column ── */
  .footer-cols { grid-template-columns: 1fr; }

  /* ── Careers plans — horizontal scroll on phone ── */
  .careers-plans-grid {
    grid-template-columns: repeat(5, 280px);
    overflow-x: auto;
    padding-bottom: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /* ── Careers perks — 1 col ── */
  .careers-perks-grid { grid-template-columns: 1fr; }

  /* ── Offices remote CTA buttons ── */
  .offices-remote-cta-btns { flex-direction: column; align-items: center; }
  .offices-cta-primary,
  .offices-cta-secondary { width: 100%; justify-content: center; }

  /* ── Page hero text ── */
  .page-hero-content h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); }

}