*, ::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: Inter, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

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

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

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

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

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

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

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

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

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

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

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

b,
strong {
  font-weight: bolder;
}

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

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

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

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

button,
select {
  text-transform: none;
}

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

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

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

:-moz-focusring {
  outline: auto;
}

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

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

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

progress {
  vertical-align: baseline;
}

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

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

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

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

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

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

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

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

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

summary {
  display: list-item;
}

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

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

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

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

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

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

/*
Set the default cursor for buttons.
*/

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

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

:disabled {
  cursor: default;
}

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

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

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

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

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

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

body {
  overflow-x: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(248 249 250 / var(--tw-bg-opacity, 1));
  font-family: Inter, sans-serif;
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Zilla Slab", serif;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: rgb(10 25 47 / var(--tw-text-opacity, 1));
}

::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: rgb(255 179 0 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(10 25 47 / var(--tw-text-opacity, 1));
}

::selection {
  --tw-bg-opacity: 1;
  background-color: rgb(255 179 0 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(10 25 47 / var(--tw-text-opacity, 1));
}

/* Ultra-premium primary button */

.btn-primary {
  position: relative;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 179 0 / var(--tw-bg-opacity, 1));
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(10 25 47 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

@media (max-width: 767px) {
  main .container-custom .flex.btn-primary:has(> .rounded-xl),
  main .container-custom .flex.btn-primary:has(> .rounded-2xl),
  main .container-custom .flex.btn-primary:has(> .w-12.h-12),
  main .container-custom .flex.btn-primary:has(> .w-14.h-14),
  main .container-custom .flex.btn-primary:has(> .w-16.h-16),
  main .container-custom .flex.btn-primary:has(> .w-20.h-20),
  main .container-custom .flex.btn-primary:has(> .shrink-0 > svg) {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  main .container-custom .flex.items-center:has(> .btn-primary),
  main .container-custom .flex.items-start:has(> .btn-primary) {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  main .container-custom .flex.btn-primary.gap-5:has(> div > svg.w-8.h-8),
  main .container-custom .flex.btn-primary.gap-6:has(> div > svg.w-8.h-8) {
    display: block;
    text-align: center;
  }

  main .container-custom .flex.btn-primary.gap-5:has(> div > svg.w-8.h-8) > div:first-child,
  main .container-custom .flex.btn-primary.gap-6:has(> div > svg.w-8.h-8) > div:first-child {
    display: inline-block;
    vertical-align: middle;
    margin-right: 1rem;
  }

  main .container-custom .flex.btn-primary.gap-5:has(> div > svg.w-8.h-8) > div:not(:first-child),
  main .container-custom .flex.btn-primary.gap-6:has(> div > svg.w-8.h-8) > div:not(:first-child) {
    display: inline;
  }
}

.btn-primary:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-shadow: 0 0 40px -10px rgba(255, 179, 0, 0.4);
  --tw-shadow-colored: 0 0 40px -10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.btn-primary:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --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(4px + 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);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(253 224 71 / var(--tw-ring-opacity, 1));
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0px;
  z-index: -1;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

@media (max-width: 767px) {
  .btn-primary.bottom-10.left-10::before {
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.25rem 1.25rem 1.5rem;
    text-align: center;
    transform: none;
  }

  .btn-primary.bottom-6.left-6::before {
    bottom: 0;
    left: 0;
    padding: 0.75rem 0.75rem 1rem;
    transform: none;
  }
}

.btn-primary:hover::before {
  opacity: 0.2;
}

/* Glassmorphic secondary button */

.btn-secondary {
  position: relative;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.3);
  background-color: rgb(255 255 255 / 0.1);
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --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);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

@media (max-width: 767px) {
  main .container-custom .flex.btn-secondary:has(> .rounded-xl),
  main .container-custom .flex.btn-secondary:has(> .rounded-2xl),
  main .container-custom .flex.btn-secondary:has(> .w-12.h-12),
  main .container-custom .flex.btn-secondary:has(> .w-14.h-14),
  main .container-custom .flex.btn-secondary:has(> .w-16.h-16),
  main .container-custom .flex.btn-secondary:has(> .w-20.h-20),
  main .container-custom .flex.btn-secondary:has(> .shrink-0 > svg) {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  main .container-custom .flex.items-center:has(> .btn-secondary),
  main .container-custom .flex.items-start:has(> .btn-secondary) {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  main .container-custom .flex.btn-secondary.gap-5:has(> div > svg.w-8.h-8),
  main .container-custom .flex.btn-secondary.gap-6:has(> div > svg.w-8.h-8) {
    display: block;
    text-align: center;
  }

  main .container-custom .flex.btn-secondary.gap-5:has(> div > svg.w-8.h-8) > div:first-child,
  main .container-custom .flex.btn-secondary.gap-6:has(> div > svg.w-8.h-8) > div:first-child {
    display: inline-block;
    vertical-align: middle;
    margin-right: 1rem;
  }

  main .container-custom .flex.btn-secondary.gap-5:has(> div > svg.w-8.h-8) > div:not(:first-child),
  main .container-custom .flex.btn-secondary.gap-6:has(> div > svg.w-8.h-8) > div:not(:first-child) {
    display: inline;
  }
}

.btn-secondary:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  background-color: rgb(255 255 255 / 0.2);
  --tw-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.1);
  --tw-shadow-colored: 0 30px 60px -15px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.btn-secondary:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.section-padding {
  position: relative;
  padding-top: 6rem;
  padding-bottom: 6rem;
}

@media (max-width: 767px) {
  .section-padding {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

@media (min-width: 768px) {
  .section-padding {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}

.container-custom {
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

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

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

/* Glass Card */

.glass-card {
  border-radius: 1rem;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.5);
  background-color: rgb(255 255 255 / 0.7);
  --tw-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.1);
  --tw-shadow-colored: 0 30px 60px -15px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-backdrop-blur: blur(24px);
  -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);
}

@media (max-width: 767px) {
  main .container-custom .w-16.h-16.glass-card,
  main .container-custom .w-14.h-14.glass-card,
  main .container-custom .w-12.h-12.glass-card,
  main .container-custom .w-20.h-20.glass-card {
    margin-left: auto;
    margin-right: auto;
  }

  
  main .container-custom .flex.items-center:has(> .glass-card),
  main .container-custom .flex.items-start:has(> .glass-card) {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.dark-glass {
  border-radius: 1rem;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
  background-color: rgb(10 25 47 / 0.8);
  --tw-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.1);
  --tw-shadow-colored: 0 30px 60px -15px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-backdrop-blur: blur(24px);
  -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);
}

@media (max-width: 767px) {
  main .container-custom .w-16.h-16.dark-glass,
  main .container-custom .w-14.h-14.dark-glass,
  main .container-custom .w-12.h-12.dark-glass,
  main .container-custom .w-20.h-20.dark-glass {
    margin-left: auto;
    margin-right: auto;
  }

  
  main .container-custom .flex.items-center:has(> .dark-glass),
  main .container-custom .flex.items-start:has(> .dark-glass) {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

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

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.-inset-4 {
  inset: -1rem;
}

.inset-0 {
  inset: 0px;
}

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

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

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

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

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

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

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

.bottom-0 {
  bottom: 0px;
}

.bottom-10 {
  bottom: 2.5rem;
}

.bottom-8 {
  bottom: 2rem;
}

.left-0 {
  left: 0px;
}

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

.left-10 {
  left: 2.5rem;
}

.left-8 {
  left: 2rem;
}

.right-0 {
  right: 0px;
}

.right-1\/4 {
  right: 25%;
}

.right-6 {
  right: 1.5rem;
}

.right-8 {
  right: 2rem;
}

.top-0 {
  top: 0px;
}

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

.top-8 {
  top: 2rem;
}

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

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

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

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

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

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

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.-m-6 {
  margin: -1.5rem;
}

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

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

.mb-10 {
  margin-bottom: 2.5rem;
}

.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-5 {
  margin-bottom: 1.25rem;
}

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

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

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

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

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

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

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

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

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

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

.block {
  display: block;
}

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

.flex {
  display: flex;
}

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

.grid {
  display: grid;
}

.hidden {
  display: none;
}

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

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

.aspect-square {
  aspect-ratio: 1 / 1;
}

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

.h-1 {
  height: 0.25rem;
}

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

.h-10 {
  height: 2.5rem;
}

.h-12 {
  height: 3rem;
}

.h-14 {
  height: 3.5rem;
}

.h-16 {
  height: 4rem;
}

.h-2 {
  height: 0.5rem;
}

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

.h-20 {
  height: 5rem;
}

.h-3 {
  height: 0.75rem;
}

.h-32 {
  height: 8rem;
}

.h-4 {
  height: 1rem;
}

.h-48 {
  height: 12rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-64 {
  height: 16rem;
}

.h-7 {
  height: 1.75rem;
}

.h-8 {
  height: 2rem;
}

.h-96 {
  height: 24rem;
}

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

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

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

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

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

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

.h-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

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

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

.w-10 {
  width: 2.5rem;
}

.w-12 {
  width: 3rem;
}

.w-14 {
  width: 3.5rem;
}

.w-16 {
  width: 4rem;
}

.w-2 {
  width: 0.5rem;
}

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

.w-20 {
  width: 5rem;
}

.w-24 {
  width: 6rem;
}

.w-32 {
  width: 8rem;
}

.w-4 {
  width: 1rem;
}

.w-48 {
  width: 12rem;
}

.w-5 {
  width: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

.w-64 {
  width: 16rem;
}

.w-7 {
  width: 1.75rem;
}

.w-8 {
  width: 2rem;
}

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

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

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

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

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

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.w-px {
  width: 1px;
}

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

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

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

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

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

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

.max-w-lg {
  max-width: 32rem;
}

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

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

.max-w-xs {
  max-width: 20rem;
}

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

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

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

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

.basis-full {
  flex-basis: 100%;
}

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

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

.-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-full {
  --tw-translate-y: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

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

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

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

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

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

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

@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out forwards;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.cursor-pointer {
  cursor: pointer;
}

.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

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

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

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

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

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

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

.gap-10 {
  gap: 2.5rem;
}

.gap-16 {
  gap: 4rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-20 {
  gap: 5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

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

.gap-y-3 {
  row-gap: 0.75rem;
}

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

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

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

.overflow-hidden {
  overflow: hidden;
}

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

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

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

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

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

.rounded-\[2\.5rem\] {
  border-radius: 2.5rem;
}

.rounded-\[2rem\] {
  border-radius: 2rem;
}

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

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

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

.rounded-b-full {
  border-bottom-right-radius: 9999px;
  border-bottom-left-radius: 9999px;
}

.rounded-t-lg {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.border {
  border-width: 1px;
}

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

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

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

.border-\[6px\] {
  border-width: 6px;
}

.border-\[8px\] {
  border-width: 8px;
}

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

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

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

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

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

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

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

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

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

.border-background-gray {
  --tw-border-opacity: 1;
  border-color: rgb(248 249 250 / var(--tw-border-opacity, 1));
}

.border-blue-300 {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}

.border-blue-400 {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}

.border-corporate-amber {
  --tw-border-opacity: 1;
  border-color: rgb(255 179 0 / var(--tw-border-opacity, 1));
}

.border-corporate-amber\/20 {
  border-color: rgb(255 179 0 / 0.2);
}

.border-corporate-dark {
  --tw-border-opacity: 1;
  border-color: rgb(10 25 47 / var(--tw-border-opacity, 1));
}

.border-corporate-lightBlue {
  --tw-border-opacity: 1;
  border-color: rgb(0 95 173 / var(--tw-border-opacity, 1));
}

.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}

.border-gray-100\/20 {
  border-color: rgb(243 244 246 / 0.2);
}

.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.border-gray-200\/50 {
  border-color: rgb(229 231 235 / 0.5);
}

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

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

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

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

.bg-background-gray {
  --tw-bg-opacity: 1;
  background-color: rgb(248 249 250 / var(--tw-bg-opacity, 1));
}

.bg-blue-400\/50 {
  background-color: rgb(96 165 250 / 0.5);
}

.bg-blue-50\/50 {
  background-color: rgb(239 246 255 / 0.5);
}

.bg-blue-50\/80 {
  background-color: rgb(239 246 255 / 0.8);
}

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

.bg-corporate-dark {
  --tw-bg-opacity: 1;
  background-color: rgb(10 25 47 / var(--tw-bg-opacity, 1));
}

.bg-corporate-lightBlue {
  --tw-bg-opacity: 1;
  background-color: rgb(0 95 173 / var(--tw-bg-opacity, 1));
}

.bg-corporate-lightBlue\/10 {
  background-color: rgb(0 95 173 / 0.1);
}

.bg-corporate-lightBlue\/30 {
  background-color: rgb(0 95 173 / 0.3);
}

.bg-corporate-lightBlue\/40 {
  background-color: rgb(0 95 173 / 0.4);
}

.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

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

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

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

.bg-\[url\(\'data\:image\/svg\+xml\;base64\2c PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI\+PGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMSIgZmlsbD0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjA1KSIvPjwvc3ZnPg\=\=\'\)\] {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMSIgZmlsbD0icmdiYSgyNTUsIDI1NSwgMjU1LCAwLjA1KSIvPjwvc3ZnPg==');
}

.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, 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-corporate-amber {
  --tw-gradient-from: #FFB300 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 179 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-corporate-dark {
  --tw-gradient-from: #0A192F var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(10 25 47 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-corporate-dark\/50 {
  --tw-gradient-from: rgb(10 25 47 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(10 25 47 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-corporate-dark\/90 {
  --tw-gradient-from: rgb(10 25 47 / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(10 25 47 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-corporate-lightBlue {
  --tw-gradient-from: #005fad var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 95 173 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-white {
  --tw-gradient-from: #fff 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-corporate-amber {
  --tw-gradient-to: rgb(255 179 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #FFB300 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-corporate-dark\/30 {
  --tw-gradient-to: rgb(10 25 47 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(10 25 47 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

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

.to-corporate-dark\/50 {
  --tw-gradient-to: rgb(10 25 47 / 0.5) var(--tw-gradient-to-position);
}

.to-corporate-lightBlue {
  --tw-gradient-to: #005fad var(--tw-gradient-to-position);
}

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

.to-yellow-300 {
  --tw-gradient-to: #fde047 var(--tw-gradient-to-position);
}

.bg-clip-text {
  -webkit-background-clip: text;
          background-clip: text;
}

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

.p-10 {
  padding: 2.5rem;
}

.p-12 {
  padding: 3rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

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

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

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

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

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

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

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.font-sans {
  font-family: Inter, sans-serif;
}

.font-serif {
  font-family: "Zilla Slab", serif;
}

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

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

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

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

.text-\[0\.6875rem\] {
  font-size: 0.6875rem;
}

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

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

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

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

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

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

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

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

.font-light {
  font-weight: 300;
}

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

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

.uppercase {
  text-transform: uppercase;
}

.italic {
  font-style: italic;
}

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

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

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

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

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

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

.tracking-\[0\.25em\] {
  letter-spacing: 0.25em;
}

.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}

.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-corporate-dark {
  --tw-text-opacity: 1 !important;
  color: rgb(10 25 47 / var(--tw-text-opacity, 1)) !important;
}

.text-blue-100 {
  --tw-text-opacity: 1;
  color: rgb(219 234 254 / var(--tw-text-opacity, 1));
}

.text-blue-100\/80 {
  color: rgb(219 234 254 / 0.8);
}

.text-blue-100\/90 {
  color: rgb(219 234 254 / 0.9);
}

.text-blue-200 {
  --tw-text-opacity: 1;
  color: rgb(191 219 254 / var(--tw-text-opacity, 1));
}

.text-corporate-amber {
  --tw-text-opacity: 1;
  color: rgb(255 179 0 / var(--tw-text-opacity, 1));
}

.text-corporate-blue {
  --tw-text-opacity: 1;
  color: rgb(0 67 128 / var(--tw-text-opacity, 1));
}

.text-corporate-dark {
  --tw-text-opacity: 1;
  color: rgb(10 25 47 / var(--tw-text-opacity, 1));
}

.text-corporate-lightBlue {
  --tw-text-opacity: 1;
  color: rgb(0 95 173 / var(--tw-text-opacity, 1));
}

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

.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.text-transparent {
  color: transparent;
}

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

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

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

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

.placeholder-blue-200::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(191 219 254 / var(--tw-placeholder-opacity, 1));
}

.placeholder-blue-200::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(191 219 254 / var(--tw-placeholder-opacity, 1));
}

.placeholder-blue-200\/50::-moz-placeholder {
  color: rgb(191 219 254 / 0.5);
}

.placeholder-blue-200\/50::placeholder {
  color: rgb(191 219 254 / 0.5);
}

.opacity-0 {
  opacity: 0;
}

.opacity-10 {
  opacity: 0.1;
}

.opacity-20 {
  opacity: 0.2;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-90 {
  opacity: 0.9;
}

.opacity-\[0\.03\] {
  opacity: 0.03;
}

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

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

.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_12px_rgba\(255\2c 179\2c 0\2c 0\.9\)\] {
  --tw-shadow: 0 0 12px rgba(255,179,0,0.9);
  --tw-shadow-colored: 0 0 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_20px_40px_rgba\(10\2c 25\2c 47\2c 0\.4\)\] {
  --tw-shadow: 0 20px 40px rgba(10,25,47,0.4);
  --tw-shadow-colored: 0 20px 40px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_30px_70px_-15px_rgba\(0\2c 0\2c 0\2c 0\.9\)\] {
  --tw-shadow: 0 30px 70px -15px rgba(0,0,0,0.9);
  --tw-shadow-colored: 0 30px 70px -15px 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_5px_15px_rgba\(0\2c 0\2c 0\2c 0\.5\)\] {
  --tw-shadow: 0 5px 15px rgba(0,0,0,0.5);
  --tw-shadow-colored: 0 5px 15px 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-glow {
  --tw-shadow: 0 0 40px -10px rgba(255, 179, 0, 0.4);
  --tw-shadow-colored: 0 0 40px -10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

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

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

.shadow-premium {
  --tw-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.1);
  --tw-shadow-colored: 0 30px 60px -15px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

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

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

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

.outline {
  outline-style: solid;
}

.outline-8 {
  outline-width: 8px;
}

.outline-white {
  outline-color: #fff;
}

.blur-\[120px\] {
  --tw-blur: blur(120px);
  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);
}

.blur-\[150px\] {
  --tw-blur: blur(150px);
  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);
}

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

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

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

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

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

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

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

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

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

/* Base utility for staggered animations */

.animate-delay-100 {
  animation-delay: 100ms;
}

.animate-delay-200 {
  animation-delay: 200ms;
}

.animate-delay-300 {
  animation-delay: 300ms;
}

.animate-delay-400 {
  animation-delay: 400ms;
}

.animate-delay-500 {
  animation-delay: 500ms;
}

/* ==========================================================
   MOBILE OPTIMISATION — ALL rules below are MOBILE ONLY.
   Desktop layout (≥768px) is COMPLETELY UNTOUCHED.
   ========================================================== */

/* Migrated from contact.html inline <style> — desktop height for hero image */

@media (min-width: 768px) {
  .contact-hero-img {
    height: 500px !important;
  }
}

@media (max-width: 767px) {
  /* -----------------------------------------------------------
     MIGRATED PER-PAGE UTILITY CLASSES
     (previously scattered across inline <style> blocks)
     ----------------------------------------------------------- */

  /* Hero & CTA centering (block-management, contact, maintenance) */

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

  .mobile-center .flex-wrap,
  .mobile-center .flex {
    justify-content: center;
  }

  .mobile-center .max-w-2xl {
    margin-left: auto;
    margin-right: auto;
  }

  /* Section header centering (block-management, maintenance) */

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

  .mobile-center-header .h-1\.5,
  .mobile-center-header .w-24 {
    margin-left: auto;
    margin-right: auto;
  }

  .mobile-center-header .max-w-2xl {
    margin-left: auto;
    margin-right: auto;
  }

  /* Split-layout text centering (block-management, maintenance) */

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

  .mobile-center-section .space-y-6,
  .mobile-center-section .space-y-4 {
    text-align: left;
  }

  /* Feature card icon centering (block-management) */

  .mobile-center-icon .w-16,
  .mobile-center-icon .w-14 {
    margin-left: auto;
    margin-right: auto;
  }

  /* Column content centering (about page + trade / bento cards) */

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

  .mobile-center-col .w-20,
  .mobile-center-col .w-16,
  .mobile-center-col .w-14,
  .mobile-center-col .w-12 {
    margin-left: auto;
    margin-right: auto;
  }

  /* Bullet lists inside centered cards: drop the list padding so
     content centres correctly (bullets inside flex rows are centred
     by the global `ul li.flex` rule in section 17). */

  .mobile-center-col ul {
    padding-left: 0;
    list-style-position: inside;
  }

  /* -----------------------------------------------------------
     1. HERO SECTIONS
     ----------------------------------------------------------- */

  /* Remove oversized min-height on homepage hero */

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

  /* Tighten hero vertical padding */

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

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

  /* Hero image: cap height, maintain natural proportions */

  .aspect-\[4\/5\] {
    aspect-ratio: 3 / 4;
    max-height: 320px;
    width: auto;
    margin-left: auto;
    margin-right: auto;
  }

  /* Maintenance hero square image cap */

  .aspect-square {
    max-height: 320px;
  }

  /* CTA buttons: full-width with proper tap targets & centered content */

  .btn-primary,
  .btn-secondary {
    width: 100%;
    min-height: 48px;
    font-size: 1rem;
    justify-content: center;
    text-align: center;
  }

  /* Inline-flex anchor CTAs inside centered sections should span full width */

  .mobile-center a[class~="inline-flex"],
  .mobile-center-section a[class~="inline-flex"] {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  /* -----------------------------------------------------------
     2. TYPOGRAPHY SCALING — UNIFIED MOBILE TYPE SCALE
     Scale (1.20 modular) creates clear hierarchy without bloat:
       6xl → 2.25rem  (36px)  — hero h1
       5xl → 1.875rem (30px)  — primary section h2
       4xl → 1.625rem (26px)  — secondary h2 / large h3
       3xl → 1.375rem (22px)  — card h3
       2xl → 1.25rem  (20px)  — sub-heading / lead
       xl  → 1.0625rem(17px)  — lead paragraph
       lg  → 1rem     (16px)  — body-lead
       base→ 0.9375rem(15px)  — body
       sm  → 0.875rem (14px)  — secondary body
       xs  → 0.75rem  (12px)  — uppercase labels (unchanged)
     ----------------------------------------------------------- */

  .text-6xl {
    font-size: 2.25rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
  }

  .text-5xl {
    font-size: 1.875rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }

  .text-4xl {
    font-size: 1.625rem;
    line-height: 1.2;
  }

  .text-3xl {
    font-size: 1.375rem;
    line-height: 1.3;
  }

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

  .text-xl {
    font-size: 1.0625rem;
    line-height: 1.55;
  }

  .text-lg {
    font-size: 1rem;
    line-height: 1.6;
  }

  .text-base {
    font-size: 0.9375rem;
    line-height: 1.6;
  }

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

  .text-xs {
    font-size: 0.75rem;
    line-height: 1.5;
  }

  /* Paragraph rhythm: any paragraph without an explicit size utility
     inherits a comfortable body scale on mobile. */

  p:not([class*="text-"]) {
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  /* Headings w/o size utility get sensible defaults */

  h1:not([class*="text-"]) {
    font-size: 2rem;
    line-height: 1.15;
  }

  h2:not([class*="text-"]) {
    font-size: 1.625rem;
    line-height: 1.2;
  }

  h3:not([class*="text-"]) {
    font-size: 1.25rem;
    line-height: 1.35;
  }

  h4:not([class*="text-"]) {
    font-size: 1.0625rem;
    line-height: 1.4;
  }

  /* Hero headings get a uniform larger size across all pages for
     parity (index uses text-4xl while others use text-5xl — mobile
     should feel consistent regardless). */

  .hero-section h1 {
    font-size: 2.625rem;
    line-height: 1.1;
    letter-spacing: -0.015em;
  }

  .hero-section p {
    font-size: 1rem;
    line-height: 1.55;
  }

  /* -----------------------------------------------------------
     3. SECTION SPACING
     ----------------------------------------------------------- */

  /* Reduce section-padding on mobile */

  .section-padding {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  /* Card padding reduction */

  .p-10 {
    padding: 1.5rem;
  }

  .p-12 {
    padding: 1.75rem;
  }

  .p-8 {
    padding: 1.25rem;
  }

  /* -----------------------------------------------------------
     4. CASE STUDY & GALLERY IMAGES
     ----------------------------------------------------------- */

  /* Case study images: shorter on mobile */

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

  /* Image mosaic: remove column offset, reduce gap */

  .grid.grid-cols-2 .pt-16 {
    padding-top: 0;
  }

  .grid.grid-cols-2.gap-6 {
    gap: 0.75rem;
  }

  /* -----------------------------------------------------------
     5. SPLIT LAYOUT REORDER (block-management)
     Block mgmt has image order-2/md:order-1 and text order-1/md:order-2.
     On mobile the CSS order properties correctly show text first.
     No additional reorder needed — verified via visual audit.
     ----------------------------------------------------------- */

  /* Hide decorative offset border on mobile (prevents overflow) */

  .\-m-6.\-z-10 {
    display: none;
  }

  /* -----------------------------------------------------------
     6. FORMS
     ----------------------------------------------------------- */

  /* Form input tap targets */

  input,
  textarea,
  select {
    min-height: 48px;
    font-size: 1rem;
  }

  /* Form submit buttons */

  button[type="submit"],
  button[type="button"] {
    min-height: 52px;
    font-size: 1rem;
  }

  /* -----------------------------------------------------------
     7. FOOTER
     The HTML already handles mobile centring via text-center and
     justify-center lg:justify-start — let Tailwind's native classes
     (space-y-3 / space-y-4) drive spacing. Only ensure link tap
     targets are accessible. */

  /* Accessible tap targets on footer anchors — padded, not min-height,
     so vertical rhythm from space-y-3 stays intact. */

  footer ul a,
  footer address a {
    display: inline-block;
    padding: 0.25rem 0;
  }

  /* -----------------------------------------------------------
     8. HEADER
     Header now uses h-16 md:h-24 in HTML — no mobile override needed.
     ----------------------------------------------------------- */

  /* -----------------------------------------------------------
     9. GENERAL TOUCH TARGETS
     ----------------------------------------------------------- */

  /* All inline links and buttons meet 44px minimum */

  a.btn-primary,
  a.btn-secondary,
  a[class*="inline-flex"],
  a[class*="inline-block"] {
    min-height: 48px;
  }

  /* -----------------------------------------------------------
     10. HERO SECTIONS — IMAGE AS BACKGROUND ON MOBILE
     On desktop the hero image is a positioned <img> column.
     On mobile we hide that column and apply the image as the
     section background (via a CSS custom property set inline),
     with a dark gradient overlay for text legibility.
     ----------------------------------------------------------- */

  /* Hero sections: background-size/position only — each page's <style> block
     provides the background-image URL so paths resolve relative to the document,
     not the stylesheet. */

  .hero-section {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 65vh;
  }

  .hero-img-col {
    display: none;
  }

  /* Close the gap between the fixed header (4rem on mobile) and the
     hero section. main.pt-24 = 6rem desktop; reduce to match header.
     main.flex-grow specificity (0-1-1) beats .pt-24 (0-1-0). */

  main.flex-grow {
    padding-top: 4rem;
  }

  /* -----------------------------------------------------------
     11. INDEX — CORE FOCUS SECTION SPACING
     mb-20 (5rem) before the cards grid → reduce to match mb-16
     (4rem) which separates the cards from the case studies below.
     ----------------------------------------------------------- */

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

  /* -----------------------------------------------------------
     12. MAINTENANCE — TRADES SECTION SUBTITLE
     "Engineering excellence…" paragraph sits beside the heading
     on desktop with a left-border accent. On mobile that border
     looks detached; strip it and let it flow full-width.
     ----------------------------------------------------------- */

  .section-subtitle-desc {
    border-left: none;
    padding-left: 0;
    max-width: none;
    text-align: center;
  }

  /* -----------------------------------------------------------
     13. MAINTENANCE — IN-HOUSE ADVANTAGE SECTION
     ----------------------------------------------------------- */

  /* Hide the staggered 2×2 image mosaic — too cluttered on mobile */

  .in-house-img-grid {
    display: none;
  }

  /* Numbered items: stack number circle above text instead of beside it */

  .in-house-numbered-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .in-house-numbered-item .shrink-0 {
    margin-bottom: 0.625rem;
  }

  /* Heading container: force centre-align (overrides the
     .mobile-center-section .space-y-4 left-align rule) and
     add the amber accent bar beneath the h2. */

  .in-house-advantage-heading {
    text-align: center;
  }

  .in-house-advantage-heading h2::after {
    content: '';
    display: block;
    width: 4rem;
    height: 4px;
    background-color: #ffb300;
    border-radius: 9999px;
    margin: 0.875rem auto 0;
  }

  /* -----------------------------------------------------------
     14. CASE-STUDY / IMAGE-CARD OVERLAY POSITIONS & PADDING
     Overlay text sits flush to the card edges on desktop — on mobile
     give it internal padding so the headline doesn't hug the image.
     Also centre the caption block horizontally for consistency. */

  .absolute.bottom-10.left-10 {
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.25rem 1.25rem 1.5rem;
    text-align: center;
    transform: none;
  }

  /* Gallery/portrait overlays (about page) use bottom-6 left-6 */

  .absolute.bottom-6.left-6 {
    bottom: 0;
    left: 0;
    padding: 0.75rem 0.75rem 1rem;
    transform: none;
  }

  /* -----------------------------------------------------------
     15. FOUNDER'S VISION / SIDE-ACCENT HEADINGS
     border-l-4 decorative accents look orphaned on narrow screens
     once the heading wraps. Drop the border, add the same amber bar
     centred beneath the heading instead. */

  .mobile-center h2.border-l-4,
  .mobile-center-col h2.border-l-4,
  h2.border-l-4.border-corporate-amber {
    border-left: none;
    padding-left: 0;
  }

  /* -----------------------------------------------------------
     16. FORM SUBMIT BUTTONS — match body text scale on mobile */

  button[type="submit"],
  input[type="submit"] {
    font-size: 1rem;
  }

  /* -----------------------------------------------------------
     17. GLOBAL MOBILE ALIGNMENT
     Favour centre alignment for mobile. Applied site-wide within
     <main>, with opt-outs for form fields and long-form text. */

  main .container-custom {
    text-align: center;
  }

  /* Re-assert centring on common block elements (text-align inherits,
     but some elements may have been given left by utility classes). */

  main .container-custom h1,
  main .container-custom h2,
  main .container-custom h3,
  main .container-custom h4,
  main .container-custom h5,
  main .container-custom p,
  main .container-custom span,
  main .container-custom address {
    text-align: center;
  }

  /* Form fields must remain left-aligned regardless of parent text-align */

  main .container-custom input,
  main .container-custom textarea,
  main .container-custom select,
  main .container-custom label,
  main .container-custom form p,
  main .container-custom form li {
    text-align: left;
  }

  /* Eyebrow labels (e.g. "Asset Protection") inside centred sections
     are decorative captions, not form labels — restore centring. */

  main .container-custom .mobile-center-section > label {
    text-align: center;
  }

  /* Decorative underlines / accent bars: centre them */

  main .container-custom .w-24.h-1\.5,
  main .container-custom .w-32.h-1\.5,
  main .container-custom .w-20.h-1\.5,
  main .container-custom .w-16.h-1 {
    margin-left: auto;
    margin-right: auto;
  }

  /* Flex rows of buttons or badges: centre the row */

  main .container-custom .flex.flex-wrap,
  main .container-custom .flex.gap-3,
  main .container-custom .flex.gap-4,
  main .container-custom .flex.gap-5,
  main .container-custom .flex.gap-6,
  main .container-custom .flex.gap-8 {
    justify-content: center;
  }

  /* Bullet lists: centre the bullet + text together */

  main .container-custom ul li.flex {
    justify-content: center;
  }

  /* Long-text bullet rows wrap badly under flex (bullet pinned to the
     far edge while text fills the row). Switch to inline flow so the
     bullet stays next to the first line and the text wraps naturally. */

  main .container-custom ul li.flex:has(> span.w-2.h-2.rounded-full),
  main .container-custom ul li.flex:has(> span.w-3.h-3.rounded-full) {
    display: block;
  }

  main .container-custom ul li.flex:has(> span.w-2.h-2.rounded-full) > span.w-2.h-2.rounded-full,
  main .container-custom ul li.flex:has(> span.w-3.h-3.rounded-full) > span.w-3.h-3.rounded-full {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.75rem;
  }

  /* Icon boxes inside card content: centre horizontally */

  main .container-custom .w-16.h-16.rounded-2xl,
  main .container-custom .w-14.h-14.rounded-2xl,
  main .container-custom .w-12.h-12.rounded-2xl,
  main .container-custom .w-20.h-20.rounded-2xl {
    margin-left: auto;
    margin-right: auto;
  }

  /* Opt-out helper for long-form text blocks where centring hurts */

  main .container-custom .mobile-text-left,
  main .container-custom .mobile-text-left *,
  main .container-custom .mobile-text-left p,
  main .container-custom .mobile-text-left h1,
  main .container-custom .mobile-text-left h2,
  main .container-custom .mobile-text-left h3 {
    text-align: left;
  }

  /* -----------------------------------------------------------
     18. ICON + TEXT STACK
     Any flex row pairing an icon box (rounded-xl/2xl, padded, or a
     fixed w-N h-N square container) with text gets stacked vertically
     on mobile — icon above text — for a consistent rhythm site-wide
     (matches the In-House Advantage treatment). Bullet list dots
     (w-2/w-3) are excluded via the size selectors.
     Gap is preserved from the original Tailwind utility (gap-5, gap-6,
     gap-8) so larger cards keep their breathing room. */

  main .container-custom .flex.items-center:has(> .rounded-xl),
  main .container-custom .flex.items-start:has(> .rounded-xl),
  main .container-custom .flex.items-center:has(> .rounded-2xl),
  main .container-custom .flex.items-start:has(> .rounded-2xl),
  main .container-custom .flex.items-center:has(> .w-12.h-12),
  main .container-custom .flex.items-start:has(> .w-12.h-12),
  main .container-custom .flex.items-center:has(> .w-14.h-14),
  main .container-custom .flex.items-start:has(> .w-14.h-14),
  main .container-custom .flex.items-center:has(> .w-16.h-16),
  main .container-custom .flex.items-start:has(> .w-16.h-16),
  main .container-custom .flex.items-center:has(> .w-20.h-20),
  main .container-custom .flex.items-start:has(> .w-20.h-20),
  main .container-custom .flex.items-center:has(> .shrink-0 > svg),
  main .container-custom .flex.items-start:has(> .shrink-0 > svg) {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Fallback (browsers without :has — rare now, but keeps older WebKit safe):
     stack via shared utility class so HTML can opt in explicitly. */

  main .container-custom .mobile-stack-icon {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Trust-strip icon+text rows: same problem as bullet rows — when text
     wraps inside a flex row, the icon ends up far from the text. Switch
     to inline flow so the icon stays next to the first line and the text
     wraps naturally beneath it. */

  main .container-custom .flex.items-center.gap-5:has(> div > svg.w-8.h-8),
  main .container-custom .flex.items-center.gap-6:has(> div > svg.w-8.h-8) {
    display: block;
    text-align: center;
  }

  main .container-custom .flex.items-center.gap-5:has(> div > svg.w-8.h-8) > div:first-child,
  main .container-custom .flex.items-center.gap-6:has(> div > svg.w-8.h-8) > div:first-child {
    display: inline-block;
    vertical-align: middle;
    margin-right: 1rem;
  }

  main .container-custom .flex.items-center.gap-5:has(> div > svg.w-8.h-8) > div:not(:first-child),
  main .container-custom .flex.items-center.gap-6:has(> div > svg.w-8.h-8) > div:not(:first-child) {
    display: inline;
  }

  /* -----------------------------------------------------------
     19. CONTACT — hide decorative dash before section labels
     ("Proudly Serving", "Get in Touch") on mobile. */

  h4 > span.w-12.h-px {
    display: none;
  }

  /* "Proudly Serving" and "Get in Touch" eyebrow labels read too small
     on mobile relative to the surrounding section. Bump from text-xs to
     text-sm so they have presence as a section opener. */

  h4.text-xs.text-corporate-lightBlue.uppercase {
    font-size: 0.875rem;
  }

  /* -----------------------------------------------------------
     20. INDEX — hero pill "Premium Estate Operations…"
     One-off size tweak: 1px smaller than text-sm (14 → 13px). */

  .hero-pill {
    font-size: 0.8125rem;
  }
}

.selection\:bg-corporate-amber *::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: rgb(255 179 0 / var(--tw-bg-opacity, 1));
}

.selection\:bg-corporate-amber *::selection {
  --tw-bg-opacity: 1;
  background-color: rgb(255 179 0 / var(--tw-bg-opacity, 1));
}

.selection\:text-corporate-dark *::-moz-selection {
  --tw-text-opacity: 1;
  color: rgb(10 25 47 / var(--tw-text-opacity, 1));
}

.selection\:text-corporate-dark *::selection {
  --tw-text-opacity: 1;
  color: rgb(10 25 47 / var(--tw-text-opacity, 1));
}

.selection\:bg-corporate-amber::-moz-selection {
  --tw-bg-opacity: 1;
  background-color: rgb(255 179 0 / var(--tw-bg-opacity, 1));
}

.selection\:bg-corporate-amber::selection {
  --tw-bg-opacity: 1;
  background-color: rgb(255 179 0 / var(--tw-bg-opacity, 1));
}

.selection\:text-corporate-dark::-moz-selection {
  --tw-text-opacity: 1;
  color: rgb(10 25 47 / var(--tw-text-opacity, 1));
}

.selection\:text-corporate-dark::selection {
  --tw-text-opacity: 1;
  color: rgb(10 25 47 / var(--tw-text-opacity, 1));
}

.placeholder\:text-gray-400::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.placeholder\:text-gray-400::placeholder {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

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

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

.hover\:border-corporate-amber\/30:hover {
  border-color: rgb(255 179 0 / 0.3);
}

.hover\:border-corporate-lightBlue\/30:hover {
  border-color: rgb(0 95 173 / 0.3);
}

.hover\:bg-corporate-lightBlue:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(0 95 173 / var(--tw-bg-opacity, 1));
}

.hover\:bg-corporate-lightBlue\/10:hover {
  background-color: rgb(0 95 173 / 0.1);
}

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

.hover\:bg-yellow-400:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
}

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

.hover\:text-corporate-lightBlue:hover {
  --tw-text-opacity: 1;
  color: rgb(0 95 173 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-400:hover {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

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

.focus\:border-corporate-amber:focus {
  --tw-border-opacity: 1;
  border-color: rgb(255 179 0 / 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-corporate-amber:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 179 0 / var(--tw-ring-opacity, 1));
}

.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:hover .group-hover\:m-0 {
  margin: 0px;
}

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

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

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

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

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

.group:hover .group-hover\:scale-\[1\.02\] {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

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

.group:hover .group-hover\:border-corporate-amber {
  --tw-border-opacity: 1;
  border-color: rgb(255 179 0 / var(--tw-border-opacity, 1));
}

.group:hover .group-hover\:border-transparent {
  border-color: transparent;
}

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

.group:hover .group-hover\:bg-corporate-dark {
  --tw-bg-opacity: 1;
  background-color: rgb(10 25 47 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-corporate-lightBlue {
  --tw-bg-opacity: 1;
  background-color: rgb(0 95 173 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:text-corporate-dark {
  --tw-text-opacity: 1;
  color: rgb(10 25 47 / var(--tw-text-opacity, 1));
}

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

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

.group:hover .group-hover\:opacity-20 {
  opacity: 0.2;
}

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

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

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

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

@media (min-width: 768px) {
  .md\:bottom-6 {
    bottom: 1.5rem;
  }

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

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

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

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

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

  .md\:block {
    display: block;
  }

  .md\:h-16 {
    height: 4rem;
  }

  .md\:h-24 {
    height: 6rem;
  }

  .md\:h-\[4\.5rem\] {
    height: 4.5rem;
  }

  .md\:basis-auto {
    flex-basis: auto;
  }

  .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-end {
    align-items: flex-end;
  }

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

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

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

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

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

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

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

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

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

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

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

  .md\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .md\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }

  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

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

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

  .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\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

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

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

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

  .lg\:max-w-\[14rem\] {
    max-width: 14rem;
  }

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

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

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

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

  .lg\:gap-20 {
    gap: 5rem;
  }

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

  .lg\:p-14 {
    padding: 3.5rem;
  }

  .lg\:p-20 {
    padding: 5rem;
  }

  .lg\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

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

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