:root{
  --max: 1120px;
  --pad: 16px;
  --border:#e7e7e7;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;line-height:1.7;color:#111}
a{color:inherit}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* Header (PC) */
header{
  position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);z-index:50;
}
.nav{
  display:flex;gap:14px;align-items:center;justify-content:space-between;padding:10px 0;
}
.nav a{padding:8px 10px;text-decoration:none;border-radius:10px}
.nav a:hover{background:#f4f4f4}
.brand{font-weight:700;letter-spacing:.02em
  font-size:20px;
}

/* Sections */
.section{padding:34px 0;border-top:1px solid var(--border)}
.section h2{margin:0 0 10px;font-size:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.card .p{padding:14px}
.note{background:#fafafa;border:1px solid var(--border);padding:12px 14px;border-radius:14px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-top:1px solid var(--border);padding:10px;text-align:left;vertical-align:top}
.btn{display:inline-block;padding:10px 14px;border:1px solid #111;border-radius:12px;text-decoration:none}
.btn.primary{background:#111;color:#fff}
.btns{display:flex;flex-wrap:wrap;gap:10px}
small{color:#555}
footer{border-top:1px solid var(--border);padding:24px 0;color:#444}

/* Hero (image with text overlay) */
.hero{
  position:relative;
  width:100%;
  height:80vh;
  min-height:520px;
  overflow:hidden;
  background:#000;
}
.hero-bg{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.02);
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.35);
}
.hero-text{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:#fff;
  font-size:52px;
  font-weight:800;
  text-align:center;
  letter-spacing:2px;
  z-index:2;
  text-shadow:
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000,
     0px  0px 12px rgba(0,0,0,0.55);
}
/* ===== Mobile Global Nav (drawer) ===== */
.menu-toggle,
.menu-close,
.nav-backdrop{
  display:none;
}

@media (max-width: 900px){
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}

@media (max-width: 768px){
  /* Mobile: switch to drawer nav */
  header .nav nav{ display:none; }
  .menu-toggle{ display:block; }
  .nav-backdrop{ display:block; }
  .g-nav{ display:flex; }
  .menu-close{ display:block; }

  .hero{height:72vh; min-height:420px;}
  .hero-text{font-size:28px; padding:0 20px;}
  /* Hide PC nav links area layout pressure */
  header{z-index:60}
  .nav nav{display:none;} /* hide desktop nav area on mobile */

  .menu-toggle{
    display:block;
    background:rgba(255,255,255,0.9);
    border:1px solid rgba(0,0,0,0.12);
    border-radius:14px;
    width:44px;
    height:44px;
    font-size:24px;
    line-height:1;
    cursor:pointer;

    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 1002;
  }

  .nav-backdrop{
    display:block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 1000;
  }

  .g-nav{
    position: fixed;
    top: 0;
    right: -86%;
    width: 86%;
    height: 100vh;
    background: rgba(20,20,20,0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    display:flex;
    flex-direction:column;
    padding: 80px 18px 18px;
    gap: 6px;
    transition: right .25s ease;
    z-index: 1001;

    touch-action: pan-y;
  }

  .g-nav a{
    color:#fff;
    padding: 14px 14px;
    text-decoration:none;
    border-radius: 12px;
  }
  .g-nav a:active{background: rgba(255,255,255,0.12);}

  .menu-close{
    display:block;
    position: fixed;
    top: 10px;
    right: 12px;
    z-index: 1003;

    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(0,0,0,0.35);
    color:#fff;
    font-size: 28px;
    line-height: 1;
    cursor:pointer;

    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }

  body.nav-open .g-nav{ right: 0; }
  body.nav-open .nav-backdrop{
    opacity: 1;
    pointer-events: auto;
  }
  body.nav-open .menu-close{
    opacity: 1;
    pointer-events: auto;
  }
  body.nav-open .menu-toggle{
    opacity: 0;
    pointer-events: none;
  }
}


/* Brand band under hero */
.brand-band{
  background:#0d2a4a;
  color:#fff;
  text-align:center;
  padding:18px 10px;
  font-size:18px;
  letter-spacing:1px;
}

/* Section rhythm */
main .section:nth-of-type(even){
  background:#f5f7fa;
}

/* Accent on headings */
.section h2{
  border-left:6px solid #0d2a4a;
  padding-left:10px;
}


/* Ensure mobile nav is hidden on desktop */
.menu-toggle,
.menu-close,
.nav-backdrop,
.g-nav{
  display:none;
}

.hero-logo{
  position:absolute;
  top:18px;
  left:18px;
  color:#fff;
  font-size:28px;
  font-weight:800;
  text-decoration:none;
  z-index:3;
  padding:10px 14px;
  border-radius:14px;
  background:rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}

@media (max-width:768px){
  .hero-logo{
    font-size:18px;
    top:14px;
    left:14px;
  }
}

/* Vision title larger */
#vision h2{
  font-size:32px;
}

/* Vision body text larger */
#vision p{
  font-size:18px;
  line-height:1.9;
}

.lead{
  font-size:18px;
  line-height:1.8;
  font-weight:500;
}

/* Card redesign (more modern) */
.card{
  background:#ffffff;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.06),
    0 2px 6px rgba(0,0,0,0.04);
  transition: transform .25s ease, box-shadow .25s ease;
}

.card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:6px;
  height:100%;
  background:#0d2a4a;
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:
    0 20px 40px rgba(0,0,0,0.08);
}

.card img{
  width:100%;
  display:block;
}

.card .p{
  padding:16px 16px 18px;
}

.card b{
  font-size:18px;
  color:#0d2a4a;
}

/* Service page background */
#service{
  background:#f5f7fa;
  border-radius:20px;
  padding:24px 0;
}

/* Hero overlay for readability */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    rgba(0,0,0,0.2),
    rgba(0,0,0,0.4)
  );
}

