/*
Theme Name: Sabbia
Description: Sabbia International Custom Theme
Author: AI
Version: 1.0.0
*/

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

.container {
  width: 100%;
}

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

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

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

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

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

.pointer-events-none {
  pointer-events: none;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.-right-10 {
  right: -2.5rem;
}

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

.bottom-0 {
  bottom: 0px;
}

.left-0 {
  left: 0px;
}

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

.left-4 {
  left: 1rem;
}

.left-\[calc\(100\%\+0\.25rem\)\] {
  left: calc(100% + 0.25rem);
}

.right-0 {
  right: 0px;
}

.right-2 {
  right: 0.5rem;
}

.right-4 {
  right: 1rem;
}

.top-0 {
  top: 0px;
}

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

.top-24 {
  top: 6rem;
}

.top-4 {
  top: 1rem;
}

.top-full {
  top: 100%;
}

.isolate {
  isolation: isolate;
}

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

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

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

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

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

.col-span-1 {
  grid-column: span 1 / span 1;
}

.col-span-full {
  grid-column: 1 / -1;
}

.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}

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

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

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

.mb-12 {
  margin-bottom: 3rem;
}

.mb-16 {
  margin-bottom: 4rem;
}

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

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

.mb-3 {
  margin-bottom: 0.75rem;
}

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

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

.mb-8 {
  margin-bottom: 2rem;
}

.mb-section-gap {
  margin-bottom: 120px;
}

.mb-stack-gap-lg {
  margin-bottom: 32px;
}

.mb-stack-gap-md {
  margin-bottom: 16px;
}

.mb-stack-gap-sm {
  margin-bottom: 8px;
}

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

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

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

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

