/* Theme base styles — v20260518d */

/* 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.)
*/

/* The overflow-wrap is meant to prevent long/large words from breaking the mobile responsiveness of a page (e.g. horizontal scrolling). It is preferred to reduce font sizes on mobile to address this, with this CSS specifically helping with extreme scenarios where a reduction in font size is not possible. */

body {
  line-height: 1.4;
  overflow-wrap: break-word;
}

/* Handles word breaking for a few specific languages which handle breaks in words differently. If your content is not translated into these languages, you can safely remove this.  */

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

/* Paragraphs */

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

/* Anchors */

a {
  cursor: pointer;
}

/* Sub/superscript — remove spacing gaps for chemical formulas */

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Trademark and copyright marks trailing a name, wrapped by main.js. The 0.75em above is
   sized for chemical formulas and exponents; a mark wants to be smaller and sit lower than
   an exponent, or it reads as a footnote reference. */
sup.dens-mark {
  font-size: 0.62em;
  top: -0.4em;
  margin-left: 0.03em;
  letter-spacing: 0;
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 1.4rem;
}

/* Lists */

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;
}

/* Code blocks */

pre {
  overflow: auto;
}

code {
  vertical-align: bottom;
}

/* Blockquotes */

blockquote {
  border-left: 2px solid;
  margin: 0 0 1.4rem;
  padding-left: 0.7rem;
}

/* Horizontal rules */

hr {
  border: none;
  border-bottom: 1px solid var(--dens-gray-300);
}

/* Image alt text */

img {
  font-size: 0.583rem;
  word-break: normal;
}
button,
.button,
.hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.15s linear;
  white-space: normal;
}

button:disabled,
.button:disabled,
.hs-button:disabled {
  background-color: var(--dens-gray-300);
  border-color: var(--dens-gray-300);
  color: var(--dens-gray-200);
}

/* No button */

.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: var(--dens-error);
}

.hs-input.invalid.error {
  border-color: var(--dens-error);
}

.hs-error-msg {
  color: var(--dens-error);
  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;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Refined HubSpot form styling — site-wide
   Mirrors the contact "get in touch" form so every HubSpot form (request a
   quote, downloads, newsletter, ...) shares the same look: consistent inputs,
   a custom select chevron, and custom green checkboxes. Scoped to `.hs-form`
   so non-HubSpot UI (search field, etc.) is untouched. Section wrappers with
   more specific rules (e.g. .contact-form-wrapper) still win where present.
   ═══════════════════════════════════════════════════════════════════════════ */

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

.hs-form .hs-form-field > label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--dens-navy);
  margin-bottom: 0.4rem;
  display: block;
}
.hs-form .hs-form-field > label .hs-form-required {
  color: var(--dens-green-hover);
}

/* Consistent column widths: normalise HubSpot's margin/float columns to a grid
   so single- and multi-column rows align to the same edges. */
.hs-form .form-columns-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.1rem;
}
.hs-form .form-columns-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 1.1rem;
}
.hs-form .form-columns-1 { display: block; }
.hs-form .form-columns-2 .hs-form-field,
.hs-form .form-columns-3 .hs-form-field {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
}
.hs-form .input { margin: 0 !important; }

/* Text-like inputs, selects and textareas */
.hs-form .hs-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--dens-radius-control);
  border: 1px solid var(--dens-gray-300);
  padding: 0.7rem 0.85rem;
  font-family: var(--dens-font-body);
  font-size: 0.9rem;
  color: var(--dens-navy);
  background-color: var(--dens-white);
  transition: border-color var(--dens-transition), box-shadow var(--dens-transition);
}
.hs-form .hs-input:not([type="checkbox"]):not([type="radio"]):focus {
  border-color: var(--dens-green);
  outline: none;
  box-shadow: 0 0 0 3px rgba(132, 189, 0, 0.15);
}
.hs-form textarea.hs-input {
  min-height: 120px;
  resize: vertical;
}

/* Custom select chevron (the native arrow sits jammed against the edge).
   HubSpot injects its own form stylesheet, so the appearance-critical
   declarations use !important to win regardless of load order. */
.hs-form select.hs-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.95rem center !important;
  padding-right: 2.5rem !important;
}

/* Custom checkboxes (also override HubSpot's own .hs-input width/appearance,
   and any .hs-input padding a section wrapper may add — the checkbox carries
   the .hs-input class too, so leaked padding makes it non-square and shifts
   the checkmark). box-sizing + padding:0 keep it an exact 18px square. */
.hs-form input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  flex: 0 0 18px;
  padding: 0 !important;
  margin: 0 0.55rem 0 0;
  border: 1.5px solid var(--dens-gray-300) !important;
  border-radius: var(--dens-radius-xs) !important;
  background: var(--dens-white);
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: background 0.15s, border-color 0.15s;
}
.hs-form input[type="checkbox"]:checked {
  background: var(--dens-green) !important;
  border-color: var(--dens-green) !important;
}
.hs-form input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1.5px;
  width: 5px;
  height: 9px;
  border: solid var(--dens-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* The square is pinned at 18px by the checkmark geometry above, so touch gets its 24px from an
   invisible pad rather than a larger box. Checkbox rows sit at least 32px apart, so the pads of
   two neighbouring controls never meet. */
.hs-form input[type="checkbox"]::before {
  content: "";
  position: absolute;
  inset: -4px;
}

.hs-form input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--dens-green);
  outline-offset: 2px;
}

/* Radios keep the native control but pick up the brand accent */
.hs-form input[type="radio"] {
  accent-color: var(--dens-green);
  cursor: pointer;
}

/* Submit button — primary green */
.hs-form .hs-button,
.hs-form input[type="submit"] {
  background: var(--dens-green);
  color: var(--dens-white);
  font-family: var(--dens-font-body);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.8rem 2rem;
  border-radius: var(--dens-radius-control);
  border: none;
  cursor: pointer;
  transition: background var(--dens-transition);
}
.hs-form .hs-button:hover,
.hs-form .hs-button:focus,
.hs-form input[type="submit"]:hover,
.hs-form input[type="submit"]:focus {
  background: var(--dens-green-hover);
  color: var(--dens-white);
}

@media (max-width: 520px) {
  .hs-form .form-columns-2,
  .hs-form .form-columns-3 {
    grid-template-columns: 1fr;
  }
}


  /* 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: var(--dens-gray-700);
    padding: 0.35rem 0.7rem;
    text-decoration: none;
    transition: background-color 0.3s;
  }

/* 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
*/

/* Header DND sections */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background: var(--dens-white);
}

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

/* Header container */

.header__container {
  display: flex;
  justify-content: space-between;
}

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

.header__row-1,
.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;
    align-items: center;
    padding: 0 1rem;
  }

  .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;
  max-width: 200px;
  overflow: hidden;
}

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

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

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

.header__logo--main {
  padding-top: 1rem;
}

/* 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: var(--dens-white);
  border: 2px solid var(--dens-gray-300);
  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 var(--dens-gray-300);
  font-size: 0.875rem;
}

.header__search .hs-search-field__suggestions li a {
  color: var(--dens-gray-700);
  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 var(--dens-gray-300);
    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, 24, 64, 0.22);
  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 var(--dens-gray-700);
  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 var(--dens-gray-300);
    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;
  }}

/* 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: var(--dens-off-white, var(--dens-off-white));
    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;
  }
}
/* ── Site Footer ─────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--dens-navy);
  color: var(--dens-white);
  font-family: var(--dens-font-body);
  margin-top: -1.5rem;
  padding-top: 1.5rem;
}

.site-footer__inner {
  max-width: var(--dens-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── Top section: brand + nav columns ─────────────────────────────────── */

.site-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding: 4rem 0 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
  .site-footer__top {
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
  }
}

/* Brand column */

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.site-footer__logo-link {
  display: inline-block;
}

.site-footer__logo {
  filter: brightness(0) invert(1);
  height: 36px;
  width: auto;
}

.site-footer__tagline {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

/* Social icon buttons */

.site-footer__social {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.site-footer__social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--dens-radius-control);
  background: rgba(255, 255, 255, 0.08);
  color: var(--dens-white);
  text-decoration: none;
  transition: background var(--dens-transition), color var(--dens-transition);
}

.site-footer__social-btn:hover {
  background: var(--dens-green);
  color: var(--dens-white);
}

.site-footer__social-btn svg {
  flex-shrink: 0;
}

/* ── Navigation columns ─────────────────────────────────────────────── */

.site-footer__nav-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 2rem;
}

@media (min-width: 768px) {
  .site-footer__nav-columns {
    grid-template-columns: 1.2fr 1.15fr 1.35fr 0.9fr 0.9fr;
    gap: 2.5rem 2rem;
  }
}

.site-footer__col {
  min-width: 0;
}

/* Second Products column has no "Products" heading; offset it so its
   first sub-heading aligns with column 1 below the Products title. */
.site-footer__col--products-secondary {
  padding-top: 2.75rem;
}

.site-footer__col-heading {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--dens-white);
  margin: 0 0 1rem;
  letter-spacing: 0.02em;
}

.site-footer__sub-heading {
  font-size: var(--dens-text-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  margin: 1.25rem 0 0.5rem;
}

.site-footer__sub-heading:first-of-type {
  margin-top: 0;
}

.site-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer__list li {
  margin-bottom: 0.4rem;
}

.site-footer__list a {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color var(--dens-transition);
  line-height: 1.6;
}

.site-footer__list a:hover {
  color: var(--dens-green);
}

/* ── Bottom bar ──────────────────────────────────────────────────────── */

.site-footer__bottom {
  padding: 1.5rem 0;
}

.site-footer__bottom p {
  margin: 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.35);
}

/* ── Phone tap targets ────────────────────────────────────────────────────
   The footer carries the densest link list on the site - 24 per page, each 17px tall, under the
   24px WCAG 2.5.8 asks for. The anchor becomes a block and takes over the spacing the list item
   margin used to hold, so the rhythm stays where it was while the tap area grows into it. */
@media (max-width: 767px) {
  .site-footer__list li {
    margin-bottom: 0;
  }

  .site-footer__list a {
    display: block;
    padding: 0.3rem 0;
  }
}
/* 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%;
}
/* ============================================
   DENSsolutions Brand Theme
   ============================================ */

/* --- CSS Custom Properties --- */

:root {
  /* Brand colors */
  --dens-navy: #001840;          /* base dark surface */
  --dens-navy-dark: #001030;     /* deepest band (video, faq) */
  --dens-navy-lift: #002868;     /* the ONE partner for every navy gradient */
  --dens-green: #84BD00;
  --dens-green-hover: #74a600;
  --dens-light-green: #A6CE39;
  --dens-white: #FFFFFF;
  --dens-off-white: #f6f7f8;
  --dens-light-blue: #EFF2F7;
  --dens-linkedin: #0a66c2;
  --dens-error: #EF6B51;

  /* Neutral grays */
  --dens-gray-50: #F9FAFB;
  --dens-gray-100: #F5F5F5;
  --dens-gray-200: #E5E7EB;
  --dens-gray-300: #D1D6DC;
  --dens-gray-400: #9CA3AF;
  --dens-gray-500: #6B7280;
  --dens-gray-600: #3b4f5e;
  --dens-gray-700: #374151;

  /* Typography */
  --dens-font-body: 'Inter', sans-serif;
  --dens-font-heading: 'Inter', sans-serif;

  /* Type scale. Four steps below the section title, so a card title is a card title
     wherever it appears - components used to pick their own from ten different sizes. */
  --dens-text-eyebrow: 0.75rem;                        /* 12px uppercase section labels */
  --dens-text-card-sm: 1rem;                           /* 16px dense rows: notes, publications, faq */
  --dens-text-card: 1.125rem;                          /* 18px standard card title */
  --dens-text-card-lg: 1.5rem;                         /* 24px feature card title */
  --dens-text-subsection: 1.5rem;                      /* 24px heading below a section title */
  --dens-text-meta: 0.8125rem;                         /* 13px role lines, control labels */
  --dens-text-sub: 1.125rem;                           /* 18px section subtitle / standfirst */
  --dens-text-section: clamp(1.875rem, 3.4vw, 2.5rem); /* section heading */
  --dens-text-page: clamp(2.1rem, 4vw, 3rem);          /* page/hub title */
  --dens-text-hero: clamp(1.75rem, 5vw, 3rem);         /* product hero title */

  /* Layout */
  --dens-max-width: 1280px;

  /* Transitions */
  --dens-transition: 0.3s ease;

  /* Shadows (navy-blue tint to harmonize with off-white backgrounds) */
  --dens-shadow-sm: 0 1px 3px rgba(0, 24, 64, 0.10);
  --dens-shadow-md: 0 8px 24px rgba(0, 24, 64, 0.10);
  --dens-shadow-lg: 0 20px 40px rgba(0, 24, 64, 0.12);

  /* Border radius */
  --dens-radius-control: 0.375rem;  /* buttons, inputs, selects - one control radius */
  --dens-radius-xs: 0.25rem;        /* chips, badges */
  --dens-radius-sm: 0.5rem;
  --dens-radius-md: 0.75rem;
  --dens-radius-lg: 1rem;
  --dens-radius-pill: 9999px;
}

/* Brand buttons */

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--dens-green);
  color: var(--dens-white);
  font-family: var(--dens-font-body);
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--dens-radius-control);
  border: none;
  cursor: pointer;
  transition: background var(--dens-transition);
  text-decoration: none;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--dens-green-hover);
  color: var(--dens-white);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--dens-radius-control);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  height: 44px;
  gap: 0;
  background: rgba(255, 255, 255, 0.15);
  color: var(--dens-white);
  font-family: var(--dens-font-body);
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--dens-radius-control);
  border: none;
  cursor: pointer;
  transition: background var(--dens-transition);
  text-decoration: none;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background: rgba(255, 255, 255, 0.25);
  color: var(--dens-white);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--dens-radius-control);
}

/* Dark variant — same shape as .btn-secondary but designed for light backgrounds: navy text on
   a navy-tinted translucent pill that darkens slightly on hover. */
.btn-secondary--dark {
  background: rgba(0, 24, 64, 0.08);
  color: var(--dens-navy);
}
.btn-secondary--dark:hover,
.btn-secondary--dark:focus,
.btn-secondary--dark:active {
  background: rgba(0, 24, 64, 0.16);
  color: var(--dens-navy);
}

/* Muted variant — designed to sit on white, off-white, and light-blue/grey
   backgrounds. Uses a darker shade of the light-blue token (same hue +
   saturation) with transparency so it tints whatever sits behind it instead
   of fighting cool-toned section backgrounds. */
.btn-secondary--muted {
  background: hsla(218, 18%, 65%, 0.10);
  color: var(--dens-navy);
}
.btn-secondary--muted:hover,
.btn-secondary--muted:focus,
.btn-secondary--muted:active {
  background: hsla(218, 18%, 60%, 0.18);
  color: var(--dens-navy);
}

/* Arrow inside primary/secondary buttons — hidden by default, slides in from the left on hover so
   the button visibly widens to accommodate it. */
.btn-primary > svg,
.btn-secondary > svg {
  width: 0 !important;
  height: 1em;
  max-width: 0;
  opacity: 0;
  margin-left: 0;
  overflow: hidden;
  flex-shrink: 0;
  transition: width var(--dens-transition), max-width var(--dens-transition), margin-left var(--dens-transition), opacity var(--dens-transition);
}

.btn-primary:hover > svg,
.btn-primary:focus-visible > svg,
.btn-secondary:hover > svg,
.btn-secondary:focus-visible > svg {
  width: 1em !important;
  max-width: 1em;
  opacity: 1;
  margin-left: 0.5rem;
}

/* ── Card link — "Read more" pattern shared across all card components ── */

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 0.875rem;
  font-weight: 700 !important;
  color: var(--dens-green);
  text-decoration: none;
}

.card-link:hover,
a:hover .card-link,
a.card-link:hover {
  color: var(--dens-green-hover);
  font-weight: 700 !important;
}

/* Right-arrow card links: arrow hidden by default, slides in from the left on hover so the link
   visibly widens to accommodate it. Excludes back/download variants which keep their fixed icon. */
.card-link:not(.card-link--back):not(.card-link--download) > svg {
  width: 0;
  height: 1em;
  opacity: 0;
  margin-left: 0;
  overflow: visible;
  flex-shrink: 0;
  transition: width var(--dens-transition), margin-left var(--dens-transition), opacity var(--dens-transition);
}

.card-link:not(.card-link--back):not(.card-link--download):hover > svg,
.card-link:not(.card-link--back):not(.card-link--download):focus-visible > svg,
a:hover .card-link:not(.card-link--back):not(.card-link--download) > svg,
a.card-link:not(.card-link--back):not(.card-link--download):hover > svg {
  width: 1em;
  opacity: 1;
  margin-left: 0.4rem;
}

/* Back/download variants keep their icon always visible at a fixed size */
.card-link--back > svg,
.card-link--download > svg {
  width: 1rem;
  height: 1rem;
}

/* Back variant — left arrow before text */
.card-link--back {
  flex-direction: row-reverse;
  gap: 0.5rem;
  transition: gap var(--dens-transition);
}

.card-link--back:hover,
a:hover .card-link--back,
a.card-link--back:hover {
  gap: 0.75rem;
}

/* Download variant — down arrow after text */
.card-link--download {
  gap: 0.5rem;
  transition: gap var(--dens-transition);
}

.card-link--download:hover,
a:hover .card-link--download,
a.card-link--download:hover {
  gap: 0.75rem;
}

/* Every card CTA on the site is a .card-link, and inline-flex leaves them 16-20px tall - under the
   24px WCAG 2.5.8 asks of a touch target. Padding them here covers the lot: card footers, "Read
   more" toggles, download links, back links. */
@media (max-width: 767px) {
  a.card-link,
  button.card-link {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
  }
}

/* ── Tag pill — category badge shared across all card types ───────────── */

.tag-pill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dens-green);
  background-color: rgba(132, 189, 0, 0.1);
  padding: 0.25rem 0.75rem;
  border-radius: var(--dens-radius-pill);
}

.tag-pill--navy {
  color: var(--dens-navy);
  background-color: rgba(0, 24, 64, 0.1);
}

/* ── Filter button — pill-shaped toggle shared across filter bars ─────── */

.filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.125rem;
  font-family: var(--dens-font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid var(--dens-gray-300);
  border-radius: var(--dens-radius-pill);
  background: transparent;
  color: var(--dens-gray-500);
  cursor: pointer;
  transition: background var(--dens-transition), color var(--dens-transition), border-color var(--dens-transition);
}

