/* ==========================================
   1. GLOBAL ROOT & VARIABLES
   ========================================== */
:root {
  /* Typography */
  --ntl-font-family-base: 'Roboto', Arial, sans-serif;
  --ntl-font-size-body: 1.125rem;
  --ntl-font-size-small: 1rem;
  --ntl-font-size-h1: 2rem;
  --ntl-font-size-h2: 1.75rem;
  --ntl-font-size-h3: 1.5rem;
  --ntl-font-size-h4: 1.25rem;
  --ntl-font-size-h5: 1.125rem;
  --ntl-font-size-h6: 1rem;
  --ntl-line-height-body: 1.5;
  --ntl-line-height-heading: 1.15;

  /* Brand and text colors */
  --ntl-color-primary: #c40000;
  --ntl-color-primary-alt: #d1191d;
  --ntl-color-primary-hover: #a80000;
  --ntl-color-text: #1a1a1a;
  --ntl-color-text-heading: #332d2d;
  --ntl-color-text-muted: #6b6969;
  --ntl-color-text-dark: #4b1d2a;
  --ntl-color-link: var(--ntl-color-primary);
  --ntl-color-link-hover: var(--ntl-color-primary-hover);

  /* Buttons and states */
  --ntl-color-dark: #1e1e1e;
  --ntl-color-dark-hover: #3a3a3a;
  --ntl-color-success: #28a745;
  --ntl-color-success-hover: #218838;

  /* Backgrounds and surfaces */
  --ntl-color-background-white: #ffffff;
  --ntl-color-surface: #faf6f3;
  --ntl-color-surface-1: #fffdfc;
  --ntl-color-surface-2: #eee4e4;
  --ntl-color-surface-3: #f8eee7;
  --ntl-color-surface-alt: #f7f9fa;
  --ntl-color-surface-muted: #fbf1ea;
  --ntl-color-placeholder: #f7f1ed;

  /* Quotes and special components */
  --ntl-color-quote-bg: #cfe7fa;
  --ntl-color-quote-border: #005d2c;
  --ntl-color-quote-border-hover: #0b6a35;
  --ntl-color-quote-arrow: #055627;
  --ntl-color-quote-label-bg: #f7ece4;

  /* Borders and utilities */
  --ntl-color-border-base: #dce1e4;
  --ntl-color-border-muted: #bca9ad;
  --ntl-color-icon-base: #9a9a9a;

  /* Layout */
  --ntl-container-width: 1140px;

  /* Spacing */
  --ntl-spacing-xs: 0.25rem;
  --ntl-spacing-sm: 0.5rem;
  --ntl-spacing-md: 1rem;
  --ntl-spacing-lg: 1.5rem;
  --ntl-spacing-xl: 2rem;
  --ntl-spacing-xxl: 3.125rem;

  /* Transitions and radius */
  --ntl-transition-fast: 0.2s ease-in-out;
  --ntl-transition-normal: 0.4s ease;
  --ntl-radius-sm: 4px;
  --ntl-radius-md: 8px;
  --ntl-radius-lg: 10px;
  --ntl-radius-round: 50%;
  --ntl-radius-pill: 999px;
}

/* ==========================================
   2. GENERAL ELEMENTS & TYPOGRAPHY
   ========================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
}

body {
  background-color: var(--ntl-color-background-white);
  color: var(--ntl-color-text);
  font-family: var(--ntl-font-family-base);
  font-size: var(--ntl-font-size-body);
  line-height: var(--ntl-line-height-body);
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--ntl-color-text-heading);
  font-family: inherit;
  font-weight: 700;
  line-height: var(--ntl-line-height-heading);
  margin: 0 0 0.65em;
}

h1 {
  font-size: var(--ntl-font-size-h1);
}

h2 {
  font-size: var(--ntl-font-size-h2);
}

h3 {
  font-size: var(--ntl-font-size-h3);
}

h4 {
  font-size: var(--ntl-font-size-h4);
}

h5 {
  font-size: var(--ntl-font-size-h5);
}

h6 {
  font-size: var(--ntl-font-size-h6);
}

p,
ul,
ol,
blockquote {
  margin: 0 0 var(--ntl-spacing-md);
}

input,
textarea,
select,
button {
  font: inherit;
}

small,
.small {
  font-size: var(--ntl-font-size-small);
}

a {
  color: inherit;
}

a:hover,
a:focus {
  color: var(--ntl-color-link-hover);
}

:focus-visible {
  outline: 3px solid var(--ntl-color-primary);
  outline-offset: 2px;
}

strong,
b {
  font-weight: 700;
}

/* ==========================================
   3. UTILITY CLASSES
   ========================================== */
.ntl-section {
  padding-top: var(--ntl-spacing-xxl);
}

.ntl-component-hidden {
  display: none !important;
}

.ntl-component-studio-hidden {
  border: 2px dashed #a0aec0 !important;
  opacity: 0.55;
}

