/* ===========================================================
   Jesse Dryer Agency — Home Insurance Funnel
   Brand: trustworthy navy + warm amber accent
   Mobile-first
   =========================================================== */

:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2rem);
  --text-2xl: clamp(1.875rem, 1.3rem + 2.4vw, 3rem);

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

  /* Brand palette */
  --color-bg:#ffffff;
  --color-surface:#ffffff;
  --color-surface-2:#f4f6f9;
  --color-surface-offset:#eef1f6;
  --color-border:#dce1ea;
  --color-divider:#e7ebf1;

  --color-text:#13243a;
  --color-text-muted:#5a6b81;
  --color-text-faint:#9aa6b6;
  --color-text-inverse:#ffffff;

  /* Primary = deep navy (trust) */
  --color-primary:#0b2d4d;
  --color-primary-hover:#093b66;
  --color-primary-soft:#e8eef6;

  /* Accent = warm amber/gold CTA */
  --color-accent:#f6a623;
  --color-accent-hover:#e8951a;
  --color-accent-active:#d4860f;

  /* Success / call green */
  --color-success:#1f9d57;
  --color-success-hover:#188048;

  --radius-sm:.5rem; --radius-md:.75rem; --radius-lg:1rem; --radius-xl:1.25rem;
  --radius-full:9999px;
  --transition-interactive:180ms cubic-bezier(.16,1,.3,1);
  --shadow-sm:0 1px 3px rgba(19,36,58,.08);
  --shadow-md:0 6px 20px rgba(19,36,58,.10);
  --shadow-lg:0 16px 44px rgba(19,36,58,.16);

  --font-display:'Clash Display','Inter',system-ui,sans-serif;
  --font-body:'Satoshi','Inter',system-ui,sans-serif;

  --content:560px;
}

html { scroll-behavior:smooth; }
[hidden] { display:none !important; }
body { font-family:var(--font-body); background:var(--color-surface-2); color:var(--color-text); }