.filter-btn:hover,
.filter-btn:focus,
.filter-btn:active {
  background: var(--dens-gray-100);
  color: var(--dens-navy);
  /* the theme's global button:hover zeroes the border width, which shrank every pill by 2px
     on hover and shifted the rest of the row along - so restate the width, not just the colour */
  border: 1px solid var(--dens-gray-400);
  border-radius: var(--dens-radius-pill);
}

.filter-btn.is-active,
.filter-btn.is-active:hover,
.filter-btn.is-active:focus,
.filter-btn.is-active:active {
  background: var(--dens-navy);
  color: var(--dens-white);
  border: 1px solid var(--dens-navy);
  font-weight: 600;
  border-radius: var(--dens-radius-pill);
}

/* ============================================
   HERO BANNER
   ============================================ */

.hero-banner {
  position: relative;
  width: 100%;
  min-height: 90vh;
  margin-top: -5rem; /* extend under the fixed header (.body-wrapper has padding-top: 5rem) */
  background-color: var(--dens-navy);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.hero-banner__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-banner__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(0, 24, 64, 0.92) 0%, rgba(0, 24, 64, 0.65) 55%, transparent 100%);
  z-index: 1;
}

.hero-banner__content {
  position: relative;
  z-index: 2;
  max-width: var(--dens-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.hero-banner__text {
  max-width: 600px;
  text-align: left;
  padding: 2rem 0;
}

.hero-banner__tagline {
  display: inline-block;
  font-family: var(--dens-font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dens-light-green);
  margin-bottom: 1.5rem;
}

.hero-banner__heading {
  font-family: var(--dens-font-heading);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--dens-white) !important;
  margin-bottom: 1.5rem;
}

.hero-banner__description {
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 2.5rem;
  max-width: 540px;
}

.hero-banner__buttons {
  display: flex;
  gap: 1rem;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* Scroll indicator */

.hero-banner__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  animation: bounce 2s infinite;
}

.hero-banner__scroll-text {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.hero-banner__scroll-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: rgba(255, 255, 255, 0.6);
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-10px); }
}

@media (max-width: 767px) {
  .hero-banner {
    min-height: 70vh;
  }

  .hero-banner__content {
    justify-content: center;
  }

  .hero-banner__text {
    text-align: center;
    max-width: 100%;
  }

  .hero-banner__heading {
    font-size: 2rem;
  }

  .hero-banner__buttons {
    justify-content: center;
  }

  .hero-banner__overlay {
    background: linear-gradient(to bottom, rgba(0, 24, 64, 0.3) 0%, var(--dens-navy) 100%);
  }
}

/* ============================================
   LOGO BANNER (Scrolling Partner Logos)
   ============================================ */

.logo-banner {
  padding: 2.5rem 0;
  background-color: var(--dens-white);
  border-bottom: 1px solid var(--dens-gray-100);
  overflow: hidden;
  position: relative;
}

.logo-banner__heading {
  text-align: center;
  font-family: var(--dens-font-body);
  font-size: var(--dens-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dens-green);
  margin-bottom: 1.25rem;
  padding: 0 1.5rem;
}

/* Two rows: academia and industry read as two groups rather than one long list, so each row gets its
   own label and they scroll in opposite directions. */
.logo-banner__row + .logo-banner__row {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--dens-gray-100);
}

.logo-banner__row-label {
  margin: 0 0 0.55rem;
  padding: 0 1.5rem;
  text-align: center;
  font-family: var(--dens-font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dens-gray-400);
}

.logo-banner__track-wrapper {
  position: relative;
}

/* Fade edges */

.logo-banner__track-wrapper::before,
.logo-banner__track-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}

.logo-banner__track-wrapper::before {
  left: 0;
  background: linear-gradient(to right, var(--dens-white), transparent);
}

.logo-banner__track-wrapper::after {
  right: 0;
  background: linear-gradient(to left, var(--dens-white), transparent);
}

.logo-banner__track {
  display: flex;
  gap: 3rem;
  animation: logo-scroll 30s linear infinite;
  width: max-content;
}

.logo-banner__logo {
  height: 4rem;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  filter: grayscale(100%);
  opacity: 0.4;
  transition: filter var(--dens-transition), opacity var(--dens-transition);
}

.logo-banner__logo:hover {
  filter: grayscale(0%);
  opacity: 1;
}

@keyframes logo-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* A row too short to scroll: still, centred, and no fading edges to imply more logos off-screen. */
.logo-banner__track--static {
  animation: none;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 1.5rem;
}

.logo-banner__track-wrapper--static::before,
.logo-banner__track-wrapper--static::after {
  content: none;
}

/* The second row runs the other way: same keyframes, reversed, and a little slower so the two rows
   never lock into step with each other. */
/* Direction only: the duration comes from the module, which scales it with the number of logos. */
.logo-banner__track--reverse {
  animation-name: logo-scroll;
  animation-direction: reverse;
}

@media (prefers-reduced-motion: reduce) {
  .logo-banner__track,
  .logo-banner__track--reverse {
    animation: none;
    /* without the marquee the row has to be readable and reachable on its own */
    overflow-x: auto;
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 767px) {
  .logo-banner {
    padding: 1.75rem 0;
  }

  .logo-banner__logo {
    /* 1.75rem was set when the row held 14 mostly-wordmark logos. Institute logos with fine lettering
       - CIIAE, DIFFER, the Fritz Haber Institute - disappear at that size on a phone. */
    height: 2.25rem;
  }

  .logo-banner__track {
    gap: 2rem;
  }

  .logo-banner__row-label {
    font-size: 0.72rem;
    margin-bottom: 0.5rem;
  }

  .logo-banner__row + .logo-banner__row {
    margin-top: 1rem;
    padding-top: 1rem;
  }
}

/* ============================================
   PRODUCT GRID
   ============================================ */

.product-grid {
  position: relative;
  padding: 5rem 0;
  background: transparent;
}

/* When the dot-grid toggle is enabled, give the section an off-white
   background to host the dot pattern. */
.product-grid--has-dot-bg {
  background: var(--dens-off-white, var(--dens-off-white));
}

/* Dot grid background pattern */

.product-grid__dot-bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, #e2e5e9 0.7px, transparent 0.8px),
    radial-gradient(circle, #e2e5e9 0.7px, transparent 0.8px);
  background-size: 32px 32px;
  background-position: 0 0, 16px 16px;
  opacity: 0.55;
  pointer-events: none;
}

.product-grid__inner {
  position: relative;
  z-index: 1;
  max-width: var(--dens-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.product-grid__header {
  text-align: center;
  margin-bottom: 3rem;
}

.product-grid__label {
  display: inline-block;
  font-family: var(--dens-font-body);
  font-size: var(--dens-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dens-green);
  margin-bottom: 0.75rem;
}

.product-grid__title {
  font-family: var(--dens-font-heading);
  font-size: var(--dens-text-section);
  font-weight: 700;
  color: var(--dens-navy);
  margin-bottom: 0;
}

.product-grid__cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}

@media (max-width: 1024px) {
  .product-grid__cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .product-grid__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 400px) {
  .product-grid__cards {
    grid-template-columns: 1fr;
  }
}

/* ── Product Grid (grouped variant) ───────────────────────────────────────── */

/* Lay out groups side-by-side when they fit. Each group sizes to its content
   (number of cards × card width + gaps) so a single-card TEM group sits next
   to a single-card Cryo-EM group when the viewport has room, and they stack
   only when there isn't space. */
.product-grid--grouped .product-grid__inner {
  --pg-card-w: 14rem;       /* matches 5-up card width within max-width 1280px */
  --pg-card-gap: 1.5rem;
  --pg-group-gap: 2.5rem;
}

.product-grid--grouped .product-grid__group {
  margin-bottom: 0;
}

.product-grid--grouped .product-grid__group:last-child {
  margin-bottom: 0;
}

/* Wrapper for all groups: horizontal flex with wrap, centered when there's space. */
.product-grid--grouped .product-grid__groups {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pg-group-gap);
}

.product-grid--grouped .product-grid__group {
  flex: 0 1 auto;
  min-width: 0;
}

.product-grid--grouped .product-grid__group-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--dens-green);
}

.product-grid--grouped .product-grid__group-heading {
  font-family: var(--dens-font-body);
  font-size: var(--dens-text-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dens-green);
  margin: 0;
}

.product-grid--grouped .product-grid__group-subheading {
  font-size: 0.9rem;
  color: var(--dens-gray-500);
  margin: 0;
}

.product-grid--grouped .product-grid__cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pg-card-gap);
  margin-bottom: 0;
}

/* Fixed card width so partial groups don't stretch and groups can sit side by side. */
.product-grid--grouped .product-grid__cards .product-grid__card {
  flex: 0 0 var(--pg-card-w);
  max-width: var(--pg-card-w);
}

@media (max-width: 640px) {
  .product-grid--grouped .product-grid__inner {
    --pg-card-w: calc((100% - 1rem) / 2);
    --pg-card-gap: 1rem;
    --pg-group-gap: 2rem;
  }
  .product-grid--grouped .product-grid__groups {
    flex-direction: column;
  }
}

@media (max-width: 400px) {
  .product-grid--grouped .product-grid__inner {
    --pg-card-w: 100%;
  }
}

.product-grid__footer {
  text-align: right;
  margin-top: 2rem;
}

.product-grid__card {
  background: var(--dens-white);
  border: 1px solid var(--dens-gray-200);
  border-radius: var(--dens-radius-md);
  overflow: hidden;
  transition: box-shadow var(--dens-transition), transform var(--dens-transition), border-color var(--dens-transition);
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

.product-grid__card:hover {
  box-shadow: var(--dens-shadow-md);
  transform: translateY(-2px);
  border-color: var(--dens-gray-300);
}

.product-grid__card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  width: 100%;
  background: linear-gradient(135deg, #0f274d 0%, #1e5a8f 100%);
}

.product-grid__card-media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 24, 64, 0.55);
  mix-blend-mode: color;
  pointer-events: none;
  z-index: 2;
}

.product-grid__card-video,
.product-grid__card-video-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}

/* Placeholder shown when no video URL is provided: subtle play / image icon
   centered on the navy gradient. */
.product-grid__card-video-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-grid__card-video-fallback::after {
  content: '';
  width: 38%;
  height: 38%;
  background-color: rgba(255, 255, 255, 0.35);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2' ry='2'/><circle cx='8.5' cy='8.5' r='1.5'/><polyline points='21 15 16 10 5 21'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2' ry='2'/><circle cx='8.5' cy='8.5' r='1.5'/><polyline points='21 15 16 10 5 21'/></svg>") no-repeat center / contain;
}

.product-grid__card-icon-wrap {
  display: none;
}

.product-grid__card-icon {
  display: inline-block;
  width: calc(var(--dens-product-name-icon-ratio, 1) * 1em);
  height: calc(var(--dens-product-name-icon-ratio, 1) * 1em);
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--icon-url) no-repeat center / contain;
          mask: var(--icon-url) no-repeat center / contain;
}

.product-grid__card-content {
  padding: 1.25rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 auto;
  gap: 0.6rem;
}

.product-grid__card-name {
  font-family: var(--dens-font-body);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dens-navy);
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  line-height: 1.2;
}

.product-grid__card-desc {
  font-size: 0.875rem;
  color: var(--dens-gray-600);
  line-height: 1.55;
  margin: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}


.product-name__infinity {
  font-size: 0.6em;
  font-weight: 700;
  vertical-align: super;
  line-height: 0;
  margin-left: 0.05em;
}

.product-grid__card--has-variants {
  cursor: default;
  text-decoration: none;
}

.product-grid__card-variants {
  display: flex;
  gap: 0.5rem;
  padding: 0 1rem 1rem;
  justify-content: center;
}

.product-grid__card-variant {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.34rem 1.05rem;
  border-radius: var(--dens-radius-pill);
  border: 1px solid rgba(0, 24, 64, 0.42);
  background: rgba(255, 255, 255, 0.86);
  font-family: var(--dens-font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(0, 24, 64, 0.92);
  text-decoration: none;
  letter-spacing: 0.03em;
  box-shadow: 0 1px 2px rgba(0, 24, 64, 0.08);
  transition: background-color 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s;
}

.product-grid__card-variant:hover {
  background-color: #ffffff;
  border-color: var(--dens-green);
  color: var(--dens-navy);
  box-shadow: 0 4px 10px rgba(0, 24, 64, 0.1);
}

.product-grid__card-annotations {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  pointer-events: none;
}

.annotation-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: var(--dens-green);
  border-radius: var(--dens-radius-pill, 9999px);
  box-shadow: 0 2px 8px rgba(0,24,64,0.10);
  /* No border */
}

.annotation-pill img {
  width: 2.1em;
  height: 2.1em;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
}

/* ── Home variant: horizontal-scrolling carousel with nav arrows.
   Larger cards (3 visible across at desktop), no blue overlay, bordered+rounded
   video, left-aligned content, primary-button CTA. Suitable-Platforms grouped
   variant is intentionally NOT affected (uses .product-grid--grouped). */

.product-grid--carousel .product-grid__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  text-align: left;
  margin-bottom: 2.5rem;
}
.product-grid--carousel .product-grid__heading-block {
  flex: 1 1 auto;
  min-width: 0;
}
.product-grid--carousel .product-grid__title {
  margin: 0.4rem 0 0;
}

.product-grid--carousel .product-grid__nav {
  display: none;
  gap: 0.5rem;
  flex-shrink: 0;
}
.product-grid--carousel .product-grid__header-actions {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
.product-grid--carousel .product-grid__view-all {
  white-space: nowrap;
}
.product-grid--carousel .product-grid__nav-btn {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  border-radius: var(--dens-radius-control);
  border: none;
  background: var(--dens-green);
  color: var(--dens-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: background var(--dens-transition);
}
.product-grid--carousel .product-grid__nav-btn:hover:not(:disabled),
.product-grid--carousel .product-grid__nav-btn:focus:not(:disabled) {
  background: var(--dens-green-hover);
  outline: none;
}
.product-grid--carousel .product-grid__nav-btn:disabled {
  background: var(--dens-gray-200);
  color: var(--dens-navy);
  opacity: 0.6;
  cursor: default;
}
.product-grid--carousel .product-grid__nav-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Scroller bleeds edge-to-edge of viewport. Spacer divs at start/end of the
   track equal the bleed so the first/last card aligns with the content column. */
.product-grid--carousel .product-grid__scroller {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: -1.5rem calc((100vw - 100%) / -2);
  padding: 1.5rem 0;
  scroll-padding-left: max(0px, calc((100vw - min(100vw, var(--dens-max-width))) / 2 + 1.5rem));
}
.product-grid--carousel .product-grid__scroller::-webkit-scrollbar { display: none; }

.product-grid--carousel .product-grid__spacer {
  flex: 0 0 max(0px, calc((100vw - min(100vw, var(--dens-max-width))) / 2));
  width: 0;
  align-self: stretch;
}

.product-grid--carousel .product-grid__track {
  display: flex;
  gap: 1.5rem;
  align-items: stretch;
  padding-right: 0;
}

/* Card sizing — number of cards per row controlled by --pg-card-count (3 or 4),
   set as inline style on the parent .product-grid section so it inherits down. */
.product-grid--carousel {
  --pg-card-count: 4;
}
.product-grid--carousel .product-grid__card {
  --pg-card-w: calc((min(100vw, var(--dens-max-width)) - 1.5rem * (var(--pg-card-count) - 1) - 3rem) / var(--pg-card-count));
  flex: 0 0 var(--pg-card-w);
  max-width: var(--pg-card-w);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--dens-white);
  border: 1px solid var(--dens-gray-200);
  border-radius: var(--dens-radius-md);
  overflow: hidden;
  color: var(--dens-navy);
  text-decoration: none;
}

/* Media: square with inset rounded video, no blue overlay */
.product-grid--carousel .product-grid__card-media {
  position: relative;
  padding: 10px;
  background: var(--dens-white);
  aspect-ratio: 1 / 1;
  width: 100%;
  box-sizing: border-box;
  display: flex;
}
.product-grid--carousel .product-grid__card-media::before {
  content: none;
}
.product-grid--carousel .product-grid__card-media-inner {
  flex: 1 1 auto;
  width: 100%;
  border-radius: calc(var(--dens-radius-md) - 6px);
  overflow: hidden;
  background: #000;
  position: relative;
}
.product-grid--carousel .product-grid__card-video,
.product-grid--carousel .product-grid__card-video-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Content: left-aligned text/pills with full-width Learn more CTA at the bottom */
.product-grid--carousel .product-grid__card-content {
  padding: 1rem 1.25rem 1.25rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  flex: 1 1 auto;
}
.product-grid--carousel .product-grid__card-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
  justify-content: flex-start;
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.15;
}
.product-grid--carousel .product-grid__card-icon {
  width: calc(var(--dens-product-name-icon-ratio, 1) * 1em);
  height: calc(var(--dens-product-name-icon-ratio, 1) * 1em);
}
.product-grid--carousel .product-grid__card-desc {
  display: block;
  text-align: left;
  margin: 0;
  flex: 0 0 auto;
}
.product-grid--carousel .product-grid__card-cta {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 0.25rem;
}

/* Multi-variant cards (non-anchor wrapper, variant chips above the Learn more CTA) */
.product-grid--carousel .product-grid__card--multi {
  cursor: default;
}
.product-grid--carousel .product-grid__card-variants {
  margin-top: auto;
  padding: 0.5rem 0 0.75rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-start;
}
.product-grid--carousel .product-grid__card-variant {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--dens-gray-200, var(--dens-gray-200));
  border-radius: var(--dens-radius-sm, 0.5rem);
  background: var(--dens-white, #ffffff);
  color: var(--dens-navy);
  text-decoration: none;
  line-height: 1.2;
  transition: border-color var(--dens-transition), background var(--dens-transition), color var(--dens-transition);
}
.product-grid--carousel .product-grid__card-variant-prefix {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--dens-gray-600, var(--dens-gray-500));
}
.product-grid--carousel .product-grid__card-variant-title {
  font-family: var(--dens-font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--dens-navy);
}
.product-grid--carousel .product-grid__card-variant:hover,
.product-grid--carousel .product-grid__card-variant:focus {
  border-color: rgba(0, 24, 64, 0.35);
  background: hsla(218, 18%, 60%, 0.08);
  outline: none;
}
.product-grid--carousel .product-grid__card--multi .product-grid__card-cta {
  margin-top: 0;
}

