/* Theme base styles */

/* Tools
Any animations, or functions used throughout the project.
Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here
*/

/* Generic
This is where reset, normalize & box-sizing styles go.
*/

*, *:before, *:after {
  box-sizing: border-box;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct box sizing in Firefox.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge and Firefox.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
 */

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Objects
Non-cosmetic design patterns including grid and layout classes)
*/



/* CSS variables */

:root {
  --column-gap: 2.13%;
  --column-width-multiplier: 8.333;
}

/* Mobile layout */

.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}


  .row-fluid .span1,
  .row-fluid .span2,
  .row-fluid .span3,
  .row-fluid .span4,
  .row-fluid .span5,
  .row-fluid .span6,
  .row-fluid .span7,
  .row-fluid .span8,
  .row-fluid .span9,
  .row-fluid .span10,
  .row-fluid .span11,
  .row-fluid .span12{
  min-height: 1px;
  width: 100%;
}

/* Desktop layout */

@media (min-width: 768px) {
  .row-fluid {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  
    .row-fluid .span1 {
      width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span2 {
      width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span3 {
      width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span4 {
      width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span5 {
      width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span6 {
      width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span7 {
      width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span8 {
      width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span9 {
      width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span10 {
      width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span11 {
      width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
    }
  
}
.content-wrapper {
  margin: 0 auto;
  padding: 0 1rem;
}

@media screen and (min-width: 1380px) {
  .content-wrapper {
    padding: 0;
  }
}

.dnd-section > .row-fluid {
  margin: 0 auto;
}

.dnd-section .dnd-column {
  padding: 0 1rem;
}

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
}

/* Elements
Base HTML elements are styled in this section (<body>, <h1>, <a>, <p>, <button> etc.)
*/

/* ==========================================================================
   Trilion Typography - Mobile-First
   Fonts: DM Serif Display (headings) + Space Grotesk (body)
   ========================================================================== */

body {
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Outweighs `body { color:  }` in theme-overrides.css
   (which defaults to Trilion Red via the primary-color inheritance chain
   and was leaking red text into every un-overridden descendant). */
html body {
  color: #323736;
}

html[lang^="ja"] body,
html[lang^="zh"] body,
html[lang^="ko"] body {
  line-break: strict;
  overflow-wrap: normal;
  word-break: break-all;
}

p {
  font-size: 1rem;
  margin: 0 0 1.4rem;
}

/* Only cap reading width on long-form editorial contexts, not on centered
   hero/section eyebrows where a 72ch constraint offsets the block from center. */
.blog-post__body p,
.prose p,
article.blog-post p {
  max-width: 72ch;
}

a {
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease;
  color: #AA1E1E;
}

a:hover,
a:focus {
  color: #1A1D2E;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Don't apply default link color to buttons or styled CTAs.
   Match both `background:` shorthand and `background-color:` so inline CTAs
   keep their own text color (white) instead of inheriting the red link color. */
a[style*="background:"],
a[style*="background-color"],
a.button,
a.hs-button,
.cta_button {
  color: inherit;
}
a[style*="background:"]:hover,
a[style*="background-color"]:hover,
a.button:hover,
a.hs-button:hover,
.cta_button:hover {
  text-decoration: none;
  color: inherit;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 1rem;
  line-height: 1.2;
}

/* Serif headings get slightly tighter tracking */
h1, h2, h3 {
  letter-spacing: -0.01em;
}

/* Utility classes */
.overline {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Canonical eyebrow - one spec for every section overline. Use on light bg.
   For dark bg, wrap the containing section with `.on-dark` (or nest inside
   `section[class*="on-dark"]`) and the color flips to the salmon accent. */
.tr-eyebrow {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #AA1E1E;
  margin: 0 0 12px;
}
.on-dark .tr-eyebrow,
.tr-eyebrow.on-dark {
  color: #F27878;
}

.tagline {
  font-size: 1.125rem;
  line-height: 1.5;
}

ul, ol {
  margin: 0 0 1.4rem;
}

ul ul, ol ul, ul ol, ol ol {
  margin: 0;
}

ul.no-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

pre {
  overflow: auto;
}

code {
  vertical-align: bottom;
}

blockquote {
  border-left: 3px solid;
  margin: 0 0 1.4rem;
  padding: 1em 1.5em;
  font-style: italic;
}

hr {
  border: none;
  border-bottom: 1px solid #E2E5EB;
}

img {
  font-size: 0.583rem;
  word-break: normal;
}

/* Responsive type scale */
@media (min-width: 768px) {
  .tagline {
    font-size: 1.25rem;
  }
}
/* ==========================================================================
   Trilion Buttons - ZEISS Beyond aligned
   Primary: Trilion Red | Secondary: ZEISS Blue outline
   Border radius: 6px (tokenized) | Padding: 12px 32px
   ========================================================================== */

button,
.button,
.hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.2s ease;
  white-space: normal;
  font-weight: 500;
  line-height: 1.4;
  min-height: 44px; /* Touch target */
}

button:disabled,
.button:disabled,
.hs-button:disabled {
  background-color: #D0D0D0;
  border-color: #D0D0D0;
  color: #E6E6E6;
  cursor: not-allowed;
}

/* Secondary button (outline style) */
.button--secondary {
  background-color: transparent;
  border: 2px solid #0072EF;
  color: #0072EF;
  border-radius: 6px;
  padding: 10px 30px;
}

.button--secondary:hover,
.button--secondary:focus {
  background-color: #0072EF;
  color: #FFFFFF;
}

/* Ghost button (for dark backgrounds) */
.button--ghost {
  background-color: transparent;
  border: 2px solid #FFFFFF;
  color: #FFFFFF;
  border-radius: 6px;
  padding: 10px 30px;
}

.button--ghost:hover,
.button--ghost:focus {
  background-color: #FFFFFF;
  color: #1A1D2E;
}

/* No button reset */
.no-button,
.no-button:hover,
.no-button:focus,
.no-button:active {
  background: none;
  border: none;
  border-radius: 0;
  color: initial;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin-bottom: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
  transition: none;
}
/* Fields */

.hs-form-field {
  margin-bottom: 1.4rem;
}

/* Labels */

form label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.35rem;
}

/* Form Title */
.form-title {
  margin-bottom: 0;
}

/* Help text */

form legend {
  font-size: 0.875rem;
}

/* Inputs */

form input[type=text],
form input[type=search],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form input[type=file],
form select,
form textarea {
  display: inline-block;
  font-size: 0.875rem;
  padding: 0.7rem;
  width: 100%;
}

form textarea {
  resize: vertical;
}

form fieldset {
  max-width: 100% !important;
}

/* Inputs - checkbox/radio */

form .inputs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

form .inputs-list > li {
  display: block;
  margin: 0.7rem 0;
}

form .inputs-list input,
form .inputs-list span {
  vertical-align: middle;
}

form input[type=checkbox],
form input[type=radio] {
  cursor: pointer;
  margin-right: 0.35rem;
}

/* Inputs - date picker */

.hs-dateinput {
  position: relative;
}

.hs-dateinput:before {
  content:'\01F4C5';
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
}

.fn-date-picker .pika-table thead th {
  color: #FFF;
}

.fn-date-picker td.is-selected .pika-button {
  border-radius: 0;
  box-shadow: none;
}

.fn-date-picker td .pika-button:hover,
.fn-date-picker td .pika-button:focus {
  border-radius: 0 !important;
  color: #FFF;
}

/* Inputs - file picker */

form input[type=file] {
  background-color: transparent;
  border: initial;
  padding: initial;
}

/* Headings and text */

form .hs-richtext,
form .hs-richtext p {
  font-size: 0.875rem;
  margin: 0 0 1.4rem;
}

form .hs-richtext img {
  max-width: 100% !important;
}

/* GDPR */

.legal-consent-container .hs-form-booleancheckbox-display > span,
.legal-consent-container .hs-form-booleancheckbox-display > span p {
  margin-left: 1rem !important;
}

/* Validation */

.hs-form-required {
  color: #EF6B51;
}

.hs-input.invalid.error {
  border-color: #EF6B51;
}

.hs-error-msg {
  color: #EF6B51;
  margin-top: 0.35rem;
}

/* Submit button */

form input[type=submit],
form .hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.15s linear;
  white-space: normal;
}

/* Captcha */

.grecaptcha-badge {
  margin: 0 auto;
}


  /* Search button input field and suggestions */
  .body-container-wrapper .hs-search-field__button {
    padding: 15px;
  }

  .body-container-wrapper .hs-search-field__bar--button-inline .hs-search-field__button {
    margin-left: 6px;
    margin-bottom: 0;
  }

  .body-container-wrapper .hs-search-field__button svg {
    height: 15px;
    fill: #fff;
  }

  .body-container-wrapper .hs-search-field__bar > form > .hs-search-field__input {
    padding: 10px;
  }

  .body-container-wrapper .hs-search-field__suggestions li a {
    color: #494A52;
    padding: 0.35rem 0.7rem;
    text-decoration: none;
    transition: background-color 0.3s;
  }


/* ============================================================
   Branded form styling - shared by Contact + Support pages via :is().
   ============================================================ */

/* Override portal-level form theme that sets navy bg on every form */
:is(.body-container--contact, .body-container--support) form.hs-form,
:is(.body-container--contact, .body-container--support) form.hs-form-private,
:is(.body-container--contact, .body-container--support) .form-title,
:is(.body-container--contact, .body-container--support) .submitted-message {
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

:is(.body-container--contact, .body-container--support) .hs-form {
  font-family: 'Space Grotesk', sans-serif;
  color: #1A1D2E;
}

:is(.body-container--contact, .body-container--support) .hs-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

:is(.body-container--contact, .body-container--support) .hs-form .hs-form-field {
  margin-bottom: 1.25rem;
}

:is(.body-container--contact, .body-container--support) .hs-form label,
:is(.body-container--contact, .body-container--support) .hs-form .hs-form-field > label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1A1D2E;
  margin-bottom: 0.45rem;
}

:is(.body-container--contact, .body-container--support) .hs-form .hs-form-required {
  color: #AA1E1E;
  margin-left: 2px;
}

:is(.body-container--contact, .body-container--support) .hs-form input[type=text],
:is(.body-container--contact, .body-container--support) .hs-form input[type=email],
:is(.body-container--contact, .body-container--support) .hs-form input[type=tel],
:is(.body-container--contact, .body-container--support) .hs-form input[type=number],
:is(.body-container--contact, .body-container--support) .hs-form select,
:is(.body-container--contact, .body-container--support) .hs-form textarea {
  width: 100%;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: #1A1D2E;
  background-color: #FFFFFF;
  border: 1px solid #D4CFC6;
  border-radius: 6px;
  padding: 12px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: none;
}

:is(.body-container--contact, .body-container--support) .hs-form input[type=text]:focus,
:is(.body-container--contact, .body-container--support) .hs-form input[type=email]:focus,
:is(.body-container--contact, .body-container--support) .hs-form input[type=tel]:focus,
:is(.body-container--contact, .body-container--support) .hs-form input[type=number]:focus,
:is(.body-container--contact, .body-container--support) .hs-form select:focus,
:is(.body-container--contact, .body-container--support) .hs-form textarea:focus {
  outline: none;
  border-color: #AA1E1E;
  box-shadow: 0 0 0 3px rgba(170, 30, 30, 0.12);
}

:is(.body-container--contact, .body-container--support) .hs-form textarea {
  min-height: 130px;
  resize: vertical;
}

:is(.body-container--contact, .body-container--support) .hs-form select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23606A76' stroke-width='1.5' d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

:is(.body-container--contact, .body-container--support) .hs-form .legal-consent-container {
  font-size: 13px;
  color: #606A76;
  line-height: 1.5;
  margin-top: 4px;
}

:is(.body-container--contact, .body-container--support) .hs-form .legal-consent-container p {
  margin: 0 0 0.5rem;
  font-size: 13px;
}

:is(.body-container--contact, .body-container--support) .hs-form .hs-error-msg,
:is(.body-container--contact, .body-container--support) .hs-form .hs-error-msgs label {
  color: #E71E1E;
  font-size: 13px;
}

/* Hide empty reCAPTCHA field slot - takes ~60px of blank space */
:is(.body-container--contact, .body-container--support) .hs-form .hs_recaptcha.hs-recaptcha.hs-form-field {
  display: none !important;
}

:is(.body-container--contact, .body-container--support) .hs-form .hs_submit,
:is(.body-container--contact, .body-container--support) .hs-form .hs-submit {
  text-align: center;
  margin-top: 8px;
}

:is(.body-container--contact, .body-container--support) .hs-form input[type=submit],
:is(.body-container--contact, .body-container--support) .hs-form .hs-button {
  background-color: #AA1E1E;
  color: #FFFFFF;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 0;
  border-radius: 6px;
  padding: 14px 36px;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
  width: auto;
  min-width: 240px;
  margin: 0;
}

:is(.body-container--contact, .body-container--support) .hs-form input[type=submit]:hover,
:is(.body-container--contact, .body-container--support) .hs-form .hs-button:hover {
  background-color: #8B1818;
}

/* Two-column grid on tablet+ - applies to both contact and support */
@media (min-width: 720px) {
  :is(.body-container--contact, .body-container--support) .hs-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 0;
  }

  :is(.body-container--contact, .body-container--support) .hs-form > fieldset.form-columns-2 { order: 1; }
  :is(.body-container--contact, .body-container--support) .hs-form > fieldset:has(input[type=email]) { order: 2; }
  :is(.body-container--contact, .body-container--support) .hs-form > fieldset:has(input[type=tel]) { order: 3; }
  :is(.body-container--contact, .body-container--support) .hs-form > fieldset:has(input[name="company"]) { order: 4; }
  :is(.body-container--contact, .body-container--support) .hs-form > fieldset:has(select) { order: 5; }
  :is(.body-container--contact, .body-container--support) .hs-form > fieldset:has(textarea) { order: 6; }
  :is(.body-container--contact, .body-container--support) .hs-form > .legal-consent-container { order: 7; }
  :is(.body-container--contact, .body-container--support) .hs-form > .hs_submit,
  :is(.body-container--contact, .body-container--support) .hs-form > .hs-submit { order: 8; }

  :is(.body-container--contact, .body-container--support) .hs-form > fieldset.form-columns-2,
  :is(.body-container--contact, .body-container--support) .hs-form > fieldset.form-columns-3,
  :is(.body-container--contact, .body-container--support) .hs-form > fieldset:has(textarea),
  :is(.body-container--contact, .body-container--support) .hs-form > .legal-consent-container,
  :is(.body-container--contact, .body-container--support) .hs-form > .hs_submit,
  :is(.body-container--contact, .body-container--support) .hs-form > .hs-submit {
    grid-column: 1 / -1;
  }

  :is(.body-container--contact, .body-container--support) .hs-form > fieldset.form-columns-2 .hs-form-field {
    padding-right: 10px;
  }
  :is(.body-container--contact, .body-container--support) .hs-form > fieldset.form-columns-2 .hs-form-field + .hs-form-field {
    padding-right: 0;
    padding-left: 10px;
  }

  :is(.body-container--contact, .body-container--support) .hs-form input[type=submit],
  :is(.body-container--contact, .body-container--support) .hs-form .hs-button {
    width: auto;
    min-width: 220px;
  }
}
/* Table */

table {
  border-collapse: collapse;
  margin-bottom: 1.4rem;
  overflow-wrap: break-word;
}

/* Table cells */

td,
th {
  vertical-align: top;
}

/* Table header */

thead th {
  vertical-align: bottom;
}

/* Components
Specific pieces of UI that are stylized. Typically used for global partial styling
*/

/* ==========================================================================
   Trilion Header - Floating frosted glass (Markforged-inspired)
   ========================================================================== */

/* Floating frosted glass header. 2026-05-12: dialed transparency back up
   toward brighter (0.40 -> 0.72 default, 0.62 -> 0.86 scrolled; blur 28 ->
   24px). Stays liquid-glass but the menu reads bright + clean over hero
   imagery. Authoritative copy lives in utilities/_helper.css (!important);
   this file is informational. */
.header {
  position: fixed;
  top: 10px;
  left: 16px;
  right: 16px;
  z-index: 100;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  background-color: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

/* Fallback for browsers without backdrop-filter - keep opaque enough to read */
@supports not (backdrop-filter: blur(1px)) {
  .header {
    background-color: rgba(255, 255, 255, 0.94);
  }
}

.header--scrolled {
  background-color: rgba(255, 255, 255, 0.86);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.08);
}

/* Push body content below the fixed header */
.body-wrapper {
  padding-top: 72px;
}

/* Header DND sections */

.header .dnd-section {
  padding: 0;
}

/* Header container - no overflow clipping so dropdowns and drawer can escape */

.header__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 56px;
  padding: 4px 12px;
  overflow: visible;
}

.header__container .content-wrapper {
  overflow: visible;
}

@media (min-width: 768px) {
  .header {
    left: 24px;
    right: 24px;
  }
}

@media (max-width: 767px) {
  .header {
    top: 8px;
    left: 8px;
    right: 8px;
    border-radius: 10px;
  }

  .body-wrapper {
    padding-top: 64px;
  }
}

/* Hide the search/language row - keep nav clean like Markforged */
.header__row-1 {
  display: none;
}

.header__row-2 {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

@media (max-width: 1150px) and (min-width: 767px) {
  .header__column {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .header__container {
    flex-direction: row !important;
    padding: 4px 16px !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .header__column {
    position: relative;
  }

  .header__row-1 {
    padding-top: 0;
  }

  .header__row-2 {
    justify-content: center;
    padding: 1.05rem;
  }
}

/* Navigation skipper */

.header__skip {
  height: 1px;
  left: -1000px;
  overflow: hidden;
  position: absolute;
  text-align: left;
  top: -1000px;
  width: 1px;
}

.header__skip:hover,
.header__skip:focus,
.header__skip:active {
  height: auto;
  left: 0;
  overflow: visible;
  top: 0;
  width: auto;
}

/* Logo */

.header__logo {
  align-items: center;
  display: flex;
  height: auto;
  margin-right: auto;
  /* 2026-05-10: 130 -> 160 desktop. 2026-05-16: 160 -> 200 per Charles. */
  max-width: 200px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .header__logo {
    margin: 0;
    width: auto;
    max-width: 155px;
  }
}

.header__logo img {
  max-width: 100%;
}

.header__logo .logo-company-name {
  font-size: 1.167rem;
  margin-top: 0.7rem;
}

.header__logo--main {
  padding-top: 0;
}

/* Search bar */

.header__search {
  padding: 0 1rem;
  width: auto;
}



  .hs-search-field__form {
    position: relative;
  }

  .header__search .hs-search-field__label {
    flex-basis: auto;
  }



.header__search .hs-search-field__input {
  
  height: 45px;
  padding: 0 0.7rem;
}



  .header__search .hs-search-field__button {
    padding: 0;
    fill: #000;
    background-color: transparent;
    border: none;
    padding: 10px;
    position: absolute;
    top: 0;
    right: 0;
  }

  .header__search .hs-search-field__button svg {
    height: 25px;
  }


.header__search .hs-search-field--open .hs-search-field__input {
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  max-width: 100%;
}

.header__search .hs-search-field--open .hs-search-field__suggestions {
  background-color: #FFF;
  border: 2px solid #D1D6DC;
  border-radius: 0 0 6px 6px;
  border-top-width: 1px;
  position: absolute;
  width: 100%;
  z-index: 10;
}

.header__search .hs-search-field__suggestions li {
  border-top: 1px solid #D1D6DC;
  font-size: 0.875rem;
}

.header__search .hs-search-field__suggestions li a {
  color: #494A52;
  padding: 0.35rem 0.7rem;
  text-decoration: none;
  transition: background-color 0.3s;
}

.header__search .hs-search-field__suggestions #results-for {
  display: none;
}

@media (min-width: 767px) {
  .header__search form {
    align-items: center;
    display: flex;
    flex-direction: row;
  }

  .header__search label {
    margin: 0 1rem 0 0;
  }

  .header__search .hs-search-field__input {
    width: auto;
  }
}

@media (max-width: 767px) {
  .header__search {
    border-top: 2px solid #CED4DB;
    order: 1;
    padding: 1.05rem;
  }
}

/* Language switcher */

.header__language-switcher {
  cursor: pointer;
  padding-right: 1.4rem;
}

.header__language-switcher .lang_switcher_class {
  position: static;
}

.header__language-switcher .lang_list_class {
  border: 2px solid;
  border-radius: 3px;
  box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2);
  display: block;
  left: calc(100% - 24px);
  opacity: 0;
  min-width: 100px;
  padding-top: 0;
  text-align: left;
  top: 100%;
  transition: opacity 0.3s;
  visibility: hidden;
}

.header__language-switcher:hover .lang_list_class,
.header__language-switcher:focus .lang_list_class {
  opacity: 1;
  transition: opacity 0.3s;
  visibility: visible;
}

.header__language-switcher .lang_list_class:before {
  left: 70%;
  top: -25px;
}

.header__language-switcher .lang_list_class:after {
  left: 70%;
  top: -22px;
}

.header__language-switcher .lang_list_class.first-active::after {
  top: -22px;
  transition: 0.3s;
}

.header__language-switcher .lang_list_class li {
  border: none;
  font-size: 18px;
  padding: 0.35rem 0.7rem;
}

.header__language-switcher .lang_list_class li:first-child {
  border-radius: 6px 6px 0 0;
  border-top: none;
}

.header__language-switcher .lang_list_class li:last-child {
  border-bottom: none;
  border-radius: 0 0 6px 6px;
}

.header__language-switcher .lang_list_class li:hover {
  transition: background-color 0.3s;
}

.header__language-switcher--label {
  display: flex;
  position: relative;
}

.header__language-switcher--label-current {
  align-items: center;
  display: flex;
  font-size: 0.75rem;
  margin-bottom: 0.175rem;
  margin-left: 0.7rem;
}

.header__language-switcher--label-current:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #494A52;
  content: "";
  display: block;
  height: 0px;
  margin-left: 0.7rem;
  margin-top: 0.175rem;
  width: 0px;
}

@media (max-width: 767px) {
  .header__language-switcher {
    border-top: 2px solid #CED4DB;
    padding-left: 1.05rem;
    padding-right: 0;
  }

  .header__language-switcher .lang_list_class {
    border: none;
    box-shadow: unset;
    display: block;
    left: 30px;
    opacity: 1;
    padding: 0 1.05rem;
    top: 0;
    visibility: visible;
  }

  .header__language-switcher .lang_list_class li {
    background-color: inherit;
    font-size: 0.917rem;
  }

  .header__language-switcher--label-current {
    display: none;
  }

  .header__language-switcher .globe_class {
    background-image: none;
  }

  .header__language-switcher .lang_list_class li:hover{
    background-color: inherit;
  }

  .header__language-switcher .lang_list_class:before,
  .header__language-switcher .lang_list_class:after {
    content: none;
  }
    /* V1 lang switcher updates to keep "in line" w/ v0 mobile styles */
    .header__language-switcher .hs-language-switcher__menu {
        display: block;
        box-shadow:none!important;
        background: transparent;
    }
    .header__language-switcher .hs-language-switcher__menu a {
        font-size: 20px!important;
    }
    .header__language-switcher .hs-language-switcher__button {
        display: none;
    }
  }

/* Navigation */

#nav-toggle {
  display: none;
}

/* Mobile toggles */

@media (max-width: 767px) {
  .header__navigation,
  .header__search,
  .header__language-switcher {
    display: none;
    width: 100%;
  }

  .header__navigation.open,
  .header__search.open,
  .header__language-switcher.open {
    background-color: #F8FAFC;
    display: block;
    left: 0;
    min-height: calc(100vh - 115px);
    position: absolute;
    right: 0;
    top: 75px;
    z-index: 2;
  }

  .header__navigation--toggle,
  .header__search--toggle,
  .header__language-switcher--toggle,
  .header__close--toggle {
    cursor: pointer;
    margin: 0 5vw;
    position: relative;
  }

  .header__navigation--toggle.hide,
  .header__search--toggle.hide,
  .header__language-switcher--toggle.hide {
    display: none;
  }

  .header__navigation--toggle.open,
  .header__search--toggle.open,
  .header__language-switcher--toggle.open {
    display: block;
    margin-left: 0;
    margin-right: auto;
  }

  .header__navigation--toggle:after,
  .header__search--toggle:after,
  .header__language-switcher--toggle:after {
    display: none;
    font-size: 1.083rem;
    font-weight: 600;
    position: absolute;
    left: 40px;
    text-transform: uppercase;
    top: -10px;
  }

  .header__navigation--toggle.open:after,
  .header__search--toggle.open:after,
  .header__language-switcher--toggle.open:after {
    display: block;
    word-break: normal;
  }

  .header__navigation--toggle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAxOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5oYW1idXJnZXI8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGcgaWQ9ImhhbWJ1cmdlciIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8ZyBpZD0iR3JvdXAiIHN0cm9rZT0iIzQ5NEE1MiIgc3Ryb2tlLXdpZHRoPSIzIj4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIxLjUiIHk9IjEuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktNCIgeD0iMS41IiB5PSI5LjUiIHdpZHRoPSIyMSIgaGVpZ2h0PSIxIiByeD0iMC41Ij48L3JlY3Q+ICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS1Db3B5LTUiIHg9IjEuNSIgeT0iMTcuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==);
    background-size: cover;
    height: 25px;
    width: 25px;
  }

  .header__navigation--toggle:after {
    content: "Menu";
  }

  .header__language-switcher--toggle {
    background-image: url(//static.hsappstatic.net/cos-LanguageSwitcher/static-1.1/img/globe.png);
    background-size: cover;
    height: 25px;
    width: 25px;
  }

  .header__language-switcher--toggle:after {
    content: "Language";
  }

  .header__search--toggle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TZWFyY2g8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+ICAgICAgICA8cGF0aCBkPSJNOS4xMzg2MTUzNCwxNS44OTI1Njg1IEM1LjQxMzk1NzQyLDE1Ljg5MjU2ODUgMi4zODM4ODUyNywxMi44NjM0NDc1IDIuMzgzODg1MjcsOS4xMzkwMDM3NiBDMi4zODM4ODUyNyw1LjQxNDU2MDA1IDUuNDEzOTU3NDIsMi4zODM4ODUyNyA5LjEzODYxNTM0LDIuMzgzODg1MjcgQzEyLjg2MzI3MzMsMi4zODM4ODUyNyAxNS44OTI1Njg1LDUuNDE0NTYwMDUgMTUuODkyNTY4NSw5LjEzOTAwMzc2IEMxNS44OTI1Njg1LDEyLjg2MzQ0NzUgMTIuODYzMjczMywxNS44OTI1Njg1IDkuMTM4NjE1MzQsMTUuODkyNTY4NSBNOS4xMzg3NTI0NSwyLjQzMzYwODg3ZS0xMyBDMTQuMTc3OTk1NSwyLjQzMzYwODg3ZS0xMyAxOC4yNzY0NTM3LDQuMTAwMzI0NzEgMTguMjc2NDUzNyw5LjEzOTI3Nzk2IEMxOC4yNzY0NTM3LDExLjIyOTgyMTEgMTcuNTcxMDE2OSwxMy4xNTg0NDM0IDE2LjM4NTYzMTMsMTQuNjk5NjY5NiBMMjMuNjUwODg4MSwyMS45NjUyMjY2IEMyNC4xMTYzNzA2LDIyLjQzMDcwOTIgMjQuMTE2MzcwNiwyMy4xODU0MDU1IDIzLjY1MDg4ODEsMjMuNjUwODg4MSBDMjMuMTg1NDA1NSwyNC4xMTYzNzA2IDIyLjQzMDcwOTIsMjQuMTE2MzcwNiAyMS45NjUyMjY2LDIzLjY1MDg4ODEgTDE0LjY5OTgxMzMsMTYuMzg1NDcxMyBDMTMuMTU4NDQwNSwxNy41NzA5NTA5IDExLjIyOTU3MzgsMTguMjc2NDUzNyA5LjEzODc1MjQ1LDE4LjI3NjQ1MzcgQzQuMDk5NTA5MzgsMTguMjc2NDUzNyAtMy43MzAzNDkzNmUtMTQsMTQuMTc4MjMxMiAtMy43MzAzNDkzNmUtMTQsOS4xMzkyNzc5NiBDLTMuNzMwMzQ5MzZlLTE0LDQuMTAwMzI0NzEgNC4wOTk1MDkzOCwyLjQzMzYwODg3ZS0xMyA5LjEzODc1MjQ1LDIuNDMzNjA4ODdlLTEzIFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4gICAgPC9kZWZzPiAgICA8ZyBpZD0iU2VhcmNoIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj4gICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICAgICAgPC9tYXNrPiAgICAgICAgPHVzZSBpZD0iSWNvbnMvQWN0aW9ucy9TZWFyY2giIGZpbGw9IiM0OTRBNTIiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICA8L2c+PC9zdmc+);
    background-size: cover;
    height: 25px;
    width: 25px;
  }

  .header__search--toggle:after {
    content: "Search";
  }

  .header__close--toggle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjE5cHgiIHZpZXdCb3g9IjAgMCAyNCAxOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5jbG9zZTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZyBpZD0iY2xvc2UiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9Ikdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyLjAwMDAwMCwgLTEuMDAwMDAwKSIgc3Ryb2tlPSIjNDk0QTUyIiBzdHJva2Utd2lkdGg9IjMiPiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwLjAwMDAwMCwgMTAuNTAwMDAwKSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMC4wMDAwMDAsIC0xMC41MDAwMDApICIgeD0iLTAuNSIgeT0iMTAuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCAxMC41MDAwMDApIHJvdGF0ZSg0NS4wMDAwMDApIHRyYW5zbGF0ZSgtMTAuMDAwMDAwLCAtMTAuNTAwMDAwKSAiIHg9Ii0wLjUiIHk9IjEwLjUiIHdpZHRoPSIyMSIgaGVpZ2h0PSIxIiByeD0iMC41Ij48L3JlY3Q+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=);
    background-repeat: no-repeat;
    background-size: 110%;
    display: none;
    height: 25px;
    margin-right: 0;
    width: 25px;
  }

  .header__close--toggle.show {
    display: block;
  }
}
/* ==========================================================================
   Trilion Footer - Multi-column dark footer
   ========================================================================== */

.trilion-footer {
  background-color: #1A1D2E;
  color: #C0C4CC;
  padding: 64px 0 0 0;
  font-family: "Space Grotesk", sans-serif;
}

.trilion-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ==========================================================================
   TOP - Brand + 4 link columns
   ========================================================================== */

.trilion-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 1100px) {
  .trilion-footer__top {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 40px;
  }
  .trilion-footer__brand {
    grid-column: 1 / -1;
    margin-bottom: 16px;
  }
}

@media (max-width: 640px) {
  .trilion-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media (max-width: 480px) {
  .trilion-footer__top {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .trilion-footer__inner {
    padding: 0 20px;
  }
}

/* ==========================================================================
   BRAND COLUMN
   ========================================================================== */

.trilion-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 320px;
}

.trilion-footer__logo {
  display: inline-block;
  text-decoration: none;
  line-height: 0;
  border-bottom: none !important;
}

.trilion-footer__logo img {
  display: block;
  max-width: 140px;
  height: auto;
  width: auto;
}

.trilion-footer__tagline {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 18px;
  line-height: 1.4;
  color: #FFFFFF;
  margin: 0;
  font-weight: 400;
}

.trilion-footer__partner-link {
  display: inline-flex;
  align-items: center;
  padding: 12px 16px;
  background-color: #FFFFFF;
  border-radius: 6px;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: transform 0.2s ease;
  width: fit-content;
  max-width: 280px;
}

.trilion-footer__partner-link:hover,
.trilion-footer__partner-link:focus {
  transform: translateY(-1px);
  text-decoration: none !important;
  border-bottom: none !important;
}

.trilion-footer__partner-img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
}

.trilion-footer__social {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.trilion-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  color: #C0C4CC;
  background-color: rgba(255, 255, 255, 0.06);
  text-decoration: none !important;
  border-bottom: none !important;
  transition: all 0.2s ease;
}

.trilion-footer__social-link:hover,
.trilion-footer__social-link:focus {
  background-color: #AA1E1E !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
}

/* ==========================================================================
   LINK COLUMNS
   ========================================================================== */

.trilion-footer__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.trilion-footer__heading {
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0 0 4px 0;
}

.trilion-footer__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trilion-footer__list li {
  padding: 0 !important;
  margin: 0 !important;
  position: static !important;
}

.trilion-footer__list li::before {
  content: none !important;
  display: none !important;
}

.trilion-footer__list a {
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #C0C4CC !important;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: color 0.2s ease;
  line-height: 1.5;
}

.trilion-footer__list a:hover,
.trilion-footer__list a:focus {
  color: #FFFFFF !important;
  border-bottom: none !important;
}

/* ==========================================================================
   CONTACT INFO (in company column)
   ========================================================================== */

.trilion-footer__contact {
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trilion-footer__contact-link {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 13px !important;
  color: #C0C4CC !important;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: color 0.2s ease;
}

.trilion-footer__contact-link svg {
  flex-shrink: 0;
  color: #AA1E1E;
}

.trilion-footer__contact-link:hover,
.trilion-footer__contact-link:focus {
  color: #FFFFFF !important;
  border-bottom: none !important;
}

/* ==========================================================================
   BOTTOM - Legal bar
   ========================================================================== */

.trilion-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px 0;
}

.trilion-footer__copyright {
  font-size: 13px;
  color: #8B8F9C;
  margin: 0;
}

.trilion-footer__legal {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 24px;
}

.trilion-footer__legal li {
  padding: 0 !important;
  margin: 0 !important;
  position: static !important;
}

.trilion-footer__legal li::before {
  content: none !important;
  display: none !important;
}

.trilion-footer__legal a {
  font-size: 13px !important;
  color: #8B8F9C !important;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: color 0.2s ease;
}

.trilion-footer__legal a:hover,
.trilion-footer__legal a:focus {
  color: #FFFFFF !important;
  border-bottom: none !important;
}

@media (max-width: 480px) {
  .trilion-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 12px;
  }
  .trilion-footer__legal {
    flex-wrap: wrap;
    gap: 16px;
  }
}