.mr-2 {
  margin-right: 0.5rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

.mt-section-gap {
  margin-top: 120px;
}

.mt-stack-gap-lg {
  margin-top: 32px;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.block {
  display: block;
}

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

.flex {
  display: flex;
}

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

.table {
  display: table;
}

.\!grid {
  display: grid !important;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.aspect-\[16\/9\] {
  aspect-ratio: 16/9;
}

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

.aspect-video {
  aspect-ratio: 16 / 9;
}

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

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

.h-10 {
  height: 2.5rem;
}

.h-12 {
  height: 3rem;
}

.h-16 {
  height: 4rem;
}

.h-24 {
  height: 6rem;
}

.h-32 {
  height: 8rem;
}

.h-40 {
  height: 10rem;
}

.h-56 {
  height: 14rem;
}

.h-64 {
  height: 16rem;
}

.h-9 {
  height: 2.25rem;
}

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

.h-full {
  height: 100%;
}

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

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

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

.w-10 {
  width: 2.5rem;
}

.w-12 {
  width: 3rem;
}

.w-16 {
  width: 4rem;
}

.w-24 {
  width: 6rem;
}

.w-\[20rem\] {
  width: 20rem;
}

.w-auto {
  width: auto;
}

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

.w-full {
  width: 100%;
}

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

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

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

.max-w-3xl {
  max-width: 48rem;
}

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

.max-w-7xl {
  max-width: 80rem;
}

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

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

.max-w-max-width {
  max-width: 1280px;
}

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

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

.max-w-xl {
  max-width: 36rem;
}

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

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

.flex-grow {
  flex-grow: 1;
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-\[2px\] {
  --tw-translate-y: 2px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-default {
  cursor: default;
}

.cursor-pointer {
  cursor: pointer;
}

.resize {
  resize: both;
}

.list-inside {
  list-style-position: inside;
}

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

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

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

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

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

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

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

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

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

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

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

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

.gap-1 {
  gap: 0.25rem;
}

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

.gap-10 {
  gap: 2.5rem;
}

.gap-12 {
  gap: 3rem;
}

.gap-16 {
  gap: 4rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-gutter {
  gap: 24px;
}

.gap-px {
  gap: 1px;
}

.gap-stack-gap-lg {
  gap: 32px;
}

.gap-stack-gap-md {
  gap: 16px;
}

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

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

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

.gap-x-gutter {
  -moz-column-gap: 24px;
       column-gap: 24px;
}

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

.gap-y-stack-gap-md {
  row-gap: 16px;
}

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

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

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

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

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

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

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

.overflow-hidden {
  overflow: hidden;
}

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

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

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

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.text-balance {
  text-wrap: balance;
}

.rounded {
  border-radius: 0.125rem;
}

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

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

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

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

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-sm {
  border-radius: 0.125rem;
}

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

.rounded-b-2xl {
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

.rounded-t-\[23px\] {
  border-top-left-radius: 23px;
  border-top-right-radius: 23px;
}

.border {
  border-width: 1px;
}

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

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

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

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

.border-outline-variant {
  --tw-border-opacity: 1;
  border-color: rgb(207 198 176 / var(--tw-border-opacity, 1));
}

.border-outline-variant\/10 {
  border-color: rgb(207 198 176 / 0.1);
}

.border-outline-variant\/20 {
  border-color: rgb(207 198 176 / 0.2);
}

.border-outline-variant\/30 {
  border-color: rgb(207 198 176 / 0.3);
}

.border-outline-variant\/40 {
  border-color: rgb(207 198 176 / 0.4);
}

.border-outline-variant\/50 {
  border-color: rgb(207 198 176 / 0.5);
}

.border-primary {
  --tw-border-opacity: 1;
  border-color: rgb(230 200 85 / var(--tw-border-opacity, 1));
}

.border-primary\/20 {
  border-color: rgb(230 200 85 / 0.2);
}

.border-primary\/30 {
  border-color: rgb(230 200 85 / 0.3);
}

.border-secondary {
  --tw-border-opacity: 1;
  border-color: rgb(197 174 97 / var(--tw-border-opacity, 1));
}

.border-secondary\/10 {
  border-color: rgb(197 174 97 / 0.1);
}

.border-secondary\/20 {
  border-color: rgb(197 174 97 / 0.2);
}

.border-secondary\/30 {
  border-color: rgb(197 174 97 / 0.3);
}

.border-transparent {
  border-color: transparent;
}

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

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

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

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

.bg-on-surface {
  --tw-bg-opacity: 1;
  background-color: rgb(60 60 60 / var(--tw-bg-opacity, 1));
}

.bg-outline-variant {
  --tw-bg-opacity: 1;
  background-color: rgb(207 198 176 / var(--tw-bg-opacity, 1));
}

.bg-outline-variant\/30 {
  background-color: rgb(207 198 176 / 0.3);
}

.bg-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(230 200 85 / var(--tw-bg-opacity, 1));
}

.bg-primary-container {
  --tw-bg-opacity: 1;
  background-color: rgb(230 200 85 / var(--tw-bg-opacity, 1));
}

.bg-primary-container\/20 {
  background-color: rgb(230 200 85 / 0.2);
}

.bg-primary-container\/90 {
  background-color: rgb(230 200 85 / 0.9);
}

.bg-primary\/10 {
  background-color: rgb(230 200 85 / 0.1);
}

.bg-primary\/15 {
  background-color: rgb(230 200 85 / 0.15);
}

.bg-primary\/5 {
  background-color: rgb(230 200 85 / 0.05);
}

.bg-secondary-container {
  --tw-bg-opacity: 1;
  background-color: rgb(251 225 142 / var(--tw-bg-opacity, 1));
}

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

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

.bg-surface-container {
  --tw-bg-opacity: 1;
  background-color: rgb(240 237 237 / var(--tw-bg-opacity, 1));
}

.bg-surface-container-high {
  --tw-bg-opacity: 1;
  background-color: rgb(234 232 231 / var(--tw-bg-opacity, 1));
}

.bg-surface-container-low {
  --tw-bg-opacity: 1;
  background-color: rgb(245 243 242 / var(--tw-bg-opacity, 1));
}

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

.bg-surface-dim {
  --tw-bg-opacity: 1;
  background-color: rgb(220 217 217 / var(--tw-bg-opacity, 1));
}

.bg-surface\/90 {
  background-color: rgb(255 255 255 / 0.9);
}

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

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

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

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

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

.from-background\/90 {
  --tw-gradient-from: rgb(255 255 255 / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

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

.from-surface-container-lowest {
  --tw-gradient-from: #ffffff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-background\/40 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-black\/50 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-black\/60 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

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

.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.bg-cover {
  background-size: cover;
}

.bg-center {
  background-position: center;
}

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

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

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.p-stack-gap-md {
  padding: 16px;
}

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

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

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

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

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

.px-margin-mobile {
  padding-left: 16px;
  padding-right: 16px;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

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

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

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

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

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

.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

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

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

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

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

.py-stack-gap-lg {
  padding-top: 32px;
  padding-bottom: 32px;
}

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

.pb-2 {
  padding-bottom: 0.5rem;
}

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

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

.pb-section-gap {
  padding-bottom: 120px;
}

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

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

.pl-8 {
  padding-left: 2rem;
}

.pr-6 {
  padding-right: 1.5rem;
}

.pt-10 {
  padding-top: 2.5rem;
}

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

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

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

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

.pt-6 {
  padding-top: 1.5rem;
}

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

.pt-section-gap {
  padding-top: 120px;
}

.pt-stack-gap-lg {
  padding-top: 32px;
}

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

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

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

.font-body-lg {
  font-family: Geist, sans-serif;
}

.font-body-md {
  font-family: Geist, sans-serif;
}

.font-display {
  font-family: Geist, sans-serif;
}

.font-headline-lg {
  font-family: Geist, sans-serif;
}

.font-headline-lg-mobile {
  font-family: Geist, sans-serif;
}

.font-headline-md {
  font-family: Geist, sans-serif;
}

.font-label-caps {
  font-family: Geist, sans-serif;
}

.font-label-sm {
  font-family: Geist, sans-serif;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.text-body-lg {
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0em;
  font-weight: 400;
}

.text-body-md {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0em;
  font-weight: 400;
}

.text-body-sm {
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0em;
  font-weight: 400;
}

.text-headline-lg {
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.text-headline-lg-mobile {
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.text-headline-md {
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: 0em;
  font-weight: 500;
}

.text-label-caps {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.text-label-sm {
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  font-weight: 500;
}

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

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

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

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

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

.uppercase {
  text-transform: uppercase;
}

.normal-case {
  text-transform: none;
}

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

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

.leading-relaxed {
  line-height: 1.625;
}

.leading-snug {
  line-height: 1.375;
}

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

.tracking-normal {
  letter-spacing: 0em;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.text-\[\#25D366\] {
  --tw-text-opacity: 1;
  color: rgb(37 211 102 / var(--tw-text-opacity, 1));
}

.text-error {
  --tw-text-opacity: 1;
  color: rgb(186 26 26 / var(--tw-text-opacity, 1));
}

.text-on-background {
  --tw-text-opacity: 1;
  color: rgb(60 60 60 / var(--tw-text-opacity, 1));
}

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

.text-on-primary-container {
  --tw-text-opacity: 1;
  color: rgb(101 83 0 / var(--tw-text-opacity, 1));
}

.text-on-primary-fixed {
  --tw-text-opacity: 1;
  color: rgb(34 27 0 / var(--tw-text-opacity, 1));
}

.text-on-secondary-container {
  --tw-text-opacity: 1;
  color: rgb(117 99 30 / var(--tw-text-opacity, 1));
}

.text-on-surface {
  --tw-text-opacity: 1;
  color: rgb(60 60 60 / var(--tw-text-opacity, 1));
}

.text-on-surface-variant {
  --tw-text-opacity: 1;
  color: rgb(76 70 54 / var(--tw-text-opacity, 1));
}

.text-on-surface\/70 {
  color: rgb(60 60 60 / 0.7);
}

.text-outline {
  --tw-text-opacity: 1;
  color: rgb(125 119 100 / var(--tw-text-opacity, 1));
}

.text-outline-variant\/40 {
  color: rgb(207 198 176 / 0.4);
}

.text-primary {
  --tw-text-opacity: 1;
  color: rgb(230 200 85 / var(--tw-text-opacity, 1));
}

.text-secondary {
  --tw-text-opacity: 1;
  color: rgb(197 174 97 / var(--tw-text-opacity, 1));
}

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

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

.text-white\/75 {
  color: rgb(255 255 255 / 0.75);
}

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

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

.decoration-primary {
  text-decoration-color: #E6C855;
}

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

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

.opacity-0 {
  opacity: 0;
}

.opacity-10 {
  opacity: 0.1;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-80 {
  opacity: 0.8;
}

.mix-blend-multiply {
  mix-blend-mode: multiply;
}

.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_0_1px_rgba\(197\2c 174\2c 97\2c 0\.1\)\] {
  --tw-shadow: 0 0 0 1px rgba(197,174,97,0.1);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

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

.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

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

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

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

.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  -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);
}

.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  -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);
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  -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-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

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

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

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

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

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

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

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

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

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

.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.5);
}

/* Used by the equipment cards; previously defined inline in the
           now-removed header-equipment.php. */

.shadow-soft {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

/* Horizontal tab strips scroll rather than wrap, without a visible bar. */

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* The homepage hero carries its height as an inline style, which a
           utility class cannot override. Below lg the panels stack, so the
           fixed height is released and they size to their content instead of
           clipping the headline. Desktop keeps the inline values. */

@media (max-width: 1023px) {
  .hero-home {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* Standard hero shell. Mirrors the homepage hero box in front-page.php
           (height: calc(100vh - 220px); min 450px; max 800px) so every page's
           hero shares one set of dimensions.

           It is a min-height rather than a fixed height on purpose: every hero
           lands on the identical box whenever its content fits, but a taller
           panel (the mining card on a short window, or any grid hero once it
           stacks on mobile) pushes the box down instead of being cut off by the
           overflow-hidden that rounds the corners. */

.hero-standard {
  min-height: clamp(450px, calc(100vh - 220px), 800px);
}

/* ==================================================================
           Main navigation
           Built on the Apple design guidance: a translucent floating layer,
           press feedback on pointer-down, a current-section marker, and a
           product menu that materialises from the control that opened it.
           ================================================================== */

/* A floating material with the page passing beneath it, rather than an
           opaque strip. saturate lifts the colour that blur washes out, and the
           bright top edge reads as light catching the material. */

.site-nav {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 8px 24px rgba(0, 0, 0, 0.05);
}

/* Small type wants a touch of positive tracking; the wordmark above it
           is large and already tracks tight. Size-specific, not one value. */

.nav-link {
  display: block;
  text-align: center;
  letter-spacing: 0.01em;
  color: #4c4636;
  transition: color 150ms ease-out, opacity 100ms ease-out;
}

.nav-link:hover {
  color: #E6C855;
}

/* Feedback lands on the press, not on release. */

.nav-link:active {
  opacity: 0.55;
}

/* Wayfinding: the bar answers "where am I" without the page having to.
           The rule is drawn with a transform so it animates on the compositor,
           and it grows from the centre of the label it belongs to. */

.nav-link.is-current {
  color: #3C3C3C;
  position: relative;
}

.nav-link.is-current::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: #E6C855;
  transform: scaleX(1);
  transform-origin: center;
}

.nav-link:not(.is-current)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: #E6C855;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

.nav-link:not(.is-current) {
  position: relative;
}

.nav-link:not(.is-current):hover::after {
  transform: scaleX(1);
}

/* The glyph inside is 24px. Without a size on the button the hit area
           was 24px too, which is a small thing to aim a thumb at. 44px square
           is the comfortable minimum; the negative margin keeps the extra area
           from pushing the bar's visual spacing outwards. */

.nav-icon-btn {
  min-width: 44px;
  min-height: 44px;
  margin-inline: -0.625rem;
  transition: color 150ms ease-out, transform 100ms ease-out;
}

.nav-icon-btn:active {
  transform: scale(0.92);
}

/* The product menu is a larger surface than the bar, so it reads as a
           thicker material: more blur and a deeper shadow. It is anchored to
           the icon that opens it, so the spatial relationship is obvious, and
           it leaves along the path it arrived by.

           Blur and scale animate together so the panel reads as a material
           arriving rather than a rectangle fading in. The curve is critically
           damped: a menu that was not thrown should not overshoot. */

#secondary-nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  transform-origin: top right;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.96) translateY(-8px);
  filter: blur(6px);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 24px 48px rgba(0, 0, 0, 0.12);
  transition: opacity 260ms cubic-bezier(0.32, 0.72, 0, 1),
                        transform 260ms cubic-bezier(0.32, 0.72, 0, 1),
                        filter 260ms cubic-bezier(0.32, 0.72, 0, 1),
                        visibility 260ms;
}

#secondary-nav.is-open {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: blur(0);
}

/* Products dropdown
           A narrow single column, not the wide category bar. The bar is a set
           of panels to browse; this is a list to scan and pick from, so it is
           sized to the longest label rather than to the window, and it grows
           out of the label that opens it instead of dropping across the page.

           Sixteen categories are taller than a short window, so the list
           scrolls. The panel is a flex column and only the list scrolls, which
           keeps the heading and the footer row out of the moving area: a
           sticky footer over a scrolling list showed the category names
           through it. `overscroll-behavior: contain` keeps that wheel from
           reaching the page underneath, which would otherwise dismiss the menu
           the moment someone scrolled to the bottom of the list. */

.products-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.0625rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.products-menu__chevron {
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

.products-menu:hover .products-menu__trigger,
        .products-menu:focus-within .products-menu__trigger {
  color: #E6C855;
}

.products-menu:hover .products-menu__chevron,
        .products-menu:focus-within .products-menu__chevron {
  transform: rotate(180deg);
}

.products-menu__panel {
  display: flex;
  flex-direction: column;
  width: 17rem;
  padding: 0.5rem;
  transform-origin: top center;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.97) translate(-50%, -6px);
  filter: blur(5px);
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 24px 48px rgba(0, 0, 0, 0.16);
  transition: opacity 240ms cubic-bezier(0.32, 0.72, 0, 1),
                        transform 240ms cubic-bezier(0.32, 0.72, 0, 1),
                        filter 240ms cubic-bezier(0.32, 0.72, 0, 1),
                        visibility 240ms;
}

.products-menu:hover .products-menu__panel,
        .products-menu:focus-within .products-menu__panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
  filter: blur(0);
}

.products-menu__list {
  flex: 1 1 auto;
  min-height: 0;
  overscroll-behavior: contain;
}

.products-menu__label {
  flex: 0 0 auto;
  padding: 0.375rem 0.75rem 0.5rem;
  font-family: Geist, sans-serif;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4c4636;
}

/* The bar sets `whitespace-nowrap` for its own row of labels; inside
           the panel a long category should wrap rather than run past the edge. */

.products-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.625rem;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  color: #4c4636;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

.products-menu__item:hover,
        .products-menu__item:focus-visible {
  background: #f5f3f2;
  color: #E6C855;
}

.products-menu__arrow {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 150ms ease-out, transform 150ms ease-out;
}

.products-menu__item:hover .products-menu__arrow,
        .products-menu__item:focus-visible .products-menu__arrow {
  opacity: 1;
  transform: none;
}

/* The trigger is a disclosure button, so this row is the only way to
           reach the full catalogue from the bar. It sits below the scrolling
           list rather than inside it, so it is always in reach. */

.products-menu__all {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.375rem -0.5rem -0.5rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  color: #655300;
  transition: background-color 150ms ease-out;
}

.products-menu__all:hover {
  background: #f5f3f2;
}

/* Reduced motion keeps the feedback but drops the travel: a short
           cross-fade rather than a scale, and no blur to swim through. */

@media (prefers-reduced-motion: reduce) {
  #secondary-nav,
            .products-menu__panel {
    transform: none;
    filter: none;
    transition: opacity 160ms ease, visibility 160ms;
  }

  .products-menu__chevron,
            .products-menu__arrow {
    transition: none;
  }

  .products-menu.is-open .products-menu__chevron {
    transform: none;
  }

  .nav-link:not(.is-current)::after {
    transition: none;
  }

  .nav-icon-btn:active {
    transform: none;
  }
}

/* Frosted surfaces go solid rather than translucent. */

@media (prefers-reduced-transparency: reduce) {
  .site-nav,
            #secondary-nav {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* High contrast wants solid ground and a defined edge. */

@media (prefers-contrast: more) {
  .site-nav,
            #secondary-nav,
            .products-menu__panel {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: #3C3C3C;
  }

  .nav-link {
    color: #3C3C3C;
  }
}

/* ==================================================================
           Scroll reveal
           Content settles into place as it comes into view. Opt-in per element
           via data-reveal, so a page can simply not use it: the contact page
           carries none.

           Everything is gated behind .has-js, which the head script sets. If
           the script never runs, nothing is ever hidden, so the page degrades
           to plain visible content rather than a blank screen.

           Only transform and opacity animate, both compositor properties, and
           the curve is a decelerating ease so motion arrives rather than
           bounces. Distances are small on purpose: this should read as content
           settling, not sliding in from off-stage.
           ================================================================== */

.has-js [data-reveal] {
  opacity: 0;
  transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
                        transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
                        clip-path 720ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.has-js [data-reveal="up"]    {
  transform: translate3d(0, 18px, 0);
}

.has-js [data-reveal="left"]  {
  transform: translate3d(-24px, 0, 0);
}

.has-js [data-reveal="right"] {
  transform: translate3d(24px, 0, 0);
}

.has-js [data-reveal="scale"] {
  transform: scale(0.965);
}

/* An image that uncovers itself rather than fading: the frame opens
           while the picture inside eases back to its true size. */

.has-js [data-reveal="image"] {
  clip-path: inset(12% 0 0 0);
  transform: scale(1.04);
}

/* Type that wipes up from its own baseline. Used sparingly, on a
           section's opening line only. */

.has-js [data-reveal="text"] {
  clip-path: inset(0 0 110% 0);
  transform: translate3d(0, 12px, 0);
}

.has-js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  will-change: auto;
}

/* Below the point where content sits side by side there is nothing to
           slide in from, and the offset itself pushes the page wider than the
           screen while it waits. Both horizontal variants become vertical. */

@media (max-width: 1023px) {
  .has-js [data-reveal="left"],
            .has-js [data-reveal="right"] {
    transform: translate3d(0, 18px, 0);
  }
}

/* Reduced motion still reveals, just without travel: a short fade with
           no transform, no clip and no stagger to sit through. */

@media (prefers-reduced-motion: reduce) {
  .has-js [data-reveal] {
    transform: none !important;
    clip-path: none !important;
    transition: opacity 220ms ease !important;
    transition-delay: 0ms !important;
  }
}

/* ==================================================================
           Mobile primary navigation
           The divisions stay on screen below lg rather than living behind the
           hamburger. Four labels will not fit a phone's width at a readable
           size, so the row scrolls instead of shrinking the type: the first
           chips are visible and the rest are a swipe away.
           ================================================================== */

.mobile-nav-strip {
  position: sticky;
  top: 84px;
  z-index: 40;
  margin-top: 0.75rem;
  padding-block: 0.5rem;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
}

.mobile-nav-strip__list {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-inline: 16px;
}

.mobile-nav-chip {
  display: inline-flex;
  align-items: center;
  /* 44px tall: a comfortable touch target, not a text link. */
  min-height: 44px;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid #cfc6b0;
  background: #ffffff;
  font-family: Geist, sans-serif;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #4c4636;
  scroll-snap-align: start;
  transition: color 160ms ease-out, border-color 160ms ease-out,
                        background-color 160ms ease-out, transform 100ms ease-out;
}

.mobile-nav-chip:active {
  transform: scale(0.97);
}

.mobile-nav-chip.is-current {
  background: #E6C855;
  border-color: #E6C855;
  color: #221b00;
  font-weight: 600;
}

.mobile-nav-chip:focus-visible {
  outline: 2px solid #3C3C3C;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav-chip {
    transition: color 150ms ease, background-color 150ms ease;
    transform: none !important;
  }

  .mobile-nav-strip__list {
    scroll-behavior: auto;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .mobile-nav-strip {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ==================================================================
           Homepage components
           Section rhythm, division cards, the turnkey band and the closing
           call to action. Motion is restrained and critically damped: these
           are surfaces you point at, not throw.
           ================================================================== */

.section-band {
  padding-block: clamp(4.5rem, 9vw, 7.5rem);
}

.section-band--tint {
  background: #f5f3f2;
}

.section-eyebrow {
  font-family: Geist, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* 12px text: the light golds sit at 1.65:1 and 2.19:1 on white. */
  color: #655300;
  margin-bottom: 0.875rem;
}

/* Large type reads too loose at its default tracking, so it tightens as
           it grows, while the body copy under it stays near zero. */

.section-title {
  font-family: Geist, sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #3C3C3C;
  text-wrap: balance;
}

/* ---- buttons ---------------------------------------------------- */

.btn-primary,
        .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border-radius: 999px;
  font-family: Geist, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color 200ms ease-out, color 200ms ease-out,
                        border-color 200ms ease-out, box-shadow 200ms ease-out,
                        transform 100ms ease-out;
}

.btn-primary {
  background: #E6C855;
  color: #221b00;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.btn-primary:hover {
  background: #ffe172;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

.btn-ghost:hover {
  border-color: #E6C855;
  color: #E6C855;
}

/* Feedback on the press, not on release. */

.btn-primary:active,
        .btn-ghost:active {
  transform: scale(0.98);
}

.btn-primary:focus-visible,
        .btn-ghost:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #3C3C3C;
}

.cta-band .btn-primary:focus-visible,
        .cta-band .btn-ghost:focus-visible {
  box-shadow: 0 0 0 2px #3C3C3C, 0 0 0 4px #E6C855;
}

/* ---- overview figures -------------------------------------------- */

.stat-cell {
  background: #ffffff;
  padding: 1.75rem 1.5rem;
}

.stat-label {
  font-family: Geist, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4c4636;
}

.stat-figure {
  font-family: Geist, sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #655300;
  margin-top: 0.375rem;
}

/* ---- division cards ---------------------------------------------- */

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

@media (min-width: 640px) {
  .division-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .division-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.division-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #cfc6b0;
  border-radius: 1rem;
  overflow: hidden;
  transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1),
                        box-shadow 300ms cubic-bezier(0.32, 0.72, 0, 1),
                        border-color 300ms ease-out;
}

.division-card:hover {
  transform: translateY(-4px);
  border-color: #E6C855;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 18px 40px rgba(0, 0, 0, 0.10);
}

/* The focus ring belongs to the card, not just the small link inside
           it, so keyboard users see the same target pointer users get. */

.division-card:focus-within {
  border-color: #E6C855;
  box-shadow: 0 0 0 3px rgba(230, 200, 85, 0.45);
}

.division-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f5f3f2;
}

.division-card__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 600ms cubic-bezier(0.32, 0.72, 0, 1);
}

.division-card:hover .division-card__img {
  transform: scale(1.04);
}

/* A small translucent chip over the photograph: light material on a
           busy surface, so it carries a shadow to stay separate from it. */

.division-card__icon {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  color: #3C3C3C;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.division-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.5rem;
}

.division-card__title {
  font-family: Geist, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #3C3C3C;
}

.division-card__text {
  font-family: Geist, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #4c4636;
  margin-top: 0.625rem;
}

.division-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: 1.25rem;
  font-family: Geist, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3C3C3C;
  transition: color 200ms ease-out;
}

/* The whole card is the hit target; the link keeps the accessible name
           and the visible focus, so nothing is lost to a keyboard or a reader. */

.division-card__cta::after {
  content: '';
  position: absolute;
  inset: 0;
}

.division-card:hover .division-card__cta {
  color: #655300;
}

.division-card__cta:focus-visible {
  outline: none;
}

/* The arrow leans the way the card is about to take you. */

.division-card__arrow {
  transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
}

.division-card:hover .division-card__arrow {
  transform: translateX(4px);
}

/* ---- turnkey sequence and reasons -------------------------------- */

.turnkey-list,
        .why-list {
  display: flex;
  flex-direction: column;
}

.turnkey-step {
  display: flex;
  gap: 1rem;
  padding-block: 1.125rem;
  border-top: 1px solid #cfc6b0;
}

.turnkey-step:last-child {
  border-bottom: 1px solid #cfc6b0;
}

.turnkey-step__num {
  font-family: Geist, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #655300;
  padding-top: 0.25rem;
  min-width: 1.75rem;
}

.turnkey-step__title,
        .why-item__title {
  font-family: Geist, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: #3C3C3C;
}

.turnkey-step__text,
        .why-item__text {
  font-family: Geist, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #4c4636;
  margin-top: 0.25rem;
}

.why-item {
  display: flex;
  gap: 1rem;
  padding-block: 1.125rem;
}

.why-item__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(230, 200, 85, 0.22);
  color: #655300;
  margin-top: 0.125rem;
}

/* ---- closing call to action -------------------------------------- */

.cta-band {
  background: #3C3C3C;
  color: #ffffff;
  padding-block: clamp(4rem, 8vw, 6.5rem);
}

.cta-title {
  font-family: Geist, sans-serif;
  font-weight: 700;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
  .division-card,
            .division-card__img,
            .division-card__arrow,
            .btn-primary,
            .btn-ghost {
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
    transform: none !important;
  }
}

/* ==================================================================
           Page components shared by the divisions and About
           ================================================================== */

.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(420px, 62vh, 620px);
  overflow: hidden;
  border-radius: 1rem;
  margin-top: 1rem;
}

.page-hero__media {
  position: absolute;
  inset: 0;
}

.page-hero__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Two stops rather than one: the copy sits on the deep end while the
           far side of the picture stays readable as a photograph. */

.page-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28, 28, 28, 0.92) 0%, rgba(28, 28, 28, 0.72) 38%, rgba(28, 28, 28, 0.28) 100%);
}

.page-hero__inner {
  position: relative;
  width: 100%;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.page-hero__label {
  font-family: Geist, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #E6C855;
  margin-bottom: 0.875rem;
}

.page-hero__title {
  font-family: Geist, sans-serif;
  font-weight: 700;
  font-size: clamp(2.125rem, 5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #ffffff;
  max-width: 18ch;
  text-wrap: balance;
}

.page-hero__lead {
  font-family: Geist, sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  margin-top: 1.25rem;
  max-width: 46ch;
}

/* ---- capability cards -------------------------------------------- */

.capability-card {
  padding: 1.75rem;
  border: 1px solid #cfc6b0;
  border-radius: 1rem;
  background: #ffffff;
  transition: border-color 260ms ease-out, box-shadow 260ms cubic-bezier(0.32, 0.72, 0, 1),
                        transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
}

.capability-card:hover {
  border-color: #E6C855;
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.capability-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: rgba(230, 200, 85, 0.20);
  color: #655300;
  margin-bottom: 1.125rem;
}

.capability-card__title {
  font-family: Geist, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: #3C3C3C;
}

.capability-card__text {
  font-family: Geist, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #4c4636;
  margin-top: 0.5rem;
}

/* ---- split feature ------------------------------------------------ */

.split-title {
  font-family: Geist, sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #3C3C3C;
  text-wrap: balance;
}

.split-media {
  border-radius: 1rem;
  overflow: hidden;
  background: #f5f3f2;
}

.split-media__img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Full-width use: the supplied photography is 16:9, so a band image
           shows the whole frame instead of being cropped to the half-column
           ratio and standing a thousand pixels tall. */

.split-media--wide .split-media__img {
  aspect-ratio: 16 / 9;
}

.split-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.125rem;
  border-radius: 999px;
  background: rgba(230, 200, 85, 0.22);
  color: #655300;
}

/* ---- who we serve -------------------------------------------------- */

.served-grid {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  border-top: 1px solid #cfc6b0;
}

@media (min-width: 768px) {
  .served-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    -moz-column-gap: 3rem;
         column-gap: 3rem;
  }
}

.served-item {
  padding-block: 1.5rem;
  border-bottom: 1px solid #cfc6b0;
}

.served-item__title {
  font-family: Geist, sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #3C3C3C;
}

.served-item__text {
  font-family: Geist, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #4c4636;
  margin-top: 0.25rem;
}

/* ---- other divisions ---------------------------------------------- */

.other-div {
  position: relative;
  padding: 1.5rem;
  border: 1px solid #cfc6b0;
  border-radius: 1rem;
  background: #ffffff;
  transition: border-color 240ms ease-out, transform 240ms cubic-bezier(0.32, 0.72, 0, 1);
}

.other-div:hover {
  border-color: #E6C855;
  transform: translateY(-3px);
}

.other-div__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: rgba(230, 200, 85, 0.20);
  color: #655300;
}

.other-div__title {
  font-family: Geist, sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #3C3C3C;
  margin-top: 0.875rem;
}

.other-div__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.75rem;
  font-family: Geist, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #655300;
}

.other-div__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .capability-card, .other-div {
    transition: border-color 150ms ease;
    transform: none !important;
  }
}

