/* ============================================================
   SELF-HOSTED FONTS (src/font/*.woff)
   General Sans — body copy · Industry Test — headings
   Paths are relative to the compiled src/output.css
   ============================================================ */

/* ---------- General Sans ---------- */

@font-face {
  font-family: 'General Sans';

  src: url('font/GeneralSans-Extralight.woff') format('woff');

  font-weight: 200;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'General Sans';

  src: url('font/GeneralSans-ExtralightItalic.woff') format('woff');

  font-weight: 200;

  font-style: italic;

  font-display: swap;
}

@font-face {
  font-family: 'General Sans';

  src: url('font/GeneralSans-Light.woff') format('woff');

  font-weight: 300;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'General Sans';

  src: url('font/GeneralSans-LightItalic.woff') format('woff');

  font-weight: 300;

  font-style: italic;

  font-display: swap;
}

@font-face {
  font-family: 'General Sans';

  src: url('font/GeneralSans-Regular.woff') format('woff');

  font-weight: 400;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'General Sans';

  src: url('font/GeneralSans-Italic.woff') format('woff');

  font-weight: 400;

  font-style: italic;

  font-display: swap;
}

@font-face {
  font-family: 'General Sans';

  src: url('font/GeneralSans-Medium.woff') format('woff');

  font-weight: 500;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'General Sans';

  src: url('font/GeneralSans-MediumItalic.woff') format('woff');

  font-weight: 500;

  font-style: italic;

  font-display: swap;
}

@font-face {
  font-family: 'General Sans';

  src: url('font/GeneralSans-Semibold.woff') format('woff');

  font-weight: 600;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'General Sans';

  src: url('font/GeneralSans-Bold.woff') format('woff');

  font-weight: 700;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'General Sans';

  src: url('font/GeneralSans-BoldItalic.woff') format('woff');

  font-weight: 700;

  font-style: italic;

  font-display: swap;
}

/* ---------- Industry Test (headings) ---------- */

@font-face {
  font-family: 'Industry Test';

  src: url('font/IndustryTest-Thin.woff') format('woff');

  font-weight: 100;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'Industry Test';

  src: url('font/IndustryTest-Light.woff') format('woff');

  font-weight: 300;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'Industry Test';

  src: url('font/IndustryTest-Book.woff') format('woff');

  font-weight: 400;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'Industry Test';

  src: url('font/IndustryTest-BookItalic.woff') format('woff');

  font-weight: 400;

  font-style: italic;

  font-display: swap;
}

@font-face {
  font-family: 'Industry Test';

  src: url('font/IndustryTest-Medium.woff') format('woff');

  font-weight: 500;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'Industry Test';

  src: url('font/IndustryTest-Demi.woff') format('woff');

  font-weight: 600;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'Industry Test';

  src: url('font/IndustryTest-Bold.woff') format('woff');

  font-weight: 700;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'Industry Test';

  src: url('font/IndustryTest-BoldItalic.woff') format('woff');

  font-weight: 700;

  font-style: italic;

  font-display: swap;
}

@font-face {
  font-family: 'Industry Test';

  src: url('font/IndustryTest-Black.woff') format('woff');

  font-weight: 800;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: 'Industry Test';

  src: url('font/IndustryTest-Ultra.woff') format('woff');

  font-weight: 900;

  font-style: normal;

  font-display: swap;
}

*, ::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.17 | 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: Figtree, ui-sans-serif, system-ui, Arial, 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;
}

html {
  scroll-behavior: smooth;
}

/* Trent Hills body copy is Figtree; the legacy General Sans / Industry Test
       @font-face blocks above remain defined but are no longer referenced. */

