/* Optimized Main CSS - Portfolio Site */
:root{
  --primary-color:#007bff;
  --secondary-color:#6c757d;
  --success-color:#28a745;
  --info-color:#17a2b8;
  --warning-color:#ffc107;
  --danger-color:#dc3545;
  --light-color:#f8f9fa;
  --dark-color:#343a40;
  --brand:#0d6efd;
  --ink:#102235;
  --muted:#5d6b78;
  --surface:#f5f8fb;
  --line:#dce4ec;
  --accent:#0b6b62;
}

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  line-height:1.6;
  color:var(--ink);
  background:#fff;
}

h1,h2,h3,h4,h5,h6{
  color:var(--ink);
  font-weight:700;
  letter-spacing:-.025em;
}

p{
  color:var(--muted);
}

a:focus-visible,
button:focus-visible{
  outline:3px solid rgba(13,110,253,.35);
  outline-offset:3px;
}

.navbar{
  position:sticky;
  top:0;
  z-index:1000;
  box-shadow:0 1px 0 rgba(16,34,53,.04);
}

.navbar .container{
  max-width:1320px;
}

.navbar-brand{
  font-weight:700;
  color:var(--primary-color)!important;
}

.navbar-brand strong{
  letter-spacing:.3px;
}

.navbar-nav .nav-link{
  font-weight:500;
  transition:color .2s ease;
  font-size:.9rem;
}

.navbar-nav .nav-link:hover{
  color:var(--primary-color)!important;
}

.hero-section{
  padding:4rem 0;
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  color:white;
  text-align:center;
}

.hero-section h1{
  font-size:3.5rem;
  font-weight:700;
  margin-bottom:1.5rem;
}

.hero-section .lead{
  font-size:1.25rem;
  margin-bottom:2rem;
  opacity:.9;
}

.hero-section .btn{
  font-size:1.1rem;
  padding:.75rem 2rem;
  border-radius:50px;
  font-weight:600;
}

.section-title{
  font-size:2.5rem;
  font-weight:700;
  margin-bottom:3rem;
  text-align:center;
  color:var(--dark-color);
}

.project-card{
  transition:transform .3s ease,box-shadow .3s ease;
}

.project-card:hover{
  transform:translateY(-5px);
  box-shadow:0 10px 30px rgba(0,0,0,.1);
}

.project-card .card{
  border:none;
  border-radius:15px;
  overflow:hidden;
  box-shadow:0 5px 15px rgba(0,0,0,.08);
}

.project-card .card-img-top{
  height:200px;
  object-fit:cover;
}

.project-card .card-body{
  padding:1.5rem;
}

.project-card .card-title{
  font-weight:600;
  margin-bottom:1rem;
}

.project-tags{
  margin:1rem 0;
}

.project-card .badge{
  font-weight:500;
  margin-right:.5rem;
  padding:.5rem .75rem;
  border-radius:20px;
  font-size:.85rem;
}

.project-links{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}

.project-links .btn{
  padding:.5rem 1rem;
  border-radius:25px;
  font-size:.9rem;
  font-weight:500;
}

.skills-section{
  padding:4rem 0;
  background-color:var(--light-color);
}

.skills-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:2rem;
  margin-top:3rem;
}

.skill-category{
  background:white;
  padding:2rem;
  border-radius:15px;
  box-shadow:0 5px 15px rgba(0,0,0,.08);
}

.skill-category h4{
  color:var(--primary-color);
  margin-bottom:1.5rem;
  font-weight:600;
}

.skill-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1rem;
  padding:.5rem 0;
  border-bottom:1px solid #eee;
}

.skill-item:last-child{
  border-bottom:none;
}

.skill-name{
  font-weight:500;
}

.skill-level{
  width:100px;
  height:8px;
  background-color:#e9ecef;
  border-radius:4px;
  overflow:hidden;
}

.skill-level-fill{
  height:100%;
  background:linear-gradient(90deg,var(--primary-color),var(--info-color));
  border-radius:4px;
  transition:width .3s ease;
}

.blog-post{
  background:white;
  padding:2rem;
  border-radius:15px;
  box-shadow:0 5px 15px rgba(0,0,0,.08);
  margin-bottom:2rem;
}

.blog-post h3{
  margin-bottom:1rem;
  color:var(--dark-color);
}

.blog-post .meta{
  color:var(--secondary-color);
  font-size:.9rem;
  margin-bottom:1rem;
}