/* ==========================================================================
   Hide the OLD HubSpot footer DnD area (from the boilerplate)
   ========================================================================== */

footer.footer {
  display: none !important;
}
/* Menu and simple menu */

.hs-menu-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Horizontal menu */

.hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper {
  flex-direction: column;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-horizontal ul {
    flex-direction: column;
  }
}

/* Vertical menu */

.hs-menu-wrapper.hs-menu-flow-vertical ul {
  flex-direction: column;
}

/* Flyouts */

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts ul {
  display: inline-flex;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-vertical ul {
    display: flex;
  }
}

.hs-menu-wrapper.flyouts .hs-item-has-children {
  position: relative;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper {
  left: -9999px;
  opacity: 0;
  position: absolute;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper a {
  display: block;
  white-space: nowrap;
}

.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 0;
  opacity: 1;
  top: 100%;
}

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 100%;
  opacity: 1;
  top: 0;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.flyouts .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
    left: 0;
    opacity: 1;
    position: relative;
    top: auto;
  }
}

/* CTA, logo, and rich text images */

.hs_cos_wrapper_type_cta img,
.hs_cos_wrapper_type_logo img,
.hs_cos_wrapper_type_rich_text img {
  height: auto;
  max-width: 100%;
}
/* ==========================================================================
   Dynamic Content Components
   Shared styles for HubDB-driven cards, grids, filters, and badges.
   ========================================================================== */

