*,
:after,
:before {
    --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: rgba(59, 130, 246, .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: rgba(59, 130, 246, .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*/
*,
:after,
:before {
    box-sizing: border-box;
    border: 0 solid #e5e7eb
}

:after,
:before {
    --tw-content: ""
}

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

body {
    margin: 0;
    line-height: inherit
}

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px
}

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

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

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

b,
strong {
    font-weight: bolder
}

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

small {
    font-size: 80%
}

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

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse
}

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

button,
select {
    text-transform: none
}

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

:-moz-focusring {
    outline: auto
}

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

progress {
    vertical-align: baseline
}

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

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

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

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

summary {
    display: list-item
}

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

fieldset {
    margin: 0
}

fieldset,
legend {
    padding: 0
}

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

dialog {
    padding: 0
}

textarea {
    resize: vertical
}

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

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

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

:disabled {
    cursor: default
}

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

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

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

input:where(:not([type])),
input:where([type=date]),
input:where([type=datetime-local]),
input:where([type=email]),
input:where([type=month]),
input:where([type=number]),
input:where([type=password]),
input:where([type=search]),
input:where([type=tel]),
input:where([type=text]),
input:where([type=time]),
input:where([type=url]),
input:where([type=week]),
select,
select:where([multiple]),
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    border-color: #6b7280;
    border-width: 1px;
    border-radius: 0;
    padding: .5rem .75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-shadow: 0 0 #0000
}

input:where(:not([type])):focus,
input:where([type=date]):focus,
input:where([type=datetime-local]):focus,
input:where([type=email]):focus,
input:where([type=month]):focus,
input:where([type=number]):focus,
input:where([type=password]):focus,
input:where([type=search]):focus,
input:where([type=tel]):focus,
input:where([type=text]):focus,
input:where([type=time]):focus,
input:where([type=url]):focus,
input:where([type=week]):focus,
select:focus,
select:where([multiple]):focus,
textarea:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-inset: var(--tw-empty,
            /*!*/
            /*!*/
        );
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #2563eb;
    --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);
    border-color: #2563eb
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #6b7280;
    opacity: 1
}

input::placeholder,
textarea::placeholder {
    color: #6b7280;
    opacity: 1
}

::-webkit-datetime-edit-fields-wrapper {
    padding: 0
}

::-webkit-date-and-time-value {
    min-height: 1.5em;
    text-align: inherit
}

::-webkit-datetime-edit {
    display: inline-flex
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-meridiem-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-year-field {
    padding-top: 0;
    padding-bottom: 0
}

select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right .5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact
}

select:where([multiple]),
select:where([size]:not([size="1"])) {
    background-image: none;
    background-position: 0 0;
    background-repeat: unset;
    background-size: initial;
    padding-right: .75rem;
    -webkit-print-color-adjust: unset;
    print-color-adjust: unset
}

input:where([type=checkbox]),
input:where([type=radio]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    flex-shrink: 0;
    height: 1rem;
    width: 1rem;
    color: #2563eb;
    background-color: #fff;
    border-color: #6b7280;
    border-width: 1px;
    --tw-shadow: 0 0 #0000
}

input:where([type=checkbox]) {
    border-radius: 0
}

input:where([type=radio]) {
    border-radius: 100%
}

input:where([type=checkbox]):focus,
input:where([type=radio]):focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-inset: var(--tw-empty,
            /*!*/
            /*!*/
        );
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #2563eb;
    --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)
}

input:where([type=checkbox]):checked,
input:where([type=radio]):checked {
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: 50%;
    background-repeat: no-repeat
}

input:where([type=checkbox]):checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E")
}

@media (forced-colors:active) {
    input:where([type=checkbox]):checked {
        -webkit-appearance: auto;
        -moz-appearance: auto;
        appearance: auto
    }
}

input:where([type=radio]):checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")
}

@media (forced-colors:active) {
    input:where([type=radio]):checked {
        -webkit-appearance: auto;
        -moz-appearance: auto;
        appearance: auto
    }
}

input:where([type=checkbox]):checked:focus,
input:where([type=checkbox]):checked:hover,
input:where([type=radio]):checked:focus,
input:where([type=radio]):checked:hover {
    border-color: transparent;
    background-color: currentColor
}

input:where([type=checkbox]):indeterminate {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: 50%;
    background-repeat: no-repeat
}

@media (forced-colors:active) {
    input:where([type=checkbox]):indeterminate {
        -webkit-appearance: auto;
        -moz-appearance: auto;
        appearance: auto
    }
}

input:where([type=checkbox]):indeterminate:focus,
input:where([type=checkbox]):indeterminate:hover {
    border-color: transparent;
    background-color: currentColor
}

input:where([type=file]) {
    background: unset;
    border-color: inherit;
    border-width: 0;
    border-radius: 0;
    padding: 0;
    font-size: unset;
    line-height: inherit
}

input:where([type=file]):focus {
    outline: 1px solid ButtonText;
    outline: 1px auto -webkit-focus-ring-color
}

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

