*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Google Sans', 'Plus Jakarta Sans', Arial, sans-serif;
      font-size: 18px;
      color: #333;
      padding-bottom: 52px; /* room for sticky bar */
    }
    a { text-decoration: none; color: inherit; }
    img { display: block; max-width: 100%; }

    /* ── Variables ── */
    :root {
      --red:  #ac1f2d;
      --blue: #20409a;
      --light-blue: #e8edf5;
      --gray-bg: #f5f5f5;
      --section-grey:#E6E6E6;
    }

    /* ── Utility ── */
    .wrap  { max-width: 1260px; margin: 0 auto; padding: 0 20px; }
    .btn-red {
      display: inline-block;
      background: var(--red);
      color: #fff;
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 1px;
      padding: 13px 32px;
      border-radius: 4px;
      border: none;
      cursor: pointer;
    }
    .btn-red:hover { background: #8e1825; }
    .section-title {
      text-align: center;
      font-size: 38px;
      font-weight: 800;
      color: var(--blue);
      margin-bottom: 10px;
    }
    .section-sub {
      text-align: center;
      color: #666;
      font-size: 19px;
      line-height: 1.7;
      margin-bottom: 30px;
    }

    /* ════════════════════════════════
       HEADER
    ════════════════════════════════ */
    .site-header {
      background: #fff;
      box-shadow: 0 2px 6px rgba(0,0,0,.12);
      position: initial;
      top: 0;
      z-index: 900;
    }
    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 20px;
      max-width: 1260px;
      margin: 0 auto;
    }
    .logo-wrap {
      display: flex;
      align-items: center;
      gap: 40px;
    }
    .main-logo {
      width: 120px;
    }
    /* SVG House-logo */
   
  
    .logo-text span   { font-size: 13px; color: #777; }
    
    .header-cta {
      background: var(--red);
      color: #fff;
      font-weight: 700;
      font-size: 22px;
      padding: 12px 22px;
      border-radius: 4px;
      white-space: nowrap;
    }
    .header-cta:hover { background: #8e1825; }

    /* ════════════════════════════════
       HERO
    ════════════════════════════════ */
    .hero {
      background:
        linear-gradient(rgba(12, 19, 53, 0.9), rgba(11, 2, 51, 0.8)),
        url('images/hero-img.jpg') center / cover no-repeat;
      padding: 50px 20px 60px;
    }
    /* fallback gradient when image missing */
    .hero { background-color: #1c1c1c; }

    .hero-inner {
      max-width: 1260px;
      margin: 0 auto;
      display: flex;
      gap: 30px;
      align-items: center;
    }
    /* ── Left column ── */
    .hero-copy { flex: 1; color: #fff; }
    .hero-copy h1 {
      font-size: 48px;
      font-weight: 900;
      line-height: 1.25;
      margin-bottom: 8px;
    }
    .hero-copy h1 em { font-style: normal; color: var(--red); }
    .hero-copy h2 {
      font-size: 25px;
      font-weight: 500;
      color: #ddd;
      margin-bottom: 26px;
    }
    .hero-bullets { list-style: none; }
    .hero-bullets li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 5px 0;
      font-size: 20px;
      line-height: 1.5;
    }

    .hero-bullets li img{
        width: 20px;
        padding-top: 3px;
    }
    

    /* ── Form card ── */
    .hero-form-card {
      width: 380px;
      flex-shrink: 0;
      background: #fff;
      border-radius: 6px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0,0,0,.3);
    }
    .form-card-head {
      background: var(--blue);
      color: #fff;
      text-align: center;
      padding: 16px 10px;
      font-size: 22px;
      font-weight: 800;
    }
    .form-card-body { padding: 24px; }
    .f-row { display: flex; gap: 8px; margin-bottom: 8px; }
    .f-group { flex: 1; display: flex; flex-direction: column; }
    .f-group label {
      font-size: 11px;
      font-weight: 700;
      color: #555;
      margin-bottom: 3px;
      text-transform: uppercase;
      letter-spacing: .3px;
    }
    .f-group input,
    .f-group select,
    .f-group textarea {
      border: 1px solid #ccc;
      border-radius: 3px;
      padding: 7px 8px;
      font-size: 14px;
      font-family: inherit;
      width: 100%;
      color: #333;
    }
    .f-group input:focus,
    .f-group select:focus,
    .f-group textarea:focus { outline: 2px solid var(--blue); border-color: transparent; }
    .f-group textarea { height: 58px; resize: vertical; }
    .btn-submit {
      background: var(--red);
      color: #fff;
      border: none;
      width: 100%;
      padding: 14px;
      font-size: 16px;
      font-weight: 800;
      letter-spacing: 2px;
      border-radius: 3px;
      cursor: pointer;
      margin-top: 4px;
    }
    .btn-submit:hover { background: #8e1825; }

    /* ════════════════════════════════
       TRUST BADGES BAR
    ════════════════════════════════ */
    .badges-bar {
      background: #fff;
      border-bottom: 1px solid #e5e5e5;
      padding: 14px 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 33px;
      flex-wrap: wrap;
    }
    .badge { display: flex; align-items: center; gap: 8px; width: 70px; }
    
    

    /* pill badges */
    .badge-pill {
      border: 2px solid var(--blue);
      color: var(--blue);
      border-radius: 4px;
      padding: 4px 10px;
      font-size: 11px;
      font-weight: 700;
    }
    .badge-pill.filled { background: var(--red); border-color: var(--red); color: #fff; }

    /* ════════════════════════════════
       MOST TRUSTED
    ════════════════════════════════ */
    .most-trusted { background: #fff; padding: 60px 20px; }
    .most-trusted .inner {
      max-width: 1260px;
      margin: 0 auto;
      display: flex;
      gap: 45px;
      align-items: center;
    }
    .most-trusted .truck-img {
      width: 42%;
      flex-shrink: 0;
      border-radius: 6px;
      overflow: hidden;
      background: #ddd;
      aspect-ratio: 4/3;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #aaa;
      font-size: 13px;
    }
    .most-trusted .truck-img img { width: 100%; height: 100%; object-fit: cover; }
    .most-trusted .copy h2 {
      font-size: 36px;
      font-weight: 800;
      color: var(--blue);
      margin-bottom: 16px;
    }
    .most-trusted .copy p {
      color: #555;
      line-height: 1.8;
      margin-bottom: 12px;
      font-size: 18px;
    }

    /* ════════════════════════════════
       PARTNERSHIP BAND
    ════════════════════════════════ */
    .partnership {
      background: var(--section-grey);
      padding: 40px 20px;
      text-align: center;
    }
    .partnership h2 { font-size: 36px; font-weight: 800; color: var(--blue); margin-bottom: 12px; }
    .partnership p  { color: #555; line-height: 1.8; max-width: 900px; margin: 0 auto; font-size: 18px; }

    /* ════════════════════════════════
       HOW DOES IT WORK
    ════════════════════════════════ */
    .how-it-works { background: #fff; padding: 60px 20px 5px 20px }
    .how-it-works .intro-p {
      text-align: center;
      color: #555;
      max-width: 820px;
      margin: 0 auto 30px;
      line-height: 1.8;
    }
    .process-heading { font-size: 20px; font-weight: 700; color: #333; margin-bottom: 14px; }
    .process-list { list-style: none; margin-bottom: 36px; }
    .process-list li {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
      font-size: 18px;
      color: #555;
      line-height: 1.7;
    }
    .process-list li:last-child { border-bottom: none; }
    .process-num {
      background: var(--red);
      color: #fff;
      width: 26px; height: 26px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px;
      font-weight: 700;
      flex-shrink: 0;
    }


    /* ================================
    know
    =====================================*/

   .know-what-you-need{
    max-width: 1260px;
    margin: auto;
    padding-bottom: 60px;

   }

    /* ── 3 step cards ── */
    .step-cards { display: flex; gap: 20px; padding-top: 20px; }
    .step-card {
      flex: 1;
      background: var(--blue);
      color: #fff;
      border-radius: 6px;
      padding: 29px 35px;
    }
    .step-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
    .step-card p  { font-size: 17px; line-height: 1.7; opacity: .92; }

    /* ════════════════════════════════
       BENEFITS
    ════════════════════════════════ */
    .benefits { background: var(--blue); padding: 55px 20px; }
    .benefits .inner {
      max-width: 1260px;
      margin: 0 auto;
      display: flex;
      gap: 50px;
      align-items: center;
    }
    .benefits .col { flex: 1; color: #fff; }
    .benefits .col h3 { font-size: 22px; font-weight: 700; margin-bottom: 16px; }
    
    .col-card{
        border: white 2px solid;
        border-radius: 15px;
        padding: 30px;
    }

    .benefits .cta-row { text-align: center; margin-top: 36px; }

    /* ════════════════════════════════
       CONTAINER SIZE
    ════════════════════════════════ */
    .container-size { background: #fff; padding: 60px 20px; }
    .size-grid { display: flex; gap: 22px; margin-top: 28px; }
    .size-card {
      flex: 1;
      border: 1px solid #ddd;
      border-radius: 6px;
      padding: 56px 23px 38px 23px;
      text-align: center;
    }
    .size-icon {
      width: 150px; height: 56px;
      background: var(--light-blue);
      border-radius: 4px;
      margin: 0 auto 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      padding-bottom: 20px;
    }
    .size-card h3 { font-size: 23px; font-weight: 800; color: var(--blue); margin-bottom: 14px; }
    .size-card ul { list-style: none; text-align: left; }
    .size-card ul li {
      display: flex; gap: 8px; align-items: flex-start;
      padding: 4px 0;
      font-size: 17px; color: #555; line-height: 1.5;
    }
   
    .size-note { font-size: 15px; color: #888; font-style: italic; margin-top: 10px; text-align: left; }

    /* ════════════════════════════════
       SOLUTION
    ════════════════════════════════ */
    .solution { background: var(--gray-bg); padding: 60px 20px; }
    .solution-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-top: 28px;
    }
    .sol-card {
      background: var(--light-blue);
      border-radius: 6px;
      padding: 26px 24px;
    }
    .sol-card h3 { font-size: 23px; font-weight: 800; color: var(--blue); margin-bottom: 10px; }
    .sol-card p  { font-size: 17px; color: #555; line-height: 1.8; }

    /* ════════════════════════════════
       CTA BANNER
    ════════════════════════════════ */
    .cta-banner {
      background: var(--blue);
      padding: 45px 20px;
      text-align: center;
    }
    .cta-banner p {
      color: #fff;
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 22px;
      line-height: 1.4;
    }
    .cta-banner .btn-phone {
      display: inline-block;
      background: var(--red);
      color: #fff;
      font-weight: 800;
      font-size: 18px;
      padding: 14px 32px;
      border-radius: 4px;
      letter-spacing: .5px;
    }
    .cta-banner .btn-phone:hover { background: #8e1825; }

    /* ════════════════════════════════
       TESTIMONIALS
    ════════════════════════════════ */
    .testimonials { background: #fff; padding: 60px 20px; }
    .test-grid { display: flex; gap: 24px; margin-top: 28px; }
    .test-card {
      flex: 1;
      background: var(--blue);
      border-radius: 6px;
      padding: 28px 26px;
      color: #fff;
      position: relative;
    }
    .test-card .quote-mark {
      font-size: 56px;
      color: rgba(255,255,255,.25);
      line-height: 1;
      margin-bottom: 8px;
      font-family: Georgia, serif;
    }
    .test-card p { font-size: 17px; line-height: 1.8; margin-bottom: 16px; }
    .test-card .author { font-weight: 700; font-size: 18px; color: rgba(255,255,255,.8); }

    /* ════════════════════════════════
       FOOTER
    ════════════════════════════════ */
    .site-footer {
      background: #222;
      color: #999;
      text-align: center;
      padding: 18px 20px;
      font-size: 16px;
    }

    /* ════════════════════════════════
       STICKY BAR
    ════════════════════════════════ */
    .sticky-bar {
      position: fixed;
      bottom: 0; left: 0; right: 0;
      display: flex;
      z-index: 999;
    }
    .sticky-bar a {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 14px 10px;
      font-weight: 700;
      font-size: 17px;
      color: #fff;
      letter-spacing: .5px;
    }
    .sticky-bar a.s-quote { background: var(--red); }
    .sticky-bar a.s-call  { background: var(--blue); }
    .sticky-bar a:hover { filter: brightness(1.12); }

    /* ════════════════════════════════
       RESPONSIVE (basic)
    ════════════════════════════════ */
    @media (max-width: 820px) {
      .hero-inner { flex-direction: column; }
      .hero-form-card { width: 100%; }
      .most-trusted .inner { flex-direction: column; }
      .most-trusted .truck-img { width: 100%; }
      .step-cards { flex-direction: column; }
      .benefits .inner { flex-direction: column; }
      .size-grid { flex-direction: column; }
      .solution-grid { grid-template-columns: 1fr; }
      .test-grid { flex-direction: column; }
    }