:root{
      --navy:#062B52;
      --navy-dark:#031B33;
      --yellow:#F9B900;
      --yellow-2:#FFC928;
      --text:#0A2342;
      --muted:#59677A;
      --line:#E8ECF1;
      --white:#FFFFFF;
      --soft:#F7F8FA;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Arial, Helvetica, sans-serif;
      color:var(--text);
      background:#fff;
    }
    a{text-decoration:none;color:inherit}
    img{max-width:100%;display:block}

    .container{
      width:min(1460px,calc(100% - 48px));
      margin:auto;
    }

    /* Header */
    header{
      position:sticky;
      top:0;
      z-index:50;
      background:#fff;
      border-bottom:1px solid #eceff3;
    }
    .nav{
      height:78px;
      display:grid;
      grid-template-columns:210px 1fr auto;
      align-items:center;
      gap:24px;
    }
    .logo-wrap{
      display:flex;
      align-items:center;
    }
    .logo-wrap img{
      width:150px;
      max-height:64px;
      object-fit:contain;
    }
    .menu{
      display:flex;
      justify-content:center;
      gap:42px;
      font-size:14px;
      font-weight:900;
      text-transform:uppercase;
    }
    .menu a{
      position:relative;
      padding:28px 0 24px;
    }
    .menu a.active::after,
    .menu a:hover::after{
      content:"";
      position:absolute;
      left:50%;
      bottom:17px;
      width:34px;
      height:4px;
      transform:translateX(-50%);
      border-radius:999px;
      background:var(--yellow);
    }
    .nav-actions{
      display:flex;
      align-items:center;
      gap:14px;
    }
    .btn{
      min-height:44px;
      padding:0 20px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      border-radius:4px;
      font-weight:900;
      text-transform:uppercase;
      border:2px solid transparent;
      transition:.2s ease;
      white-space:nowrap;
    }
    .btn:hover{transform:translateY(-1px)}
    .btn-yellow{background:var(--yellow);color:var(--navy-dark)}
    .btn-navy{background:var(--navy);color:#fff}
    .btn-outline{border-color:#A8B1BE;color:var(--navy);background:#fff}

    /* Hero */
    .hero{
      background:linear-gradient(90deg,#fff 0%,#fff 30%,#f7f4ef 60%,#f1eee9 100%);
      overflow:hidden;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:34% 38% 28%;
      min-height:520px;
      align-items:stretch;
    }
    .hero-copy{
      padding:54px 0 42px;
      position:relative;
      z-index:2;
    }
    .kicker{
      color:var(--yellow);
      font-weight:900;
      letter-spacing:.8px;
      font-size:18px;
      text-transform:uppercase;
      margin-bottom:10px;
    }
    h1{
      margin:0;
      font-size:clamp(48px,5vw,82px);
      line-height:.92;
      letter-spacing:-2.8px;
      text-transform:uppercase;
      color:var(--navy);
    }
    h1 span{color:var(--yellow)}
    .lead{
      max-width:520px;
      margin:22px 0 26px;
      color:#2c3643;
      font-size:18px;
      line-height:1.45;
    }
    .hero-buttons{
      display:flex;
      gap:18px;
      flex-wrap:wrap;
    }

    .hero-photo{
      position:relative;
      min-height:520px;
      overflow:hidden;
    }
    .hero-photo img{
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center;
    }
    .hero-photo::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:1;
      background:linear-gradient(90deg,rgba(255,255,255,.65),rgba(255,255,255,0) 25%,rgba(255,255,255,0) 100%);
      pointer-events:none;
    }

    .service-panel{
      padding:36px 0 36px 26px;
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:14px;
      align-content:center;
    }
    .service-card{
      min-height:150px;
      background:#fff;
      border:1px solid #e1e4e8;
      border-radius:8px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:16px;
      box-shadow:0 6px 20px rgba(0,0,0,.03);
      cursor:pointer;
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .service-card:hover{
      transform:translateY(-4px);
      box-shadow:0 14px 28px rgba(6,43,82,.14);
      border-color:var(--yellow);
    }
    .service-card:focus-visible{
      outline:3px solid var(--yellow);
      outline-offset:3px;
    }
    .service-icon{
      font-size:42px;
      margin-bottom:10px;
      line-height:1;
    }
    .service-card strong{
      font-size:15px;
      line-height:1.05;
      color:var(--navy);
      text-transform:uppercase;
    }

    .yellow-edge{
      height:8px;
      background:linear-gradient(90deg,var(--yellow),var(--yellow-2));
    }

    /* trust strip */
    .trust-strip{
      background:var(--navy);
      color:#fff;
    }
    .trust-grid{
      min-height:94px;
      display:grid;
      grid-template-columns:repeat(3,1fr);
      align-items:center;
    }
    .trust-item{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:16px;
      min-height:60px;
      border-right:1px solid rgba(255,255,255,.22);
      font-weight:900;
      text-transform:uppercase;
    }
    .trust-item:last-child{border-right:0}
    .trust-icon{
      font-size:32px;
      color:var(--yellow);
    }
    .trust-item small{
      display:block;
      font-size:12px;
      opacity:.88;
      margin-top:2px;
    }

    .area-strip{
      background:var(--yellow);
      color:var(--navy-dark);
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.5px;
    }
    .area-inner{
      min-height:52px;
      display:flex;
      justify-content:center;
      align-items:center;
      gap:18px;
      text-align:center;
    }

    /* about */
    .section{
      padding:80px 0;
    }
    .about-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:56px;
      align-items:center;
    }
    .section-label{
      color:var(--yellow);
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.8px;
      margin-bottom:8px;
    }
    h2{
      margin:0;
      color:var(--navy);
      font-size:clamp(36px,4vw,62px);
      line-height:.98;
      text-transform:uppercase;
      letter-spacing:-1.7px;
    }
    h2 span{color:var(--yellow)}
    .about-copy p{
      color:var(--muted);
      font-size:17px;
      line-height:1.65;
      max-width:650px;
    }
    .checks{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px 24px;
      margin-top:28px;
    }
    .check{
      display:flex;
      align-items:flex-start;
      gap:10px;
      color:#313d4c;
      font-weight:700;
    }
    .check b{
      width:22px;
      height:22px;
      flex:0 0 22px;
      display:grid;
      place-items:center;
      border-radius:50%;
      background:var(--yellow);
      color:var(--navy);
      font-size:13px;
    }

    .gallery-card{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      grid-template-rows:240px 210px;
      gap:10px;
    }
    .gallery-card img{
      width:100%;
      height:100%;
      object-fit:cover;
      border-radius:8px;
    }
    .gallery-card .big{
      grid-row:1/3;
    }
    .quote-card{
      background:var(--navy);
      color:#fff;
      border-radius:8px;
      padding:26px;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }
    .quote-card h3{
      margin:0 0 10px;
      text-transform:uppercase;
      font-size:26px;
      line-height:1.05;
    }
    .quote-card h3 span{color:var(--yellow)}
    .quote-card p{
      margin:0 0 18px;
      color:#d7e2ec;
      line-height:1.45;
    }

    /* footer */
    footer{
      background:var(--navy-dark);
      color:#fff;
      padding:30px 0;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:220px 1fr auto;
      align-items:center;
      gap:30px;
    }
    .footer-logo img{width:150px}
    .footer-info{
      display:flex;
      gap:30px;
      flex-wrap:wrap;
      color:#d9e3ec;
      font-size:14px;
      font-weight:700;
    }
    .footer-info a{color:#fff}
    .social{
      font-weight:900;
      text-transform:uppercase;
      display:flex;
      align-items:center;
      gap:12px;
    }
    .social span{
      width:34px;
      height:34px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:var(--yellow);
      color:var(--navy-dark);
    }


    .menu-toggle{
      display:none;
      width:46px;
      height:46px;
      border:0;
      background:var(--navy);
      color:#fff;
      border-radius:6px;
      cursor:pointer;
      align-items:center;
      justify-content:center;
      flex-direction:column;
      gap:5px;
      padding:0;
    }
    .menu-toggle span{
      width:23px;
      height:3px;
      background:#fff;
      border-radius:99px;
      display:block;
      transition:.25s ease;
    }

    .mobile-menu{
      display:none;
    }

    @media(max-width:820px){
      header{
        position:sticky;
        top:0;
        z-index:1000;
      }

      .nav{
        grid-template-columns:1fr auto auto !important;
        height:70px;
        position:relative;
      }

      .menu{
        display:none !important;
      }

      .menu-toggle{
        display:flex;
      }

      .nav-actions{
        gap:8px;
      }

      .nav-actions .btn-navy{
        display:none;
      }

      .nav-actions .btn-yellow{
        min-height:42px;
        padding:0 12px;
        font-size:12px;
      }

      .mobile-menu{
        display:block;
        position:absolute;
        top:70px;
        left:0;
        right:0;
        background:#fff;
        border-top:1px solid #edf0f3;
        border-bottom:1px solid #dfe4ea;
        box-shadow:0 12px 30px rgba(3,27,51,.15);
        transform:translateY(-12px);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transition:.22s ease;
      }

      .mobile-menu.open{
        transform:translateY(0);
        opacity:1;
        visibility:visible;
        pointer-events:auto;
      }

      .mobile-menu a{
        display:flex;
        align-items:center;
        justify-content:space-between;
        min-height:54px;
        padding:0 20px;
        border-bottom:1px solid #edf0f3;
        color:var(--navy);
        font-size:14px;
        font-weight:900;
        text-transform:uppercase;
      }

      .mobile-menu a:last-child{
        border-bottom:0;
      }

      .mobile-menu a:hover,
      .mobile-menu a:active{
        background:#fff8dc;
        color:var(--navy-dark);
      }

      .menu-toggle.active span:nth-child(1){
        transform:translateY(8px) rotate(45deg);
      }
      .menu-toggle.active span:nth-child(2){
        opacity:0;
      }
      .menu-toggle.active span:nth-child(3){
        transform:translateY(-8px) rotate(-45deg);
      }
    }

    @media(max-width:520px){
      .nav-actions .btn-yellow{
        font-size:0;
        width:46px;
        min-width:46px;
        padding:0;
      }
      .nav-actions .btn-yellow::before{
        content:"☎";
        font-size:19px;
      }
    }

    @media(max-width:1100px){
      .menu{gap:20px;font-size:12px}
      .hero-grid{grid-template-columns:42% 58%}
      .service-panel{grid-column:1/3;padding:24px 0 34px;grid-template-columns:repeat(3,1fr)}
      .hero-photo{min-height:470px}
    }
    @media(max-width:820px){
      .container{width:min(100% - 28px,1460px)}
      .nav{grid-template-columns:1fr auto;height:70px}
      .menu{display:none}
      .nav-actions .btn-navy{display:none}
      .logo-wrap img{width:120px}
      .hero-grid{grid-template-columns:1fr}
      .hero-copy{padding:42px 0 28px}
      .hero-photo{min-height:360px}
      .service-panel{grid-column:auto;grid-template-columns:repeat(2,1fr);padding-left:0}
      .trust-grid{grid-template-columns:1fr}
      .trust-item{border-right:0;border-bottom:1px solid rgba(255,255,255,.16)}
      .about-grid{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr}
      .gallery-card{grid-template-columns:1fr;grid-template-rows:auto}
      .gallery-card .big{grid-row:auto}
      .gallery-card img{height:260px}
    }
    @media(max-width:520px){
      h1{font-size:46px}
      .service-panel{grid-template-columns:1fr 1fr}
      .service-card{min-height:128px}
      .checks{grid-template-columns:1fr}
      .nav-actions .btn-yellow{padding:0 12px;font-size:12px}
    }
  
    /* ===== MOBILE HEADER / HERO FIX ===== */
    @media(max-width:520px){
      .container{
        width:calc(100% - 28px);
      }

      .nav{
        grid-template-columns:1fr auto auto !important;
        gap:10px;
        height:72px;
      }

      .logo-wrap img{
        width:108px;
        max-height:56px;
      }

      /* Keep only a clean phone icon in the header on small phones */
      .nav-actions .btn-yellow{
        width:46px !important;
        min-width:46px !important;
        height:46px;
        min-height:46px;
        padding:0 !important;
        overflow:hidden;
        font-size:0 !important;
        border-radius:7px;
      }

      .nav-actions .btn-yellow::before{
        content:"☎";
        font-size:20px;
        line-height:1;
      }

      .menu-toggle{
        width:46px;
        height:46px;
        flex:0 0 46px;
      }

      .hero-copy{
        padding:40px 0 30px;
      }

      .kicker{
        font-size:16px;
        margin-bottom:14px;
      }

      h1{
        font-size:clamp(42px,12vw,58px);
        line-height:.96;
        letter-spacing:-1.8px;
      }

      .lead{
        font-size:17px;
        line-height:1.5;
        margin:22px 0 24px;
      }

      .hero-buttons{
        gap:12px;
      }

      .hero-buttons .btn{
        width:100%;
        min-height:50px;
        font-size:14px;
      }

      .hero-photo{
        min-height:330px;
        height:330px;
        border-radius:10px;
        margin-bottom:8px;
      }

      .hero-photo img{
        object-position:66% center;
      }

      .service-panel{
        grid-template-columns:1fr 1fr;
        gap:12px;
        padding-top:18px;
      }

      .service-card{
        min-height:120px;
        padding:12px 8px;
      }

      .service-icon{
        font-size:34px;
        margin-bottom:8px;
      }

      .service-card strong{
        font-size:12px;
      }
    }

  
    /* ===== ADDED: OUR WORK GALLERY ===== */
    .work-gallery-section{
      padding:72px 0 82px;
      background:var(--soft);
      border-top:1px solid var(--line);
    }
    .work-gallery-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:24px;
      margin-bottom:30px;
    }
    .work-gallery-head p{
      margin:0;
      max-width:620px;
      color:var(--muted);
      line-height:1.6;
    }
    .work-gallery-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px;
    }
    .work-gallery-item{
      position:relative;
      overflow:hidden;
      min-height:260px;
      border-radius:12px;
      background:#dfe5eb;
      box-shadow:0 8px 26px rgba(6,43,82,.08);
    }
    .work-gallery-item.large{
      grid-column:span 2;
    }
    .work-gallery-item img{
      width:100%;
      height:100%;
      min-height:260px;
      object-fit:cover;
      transition:transform .35s ease;
    }
    .work-gallery-item:hover img{
      transform:scale(1.035);
    }
    .work-gallery-overlay{
      position:absolute;
      left:0;right:0;bottom:0;
      padding:42px 18px 16px;
      color:#fff;
      background:linear-gradient(transparent,rgba(3,27,51,.88));
    }
    .work-gallery-overlay strong{
      display:block;
      font-size:17px;
      text-transform:uppercase;
    }
    .work-gallery-overlay span{
      display:block;
      margin-top:4px;
      font-size:13px;
      opacity:.92;
    }

    /* ===== ADDED: EXPANDED FOOTER ===== */
    footer{
      padding:48px 0 22px;
    }
    .footer-main{
      display:grid;
      grid-template-columns:1.15fr 1fr 1fr 1fr;
      gap:36px;
      align-items:start;
    }
    .footer-brand p{
      color:#cbd7e2;
      line-height:1.6;
      margin:14px 0 0;
      max-width:330px;
    }
    .footer-title{
      margin:0 0 14px;
      color:var(--yellow);
      font-size:14px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.7px;
    }
    .footer-links{
      display:grid;
      gap:10px;
      color:#d9e3ec;
      font-size:14px;
    }
    .footer-links a:hover{
      color:var(--yellow);
    }
    .social-links{
      display:flex;
      gap:10px;
      margin-top:14px;
    }
    .social-link{
      width:40px;
      height:40px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:var(--yellow);
      color:var(--navy-dark);
      font-weight:900;
      transition:.2s ease;
    }
    .social-link:hover{
      transform:translateY(-2px);
      background:#fff;
    }
    .footer-bottom{
      margin-top:34px;
      padding-top:20px;
      border-top:1px solid rgba(255,255,255,.14);
      display:flex;
      justify-content:space-between;
      gap:20px;
      flex-wrap:wrap;
      color:#aebdca;
      font-size:13px;
    }

    @media(max-width:1000px){
      .work-gallery-grid{grid-template-columns:repeat(2,1fr)}
      .footer-main{grid-template-columns:1fr 1fr}
    }
    @media(max-width:650px){
      .work-gallery-head{display:block}
      .work-gallery-head p{margin-top:12px}
      .work-gallery-grid{grid-template-columns:1fr}
      .work-gallery-item.large{grid-column:span 1}
      .footer-main{grid-template-columns:1fr}
    }


    /* ===== REAL PROJECT GALLERY: PHOTOS + VIDEOS ===== */
    .project-media{
      width:100%;
      height:100%;
      min-height:260px;
      object-fit:cover;
      display:block;
      background:#071f38;
    }
    video.project-media{cursor:pointer}
    .work-gallery-item.video-item::before{
      content:"▶";
      position:absolute;
      z-index:3;
      top:16px;
      right:16px;
      width:44px;
      height:44px;
      display:grid;
      place-items:center;
      border-radius:50%;
      background:rgba(249,185,0,.95);
      color:var(--navy-dark);
      font-size:17px;
      font-weight:900;
      pointer-events:none;
      box-shadow:0 7px 18px rgba(0,0,0,.18);
    }
    .work-gallery-caption{
      position:absolute;
      left:0;right:0;bottom:0;
      z-index:2;
      padding:46px 18px 16px;
      color:#fff;
      background:linear-gradient(transparent,rgba(3,27,51,.9));
      pointer-events:none;
    }
    .work-gallery-caption strong{
      display:block;
      font-size:16px;
      text-transform:uppercase;
    }
    .work-gallery-caption span{
      display:block;
      margin-top:4px;
      font-size:12px;
      opacity:.9;
    }