/* ================================================================
   HEADER — #sg-header2 (fully responsive)
   ================================================================ */
#sg-header2{
  --ink:#17151F;
  --ink-soft:#65607A;
  --line:#E3DECF;
  --violet:#5B4FE8;
  --violet-soft:#EEEBFC;
  --amber:#EFA93D;
  --white:#FFFFFF;
  --bg:#FAFAF6;
  font-family:'Poppins','Segoe UI',Helvetica,Arial,sans-serif;
  background:var(--white);
  position:sticky;
  top:0;
  z-index:1000;
}
#sg-header2 *{ box-sizing:border-box; }
/* Utility strip */
#sg-header2 .sg2-utility{
  background:var(--violet-soft);
  border-bottom:1px solid var(--line);
}
#sg-header2 .sg2-utility-inner{
  max-width:1200px;
  margin:0 auto;
  padding:8px 24px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
}
#sg-header2 .sg2-utility-inner span{
  font-size:12px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:0.02em;
}
#sg-header2 .sg2-utility-inner .sg2-dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--violet);
  flex-shrink:0;
}
/* Main bar */
#sg-header2 .sg2-main{
  border-bottom:1px solid var(--line);
  background:var(--white);
}
#sg-header2 .sg2-main-inner{
  max-width:95%;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-width:0;
}
#sg-header2 .sg2-logo{ display:block; flex-shrink:0; min-width:0; }
#sg-header2 .sg2-logo img{
  height:80px;
  width:auto;
  max-width:100%;
  display:block;
}
/* Nav pill */
#sg-header2 .sg2-nav{
  display:flex;
  align-items:center;
  gap:2px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px;
  flex-wrap:wrap;
  justify-content:center;
}
#sg-header2 .sg2-nav a{
  font-size:13.5px;
  font-weight:600;
  color:var(--ink-soft);
  text-decoration:none;
  padding:9px 16px;
  border-radius:999px;
  transition:color .2s ease, background .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
#sg-header2 .sg2-nav a:hover{
  color:var(--ink);
  background:var(--white);
  box-shadow:0 4px 12px -4px rgba(23,21,31,0.15);
}
#sg-header2 .sg2-cta{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
/* New secondary button — Get In Touch */
#sg-header2 .sg2-contact-btn{
  color:var(--violet);
  font-weight:700;
  font-size:14px;
  padding:11px 20px;
  border:1.5px solid var(--violet);
  border-radius:9px;
  text-decoration:none;
  white-space:nowrap;
  display:inline-block;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
#sg-header2 .sg2-contact-btn:hover{
  background:var(--violet);
  color:var(--white);
  transform:translateY(-2px);
}
#sg-header2 .sg2-hire-btn{
  background:linear-gradient(135deg, var(--violet) 0%, #4a3fd1 100%);
  color:var(--white);
  font-weight:700;
  font-size:14px;
  padding:12px 22px;
  border-radius:9px;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 10px 20px -8px rgba(91,79,232,0.55);
  transition:transform .2s ease, box-shadow .2s ease;
  display:inline-block;
}
#sg-header2 .sg2-hire-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 24px -8px rgba(91,79,232,0.65);
}
/* Mobile toggle (checkbox hack, no JS) */
#sg-header2 .sg2-toggle-input{ display:none; }
#sg-header2 .sg2-toggle-label{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:38px; height:38px;
  padding:6px;
  cursor:pointer;
  flex-shrink:0;
}
#sg-header2 .sg2-toggle-label span{
  display:block; height:2px; width:100%;
  background:var(--ink);
  border-radius:2px;
  transition:transform .25s ease, opacity .25s ease;
}
#sg-header2 .sg2-toggle-input:checked ~ .sg2-toggle-label span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
#sg-header2 .sg2-toggle-input:checked ~ .sg2-toggle-label span:nth-child(2){ opacity:0; }
#sg-header2 .sg2-toggle-input:checked ~ .sg2-toggle-label span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
/* ---------------- Breakpoints ---------------- */
@media (max-width: 1100px){
  #sg-header2 .sg2-main-inner{ gap:12px; padding:0 20px; }
  #sg-header2 .sg2-nav a{ padding:9px 12px; font-size:13px; }
  #sg-header2 .sg2-logo img{ height:70px; }
}
@media (max-width: 900px){
  #sg-header2 .sg2-utility-inner{ padding:8px 16px; gap:8px; }
  #sg-header2 .sg2-utility-inner span:nth-child(3),
  #sg-header2 .sg2-utility-inner span:nth-child(4),
  #sg-header2 .sg2-utility-inner .sg2-dot:nth-child(3){ display:none; }
  #sg-header2 .sg2-main-inner{ padding:10px 20px; flex-wrap:wrap; }
  #sg-header2 .sg2-logo{ order:1; }
  #sg-header2 .sg2-cta{ order:2; margin-left:auto; }
  #sg-header2 .sg2-toggle-label{ display:flex; order:3; }
  #sg-header2 .sg2-nav{
    order:4;
    flex-basis:100%;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    border-radius:16px;
    max-height:0;
    overflow:hidden;
    opacity:0;
    padding:0;
    border-color:transparent;
    background:var(--bg);
    transition:max-height .3s ease, opacity .25s ease, padding .3s ease, margin .3s ease;
  }
  #sg-header2 .sg2-toggle-input:checked ~ .sg2-nav{
    max-height:500px;
    opacity:1;
    margin-top:14px;
    margin-bottom:10px;
    padding:8px;
    border-color:var(--line);
  }
  #sg-header2 .sg2-nav a{ padding:12px 14px; border-radius:10px; text-align:left; }
}
@media (max-width: 780px){
  /* On smaller screens, keep the header from getting too crowded:
     hide the secondary Get In Touch button, keep Hire Me as the one CTA. */
  #sg-header2 .sg2-contact-btn{ display:none; }
}
@media (max-width: 640px){
  #sg-header2 .sg2-main-inner{ padding:8px 16px; gap:10px; }
  #sg-header2 .sg2-logo img{ height:60px; }
  #sg-header2 .sg2-utility-inner{ padding:7px 14px; }
  #sg-header2 .sg2-utility-inner span{ font-size:11px; }
}
@media (max-width: 480px){
  #sg-header2 .sg2-utility-inner{ gap:6px; padding:6px 12px; }
  #sg-header2 .sg2-utility-inner span{ font-size:10.5px; }
  #sg-header2 .sg2-utility-inner .sg2-dot{ width:4px; height:4px; }
  #sg-header2 .sg2-main-inner{ padding:8px 12px; gap:8px; }
  #sg-header2 .sg2-logo img{ height:52px; }
  #sg-header2 .sg2-cta .sg2-hire-btn{ padding:9px 14px; font-size:12.5px; border-radius:8px; }
  #sg-header2 .sg2-toggle-label{ width:34px; height:34px; }
}
@media (max-width: 360px){
  #sg-header2 .sg2-logo img{ height:46px; }
  #sg-header2 .sg2-cta .sg2-hire-btn{ padding:8px 12px; font-size:12px; }
  #sg-header2 .sg2-utility-inner span:nth-child(2),
  #sg-header2 .sg2-utility-inner .sg2-dot{ display:none; }
}