/*
! tailwindcss v3.4.0 | 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 */
  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,
[type='button'],
[type='reset'],
[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:  ;
}

::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:  ;
}
.font-primary {
    font-family: var(--font-base, "Palatino Linotype", serif);
  }
.fluid-fs {
    --max-fs: var(--tp-text-base);
    --min-fs: var(--tp-text-base-min);

    --slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));

    --min-fs-px: calc(var(--min-fs) * 1px);
    --max-fs-px: calc(var(--max-fs) * 1px);
    --fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));

    font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
  }
.heading1 {
    --max-fs: var(--tp-text-base);
    --min-fs: var(--tp-text-base-min);

    --slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));

    --min-fs-px: calc(var(--min-fs) * 1px);
    --max-fs-px: calc(var(--max-fs) * 1px);
    --fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));

    font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));

    --max-fs: var(--tp-text-h1);
    --min-fs: var(--tp-text-h1-min);
    line-height: 1.5;
  }
.heading2 {
    --max-fs: var(--tp-text-base);
    --min-fs: var(--tp-text-base-min);

    --slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));

    --min-fs-px: calc(var(--min-fs) * 1px);
    --max-fs-px: calc(var(--max-fs) * 1px);
    --fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));

    font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));

    --max-fs: var(--tp-text-h2);
    --min-fs: var(--tp-text-h2-min);
    line-height: 1.5;
  }
.heading3 {
    --max-fs: var(--tp-text-base);
    --min-fs: var(--tp-text-base-min);

    --slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));

    --min-fs-px: calc(var(--min-fs) * 1px);
    --max-fs-px: calc(var(--max-fs) * 1px);
    --fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));

    font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));

    --max-fs: var(--tp-text-h3);
    --min-fs: var(--tp-text-h3-min);
    line-height: 1.25;
  }
.heading4 {
    --max-fs: var(--tp-text-base);
    --min-fs: var(--tp-text-base-min);

    --slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));

    --min-fs-px: calc(var(--min-fs) * 1px);
    --max-fs-px: calc(var(--max-fs) * 1px);
    --fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));

    font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));

    --max-fs: var(--tp-text-h4);
    --min-fs: var(--tp-text-h4-min);
    line-height: 1.25;
  }
.heading5 {
    --max-fs: var(--tp-text-base);
    --min-fs: var(--tp-text-base-min);

    --slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));

    --min-fs-px: calc(var(--min-fs) * 1px);
    --max-fs-px: calc(var(--max-fs) * 1px);
    --fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));

    font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));

    --max-fs: var(--tp-text-h5);
    --min-fs: var(--tp-text-h5-min);
    line-height: 1.5;
  }
.heading6 {
    --max-fs: var(--tp-text-base);
    --min-fs: var(--tp-text-base-min);

    --slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));

    --min-fs-px: calc(var(--min-fs) * 1px);
    --max-fs-px: calc(var(--max-fs) * 1px);
    --fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));

    font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));

    --max-fs: var(--tp-text-h6);
    --min-fs: var(--tp-text-h6-min);
    line-height: 1.5;
  }
.text-body-1 {
    --max-fs: var(--tp-text-base);
    --min-fs: var(--tp-text-base-min);

    --slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));

    --min-fs-px: calc(var(--min-fs) * 1px);
    --max-fs-px: calc(var(--max-fs) * 1px);
    --fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));

    font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));

    --max-fs: var(--tp-text-body-1);
    --min-fs: var(--tp-text-body-1-min);
    line-height: 1.5;
  }
.text-body-2 {
    --max-fs: var(--tp-text-base);
    --min-fs: var(--tp-text-base-min);

    --slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));

    --min-fs-px: calc(var(--min-fs) * 1px);
    --max-fs-px: calc(var(--max-fs) * 1px);
    --fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));

    font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));

    --max-fs: var(--tp-text-body-2);
    --min-fs: var(--tp-text-body-2-min);
    line-height: 1.5;
  }
.text-body-3 {
    --max-fs: var(--tp-text-base);
    --min-fs: var(--tp-text-base-min);

    --slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));

    --min-fs-px: calc(var(--min-fs) * 1px);
    --max-fs-px: calc(var(--max-fs) * 1px);
    --fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));

    font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));

    --max-fs: var(--tp-text-body-3);
    --min-fs: var(--tp-text-body-3-min);
    line-height: 1.5;
  }
.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;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.isolate {
  isolation: isolate;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.block {
  display: block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.table {
  display: table;
}
.\!grid {
  display: grid !important;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.min-h-screen {
  min-height: 100vh;
}
.w-full {
  width: 100%;
}
.flex-shrink {
  flex-shrink: 1;
}
.grow {
  flex-grow: 1;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer {
  cursor: pointer;
}
.resize {
  resize: both;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.text-wrap {
  text-wrap: wrap;
}
.rounded {
  border-radius: 0.25rem;
}
.border {
  border-width: 1px;
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
.bg-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(117 133 146 / var(--tw-bg-opacity));
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.font-bold {
  font-weight: 700;
}
.uppercase {
  text-transform: uppercase;
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.underline {
  text-decoration-line: underline;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.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);
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.blur {
  --tw-blur: blur(8px);
  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);
}
.backdrop-filter {
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.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;
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
/* Third Party Libraries */
/**
 * Swiper 11.0.7
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2024 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: February 27, 2024
 */
@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}
:root{--swiper-theme-color:#007aff}
:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}
.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}
.swiper-vertical>.swiper-wrapper{flex-direction:column}
.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}
.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}
.swiper-horizontal{touch-action:pan-y}
.swiper-vertical{touch-action:pan-x}
.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}
.swiper-slide-invisible-blank{visibility:hidden}
.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}
.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}
.swiper-backface-hidden .swiper-slide{transform:translateZ(0);backface-visibility:hidden}
.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}
.swiper-3d .swiper-wrapper{transform-style:preserve-3d}
.swiper-3d{perspective:1200px}
.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}
.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}
.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}
.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}
.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}
.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}
.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}
.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}
.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}
.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}
.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}
.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}
.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}
.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}
.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}
.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}
.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}
.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}
.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}
.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}
.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}
.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}
.swiper-lazy-preloader-black{--swiper-preloader-color:#000}
@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}
.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}
.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}
.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}
:root{--swiper-navigation-size:44px}
.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}
.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}
.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}
.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}
.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;transform-origin:center}
.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}
.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}
.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}
.swiper-button-lock{display:none}
.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}
.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}
.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}
.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}
.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}
.swiper-pagination.swiper-pagination-hidden{opacity:0}
.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}
.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}
.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}
.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}
button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}
.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}
.swiper-pagination-bullet:only-child{display:none!important}
.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}
.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}
.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}
.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}
.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}
.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}
.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}
.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}
.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}
.swiper-pagination-lock{display:none}
.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}
.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}
.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}
.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}
.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}
.swiper-scrollbar-cursor-drag{cursor:move}
.swiper-scrollbar-lock{display:none}
.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}
.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}
.swiper-slide-zoomed{cursor:move;touch-action:none}
.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}
.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}
.swiper-grid>.swiper-wrapper{flex-wrap:wrap}
.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}
.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}
.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}
.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}
.swiper-fade .swiper-slide-active{pointer-events:auto}
.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}
.swiper-cube{overflow:visible}
.swiper-cube .swiper-slide{pointer-events:none;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}
.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}
.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}
.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}
.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}
.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}
.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}
.swiper-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top{z-index:0;backface-visibility:hidden}
.swiper-flip{overflow:visible}
.swiper-flip .swiper-slide{pointer-events:none;backface-visibility:hidden;z-index:1}
.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}
.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top{z-index:0;backface-visibility:hidden}
.swiper-creative .swiper-slide{backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}
.swiper-cards{overflow:visible}
.swiper-cards .swiper-slide{transform-origin:center bottom;backface-visibility:hidden;overflow:hidden}
/* NOTE: this file's fluid type scale is namespaced --tp-* because the Roctec
   design tokens in tokens.css use the same --text-* names with rem units.
   Leaving both unprefixed made whichever imported last silently win. */
