:root{
    --navy: #12283C;
    --blue: #1F5C86;
    --blue-deep: #164666;
    --blue-light: #5B9BC4;
    --white: #FFFFFF;
    --paper: #F4F8FB;
    --sky: #BFE0F5;
    --sky-deep: #8FC1E3;
    --ink: #12202B;
    --ink-soft: #4C5D6B;
    --line: #D8E3EC;
    --radius: 4px;
    --maxw: 1180px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:'Source Sans 3', sans-serif;
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{
    font-family:'Oswald', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.03em;
    margin:0;
    color:var(--navy);
  }
  a{color:inherit;}
  img,svg{display:block;max-width:100%;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
  .eyebrow{
    font-family:'Oswald', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.18em;
    font-size:12.5px;
    color:var(--blue);
    font-weight:600;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  }

  /* KEYWAY DIVIDER — signature motif: a repeating key-bit tooth profile used
     as a section seam throughout the page, echoing a cut key's bitting */
  .keyway{
    height:14px;
    width:100%;
    background:
      linear-gradient(135deg, var(--white) 25%, transparent 25%) 0 0/16px 16px,
      linear-gradient(225deg, var(--white) 25%, transparent 25%) 0 0/16px 16px;
    background-color:var(--navy);
    opacity:0.9;
  }

  .hero-keyway{
    height:14px;
    width:100%;
    background:
      linear-gradient(135deg, var(--navy) 25%, transparent 25%) 0 0/16px 16px,
      linear-gradient(225deg, var(--navy) 25%, transparent 25%) 0 0/16px 16px;
    background-color:var(--white);
    opacity:0.9;
  }


  /* ---------- TOP CONTACT BAR ---------- */
  .topbar{
    background:var(--navy);
    color:var(--white);
    font-size:14px;
  }
  .topbar .wrap{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:22px;
    padding-top:9px;
    padding-bottom:9px;
    flex-wrap:wrap;
  }
  .topbar a{
    color:var(--white);
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:7px;
    opacity:0.92;
    transition:opacity 0.15s ease, color 0.15s ease;
  }
  .topbar a:hover{opacity:1; color:var(--sky);}
  .topbar svg{width:15px;height:15px;flex:none;}

  /* ---------- HEADER / LOGO ---------- */
  header.main{
    background:var(--white);
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    z-index:50;
  }
  header.main .wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:16px;
    padding-bottom:16px;
    gap:20px;
  }
  .logo{
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
  }
  .logo-badge{
    width:120px;height:56px;flex:none;
  }
  .logo-text{
    display:flex;
    flex-direction:column;
    line-height:1;
  }
  .logo-text .name1{
    font-family:'Oswald', sans-serif;
    font-weight:700;
    font-size:22px;
    color:var(--navy);
    letter-spacing:0.02em;
  }
  .logo-text .name2{
    font-family:'Oswald', sans-serif;
    font-weight:500;
    font-size:22px;
    color:var(--blue);
    letter-spacing:0.02em;
  }
  .logo-text .tagline{
    margin-top:6px;
    font-size:11.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
  .call-now{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--blue);
    color:var(--white);
    text-decoration:none;
    padding:12px 22px;
    border-radius:var(--radius);
    font-family:'Oswald', sans-serif;
    font-weight:600;
    letter-spacing:0.03em;
    font-size:16px;
    white-space:nowrap;
    transition:background 0.15s ease, transform 0.15s ease;
  }
  .call-now svg{width:18px;height:18px;transform-origin:70% 30%;}
  .call-now:hover{background:var(--blue-deep); transform:translateY(-1px);}
  .call-now:hover svg{animation:jiggle 0.5s ease;}
  @keyframes jiggle{
    0%,100%{transform:rotate(0deg);}
    25%{transform:rotate(-14deg);}
    75%{transform:rotate(14deg);}
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    background:
      radial-gradient(circle at 82% 20%, rgba(199,154,69,0.16), transparent 45%),
      linear-gradient(160deg, var(--navy) 0%, var(--blue-deep) 62%, var(--blue) 100%);
    color:var(--white);
    overflow:hidden;
  }
  .hero::before{
    /* faint blueprint grid, nods to precision fitting/keying */
    content:"";
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size:38px 38px;
    pointer-events:none;
  }
  .hero .wrap{
    position:relative;
    padding-top:76px;
    padding-bottom:70px;
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:40px;
    align-items:center;
  }
  .hero h1{
    color:var(--white);
    font-size:clamp(34px,4.6vw,54px);
    line-height:1.08;
  }
  .hero h1 span{color:var(--sky);}
  .hero p.lead{
    margin-top:18px;
    font-size:18px;
    line-height:1.6;
    color:#DCE8F1;
    max-width:46ch;
  }
  .hero-ctas{
    margin-top:30px;
    display:flex;
    gap:14px;
    flex-wrap:wrap;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 26px;
    border-radius:var(--radius);
    font-family:'Oswald', sans-serif;
    font-weight:600;
    letter-spacing:0.03em;
    font-size:15px;
    text-decoration:none;
    transition:transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  }
  .btn-primary{background:var(--white); color:var(--blue-deep);}
  .btn-primary:hover{background:var(--sky); transform:translateY(-1px);}
  .btn-outline{border:1.5px solid rgba(255,255,255,0.55); color:var(--white);}
  .btn-outline:hover{border-color:var(--white); background:rgba(255,255,255,0.08);}

  .hero-priority{
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.16);
    border-radius:6px;
    padding:26px;
    backdrop-filter:blur(2px);
  }
  .hero-priority .eyebrow{color:var(--sky);}
  .priority-list{
    list-style:none;
    margin:16px 0 0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .priority-list li{
    display:flex;
    align-items:center;
    gap:14px;
    font-family:'Oswald', sans-serif;
    font-size:17px;
    letter-spacing:0.02em;
    color:var(--white);
    padding-bottom:14px;
    border-bottom:1px solid rgba(255,255,255,0.14);
  }
  .priority-list li:last-child{border-bottom:none; padding-bottom:0;}
  .priority-list svg{width:26px;height:26px;flex:none;color:var(--sky);}

  /* ---------- SECTION HEADINGS ---------- */
  .section{padding:76px 0;}
  .section-head{
    max-width:640px;
    margin:0 auto 44px;
    text-align:center;
  }
  .section-head h2{
    font-size:clamp(26px,3.4vw,36px);
    margin-top:10px;
  }
  .section-head p{
    margin-top:14px;
    color:var(--ink-soft);
    font-size:16.5px;
    line-height:1.6;
  }
  .center{text-align:center;}

  /* ---------- SERVICE PRIORITY CARDS ---------- */
  .service-cards{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
  }
  .service-card{
    background:var(--white);
    border:1px solid var(--line);
    border-top:4px solid var(--blue);
    border-radius:var(--radius);
    padding:30px 26px;
    transition:transform 0.18s ease, box-shadow 0.18s ease;
  }
  .service-card:hover{
    transform:translateY(-5px);
    box-shadow:0 14px 30px -14px rgba(18,40,60,0.28);
  }
  .service-card .icon{
    width:52px;height:52px;
    color:var(--blue);
    margin-bottom:16px;
  }
  .service-card h3{font-size:20px; color:var(--navy);}
  .service-card p{
    margin-top:10px;
    color:var(--ink-soft);
    font-size:15px;
    line-height:1.6;
  }

  /* ---------- PRODUCTS & SERVICES DETAIL ---------- */
  .services-detail{background:var(--white);}
  .detail-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0;
    border:1px solid var(--line);
    border-radius:6px;
    overflow:hidden;
  }
  .detail-col{
    padding:34px 30px;
    border-left:1px solid var(--line);
  }
  .detail-col:first-child{border-left:none;}
  .detail-col .num{
    font-family:'Oswald', sans-serif;
    color:var(--blue);
    font-size:13px;
    letter-spacing:0.16em;
    font-weight:600;
  }
  .detail-col h3{
    margin-top:8px;
    font-size:21px;
    color:var(--navy);
    padding-bottom:16px;
    border-bottom:2px solid var(--paper);
  }
  .detail-col ul{
    list-style:none;
    margin:18px 0 0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .detail-col li{
    display:flex;
    gap:10px;
    align-items:flex-start;
    font-size:15px;
    color:var(--ink-soft);
    line-height:1.5;
  }
  .detail-col li svg{
    width:16px;height:16px;flex:none;margin-top:3px;color:var(--blue-light);
  }

  .photo-showcase{
    background:var(--paper);
  }

  .photo-carousel{
    position:relative;
    max-width:900px;
    margin:0 auto;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 18px 45px -24px rgba(18,40,60,0.35);
    background:var(--white);
  }

  .photo-slide{
    display:none;
    animation:fadeIn 0.55s ease;
  }

  .photo-slide.active{
    display:block;
  }

  .photo-slide img{
    width:100%;
    height:420px;
    object-fit:cover;
    display:block;
  }

  .photo-dots{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:16px;
  }

  .photo-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    border:none;
    background:rgba(18,40,60,0.24);
    cursor:pointer;
    padding:0;
    transition:transform 0.2s ease, background 0.2s ease;
  }

  .photo-dot.active{
    background:var(--blue);
    transform:scale(1.18);
  }

  @keyframes fadeIn{
    from{opacity:0; transform:scale(1.01);} 
    to{opacity:1; transform:scale(1);} 
  }

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--navy);
    color:#C9D8E5;
  }
  .footer-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr;
    gap:40px;
    padding-top:56px;
    padding-bottom:40px;
  }
  .footer-col h4{
    color:var(--white);
    font-size:15px;
    letter-spacing:0.08em;
    margin-bottom:16px;
  }
  .footer-brand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
  }
  .footer-brand .logo-badge{width:110px;height:100x;}
  .footer-brand span{
    font-family:'Oswald', sans-serif;
    font-size:19px;
    color:var(--white);
    letter-spacing:0.02em;
  }
  footer p{font-size:14.5px; line-height:1.7; margin:0;}
  .footer-contact{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:13px;
  }
  .footer-contact li{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14.5px;
  }
  .footer-contact a{
    color:#C9D8E5;
    text-decoration:none;
    transition:color 0.15s ease;
  }
  .footer-contact a:hover{color:var(--sky);}
  .footer-contact svg{width:16px;height:16px;flex:none;color:var(--sky);}
  .footer-social{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:6px;
    color:var(--white);
    text-decoration:none;
    border:1px solid rgba(255,255,255,0.25);
    padding:9px 16px;
    border-radius:var(--radius);
    font-size:14px;
    transition:background 0.15s ease, border-color 0.15s ease;
    width:fit-content;
  }
  .footer-social:hover{background:rgba(255,255,255,0.08); border-color:var(--sky);}
  .footer-social svg{width:17px;height:17px;}
  .footer-hours{list-style:none; margin:0; padding:0; font-size:14.5px;}
  .footer-hours li{display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px dashed rgba(255,255,255,0.1);}
  .footer-hours li:last-child{border-bottom:none;}
  .footer-bottom{
    border-top:1px solid rgba(255,255,255,0.12);
    padding:20px 0;
    align-items:center;
    gap:10px;
    font-size:13px;
    color:#8FA6B8;
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:920px){
    .hero .wrap{grid-template-columns:1fr;}
    .service-cards{grid-template-columns:1fr;}
    .detail-grid{grid-template-columns:1fr;}
    .detail-col{border-left:none; border-top:1px solid var(--line);}
    .detail-col:first-child{border-top:none;}
    .footer-grid{grid-template-columns:1fr; gap:30px;}
    .topbar .wrap{justify-content:center; text-align:center;}
    header.main .wrap{flex-direction:column; align-items:flex-start;}
    .call-now{width:100%; justify-content:center;}
  }