:root {
    --ink: #0c2a23;
    --ink-deep: #05241d;
    --green: #0b7a5c;
    --mint: #35d6a4;
    --cyan: #17b9c4;
    --grad-btn: linear-gradient(120deg, #35d6a4, #17b9c4)
}

[hidden] {
    display: none !important
}

html {
    scroll-behavior: smooth
}

body {
    font-family: Inter, system-ui, sans-serif;
    background: #fff;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility
}

.shell {
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: 12px
}

/* @media (min-width:1240px) {
    .shell {
        padding-inline: 0
    }
} */

.h-display {
    font-family: Sora, sans-serif;
    font-weight: 400
}

.eyebrow {
    font-size: 12.4px;
    line-height: 15.1px;
    letter-spacing: .21em;
    text-transform: uppercase;
    color: #0b7a5c
}

.grad-text,
h1 b,
h1 strong {
    background: linear-gradient(98.2deg, #0e9e76 6%, #0b7a5c 48%, #128fa0 94%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 400;
}

.btn-grad {
    background: var(--grad-btn)
}

.grad-band {
    background: linear-gradient(160deg, #06412f, #04211a)
}

.grad-card-dark {
    background: linear-gradient(155deg, #06412f, #04291f)
}

.grad-card-lt {
    background: linear-gradient(150deg, #fff, #f3f8f6)
}

:root {
    --accent-lt: #35d6a4
}

.eyebrow-lt {
    font-size: 12.4px;
    line-height: 15.1px;
    letter-spacing: .21em;
    text-transform: uppercase
}

.eyebrow-lt,
.link-lt {
    color: var(--accent-lt)
}

.glow {
    position: absolute;
    pointer-events: none;
    border-radius: 50%
}

.glow-a {
    width: 1010px;
    height: 808px;
    left: calc(50% - 750px);
    top: -303px;
    filter: blur(14px);
    background: radial-gradient(closest-side, rgba(53, 214, 164, .2) 0, rgba(53, 214, 164, 0) 72%)
}

.glow-b {
    width: 897px;
    height: 805px;
    left: calc(50% + 112px);
    top: -27px;
    filter: blur(20px);
    background: radial-gradient(closest-side, rgba(23, 185, 196, .22) 0, rgba(23, 185, 196, 0) 70%)
}

.glow-drift {
    will-change: transform, opacity;
    animation: glowDriftA 12s ease-in-out infinite
}

.glow-drift-b {
    will-change: transform, opacity;
    animation: glowDriftB 15s ease-in-out -5s infinite
}

@keyframes glowDriftA {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: .55
    }

    33% {
        transform: translate3d(150px, 76px, 0) scale(1.22);
        opacity: 1
    }

    66% {
        transform: translate3d(50px, 140px, 0) scale(1.02);
        opacity: .62
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: .55
    }
}

@keyframes glowDriftB {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: .5
    }

    33% {
        transform: translate3d(-135px, 92px, 0) scale(1.2);
        opacity: 1
    }

    66% {
        transform: translate3d(-38px, -64px, 0) scale(1.03);
        opacity: .7
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: .5
    }
}

.marquee {
    width: -moz-max-content;
    width: max-content;
    animation: slide 38s linear infinite
}

.marquee,
.marquee-row {
    display: flex;
    flex: none
}

.marquee-row {
    align-items: center;
    gap: 80px;
    padding-right: 80px
}

.marquee-row img {
    flex: none
}

@keyframes slide {
    to {
        transform: translateX(-50%)
    }
}

.marquee-wrap:hover .marquee {
    animation-play-state: paused
}

.ind-panel {
    transition: flex-grow .55s cubic-bezier(.22, .61, .36, 1), flex-basis .55s cubic-bezier(.22, .61, .36, 1)
}

.ind-vert {
    writing-mode: vertical-rl;
    transform: rotate(180deg)
}

.tab-active {
    background: #062a22;
    color: #f4f7f5;
    border-color: #062a22
}

@media (prefers-reduced-motion:reduce) {
    * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important
    }

    html {
        scroll-behavior: auto
    }
}

:focus-visible {
    outline: 2px solid #0b7a5c;
    outline-offset: 3px;
    border-radius: 6px
}

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

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

.fixed {
    position: fixed
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.sticky {
    position: sticky
}

.inset-0 {
    inset: 0
}

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

.bottom-0 {
    bottom: 0
}

.bottom-\[25px\] {
    bottom: 25px
}

.bottom-\[27px\] {
    bottom: 27px
}

.left-\[-24px\] {
    left: -24px
}

.left-\[-12px\] {
    left: -12px
}

.left-\[-35px\] {
    left: -35px
}

.left-\[11px\] {
    left: 11px
}

.left-\[14px\] {
    left: 14px
}

.left-\[23px\] {
    left: 23px
}

.left-\[25px\] {
    left: 25px
}

.left-\[27px\] {
    left: 27px
}

.left-\[48\%\] {
    left: 48%
}

.left-\[55\%\] {
    left: 55%
}

.left-\[57\%\] {
    left: 57%
}

.left-\[6\.7px\] {
    left: 6.7px
}

.left-\[7px\] {
    left: 7px
}

.left-\[calc\(50\%_\+_133px\)\] {
    left: calc(50% + 133px)
}

.left-\[calc\(50\%_-_655px\)\] {
    left: calc(50% - 655px)
}

.right-\[-16px\] {
    right: -16px
}

.right-\[-24px\] {
    right: -24px
}


.right-\[25px\] {
    right: 25px
}

.right-\[60px\] {
    right: 60px
}

.top-0 {
    top: 0
}

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

.top-\[-139px\] {
    top: -139px
}

.top-\[-205px\] {
    top: -205px
}

.top-\[-226px\] {
    top: -226px
}

.top-\[-321px\] {
    top: -321px
}

.top-\[-47px\] {
    top: -47px
}

.top-\[-54px\] {
    top: -54px
}

.top-\[-79px\] {
    top: -79px
}

.top-\[15px\] {
    top: 15px
}

.top-\[32px\] {
    top: 32px
}

.top-\[280px\] {
    top: 280px
}

.top-\[240px\] {
    top: 240px
}

.top-\[6px\] {
    top: 6px
}

.top-\[79px\] {
    top: 79px
}

.z-50 {
    z-index: 50
}

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

.mb-\[15px\] {
    margin-bottom: 15px
}

.mb-\[90px\] {
    margin-bottom: 90px
}

.ml-\[12px\] {
    margin-left: 12px
}

.ml-\[36px\] {
    margin-left: 36px
}

.mt-2 {
    margin-top: .5rem
}

.mt-3 {
    margin-top: .75rem
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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-\[1169\/558\] {
    aspect-ratio: 1169/558
}

.aspect-\[275\/210\] {
    aspect-ratio: 275/210
}

.aspect-\[275\/434\] {
    aspect-ratio: 275/434
}

.aspect-\[470\/440\] {
    aspect-ratio: 470/440
}

.aspect-\[520\/246\] {
    aspect-ratio: 520/246
}

.aspect-\[561\/210\] {
    aspect-ratio: 561/210
}

.aspect-\[561\/434\] {
    aspect-ratio: 561/434
}

.aspect-\[570\/273\] {
    aspect-ratio: 570/273
}

.aspect-\[570\/338\] {
    aspect-ratio: 570/338
}

.aspect-\[570\/360\] {
    aspect-ratio: 570/360
}

.aspect-\[570\/389\] {
    aspect-ratio: 570/389
}

.h-\[1032px\] {
    height: 1032px
}

.h-\[106px\] {
    height: 106px
}

.h-\[120px\] {
    height: 120px
}

.h-\[134px\] {
    height: 134px
}

.h-\[14px\] {
    height: 14px
}

.h-\[16px\] {
    height: 16px
}

.h-\[180px\] {
    height: 180px
}

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

.h-\[20px\] {
    height: 20px
}

.h-\[21\.6px\] {
    height: 21.6px
}

.h-\[210px\] {
    height: 210px
}

section[aria-labelledby="allPostsHeading"] .h-\[210px\],
section[aria-labelledby="relatedHeading"] .h-\[210px\],
.insights .h-\[250px\] {
    height: fit-content;
}

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

.h-\[25px\] {
    height: 25px
}

.h-\[26px\] {
    height: 26px
}

.h-\[35px\] {
    height: 35px
}

.h-\[27px\] {
    height: 35px
}

.h-\[28px\] {
    height: 28px
}

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

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

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

.h-\[32px\] {
    height: 32px
}

.h-\[33\.3px\] {
    height: 33.3px
}

.h-\[340px\] {
    height: 340px
}

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

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

.h-\[39px\] {
    height: 39px
}

.h-\[40px\] {
    height: 40px
}

.h-\[41px\] {
    height: 41px
}

.h-\[42px\] {
    height: 42px
}

.h-\[43px\] {
    height: 43px
}

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

.h-\[47px\] {
    height: 47px
}

.h-\[480px\] {
    height: 480px
}

.h-\[48px\] {
    height: 48px
}

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

.h-\[51px\] {
    height: 51px
}

.h-\[520px\] {
    height: 520px
}

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

.h-\[55px\] {
    height: 55px
}

.h-\[597px\] {
    height: 597px
}

.h-\[61px\] {
    height: 61px
}

.h-\[63px\] {
    height: 63px
}

.h-\[640px\] {
    height: 640px
}

.h-\[79px\] {
    height: 79px
}

.h-\[804px\] {
    height: 804px
}

.h-\[817px\] {
    height: 817px
}

.h-\[820px\] {
    height: 820px
}

.h-\[87px\] {
    height: 87px
}

.h-\[8px\] {
    height: 8px
}

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

.h-\[904px\] {
    height: 904px
}

.h-full {
    height: 100%
}

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

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

.w-\[100px\] {
    width: 100px
}

.w-\[102px\] {
    width: 102px
}

.w-\[110px\] {
    width: 110px
}

.w-\[112px\] {
    width: 112px
}

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

.w-\[120px\] {
    width: 120px
}

.w-\[137px\] {
    width: 137px
}

.w-\[14px\] {
    width: 14px
}

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

.w-\[16px\] {
    width: 16px
}

.w-\[181px\] {
    width: 181px
}

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

.w-\[191px\] {
    width: 191px
}

.w-\[20px\] {
    width: 20px
}

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

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

.w-\[25px\] {
    width: 25px
}

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

.w-\[372px\] {
    width: 372px
}

.w-\[40px\] {
    width: 40px
}

.w-\[42px\] {
    width: 42px
}

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

.w-\[48px\] {
    width: 48px
}

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

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

.w-\[712px\] {
    width: 712px
}

.w-\[766px\] {
    width: 766px
}

.w-\[86px\] {
    width: 86px
}

.w-\[896px\] {
    width: 896px
}

.w-\[89px\] {
    width: 89px
}

.w-\[8px\] {
    width: 8px
}

.w-\[914px\] {
    width: 914px
}

.w-\[91px\] {
    width: 91px
}

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

.w-px {
    width: 1px
}

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

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

.min-w-\[129\.5px\] {
    min-width: 129.5px
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.shrink-0 {
    flex-shrink: 0
}

.grow {
    flex-grow: 1
}

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

.cursor-pointer {
    cursor: pointer
}

.resize-y {
    resize: vertical
}

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

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

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

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

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

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

.grid-cols-6 {
    grid-template-columns: repeat(6, 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-end {
    justify-content: flex-end
}

.justify-center {
    justify-content: center
}

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

.gap-1 {
    gap: .25rem
}

.gap-2 {
    gap: .5rem
}

.gap-3 {
    gap: .75rem
}

.gap-4 {
    gap: 1rem
}

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

.gap-\[11px\] {
    gap: 11px
}

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

.gap-\[13px\] {
    gap: 13px
}

.gap-\[14px\] {
    gap: 14px
}

.gap-\[16px\] {
    gap: 16px
}

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

.gap-\[20px\] {
    gap: 20px
}

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

.gap-\[24px\] {
    gap: 24px
}

.gap-\[28px\] {
    gap: 28px
}

.gap-\[29px\] {
    gap: 29px
}

.gap-\[30px\] {
    gap: 30px
}

.gap-\[40px\] {
    gap: 40px
}

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

.gap-\[7px\] {
    gap: 7px
}

.gap-\[8px\] {
    gap: 8px
}

.gap-\[9px\] {
    gap: 9px
}

.gap-px {
    gap: 1px
}

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

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

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

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

.gap-y-\[10px\] {
    row-gap: 10px
}

.gap-y-\[21px\] {
    row-gap: 21px
}

.gap-y-\[24px\] {
    row-gap: 24px
}

.gap-y-\[25px\] {
    row-gap: 25px
}

.gap-y-\[34px\] {
    row-gap: 34px
}

.gap-y-\[40px\] {
    row-gap: 40px
}

.gap-y-\[45px\] {
    row-gap: 45px
}

.gap-y-\[50px\] {
    row-gap: 50px
}

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

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

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

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

.overflow-hidden {
    overflow: hidden
}

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

.whitespace-nowrap {
    white-space: nowrap
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.rounded-lg {
    border-radius: .5rem
}

.border {
    border-width: 1px
}

.border-0 {
    border-width: 0
}

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

.border-b,
.border-y {
    border-bottom-width: 1px
}

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

.border-\[\#e8ebea\] {
    --tw-border-opacity: 1;
    border-color: rgb(232 235 234/var(--tw-border-opacity, 1))
}

.border-\[rgba\(10\2c 125\2c 93\2c \.30\)\] {
    border-color: rgba(10, 125, 93, .3)
}

.border-\[rgba\(11\2c 122\2c 92\2c \.50\)\] {
    border-color: rgba(11, 122, 92, .5)
}

.border-\[rgba\(12\2c 42\2c 35\2c \.16\)\] {
    border-color: rgba(12, 42, 35, .16)
}

.border-\[rgba\(12\2c 42\2c 35\2c \.20\)\] {
    border-color: rgba(12, 42, 35, .2)
}

.border-\[rgba\(14\2c 158\2c 118\2c \.26\)\] {
    border-color: rgba(14, 158, 118, .26)
}

.border-\[rgba\(14\2c 158\2c 118\2c \.28\)\] {
    border-color: rgba(14, 158, 118, .28)
}

.border-\[rgba\(14\2c 158\2c 118\2c \.34\)\] {
    border-color: rgba(14, 158, 118, .34)
}

.border-\[rgba\(14\2c 158\2c 118\2c \.36\)\] {
    border-color: rgba(14, 158, 118, .36)
}

.border-\[rgba\(233\2c 244\2c 240\2c \.16\)\] {
    border-color: rgba(233, 244, 240, .16)
}

.border-\[rgba\(233\2c 244\2c 240\2c \.18\)\] {
    border-color: rgba(233, 244, 240, .18)
}

.border-\[rgba\(234\2c 246\2c 241\2c \.16\)\] {
    border-color: rgba(234, 246, 241, .16)
}

.border-\[rgba\(234\2c 246\2c 241\2c \.18\)\] {
    border-color: rgba(234, 246, 241, .18)
}

.border-\[rgba\(53\2c 214\2c 164\2c \.12\)\] {
    border-color: rgba(53, 214, 164, .12)
}

.border-\[rgba\(53\2c 214\2c 164\2c \.14\)\] {
    border-color: rgba(53, 214, 164, .14)
}

.border-\[rgba\(53\2c 214\2c 164\2c \.16\)\] {
    border-color: rgba(53, 214, 164, .16)
}

.border-\[rgba\(53\2c 214\2c 164\2c \.18\)\] {
    border-color: rgba(53, 214, 164, .18)
}

.border-\[rgba\(53\2c 214\2c 164\2c \.20\)\] {
    border-color: rgba(53, 214, 164, .2)
}

.border-\[rgba\(53\2c 214\2c 164\2c \.30\)\] {
    border-color: rgba(53, 214, 164, .3)
}

.border-\[rgba\(53\2c 214\2c 164\2c \.40\)\] {
    border-color: rgba(53, 214, 164, .4)
}

.border-\[rgba\(53\2c 214\2c 164\2c \.50\)\] {
    border-color: rgba(53, 214, 164, .5)
}

.border-\[rgba\(53\2c 214\2c 164\2c \.60\)\] {
    border-color: rgba(53, 214, 164, .6)
}

.border-\[rgba\(6\2c 42\2c 34\2c \.08\)\] {
    border-color: rgba(6, 42, 34, .08)
}

.border-\[rgba\(6\2c 42\2c 34\2c \.09\)\] {
    border-color: rgba(6, 42, 34, .09)
}

.border-\[rgba\(6\2c 42\2c 34\2c \.10\)\] {
    border-color: rgba(6, 42, 34, .1)
}

.border-\[rgba\(6\2c 42\2c 34\2c \.11\)\] {
    border-color: rgba(6, 42, 34, .11)
}

.border-\[rgba\(6\2c 42\2c 34\2c \.12\)\] {
    border-color: rgba(6, 42, 34, .12)
}

.border-\[rgba\(6\2c 42\2c 34\2c \.14\)\] {
    border-color: rgba(6, 42, 34, .14)
}

.border-\[rgba\(6\2c 42\2c 34\2c \.18\)\] {
    border-color: rgba(6, 42, 34, .18)
}

.border-\[rgba\(6\2c 42\2c 34\2c \.20\)\] {
    border-color: rgba(6, 42, 34, .2)
}

.border-\[rgba\(6\2c 42\2c 34\2c \.22\)\] {
    border-color: rgba(6, 42, 34, .22)
}

.border-\[rgba\(6\2c 42\2c 34\2c \.24\)\] {
    border-color: rgba(6, 42, 34, .24)
}

.border-\[rgba\(6\2c 42\2c 34\2c \.30\)\] {
    border-color: rgba(6, 42, 34, .3)
}

.border-line {
    --tw-border-opacity: 1;
    border-color: rgb(231 234 233/var(--tw-border-opacity, 1))
}

.border-mint {
    --tw-border-opacity: 1;
    border-color: rgb(53 214 164/var(--tw-border-opacity, 1))
}

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

.bg-\[\#dde6e1\] {
    --tw-bg-opacity: 1;
    background-color: rgb(221 230 225/var(--tw-bg-opacity, 1))
}

.bg-\[\#e4f1ea\] {
    --tw-bg-opacity: 1;
    background-color: rgb(228 241 234/var(--tw-bg-opacity, 1))
}

.bg-\[\#edf2ef\] {
    --tw-bg-opacity: 1;
    background-color: rgb(237 242 239/var(--tw-bg-opacity, 1))
}

.bg-\[rgba\(14\2c 158\2c 118\2c \.07\)\] {
    background-color: rgba(14, 158, 118, .07)
}

.bg-\[rgba\(14\2c 158\2c 118\2c \.12\)\] {
    background-color: rgba(14, 158, 118, .12)
}

.bg-\[rgba\(233\2c 244\2c 240\2c \.16\)\] {
    background-color: rgba(233, 244, 240, .16)
}

.bg-\[rgba\(53\2c 214\2c 164\2c \.07\)\] {
    background-color: rgba(53, 214, 164, .07)
}

.bg-\[rgba\(53\2c 214\2c 164\2c \.10\)\] {
    background-color: rgba(53, 214, 164, .1)
}

.bg-\[rgba\(53\2c 214\2c 164\2c \.12\)\] {
    background-color: rgba(53, 214, 164, .12)
}

.bg-\[rgba\(53\2c 214\2c 164\2c \.16\)\] {
    background-color: rgba(53, 214, 164, .16)
}

.bg-\[rgba\(53\2c 214\2c 164\2c \.18\)\] {
    background-color: rgba(53, 214, 164, .18)
}

.bg-\[rgba\(53\2c 214\2c 164\2c \.20\)\] {
    background-color: rgba(53, 214, 164, .2)
}

.bg-\[rgba\(53\2c 214\2c 164\2c \.25\)\] {
    background-color: rgba(53, 214, 164, .25)
}

.bg-\[rgba\(53\2c 214\2c 164\2c \.28\)\] {
    background-color: rgba(53, 214, 164, .28)
}

.bg-\[rgba\(6\2c 42\2c 34\2c \.03\)\] {
    background-color: rgba(6, 42, 34, .03)
}

.bg-\[rgba\(6\2c 42\2c 34\2c \.06\)\] {
    background-color: rgba(6, 42, 34, .06)
}

.bg-\[rgba\(6\2c 42\2c 34\2c \.08\)\] {
    background-color: rgba(6, 42, 34, .08)
}

.bg-\[rgba\(6\2c 42\2c 34\2c \.10\)\] {
    background-color: rgba(6, 42, 34, .1)
}

.bg-dark {
    --tw-bg-opacity: 1;
    background-color: rgb(5 57 43/var(--tw-bg-opacity, 1))
}

.bg-dark-2 {
    --tw-bg-opacity: 1;
    background-color: rgb(6 31 25/var(--tw-bg-opacity, 1))
}

.bg-dark-3 {
    --tw-bg-opacity: 1;
    background-color: rgb(4 41 31/var(--tw-bg-opacity, 1))
}

.bg-ink {
    --tw-bg-opacity: 1;
    background-color: rgb(12 42 35/var(--tw-bg-opacity, 1))
}

.bg-mint {
    --tw-bg-opacity: 1;
    background-color: rgb(53 214 164/var(--tw-bg-opacity, 1))
}

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

.bg-transparent {
    background-color: transparent
}

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

.bg-white\/95 {
    background-color: hsla(0, 0%, 100%, .95)
}

.bg-white\/\[\.78\] {
    background-color: hsla(0, 0%, 100%, .78)
}

.bg-white\/\[\.88\] {
    background-color: hsla(0, 0%, 100%, .88)
}

.bg-\[linear-gradient\(113\.7deg\2c \#ffffff_0\%\2c \#f3f8f6_100\%\)\] {
    background-image: linear-gradient(113.7deg, #fff, #f3f8f6)
}

.bg-\[linear-gradient\(135deg\2c rgba\(53\2c 214\2c 164\2c \.90\)\2c rgba\(23\2c 185\2c 196\2c \.75\)\)\] {
    background-image: linear-gradient(135deg, rgba(53, 214, 164, .9), rgba(23, 185, 196, .75))
}

.bg-\[linear-gradient\(150deg\2c \#06412f_0\%\2c \#05392b_52\%\2c \#04211a_100\%\)\] {
    background-image: linear-gradient(150deg, #06412f, #05392b 52%, #04211a)
}

.bg-\[linear-gradient\(150deg\2c rgba\(255\2c 255\2c 255\2c \.05\)_0\%\2c rgba\(255\2c 255\2c 255\2c \.01\)_100\%\)\] {
    background-image: linear-gradient(150deg, hsla(0, 0%, 100%, .05), hsla(0, 0%, 100%, .01))
}

.bg-\[linear-gradient\(155deg\2c \#06412f_0\%\2c \#05392b_55\%\2c \#04291f_100\%\)\] {
    background-image: linear-gradient(155deg, #06412f, #05392b 55%, #04291f)
}

.bg-\[linear-gradient\(160deg\2c rgba\(255\2c 255\2c 255\2c \.05\)\2c rgba\(255\2c 255\2c 255\2c \.01\)\)\] {
    background-image: linear-gradient(160deg, hsla(0, 0%, 100%, .05), hsla(0, 0%, 100%, .01))
}

.bg-\[linear-gradient\(160deg\2c rgba\(53\2c 214\2c 164\2c \.16\)\2c rgba\(23\2c 185\2c 196\2c \.07\)\)\] {
    background-image: linear-gradient(160deg, rgba(53, 214, 164, .16), rgba(23, 185, 196, .07))
}

.bg-\[linear-gradient\(166\.5deg\2c \#ffffff\2c \#f3f8f6\)\] {
    background-image: linear-gradient(166.5deg, #fff, #f3f8f6)
}

.bg-\[linear-gradient\(167deg\2c \#ffffff_0\%\2c \#f3f8f6_100\%\)\] {
    background-image: linear-gradient(167deg, #fff, #f3f8f6)
}

.bg-\[linear-gradient\(90deg\2c \#35d6a4\2c \#17b9c4\)\] {
    background-image: linear-gradient(90deg, #35d6a4, #17b9c4)
}

.bg-\[linear-gradient\(to_top\2c rgba\(11\2c 122\2c 92\2c \.92\)_0\%\2c rgba\(11\2c 122\2c 92\2c \.35\)_62\%\)\] {
    background-image: linear-gradient(0deg, rgba(11, 122, 92, .92) 0, rgba(11, 122, 92, .35) 62%)
}

.bg-\[linear-gradient\(to_top\2c rgba\(3\2c 19\2c 15\2c \.75\)_0\%\2c rgba\(3\2c 19\2c 15\2c 0\)_55\%\)\] {
    background-image: linear-gradient(0deg, rgba(3, 19, 15, .75) 0, rgba(3, 19, 15, 0) 55%)
}

.bg-\[linear-gradient\(to_top\2c rgba\(3\2c 19\2c 15\2c \.82\)_0\%\2c rgba\(3\2c 19\2c 15\2c 0\)_58\%\)\] {
    background-image: linear-gradient(0deg, rgba(3, 19, 15, .82) 0, rgba(3, 19, 15, 0) 58%)
}

.bg-\[linear-gradient\(to_top\2c rgba\(3\2c 19\2c 15\2c \.92\)_0\%\2c rgba\(3\2c 19\2c 15\2c 0\)_58\%\)\] {
    background-image: linear-gradient(0deg, rgba(3, 19, 15, .92) 0, rgba(3, 19, 15, 0) 58%)
}

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

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

.object-\[23\%_50\%\] {
    -o-object-position: 23% 50%;
    object-position: 23% 50%
}

.object-\[36\%_center\] {
    -o-object-position: 36% center;
    object-position: 36% center
}

.object-\[50\%_22\%\] {
    -o-object-position: 50% 22%;
    object-position: 50% 22%
}

.object-\[50\%_57\%\] {
    -o-object-position: 50% 57%;
    object-position: 50% 57%
}

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

.p-0 {
    padding: 0
}

.p-\[10px\] {
    padding: 10px
}

.p-\[15px\] {
    padding: 15px
}

.p-\[19px\] {
    padding: 19px
}

.p-\[20px\] {
    padding: 20px
}

.p-\[25px\] {
    padding: 25px
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.py-0 {
    padding-top: 0;
    padding-bottom: 0
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.pb-2 {
    padding-bottom: .5rem
}

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

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

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

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

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

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

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

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

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

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

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

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

.pl-\[33px\] {
    padding-left: 33px
}

.pl-\[39px\] {
    padding-left: 39px
}

.pl-\[4px\] {
    padding-left: 4px
}

.pr-\[16px\] {
    padding-right: 16px
}

.pr-\[19px\] {
    padding-right: 19px
}

.pr-\[7px\] {
    padding-right: 7px
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.font-sora {
    font-family: Sora, system-ui, sans-serif
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.text-\[clamp\(34px\2c 3\.6vw\2c 50px\)\] {
    font-size: clamp(34px, 3.6vw, 50px)
}

.text-\[clamp\(34px\2c 3\.8vw\2c 52px\)\] {
    font-size: clamp(34px, 3.8vw, 52px)
}

.text-\[clamp\(34px\2c 4\.1vw\2c 58px\)\] {
    font-size: clamp(34px, 4.1vw, 58px)
}

.text-\[clamp\(34px\2c 4\.2vw\2c 60px\)\] {
    font-size: clamp(34px, 4.2vw, 60px)
}

.text-\[clamp\(38px\2c 4\.4vw\2c 62px\)\] {
    font-size: clamp(38px, 4.4vw, 62px)
}

.text-\[clamp\(44px\2c 5\.6vw\2c 80px\)\] {
    font-size: clamp(44px, 5.6vw, 80px)
}

.font-bold {
    font-weight: 700
}

.font-light {
    font-weight: 300
}

.font-medium {
    font-weight: 500
}

.font-normal {
    font-weight: 400
}

.font-semibold {
    font-weight: 600
}

.uppercase {
    text-transform: uppercase
}

.not-italic {
    font-style: normal
}

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

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

.leading-\[1\.248\] {
    line-height: 1.248
}

.leading-\[1\.26\] {
    line-height: 1.26
}

.leading-\[1\.325\] {
    line-height: 1.325
}

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

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

.leading-\[13\.9px\] {
    line-height: 13.9px
}

.leading-\[14\.4px\] {
    line-height: 14.4px
}

.leading-\[14\.6px\] {
    line-height: 14.6px
}

.leading-\[14\.8px\] {
    line-height: 14.8px
}

.leading-\[14\.9px\] {
    line-height: 14.9px
}

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

.leading-\[15\.1px\] {
    line-height: 15.1px
}

.leading-\[15\.5px\] {
    line-height: 15.5px
}

.leading-\[15\.7px\] {
    line-height: 15.7px
}

.leading-\[15\.9px\] {
    line-height: 15.9px
}

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

.leading-\[16\.1px\] {
    line-height: 16.1px
}

.leading-\[16\.4px\] {
    line-height: 16.4px
}

.leading-\[16\.6px\] {
    line-height: 16.6px
}

.leading-\[16\.9px\] {
    line-height: 16.9px
}

.leading-\[17\.3px\] {
    line-height: 17.3px
}

.leading-\[17\.4px\] {
    line-height: 17.4px
}

.leading-\[17\.5px\] {
    line-height: 17.5px
}

.leading-\[17\.7px\] {
    line-height: 17.7px
}

.leading-\[17\.9px\] {
    line-height: 17.9px
}

.leading-\[18\.2px\] {
    line-height: 18.2px
}

.leading-\[18\.9px\] {
    line-height: 18.9px
}

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

.leading-\[19\.5px\] {
    line-height: 19.5px
}

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

.leading-\[21\.4px\] {
    line-height: 21.4px
}

.leading-\[21\.8px\] {
    line-height: 21.8px
}

.leading-\[22\.5px\] {
    line-height: 22.5px
}

.leading-\[22\.7px\] {
    line-height: 22.7px
}

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

.leading-\[23\.2px\] {
    line-height: 23.2px
}

.leading-\[23\.6px\] {
    line-height: 23.6px
}

.leading-\[23\.9px\] {
    line-height: 23.9px
}

.leading-\[24\.8px\] {
    line-height: 24.8px
}

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

.leading-\[25\.1px\] {
    line-height: 25.1px
}

.leading-\[25\.2px\] {
    line-height: 25.2px
}

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

.leading-\[26\.4px\] {
    line-height: 26.4px
}

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

.leading-\[27\.2px\] {
    line-height: 27.2px
}

.leading-\[27\.5px\] {
    line-height: 27.5px
}

.leading-\[27\.7px\] {
    line-height: 27.7px
}

.leading-\[28\.8px\] {
    line-height: 28.8px
}

.leading-\[30\.8px\] {
    line-height: 30.8px
}

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

.leading-\[32\.8px\] {
    line-height: 32.8px
}

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

.leading-\[37\.8px\] {
    line-height: 37.8px
}

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

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

.leading-\[43\.7px\] {
    line-height: 43.7px
}

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

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

.leading-none {
    line-height: 1
}

.tracking-\[-0\.005em\] {
    letter-spacing: -.005em
}

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

.tracking-\[-0\.025em\] {
    letter-spacing: -.025em
}

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

.tracking-\[-0\.033em\] {
    letter-spacing: -.033em
}

.tracking-\[-0\.035em\] {
    letter-spacing: -.035em
}

.tracking-\[-0\.036em\] {
    letter-spacing: -.036em
}

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

.tracking-\[-0\.045em\] {
    letter-spacing: -.045em
}

.tracking-\[-0\.04em\] {
    letter-spacing: -.04em
}

.tracking-\[-0\.054em\] {
    letter-spacing: -.054em
}

.tracking-\[-0\.05em\] {
    letter-spacing: -.05em
}

.tracking-\[-0\.063em\] {
    letter-spacing: -.063em
}

.tracking-\[-0\.06em\] {
    letter-spacing: -.06em
}

.tracking-\[\.022em\] {
    letter-spacing: .022em
}

.tracking-\[\.107em\] {
    letter-spacing: .107em
}

.tracking-\[\.128em\] {
    letter-spacing: .128em
}

.tracking-\[\.142em\] {
    letter-spacing: .142em
}

.tracking-\[\.145em\] {
    letter-spacing: .145em
}

.tracking-\[\.147em\] {
    letter-spacing: .147em
}

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

.tracking-\[\.15em\] {
    letter-spacing: .15em
}

.tracking-\[\.165em\] {
    letter-spacing: .165em
}

.tracking-\[\.167em\] {
    letter-spacing: .167em
}

.tracking-\[\.168em\] {
    letter-spacing: .168em
}

.tracking-\[\.16em\] {
    letter-spacing: .16em
}

.tracking-\[\.17em\] {
    letter-spacing: .17em
}

.tracking-\[\.21em\] {
    letter-spacing: .21em
}

.tracking-\[0\.037em\] {
    letter-spacing: .037em
}

.tracking-\[0\.045em\] {
    letter-spacing: .045em
}

.tracking-\[0\.105em\] {
    letter-spacing: .105em
}

.tracking-\[0\.147em\] {
    letter-spacing: .147em
}

.tracking-\[0\.186em\] {
    letter-spacing: .186em
}

.tracking-\[0\.189em\] {
    letter-spacing: .189em
}

.tracking-\[0\.196em\] {
    letter-spacing: .196em
}

.tracking-\[0\] {
    letter-spacing: 0
}

.text-\[\#03130f\] {
    --tw-text-opacity: 1;
    color: rgb(3 19 15/var(--tw-text-opacity, 1))
}

.text-\[\#04231c\] {
    --tw-text-opacity: 1;
    color: rgb(4 35 28/var(--tw-text-opacity, 1))
}

.text-\[\#4a635c\] {
    --tw-text-opacity: 1;
    color: rgb(74 99 92/var(--tw-text-opacity, 1))
}

.text-\[\#4fe3a8\] {
    --tw-text-opacity: 1;
    color: rgb(79 227 168/var(--tw-text-opacity, 1))
}

.text-\[\#566e67\] {
    --tw-text-opacity: 1;
    color: rgb(86 110 103/var(--tw-text-opacity, 1))
}

.text-\[\#566f69\] {
    --tw-text-opacity: 1;
    color: rgb(86 111 105/var(--tw-text-opacity, 1))
}

.text-\[\#b4342c\] {
    --tw-text-opacity: 1;
    color: rgb(180 52 44/var(--tw-text-opacity, 1))
}

.text-\[\#d58a28\] {
    --tw-text-opacity: 1;
    color: rgb(213 138 40/var(--tw-text-opacity, 1))
}

.text-\[\#e9f4f0\] {
    --tw-text-opacity: 1;
    color: rgb(233 244 240/var(--tw-text-opacity, 1))
}

.text-\[rgba\(12\2c 42\2c 35\2c \.68\)\] {
    color: rgba(12, 42, 35, .68)
}

.text-\[rgba\(233\2c 244\2c 240\2c \.62\)\] {
    color: rgba(233, 244, 240, .62)
}

.text-\[rgba\(233\2c 244\2c 240\2c \.72\)\] {
    color: rgba(233, 244, 240, .72)
}

.text-\[rgba\(233\2c 246\2c 241\2c \.72\)\] {
    color: rgba(233, 246, 241, .72)
}

.text-\[rgba\(234\2c 246\2c 241\2c \.70\)\] {
    color: rgba(234, 246, 241, .7)
}

.text-\[rgba\(234\2c 246\2c 241\2c \.72\)\] {
    color: rgba(234, 246, 241, .72)
}

.text-\[rgba\(234\2c 246\2c 241\2c \.84\)\] {
    color: rgba(234, 246, 241, .84)
}

.text-\[rgba\(5\2c 36\2c 29\2c \.66\)\] {
    color: rgba(5, 36, 29, .66)
}

.text-\[rgba\(53\2c 214\2c 164\2c \.55\)\] {
    color: rgba(53, 214, 164, .55)
}

.text-\[rgba\(6\2c 42\2c 34\2c \.55\)\] {
    color: rgba(6, 42, 34, .55)
}

.text-\[rgba\(6\2c 42\2c 34\2c \.62\)\] {
    color: rgba(6, 42, 34, .62)
}

.text-\[rgba\(6\2c 42\2c 34\2c \.68\)\] {
    color: rgba(6, 42, 34, .68)
}

.text-\[rgba\(6\2c 42\2c 34\2c \.70\)\] {
    color: rgba(6, 42, 34, .7)
}

.text-\[rgba\(6\2c 42\2c 34\2c \.72\)\] {
    color: rgba(6, 42, 34, .72)
}

.text-\[rgba\(6\2c 42\2c 34\2c \.74\)\] {
    color: rgba(6, 42, 34, .74)
}

.text-\[rgba\(6\2c 42\2c 34\2c \.78\)\] {
    color: rgba(6, 42, 34, .78)
}

.text-\[rgba\(75\2c 101\2c 95\2c \.58\)\] {
    color: rgba(75, 101, 95, .58)
}

.text-\[rgba\(81\2c 106\2c 101\2c \.70\)\] {
    color: rgba(81, 106, 101, .7)
}

.text-green {
    --tw-text-opacity: 1;
    color: rgb(11 122 92/var(--tw-text-opacity, 1))
}

.text-green-alt {
    --tw-text-opacity: 1;
    color: rgb(10 125 93/var(--tw-text-opacity, 1))
}

.text-ink {
    --tw-text-opacity: 1;
    color: rgb(12 42 35/var(--tw-text-opacity, 1))
}

.text-ink-alt {
    --tw-text-opacity: 1;
    color: rgb(6 42 34/var(--tw-text-opacity, 1))
}

.text-ink-btn {
    --tw-text-opacity: 1;
    color: rgb(4 35 28/var(--tw-text-opacity, 1))
}

.text-ink-deep {
    --tw-text-opacity: 1;
    color: rgb(5 36 29/var(--tw-text-opacity, 1))
}

.text-ink-soft {
    --tw-text-opacity: 1;
    color: rgb(81 106 101/var(--tw-text-opacity, 1))
}

.text-mint {
    --tw-text-opacity: 1;
    color: rgb(53 214 164/var(--tw-text-opacity, 1))
}

.text-mint-lt {
    --tw-text-opacity: 1;
    color: rgb(125 240 200/var(--tw-text-opacity, 1))
}

.text-mist {
    --tw-text-opacity: 1;
    color: rgb(233 244 240/var(--tw-text-opacity, 1))
}

.text-mist\/50 {
    color: rgba(233, 244, 240, .5)
}

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

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

.opacity-\[\.133\] {
    opacity: .133
}

.opacity-\[\.183\] {
    opacity: .183
}

.shadow-\[0_0_0_6px_rgba\(53\2c 214\2c 164\2c \.18\)\] {
    --tw-shadow: 0 0 0 6px rgba(53, 214, 164, .18);
    --tw-shadow-colored: 0 0 0 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)
}

.shadow-\[0_10px_30px_rgba\(53\2c 214\2c 164\2c \.24\)\] {
    --tw-shadow: 0 10px 30px rgba(53, 214, 164, .24);
    --tw-shadow-colored: 0 10px 30px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_16px_44px_rgba\(14\2c 158\2c 118\2c \.26\)\] {
    --tw-shadow: 0 16px 44px rgba(14, 158, 118, .26);
    --tw-shadow-colored: 0 16px 44px 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_16px_44px_rgba\(14\2c 158\2c 118\2c \.34\)\] {
    --tw-shadow: 0 16px 44px rgba(14, 158, 118, .34);
    --tw-shadow-colored: 0 16px 44px 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_18px_50px_rgba\(53\2c 214\2c 164\2c \.32\)\] {
    --tw-shadow: 0 18px 50px rgba(53, 214, 164, .32);
    --tw-shadow-colored: 0 18px 50px 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_1px_4px_-1px_rgba\(235\2c 235\2c 235\2c \.30\)\] {
    --tw-shadow: 0 1px 4px -1px hsla(0, 0%, 92%, .3);
    --tw-shadow-colored: 0 1px 4px -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-\[0_22px_60px_rgba\(6\2c 42\2c 34\2c \.10\)\] {
    --tw-shadow: 0 22px 60px rgba(6, 42, 34, .1);
    --tw-shadow-colored: 0 22px 60px 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_80px_rgba\(6\2c 42\2c 34\2c \.08\)\] {
    --tw-shadow: 0 30px 80px rgba(6, 42, 34, .08);
    --tw-shadow-colored: 0 30px 80px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

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

.blur-\[14px\] {
    --tw-blur: blur(14px)
}

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

.blur-\[18px\] {
    --tw-blur: blur(18px)
}

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

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

.backdrop-blur-\[10px\],
.backdrop-blur-\[16px\] {
    -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-\[16px\] {
    --tw-backdrop-blur: blur(16px)
}

.backdrop-blur-\[20px\] {
    --tw-backdrop-blur: blur(20px)
}

.backdrop-blur-\[20px\],
.backdrop-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-\[8px\] {
    --tw-backdrop-blur: blur(8px)
}

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

.transition-\[transform\2c border-color\2c background-color\] {
    transition-property: transform, border-color, background-color;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-\[transform\2c box-shadow\] {
    transition-property: transform, box-shadow;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.duration-200 {
    transition-duration: .2s
}

.duration-300 {
    transition-duration: .3s
}

.duration-500 {
    transition-duration: .5s
}

.\[background-image\:linear-gradient\(to_right\2c rgba\(6\2c 42\2c 34\2c \.07\)_1\.1\%\2c rgba\(6\2c 42\2c 34\2c 0\)_1\.1\%\)\2c linear-gradient\(to_bottom\2c rgba\(6\2c 42\2c 34\2c \.07\)_1\.1\%\2c rgba\(6\2c 42\2c 34\2c 0\)_1\.1\%\)\] {
    background-image: linear-gradient(90deg, rgba(6, 42, 34, .07) 1.1%, rgba(6, 42, 34, 0) 0), linear-gradient(180deg, rgba(6, 42, 34, .07) 1.1%, rgba(6, 42, 34, 0) 0)
}

.\[background-image\:radial-gradient\(closest-side\2c rgba\(23\2c 185\2c 196\2c \.22\)_0\%\2c rgba\(23\2c 185\2c 196\2c 0\)_70\%\)\] {
    background-image: radial-gradient(closest-side, rgba(23, 185, 196, .22) 0, rgba(23, 185, 196, 0) 70%)
}

.\[background-image\:radial-gradient\(closest-side\2c rgba\(53\2c 214\2c 164\2c \.26\)_0\%\2c rgba\(53\2c 214\2c 164\2c 0\)_72\%\)\] {
    background-image: radial-gradient(closest-side, rgba(53, 214, 164, .26) 0, rgba(53, 214, 164, 0) 72%)
}

.\[mask-image\:radial-gradient\(57\%_68\%_at_40\%_8\%\2c rgba\(0\2c 0\2c 0\2c 1\)_25\%\2c rgba\(0\2c 0\2c 0\2c 0\)_78\%\)\] {
    -webkit-mask-image: radial-gradient(57% 68% at 40% 8%, #000 25%, transparent 78%);
    mask-image: radial-gradient(57% 68% at 40% 8%, #000 25%, transparent 78%)
}

.placeholder\:text-\[\#757575\]::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(117 117 117/var(--tw-text-opacity, 1))
}

.placeholder\:text-\[\#757575\]::placeholder {
    --tw-text-opacity: 1;
    color: rgb(117 117 117/var(--tw-text-opacity, 1))
}

.placeholder\:text-placeholder::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(117 117 117/var(--tw-text-opacity, 1))
}

.placeholder\:text-placeholder::placeholder {
    --tw-text-opacity: 1;
    color: rgb(117 117 117/var(--tw-text-opacity, 1))
}

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

.after\:-bottom-\[1px\]:after {
    content: var(--tw-content);
    bottom: -1px
}

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

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

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

.after\:origin-left:after {
    content: var(--tw-content);
    transform-origin: left
}

.after\:scale-x-0:after {
    content: var(--tw-content);
    --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))
}

.after\:bg-ink-alt:after {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: rgb(6 42 34/var(--tw-bg-opacity, 1))
}

.after\:transition-transform:after {
    content: var(--tw-content);
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.after\:duration-200:after {
    content: var(--tw-content);
    transition-duration: .2s
}

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

.empty\:hidden:empty {
    display: none
}

.hover\:-translate-y-\[1px\]:hover {
    --tw-translate-y: -1px
}

.hover\:-translate-y-\[1px\]:hover,
.hover\:-translate-y-\[2px\]:hover {
    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\:-translate-y-\[2px\]:hover {
    --tw-translate-y: -2px
}

.hover\:-translate-y-\[3px\]:hover {
    --tw-translate-y: -3px;
    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-\[rgba\(14\2c 158\2c 118\2c \.55\)\]:hover {
    border-color: rgba(14, 158, 118, .55)
}

.hover\:border-\[rgba\(6\2c 42\2c 34\2c \.45\)\]:hover {
    border-color: rgba(6, 42, 34, .45)
}

.hover\:border-green:hover {
    --tw-border-opacity: 1;
    border-color: rgb(11 122 92/var(--tw-border-opacity, 1))
}

.hover\:border-ink-alt:hover {
    --tw-border-opacity: 1;
    border-color: rgb(6 42 34/var(--tw-border-opacity, 1))
}

.hover\:bg-\[\#2ac496\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(42 196 150/var(--tw-bg-opacity, 1))
}

.hover\:bg-\[rgba\(14\2c 158\2c 118\2c \.06\)\]:hover {
    background-color: rgba(14, 158, 118, .06)
}

.hover\:bg-\[rgba\(53\2c 214\2c 164\2c \.04\)\]:hover {
    background-color: rgba(53, 214, 164, .04)
}

.hover\:bg-\[rgba\(53\2c 214\2c 164\2c \.06\)\]:hover {
    background-color: rgba(53, 214, 164, .06)
}

.hover\:bg-\[rgba\(53\2c 214\2c 164\2c \.10\)\]:hover {
    background-color: rgba(53, 214, 164, .1)
}

.hover\:bg-\[rgba\(53\2c 214\2c 164\2c \.18\)\]:hover {
    background-color: rgba(53, 214, 164, .18)
}

.hover\:bg-\[rgba\(6\2c 42\2c 34\2c \.03\)\]:hover {
    background-color: rgba(6, 42, 34, .03)
}

.hover\:text-green:hover {
    --tw-text-opacity: 1;
    color: rgb(11 122 92/var(--tw-text-opacity, 1))
}

.hover\:text-ink:hover {
    --tw-text-opacity: 1;
    color: rgb(12 42 35/var(--tw-text-opacity, 1))
}

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

.hover\:shadow-\[0_22px_50px_rgba\(6\2c 42\2c 34\2c \.07\)\]:hover {
    --tw-shadow: 0 22px 50px rgba(6, 42, 34, .07);
    --tw-shadow-colored: 0 22px 50px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.focus\:border-green-brt\/55:focus {
    border-color: rgba(14, 158, 118, .55)
}

.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(var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.group[open] .group-open\:mr-\[5\.1px\] {
    margin-right: 5.1px
}

.group[open] .group-open\:mt-\[11\.5px\] {
    margin-top: 11.5px
}

.group[open] .group-open\:block {
    display: block
}

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

.group[open] .group-open\:bg-green-brt {
    --tw-bg-opacity: 1;
    background-color: rgb(14 158 118/var(--tw-bg-opacity, 1))
}

.group[open] .group-open\:pb-0 {
    padding-bottom: 0
}

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

.group:hover .group-hover\:scale-\[1\.03\] {
    --tw-scale-x: 1.03;
    --tw-scale-y: 1.03
}

.group:hover .group-hover\:scale-\[1\.03\],
.group:hover .group-hover\:scale-\[1\.04\] {
    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\.04\] {
    --tw-scale-x: 1.04;
    --tw-scale-y: 1.04
}

.group:hover .group-hover\:scale-\[1\.08\] {
    --tw-scale-x: 1.08;
    --tw-scale-y: 1.08;
    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-green-alt {
    --tw-border-opacity: 1;
    border-color: rgb(10 125 93/var(--tw-border-opacity, 1))
}

.group:hover .group-hover\:bg-\[rgba\(10\2c 125\2c 93\2c \.08\)\] {
    background-color: rgba(10, 125, 93, .08)
}

.group:hover .group-hover\:text-green {
    --tw-text-opacity: 1;
    color: rgb(11 122 92/var(--tw-text-opacity, 1))
}

.aria-selected\:font-semibold[aria-selected=true] {
    font-weight: 600
}

.aria-selected\:after\:scale-x-100[aria-selected=true]:after {
    content: var(--tw-content);
    --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))
}

.bl-card-body p.bl-clamp-3,
.bl-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width:640px) {
    .sm\:col-span-2 {
        grid-column: span 2/span 2
    }

    .sm\:block {
        display: block
    }

    .sm\:flex {
        display: flex
    }

    .sm\:hidden {
        display: none
    }

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

    .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\:grid-cols-\[188fr_150fr_151fr\] {
        grid-template-columns: 188fr 150fr 151fr
    }

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

    .sm\:items-end {
        align-items: flex-end
    }

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

    .sm\:justify-between {
        justify-content: space-between
    }

    .sm\:gap-\[28px\] {
        gap: 28px
    }

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

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

    .sm\:gap-y-0 {
        row-gap: 0
    }

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

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

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

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

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

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

    .sm\:pb-\[31px\] {
        padding-bottom: 31px
    }

    .sm\:pt-\[33px\] {
        padding-top: 33px
    }

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

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

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

    .md\:block {
        display: block
    }

    .md\:aspect-\[561\/210\] {
        aspect-ratio: 561/210
    }

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

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

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

    .md\:items-stretch {
        align-items: stretch
    }

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

    .md\:border-l {
        border-left-width: 1px
    }

    .md\:border-t-0 {
        border-top-width: 0
    }

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

    .md\:pl-\[80px\] {
        padding-left: 80px
    }

    .md\:pt-0 {
        padding-top: 0
    }

}

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

    .lg\:left-\[4px\] {
        left: 4px
    }

    .lg\:left-\[600px\] {
        left: 600px
    }

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

    .lg\:top-\[133px\] {
        top: 133px
    }

    .lg\:col-start-1 {
        grid-column-start: 1
    }

    .lg\:col-start-2 {
        grid-column-start: 2
    }

    .lg\:col-start-3 {
        grid-column-start: 3
    }

    .lg\:col-end-2 {
        grid-column-end: 2
    }

    .lg\:col-end-3 {
        grid-column-end: 3
    }

    .lg\:col-end-4 {
        grid-column-end: 4
    }

    .lg\:row-start-1 {
        grid-row-start: 1
    }

    .lg\:row-start-3 {
        grid-row-start: 3
    }

    .lg\:row-start-6 {
        grid-row-start: 6
    }

    .lg\:row-start-7 {
        grid-row-start: 7
    }

    .lg\:row-end-2 {
        grid-row-end: 2
    }

    .lg\:row-end-4 {
        grid-row-end: 4
    }

    .lg\:row-end-5 {
        grid-row-end: 5
    }

    .lg\:row-end-8 {
        grid-row-end: 8
    }

    .lg\:row-end-9 {
        grid-row-end: 9
    }

    .lg\:ml-0 {
        margin-left: 0
    }

    .lg\:mr-\[17px\] {
        margin-right: 17px
    }

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

    .lg\:mt-\[13px\] {
        margin-top: 13px
    }

    .lg\:mt-\[1px\] {
        margin-top: 1px
    }

    .lg\:mt-\[30px\] {
        margin-top: 30px
    }

    .lg\:mt-\[39px\] {
        margin-top: 39px
    }

    .lg\:mt-\[3px\] {
        margin-top: 3px
    }

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

    .lg\:mt-\[50px\] {
        margin-top: 50px
    }

    .lg\:mt-\[55px\] {
        margin-top: 55px
    }

    .lg\:block {
        display: block
    }

    .lg\:grid {
        display: grid
    }

    .lg\:hidden {
        display: none
    }

    .lg\:aspect-auto {
        aspect-ratio: auto
    }

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

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

    .lg\:min-h-\[233px\] {
        min-height: 233px
    }

    .lg\:min-h-\[288px\] {
        min-height: 288px
    }

    .lg\:min-h-\[392px\] {
        min-height: 392px
    }

    .lg\:min-h-\[452px\] {
        min-height: 452px
    }

    .lg\:min-h-\[541px\] {
        min-height: 541px
    }

    .lg\:w-\[135px\] {
        width: 135px
    }

    .lg\:w-\[271px\] {
        width: 271px
    }

    .lg\:w-\[431px\] {
        width: 431px
    }

    .lg\:w-\[446px\] {
        width: 446px
    }

    .lg\:w-\[457px\] {
        width: 457px
    }

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

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

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

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

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

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

    .lg\:-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))
    }

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

    .md\: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\:grid-cols-\[1fr_520px\] {
        grid-template-columns: 1fr 520px
    }

    .lg\:grid-cols-\[1fr_570px\] {
        grid-template-columns: 1fr 570px
    }

    .lg\:grid-cols-\[270px_171px_148px_150px_1fr\] {
        grid-template-columns: 270px 171px 148px 150px 1fr
    }

    .lg\:grid-cols-\[370px_400px_1fr\] {
        grid-template-columns: 370px 400px 1fr
    }

    .lg\:grid-cols-\[456px_1fr\] {
        grid-template-columns: 456px 1fr
    }

    .lg\:grid-cols-\[470px_1fr\] {
        grid-template-columns: 470px 1fr
    }

    .lg\:grid-cols-\[561fr_275fr_275fr\] {
        grid-template-columns: 561fr 275fr 275fr
    }

    .lg\:grid-cols-\[minmax\(0\2c 480fr\)_minmax\(0\2c 650fr\)\] {
        grid-template-columns: minmax(0, 480fr) minmax(0, 650fr)
    }

    .lg\:grid-cols-\[minmax\(0\2c 578fr\)_minmax\(0\2c 365fr\)_135px\] {
        grid-template-columns: minmax(0, 578fr) minmax(0, 365fr) 135px
    }

    .lg\:grid-rows-\[210px_20px_204px_6px_14px_6px_204px_6px\] {
        grid-template-rows: 210px 20px 204px 6px 14px 6px 204px 6px
    }

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

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

    .lg\:items-end {
        align-items: flex-end
    }

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

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

    .lg\:gap-0 {
        gap: 0
    }

    .lg\:gap-\[20px\] {
        gap: 20px
    }

    .lg\:gap-\[40px\] {
        gap: 40px
    }

    .lg\:gap-\[90px\] {
        gap: 90px
    }

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

    .lg\:gap-y-0 {
        row-gap: 0
    }

    .lg\:self-auto {
        align-self: auto
    }

    .lg\:self-center {
        align-self: center
    }

    .lg\:overflow-hidden {
        overflow: hidden
    }

    .lg\:border-r {
        border-right-width: 1px
    }

    .lg\:border-\[rgba\(234\2c 246\2c 241\2c \.16\)\] {
        border-color: rgba(234, 246, 241, .16)
    }

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

    .lg\:p-0 {
        padding: 0
    }

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

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

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

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

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

    .lg\:pb-0 {
        padding-bottom: 0
    }

    .lg\:pb-\[20px\] {
        padding-bottom: 20px
    }

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

    .lg\:pb-\[78px\] {
        padding-bottom: 78px
    }

    .lg\:pb-\[81px\] {
        padding-bottom: 81px
    }

    .lg\:pb-\[94px\] {
        padding-bottom: 94px
    }

    .lg\:pl-\[151px\] {
        padding-left: 151px
    }

    .lg\:pl-\[30px\] {
        padding-left: 30px
    }

    .lg\:pl-\[34px\] {
        padding-left: 34px
    }

    .lg\:pl-\[37\.644\%\] {
        padding-left: 37.644%
    }

    .lg\:pl-\[7\.863\%\] {
        padding-left: 7.863%
    }

    .lg\:pl-\[73px\] {
        padding-left: 73px
    }

    .lg\:pr-\[24px\] {
        padding-right: 24px
    }

    .lg\:pr-\[30px\] {
        padding-right: 30px
    }

    .lg\:pt-\[128px\] {
        padding-top: 128px
    }

    .lg\:pt-\[22px\] {
        padding-top: 22px
    }

    .lg\:pt-\[30px\] {
        padding-top: 30px
    }

    .lg\:pt-\[81px\] {
        padding-top: 81px
    }

    .lg\:text-right {
        text-align: right
    }

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

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

@media (min-width:1280px) {
    .xl\:block {
        display: block
    }

    /* Hero chips. These three sat outside any media query, so they
       applied at every width and were then overruled by the
       unprefixed rules further down the sheet - chips 2 and 3 both
       ended up at top:240px on every screen. */
    .xl\:right-\[-29px\] {
        right: -29px
    }

    .xl\:top-\[342px\] {
        top: 342px
    }

    .xl\:top-\[482px\] {
        top: 482px
    }
}

@media (max-width:1399px) {
    .shell {
        max-width: 1140px;
    }
}

@media (max-width:1199px) {
    .shell {
        max-width: 960px;
    }

    .lg\:grid-cols-\[270px_171px_148px_150px_1fr\] {
        grid-template-columns: 240px 121px 108px 90px 1fr;
    }
}

@media (max-width:991px) {
    .shell {
        max-width: 720px;
    }

    .f-top {
        grid-template-columns: 1fr 1fr 2fr;
    }

    .f-top .mo-in:nth-child(1) {
        grid-column: span 2;
    }

    .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-upload {
        width: fit-content !important;
        margin-bottom: 0 !important;
        margin-right: 10px !important;
    }

    #process .max-w-\[1000px\] {
        min-width: 850px;
    }
}

@media (max-width:767px) {
    .shell {
        max-width: 540px;
    }

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

    .text-\[16px\] {
        font-size: 16px;
        line-height: 22px !important;
    }

    .h-\[61px\],
    .h-\[63px\] {
        height: 48px;
        font-size: 14px;
    }

    .marquee-wrap.h-\[134px\] {
        height: 74px;
    }

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

    .max-w-\[270px\] {
        max-width: 100%;
    }

    .f-top {
        grid-template-columns: 1fr 1fr;
    }

    .f-top .mo-in:nth-child(5) {
        grid-column: span 2;

        ul {
            justify-content: center;
        }
    }

    .mt-\[59px\] {
        margin-top: 30px;
        text-align: center;
    }

    .text-\[clamp\(34px\2c 3\.6vw\2c 50px\)\] {
        font-size: clamp(26px, 3.6vw, 26px)
    }

    .text-\[clamp\(34px\2c 3\.8vw\2c 52px\)\] {
        font-size: clamp(34px, 3.8vw, 52px)
    }

    .text-\[clamp\(34px\2c 4\.1vw\2c 58px\)\] {
        font-size: clamp(34px, 4.1vw, 58px)
    }

    .text-\[clamp\(34px\2c 4\.2vw\2c 60px\)\] {
        font-size: clamp(34px, 4.2vw, 60px)
    }

    .text-\[clamp\(38px\2c 4\.4vw\2c 62px\)\] {
        font-size: clamp(28px, 4.4vw, 28px)
    }

    .text-\[clamp\(44px\2c 5\.6vw\2c 80px\)\] {
        font-size: clamp(30px, 5.6vw, 30px)
    }

    dt[data-mo-count] {
        font-size: 50px;
        line-height: 56px;
    }

    dt[data-mo-count]+dd {
        font-size: 16px;
    }

    #process .border.mo-in {
        padding: 20px !important;
    }
}

@media (max-width:575px) {
    .shell {
        max-width: 100%;
    }
}

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


/* Section rhythm.
   One scale for every gap between two sections, shared by every template —
   the home page, the page templates, and the single post / case study /
   technology pages. The values below are the design ones, so nothing above
   1200px moves; each breakpoint after them retunes the variables and the
   whole site steps down together instead of each page being hand-tuned.
   Same max-width breakpoints .shell already uses.

   The comment on each line names the utility it retunes. */
:root {
    --sec-gap: 120px;
    /* pt-[120px] · mt-[120px] — section to section */
    --sec-gap-wide: 139px;
    /* pt-[139px] — the wider variant */
    --sec-band: 100px;
    /* py-[100px] — padded band (Technology stack) */
    --sec-band-sm: 80px;
    /* py-[80px] · pb-[80px] — padded band (Outcomes, Benefits) */
    --sec-lead: 71px;
    /* pt-[71px] — stat strip under a hero */
    --sec-step: 50px;
    /* pt-[50px] — step between two related blocks */
    --sec-step-sm: 30px;
    /* pt-[30px] · pb-[30px] */
    --sec-inner: 50px;
    /* mt-[50px] — section header to its grid */
    --hero-visual-top: 120px;
    --hero-visual-bottom: 90px;
    /* home hero visual */
    --hero-y: 64px;
    /* pt-[64px] · pb-[64px] — page hero, below lg only */
    --hero-top-tall: 96px
        /* pt-[96px] — the taller hero (About) */
}

/* Scoped to sections so the same utility inside a card keeps its literal
   value. #content is the <main> every template opens with. */
#content>section.pt-\[120px\] {
    padding-top: var(--sec-gap)
}

#content>section.mt-\[120px\] {
    margin-top: var(--sec-gap)
}

#content>section.pt-\[139px\] {
    padding-top: var(--sec-gap-wide)
}

#content>section.pt-\[71px\] {
    padding-top: var(--sec-lead)
}

#content>section.pt-\[50px\] {
    padding-top: var(--sec-step)
}

#content>section.pt-\[30px\] {
    padding-top: var(--sec-step-sm)
}

#content>section.py-\[100px\] {
    padding-top: var(--sec-band);
    padding-bottom: var(--sec-band)
}

#content>section.py-\[80px\] {
    padding-top: var(--sec-band-sm);
    padding-bottom: var(--sec-band-sm)
}

#content section>.shell>.mt-\[50px\] {
    margin-top: var(--sec-inner)
}

#content>section>.shell>.mt-\[120px\].mb-\[90px\] {
    margin-top: var(--hero-visual-top);
    margin-bottom: var(--hero-visual-bottom)
}

@media (max-width:1199px) {
    :root {
        --sec-gap: 96px;
        --sec-gap-wide: 112px;
        --sec-band: 80px;
        --sec-band-sm: 72px;
        --sec-lead: 60px;
        --sec-step: 44px;
        --sec-step-sm: 28px;
        --sec-inner: 44px;
        --hero-visual-top: 96px;
        --hero-visual-bottom: 72px
    }
}

/* The hero paddings and the Benefits band carry lg: overrides of their own,
   which still win from 1024px up. They are only retuned from 991px down,
   where no lg: utility applies and there is nothing to fight with. */
@media (max-width:991px) {
    :root {
        --sec-gap: 80px;
        --sec-gap-wide: 92px;
        --sec-band: 72px;
        --sec-band-sm: 64px;
        --sec-lead: 52px;
        --sec-step: 40px;
        --sec-step-sm: 24px;
        --sec-inner: 36px;
        --hero-visual-top: 72px;
        --hero-visual-bottom: 56px;
        --hero-y: 52px;
        --hero-top-tall: 64px
    }

    #content>section.pt-\[64px\] {
        padding-top: var(--hero-y)
    }

    #content>section.pb-\[64px\] {
        padding-bottom: var(--hero-y)
    }

    #content>section.pt-\[96px\] {
        padding-top: var(--hero-top-tall)
    }

    #content>section.pb-\[80px\] {
        padding-bottom: var(--sec-band-sm)
    }

    #content>section.pb-\[30px\] {
        padding-bottom: var(--sec-step-sm)
    }

    #content>section>.grad-band {
        padding-top: var(--sec-band-sm);
        padding-bottom: var(--sec-band-sm)
    }
}

@media (max-width:767px) {
    :root {
        --sec-gap: 64px;
        --sec-gap-wide: 72px;
        --sec-band: 56px;
        --sec-band-sm: 52px;
        --sec-lead: 44px;
        --sec-step: 32px;
        --sec-step-sm: 20px;
        --sec-inner: 30px;
        --hero-visual-top: 56px;
        --hero-visual-bottom: 44px;
        --hero-y: 44px;
        --hero-top-tall: 52px
    }
}

@media (max-width:575px) {
    :root {
        --sec-gap: 48px;
        --sec-gap-wide: 56px;
        --sec-band: 44px;
        --sec-band-sm: 44px;
        --sec-lead: 36px;
        --sec-step: 28px;
        --sec-step-sm: 18px;
        --sec-inner: 26px;
        --hero-visual-top: 40px;
        --hero-visual-bottom: 32px;
        --hero-y: 36px;
        --hero-top-tall: 44px
    }
}

.forminator-label {
    font-weight: 400 !important;
    font-size: 10.8px !important;
    line-height: 13px !important;
    display: flex !important;
    align-items: center !important;
    letter-spacing: 1.61px !important;
    text-transform: uppercase !important;
    color: rgba(6, 42, 34, 0.62) !important;
    margin-bottom: 10px !important;
}

.forminator-input,
.forminator-textarea {
    background: #FFFFFF !important;
    border: 1px solid rgba(6, 42, 34, 0.12) !important;
    border-radius: 10px !important;
    font-family: 'Sora', sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 15px !important;
    line-height: 19px !important;
    color: #757575 !important;
    padding: 15px !important;
    outline: none !important;
    box-shadow: none !important;
}

.forminator-button-submit {
    width: 100% !important;
    font-family: 'Sora', sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 15.5px !important;
    line-height: 20px !important;
    text-align: center !important;
    color: #03130F !important;
    padding: 18px !important;
    background: linear-gradient(92.84deg, #35D6A4 0%, #17B9C4 100%) !important;
    border-radius: 12px !important;
}

.forminator-button-submit:hover,
.forminator-button-submit:active,
.forminator-button-submit:focus {
    box-shadow: 0 16px 40px rgba(53, 214, 164, .34) !important;
}

.select2-selection {
    border-color: rgba(6, 42, 34, 0.12) !important;
    background: #FFFFFF !important;
    border-radius: 10px !important;
    padding: 5.5px 15px !important;
    height: fit-content !important;
    outline: none !important;
}

.select2-selection__rendered,
.select2-selection__placeholder {
    font-family: 'Sora', sans-serif !important;
    padding: 0 !important;
    font-size: 15px !important;
    line-height: 19px !important;
    color: #757575 !important;
}

.select2-selection__arrow {
    width: fit-content !important;

    .forminator-icon-chevron-down {
        color: #757575 !important;
        font-weight: 400 !important;
    }
}

.select2-container {
    .forminator-select-dropdown {
        background: #FFFFFF !important;
        border-color: rgba(6, 42, 34, 0.12) !important;
        border-radius: 10px !important;
        padding: 2px !important;
    }

    .select2-results__option {
        font-family: 'Sora', sans-serif !important;
        font-size: 15px !important;
        line-height: 19px !important;
        color: #757575 !important;
        padding: 10px 10px !important;
        border-radius: 8px !important;
        outline: none !important;

        +.select2-results__option {
            margin-top: 2px !important;
        }

    }

    .select2-results__option--selected,
    .select2-results__option--highlighted {
        background: linear-gradient(92.84deg, #35D6A4 0%, #17B9C4 100%) !important;
        color: #FFFFFF !important;
    }
}

.forminator-file-upload {
    background: #FFFFFF !important;
    border: 1px solid rgba(6, 42, 34, 0.12) !important;
    border-radius: 10px !important;
    padding: 4.4px 15px 4.4px 4.4px !important;
    outline: none !important;
    box-shadow: none !important;

    span {
        font-family: 'Sora', sans-serif !important;
        font-style: normal !important;
        font-weight: 400 !important;
        font-size: 15px !important;
        line-height: 19px !important;
        color: #757575 !important;
    }
}

.forminator-button-upload {
    padding: 14.4px 10px !important;
    font-size: 12px !important;
    line-height: 12px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    background: linear-gradient(92.84deg, #35D6A4 0%, #17B9C4 100%) !important;
    color: #03130F !important;
}

/* Industry strip as a carousel below 1200.
   The accordion wants a 372px open panel plus a readable sliver of every other
   industry, which needs roughly 1080px of strip; the container is 960px from
   1024 to 1199 and less below that, so the panels there were squeezing to
   nothing. Under 1200 the same panels are laid out as slides instead - two per
   view down to 768, one below it - each card showing its body. The inline
   script in template-parts/industry-strip.php adds .ind-carousel and sets
   --ind-slide; the rest is here. The id is industryPanels - see that file for
   why it is not the industryStrip the older page scripts look for. */
#industryPanels.ind-carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* The cards carry a shadow a scroll port would otherwise clip. */
    padding-bottom: 4px
}

#industryPanels.ind-carousel::-webkit-scrollbar {
    display: none
}

#industryPanels.ind-carousel .ind-panel {
    flex: 0 0 var(--ind-slide, 100%);
    width: var(--ind-slide, 100%);
    min-width: 0;
    scroll-snap-align: start;
    /* Nothing opens on click any more, so the panel drops the hand cursor the
       accordion gives it and the flex-basis easing it has nothing to animate
       here - that only made a resize look like a stutter. */
    cursor: default;
    transition: none
}

/* The body is hard-set to w-[372px], the width of an open accordion panel. A
   card is whatever the view divides into - wider than that at 1199, narrower
   than it on a phone - so it follows the card. */
#industryPanels.ind-carousel .ind-panel [data-body] {
    width: 100%;
    max-width: 100%
}

.ind-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px
}

.ind-dots {
    display: flex;
    align-items: center;
    gap: 8px
}

.ind-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: rgba(6, 42, 34, .18);
    transition: width .25s cubic-bezier(.22, .61, .36, 1), background-color .25s
}

.ind-dot[aria-current="true"] {
    width: 26px;
    background: var(--mint)
}

.ind-arrows {
    display: flex;
    gap: 10px
}

.ind-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(6, 42, 34, .22);
    border-radius: 9999px;
    background: #fff;
    color: var(--ink);
    font-size: 16px;
    line-height: 1;
    transition: border-color .2s, color .2s, opacity .2s
}

.ind-arrow:hover:not(:disabled) {
    border-color: var(--green);
    color: var(--green)
}

.ind-arrow:disabled {
    opacity: .35;
    cursor: default
}

/* h-[480px] is a lot of a small phone screen for one card, and the body only
   needs about 300px of it. */
@media (max-width:575px) {
    #industryPanels.ind-carousel {
        height: 420px
    }

    .ind-arrow {
        width: 40px;
        height: 40px
    }
}






/* Header mega menu — light theme.

   Every selector is a plain .pm-* class, so none of it needs a Tailwind build.

   WARNING: prilixor.css is compiled Tailwind output. Running
     npx tailwindcss -c tailwind.config.js -i input.css -o prilixor.css --minify
   overwrites this file and deletes this block. Move it into input.css if you
   start rebuilding again. */

.pm-root {
    /* Green is for text, mint is decorative only. Mint on white is ~1.9:1. */
    --pm-accent: #0b7a5c;
    --pm-mint: #35d6a4;
    --pm-cyan: #17b9c4;
    --pm-fg: #0c2a23;
    --pm-fg-deep: #05241d;
    --pm-muted: #516a65;
    --pm-faint: rgba(81, 106, 101, .55);
    --pm-line: #e7eae9;
    --pm-line-soft: #eef3f1;
    --pm-tile: #fff;
    --pm-tile-line: #e2ece8;
    --pm-head-h: 79px
}

/* Trigger button */
.pm-trigger {
    display: flex;
    align-items: center;
    gap: 11px;
    height: 46px;
    padding: 0 21px;
    border: 1px solid rgba(53, 214, 164, .6);
    border-radius: 999px;
    background: rgba(53, 214, 164, .1);
    color: var(--pm-fg);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease
}

.pm-trigger:hover {
    background: rgba(53, 214, 164, .18)
}

.pm-trigger[aria-expanded=true] {
    background: rgba(53, 214, 164, .22);
    border-color: rgba(11, 122, 92, .45)
}

.pm-trigger-label {
    font-size: 13.6px;
    line-height: 1
}

.pm-bars {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 20px
}

.pm-bars span {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: currentColor;
    transition: transform .28s cubic-bezier(.22, .61, .36, 1)
}

.pm-trigger[aria-expanded=true] .pm-bars span:first-child {
    transform: translateY(3.5px) rotate(45deg)
}

.pm-trigger[aria-expanded=true] .pm-bars span:last-child {
    transform: translateY(-3.5px) rotate(-45deg)
}

/* Panel */
.pm-panel {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: 60;
    background: linear-gradient(168deg, #fff 0%, #f7fbf9 46%, #f1f7f4 100%);
    border-top: 1px solid var(--pm-line);
    border-bottom: 1px solid var(--pm-line);
    box-shadow: 0 26px 60px rgba(6, 42, 34, .10);
    color: var(--pm-fg);
    /* Scrolls at every size, not just mobile, for short laptops and landscape phones. */
    max-height: calc(100dvh - var(--pm-head-h));
    overflow-y: auto;
    overscroll-behavior: contain
}

.pm-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(58% 78% at 88% 0%, rgba(53, 214, 164, .13) 0, rgba(53, 214, 164, 0) 68%),
        radial-gradient(46% 62% at 2% 100%, rgba(23, 185, 196, .09) 0, rgba(23, 185, 196, 0) 70%)
}

.mo .pm-panel:not([hidden]) {
    animation: pmDrop .3s cubic-bezier(.22, .61, .36, 1) both
}

@keyframes pmDrop {
    from {
        opacity: 0;
        transform: translateY(-10px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.pm-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 46fr) minmax(0, 52fr);
    gap: 14px 54px;
    padding-block: 34px 38px;
    align-items: start
}

/* Left column — the nav rows */
.pm-eyebrow {
    margin: 0 0 6px;
    font-size: 11.4px;
    line-height: 1.2;
    letter-spacing: .21em;
    text-transform: uppercase;
    color: var(--pm-accent)
}

.pm-nav {
    margin: 0;
    padding: 0;
    list-style: none
}

/* Rows that open a listing are <button>, not <a>. Undo the button defaults. */
button.pm-nav-item {
    width: 100%;
    background: none;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none
}

.pm-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 2px;
    border-bottom: 1px solid var(--pm-line);
    font-family: Sora, sans-serif;
    font-weight: 400;
    font-size: 25px;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--pm-fg);
    text-decoration: none;
    transition: color .22s ease, padding-left .22s cubic-bezier(.22, .61, .36, 1)
}

.pm-nav li:last-child .pm-nav-item {
    border-bottom: 0
}

.pm-nav-item:focus-visible,
.pm-nav-item:hover,
.pm-nav-item.is-active {
    color: var(--pm-accent);
    padding-left: 9px
}

.pm-nav-item:focus-visible {
    outline: 2px solid var(--pm-accent);
    outline-offset: 4px;
    border-radius: 4px
}

/* Arrow on a closed row, mint dot on the open one. */
.pm-mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    font-size: 14px;
    line-height: 1;
    color: var(--pm-faint);
    transition: color .2s ease
}

.pm-nav-item:hover .pm-mark {
    color: var(--pm-accent)
}

.pm-nav-item.is-active .pm-mark {
    font-size: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pm-mint);
    box-shadow: 0 0 0 1px rgba(11, 122, 92, .35), 0 0 0 5px rgba(53, 214, 164, .18)
}

.pm-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 20px 0 0;
    font-size: 12.2px;
    line-height: 1.4
}