/* Responsive: 2 cards across on tablet, 1 on mobile */
@media (max-width: 900px) {
  .product-grid--carousel .product-grid__card {
    --pg-card-w: calc((min(100vw, var(--dens-max-width)) - 4.5rem) / 2);
  }
}
@media (max-width: 600px) {
  .product-grid--carousel .product-grid__card {
    --pg-card-w: 80vw;
  }
  /* Stack the section header on mobile so the heading keeps full width.
     Otherwise the space-between flex squeezes the heading block to near-zero
     and the title wraps one letter per line. */
  .product-grid--carousel .product-grid__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .product-grid--carousel .product-grid__header-actions {
    width: 100%;
    justify-content: space-between;
  }
}

/* Group header (per-group heading + nav chevrons) */
.product-grid--carousel .product-grid__group + .product-grid__group {
  margin-top: 2.5rem;
}
.product-grid--carousel .product-grid__group-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0;
  border-bottom: 0;
}
.product-grid--carousel .product-grid__group-heading-block {
  flex: 1 1 auto;
  min-width: 0;
}
.product-grid--carousel .product-grid__group-heading {
  margin: 0;
}
.product-grid--carousel .product-grid__group-subheading {
  margin: 0.25rem 0 0;
  color: var(--dens-gray-600);
}
/* In single-group mode with no group heading, the group-header row is hidden
   entirely (Jinja skips rendering it). The fallback below hides any empty
   header just in case. */
.product-grid--carousel .product-grid--single-group .product-grid__group-header:not(:has(.product-grid__group-heading)):not(:has(.product-grid__nav:not([hidden]))) {
  display: none;
}

/* Hide nav chevrons by default; only show when scroller has overflow */
.product-grid--carousel .product-grid__group--has-overflow .product-grid__nav,
.product-grid--carousel.product-grid--has-overflow .product-grid__nav {
  display: inline-flex;
}
/* If a single-group section's only group cannot scroll AND has no group
   heading, collapse the empty header row so the cards sit flush below the
   section header. */
.product-grid--carousel .product-grid--single-group .product-grid__group:not(.product-grid__group--has-overflow) .product-grid__group-header:not(:has(.product-grid__group-heading)) {
  display: none;
}

/* ── Suitable Platforms: wide 2-up variant (opt-in via layout="wide") ──────
   Lays the grouped cards out as a full-width grid of large cards instead of a
   horizontal carousel. The home-page "Our Products" carousel (no --wide class)
   is completely unaffected. Rules are declared after the --carousel block so
   they win at equal specificity. */
.product-grid--wide .product-grid__scroller {
  overflow: visible;
  margin: 0;
  padding: 0;
}
.product-grid--wide .product-grid__spacer { display: none; }
.product-grid--wide .product-grid__nav { display: none !important; }

.product-grid--wide .product-grid__track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  padding-right: 0;
}

.product-grid--wide .product-grid__card {
  flex: initial;
  width: auto;
  max-width: none;
}

/* Wider media so half-width cards aren't excessively tall */
.product-grid--wide .product-grid__card-media { aspect-ratio: 16 / 10; }

@media (max-width: 720px) {
  .product-grid--wide .product-grid__track { grid-template-columns: 1fr; }
}

/* ============================================
   HERO VIDEO PUBLICATION REFERENCE
   Refined glass chip in the hero corner linking to the publication behind the
   background video. Stays white in every state (the theme's green link colour
   must not bleed into the icon via currentColor).
   ============================================ */
.hero-video-cite,
.hero-video-cite:link,
.hero-video-cite:visited,
.hero-video-cite:hover,
.hero-video-cite:focus,
.hero-video-cite:active {
  color: #fff !important;
  text-decoration: none;
}
.hero-video-cite {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  max-width: 2.3rem;            /* collapsed: icon only */
  overflow: hidden;
  white-space: nowrap;
  border-radius: var(--dens-radius-pill);
  background: rgba(0, 16, 44, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
          backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: 0 4px 14px rgba(0, 12, 36, 0.22);
  font-family: var(--dens-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.005em;
  transition: max-width 0.35s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-video-cite svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  opacity: 0.9;
}
.hero-video-cite__label {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.hero-video-cite:hover,
.hero-video-cite:focus-visible {
  max-width: 15rem;            /* expanded: reveal the label */
  background: rgba(0, 16, 44, 0.62);
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: 0 6px 18px rgba(0, 12, 36, 0.3);
  transform: translateY(-1px);
}
.hero-video-cite:hover svg,
.hero-video-cite:focus-visible svg { opacity: 1; }
.hero-video-cite:hover .hero-video-cite__label,
.hero-video-cite:focus-visible .hero-video-cite__label { opacity: 1; }
.hero-video-cite:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

/* ============================================
   VIDEO BANNER
   ============================================ */

.video-banner {
  position: relative;
  width: 100%;
  min-height: 60vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-banner__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.video-banner__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}

.video-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(0, 24, 64, 0.92) 0%, rgba(0, 24, 64, 0.6) 55%, rgba(0, 24, 64, 0.15) 100%);
  z-index: 1;
}

.video-banner__content {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  max-width: var(--dens-max-width);
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

.video-banner__text {
  max-width: 34rem;
  text-align: left;
}

@media (max-width: 767px) {
  .video-banner__overlay {
    background: linear-gradient(to top, rgba(0, 24, 64, 0.92) 0%, rgba(0, 24, 64, 0.55) 100%);
  }
  .video-banner__content {
    justify-content: flex-start;
  }
  .video-banner__text {
    max-width: none;
  }
}

.video-banner__tagline {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dens-green);
  margin-bottom: 1rem;
}

.video-banner__heading {
  font-family: var(--dens-font-heading);
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--dens-white);
  margin-bottom: 1rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.video-banner__description {
  font-size: 1.125rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 2rem;
}

.video-banner__cta {
  display: inline-flex;
}

@media (max-width: 767px) {
  .video-banner {
    min-height: 50vh;
  }

  .video-banner__heading {
    font-size: 1.75rem;
  }
}

/* ============================================
   NEWS GRID
   ============================================ */

.news-grid {
  padding: 5rem 0;
  background-color: var(--dens-off-white, var(--dens-off-white));
}

.news-grid__inner {
  max-width: var(--dens-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.news-grid__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 3rem;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ── Shared section label (green uppercase tag) ─── */
.section-label,
.news-grid__label {
  display: inline-block;
  font-family: var(--dens-font-body);
  font-size: var(--dens-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dens-green);
  margin-bottom: 0.75rem;
}

/* ── Shared section heading (standard H2 across modules) ─── */
.service-offerings__heading {
  font-family: var(--dens-font-body);
  font-size: var(--dens-text-section);
  font-weight: 700;
  line-height: 1.2;
  color: var(--dens-navy);
  margin: 0.75rem 0 1rem;
}

@media (max-width: 600px) {
  .service-offerings__heading {
    font-size: 1.75rem;
  }
}

.news-grid__title {
  font-family: var(--dens-font-heading);
  font-size: var(--dens-text-section);
  font-weight: 700;
  color: var(--dens-navy);
  margin-bottom: 0;
}

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

.news-grid__card {
  background: var(--dens-white);
  border-radius: var(--dens-radius-md);
  overflow: hidden;
  border: 1px solid var(--dens-gray-200);
  transition: box-shadow var(--dens-transition), transform var(--dens-transition), border-color var(--dens-transition);
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

.news-grid__card:hover {
  box-shadow: var(--dens-shadow-md);
  transform: translateY(-2px);
  border-color: var(--dens-gray-300);
}

.news-grid__card-image {
  width: auto;
  height: 200px;
  object-fit: cover;
  display: block;
  margin: 0.6rem 0.6rem 0;
  border-radius: var(--dens-radius-sm);
  overflow: hidden;
}

.news-grid__card-body {
  padding: 1.5rem;
  color: var(--dens-gray-500);
  font-size: 0.875rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.news-grid__card-body .card-link {
  margin-top: auto;
  padding-top: 0.75rem;
}

.news-grid__card-body p,
.news-grid__card-body span:not(.tag-pill):not(.news-grid__card-date):not(.card-link) {
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  color: var(--dens-gray-500) !important;
}

.news-grid__card-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

/* news-grid category — styled via shared .tag-pill */

.news-grid__card-date {
  font-size: 0.75rem;
  color: var(--dens-gray-400);
}

.news-grid__card-title {
  font-family: var(--dens-font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--dens-navy);
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.news-grid__card:hover .news-grid__card-title {
  color: var(--dens-green);
}

.news-grid__card-excerpt {
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  color: var(--dens-gray-500) !important;
  line-height: 1.6;
  margin: 0;
}

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

@media (max-width: 767px) {
  .news-grid {
    padding: 3rem 0;
  }

  .news-grid__cards {
    grid-template-columns: 1fr;
  }

  .news-grid__title {
    font-size: 1.75rem;
  }

  .news-grid__header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================
   NAVBAR / HEADER overrides
   ============================================ */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background: var(--dens-white);
  border-bottom: 1px solid var(--dens-gray-100);
}

/* Offset body content below fixed header */
.body-wrapper {
  padding-top: 5rem;
  overflow-x: hidden;
}

.header__container {
  max-width: var(--dens-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__logo img {
  height: 2.5rem;
  width: auto;
}

.header__nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.header__nav-list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header__nav-link {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600 !important;
  color: var(--dens-navy);
  border-radius: var(--dens-radius-control);
  transition: color var(--dens-transition), background var(--dens-transition);
  text-decoration: none;
}

.header__nav-link:hover,
.header__nav-link:focus,
.header__nav-link:active,
.header__nav-link--active {
  color: var(--dens-green);
  background: var(--dens-gray-100);
  font-weight: 600 !important;
  text-decoration: none;
}

/* This chevron's apparent shakiness while rotating is its stroke's antialiasing, not
   the animation. The stroke renders at stroke-width * 14/24 device px on a 1x display,
   and a sub-2px stroke cannot resolve at every angle; will-change then promotes the
   icon to a layer that is rasterised once and rotated as a bitmap, so it smears rather
   than pulses, and the smear is what reads as shake.

   It is a straight trade of weight against crispness, measured over a 0-180 sweep as
   the share of ink sitting in half-covered pixels:

       stroke-width 2.5 -> 1.46px : 77%   (original, reported shaky)
       stroke-width 3   -> 1.75px : 61%   (here: the compromise)
       stroke-width 3.5 -> 2.04px : 54%   (crispest, reported too bold)

   There is no free option. Holding the stroke at 1.46px and enlarging the glyph to
   16/18/20px does NOT help (77/78/83/80%) - blur depends on absolute stroke thickness,
   not icon size. And the hints must stay: without them the stroke stops smearing but
   starts pulsing instead (ink cv 0.46% -> 2.50%), which is the state that prompted
   f9157ae to add them in the first place. The mobile chevron is 20px at 2.5, already
   2.08px, which is why only this one was ever reported.
   scripts/_check-chevron-render.mjs reproduces the table. */
.header__nav-link .chevron {
  width: 0.875rem;
  height: 0.875rem;
  transform-origin: 50% 50%;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  backface-visibility: hidden;
}

.header__nav-link--active .chevron {
  transform: rotate(180deg);
}

.header__cta {
  display: inline-flex;
  align-items: center;
}

/* Prevent theme-overrides a:hover from changing CTA weight */
.header__cta.btn-primary,
.header__cta.btn-primary:hover,
.header__cta.btn-primary:focus,
.header__cta.btn-primary:active {
  font-weight: 700;
  text-decoration: none;
}

/* Mega menu panel */

.mega-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 5rem;
  background: var(--dens-white);
  border-bottom: 1px solid var(--dens-gray-200);
  box-shadow: 0 25px 50px rgba(0, 24, 64, 0.14);
  opacity: 0;
  transform: scaleY(0.95);
  transform-origin: top;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 40;
}

.mega-menu--open {
  opacity: 1;
  transform: scaleY(1);
  pointer-events: auto;
}

.mega-menu__inner {
  max-width: var(--dens-max-width);
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
}

/* Resources & Company mega menus — 3 columns */
.mega-menu__inner--resources,
.mega-menu__inner--company,
.mega-menu__inner--applications {
  grid-template-columns: repeat(3, 1fr);
}

/* Products mega menu — 4 columns */
.mega-menu__inner--products {
  grid-template-columns: repeat(4, 1fr);
}

.mega-menu__inner--products .mega-menu__col {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.mega-menu__inner--services {
  grid-template-columns: 1.15fr 1fr 0.9fr;
}

.mega-menu__column-heading {
  font-size: var(--dens-text-eyebrow);
  font-weight: 700;
  color: var(--dens-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.mega-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-menu__item {
  margin-bottom: 0.25rem;
}

.mega-menu__link {
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  border-radius: var(--dens-radius-sm);
  transition: background var(--dens-transition);
  text-decoration: none;
}

.mega-menu__link:hover,
.mega-menu__link:focus {
  background: var(--dens-gray-100);
  text-decoration: none;
}

.mega-menu__link-label {
  font-weight: 600 !important;
  font-size: 0.9375rem;
  color: var(--dens-navy);
  transition: color var(--dens-transition);
}

.mega-menu__link:hover .mega-menu__link-label {
  color: var(--dens-green);
}

.mega-menu__link-desc {
  font-size: 0.75rem;
  color: var(--dens-gray-500);
  margin-top: 0.125rem;
}

/* Featured card in mega menu */

.mega-menu__featured {
  background: var(--dens-gray-100);
  border-radius: var(--dens-radius-md);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mega-menu__featured-label {
  font-family: var(--dens-font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--dens-navy);
  margin-bottom: 0.5rem;
}

.mega-menu__featured-desc {
  font-size: 0.875rem;
  color: var(--dens-gray-500);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.mega-menu__featured-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--dens-green);
  text-decoration: none;
}

.mega-menu__featured-link:hover {
  color: var(--dens-light-green);
}

@media (max-width: 1150px) {
  .header__nav-list {
    display: none;
  }

  .header__cta {
    display: none;
  }

  .mega-menu {
    display: none;
  }

  .header__hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--dens-navy);
    cursor: pointer;
    padding: 0.5rem;
  }
}

@media (min-width: 1151px) {
  .header__hamburger {
    display: none;
  }

  .mobile-menu {
    display: none !important;
  }
}

/* ── Mobile full-screen menu overlay ───────────────────── */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--dens-white);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu--open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  height: 5rem;
  flex-shrink: 0;
  border-bottom: 1px solid var(--dens-gray-100);
}

.mobile-menu__logo img {
  height: 2.25rem;
  width: auto;
}

.mobile-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--dens-navy);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: var(--dens-radius-control);
  transition: background 0.15s ease;
}

.mobile-menu__close:hover {
  background: var(--dens-gray-100);
}

/* Scrollable nav area */
.mobile-menu__nav {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 0;
}

.mobile-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Top-level menu items */
.mobile-menu__item {
  border-bottom: 1px solid var(--dens-gray-100);
}

.mobile-menu__link {
  display: block;
  padding: 1.125rem 1.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--dens-navy);
  text-decoration: none;
  transition: color 0.15s ease;
}

.mobile-menu__link:hover,
.mobile-menu__link:focus,
.mobile-menu__link:active {
  color: var(--dens-navy);
  font-weight: 600;
  opacity: 0.7;
  text-decoration: none;
}

/* Accordion trigger button */
.mobile-menu__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.125rem 1.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--dens-navy);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s ease;
}

.mobile-menu__trigger:hover {
  color: var(--dens-navy);
  opacity: 0.7;
}

.mobile-menu__chevron {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--dens-gray-400);
  transform-origin: 50% 50%;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s ease;
  will-change: transform;
  backface-visibility: hidden;
}

.mobile-menu__item--open .mobile-menu__chevron {
  transform: rotate(90deg);
  color: var(--dens-navy);
}

.mobile-menu__item--open .mobile-menu__trigger {
  color: var(--dens-navy);
}

/* Collapsible sub-panel */
.mobile-menu__sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  padding: 0 1.5rem;
}

.mobile-menu__item--open .mobile-menu__sub {
  max-height: 1500px;
  padding-bottom: 1rem;
}

.mobile-menu__sub-heading {
  font-size: var(--dens-text-eyebrow);
  font-weight: 700;
  color: var(--dens-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 1rem 0 0.375rem 0.75rem;
}

.mobile-menu__sub-heading:first-child {
  margin-top: 0.25rem;
}

.mobile-menu__sub-link {
  display: block;
  padding: 0.625rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--dens-navy);
  text-decoration: none;
  border-radius: var(--dens-radius-control);
  transition: background 0.15s ease, color 0.15s ease;
}

.mobile-menu__sub-link:hover {
  background: var(--dens-gray-100);
  color: var(--dens-navy);
}

.mobile-menu__sub-link--nested {
  padding-left: 1.25rem;
}

.mobile-menu__view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 0.75rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--dens-green);
  text-decoration: none;
  border-radius: var(--dens-radius-control);
  transition: background 0.15s ease;
}

.mobile-menu__view-all:hover {
  background: var(--dens-gray-100);
}

/* Footer with CTA */
.mobile-menu__footer {
  flex-shrink: 0;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--dens-gray-100);
}

.mobile-menu__cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
}

/* Simple header dropdown (Resource Library) */

.header__nav-item--has-dropdown {
  position: relative;
}

.header__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: var(--dens-white);
  border: 1px solid var(--dens-gray-200);
  border-radius: var(--dens-radius-md);
  box-shadow: 0 12px 32px rgba(0, 24, 64, 0.14);
  padding: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform: translateX(-50%) translateY(4px);
  z-index: 50;
}

.header__nav-item--has-dropdown:hover .header__dropdown,
.header__nav-item--has-dropdown:focus-within .header__dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.header__dropdown-link {
  display: block;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 600 !important;
  color: var(--dens-navy);
  border-radius: var(--dens-radius-sm);
  text-decoration: none;
  transition: background var(--dens-transition), color var(--dens-transition);
}

.header__dropdown-link:hover {
  background: var(--dens-gray-100);
  color: var(--dens-green);
}

/* ============================================
   FOOTER overrides
   ============================================ */

.footer {
  background-color: var(--dens-navy);
  color: rgba(255, 255, 255, 0.7);
  padding: 3rem 0 2rem;
}

.footer a {
  color: rgba(255, 255, 255, 0.7);
}

.footer a:hover {
  color: var(--dens-light-green);
}

/* ── Phone legibility and tap targets ─────────────────────────────────────
   The variant chip prefix ("for") and the logo row labels are real copy under 12px; the carousel
   card's "Learn more" lands at 23.6px, just under the 24px minimum, and a little padding clears
   it without moving anything else. */
