:root{
      --brand-navy:#0a2940; /* dark section background */
      --brand-navy-2:#162a50;
      --brand-navy-3:#1b3b5f;
      --brand-darkred:#cf0606; /* red */
      --brand-orange:#ef4444;
      --brand-light-blue:#2197eb;
      --dark: #1e1e1e;
      --light: #f5f6f7;
      --muted:#e9eef7;
      --card:#ffffff;
    }

    /* --- Background Utilities --- */
    .bg-navy { background-color: var(--brand-navy) !important; }
    .bg-navy-2 { background-color: var(--brand-navy-2) !important; }
    .bg-navy-3 { background-color: var(--brand-navy-3) !important; }
    .bg-darkred { background-color: var(--brand-darkred) !important; }
    .bg-orange { background-color: var(--brand-orange) !important; }
    .bg-light-blue { background-color: var(--brand-light-blue) !important; }
    .bg-dark { background-color: var(--dark) !important; }
    .bg-light { background-color: var(--light) !important; }
    .bg-muted { background-color: var(--muted) !important; }
    .bg-card { background-color: var(--card) !important; }

    /* --- Text Color Utilities --- */
    .text-navy { color: var(--brand-navy) !important; }
    .text-navy-2 { color: var(--brand-navy-2) !important; }
    .text-navy-3 { color: var(--brand-navy-3) !important; }
    .text-darkred { color: var(--brand-darkred) !important; }
    .text-orange { color: var(--brand-orange) !important; }
    .text-light-blue { color: var(--brand-light-blue) !important; }
    .text-dark { color: var(--dark) !important; }
    .text-light { color: var(--light) !important; }
    .text-muted { color: var(--muted) !important; }
    .text-card { color: var(--card) !important; }

    body{font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";}

    /* Header / Navbar */
    .topbar{background:var(--light); color:var(--dark);}
    .navbar-brand{font-weight:700; letter-spacing:.5px;}
    .helpline-chip{
      background:#fff; color:var(--brand-darkred); border-radius:999px; font-weight:700;
      padding:.25rem .75rem; display:inline-flex; align-items:center; gap:.4rem; font-size:.9rem;
    }
    .helpline-chip a{
        color:var(--brand-darkred)
    }
    .link-dark{
        color: var(--dark) !important;
    }

    /* Hero Section */
    .hero {
        position: relative;
        isolation: isolate;
        color: #fff;
        background: url(Images/insurance-agent-working-site-car-accident-claim-process-people-car-insurance-claim.jpg)
            center/cover no-repeat;
        min-height: 100vh; /* full height for hero */
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        overflow: hidden;
        padding: 2rem;
    }


    /* Content wrapper to ensure stacking above overlay */
    .hero > .container,
    .hero > .content {
        position: relative;
        z-index: 1;
        max-width: 1200px;
    }

    /* Text styling */
    .hero h1 {
        font-weight: 600;
        letter-spacing: 2px;
        font-size: 3rem;
        position: relative;
        display: block;
        width: 100vw;
        margin-left: 50%;
        transform: translateX(-50%);
        padding: .5rem 1rem;
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        
          /* text-shadow: 0 0 10px #4f4f4f; */
               /* 0 0 20px #f97316, */
               /* 0 0 40px #f97316; */
    }

    .hero .kicker {
        color: #dbe7ff;
        font-weight: 500;
        letter-spacing: 1px;
        font-size: 2rem;
        padding-bottom: 4rem;
        text-shadow: 0 0 10px #4f4f4f;
    }

    /* Scroll animations */
    [data-anim]{
        opacity: 0;
        transform: translateY(24px);
        transition: transform .7s ease, opacity .7s ease;
        will-change: transform, opacity;
    }
    [data-anim].in-view{
        opacity: 1;
        transform: none;
    }
    .anim-fade-left{ transform: translateX(-40px); }
    .anim-fade-right{ transform: translateX(40px); }
    .anim-zoom-in{ transform: scale(.96); }
    .anim-slide-down{ transform: translateY(-30px); }
    .anim-slide-up{ transform: translateY(36px); }

    @media (prefers-reduced-motion: reduce){
        [data-anim]{
            opacity: 1;
            transform: none;
            transition: none;
        }
    }

    .hero-card{
        background: linear-gradient(145deg, var(--brand-orange), var(--brand-darkred));
        color: #fff;
        border-radius: 18px;
        padding: 1rem 1.5rem;
        display: inline-flex;
        flex-direction: column;
        gap: .35rem;
        align-items: center;
        box-shadow: 0 18px 32px rgba(0,0,0,0.35),
            inset 0 1px 0 rgba(255,255,255,0.22),
            inset 0 -8px 16px rgba(0,0,0,0.35);
        border: 1px solid rgba(255,255,255,0.25);
        transform: translateY(-2px);
        transition: transform .2s ease, box-shadow .2s ease;
        max-width: 520px;
        margin: 0 auto;
    }
    .hero-card:hover{
        transform: translateY(-6px);
        box-shadow: 0 24px 44px rgba(0,0,0,0.4),
            inset 0 1px 0 rgba(255,255,255,0.3),
            inset 0 -10px 20px rgba(0,0,0,0.4);
    }
    .hero-card-title{
        font-weight: 700;
        font-size: 1.05rem;
        color: #fff;
    }
    .hero-card-meta{
        font-size: .9rem;
        color: #fff;
        letter-spacing: .08em;
        text-transform: uppercase;
    }
    .hero-card-phone{
        font-size: 1.7rem;
        font-weight: 800;
        color: #fff;
        text-decoration: none;
    }
    .hero-card a,
    .hero-card i{
        color: #fff !important;
    }

    .hero .lead {
        font-weight: 500;
        font-size: 1.5rem;
        /* text-shadow: 0 0 10px #4f4f4f; */
    }

    /* Call-to-action button */
    .hero .cta-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        background: var(--light);
        opacity: 0.9;
        border: none;
        border-radius: 30px;
        font-weight: 700;
        color: var(--brand-darkred);
        font-size: 1.4rem;
        /* padding: 0.75rem 0rem; */
        box-shadow: 0 8px 20px rgba(255, 138, 0, 0.35);
        transition: all 0.3s ease;
    }

    .hero .cta-btn img {
        width: 55px;
    }

    .hero .cta-btn:hover {
        filter: brightness(0.95);
        transform: scale(1.02);
    }

    .tooltip-btn{
        position: relative;
    }
    .tooltip-btn::after{
        content: attr(data-tooltip);
        position: absolute;
        left: 50%;
        bottom: 130%;
        transform: translateX(-50%) translateY(6px);
        background: rgba(255,255,255,0.95);
        color: var(--brand-navy);
        border: 1px solid rgba(0,0,0,0.15);
        padding: .35rem .6rem;
        border-radius: .5rem;
        font-size: .85rem;
        font-weight: 600;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        box-shadow: 0 8px 18px rgba(0,0,0,0.2);
        transition: opacity .2s ease, transform .2s ease;
        z-index: 5;
    }
    .tooltip-btn::before{
        content: "";
        position: absolute;
        left: 50%;
        bottom: 120%;
        transform: translateX(-50%);
        border-width: 6px 6px 0 6px;
        border-style: solid;
        border-color: rgba(255,255,255,0.95) transparent transparent transparent;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
        z-index: 5;
    }
    .tooltip-btn:hover::after,
    .tooltip-btn:focus-visible::after{
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    .tooltip-btn:hover::before,
    .tooltip-btn:focus-visible::before{
        opacity: 1;
    }

    .btn-3d{
        box-shadow: 0 8px 0 rgba(0,0,0,0.2),
            0 16px 26px rgba(0,0,0,0.25);
        transform: translateY(-2px);
        transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    }
    .btn-3d:hover{
        transform: translateY(-4px);
        box-shadow: 0 10px 0 rgba(0,0,0,0.2),
            0 20px 32px rgba(0,0,0,0.28);
    }
    .btn-3d:active{
        transform: translateY(0);
        box-shadow: 0 4px 0 rgba(0,0,0,0.2),
            0 10px 16px rgba(0,0,0,0.2);
    }
 

    /* Section: ARC Intro */
    .section-navy{
        background:var(--brand-navy);
        color:#cfe0ff;
    }
    .section-navy h2{
        color:var(--brand-darkred);
    }
    .section-navy .lead{
        color:var(--light);
        text-align: center;
    }

    .section-soft{
        background: linear-gradient(180deg, #ffffff 0%, #f7f3f0 100%);
    }
    .location-image{
        padding: 0;
        margin: 0;
        height: 100vh;
    }
    .location-image__img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .benefit-list{
        list-style: none;
        padding-left: 0;
        margin: 0;
    }
    .benefit-list li{
        display: flex;
        gap: .6rem;
        align-items: flex-start;
        margin-bottom: .5rem;
    }
    .benefit-list i{
        color: var(--brand-darkred);
        margin-top: .15rem;
    }

    .arc-grid{
        display: grid;
        gap: 1.5rem;
        margin: 0 auto;
    }
    @media (min-width: 992px){
        .arc-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; max-width: 980px; }
    }
    .arc-panel{
        border-radius: 16px;
        padding: 1.5rem;
        box-shadow: 0 10px 30px rgba(10,41,64,0.25);
    }
    .arc-panel--info{
        background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03));
        border: 1px solid rgba(255,255,255,0.2);
        border-left: 4px solid var(--brand-darkred);
    }
    .arc-panel--compare{
        background: #ffffff;
        border: 2px solid var(--brand-darkred);
        color: var(--brand-navy);
    }
    .arc-panel--compare .eyebrow{
        color: var(--brand-navy);
    }
    .arc-panel--compare h3{
        color: var(--brand-navy);
    }
    .arc-panel--compare .arc-list{
        color: var(--brand-navy);
    }
    .arc-panel--compare .text-light{
        color: var(--brand-navy) !important;
    }
    .arc-panel .eyebrow{
        text-transform: uppercase;
        letter-spacing: .08em;
        font-size: 1.0rem;
        color: #0a2940;
        margin-bottom: .35rem;
    }
    .eyebrow-full{
        text-transform: none;
        letter-spacing: 0;
        font-size: 1.5rem;
        line-height: 1.3;
    }
    .arc-panel h3{ color: var(--brand-darkred); }
    .arc-list{
        margin: .5rem 0 0;
        padding-left: 1.1rem;
    }
    .arc-list li{ margin-bottom: .35rem; }
    .arc-compare{
        display: grid;
        gap: 1rem;
        margin-top: .25rem;
        text-align: center;
        justify-items: center;
    }
    @media (min-width: 576px){
        .arc-compare{ grid-template-columns: 1fr 1fr; }
    }
    .arc-compare .arc-list{
        display: inline-block;
        text-align: left;
    }

    /* Steps */

    /* Page bg like the reference (soft gradient) */
    .section-wrap{
    /* background: radial-gradient(1200px 420px at 30% -10%, #ffffff 0, #f7f3ff 50%, #efe9ff 100%); */
    padding:clamp(1.25rem, 3vw, 2rem);
    border-radius:1rem;
    }

    /* ===== Stepper ===== */
    .stepper{
    position: relative;
    display:flex; gap:clamp(1rem, 4vw, 2.25rem);
    align-items:center; justify-content:space-between;
    padding: 0 clamp(.25rem, 2vw, .75rem);
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
    }
    .stepper::before{ /* line behind dots */
    content:"";
    position:absolute; left: clamp(1rem, 2vw, 1.25rem); right: clamp(1rem, 2vw, 1.25rem);
    top:50%; height:3px; background:#e9e7f7; transform: translateY(-50%);
    z-index:0;
    }
    .step-dot{
    position:relative; z-index:1;
    width:44px; height:44px; flex: 0 0 44px;
    border-radius:50%;
    display:grid; place-items:center;
    font-weight:800; color:#fff;
    background: var(--brand-darkred);
    box-shadow: 0 6px 18px rgba(249,115,22,.33);
    border: 0;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    }
    .step-dot:hover,
    .step-dot.active{
    transform: translateY(-2px);
    filter: brightness(.95);
    box-shadow: 0 10px 24px rgba(249,115,22,.45);
    }

    /* ===== Cards ===== */
    .card-grid .step-card{
    background:#fff;
    border:2px solid var(--brand-navy);
    border-radius:1rem;
    padding:1rem 1rem;
    height:100%;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
    }
    .card-grid .step-card:hover,
    .card-grid .step-card.active{
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(10,41,64,.15);
    border-color: var(--brand-darkred);
    background: linear-gradient(180deg,#fff, #fff7f0);
    }
    .step-head{
    font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:#9aa3b2; margin-bottom:.35rem;
    }
    .step-title{ 
        font-weight:700; 
        color: var(--brand-navy); 
        margin:0; 
    }
    .step-icon{
    width:56px; height:56px; border-radius:12px;
    display:grid; place-items:center;
    background: linear-gradient(135deg,#f7f9ff,#eef3ff);
    border:1px solid #e6ecfb;
    }
    .step-icon img{ width:30px; height:30px; object-fit:contain;
    filter: brightness(0) saturate(100%) invert(16%) sepia(35%) saturate(745%) hue-rotate(177deg) brightness(95%) contrast(89%);
    }

    .small{
        font-weight: 400;
    }

    /* Header label that changes on hover */
    .section-title{
    font-weight:800; color:var(--brand-navy); margin-bottom:.35rem;
    transition: color .2s ease;
    }
    .section-sub{ color:#6c7480; }

    
      /* Message Cloud */
      .message {
        background:var(--brand-darkred);
        color: #333;
        padding: 12px 18px;
        border-radius: 15px;
        position: relative;
        max-width: 250px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      }

      /* Tail of the bubble */
      .message::after {
        content: "";
        position: absolute;
        bottom: -10px;
        right: 20px;
        border-width: 10px 10px 0;
        border-style: solid;
        border-color: #dcf8c6 transparent transparent transparent;
      }

    /* Documents */
    .doc-box{
        background:#fff;
        border-radius:1rem; 
        box-shadow:0 6px 24px rgba(0,0,0,.06);
    }
    .doc-list li{
        margin:.4rem 0;
    }

    /* FAQ */
    .faq .accordion-button{
        font-weight:600;
    }
    /* Accordion active (open) state styling */
    .accordion-button:not(.collapsed) {
    color: var(--brand-darkred);
    background-color: rgba(249, 115, 22, 0.08); /* subtle darkred tint */
    box-shadow: none;
    border-bottom: 1px solid rgba(249, 115, 22, 0.2);
    }

    /* Change arrow icon color when active */
    .accordion-button:not(.collapsed)::after {
    filter: brightness(0) saturate(100%) invert(51%) sepia(99%) saturate(749%) hue-rotate(357deg) brightness(99%) contrast(97%);
    }

    /* Optional: focus state darkred glow */
    .accordion-button:focus {
    border-color: var(--brand-darkred);
    box-shadow: 0 0 0 0.15rem rgba(249, 115, 22, 0.25);
    }


    /* Utility */
    .text-darkred{color:var(--brand-darkred)!important}
    .bg-muted{background:var(--muted)}

    /* Footer call banner */
    .call-banner{background: var(--brand-darkred); color:#fff;}

    /* --- Floating Icon Base --- */
    .floating-icon {
        position: fixed;
        right: 24px;
        bottom: 24px;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: var(--light);
        color: #fff;
        font-size: 1.6rem;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        box-shadow: 0 8px 24px rgba(249, 115, 22, 0.45);
        z-index: 999;
        transition: all 0.3s ease;
    }

        /* Hover lift effect */
    .floating-icon:hover {
        transform: translateY(-4px) scale(1.05);
        filter: brightness(0.95);
        box-shadow: 0 10px 30px rgba(249,115,22,0.55);
    }

        /* --- Floating Label (tooltip) --- */
    .floating-label {
        position: absolute;
        right: 85px;
        background: var(--brand-darkred);
        color: #fff;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 0.9rem;
        font-weight: 500;
        white-space: nowrap;
        opacity: 0;
        transform: translateX(10px);
        pointer-events: none;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(64, 37, 10, 0.2);
    }

        /* Arrow pointer */
    .floating-label::after {
        content: "";
        position: absolute;
        right: -5px;
        top: 50%;
        transform: translateY(-50%);
        border: 5px solid transparent;
        border-left-color: var(--brand-darkred);
    }

        /* Show label on hover */
    .floating-icon:hover .floating-label {
        opacity: 1;
        transform: translateX(0);
    }
    

        /* Optional pulse animation */
    @keyframes pulse {
        0% { box-shadow: 0 0 0 0 rgba(249,115,22,0.4); }
        70% { box-shadow: 0 0 0 15px rgba(249,115,22,0); }
        100% { box-shadow: 0 0 0 0 rgba(249,115,22,0); }
    }
    .floating-icon.pulse {
        animation: pulse 2s infinite;
    }


    /* Mobile tweaks */
    @media (max-width: 576px){
      .hero{min-height:64svh; padding:3rem 0}
      .hero h1{font-size:1.75rem}
      .hero .kicker{font-size:1.2rem}
      .hero .lead{font-size:1rem}
      .hero-card{padding:.85rem 1rem}
      .hero-card-title{font-size:.95rem}
      .hero-card-phone{font-size:1.4rem}
      .helpline-chip{font-size:.7rem}
      #arc-section .lead{font-size: .9rem;}
       .floating-icon {
            width: 65px;
            height: 65px;
            font-size: 1.4rem;
            right: 16px;
            bottom: 16px;
        }
        .floating-label {
            font-size: 0.8rem;
            right: 60px;
        }
    }
        /* Responsive grid */
    .card-grid{ row-gap:1rem; }
    @media (min-width: 576px){
    .card-grid .col{ flex:0 0 auto; width:50%; }
    }
    @media (min-width: 992px){
    .card-grid .col{ width: calc(100%/6); } /* 6 across like reference */
    }