.pm-contact a {
    color: var(--pm-muted);
    text-decoration: none;
    transition: color .2s ease
}

.pm-contact a:hover {
    color: var(--pm-accent)
}

/* Right column — the listings */
.pm-detail {
    display: flex;
    flex-direction: column;
    min-width: 0
}

.pm-pane {
    display: none
}

.pm-pane.is-active {
    display: block
}

.mo .pm-pane.is-active {
    animation: pmFade .26s ease both
}

@keyframes pmFade {
    from {
        opacity: 0;
        transform: translateY(6px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.pm-title {
    margin: 8px 0 0;
    font-family: Sora, sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.28;
    letter-spacing: -.028em;
    color: var(--pm-fg-deep);
    max-width: 23ch
}

.pm-sub {
    margin: 10px 0 0;
    font-size: 13.2px;
    line-height: 1.62;
    color: var(--pm-muted);
    max-width: 52ch
}

/* Feature card — the only tinted surface, so the default pane has a focal point. */
.pm-feature {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 132px;
    padding: 22px 24px;
    border: 1px solid rgba(53, 214, 164, .34);
    border-radius: 13px;
    text-decoration: none;
    background: linear-gradient(140deg, #e9f7f1 0%, #ddf1e9 52%, #e8f6f2 100%)
}

.pm-feature-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.pm-feature::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(244, 250, 247, .96) 0%, rgba(244, 250, 247, .78) 50%, rgba(244, 250, 247, .30) 100%)
}

.pm-feature>* {
    position: relative;
    z-index: 1
}

.pm-feature .pm-eyebrow {
    font-size: 10.5px;
    margin-bottom: 8px
}

.pm-feature-title {
    margin: 0;
    font-family: Sora, sans-serif;
    font-weight: 400;
    font-size: 19px;
    line-height: 1.34;
    letter-spacing: -.02em;
    color: var(--pm-fg-deep);
    max-width: 24ch
}

/* Stats */
.pm-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 12px 0 0;
    border: 1px solid var(--pm-tile-line);
    border-radius: 13px;
    overflow: hidden;
    background: var(--pm-tile)
}

.pm-stat {
    padding: 15px 18px 16px;
    border-top: 1px solid var(--pm-line-soft);
    border-left: 1px solid var(--pm-line-soft)
}

.pm-stat:nth-child(-n+2) {
    border-top: 0
}

.pm-stat:nth-child(odd) {
    border-left: 0
}

.pm-stat dt {
    font-family: Sora, sans-serif;
    font-size: 25px;
    line-height: 1.2;
    letter-spacing: -.03em;
    color: var(--pm-fg-deep)
}

.pm-stat dd {
    margin: 5px 0 0;
    font-size: 11.8px;
    line-height: 1.45;
    color: var(--pm-muted)
}

.pm-hint {
    margin: 14px 0 0;
    font-size: 12.2px;
    line-height: 1.5;
    color: var(--pm-muted)
}

.pm-hint b {
    font-weight: 500;
    color: var(--pm-accent)
}

/* Tile grid — technologies and industries. */
.pm-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 16px
}

