:root{
      --blue:#0056a6;
      --navy:#003b7a;
      --deep:#002f63;
      --yellow:#f8b600;
      --text:#0d2f57;
      --muted:#5f7185;
      --light:#f3f8fc;
      --white:#ffffff;
      --shadow:0 18px 45px rgba(0,47,99,.15);
      --radius:18px;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:'Inter', Arial, Helvetica, sans-serif;
      color:var(--text);
      background:#fff;
    }

    .container{
      width:min(1120px,92%);
      margin:auto;
    }

    header{
      background:linear-gradient(135deg,var(--navy),var(--blue));
      color:#fff;
      position:sticky;
      top:0;
      z-index:10;
      box-shadow:0 8px 25px rgba(0,0,0,.12);
    }

    .nav{
      height:96px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:30px;
    }

    .logo-card{
      background:#fff;
      width:190px;
      height:190px;
      margin-top:18px;
      border-radius:0 0 18px 18px;
      box-shadow:var(--shadow);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:16px;
    }

    .logo-card img{
      width:100%;
      height:100%;
      object-fit:contain;
    }

    nav{
      display:flex;
      align-items:center;
      gap:38px;
      font-weight:700;
      font-size:15px;
    }

    nav a{
      color:#fff;
      text-decoration:none;
      padding:12px 0;
      position:relative;
    }

    nav a.active:after{
      content:"";
      position:absolute;
      left:0;
      bottom:4px;
      width:100%;
      height:3px;
      background:var(--yellow);
      border-radius:999px;
    }

    .quote-btn{
      background:var(--yellow);
      color:#06284d;
      border:0;
      border-radius:10px;
      padding:15px 28px;
      font-weight:800;
      cursor:pointer;
      box-shadow:0 10px 22px rgba(248,182,0,.25);
      text-decoration:none;
      display:inline-block;
    }

    .hero{
      min-height:590px;
      background:
        linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.86) 42%,rgba(255,255,255,.2) 70%),
        url("https://images.unsplash.com/photo-1585421514738-01798e348b17?auto=format&fit=crop&w=1800&q=80") center/cover;
      display:flex;
      align-items:center;
    }

    .eyebrow{
      color:var(--navy);
      text-transform:uppercase;
      font-size:13px;
      font-weight:800;
      letter-spacing:.8px;
      margin-bottom:18px;
    }

    h1{
      font-family:'Poppins', sans-serif;
      font-weight:700;
      font-size:58px;
      line-height:1.08;
      letter-spacing:-.5px;
      margin:0 0 25px;
      color:var(--deep);
      max-width:580px;
    }

    .yellow-line{
      width:48px;
      height:4px;
      background:var(--yellow);
      border-radius:999px;
      margin:0 0 26px;
    }

    .hero p{
      max-width:560px;
      font-size:18px;
      line-height:1.65;
      margin:0 0 16px;
    }

    .hero-actions{
      display:flex;
      gap:18px;
      margin-top:30px;
    }

    .btn{
      border-radius:9px;
      padding:16px 28px;
      font-weight:800;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      gap:10px;
    }

    .btn.primary{
      background:var(--navy);
      color:#fff;
      box-shadow:0 12px 24px rgba(0,59,122,.25);
    }

    .btn.secondary{
      border:2px solid var(--navy);
      color:var(--navy);
      background:#fff;
    }

    .protectivity{
      margin-top:34px;
      display:inline-flex;
      align-items:center;
      background:#fff;
      border-radius:16px;
      padding:14px 18px;
      box-shadow:var(--shadow);
    }

    .protectivity img{
      display:block;
      width:180px;
      height:auto;
    }

    section{
      padding:78px 0;
    }

    .steps{
      background:linear-gradient(180deg,#f5fbff,#ffffff);
      text-align:center;
    }

    .section-kicker{
      text-transform:uppercase;
      letter-spacing:5px;
      font-weight:800;
      color:var(--navy);
      margin-bottom:8px;
    }

    h2{
      font-family:'Poppins', sans-serif;
      font-weight:700;
      color:var(--deep);
      font-size:38px;
      line-height:1.15;
      letter-spacing:-.3px;
      margin:0 0 42px;
    }

    .cards{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:30px;
    }

    .card{
      background:#fff;
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
      position:relative;
      min-height:410px;
    }

    .card img{
      width:100%;
      height:180px;
      object-fit:cover;
      display:block;
    }

    .number{
      position:absolute;
      top:18px;
      left:18px;
      width:43px;
      height:43px;
      border-radius:50%;
      background:var(--navy);
      color:#fff;
      border:3px solid rgba(255,255,255,.55);
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:800;
    }

    .icon{
      width:68px;
      height:68px;
      border-radius:50%;
      margin:-34px auto 18px;
      background:#fff;
      border:4px solid #eef4fa;
      display:flex;
      align-items:center;
      justify-content:center;
      color:var(--navy);
      font-size:30px;
      box-shadow:0 10px 20px rgba(0,0,0,.08);
      position:relative;
    }

    .card-body{
      padding:0 28px 30px;
      text-align:center;
    }

    .card h3{
      color:var(--navy);
      font-size:19px;
      margin:0 0 12px;
      text-transform:uppercase;
    }

    .card p{
      color:var(--muted);
      line-height:1.55;
      margin:0 0 16px;
    }

    .contact-line{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      color:var(--navy);
      font-weight:700;
      font-size:14px;
    }

    .contact-panel{
      padding-top:0;
      background:#fff;
    }

    .panel{
      display:grid;
      grid-template-columns:.9fr 1.25fr;
      min-height:360px;
      border-radius:18px;
      overflow:hidden;
      box-shadow:var(--shadow);
      background:#fff;
    }

    .panel-left{
      background:linear-gradient(135deg,var(--navy),var(--deep));
      color:#fff;
      padding:44px 34px;
      position:relative;
    }

    .panel-left:after{
      content:"";
      position:absolute;
      right:-30px;
      top:0;
      height:100%;
      width:70px;
      background:var(--yellow);
      transform:skewX(-8deg);
    }

    .panel-left h2{
      color:#fff;
      font-size:36px;
      margin-bottom:28px;
    }

    .benefit{
      display:flex;
      gap:14px;
      margin:20px 0;
      max-width:300px;
      position:relative;
      z-index:1;
    }

    .benefit b{display:block;margin-bottom:3px}
    .benefit span{color:#dcecff;line-height:1.35}

    .panel-right{
      position:relative;
      z-index:1;
      padding:44px 52px;
      background:
        linear-gradient(90deg,#fff 0%,rgba(255,255,255,.95) 55%,rgba(255,255,255,.65) 100%),
        url("https://images.unsplash.com/photo-1527515637462-cff94eecc1ac?auto=format&fit=crop&w=1200&q=80") right center/cover;
    }

    form{
      max-width:430px;
    }

    label{
      display:block;
      font-size:13px;
      font-weight:700;
      margin-bottom:8px;
      color:var(--text);
    }

    input,textarea{
      width:100%;
      border:1px solid #cdd7e1;
      border-radius:6px;
      padding:14px 15px;
      font:inherit;
      margin-bottom:18px;
      background:#fff;
    }

    textarea{min-height:115px;resize:vertical}

    .form-status{
      display:none;
      padding:13px 16px;
      border-radius:8px;
      font-size:14px;
      font-weight:600;
      margin-bottom:18px;
    }

    .form-status[data-fs-active]{display:block}

    .form-success{
      background:#e7f6ec;
      color:#1e7a41;
      border:1px solid #bfe6cc;
    }

    .form-error{
      background:#fdecec;
      color:#b3261e;
      border:1px solid #f3c6c4;
    }

    .field-error{
      display:block;
      color:#b3261e;
      font-size:12.5px;
      font-weight:600;
      margin:-12px 0 14px;
    }

    input[aria-invalid="true"],
    textarea[aria-invalid="true"]{
      border-color:#e0625c;
    }

    button[data-fs-submit-btn]:disabled{
      opacity:.6;
      cursor:not-allowed;
    }

    .direct-contact{
      display:flex;
      flex-wrap:wrap;
      gap:20px 34px;
      margin-top:26px;
      padding-top:26px;
      border-top:1px solid #e2e9f1;
      max-width:430px;
    }

    .direct-contact span{
      display:block;
      font-size:12px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:1px;
      color:var(--muted);
      margin-bottom:4px;
    }

    .direct-contact a{
      color:var(--navy);
      font-weight:700;
      text-decoration:none;
      font-size:15px;
    }

    .direct-contact a:hover{
      text-decoration:underline;
    }

    footer{
      background:
        linear-gradient(135deg,var(--navy),var(--blue));
      color:#fff;
      padding:42px 0;
      border-bottom:9px solid var(--yellow);
    }

    .footer-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:25px;
    }

    .socials{
      display:flex;
      gap:12px;
    }

    .socials a{
      color:#fff;
      text-decoration:none;
      border:1px solid rgba(255,255,255,.38);
      width:42px;
      height:42px;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      transition:background .2s, border-color .2s;
    }

    .socials a:hover{
      background:rgba(255,255,255,.15);
      border-color:rgba(255,255,255,.7);
    }

    .socials svg{
      width:19px;
      height:19px;
    }

    .footer-logo{
      background:#fff;
      border-radius:14px;
      padding:14px;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .footer-logo img{
      width:105px;
      height:105px;
      object-fit:contain;
      display:block;
    }

    /* --- Services page --- */
    .services-hero{
      background:linear-gradient(180deg,rgba(0,47,99,.72),rgba(0,47,99,.72)),
        url("https://images.unsplash.com/photo-1581578731548-c64695cc6952?auto=format&fit=crop&w=1800&q=80") center/cover;
      color:#fff;
      text-align:center;
      padding:64px 0 0;
    }

    .services-hero h1{
      color:#fff;
      font-size:44px;
      margin:0 auto 14px;
      max-width:none;
    }

    .services-hero p{
      color:#eaf1fb;
      max-width:560px;
      margin:0 auto 6px;
      line-height:1.6;
    }

    .pdf-strip{
      background:var(--yellow);
      margin-top:40px;
      padding:22px 0;
      text-align:center;
    }

    .pdf-btn{
      background:var(--navy);
      color:#fff;
      border:0;
      border-radius:9px;
      padding:15px 30px;
      font-weight:800;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      gap:10px;
      box-shadow:0 10px 22px rgba(0,59,122,.25);
    }

    .service-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:20px;
      background:var(--navy);
      border-radius:var(--radius);
      padding:34px;
      box-shadow:var(--shadow);
    }

    .service-box h3{
      color:#fff;
      font-size:19px;
      margin:0 0 14px;
    }

    .service-box ul{
      margin:0 0 18px;
      padding-left:18px;
      color:#dcecff;
      line-height:1.55;
    }

    .service-box .price{
      border-top:1px solid rgba(255,255,255,.25);
      padding-top:12px;
      color:var(--yellow);
      font-family:'Inter', sans-serif;
      font-style:italic;
      font-size:15px;
    }

    @media(max-width:700px){
      .service-grid{grid-template-columns:1fr}
      .services-hero h1{font-size:32px}
    }

    @media(max-width:850px){
      .nav{height:auto;padding:18px 0;align-items:flex-start}
      .logo-card{margin-top:0;width:120px;height:120px}
      nav{gap:16px;flex-wrap:wrap;justify-content:flex-end}
      .quote-btn{padding:12px 16px}
      h1{font-size:45px}
      .hero{min-height:auto;padding:80px 0 55px}
      .cards,.panel{grid-template-columns:1fr}
      .panel-left:after{display:none}
      .panel-right{padding:34px 24px}
      .footer-inner{flex-direction:column;text-align:center}
    }

    body{overflow-x:hidden}