/* site.css */

*,*::before,*::after{ box-sizing:border-box; }

/* Global */
html,body{
  margin:0;
  padding:0;
  height:100%;
  background:#0C2340;
  color:#ffffff;
  font-family:"Google Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

a{ color:#ffffff; text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:5px; }

.container{
  max-width:1040px;
  margin:0 auto;
  padding:24px 20px 40px 20px;
}

/* Header / nav */
.site-header{
  position:sticky;
  top:0;
  left:0;
  width:100%;
  z-index:10;
  background:rgba(16,44,84,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(16,44,84,0.9);
}

.nav{
  max-width:1040px;
  margin:0 auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  white-space:nowrap;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  font-size:14px;
}

.nav-links a{ opacity:0.86; padding:6px 0; }
.nav-links a[aria-current="page"]{
  opacity:1;
  text-decoration:underline;
  text-underline-offset:7px;
}

.menu-btn{
  display:none;
  background:transparent;
  border:1px solid rgba(255,255,255,0.25);
  color:#ffffff;
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  font-size:14px;
  align-items:center;
}

.nav-cta{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
}

@media (max-width:820px){
  .menu-btn{
    display:inline-flex;
  }

  .nav{
    align-items:center;
  }

  /* Collapsible mobile menu without display:none glitches */
  .nav-links{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    padding-top:10px;

    max-height:0;
    overflow:hidden;
    opacity:0;
    pointer-events:none;

    transition:max-height 220ms ease, opacity 160ms ease;
  }

  .nav[data-open="true"] .nav-links{
    max-height:360px;
    opacity:1;
    pointer-events:auto;
  }

  .nav-cta{
    display:none;
  }
}

/* Page typography */
h1,h2,h3{ margin:0 0 10px 0; line-height:1.1; }
h1{ font-size:clamp(34px,4.2vw,52px); }
h2{ font-size:clamp(22px,2.6vw,30px); }

p{
  margin:0 0 12px 0;
  color:rgba(255,255,255,0.8);
  max-width:760px;
}

.kicker{
  margin-top:24px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  opacity:0.9;
}

hr{
  border:0;
  border-top:1px solid rgba(255,255,255,0.2);
  margin:28px 0;
}

/* Lists */
.clean-list{
  list-style:none;
  padding:0;
  margin:18px 0 0 0;
}

.clean-list li{
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,0.15);
}

.clean-list li:first-child{
  border-top:none;
  padding-top:0;
}

/* Extra breathing room between service row and description */
.clean-list li p{
  margin-top:6px;
}

/* Service title row */
.item-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}

.item-title a{
  min-width:0;
  display:block;
  font-weight:600;
}

.item-title small{
  color:rgba(255,255,255,0.7);
  font-size:13px;
  max-width:45%;
  text-align:right;
  white-space:normal;
  overflow-wrap:anywhere;
}

@media (max-width:600px){
  .item-title{
    flex-direction:column;
    align-items:flex-start;
  }
  .item-title small{
    max-width:100%;
    text-align:left;
    margin-top:6px;
  }
}

/* Inline CTA link */
.inline-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:14px;
  font-size:14px;
  justify-content:center;
  align-items:center;
}

.button-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid transparent;
}
.button-link span:last-child{ font-weight:600; }
.button-link:hover{
  border-bottom-color:rgba(255,255,255,0.6);
  text-decoration:none;
}

/* Footer */
.footer{
  border-top:1px solid rgba(255,255,255,0.2);
  margin-top:42px;
  padding:22px 0 30px 0;
  color:rgba(255,255,255,0.75);
  font-size:14px;
}
.footer-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* Prevent overflow on mobile */
p,a,li,small,h1,h2,h3,span{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Scrollbar (desktop / supported browsers) */
html{ scrollbar-width:thin; scrollbar-color:#0C2340 #0C2340; }
body::-webkit-scrollbar{ width:10px; }
body::-webkit-scrollbar-track{ background:#0C2340; }
body::-webkit-scrollbar-thumb{ background:#0C2340; border-radius:999px; border:0; }

/* Portfolio placeholders */
.work-list{ list-style:none; padding:0; margin:18px 0 0 0; }
.work-item{ padding:18px 0; border-top:1px solid rgba(255,255,255,0.15); }
.work-item:first-child{ border-top:none; padding-top:0; }

.work-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  min-width:0;
}

.work-name{ font-weight:600; min-width:0; }
.work-tags{
  color:rgba(255,255,255,0.7);
  font-size:13px;
  text-align:right;
  max-width:45%;
  overflow-wrap:anywhere;
  white-space:normal;
}

@media (max-width:600px){
  .work-top{ flex-direction:column; }
  .work-tags{ max-width:100%; text-align:left; margin-top:6px; }
}

.cover-ph{
  margin-top:12px;
  height:180px;
  width:100%;
  border:1px solid rgba(255,255,255,0.18);
  border-radius:14px;
  background:transparent;
}