/* Configure all fonts here */
/* @font-face {
  font-family: "Palatino Linotype";
  src: url("../fonts/pala-regular.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "Palatino Linotype";
  src: url("../fonts/pala-bold.ttf") format("truetype");
  font-weight: 700;
} */
:root {
  --min-vw: 640;
  --max-vw: 1920;

  /* convert to px */
  --min-vw-px: calc(var(--min-vw) * 1px);
  --max-vw-px: calc(var(--max-vw) * 1px);

  /* font sizes at --max-vw */
  --tp-text-h1: 50;
  --tp-text-h2: 44;
  --tp-text-h3: 32;
  --tp-text-h4: 28;
  --tp-text-h5: 24;
  --tp-text-h6: 20;
  --tp-text-body-1: 20;
  --tp-text-body-2: 18;
  --tp-text-body-3: 16;
  --tp-text-base: 16;

  /* font sizes at --min-vw */
  --tp-text-h1-min: calc(var(--tp-text-h1) * 0.425);
  --tp-text-h2-min: calc(var(--tp-text-h2) * 0.5);
  --tp-text-h3-min: calc(var(--tp-text-h3) * 0.6);
  --tp-text-h4-min: calc(var(--tp-text-h4) * 0.7);
  --tp-text-h5-min: calc(var(--tp-text-h5) * 0.75);
  --tp-text-h6-min: calc(var(--tp-text-h6) * 0.75);
  --tp-text-body-1-min: calc(var(--tp-text-body-1) * 0.7);
  --tp-text-body-2-min: calc(var(--tp-text-body-2) * 0.75);
  --tp-text-body-3-min: calc(var(--tp-text-body-3) * 0.75);
  --tp-text-base-min: 14;
}
body {
    font-family: var(--font-base, "Palatino Linotype", serif);
  }
/* Configure website containers here */
:root {
  --container: 1760px;
  --container-md: 1560px;
  --container-sm: 1360px;
  --container-md-px: 5.68%;
  --container-sm-px: 10.46%;
}
.container {
  max-width: 1760px;
  width: 100%;
  padding: 0 20px;
}
@media (min-width: 640px) {
  .container-md {
    padding: 0 var(--container-md-px);
  }
  .container-sm {
    padding: 0 var(--container-sm-px);
  }
}
/* Roctec design system. tokens.css redefines --container and common.css
   redefines .container, so both must stay imported after container.css. */
/* Roctec design tokens — lifted verbatim from the handoff styles.css §1.
   Values are the design; edit here, never in a block stylesheet. */
:root {
  --color-primary: #249E6B;
  --color-primary-hover: #2E7D4E;
  --color-action: #2E7D4E;
  --color-action-hover: #25663F;
  --color-success: #2E7D4E;
  --color-warning: #F4A261;
  --color-error: #E63946;
  --color-info: #457B9D;
  --color-text: #111111;
  --color-text-strong: #1B1B1B;
  --color-text-secondary: #4A4A4A;
  --color-text-muted: #6E6E6E;
  --color-text-placeholder: #8C8C8C;
  --color-surface-subtle: #F1F1F1;
  --color-surface-subtle-hover: #E7E7E7;
  --color-focus-ring: rgba(46, 125, 78, 0.12);
  --color-border-strong: #C9C9C9;
  --color-surface: #FFFFFF;
  --color-surface-muted: #F7F7F7;
  --color-border: #E4E4E4;
  /* Deep brand green — dark section grounds (.about, .site-footer) */
  --color-surface-brand: #124F35;
  /* Mission band gradient stops; the mid stop is the section ground itself */
  --color-surface-brand-light: #16603F;
  --color-surface-brand-mid: var(--color-surface-brand);
  --color-surface-brand-dark: #0C3826;
  --color-surface-inverse: #0D120F;
  --color-surface-inverse-raised: #131A16;
  --color-border-inverse: rgba(255, 255, 255, 0.1);
  --color-border-accent: #249E6B;
  --color-text-inverse: #FFFFFF;
  --color-text-inverse-muted: rgba(255, 255, 255, 0.62);

  --font-en: 'Roboto', Arial, sans-serif;
  --font-base: 'Roboto', Arial, sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --text-display: clamp(4rem, 2.5rem + 5.6vw, 7.25rem); /* hero only */
  --text-h1: 3.25rem;   /* page titles — H2 × 1.3 */
  --text-h2: 2.5rem;
  --text-h3: 1.75rem;
  --text-h4: 1.5rem;
  --text-h5: 1.25rem;
  --text-h6: 1.0625rem;
  --text-lg: 1.25rem;
  --text-base: 1.125rem;
  --text-sm: 1rem;
  --text-xs: 0.875rem;
  --text-eyebrow-sm: 0.75rem;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Heading → content gap. --head-gap is the standard; --head-gap-lg is the
     deliberately larger tier used under page-level intros. */
  --head-gap: 40px;
  --head-gap-lg: 64px;

  /* Section vertical rhythm */
  --section-pad: 96px;
  /* Retained for the footer + inter-item rhythm, which are not --section-pad users. */
  --section-pad-mobile: 64px;

  /* Hero clearance — one token per hero type, composed from --header-height. */
  --hero-clear-display: calc(var(--header-height) + var(--space-24) + var(--space-6)); /* 224 — homepage */
  --hero-clear-page: calc(var(--header-height) + var(--space-24) + var(--space-8));    /* 232 — subpage + legal titles */
  --hero-clear-tight: calc(var(--header-height) + var(--space-16));                    /* 168 — detail pages */

  --container: 1280px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --touch-target: 44px;
  --header-height: 104px;
  --shadow-sm: 0 1px 3px rgba(17, 17, 17, 0.06);
  --shadow-md: 0 4px 12px rgba(17, 17, 17, 0.08);

  --motion-fast: 320ms;
  --motion-base: 320ms;
  --motion-medium: 320ms;
  --motion-slow: 320ms;
  --ease-standard: ease-out;
}
/* Shared site styles — handoff styles.css §2-4 (reset, layout, common components).
   Imported after container.css so the design's .container wins. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
/* Long words and pasted URLs must never widen the page (audit P1: 07 scrolled 173px). */
p, li, dd, dt, blockquote, figcaption, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
a { overflow-wrap: anywhere; }
body {
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-surface);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-action); }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; }
h3, h4, h5, h6 { font-weight: 600; }
address { font-style: normal; }
/* Skip link */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -60px;
  background: var(--color-action);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  z-index: 999;
  font-weight: 700;
  transition: top var(--motion-base) var(--ease-standard);
}
.skip-link:focus { top: var(--space-4); color: #fff; }
/* Focus ring */
:focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ---------- 3. Layout ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
/* ---------- 4. Common Components ---------- */
/* Eyebrow */
.eyebrow {
  letter-spacing: 0.14em;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: 500;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  background: var(--color-surface-muted);
}
.eyebrow-green {
  color: var(--color-action);
  border-color: var(--color-action);
  background: rgba(46, 125, 78, 0.08);
}
.eyebrow-amber {
  color: #B35A18;
  border-color: #F4A261;
  background: rgba(244, 162, 97, 0.12);
}
.eyebrow-action {
  color: var(--color-primary);
  border-color: rgba(36, 158, 107, 0.5);
  background: rgba(36, 158, 107, 0.12);
}
/* Section head */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--head-gap);
}
.section-head h2 { font-size: var(--text-h2); }
.section-head p { font-size: var(--text-lg); font-weight: 400; color: #3A3F3C; }
.section-head-split {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  max-width: none;
}
.section-head-split p { text-align: right; }
/* Technical grid overlay */
.tech-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(var(--color-border-inverse) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border-inverse) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 100%);
  pointer-events: none;
}
/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  padding: 0 var(--space-6);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    background var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard),
    color var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard);
}
/* Fill sweep: left → right on hover */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms ease-out;
}
.btn:hover::before { transform: scaleX(1); }
.btn:hover { color: inherit; }
.btn:active::before { transition-duration: 80ms; }
@media (prefers-reduced-motion: reduce) {
  .btn::before { transition: none; }
}
.btn-primary {
  background: var(--color-action);
  color: #fff;
  border-radius: var(--radius-pill);
}
.btn-primary::before { background: var(--color-primary); }
.btn-primary:hover {
  color: #fff;
}
.btn-secondary {
  background: transparent;
  color: var(--color-action);
  border-color: var(--color-action);
  border-radius: var(--radius-pill);
}
.btn-secondary::before { background: var(--color-primary); }
.btn-secondary:hover {
  color: #fff;
  border-color: var(--color-primary);
}
.btn-ghost-inverse {
  background: transparent;
  color: var(--color-text-inverse);
  border-color: var(--color-border-inverse);
  border-radius: var(--radius-pill);
}
.btn-ghost-inverse::before { background: var(--color-primary); }
.btn-ghost-inverse:hover {
  border-color: var(--color-primary);
  color: #fff;
}
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.btn[disabled]:hover::before { transform: scaleX(0); }
/* ==========================================================================
   PRE-PAINT REVEAL STATE
   script.js applies the scroll-reveal start state (opacity:0) in JavaScript,
   at the bottom of the document. On a slow load the browser paints these
   sections fully visible first, then JS yanks them to 0 — a visible flash,
   and any section already scrolled past skips its transition entirely.
   These rules hold the same start state from the very first paint. The
   .reveal-pre class is added by a tiny inline script in each page <head>
   (only when IntersectionObserver exists and reduced-motion is off) and
   removed by script.js the moment it has applied the real reveal state.
   ========================================================================== */
