/* Only section descriptions containing the authored hub layout opt in. */
.section-page:has(.section-hub) {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}
.section-page__intro:has(.section-hub) {
  display: contents;
}
.section-page__intro:has(.section-hub) > .section-page__title {
  order: 1;
  width: calc(100% - var(--sw-container-gutter) * 2);
  margin: 64px auto 56px;
  text-align: center;
  text-wrap: balance;
}
.section-page__description:has(.section-hub) {
  order: 3;
  max-width: none;
  width: 100%;
  min-width: 0;
  margin-top: 96px;
  font-size: inherit;
  line-height: inherit;
}
.section-page:has(.section-hub) > .section-page__groups,
.section-page:has(.section-hub) > .site-container:has(> .section-page__cards) {
  order: 2;
}
.section-hub {
  --hub-border: rgba(145, 145, 145, .38);
  color: #f2f2f2;
  font-family: var(--sw-font-family-ui);
  text-align: left;
}
.section-hub p {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  text-wrap: pretty;
}
.section-hub p + p { margin-top: 24px; }
.hub-hero { padding-bottom: 64px; }
.hub-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr);
  gap: clamp(32px, 4.4vw, 72px);
  align-items: stretch;
}
.hub-hero__copy { padding-block: 8px; }
.hub-hero__title,
.hub-heading,
.hub-card-title,
.hub-step__title {
  margin: 0;
  font-family: var(--sw-font-family-heading);
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
}
.hub-hero__title {
  font-size: clamp(32px, 3.4vw, 56px);
  text-transform: uppercase;
}
.hub-hero__lead {
  margin-top: 32px;
  color: #d5d5d5;
}
.hub-hero__lead p:first-child { color: #f2f2f2; }
.hub-hero__media {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--hub-border);
  border-radius: 6px;
  background: #21372c;
}
.hub-hero__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hub-section { padding-block: clamp(64px, 6vw, 112px); }
.hub-section--directions { padding-top: 32px; }
.hub-heading {
  max-width: 1100px;
  margin-bottom: 40px;
  font-size: clamp(30px, 2.65vw, 44px);
  text-transform: uppercase;
}
.hub-section__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-bottom: 48px;
}
.hub-section__intro .hub-heading { margin: 0; }
.hub-services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.hub-service {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hub-border);
  border-radius: 6px;
  background: #202321;
}
.hub-service__media,
.hub-project__media {
  overflow: hidden;
  background: #21372c;
  aspect-ratio: 16 / 8;
}
.hub-service__image,
.hub-project__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 450ms ease;
}
.hub-service__body {
  display: grid;
  align-content: start;
  gap: 24px;
  padding: clamp(24px, 2.2vw, 36px);
}
.hub-card-title { font-size: clamp(24px, 1.95vw, 32px); }
.hub-service__body > p,
.hub-project__body > p { color: #d5d5d5; }
.hub-service__links {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hub-service__links li {
  padding-top: 20px;
  border-top: 1px solid var(--hub-border);
  color: #c8c8c8;
  font-size: 16px;
  line-height: 1.55;
}
.hub-service__links a {
  color: #f2f2f2;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(145, 145, 145, .6);
  text-underline-offset: 4px;
  transition: color 220ms ease, text-decoration-color 220ms ease;
}
.hub-service__links a:hover,
.hub-service__links a:focus-visible {
  color: #83d3a6;
  text-decoration-color: currentColor;
}
.hub-section--light {
  background: #f2f2f2;
  color: #1b1b1b;
}
.hub-quality {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
}
.hub-quality__item {
  display: grid;
  align-content: start;
  gap: 20px;
  padding-block: 32px;
  border-top: 1px solid #919191;
}
.hub-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hub-step {
  min-width: 0;
  padding-top: 24px;
  border-top: 2px solid #62bd8b;
}
.hub-step__title { margin-bottom: 20px; font-size: 24px; }
.hub-step p { color: #d5d5d5; font-size: 16px; }
.hub-projects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.hub-project {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hub-border);
  border-radius: 6px;
  background: #202321;
  color: #f2f2f2;
  text-decoration: none;
  transition: border-color 250ms ease, background-color 250ms ease;
}
.hub-project__media { aspect-ratio: 16 / 11; flex-shrink: 0; }
.hub-project__body {
  display: grid;
  align-content: start;
  gap: 24px;
  padding: 28px;
}
.hub-project__head { display: flex; gap: 20px; align-items: start; }
.hub-project__head .hub-card-title { flex: 1; font-size: clamp(24px, 1.75vw, 28px); }
.hub-project__arrow {
  flex-shrink: 0;
  margin-top: 6px;
  transition: transform 250ms ease;
}
.hub-project__body > p { font-size: 16px; }
.hub-project:hover,
.hub-project:focus-visible { color: #f2f2f2; border-color: #62bd8b; background: #22372c; }
.hub-project:hover .hub-project__arrow { transform: translate(3px, -3px); }
.hub-project:focus-visible,
.hub-service__links a:focus-visible { outline: 2px solid #62bd8b; outline-offset: 5px; }
.hub-section--green { background: #21372c; }
.hub-safeguard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  padding-block: 32px;
  border-top: 1px solid rgba(242, 242, 242, .3);
}
.hub-safeguard p { color: #e6e6e6; }
.hub-interaction {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
}
.hub-interaction .hub-heading { margin: 0; }
@media (hover: hover) and (pointer: fine) {
  .hub-project:hover .hub-project__image,
  .hub-service:hover .hub-service__image { transform: scale(1.025); }
}
@media (max-width: 1199px) {
  .hub-projects { gap: 16px; }
  .hub-project__body { padding: 24px; }
  .hub-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .hub-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px; }
}
@media (max-width: 991px) {
  .hub-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hub-hero__media { min-height: 0; height: 320px; }
  .hub-hero__title { max-width: 850px; font-size: 40px; }
  .hub-projects { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .hub-project { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .hub-project__media { height: 100%; aspect-ratio: auto; min-height: 280px; }
  .hub-section__intro,
  .hub-interaction,
  .hub-safeguard { gap: 32px; }
}
@media (max-width: 767px) {
  .section-page__intro:has(.section-hub) > .section-page__title { margin-block: 40px; }
  .section-page__description:has(.section-hub) { margin-top: 64px; }
  .section-hub p { font-size: 16px; line-height: 1.55; }
  .hub-hero { padding-bottom: 48px; }
  .hub-hero__title { font-size: clamp(28px, 6.5vw, 38px); }
  .hub-hero__lead { margin-top: 24px; }
  .hub-hero__media { height: 240px; }
  .hub-section { padding-block: 56px; }
  .hub-section--directions { padding-top: 16px; }
  .hub-heading { margin-bottom: 32px; font-size: 28px; }
  .hub-services,
  .hub-quality,
  .hub-section__intro,
  .hub-safeguard,
  .hub-interaction,
  .hub-steps { grid-template-columns: minmax(0, 1fr); }
  .hub-services { gap: 24px; }
  .hub-section__intro { margin-bottom: 32px; gap: 24px; }
  .hub-quality { gap: 0; }
  .hub-quality__item { padding-block: 28px; }
  .hub-card-title { font-size: 25px; }
  .hub-service__body { gap: 20px; padding: 24px; }
  .hub-service__links li { font-size: 16px; }
  .hub-step__title { margin-bottom: 16px; }
  .hub-project { display: flex; }
  .hub-project__media { min-height: 0; height: auto; aspect-ratio: 16 / 9; }
  .hub-project__body { gap: 20px; }
  .hub-project__head .hub-card-title { font-size: 25px; }
  .hub-safeguard { gap: 20px; padding-block: 28px; }
  .hub-interaction { gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-project,
  .hub-project__image,
  .hub-project__arrow,
  .hub-service__image,
  .hub-service__links a { transition: none; }
  .hub-project:hover .hub-project__image,
  .hub-project:hover .hub-project__arrow,
  .hub-service:hover .hub-service__image { transform: none; }
}