/*!
Theme Name: Reece Builders
Theme URI: https://underscoretw.com/
Author: SmartSites
Author URI: https://underscoretw.com/
Description: A custom WordPress theme based on _tw
Version: 0.1.0
Tested up to: 6.2
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: Reece Builders
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Reece Builders is based on _tw https://underscoretw.com/, (C) 2021-2024 Greg Sullivan
_tw is distributed under the terms of the GNU GPL v2 or later.

_tw is based on Underscores https://underscores.me/ and Varia https://github.com/Automattic/themes/tree/master/varia, (C) 2012-2023 Automattic, Inc.
Underscores and Varia are distributed under the terms of the GNU GPL v2 or later.
*/

/**
 * The line above injects the WordPress file header. It needs to be first,
 * before this comment.
 */

/**
 * This injects custom `@font-face` rules.
 */

/**
 * Custom `@font-face` rules
 *
 * These will be added immediately before Tailwind’s `base` layer.
 */

/**
 * This injects Tailwind's base styles and any base styles registered by
 * plugins, then adds custom base styles.
 */

/*! tailwindcss v3.4.10 | 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: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 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] {
  display: none;
}

*, ::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:  ;
}

/**
 * Custom styles to immediately follow Tailwind’s `base` layer
 *
 * “Add things like base typography styles [or] opinionated global resets.”
 *
 * — from https://tailwindcss.com/docs/plugins#adding-base-styles
 */

/**
 * This uses the background and foreground colors declared in the
 * `theme.json` file and is applied both to the frontend and in the block
 * editor.
*/

body {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --tw-text-opacity: 1;
  color: rgb(64 64 64 / var(--tw-text-opacity));
}

/* In-page anchor targets (#id links, Gravity Forms' #gf_N anchor) land
   below the fixed sticky header instead of behind it. Values track the
   header's pinned height at each breakpoint (see header-content.php). */

html {
  scroll-padding-top: 6rem;
}

@media (min-width: 1024px) {
  html {
    scroll-padding-top: 9.5rem;
  }
}

a {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

a:hover {
  opacity: 0.7;
}

/* CTA pill buttons (see components.css' `.btn` component) manage their own
   hover state by swapping colors, so the fade above -- meant for plain text
   links -- would otherwise wash them out against a photo or colored panel. */

a.btn:hover {
  opacity: 1;
}

/**
 * This injects Tailwind's component classes and any component classes
 * registered by plugins, then adds custom component classes.
 *
 * The `@import-glob` line imports all CSS files from the `components`
 * directory (except for `components.css`, which is imported on the following
 * line). This is meant to simplify the process of integrating styles from
 * JavaScript components or WordPress plugins.
 */

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}

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

.prose {
  color: var(--tw-prose-body);
}

.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose :where([class~="lead"], [class~="is-style-lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}

.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}

.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-bold);
  font-weight: 600;
}

.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
}

.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  font-weight: 400;
  color: var(--tw-prose-counters);
}

.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  color: var(--tw-prose-bullets);
}

.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}

.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
  border-bottom: none;
}

.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-inline-start-width: 0.25rem;
  border-inline-start-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-inline-start: 1em;
  border-left-style: solid;
}

.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: open-quote;
}

.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: close-quote;
}

.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}

.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 900;
  color: inherit;
}

.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}

.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 800;
  color: inherit;
}

.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}

.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}

.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-inline-end: 0.375em;
  padding-bottom: 0.1875em;
  padding-inline-start: 0.375em;
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: "`";
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: "`";
}

.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.875em;
}

.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.9em;
}

.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-inline-end: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-inline-start: 1.1428571em;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: none;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: none;
}

.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  width: 100%;
  table-layout: auto;
  text-align: start;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}

.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}

.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}

.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 0;
}

.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: baseline;
}

.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}

.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: top;
}

.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}

.prose {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: 17 24 39;
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: 255 255 255;
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}

.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  padding-inline-start: 1.625em;
}

.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.5714286em;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}

.prose :where(blockquote > cite):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-body);
  font-style: normal;
  font-weight: 400;
}

.prose :where(blockquote > cite):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: "\2014";
}

.prose :where(table.has-fixed-layout):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  table-layout: fixed;
  width: 100%;
}

.prose-neutral {
  --tw-prose-body: #404040;
  --tw-prose-headings: #171717;
  --tw-prose-lead: #525252;
  --tw-prose-links: #171717;
  --tw-prose-bold: #171717;
  --tw-prose-counters: #737373;
  --tw-prose-bullets: #d4d4d4;
  --tw-prose-hr: #e5e5e5;
  --tw-prose-quotes: #171717;
  --tw-prose-quote-borders: #e5e5e5;
  --tw-prose-captions: #737373;
  --tw-prose-kbd: #171717;
  --tw-prose-kbd-shadows: 23 23 23;
  --tw-prose-code: #171717;
  --tw-prose-pre-code: #e5e5e5;
  --tw-prose-pre-bg: #262626;
  --tw-prose-th-borders: #d4d4d4;
  --tw-prose-td-borders: #e5e5e5;
  --tw-prose-invert-body: #d4d4d4;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #a3a3a3;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #a3a3a3;
  --tw-prose-invert-bullets: #525252;
  --tw-prose-invert-hr: #404040;
  --tw-prose-invert-quotes: #f5f5f5;
  --tw-prose-invert-quote-borders: #404040;
  --tw-prose-invert-captions: #a3a3a3;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: 255 255 255;
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d4d4d4;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #525252;
  --tw-prose-invert-td-borders: #404040;
}

/**
 * Custom styles for Gravity Forms, Search Forms, and Comment Forms.
 */

.gform_wrapper .gform_fields {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

.gform_wrapper .gfield {
  grid-column: span 12 / span 12;
}

@media not all and (min-width: 768px) {
  .gform_wrapper .gfield[data-field-class~="ss-span-6"],
.gform_wrapper .gfield.ss-span-6 {
    grid-column: span 12 / span 12;
  }
}

@media (min-width: 768px) {
  .gform_wrapper .gfield[data-field-class~="ss-span-6"],
.gform_wrapper .gfield.ss-span-6 {
    grid-column: span 6 / span 6;
  }
}

.gform_wrapper .ginput_container input[type="text"],
.gform_wrapper .ginput_container input[type="email"],
.gform_wrapper .ginput_container input[type="tel"],
.gform_wrapper .ginput_container select,
.gform_wrapper .ginput_container textarea {
  width: 100%;
  border-radius: 1rem;
  border-width: 1px;
  border-color: rgb(34 48 99 / 0.1);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 1rem;
  font-family: Lato, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  color: rgb(34 48 99 / 0.8);
}

.gform_wrapper .ginput_container select {
  /* appearance-none drops the browser's own native dropdown arrow (its
       rendering box doesn't line up with the rounded/bordered input
       styling above, so it was showing up detached to the right of the
       field) in favor of the custom chevron below. Reserve extra space so
       long option text doesn't run under it. */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 2.5rem;
}

.gform_wrapper .ginput_container_select {
  position: relative;
}

.gform_wrapper .ginput_container_select::after {
  content: '';
  pointer-events: none;
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 0.625rem;
  height: 0.625rem;
  --tw-translate-y: -50%;
  --tw-rotate: 45deg;
  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));
  border-bottom-width: 2px;
  border-right-width: 2px;
  border-color: rgb(34 48 99 / 0.6);
}