html.reveal-pre .about,
html.reveal-pre .services,
html.reveal-pre .solutions,
html.reveal-pre .solutions2,
html.reveal-pre .news,
html.reveal-pre .cta-band,
html.reveal-pre .rsvc,
html.reveal-pre .trust-ticker,
html.reveal-pre .awards,
html.reveal-pre .ab-intro,
html.reveal-pre .ab-mission,
html.reveal-pre .ab-team,
html.reveal-pre .ab-awards,
html.reveal-pre .ab-usps,
html.reveal-pre .cr-careers,
html.reveal-pre .ct-contact,
html.reveal-pre .ct-locate,
html.reveal-pre .sd-detail,
html.reveal-pre .sd-related,
html.reveal-pre .nf-hero,
html.reveal-pre .an-firsts,
html.reveal-pre .an-arc,
html.reveal-pre .an-quote,
html.reveal-pre .an-next,
html.reveal-pre .an-thanks,
html.reveal-pre .an-verified {
  opacity: 0;
}
html.reveal-pre .ab-milestone,
html.reveal-pre .sv-head,
html.reveal-pre .sv-row,
html.reveal-pre .ab-team-carousel .ab-team-panel,
html.reveal-pre .an-verified-logos .an-verified-logo {
  opacity: 0;
}
/* ==========================================================================
   ABOUT BAND — shared ground
   The handoff has one .about <section> holding an intro and a stats row. The
   theme splits those into two blocks (Intro Callout, Stat Counters), so the
   band's background, padding and inner layout are shared here and the flush
   modifiers below rebuild the original single-section rhythm when the two are
   stacked in the designed order.
   ========================================================================== */