.blog-post .excerpt{
  margin-bottom:1.5rem;
}

.blog-categories{
  margin-bottom:2rem;
}

.blog-categories .btn{
  margin-right:.5rem;
  margin-bottom:.5rem;
  border-radius:20px;
  font-size:.85rem;
}

.footer{
  background-color:var(--dark-color);
  color:white;
  padding:3rem 0;
  margin-top:4rem;
}

.footer h5{
  color:var(--primary-color);
  margin-bottom:1.5rem;
}

.footer a{
  color:#adb5bd;
  text-decoration:none;
  transition:color .2s ease;
}

.footer a:hover{
  color:white;
}

/* BridgeOps content system */
.home-hero{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr);
  gap:clamp(2rem,6vw,6rem);
  align-items:center;
  min-height:620px;
  padding:5rem 0 6rem;
}

.hero-copy h1{
  max-width:900px;
  margin-bottom:1.5rem;
  font-size:clamp(3rem,7vw,6.25rem);
  line-height:.96;
  letter-spacing:-.065em;
}

.hero-subtitle{
  max-width:760px;
  margin-bottom:1rem;
  color:var(--ink);
  font-size:clamp(1.25rem,2.3vw,1.7rem);
  font-weight:600;
}

.hero-summary{
  max-width:720px;
  margin-bottom:2rem;
  font-size:1.1rem;
}

.hero-signal{
  padding:2rem;
  border:1px solid var(--line);
  border-radius:1.25rem;
  background:linear-gradient(145deg,#f7fbff,#edf5f4);
  box-shadow:0 24px 60px rgba(31,52,73,.1);
}

.hero-signal ol{
  margin:0;
  padding:0;
  list-style:none;
}

.hero-signal li{
  display:grid;
  grid-template-columns:2rem 1fr;
  gap:.75rem;
  padding:1rem 0;
  border-top:1px solid rgba(16,34,53,.1);
  color:var(--ink);
  font-weight:600;
}

.hero-signal li span{
  color:var(--accent);
  font-size:.8rem;
}

.home-section{
  padding:5rem 0;
  border-top:1px solid var(--line);
}

.about-strip{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,8vw,8rem);
}

.about-strip h2{
  font-size:clamp(1.8rem,3.5vw,3rem);
  line-height:1.15;
}

.text-link{
  color:var(--brand);
  font-weight:700;
  text-decoration:none;
}

.text-link:hover{
  color:#084298;
}

.pillar-card{
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:2rem;
  border:1px solid var(--line);
  border-radius:1.25rem;
  color:inherit;
  text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}

.pillar-card:hover{
  transform:translateY(-5px);
  border-color:#a9bfd3;
  box-shadow:0 20px 45px rgba(31,52,73,.1);
}

.pillar-card h3{
  margin:.75rem 0 1rem;
  font-size:1.55rem;
}

.pillar-card .text-link{
  margin-top:auto;
}

.pillar-number{
  color:var(--accent);
  font-size:.85rem;
  font-weight:800;
  letter-spacing:.1em;
}

.workflow-section{
  margin-inline:calc(50% - 50vw);
  padding-inline:max(calc((100vw - 1140px)/2),1.5rem);
  background:var(--surface);
}

.insight-teaser{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:3rem;
}

.insight-teaser>div{
  max-width:760px;
}

.home-cta{
  margin:2rem 0 1rem;
}

.page-hero{
  max-width:850px;
}

.page-hero h1{
  font-size:clamp(2.4rem,5vw,4.5rem);
  line-height:1.05;
  letter-spacing:-.04em;
}