/* --- Dynamic Card Grid --- */

.dynamic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .dynamic-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .dynamic-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Base Card Styles --- */

.event-card,
.blog-card,
.resource-card {
  background: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.event-card:hover,
.blog-card:hover,
.resource-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* --- Event Card --- */

.event-card__image {
  height: 200px;
  overflow: hidden;
  background: #F5F0EB;
}

.event-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.event-card__date {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #AA1E1E;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px 0;
}

.event-card__title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  color: #1A1D2E;
  line-height: 1.3;
  margin: 0 0 8px 0;
}

.event-card__title a {
  color: inherit;
  text-decoration: none;
}

.event-card__title a:hover {
  color: #AA1E1E;
}

.event-card__meta {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  color: #606A76;
  margin: 0;
}

.event-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #AA1E1E;
  text-decoration: none;
}

.event-card__cta:hover {
  color: #8B1919;
}

/* --- Blog Post Card --- */

.blog-card__image {
  height: 200px;
  overflow: hidden;
  background: #F5F0EB;
}

.blog-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card__category {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #AA1E1E;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px 0;
}

.blog-card__title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  color: #1A1D2E;
  line-height: 1.3;
  margin: 0 0 8px 0;
}

.blog-card__title a {
  color: inherit;
  text-decoration: none;
}