.about {
  padding-block: var(--section-pad);
  background: var(--color-surface-brand);
  color: var(--color-text-inverse);
}
.about-stacked {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
/* Stacked pair: close the seam so two sections read as one band. */
.about--flush-bottom { padding-bottom: 0; }
.about--flush-top { padding-top: var(--space-16); }
@media (max-width: 1024px) {
  .about-stacked { padding-inline: var(--space-6); }
}
@media (max-width: 767px) {
  .about-stacked { padding-inline: var(--space-6); gap: var(--space-10, 40px); }
  .about--flush-top { padding-top: var(--space-10, 40px); }
}
@media (max-width: 400px) {
  .container, .about-stacked, .header-inner, .rsvc-inner { padding-inline: var(--space-5); }
}
/* Eyebrow spacing — one rule the design applies across several section heads. */
.news-header .news-whisker,
.section-head .solutions-whisker,
.section-head .about-whisker,
.section-head .eyebrow,
.awards-header .awards-eyebrow { margin-bottom: 4px; }
/* ==========================================================================
   SOLUTION TILE — shared component
   Used by the homepage Solutions Cluster block and by the Solutions index
   page, so the card itself lives here rather than in either block.
   ========================================================================== */
.sol-tile[hidden] { display: none !important; }
.sol-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: #ffffff;
  color: var(--color-text);
  overflow: hidden;
  transition: transform var(--motion-base) var(--ease-standard),
              box-shadow var(--motion-base) var(--ease-standard);
}
.sol-tile:hover {
  transform: translateY(-4px);
  color: var(--color-text);
}
.sol-tile-media {
  padding: var(--space-2);
}
.sol-tile-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-3) var(--space-6) var(--space-6);
}
.sol-tile-img {
  height: 260px;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.sol-tile-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform var(--motion-slow) var(--ease-standard);
}
.sol-tile:hover .sol-tile-img img { transform: scale(1.04); }
.sol-tile-cat, .sol-tile-eyebrow {
  letter-spacing: 0.14em;
  font-size: var(--text-base);
  font-weight: 600;
  text-transform: uppercase;
  color: #6B7280;
  margin-bottom: var(--space-2);
}
.sol-tile h3 {
  font-size: var(--text-h5);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  margin-top: 0;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(13, 18, 15, 0.10);
}
.sol-tile p {
  font-size: var(--text-base);
  line-height: 1.55;
  color: #3A3F3C;
  margin-top: var(--space-2);
}
.sol-tile-meta-row {
  display: grid;
  grid-template-columns: auto 1fr;
  -moz-column-gap: var(--space-6);
       column-gap: var(--space-6);
  row-gap: var(--space-2);
  margin-top: var(--space-6);
}
.sol-tile-meta-row dt {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  color: #8A908C;
  align-self: center;
}
.sol-tile-meta-row dd {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-text);
}
.sol-tile-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-primary);
}
.sol-tile-cta svg {
  width: 18px;
  height: 18px;
  transition: transform var(--motion-base) var(--ease-standard);
}
.sol-tile:hover .sol-tile-cta { gap: var(--space-3); }
.sol-tile:hover .sol-tile-cta svg { transform: translateX(5px); }
.sol-tile:focus-visible { outline-color: var(--color-border); }
.sol-tile-cat,
.sol-tile-eyebrow { font-size: var(--text-eyebrow-sm); }
.sol-tile.reveal-up.is-shown:hover { transform: translateY(-4px); }
@media (max-width: 1024px) {
  .sol-cluster .sol-tile {
      flex: 0 0 78%;
      scroll-snap-align: start;
    }

    .sol-tile-body { flex-direction: column; }
}
@media (max-width: 767px) {
  .sol-cluster .sol-tile { flex: 0 0 86%; }
}
/* ==========================================================================
   SITE HEADER + MOBILE DRAWER — every page renders it (header-base.php)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--motion-base) var(--ease-standard);
}
.header-topbar {
  background: rgba(0,0,0,0.28);
  border-bottom: 1px solid var(--color-border-inverse);
  padding: var(--space-1) 0;
}
.header-topbar.is-dismissed { display: none; }
.header-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-6);
  position: relative;
}
.header-announce {
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--color-text-inverse-muted);
  text-align: center;
  margin: 0;
}
.header-announce a {
  color: var(--color-primary);
  font-weight: 600;
  white-space: nowrap;
}
.header-announce a:hover { text-decoration: underline; }
.header-announce-close {
  position: absolute;
  right: var(--space-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: color var(--motion-base) var(--ease-standard);
}
.header-announce-close:hover { color: var(--color-text-inverse-muted); }
.header-announce-close svg { width: 14px; height: 14px; }
.site-header.is-scrolled { background: var(--color-surface); }
.brand { position: relative; }
.brand-logo { transition: opacity 700ms var(--ease-standard), transform 700ms var(--ease-standard); }
.brand-logo-white {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
}
.site-header.header-overlay:not(.is-scrolled):not(.is-menu-open) .brand-logo-white { opacity: 1; }
.site-header.header-overlay:not(.is-scrolled):not(.is-menu-open) .brand-logo-dark { opacity: 0; }
.site-header.header-overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  transition: background var(--motion-base) var(--ease-standard),
              border-color var(--motion-base) var(--ease-standard),
              box-shadow var(--motion-base) var(--ease-standard),
              transform var(--motion-base) var(--ease-standard),
              opacity var(--motion-base) var(--ease-standard);
}
.site-header.header-overlay.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.site-header.header-overlay.is-scrolled,
.site-header.header-overlay.is-menu-open {
  background: var(--color-surface);
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-md);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: var(--header-height);
  padding-inline: var(--space-6);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  transition: height var(--motion-base) var(--ease-standard);
}
.site-header.header-overlay .header-inner {
  height: 156px;
  padding-block: var(--space-4);
}
.site-header.header-overlay:not(.is-scrolled):not(.is-menu-open) .header-inner {
  align-items: flex-start;
  padding-top: 40px;
}
.site-header.header-overlay:not(.is-scrolled):not(.is-menu-open) .brand-logo {
  transform-origin: left top;
}
.site-header.header-overlay:not(.is-scrolled):not(.is-menu-open) .nav-pill {
  background: var(--color-surface);
  padding: 0;
  gap: 0;
  box-shadow: var(--shadow-md);
}
.site-header.header-overlay:not(.is-scrolled):not(.is-menu-open) .nav-pill ul {
  padding: 0 24px;
}
.site-header:not(.header-overlay) {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  transition: background var(--motion-base) var(--ease-standard),
              border-color var(--motion-base) var(--ease-standard),
              box-shadow var(--motion-base) var(--ease-standard);
}
.site-header:not(.header-overlay).is-scrolled,
.site-header:not(.header-overlay).is-menu-open {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}
.site-header:not(.header-overlay):not(.is-scrolled):not(.is-menu-open) .brand-logo-white { opacity: 1; }
.site-header:not(.header-overlay):not(.is-scrolled):not(.is-menu-open) .brand-logo-dark { opacity: 0; }
.site-header:not(.header-overlay):not(.is-scrolled):not(.is-menu-open) .header-inner {
  align-items: flex-start;
  padding-top: 40px;
}
.site-header:not(.header-overlay):not(.is-scrolled):not(.is-menu-open) .brand-logo {
  transform-origin: left top;
}
.site-header:not(.header-overlay):not(.is-scrolled):not(.is-menu-open) .nav-pill {
  background: var(--color-surface);
  padding: 0;
  gap: 0;
  box-shadow: var(--shadow-md);
}
.site-header:not(.header-overlay):not(.is-scrolled):not(.is-menu-open) .nav-pill ul {
  padding: 0 24px;
}
.site-header:not(.header-overlay):not(.is-scrolled):not(.is-menu-open) .nav-toggle {
  color: var(--color-text-inverse);
  border-color: var(--color-border-inverse);
}
.site-header:not(.header-overlay) .brand-logo {
  transform-origin: left center;
  transform: scale(1.4);
  transition: transform var(--motion-base) var(--ease-standard);
  will-change: transform;
}
.site-header:not(.header-overlay) .header-inner {
  height: 156px;
  padding-block: var(--space-4);
}
.site-header:not(.header-overlay).is-scrolled .brand-logo,
.site-header:not(.header-overlay).is-menu-open .brand-logo {
  transform: scale(0.85);
}
.site-header:not(.header-overlay).is-scrolled .header-inner,
.site-header:not(.header-overlay).is-menu-open .header-inner {
  height: var(--header-height);
  padding-block: 12px;
}
.site-header.header-overlay.is-scrolled .header-inner {
  height: auto;
  padding-block: 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  color: var(--color-text);
}
.brand:hover { color: var(--color-text); }
.brand-logo { height: 36px; width: auto; }
.site-header.header-overlay .brand-logo {
  transform-origin: left center;
  transform: scale(1.75);
  transition: transform var(--motion-base) var(--ease-standard);
  will-change: transform;
}
.site-header.header-overlay.is-scrolled .brand-logo,
.site-header.header-overlay.is-menu-open .brand-logo {
  transform: scale(0.85);
}
.brand-wordmark {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}
.main-nav { margin-left: auto; }
.header-inner > .header-actions { margin-left: var(--space-2); }
.nav-pill {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  background: transparent;
  border-radius: var(--radius-pill);
  padding: 0 0 0 32px;
  box-shadow: none;
}
.nav-pill ul {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-pill ul a {
  position: relative;
  display: block;
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: 500;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  opacity: 1;
  transition: color var(--motion-fast) var(--ease-standard),
              opacity var(--motion-fast) var(--ease-standard),
              background-color var(--motion-fast) var(--ease-standard);
}
.nav-pill ul a:hover { color: var(--color-primary); opacity: 1; }
.nav-pill ul a[aria-current="page"] {
  color: var(--color-text);
  font-weight: 600;
  opacity: 0.5;
  background: transparent;
}
.nav-pill-cta { flex-shrink: 0; }
.header-actions { display: flex; align-items: center; gap: var(--space-4); }
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle-close { display: none; }
.site-header.is-menu-open .nav-toggle-open { display: none; }
.site-header.is-menu-open .nav-toggle-close { display: block; }
.mobile-drawer {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  background: var(--color-surface-inverse);
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding: var(--space-8) var(--space-6);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--motion-medium, 250ms) ease, transform var(--motion-medium, 250ms) ease, visibility 0s linear var(--motion-medium, 250ms);
}
.mobile-drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--motion-medium, 250ms) ease, transform var(--motion-medium, 250ms) ease, visibility 0s linear 0s;
}
.mobile-drawer ul { display: flex; flex-direction: column; }
.mobile-drawer li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--motion-medium, 250ms) ease, transform var(--motion-medium, 250ms) ease;
}
.mobile-drawer.is-open li { opacity: 1; transform: translateY(0); }
.mobile-drawer.is-open li:nth-child(1) { transition-delay: 60ms; }
.mobile-drawer.is-open li:nth-child(2) { transition-delay: 100ms; }
.mobile-drawer.is-open li:nth-child(3) { transition-delay: 140ms; }
.mobile-drawer.is-open li:nth-child(4) { transition-delay: 180ms; }
.mobile-drawer.is-open li:nth-child(5) { transition-delay: 220ms; }
.mobile-drawer.is-open li:nth-child(6) { transition-delay: 260ms; }
.mobile-drawer.is-open li:nth-child(7) { transition-delay: 300ms; }
.mobile-drawer.is-open li:nth-child(8) { transition-delay: 340ms; }
.mobile-drawer a {
  display: block;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-inverse);
  color: var(--color-text-inverse);
  font-size: var(--text-lg);
  font-weight: 600;
}
.mobile-drawer a:hover { color: var(--color-primary); }
.mobile-drawer .btn { margin-top: var(--space-8); align-self: flex-start; width: auto; display: none; }
body.page-solution-detail .site-header:not(.is-scrolled):not(.is-menu-open) .brand-logo-white,
body.page-legal .site-header:not(.is-scrolled):not(.is-menu-open) .brand-logo-white,
body.page-news-detail .site-header:not(.is-scrolled):not(.is-menu-open) .brand-logo-white { opacity: 0; }
body.page-solution-detail .site-header:not(.is-scrolled):not(.is-menu-open) .brand-logo-dark,
body.page-legal .site-header:not(.is-scrolled):not(.is-menu-open) .brand-logo-dark,
body.page-news-detail .site-header:not(.is-scrolled):not(.is-menu-open) .brand-logo-dark { opacity: 1; }
body.page-solution-detail .site-header:not(.is-scrolled):not(.is-menu-open) .nav-toggle,
body.page-legal .site-header:not(.is-scrolled):not(.is-menu-open) .nav-toggle,
body.page-news-detail .site-header:not(.is-scrolled):not(.is-menu-open) .nav-toggle {
  color: var(--color-text);
  border-color: var(--color-border);
}
.page-404 .site-header:not(.header-overlay):not(.is-scrolled):not(.is-menu-open) .brand-logo-white { opacity: 0; }
.page-404 .site-header:not(.header-overlay):not(.is-scrolled):not(.is-menu-open) .brand-logo-dark { opacity: 1; }
.page-404 .site-header:not(.header-overlay):not(.is-scrolled):not(.is-menu-open) .nav-toggle {
  color: var(--color-text);
  border-color: var(--color-border);
}
@media (min-width: 1025px) {
  .site-header:not(.header-overlay) .brand-logo { transform: scale(1.6); }

    .site-header:not(.header-overlay).is-scrolled .brand-logo,
    .site-header:not(.header-overlay).is-menu-open .brand-logo {
      transform: scale(1.056);
    }

    .site-header.header-overlay.is-scrolled .header-inner { padding-block: 16px; }

    .site-header .header-actions { display: none; }

    .site-header.header-overlay .brand-logo { transform: scale(2.1); }

    .site-header.header-overlay.is-scrolled .brand-logo,
    .site-header.header-overlay.is-menu-open .brand-logo {
      transform: scale(1.056);
    }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-drawer, .mobile-drawer li { transition: opacity 120ms ease; transform: none; }
}
@media (max-width: 1024px) {
  .header-topbar-desktop { display: none !important; }

    .header-topbar-mobile { display: flex !important; }

    .main-nav { display: none; }

    .nav-toggle { display: flex; }

    .site-header.header-overlay:not(.is-scrolled):not(.is-menu-open) .nav-toggle { color: #fff; }

    .site-header.header-overlay.is-scrolled .header-inner,
    .site-header.header-overlay.is-menu-open .header-inner {
      height: var(--header-height);
      padding-block: 12px;
    }

    .header-actions .btn { display: none; }

    .mobile-drawer .btn { display: inline-flex; padding-inline: var(--space-8); }

    .header-inner { padding-inline: var(--space-6); }
}
@media (max-width: 767px) {
  .header-inner { padding-inline: var(--space-6); }

    .site-header.header-overlay .header-inner { height: 120px; }

    .site-header.header-overlay:not(.is-scrolled):not(.is-menu-open) .header-inner { padding-top: var(--space-6); }

    .site-header.header-overlay .brand-logo { transform: scale(1.15); }

    .mobile-drawer { padding: var(--space-8) 24px; }

    .mobile-drawer a { padding: var(--space-4) 0; }

    .header-actions .btn { display: none; }

    .mobile-drawer .btn { display: inline-flex; padding-inline: var(--space-8); }
}
@media (max-width: 400px) {
  .container, .about-stacked, .header-inner, .rsvc-inner { padding-inline: var(--space-5); }
}
/* ==========================================================================
   SITE FOOTER — every page renders it (footer-base.php)
   ========================================================================== */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-brand);
  color: var(--color-text-inverse-muted);
  padding-top: var(--section-pad);
  padding-bottom: 16px;
}
.footer-logomark {
  position: absolute;
  top: -80px;
  right: -140px;
  width: 560px;
  height: 560px;
  background: url(../images/logo-mark.svg?7139602cdcf88b3de0101905863293a9) no-repeat center / contain;
  opacity: 0.28;
  pointer-events: none;
  z-index: 0;
}
.site-footer > .container { position: relative; z-index: 1; padding-inline: var(--space-6); }
.footer-cta-title {
  font-size: var(--text-h2);
  line-height: 1.05;
  font-weight: 700;
  color: var(--color-text-inverse);
}
.footer-cta-btn {
  flex-shrink: 0;
  background: #FFFFFF;
  color: var(--color-text);
  border-color: #FFFFFF;
  margin-top: var(--space-4);
}
.footer-row-primary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding-block: var(--space-8);
}
.footer-brand-logo { flex-shrink: 0; }
.footer-cta-title { max-width: none; white-space: nowrap; }
.footer-row-secondary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding-block: var(--space-8);
}
.footer-quick-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  list-style: none;
}
.footer-quick-links a {
  padding-block: 12px;
  margin-block: -12px;
  font-size: var(--text-base);
  color: var(--color-text-inverse-muted);
  transition: color var(--motion-fast) var(--ease-standard);
}
.footer-quick-links a:hover { color: var(--color-text-inverse); }
.footer-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
  margin: 0;
}
.footer-row-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-8);
  font-size: var(--text-sm);
}
.footer-legal-links {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-base);
  transform: translateY(-4px);
}
.footer-legal-links a {
  color: var(--color-text-inverse-muted);
  transition: color var(--motion-fast) var(--ease-standard);
}
.footer-legal-links a:hover { color: var(--color-text-inverse); }
.footer-legal-divider {
  color: var(--color-text-inverse-muted);
  opacity: 0.4;
}
.footer-social {
  display: flex;
  gap: var(--space-4);
}
.footer-social a {
  position: relative;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: opacity var(--motion-fast) var(--ease-standard);
}
.footer-social a::after { content: ""; position: absolute; inset: -12px -13px; }
.footer-social a:hover { opacity: 0.7; }
.footer-social svg { width: auto; height: 20px; display: block; }
.footer-social .soc-li { height: 19px; }
.footer-social .soc-fb { height: 22px; }
.footer-social .soc-ig { height: 21px; }
.footer-contact-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3); margin-top: var(--space-6);
}
.footer-contact-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-lg);
}
.footer-contact-row svg {
  width: 22px;
  height: 22px;
  color: var(--color-text-inverse-muted);
  flex-shrink: 0;
}
.footer-contact-row a {
  color: var(--color-text-inverse-muted);
  transition: color var(--motion-fast) var(--ease-standard);
}
.footer-contact-row a:hover { color: var(--color-text-inverse); }
.footer-vo-link {
  color: var(--color-text-inverse-muted);
  opacity: 0.8;
  transition: color var(--motion-fast) var(--ease-standard);
}
.footer-vo-link:hover { color: var(--color-text-inverse); opacity: 1; }
.footer-back-to-top {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-inverse-muted);
  transition: color var(--motion-fast) var(--ease-standard);
}
.footer-back-to-top:hover { color: var(--color-text-inverse); }
.page-404 .site-footer {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}
.page-404 .footer-logomark,
.page-404 .footer-row-primary,
.page-404 .footer-row-secondary,
.page-404 .footer-divider { display: none; }
@media (max-width: 1024px) {
  .site-footer > .container { padding-inline: var(--space-6); }

    .footer-row-primary { flex-wrap: wrap; gap: var(--space-6) var(--space-8); }

    .footer-legal-links { margin-left: 0; }
}
@media (max-width: 767px) {
  .site-footer { padding-top: var(--section-pad-mobile); }

    .footer-logomark { top: -40px; right: -60px; width: 320px; height: 320px; }

    .footer-row-primary {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-6);
    }

    .footer-legal-links { margin-left: 0; align-self: flex-start; }

    .footer-row-secondary {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-6);
    }

    .footer-quick-links {
      display: grid;
      /* 5 across does not fit 325px — wrap to two rows instead of overflowing by 6px */
      grid-template-columns: repeat(3, minmax(0, 1fr));
      justify-content: space-between;
      gap: var(--space-2);
      width: 100%;
    }

    .footer-quick-links a { white-space: nowrap; }

    .footer-cta-title { white-space: normal; }

    .footer-row-bottom {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-3);
      padding-block: var(--space-6);
    }
}
/* ==========================================================================
   STICKY ANNIVERSARY CARD — site furniture (anniversary-anchor.php)
   ========================================================================== */