@media (max-width: 767px) {
  .product-grid--carousel .product-grid__card-variant-prefix {
    font-size: 0.75rem;
  }

  .logo-banner__row-label {
    font-size: 0.75rem;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   Product Detail & Listing — Dynamic HubDB pages
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared section heading ───────────────────────────────────────────────── */

:root {
  --dens-product-name-icon-ratio: 1;
}

.product-section-title {
  font-family: var(--dens-font-body);
  font-size: var(--dens-text-section);
  font-weight: 700;
  color: var(--dens-navy);
  line-height: 1.2;
  margin: 0 0 1rem;
}

/* ── Product Hero — full-width background video ───────────────────────────── */

.product-hero {
  /* one floor across the range: the fold moved by 200px between product pages */
  position: relative;
  background: var(--dens-navy);
  color: var(--dens-white);
  overflow: hidden;
  min-height: 640px;
  width: 100%;
  max-width: 100%;
}

.product-hero__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-hero__bg-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh; /* 16:9 width relative to viewport height */
  height: 56.25vw; /* 16:9 height relative to viewport width */
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

.product-hero__bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  /* the subject of these renders is right of centre, and a phone crops hard to the middle */
  .product-hero__bg-image { object-position: 72% 45%; }
}

.product-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 24, 64, 0.92) 0%, rgba(0, 24, 64, 0.65) 55%, transparent 100%);
}

/* Text-right variant: flip gradient */
.product-hero--text-right .product-hero__overlay {
  background: linear-gradient(to left, rgba(0, 24, 64, 0.92) 0%, rgba(0, 24, 64, 0.65) 55%, transparent 100%);
}

@media (max-width: 767px) {
  /* Both selectors: .product-hero--text-right .product-hero__overlay is two classes, so it
     outranked a single-class mobile rule and pages like CryoSilico kept the horizontal
     desktop gradient - leaving the headline sitting on the bright part of a playing video.
     Weighted up from 0.4 as well: on a phone the text sits over the middle of the frame. */
  .product-hero__overlay,
  .product-hero--text-right .product-hero__overlay {
    background: linear-gradient(to bottom, rgba(0, 24, 64, 0.62) 0%, rgba(0, 24, 64, 0.88) 55%, var(--dens-navy) 100%);
  }
}

.product-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 80rem;
  margin: 0 auto;
  padding: 5rem 1.5rem 5rem;
}

@media (min-width: 1024px) {
  .product-hero__inner {
    padding: 8rem 2rem 8rem;
  }
}

.product-hero__text {
  max-width: 48rem;
}

.product-hero--text-right .product-hero__text {
  margin-left: auto;
}

.product-hero__category {
  margin-bottom: 1.5rem;
  background-color: rgba(132, 189, 0, 0.25);
}

.product-hero__name-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.product-hero__icon {
  width: calc(var(--dens-product-name-icon-ratio, 1) * clamp(1.75rem, 5vw, 3rem));
  height: calc(var(--dens-product-name-icon-ratio, 1) * clamp(1.75rem, 5vw, 3rem));
  object-fit: contain;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

.product-hero__title {
  font-family: var(--dens-font-body);
  font-size: var(--dens-text-hero);
  font-weight: 700;
  margin: 0;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--dens-white) !important;
}

@media (min-width: 1024px) {
  .product-hero__title {
    font-size: 4.5rem;
  }

  .product-hero__icon {
    width: calc(var(--dens-product-name-icon-ratio, 1) * 4.5rem);
    height: calc(var(--dens-product-name-icon-ratio, 1) * 4.5rem);
  }
}

.product-hero__subtitle {
  font-size: var(--dens-text-sub);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 1.5rem;
}

@media (min-width: 1024px) {
  .product-hero__subtitle {
    font-size: 1.5rem;
  }
}

.product-hero__tagline {
  font-size: 1.125rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.625;
  max-width: 42rem;
  margin: 0 0 2.5rem;
}

.product-hero__description {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.125rem;
  line-height: 1.625;
  max-width: 42rem;
  margin: 0 0 2rem;
}

.product-hero__cta-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ── Product Sticky Sub-Nav ───────────────────────────────────────────────── */

.product-subnav {
  z-index: 40;
  background: var(--dens-white);
  border-bottom: 1px solid var(--dens-gray-200);
  box-shadow: var(--dens-shadow-sm);
  display: none;
}

@media (min-width: 768px) {
  .product-subnav {
    display: block;
  }
}

.product-subnav--fixed {
  position: fixed !important;
  left: 0;
  right: 0;
  /* top is set dynamically by JS to match actual header height */
}

.product-subnav__inner {
  max-width: var(--dens-max-width);
  margin: 0 auto;
  padding: 0 1rem;
}

.product-subnav__list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.product-subnav__list::-webkit-scrollbar {
  display: none;
}

.product-subnav__link {
  display: block;
  padding: 1rem 1.25rem;
  font-family: var(--dens-font-body);
  font-size: 0.875rem;
  font-weight: 400 !important;
  white-space: nowrap;
  text-decoration: none;
  color: var(--dens-gray-500);
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.product-subnav__link:hover {
  color: var(--dens-navy);
  font-weight: 400 !important;
}

.product-subnav__link.is-active {
  color: var(--dens-green);
  border-bottom-color: var(--dens-green);
  font-weight: 400 !important;
}

.product-subnav__item--cta {
  margin-left: auto;
}

.product-subnav__cta {
  display: none;
  padding: 1rem 1.25rem;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .product-subnav__cta {
    display: inline-flex;
  }
}

/* ── Product Description ──────────────────────────────────────────────────── */

.product-description {
  padding: 4rem 1.5rem;
}

.product-description__inner {
  max-width: var(--dens-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.product-description__inner h2 {
  font-family: var(--dens-font-body);
  font-size: var(--dens-text-section);
  font-weight: 700;
  color: var(--dens-navy);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.product-description__inner--has-image {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.product-description__body {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--dens-navy);
}

.product-description__image {
  width: 100%;
  border-radius: var(--dens-radius-control);
}

@media (max-width: 768px) {
  .product-description__inner--has-image {
    grid-template-columns: 1fr;
  }
}

/* ── Product Specifications ───────────────────────────────────────────────── */

.product-specs {
  padding: 4rem 1.5rem;
}
.product-specs--white { background: var(--dens-white); }
.product-specs--light { background: var(--dens-light-blue); }
.product-specs--off-white { background: var(--dens-off-white); }
.product-specs--navy-light { background: var(--dens-navy); color: var(--dens-white); }
.product-specs--navy-dark { background: var(--dens-navy-dark); color: var(--dens-white); }

.product-specs__inner {
  max-width: var(--dens-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.product-specs__inner h2 {
  margin-bottom: 1.5rem;
}

.product-specs__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--dens-white);
  border-radius: var(--dens-radius-md);
  overflow: hidden;
  box-shadow: var(--dens-shadow-sm);
  border: 1px solid var(--dens-gray-100);
}

.product-specs__table th,
.product-specs__table td {
  text-align: left;
  padding: 1rem 1.5rem;
  font-size: 0.875rem;
  border: none;
}

.product-specs__table th {
  font-weight: 600;
  color: var(--dens-gray-500);
  width: 33%;
}

.product-specs__table td {
  font-weight: 600;
  color: var(--dens-navy);
}

.product-specs__table tr:nth-child(even) {
  background: var(--dens-gray-50);
}

.product-specs__table tr:last-child th,
.product-specs__table tr:last-child td {
  border-bottom: none;
}

/* ── Specs: section label ─────────────────────────────────────────────────── */

.product-specs__label {
  display: block;
  text-transform: uppercase;
  font-size: var(--dens-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--dens-green, #00b37d);
  margin-bottom: 0.5rem;
}

/* ── Specs: comparison table (multi-column variants) ──────────────────────── */

.product-specs__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.product-specs__table--comparison {
  table-layout: fixed;
}

/* Label column gets a fixed width; the remaining product columns share equally */
.product-specs__table--comparison th:first-child,
.product-specs__table--comparison td:first-child {
  width: 160px;
  text-align: left;
}

.product-specs__table--comparison th:not(:first-child),
.product-specs__table--comparison td:not(:first-child) {
  text-align: center;
}

/* ── Integrated header: image + label in one cell, uniform navy bg ──────── */
.product-specs__table--comparison thead th {
  background: var(--dens-navy, #001e3c);
  color: var(--dens-white, #fff);
  font-weight: 700;
  font-size: 0.875rem;
  padding: 1.25rem 1rem;
  vertical-align: middle;
}

.product-specs__table--comparison thead th:not(:first-child) {
  padding: 1.5rem 0.75rem;
}

.product-specs__corner {
  background: var(--dens-navy, #001e3c) !important;
}

.product-specs__variant-img {
  width: 100%;
  max-width: 120px;
  height: auto;
  margin: 0 auto 0.5rem;
  display: block;
  border-radius: var(--dens-radius-sm, 6px);
}

.product-specs__col-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
}

.product-specs__table--comparison tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--dens-gray-500);
  /* Wraps rather than overflowing the fixed label column when a spec name is
     longer than the 160px reserved for it (e.g. "Polepiece compatibility"). */
  white-space: normal;
}

/* ── Footnotes under the table (asterisk notes) ───────────────────────────── */
.product-specs__footnote {
  margin-top: 1rem;
  font-size: 0.813rem;
  line-height: 1.6;
  color: var(--dens-gray-400);
}

.product-specs__footnote p {
  margin: 0 0 0.25rem;
}

.product-specs__footnote p:last-child {
  margin-bottom: 0;
}

/* ── CTA below table ──────────────────────────────────────────────────────── */
.product-specs__cta {
  text-align: center;
  margin-top: 2rem;
}

@media (max-width: 640px) {
  .product-specs__table--comparison th:first-child,
  .product-specs__table--comparison td:first-child {
    width: 100px;
  }
  .product-specs__table--comparison th,
  .product-specs__table--comparison td {
    padding: 0.75rem 0.5rem;
    font-size: 0.813rem;
  }
  .product-specs__variant-img {
    max-width: 80px;
  }
}

/* ── CTA Banner ───────────────────────────────────────────────────────────── */

.product-cta {
  background: linear-gradient(135deg, var(--dens-navy) 0%, var(--dens-navy-lift) 100%);
  color: var(--dens-white);
  padding: 5rem 1.5rem;
  text-align: center;
}

.product-cta__inner {
  max-width: 600px;
  margin: 0 auto;
}

.product-cta__tagline {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dens-green);
  margin-bottom: 1rem;
}

.product-cta__inner h2 {
  margin-bottom: 0.5rem;
  color: var(--dens-white) !important;
}

.product-cta__inner > p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.1rem;
  margin-bottom: 2.5rem;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.product-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* ── Product Listing (root page) ──────────────────────────────────────────── */

.product-listing {
  padding: 0 1.5rem 5rem;
}

.product-listing__inner {
  max-width: var(--dens-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Hero header */
.product-listing__hero {
  text-align: center;
  padding: 5rem 0 3rem;
}

.product-listing__label {
  font-size: var(--dens-text-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dens-green);
  margin: 0 0 0.75rem;
}

.product-listing__title {
  font-family: var(--dens-font-body);
  font-size: var(--dens-text-page);
  font-weight: 900;
  color: var(--dens-navy);
  margin: 0 0 0.75rem;
  line-height: 1.15;
}

.product-listing__subtitle {
  color: var(--dens-gray-500);
  font-size: var(--dens-text-sub);
  line-height: 1.6;
  margin: 0 auto;
  max-width: 600px;
}

/* Category sections */
.product-listing__category {
  margin-bottom: 3rem;
}

.product-listing__category:last-child {
  margin-bottom: 0;
}

.product-listing__category-heading {
  font-family: var(--dens-font-body);
  font-size: var(--dens-text-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dens-green);
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--dens-green);
}

.product-listing__category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}

/* Cards — no image, clean text-only */
.product-listing__card {
  display: flex;
  flex-direction: column;
  background: var(--dens-white);
  border: 1px solid var(--dens-gray-200);
  border-radius: var(--dens-radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dens-transition), box-shadow var(--dens-transition), border-color var(--dens-transition);
}

.product-listing__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--dens-shadow-md);
  border-color: var(--dens-gray-300);
}

.product-listing__card-body {
  padding: 1.5rem 1.5rem 1rem;
  flex-grow: 1;
}

.product-listing__card-name {
  font-family: var(--dens-font-body);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--dens-navy);
  margin: 0 0 0.5rem;
}

.product-listing__card-tagline {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--dens-gray-500);
  margin: 0;
}

.product-listing__card-link {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--dens-gray-100);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Hub / overview pages (products, applications, services, resources)
   Shared by the product-listing and section-listing modules.
   ═══════════════════════════════════════════════════════════════════════════ */

.hub { background: var(--dens-white); }

/* Header band with a subtle dot grid */
.hub__hero {
  position: relative;
  background: var(--dens-off-white);
  border-bottom: 1px solid var(--dens-gray-200);
  overflow: hidden;
}
.hub__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #dfe4ec 1px, transparent 1.4px);
  background-size: 26px 26px;
  opacity: 0.7;
  pointer-events: none;
  -webkit-mask: linear-gradient(180deg, #000, transparent);
          mask: linear-gradient(180deg, #000, transparent);
}
.hub__hero-inner {
  position: relative;
  max-width: var(--dens-max-width);
  margin: 0 auto;
  padding: 4rem 1.5rem 2rem;
}
.hub__title {
  font-family: var(--dens-font-body);
  font-size: var(--dens-text-page);
  font-weight: 800;
  color: var(--dens-navy);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
}
/* Intro paragraph on the hub pages: a reading measure, not the full 1280 grid,
   so these pages read as an introduction rather than a bare list of links. */
.hub__intro {
  max-width: 48rem;
  margin: 1.5rem auto 0;
  font-family: var(--dens-font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.76);
}

.hub__intro p { margin: 0 0 0.85rem; }
.hub__intro p:last-child { margin-bottom: 0; }
.hub__intro a { color: var(--dens-green); }

.hub__subtitle {
  margin: 1rem 0 0;
  font-size: var(--dens-text-sub);
  line-height: 1.6;
  color: var(--dens-gray-500);
  max-width: 44rem;
}

/* Category sections */
.hub__body {
  max-width: var(--dens-max-width);
  margin: 0 auto;
  padding: 1rem 1.5rem 4.5rem;
}
.hub__cat { padding-top: 2.75rem; }
.hub__cat-head { margin: 0 0 1.4rem; }
.hub__cat-title {
  font-family: var(--dens-font-body);
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  font-weight: 700;
  color: var(--dens-navy);
  letter-spacing: -0.02em;
  margin: 0;
}

/* Cards */
.hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 1.1rem;
}
.hub__card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--dens-white);
  border: 1px solid var(--dens-gray-200);
  border-radius: var(--dens-radius-md);
  padding: 1.4rem 1.4rem 1.25rem;
  text-decoration: none;
  transition: box-shadow var(--dens-transition), transform var(--dens-transition), border-color var(--dens-transition);
}
.hub__card:hover {
  border-color: var(--dens-gray-300);
  box-shadow: var(--dens-shadow-md);
  transform: translateY(-2px);
}
.hub__card-top {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.75rem;
}
/* Icon sized relative to the product name (~1.15x), matching the ratio used in
   the product hero and application-platform cards. */
.hub__card-icon {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hub__card-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hub__card-name {
  font-family: var(--dens-font-body);
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--dens-navy);
  line-height: 1.2;
  margin: 0;
}
.hub__card-name .product-name__infinity { font-size: 0.5em; vertical-align: super; font-weight: 700; }
.hub__card-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--dens-gray-500);
  margin: 0 0 1.1rem;
}
/* Stimuli read as one row above the divider, with "Learn more" alone beneath it. Sharing a
   line with the link made the pills wrap on the products with three or four stimuli, which
   left the link floating at a different height on every card. */
.hub__card-chips {
  margin-top: auto;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  padding-bottom: 0.85rem;
}
/* compact enough that four pills fit the narrowest card (248px inner, four across) on one row */
.hub__card-chips .tag-pill {
  font-size: 0.6875rem;
  padding: 0.18rem 0.45rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.hub__card-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--dens-gray-100);
}
.hub__card-chips + .hub__card-foot { margin-top: 0; }
.hub__card-foot .card-link { margin-top: 0; white-space: nowrap; }

@media (max-width: 600px) {
  .hub__hero-inner { padding: 2.75rem 1.5rem 1.5rem; }
  .hub__body { padding-bottom: 3rem; }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .product-hero {
    min-height: 300px;
  }

  .product-hero__inner {
    padding: 3rem 1.25rem 3rem;
  }

  .product-hero__subtitle {
    font-size: 1rem;  /* explicit mobile step below --dens-text-sub */
  }

  .product-hero__cta-row {
    justify-content: flex-start;
  }

  .product-section-title {
    font-size: 1.75rem;
  }

  .product-listing__category-grid {
    grid-template-columns: 1fr;
  }

  .product-testimonials__grid {
    grid-template-columns: 1fr;
  }

  .product-testimonials__grid--3 {
    grid-template-columns: 1fr;
  }

  .product-testimonials__card {
    padding: 1.5rem;
  }

  .product-cta {
    padding: 3.5rem 1.25rem;
  }

  .product-cta__inner h2 {
    font-size: 1.75rem;
  }

  .product-features {
    padding: 3rem 1.25rem;
  }

  .product-features__heading {
    font-size: 1.75rem;
  }

  .product-features__item {
    gap: 0.75rem;
  }
}

/* ── Product Features ─────────────────────────────────────────────────────── */

.product-features {
  padding: 5rem 1.5rem;
}
.product-features--white { background: var(--dens-white); }
.product-features--light { background: var(--dens-light-blue); }
.product-features--off-white { background: var(--dens-off-white); }
.product-features--navy-light { background: var(--dens-navy); color: var(--dens-white); }
.product-features--navy-dark { background: var(--dens-navy-dark); color: var(--dens-white); }

.product-features__inner {
  max-width: var(--dens-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.product-features__heading {
  margin-bottom: 2.5rem;
}

.product-features__list {
  display: flex;
  flex-direction: column;
}

.product-features__item {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--dens-gray-200);
}

.product-features__item:first-child {
  border-top: 1px solid var(--dens-gray-200);
}

.product-features__index {
  flex-shrink: 0;
  font-family: var(--dens-font-body);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--dens-green);
  letter-spacing: 0.05em;
  padding-top: 0.2rem;
  min-width: 2rem;
}