.blog-card__title a:hover {
  color: #AA1E1E;
}

.blog-card__excerpt {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  color: #606A76;
  line-height: 1.5;
  margin: 0 0 auto 0;
}

.blog-card__date {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  color: #606A76;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #EEEEF0;
}

/* --- Resource Card (shared with module) --- */

.resource-card__thumb {
  height: 200px;
  overflow: hidden;
  background: #F5F0EB;
  display: flex;
  align-items: center;
  justify-content: center;
}

.resource-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.resource-card__thumb--placeholder {
  background: #F5F0EB;
}

.resource-card__thumb-icon {
  font-size: 48px;
  opacity: 0.4;
}

.resource-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.resource-card__title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  color: #1A1D2E;
  line-height: 1.3;
  margin: 8px 0;
}

.resource-card__desc {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  color: #606A76;
  line-height: 1.5;
  margin: 0 0 auto 0;
}

.resource-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #EEEEF0;
}

.resource-card__gating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  color: #606A76;
}

.resource-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #AA1E1E;
  text-decoration: none;
}

.resource-card__cta:hover {
  color: #8B1919;
}

/* --- Type / Category Badges --- */

.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 100px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* Resource type badges */
.badge--tds {
  background: #E8F4FD;
  color: #0072EF;
}

.badge--application-note {
  background: #F0E8FD;
  color: #6B3FA0;
}