.hf-anchor {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 200;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 18px 44px -18px rgba(6, 18, 12, 0.4),
              0 6px 16px -10px rgba(6, 18, 12, 0.25);
  transform: translateY(0);
  opacity: 1;
  transition: transform var(--motion-medium) var(--ease-standard),
              opacity var(--motion-medium) var(--ease-standard);
}
.hf-anchor.is-closed {
  transform: translateY(24px);
  opacity: 0;
  pointer-events: none;
}
.hf-anchor:not(.is-closed):hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 56px -18px rgba(6, 18, 12, 0.5),
              0 10px 22px -10px rgba(6, 18, 12, 0.32);
}
.hf-anchor-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  transition: background var(--motion-base) var(--ease-standard);
}
.hf-anchor-close:hover { background: rgba(0, 0, 0, 0.7); }
.hf-anchor-close svg { width: 16px; height: 16px; }
.hf-anchor-media {
  padding: var(--space-2);
}
.hf-anchor-img {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: #0d1f17;
}
.hf-anchor-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform var(--motion-slow) var(--ease-standard);
}
.hf-anchor:hover .hf-anchor-img img { transform: scale(1.04); }
.hf-anchor-media-note {
  font-family: monospace;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.6);
}
.hf-anchor-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-5);
  background: var(--color-surface);
}
.hf-anchor-eyebrow {
  letter-spacing: 0.14em;
  font-size: var(--text-base);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-primary);
}
.hf-anchor-headline {
  font-size: var(--text-h5);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
}
.hf-anchor-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  font-size: var(--text-base);
  line-height: 1.25;
  font-weight: 600;
  color: var(--color-primary);
  transition: gap var(--motion-base) var(--ease-standard),
              color var(--motion-base) var(--ease-standard);
}
.hf-anchor-cta svg {
  width: 18px;
  height: 18px;
  transition: transform var(--motion-base) var(--ease-standard);
}
.hf-anchor-cta:hover { color: var(--color-action-hover); gap: var(--space-3); }
.hf-anchor-cta:hover svg { transform: translateX(5px); }
@media (max-width: 1024px) {
  .hf-anchor { width: 300px; }
}
@media (max-width: 767px) {
  .hf-anchor { right: 16px; bottom: 16px; width: 280px; }
}
/* ==========================================================================
   SHARED TEXT BITS
   Rules the design applies across pages. They live here rather than in a block
   folder because block CSS is only enqueued on pages where that block appears —
   an eyebrow on a page without the News block would otherwise render unstyled.
   ========================================================================== */
/* Section eyebrow. Used by News Featured, Intro with USPs, Mission Band,
   Awards Carousel, Services Rows and the Careers/Contact heads. */
