/**
 * Frontend Tailwind entry -> build/frontend.css
 * @import statements must precede all other statements (postcss-import
 * requirement), so both imports come before the @tailwind directives.
 * Preflight (@tailwind base) + the base-layer reset live ONLY here,
 * never in editor.css.
 */
/**
 * The Point — base-layer reset. Imported ONLY by main.css (frontend), paired
 * with that file's `@tailwind base;`. Never imported by editor.css — Tailwind
 * errors if `@layer base` has no matching `@tailwind base` in the same file,
 * and we deliberately omit preflight in the editor canvas so the wp-admin /
 * Gutenberg chrome is never touched.
 */
/**
 * The Point — brand utility layer (single source of truth for styling).
 * Imported by BOTH main.css (frontend, with preflight) and editor.css (editor
 * canvas, preflight disabled) via postcss-import, so every block looks identical
 * in wp-admin and on the live site. Base-layer resets live in _reset.css
 * (main.css only). Restyle the whole site by editing ONE utility here.
 *
 * Aesthetic: clean near-monochrome corporate — brand grey #626062, body ink
 * #4f4f4f, muted teal accent #849592, 20px rounded media, 100px pill controls.
 */
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
 */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Geom, Poppins, ui-sans-serif, system-ui, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
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;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-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.
*/
::-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 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
*,
	*::before,
	*::after {
		box-sizing: border-box;
	}
html {
		scroll-behavior: smooth;
	}
body {
  --tw-bg-opacity: 1;
  background-color: rgb(248 248 248 / var(--tw-bg-opacity, 1));
  font-family: Geom, Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.75;
  font-weight: 300;
  --tw-text-opacity: 1;
  color: rgb(79 79 79 / var(--tw-text-opacity, 1));
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
}
h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin: 0;
		font-weight: inherit;
	}
p {
		margin: 0;
	}
ul,
	ol {
		margin: 0;
		padding: 0;
		list-style: none;
	}
img,
	svg {
		display: block;
		max-width: 100%;
	}
a {
		text-decoration: none;
		color: inherit;
	}
button {
		font: inherit;
		cursor: pointer;
	}