.badge--white-paper {
  background: #E8FDF0;
  color: #1B7A3D;
}

.badge--case-study {
  background: #FDF2E8;
  color: #B8651A;
}

.badge--guide {
  background: #FDE8E8;
  color: #AA1E1E;
}

.badge--webinar-recording {
  background: #1A1D2E;
  color: #FFFFFF;
}

/* Event category badges */
.badge--tradeshow {
  background: #E8F4FD;
  color: #0072EF;
}

.badge--webinar {
  background: #1A1D2E;
  color: #FFFFFF;
}

.badge--workshop {
  background: #FDF2E8;
  color: #B8651A;
}

.badge--conference {
  background: #F0E8FD;
  color: #6B3FA0;
}

.badge--training {
  background: #E8FDF0;
  color: #1B7A3D;
}

.badge--demo {
  background: #FDE8E8;
  color: #AA1E1E;
}

/* --- Filter Bar (shared) --- */

.resource-filters {
  margin-bottom: 2rem;
}

.resource-filters__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.resource-filters__select,
.resource-filters__search {
  padding: 10px 16px;
  border: 2px solid #D1D6DC;
  border-radius: 3px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  color: #323736;
  background-color: #FFFFFF;
  appearance: auto;
  transition: border-color 0.2s ease;
}

.resource-filters__select:focus,
.resource-filters__search:focus {
  outline: none;
  border-color: #AA1E1E;
}

.resource-filters__search {
  width: 250px;
}

.resource-filters__clear {
  padding: 10px 20px;
  border: 2px solid #D1D6DC;
  border-radius: 6px;
  background: transparent;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  color: #606A76;
  cursor: pointer;
  transition: all 0.2s ease;
}

.resource-filters__clear:hover {
  border-color: #AA1E1E;
  color: #AA1E1E;
}

.resource-filters__count {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  color: #606A76;
}

@media (max-width: 768px) {
  .resource-filters__controls {
    flex-direction: column;
    align-items: stretch;
  }

  .resource-filters__search {
    width: 100%;
  }
}

/* --- Empty States --- */

.dynamic-empty {
  text-align: center;
  padding: 60px 24px;
}

.dynamic-empty p {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  color: #606A76;
  margin: 0 0 20px 0;
}

.dynamic-empty .resource-filters__clear {
  display: inline-block;
}

/* --- Event Detail Page Sections --- */

.event-section {
  padding: 60px 0;
}

.event-section__inner {
  max-width: 800px;
  margin: 0 auto;
}

.event-hero {
  min-height: 400px;
}

/* --- Resources Page Sections --- */

.resources-hero .dnd-section {
  padding: 80px 0 60px;
}

.resources-library-section .dnd-section {
  padding: 60px 0;
}

.resources-cta .dnd-section {
  padding: 80px 0;
}

/* --- Events Listing - compact CTA strip ---
   Charles flagged the "Want training at your facility?" section as too big.
   Override the global vertical_spacing dnd-section padding so this CTA reads
   as a slim strip rather than a full-height hero. Keeps the navy bg + red
   button so it still anchors the bottom of the listing. */