.news-whisker {
  letter-spacing: 0.14em;
  display: block;
  font-size: var(--text-base);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
/* Reveal end-state. common.js injects this at runtime for the front end, but
   the ACF V3 editor iframe does not run common.js — without a real rule here,
   any block whose view script sets opacity:0 renders invisible in the editor. */
.is-visible {
  opacity: 1 !important;
  transform: none !important;
}
/* Ticked bullet list — Services rows, Solution detail and Careers vacancies. */
.sv-points {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  list-style: none;
  padding-left: 0;
}
.sv-points li {
  position: relative;
  padding-left: 26px;
  font-size: var(--text-base);
  line-height: 1.7;
  color: #3A3F3C;
  text-wrap: pretty;
}
.sv-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--color-primary) 16%, transparent);
  box-shadow: inset 0 0 0 3.5px var(--color-primary);
}
/* ==========================================================================
   COLLECTION INDEX COMPONENTS — shared by the Solutions and News index blocks
   The handoff's own stylesheet notes News "reuses the .solx-* components".
   They live here rather than in either block folder because block CSS is only
   enqueued where that block appears.
   ========================================================================== */
.solx-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}
.solx-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 480px;
  min-width: 0;
}
.solx-tab {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid rgba(13, 18, 15, 0.12);
  background: transparent;
  color: #3A3F3C;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  padding: 11px 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--motion-base) var(--ease-standard),
              color var(--motion-base) var(--ease-standard),
              border-color var(--motion-base) var(--ease-standard);
}
.solx-tab:hover { border-color: var(--color-primary); color: var(--color-primary); }
.solx-tab.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
}
.solx-tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.solx-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.solx-search {
  position: relative;
  flex: 0 1 340px;
  max-width: 420px;
  display: flex;
  align-items: center;
}
.solx-search i {
  position: absolute;
  left: 16px;
  font-size: 20px;
  color: #6B726E;
  pointer-events: none;
}
.solx-search input {
  width: 100%;
  min-height: var(--touch-target);
  padding: 0 var(--space-4) 0 46px;
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  transition: border-color var(--motion-base) var(--ease-standard),
              box-shadow var(--motion-base) var(--ease-standard);
}
.solx-search input::-moz-placeholder { color: #8A908C; }
.solx-search input::placeholder { color: #8A908C; }
.solx-search input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(36, 158, 107, 0.15);
}
.solx-selects {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.solx-field { position: relative; display: flex; }
.solx-field i {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #6B726E;
  pointer-events: none;
}
.solx-field select {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  min-height: var(--touch-target);
  min-width: 200px;
  padding: 0 42px 0 var(--space-4);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--motion-base) var(--ease-standard);
}
.solx-field select:hover { border-color: var(--color-primary); }
.solx-field select:focus-visible { outline-color: var(--color-primary); }
.solx-count {
  font-size: var(--text-sm);
  color: #3A3F3C;
  margin-top: var(--space-6);
}
.solx-empty {
  padding: var(--space-12) 0;
  text-align: center;
  font-size: var(--text-lg);
  color: #3A3F3C;
}
.nwx-footrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.nwx-footrow .solx-count { margin-top: 0; }
.nwx-footrow .solx-pagination { margin-top: 0; justify-content: flex-end; }
.solx-pagination {
  display: flex;
  justify-content: center;
  align-items: center;  gap: var(--space-2);
  margin-top: var(--space-12);
}
.solx-pagination button {
  min-width: var(--touch-target);
  height: var(--touch-target);
  padding: 0 var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--motion-base) var(--ease-standard),
              color var(--motion-base) var(--ease-standard),
              background var(--motion-base) var(--ease-standard);
}
.solx-pagination button:hover:not([disabled]) {
  border-color: rgba(13, 18, 15, 0.35);
  color: var(--color-text);
  background: #F2F3F2;
}
.solx-pagination button[aria-current="page"] {
  background: #2B302D;
  border-color: #2B302D;
  color: #fff;
}
.solx-pagination button[disabled] { opacity: 0.35; cursor: not-allowed; }
.solx-pagination svg { width: 18px; height: 18px; }
.solx-pagination .solx-gap {
  padding: 0 6px;
  color: #8A908C;
  font-size: var(--text-sm);
}
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 500ms var(--ease-standard), transform 500ms var(--ease-standard);
}
.reveal-up.is-shown {
  opacity: 1;
  transform: none;
}
@media (max-width: 640px) {
  .solx-field select { min-width: 100%; }

    .solx-selects { width: 100%; }

    .solx-selects .solx-field { flex: 1 1 100%; }
}
/* Section grounds shared by the cluster and index blocks on each collection. */
.solutions {
  padding-block: var(--section-pad);
  background: #F7F7F7;
}
.solutions-whisker {
  letter-spacing: 0.14em;
  display: block;
  font-size: var(--text-base);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.solutions-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8); margin-bottom: var(--head-gap);
}
.solutions-head-row .section-head { margin-bottom: 0; }
.solutions .section-head h2 { color: var(--color-text); }
.solutions .section-head p { color: #3A3F3C; }
.solutions-head-row .btn { flex-shrink: 0; margin-bottom: 0; }
.solutions-grid-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.solutions2 {
  padding-block: var(--section-pad);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}
.solutions2-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--head-gap);
}
.solutions2-header {
  margin-bottom: 0;
}
.solutions2-header .solutions-whisker {
  color: var(--color-primary);
  margin-bottom: var(--space-3);
  display: block;
}
.solutions2-header h2 {
  font-size: var(--text-h2);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}
.solutions2-header p {
  font-size: var(--text-lg);
  color: var(--color-text-inverse-muted);
}
.solutions2-panel {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: var(--space-8);
}
.solutions2-tabs {
  display: flex;
  flex-direction: row;
  gap: 0;
  border-top: 1px solid var(--color-border-inverse);
  justify-content: center;
  width: 100%;
}
.solutions2-tab {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border: none;
  border-top: 3px solid transparent;
  background: transparent;
  color: var(--color-text-inverse-muted);
  font-size: var(--text-base);
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--motion-base) var(--ease-standard),
              border-color var(--motion-base) var(--ease-standard);
}
.solutions2-tab:hover,
.solutions2-tab.is-active {
  color: var(--color-text-inverse);
}
.solutions2-tab.is-active {
  border-top-color: var(--color-primary);
}
.solutions2-tab-num {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  min-width: 28px;
}
.solutions2-tab-label {
  flex: 1;
}
.solutions2-tab-arrow {
  display: none;
}
.solutions2-cards {
  position: relative;
  height: 380px;
  width: 100%;
}
.news-header .news-whisker,
.section-head .solutions-whisker,
.section-head .about-whisker,
.section-head .eyebrow,
.awards-header .awards-eyebrow { margin-bottom: 4px; }
@media (max-width: 767px) {
  .solutions2-tabs {
      overflow-x: auto;
      justify-content: flex-start;
      -webkit-overflow-scrolling: touch;
    }

    .solutions2-tab {
      padding: var(--space-3) var(--space-4);
      font-size: var(--text-sm);
    }

    .solutions2-cards {
      min-height: auto;
    }

    .solutions-head-row { flex-wrap: wrap; gap: var(--space-5); }

    .solutions-head-row .section-head { margin-bottom: 0; }

    .solutions-head-row .btn { margin-left: 0; margin-bottom: 0; }
}
@media (max-width: 1024px) {
  .solutions-grid-cards {
      display: flex;
      grid-template-columns: none;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-bottom: var(--space-4);
      scroll-padding-left: 0;
    }

    .solutions-grid-cards::-webkit-scrollbar { display: none; }
}
.news {
  padding-block: var(--section-pad);
  background: #FFFFFF;
  border-top: none;
}
/* Light breadcrumb skin — legal pages and both detail templates. */
.sd-crumbbar .sd-crumbs { margin-bottom: 0; padding-block: var(--space-4); }
.sd-crumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: #6B7370;
  margin-bottom: var(--space-6);
}
.sd-crumbs a:hover { color: var(--color-action); }
.sd-crumbs .crumb-sep { color: var(--color-border); }
.sd-crumbs [aria-current="page"] { color: var(--color-text); font-weight: 500; }
.sd-side .sd-crumbs { margin-bottom: var(--space-6); }
/* Collection pagination + the fetching state, both driven by the shared
   collection helper in common.js. */
.solx-page {
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--motion-base) var(--ease-standard),
              background var(--motion-base) var(--ease-standard),
              color var(--motion-base) var(--ease-standard);
}
.solx-page:hover { border-color: var(--color-primary); color: var(--color-primary); }
.solx-page.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
/* The grid stays in place while a request is in flight — no layout jump. */
[data-collection].is-loading [data-collection-grid] {
  opacity: 0.45;
  transition: opacity 160ms ease-out;
}
[data-collection] [data-collection-grid] { transition: opacity 160ms ease-out; }
/* ==========================================================================
   TOOLBAR ICONS — SVG, not an icon font
   The handoff drew these with <i class="ti ti-search"> from Tabler's webfont,
   which this theme does not load, so they render from the icon registry as
   inline <svg> instead. An <svg> has no font-size to inherit and is not
   absolutely positioned by the rules above, so without these it lays out
   inline at its intrinsic size — which is how the search icon ended up
   enormous. Same box as the font icon it replaces.
   ========================================================================== */