/* Responsive hero image */
@media (max-width:768px){
  .hero-bg{
    content:url('../img/hero_mobile.jpg');
  }
}


/* Make service images circular & uniform */


footer{
  text-align:center;
}


/* Vision image full width */
.vision-img{
  width:100%;
  height:420px;
  object-fit:cover;
  border-radius:20px;
  margin-bottom:20px;
}

/* Vision card image full */
.vision-card-img{
  width:100%;
  height:260px;
  object-fit:cover;
  border-radius:16px;
  display:block;
}

/* General card images */
.card img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}

/* Service page circular images */
#service .card img{
  width:260px;
  height:260px;
  object-fit:cover;
  border-radius:50%;
  margin:20px auto 10px;
  display:block;
}

/* Vision card image */
#vision .card img{
  width:100%;
  height:260px;
  object-fit:cover;
  border-radius:16px;
  margin:0;
}

/* Page Loader (Top only) */
#page-loader{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.98);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity .35s ease, visibility .35s ease;
}
#page-loader.is-hiding{ opacity:0; }
#page-loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }

#page-loader .loader-inner{
  text-align:center;
  padding:24px;
}
#page-loader .loader-company{
  font-weight:700;
  letter-spacing:.08em;
  margin:0 0 14px;
  font-size:20px;
  color:#0d2a4a;
}
#page-loader .loader-status{
  margin:12px 0 0;
  font-size:14px;
  color:#445;
}
to{ transform: rotate(360deg); }
}
/* Mobile tune */
@media (max-width:768px){
  #page-loader .loader-company{ font-size:18px; }
  #page-loader .loader-mark{ width:84px; height:84px; }
}

/* Loader mark (center line-reveal) */
#page-loader .loader-mark-wrap{
  width:110px;
  height:110px;
  margin:0 auto;
  position:relative;
}
#page-loader .loader-mark-line{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
#page-loader .stroke{
  
  stroke-width:10;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: loader-draw 1.35s ease-in-out infinite;
}
#page-loader .ring{
  stroke-width:10;
  stroke-dasharray: 540;
  stroke-dashoffset: 540;
  animation-delay:.05s;
}
#page-loader .spoke{
  stroke-width:12;
}
@keyframes loader-draw{
  0%{ stroke-dashoffset: 600; opacity:.15; }
  40%{ opacity:1; }
  60%{ stroke-dashoffset: 0; opacity:1; }
  100%{ stroke-dashoffset: 0; opacity:0; }
}
@media (max-width:768px){
  #page-loader .loader-mark-wrap{ width:100px; height:100px; }
}

#page-loader .stroke{
  stroke:#c9a646;
  stroke-width:10;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: loader-draw 1.35s ease-in-out infinite;
}

