/* ============================================================
   ROOT TOKENS
============================================================ */
:root {
  --teal:       #00B8A9;
  --teal-dark:  #007D73;
  --teal-light: #33CFC2;
  --teal-pale:  #E6F7F6;
  --navy:       #14305A;
  --navy-mid:   #1E4080;
  --gold:       #D4A843;
  --gold-light: #F0C96A;
  --gold-pale:  #FDF5E0;
  --coral:      #F06B50;
  --warm-white: #FDFCFA;
  --off-white:  #F5F3EF;
  --gray-100:   #F0EEE9;
  --gray-200:   #E0DDD6;
  --gray-400:   #9E9A90;
  --gray-600:   #5C5850;
  --gray-800:   #2E2C28;
  --card-shadow: 0 2px 20px rgba(20,48,90,0.08);
  --card-shadow-hover: 0 8px 40px rgba(20,48,90,0.14);
  --r: 14px;
  --r-sm: 9px;
  --r-lg: 22px;
}

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: 'Figtree', sans-serif;
  background: var(--warm-white);
  color: var(--gray-800);
  overflow-x: hidden;
  line-height: 1.6;
}
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
button { font-family: 'Figtree', sans-serif; cursor:pointer; }

/* ============================================================
   TYPOGRAPHY
============================================================ */
.display { font-family:'Fraunces',serif; }
h1,h2,h3 { font-family:'Fraunces',serif; line-height:1.15; }

