*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html,
body {
  overflow-x: clip;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--white);
}

.main-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  margin-top: var(--header-height);
}

.main-content > .section:last-of-type {
  flex-grow: 1;
}

.main-header,
.main-content,
.main-footer {
  transition: width 0.25s ease;
}

body.sidebar-open :is(.main-header, .main-content, .main-footer) {
  width: calc(100% - var(--sidebar-width));
}

.consultancy-page .main-content {
  display: grid;
  flex: none;
  grid-template-columns: var(--consultancy-nav-width) minmax(0, 1fr);
}

.consultancy-page .main-content > :not(.consultancy-nav) {
  grid-column: 2;
}

.consultancy-page .main-content > .consultancy-nav {
  grid-column: 1;
  grid-row: 1 / span 999;
}

.section {
  --surface: var(--white);
  --ink: var(--penn-blue);
  --link: var(--medium-blue);
  --rule: rgb(17 24 87 / 18%);
  padding-block: clamp(var(--space-lg), 6vw, var(--space-xl));
  border-top: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
  scroll-margin-top: var(--header-height);
}

.section.penn-blue {
  --surface: var(--penn-blue);
  --ink: var(--white);
  --link: var(--electric-blue);
  --rule: rgb(255 255 255 / 28%);
}

.section.medium-blue {
  --surface: var(--medium-blue);
  --ink: var(--white);
  --link: var(--aqua);
  --rule: rgb(255 255 255 / 30%);
}

.section.turquoise {
  --surface: var(--turquoise);
  --ink: var(--penn-blue);
  --link: var(--penn-blue);
  --rule: rgb(17 24 87 / 30%);
}

.section.condensed-top {
  padding-top: var(--space-md);
}

.section.condensed-bottom {
  padding-bottom: var(--space-md);
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  gap: var(--space-lg) var(--gutter);
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--margin);
}

.grid-container > * {
  min-width: 0;
}

.partial-contents {
  display: contents;
}

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-12 { grid-column: span 12; }

.horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.hidden {
  display: none;
}

.visible {
  display: block;
}

@media (max-width: 768px) {
  :is(.col-1, .col-2, .col-3, .col-4, .col-6, .col-8, .col-9, .col-12) {
    grid-column: span 12;
  }

  .mob-4 { grid-column: span 4; }
  .mob-6 { grid-column: span 6; }

  body.sidebar-open :is(.main-header, .main-content, .main-footer) {
    width: 100%;
  }

  .consultancy-page .main-content {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}