body {
  font-family: "Figtree", ui-sans-serif, system-ui, Arial, sans-serif;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(11 18 32 / var(--tw-text-opacity, 1));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent the hero glow / off-canvas drawer from creating a horizontal scrollbar. */

html, body {
  overflow-x: clip;
}

.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: 1169px) {
  .container {
    max-width: 1169px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

.container {
  width: 100%;
}

/* Section vertical rhythm */

/* Headings use the Industry Test typeface from the Figma. */

.heading {
  font-family: "Industry Test", "General Sans", Arial, sans-serif;
  font-weight: 700;
  line-height: 1.2;
}

/* ========================================================
       BUTTONS
       ======================================================== */

.\!btn {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 5px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
}

.btn {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 5px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
}

.\!btn {
  z-index: 0 !important;
}

.btn {
  z-index: 0;
}

/* Left-to-right fill on hover — sits behind the label, clipped to the
       button, so layout, text color, and alignment are unaffected. */

.\!btn::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background: var(--btn-fill, rgba(0, 0, 0, 0.12)) !important;
  transform: translateX(-100%) !important;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fill, rgba(0, 0, 0, 0.12));
  transform: translateX(-100%);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.\!btn:hover::before {
  transform: translateX(0) !important;
}

.btn:hover::before {
  transform: translateX(0);
}

/* ========================================================
       SPEC PILL (technical material profile)
       Brown fill rises from the bottom on hover; the base green
       background and white text are unchanged, and the pseudo-element
       overlay means size/spacing never shift.
       ======================================================== */

/* ========================================================
       HEADER NAV (styles wp_nav_menu output)
       ======================================================== */

/* Left-to-right underline reveal on hover — absolutely positioned so it
       never shifts the menu layout. */

.dio-nav a:hover::before,
    .dio-nav .current-menu-item > a::before,
    .dio-nav .current_page_item > a::before {
  transform: scaleX(1);
}

/* Footer menu — same left-to-right underline as the header nav */

.dio-footer-nav a:hover::before,
    .dio-footer-nav .current-menu-item > a::before,
    .dio-footer-nav .current_page_item > a::before {
  transform: scaleX(1);
}

/* Mobile drawer menu */

/* my-1 keeps the rounded hover/active highlight clear of the li hairlines —
       without it the corners collide with the separator above and below. */

.dio-nav-mobile a:hover,
    .dio-nav-mobile .current-menu-item > a,
    .dio-nav-mobile .current_page_item > a {
  background-color: rgb(255 255 255 / 0.1);
}

@keyframes dioNavItemIn {
  from {
    opacity: 0;
    transform: translateX(-14px);
  }

  to   {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ========================================================
       FEATURE ICON CARD (home features bar)
       ======================================================== */

/* ========================================================
       FORMS (wrap in .dio-form)
       ======================================================== */

/* ---- Gravity Forms (GF theme CSS disabled → match .dio-form) ---- */

/* Placeholders convey the field name — visually hide labels (kept for a11y) */

/* Validation + confirmation */

/* ========================================================
       RICH TEXT (WYSIWYG output)
       ======================================================== */

.rich-text p {
  margin-bottom: 1rem;
}

.rich-text p:last-child {
  margin-bottom: 0px;
}

.rich-text ul {
  margin-bottom: 1rem;
  list-style-type: disc;
}

.rich-text ul > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.rich-text ul {
  padding-left: 1.25rem;
}

.rich-text a {
  text-decoration-line: underline;
}

.rich-text a:hover {
  text-decoration-line: none;
}

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

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.-bottom-6 {
  bottom: -1.5rem;
}

.-bottom-\[12px\] {
  bottom: -12px;
}

.-right-\[7px\] {
  right: -7px;
}

.bottom-8 {
  bottom: 2rem;
}

.left-0 {
  left: 0px;
}

.left-1\/2 {
  left: 50%;
}

.left-\[8px\] {
  left: 8px;
}

.right-0 {
  right: 0px;
}

.right-1 {
  right: 0.25rem;
}

.right-6 {
  right: 1.5rem;
}

.right-8 {
  right: 2rem;
}

.top-0 {
  top: 0px;
}

.top-4 {
  top: 1rem;
}

.top-6 {
  top: 1.5rem;
}

.top-\[14px\] {
  top: 14px;
}

.top-full {
  top: 100%;
}

.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.z-\[1\] {
  z-index: 1;
}

.z-\[55\] {
  z-index: 55;
}

.z-\[60\] {
  z-index: 60;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.m-0 {
  margin: 0px;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.-mt-12 {
  margin-top: -3rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.ml-4 {
  margin-left: 1rem;
}

.ml-auto {
  margin-left: auto;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-1\.5 {
  margin-top: 0.375rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-14 {
  margin-top: 3.5rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-2\.5 {
  margin-top: 0.625rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-7 {
  margin-top: 1.75rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-9 {
  margin-top: 2.25rem;
}

.mt-\[42px\] {
  margin-top: 42px;
}

.mt-\[7px\] {
  margin-top: 7px;
}

.mt-auto {
  margin-top: auto;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

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

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.aspect-\[1448\/1086\] {
  aspect-ratio: 1448/1086;
}

.aspect-\[342\/427\] {
  aspect-ratio: 342/427;
}

.aspect-\[508\/500\] {
  aspect-ratio: 508/500;
}

.aspect-\[632\/506\] {
  aspect-ratio: 632/506;
}

.aspect-\[633\/506\] {
  aspect-ratio: 633/506;
}

.aspect-\[633\/750\] {
  aspect-ratio: 633/750;
}

.aspect-\[692\/500\] {
  aspect-ratio: 692/500;
}

.aspect-\[692\/554\] {
  aspect-ratio: 692/554;
}

.aspect-\[692\/600\] {
  aspect-ratio: 692/600;
}

.aspect-\[692\/605\] {
  aspect-ratio: 692/605;
}

.aspect-\[692\/633\] {
  aspect-ratio: 692/633;
}

.aspect-\[692\/650\] {
  aspect-ratio: 692/650;
}

.aspect-\[700\/560\] {
  aspect-ratio: 700/560;
}

.h-1\.5 {
  height: 0.375rem;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-12 {
  height: 3rem;
}

.h-2 {
  height: 0.5rem;
}

.h-2\.5 {
  height: 0.625rem;
}

.h-3 {
  height: 0.75rem;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-7 {
  height: 1.75rem;
}

.h-9 {
  height: 2.25rem;
}

.h-\[100dvh\] {
  height: 100dvh;
}

.h-\[117px\] {
  height: 117px;
}

.h-\[158px\] {
  height: 158px;
}

.h-\[15px\] {
  height: 15px;
}

.h-\[18px\] {
  height: 18px;
}

.h-\[220px\] {
  height: 220px;
}

.h-\[22px\] {
  height: 22px;
}

.h-\[2px\] {
  height: 2px;
}

.h-\[30px\] {
  height: 30px;
}

.h-\[34px\] {
  height: 34px;
}

.h-\[380px\] {
  height: 380px;
}

.h-\[38px\] {
  height: 38px;
}

.h-\[46px\] {
  height: 46px;
}

.h-\[49px\] {
  height: 49px;
}

.h-\[52px\] {
  height: 52px;
}

.h-\[60px\] {
  height: 60px;
}

.h-\[7\.27px\] {
  height: 7.27px;
}

.h-\[76px\] {
  height: 76px;
}

.h-\[80px\] {
  height: 80px;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

.min-h-screen {
  min-height: 100vh;
}

.w-1\.5 {
  width: 0.375rem;
}

.w-10 {
  width: 2.5rem;
}

.w-11 {
  width: 2.75rem;
}

.w-12 {
  width: 3rem;
}

.w-2 {
  width: 0.5rem;
}

.w-2\.5 {
  width: 0.625rem;
}

.w-3 {
  width: 0.75rem;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-4 {
  width: 1rem;
}

.w-5 {
  width: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

.w-7 {
  width: 1.75rem;
}

.w-9 {
  width: 2.25rem;
}

.w-\[117px\] {
  width: 117px;
}

.w-\[15px\] {
  width: 15px;
}

.w-\[18px\] {
  width: 18px;
}

.w-\[21px\] {
  width: 21px;
}

.w-\[22px\] {
  width: 22px;
}

.w-\[30px\] {
  width: 30px;
}

.w-\[46px\] {
  width: 46px;
}

.w-\[52px\] {
  width: 52px;
}

.w-\[60px\] {
  width: 60px;
}

.w-\[723px\] {
  width: 723px;
}

.w-\[80px\] {
  width: 80px;
}

.w-\[86vw\] {
  width: 86vw;
}

.w-\[960px\] {
  width: 960px;
}

.w-auto {
  width: auto;
}

.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}

.w-full {
  width: 100%;
}

.min-w-0 {
  min-width: 0px;
}

.max-w-\[1000px\] {
  max-width: 1000px;
}

.max-w-\[360px\] {
  max-width: 360px;
}

.max-w-\[470px\] {
  max-width: 470px;
}

.max-w-\[540px\] {
  max-width: 540px;
}

.max-w-\[560px\] {
  max-width: 560px;
}

.max-w-\[600px\] {
  max-width: 600px;
}

.max-w-\[640px\] {
  max-width: 640px;
}

.max-w-\[680px\] {
  max-width: 680px;
}

.max-w-\[720px\] {
  max-width: 720px;
}

.max-w-\[724px\] {
  max-width: 724px;
}

.max-w-\[736px\] {
  max-width: 736px;
}

.max-w-\[740px\] {
  max-width: 740px;
}

.max-w-\[820px\] {
  max-width: 820px;
}

.max-w-\[900px\] {
  max-width: 900px;
}

.max-w-\[calc\(100vw-2rem\)\] {
  max-width: calc(100vw - 2rem);
}

.max-w-full {
  max-width: 100%;
}

.flex-1 {
  flex: 1 1 0%;
}

.shrink-0 {
  flex-shrink: 0;
}

.grow {
  flex-grow: 1;
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  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-y-2 {
  --tw-translate-y: 0.5rem;
  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));
}

.-scale-x-100 {
  --tw-scale-x: -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));
}

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

.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.resize {
  resize: both;
}

.list-none {
  list-style-type: none;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-\[318px_1fr_1fr\] {
  grid-template-columns: 318px 1fr 1fr;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.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-12 {
  gap: 3rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-\[18px\] {
  gap: 18px;
}

.gap-\[22px\] {
  gap: 22px;
}

.gap-\[5px\] {
  gap: 5px;
}

.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.gap-x-8 {
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}

.gap-x-\[56px\] {
  -moz-column-gap: 56px;
       column-gap: 56px;
}

.gap-y-10 {
  row-gap: 2.5rem;
}

.gap-y-4 {
  row-gap: 1rem;
}

.gap-y-6 {
  row-gap: 1.5rem;
}

.gap-y-9 {
  row-gap: 2.25rem;
}

.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-3\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.875rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.875rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-\[16px\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(16px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(16px * var(--tw-space-y-reverse));
}

.space-y-\[18px\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(18px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(18px * var(--tw-space-y-reverse));
}

.space-y-\[26px\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(26px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(26px * var(--tw-space-y-reverse));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-dashed > :not([hidden]) ~ :not([hidden]) {
  border-style: dashed;
}

.divide-\[\#edf0f5\] > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(237 240 245 / var(--tw-divide-opacity, 1));
}

.divide-\[\#eef2f8\] > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(238 242 248 / var(--tw-divide-opacity, 1));
}

.divide-black\/10 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(0 0 0 / 0.1);
}

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

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-y-auto {
  overflow-y: auto;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.break-words {
  overflow-wrap: break-word;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-3xl {
  border-radius: 1.5rem;
}

.rounded-\[10px\] {
  border-radius: 10px;
}

.rounded-\[12px\] {
  border-radius: 12px;
}

.rounded-\[13px\] {
  border-radius: 13px;
}

.rounded-\[14px\] {
  border-radius: 14px;
}

.rounded-\[15px\] {
  border-radius: 15px;
}

.rounded-\[16px\] {
  border-radius: 16px;
}

.rounded-\[20px\] {
  border-radius: 20px;
}

.rounded-\[22px\] {
  border-radius: 22px;
}

.rounded-\[24px\] {
  border-radius: 24px;
}

.rounded-\[25px\] {
  border-radius: 25px;
}

.rounded-\[28px\] {
  border-radius: 28px;
}

.rounded-\[30px\] {
  border-radius: 30px;
}

.rounded-\[32px\] {
  border-radius: 32px;
}

.rounded-\[38px\] {
  border-radius: 38px;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.border {
  border-width: 1px;
}

.border-2 {
  border-width: 2px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-dashed {
  border-style: dashed;
}

.\!border-brand-red {
  --tw-border-opacity: 1 !important;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1)) !important;
}

.border-\[\#bfe3cf\] {
  --tw-border-opacity: 1;
  border-color: rgb(191 227 207 / var(--tw-border-opacity, 1));
}

.border-\[\#c9d3e3\] {
  --tw-border-opacity: 1;
  border-color: rgb(201 211 227 / var(--tw-border-opacity, 1));
}

.border-\[\#cfd6e4\] {
  --tw-border-opacity: 1;
  border-color: rgb(207 214 228 / var(--tw-border-opacity, 1));
}

.border-\[\#d7dce4\] {
  --tw-border-opacity: 1;
  border-color: rgb(215 220 228 / var(--tw-border-opacity, 1));
}

.border-\[\#dfe4ee\] {
  --tw-border-opacity: 1;
  border-color: rgb(223 228 238 / var(--tw-border-opacity, 1));
}

.border-\[\#e2e7f0\] {
  --tw-border-opacity: 1;
  border-color: rgb(226 231 240 / var(--tw-border-opacity, 1));
}

.border-\[\#e6eefb\] {
  --tw-border-opacity: 1;
  border-color: rgb(230 238 251 / var(--tw-border-opacity, 1));
}

.border-\[\#e8ecf3\] {
  --tw-border-opacity: 1;
  border-color: rgb(232 236 243 / var(--tw-border-opacity, 1));
}

.border-\[\#edf0f5\] {
  --tw-border-opacity: 1;
  border-color: rgb(237 240 245 / var(--tw-border-opacity, 1));
}

.border-black\/10 {
  border-color: rgb(0 0 0 / 0.1);
}

.border-brand-red\/20 {
  border-color: rgb(220 38 38 / 0.2);
}

.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}

.border-white\/50 {
  border-color: rgb(255 255 255 / 0.5);
}

.border-white\/\[0\.12\] {
  border-color: rgb(255 255 255 / 0.12);
}

.bg-\[\#0b0e15\] {
  --tw-bg-opacity: 1;
  background-color: rgb(11 14 21 / var(--tw-bg-opacity, 1));
}

.bg-\[\#12a671\] {
  --tw-bg-opacity: 1;
  background-color: rgb(18 166 113 / var(--tw-bg-opacity, 1));
}

.bg-\[\#d8e3f7\] {
  --tw-bg-opacity: 1;
  background-color: rgb(216 227 247 / var(--tw-bg-opacity, 1));
}

.bg-\[\#e6eefb\] {
  --tw-bg-opacity: 1;
  background-color: rgb(230 238 251 / var(--tw-bg-opacity, 1));
}

.bg-\[\#eefaf1\] {
  --tw-bg-opacity: 1;
  background-color: rgb(238 250 241 / var(--tw-bg-opacity, 1));
}

.bg-\[\#f2f6fd\] {
  --tw-bg-opacity: 1;
  background-color: rgb(242 246 253 / var(--tw-bg-opacity, 1));
}

.bg-\[\#f7f8fb\] {
  --tw-bg-opacity: 1;
  background-color: rgb(247 248 251 / var(--tw-bg-opacity, 1));
}

.bg-\[\#f7f9fe\] {
  --tw-bg-opacity: 1;
  background-color: rgb(247 249 254 / var(--tw-bg-opacity, 1));
}

.bg-\[\#f8f9fa\] {
  --tw-bg-opacity: 1;
  background-color: rgb(248 249 250 / var(--tw-bg-opacity, 1));
}

.bg-\[\#fdeeee\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 238 238 / var(--tw-bg-opacity, 1));
}

.bg-\[rgba\(30\2c 58\2c 138\2c 0\.77\)\] {
  background-color: rgba(30,58,138,0.77);
}

.bg-black\/20 {
  background-color: rgb(0 0 0 / 0.2);
}

.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}

.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}

.bg-black\/\[0\.03\] {
  background-color: rgb(0 0 0 / 0.03);
}

.bg-brand-blue {
  --tw-bg-opacity: 1;
  background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1));
}

.bg-brand-blue\/10 {
  background-color: rgb(30 58 138 / 0.1);
}

.bg-brand-blue\/\[0\.77\] {
  background-color: rgb(30 58 138 / 0.77);
}

.bg-brand-footer {
  --tw-bg-opacity: 1;
  background-color: rgb(30 78 140 / var(--tw-bg-opacity, 1));
}

.bg-brand-navy {
  --tw-bg-opacity: 1;
  background-color: rgb(15 42 107 / var(--tw-bg-opacity, 1));
}

.bg-brand-red {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.bg-surface-cream {
  --tw-bg-opacity: 1;
  background-color: rgb(251 250 247 / var(--tw-bg-opacity, 1));
}

.bg-surface-icon {
  --tw-bg-opacity: 1;
  background-color: rgb(238 243 252 / var(--tw-bg-opacity, 1));
}

.bg-surface-soft {
  --tw-bg-opacity: 1;
  background-color: rgb(247 248 251 / var(--tw-bg-opacity, 1));
}

.bg-surface-tint {
  --tw-bg-opacity: 1;
  background-color: rgb(245 247 251 / var(--tw-bg-opacity, 1));
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}

.bg-white\/15 {
  background-color: rgb(255 255 255 / 0.15);
}

.bg-white\/95 {
  background-color: rgb(255 255 255 / 0.95);
}

.bg-white\/\[0\.04\] {
  background-color: rgb(255 255 255 / 0.04);
}

.bg-white\/\[0\.06\] {
  background-color: rgb(255 255 255 / 0.06);
}

.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.from-\[\#e6eefb\] {
  --tw-gradient-from: #e6eefb var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(230 238 251 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-surface-tint {
  --tw-gradient-from: #f5f7fb var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 247 251 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-white {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-\[\#f7f9fe\] {
  --tw-gradient-to: #f7f9fe var(--tw-gradient-to-position);
}

.to-surface-tint {
  --tw-gradient-to: #f5f7fb var(--tw-gradient-to-position);
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.object-\[center_66\%\] {
  -o-object-position: center 66%;
     object-position: center 66%;
}

.object-center {
  -o-object-position: center;
     object-position: center;
}

.object-top {
  -o-object-position: top;
     object-position: top;
}

.p-0 {
  padding: 0px;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-7 {
  padding: 1.75rem;
}

.p-8 {
  padding: 2rem;
}

.p-\[24px\] {
  padding: 24px;
}

.p-\[30px\] {
  padding: 30px;
}

.p-\[33px\] {
  padding: 33px;
}

.p-\[3px\] {
  padding: 3px;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.px-\[18px\] {
  padding-left: 18px;
  padding-right: 18px;
}

.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-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-7 {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-\[3px\] {
  padding-top: 3px;
  padding-bottom: 3px;
}

.py-\[40px\] {
  padding-top: 40px;
  padding-bottom: 40px;
}

.py-\[48px\] {
  padding-top: 48px;
  padding-bottom: 48px;
}

.py-\[52px\] {
  padding-top: 52px;
  padding-bottom: 52px;
}

.py-\[56px\] {
  padding-top: 56px;
  padding-bottom: 56px;
}

.py-\[60px\] {
  padding-top: 60px;
  padding-bottom: 60px;
}

.py-\[64px\] {
  padding-top: 64px;
  padding-bottom: 64px;
}

.py-\[80px\] {
  padding-top: 80px;
  padding-bottom: 80px;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-7 {
  padding-bottom: 1.75rem;
}

.pb-\[24px\] {
  padding-bottom: 24px;
}

.pb-\[30px\] {
  padding-bottom: 30px;
}

.pb-\[48px\] {
  padding-bottom: 48px;
}

.pb-\[52px\] {
  padding-bottom: 52px;
}

.pb-\[56px\] {
  padding-bottom: 56px;
}

.pb-\[64px\] {
  padding-bottom: 64px;
}

.pl-4 {
  padding-left: 1rem;
}

.pr-2\.5 {
  padding-right: 0.625rem;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-12 {
  padding-top: 3rem;
}

.pt-7 {
  padding-top: 1.75rem;
}

.pt-\[24px\] {
  padding-top: 24px;
}

.pt-\[40px\] {
  padding-top: 40px;
}

.pt-\[44px\] {
  padding-top: 44px;
}

.pt-\[52px\] {
  padding-top: 52px;
}

.pt-\[56px\] {
  padding-top: 56px;
}

.pt-\[64px\] {
  padding-top: 64px;
}

.pt-\[80px\] {
  padding-top: 80px;
}

.pt-\[8px\] {
  padding-top: 8px;
}

.text-left {
  text-align: left;
}

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

.font-heading {
  font-family: Figtree, ui-sans-serif, system-ui, Arial, sans-serif;
}

.font-sans {
  font-family: Figtree, ui-sans-serif, system-ui, Arial, sans-serif;
}

.font-serif {
  font-family: "Source Serif 4", Georgia, serif;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-\[110px\] {
  font-size: 110px;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-\[12px\] {
  font-size: 12px;
}

.text-\[13px\] {
  font-size: 13px;
}

.text-\[14px\] {
  font-size: 14px;
}

.text-\[15px\] {
  font-size: 15px;
}

.text-\[16px\] {
  font-size: 16px;
}

.text-\[17px\] {
  font-size: 17px;
}

.text-\[18px\] {
  font-size: 18px;
}

.text-\[19px\] {
  font-size: 19px;
}

.text-\[20px\] {
  font-size: 20px;
}

.text-\[22px\] {
  font-size: 22px;
}

.text-\[24px\] {
  font-size: 24px;
}

.text-\[26px\] {
  font-size: 26px;
}

.text-\[28px\] {
  font-size: 28px;
}

.text-\[30px\] {
  font-size: 30px;
}

.text-\[32px\] {
  font-size: 32px;
}

.text-\[40px\] {
  font-size: 40px;
}

.text-\[46px\] {
  font-size: 46px;
}

.text-\[60px\] {
  font-size: 60px;
}

.text-\[96px\] {
  font-size: 96px;
}

.text-\[clamp\(1\.375rem\2c 2\.8vw\2c 2\.5rem\)\] {
  font-size: clamp(1.375rem,2.8vw,2.5rem);
}

.text-\[clamp\(1\.85rem\2c 5\.2vw\2c 4\.0625rem\)\] {
  font-size: clamp(1.85rem,5.2vw,4.0625rem);
}

.text-\[clamp\(1\.95rem\2c 3\.4vw\2c 2\.875rem\)\] {
  font-size: clamp(1.95rem,3.4vw,2.875rem);
}

.text-\[clamp\(1\.95rem\2c 3\.6vw\2c 2\.875rem\)\] {
  font-size: clamp(1.95rem,3.6vw,2.875rem);
}

.text-\[clamp\(2\.5rem\2c 4\.6vw\2c 4\.0625rem\)\] {
  font-size: clamp(2.5rem,4.6vw,4.0625rem);
}

.text-\[clamp\(2\.5rem\2c 5\.4vw\2c 4\.0625rem\)\] {
  font-size: clamp(2.5rem,5.4vw,4.0625rem);
}

.text-\[clamp\(2rem\2c 3\.4vw\2c 2\.875rem\)\] {
  font-size: clamp(2rem,3.4vw,2.875rem);
}

.text-\[clamp\(2rem\2c 3\.6vw\2c 2\.875rem\)\] {
  font-size: clamp(2rem,3.6vw,2.875rem);
}

.text-\[clamp\(2rem\2c 4\.6vw\2c 4\.0625rem\)\] {
  font-size: clamp(2rem,4.6vw,4.0625rem);
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.italic {
  font-style: italic;
}

.leading-\[0\.5\] {
  line-height: 0.5;
}

.leading-\[0\.7\] {
  line-height: 0.7;
}

.leading-\[0\.9\] {
  line-height: 0.9;
}

.leading-\[1\.02\] {
  line-height: 1.02;
}

.leading-\[1\.03\] {
  line-height: 1.03;
}

.leading-\[1\.04\] {
  line-height: 1.04;
}

.leading-\[1\.05\] {
  line-height: 1.05;
}

.leading-\[1\.06\] {
  line-height: 1.06;
}

.leading-\[1\.12\] {
  line-height: 1.12;
}

.leading-\[1\.14\] {
  line-height: 1.14;
}

.leading-\[1\.15\] {
  line-height: 1.15;
}

.leading-\[1\.1\] {
  line-height: 1.1;
}

.leading-\[1\.25\] {
  line-height: 1.25;
}

.leading-\[1\.28\] {
  line-height: 1.28;
}

.leading-\[1\.2\] {
  line-height: 1.2;
}

.leading-\[1\.3\] {
  line-height: 1.3;
}

.leading-\[1\.42\] {
  line-height: 1.42;
}

.leading-\[1\.45\] {
  line-height: 1.45;
}

.leading-\[1\.4\] {
  line-height: 1.4;
}

.leading-\[1\.55\] {
  line-height: 1.55;
}

.leading-\[1\.5\] {
  line-height: 1.5;
}

.leading-\[1\.65\] {
  line-height: 1.65;
}

.leading-\[1\.6\] {
  line-height: 1.6;
}

.leading-\[1\.7\] {
  line-height: 1.7;
}

.leading-\[20px\] {
  line-height: 20px;
}

.leading-none {
  line-height: 1;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-\[-0\.01em\] {
  letter-spacing: -0.01em;
}

.tracking-\[-0\.02em\] {
  letter-spacing: -0.02em;
}

.tracking-\[-0\.03em\] {
  letter-spacing: -0.03em;
}

.tracking-\[-0\.36px\] {
  letter-spacing: -0.36px;
}

.tracking-\[0\.02em\] {
  letter-spacing: 0.02em;
}

.tracking-\[0\.08em\] {
  letter-spacing: 0.08em;
}

.tracking-\[0\.09em\] {
  letter-spacing: 0.09em;
}

.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}

.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}

.tracking-\[0\.1em\] {
  letter-spacing: 0.1em;
}

.tracking-\[1\.56px\] {
  letter-spacing: 1.56px;
}

.text-\[\#177245\] {
  --tw-text-opacity: 1;
  color: rgb(23 114 69 / var(--tw-text-opacity, 1));
}

.text-\[\#256d47\] {
  --tw-text-opacity: 1;
  color: rgb(37 109 71 / var(--tw-text-opacity, 1));
}

.text-\[\#2a3548\] {
  --tw-text-opacity: 1;
  color: rgb(42 53 72 / var(--tw-text-opacity, 1));
}

.text-\[\#FFC8C8\] {
  --tw-text-opacity: 1;
  color: rgb(255 200 200 / var(--tw-text-opacity, 1));
}

.text-\[\#e6eefb\] {
  --tw-text-opacity: 1;
  color: rgb(230 238 251 / var(--tw-text-opacity, 1));
}

.text-\[\#ff9d9d\] {
  --tw-text-opacity: 1;
  color: rgb(255 157 157 / var(--tw-text-opacity, 1));
}

.text-\[\#ffc8c8\] {
  --tw-text-opacity: 1;
  color: rgb(255 200 200 / var(--tw-text-opacity, 1));
}

.text-brand-blue {
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}

.text-brand-navy {
  --tw-text-opacity: 1;
  color: rgb(15 42 107 / var(--tw-text-opacity, 1));
}

.text-brand-red {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.text-ink {
  --tw-text-opacity: 1;
  color: rgb(11 18 32 / var(--tw-text-opacity, 1));
}

.text-ink\/70 {
  color: rgb(11 18 32 / 0.7);
}

.text-slate-300 {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}

.text-slateink {
  --tw-text-opacity: 1;
  color: rgb(86 99 119 / var(--tw-text-opacity, 1));
}

.text-slateink\/40 {
  color: rgb(86 99 119 / 0.4);
}

.text-slateink\/50 {
  color: rgb(86 99 119 / 0.5);
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-white\/50 {
  color: rgb(255 255 255 / 0.5);
}

.text-white\/55 {
  color: rgb(255 255 255 / 0.55);
}

.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}

.text-white\/65 {
  color: rgb(255 255 255 / 0.65);
}

.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}

.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}

.text-white\/85 {
  color: rgb(255 255 255 / 0.85);
}

.text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}

.text-white\/95 {
  color: rgb(255 255 255 / 0.95);
}

.underline {
  text-decoration-line: underline;
}

.underline-offset-2 {
  text-underline-offset: 2px;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.accent-brand-blue {
  accent-color: #1e3a8a;
}

.opacity-0 {
  opacity: 0;
}

.opacity-40 {
  opacity: 0.4;
}

.shadow-\[0_10px_30px_-8px_rgba\(15\2c 42\2c 107\2c 0\.6\)\] {
  --tw-shadow: 0 10px 30px -8px rgba(15,42,107,0.6);
  --tw-shadow-colored: 0 10px 30px -8px 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_20px_50px_-30px_rgba\(15\2c 42\2c 107\2c 0\.25\)\] {
  --tw-shadow: 0 20px 50px -30px rgba(15,42,107,0.25);
  --tw-shadow-colored: 0 20px 50px -30px 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_20px_60px_-20px_rgba\(15\2c 42\2c 107\2c 0\.18\)\] {
  --tw-shadow: 0 20px 60px -20px rgba(15,42,107,0.18);
  --tw-shadow-colored: 0 20px 60px -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-\[0_20px_60px_-20px_rgba\(15\2c 42\2c 107\2c 0\.22\)\] {
  --tw-shadow: 0 20px 60px -20px rgba(15,42,107,0.22);
  --tw-shadow-colored: 0 20px 60px -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-\[0_20px_60px_-20px_rgba\(15\2c 42\2c 107\2c 0\.4\)\] {
  --tw-shadow: 0 20px 60px -20px rgba(15,42,107,0.4);
  --tw-shadow-colored: 0 20px 60px -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-\[0_20px_60px_-24px_rgba\(15\2c 42\2c 107\2c 0\.22\)\] {
  --tw-shadow: 0 20px 60px -24px rgba(15,42,107,0.22);
  --tw-shadow-colored: 0 20px 60px -24px 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_20px_60px_-24px_rgba\(15\2c 42\2c 107\2c 0\.25\)\] {
  --tw-shadow: 0 20px 60px -24px rgba(15,42,107,0.25);
  --tw-shadow-colored: 0 20px 60px -24px 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_2px_15px_0_rgba\(0\2c 0\2c 0\2c 0\.15\)\] {
  --tw-shadow: 0 2px 15px 0 rgba(0,0,0,0.15);
  --tw-shadow-colored: 0 2px 15px 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-\[0_30px_60px_-25px_rgba\(15\2c 42\2c 107\2c 0\.35\)\] {
  --tw-shadow: 0 30px 60px -25px rgba(15,42,107,0.35);
  --tw-shadow-colored: 0 30px 60px -25px 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_30px_60px_-25px_rgba\(15\2c 42\2c 107\2c 0\.4\)\] {
  --tw-shadow: 0 30px 60px -25px rgba(15,42,107,0.4);
  --tw-shadow-colored: 0 30px 60px -25px 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_30px_60px_-28px_rgba\(15\2c 42\2c 107\2c 0\.3\)\] {
  --tw-shadow: 0 30px 60px -28px rgba(15,42,107,0.3);
  --tw-shadow-colored: 0 30px 60px -28px 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_30px_60px_-28px_rgba\(15\2c 42\2c 107\2c 0\.35\)\] {
  --tw-shadow: 0 30px 60px -28px rgba(15,42,107,0.35);
  --tw-shadow-colored: 0 30px 60px -28px 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_30px_60px_-30px_rgba\(15\2c 42\2c 107\2c 0\.25\)\] {
  --tw-shadow: 0 30px 60px -30px rgba(15,42,107,0.25);
  --tw-shadow-colored: 0 30px 60px -30px 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_30px_60px_-30px_rgba\(15\2c 42\2c 107\2c 0\.30\)\] {
  --tw-shadow: 0 30px 60px -30px rgba(15,42,107,0.30);
  --tw-shadow-colored: 0 30px 60px -30px 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_40px_80px_-30px_rgba\(15\2c 42\2c 107\2c 0\.35\)\] {
  --tw-shadow: 0 40px 80px -30px rgba(15,42,107,0.35);
  --tw-shadow-colored: 0 40px 80px -30px 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_40px_80px_-32px_rgba\(15\2c 42\2c 107\2c 0\.4\)\] {
  --tw-shadow: 0 40px 80px -32px rgba(15,42,107,0.4);
  --tw-shadow-colored: 0 40px 80px -32px 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_4px_10px_0_rgba\(15\2c 42\2c 107\2c 0\.06\)\2c 0_18px_40px_-12px_rgba\(15\2c 42\2c 107\2c 0\.12\)\] {
  --tw-shadow: 0 4px 10px 0 rgba(15,42,107,0.06),0 18px 40px -12px rgba(15,42,107,0.12);
  --tw-shadow-colored: 0 4px 10px 0 var(--tw-shadow-color), 0 18px 40px -12px 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-\[0px_20px_60px_-20px_rgba\(15\2c 42\2c 107\2c 0\.22\)\] {
  --tw-shadow: 0px 20px 60px -20px rgba(15,42,107,0.22);
  --tw-shadow-colored: 0px 20px 60px -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-\[0px_20px_60px_-24px_rgba\(15\2c 42\2c 107\2c 0\.20\)\] {
  --tw-shadow: 0px 20px 60px -24px rgba(15,42,107,0.20);
  --tw-shadow-colored: 0px 20px 60px -24px 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;
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.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-shadow {
  transition-property: box-shadow;
  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;
}

.duration-700 {
  transition-duration: 700ms;
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.\[overflow-wrap\:break-word\] {
  overflow-wrap: break-word;
}

/* ============================================================
   BASE
   ============================================================ */

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */

/* Alpine: hide elements until initialized */

[x-cloak] {
  display: none !important;
}

/* ============================================================
   WHY-CHOOSE ICON — bottom-to-top green fill on item hover
   ============================================================ */

.icon-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #6f8371;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.4s ease;
}

.icon-fill > * {
  position: relative;
  z-index: 1;
}

.group:hover .icon-fill::before {
  transform: scaleY(1);
}

/* Bottom-to-top green fill on the element's own hover. The fill sits
   behind the text (z-index:-1) over the base background, clipped by
   overflow:hidden, so text and layout stay unchanged. */

.fill-up-green {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.fill-up-green::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #6f8371;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.4s ease;
}

.fill-up-green:hover::before {
  transform: scaleY(1);
}

/* ============================================================
   REVEAL-ON-SCROLL (used by footer.php IntersectionObserver)
   Elements tagged `.reveal` start lowered + transparent, then
   rise and fade in when they scroll into view (observer adds `.in`).
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

/* `.in` (legacy observer) and `.in-view` (Trent Hills observer) both reveal. */

.reveal.in,
.reveal.in-view {
  opacity: 1;
  transform: none;
}

/* Fallback: never keep content hidden if JavaScript is unavailable. */

.no-js .reveal {
  opacity: 1;
  transform: none;
}

/* Staggered children within a revealed section (Trent Hills homepage). */

.stagger > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in-view .stagger > * {
  opacity: 1;
  transform: none;
}

.reveal.in-view .stagger > *:nth-child(1) {
  transition-delay: 0.05s;
}

.reveal.in-view .stagger > *:nth-child(2) {
  transition-delay: 0.12s;
}

.reveal.in-view .stagger > *:nth-child(3) {
  transition-delay: 0.19s;
}

.reveal.in-view .stagger > *:nth-child(4) {
  transition-delay: 0.26s;
}

.reveal.in-view .stagger > *:nth-child(5) {
  transition-delay: 0.33s;
}

.reveal.in-view .stagger > *:nth-child(6) {
  transition-delay: 0.40s;
}

.reveal.in-view .stagger > *:nth-child(7) {
  transition-delay: 0.47s;
}

.reveal.in-view .stagger > *:nth-child(8) {
  transition-delay: 0.54s;
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   IMAGE HOVER ZOOM — subtle, contained scale on hover.
   Only the inner image scales (transform), so layout is unaffected;
   the wrapper's overflow:hidden keeps it inside its bounds.
   ============================================================ */

.zoom-image {
  overflow: hidden;
}

.zoom-image > img {
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.zoom-image:hover > img {
  transform: scale(1.05);
}

/* ============================================================
   DIRECTIONAL ENTRANCE — images slide in from their own side as
   they enter the viewport (observer adds `.in`). Transform + opacity
   only, so no layout shift.
   ============================================================ */

/* Contain the horizontal slide so it can never add a page scrollbar.
   (#content sits below the sticky header, so this doesn't affect it.) */

#content {
  overflow-x: clip;
}

.reveal-left,
.reveal-right {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.reveal-left  {
  transform: translateX(-40px);
}

.reveal-right {
  transform: translateX(40px);
}

.reveal-left.in,
.reveal-right.in {
  opacity: 1;
  transform: none;
}

.no-js .reveal-left,
.no-js .reveal-right {
  opacity: 1;
  transform: none;
}

.screen-reader-text{
  display: none;
}

/* ============================================================
   TRENT HILLS PHARMACY — homepage + shell styles
   (ported from the static index.html <style> block so the
   WordPress build renders pixel-identically)
   ============================================================ */

/* Page container: wide, generous gutters that step down on smaller screens. */

.container-page {
  margin: 0 auto;
  max-width: 1560px;
  padding-inline: 20px;
}

.eyebrow {
  letter-spacing: 0.18em;
}

/* Hero radial glow */

/* Home hero: the first section starts from the very top of the page, behind the
   whole top header. The nav header's negative bottom margin (below) pulls this
   section up past both the utility bar (h-11 = 44px) and the nav bar; this
   padding-top adds back the utility-bar height so the hero content stays clear
   of the nav. (A negative margin here would instead collapse with the header's
   larger negative margin and be ignored.) */

body.home .section-hero {
  padding-top: 44px;
}

.hero-bg {
  background-color: #000000;
  background-image:
    radial-gradient(340px 340px at 6% 24%, rgba(37,99,235,0.16), rgba(37,99,235,0) 70%),
    radial-gradient(600px 500px at 88% 6%, rgba(220,38,38,0.10), rgba(220,38,38,0) 70%);
}

.card-gradient {
  background:
    radial-gradient(360px 300px at 88% 100%, rgba(220,38,38,0.38), rgba(220,38,38,0) 70%),
    linear-gradient(150deg, #0f2a6b 0%, #0a1b4d 62%, #0a1330 100%);
}

.cta-gradient {
  background:
    radial-gradient(460px 420px at 82% 4%, rgba(220,38,38,0.34), rgba(220,38,38,0) 68%),
    linear-gradient(115deg, #12245f 0%, #0f2a6b 48%, #14235c 100%);
}

.divider-line {
  width: 28px;
  height: 2px;
  background: #dc2626;
  border-radius: 2px;
}

/* -----------------------------------------------------------------
   Organizational Services — Stats Bar responsive columns.
   The markup carries the 2-column mobile grid (grid-cols-2). It expands
   to 4 columns at the desktop breakpoint. English switches at >=993px.
   French runs ~15-30% longer (Google Translate marks <html> with
   translated-ltr/-rtl), so it keeps the 2-column mobile layout longer,
   only switching to 4 columns at >=1280px.
   ----------------------------------------------------------------- */

@media (min-width: 993px) {
  .os-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    -moz-column-gap: 2.5rem;
         column-gap: 2.5rem;
    /* = Tailwind gap-x-10 */
  }
}

/* French only: revert to the 2-column mobile layout across 993–1279px. */

@media (min-width: 993px) and (max-width: 1279.98px) {
  html.translated-ltr .os-stats-grid,
  html.translated-rtl .os-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
    /* = Tailwind gap-x-6 */
  }
}

/* French only, below 480px: the longer French stat labels are cramped two-up, so
   stack the blocks one per row (single column). English stays 2 columns. */

@media (max-width: 479.98px) {
  html.translated-ltr .os-stats-grid,
  html.translated-rtl .os-stats-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Utility bar: below 480px the phone/address labels are hidden, so the row is
   [phone icon][pin icon] then the note text. The French note runs much longer
   ("Ouvert toute l'année…"), so tighten the gaps between the icons and before the
   note (ml-4 → 0.5rem) to give the text more room. Scoped to Google Translate's
   translated-* <html> class, so the shorter English row is unaffected. */

@media (max-width: 479.98px) {
  html.translated-ltr .section-utilitybar .ub-addr,
  html.translated-rtl .section-utilitybar .ub-addr,
  html.translated-ltr .section-utilitybar .ub-note,
  html.translated-rtl .section-utilitybar .ub-note {
    margin-left: 0.5rem;
    /* reduced from ml-4 (1rem) */
  }

  /* French note runs longer — drop it to 10px (English stays at 12px). */

  html.translated-ltr .section-utilitybar .ub-note,
  html.translated-rtl .section-utilitybar .ub-note {
    font-size: 10px;
  }
}

/* Sticky header: subtle elevation once scrolled */

#site-header.scrolled {
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.65);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Home header (front page only): a translucent "light black" bar that overlays
   the dark hero initially, turning solid black once the page is scrolled. The
   negative bottom margin cancels the header's own height so the hero sits behind
   the in-flow sticky header and the transparency reveals it. Heights match the
   inner bar (h-[76px] / md:h-[96px] / lg:h-[112px]). */

#site-header.th-header--home {
  background-color: transparent;
  margin-bottom: -120px;
  /* nav height (76) + utility bar (44) so the hero starts at the very top */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#site-header.th-header--home.scrolled {
  background-color: #08090c;
}

@media (min-width: 768px) {
  #site-header.th-header--home {
    margin-bottom: -140px;
  }

  /* 96 + 44 */
}

@media (min-width: 1024px) {
  #site-header.th-header--home {
    margin-bottom: -156px;
  }

  /* 112 + 44 */
}

/* Light default header (all pages except Home) — Figma node 237-1299.
   Same structure as the Home header, recoloured: white bar, navy utility bar
   (set in header.php), dark ink nav with a brand-blue hover, dark hamburger. */

#site-header.th-header--light {
  border-bottom: 1px solid #eef0f4;
}

#site-header.th-header--light.scrolled {
  box-shadow: 0 10px 30px -12px rgba(15, 42, 107, 0.14);
  border-bottom-color: transparent;
}

/* Top-level nav anchors (simple links + the mega-menu parents): explicit dark
   ink, brand-blue on hover. Scoped to direct children so the white dropdown
   panel's own link colours are left untouched. */

#site-header.th-header--light nav > a,
#site-header.th-header--light nav > .group > a {
  color: #0b1220;
}

#site-header.th-header--light nav > a:hover,
#site-header.th-header--light nav > .group > a:hover {
  color: #1e3a8a;
}

#site-header.th-header--light nav > .group > a:hover .nav-underline {
  color: #1e3a8a;
}

#site-header.th-header--light nav .mega-chev {
  color: #566377;
}

#site-header.th-header--light #menu-toggle .bar {
  background: #0b1220;
}

/* When the WordPress admin bar is visible (logged-in front end), drop the sticky
   header below it so the fixed admin bar doesn't cover it. Matches WP's own
   32px / 46px (<=782px) admin-bar heights. */

body.admin-bar #site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar #site-header {
    top: 46px;
  }
}

/* ---------- Fluid headings (responsive) ---------- */

.fs-h1    {
  font-size: clamp(2.5rem, 5.2vw, 4.0625rem);
}

.fs-h2    {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
}

.fs-h2-40 {
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
}

/* fs-h2 capped at 40px (vs 44px) */

.fs-h3    {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.fs-h3s   {
  font-size: clamp(1.5rem, 2.7vw, 2.125rem);
}

.fs-h2b   {
  font-size: clamp(1.875rem, 3.2vw, 2.875rem);
}

.fs-lead  {
  font-size: clamp(1.25rem, 2.1vw, 1.625rem);
}

.fs-quote {
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
}

.fs-section {
  font-size: clamp(2rem, 3.4vw, 2.875rem);
}

/* Inner-page hero headings: at/below 1366px the first-section H1 is scaled down
   (especially at 1280px and below) so it fits the narrower layout. 1366px is a
   common laptop width, so the cap includes it. Scoped to the hero heading hooks
   (ct-hero-h1 = Contact, th-hero-h1 = other inner pages) so the Home page and
   larger desktops (>=1367px) keep their original sizes. */

@media (max-width: 1366px) {
  h1.ct-hero-h1,
    h1.th-hero-h1 {
    font-size: clamp(2rem, 4.6vw, 3.25rem);
  }
}

/* ---------- Button: left-to-right hover sweep ---------- */

.btn-sweep {
  background-size: 200% 100%;
  background-position: right center;
  transition: background-position .45s ease, color .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.btn-sweep:hover {
  background-position: left center;
}

.btn-sweep svg {
  transition: transform .3s ease;
}

.btn-sweep:hover svg {
  transform: translateX(4px);
}

.sweep-red     {
  background-image: linear-gradient(to right, #b91c1c 50%, #dc2626 50%);
}

.sweep-blue    {
  background-image: linear-gradient(to right, #16296b 50%, #1e3a8a 50%);
}

.sweep-navy    {
  background-image: linear-gradient(to right, #0a1b4d 50%, #0f2a6b 50%);
}

.sweep-white   {
  background-image: linear-gradient(to right, #dbe4fb 50%, #ffffff 50%);
}

.sweep-outline {
  background-image: linear-gradient(to right, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0) 50%);
}

/* Outline button that fills brand-blue left-to-right on hover. A ::before holds
   the blue fill + white label, revealed via clip-path, while the base (dark)
   label shows on the not-yet-filled area — so the text stays readable through
   the wipe. The ::before self-clips: border-radius:inherit rounds its caps and
   clip-path drives the wipe, so the button needs NO overflow:hidden. That avoids
   the antialiasing seam ("white/blur ring") and Safari's bug where overflow:hidden
   fails to clip children to border-radius. inset:-2px makes the fill cover the
   2px border too, so on hover there is no light hairline between fill and border.
   That 2px bleed shifts the label left by 2px, so left padding is px-6 (24px) +
   2px = 26px to keep it overlaying the base label exactly.
   -webkit-clip-path is included because the CSS build does not autoprefix. */

.th-fill-sweep::before {
  content: attr(data-label);
  position: absolute;
  inset: -2px;
  display: flex;
  align-items: center;
  padding: 0 26px;
  white-space: nowrap;
  background: #1e3a8a;
  color: #fff;
  border-radius: inherit;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .45s ease;
  pointer-events: none;
}

.th-fill-sweep:hover::before {
  clip-path: inset(0 0 0 0);
}

/* text-link arrow nudge */

.link-arrow svg {
  transition: transform .3s ease;
}

.link-arrow:hover svg {
  transform: translateX(4px);
}

/* ---------- Mobile menu (off-canvas left drawer) ---------- */

.mobile-drawer {
  transform: translateX(-100%);
  transition: transform .38s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

.mobile-drawer.open {
  transform: translateX(0);
}

#menu-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

html.menu-open {
  overflow: hidden;
}

html.menu-open body {
  overflow: hidden;
}

.mobile-drawer {
  overscroll-behavior: contain;
}

#menu-toggle .bar {
  transition: transform .3s ease, opacity .3s ease;
}

#menu-toggle.open .bar-1 {
  transform: translateY(7px) rotate(45deg);
}

#menu-toggle.open .bar-2 {
  opacity: 0;
}

#menu-toggle.open .bar-3 {
  transform: translateY(-7px) rotate(-45deg);
}

/* Pharmacy Services submenu (mobile accordion chevron) */

.ph-chev {
  transition: transform .3s ease;
}

#mobile-menu details[open] .ph-chev {
  transform: rotate(180deg);
}

/* Desktop mega-menu chevron */

.group:hover .mega-chev {
  transform: rotate(180deg);
}

.mega-chev {
  transition: transform .25s ease;
}

/* ---------- Header nav: animated underline on hover ---------- */

.nav-underline {
  position: relative;
}

.nav-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: #dc2626;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s ease;
}

.nav-underline:hover::after,
.group:hover > a .nav-underline::after,
.group:hover > button .nav-underline::after {
  transform: scaleX(1);
}

/* ---------- Header nav: current (active) item ---------- */

/* The menu item for the page being viewed keeps the red underline shown (same
   look as the hover state) and adopts the hover text colour so it reads as
   "selected" at rest. Covers both simple links (the <a> is .nav-underline) and
   mega parents (an inner <span class="nav-underline">). */

#site-header nav a.is-active.nav-underline::after,
#site-header nav a.is-active .nav-underline::after {
  transform: scaleX(1);
}

#site-header.th-header--light nav > a.is-active,
#site-header.th-header--light nav > .group > a.is-active,
#site-header.th-header--light nav > .group > a.is-active .nav-underline {
  color: #1e3a8a;
}

#site-header.th-header--home nav > a.is-active,
#site-header.th-header--home nav > .group > a.is-active {
  color: #ffffff;
}

/* Current item in the mobile drawer: bolder, themed colour, red edge marker. */

#mobile-menu a.is-active,
#mobile-menu summary.is-active {
  font-weight: 600;
  box-shadow: inset 3px 0 0 #dc2626;
}

.th-header--light #mobile-menu a.is-active,
.th-header--light #mobile-menu summary.is-active {
  color: #1e3a8a;
}

.th-header--home #mobile-menu a.is-active,
.th-header--home #mobile-menu summary.is-active {
  color: #ffffff;
}

/* ---------- Testimonial Swiper ---------- */

/* Swiper Element renders in shadow DOM. Bullet size/colour are set through
   Swiper's own CSS variables (they inherit into the shadow tree) to match the
   design: small round dots, slate-300 inactive, brand-red active. */

.th-testimonials {
  display: block;
  margin-top: 1.5rem;
  --swiper-pagination-color: #dc2626;
  /* active dot */
  --swiper-pagination-bullet-inactive-color: #cbd5e1;
  /* slate-300 */
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-horizontal-gap: 4px;
}

/* Place the dots in normal flow below the slide rather than overlapping it. */

.th-testimonials::part(pagination) {
  position: static;
  margin-top: 2rem;
}

/* ---------- Footer accordion (mobile only) ---------- */

@media (max-width: 767px) {
  .footer-acc-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s ease;
  }

  .footer-acc.open > .footer-acc-panel {
    grid-template-rows: 1fr;
  }

  .footer-acc-clip {
    min-height: 0;
    overflow: hidden;
  }

  .footer-acc-list {
    padding-top: 1.25rem;
  }

  .footer-acc.open .footer-acc-chev {
    transform: rotate(180deg);
  }
}

@media (min-width: 768px) {
  .footer-acc-btn {
    pointer-events: none;
  }

  .footer-acc-list {
    margin-top: 1.25rem;
  }
}

/* ---------- iPad / tablet: slightly tighter section rhythm ----------
   Sections set their vertical padding with `md:py-/pt-/pb-[…]`, which applies at
   ≥768px — i.e. to BOTH iPad and desktop. This block trims that padding ~15% only
   in the tablet band (768–1023px, the range between Tailwind's md and lg), so
   iPad screens breathe a little less. Mobile (<768px, the base `py-[…]`) and
   desktop (≥1024px) are left exactly as designed. The padding lives either on the
   <section> itself or on an inner `.container-page`, so each rule matches both
   `section.<utility>` and `section .<utility>`; scoping to `section` keeps it off
   unrelated elements and keeps specificity above the base md: rule (this range only). */

@media (min-width: 768px) and (max-width: 1023px) {
  section.md\:py-\[80px\], section .md\:py-\[80px\] {
    padding-top: 68px;
    padding-bottom: 68px;
  }

  section.md\:py-\[72px\], section .md\:py-\[72px\] {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  section.md\:py-\[88px\], section .md\:py-\[88px\] {
    padding-top: 74px;
    padding-bottom: 74px;
  }

  section.md\:py-\[90px\], section .md\:py-\[90px\] {
    padding-top: 76px;
    padding-bottom: 76px;
  }

  section.md\:py-\[76px\], section .md\:py-\[76px\] {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  section.md\:py-\[70px\], section .md\:py-\[70px\] {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  section.md\:py-\[64px\], section .md\:py-\[64px\] {
    padding-top: 54px;
    padding-bottom: 54px;
  }

  section.md\:py-\[60px\], section .md\:py-\[60px\] {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  section.md\:py-\[84px\], section .md\:py-\[84px\] {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  section.md\:py-\[56px\], section .md\:py-\[56px\] {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  section.md\:py-\[52px\], section .md\:py-\[52px\] {
    padding-top: 44px;
    padding-bottom: 44px;
  }

  section.md\:py-\[48px\], section .md\:py-\[48px\] {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  section.md\:pt-\[110px\], section .md\:pt-\[110px\] {
    padding-top: 92px;
  }

  section.md\:pt-\[80px\],  section .md\:pt-\[80px\]  {
    padding-top: 68px;
  }

  section.md\:pt-\[70px\],  section .md\:pt-\[70px\]  {
    padding-top: 60px;
  }

  section.md\:pt-\[68px\],  section .md\:pt-\[68px\]  {
    padding-top: 58px;
  }

  section.md\:pt-\[56px\],  section .md\:pt-\[56px\]  {
    padding-top: 48px;
  }

  section.md\:pt-\[32px\],  section .md\:pt-\[32px\]  {
    padding-top: 28px;
  }

  section.md\:pb-\[96px\],  section .md\:pb-\[96px\]  {
    padding-bottom: 82px;
  }

  section.md\:pb-\[80px\],  section .md\:pb-\[80px\]  {
    padding-bottom: 68px;
  }

  section.md\:pb-\[72px\],  section .md\:pb-\[72px\]  {
    padding-bottom: 60px;
  }

  section.md\:pb-\[32px\],  section .md\:pb-\[32px\]  {
    padding-bottom: 28px;
  }
}

.placeholder\:text-slate-400::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.placeholder\:text-slate-400::placeholder {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.placeholder\:text-slateink\/70::-moz-placeholder {
  color: rgb(86 99 119 / 0.7);
}

.placeholder\:text-slateink\/70::placeholder {
  color: rgb(86 99 119 / 0.7);
}

.hover\:-translate-y-1:hover {
  --tw-translate-y: -0.25rem;
  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));
}

.hover\:border-brand-blue:hover {
  --tw-border-opacity: 1;
  border-color: rgb(30 58 138 / var(--tw-border-opacity, 1));
}

.hover\:border-brand-blue\/30:hover {
  border-color: rgb(30 58 138 / 0.3);
}

.hover\:border-brand-red:hover {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}

.hover\:bg-black\/5:hover {
  background-color: rgb(0 0 0 / 0.05);
}

.hover\:bg-black\/\[0\.04\]:hover {
  background-color: rgb(0 0 0 / 0.04);
}

.hover\:bg-brand-navy:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(15 42 107 / var(--tw-bg-opacity, 1));
}

.hover\:bg-brand-red:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}

.hover\:bg-white\/5:hover {
  background-color: rgb(255 255 255 / 0.05);
}

.hover\:text-brand-blue:hover {
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}

.hover\:text-ink:hover {
  --tw-text-opacity: 1;
  color: rgb(11 18 32 / var(--tw-text-opacity, 1));
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:text-white\/80:hover {
  color: rgb(255 255 255 / 0.8);
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:no-underline:hover {
  text-decoration-line: none;
}

.hover\:opacity-70:hover {
  opacity: 0.7;
}

.hover\:shadow-\[0_20px_50px_-24px_rgba\(15\2c 42\2c 107\2c 0\.25\)\]:hover {
  --tw-shadow: 0 20px 50px -24px rgba(15,42,107,0.25);
  --tw-shadow-colored: 0 20px 50px -24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:border-brand-blue:focus {
  --tw-border-opacity: 1;
  border-color: rgb(30 58 138 / var(--tw-border-opacity, 1));
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-2:focus {
  --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(2px + 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);
}

.focus\:ring-brand-blue\/15:focus {
  --tw-ring-color: rgb(30 58 138 / 0.15);
}

.focus\:ring-brand-blue\/20:focus {
  --tw-ring-color: rgb(30 58 138 / 0.2);
}

.focus\:ring-brand-red\/30:focus {
  --tw-ring-color: rgb(220 38 38 / 0.3);
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:opacity-60:disabled {
  opacity: 0.6;
}

.group:hover .group-hover\:pointer-events-auto {
  pointer-events: auto;
}

.group:hover .group-hover\:visible {
  visibility: visible;
}

.group:hover .group-hover\:block {
  display: block;
}

.group:hover .group-hover\:hidden {
  display: none;
}

.group:hover .group-hover\:translate-y-0 {
  --tw-translate-y: 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));
}

.group:hover .group-hover\:scale-105 {
  --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));
}

.group:hover .group-hover\:-scale-x-105 {
  --tw-scale-x: -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));
}

.group:hover .group-hover\:scale-y-105 {
  --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));
}

.group:hover .group-hover\:bg-brand-red {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:font-semibold {
  font-weight: 600;
}

.group\/i:hover .group-hover\/i\:text-brand-blue {
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-brand-blue {
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-brand-blue\/40 {
  color: rgb(30 58 138 / 0.4);
}

.group:hover .group-hover\:text-brand-red {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.group.is-active .group-\[\.is-active\]\:block {
  display: block;
}

.group.is-active .group-\[\.is-active\]\:hidden {
  display: none;
}

.group.is-active .group-\[\.is-active\]\:bg-brand-red {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.group.is-active .group-\[\.is-active\]\:bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.group.is-active .group-\[\.is-active\]\:text-brand-red {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.group.is-active .group-\[\.is-active\]\:text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.group.is-active .group-\[\.is-active\]\:text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}

.has-\[\:checked\]\:border-brand-blue:has(:checked) {
  --tw-border-opacity: 1;
  border-color: rgb(30 58 138 / var(--tw-border-opacity, 1));
}

.has-\[\:checked\]\:bg-brand-blue:has(:checked) {
  --tw-bg-opacity: 1;
  background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1));
}

.has-\[\:checked\]\:text-white:has(:checked) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (max-width: 479px) {
  .max-\[479px\]\:text-\[12px\] {
    font-size: 12px;
  }
}

@media (min-width: 480px) {
  .min-\[480px\]\:flex-row {
    flex-direction: row;
  }

  .min-\[480px\]\:items-start {
    align-items: flex-start;
  }

  .min-\[480px\]\:items-center {
    align-items: center;
  }

  .min-\[480px\]\:justify-between {
    justify-content: space-between;
  }

  .min-\[480px\]\:gap-4 {
    gap: 1rem;
  }

  .min-\[480px\]\:gap-\[10px\] {
    gap: 10px;
  }
}

@media (min-width: 640px) {
  .sm\:inline-flex {
    display: inline-flex;
  }

  .sm\:h-\[280px\] {
    height: 280px;
  }

  .sm\:h-\[440px\] {
    height: 440px;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-\[128px\] {
    font-size: 128px;
  }

  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 768px) {
  .md\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .md\:mt-14 {
    margin-top: 3.5rem;
  }

  .md\:inline {
    display: inline;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-\[96px\] {
    height: 96px;
  }

  .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\:justify-start {
    justify-content: flex-start;
  }

  .md\:gap-12 {
    gap: 3rem;
  }

  .md\:border-0 {
    border-width: 0px;
  }

  .md\:p-10 {
    padding: 2.5rem;
  }

  .md\:p-9 {
    padding: 2.25rem;
  }

  .md\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .md\:px-\[56px\] {
    padding-left: 56px;
    padding-right: 56px;
  }

  .md\:px-\[64px\] {
    padding-left: 64px;
    padding-right: 64px;
  }

  .md\:py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .md\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .md\:py-\[120px\] {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .md\:py-\[52px\] {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .md\:py-\[64px\] {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .md\:py-\[70px\] {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .md\:py-\[72px\] {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .md\:py-\[76px\] {
    padding-top: 76px;
    padding-bottom: 76px;
  }

  .md\:py-\[80px\] {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .md\:py-\[84px\] {
    padding-top: 84px;
    padding-bottom: 84px;
  }

  .md\:py-\[88px\] {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  .md\:py-\[90px\] {
    padding-top: 90px;
    padding-bottom: 90px;
  }

  .md\:pb-0 {
    padding-bottom: 0px;
  }

  .md\:pb-\[32px\] {
    padding-bottom: 32px;
  }

  .md\:pb-\[72px\] {
    padding-bottom: 72px;
  }

  .md\:pb-\[80px\] {
    padding-bottom: 80px;
  }

  .md\:pb-\[96px\] {
    padding-bottom: 96px;
  }

  .md\:pt-\[110px\] {
    padding-top: 110px;
  }

  .md\:pt-\[32px\] {
    padding-top: 32px;
  }

  .md\:pt-\[56px\] {
    padding-top: 56px;
  }

  .md\:pt-\[68px\] {
    padding-top: 68px;
  }

  .md\:pt-\[70px\] {
    padding-top: 70px;
  }

  .md\:pt-\[80px\] {
    padding-top: 80px;
  }

  .md\:text-left {
    text-align: left;
  }

  .md\:text-\[168px\] {
    font-size: 168px;
  }

  .md\:text-\[20px\] {
    font-size: 20px;
  }

  .md\:text-\[40px\] {
    font-size: 40px;
  }
}

@media (min-width: 992px) {
  .min-\[992px\]\:ml-8 {
    margin-left: 2rem;
  }
}

@media (min-width: 1024px) {
  .lg\:absolute {
    position: absolute;
  }

  .lg\:inset-0 {
    inset: 0px;
  }

  .lg\:inset-y-0 {
    top: 0px;
    bottom: 0px;
  }

  .lg\:left-auto {
    left: auto;
  }

  .lg\:right-0 {
    right: 0px;
  }

  .lg\:order-1 {
    order: 1;
  }

  .lg\:order-2 {
    order: 2;
  }

  .lg\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .lg\:mb-2 {
    margin-bottom: 0.5rem;
  }

  .lg\:mt-2 {
    margin-top: 0.5rem;
  }

  .lg\:mt-5 {
    margin-top: 1.25rem;
  }

  .lg\:mt-6 {
    margin-top: 1.5rem;
  }

  .lg\:block {
    display: block;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:h-\[112px\] {
    height: 112px;
  }

  .lg\:h-\[350px\] {
    height: 350px;
  }

  .lg\:h-\[45px\] {
    height: 45px;
  }

  .lg\:h-\[482px\] {
    height: 482px;
  }

  .lg\:h-full {
    height: 100%;
  }

  .lg\:min-h-full {
    min-height: 100%;
  }

  .lg\:w-\[42\%\] {
    width: 42%;
  }

  .lg\:w-\[46\%\] {
    width: 46%;
  }

  .lg\:w-\[60\%\] {
    width: 60%;
  }

  .lg\:max-w-\[920px\] {
    max-width: 920px;
  }

  .lg\:flex-1 {
    flex: 1 1 0%;
  }

  .lg\:shrink-0 {
    flex-shrink: 0;
  }

  .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-\[1\.4fr_1fr_1fr_1\.3fr\] {
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:items-start {
    align-items: flex-start;
  }

  .lg\:items-end {
    align-items: flex-end;
  }

  .lg\:items-center {
    align-items: center;
  }

  .lg\:justify-start {
    justify-content: flex-start;
  }

  .lg\:justify-between {
    justify-content: space-between;
  }

  .lg\:gap-10 {
    gap: 2.5rem;
  }

  .lg\:gap-16 {
    gap: 4rem;
  }

  .lg\:gap-\[104px\] {
    gap: 104px;
  }

  .lg\:gap-\[56px\] {
    gap: 56px;
  }

  .lg\:gap-\[64px\] {
    gap: 64px;
  }

  .lg\:gap-\[72px\] {
    gap: 72px;
  }

  .lg\:gap-\[80px\] {
    gap: 80px;
  }

  .lg\:justify-self-end {
    justify-self: end;
  }

  .lg\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .lg\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .lg\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .lg\:py-\[104px\] {
    padding-top: 104px;
    padding-bottom: 104px;
  }

  .lg\:py-\[74px\] {
    padding-top: 74px;
    padding-bottom: 74px;
  }

  .lg\:py-\[80px\] {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .lg\:py-\[88px\] {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  .lg\:py-\[92px\] {
    padding-top: 92px;
    padding-bottom: 92px;
  }

  .lg\:pb-\[100px\] {
    padding-bottom: 100px;
  }

  .lg\:pb-\[90px\] {
    padding-bottom: 90px;
  }

  .lg\:pl-2 {
    padding-left: 0.5rem;
  }

  .lg\:pl-6 {
    padding-left: 1.5rem;
  }

  .lg\:pt-10 {
    padding-top: 2.5rem;
  }

  .lg\:pt-3 {
    padding-top: 0.75rem;
  }

  .lg\:pt-\[130px\] {
    padding-top: 130px;
  }

  .lg\:pt-\[64px\] {
    padding-top: 64px;
  }

  .lg\:pt-\[80px\] {
    padding-top: 80px;
  }

  .lg\:text-left {
    text-align: left;
  }

  .lg\:text-\[18px\] {
    font-size: 18px;
  }

  .lg\:text-\[20px\] {
    font-size: 20px;
  }

  .lg\:text-\[40px\] {
    font-size: 40px;
  }

  .lg\:text-\[46px\] {
    font-size: 46px;
  }
}

@media (min-width: 1280px) {
  .xl\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .xl\:ml-0 {
    margin-left: 0px;
  }

  .xl\:flex {
    display: flex;
  }

  .xl\:hidden {
    display: none;
  }

  .xl\:w-\[494px\] {
    width: 494px;
  }

  .xl\:w-\[56\%\] {
    width: 56%;
  }

  .xl\:w-\[634px\] {
    width: 634px;
  }

  .xl\:grid-cols-\[1fr_632px\] {
    grid-template-columns: 1fr 632px;
  }

  .xl\:grid-cols-\[1fr_633px\] {
    grid-template-columns: 1fr 633px;
  }

  .xl\:grid-cols-\[508px_1fr\] {
    grid-template-columns: 508px 1fr;
  }
}

@media (min-width: 1580px) {
  .min-\[1580px\]\:w-\[295px\] {
    width: 295px;
  }

  .min-\[1580px\]\:w-auto {
    width: auto;
  }

  .min-\[1580px\]\:flex-row {
    flex-direction: row;
  }

  .min-\[1580px\]\:items-center {
    align-items: center;
  }

  .min-\[1580px\]\:justify-between {
    justify-content: space-between;
  }
}

.\[\&\.is-active\]\:border-brand-red.is-active {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}

.\[\&\.is-active\]\:bg-brand-red.is-active {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
  display: none;
}

.\[\&\>iframe\]\:h-full>iframe {
  height: 100%;
}

.\[\&\>iframe\]\:w-full>iframe {
  width: 100%;
}

.\[\&\>iframe\]\:border-0>iframe {
  border-width: 0px;
}