.events-listing-cta-area .dnd-section {
  padding-top: 48px;
  padding-bottom: 48px;
}
@media (min-width: 768px) {
  .events-listing-cta-area .dnd-section {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

/* Utilities
Helper classes with ability to override anything that comes before it
*/

/* ==========================================================================
   BRAND FOCUS RING - keyboard accessibility ONLY
   Use a quiet brand color (navy on light, white on dark) so a focus ring
   never shows up as a loud accent. ZEISS blue removed from the global rule
   because it added a colour that's not part of the surface palette.
   ========================================================================== */
:focus-visible {
  outline: 2px solid rgba(26, 29, 46, 0.55);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Primary red CTA → white ring (only color that works on red). */
a[href*="/contact"][style*="background"]:focus-visible,
a[style*="background: #AA1E1E"]:focus-visible,
a[style*="background:#AA1E1E"]:focus-visible,
a[style*="background-color: #AA1E1E"]:focus-visible,
a[style*="background-color:#AA1E1E"]:focus-visible,
.tr-cta:focus-visible {
  outline-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25);
}

/* Skip outline entirely for mouse focus - only keyboard navigation gets one. */
:focus:not(:focus-visible) {
  outline: none;
}

/* Stat "big numbers" - authored in red inline. Desaturate to navy so red is
   reserved for CTAs and identity. Matches DM Serif Display 44px inline spans. */
[class*="body-container--"] .dnd-section div[style*="display: flex"] > div > div[style*="font-size: 44px"],
[class*="body-container--"] .dnd-section div[style*="display:flex"] > div > div[style*="font-size: 44px"] {
  color: #1A1D2E !important;
}

/* For content that needs to be visually hidden but stay visible for screenreaders */

.show-for-sr {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

@media (max-width: 767px) {
  .show-for-sr--mobile {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
  }
}

/* ==========================================================================
   HERO - First dnd-section fills viewport (full-bleed like markforged.com)
   Targets: .dnd-section.row-number-1 inside .body-container--home
   HubSpot renders: div.row-fluid-wrapper.row-number-1.dnd-section.dnd_area-row-0-padding
   ========================================================================== */

/* Override HubSpot's generated padding to give the hero room to breathe */
/* Broadened to apply to EVERY page's hero (row-number-1 dnd-section), not just home */
.dnd-section.row-number-1 {
  min-height: calc(100vh - 80px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  /* padding-top/bottom set by the later `.dnd-section.row-number-1` block
     (48px) - declaring 60px here was dead weight, overridden below. */
  padding-left: 40px !important;
  padding-right: 40px !important;
  box-sizing: border-box !important;
}

.dnd-section.row-number-1 > .row-fluid {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  width: 100% !important;
  /* max-width + auto margins already applied by the broader
     `.dnd-section > .row-fluid` rule below. */
}

/* Hero headline - no forced color. If a future hero uses a dark background
   it needs to work with inline `color:#FFFFFF` on the heading. */
.dnd-section.row-number-1 h1 {
  font-family: "DM Serif Display", Georgia, "Times New Roman", serif !important;
  font-size: 56px !important;
  line-height: 1.06 !important;
  letter-spacing: -0.025em !important;
  font-weight: 400 !important;
}

@media (min-width: 768px) {
  .dnd-section.row-number-1 h1 {
    font-size: 64px !important;
  }
}

@media (min-width: 1200px) {
  .dnd-section.row-number-1 h1 {
    font-size: 76px !important;
  }
}

@media (max-width: 767px) {
  .dnd-section.row-number-1 {
    min-height: calc(100vh - 72px) !important;
    padding-top: 32px !important;
    padding-bottom: 32px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .dnd-section.row-number-1 > .row-fluid {
    flex-direction: column !important;
  }

  .dnd-section.row-number-1 h1 {
    font-size: 36px !important;
    line-height: 1.1 !important;
  }
}

/* Hero image */
.dnd-section.row-number-1 img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* ==========================================================================
   FULL-WIDTH SECTIONS - Inner content max-width 1200px, centered
   HubSpot structure:
     div.row-fluid-wrapper.dnd-section (full-bleed)
       └── div.row-fluid (the content row - needs to be capped)
   ========================================================================== */

/* UNIVERSAL inner-container cap - home, landing-page, solution,
   industry, product, resource, case-study, blog all render through a
   `body-container--*` wrapper. Apply the SAME 1200px max-width + 32px
   side padding across every template so pages have one consistent
   content rhythm regardless of the editor's "full width section" flag.
   The selector is intentionally scoped through `[class*="body-container--"]`
   to outrank HubSpot's auto-generated `.dnd_area-row-N-force-full-width-section`
   rules that would otherwise let inner content run edge-to-edge on the home
   template. `!important` is defensive since the generated rules also carry
   their own specificity. */
[class*="body-container--"] .dnd-section > .row-fluid,
.dnd-section > .row-fluid {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  box-sizing: border-box !important;
  float: none !important;
}

.dnd-section .row-fluid .row-fluid {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 767px) {
  .dnd-section > .row-fluid {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Section vertical spacing - tightened further per Charles's "still too sparse"
   feedback. Was 72→56→40. Hero stays slightly more open. */
.dnd-section {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.dnd-section.row-number-1 {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

/* Full-width breakout modules (related-events, related-resources,
   related-products, interactive-hotspots) render their OWN background and
   span 100vw via negative margins. Zero out the wrapping .dnd-section
   padding so the module's bg is flush - no colored gutters above or below. */
.dnd-section:has(.tr-events-section),
.dnd-section:has(.tr-resources-section),
.dnd-section:has(.trilion-resources),
.dnd-section:has(.tp-section),
.dnd-section:has(.tr-hotspots),
.dnd-section:has(.tr-locations-list),
.dnd-section:has(.tr-anchor-wrap) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Same idea for the inline `<section>` rich_text CTA on dark navy - it
   carries its own padding so the DnD wrapper doesn't need any. */
.dnd-section:has(> .row-fluid section[style*="#1A1D2E"]),
.dnd-section:has(> .row-fluid section[style*="#1a1d2e"]) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Tame inline CTA / module sections that hardcode large padding values. */
.body-container--landing-page .hs_cos_wrapper_type_rich_text section[style*="padding: 110px"],
.body-container--landing-page .hs_cos_wrapper_type_rich_text section[style*="padding:110px"] {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
.body-container--landing-page .hs_cos_wrapper_type_rich_text section[style*="padding: 80px"],
.body-container--landing-page .hs_cos_wrapper_type_rich_text section[style*="padding:80px"],
.body-container--landing-page .hs_cos_wrapper_type_rich_text section[style*="padding: 100px"],
.body-container--landing-page .hs_cos_wrapper_type_rich_text section[style*="padding:100px"] {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

@media (max-width: 767px) {
  .dnd-section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

/* ==========================================================================
   BUTTON / CTA ALIGNMENT - Center all CTA sections
   ========================================================================== */

/* Paragraphs should NOT auto-center - that breaks left-aligned heroes */
/* Only center paragraphs that explicitly have text-align: center */
.dnd-section .hs_cos_wrapper_type_rich_text p[style*="text-align: center"] {
  margin-left: auto;
  margin-right: auto;
}

/* All other paragraphs respect their natural left alignment */
.dnd-section .hs_cos_wrapper_type_rich_text p {
  margin-left: 0;
  margin-right: 0;
}

/* All sections with a single centered CTA */
.dnd-section .hs_cos_wrapper_type_rich_text p:last-child:has(a[href="/contact"]),
.dnd-section .hs_cos_wrapper_type_rich_text p:last-child:has(a[href="/systems"]) {
  text-align: inherit;
}

/* Dark section + CTA section - center everything */
.dnd-section.row-number-6 .hs_cos_wrapper_type_rich_text,
.dnd-section.row-number-7 .hs_cos_wrapper_type_rich_text {
  text-align: center;
}

/* Stats bar - center all stat items */
.dnd-section.row-number-2 .hs_cos_wrapper_type_rich_text {
  text-align: center;
}

/* ==========================================================================
   HEADER - Floating frosted glass
   Forces over HubSpot's generated styles
   ========================================================================== */

.header {
  position: fixed !important;
  top: 10px !important;
  left: 16px !important;
  right: 16px !important;
  z-index: 100 !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  background-color: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.3s ease !important;
  overflow: visible !important;
}

.header--scrolled {
  background-color: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.08) !important;
}

/* Push body content below fixed header */
.body-wrapper {
  padding-top: 92px !important;
}

@media (min-width: 768px) {
  .header {
    left: 24px !important;
    right: 24px !important;
  }
}

@media (max-width: 767px) {
  .header {
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    border-radius: 10px !important;
  }

  .body-wrapper {
    padding-top: 72px !important;
  }
}

/* ==========================================================================
   HEADER LOGO - Sized to match the 38px cart + CTA icons. Source PNG is
   1782×967 (~1.84:1), so a 38px tall mark renders at ~70px wide. We give
   it a generous max-width so wider future logos still fit.
   ========================================================================== */

.header__logo,
.header__logo--main {
  max-width: 200px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}
.header__logo a {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  text-decoration: none !important;
}

.header__logo img,
.header__logo a img {
  height: 38px !important;
  width: auto !important;
  max-width: 200px !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block !important;
}

@media (max-width: 767px) {
  .header__logo,
  .header__logo--main {
    max-width: 160px !important;
    height: 32px !important;
  }
  .header__logo img {
    height: 32px !important;
    width: auto !important;
    max-width: 160px !important;
    max-height: none !important;
  }
}

/* Force header container to stay compact and single-row on ALL viewports */
.header__container {
  min-height: 68px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 24px !important;
  gap: 16px !important;
}

@media (max-width: 767px) {
  .header__container {
    padding: 8px 16px !important;
    min-height: 60px !important;
  }
}

/* ==========================================================================
   HERO - Force left-alignment lockstep for overline/h1/subtitle/buttons
   All four must share the same x-origin regardless of inline styles
   ========================================================================== */

.dnd-section.row-number-1 .hs_cos_wrapper_type_rich_text,
.body-container--home .dnd-section.row-number-1 .hs_cos_wrapper_type_rich_text {
  text-align: left !important;
}

.dnd-section.row-number-1 .hs_cos_wrapper_type_rich_text > span,
.dnd-section.row-number-1 .hs_cos_wrapper_type_rich_text p,
.dnd-section.row-number-1 .hs_cos_wrapper_type_rich_text h1,
.dnd-section.row-number-1 .hs_cos_wrapper_type_rich_text h2 {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: left !important;
}

/* Kill any inline max-width that would visually float the subtitle */
.dnd-section.row-number-1 .hs_cos_wrapper_type_rich_text p[style*="max-width"] {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Hero CTA row - flexbox so buttons have proper spacing on mobile */
.hero-cta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  align-items: center !important;
}

/* CTA button row - properly spaced on all viewports */
.cta-button-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  justify-content: center !important;
  align-items: center !important;
}

@media (max-width: 480px) {
  .hero-cta-row,
  .cta-button-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .hero-cta-row a,
  .cta-button-row a {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
}

/* Industry chips - hover effect */
.body-container--home a[href^="/aero"]:hover,
.body-container--home a[href^="/mobility"]:hover,
.body-container--home a[href^="/biomed"]:hover,
.body-container--home a[href^="/tech"]:hover,
.body-container--home a[href^="/energy"]:hover,
.body-container--home a[href^="/am"]:hover {
  border-color: #AA1E1E !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(170, 30, 30, 0.08) !important;
}

/* ==========================================================================
   CONTENT LISTS - Style markdown lists nicely instead of default bullet+blue
   ========================================================================== */

.dnd-section .hs_cos_wrapper_type_rich_text ul:not(.no-list):not(.menu) {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1.5rem 0 !important;
}

.dnd-section .hs_cos_wrapper_type_rich_text ul:not(.no-list):not(.menu) li {
  position: relative !important;
  padding-left: 28px !important;
  margin-bottom: 12px !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 17px !important;
  line-height: 1.5 !important;
  color: #323736 !important;
}

.dnd-section .hs_cos_wrapper_type_rich_text ul:not(.no-list):not(.menu) li::before {
  content: '' !important;
  position: absolute !important;
  left: 6px !important;
  top: 11px !important;
  width: 6px !important;
  height: 6px !important;
  background-color: #AA1E1E !important;
  border-radius: 50% !important;
}

/* Content area links - branded, not default browser blue.
   Exclude anything with an inline `background` (shorthand or longhand),
   border, or padding - those are styled CTAs that must keep their own colors. */
.dnd-section .hs_cos_wrapper_type_rich_text a:not([style*="background"]):not([style*="border:"]):not([style*="padding"]) {
  color: #AA1E1E !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  border-bottom: 1px solid rgba(170, 30, 30, 0.3) !important;
  transition: all 0.2s ease !important;
}

.dnd-section .hs_cos_wrapper_type_rich_text a:not([style*="background"]):not([style*="border:"]):not([style*="padding"]):hover,
.dnd-section .hs_cos_wrapper_type_rich_text a:not([style*="background"]):not([style*="border:"]):not([style*="padding"]):focus {
  color: #1A1D2E !important;
  border-bottom-color: #1A1D2E !important;
}

/* List items that contain only a link (the "Industries We Serve" pattern) */
.dnd-section .hs_cos_wrapper_type_rich_text ul:not(.no-list) li > a:only-child {
  display: inline-block !important;
  font-size: 17px !important;
  font-weight: 500 !important;
}

/* Apply same content styling to ALL body containers (home, about, contact, blog, landing-page, etc.) */
[class*="body-container--"] ul:not(.no-list):not(.menu):not(.menu__wrapper):not(.mega-menu__list):not(.mega-menu__dropdown-list):not(.utility-drawer__nav-list):not(.utility-drawer__nav-sublist) {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1.5rem 0 !important;
}

[class*="body-container--"] ul:not(.no-list):not(.menu):not(.menu__wrapper):not(.mega-menu__list):not(.mega-menu__dropdown-list):not(.utility-drawer__nav-list):not(.utility-drawer__nav-sublist) li {
  position: relative !important;
  padding-left: 28px !important;
  margin-bottom: 12px !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 17px !important;
  line-height: 1.5 !important;
  color: #323736 !important;
}

[class*="body-container--"] ul:not(.no-list):not(.menu):not(.menu__wrapper):not(.mega-menu__list):not(.mega-menu__dropdown-list):not(.utility-drawer__nav-list):not(.utility-drawer__nav-sublist) li::before {
  content: '' !important;
  position: absolute !important;
  left: 6px !important;
  top: 11px !important;
  width: 6px !important;
  height: 6px !important;
  background-color: #AA1E1E !important;
  border-radius: 50% !important;
}

/* Branded text links inside prose - kill default browser blue.
   Use `:not([style*="background"])` so shorthand AND longhand inline backgrounds
   are both treated as "this is a button, don't restyle it".
   Excluded classes: any nav/menu component (mega-menu, utility-drawer,
   tr-anchor-nav, footer/header menus) - those carry their own link styling. */
[class*="body-container--"] p a:not([style*="background"]):not([style*="border:"]):not([style*="padding"]):not([class*="button"]):not([class*="mega-menu"]):not([class*="utility-drawer"]):not([class*="tr-anchor-nav"]):not([class*="related-blog"]):not([class*="tp-card"]):not([class*="trilion-resources"]),
[class*="body-container--"] li a:not([style*="background"]):not([style*="border:"]):not([style*="padding"]):not([class*="button"]):not([class*="mega-menu"]):not([class*="utility-drawer"]):not([class*="tr-anchor-nav"]):not([class*="related-blog"]):not([class*="tp-card"]):not([class*="trilion-resources"]) {
  color: #AA1E1E !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  border-bottom: 1px solid rgba(170, 30, 30, 0.3) !important;
  transition: color 0.2s ease, border-bottom-color 0.2s ease !important;
}

[class*="body-container--"] p a:not([style*="background"]):not([style*="border:"]):not([style*="padding"]):not([class*="button"]):not([class*="mega-menu"]):not([class*="utility-drawer"]):not([class*="tr-anchor-nav"]):not([class*="related-blog"]):not([class*="tp-card"]):not([class*="trilion-resources"]):hover,
[class*="body-container--"] li a:not([style*="background"]):not([style*="border:"]):not([style*="padding"]):not([class*="button"]):not([class*="mega-menu"]):not([class*="utility-drawer"]):not([class*="tr-anchor-nav"]):not([class*="related-blog"]):not([class*="tp-card"]):not([class*="trilion-resources"]):hover {
  color: #1A1D2E !important;
  border-bottom-color: #1A1D2E !important;
}

/* DARK-SECTION SAFETY NET
   Any element whose inline style contains a dark brand color gets white text
   (and white paragraph links) for all descendants. Substring matches cover
   shorthand `background:`, longhand `background-color:`, `rgb()` and quoted
   hex variants. No `!important` - inline `color:#FFFFFF` on the heading
   always wins; this only rescues the cases where the author forgot. */
[class*="body-container--"] section[style*="#1A1D2E"],
[class*="body-container--"] section[style*="#1a1d2e"],
[class*="body-container--"] section[style*="#2D3142"],
[class*="body-container--"] section[style*="#2d3142"],
[class*="body-container--"] section[style*="rgb(26,"],
[class*="body-container--"] section[style*="rgb(26 "],
[class*="body-container--"] div[style*="background:#1A1D2E"],
[class*="body-container--"] div[style*="background: #1A1D2E"],
[class*="body-container--"] div[style*="background:#2D3142"],
[class*="body-container--"] div[style*="background: #2D3142"] {
  color: #FFFFFF;
}

[class*="body-container--"] section[style*="#1A1D2E"] h1,
[class*="body-container--"] section[style*="#1A1D2E"] h2,
[class*="body-container--"] section[style*="#1A1D2E"] h3,
[class*="body-container--"] section[style*="#1A1D2E"] h4,
[class*="body-container--"] section[style*="#1a1d2e"] h1,
[class*="body-container--"] section[style*="#1a1d2e"] h2,
[class*="body-container--"] section[style*="#1a1d2e"] h3,
[class*="body-container--"] section[style*="#2D3142"] h1,
[class*="body-container--"] section[style*="#2D3142"] h2,
[class*="body-container--"] section[style*="#2D3142"] h3,
[class*="body-container--"] div[style*="background:#1A1D2E"] h1,
[class*="body-container--"] div[style*="background:#1A1D2E"] h2,
[class*="body-container--"] div[style*="background:#1A1D2E"] h3,
[class*="body-container--"] div[style*="background: #1A1D2E"] h1,
[class*="body-container--"] div[style*="background: #1A1D2E"] h2,
[class*="body-container--"] div[style*="background: #1A1D2E"] h3 {
  color: #FFFFFF;
}

[class*="body-container--"] section[style*="#1A1D2E"] p a:not([style*="background"]),
[class*="body-container--"] section[style*="#1a1d2e"] p a:not([style*="background"]),
[class*="body-container--"] section[style*="#2D3142"] p a:not([style*="background"]),
[class*="body-container--"] div[style*="background:#1A1D2E"] p a:not([style*="background"]),
[class*="body-container--"] div[style*="background: #1A1D2E"] p a:not([style*="background"]) {
  color: #FFFFFF !important;
  border-bottom-color: rgba(255, 255, 255, 0.4) !important;
}

[class*="body-container--"] section[style*="#1A1D2E"] p a:not([style*="background"]):hover,
[class*="body-container--"] section[style*="#2D3142"] p a:not([style*="background"]):hover {
  color: #F27878 !important;
  border-bottom-color: #F27878 !important;
}

/* Opt-in CTA: raw <a> with class="tr-cta" gets the pill treatment.
   The previous broad rule (every unclassed <a> inside every <section>) caught
   too many unrelated prose links and turned them into red 14×32 pills. */
[class*="body-container--"] section a.tr-cta:not([style*="background"]) {
  display: inline-block !important;
  padding: 14px 32px !important;
  background-color: #AA1E1E !important;
  color: #FFFFFF !important;
  border-radius: 6px !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  text-decoration: none !important;
  border-bottom: none !important;
  margin: 8px 8px 8px 0 !important;
  transition: background-color 0.2s ease, transform 0.2s ease !important;
}

[class*="body-container--"] section a.tr-cta:not([style*="background"]):hover {
  background-color: #8B1818 !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
}

/* Disabled CTA state - muted gray, unclickable. Covers both <button> and
   <a role="button"> patterns. Stays in the neutral palette (no brand tone). */
.tr-cta:disabled,
.tr-cta[aria-disabled="true"],
a.tr-cta[aria-disabled="true"] {
  background: #C0C4CC !important;
  color: #606A76 !important;
  cursor: not-allowed;
  pointer-events: none;
}

/* Inline-styled section/div layouts in DnD rich_text are authored explicitly - 
   don't override their max-width, margin, text-align, or padding. */

/* Pillar grid (inline `repeat(5,minmax(0,1fr))` on about.html + contact.html):
   5 cards across on desktop, 3 on tablet, 1 stacked on mobile. Attribute
   selector targets the exact inline template; the #tr-pillar-grid hook is
   added on about.html so we can crank specificity past any global flex/grid
   the DnD wrapper applies to inline children. */
#tr-pillar-grid,
.tr-pillar-grid,
[class*="body-container--"] #tr-pillar-grid,
[class*="body-container--"] .tr-pillar-grid,
div[style*="grid-template-columns:repeat(5,minmax(0,1fr))"],
div[style*="grid-template-columns: repeat(5, minmax(0, 1fr))"] {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 16px !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Children of the pillar grid: never wider than their column, never floated
   or flex-basised by an outer rule. */
#tr-pillar-grid > div,
.tr-pillar-grid > div,
[class*="body-container--"] #tr-pillar-grid > div,
[class*="body-container--"] .tr-pillar-grid > div {
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  flex: none !important;
  float: none !important;
}
@media (max-width: 1199px) {
  #tr-pillar-grid,
  .tr-pillar-grid,
  div[style*="grid-template-columns:repeat(5,minmax(0,1fr))"],
  div[style*="grid-template-columns: repeat(5, minmax(0, 1fr))"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}
@media (max-width: 767px) {
  #tr-pillar-grid,
  .tr-pillar-grid,
  div[style*="grid-template-columns:repeat(5,minmax(0,1fr))"],
  div[style*="grid-template-columns: repeat(5, minmax(0, 1fr))"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* Don't underline industry chip cards (they're whole-card links) */
[class*="body-container--"] a[href^="/aero"],
[class*="body-container--"] a[href^="/mobility"],
[class*="body-container--"] a[href^="/biomed"],
[class*="body-container--"] a[href^="/tech"],
[class*="body-container--"] a[href^="/energy"],
[class*="body-container--"] a[href^="/am"],
[class*="body-container--"] a[href^="/civil"],
[class*="body-container--"] a[href^="/machinery"],
[class*="body-container--"] a[href^="/academia"] {
  border-bottom: none !important;
}

/* ==========================================================================
   MOBILE HEADING SCALE - Override inline font-sizes on small screens
   ========================================================================== */

@media (max-width: 767px) {
  [class*="body-container--"] h1 {
    font-size: 36px !important;
    line-height: 1.1 !important;
  }
  [class*="body-container--"] h2 {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }
  [class*="body-container--"] h3 {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
  [class*="body-container--"] p,
  [class*="body-container--"] li {
    font-size: 16px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  [class*="body-container--"] h1 {
    font-size: 48px !important;
    line-height: 1.08 !important;
  }
  [class*="body-container--"] h2 {
    font-size: 32px !important;
  }
}

/* ==========================================================================
   LANDING PAGES (aero, dic, hom, services) - Bring into brand parity
   These use .body-container--landing-page and inline-styled <section>s
   inside rich_text widgets. _helper.css .dnd-section rules don't reach them,
   so we apply a parallel normalization here.
   ========================================================================== */

.body-container--landing-page {
  background-color: #FAFAFA;
}

/* Note: inline `<section>` padding and inner-div max-width are authored per-row
   on industry/solution pages; don't force a 1200px max-width or override padding
   here - that broke centered 820px containers (eyebrow + quote + CTA blocks)
   and reset section padding. The DnD row wrapper already centers to 1200px. */

/* Typography scale - font family + weight normalization.
   Do NOT force a color here: many sections render on dark backgrounds
   (navy #1A1D2E, charcoal #2D3142) and author inline `color: #ffffff` on
   the heading. A forced dark color turned those headings invisible. */
.body-container--landing-page h1 {
  font-family: "DM Serif Display", Georgia, serif !important;
  font-weight: 400 !important;
  line-height: 1.06 !important;
  letter-spacing: -0.025em !important;
  font-size: 56px !important;
}

@media (min-width: 1200px) {
  .body-container--landing-page h1 {
    font-size: 64px !important;
  }
}

.body-container--landing-page h2 {
  font-family: "DM Serif Display", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 40px !important;
}

.body-container--landing-page h3 {
  font-family: "DM Serif Display", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 24px !important;
}

.body-container--landing-page p,
.body-container--landing-page li {
  font-family: "Space Grotesk", sans-serif !important;
}

/* Landing page cards - consistent padding, white bg, subtle shadow & hover lift */
.body-container--landing-page .hs_cos_wrapper_type_rich_text section > div > div[style*="display:grid"] > div,
.body-container--landing-page .hs_cos_wrapper_type_rich_text section > div > div[style*="display: grid"] > div {
  background: #FFFFFF !important;
  border: 1px solid #EBE7DF !important;
  border-radius: 12px !important;
  padding: 32px !important;
  box-shadow: 0 1px 3px rgba(26, 29, 46, 0.04) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.body-container--landing-page .hs_cos_wrapper_type_rich_text section > div > div[style*="grid"] > div:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(26, 29, 46, 0.08) !important;
}

/* Landing page buttons - match brand CTA style */
.body-container--landing-page a[href*="/contact"][style*="background"] {
  background-color: #AA1E1E !important;
  color: #FFFFFF !important;
  border-radius: 6px !important;
  padding: 14px 32px !important;
  font-weight: 500 !important;
  transition: background-color 0.2s ease, transform 0.2s ease !important;
}

.body-container--landing-page a[href*="/contact"][style*="background"]:hover {
  background-color: #8A1818 !important;
  transform: translateY(-1px) !important;
}

/* Mobile: tighten landing page padding + scale headlines */
@media (max-width: 767px) {
  .body-container--landing-page .hs_cos_wrapper_type_rich_text section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .body-container--landing-page .hs_cos_wrapper_type_rich_text section:first-of-type {
    padding-top: 56px !important;
    padding-bottom: 40px !important;
  }
  .body-container--landing-page h1 {
    font-size: 36px !important;
    line-height: 1.1 !important;
  }
  .body-container--landing-page h2 {
    font-size: 28px !important;
  }
  .body-container--landing-page h3 {
    font-size: 22px !important;
  }
  .body-container--landing-page p,
  .body-container--landing-page li {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
}

/* Prevent horizontal scroll on narrow viewports everywhere */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* Hero sections - default padding so text clears the fixed nav (80px high).
   No !important so the dnd_section WYSIWYG padding controls override this
   when editors set a custom value. */
.hero-section {
  padding-top: 96px;
  padding-bottom: 48px;
}
.hero-section--compact {
  padding-top: 96px;
  padding-bottom: 24px;
}

/* Related product cards (tp-*) - shared across modules + inline sections */
/* Product card grid (tp-* classes).
   Originally scoped inside related-products.module. Extracted so the same
   markup can render from resource-detail.html's inline related-products
   section (which bypasses the module due to HubL module-tag param
   passthrough limitations with choice fields). */
.tp-section {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: #1A1D2E;
  padding: 64px 0;
}
.tp-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.tp-header {
  text-align: center;
  margin-bottom: 32px;
}
.tp-eyebrow {
  color: #F27878;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 12px;
}
.tp-subhead {
  color: #FFFFFF;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 32px;
  line-height: 1.2;
  margin: 0;
  font-weight: 400;
}
.tp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
@media (min-width: 1440px) {
  .tp-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
.tp-card,
.tp-section .tp-card {
  display: flex !important;
  flex-direction: column !important;
  background: #2D3142 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  outline: 0 !important;
  box-shadow: none;
}
.tp-card:hover,
.tp-section .tp-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: #2D3142 !important;
  color: inherit !important;
  text-decoration: none !important;
}
.tp-card:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}
.tp-card__media {
  width: 100%;
  aspect-ratio: 16/10;
  background: #1F2233;
  overflow: hidden;
}
.tp-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tp-card__body {
  padding: 24px 24px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tp-card__tagline {
  color: #F27878;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}
.tp-card__name {
  color: #FFFFFF;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 24px;
  line-height: 1.25;
  margin: 0;
  font-weight: 400;
}
.tp-card__desc {
  color: rgba(255, 255, 255, 0.92);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.tp-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-top: 8px;
}
.tp-card:hover .tp-card__cta { color: #FFFFFF; }
.tp-card__arrow {
  transition: transform 0.2s ease;
  display: inline-block;
}
.tp-card:hover .tp-card__arrow,
.tp-card:focus-visible .tp-card__arrow { transform: translateX(4px); }
@media (max-width: 520px) {
  .tp-subhead { font-size: 26px; }
  .tp-card__name { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .tp-card,
  .tp-card__arrow { transition: none; }
  .tp-card:hover,
  .tp-card:focus-visible { transform: none; }
}

/* Industry cards (.tr-industries-grid) - homepage grid, reused on system pages */
/* Industry cards (.tr-industries-grid)
   The homepage "From aircraft to implants" grid, reused on system pages.

   The cards are authored inside rich-text dnd modules, so each <a> carries
   inline styles. Inline styles beat class rules, so the hover/focus state and
   the responsive column counts need !important to win. Base look is left to
   the inline styles where they exist, and repeated here so markup without
   inline styles (system pages) renders identically. */

.tr-industries-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.tr-industries-grid a {
  display: block;
  background: #FAFAFA;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #1A1D2E;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.tr-industries-grid a:hover,
.tr-industries-grid a:focus-visible {
  background: #FFFFFF !important;
  border-color: #D9CFC0 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26, 29, 46, 0.08);
}

.tr-industries-grid a:focus-visible {
  outline: 2px solid rgba(26, 29, 46, 0.55);
  outline-offset: 2px;
}

@media (max-width: 1024px) {
  .tr-industries-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .tr-industries-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}