/* Custom dropdown built by customSelects() in script.js, replacing the
   native <select> options popup (browser/OS-drawn, can't be reliably
   restyled -- some browsers even render it broken once appearance:none is
   applied above). `ss-select-enhanced` is only added once the JS has
   actually run and built the replacement UI, so a select is never hidden
   without something usable taking its place; if the script fails to load,
   the native select above is what renders instead. The old chevron is
   suppressed only for enhanced selects since the new trigger button draws
   its own. */

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

.gform_wrapper .ginput_container_select:has(select.ss-select-enhanced)::after {
  content: none;
}

.gform_wrapper .ss-custom-select {
  position: relative;
}

.gform_wrapper .ss-custom-select-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 1rem;
  border-width: 1px;
  border-color: rgb(34 48 99 / 0.1);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 1rem;
  text-align: left;
  font-family: Lato, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  color: rgb(34 48 99 / 0.8);
}

.gform_wrapper .ss-custom-select-trigger span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gform_wrapper .ss-custom-select-trigger::after {
  content: '';
  width: 0.625rem;
  height: 0.625rem;
  flex-shrink: 0;
  --tw-rotate: 45deg;
  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));
  border-bottom-width: 2px;
  border-right-width: 2px;
  border-color: rgb(34 48 99 / 0.6);
}