.ntl-visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

body.ntl-dialog-open {
  overflow: hidden;
}

/* ==========================================
   4. STANDARD RICH TEXT TABLES
   ========================================== */
.ntl-table-wrapper {
  max-width: 100%;
  overflow-x: auto;
}

:where(
  .ntl-rich-text,
  .ntl-article-body,
  .ntl-content-section__body,
  .block-body,
  .ntl-accordion__rich-text,
  .ntl-accordion-info-card__body,
  .ntl-campaign-feature__text,
  .ntl-campaign-hero__body-inner,
  .ntl-event-detail__body,
  .ntl-focus-areas__detail-text,
  .ntl-hero__text,
  .ntl-employees-contact-card__rich-text
) {
  --ntl-rich-table-row-alt-bg: rgb(0 0 0 / 2.5%);
}

:where(
    .ntl-rich-text,
    .ntl-article-body,
    .ntl-content-section__body,
    .block-body,
    .ntl-accordion__rich-text,
    .ntl-accordion-info-card__body,
    .ntl-campaign-feature__text,
    .ntl-campaign-hero__body-inner,
    .ntl-event-detail__body,
    .ntl-focus-areas__detail-text,
    .ntl-hero__text,
    .ntl-employees-contact-card__rich-text
  )
  table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 1em 0;
  width: 100%;
}

:where(
    .ntl-rich-text,
    .ntl-article-body,
    .ntl-content-section__body,
    .block-body,
    .ntl-accordion__rich-text,
    .ntl-accordion-info-card__body,
    .ntl-campaign-feature__text,
    .ntl-campaign-hero__body-inner,
    .ntl-event-detail__body,
    .ntl-focus-areas__detail-text,
    .ntl-hero__text,
    .ntl-employees-contact-card__rich-text
  )
  caption {
  color: inherit;
  font-weight: 700;
  margin-bottom: 0.5em;
  text-align: left;
}

:where(
    .ntl-rich-text,
    .ntl-article-body,
    .ntl-content-section__body,
    .block-body,
    .ntl-accordion__rich-text,
    .ntl-accordion-info-card__body,
    .ntl-campaign-feature__text,
    .ntl-campaign-hero__body-inner,
    .ntl-event-detail__body,
    .ntl-focus-areas__detail-text,
    .ntl-hero__text,
    .ntl-employees-contact-card__rich-text
  )
  th,
:where(
    .ntl-rich-text,
    .ntl-article-body,
    .ntl-content-section__body,
    .block-body,
    .ntl-accordion__rich-text,
    .ntl-accordion-info-card__body,
    .ntl-campaign-feature__text,
    .ntl-campaign-hero__body-inner,
    .ntl-event-detail__body,
    .ntl-focus-areas__detail-text,
    .ntl-hero__text,
    .ntl-employees-contact-card__rich-text
  )
  td {
  border: 1px solid var(--ntl-color-text-heading);
  padding: 0.55em 0.75em;
  text-align: left;
  vertical-align: top;
}

:where(
    .ntl-rich-text,
    .ntl-article-body,
    .ntl-content-section__body,
    .block-body,
    .ntl-accordion__rich-text,
    .ntl-accordion-info-card__body,
    .ntl-campaign-feature__text,
    .ntl-campaign-hero__body-inner,
    .ntl-event-detail__body,
    .ntl-focus-areas__detail-text,
    .ntl-hero__text,
    .ntl-employees-contact-card__rich-text
  )
  th {
  background: var(--ntl-color-primary);
  color: var(--ntl-color-background-white);
  font-weight: 700;
}

:where(
    .ntl-rich-text,
    .ntl-article-body,
    .ntl-content-section__body,
    .block-body,
    .ntl-accordion__rich-text,
    .ntl-accordion-info-card__body,
    .ntl-campaign-feature__text,
    .ntl-campaign-hero__body-inner,
    .ntl-event-detail__body,
    .ntl-focus-areas__detail-text,
    .ntl-hero__text,
    .ntl-employees-contact-card__rich-text
  )
  tbody
  tr:nth-child(even)
  td {
  background: var(--ntl-rich-table-row-alt-bg);
}

:where(
    .ntl-rich-text,
    .ntl-article-body,
    .ntl-content-section__body,
    .block-body,
    .ntl-accordion__rich-text,
    .ntl-accordion-info-card__body,
    .ntl-campaign-feature__text,
    .ntl-campaign-hero__body-inner,
    .ntl-event-detail__body,
    .ntl-focus-areas__detail-text,
    .ntl-hero__text,
    .ntl-employees-contact-card__rich-text
  )
  tbody
  tr:nth-child(odd)
  td {
  background: var(--ntl-color-background-white);
}

