*, *:before, *:after {
  box-sizing: border-box;
}

/* Keeps focused elements and anchor targets clear of the sticky header
   (WCAG 2.4.11). */
html {
  scroll-padding-top: var(--sticky-offset, 7rem);
}

:where(button) {
  color: currentColor;
}

p {
  margin-top: 0;
  margin-bottom: 0;
}

blockquote {
  margin: 0;
}

figure {
  margin: 0;
}

/* Global focus styles */
/* Default outline transition uses :where for 0 specificity — it should always be overwritten if a transition style is specified. */
:where(a, button, input, select, textarea, [tabindex], [contenteditable], [controls], embed, object, svg[focusable], details, summary) {
  /* Default outline styling allows for transitioning of outline styles. */
  outline: 0px solid transparent;
  outline-offset: var(--focus-ring-offset, 2px);
  transition: outline-width 100ms linear;
}
@media (forced-colors: active) {
:where(a, button, input, select, textarea, [tabindex], [contenteditable], [controls], embed, object, svg[focusable], details, summary) {
    outline: none
}  

    :where(a, button, input, select, textarea, [tabindex], [contenteditable], [controls], embed, object, svg[focusable], details, summary):focus {
      outline: 2px solid transparent;
    }
  }
:where(a, button, input, select, textarea, [tabindex], [contenteditable], [controls], embed, object, svg[focusable], details, summary):focus:not(:focus-visible) {
    outline-color: transparent;
  }
:where(a, button, input, select, textarea, [tabindex], [contenteditable], [controls], embed, object, svg[focusable], details, summary):focus-visible {
    /* Box-shadow provides additional contrast on backgrounds that may be too similar to the outline color. */
    box-shadow: 0 0 0 var(--focus-ring-width, 2px) var(--focus-ring-halo-color, rgb(var(--brand-color-white)));
    outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, rgb(var(--brand-color-blue)));
  }

/* Adding this to the reset to keep its priority very low. */
.no-list {
  list-style-type: none;
  padding-left: 0;
}
.no-list ul,
  .no-list li {
    margin: 0;
  }

button.no-button {
  appearance: none;
  background: none;
  border: none;
  color: currentColor;
}

/*! 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 {
  /* Honor the browser's font-size setting (16px by default). Changing this
     cascades to every rem/em on the page, so leave it at 100% unless there
     is a specific reason to override. */
  font-size: 100%;
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

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

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

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

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

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

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

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

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