.container {
  width: 100%;
}
@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}
/* ---------- Layout ---------- */
.container-page {
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 768px) {
  .container-page {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
/* Per-block section spacing — padding top/bottom per breakpoint, driven by
	   CSS vars set inline via thepoint_section_spacing_vars(). Each block supplies
	   its own defaults, so an unset control keeps that block's original spacing. */
.sec-space {
		padding-top: var( --sec-pt-m, 0px );
		padding-bottom: var( --sec-pb-m, 0px );
	}
/* Tablet falls back to the DESKTOP value, not the mobile one, so that a block
	   with no tablet value set renders exactly what it did before the tablet range
	   existed: this md rule used to be the only md+ rule and it read --sec-pt-d.
	   Every stored block therefore keeps its current spacing untouched. */
@media (min-width: 768px) {
		.sec-space {
			padding-top: var( --sec-pt-t, var( --sec-pt-d, 0px ) );
			padding-bottom: var( --sec-pb-t, var( --sec-pb-d, 0px ) );
		}
	}
@media (min-width: 1024px) {
		.sec-space {
			padding-top: var( --sec-pt-d, 0px );
			padding-bottom: var( --sec-pb-d, 0px );
		}
	}
/* ---------- Per-element spacing (padding + margin, top/bottom, 3 ranges) ----------
	   Set per text element through TypeControls and emitted into that element's
	   own style attribute by thepoint_type_style() / typeStyle().

	   Why custom properties on an attribute selector instead of plain inline
	   padding/margin (which is what this used to be):

	     1. An inline property cannot carry a media query, and these controls are
	        per breakpoint.
	     2. The selector is DOUBLED — [ style*='…' ][ style ] — to score 0,2,0 so
	        it beats the single-class Tailwind default it overrides (pt-5, mt-6,
	        pb-4 …). A single attribute selector ties at 0,1,0 and would lose to
	        the utilities layer, silently ignoring the editor's value.

	   No component class is needed on the element, so no render.php call site had
	   to change: the vars ride along in the style attribute the helper already
	   emitted. Each property applies ONLY when its own var is present, so an unset
	   control leaves the element's design default completely alone — the same
	   "clear it to return to the default design" contract as the colour pickers.

	   Ranges CASCADE (mobile → tablet → desktop), matching --frow-mt-* in the
	   footer: a value set on mobile alone holds at every width. There is no
	   per-range design default to protect here, which is why these cascade rather
	   than being independent like the footer panel's padding. */
[ style*='--ts-pt-m' ][ style ] {
		padding-top: var( --ts-pt-m );
	}
[ style*='--ts-pb-m' ][ style ] {
		padding-bottom: var( --ts-pb-m );
	}
[ style*='--ts-mt-m' ][ style ] {
		margin-top: var( --ts-mt-m );
	}
[ style*='--ts-mb-m' ][ style ] {
		margin-bottom: var( --ts-mb-m );
	}
@media (min-width: 768px) {
		[ style*='--ts-pt-t' ][ style ] {
			padding-top: var( --ts-pt-t );
		}
		[ style*='--ts-pb-t' ][ style ] {
			padding-bottom: var( --ts-pb-t );
		}
		[ style*='--ts-mt-t' ][ style ] {
			margin-top: var( --ts-mt-t );
		}
		[ style*='--ts-mb-t' ][ style ] {
			margin-bottom: var( --ts-mb-t );
		}
	}
@media (min-width: 1024px) {
		[ style*='--ts-pt-d' ][ style ] {
			padding-top: var( --ts-pt-d );
		}
		[ style*='--ts-pb-d' ][ style ] {
			padding-bottom: var( --ts-pb-d );
		}
		[ style*='--ts-mt-d' ][ style ] {
			margin-top: var( --ts-mt-d );
		}
		[ style*='--ts-mb-d' ][ style ] {
			margin-bottom: var( --ts-mb-d );
		}
	}
.section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media (min-width: 768px) {
  .section {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
/* ---------- Type helpers ---------- */
.h-display {
  font-family: Geom, Poppins, ui-sans-serif, sans-serif;
  font-size: 36px;
  line-height: 1.15;
  font-weight: 300;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
@media (min-width: 768px) {
  .h-display {
    font-size: 48px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-weight: 300;
  }
}
.h-title {
  font-family: Geom, Poppins, ui-sans-serif, sans-serif;
  font-size: 40px;
  line-height: 1.25;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(79 79 79 / var(--tw-text-opacity, 1));
}
.h-title-sm {
  font-family: Geom, Poppins, ui-sans-serif, sans-serif;
  font-size: 24px;
  line-height: 1.35;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(79 79 79 / var(--tw-text-opacity, 1));
}
.prose-body {
  font-family: Geom, Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.75;
  font-weight: 300;
  --tw-text-opacity: 1;
  color: rgb(79 79 79 / var(--tw-text-opacity, 1));
}
.prose-body p + p {
  margin-top: 1rem;
}
/* ---------- Eyebrow / section labels ---------- */
.eyebrow {
  display: inline-block;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  font-weight: 500;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(132 149 146 / var(--tw-text-opacity, 1));
}
/*
	 * Section kicker — the SOT's Section Label is PLAIN 20px light text in
	 * #c3c3c3 above a 40px heading. The raw CSS defines no chip/pill for it
	 * (an earlier revision invented one; corrected 2026-07-10).
	 */
.section-label {
  display: block;
  font-family: Geom, Poppins, ui-sans-serif, sans-serif;
  font-size: 20px;
  line-height: 1.65;
  font-weight: 300;
  --tw-text-opacity: 1;
  color: rgb(195 195 195 / var(--tw-text-opacity, 1));
}
/* ---------- White content panel (floating band system) ---------- */
/* Every text sub-page hosts its content in a rounded white panel inset on
	   the #f8f8f8 canvas (SOT: Layout — rectangle-9/16/17/112 panels). */
.panel {
  border-radius: 20px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
@media (min-width: 768px) {
  .panel {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
/* ---------- Hero banner scrim ---------- */
/* linear-gradient(-89.93deg, transparent 0%, rgba(0,0,0,0.4) 64%): darkens
	   the left side of every sub-page banner so the white text keeps contrast. */
.hero-scrim {
  pointer-events: none;
  position: absolute;
  inset: 0px;
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(0 0 0 / 0.4) var(--tw-gradient-to-position);
}
/* Vertical variant (About hero, 180deg). */
.hero-scrim-vertical {
  pointer-events: none;
  position: absolute;
  inset: 0px;
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(0 0 0 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(0 0 0 / 0.45) var(--tw-gradient-to-position);
}
/* ---------- Horizontal card carousel ---------- */
/* The mockups run card rows PAST the canvas edge (overflow-x: auto) —
	   Service Pillars and both Location Card rows. Never a static grid. */
.carousel {
  display: flex;
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
  gap: 1.5rem;
  overflow-x: auto;
  padding-bottom: 1rem;
}
@media (min-width: 768px) {
  .carousel {
    gap: 2rem;
  }
}
.carousel {
		scrollbar-width: thin;
	}
.carousel > * {
  flex: none;
  scroll-snap-align: start;
}
/* Team Gallery column order: which of the media/text columns comes first,
	   set independently per breakpoint (mobile/tablet/desktop) — user-
	   configurable, so CSS custom properties per breakpoint (same reasoning
	   as .hero-cta below) rather than fixed Tailwind order- utilities. `order`
	   reorders siblings the same way whether they're stacked (mobile, single
	   column) or side by side (desktop, two columns). */
.gallery-media-col {
		order: var( --gallery-order-media-mobile, 1 );
	}
.gallery-text-col {
		order: var( --gallery-order-text-mobile, 2 );
	}
@media (min-width: 640px) {
		.gallery-media-col {
			order: var( --gallery-order-media-tablet, 1 );
		}
		.gallery-text-col {
			order: var( --gallery-order-text-tablet, 2 );
		}
	}
@media (min-width: 768px) {
		.gallery-media-col {
			order: var( --gallery-order-media-desktop, 1 );
		}
		.gallery-text-col {
			order: var( --gallery-order-text-desktop, 2 );
		}
	}
/* Typography width (Team Gallery kicker/heading/narrative): "Fit content"
	   and "Custom" width modes only apply at desktop (768px+) — below that,
	   text always stays full width regardless of the chosen mode, since a
	   narrow custom/fit width made sense at desktop measure but would just
	   look broken or overflow-prone stacked on a phone. */
.gallery-typo-width {
		width: 100%;
	}
@media (min-width: 768px) {
		.gallery-typo-width {
			width: var( --gallery-typo-width, 100% );
			max-width: 100%;
		}
	}
/* ---------- Single-slide media carousel (Team Gallery) ---------- */
/* One image/video visible at a time with prev/next controls, as opposed
	   to .carousel's horizontal-scroll row. Prev is hidden on the first
	   slide; next always advances and wraps back to the first slide. */
.gallery-carousel {
  position: relative;
  overflow: hidden;
		/* Let vertical page scroll pass through untouched; horizontal swipes are
		   read via Pointer Events in frontend.js, not native browser panning. */
		touch-action: pan-y;
}
/* Duration is user-configurable per instance, so it's a CSS custom property
	   set via inline style (see render.php/edit.js) rather than a fixed
	   Tailwind duration- utility. */
.gallery-slide {
  pointer-events: none;
  position: absolute;
  inset: 0px;
		transition: opacity var( --gallery-transition-duration, 300ms ) ease, transform var( --gallery-transition-duration, 300ms ) ease;
}
.gallery-slide.is-active {
  pointer-events: auto;
}
/* Effect variants, switched by the .gallery-carousel[data-transition] the
	   block writes out. .is-before marks a slide with a lower index than the
	   active one, so the "slide" effect knows which side to enter/exit from. */
.gallery-carousel[data-transition='fade'] .gallery-slide {
  opacity: 0;
}
.gallery-carousel[data-transition='fade'] .gallery-slide.is-active {
  opacity: 1;
}
.gallery-carousel[data-transition='zoom'] .gallery-slide {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 0;
}
.gallery-carousel[data-transition='zoom'] .gallery-slide.is-active {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 1;
}
.gallery-carousel[data-transition='slide'] .gallery-slide {
		transform: translateX( 100% );
	}
.gallery-carousel[data-transition='slide'] .gallery-slide.is-before {
		transform: translateX( -100% );
	}
.gallery-carousel[data-transition='slide'] .gallery-slide.is-active {
		transform: translateX( 0 );
	}
/* Position (top/middle/bottom, left/center/right) is user-configurable per
	   instance, so it's set via inline style (see render.php/edit.js) rather
	   than a fixed Tailwind utility — same reasoning as .hero-cta above. */
.gallery-nav {
  position: absolute;
  z-index: 10;
  display: flex;
  gap: 0.75rem;
}
.gallery-nav-btn {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(79 79 79 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.gallery-nav-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 229 229 / var(--tw-bg-opacity, 1));
}
/* The [hidden] attribute's UA display:none is same-specificity as (and
	   loses to) the author-level display:flex above, so the prev button was
	   staying visible on the first slide. A compound selector beats it. */
.gallery-nav-btn[hidden] {
		display: none;
	}
/*
	 * Railed variant (SOT: Service Pillars) — the native scrollbar is replaced by
	 * a centered rail + dot ABOVE the cards. Scoped to .carousel-wrap on purpose:
	 * the plain .carousel rows (team gallery, office locations) have no rail, so
	 * the native scrollbar is still their only scroll affordance.
	 */
/*
	 * snap-none: this row scrolls freely. Inherited `snap-x` + `snap-start` yanks
	 * the 440/880px cards back to the nearest card edge on a slow scroll, and
	 * re-adjusts every scrollLeft the rail drag sets. Snapping stays on for the
	 * unrailed .carousel rows, where it costs nothing.
	 *
	 * pt-1/pb-5 are NOT cosmetic padding: overflow-x:auto forces overflow-y to
	 * auto (the axes cannot disagree), so this box clips vertically too. That
	 * padding is the only room `.card-hover` has for its 4px lift and the shadow
	 * reaching ~18px below the card. Zero it and the hover shadow is sliced off
	 * flat at the card's bottom edge.
	 */
.carousel-wrap .carousel {
  cursor: grab;
  scroll-snap-type: none;
  padding-top: 0.25rem;
  padding-bottom: 1.25rem;
		scrollbar-width: none;
		-ms-overflow-style: none;
}
/* Active drag (frontend.js toggles is-grabbing): grabbing cursor + no text selection. */
.carousel-wrap .carousel.is-grabbing {
  cursor: grabbing;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
/*
	 * Peek/cut (SOT: Service Pillars) — the row stays inside the block (container)
	 * and the cards are sized as a % of it (see render.php), so the row overflows
	 * the block and the 2nd card is cut at the block's right edge. The block width
	 * is what does the cutting; on wide screens there's just margin beyond it.
	 */
.carousel-wrap .carousel::-webkit-scrollbar {
		display: none;
	}
/*
	 * Rail geometry/color come from CSS vars so the block's editor controls can
	 * drive them per instance — Tailwind utilities are compiled, so they cannot
	 * carry a dynamic value. The fallbacks ARE the SOT defaults: an unset var
	 * means the control was left empty, i.e. the default design. Same technique
	 * as home-hero's --cta-* vars.
	 */
.carousel-rail {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
  touch-action: none;
  border-radius: 9999px;
		width: var( --rail-width, 240px );
		height: var( --rail-height, 2px );
		background-color: var( --rail-color, #dddddd );
}
/* The rail is only a couple of px tall — widen the pointer hit area without moving it. */
.carousel-rail::before {
		content: '';
		position: absolute;
		left: 0px;
		right: 0px;
		top: -0.75rem;
		bottom: -0.75rem;
	}
/*
	 * JS drives `left`; transform is left free for the Y centering.
	 * That centering is written by hand rather than with `-translate-y-1/2`:
	 * Tailwind ships its --tw-translate-* defaults inside preflight, and
	 * editor.css deliberately omits preflight — so the utility's transform
	 * references undefined vars there, resolves to invalid, and the dot drops
	 * below the rail in the editor canvas. `.card-hover` avoids this the same way.
	 */
.carousel-dot {
  position: absolute;
  left: 0px;
  top: 50%;
  border-radius: 9999px;
		width: var( --dot-size, 10px );
		height: var( --dot-size, 10px );
		transform: translateY( -50% );
		background-color: var( --dot-color, #849592 );
}
/*
	 * Edge fades — the cut card used to end on a hard vertical line, which reads
	 * as a clipping bug rather than "there is more this way". Soft edges say
	 * side-scroller without needing the native scrollbar back.
	 *
	 * These live on a WRAPPER, never on .carousel itself: .carousel is the
	 * scrolling box, so an absolutely-positioned pseudo on it would scroll away
	 * with the cards instead of staying pinned to the edge. The wrapper spans
	 * the scroller's full padded height (its pt-1/pb-5), so the fade covers
	 * .card-hover's lift and shadow rather than slicing them off.
	 *
	 * pointer-events:none is load-bearing: the fade sits exactly where people
	 * grab to drag, and would otherwise swallow the pointerdown.
	 */
.carousel-fade {
  position: relative;
}
/*
	 * The fade is a MASK on the content, not a coloured overlay on top of it.
	 * An overlay has to know the colour behind it, and it can't: the section's
	 * own sectionBgColor is usually empty and the real background comes from an
	 * ancestor (this block currently sits on #f8f8f8). A white gradient over
	 * grey read as a white smear. Masking dissolves the cards to transparent
	 * instead, so it is correct on any background, including one the client
	 * changes later.
	 *
	 * The mask is anchored to the scroller's border box, not its scrolled
	 * content, so it stays pinned to the edges as the cards move under it. The
	 * gradient runs horizontally only, so it never touches .card-hover's shadow.
	 */
.carousel-fade .carousel {
		--fade-start: 0px;
		--fade-end: 0px;
		-webkit-mask-image: linear-gradient(
			to right,
			transparent 0,
			#000 var( --fade-start ),
			#000 calc( 100% - var( --fade-end ) ),
			transparent 100%
		);
		        mask-image: linear-gradient(
			to right,
			transparent 0,
			#000 var( --fade-start ),
			#000 calc( 100% - var( --fade-end ) ),
			transparent 100%
		);
	}
/* Each edge fades only while that side genuinely has content hidden past it
	   — masking the left at scrollLeft 0 would eat the first card's edge for no
	   reason. frontend.js toggles these from initCarousel's sync(). Widths stay
	   0 otherwise, which collapses the gradient stops into a no-op mask. */
.carousel-fade.can-scroll-start .carousel {
		--fade-start: var( --fade-width, 64px );
	}
.carousel-fade.can-scroll-end .carousel {
		--fade-end: var( --fade-width, 64px );
	}
/* ---------- Buttons (pills) ---------- */
.pill-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 100px;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.7);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.pill-ghost:hover {
  background-color: rgb(255 255 255 / 0.1);
}
.pill-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 100px;
  --tw-bg-opacity: 1;
  background-color: rgb(98 96 98 / var(--tw-bg-opacity, 1));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.pill-solid:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(63 62 63 / var(--tw-bg-opacity, 1));
}
/* ---------- Cards & media ---------- */
.card {
  border-radius: 20px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(221 221 221 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
.card-hover:hover {
  --tw-border-opacity: 1;
  border-color: rgb(195 195 195 / var(--tw-border-opacity, 1));
		transform: translateY( -4px );
		box-shadow: 0 18px 40px -20px rgba( 0, 0, 0, 0.25 );
}
/* `relative` is load-bearing: .media-cover is absolutely positioned and
	   anchors here. Without it the image escapes the frame (see content-statement,
	   which relied on this being on the class rather than repeating `relative`
	   inline like home-hero/page-hero do). */
.media-frame {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  --tw-bg-opacity: 1;
  background-color: rgb(229 229 229 / var(--tw-bg-opacity, 1));
}
.media-frame img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.media-cover {
  position: absolute;
  inset: 0px;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
/*
	 * Lift native <track> captions off the very bottom edge of a showcase video
	 * so they clear the frame edge (and the player controls). The
	 * ::-webkit-media-text-track-container pseudo is Chromium/Safari-only — other
	 * browsers keep the default position, which is still readable.
	 */
[data-office-video]::-webkit-media-text-track-container {
		transform: translateY( -3rem );
	}
@media (min-width: 768px) {
		[data-office-video]::-webkit-media-text-track-container {
			transform: translateY( -4.5rem );
		}
	}
/* Hero CTA: the Start button's CENTRE is pinned to a fixed point ON THE
	   ARTWORK — the middle of the white C-table circle — not to a point on
	   the frame. The image is object-fit: cover, so the visible crop changes
	   with the frame's aspect ratio; mapping the anchor through the cover
	   math with container-query units keeps the button over the same spot of
	   the photo at every screen size. Values are CSS custom properties (set
	   inline per block instance) rather than Tailwind arbitrary classes,
	   since they're user-configurable at runtime — Tailwind can only
	   generate CSS for class names it can see literally in source files at
	   build time.

	   Vars (see render.php / edit.js — all unitless):
	     --cta-x-* / --cta-y-*      anchor point, % across/down the image itself
	     --cta-opx-* / --cta-opy-*  copy of the image's object-position %
	     --cta-img-ar               the image's natural width/height ratio

	   Cover math: displayed size dw = max(frameW, frameH·ar), dh =
	   max(frameH, frameW/ar); the crop offset follows object-position:
	   (frame − displayed) · pos. Assumes the default object-fit: cover —
	   under other fits the sliders still move the button, it just no longer
	   tracks the artwork. Browsers without container-query units fall back
	   to plain frame percentages (close on desktop, where the default frame
	   ratio equals the image ratio and cover never crops).

	   This block uses its own breakpoints instead of the sitewide sm(640)/
	   md(768) scale: mobile ≤767px, tablet 768–1024px, desktop ≥1025px — a
	   plain @media query rather than Tailwind's @screen, since @screen only
	   knows the values in tailwind.config.js. */
.hero-cta {
		--cta-x: var( --cta-x-mobile, 45.3 );
		--cta-y: var( --cta-y-mobile, 56.3 );
		--cta-opx: var( --cta-opx-mobile, 50 );
		--cta-opy: var( --cta-opy-mobile, 50 );
		left: calc( var( --cta-x ) * 1% );
		top: calc( var( --cta-y ) * 1% );
		transform: translate( -50%, -50% );
		/* Fallback size (no container-query units) — the old fixed w-32/w-36. */
		width: 8rem;
		height: 8rem;
	}
@media ( min-width: 768px ) {
		.hero-cta {
			--cta-x: var( --cta-x-tablet, 45.3 );
			--cta-y: var( --cta-y-tablet, 56.3 );
			--cta-opx: var( --cta-opx-tablet, 50 );
			--cta-opy: var( --cta-opy-tablet, 50 );
			width: 9rem;
			height: 9rem;
		}
	}
@media ( min-width: 1025px ) {
		.hero-cta {
			--cta-x: var( --cta-x-desktop, 45.3 );
			--cta-y: var( --cta-y-desktop, 56.3 );
			--cta-opx: var( --cta-opx-desktop, 50 );
			--cta-opy: var( --cta-opy-desktop, 50 );
		}
	}
@supports ( width: 1cqw ) {
		/* Safe with the frame's sizing: width comes from the parent and
		   height from aspect-ratio (or the explicit height override), never
		   from the frame's children — so size containment can't collapse it. */
		.hh-media-frame {
			container-type: size;
		}
		.hero-cta {
			--cta-dw: max( 100cqw, 100cqh * var( --cta-img-ar, 1.8372 ) );
			--cta-dh: max( 100cqh, 100cqw / var( --cta-img-ar, 1.8372 ) );
			left: calc( ( 100cqw - var( --cta-dw ) ) * var( --cta-opx ) / 100 + var( --cta-dw ) * var( --cta-x ) / 100 );
			top: calc( ( 100cqh - var( --cta-dh ) ) * var( --cta-opy ) / 100 + var( --cta-dh ) * var( --cta-y ) / 100 );
			/* Size scales with the artwork too: the white circle is ~9.2% of
			   the image's width (124px of 1354), so 10% of the displayed
			   width keeps the hit area snug on the circle at every crop —
			   floored at 44px so the tap target never shrinks below WCAG. */
			width: max( 2.75rem, calc( var( --cta-dw ) * 0.1 ) );
			height: max( 2.75rem, calc( var( --cta-dw ) * 0.1 ) );
		}
		/* Label scales with the artwork like the button: the configured rem
		   size means "at full-size artwork" (displayed width = the 1354px
		   master), and the k factor (rem × 16 / 1354, built in render.php/
		   edit.js) shrinks it in proportion to the displayed image width.
		   Floored for legibility. Two classes so this outranks the plain
		   .hh-overlay-label breakpoint rules regardless of source order. */
		.hero-cta .hh-overlay-label {
			font-size: max( 0.75rem, calc( var( --cta-dw ) * var( --hh-ov-k-mobile, 0.01772 ) ) );
		}
		@media ( min-width: 768px ) {
			.hero-cta .hh-overlay-label {
				font-size: max( 0.75rem, calc( var( --cta-dw ) * var( --hh-ov-k-tablet, 0.01772 ) ) );
			}
		}
		@media ( min-width: 1025px ) {
			.hero-cta .hh-overlay-label {
				font-size: max( 0.75rem, calc( var( --cta-dw ) * var( --hh-ov-k-desktop, 0.01772 ) ) );
			}
		}
	}
/* Resting state: a SOLID accent-deep disc, not a translucent one. The button
	   sits on the artwork's white circle, where the previous design put a white
	   ring, a white pulse and a 5%-ink fill — three affordances all cancelled by
	   the background they were placed on, leaving one thin grey word as the only
	   visible signal. A filled disc reads as a control at first glance instead.
	   Resting fill is accent-deep at 88%, so the artwork's white circle behind it
	   lifts the disc very slightly rather than reading as a flat sticker. Hover
	   DARKENS to #4d5654 (white label 7.6:1) — the opposite of the usual move,
	   because the only lighter neighbour in the palette is #849592 and white on
	   that is 3.1:1, which fails AA. Never use it under the label.

	   Contrast note: solid #616a68 under white is 5.6:1, but at 88% over the
	   white circle the blend is rgb(116,124,122) and the real figure is 4.28:1 —
	   under the 4.5:1 AA floor for text this size. Drop --cta-fill to a solid
	   #616a68 to get the full 5.6:1 back. Both are themeable per instance from
	   the block's CTA colour controls. */
.hero-cta {
		background-color: var( --cta-fill, rgba( 97, 106, 104, 0.88 ) );
	}
/* White by default: the label sits on the dark disc now, not on the artwork's
	   white circle, so the #626062 base in .hh-overlay-label would be unreadable.
	   Two classes to outrank that rule; an editor-set Overlay label colour still
	   wins, because it arrives as --hh-ov-color on the element itself. */
.hero-cta .hh-overlay-label {
		color: var( --hh-ov-color, #ffffff );
	}
/* Stacked label. Constraining the width is all it takes — the text node is an
	   anonymous flex item inside the label, so it shrinks and wraps between words
	   once it has a ceiling. Two short lines let the type stay large relative to
	   a small disc instead of being shrunk to fit across it, and they centre the
	   mass of the label in the circle rather than stretching it into a bar.
	   The ceiling has to land between the width of the longest single word and
	   the width of the whole label, or the break does not happen. Neither unit
	   holds that on its own across the size range: 62% of the disc stops forcing
	   the break once the label gets small, and a flat em ceiling drifts past the
	   whole label's width once it gets large. min() of the two is inside the
	   window at both ends. */
.hero-cta[data-stack] .hh-overlay-label {
		max-width: min( 62%, 4.2em );
		text-align: center;
		line-height: 1.12;
	}
/* The ring is an SVG stroke rather than a CSS border so it can DRAW itself on
	   entrance — stroke-dashoffset animates, border-width does not. r=49 in a
	   0 0 100 100 viewBox keeps it just inside the disc edge at every size, and
	   the stroke is in USER units, so it scales with the disc: 1 unit of the
	   0–100 viewBox is about 1.4px at a 136px button and 1.3px on a phone, which
	   is the hairline this wants at every size.

	   Deliberately NOT vector-effect: non-scaling-stroke, which looks like the
	   right tool for holding a true 1px. Under it Chrome moves stroke lengths into
	   device pixels and stops honouring pathLength, so the dash no longer matches
	   the circumference and the ring renders with a permanent gap in it — three
	   quarters of a circle with a raw 308-unit dasharray, and still a visible seam
	   with pathLength set. Plain user units keep dash and path in one space.

	   The dash is expressed against pathLength="100" on the circle — percent of
	   the path rather than the 2π·49 ≈ 308 units the geometry implies — so the
	   numbers here stay readable and stay correct if r ever changes.

	   Fully drawn at rest, because any render with no animation at all — reduced
	   motion, print, a restored bfcache page — must show the FINISHED ring rather
	   than a half-drawn arc. */
.hero-cta-ring {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}
.hero-cta-ring circle {
		fill: none;
		stroke: var( --cta-ring-color, rgba( 255, 255, 255, 0.55 ) );
		stroke-width: 1;
		/* butt, not round: at rest the dash runs the full pathLength, so the two
		   caps meet at 12 o'clock — rounded ones overlap into a visible notch that
		   never goes away, a worse trade than a slightly blunt leading edge during
		   the 900ms draw. */
		stroke-linecap: butt;
		/* 101 against pathLength="100", not 100: an exact-length dash leaves a
		   hairline seam where its two ends meet at 12 o'clock, and at rest that
		   seam is permanent. Overrunning by one percent closes the circle. The
		   animation still starts fully hidden — at offset 101 the whole path sits
		   inside the gap half of the pattern. */
		stroke-dasharray: 101;
		stroke-dashoffset: 0;
	}
/* Entrance. The eye is drawn to change, not to contrast, so the button
	   arrives rather than being simply present: the disc scales 0.8 → 1 while the
	   ring strokes itself around it, both after a short delay so the motion
	   happens once the hero has painted rather than during it. The ping below
	   then takes over the moment the ring closes — see its note for the timing
	   chain.

	   animation-fill-mode: backwards is what makes that delay safe — the element
	   holds the 0% keyframe (scaled down, ring undrawn) for the whole delay,
	   instead of showing the finished button and then snapping back to animate.

	   The delay runs from first paint rather than from the image's load event:
	   the hero <img> is eager + fetchpriority=high and this stylesheet is
	   render-blocking, so the two land within a frame of each other, and keeping
	   it in CSS means the button is still correct with JS disabled. A JS-driven
	   trigger that never fired would strand it at scale 0.8, opacity 0 — worse
	   than no animation. Gated on prefers-reduced-motion, so those visitors get
	   the finished disc immediately with no motion at all. */
@media ( prefers-reduced-motion: no-preference ) {
		.hero-cta {
			animation: hero-cta-enter 520ms cubic-bezier( 0.16, 1, 0.3, 1 ) 400ms backwards;
		}
		.hero-cta-ring circle {
			animation: hero-cta-ring-draw 900ms cubic-bezier( 0.16, 1, 0.3, 1 ) 400ms backwards;
		}
	}
/* translate() is repeated in both keyframes for the same reason as in the
	   hover rule below: transform replaces rather than merges, and .hero-cta uses
	   it to centre itself on the artwork anchor. */
@keyframes hero-cta-enter {
		from {
			transform: translate( -50%, -50% ) scale( 0.8 );
			opacity: 0;
		}
		to {
			transform: translate( -50%, -50% ) scale( 1 );
			opacity: 1;
		}
	}
@keyframes hero-cta-ring-draw {
		from {
			stroke-dashoffset: 101;
		}
		to {
			stroke-dashoffset: 0;
		}
	}
/* Ping, released by the draw. The ring completes at 400ms delay + 900ms
	   draw = 1300ms, and that is exactly when the first pulse leaves, so it
	   reads as caused by the ring closing rather than as a second, unrelated
	   animation. The second ring follows half a cycle later so the stream of
	   pulses never gaps.

	   White works here for a reason that did not hold in the original design:
	   the pulse used to start ON the artwork's white circle and stayed
	   invisible until it had expanded clear of it. The disc is filled now and
	   covers that circle, so the pulse leaves from a solid edge and travels
	   across the grey floor inside the C. Themeable via --cta-pulse-color if
	   the button is ever moved onto a light part of a photo.

	   Pure decoration: pointer-events: none, hollow (a border, so it never
	   covers the label) and sized from the button via inset: 0, so it tracks
	   the button's responsive size and centre automatically. The pseudo's own
	   scale is independent of the button's translate() centring, so the two
	   do not fight.

	   The 1.5 ceiling is a constraint, not a taste: .hh-media-frame clips to its
	   rounded corners, and on a tall portrait crop the button sits close enough
	   to the frame edge that there is only 1.45x of the disc radius to play with
	   before a ring meets it. Measured across every breakpoint, that 3:4 case is
	   the tightest; at 1.5 with the fade complete by 60% the ring is fully
	   transparent by about 1.37x, so it never shows a flat clipped edge. Raising
	   either number puts that back — the old 1.75/70% was still visible at 1.59x
	   and was being sliced by roughly 10px on a 390-wide screen.

	   The rings must NEVER be visible at rest, only mid-pulse: base opacity 0,
	   so any non-animating instant -- the ::after's start delay, a paint after
	   a bfcache restore, a paused animation -- shows nothing rather than a
	   solid static outline hugging the button. The keyframes drive opacity up
	   only while a ring is expanding. No :hover pause, which would otherwise
	   freeze a visible frame. */
@media ( prefers-reduced-motion: no-preference ) {
		.hero-cta::before,
		.hero-cta::after {
			content: '';
			position: absolute;
			inset: 0;
			border-radius: 9999px;
			border: 2px solid var( --cta-pulse-color, rgba( 255, 255, 255, 0.75 ) );
			opacity: 0;
			pointer-events: none;
			animation: hero-cta-ping 3s cubic-bezier( 0, 0, 0.2, 1 ) 1300ms infinite;
		}
		/* Half a cycle behind, so the stream never gaps. */
		.hero-cta::after {
			animation-delay: 2800ms;
		}
	}
@keyframes hero-cta-ping {
		0% {
			transform: scale( 1 );
			opacity: 0.6;
		}
		60% {
			opacity: 0;
		}
		100% {
			transform: scale( 1.5 );
			opacity: 0;
		}
	}
/* Hover/focus: lighten to accent and lift. The ring deliberately stays white
	   rather than following the fill — matching it would erase the ring at exactly
	   the moment the button is being pointed at. */
.hero-cta:hover,
	.hero-cta:focus-visible {
		transform: translate( -50%, -50% ) scale( 1.05 );
		background-color: var( --cta-hover-bg, #4d5654 );
	}
/* The ring firms up on hover, so pointing at the control is acknowledged
	   by its edge as well as by the fill. */
.hero-cta:hover .hero-cta-ring circle,
	.hero-cta:focus-visible .hero-cta-ring circle {
		stroke: var( --cta-ring-color, rgba( 255, 255, 255, 0.9 ) );
	}
/* Focus ring sits on the button itself. A flat offset is correct now that
	   nothing stands proud of the disc -- the pulse rings are transparent at
	   rest and never occupy that gap. outline follows border-radius, so it
	   renders as a circle rather than a square. */
.hero-cta:focus-visible {
		outline: 2px solid var( --cta-focus-color, #ffffff );
		outline-offset: 3px;
	}
/* Arrow glyph — off by default now that the label reads "Start here" and says
	   what it does on its own; the toggle stays for deployments that want it. It
	   lives INSIDE .hh-overlay-label, not beside it, so `em` resolves against the
	   label's own computed size — that size is the artwork-relative calc() in
	   .hero-cta .hh-overlay-label above, which a sibling would have had to
	   duplicate. Colour inherits from the label for the same reason. */
.hero-cta-arrow {
		font-size: 1.1em;
		margin-top: 0.05em;
	}
/* ---------- Home hero ---------- */
/* Section spacing: replaces .container-page on this block. Margin and
	   padding are split across two nested elements on purpose — .hh-section
	   (outer) carries the editable margin, .hh-section-inner (inner) carries
	   the max-width/centering plus editable padding. Combining "margin-left:
	   auto" (needed to center a max-width box) with a second, independently
	   editable margin value on the same element isn't expressible in CSS
	   (calc() can't add a length to the auto keyword), hence the split. Same
	   rationale as .process-timeline-section: Tailwind can't generate CSS
	   for a runtime-configurable value. Custom breakpoints, see .hero-cta
	   above: mobile ≤767px, tablet 768–1024px, desktop ≥1025px. */
.hh-section {
		margin-top: var( --hh-mt-mobile, 0 );
		margin-bottom: var( --hh-mb-mobile, 0 );
		margin-left: var( --hh-ml-mobile, 0 );
		margin-right: var( --hh-mr-mobile, 0 );
	}
.hh-section-inner {
		/* 1600px — the home hero runs WIDER than the global page track
		   (maxWidth.container, 1400px) on purpose: it is the front page's only
		   content and reads as a full-bleed showpiece rather than a section in
		   the page rhythm. Nothing aligns to it, so it does not need to match
		   the header/footer/hero track. */
		max-width: 1600px;
		margin-left: auto;
		margin-right: auto;
		padding-top: var( --hh-pt-mobile, 0 );
		padding-bottom: var( --hh-pb-mobile, 0 );
		padding-left: var( --hh-pl-mobile, 1.5rem );
		padding-right: var( --hh-pr-mobile, 1.5rem );
	}
@media ( min-width: 768px ) {
		.hh-section {
			margin-top: var( --hh-mt-tablet, 0 );
			margin-bottom: var( --hh-mb-tablet, 0 );
			margin-left: var( --hh-ml-tablet, 0 );
			margin-right: var( --hh-mr-tablet, 0 );
		}
		.hh-section-inner {
			padding-top: var( --hh-pt-tablet, 0 );
			padding-bottom: var( --hh-pb-tablet, 0 );
			padding-left: var( --hh-pl-tablet, 1.5rem );
			padding-right: var( --hh-pr-tablet, 1.5rem );
		}
	}
@media ( min-width: 1025px ) {
		.hh-section {
			margin-top: var( --hh-mt-desktop, 0 );
			margin-bottom: var( --hh-mb-desktop, 0 );
			margin-left: var( --hh-ml-desktop, 0 );
			margin-right: var( --hh-mr-desktop, 0 );
		}
		.hh-section-inner {
			padding-top: var( --hh-pt-desktop, 0 );
			padding-bottom: var( --hh-pb-desktop, 0 );
			padding-left: var( --hh-pl-desktop, 2.5rem );
			padding-right: var( --hh-pr-desktop, 2.5rem );
		}
	}
/* Front page only (body.home): the hero is the sole content and there is
	   deliberately no footer, so any viewport taller than the hero showed
	   dead white space below it. Stretch the hero to fill the remaining
	   viewport height instead: flex plumbing from .wp-site-blocks down to
	   the media frame, `flex: 1 0 auto` at every level so each box can GROW
	   to fill leftover space but never shrink below its natural
	   (aspect-ratio) height. The extra height just crops the cover image
	   further — the Start button stays pinned to the artwork through the
	   .hero-cta cover math, so this is safe at any size. The admin-bar
	   var keeps logged-in views from overflowing by the bar's height. */
body.home .wp-site-blocks {
		display: flex;
		flex-direction: column;
		min-height: calc( 100svh - var( --wp-admin--admin-bar--height, 0px ) );
	}
body.home .wp-site-blocks > main {
		display: flex;
		flex-direction: column;
		flex: 1 0 auto;
	}
body.home .wp-site-blocks > main > div:has( > .hh-section ) {
		display: flex;
		flex-direction: column;
		flex: 1 0 auto;
	}
body.home .hh-section {
		display: flex;
		flex-direction: column;
		flex: 1 0 auto;
	}
body.home .hh-section-inner {
		display: flex;
		flex-direction: column;
		flex: 1 0 auto;
		width: 100%;
	}
body.home .hh-media-frame {
		flex: 1 0 auto;
	}
/* Media frame: object-fit/position, width, aspect ratio (overridable by
	   an explicit height) and four independent corner radii — every one of
	   these is set per-breakpoint, since the crop shape itself already
	   changes at each size (see .hero-cta note above re: custom breakpoints
	   and thepoint_image_dims_attr()/edit.js for how the vars are built). */
.hh-media-frame {
		width: var( --hh-width-mobile, 100% );
		aspect-ratio: var( --hh-ar-mobile, 3 / 4 );
		height: var( --hh-height-mobile, auto );
		border-top-left-radius: var( --hh-radius-tl-mobile, 12px );
		border-top-right-radius: var( --hh-radius-tr-mobile, 12px );
		border-bottom-right-radius: var( --hh-radius-br-mobile, 0px );
		border-bottom-left-radius: var( --hh-radius-bl-mobile, 0px );
		/* Kill .media-frame's gray bg-placeholder: the square-cornered image
		   clipped by the rounded frame leaves an antialiased sliver of the
		   placeholder showing at the corner curves. */
		background-color: transparent;
	}
.hh-media-frame .hh-media-cover {
		-o-object-fit: var( --hh-fit-mobile, cover );
		   object-fit: var( --hh-fit-mobile, cover );
		-o-object-position: var( --hh-pos-x-mobile, 50% ) var( --hh-pos-y-mobile, 50% );
		   object-position: var( --hh-pos-x-mobile, 50% ) var( --hh-pos-y-mobile, 50% );
		/* Round the image itself to the frame's exact radii so the clipped
		   corner edge is antialiased against the image, not the backdrop. */
		border-radius: inherit;
	}
@media ( min-width: 768px ) {
		.hh-media-frame {
			width: var( --hh-width-tablet, 100% );
			aspect-ratio: var( --hh-ar-tablet, 4 / 3 );
			height: var( --hh-height-tablet, auto );
			border-top-left-radius: var( --hh-radius-tl-tablet, 12px );
			border-top-right-radius: var( --hh-radius-tr-tablet, 12px );
			border-bottom-right-radius: var( --hh-radius-br-tablet, 0px );
			border-bottom-left-radius: var( --hh-radius-bl-tablet, 0px );
		}
		.hh-media-frame .hh-media-cover {
			-o-object-fit: var( --hh-fit-tablet, cover );
			   object-fit: var( --hh-fit-tablet, cover );
			-o-object-position: var( --hh-pos-x-tablet, 50% ) var( --hh-pos-y-tablet, 50% );
			   object-position: var( --hh-pos-x-tablet, 50% ) var( --hh-pos-y-tablet, 50% );
		}
	}
@media ( min-width: 1025px ) {
		.hh-media-frame {
			width: var( --hh-width-desktop, 100% );
			aspect-ratio: var( --hh-ar-desktop, 1354 / 737 );
			height: var( --hh-height-desktop, auto );
			border-top-left-radius: var( --hh-radius-tl-desktop, 12px );
			border-top-right-radius: var( --hh-radius-tr-desktop, 12px );
			border-bottom-right-radius: var( --hh-radius-br-desktop, 0px );
			border-bottom-left-radius: var( --hh-radius-bl-desktop, 0px );
		}
		.hh-media-frame .hh-media-cover {
			-o-object-fit: var( --hh-fit-desktop, cover );
			   object-fit: var( --hh-fit-desktop, cover );
			-o-object-position: var( --hh-pos-x-desktop, 50% ) var( --hh-pos-y-desktop, 50% );
			   object-position: var( --hh-pos-x-desktop, 50% ) var( --hh-pos-y-desktop, 50% );
		}
	}
/* Overlay text: font family shared across all three roles; size/weight/
	   color independent per role; sizes responsive per breakpoint. Heading and
	   tagline sit on the photo and stay white. The label does NOT: it's the
	   "Start" word inside .hero-cta, which sits on the white C-circle of the
	   artwork, so white-on-white made it near-invisible (it was already lifted
	   40% → 80% opacity for this reason, which only half-fixed it). It defaults
	   to brand grey instead. Override via the colour control (--hh-ov-color
	   wins) if the button is ever moved onto a dark part of a photo. */
.hh-overlay-label {
		font-family: var( --hh-font-family, inherit );
		font-weight: var( --hh-ov-weight, 300 );
		font-size: var( --hh-ov-mobile, 1.5rem );
		color: var( --hh-ov-color, #626062 );
	}
.hh-heading {
		font-family: var( --hh-font-family, inherit );
		font-weight: var( --hh-hd-weight, 500 );
		font-size: var( --hh-hd-mobile, 2.25rem );
		letter-spacing: var( --hh-hd-tracking, -0.025em );
		color: var( --hh-hd-color, #ffffff );
		line-height: 1.15;
	}
.hh-tagline {
		font-family: var( --hh-font-family, inherit );
		font-weight: var( --hh-tg-weight, 300 );
		font-size: var( --hh-tg-mobile, 1.25rem );
		color: var( --hh-tg-color, rgba( 255, 255, 255, 0.85 ) );
		line-height: 1.65;
	}
/* Overlay content alignment: align-items + text-align per breakpoint, via
	   CSS vars rather than responsive Tailwind classes — this block's custom
	   768/1025 breakpoints don't match Tailwind's sm/md, so sm:/md: utility
	   prefixes would use the wrong cutoffs here. */
.hh-content {
		align-items: var( --hh-align-mobile, center );
		text-align: var( --hh-text-align-mobile, center );
	}
@media ( min-width: 768px ) {
		.hh-overlay-label { font-size: var( --hh-ov-tablet, 1.5rem ); }
		.hh-heading { font-size: var( --hh-hd-tablet, 2.25rem ); }
		.hh-tagline { font-size: var( --hh-tg-tablet, 1.25rem ); }
		.hh-content {
			align-items: var( --hh-align-tablet, center );
			text-align: var( --hh-text-align-tablet, center );
		}
	}
@media ( min-width: 1025px ) {
		.hh-overlay-label { font-size: var( --hh-ov-desktop, 1.5rem ); }
		.hh-heading { font-size: var( --hh-hd-desktop, 3rem ); }
		.hh-tagline { font-size: var( --hh-tg-desktop, 1.25rem ); }
		.hh-content {
			align-items: var( --hh-align-desktop, center );
			text-align: var( --hh-text-align-desktop, center );
		}
	}
/* ---------- Header ---------- */
/* Link color/size are themeable per nav block: size + weight inherit from the
	   nav wrapper's type token (so the Header Navigation font-size control works),
	   color from CSS custom properties (fallbacks = the default heading/80 + accent).
	   `transition` rather than transition-colors — the hover lift is a transform,
	   which transition-colors would not animate. */
.nav-link {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
		color: var( --nav-link-color, rgb( 0 0 0 / 0.8 ) );
}
.nav-link:hover,
	.nav-link.is-active {
		color: var( --nav-link-active, #849592 );
	}
/* Modular header rows: full-bleed band + a container-width flex track whose
	   height + vertical padding are set via CSS custom properties (arbitrary
	   values Tailwind can't precompute — same pattern as .hero-cta). Unset = auto/0. */
.header-row {
  width: 100%;
}
.header-divider-top {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(221 221 221 / var(--tw-border-opacity, 1));
}
.header-divider-bottom {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(221 221 221 / var(--tw-border-opacity, 1));
}
.header-row-inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 768px) {
  .header-row-inner {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
.header-row-inner {
		height: var( --h-m );
		padding-top: var( --row-py, 0 );
		padding-bottom: var( --row-py, 0 );
	}
/* Horizontal padding override: only when the block sets --row-px (otherwise
	   the responsive page gutters above apply). */
.header-row-inner[ style*='--row-px' ] {
		padding-left: var( --row-px );
		padding-right: var( --row-px );
	}
@media (min-width: 768px) {
		.header-row-inner {
			height: var( --h-d );
		}
	}
/* ---------- Modular footer ----------
	   Same variable-driven approach as the header rows above: every fallback here
	   IS the original footer design, so a block that sets no attributes renders
	   exactly what the old monolithic `site-footer` block did. An unset attribute
	   never emits a custom property, so the fallback simply applies. */
/* Two separate surfaces, matching the original design's two elements:

	     .footer-section        the page-canvas band (was `container-page mt-16 md:mt-24`)
	       └ .footer-section-inner   the panel track — full-bleed + 2rem gutter by default
	           └ .footer-panel       the teal-slate panel (was `bg-accent-deep …
	                                 rounded-t-xl px-8 py-14 md:px-24 md:py-24`)

	   The band owns the background behind the panel and the vertical breathing
	   room; the panel owns its own colour, padding and corners. Both are edited
	   independently (Footer Section / Footer Container blocks). */
.footer-section {
		width: 100%;
		background-color: var( --fsec-bg, transparent );
		padding-top: var( --fsec-pt-m, 4rem );
		padding-bottom: var( --fsec-pb-m, 0px );
	}
/* FULL-BLEED BY DEFAULT: the panel spans the viewport, inset by a flat 2rem
	   gutter at every breakpoint — the same treatment as the Page Hero.
	   This default deliberately lives in CSS rather than in the block's
	   attributes: a Site Editor-customized footer part stores its own serialized
	   attributes, so an attribute-driven default never reaches an environment
	   whose part was customized before the change (which is exactly how staging
	   and main ended up still constrained). A CSS default applies everywhere.
	   Constraining the footer to the global page width is now the explicit
	   choice — Footer Section emits --fsec-maxw when Full-bleed is off. */
.footer-section-inner {
		margin-left: auto;
		margin-right: auto;
		max-width: var( --fsec-maxw, none );
		padding-left: var( --fsec-gutter, 2rem );
		padding-right: var( --fsec-gutter, 2rem );
	}
/* The panel: rounded on the TOP corners only by default, sitting on the
	   bottom edge of the canvas. Every side and corner is independently settable.

	   SIDE padding defaults to 0 on purpose: the panel background stays full
	   width, but its CONTENT sits on the global content track (a .container-page
	   child, added by footer-container/render.php) so it lines up with the header
	   logo. Any symmetric side padding set here cancels out of that centring, so
	   the alignment survives whatever the padding controls are set to — it only
	   shifts if the left and right values differ. Vertical padding is unchanged. */
.footer-panel {
		border-radius: var( --fp-rtl, 20px ) var( --fp-rtr, 20px ) var( --fp-rbr, 0px ) var( --fp-rbl, 0px );
		background-color: var( --fp-bg, #616a68 );
		color: var( --fp-fg, #ffffff );
		padding: var( --fp-pt-m, 3.5rem ) var( --fp-pr-m, 0px ) var( --fp-pb-m, 3.5rem ) var( --fp-pl-m, 0px );
	}
/* ----- Section & panel padding: three INDEPENDENT device ranges -----

	     Mobile   below 768px          (the base rules above)
	     Tablet   768px – 1023.98px    (bounded — see below)
	     Desktop  1024px and up

	   Tablet is a BOUNDED range, not a `min-width` breakpoint, so editing tablet
	   padding cannot leak into desktop. Each range therefore carries its own
	   design default rather than inheriting the range below it — which is what
	   the block's "Default 96" help text promises. The original design's `md:`
	   sizes are the default for BOTH tablet and desktop, so nothing shifts.

	   Note this differs on purpose from row spacing (--frow-mt-*) below, which
	   has no per-device design default and so does fall back to the range under
	   it — the Inspector labels that one "Falls back to tablet". */
@media (min-width: 768px) and (max-width: 1023.98px) {
		.footer-section {
			padding-top: var( --fsec-pt-t, 6rem );
			padding-bottom: var( --fsec-pb-t, 0px );
		}
		.footer-panel {
			padding:
				var( --fp-pt-t, 6rem )
				var( --fp-pr-t, 0px )
				var( --fp-pb-t, 6rem )
				var( --fp-pl-t, 0px );
		}
	}
@media (min-width: 1024px) {
		.footer-section {
			padding-top: var( --fsec-pt-d, 6rem );
			padding-bottom: var( --fsec-pb-d, 0px );
		}
		.footer-panel {
			padding:
				var( --fp-pt-d, 6rem )
				var( --fp-pr-d, 0px )
				var( --fp-pb-d, 6rem )
				var( --fp-pl-d, 0px );
		}
	}
/* No md gutter step any more: the footer gutter is a flat 2rem at every
	   breakpoint (see .footer-section-inner above), matching the Page Hero's
	   px-8. A footer that wants the old .container-page 24/40px rhythm sets the
	   Side padding control explicitly. */
/* Row: a grid band. Column count / gap preset / alignment arrive as literal
	   Tailwind classes from render.php; only the continuous values live here. */
.footer-row {
		margin-top: var( --frow-mt, 0 );
	}
/* Gap override wins over the preset gap-* class only when the block sets it. */
.footer-row[ style*='--frow-gap' ] {
		gap: var( --frow-gap );
	}
/* Dividers tint from the panel's own text color rather than the light
	   .header-divider-* border, which would glare on the dark panel. */
.footer-row--divider-top {
		border-top: 1px solid color-mix( in srgb, currentColor 20%, transparent );
		padding-top: var( --frow-divider-pad, 2rem );
	}
.footer-row--divider-bottom {
		border-bottom: 1px solid color-mix( in srgb, currentColor 20%, transparent );
		padding-bottom: var( --frow-divider-pad, 2rem );
	}
@media (min-width: 768px) {
		.footer-row {
			margin-top: var( --frow-mt-t, var( --frow-mt, 0 ) );
		}
	}
@media (min-width: 1024px) {
		.footer-row {
			margin-top: var( --frow-mt-d, var( --frow-mt-t, var( --frow-mt, 0 ) ) );
		}
	}
/* Column: a vertical stack. Gap is opt-in — by default each module owns its
	   own margins, which is how the original footer spaced its lines. */
.footer-col {
  display: flex;
  flex-direction: column;
		gap: var( --fcol-gap, 0 );
		max-width: var( --fcol-maxw, none );
}
/* Every leaf module shares one spacing/color contract. */
.footer-module {
		margin-top: var( --fm-mt, 0 );
		margin-bottom: var( --fm-mb, 0 );
		max-width: var( --fm-maxw, none );
		color: var( --fm-color, inherit );
	}
.footer-link {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.footer-link:hover {
		color: var( --fm-color-h, var( --fm-color, inherit ) );
	}
.footer-logo-img {
		height: var( --flogo-h-m, 5rem );
		width: auto;
	}
@media (min-width: 768px) {
		.footer-logo-img {
			height: var( --flogo-h-d, 7rem );
		}
	}
/* Contact stack: `space-y-1` in the original, expressed as a settable gap. */
.footer-contact {
		gap: var( --fct-gap, 0.25rem );
	}
/* Footer menu: reuses .nav-link (recolored via --nav-link-color /
	   --nav-link-active) so header and footer links share one design. The hover
	   lift .nav-link applies in the header would read as a glitch down here. */
.footer-menu .nav-link:hover {
		transform: none;
	}
.footer-menu-list {
		gap: var( --fmenu-gap, 0.5rem );
	}
/* Multi-column layout is CSS columns, not flex, so the gap becomes a margin. */
.footer-menu-list--cols > li {
		margin-bottom: var( --fmenu-gap, 0.5rem );
		-moz-column-break-inside: avoid;
		     break-inside: avoid;
	}
/* Footer submenus are a static indented list — never the header's floating
	   .nav-dropdown (see thepoint_header_nav_submenu_class in functions.php). */
.footer-submenu {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  padding-left: 1rem;
		gap: var( --fmenu-gap, 0.5rem );
		opacity: 0.85;
}
.footer-social {
		gap: var( --fsoc-gap, 0.75rem );
	}
.footer-social__link {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.footer-social__link:hover {
		color: var( --fm-color-h, var( --fm-color, inherit ) );
		opacity: var( --fsoc-hover-op, 0.7 );
	}
/* Divider tints from the panel's own text color, so it reads correctly on any
	   panel background instead of glaring like a fixed light border would.
	   Width is a modifier class, not Tailwind's w-full/w-auto: those live in the
	   utilities layer, which would win over --fd-w here in the components layer. */
.footer-divider {
		border: 0;
		border-top: var( --fd-th, 1px ) solid var( --fd-color, currentColor );
		opacity: var( --fd-op, 0.2 );
		width: 100%;
		margin-top: var( --fm-mt, 1.5rem );
		margin-bottom: var( --fm-mb, 1.5rem );
	}
.footer-divider--fixed {
		width: var( --fd-w, 4rem );
	}
.footer-contact__item {
  display: inline-flex;
  align-items: center;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.footer-contact__item:hover {
		color: var( --fm-color-h, var( --fm-color, inherit ) );
	}
/* ---------- Header button (variable-driven; defaults match .pill-ghost) ---------- */
.header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
		gap: var( --btn-gap, 0.5rem );
		border-style: solid;
		border-width: var( --btn-bw, 1px );
		border-color: var( --btn-bd, rgb( 255 255 255 / 0.7 ) );
		border-radius: var( --btn-radius, 100px );
		padding: var( --btn-py, 0.5rem ) var( --btn-px, 1rem );
		background-color: var( --btn-bg, transparent );
		color: var( --btn-fg, #ffffff );
		font-size: var( --btn-fs, 12px );
}
.header-btn:hover {
		background-color: var( --btn-bg-h, var( --btn-bg, transparent ) );
		border-color: var( --btn-bd-h, var( --btn-bd, rgb( 255 255 255 / 0.7 ) ) );
		color: var( --btn-fg-h, var( --btn-fg, #ffffff ) );
	}
.header-btn__icon {
		height: var( --btn-icon-size, 1em );
		width: auto;
		display: block;
	}
/* ---------- Header search field (variable-driven) ---------- */
.header-search-field {
  display: inline-flex;
  cursor: text;
  align-items: center;
		gap: var( --se-gap, 0.5rem );
		width: var( --se-width, 210px );
		border-style: solid;
		border-width: var( --se-bw, 1px );
		border-color: var( --se-bd, rgb( 255 255 255 / 0.7 ) );
		border-radius: var( --se-radius, 100px );
		padding: var( --se-py, 0.5rem ) var( --se-px, 1rem );
		background-color: var( --se-bg, transparent );
		color: var( --se-fg, #ffffff );
		font-size: var( --se-fs, 12px );
}
.header-search-field.is-full {
		width: 100%;
	}
.header-search-field .icon-inline {
		font-size: var( --se-icon-size, 1rem );
		color: var( --se-icon-color, currentColor );
	}
.header-search-field input {
  min-width: 0px;
  flex: 1 1 0%;
  border-width: 0px;
  background-color: transparent;
  outline: 2px solid transparent;
  outline-offset: 2px;
		color: inherit;
		font-size: inherit;
}
.header-search-field input::-moz-placeholder {
		color: currentColor;
		opacity: 0.6;
	}
.header-search-field input::placeholder {
		color: currentColor;
		opacity: 0.6;
	}
/* Kill the browser's autofill white/yellow fill so the field stays on-brand. */
.header-search-field input:-webkit-autofill,
	.header-search-field input:-webkit-autofill:hover,
	.header-search-field input:-webkit-autofill:focus {
		-webkit-box-shadow: 0 0 0 1000px transparent inset;
		-webkit-text-fill-color: currentColor;
		caret-color: currentColor;
		-webkit-transition: background-color 9999s ease-in-out 0s;
		transition: background-color 9999s ease-in-out 0s;
	}
.search-reveal__icon {
  flex-shrink: 0;
  cursor: pointer;
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
  line-height: 1;
		color: inherit;
}
/* Collapsed (tablet button mode): only the icon shows, centered. The input is
	   removed from layout (display:none) so neither its width nor the flex gap
	   offsets the icon. */
.search-reveal .header-search-field {
		justify-content: center;
	}
.search-reveal .header-search-field input {
		display: none;
	}
/* Close (✕) only appears once the bar is open. */
.header-search-field .search-reveal__close {
  flex-shrink: 0;
  cursor: pointer;
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
  line-height: 1;
		color: inherit;
		display: none;
}
/* Open: full bar — input fills the left, icon pinned to the right. */
.is-search-open .search-reveal .header-search-field {
		justify-content: flex-start;
	}
.is-search-open .search-reveal .header-search-field input {
		display: block;
		flex: 1;
		width: auto;
	}
.is-search-open .search-reveal .search-reveal__close {
		display: inline-flex;
	}
.is-search-open .search-reveal__icon {
		margin-left: auto;
	}
/* ---------- Below-lg search reveal (tablet inline / mobile drop-down) ---------- */
.search-reveal {
		overflow: hidden;
		background-color: var( --search-reveal-bg, #626062 );
	}
/* Tablet (md–lg): the search field IS the collapsed icon button; it grows to
	   the LEFT into the empty header space (never covering the CTA), right-anchored
	   so the icon stays put and the input reveals/collapses seamlessly. There is no
	   separate button underneath, so nothing overlaps. */
@media (min-width: 768px) {
		.header-search-reveal-wrap {
			position: relative;
			width: 3.1rem;
		}
		.search-reveal {
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY( -50% );
			z-index: 106;
			width: 3.1rem;
			transition: width 0.3s ease;
		}
		.is-search-open .search-reveal {
			width: min( 360px, 78vw );
		}
	}
/* Mobile (< md): the bar drops full-width directly below the header band
	   (anchored to the relative .header-row-inner), inset by the header gutter so
	   it lines up with the header content. */
@media ( max-width: 767px ) {
		.search-reveal {
			position: absolute;
			top: 100%;
			left: 0;
			right: 0;
			z-index: 105;
			padding: 0.75rem 1.5rem;
			opacity: 0;
			transform: translateY( -0.5rem );
			pointer-events: none;
			transition: opacity 0.2s ease, transform 0.2s ease;
		}
		.is-search-open .search-reveal {
			opacity: 1;
			transform: translateY( 0 );
			pointer-events: auto;
		}
	}
/* Desktop dropdown submenus (WordPress adds `.nav-dropdown` to sub-menus of
	   the primary menu). Hover/focus reveals them beneath the parent item. */
.nav-item {
  position: relative;
}
.nav-dropdown {
  position: absolute;
  left: 0px;
  top: 100%;
  z-index: 130;
  display: none;
  min-width: 200px;
  flex-direction: column;
  gap: 0.25rem;
  border-radius: 15px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(221 221 221 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 0.5rem;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.nav-item:hover > .nav-dropdown,
	.nav-item:focus-within > .nav-dropdown {
  display: flex;
}
.nav-dropdown .nav-link {
  display: block;
  white-space: nowrap;
  border-radius: 10px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.nav-dropdown .nav-link:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(248 248 248 / var(--tw-bg-opacity, 1));
}
/* Desktop nav: top-level links fill the band height so dropdowns open just
	   below the band; a caret marks items that have a submenu (:has, modern
	   browsers — degrades to no caret). */
.header-desktop-nav > ul > .nav-item > .nav-link {
  display: flex;
  height: 100%;
  align-items: center;
}
@media (min-width: 768px) {
		.header-desktop-nav > ul > .nav-item:has( > .nav-dropdown ) > .nav-link {
    gap: 0.25rem;
  }
		.header-desktop-nav > ul > .nav-item:has( > .nav-dropdown ) > .nav-link::after {
			content: 'expand_more';
			font-family: 'Material Symbols Outlined';
			font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
			font-size: 1.15em;
			line-height: 1;
		}
	}
/* Opt-in mega menu: add the CSS class `mega` to a top-level menu item (Menus
	   → Screen Options → CSS Classes). The panel spans the container (anchored to
	   the relative .header-row-inner) and wraps its links into columns. */
.header-desktop-nav > ul > .nav-item.mega {
		position: static;
	}
.header-desktop-nav > ul > .nav-item.mega > .nav-dropdown {
  left: 0px;
  right: 0px;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
  row-gap: 0.25rem;
  padding: 1.5rem;
}
/* Mobile off-canvas menu list: default nav type size (links inherit it since
	   .nav-link no longer hardcodes a size), full-width links, and submenus that
	   collapse into an accordion (toggle button injected by frontend.js). */
.header-mobile-nav {
  font-size: 13px;
  line-height: 1.4;
  font-weight: 400;
}
.header-mobile-nav .nav-link {
  display: block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.header-mobile-nav .nav-dropdown {
  position: static;
  display: none;
  flex-direction: column;
  border-width: 0px;
  padding: 0px;
  padding-left: 1rem;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.header-mobile-nav .nav-item.is-open > .nav-dropdown {
  display: flex;
}
.submenu-toggle {
  position: absolute;
  right: 0px;
  top: 0px;
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-width: 0px;
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.submenu-toggle .icon-inline {
  font-size: 1.5rem;
  line-height: 2rem;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.header-mobile-nav .nav-item.is-open > .submenu-toggle .icon-inline {
		transform: rotate( 180deg );
	}
/* Hand-written transform, not `-translate-y-0.5` — see .carousel-dot for why
	   Tailwind's transform utilities are inert in the editor canvas. */
.nav-link:hover {
		transform: translateY( -2px );
	}
/* ---------- Inputs ---------- */
.field {
  width: 100%;
  border-radius: 15px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(221 221 221 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-family: Geom, Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 300;
  --tw-text-opacity: 1;
  color: rgb(79 79 79 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.field::-moz-placeholder {
  color: rgb(79 79 79 / 0.4);
}
.field::placeholder {
  color: rgb(79 79 79 / 0.4);
}
.field:focus {
  --tw-border-opacity: 1;
  border-color: rgb(132 149 146 / var(--tw-border-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
}
/* Filter-card controls (About / Office Search): grey r=10 boxes + a teal
	   solid r=10 search button — NOT pills (SOT: Filter Bar / Buttons). */
.filter-box {
  display: flex;
  height: 2.75rem;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-radius: 10px;
  --tw-bg-opacity: 1;
  background-color: rgb(229 229 229 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  font-family: Geom, Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 300;
  color: rgb(79 79 79 / 0.7);
}
.btn-filter {
  display: inline-flex;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 10px;
  --tw-bg-opacity: 1;
  background-color: rgb(132 149 146 / var(--tw-bg-opacity, 1));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-family: Geom, Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.btn-filter:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(97 106 104 / var(--tw-bg-opacity, 1));
}
/* ---------- Process timeline ---------- */
/* Plain 13px dots on a thin connector line (SOT: Process Timeline) — the
	   numbered ring dots of the first build were invented. Six colors are
	   independently editable per-block instance (see edit.js/render.php):
	   intro heading, intro body, step title, step body, dot, connector line.
	   Same rationale as .hero-cta below: Tailwind can't generate CSS for a
	   runtime-configurable value. */
.step-dot {
  display: block;
  height: 0.75rem;
  width: 0.75rem;
  border-radius: 9999px;
		background-color: var( --ptl-dot-color, #849592 );
}
.step-line {
  position: absolute;
  top: 5px;
  left: 0px;
  right: 0px;
  display: none;
  height: 1px;
}
@media (min-width: 640px) {
  .step-line {
    display: block;
  }
}
.step-line {
		background-color: var( --ptl-line-color, #849592 );
		opacity: 0.7;
	}
/* Section width + spacing: this class now fully replaces .container-page
	   on this block (max-width, centering, and all four padding sides are
	   editable per-breakpoint) so side padding isn't locked to the sitewide
	   px-6/md:px-10 default. */
.process-timeline-section {
		max-width: 1400px;
		margin-left: auto;
		margin-right: auto;
		padding-top: var( --ptl-pt-mobile, 4rem );
		padding-bottom: var( --ptl-pb-mobile, 4rem );
		padding-left: var( --ptl-pl-mobile, 1.5rem );
		padding-right: var( --ptl-pr-mobile, 1.5rem );
	}
@media (min-width: 640px) {
		.process-timeline-section {
			padding-top: var( --ptl-pt-tablet, 4rem );
			padding-bottom: var( --ptl-pb-tablet, 4rem );
			padding-left: var( --ptl-pl-tablet, 1.5rem );
			padding-right: var( --ptl-pr-tablet, 1.5rem );
		}
	}
@media (min-width: 768px) {
		.process-timeline-section {
			padding-top: var( --ptl-pt-desktop, 4rem );
			padding-bottom: var( --ptl-pb-desktop, 6rem );
			padding-left: var( --ptl-pl-desktop, 2.5rem );
			padding-right: var( --ptl-pr-desktop, 2.5rem );
		}
	}
/* Steps grid: 1 column on mobile always, editable column count from the
	   sm breakpoint up, editable gap at every size. */
.process-timeline-grid {
		grid-template-columns: repeat( 1, minmax( 0, 1fr ) );
		gap: var( --ptl-gap, 2.5rem );
	}
@media (min-width: 640px) {
		.process-timeline-grid {
			grid-template-columns: repeat( var( --ptl-cols-tablet, 2 ), minmax( 0, 1fr ) );
		}
	}
@media (min-width: 768px) {
		.process-timeline-grid {
			grid-template-columns: repeat( var( --ptl-cols-desktop, 3 ), minmax( 0, 1fr ) );
		}
	}
/* Responsive type scale + independent color, one set per text role, plus
	   a shared font-family override — all set as CSS custom properties on
	   the section wrapper in edit.js/render.php, so nothing here needs to
	   know about the block's attributes directly. Color fallbacks match the
	   original fixed design: ink (#4f4f4f) for body copy, accent (#849592)
	   for the step title (it was always teal, not ink, in the original). */
.ptl-intro-heading {
		font-family: var( --ptl-font-family, inherit );
		font-weight: var( --ptl-ih-weight, 500 );
		font-size: var( --ptl-ih-mobile, 1.75rem );
		color: var( --ptl-ih-color, #4f4f4f );
	}
.ptl-intro-body {
		font-family: var( --ptl-font-family, inherit );
		font-weight: var( --ptl-ib-weight, 300 );
		font-size: var( --ptl-ib-mobile, 0.9375rem );
		color: var( --ptl-ib-color, #4f4f4f );
	}
.ptl-step-title {
		font-family: var( --ptl-font-family, inherit );
		font-weight: var( --ptl-st-weight, 500 );
		font-size: var( --ptl-st-mobile, 1.125rem );
		color: var( --ptl-st-color, #849592 );
	}
.ptl-step-body {
		font-family: var( --ptl-font-family, inherit );
		font-weight: var( --ptl-sb-weight, 300 );
		font-size: var( --ptl-sb-mobile, 0.875rem );
		color: var( --ptl-sb-color, #4f4f4f );
	}
@media (min-width: 640px) {
		.ptl-intro-heading { font-size: var( --ptl-ih-tablet, 2.125rem ); }
		.ptl-intro-body { font-size: var( --ptl-ib-tablet, 1rem ); }
		.ptl-step-title { font-size: var( --ptl-st-tablet, 1.1875rem ); }
		.ptl-step-body { font-size: var( --ptl-sb-tablet, 0.9rem ); }
	}
@media (min-width: 768px) {
		.ptl-intro-heading { font-size: var( --ptl-ih-desktop, 2.5rem ); }
		.ptl-intro-body { font-size: var( --ptl-ib-desktop, 1.0625rem ); }
		.ptl-step-title { font-size: var( --ptl-st-desktop, 1.25rem ); }
		.ptl-step-body { font-size: var( --ptl-sb-desktop, 0.9375rem ); }
	}
/* ---------- Icon sizing ---------- */
/* Full Material Symbols setup, incl. font-family: Google's stylesheet only
	   styles the literal .material-symbols-outlined class, and @apply-ing our
	   local copy of that class inlines font-variation-settings alone — without
	   the font-family here every icon renders as its literal ligature text. */
.icon-inline {
  vertical-align: middle;
  line-height: 1;
		font-family: 'Material Symbols Outlined';
		font-weight: normal;
		font-style: normal;
		letter-spacing: normal;
		text-transform: none;
		display: inline-block;
		white-space: nowrap;
		word-wrap: normal;
		direction: ltr;
		font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
		font-feature-settings: 'liga';
		-webkit-font-smoothing: antialiased;
}
.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;
}
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.bottom-14 {
  bottom: 3.5rem;
}
.bottom-8 {
  bottom: 2rem;
}
.left-0 {
  left: 0px;
}
.left-4 {
  left: 1rem;
}
.right-0 {
  right: 0px;
}
.right-14 {
  right: 3.5rem;
}
.right-4 {
  right: 1rem;
}
.right-8 {
  right: 2rem;
}
.top-0 {
  top: 0px;
}
.top-4 {
  top: 1rem;
}
.z-10 {
  z-index: 10;
}
.z-\[100\] {
  z-index: 100;
}
.z-\[110\] {
  z-index: 110;
}
.z-\[120\] {
  z-index: 120;
}
.z-\[1\] {
  z-index: 1;
}
.col-span-1 {
  grid-column: span 1 / span 1;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-span-3 {
  grid-column: span 3 / span 3;
}
.col-span-4 {
  grid-column: span 4 / span 4;
}
.m-0 {
  margin: 0px;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.-mt-12 {
  margin-top: -3rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.mr-1\.5 {
  margin-right: 0.375rem;
}
.mr-auto {
  margin-right: auto;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-14 {
  margin-top: 3.5rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-9 {
  margin-top: 2.25rem;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-\[1300\/731\] {
  aspect-ratio: 1300/731;
}
.aspect-\[1354\/954\] {
  aspect-ratio: 1354/954;
}
.aspect-\[3\/4\] {
  aspect-ratio: 3/4;
}
.aspect-\[586\/574\] {
  aspect-ratio: 586/574;
}
.h-20 {
  height: 5rem;
}
.h-32 {
  height: 8rem;
}
.h-4 {
  height: 1rem;
}
.h-40 {
  height: 10rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[1\.4em\] {
  height: 1.4em;
}
.h-\[146px\] {
  height: 146px;
}
.h-full {
  height: 100%;
}
.min-h-\[320px\] {
  min-height: 320px;
}
.min-h-\[400px\] {
  min-height: 400px;
}
.min-h-\[480px\] {
  min-height: 480px;
}
.w-4 {
  width: 1rem;
}
.w-4\/5 {
  width: 80%;
}
.w-5 {
  width: 1.25rem;
}
.w-6 {
  width: 1.5rem;
}
.w-\[85\%\] {
  width: 85%;
}
.w-\[85vw\] {
  width: 85vw;
}
.w-\[calc\(50\%-0\.75rem\)\] {
  width: calc(50% - 0.75rem);
}
.w-auto {
  width: auto;
}
.w-full {
  width: 100%;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-container {
  max-width: 1400px;
}
.max-w-none {
  max-width: none;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.-translate-x-full {
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-full {
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer {
  cursor: pointer;
}
.resize-y {
  resize: vertical;
}
.resize {
  resize: both;
}
.columns-2 {
  -moz-columns: 2;
       columns: 2;
}
.columns-3 {
  -moz-columns: 3;
       columns: 3;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-stretch {
  align-items: stretch;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-7 {
  gap: 1.75rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-\[0\.7rem\] {
  gap: 0.7rem;
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.self-start {
  align-self: flex-start;
}
.self-stretch {
  align-self: stretch;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-clip {
  overflow-x: clip;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 10px;
}
.rounded-\[13px\] {
  border-radius: 13px;
}
.rounded-\[9px\] {
  border-radius: 9px;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 15px;
}
.rounded-pill {
  border-radius: 100px;
}
.rounded-xl {
  border-radius: 20px;
}
.rounded-b-none {
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}
.rounded-t-none {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}
.rounded-t-xl {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-accent {
  --tw-border-opacity: 1;
  border-color: rgb(132 149 146 / var(--tw-border-opacity, 1));
}
.border-accent-deep {
  --tw-border-opacity: 1;
  border-color: rgb(97 106 104 / var(--tw-border-opacity, 1));
}
.border-accent-deep\/10 {
  border-color: rgb(97 106 104 / 0.1);
}
.border-accent-deep\/20 {
  border-color: rgb(97 106 104 / 0.2);
}
.border-accent-deep\/30 {
  border-color: rgb(97 106 104 / 0.3);
}
.border-accent-deep\/40 {
  border-color: rgb(97 106 104 / 0.4);
}
.border-accent-deep\/5 {
  border-color: rgb(97 106 104 / 0.05);
}
.border-accent-deep\/50 {
  border-color: rgb(97 106 104 / 0.5);
}
.border-accent-deep\/60 {
  border-color: rgb(97 106 104 / 0.6);
}
.border-accent-deep\/70 {
  border-color: rgb(97 106 104 / 0.7);
}
.border-accent-deep\/80 {
  border-color: rgb(97 106 104 / 0.8);
}
.border-accent-deep\/90 {
  border-color: rgb(97 106 104 / 0.9);
}
.border-accent\/10 {
  border-color: rgb(132 149 146 / 0.1);
}
.border-accent\/20 {
  border-color: rgb(132 149 146 / 0.2);
}
.border-accent\/30 {
  border-color: rgb(132 149 146 / 0.3);
}
.border-accent\/40 {
  border-color: rgb(132 149 146 / 0.4);
}
.border-accent\/5 {
  border-color: rgb(132 149 146 / 0.05);
}
.border-accent\/50 {
  border-color: rgb(132 149 146 / 0.5);
}
.border-accent\/60 {
  border-color: rgb(132 149 146 / 0.6);
}
.border-accent\/70 {
  border-color: rgb(132 149 146 / 0.7);
}
.border-accent\/80 {
  border-color: rgb(132 149 146 / 0.8);
}
.border-accent\/90 {
  border-color: rgb(132 149 146 / 0.9);
}
.border-brand-grey {
  --tw-border-opacity: 1;
  border-color: rgb(98 96 98 / var(--tw-border-opacity, 1));
}
.border-brand-grey-dark {
  --tw-border-opacity: 1;
  border-color: rgb(63 62 63 / var(--tw-border-opacity, 1));
}
.border-brand-grey-dark\/10 {
  border-color: rgb(63 62 63 / 0.1);
}
.border-brand-grey-dark\/20 {
  border-color: rgb(63 62 63 / 0.2);
}
.border-brand-grey-dark\/30 {
  border-color: rgb(63 62 63 / 0.3);
}
.border-brand-grey-dark\/40 {
  border-color: rgb(63 62 63 / 0.4);
}
.border-brand-grey-dark\/5 {
  border-color: rgb(63 62 63 / 0.05);
}
.border-brand-grey-dark\/50 {
  border-color: rgb(63 62 63 / 0.5);
}
.border-brand-grey-dark\/60 {
  border-color: rgb(63 62 63 / 0.6);
}
.border-brand-grey-dark\/70 {
  border-color: rgb(63 62 63 / 0.7);
}
.border-brand-grey-dark\/80 {
  border-color: rgb(63 62 63 / 0.8);
}
.border-brand-grey-dark\/90 {
  border-color: rgb(63 62 63 / 0.9);
}
.border-brand-grey\/10 {
  border-color: rgb(98 96 98 / 0.1);
}
.border-brand-grey\/20 {
  border-color: rgb(98 96 98 / 0.2);
}
.border-brand-grey\/30 {
  border-color: rgb(98 96 98 / 0.3);
}
.border-brand-grey\/40 {
  border-color: rgb(98 96 98 / 0.4);
}
.border-brand-grey\/5 {
  border-color: rgb(98 96 98 / 0.05);
}
.border-brand-grey\/50 {
  border-color: rgb(98 96 98 / 0.5);
}
.border-brand-grey\/60 {
  border-color: rgb(98 96 98 / 0.6);
}
.border-brand-grey\/70 {
  border-color: rgb(98 96 98 / 0.7);
}
.border-brand-grey\/80 {
  border-color: rgb(98 96 98 / 0.8);
}
.border-brand-grey\/90 {
  border-color: rgb(98 96 98 / 0.9);
}
.border-heading {
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}
.border-heading\/10 {
  border-color: rgb(0 0 0 / 0.1);
}
.border-heading\/20 {
  border-color: rgb(0 0 0 / 0.2);
}
.border-heading\/30 {
  border-color: rgb(0 0 0 / 0.3);
}
.border-heading\/40 {
  border-color: rgb(0 0 0 / 0.4);
}
.border-heading\/5 {
  border-color: rgb(0 0 0 / 0.05);
}
.border-heading\/50 {
  border-color: rgb(0 0 0 / 0.5);
}
.border-heading\/60 {
  border-color: rgb(0 0 0 / 0.6);
}
.border-heading\/70 {
  border-color: rgb(0 0 0 / 0.7);
}
.border-heading\/80 {
  border-color: rgb(0 0 0 / 0.8);
}
.border-heading\/90 {
  border-color: rgb(0 0 0 / 0.9);
}
.border-ink {
  --tw-border-opacity: 1;
  border-color: rgb(79 79 79 / var(--tw-border-opacity, 1));
}
.border-ink\/10 {
  border-color: rgb(79 79 79 / 0.1);
}
.border-ink\/20 {
  border-color: rgb(79 79 79 / 0.2);
}
.border-ink\/30 {
  border-color: rgb(79 79 79 / 0.3);
}
.border-ink\/40 {
  border-color: rgb(79 79 79 / 0.4);
}
.border-ink\/5 {
  border-color: rgb(79 79 79 / 0.05);
}
.border-ink\/50 {
  border-color: rgb(79 79 79 / 0.5);
}
.border-ink\/60 {
  border-color: rgb(79 79 79 / 0.6);
}
.border-ink\/70 {
  border-color: rgb(79 79 79 / 0.7);
}
.border-ink\/80 {
  border-color: rgb(79 79 79 / 0.8);
}
.border-ink\/90 {
  border-color: rgb(79 79 79 / 0.9);
}
.border-line {
  --tw-border-opacity: 1;
  border-color: rgb(221 221 221 / var(--tw-border-opacity, 1));
}
.border-line-strong {
  --tw-border-opacity: 1;
  border-color: rgb(195 195 195 / var(--tw-border-opacity, 1));
}
.border-line-strong\/10 {
  border-color: rgb(195 195 195 / 0.1);
}
.border-line-strong\/20 {
  border-color: rgb(195 195 195 / 0.2);
}
.border-line-strong\/30 {
  border-color: rgb(195 195 195 / 0.3);
}
.border-line-strong\/40 {
  border-color: rgb(195 195 195 / 0.4);
}
.border-line-strong\/5 {
  border-color: rgb(195 195 195 / 0.05);
}
.border-line-strong\/50 {
  border-color: rgb(195 195 195 / 0.5);
}
.border-line-strong\/60 {
  border-color: rgb(195 195 195 / 0.6);
}
.border-line-strong\/70 {
  border-color: rgb(195 195 195 / 0.7);
}
.border-line-strong\/80 {
  border-color: rgb(195 195 195 / 0.8);
}
.border-line-strong\/90 {
  border-color: rgb(195 195 195 / 0.9);
}
.border-line\/10 {
  border-color: rgb(221 221 221 / 0.1);
}
.border-line\/20 {
  border-color: rgb(221 221 221 / 0.2);
}
.border-line\/30 {
  border-color: rgb(221 221 221 / 0.3);
}
.border-line\/40 {
  border-color: rgb(221 221 221 / 0.4);
}
.border-line\/5 {
  border-color: rgb(221 221 221 / 0.05);
}
.border-line\/50 {
  border-color: rgb(221 221 221 / 0.5);
}
.border-line\/60 {
  border-color: rgb(221 221 221 / 0.6);
}
.border-line\/70 {
  border-color: rgb(221 221 221 / 0.7);
}
.border-line\/80 {
  border-color: rgb(221 221 221 / 0.8);
}
.border-line\/90 {
  border-color: rgb(221 221 221 / 0.9);
}
.border-on-dark {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-on-dark\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.border-on-dark\/20 {
  border-color: rgb(255 255 255 / 0.2);
}
.border-on-dark\/30 {
  border-color: rgb(255 255 255 / 0.3);
}
.border-on-dark\/40 {
  border-color: rgb(255 255 255 / 0.4);
}
.border-on-dark\/5 {
  border-color: rgb(255 255 255 / 0.05);
}
.border-on-dark\/50 {
  border-color: rgb(255 255 255 / 0.5);
}
.border-on-dark\/60 {
  border-color: rgb(255 255 255 / 0.6);
}
.border-on-dark\/70 {
  border-color: rgb(255 255 255 / 0.7);
}
.border-on-dark\/80 {
  border-color: rgb(255 255 255 / 0.8);
}
.border-on-dark\/90 {
  border-color: rgb(255 255 255 / 0.9);
}
.border-placeholder {
  --tw-border-opacity: 1;
  border-color: rgb(229 229 229 / var(--tw-border-opacity, 1));
}
.border-placeholder\/10 {
  border-color: rgb(229 229 229 / 0.1);
}
.border-placeholder\/20 {
  border-color: rgb(229 229 229 / 0.2);
}
.border-placeholder\/30 {
  border-color: rgb(229 229 229 / 0.3);
}
.border-placeholder\/40 {
  border-color: rgb(229 229 229 / 0.4);
}
.border-placeholder\/5 {
  border-color: rgb(229 229 229 / 0.05);
}
.border-placeholder\/50 {
  border-color: rgb(229 229 229 / 0.5);
}
.border-placeholder\/60 {
  border-color: rgb(229 229 229 / 0.6);
}
.border-placeholder\/70 {
  border-color: rgb(229 229 229 / 0.7);
}
.border-placeholder\/80 {
  border-color: rgb(229 229 229 / 0.8);
}
.border-placeholder\/90 {
  border-color: rgb(229 229 229 / 0.9);
}
.border-surface {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-surface-alt {
  --tw-border-opacity: 1;
  border-color: rgb(248 248 248 / var(--tw-border-opacity, 1));
}
.border-surface-alt\/10 {
  border-color: rgb(248 248 248 / 0.1);
}
.border-surface-alt\/20 {
  border-color: rgb(248 248 248 / 0.2);
}
.border-surface-alt\/30 {
  border-color: rgb(248 248 248 / 0.3);
}
.border-surface-alt\/40 {
  border-color: rgb(248 248 248 / 0.4);
}
.border-surface-alt\/5 {
  border-color: rgb(248 248 248 / 0.05);
}
.border-surface-alt\/50 {
  border-color: rgb(248 248 248 / 0.5);
}
.border-surface-alt\/60 {
  border-color: rgb(248 248 248 / 0.6);
}
.border-surface-alt\/70 {
  border-color: rgb(248 248 248 / 0.7);
}
.border-surface-alt\/80 {
  border-color: rgb(248 248 248 / 0.8);
}
.border-surface-alt\/90 {
  border-color: rgb(248 248 248 / 0.9);
}
.border-surface-dark {
  --tw-border-opacity: 1;
  border-color: rgb(43 43 43 / var(--tw-border-opacity, 1));
}
.border-surface-dark\/10 {
  border-color: rgb(43 43 43 / 0.1);
}
.border-surface-dark\/20 {
  border-color: rgb(43 43 43 / 0.2);
}
.border-surface-dark\/30 {
  border-color: rgb(43 43 43 / 0.3);
}
.border-surface-dark\/40 {
  border-color: rgb(43 43 43 / 0.4);
}
.border-surface-dark\/5 {
  border-color: rgb(43 43 43 / 0.05);
}
.border-surface-dark\/50 {
  border-color: rgb(43 43 43 / 0.5);
}
.border-surface-dark\/60 {
  border-color: rgb(43 43 43 / 0.6);
}
.border-surface-dark\/70 {
  border-color: rgb(43 43 43 / 0.7);
}
.border-surface-dark\/80 {
  border-color: rgb(43 43 43 / 0.8);
}
.border-surface-dark\/90 {
  border-color: rgb(43 43 43 / 0.9);
}
.border-surface\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.border-surface\/20 {
  border-color: rgb(255 255 255 / 0.2);
}
.border-surface\/30 {
  border-color: rgb(255 255 255 / 0.3);
}
.border-surface\/40 {
  border-color: rgb(255 255 255 / 0.4);
}
.border-surface\/5 {
  border-color: rgb(255 255 255 / 0.05);
}
.border-surface\/50 {
  border-color: rgb(255 255 255 / 0.5);
}
.border-surface\/60 {
  border-color: rgb(255 255 255 / 0.6);
}
.border-surface\/70 {
  border-color: rgb(255 255 255 / 0.7);
}
.border-surface\/80 {
  border-color: rgb(255 255 255 / 0.8);
}
.border-surface\/90 {
  border-color: rgb(255 255 255 / 0.9);
}
.bg-accent {
  --tw-bg-opacity: 1;
  background-color: rgb(132 149 146 / var(--tw-bg-opacity, 1));
}
.bg-accent-deep {
  --tw-bg-opacity: 1;
  background-color: rgb(97 106 104 / var(--tw-bg-opacity, 1));
}
.bg-accent-deep\/10 {
  background-color: rgb(97 106 104 / 0.1);
}
.bg-accent-deep\/20 {
  background-color: rgb(97 106 104 / 0.2);
}
.bg-accent-deep\/30 {
  background-color: rgb(97 106 104 / 0.3);
}
.bg-accent-deep\/40 {
  background-color: rgb(97 106 104 / 0.4);
}
.bg-accent-deep\/5 {
  background-color: rgb(97 106 104 / 0.05);
}
.bg-accent-deep\/50 {
  background-color: rgb(97 106 104 / 0.5);
}
.bg-accent-deep\/60 {
  background-color: rgb(97 106 104 / 0.6);
}
.bg-accent-deep\/70 {
  background-color: rgb(97 106 104 / 0.7);
}
.bg-accent-deep\/80 {
  background-color: rgb(97 106 104 / 0.8);
}
.bg-accent-deep\/90 {
  background-color: rgb(97 106 104 / 0.9);
}
.bg-accent\/10 {
  background-color: rgb(132 149 146 / 0.1);
}
.bg-accent\/20 {
  background-color: rgb(132 149 146 / 0.2);
}
.bg-accent\/30 {
  background-color: rgb(132 149 146 / 0.3);
}
.bg-accent\/40 {
  background-color: rgb(132 149 146 / 0.4);
}
.bg-accent\/5 {
  background-color: rgb(132 149 146 / 0.05);
}
.bg-accent\/50 {
  background-color: rgb(132 149 146 / 0.5);
}
.bg-accent\/60 {
  background-color: rgb(132 149 146 / 0.6);
}
.bg-accent\/70 {
  background-color: rgb(132 149 146 / 0.7);
}
.bg-accent\/80 {
  background-color: rgb(132 149 146 / 0.8);
}
.bg-accent\/90 {
  background-color: rgb(132 149 146 / 0.9);
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-brand-grey {
  --tw-bg-opacity: 1;
  background-color: rgb(98 96 98 / var(--tw-bg-opacity, 1));
}
.bg-brand-grey-dark {
  --tw-bg-opacity: 1;
  background-color: rgb(63 62 63 / var(--tw-bg-opacity, 1));
}
.bg-brand-grey-dark\/10 {
  background-color: rgb(63 62 63 / 0.1);
}
.bg-brand-grey-dark\/20 {
  background-color: rgb(63 62 63 / 0.2);
}
.bg-brand-grey-dark\/30 {
  background-color: rgb(63 62 63 / 0.3);
}
.bg-brand-grey-dark\/40 {
  background-color: rgb(63 62 63 / 0.4);
}
.bg-brand-grey-dark\/5 {
  background-color: rgb(63 62 63 / 0.05);
}
.bg-brand-grey-dark\/50 {
  background-color: rgb(63 62 63 / 0.5);
}
.bg-brand-grey-dark\/60 {
  background-color: rgb(63 62 63 / 0.6);
}
.bg-brand-grey-dark\/70 {
  background-color: rgb(63 62 63 / 0.7);
}
.bg-brand-grey-dark\/80 {
  background-color: rgb(63 62 63 / 0.8);
}
.bg-brand-grey-dark\/90 {
  background-color: rgb(63 62 63 / 0.9);
}
.bg-brand-grey\/10 {
  background-color: rgb(98 96 98 / 0.1);
}
.bg-brand-grey\/20 {
  background-color: rgb(98 96 98 / 0.2);
}
.bg-brand-grey\/30 {
  background-color: rgb(98 96 98 / 0.3);
}
.bg-brand-grey\/40 {
  background-color: rgb(98 96 98 / 0.4);
}
.bg-brand-grey\/5 {
  background-color: rgb(98 96 98 / 0.05);
}
.bg-brand-grey\/50 {
  background-color: rgb(98 96 98 / 0.5);
}
.bg-brand-grey\/60 {
  background-color: rgb(98 96 98 / 0.6);
}
.bg-brand-grey\/70 {
  background-color: rgb(98 96 98 / 0.7);
}
.bg-brand-grey\/80 {
  background-color: rgb(98 96 98 / 0.8);
}
.bg-brand-grey\/90 {
  background-color: rgb(98 96 98 / 0.9);
}
.bg-heading {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-heading\/10 {
  background-color: rgb(0 0 0 / 0.1);
}
.bg-heading\/20 {
  background-color: rgb(0 0 0 / 0.2);
}
.bg-heading\/30 {
  background-color: rgb(0 0 0 / 0.3);
}
.bg-heading\/40 {
  background-color: rgb(0 0 0 / 0.4);
}
.bg-heading\/5 {
  background-color: rgb(0 0 0 / 0.05);
}
.bg-heading\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-heading\/60 {
  background-color: rgb(0 0 0 / 0.6);
}
.bg-heading\/70 {
  background-color: rgb(0 0 0 / 0.7);
}
.bg-heading\/80 {
  background-color: rgb(0 0 0 / 0.8);
}
.bg-heading\/90 {
  background-color: rgb(0 0 0 / 0.9);
}
.bg-ink {
  --tw-bg-opacity: 1;
  background-color: rgb(79 79 79 / var(--tw-bg-opacity, 1));
}
.bg-ink\/10 {
  background-color: rgb(79 79 79 / 0.1);
}
.bg-ink\/20 {
  background-color: rgb(79 79 79 / 0.2);
}
.bg-ink\/30 {
  background-color: rgb(79 79 79 / 0.3);
}
.bg-ink\/40 {
  background-color: rgb(79 79 79 / 0.4);
}
.bg-ink\/5 {
  background-color: rgb(79 79 79 / 0.05);
}
.bg-ink\/50 {
  background-color: rgb(79 79 79 / 0.5);
}
.bg-ink\/60 {
  background-color: rgb(79 79 79 / 0.6);
}
.bg-ink\/70 {
  background-color: rgb(79 79 79 / 0.7);
}
.bg-ink\/80 {
  background-color: rgb(79 79 79 / 0.8);
}
.bg-ink\/90 {
  background-color: rgb(79 79 79 / 0.9);
}
.bg-line {
  --tw-bg-opacity: 1;
  background-color: rgb(221 221 221 / var(--tw-bg-opacity, 1));
}
.bg-line-strong {
  --tw-bg-opacity: 1;
  background-color: rgb(195 195 195 / var(--tw-bg-opacity, 1));
}
.bg-line-strong\/10 {
  background-color: rgb(195 195 195 / 0.1);
}
.bg-line-strong\/20 {
  background-color: rgb(195 195 195 / 0.2);
}
.bg-line-strong\/30 {
  background-color: rgb(195 195 195 / 0.3);
}
.bg-line-strong\/40 {
  background-color: rgb(195 195 195 / 0.4);
}
.bg-line-strong\/5 {
  background-color: rgb(195 195 195 / 0.05);
}
.bg-line-strong\/50 {
  background-color: rgb(195 195 195 / 0.5);
}
.bg-line-strong\/60 {
  background-color: rgb(195 195 195 / 0.6);
}
.bg-line-strong\/70 {
  background-color: rgb(195 195 195 / 0.7);
}
.bg-line-strong\/80 {
  background-color: rgb(195 195 195 / 0.8);
}
.bg-line-strong\/90 {
  background-color: rgb(195 195 195 / 0.9);
}
.bg-line\/10 {
  background-color: rgb(221 221 221 / 0.1);
}
.bg-line\/20 {
  background-color: rgb(221 221 221 / 0.2);
}
.bg-line\/30 {
  background-color: rgb(221 221 221 / 0.3);
}
.bg-line\/40 {
  background-color: rgb(221 221 221 / 0.4);
}
.bg-line\/5 {
  background-color: rgb(221 221 221 / 0.05);
}
.bg-line\/50 {
  background-color: rgb(221 221 221 / 0.5);
}
.bg-line\/60 {
  background-color: rgb(221 221 221 / 0.6);
}
.bg-line\/70 {
  background-color: rgb(221 221 221 / 0.7);
}
.bg-line\/80 {
  background-color: rgb(221 221 221 / 0.8);
}
.bg-line\/90 {
  background-color: rgb(221 221 221 / 0.9);
}
.bg-on-dark {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-on-dark\/10 {
  background-color: rgb(255 255 255 / 0.1);
}
.bg-on-dark\/20 {
  background-color: rgb(255 255 255 / 0.2);
}
.bg-on-dark\/30 {
  background-color: rgb(255 255 255 / 0.3);
}
.bg-on-dark\/40 {
  background-color: rgb(255 255 255 / 0.4);
}
.bg-on-dark\/5 {
  background-color: rgb(255 255 255 / 0.05);
}
.bg-on-dark\/50 {
  background-color: rgb(255 255 255 / 0.5);
}
.bg-on-dark\/60 {
  background-color: rgb(255 255 255 / 0.6);
}
.bg-on-dark\/70 {
  background-color: rgb(255 255 255 / 0.7);
}
.bg-on-dark\/80 {
  background-color: rgb(255 255 255 / 0.8);
}
.bg-on-dark\/90 {
  background-color: rgb(255 255 255 / 0.9);
}
.bg-placeholder {
  --tw-bg-opacity: 1;
  background-color: rgb(229 229 229 / var(--tw-bg-opacity, 1));
}
.bg-placeholder\/10 {
  background-color: rgb(229 229 229 / 0.1);
}
.bg-placeholder\/20 {
  background-color: rgb(229 229 229 / 0.2);
}
.bg-placeholder\/30 {
  background-color: rgb(229 229 229 / 0.3);
}
.bg-placeholder\/40 {
  background-color: rgb(229 229 229 / 0.4);
}
.bg-placeholder\/5 {
  background-color: rgb(229 229 229 / 0.05);
}
.bg-placeholder\/50 {
  background-color: rgb(229 229 229 / 0.5);
}
.bg-placeholder\/60 {
  background-color: rgb(229 229 229 / 0.6);
}
.bg-placeholder\/70 {
  background-color: rgb(229 229 229 / 0.7);
}
.bg-placeholder\/80 {
  background-color: rgb(229 229 229 / 0.8);
}
.bg-placeholder\/90 {
  background-color: rgb(229 229 229 / 0.9);
}
.bg-surface {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-surface-alt {
  --tw-bg-opacity: 1;
  background-color: rgb(248 248 248 / var(--tw-bg-opacity, 1));
}
.bg-surface-alt\/10 {
  background-color: rgb(248 248 248 / 0.1);
}
.bg-surface-alt\/20 {
  background-color: rgb(248 248 248 / 0.2);
}
.bg-surface-alt\/30 {
  background-color: rgb(248 248 248 / 0.3);
}
.bg-surface-alt\/40 {
  background-color: rgb(248 248 248 / 0.4);
}
.bg-surface-alt\/5 {
  background-color: rgb(248 248 248 / 0.05);
}
.bg-surface-alt\/50 {
  background-color: rgb(248 248 248 / 0.5);
}
.bg-surface-alt\/60 {
  background-color: rgb(248 248 248 / 0.6);
}
.bg-surface-alt\/70 {
  background-color: rgb(248 248 248 / 0.7);
}
.bg-surface-alt\/80 {
  background-color: rgb(248 248 248 / 0.8);
}
.bg-surface-alt\/90 {
  background-color: rgb(248 248 248 / 0.9);
}
.bg-surface-dark {
  --tw-bg-opacity: 1;
  background-color: rgb(43 43 43 / var(--tw-bg-opacity, 1));
}
.bg-surface-dark\/10 {
  background-color: rgb(43 43 43 / 0.1);
}
.bg-surface-dark\/20 {
  background-color: rgb(43 43 43 / 0.2);
}
.bg-surface-dark\/30 {
  background-color: rgb(43 43 43 / 0.3);
}
.bg-surface-dark\/40 {
  background-color: rgb(43 43 43 / 0.4);
}
.bg-surface-dark\/5 {
  background-color: rgb(43 43 43 / 0.05);
}
.bg-surface-dark\/50 {
  background-color: rgb(43 43 43 / 0.5);
}
.bg-surface-dark\/60 {
  background-color: rgb(43 43 43 / 0.6);
}
.bg-surface-dark\/70 {
  background-color: rgb(43 43 43 / 0.7);
}
.bg-surface-dark\/80 {
  background-color: rgb(43 43 43 / 0.8);
}
.bg-surface-dark\/90 {
  background-color: rgb(43 43 43 / 0.9);
}
.bg-surface\/10 {
  background-color: rgb(255 255 255 / 0.1);
}
.bg-surface\/20 {
  background-color: rgb(255 255 255 / 0.2);
}
.bg-surface\/30 {
  background-color: rgb(255 255 255 / 0.3);
}
.bg-surface\/40 {
  background-color: rgb(255 255 255 / 0.4);
}
.bg-surface\/5 {
  background-color: rgb(255 255 255 / 0.05);
}
.bg-surface\/50 {
  background-color: rgb(255 255 255 / 0.5);
}
.bg-surface\/60 {
  background-color: rgb(255 255 255 / 0.6);
}
.bg-surface\/70 {
  background-color: rgb(255 255 255 / 0.7);
}
.bg-surface\/80 {
  background-color: rgb(255 255 255 / 0.8);
}
.bg-surface\/90 {
  background-color: rgb(255 255 255 / 0.9);
}
.bg-transparent {
  background-color: transparent;
}
.bg-gradient-to-tr {
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
}
.from-accent {
  --tw-gradient-from: #849592 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(132 149 146 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent-deep {
  --tw-gradient-from: #616a68 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(97 106 104 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent-deep\/10 {
  --tw-gradient-from: rgb(97 106 104 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(97 106 104 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent-deep\/20 {
  --tw-gradient-from: rgb(97 106 104 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(97 106 104 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent-deep\/30 {
  --tw-gradient-from: rgb(97 106 104 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(97 106 104 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent-deep\/40 {
  --tw-gradient-from: rgb(97 106 104 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(97 106 104 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent-deep\/5 {
  --tw-gradient-from: rgb(97 106 104 / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(97 106 104 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent-deep\/50 {
  --tw-gradient-from: rgb(97 106 104 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(97 106 104 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent-deep\/60 {
  --tw-gradient-from: rgb(97 106 104 / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(97 106 104 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent-deep\/70 {
  --tw-gradient-from: rgb(97 106 104 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(97 106 104 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent-deep\/80 {
  --tw-gradient-from: rgb(97 106 104 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(97 106 104 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent-deep\/90 {
  --tw-gradient-from: rgb(97 106 104 / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(97 106 104 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent\/10 {
  --tw-gradient-from: rgb(132 149 146 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(132 149 146 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent\/20 {
  --tw-gradient-from: rgb(132 149 146 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(132 149 146 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent\/30 {
  --tw-gradient-from: rgb(132 149 146 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(132 149 146 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent\/40 {
  --tw-gradient-from: rgb(132 149 146 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(132 149 146 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent\/5 {
  --tw-gradient-from: rgb(132 149 146 / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(132 149 146 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent\/50 {
  --tw-gradient-from: rgb(132 149 146 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(132 149 146 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent\/60 {
  --tw-gradient-from: rgb(132 149 146 / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(132 149 146 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent\/70 {
  --tw-gradient-from: rgb(132 149 146 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(132 149 146 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent\/80 {
  --tw-gradient-from: rgb(132 149 146 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(132 149 146 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-accent\/90 {
  --tw-gradient-from: rgb(132 149 146 / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(132 149 146 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black\/30 {
  --tw-gradient-from: rgb(0 0 0 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-grey {
  --tw-gradient-from: #626062 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(98 96 98 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-grey-dark {
  --tw-gradient-from: #3f3e3f var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(63 62 63 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-grey-dark\/10 {
  --tw-gradient-from: rgb(63 62 63 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(63 62 63 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-grey-dark\/20 {
  --tw-gradient-from: rgb(63 62 63 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(63 62 63 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-grey-dark\/30 {
  --tw-gradient-from: rgb(63 62 63 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(63 62 63 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-grey-dark\/40 {
  --tw-gradient-from: rgb(63 62 63 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(63 62 63 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-grey-dark\/5 {
  --tw-gradient-from: rgb(63 62 63 / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(63 62 63 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-grey-dark\/50 {
  --tw-gradient-from: rgb(63 62 63 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(63 62 63 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-grey-dark\/60 {
  --tw-gradient-from: rgb(63 62 63 / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(63 62 63 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-grey-dark\/70 {
  --tw-gradient-from: rgb(63 62 63 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(63 62 63 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-grey-dark\/80 {
  --tw-gradient-from: rgb(63 62 63 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(63 62 63 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-grey-dark\/90 {
  --tw-gradient-from: rgb(63 62 63 / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(63 62 63 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-grey\/10 {
  --tw-gradient-from: rgb(98 96 98 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(98 96 98 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-grey\/20 {
  --tw-gradient-from: rgb(98 96 98 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(98 96 98 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-grey\/30 {
  --tw-gradient-from: rgb(98 96 98 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(98 96 98 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-grey\/40 {
  --tw-gradient-from: rgb(98 96 98 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(98 96 98 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-grey\/5 {
  --tw-gradient-from: rgb(98 96 98 / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(98 96 98 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-grey\/50 {
  --tw-gradient-from: rgb(98 96 98 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(98 96 98 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-grey\/60 {
  --tw-gradient-from: rgb(98 96 98 / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(98 96 98 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-grey\/70 {
  --tw-gradient-from: rgb(98 96 98 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(98 96 98 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-grey\/80 {
  --tw-gradient-from: rgb(98 96 98 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(98 96 98 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-grey\/90 {
  --tw-gradient-from: rgb(98 96 98 / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(98 96 98 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-heading {
  --tw-gradient-from: #000000 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-heading\/10 {
  --tw-gradient-from: rgb(0 0 0 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-heading\/20 {
  --tw-gradient-from: rgb(0 0 0 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-heading\/30 {
  --tw-gradient-from: rgb(0 0 0 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-heading\/40 {
  --tw-gradient-from: rgb(0 0 0 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-heading\/5 {
  --tw-gradient-from: rgb(0 0 0 / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-heading\/50 {
  --tw-gradient-from: rgb(0 0 0 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-heading\/60 {
  --tw-gradient-from: rgb(0 0 0 / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-heading\/70 {
  --tw-gradient-from: rgb(0 0 0 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-heading\/80 {
  --tw-gradient-from: rgb(0 0 0 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-heading\/90 {
  --tw-gradient-from: rgb(0 0 0 / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-ink {
  --tw-gradient-from: #4f4f4f var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(79 79 79 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-ink\/10 {
  --tw-gradient-from: rgb(79 79 79 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(79 79 79 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-ink\/20 {
  --tw-gradient-from: rgb(79 79 79 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(79 79 79 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-ink\/30 {
  --tw-gradient-from: rgb(79 79 79 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(79 79 79 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-ink\/40 {
  --tw-gradient-from: rgb(79 79 79 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(79 79 79 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-ink\/5 {
  --tw-gradient-from: rgb(79 79 79 / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(79 79 79 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-ink\/50 {
  --tw-gradient-from: rgb(79 79 79 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(79 79 79 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-ink\/60 {
  --tw-gradient-from: rgb(79 79 79 / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(79 79 79 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-ink\/70 {
  --tw-gradient-from: rgb(79 79 79 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(79 79 79 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-ink\/80 {
  --tw-gradient-from: rgb(79 79 79 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(79 79 79 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-ink\/90 {
  --tw-gradient-from: rgb(79 79 79 / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(79 79 79 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-line {
  --tw-gradient-from: #dddddd var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(221 221 221 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-line-strong {
  --tw-gradient-from: #c3c3c3 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(195 195 195 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-line-strong\/10 {
  --tw-gradient-from: rgb(195 195 195 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(195 195 195 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-line-strong\/20 {
  --tw-gradient-from: rgb(195 195 195 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(195 195 195 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-line-strong\/30 {
  --tw-gradient-from: rgb(195 195 195 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(195 195 195 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-line-strong\/40 {
  --tw-gradient-from: rgb(195 195 195 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(195 195 195 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-line-strong\/5 {
  --tw-gradient-from: rgb(195 195 195 / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(195 195 195 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-line-strong\/50 {
  --tw-gradient-from: rgb(195 195 195 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(195 195 195 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-line-strong\/60 {
  --tw-gradient-from: rgb(195 195 195 / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(195 195 195 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-line-strong\/70 {
  --tw-gradient-from: rgb(195 195 195 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(195 195 195 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-line-strong\/80 {
  --tw-gradient-from: rgb(195 195 195 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(195 195 195 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-line-strong\/90 {
  --tw-gradient-from: rgb(195 195 195 / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(195 195 195 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-line\/10 {
  --tw-gradient-from: rgb(221 221 221 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(221 221 221 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-line\/20 {
  --tw-gradient-from: rgb(221 221 221 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(221 221 221 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-line\/30 {
  --tw-gradient-from: rgb(221 221 221 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(221 221 221 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-line\/40 {
  --tw-gradient-from: rgb(221 221 221 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(221 221 221 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-line\/5 {
  --tw-gradient-from: rgb(221 221 221 / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(221 221 221 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-line\/50 {
  --tw-gradient-from: rgb(221 221 221 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(221 221 221 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-line\/60 {
  --tw-gradient-from: rgb(221 221 221 / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(221 221 221 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-line\/70 {
  --tw-gradient-from: rgb(221 221 221 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(221 221 221 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-line\/80 {
  --tw-gradient-from: rgb(221 221 221 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(221 221 221 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-line\/90 {
  --tw-gradient-from: rgb(221 221 221 / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(221 221 221 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-on-dark {
  --tw-gradient-from: #ffffff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-on-dark\/10 {
  --tw-gradient-from: rgb(255 255 255 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-on-dark\/20 {
  --tw-gradient-from: rgb(255 255 255 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-on-dark\/30 {
  --tw-gradient-from: rgb(255 255 255 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-on-dark\/40 {
  --tw-gradient-from: rgb(255 255 255 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-on-dark\/5 {
  --tw-gradient-from: rgb(255 255 255 / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-on-dark\/50 {
  --tw-gradient-from: rgb(255 255 255 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-on-dark\/60 {
  --tw-gradient-from: rgb(255 255 255 / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-on-dark\/70 {
  --tw-gradient-from: rgb(255 255 255 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-on-dark\/80 {
  --tw-gradient-from: rgb(255 255 255 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-on-dark\/90 {
  --tw-gradient-from: rgb(255 255 255 / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-placeholder {
  --tw-gradient-from: #e5e5e5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(229 229 229 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-placeholder\/10 {
  --tw-gradient-from: rgb(229 229 229 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(229 229 229 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-placeholder\/20 {
  --tw-gradient-from: rgb(229 229 229 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(229 229 229 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-placeholder\/30 {
  --tw-gradient-from: rgb(229 229 229 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(229 229 229 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-placeholder\/40 {
  --tw-gradient-from: rgb(229 229 229 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(229 229 229 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-placeholder\/5 {
  --tw-gradient-from: rgb(229 229 229 / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(229 229 229 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-placeholder\/50 {
  --tw-gradient-from: rgb(229 229 229 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(229 229 229 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-placeholder\/60 {
  --tw-gradient-from: rgb(229 229 229 / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(229 229 229 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-placeholder\/70 {
  --tw-gradient-from: rgb(229 229 229 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(229 229 229 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-placeholder\/80 {
  --tw-gradient-from: rgb(229 229 229 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(229 229 229 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-placeholder\/90 {
  --tw-gradient-from: rgb(229 229 229 / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(229 229 229 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface {
  --tw-gradient-from: #ffffff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface-alt {
  --tw-gradient-from: #f8f8f8 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 248 248 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface-alt\/10 {
  --tw-gradient-from: rgb(248 248 248 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 248 248 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface-alt\/20 {
  --tw-gradient-from: rgb(248 248 248 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 248 248 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface-alt\/30 {
  --tw-gradient-from: rgb(248 248 248 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 248 248 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface-alt\/40 {
  --tw-gradient-from: rgb(248 248 248 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 248 248 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface-alt\/5 {
  --tw-gradient-from: rgb(248 248 248 / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 248 248 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface-alt\/50 {
  --tw-gradient-from: rgb(248 248 248 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 248 248 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface-alt\/60 {
  --tw-gradient-from: rgb(248 248 248 / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 248 248 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface-alt\/70 {
  --tw-gradient-from: rgb(248 248 248 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 248 248 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface-alt\/80 {
  --tw-gradient-from: rgb(248 248 248 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 248 248 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface-alt\/90 {
  --tw-gradient-from: rgb(248 248 248 / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 248 248 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface-dark {
  --tw-gradient-from: #2b2b2b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(43 43 43 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface-dark\/10 {
  --tw-gradient-from: rgb(43 43 43 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(43 43 43 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface-dark\/20 {
  --tw-gradient-from: rgb(43 43 43 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(43 43 43 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface-dark\/30 {
  --tw-gradient-from: rgb(43 43 43 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(43 43 43 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface-dark\/40 {
  --tw-gradient-from: rgb(43 43 43 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(43 43 43 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface-dark\/5 {
  --tw-gradient-from: rgb(43 43 43 / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(43 43 43 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface-dark\/50 {
  --tw-gradient-from: rgb(43 43 43 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(43 43 43 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface-dark\/60 {
  --tw-gradient-from: rgb(43 43 43 / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(43 43 43 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface-dark\/70 {
  --tw-gradient-from: rgb(43 43 43 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(43 43 43 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface-dark\/80 {
  --tw-gradient-from: rgb(43 43 43 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(43 43 43 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface-dark\/90 {
  --tw-gradient-from: rgb(43 43 43 / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(43 43 43 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface\/10 {
  --tw-gradient-from: rgb(255 255 255 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface\/20 {
  --tw-gradient-from: rgb(255 255 255 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface\/30 {
  --tw-gradient-from: rgb(255 255 255 / 0.3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface\/40 {
  --tw-gradient-from: rgb(255 255 255 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface\/5 {
  --tw-gradient-from: rgb(255 255 255 / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface\/50 {
  --tw-gradient-from: rgb(255 255 255 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface\/60 {
  --tw-gradient-from: rgb(255 255 255 / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface\/70 {
  --tw-gradient-from: rgb(255 255 255 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface\/80 {
  --tw-gradient-from: rgb(255 255 255 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-surface\/90 {
  --tw-gradient-from: rgb(255 255 255 / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-accent {
  --tw-gradient-to: rgb(132 149 146 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #849592 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent-deep {
  --tw-gradient-to: rgb(97 106 104 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #616a68 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent-deep\/10 {
  --tw-gradient-to: rgb(97 106 104 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(97 106 104 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent-deep\/20 {
  --tw-gradient-to: rgb(97 106 104 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(97 106 104 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent-deep\/30 {
  --tw-gradient-to: rgb(97 106 104 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(97 106 104 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent-deep\/40 {
  --tw-gradient-to: rgb(97 106 104 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(97 106 104 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent-deep\/5 {
  --tw-gradient-to: rgb(97 106 104 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(97 106 104 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent-deep\/50 {
  --tw-gradient-to: rgb(97 106 104 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(97 106 104 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent-deep\/60 {
  --tw-gradient-to: rgb(97 106 104 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(97 106 104 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent-deep\/70 {
  --tw-gradient-to: rgb(97 106 104 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(97 106 104 / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent-deep\/80 {
  --tw-gradient-to: rgb(97 106 104 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(97 106 104 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent-deep\/90 {
  --tw-gradient-to: rgb(97 106 104 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(97 106 104 / 0.9) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent\/10 {
  --tw-gradient-to: rgb(132 149 146 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(132 149 146 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent\/20 {
  --tw-gradient-to: rgb(132 149 146 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(132 149 146 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent\/30 {
  --tw-gradient-to: rgb(132 149 146 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(132 149 146 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent\/40 {
  --tw-gradient-to: rgb(132 149 146 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(132 149 146 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent\/5 {
  --tw-gradient-to: rgb(132 149 146 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(132 149 146 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent\/50 {
  --tw-gradient-to: rgb(132 149 146 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(132 149 146 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent\/60 {
  --tw-gradient-to: rgb(132 149 146 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(132 149 146 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent\/70 {
  --tw-gradient-to: rgb(132 149 146 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(132 149 146 / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent\/80 {
  --tw-gradient-to: rgb(132 149 146 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(132 149 146 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-accent\/90 {
  --tw-gradient-to: rgb(132 149 146 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(132 149 146 / 0.9) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-brand-grey {
  --tw-gradient-to: rgb(98 96 98 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #626062 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-brand-grey-dark {
  --tw-gradient-to: rgb(63 62 63 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #3f3e3f var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-brand-grey-dark\/10 {
  --tw-gradient-to: rgb(63 62 63 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(63 62 63 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-brand-grey-dark\/20 {
  --tw-gradient-to: rgb(63 62 63 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(63 62 63 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-brand-grey-dark\/30 {
  --tw-gradient-to: rgb(63 62 63 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(63 62 63 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-brand-grey-dark\/40 {
  --tw-gradient-to: rgb(63 62 63 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(63 62 63 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-brand-grey-dark\/5 {
  --tw-gradient-to: rgb(63 62 63 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(63 62 63 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-brand-grey-dark\/50 {
  --tw-gradient-to: rgb(63 62 63 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(63 62 63 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-brand-grey-dark\/60 {
  --tw-gradient-to: rgb(63 62 63 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(63 62 63 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-brand-grey-dark\/70 {
  --tw-gradient-to: rgb(63 62 63 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(63 62 63 / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-brand-grey-dark\/80 {
  --tw-gradient-to: rgb(63 62 63 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(63 62 63 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-brand-grey-dark\/90 {
  --tw-gradient-to: rgb(63 62 63 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(63 62 63 / 0.9) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-brand-grey\/10 {
  --tw-gradient-to: rgb(98 96 98 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(98 96 98 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-brand-grey\/20 {
  --tw-gradient-to: rgb(98 96 98 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(98 96 98 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-brand-grey\/30 {
  --tw-gradient-to: rgb(98 96 98 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(98 96 98 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-brand-grey\/40 {
  --tw-gradient-to: rgb(98 96 98 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(98 96 98 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-brand-grey\/5 {
  --tw-gradient-to: rgb(98 96 98 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(98 96 98 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-brand-grey\/50 {
  --tw-gradient-to: rgb(98 96 98 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(98 96 98 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-brand-grey\/60 {
  --tw-gradient-to: rgb(98 96 98 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(98 96 98 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-brand-grey\/70 {
  --tw-gradient-to: rgb(98 96 98 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(98 96 98 / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-brand-grey\/80 {
  --tw-gradient-to: rgb(98 96 98 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(98 96 98 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-brand-grey\/90 {
  --tw-gradient-to: rgb(98 96 98 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(98 96 98 / 0.9) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-heading {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #000000 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-heading\/10 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-heading\/20 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-heading\/30 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-heading\/40 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-heading\/5 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-heading\/50 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-heading\/60 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-heading\/70 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-heading\/80 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-heading\/90 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.9) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-ink {
  --tw-gradient-to: rgb(79 79 79 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #4f4f4f var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-ink\/10 {
  --tw-gradient-to: rgb(79 79 79 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(79 79 79 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-ink\/20 {
  --tw-gradient-to: rgb(79 79 79 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(79 79 79 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-ink\/30 {
  --tw-gradient-to: rgb(79 79 79 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(79 79 79 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-ink\/40 {
  --tw-gradient-to: rgb(79 79 79 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(79 79 79 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-ink\/5 {
  --tw-gradient-to: rgb(79 79 79 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(79 79 79 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-ink\/50 {
  --tw-gradient-to: rgb(79 79 79 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(79 79 79 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-ink\/60 {
  --tw-gradient-to: rgb(79 79 79 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(79 79 79 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-ink\/70 {
  --tw-gradient-to: rgb(79 79 79 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(79 79 79 / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-ink\/80 {
  --tw-gradient-to: rgb(79 79 79 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(79 79 79 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-ink\/90 {
  --tw-gradient-to: rgb(79 79 79 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(79 79 79 / 0.9) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-line {
  --tw-gradient-to: rgb(221 221 221 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #dddddd var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-line-strong {
  --tw-gradient-to: rgb(195 195 195 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #c3c3c3 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-line-strong\/10 {
  --tw-gradient-to: rgb(195 195 195 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(195 195 195 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-line-strong\/20 {
  --tw-gradient-to: rgb(195 195 195 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(195 195 195 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-line-strong\/30 {
  --tw-gradient-to: rgb(195 195 195 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(195 195 195 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-line-strong\/40 {
  --tw-gradient-to: rgb(195 195 195 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(195 195 195 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-line-strong\/5 {
  --tw-gradient-to: rgb(195 195 195 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(195 195 195 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-line-strong\/50 {
  --tw-gradient-to: rgb(195 195 195 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(195 195 195 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-line-strong\/60 {
  --tw-gradient-to: rgb(195 195 195 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(195 195 195 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-line-strong\/70 {
  --tw-gradient-to: rgb(195 195 195 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(195 195 195 / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-line-strong\/80 {
  --tw-gradient-to: rgb(195 195 195 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(195 195 195 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-line-strong\/90 {
  --tw-gradient-to: rgb(195 195 195 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(195 195 195 / 0.9) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-line\/10 {
  --tw-gradient-to: rgb(221 221 221 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(221 221 221 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-line\/20 {
  --tw-gradient-to: rgb(221 221 221 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(221 221 221 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-line\/30 {
  --tw-gradient-to: rgb(221 221 221 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(221 221 221 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-line\/40 {
  --tw-gradient-to: rgb(221 221 221 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(221 221 221 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-line\/5 {
  --tw-gradient-to: rgb(221 221 221 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(221 221 221 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-line\/50 {
  --tw-gradient-to: rgb(221 221 221 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(221 221 221 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-line\/60 {
  --tw-gradient-to: rgb(221 221 221 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(221 221 221 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-line\/70 {
  --tw-gradient-to: rgb(221 221 221 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(221 221 221 / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-line\/80 {
  --tw-gradient-to: rgb(221 221 221 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(221 221 221 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-line\/90 {
  --tw-gradient-to: rgb(221 221 221 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(221 221 221 / 0.9) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-on-dark {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #ffffff var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-on-dark\/10 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-on-dark\/20 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-on-dark\/30 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-on-dark\/40 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-on-dark\/5 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-on-dark\/50 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-on-dark\/60 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-on-dark\/70 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-on-dark\/80 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-on-dark\/90 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.9) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-placeholder {
  --tw-gradient-to: rgb(229 229 229 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #e5e5e5 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-placeholder\/10 {
  --tw-gradient-to: rgb(229 229 229 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(229 229 229 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-placeholder\/20 {
  --tw-gradient-to: rgb(229 229 229 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(229 229 229 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-placeholder\/30 {
  --tw-gradient-to: rgb(229 229 229 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(229 229 229 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-placeholder\/40 {
  --tw-gradient-to: rgb(229 229 229 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(229 229 229 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-placeholder\/5 {
  --tw-gradient-to: rgb(229 229 229 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(229 229 229 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-placeholder\/50 {
  --tw-gradient-to: rgb(229 229 229 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(229 229 229 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-placeholder\/60 {
  --tw-gradient-to: rgb(229 229 229 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(229 229 229 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-placeholder\/70 {
  --tw-gradient-to: rgb(229 229 229 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(229 229 229 / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-placeholder\/80 {
  --tw-gradient-to: rgb(229 229 229 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(229 229 229 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-placeholder\/90 {
  --tw-gradient-to: rgb(229 229 229 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(229 229 229 / 0.9) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #ffffff var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface-alt {
  --tw-gradient-to: rgb(248 248 248 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #f8f8f8 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface-alt\/10 {
  --tw-gradient-to: rgb(248 248 248 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(248 248 248 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface-alt\/20 {
  --tw-gradient-to: rgb(248 248 248 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(248 248 248 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface-alt\/30 {
  --tw-gradient-to: rgb(248 248 248 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(248 248 248 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface-alt\/40 {
  --tw-gradient-to: rgb(248 248 248 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(248 248 248 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface-alt\/5 {
  --tw-gradient-to: rgb(248 248 248 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(248 248 248 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface-alt\/50 {
  --tw-gradient-to: rgb(248 248 248 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(248 248 248 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface-alt\/60 {
  --tw-gradient-to: rgb(248 248 248 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(248 248 248 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface-alt\/70 {
  --tw-gradient-to: rgb(248 248 248 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(248 248 248 / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface-alt\/80 {
  --tw-gradient-to: rgb(248 248 248 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(248 248 248 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface-alt\/90 {
  --tw-gradient-to: rgb(248 248 248 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(248 248 248 / 0.9) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface-dark {
  --tw-gradient-to: rgb(43 43 43 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #2b2b2b var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface-dark\/10 {
  --tw-gradient-to: rgb(43 43 43 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(43 43 43 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface-dark\/20 {
  --tw-gradient-to: rgb(43 43 43 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(43 43 43 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface-dark\/30 {
  --tw-gradient-to: rgb(43 43 43 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(43 43 43 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface-dark\/40 {
  --tw-gradient-to: rgb(43 43 43 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(43 43 43 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface-dark\/5 {
  --tw-gradient-to: rgb(43 43 43 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(43 43 43 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface-dark\/50 {
  --tw-gradient-to: rgb(43 43 43 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(43 43 43 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface-dark\/60 {
  --tw-gradient-to: rgb(43 43 43 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(43 43 43 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface-dark\/70 {
  --tw-gradient-to: rgb(43 43 43 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(43 43 43 / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface-dark\/80 {
  --tw-gradient-to: rgb(43 43 43 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(43 43 43 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface-dark\/90 {
  --tw-gradient-to: rgb(43 43 43 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(43 43 43 / 0.9) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface\/10 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface\/20 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface\/30 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface\/40 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface\/5 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface\/50 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface\/60 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface\/70 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface\/80 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface\/90 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.9) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-accent {
  --tw-gradient-to: #849592 var(--tw-gradient-to-position);
}
.to-accent-deep {
  --tw-gradient-to: #616a68 var(--tw-gradient-to-position);
}
.to-accent-deep\/10 {
  --tw-gradient-to: rgb(97 106 104 / 0.1) var(--tw-gradient-to-position);
}
.to-accent-deep\/20 {
  --tw-gradient-to: rgb(97 106 104 / 0.2) var(--tw-gradient-to-position);
}
.to-accent-deep\/30 {
  --tw-gradient-to: rgb(97 106 104 / 0.3) var(--tw-gradient-to-position);
}
.to-accent-deep\/40 {
  --tw-gradient-to: rgb(97 106 104 / 0.4) var(--tw-gradient-to-position);
}
.to-accent-deep\/5 {
  --tw-gradient-to: rgb(97 106 104 / 0.05) var(--tw-gradient-to-position);
}
.to-accent-deep\/50 {
  --tw-gradient-to: rgb(97 106 104 / 0.5) var(--tw-gradient-to-position);
}
.to-accent-deep\/60 {
  --tw-gradient-to: rgb(97 106 104 / 0.6) var(--tw-gradient-to-position);
}
.to-accent-deep\/70 {
  --tw-gradient-to: rgb(97 106 104 / 0.7) var(--tw-gradient-to-position);
}
.to-accent-deep\/80 {
  --tw-gradient-to: rgb(97 106 104 / 0.8) var(--tw-gradient-to-position);
}
.to-accent-deep\/90 {
  --tw-gradient-to: rgb(97 106 104 / 0.9) var(--tw-gradient-to-position);
}
.to-accent\/10 {
  --tw-gradient-to: rgb(132 149 146 / 0.1) var(--tw-gradient-to-position);
}
.to-accent\/20 {
  --tw-gradient-to: rgb(132 149 146 / 0.2) var(--tw-gradient-to-position);
}
.to-accent\/30 {
  --tw-gradient-to: rgb(132 149 146 / 0.3) var(--tw-gradient-to-position);
}
.to-accent\/40 {
  --tw-gradient-to: rgb(132 149 146 / 0.4) var(--tw-gradient-to-position);
}
.to-accent\/5 {
  --tw-gradient-to: rgb(132 149 146 / 0.05) var(--tw-gradient-to-position);
}
.to-accent\/50 {
  --tw-gradient-to: rgb(132 149 146 / 0.5) var(--tw-gradient-to-position);
}
.to-accent\/60 {
  --tw-gradient-to: rgb(132 149 146 / 0.6) var(--tw-gradient-to-position);
}
.to-accent\/70 {
  --tw-gradient-to: rgb(132 149 146 / 0.7) var(--tw-gradient-to-position);
}
.to-accent\/80 {
  --tw-gradient-to: rgb(132 149 146 / 0.8) var(--tw-gradient-to-position);
}
.to-accent\/90 {
  --tw-gradient-to: rgb(132 149 146 / 0.9) var(--tw-gradient-to-position);
}
.to-brand-grey {
  --tw-gradient-to: #626062 var(--tw-gradient-to-position);
}
.to-brand-grey-dark {
  --tw-gradient-to: #3f3e3f var(--tw-gradient-to-position);
}
.to-brand-grey-dark\/10 {
  --tw-gradient-to: rgb(63 62 63 / 0.1) var(--tw-gradient-to-position);
}
.to-brand-grey-dark\/20 {
  --tw-gradient-to: rgb(63 62 63 / 0.2) var(--tw-gradient-to-position);
}
.to-brand-grey-dark\/30 {
  --tw-gradient-to: rgb(63 62 63 / 0.3) var(--tw-gradient-to-position);
}
.to-brand-grey-dark\/40 {
  --tw-gradient-to: rgb(63 62 63 / 0.4) var(--tw-gradient-to-position);
}
.to-brand-grey-dark\/5 {
  --tw-gradient-to: rgb(63 62 63 / 0.05) var(--tw-gradient-to-position);
}
.to-brand-grey-dark\/50 {
  --tw-gradient-to: rgb(63 62 63 / 0.5) var(--tw-gradient-to-position);
}
.to-brand-grey-dark\/60 {
  --tw-gradient-to: rgb(63 62 63 / 0.6) var(--tw-gradient-to-position);
}
.to-brand-grey-dark\/70 {
  --tw-gradient-to: rgb(63 62 63 / 0.7) var(--tw-gradient-to-position);
}
.to-brand-grey-dark\/80 {
  --tw-gradient-to: rgb(63 62 63 / 0.8) var(--tw-gradient-to-position);
}
.to-brand-grey-dark\/90 {
  --tw-gradient-to: rgb(63 62 63 / 0.9) var(--tw-gradient-to-position);
}
.to-brand-grey\/10 {
  --tw-gradient-to: rgb(98 96 98 / 0.1) var(--tw-gradient-to-position);
}
.to-brand-grey\/20 {
  --tw-gradient-to: rgb(98 96 98 / 0.2) var(--tw-gradient-to-position);
}
.to-brand-grey\/30 {
  --tw-gradient-to: rgb(98 96 98 / 0.3) var(--tw-gradient-to-position);
}
.to-brand-grey\/40 {
  --tw-gradient-to: rgb(98 96 98 / 0.4) var(--tw-gradient-to-position);
}
.to-brand-grey\/5 {
  --tw-gradient-to: rgb(98 96 98 / 0.05) var(--tw-gradient-to-position);
}
.to-brand-grey\/50 {
  --tw-gradient-to: rgb(98 96 98 / 0.5) var(--tw-gradient-to-position);
}
.to-brand-grey\/60 {
  --tw-gradient-to: rgb(98 96 98 / 0.6) var(--tw-gradient-to-position);
}
.to-brand-grey\/70 {
  --tw-gradient-to: rgb(98 96 98 / 0.7) var(--tw-gradient-to-position);
}
.to-brand-grey\/80 {
  --tw-gradient-to: rgb(98 96 98 / 0.8) var(--tw-gradient-to-position);
}
.to-brand-grey\/90 {
  --tw-gradient-to: rgb(98 96 98 / 0.9) var(--tw-gradient-to-position);
}
.to-heading {
  --tw-gradient-to: #000000 var(--tw-gradient-to-position);
}
.to-heading\/10 {
  --tw-gradient-to: rgb(0 0 0 / 0.1) var(--tw-gradient-to-position);
}
.to-heading\/20 {
  --tw-gradient-to: rgb(0 0 0 / 0.2) var(--tw-gradient-to-position);
}
.to-heading\/30 {
  --tw-gradient-to: rgb(0 0 0 / 0.3) var(--tw-gradient-to-position);
}
.to-heading\/40 {
  --tw-gradient-to: rgb(0 0 0 / 0.4) var(--tw-gradient-to-position);
}
.to-heading\/5 {
  --tw-gradient-to: rgb(0 0 0 / 0.05) var(--tw-gradient-to-position);
}
.to-heading\/50 {
  --tw-gradient-to: rgb(0 0 0 / 0.5) var(--tw-gradient-to-position);
}
.to-heading\/60 {
  --tw-gradient-to: rgb(0 0 0 / 0.6) var(--tw-gradient-to-position);
}
.to-heading\/70 {
  --tw-gradient-to: rgb(0 0 0 / 0.7) var(--tw-gradient-to-position);
}
.to-heading\/80 {
  --tw-gradient-to: rgb(0 0 0 / 0.8) var(--tw-gradient-to-position);
}
.to-heading\/90 {
  --tw-gradient-to: rgb(0 0 0 / 0.9) var(--tw-gradient-to-position);
}
.to-ink {
  --tw-gradient-to: #4f4f4f var(--tw-gradient-to-position);
}
.to-ink\/10 {
  --tw-gradient-to: rgb(79 79 79 / 0.1) var(--tw-gradient-to-position);
}
.to-ink\/20 {
  --tw-gradient-to: rgb(79 79 79 / 0.2) var(--tw-gradient-to-position);
}
.to-ink\/30 {
  --tw-gradient-to: rgb(79 79 79 / 0.3) var(--tw-gradient-to-position);
}
.to-ink\/40 {
  --tw-gradient-to: rgb(79 79 79 / 0.4) var(--tw-gradient-to-position);
}
.to-ink\/5 {
  --tw-gradient-to: rgb(79 79 79 / 0.05) var(--tw-gradient-to-position);
}
.to-ink\/50 {
  --tw-gradient-to: rgb(79 79 79 / 0.5) var(--tw-gradient-to-position);
}
.to-ink\/60 {
  --tw-gradient-to: rgb(79 79 79 / 0.6) var(--tw-gradient-to-position);
}
.to-ink\/70 {
  --tw-gradient-to: rgb(79 79 79 / 0.7) var(--tw-gradient-to-position);
}
.to-ink\/80 {
  --tw-gradient-to: rgb(79 79 79 / 0.8) var(--tw-gradient-to-position);
}
.to-ink\/90 {
  --tw-gradient-to: rgb(79 79 79 / 0.9) var(--tw-gradient-to-position);
}
.to-line {
  --tw-gradient-to: #dddddd var(--tw-gradient-to-position);
}
.to-line-strong {
  --tw-gradient-to: #c3c3c3 var(--tw-gradient-to-position);
}
.to-line-strong\/10 {
  --tw-gradient-to: rgb(195 195 195 / 0.1) var(--tw-gradient-to-position);
}
.to-line-strong\/20 {
  --tw-gradient-to: rgb(195 195 195 / 0.2) var(--tw-gradient-to-position);
}
.to-line-strong\/30 {
  --tw-gradient-to: rgb(195 195 195 / 0.3) var(--tw-gradient-to-position);
}
.to-line-strong\/40 {
  --tw-gradient-to: rgb(195 195 195 / 0.4) var(--tw-gradient-to-position);
}
.to-line-strong\/5 {
  --tw-gradient-to: rgb(195 195 195 / 0.05) var(--tw-gradient-to-position);
}
.to-line-strong\/50 {
  --tw-gradient-to: rgb(195 195 195 / 0.5) var(--tw-gradient-to-position);
}
.to-line-strong\/60 {
  --tw-gradient-to: rgb(195 195 195 / 0.6) var(--tw-gradient-to-position);
}
.to-line-strong\/70 {
  --tw-gradient-to: rgb(195 195 195 / 0.7) var(--tw-gradient-to-position);
}
.to-line-strong\/80 {
  --tw-gradient-to: rgb(195 195 195 / 0.8) var(--tw-gradient-to-position);
}
.to-line-strong\/90 {
  --tw-gradient-to: rgb(195 195 195 / 0.9) var(--tw-gradient-to-position);
}
.to-line\/10 {
  --tw-gradient-to: rgb(221 221 221 / 0.1) var(--tw-gradient-to-position);
}
.to-line\/20 {
  --tw-gradient-to: rgb(221 221 221 / 0.2) var(--tw-gradient-to-position);
}
.to-line\/30 {
  --tw-gradient-to: rgb(221 221 221 / 0.3) var(--tw-gradient-to-position);
}
.to-line\/40 {
  --tw-gradient-to: rgb(221 221 221 / 0.4) var(--tw-gradient-to-position);
}
.to-line\/5 {
  --tw-gradient-to: rgb(221 221 221 / 0.05) var(--tw-gradient-to-position);
}
.to-line\/50 {
  --tw-gradient-to: rgb(221 221 221 / 0.5) var(--tw-gradient-to-position);
}
.to-line\/60 {
  --tw-gradient-to: rgb(221 221 221 / 0.6) var(--tw-gradient-to-position);
}
.to-line\/70 {
  --tw-gradient-to: rgb(221 221 221 / 0.7) var(--tw-gradient-to-position);
}
.to-line\/80 {
  --tw-gradient-to: rgb(221 221 221 / 0.8) var(--tw-gradient-to-position);
}
.to-line\/90 {
  --tw-gradient-to: rgb(221 221 221 / 0.9) var(--tw-gradient-to-position);
}
.to-on-dark {
  --tw-gradient-to: #ffffff var(--tw-gradient-to-position);
}
.to-on-dark\/10 {
  --tw-gradient-to: rgb(255 255 255 / 0.1) var(--tw-gradient-to-position);
}
.to-on-dark\/20 {
  --tw-gradient-to: rgb(255 255 255 / 0.2) var(--tw-gradient-to-position);
}
.to-on-dark\/30 {
  --tw-gradient-to: rgb(255 255 255 / 0.3) var(--tw-gradient-to-position);
}
.to-on-dark\/40 {
  --tw-gradient-to: rgb(255 255 255 / 0.4) var(--tw-gradient-to-position);
}
.to-on-dark\/5 {
  --tw-gradient-to: rgb(255 255 255 / 0.05) var(--tw-gradient-to-position);
}
.to-on-dark\/50 {
  --tw-gradient-to: rgb(255 255 255 / 0.5) var(--tw-gradient-to-position);
}
.to-on-dark\/60 {
  --tw-gradient-to: rgb(255 255 255 / 0.6) var(--tw-gradient-to-position);
}
.to-on-dark\/70 {
  --tw-gradient-to: rgb(255 255 255 / 0.7) var(--tw-gradient-to-position);
}
.to-on-dark\/80 {
  --tw-gradient-to: rgb(255 255 255 / 0.8) var(--tw-gradient-to-position);
}
.to-on-dark\/90 {
  --tw-gradient-to: rgb(255 255 255 / 0.9) var(--tw-gradient-to-position);
}
.to-placeholder {
  --tw-gradient-to: #e5e5e5 var(--tw-gradient-to-position);
}
.to-placeholder\/10 {
  --tw-gradient-to: rgb(229 229 229 / 0.1) var(--tw-gradient-to-position);
}
.to-placeholder\/20 {
  --tw-gradient-to: rgb(229 229 229 / 0.2) var(--tw-gradient-to-position);
}
.to-placeholder\/30 {
  --tw-gradient-to: rgb(229 229 229 / 0.3) var(--tw-gradient-to-position);
}
.to-placeholder\/40 {
  --tw-gradient-to: rgb(229 229 229 / 0.4) var(--tw-gradient-to-position);
}
.to-placeholder\/5 {
  --tw-gradient-to: rgb(229 229 229 / 0.05) var(--tw-gradient-to-position);
}
.to-placeholder\/50 {
  --tw-gradient-to: rgb(229 229 229 / 0.5) var(--tw-gradient-to-position);
}
.to-placeholder\/60 {
  --tw-gradient-to: rgb(229 229 229 / 0.6) var(--tw-gradient-to-position);
}
.to-placeholder\/70 {
  --tw-gradient-to: rgb(229 229 229 / 0.7) var(--tw-gradient-to-position);
}
.to-placeholder\/80 {
  --tw-gradient-to: rgb(229 229 229 / 0.8) var(--tw-gradient-to-position);
}
.to-placeholder\/90 {
  --tw-gradient-to: rgb(229 229 229 / 0.9) var(--tw-gradient-to-position);
}
.to-surface {
  --tw-gradient-to: #ffffff var(--tw-gradient-to-position);
}
.to-surface-alt {
  --tw-gradient-to: #f8f8f8 var(--tw-gradient-to-position);
}
.to-surface-alt\/10 {
  --tw-gradient-to: rgb(248 248 248 / 0.1) var(--tw-gradient-to-position);
}
.to-surface-alt\/20 {
  --tw-gradient-to: rgb(248 248 248 / 0.2) var(--tw-gradient-to-position);
}
.to-surface-alt\/30 {
  --tw-gradient-to: rgb(248 248 248 / 0.3) var(--tw-gradient-to-position);
}
.to-surface-alt\/40 {
  --tw-gradient-to: rgb(248 248 248 / 0.4) var(--tw-gradient-to-position);
}
.to-surface-alt\/5 {
  --tw-gradient-to: rgb(248 248 248 / 0.05) var(--tw-gradient-to-position);
}
.to-surface-alt\/50 {
  --tw-gradient-to: rgb(248 248 248 / 0.5) var(--tw-gradient-to-position);
}
.to-surface-alt\/60 {
  --tw-gradient-to: rgb(248 248 248 / 0.6) var(--tw-gradient-to-position);
}
.to-surface-alt\/70 {
  --tw-gradient-to: rgb(248 248 248 / 0.7) var(--tw-gradient-to-position);
}
.to-surface-alt\/80 {
  --tw-gradient-to: rgb(248 248 248 / 0.8) var(--tw-gradient-to-position);
}
.to-surface-alt\/90 {
  --tw-gradient-to: rgb(248 248 248 / 0.9) var(--tw-gradient-to-position);
}
.to-surface-dark {
  --tw-gradient-to: #2b2b2b var(--tw-gradient-to-position);
}
.to-surface-dark\/10 {
  --tw-gradient-to: rgb(43 43 43 / 0.1) var(--tw-gradient-to-position);
}
.to-surface-dark\/20 {
  --tw-gradient-to: rgb(43 43 43 / 0.2) var(--tw-gradient-to-position);
}
.to-surface-dark\/30 {
  --tw-gradient-to: rgb(43 43 43 / 0.3) var(--tw-gradient-to-position);
}
.to-surface-dark\/40 {
  --tw-gradient-to: rgb(43 43 43 / 0.4) var(--tw-gradient-to-position);
}
.to-surface-dark\/5 {
  --tw-gradient-to: rgb(43 43 43 / 0.05) var(--tw-gradient-to-position);
}
.to-surface-dark\/50 {
  --tw-gradient-to: rgb(43 43 43 / 0.5) var(--tw-gradient-to-position);
}
.to-surface-dark\/60 {
  --tw-gradient-to: rgb(43 43 43 / 0.6) var(--tw-gradient-to-position);
}
.to-surface-dark\/70 {
  --tw-gradient-to: rgb(43 43 43 / 0.7) var(--tw-gradient-to-position);
}
.to-surface-dark\/80 {
  --tw-gradient-to: rgb(43 43 43 / 0.8) var(--tw-gradient-to-position);
}
.to-surface-dark\/90 {
  --tw-gradient-to: rgb(43 43 43 / 0.9) var(--tw-gradient-to-position);
}
.to-surface\/10 {
  --tw-gradient-to: rgb(255 255 255 / 0.1) var(--tw-gradient-to-position);
}
.to-surface\/20 {
  --tw-gradient-to: rgb(255 255 255 / 0.2) var(--tw-gradient-to-position);
}
.to-surface\/30 {
  --tw-gradient-to: rgb(255 255 255 / 0.3) var(--tw-gradient-to-position);
}
.to-surface\/40 {
  --tw-gradient-to: rgb(255 255 255 / 0.4) var(--tw-gradient-to-position);
}
.to-surface\/5 {
  --tw-gradient-to: rgb(255 255 255 / 0.05) var(--tw-gradient-to-position);
}
.to-surface\/50 {
  --tw-gradient-to: rgb(255 255 255 / 0.5) var(--tw-gradient-to-position);
}
.to-surface\/60 {
  --tw-gradient-to: rgb(255 255 255 / 0.6) var(--tw-gradient-to-position);
}
.to-surface\/70 {
  --tw-gradient-to: rgb(255 255 255 / 0.7) var(--tw-gradient-to-position);
}
.to-surface\/80 {
  --tw-gradient-to: rgb(255 255 255 / 0.8) var(--tw-gradient-to-position);
}
.to-surface\/90 {
  --tw-gradient-to: rgb(255 255 255 / 0.9) var(--tw-gradient-to-position);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.p-0 {
  padding: 0px;
}
.p-24 {
  padding: 6rem;
}
.p-4 {
  padding: 1rem;
}
.p-8 {
  padding: 2rem;
}
.\!px-3 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}
.\!px-8 {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}
.\!py-3 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}
.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.\!pb-0 {
  padding-bottom: 0px !important;
}
.pb-14 {
  padding-bottom: 3.5rem;
}
.pb-24 {
  padding-bottom: 6rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-16 {
  padding-top: 4rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.font-display {
  font-family: Geom, Poppins, ui-sans-serif, sans-serif;
}
.font-sans {
  font-family: Geom, Poppins, ui-sans-serif, system-ui, sans-serif;
}
.\!text-body-lg {
  font-size: 20px !important;
  line-height: 1.65 !important;
  font-weight: 300 !important;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-7xl {
  font-size: 4.5rem;
  line-height: 1;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[32px\] {
  font-size: 32px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-body {
  font-size: 17px;
  line-height: 1.75;
  font-weight: 300;
}
.text-body-lg {
  font-size: 20px;
  line-height: 1.65;
  font-weight: 300;
}
.text-display {
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 300;
}
.text-nav {
  font-size: 13px;
  line-height: 1.4;
  font-weight: 400;
}
.text-pill {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  font-weight: 500;
}
.text-small {
  font-size: 15px;
  line-height: 1.6;
  font-weight: 300;
}
.text-title {
  font-size: 40px;
  line-height: 1.25;
  font-weight: 500;
}
.text-title-sm {
  font-size: 24px;
  line-height: 1.35;
  font-weight: 500;
}
.\!font-light {
  font-weight: 300 !important;
}
.font-bold {
  font-weight: 700;
}
.font-light {
  font-weight: 300;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.italic {
  font-style: italic;
}
.leading-loose {
  line-height: 2;
}
.leading-none {
  line-height: 1;
}
.leading-normal {
  line-height: 1.5;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.text-accent {
  --tw-text-opacity: 1;
  color: rgb(132 149 146 / var(--tw-text-opacity, 1));
}
.text-accent-deep {
  --tw-text-opacity: 1;
  color: rgb(97 106 104 / var(--tw-text-opacity, 1));
}
.text-accent-deep\/10 {
  color: rgb(97 106 104 / 0.1);
}
.text-accent-deep\/20 {
  color: rgb(97 106 104 / 0.2);
}
.text-accent-deep\/30 {
  color: rgb(97 106 104 / 0.3);
}
.text-accent-deep\/40 {
  color: rgb(97 106 104 / 0.4);
}
.text-accent-deep\/5 {
  color: rgb(97 106 104 / 0.05);
}
.text-accent-deep\/50 {
  color: rgb(97 106 104 / 0.5);
}
.text-accent-deep\/60 {
  color: rgb(97 106 104 / 0.6);
}
.text-accent-deep\/70 {
  color: rgb(97 106 104 / 0.7);
}
.text-accent-deep\/80 {
  color: rgb(97 106 104 / 0.8);
}
.text-accent-deep\/90 {
  color: rgb(97 106 104 / 0.9);
}
.text-accent\/10 {
  color: rgb(132 149 146 / 0.1);
}
.text-accent\/20 {
  color: rgb(132 149 146 / 0.2);
}
.text-accent\/30 {
  color: rgb(132 149 146 / 0.3);
}
.text-accent\/40 {
  color: rgb(132 149 146 / 0.4);
}
.text-accent\/5 {
  color: rgb(132 149 146 / 0.05);
}
.text-accent\/50 {
  color: rgb(132 149 146 / 0.5);
}
.text-accent\/60 {
  color: rgb(132 149 146 / 0.6);
}
.text-accent\/70 {
  color: rgb(132 149 146 / 0.7);
}
.text-accent\/80 {
  color: rgb(132 149 146 / 0.8);
}
.text-accent\/90 {
  color: rgb(132 149 146 / 0.9);
}
.text-brand-grey {
  --tw-text-opacity: 1;
  color: rgb(98 96 98 / var(--tw-text-opacity, 1));
}
.text-brand-grey-dark {
  --tw-text-opacity: 1;
  color: rgb(63 62 63 / var(--tw-text-opacity, 1));
}
.text-brand-grey-dark\/10 {
  color: rgb(63 62 63 / 0.1);
}
.text-brand-grey-dark\/20 {
  color: rgb(63 62 63 / 0.2);
}
.text-brand-grey-dark\/30 {
  color: rgb(63 62 63 / 0.3);
}
.text-brand-grey-dark\/40 {
  color: rgb(63 62 63 / 0.4);
}
.text-brand-grey-dark\/5 {
  color: rgb(63 62 63 / 0.05);
}
.text-brand-grey-dark\/50 {
  color: rgb(63 62 63 / 0.5);
}
.text-brand-grey-dark\/60 {
  color: rgb(63 62 63 / 0.6);
}
.text-brand-grey-dark\/70 {
  color: rgb(63 62 63 / 0.7);
}
.text-brand-grey-dark\/80 {
  color: rgb(63 62 63 / 0.8);
}
.text-brand-grey-dark\/90 {
  color: rgb(63 62 63 / 0.9);
}
.text-brand-grey\/10 {
  color: rgb(98 96 98 / 0.1);
}
.text-brand-grey\/20 {
  color: rgb(98 96 98 / 0.2);
}
.text-brand-grey\/30 {
  color: rgb(98 96 98 / 0.3);
}
.text-brand-grey\/40 {
  color: rgb(98 96 98 / 0.4);
}
.text-brand-grey\/5 {
  color: rgb(98 96 98 / 0.05);
}
.text-brand-grey\/50 {
  color: rgb(98 96 98 / 0.5);
}
.text-brand-grey\/60 {
  color: rgb(98 96 98 / 0.6);
}
.text-brand-grey\/70 {
  color: rgb(98 96 98 / 0.7);
}
.text-brand-grey\/80 {
  color: rgb(98 96 98 / 0.8);
}
.text-brand-grey\/90 {
  color: rgb(98 96 98 / 0.9);
}
.text-heading {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-heading\/10 {
  color: rgb(0 0 0 / 0.1);
}
.text-heading\/20 {
  color: rgb(0 0 0 / 0.2);
}
.text-heading\/30 {
  color: rgb(0 0 0 / 0.3);
}
.text-heading\/40 {
  color: rgb(0 0 0 / 0.4);
}
.text-heading\/5 {
  color: rgb(0 0 0 / 0.05);
}
.text-heading\/50 {
  color: rgb(0 0 0 / 0.5);
}
.text-heading\/60 {
  color: rgb(0 0 0 / 0.6);
}
.text-heading\/70 {
  color: rgb(0 0 0 / 0.7);
}
.text-heading\/80 {
  color: rgb(0 0 0 / 0.8);
}
.text-heading\/90 {
  color: rgb(0 0 0 / 0.9);
}
.text-inherit {
  color: inherit;
}
.text-ink {
  --tw-text-opacity: 1;
  color: rgb(79 79 79 / var(--tw-text-opacity, 1));
}
.text-ink\/10 {
  color: rgb(79 79 79 / 0.1);
}
.text-ink\/20 {
  color: rgb(79 79 79 / 0.2);
}
.text-ink\/30 {
  color: rgb(79 79 79 / 0.3);
}
.text-ink\/40 {
  color: rgb(79 79 79 / 0.4);
}
.text-ink\/5 {
  color: rgb(79 79 79 / 0.05);
}
.text-ink\/50 {
  color: rgb(79 79 79 / 0.5);
}
.text-ink\/60 {
  color: rgb(79 79 79 / 0.6);
}
.text-ink\/70 {
  color: rgb(79 79 79 / 0.7);
}
.text-ink\/80 {
  color: rgb(79 79 79 / 0.8);
}
.text-ink\/90 {
  color: rgb(79 79 79 / 0.9);
}
.text-line {
  --tw-text-opacity: 1;
  color: rgb(221 221 221 / var(--tw-text-opacity, 1));
}
.text-line-strong {
  --tw-text-opacity: 1;
  color: rgb(195 195 195 / var(--tw-text-opacity, 1));
}
.text-line-strong\/10 {
  color: rgb(195 195 195 / 0.1);
}
.text-line-strong\/20 {
  color: rgb(195 195 195 / 0.2);
}
.text-line-strong\/30 {
  color: rgb(195 195 195 / 0.3);
}
.text-line-strong\/40 {
  color: rgb(195 195 195 / 0.4);
}
.text-line-strong\/5 {
  color: rgb(195 195 195 / 0.05);
}
.text-line-strong\/50 {
  color: rgb(195 195 195 / 0.5);
}
.text-line-strong\/60 {
  color: rgb(195 195 195 / 0.6);
}
.text-line-strong\/70 {
  color: rgb(195 195 195 / 0.7);
}
.text-line-strong\/80 {
  color: rgb(195 195 195 / 0.8);
}
.text-line-strong\/90 {
  color: rgb(195 195 195 / 0.9);
}
.text-line\/10 {
  color: rgb(221 221 221 / 0.1);
}
.text-line\/20 {
  color: rgb(221 221 221 / 0.2);
}
.text-line\/30 {
  color: rgb(221 221 221 / 0.3);
}
.text-line\/40 {
  color: rgb(221 221 221 / 0.4);
}
.text-line\/5 {
  color: rgb(221 221 221 / 0.05);
}
.text-line\/50 {
  color: rgb(221 221 221 / 0.5);
}
.text-line\/60 {
  color: rgb(221 221 221 / 0.6);
}
.text-line\/70 {
  color: rgb(221 221 221 / 0.7);
}
.text-line\/80 {
  color: rgb(221 221 221 / 0.8);
}
.text-line\/90 {
  color: rgb(221 221 221 / 0.9);
}
.text-on-dark {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-on-dark\/10 {
  color: rgb(255 255 255 / 0.1);
}
.text-on-dark\/20 {
  color: rgb(255 255 255 / 0.2);
}
.text-on-dark\/30 {
  color: rgb(255 255 255 / 0.3);
}
.text-on-dark\/40 {
  color: rgb(255 255 255 / 0.4);
}
.text-on-dark\/5 {
  color: rgb(255 255 255 / 0.05);
}
.text-on-dark\/50 {
  color: rgb(255 255 255 / 0.5);
}
.text-on-dark\/60 {
  color: rgb(255 255 255 / 0.6);
}
.text-on-dark\/65 {
  color: rgb(255 255 255 / 0.65);
}
.text-on-dark\/70 {
  color: rgb(255 255 255 / 0.7);
}
.text-on-dark\/80 {
  color: rgb(255 255 255 / 0.8);
}
.text-on-dark\/90 {
  color: rgb(255 255 255 / 0.9);
}
.text-placeholder {
  --tw-text-opacity: 1;
  color: rgb(229 229 229 / var(--tw-text-opacity, 1));
}
.text-placeholder\/10 {
  color: rgb(229 229 229 / 0.1);
}
.text-placeholder\/20 {
  color: rgb(229 229 229 / 0.2);
}
.text-placeholder\/30 {
  color: rgb(229 229 229 / 0.3);
}
.text-placeholder\/40 {
  color: rgb(229 229 229 / 0.4);
}
.text-placeholder\/5 {
  color: rgb(229 229 229 / 0.05);
}
.text-placeholder\/50 {
  color: rgb(229 229 229 / 0.5);
}
.text-placeholder\/60 {
  color: rgb(229 229 229 / 0.6);
}
.text-placeholder\/70 {
  color: rgb(229 229 229 / 0.7);
}
.text-placeholder\/80 {
  color: rgb(229 229 229 / 0.8);
}
.text-placeholder\/90 {
  color: rgb(229 229 229 / 0.9);
}
.text-surface {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-surface-alt {
  --tw-text-opacity: 1;
  color: rgb(248 248 248 / var(--tw-text-opacity, 1));
}
.text-surface-alt\/10 {
  color: rgb(248 248 248 / 0.1);
}
.text-surface-alt\/20 {
  color: rgb(248 248 248 / 0.2);
}
.text-surface-alt\/30 {
  color: rgb(248 248 248 / 0.3);
}
.text-surface-alt\/40 {
  color: rgb(248 248 248 / 0.4);
}
.text-surface-alt\/5 {
  color: rgb(248 248 248 / 0.05);
}
.text-surface-alt\/50 {
  color: rgb(248 248 248 / 0.5);
}
.text-surface-alt\/60 {
  color: rgb(248 248 248 / 0.6);
}
.text-surface-alt\/70 {
  color: rgb(248 248 248 / 0.7);
}
.text-surface-alt\/80 {
  color: rgb(248 248 248 / 0.8);
}
.text-surface-alt\/90 {
  color: rgb(248 248 248 / 0.9);
}
.text-surface-dark {
  --tw-text-opacity: 1;
  color: rgb(43 43 43 / var(--tw-text-opacity, 1));
}
.text-surface-dark\/10 {
  color: rgb(43 43 43 / 0.1);
}
.text-surface-dark\/20 {
  color: rgb(43 43 43 / 0.2);
}
.text-surface-dark\/30 {
  color: rgb(43 43 43 / 0.3);
}
.text-surface-dark\/40 {
  color: rgb(43 43 43 / 0.4);
}
.text-surface-dark\/5 {
  color: rgb(43 43 43 / 0.05);
}
.text-surface-dark\/50 {
  color: rgb(43 43 43 / 0.5);
}
.text-surface-dark\/60 {
  color: rgb(43 43 43 / 0.6);
}
.text-surface-dark\/70 {
  color: rgb(43 43 43 / 0.7);
}
.text-surface-dark\/80 {
  color: rgb(43 43 43 / 0.8);
}
.text-surface-dark\/90 {
  color: rgb(43 43 43 / 0.9);
}
.text-surface\/10 {
  color: rgb(255 255 255 / 0.1);
}
.text-surface\/20 {
  color: rgb(255 255 255 / 0.2);
}
.text-surface\/30 {
  color: rgb(255 255 255 / 0.3);
}
.text-surface\/40 {
  color: rgb(255 255 255 / 0.4);
}
.text-surface\/5 {
  color: rgb(255 255 255 / 0.05);
}
.text-surface\/50 {
  color: rgb(255 255 255 / 0.5);
}
.text-surface\/60 {
  color: rgb(255 255 255 / 0.6);
}
.text-surface\/70 {
  color: rgb(255 255 255 / 0.7);
}
.text-surface\/80 {
  color: rgb(255 255 255 / 0.8);
}
.text-surface\/90 {
  color: rgb(255 255 255 / 0.9);
}
.underline {
  text-decoration-line: underline;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_18px_40px_-20px_rgba\(0\2c 0\2c 0\2c 0\.25\)\] {
  --tw-shadow: 0 18px 40px -20px rgba(0,0,0,0.25);
  --tw-shadow-colored: 0 18px 40px -20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.hover\:bg-brand-grey-dark:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(63 62 63 / var(--tw-bg-opacity, 1));
}
.hover\:text-on-dark\/70:hover {
  color: rgb(255 255 255 / 0.7);
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:opacity-70:hover {
  opacity: 0.7;
}
.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}
.focus\:fixed:focus {
  position: fixed;
}
.focus\:left-2:focus {
  left: 0.5rem;
}
.focus\:top-2:focus {
  top: 0.5rem;
}
.focus\:z-\[200\]:focus {
  z-index: 200;
}
.focus\:rounded-pill:focus {
  border-radius: 100px;
}
.focus\:bg-brand-grey:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(98 96 98 / var(--tw-bg-opacity, 1));
}
.focus\:px-4:focus {
  padding-left: 1rem;
  padding-right: 1rem;
}
.focus\:py-2:focus {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.focus\:text-pill:focus {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  font-weight: 500;
}
.focus\:text-on-dark:focus {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 640px) {
  .sm\:min-h-\[400px\] {
    min-height: 400px;
  }
  .sm\:min-h-\[560px\] {
    min-height: 560px;
  }
  .sm\:w-\[420px\] {
    width: 420px;
  }
  .sm\:w-\[55\%\] {
    width: 55%;
  }
  .sm\:w-\[85\%\] {
    width: 85%;
  }
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .md\:sticky {
    position: sticky;
  }
  .md\:bottom-14 {
    bottom: 3.5rem;
  }
  .md\:right-14 {
    right: 3.5rem;
  }
  .md\:top-0 {
    top: 0px;
  }
  .md\:order-1 {
    order: 1;
  }
  .md\:order-2 {
    order: 2;
  }
  .md\:col-span-1 {
    grid-column: span 1 / span 1;
  }
  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .md\:col-span-3 {
    grid-column: span 3 / span 3;
  }
  .md\:col-span-4 {
    grid-column: span 4 / span 4;
  }
  .md\:-mt-20 {
    margin-top: -5rem;
  }
  .md\:mt-14 {
    margin-top: 3.5rem;
  }
  .md\:mt-24 {
    margin-top: 6rem;
  }
  .md\:block {
    display: block;
  }
  .md\:flex {
    display: flex;
  }
  .md\:inline-flex {
    display: inline-flex;
  }
  .md\:grid {
    display: grid;
  }
  .md\:hidden {
    display: none;
  }
  .md\:aspect-\[1354\/954\] {
    aspect-ratio: 1354/954;
  }
  .md\:h-12 {
    height: 3rem;
  }
  .md\:h-28 {
    height: 7rem;
  }
  .md\:min-h-\[512px\] {
    min-height: 512px;
  }
  .md\:min-h-\[720px\] {
    min-height: 720px;
  }
  .md\:w-\[500px\] {
    width: 500px;
  }
  .md\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .md\:items-stretch {
    align-items: stretch;
  }
  .md\:p-10 {
    padding: 2.5rem;
  }
  .md\:p-24 {
    padding: 6rem;
  }
  .md\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .md\:px-24 {
    padding-left: 6rem;
    padding-right: 6rem;
  }
  .md\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .md\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  .md\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .md\:pb-24 {
    padding-bottom: 6rem;
  }
  .md\:pb-36 {
    padding-bottom: 9rem;
  }
  .md\:pt-0 {
    padding-top: 0px;
  }
  .md\:pt-24 {
    padding-top: 6rem;
  }
  .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  .md\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }
  .md\:text-\[32px\] {
    font-size: 32px;
  }
  .md\:text-display {
    font-size: 48px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-weight: 300;
  }
}
@media (min-width: 770px) {
  .min-\[770px\]\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }
  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }
  .lg\:col-span-4 {
    grid-column: span 4 / span 4;
  }
  .lg\:block {
    display: block;
  }
  .lg\:hidden {
    display: none;
  }
  .lg\:w-\[40\%\] {
    width: 40%;
  }
  .lg\:w-\[80\%\] {
    width: 80%;
  }
  .lg\:w-\[90\%\] {
    width: 90%;
  }
  .lg\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lg\:grid-cols-\[1fr_1fr_1fr_auto\] {
    grid-template-columns: 1fr 1fr 1fr auto;
  }
  .lg\:text-\[100px\] {
    font-size: 100px;
  }
}