/* Loader mark: gold line draw (no image) */
#page-loader .stroke{
  stroke:#c9a646;
  stroke-width:10;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: loader-draw 1.35s ease-in-out infinite;
}
#page-loader .ring{ stroke-dasharray: 540; stroke-dashoffset: 540; }
#page-loader .spoke{ stroke-width:12; }


/* CTA CONTACT */
.cta-contact{
background:#0e1a2b;
color:#fff;
padding:80px 20px;
text-align:center;
}
.cta-inner{
max-width:900px;
margin:0 auto;
}
.cta-contact h2{
font-size:32px;
margin-bottom:20px;
letter-spacing:2px;
}
.cta-contact p{
font-size:16px;
line-height:1.8;
margin-bottom:30px;
}
.cta-button{
display:inline-block;
padding:15px 40px;
background:#fff;
color:#0e1a2b;
text-decoration:none;
font-weight:bold;
border-radius:4px;
transition:.3s;
}
.cta-button:hover{
background:#dfe6f2;
transform:translateY(-2px);
}


/* TOP DESIGN */
.strength{padding:80px 20px;background:#f5f7fb;text-align:center;}
.strength-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px;max-width:1000px;margin:auto;}
.strength-card{background:#fff;padding:30px;border-radius:8px;box-shadow:0 10px 25px rgba(0,0,0,0.1);}
.counter{background:#0e1a2b;color:#fff;padding:60px 20px;text-align:center;}
.counter-inner{display:flex;justify-content:center;gap:60px;flex-wrap:wrap;}
.counter-item .num{font-size:36px;font-weight:bold;margin-top:10px;}


/* RECRUIT SUPPORT */
.recruit-support,.recruit-license{
background:#0e1a2b;
color:#fff;
padding:60px 40px;
margin:60px auto;
max-width:900px;
border-radius:8px;
box-shadow:0 10px 30px rgba(0,0,0,0.25);
}

.recruit-support h2,.recruit-license h2{
font-size:28px;
margin-bottom:20px;
}

.license-list{
margin-top:20px;
padding-left:20px;
}

.license-list li{
margin-bottom:10px;
}


/* PHONE CTA */
.cta-buttons{
display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;
}

.cta-phone{
display:inline-block;
padding:15px 30px;
background:#2d5cff;
color:#fff;
text-decoration:none;
border-radius:4px;
font-weight:bold;
transition:.3s;
}

.cta-phone:hover{
background:#1d46d8;
transform:translateY(-2px);
}



/* floating phone */
.floating-phone{
position:fixed;
right:20px;
bottom:20px;
background:#2d5cff;
color:#fff;
padding:15px 20px;
border-radius:50px;
text-decoration:none;
font-weight:bold;
box-shadow:0 8px 20px rgba(0,0,0,0.3);
z-index:9999;
}

/* day flow */
.day-flow{
padding:60px 20px;
max-width:800px;
margin:auto;
}
.flow-list li{
margin-bottom:10px;
}

/* works filter */
.works-filter{
text-align:center;
margin:40px 0;
}
.filter-btn{
margin:5px;
padding:10px 20px;
border:none;
background:#0e1a2b;
color:#fff;
cursor:pointer;
}



/* hero video */
.hero-video{
position:relative;
height:70vh;
overflow:hidden;
}
.hero-video video{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
}
.hero-video-text{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:#fff;
font-size:40px;
text-align:center;
}

/* gallery */
.works-gallery{
padding:60px 20px;
text-align:center;
}
.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
max-width:1000px;
margin:auto;
}
.gallery-grid img{
width:100%;
border-radius:8px;
}

/* reveal animation */
.reveal{
opacity:0;
transform:translateY(40px);
transition:0.6s;
}
.reveal.active{
opacity:1;
transform:none;
}


/* Footer copyright center */
footer, .footer, .copyright{
text-align:center !important;
margin-left:auto;
margin-right:auto;
}


/* Work card hover effect */
.work-card{
transition: transform .35s ease, box-shadow .35s ease;
}

.work-card img{
transition: transform .45s ease;
}

.work-card:hover{
transform: translateY(-8px);
box-shadow: 0 18px 35px rgba(0,0,0,0.25);
}

.work-card:hover img{
transform: scale(1.05);
}


/* HERO DARK OVERLAY */
.hero::after{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.35);
pointer-events:none;
}

/* SCROLL FADE */
.reveal{
opacity:0;
transform:translateY(40px);
transition:0.6s ease;
}
.reveal.active{
opacity:1;
transform:none;
}