abbr[title] {
  border-bottom: none; /* 1 */
  -webkit-text-decoration: underline;
  text-decoration: underline; /* 2 */
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          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;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

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

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 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.
 */
/* Disabled for custom focus ring styles, found in _reset.css */
/* 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;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

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

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * 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, IE 10+, and Firefox.
 */

details {
  display: block;
}

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

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/* HubSpot Jank Fixes */

  
[data-global-resource-path] {
  display: contents;
}

.is-in-editor [data-global-resource-path] {
    display: block;
}

/* Fix for Image module border radius styling: HubSpot puts the radius on
   the module wrapper, so pass it down every layer to the image, including
   the link HubSpot adds around a linked image. */
.widget-type-linked_image > span,
.widget-type-linked_image .hs_cos_wrapper_type_linked_image,
.widget-type-linked_image .hs_cos_wrapper_type_linked_image > a,
.widget-type-linked_image .hs-image-widget {
    border-radius: inherit;
}
/* Breakpoints (media queries can't read custom properties, so the scale is
   documented here and used verbatim everywhere, including module CSS):
     480  small phone / large phone      (max-width: 479px | min-width: 480px)
     640  large phone / small tablet     (max-width: 639px | min-width: 640px)
     768  mobile / desktop (main switch) (max-width: 767px | min-width: 768px)
     1024 tablet / laptop                (max-width: 1023px | min-width: 1024px)
     1280 laptop / desktop               (max-width: 1279px | min-width: 1280px)
   Plus 1600 for very wide screens. Component-relative sizing uses container
   queries instead. */

/* Responsive Grid */

.row-fluid {
  width: 100%;
  *zoom: 1;
}

.row-fluid:before, .row-fluid:after {
  display: table;
  content: "";
}

.row-fluid:after {
  clear: both;
}

.row-fluid [class*="span"] {
  display: block;
  float: left;
  width: 100%;
  min-height: 1px;
  margin-left: 2.127659574%;
  *margin-left: 2.0744680846382977%;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.row-fluid [class*="span"]:first-child {
  margin-left: 0;
}

.row-fluid .span12 {
  width: 99.99999998999999%;
  *width: 99.94680850063828%;
}

.row-fluid .span11 {
  width: 91.489361693%;
  *width: 91.4361702036383%;
}

.row-fluid .span10 {
  width: 82.97872339599999%;
  *width: 82.92553190663828%;
}

.row-fluid .span9 {
  width: 74.468085099%;
  *width: 74.4148936096383%;
}

.row-fluid .span8 {
  width: 65.95744680199999%;
  *width: 65.90425531263828%;
}

.row-fluid .span7 {
  width: 57.446808505%;
  *width: 57.3936170156383%;
}

.row-fluid .span6 {
  width: 48.93617020799999%;
  *width: 48.88297871863829%;
}

.row-fluid .span5 {
  width: 40.425531911%;
  *width: 40.3723404216383%;
}

.row-fluid .span4 {
  width: 31.914893614%;
  *width: 31.8617021246383%;
}

.row-fluid .span3 {
  width: 23.404255317%;
  *width: 23.3510638276383%;
}

.row-fluid .span2 {
  width: 14.89361702%;
  *width: 14.8404255306383%;
}

.row-fluid .span1 {
  width: 6.382978723%;
  *width: 6.329787233638298%;
}

.container-fluid {
  *zoom: 1;
}

.container-fluid:before, .container-fluid:after {
  display: table;
  content: "";
}

.container-fluid:after {
  clear: both;
}

@media (max-width: 767px) {
  .row-fluid {
    width: 100%;
  }

  .row-fluid [class*="span"] {
    display: block;
    float: none;
    width: auto;
    margin-left: 0;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .row-fluid {
    width: 100%;
    *zoom: 1;
  }

  .row-fluid:before, .row-fluid:after {
    display: table;
    content: "";
  }

  .row-fluid:after {
    clear: both;
  }

  .row-fluid [class*="span"] {
    display: block;
    float: left;
    width: 100%;
    min-height: 1px;
    margin-left: 2.762430939%;
    *margin-left: 2.709239449638298%;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

  .row-fluid [class*="span"]:first-child {
    margin-left: 0;
  }

  .row-fluid .span12 {
    width: 99.999999993%;
    *width: 99.9468085036383%;
  }

  .row-fluid .span11 {
    width: 91.436464082%;
    *width: 91.38327259263829%;
  }

  .row-fluid .span10 {
    width: 82.87292817100001%;
    *width: 82.8197366816383%;
  }

  .row-fluid .span9 {
    width: 74.30939226%;
    *width: 74.25620077063829%;
  }

  .row-fluid .span8 {
    width: 65.74585634900001%;
    *width: 65.6926648596383%;
  }

  .row-fluid .span7 {
    width: 57.182320438000005%;
    *width: 57.129128948638304%;
  }

  .row-fluid .span6 {
    width: 48.618784527%;
    *width: 48.5655930376383%;
  }

  .row-fluid .span5 {
    width: 40.055248616%;
    *width: 40.0020571266383%;
  }

  .row-fluid .span4 {
    width: 31.491712705%;
    *width: 31.4385212156383%;
  }

  .row-fluid .span3 {
    width: 22.928176794%;
    *width: 22.874985304638297%;
  }

  .row-fluid .span2 {
    width: 14.364640883%;
    *width: 14.311449393638298%;
  }

  .row-fluid .span1 {
    width: 5.801104972%;
    *width: 5.747913482638298%;
  }
}

@media (min-width: 1280px) {
  .row-fluid {
    width: 100%;
    *zoom: 1;
  }

  .row-fluid:before, .row-fluid:after {
    display: table;
    content: "";
  }

  .row-fluid:after {
    clear: both;
  }

  .row-fluid [class*="span"] {
    display: block;
    float: left;
    width: 100%;
    min-height: 1px;
    margin-left: 2.564102564%;
    *margin-left: 2.510911074638298%;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

  .row-fluid [class*="span"]:first-child {
    margin-left: 0;
  }

  .row-fluid .span12 {
    width: 100%;
    *width: 99.94680851063829%;
  }

  .row-fluid .span11 {
    width: 91.45299145300001%;
    *width: 91.3997999636383%;
  }

  .row-fluid .span10 {
    width: 82.905982906%;
    *width: 82.8527914166383%;
  }

  .row-fluid .span9 {
    width: 74.358974359%;
    *width: 74.30578286963829%;
  }

  .row-fluid .span8 {
    width: 65.81196581200001%;
    *width: 65.7587743226383%;
  }

  .row-fluid .span7 {
    width: 57.264957265%;
    *width: 57.2117657756383%;
  }

  .row-fluid .span6 {
    width: 48.717948718%;
    *width: 48.6647572286383%;
  }

  .row-fluid .span5 {
    width: 40.170940171000005%;
    *width: 40.117748681638304%;
  }

  .row-fluid .span4 {
    width: 31.623931624%;
    *width: 31.5707401346383%;
  }

  .row-fluid .span3 {
    width: 23.076923077%;
    *width: 23.0237315876383%;
  }

  .row-fluid .span2 {
    width: 14.529914530000001%;
    *width: 14.4767230406383%;
  }

  .row-fluid .span1 {
    width: 5.982905983%;
    *width: 5.929714493638298%;
  }
}

/* Clearfix */

.clearfix {
  *zoom: 1;
}

.clearfix:before, .clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

/* Visibilty Classes */

.hide {
  display: none;
}

.show {
  display: block;
}

.invisible {
  visibility: hidden;
}

.hidden {
  display: none;
  visibility: hidden;
}

/* Responsive Visibilty Classes */

.visible-phone {
  display: none !important;
}

.visible-tablet {
  display: none !important;
}

.hidden-desktop {
  display: none !important;
}

@media (max-width: 767px) {
  .visible-phone {
    display: inherit !important;
  }

  .hidden-phone {
    display: none !important;
  }

  .hidden-desktop {
    display: inherit !important;
  }

  .visible-desktop {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .visible-tablet {
    display: inherit !important;
  }

  .hidden-tablet {
    display: none !important;
  }

  .hidden-desktop {
    display: inherit !important;
  }

  .visible-desktop {
    display: none !important ;
  }
}

.content-wrapper {
  margin: 0 auto;
  max-width: var(--site-width);
  padding-inline: 20px;
}

@media (max-width: 767px) {
  .content-wrapper {
    padding-inline: 1rem;
  }
}

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

.content-wrapper--narrow {
  padding: 0 20px;
}

.dnd-section > .row-fluid {
  margin: 0 auto;
  max-width: var(--site-width);
}

.dnd-section .dnd-column {
  padding: 0 20px;
}

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

body {
  color: rgb(var(--brand-color-deep-blue));
  font-family: var(--font-base, "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
  /* 16px on phones -> 18px on desktop; see the fluid scale in theme-overrides.css. */
  font-size: var(--font-size-body, 1rem);
  line-height: var(--line-height-body, 1.5);
  overflow-wrap: break-word;
}

  @supports (word-break: auto-phrase) {body {
    word-break: auto-phrase
}
  }

/* Text highlight. A darker green (#AFCD78) at 60% opacity: over the cream
   and white backgrounds it blends to almost exactly the brand green
   (#CEDFA7), and over surfaces that are already brand green it stacks into
   a visibly deeper band, so selections always show. Dark text keeps
   ~13:1 contrast. */
::selection {
  background-color: rgba(var(--brand-color-green-strong), 0.6);
  color: rgb(var(--brand-color-deep-blue));
}

/* Same translucent highlight on dark backgrounds, but the selected text
   stays white: over dark colors the green blends darker, where white text
   reads better (~4.6:1) than dark text would. */
.footer ::selection,
.nav-menu--mobile ::selection,
.nav-services ::selection,
.announcement-bar ::selection,
.on-dark ::selection {
  color: rgb(var(--brand-color-white));
}

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

/* Paragraphs */

/* text-wrap: pretty focuses on the last few lines so a single short word
   doesn't dangle on its own ("orphan"), without the full-block cost of
   text-wrap: balance. Applied to paragraphs and list items; headings get
   balance below. */
@supports (text-wrap: pretty) {
p,
li {
    text-wrap: pretty
}
  }
@supports (hanging-punctuation: first allow-end last) {
p,
li {
    hanging-punctuation: first allow-end last
}
  }

/* Spacing: one blank line (1em) between paragraphs. */

p + p {
    margin-top: 1em;
  }

p + ul,
  p + ol,
  p + li {
    margin-top: 1em;
  }

/* Nested lists (sub-bullets) step down to a lighter marker so a sub-point
   reads as subordinate to the point above it. The text itself is NOT shrunk —
   sub-bullets stay at body size so they clear the 16px minimum. Item-to-item
   spacing is already handled by the `ul li` rule in theme-overrides.css. */
ul ul {
  list-style-type: circle;
}

ul ul ul {
  list-style-type: square;
}

/* Indent is width taken straight out of the text column, and it compounds with
   every level. Top-level lists keep the theme's 1.4rem; each nested level gets
   a tighter step, which is enough to read as indented without starving the
   sub-point of measure. */
:is(ul, ol) :is(ul, ol) {
  margin-block: 0.4em 0.6em;
  padding-left: 1.1rem;
}

@media (max-width: 767px) {
  /* The real squeeze is on phones: at full indent a two-level list hands ~45px
     of an already narrow measure to empty gutter, so sub-points end up in a
     very thin column. Tighten both levels — markers still line up clearly. */
  .hs_cos_wrapper_type_rich_text :is(ul, ol), .blog-post :is(ul, ol) {
    padding-left: 1.15rem;
  }

  :is(ul, ol) :is(ul, ol) {
    padding-left: 0.9rem;
  }

  /* Reclaim vertical space too — nested items don't need the full 0.5em. */
  :is(ul, ol) :is(ul, ol) li {
    margin-block: 0.3em;
  }
}

/* Headings sit closer to the text they introduce than to what came before:
   the space above (1.75rem+) is at least 1.5x the space below (0.5–0.875rem,
   set per heading level below). Covers lists, quotes and figures too, not
   just paragraphs. */
:is(p, ul, ol, blockquote, figure, table) + :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 1.75rem;
}

/* Measure: long-form text reads best at 45–90 characters per line (target
   ~66). Rich text and blog posts cap paragraphs, lists and quotes at 60ch,
   which measures ~67 real characters in Public Sans ("ch" is the width of "0",
   wider than an average letter), so full-width sections don't run to 130+
   characters. Centered text keeps its centering within that width.
   Only unclassed elements (plain prose): anything with a class is a layout
   component (a grid, a header row) and sets its own width. */
.hs_cos_wrapper_type_rich_text :is(p, ul, ol, blockquote):not([class]), .blog-post :is(p, ul, ol, blockquote):not([class]) {
  max-width: 60ch;
}

.hs_cos_wrapper_type_rich_text :is(p, ul, ol, blockquote):is([style*="text-align: center"], [style*="text-align:center"]), .hs_cos_wrapper_type_rich_text [style*="text-align: center"] > :is(p, ul, ol, blockquote), .text-center :is(p, ul, ol, blockquote) {
  margin-inline: auto;
}

strong {
  font-weight: 600;
}

/* Anchors */
/* One link system, driven by the --link-* tokens in theme-overrides.css:
   the underline is a translucent version of the text color at rest and
   turns solid on hover/focus. Colors flip to white inside .on-dark.
   Variants (see _links.css): .link-cta (standalone, with arrow),
   .link-title (cards and heading links, thicker underline) and .link-button
   (a <button> that reads as an inline link). */
:where(a, .link-button) {
  color: var(--link-color, rgb(var(--brand-color-blue)));
  cursor: pointer;
  font-weight: 600;
  text-decoration-color: var(--link-underline-rest);
  text-decoration-line: underline;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  text-decoration-thickness: var(--link-underline-thickness);
  text-underline-offset: var(--link-underline-offset);
  transition:
    var(--link-transition),
    background-color var(--duration-fast) linear,
    box-shadow var(--duration-fast) linear;
}

:where(a, .link-button):is(:hover, :focus-visible, :active) {
  text-decoration-color: var(--link-underline-hover);
}

/* Hover/pressed colors only for class-less links (body copy, rich text);
   styled links (nav, cards, buttons) keep their own text color. */
:where(a:not([class]), .link-button):hover {
  color: var(--link-color-hover, currentColor);
}

:where(a:not([class]), .link-button):active {
  color: var(--link-color-active, currentColor);
}

/* Focus: highlighter box with a blue ring, drawn with box-shadow so the text
   doesn't shift. Limited to class-less links (body copy, rich text) so nav
   items, cards and logos keep their own focus treatment. */
:is(a:not([class]), .link-button):focus-visible {
  background-color: var(--link-focus-background);
  box-shadow: 0 0 0 4px var(--link-focus-background), 0 0 0 6px var(--link-focus-ring);
  color: var(--link-focus-color);
  outline: 2px solid transparent;
  text-decoration-color: transparent;
}

a.button:disabled {
  pointer-events: none;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block: 0;
}

@supports (text-wrap: balance) {

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    text-wrap: balance
}
  }

@supports (hanging-punctuation: first allow-end last) {

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    hanging-punctuation: first allow-end last
}
  }

h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4 {
  color: rgb(var(--brand-color-black));
  font-family: var(--font-header);
  font-weight: 700;
  letter-spacing: var(--tracking-heading, -0.01em);
}

h1,
.h1 {
  font-size: var(--font-size-h1, 4rem);
  letter-spacing: var(--tracking-h1, -0.02em);
  line-height: var(--line-height-h1, 1.1);
}

h1 + p, .h1 + p {
    margin-top: 0.875rem;
  }

h1 + h2, .h1 + h2 {
    margin-top: 0.875rem;
  }

h2,
.h2 {
  font-size: var(--font-size-h2, 2.5rem);
  letter-spacing: var(--tracking-h2, -0.015em);
  line-height: var(--line-height-h2, 1.15);
}

h2 + p, .h2 + p {
    margin-top: 0.75rem;
  }

h2 + h3, .h2 + h3 {
    margin-top: 0.75rem;
  }

h3,
.h3 {
  font-size: var(--font-size-h3, 1.75rem);
  line-height: var(--line-height-h3, 1.2);
}

h3 + p, .h3 + p {
    margin-top: 0.5rem;
  }

h3 + h4, .h3 + h4 {
    margin-top: 0.75rem;
  }

h4,
.h4 {
  font-size: var(--font-size-h4, 1.5rem);
  line-height: var(--line-height-h4, 1.25);
}

h4 + p, .h4 + p {
    margin-top: 0.5rem;
  }

h5,
.h5 {
  font-size: var(--font-size-h5, 1.25rem);
  line-height: var(--line-height-h5, 1.3);
}

h5 + p, .h5 + p {
    margin-top: 0.5rem;
  }

h6,
.h6 {
  font-size: var(--font-size-h6, 1.125rem);
  line-height: var(--line-height-h6, 1.4);
}

h6 + p, .h6 + p {
    margin-top: 0.5rem;
  }

/* Lists */

ul.no-list {
  list-style: none;
}

/* Code Blocks */

code {
  vertical-align: bottom;
}

/* Typographic quotes — sets curly (smart) quotes for <q> elements and
   the CSS open-quote / close-quote keywords. Level 1: double curly.
   Level 2 (nested): single curly. */
:root {
  quotes: "\201C" "\201D" "\2018" "\2019";
}

q {
  font-style: italic;
}

q::before { content: open-quote; }
q::after  { content: close-quote; }

/* Blockquotes */

blockquote {
  font-size: var(--font-size-lead, 1.5rem);
  line-height: 1.4;
}

blockquote + p,
  blockquote + figcaption {
    margin-top: 1.5rem;
  }

/* Figures */
figcaption {
  color: var(--figcaption-color, rgba(var(--brand-color-black), 0.75));
  font-size: var(--text-sm--fluid, 0.875rem);
  /* Caption measure is tighter than body (~45 CPL in Public Sans) so a
     short caption line reads as a caption, not a stub paragraph. */
  max-width: 50ch;
}
figcaption strong {
    color: var(--figcaption-color-strong, rgba(var(--brand-color-black), 1));
  }
figcaption.has-profile-image {
    align-items: center;
    display: inline-flex;
    /* flex-wrap: wrap; */
    gap: 1rem;
  }
figcaption.has-profile-image > img {
      aspect-ratio: 1 / 1;
      border-radius: 9999px;
      height: auto;
      object-fit: cover;
      width: 3.5rem;
    }
figcaption.has-profile-image > p {
      display: inline-block;
      min-width: 16ch;
      text-align: left;
    }


/* Horizontal Rules */

hr {
  border: 0 none;
  border-bottom-style: solid;
  border-bottom-width: 2px;
}

/* Subscripts and Superscripts */

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

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Addresses */
address {
  font-style: normal;
}

/* Style Classes */
.leadin {
  font-size: var(--font-size-lead, 1.5rem);
  line-height: 1.4;
  opacity: 0.85;
}

/* Below 1 line-height clips ascenders/descenders on wrapped lines, so
   display text stays just above 1. */
.heading-xl,
.heading-featured {
  font-size: var(--font-size-display, 5rem);
  letter-spacing: var(--tracking-display, -0.025em);
  line-height: var(--line-height-display, 1.05);
}

.heading-small {
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
}

/* Eyebrows use the serif italic so they read as a voice above the headline,
   not a second, smaller headline. */
.heading-eyebrow {
  font-family: var(--font-eyebrow);
  font-size: var(--text-base--fluid, 1rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
}

.heading-small + h1,
  .heading-small + h2,
  .heading-small + h3,
  .heading-small + h4,
  .heading-small + p,
  .heading-eyebrow + h1,
  .heading-eyebrow + h2,
  .heading-eyebrow + h3,
  .heading-eyebrow + h4,
  .heading-eyebrow + p {
    margin-top: 0.5rem;
  }

/* Fallback Styles for Deprecated Elements */
em:is(.highlight-teal, .highlight-blue, .highlight-orange, .highlight-aqua), :is(.small-guy, .case-guy, .big-guy) em {
  font-style: normal;
}

/* ************************************************************************* */
/* ***************                  Chips                 ****************** */
/* ************************************************************************* */

/* Every tag in the theme. Put .chip on the <a> itself so the whole pill is
   the target. Light by default and in light cards, dark in .on-dark sections
   and dark cards.

   .chip                     The pill.
   .chip-list                Wrapping row of chips (resets list styles).
   .chip-list--single-line   One row; with data-chip-fit, main.js swaps the
                             chips that don't fit for the data-chip-more "…". */

.card {
  --chip-color: var(--chip-color-on-light);
  --chip-bg: var(--chip-bg-on-light);
  --chip-border-hover: var(--chip-border-hover-on-light);
}

.on-dark,
.card--scheme-dark {
  --chip-color: var(--chip-color-on-dark);
  --chip-bg: var(--chip-bg-on-dark);
  --chip-border-hover: var(--chip-border-hover-on-dark);
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.chip-list > li {
    margin: 0;
  }

.chip-list--single-line {
    flex-wrap: nowrap;
    overflow: hidden;
    /* Keeps the visually hidden (.sr-only) overflow chips inside the row. */
    position: relative;
  }

.chip-list--single-line > li {
      flex: none;
    }

.chip {
  align-items: center;
  background-color: var(--chip-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--chip-color);
  display: inline-flex;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1;
  padding: 0.125rem 0.375rem;
  -webkit-text-decoration: none;
  text-decoration: none;
  transition: border-color var(--duration-fast) linear;
  white-space: nowrap;
}

a.chip {
  cursor: pointer;
  /* 24px minimum target (WCAG 2.5.8). */
  min-height: 1.5rem;
}

a.chip:is(:hover, :focus-visible) {
    border-color: var(--chip-border-hover);
    -webkit-text-decoration: none;
    text-decoration: none;
  }


/* ************************************************************************* */
/* ***************                 Buttons                ****************** */
/* ************************************************************************* */

/* ===== SIZES ===== */
/* Each size is defined once here and reused by the size modifiers below and
   by the mobile size classes (.buttons-m-*), so the two can never drift.
   Heights 24/32/42px; padding is 1px under the design to allow for the border. */

/* ===== BASE ===== */
/* Every button-looking control shares this one rule: theme buttons
   (.button, from the generate_button macros) and HubSpot form buttons
   (.hs-button, submit/button inputs), so forms match the rest of the site.
   Defaults are the solid orange Medium button; variants below only swap
   the --button-* custom properties. */
button,
input:is([type="submit"], [type="button"], [type="reset"]) {
  cursor: pointer;
}

.button,
.hs-button,
form input:is([type="submit"], [type="button"], [type="reset"]) {
  align-items: center;
  appearance: none;
  background-color: var(--button-background-color, var(--button-action-background));
  border: 1px solid var(--button-border-color, var(--button-action-border));
  border-radius: var(--button-border-radius, var(--radius-default));
  /* Soft inner glow along the top edge. */
  box-shadow: inset 0 0.8px 10.5px var(--button-highlight, var(--button-action-highlight));
  color: var(--button-label-color, var(--button-action-label));
  cursor: pointer;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  font-family: inherit;
  font-size: var(--button-label-size, 1.125rem);
  font-weight: var(--button-label-font-weight, 600);
  gap: var(--button-gap, 4px);
  isolation: isolate;
  justify-content: center;
  letter-spacing: -0.01em;
  line-height: 1;
  min-height: var(--button-height, 32px);
  padding-block: var(--button-padding-block, 6px);
  padding-inline: var(--button-padding-inline, 11px);
  position: relative;
  text-align: center;
  -webkit-text-decoration: none;
  text-decoration: none;
  transition:
    background-color var(--duration-fast) linear,
    border-color var(--duration-fast) linear,
    box-shadow var(--duration-fast) linear,
    color var(--duration-fast) linear,
    transform var(--duration-instant) var(--ease-standard);
  width: fit-content;
}

/* [data-hover-group]: hovering (or focusing into) a whole clickable
     block, e.g. a featured card, shows its buttons' hover state too. */

.button:hover,
  .button:focus-visible,
  [data-hover-group]:is(:hover, :focus-within) .button,
  .hs-button:hover,
  .hs-button:focus-visible,
  [data-hover-group]:is(:hover, :focus-within) .hs-button,
  form input:is([type="submit"], [type="button"], [type="reset"]):hover,
  form input:is([type="submit"], [type="button"], [type="reset"]):focus-visible,
  [data-hover-group]:is(:hover, :focus-within) form input:is([type="submit"], [type="button"], [type="reset"]) {
    background-color: var(--button-background-color-active, var(--button-action-background-hover));
    border-color: var(--button-border-color-active, var(--button-action-border-hover));
    box-shadow: inset 0 0.8px 10.5px var(--button-highlight-active, var(--button-action-highlight-hover));
    color: var(--button-label-color-active, var(--button-label-color, var(--button-action-label-hover)));
    -webkit-text-decoration: none;
    text-decoration: none;
  }

/* Tactile press feedback: a subtle scale-down on tap/click. */

.button:active, .hs-button:active, form input:is([type="submit"], [type="button"], [type="reset"]):active {
    transform: scale(0.97);
  }

.button:disabled, .hs-button:disabled, form input:is([type="submit"], [type="button"], [type="reset"]):disabled {
    cursor: not-allowed;
  }

/* Reduced motion: keep the press acknowledgement but drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .button:active,
  .hs-button:active,
  form input:is([type="submit"], [type="button"], [type="reset"]):active {
    transform: none;
  }
}

/* ===== BUTTON CLASSES ===== */
/* Sizes, colors and the inner highlight follow the Figma "Buttons and Links" frame. */
/* === Elements */
.button span,
  .button__label {
    color: currentColor;
    -webkit-text-decoration: none;
    text-decoration: none;
    transition: color var(--duration-fast) linear;
  }
.button svg,
  .button__icon {
    aspect-ratio: 1 / 1;
    color: currentColor;
    order: 2;
    height: 1.25em;
    transition:
      color var(--duration-fast) linear,
      opacity var(--duration-fast) linear,
      transform var(--duration-fast) var(--ease-standard);
    width: auto;
  }
/* Icons from the button_icon macro carry their exact Figma size inline.
     They sit at half strength and come up to full on hover. */
.button .button-icon {
    flex-shrink: 0;
    opacity: 0.5;
  }
.button:is(:hover, :focus-visible) .button-icon, [data-hover-group]:is(:hover, :focus-within) .button .button-icon {
    opacity: 1;
  }
/* Text-link buttons: the arrow is sized to the label and fully opaque,
     identical to .link-cta__icon, so every text link's arrow matches. */
.button .button-icon--fluid {
    aspect-ratio: auto;
    height: 0.6em;
    margin: 0;
    opacity: 1;
    width: auto;
  }
.button--icon-arrow:is(:hover, :focus-visible) .button-icon, [data-hover-group]:is(:hover, :focus-within) .button--icon-arrow .button-icon {
    transform: translateX(var(--arrow-nudge));
  }
/* The category and play icons lead the label. */
.button--icon-category .button-icon,
  .button--icon-play .button-icon {
    order: -1;
  }
/* The play icon is a solid shape (not a thin line), so it stays at full
     strength for contrast. */
.button--icon-play .button-icon {
    opacity: 1;
  }
/* === Functional Variants */
.button--no-wrap {
    flex-wrap: nowrap;
  }
.button--no-wrap span {
      white-space: nowrap;
    }
/* === Button Styles */
/* These operate as intermediaries to adapt the more generalized color classes. */
.button--solid {
    --button-background-color: var(--button-primary-color);
    --button-background-color-active: var(--button-primary-color-active);
    --button-border-color: var(--button-primary-border, var(--button-primary-color));
    --button-border-color-active: var(--button-primary-border-active, var(--button-primary-color-active));
    --button-highlight: var(--button-primary-highlight, transparent);
    --button-highlight-active: var(--button-primary-highlight-active, transparent);
    --button-label-color: var(--button-contrast-color);
    --button-label-color-active: var(--button-contrast-color-active);
  }
.button--outline {
    --button-highlight: transparent;
    --button-highlight-active: transparent;
    --button-background-color: transparent;
    --button-background-color-active: var(--button-background-color-active--outline, transparent);
    --button-border-color: var(--button-primary-color);
    --button-border-color-active: var(--button-primary-color-active);
    --button-label-color: var(--button-primary-color);
    --button-label-color-active: var(--button-primary-color-active);
  }
.button--outline:hover,
    .button--outline:focus,
    .button--outline:focus-visible {
      background-color: var(--button-background-color-active--outline, transparent);
      box-shadow: none;
    }
/* === Button Sizes (xs/small and xl/large are aliases for older content) */
.button--xs,
  .button--sm,
  .button--small {
  --button-gap: 6px;
  --button-height: 24px;
  --button-label-size: 14px;
  --button-label-font-weight: 600;
  --button-padding-block: 3px;
  --button-padding-inline: 7px;
  }
.button--md {
  --button-gap: 4px;
  --button-height: 32px;
  --button-label-size: 18px;
  --button-label-font-weight: 600;
  --button-padding-block: 6px;
  --button-padding-inline: 11px;
  }
.button--lg,
  .button--xl,
  .button--large {
  --button-gap: 6px;
  --button-height: 42px;
  --button-label-size: 20px;
  --button-label-font-weight: 600;
  --button-padding-block: 10px;
  --button-padding-inline: 17px;
  }
/* === Text link style */
/* Underlined label, no box. Color classes below set --button-text-color*. */
.button--text {
    --button-background-color: transparent;
    --button-background-color-active: transparent;
    --button-border-color: transparent;
    --button-border-color-active: transparent;
    --button-highlight: transparent;
    --button-highlight-active: transparent;
    --button-label-color: var(--button-text-color, var(--button-text-dark));
    --button-label-color-active: var(--button-text-color-active, var(--button-text-dark-hover));
    --button-gap: 4px;

    border-radius: 0;
    border-width: 0;
    min-height: 0;
    padding: 0;
    text-align: left;
  }
/* Same underline as every other link (--link-* tokens). */
.button--text .button__label {
      text-decoration-color: var(--link-underline-rest);
      text-decoration-line: underline;
      -webkit-text-decoration-skip: ink;
              text-decoration-skip-ink: auto;
      text-decoration-thickness: var(--link-underline-thickness);
      text-underline-offset: var(--link-underline-offset);
      transition: var(--link-transition);
    }
.button--text:is(:hover, :focus-visible) .button__label {
      text-decoration-color: var(--link-underline-hover);
    }
.button--text:active {
      color: var(--button-text-color-pressed, var(--button-label-color-active));
    }
/* Same focus treatment as plain links. */
.button--text:focus-visible {
      background-color: var(--link-focus-background);
      box-shadow: 0 0 0 4px var(--link-focus-background), 0 0 0 6px var(--link-focus-ring);
      color: var(--link-focus-color);
      outline: 2px solid transparent;
    }
.button--text:focus-visible .button__label {
        text-decoration-color: transparent;
      }
/* Icon buttons space the icon a little further from the label, except the
     smaller category buttons. */
.button--text:not(.button--icon-arrow) {
    --button-gap: 6px;
  }
/* Same label-to-arrow gap as .link-cta. */
.button--text.button--icon-arrow {
    --button-gap: 0.25em;
  }
.button--text.button--icon-category:not(.button--lg, .button--xl, .button--large) {
    --button-gap: 4px;
  }
/* === Button Colors */
.button--orange {
    --button-primary-color: var(--button-action-background);
    --button-primary-color-active: var(--button-action-background-hover);
    --button-primary-border: var(--button-action-border);
    --button-primary-border-active: var(--button-action-border-hover);
    --button-primary-highlight: var(--button-action-highlight);
    --button-primary-highlight-active: var(--button-action-highlight-hover);
    --button-contrast-color: var(--button-action-label);
    --button-contrast-color-active: var(--button-action-label-hover);

    /* Text-link variant uses the AA-safe darker orange. */
    --button-text-color: rgb(var(--brand-color-orange-text));
    --button-text-color-active: rgb(var(--brand-color-orange-text));

    /* Outline-variant-specific styling */
    --button-background-color-active--outline: var(--button-action-surface-hover);
  }
.button--black {
    --button-primary-color: var(--button-dark-background);
    --button-primary-color-active: var(--button-dark-background-hover);
    --button-primary-border: var(--button-dark-border);
    --button-primary-border-active: var(--button-dark-border-hover);
    --button-primary-highlight: var(--button-dark-highlight);
    --button-primary-highlight-active: var(--button-dark-highlight-hover);
    --button-contrast-color: var(--button-dark-label);
    --button-contrast-color-active: var(--button-dark-label-hover);

    --button-text-color: var(--button-text-dark);
    --button-text-color-active: var(--button-text-dark-hover);

    /* Outline-variant-specific styling */
    --button-background-color-active--outline: var(--button-dark-surface-hover);
  }
.button--white {
    --button-primary-color: var(--button-light-background);
    --button-primary-color-active: var(--button-light-background-hover);
    --button-contrast-color: var(--button-light-label);
    --button-contrast-color-active: var(--button-light-label-hover);

    --button-text-color: var(--link-color-on-dark);
    --button-text-color-active: var(--link-color-on-dark-hover);

    /* Outline-variant-specific styling */
    --button-background-color-active--outline: var(--button-light-surface-hover);
  }
.button--tan {
    --button-primary-color: var(--button-tan-background);
    --button-primary-color-active: var(--button-tan-background-hover);
    --button-primary-border: var(--button-tan-border);
    --button-primary-border-active: var(--button-tan-border-hover);
    --button-primary-highlight: var(--button-tan-highlight);
    --button-primary-highlight-active: var(--button-tan-highlight-hover);
    --button-contrast-color: var(--button-tan-label);
    --button-contrast-color-active: var(--button-tan-label-hover);

    --button-text-color: var(--button-text-dark);
    --button-text-color-active: var(--button-text-dark-hover);
  }
/* Blue is a text-link color; the solid fallback keeps it usable. */
.button--blue {
    --button-primary-color: var(--link-color);
    --button-primary-color-active: var(--link-color-hover);
    --button-contrast-color: rgb(var(--brand-color-white));
    --button-contrast-color-active: rgb(var(--brand-color-white));

    --button-text-color: var(--link-color);
    --button-text-color-active: var(--link-color-hover);
    --button-text-color-pressed: var(--link-color-active);
  }
/* === Button Positioning */
.button--left {
    display: flex;
    margin-inline: 0 auto;
  }
.button--center {
    display: flex;
    margin-inline: auto;
  }
.button--right {
    display: flex;
    margin-inline: auto 0;
  }
.button--full-width {
    display: flex;
    margin-inline: 0;
    width: 100%;
  }
/* === Compatibility */
/* Legacy classes for old button styles/modules */
/* For some reason "primary" was a black outline button? */
.button--primary,
  .button--simple {
    --button-highlight: transparent;
    --button-highlight-active: transparent;
    --button-background-color: transparent;
    --button-background-color-active: var(--button-dark-outline-surface-hover);
    --button-border-color: var(--button-dark-background);
    --button-border-color-active: var(--button-dark-background-hover);
    --button-label-color: var(--button-dark-background);
    --button-label-color-active: var(--button-dark-background-hover);

    transition: background-color 150ms linear, box-shadow 150ms linear, color 150ms linear, border-color 150ms linear, outline 150ms linear;
  }
.button--primary:hover,
    .button--primary:focus-visible,
    .button--simple:hover,
    .button--simple:focus-visible {
      box-shadow: inset 0 0 0 2px var(--button-border-color-active);
    }
/* White outline -> Orange outline*/
.button--secondary {
    --button-highlight: transparent;
    --button-highlight-active: transparent;
    --button-background-color: transparent;
    --button-background-color-active: transparent;
    --button-border-color: var(--button-light-background);
    --button-border-color-active: var(--button-action-background);
    --button-label-color: var(--button-light-background);
    --button-label-color-active: var(--button-action-background);

    transition: background-color 150ms linear, box-shadow 150ms linear, color 150ms linear, border-color 150ms linear, outline 150ms linear;
  }
.button--secondary:hover,
    .button--secondary:focus-visible {
      box-shadow: inset 0 0 0 2px var(--button-border-color-active);
    }
/* Standard, solid-orange button */
.button--tertiary {
    --button-background-color: var(--button-action-background);
    --button-background-color-active: var(--button-action-background-hover);
    --button-border-color: var(--button-action-border);
    --button-border-color-active: var(--button-action-border-hover);
    --button-label-color: var(--button-action-label);
    --button-label-color-active: var(--button-action-label-hover);
  }

/* Wraps the main button together with an optional secondary/tertiary
   button (see csm-button.module) so they sit inline as one group instead of
   each fighting over the alignment margins meant for a single button. */
.button-group {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.button-group--left {
    justify-content: flex-start;
  }
.button-group--center {
    justify-content: center;
  }
.button-group--right {
    justify-content: flex-end;
  }

/* Phone-only button size. Hero and CTA modules put buttons-m-{sm,md,lg} on
   their root (from the module's "Mobile button size" field). */
@media (max-width: 767px) {
  .buttons-m-sm .button {
  --button-gap: 6px;
  --button-height: 24px;
  --button-label-size: 14px;
  --button-label-font-weight: 600;
  --button-padding-block: 3px;
  --button-padding-inline: 7px;
  }

  .buttons-m-md .button {
  --button-gap: 4px;
  --button-height: 32px;
  --button-label-size: 18px;
  --button-label-font-weight: 600;
  --button-padding-block: 6px;
  --button-padding-inline: 11px;
  }

  .buttons-m-lg .button {
  --button-gap: 6px;
  --button-height: 42px;
  --button-label-size: 20px;
  --button-label-font-weight: 600;
  --button-padding-block: 10px;
  --button-padding-inline: 17px;
  }
}

/* ===== COUNT ===== */
/* A number after a button label, e.g. "See open positions (1)" (added by
   initRoleCount in main.js). Slightly lighter than the label; at 75% it still
   has at least 5:1 contrast on the orange button and more on every other
   button color (WCAG AA needs 4.5:1), so don't go lighter. */
.button__count {
  opacity: 0.75;
}

/* ===== WHITE MODE ===== */
/* Add the "on-dark" class to a section (Section > Advanced > CSS class in the
   HubSpot editor) and links plus dark/blue text-link buttons inside it switch
   to white. Solid buttons keep their color; pick "White" for those. */
.on-dark {
  --link-color: var(--link-color-on-dark);
  --link-color-hover: var(--link-color-on-dark-hover);
  --link-color-active: var(--link-color-on-dark-hover);
  --button-text-dark: var(--link-color-on-dark);
  --button-text-dark-hover: var(--link-color-on-dark-hover);
}

:root {
  --form-accent-color-light: rgb(var(--brand-color-orange-light));
  --form-accent-color: rgb(var(--brand-color-deep-blue));
  --form-accent-color-active: rgb(var(--brand-color-black));
}

/* Fields */
.hs-form-field {
  margin-bottom: 24px;
}

/* For some reason, full-width inputs (exclusively have their width
 * set to 95% when the form is in column layout mode. 
 *
 * This makes side-by-side inputs stay visually in-line with 
 * full-width inputs. 
 */
form .form-columns-2,
form .form-columns-3,
form .form-columns-4 {
  padding-right: 5% !important;
}

/* Labels */
/* Labels sit directly above their field at full reading size (16px). */
form label {
  color: var(--form-label-color, currentColor);
  cursor: pointer;
  display: block;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 0.375rem;
  width: fit-content;
}

form label span {
  color: var(--form-label-color, currentColor);
}

form label input + span {
  color: var(--form-label-color, currentColor);
  font-weight: 400;
  text-transform: none;
}

form label.hs-error-msg {
  color: var(--form-label-color-error, var(--color-error));
  cursor: default;
  text-transform: none;
}

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

/* Help text */

/* A fieldset's legend labels its group of controls (for example the
   question above a set of radio buttons), styled like a field label. */
form legend {
  color: var(--form-label-color, currentColor);
  display: block;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 0.375rem;
  padding: 0;
  width: 100%;
}

/* Inputs */

form input::placeholder,
form select.is-placeholder {
  color: var(--form-placeholder-color, rgba(var(--brand-color-deep-blue), 0.6));
}

form input[type="color"],
form input[type="date"],
form input[type="datetime-local"],
form input[type="datetime"],
form input[type="email"],
form input[type="month"],
form input[type="number"],
form input[type="password"],
form input[type="search"],
form input[type="tel"],
form input[type="text"],
form input[type="time"],
form input[type="url"],
form input[type="week"],
form select,
form textarea {
  background-color: var(--form-input-background-color, rgb(var(--brand-color-white)));
  box-sizing: border-box;
  border: 1px solid var(--form-border-color, rgba(var(--brand-color-deep-blue), 0.45));
  border-radius: 6px;
  display: inline-block;
  font-size: 1rem;
  padding: 0.75rem 1rem;
  transition: border-color 150ms linear, background-color 150ms linear, outline 150ms;
  vertical-align: middle;
}

form input:not([type]) {
  border: 1px solid var(--form-border-color, rgba(var(--brand-color-deep-blue), 0.45));
  box-shadow: inset 0 1px 3px var(--form-inner-shadow-color, rgba(var(--brand-color-deep-blue), 0.1));
  box-sizing: border-box;
  display: inline-block;
  padding: 0.75rem 1rem;
}

form input[type="color"] {
  padding: 0.25rem 0.5rem;
}

form :not(fieldset) input[type="color"],
form :not(fieldset) input[type="date"],
form :not(fieldset) input[type="datetime-local"],
form :not(fieldset) input[type="datetime"],
form :not(fieldset) input[type="email"],
form :not(fieldset) input[type="month"],
form :not(fieldset) input[type="number"],
form :not(fieldset) input[type="password"],
form :not(fieldset) input[type="search"],
form :not(fieldset) input[type="tel"],
form :not(fieldset) input[type="text"],
form :not(fieldset) input[type="time"],
form :not(fieldset) input[type="url"],
form :not(fieldset) input[type="week"],
form :not(fieldset) select,
form :not(fieldset) textarea {
  width: 100%;
}

form input[type="color"]:focus,
form input[type="date"]:focus,
form input[type="datetime-local"]:focus,
form input[type="datetime"]:focus,
form input[type="email"]:focus,
form input[type="month"]:focus,
form input[type="number"]:focus,
form input[type="password"]:focus,
form input[type="search"]:focus,
form input[type="tel"]:focus,
form input[type="text"]:focus,
form input[type="time"]:focus,
form input[type="url"]:focus,
form input[type="week"]:focus,
form input:not([type]):focus,
form input[type="checkbox"]:focus,
form input[type="file"]:focus::file-selector-button,
form input[type="radio"]:focus,
form input[type="select"]:focus,
form select:focus,
form textarea:focus {
  border-color: var(--form-border-color-active, rgba(var(--brand-color-deep-blue), 0.45));
}

.hs-form-checkbox-display,
.hs-form-booleancheckbox-display,
.hs-form-radio-display {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

form textarea {
  resize: vertical;
}

form fieldset {
  border: 0;
  margin: 0;
  max-width: 100% !important;
  min-width: 0;
  padding: 0;
}

form input[type="color"][disabled],
form input[type="date"][disabled],
form input[type="datetime-local"][disabled],
form input[type="datetime"][disabled],
form input[type="email"][disabled],
form input[type="month"][disabled],
form input[type="number"][disabled],
form input[type="password"][disabled],
form input[type="search"][disabled],
form input[type="tel"][disabled],
form input[type="text"][disabled],
form input[type="time"][disabled],
form input[type="url"][disabled],
form input[type="week"][disabled],
form input:not([type])[disabled],
form select[disabled],
form textarea[disabled] {
  cursor: not-allowed;
  background-color: var(--form-input-background-color-disabled, rgba(var(--brand-color-black), 0.25));
  color: var(--form-input-text-color-disabled, rgba(var(--brand-color-black), 0.65));
}

form select {
  appearance: none;
  border: 1px solid var(--form-border-color, rgba(var(--brand-color-deep-blue), 0.45));
  background-color: var(--form-input-background-color, rgb(var(--brand-color-white)));
  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23343a40%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1rem 0.75rem;
  cursor: pointer;
  height: 3rem;
  padding-right: 2.25rem;
  position: relative;
}

form select[multiple] {
  height: auto;
}

/* Inputs - checkbox/radio */

/* Checkbox / radio options: one per line (side-by-side options make it
   hard to tell which label belongs to which box). */
form .inputs-list {
  display: grid;
  gap: 0.25rem;
  grid-template-columns: 1fr;
  margin-top: 0.25rem;
  padding: 0;
  list-style: none;
}

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

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

/* The whole row is the label, so clicking the text toggles the box, and
   each option is a comfortable 44px-tall touch target. */
form .inputs-list label {
  align-items: center;
  display: flex;
  font-weight: 400;
  gap: 0.75rem;
  margin-block: 0;
  min-height: 44px;
  padding-block: 0.375rem;
  width: 100%;
}

form .inputs-list label input {
  flex: none;
  margin: 0;
}

form input[type=checkbox],
form input[type=radio] {
  accent-color: rgb(var(--brand-color-deep-blue));
  appearance: none;
  aspect-ratio: 1 / 1;
  background-color: var(--form-input-background-color, rgb(var(--brand-color-white)));
  border: 1px solid var(--form-border-color, rgba(var(--brand-color-deep-blue), 0.45));
  cursor: pointer;
  isolation: isolate;
  height: 24px;

  position: relative;
  transition: border-color 150ms linear, background-color 150ms linear, outline linear 150ms;
}

/* Ranges retain native rendering, with a brand-consistent filled track/thumb. */
input[type=range] {
  accent-color: rgb(var(--brand-color-deep-blue));
}

form input[type=checkbox] {
  border-radius: 3px;
}

form input[type=checkbox]:before,
form input[type=radio]:before {
  background-color: var(--form-accent-color, rgb(var(--brand-color-orange)));
  position: absolute;
  inset: 2px 2px 2px 2px;
  transform: scale(0);
  transform-origin: center;
  transition: transform 150ms var(--ease-in-out-back);
}

form input[type=checkbox]:before {
  content: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 24 24%27 stroke-width=%273%27 stroke=%27white%27%3e%3cpath stroke-linecap=%27round%27 stroke-linejoin=%27round%27 d=%27M4.5 12.75l6 6 9-13.5%27/%3e%3c/svg%3e");

  border-radius: 2px;
}

form input[type=radio]:before {
  content: '';
}

form input[type=radio],
form input[type=radio]:before {
  border-radius: 50%;
}

form input[type=checkbox]:checked:before,
form input[type=radio]:checked:before {
  transform: scale(1);
}


/* 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: rgb(var(--brand-color-white));
}

.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: rgb(var(--brand-color-white));
}

/* Inputs - file picker */

form input[type=file] {
  background-color: transparent;
  border: var(--rule);
  border-radius: var(--radius-default);
  color: currentColor;
  cursor: pointer;
  font-size: 1rem;
  padding: 2rem;
  margin-top: 0.25rem;
  transition: linear 100ms border-color;
}

form input[type=file]::file-selector-button {
  appearance: none;
  background-color: var(--form-accent-color, rgb(var(--brand-color-orange)));
  border: none;
  border-radius: 5px;
  color: rgb(var(--brand-color-white));
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  margin-right: 1rem;
  padding-block: 0.75rem;
  padding-inline: 1.25rem;
  text-align: center;
  text-transform: uppercase;
  transition: background-color 150ms linear;
  width: fit-content;
}

form input[type=file]:hover,
form input[type=file]:focus {
  border-color: var(--form-border-color-active, rgba(var(--brand-color-green), 0.45));
}

form input[type=file]:hover::file-selector-button,
form input[type=file]:focus::file-selector-button {
  background-color: var(--form-accent-color-active, rgb(var(--brand-color-orange-active)));
}

/* Headings and text */
form .hs-richtext,
form .hs-richtext p {
  font-size: 1rem;
}
form .hs-richtext + *, form .hs-richtext p + * {
    margin-top: 0.75rem;
  }

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(--color-error);
}

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

/* Error messages sit directly under their field, aligned with its left
   edge, so they're easy to find with a screen magnifier. */
.hs-error-msgs {
  list-style: none;
  margin: 0.375rem 0 0;
  padding: 0;
}

.hs-error-msgs li {
  margin: 0;
}

.hs-error-msg {
  color: var(--color-error);
  font-size: 1rem;
  font-weight: 400;
  margin: 0;
}

/* Thank You Message */
.hs_cos_wrapper_type_form .submitted-message,
[data-hs-form] .submitted-message {
  border: var(--rule);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
}

/* Submit buttons share the theme button rule (see _buttons.css). */
.hs-submit .actions {
  margin-top: 0.5rem;
}

/* Captcha */

.grecaptcha-badge {
  display: inline-flex;
}

/* Table */

table {
  border-collapse: collapse;
  margin-bottom: 1.4rem;
}

/* Table Cells */

th,
td {
  vertical-align: top;
}

/* Table Header */

thead th,
thead td {
  vertical-align: bottom;
}

@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}
/* ************************************************************************* */
/* ***************                Carousels               ****************** */
/* ************************************************************************* */


/* Splide Slider Styles */
.splide {
    position: relative;
}
.splide__arrow {
        appearance: none;
        aspect-ratio: 1 / 1;
        background-color: transparent;
        border: none;
        color: var(--carousel-arrow-color, rgb(var(--brand-color-deep-blue)));
        height: auto;
        opacity: 0.6;
        transition: opacity 150ms linear, outline 150ms linear;
        width: 2rem;

    }
.splide__arrow:hover {
            opacity: 1;
        }
.splide__arrow[disabled] {
            cursor: default;
            opacity: 0.2;
        }
.splide__arrow[disabled]:hover {
                opacity: 0.2;
            }
/* Elements */
.splide__arrows{ 
            align-items: center;
            display: flex;
            justify-content: space-between;
            inset: auto 0 auto 0;
            position: absolute;
            width: 100%;
            z-index: 2;
        }
.splide__arrow > svg {
            fill: currentColor;
            height: 100%;
            object-fit: contain;
            /* Adding width seems to break these on iOS Safari? */
            /* width: 100%; */
        }
/* Variants */
.splide__arrow--prev {
            transform: rotate(0.5turn);
        }
.splide__pagination {
        display: flex;
        gap: 0.75rem;
        padding: 0;
    }
.splide__pagination__page {
            appearance: none;
            aspect-ratio: 1 / 1;
            background-color: transparent;
            border: 1px solid var(--carousel-pagination-color, rgb(var(--brand-color-cream)));
            border-radius: 9999px;
            height: auto;
            padding: 0;
            transition: background-color 250ms linear, border-color 250ms linear, outline 150ms linear, transform 250ms var(--ease-in-out-back);
            width: 0.75rem;
        }
.splide__pagination__page:hover {
                background-color: var(--carousel-pagination-color, rgb(var(--brand-color-cream)));
                transform: scale(1.33);
            }
.splide__pagination__page.is-active {
                background-color: var(--carousel-pagination-color-active, rgb(var(--brand-color-orange)));
                border-color: var(--carousel-pagination-color-active, rgb(var(--brand-color-orange)));
            }

/* Testimonials Slider */
.testimonials {
    grid-template-areas:
    "quot"
    "page";
    gap: 1rem;

    align-items: center;
    display: grid;
    position: relative;
}
.testimonials .splide__track,
    .testimonials .splide__arrows {
        grid-area: quot;
    }
.testimonials .splide__pagination {
        grid-area: page;
    }
.testimonials__list-item {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

/* Testimonials Slide Styling */
.testimonial {
    text-align: center;
}
.splide .testimonial {
        padding-inline: clamp(1.5rem, 12px + 0.1vw, 4rem);
    }
.testimonial__quote::before {
            display: none;
        }
/* ************************************************************************* */
/* ***************                  Links                 ****************** */
/* ************************************************************************* */

/* The base inline link lives in elements/_typography.css. These are the two
   other link variants, all built from the same --link-* tokens so every
   underline in the theme rests translucent and goes solid on hover/focus.

   .link-cta     Standalone link with a trailing (or leading) arrow.
   .link-title   Card titles and heading links: thicker, lighter underline
                 that darkens when the link, or the whole card, is hovered.
   .link-list    A short list of inline links with a small diamond marker and a muted
                 count after each (--on-dark on dark surfaces, --columns to
                 flow a longer list into columns).

   Module CSS can't @extend these, so modules either add the class in their
   markup or use the same tokens directly. */

/* ===== CTA link ===== */
.link-cta {
  align-items: center;
  color: inherit;
  display: inline-flex;
  font-weight: 600;
  gap: 0.25em;
  text-decoration-color: var(--link-underline-rest);
  text-decoration-line: underline;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  text-decoration-thickness: var(--link-underline-thickness);
  text-underline-offset: var(--link-underline-offset);
  transition: var(--link-transition);
}
.link-cta:is(:hover, :focus-visible) {
    text-decoration-color: var(--link-underline-hover);
  }
.link-cta__icon {
    flex: none;
    height: 0.6em;
    transition: transform var(--duration-fast) var(--ease-standard);
    width: auto;
  }
.link-cta:is(:hover, :focus-visible) .link-cta__icon {
    transform: translateX(var(--arrow-nudge));
  }
/* Leading "back" arrow nudges the other way. */
.link-cta--back .link-cta__icon {
    order: -1;
  }
.link-cta--back:is(:hover, :focus-visible) .link-cta__icon {
    transform: translateX(calc(var(--arrow-nudge) * -1));
  }

/* ===== Title link ===== */
.link-title {
  color: inherit;
  text-decoration-color: var(--link-title-underline-rest);
  text-decoration-line: underline;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  text-decoration-thickness: var(--link-title-underline-thickness);
  text-underline-offset: var(--link-title-underline-offset);
  transition: var(--link-transition);
}
.link-title:is(:hover, :focus-visible) {
    text-decoration-color: var(--link-underline-hover);
  }

@media (prefers-reduced-motion: reduce) {
  .link-cta:is(:hover, :focus-visible) .link-cta__icon {
    transform: none;
  }
}

/* ===== Link button =====
   A <button> for an action that should read as an inline link (e.g. "Cookie
   settings"). Link styles come from the base link rules; this only strips
   the button chrome. */
.link-button {
  appearance: none;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  padding: 0;
}

/* ===== Link list ===== */
/* Plain <li> text holding an inline link, then an optional count in
   .link-list__count (filled in by initCounts in main.js, or typed). The
   marker is a small diamond, drawn by ::before because a list
   marker can't be given a shape. It is purely decorative, so it has no
   content for screen readers. */
.link-list {
  margin: 0;
  padding-inline-start: 0;
}
.link-list li {
    list-style: none;
    margin-block: 0;
    padding-inline-start: 1.5rem;
    position: relative;
  }
.link-list li + li {
    margin-top: 0.25rem;
  }
/* Links read as list text (not the blue inline-link color) and keep the
     translucent-at-rest underline. */
.link-list a {
    color: inherit;
    font-weight: inherit;
  }
/* A small diamond with softened corners. Follows the text color, so it
     reads on dark panels too, and is centered on the first line of the item. */
.link-list li::before {
    background-color: currentColor;
    border-radius: 0.0625em;
    content: "";
    height: 0.375em;
    inset-inline-start: 0.3125rem;
    position: absolute;
    top: 0.5625em;
    top: calc(0.5lh - 0.1875em);
    transform: rotate(45deg);
    width: 0.375em;
  }
.link-list__count {
    color: rgba(var(--brand-color-deep-blue), 0.62);
    font-size: 0.875rem;
    margin-inline-start: 0.25rem;
  }
.link-list__count:not(:empty)::before {
      content: "(";
    }
.link-list__count:not(:empty)::after {
      content: ")";
    }
.link-list--on-dark .link-list__count {
    color: rgba(var(--brand-color-white), 0.7);
  }
/* Columns: a longer list (jump links) flows into tidy columns as wide as
     the width allows (as many 14rem columns as fit), items never split. The
     row gap moves to padding so the top of every column lines up. */
.link-list--columns {
    column-gap: clamp(1.5rem, 1rem + 2vw, 3rem);
    column-width: 14rem;
    margin-top: 0.75rem;
  }
.link-list--columns li {
      page-break-inside: avoid;
      break-inside: avoid;
      padding-bottom: 0.25rem;
    }
.link-list--columns li + li {
      margin-top: 0;
    }

/* Link panel: a dark rounded card with a serif title, a .link-list of links
   and a closing .link-cta (for example "See case studies on:" with counts).
   Text is white; use .link-list--on-dark inside it. */

.link-panel {
  background-color: var(--surface-dark);
  border: var(--rule-width) var(--rule-style) rgba(var(--brand-color-white), 0.3);
  border-radius: var(--card-radius);
  color: rgb(var(--brand-color-white));
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

.link-panel__title {
    color: inherit;
    font-family: var(--font-eyebrow);
    font-size: var(--font-size-h4);
    font-weight: 400;
    line-height: 1.3;
    margin: 0;
  }

.link-panel .link-cta {
    align-self: flex-start;
  }

/* ************************************************************************* */
/* ***************               Page Header              ****************** */
/* ************************************************************************* */

/* Two states: roomy at the top (96px), compact once scrolled (42px, .sticky
   from initStickyHeader in main.js). One shared duration and easing, so the
   change reads as a single motion; no "back" easings, which overshoot. */
.header {
  --header-height: 96px;
  --header-logo-height: 48px;
  --header-duration: 120ms;
  --header-ease: cubic-bezier(0.4, 0, 0.2, 1);

  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  height: var(--header-height);
  margin-inline: auto;
  /* The bar runs full width (on the container); content keeps site width. */
  max-width: var(--site-width, 80rem);
  position: relative;
  transition: height var(--header-duration) var(--header-ease);
  width: 100%;
}
.sticky .header {
    --header-height: 42px;
    --header-logo-height: 24px;
  }
/* No-nav variant (landing, contact and membership pages): only the full
     logo, centered, in white on a compact orange bar (see
     &__container--no-navigation). The logo link is sized to the logo
     itself, so the focus ring hugs it. */
.header--no-navigation {
    --header-logo-height: 2.5rem;

    align-items: center;
    display: flex;
    height: 4.5rem;
    justify-content: center;
    margin-inline: auto;
    max-width: var(--site-width, 80rem);
  }
.header--no-navigation .header__logo-link {
      width: calc(var(--header-logo-height) * 102 / 72);
    }
.header--no-navigation .header__logo-link,
      .header--no-navigation .header__logo-link:is(:hover, :focus-visible) {
        color: rgb(var(--brand-color-white));
      }
/* Full-width bar in both states; gains a hairline and soft shadow once
     scrolled so it separates from the content passing underneath. */
/* Cream (the page background) while docked at the top; stays cream — a
     touch translucent on desktop — once it compacts on scroll. */
.header__container {
    background-color: var(--color-body-bg, rgb(var(--brand-color-cream)));
    box-shadow: 0 1px 0 rgba(var(--brand-color-deep-blue), 0), 0 4px 16px -8px rgba(var(--brand-color-deep-blue), 0);
    max-width: 100%;
    position: sticky;
    top: 0;
    transition: background-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
    width: 100%;
    z-index: var(--z-header);
  }
.header__container.sticky {
      background-color: rgb(var(--brand-color-cream));
      /* New look: a soft, diffuse float rather than a hairline + drop. */
      box-shadow: 0 1px 2px rgba(var(--brand-color-deep-blue), 0.04), 0 12px 28px -14px rgba(var(--brand-color-deep-blue), 0.28);
    }
@media (min-width: 768px) {
.header__container.sticky {
        /* Backdrop blur (desktop only, for perf) lets the bar be slightly
           translucent cream without content bleeding through harshly. */
        background-color: rgba(var(--brand-color-cream), 0.9);
        -webkit-backdrop-filter: blur(6px);
                backdrop-filter: blur(6px)
    }
      }
@media (min-width: 768px) {
      .header__container--transparent {
        background-color: transparent;
      }
    }
.header__container--no-navigation {
      background-color: rgb(var(--brand-color-orange));
      border-bottom: var(--rule-strong);
    }
.header__logo {
    height: 100%;
    object-fit: contain;
    width: 100%;
  }
/* The full logo and solid mark share one 102x72 grid, so they sit
       exactly on top of each other and scale together with the link.
       Crossfade order: the incoming logo fades in first, the outgoing one
       fades out just after, so the silhouette never dims mid-change. */
.header__logo--full,
    .header__logo--solid {
      aspect-ratio: 102 / 72;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: auto;
    }
.header__logo--full {
      opacity: 1;
      transition: opacity 160ms var(--header-ease) 0ms;
    }
.header__logo--solid {
      opacity: 0;
      transition: opacity 160ms var(--header-ease) 80ms;
    }
.sticky .header__logo--full {
      opacity: 0;
      transition-delay: 80ms;
    }
.sticky .header__logo--solid {
      opacity: 1;
      transition-delay: 0ms;
    }
/* Compact header: hovering (or focusing) the mark swaps back to the
       full logo, using the same crossfade order. */
.sticky .header__logo-link:is(:hover, :focus-visible) .header__logo--full {
      opacity: 1;
      transition-delay: 0ms;
    }
.sticky .header__logo-link:is(:hover, :focus-visible) .header__logo--solid {
      opacity: 0;
      transition-delay: 80ms;
    }
.header__logo-link {
      color: rgb(var(--brand-color-orange));
      display: block;
      flex: none;
      height: var(--header-logo-height);
      position: relative;
      transition: color var(--duration-fast) linear, outline var(--duration-fast) linear, height var(--header-duration) var(--header-ease);
      /* Fixed width (the full logo's width at the top) so the menu and
         button don't slide sideways while the logo shrinks. */
      width: calc(52px * 102 / 72);
    }
.header__logo-link:hover,
      .header__logo-link:focus-visible {
        color: rgb(var(--brand-color-orange-active));
      }
/* Main CTA: a standard Medium button. When the header compacts on
     scroll it compresses slightly (32px -> 28px tall, same text size),
     animated with the bar. */
.header__button {
    display: none;
    transition: background-color var(--duration-fast) linear, border-color var(--duration-fast) linear, box-shadow var(--duration-fast) linear, min-height var(--header-duration) var(--header-ease), padding var(--header-duration) var(--header-ease);
  }
@media (min-width: 768px) {
.header__button {
      display: flex
  }
    }
.sticky .header__button {
      --button-height: 28px;
      --button-padding-block: 4px;
    }
.header__skip-link {
    height: 1px;
    left: -1000px;
    overflow: hidden;
    position: absolute;
    text-align: left;
    top: -1000px;
    width: 1px;
  }
.header__skip-link:hover,
    .header__skip-link:focus,
    .header__skip-link:active {
      background-color: rgb(var(--brand-color-white));
      border-radius: 2px;
      height: auto;
      left: 24px;
      overflow: visible;
      padding-block: 0.125rem;
      padding-inline: 0.25rem;
      top: 24px;
      width: auto;
      z-index: var(--z-overlay);
    }

/* Main navbar styles */
.main-nav {
  align-items: center;
  display: flex;
  gap: 1rem;
}
.main-nav__toggle {
    /* 44x44 touch target per WCAG 2.5.5. The visible icon is smaller (32px);
       the extra padding provides the hit area. */
    align-items: center;
    aspect-ratio: 1 / 1;
    display: inline-flex;
    height: 2.75rem;
    justify-content: center;
    padding: 0.375rem;
    position: relative;
    transition: transform 120ms var(--ease-out-quart, ease-out);
    width: 2.75rem;
    z-index: 1;
  }
.main-nav__toggle:active {
      transform: scale(0.92);
      transition-duration: 70ms;
    }
@media (prefers-reduced-motion: reduce) {
      .main-nav__toggle:active {
        transform: none;
      }
    }
.main-nav__toggle-icon {
      max-width: 100%;
    }
.main-nav__toggle-icon__bar {
        shape-rendering: crispEdges;
        transform-box: fill-box;
        transform-origin: center;
      }
@media (min-width: 768px) {
.main-nav__toggle {
      display: none
  }
    }

/* Nav menu styles */
.nav-menu--mobile {
    background-color: rgb(var(--brand-color-deep-blue));
    color: rgb(var(--brand-color-white));
    display: flex;
    flex-direction: column;
    inset: 0;
    overflow-y: auto;
    position: fixed;
    padding: 0;
    z-index: 50;
  }
.nav-menu__list {
    color: rgb(var(--brand-color-black));
    display: flex;
    font-size: 1rem;
    gap: 1rem;
  }
/* Desktop horizontal list. Hidden below 768px, centered row above. */
.nav-menu__list--desktop {
      align-items: baseline;
      display: none;
      justify-content: center;
    }
@media (min-width: 768px) {
.nav-menu__list--desktop {
        display: flex
    }
      }
/* Mobile stacked list inside the overlay. Fluidly sized so the labels
       feel generous on phones without ballooning on larger "mobile" widths. */
.nav-menu__list--mobile {
      color: rgb(var(--brand-color-white));
      display: flex;
      flex-direction: column;
      font-size: clamp(1.125rem, 4.25vw, 1.5rem);
      gap: 0;
      padding-block: 0.5rem 1rem;
      padding-inline: 1.5rem;
    }
/* Hairline dividers between mobile top-level items. */
.nav-menu__list--mobile > .nav-menu__item {
    border-top: var(--border-hairline-on-dark);
  }
.nav-menu__list--mobile > .nav-menu__item:first-child {
    border-top: 0;
  }
.nav-menu__item {
    position: relative;
  }
/* Hide CTA menu item on desktop (show button instead) */
@media (min-width: 768px) {
.nav-menu__item:last-child {
        display: none
    }
      }
.nav-menu__link {
    align-items: center;
    color: currentColor;
    display: flex;
    font-weight: 400;
    gap: 0.25rem;
    padding-block: 0.75rem;
    padding-inline: 0.25rem;
    /* Nav keeps no visible underline at rest (it would clutter the bar),
       then fades in the same title-weight underline as cards on hover. */
    text-decoration-color: transparent;
    text-decoration-line: underline;
    text-decoration-thickness: var(--link-title-underline-thickness);
    text-underline-offset: var(--link-title-underline-offset);
    transition:
      text-decoration-color var(--duration-fast) linear,
      transform var(--duration-instant) var(--ease-standard);
  }
.nav-menu__link:is(:hover, :focus-visible) {
      text-decoration-color: var(--link-underline-hover);
    }
/* Same tactile press feedback as buttons. */
.nav-menu__link:active {
      transform: scale(0.97);
    }
@media (prefers-reduced-motion: reduce) {
      .nav-menu__link:active {
        transform: none;
      }
    }
/* Variants */
.nav-menu--mobile .nav-menu__link {
      gap: 0.75rem;
    }
.nav-menu--mobile .nav-menu__link__icon {
        height: 0.875em;
      }
.nav-menu--mobile .nav-menu__link__icon--toggle rect {
          transition: transform 250ms var(--ease-out-quart);
        }
/* Current page: a persistent underline, same neutral styling as hover so
       the two read consistently. */
.nav-menu__link[aria-current=page],
    .nav-menu__link.is-open {
      text-decoration-color: var(--link-underline-hover);
    }
/* Elements */
.nav-menu__link__icon {
      aspect-ratio: 1 / 1;
      height: 1em;
      width: auto;
    }
.nav-menu__link__icon rect {
        shape-rendering: crispEdges;
      }
/* Dropdown chevron reads too thin — add a stroke around the filled
         glyph (inherits into the <use> shadow tree) to bolden it. */
.nav-menu__link__icon--dropdown {
        stroke: currentColor;
        stroke-width: 20;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
/* Services split control — Services link + chevron toggle sit on one row. */
.nav-menu__services-control {
    align-items: center;
    display: inline-flex;
    gap: 0;
  }
.nav-menu__link--services {
    padding-inline-end: 0;
  }
/* The chevron toggle beside the Services link. Styled like a nav link so
     focus/hover affordances match, but visually bare — just the icon. */
.nav-menu__toggle {
    align-items: center;
    aspect-ratio: 1 / 1;
    color: currentColor;
    cursor: pointer;
    display: inline-flex;
    height: 1.5rem;
    justify-content: center;
    padding: 0.125rem;
    padding-inline-start: 0;
    transition: transform 180ms var(--ease-out-quart, ease-out);

  }
.nav-menu__toggle-icon {
      aspect-ratio: 1 / 1;
      height: 0.875em;
      /* Only opacity and stroke-width ease — transform snaps so the chevron
         flips to pointing-up without the ugly mid-rotation horizontal line. */
      transition:
        opacity 120ms linear,
        stroke-width 120ms linear;
      width: auto;
    }
.nav-menu__toggle-icon rect {
        shape-rendering: crispEdges;
      }
.nav-menu__toggle-icon--chevron {
        stroke: currentColor;
        stroke-width: 20;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
/* Hover: chevron snaps to pointing up and bolds. No animated flip. */
.nav-menu__toggle:hover .nav-menu__toggle-icon--chevron,
    .nav-menu__toggle:focus-visible .nav-menu__toggle-icon--chevron {
      stroke-width: 28;
      transform: rotate(180deg);
    }
/* Expanded: stays pointing up and dims to read as "handed off" to the
       open panel. */
.nav-menu__toggle[aria-expanded="true"] .nav-menu__toggle-icon--chevron {
      opacity: 0.6;
      stroke-width: 28;
      transform: rotate(180deg);
    }

/* Services dropdown panel — the enriched megamenu-lite for the Services
   top-level item. Dark card anchored under the Services link, icon + title +
   description per item. Mobile reuses the same markup inside the stacked
   mobile menu, but drops the floating positioning. */
.nav-services {
  background-color: rgb(var(--brand-color-black));
  border-radius: var(--radius-default);
  /* Hairline outline is the primary separation (works on any page bg —
     dark drop shadows disappear on dark hero sections). A tiny, tightly-
     offset shadow adds subtle depth over light backgrounds. */
  box-shadow:
    0 0 0 1px rgba(var(--brand-color-white), 0.12),
    0 6px 18px -8px rgba(var(--brand-color-black), 0.35);
  color: rgb(var(--brand-color-white));
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  isolation: isolate;
  padding: 0.5rem;
  position: absolute;
  /* Sit tight under the link so the panel reads as attached, not floating. */
  top: calc(100% + 2px);
  left: -0.5rem;
}
/* Invisible bridge above the panel so moving the cursor from the Services
     link down into the dropdown doesn't fire mouseleave in the gap. */
.nav-services::before {
    content: "";
    position: absolute;
    inset: -0.75rem 0 auto 0;
    height: 0.75rem;
  }
.nav-services {
  width: 22rem;
  max-width: calc(100vw - 2rem);
  z-index: 10;
  opacity: 0;
  filter: blur(6px);
  transform: scale(0.985);
  transform-origin: top center;
  will-change: opacity, transform, filter;
}
/* motion-one controls visibility; keep initial state hidden to avoid a
     flash before Alpine mounts and the component takes over. */
/* Inside the mobile stacked nav: no floating card, just inline rows. */
.nav-menu--mobile .nav-services {
    background-color: transparent;
    box-shadow: none;
    filter: none;
    opacity: 1;
    padding: 0.25rem 0 0.5rem 0.5rem;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
  }
.nav-services__item {
    align-items: flex-start;
    border-radius: calc(var(--radius-default) - 2px);
    color: currentColor;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 2.5rem 1fr;
    padding: 0.625rem 0.75rem;
    -webkit-text-decoration: none;
    text-decoration: none;
    /* Snappy, single-channel hover: just the row background flips in.
       Shorter duration + linear so it feels direct, not animated. */
    transition: background-color 90ms linear;
  }
.nav-services__item:hover,
    .nav-services__item:focus-visible {
      background-color: rgba(var(--brand-color-white), 0.12);
    }
.nav-services__item:active {
      transform: scale(0.97);
      transition: transform 90ms linear;
    }
@media (prefers-reduced-motion: reduce) {
      .nav-services__item:active {
        transform: none;
      }
    }
.nav-services__icon {
    align-items: center;
    aspect-ratio: 1 / 1;
    background-color: rgba(var(--brand-color-white), 0.08);
    border-radius: calc(var(--radius-default) - 2px);
    color: rgb(var(--brand-color-white));
    display: inline-flex;
    height: 2.5rem;
    justify-content: center;
    width: 2.5rem;
  }
.nav-services__icon-svg {
      height: 1.25rem;
      width: 1.25rem;
    }
.nav-services__text {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    min-width: 0;
  }
.nav-services__title {
    color: rgb(var(--brand-color-white));
    font-family: var(--font-header, inherit);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
  }
.nav-services__desc {
    color: rgba(var(--brand-color-white), 0.72);
    font-family: var(--font-base, inherit);
    font-size: var(--text-sm--fluid, 0.875rem);
    line-height: 1.45;
  }

/* Mobile overlay chrome — the top row with brand logo and close X, matching
   the pattern from the Fundraise Up reference. */
.nav-mobile__header {
    align-items: center;
    border-bottom: var(--border-hairline-on-dark);
    display: flex;
    justify-content: space-between;
    padding-block: 0.75rem;
    padding-inline: 1.25rem 0.75rem;
  }
.nav-mobile__brand {
    align-items: center;
    color: rgb(var(--brand-color-white));
    display: inline-flex;
    height: 2.5rem;
    transition: opacity var(--duration-fast) linear;
  }
.nav-mobile__brand:hover,
    .nav-mobile__brand:focus-visible {
      opacity: 0.85;
    }
.nav-mobile__logo {
    aspect-ratio: 102 / 72;
    height: 100%;
    width: auto;
  }
/* Deliberately distinct from the dropdown's + icon: round, filled chip so
     tapping it feels unambiguously like a "close the whole thing" action. */
.nav-mobile__close {
    align-items: center;
    aspect-ratio: 1 / 1;
    background-color: rgba(var(--brand-color-white), 0.08);
    border: var(--border-hairline-on-dark);
    border-radius: 999px;
    color: rgb(var(--brand-color-white));
    cursor: pointer;
    display: inline-flex;
    height: 2.75rem;
    justify-content: center;
    transition: background-color var(--duration-fast) linear, border-color var(--duration-fast) linear;
    width: 2.75rem;
  }
.nav-mobile__close:hover,
    .nav-mobile__close:focus-visible {
      background-color: rgba(var(--brand-color-white), 0.16);
      border-color: rgba(var(--brand-color-white), 0.32);
    }
.nav-mobile__close-icon {
      height: 1.125rem;
      width: 1.125rem;
    }
/* Full-width CTA — sits tight under the last link, not pinned to the bottom. */
.nav-mobile__footer {
    display: flex;
    padding-block: 1rem 1.5rem;
    padding-inline: 1.5rem;
  }
.nav-mobile__cta {
    justify-content: center;
    text-align: center;
    width: 100%;
  }

/* Mobile overlay: larger touch targets on every link, and the services split
   control stacks nicely with a tappable chevron on the right. */
.nav-menu--mobile .nav-menu__link {
    align-items: center;
    display: flex;
    min-height: 2.75rem;
    padding-block: 0.875rem;
    padding-inline: 0.75rem;
    position: relative;
  }
/* Current page: a short orange accent bar on the left — clearer than the
       default underline inside this dark overlay. */
.nav-menu--mobile .nav-menu__link[aria-current="page"],
    .nav-menu--mobile .nav-menu__link.is-open {
      -webkit-text-decoration: none;
      text-decoration: none;
    }
.nav-menu--mobile .nav-menu__link[aria-current="page"]::before, .nav-menu--mobile .nav-menu__link.is-open::before {
        content: "";
        background-color: rgb(var(--brand-color-orange));
        border-radius: 2px;
        bottom: 0.875rem;
        left: 0;
        position: absolute;
        top: 0.875rem;
        width: 3px;
      }

/* Simple mobile Services submenu items — indented, smaller type, slightly
   dimmer so the hierarchy is unmistakable without any extra chrome. */
.nav-services--mobile {
  padding-inline-start: 1.5rem;
}
.nav-services--mobile .nav-services__item--simple {
    align-items: center;
    color: rgba(var(--brand-color-white), 0.82);
    display: flex;
    font-family: var(--font-base, inherit);
    font-size: clamp(1.0625rem, 4vw, 1.375rem);
    font-weight: 600;
    min-height: 2.75rem;
    padding-block: 0.625rem;
    padding-inline: 0.25rem;
    text-decoration-color: transparent;
    text-decoration-line: underline;
    text-decoration-thickness: var(--link-title-underline-thickness);
    text-underline-offset: var(--link-title-underline-offset);
    transition: var(--link-transition);
  }
.nav-services--mobile .nav-services__item--simple:hover,
    .nav-services--mobile .nav-services__item--simple:focus-visible {
      background-color: transparent;
      color: rgb(var(--brand-color-white));
      text-decoration-color: var(--link-underline-hover);
    }
.nav-services--mobile .nav-services__item--simple .nav-services__title {
      color: inherit;
      font-weight: inherit;
    }

/* Nav controls use the global focus ring; just round its corners. */
.nav-menu__link,
.nav-menu__toggle,
.nav-mobile__brand,
.nav-mobile__close {
  border-radius: var(--radius-sm);
}

/* ===== Desktop dropdown (submenu) enter/leave motion =====
   Quick, snappy, and satisfying: grows from the top with a slight overshoot
   on the way in, then a fast clean exit. (Alpine x-transition classes.) */
.nav-submenu-enter {
  transform-origin: top center;
  transition: opacity 110ms ease-out, transform 180ms cubic-bezier(0.34, 1.45, 0.5, 1);
  will-change: transform, opacity;
}

.nav-submenu-enter-start {
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
}

.nav-submenu-enter-end {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.nav-submenu-leave {
  transform-origin: top center;
  transition: opacity 90ms ease-in, transform 90ms ease-in;
}

.nav-submenu-leave-start {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.nav-submenu-leave-end {
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  .nav-submenu-enter-start,
  .nav-submenu-enter-end,
  .nav-submenu-leave-start,
  .nav-submenu-leave-end {
    transform: none;
  }
}

/* ************************************************************************* */
/* ***************            Announcement bar            ****************** */
/* ************************************************************************* */

.announcement-bar {
  background-color: var(--surface-dark);
  color: rgb(var(--brand-color-white));
  max-width: 100%;
  padding-block: 0.5rem;
  padding-inline: 1rem;
  position: relative;
  width: 100%;
}

.announcement-bar__description {
    color: inherit;
    font-size: var(--text-sm, 0.875rem);
    line-height: 1.5;
    margin-inline: auto;
    max-width: var(--site-width);
    /* Reserves room so long text on narrow screens doesn't run under the
       dismiss button pinned to the bar's edge. */
    padding-inline-end: 2rem;
    text-align: center;
    vertical-align: middle;
  }

.announcement-bar--has-button .announcement-bar__description {
      line-height: 1.75;
    }

/* Rich text wraps the message in <p>; keep it inline so the button
       stays on the same line. */

.announcement-bar__description p {
      display: inline;
      margin: 0;
    }

.announcement-bar__button {
    margin-left: 0.5rem;
  }

/* Understated until hover or focus, so it doesn't compete with the CTA. */

.announcement-bar__dismiss {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    opacity: 0.6;
    padding: 0.75rem;
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity var(--duration-fast) linear;
  }

.announcement-bar__dismiss:hover,
  .announcement-bar__dismiss:focus-visible {
    opacity: 1;
  }

.announcement-bar__dismiss-icon {
    height: 0.6875rem;
    width: 0.6875rem;
  }

/* ************************************************************************* */
/* ***************               Page Footer              ****************** */
/* ************************************************************************* */

/* The main footer is the Site footer module (modules/site-footer.module,
   styles in its module.css). This file styles the minimal footer used by
   the landing and contact pages (templates/partials/footer-no-navigation.html)
   and the dot-separated list both footers share. */

/* ===== Dot list ===== */
/* An inline row of items with small decorative dots between them. The dot
   is spaced with a margin, not flex gap, so text inside an item isn't split
   apart. --dot-list-gap sets the space on each side of a dot,
   --dot-list-row-gap the space between wrapped lines. */
.dot-list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--dot-list-row-gap, 0.5rem) var(--dot-list-gap, 1rem);
  line-height: 1.27;
  margin: 0;
  padding: 0;
}
.dot-list li {
    align-items: center;
    display: inline-flex;
    margin: 0;
  }
.dot-list li[hidden] {
    display: none;
  }
.dot-list li + li::before {
    background-color: currentColor;
    border-radius: 50%;
    content: "";
    flex: none;
    height: 3px;
    margin-right: var(--dot-list-gap, 1rem);
    opacity: 0.5;
    width: 3px;
  }

/* ===== Minimal footer ===== */
/* Logo, a link home and the copyright on one centered line. On small
   phones everything stacks, so no line starts with a stray dot. */
.footer--no-navigation {
  background-color: rgb(var(--brand-color-white));
  border-top: var(--rule-strong);
  color: rgba(var(--brand-color-deep-blue), 0.82);
  font-size: var(--text-base, 1rem);
  padding-block: 1.5rem 2rem;
}
.footer--no-navigation a {
    color: inherit;
  }

.footer__inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: center;
  margin-inline: auto;
  max-width: var(--site-width, 1120px);
}

.footer__logo {
  aspect-ratio: 102 / 72;
  color: rgb(var(--brand-color-orange));
  height: 2.25rem;
  width: auto;
}

.footer__meta {
  --dot-list-gap: 0.75rem;

  justify-content: center;
}

@media (max-width: 479px) {
  .footer__inner,
  .footer__meta {
    flex-direction: column;
  }

  .footer__meta li + li::before {
    display: none;
  }
}

/* Boxed section — a reusable white rounded card. A dnd_section that contains
   .boxed-section__header automatically gets the box styling via :has(). Only
   the container + layout here; type and link styles come from the theme. */

/* Any dnd_section that contains a .boxed-section__header gets the white
   rounded card treatment. This is a cleaner way to style a dnd_section
   than passing `class=` (which HubSpot's dnd_section parser rejects). */
.dnd-section:has(.boxed-section__header) {
  background-color: rgb(var(--brand-color-white));
  border: var(--border-hairline);
  border-radius: var(--radius-default);
  margin-inline: auto;
  max-width: var(--site-width, 1120px);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
}

/* Thin orange hairline that separates zones. */
.boxed-section__divider {
  background-color: rgb(var(--brand-color-orange));
  border: 0;
  height: 1px;
  margin-block: clamp(1.25rem, 1rem + 1vw, 2rem);
  width: 100%;
}

/* Header row: heading left, link right. */
.boxed-section__header {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
}

.boxed-section__heading {
  margin: 0;
}

/* Small text link with trailing arrow — borrows size from the body text. */
.boxed-section__cta {
  align-items: center;
  display: inline-flex;
  font-size: 0.9375rem;
  font-weight: 600;
  gap: 0.375rem;
}

.boxed-section__cta svg { flex: none; }

/* Lead paragraph under the header: the same readable measure as prose. */
.boxed-section__lead {
  margin-block: 0.75rem 0;
  max-width: 60ch;
}

/* Bullet grid. Lives in an editable rich text block, so it has to survive
   what the rich text editor does to markup: it picks its own column count
   from the number of items (2 or 4 items = 2 columns, otherwise 3 on wide
   screens) instead of relying on a class the editor may drop, and ignores
   stray elements (empty paragraphs, line breaks) the editor leaves behind.
   Add .boxed-section__grid--2-col in the source view to force two columns
   whatever the count. */
.boxed-section__grid {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1vw, 2rem) clamp(1.5rem, 1rem + 2vw, 3rem);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.boxed-section__grid > :not(li) {
    display: none;
  }

@media (min-width: 640px) {
  .boxed-section__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .boxed-section__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .boxed-section__grid:has(> li:nth-of-type(2):last-of-type),
  .boxed-section__grid:has(> li:nth-of-type(4):last-of-type),
  .boxed-section__grid--2-col,
  .boxed-section__grid--2x2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Each item (any <li>, in case the editor drops the item class): a small
   olive dot beside a title, description and any extra lines, evenly spaced. */
.boxed-section__grid > li {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding-inline-start: 1.375rem;
  position: relative;
}
.boxed-section__grid > li::before {
    background-color: rgb(var(--brand-color-green));
    border-radius: var(--radius-pill);
    content: "";
    height: 0.625rem;
    left: 0;
    position: absolute;
    top: 0.55em;
    width: 0.625rem;
  }
.boxed-section__grid > li > * {
    margin: 0;
  }
.boxed-section__grid > li > br,
  .boxed-section__grid > li > p:empty {
    display: none;
  }

/* A job opening (or any full-width entry): title with a small product icon
   beside it, then its details stacked evenly. Add another .boxed-section__role
   below a divider for each extra entry. */
.boxed-section__role {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.boxed-section__role > * {
    margin: 0;
  }

/* Title at the h4 step with the icon scaled to the text (em), so they stay
   in proportion at every screen size. */
.boxed-section__role-title {
  align-items: center;
  display: flex;
  font-size: var(--font-size-h4);
  gap: 0.5em;
  line-height: var(--line-height-h4);
}
.boxed-section__role-title svg {
    flex: none;
    height: 1.1em;
    width: auto;
  }

/* Details read at the prose measure, not the full width of the box. */
.boxed-section__role > p,
.boxed-section__role > .link-cta {
  max-width: 60ch;
}

/* Related content eyebrow — typography comes from the shared .heading-eyebrow
   class, we just own the bottom spacing. */
.boxed-section__footer-label {
  margin: 0 0 1rem;
}

/* Related content list — rhythm only; link + text styles come from the theme. */
.boxed-section__related {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.boxed-section__related-item + .boxed-section__related-item {
  margin-top: 0.75rem;
}

.boxed-section__related-meta {
  margin: 0.125rem 0 0;
}

/* Mobile: when the boxed section footer stacks, give the testimonial some
   breathing room above it. */
@media (max-width: 767px) {
  .dnd-section:has(.boxed-section__header) .dnd-row > .dnd-column + .dnd-column,
  .dnd-section:has(.boxed-section__header) .row-fluid > [class^="span"] + [class^="span"] {
    margin-top: 1.5rem;
  }
}

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

/* ************************************************************************* */
/* ***************             Section heading            ****************** */
/* ************************************************************************* */

/* Eyebrow + heading + optional description, left or centered. Shared by the
   section-heading module and any module with its own header (related
   content, etc.). The eyebrow-to-heading gap comes from
   `.heading-eyebrow + h2/h3/h4` in _typography.css. */

.section-heading {
  margin: 0;
}

.section-heading__eyebrow {
    margin-top: 0;
  }

/* Readable measure so centered copy doesn't run edge to edge. */

.section-heading__title {
    margin-block-end: 0;
    max-width: 28ch;
  }

.section-heading__description {
    color: rgb(var(--brand-color-deep-blue));
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    line-height: 1.6;
    margin-block-start: clamp(0.75rem, 0.5rem + 0.5vw, 1.25rem);
    max-width: 42rem;
    opacity: 0.9;
    text-wrap: pretty;
  }

.section-heading__description p {
      margin: 0;
    }

.section-heading__description p + p {
      margin-top: 1em;
    }

.section-heading--center {
    text-align: center;
  }

.section-heading--center .section-heading__title,
    .section-heading--center .section-heading__description {
      margin-inline: auto;
    }

.section-heading--left .section-heading__title,
    .section-heading--left .section-heading__description {
      margin-inline: 0;
    }

/* ************************************************************************* */
/* ***************               Detail bar               ****************** */
/* ************************************************************************* */

/* The bar under the hero on case study pages: breadcrumbs and the page's
   topic (and industry) chips from the page_tags macro, centered
   as one group. Side by side when there's room, stacked compactly on
   phones. Sits inside .content-wrapper so it lines up with the content.

   .detail-bar          Full-width bar with a hairline under it.
   .detail-bar__inner   The centered group (add to the .content-wrapper).
   .page-tags           Topic / industry groups: a label, then its chips. */

.detail-bar {
  border-bottom: var(--border-hairline);
  padding-block: 0.875rem;
}

.detail-bar__inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: center;
}

.detail-bar__inner .breadcrumbs__list {
    justify-content: center;
  }

@media (max-width: 767px) {

.detail-bar__inner {
    flex-direction: column
}

    .detail-bar__inner > * {
      max-width: 100%;
    }
  }

.page-tags {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1.25rem;
  justify-content: center;
}

.page-tags__group {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    justify-content: center;
  }

.page-tags__label {
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 600;
  }

/* ************************************************************************* */
/* ***************              Scroll track              ****************** */
/* ************************************************************************* */

/* Horizontally scrolling row of items (cards) inside a framed surface, with
   prev/next buttons, a scroll-linked progress bar and edge fades. Behavior
   lives in main.js (initScrollTracks, driven by Motion One's scroll()).
   When everything fits, it's just a static row: the controls, progress bar
   and fades only appear once JS sets [data-overflowing].

   <div class="scroll-track" data-scroll-track>
     <button class="scroll-track__button scroll-track__button--prev" data-scroll-track-prev>
     <div class="scroll-track__frame">
       <ul class="scroll-track__list" data-scroll-track-list>
         <li class="scroll-track__item">…</li>
       </ul>
       <div class="scroll-track__progress"><div class="scroll-track__thumb" data-scroll-track-thumb>
     </div>
     <button class="scroll-track__button scroll-track__button--next" data-scroll-track-next>
   </div> */

.scroll-track {
  --scroll-track-gap: 1.125rem;
  --scroll-track-item-width: clamp(16.5rem, 78vw, 26.5rem);
  --scroll-track-pad: clamp(1rem, 0.6rem + 1.5vw, 2rem);

  position: relative;
}

.scroll-track__frame {
    background-color: var(--card-bg);
    border: var(--border-hairline);
    border-radius: var(--radius-default);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    overflow: hidden;
    padding: var(--scroll-track-pad);
    position: relative;
  }

/* Native horizontal scroll (touch, trackpad, keyboard focus all work), snapped
     to items. The scrollbar is hidden in favor of the styled progress bar. */

.scroll-track__list {
    display: flex;
    gap: var(--scroll-track-gap);
    list-style: none;
    margin: 0;
    /* Room for the cards' shadows and focus rings, which overflow clips. */
    margin-block: -0.5rem;
    margin-inline: calc(var(--scroll-track-pad) * -1);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-block: 0.5rem;
    padding-inline: var(--scroll-track-pad);
    scroll-padding-inline: var(--scroll-track-pad);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

.scroll-track__list::-webkit-scrollbar {
      display: none;
    }

.scroll-track__item {
    display: grid;
    flex: 0 0 var(--scroll-track-item-width);
    margin: 0;
    scroll-snap-align: start;
  }

/* Progress bar, usable as a scrollbar (drag the thumb or click the rail;
     main.js). A light rail with a thumb sized to the visible share; the
     ::before gives it a 22px hit area around the 6px line. */

.scroll-track__progress {
    background-color: rgba(var(--brand-color-deep-blue), 0.06);
    border-radius: var(--radius-pill);
    cursor: pointer;
    display: none;
    height: 6px;
    position: relative;
    touch-action: none;
    -webkit-user-select: none;
            user-select: none;
  }

.scroll-track__progress::before {
      content: "";
      inset: -8px 0;
      position: absolute;
    }

.scroll-track__thumb {
    background-color: rgba(var(--brand-color-deep-blue), 0.24);
    border-radius: inherit;
    cursor: grab;
    height: 100%;
    position: relative;
    transition: background-color var(--duration-fast) linear;
    width: var(--scroll-track-thumb, 25%);
    will-change: transform;
  }

.scroll-track__progress:hover .scroll-track__thumb {
    background-color: rgba(var(--brand-color-deep-blue), 0.4);
  }

/* While dragging: darker thumb, grabbing cursor, and no snapping fighting
     the pointer. */

.scroll-track[data-dragging] {
    cursor: grabbing;
  }

.scroll-track[data-dragging] .scroll-track__thumb {
      background-color: rgba(var(--brand-color-deep-blue), 0.5);
      cursor: grabbing;
    }

.scroll-track[data-dragging] .scroll-track__list {
      scroll-snap-type: none;
    }

/* Edge fades hint that more content sits past the frame edge. */

.scroll-track__frame::before,
  .scroll-track__frame::after {
    content: "";
    inset-block: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity var(--duration-base) linear;
    width: clamp(3rem, 10vw, 9.5rem);
    z-index: var(--z-raised);
  }

.scroll-track__frame::before {
    background: linear-gradient(to left, transparent, color-mix(in srgb, var(--card-bg) 80%, transparent));
    left: 0;
  }

.scroll-track__frame::after {
    background: linear-gradient(to right, transparent, color-mix(in srgb, var(--card-bg) 80%, transparent));
    right: 0;
  }

/* Square orange arrow buttons, 44px targets. Colors, press and focus come
     from the shared .button classes in the markup. */

.scroll-track__button {
    display: none;
    height: 2.75rem;
    padding: 0;
    width: 2.75rem;
  }

.scroll-track__button[aria-disabled="true"] {
      cursor: default;
      opacity: 0.4;
    }

/* Wraps the two buttons; layout-neutral on wide screens. */

.scroll-track__controls {
    display: contents;
  }

/* ===== Overflowing (set by main.js) ===== */

.scroll-track[data-overflowing] .scroll-track__progress {
      display: block;
    }

.scroll-track[data-overflowing] .scroll-track__button {
      display: inline-flex;
    }

.scroll-track[data-overflowing] .scroll-track__frame::after {
      opacity: 1;
    }

.scroll-track[data-overflowing][data-at-end] .scroll-track__frame::after {
      opacity: 0;
    }

.scroll-track[data-overflowing]:not([data-at-start]) .scroll-track__frame::before {
      opacity: 1;
    }

/* Wide screens: arrows float on the frame's left and right edges, centered
   vertically, half outside the frame (Figma 5098:3995). */
@media (min-width: 1024px) {
  .scroll-track__button {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    z-index: var(--z-dropdown);
  }

  .scroll-track__button--prev {
    left: calc(2.75rem / -2);
  }

  .scroll-track__button--next {
    right: calc(2.75rem / -2);
  }
}

/* Narrower screens: arrows sit in a row under the frame, right aligned. */
@media (max-width: 1023px) {
  .scroll-track[data-overflowing] .scroll-track__controls {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.75rem;
  }
}

/* ************************************************************************* */
/* ***************                  Cards                 ****************** */
/* ************************************************************************* */

/* One card chrome for the whole theme (link/content cards, blog previews,
   pillar CTAs, person cards). Components add .card for the surface and
   .card--interactive when the whole card is a link target; they keep only
   what's genuinely different (layout, aspect ratios, colors) in their own
   CSS. Values come from the --card-* tokens in theme-overrides.css.

   .card                  White padded surface, rounded, hairline + soft shadow.
   .card--interactive     Lifts and deepens its shadow on hover, zooms the
                          media, and firms up a .link-title underline.
   .card__media           Clipping frame for the image (keeps the zoom inside
                          the rounded corners).
   .card__image           The cover image inside .card__media.
   .card--scheme-cream    Color schemes (white is the default). They set
   .card--scheme-dark     --card-bg and the --card-text* tokens; dark also
                          switches chips to their dark version (_tags.css). */

.card {
  background-color: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  isolation: isolate;
  overflow: hidden;
  padding: var(--card-padding) var(--card-padding) var(--card-padding-end);
  position: relative;
}

.card--scheme-cream {
  --card-bg: rgb(var(--brand-color-cream));
}

.card--scheme-dark {
  --card-bg: var(--surface-dark);
  --card-text: var(--card-text-on-dark);
  --card-text-body: var(--card-text-body-on-dark);
  --card-text-muted: var(--card-text-muted-on-dark);
}

.card--interactive {
  transition:
    box-shadow var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}

.card--interactive:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(var(--card-lift));
  }

.card__media {
  aspect-ratio: 16 / 10;
  border-radius: var(--card-media-radius);
  overflow: hidden;
  position: relative;
  width: 100%;
}

.card__image {
  display: block;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-standard);
  width: 100%;
}

.card--interactive:hover .card__image {
  transform: scale(var(--card-image-zoom));
}

/* Hovering anywhere on the card (or focusing its link) reads as hovering
   the title link. */
.card--interactive:is(:hover, :focus-within) :is(.link-title, .link-cta) {
  text-decoration-color: var(--link-underline-hover);
}

.card--interactive:is(:hover, :focus-within) .link-cta__icon {
  transform: translateX(var(--arrow-nudge));
}

@media (prefers-reduced-motion: reduce) {
  .card--interactive:hover,
  .card--interactive:hover .card__image,
  .card--interactive:is(:hover, :focus-within) .link-cta__icon {
    transform: none;
  }
}

/* ===== Content grid =====
   The responsive grid for card listings (case studies, resources). One
   column on small screens, then as many ~21rem columns as fit. Each <li>
   stretches its card to the full cell height. Pair with .no-list on a <ul>. */
.content-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
.content-grid {
    grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr))
}
  }
.content-grid > li {
    display: flex;
  }
.content-grid > li > * {
      width: 100%;
    }

/* ************************************************************************* */
/* ***************                Link Card               ****************** */
/* ************************************************************************* */

/* Surface, hover lift, image zoom and title underline come from the shared
   .card / .card--interactive / .link-title classes (_cards.css, _links.css).
   This file only holds the link card's own layout and type. */

/* Variants */

/* Large: image and text side by side, so only when there is an image. */

@container card (width > 600px) {

.link-card--lg:not(.link-card--no-image) {
            align-items: stretch;
            display: grid;
            gap: clamp(1rem, 0.5rem + 2cqi, 2rem);
            grid-template-columns: repeat(2, minmax(0, 1fr))
    }
        }

/* Elements */

.link-card__wrapper {
        container-name: card;
        container-type: inline-size;
        display: grid;
    }

@container card (width > 600px) {

.link-card--lg .link-card__media {
                aspect-ratio: auto;
                height: 100%;
                min-height: 15rem
        }
            }

/* Meta, title, description, CTA, then chips pinned to the bottom so they
       line up across a row. Colors come from the --card-text* tokens. */

.link-card__content {
        color: var(--card-text);
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: 0.75rem;
    }

@container card (width > 600px) {

.link-card--lg .link-card__content {
                justify-content: center
        }
            }

/* "Format / Client". The slash is decorative, so it can go lighter. */

.link-card__meta {
        color: var(--card-text-muted);
        display: flex;
        flex-wrap: wrap;
        font-size: 0.875rem;
        font-weight: 600;
        gap: 0.375rem;
        line-height: 1.2;
        margin-block: 0;
    }

.link-card__meta-sep {
        opacity: 0.5;
    }

.link-card__meta-client {
        font-weight: 500;
    }

/* Title: Red Hat Display; underline from .link-title. */

.link-card__title {
        font-family: var(--font-header);
        font-size: clamp(1.25rem, 1.1rem + 0.6cqi, 1.5rem);
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1.15;
        margin-block: 0;
    }

.link-card--lg .link-card__title {
            font-size: clamp(1.5rem, 1.2rem + 1cqi, 1.875rem);
        }

.link-card__description {
        -webkit-box-orient: vertical;
        color: var(--card-text-body);
        display: -webkit-box;
        font-size: 1rem;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        line-height: 1.5;
        margin-block: 0.5rem 0;
        overflow: hidden;
    }

.link-card__read-more {
        font-size: 1rem;
        font-weight: 600;
        margin-top: 0.75rem;
    }

.link-card__tags {
        margin-top: auto;
    }

/* Full-card clickable overlay — makes the whole card the hover/press
       target, so hovering anywhere drives the image zoom and title. */

.link-card__link {
        border-radius: var(--radius-default);
        inset: 0;
        outline-offset: 3px;
        position: absolute;
        transition: outline var(--duration-fast) linear;
        z-index: var(--z-raised);
    }

/* ===== Density variants =====
   Orthogonal to size, and about REMOVING components rather than shrinking
   them, and all keep the default scale. */

/* Brief: for dense grids. Type, tags and a two-line description, no CTA
   (the whole card is the link). */
.link-card--brief .link-card__description {
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.link-card--brief .link-card__read-more {
    display: none;
}

/* Compact: the default card minus the description copy. */
.link-card--compact .link-card__description {
    display: none;
}

/* Tiny: just the image, client and title. No format, tags, description or
   CTA. */
.link-card--tiny :is(.link-card__meta-format, .link-card__meta-sep, .link-card__tags, .link-card__description, .link-card__read-more) {
    display: none;
}

/* Headline: format, client, title and CTA. No image, description or tags
   (the macro drops the image). */
.link-card--headline :is(.link-card__tags, .link-card__description) {
    display: none;
}

/* ************************************************************************* */
/* ***************        Listing layout + filters        ****************** */
/* ************************************************************************* */

/* The browse pages (case studies, resources): topic rows, then a "Browse
   all" section with a filter sidebar. Markup comes from the listing macros
   in macros.html. Spacing sits on outer elements because .content-wrapper
   zeroes its own padding on wide screens (theme-overrides.css).

   .listing-rows       Wrapper around the related-content topic rows.
   .listing            The "Browse all" section; .listing__inner stacks its
                       heading and layout.
   .listing__count     Live result count.
   .listing__empty     No-results state (icon, title, hint, clear button). */
.listing-rows {
  padding-block-start: clamp(1rem, 0.5rem + 2vw, 2rem);
}

/* Same rhythm as the related-content rows above: the heading sits as far
   below the dotted rule as each row heading does. */
.listing {
  padding-block: var(--block-space) clamp(3rem, 2rem + 4vw, 5.5rem);
}

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

.listing__count {
  font-size: 0.875rem;
  margin: 0;
}

.listing__empty {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-block: 2rem;
  text-align: center;
}

.listing__empty p {
    margin: 0;
  }

.listing__empty-icon {
  color: rgba(var(--brand-color-deep-blue), 0.45);
  height: 2rem;
  width: 2rem;
}

.listing__empty-title {
  font-size: 1.125rem;
  font-weight: 600;
}

/* Sidebar + results layout. Mobile: the sidebar stacks above the results. Desktop: a
   fixed-width left rail, sticky so it stays in view while the results
   scroll; a tall rail scrolls on its own so no filter is ever out of reach.

   .listing-layout            The two-column grid.
   .listing-layout__sidebar   The rail (put .filter-panel or similar inside).
   .listing-layout__main      The results column. */
.listing-layout {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
.listing-layout {
    align-items: start;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    grid-template-columns: 260px minmax(0, 1fr)
}
  }

.listing-layout__sidebar {
  /* Let the column shrink rather than force-widen the layout. */
  min-width: 0;
}

@media (min-width: 1024px) {

.listing-layout__sidebar {
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    position: sticky;
    /* Clears the sticky header so the rail never hides beneath it. */
    top: 5rem
}
  }

/* min-width:0 lets the grid shrink inside the column instead of overflowing. */
.listing-layout__main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

/* ===== Filter panel =====
   Quiet, compact filters (after the USWDS search-filter pattern): each group
   is a collapsed accordion row showing how many options are selected; open
   it for a checkbox list with counts. Native checkboxes keep keyboard and
   screen reader behavior standard; the global focus ring applies. On mobile
   the whole panel sits behind one row-style toggle above the results.

   .filter-panel              Wrapper.
   .filter-panel__toggle      Accordion row button (groups and the mobile
                              panel toggle); aria-expanded turns the chevron.
   .filter-panel__body        Title, "Clear all" and groups; collapsed on
                              mobile until the panel toggle opens it.
   .filter-panel__options     A group's checkbox list.
   .filter-panel__option      One label row: checkbox, text, count. */
.filter-panel {
  color: rgb(var(--brand-color-deep-blue));
  font-size: 0.9375rem;
  /* Room for the option hover fill, which bleeds this far past the text;
     the scrolling sidebar would otherwise clip it. */
  padding-inline: 0.375rem;
}

.filter-panel__head {
  align-items: baseline;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding-block-end: 0.5rem;
}

.filter-panel__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

.filter-panel__group-heading {
  font-size: inherit;
  margin: 0;
}

.filter-panel__toggle {
  align-items: center;
  background: none;
  border: 0;
  border-top: var(--border-hairline);
  color: inherit;
  cursor: pointer;
  display: flex;
  font: inherit;
  font-weight: 500;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 0;
  text-align: start;
  width: 100%;
}

.filter-panel__selected {
  color: rgba(var(--brand-color-deep-blue), 0.75);
  font-size: 0.875rem;
  font-weight: 400;
}

.filter-panel__chevron {
  flex: none;
  height: 0.75rem;
  margin-inline-start: auto;
  transition: transform var(--duration-fast) var(--ease-standard);
  width: 0.75rem;
}

.filter-panel__toggle[aria-expanded="true"] .filter-panel__chevron {
  transform: rotate(180deg);
}

.filter-panel__body {
  border-bottom: var(--border-hairline);
}

.filter-panel__fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0 0 0.5rem;
}

.filter-panel__option {
  align-items: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
  /* Bleeds into the panel's padding so the checkbox stays aligned with the
     group heading. */
  margin-inline: -0.375rem;
  /* 28px rows: compact, and over the 24px target minimum (WCAG 2.5.8). */
  min-height: 1.75rem;
  padding-inline: 0.375rem;
  transition: background-color var(--duration-fast) linear;
}

.filter-panel__option:hover {
    background-color: var(--surface-hover);
  }

.filter-panel__checkbox {
  accent-color: var(--form-accent-color);
  flex: none;
  height: 1rem;
  margin: 0;
  width: 1rem;
}

.filter-panel__count {
  color: rgba(var(--brand-color-deep-blue), 0.75);
  font-size: 0.875rem;
  margin-inline-start: auto;
}

/* Mobile: the panel toggle replaces the title; the body opens below it.
   Desktop: always open, no panel toggle. */
@media (max-width: 1023px) {
  .filter-panel__title {
    display: none;
  }

  .filter-panel__body:not(.is-open) {
    display: none;
  }
}

/* The panel toggle closes its own row (the body may be collapsed below). */
.filter-panel__toggle--panel {
  border-bottom: var(--border-hairline);
  font-weight: 700;
}
@media (min-width: 1024px) {
.filter-panel__toggle--panel {
    display: none
}
  }

/* ===== Filter transitions =====
   taxonomyFilter (main.js) wraps each filter change in a View Transition.
   Only the named result items animate: they glide to their new positions
   and fade in or out. The rest of the page swaps instantly (no whole-page
   crossfade), and clicks pass through the transition layer so filters can
   be changed again mid-animation. */
::view-transition {
  pointer-events: none;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

::view-transition-group(*) {
  animation-duration: var(--duration-slow);
  animation-timing-function: var(--ease-emphasized);
}

/* Shared pagination component. Used by blog-pagination.module (server-rendered
   via HubL) and the search results page (client-rendered via JS after a
   fetch) — both emit this same markup/class structure so they look and
   behave identically no matter how the HTML gets built. */

/* Centered via margin + fit-content on the box itself, not justify-content
   on its children — `justify-content: center` on a scrollable flex
   container lets overflow spill past the start edge in a way some mobile
   browsers can't scroll to, which is what was causing the page-level
   horizontal scrollbar. Centering the box instead sidesteps that entirely:
   when the list fits, it's centered; when it doesn't, it fills the
   available width and scrolls internally. */
.pagination__list {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  list-style: none;
  margin-inline: auto;
  max-width: 100%;
  overflow-x: auto;
  padding: 0;
  width: fit-content;
  -webkit-overflow-scrolling: touch;
}

/* Deliberately doesn't set `display` here — each list item's single child
   (.pagination__control/.pagination__page/.pagination__ellipsis/
   .pagination__status) already declares its own display, including the
   show/hide toggling below. A `display` here would out-specificity those
   (an `.a > b` selector always beats a plain `.b` class, regardless of
   source order) and silently defeat the responsive hide/show rules —
   exactly the bug that caused the list to never actually hide. */
.pagination__list > li {
  flex: none;
}

.pagination__control {
  align-items: center;
  border-radius: var(--radius-default);
  color: rgb(var(--brand-color-deep-blue));
  display: inline-flex;
  font-weight: 600;
  gap: 0.375rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  -webkit-text-decoration: none;
  text-decoration: none;
  transition: background-color var(--duration-fast) linear;
}

/* Hover keeps the deep-blue label (orange text on the tint would only be
   about 4:1) and adds a soft brand-orange wash. */
.pagination__control:hover,
.pagination__control:focus-visible {
  background-color: rgba(var(--brand-color-orange), 0.16);
}

.pagination__control--disabled,
.pagination__control--disabled:hover {
  background-color: transparent;
  color: rgba(var(--brand-color-deep-blue), 0.35);
  cursor: default;
}

.pagination__icon {
  flex: none;
  height: 0.75rem;
  width: auto;
}

/* 44px minimum, large enough to hit comfortably with a finger. */
.pagination__page {
  align-items: center;
  border-radius: var(--radius-default);
  color: rgb(var(--brand-color-deep-blue));
  display: inline-flex;
  font-weight: 600;
  height: 2.75rem;
  justify-content: center;
  min-width: 2.75rem;
  padding: 0 0.5rem;
  -webkit-text-decoration: none;
  text-decoration: none;
  transition: background-color var(--duration-fast) linear;
}

.pagination__page:hover,
.pagination__page:focus-visible {
  background-color: rgba(var(--brand-color-orange), 0.16);
}

/* Current page: filled brand-orange chip with a deep-blue label (6.9:1),
   matching the solid orange button. */
.pagination__page--current,
.pagination__page--current:hover {
  background-color: rgb(var(--brand-color-orange));
  color: rgb(var(--brand-color-deep-blue));
}

.pagination__ellipsis {
  align-items: center;
  color: rgba(var(--brand-color-deep-blue), 0.6);
  display: inline-flex;
  height: 2.75rem;
  justify-content: center;
  min-width: 1.5rem;
  -webkit-user-select: none;
          user-select: none;
}

.pagination__status {
  color: rgba(var(--brand-color-deep-blue), 0.7);
  display: none;
  font-weight: 600;
  padding-inline: 0.5rem;
  white-space: nowrap;
}

/* 767px/768px is this theme's one consistent mobile/desktop boundary (see
   _header.css, _footer.css, _layout.css, _default-modules.css,
   _containers-dnd.css) — matching it here, rather than inventing a new one,
   is what actually closes the gap: at any width above whatever arbitrary
   number we pick, the full numbered list has been shown again with no
   guarantee it still fits, which is exactly what happened at 600–767px
   before. Below this width, numbered pages are dropped entirely in favor of
   a compact "Page X of Y" readout between icon-only prev/next controls — a
   fixed, small footprint that can never need horizontal scrolling, rather
   than trying to shrink a variable-length numbered list to fit. The
   accessible name for prev/next still comes from aria-label, not the
   (now-hidden) text, so nothing is lost for assistive tech either. */
@media (max-width: 767px) {
  .pagination__label {
    display: none;
  }

  .pagination__list-item {
    display: none;
  }

  .pagination__status {
    display: inline-flex;
  }
}

/* Testimonial block: open-style static quote display, shared by the
   testimonial block module and the featured case study module (markup from
   the testimonial_quote macro). No background, so it inherits whatever the
   surface provides. */

/* ===== Layout: grid ===== */

.testimonial-block {
  container-type: inline-size;
}

.testimonial-block--layout-two-up,
.testimonial-block--layout-three-up {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  align-items: start;
}

.testimonial-block--layout-two-up {
  grid-template-columns: repeat(2, 1fr);
}

.testimonial-block--layout-three-up {
  grid-template-columns: repeat(3, 1fr);
}

/* Stacked: vertical rhythm between quotes */
.testimonial-block--layout-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

/* Subtle rule between stacked quotes */
.testimonial-block--layout-stack.testimonial-block--divider .testimonial-block__cell + .testimonial-block__cell {
  border-top: var(--rule);
  padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  margin-top: calc(-1 * clamp(2rem, 1.5rem + 2vw, 3.5rem));
}

/* ===== Responsive: collapse grid to single column ===== */

@container (max-width: 600px) {
  .testimonial-block--layout-two-up,
  .testimonial-block--layout-three-up {
    grid-template-columns: 1fr;
  }
}

@container (min-width: 601px) and (max-width: 900px) {
  .testimonial-block--layout-three-up {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Fallback for browsers without container queries */
@media (max-width: 639px) {
  .testimonial-block--layout-two-up,
  .testimonial-block--layout-three-up {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .testimonial-block--layout-three-up {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== Alignment ===== */

.testimonial-block--align-center .testimonial-block__item {
  margin-inline: auto;
  max-width: 52rem;
  text-align: center;
}

.testimonial-block--align-center .testimonial-block__attribution {
  justify-content: center;
}

/* Left-aligned single quote gets a comfortable reading measure */
.testimonial-block--layout-stack.testimonial-block--align-left .testimonial-block__item {
  max-width: 52rem;
}

/* ===== Quote ===== */

.testimonial-block__quote {
  color: inherit;
  font-family: var(--font-header, "Red Hat Display", sans-serif);
  font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.4;
  /* Tight gap between quote and attribution so they read as one unit. */
  margin: 0 0 clamp(0.5rem, 0.375rem + 0.5vw, 0.875rem);
  text-wrap: pretty;
}

/* Hanging open-quote lives in a 0.45em gutter so the first word of the quote
   starts flush with the text column. */
.testimonial-block__quote {
  padding-left: 0.45em;
}

/* Multi-paragraph quotes: each <p> is a proper block with adaptive spacing
   between them. Default <p> margins are stripped — paragraph gap is controlled
   only by the adjacent-sibling rule so single-paragraph quotes stay tight. */
.testimonial-block__quote-text {
  display: block;
}

.testimonial-block__quote p {
  margin: 0;
}

/* Fluid paragraph gap — tight on mobile, roomier on wider viewports. Reads
   as deliberate spacing without a hard px break. */
.testimonial-block__quote p + p {
  margin-top: clamp(0.6em, 0.5em + 0.4vw, 0.95em);
}

/* Hanging open quote appended to the first paragraph; close quote on the last.
   Inline so the first/last word lines up normally — only the open mark pulls
   left into the gutter via negative margin. */
.testimonial-block__quote-text > :first-child::before {
  content: "\201C";
  display: inline;
  font-weight: inherit;
  margin-inline-start: -0.45em;
  margin-inline-end: 0.05em;
}

.testimonial-block__quote-text > :last-child::after {
  content: "\201D";
  display: inline;
  margin-inline-start: 0.05em;
}

/* If the richtext didn't wrap the body in <p> tags (plain text input), fall
   back to decorating the text wrapper directly. */
.testimonial-block__quote-text:not(:has(> p))::before {
  content: "\201C";
  margin-inline-start: -0.45em;
  margin-inline-end: 0.05em;
}

.testimonial-block__quote-text:not(:has(> p))::after {
  content: "\201D";
  margin-inline-start: 0.05em;
}

/* ===== Attribution row ===== */

.testimonial-block__attribution {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
}

@media (max-width: 479px) {
  .testimonial-block__attribution {
    gap: 0.625rem;
  }
}

/* ===== Headshot ===== */

.testimonial-block__photo-wrap {
  flex-shrink: 0;
  position: relative;
  height: 64px;
  width: 64px;
}

.testimonial-block__photo {
  background-color: rgba(var(--brand-color-deep-blue), 0.08);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50%;
  display: block;
  height: 64px;
  width: 64px;
}

/* Org logo badge — small pill overlaid bottom-right of the headshot.
   White box with a faint border so it reads against any photo. */
.testimonial-block__logo-badge {
  background: rgb(var(--brand-color-white));
  border: var(--border-hairline);
  border-radius: 6px;
  bottom: -4px;
  box-shadow: 0 1px 4px rgba(var(--brand-color-deep-blue), 0.12);
  height: 26px;
  overflow: hidden;
  padding: 3px 5px;
  position: absolute;
  right: -8px;
  width: 38px;
}

.testimonial-block__logo-badge img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

/* ===== Name / role ===== */

.testimonial-block__byline {
  flex: 1 1 auto;
  min-width: 0;
}

.testimonial-block__name {
  display: block;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
}

/* 0.62 alpha, not 0.55: at 15px this is normal-size text, so it needs 4.5:1
   against the page background. 0.55 composited over #FCFAEE measured 4.43:1
   and failed; 0.62 clears it. */
.testimonial-block__role {
  color: rgba(var(--brand-color-deep-blue), 0.62);
  font-size: 0.9375rem;
  line-height: 1.35;
  margin: 0.2em 0 0;
}

/* Job title and organization on separate lines, each wrapping evenly, so a
   long organization name never splits the title mid-phrase. */
.testimonial-block__title,
.testimonial-block__org {
  display: block;
  text-wrap: balance;
}

/* ===== Standalone logo (no headshot present) ===== */

.testimonial-block__logo--standalone {
  display: block;
  flex-shrink: 0;
  height: 28px;
  margin-left: auto;
  object-fit: contain;
  object-position: left center;
  opacity: 0.7;
  width: auto;
  max-width: 110px;
}

.testimonial-block--align-center .testimonial-block__logo--standalone {
  margin-left: 0;
  margin-top: 0.5rem;
  flex-basis: 100%;
}

/* ===== Size variants ===== */

/* Compact — sidebar quotes, case study pull-outs, tight spaces */
.testimonial-block--size-compact .testimonial-block__quote {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.2rem);
}

.testimonial-block--size-compact .testimonial-block__photo-wrap {
  height: 48px;
  width: 48px;
}

.testimonial-block--size-compact .testimonial-block__photo {
  height: 48px;
  width: 48px;
}

.testimonial-block--size-compact .testimonial-block__logo-badge {
  bottom: -3px;
  height: 22px;
  right: -6px;
  width: 32px;
}

.testimonial-block--size-compact .testimonial-block__name {
  font-size: 0.9375rem;
}

.testimonial-block--size-compact .testimonial-block__role {
  font-size: 0.8125rem;
}

/* Large — hero-area feature quotes, homepage, landing pages */
.testimonial-block--size-large .testimonial-block__quote {
  font-size: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.testimonial-block--size-large .testimonial-block__photo-wrap {
  height: 80px;
  width: 80px;
}

.testimonial-block--size-large .testimonial-block__photo {
  height: 80px;
  width: 80px;
}

.testimonial-block--size-large .testimonial-block__logo-badge {
  bottom: -4px;
  height: 30px;
  right: -10px;
  width: 44px;
}

.testimonial-block--size-large .testimonial-block__name {
  font-size: 1.0625rem;
}

.testimonial-block--size-large .testimonial-block__role {
  font-size: 1rem;
}

/* Mini: the smallest step, for side columns and the featured case study
   band. The quote reads as body copy (body font, regular weight, 16px floor)
   rather than a display quote; the byline drops to 14px. */
.testimonial-block--size-mini .testimonial-block__quote {
  font-family: var(--font-base);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
}

.testimonial-block--size-mini .testimonial-block__photo-wrap,
.testimonial-block--size-mini .testimonial-block__photo {
  height: 40px;
  width: 40px;
}

.testimonial-block--size-mini .testimonial-block__logo-badge {
  bottom: -3px;
  height: 18px;
  right: -5px;
  width: 26px;
}

.testimonial-block--size-mini .testimonial-block__name,
.testimonial-block--size-mini .testimonial-block__role {
  font-size: 0.875rem;
}

/* ===== Portrait layout: square headshot in a left column =====
   Placed after the size variants so its photo sizing wins over compact/large.

   Two columns at every width — the image just gets smaller on narrow screens
   via the clamped column, so no reflow and no source-order/visual-order
   mismatch to reason about.

   Row trick worth understanding: the photo spans the full height, and a
   spanning grid item distributes its height across every row it covers. With
   only two rows that pushed the quote and the byline apart by however much
   taller the photo was. The fix is two empty 1fr spacer rows — the photo spans
   all four, the text sits in the middle two, and ALL the slack collects in the
   spacers instead of between the quote and the name. row-gap is therefore 0;
   the quote's own margin-bottom is the only space under it. */

.testimonial-block--layout-portrait {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.testimonial-block--layout-portrait .testimonial-block__item--portrait {
  /* Mirrors .testimonial-block__quote's font-size so the indent below can be
     derived from it. Redeclared for the compact/large variants further down. */
  --tb-quote-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
  /* The quote hangs its opening mark into a 0.45em gutter, so the quote's
     first WORD starts 0.45em in. The byline is indented by the same amount so
     it lines up with the text rather than with the hanging quote mark. Worked
     out in calc() because the byline's own font-size is smaller, which would
     make a plain 0.45em resolve to the wrong distance. */
  --tb-text-indent: calc(0.45 * var(--tb-quote-size));

  column-gap: clamp(0.875rem, 2.5vw, 2rem);
  display: grid;
  grid-template-columns: clamp(5rem, 20%, 13rem) minmax(0, 1fr);
  /* Quote on row 1, byline on row 2, then a 1fr spacer collects any slack
     below. The photo spans the whole thing but is anchored to the top so
     its top edge lines up with the first line of the quote. */
  grid-template-rows: auto auto 1fr;
  max-width: none;
  row-gap: 0;
  text-align: left;
}

.testimonial-block--size-compact.testimonial-block--layout-portrait .testimonial-block__item--portrait {
  --tb-quote-size: clamp(1rem, 0.95rem + 0.25vw, 1.2rem);
}

.testimonial-block--size-large.testimonial-block--layout-portrait .testimonial-block__item--portrait {
  --tb-quote-size: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
}

.testimonial-block--size-mini.testimonial-block--layout-portrait .testimonial-block__item--portrait {
  --tb-quote-size: 1rem;
}

.testimonial-block--layout-portrait .testimonial-block__item--portrait .testimonial-block__photo-wrap {
  align-self: start;
  grid-column: 1;
  grid-row: 1 / -1;
  height: auto;
  width: 100%;
}

/* Square crop, top-weighted so faces stay in frame. */
.testimonial-block--layout-portrait .testimonial-block__item--portrait .testimonial-block__photo {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-default);
  height: auto;
  width: 100%;
}

/* Line breaking: `pretty` on the quote and `balance` on the byline. The quote
   is a prose run of unknown length, which is exactly what `pretty` is for — it
   prevents a stranded last word without the line cap `balance` carries. The
   byline is one or two short lines, which is `balance`'s intended case and
   stays under the ~6-line limit browsers impose on it. */
.testimonial-block--layout-portrait .testimonial-block__item--portrait .testimonial-block__quote {
  grid-column: 2;
  grid-row: 1;
  margin-bottom: 0.6rem;
  text-wrap: pretty;
}

.testimonial-block--layout-portrait .testimonial-block__item--portrait .testimonial-block__name,
.testimonial-block--layout-portrait .testimonial-block__item--portrait .testimonial-block__role {
  text-wrap: balance;
}

.testimonial-block--layout-portrait .testimonial-block__item--portrait .testimonial-block__attribution {
  grid-column: 2;
  grid-row: 2;
  padding-left: var(--tb-text-indent);
}

/* Badge tucks inside the square's corner rather than hanging off a circle. */
.testimonial-block--layout-portrait .testimonial-block__item--portrait .testimonial-block__logo-badge {
  bottom: 8px;
  height: 30px;
  padding: 4px 6px;
  right: 8px;
  width: 44px;
}

@media (max-width: 639px) {
  /* On mobile center everything regardless of the chosen alignment —
     headshot, quote text, and byline all sit in a tidy centered column.
     Selectors are intentionally specific here to beat the base portrait
     rule's text-align: left. */
  .testimonial-block,
  .testimonial-block__item {
    text-align: center;
  }

  .testimonial-block--align-left .testimonial-block__item,
  .testimonial-block--layout-portrait .testimonial-block__item--portrait {
    margin-inline: auto;
    text-align: center;
  }

  .testimonial-block__attribution {
    justify-content: center;
  }

  /* Collapse the two-column portrait grid to a single centered column:
     small headshot (NOT full width), then quote, then byline. */
  .testimonial-block--layout-portrait {
    align-items: center;
  }

  .testimonial-block--layout-portrait .testimonial-block__item--portrait {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
  }

  .testimonial-block--layout-portrait .testimonial-block__item--portrait .testimonial-block__photo-wrap {
    align-self: center;
    width: 5rem;
  }

  .testimonial-block--layout-portrait .testimonial-block__item--portrait .testimonial-block__quote {
    margin-bottom: 0;
  }

  /* Drop the hanging-quote text indent on the attribution — there's no
     column alignment to maintain in the stacked view. */
  .testimonial-block--layout-portrait .testimonial-block__item--portrait .testimonial-block__attribution {
    justify-content: center;
    padding-left: 0;
  }

  /* Only the badge needs to come down with the image. */
  .testimonial-block--layout-portrait .testimonial-block__item--portrait .testimonial-block__logo-badge {
    bottom: 5px;
    height: 20px;
    padding: 2px 4px;
    right: 5px;
    width: 30px;
  }

  /* Byline on its own line below the centered headshot. */
  .testimonial-block__byline {
    flex-basis: 100%;
    text-align: center;
  }
}

/* ===== On a dark surface (e.g. the featured case study overlay) ===== */

.testimonial-block--on-dark {
  color: rgb(var(--brand-color-white));
}

.testimonial-block--on-dark .testimonial-block__name {
  color: rgb(var(--brand-color-white));
}

.testimonial-block--on-dark .testimonial-block__role {
  color: rgba(var(--brand-color-white), 0.8);
}

.testimonial-block--on-dark .testimonial-block__photo {
  background-color: rgba(var(--brand-color-white), 0.15);
}

/* Text columns: body copy flowed into balanced columns, for longer intros
   (the case study Challenge, the About story). Wrap a rich text block's
   content in .text-columns and the heading spans every column.

   The column count adapts to both the space and the copy. Columns never get
   narrower than 18rem (a comfortable measure), so the browser fits as many
   as the width allows: one on phones, then two. Copy with four or more
   paragraphs may use three, so short copy never thins out into three
   skinny columns. Paragraphs may continue across a column gap, which keeps
   the columns level; orphan/widow limits stop a stray line stranding at
   either end. The global rich-text measure is lifted because each column is
   already well under it. */
/* .cs-challenge-copy is the old name, still used by some saved case study
   pages. It gets the same styling; new content should use .text-columns. */
.text-columns,
.cs-challenge-copy {
  column-gap: clamp(2rem, 4vw, 3.5rem);
  columns: 18rem 2;
}
.text-columns:has(> p:nth-of-type(4)), .cs-challenge-copy:has(> p:nth-of-type(4)) {
    column-count: 3;
  }
/* The spanning heading owns the gap below it (0.75rem, the space a normal
     h2 gives its first paragraph elsewhere). Paragraphs carry their rhythm
     as margin-BOTTOM, not top, so the first line of every column starts on
     the same baseline. */
.text-columns > :is(h2, h3), .cs-challenge-copy > :is(h2, h3) {
    column-span: all;
    margin-bottom: 0.75rem;
    margin-top: 0;
  }
.text-columns p, .cs-challenge-copy p {
    margin-bottom: 1em;
    margin-top: 0;
    max-width: none;
    orphans: 3;
    widows: 3;
  }
.text-columns p:last-child, .cs-challenge-copy p:last-child {
    margin-bottom: 0;
  }

/* Tabs (WAI-ARIA tabs pattern). Shared by the tabs module and any module that
   renders the tabs_list / tab_panel_attrs macros; behavior is in js/tabs.js. */

.tabs {
  --tabs-border-color: rgb(var(--brand-color-deep-blue));
  --tabs-active-color: rgb(var(--brand-color-orange-text));
  --tabs-text-color: rgb(var(--brand-color-deep-blue));
  color: var(--tabs-text-color);
}

.tabs__heading {
  margin: 0 0 1rem;
}

.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  border-bottom: 1px solid var(--tabs-border-color);
  position: relative;
}

/* Animated active-tab indicator, positioned/animated by module.js. Hidden
   until JS marks the component ready — until then, the instant border-color
   swap on .tabs__tab[aria-selected="true"] below is the visible indicator
   (no-JS/progressive-enhancement fallback). */
.tabs__indicator {
  display: none;
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  background-color: var(--tabs-active-color);
  pointer-events: none;
}

.tabs__indicator--vertical {
  bottom: auto;
  right: -1px;
  left: auto;
  top: 0;
  height: auto;
  width: 2px;
}

.tabs[data-tabs-ready] .tabs__indicator {
  display: block;
}

.tabs[data-tabs-ready] .tabs__tab[aria-selected="true"] {
  border-bottom-color: transparent;
}

.tabs__tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--tabs-text-color);
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: -1px;
  padding: 0.75rem 0.25rem;
}

.tabs__tab:hover {
  color: var(--tabs-active-color);
}

.tabs__tab[aria-selected="true"] {
  border-bottom-color: var(--tabs-active-color);
  color: var(--tabs-active-color);
}

.tabs__panels {
  padding-top: 1.5rem;
  /* Anchor for the outgoing panel while tabs cross-slide (module.js). */
  position: relative;
}

.tabs__panel > :first-child {
  margin-top: 0;
}

.tabs__panel > :last-child {
  margin-bottom: 0;
}

/* Vertical layout */

.tabs[data-orientation="vertical"] {
  display: flex;
  gap: 2rem;
}

.tabs[data-orientation="vertical"] .tabs__list {
  border-bottom: 0;
  border-right: 1px solid var(--tabs-border-color);
  flex: none;
  flex-direction: column;
  gap: 0.25rem;
  width: 12rem;
}

.tabs[data-orientation="vertical"] .tabs__tab {
  border-bottom: 0;
  border-right: 2px solid transparent;
  margin-bottom: 0;
  margin-right: -1px;
  padding: 0.6rem 1rem;
  text-align: left;
}

.tabs[data-orientation="vertical"] .tabs__tab[aria-selected="true"] {
  border-right-color: var(--tabs-active-color);
}

.tabs[data-orientation="vertical"][data-tabs-ready] .tabs__tab[aria-selected="true"] {
  border-right-color: transparent;
}

.tabs[data-orientation="vertical"] .tabs__panels {
  flex: 1;
  min-width: 0;
  padding-top: 0;
}

/* Vertical tabs collapse to a horizontal scroll row on narrow screens, since
   a side rail competes too much with the content for width. */
@media (max-width: 767px) {
  .tabs[data-orientation="vertical"] {
    flex-direction: column;
  }

  .tabs[data-orientation="vertical"] .tabs__list {
    border-bottom: 1px solid var(--tabs-border-color);
    border-right: 0;
    flex-direction: row;
    overflow-x: auto;
    width: auto;
  }

  .tabs[data-orientation="vertical"] .tabs__tab {
    border-bottom: 2px solid transparent;
    border-right: 0;
    margin-bottom: -1px;
    margin-right: 0;
  }

  .tabs[data-orientation="vertical"] .tabs__tab[aria-selected="true"] {
    border-bottom-color: var(--tabs-active-color);
    border-right-color: transparent;
  }

  .tabs[data-orientation="vertical"][data-tabs-ready] .tabs__tab[aria-selected="true"] {
    border-bottom-color: transparent;
  }

  .tabs[data-orientation="vertical"] .tabs__panels {
    padding-top: 1.5rem;
  }
}

/* Accordion (Figma: "USA Accordion" 4949:7891, after USWDS).
   Question rows sit on a tinted bar; an open answer sits below on a lighter
   panel inside a 4px frame of the same tint. Items are separated by a gap
   and the stack has rounded outer corners. Colors come from the color
   style (or custom colors, set inline by the accordion_block macro). Shared
   by the accordion module and any module that renders accordion_block. */

.accordion {
  /* Green (default) */
  --accordion-question-bg: var(--tint-green);
  --accordion-question-text: rgb(var(--brand-color-deep-blue));
  --accordion-answer-bg: rgb(var(--brand-color-white));
  --accordion-answer-text: rgb(var(--brand-color-deep-blue));
  --accordion-frame: var(--tint-green);
  --accordion-control-text: rgb(var(--brand-color-deep-blue));
  color: var(--accordion-answer-text);
}

.accordion--cream {
  --accordion-question-bg: var(--tint-tan);
  --accordion-frame: var(--tint-tan);
}

.accordion--white {
  --accordion-question-bg: rgb(var(--brand-color-white));
  --accordion-frame: rgb(var(--brand-color-white));
  --accordion-answer-bg: rgb(var(--brand-color-white));
}

.accordion--white .accordion__item {
  box-shadow: 0 0 0 1px rgba(var(--brand-color-deep-blue), 0.1);
}

.accordion--dark {
  --accordion-question-bg: rgb(var(--brand-color-navy));
  --accordion-question-text: rgb(var(--brand-color-white));
  --accordion-answer-bg: rgb(var(--brand-color-deep-blue));
  --accordion-answer-text: rgb(var(--brand-color-cream));
  --accordion-frame: rgb(var(--brand-color-navy));
  --accordion-control-text: rgb(var(--brand-color-white));
  --focus-ring-color: var(--focus-ring-color-on-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.accordion--dark .accordion__panel-content a {
  color: rgb(var(--brand-color-white));
}

.accordion__heading {
  margin: 0 0 1rem;
}

/* ===== Expand all / Collapse all ===== */
.accordion__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  justify-content: flex-end;
  margin: 0 0 0.5rem;
}

.accordion__control {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  color: var(--accordion-control-text);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  min-height: 32px;
  padding: 0.25rem 0.375rem;
  text-decoration-color: var(--link-underline-rest);
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-underline-thickness);
  text-underline-offset: var(--link-underline-offset);
}

.accordion__control:hover {
  background-color: var(--accordion-question-bg);
  color: var(--accordion-question-text);
  text-decoration-color: var(--link-underline-hover);
}

/* ===== Items ===== */
.accordion__items {
  border-radius: var(--accordion-radius, 8px);
  display: flex;
  flex-direction: column;
  gap: var(--accordion-gap, 8px);
  /* Rounds the outer corners of the first and last items only. */
  overflow: clip;
}

.accordion__item,
.accordion__item-heading {
  margin: 0;
}

.accordion__trigger {
  align-items: center;
  background-color: var(--accordion-question-bg);
  border: 0;
  color: var(--accordion-question-text);
  cursor: pointer;
  display: flex;
  font: inherit;
  /* 16px -> 18px */
  font-size: clamp(1rem, 0.9489rem + 0.2273vw, 1.125rem);
  font-weight: 600;
  gap: 1.25rem;
  justify-content: space-between;
  line-height: 1.16;
  min-height: 56px;
  padding: 1rem 1.25rem;
  text-align: left;
  transition: background-color 150ms linear;
  width: 100%;
}

.accordion__trigger:hover {
  /* A touch deeper than the bar, whatever the color style. */
  background-color: color-mix(in srgb, var(--accordion-question-bg) 92%, rgb(var(--brand-color-deep-blue)));
}

.accordion--dark .accordion__trigger:hover {
  background-color: color-mix(in srgb, var(--accordion-question-bg) 88%, rgb(var(--brand-color-white)));
}

/* Global ring, inset so it isn't clipped by the rounded container. */
.accordion__trigger {
  --focus-ring-offset: -4px;
}

.accordion__trigger:focus-visible {
  box-shadow: none;
}

.accordion__question {
  flex: 1;
  min-width: 0;
  /* The question sits in an <h3>, which inherits the theme's balanced
     heading wrapping; normal wrapping reads better in a full-width row. */
  text-wrap: pretty;
}

.accordion__icon {
  flex: none;
  height: 24px;
  width: 24px;
}

/* Chevron: rotates when open. */
.accordion--icon-chevron .accordion__icon {
  fill: currentColor;
  height: 20px;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  width: 20px;
}

.accordion--icon-chevron .accordion__trigger[aria-expanded="true"] .accordion__icon {
  transform: rotate(180deg);
}

/* Plus/minus: the vertical bar folds away, so + morphs into -. */
.accordion__icon--plus rect {
  fill: currentColor;
}

.accordion__icon-v {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.accordion__trigger[aria-expanded="true"] .accordion__icon-v {
  transform: rotate(90deg) scaleY(0);
}

/* ===== Answer panel ===== */
/* A subtle hairline on three sides keeps the panel visually connected to
   the question bar above without feeling clunky. The frame sits on the inner
   content (not the animated panel), so a collapsed panel doesn't leave a
   border sliver behind. */
.accordion__panel-content {
  background-color: var(--accordion-answer-bg);
  border: var(--border-hairline);
  border-top: 0;
  color: var(--accordion-answer-text);
  font-size: 1rem;
  line-height: 1.5;
  padding: 1rem 1.25rem 1.25rem;
}

/* Dark theme uses a lighter border tint so the hairline reads on dark bg. */
.accordion--dark .accordion__panel-content {
  border-color: rgba(var(--brand-color-white), 0.12);
}

.accordion__panel-content > :first-child {
  margin-top: 0;
}

.accordion__panel-content > :last-child {
  margin-bottom: 0;
}

.accordion__panel-content p {
  margin: 0 0 1em;
}

.accordion__panel-content p:last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .accordion__trigger {
    gap: 1rem;
    padding-inline: 1rem;
  }

  .accordion__panel-content {
    padding-inline: 1rem;
  }
}

/* ===== Compact: tighter rows for accordions that sit beside other content ===== */
.accordion--compact .accordion__trigger {
  font-size: 1rem;
  gap: 1rem;
  min-height: 44px;
  padding: 0.625rem 1rem;
}

.accordion--compact .accordion__panel-content {
  padding: 0.75rem 1rem 1rem;
}

/* Card row: a row of small, equal cards, each with a logo and a big number
   (for example "Featured deals": logo, $9K MRR). The number is the star. As many cards per row as fit (at least 9.5rem
   each), so five sit on one line on desktop and wrap evenly on smaller
   screens. Cards use the shared .card surface.

   .card-row          The list.
   .card-row__item    One card (put .card on it too).
   .card-row__logo    The logo (give it the client's name as alt text and its
                      width / height as --logo-aspect, e.g. style="--logo-aspect: 2.5").
   .card-row__value   The number, large.
   .card-row__unit    A small unit inside the number, e.g. MRR. */

.card-row {
  display: grid;
  gap: var(--row-gap);
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

/* A label above the row (the eyebrow) gets the same gap a section heading
   gives its content. */
.heading-eyebrow + .card-row {
  margin-top: var(--row-gap);
}

.card-row__item {
  align-items: center;
  margin: 0;
  text-align: center;
}

/* Optical sizing (the --logo-balance token, shared with the logo lineup and
   pillar cards): a logo is drawn at 3.25rem x aspect^balance, where aspect is
   its width / height, set per logo as --logo-aspect. So tall and square marks
   get more height and wide wordmarks less, and they carry the same visual
   weight. Padding tops every logo up to the same 4rem slot, so the numbers
   below line up across the cards. Logos with no --logo-aspect are treated as
   a typical 3:1 wordmark. */
.card-row__logo {
  --logo-height: 3rem;

  box-sizing: content-box;
  display: block;
  height: var(--logo-height);
  margin-inline: auto;
  max-width: 8rem;
  object-fit: contain;
  padding-block: calc((4rem - var(--logo-height)) / 2);
}

@supports (height: calc(1px * pow(2, 1))) {
  .card-row__logo {
    --logo-height: calc(3.25rem * pow(var(--logo-aspect, 3), var(--logo-balance)));
  }
}

.card-row__value {
  color: rgb(var(--brand-color-black));
  font-family: var(--font-header);
  font-size: var(--font-size-h2);
  font-weight: 700;
  letter-spacing: var(--tracking-h2);
  line-height: var(--line-height-h2);
  margin: 0;
}

.card-row__unit {
  color: rgba(var(--brand-color-deep-blue), 0.62);
  font-family: var(--font-base);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
}

/* ************************************************************************* */
/* ***************                  Modal                 ****************** */
/* ************************************************************************* */

/* One modal for the whole theme, built on the native <dialog> element:
   showModal() puts it in the browser's top layer (always centered in the
   viewport, whatever the scroll position), makes the page behind it inert,
   closes on Escape and returns focus to the opener. Wiring lives in main.js:
   any [data-modal-open="<dialog id>"] opens it, [data-modal-close] or a
   click on the backdrop closes it.

   <dialog class="modal" id="x" aria-labelledby="x-title">
     <div class="modal__panel">
       <div class="modal__header">
         <h2 class="modal__title" id="x-title">…</h2>
         <button class="modal__close" data-modal-close>…</button>
       </div>
       <div class="modal__body">…</div>
     </div>
   </dialog> */

.modal {
  background: transparent;
  border: 0;
  color: rgb(var(--brand-color-deep-blue));
  /* Reset type so a modal reads the same wherever its markup sits (e.g.
     inside the footer's smaller text). */
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  margin: auto;
  text-align: start;
  max-height: calc(100dvh - 2rem);
  max-width: min(36rem, 100vw - 2rem);
  overflow: visible;
  padding: 0;
  width: 100%;
}

.modal::backdrop {
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    background-color: rgba(var(--brand-color-ink), 0.6);
  }

.modal[open] {
    animation: modal-in var(--duration-base) var(--ease-standard);
  }

.modal[open]::backdrop {
    animation: modal-backdrop-in var(--duration-base) linear;
  }

/* Shown as a regular dialog while a reCAPTCHA challenge is open (main.js),
   so the challenge can sit above it: same place, no replayed entrance. */
.modal[open]:not(:modal) {
  inset: 0;
  position: fixed;
  z-index: var(--z-overlay);
}

.modal[data-modal-swapping],
.modal[data-modal-swapping]::backdrop {
  animation: none;
}

/* The page behind an open modal doesn't scroll. */
html:has(.modal[open]) {
  overflow: hidden;
}

.modal__panel {
  background-color: var(--card-bg);
  border-radius: var(--radius-default);
  box-shadow: var(--shadow-elevation-high);
  max-height: inherit;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.25rem, 0.9rem + 1.5vw, 2.25rem);
}

.modal__header {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.modal__title {
  font-family: var(--font-header);
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  margin: 0;
  text-wrap: balance;
}

.modal__description {
  color: rgba(var(--brand-color-deep-blue), 0.75);
  margin: 0.5rem 0 0;
}

/* 44px target, quiet until hovered. */
.modal__close {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  color: inherit;
  display: inline-flex;
  flex: none;
  height: 2.75rem;
  justify-content: center;
  margin: -0.5rem -0.5rem 0 0;
  transition: background-color var(--duration-fast) linear;
  width: 2.75rem;
}
.modal__close:is(:hover, :focus-visible) {
    background-color: rgba(var(--brand-color-deep-blue), 0.08);
  }
.modal__close svg {
    height: 1rem;
    width: 1rem;
  }

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}

@keyframes modal-backdrop-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal[open] {
    animation: none;
  }
}

/* ************************************************************************* */
/* ***************                 Search                 ****************** */
/* ************************************************************************* */

/* Site search form: the search results page and every search_modal
   (macros.html). Layout only: the input and button use the theme's standard
   form field and .button styles. */

.site-search {
  align-items: stretch;
  display: flex;
  gap: 0.5rem;
  margin: 0;
  max-width: 36rem;
}

.site-search input[type="search"] {
    flex: 1;
    min-height: 2.75rem;
    min-width: 0;
  }

.site-search .button {
    flex: none;
  }

/* "Only showing blog posts. Search the whole site." under a scoped search. */
.site-search__scope {
  color: rgba(var(--brand-color-deep-blue), 0.75);
  font-size: 0.875rem;
  margin: 0.75rem 0 0;
}

@media (max-width: 479px) {
  .site-search {
    flex-direction: column;
  }

  .site-search .button {
    width: 100%;
  }
}

/* ************************************************************************* */
/* ***************              Editor notice             ****************** */
/* ************************************************************************* */

/* Messages for whoever is editing the page: empty states, unknown tags,
   missing required content. Always rendered behind an is_in_editor check so live
   visitors never see them. */

.editor-notice {
  background-color: var(--tint-tan);
  border: var(--rule);
  border-radius: var(--radius-default);
  color: rgb(var(--brand-color-deep-blue));
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
  padding: 0.75rem 1rem;
}

.editor-notice strong {
    font-weight: 600;
  }

.editor-notice > * + * {
    margin-top: 0.25rem;
  }

/* Entrance motion (see src/js/main.js for the Motion One logic): the main
   content area fades in once when the page is ready, images fade in as each
   one loads, and data-reveal elements fade and rise in as they're reached.

   The has-page-reveal class is added to the root html element by an
   inline, blocking script in base.html's document head — before this
   stylesheet or main.js has even loaded — specifically so the page starts
   hidden with no flash of visible content that then jumps to hidden and
   fades back in. That script skips adding the class entirely when
   prefers-reduced-motion is set, so those visitors never have anything
   hidden here in the first place: no class, no opacity rule, no motion,
   full content immediately.

   main.js marks each element data-revealed as it shows it, so these rules
   stop matching and the element's own opacity applies again.

   Failsafe: base.html adds reveal-timeout if the page fade hasn't started
   within 1.5s (slow mobile data, or a script error), which switches all of
   these rules off so content shows rather than sitting invisible. */
.has-page-reveal:not(.reveal-timeout) #main-content,
.has-page-reveal:not(.reveal-timeout) img:not([data-revealed]),
.has-page-reveal:not(.reveal-timeout) [data-reveal]:not([data-revealed]) {
  opacity: 0;
}

/* Detail pages (case study, video) reveal plain top-level DnD sections
   without needing the attribute. A section holding a module with its own
   data-reveal is left to that module, so nothing animates twice. Kept as
   its own rule so a browser without :has() drops only this one. */
.has-page-reveal:not(.reveal-timeout) .body-container--detail > .dnd-section:not([data-revealed]):not(:has([data-reveal])) {
  opacity: 0;
}

/* ************************************************************************* */
/* ***************            Dither Backgrounds          ****************** */
/* ************************************************************************* */

/* Shared layer for the dither engine (/js/dither.js). Drop a .dither layer
   (dither_layer macro) into any .has-dither parent; content after it sits
   above. The canvas fades in once the first frame is drawn so it never
   pops in. */
.has-dither {
  isolation: isolate;
  position: relative;
}

.dither {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.dither__canvas {
  display: block;
  /* dither.js sets an exact pixel size; these are the fallback. */
  height: 100%;
  /* Keep 1px dots crisp: never smooth/resample them. */
  image-rendering: pixelated;
  opacity: 0;
  transition: opacity 600ms ease-out;
  /* Own compositor layer, so scrolling moves it in whole pixels instead of
     re-rasterizing it at fractional offsets (the scroll "flicker"). */
  will-change: transform;
  width: 100%;
}

.dither.is-ready .dither__canvas {
  opacity: 1;
}

/* Subtle right-leaning backdrop accent, shared by the system pages
   (partials/system-dither.html). The canvas fills its positioned parent; the mask fades it out from the left so dots only
   appear on the right two-thirds. Hidden on phones, where it's a light
   desktop-only detail. */
.system-dither {
  inset: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 15%, black 65%);
  mask-image: linear-gradient(to right, transparent 15%, black 65%);
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

@media (max-width: 767px) {
  .system-dither {
    display: none;
  }
}

/* ************************************************************************* */
/* ***************               Panel Page               ****************** */
/* ************************************************************************* */

/* Shared layout for the landing and contact templates: a white, centered
   hero (its own DnD area), then the main DnD area on a raised cream panel
   that overlaps the hero's bottom edge. The hero items and the panel stagger
   in on load (data-reveal-targets in the templates, see main.js). */

.panel-page {
  --panel-page-space: clamp(3rem, 2rem + 4vw, 6rem);
  --panel-overlap: clamp(1.5rem, 1rem + 2vw, 2.5rem);

  padding-bottom: var(--panel-page-space);
}

.panel-page__hero {
  background-color: rgb(var(--brand-color-white));
  border-bottom: var(--border-hairline);
  padding-block: var(--panel-page-space) calc(var(--panel-page-space) + var(--panel-overlap));
  text-align: center;
}

/* Lede under the headline, at a comfortable reading measure. */

.panel-page__hero h1 + p {
    font-size: var(--font-size-lead);
    margin-inline: auto;
    max-width: 60ch;
  }

/* Optional breadcrumbs above the hero, on the hero's white, so they read
   as part of it (job posting template). */
.panel-page__breadcrumbs {
  background-color: rgb(var(--brand-color-white));
  padding-top: 1rem;
}

.panel-page__panel {
  background-color: var(--surface-panel);
  border: var(--border-hairline);
  border-radius: var(--radius-default);
  box-shadow: var(--shadow-panel-inset);
  margin-inline: auto;
  margin-top: calc(var(--panel-overlap) * -1);
  max-width: var(--site-width);
  padding: clamp(1.5rem, 1rem + 2.5vw, 4rem);
  position: relative;
}

.panel-page__panel .dnd-section {
    padding-inline: 0;
  }

/* The hero and panel set the outer spacing, so their sections only need
   space between each other. */
:is(.panel-page__hero, .panel-page__panel) .dnd-section {
  padding-block: 0;
}
:is(.panel-page__hero, .panel-page__panel) .dnd-section + .dnd-section {
    padding-top: var(--block-space);
  }
:is(.panel-page__hero, .panel-page__panel) .dnd-section .dnd-row + .dnd-row {
    margin-top: var(--row-gap);
  }

/* Summary box (after the USWDS summary box): a tinted, lightly bordered
   box with a heading and a short list of key points. Shared, so other
   modules can use it too: summary-box.module and the job posting's
   apply box (job-posting.module). */

.summary-box {
  --summary-box-bg: var(--tint-green-soft);
  --summary-box-border: rgb(var(--brand-color-green));
  --summary-box-text: rgb(var(--brand-color-deep-blue));
  background-color: var(--summary-box-bg);
  border: 1px solid var(--summary-box-border);
  border-radius: var(--radius-default);
  color: var(--summary-box-text);
  padding: clamp(1.25rem, 1.0795rem + 0.7576vw, 1.75rem);
}

.summary-box--blue {
  --summary-box-bg: var(--tint-blue);
  --summary-box-border: var(--tint-blue-strong);
}

.summary-box--cream {
  --summary-box-bg: rgb(var(--brand-color-cream));
  --summary-box-border: rgb(var(--brand-color-tan));
}

.summary-box--white {
  --summary-box-bg: rgb(var(--brand-color-white));
  --summary-box-border: rgba(var(--brand-color-deep-blue), 0.15);
}

/* Dark: also carries the theme's .on-dark class, so links turn white. */
.summary-box--dark {
  --summary-box-bg: rgb(var(--brand-color-navy));
  --summary-box-border: var(--tint-navy-raised);
  --summary-box-text: rgb(var(--brand-color-cream));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Same visual size whatever the heading level, so the outline can be
   right without changing the look. */
.summary-box__heading {
  color: inherit;
  font-family: var(--font-header);
  font-size: var(--font-size-h4, 1.375rem);
  font-weight: 700;
  letter-spacing: var(--tracking-heading, -0.01em);
  line-height: var(--line-height-h4, 1.25);
  margin: 0 0 0.75rem;
}

.summary-box__text {
  /* Comfortable line length even when the box is wide. */
  max-width: 60ch;
}

.summary-box__text > :first-child {
  margin-top: 0;
}

.summary-box__text > :last-child {
  margin-bottom: 0;
}

.summary-box__text :is(ul, ol) {
  margin-block: 0;
  padding-left: 1.25rem;
}

.summary-box__text li {
  margin-block: 0.5em;
  padding-left: 0.25rem;
}

.summary-box__text li::marker {
  color: inherit;
}

/* Blog Navigation */

.blog-search form {
  align-items: flex-start;
  background-color: transparent;
  border: none;
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  max-width: 360px;
  padding: 0;
}

.blog-search form label {
  flex: 1 1 100%;
}

.blog-search form input {
  flex: 1;
}

@media (max-width: 767px) {
  .blog-search form {
    margin: 0 auto;
  }
}

/* Byline: avatar + "Author · Date · 6 min read" on one line (Medium style).
   One separator rule spaces every item identically. */
.author-credit[data-has-avatar] {
    align-items: center;
    display: flex;
    gap: 0.5rem;
  }
.author-credit__avatar {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-pill);
    height: auto;
    object-fit: cover;
    width: 1.75rem;
  }
.author-credit__avatar-link {
      display: flex;
    }
.author-credit__info {
    align-items: baseline;
    color: rgb(var(--brand-color-deep-blue));
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8125rem;
  }
.author-credit__info > * + *::before {
    content: "\00B7";
    margin-inline: 0.4em;
    opacity: 0.6;
  }
.author-credit__name {
    font-weight: 600;
    -webkit-text-decoration: none;
    text-decoration: none;
  }
.author-credit__time,
  .author-credit__read-time {
    color: rgba(var(--brand-color-deep-blue), 0.65);
  }

/* Blog Post Previews. Surface, hover lift, image zoom and title underline
   come from .card / .card--interactive / .link-title. */
.post-preview {
  gap: 0.75rem;
}
/* Author and tag links inside the card stay un-underlined; the title
     link carries the card's link affordance. */
.post-preview :where(a:not(.link-title, .chip)) {
    color: currentColor;
    font-weight: inherit;
    -webkit-text-decoration: none;
    text-decoration: none;
  }
.post-preview__image-link {
    aspect-ratio: 3 / 2;
    display: block;
  }
.post-preview__title {
    color: rgba(var(--brand-color-deep-blue), 0.85);
    font-family: var(--font-header);
    font-size: clamp(1.25rem, 1.1rem + 0.6cqi, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
    text-wrap: balance;
  }
.post-preview:is(:hover, :focus-within) .post-preview__title-link {
    color: rgb(var(--brand-color-deep-blue));
  }
.post-preview__description {
    color: var(--text-muted);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    margin: 0;
  }
.post-preview__meta {
    margin-top: auto;
    padding-top: 0.25rem;
  }
.post-preview__meta__author-name {
        font-weight: 600;
      }
.post-preview__tags {
    margin-top: 0.25rem;
  }

/* Blog Listing Layout */

.blog-listing {
  margin-block: 4rem;
  margin-inline: auto;
  max-width: var(--site-width, 1280px);
}

/* Active filter left, search right; search alone sits at the right. */

.blog-listing__toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    justify-content: space-between;
    margin-bottom: 2rem;
  }

.blog-listing__search {
    margin-inline-start: auto;
  }

.blog-listing__filter {
    color: rgba(var(--brand-color-deep-blue), 0.75);
    margin: 0;
  }

.blog-listing__filter__clear {
      align-items: center;
      background-color: rgba(var(--brand-color-deep-blue), 0.1);
      border-radius: var(--radius-pill);
      color: rgb(var(--brand-color-deep-blue));
      display: inline-flex;
      justify-content: center;
      margin-left: 0.125rem;
      /* 24px minimum target (WCAG 2.5.8); the icon stays small. */
      min-block-size: 1.5rem;
      min-inline-size: 1.5rem;
      padding: 0.125rem;
      vertical-align: middle;
    }

.blog-listing__filter__clear-icon {
        aspect-ratio: 1 / 1;
        height: 0.875em;
        width: auto;
      }

.blog-listing__post {
    margin: 0;
  }

.blog-listing__posts {
      display: grid;
      gap: 3.5rem 2rem;
      grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
      list-style-type: none;
      margin-block: 0;
      margin-inline: 0;
      padding-inline: 0;
    }

/* Pagination status: subtle muted line between the posts grid and the
     page controls. Centered, small, low contrast — orients without
     pulling attention. */

.blog-listing__status {
    color: rgba(var(--brand-color-deep-blue), 0.6);
    font-size: 0.8125rem;
    letter-spacing: 0.005em;
    margin: 3rem 0 0;
    text-align: center;
  }

.blog-listing__pagination {
    margin-top: 0.75rem;
  }

/* Blog Post */

/* Utilizing Ryan Mulligan's "CSS Grid Layout Breakouts" technique:
 * https://ryanmulligan.dev/blog/layout-breakouts/ */
.blog-post {
  --blog-gap: 2rem;
  --blog-full-width: minmax(var(--blog-gap), 1fr);
  --blog-content-width: min(65ch, 100% - var(--blog-gap) * 2);
  --blog-popout: minmax(0, 2rem);
  --blog-feature: minmax(0, 5rem);

  color: rgba(var(--brand-color-deep-blue), 0.9);
  display: grid;
  font-size: 1.25rem;
  grid-template-columns: 
  [full-start] var(--blog-full-width)
  [feature-start] var(--blog-feature)
  [popout-start] var(--blog-popout)
  [content-start] var(--blog-content-width) [content-end]
  var(--blog-popout) [popout-end]
  var(--blog-feature) [feature-end]
  var(--blog-full-width) [full-end];
  margin-top: 3.5rem;
}
/* Grid & Subgrid Classes */
.blog-post > * {
    grid-column: content;
  }
.blog-post > :where(.hs_cos_wrapper_type_rich_text) {
    display: grid;
    grid-column: full;
    grid-template-columns: subgrid;
  }
.blog-post > :where(.hs_cos_wrapper_type_rich_text) > * {
      grid-column: content;
    }
.blog-post .content {
    grid-column: content;
  }
.blog-post .popout {
    grid-column: popout;
  }
.blog-post .feature {
    grid-column: feature;
  }
.blog-post .full {
    grid-column: full;
  }
.blog-post :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    text-wrap: auto;
  }
/* Element Styling */
.blog-post__author + * {
      margin-top: 3rem;
    }
/* Muted "back to blog" link; underline and arrow nudge come from
     .link-cta--back (_links.css). */
.blog-post__back-link {
    color: rgb(var(--brand-color-deep-blue));
    font-size: var(--text-sm--fluid);
    font-weight: 400;
    opacity: 0.75;
    transition: var(--link-transition), opacity var(--duration-fast) linear;
  }
.blog-post__back-link:is(:hover, :focus-visible) {
      opacity: 1;
    }
.blog-post__back-link + * {
      margin-top: 1.5rem;
    }
.blog-post__featured-image:not(.full) {
      border-radius: var(--radius-default);
    }
.blog-post__featured-image + * {
      margin-top: 3rem;
    }
.blog-post__title + * {
      margin-top: 1.5rem;
    }
.blog-post__topics {
    border-top: var(--border-hairline);
    margin-top: 2rem;
    padding-top: 1.5rem;
  }
.blog-post__topics > h2 {
      font-weight: 500;
    }
.blog-post__topics .blog-post__tags {
      margin-top: 0.75rem;
    }
/* Elements within body content */
.blog-post .hs_cos_wrapper_type_rich_text {
    line-height: 1.65;
  }
/* Dropcaps are too finnicky — return to them later. */
/* & > p:first-child::first-letter {
      border: 1px solid rgb(var(--brand-color-orange));
      display: inline-block;
      float: left;
      font-size: 2em;
      font-weight: 500;
      line-height: 1;
      margin-bottom: 0.125em;
      margin-right: 0.125em;
      padding: 0.375em 0.5em;
    } */
.blog-post .hs_cos_wrapper_type_rich_text > :not(div) em {
      font-family: Georgia, serif;
    }
.blog-post .hs_cos_wrapper_type_rich_text > blockquote {
      grid-column: popout;
      margin-block: 1rem 4rem;
    }
.blog-post .hs_cos_wrapper_type_rich_text > img {
      border-radius: var(--radius-default);
      grid-column: popout;
      margin-block: 3rem;
    }

/* Blog post header author credit: inline layout like the listings, but
   with a larger avatar and slightly larger type since it's the primary
   byline on the page, not a card detail. */
.blog-post__author.author-credit {
  gap: 0.75rem;
}
.blog-post__author.author-credit .author-credit__avatar {
    width: 3rem;
  }
.blog-post__author.author-credit .author-credit__info {
    font-size: 0.9375rem;
  }

/* Related articles under a post (the shared related-content module). */
.blog-post__related {
  margin-block: 6.5rem;
  margin-inline: auto;
  max-width: var(--site-width);
}


/* Blog Comments */

.comment.depth-0 {
  border-top: none !important;
}

.blog-post__footer__row-two form {
  max-width: 100%;
}

.blog-post__comments-listing {
  margin-top: 2.8rem;
}

.blog-post__comments-listing .comment {
  margin: 0.7rem 0 1.4rem;
}

.blog-post__comments-listing .comment-from a,
.blog-post__comments-listing .comment-from h4,
.blog-post__comments-listing .comment-date {
  font-size: 1rem;
  text-transform: none;
}

.blog-post__comments-listing .comment-from h4 {
  font-weight: 600;
}

.blog-post__comments-listing .comment-from h4:after {
  content: '-';
}

.blog-post__comments-listing .comment-date {
  font-style: italic;
}

/* Reply link: base link underline tokens, no hover background. */
.blog-post__comments-listing .comment-reply-to {
  background-color: transparent;
  cursor: pointer;
  padding-left: 30px;
}

/* Detail page templates (case study, video): section rhythm and internal
   spacing. Scoped under .body-container--detail so nothing here leaks to
   other templates.

   Structure contract (see case-study-detail.html): every major block —
   Challenge, Driving questions, Our Solutions, Photo grid, The Results,
   Testimonial, Related, Photo credits, Footer CTA — is ONE dnd_section. Because
   of that, spacing falls only between blocks (never between a heading and its
   own content), and no positional nth-child selectors are needed. */

/* ===== Rhythm BETWEEN blocks: generous padding, no rules ===== */
.body-container--detail > .dnd-section {
  padding-block: clamp(2rem, 5vw, 4rem);
}

/* Photo credits are a ROW inside the Related section, not a section of their
   own — that way one line of fine print doesn't pay for a full section band
   above and below it. It just needs a little more separation from the block it
   follows than the standard row gap gives. */
/* Specificity note: this has to out-rank `.dnd-section .dnd-row + .dnd-row`
   below, which also matches the credits row and is declared later. Hence the
   `.dnd-section` and `+ .dnd-row` parts — without them this rule silently
   loses and the credits fall back to the standard row gap. */
.body-container--detail .dnd-section .dnd-row + .dnd-row:has(.image-credits) {
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
}

/* Footer CTA is always the last section: a full-bleed band that meets the
   edges — no padding. :last-child is structural, not positional. */
.body-container--detail > .dnd-section:last-child {
  padding-block: 0;
}

/* ===== Rhythm WITHIN a block: one consistent, tighter gap ===== */
/* Stacked rows inside a section — a heading above its cards, or one row of
   cards above the next — share a single gap that's smaller than the space
   between blocks, so the hierarchy reads clearly. Single-child rows (one
   module per column) have no sibling and so get no gap. */
.body-container--detail .dnd-section .dnd-row + .dnd-row {
  margin-top: var(--row-gap);
}

/* ===== Mobile ===== */
@media (max-width: 767px) {
  .body-container--detail > .dnd-section {
    padding-block: 1.5rem;
  }

  /* When multi-column rows collapse to a single column, stacked columns use
     the same 1.5rem gap as stacked rows, so every card is evenly spaced. */
  .body-container--detail .dnd-section .dnd-column + .dnd-column {
    margin-top: 1.5rem;
  }
}

/* ************************************************************************* */
/* ***************                Home page               ****************** */
/* ************************************************************************* */

/* ===== Rhythm =====
   Every content section uses the theme's section padding, so the space
   between sections is always the same. Inside a section, stacked rows
   (a heading and its content, a card and the copy below it) are spaced by
   --row-gap, and nothing else adds vertical space of its own. */
.body-container--home .dnd-column > .dnd-row + .dnd-row {
  margin-top: var(--row-gap);
}

/* Related content brings its own block padding for standalone use; here
   the section padding already spaces it. */
.body-container--home .related-content {
  padding-block: 0;
}

/* ===== Grid =====
   One 12-column grid with a gutter equal to --row-gap, so the gap between
   cards is the same across and down and every split (services 6/6, the
   results card and panel 8/4, the intro copy 8/4) shares the same column
   lines. A DnD row with several columns becomes this grid; its columns span
   their DnD width (span4/6/8 are the widths the home page uses). The float
   grid's percentage gutter can't match the row gap, and padding on the
   cells would inset the cards from everything else. Below 768px columns
   stack with the same gap. */
@media (min-width: 768px) {
  .body-container--home .row-fluid:has(> .dnd-column + .dnd-column),
  .results-intro__grid {
    column-gap: var(--row-gap);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .body-container--home .row-fluid:has(> .dnd-column + .dnd-column)::before,
  .body-container--home .row-fluid:has(> .dnd-column + .dnd-column)::after {
    content: none;
  }

  .body-container--home .row-fluid:has(> .dnd-column + .dnd-column) > .dnd-column {
    display: flex;
    flex-direction: column;
    margin-left: 0;
    width: auto;
  }

  /* Equal heights: the DnD wrappers around a module are flattened so the
     card or panel inside is a direct flex child of its column, then it
     grows to fill the column (the tallest one in the row sets the height). */
  .body-container--home .row-fluid:has(> .dnd-column + .dnd-column) > .dnd-column :is(.row-fluid-wrapper, .row-fluid, .dnd-module, .hs_cos_wrapper) {
    display: contents;
  }

  .body-container--home .row-fluid:has(> .dnd-column + .dnd-column) > .dnd-column :is(.featured-case, .link-panel, .pillar-cta) {
    flex: 1;
  }

  .body-container--home .row-fluid > .span4,
  .results-intro__aside {
    grid-column: span 4;
  }

  .body-container--home .row-fluid > .span6 {
    grid-column: span 6;
  }

  .body-container--home .row-fluid > .span8,
  .results-intro__main {
    grid-column: span 8;
  }
}

@media (max-width: 767px) {
  .body-container--home .row-fluid > .dnd-column + .dnd-column {
    margin-top: var(--row-gap);
  }
}

/* ===== Intro copy (results and resources sections) =====
   Subheading, body and a link on the main side; an optional aside (a client
   quote, or format links) behind a dotted divider, on the same 8/4 split as
   the grid above. Stacked on phones. */
/* A subheading can sit above the grid (resources section), so the
   paragraph and the aside beside it start on the same line. */
.results-intro {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.results-intro__grid {
  display: grid;
  row-gap: var(--row-gap);
}

.results-intro__main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.results-intro__subheading {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  margin: 0;
  max-width: 34ch;
  text-wrap: balance;
}

.results-intro__body {
  line-height: 1.65;
  max-width: 42rem;
}

.results-intro__body > * {
  margin: 0;
}

.results-intro__body > * + * {
  margin-top: 1em;
}

.results-intro__cta {
  align-self: flex-start;
  margin-top: 0.5rem;
}

.results-intro__aside {
  border-top: var(--rule);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: var(--row-gap);
}

@media (min-width: 768px) {
  .results-intro__aside {
    border-left: var(--rule);
    border-top: 0;
    padding-left: clamp(1.25rem, 0.75rem + 1.5vw, 2rem);
    padding-top: 0;
  }
}

/* ===== About: two photos beside the intro copy ===== */
.home-about__grid {
  display: grid;
  gap: var(--row-gap);
}

@media (min-width: 768px) {
  .home-about__grid {
    align-items: center;
    column-gap: clamp(2rem, 1.5rem + 2.5vw, 4rem);
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}

.home-about__media {
  align-items: start;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}

.home-about__img {
  border-radius: var(--radius-default);
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.home-about__img--primary {
  aspect-ratio: 4 / 3;
}

.home-about__img--secondary {
  aspect-ratio: 1 / 1;
}

.home-about__text {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.home-about__body {
  line-height: 1.65;
  max-width: 42rem;
}

.home-about__body > * {
  margin: 0;
}

.home-about__body > * + * {
  margin-top: 1em;
}

.home-about__cta {
  align-self: flex-start;
}

.results-intro__aside > .link-cta {
  align-self: flex-start;
}

/* Pillar template styles. The breadcrumbs (bar style) and hero are modules
   with their own styles; this only spaces stacked columns on phones. */

/* Mobile: when dnd_columns stack (e.g. FAQ title above accordion, boxed
   section's related content above testimonial), give the stacked siblings
   breathing room so they don't crowd each other. */
@media (max-width: 767px) {
  .body-container--pillar .dnd-row > .dnd-column + .dnd-column,
  .body-container--pillar .row-fluid > .span4 + .span8,
  .body-container--pillar .row-fluid > .span5 + .span7 {
    margin-top: 1.5rem;
  }
}

/* Video detail template: the fixed block at the top (breadcrumbs, then the
   hero, video and tabs). Section rhythm for the DnD area below comes from
   .body-container--detail in case-study.css. */

.video-page__breadcrumbs {
  padding-block: 0.875rem;
}

.video-page__intro {
  display: grid;
  gap: var(--row-gap);
}

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

/* .no-list utility can be found in _reset.css */

/* Display text in the orange gradient (stat values).
   Large text only (32px+, bold): that's what the gradient's contrast is
   tuned for. Solid where background-clip: text isn't supported. */
.text-gradient-display {
  color: var(--text-gradient-display-solid);
  /* The gradient only paints inside the box, so tight line-height and
     letter-spacing would clip letters that dip below the line ("g", "y") or
     poke past the ends. The padding gives them paint room; the matching
     negative margin keeps the layout where it was. */
  margin: -0.08em -0.12em -0.18em;
  padding: 0.08em 0.12em 0.18em;
}
@supports (((-webkit-background-clip: text) or (background-clip: text)) or (-webkit-background-clip: text)) {
.text-gradient-display {
    -webkit-background-clip: text;
    background-clip: text;
    background-image: var(--text-gradient-display);
    -webkit-text-fill-color: transparent
}
  }
/* High contrast mode drops background images, so keep the text filled. */
@media (forced-colors: active) {
.text-gradient-display {
    -webkit-text-fill-color: currentColor
}
  }

.no-underline {
  -webkit-text-decoration: none;
  text-decoration: none;
}

/* Alpine.js x-cloak helper */
/* Make x-cloak softer until js is confirmed to be enabled */
[x-cloak] {
    display: none;
}
.js-enabled [x-cloak] {
        display: none !important;
    }

/* Halftone Gradient */
.bg-halftone {
  background-image: radial-gradient(
      circle at center,
      var(--halftone-color, rgb(var(--brand-color-white))) 0.66px,
      transparent 0
    ), radial-gradient(circle at center, var(--halftone-color, rgb(var(--brand-color-white))) 0.66px, transparent 0);
  background-size: 6px 6px;
  background-position: 0 0, 3px 3px;
  background-repeat: round;
}