.product-features__content {
  flex: 1;
}

.product-features__title {
  font-family: var(--dens-font-body);
  font-weight: 600;
  font-size: var(--dens-text-card);
  color: var(--dens-navy);
  margin: 0 0 0.4rem;
}

.product-features__desc {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--dens-gray-500);
  margin: 0;
  max-width: 48rem;
}

/* ── Product Testimonials ─────────────────────────────────────────────────── */

.product-testimonials {
  padding: 5rem 1.5rem;
}
.product-testimonials--white { background: var(--dens-white); }
.product-testimonials--light { background: var(--dens-light-blue); }
.product-testimonials--off-white { background: var(--dens-off-white); }
.product-testimonials--navy-light { background: var(--dens-navy); color: var(--dens-white); }
.product-testimonials--navy-dark { background: var(--dens-navy-dark); color: var(--dens-white); }

.product-testimonials__inner {
  max-width: var(--dens-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.product-testimonials__header {
  margin-bottom: 2.5rem;
}

.product-testimonials__label {
  display: block;
  font-size: var(--dens-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dens-green);
  margin-bottom: 0.75rem;
}

.product-testimonials__title {
  font-family: var(--dens-font-body);
  font-weight: 700;
  font-size: var(--dens-text-section);
  color: var(--dens-navy);
  margin: 0;
}

.product-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.product-testimonials__grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.product-testimonials__grid--1 {
  grid-template-columns: 1fr;
}

.product-testimonials__card {
  background: var(--dens-white);
  border: 1px solid var(--dens-gray-200);
  border-radius: var(--dens-radius-md);
  padding: 2rem;
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.product-testimonials__quote-icon {
  color: var(--dens-green);
  opacity: 0.25;
  margin-bottom: 1rem;
}

.product-testimonials__quote {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--dens-navy);
  font-style: italic;
  margin: 0 0 1.5rem;
  flex-grow: 1;
  position: relative;
}
.product-testimonials__quote p {
  margin: 0 0 0.75rem;
}
.product-testimonials__quote p:last-child {
  margin-bottom: 0;
}

/* Collapsible quotes ----------------------------------------------------
   When the embedded JS detects overflow it adds `.is-clamped`; clicking the
   injected toggle swaps to `.is-expanded`. The clamp uses a CSS variable so
   editors can configure the line limit from the module. A soft fade at the
   bottom of the clamped quote hints at additional content. */
.product-testimonials__quote.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--quote-max-lines, 8);
  overflow: hidden;
}
.product-testimonials__quote.is-expanded {
  display: block;
}

/* The toggle is rendered as a <button>, so the global theme button rules
   (background-color and color on :hover/:focus/:active) would otherwise
   override the inherited .card-link color and make the text invisible on
   light section backgrounds. Pin every state explicitly. */
.product-testimonials__toggle,
.product-testimonials__toggle:hover,
.product-testimonials__toggle:focus,
.product-testimonials__toggle:focus-visible,
.product-testimonials__toggle:active,
button.product-testimonials__toggle,
button.product-testimonials__toggle:hover,
button.product-testimonials__toggle:focus,
button.product-testimonials__toggle:focus-visible,
button.product-testimonials__toggle:active {
  align-self: flex-start;
  margin: 0.25rem 0 1.25rem;
  padding: 0;
  background: transparent !important;
  background-color: transparent !important;
  border: none;
  cursor: pointer;
  color: var(--dens-green) !important;
}
.product-testimonials__toggle:hover,
button.product-testimonials__toggle:hover {
  color: var(--dens-green-hover) !important;
}
.product-testimonials__toggle:focus-visible,
button.product-testimonials__toggle:focus-visible {
  outline: 2px solid var(--dens-green);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Dark backgrounds: keep the toggle readable. */
.product-testimonials--navy-light .product-testimonials__toggle,
.product-testimonials--navy-dark .product-testimonials__toggle,
.product-testimonials--navy-light button.product-testimonials__toggle,
.product-testimonials--navy-dark button.product-testimonials__toggle {
  color: var(--dens-green, var(--dens-green)) !important;
}

.product-testimonials__footer {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  border-top: 1px solid var(--dens-gray-100);
  padding-top: 1.25rem;
}

.product-testimonials__avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--dens-navy);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-testimonials__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-testimonials__avatar-initials {
  font-family: var(--dens-font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dens-white);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.product-testimonials__meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.product-testimonials__author {
  font-family: var(--dens-font-body);
  font-style: normal;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--dens-navy);
}

.product-testimonials__affiliation {
  font-size: 0.8rem;
  color: var(--dens-gray-400);
  line-height: 1.35;
}

/* Mobile: stack all testimonial grids into a single column.
   Declared after the base/variant rules so the cascade wins. */
@media (max-width: 768px) {
  .product-testimonials {
    padding: 3.5rem 1.25rem;
  }
  .product-testimonials__title {
    font-size: 1.75rem;
  }
  .product-testimonials__grid,
  .product-testimonials__grid--1,
  .product-testimonials__grid--2,
  .product-testimonials__grid--3,
  .product-testimonials__grid--4 {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .product-testimonials__card {
    padding: 1.5rem;
  }
}

/* ── Product FAQ ──────────────────────────────────────────────────────────── */

.product-faq {
  padding: 4rem 0;
  background: var(--dens-navy);
  color: var(--dens-white);
}

.product-faq__inner {
  max-width: var(--dens-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 2.5rem;
  align-items: start;
}

.product-faq__header {
  position: sticky;
  top: 8rem;
}

.product-faq__label {
  display: inline-block;
  font-size: var(--dens-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dens-green);
  margin-bottom: 1rem;
}

.product-faq__title {
  font-family: var(--dens-font-body);
  font-weight: 700;
  font-size: var(--dens-text-section);
  color: var(--dens-white);
  margin: 0 0 1rem;
  line-height: 1.15;
}

.product-faq__subtitle {
  font-size: var(--dens-text-sub);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  max-width: 360px;
}

.product-faq__list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.product-faq__item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--dens-radius-md);
  overflow: hidden;
  transition: background var(--dens-transition), border-color var(--dens-transition);
}

.product-faq__item:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.18);
}

.product-faq__item[open] {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(132, 189, 0, 0.35);
}

.product-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.1rem;
  cursor: pointer;
  font-family: var(--dens-font-body);
  font-weight: 600;
  font-size: var(--dens-text-card-sm);
  color: var(--dens-white);
  list-style: none;
}

.product-faq__question::-webkit-details-marker {
  display: none;
}

.product-faq__question-text {
  flex: 1;
}

.product-faq__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: var(--dens-green);
  transition: transform var(--dens-transition), background var(--dens-transition);
}

.product-faq__item[open] .product-faq__icon {
  transform: rotate(45deg);
  background: rgba(132, 189, 0, 0.2);
}

.product-faq__answer {
  padding: 0 1.1rem 1rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

.product-faq__answer p,
.product-faq__answer li,
.product-faq__answer div {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* margin: 0 above is right for the usual one-paragraph answer, but the FireBolt chip answer is two
   paragraphs and ran together as one block. */
.product-faq__answer p + p {
  margin-top: 0.7rem;
}

.product-faq__category {
  font-family: var(--dens-font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dens-white);
  margin: 1rem 0 0.35rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.product-faq__category:first-child {
  margin-top: 0;
}

@media (max-width: 768px) {
  .product-faq__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .product-faq__header {
    position: static;
    text-align: center;
  }

  .product-faq__subtitle {
    max-width: none;
  }

  .product-faq__title {
    font-size: 1.75rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Product Application Fields
   ═══════════════════════════════════════════════════════════════════════════ */

.product-appfields {
  padding: 5rem 1.5rem;
  background: var(--dens-navy);
  color: var(--dens-white);
}

.product-appfields__inner {
  max-width: var(--dens-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.product-appfields__header {
  text-align: center;
  margin-bottom: 3rem;
}

.product-appfields__label {
  font-size: var(--dens-text-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dens-green);
  margin: 0 0 0.75rem;
}

.product-appfields__title {
  color: var(--dens-white) !important;
  margin: 0;
}

.product-appfields__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  justify-items: center;
}

.product-appfields__card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--dens-radius-md);
  padding: 1.75rem 1.5rem;
  text-align: center;
  transition: background var(--dens-transition), border-color var(--dens-transition), transform var(--dens-transition);
}
.product-appfields__card:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(132, 189, 0, 0.4);
  transform: translateY(-2px);
}

.product-appfields__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--dens-radius-md);
  background: rgba(132, 189, 0, 0.15);
  color: var(--dens-green);
  margin-bottom: 1rem;
}

.product-appfields__icon--image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  /* Light disc so illustration icons (often dark/transparent PNGs) stay
     visible on the navy section and read consistently across products. */
  background: var(--dens-white);
  overflow: hidden;
}

.product-appfields__icon--image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  box-sizing: border-box;
}

.product-appfields__card-title {
  font-family: var(--dens-font-body);
  font-weight: 700;
  font-size: var(--dens-text-card-sm);
  color: var(--dens-white);
  margin: 0 0 0.35rem;
}

.product-appfields__card-desc {
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Product Reasons ("Why Choose")
   ═══════════════════════════════════════════════════════════════════════════ */

.product-reasons {
  padding: 5rem 1.5rem;
}
.product-reasons--white { background: var(--dens-white); }
.product-reasons--light { background: var(--dens-light-blue); }
.product-reasons--off-white { background: var(--dens-off-white); }
.product-reasons--navy-light { background: var(--dens-navy); color: var(--dens-white); }
.product-reasons--navy-dark { background: var(--dens-navy-dark); color: var(--dens-white); }

.product-reasons__inner {
  max-width: var(--dens-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.product-reasons__header {
  text-align: center;
  /* Wide enough for a 40px heading to hold a full sentence on one line (~48 chars);
     the intro paragraph keeps the narrower 800px measure below. */
  max-width: 960px;
  margin: 0 auto 4rem;
}

.product-reasons__label {
  font-size: var(--dens-text-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dens-green);
  margin: 0 0 0.75rem;
}

.product-reasons__title {
  margin: 0 0 1.25rem;
}

.product-reasons__intro {
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--dens-gray-500);
  max-width: 800px;
  margin: 0 auto;
}

.product-reasons__list {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.product-reasons__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.product-reasons__card--reverse {
  direction: rtl;
}

.product-reasons__card--reverse > * {
  direction: ltr;
}

.product-reasons__card-number {
  display: inline-block;
  font-family: var(--dens-font-body);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--dens-green);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
  padding: 0.3rem 0.75rem;
  background: rgba(132, 189, 0, 0.1);
  border-radius: var(--dens-radius-xs);
}

/* Short flag on a card, e.g. "Optional add-on", instead of a bold lead-in inside the paragraph.
   Same pill as the number chip above, so a reason card can carry the number and the flag on one
   line and a component card can carry the flag alone above its title. */
.system-components__card-badge,
.product-reasons__card-badge {
  display: inline-block;
  font-family: var(--dens-font-body);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--dens-green);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.75rem;
  background: rgba(132, 189, 0, 0.1);
  border-radius: var(--dens-radius-xs);
}

/* Inline inside the <h3>, so it reads as a flag on the title rather than a line above it. The
   title's own line-height carries it; vertical-align keeps it centred against the large type. */
.system-components__card-badge,
.product-reasons__card-badge {
  margin-left: 0.65rem;
  vertical-align: middle;
  white-space: nowrap;
}

/* On the navy variants the green tint goes muddy, so lift the pill off the background instead. */
.system-components--navy-light .system-components__card-badge,
.system-components--navy-dark .system-components__card-badge,
.product-reasons--navy-light .product-reasons__card-badge,
.product-reasons--navy-dark .product-reasons__card-badge {
  background: rgba(255, 255, 255, 0.12);
}

/* Journal masthead logo at the top of each featured publication card. Wrapped in a white
   tile so logos that have white or transparent backgrounds always look consistent against
   any section background. */
.product-reasons__card-journal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.85rem;
  margin: 0 0 1rem;
  background: var(--dens-white);
  border: 1px solid var(--dens-gray-200, var(--dens-gray-200));
  border-radius: var(--dens-radius-sm, 6px);
  box-shadow: 0 1px 2px rgba(0, 24, 64, 0.04);
}
.product-reasons__card-journal-logo {
  display: block;
  width: auto;
  height: auto;
  max-height: 32px;
  max-width: 180px;
  object-fit: contain;
}

.product-reasons__card-title {
  font-family: var(--dens-font-body);
  font-size: var(--dens-text-card-lg);
  font-weight: 700;
  color: var(--dens-navy);
  margin: 0 0 1rem;
}

.product-reasons__card-desc {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--dens-gray-500);
  margin: 0 0 1rem;
}

.product-reasons__card-citation {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--dens-gray-400);
  font-style: italic;
  padding-left: 1rem;
  border-left: 3px solid var(--dens-green);
  margin: 0;
}

/* Citation block + "See full publication" link stacked so the expanding arrow on the link
   never reflows the quote text next to it. */
.product-reasons__card-reference {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
.product-reasons__card-reference .product-reasons__card-citation {
  width: 100%;
}
.product-reasons__card-citation-link {
  font-size: 0.85rem;
}

.product-reasons__card-system-link {
  margin-top: 1rem;
}
.product-reasons__card-system-static {
  margin: 1rem 0 0;
  font-size: 0.9rem;
  color: var(--dens-gray-500);
}
.product-reasons--navy-light .product-reasons__card-system-static,
.product-reasons--navy-dark .product-reasons__card-system-static { color: rgba(255,255,255,0.7); }

/* "This experiment was performed using [Product]" — mini product summary card with side-by-side
   layout. Whole card becomes clickable via the stretched overlay when system_url is set. */
.product-reasons__card-research {
  position: relative;
  margin-top: 1.75rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--dens-white);
  border: 1px solid var(--dens-gray-200, var(--dens-gray-200));
  border-radius: var(--dens-radius-md, 12px);
  box-shadow: 0 1px 2px rgba(0, 24, 64, 0.04);
  transition: box-shadow var(--dens-transition), border-color var(--dens-transition), transform var(--dens-transition);
}
.product-reasons--white .product-reasons__card-research {
  background: var(--dens-off-white, #f8fafc);
}
.product-reasons--navy-light .product-reasons__card-research,
.product-reasons--navy-dark .product-reasons__card-research {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}
.product-reasons__card-research--linked:hover {
  border-color: var(--dens-gray-300, #d1d5db);
  box-shadow: var(--dens-shadow-md);
  transform: translateY(-2px);
}
.product-reasons--navy-light .product-reasons__card-research--linked:hover,
.product-reasons--navy-dark .product-reasons__card-research--linked:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.product-reasons__card-research-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}
.product-reasons__card-research-overlay:focus-visible {
  outline: 2px solid var(--dens-green);
  outline-offset: 2px;
}

.product-reasons__card-research-info {
  flex: 1 1 auto;
  min-width: 0;
}
.product-reasons__card-research-eyebrow {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--dens-gray-500);
  font-weight: 400;
}
.product-reasons--navy-light .product-reasons__card-research-eyebrow,
.product-reasons--navy-dark .product-reasons__card-research-eyebrow { color: rgba(255, 255, 255, 0.65); }

.product-reasons__card-research-system {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.15rem 0 0;
}
.product-reasons__card-research-system-name {
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--dens-navy);
}
.product-reasons--navy-light .product-reasons__card-research-system-name,
.product-reasons--navy-dark .product-reasons__card-research-system-name { color: var(--dens-white); }

/* Stimuli rectangle — icons grouped in a single light-blue pill next to the system name */
.product-reasons__card-research-stimuli {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 1.5rem;
  padding: 0 0.55rem;
  border-radius: 0.35rem;
  background: var(--dens-light-blue);
}
.product-reasons--navy-light .product-reasons__card-research-stimuli,
.product-reasons--navy-dark .product-reasons__card-research-stimuli {
  background: rgba(255, 255, 255, 0.16);
}
.product-reasons__card-research-stimulus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
}
.product-reasons__card-research-stimulus img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* The CTA is a styled span — the whole card is the link via the overlay. Keep the button look
   and the hover-arrow animation by piggybacking on hover of the parent card. */
.product-reasons__card-research-cta {
  flex-shrink: 0;
  pointer-events: none;
}
.product-reasons__card-research--linked:hover .product-reasons__card-research-cta {
  background: var(--dens-green-hover);
}
.product-reasons__card-research--linked:hover .product-reasons__card-research-cta > svg,
.product-reasons__card-research--linked:focus-within .product-reasons__card-research-cta > svg {
  width: 1em !important;
  max-width: 1em;
  opacity: 1;
  margin-left: 0.5rem;
}

@media (max-width: 599px) {
  .product-reasons__card-research {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

.product-reasons__card-content > .card-link,
.product-reasons__card-content > .btn {
  margin-top: 1.25rem;
}

.product-reasons__card-visual {
  border-radius: var(--dens-radius-md);
  overflow: hidden;
  border: 1px solid rgba(0, 24, 64, 0.10);
  box-shadow: var(--dens-shadow-md);
  background: var(--dens-white);
  isolation: isolate;
  transform: translateZ(0);
}

/* Images: let container shrink to image dimensions */
.product-reasons__card-visual:has(> .product-reasons__card-image) {
  width: fit-content;
  min-width: 100%;
  max-width: 100%;
}

.product-reasons__card-visual--no-shadow {
  border: none;
  box-shadow: none;
  justify-self: center;
}

.product-reasons__card-visual--constrained {
  justify-self: center;
  overflow: hidden;
}

.product-reasons__card-visual--no-shadow:has(> .product-reasons__card-image) {
  min-width: 0;
  width: fit-content;
  max-width: 100%;
}

.product-reasons__card-image {
  width: 100%;
  height: auto;
  display: block;
}

.product-reasons__card-visual--no-shadow > .product-reasons__card-image {
  width: auto;
  max-width: 100%;
  max-height: 280px;
}

.product-reasons__card-video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  overflow: hidden;
  background: var(--dens-white);
}

.product-reasons__card-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* Slight scale to crop letterbox/edge artifacts that show as black during scroll */
  transform: scale(1.015);
  transform-origin: center center;
}

.product-reasons__card-video--native {
  padding-bottom: 0;
  overflow: hidden;
}

.product-reasons__card-video--native video {
  width: 100%;
  height: auto;
  display: block;
  /* Slight scale to crop letterbox/edge artifacts that show as black during scroll */
  transform: scale(1.015);
  transform-origin: center center;
}

