body{
  font-family:Inter,system-ui,sans-serif;
  background:radial-gradient(circle at top left,#dbeafe 0,transparent 34rem),linear-gradient(180deg,#fff,#f8fafc 38%,#eef2ff);
  color:#0f172a;
}

.glass{
  background:rgba(255,255,255,.76);
  backdrop-filter:blur(18px);
  border:1px solid rgba(226,232,240,.82);
}

.mesh{
  background:radial-gradient(circle at 20% 20%,rgba(37,99,235,.22),transparent 28%),radial-gradient(circle at 80% 30%,rgba(124,58,237,.18),transparent 30%),radial-gradient(circle at 50% 90%,rgba(14,165,233,.15),transparent 35%);
}

.card{
  background:rgba(255,255,255,.86);
  border:1px solid #e2e8f0;
  box-shadow:0 18px 50px rgba(15,23,42,.08);
  border-radius:1.5rem;
}

.pill{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  border:1px solid #dbeafe;
  background:#eff6ff;
  color:#1d4ed8;
  padding:.4rem .8rem;
  font-weight:700;
  font-size:.78rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:.85rem 1.25rem;
  font-weight:800;
  transition:.2s ease;
}

.btn-primary{
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  color:white;
  box-shadow:0 14px 35px rgba(37,99,235,.25);
}

.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 45px rgba(37,99,235,.32);
}

.btn-secondary{
  border:1px solid #cbd5e1;
  background:white;
  color:#0f172a;
}

.btn-secondary:hover{
  background:#f8fafc;
  transform:translateY(-1px);
}

.navlink{
  font-size:.9rem;
  font-weight:700;
  color:#475569;
}

.navlink:hover,
.active{
  color:#2563eb;
}

.section{
  max-width:1120px;
  margin-inline:auto;
  padding:5rem 1.25rem;
}

.gradtext{
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Header */
.site-header{
  overflow:visible;
}

.site-header-inner{
  min-height:5.5rem;
  position:relative;
}

.profile-brand{
  display:flex;
  align-items:center;
  gap:1rem;
  font-weight:900;
  color:#0f172a;
  min-width:0;
  text-decoration:none;
}

.profile-brand img{
  width:7.75rem;
  height:7.75rem;
  border-radius:999px;
  object-fit:cover;
  object-position:center;
  border:5px solid rgba(255,255,255,.96);
  box-shadow:0 18px 42px rgba(15,23,42,.22);
  transform:translateY(1.45rem);
  background:#fff;
  flex:0 0 auto;
}

.brand-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  line-height:1.08;
  min-width:0;
}

.brand-copy strong{
  display:block;
  font-size:1.08rem;
  letter-spacing:-.02em;
  white-space:nowrap;
}

.brand-copy small{
  display:block;
  margin-top:.18rem;
  font-size:.72rem;
  color:#64748b;
  font-weight:800;
  line-height:1.12;
  white-space:normal;
}

.menu-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  border:1px solid #cbd5e1;
  background:#fff;
  color:#0f172a;
  border-radius:999px;
  padding:.65rem .9rem;
  font-weight:900;
  font-size:.86rem;
  box-shadow:0 8px 24px rgba(15,23,42,.08);
}

.menu-toggle svg{
  width:1.1rem;
  height:1.1rem;
  margin-left:.45rem;
}

.mobile-panel{
  display:none;
  position:absolute;
  left:1rem;
  right:1rem;
  top:calc(100% + .65rem);
  border:1px solid rgba(226,232,240,.95);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(18px);
  border-radius:1.25rem;
  box-shadow:0 22px 60px rgba(15,23,42,.16);
  padding:.75rem;
}

.mobile-panel a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-radius:.9rem;
  padding:.9rem 1rem;
  font-weight:900;
  color:#334155;
}

.mobile-panel a:hover,
.mobile-panel a.active{
  background:#eff6ff;
  color:#2563eb;
}

.mobile-panel .mobile-contact{
  margin-top:.35rem;
  background:#0f172a;
  color:#fff;
  justify-content:center;
}

body.menu-open .mobile-panel{
  display:block;
}

body.menu-open{
  overflow-x:hidden;
}

