:root{
  --bg:#0b1220;
  --panel:#0f1a2c;
  --panel2:#0c1626;
  --ink:#eaf0ff;
  --muted:#a9b6d3;
  --line: rgba(255,255,255,.10);
  --brand:#d4af37;
  --accent:#5aa7ff;
  --shadow: 0 12px 36px rgba(0,0,0,.35);
  --r:18px;
  --max: 1160px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
img{max-width:100%;display:block}
a{color:inherit}
.container{max-width:var(--max);margin:0 auto;padding:0 18px}

.muted{color:var(--muted)}
.small{font-size:.92rem}
.big{font-size:1.06rem}
.kicker{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-size:.82rem;margin:0 0 10px}

/* Better tap + focus behavior */
button, a, input, select, textarea{
  -webkit-tap-highlight-color: transparent;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 3px solid rgba(90,167,255,.45);
  outline-offset: 2px;
}

.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(11,18,32,.72);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 18px;
}

/* Brand */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand__mark{
  width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(212,175,55,.22), rgba(90,167,255,.16));
  border:1px solid var(--line);
  color:var(--brand);
  font-weight:900;
}
.brand__text{line-height:1.1}
.brand__text strong{font-weight:850}

/* Nav */
.nav__toggle{
  display:none;
  border:1px solid var(--line);
  background:transparent;color:var(--ink);
  padding:10px 12px;border-radius:12px;
}
.nav__links{display:flex;align-items:center;gap:18px}
.nav__links a{text-decoration:none;color:var(--muted)}
.nav__links a:hover{color:var(--ink)}

/* NEW: Header phone styling */
.topbar__phone{
  text-decoration:none;
  font-weight:750;
  color:var(--ink);
  white-space:nowrap;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(15,26,44,.35);
}
.topbar__phone:hover{color:var(--ink)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:14px;
  border:1px solid rgba(212,175,55,.40);
  background:rgba(212,175,55,.14);
  color:var(--ink);
  text-decoration:none;
  box-shadow: var(--shadow);
  transition: transform .15s ease;
}
.btn:hover{transform: translateY(-1px)}
.btn--ghost{
  border:1px solid rgba(90,167,255,.45);
  background:rgba(90,167,255,.10);
  box-shadow:none;
}
.btn--small{padding:10px 12px;border-radius:12px;font-size:.95rem}

/* Hero */
.hero{
  position:relative;
  min-height: calc(90vh - 60px);
  display:grid;
  align-items:end;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero__bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform: scale(1.02);
  transition: opacity 1.2s ease-in-out;
  opacity:1;
}

.hero__bg.is-fading{
  opacity:0;
}



.hero__overlay{position:absolute;inset:0;background: radial-gradient(900px 600px at 70% 15%, rgba(90,167,255,.18), transparent 55%)}
.hero__content{
  position:relative;
  padding: 92px 18px 46px;
}
.hero h1{
  margin:0 0 12px;
  font-size: clamp(2rem, 3.6vw, 3.35rem);
  line-height:1.05;
}
.lead{max-width:62ch;font-size:1.1rem;color:var(--muted);margin:0 0 18px}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 22px}
.hero__stats{display:flex;gap:12px;flex-wrap:wrap}
.stat{
  border:1px solid var(--line);
  background:rgba(15,26,44,.55);
  border-radius:16px;
  padding:12px 14px;
  min-width: 160px;
}
.stat__num{font-weight:850}
.stat__label{color:var(--muted);font-size:.92rem}

/* Sections */
.section{padding:66px 0}
.section--alt{background:linear-gradient(180deg, rgba(15,26,44,.65), rgba(11,18,32,.85));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section__head{margin-bottom:18px}
.section__head h2{margin:0 0 6px;font-size:1.85rem}

/* Grids */
.grid{display:grid;gap:14px}
.grid--2{grid-template-columns:repeat(2, minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3, minmax(0,1fr))}

/* Cards */
.card{
  border:1px solid var(--line);
  background:rgba(15,26,44,.55);
  border-radius:var(--r);
  padding:16px;
}
.card h3{margin:0 0 8px}
.card p{margin:0;color:var(--muted)}

/* Projects */
.project{
  border:1px solid var(--line);
  background:rgba(15,26,44,.55);
  border-radius:var(--r);
  overflow:hidden;
}
.project img{aspect-ratio: 4/3;object-fit:cover}
.project__body{padding:14px 16px}
.project__body h3{margin:0 0 6px}
.project__body p{margin:0;color:var(--muted)}


.signature-badge{
  display:inline-block;
  margin:8px 0 12px;
  padding:6px 12px;
  font-size:.72rem;
  letter-spacing:.10em;
  text-transform:uppercase;
  border-radius:999px;
  border:1px solid rgba(212,175,55,.65);
  background:linear-gradient(
    135deg,
    rgba(212,175,55,.18),
    rgba(212,175,55,.08)
  );
  color:var(--brand);
  font-weight:800;
  box-shadow: 0 4px 14px rgba(212,175,55,.15);
}





/* Gallery */
.gallery{
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap:10px;
}
.thumb{
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  padding:0;
  background:transparent;
  cursor:pointer;
  min-height:88px;
}
.thumb img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;transition: transform .25s ease}
.thumb:hover img{transform: scale(1.03)}