.gform_wrapper .ss-custom-select-list {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 100%;
  z-index: 60;
  margin-top: 0.5rem;
  max-height: 15rem;
  overflow-y: auto;
  border-radius: 1rem;
  border-width: 1px;
  border-color: rgb(34 48 99 / 0.1);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 0.5rem;
  font-family: Lato, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  color: rgb(34 48 99 / 0.8);
  --tw-shadow: 0px 4px 16px 0px rgba(11, 32, 68, 0.12);
  --tw-shadow-colored: 0px 4px 16px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.gform_wrapper .ss-custom-select-option {
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 0.75rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.gform_wrapper .ss-custom-select-option:hover,
.gform_wrapper .ss-custom-select-option[aria-selected="true"] {
  background-color: rgb(34 48 99 / 0.05);
  --tw-text-opacity: 1;
  color: rgb(34 48 99 / var(--tw-text-opacity));
}

.gform_wrapper .ginput_container textarea {
  /* Gravity Forms always renders textarea rows="10" regardless of field
       settings -- an explicit height (not just min-height) is needed to
       actually constrain the rendered size instead of just flooring it. */
  height: 8rem;
}

.gform_wrapper .gfield_label {
  margin-bottom: 0.5rem;
  display: block;
  font-family: Lato, sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: currentColor;
}

.gform_wrapper .gform_footer {
  margin-top: 0.5rem;
}

.gform_wrapper .gform_button {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(34 48 99 / var(--tw-bg-opacity));
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 2rem;
  padding-right: 0.75rem;
  font-family: Lato, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.gform_wrapper .validation_error,
.gform_wrapper .gfield_validation_message {
  font-family: Lato, sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(238 0 19 / var(--tw-text-opacity));
}

/* The brand red fails contrast on the navy form panels (ss_contact_split,
   ss_contact_cta over a photo) -- use a light red there instead. Keyed on
   the .ss-form-on-dark marker class set by those templates, not on
   `.bg-primary`, for the same circular-dependency reason as
   .form-underline--on-dark below. */

.ss-form-on-dark .gform_wrapper .validation_error,
.ss-form-on-dark .gform_wrapper .gfield_validation_message,
.ss-form-on-dark .gform_wrapper .gform_validation_errors,
.ss-form-on-dark .gform_wrapper .gform_submission_error,
.ss-form-on-dark .gform_wrapper .gfield_required {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity));
}

.form-underline .gform_wrapper .ginput_container input,
.form-underline .gform_wrapper .ginput_container select,
.form-underline .gform_wrapper .ginput_container textarea {
  border-radius: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-top-width: 0px;
  border-bottom-color: rgb(34 48 99 / 0.1);
  background-color: transparent;
  padding-left: 0px;
  padding-right: 0px;
  color: rgb(34 48 99 / 0.8);
}

.form-underline .gform_wrapper .ginput_container select {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 2rem;
}

.form-underline .gform_wrapper .ss-custom-select-trigger {
  border-radius: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-top-width: 0px;
  border-bottom-color: rgb(34 48 99 / 0.1);
  background-color: transparent;
  padding-left: 0px;
  padding-right: 0px;
  color: rgb(34 48 99 / 0.8);
}

/* When form-underline sits on a dark background (e.g. ss_contact_split's
   request-form panel), the input text and underline need to be light
   instead of the default dark navy. A dedicated marker class is used here
   (rather than matching on `.text-white`) because @apply-ing a utility from
   within a rule whose own selector contains that same utility class name
   trips Tailwind's circular-dependency check. */

.form-underline.form-underline--on-dark .gform_wrapper .ginput_container input,
.form-underline.form-underline--on-dark .gform_wrapper .ginput_container select,
.form-underline.form-underline--on-dark .gform_wrapper .ginput_container textarea {
  border-bottom-color: rgb(255 255 255 / 0.2);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.form-underline.form-underline--on-dark .gform_wrapper .ginput_container input::-moz-placeholder, .form-underline.form-underline--on-dark .gform_wrapper .ginput_container textarea::-moz-placeholder {
  color: rgb(255 255 255 / 0.6);
  opacity: 1;
}

.form-underline.form-underline--on-dark .gform_wrapper .ginput_container input::placeholder,
.form-underline.form-underline--on-dark .gform_wrapper .ginput_container textarea::placeholder {
  color: rgb(255 255 255 / 0.6);
  opacity: 1;
}

/* The submit button is bg-primary/text-white by default (for use on a white
   page background); on a bg-primary panel that's invisible, so invert it
   the same way every other CTA button on a dark section is inverted. */

.form-underline.form-underline--on-dark .gform_wrapper .gform_button {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(34 48 99 / var(--tw-text-opacity));
}

.form-underline.form-underline--on-dark .gform_wrapper .ginput_container_select::after {
  border-color: rgb(255 255 255 / 0.6);
}

.form-underline.form-underline--on-dark .gform_wrapper .ss-custom-select-trigger {
  border-bottom-color: rgb(255 255 255 / 0.2);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.form-underline.form-underline--on-dark .gform_wrapper .ss-custom-select-trigger::after {
  border-color: rgb(255 255 255 / 0.6);
}

/* Gravity Forms adds `hidden_label` to a field when its per-field "Label
   Visibility" is set to Hidden in the form editor, but doesn't ship any
   CSS for it here (this theme supplies all Gravity Forms styling itself),
   so without this rule the label still rendered at full size. Kept
   `sr-only` rather than removed outright so it still reads for screen
   readers -- the field's own placeholder text (set in the same admin
   panel) carries the visual label instead. */

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

/* File upload fields: native <input type="file"> has no placeholder to
   carry the visual label the way other hidden_label fields do, so this
   turns the field into a dropzone-style box instead. GF nests the "Accepted
   file types" notice inside the same .ginput_container_fileupload as the
   input, so the dropzone itself is drawn as a ::before block (in normal
   flow, height h-36) rather than sized via the container directly -- that
   way the notice text still flows below it instead of being centered over
   or clipped by it. The label is un-hidden and absolutely repositioned over
   that ::before box (with an upload icon added via its own ::before) instead
   of appearing above the input, and the native input is stretched invisibly
   over the same area so the whole box stays clickable, not just the
   browser's own small "Choose File" button. */

.gform_wrapper .gfield--type-fileupload {
  position: relative;
}

.gform_wrapper .gfield--type-fileupload .ginput_container_fileupload {
  position: relative;
}

.gform_wrapper .gfield--type-fileupload .ginput_container_fileupload::before {
  content: '';
  margin-bottom: 0.5rem;
  display: block;
  height: 9rem;
  border-radius: 1rem;
  border-width: 1px;
  border-color: rgb(34 48 99 / 0.1);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.gform_wrapper .gfield--type-fileupload.hidden_label .gfield_label {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  pointer-events: none;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 10;
  margin-bottom: 0px;
  display: flex;
  height: 9rem;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  font-family: Lato, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  color: rgb(34 48 99 / 0.6);
}

.gform_wrapper .gfield--type-fileupload .gfield_label::before {
  content: '';
  width: 1.75rem;
  height: 1.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23223063' stroke-opacity='0.4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 8l5-5 5 5M4 17v2a2 2 0 002 2h12a2 2 0 002-2v-2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.gform_wrapper .gfield--type-fileupload input[type="file"] {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 20;
  height: 9rem;
  width: 100%;
  cursor: pointer;
  opacity: 0;
}

.gform_wrapper .gfield--type-fileupload .gfield_description {
  display: block;
  text-align: center;
  font-family: Lato, sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(34 48 99 / 0.6);
}

.gform_wrapper .ginput_container input::-moz-placeholder, .gform_wrapper .ginput_container textarea::-moz-placeholder {
  color: rgb(34 48 99 / 0.8);
  opacity: 1;
}

.gform_wrapper .ginput_container input::placeholder,
.gform_wrapper .ginput_container textarea::placeholder {
  color: rgb(34 48 99 / 0.8);
  opacity: 1;
}

/* form-notched (ss_contact_split.php's dark request-form panel): a
   fieldset/legend-style input where the field's own <label> sits
   centered on the pill's border line instead of above it. `.gfield` is
   the label's positioning parent -- since `.gfield_label` and
   `.ginput_container` are siblings, taking the label out of flow with
   `absolute` lets `.ginput_container` flow flush to the top of `.gfield`,
   so `top-0 -translate-y-1/2` centers the label exactly on the input's
   top border. The label's own bg-primary background paints over that
   border to fake the "notch" cutout. */

/* Vertical gap only: every field here spans all 12 columns (see below), and
   a 32px column gap x 11 gutters = 352px of fixed width that can't shrink,
   which pushed the form past the viewport on phones. */

.form-notched .gform_wrapper .gform_fields {
  -moz-column-gap: 0px;
       column-gap: 0px;
  row-gap: 2rem;
}

/* This panel always stacks fields in a single column, even though
   ss-span-6 (set per-field in the Gravity Forms admin to pair fields 2-up
   for the homepage's boxed form) may be set on the same shared fields --
   the extra class here out-specifies the base ss-span-6 rule at every
   breakpoint. */

.form-notched .gform_wrapper .gfield.ss-span-6 {
  grid-column: span 12 / span 12;
}

.form-notched .gform_wrapper .gfield {
  position: relative;
}

.form-notched .gform_wrapper .gfield_label {
  /* z-10: .ginput_container_select is `position: relative` (for the
       chevron below) and, being a positioned element that comes after the
       label in the DOM, would otherwise paint over the label at the exact
       seam where they meet -- drawing the select's border-top through the
       label instead of the label's background masking it. An explicit
       z-index puts the label in its own stacking layer above that. */
  position: absolute;
  left: 1.25rem;
  top: 0px;
  z-index: 10;
  margin-bottom: 0px;
  --tw-translate-y: -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));
  --tw-bg-opacity: 1;
  background-color: rgb(34 48 99 / var(--tw-bg-opacity));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-family: Lato, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.form-notched .gform_wrapper .ginput_container input,
.form-notched .gform_wrapper .ginput_container select,
.form-notched .gform_wrapper .ginput_container textarea {
  height: 52px;
  width: 100%;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
  background-color: transparent;
  padding-left: 1rem;
  padding-right: 1rem;
  font-family: Lato, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.form-notched .gform_wrapper .ginput_container input::-moz-placeholder, .form-notched .gform_wrapper .ginput_container textarea::-moz-placeholder {
  color: rgb(255 255 255 / 0.4);
  opacity: 1;
}

.form-notched .gform_wrapper .ginput_container input::placeholder,
.form-notched .gform_wrapper .ginput_container textarea::placeholder {
  color: rgb(255 255 255 / 0.4);
  opacity: 1;
}

/* Multi-line message box: same outline, but a real text area instead of
   the 52px pill (a rounded-full textarea collapses into a single line). */

.form-notched .gform_wrapper .ginput_container textarea {
  height: 8rem;
  border-radius: 1.5rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* "* indicates required fields" sits directly above the first field, whose
   label is lifted half its height above the input's border (see
   .gfield_label above) -- give it room so the two don't overlap. The
   error banner above it gets the same breathing room. */

.form-notched .gform_wrapper .gform_required_legend,
.form-notched .gform_wrapper .gform_validation_errors {
  margin-bottom: 2rem;
}

.form-notched .gform_wrapper .ginput_container_select::after {
  border-color: rgb(255 255 255 / 0.8);
}

.form-notched .gform_wrapper .ss-custom-select-trigger {
  height: 52px;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
  background-color: transparent;
  padding-left: 1rem;
  padding-right: 1rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.form-notched .gform_wrapper .ss-custom-select-trigger::after {
  border-color: rgb(255 255 255 / 0.8);
}

/* The listbox popup stays light/readable even on this dark panel -- only
   the closed trigger button needs to match the pill styling above. */

.form-notched .gform_wrapper .ss-custom-select-list {
  color: rgb(34 48 99 / 0.8);
}

.form-notched .gform_wrapper .gform_button {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(34 48 99 / var(--tw-text-opacity));
}

.form-notched .gform_wrapper .gform_footer {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}

/**
 * Custom styles to immediately follow Tailwind’s `components` layer
 *
 * “Add more opinionated, complex classes like buttons, form controls, alerts,
 * etc; the sort of pre-built components you often see in other frameworks that
 * you might need to override with utility classes.”
 *
 * — from https://tailwindcss.com/docs/plugins#adding-components
 */

/**
 * Post title styles
 *
 * These will be applied to all headings with a `page-title` or `entry-title`
 * class on the frontend and to the post title in the block editor. Used by
 * the plain content-page fallback (pages with no flexible-content rows, e.g.
 * Privacy Policy / Terms and Conditions) -- matched to the theme's brand
 * typography instead of Tailwind Typography's generic defaults.
 */

.page-title,
.entry-title {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5rem;
  max-width: 80rem;
  font-family: Roboto Slab, serif;
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(34 48 99 / var(--tw-text-opacity));
}

@media (min-width: 992px) {
  .page-title,
.entry-title {
    font-size: 3rem;
    line-height: 1;
  }
}

/**
 * Layout styles for centered content areas
 *
 * If you are controlling the width of your content area with styles applied
 * to its container, you can delete the following styles whose selectors begin
 * with `.page-content >` and `.entry-content >`. For more details, please see
 * the following:
 *
 * https://make.wordpress.org/core/2021/06/29/on-layout-and-content-width-in-wordpress-5-8/
 */

.page-content > *,
.entry-content > * {
  /* Content width from the `theme.json` file */
  margin-left: auto;
  margin-right: auto;
  max-width: 80rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 2rem;
  padding-right: 0.75rem;
  font-family: Lato, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  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: 300ms;
}

.btn-primary {
  --tw-border-opacity: 1;
  border-color: rgb(34 48 99 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(34 48 99 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.btn-primary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(34 48 99 / var(--tw-text-opacity));
}

.btn-outline {
  --tw-border-opacity: 1;
  border-color: rgb(34 48 99 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(34 48 99 / var(--tw-text-opacity));
}

.btn-outline:hover {
  --tw-border-opacity: 1;
  border-color: rgb(34 48 99 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(34 48 99 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.btn-primary.btn-light {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(34 48 99 / var(--tw-text-opacity));
}

.btn-primary.btn-light:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(34 48 99 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.btn-outline.btn-light {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.btn-outline.btn-light:hover {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(34 48 99 / var(--tw-text-opacity));
}

.entry-content > .alignwide {
  /* Wide width from the `theme.json` file */
  max-width: 90rem;
}

.entry-content > .alignfull {
  max-width: none;
}

/* Terms and Privacy (content-page.php sets .ss-legal-content on the
   <article> for those two pages only): long-form legal text reads better
   in a wider column than the default max-w-content (640px, tuned for
   shorter fallback pages) -- widen both the title and body to match. */

.ss-legal-content .entry-title,
.ss-legal-content .entry-content > * {
  max-width: 56rem;
}

/*
 * Descendant (not direct-child) selectors, and also matched against
 * `.ss-post-body` (the single-post template's content wrapper) -- `wpautop`
 * wraps a standalone <img> in its own <p>, one level deeper than a direct
 * child, so a `>` combinator here would never match.
 */

.entry-content .alignleft,
.ss-post-body .alignleft {
  float: left;
  margin-right: 2rem;
}

.entry-content .alignright,
.ss-post-body .alignright {
  float: right;
  margin-left: 2rem;
}

/*
 * aligned images carry an inline `style="max-width:...px"` (from the block
 * editor / WP media library), which beats any stylesheet rule of equal
 * priority -- so on narrow screens they don't shrink and blow out the
 * layout. !important is required here to win against that inline style.
 */

@media (max-width: 639px) {
  .entry-content .alignleft,
	.entry-content .alignright,
	.ss-post-body .alignleft,
	.ss-post-body .alignright {
    float: none !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ss_marquee_ticker components */

@keyframes ss-marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.ss-marquee-ticker__track {
  animation: ss-marquee-scroll 30s linear infinite;
}

.ss-marquee-ticker__text {
  /* rgba(34, 48, 99, *) below is the primary color (#223063) with alpha applied,
	   since background-clip: text gradients can't reference Tailwind's opacity utilities. */
  background-image: linear-gradient(to right, #223063 0%, #223063 15%, rgba(34, 48, 99, 0.15) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ss_trusted_brands slider */

.ss-trusted-brands__track {
  animation: ss-marquee-scroll 25s linear infinite;
}

/* ss_testimonial_cards: horizontal scroll-snap slider, scrollbar hidden
   since real touch devices swipe it natively. .ss-drag-scroll (shared with
   any future horizontal slider) adds mouse click-and-drag support via
   ss.dragToScroll() in javascript/script.js, for testing a mobile layout
   in a resized desktop browser where a plain mouse drag wouldn't scroll it. */

#ss-testimonial-track {
  scrollbar-width: none;
}

#ss-testimonial-track::-webkit-scrollbar {
  display: none;
}

.ss-drag-scroll {
  cursor: grab;
}

.ss-drag-scroll.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  /* scroll-smooth (scroll-behavior:smooth) is on the track for touch/snap
	   settling, but it also eases every scrollLeft write JS makes while
	   dragging -- turning that into a laggy chase instead of a 1:1 drag.
	   Force instant scrolling only for the duration of the drag. */
  scroll-behavior: auto;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Mobile header menu: wp_nav_menu doesn't expose a class hook on the <a>
   tags themselves, so give each link a proper block-level touch target here. */

#primary-menu-mobile > li > a {
  display: block;
  border-radius: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

/* Primary nav dropdowns (depth 2 in header-content.php): WP core already
   adds .menu-item-has-children to parent <li>s and .sub-menu to the nested
   <ul>, so no custom Walker is needed -- just style those default hooks.
   Desktop shows the submenu as a hover/focus dropdown anchored under the
   parent link; a CSS-only chevron (border rotated 45deg) flags which items
   have children since wp_nav_menu doesn't render one itself. */

#primary-menu .menu-item-has-children {
  position: relative;
}

#primary-menu .menu-item-has-children > a {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

#primary-menu .menu-item-has-children > a::after {
  content: '';
  margin-top: -2px;
  width: 0.375rem;
  height: 0.375rem;
  --tw-rotate: 45deg;
  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));
  border-bottom-width: 2px;
  border-right-width: 2px;
  border-color: rgb(34 48 99 / 0.6);
}

/* top-full + pt-3 (not mt-3): the submenu's box has to sit flush against
   the parent <li> with no gap, otherwise the margin is dead space that
   belongs to neither element -- moving the mouse straight down through it
   drops out of `:hover` before ever reaching the dropdown. Padding keeps
   the same visual offset while staying inside the hoverable box. */

#primary-menu .sub-menu {
  visibility: hidden;
  position: absolute;
  left: 0px;
  top: 100%;
  z-index: 60;
  min-width: 190px;
  white-space: nowrap;
  border-radius: 1rem;
  border-width: 1px;
  border-color: rgb(34 48 99 / 0.1);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 0.5rem;
  padding-top: 0.75rem;
  opacity: 0;
  --tw-shadow: 0px 4px 20px 0px rgba(11, 32, 68, 0.16);
  --tw-shadow-colored: 0px 4px 20px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

#primary-menu .sub-menu > li > a {
  display: block;
  border-radius: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

#primary-menu .menu-item-has-children:hover > .sub-menu,
#primary-menu .menu-item-has-children:focus-within > .sub-menu {
  visibility: visible;
  opacity: 1;
}

/* Mobile nav dropdowns: the whole menu already sits inside a <details>
   disclosure (see header-content.php) for the hamburger itself, but nested
   submenus need their own open/closed state -- SS_Nav_Walker_Mobile (see
   inc/class-ss-nav-walker-mobile.php) appends a .submenu-toggle button
   after each parent link, and javascript/script.js toggles .is-open on the
   parent <li> when it's clicked. Collapsed (hidden) is the default state. */

#primary-menu-mobile > li.menu-item-has-children {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

#primary-menu-mobile > li.menu-item-has-children > a {
  flex: 1 1 0%;
}

#primary-menu-mobile .submenu-toggle {
  display: flex;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
}

#primary-menu-mobile .submenu-toggle__icon {
  position: relative;
  display: block;
  width: 0.625rem;
  height: 0.625rem;
  --tw-rotate: 45deg;
  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));
  border-bottom-width: 2px;
  border-right-width: 2px;
  border-color: rgb(255 255 255 / 0.6);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

#primary-menu-mobile li.is-open > .submenu-toggle .submenu-toggle__icon {
  --tw-rotate: 225deg;
  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));
}

#primary-menu-mobile .sub-menu {
  margin-top: 0.25rem;
  display: none;
  width: 100%;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 1rem;
}

#primary-menu-mobile li.is-open > .sub-menu {
  display: flex;
}

#primary-menu-mobile .sub-menu > li > a {
  display: block;
  border-radius: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* Mobile nav panel: the closed <details> only hides its content via
   content-visibility, which still lays the `fixed` panel out inside the
   <details> box -- it pushed the page sideways on narrow screens (408px on a
   390px viewport on /contact-us/). display:none removes it from layout and
   from the tab order until the menu is actually opened. */

#masthead details:not([open]) > div {
  display: none;
}

/* Sticky header: starts `absolute` (scrolls with the page, overlaying the
   hero at the top). nav() in javascript/script.js adds .stickyHeader past
   the scroll threshold, switching it to `fixed` so it pins to the viewport.
   The top padding is also zeroed so the pill sits flush against the screen
   edge instead of leaving a gap that shows scrolled content underneath. */

#masthead.stickyHeader {
  position: fixed;
  padding-top: 0px;
}

