/* ==========================================================================
   YASSO INSURANCE — Premium Design System
   Brand: Farmers Insurance · Agent: Patrick Yasso
   Exact brand colors extracted from client materials:
     Farmers Red  #BB0A1E   ·  Deep Navy #021F57  ·  Bright Blue #024F9D
   Hand-crafted, build-free CSS. No framework. Mobile-first.
   ========================================================================== */

/* ---------- 1. Design Tokens ---------- */
:root {
  /* Brand */
  --red: #BB0A1E;
  --red-600: #A30819;
  --red-700: #8C0716;
  --navy: #021F57;
  --navy-800: #04265f;
  --navy-700: #0a3071;
  --blue: #024F9D;
  --blue-500: #1466c4;
  --blue-400: #3b86df;

  /* Neutrals */
  --ink: #0c1430;
  --slate-900: #131a2e;
  --slate-700: #344056;
  --slate-600: #4a5670;
  --slate-500: #697490;
  --slate-400: #97a0b8;
  --slate-300: #c7cdda;
  --slate-200: #e3e7ef;
  --slate-100: #eef1f7;
  --slate-50:  #f6f8fc;
  --white: #ffffff;
  --cream: #fbfcfe;

  /* Accent gradients (derived only from brand colors) */
  --grad-navy: linear-gradient(135deg, #021F57 0%, #073a86 60%, #024F9D 100%);
  --grad-navy-deep: linear-gradient(160deg, #04122f 0%, #021F57 55%, #06296c 100%);
  --grad-red: linear-gradient(135deg, #d11227 0%, #BB0A1E 55%, #8C0716 100%);
  --grad-sheen: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));

  /* Typography */
  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Radii */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Shadows (soft, layered, premium) */
  --sh-xs: 0 1px 2px rgba(2,31,87,.06);
  --sh-sm: 0 2px 8px rgba(2,31,87,.07);
  --sh: 0 10px 30px -12px rgba(2,31,87,.18);
  --sh-md: 0 18px 50px -20px rgba(2,31,87,.28);
  --sh-lg: 0 30px 70px -28px rgba(2,31,87,.35);
  --sh-red: 0 14px 30px -10px rgba(187,10,30,.45);
  --sh-blue: 0 14px 30px -10px rgba(2,79,157,.40);

  /* Layout */
  --container: 1320px;
  --container-narrow: 960px;
  --gutter: clamp(20px, 4vw, 56px);
  --section-y: clamp(60px, 8vw, 110px);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .18s;
  --t: .32s;
  --t-slow: .6s;
}

/* ---------- 2. Reset / Base ---------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
}
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg,video { display:block; max-width:100%; height:auto; }
/* Base icon size — every icon defaults to ~1.2em unless a context overrides it */
.ico { width: 1.2em; height: 1.2em; flex: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
input,select,textarea { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 2px; border-radius: 4px; }

h1,h2,h3,h4 { font-family: var(--font-display); line-height: 1.12; font-weight: 700; color: var(--navy); letter-spacing: -.02em; }
h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
p { color: var(--slate-600); }
strong { color: var(--slate-900); font-weight: 700; }

/* ---------- 3. Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(44px,6vw,72px); }
.bg-cream { background: var(--cream); }
.bg-slate { background: var(--slate-50); }
.bg-navy { background: var(--navy); color: #dfe6f6; }
.bg-navy h2,.bg-navy h3 { color: #fff; }
.bg-navy p { color: #b9c6e6; }
.grid { display: grid; gap: clamp(20px, 3vw, 34px); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.stack > * + * { margin-top: 1rem; }

/* ---------- 4. Eyebrow / section heading ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap;
  font-family: var(--font-display); font-weight: 600; font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--red);
  background: rgba(187,10,30,.07); padding: .42rem .85rem; border-radius: var(--r-pill);
}
.eyebrow .ico { flex: none; width: 1.05em; height: 1.05em; }
.eyebrow + h1, .eyebrow + h2, .eyebrow + h3 { margin-top: 1rem; }
.bg-navy .eyebrow { color: #ff9aa6; background: rgba(255,255,255,.08); }
.section-head { max-width: 760px; margin: 0 auto clamp(38px,5vw,60px); }
.section-head.center { text-align: center; }
.section-head .lead { font-size: 1.15rem; margin-top: 1rem; }
.lead { font-size: 1.2rem; color: var(--slate-600); line-height: 1.7; }

/* ---------- 5. Buttons ---------- */
.btn {
  --bg: var(--red); --fg:#fff;
  display: inline-flex; align-items: center; justify-content: center; gap:.6rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  padding: .95rem 1.7rem; border-radius: var(--r-pill); color: var(--fg);
  background: var(--bg); position: relative; isolation: isolate; overflow: hidden;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t);
  box-shadow: var(--sh-sm); white-space: nowrap; line-height:1;
}
.btn::after{ /* sheen sweep */
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.28) 50%, transparent 80%);
  transform: translateX(-120%); transition: transform .7s var(--ease-out);
}
.btn:hover::after{ transform: translateX(120%); }
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }
.btn--primary { background: var(--grad-red); box-shadow: var(--sh-red); }
.btn--primary:hover { box-shadow: 0 20px 40px -12px rgba(187,10,30,.55); }
.btn--navy { background: var(--grad-navy); box-shadow: var(--sh-blue); }
.btn--blue { background: linear-gradient(135deg,#1466c4,#024F9D); box-shadow: var(--sh-blue); }
.btn--ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 2px var(--slate-200); }
.btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--navy); }
.btn--white { background:#fff; color: var(--navy); box-shadow: var(--sh); }
.btn--lg { padding: 1.1rem 2.1rem; font-size: 1.08rem; }
.btn--sm { padding: .65rem 1.15rem; font-size: .9rem; }
.btn--block { display:flex; width:100%; }
.btn .ico { width: 1.15em; height: 1.15em; }

.btn-row { display:flex; flex-wrap:wrap; gap: .9rem; }
.btn-row.center { justify-content:center; }

/* ---------- 6. Header / Nav ---------- */
.topbar {
  background: var(--grad-navy-deep); color:#cdd8f0; font-size:.86rem;
}
.topbar .container { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.5rem; }
.topbar a { color:#e7eefc; font-weight:500; transition:color var(--t); }
.topbar a:hover { color:#fff; }
.topbar .tb-left { display:flex; gap:1.4rem; align-items:center; flex-wrap:wrap; }
.topbar .tb-right { display:flex; gap:1.1rem; align-items:center; }
.topbar .pill { display:inline-flex; gap:.4rem; align-items:center; }
.topbar .ico { width:1em; height:1em; opacity:.85; }
@media (max-width: 760px){
  .topbar{ font-size:.8rem; }
  .topbar .tb-left{ display:none; }
  .topbar .hide-sm{ display:none; }
  .topbar .container{ justify-content:center; }
  .topbar .tb-right{ gap:.9rem; }
}

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.82); backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--slate-100);
  transition: box-shadow var(--t), background var(--t);
}
.site-header.scrolled { box-shadow: var(--sh); background: rgba(255,255,255,.94); }
.navbar { display:flex; align-items:center; justify-content:space-between; gap:1.2rem; padding-block: .7rem; }
.brand { display:flex; align-items:center; gap:.7rem; }
.brand__logo { height:46px; width:auto; }
.brand__txt { display:flex; flex-direction:column; line-height:1.05; }
.brand__name { font-family:var(--font-display); font-weight:800; font-size:1.14rem; color:var(--navy); letter-spacing:-.01em; }
.brand__sub { font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--red); font-weight:600; }

