/* ============================================================
   Leslie's Insurance — Shared Site Styles
   Extracted from index.html so /about/ and /sr-22-santa-ana/
   (and future pages) match the homepage exactly.
   Edit variables/components here; page-specific styles stay
   in each page's own <style> block.
   ============================================================ */
  :root{
    --navy:#1c3a4a;
    --navy-deep:#152a37;
    --red:#d6303c;
    --red-deep:#b8232d;
    --citrus:#f4a125;
    --citrus-deep:#e08e12;
    --terracotta:#c8683f;
    --peach:#f6c9a0;
    --cream:#fdf3e2;
    --cream-warm:#f6e2bd;
    --leaf:#2c4a45;
    --white:#fffdf8;
    --ink:#2a231c;
    --ink-soft:#5c5147;
    --line: rgba(120,72,30,0.16);
    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 12px;
    --shadow-soft: 0 14px 32px -16px rgba(120,64,20,0.28);
    --shadow-pop: 0 22px 46px -18px rgba(120,64,20,0.35);
    --font-display: 'Fraunces', serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-script: 'Caveat', cursive;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:var(--font-body);
    background:
      radial-gradient(620px 420px at 10% -8%, rgba(246,201,160,.45), transparent 60%),
      radial-gradient(680px 460px at 100% 8%, rgba(244,161,37,.16), transparent 55%),
      var(--cream);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  button{font-family:inherit; cursor:pointer;}
  a{color:inherit;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 20px;}
  .eyebrow{
    font-family:var(--font-body); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    font-size:.72rem; color:var(--red);
  }
  h1,h2,h3{font-family:var(--font-display); margin:0; color:var(--navy); font-weight:600;}
  .script-accent{font-family:var(--font-script); font-weight:700; color:var(--red);}

  /* ---------- Wave divider (signature motif) ---------- */
  .wave-divider{width:100%; height:46px; display:block;}
  .wave-divider path{fill:var(--cream);}
  .wave-divider.into-navy path{fill:var(--navy);}
  .wave-divider.into-cream path{fill:var(--cream);}
  .wave-divider.flip{transform:scaleY(-1);}

  /* ---------- Header ---------- */
  header.site{
    position:sticky; top:0; z-index:40;
    background:rgba(251,243,228,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .header-inner{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 20px;}
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
  .brand img{height:44px; width:auto; border-radius:10px;}
  .brand-text{display:flex; flex-direction:column; line-height:1;}
  .brand-text b{font-family:var(--font-display); font-size:1.15rem; color:var(--navy);}
  .brand-text span{font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--red); font-weight:700;}
  .header-actions{display:flex; align-items:center; gap:8px;}
  .header-nav{display:none; align-items:center; gap:22px; margin:0 auto;}
  .header-nav a{color:var(--navy); font-weight:700; font-size:.92rem; text-decoration:none;}
  .header-nav a:hover{color:var(--red);}
  @media(min-width:860px){.header-nav{display:flex;}}
  .foot-links{display:flex; gap:16px; flex-wrap:wrap; font-size:.82rem; margin-top:10px;}
  .foot-links a{color:var(--cream); opacity:.85; text-decoration:none;}
  .foot-links a:hover{opacity:1; text-decoration:underline;}
  .lang-toggle{
    display:flex; background:var(--white); border:1px solid var(--line); border-radius:999px; padding:3px; gap:2px;
  }
  .lang-toggle button{
    border:none; background:transparent; padding:6px 12px; border-radius:999px; font-weight:700; font-size:.78rem;
    color:var(--ink-soft); transition:.2s;
  }
  .lang-toggle button.active{background:var(--navy); color:var(--white);}
  .icon-btn{
    display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%;
    border:1px solid var(--line); background:var(--white); color:var(--navy); text-decoration:none;
  }
  .icon-btn.whatsapp{background:#25D366; border-color:#25D366; color:#fff;}
  .icon-btn svg{width:18px; height:18px;}

  /* ---------- Hero + Quote (merged, above the fold) ---------- */
  .hero{position:relative; padding:20px 0 0; overflow:hidden;
    background: radial-gradient(900px 500px at 85% -10%, rgba(246,201,160,.55), transparent 60%);
  }
  .hero-grid{display:grid; grid-template-columns:1fr; gap:28px; align-items:start;}

  /* -- quote card, first thing on the page -- */
  .hero-quote-wrap .wizard-card{margin:0 auto;}
  .wizard-intro{padding:24px 24px 4px;}
  .wizard-intro .eyebrow{display:block;}
  .wizard-intro h1{font-size:1.5rem; line-height:1.12; letter-spacing:-.01em; margin-top:8px;}
  .wizard-intro .lead-mini{color:var(--ink-soft); font-size:.9rem; line-height:1.5; margin-top:10px;}

  /* -- side column: brand art + trust -- */
  .hero-side{display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; padding-top:6px;}
  .tag{font-family:var(--font-script); font-size:1.5rem; color:var(--red); display:block;}
  .hero-call{width:100%; max-width:320px;}
  .trust-strip{display:flex; flex-wrap:wrap; justify-content:center; gap:14px 18px;}
  .trust-chip{display:flex; align-items:center; gap:8px; font-size:.82rem; font-weight:600; color:var(--navy);}
  .trust-chip .dot{width:8px; height:8px; border-radius:50%; background:var(--citrus); flex:none;}

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:15px 26px; border-radius:999px; font-weight:700; font-size:1rem; border:none;
    text-decoration:none; transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn:active{transform:scale(.97);}
  .btn-primary{background:var(--red); color:#fff; box-shadow:var(--shadow-pop);}
  .btn-primary:hover{background:var(--red-deep);}
  .btn-ghost{background:var(--white); color:var(--navy); border:1.5px solid var(--line);}
  .btn-outline-light{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.55);}

  /* -- photo stack: illustrated brand art + small real-family badge photo -- */
  .hero-photo{position:relative; display:flex; justify-content:center; padding-top:8px;}
  .photo-stack{position:relative; width:min(70vw,300px); aspect-ratio:1/1;}
  .photo-stack::before{
    content:""; position:absolute; inset:-14%; border-radius:50%;
    background: radial-gradient(circle, rgba(244,161,37,.55), rgba(200,104,63,.25) 55%, transparent 72%);
    filter:blur(6px); z-index:0;
  }
  .porthole{
    position:relative; z-index:1; width:100%; height:100%; border-radius:50%; overflow:hidden;
    border:8px solid var(--white); box-shadow:var(--shadow-pop);
    background: linear-gradient(135deg, var(--peach), var(--citrus));
  }
  .porthole img{width:100%; height:100%; object-fit:cover; object-position:center 22%;}
  .mini-porthole{
    position:absolute; z-index:2; width:36%; height:36%; left:-8%; bottom:-6%;
    border-width:5px;
  }
  .mini-porthole img{object-position:center 20%;}
  .porthole-badge{
    position:absolute; z-index:3; bottom:-4%; right:-8%; background:var(--citrus); color:var(--navy);
    font-weight:800; font-size:.74rem; padding:9px 14px; border-radius:999px; box-shadow:var(--shadow-soft);
    border:3px solid var(--cream); max-width:150px; text-align:center; line-height:1.25;
  }

  @media(min-width:860px){
    .hero{padding:36px 0 0;}
    .hero-grid{grid-template-columns:1.15fr .85fr; align-items:center;}
    .wizard-intro{padding:30px 30px 4px;}
    .wizard-intro h1{font-size:2rem;}
    .wizard-intro .lead-mini{font-size:.96rem; max-width:46ch;}
    .hero-side{align-items:center; text-align:center;}
  }

  /* ---------- Sticky mobile contact bar ---------- */
  .mobile-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:var(--white); border-top:1px solid var(--line); box-shadow:0 -8px 24px -12px rgba(0,0,0,.2);
  }
  .mobile-bar a{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:13px 8px; border-radius:14px; font-weight:700; font-size:.88rem; text-decoration:none;}
  .mobile-bar a.call{background:var(--navy); color:#fff;}
  .mobile-bar a.wa{background:#25D366; color:#fff;}
  .mobile-bar a.quote{background:var(--red); color:#fff;}
  @media(min-width:860px){.mobile-bar{display:none;}}
  body{padding-bottom:78px;}
  @media(min-width:860px){body{padding-bottom:0;}}

  /* ---------- Sections generic ---------- */
  section{position:relative;}
  .section-pad{padding:60px 0;}
  .section-head{max-width:640px; margin:0 auto 34px; text-align:center;}
  .section-head h2{font-size:1.9rem; margin-top:8px;}
  .section-head p{color:var(--ink-soft); margin-top:10px; line-height:1.6;}

  /* ---------- DMV proximity banner ---------- */
  .dmv-banner{
    background: linear-gradient(120deg, var(--terracotta), var(--citrus));
    padding:22px 0;
  }
  .dmv-banner-inner{
    display:flex; flex-wrap:wrap; align-items:center; gap:18px;
  }
  .dmv-banner-icon{
    width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.32); flex:none;
    display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  }
  .dmv-banner-copy{flex:1 1 320px;}
  .dmv-banner-copy h3{color:#fff; font-size:1.2rem; margin-bottom:4px;}
  .dmv-banner-copy p{margin:0; color:rgba(255,255,255,.92); font-size:.9rem; line-height:1.5; max-width:56ch;}
  .dmv-banner-cta{display:flex; flex-wrap:wrap; gap:10px;}
  .dmv-banner-cta .btn-ghost{background:rgba(255,255,255,.92);}
  @media(max-width:640px){
    .dmv-banner-inner{flex-direction:column; align-items:flex-start; text-align:left;}
    .dmv-banner-cta{width:100%;}
    .dmv-banner-cta .btn{flex:1;}
  }

  /* ---------- Quote Wizard ---------- */
  .quote-section{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .wizard-card{
    max-width:640px; margin:0 auto; background:var(--cream); border-radius:var(--radius-lg);
    box-shadow:var(--shadow-soft); overflow:hidden; border:1px solid var(--line);
  }
  .wizard-top{display:flex; align-items:center; justify-content:space-between; padding:20px 24px 0;}
  .progress-dots{display:flex; gap:8px;}
  .progress-dots span{width:9px; height:9px; border-radius:50%; background:var(--line); transition:.25s;}
  .progress-dots span.active{background:var(--red); width:22px; border-radius:6px;}
  .wizard-step-label{font-size:.75rem; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em;}
  .wizard-body{padding:18px 24px 26px;}
  .step-panel{display:none;}
  .step-panel.active{display:block; animation:fadeUp .35s ease;}
  @keyframes fadeUp{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}
  .step-q{font-size:1.28rem; font-family:var(--font-display); color:var(--navy); margin-bottom:16px;}
  .card-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .card-grid.single{grid-template-columns:1fr;}
  .radio-card{
    border:2px solid var(--line); background:var(--white); border-radius:var(--radius-md); padding:16px 14px;
    display:flex; flex-direction:column; gap:4px; text-align:left; min-height:74px; justify-content:center;
  }
  .radio-card .rc-title{font-weight:700; color:var(--navy); font-size:.98rem;}
  .radio-card .rc-sub{font-size:.78rem; color:var(--ink-soft);}
  .radio-card.selected{border-color:var(--red); background:#fff5ef; box-shadow:0 0 0 3px rgba(214,48,60,.12);}
  .radio-card:active{transform:scale(.98);}
  .field{margin-bottom:14px;}
  .field label{display:block; font-size:.82rem; font-weight:700; color:var(--navy); margin-bottom:6px;}
  .field input{
    width:100%; padding:14px 16px; border-radius:var(--radius-sm); border:2px solid var(--line);
    font-size:1rem; font-family:inherit; background:var(--white);
  }
  .field input:focus{outline:none; border-color:var(--red);}
  .wizard-nav{display:flex; gap:10px; margin-top:20px;}
  .wizard-nav .btn{flex:1;}
  .btn-back{background:transparent; color:var(--ink-soft); border:2px solid var(--line);}
  .summary-box{background:var(--white); border:2px dashed var(--line); border-radius:var(--radius-md); padding:16px; margin-bottom:16px; font-size:.88rem; color:var(--ink-soft);}
  .summary-box b{color:var(--navy);}

  .vtype-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
  @media(min-width:480px){.vtype-grid{grid-template-columns:repeat(6,1fr);}}
  .vtype-card{
    border:2px solid var(--line); background:var(--white); border-radius:var(--radius-md); padding:14px 6px;
    display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  }
  .vtype-card .vtype-ic{font-size:1.6rem; line-height:1;}
  .vtype-card .vtype-label{font-size:.74rem; font-weight:700; color:var(--navy);}
  .vtype-card.selected{border-color:var(--red); background:#fff5ef; box-shadow:0 0 0 3px rgba(214,48,60,.12);}
  .vtype-card:active{transform:scale(.97);}

  .field-row-label{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; flex-wrap:wrap;}
  .field-row-label label{margin-bottom:0;}
  .est-checkbox.small{display:flex; align-items:center; gap:6px; font-weight:600; font-size:.8rem; color:var(--ink-soft); cursor:pointer;}
  .est-checkbox.small input{width:15px; height:15px; accent-color:var(--red);}
  .tip{
    display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%;
    background:var(--line); color:var(--navy); font-size:.68rem; font-weight:800; cursor:help; vertical-align:middle;
  }
  #dmv-plate:disabled{background:var(--cream-warm); color:var(--ink-soft); cursor:not-allowed;}

  .dmv-license-badge{
    display:flex; align-items:center; gap:12px; background:var(--white); border:1.5px solid var(--citrus);
    border-radius:var(--radius-md); padding:12px 16px; margin-top:18px;
  }
  .dmv-license-ic{
    width:36px; height:36px; border-radius:50%; background:var(--cream-warm); flex:none;
    display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  }
  .dmv-license-title{font-weight:700; color:var(--navy); font-size:.86rem; line-height:1.3;}
  .dmv-license-sub{font-size:.76rem; color:var(--ink-soft); margin-top:2px;}
  .dmv-license-sub .placeholder{color:var(--terracotta); font-style:italic;}

  .confirm-panel{text-align:center; padding:8px 4px;}
  .confirm-check{
    width:64px; height:64px; border-radius:50%; background:var(--leaf); color:#fff; display:flex; align-items:center;
    justify-content:center; margin:0 auto 16px; font-size:1.8rem;
  }
  .confirm-actions{display:flex; flex-direction:column; gap:10px; margin-top:20px;}

  /* ---------- Trust / business info ---------- */
  .trust-section{
    background:
      radial-gradient(700px 400px at 90% 0%, rgba(244,161,37,.14), transparent 60%),
      radial-gradient(600px 380px at 5% 100%, rgba(200,104,63,.18), transparent 60%),
      var(--navy);
    color:var(--cream);
  }
  .trust-section .section-head h2{color:#fff;}
  .trust-section .section-head p{color:rgba(251,243,228,.72);}
  .trust-grid{display:grid; grid-template-columns:1fr; gap:16px;}
  @media(min-width:760px){.trust-grid{grid-template-columns:repeat(3,1fr);}}
  .trust-card{
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-md);
    padding:22px; backdrop-filter:blur(4px);
  }
  .trust-card .ic{width:38px; height:38px; border-radius:10px; background:var(--citrus); color:var(--navy); display:flex;
    align-items:center; justify-content:center; margin-bottom:12px; font-size:1.1rem;}
  .trust-card h3{color:#fff; font-size:1.05rem; margin-bottom:6px;}
  .trust-card p{margin:0; font-size:.88rem; color:rgba(251,243,228,.78); line-height:1.55;}
  .trust-card .placeholder{color:var(--citrus); font-style:italic;}
  .cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px;}

  .landmark{display:flex; align-items:center; gap:16px; margin-top:30px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-md); padding:16px;}
  .landmark img{width:76px; height:76px; object-fit:cover; border-radius:14px;}
  .landmark p{margin:0; font-size:.85rem; color:rgba(251,243,228,.78); line-height:1.5;}

  .field-hint{font-size:.76rem; color:var(--ink-soft); margin:6px 0 0;}
  .est-checkbox{display:flex; align-items:center; gap:10px; font-weight:600; font-size:.92rem; color:var(--navy); margin-top:4px; cursor:pointer;}
  .est-checkbox input{width:18px; height:18px; accent-color:var(--red);}
  .est-disclaimer{font-size:.74rem; color:var(--ink-soft); margin-top:14px; line-height:1.5;}

  /* ---------- Why us / features ---------- */
  .features-grid{display:grid; grid-template-columns:1fr; gap:18px;}
  @media(min-width:760px){.features-grid{grid-template-columns:repeat(4,1fr);}}
  .feature{text-align:center; padding:10px;}
  .feature .ic{
    width:56px; height:56px; border-radius:50%; background:var(--cream-warm); color:var(--red); font-size:1.4rem;
    display:flex; align-items:center; justify-content:center; margin:0 auto 12px;
  }
  .feature h3{font-size:1.02rem; margin-bottom:6px;}
  .feature p{font-size:.86rem; color:var(--ink-soft); margin:0; line-height:1.5;}

  /* ---------- Testimonial band ---------- */
  .testi-band{
    background:
      radial-gradient(500px 340px at 15% 20%, rgba(246,201,160,.6), transparent 65%),
      var(--cream-warm);
  }
  .testi-grid{display:grid; grid-template-columns:1fr; gap:24px; align-items:center;}
  @media(min-width:860px){.testi-grid{grid-template-columns:.8fr 1.2fr;}}
  .testi-photo .porthole{width:min(70vw,280px); margin:0 auto;}
  .testi-quote{font-family:var(--font-display); font-size:1.35rem; color:var(--navy); line-height:1.45;}
  .testi-name{margin-top:14px; font-weight:700; color:var(--red); font-size:.9rem;}

  /* ---------- Map / location ---------- */
  .map-section{background:var(--white);}
  .map-shell{display:grid; grid-template-columns:1fr; gap:0; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-soft); border:1px solid var(--line);}
  @media(min-width:860px){.map-shell{grid-template-columns:.85fr 1.15fr;}}
  .map-info{background:var(--navy); color:#fff; padding:30px; display:flex; flex-direction:column; justify-content:center; gap:14px;}
  .map-info h3{color:#fff; font-size:1.3rem;}
  .map-info .addr{font-size:.95rem; line-height:1.6; color:rgba(251,243,228,.85);}
  .map-frame{min-height:320px; background:var(--cream-warm);}
  .map-frame iframe{width:100%; height:100%; min-height:320px; border:0; display:block;}

  /* ---------- Footer ---------- */
  footer{background:var(--navy-deep); color:rgba(251,243,228,.7); padding:34px 0 20px; font-size:.82rem;}
  .foot-grid{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; align-items:center;}
  footer a{color:var(--citrus); text-decoration:none;}
  .foot-fine{margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.1); line-height:1.6;}

  [data-lang-hide]{display:none;}
  .visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}