/* Service-area page nav (template-parts/layout/service-area-nav.php): the
   "All Locations" index is a native <details> disclosure (no JS needed) --
   just hides the browser's default marker and rotates the same chevron
   shape used by the mobile submenu toggle above, based on the [open]
   attribute instead of a JS-toggled class. */

.ss-location-index summary {
  list-style: none;
}

.ss-location-index summary::-webkit-details-marker {
  display: none;
}

.ss-location-index-chevron {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  --tw-rotate: 45deg;
  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));
  border-bottom-width: 2px;
  border-right-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(34 48 99 / var(--tw-border-opacity));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.ss-location-index[open] .ss-location-index-chevron {
  --tw-rotate: 225deg;
  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));
}

/* ss_faq_tabs: active-tab label style + panel visibility. Driven by :has()
   scoped to the section rather than Tailwind's `peer`/`peer-checked`,
   because the labels sit inside their own flex-wrap row (one nesting level
   deeper than the inputs), which breaks `peer-checked`'s direct-sibling
   requirement. Supports up to 6 tabs (ss_faq_tabs.php enforces the cap). */

#ss-faq-tabs:has(.ss-faq-tab-input-0:checked) .ss-faq-tab-label-0,
#ss-faq-tabs:has(.ss-faq-tab-input-1:checked) .ss-faq-tab-label-1,
#ss-faq-tabs:has(.ss-faq-tab-input-2:checked) .ss-faq-tab-label-2,
#ss-faq-tabs:has(.ss-faq-tab-input-3:checked) .ss-faq-tab-label-3,
#ss-faq-tabs:has(.ss-faq-tab-input-4:checked) .ss-faq-tab-label-4,
#ss-faq-tabs:has(.ss-faq-tab-input-5:checked) .ss-faq-tab-label-5 {
  --tw-border-opacity: 1;
  border-color: rgb(34 48 99 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(34 48 99 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

#ss-faq-tabs:has(.ss-faq-tab-input-0:checked) .ss-faq-tab-panel-0,
#ss-faq-tabs:has(.ss-faq-tab-input-1:checked) .ss-faq-tab-panel-1,
#ss-faq-tabs:has(.ss-faq-tab-input-2:checked) .ss-faq-tab-panel-2,
#ss-faq-tabs:has(.ss-faq-tab-input-3:checked) .ss-faq-tab-panel-3,
#ss-faq-tabs:has(.ss-faq-tab-input-4:checked) .ss-faq-tab-panel-4,
#ss-faq-tabs:has(.ss-faq-tab-input-5:checked) .ss-faq-tab-panel-5 {
  display: flex;
}

/* ss_gallery_grid: same :has()-driven approach as ss_faq_tabs above, for a
   category-filterable project grid instead of category-filterable FAQ
   content. Each item carries one "show-N" class per tab it should appear
   under (always including the catch-all tab 0), computed in PHP. */

#ss-gallery-grid:has(.ss-gallery-tab-input-0:checked) .ss-gallery-tab-label-0,
#ss-gallery-grid:has(.ss-gallery-tab-input-1:checked) .ss-gallery-tab-label-1,
#ss-gallery-grid:has(.ss-gallery-tab-input-2:checked) .ss-gallery-tab-label-2,
#ss-gallery-grid:has(.ss-gallery-tab-input-3:checked) .ss-gallery-tab-label-3,
#ss-gallery-grid:has(.ss-gallery-tab-input-4:checked) .ss-gallery-tab-label-4,
#ss-gallery-grid:has(.ss-gallery-tab-input-5:checked) .ss-gallery-tab-label-5 {
  --tw-border-opacity: 1;
  border-color: rgb(34 48 99 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(34 48 99 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

#ss-gallery-grid:has(.ss-gallery-tab-input-0:checked) .ss-gallery-item-show-0,
#ss-gallery-grid:has(.ss-gallery-tab-input-1:checked) .ss-gallery-item-show-1,
#ss-gallery-grid:has(.ss-gallery-tab-input-2:checked) .ss-gallery-item-show-2,
#ss-gallery-grid:has(.ss-gallery-tab-input-3:checked) .ss-gallery-item-show-3,
#ss-gallery-grid:has(.ss-gallery-tab-input-4:checked) .ss-gallery-item-show-4,
#ss-gallery-grid:has(.ss-gallery-tab-input-5:checked) .ss-gallery-item-show-5 {
  display: flex;
}

/* ss_blog_grid: same :has()-driven filterable-tabs approach as
   ss_gallery_grid above, for a category-filterable blog article grid. */

#ss-blog-grid:has(.ss-blog-tab-input-0:checked) .ss-blog-tab-label-0,
#ss-blog-grid:has(.ss-blog-tab-input-1:checked) .ss-blog-tab-label-1,
#ss-blog-grid:has(.ss-blog-tab-input-2:checked) .ss-blog-tab-label-2,
#ss-blog-grid:has(.ss-blog-tab-input-3:checked) .ss-blog-tab-label-3,
#ss-blog-grid:has(.ss-blog-tab-input-4:checked) .ss-blog-tab-label-4,
#ss-blog-grid:has(.ss-blog-tab-input-5:checked) .ss-blog-tab-label-5 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 48 99 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

#ss-blog-grid:has(.ss-blog-tab-input-0:checked) .ss-blog-card-show-0,
#ss-blog-grid:has(.ss-blog-tab-input-1:checked) .ss-blog-card-show-1,
#ss-blog-grid:has(.ss-blog-tab-input-2:checked) .ss-blog-card-show-2,
#ss-blog-grid:has(.ss-blog-tab-input-3:checked) .ss-blog-card-show-3,
#ss-blog-grid:has(.ss-blog-tab-input-4:checked) .ss-blog-card-show-4,
#ss-blog-grid:has(.ss-blog-tab-input-5:checked) .ss-blog-card-show-5 {
  display: flex;
}

/* CTA arrow-circle icon: nudges from its default up-right heading to point
   due right on hover, as a "let's go" cue. Matched by filename rather than a
   shared class since every button/link across the site already renders this
   exact <img> the same way -- one rule covers all of them. Covers both <a>
   CTAs and <button> (Gravity Forms submit buttons are rebuilt as a <button>
   with this same icon by ss_theme_gform_submit_button_icon()). */

a:hover img[src$="icon-arrow-circle.svg"],
button:hover img[src$="icon-arrow-circle.svg"] {
  transform: rotate(45deg);
}

img[src$="icon-arrow-circle.svg"] {
  transition: transform 0.3s ease;
}

/**
 * This injects Tailwind's utility classes and any utility classes registered
 * by plugins, then adds custom utility classes.
 */

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

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.inset-x-0 {
  left: 0px;
  right: 0px;
}

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

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

.-right-1 {
  right: -0.25rem;
}

.bottom-0 {
  bottom: 0px;
}

.left-0 {
  left: 0px;
}

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

.left-4 {
  left: 1rem;
}

.left-\[calc\(\(100\%-6rem\)\/6\+59px\)\] {
  left: calc((100% - 6rem) / 6 + 59px);
}

.left-\[calc\(50\%\+59px\)\] {
  left: calc(50% + 59px);
}

.right-\[calc\(\(100\%-6rem\)\/6\+59px\)\] {
  right: calc((100% - 6rem) / 6 + 59px);
}

.right-\[calc\(50\%\+59px\)\] {
  right: calc(50% + 59px);
}

.top-0 {
  top: 0px;
}

.top-1 {
  top: 0.25rem;
}

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

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

.z-ss-60 {
  z-index: 60;
}

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

.my-12 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.-ml-3 {
  margin-left: -0.75rem;
}

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

.-mt-72 {
  margin-top: -18rem;
}

.mb-20 {
  margin-bottom: 5rem;
}

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

.mb-9 {
  margin-bottom: 2.25rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

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

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

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

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

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

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

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

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

.mt-3\.5 {
  margin-top: 0.875rem;
}

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

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

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

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

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

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

.block {
  display: block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

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

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}

.size-1 {
  width: 0.25rem;
  height: 0.25rem;
}

.size-10 {
  width: 2.5rem;
  height: 2.5rem;
}

.size-12 {
  width: 3rem;
  height: 3rem;
}

.size-14 {
  width: 3.5rem;
  height: 3.5rem;
}

.size-2 {
  width: 0.5rem;
  height: 0.5rem;
}

.size-20 {
  width: 5rem;
  height: 5rem;
}

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

.size-5 {
  width: 1.25rem;
  height: 1.25rem;
}

.size-6 {
  width: 1.5rem;
  height: 1.5rem;
}

.size-7 {
  width: 1.75rem;
  height: 1.75rem;
}

.size-9 {
  width: 2.25rem;
  height: 2.25rem;
}

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

.size-\[86px\] {
  width: 86px;
  height: 86px;
}

.size-full {
  width: 100%;
  height: 100%;
}

.h-0\.5 {
  height: 0.125rem;
}

.h-10 {
  height: 2.5rem;
}

.h-12 {
  height: 3rem;
}

.h-3 {
  height: 0.75rem;
}

.h-4 {
  height: 1rem;
}

.h-40 {
  height: 10rem;
}

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

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

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

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

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

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

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

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.max-h-0 {
  max-height: 0px;
}

.max-h-full {
  max-height: 100%;
}

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

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

.min-h-\[36\.5625rem\] {
  min-height: 36.5625rem;
}

.min-h-\[43\.75rem\] {
  min-height: 43.75rem;
}

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

.min-h-ss-hero {
  min-height: 50rem;
}

.w-0\.5 {
  width: 0.125rem;
}

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

.w-3 {
  width: 0.75rem;
}

.w-5 {
  width: 1.25rem;
}

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

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

.w-auto {
  width: auto;
}

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

.w-full {
  width: 100%;
}

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

.max-w-2xl {
  max-width: 42rem;
}

.max-w-4xl {
  max-width: 56rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.max-w-none {
  max-width: none;
}

.max-w-sm {
  max-width: 24rem;
}

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

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

.origin-center {
  transform-origin: center;
}

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

.cursor-pointer {
  cursor: pointer;
}

.touch-none {
  touch-action: none;
}

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

.snap-x {
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}

.snap-mandatory {
  --tw-scroll-snap-strictness: mandatory;
}

.snap-start {
  scroll-snap-align: start;
}

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

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

.columns-1 {
  -moz-columns: 1;
       columns: 1;
}

.break-inside-avoid {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

.grid-flow-row {
  grid-auto-flow: row;
}

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

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

.grid-rows-\[0fr\] {
  grid-template-rows: 0fr;
}

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

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

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

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

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

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

.justify-start {
  justify-content: flex-start;
}

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

.justify-between {
  justify-content: space-between;
}

.gap-0 {
  gap: 0px;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-12 {
  gap: 3rem;
}

.gap-16 {
  gap: 4rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-9 {
  gap: 2.25rem;
}

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

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

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

.gap-x-12 {
  -moz-column-gap: 3rem;
       column-gap: 3rem;
}

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

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

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

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

.gap-y-8 {
  row-gap: 2rem;
}

.divide-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-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-primary\/10 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(34 48 99 / 0.1);
}

.divide-white\/20 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(255 255 255 / 0.2);
}

.overflow-hidden {
  overflow: hidden;
}

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

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

.scroll-smooth {
  scroll-behavior: smooth;
}

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

.rounded {
  border-radius: 0.25rem;
}

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

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

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

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

.border {
  border-width: 1px;
}

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

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

.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}

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

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

.border-primary {
  --tw-border-opacity: 1;
  border-color: rgb(34 48 99 / var(--tw-border-opacity));
}

.border-primary\/10 {
  border-color: rgb(34 48 99 / 0.1);
}

.border-primary\/20 {
  border-color: rgb(34 48 99 / 0.2);
}

.border-tertiary {
  --tw-border-opacity: 1;
  border-color: rgb(238 0 19 / var(--tw-border-opacity));
}

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

.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}

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

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

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

.bg-brand-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(238 240 247 / var(--tw-bg-opacity));
}

.bg-gray-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
}

