@charset "UTF-8";
/* Fonts: Aktiv Grotesk is streamed from Adobe Fonts (Typekit).
   The kit is linked in base.html: https://use.typekit.net/yva1fiw.css
   Do not add @font-face rules or self-hosted font files here. */

/* Base font setup */
:host,
html {
  font-family:
    aktiv-grotesk,
    helvetica neue,
    helvetica,
    arial,
    sans-serif;
  font-size: 16px;
}
code,
kbd,
pre,
samp {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    Liberation Mono,
    Courier New,
    monospace;
}
small {
  font-size: 80%;
}
/* Typography scale */
.type-h0 {
  font: 700 clamp(3rem, 6vw, 4.5rem)/110% aktiv-grotesk;
}
.type-h0,
.type-h1 {
  letter-spacing: -0.02em;
}
.type-h1 {
  font: 700 clamp(2.0625rem, 6vw, 3rem)/104.167% aktiv-grotesk;
}
.type-h2 {
  font: 700 clamp(1.75rem, 6vw, 2.5rem)/115% aktiv-grotesk;
}
.type-h2,
.type-h3 {
  letter-spacing: -0.02em;
}
.type-h3 {
  font: 700 clamp(1.4375rem, 6vw, 2.0625rem)/121.212% aktiv-grotesk;
}
.type-h5 {
  font: 700 clamp(1.1875rem, 6vw, 1.4375rem)/126.087% aktiv-grotesk;
}
.type-h5,
.type-h6 {
  letter-spacing: -0.02em;
}
.type-h6 {
  font: 700 clamp(1rem, 2vw, 1.1875rem)/126.316% aktiv-grotesk;
}
.type-body {
  font: 400 16px/131.25% aktiv-grotesk;
}
.type-long {
  font: 400 16px/150% aktiv-grotesk;
}
.type-sm {
  font: 400 13px/138.462% aktiv-grotesk;
}
.type-smol {
  font: 400 clamp(0.8125rem, 2vw, 1rem)/131.25% aktiv-grotesk;
}
.type-subnav {
  font: 500 14px/2 aktiv-grotesk;
}
.type-subnav-xs {
  font: 400 12px/2 aktiv-grotesk;
}
.type-footer-nav {
  font: 700 1rem/131.25% aktiv-grotesk;
}
.type-footer-subnav {
  font: 400 0.8125rem/126.923% aktiv-grotesk;
}
.type-eyebrow-alert {
  font: 700 1.4375rem/126.087% aktiv-grotesk;
  letter-spacing: -0.46px;
}
.type-eyebrow-xs {
  font: 400 11px/145.455% aktiv-grotesk;
  font-weight: 700;
  text-transform: uppercase;
}
.type-caption-xl {
  font: 400 36px/105% aktiv-grotesk;
  font-weight: 700;
}
.type-banner {
  font-size: clamp(72px, 18vw, 275px);
}
.type-tagline {
  font-family: aktiv-grotesk;
  font-size: clamp(23px, 4vw, 40px);
  letter-spacing: -0.02em;
  line-height: 104.167%;
}
/* Utility font classes */
.text-lg {
  font-size: 20px;
  line-height: 28px;
}
.text-sm {
  font-size: 14px;
  line-height: 20px;
}
.text-xs {
  font-size: 13px;
  line-height: 18px;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.leading-4 {
  line-height: 1rem;
}
.leading-6 {
  line-height: 1.5rem;
}
@media (min-width: 640px) {
  .sm\:text-sm {
    font-size: 14px;
    line-height: 20px;
  }
}
@media (min-width: 768px) {
  .md\:text-base {
    font-size: 16px;
    line-height: 24px;
  }
}
body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
}
/* ============ Breadcrumb ============
   Default is DARK text (most pages are white/light).
   theme.js adds .bc--light when a dark hero is detected behind it. */

.bc {
  position: absolute;
  top: 96px;
  left: 0;
  right: 0;
  z-index: 5;
  padding: 0 40px;
  width: 100%;
  box-sizing: border-box;
  pointer-events: none;
}

.bc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  pointer-events: auto;
}

.bc__item {
  display: flex;
  align-items: center;
}

/* ---- Default: dark text ---- */
.bc .bc__link,
.bc .bc__link:visited {
  display: inline-flex;
  align-items: center;
  color: #000000;
  text-decoration: none;
  font-family: aktiv-grotesk, "helvetica neue", helvetica, arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  padding: 8px 15px;
  transition: color 0.2s ease;
}

.bc .bc__link:hover,
.bc .bc__link:active {
  color: #cf102d;
  text-decoration: none;
}

.bc .bc__sep {
  display: flex;
  align-items: center;
  padding: 0 2px;
  color: #000000;
  opacity: 0.6;
}

.bc .bc__sep svg {
  display: block;
}

.bc .bc__current {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 999px;
  color: #000000;
  font-family: aktiv-grotesk, "helvetica neue", helvetica, arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}

/* ---- Light variant: white text on dark heroes ----
   Doubled .bc.bc--light to outrank the .bc .bc__link defaults above. */
