/* ============================================
   COMMON — Nav / Mobile Nav / Footer
   Loaded AFTER page CSS to ensure consistency.
============================================ */

/* NAV */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:22px 40px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .3s,padding .35s cubic-bezier(.16,1,.3,1);
}
nav.scrolled{border-color:#E8E8E8;padding-top:14px;padding-bottom:14px}
.nav-logo{
  font-family:'Barlow',sans-serif;font-size:20px;
  letter-spacing:.2em;color:#0A0A0A;text-decoration:none;
}
.nav-logo span{
  background:linear-gradient(135deg,#f43b47 0%,#453a94 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.nav-links{display:flex;gap:36px;list-style:none}
.nav-links a{
  font-family:'Barlow',sans-serif;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:#888;
  text-decoration:none;transition:color .2s;position:relative;
}
.nav-links a::after{
  content:'';position:absolute;bottom:-2px;left:0;
  width:0;height:1px;background:linear-gradient(135deg,#f43b47 0%,#453a94 100%);
  transition:width .3s cubic-bezier(.16,1,.3,1);
}
.nav-links a:hover,.nav-links a.active{color:#0A0A0A}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-badge{
  font-family:'Barlow',sans-serif;font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 12px;
  border:1px solid #E8E8E8;color:#AAA;
  text-decoration:none;transition:border-color .2s,color .2s;
}
.nav-badge:hover{border-color:#f43b47;color:#f43b47}
.nav-hamburger{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;cursor:pointer;padding:4px;
}
.nav-hamburger span{
  display:block;width:22px;height:1px;background:#0A0A0A;
  transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .2s;
}
.nav-hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Recruit nav accent */
.nav-links a.nav-recruit{
  background:linear-gradient(135deg,#f43b47 0%,#453a94 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  padding-left:20px;margin-left:8px;border-left:1px solid rgba(0,0,0,.12);
}
.nav-links a.nav-recruit::after{
  background:linear-gradient(135deg,#f43b47 0%,#453a94 100%) !important;
  left:20px;
  width:0;
}
.nav-links a.nav-recruit:hover::after,
.nav-links a.nav-recruit.active::after{
  width:calc(100% - 20px);
}

/* MOBILE NAV */
.nav-mobile{
  position:fixed;inset:0;z-index:99;
  background:#fff;
  display:flex;flex-direction:column;justify-content:center;
  padding:80px 40px 48px;
  opacity:0;visibility:hidden;
  transition:opacity .4s cubic-bezier(.16,1,.3,1),visibility .4s;
}
.nav-mobile.open{opacity:1;visibility:visible}
.nav-mobile-links{list-style:none;display:flex;flex-direction:column;gap:0}
.nav-mobile-links li{border-bottom:1px solid #E8E8E8}
.nav-mobile-links a{
  font-family:'Barlow',sans-serif;font-size:clamp(28px,8vw,48px);
  letter-spacing:.04em;color:#0A0A0A;text-decoration:none;
  display:block;padding:16px 0;transition:color .2s;
}
.nav-mobile-links a:hover{color:#AAA}
.nav-mobile-contact{
  margin-top:40px;font-family:'Barlow',sans-serif;font-size:10px;
  letter-spacing:.15em;text-transform:uppercase;
  color:#888;text-decoration:none;transition:color .2s;
}
.nav-mobile-contact:hover{color:#0A0A0A}

/* FOOTER */
footer{border-top:1px solid #E8E8E8}
.footer-body{
  max-width:1100px;margin:0 auto;
  padding:64px 40px 52px;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;
}
.footer-brand-logo{
  font-family:'Barlow',sans-serif;font-size:22px;letter-spacing:.2em;
  color:#0A0A0A;margin-bottom:14px;
}
.footer-brand-logo span{
  background:linear-gradient(135deg,#f43b47 0%,#453a94 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.footer-brand-catch{font-size:12px;color:#888;line-height:2;max-width:220px}
.footer-col-title{
  font-family:'Barlow',sans-serif;font-size:8px;letter-spacing:.2em;
  text-transform:uppercase;color:#AAA;
  margin-bottom:18px;padding-bottom:10px;
  border-bottom:1px solid #E8E8E8;
}
.footer-col-links{list-style:none;display:flex;flex-direction:column;gap:11px}
.footer-col-links a{
  font-size:12px;color:#555;text-decoration:none;
  transition:color .2s;display:flex;align-items:center;gap:8px;
}
.footer-col-links a::before{
  content:'';width:10px;height:1px;
  background:linear-gradient(135deg,#f43b47 0%,#453a94 100%);
  flex-shrink:0;transition:width .25s cubic-bezier(.16,1,.3,1);
}
.footer-col-links a:hover{color:#0A0A0A}
.footer-col-links a:hover::before{width:16px}
.footer-bottom{
  max-width:1100px;margin:0 auto;
  padding:18px 40px;border-top:1px solid #E8E8E8;
  display:flex;align-items:center;justify-content:space-between;
}
.footer-copy{font-family:'Barlow',sans-serif;font-size:9px;letter-spacing:.06em;color:#AAA}
.footer-bottom-nav{display:flex;gap:24px;list-style:none}
.footer-bottom-nav a{
  font-family:'Barlow',sans-serif;font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:#AAA;text-decoration:none;transition:color .2s;
}
.footer-bottom-nav a:hover{color:#0A0A0A}
.footer-bottom-nav a.nav-recruit{
  background:linear-gradient(135deg,#f43b47 0%,#453a94 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* RESPONSIVE — SP */
@media(max-width:960px){
  nav{padding:16px 24px}
  .nav-links{display:none}
  .nav-hamburger{display:flex}
  .nav-badge{margin-left:auto;margin-right:16px}
  .footer-body{grid-template-columns:1fr 1fr;gap:32px;padding:48px 24px 36px}
  .footer-brand{grid-column:1/-1}
  .footer-bottom{flex-direction:column;gap:10px;text-align:center;padding:16px 24px}
  .footer-bottom-nav{flex-wrap:wrap;justify-content:center;gap:14px}
}
@media(max-width:480px){
  .footer-body{grid-template-columns:1fr}
  .footer-brand{grid-column:auto}
}