.bg-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(34 48 99 / var(--tw-bg-opacity));
}

.bg-primary\/5 {
  background-color: rgb(34 48 99 / 0.05);
}

.bg-tertiary {
  --tw-bg-opacity: 1;
  background-color: rgb(238 0 19 / var(--tw-bg-opacity));
}

.bg-transparent {
  background-color: transparent;
}

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

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

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

.from-black {
  --tw-gradient-from: #000 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary\/0 {
  --tw-gradient-from: rgb(34 48 99 / 0) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 48 99 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary\/10 {
  --tw-gradient-from: rgb(34 48 99 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 48 99 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary\/20 {
  --tw-gradient-from: rgb(34 48 99 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 48 99 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-black\/0 {
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
}

.to-primary\/0 {
  --tw-gradient-to: rgb(34 48 99 / 0) var(--tw-gradient-to-position);
}

.to-primary\/10 {
  --tw-gradient-to: rgb(34 48 99 / 0.1) var(--tw-gradient-to-position);
}

.to-60\% {
  --tw-gradient-to-position: 60%;
}

.to-\[40\%\] {
  --tw-gradient-to-position: 40%;
}

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

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

.p-0 {
  padding: 0px;
}

.p-1 {
  padding: 0.25rem;
}

.p-10 {
  padding: 2.5rem;
}

.p-16 {
  padding: 4rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-4 {
  padding: 1rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

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

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

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

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

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

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

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

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

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

.py-9 {
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}

.py-ss-100 {
  padding-top: 6.25rem;
  padding-bottom: 6.25rem;
}

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

.pb-12 {
  padding-bottom: 3rem;
}

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

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

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

.pb-72 {
  padding-bottom: 18rem;
}

.pl-24 {
  padding-left: 6rem;
}

.pl-6 {
  padding-left: 1.5rem;
}

.pr-2 {
  padding-right: 0.5rem;
}

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

.pt-32 {
  padding-top: 8rem;
}

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

.pt-ss-150 {
  padding-top: 9.375rem;
}

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

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

.font-primary {
  font-family: Lato, sans-serif;
}

.font-secondary {
  font-family: Roboto Slab, serif;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

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

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

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

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

.text-\[5rem\] {
  font-size: 5rem;
}

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

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

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-ss-130 {
  font-size: 8.125rem;
  line-height: 1;
}

.text-ss-84 {
  font-size: 5.25rem;
  line-height: 4.5rem;
}

.font-black {
  font-weight: 900;
}

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

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

.not-italic {
  font-style: normal;
}

.leading-6 {
  line-height: 1.5rem;
}

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

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

.leading-ss-133 {
  line-height: 1.333;
}

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

.text-\[\#FBBC05\] {
  --tw-text-opacity: 1;
  color: rgb(251 188 5 / var(--tw-text-opacity));
}

.text-primary {
  --tw-text-opacity: 1;
  color: rgb(34 48 99 / var(--tw-text-opacity));
}

.text-primary\/20 {
  color: rgb(34 48 99 / 0.2);
}

.text-primary\/40 {
  color: rgb(34 48 99 / 0.4);
}

.text-primary\/60 {
  color: rgb(34 48 99 / 0.6);
}

.text-primary\/70 {
  color: rgb(34 48 99 / 0.7);
}

.text-primary\/80 {
  color: rgb(34 48 99 / 0.8);
}

.text-tertiary {
  --tw-text-opacity: 1;
  color: rgb(238 0 19 / var(--tw-text-opacity));
}

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

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

.opacity-0 {
  opacity: 0;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-ss-card {
  --tw-shadow: 0px 4px 16px 0px rgba(11, 32, 68, 0.12);
  --tw-shadow-colored: 0px 4px 16px 0px 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-ss-card-sm {
  --tw-shadow: 0px 4px 8px 0px rgba(11, 32, 68, 0.12);
  --tw-shadow-colored: 0px 4px 8px 0px 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-ss-nav {
  --tw-shadow: 0px 4px 20px 0px rgba(11, 32, 68, 0.16);
  --tw-shadow-colored: 0px 4px 20px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.brightness-0 {
  --tw-brightness: brightness(0);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
  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-\[grid-template-rows\] {
  transition-property: grid-template-rows;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[max-height\2c gap\2c opacity\] {
  transition-property: max-height,gap,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

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

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

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

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

.\[background\:linear-gradient\(243deg\2c rgba\(0\2c 0\2c 0\2c 0\.00\)_17\.12\%\2c rgba\(0\2c 0\2c 0\2c 0\.40\)_42\.24\%\2c rgba\(0\2c 0\2c 0\2c 0\.50\)_70\.01\%\2c rgba\(0\2c 0\2c 0\2c 0\.50\)_94\.9\%\)\] {
  background: linear-gradient(243deg,rgba(0,0,0,0.00) 17.12%,rgba(0,0,0,0.40) 42.24%,rgba(0,0,0,0.50) 70.01%,rgba(0,0,0,0.50) 94.9%);
}

/**
 * Custom styles to immediately follow Tailwind’s `utilities` layer
 *
 * Add your own utility classes to this theme. Complex utility classes should
 * be added using Tailwind’s plugin system:
 *
 * https://tailwindcss.com/docs/plugins#adding-utilities
 */

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

.placeholder\:text-primary\/50::-moz-placeholder {
  color: rgb(34 48 99 / 0.5);
}

.placeholder\:text-primary\/50::placeholder {
  color: rgb(34 48 99 / 0.5);
}

.first\:pl-0:first-child {
  padding-left: 0px;
}

.first\:pt-0:first-child {
  padding-top: 0px;
}

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

.last\:pr-0:last-child {
  padding-right: 0px;
}

.hover\:border-primary\/30:hover {
  border-color: rgb(34 48 99 / 0.3);
}

.hover\:text-primary:hover {
  --tw-text-opacity: 1;
  color: rgb(34 48 99 / var(--tw-text-opacity));
}

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

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

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

.group\/loadmore[open] .group-open\/loadmore\:hidden {
  display: none;
}

.group\/mobilenav[open] .group-open\/mobilenav\:-translate-y-\[7px\] {
  --tw-translate-y: -7px;
  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\/mobilenav[open] .group-open\/mobilenav\:translate-y-\[7px\] {
  --tw-translate-y: 7px;
  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\/mobilenav[open] .group-open\/mobilenav\:-rotate-45 {
  --tw-rotate: -45deg;
  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\/mobilenav[open] .group-open\/mobilenav\:rotate-45 {
  --tw-rotate: 45deg;
  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\/mobilenav[open] .group-open\/mobilenav\:opacity-0 {
  opacity: 0;
}

.group[open] .group-open\:opacity-0 {
  opacity: 0;
}

.group:hover .group-hover\:max-h-40 {
  max-height: 10rem;
}

.group:hover .group-hover\:gap-4 {
  gap: 1rem;
}

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

.group\/faq:has(details[open]) .group-has-\[details\[open\]\]\/faq\:grid-rows-\[1fr\] {
  grid-template-rows: 1fr;
}

.prose-headings\:font-secondary :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-family: Roboto Slab, serif;
}

.prose-headings\:text-primary :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  --tw-text-opacity: 1;
  color: rgb(34 48 99 / var(--tw-text-opacity));
}

.prose-h2\:font-secondary :is(:where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-family: Roboto Slab, serif;
}

.prose-h2\:text-primary :is(:where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  --tw-text-opacity: 1;
  color: rgb(34 48 99 / var(--tw-text-opacity));
}

.prose-p\:font-primary :is(:where(p):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-family: Lato, sans-serif;
}

.prose-p\:text-primary\/80 :is(:where(p):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  color: rgb(34 48 99 / 0.8);
}

.prose-a\:text-primary :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  --tw-text-opacity: 1;
  color: rgb(34 48 99 / var(--tw-text-opacity));
}

.prose-strong\:text-primary :is(:where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  --tw-text-opacity: 1;
  color: rgb(34 48 99 / var(--tw-text-opacity));
}

.prose-li\:font-primary :is(:where(li):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-family: Lato, sans-serif;
}

.prose-li\:text-primary\/80 :is(:where(li):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  color: rgb(34 48 99 / 0.8);
}

.prose-img\:rounded-2xl :is(:where(img):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  border-radius: 1rem;
}

@media (min-width: 576px) {
  .sm\:block {
    display: block;
  }

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

  .sm\:w-auto {
    width: auto;
  }

  .sm\:min-w-\[326px\] {
    min-width: 326px;
  }

  .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\:flex-wrap {
    flex-wrap: wrap;
  }

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

  .sm\:justify-center {
    justify-content: center;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:gap-x-12 {
    -moz-column-gap: 3rem;
         column-gap: 3rem;
  }

  .sm\:gap-x-24 {
    -moz-column-gap: 6rem;
         column-gap: 6rem;
  }

  .sm\:divide-x > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-x-reverse: 0;
    border-right-width: calc(1px * var(--tw-divide-x-reverse));
    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  }

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

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

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

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

  .sm\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

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

  .sm\:text-\[7rem\] {
    font-size: 7rem;
  }

  .sm\:first\:pl-0:first-child {
    padding-left: 0px;
  }

  .sm\:last\:pr-0:last-child {
    padding-right: 0px;
  }
}

@media (min-width: 768px) {
  .md\:columns-2 {
    -moz-columns: 2;
         columns: 2;
  }

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

  .md\:p-16 {
    padding: 4rem;
  }

  .md\:pb-8 {
    padding-bottom: 2rem;
  }

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

  .md\:text-\[9rem\] {
    font-size: 9rem;
  }
}

@media (min-width: 992px) {
  .lg\:order-1 {
    order: 1;
  }

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

  .lg\:my-16 {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }

  .lg\:mb-56 {
    margin-bottom: 14rem;
  }

  .lg\:mt-16 {
    margin-top: 4rem;
  }

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:h-20 {
    height: 5rem;
  }

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

  .lg\:w-\[calc\(\(100\%-3rem\)\/3\)\] {
    width: calc((100% - 3rem) / 3);
  }

  .lg\:w-auto {
    width: auto;
  }

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

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

  .lg\:columns-3 {
    -moz-columns: 3;
         columns: 3;
  }

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

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

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

  .lg\:grid-cols-\[1fr_373px\] {
    grid-template-columns: 1fr 373px;
  }

  .lg\:grid-cols-\[347px_1fr_1fr_347px\] {
    grid-template-columns: 347px 1fr 1fr 347px;
  }

  .lg\:grid-cols-\[504fr_728fr\] {
    grid-template-columns: 504fr 728fr;
  }

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

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

  .lg\:flex-nowrap {
    flex-wrap: nowrap;
  }

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

  .lg\:justify-between {
    justify-content: space-between;
  }

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

  .lg\:gap-x-16 {
    -moz-column-gap: 4rem;
         column-gap: 4rem;
  }

  .lg\:gap-x-36 {
    -moz-column-gap: 9rem;
         column-gap: 9rem;
  }

  .lg\:gap-y-8 {
    row-gap: 2rem;
  }

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

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

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

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

  .lg\:pb-16 {
    padding-bottom: 4rem;
  }

  .lg\:pb-40 {
    padding-bottom: 10rem;
  }

  .lg\:pl-12 {
    padding-left: 3rem;
  }

  .lg\:pr-4 {
    padding-right: 1rem;
  }

  .lg\:pt-44 {
    padding-top: 11rem;
  }

  .lg\:text-\[10rem\] {
    font-size: 10rem;
  }

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

  .lg\:text-ss-42 {
    font-size: 2.625rem;
    line-height: 3.125rem;
  }

  .lg\:text-ss-64 {
    font-size: 4rem;
    line-height: 4.5rem;
  }

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

@media (min-width: 1200px) {
  .xl\:my-20 {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }

  .xl\:mt-20 {
    margin-top: 5rem;
  }

  .xl\:pb-20 {
    padding-bottom: 5rem;
  }
}

@media (min-width: 1310px) {
  .\32xl\:my-24 {
    margin-top: 6rem;
    margin-bottom: 6rem;
  }

  .\32xl\:mt-24 {
    margin-top: 6rem;
  }

  .\32xl\:pb-24 {
    padding-bottom: 6rem;
  }
}

.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
  display: none;
}

.\[\&\:not\(\:last-child\)\]\:border-b:not(:last-child) {
  border-bottom-width: 1px;
}