.pm-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--pm-tile-line);
    border-radius: 9px;
    background: var(--pm-tile);
    font-size: 14px;
    line-height: 1.3;
    color: var(--pm-fg);
    text-decoration: none;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease
}

.pm-tile:focus-visible,
.pm-tile:hover {
    border-color: rgba(53, 214, 164, .6);
    background: rgba(53, 214, 164, .09);
    color: var(--pm-accent);
    box-shadow: 0 4px 14px rgba(11, 122, 92, .07);
    outline: none
}

.pm-tile-num {
    flex: none;
    font-size: 10.8px;
    letter-spacing: .06em;
    color: var(--pm-faint);
    font-variant-numeric: tabular-nums
}

.pm-tile:hover .pm-tile-num {
    color: rgba(11, 122, 92, .7)
}

.pm-tile-label {
    flex: 1 1 auto;
    min-width: 0
}

.pm-tile-arrow {
    flex: none;
    font-size: 13px;
    color: var(--pm-faint)
}

.pm-tile:hover .pm-tile-arrow {
    color: var(--pm-accent)
}

/* The only link to the archive, since the row above is a toggle at every width. */
.pm-tile-all {
    grid-column: 1/-1;
    border-style: dashed;
    color: var(--pm-accent);
    font-weight: 500
}