/* ============================================================
   UTILITY BUTTONS
============================================================ */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:12px 24px; border-radius:50px; font-size:0.9rem;
  font-weight:600; border:none; transition:all 0.22s; letter-spacing:0.2px;
  white-space:nowrap;
}
.btn-teal   { background:var(--teal); color:#fff; }
.btn-teal:hover { background:var(--teal-dark); transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,184,169,0.3); }
.btn-navy   { background:var(--navy); color:#fff; }
.btn-navy:hover { background:var(--navy-mid); transform:translateY(-1px); box-shadow:0 6px 20px rgba(20,48,90,0.25); }
.btn-gold   { background:var(--gold); color:var(--navy); }
.btn-gold:hover { background:var(--gold-light); transform:translateY(-1px); }
.btn-outline-white { background:transparent; color:#fff; border:2px solid rgba(255,255,255,0.6); }
.btn-outline-white:hover { background:rgba(255,255,255,0.12); border-color:#fff; }
.btn-outline-teal { background:transparent; color:var(--teal-dark); border:1.5px solid var(--teal); }
.btn-outline-teal:hover { background:var(--teal-pale); }
.btn-sm { padding:8px 18px; font-size:0.82rem; }
.btn-lg { padding:15px 32px; font-size:1rem; }

/* ============================================================
   NAV
============================================================ */
.nav {
  position:sticky; top:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 48px;
  background:rgba(253,252,250,0.95);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--gray-200);
  box-shadow:0 1px 12px rgba(20,48,90,0.06);
}
.nav-logo {
  display:flex; align-items:center; gap:10px;
}
/* ── LOGO SWAP: replace src with real logo file ── */
.nav-logo img {
  height:36px; width:auto;
  display:none; /* change to display:block when logo file ready */
}
.nav-logo-text {
  font-family:'Fraunces',serif;
  font-size:1.4rem; font-weight:700;
  color:var(--navy); letter-spacing:-0.3px;
}
.nav-logo-text span { color:var(--teal); }

.nav-links { display:flex; align-items:center; gap:6px; list-style:none; }
.nav-links a {
  padding:8px 14px; border-radius:8px;
  font-size:0.88rem; font-weight:500; color:var(--gray-600);
  transition:all 0.18s;
}
.nav-links a:hover { color:var(--navy); background:var(--gray-100); }
.nav-links .active { color:var(--teal-dark); font-weight:600; }

/* ============================================================
   HERO
============================================================ */
.hero {
  position:relative; overflow:hidden;
  background: linear-gradient(145deg, #0E2347 0%, #16426E 40%, #0E5C56 100%);
  padding:72px 48px 56px;
  text-align:center;
}
/* Warm overlays */
.hero::before {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(212,168,67,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 85% 20%, rgba(0,184,169,0.18) 0%, transparent 60%);
  pointer-events:none;
}
/* Subtle dot grid */
.hero::after {
  content:'';
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size:32px 32px;
  pointer-events:none;
}
.hero-inner { position:relative; z-index:2; max-width:820px; margin:0 auto; }

.hero-pill {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2);
  padding:6px 16px; border-radius:50px;
  font-size:0.76rem; font-weight:600; letter-spacing:1.8px; text-transform:uppercase;
  color:rgba(255,255,255,0.85); margin-bottom:22px;
  backdrop-filter:blur(8px);
}
.hero-pill-dot { width:7px; height:7px; border-radius:50%; background:var(--teal-light); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.6;transform:scale(1.3)} }

.hero h1 {
  font-size:clamp(2.1rem, 5vw, 3.6rem);
  font-weight:900; color:#fff;
  margin-bottom:18px;
  text-shadow:0 2px 30px rgba(0,0,0,0.3);
  letter-spacing:-0.5px;
}
.hero h1 em { font-style:italic; color:var(--teal-light); }

.hero-sub {
  font-size:clamp(0.95rem, 2vw, 1.1rem);
  color:rgba(255,255,255,0.75);
  max-width:580px; margin:0 auto 34px;
  font-weight:400; line-height:1.7;
}

.hero-ctas { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.hero-secondary { font-size:0.82rem; color:rgba(255,255,255,0.5); }
.hero-secondary a { color:rgba(255,255,255,0.75); text-decoration:underline; text-underline-offset:3px; }
.hero-secondary a:hover { color:#fff; }

/* Accent candy shapes */
.hero-accent {
  position:absolute; border-radius:50%;
  pointer-events:none; opacity:0.06;
}
.ha1 { width:280px; height:280px; background:var(--gold); top:-80px; left:-60px; }
.ha2 { width:200px; height:200px; background:var(--teal-light); bottom:-60px; right:-40px; }
.ha3 { width:120px; height:120px; background:#fff; top:30%; right:8%; }

/* ============================================================
   QUICK SEARCH BAR (below hero)
============================================================ */
.search-bar-wrap {
  background:var(--warm-white);
  padding:0 48px;
  position:relative; z-index:10;
}
.search-bar {
  max-width:900px; margin:0 auto;
  background:#fff;
  border:1.5px solid var(--gray-200);
  border-radius:var(--r-lg);
  box-shadow:0 8px 40px rgba(20,48,90,0.12);
  padding:14px 14px 14px 22px;
  display:flex; align-items:center; gap:12px;
  transform:translateY(-28px);
}
.sb-input {
  flex:1; border:none; outline:none;
  font-family:'Figtree',sans-serif;
  font-size:0.95rem; color:var(--gray-800);
  background:transparent;
}
.sb-input::placeholder { color:var(--gray-400); }
.sb-divider { width:1px; height:30px; background:var(--gray-200); flex-shrink:0; }
.sb-select {
  border:none; outline:none; background:transparent;
  font-family:'Figtree',sans-serif; font-size:0.88rem;
  color:var(--gray-600); padding:0 8px; cursor:pointer;
  min-width:120px;
}

/* ============================================================
   SECTION CHROME
============================================================ */
.section { padding:60px 48px; }
.section-sm { padding:40px 48px; }
.section-alt { background:var(--off-white); }
.section-dark { background:var(--navy); color:#fff; }
.section-teal { background:var(--teal-pale); }

.container { max-width:1140px; margin:0 auto; }

.section-eyebrow {
  font-size:0.71rem; font-weight:700; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--teal-dark); margin-bottom:10px;
}
.section-eyebrow.light { color:var(--teal-light); }

.section-title {
  font-size:clamp(1.5rem, 3vw, 2.1rem);
  font-weight:800; margin-bottom:10px; color:var(--navy);
}
.section-title.light { color:#fff; }

.section-sub {
  font-size:0.95rem; color:var(--gray-600); max-width:560px;
  line-height:1.65; margin-bottom:36px;
}
.section-sub.light { color:rgba(255,255,255,0.65); }

.section-header-row {
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:28px; gap:16px; flex-wrap:wrap;
}
.view-all {
  font-size:0.84rem; font-weight:600; color:var(--teal-dark);
  border:1.5px solid var(--teal); padding:8px 18px; border-radius:50px;
  transition:all 0.18s; display:inline-flex; align-items:center; gap:5px;
}
.view-all:hover { background:var(--teal); color:#fff; }

/* ============================================================
   FEATURED VENDOR SCROLLER
============================================================ */
.vendor-scroll-section {
  background:#fff; border-top:1px solid var(--gray-200);
  border-bottom:1px solid var(--gray-200);
  padding:28px 0; overflow:hidden;
}
.vendor-scroll-label {
  font-size:0.72rem; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--gray-400);
  text-align:center; margin-bottom:18px;
}
.vendor-scroller {
  display:flex; gap:0; overflow:hidden;
  -webkit-mask:linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.vendor-track {
  display:flex; gap:0; animation:scrollLeft 28s linear infinite;
  will-change:transform;
}
@keyframes scrollLeft { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.vendor-scroll-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 28px; border-right:1px solid var(--gray-200);
  flex-shrink:0; min-width:220px; cursor:pointer;
  transition:background 0.18s;
}
.vendor-scroll-item:hover { background:var(--teal-pale); }
.vsi-logo {
  width:40px; height:40px; border-radius:10px;
  background:var(--gray-100); display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
  border:1px solid var(--gray-200);
}
.vsi-info { }
.vsi-name { font-size:0.84rem; font-weight:600; color:var(--gray-800); }
.vsi-cat { font-size:0.73rem; color:var(--gray-400); }
.vsi-area { font-size:0.71rem; color:var(--teal-dark); font-weight:500; }

/* ============================================================
   JOB FILTERS
============================================================ */
.job-filters {
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px;
}
.filter-btn {
  padding:8px 16px; border-radius:50px;
  font-size:0.82rem; font-weight:600;
  border:1.5px solid var(--gray-200);
  color:var(--gray-600); background:#fff;
  transition:all 0.18s; cursor:pointer;
}
.filter-btn:hover { border-color:var(--teal); color:var(--teal-dark); }
.filter-btn.active { background:var(--teal); color:#fff; border-color:var(--teal); }

/* ============================================================
   JOB CARDS
============================================================ */
.jobs-grid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
}

.job-card {
  background:#fff; border:1.5px solid var(--gray-200);
  border-radius:var(--r); padding:20px 22px 18px;
  transition:all 0.22s; cursor:pointer; position:relative;
  box-shadow:var(--card-shadow);
}
.job-card:hover {
  border-color:var(--teal); box-shadow:var(--card-shadow-hover);
  transform:translateY(-2px);
}
.job-card-accent {
  position:absolute; top:0; left:0;
  width:4px; height:100%; border-radius:var(--r) 0 0 var(--r);
  background:var(--teal); opacity:0; transition:opacity 0.22s;
}
.job-card:hover .job-card-accent { opacity:1; }

.jc-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; }
.jc-logo {
  width:44px; height:44px; border-radius:10px;
  background:var(--gray-100); border:1px solid var(--gray-200);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; flex-shrink:0;
}
.jc-badges { display:flex; gap:5px; flex-wrap:wrap; }
.jc-badge {
  font-size:0.66rem; font-weight:700; letter-spacing:0.4px;
  text-transform:uppercase; padding:3px 9px; border-radius:50px;
}
.b-urgent { background:#FEF0EC; color:#C04020; border:1px solid #FACAB8; }
.b-new    { background:var(--teal-pale); color:var(--teal-dark); border:1px solid #B8E8E5; }
.b-ft     { background:var(--gold-pale); color:#7A5010; border:1px solid #F0D898; }
.b-hybrid { background:#EEF2FF; color:#3C4EB0; border:1px solid #C8D0F8; }

.jc-title { font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:3px; line-height:1.3; }
.jc-company { font-size:0.82rem; color:var(--teal-dark); font-weight:600; margin-bottom:8px; }
.jc-meta { display:flex; gap:14px; flex-wrap:wrap; }
.jc-meta span { font-size:0.78rem; color:var(--gray-400); display:flex; align-items:center; gap:4px; }
.jc-pay { font-size:0.9rem; font-weight:700; color:var(--navy); margin-top:10px; }
.jc-benefits { display:flex; gap:5px; flex-wrap:wrap; margin-top:8px; }
.jc-benefit {
  font-size:0.68rem; font-weight:500; color:var(--gray-600);
  background:var(--gray-100); border:1px solid var(--gray-200);
  padding:2px 9px; border-radius:50px;
}
.jc-footer {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--gray-100);
}
.jc-date { font-size:0.72rem; color:var(--gray-400); }
.jc-apply {
  font-size:0.79rem; font-weight:700; color:var(--teal-dark);
  background:var(--teal-pale); border:1.5px solid #B8E8E5;
  padding:6px 16px; border-radius:50px; transition:all 0.18s;
}
.jc-apply:hover { background:var(--teal); color:#fff; border-color:var(--teal); }

/* ============================================================
   ACTION CARDS
============================================================ */
.action-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.action-card {
  border-radius:var(--r-lg); padding:32px 28px 28px;
  display:flex; flex-direction:column; gap:14px;
}
.ac-seek { background:linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%); color:#fff; }
.ac-hire { background:linear-gradient(135deg, var(--teal-dark) 0%, var(--teal) 100%); color:#fff; }
.ac-vendor { background:linear-gradient(135deg, #7A5010 0%, var(--gold) 100%); color:#fff; }
.ac-icon { font-size:2rem; margin-bottom:4px; }
.ac-title { font-family:'Fraunces',serif; font-size:1.25rem; font-weight:700; line-height:1.2; }
.ac-desc { font-size:0.88rem; opacity:0.82; line-height:1.55; }
.ac-btn {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,0.18); color:#fff;
  border:1.5px solid rgba(255,255,255,0.35);
  padding:10px 20px; border-radius:50px;
  font-size:0.86rem; font-weight:700; align-self:flex-start;
  transition:all 0.2s;
}
.ac-btn:hover { background:rgba(255,255,255,0.28); border-color:rgba(255,255,255,0.6); }

/* ============================================================
   VENDOR DIRECTORY PREVIEW
============================================================ */
.vendor-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

.vendor-card {
  background:#fff; border:1.5px solid var(--gray-200);
  border-radius:var(--r); overflow:hidden;
  transition:all 0.22s; cursor:pointer;
  box-shadow:var(--card-shadow);
}
.vendor-card:hover { border-color:var(--teal); box-shadow:var(--card-shadow-hover); transform:translateY(-2px); }

/* ── PHOTO PLACEHOLDER: replace background-image with real photo URL ──
   Recommended: 600×200px, real people / apartment community exterior    */
.vc-photo {
  height:140px; width:100%;
  background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
  font-size:0.72rem; font-weight:600; letter-spacing:1px;
  text-transform:uppercase; color:rgba(255,255,255,0.8);
  text-shadow:0 1px 4px rgba(0,0,0,0.3);
}
.vcp1 { background-color:#C2D8E0; }
.vcp2 { background-color:#C8D8C8; }
.vcp3 { background-color:#DDD0C0; }
.vcp4 { background-color:#C8C0D8; }
.vcp5 { background-color:#D8C8C0; }
.vcp6 { background-color:#C0D0D8; }

.vc-body { padding:16px 18px 14px; }
.vc-cat { font-size:0.72rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--teal-dark); margin-bottom:5px; }
.vc-name { font-family:'Fraunces',serif; font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:5px; }
.vc-area { font-size:0.78rem; color:var(--gray-400); margin-bottom:8px; }
.vc-desc { font-size:0.81rem; color:var(--gray-600); line-height:1.55; margin-bottom:12px; }
.vc-badges-row { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:14px; }
.vc-badge {
  font-size:0.67rem; font-weight:600; padding:2px 9px; border-radius:50px;
  text-transform:uppercase; letter-spacing:0.3px;
}
.vcb-green  { background:#EAF5EC; color:#2A6B3A; border:1px solid #B8DEC0; }
.vcb-gold   { background:var(--gold-pale); color:#7A5010; border:1px solid #F0D898; }
.vcb-teal   { background:var(--teal-pale); color:var(--teal-dark); border:1px solid #B8E8E5; }
.vcb-navy   { background:#EEF2F8; color:var(--navy); border:1px solid #C8D4E8; }

.vc-footer { display:flex; justify-content:space-between; align-items:center; padding-top:10px; border-top:1px solid var(--gray-100); }
.vc-stars { color:var(--gold); font-size:0.8rem; }
.vc-reviews { font-size:0.72rem; color:var(--gray-400); margin-left:4px; }
.vc-profile {
  font-size:0.78rem; font-weight:700; color:var(--teal-dark);
  background:var(--teal-pale); border:1.5px solid #B8E8E5;
  padding:6px 14px; border-radius:50px; transition:all 0.18s;
}
.vc-profile:hover { background:var(--teal); color:#fff; border-color:var(--teal); }

/* ============================================================
   ABOUT SECTION
============================================================ */
.about-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
.about-img-placeholder {
  border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:4/3;
  background:linear-gradient(135deg, var(--teal-pale) 0%, #D8EEF5 100%);
  display:flex; align-items:center; justify-content:center;
  font-size:0.82rem; font-weight:600; letter-spacing:1px;
  text-transform:uppercase; color:var(--teal-dark);
  border:1.5px solid #B8E8E5;
  /* ── PHOTO: replace with real photo of apartment community or team ── */
}
.about-points { display:flex; flex-direction:column; gap:18px; margin-top:28px; }
.about-point { display:flex; gap:14px; align-items:flex-start; }
.ap-icon {
  width:40px; height:40px; border-radius:10px;
  background:var(--teal-pale); color:var(--teal-dark);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
}
.ap-title { font-size:0.9rem; font-weight:700; color:var(--navy); margin-bottom:3px; }
.ap-desc { font-size:0.83rem; color:var(--gray-600); line-height:1.55; }

/* ============================================================
   TESTIMONIALS
============================================================ */
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.testi-card {
  background:#fff; border:1.5px solid var(--gray-200);
  border-radius:var(--r); padding:24px 22px;
  box-shadow:var(--card-shadow);
}
.testi-stars { color:var(--gold); font-size:0.85rem; margin-bottom:12px; }
.testi-quote {
  font-size:0.9rem; color:var(--gray-600); line-height:1.65;
  font-style:italic; margin-bottom:16px;
}
.testi-quote::before { content:'\201C'; font-family:'Fraunces',serif; font-size:1.4rem; color:var(--teal); line-height:0; vertical-align:-0.3em; margin-right:3px; }
.testi-author { display:flex; align-items:center; gap:10px; }
.testi-avatar {
  width:38px; height:38px; border-radius:50%;
  background:var(--teal-pale); color:var(--teal-dark);
  display:flex; align-items:center; justify-content:center;
  font-size:0.9rem; font-weight:700; border:2px solid #B8E8E5;
}
.testi-name { font-size:0.84rem; font-weight:700; color:var(--navy); }
.testi-role { font-size:0.75rem; color:var(--gray-400); }

/* ============================================================
   DAILY SWEET BREAK
============================================================ */
.sweet-break {
  background:linear-gradient(135deg, var(--gold-pale) 0%, #FFF8EC 100%);
  border:1.5px solid #F0D898;
  border-radius:var(--r-lg); padding:28px 32px;
  display:flex; align-items:center; gap:24px;
  max-width:800px; margin:0 auto;
}
.sb-emoji { font-size:2.4rem; flex-shrink:0; }
.sb-title {
  font-family:'Fraunces',serif; font-size:1rem; font-weight:700;
  color:var(--navy); margin-bottom:5px;
}
.sb-title span { color:var(--gold); }
.sb-text { font-size:0.88rem; color:var(--gray-600); line-height:1.6; }

/* ============================================================
   STATS STRIP
============================================================ */
.stats-strip {
  display:flex; justify-content:center; gap:0;
  border-top:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.stat-item {
  flex:1; text-align:center;
  padding:32px 24px;
  border-right:1px solid rgba(255,255,255,0.08);
}
.stat-item:last-child { border-right:none; }
.stat-num {
  font-family:'Fraunces',serif; font-size:2.2rem; font-weight:900;
  color:var(--teal-light); display:block; margin-bottom:4px;
}
.stat-label { font-size:0.79rem; color:rgba(255,255,255,0.5); letter-spacing:0.3px; }

/* ============================================================
   FOOTER
============================================================ */
.footer {
  background:var(--gray-800); color:rgba(255,255,255,0.6);
  padding:48px 48px 28px;
}
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px;
  max-width:1140px; margin:0 auto 36px;
}
.footer-brand .nav-logo-text { color:#fff; font-size:1.2rem; }
.footer-brand p { font-size:0.83rem; line-height:1.65; margin-top:12px; max-width:280px; }
.footer-col h4 { font-size:0.82rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,0.85); margin-bottom:14px; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
.footer-col a { font-size:0.83rem; transition:color 0.18s; }
.footer-col a:hover { color:var(--teal-light); }
.footer-bottom {
  max-width:1140px; margin:0 auto;
  padding-top:22px; border-top:1px solid rgba(255,255,255,0.08);
  display:flex; justify-content:space-between; align-items:center;
  font-size:0.78rem; flex-wrap:wrap; gap:10px;
}
.footer-bottom a { color:var(--teal-light); }

/* ============================================================
   FORMS (simplified)
============================================================ */
.form-panel { background:#fff; border-radius:var(--r); padding:30px 28px; box-shadow:var(--card-shadow); }
.fp-title { font-family:'Fraunces',serif; font-size:1.2rem; font-weight:700; color:var(--navy); margin-bottom:20px; }
.fp-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fp-grid.col3 { grid-template-columns:1fr 1fr 1fr; }
.fp-grid.col1 { grid-template-columns:1fr; }
.fp-span2 { grid-column:span 2; }
.form-group { display:flex; flex-direction:column; gap:5px; }
.form-group label { font-size:0.77rem; font-weight:600; color:var(--gray-600); }
.form-group input,
.form-group select,
.form-group textarea {
  font-family:'Figtree',sans-serif; font-size:0.88rem; color:var(--gray-800);
  background:var(--gray-100); border:1.5px solid transparent;
  border-radius:var(--r-sm); padding:10px 13px; outline:none;
  transition:all 0.2s; width:100%; appearance:none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color:var(--teal); background:#fff;
  box-shadow:0 0 0 3px rgba(0,184,169,0.1);
}
.form-group textarea { resize:vertical; min-height:80px; }
.form-group select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239E9A90' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:32px;
}
.benefit-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); gap:8px; }
.benefit-toggle {
  display:flex; align-items:center; justify-content:space-between;
  background:var(--gray-100); border:1.5px solid transparent;
  border-radius:var(--r-sm); padding:9px 13px; cursor:pointer; transition:all 0.18s;
}
.benefit-toggle:hover { border-color:var(--teal); }
.benefit-toggle span { font-size:0.8rem; font-weight:500; color:var(--gray-600); }
.toggle-sw { width:34px;height:18px;background:var(--gray-200);border-radius:50px;position:relative;transition:background 0.2s;flex-shrink:0; }
.toggle-sw::after { content:'';position:absolute;width:12px;height:12px;background:#fff;border-radius:50%;top:3px;left:3px;transition:left 0.2s;box-shadow:0 1px 3px rgba(0,0,0,0.2); }
.benefit-toggle.on .toggle-sw { background:var(--teal); }
.benefit-toggle.on .toggle-sw::after { left:19px; }
.benefit-toggle.on span { color:var(--teal-dark); font-weight:600; }

.tabs-row { display:flex; margin-bottom:24px; border-bottom:2px solid var(--gray-200); }
.tab-pill {
  padding:10px 20px; font-size:0.88rem; font-weight:600; border:none;
  background:none; color:var(--gray-400); cursor:pointer; transition:all 0.18s;
  position:relative; top:2px;
}
.tab-pill.active {
  color:var(--teal-dark); border-bottom:2px solid var(--teal);
}
.tab-content { display:none; }
.tab-content.active { display:block; }
.submit-row {
  display:flex; gap:12px; margin-top:24px; padding-top:20px;
  border-top:1px solid var(--gray-100);
}
.check-group { display:flex; flex-wrap:wrap; gap:8px; }
.check-pill {
  display:flex; align-items:center; gap:6px;
  padding:7px 13px; background:var(--gray-100);
  border:1.5px solid transparent; border-radius:50px;
  cursor:pointer; transition:all 0.18s; user-select:none;
}
.check-pill:hover { border-color:var(--teal); }
.check-pill input[type=checkbox] { accent-color:var(--teal); width:14px;height:14px; }
.check-pill span { font-size:0.8rem; font-weight:500; color:var(--gray-600); }
.check-pill:has(input:checked) { border-color:var(--teal); background:var(--teal-pale); }
.check-pill:has(input:checked) span { color:var(--teal-dark); font-weight:600; }

/* ============================================================
   MOBILE
============================================================ */
@media (max-width:1024px) {
  .jobs-grid { grid-template-columns:1fr 1fr; }
  .vendor-grid { grid-template-columns:1fr 1fr; }
  .testi-grid { grid-template-columns:1fr 1fr; }
  .about-grid { grid-template-columns:1fr; gap:32px; }
}
@media (max-width:768px) {
  .nav { padding:12px 20px; }
  .nav-links { display:none; }
  .hero { padding:48px 20px 40px; }
  .section { padding:40px 20px; }
  .section-sm { padding:28px 20px; }
  .search-bar-wrap { padding:0 20px; }
  .search-bar { flex-direction:column; align-items:stretch; transform:translateY(-20px); }
  .sb-divider { display:none; }
  .jobs-grid { grid-template-columns:1fr; }
  .vendor-grid { grid-template-columns:1fr; }
  .action-grid { grid-template-columns:1fr; }
  .testi-grid { grid-template-columns:1fr; }
  .stats-strip { flex-wrap:wrap; }
  .stat-item { border-right:none; border-bottom:1px solid rgba(255,255,255,0.08); }
  .footer-grid { grid-template-columns:1fr 1fr; gap:28px; }
  .sweet-break { flex-direction:column; text-align:center; }
  .fp-grid { grid-template-columns:1fr; }
  .fp-grid.col3 { grid-template-columns:1fr; }
  .fp-span2 { grid-column:span 1; }
}