/* Personal brand monogram mark */
.brand__mark {
  width:48px; height:48px; border-radius:14px; flex:none;
  background:var(--grad-navy); color:#fff; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:1.18rem; letter-spacing:.01em;
  box-shadow:var(--sh-blue); position:relative; overflow:hidden;
}
.brand__mark::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--grad-red); }
.brand__mark::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 60%); }
.brand__mark span{ position:relative; z-index:1; }

/* "Authorized Farmers Agent" trust mark */
.agent-badge{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-body); }
.agent-badge img{ height:20px; width:auto; }
.agent-badge .lbl{ font-size:.68rem; letter-spacing:.04em; color:var(--slate-500); font-weight:600; text-transform:uppercase; }

.nav-links { display:flex; align-items:center; gap:.15rem; }
.nav-links a {
  font-family:var(--font-display); font-weight:500; font-size:.95rem; color:var(--slate-700);
  padding:.55rem .7rem; border-radius:var(--r-pill); position:relative; white-space:nowrap; transition:color var(--t), background var(--t);
}
.nav-links a:hover { color:var(--navy); background: var(--slate-100); }
.nav-links a.active { color:var(--red); }
.nav-cta { display:flex; align-items:center; gap:.7rem; }
.nav-phone { display:inline-flex; align-items:center; gap:.45rem; font-family:var(--font-display); font-weight:700; color:var(--navy); white-space:nowrap; }
.nav-phone .ico{ width:1.15em;height:1.15em;color:var(--red); }

.nav-toggle { display:none; width:46px;height:46px;border-radius:12px; align-items:center; justify-content:center; color:var(--navy); background:var(--slate-100); }
.nav-toggle svg{ width:24px;height:24px; }

/* Mobile menu — drops down from the top, compact */
.mobile-nav { position:fixed; inset:0; z-index:80; visibility:hidden; }
.mobile-nav__scrim { position:absolute; inset:0; background:rgba(4,9,28,.5); opacity:0; transition:opacity var(--t); }
.mobile-nav__panel {
  position:absolute; top:0; left:0; right:0; width:100%; max-height:92vh;
  background:#fff; box-shadow:var(--sh-lg); padding:1rem 1.1rem 1.2rem; border-radius:0 0 22px 22px;
  transform:translateY(-100%); transition:transform var(--t) var(--ease); display:flex; flex-direction:column; gap:.1rem; overflow-y:auto;
}
.mobile-nav.open { visibility:visible; }
.mobile-nav.open .mobile-nav__scrim { opacity:1; }
.mobile-nav.open .mobile-nav__panel { transform:translateY(0); }
.mobile-nav a { padding:.62rem .85rem; border-radius:10px; font-family:var(--font-display); font-weight:600; color:var(--navy); font-size:.98rem; }
.mobile-nav a:hover,.mobile-nav a:active{ background:var(--slate-100); }
/* keep CTA button text white/correct inside the menu */
.mobile-nav a.btn{ color:#fff; }
.mobile-nav a.btn:hover{ background:var(--bg); }
.mobile-nav a.btn--ghost{ color:var(--navy); }
.mobile-nav__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem; }
.mobile-nav__close{ width:40px;height:40px;border-radius:11px;background:var(--slate-100);display:flex;align-items:center;justify-content:center; }
.mobile-nav .btn{ padding:.7rem 1rem; }
@media (max-width: 1000px){
  .nav-links, .nav-cta .btn, .nav-phone { display:none; }
  .nav-toggle { display:flex; }
}