/* Buttons */
.pm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 20px
}

.pm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 170px;
    height: 46px;
    padding: 0 26px;
    border-radius: 999px;
    font-family: Sora, sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease
}

.pm-btn:hover {
    transform: translateY(-1px)
}

.pm-btn-primary {
    background: var(--grad-btn);
    color: #03130f;
    box-shadow: 0 10px 26px rgba(53, 214, 164, .28)
}

.pm-btn-ghost {
    border: 1px solid #d7e3de;
    background: #fff;
    color: var(--pm-fg);
    font-weight: 500
}

.pm-btn-ghost:hover {
    border-color: var(--pm-accent);
    color: var(--pm-accent)
}

/* Backdrop */
.pm-scrim {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(6, 42, 34, .26);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border: 0;
    padding: 0;
    cursor: default
}

/* Responsive breakpoints.
   1280+  two columns, full size
   1100   tighter gap, smaller nav type
   1024   landscape tablets
   860    single column, accordion
   600    phones
   380    small phones */

@media (max-width:1279px) {
    .pm-grid {
        gap: 14px 40px;
        padding-block: 30px 34px
    }

    .pm-nav-item {
        font-size: 23px;
        padding: 12px 2px
    }

    .pm-title {
        font-size: 22px
    }
}

@media (max-width:1099px) {
    .pm-grid {
        grid-template-columns: minmax(0, 44fr) minmax(0, 54fr);
        gap: 12px 30px
    }

    .pm-nav-item {
        font-size: 21px;
        padding: 11px 2px
    }

    .pm-feature {
        min-height: 112px;
        padding: 18px 20px
    }

    .pm-feature-title {
        font-size: 17px
    }

    .pm-stat {
        padding: 13px 15px 14px
    }

    .pm-stat dt {
        font-size: 22px
    }

    .pm-tile {
        padding: 11px 12px;
        font-size: 13.4px
    }

    .pm-btn {
        min-width: 150px;
        font-size: 14px
    }
}