.solx-search svg {
  position: absolute;
  left: 16px;
  width: 20px;
  height: 20px;
  color: #6B726E;
  pointer-events: none;
}
.solx-field svg {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #6B726E;
  pointer-events: none;
}
/* ==========================================================================
   GRAVITY FORMS ERROR STATES
   Gravity Forms 3's Orbital theme derives its entire error treatment from one
   custom property, --gf-color-danger (#c02b0a). Retuning that to the design's
   --color-error is what makes the summary box, the control border, the message
   and the required asterisk all agree, instead of overriding a dozen selectors
   and losing to GF's specificity.

   The few structural rules below are the ones the design differs on: it flags
   a field with a hairline and a small message, and does not fill the field
   wrapper or recolour its label.
   ========================================================================== */
/* GF declares the property on .gform-theme--framework and its stylesheet is
   enqueued after the theme's, so a bare .gform_wrapper ties and loses. Both
   the framework theme and the legacy wrapper are matched here. */
.gform_wrapper.gform-theme,
.gform_wrapper.gform--framework,
.gform_wrapper.gform-theme--framework,
.gform_wrapper.gform_legacy_markup_wrapper,
.gform_wrapper {
  --gf-color-danger: #E63946;
  --gf-color-danger-rgb: 230, 57, 70;

  /* Buttons derive from these three, the same way the error states derive
     from --gf-color-danger. Setting them here recolours submit, the file
     picker and every other control button in one place, instead of chasing
     .gform_button / .gform_button_select_files / .gform-theme-button. */
  --gf-color-primary: var(--color-action);
  --gf-color-primary-rgb: 46, 125, 78;
  --gf-color-primary-darker: var(--color-primary);
  --gf-color-primary-contrast: #FFFFFF;
}
/* The design's buttons are pills; Gravity Forms' are not.
   Colour comes from the style settings in resources/php/gravity-forms.php, but
   the radius is written into GF's per-form inline block, which is keyed on an
   ID selector — so this one declaration has to force it. Nothing else here
   needs !important. */
.gform_wrapper .gform_button,
.gform_wrapper .gform_button_select_files {
  border-radius: var(--radius-pill) !important;
  font-weight: 700;
  min-height: var(--touch-target);
  padding-inline: var(--space-6);
}
/* No fill, no recoloured label — the control border carries the signal. */
.gform_wrapper .gfield.gfield_error {
  background: transparent;
  border: 0;
  padding: 0;
}
.gform_wrapper .gfield.gfield_error .gfield_label,
.gform_wrapper .gfield.gfield_error legend {
  color: var(--color-text);
}
/* The design's control bridge sets the `border` shorthand, which resets
   border-color — so these have to match its shape (class + attribute) to
   outrank it, not just name the element. */
.gform_wrapper .gfield.gfield_error input[type="text"],
.gform_wrapper .gfield.gfield_error input[type="email"],
.gform_wrapper .gfield.gfield_error input[type="tel"],
.gform_wrapper .gfield.gfield_error input[type="url"],
.gform_wrapper .gfield.gfield_error input[type="number"],
.gform_wrapper .gfield.gfield_error select,
.gform_wrapper .gfield.gfield_error textarea,
.gform_wrapper .gfield.gfield_error input[type="text"]:focus,
.gform_wrapper .gfield.gfield_error input[type="email"]:focus,
.gform_wrapper .gfield.gfield_error textarea:focus {
  border: 1px solid var(--color-error);
}
/* Message under the control — the design's .cr-error. */
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
  display: block;
  width: 100%;
  margin-top: var(--space-2);
  padding: 0;
  background: none;
  border: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  color: var(--color-error);
}
/* Summary box above the form. */
.gform_wrapper .gform_validation_errors {
  background: rgba(230, 57, 70, 0.06);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-md);
  box-shadow: none;
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
}
.gform_wrapper .gform_validation_errors > h2 {
  color: var(--color-error);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}
/* Required marker matches .cr-req. */
.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required_asterisk {
  color: var(--color-error);
  font-weight: 700;
}
/* ==========================================================================
   GRAVITY FORMS CONTROL HEIGHT
   Gravity Forms sizes its controls with a fixed height (--gf-ctrl-size-*),
   while the design sizes them with padding and lets the box grow. Applying
   both gives a 38px border-box with 16px of padding top and bottom — a 6px
   content area for an 18px line. A text input still paints its placeholder,
   but a <select> is overflow:clip, so it renders completely empty, which is
   how the position dropdown ended up looking unusable.

   Letting the padding decide the height is what the design does.
   ========================================================================== */
.gform_wrapper .gfield input[type="text"],
.gform_wrapper .gfield input[type="email"],
.gform_wrapper .gfield input[type="tel"],
.gform_wrapper .gfield input[type="url"],
.gform_wrapper .gfield input[type="number"],
.gform_wrapper .gfield select,
.gform_wrapper .gfield textarea {
  height: auto;
  min-height: var(--touch-target);
  line-height: 1.4;
}
.gform_wrapper .gfield select {
  /* Room for the chevron the design draws on the right. */
  padding-right: calc(var(--space-4) + 24px);
}
/* Page templates that are not blocks, so nothing else enqueues their CSS. */
/* ==========================================================================
   DETAIL TEMPLATES — .sd-* / .nd-*

   Styles for the two single-post templates, lifted verbatim from the handoff
   stylesheet (design/roctec-v1-4-weilin-07092026/project/styles.css):

     single-solution.php  — 05_Solutions_Details.html
     single.php           — 07_News_Details.html

   Neither template is a block, so these rules cannot live in a block
   stylesheet. This file is imported by resources/css/app.css and therefore
   goes through the Mix build — a change here needs `npm run dev`, unlike the
   per-block CSS WordPress enqueues straight from blocks/<slug>/.

   Deliberately NOT here:
   - `.sv-points`     shared with 03_Services and 08_Careers; owned elsewhere.
   - `.sol-tile*`     already in common.css.
   - `body.page-solution-detail` / `body.page-news-detail` header-logo rules,
     and the `html.reveal-pre .sd-detail` pre-paint state — already in
     common.css.
   - `.sd-crumbbar`, `.sd-body`, `.sd-eyebrow`, `.sd-side-title`,
     `.sd-related`, `.nd-related` — dead in v1.4: no page in the handoff
     carries that markup.
   ========================================================================== */