/* ── Switchable media (two or more recordings behind one caption bar) ──────
   The stage keeps ONE fixed ratio for every slide, so toggling never changes the
   card's height and the page does not grow and shrink underneath the reader. The
   media are contained rather than cropped, which leaves bands on whichever axis
   does not fill - they are the card's own white, so they read as padding. 4/3 is
   the balance between the square EDS map and the 1920x1040 screen recording:
   roughly 74px of side band for one and 61px top and bottom for the other. */
.product-reasons__media-switch {
  display: block;
}

.product-reasons__media-stage {
  position: relative;
  aspect-ratio: var(--dens-media-stage-ratio, 4 / 3);
  overflow: hidden;
}

/* is-active is in the markup on the first slide, so this is also the no-JS state. */
.product-reasons__media-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s;
}
.product-reasons__media-slide.is-active {
  opacity: 1;
  visibility: visible;
}

/* Without JS the dots cannot do anything, so do not offer them. */
.product-reasons__media-switch:not(.is-ready) .product-reasons__media-dots {
  display: none;
}

.product-reasons__media-slide > * {
  height: 100%;
}
/* The stage already fixes the height, so an embed's ratio padding would fight it. */
.product-reasons__media-slide .product-reasons__card-video {
  padding-bottom: 0;
}
.product-reasons__media-slide video,
.product-reasons__media-slide .product-reasons__card-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* The --native rule nudges the scale up to hide edge artifacts on a cover fit;
     contained media has no edges to hide and would just get cropped. */
  transform: none;
}

.product-reasons__media-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
  border-top: 1px solid var(--dens-gray-200);
  background: var(--dens-white);
}

.product-reasons__media-text {
  min-width: 0;
}

.product-reasons__media-caption {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--dens-gray-500);
}

.product-reasons__media-credit {
  margin: 0.15rem 0 0;
  font-size: 0.7rem;
  line-height: 1.4;
  font-style: italic;
  color: var(--dens-gray-400);
}
.product-reasons__media-credit[hidden] {
  display: none;
}

.product-reasons__media-dots {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.product-reasons__media-dot {
  width: 1.6rem;
  height: 0.4rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--dens-gray-200);
  cursor: pointer;
  transition: background 0.2s ease, width 0.2s ease;
}
.product-reasons__media-dot:hover {
  background: var(--dens-gray-400);
}
.product-reasons__media-dot.is-active {
  width: 2.2rem;
  background: var(--dens-green);
}
.product-reasons__media-dot:focus-visible {
  outline: 2px solid var(--dens-green);
  outline-offset: 2px;
}

/* The caption is the accessible name; the pill itself is a bare control. */
.product-reasons__media-dot-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 599px) {
  .product-reasons__media-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-reasons__media-slide,
  .product-reasons__media-dot {
    transition: none;
  }
}

.product-reasons__card-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--dens-navy) 0%, var(--dens-navy-lift) 50%, #003890 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-reasons__card-placeholder-num {
  font-family: var(--dens-font-body);
  font-size: 4rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 768px) {
  .product-reasons__card {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .product-reasons__card--reverse {
    direction: ltr;
  }

  .product-reasons__title {
    font-size: 1.75rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Product Nano-Chip / Key Component
   ═══════════════════════════════════════════════════════════════════════════ */

.product-nanochip {
  padding: 5rem 1.5rem;
}
.product-nanochip--white { background: var(--dens-white); }
.product-nanochip--light { background: var(--dens-light-blue); }
.product-nanochip--off-white { background: var(--dens-off-white); }
.product-nanochip--dark { background: var(--dens-navy); color: var(--dens-white); }
.product-nanochip--navy-light { background: var(--dens-navy); color: var(--dens-white); }
.product-nanochip--navy-dark { background: var(--dens-navy-dark); color: var(--dens-white); }

.product-nanochip__inner {
  max-width: var(--dens-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.product-nanochip__header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 3rem;
}

/* Component Showcase: the intro column reads left-aligned, not centred */
.product-nanochip__intro-text .product-nanochip__header {
  text-align: left;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.product-nanochip__intro-text .product-nanochip__stats-intro,
.product-nanochip__intro-text .product-nanochip__cta {
  text-align: left;
}

.product-nanochip__label {
  font-size: var(--dens-text-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dens-green);
  margin: 0 0 0.75rem;
}

.product-nanochip__title {
  font-family: var(--dens-font-body);
  font-size: var(--dens-text-section);
  font-weight: 700;
  color: var(--dens-navy);
  line-height: 1.2;
  margin: 0 0 0.75rem;
}

.product-nanochip__subtitle {
  font-size: var(--dens-text-sub);
  line-height: 1.65;
  color: var(--dens-gray-500);
  margin: 0;
}

.product-nanochip__description {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--dens-gray-500);
  margin: 1rem 0 0;
}

/* Intro two-column layout */
.product-nanochip__intro-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-bottom: 3rem;
}

.product-nanochip__intro-image {
  justify-self: center;
}

.product-nanochip__intro-image img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--dens-radius-lg);
  object-fit: cover;
  border: 1px solid rgba(0, 24, 64, 0.10);
  box-shadow: var(--dens-shadow-md);
}

.product-nanochip__intro-image--no-shadow img {
  border: none;
  box-shadow: none;
}

@media (max-width: 768px) {
  .product-nanochip__intro-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .product-nanochip__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.product-nanochip__cta {
  margin-top: 1.5rem;
  margin-bottom: 0;
  text-align: center;
}

/* Topic cards */
.product-nanochip__topics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.product-nanochip__topic {
  background: var(--dens-white);
  border: 1px solid var(--dens-gray-200);
  border-radius: var(--dens-radius-lg);
  padding: 2rem;
}

.product-nanochip__topic-title {
  font-family: var(--dens-font-body);
  font-weight: 700;
  font-size: var(--dens-text-card);
  color: var(--dens-navy);
  margin: 0 0 1.25rem;
}

.product-nanochip__topic-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.product-nanochip__topic-item {
  font-size: 0.925rem;
  line-height: 1.65;
  color: var(--dens-gray-600);
  padding-left: 1.25rem;
  position: relative;
}

.product-nanochip__topic-item::before {
  content: '\25A0';
  position: absolute;
  left: 0;
  color: var(--dens-gray-600);
  font-size: 0.5rem;
  top: 0.45em;
}

.product-nanochip__topic-item strong {
  color: var(--dens-navy);
}

.product-nanochip__specs {
  padding: 2rem;
}

.product-nanochip__specs-heading {
  font-family: var(--dens-font-body);
  font-weight: 700;
  font-size: var(--dens-text-card);
  color: var(--dens-navy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--dens-green);
}

.product-nanochip__specs-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.product-nanochip__spec-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--dens-gray-100);
}

.product-nanochip__spec-row:last-child {
  border-bottom: none;
}

.product-nanochip__spec-value {
  font-family: var(--dens-font-body);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--dens-green);
}

.product-nanochip__spec-label {
  font-size: var(--dens-text-eyebrow);
  font-weight: 600;
  color: var(--dens-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Stats row — inside intro-text column */
.product-nanochip__stats-intro {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--dens-gray-500);
  margin: 0 0 1rem;
}

.product-nanochip__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 0;
}

.product-nanochip__stat {
  background: var(--dens-white);
  border: 1px solid var(--dens-gray-200);
  border-radius: var(--dens-radius-md);
  padding: 1rem 0.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.product-nanochip__stat-value {
  display: block;
  font-family: var(--dens-font-body);
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--dens-green);
  margin-bottom: 0.25rem;
}

.product-nanochip__stat-label {
  display: block;
  font-size: var(--dens-text-eyebrow);
  font-weight: 600;
  color: var(--dens-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Features checklist */
.product-nanochip__features {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.25rem;
  margin-bottom: 3rem;
}

.product-nanochip__feature {
  display: flex;
  gap: 1rem;
  background: var(--dens-white);
  border: 1px solid var(--dens-gray-200);
  border-radius: var(--dens-radius-md);
  padding: 1.25rem 1.5rem;
}

.product-nanochip__feature-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(132, 189, 0, 0.12);
  color: var(--dens-green);
}

.product-nanochip__feature-title {
  font-family: var(--dens-font-body);
  font-weight: 700;
  font-size: var(--dens-text-card-sm);
  color: var(--dens-navy);
  margin: 0 0 0.25rem;
}

.product-nanochip__feature-desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--dens-gray-500);
  margin: 0;
}

/* Support film range */
.product-nanochip__films {
  margin-top: 2rem;
}

/* Performance highlights */
.product-nanochip__highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.product-nanochip__highlight {
  background: var(--dens-white);
  border: 1px solid var(--dens-gray-200);
  border-radius: var(--dens-radius-lg);
  padding: 1.75rem;
}

.product-nanochip__highlight-category {
  font-family: var(--dens-font-body);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--dens-navy);
  margin: 0 0 0.5rem;
}

.product-nanochip__highlight-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--dens-gray-500);
  margin: 0 0 1.25rem;
}

.product-nanochip__highlight-items {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.product-nanochip__highlight-item {
  display: flex;
  flex-direction: column;
}

.product-nanochip__highlight-value {
  font-family: var(--dens-font-body);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--dens-green);
  line-height: 1.1;
}

.product-nanochip__highlight-label {
  font-size: var(--dens-text-eyebrow);
  font-weight: 600;
  color: var(--dens-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.2rem;
}

.product-nanochip__highlight-img {
  margin-bottom: 1rem;
  border-radius: var(--dens-radius-md);
  overflow: hidden;
}

.product-nanochip__highlight-img img {
  width: 100%;
  height: auto;
  display: block;
}

.product-nanochip__highlight-media {
  border-radius: var(--dens-radius-md);
  overflow: hidden;
}

.product-nanochip__highlight-media video {
  width: 100%;
  height: auto;
  display: block;
}

/* Window designs */
.product-nanochip__windows-title {
  font-family: var(--dens-font-body);
  font-weight: 700;
  font-size: var(--dens-text-card);
  color: var(--dens-navy);
  margin: 0 0 1.5rem;
}

.product-nanochip__window-card {
  background: var(--dens-white);
  border: 1px solid var(--dens-gray-200);
  border-radius: var(--dens-radius-md);
  padding: 1.5rem;
}

.product-nanochip__window-name {
  font-family: var(--dens-font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dens-navy);
  margin: 0 0 0.5rem;
}

.product-nanochip__window-desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--dens-gray-500);
  margin: 0;
}

.product-nanochip__films-title {
  font-family: var(--dens-font-body);
  font-weight: 700;
  font-size: var(--dens-text-card);
  color: var(--dens-navy);
  margin: 0 0 1.25rem;
}

.product-nanochip__films-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.product-nanochip__film-card {
  background: var(--dens-white);
  border: 1px solid var(--dens-gray-200);
  border-radius: var(--dens-radius-md);
  padding: 1.5rem;
}

.product-nanochip__film-name {
  font-family: var(--dens-font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--dens-navy);
  margin: 0 0 0.5rem;
}

.product-nanochip__film-desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--dens-gray-500);
  margin: 0;
}

@media (max-width: 768px) {
  .product-nanochip__topics {
    grid-template-columns: 1fr;
  }

  .product-nanochip__features {
    grid-template-columns: 1fr;
  }

  .product-nanochip__films-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Multi-section nano-chip (standalone page) ───────────── */

.product-nanochip__section-heading {
  font-family: var(--dens-font-body);
  font-size: clamp(1.875rem, 3.4vw, 2.5rem);
  font-weight: 700;
  color: var(--dens-navy);
  line-height: 1.2;
  margin: 0 0 1rem;
}

.product-nanochip__section-text {
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 800px;
  margin-bottom: 2.5rem;
  opacity: 0.85;
}

.product-nanochip__inner--centered {
  text-align: center;
}

.product-nanochip__inner--centered .product-nanochip__section-heading,
.product-nanochip__inner--centered .product-nanochip__section-text {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.product-nanochip__section-text p { margin: 0 0 0.75rem; }
.product-nanochip__section-text p:last-child { margin-bottom: 0; }

/* Dark variant overrides */
.product-nanochip--dark .product-nanochip__section-heading { color: var(--dens-white); }
.product-nanochip--dark .product-nanochip__windows-title { color: var(--dens-white); }
.product-nanochip--dark .product-nanochip__window-name { color: var(--dens-white); }
.product-nanochip--dark .product-nanochip__window-desc { color: rgba(255,255,255,0.75); }
.product-nanochip--dark .product-nanochip__window-card {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}

/* Stat badge (e.g. 850 µm² viewable area) */
.product-nanochip__stat-badge {
  position: relative;
  z-index: 1;
  margin-top: 2rem;
  margin-bottom: -4rem;
}

.product-nanochip__stat-badge-value {
  font-family: var(--dens-font-body);
  font-size: 4rem;
  font-weight: 700;
  color: var(--dens-white);
  line-height: 1;
}

.product-nanochip__stat-badge-unit {
  font-family: var(--dens-font-body);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dens-green);
  margin-left: 0.25rem;
  vertical-align: super;
}

.product-nanochip__stat-badge-label {
  font-size: var(--dens-text-card-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0.25rem 0 0;
}

/* Window designs: centered stacked layout with overlap */
.product-nanochip__windows-img {
  margin: 0 auto;
  max-width: 700px;
  position: relative;
  z-index: 0;
  /* Pull into the text above and grid below */
  margin-top: -10rem;
  margin-bottom: -6rem;
  /* The 16rem of negative margin above is paid for by the image's own height.
     Until the image has loaded (it is lazy, so that can be a while) reserve a
     floor so the text above can never collapse onto the cards below. The img
     also carries width/height attributes, so this only has to cover images
     whose dimensions the field did not report. */
  min-height: 18rem;
  box-sizing: border-box;
}

.product-nanochip__windows-img img {
  width: 100%;
  height: auto;
  display: block;
  mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
}

.product-nanochip__inner--centered .product-nanochip__section-text {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
}

.product-nanochip__windows-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: left;
  position: relative;
  z-index: 1;
}

.product-nanochip__windows-title {
  margin-bottom: 1.5rem;
}

/* Highlights: full-width rows (text+stats left, image right, alternating) */
.product-nanochip__highlights--rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.product-nanochip__highlight--row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  padding: 3rem 0;
  border-bottom: 1px solid var(--dens-gray-100);
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  border-radius: 0;
}

.product-nanochip__highlight--row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.product-nanochip__highlight--row:first-child {
  padding-top: 0;
}

.product-nanochip__highlight--row:nth-child(even) .product-nanochip__highlight-img,
.product-nanochip__highlight--row:nth-child(even) .product-nanochip__highlight-media {
  order: -1;
}