/* Accordion.
   Below 859px the right column is hidden (feature card, stats and buttons with
   it) and the JS moves each listing inside its own <li>. */
@media (max-width:859px) {
    .pm-grid {
        grid-template-columns: 1fr;
        gap: 0;
        padding-block: 22px 26px
    }

    .pm-detail {
        display: none
    }

    /* Divider moves to the <li> so it sits below the open listing, not above it. */
    .pm-nav-item {
        border-bottom: 0
    }

    .pm-nav li {
        border-bottom: 1px solid var(--pm-line)
    }

    .pm-contact {
        margin-top: 16px
    }

    /* The drawer. Height is animated instead of display-toggled. */
    .pm-nav .pm-pane {
        display: block;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height .32s cubic-bezier(.22, .61, .36, 1), opacity .2s ease, margin-bottom .32s cubic-bezier(.22, .61, .36, 1)
    }

    .pm-nav .pm-pane.is-active {
        max-height: 700px;
        opacity: 1;
        margin-bottom: 13px
    }

    /* The row above is already the heading. */
    .pm-nav .pm-pane .pm-eyebrow,
    .pm-nav .pm-pane .pm-title {
        display: none
    }

    .pm-nav .pm-pane .pm-sub {
        margin: 0;
        font-size: 12.6px;
        max-width: none
    }

    .pm-nav .pm-tiles {
        grid-template-columns: 1fr;
        gap: 7px;
        margin-top: 11px
    }

    /* Arrow becomes a chevron that flips when open. */
    .pm-nav-item[data-pm-panel] .pm-mark {
        transform: rotate(90deg);
        transition: transform .3s cubic-bezier(.22, .61, .36, 1), color .2s ease
    }

    .pm-nav-item[data-pm-panel].is-active .pm-mark {
        width: 14px;
        height: 14px;
        font-size: 14px;
        border-radius: 0;
        background: none;
        box-shadow: none;
        color: var(--pm-accent);
        transform: rotate(-90deg)
    }

    /* Keep an open row flush with the closed ones. */
    .pm-nav-item[data-pm-panel].is-active {
        padding-left: 0
    }
}