/* LIGHTBOX */
/* gallery grid */
.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
max-width:1000px;
margin:0 auto 60px;
}
.gallery-grid img{
width:100%;
cursor:pointer;
border-radius:8px;
}


/* header navigation center fix */
header nav,
.header-nav,
nav ul{
display:flex;
justify-content:center;
align-items:center;
gap:30px;
margin:0 auto;
text-align:center;
}


/* works-detail page spacing */
.gallery-grid{
padding:60px 20px;
}


/* Responsive Global Navigation (desktop + hamburger) */
.desktop-nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:30px;
  margin:0 auto;
}

.menu-toggle,
.menu-close,
.nav-backdrop,
.g-nav{
  display:none;
}

/* Mobile / narrow screens */
@media (max-width: 900px){
  .desktop-nav{ display:none; }

  .menu-toggle{
    display:block;
    position:absolute;
    right:16px;
    top:16px;
    z-index:10001;
    background:transparent;
    border:none;
    font-size:28px;
    line-height:1;
    cursor:pointer;
  }

  .nav-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.45);
    opacity:0;
    pointer-events:none;
    transition:.25s ease;
    z-index:10000;
  }
  .nav-backdrop.open{
    opacity:1;
    pointer-events:auto;
  }

  .g-nav{
    display:block;
    position:fixed;
    top:0;
    right:-320px;
    width:300px;
    height:100vh;
    background:#0e1a2b;
    padding:80px 24px 24px;
    box-shadow:-10px 0 30px rgba(0,0,0,0.25);
    transition:.25s ease;
    z-index:10002;
  }
  .g-nav.open{ right:0; }

  .g-nav a{
    display:block;
    color:#fff;
    text-decoration:none;
    padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,0.15);
  }

  .menu-close{
    display:block;
    position:fixed;
    right:16px;
    top:16px;
    z-index:10003;
    width:40px;
    height:40px;
    border-radius:999px;
    border:none;
    background:rgba(255,255,255,0.1);
    color:#fff;
    font-size:26px;
    line-height:40px;
    cursor:pointer;
    opacity:0;
    pointer-events:none;
    transition:.25s ease;
  }
  .menu-close.open{
    opacity:1;
    pointer-events:auto;
  }
}

/* Prevent background scroll when nav open */
body.nav-open{
  overflow:hidden;
}


/* Header container center */
header .container.nav{
display:flex;
justify-content:center;
align-items:center;
gap:30px;
}
header .brand{margin-right:auto;}
@media (max-width: 900px){
  header .brand{margin-right:0;}
}


/* works-detail clean */
.gallery-grid{
  padding:60px 20px;
  min-height: 40vh;
}


/* top hero banner color overlay */
.hero{
position:relative;
}
.hero::before{
content:'';
position:absolute;
inset:0;
background:rgba(10,25,50,0.45);
z-index:1;
}
.hero *{
position:relative;
z-index:2;
}


/* hero height improvement */
.hero{
min-height:75vh;
display:flex;
align-items:center;
}


/* hero slow zoom effect */
.hero{
overflow:hidden;
}

.hero img,
.hero .hero-bg{
animation: heroZoom 20s ease-in-out infinite alternate;
transform-origin:center;
}

@keyframes heroZoom{
0%{ transform:scale(1); }
100%{ transform:scale(1.08); }
}


/* Hero text weight */
.hero h1, .hero .hero-text h1, .hero-video-text h1{
font-weight:700;
text-shadow:0 4px 15px rgba(0,0,0,0.4);
}

/* Sticky header */
header{
position:sticky;
top:0;
z-index:10050;
background:#fff;
box-shadow:0 2px 12px rgba(0,0,0,0.08);
}

/* Works card bigger */
.work-card{
max-width:360px;
margin:15px auto;
}
.work-card img{
height:auto;
}


/* Hero layering fix (keep text above moving image) */
.hero{
position:relative;
}
.hero img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
z-index:0;
}
.hero::before{ z-index:1; }
.hero::after{ z-index:1; }
.hero .hero-text,
.hero .hero-content,
.hero .hero-video-text,
.hero h1, .hero h2, .hero p{
position:relative;
z-index:2;
}


/* FIX: keep hero text centered above moving image */
.hero .hero-text{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%,-50%) !important;
  z-index:2 !important;
  width: min(92%, 1100px);
  text-align:center;
}