/* Contact card */
.contact-link{
  display:flex;
  align-items:center;
  gap:.55rem;
  border-radius:.9rem;
  padding:.55rem .65rem;
  transition:all .22s ease;
  color:#475569;
  text-decoration:none;
}

.contact-link:hover{
  background:#eff6ff;
  color:#2563eb;
  transform:translateX(3px);
}

.contact-link img.contact-icon,
.contact-icon{
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  max-width:18px !important;
  min-height:18px !important;
  max-height:18px !important;
  flex:0 0 18px !important;
  object-fit:contain !important;
  display:block;
  transition:all .25s ease;
}

.contact-link:hover .contact-icon{
  transform:scale(1.1);
}

.linkedin-icon{
  width:18px !important;
  height:18px !important;
}

/* Skill pills */
.skill-pill{
  transition:all .25s ease;
  cursor:default;
}

.skill-pill:hover{
  background:linear-gradient(135deg,#2563eb,#7c3aed)!important;
  color:#fff!important;
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(37,99,235,.25);
}

.core-pill{
  transition:all .25s ease;
  cursor:default;
}

.core-pill:hover{
  background:rgba(255,255,255,.24)!important;
  color:#fff!important;
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(15,23,42,.22);
}

/* Recommendations */
.testimonial-card{
  position:relative;
  overflow:hidden;
  transition:all .25s ease;
}

.testimonial-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 70px rgba(15,23,42,.12);
  border-color:#bfdbfe;
}

.quote-mark{
  position:absolute;
  top:1.25rem;
  right:1.5rem;
  font-size:6rem;
  line-height:1;
  font-weight:900;
  color:rgba(37,99,235,.09);
  pointer-events:none;
}

.reco-photo{
  width:5rem;
  height:5rem;
  border-radius:999px;
  object-fit:cover;
  border:4px solid #fff;
  box-shadow:0 14px 30px rgba(15,23,42,.16);
  flex:0 0 auto;
  transition:transform .25s ease;
}

.testimonial-card:hover .reco-photo{
  transform:scale(1.04);
}

.linkedin-mini{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  color:#2563eb;
  font-weight:800;
  font-size:.9rem;
  transition:all .2s ease;
  text-decoration:none;
}

.linkedin-mini:hover{
  color:#7c3aed;
  transform:translateX(2px);
}

.linkedin-mini img{
  width:1rem !important;
  height:1rem !important;
  min-width:1rem !important;
  max-width:1rem !important;
  object-fit:contain;
}

@media (max-width:900px){
  .desktop-nav,
  .desktop-contact{
    display:none!important;
  }

  .menu-toggle{
    display:inline-flex;
  }

  .site-header-inner{
    min-height:5rem;
  }

  .profile-brand img{
    width:6rem;
    height:6rem;
    border-width:4px;
    transform:translateY(1.15rem);
  }

  .brand-copy strong{
    font-size:1rem;
  }

  .brand-copy small{
    display:block;
    font-size:.64rem;
    line-height:1.1;
  }

  .section{
    padding-left:1rem;
    padding-right:1rem;
  }
}

@media (max-width:768px){
  .contact-link img.contact-icon,
  .contact-icon,
  .linkedin-icon{
    width:16px !important;
    height:16px !important;
    min-width:16px !important;
    max-width:16px !important;
    min-height:16px !important;
    max-height:16px !important;
    flex-basis:16px !important;
  }
}

@media (max-width:520px){
  .site-header-inner{
    min-height:4.65rem;
    padding-left:.9rem!important;
    padding-right:.9rem!important;
  }

  .profile-brand{
    gap:.7rem;
  }

  .profile-brand img{
    width:5.2rem;
    height:5.2rem;
    transform:translateY(1rem);
  }

  .brand-copy strong{
    font-size:.92rem;
    max-width:9.5rem;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .brand-copy small{
    font-size:.58rem;
    line-height:1.08;
  }

  .menu-toggle{
    padding:.6rem .75rem;
    font-size:.8rem;
  }

  .mobile-panel{
    left:.75rem;
    right:.75rem;
  }

  h1{
    font-size:2.55rem!important;
    line-height:1.06!important;
  }

  h2{
    font-size:2rem!important;
    line-height:1.12!important;
  }

  .section{
    padding-top:4rem;
    padding-bottom:4rem;
  }

  .hero-section{
    padding-top:5.2rem;
  }

  .reco-photo{
    width:4rem;
    height:4rem;
  }
}

@media print{
  .no-print{
    display:none!important;
  }

  body{
    background:#fff!important;
  }

  .card{
    box-shadow:none!important;
  }

  .section{
    padding:0!important;
  }
}


/* Portfolio cards and case studies */
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;
}