/* ==================================================================
           Legal prose
           Long-form text from the editor, so the styling has to come from the
           container rather than utility classes on each element.
           ================================================================== */

.legal-prose {
  font-family: Geist, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: #4c4636;
}

.legal-prose > * + * {
  margin-top: 1.25rem;
}

.legal-prose h2 {
  font-family: Geist, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #3C3C3C;
  margin-top: 2.75rem;
}

.legal-prose h3 {
  font-family: Geist, sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #3C3C3C;
  margin-top: 1.75rem;
}

.legal-prose ul,
        .legal-prose ol {
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.legal-prose ul {
  list-style: disc;
}

.legal-prose ol {
  list-style: decimal;
}

.legal-prose li::marker {
  color: #655300;
}

.legal-prose strong {
  color: #3C3C3C;
  font-weight: 600;
}

.legal-prose a {
  color: #3C3C3C;
  text-decoration: underline;
  text-decoration-color: #E6C855;
  text-underline-offset: 4px;
  transition: color 160ms ease-out;
}

.legal-prose a:hover {
  color: #655300;
}

/* A note the client is meant to act on should not look like body copy. */

.legal-prose .legal-note {
  padding: 1.25rem 1.5rem;
  border-left: 3px solid #E6C855;
  background: #f5f3f2;
  border-radius: 0 0.5rem 0.5rem 0;
  font-size: 15px;
}

/* ==================================================================
           Site footer
           ================================================================== */

.site-footer {
  background: #3C3C3C;
  color: #ffffff;
  padding-block: clamp(3.5rem, 6vw, 5rem) 2rem;
  /* The closing call to action sits on the same ground, so a hairline
               keeps the two reading as separate zones rather than one slab. */
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.footer-heading {
  font-family: Geist, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #E6C855;
  margin-bottom: 1rem;
}

/* Vibrancy: over a dark ground, body text sits a step brighter than a
           flat grey would, so it stays legible without shouting. */

.footer-note {
  font-family: Geist, sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.footer-links a,
        .footer-contact-link {
  font-family: Geist, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  transition: color 180ms ease-out;
}

.footer-links a:hover,
        .footer-contact-link:hover {
  color: #E6C855;
}

.footer-links a:focus-visible,
        .footer-contact-link:focus-visible,
        .footer-legal-links a:focus-visible,
        .footer-social:focus-visible {
  outline: 2px solid #E6C855;
  outline-offset: 3px;
  border-radius: 4px;
}

.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: color 180ms ease-out, border-color 180ms ease-out, transform 100ms ease-out;
}

.footer-social:hover {
  color: #E6C855;
  border-color: #E6C855;
}

.footer-social:active {
  transform: scale(0.94);
}

.footer-legal {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

@media (min-width: 768px) {
  .footer-legal {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.footer-legal-links a {
  font-family: Geist, sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.66);
  transition: color 180ms ease-out;
}

.footer-legal-links a:hover {
  color: #E6C855;
}

@media (prefers-reduced-motion: reduce) {
  .footer-social {
    transition: color 150ms ease, border-color 150ms ease;
    transform: none !important;
  }
}

/* ==================================================================
           Previous clients marquee
           Healthcare page only. The strip runs edge to edge so the loop has
           somewhere to come from and go to, while the copy above it stays on
           the page's content width.
           ================================================================== */

.clients {
  padding-block: clamp(3rem, 6vw, 4.5rem);
  overflow: hidden;
}

.clients__title {
  font-family: Geist, sans-serif;
  font-size: clamp(1.0625rem, 1.9vw, 1.375rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: #3C3C3C;
  text-wrap: pretty;
}

.clients__track-wrap {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* The strip fades out at both edges rather than being cut off, so a
           logo leaving the frame does not simply vanish mid-stride. */

.clients__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(3rem, 8vw, 7rem);
  z-index: 2;
  pointer-events: none;
}

.clients__fade--left {
  left: 0;
  background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.clients__fade--right {
  right: 0;
  background: linear-gradient(to left, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.clients__track {
  display: flex;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  /* One gap value for every pair, so spacing stays even whichever
               logo happens to sit next to which. */
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

/* One box per logo, shaped to the supplied assets (256x292) so they fill
           it rather than letterboxing inside a landscape cell. Every cell is
           the same size, so spacing cannot drift between a tall crest and a
           wide wordmark, and object-contain below means a future logo with a
           different ratio simply sits inside the box undistorted. */

.clients__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(104px, 13vw, 136px);
  aspect-ratio: 256 / 292;
}

.clients__logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

/* Partner and client logo marquee. Lives here rather than in a \3c style>
           block inside the section, so the same markup can be pulled into more
           than one template without shipping the keyframes twice. The track
           holds the logo run duplicated, and translating it by half its width
           lands exactly on the start of the second copy, so the loop is
           seamless. */

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

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

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

.animate-scroll-marquee:hover {
  animation-play-state: paused;
}

/* Readers who ask for less motion get the logos as a static row. */

@media (prefers-reduced-motion: reduce) {
  .animate-scroll-marquee {
    animation: none;
  }
}

/* Material Symbols draws each icon from a ligature, so an icon span's
           text content is the icon's name: "keyboard_arrow_down",
           "shopping_cart", "menu". Until the icon file is active that name is
           just a word, and a word is much wider than the glyph that replaces
           it. Left alone the secondary nav reserved enough room for six
           "keyboard_arrow_down" labels and wrapped onto a second row, then
           snapped back when the font landed.

           The font is now requested with display=block (see sabbia_scripts in
           functions.php) so the name is never painted. Pinning the box to 1em,
           the advance width of every Material Symbols glyph, makes the space
           reserved before and after the swap identical so nothing moves
           either. This lives in the theme stylesheet, which is render
           blocking, so it holds from the very first paint with no script
           involved.

           overflow only matters if the font fails outright: once the block
           period lapses the browser falls back to swap, and clipping keeps a
           dead CDN from spilling icon names across every page.

           box-sizing matters here: Tailwind's preflight makes everything
           border-box, under which width:1em on a padded icon (page-healthcare
           has one at p-3) would spend the whole 24px on padding and leave the
           glyph a zero-width content box. content-box keeps 1em meaning the
           glyph itself, with any padding outside it. */

.material-symbols-outlined {
  box-sizing: content-box;
  width: 1em;
  overflow: hidden;
}

/* Mega Menu Styles
           The panels are positioned with `left-0 right-0` (or `right-0` for the
           narrow one) rather than a centring transform, because these rules load
           after Tailwind's utilities and would otherwise overwrite it. */

.mega-menu {
  opacity: 0;
  visibility: hidden;
  translate: 0 10px;
  transition: opacity 0.3s ease, translate 0.3s ease, visibility 0.3s;
}

/* .is-open is what opens the first category the moment the product menu
           is revealed, so the panel is never an empty strip of headings. It is
           listed alongside the hover and focus states rather than duplicating
           them, and the script drops it as soon as another category is pointed
           at, so only one panel is ever showing. */

.mega-menu-trigger.is-open .mega-menu,
        .mega-menu-trigger:hover .mega-menu,
        .mega-menu-trigger:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

.selection\:bg-primary *::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: rgb(230 200 85 / var(--tw-bg-opacity, 1));
}

.selection\:bg-primary *::selection {
  --tw-bg-opacity: 1;
  background-color: rgb(230 200 85 / var(--tw-bg-opacity, 1));
}

.selection\:text-on-primary *::-moz-selection {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.selection\:text-on-primary *::selection {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.selection\:bg-primary::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: rgb(230 200 85 / var(--tw-bg-opacity, 1));
}

.selection\:bg-primary::selection {
  --tw-bg-opacity: 1;
  background-color: rgb(230 200 85 / var(--tw-bg-opacity, 1));
}

.selection\:text-on-primary::-moz-selection {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.selection\:text-on-primary::selection {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.placeholder\:text-on-surface-variant\/50::-moz-placeholder {
  color: rgb(76 70 54 / 0.5);
}

.placeholder\:text-on-surface-variant\/50::placeholder {
  color: rgb(76 70 54 / 0.5);
}

.before\:absolute::before {
  content: var(--tw-content);
  position: absolute;
}

.before\:-left-4::before {
  content: var(--tw-content);
  left: -1rem;
}

.before\:top-0::before {
  content: var(--tw-content);
  top: 0px;
}

.before\:h-full::before {
  content: var(--tw-content);
  height: 100%;
}

.before\:w-4::before {
  content: var(--tw-content);
  width: 1rem;
}

.before\:content-\[\'\'\]::before {
  --tw-content: '';
  content: var(--tw-content);
}

.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}

.after\:-bottom-2::after {
  content: var(--tw-content);
  bottom: -0.5rem;
}

.after\:left-0::after {
  content: var(--tw-content);
  left: 0px;
}

.after\:h-\[2px\]::after {
  content: var(--tw-content);
  height: 2px;
}

.after\:w-0::after {
  content: var(--tw-content);
  width: 0px;
}

.after\:bg-primary::after {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(230 200 85 / var(--tw-bg-opacity, 1));
}

.after\:transition-all::after {
  content: var(--tw-content);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.after\:content-\[\'\'\]::after {
  --tw-content: '';
  content: var(--tw-content);
}

.first\:mt-0:first-child {
  margin-top: 0px;
}

.hover\:border-t-2:hover {
  border-top-width: 2px;
}

.hover\:border-\[\#25D366\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(37 211 102 / var(--tw-border-opacity, 1));
}

.hover\:border-primary:hover {
  --tw-border-opacity: 1;
  border-color: rgb(230 200 85 / var(--tw-border-opacity, 1));
}

.hover\:border-primary\/50:hover {
  border-color: rgb(230 200 85 / 0.5);
}

.hover\:border-t-primary:hover {
  --tw-border-opacity: 1;
  border-top-color: rgb(230 200 85 / var(--tw-border-opacity, 1));
}

.hover\:border-t-secondary:hover {
  --tw-border-opacity: 1;
  border-top-color: rgb(197 174 97 / var(--tw-border-opacity, 1));
}

.hover\:bg-primary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(230 200 85 / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary-fixed:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 225 114 / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary\/90:hover {
  background-color: rgb(230 200 85 / 0.9);
}

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

.hover\:bg-surface-container:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(240 237 237 / var(--tw-bg-opacity, 1));
}

.hover\:bg-surface-container-low:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(245 243 242 / var(--tw-bg-opacity, 1));
}

.hover\:bg-surface-variant:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(228 226 225 / var(--tw-bg-opacity, 1));
}

.hover\:text-\[\#25D366\]:hover {
  --tw-text-opacity: 1;
  color: rgb(37 211 102 / var(--tw-text-opacity, 1));
}

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

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

.hover\:text-on-surface:hover {
  --tw-text-opacity: 1;
  color: rgb(60 60 60 / var(--tw-text-opacity, 1));
}

.hover\:text-primary:hover {
  --tw-text-opacity: 1;
  color: rgb(230 200 85 / var(--tw-text-opacity, 1));
}

.hover\:text-primary-container:hover {
  --tw-text-opacity: 1;
  color: rgb(230 200 85 / var(--tw-text-opacity, 1));
}

.hover\:text-secondary:hover {
  --tw-text-opacity: 1;
  color: rgb(197 174 97 / var(--tw-text-opacity, 1));
}

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

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

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

.hover\:opacity-80:hover {
  opacity: 0.8;
}

.hover\:opacity-90:hover {
  opacity: 0.9;
}

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

.hover\:shadow-xl:hover {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:after\:w-full:hover::after {
  content: var(--tw-content);
  width: 100%;
}

.focus\:border-primary:focus {
  --tw-border-opacity: 1;
  border-color: rgb(230 200 85 / var(--tw-border-opacity, 1));
}

.focus\:border-secondary:focus {
  --tw-border-opacity: 1;
  border-color: rgb(197 174 97 / var(--tw-border-opacity, 1));
}

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

.focus\:ring-0:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-1:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-primary:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(230 200 85 / var(--tw-ring-opacity, 1));
}

.focus\:ring-secondary:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(197 174 97 / var(--tw-ring-opacity, 1));
}

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

.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-on-surface:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(60 60 60 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:ring-offset-surface:focus-visible {
  --tw-ring-offset-color: #ffffff;
}

.focus-visible\:ring-offset-white:focus-visible {
  --tw-ring-offset-color: #fff;
}

.active\:scale-\[0\.98\]:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:focus-within .group-focus-within\:text-primary {
  --tw-text-opacity: 1;
  color: rgb(230 200 85 / var(--tw-text-opacity, 1));
}

.group\/category:focus-within .group-focus-within\/category\:opacity-100 {
  opacity: 1;
}

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

.group:hover .group-hover\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:bg-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(230 200 85 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-primary\/30 {
  background-color: rgb(230 200 85 / 0.3);
}

.group\/category:hover .group-hover\/category\:text-primary {
  --tw-text-opacity: 1;
  color: rgb(230 200 85 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-primary {
  --tw-text-opacity: 1;
  color: rgb(230 200 85 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-secondary {
  --tw-text-opacity: 1;
  color: rgb(197 174 97 / var(--tw-text-opacity, 1));
}

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

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

.dark\:text-on-primary-container:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(101 83 0 / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-primary-fixed:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(255 225 114 / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-secondary-fixed:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(251 225 142 / var(--tw-text-opacity, 1));
}

@media not all and (min-width: 1024px) {
  .max-lg\:relative {
    position: relative;
  }

  .max-lg\:z-10 {
    z-index: 10;
  }

  .max-lg\:flex {
    display: flex;
  }

  .max-lg\:hidden {
    display: none;
  }

  .max-lg\:h-auto {
    height: auto;
  }

  .max-lg\:min-h-\[170px\] {
    min-height: 170px;
  }

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

  .max-lg\:flex-col {
    flex-direction: column;
  }

  .max-lg\:justify-end {
    justify-content: flex-end;
  }

  .max-lg\:gap-4 {
    gap: 1rem;
  }
}

@media not all and (min-width: 640px) {
  .max-sm\:gap-3 {
    gap: 0.75rem;
  }

  .max-sm\:p-5 {
    padding: 1.25rem;
  }

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

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

@media (min-width: 640px) {
  .sm\:left-auto {
    left: auto;
  }

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

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

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

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

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

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

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

@media (min-width: 768px) {
  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .md\:col-span-8 {
    grid-column: span 8 / span 8;
  }

  .md\:mx-8 {
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .md\:mb-16 {
    margin-bottom: 4rem;
  }

  .md\:mt-0 {
    margin-top: 0px;
  }

  .md\:block {
    display: block;
  }

  .md\:aspect-\[21\/9\] {
    aspect-ratio: 21/9;
  }

  .md\:w-3\/4 {
    width: 75%;
  }

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

  .md\:min-w-\[420px\] {
    min-width: 420px;
  }

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

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

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

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

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

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

  .md\:gap-6 {
    gap: 1.5rem;
  }

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

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

  .md\:p-12 {
    padding: 3rem;
  }

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

  .md\:px-margin-desktop {
    padding-left: 64px;
    padding-right: 64px;
  }

  .md\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .md\:font-headline-lg {
    font-family: Geist, sans-serif;
  }

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

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

  .md\:text-headline-lg {
    font-size: 48px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 700;
  }
}

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

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

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .lg\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .lg\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .lg\:col-span-7 {
    grid-column: span 7 / span 7;
  }

  .lg\:col-span-8 {
    grid-column: span 8 / span 8;
  }

  .lg\:col-span-9 {
    grid-column: span 9 / span 9;
  }

  .lg\:mt-0 {
    margin-top: 0px;
  }

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

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

  .lg\:hidden {
    display: none;
  }

  .lg\:w-2\/3 {
    width: 66.666667%;
  }

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

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

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

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

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

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

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

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

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

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

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

  .lg\:gap-24 {
    gap: 6rem;
  }

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

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

  .lg\:pt-\[4\.5rem\] {
    padding-top: 4.5rem;
  }

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

@media (min-width: 1280px) {
  .xl\:gap-10 {
    gap: 2.5rem;
  }

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

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

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

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

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

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

@media (min-width: 1536px) {
  .\32xl\:gap-x-6 {
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
  }

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