/* FIX: ensure hero logo stays top-left */
.hero .hero-logo{
  position:absolute !important;
  top:18px !important;
  left:18px !important;
  z-index:3 !important;
}


/* Header color improvement */
header{
background:#0b2545;
color:#fff;
}

header a{
color:#fff;
}

header a:hover{
opacity:0.8;
}


/* Glass style header */
header{
background: rgba(11,37,69,0.75);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color:#fff;
}

header.scrolled{
background:#0b2545;
}

header a{
color:#fff;
}


/* Navigation hover improvement (replace box highlight with underline animation) */
header nav a{
position:relative;
padding:8px 14px;
text-decoration:none;
}

header nav a::after{
content:"";
position:absolute;
left:0;
bottom:-4px;
width:0;
height:2px;
background:#4da3ff;
transition:width 0.25s ease;
}

header nav a:hover::after{
width:100%;
}

/* remove possible hover borders/outlines */
header nav a:hover{
border:none !important;
outline:none !important;
}


/* FIX: remove pill/box highlight on nav hover/active */
header nav a,
.desktop-nav a{
background:transparent !important;
border-radius:0 !important;
box-shadow:none !important;
}

header nav a:hover,
header nav a:focus,
header nav a:active,
.desktop-nav a:hover,
.desktop-nav a:focus,
.desktop-nav a:active{
background:transparent !important;
outline:none !important;
}

/* If current page uses .active / .current / .is-active etc, keep it clean */
header nav a.active,
header nav a.current,
header nav a.is-active,
.desktop-nav a.active,
.desktop-nav a.current,
.desktop-nav a.is-active{
background:transparent !important;
}

/* Make underline visible for current page too */
header nav a.active::after,
header nav a.current::after,
header nav a.is-active::after,
.desktop-nav a.active::after,
.desktop-nav a.current::after,
.desktop-nav a.is-active::after{
width:100% !important;
}


/* Works card image hover zoom */
.work-card{
overflow:hidden;
}

.work-card img{
transition: transform 0.35s ease;
}

.work-card:hover img{
transform: scale(1.05);
}

/* Works grid (auto) */
.works-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:24px;
}
@media (max-width: 900px){
  .works-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .works-grid{ grid-template-columns: 1fr; }
}
.work-card{
  display:block;
  border-radius:14px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.06);
  text-decoration:none;
  color:inherit;
}
.work-img img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}
.work-body{ padding:16px 16px 18px; }
.work-date{ font-size:12px; opacity:0.75; margin-bottom:6px; }
.work-title{ font-size:16px; line-height:1.35; margin:0; }


/* Works card label on image */
.work-img{ position:relative; }
.work-badge{
  position:absolute;
  left:12px;
  bottom:12px;
  display:inline-block;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(11,37,69,0.78);
  color:#fff;
  font-size:12px;
  line-height:1.2;
  max-width: calc(100% - 24px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:0 8px 20px rgba(0,0,0,0.25);
}


/* CTA buttons layout fix */
.cta-buttons{
  display:flex;
  gap:14px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  margin-top:18px;
}
.cta-buttons a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}


/* Header nav alignment safety */
.desktop-nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:26px;
}