.sd-detail {
  padding: var(--hero-clear-tight) 0 var(--section-pad);
  background: var(--color-surface);
}
.sd-inner { max-width: 880px; }
.sd-inner-wide { max-width: 1232px; }
.sd-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.sd-main { max-width: 880px; }
.sd-side { position: sticky; top: calc(var(--header-height) + var(--space-6)); margin-top: 80px; }
.sd-side .sd-topline { margin-bottom: var(--space-12); }
.sd-side-toggle { display: none; }
.sd-side-nav {
  display: flex;
  flex-direction: column;
}
.sd-side-group {
  border-top: 1px solid var(--color-border);
}
.sd-side-group:first-child { border-top: 0; }
.sd-side-group.is-open {
  padding-bottom: var(--space-4);
}
.sd-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}
.sd-side-group.is-open > .sd-side-head { color: var(--color-primary); }
.sd-side-head:hover { color: var(--color-action); }
.sd-side-head svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: #6B7370;
  transition: transform var(--motion-base) var(--ease-standard);
}
.sd-side-group.is-open > .sd-side-head svg { transform: rotate(180deg); }
.sd-side-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  flex-direction: column;
  gap: var(--space-3);
}
.sd-side-group.is-open > .sd-side-list { display: flex; }
.sd-side-list a {
  display: block;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: #3A3F3C;
  text-wrap: pretty;
}
.sd-side-list a:hover { color: var(--color-action); }
.sd-side-list li {
  border-left: 2px solid transparent;
  padding-left: var(--space-4);
}
.sd-side-list li:has(a[aria-current="page"]) { border-left-color: var(--color-primary); }
.sd-side-list a[aria-current="page"] {
  color: var(--color-action);
  font-weight: 600;
}
.sd-topline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.sd-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-action);
}
.sd-back svg { width: 16px; height: 16px; }
.sd-back:hover { color: var(--color-primary); }
.sd-detail h2 {
  font-size: var(--text-h2);
  text-wrap: pretty;
  margin-bottom: var(--space-6);
}
.sd-figure {
  margin: var(--space-8) 0 var(--space-8);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
}
.sd-figure-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 560px;
  overflow: hidden;
}
.sd-figure-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.sd-figure figcaption {
  font-size: var(--text-sm);
  color: #3A3F3C;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
}
.sd-block + .sd-block { margin-top: var(--space-12); }
.sd-block h3 {
  font-size: var(--text-h4);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.sd-block p {
  font-size: var(--text-base);
  line-height: 1.7;
  color: #3A3F3C;
  text-wrap: pretty;
}
.sd-block p + p { margin-top: var(--space-6); }
.sd-scope-line strong { color: var(--color-text); font-weight: 700; }
.sd-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-12);
  background: #F7F7F7;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.sd-fact {
  padding: var(--space-2) 0;
}
.sd-fact:first-child { border-left: 0; }
.sd-fact dt {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6B7370;
  margin-bottom: var(--space-2);
}
.sd-fact dd { font-size: var(--text-base); font-weight: 500; line-height: 1.5; color: var(--color-text); }
.sd-block p a {
  color: #1A56DB;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sd-block p a:hover { color: #143FA5; }
.nd-share {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.nd-share-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6B7370;
}
.nd-share-links { display: flex; gap: var(--space-2); }
.nd-share-link {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: #3A3F3C;
  font-size: 19px;
  cursor: pointer;
  transition: border-color var(--motion-base) var(--ease-standard),
              color var(--motion-base) var(--ease-standard),
              background var(--motion-base) var(--ease-standard);
}
.nd-share-link svg { width: 19px; height: 19px; display: block; }
.nd-share-link:hover {  border-color: var(--color-primary);
  color: var(--color-primary);
  background: #F7F7F7;
}
.nd-copied {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #3A3F3C;
  color: #FFFFFF;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateX(-50%);
  pointer-events: none;
  visibility: hidden;
}
.nd-copied i { font-size: 14px; line-height: 1; }
.nd-copied.is-visible { opacity: 1; visibility: visible; }
.nd-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
}
.nd-pager-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-6) var(--space-6);
  color: var(--color-text);
  position: relative;
  transition: background var(--motion-base) var(--ease-standard);
}
.nd-pager-item + .nd-pager-item { border-left: 1px solid var(--color-border); }
.nd-pager-item:hover { background: #F7F7F7; }
.nd-pager-next { text-align: right; align-items: flex-end; }
.nd-pager-dir {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6B7370;
  transition: color var(--motion-base) var(--ease-standard);
}
.nd-pager-item:hover .nd-pager-dir { color: var(--color-primary); }
.nd-pager-next .nd-pager-dir { justify-content: flex-end; }
.nd-pager-dir svg {
  width: 16px;
  height: 16px;
  transition: transform var(--motion-base) var(--ease-standard);
}
.nd-pager-prev:hover .nd-pager-dir svg { transform: translateX(-3px); }
.nd-pager-next:hover .nd-pager-dir svg { transform: translateX(3px); }
.nd-pager-title {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.35;
  text-wrap: pretty;
}
.sd-date {
  font-size: var(--text-sm);
  color: #6B7370;
  margin-bottom: var(--space-4);
}
@media (max-width: 767px) {
  .sd-layout { gap: var(--space-8); }

    .sd-facts { grid-template-columns: minmax(0, 1fr); padding: var(--space-5, 20px) var(--space-6); }

    .sd-fact { border-left: 0; padding-block: var(--space-4); border-top: 1px solid rgba(13, 18, 15, 0.10); }

    .sd-fact:first-child { border-top: 0; padding-top: var(--space-2); }
}
@media (max-width: 1080px) {
  .sd-layout { gap: 40px; grid-template-columns: 220px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .sd-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }

    .sd-side { position: static; }

    .sd-side .sd-topline { margin-bottom: var(--space-6); }

    .sd-side-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);
      width: 100%;
      padding: var(--space-3) var(--space-4);
      background: var(--color-surface-muted);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-family: inherit;
      font-size: var(--text-xs);
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--color-text);
    }

    .sd-side-toggle svg {
      width: 16px;
      height: 16px;
      flex: none;
      transition: transform var(--motion-base) var(--ease-standard);
    }

    .sd-side-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

    .sd-side-nav { display: none; padding-top: var(--space-2); }

    .sd-side.is-open .sd-side-nav { display: block; }

    .sd-detail h2 { font-size: var(--text-h3); }

    .sd-block p { font-size: var(--text-base); }
}
@media (max-width: 700px) {
  .nd-pager { grid-template-columns: minmax(0, 1fr); }

    .nd-pager-item + .nd-pager-item { border-left: 0; border-top: 1px solid var(--color-border); }

    .nd-pager-next, .nd-pager-next .nd-pager-dir { text-align: left; justify-content: flex-start; align-items: flex-start; }
}
/* --------------------------------------------------------------------------
   TEMPLATE ADAPTATIONS

   Two rules with no counterpart in the handoff. Both exist because the
   prototype hand-wrote markup that WordPress now generates; neither changes
   any value the design specifies.
   -------------------------------------------------------------------------- */
/* The prototype wraps each headed section of a solution in its own `.sd-block`
   and spaces them with `.sd-block + .sd-block`. The body is now `the_content()`,
   so every section lives inside ONE `.sd-block` and that adjacency never
   matches. Restore the same gap ahead of each subsequent heading. */
.sd-block > * + h3 { margin-top: var(--space-12); }
/* `.nd-pager` is a two-column grid holding previous + next. The first and last
   post in the archive only have one neighbour; keep a lone "next" in the
   right-hand column rather than letting it collapse into the left. */
.nd-pager > .nd-pager-next:only-child { grid-column: 2; }
/* ==========================================================================
   404 — PAGE NOT FOUND
   Lifted from the handoff stylesheet (13_404_Not_Found).

   A 404 is a template, not a block, so these rules cannot live in a block
   stylesheet. Add `@import "pages/not-found.css";` to resources/css/app.css
   after common.css — nothing enqueues this file on its own.

   Two rescopings from the handoff:

   - The prototype puts `page-404` on <body>. header.php calls
     body_class( 'bg-white' ), which WordPress already stamps with `error404`
     on a 404 request, so that is the hook used here. No filter needed.
   - The prototype's flex column runs body > #main-content > .nf-hero. The
     theme's chrome is body > #page > #content > main > .nf-hero, and #page
     already carries Tailwind's `min-h-screen flex flex-col`, so the chain is
     continued through #content and <main> instead.

   The rules below reach outside the 404 markup on purpose: the header logo
   swap (this page has no dark hero for the white logo to sit on) and the
   slimmed footer (the design fits header + hero + footer in one viewport, so
   the footer's logomark and both link rows are hidden here).
   ========================================================================== */
.error404 .site-header:not(.header-overlay):not(.is-scrolled):not(.is-menu-open) .brand-logo-white { opacity: 0; }
.error404 .site-header:not(.header-overlay):not(.is-scrolled):not(.is-menu-open) .brand-logo-dark { opacity: 1; }
.error404 .site-header:not(.header-overlay):not(.is-scrolled):not(.is-menu-open) .nav-toggle {
  color: var(--color-text);
  border-color: var(--color-border);
}
.error404 { display: flex; flex-direction: column; min-height: 100vh; }
.error404 .site-footer {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}
.error404 .footer-logomark,
.error404 .footer-row-primary,
.error404 .footer-row-secondary,
.error404 .footer-divider { display: none; }
.nf-hero {
  position: relative;
  background: #F7F7F7;
  padding-top: var(--header-height);
  padding-bottom: var(--space-12);
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.nf-inner {
  display: flex;
  justify-content: center;
  width: 100%;
}
.nf-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}
.nf-code {
  font-size: clamp(7rem, 14vw, 13rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--color-primary);
}
.nf-copy h1 {
  font-size: var(--text-h1);
  color: var(--color-text);
}
.nf-copy p {
  font-size: var(--text-base);
  color: #3A3F3C;
  max-width: 46ch;
  text-wrap: pretty;
}
.nf-copy .btn { margin-top: var(--space-4); }
@media (max-width: 900px) {
  .nf-hero { padding-top: var(--header-height); padding-bottom: var(--space-8); }
}
/* The prototype's `.page-404 #main-content { flex: 1; … }`, continued through
   this theme's two chrome wrappers so .nf-hero still absorbs the free space. */
.error404 #content,
.error404 #content > main { flex: 1; display: flex; flex-direction: column; }