@media (max-width:599px) {
    .pm-grid {
        padding-block: 20px 26px
    }

    .pm-nav-item {
        font-size: 19px;
        padding: 10px 2px
    }

    .pm-nav-item:focus-visible,
    .pm-nav-item:hover,
    .pm-nav-item.is-active {
        padding-left: 6px
    }

    .pm-tiles {
        grid-template-columns: 1fr;
        gap: 8px
    }

    .pm-contact {
        gap: 6px 16px;
        font-size: 11.8px
    }

    .pm-btn {
        flex: 1 1 100%;
        min-width: 0
    }

    /* Trigger drops its label to leave room for the logo and CTA. */
    .pm-trigger {
        padding: 0 16px;
        gap: 9px
    }
}

@media (max-width:379px) {
    .pm-nav-item {
        font-size: 17.5px
    }

    .pm-title {
        font-size: 18px
    }

    .pm-trigger-label {
        display: none
    }

    .pm-trigger {
        width: 46px;
        padding: 0;
        justify-content: center
    }
}

/* Landscape phones: the panel fills the screen, so trim the padding. */
@media (max-height:520px) and (orientation:landscape) {
    .pm-grid {
        padding-block: 16px 20px
    }

    .pm-nav-item {
        font-size: 17px;
        padding: 8px 2px
    }
}

@media (prefers-reduced-motion:reduce) {

    .pm-bars span,
    .pm-btn,
    .pm-nav-item,
    .pm-tile {
        transition: none
    }
}

/* row: progressbar stretches, the two arrows keep their size */
.tech-testi-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

/* track — 2px hairline, flex:1 so it eats the space the arrows leave */
.tech-testi-progressbar {
    flex: 1;
    height: 2px;
    background: rgba(6, 42, 34, .10);
}

/* fill — JS writes the width as a percentage on slide change */
.tech-testi-progressbar span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #35d6a4, #17b9c4);
    transition: width .3s ease;
}

/* arrows — a wide, empty circle carrying a hairline arrow, per the reference.
       The ring is pale mint so the circle reads as an outline, not a filled button. */
.tech-testi-arrow {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    padding: 0;
    border: 1px solid rgba(53, 214, 164, .45);
    border-radius: 50%;
    background: transparent;
    color: #0a7d5d;
    cursor: pointer;
    transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}

/* the stroke sits at roughly a third of the circle, which is what keeps it looking
       like a hairline mark inside open space rather than an icon filling a button */
.tech-testi-arrow svg {
    width: 15px;
    height: auto;
    overflow: visible;
}

/* one SVG serves both directions — the prev button is the same shape mirrored */
.tech-testi-prev svg {
    transform: scaleX(-1);
}

.tech-testi-arrow:hover {
    border-color: rgba(53, 214, 164, .9);
    background: rgba(53, 214, 164, .08);
}

/* keyboard users get the same ring the mouse gets, plus a visible focus outline */
.tech-testi-arrow:focus-visible {
    outline: 2px solid #0a7d5d;
    outline-offset: 3px;
}

/* Swiper disables these at the ends of the track */
.tech-testi-arrow:disabled {
    opacity: .35;
    cursor: default;
    transform: none;
}

/* sm: — the 640px step the utility classes used */
@media (min-width: 640px) {
    .tech-testi-nav {
        gap: 16px;
        margin-top: 20px;
    }

    .tech-testi-arrow {
        width: 50px;
        height: 50px;
    }

    .tech-testi-arrow svg {
        width: 20px;
    }
}

/* Prilixor — industry detail page, DESIGN OPTION 2.
   =========================================================================
   A second layout for the same page, offered alongside assets/css/industry.css
   (option 1). The two are never loaded together. Both share the hero's
   composition; option 2 swaps option 1's stats row for a capability strip, and
   reads the workflow as one horizontal node chain rather than a tab switcher.

   Same brand, same tokens, same rhythm — only the composition differs.

   prilixor.css is compiled Tailwind and is NOT rebuilt (PRILIXOR-README §1), so
   a utility no existing page already uses has no rule behind it. Everything this
   layout needs that the utility inventory cannot reach lives here as plain CSS
   under an `id2-` prefix, and the markup sticks to the handful of utilities the
   shipped build already carries.

   Tokens are the ones declared in input.css. No new colours.
   Only loaded on the industry detail page (option 2).
   ========================================================================= */

/* ── section rhythm ───────────────────────────────────────────────────────
   The 120px gap the rest of the site opens on, tightened on a phone where
   120px is most of a screen. Matches option 1 so the two can be compared
   scrolling side by side. */

.id2-sec {
    padding-top: 72px;
}

@media (min-width:1024px) {
    .id2-sec {
        padding-top: 120px;
    }
}

/* ── type scale ───────────────────────────────────────────────────────────
   Declared here rather than as arbitrary Tailwind values: the compiled build
   only carries the sizes the existing pages already use, so a new clamp()
   written inline would emit nothing. */

/* Runs the full shell, so it takes option 1's display size and tracking —
   the two heroes share a silhouette and differ in what fills it.

   The two clauses are separate blocks rather than one line with a <br>,
   because they carry different line-heights: the first sits open, the gradient
   second sits tighter beneath it. */
.id2-h1 {
    font-family: 'Sora', sans-serif;
    font-weight: 400;
    font-size: clamp(40px, 5.6vw, 80px);
    letter-spacing: -.063em;
    color: #0c2a23;
}

.id2-h1>span {
    display: block;
    line-height: 1.4;
}

.id2-h1>span+span {
    margin-top: 6px;
    line-height: 1.26;
}

.id2-h2 {
    font-family: 'Sora', sans-serif;
    font-weight: 400;
    font-size: clamp(30px, 3.4vw, 46px);
    line-height: 1.16;
    letter-spacing: -.04em;
    color: #0c2a23;
}

/* Section intro paragraph. Capped in ch rather than px so the measure holds
   at every clamp step instead of only at the design width. */
.id2-lead {
    margin-top: 18px;
    max-width: 62ch;
    font-size: 16.5px;
    line-height: 28px;
    color: rgba(6, 42, 34, .70);
}

/* The label → heading → intro block that opens every section. */
.id2-head {
    max-width: 720px;
}

.id2-head .id2-h2 {
    margin-top: 16px;
}

/* Heading on the left, a supporting line or link on the right. */
.id2-head-row {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (min-width:1024px) {
    .id2-head-row {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 40px;
    }

    .id2-head-row .id2-head {
        flex: 1 1 auto;
    }
}

/* ══ 1 · HERO ═════════════════════════════════════════════════════════════
   Badge → headline → copy + CTAs → capability strip → feature image.
   Same composition as option 1; the strip replaces its stats row. */

.id2-hero {
    position: relative;
    overflow: hidden;
    padding-top: 52px;
    padding-bottom: 64px;
}

@media (min-width:1024px) {
    .id2-hero {
        padding-top: 74px;
        padding-bottom: 96px;
    }
}

/* Copy left, actions right — the row option 1 runs under its headline.
   Aligned to the top, not centred: a three-line paragraph should not drag the
   buttons down the page with it. Stacks under 1024. */
.id2-hero-lead {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 36px;
}

@media (min-width:1024px) {
    .id2-hero-lead {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 40px;
        margin-top: 42px;
    }
}

/* The industry label. Same pill as option 1's badge, rebuilt as one class so
   the markup is a single element instead of three absolutely-positioned spans. */
.id2-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    padding: 7px 19px 7px 15px;
    border: 1px solid rgba(14, 158, 118, .26);
    border-radius: 999px;
    background: rgba(53, 214, 164, .07);
    backdrop-filter: blur(10px);
    font-size: 12.4px;
    line-height: 15px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #0b7a5c;
}

.id2-badge::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #35d6a4;
    box-shadow: 0 0 0 5px rgba(53, 214, 164, .16);
}

.id2-hero .id2-h1 {
    margin-top: 14px;
}

.id2-hero-sub {
    max-width: 570px;
    font-size: 17.5px;
    line-height: 31px;
    color: rgba(6, 42, 34, .70);
}

@media (min-width:1024px) {

    /* the paragraph's cap-height sits a touch above the buttons' optical centre;
     13px brings the two into line, as it does on option 1 */
    .id2-hero-sub {
        margin-top: 13px;
    }
}

/* ── buttons ──────────────────────────────────────────────────────────────
   The site's two button shapes, as classes.

   Under 480px the pair cannot sit side by side — "Discuss Your Project →" and
   "View Case Studies" want ~420px between them and a 375px screen offers 327.
   Left to wrap they stack at two different widths, which reads as an accident.
   So below that they stack deliberately, both full width. Height stays at
   54px, comfortably past the 44px touch minimum. */

.id2-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

@media (min-width:480px) {
    .id2-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 14px;
    }
}

@media (min-width:1024px) {

    /* in the lead row the buttons keep their intrinsic width and the paragraph
     takes the slack, rather than both splitting it */
    .id2-actions {
        flex: none;
    }
}

.id2-btn,
.id2-btn-sec {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 54px;
    padding: 0 28px;
    border-radius: 999px;
    font-family: 'Sora', sans-serif;
    font-size: 15.5px;
    transition: transform .2s cubic-bezier(.22, .61, .36, 1),
        background-color .2s, border-color .2s;
}

@media (min-width:640px) {

    .id2-btn,
    .id2-btn-sec {
        height: 59px;
        padding: 0 33px;
        font-size: 16px;
    }
}

.id2-btn {
    background: var(--grad-btn);
    font-weight: 600;
    color: #04231c;
    box-shadow: 0 16px 44px rgba(14, 158, 118, .24);
}

.id2-btn:hover {
    transform: translateY(-2px);
}

.id2-btn-sec {
    border: 1px solid rgba(6, 42, 34, .24);
    color: #0c2a23;
}

.id2-btn-sec:hover {
    border-color: rgba(6, 42, 34, .45);
    background: rgba(6, 42, 34, .03);
}

.id2-btn .id2-arr,
.id2-btn-sec .id2-arr {
    font-weight: 700;
}

/* ── hero visual ──────────────────────────────────────────────────────────
   The industry feature image, full shell width under the strip — option 1's
   placement and its 1169 x 558 frame, so the two heroes end the same way.

   `aspect-ratio` on the frame plus object-fit on the image means the box is
   the fixed thing and the artwork is what gets cropped. An industry whose
   image is square, portrait or 16:9 still lands in a hero the same height as
   every other, and the reserved box keeps the section from shifting on load.

   The ratio opens up as the screen narrows. Option 1 holds 1169/558 all the
   way down, which is 179px tall on a 375px phone — too thin for the image to
   carry anything. Squarer at the small end, matching the reference from
   1024 up. */

.id2-hero-fig {
    position: relative;
    margin: 46px 0 0;
    overflow: hidden;
    border: 1px solid rgba(6, 42, 34, .12);
    border-radius: 26px;
    background: #edf2ef;
    aspect-ratio: 4 / 3;
}

@media (min-width:640px) {
    .id2-hero-fig {
        aspect-ratio: 16 / 9;
    }
}

@media (min-width:1024px) {
    .id2-hero-fig {
        margin-top: 50px;
        aspect-ratio: 1169 / 558;
    }
}

.id2-hero-fig img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── hero capability strip ────────────────────────────────────────────────
   Closes the hero across the full shell, in the slot option 1 gives its stat
   row — and borrowing that row's geometry deliberately: one rule across the
   top, then vertical hairlines between items, so four things read as one
   object rather than as four boxes.

   What it carries is the difference. Option 1 puts delivery metrics here
   ("14 platforms", "0 incidents"), which only works for an industry we can
   actually count. This carries the systems we build for the sector instead —
   the same four words the Industries page already uses for it — so the strip
   is true for every industry on day one and nothing has to be invented to
   fill it.

   It also earns its place: it is the only part of the page that names the
   industry's own systems. Solutions below describes service lines generically,
   so the two inform rather than repeat. */

.id2-hero-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 20px;
    margin: 42px 0 0;
    padding: 26px 0 0;
    border-top: 1px solid rgba(6, 42, 34, .12);
    list-style: none;
}