.product-nanochip__highlight--row .product-nanochip__highlight-img,
.product-nanochip__highlight--row .product-nanochip__highlight-media {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .product-nanochip__windows-grid {
    grid-template-columns: 1fr;
  }

  .product-nanochip__highlight--row {
    grid-template-columns: 1fr;
  }

  .product-nanochip__highlight--row:nth-child(even) .product-nanochip__highlight-img,
  .product-nanochip__highlight--row:nth-child(even) .product-nanochip__highlight-media {
    order: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   System Components (alternating cards with specs)
   ═══════════════════════════════════════════════════════════════════════════ */

.system-components {
  padding: 5rem 1.5rem;
}
.system-components--white { background: var(--dens-white); }
.system-components--light { background: var(--dens-light-blue); }
.system-components--off-white { background: var(--dens-off-white); }
.system-components--navy-light { background: var(--dens-navy); color: var(--dens-white); }
.system-components--navy-dark { background: var(--dens-navy-dark); color: var(--dens-white); }

.system-components__inner {
  max-width: var(--dens-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.system-components__header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 4rem;
}

.system-components__title {
  margin: 0 0 1.25rem;
}

.system-components__subtext {
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--dens-gray-500);
  margin: 0;
}

.system-components__list {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.system-components__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.system-components__card--reverse {
  direction: rtl;
}

.system-components__card--reverse > * {
  direction: ltr;
}

.system-components__card-title {
  font-family: var(--dens-font-body);
  font-size: var(--dens-text-card-lg);
  font-weight: 700;
  color: var(--dens-navy);
  margin: 0 0 1rem;
}

.system-components__card-desc {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--dens-gray-500);
  margin: 0 0 1rem;
}

.system-components__card-content > .card-link,
.system-components__card-content > .btn {
  margin-top: 1.25rem;
}

.system-components__card-visual {
  border-radius: var(--dens-radius-md);
  overflow: hidden;
  border: 1px solid rgba(0, 24, 64, 0.10);
  box-shadow: var(--dens-shadow-md);
}

.system-components__card-visual:has(> .system-components__card-image) {
  width: fit-content;
  min-width: 100%;
  max-width: 100%;
}

.system-components__card-visual--no-shadow {
  border: none;
  box-shadow: none;
  justify-self: center;
}

.system-components__card-visual--no-shadow:has(> .system-components__card-image) {
  min-width: 0;
  width: fit-content;
  max-width: 100%;
}

.system-components__card-image {
  width: 100%;
  height: auto;
  display: block;
}

.system-components__card-visual--no-shadow > .system-components__card-image {
  width: auto;
  max-width: 100%;
  max-height: 280px;
}

/* Specs row inside component cards */
.system-components__specs-intro {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--dens-gray-500);
  margin: 1.25rem 0 0.75rem;
}

.system-components__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.system-components__spec {
  background: var(--dens-white);
  border: 1px solid var(--dens-gray-200);
  border-radius: var(--dens-radius-md);
  padding: 1rem 0.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.system-components__spec-value {
  display: block;
  font-family: var(--dens-font-body);
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--dens-green);
  margin-bottom: 0.25rem;
}

.system-components__spec-label {
  display: block;
  font-size: var(--dens-text-eyebrow);
  font-weight: 600;
  color: var(--dens-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 768px) {
  .system-components__card {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Stacked, the image belongs above its description - the DOM order puts the text first so
     that the desktop grid can alternate sides. */
  .system-components__card-visual { order: 1; }
  .system-components__card-content { order: 2; }

  .system-components__card--reverse {
    direction: ltr;
  }

  .system-components__title {
    font-size: 1.75rem;
  }

  .system-components__specs {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Product Resources (Brochure + Application Notes)
   ═══════════════════════════════════════════════════════════════════════════ */

.product-resources {
  padding: 5rem 1.5rem;
}
.product-resources--white { background: var(--dens-white); }
.product-resources--light { background: var(--dens-light-blue); }
.product-resources--off-white { background: var(--dens-off-white); }
.product-resources--navy-light { background: var(--dens-navy); color: var(--dens-white); }
.product-resources--navy-dark { background: var(--dens-navy-dark); color: var(--dens-white); }

.product-resources__inner {
  max-width: var(--dens-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.product-resources__header {
  margin-bottom: 2.5rem;
}

.product-resources__label {
  font-size: var(--dens-text-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dens-green);
  margin: 0 0 0.5rem;
}

.product-resources__title {
  margin: 0;
}

.product-resources__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: stretch;
}

.product-resources__grid--brochure-only {
  grid-template-columns: 1fr;
}

.product-resources__col-heading {
  font-family: var(--dens-font-body);
  font-weight: 700;
  font-size: var(--dens-text-card);
  color: var(--dens-navy);
  margin: 0 0 1rem;
}

/* Brochure-only solo card: full-width, larger proportions */
.product-resources__brochure-card--solo {
  display: flex;
  gap: 3rem;
  padding: 2.5rem 3rem;
  align-items: center;
}

.product-resources__brochure-image--solo {
  flex: 0 0 200px;
  max-width: 200px;
}

.product-resources__brochure-image--solo img {
  width: 100%;
  height: auto;
  border-radius: var(--dens-radius-xs);
  box-shadow: 0 4px 20px rgba(0, 24, 64, 0.35);
}

.product-resources__brochure-card--solo .product-resources__brochure-title {
  font-size: var(--dens-text-card-lg);
  margin-bottom: 0.75rem;
}

.product-resources__brochure-card--solo .product-resources__brochure-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 1.5rem;
}

/* Brochure card */
.product-resources__brochure,
.product-resources__notes {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-resources__brochure-heading {
  font-family: var(--dens-font-body);
  font-weight: 700;
  font-size: var(--dens-text-card);
  color: var(--dens-navy);
  margin: 0 0 1rem;
}

.product-resources__brochure-card {
  display: flex;
  gap: 1.75rem;
  align-items: center;
  background: linear-gradient(135deg, var(--dens-navy) 0%, var(--dens-navy-lift) 100%);
  border-radius: var(--dens-radius-lg);
  padding: 2rem;
  color: var(--dens-white);
  flex: 1 1 auto;
}

.product-resources__brochure-image {
  flex: 0 0 140px;
  max-width: 140px;
}

.product-resources__brochure-image img {
  width: 100%;
  height: auto;
  border-radius: var(--dens-radius-xs);
  box-shadow: 0 4px 16px rgba(0, 24, 64, 0.3);
}

.product-resources__brochure-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.product-resources__brochure-title {
  font-family: var(--dens-font-body);
  font-size: var(--dens-text-card);
  font-weight: 700;
  color: var(--dens-white);
  margin: 0 0 0.5rem;
}

.product-resources__brochure-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 1.25rem;
}

.product-resources__brochure-body .card-link {
  margin-top: auto;
  color: var(--dens-green);
}

.product-resources__brochure-body .btn-primary {
  align-self: flex-start;
  margin-top: auto;
}

/* Application notes */
.product-resources__notes-heading {
  font-family: var(--dens-font-body);
  font-weight: 700;
  font-size: var(--dens-text-card);
  color: var(--dens-navy);
  margin: 0 0 1rem;
}

.product-resources__notes-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1 1 auto;
}

.product-resources__note {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
  background: var(--dens-off-white);
  border: 1px solid var(--dens-gray-200);
  border-radius: var(--dens-radius-md);
  padding: 1rem 1.25rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.product-resources__note:hover {
  border-color: var(--dens-green);
  box-shadow: 0 2px 8px rgba(132, 189, 0, 0.1);
}

.product-resources__note-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--dens-radius-control);
  background: rgba(132, 189, 0, 0.1);
  color: var(--dens-green);
}

.product-resources__note-content {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.product-resources__note-title {
  font-family: var(--dens-font-body);
  font-weight: 600;
  font-size: var(--dens-text-card-sm);
  color: var(--dens-navy);
}

@media (max-width: 768px) {
  .product-resources__grid {
    grid-template-columns: 1fr;
  }

  .product-resources__brochure-card {
    flex-direction: column;
    gap: 1rem;
  }

  .product-resources__brochure-image {
    flex: none;
    max-width: 120px;
  }

  .product-resources__brochure-card--solo {
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.75rem;
    align-items: flex-start;
  }

  .product-resources__brochure-image--solo {
    flex: none;
    max-width: 140px;
  }

  .product-appfields__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Product Highlights ─────────────────────────────────────────────────── */

.product-highlights {
  padding: 4rem 1.5rem;
  background: var(--dens-navy);
}

.product-highlights__inner {
  max-width: var(--dens-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem;
}

.product-highlights__item {
  text-align: center;
  padding: 1.5rem 1rem;
}

.product-highlights__value-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.product-highlights__value {
  font-family: var(--dens-font-body);
  font-weight: 700;
  font-size: 2.75rem;
  letter-spacing: -0.02em;
  color: var(--dens-white);
  line-height: 1.1;
}

.product-highlights__unit {
  font-family: var(--dens-font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--dens-green);
}

.product-highlights__desc {
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

@media (max-width: 600px) {
  .product-highlights__inner {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }

  .product-highlights__value {
    font-size: 2rem;
  }
}

/* ── Product Content Block ──────────────────────────────────────────────── */

.product-content {
  padding: 5rem 1.5rem;
}

.product-content--white { background: var(--dens-white); }
.product-content--light { background: var(--dens-light-blue); }
.product-content--off-white { background: var(--dens-off-white); }
.product-content--dark  { background: var(--dens-navy); color: var(--dens-white); }
.product-content--navy-light { background: var(--dens-navy); color: var(--dens-white); }
.product-content--navy-dark { background: var(--dens-navy-dark); color: var(--dens-white); }

.product-content__inner {
  max-width: var(--dens-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.product-content__header {
  margin-bottom: 1.5rem;
}

.product-content__intro {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--dens-gray-600);
  margin: 0;
  max-width: 44rem;
}

.product-content--dark .product-content__intro {
  color: rgba(255, 255, 255, 0.75);
}

/* ── Richtext body mode (original layout, class renamed) ──── */

.product-content__text-wrap--has-image {
  display: grid;
  gap: 3.5rem;
  align-items: center;
}

.product-content__text-wrap--img-right {
  grid-template-columns: 1.5fr 0.8fr;
}

.product-content__text-wrap--img-left {
  grid-template-columns: 1fr 1.2fr;
}

/* Text first, image second, and the image gets the wider column - for a screenshot that needs the
   room. "right" keeps its original 1.5fr/0.8fr for the sections built around a small visual. */
.product-content__text-wrap--img-right-wide {
  grid-template-columns: 1fr 1.2fr;
}

.product-content__text-wrap--img-left .product-content__image-wrap {
  order: -1;
}

/* Green accent bar */
.product-content__accent {
  width: 3rem;
  height: 3px;
  background: var(--dens-green);
  border-radius: 2px;
  margin-bottom: 1.25rem;
}

.product-content__heading {
  margin: 0 0 1.5rem;
}

.product-content--dark .product-content__accent {
  background: var(--dens-green);
}

.product-content--dark .product-content__heading {
  color: var(--dens-white);
}

.product-content__body {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--dens-gray-700);
}

.product-content--dark .product-content__body {
  color: rgba(255, 255, 255, 0.8);
}

.product-content__body p {
  margin: 0 0 1rem;
}

.product-content__body h3 {
  font-family: var(--dens-font-body);
  font-weight: 700;
  font-size: var(--dens-text-card);
  color: var(--dens-navy);
  margin: 0 0 0.75rem;
  line-height: 1.4;
}

.product-content--dark .product-content__body h3 {
  color: var(--dens-white);
}

.product-content__body a:not(.btn-primary):not(.btn-secondary) {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--dens-green);
  font-weight: 600;
  text-decoration: none;
  transition: gap var(--dens-transition), color var(--dens-transition);
}

.product-content__body a:not(.btn-primary):not(.btn-secondary):hover {
  gap: 0.65rem;
  color: var(--dens-green-hover);
}

.product-content__body a:not(.btn-primary):not(.btn-secondary)::after {
  content: '→';
  font-size: 1.1em;
  transition: transform var(--dens-transition);
}

.product-content__body a:not(.btn-primary):not(.btn-secondary):hover::after {
  transform: translateX(2px);
}

.product-content__image-wrap {
  border-radius: var(--dens-radius-lg);
  overflow: hidden;
  box-shadow: var(--dens-shadow-md);
  transition: transform var(--dens-transition), box-shadow var(--dens-transition);
  width: fit-content;
  margin-left: auto;
}

.product-content__image-wrap:hover {
  transform: translateY(-2px);
  box-shadow: var(--dens-shadow-lg);
}

.product-content__image-wrap--no-shadow {
  box-shadow: none;
  border-radius: 0;
}

.product-content__image-wrap--no-shadow:hover {
  box-shadow: none;
  transform: none;
}

.product-content__image {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 400px;
  display: block;
  margin: 0 auto;
}

/* With the image below, the text has no column to share, so cap its measure rather than letting it
   run the full 1280px container. */
.product-content__text-wrap--img-below {
  max-width: 920px;
}

/* Below the text the image is the point, so let it use the full container: the 400px height cap
   above is meant for the side-by-side layout. The only other section using this layout has no
   image, so nothing else moves. */
.product-content__image-below .product-content__image {
  width: 100%;
  max-height: none;
}

.product-content__image-below {
  max-width: var(--dens-max-width);
  margin: 2.5rem auto 0;
  border-radius: var(--dens-radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 24, 64, 0.10);
}

@media (max-width: 768px) {
  .product-content__text-wrap--has-image {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .product-content__text-wrap--img-left .product-content__image-wrap {
    order: 0;
  }
}

/* ── Content cards (2-column grid) ──────────────────────────── */

.product-content__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 2rem;
}

.product-content__card {
  overflow: hidden;
}

.product-content__card-img {
  width: 85%;
  margin: 0 auto;
}

.product-content__card-img img {
  width: 100%;
  height: auto;
  display: block;
}

.product-content__card-body {
  padding: 0 0 0.75rem;
}

.product-content__card-title {
  font-family: var(--dens-font-body);
  font-weight: 700;
  font-size: var(--dens-text-card);
  color: var(--dens-navy);
  margin: 0 0 0.75rem;
  line-height: 1.35;
}

.product-content--dark .product-content__card-title {
  color: var(--dens-white);
}

.product-content__card-desc {
  font-size: 0.925rem;
  line-height: 1.7;
  color: var(--dens-gray-700);
}

.product-content__card-desc p {
  margin: 0 0 0.75rem;
}

.product-content__card-desc p:last-child {
  margin-bottom: 0;
}

.product-content__card-body > .card-link {
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.product-content--dark .product-content__card-desc {
  color: rgba(255, 255, 255, 0.75);
}

.product-content__card-source {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--dens-gray-400);
  font-style: italic;
  padding-left: 1rem;
  border-left: 3px solid var(--dens-green);
  margin: 0.75rem 0 0;
}

.product-content--dark .product-content__card-source {
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
  .product-content__cards {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.product-content__cta {
  margin-top: 1.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VIDEO EMBED MODULE
   ═══════════════════════════════════════════════════════════════════════════ */

.video-embed {
  padding: 5rem 1.5rem;
}

.video-embed--white {
  background: var(--dens-white);
  color: #0a1628;
}

.video-embed--off-white {
  background: var(--dens-off-white);
  color: #0a1628;
}

.video-embed--light {
  background: var(--dens-light-blue);
  color: #0a1628;
}

.video-embed--dark {
  background: var(--dens-navy-dark);
  color: var(--dens-white);
  position: relative;
  isolation: isolate;
}

.video-embed--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 80% at 10% 50%, rgba(0, 56, 144, 0.28) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 90% 40%, rgba(132, 189, 0, 0.08) 0%, transparent 55%);
  pointer-events: none;
}

.video-embed--navy-light {
  background: var(--dens-navy);
  color: var(--dens-white);
  position: relative;
  isolation: isolate;
}

.video-embed--navy-light::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 80% at 10% 50%, rgba(0, 56, 144, 0.28) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 90% 40%, rgba(132, 189, 0, 0.08) 0%, transparent 55%);
  pointer-events: none;
}

.video-embed--navy-dark {
  background: var(--dens-navy-dark);
  color: var(--dens-white);
}

.video-embed__inner {
  max-width: 1040px;
  margin: 0 auto;
}

.video-embed__header {
  text-align: left;
  margin-bottom: 2.5rem;
}

.video-embed__label {
  font-size: var(--dens-text-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dens-green);
  margin: 0 0 0.5rem;
}

.video-embed__title {
  margin: 0 0 0.75rem;
}

.video-embed--dark .video-embed__title {
  color: var(--dens-white);
}

.video-embed__desc {
  font-size: 1rem;
  line-height: 1.6;
  max-width: none;
  margin: 0;
  color: #4a5568;
}

.video-embed--dark .video-embed__desc {
  color: rgba(255, 255, 255, 0.7);
}

.video-embed__player {
  border-radius: var(--dens-radius-md);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 24, 64, 0.3);
}

.video-embed__ratio {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  background: #000;
}

.video-embed__ratio iframe,
.video-embed__ratio video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}

.video-embed__ratio--placeholder {
  background: linear-gradient(135deg, #0a1a3d 0%, #1a2f5c 100%);
}

.video-embed--off-white .video-embed__ratio--placeholder,
.video-embed--light .video-embed__ratio--placeholder,
.video-embed--white .video-embed__ratio--placeholder {
  background: linear-gradient(135deg, #e6ebf2 0%, #d3dae5 100%);
}

.video-embed__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.video-embed--off-white .video-embed__placeholder,
.video-embed--light .video-embed__placeholder,
.video-embed--white .video-embed__placeholder {
  color: rgba(0, 24, 64, 0.5);
}

.video-embed__placeholder svg {
  opacity: 0.6;
}

/* ── Product Publications Section ─────────────────────────────────────────── */

.product-publications {
  padding: 5rem 0;
}
.product-publications--white { background-color: var(--dens-white); }
.product-publications--light { background-color: var(--dens-light-blue); }
.product-publications--off-white { background-color: var(--dens-off-white); }
.product-publications--navy-light { background-color: var(--dens-navy); color: var(--dens-white); }
.product-publications--navy-dark { background-color: var(--dens-navy-dark); color: var(--dens-white); }

.product-publications__inner {
  max-width: var(--dens-max-width, 1200px);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.product-publications__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
  margin-bottom: 3rem;
}

.product-publications__heading-block {
  flex: 1 1 auto;
  min-width: 0;
}

.product-publications__view-all {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .product-publications__header {
    flex-direction: column;
    align-items: flex-start;
  }
}

.product-publications__label {
  display: inline-block;
  font-family: var(--dens-font-body);
  font-size: var(--dens-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dens-green);
  margin-bottom: 0.75rem;
}

.product-publications__title {
  margin: 0;
}

.product-publications__loading {
  text-align: center;
  padding: 2rem 0;
  color: var(--dens-gray-400);
  font-size: 0.875rem;
}

.product-publications__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

/* 1–4 items: single row */
.product-publications__grid[data-count="1"] { grid-template-columns: 1fr; }
.product-publications__grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.product-publications__grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.product-publications__grid[data-count="4"] { grid-template-columns: repeat(4, 1fr); }

/* 5 items: 3 + 2 */
.product-publications__grid[data-count="5"] { grid-template-columns: repeat(6, 1fr); }
.product-publications__grid[data-count="5"] > .product-publications__card { grid-column: span 2; }
.product-publications__grid[data-count="5"] > .product-publications__card:nth-child(4) { grid-column: 2 / span 2; }
.product-publications__grid[data-count="5"] > .product-publications__card:nth-child(5) { grid-column: 4 / span 2; }

/* 6 items: 3 + 3 */
.product-publications__grid[data-count="6"] { grid-template-columns: repeat(3, 1fr); }



.product-publications__card {
  display: flex;
  flex-direction: column;
  background: var(--dens-white);
  border: 1px solid var(--dens-gray-200);
  border-radius: var(--dens-radius-md);
  padding: 1.5rem;
  text-decoration: none;
  transition: box-shadow var(--dens-transition), transform var(--dens-transition), border-color var(--dens-transition);
}

.product-publications__card:hover {
  box-shadow: var(--dens-shadow-md);
  transform: translateY(-2px);
  border-color: var(--dens-gray-300);
}

.product-publications__card-content {
  flex: 1;
}

.product-publications__card-meta {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1rem;
}

.product-publications__card-pill {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dens-green);
  background-color: rgba(132, 189, 0, 0.1);
  padding: 0.25rem 0.75rem;
  border-radius: var(--dens-radius-pill);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 160px cut "Advanced Functional Materials" to "ADVANCED FUNCTIO..." - long journal names are
     common enough to be worth the room. Still capped, and still leaves the date its place. */
  max-width: min(280px, calc(100% - 6rem));
}

.product-publications__card-title {
  font-family: var(--dens-font-heading);
  font-size: var(--dens-text-card-sm);
  font-weight: 700;
  line-height: 1.4;
  color: var(--dens-navy);
  margin: 0 0 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-publications__card-authors {
  font-size: 0.8125rem;
  color: var(--dens-gray-400);
  margin: 0 0 0.375rem;
  line-height: 1.4;
}

.product-publications__card-date {
  font-size: 0.75rem;
  color: var(--dens-gray-400);
  margin: 0;
  white-space: nowrap;
}

.product-publications__card > .card-link {
  margin-top: auto;
}

.product-publications__footer {
  text-align: center;
}

@media (max-width: 1024px) {
  .product-publications__grid,
  .product-publications__grid[data-count="3"],
  .product-publications__grid[data-count="4"],
  .product-publications__grid[data-count="5"],
  .product-publications__grid[data-count="6"] {
    grid-template-columns: repeat(2, 1fr);
  }
  .product-publications__grid[data-count="5"] > .product-publications__card { grid-column: auto; }
  .product-publications__grid[data-count="5"] > .product-publications__card:nth-child(4) { grid-column: auto; }
  .product-publications__grid[data-count="5"] > .product-publications__card:nth-child(5) { grid-column: auto; }
}

@media (max-width: 640px) {
  .product-publications {
    padding: 3rem 0;
  }

  /* Every data-count variant has to be named here: those selectors are a class plus an
     attribute, so they outrank a plain-class rule no matter where it sits, and the cards stayed
     two-across at 390px - 292px wide, running off the screen. */
  .product-publications__grid,
  .product-publications__grid[data-count="2"],
  .product-publications__grid[data-count="3"],
  .product-publications__grid[data-count="4"],
  .product-publications__grid[data-count="5"],
  .product-publications__grid[data-count="6"] {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAVY BACKGROUND — TEXT INVERSION OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared section heading ──────────────────────────────────────────────── */
[class*="--navy-light"] > .product-section-title,
[class*="--navy-dark"] > .product-section-title,
[class*="--navy-light"] .product-section-title,
[class*="--navy-dark"] .product-section-title {
  color: var(--dens-white);
}

/* ── product-features ────────────────────────────────────────────────────── */
.product-features--navy-light .product-features__title,
.product-features--navy-dark .product-features__title { color: var(--dens-white); }

.product-features--navy-light .product-features__desc,
.product-features--navy-dark .product-features__desc { color: rgba(255,255,255,0.7); }

.product-features--navy-light .product-features__item,
.product-features--navy-dark .product-features__item { border-bottom-color: rgba(255,255,255,0.12); }

/* ── product-reasons ─────────────────────────────────────────────────────── */
.product-reasons--navy-light .product-reasons__intro,
.product-reasons--navy-dark .product-reasons__intro { color: rgba(255,255,255,0.7); }

.product-reasons--navy-light .product-reasons__card-title,
.product-reasons--navy-dark .product-reasons__card-title { color: var(--dens-white); }

.product-reasons--navy-light .product-reasons__card-desc,
.product-reasons--navy-dark .product-reasons__card-desc { color: rgba(255,255,255,0.7); }

.product-reasons--navy-light .product-reasons__card-citation,
.product-reasons--navy-dark .product-reasons__card-citation { color: rgba(255,255,255,0.6); }

/* ── product-nanochip (mirroring --dark overrides) ───────────────────────── */
.product-nanochip--navy-light .product-nanochip__section-heading,
.product-nanochip--navy-dark .product-nanochip__section-heading { color: var(--dens-white); }

.product-nanochip--navy-light .product-nanochip__windows-title,
.product-nanochip--navy-dark .product-nanochip__windows-title { color: var(--dens-white); }

.product-nanochip--navy-light .product-nanochip__window-name,
.product-nanochip--navy-dark .product-nanochip__window-name { color: var(--dens-white); }

.product-nanochip--navy-light .product-nanochip__window-desc,
.product-nanochip--navy-dark .product-nanochip__window-desc { color: rgba(255,255,255,0.75); }

.product-nanochip--navy-light .product-nanochip__window-card,
.product-nanochip--navy-dark .product-nanochip__window-card {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}

/* ── system-components ───────────────────────────────────────────────────── */
.system-components--navy-light .system-components__subtext,
.system-components--navy-dark .system-components__subtext { color: rgba(255,255,255,0.7); }

.system-components--navy-light .system-components__card-title,
.system-components--navy-dark .system-components__card-title { color: var(--dens-white); }

.system-components--navy-light .system-components__card-desc,
.system-components--navy-dark .system-components__card-desc { color: rgba(255,255,255,0.7); }

.system-components--navy-light .system-components__specs-intro,
.system-components--navy-dark .system-components__specs-intro { color: rgba(255,255,255,0.7); }

.system-components--navy-light .system-components__spec-label,
.system-components--navy-dark .system-components__spec-label { color: rgba(255,255,255,0.6); }

/* ── product-resources ───────────────────────────────────────────────────── */
.product-resources--navy-light .product-resources__brochure-heading,
.product-resources--navy-dark .product-resources__brochure-heading { color: var(--dens-white); }

.product-resources--navy-light .product-resources__notes-heading,
.product-resources--navy-dark .product-resources__notes-heading { color: var(--dens-white); }

.product-resources--navy-light .product-resources__note-title,
.product-resources--navy-dark .product-resources__note-title { color: var(--dens-white); }

/* ── product-content (mirroring --dark overrides) ─────────────────────────── */
.product-content--navy-light .product-content__intro,
.product-content--navy-dark .product-content__intro { color: rgba(255,255,255,0.75); }

.product-content--navy-light .product-content__heading,
.product-content--navy-dark .product-content__heading { color: var(--dens-white); }

.product-content--navy-light .product-content__body,
.product-content--navy-dark .product-content__body { color: rgba(255,255,255,0.8); }

.product-content--navy-light .product-content__body h3,
.product-content--navy-dark .product-content__body h3 { color: var(--dens-white); }

.product-content--navy-light .product-content__card-title,
.product-content--navy-dark .product-content__card-title { color: var(--dens-white); }

.product-content--navy-light .product-content__card-desc,
.product-content--navy-dark .product-content__card-desc { color: rgba(255,255,255,0.75); }

.product-content--navy-light .product-content__card-source,
.product-content--navy-dark .product-content__card-source { color: rgba(255,255,255,0.5); }

/* ── video-embed (mirroring --dark overrides) ─────────────────────────────── */
.video-embed--navy-light .video-embed__title,
.video-embed--navy-dark .video-embed__title { color: var(--dens-white); }

.video-embed--navy-light .video-embed__desc,
.video-embed--navy-dark .video-embed__desc { color: rgba(255,255,255,0.7); }

/* ── product-publications ─────────────────────────────────────────────────── */
.product-publications--navy-light .product-publications__loading,
.product-publications--navy-dark .product-publications__loading { color: rgba(255,255,255,0.6); }

/* ── product-specs ────────────────────────────────────────────────────────── */
.product-specs--navy-light .product-specs__table td,
.product-specs--navy-dark .product-specs__table td { color: var(--dens-white); }

.product-specs--navy-light .product-specs__table th,
.product-specs--navy-dark .product-specs__table th { color: rgba(255,255,255,0.7); }

.product-specs--navy-light .product-specs__footnote,
.product-specs--navy-dark .product-specs__footnote { color: rgba(255,255,255,0.55); }

/* ── product-testimonials ─────────────────────────────────────────────────── */
.product-testimonials--navy-light .product-testimonials__title,
.product-testimonials--navy-dark .product-testimonials__title { color: var(--dens-white); }

/* ═══════════════════════════════════════════════════════════════════════════
   FEATURED PUBLICATIONS — meta strip and CTA
   ═══════════════════════════════════════════════════════════════════════════ */

.featured-publications__meta {
  display: inline-flex;
  align-items: stretch;
  gap: 1rem;
  margin: 0 0 1.25rem;
  padding: 0.5rem 0.85rem;
  background: var(--dens-white);
  border: 1px solid var(--dens-gray-200, var(--dens-gray-200));
  border-radius: var(--dens-radius-sm, 6px);
  box-shadow: 0 1px 2px rgba(0, 24, 64, 0.04);
  max-width: 100%;
  flex-wrap: wrap;
}

.featured-publications__journal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Kept in sync with featured-publications.module/module.css on purpose: the same
   two selectors live in both sheets and only load order decides the winner. */
.featured-publications__journal img {
  display: block;
  width: auto;
  height: auto;
  max-height: 34px;
  max-width: 270px;
  object-fit: contain;
}

.featured-publications__system {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding-left: 1rem;
  border-left: 1px solid var(--dens-gray-200, var(--dens-gray-200));
}
.featured-publications__meta:not(:has(.featured-publications__journal)) .featured-publications__system,
.featured-publications__meta > .featured-publications__system:first-child {
  padding-left: 0;
  border-left: 0;
}

.featured-publications__system-eyebrow {
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--dens-gray-500);
}

.featured-publications__system-line {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.1rem;
}

a.featured-publications__system-name,
.featured-publications__system-name {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--dens-navy);
  text-decoration: none;
}
a.featured-publications__system-name {
  transition: color var(--dens-transition);
}
a.featured-publications__system-name:hover,
a.featured-publications__system-name:focus-visible {
  color: var(--dens-green);
}

.featured-publications__stimuli {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 1.3rem;
  padding: 0 0.45rem;
  border-radius: 0.3rem;
  background: var(--dens-light-blue);
}
.featured-publications__stimulus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.9rem;
  height: 0.9rem;
}
.featured-publications__stimulus img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.featured-publications .product-reasons__card-citation {
  margin: 1rem 0 0;
}

.featured-publications__cta {
  align-self: flex-start;
  margin-top: 1.5rem;
}

@media (max-width: 599px) {
  .featured-publications__meta {
    gap: 0.75rem;
  }
  .featured-publications__system {
    padding-left: 0;
    border-left: 0;
    width: 100%;
  }
}

/* ── Phone legibility: a 12px floor under real copy ───────────────────────
   Journal pills, media credits, hub card chips and the system eyebrow are ordinary copy set small
   for desktop density. On a phone there is room, and under 12px is where reading starts to hurt.
   The interface mock-ups are deliberately left out: they reproduce a desktop UI at its own scale. */
@media (max-width: 767px) {
  .product-publications__card-pill,
  .product-reasons__media-credit,
  .featured-publications__system-eyebrow {
    font-size: 0.75rem;
  }

  /* The chips are nowrap on desktop so four fit a 248px card; a phone card is wider but not four
     12px chips wide, so let them wrap instead of overflowing. */
  .hub__card-chips {
    flex-wrap: wrap;
    row-gap: 0.25rem;
  }

  .hub__card-chips .tag-pill {
    font-size: 0.75rem;
    white-space: normal;
  }
}

/* ── Tap targets ──────────────────────────────────────────────────────────
   The switcher dots are 26px wide and 6px tall by design - they read as a progress bar, not as
   buttons - so the hit area is grown with a pseudo-element instead of padding, which would fatten
   the pill. Inset horizontally by less than half the 0.4rem gap so neighbours never overlap. */
.product-reasons__media-dot {
  position: relative;
}

.product-reasons__media-dot::after {
  content: '';
  position: absolute;
  inset: -10px -2px;
}

/* The testimonial toggle is a .card-link, but the reset above it lands later in the bundle at the
   same specificity and zeroes the padding, so it needs saying again here. */
@media (max-width: 767px) {
  .product-testimonials__toggle,
  button.product-testimonials__toggle {
    padding: 0.3rem 0;
  }
}
/* ── Cookie consent banner ────────────────────────────────────────────────
   Floating card in bottom-left corner. Off-white background, softer shadow,
   body-typography text, and button styles aligned with site buttons.
   ──────────────────────────────────────────────────────────────────────── */

#hs-eu-cookie-confirmation {
  position: fixed !important;
  inset: auto auto 1.5rem 1.5rem !important;
  top: auto !important;
  right: auto !important;
  width: auto !important;
  max-width: 400px !important;
  background: var(--dens-off-white, var(--dens-off-white)) !important;
  border: 1px solid var(--dens-gray-200, var(--dens-gray-200)) !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 8px 22px rgba(0, 24, 64, 0.12), 0 1px 4px rgba(0, 24, 64, 0.06) !important;
  padding: 1.1rem 1.25rem !important;
  font-family: var(--dens-font-body, Inter, sans-serif) !important;
  z-index: 9999 !important;
}

#hs-eu-cookie-confirmation-inner {
  max-width: none !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 1rem !important;
  padding: 0 !important;
}

/* Replace wording to remove the cookie-policy sentence and keep body styling */
#hs-eu-cookie-confirmation #hs-eu-policy-wording {
  position: relative !important;
  margin: 0 !important;
  min-width: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}

#hs-eu-cookie-confirmation #hs-eu-policy-wording::before {
  content: "We use cookies to enhance your experience, analyze site traffic and deliver personalized content.";
  display: block !important;
  color: var(--dens-gray-500, #4a5568) !important;
  font-family: var(--dens-font-body, Inter, sans-serif) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

#hs-eu-cookie-confirmation #hs-eu-policy-wording p,
#hs-eu-cookie-confirmation #hs-eu-policy-wording a,
#hs-eu-cookie-confirmation #hs-eu-cookie-policy-link {
  display: none !important;
}

/* HubSpot renders either #hs-eu-cookie-confirmation-button-group or
   #hs-eu-cookie-confirmation-buttons-area depending on account variant. */
#hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-button-group,
#hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-buttons-area {
  flex: 0 0 auto !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 0.5rem !important;
  align-items: stretch !important;
}

