/* /assets/css/icc.layout.css */
.container{
  width:min(var(--icc-container), calc(100% - 32px));
  margin-inline:auto;
}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(16px);
  background:rgba(246,247,249,.82);
  border-bottom:1px solid rgba(12, 51, 77, 0.05);
  transition:
    background .24s ease,
    border-color .24s ease,
    box-shadow .24s ease,
    transform .24s ease;
}

body.is-scrolled .site-header{
  background:rgba(255,255,255,.92);
  border-bottom-color:rgba(12, 51, 77, 0.09);
  box-shadow:0 16px 36px rgba(7, 27, 40, 0.06);
}

.header-shell{
  min-height:var(--icc-header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  transition:min-height .24s ease;
}

body.is-scrolled .header-shell{
  min-height:72px;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
}

.brand-mark{
  width:48px;
  height:48px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, var(--icc-primary), var(--icc-primary-2));
  color:#fff;
  font-weight:800;
  box-shadow:var(--icc-shadow);
  transition:transform .24s ease, border-radius .24s ease;
}

body.is-scrolled .brand-mark{
  transform:scale(.96);
  border-radius:14px;
}

.brand-copy{
  display:flex;
  flex-direction:column;
  line-height:1.18;
}

.brand-copy strong{
  color:var(--icc-primary);
  font-size:1rem;
}

.brand-copy span{
  color:var(--icc-text-soft);
  font-size:.82rem;
  font-family:var(--icc-font-en);
}

.main-nav{
  display:flex;
  align-items:center;
  gap:26px;
}

.main-nav a{
  position:relative;
  color:var(--icc-text-soft);
  font-weight:700;
  transition:color .22s ease;
}

.main-nav a::after{
  content:"";
  position:absolute;
  right:0;
  left:0;
  bottom:-10px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--icc-accent), var(--icc-primary));
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .22s ease;
}

.main-nav a:hover{
  color:var(--icc-primary);
}

.main-nav a[aria-current="page"]{
  color:var(--icc-primary);
}

.main-nav a:hover::after{
  transform:scaleX(1);
}

.main-nav a[aria-current="page"]::after{
  transform:scaleX(1);
}

.header-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.hero{
  padding:78px 0 54px;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:46px;
  align-items:center;
}

.section-grid{
  display:grid;
  gap:30px;
}

.section-grid-2{
  grid-template-columns:1fr 1fr;
}

.quick-strip-grid,
.card-grid,
.diag-grid,
.team-grid,
.why-grid,
.faq-grid,
.page-pill-grid,
.spectrum-stack,
.diag-detail-grid{
  display:grid;
  gap:22px;
}

.quick-strip{
  padding-bottom:10px;
}

.quick-strip-grid{
  grid-template-columns:repeat(4, 1fr);
}

.card-grid{
  grid-template-columns:repeat(3, 1fr);
}

.diag-grid{
  grid-template-columns:repeat(4, 1fr);
}

.team-grid{
  grid-template-columns:repeat(2, 1fr);
}

.why-grid{
  grid-template-columns:repeat(4, 1fr);
}

.faq-grid{
  grid-template-columns:repeat(2, 1fr);
}

.page-pill-grid{
  grid-template-columns:repeat(4, 1fr);
}

.diag-detail-grid{
  grid-template-columns:repeat(2, 1fr);
}

.heritage-shell{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.contact-grid{
  align-items:start;
  gap:34px;
}

.contact-map-shell,
.contact-panel{
  min-width:0;
}

.emergency-shell{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:20px;
}

.footer-shell{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding:28px 0 44px;
}

@media (max-width: 1100px){
  .hero-grid,
  .section-grid-2,
  .quick-strip-grid,
  .card-grid,
  .diag-grid,
  .team-grid,
  .footer-shell,
  .contact-grid,
  .why-grid,
  .faq-grid,
  .emergency-shell,
  .page-pill-grid,
  .diag-detail-grid{
    grid-template-columns:1fr;
    flex-direction:column;
  }

  .heritage-shell{
    flex-direction:column;
    align-items:flex-start;
  }

  .main-nav{
    display:none;
  }

  .hero{
    padding:54px 0 40px;
  }
}

@media (max-width: 768px){
  .container{
    width:min(var(--icc-container), calc(100% - 20px));
  }

  .section{
    padding:64px 0;
  }

  .hero{
    padding:38px 0 24px;
  }

  .header-shell{
    min-height:74px;
  }

  body.is-scrolled .header-shell{
    min-height:68px;
  }

  .brand-copy span{
    display:none;
  }

  .hero-grid{
    gap:28px;
  }

  .quick-strip-grid,
  .card-grid,
  .diag-grid,
  .team-grid,
  .why-grid,
  .faq-grid,
  .page-pill-grid,
  .diag-detail-grid,
  .spectrum-stack{
    gap:16px;
  }
}