/* Four across only from 1024. Option 1's version of this row goes 4-up at 768
   because it carries a number and three words; these carry a sentence, and at
   768 the four columns are ~170px, which breaks "Document Workflows" over two
   lines and its description over four. Two-up on a tablet matches how every
   other grid on the page behaves at that width. */
@media (min-width:1024px) {
    .id2-hero-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
        margin-top: 46px;
    }

    /* dividers between items only, never on the outer edges */
    .id2-hero-strip>*+* {
        border-left: 1px solid rgba(6, 42, 34, .12);
        padding-left: 26px;
    }

    .id2-hero-strip>* {
        padding-right: 26px;
    }

    .id2-hero-strip>*:last-child {
        padding-right: 0;
    }
}

/* An icon here, where "Why Prilixor" uses a numeral, keeps the two numbered
   4-up rows on this page from reading as the same component twice. */
.id2-hero-strip-ico {
    display: block;
    width: 19px;
    height: 19px;
    color: #0b7a5c;
}

.id2-hero-strip-ico svg {
    width: 24px;
    height: 24px;
}

.id2-hero-strip-t {
    margin-top: 13px;
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    line-height: 23px;
    letter-spacing: -.02em;
    color: #05241d;
}

.id2-hero-strip-p {
    margin-top: 6px;
    font-size: 13px;
    line-height: 21px;
    color: rgba(6, 42, 34, .66);
}


/* ══ 2 · CHALLENGES ═══════════════════════════════════════════════════════
   2 × 2 on desktop, one column on a phone. Thin border, small numeral,
   minimal icon, and a hover that moves the border rather than the card — the
   brief asks for a subtle effect, and a 4-up grid of lifting cards is not it. */

.id2-chal-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-top: 46px;
}

@media (min-width:768px) {
    .id2-chal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }
}

@media (min-width:1024px) {
    .id2-chal-grid {
        gap: 26px;
        margin-top: 56px;
    }
}

.id2-chal {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid rgba(6, 42, 34, .11);
    border-radius: 18px;
    background: #fff;
    padding: 26px 24px 28px;
    transition: border-color .3s cubic-bezier(.22, .61, .36, 1),
        box-shadow .3s cubic-bezier(.22, .61, .36, 1);
}

@media (min-width:1024px) {
    .id2-chal {
        padding: 32px 30px 34px;
    }
}

.id2-chal:hover {
    border-color: rgba(53, 214, 164, .45);
    box-shadow: 0 18px 44px rgba(6, 42, 34, .06);
}

.id2-chal-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.id2-chal-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(6, 42, 34, .10);
    border-radius: 12px;
    color: #0b7a5c;
    transition: border-color .3s, background-color .3s;
}

.id2-chal:hover .id2-chal-ico {
    border-color: rgba(53, 214, 164, .45);
    background: rgba(53, 214, 164, .08);
}

.id2-chal-ico svg {
    width: 19px;
    height: 19px;
}

.id2-chal-n {
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    letter-spacing: .16em;
    color: rgba(6, 42, 34, .34);
}

.id2-chal-t {
    margin-top: 20px;
    font-family: 'Sora', sans-serif;
    font-size: 19px;
    line-height: 26px;
    letter-spacing: -.025em;
    color: #05241d;
}

@media (min-width:1024px) {
    .id2-chal-t {
        font-size: 20px;
    }
}

.id2-chal-p {
    margin-top: 10px;
    font-size: 14.2px;
    line-height: 25px;
    color: rgba(6, 42, 34, .68);
}

/* ══ 3 · SOLUTIONS ════════════════════════════════════════════════════════
   Six compact cards on a 3-up grid. No icon plate here — option 1 already
   uses the gradient 46px plate, so this one takes a bare line icon and puts
   its weight into the learn-more row instead. */

.id2-sol-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-top: 46px;
}

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

@media (min-width:1024px) {
    .id2-sol-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
        margin-top: 56px;
    }
}

.id2-sol {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid rgba(6, 42, 34, .11);
    border-radius: 18px;
    background: linear-gradient(166.5deg, #ffffff 0%, #f3f8f6 100%);
    padding: 24px 22px 20px;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1),
        border-color .3s cubic-bezier(.22, .61, .36, 1),
        box-shadow .3s cubic-bezier(.22, .61, .36, 1);
}

.id2-sol:hover {
    transform: translateY(-3px);
    border-color: rgba(53, 214, 164, .42);
    box-shadow: 0 22px 50px rgba(6, 42, 34, .07);
}

.id2-sol-ico {
    display: block;
    flex: none;
    width: 24px;
    height: 24px;
    color: #0b7a5c;
}

.id2-sol-ico svg {
    width: 24px;
    height: 24px;
}

.id2-sol-t {
    margin-top: 18px;
    font-family: 'Sora', sans-serif;
    font-size: 17.5px;
    line-height: 25px;
    letter-spacing: -.02em;
    color: #05241d;
}

.id2-sol-p {
    margin-top: 9px;
    font-size: 13.8px;
    line-height: 24px;
    color: rgba(6, 42, 34, .68);
}

/* Learn-more sits on the card's baseline, so a 2-line and a 3-line card still
   line their arrows up across the row. */
.id2-sol-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 20px;
    font-family: 'Sora', sans-serif;
    font-size: 13.5px;
    color: #0b7a5c;
}

.id2-sol-more span {
    transition: translate .25s cubic-bezier(.22, .61, .36, 1);
}

/* `translate` rather than `transform`: motion.css reveals use `transform`, and
   the two properties compose instead of overwriting one another. */
.id2-sol:hover .id2-sol-more span {
    translate: 4px 0;
}

/* ══ 4 · USE CASES / WORKFLOW ═════════════════════════════════════════════
   One horizontal chain of nodes on desktop, the same chain stacked vertically
   on a phone. Connectors are drawn with ::after so no spacer elements end up
   in the accessibility tree. */

.id2-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 46px 0 0;
    padding: 26px 20px;
    list-style: none;
    border: 1px solid rgba(6, 42, 34, .10);
    border-radius: 22px;
    background: linear-gradient(166.5deg, #ffffff 0%, #f3f8f6 100%);
}

@media (min-width:1024px) {
    .id2-flow {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        margin-top: 56px;
        padding: 40px 24px 36px;
    }
}

.id2-flow-node {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 26px;
    min-width: 0;
}

.id2-flow-node:last-child {
    padding-bottom: 0;
}

/* vertical connector, phone and tablet */
.id2-flow-node:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 22px;
    top: 52px;
    bottom: 8px;
    width: 1px;
    background: rgba(6, 42, 34, .14);
}

@media (min-width:1024px) {
    .id2-flow-node {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 14px;
        padding: 0 6px;
    }

    /* horizontal connector: from this node's icon edge to the next node's icon
     edge. The columns are equal, so ±50% lands exactly on the neighbours. */
    .id2-flow-node:not(:last-child)::after {
        left: calc(50% + 30px);
        right: calc(-50% + 30px);
        top: 22px;
        bottom: auto;
        width: auto;
        height: 1px;
    }
}

.id2-flow-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 45px;
    height: 45px;
    border: 1px solid rgba(53, 214, 164, .40);
    border-radius: 50%;
    background: rgba(53, 214, 164, .10);
    color: #0b7a5c;
}

.id2-flow-ico svg {
    width: 20px;
    height: 20px;
}

.id2-flow-l {
    min-width: 0;
    padding-top: 11px;
}

@media (min-width:1024px) {
    .id2-flow-l {
        padding-top: 0;
    }
}

.id2-flow-n {
    display: block;
    font-family: 'Sora', sans-serif;
    font-size: 11px;
    letter-spacing: .18em;
    color: rgba(6, 42, 34, .38);
}

.id2-flow-t {
    display: block;
    margin-top: 5px;
    font-family: 'Sora', sans-serif;
    font-size: 14.5px;
    line-height: 20px;
    letter-spacing: -.015em;
    color: #05241d;
}

/* the three worked examples under the chain */
.id2-uc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-top: 24px;
}

@media (min-width:768px) {
    .id2-uc-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
        margin-top: 30px;
    }
}

.id2-uc {
    border-top: 1px solid rgba(6, 42, 34, .14);
    padding-top: 18px;
}

.id2-uc-n {
    font-size: 11.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #0b7a5c;
}

.id2-uc-t {
    margin-top: 10px;
    font-family: 'Sora', sans-serif;
    font-size: 17px;
    line-height: 24px;
    letter-spacing: -.02em;
    color: #05241d;
}

.id2-uc-p {
    margin-top: 8px;
    font-size: 13.6px;
    line-height: 23px;
    color: rgba(6, 42, 34, .66);
}

/* ══ 5 · TECHNOLOGY ═══════════════════════════════════════════════════════
   Four blocks separated by hairlines rather than four boxes — the brief asks
   for this section to stay compact, and dropping the card surface is the
   cheapest way to buy that without shrinking the type. */

.id2-tech-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 46px;
    border-top: 1px solid rgba(6, 42, 34, .12);
}

.id2-tech {
    border-bottom: 1px solid rgba(6, 42, 34, .12);
    padding: 24px 0;
}

@media (min-width:768px) {
    .id2-tech-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 40px;
    }
}

@media (min-width:1024px) {

    /* Four across, divided by one hairline per gap. The gap is carried as
     padding inside the items rather than as `column-gap`, so the rule sits
     exactly halfway between two columns instead of hard against one of them —
     a negative margin would do the same thing and be far easier to break. */
    .id2-tech-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 0;
        margin-top: 56px;
        border-bottom: 1px solid rgba(6, 42, 34, .12);
    }

    .id2-tech {
        border-bottom: 0;
        padding: 30px 24px 32px;
    }

    .id2-tech:first-child {
        padding-left: 0;
    }

    .id2-tech:last-child {
        padding-right: 0;
    }

    .id2-tech+.id2-tech {
        border-left: 1px solid rgba(6, 42, 34, .12);
    }
}

/* Small visible label over the chips. Kept as text, not a heading rule, so it
   sits closer to the list than a section heading would. */
.id2-chips-h {
    margin-top: 30px;
    font-size: 11.7px;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: rgba(6, 42, 34, .62);
}

.id2-tech-ico {
    display: block;
    width: 26px;
    height: 26px;
    color: #0b7a5c;
}

.id2-tech-ico svg {
    width: 26px;
    height: 26px;
}

.id2-tech-t {
    margin-top: 16px;
    font-family: 'Sora', sans-serif;
    font-size: 18px;
    line-height: 25px;
    letter-spacing: -.025em;
    color: #05241d;
}

.id2-tech-p {
    margin-top: 8px;
    font-size: 13.6px;
    line-height: 23px;
    color: rgba(6, 42, 34, .68);
}

/* The product list. Chips rather than option 1's comma-separated line — it is
   the same information, but it reads as an inventory instead of as prose, and
   it keeps this section from ending on a second paragraph. */

.id2-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.id2-chips li {
    border: 1px solid rgba(6, 42, 34, .13);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13.2px;
    line-height: 18px;
    color: rgba(6, 42, 34, .74);
}

/* ══ 6 · WHY PRILIXOR ═════════════════════════════════════════════════════
   Numbered items on a hairline, no card surface. The brief asks for this
   section to stay visually light, and it sits between two heavy ones. */

.id2-why-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    margin-top: 46px;
}

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

@media (min-width:1024px) {
    .id2-why-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 30px;
        margin-top: 56px;
    }
}

.id2-why {
    border-top: 1px solid rgba(6, 42, 34, .16);
    padding-top: 20px;
}

.id2-why-n {
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    letter-spacing: .12em;
    color: #0b7a5c;
}

.id2-why-t {
    margin-top: 14px;
    font-family: 'Sora', sans-serif;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: -.025em;
    color: #05241d;
}

.id2-why-p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 25px;
    color: rgba(6, 42, 34, .68);
}

/* ══ 7 · CASE STUDIES ═════════════════════════════════════════════════════
   Nothing here. The section reuses the case-study component already built for
   the site — its card, image ratio, metric overlay, action icon and grid all
   come from prilixor.css, which is exactly the point: the industry page must
   not fork that component, or the two drift the first time one is touched. */

/* ══ 8 · CTA ══════════════════════════════════════════════════════════════
   The site's dark CTA panel, with the label and the secondary action the
   brief asks for. Same gradient and radius as template-parts/cta.php. */

.id2-cta {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    background: linear-gradient(150deg, #06412f 0%, #05392b 52%, #04211a 100%);
    padding: 64px 24px;
    text-align: center;
}

@media (min-width:768px) {
    .id2-cta {
        padding: 84px 48px;
    }
}

.id2-cta-label {
    position: relative;
    font-size: 12.4px;
    line-height: 15.1px;
    letter-spacing: .21em;
    text-transform: uppercase;
    color: #7df0c8;
}

.id2-cta-h {
    position: relative;
    margin: 18px auto 0;
    max-width: 700px;
    font-family: 'Sora', sans-serif;
    font-weight: 400;
    font-size: clamp(30px, 4vw, 54px);
    line-height: 1.16;
    letter-spacing: -.045em;
    color: #e9f4f0;
}

.id2-cta-p {
    position: relative;
    margin: 20px auto 0;
    max-width: 560px;
    font-size: 15.5px;
    line-height: 27px;
    color: rgba(234, 246, 241, .72);
}

.id2-cta-actions {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px 28px;
    margin-top: 40px;
}

/* The secondary action. It has to be a 44px tap target, but a 44px-tall box
   with `border-bottom` puts the rule a long way under the text — so the box
   carries the height and a pseudo-element draws the underline where it belongs,
   just below the baseline. */
.id2-cta-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 2px;
    font-family: 'Sora', sans-serif;
    font-size: 15.5px;
    color: #e9f4f0;
    transition: color .2s;
}

.id2-cta-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% + 12px);
    height: 1px;
    background: rgba(233, 244, 240, .40);
    transition: background-color .2s;
}

.id2-cta-link:hover {
    color: #7df0c8;
}

.id2-cta-link:hover::after {
    background: #7df0c8;
}

/* ── reduced motion ───────────────────────────────────────────────────────
   input.css ships a global kill switch for animation. The lifts and the
   arrow nudge are transitions on transform/translate, so they need stopping
   explicitly rather than relying on that rule. */

@media (prefers-reduced-motion:reduce) {

    .id2-sol:hover,
    .id2-btn:hover {
        transform: none;
    }

    .id2-sol:hover .id2-sol-more span {
        translate: none;
    }
}