#hs-eu-cookie-confirmation #hs-eu-confirmation-button,
#hs-eu-cookie-confirmation #hs-eu-decline-button {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 44px !important;
  min-height: 44px !important;
  min-width: 136px !important;
  line-height: 1 !important;
  border-radius: 0.375rem !important;
  padding: 0 1.75rem !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  font-family: var(--dens-font-body, Inter, sans-serif) !important;
  text-align: center !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-color: transparent !important;
  border-width: 0 !important;
  border-style: solid !important;
  outline: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer !important;
  transition: background var(--dens-transition, 0.2s ease), color var(--dens-transition, 0.2s ease) !important;
}

/* Accept button matches site .btn-primary token colors */
#hs-eu-cookie-confirmation #hs-eu-confirmation-button {
  background: var(--dens-green, var(--dens-green)) !important;
  color: var(--dens-white, #fff) !important;
}

#hs-eu-cookie-confirmation #hs-eu-confirmation-button:hover,
#hs-eu-cookie-confirmation #hs-eu-confirmation-button:focus,
#hs-eu-cookie-confirmation #hs-eu-confirmation-button:active {
  background: var(--dens-green-hover, var(--dens-green-hover)) !important;
  color: var(--dens-white, #fff) !important;
}

/* Reject button as subtle secondary action */
#hs-eu-cookie-confirmation #hs-eu-decline-button {
  background: var(--dens-gray-100, var(--dens-gray-100)) !important;
  color: var(--dens-navy, var(--dens-navy)) !important;
}

#hs-eu-cookie-confirmation #hs-eu-decline-button:hover,
#hs-eu-cookie-confirmation #hs-eu-decline-button:focus,
#hs-eu-cookie-confirmation #hs-eu-decline-button:active {
  background: var(--dens-gray-200, var(--dens-gray-200)) !important;
  color: var(--dens-navy, var(--dens-navy)) !important;
}

@media (max-width: 480px) {
  #hs-eu-cookie-confirmation {
    inset: auto 1rem 1rem 1rem !important;
    max-width: none !important;
  }

  #hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-button-group,
  #hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-buttons-area {
    justify-content: stretch !important;
  }

  #hs-eu-cookie-confirmation #hs-eu-confirmation-button,
  #hs-eu-cookie-confirmation #hs-eu-decline-button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
}

/* High-specificity overrides for HubSpot's injected inline cookie CSS */
body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-en-cookie-confirmation-buttons-area,
body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-eu-cookie-confirmation-buttons-area {
  text-align: right !important;
}

body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-en-cookie-confirmation-buttons-area div#hs-eu-cookie-confirmation-button-group a#hs-eu-confirmation-button,
body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-eu-cookie-confirmation-buttons-area div#hs-eu-cookie-confirmation-button-group a#hs-eu-confirmation-button,
body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-confirmation-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 136px !important;
  height: 44px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 1.75rem !important;
  border: 0 !important;
  border-radius: 0.375rem !important;
  background: var(--dens-green, var(--dens-green)) !important;
  color: var(--dens-white, #fff) !important;
  font-family: var(--dens-font-body, Inter, sans-serif) !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-en-cookie-confirmation-buttons-area div#hs-eu-cookie-confirmation-button-group a#hs-eu-confirmation-button:hover,
body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-eu-cookie-confirmation-buttons-area div#hs-eu-cookie-confirmation-button-group a#hs-eu-confirmation-button:hover,
body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-confirmation-button:hover,
body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-confirmation-button:focus,
body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-confirmation-button:active {
  background: var(--dens-green-hover, var(--dens-green-hover)) !important;
  color: var(--dens-white, #fff) !important;
}

body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-eu-policy-wording::before {
  color: var(--dens-gray-500, #4a5568) !important;
  font-family: var(--dens-font-body, Inter, sans-serif) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

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

/* 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;
  }
}

/* ── Specificity overrides ────────────────────────────────────────────────
   theme-overrides.css sets a:hover { font-weight: 400 } via .
   These rules use !important to keep bold links bold on hover.
   Placed directly in main.css (not via include) to guarantee compilation.
   ──────────────────────────────────────────────────────────────────────── */

.card-link,
.card-link:hover,
.card-link:focus,
.card-link:active,
a.card-link,
a.card-link:hover,
a.card-link:focus,
a.card-link:active,
a:hover .card-link,
a:focus .card-link,
a:active .card-link {
  font-weight: 700 !important;
}

/* Cookie banner critical overrides (direct in main.css to bypass include cache) */
body div#hs-eu-cookie-confirmation {
  position: fixed !important;
  inset: auto auto 1.5rem 1.5rem !important;
  width: auto !important;
  max-width: 400px !important;
  background: var(--dens-off-white, var(--dens-off-white)) !important;
  border: 1px solid var(--dens-gray-200, var(--dens-gray-200)) !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 8px 22px rgba(0, 24, 64, 0.12), 0 1px 4px rgba(0, 24, 64, 0.06) !important;
  padding: 1.1rem 1.25rem !important;
  text-shadow: none !important;
}

body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner {
  padding: 0 !important;
}

body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-eu-policy-wording {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  margin: 0 0 1rem !important;
}

body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-eu-policy-wording::before {
  content: "We use cookies to enhance your experience, analyze site traffic and deliver personalized content.";
  display: block !important;
  color: var(--dens-gray-500, #4a5568) !important;
  font-family: var(--dens-font-body, Inter, sans-serif) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-eu-policy-wording p,
body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-eu-policy-wording a,
body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-cookie-policy-link {
  display: none !important;
}

body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-en-cookie-confirmation-buttons-area,
body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-eu-cookie-confirmation-buttons-area {
  text-align: right !important;
}

body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-en-cookie-confirmation-buttons-area div#hs-eu-cookie-confirmation-button-group a#hs-eu-confirmation-button,
body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner div#hs-eu-cookie-confirmation-buttons-area div#hs-eu-cookie-confirmation-button-group a#hs-eu-confirmation-button,
body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-confirmation-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 136px !important;
  height: 44px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 1.75rem !important;
  border: 0 !important;
  border-radius: 0.375rem !important;
  background: var(--dens-green, var(--dens-green)) !important;
  color: var(--dens-white, #fff) !important;
  font-family: var(--dens-font-body, Inter, sans-serif) !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-confirmation-button:hover,
body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-confirmation-button:focus,
body div#hs-eu-cookie-confirmation div#hs-eu-cookie-confirmation-inner a#hs-eu-confirmation-button:active {
  background: var(--dens-green-hover, var(--dens-green-hover)) !important;
  color: var(--dens-white, #fff) !important;
}