/* ---------- 7. Hero ---------- */
.hero { position:relative; background: var(--navy); color:#fff; overflow:hidden; isolation:isolate; }
.hero::before{ /* glow */
  content:""; position:absolute; width:60vw; height:60vw; right:-12vw; top:-18vw; z-index:-1;
  background: radial-gradient(circle, rgba(2,79,157,.55), transparent 62%); filter:blur(10px);
}
.hero::after{
  content:""; position:absolute; left:-10vw; bottom:-16vw; width:46vw; height:46vw; z-index:-1;
  background: radial-gradient(circle, rgba(187,10,30,.30), transparent 65%);
}
.hero__grid { display:grid; grid-template-columns: 1.08fr .92fr; gap:clamp(30px,5vw,64px); align-items:center; padding-block: clamp(24px,3vw,44px) clamp(8px,1.4vw,16px); }
.hero__badges { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.chip { display:inline-flex; align-items:center; gap:.45rem; font-size:.82rem; font-weight:600; font-family:var(--font-display);
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); color:#eaf1ff; padding:.45rem .85rem; border-radius:var(--r-pill); backdrop-filter:blur(6px); }
.chip .ico{ width:1em;height:1em;color:#ff9aa6; }
.hero h1 { color:#fff; line-height:1.22; }
.hero h1 .accent { background: linear-gradient(120deg,#ff7a88,#ffd0d5); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__lead { color:#c2d0ee; font-size:1.12rem; margin-top:1rem; max-width:42ch; text-transform:uppercase; letter-spacing:.03em; font-weight:600; }
.hero__list { display:grid; grid-template-columns:repeat(2,max-content); gap:.6rem 2rem; margin-top:1.4rem; }
.hero__list li { display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:700; font-size:1.15rem; letter-spacing:.04em; text-transform:uppercase; color:#eaf1ff; }
.hero__list .ico { width:1.25em; height:1.25em; color:#7ef0a8; background:rgba(126,240,168,.12); border-radius:50%; padding:4px; flex:none; }
.hero__cta { margin-top:2rem; }
.hero__trust { margin-top:2.2rem; display:flex; gap:1.6rem; flex-wrap:wrap; align-items:center; }
.hero__trust .stat { display:flex; flex-direction:column; }
.hero__trust .stat b { font-family:var(--font-display); font-size:1.7rem; color:#fff; line-height:1; }
.hero__trust .stat span { font-size:.82rem; color:#9fb1d8; margin-top:.25rem; }
.hero__divider { width:1px; height:38px; background:rgba(255,255,255,.18); }

/* Hero portrait card */
.hero__media { position:relative; }
.hero__portrait {
  position:relative; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  border:1px solid rgba(255,255,255,.14);
}
.hero__portrait img{ width:100%; aspect-ratio: 4/4.2; object-fit:cover; object-position:top center; }
.hero__namecard {
  position:absolute; left:50%; transform:translateX(-50%); bottom:18px; width:calc(100% - 32px);
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-radius:var(--r); padding:.9rem 1.1rem;
  box-shadow:var(--sh-md); display:flex; align-items:center; justify-content:space-between; gap:.8rem;
}
.hero__namecard .nm{ font-family:var(--font-display); font-weight:800; color:var(--navy); }
.hero__namecard .rl{ font-size:.8rem; color:var(--red); font-weight:600; }
.hero__namecard .lic{ font-size:.72rem; color:var(--slate-500); }
.hero__float {
  position:absolute; background:#fff; border-radius:var(--r); box-shadow:var(--sh-md); padding:.8rem 1rem;
  display:flex; align-items:center; gap:.7rem; font-family:var(--font-display); font-weight:600; color:var(--navy); font-size:.9rem;
  animation: floaty 5s var(--ease) infinite;
}
.hero__float .badge-ico{ width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#fff;flex:none; }
.hero__float--1{ top:14px; left:-18px; }
.hero__float--2{ bottom:96px; right:-16px; animation-delay:1.5s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

@media (max-width: 880px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__media{ max-width:440px; margin-inline:auto; }
  .hero__float--1{ left:0; } .hero__float--2{ right:0; }
}

/* ---------- 8. Trust bar / logos ---------- */
.trustbar { border-block:1px solid var(--slate-100); background:#fff; }
.trustbar .container{ display:flex; align-items:center; justify-content:center; gap:clamp(1.2rem,4vw,3rem); flex-wrap:wrap; padding-block:1.4rem; }
.trustbar .ti { display:flex; align-items:center; gap:.6rem; color:var(--slate-600); font-weight:600; font-family:var(--font-display); font-size:.92rem; }
.trustbar .ti .ico{ width:1.3em;height:1.3em;color:var(--red); }

/* ---------- 9. Cards ---------- */
.card {
  background:#fff; border:1px solid var(--slate-100); border-radius:var(--r-lg); padding:clamp(1.4rem,2.4vw,2rem);
  box-shadow:var(--sh-sm); transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t);
  position:relative; overflow:hidden; height:100%;
}
.card:hover { transform:translateY(-6px); box-shadow:var(--sh-md); border-color:var(--slate-200); }
.card__ico {
  width:60px;height:60px;border-radius:16px;display:grid;place-items:center;margin-bottom:1.1rem; color:#fff;
  box-shadow:var(--sh-blue); position:relative;
}
.card__ico .ico{ width:30px;height:30px; }
.card h3 { margin-bottom:.55rem; }
.card p { font-size:1rem; }
.card__link { display:inline-flex; align-items:center; gap:.45rem; margin-top:1.1rem; color:var(--red); font-weight:600; font-family:var(--font-display); }
.card__link .ico{ width:1.05em;height:1.05em; transition:transform var(--t); }
.card:hover .card__link .ico{ transform:translateX(4px); }

/* gradient icon variants */
.ig-red{ background:var(--grad-red); box-shadow:var(--sh-red); }
.ig-navy{ background:var(--grad-navy); }
.ig-blue{ background:linear-gradient(135deg,#1466c4,#024F9D); }

/* product/service grid */
.cards-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(16px,1.6vw,22px); }
/* Compact, clean service cards */
.cards-grid .card{ padding:1.4rem 1.45rem; }
.cards-grid .card__ico{ width:46px; height:46px; border-radius:12px; margin-bottom:.85rem; }
.cards-grid .card__ico .ico{ width:23px; height:23px; }
.cards-grid .card h3{ font-size:1.12rem; margin-bottom:.4rem; }
.cards-grid .card p{ font-size:.92rem; line-height:1.55; }
.cards-grid .check-list{ gap:.5rem; margin-top:.9rem; }
.cards-grid .check-list li{ font-size:.9rem; color:var(--slate-600); align-items:center; }
.cards-grid .check-list .ico{ width:18px; height:18px; padding:4px; }
.cards-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,28px); }
.cards-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.4vw,28px); }
@media (max-width:900px){ .cards-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .cards-3,.cards-2{ grid-template-columns:1fr; } }

/* feature card with top accent */
.card--accent::before{ content:""; position:absolute; top:0;left:0;right:0; height:4px; background:var(--grad-red); transform:scaleX(0); transform-origin:left; transition:transform var(--t) var(--ease); }
.card--accent:hover::before{ transform:scaleX(1); }

/* ---------- 10. Stats band ---------- */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.stat-card{ text-align:center; padding:1.4rem 1rem; }
.stat-card b{ font-family:var(--font-display); font-size:clamp(2rem,4vw,2.8rem); background:var(--grad-red); -webkit-background-clip:text;background-clip:text;color:transparent; line-height:1; display:block; }
.bg-navy .stat-card b{ background:linear-gradient(120deg,#ff8e9a,#ffd2d7); -webkit-background-clip:text;background-clip:text;color:transparent; }
.stat-card span{ display:block; margin-top:.5rem; color:var(--slate-500); font-weight:600; font-family:var(--font-display); font-size:.95rem; }
.bg-navy .stat-card span{ color:#a9bbe0; }
@media (max-width:640px){ .stats{ grid-template-columns:1fr 1fr; } }

/* ---------- 11. Steps / how it works ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,34px); counter-reset:step; }
.step{ position:relative; padding-top:.5rem; }
.step__num{ width:54px;height:54px;border-radius:50%; display:grid;place-items:center; font-family:var(--font-display); font-weight:800; font-size:1.3rem; color:#fff; background:var(--grad-navy); box-shadow:var(--sh-blue); margin-bottom:1rem; }
.step h3{ font-size:1.25rem; margin-bottom:.4rem; }
.step__connector{ position:absolute; top:27px; left:60px; right:-20px; height:2px; background:linear-gradient(90deg,var(--slate-200),transparent); }
@media (max-width:760px){ .steps{ grid-template-columns:1fr; } .step__connector{display:none;} }

/* ---------- 12. Testimonials ---------- */
.testi{ background:#fff; border:1px solid var(--slate-100); border-radius:var(--r-lg); padding:1.8rem; box-shadow:var(--sh-sm); height:100%; display:flex; flex-direction:column; }
.testi__stars{ display:flex; gap:.15rem; color:#f5a623; margin-bottom:1rem; }
.testi__stars .ico{ width:1.15em;height:1.15em; }
.testi__quote{ color:var(--slate-700); font-size:1.05rem; line-height:1.7; flex:1; }
.testi__by{ display:flex; align-items:center; gap:.8rem; margin-top:1.4rem; }
.testi__avatar{ width:48px;height:48px;border-radius:50%; background:var(--grad-navy); color:#fff; display:grid;place-items:center; font-family:var(--font-display); font-weight:700; }
.testi__by b{ display:block; color:var(--navy); font-family:var(--font-display); }
.testi__by span{ font-size:.85rem; color:var(--slate-500); }
.testi__meta{ display:inline-flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.testi__verified{ display:inline-flex; align-items:center; gap:.25rem; color:#157a3e; font-weight:600; }
.testi__verified .ico{ width:1em; height:1em; }

/* ---------- 13. Accordion / FAQ ---------- */
.accordion{ max-width:820px; margin-inline:auto; display:flex; flex-direction:column; gap:.8rem; }
.acc{ background:#fff; border:1px solid var(--slate-100); border-radius:var(--r); box-shadow:var(--sh-xs); overflow:hidden; transition:box-shadow var(--t),border-color var(--t); }
.acc[open]{ box-shadow:var(--sh-sm); border-color:var(--slate-200); }
.acc summary{ list-style:none; cursor:pointer; padding:1.15rem 1.3rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; font-family:var(--font-display); font-weight:600; color:var(--navy); font-size:1.06rem; }
.acc summary::-webkit-details-marker{ display:none; }
.acc summary .pm{ flex:none; width:30px;height:30px;border-radius:50%; background:var(--slate-100); display:grid;place-items:center; transition:transform var(--t),background var(--t); color:var(--navy); }
.acc[open] summary .pm{ transform:rotate(45deg); background:var(--red); color:#fff; }
.acc__body{ padding:0 1.3rem 1.25rem; color:var(--slate-600); }

/* compact checkbox chips (quote-type selector) */
.chk-grid{ display:flex; flex-wrap:wrap; gap:.55rem; }
.chk{ position:relative; }
.chk input{ position:absolute; opacity:0; width:0; height:0; }
.chk span{ display:inline-flex; align-items:center; gap:.4rem; padding:.55rem 1rem; border:1.5px solid var(--slate-200); border-radius:var(--r-pill); font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--slate-600); cursor:pointer; transition:all var(--t); user-select:none; }
.chk span::before{ content:""; width:14px; height:14px; border-radius:50%; border:2px solid var(--slate-300); flex:none; transition:all var(--t); }
.chk input:checked + span{ border-color:var(--red); background:rgba(187,10,30,.06); color:var(--red); }
.chk input:checked + span::before{ border-color:var(--red); background:var(--red); box-shadow:inset 0 0 0 2px #fff; }
.chk input:focus-visible + span{ outline:3px solid var(--blue-400); outline-offset:2px; }
/* Compact quote form — smaller inputs & tighter spacing */
.quote-form .field{ margin-bottom:.7rem; gap:.25rem; }
.quote-form .field label{ font-size:.74rem; }
.quote-form input, .quote-form select, .quote-form textarea{ padding:.55rem .8rem; border-radius:10px; font-size:.95rem; }
.quote-form textarea{ min-height:64px; }
.quote-form .form-grid-2{ gap:0 .8rem; }
.quote-form > .btn{ margin-top:.4rem; }

/* Quote-type chips (questionnaire) — 2-col grid, bundles span full width */
.quote-chips{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.qchip{ position:relative; display:block; }
.qchip--wide{ grid-column:1 / -1; }
.qchip input{ position:absolute; opacity:0; width:0; height:0; }
.qchip span{
  display:flex; align-items:center; justify-content:center; gap:.5rem; text-align:center;
  padding:.55rem .8rem; min-height:42px; border:1.5px solid var(--slate-200); border-radius:var(--r-pill);
  font-family:var(--font-display); font-weight:800; font-size:.94rem; letter-spacing:.02em;
  background:#fff; cursor:pointer; transition:all var(--t) var(--ease);
}
/* Force the option words to bold red so they stand out */
.quote-form .qchip span{ color:var(--red) !important; font-weight:800; }
.quote-form .qchip input:checked + span{ color:var(--red) !important;
}
.qchip span::before{ content:""; width:14px; height:14px; border-radius:50%; border:2px solid var(--slate-300); flex:none; transition:all var(--t); }
.qchip span:hover{ border-color:var(--blue-400); }
.qchip input:checked + span{ border-color:var(--red); color:var(--red); background:rgba(187,10,30,.05); box-shadow:0 6px 16px -8px rgba(187,10,30,.45); }
.qchip input:checked + span::before{ border-color:var(--red); background:var(--red); box-shadow:inset 0 0 0 2.5px #fff; }
.qchip input:focus-visible + span{ outline:3px solid var(--blue-400); outline-offset:2px; }

/* ---------- 14. CTA band ---------- */
.cta-band{ position:relative; overflow:hidden; border-radius:var(--r-xl); background:var(--grad-red); color:#fff; padding:clamp(2.2rem,5vw,3.6rem); box-shadow:var(--sh-lg); isolation:isolate; }
.cta-band::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 80% -20%, rgba(255,255,255,.25), transparent 50%); }
.cta-band h2{ color:#fff; max-width:18ch; }
.cta-band p{ color:rgba(255,255,255,.9); margin-top:.7rem; max-width:48ch; }
.cta-band__grid{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }

/* ---------- 15. Forms ---------- */
.field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem; }
.field label{ font-family:var(--font-display); font-weight:700; font-size:.82rem; letter-spacing:.045em; text-transform:uppercase; color:var(--slate-700); }
.field .req{ color:var(--red); }
.field input,.field select,.field textarea{
  width:100%; padding:.85rem 1rem; border-radius:12px; border:1.5px solid var(--slate-200); background:#fff;
  transition:border-color var(--t), box-shadow var(--t); color:var(--ink);
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(2,79,157,.12); }
.field input::placeholder,.field textarea::placeholder{ color:var(--slate-400); }
.field .err{ color:var(--red); font-size:.84rem; }
.field input.is-invalid,.field select.is-invalid,.field textarea.is-invalid{ border-color:var(--red); box-shadow:0 0 0 4px rgba(187,10,30,.10); }
.form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.1rem; }
@media (max-width:560px){ .form-grid-2{ grid-template-columns:1fr; } }

.form-card{ background:#fff; border:1px solid var(--slate-100); border-radius:var(--r-lg); box-shadow:var(--sh-md); padding:clamp(1.5rem,3vw,2.4rem); }

/* choice tiles (radio/checkbox cards) */
.choice-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.9rem; }
.choice{ position:relative; }
.choice input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.choice__box{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.6rem; padding:1.2rem 1rem;
  border:1.5px solid var(--slate-200); border-radius:var(--r); background:#fff; transition:all var(--t); height:100%;
}
.choice__box .ico{ width:30px;height:30px; color:var(--blue); transition:color var(--t); }
.choice__box .t{ font-family:var(--font-display); font-weight:600; color:var(--navy); }
.choice__box .d{ font-size:.82rem; color:var(--slate-500); }
.choice input:checked + .choice__box{ border-color:var(--red); background:rgba(187,10,30,.04); box-shadow:var(--sh-sm); transform:translateY(-2px); }
.choice input:checked + .choice__box .ico{ color:var(--red); }
.choice input:focus-visible + .choice__box{ outline:3px solid var(--blue-400); outline-offset:2px; }
.choice__check{ position:absolute; top:.6rem; right:.6rem; width:22px;height:22px;border-radius:50%; background:var(--red); color:#fff; display:none; place-items:center; }
.choice input:checked ~ .choice__check{ display:grid; }

/* ---------- 16. Multi-step questionnaire ---------- */
.quiz{ max-width:760px; margin-inline:auto; }
.quiz__progress{ margin-bottom:2rem; }
.quiz__bar{ height:8px; background:var(--slate-200); border-radius:var(--r-pill); overflow:hidden; }
.quiz__bar i{ display:block; height:100%; width:0; background:var(--grad-red); border-radius:inherit; transition:width var(--t-slow) var(--ease); }
.quiz__meta{ display:flex; justify-content:space-between; align-items:center; margin-top:.7rem; font-family:var(--font-display); font-size:.88rem; color:var(--slate-500); font-weight:600; }
.quiz__steps-dots{ display:flex; gap:.4rem; flex-wrap:wrap; }
.quiz__dot{ width:10px;height:10px;border-radius:50%; background:var(--slate-300); transition:all var(--t); }
.quiz__dot.active{ background:var(--red); transform:scale(1.3); }
.quiz__dot.done{ background:var(--blue); }

.quiz-step{ display:none; animation:fadeUp .45s var(--ease) both; }
.quiz-step.active{ display:block; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
.quiz-step__head{ margin-bottom:1.6rem; }
.quiz-step__num{ font-family:var(--font-display); font-weight:700; color:var(--red); font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; }
.quiz-step__head h2{ font-size:clamp(1.5rem,3vw,2rem); margin-top:.3rem; }

.quiz__nav{ display:flex; justify-content:center; gap:1rem; margin-top:2rem; }
.quiz__nav .spacer{ display:none; }

.review-list{ display:grid; gap:.7rem; }
.review-item{ display:flex; justify-content:space-between; gap:1rem; padding:.9rem 1.1rem; background:var(--slate-50); border-radius:12px; border:1px solid var(--slate-100); }
.review-item .k{ color:var(--slate-500); font-weight:600; font-family:var(--font-display); font-size:.9rem; }
.review-item .v{ color:var(--navy); font-weight:600; text-align:right; }
.review-group h3{ font-size:1.05rem; margin:1.4rem 0 .6rem; color:var(--red); }

/* ---------- 17. Sticky / floating CTAs ---------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:70; transform:translateY(110%); transition:transform var(--t) var(--ease);
  background:rgba(255,255,255,.96); backdrop-filter:blur(12px); border-top:1px solid var(--slate-200); box-shadow:0 -10px 30px -12px rgba(2,31,87,.25);
  padding:.7rem var(--gutter); display:none;
}
.sticky-cta.show{ transform:translateY(0); }
.sticky-cta__in{ display:flex; align-items:center; justify-content:space-between; gap:1rem; max-width:var(--container); margin-inline:auto; }
.sticky-cta__txt b{ font-family:var(--font-display); color:var(--navy); display:block; }
.sticky-cta__txt span{ font-size:.82rem; color:var(--slate-500); }
@media (max-width:1000px){ .sticky-cta{ display:block; } .sticky-cta__txt{ display:none; } .sticky-cta .btn{ flex:1; } }

/* floating contact button */
.fab{ position:fixed; right:18px; bottom:18px; z-index:65; display:flex; flex-direction:column-reverse; align-items:flex-end; gap:.7rem; }
.fab__main{ width:60px;height:60px;border-radius:50%; background:var(--grad-red); color:#fff; display:grid;place-items:center; box-shadow:var(--sh-red); transition:transform var(--t); }
.fab__main:hover{ transform:scale(1.06) rotate(8deg); }
.fab__main .ico{ width:28px;height:28px; }
.fab__menu{ display:flex; flex-direction:column; gap:.6rem; opacity:0; transform:translateY(10px) scale(.9); pointer-events:none; transition:all var(--t) var(--ease); }
.fab.open .fab__menu{ opacity:1; transform:none; pointer-events:auto; }
.fab__item{ display:flex; align-items:center; gap:.6rem; background:#fff; color:var(--navy); padding:.6rem 1rem; border-radius:var(--r-pill); box-shadow:var(--sh-md); font-family:var(--font-display); font-weight:600; font-size:.9rem; }
.fab__item .ico{ width:1.15em;height:1.15em; color:var(--red); }
@media (max-width:1000px){ .fab{ bottom:84px; } } /* clear sticky bar */

/* pulse */
.pulse{ position:relative; }
.pulse::before{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 0 rgba(187,10,30,.5); animation:pulse 2.2s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 16px rgba(187,10,30,0);} 100%{ box-shadow:0 0 0 0 rgba(187,10,30,0);} }

/* ---------- 18. Exit-intent modal ---------- */
.modal{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:1.2rem; visibility:hidden; }
.modal__scrim{ position:absolute; inset:0; background:rgba(4,9,28,.6); opacity:0; transition:opacity var(--t); }
.modal__card{ position:relative; background:#fff; border-radius:var(--r-xl); max-width:480px; width:100%; box-shadow:var(--sh-lg); overflow:hidden; transform:translateY(16px) scale(.96); opacity:0; transition:all var(--t) var(--ease); }
.modal.open{ visibility:visible; }
.modal.open .modal__scrim{ opacity:1; }
.modal.open .modal__card{ transform:none; opacity:1; }
.modal__top{ background:var(--grad-navy-deep); color:#fff; padding:1.6rem 1.6rem 1.4rem; text-align:center; }
.modal__top h3{ color:#fff; font-size:1.5rem; }
.modal__body{ padding:1.5rem 1.6rem 1.8rem; }
.modal__close{ position:absolute; top:12px; right:12px; width:38px;height:38px;border-radius:50%; background:rgba(255,255,255,.15); color:#fff; display:grid;place-items:center; z-index:2; }

/* ---------- 19. About / split sections ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center; }
.split--reverse .split__media{ order:2; }
@media (max-width:880px){ .split{ grid-template-columns:1fr; } .split--reverse .split__media{ order:0; } }
.media-frame{ position:relative; border-radius:var(--r-xl); box-shadow:var(--sh-lg); }
.media-frame img{ width:100%; object-fit:cover; border-radius:var(--r-xl); }
.media-frame--badge::after{ content:""; }
.exp-badge{ position:absolute; right:-14px; bottom:-14px; background:var(--grad-red); color:#fff; border-radius:var(--r-lg); padding:1rem 1.3rem; box-shadow:var(--sh-red); text-align:center; }
.exp-badge b{ font-family:var(--font-display); font-size:2rem; display:block; line-height:1; }
.exp-badge span{ font-size:.78rem; letter-spacing:.04em; }

.check-list{ display:grid; gap:.85rem; margin-top:1.4rem; }
.check-list li{ display:flex; gap:.75rem; align-items:flex-start; color:var(--slate-700); }
.check-list .ico{ flex:none; width:24px;height:24px; color:#fff; background:var(--grad-navy); border-radius:50%; padding:5px; }

/* ---------- 20. Page hero (inner pages) ---------- */
.page-hero{ background:var(--grad-navy-deep); color:#fff; padding-block:clamp(56px,8vw,96px); position:relative; overflow:hidden; text-align:center; }
.page-hero::before{ content:""; position:absolute; right:-8vw; top:-10vw; width:40vw; height:40vw; background:radial-gradient(circle,rgba(2,79,157,.5),transparent 65%); }
.page-hero::after{ content:""; position:absolute; left:-8vw; bottom:-12vw; width:34vw; height:34vw; background:radial-gradient(circle,rgba(187,10,30,.22),transparent 65%); }
.page-hero h1{ color:#fff; position:relative; max-width:22ch; margin-inline:auto; }
.page-hero p{ color:#bccbea; position:relative; max-width:60ch; margin:1rem auto 0; }
.page-hero > .container > div{ margin-inline:auto; }
.page-hero .btn-row,.page-hero .chip-row,.page-hero [style*="flex"]{ justify-content:center; }
.breadcrumb{ display:flex; gap:.5rem; align-items:center; justify-content:center; font-size:.85rem; color:#9fb1d8; margin-bottom:1rem; position:relative; }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb .sep{ opacity:.5; }

/* ---------- 21. Footer ---------- */
.footer{ background:var(--grad-navy-deep); color:#aebbdd; padding-block:clamp(48px,6vw,80px) 0; position:relative; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(28px,4vw,48px); }
.footer h4{ color:#fff; font-size:1rem; margin-bottom:1.1rem; font-family:var(--font-display); }
.footer a{ color:#aebbdd; transition:color var(--t); }
.footer a:hover{ color:#fff; }
.footer__links{ display:flex; flex-direction:column; gap:.6rem; }
.footer__brand .brand__name{ color:#fff; }
.footer__brand .brand__sub{ color:#ff9aa6; }
.footer__desc{ margin:1rem 0 1.3rem; color:#9fb1d8; max-width:34ch; }
.footer__contact li{ display:flex; gap:.7rem; align-items:flex-start; margin-bottom:.8rem; }
.footer__contact .ico{ flex:none; width:1.2em;height:1.2em; color:#ff9aa6; margin-top:.2rem; }
.footer__bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:clamp(36px,5vw,56px); padding-block:1.4rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.85rem; }
.footer__bottom a:hover{ color:#fff; }
.socials{ display:flex; gap:.6rem; }
.socials .soc{ width:42px;height:42px;border-radius:11px; display:grid;place-items:center; overflow:hidden; transition:transform var(--t),box-shadow var(--t),filter var(--t); }
.socials .soc:hover{ transform:translateY(-3px); box-shadow:var(--sh); filter:brightness(1.06); }
.socials .soc .ico{ width:1.25em;height:1.25em; color:#fff; }
.soc--fb{ background:#1877F2; }
.soc--ig{ background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 70%, #285AEB 100%); }
.soc--li{ background:#0A66C2; }
.soc--farmers{ background:#fff; box-shadow:inset 0 0 0 1px var(--slate-200); }
.soc--farmers img{ width:28px;height:28px;object-fit:contain; }
@media (max-width:860px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer__grid{ grid-template-columns:1fr; } .footer__bottom{ flex-direction:column; } }

/* ---------- 22. Misc utilities & reveal ---------- */
.badge-soft{ display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .8rem; border-radius:var(--r-pill); font-size:.8rem; font-weight:600; font-family:var(--font-display); background:rgba(2,79,157,.08); color:var(--blue); }
.divider{ height:1px; background:var(--slate-100); }
.text-red{ color:var(--red); } .text-navy{ color:var(--navy); } .text-blue{ color:var(--blue); }
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-0{margin-bottom:0}.maxw-60{max-width:60ch}

.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .reveal.in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }

/* alerts */
.alert{ padding:1rem 1.2rem; border-radius:12px; display:flex; gap:.7rem; align-items:flex-start; margin-bottom:1.4rem; }
.alert--ok{ background:rgba(2,79,157,.07); color:var(--navy); border:1px solid rgba(2,79,157,.15); }
.alert--err{ background:rgba(187,10,30,.06); color:var(--red-700); border:1px solid rgba(187,10,30,.18); }
.alert .ico{ flex:none; width:1.3em;height:1.3em; margin-top:.1rem; }

/* skip link */
.skip-link{ position:absolute; left:-999px; top:0; background:#fff; color:var(--navy); padding:.7rem 1rem; z-index:100; border-radius:0 0 8px 0; }
.skip-link:focus{ left:0; }

/* print-friendly thankyou */
.thanks-icon{ width:96px;height:96px;border-radius:50%; background:var(--grad-navy); color:#fff; display:grid;place-items:center; margin:0 auto 1.5rem; box-shadow:var(--sh-blue); animation:pop .5s var(--ease) both; }
.thanks-icon .ico{ width:48px;height:48px; }
@keyframes pop{ 0%{ transform:scale(.6); opacity:0;} 60%{ transform:scale(1.08);} 100%{ transform:scale(1); opacity:1;} }

/* ---------- Before / After comparison ---------- */
.vs-grid{ display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(14px,2vw,26px); align-items:center; max-width:1040px; margin-inline:auto; }
.vs-card{ border-radius:var(--r-lg); padding:clamp(1.3rem,2.2vw,1.9rem); height:100%; }
.vs-card--before{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); }
.vs-card--after{ background:linear-gradient(160deg, rgba(187,10,30,.20), rgba(2,79,157,.14)); border:1.5px solid rgba(255,154,166,.45); box-shadow:var(--sh-red); }
.vs-card__title{ font-family:var(--font-display); font-weight:800; font-size:1.2rem; margin-bottom:1.1rem; display:flex; align-items:center; gap:.55rem; letter-spacing:-.01em; }
.vs-card--before .vs-card__title{ color:#9fb1d8; }
.vs-card--after .vs-card__title{ color:#fff; }
.vs-card--after .vs-card__title .tag{ font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; background:var(--grad-red); color:#fff; padding:.22rem .6rem; border-radius:var(--r-pill); }
.vs-list li{ display:flex; align-items:flex-start; gap:.75rem; padding:.78rem 0; font-size:1.02rem; line-height:1.4; }
.vs-list li + li{ border-top:1px solid rgba(255,255,255,.08); }
.vs-card--before .vs-list li{ color:#aebbdd; }
.vs-card--after .vs-list li{ color:#fff; font-weight:500; }
.vs-emoji{ font-size:1.25rem; flex:none; }
.vs-mid{ display:grid; place-items:center; }
.vs-arrow{ width:56px;height:56px;border-radius:50%; background:var(--grad-red); color:#fff; display:grid;place-items:center; box-shadow:var(--sh-red); }
.vs-arrow .ico{ width:26px;height:26px; }
@media (max-width:760px){
  .vs-grid{ grid-template-columns:1fr; }
  .vs-mid{ padding:.2rem 0; }
  .vs-arrow{ transform:rotate(90deg); width:48px;height:48px; }
}

/* ============================================================
   MOBILE: center headings & subtext, slightly larger, tidy hero
   ============================================================ */
@media (max-width: 768px){
  /* Prevent any horizontal overflow on small screens */
  html, body{ overflow-x:hidden; }

  /* Center all section headings + copy */
  .section-head{ text-align:center; }

  /* Hero — stack as simple blocks (no grid sizing quirks), centered */
  .hero__grid{ display:block; text-align:center; padding-block:clamp(20px,5vw,40px) clamp(36px,7vw,56px); }
  .hero__copy{ text-align:center; width:100%; max-width:100%; }
  .hero__badges{ justify-content:center; }
  .hero__badges .chip{ font-size:.78rem; }
  .hero h1{ font-size:clamp(2rem, 8vw, 2.7rem); overflow-wrap:break-word; }
  .hero__lead{ margin-inline:auto; font-size:1.12rem; max-width:38ch; overflow-wrap:break-word; }
  .hero__list{ justify-content:center; display:inline-grid; }
  .hero__cta.btn-row{ justify-content:center; }
  .hero__trust{ justify-content:center; gap:1rem; }
  .hero__trust .stat b{ font-size:1.45rem; }
  .hero__media{ width:100%; max-width:400px; margin:2rem auto 0; }

  /* Split sections (About, product detail, etc.) — center text on mobile */
  .split__copy{ text-align:center; }
  .split__copy .eyebrow{ margin-inline:auto; }
  .split__copy .btn-row{ justify-content:center; }
  .split__copy .check-list{ display:inline-block; text-align:left; margin-inline:auto; }

  /* Slightly larger, balanced headings on mobile */
  h1{ font-size:clamp(2.2rem, 8.5vw, 2.9rem); }
  h2{ font-size:clamp(1.85rem, 7vw, 2.3rem); }
  .lead,.section-head .lead{ font-size:1.12rem; }

  /* Page (inner) hero already centered — ensure subtext readable */
  .page-hero p{ font-size:1.1rem; }

  /* CTA band stacks centered */
  .cta-band__grid{ justify-content:center; text-align:center; }
  .cta-band .btn-row{ justify-content:center; }

  /* Compact questionnaire / quote choice tiles on mobile */
  .form-card{ padding:1.1rem; }
  .choice-grid{ gap:.55rem; grid-template-columns:1fr 1fr; }
  .choice__box{ padding:.8rem .5rem; gap:.4rem; border-radius:12px; }
  .choice__box .ico{ width:22px; height:22px; }
  .choice__box .t{ font-size:.86rem; line-height:1.2; }
  .choice__box .d{ font-size:.74rem; }
  .choice__check{ width:18px; height:18px; top:.45rem; right:.45rem; }
  .quiz-step__head h2{ font-size:1.4rem; }
  .quiz-step__head p{ font-size:.95rem; }
}

/* ---------- Hero lead form (form built into the hero) ---------- */
.hero__grid--form{ align-items:start; }
.hero__media.hero__media--form{ max-width:none; }
.hero-form{ position:relative; text-align:left; }
.hero-form__badge{ display:inline-block; background:var(--red); color:#fff; font-family:var(--font-display);
  font-weight:800; font-size:.78rem; letter-spacing:.03em; padding:.42rem .9rem; border-radius:var(--r-pill);
  margin-bottom:1rem; box-shadow:var(--sh-sm); }
.hero-form__head{ display:flex; align-items:center; gap:.7rem; margin-bottom:1rem; }
.hero-form__avatar{ width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid var(--red); flex:none; }
.hero-form__agent{ font-family:var(--font-display); font-weight:800; color:var(--navy); line-height:1.15; }
.hero-form__role{ font-size:.78rem; color:var(--slate-500); }
.hero-form__title{ font-size:clamp(1.45rem,2.3vw,1.9rem); color:var(--navy); line-height:1.15; margin:0 0 .3rem; }
.hero-form__sub{ color:var(--slate-600); font-size:.96rem; margin:0 0 1.3rem; }

/* "Just give us a phone or email" hint under the contact fields */
.form-hint{ background:rgba(187,10,30,.06); border:1px solid rgba(187,10,30,.16); color:#222 !important;
  font-size:.88rem; line-height:1.5; border-radius:var(--r); padding:.7rem .9rem; margin:.2rem 0 1.1rem; }
.form-hint strong{ color:#222 !important; }
.form-hint .ico{ color:var(--red) !important; }

/* Light-blue highlight box to make the "what do you need a quote for" pop */
.quote-form .field--highlight{
  background:#e8f2ff; border:1px solid #bcd8fb; border-radius:14px;
  padding:1rem 1rem .85rem; margin-bottom:1.1rem; box-shadow:0 2px 10px rgba(2,79,157,.08);
}

/* Numbered yellow badges on each quote-form field so people know the order */
.quote-form{ counter-reset: qnum; }
.quote-form .field{ counter-increment: qnum; }
.quote-form .field > label{ display:flex; align-items:center; gap:.5rem; color:var(--red) !important; font-weight:800; font-size:.85rem; letter-spacing:.03em; }
.quote-form .field > label::before{
  content: counter(qnum); flex:none;
  display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:#FFD400; color:#7a1212; font-weight:900; font-size:1.05rem; line-height:1;
  box-shadow:0 2px 0 #c9a900;
}

/* Huge CTA button + animated "CLICK HERE" indicator */
.btn--huge{ padding:1.25rem 2.7rem; font-size:1.22rem; border-radius:var(--r-pill); font-weight:800; letter-spacing:.02em; }
.cta-wrap{ display:inline-flex; flex-direction:column; align-items:center; gap:.4rem; }
.click-here{ display:inline-flex; align-items:center; gap:.35rem; color:#ffd2d7; font-family:var(--font-display);
  font-weight:800; font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; animation:bob 1.3s var(--ease) infinite; }
.click-here .ico{ transform:rotate(90deg); width:1em; height:1em; }
@keyframes bob{ 0%,100%{ transform:translateY(0); opacity:.85; } 50%{ transform:translateY(4px); opacity:1; } }
.btn--pulse{ animation:btnpulse 1.9s ease-out infinite; }
@keyframes btnpulse{ 0%{ box-shadow:0 0 0 0 rgba(187,10,30,.55); } 70%{ box-shadow:0 0 0 16px rgba(187,10,30,0); } 100%{ box-shadow:0 0 0 0 rgba(187,10,30,0); } }

@media (max-width:880px){
  .hero__grid--form{ align-items:center; }
  .hero__media.hero__media--form{ max-width:560px; margin-inline:auto; }
}
@media (max-width:768px){
  .hero__media.hero__media--form{ max-width:100%; margin-top:1.6rem; }
  /* Center only the form's header on mobile; keep fields left-aligned. */
  .hero-form__head{ justify-content:center; }
  .hero-form__title, .hero-form__sub{ text-align:center; }
  .cta-wrap{ display:flex; width:100%; }
  .btn--huge{ width:100%; justify-content:center; }
}

/* ---------- Aggressive welcome popup ---------- */
.qpop{ position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; padding:20px; }
.qpop.is-open{ display:flex; }
.qpop__backdrop{ position:absolute; inset:0; background:rgba(8,15,40,.74); backdrop-filter:blur(3px); }
.qpop__card{
  position:relative; z-index:1; width:100%; max-width:430px; text-align:center;
  background:linear-gradient(180deg,#fffbe6,#ffffff); border:5px solid #BB0A1E; border-radius:22px;
  box-shadow:0 26px 70px rgba(0,0,0,.45); padding:2.1rem 1.6rem 1.5rem;
  animation: qpopIn .35s var(--ease), qshake 2.2s ease-in-out 1s infinite;
}
@keyframes qpopIn{ 0%{ transform:scale(.82) translateY(24px); opacity:0; } 100%{ transform:scale(1) translateY(0); opacity:1; } }
@keyframes qshake{
  0%,88%,100%{ transform:translateX(0) rotate(0); }
  90%{ transform:translateX(-7px) rotate(-1.2deg); }
  92%{ transform:translateX(7px) rotate(1.2deg); }
  94%{ transform:translateX(-5px) rotate(-.8deg); }
  96%{ transform:translateX(5px) rotate(.8deg); }
  98%{ transform:translateX(-2px) rotate(0); }
}
.qpop__x{ position:absolute; top:8px; right:14px; background:none; border:0; font-size:2rem; line-height:1; color:#b0392f; cursor:pointer; }
.qpop__badge{
  display:inline-block; background:#FFD400; color:#7a1212; font-family:var(--font-display); font-weight:800;
  font-size:.82rem; letter-spacing:.05em; padding:.45rem 1.05rem; border-radius:999px; margin-bottom:1rem;
  box-shadow:0 3px 0 #c9a900; animation: qbadge 1.1s ease-in-out infinite;
}
@keyframes qbadge{ 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-3px) rotate(2deg); } }
.qpop__title{ font-family:var(--font-display); font-weight:900; color:var(--navy); font-size:1.85rem; line-height:1.1; margin:0 0 .6rem; letter-spacing:-.01em; }
.qpop__title span{ color:#BB0A1E; }
.qpop__sub{ color:var(--slate-700); font-size:1.02rem; line-height:1.5; margin:0 0 1.4rem; }
.qpop__cta{
  display:block; background:linear-gradient(90deg,#BB0A1E,#e11d2a); color:#fff; font-family:var(--font-display);
  font-weight:900; font-size:1.22rem; letter-spacing:.01em; padding:1.1rem 1rem; border-radius:999px; text-decoration:none;
  border:3px solid #FFD400; box-shadow:0 8px 0 #7a0813; animation: qcta 1s ease-in-out infinite;
}
@keyframes qcta{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
.qpop__cta:active{ transform:translateY(4px); box-shadow:0 4px 0 #7a0813; }
.qpop__dismiss{ display:block; margin:.95rem auto 0; background:none; border:0; color:#9aa3b2; font-size:.85rem; cursor:pointer; text-decoration:underline; }
@media (max-width:480px){
  .qpop__title{ font-size:1.55rem; }
  .qpop__cta{ font-size:1.06rem; }
  .qpop__card{ padding:1.8rem 1.2rem 1.3rem; }
}
@media (prefers-reduced-motion: reduce){
  .qpop__card, .qpop__badge, .qpop__cta{ animation: none; }
}

/* Big yellow "please complete to get a quote" banner on the form */
.form-flag{
  display:flex; align-items:center; justify-content:center; gap:.5rem; text-align:center;
  background:#FFD400; color:#7a1212; font-family:var(--font-display); font-weight:900;
  font-size:clamp(1rem,2.2vw,1.22rem); letter-spacing:.02em; text-transform:uppercase;
  padding:.9rem 1rem; border-radius:12px; margin-bottom:1.5rem; border:2px dashed #BB0A1E;
  box-shadow:0 3px 0 #c9a900; animation: flagpulse 1.3s ease-in-out infinite;
}
@keyframes flagpulse{
  0%,100%{ transform:scale(1); box-shadow:0 3px 0 #c9a900; }
  50%{ transform:scale(1.025); box-shadow:0 6px 16px rgba(187,10,30,.28); }
}
@media (prefers-reduced-motion: reduce){ .form-flag{ animation:none; } }

/* Red-and-blue Farmers frame that runs across the corners of the quote form */
.form-card--framed{
  border:5px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,#BB0A1E 0%,#BB0A1E 28%,#7d1560 50%,#024F9D 72%,#024F9D 100%) border-box;
  box-shadow:0 18px 46px -22px rgba(2,31,87,.5);
}

/* Small grey helper line under a field (State note, upload note) */
.field-note{ font-size:.8rem; color:var(--slate-500); line-height:1.4; }
.field-note strong{ color:var(--slate-700); }

/* Read-only "State = Michigan" field */
.input--fixed{ background:var(--slate-100) !important; color:var(--navy) !important; font-weight:700; cursor:default; }
.input--fixed:focus{ box-shadow:none !important; border-color:var(--slate-200) !important; }

/* File upload — dark-blue "Choose Files" button + filename */
.input--file{ padding:.55rem .7rem !important; background:#f7f9fc !important; cursor:pointer; font-size:.92rem; color:var(--slate-600); }
.input--file::-webkit-file-upload-button{
  margin-right:.9rem; padding:.6rem 1.15rem; border:0; border-radius:8px;
  background:var(--navy); color:#fff; font-weight:700; font-family:inherit; cursor:pointer;
  -webkit-transition:background var(--t); transition:background var(--t);
}
.input--file::file-selector-button{
  margin-right:.9rem; padding:.6rem 1.15rem; border:0; border-radius:8px;
  background:var(--navy); color:#fff; font-weight:700; font-family:inherit; cursor:pointer;
  transition:background var(--t);
}
.input--file::-webkit-file-upload-button:hover{ background:#012a6b; }
.input--file::file-selector-button:hover{ background:#012a6b; }