.project-card{
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:all .25s ease;
}

.project-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 70px rgba(15,23,42,.12);
  border-color:#bfdbfe;
}

.project-thumb-link{
  display:block;
  overflow:hidden;
  background:#e0f2fe;
}

.project-thumb{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  display:block;
  transition:transform .35s ease;
}

.project-card:hover .project-thumb{
  transform:scale(1.04);
}

.project-card-body{
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  flex:1;
}

.project-kicker{
  color:#2563eb;
  font-size:.78rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.project-card h2{
  margin-top:.75rem;
  font-size:1.35rem;
  line-height:1.18;
  font-weight:900;
  letter-spacing:-.03em;
}

.project-card p{
  margin-top:.9rem;
  color:#64748b;
  line-height:1.7;
}

.project-tags{
  margin-top:1.1rem;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

.project-tags span{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  background:#f1f5f9;
  color:#475569;
  padding:.4rem .7rem;
  font-size:.78rem;
  font-weight:800;
}

.project-tags.stacked{
  margin-top:1rem;
}

.project-link{
  margin-top:auto;
  padding-top:1.3rem;
  color:#2563eb;
  font-weight:900;
  text-decoration:none;
}

.project-link:hover{
  color:#7c3aed;
}

.back-link{
  display:inline-flex;
  margin-bottom:1.5rem;
  color:#2563eb;
  font-weight:900;
  text-decoration:none;
}

.back-link:hover{
  color:#7c3aed;
}

.case-hero-media{
  overflow:hidden;
  border-radius:1.5rem;
  border:1px solid #dbeafe;
  box-shadow:0 18px 50px rgba(15,23,42,.08);
  background:#fff;
}

.case-hero-media img{
  width:100%;
  max-height:520px;
  object-fit:cover;
  display:block;
}

.case-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:2rem;
  align-items:start;
}

.case-content{
  display:flex;
  flex-direction:column;
  gap:2rem;
}

.case-section,
.project-video{
  background:rgba(255,255,255,.86);
  border:1px solid #e2e8f0;
  box-shadow:0 18px 50px rgba(15,23,42,.08);
  border-radius:1.5rem;
  padding:2rem;
}

.case-section h2,
.case-sidebar h2{
  font-size:1.55rem;
  font-weight:900;
  letter-spacing:-.03em;
}

.case-section h3{
  margin-top:1.4rem;
  font-size:1.05rem;
  font-weight:900;
}

.case-section p{
  margin-top:1rem;
  color:#475569;
  line-height:1.85;
}

.case-list{
  margin-top:1rem;
  padding-left:1.2rem;
  color:#475569;
  line-height:1.75;
}

.case-list li{
  margin-top:.45rem;
}

.case-sidebar{
  position:sticky;
  top:8rem;
}

.project-video{
  overflow:hidden;
  padding:0;
}

.project-video video{
  width:100%;
  display:block;
  background:#0f172a;
}

.project-video figcaption{
  padding:1rem 1.25rem;
  color:#64748b;
  font-weight:800;
  font-size:.9rem;
}

@media (max-width:980px){
  .portfolio-grid{
    grid-template-columns:1fr;
  }

  .case-layout{
    grid-template-columns:1fr;
  }

  .case-sidebar{
    position:static;
  }
}

@media (max-width:520px){
  .project-card-body,
  .case-section{
    padding:1.3rem;
  }

  .project-video figcaption{
    padding:.85rem 1rem;
  }
}


/* Five-project portfolio layout */
.project-card-placeholder{
  border-style:dashed;
}

.project-card-placeholder .project-kicker{
  color:#7c3aed;
}

.project-card-placeholder .project-thumb{
  filter:saturate(.92);
}



/* Construction safety project */
.project-thumb[alt*="Construction Site Safety"]{
  object-position:center center;
}


/* About Shivani homepage section */
.about-shivani-card{
  position:relative;
  overflow:hidden;
}

.about-shivani-card::before{
  content:"";
  position:absolute;
  inset:auto -8rem -9rem auto;
  width:18rem;
  height:18rem;
  border-radius:999px;
  background:radial-gradient(circle, rgba(37,99,235,.16), transparent 70%);
  pointer-events:none;
}

@media (max-width:520px){
  }


/* Blog framework */
.blog-topic-strip{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
}

.blog-topic-strip span{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  background:#fff;
  border:1px solid #dbeafe;
  color:#2563eb;
  padding:.55rem .85rem;
  font-size:.85rem;
  font-weight:900;
  box-shadow:0 10px 25px rgba(15,23,42,.05);
}

.blog-cover{
  width:100%;
  max-height:520px;
  object-fit:cover;
  display:block;
}

.blog-content{
  max-width:820px;
}

.blog-content h2{
  margin-top:2rem;
  font-size:1.75rem;
  font-weight:900;
  letter-spacing:-.03em;
}

.blog-content h3{
  margin-top:1.5rem;
  font-size:1.25rem;
  font-weight:900;
}

.blog-content p,
.blog-content li{
  color:#475569;
  line-height:1.85;
  font-size:1.05rem;
}

.blog-content p{
  margin-top:1rem;
}

.blog-content ul{
  margin-top:1rem;
  padding-left:1.2rem;
}

.blog-content a{
  color:#2563eb;
  font-weight:800;
}


/* Portfolio filter */
.portfolio-filter{
  display:inline-flex;
  flex-wrap:wrap;
  gap:.65rem;
  border:1px solid #dbeafe;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px);
  border-radius:999px;
  padding:.45rem;
  box-shadow:0 16px 45px rgba(15,23,42,.07);
}

.portfolio-filter-btn{
  border:0;
  border-radius:999px;
  background:transparent;
  color:#475569;
  cursor:pointer;
  font-weight:900;
  padding:.75rem 1rem;
  transition:all .2s ease;
}

.portfolio-filter-btn:hover{
  color:#2563eb;
  background:#eff6ff;
}

.portfolio-filter-btn.active{
  color:#fff;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  box-shadow:0 10px 25px rgba(37,99,235,.22);
}

.project-card[hidden]{
  display:none!important;
}

@media (max-width:640px){
  .portfolio-filter{
    border-radius:1.25rem;
    width:100%;
  }

  .portfolio-filter-btn{
    width:100%;
    text-align:center;
  }
}


/* Global footer */
.site-footer a{
  color:#cbd5e1;
  font-weight:800;
  text-decoration:none;
  transition:all .2s ease;
}

.site-footer a:hover{
  color:#fff;
  transform:translateX(2px);
}

.footer-heading{
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#93c5fd;
}

.site-footer .footer-contact-link{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  padding:.65rem .9rem;
  font-size:.9rem;
}

.site-footer .footer-contact-link:hover{
  background:rgba(255,255,255,.14);
  transform:translateY(-1px);
}

.footer-linkedin-icon{
  width:16px!important;
  height:16px!important;
  min-width:16px!important;
  object-fit:contain;
  filter:brightness(0) invert(1);
}

.site-footer span{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  color:#dbeafe;
  padding:.45rem .7rem;
  font-size:.78rem;
  font-weight:800;
}


/* Creative asset library */
.asset-gallery{
  display:grid;
  gap:1.25rem;
  margin-top:1.5rem;
}

.asset-gallery-wide{
  grid-template-columns:1fr;
}

.asset-gallery-characters{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.asset-gallery figure{
  overflow:hidden;
  border:1px solid #e2e8f0;
  border-radius:1.25rem;
  background:#fff;
  box-shadow:0 18px 45px rgba(15,23,42,.07);
}

.asset-gallery img{
  display:block;
  width:100%;
  height:100%;
  max-height:560px;
  object-fit:contain;
  background:linear-gradient(145deg,#f8fafc,#eef2ff);
  padding:1rem;
  -webkit-user-drag:none;
  user-select:none;
}

.asset-gallery-wide img{
  object-fit:cover;
  padding:0;
  aspect-ratio:16/9;
}

.asset-gallery figcaption{
  padding:.85rem 1rem;
  border-top:1px solid #e2e8f0;
  color:#64748b;
  font-size:.85rem;
  font-weight:800;
}

.protected-gallery{
  position:relative;
  user-select:none;
}

.protected-gallery img,
.protected-gallery video{
  -webkit-user-drag:none;
  user-select:none;
}

.asset-copyright-overlay{
  position:absolute;
  right:1rem;
  bottom:1rem;
  z-index:2;
  display:inline-flex;
  border-radius:999px;
  background:rgba(15,23,42,.72);
  color:#fff;
  padding:.45rem .7rem;
  font-size:.75rem;
  font-weight:900;
  backdrop-filter:blur(8px);
}

.asset-rights-note{
  border-left:4px solid #2563eb;
  background:#eff6ff;
  padding:1.5rem;
  border-radius:0 1rem 1rem 0;
}

@media (min-width:760px){
  .asset-gallery-wide{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .asset-gallery-wide figure:first-child{
    grid-column:1/-1;
  }

  .asset-gallery-characters{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:640px){
  .asset-gallery-characters{
    grid-template-columns:1fr;
  }
}


/* Visual Learning Design Studio */
.animated-asset-feature{
  display:grid;
  gap:1.5rem;
  align-items:center;
  margin-top:1.5rem;
  padding:1.25rem;
  border:1px solid #ddd6fe;
  border-radius:1.5rem;
  background:linear-gradient(145deg,#faf5ff,#eef2ff);
  box-shadow:0 18px 45px rgba(76,29,149,.08);
}

.animated-asset-feature img{
  display:block;
  width:100%;
  max-width:360px;
  margin-inline:auto;
  border-radius:1.25rem;
  background:#fff;
  -webkit-user-drag:none;
  user-select:none;
}

.animated-asset-feature h3{
  margin-top:.5rem;
  font-size:1.5rem;
  font-weight:900;
  color:#0f172a;
}

.animated-asset-feature p{
  margin-top:.75rem;
  color:#475569;
  line-height:1.8;
}

.workflow-steps{
  display:grid;
  gap:1rem;
  margin-top:1.5rem;
  padding:0;
  list-style:none;
  counter-reset:workflow;
}

.workflow-steps li{
  position:relative;
  counter-increment:workflow;
  padding:1rem 1rem 1rem 3.75rem;
  border:1px solid #e2e8f0;
  border-radius:1rem;
  background:#fff;
  color:#475569;
  line-height:1.75;
}

.workflow-steps li::before{
  content:counter(workflow);
  position:absolute;
  left:1rem;
  top:1rem;
  display:grid;
  place-items:center;
  width:2rem;
  height:2rem;
  border-radius:999px;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  color:#fff;
  font-weight:900;
}

.project-video video{
  display:block;
  width:100%;
  max-height:720px;
  background:#020617;
}

.project-video figcaption{
  padding:.9rem 1rem;
  color:#64748b;
  font-size:.85rem;
  font-weight:800;
}

@media (min-width:760px){
  .animated-asset-feature{
    grid-template-columns:minmax(240px,.75fr) 1.25fr;
    padding:1.75rem;
  }
}


/* Recruiter-ready portfolio additions */
.design-studio-banner{
  position:relative;
  overflow:hidden;
  border:1px solid #e2e8f0;
  border-radius:1.5rem;
  background:#0f172a;
  box-shadow:0 24px 65px rgba(15,23,42,.16);
}

.design-studio-banner img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  -webkit-user-drag:none;
  user-select:none;
}

@media (max-width:640px){
  .design-studio-banner{
    border-radius:1rem;
  }

  .design-studio-banner img{
    aspect-ratio:4/3;
  }
}

.looping-asset-video{display:block;width:100%;height:auto;object-fit:contain;border-radius:inherit;background:transparent;}
.animated-asset-feature .looping-asset-video{max-width:100%;}
.asset-gallery figure .looping-asset-video{width:100%;aspect-ratio:1/1;object-fit:contain;}