.eyebrow,
.project-stage{
  color:var(--brand);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.workflow{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  align-items:stretch;
  gap:1rem;
}

.workflow-step{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  padding:1.25rem;
  border:1px solid #dce4ec;
  border-radius:1rem;
  background:#f8fafc;
}

.workflow-step span{
  color:var(--brand);
  font-size:.8rem;
  font-weight:700;
}

.workflow-step small{
  color:var(--secondary-color);
}

.workflow-arrow{
  align-self:center;
  color:var(--brand);
  font-size:1.4rem;
}

.section-heading{
  max-width:720px;
  margin-bottom:2rem;
}

.project-card-new{
  border:1px solid #dce4ec;
  border-radius:1rem;
  box-shadow:0 10px 30px rgba(31,45,61,.06);
}

.project-card-new .card-body{
  display:flex;
  flex-direction:column;
  padding:1.75rem;
}

.project-card-new .btn{
  align-self:flex-start;
  margin-top:auto;
}

.project-facts{
  margin:1rem 0 1.5rem;
}

.project-facts div{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.6rem 0;
  border-top:1px solid #e9ecef;
}

.project-facts dt,
.project-facts dd{
  margin:0;
}

.project-facts dd{
  color:var(--secondary-color);
  text-align:right;
}

.cta-panel{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
  padding:2.5rem;
  border-radius:1.25rem;
  background:#eef4ff;
}

.insight-categories{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}

.insight-categories a{
  padding:.6rem 1rem;
  border:1px solid #cbd8e6;
  border-radius:999px;
  color:var(--dark-color);
  text-decoration:none;
}

.insight-categories a:hover{
  border-color:var(--brand);
  color:var(--brand);
}

.insight-group{
  padding:2rem;
  border:1px solid #dce4ec;
  border-radius:1rem;
  background:#fff;
}

.insight-link{
  padding:1rem 0;
  border-top:1px solid #e9ecef;
}

.insight-link:first-of-type{
  margin-top:1.25rem;
}

.insight-link:last-child{
  padding-bottom:0;
}

.insight-link a{
  color:var(--dark-color);
  text-decoration:none;
}

.insight-link a:hover{
  color:var(--brand);
}

.social-links{
  display:flex;
  gap:1rem;
  margin-top:1rem;
}

.social-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  background-color:var(--primary-color);
  color:white;
  border-radius:50%;
  transition:all .2s ease;
}

.social-links a:hover{
  background-color:var(--dark-color);
  transform:translateY(-2px);
}

/* Consent Banner Styles */
.consent-banner{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:rgba(33,37,41,.95);
  color:white;
  padding:1rem 0;
  z-index:9999;
  backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.1);
}

.consent-banner p{
  font-size:.9rem;
  line-height:1.4;
}

.consent-banner .btn{
  font-size:.8rem;
  padding:.375rem .75rem;
}

.consent-banner .btn-outline-secondary{
  border-color:rgba(255,255,255,.3);
  color:rgba(255,255,255,.8);
}

.consent-banner .btn-outline-secondary:hover{
  background-color:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.5);
  color:white;
}

/* Responsive Design */
@media (max-width:768px){
  .navbar-nav{
    padding:1rem 0;
  }

  .home-hero{
    grid-template-columns:1fr;
    min-height:auto;
    padding:3.5rem 0 4rem;
  }

  .hero-copy h1{
    font-size:clamp(2.75rem,14vw,4.25rem);
  }

  .about-strip,
  .insight-teaser{
    grid-template-columns:1fr;
    flex-direction:column;
    align-items:flex-start;
  }

  .home-section{
    padding:3.5rem 0;
  }

  .hero-section h1{
    font-size:2.5rem;
  }
  
  .section-title{
    font-size:2rem;
  }
  
  .hero-section{
    padding:2rem 0;
  }
  
  .skills-grid{
    grid-template-columns:1fr;
  }
  
  .consent-banner .col-md-8,
  .consent-banner .col-md-4{
    text-align:center;
    margin-bottom:1rem;
  }

  .workflow{
    grid-template-columns:1fr;
  }

  .workflow-arrow{
    transform:rotate(90deg);
    justify-self:center;
  }

  .cta-panel{
    align-items:flex-start;
    flex-direction:column;
    padding:1.75rem;
  }
}

@media (max-width:576px){
  .hero-section h1{
    font-size:2rem;
  }
  
  .project-links{
    flex-direction:column;
  }
  
  .project-links .btn{
    width:100%;
    text-align:center;
  }
  
  .consent-banner{
    padding:.75rem 0;
  }
  
  .consent-banner p{
    font-size:.8rem;
  }
}

/* Performance optimizations */
.card,.btn,.badge{
  will-change:transform;
}

.project-card:hover .card{
  will-change:transform,box-shadow;
}

.consent-banner{
  will-change:transform,opacity;
}

.consent-banner.hidden{
  transform:translateY(100%);
  opacity:0;
  transition:transform .3s ease,opacity .3s ease;
}

/* Print styles */
@media print{
  .navbar,.footer,.btn,.consent-banner{
    display:none!important;
  }
  
  .hero-section{
    background:none!important;
    color:#000!important;
  }
}