.bc.bc--light .bc__link,
.bc.bc--light .bc__link:visited {
  color: #ffffff;
}

.bc.bc--light .bc__link:hover,
.bc.bc--light .bc__link:active {
  color: #cf102d;
}

.bc.bc--light .bc__sep {
  color: #ffffff;
}

.bc.bc--light .bc__current {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 767px) {
  .bc {
    top: 84px;
    padding: 0 20px;
  }
  .bc .bc__link,
  .bc .bc__current {
    font-size: 14px;
    font-weight: 
    padding: 6px 14px;
  }
  .bc .bc__sep svg {
    width: 14px;
    height: 14px;
  }
}
/* ============ Tab Module ============
   Ported from Craft CMS (_tab.scss). Selectors below assume the HubSpot
   module markup uses the SAME class names as this file (.tab-module,
   .tabs, .tabs-item, .label, .body, role="tablist"/"tabpanel"). VERIFY
   against your live module's actual HTML before shipping — your .bc
   (breadcrumb) component above shows your team renames classes during
   migration rather than reusing Craft's originals, so this needs a check.

   No .type-h4 exists in this theme (scale jumps h3 -> h5), so the tab
   label's largest breakpoint below reuses .type-h5's values rather than
   inventing a new global class. Swap in a real .type-h4 if you add one. */

.tab-module {
  display: flex;
  flex-wrap: wrap;
}

.tab-module .heading {
  flex-basis: 100%;
  width: 100%;
}

.tab-module .description {
  flex-basis: 100%;
  width: 100%;
}

/* Scoped box-sizing reset — without this, .tabs-item goes from a 1px
   border (inactive) to no border (._active) and physically changes size,
   which is what causes tabs to misalign/jump on click. Scoped to this
   component only, since border-box isn't set globally in this theme. */
.tab-module,
.tab-module *,
.tab-module *::before,
.tab-module *::after {
  box-sizing: border-box;
}

/* --- Tab list ------------------------------------------------------------ */

.tab-module .tabs {
  display: grid;
  grid-template-columns: 1fr; /* stacked, full-width below tablet width */
  gap: 12px;
  flex-basis: 100%;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Switches to tab view (4-col grid) at 768px and up. Width-only on purpose —
   mobile viewport HEIGHT changes as the browser chrome shows/hides on
   scroll, which would make the layout flicker between modes. */
@media (min-width: 768px) {
  .tab-module .tabs {
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
  }
}

/* Neutralizes any sibling margin utility that might also land on this
   list, so spacing is driven by `gap` alone — keeps items evenly aligned
   even when some tabs are conditionally hidden via [hidden]. */
.tab-module .tabs > li:not([hidden]) ~ li:not([hidden]) {
  margin-left: 0;
}

.tab-module .tabs-item {
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px 6px;
  text-align: center;
  color: #000000;
  border: 1px solid #E5E5E5; /* ADJUST: confirm your default border color */
  border-radius: 2px;
  cursor: pointer;
  background: none;
}

@media (min-width: 768px) {
  .tab-module .tabs-item {
    padding: 12px;
    text-align: left;
  }
}

@media (min-width: 1024px) {
  .tab-module .tabs-item {
    padding: 24px;
  }
}

.tab-module .tabs-item._active {
  background-color: #F5F5F5; /* ADJUST: confirm your "neutral" background token */
  border-color: transparent;
}

/* Label — mobile: type-smol + bold, md: type-body + bold, lg: type-h5 scale
   (stand-in for the missing type-h4) */
.tab-module .label {
  display: block;
  font: 700 clamp(0.8125rem, 2vw, 1rem) / 131.25% aktiv-grotesk;
}

@media (min-width: 768px) {
  .tab-module .label {
    font: 700 16px / 131.25% aktiv-grotesk;
  }
}

@media (min-width: 1024px) {
  .tab-module .label {
    font: 700 clamp(1.1875rem, 6vw, 1.4375rem) / 126.087% aktiv-grotesk;
    letter-spacing: -0.02em;
  }
}

/* Body copy — hidden on mobile (matches source), type-sm at md, type-body at lg */
.tab-module .tabs-item .body {
  display: none;
  margin-top: 4px;
}

@media (min-width: 768px) {
  .tab-module .tabs-item .body {
    display: block;
    font: 400 13px / 138.462% aktiv-grotesk;
  }
}

@media (min-width: 1024px) {
  .tab-module .tabs-item .body {
    font: 400 16px / 131.25% aktiv-grotesk;
  }
}

/* --- Panels ---------------------------------------------------------------
   Resets nested-component padding inside a tab panel so it doesn't double
   up with the module's own spacing, then re-adds top spacing only where
   the original design calls for it (form + article modules). */

[role="tabpanels"] [role="tabpanel"],
[role="tabpanels"] [data-component="article--module"],
[role="tabpanels"] [data-component="form"] {
  padding: 0;
}

[role="tabpanels"] [data-component="form"] {
  padding-top: 25px;
}

[role="tabpanels"] [data-component="article--module"] {
  padding-top: 25px;
}