:where(
    .ntl-rich-text,
    .ntl-article-body,
    .ntl-content-section__body,
    .block-body,
    .ntl-accordion__rich-text,
    .ntl-accordion-info-card__body,
    .ntl-campaign-feature__text,
    .ntl-campaign-hero__body-inner,
    .ntl-event-detail__body,
    .ntl-focus-areas__detail-text,
    .ntl-hero__text,
    .ntl-employees-contact-card__rich-text
  )
  td
  > :first-child,
:where(
    .ntl-rich-text,
    .ntl-article-body,
    .ntl-content-section__body,
    .block-body,
    .ntl-accordion__rich-text,
    .ntl-accordion-info-card__body,
    .ntl-campaign-feature__text,
    .ntl-campaign-hero__body-inner,
    .ntl-event-detail__body,
    .ntl-focus-areas__detail-text,
    .ntl-hero__text,
    .ntl-employees-contact-card__rich-text
  )
  th
  > :first-child {
  margin-top: 0;
}

:where(
    .ntl-rich-text,
    .ntl-article-body,
    .ntl-content-section__body,
    .block-body,
    .ntl-accordion__rich-text,
    .ntl-accordion-info-card__body,
    .ntl-campaign-feature__text,
    .ntl-campaign-hero__body-inner,
    .ntl-event-detail__body,
    .ntl-focus-areas__detail-text,
    .ntl-hero__text,
    .ntl-employees-contact-card__rich-text
  )
  td
  > :last-child,
:where(
    .ntl-rich-text,
    .ntl-article-body,
    .ntl-content-section__body,
    .block-body,
    .ntl-accordion__rich-text,
    .ntl-accordion-info-card__body,
    .ntl-campaign-feature__text,
    .ntl-campaign-hero__body-inner,
    .ntl-event-detail__body,
    .ntl-focus-areas__detail-text,
    .ntl-hero__text,
    .ntl-employees-contact-card__rich-text
  )
  th
  > :last-child {
  margin-bottom: 0;
}

:where(
    .ntl-rich-text,
    .ntl-article-body,
    .ntl-content-section__body,
    .block-body,
    .ntl-accordion__rich-text,
    .ntl-accordion-info-card__body,
    .ntl-campaign-feature__text,
    .ntl-campaign-hero__body-inner,
    .ntl-event-detail__body,
    .ntl-focus-areas__detail-text,
    .ntl-hero__text,
    .ntl-employees-contact-card__rich-text
  )
  td
  a {
  color: var(--ntl-color-link);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

:where(
    .ntl-rich-text,
    .ntl-article-body,
    .ntl-content-section__body,
    .block-body,
    .ntl-accordion__rich-text,
    .ntl-accordion-info-card__body,
    .ntl-campaign-feature__text,
    .ntl-campaign-hero__body-inner,
    .ntl-event-detail__body,
    .ntl-focus-areas__detail-text,
    .ntl-hero__text,
    .ntl-employees-contact-card__rich-text
  )
  th
  a {
  color: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

/* ==========================================
   5. LAYOUT HELPERS
   ========================================== */
.ntl-container,
.ntl-container-fluid {
  margin-inline: auto;
  width: 100%;
}

.ntl-container {
  max-width: var(--ntl-container-width);
  margin-inline: auto;
  padding-inline: 15px;
}

.ntl-container-fluid {
  padding-inline: 15px;
}

.ntl-row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -15px;
}

.ntl-row--equal-height {
  align-items: stretch;
}

[class*='ntl-col-'] {
  min-inline-size: 0;
  padding-inline: 15px;
  position: relative;
  width: 100%;
}

.ntl-col-3 {
  width: 25%;
}

.ntl-col-6 {
  width: 50%;
}

.ntl-col-12,
.ntl-col-md-12 {
  width: 100%;
}

.ntl-list-unstyled {
  list-style: none;
  padding-left: 0;
}

.ntl-clearfix::after {
  clear: both;
  content: '';
  display: table;
}

@media (min-width: 576px) {
  .ntl-col-sm-3 {
    width: 25%;
  }

  .ntl-col-sm-6 {
    width: 50%;
  }
}

@media (min-width: 768px) {
  .ntl-col-md-2 {
    width: 16.6667%;
  }

  .ntl-col-md-3 {
    width: 25%;
  }

  .ntl-col-md-4 {
    width: 33.3333%;
  }

  .ntl-col-md-5 {
    width: 41.6667%;
  }

  .ntl-col-md-6 {
    width: 50%;
  }

  .ntl-col-md-7 {
    width: 58.3333%;
  }

  .ntl-col-md-8 {
    width: 66.6667%;
  }

  .ntl-col-md-9 {
    width: 75%;
  }

  .ntl-col-md-10 {
    width: 83.3333%;
  }
}

/* ==========================================
   6. MISC UTILITIES
   ========================================== */
.ntl-float-left {
  float: left;
}

.ntl-float-right {
  float: right;
}

.ntl-input-block {
  display: block;
  inline-size: 100%;
}

@media (max-width: 767.98px) {
  .ntl-float-left,
  .ntl-float-right {
    float: none;
  }
}