:root {
  /* Core brand colors, shared across every page */
  --color-dark: #16181b;
  --color-cream: #f5e7cd;
  --color-cream-light: #faf5ec;
  --color-teal: #0b889b;
  --color-teal-light: #289EB0;
  --color-orange: #f37f3c;
  --color-white: #fff;
  --color-black: #000;
  --color-slate: #343543;
  --color-muted-grey: #5c6065;
  --color-muted-tan: #887d6f;
  --color-panel-light: #f5f5f7;
  --color-dark-rgb: 22, 24, 27;
  --color-cream-light-rgb: 250, 245, 236;
}

@media (width > 767px) {
@font-face {
  font-family: "Abel";
  src: url("../fonts/Abel/Abel-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo/Archivo-Italic-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo/Archivo-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist/Geist-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist/Geist-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Photo controls: --image-exposure/contrast/saturation/temperature/tint/highlights/shadows use -1 to 1; zero is neutral. image-paints.js applies them. */
.image-paint-source { transform: var(--image-source-transform, none); transform-origin: 0 0; }
.image-filter-definitions { display: block; width: 0; height: 0; overflow: hidden; pointer-events: none; }
/* Generated by compiler.py. */
html, body { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; overflow-x: clip; }
p, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-size: inherit; font-weight: inherit;}
*, *::before, *::after { box-sizing: border-box; }
img { display: block; }
svg { display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; text-align: inherit; text-transform: inherit; letter-spacing: inherit; line-height: inherit; border-radius: 0; }
button { cursor: pointer; -webkit-appearance: none; appearance: none; }
ul, ol { margin: 0; padding: 0; padding-inline-start: 1.5em; list-style-position: outside; }
ul { list-style-type: disc; }
ol { list-style-type: decimal; }
li { margin: 0; padding: 0; }
a, button, [role="button"], [data-accordion-trigger], [data-figma-interactions] { -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; touch-action: manipulation; }
a:focus, button:focus, [role="button"]:focus, [data-accordion-trigger]:focus, [data-figma-interactions]:focus { outline: none; }
.figma-overlay-root { position: absolute; inset: 0; pointer-events: none; }
.figma-overlay-backdrop { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 600; pointer-events: auto; }
[data-figma-foreground], [data-figma-overlay-source-foreground], [data-figma-overlay-fixed-foreground] { z-index: 601 !important; }
[data-figma-overlay-source-foreground="static"] { position: relative; }
.figma-overlay-content { position: fixed; z-index: 602; pointer-events: auto; }
.figma-overlay-bleed { position: absolute; z-index: -1; pointer-events: auto; }
.figma-overlay-position--center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.figma-overlay-position--top-left { top: 0; left: 0; }
.figma-overlay-position--top-center { top: 0; left: 50%; transform: translateX(-50%); }
.figma-overlay-position--top-right { top: 0; right: 0; }
.figma-overlay-position--bottom-left { bottom: 0; left: 0; }
.figma-overlay-position--bottom-center { bottom: 0; left: 50%; transform: translateX(-50%); }
.figma-overlay-position--bottom-right { right: 0; bottom: 0; }
[data-slider-viewport] { overflow: hidden; min-width: 0; }
[data-slider-track], [data-slider-clone] { flex: none; }
[data-slider-loop] { display: flex; width: max-content; min-width: 100%; }
[data-slider-viewport][data-slider-scrollbar] { overflow-x: auto; }
@media (prefers-reduced-motion: reduce) {  .figma-overlay-backdrop, .figma-overlay-content { transition-duration: 0s !important; } }
[data-accordion-panel] { overflow: hidden; }
[data-accordion-panel][data-open="false"]:not([data-accordion-animating]) { display: none !important; }
@media (prefers-reduced-motion: reduce) { [data-accordion-panel] { transition-duration: 0s !important; } }
.site-view { position: relative; margin: 0 auto; }
.site-view--desktop { display: block; }
[data-hover-color="#343543"][data-hover-target="bg"] { transition: background-color 0.1s ease; }
@media (hover: hover) { [data-hover-color="#343543"][data-hover-target="bg"]:not([data-hover-child]):hover, [data-hover-group][data-hover-color="#343543"][data-hover-target="bg"]:hover, [data-hover-group]:hover [data-hover-color="#343543"][data-hover-target="bg"] { background-color: #343543; } }
@media (hover: hover) { [data-hover-group]:hover [data-hover-child][data-hover-target="bg"], [data-hover-group][data-hover-child][data-hover-target="bg"]:hover { background-image: none; } }
@media (hover: hover) { :is([data-hover-group]:hover [data-hover-child][data-hover-target="bg"], [data-hover-group][data-hover-child][data-hover-target="bg"]:hover)[data-media-paint-source] > [data-media-paint-stack], :is([data-hover-group]:hover [data-hover-child][data-hover-target="bg"], [data-hover-group][data-hover-child][data-hover-target="bg"]:hover)[data-media-paint-source] > :first-child > [data-media-paint-stack] { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { [data-hover-color] { transition-duration: 0s !important; } }
@keyframes figma-scroll-reveal { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes figma-fade-in { from { opacity: 0; } to { opacity: 1; } }
:where(.js-animate-ready) .animate.fade-up { animation-name: figma-scroll-reveal; animation-duration: 0.6s; animation-timing-function: ease-out; animation-fill-mode: both; }

/* Animate opacity/translate independently, preserving authored transform and transform-origin. */
:where(.js-animate-ready) .animate.fade-in { animation-name: figma-fade-in; animation-duration: 0.6s; animation-timing-function: ease-out; animation-fill-mode: both; }

}

@media (max-width: 767px) {
:root {
  /* Shared layout constants */
  --page-padding-x: 9.26667vw;
  --navbar-height: 8.3vw;
  --mobile-header-height: 18vw;
  --mobile-heading: clamp(2.2rem, calc(2.2rem + 6.6vw), 5rem);
}

@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo/Archivo-Italic-VariableFont_wdth,wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo/Archivo-VariableFont_wdth,wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist/Geist-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist/Geist-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Generated by compiler.py. */
html, body { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; font-size: inherit; font-weight: inherit;}
img { display: block; }
svg { display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; text-align: inherit; line-height: inherit; border-radius: 0; }
ul, ol { margin: 0; padding: 0;}
li { margin: 0; padding: 0; }
a, button, [role="button"], [data-accordion-trigger], [data-figma-interactions] { -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; }
a:focus, button:focus, [role="button"]:focus, [data-accordion-trigger]:focus, [data-figma-interactions]:focus { outline: none; }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, [data-accordion-trigger]:focus-visible, [data-figma-interactions]:focus-visible { outline: 2.66667px solid currentColor; outline-offset: 2.66667px; }
/* No position/z-index here on purpose: this is just a grouping wrapper for
   the backdrop + content pair. Giving it position:fixed would create its own
   stacking context and trap their 600/602 z-indices inside it, so they'd only
   rank against each other instead of against the page's 601 foreground header
   -- which is exactly what lets the header hide the dropdown (or get dimmed
   by the backdrop) depending on which element ends up representing the whole
   trapped group. Leaving it unpositioned lets both children stack directly
   in the root context, where 600 < 601 < 602 actually holds. */
.figma-overlay-root { pointer-events: none; }
.figma-overlay-backdrop { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 600; pointer-events: auto; }
[data-figma-foreground], [data-figma-overlay-source-foreground] { position: relative; z-index: 601 !important; }
.figma-overlay-content { position: fixed; z-index: 602; pointer-events: auto; }
.figma-overlay-position--center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.figma-overlay-position--top-left { top: 0; left: 0; }
.figma-overlay-position--top-center { top: 0; left: 50%; transform: translateX(-50%); }
.figma-overlay-position--top-right { top: 0; right: 0; }
.figma-overlay-position--bottom-left { bottom: 0; left: 0; }
.figma-overlay-position--bottom-center { bottom: 0; left: 50%; transform: translateX(-50%); }
.figma-overlay-position--bottom-right { right: 0; bottom: 0; }
@keyframes figma-ticker-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {  .figma-overlay-root { transition-duration: 0s !important; } }
[data-accordion-panel] { overflow: hidden; max-height: 0; opacity: 0; visibility: hidden; transition-property: max-height, opacity; transition-duration: 300ms; transition-timing-function: ease; }
[data-accordion-panel][data-open="true"] { max-height: 100vh; opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { [data-accordion-panel] { transition-duration: 0s !important; } }
.site-view { position: relative; margin: 0 auto; }
  .site-view--mobile { display: block; }


section {
  position: relative;
}

a, p {
  font-family: "Archivo", sans-serif;
}

button {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  font-family: "Archivo", sans-serif;
  text-transform: uppercase;
}

/*
 * Shared CTA pills
 * Single: class="pill-button"
 * Double: class="pill-button pill-button--double pill-button--arrow-right"
 * Swap the direction modifier to pill-button--arrow-down as needed.
 */

.pill-button:hover:not(.pill-button--double),
.pill-button:active:not(.pill-button--double) {
  background: var(--color-slate);
  transition: background 500ms ease;
}

.pill-button--double:hover .pill-button__label,
.pill-button--double:hover::after,
.pill-button--double:active .pill-button__label,
.pill-button--double:active::after {
  background-color: var(--color-slate);
  transition: background-color 500ms ease;
}

.pill-button--double .pill-button__label {
  min-width: 0;
}

.pill-button--arrow-right::after { transform: none; }
.pill-button--arrow-down::after { transform: rotate(90deg); }
  .pill-button {
    display: inline-flex;
    border-radius: 999px;
    background: var(--pill-button-background);
    --pill-button-background: var(--color-teal);
    --pill-button-color: var(--color-white);
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: 35em;
    color: var(--pill-button-color);
    font-family: "Archivo", sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
    min-height: 12.3vw;
    padding: 3.1vw 6.15vw;
  }

  .pill-button--double {
    display: inline-grid;
    grid-template-columns: minmax(0, 1fr) auto;
    border-radius: 0;
    background: transparent;
    gap: 2.05vw;
    padding: 0;
  }
  .pill-button--double .pill-button__label,
  .pill-button--double::after {
    background: var(--pill-button-background);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pill-button-color);
    min-height: 12.3vw;
  }
  .pill-button--double .pill-button__label {
    border-radius: 999px;
    white-space: nowrap;
    padding: 3.1vw 6.15vw;
  }
  .pill-button--double::after {
    content: "";
    padding: 0;
    border-radius: 50%;
    background-image: url("../media/icons/pill-arrow.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    width: 12.3vw;
    min-width: 12.3vw;
  }


h2, h3, h4, h5, h6 {
  font-family: "Geist", sans-serif;
  font-family: "txc-pearl", "Archivo", sans-serif;
}

/* Entrance effects: headings fade in, paragraphs fade up.
   The shared root scroll-animations.js schedules 100ms gaps between visible elements.
   Gated behind .js-animate-ready (set by scroll-animations.js) so content
   is never hidden if that script fails to load. Ported from the Lacewing
   site's animate.js pattern: a paused CSS keyframe animation rather than a
   toggled transition, so the "hidden" frame is always painted (via
   animation-fill-mode: both) before scroll-animations.js ever unpauses it —
   a plain opacity transition can otherwise get marked visible before its
   hidden state has painted, so content already on screen at load skips the
   animation instead of playing it. */
.js-animate-ready .animate {
  opacity: 0;
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
}

.js-animate-ready .animate[class*="fade-in-"] { animation-name: fadeIn; }
.js-animate-ready .animate[class*="fade-up-"] { animation-name: fadeUp; }


@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeUp {
  from { opacity: 0; translate: 0 1.25rem; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .animate {
    animation: none !important;
    opacity: 1 !important;
  }
}
}

/* Content landmarks preserve the page containers' vertical layout. */
.site-main {
  display: flex;
  flex-direction: column;
  align-items: inherit;
  gap: inherit;
  width: 100%;
  min-width: 0;
  scroll-margin-top: max(108px, var(--navbar-height, 0px));
}

/* Shared image and positioning utilities. */
.u-svg-no-bg { background: none !important; border: 0 !important; }
@media (width > 767px) {
  .u-position-fixed { position: fixed; z-index: 100; }
}