/* ===================== BUTTONS ===================== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font-family:var(--font-body); font-weight:700; font-size:var(--text-base);
  border-radius:var(--radius-md); padding:var(--space-4) var(--space-6);
  line-height:1.1; text-decoration:none; border:none; cursor:pointer;
  transition:transform var(--transition-interactive), background var(--transition-interactive), box-shadow var(--transition-interactive);
}
.btn:active { transform:translateY(1px) scale(.995); }
.btn-primary { background:var(--color-accent); color:#3a2a00; box-shadow:0 4px 14px rgba(246,166,35,.35); }
.btn-primary:hover { background:var(--color-accent-hover); }
.btn-call { background:var(--color-success); color:#fff; box-shadow:0 6px 18px rgba(31,157,87,.35); font-size:var(--text-lg); padding:var(--space-5) var(--space-6); }
.btn-call:hover { background:var(--color-success-hover); }
.btn-block { width:100%; }

/* ===================== HEADER ===================== */
.site-header {
  position:sticky; top:0; z-index:50;
  background:var(--color-primary); color:#fff;
}
.header-inner {
  max-width:1100px; margin:0 auto; padding:var(--space-3) var(--space-4);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
}
.brand { display:flex; align-items:center; gap:var(--space-3); color:#fff; text-decoration:none; }
.brand-mark { color:#fff; flex-shrink:0; width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.85); box-shadow:0 2px 8px rgba(0,0,0,.25); }
.brand-text { display:flex; flex-direction:column; line-height:1.1; }
.brand-name { font-family:var(--font-display); font-weight:600; font-size:var(--text-base); letter-spacing:.01em; }
.brand-tag { font-size:11px; color:#9fc0e0; font-weight:500; }
.header-call {
  display:inline-flex; align-items:center; gap:var(--space-2);
  color:#fff; text-decoration:none; font-weight:700; font-size:var(--text-sm);
  background:rgba(255,255,255,.12); padding:var(--space-2) var(--space-3); border-radius:var(--radius-full);
}
.header-call:hover { background:rgba(255,255,255,.22); }
.header-call span { display:none; }
@media (min-width:480px){ .header-call span { display:inline; } }

/* ===================== HERO ===================== */
.hero { position:relative; overflow:hidden; background:var(--color-primary); }
.hero-bg {
  position:absolute; inset:0; background-size:cover; background-position:center bottom;
}
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,45,77,.86) 0%, rgba(11,45,77,.78) 45%, rgba(11,45,77,.92) 100%);
}
.hero-content {
  position:relative; z-index:2; max-width:var(--content); margin:0 auto;
  padding:var(--space-10) var(--space-4) var(--space-8);
  text-align:center; color:#fff;
}
.hero-eyebrow {
  display:inline-block; font-size:var(--text-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--color-accent); background:rgba(246,166,35,.12); border:1px solid rgba(246,166,35,.35);
  padding:var(--space-1) var(--space-3); border-radius:var(--radius-full); margin-bottom:var(--space-4);
}
.hero-title {
  font-family:var(--font-display); font-weight:600; font-size:var(--text-2xl);
  line-height:1.08; margin-bottom:var(--space-3); text-wrap:balance;
}
.hero-sub { color:#cdddec; font-size:var(--text-base); margin:0 auto var(--space-6); max-width:38ch; }

/* ZIP card */
.zip-card {
  background:#fff; border-radius:var(--radius-lg); padding:var(--space-5);
  box-shadow:var(--shadow-lg); text-align:left;
}
.zip-label { display:block; font-weight:700; color:var(--color-text); font-size:var(--text-sm); margin-bottom:var(--space-3); text-align:center; }
.zip-row { display:flex; flex-direction:column; gap:var(--space-3); }
.zip-input {
  width:100%; text-align:center; font-size:var(--text-xl); font-weight:700; letter-spacing:.25em;
  padding:var(--space-4); border:2px solid var(--color-border); border-radius:var(--radius-md);
  background:var(--color-surface-2); color:var(--color-text);
}
.zip-input:focus { outline:none; border-color:var(--color-primary); background:#fff; }
.zip-input::placeholder { letter-spacing:.25em; color:var(--color-text-faint); }
.zip-btn { width:100%; }

.hero-trust {
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-4);
  margin-top:var(--space-6); padding:0;
}
.hero-trust li {
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:var(--text-sm); color:#cdddec; font-weight:500;
}
.hero-trust svg { width:16px; height:16px; color:var(--color-accent); flex-shrink:0; }

.hero-agent {
  display:flex; align-items:center; gap:var(--space-3);
  margin:var(--space-6) auto 0; max-width:380px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg); padding:var(--space-3) var(--space-4); text-align:left;
}
.hero-agent img {
  width:64px; height:64px; border-radius:var(--radius-full); object-fit:cover; object-position:top center;
  border:2px solid var(--color-accent); flex-shrink:0;
}
.hero-agent-text { font-size:var(--text-sm); color:#cdddec; margin:0; font-weight:500; }

/* Proof bar */
.proof-bar { position:relative; z-index:2; background:rgba(255,255,255,.06); border-top:1px solid rgba(255,255,255,.12); backdrop-filter:blur(4px); }
.proof-inner {
  max-width:var(--content); margin:0 auto; padding:var(--space-5) var(--space-4);
  display:flex; align-items:center; justify-content:center; gap:var(--space-5); text-align:center;
}
.proof-stat { display:flex; flex-direction:column; gap:2px; }
.proof-num { font-family:var(--font-display); font-weight:700; font-size:var(--text-lg); color:var(--color-accent); }
.proof-cap { font-size:var(--text-xs); color:#bcd0e4; max-width:22ch; }
.proof-divider { width:1px; align-self:stretch; background:rgba(255,255,255,.18); }

/* ===================== REVIEWS / SOCIAL PROOF ===================== */
.reviews { background:var(--color-surface-2); padding:var(--space-10) var(--space-4) var(--space-12); }
.reviews-inner { max-width:var(--content); margin:0 auto; }
.reviews-head { text-align:center; margin-bottom:var(--space-8); }
.g-logo { display:inline-block; margin-bottom:var(--space-2); }
.reviews-rating { display:flex; align-items:center; justify-content:center; gap:var(--space-2); margin-bottom:var(--space-1); }
.reviews-score { font-family:var(--font-display); font-weight:700; font-size:var(--text-xl); color:var(--color-text); line-height:1; }
.reviews-stars { color:#fbbc05; font-size:var(--text-lg); letter-spacing:1px; }
.reviews-count { font-size:var(--text-sm); font-weight:600; color:var(--color-text-muted); }
.reviews-grid { display:grid; gap:var(--space-4); }
.review-card {
  background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:var(--space-5); box-shadow:var(--shadow-sm); margin:0;
}
.review-stars { color:#fbbc05; font-size:var(--text-base); letter-spacing:1px; margin-bottom:var(--space-3); }
.review-card blockquote { margin:0 0 var(--space-3); font-size:var(--text-sm); line-height:1.55; color:var(--color-text); }
.review-card figcaption { font-size:var(--text-sm); font-weight:700; color:var(--color-text-muted); }
@media (min-width:720px){ .reviews-grid { grid-template-columns:repeat(3,1fr); } }

/* ===================== WIZARD ===================== */
.wizard { min-height:100dvh; background:var(--color-surface-2); display:flex; flex-direction:column; }
.wiz-bar {
  max-width:var(--content); width:100%; margin:0 auto;
  padding:var(--space-4) var(--space-4) var(--space-2);
  display:flex; align-items:center; justify-content:space-between;
}
.wiz-back, .wiz-help {
  display:inline-flex; align-items:center; gap:var(--space-1);
  background:none; border:none; color:var(--color-text-muted);
  font-weight:600; font-size:var(--text-sm); cursor:pointer; text-decoration:none;
  padding:var(--space-2); border-radius:var(--radius-sm);
}
.wiz-back:hover, .wiz-help:hover { color:var(--color-primary); background:var(--color-surface-offset); }

.wiz-progress { max-width:var(--content); width:100%; margin:0 auto; padding:0 var(--space-4) var(--space-4); }
.wiz-progress-track { height:8px; background:var(--color-surface-offset); border-radius:var(--radius-full); overflow:hidden; }
.wiz-progress-fill {
  height:100%; width:4%; border-radius:var(--radius-full);
  background:linear-gradient(90deg, var(--color-success), #34c878);
  transition:width 420ms cubic-bezier(.16,1,.3,1);
}
.wiz-progress-meta { display:flex; justify-content:space-between; margin-top:var(--space-2); font-size:var(--text-xs); color:var(--color-text-muted); font-weight:600; }

.wiz-stage { max-width:var(--content); width:100%; margin:0 auto; padding:var(--space-4) var(--space-4) var(--space-16); flex:1; }

/* Step */
.step { animation:stepIn 280ms cubic-bezier(.16,1,.3,1); }
@keyframes stepIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.step-headline {
  font-family:var(--font-display); font-weight:600; font-size:var(--text-xl);
  line-height:1.15; text-align:center; margin-bottom:var(--space-2);
}
.step-sub { text-align:center; color:var(--color-text-muted); font-size:var(--text-sm); margin-bottom:var(--space-6); }
.step-sub.spacer { margin-bottom:var(--space-6); }

/* Tile choices */
.tiles { display:grid; gap:var(--space-3); }
.tiles.cols-2 { grid-template-columns:repeat(2,1fr); }
.tiles.cols-1 { grid-template-columns:1fr; }
.tile {
  background:#fff; border:2px solid var(--color-border); border-radius:var(--radius-md);
  padding:var(--space-5) var(--space-4); font-weight:700; font-size:var(--text-base);
  color:var(--color-text); cursor:pointer; text-align:center; min-height:60px;
  display:flex; align-items:center; justify-content:center;
  transition:border-color var(--transition-interactive), background var(--transition-interactive), transform var(--transition-interactive), box-shadow var(--transition-interactive);
}
.tile:hover { border-color:var(--color-primary); box-shadow:var(--shadow-sm); }
.tile.selected { border-color:var(--color-primary); background:var(--color-primary-soft); }
.tile:active { transform:scale(.985); }

/* Carrier dropdown */
.browse-more { margin-top:var(--space-4); }
.browse-more label { display:block; font-size:var(--text-sm); font-weight:600; color:var(--color-text-muted); margin-bottom:var(--space-2); }
select.field {
  width:100%; padding:var(--space-4); border:2px solid var(--color-border); border-radius:var(--radius-md);
  background:#fff; font-size:var(--text-base); color:var(--color-text); appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235a6b81' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--space-4) center;
}
select.field:focus { outline:none; border-color:var(--color-primary); }

/* Text inputs */
.field-group { display:flex; flex-direction:column; gap:var(--space-4); }
.field-label { display:block; font-size:var(--text-sm); font-weight:600; margin-bottom:var(--space-2); color:var(--color-text); }
.field {
  width:100%; padding:var(--space-4); border:2px solid var(--color-border); border-radius:var(--radius-md);
  background:#fff; font-size:var(--text-base); color:var(--color-text);
}
.field:focus { outline:none; border-color:var(--color-primary); }
.field::placeholder { color:var(--color-text-faint); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
.dob-row { display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:var(--space-3); }
.dob-row .field { text-align:center; }
.autofill-city { font-size:var(--text-sm); font-weight:700; color:var(--color-primary); margin-top:var(--space-2); min-height:1.2em; }

.field-error { color:#c0392b; font-size:var(--text-sm); font-weight:600; margin-top:var(--space-2); }
.zip-card .field-error { text-align:center; margin-top:var(--space-3); }

/* Continue button area */
.step-actions { margin-top:var(--space-6); }
.consent {
  font-size:12px; line-height:1.6; color:var(--color-text-muted); margin-top:var(--space-4); text-align:center;
}
.consent strong { color:var(--color-text); }

/* Reassurance strip under steps */
.step-reassure {
  display:flex; align-items:center; justify-content:center; gap:var(--space-2);
  margin-top:var(--space-6); font-size:var(--text-xs); color:var(--color-text-faint); font-weight:600;
}
.step-reassure svg { width:14px; height:14px; color:var(--color-success); }

/* ===================== THANK YOU ===================== */
.thankyou { min-height:100dvh; display:flex; align-items:flex-start; justify-content:center; padding:var(--space-12) var(--space-4); background:var(--color-surface-2); }
.ty-card { max-width:var(--content); width:100%; text-align:center; background:#fff; border-radius:var(--radius-xl); padding:var(--space-8) var(--space-5) var(--space-6); box-shadow:var(--shadow-md); }
.ty-check {
  width:72px; height:72px; margin:0 auto var(--space-5); border-radius:var(--radius-full);
  background:var(--color-success); color:#fff; display:flex; align-items:center; justify-content:center;
  animation:pop 420ms cubic-bezier(.16,1,.3,1);
}
.ty-check svg { width:38px; height:38px; }
@keyframes pop { 0%{ transform:scale(0); } 70%{ transform:scale(1.12); } 100%{ transform:scale(1); } }
.ty-title { font-family:var(--font-display); font-weight:600; font-size:var(--text-2xl); margin-bottom:var(--space-3); }
.ty-sub { color:var(--color-text-muted); margin:0 auto var(--space-6); max-width:42ch; }
.ty-call { width:100%; }
.ty-hours { font-size:var(--text-sm); color:var(--color-text-faint); margin-top:var(--space-3); }
.ty-agents { display:flex; justify-content:center; gap:var(--space-3); margin-top:var(--space-8); }
.ty-agents img { width:84px; height:84px; border-radius:var(--radius-full); object-fit:cover; object-position:top center; border:3px solid var(--color-surface-offset); box-shadow:var(--shadow-sm); }

/* ===================== FOOTER ===================== */
.site-footer { background:var(--color-primary); color:#bcd0e4; }
.footer-inner { max-width:var(--content); margin:0 auto; padding:var(--space-8) var(--space-4); text-align:center; }
.footer-brand { font-family:var(--font-display); font-weight:600; color:#fff; font-size:var(--text-lg); margin-bottom:var(--space-3); }
.footer-disc { font-size:11px; line-height:1.6; color:#84a3c2; margin:0 auto var(--space-4); max-width:60ch; }
.footer-copy { font-size:var(--text-xs); color:#6e90b0; }

/* ===================== RESPONSIVE ===================== */
@media (min-width:560px){
  .zip-row { flex-direction:row; }
  .zip-input { flex:1; }
  .zip-btn { width:auto; flex-shrink:0; }
  .hero-content { padding-top:var(--space-16); padding-bottom:var(--space-12); }
}
@media (max-width:380px){
  .proof-inner { flex-direction:column; gap:var(--space-3); }
  .proof-divider { display:none; }
}

/* Loading spinner */
.btn.is-loading { position:relative; color:transparent !important; pointer-events:none; }
.btn.is-loading::after {
  content:""; position:absolute; width:20px; height:20px; border-radius:50%;
  border:2.5px solid rgba(0,0,0,.25); border-top-color:#3a2a00; animation:spin .7s linear infinite;
}
.btn-call.is-loading::after { border-color:rgba(255,255,255,.4); border-top-color:#fff; }
@keyframes spin { to { transform:rotate(360deg); } }