/* ===== Glass Header (frosted navigation) ===== */
header{
  background: rgba(10,20,35,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* subtle shadow so it separates from hero */
header{
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* nav link hover polish */
.desktop-nav a{
  position: relative;
  transition: color .25s ease;
}

.desktop-nav a:hover{
  color:#ffffff;
}

.desktop-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0%;
  height:2px;
  background:rgba(255,255,255,0.7);
  transition:width .25s ease;
}

.desktop-nav a:hover::after{
  width:100%;
}


/* ===== Scroll Shrink Header ===== */
header{
  transition: padding .25s ease, background .25s ease, box-shadow .25s ease;
}
header .container{
  transition: padding .25s ease, height .25s ease;
}

/* default */
header .container{
  padding-top:18px;
  padding-bottom:18px;
}

/* scrolled (compact) */
header.is-shrink .container{
  padding-top:10px;
  padding-bottom:10px;
}
header.is-shrink{
  background: rgba(10,20,35,0.78);
  box-shadow: 0 8px 25px rgba(0,0,0,0.22);
}


/* header contact button */
.nav-contact{
  margin-left:18px;
  padding:8px 16px;
  background:#0b2545;
  color:#fff !important;
  border-radius:6px;
  font-size:14px;
  text-decoration:none;
  transition:all .25s ease;
}
.nav-contact:hover{
  background:#163a63;
  transform:translateY(-1px);
}


/* ===== Header Contact Button (desktop) ===== */
.nav-contact{
  margin-left:18px;
  padding:8px 16px;
  background:#0b2545;
  color:#fff !important;
  border-radius:8px;
  font-size:14px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .2s ease, background .25s ease, opacity .25s ease;
}
.nav-contact:hover{
  background:#163a63;
  transform:translateY(-1px);
}

/* ===== Header Contact Button (mobile menu) ===== */
.nav-contact-mobile{
  margin-top:10px;
  padding:12px 14px;
  background:#0b2545;
  color:#fff !important;
  border-radius:10px;
  text-decoration:none;
  display:flex;
  justify-content:center;
}

/* ===== Brand hover fix (remove white frame) ===== */
.brand,
.brand a,
.brand a:hover,
.brand a:focus,
.brand a:active{
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* If underline hover is applied globally, disable it for brand */
.brand::after,
.brand a::after{
  content: none !important;
  display:none !important;
}


/* ===== Mobile nav cleanup fix ===== */
@media (max-width: 768px){
  /* hide desktop nav and header contact completely on mobile */
  .desktop-nav,
  .nav-contact,
  header .container.nav > nav,
  header .container.nav .nav-contact{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  /* keep only hamburger + drawer */
  .menu-toggle{
    display:block !important;
  }

  .g-nav{
    display:flex !important;
    right:-100% !important;
    width:100% !important;
    max-width:none !important;
    padding:88px 22px 24px !important;
  }

  .g-nav.open{
    right:0 !important;
  }

  .g-nav a{
    display:block;
    width:100%;
    text-align:center;
    font-size:18px;
    padding:18px 0;
  }

  .menu-close{
    display:block !important;
  }
}


/* ===== FINAL mobile drawer hard-fix ===== */
@media (max-width: 768px){
  /* never show desktop nav or desktop contact on mobile */
  .desktop-nav,
  .nav-contact,
  header .container.nav > .desktop-nav,
  header .container.nav > nav.desktop-nav,
  header .container.nav .nav-contact{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    width:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    pointer-events:none !important;
  }

  /* header row should only keep brand + hamburger */
  header .container.nav{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:0 !important;
  }

  /* force drawer to full-screen overlay */
  .g-nav{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:auto !important;
    width:100vw !important;
    max-width:100vw !important;
    height:100dvh !important;
    transform:translateX(100%) !important;
    transition:transform .28s ease !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    align-items:stretch !important;
    background:#071a35 !important;
    padding:88px 22px 24px !important;
    z-index:10002 !important;
    box-sizing:border-box !important;
  }
  .g-nav.open{
    transform:translateX(0) !important;
  }

  .g-nav a,
  .g-nav .nav-contact-mobile{
    display:flex !important;
    width:100% !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    font-size:18px !important;
    line-height:1.4 !important;
    padding:18px 0 !important;
    color:#fff !important;
    text-decoration:none !important;
    border-bottom:1px solid rgba(255,255,255,0.14) !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  .nav-backdrop{
    position:fixed !important;
    inset:0 !important;
    z-index:10001 !important;
  }

  .menu-toggle{
    position:fixed !important;
    top:12px !important;
    right:12px !important;
    z-index:10003 !important;
  }

  .menu-close{
    position:fixed !important;
    top:12px !important;
    right:12px !important;
    z-index:10004 !important;
  }
}


/* ===== Swipe-open mobile menu fix ===== */
html, body{
  max-width:100%;
  overflow-x:hidden;
}

@media (max-width: 768px){
  .g-nav{
    left:0 !important;
    right:0 !important;
    width:100vw !important;
    max-width:100vw !important;
    transform:translateX(100vw) !important;
    will-change:transform;
    overscroll-behavior:contain;
    touch-action:none;
  }
  .g-nav.open,
  body.nav-open .g-nav{
    transform:translateX(0) !important;
  }
  .nav-backdrop{
    overscroll-behavior:contain;
    touch-action:none;
  }
  body{
    overflow-x:hidden !important;
  }
  body.nav-open{
    overflow:hidden !important;
    position:fixed;
    width:100%;
  }
}