/* Shared logo and header geometry across IntotheNXT pages.
   Keep the visual anchor stable while retaining page-specific navigation. */
:root{--intothenxt-header-height:96px;--intothenxt-logo-width:210px;--intothenxt-logo-max-height:66px}
@media(max-width:950px){:root{--intothenxt-header-height:92px;--intothenxt-logo-width:175px;--intothenxt-logo-max-height:56px}}

/* Common page headers, legacy case navigation and homepage hero navigation. */
.site-header .container.nav,
.site-header .container.nav-row,
.site-header .nav-row,
header:not(.hero):not(.topbar) .wrap.nav,
header.hero .hero-top,
header.hero > .nav.shell,
header.topbar .bar{
  box-sizing:border-box!important;
  width:min(1180px,calc(100% - 48px))!important;
  min-height:var(--intothenxt-header-height)!important;
  height:var(--intothenxt-header-height)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-top:0!important;
  padding-bottom:0!important;
  align-items:center!important;
}
/* Explicit logo dimensions prevent tool pages and case pages from shrinking it. */
.site-header .brand,
header:not(.hero):not(.topbar) .brand,
header.hero .hero-brand,
header.hero > .nav.shell > a:has(> img[src*="intothenxt-logo"]),
header.topbar .bar > a:has(> img[src*="intothenxt-logo"]){
  box-sizing:border-box!important;
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex:0 0 var(--intothenxt-logo-width)!important;
  width:var(--intothenxt-logo-width)!important;
  height:var(--intothenxt-header-height)!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}
.site-header .brand img,
header:not(.hero):not(.topbar) .brand img,
header.hero .hero-brand img.logo,
header.hero > .nav.shell > a > img[src*="intothenxt-logo"],
header.topbar .bar > a > img[src*="intothenxt-logo"]{
  position:static!important;
  display:block!important;
  width:var(--intothenxt-logo-width)!important;
  max-width:var(--intothenxt-logo-width)!important;
  height:auto!important;
  max-height:var(--intothenxt-logo-max-height)!important;
  object-fit:contain!important;
  object-position:left center!important;
  margin:0!important;
  transform:none!important;
}
/* Some tool templates have standalone navs nested in the hero. */
@media(max-width:950px){
  .site-header .container.nav,
  .site-header .container.nav-row,
.site-header .nav-row,
  header:not(.hero):not(.topbar) .wrap.nav,
  header.hero .hero-top,
  header.hero > .nav.shell,
  header.topbar .bar{
    width:calc(100% - 28px)!important;
  }
}

/* Thinking pages are generated with .nav-row rather than .container.nav-row.
   Neutralise the extra inline-image baseline space in that template. */
.site-header .nav-row{display:flex!important;align-items:center!important}
.site-header .brand{min-width:var(--intothenxt-logo-width)!important}
.site-header .brand img{vertical-align:middle!important}

/* Best-of-Both used a padded .bar inside an already centred wrapper,
   which displaced its logo to the right. */
header.topbar .bar{max-width:none!important;padding-left:0!important;padding-right:0!important}

/* All header images use the same box and positioning at every breakpoint. */
.site-header .brand img,
header:not(.hero):not(.topbar) .brand img,
header.hero .hero-brand img.logo,
header.hero > .nav.shell > a > img[src*="intothenxt-logo"],
header.topbar .bar > a > img[src*="intothenxt-logo"]{
  flex-shrink:0!important;
  vertical-align:middle!important;
}

/* Final reference geometry: the logo's left edge is the 1180px site grid.
   The homepage header is nested inside that grid and must not be inset twice. */
header.hero .hero-inner > .hero-top{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
}
/* No additional padding, offsets or max-width constraints on page header rows. */
.site-header > .container.nav,
.site-header > .container.nav-row,
.site-header > .nav-row,
header:not(.hero):not(.topbar) > .wrap.nav,
header.hero > .nav.shell,
header.topbar > .bar{
  max-width:none!important;
  padding-left:0!important;
  padding-right:0!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
}
/* The Best-of-Both header previously added 18px above and below its nav. */
header.topbar{
  padding-top:0!important;
  padding-bottom:0!important;
}

/*
 * Shared horizontal alignment for primary pages and tool heroes.
 * Some templates apply padding to content wrappers after setting their width.
 * Zero the padding on these specific full-width header/hero wrappers so the
 * logo and eyebrow use precisely the same left edge.
 */
.site-header > .container.nav,
.site-header > .container.nav-row,
.site-header > .nav-row,
header:not(.hero):not(.topbar) > .wrap.nav,
header.topbar > .bar,
header.hero > .nav.shell,
header.hero > .hero-inner.container,
header.hero > .container.hero-inner,
header.hero > .hero-top,
main > .hero > .container,
main > .hero > .wrap,
header.topbar + .hero > .wrap,
header.hero > .hero-grid.shell{
  box-sizing:border-box!important;
  width:min(1180px,calc(100% - 48px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:0!important;
  padding-right:0!important;
}
/* The Cases eyebrow and the logo now share the same container geometry. */
.site-header + main > .hero > .container{
  max-width:none!important;
}
/* Best-of-Both declares .wrap,.bar { padding-inline:20px } locally.
   This exact rule removes that duplicate inset on its hero content. */
header.topbar + .hero > .wrap{
  padding-left:0!important;
  padding-right:0!important;
}
@media(max-width:950px){
  .site-header > .container.nav,
  .site-header > .container.nav-row,
  .site-header > .nav-row,
  header:not(.hero):not(.topbar) > .wrap.nav,
  header.topbar > .bar,
  header.hero > .nav.shell,
  header.hero > .hero-inner.container,
  header.hero > .container.hero-inner,
  header.hero > .hero-top,
  main > .hero > .container,
  main > .hero > .wrap,
  header.topbar + .hero > .wrap,
  header.hero > .hero-grid.shell{
    width:calc(100% - 28px)!important;
  }
}

/* Keep the layout viewport identical when moving between short and long pages.
   Otherwise scrollbar appearance can move the centre of the 1180px grid. */
@media(min-width:951px){
  html{
    overflow-y:scroll;
    scrollbar-gutter:stable;
  }
}
/* Match logo and introductory content to the exact same centered page grid. */
.site-header > .container.nav,
.site-header > .container.nav-row,
.site-header > .nav-row,
header:not(.hero):not(.topbar) > .wrap.nav,
header.topbar > .bar,
header.hero > .nav.shell,
.site-header + main > .hero > .container,
main > .hero > .wrap,
header.topbar + .hero > .wrap{
  width:calc(100% - 48px)!important;
  max-width:1180px!important;
  margin-inline:auto!important;
  padding-inline:0!important;
  box-sizing:border-box!important;
}
@media(max-width:950px){
  .site-header > .container.nav,
  .site-header > .container.nav-row,
  .site-header > .nav-row,
  header:not(.hero):not(.topbar) > .wrap.nav,
  header.topbar > .bar,
  header.hero > .nav.shell,
  .site-header + main > .hero > .container,
  main > .hero > .wrap,
  header.topbar + .hero > .wrap{
    width:calc(100% - 28px)!important;
  }
}