/* Shared launch-readiness fixes. Loaded after each page's embedded styles. */

.nav-group {
  display: flex;
  align-items: center;
  align-self: stretch;
}

.nav-group:hover .mega-drawer,
.nav-group:focus-within .mega-drawer {
  display: block;
}

.site-menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--paper-line, #d8d9d4);
  background: transparent;
  color: var(--charcoal, #22272b);
  cursor: pointer;
}

.site-menu-toggle::before,
.site-menu-toggle::after,
.site-menu-toggle span {
  content: "";
  position: absolute;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-menu-toggle::before { transform: translateY(-6px); }
.site-menu-toggle::after { transform: translateY(6px); }
.nav-wrap.menu-open .site-menu-toggle::before { transform: rotate(45deg); }
.nav-wrap.menu-open .site-menu-toggle::after { transform: rotate(-45deg); }
.nav-wrap.menu-open .site-menu-toggle span { opacity: 0; }

.utility-disabled {
  margin-left: 24px;
  cursor: default;
  opacity: 0.7;
}

.is-placeholder {
  cursor: default !important;
}

.form-status {
  width: 100%;
  margin-top: 10px;
  color: var(--charcoal-mute, #6b7178);
  font-size: 12px;
}

.form-status.error { color: #9b2c2c; }

.footer-newsletter .form { flex-wrap: wrap; }
.footer-bottom .links a { margin-left: 24px; color: inherit; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--olive, #6b7a3e);
  outline-offset: 3px;
}

@media (max-width: 920px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  img,
  video,
  svg {
    max-width: 100%;
  }

  .utility-bar {
    min-height: 34px;
    padding: 8px 20px;
    align-items: center;
  }

  .utility-bar > span:last-child { display: none; }
  .utility-bar .left { white-space: nowrap; }

  .nav {
    min-height: 76px;
    padding: 12px 20px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .brand-mark { width: 38px; height: 38px; }
  .brand-text .name { font-size: 21px; }
  .brand-text .group { font-size: 9px; }

  .site-menu-toggle {
    position: relative;
    display: inline-flex;
    margin-left: auto;
  }

  .nav > a:last-child:not(.brand-lockup),
  .nav > .nav-cta,
  .nav-cta {
    display: none;
  }

  .nav-items {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    gap: 0;
    padding: 10px 0 4px;
    border-top: 1px solid var(--paper-line, #d8d9d4);
  }

  .nav-wrap.menu-open .nav-items { display: flex; }

  .nav-group {
    display: block;
    width: 100%;
  }

  .nav-item {
    display: block;
    width: 100%;
    padding: 11px 4px;
    font-size: 16px;
  }

  .nav-item .chev { display: none; }
  .mega-drawer { display: none !important; }

  .hero,
  .sub-hero {
    min-height: 620px;
    height: auto;
  }

  .hero-content,
  .sub-hero-inner,
  .page-header-inner {
    width: 100%;
    max-width: none;
    padding: 72px 24px;
  }

  .hero h1,
  .sub-hero h1,
  .page-header h1 {
    font-size: clamp(46px, 14vw, 76px) !important;
    line-height: 0.96 !important;
    overflow-wrap: anywhere;
  }

  .hero-sub,
  .lede,
  .sub-hero .qual,
  .sub-hero .tag {
    max-width: 100%;
  }

  .hero-cta-row,
  .cta-inner > div:last-child,
  .sub-hero-inner > div[style*="display: flex"] {
    flex-wrap: wrap;
  }

  .btn,
  .nav-cta {
    min-height: 44px;
  }

  .theme-row,
  .intro-inner,
  .business-grid,
  .grid,
  .sector-grid,
  .sectors-grid,
  .headwaters-inner,
  .headwaters-pillars,
  .doctrine-grid,
  .doctrine-header,
  .footer-newsletter,
  .footer-inner,
  .contact-grid-inner,
  .contact-grid,
  .form-double,
  .overview-inner,
  .services-grid,
  .stats-inner,
  .case-teaser-inner,
  .related-grid,
  .principles-grid,
  .people-grid,
  .story-inner,
  .careers-intro-inner,
  .vacancies-header,
  .why-grid,
  .pillars-detail-inner,
  .reporting-inner,
  .hw-statement-inner,
  .doctrine-intro-inner,
  .post-row {
    grid-template-columns: 1fr !important;
  }

  .theme-row,
  .intro-inner,
  .sectors-inner,
  .headwaters-inner,
  .doctrine-inner,
  .footer-inner,
  .contact-grid-inner,
  .overview-inner,
  .services-inner,
  .stats-inner,
  .case-teaser-inner,
  .related-inner,
  .principles-inner,
  .leadership-inner,
  .story-inner,
  .careers-intro-inner,
  .vacancies-inner,
  .why-join-inner,
  .portfolio-list-inner,
  .symbiosis-inner,
  .pillars-detail-inner,
  .reporting-inner,
  .hw-statement-inner,
  .post-list-inner {
    width: 100%;
    max-width: none;
  }

  .intro,
  .sectors,
  .headwaters,
  .doctrine,
  .overview,
  .services,
  .related,
  .principles,
  .leadership,
  .story,
  .careers-intro,
  .vacancies,
  .why-join,
  .portfolio-list,
  .symbiosis,
  .pillars-detail,
  .reporting,
  .hw-statement,
  .doctrine-intro,
  .post-list,
  .contact-grid {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .portfolio-row {
    grid-template-columns: 52px 1fr !important;
    gap: 12px !important;
  }

  .portfolio-row .pr-body,
  .portfolio-row .pr-tag-block,
  .portfolio-row .pr-arrow {
    grid-column: 2;
  }

  .footer-newsletter {
    gap: 24px;
    padding: 32px 24px;
  }

  .footer-newsletter .form {
    width: 100%;
    flex-wrap: wrap;
  }

  .footer-newsletter input {
    width: 100%;
    min-width: 0;
  }

  .footer-inner {
    gap: 34px;
    padding: 48px 24px;
  }

  .footer-bottom {
    padding: 20px 24px;
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .footer-bottom .links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
  }

  .footer-bottom .links span,
  .footer-bottom .links a { margin-left: 0; }

  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    width: 100%;
    min-width: 0;
  }

  .case-image,
  .intro-image { min-height: 280px; }
  .doctrine-header .right { text-align: left; }
}

@media (max-width: 520px) {
  .utility-bar { font-size: 8px; letter-spacing: 0.12em; }
  .utility-bar .left .dot { margin: 0 5px; }
  .hero-content,
  .sub-hero-inner,
  .page-header-inner { padding: 56px 20px; }
  .hero h1,
  .sub-hero h1,
  .page-header h1 { font-size: clamp(42px, 15vw, 64px) !important; }
  .hero-cta-row > a,
  .hero-cta-row .btn,
  .sub-hero-inner > div[style*="display: flex"] > a,
  .sub-hero-inner > div[style*="display: flex"] .btn {
    width: 100%;
  }
  .portfolio-row { grid-template-columns: 1fr !important; }
  .portfolio-row > * { grid-column: 1 !important; }
}