/* Video */
.video{
  margin-top:22px;
  border:1px solid var(--line);
  background:rgba(15,26,44,.55);
  border-radius:var(--r);
  padding:16px;
}
.video__head{margin-bottom:10px}
.video video{width:100%;border-radius:14px;border:1px solid var(--line)}

.video__frame{
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

.video__player{
  filter: contrast(1.05) saturate(1.05);
}

.video-section h2{
  position:relative;
  padding-bottom:10px;
}

.video-section h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:60px;
  height:2px;
  background:var(--brand);
}


.video-links{
  display:flex;
  justify-content:center;
  gap:16px;
  margin-top:30px;
  flex-wrap:wrap;
}


.video-links{
  display:flex;
  justify-content:center;
  gap:16px;
  margin:40px 0 10px;
  flex-wrap:wrap;
}




.credibility-strip{
  text-align:center;
  padding:18px 10px;
  background:rgba(212,175,55,.06);
  border-top:1px solid rgba(212,175,55,.25);
  border-bottom:1px solid rgba(212,175,55,.25);
}

.credibility-strip a{
  color:var(--brand);
  text-decoration:none;
}

.credibility-strip a:hover{
  text-decoration:underline;
}







/* About + Panels */
.about{display:grid;grid-template-columns: 1.2fr .8fr;gap:14px;align-items:start}
.checklist{margin:12px 0 0;padding-left:18px;color:var(--muted)}
.panel{
  border:1px solid var(--line);
  background:rgba(15,26,44,.55);
  border-radius:var(--r);
  padding:16px;
}
.kv{display:grid;gap:10px;margin-top:10px}
.kv span{display:block}

/* Contact */
.contact{display:grid;grid-template-columns: 1.25fr .75fr;gap:14px}
.form{
  border:1px solid var(--line);
  background:rgba(15,26,44,.55);
  border-radius:var(--r);
  padding:16px;
}
label{display:block;font-weight:650;margin:10px 0}
input,select,textarea{
  width:100%;
  margin-top:6px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(11,18,32,.65);
  color:var(--ink);
}
textarea{resize:vertical}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;
  display:none;
  place-items:center;
  background:rgba(0,0,0,.72);
  padding:18px;
  z-index:100;
}
.lightbox.is-open{display:grid}
.lightbox__img{
  max-width:min(1100px, 96vw);
  max-height: 86vh;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow: var(--shadow);
}
.lightbox__close{
  position:absolute;top:14px;right:14px;
  width:44px;height:44px;border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(15,26,44,.6);
  color:var(--ink);
  font-size:28px;
  cursor:pointer;
}

/* Footer */
.footer{border-top:1px solid var(--line);padding:28px 0}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Tablet + down */
@media (max-width: 980px){
  .grid--3{grid-template-columns:repeat(2, minmax(0,1fr))}
  .gallery{grid-template-columns: repeat(4, minmax(0,1fr))}
  .about{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}

  /* Header wraps cleanly */
  .topbar__inner{flex-wrap:wrap}
  .brand{flex:1 1 auto}

  /* Mobile nav */
  .nav__toggle{display:inline-flex}
  .nav__links{
    display:none;
    width:100%;
  }
  .nav__links.is-open{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding:12px;
    margin-top:10px;
    border:1px solid var(--line);
    border-radius:16px;
    background:rgba(11,18,32,.94);
  }
  .nav__links a{
    width:100%;
    padding:10px 10px;
    border-radius:12px;
  }
  .nav__links a.btn{
    width:100%;
    justify-content:center;
  }

  /* Phone drops to its own row so it never squeezes */
  .topbar__phone{
    width:100%;
    text-align:center;
    margin-top:8px;
  }
}

/* Phone */
@media (max-width: 520px){
  .grid--2{grid-template-columns:1fr}
  .grid--3{grid-template-columns:1fr}
  .gallery{grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px;}



.brand-tagline{
  margin-top: 4px;
  font-size: 0.95rem;
  opacity: 0.9;
}
.brand-tagline a{
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.brand-tagline a:hover{
  opacity: 0.85;
}

.footer-tagline{
  margin-top: 10px;
  font-size: 0.95rem;
  opacity: 0.9;
}
.footer-tagline a{
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.footer-tagline a:hover{
  opacity: 0.85;
}




  /* Hero less tall on phones */
  .hero{min-height:auto}
  .hero__content{padding:78px 18px 34px}
  .lead{font-size:1.02rem}

  /* Prevent iOS zoom + better tap targets */
  input,select,textarea{
    padding:14px 14px;
    border-radius:16px;
    font-size:16px;
  }
  .btn, .btn--ghost{
    width:100%;
    padding:14px 16px;
  }
  .hero__cta{gap:10px}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn:hover{transform:none}
  .thumb img{transition:none}
}